/* ════════════════════════════════════════════════════════════════════════
   eMoteek — Styles des modules CMS (Page Builder)
   ────────────────────────────────────────────────────────────────────────
   Cette feuille est partagée par :
     - le rendu public (views/includes/header.php) ;
     - l'aperçu et l'éditeur de l'admin (?page=contenus).
   Les classes .cms-* correspondent aux modules générés par CmsBlocks::render()
   (back/cms_blocks.php). Aucun JavaScript n'est requis côté public :
   l'accordéon utilise <details>/<summary>, la vidéo un <iframe> responsive.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --cms-primary: #1e3a5f;
    --cms-primary-soft: #eef4ff;
    --cms-border: #e2e8f0;
    --cms-text: #1f2933;
    --cms-muted: #64748b;
}

/* Espacement vertical homogène entre modules */
.cms-page-content .cms-block { margin: 0 0 32px; }
.cms-page-content .cms-block:last-child { margin-bottom: 0; }

/* Zone CMS injectée dans une page dynamique (accueil, contact) */
.cms-injected { padding: 48px 0; }
.cms-injected:empty { display: none; }

/* ── Texte / titres ──────────────────────────────────────────────────── */
.cms-block--text { line-height: 1.7; color: var(--cms-text); }
.cms-block--text p { margin: 0 0 14px; }
.cms-heading { margin: 0; color: var(--cms-primary); line-height: 1.25; }
.cms-heading--center { text-align: center; }
.cms-heading--right  { text-align: right; }

/* ── Image ───────────────────────────────────────────────────────────── */
.cms-image { margin: 0; }
.cms-image figure { margin: 0; }
.cms-image img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.cms-image--center { text-align: center; }
.cms-image--center img, .cms-image--center figure { margin-left: auto; margin-right: auto; }
.cms-image--right { text-align: right; }
.cms-image--right img, .cms-image--right figure { margin-left: auto; }
.cms-image figcaption {
    margin-top: 8px; font-size: 13px; color: var(--cms-muted);
    font-style: italic; text-align: center;
}

/* ── Bouton CTA ──────────────────────────────────────────────────────── */
.cms-btn-wrap { display: flex; }
.cms-btn-wrap--left   { justify-content: flex-start; }
.cms-btn-wrap--center { justify-content: center; }
.cms-btn-wrap--right  { justify-content: flex-end; }
.cms-btn-wrap .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ── Colonnes ────────────────────────────────────────────────────────── */
.cms-columns { display: grid; gap: 24px; align-items: start; }
.cms-columns > div { min-width: 0; }
.cms-columns img { max-width: 100%; height: auto; }
@media (max-width: 760px) {
    .cms-columns { grid-template-columns: 1fr !important; }
}

/* ── Hero / bannière ─────────────────────────────────────────────────── */
.cms-hero {
    position: relative; border-radius: 12px; overflow: hidden;
    background: var(--cms-primary); color: #fff;
    background-size: cover; background-position: center;
    display: flex; align-items: center;
}
.cms-hero--small  { min-height: 220px; }
.cms-hero--medium { min-height: 340px; }
.cms-hero--large  { min-height: 480px; }
.cms-hero__overlay { position: absolute; inset: 0; background: #0b1c30; }
.cms-hero__inner {
    position: relative; z-index: 1; width: 100%;
    padding: 40px 32px; max-width: 760px;
}
.cms-hero--center { justify-content: center; text-align: center; }
.cms-hero--center .cms-hero__inner { margin: 0 auto; }
.cms-hero__title { font-size: clamp(26px, 4vw, 42px); margin: 0 0 12px; color: #fff; }
.cms-hero__subtitle { font-size: clamp(15px, 2vw, 19px); margin: 0 0 22px; opacity: .92; }
.cms-hero .btn { margin: 0; }

/* ── Alerte / encadré ────────────────────────────────────────────────── */
.cms-alert {
    border-radius: 8px; padding: 16px 20px; border-left: 4px solid;
    display: flex; gap: 12px; align-items: flex-start;
}
.cms-alert__icon { font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.cms-alert__body { flex: 1; }
.cms-alert__title { font-weight: 700; margin: 0 0 4px; }
.cms-alert__body p:last-child { margin-bottom: 0; }
.cms-alert--info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.cms-alert--success { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.cms-alert--warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.cms-alert--danger  { background: #fef2f2; border-color: #ef4444; color: #991b1b; }

/* ── Accordéon / FAQ (natif <details>) ───────────────────────────────── */
.cms-accordion { border: 1px solid var(--cms-border); border-radius: 10px; overflow: hidden; }
.cms-accordion__item { border-bottom: 1px solid var(--cms-border); }
.cms-accordion__item:last-child { border-bottom: none; }
.cms-accordion__item > summary {
    cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--cms-primary);
    list-style: none; display: flex; justify-content: space-between; align-items: center;
    background: #fff; transition: background .15s;
}
.cms-accordion__item > summary:hover { background: #f8fafc; }
.cms-accordion__item > summary::-webkit-details-marker { display: none; }
.cms-accordion__item > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 13px; transition: transform .2s; color: var(--cms-muted);
}
.cms-accordion__item[open] > summary::after { transform: rotate(180deg); }
.cms-accordion__body { padding: 4px 20px 18px; color: var(--cms-text); line-height: 1.7; }

/* ── Galerie ─────────────────────────────────────────────────────────── */
.cms-gallery { display: grid; gap: 14px; }
.cms-gallery figure { margin: 0; }
.cms-gallery img {
    width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
    border-radius: 8px; display: block;
}
@media (max-width: 640px) { .cms-gallery { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── Vidéo responsive ────────────────────────────────────────────────── */
.cms-video__frame {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: 10px; background: #000;
}
.cms-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-video figcaption { margin-top: 8px; font-size: 13px; color: var(--cms-muted); text-align: center; }

/* ── Liste de features ───────────────────────────────────────────────── */
.cms-features { display: grid; gap: 24px; }
.cms-feature { text-align: center; padding: 8px; }
.cms-feature__icon {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cms-primary-soft); color: var(--cms-primary); font-size: 22px;
}
.cms-feature__title { font-size: 17px; margin: 0 0 6px; color: var(--cms-primary); }
.cms-feature__text { margin: 0; color: var(--cms-muted); line-height: 1.6; }
@media (max-width: 640px) { .cms-features { grid-template-columns: 1fr !important; } }

/* ── Citation / témoignage ───────────────────────────────────────────── */
.cms-quote {
    border-left: 4px solid var(--cms-primary); padding: 8px 0 8px 22px; margin: 0;
}
.cms-quote__text { font-size: 19px; font-style: italic; color: var(--cms-text); margin: 0 0 10px; line-height: 1.6; }
.cms-quote__author { font-weight: 700; color: var(--cms-primary); }
.cms-quote__role { color: var(--cms-muted); font-size: 14px; }

/* ── Séparateur / espacement ─────────────────────────────────────────── */
.cms-separator { border: none; height: 1px; background: var(--cms-border); margin: 0; }
.cms-separator--blank { background: transparent; }