@font-face {
    font-family: 'EB Garamond';
    src: url("../fonts/EBGaramond-Variable-CJ4iS57.ttf") format('truetype-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* Italique : seul le romain existe dans le fichier variable ci-dessus. */
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/eb-garamond-italic-latin-ext-aLf9IKJ.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/eb-garamond-italic-latin-GZOEr2C.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cinzel';
    src: url("../fonts/Cinzel-Variable-MwSfCXt.ttf") format('truetype-variations');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --papier: #f1e6cf;
    --papier-carte: #e9dcbb;
    --encre: #2b2015;
    --encre-douce: #5a4633;
    --or: #9c7a3c;
    --or-clair: #c9a35f;
    /* --or n'a pas assez de contraste pour du texte (2.9-3.2:1) - cette
       variante plus sombre passe le seuil AA (4.5:1) partout où l'or sert
       de texte ou de fond de bouton avec du texte dessus. */
    --or-texte: #76592b;
    --or-texte-survol: #654e24;
    --surface-survol: #fbf3dc;
    --surface-actif: #f3e6c4;
    --bordeaux: #6b2e2e;
    --ombre: rgba(43, 32, 21, 0.28);
    --lueur: rgba(255, 250, 235, 0.5);
    --trame: rgba(43, 32, 21, 0.02);
    --rayon: 6px;
    --police-corps: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --police-titres: 'Cinzel', var(--police-corps);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

/* Mode sombre, « page lue à la chandelle » : suit le système, sauf si le
   lecteur a forcé un thème avec le bouton de l'en-tête (data-theme, voir
   theme_controller.js). Les deux blocs sont identiques. Contrastes vérifiés
   AA : texte 12,5:1, texte doux 7,4:1, or 8,1:1, bouton principal 9:1. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papier: #1b1611;
        --papier-carte: #262019;
        --encre: #ece2cc;
        --encre-douce: #bdae95;
        --or: #8c6e38;
        --or-clair: #b8944f;
        --or-texte: #d6b374;
        --or-texte-survol: #e6c890;
        --surface-survol: #30281f;
        --surface-actif: #3a3026;
        --bordeaux: #d98f86;
        --ombre: rgba(0, 0, 0, 0.5);
        --lueur: rgba(214, 179, 116, 0.06);
        --trame: rgba(0, 0, 0, 0.14);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --papier: #1b1611;
    --papier-carte: #262019;
    --encre: #ece2cc;
    --encre-douce: #bdae95;
    --or: #8c6e38;
    --or-clair: #b8944f;
    --or-texte: #d6b374;
    --or-texte-survol: #e6c890;
    --surface-survol: #30281f;
    --surface-actif: #3a3026;
    --bordeaux: #d98f86;
    --ombre: rgba(0, 0, 0, 0.5);
    --lueur: rgba(214, 179, 116, 0.06);
    --trame: rgba(0, 0, 0, 0.14);
    color-scheme: dark;
}

body {
    margin: 0;
    background-color: var(--papier);
    background-image:
        radial-gradient(ellipse at top, var(--lueur), transparent 60%),
        repeating-linear-gradient(0deg, var(--trame) 0px, var(--trame) 1px, transparent 1px, transparent 3px);
    color: var(--encre);
    font-family: var(--police-corps);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* overflow-wrap : au zoom 400 % (320 px), « confidentialité » en Cinzel ne
   tient pas sur une ligne et faisait défiler la page en largeur. */
h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--encre);
    overflow-wrap: break-word;
}

a {
    color: var(--encre-douce);
}

::selection {
    background-color: var(--or-clair);
    color: var(--encre);
}

:focus-visible {
    outline: 2px solid var(--or-texte);
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--or-texte);
    outline-offset: 0;
}

/* Cibles de focus posées par script ou par le lien d'évitement
   (tabindex="-1") : ce ne sont pas des commandes, pas de contour. */
.site-main:focus,
.lecture-cadre:focus,
.lecture-texte:focus {
    outline: none;
}

/* Le gris par défaut des navigateurs (#757575) tombe à 3,3:1 sur le papier ;
   le placeholder porte ici une information (nom par défaut du personnage).
   L'italique évite de le confondre avec un texte déjà saisi. */
::placeholder {
    color: var(--encre-douce);
    font-style: italic;
    opacity: 1;
}

/* Lu par les lecteurs d'écran, invisible à l'écran. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lien-evitement {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    padding: 0.55rem 1rem;
    color: var(--encre);
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    transform: translateY(-200%);
}

.lien-evitement:focus {
    transform: none;
}

/* Header / footer */

.site-header {
    border-bottom: 1px solid var(--or);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 70rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

.bouton-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    color: var(--encre-douce);
    background: transparent;
    border: 1px solid var(--or);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.bouton-theme:hover {
    background-color: var(--surface-survol);
}

.bouton-theme svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Lune en clair (pour passer en sombre), soleil en sombre. */
.bouton-theme-soleil,
:root[data-theme="dark"] .bouton-theme-lune {
    display: none;
}

:root[data-theme="dark"] .bouton-theme-soleil {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bouton-theme-lune {
        display: none;
    }

    :root:not([data-theme="light"]) .bouton-theme-soleil {
        display: block;
    }
}

.site-titre {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--police-titres);
    font-size: 1.5rem;
    letter-spacing: 0.015em;
    text-decoration: none;
    color: var(--encre);
}

.site-titre-icone {
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
}

.site-main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0.85rem 1.25rem 3rem;
}

.site-footer {
    border-top: 1px solid var(--or);
    padding: 1.25rem 1rem 3rem;
    text-align: center;
}

/* inline-block + padding : cibles d'au moins 24 px de haut (WCAG 2.5.8),
   les liens passant sur plusieurs lignes sur mobile. */
.site-footer-liens a,
.site-footer-liens button {
    display: inline-block;
    margin: 0 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0.3rem 0;
    cursor: pointer;
}

.site-footer-liens a:hover,
.site-footer-liens button:hover {
    text-decoration: underline;
}

.message {
    padding: 0.75rem 1rem;
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    background: var(--papier-carte);
}

/* Accueil */

.intro h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.etat-vide {
    font-style: italic;
    opacity: 0.75;
}

.intro p {
    max-width: 46rem;
}

.intro-chiffres {
    font-style: italic;
    color: var(--encre-douce);
}

.accueil-controles {
    margin-top: 2.5rem;
}

.accueil-controles-titre {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

/* Histoire à la une : la dernière parue, avec le début de son texte */

.a-la-une {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    box-shadow: 0 3px 10px var(--ombre);
}

.a-la-une-illustration img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border: 1px solid var(--or);
    border-radius: var(--rayon);
}

.a-la-une-surtitre,
.erreur-code {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--or-texte);
}

.a-la-une h2 {
    margin: 0.3rem 0 0.4rem;
    font-size: 1.6rem;
}

.a-la-une h2 a {
    color: inherit;
    text-decoration: none;
}

.a-la-une h2 a:hover {
    text-decoration: underline;
}

.a-la-une .carte-histoire-meta {
    flex-wrap: wrap;
    margin: 0;
}

.a-la-une-extrait {
    margin: 1rem 0 1.25rem;
    padding-left: 1rem;
    border-left: 2px solid var(--or-clair);
    font-size: 1.1rem;
    line-height: 1.6;
}

.a-la-une-extrait p {
    margin: 0 0 0.75rem;
}

.a-la-une-extrait p:last-child {
    margin-bottom: 0;
}

@media (min-width: 720px) {
    .a-la-une {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
        padding: 1.5rem;
    }
}

/* Catalogue rangé par âge conseillé */

.groupe-age {
    margin-top: 2.25rem;
}

.groupe-age h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

/* Lien vers la page de l'âge (/ages/<n>-ans) : garde la couleur du titre,
   le soulignement suffit à le signaler. */
.groupe-age h3 a {
    color: inherit;
    text-decoration-color: var(--or-clair);
    text-underline-offset: 0.2em;
}

.groupe-age-intro {
    max-width: 46rem;
    margin: 0;
    color: var(--encre-douce);
}

.groupe-age .liste-histoires {
    margin-top: 1.25rem;
}

.groupe-age-renvoi {
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

/* Texte éditorial sous le catalogue */

.accueil-editorial {
    display: grid;
    gap: 0.5rem 2.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--or);
}

.accueil-editorial h2 {
    font-size: 1.15rem;
    margin: 0.5rem 0 0.6rem;
}

.accueil-editorial p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

@media (min-width: 960px) {
    .accueil-editorial {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Pages de genre */

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.navigation-genres {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--or);
}

.navigation-genres h2 {
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
}

.navigation-genres ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-genres a {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    color: var(--encre);
    text-decoration: none;
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    transition: background-color 0.15s ease;
}

.navigation-genres a:hover {
    background-color: var(--surface-survol);
}

.navigation-genres-compte {
    font-size: 0.8rem;
    color: var(--encre-douce);
    white-space: nowrap;
}

.accueil-recherche-champ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    max-width: 26rem;
}

.accueil-recherche-champ input {
    flex: 1;
    border: none;
    background: none;
    font: inherit;
    color: var(--encre);
}

.accueil-recherche-champ input:focus-visible {
    outline: none;
}

.accueil-recherche-champ:focus-within {
    outline: 2px solid var(--or-texte);
    outline-offset: 2px;
}

.accueil-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pastille-genre {
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--encre);
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: 999px;
    cursor: pointer;
}

.pastille-genre:hover {
    background: var(--surface-survol);
}

.pastille-genre[aria-pressed="true"] {
    background: var(--or-texte);
    border-color: var(--or-texte);
    color: var(--papier);
}

/* Contraste élevé de Windows : le système efface les fonds, et la pastille
   sélectionnée devenait identique aux autres. */
@media (forced-colors: active) {
    .pastille-genre[aria-pressed="true"] {
        forced-color-adjust: none;
        background: Highlight;
        border-color: Highlight;
        color: HighlightText;
    }
}

.liste-histoires {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
}

/* Pas de `display` ici : le filtre de l'accueil masque les cartes avec
   l'attribut hidden, qu'un display explicite écraserait. */
.carte-histoire {
    position: relative;
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: 0 3px 10px var(--ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carte-histoire:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--ombre);
}

/* Le lien ne porte que sur le titre et s'étend à toute la carte. */
.carte-histoire-titre a {
    color: inherit;
    text-decoration: none;
}

.carte-histoire-titre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Contour de focus sur la carte entière plutôt que sur le seul titre. Sans
   :has(), le contour par défaut du lien reste en place. */
@supports selector(:has(*)) {
    .carte-histoire-titre a:focus-visible {
        outline: none;
    }

    .carte-histoire:has(.carte-histoire-titre a:focus-visible) {
        outline: 2px solid var(--or-texte);
        outline-offset: 2px;
    }
}

.carte-histoire-illustration {
    position: relative;
}

.carte-histoire-image {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-bottom: 1px solid var(--or);
}

.carte-histoire-verifiee {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.65rem;
    line-height: 1;
    color: var(--papier-carte);
    /* Fond opaque : posé sur l'illustration, un fond translucide laissait
       passer ses couleurs et le contraste tombait à 3:1 sur un coin clair. */
    background: var(--or-texte);
    border-radius: 50%;
}

.carte-histoire-texte {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 1.25rem;
}

/* Après le titre dans le DOM (voir _carte.html.twig), au-dessus à l'écran. */
.carte-histoire-entete {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.carte-histoire-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.carte-histoire-genre {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--or-texte);
}

.carte-histoire-duree {
    font-size: 0.75rem;
    color: var(--encre-douce);
    white-space: nowrap;
}

.carte-histoire-statut {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.carte-histoire-statut--encours {
    background: var(--papier);
    border: 1px solid var(--or);
    color: var(--or-texte);
}

.carte-histoire-statut--terminee {
    background: transparent;
    border: 1px solid var(--encre-douce);
    color: var(--encre-douce);
}

.carte-histoire-titre {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
}

.carte-histoire-texte p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--encre-douce);
}

/* Lecture */

/* Barre de titre : seul .titre-histoire-texte est le <h1>, le lien retour et
   le bouton Partager sont à côté (voir chapter.html.twig). */
.titre-histoire {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.6rem;
}

.titre-histoire-retour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    margin: -0.35rem;
    font-family: var(--police-corps);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--encre-douce);
}

.titre-histoire-texte {
    flex: 1;
    margin: 0;
    font-size: 1.3rem;
}

.partage {
    display: flex;
}

.histoire-infos {
    display: flex;
    flex-wrap: wrap;
    margin: -0.2rem 0 0.9rem;
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.histoire-infos > span + span::before {
    content: "·";
    margin: 0 0.5rem;
}

.bouton-partage {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    margin: -0.35rem 0;
    font: inherit;
    font-family: var(--police-titres);
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
    color: var(--encre-douce);
    background: transparent;
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.bouton-partage:hover {
    background-color: var(--surface-survol);
}

.bouton-partage-icone {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

turbo-frame {
    display: block;
}

.lecture-cadre {
    scroll-margin-top: 1rem;
    max-width: 42rem;
    background: var(--papier-carte);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    box-shadow: 0 4px 18px var(--ombre);
    overflow: hidden;
}

.lecture-cadre--fin {
    border-color: var(--or-clair);
}

.lecture-cadre--fin.lecture-cadre--mort {
    border-color: var(--bordeaux);
}

.lecture-illustration {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-bottom: 1px solid var(--or);
}

.lecture-texte {
    padding: 1.25rem 1.75rem 0.5rem;
    font-size: 1.25rem;
}

/* Aligné à gauche, sans césure : le justifié creusait des « rivières »
   d'espaces, et des mots coupés gênent les jeunes lecteurs et les lecteurs
   dys. overflow-wrap garde un mot très long dans la colonne sur mobile. */
.lecture-texte p {
    margin: 0 0 0.85rem;
    text-align: left;
    hyphens: manual;
    overflow-wrap: break-word;
}

.lecture-texte p:first-of-type::first-letter {
    font-family: var(--police-titres);
    font-size: 2.4em;
    float: left;
    line-height: 0.85;
    padding: 0.05em 0.1em 0 0;
    color: var(--or-texte);
}

.lecture-fins {
    margin: 0.4rem 1.75rem 0;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--or-texte);
}

.lecture-fin-etiquette {
    margin: 0 1.75rem;
    padding-top: 0.5rem;
    font-family: var(--police-titres);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--or-texte);
    border-top: 1px dashed var(--or);
}

.lecture-cadre--mort .lecture-fin-etiquette {
    color: var(--bordeaux);
}

ul.lecture-choix {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

ul.lecture-choix a {
    display: block;
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: var(--encre);
    background: var(--papier);
    border: 1px solid var(--or);
    border-left-width: 4px;
    border-radius: var(--rayon);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

ul.lecture-choix a:hover,
ul.lecture-choix a:focus-visible {
    background-color: var(--surface-survol);
    transform: translateX(0.3rem);
}

ul.lecture-choix a:active {
    background-color: var(--surface-actif);
    transform: translateX(0.15rem);
}

.lecture-fin-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem 1.75rem 1.75rem;
}

.lecture-suite {
    margin: 0 1.75rem 1.75rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--or);
}

.lecture-suite-titre {
    margin: 0 0 0.5rem;
    font-family: var(--police-titres);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--or-texte);
}

.lecture-suite-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lecture-suite-liste a {
    color: var(--encre-douce);
    text-decoration-color: var(--or-clair);
}

/* EB Garamond romain et non Cinzel : un paragraphe entier en capitales se
   lit mal, surtout pour un enfant. Pas d'italique non plus (déconseillé sur
   un paragraphe entier pour les lecteurs dys, et chargé en différé). */
.lecture-presentation {
    margin: 1.1rem 1.75rem 0;
    padding: 0.9rem 1.1rem;
    font-family: var(--police-corps);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--encre-douce);
    background: var(--papier);
    border-left: 3px solid var(--or);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.lecture-presentation p {
    margin: 0 0 0.6rem;
}

.lecture-presentation p:last-child {
    margin-bottom: 0;
}

/* Autour de l'histoire : la partie écrite par l'auteur, sous le cadre de
   lecture, sur le papier de la page plutôt que sur la carte, pour ne pas la
   confondre avec une étape. Mêmes couples de couleurs que le reste du site. */
.autour {
    max-width: 42rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.75rem 0;
    border-top: 1px dashed var(--or);
    font-size: 1.1rem;
    line-height: 1.55;
}

.autour-titre {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
}

.autour h3 {
    margin: 1.1rem 0 0.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--or-texte);
}

.autour p {
    margin: 0 0 0.6rem;
}

.autour ul {
    margin: 0;
    padding-left: 1.2rem;
}

.autour li {
    margin-bottom: 0.4rem;
}

/* À lire aussi : sous « Autour de l'histoire », sur la page de présentation.
   Même papier, même filet, mêmes couples de couleurs (liens --encre-douce,
   texte --encre). */
.a-lire-aussi {
    max-width: 42rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.75rem 0;
    border-top: 1px dashed var(--or);
    font-size: 1.1rem;
    line-height: 1.55;
}

.a-lire-aussi-titre {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.a-lire-aussi ul {
    margin: 0;
    padding-left: 1.2rem;
}

.a-lire-aussi li {
    margin-bottom: 0.4rem;
}

.a-lire-aussi-meta {
    font-size: 0.95rem;
}

/* Bandeau de reprise / formulaire personnage */

.bandeau-reprise,
.formulaire-personnage {
    margin: 1rem 1.75rem 0;
    padding: 0.65rem 1.1rem;
    background: var(--papier);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
}

.bandeau-reprise p {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.formulaire-personnage label {
    display: block;
    margin: 0 0 0.6rem;
    font-family: var(--police-titres);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--or-texte);
}

.bandeau-reprise-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.formulaire-personnage-champs {
    display: flex;
    gap: 0.5rem;
}

/* min-width: 0 : sans ça le champ garde sa largeur naturelle (~20
   caractères) et fait déborder la page à 320 px (WCAG 1.4.10). */
.formulaire-personnage input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    font: inherit;
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    background: var(--papier-carte);
    color: var(--encre);
}

.bouton {
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: var(--rayon);
    text-decoration: none;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid var(--or);
    background: var(--papier);
    color: var(--encre);
    transition: background-color 0.15s ease;
}

.bouton--primaire {
    background: var(--or-texte);
    border-color: var(--or-texte);
    color: var(--papier);
}

.bouton--discret {
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .bouton:hover {
        background-color: var(--surface-survol);
    }

    .bouton--primaire:hover {
        background-color: var(--or-texte-survol);
    }

    .bouton--discret:hover {
        background-color: var(--papier-carte);
    }
}

/* Publicité */

/*
 * Sur grand écran, le cadre de lecture et l'encart pub forment deux
 * colonnes : la pub reste visible (sticky) sans jamais chevaucher le texte
 * ni les liens de choix. En dessous de 960px (tablette portrait, mobile),
 * une seule colonne : la pub redescend sous le cadre, comme avant.
 */
/* minmax(0, 1fr) et non 1fr (= minmax(auto, 1fr)) : la colonne ne doit pas
   s'élargir pour suivre un contenu trop large. */
.lecture-mise-en-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.encart-pub {
    margin-top: 1rem;
    padding: 0.75rem 1rem 1.25rem;
    border: 1px dashed var(--or);
    border-radius: var(--rayon);
    text-align: center;
}

.encart-pub-etiquette {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--encre-douce);
    margin-bottom: 0.5rem;
}

.encart-pub-zone {
    min-height: 90px;
}

@media (min-width: 960px) {
    .site-main--lecture {
        max-width: 62rem;
    }

    .site-main--accueil {
        max-width: 70rem;
    }

    .lecture-mise-en-page {
        grid-template-columns: minmax(0, 1fr) 180px;
    }

    .encart-pub {
        position: sticky;
        top: 1rem;
        align-self: start;
        margin-top: 0;
    }

    .encart-pub-zone {
        min-height: 480px;
    }
}

/* Formulaire de contact */

.formulaire-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}

.formulaire-page label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

.formulaire-page input,
.formulaire-page textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    background: var(--papier-carte);
    color: var(--encre);
}

.formulaire-page textarea {
    min-height: 8rem;
    resize: vertical;
}

.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulaire-page ul {
    color: var(--bordeaux);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
    padding-left: 1.2rem;
}

/* Pages légales */

.page-legale h2 {
    font-size: 1.15rem;
    margin-top: 1.75rem;
}

/* Pages d'erreur (templates/bundles/TwigBundle/Exception/) */

.erreur-code + h1 {
    margin-top: 0.3rem;
}

.erreur-suggestions {
    margin-top: 2.5rem;
}

.erreur-suggestions h2 {
    font-size: 1.5rem;
    margin: 0;
}

/* Animation "page qui tourne" */

@keyframes tourne-page {
    from {
        opacity: 0;
        transform: perspective(800px) rotateY(6deg) translateX(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tourne-page {
    transform-origin: left center;
    animation: tourne-page 0.35s ease-out;
}

/* La page qui tourne est déjà coupée côté JS (reading_controller.js) ; ici,
   les déplacements au survol et au focus. */
@media (prefers-reduced-motion: reduce) {
    .carte-histoire,
    ul.lecture-choix a {
        transition: none;
    }

    .carte-histoire:hover,
    ul.lecture-choix a:hover,
    ul.lecture-choix a:focus-visible,
    ul.lecture-choix a:active {
        transform: none;
    }
}

@media (max-width: 600px) {
    .lecture-texte,
    .bandeau-reprise,
    .formulaire-personnage {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    ul.lecture-choix,
    .lecture-fin-actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .lecture-fin-etiquette,
    .lecture-fins {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .autour,
    .a-lire-aussi {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .bouton-partage span {
        display: none;
    }
}