/* ============================================================================
   OLTANIS — Pages SEO (solutions par besoin / par métier)
   Styles complémentaires. Réutilise au maximum landing.css (.page, .section,
   .btn*, .kick, .wm, .footer*, .faq*, .cta-*, .section-head, .tick…).
   Lier dans l'ordre : colors_and_type.css → landing.css → pages.css
   ========================================================================== */

/* ---- Fil d'Ariane -------------------------------------------------------- */
.crumb { border-bottom: 1px solid var(--hairline); }
.crumb .page { display: flex; align-items: center; gap: 10px; padding-top: 16px; padding-bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-50); flex-wrap: wrap; }
.crumb a { color: var(--encre-60); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.crumb a:hover { color: var(--cobalt); }
.crumb .sep { color: var(--encre-40, #b8b8b8); }
.crumb .here { color: var(--encre); }

/* ---- Héros de page SEO --------------------------------------------------- */
.seo-hero { position: relative; overflow: hidden; padding-top: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--hairline); }
.seo-hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 62%; height: 150%; background: var(--glow-cobalt); pointer-events: none; z-index: 0; }
@media (min-width: 768px) { .seo-hero { padding-top: 88px; padding-bottom: 88px; } }
.seo-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 980px) { .seo-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 72px; } }
.seo-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.seo-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); flex: none; }
.seo-h1 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(38px, 6vw, 68px); line-height: 0.98; }
.seo-h1 .accent-i { font-style: italic; color: var(--cobalt); }
.seo-lead { margin: 24px 0 0; max-width: 52ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--encre-80); }
.seo-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.seo-trust { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.seo-trust span { position: relative; padding-left: 20px; font-size: 14px; color: var(--encre-70); }
.seo-trust span::before { content: "→"; position: absolute; left: 0; color: var(--cobalt); font-family: var(--font-mono); }

/* ---- Carte de points clés (aside du héros) ------------------------------ */
.seo-points { border: 1px solid var(--hairline); }
.seo-points-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.seo-points-head .m { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-60); }
.seo-points ul { list-style: none; margin: 0; padding: 0; }
.seo-points li { display: flex; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.seo-points li:last-child { border-bottom: 0; }
.seo-points .i { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--cobalt); flex: none; width: 26px; }
.seo-points .t { font-size: 15px; line-height: 1.5; color: var(--encre-85); }
.seo-points .t b { font-weight: 600; color: var(--encre); }

/* ---- Lignes de bénéfices (feature rows) --------------------------------- */
.featrow { display: grid; grid-template-columns: 1fr; gap: 8px 56px; padding: 40px 0; border-top: 1px solid var(--hairline); }
@media (min-width: 880px) { .featrow { grid-template-columns: 0.4fr 0.6fr; padding: 56px 0; } }
.featrow:last-of-type { border-bottom: 1px solid var(--hairline); }
.featrow-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-50); }
.featrow-h { margin: 10px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.04; }
.featrow-b { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre-80); }
.featrow-b + .featrow-list { margin-top: 18px; }
.featrow-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .featrow-list { grid-template-columns: 1fr 1fr; } }
.featrow-list li { display: flex; gap: 12px; font-size: 14px; color: var(--encre-85); }
.featrow-list .tick { margin-top: 7px; display: inline-block; height: 1px; width: 16px; background: var(--encre-50); flex: none; }

/* ---- Bandeau maillage interne (related) --------------------------------- */
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 620px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.relcard { position: relative; background: var(--blanc); padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; text-decoration: none; color: inherit; transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease); }
.relcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 1; }
.relcard .rc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-50); }
.relcard .rc-t { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 24px; line-height: 1.06; }
.relcard .rc-m { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--encre-70); }
.relcard:hover .rc-m { color: var(--cobalt); }
.relcard:hover .rc-arrow { transform: translateX(4px); }
.rc-arrow { transition: transform var(--dur-ui) var(--ease); display: inline-block; }
.relcard.is-cta { background: var(--encre); color: var(--blanc); }
.relcard.is-cta { background: var(--grad-ink); }
.relcard.is-cta:hover { background: var(--cobalt); box-shadow: var(--shadow-cobalt); }
.relcard.is-cta .rc-k { color: var(--blanc-60); }
.relcard.is-cta .rc-m { color: var(--blanc-80); }

/* ---- Colonne « Solutions » du footer (maillage) ------------------------- */
.footer-col ul li a[hreflang], .footer-col .new { }

/* ---- Hub Solutions ------------------------------------------------------- */
.hub-group { margin-top: 56px; }
.hub-group:first-of-type { margin-top: 0; }
.hub-group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.hub-group-head .m { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-60); }
.hub-group-head .rule { flex: 1; height: 1px; background: var(--hairline); }

/* ---- Footer 5 colonnes (avec colonne Solutions) ------------------------- */
@media (min-width: 760px) {
  .footer-grid--5 { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; }
}

/* ---- Offre commerçant (carte + compléments) ----------------------------- */
.offer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .offer-grid { grid-template-columns: 0.9fr 1.1fr; } }
.offer-side { display: flex; flex-direction: column; }
.offer-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.offer-row:first-child { border-top: 1px solid var(--hairline); }
.offer-row-t { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 18px; line-height: 1.1; }
.offer-row-d { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--encre-70); }
.offer-row-p { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 26px; line-height: 1; white-space: nowrap; }
.offer-row-p span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-50); margin-left: 6px; }
.offer-note { margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--encre-80); }

/* ---- Affinages responsive (pages solutions) ----------------------------- */
@media (max-width: 600px) {
  .featrow { padding: 32px 0; gap: 6px 0; }
  .relcard { padding: 22px 20px; min-height: 150px; }
  .seo-points li { padding: 16px; }
  /* Carte « compléments » de l'offre : nom + prix sur deux lignes propres */
  .offer-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .offer-row-p { font-size: 24px; }
}
@media (max-width: 520px) {
  .seo-hero { padding-top: 40px; padding-bottom: 40px; }
}

/* ---- Blog / article ----------------------------------------------------- */
.article { max-width: 760px; margin: 0 auto; }
.article-head { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--hairline); }
.article-h1 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(32px, 5vw, 52px); line-height: 1.03; }
.article-lead { margin: 20px 0 0; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--encre-80); }
.prose { font-size: 17px; line-height: 1.7; color: var(--encre-85); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; margin-top: 44px; color: var(--encre); }
.prose h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 20px; margin-top: 32px; color: var(--encre); }
.prose a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul { margin: 16px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li { line-height: 1.6; }
.prose strong { color: var(--encre); font-weight: 600; }
.article-cta { max-width: 760px; margin: 48px auto 0; border: 1px solid var(--cobalt); border-left: 3px solid var(--cobalt); padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.article-cta p { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(18px, 2.4vw, 22px); }
.post-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-50); }
.relcard .rc-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--encre-50); margin-top: 6px; }


/* ===========================================================================
   Motion (v2) — entrée échelonnée des héros de pages internes
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .seo-eyebrow[data-reveal] { transition-delay: 40ms; }
  .seo-h1[data-reveal]      { transition-delay: 120ms; }
  .seo-lead[data-reveal]    { transition-delay: 200ms; }
  .seo-actions[data-reveal] { transition-delay: 290ms; }
  .seo-trust[data-reveal]   { transition-delay: 360ms; }
  .seo-points[data-reveal]  { transition-delay: 240ms; }
}

/* clip-path reveal (technique ui-animation) — la carte de points se dévoile de haut en bas */
@media (prefers-reduced-motion: no-preference) {
  .seo-points[data-reveal] { transform: none; clip-path: inset(0 0 100% 0);
    transition: clip-path 760ms var(--ease-out), opacity var(--dur-reveal) var(--ease-out); }
  .seo-points[data-reveal].is-revealed { clip-path: inset(0 0 0 0); }
}

/* ===== Thème sombre — pages Solutions / Blog ===== */
.relcard { background: var(--ink-2, #14141d); }
.relcard.is-cta { background: #050509; border-color: rgba(24,70,220,0.5); }
/* Correctifs dark : textes restés en --encre solide */
.crumb .here, .seo-points .t b, .prose h2, .prose h3, .prose strong { color: var(--blanc); }

/* Date de mise à jour visible (signal de fraîcheur pour lecteurs et moteurs IA) */
.maj-note { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanc-60); }