/* ==========================================================================
   Compléments écrits à la main.

   sisters.css est REGENERE depuis le prototype (bin/extraire-prototype.php) : toute
   retouche y serait perdue à la livraison suivante. Cette feuille porte donc ce que le
   prototype ne fournit pas, parce qu'il ne connaît pas ces écrans — la fiche d'album, en
   premier lieu, qu'il présente en fenêtre modale là où le site en fait une page.

   Elle est chargée APRÈS sisters.css et n'en redéfinit rien : uniquement des classes
   nouvelles. Si l'une d'elles apparaît un jour dans le prototype, la retirer d'ici.
   Seule exception, en fin de feuille : « Défauts de la maquette », des défauts du
   prototype lui-même, mesurés, qu'une nouvelle livraison peut corriger à sa source.

   Tout s'exprime avec les variables de la feuille du prototype, pour suivre le thème.
   ========================================================================== */

/* Fil d'Ariane ------------------------------------------------------------ */

/* Pages sans bandeau (fiches d'album et de perso) : l'en-tête est posée en absolu
   par-dessus la page (82 px de haut à 390 px, 125 px à 1280 px) ; le bandeau des autres
   pages lui réserve sa place, ici c'est le conteneur. */
.conteneur--sous-entete {
    padding-top: clamp(96px, 11vw, 140px);
}

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: clamp(14px, 2vw, 24px) 0;
    font-family: var(--f-ui);
    font-size: .85rem;
    color: var(--encre-doux);
}

.fil-ariane a {
    color: var(--rose);
    text-decoration: none;
    font-weight: 700;
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible {
    color: var(--rose-fonce);
    text-decoration: underline;
}

.fil-ariane > span[aria-hidden] {
    color: var(--encre-doux);
    opacity: .6;
}

/* Niouzeletter : case du parent (note NIOUZELETTER v2), dans la carte orange */
/* Le bloc garde sa hauteur : les blocs du formulaire complet s'étirent (flex-basis), ce qui
   creusait un grand vide sous la case sur téléphone. */
.niouze__bloc--case {
    flex: 0 0 auto;
    margin: 0;
}

.niouze__case {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.niouze__case input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--rose);
}

/* Texte réservé aux lecteurs d'écran -------------------------------------- */

/* Retire le texte de l'affichage sans le retirer de l'arbre d'accessibilité :
   `display:none` et `visibility:hidden` le cacheraient aussi aux lecteurs d'écran, ce qui
   est exactement l'inverse du but. */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bouton « voir plus » ---------------------------------------------------- */

/* Rendu « hidden » par le serveur, montré par site.js quand il replie la liste : sans
   script, rien n'est replié, le bouton n'a rien à faire. .voir-plus impose display:block,
   qui l'emporte sur [hidden] — le prototype règle le même cas pour .panneau et
   .jeu-scene. */
.voir-plus[hidden] {
    display: none;
}

/* Flèches du carrousel d'accueil ------------------------------------------ */

/* Même cas que .voir-plus : rendues « hidden », montrées par accueil.js. Sans script, elles
   ne feraient rien. .carrousel-fleche impose display:grid, qui l'emporte sur [hidden]. */
.carrousel-fleche[hidden] {
    display: none;
}

/* Bouton « Lire la suite » des auteurs ----------------------------------- */

/* Même cas que .voir-plus : rendu « hidden », montré par site.js quand il replie la
   biographie. .auteur__plus impose display:inline-flex, qui l'emporte sur [hidden]. */
.auteur__plus[hidden] {
    display: none;
}

/* Boutons « Voir les 21 tomes » et « Voir les N romans » (page BD) --------- */

/* Même cas que .voir-plus : rendus « hidden », montrés par site.js quand il replie la
   grille. .btn impose display:inline-block, qui l'emporte sur [hidden]. */
[data-deplier][hidden] {
    display: none;
}

/* Page BD : la couverture de la nouveauté est un lien --------------------
   La maquette v5 en fait un <button> qui ouvre la fiche par script ; le site rend un
   lien vers la fiche, qui marche sans JavaScript. Un lien est en ligne : sans bloc, la
   largeur que la feuille lui donne resterait sans effet. */
a.bd-nouveaute__couv {
    display: block;
}

/* Écris aux Sisters : ce que le prototype ne montre pas ------------------
   Le prototype valide en JavaScript et n'a qu'une ligne de retour ; le site valide sur
   le serveur, sous chaque champ, et remet un code de retrait. */

/* Champ piège anti-robots : hors de l'écran plutôt que display:none, que certains
   robots savent repérer. aria-hidden et tabindex=-1 le retirent du parcours. */
.champ-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fans__erreur {
    font-family: var(--f-ui);
    font-weight: 800;
    font-size: .78rem;
    color: #C4003F;
}

.fans__champ[aria-invalid="true"] {
    border-color: #C4003F;
}

.fans__mention {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    opacity: .72;
    max-width: 70ch;
}

/* Dessin joint (décision du 29/09) : un champ fichier, absent du prototype */
/* .fans__bloc a une base de 220 px, prévue pour la ligne prénom/âge : dans le formulaire
   en colonne, elle devient une hauteur (message, dessin, case : un vide sous chacun).
   Seuls les blocs de la ligne (.fans__duo) gardent leur base. */
.fans__form > .fans__bloc {
    flex: 0 0 auto;
}

.fans__champ--fichier {
    padding: 10px 14px;
    font-size: .88rem;
    cursor: pointer;
}

.fans__champ--fichier::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--rose);
    color: var(--blanc);
    font-family: var(--f-ui);
    font-weight: 800;
    cursor: pointer;
}

.fans__aide {
    font-size: .78rem;
    line-height: 1.45;
    opacity: .72;
}

.fans__erreur[hidden] {
    display: none;
}

/* Le dessin sur le mur, au-dessus du texte, dans la teinte du message */
.fans-message__dessin {
    width: 100%;
    max-width: 320px;
    margin: 0;
    border: 3px solid var(--teinte, var(--rose));
    border-radius: 16px;
    overflow: hidden;
    background: var(--blanc);
}

.fans-message__dessin img {
    display: block;
    width: 100%;
    height: auto;
}

.fans__retour p {
    margin: 0 0 6px;
}

.fans__code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05em;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* Niouzeletter : ce que le prototype ne montre pas -------------------------
   Il valide en JavaScript sans rien envoyer ; le site désigne le champ en cause et porte
   la mention d'information de lessisters.net. */

.niouze__champ[aria-invalid="true"] {
    border-color: #C4003F;
}

.niouze__mention {
    margin: 12px 0 0;
    font-size: .78rem;
    line-height: 1.5;
    opacity: .72;
    max-width: 70ch;
}

/* Blocs des actus (éditeur GrapesJS) ---------------------------------------
   Classes posées par les blocs de public/assets/js/admin/editeur-actus.js. Toujours sous
   .news-body : le conteneur de l'actu, dans la page publique comme dans le canevas. */

/* :where() garde la spécificité au plus bas : le CSS propre à une actu (confiné à
   .news-body par CssScoper) l'emporte toujours sur ces valeurs par défaut. */
.news-body > * + * {
    margin-top: 1em;
}

.news-body :where(p, li) {
    max-width: none; /* la colonne de l'actu borne déjà la ligne */
}

/* Intertitre : rose, souligné d'un trait court, comme les articles de bamboomag */
.news-body :where(h2) {
    margin-top: 1.6em;
    padding-bottom: .3em;
    font-size: var(--t-m);
    color: var(--rose);
    background: linear-gradient(var(--rose), var(--rose)) left bottom / 56px 3px no-repeat;
}

.news-body :where(h3) {
    margin-top: 1.4em;
    font-size: 1.2rem;
    color: var(--encre);
}

.news-body :where(ul, ol) {
    padding-left: 1.3em;
}

.news-body :where(li + li) {
    margin-top: .35em;
}

.news-body :where(a:not(.btn)) {
    color: var(--rose);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-body :where(a:not(.btn):hover, a:not(.btn):focus-visible) {
    color: var(--rose-fonce);
}

.news-body :where(strong, b) {
    font-weight: 700;
}

.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.news-body .actu-image {
    margin: 1.5em 0;
}

.news-body .actu-image figcaption,
.news-body .actu-galerie figcaption {
    margin-top: 6px;
    font-size: .85rem;
    opacity: .75;
}

.news-body .actu-duo {
    display: grid;
    gap: 16px 24px;
    align-items: center;
    margin: 1.5em 0;
}

.news-body .actu-duo__visuel {
    margin: 0;
}

.news-body .actu-colonnes {
    display: grid;
    gap: 16px 24px;
}

@media (min-width: 720px) {
    .news-body .actu-duo {
        grid-template-columns: 2fr 3fr;
    }

    .news-body .actu-colonnes {
        grid-template-columns: 1fr 1fr;
    }
}

.news-body .actu-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 1.5em 0;
}

.news-body .actu-galerie figure {
    margin: 0;
}

.news-body .actu-citation {
    margin: 1.5em 0;
    padding: 12px 20px;
    border-left: 4px solid var(--rose, #E73791);
    font-family: var(--f-titre, serif);
    font-size: 1.2rem;
}

.news-body .actu-citation cite {
    display: block;
    margin-top: 6px;
    font-family: var(--f-ui, sans-serif);
    font-size: .85rem;
    font-style: normal;
    opacity: .75;
}

/* Vidéo : 16/9 à la largeur du texte */
.news-body .actu-video,
.news-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
}

/* Pages légales -----------------------------------------------------------
   Mentions légales, conditions d'utilisation, confidentialité : du texte long, que la
   maquette ne prévoit pas (ses liens y pointent vers « # »). Héros sans image, carte
   de lecture à la largeur d'un texte. */

.heros--legal {
    min-height: 0;
    padding-block: clamp(120px, 12vw, 170px) clamp(90px, 10vw, 140px);
}

/* Le héros « rubrique » réserve la gauche à une image découpée : ici, il n'y en a pas */
.heros--legal .heros__texte {
    margin-inline: auto;
    text-align: center;
}

.legal {
    max-width: 820px;
    margin-inline: auto;
    font-family: var(--f-texte);
    line-height: 1.65;
    color: var(--encre);
}

.legal h2 {
    margin: 2em 0 .6em;
    font-family: var(--f-titre);
    font-size: var(--t-m);
    line-height: 1.2;
    color: var(--rose);
}

.legal h3 {
    margin: 1.6em 0 .5em;
    font-family: var(--f-ui);
    font-size: 1.05rem;
}

.legal p,
.legal ul {
    margin: 0 0 1em;
}

.legal ul {
    padding-left: 1.3em;
}

.legal li + li {
    margin-top: .35em;
}

.legal a {
    color: var(--rose);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:hover {
    color: var(--rose-fonce);
}

/* « En bref » : le résumé en langage d'enfant, en tête de page */
.legal__en-bref {
    margin-bottom: 1.5em;
    padding: clamp(18px, 3vw, 28px);
    border-radius: var(--r-bloc);
    background: var(--creme-rose);
}

.legal__en-bref h2 {
    margin-top: 0;
}

.legal__en-bref ul {
    margin-bottom: 0;
}

/* Un traitement de données : ligne par question (quoi, pourquoi, qui, combien de temps) */
.legal__table {
    width: 100%;
    margin: 0 0 1.2em;
    border-collapse: collapse;
    font-size: .95rem;
}

.legal__table th,
.legal__table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(46, 26, 71, .12);
    text-align: left;
    vertical-align: top;
}

.legal__table th {
    width: 32%;
    font-family: var(--f-ui);
    font-weight: 800;
    font-size: .85rem;
}

@media (max-width: 600px) {
    .legal__table th,
    .legal__table td {
        display: block;
        width: auto;
    }

    .legal__table th {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* Brouillon : tant que site.legal.publiees vaut false */
.legal__brouillon {
    max-width: none !important;
    margin-bottom: 1.5em !important;
    padding: 14px 18px;
    border-left: 5px solid var(--jaune);
    border-radius: 12px;
    background: #FFFBD1;
    font-size: .95rem;
}

.legal__a-completer {
    padding: 0 .25em;
    border-radius: 4px;
    background: var(--jaune);
    color: var(--encre);
    font-size: .92em;
}

.legal__date {
    margin-top: 2.5em !important;
    font-size: .85rem;
    color: var(--encre-doux);
}

/* ==========================================================================
   Galerie des persos : la carte est un lien vers la fiche.
   Le prototype en fait un <button> par script (.perso > button, dans sisters.css) ;
   le site rend un vrai lien, qui marche sans JavaScript. Mêmes règles, reportées.
   ========================================================================== */
.perso > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.perso > a:hover .perso__nom,
.perso > a:focus-visible .perso__nom {
    color: var(--rose-fonce);
}

/* Maquette du 27/10 : au survol, le portrait se soulève et s'incline, avec une ombre de la
   couleur du personnage, et « Voir la fiche » avance. La transition est posée par
   sisters.css sur .perso__portrait ; seul le survol y vise .perso button. */
.perso > a:hover .perso__portrait,
.perso > a:focus-visible .perso__portrait {
    transform: translateY(-7px) rotate(-1.4deg) scale(1.03);
    box-shadow: 0 20px 32px -16px color-mix(in srgb, var(--couleur, var(--rose)) 80%, transparent);
}

.perso > a:hover .perso__plus,
.perso > a:focus-visible .perso__plus {
    color: var(--rose-fonce);
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .perso > a:hover .perso__portrait,
    .perso > a:focus-visible .perso__portrait {
        transform: none;
    }
}

/* Fiche d'une actu -----------------------------------------------------------
   Structure des articles de bamboomag (date et rédacteur, titre, chapô encadré, visuel,
   texte, « À lire aussi »), habillage du site. Une colonne de lecture de 760 px, la
   largeur du canevas de l'éditeur (admin/editeur-canevas.css) : le rédacteur voit juste. */
.actu-page {
    margin-top: 0; /* .carte-contenu remonte sous un bandeau : ici, il n'y en a pas */
}

.actu-page__entete,
.actu-page__visuel,
.actu-page .news-body {
    max-width: 760px;
    margin-inline: auto;
}

.actu-page__meta {
    max-width: none;
    margin: 0 0 10px;
    font-family: var(--f-ui);
    font-size: .85rem;
    color: var(--encre-doux);
}

.actu-page__auteur {
    color: var(--rose);
    font-weight: 700;
}

.actu-page__titre {
    font-size: var(--t-l);
    color: var(--encre);
    text-wrap: balance;
}

.actu-page__chapo {
    max-width: none;
    margin: clamp(16px, 2vw, 24px) 0 0;
    padding: 14px 18px;
    border-left: 4px solid var(--rose);
    border-radius: 0 12px 12px 0;
    background: var(--creme-rose);
    color: var(--rose-fonce);
    font-weight: 600;
    line-height: 1.55;
}

.actu-page__visuel {
    margin-top: clamp(20px, 3vw, 32px);
    margin-bottom: 0;
}

.actu-page__visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.actu-page .news-body {
    margin-top: clamp(20px, 3vw, 32px);
    line-height: 1.65;
}

.actu-page__retour {
    max-width: none; /* p est borné à 62ch par sisters.css : le centrage serait décalé */
    margin: 2em 0 0;
    text-align: center;
}

/* « À lire aussi » : trois cartes du fil, comme la liste des Zactualités */
.a-lire {
    margin-top: clamp(36px, 5vw, 60px);
}

.a-lire__titre {
    margin-bottom: clamp(16px, 2vw, 24px);
    font-size: var(--t-l);
    color: var(--encre);
    text-align: center;
}

/* Maxence dézoomé de 15 % dans sa vignette (maquette du 16/10). La feuille le vise par
   section[data-page="persos"], la structure du prototype : le site n'a pas ces sections,
   d'où la même règle ici, par la vue de la page. */
body[data-vue="persos"] .perso__portrait[data-cle="maxence"] > img {
    transform: scale(.85);
    transform-origin: 50% 0;
}

/* Défauts de la maquette ---------------------------------------------------
   Présents à l'identique dans le prototype du 22/09 : à retirer d'ici quand une
   livraison les corrige (vérifier par la même mesure). */

/* Coulisses (anime) : le bouton de lecture couvre tout .video (inset:0), mais l'image
   y est bornée à 320 px. Le picto se centrait sur la colonne, 99 px à droite du centre
   de l'image à 1280 px. On ramène le cadre à la largeur de l'image. */
.coulisses .video {
    max-width: 320px;
}

/* Carrousel de l'accueil : les pastilles font 11 px, sous les 24 px qu'exige l'accessibilité
   pour une cible au doigt (Lighthouse « target-size », mesuré le 29/09). Le bouton passe à
   24 px, transparent ; la pastille de 11 px est redessinée au centre par ::before. Écart
   supprimé : les centres passent de 21 à 24 px, sans autre changement visible. */
.carrousel-puces {
    gap: 0;
    /* Le bouton grandit de 13 px autour de la pastille : on le descend de la moitié, pour
       que le centre reste où la maquette le place (sinon, à 390 px, les pastilles
       passaient sous le bouton du héros). */
    bottom: calc(26px - 6.5px);
}

@media (max-width: 700px) {
    .carrousel-puces {
        bottom: calc(16px - 6.5px);
    }
}

.carrousel-puce {
    position: relative;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.carrousel-puce::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 11px;
    height: 11px;
    border: 2px solid var(--blanc);
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
}

.carrousel-puce[aria-current="true"] {
    background: transparent;
}

.carrousel-puce[aria-current="true"]::before {
    background: var(--blanc);
}

.carrousel-puce:focus-visible {
    outline: 2px solid var(--blanc);
    outline-offset: -2px;
    border-radius: 50%;
}

/* Maquette v5 : sur les visuels clairs de l'accueil, les pastilles passent à l'encre
   (.heros--accueil .carrousel-puce…). Sa règle de la pastille active colorait le bouton
   entier, qui fait ici 24 px : un carré sombre, et la pastille inactive, restée blanche,
   disparaissait. Même teinte, reportée sur le dessin de 11 px. */
.heros--accueil .carrousel-puce,
.heros--accueil .carrousel-puce[aria-current="true"] {
    border: 0;
    background: transparent;
}

.heros--accueil .carrousel-puce::before {
    border-color: var(--encre);
}

.heros--accueil .carrousel-puce[aria-current="true"]::before {
    background: var(--encre);
}

.heros--accueil .carrousel-puce:focus-visible {
    outline-color: var(--encre);
}

/* Accueil : la pastille « Nouveau » clignote sans fin dans la maquette v5. WCAG 2.2.2
   demande qu'un clignotement de plus de 5 s puisse être arrêté : quatre cycles de
   1,1 s s'arrêtent d'eux-mêmes à 4,4 s, sur l'état plein (100 % de l'animation).
   Question posée à l'éditorial (note de cadrage §16 n°17) : à retirer si la maquette
   règle le point elle-même. */
.pastille-nouveau {
    animation-iteration-count: 4;
}

/* Boutique : cadrage d'un visuel, choisi dans l'admin (champ « cadrage » de la collection
   boutique). Remplace, pour les images de la médiathèque, les règles de sisters.css qui
   visent trois fichiers par leur nom — nom que la médiathèque ne garde pas.
   « entier » : couverture en hauteur vue en entier ; « agrandi » : visuel très blanc zoomé. */
.produit--entier .ph > img {
    object-fit: contain;
    padding: 6%;
}

.produit--agrandi .ph {
    overflow: hidden;
}

.produit--agrandi .ph > img {
    transform: scale(1.3);
}

/* Accueil : ambiance « claire » d'un visuel du carrousel (collection carrousel), celle du
   photocall. Mêmes valeurs que la règle de sisters.css sur [data-diapo="1"], qui liait le
   dégradé à la 2ᵉ position : accueil.js ne pose plus data-diapo sur la zone, l'ambiance
   suit le visuel quel que soit l'ordre choisi dans l'admin. */
@media (min-width: 861px) {
    .heros--accueil[data-ambiance="claire"] {
        background-color: #E6F2F7;
    }

    .heros--accueil[data-ambiance="claire"] .heros__fond {
        left: 18%;
    }

    .heros--accueil[data-ambiance="claire"] .heros__fond > img {
        object-position: center 40%;
    }

    .heros--accueil[data-ambiance="claire"]::after {
        background: linear-gradient(90deg,
            rgba(230, 242, 247, 1) 0%, rgba(230, 242, 247, .97) 30%,
            rgba(230, 242, 247, .82) 42%, rgba(230, 242, 247, .35) 53%, rgba(230, 242, 247, 0) 62%);
    }
}

/* Pied : « Gestion des cookies » est un bouton (il ouvre le panneau de tarteaucitron), habillé
   comme les liens légaux voisins (sisters.css, .pied__legal a). */
.pied__legal .pied__cookies {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: .8;
    text-decoration: underline;
}
.pied__legal .pied__cookies:hover,
.pied__legal .pied__cookies:focus-visible {
    opacity: 1;
}