/* ═══════════════════════════════════════════════════════════════════════
   CMS Pages contenu — Styles complémentaires v2.
   Ajoute uniquement les classes nouvelles introduites par cp-render-v2.php.
   Les styles existants de content-pages.css (cp-page, cp-section, cp-quicknav,
   cp-faq, cp-tags, cp-cta, cp-info-cards, cp-guide-hub) restent la base.
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper de sécurité pour le contenu raw_html migré.
   display:block (défaut) crée une boîte propre qui absorbe les </div> non appariés
   issus du seeding partiel de fichiers legacy. Sans ce wrapper, un </div> orphelin
   peut fermer prématurément cp-page--v2 et propulser support_bar hors du conteneur. */
.cp-raw-html-wrapper {
    display: block;
    width: 100%;
}

/* Variables locales (fallback si content-pages.css ne les définit pas) */
.cp-page--v2 {
    --cp-v2-radius: 14px;
    --cp-v2-radius-sm: 8px;
    --cp-v2-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    --cp-v2-shadow-md: 0 4px 16px rgba(15, 23, 42, .07);
    --cp-v2-border: rgba(15, 23, 42, .08);
    --cp-v2-text: #1e293b;
    --cp-v2-text-light: #64748b;
    --cp-v2-bg-soft: #f8fafc;
    --cp-v2-accent: var(--cp-accent, #ff6e2c);
    --cp-v2-blue: #0e7490;
    --cp-v2-green: #16a34a;
    --cp-v2-orange: #ea580c;
    --cp-v2-red: #dc2626;
    --cp-v2-purple: #7c3aed;
}

.cp-page--printer-guide.cp-page--v2 {
    --cp-v2-accent: var(--uc-blue, #0e7490);
}

/* ───────────────────────────────────────────────────────────
   SECTIONS — variants modificateurs
   ─────────────────────────────────────────────────────────── */

.cp-section--soft {
    background: var(--cp-v2-bg-soft);
    border-radius: var(--cp-v2-radius);
    padding: 1.5rem 1.5rem;
    margin: 1.25rem 0;
}

.cp-section--accent {
    border-left: 4px solid var(--cp-v2-accent);
    padding-left: 1.25rem;
}

.cp-section__intro {
    margin-bottom: 1rem;
    color: var(--cp-v2-text-light);
}

/* ───────────────────────────────────────────────────────────
   INTRO — variant lead
   ─────────────────────────────────────────────────────────── */

.cp-guide-intro--lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--cp-v2-text);
    margin-bottom: 1.5rem;
}

/* ───────────────────────────────────────────────────────────
   CALLOUT — encart d'attention (4 variants)
   ─────────────────────────────────────────────────────────── */

.cp-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--cp-v2-radius);
    border-left: 4px solid var(--cp-v2-blue);
    background: #eff6ff;
    margin: 1.25rem 0;
    line-height: 1.55;
}
.cp-callout__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .85);
    color: var(--cp-v2-blue);
    font-size: 1rem;
}
.cp-callout__body {
    flex: 1;
    min-width: 0;
}
.cp-callout__title {
    margin: 0 0 .35rem;
    font-weight: 600;
    color: var(--cp-v2-text);
}
.cp-callout__content { margin: 0; }
.cp-callout__content p { margin: 0 0 .5rem; }
.cp-callout__content p:last-child { margin-bottom: 0; }

.cp-callout--tip {
    background: #f0fdf4;
    border-left-color: var(--cp-v2-green);
}
.cp-callout--tip .cp-callout__icon { color: var(--cp-v2-green); }

.cp-callout--warning {
    background: #fff7ed;
    border-left-color: var(--cp-v2-orange);
}
.cp-callout--warning .cp-callout__icon { color: var(--cp-v2-orange); }

.cp-callout--danger {
    background: #fef2f2;
    border-left-color: var(--cp-v2-red);
}
.cp-callout--danger .cp-callout__icon { color: var(--cp-v2-red); }

/* ───────────────────────────────────────────────────────────
   MEDIA — figure image / vidéo / iframe
   ─────────────────────────────────────────────────────────── */

.cp-media {
    margin: 1.5rem 0;
    border-radius: var(--cp-v2-radius);
    overflow: hidden;
    box-shadow: var(--cp-v2-shadow);
    background: #fff;
}
.cp-media__image,
.cp-media__video,
.cp-media__iframe {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}
.cp-media--youtube .cp-media__iframe,
.cp-media--iframe .cp-media__iframe {
    aspect-ratio: 16 / 9;
}
.cp-media__caption {
    padding: .75rem 1rem;
    background: var(--cp-v2-bg-soft);
    color: var(--cp-v2-text-light);
    font-size: .875rem;
    text-align: center;
}

/* ───────────────────────────────────────────────────────────
   CARDS GRID — variants colonnes
   ─────────────────────────────────────────────────────────── */

.cp-cards-grid--cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.cp-cards-grid--cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cp-cards-grid--cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 900px) {
    .cp-cards-grid--cols-3, .cp-cards-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .cp-cards-grid--cols-2, .cp-cards-grid--cols-3, .cp-cards-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

.cp-info-card__label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--cp-v2-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}

/* ───────────────────────────────────────────────────────────
   STEPS — étapes numérotées
   ─────────────────────────────────────────────────────────── */

.cp-steps {
    list-style: none;
    counter-reset: cp-step;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: 1rem;
}
.cp-step {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: var(--cp-v2-radius);
    border: 1px solid var(--cp-v2-border);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cp-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--cp-v2-shadow-md);
}
.cp-step__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cp-v2-accent);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 1rem;
}
.cp-step__body { flex: 1; min-width: 0; }
.cp-step__title { margin: 0 0 .4rem; font-size: 1.05rem; }
.cp-step__title i { color: var(--cp-v2-accent); margin-right: .35rem; }
.cp-step__text { color: var(--cp-v2-text-light); line-height: 1.55; }
.cp-step__text p { margin: 0 0 .5rem; }
.cp-step__text p:last-child { margin-bottom: 0; }

.cp-steps--printer .cp-step__num { background: var(--cp-v2-blue); }
.cp-steps--printer .cp-step__title i { color: var(--cp-v2-blue); }

.cp-steps--compact .cp-step { padding: .75rem 1rem; }
.cp-steps--compact .cp-step__num { width: 28px; height: 28px; font-size: .9rem; }

/* ───────────────────────────────────────────────────────────
   CHECKLIST — points cochés / barrés
   ─────────────────────────────────────────────────────────── */

.cp-checklist {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: .75rem;
}
.cp-checklist__item {
    display: flex;
    gap: .85rem;
    padding: .85rem 1rem;
    background: #fff;
    border-radius: var(--cp-v2-radius-sm);
    border: 1px solid var(--cp-v2-border);
    align-items: flex-start;
}
.cp-checklist__icon {
    flex-shrink: 0;
    color: var(--cp-v2-green);
    font-size: 1.15rem;
    padding-top: .15rem;
}
.cp-checklist__body { flex: 1; }
.cp-checklist__title { display: block; margin-bottom: .15rem; color: var(--cp-v2-text); }
.cp-checklist__text { color: var(--cp-v2-text-light); line-height: 1.5; font-size: .95rem; }

.cp-checklist--errors .cp-checklist__icon { color: var(--cp-v2-red); }
.cp-checklist--errors .cp-checklist__item { background: #fef2f2; border-color: rgba(220, 38, 38, .15); }

.cp-checklist--requirements .cp-checklist__icon { color: var(--cp-v2-blue); }

/* ───────────────────────────────────────────────────────────
   COMPARISON TABLE — tableau comparatif
   ─────────────────────────────────────────────────────────── */

.cp-compare-table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    border-radius: var(--cp-v2-radius);
    box-shadow: var(--cp-v2-shadow);
    background: #fff;
}
.cp-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.cp-compare-table th,
.cp-compare-table td {
    padding: .85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--cp-v2-border);
    vertical-align: top;
}
.cp-compare-table thead th {
    background: var(--cp-v2-bg-soft);
    color: var(--cp-v2-text);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.cp-compare-table tbody tr:last-child td { border-bottom: 0; }
.cp-compare-table-wrap--striped .cp-compare-table tbody tr:nth-child(odd) { background: #fafbfc; }

/* ───────────────────────────────────────────────────────────
   CTA — variants
   ─────────────────────────────────────────────────────────── */

.cp-cta--inline {
    background: transparent;
    padding: .75rem 0;
    text-align: left;
}
.cp-cta--centered {
    text-align: center;
    background: var(--cp-v2-bg-soft);
    border-radius: var(--cp-v2-radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.cp-cta--final {
    text-align: center;
    background: linear-gradient(135deg, var(--cp-v2-accent), color-mix(in srgb, var(--cp-v2-accent) 80%, #000));
    color: #fff;
    border-radius: var(--cp-v2-radius);
    padding: 2rem 1.5rem;
    margin: 2rem 0 1.5rem;
}
.cp-cta--final .cp-cta__title,
.cp-cta--final .cp-cta__text { color: #fff; }
.cp-cta--final .cp-cta__btn--outline {
    border-color: rgba(255,255,255,.6);
    color: #fff;
}
.cp-cta--final .cp-cta__btn--outline:hover {
    background: rgba(255,255,255,.15);
}

/* ───────────────────────────────────────────────────────────
   SEO TAGS — variants
   ─────────────────────────────────────────────────────────── */

.cp-tags--subtle { opacity: .8; }
.cp-tags--printer .cp-tag {
    background: rgba(14, 116, 144, .08);
    color: var(--cp-v2-blue);
}

/* ───────────────────────────────────────────────────────────
   HERO v2 — highlights + boutons + search
   ─────────────────────────────────────────────────────────── */

.cp-hero--compact__actions {
    margin-top: 1rem;
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}
.cp-hero--compact__actions .cp-cta__btn {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .95rem;
}
.cp-hero--compact__highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
@media (max-width: 760px) {
    .cp-hero--compact__highlights { grid-template-columns: 1fr; }
}
.cp-hero--compact__highlight {
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(8px);
    border-radius: var(--cp-v2-radius-sm);
    padding: .85rem 1rem;
    border: 1px solid var(--cp-v2-border);
    display: grid;
    gap: .25rem;
}
.cp-hero--compact__highlight-icon {
    color: var(--cp-v2-accent);
    font-size: 1.1rem;
}
.cp-hero--compact__highlight-title {
    color: var(--cp-v2-text);
    font-size: .95rem;
}
.cp-hero--compact__highlight-text {
    color: var(--cp-v2-text-light);
    font-size: .85rem;
    line-height: 1.4;
}