/* =========================================================
   SEVOTEX — DESIGN SYSTEM CMS
   Générique et réutilisable sur toutes les pages CMS
   ========================================================= */

.oza-cms {
    /* Couleurs */
    --oza-cms-accent: #0069b4;
    --oza-cms-accent-dark: #005493;
    --oza-cms-accent-soft: #fff7f0;

    --oza-cms-text: #24272b;
    --oza-cms-muted: #626970;
    --oza-cms-light: #8b9197;

    --oza-cms-border: #e2e4e7;
    --oza-cms-border-soft: #eceef0;
    --oza-cms-surface: #f7f7f8;
    --oza-cms-white: #ffffff;

    --oza-cms-success: #24753a;
    --oza-cms-success-soft: #edf7ef;

    /* Rayons */
    --oza-cms-radius-sm: 7px;
    --oza-cms-radius: 10px;
    --oza-cms-radius-lg: 12px;

    /* Échelle générique d'espacement */
    --oza-cms-space-xs: 8px;
    --oza-cms-space-sm: 14px;
    --oza-cms-space-md: 24px;
    --oza-cms-space-lg: 40px;
    --oza-cms-space-xl: 64px;
    --oza-cms-space-xxl: 80px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    color: var(--oza-cms-text);
    font-size: 1rem;
    line-height: 1.6;
}

.oza-cms *,
.oza-cms *::before,
.oza-cms *::after {
    box-sizing: border-box;
}


/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

.oza-cms p {
    margin-top: 0;
}

.oza-cms strong {
    color: var(--oza-cms-text);
}

.oza-cms .oza-cms-lead {
    margin: 0;

    color: var(--oza-cms-text);

    font-size: 1.08rem;
    line-height: 1.65;
}

.oza-cms .oza-cms-text-muted {
    color: var(--oza-cms-muted);
}

.oza-cms .oza-cms-text-small {
    color: var(--oza-cms-light);

    font-size: 0.82rem;
    line-height: 1.5;
}

.oza-cms .oza-cms-text-accent {
    color: var(--oza-cms-accent-dark);
}

/* =========================================================
   EN-TÊTE DES PAGES CMS
   ========================================================= */

body#cms .oza-cms-page__header {
    --oza-cms-header-accent: #0069b4;
    --oza-cms-header-text: #24272b;

    position: relative;
    max-width: none;

    margin: 0;
    padding: 0 0  var(--oza-cms-space-md, 24px);
}


/* Petit repère Sevotex dans le séparateur */

body#cms .oza-cms-page__header::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 52px;
    height: 2px;

    background: var(--oza-cms-header-accent);
}


/* H1 */

body#cms .oza-cms-page__header h1 {
    margin: 0;

    color: var(--oza-cms-header-text);

    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body#cms .oza-cms-page__header {
        margin-bottom: var(--space-md, 24px);
        padding-bottom: 18px;
    }

    body#cms .oza-cms-page__header::after {
        width: 40px;
    }

    body#cms .oza-cms-page__header h1 {
        font-size: 1.5rem;
        letter-spacing: -0.015em;
    }

}

/* =========================================================
   SECTIONS
   Chaque grande section reçoit automatiquement son espace
   ========================================================= */

.oza-cms .oza-cms-section {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding-top: var(--oza-cms-space-lg);
}

.oza-cms .oza-cms-section--first {
    padding-top: 0;
}

.oza-cms .oza-cms-section--tight {
    padding-top: var(--oza-cms-space-lg);
}

.oza-cms .oza-cms-section__head {
    margin-bottom: var(--oza-cms-space-md);
}

.oza-cms .oza-cms-section__title {
    margin: 0 0 9px;

    color: var(--oza-cms-text);

    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.oza-cms .oza-cms-section__intro {
    max-width: 940px;
    margin: 0;

    color: var(--oza-cms-muted);
}


/* =========================================================
   UTILITAIRES D'ESPACEMENT
   ========================================================= */

/* Margin top */

.oza-cms .oza-cms-mt-0 {
    margin-top: 0;
}

.oza-cms .oza-cms-mt-xs {
    margin-top: var(--oza-cms-space-xs);
}

.oza-cms .oza-cms-mt-sm {
    margin-top: var(--oza-cms-space-sm);
}

.oza-cms .oza-cms-mt-md {
    margin-top: var(--oza-cms-space-md);
}

.oza-cms .oza-cms-mt-lg {
    margin-top: var(--oza-cms-space-lg);
}

.oza-cms .oza-cms-mt-xl {
    margin-top: var(--oza-cms-space-xl);
}


/* Margin bottom */

.oza-cms .oza-cms-mb-0 {
    margin-bottom: 0;
}

.oza-cms .oza-cms-mb-xs {
    margin-bottom: var(--oza-cms-space-xs);
}

.oza-cms .oza-cms-mb-sm {
    margin-bottom: var(--oza-cms-space-sm);
}

.oza-cms .oza-cms-mb-md {
    margin-bottom: var(--oza-cms-space-md);
}

.oza-cms .oza-cms-mb-lg {
    margin-bottom: var(--oza-cms-space-lg);
}

.oza-cms .oza-cms-mb-xl {
    margin-bottom: var(--oza-cms-space-xl);
}


/* =========================================================
   LAYOUTS GÉNÉRIQUES
   Proportions fiables avec CSS Grid
   ========================================================= */

.oza-cms .oza-cms-layout {
    display: grid;

    width: 100%;
    min-width: 0;

    gap: var(--oza-cms-space-md);

    align-items: start;
}

.oza-cms .oza-cms-layout > .oza-cms-col {
    min-width: 0;
}


/* 100 % */

.oza-cms .oza-cms-layout--100 {
    grid-template-columns: minmax(0, 1fr);
}


/* 50 / 50 */

.oza-cms .oza-cms-layout--50-50 {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}


/* 60 / 40 */

.oza-cms .oza-cms-layout--60-40 {
    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 2fr);
}


/* 40 / 60 */

.oza-cms .oza-cms-layout--40-60 {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 3fr);
}


/* 65 / 35 */

.oza-cms .oza-cms-layout--65-35 {
    grid-template-columns:
        minmax(0, 13fr)
        minmax(0, 7fr);
}


/* 35 / 65 */

.oza-cms .oza-cms-layout--35-65 {
    grid-template-columns:
        minmax(0, 7fr)
        minmax(0, 13fr);
}


/* 70 / 30 */

.oza-cms .oza-cms-layout--70-30 {
    grid-template-columns:
        minmax(0, 7fr)
        minmax(0, 3fr);
}


/* 30 / 70 */

.oza-cms .oza-cms-layout--30-70 {
    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 7fr);
}


/* Gap */

.oza-cms .oza-cms-gap--sm {
    gap: var(--oza-cms-space-sm);
}

.oza-cms .oza-cms-gap--md {
    gap: var(--oza-cms-space-md);
}

.oza-cms .oza-cms-gap--lg {
    gap: var(--oza-cms-space-lg);
}


/* =========================================================
   GRILLES
   Pour éléments de même nature uniquement
   ========================================================= */

.oza-cms .oza-cms-grid {
    display: grid;

    width: 100%;
    min-width: 0;

    gap: var(--oza-cms-space-sm);
}

.oza-cms .oza-cms-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oza-cms .oza-cms-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oza-cms .oza-cms-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   STACKS VERTICAUX
   ========================================================= */

.oza-cms .oza-cms-stack {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.oza-cms .oza-cms-stack--sm {
    gap: var(--oza-cms-space-sm);
}

.oza-cms .oza-cms-stack--md {
    gap: var(--oza-cms-space-md);
}

.oza-cms .oza-cms-stack--lg {
    gap: var(--oza-cms-space-lg);
}


/* =========================================================
   PANELS
   ========================================================= */

.oza-cms .oza-cms-panel {
    min-width: 0;

    padding: 22px;

    border: 1px solid var(--oza-cms-border-soft);
    border-radius: var(--oza-cms-radius);

    background: var(--oza-cms-white);
}

.oza-cms .oza-cms-panel--compact {
    padding: 16px;
}

.oza-cms .oza-cms-panel--soft {
    background: var(--oza-cms-surface);
}

.oza-cms .oza-cms-panel--accent {
    background: var(--oza-cms-accent-soft);
}

.oza-cms .oza-cms-panel--premium {
    border-radius: var(--oza-cms-radius-lg);

    box-shadow: 0 5px 20px rgba(20, 25, 30, 0.035);
}

.oza-cms .oza-cms-panel--flat {
    padding: 22px 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.oza-cms .oza-cms-panel__title {
    margin: 0 0 5px;

    color: var(--oza-cms-text);

    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.35;
}

.oza-cms .oza-cms-panel__text {
    margin: 0;

    color: var(--oza-cms-muted);

    font-size: 0.91rem;
    line-height: 1.5;
}

/* =========================================================
   SÉPARATEURS DE CONTENU
   ========================================================= */

.oza-cms .oza-cms-separated {
    width: 100%;
    min-width: 0;

    padding-top: var(--oza-cms-space-md);

    border-top: 1px solid var(--oza-cms-border);
}

.oza-cms .oza-cms-separated--lg {
    padding-top: var(--oza-cms-space-lg);
}

/* =========================================================
   ICÔNES
   ========================================================= */

.oza-cms .oza-cms-icon-bubble {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    color: var(--oza-cms-accent);
    background: var(--oza-cms-accent-soft);
}

.oza-cms .oza-cms-icon-bubble--lg {
    width: 54px;
    height: 54px;
}

.oza-cms .oza-cms-icon-bubble .oza-icon,
.oza-cms .oza-cms-icon-bubble .oza-cms-icon {
    width: 27px;
    height: 27px;
}

.oza-cms .oza-cms-icon-bubble--lg .oza-icon,
.oza-cms .oza-cms-icon-bubble--lg .oza-cms-icon {
    width: 31px;
    height: 31px;
}


/* =========================================================
   TITRE + ICÔNE
   L'icône décale uniquement le titre
   ========================================================= */

.oza-cms .oza-cms-icon-title {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);

    gap: 0 12px;

    min-width: 0;
}

.oza-cms .oza-cms-icon-title__icon {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: var(--oza-cms-accent);
}

.oza-cms .oza-cms-icon-title__icon .oza-icon,
.oza-cms .oza-cms-icon-title__icon .oza-cms-icon {
    width: 27px;
    height: 27px;
}

.oza-cms .oza-cms-icon-title__title {
    grid-column: 2;
    grid-row: 1;

    align-self: center;

    margin: 0;

    color: var(--oza-cms-text);

    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.35;
}

.oza-cms .oza-cms-icon-title__body {
    grid-column: 1 / -1;

    margin-top: 10px;

    color: var(--oza-cms-muted);
}

.oza-cms .oza-cms-icon-title__body > :first-child {
    margin-top: 0;
}

.oza-cms .oza-cms-icon-title__body > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.oza-cms .oza-cms-highlight {
    min-height: 100%;

    padding: 24px 22px;
}

.oza-cms .oza-cms-highlight .oza-cms-icon-bubble {
    margin-bottom: 16px;
}

.oza-cms .oza-cms-highlight__title {
    display: block;

    margin-bottom: 4px;

    color: var(--oza-cms-text);

    font-weight: 700;
    line-height: 1.35;
}

.oza-cms .oza-cms-highlight__text {
    display: block;

    color: var(--oza-cms-muted);

    font-size: 0.89rem;
    line-height: 1.45;
}


/* =========================================================
   LISTE DE DÉTAILS
   ========================================================= */

.oza-cms .oza-cms-detail-list {
    margin-top: 16px;

    border-top: 1px solid var(--oza-cms-border-soft);
}

.oza-cms .oza-cms-detail-row {
    display: grid;

    grid-template-columns:
        minmax(160px, 1.35fr)
        repeat(2, minmax(100px, 0.65fr));

    gap: 14px;

    align-items: center;

    min-width: 0;

    padding: 11px 0;
}

.oza-cms .oza-cms-detail-row + .oza-cms-detail-row {
    border-top: 1px solid var(--oza-cms-border-soft);
}

.oza-cms .oza-cms-detail-row__name {
    color: var(--oza-cms-text);

    font-size: 0.87rem;
    font-weight: 700;
}

.oza-cms .oza-cms-detail-row__label {
    display: block;

    margin-bottom: 1px;

    color: var(--oza-cms-light);

    font-size: 0.72rem;
    font-weight: 600;
}

.oza-cms .oza-cms-detail-row__value {
    color: var(--oza-cms-text);

    font-size: 0.88rem;
    font-weight: 700;
}

.oza-cms .oza-cms-detail-row__value--success {
    color: var(--oza-cms-success);
}


/* =========================================================
   META GRID
   ========================================================= */

.oza-cms .oza-cms-meta-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--oza-cms-space-md);

    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid var(--oza-cms-border-soft);
}

.oza-cms .oza-cms-meta-item {
    min-width: 0;

    color: var(--oza-cms-muted);

    font-size: 0.88rem;
    line-height: 1.5;
}

.oza-cms .oza-cms-meta-item strong {
    display: block;

    margin-bottom: 2px;
}


/* Variante générique :
   conserve 2 colonnes même sur mobile */

@media (max-width: 767px) {

    .oza-cms .oza-cms-meta-grid.oza-cms-meta-grid--mobile-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: var(--oza-cms-space-sm);
    }

}


/* =========================================================
   COMPARAISON
   ========================================================= */

.oza-cms .oza-cms-comparison {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    overflow: hidden;

    border: 1px solid var(--oza-cms-border-soft);
    border-radius: var(--oza-cms-radius);

    background: var(--oza-cms-surface);
}

.oza-cms .oza-cms-comparison__item {
    display: grid;

    grid-template-columns: 46px minmax(0, 1fr);

    gap: 0 14px;

    min-width: 0;

    padding: 21px 24px;
}

.oza-cms .oza-cms-comparison__item + .oza-cms-comparison__item {
    border-left: 1px solid var(--oza-cms-border);
}

.oza-cms .oza-cms-comparison__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.oza-cms .oza-cms-comparison__title {
    grid-column: 2;
    grid-row: 1;

    align-self: end;

    margin-bottom: 3px;

    color: var(--oza-cms-text);

    font-weight: 700;
}

.oza-cms .oza-cms-comparison__text {
    grid-column: 2;
    grid-row: 2;

    color: var(--oza-cms-muted);

    font-size: 0.9rem;
    line-height: 1.45;
}


/* =========================================================
   NOTE
   ========================================================= */

.oza-cms .oza-cms-note {
    padding: 5px 0 5px 18px;

    border-left: 2px solid var(--oza-cms-accent);
}

.oza-cms .oza-cms-note__title {
    display: block;

    margin-bottom: 5px;

    color: var(--oza-cms-text);

    font-weight: 700;
}

.oza-cms .oza-cms-note p {
    margin: 0;

    color: var(--oza-cms-muted);
}


/* =========================================================
   ALERTE
   ========================================================= */

.oza-cms .oza-cms-alert {
    padding: 21px 24px;

    border-radius: var(--oza-cms-radius);

    background: var(--oza-cms-accent-soft);
}


/* =========================================================
   LISTES
   ========================================================= */

.oza-cms .oza-cms-list {
    margin: 13px 0 0;

    padding-left: 19px;
}

.oza-cms .oza-cms-list li {
    margin: 5px 0;

    color: var(--oza-cms-muted);
}

.oza-cms .oza-cms-list li::marker {
    color: var(--oza-cms-accent);
}


/* =========================================================
   CTA
   ========================================================= */

.oza-cms .oza-cms-actions {
    margin-top: 19px;
}

.oza-cms .oza-cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 20px;

    border: 1px solid var(--oza-cms-accent);
    border-radius: 6px;

    color: #fff;
    background: var(--oza-cms-accent);

    font-size: 0.93rem;
    font-weight: 700;

    text-decoration: none;
}

.oza-cms .oza-cms-btn:hover {
    color: #fff;

    background: var(--oza-cms-accent-dark);
    border-color: var(--oza-cms-accent-dark);

    text-decoration: none;
}

.oza-cms .oza-cms-btn:focus-visible {
    outline: 3px solid rgba(0, 105, 180, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   TABLETTE
   Tous les layouts passent automatiquement en 100 %
   ========================================================= */

@media (max-width: 1023px) {

    .oza-cms .oza-cms-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: var(--oza-cms-space-lg);
    }


    .oza-cms .oza-cms-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .oza-cms .oza-cms-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oza-cms {
        --oza-cms-space-lg: 32px;
        --oza-cms-space-xl: 48px;
        --oza-cms-space-xxl: 56px;
    }


    .oza-cms .oza-cms-section__title {
        font-size: 1.32rem;
    }


    /* Toutes les grilles */

    .oza-cms .oza-cms-grid--2,
    .oza-cms .oza-cms-grid--3,
    .oza-cms .oza-cms-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }


    /* Highlights */

    .oza-cms .oza-cms-highlight {
        display: grid;

        grid-template-columns: 50px minmax(0, 1fr);

        gap: 0 14px;

        padding: 16px 17px;
    }

    .oza-cms .oza-cms-highlight .oza-cms-icon-bubble {
        grid-column: 1;
        grid-row: 1 / span 2;

        width: 44px;
        height: 44px;

        margin: 0;
    }

    .oza-cms .oza-cms-highlight__title {
        grid-column: 2;
        grid-row: 1;

        align-self: end;
    }

    .oza-cms .oza-cms-highlight__text {
        grid-column: 2;
        grid-row: 2;
    }


    /* Détails */

    .oza-cms .oza-cms-detail-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px 14px;
    }

    .oza-cms .oza-cms-detail-row__name {
        grid-column: 1 / -1;
    }


    /* Meta */

    .oza-cms .oza-cms-meta-grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 12px;
    }


    /* Comparaison */

    .oza-cms .oza-cms-comparison {
        grid-template-columns: minmax(0, 1fr);
    }

    .oza-cms .oza-cms-comparison__item + .oza-cms-comparison__item {
        border-top: 1px solid var(--oza-cms-border);
        border-left: 0;
    }


    .oza-cms .oza-cms-panel {
        padding: 15px;
    }


    .oza-cms .oza-cms-alert {
        padding: 18px;
    }

}