/* ==========================================================================
   Responsive — adaptations selon la taille d'écran
   ========================================================================== */

/* ─── Tablette (≤ 1024px) ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .cdc-nav-inner {
        padding: 0 var(--cdc-esp-sm);
    }

    .cdc-nav-lien {
        padding: var(--cdc-esp-xs) var(--cdc-esp-sm);
        font-size: 0.88rem;
    }

    .cdc-fiche-entete {
        grid-template-columns: 220px 1fr;
        gap: var(--cdc-esp-lg);
    }

    /* Fiche personnage nouvelle structure — tablette */
    .cdc-perso-ligne-infos {
        gap: var(--cdc-esp-lg);
    }

    .cdc-perso-bloc {
        padding: var(--cdc-esp-lg);
    }

    .cdc-liste-chapitre-lien {
        grid-template-columns: 200px 1fr;
    }

    .cdc-liste-chapitre-corps {
        padding: var(--cdc-esp-md) var(--cdc-esp-lg);
    }

    .cdc-liste-chapitre-titre {
        font-size: 1.3rem;
    }
}

/* ─── Mobile large (≤ 768px) ──────────────────────────────────────────────── */

@media (max-width: 768px) {

    :root {
        --cdc-texte-base: 17px;
        --cdc-h-bandeau:  var(--cdc-h-bandeau-mobile);
    }

    /* En-tête */
    .cdc-entete {
        padding: var(--cdc-esp-lg) var(--cdc-esp-md);
        margin-top: calc(-1 * var(--cdc-esp-lg));
    }

    /* Navigation : burger + liste verticale */
    .cdc-nav-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--cdc-h-nav);
        padding: var(--cdc-esp-xs) var(--cdc-esp-md);
    }

    .cdc-nav-burger {
        display: inline-flex;
        order: 1;
    }

    .cdc-theme-toggle {
        order: 2;
        margin-left: auto;
    }

    .cdc-nav-liste {
        order: 3;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: var(--cdc-esp-sm) 0;
        border-top: 1px solid var(--cdc-bordure);
        margin-top: var(--cdc-esp-xs);

        /* Caché par défaut, ouvert par la classe est-ouvert */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }

    .cdc-nav-liste.est-ouvert {
        max-height: 80vh;
        overflow-y: auto;
        opacity: 1;
    }

    .cdc-nav-item {
        width: 100%;
    }

    .cdc-nav-lien {
        padding: var(--cdc-esp-sm) var(--cdc-esp-sm);
        font-size: 1rem;
        justify-content: flex-start;
        border-radius: var(--cdc-rayon-sm);
    }

    .cdc-nav-lien::after {
        display: none;
    }

    .cdc-nav-item.est-actif > .cdc-nav-lien {
        background: var(--cdc-fond-creux);
    }

    /* Sous-menu mobile : déplié au tap */
    .cdc-sous-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 var(--cdc-esp-xs) var(--cdc-esp-lg);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--cdc-trans);
        min-width: 0;
        max-width: none;
    }

    .cdc-nav-item.est-deploye .cdc-sous-menu {
        max-height: 600px;
    }

    .cdc-nav-item.a-sous .cdc-nav-chevron {
        margin-left: auto;
    }

    .cdc-nav-item.est-deploye .cdc-nav-chevron {
        transform: rotate(180deg);
    }

    .cdc-sous-menu a {
        font-size: 0.92rem;
        padding: var(--cdc-esp-xs) var(--cdc-esp-sm);
    }

    /* Sections */
    .cdc-section {
        padding: 0 var(--cdc-esp-md);
        margin-bottom: var(--cdc-esp-xl);
    }

    .cdc-cartouche {
        padding: var(--cdc-esp-xl) var(--cdc-esp-md);
    }

    .cdc-prose {
        text-align: left;
        hyphens: none;
    }

    /* Lettrine plus petite sur mobile */
    .cdc-lettrine {
        font-size: 3.6em;
    }

    /* Galerie personnages : 3 colonnes sur tablette */
    .cdc-grille-personnages .cdc-carte-personnage {
        flex: 0 0 calc((100% - 2 * var(--cdc-esp-lg)) / 3);
    }

    /* Page Histoire — passage en colonne unique */
    .cdc-liste-chapitre-lien {
        grid-template-columns: 1fr;
    }

    .cdc-liste-chapitre-image {
        aspect-ratio: 16 / 9;
    }

    .cdc-liste-chapitre-corps {
        padding: var(--cdc-esp-md) var(--cdc-esp-lg) var(--cdc-esp-lg);
    }

    .cdc-liste-chapitre-titre {
        font-size: 1.2rem;
    }

    /* Fiche personnage — passage en colonne */
    .cdc-fiche-entete {
        grid-template-columns: 1fr;
        gap: var(--cdc-esp-lg);
        text-align: center;
    }

    .cdc-fiche-portrait {
        max-width: 240px;
        margin: 0 auto;
    }

    .cdc-fiche-attributs {
        text-align: left;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Fiche personnage nouvelle structure — mobile large */
    .cdc-perso-page {
        margin-top: calc(-1 * var(--cdc-esp-xl));
    }

    .cdc-perso-ligne-infos {
        grid-template-columns: 1fr;
        gap: var(--cdc-esp-lg);
    }

    .cdc-perso-infos-grille {
        grid-template-columns: 1fr 1fr;
    }

    .cdc-perso-corps {
        padding: var(--cdc-esp-md) var(--cdc-esp-md) var(--cdc-esp-xl);
    }

    .cdc-perso-hero-citation {
        display: none; /* Trop chargé sur mobile, on cache la citation */
    }

    /* Retour en centré sur mobile — le dégradé devient vertical */
    .cdc-perso-hero-contenu {
        left: 0;
        right: 0;
        max-width: 100%;
        text-align: center;
        padding: var(--cdc-esp-lg) var(--cdc-esp-md);
        background: linear-gradient(to top, rgba(8, 4, 2, 0.72) 0%, rgba(8, 4, 2, 0.3) 60%, transparent 100%);
    }

    .cdc-perso-hero-citation {
        margin-left: auto;
        margin-right: auto;
    }

    .cdc-perso-hero-fondu {
        height: 80px;
    }

    .cdc-perso-relation {
        width: 170px;
    }

    .cdc-perso-relation-avatar {
        width: 170px;
    }

    /* Navigation entre chapitres : empilée */
    .cdc-chapitre-nav {
        grid-template-columns: 1fr;
    }

    /* Barre de lecture — mobile : masquer les labels texte */
    .cdc-lecture-nav-chap-label,
    .cdc-lecture-nav-parties-label {
        display: none;
    }

    .cdc-lecture-nav-partie {
        width: 24px;
        height: 22px;
        font-size: 0.76rem;
    }

    /* Pied de page */
    .cdc-pied-liens {
        line-height: 2.2;
    }

    .cdc-pied-liens span {
        display: none;
    }
}

/* ─── Mobile (≤ 480px) ────────────────────────────────────────────────────── */

@media (max-width: 480px) {

    :root {
        --cdc-h-bandeau-mobile: 100px;
    }

    .cdc-marque-titre {
        font-size: 2rem;
    }

    .cdc-marque-baseline {
        font-size: 0.92rem;
    }

    .cdc-cartouche {
        padding: var(--cdc-esp-lg) var(--cdc-esp-md);
    }

    .cdc-cartouche-coin {
        width: 24px;
        height: 24px;
    }

    .cdc-grille-chapitres {
        grid-template-columns: repeat(2, 1fr);
    }

    .cdc-grille-personnages .cdc-carte-personnage {
        flex: 0 0 calc((100% - var(--cdc-esp-lg)) / 2);
    }

    /* Fiche personnage nouvelle structure — mobile serré */
    .cdc-perso-infos-grille {
        grid-template-columns: 1fr;
    }

    .cdc-perso-relations {
        gap: var(--cdc-esp-md);
    }

    .cdc-perso-relation {
        width: 128px;
    }

    .cdc-perso-relation-avatar {
        width: 128px;
    }

    .cdc-bouton {
        padding: 0.7em 1.3em;
        font-size: 0.88rem;
    }

    .cdc-reprise {
        flex-direction: column;
        gap: var(--cdc-esp-xs);
        padding: var(--cdc-esp-sm);
    }

    .cdc-reprise-actions {
        width: 100%;
        justify-content: center;
    }

    .cdc-progress-texte {
        display: none;
    }
}

/* ─── Préférence : motion réduite ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Impression ──────────────────────────────────────────────────────────── */

@media print {
    .cdc-bandeau,
    .cdc-nav,
    .cdc-progress,
    .cdc-lecture-barre,
    .cdc-reprise,
    .cdc-chapitre-nav,
    .cdc-theme-toggle,
    .cdc-pied {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .cdc-cartouche {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .cdc-prose-livre {
        max-width: 100%;
    }
}