/*
 * Digitent Content Blocks — rendu des blocs [CONSEIL], [CHIFFRE], [GRILLE]…
 * Autonome, sans JS. Le texte hérite de la couleur/police du thème ; seules les
 * couleurs sémantiques et les fonds teintés sont imposés, pour rester lisible sur
 * un thème clair comme sombre.
 */
:root {
    --dgt-radius: 12px;
    --dgt-line: rgba(120, 125, 140, 0.26);
    --dgt-brand: #0f766e;
    --dgt-conseil-fg: #0f766e;
    --dgt-conseil-bg: rgba(13, 148, 136, 0.08);
    --dgt-conseil-line: #0d9488;
    --dgt-attention-fg: #b45309;
    --dgt-attention-bg: rgba(217, 119, 6, 0.1);
    --dgt-attention-line: #e08a1e;
    --dgt-retenir-fg: #4338ca;
    --dgt-retenir-bg: rgba(79, 70, 229, 0.08);
    --dgt-retenir-line: #5b52e8;
    --dgt-ok: #15803d;
    --dgt-ok-bg: rgba(22, 163, 74, 0.08);
    --dgt-ok-line: #20a34a;
    --dgt-ko: #b91c1c;
    --dgt-ko-bg: rgba(220, 38, 38, 0.07);
    --dgt-ko-line: #dc2626;
    --dgt-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dgt-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
    --dgt-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root {
        --dgt-line: rgba(150, 155, 170, 0.22);
        --dgt-brand: #2dd4bf;
        --dgt-conseil-fg: #2dd4bf;
        --dgt-conseil-bg: rgba(45, 212, 191, 0.1);
        --dgt-conseil-line: #159e90;
        --dgt-attention-fg: #fbbf24;
        --dgt-attention-bg: rgba(251, 191, 36, 0.11);
        --dgt-attention-line: #b7841f;
        --dgt-retenir-fg: #aeb8ff;
        --dgt-retenir-bg: rgba(129, 140, 248, 0.13);
        --dgt-retenir-line: #6d70e6;
        --dgt-ok: #4ade80;
        --dgt-ok-bg: rgba(74, 222, 128, 0.11);
        --dgt-ok-line: #2a9d54;
        --dgt-ko: #f87171;
        --dgt-ko-bg: rgba(248, 113, 113, 0.11);
        --dgt-ko-line: #c23b3b;
    }
}

/* espacement commun */
.dgt-callout,
.dgt-stat,
.dgt-list,
.dgt-proscons,
.dgt-grid,
.dgt-quote {
    margin: 1.6em 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* ---------- Callouts : CONSEIL / ATTENTION / A_RETENIR ---------- */
.dgt-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    background: var(--dgt-c-bg);
    border: 1px solid var(--dgt-c-line);
    border-left: 3px solid var(--dgt-c-line);
    border-radius: var(--dgt-radius);
}
.dgt-callout--conseil {
    --dgt-c-fg: var(--dgt-conseil-fg);
    --dgt-c-bg: var(--dgt-conseil-bg);
    --dgt-c-line: var(--dgt-conseil-line);
}
.dgt-callout--attention {
    --dgt-c-fg: var(--dgt-attention-fg);
    --dgt-c-bg: var(--dgt-attention-bg);
    --dgt-c-line: var(--dgt-attention-line);
}
.dgt-callout--retenir {
    --dgt-c-fg: var(--dgt-retenir-fg);
    --dgt-c-bg: var(--dgt-retenir-bg);
    --dgt-c-line: var(--dgt-retenir-line);
}
.dgt-callout__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 8px;
    color: var(--dgt-c-fg);
    background: color-mix(in srgb, var(--dgt-c-fg) 12%, transparent);
}
.dgt-callout__ico svg {
    width: 18px;
    height: 18px;
}
.dgt-callout__label {
    margin: 5px 0 6px !important;
    font: 700 0.72rem/1 var(--dgt-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dgt-c-fg);
}
.dgt-callout__body {
    font-size: 1.03rem;
}
.dgt-callout__body p {
    margin: 0 !important;
}

/* ---------- CHIFFRE ---------- */
.dgt-stat {
    text-align: center;
    padding: 22px;
    border: 1px solid var(--dgt-line);
    border-radius: var(--dgt-radius);
    background: color-mix(in srgb, var(--dgt-brand) 5%, transparent);
}
.dgt-stat__value {
    font: 800 clamp(2.6rem, 7vw, 3.5rem) / 1 var(--dgt-sans);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.dgt-stat__rule {
    width: 46px;
    height: 3px;
    margin: 14px auto;
    border-radius: 2px;
    background: var(--dgt-brand);
}
.dgt-stat__desc {
    max-width: 34ch;
    margin: 0 auto;
    font-family: var(--dgt-sans);
    font-size: 0.98rem;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ---------- AVANTAGES / INCONVENIENTS ---------- */
.dgt-list {
    padding: 16px 18px;
    border: 1px solid var(--dgt-l-line);
    border-radius: var(--dgt-radius);
    background: var(--dgt-l-bg);
}
.dgt-list--pro {
    --dgt-l-fg: var(--dgt-ok);
    --dgt-l-bg: var(--dgt-ok-bg);
    --dgt-l-line: var(--dgt-ok-line);
    --dgt-l-mark: var(--dgt-check);
}
.dgt-list--con {
    --dgt-l-fg: var(--dgt-ko);
    --dgt-l-bg: var(--dgt-ko-bg);
    --dgt-l-line: var(--dgt-ko-line);
    --dgt-l-mark: var(--dgt-cross);
}
.dgt-list__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font: 700 0.74rem/1 var(--dgt-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dgt-l-fg);
}
.dgt-list__head svg {
    width: 18px;
    height: 18px;
}
.dgt-list ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgt-list li {
    position: relative;
    padding-left: 30px;
    font-size: 1.03rem;
}
.dgt-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.28em;
    width: 17px;
    height: 17px;
    background: var(--dgt-l-fg);
    -webkit-mask: var(--dgt-l-mark) center / contain no-repeat;
    mask: var(--dgt-l-mark) center / contain no-repeat;
}

/* ---------- AVANTAGES_INCONVENIENTS ---------- */
.dgt-proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--dgt-line);
    border-radius: var(--dgt-radius);
    overflow: hidden;
}
.dgt-proscons__col {
    padding: 16px 18px;
}
.dgt-proscons__col--pro {
    background: var(--dgt-ok-bg);
    border-right: 1px solid var(--dgt-line);
}
.dgt-proscons__col--con {
    background: var(--dgt-ko-bg);
}
.dgt-proscons__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font: 700 0.74rem/1 var(--dgt-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dgt-proscons__head svg {
    width: 17px;
    height: 17px;
}
.dgt-proscons__col--pro .dgt-proscons__head {
    color: var(--dgt-ok);
}
.dgt-proscons__col--con .dgt-proscons__head {
    color: var(--dgt-ko);
}
.dgt-proscons ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgt-proscons li {
    position: relative;
    padding-left: 27px;
    font-size: 1rem;
}
.dgt-proscons li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.28em;
    width: 16px;
    height: 16px;
}
.dgt-proscons__col--pro li::before {
    background: var(--dgt-ok);
    -webkit-mask: var(--dgt-check) center / contain no-repeat;
    mask: var(--dgt-check) center / contain no-repeat;
}
.dgt-proscons__col--con li::before {
    background: var(--dgt-ko);
    -webkit-mask: var(--dgt-cross) center / contain no-repeat;
    mask: var(--dgt-cross) center / contain no-repeat;
}

/* ---------- GRILLE ---------- */
.dgt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.dgt-grid__card {
    padding: 15px 16px;
    border: 1px solid var(--dgt-line);
    border-radius: 10px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.dgt-grid__card:hover {
    border-color: var(--dgt-brand);
    transform: translateY(-2px);
}
.dgt-grid__card h4 {
    margin: 0 0 5px !important;
    font: 700 0.96rem/1.3 var(--dgt-sans);
}
.dgt-grid__card p {
    margin: 0 !important;
    font-size: 0.97rem;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ---------- CITATION ---------- */
.dgt-quote {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 0 8px 30px;
    border-left: 3px solid var(--dgt-brand);
}
.dgt-quote::before {
    content: "\201C";
    position: absolute;
    left: -2px;
    top: -14px;
    font: 4rem/1 Georgia, "Times New Roman", serif;
    color: var(--dgt-brand);
    opacity: 0.28;
}
.dgt-quote p {
    margin: 0 !important;
    font-size: 1.4rem;
    line-height: 1.4;
    font-style: italic;
}

@media (max-width: 560px) {
    .dgt-proscons {
        grid-template-columns: 1fr;
    }
    .dgt-proscons__col--pro {
        border-right: 0;
        border-bottom: 1px solid var(--dgt-line);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dgt-grid__card {
        transition: none;
    }
}