/* =====================================================
DISSERTA — ILLUSTRATIONS CSS UNIQUES ET LECTURE
===================================================== */

/* -----------------------------------------------------
Illustrations : la teinte (--illu-h, --illu-h2), l'angle (--illu-a)
et le motif sont calculés à partir du titre (includes/illustration.php).
----------------------------------------------------- */

.css-illustration.illu,
.listing-course-illustration.illu,
.reading-related-art.illu {
position: relative;
color: #ffffff;
background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 45%),
    linear-gradient(var(--illu-a), hsl(var(--illu-h) 62% 30%), hsl(var(--illu-h2) 62% 45%));
isolation: isolate;
}

.illu .illustration-watermark,
.illu .listing-course-watermark {
display: none;
}

.illu-decor {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}

/* Motif de fond, estompé vers le bas à gauche */
.illu-decor::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.9;
-webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 75%);
mask-image: linear-gradient(200deg, #000 15%, transparent 75%);
}

/* 1. Points */
.illu-motif-1 .illu-decor::before {
background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.4px, transparent 1.6px);
background-size: 15px 15px;
}

/* 2. Lignes de cahier */
.illu-motif-2 .illu-decor::before {
background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 18px);
}

/* 3. Rayures diagonales */
.illu-motif-3 .illu-decor::before {
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0 8px, transparent 8px 20px);
}

/* 4. Quadrillage */
.illu-motif-4 .illu-decor::before {
background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
background-size: 22px 22px;
}

/* 5. Ondes depuis un coin */
.illu-motif-5 .illu-decor::before {
background-image: repeating-radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 1.5px 16px);
}

/* 6. Losanges */
.illu-motif-6 .illu-decor::before {
background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.09) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.09) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.09) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.09) 75%);
background-position: 0 0, 12px 12px;
background-size: 24px 24px;
}

/* Grande initiale décorative */
.illu-initiale {
position: absolute;
top: -18px;
right: 14px;
color: rgba(255, 255, 255, 0.16);
font-family: 'Manrope', Arial, sans-serif;
font-size: 150px;
font-weight: 800;
line-height: 1;
letter-spacing: -6px;
}

.reading-related-art.illu .illu-initiale {
top: -14px;
font-size: 110px;
}

.reading-related-art.illu > i {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.92);
}

/* En-tête de lecture teinté selon le contenu */
.reading-hero.illu-hero {
background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.15), transparent 30%),
    linear-gradient(var(--illu-a), hsl(var(--illu-h) 55% 20%) 0%, hsl(var(--illu-h) 55% 32%) 50%, hsl(var(--illu-h2) 58% 42%) 100%);
}

/* -----------------------------------------------------
Barre de progression de lecture
----------------------------------------------------- */

.lecture-progression {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
height: 3px;
background: transparent;
pointer-events: none;
}

.lecture-progression span {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, #f59e0b, #ef5da8);
border-radius: 0 3px 3px 0;
transition: width 0.1s linear;
}

/* -----------------------------------------------------
Sommaire
----------------------------------------------------- */

.lecture-sommaire h3 {
display: flex;
align-items: center;
gap: 8px;
}

.lecture-sommaire ol {
margin: 12px 0 0;
padding: 0;
list-style: none;
counter-reset: sommaire;
}

.lecture-sommaire li {
counter-increment: sommaire;
}

.lecture-sommaire a {
display: flex;
gap: 10px;
padding: 8px 10px;
color: var(--text-light);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
border-radius: 10px;
transition: background 0.15s, color 0.15s;
}

.lecture-sommaire a::before {
content: counter(sommaire, decimal-leading-zero);
flex: 0 0 auto;
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1.7;
}

.lecture-sommaire a:hover,
.lecture-sommaire a.actif {
color: var(--primary);
background: var(--primary-light);
}

.lecture-sommaire a.actif::before {
color: var(--primary);
}

@media (min-width: 761px) {
    .lecture-sommaire {
        position: sticky;
        top: 18px;
        z-index: 2;
    }
}

/* Sous le texte, le sommaire n'aide plus : la barre de progression suffit. */
@media (max-width: 760px) {
    .lecture-sommaire {
        display: none;
    }
}

/* -----------------------------------------------------
Copie d'élève (sujets corrigés)
----------------------------------------------------- */

.reading-copie .reading-section {
position: relative;
}

.reading-copie .reading-text {
position: relative;
padding: 6px 4px 6px 30px;
color: #343a55;
font-size: 15px;
line-height: 32px;
background-color: #fffdf7;
background-image:
    linear-gradient(90deg, transparent 17px, rgba(229, 72, 77, 0.45) 17px, rgba(229, 72, 77, 0.45) 18.5px, transparent 18.5px),
    repeating-linear-gradient(180deg, transparent 0 31px, #dfe6f3 31px 32px);
background-position: 0 6px;
border: 1px solid #efe9d8;
border-radius: 14px;
}

.copie-note {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
padding: 2px 12px 2px 10px;
color: #c2410c;
font-family: 'Caveat', 'Comic Sans MS', cursive;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
background: #fff4e6;
border-radius: 8px;
transform: rotate(-1deg);
}

.copie-note::before {
content: "✎";
font-family: Arial, sans-serif;
font-size: 15px;
}

/* -----------------------------------------------------
Parcours : cours suivant
----------------------------------------------------- */

.lecture-suivant {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 22px;
padding: 18px 20px;
color: #ffffff;
text-decoration: none;
background: linear-gradient(135deg, #173b82, #2457d6 60%, #6c5ce7);
border-radius: 18px;
box-shadow: 0 10px 26px rgba(36, 87, 214, 0.22);
transition: transform 0.15s;
}

.lecture-suivant:hover {
transform: translateY(-2px);
}

.lecture-suivant small {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.8;
}

.lecture-suivant strong {
display: block;
margin-top: 3px;
font-family: 'Manrope', Arial, sans-serif;
font-size: 17px;
line-height: 1.35;
}

.lecture-suivant i {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
border-radius: 50%;
}

@media (max-width: 480px) {
    .illu-initiale {
        font-size: 130px;
    }

    .reading-copie .reading-text {
        padding-left: 26px;
        font-size: 15px;
    }

    .copie-note {
        font-size: 19px;
    }
}