/* ==========================================================
   DTL – Blocs visuels éditoriaux 1.3.1
   Exemple / À retenir : visuel dans la marge à la place de la flèche H2.
   Sources : bandeau horizontal au-dessus, collé à l'encadré.
   ========================================================== */

.dtl-visual-block {
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 2.35rem 0 2.55rem !important;
}

/* H2 conservé dans le DOM et comme cible du sommaire, mais invisible. */
.dtl-visual-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: none !important;
}

/* Aucune flèche verte du thème sur ces H2 spéciaux. */
.dtl-visual-title::before,
.dtl-visual-title::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.dtl-visual-body > :first-child {
    margin-top: 0 !important;
}

.dtl-visual-body > :last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================
   EXEMPLE / EXEMPLES
   ========================================================== */
.dtl-block-example {
    padding: 1.08rem 1.2rem 1.12rem !important;
    border: 1px solid #afd6eb !important;
    border-left: 6px solid #5fa9d4 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 97% 12%, rgba(181, 222, 245, .34) 0, rgba(181, 222, 245, 0) 190px),
        linear-gradient(135deg, #ffffff 0%, #f5fbff 60%, #eef8fd 100%) !important;
    box-shadow: 0 10px 28px rgba(47, 92, 119, .09) !important;
}

.dtl-block-example::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    width: 86px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(171, 216, 241, .15), rgba(255,255,255,0));
    pointer-events: none;
}

/* Même taille / même position que la version jugée correcte. */
.dtl-visual-marker-example {
    position: absolute !important;
    z-index: 20 !important;
    top: 14px !important;
    left: -104px !important;
    width: 86px !important;
    height: 72px !important;
    min-width: 86px !important;
    min-height: 72px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.09)) !important;
    transform: none !important;
    pointer-events: none !important;
}

.dtl-block-example .dtl-visual-body {
    position: relative;
    z-index: 2;
    padding: .08rem .12rem .03rem !important;
}

.dtl-block-example h3 {
    color: #315f79;
}

/* ==========================================================
   À RETENIR — noir + jaune assumés
   ========================================================== */
.dtl-block-retenir {
    padding: 1.12rem 1.25rem 1.16rem 1.38rem !important;
    border: 1px solid #e7c928 !important;
    border-left: 7px solid #111111 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 96% 10%, rgba(255, 224, 39, .25) 0, rgba(255, 224, 39, 0) 205px),
        linear-gradient(135deg, #fffef5 0%, #fff8c9 100%) !important;
    box-shadow:
        inset 0 5px 0 #f0d21c,
        0 10px 28px rgba(57, 48, 8, .10) !important;
}

.dtl-block-retenir::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 34px;
    border-radius: 0 15px 0 28px;
    background: #111111;
    opacity: .92;
    pointer-events: none;
}

.dtl-block-retenir::after {
    content: '';
    position: absolute;
    top: 0;
    right: 86px;
    width: 54px;
    height: 5px;
    background: #f0d21c;
    pointer-events: none;
}

/* Image rendue indépendante du H2 pour empêcher le thème de la masquer. */
.dtl-visual-marker-retenir {
    position: absolute !important;
    z-index: 999 !important;
    top: 8px !important;
    left: -104px !important;
    width: 86px !important;
    height: 104px !important;
    min-width: 86px !important;
    min-height: 104px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,.20)) !important;
    transform: none !important;
    pointer-events: none !important;
}

.dtl-block-retenir .dtl-visual-body {
    position: relative;
    z-index: 2;
    padding: .06rem .22rem .04rem !important;
}

.dtl-block-retenir strong,
.dtl-block-retenir b {
    color: #111111;
}

.dtl-block-retenir li::marker {
    color: #b69200;
}

/* ==========================================================
   SOURCES — le bandeau remplace le repère latéral.
   Il est au-dessus et directement collé à l'encadré gris.
   ========================================================== */
.dtl-block-sources {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.055) !important;
}

.dtl-source-banner {
    display: block !important;
    width: 100% !important;
    height: 108px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: #0b0b0b !important;
}

.dtl-block-sources .dtl-visual-body {
    padding: 12px !important;
    border: 1px solid #d5d7da !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #f4f5f6 !important;
}

.dtl-sources-grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.dtl-source-item {
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d3d5d8 !important;
    border-radius: 9px !important;
    background: #e9eaec !important;
    box-shadow: none !important;
    transition: background-color .20s ease, border-color .20s ease, box-shadow .20s ease, transform .20s ease !important;
}

/* Toute la cellule devient rouge transparent au survol. */
.dtl-source-item:hover,
.dtl-source-item:focus-within {
    background: rgba(166, 10, 22, .17) !important;
    border-color: rgba(151, 0, 15, .58) !important;
    box-shadow: 0 6px 15px rgba(116, 0, 10, .10) !important;
    transform: translateY(-1px);
}

.dtl-source-item a {
    display: flex !important;
    align-items: center !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    padding: .62rem .7rem !important;
    color: #36383b !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: var(--de-sans, Arial, sans-serif) !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    line-height: 1.27 !important;
    overflow-wrap: anywhere;
}

.dtl-source-item:hover a,
.dtl-source-item:focus-within a {
    color: #461014 !important;
    background: transparent !important;
    font-weight: 400 !important;
}

.dtl-block-sources .dtl-source-item strong,
.dtl-block-sources .dtl-source-item b {
    font-weight: 400 !important;
}

/* Si une page contient déjà un tableau de sources, même logique : gris puis rouge transparent. */
.dtl-block-sources table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 8px !important;
    font-family: var(--de-sans, Arial, sans-serif) !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
}

.dtl-block-sources td,
.dtl-block-sources th {
    border: 1px solid #d3d5d8 !important;
    border-radius: 9px !important;
    background: #e9eaec !important;
    padding: .62rem .7rem !important;
    font-weight: 400 !important;
    transition: background-color .20s ease, border-color .20s ease !important;
}

.dtl-block-sources td:hover,
.dtl-block-sources th:hover {
    background: rgba(166, 10, 22, .17) !important;
    border-color: rgba(151, 0, 15, .58) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1280px) {
    .dtl-visual-marker-example {
        left: -76px !important;
        width: 64px !important;
        height: 58px !important;
    }

    .dtl-visual-marker-retenir {
        left: -82px !important;
        width: 72px !important;
        height: 88px !important;
    }

    .dtl-sources-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .dtl-block-example,
    .dtl-block-retenir {
        margin-top: 3.3rem !important;
    }

    .dtl-visual-marker-example {
        top: -49px !important;
        left: 8px !important;
        width: 56px !important;
        height: 56px !important;
    }

    .dtl-visual-marker-retenir {
        top: -62px !important;
        left: 8px !important;
        width: 62px !important;
        height: 78px !important;
    }

    .dtl-source-banner {
        height: 86px !important;
    }

    .dtl-sources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .dtl-source-banner {
        height: 72px !important;
    }

    .dtl-sources-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Correctif 1.2.3 : l'image À retenir doit toujours être visible dans la marge. */
.dtl-block-retenir {
    overflow: visible !important;
    isolation: isolate !important;
}
.dtl-block-retenir > img.dtl-visual-marker-retenir[src*="information-droit-social.png"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 999 !important;
}


/* ==========================================================
   Correctifs structurels 1.3.0
   - les blocs Exemple ne peuvent plus englober la FAQ ;
   - les marqueurs restent visibles sur les anciennes structures HTML.
   ========================================================== */
.entry-content .dtl-visual-block {
    overflow: visible !important;
}
.entry-content .dtl-block-example,
.entry-content .dtl-block-retenir {
    clear: both !important;
}
.entry-content .dtl-faq-section {
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}
.entry-content .dtl-block-example + .dtl-faq-section,
.entry-content .dtl-block-retenir + .dtl-faq-section {
    margin-top: .85rem !important;
}


/* 1.3.1 — plusieurs exemples sur une même page, y compris H3/H4 */
.entry-content h3.dtl-visual-title,
.entry-content h4.dtl-visual-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}