/* ==========================================================================
   Composants — éléments réutilisables
   ========================================================================== */

/* ─── Prose : typographie de lecture ──────────────────────────────────────── */

.cdc-prose {
    font-size: var(--cdc-texte-base);
    line-height: var(--cdc-interligne);
    color: var(--cdc-texte);
    margin-bottom: var(--cdc-esp-md);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

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

.cdc-prose-finale {
    text-align: center;
    font-style: italic;
    color: var(--cdc-texte-secondaire);
    margin-top: var(--cdc-esp-lg);
}

/* Mode lecture longue (chapitre, fiche personnage) */
.cdc-prose-livre {
    max-width: var(--cdc-largeur-lecture);
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.85;
}

.cdc-prose-livre p {
    margin-bottom: 1.4em;
    text-indent: 0;
    text-align: justify;
}

.cdc-prose-livre p + p {
    text-indent: 2em;
}

.cdc-prose-livre h2,
.cdc-prose-livre h3 {
    text-align: center;
    margin: 2em 0 1em;
}

/* Citation / phrase d'effet */
.cdc-citation {
    font-style: italic;
    color: var(--cdc-texte-secondaire);
    font-size: 1.05em;
    margin: var(--cdc-esp-lg) 0;
}

/* Mots saillants dans la prose */
.cdc-relief {
    color: var(--cdc-accent);
    font-weight: var(--cdc-poids-fort);
    letter-spacing: 0.01em;
}

.cdc-quote {
	font-style: italic;
}

.cdc-quote-inline {
	font-style: italic;
}

/* ─── Lettrine ────────────────────────────────────────────────────────────── */

.cdc-lettrine-paragraphe {
    text-indent: 0 !important;
}

.cdc-lettrine {
    float: left;
    font-family: var(--cdc-fonte-deco);
    font-size: 3em;
    line-height: 0.85;
    padding: 0.05em 0.30em 0 0;
    margin: 0.05em 0.08em 0 0;
    color: var(--cdc-accent);
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="nuit"] .cdc-lettrine {
    text-shadow:
        0 0 12px rgba(232, 200, 118, 0.4),
        0 0 24px rgba(232, 200, 118, 0.2);
}

/* ─── Cartouche : bloc de contenu type parchemin ──────────────────────────── */

.cdc-cartouche {
    position: relative;
    max-width: var(--cdc-largeur-lecture);
    margin: 0 auto;
    padding: var(--cdc-esp-2xl) clamp(1.5rem, 5vw, 3.5rem);
    background: var(--cdc-fond-cartouche);
    border: 1px solid var(--cdc-bordure-forte);
    border-radius: var(--cdc-rayon-lg);
    box-shadow: var(--cdc-ombre-md);
}

[data-theme="nuit"] .cdc-cartouche {
    box-shadow: var(--cdc-ombre-md), var(--cdc-lueur-or);
}

/* Bordure intérieure dorée fine */
.cdc-cartouche::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid var(--cdc-bordure);
    border-radius: calc(var(--cdc-rayon-lg) - 4px);
    pointer-events: none;
}

/* Coins ornementés (SVG en background) */
.cdc-cartouche-coin {
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.7;
    color: var(--cdc-accent);
    /* SVG vrille florale médiévale en encodé URL — couleur via mask + currentColor */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23a08050' stroke-width='1.2' stroke-linecap='round'><path d='M2 2 L2 14 M2 2 L14 2'/><path d='M2 8 Q8 8 8 2'/><circle cx='10' cy='10' r='2.5' fill='%23a08050' fill-opacity='0.3'/><path d='M10 10 Q16 10 16 16 Q16 22 22 22'/></svg>");
}

[data-theme="nuit"] .cdc-cartouche-coin {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23c8a96a' stroke-width='1.2' stroke-linecap='round'><path d='M2 2 L2 14 M2 2 L14 2'/><path d='M2 8 Q8 8 8 2'/><circle cx='10' cy='10' r='2.5' fill='%23c8a96a' fill-opacity='0.3'/><path d='M10 10 Q16 10 16 16 Q16 22 22 22'/></svg>");
}

.cdc-cartouche-coin-haut-gauche {
    top: 6px; left: 6px;
}

.cdc-cartouche-coin-haut-droite {
    top: 6px; right: 6px;
    transform: scaleX(-1);
}

.cdc-cartouche-coin-bas-gauche {
    bottom: 6px; left: 6px;
    transform: scaleY(-1);
}

.cdc-cartouche-coin-bas-droite {
    bottom: 6px; right: 6px;
    transform: scale(-1, -1);
}

/* ─── Ornements (séparateurs SVG) ─────────────────────────────────────────── */

.cdc-ornement {
    text-align: center;
    margin: var(--cdc-esp-xl) auto;
    color: var(--cdc-accent);
    line-height: 0;
}

.cdc-ornement svg {
    display: inline-block;
}

.cdc-ornement-large svg {
    width: clamp(180px, 30vw, 240px);
    height: auto;
}

.cdc-ornement:not(.cdc-ornement-large):not(.cdc-ornement-sceau) svg {
    width: clamp(100px, 20vw, 120px);
    height: auto;
}

.cdc-ornement-sceau {
    margin: var(--cdc-esp-lg) auto;
}

.cdc-ornement-sceau svg {
    width: 56px;
    height: 56px;
    color: var(--cdc-accent);
    opacity: 0.7;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */

.cdc-bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--cdc-esp-xs);
    padding: 0.7em 1.6em;
    font-family: var(--cdc-fonte-titre);
    font-size: 0.95rem;
    font-weight: var(--cdc-poids-titre);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cdc-encre);
    background: linear-gradient(135deg, var(--cdc-or-clair), var(--cdc-or));
    border: 1px solid var(--cdc-vieil-or-fonce);
    border-radius: var(--cdc-rayon-sm);
    text-decoration: none;
    transition: all var(--cdc-trans);
    box-shadow: var(--cdc-ombre-sm);
}

[data-theme="nuit"] .cdc-bouton {
    color: var(--cdc-parchemin);
    background: linear-gradient(135deg, var(--cdc-or), var(--cdc-or-vif));
}

.cdc-bouton:hover, .cdc-bouton:focus {
    color: var(--cdc-encre);
    background: linear-gradient(135deg, var(--cdc-or-vif), var(--cdc-or));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--cdc-ombre-md);
}

.cdc-bouton:active {
    transform: translateY(0);
    box-shadow: var(--cdc-ombre-sm);
}

/* ─── Pastille (badge) ────────────────────────────────────────────────────── */

.cdc-pastille {
    display: inline-block;
    padding: 0.25em 0.7em;
    font-family: var(--cdc-fonte-titre);
    font-size: 0.72rem;
    font-weight: var(--cdc-poids-titre);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--cdc-rayon-sm);
    margin-top: var(--cdc-esp-xs);
}

.cdc-pastille-attente {
    color: var(--cdc-vieil-or-fonce);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid var(--cdc-bordure);
}

[data-theme="nuit"] .cdc-pastille-attente {
    color: var(--cdc-or);
    background: rgba(232, 200, 118, 0.1);
}

/* ─── Barre de progression de lecture ─────────────────────────────────────── */

.cdc-progress {
    position: relative;
    width: 100%;
    height: var(--cdc-h-progress);
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

[data-theme="nuit"] .cdc-progress {
    background: rgba(255, 255, 255, 0.06);
}

.cdc-progress-barre {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--cdc-vieil-or-fonce) 0%,
        var(--cdc-or-vif) 50%,
        var(--cdc-vieil-or-fonce) 100%);
    background-size: 200% 100%;
    animation: cdc-flux-or 6s linear infinite;
    transition: width 0.15s ease;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.cdc-progress-texte {
    position: absolute;
    top: 50%;
    right: var(--cdc-esp-md);
    transform: translateY(-50%);
    font-family: var(--cdc-fonte-titre);
    font-size: 0.65rem;
    color: var(--cdc-texte-discret);
    background: var(--cdc-fond-page);
    padding: 1px 8px;
    border-radius: 8px;
    border: 1px solid var(--cdc-bordure);
    line-height: 1.4;
    pointer-events: none;
}

@keyframes cdc-flux-or {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}

/* ─── Bannière "Reprendre la lecture" ─────────────────────────────────────── */

.cdc-reprise {
    position: fixed;
    bottom: var(--cdc-esp-md);
    left: 50%;
    transform: translateX(-50%) translateY(140%);
    max-width: calc(100% - 2 * var(--cdc-esp-md));
    background: var(--cdc-fond-cartouche);
    border: 1px solid var(--cdc-bordure-forte);
    border-radius: var(--cdc-rayon-md);
    padding: var(--cdc-esp-sm) var(--cdc-esp-md);
    display: flex;
    align-items: center;
    gap: var(--cdc-esp-md);
    box-shadow: var(--cdc-ombre-lg);
    z-index: 1001;
    transition: transform 0.4s ease;
}

.cdc-reprise.est-visible {
    transform: translateX(-50%) translateY(0);
}

.cdc-reprise-texte {
    font-family: var(--cdc-fonte-corps);
    font-size: 0.9rem;
    color: var(--cdc-texte-secondaire);
    line-height: 1.4;
    margin: 0;
}

.cdc-reprise-texte strong {
    color: var(--cdc-accent);
    font-family: var(--cdc-fonte-titre);
    font-weight: var(--cdc-poids-titre);
}

.cdc-reprise-actions {
    display: flex;
    align-items: center;
    gap: var(--cdc-esp-xs);
    flex-shrink: 0;
}

.cdc-reprise-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 1em;
    font-family: var(--cdc-fonte-titre);
    font-size: 0.8rem;
    font-weight: var(--cdc-poids-titre);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cdc-encre);
    background: linear-gradient(135deg, var(--cdc-or-clair), var(--cdc-or));
    border: 1px solid var(--cdc-vieil-or-fonce);
    border-radius: var(--cdc-rayon-sm);
    text-decoration: none;
    transition: all var(--cdc-trans);
}

[data-theme="nuit"] .cdc-reprise-btn {
    color: var(--cdc-parchemin);
}

.cdc-reprise-btn:hover, .cdc-reprise-btn:focus {
    background: linear-gradient(135deg, var(--cdc-or-vif), var(--cdc-or));
    text-decoration: none;
}

.cdc-reprise-fermer {
    background: transparent;
    border: none;
    color: var(--cdc-texte-discret);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cdc-trans);
}

.cdc-reprise-fermer:hover {
    color: var(--cdc-accent);
    background: var(--cdc-fond-creux);
}