/* ================================================================
   Pages « Solutions » et « Guides » du site public (préfixe sol-).
   S'appuie sur landing-premium.css (--lp-*) et public-pages.css
   (page-hero, page-title, page-lead…). Mode sombre en fin de fichier.
   ================================================================ */

/* ── En-tête ─────────────────────────────────────────────────── */
.sol-hero { text-align: left; padding-bottom: 48px; }
.sol-ariane {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: 22px; font-size: .84rem; color: var(--lp-gray);
}
.sol-ariane a { color: var(--lp-gray); text-decoration: none; }
.sol-ariane a:hover { color: var(--lp-blue); }
.sol-ariane i { font-size: .7rem; opacity: .6; }
.sol-ariane span { color: var(--lp-anthracite); font-weight: 600; }
.sol-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.sol-hero.avec-image .sol-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sol-hero .page-lead { margin: 0; max-width: 640px; }
.sol-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sol-meta { margin: 18px 0 0; font-size: .85rem; color: var(--lp-gray); display: flex; align-items: center; gap: 6px; }
.sol-hero-img img {
    width: 100%; height: auto; display: block;
    border-radius: 18px; border: 1px solid #EAECF0;
    box-shadow: 0 30px 60px -28px rgba(16, 24, 40, .35);
}

/* ── Contenu ─────────────────────────────────────────────────── */
.sol-contenu { max-width: 860px; margin: 0 auto; }
.sol-bloc { margin: 0 0 56px; }
.sol-h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 18px; font-size: 1.5rem; font-weight: 800; line-height: 1.25;
    color: var(--lp-anthracite); letter-spacing: -.3px;
}
.sol-h2 i {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 1.15rem;
}
.sol-texte p, .sol-bloc > p { font-size: 1.02rem; line-height: 1.8; color: #475467; margin: 0 0 14px; }
.sol-petit { font-size: .86rem !important; color: var(--lp-gray) !important; line-height: 1.6 !important; }
.sol-liste { margin: 0 0 14px; padding-left: 0; list-style: none; }
.sol-liste li {
    position: relative; padding: 8px 0 8px 30px;
    font-size: 1rem; line-height: 1.7; color: #475467;
    border-bottom: 1px dashed #EAECF0;
}
.sol-liste li:last-child { border-bottom: 0; }
.sol-liste li::before {
    content: ''; position: absolute; left: 6px; top: 18px;
    width: 9px; height: 9px; border-radius: 3px; background: var(--lp-blue);
}
.sol-liste strong, .sol-texte strong { color: var(--lp-anthracite); }
.sol-formule {
    margin: 18px 0 !important; padding: 14px 18px;
    border-radius: 12px; border-left: 4px solid var(--lp-blue);
    background: var(--lp-light-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .98rem !important; font-weight: 600; color: var(--lp-anthracite) !important;
    overflow-x: auto; white-space: nowrap;
}

/* Cartes */
.sol-cartes { display: grid; gap: 14px; margin: 6px 0 16px; }
.sol-cartes.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-cartes.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-carte {
    padding: 20px; border-radius: 16px;
    background: #fff; border: 1.5px solid #EAECF0;
    transition: border-color .2s ease, transform .2s ease;
}
.sol-carte:hover { border-color: rgba(0, 78, 146, .3); transform: translateY(-2px); }
.sol-carte .ic {
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 1.2rem;
}
.sol-carte h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--lp-anthracite); }
.sol-carte p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--lp-gray); }

/* Étapes */
.sol-etapes { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sol-etapes li { display: flex; gap: 16px; padding: 0 0 22px; position: relative; }
.sol-etapes li:not(:last-child)::after {
    content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: #EAECF0;
}
.sol-etapes .n {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-blue); color: #fff; font-weight: 800; font-size: .95rem;
}
.sol-etapes h3 { margin: 6px 0 4px; font-size: 1.02rem; font-weight: 700; color: var(--lp-anthracite); }
.sol-etapes p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--lp-gray); }

/* Tableaux et exemple chiffré */
.sol-table-wrap { overflow-x: auto; border: 1.5px solid #EAECF0; border-radius: 14px; margin: 6px 0 14px; background: #fff; }
.sol-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.sol-table th, .sol-table td { padding: 12px 16px; border-bottom: 1px solid #EAECF0; text-align: left; vertical-align: top; color: #475467; }
.sol-table thead th { background: var(--lp-light-bg); font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--lp-gray); }
.sol-table tbody th { font-weight: 600; color: var(--lp-anthracite); }
.sol-table tbody tr:last-child th, .sol-table tbody tr:last-child td { border-bottom: 0; }
.sol-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sol-table tr.fort th, .sol-table tr.fort td { background: var(--lp-blue-soft); color: var(--lp-anthracite); font-weight: 700; }
.sol-table tr.fort .n { color: var(--lp-blue); }

.sol-exemple { margin: 0 0 56px; }
.sol-exemple figcaption { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sol-exemple .tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 99px;
    background: var(--lp-yellow-soft); color: #93370D; font-size: .76rem; font-weight: 700;
}
.sol-exemple strong { font-size: 1.15rem; color: var(--lp-anthracite); }
.sol-exemple .ctx { font-size: .88rem; color: var(--lp-gray); }
.sol-note { display: flex; gap: 8px; margin: 0; font-size: .88rem; line-height: 1.6; color: var(--lp-gray); }
.sol-note i { color: var(--lp-blue); margin-top: 3px; flex-shrink: 0; }

/* Questions */
.sol-faq { display: flex; flex-direction: column; gap: 10px; }
.sol-faq details { border: 1.5px solid #EAECF0; border-radius: 14px; background: #fff; }
.sol-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; cursor: pointer; list-style: none;
    font-weight: 700; color: var(--lp-anthracite);
}
.sol-faq summary::-webkit-details-marker { display: none; }
.sol-faq summary i { transition: transform .2s ease; color: var(--lp-gray); }
.sol-faq details[open] summary { color: var(--lp-blue); }
.sol-faq details[open] summary i { transform: rotate(180deg); }
.sol-faq details p { margin: 0; padding: 0 20px 18px; font-size: .96rem; line-height: 1.7; color: #475467; }

/* Relecture */
.sol-relecture {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 8px 0 0; padding: 18px 20px; border-radius: 14px;
    background: var(--lp-light-bg); border: 1px solid #EAECF0;
}
.sol-relecture i { font-size: 1.5rem; color: var(--lp-blue); flex-shrink: 0; }
.sol-relecture p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--lp-gray); }
.sol-relecture strong { color: var(--lp-anthracite); }

/* Pages liées */
.sol-liees { max-width: 1100px; margin: 72px auto 0; }
.sol-liees .sol-h2 { justify-content: center; }
.sol-liees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sol-liee {
    display: flex; flex-direction: column; gap: 6px; padding: 22px;
    border-radius: 18px; background: #fff; border: 1.5px solid #EAECF0;
    text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sol-liee:hover { border-color: rgba(0, 78, 146, .35); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 78, 146, .45); }
.sol-liee .ic {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 1.2rem;
}
.sol-liee .genre { font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--lp-gray); }
.sol-liee strong { font-size: 1.05rem; color: var(--lp-anthracite); line-height: 1.35; }
.sol-liee .txt { font-size: .88rem; line-height: 1.6; color: var(--lp-gray); flex: 1; }
.sol-liee .go { margin-top: 6px; font-size: .88rem; font-weight: 700; color: var(--lp-blue); display: inline-flex; align-items: center; gap: 6px; }
.sol-guides { max-width: 1100px; margin: 0 auto; }

/* Appel à l'action final */
.sol-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    max-width: 1100px; margin: 72px auto 0; padding: 40px 44px;
    border-radius: 24px; color: #fff;
    background: linear-gradient(135deg, #003a6e 0%, #004E92 55%, #0069c4 100%);
}
.sol-cta h2 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; color: #fff; }
.sol-cta p { margin: 0; color: rgba(255, 255, 255, .82); }
.sol-cta-act { display: flex; flex-wrap: wrap; gap: 12px; }
.sol-btn-blanc { background: #fff !important; color: var(--lp-blue) !important; border: 0; }
.sol-btn-contour { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; }
.sol-btn-contour:hover { border-color: #fff !important; }


/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sol-hero.avec-image .sol-hero-grid { grid-template-columns: 1fr; }
    .sol-cartes.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .sol-cartes.cols-3, .sol-cartes.cols-2 { grid-template-columns: 1fr; }
    .sol-h2 { font-size: 1.25rem; }
    .sol-cta { padding: 28px 22px; }
    .sol-cta h2 { font-size: 1.3rem; }
    .sol-table th, .sol-table td { padding: 10px 12px; }
    .sol-formule { font-size: .85rem !important; }
}

/* ── Mode sombre ─────────────────────────────────────────────── */
body.dark .sol-ariane span, body.dark .sol-h2, body.dark .sol-carte h3, body.dark .sol-etapes h3,
body.dark .sol-exemple strong, body.dark .sol-faq summary, body.dark .sol-liee strong,
body.dark .sol-liste strong, body.dark .sol-texte strong, body.dark .sol-relecture strong,
body.dark .sol-table tbody th, body.dark .sol-formule { color: #eef2ff !important; }
body.dark .sol-texte p, body.dark .sol-bloc > p, body.dark .sol-liste li, body.dark .sol-faq details p,
body.dark .sol-table th, body.dark .sol-table td { color: #c9cfdb; }
body.dark .sol-carte p, body.dark .sol-etapes p, body.dark .sol-liee .txt, body.dark .sol-note,
body.dark .sol-relecture p, body.dark .sol-exemple .ctx, body.dark .sol-meta, body.dark .sol-ariane,
body.dark .sol-ariane a, body.dark .sol-petit { color: #a8b0bf !important; }
body.dark .sol-carte, body.dark .sol-faq details, body.dark .sol-liee, body.dark .sol-table-wrap {
    background: #1a1f27; border-color: #2f3644;
}
body.dark .sol-table th, body.dark .sol-table td, body.dark .sol-liste li { border-color: #2f3644; }
body.dark .sol-table thead th { background: #222833; color: #a8b0bf; }
body.dark .sol-table tr.fort th, body.dark .sol-table tr.fort td { background: rgba(140, 198, 255, .1); }
body.dark .sol-table tr.fort .n { color: #8cc6ff; }
body.dark .sol-formule, body.dark .sol-relecture { background: #1a1f27; border-color: #2f3644; }
body.dark .sol-formule { border-left-color: #8cc6ff; }
body.dark .sol-h2 i, body.dark .sol-carte .ic, body.dark .sol-liee .ic { background: rgba(140, 198, 255, .12); color: #8cc6ff; }
body.dark .sol-liee .go, body.dark .sol-faq details[open] summary, body.dark .sol-relecture i, body.dark .sol-note i { color: #8cc6ff; }
body.dark .sol-exemple .tag { background: rgba(251, 191, 36, .14); color: #fedf89; }
body.dark .sol-etapes li:not(:last-child)::after { background: #2f3644; }
body.dark .sol-hero-img img { border-color: #2f3644; filter: brightness(.9); }
body.dark .sol-cta { background: linear-gradient(135deg, #0b2440 0%, #0d3a6b 55%, #1559a0 100%); }

/* En-tête sans capture (guides) : aligné sur la colonne de lecture */
.sol-hero:not(.avec-image) .container > .sol-ariane,
.sol-hero:not(.avec-image) .sol-hero-grid { max-width: 860px; margin-left: auto; margin-right: auto; }
.sol-hero .page-title { overflow-wrap: anywhere; }