/* Couche d'interface : mouvement, retours visuels et confort de lecture.
   Les idées (apparition en glissant, retour en haut, survol des cartes, barre d'action collée) viennent de sites modèles
   étudiés pour ce projet ; tout le code est écrit pour ce site. Rien n'est caché sans JavaScript, et tout mouvement
   s'arrête quand le visiteur demande de réduire les animations. */

:root { --sortie: cubic-bezier(.16, 1, .3, 1); --sens: 1; }
[dir="rtl"] { --sens: -1; }

@keyframes entree { from { opacity: 0; transform: translateY(14px); } }
@keyframes apparition { from { opacity: 0; transform: translateY(18px); } }
@keyframes glisse { from { opacity: 0; transform: translateY(-8px); } }
@keyframes brillance { to { background-position: -200% 0; } }

/* 1. En-tête : il reste en haut et se remplit dès que la page défile. */
.barre-haut { position: sticky; top: 0; z-index: 20; transition: background-color .25s ease, box-shadow .25s ease; }
.barre-haut.defile { background: color-mix(in srgb, var(--background) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); }
.site-vitrine .barre-haut { position: static; }

/* 2. Boutons et liens : relief au survol, enfoncement au clic, flèche qui avance. */
.btn, .btn-icone, .lien, .livre-extrait { transition: transform .2s var(--sortie), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn svg, .lien svg, .livre-extrait svg { transition: transform .2s var(--sortie); }
@media (hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgb(32 37 29 / .16); }
  .btn-icone:hover { transform: translateY(-1px); }
  .btn:hover svg:not(:first-child), .lien:hover svg:not(:first-child), .livre-extrait:hover svg { transform: translateX(calc(4px * var(--sens))); }
  .lien:hover svg:first-child:not(:last-child) { transform: translateX(calc(-4px * var(--sens))); }
}
.btn:not(:disabled):active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn:focus-visible, .lien:focus-visible, .btn-icone:focus-visible { outline: 3px solid var(--accent-trait); outline-offset: 3px; }

/* 3. Cartes : elles se soulèvent, la couverture s'agrandit un peu. */
.livre-item, .carte-reprise, .vitrine-atouts li, .a-venir li { transition: transform .3s var(--sortie), box-shadow .3s ease, border-color .2s ease, background-color .2s ease; }
.livre-item .livre-visuel, .carte-reprise .couverture { overflow: hidden; }
.couverture img { transition: transform .5s var(--sortie), opacity .4s ease; }
@media (hover: hover) {
  .livre-item:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgb(10 14 12 / .16); }
  /* Les rangées sans cadre (reprises de lecture) ne se soulèvent plus : un titre souligné suffit. */
  .carte-reprise:hover strong { text-decoration: underline; text-underline-offset: 3px; }
  .a-venir li:hover { border-style: solid; border-color: var(--accent-trait); }
  .livre-item:hover .couverture img, .carte-reprise:hover .couverture img { transform: scale(1.05); }
}
.liste-chapitres a { transition: background-color .2s ease, padding-inline-start .25s var(--sortie); }
.liste-chapitres a:hover { padding-inline-start: 28px; }
.liste-chapitres a svg { transition: transform .2s var(--sortie); }
.liste-chapitres a:hover svg { transform: translateX(calc(3px * var(--sens))); }

/* 4. Couvertures : un voile animé pendant le chargement, puis un fondu. */
.js-ui .couverture img:not(.pret) { opacity: 0; }
.js-ui .couverture:has(img:not(.pret)) { background: linear-gradient(100deg, var(--soft) 30%, var(--card) 50%, var(--soft) 70%); background-size: 200% 100%; animation: brillance 1.4s linear infinite; }

/* 5. Retours : messages qui glissent, questions qui s'ouvrent avec un indicateur. */
.alerte { animation: glisse .4s var(--sortie) both; }
.questions summary, .vitrine-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
.questions summary::-webkit-details-marker, .vitrine-faq summary::-webkit-details-marker { display: none; }
.questions summary::after, .vitrine-faq summary::after { content: ""; flex: none; width: .55em; height: .55em; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--sortie); }
.questions details[open] > summary::after, .vitrine-faq details[open] > summary::after { transform: rotate(-135deg); }
.questions details[open] > p, .vitrine-faq details[open] > p { animation: glisse .35s var(--sortie) both; }
.questions summary:focus-visible, .vitrine-faq summary:focus-visible { outline: 3px solid var(--accent-trait); outline-offset: 3px; border-radius: 8px; }

/* 6. Pages de texte : sections à plat, sans cadre (voir le bloc du 21 octobre 2026 en fin de fichier). */
.page-texte > section { margin-top: 28px; }
.page-texte > section h2 { margin-top: 0; }
.page-texte > section > :last-child { margin-bottom: 0; }

/* 7. Retour en haut de page. */
.haut-de-page { position: fixed; inset-inline-end: 22px; bottom: 26px; z-index: 30; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--foreground); box-shadow: 0 8px 22px rgb(10 14 12 / .16); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s var(--sortie), visibility .25s, background-color .2s ease; }
.haut-de-page.visible { opacity: 1; visibility: visible; transform: none; }
.haut-de-page:hover { background: var(--accent-citron); color: var(--accent-ink); }
.haut-de-page:focus-visible { outline: 3px solid var(--accent-trait); outline-offset: 3px; }
.haut-de-page svg { width: 20px; height: 20px; transform: rotate(-90deg); }
@media (max-width: 960px) { .haut-de-page { bottom: 104px; inset-inline-end: 16px; } }

/* 8. Fiche d'un livre : l'action reste à portée du pouce sur téléphone. */
.barre-cta { display: none; }
@media (max-width: 720px) {
  .barre-cta { position: fixed; inset-inline: 12px; bottom: 98px; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 30px rgb(10 14 12 / .2); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .25s ease, transform .3s var(--sortie), visibility .25s; }
  .barre-cta.visible { opacity: 1; visibility: visible; transform: none; }
  .barre-cta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
  .barre-cta .btn { flex: none; min-height: 44px; padding-block: .5rem; }
  .haut-de-page.avec-cta { bottom: 168px; }
}

/* 9. Mot de passe : bouton pour l'afficher ou le masquer. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-inline-end: 96px; }
.voir-mdp { position: absolute; inset-block: 4px; inset-inline-end: 6px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--foreground); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s ease; }
.voir-mdp:hover { background: color-mix(in srgb, var(--accent-citron) 40%, var(--soft)); }
.voir-mdp:focus-visible { outline: 3px solid var(--accent-trait); outline-offset: 2px; }

/* 10. Mouvement : entrée des pages et apparition au défilement, seulement si le visiteur l'accepte. */
@media (prefers-reduced-motion: no-preference) {
  .contenu > :not(.vitrine-page) { animation: entree .55s var(--sortie) both; }
  .contenu > :nth-child(2) { animation-delay: .06s; }
  .contenu > :nth-child(3) { animation-delay: .12s; }
  .contenu > :nth-child(4) { animation-delay: .18s; }
  .contenu > :nth-child(n+5) { animation-delay: .24s; }
  .js-reveal .revele:not(.visible) { opacity: 0; }
  .js-reveal .revele.visible { animation: apparition .6s var(--sortie) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .livre-item, .carte-reprise, .couverture img, .haut-de-page, .barre-cta, .barre-haut { transition: none; }
  .alerte, .questions details[open] > p, .vitrine-faq details[open] > p { animation: none; }
  .js-ui .couverture:has(img:not(.pret)) { animation: none; }
  html { scroll-behavior: auto; }
}

/* Pied de page : mêmes marges que le contenu (il se trouvait collé au bord de l'écran). */
.pied { max-width: 1280px; margin-inline: auto; padding-inline: 48px; }
@media (max-width: 1050px) { .pied { padding-inline: 30px; } }
@media (max-width: 720px) { .pied { padding-inline: 18px; } }

/* Vitrine : un seul livre, sa carte et son résumé côte à côte. */
.vitrine-unique { display: grid; grid-template-columns: minmax(260px, 377px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 28px; }
.vitrine-unique .grille-livres { margin: 0; }
.vitrine-unique-texte { max-width: 60ch; }
.vitrine-resume { margin: 12px 0 24px; font: 550 clamp(20px, 2vw, 26px)/1.45 var(--police-titre); text-wrap: pretty; }
.vitrine-unique-texte .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .vitrine-unique { grid-template-columns: minmax(0, 1fr); gap: 24px; } .vitrine-unique .grille-livres { max-width: 377px; } }
@media (max-width: 720px) {
  .vitrine-resume { font-size: 20px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vitrine-unique-texte .actions { display: grid; }
}
.vitrine-unique .grille-livres { grid-template-columns: minmax(0, 1fr); }

/* Fiche d'un livre sur grand écran : les boutons sont sous le titre, la couverture suit la lecture. */
.fiche .actions { margin: 22px 0 28px; }
@media (min-width: 721px) {
  .fiche { align-items: start; }
  .fiche > .couverture { position: sticky; top: 112px; }
}

/* Abonnement : l'offre à gauche, ce qu'elle comprend à droite. */
.carte-formulaire.abo-large { max-width: 980px; padding: 40px; }
.abo-grille { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
.abo-prix { padding: 28px; border-radius: 22px; background: var(--soft); }
.abo-prix form { margin: 20px 0 14px; }
.abo-montant { margin: 6px 0 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.abo-montant strong { font: 650 clamp(38px, 4vw, 52px)/1 var(--police-titre); letter-spacing: -.02em; }
.abo-montant span { color: var(--muted-foreground); }
.abo-note { font-size: 13px; margin: 0; }
.abo-inclus h2 { margin: 0 0 18px; font-size: 22px; }
.abo-inclus ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.abo-inclus li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.abo-inclus li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--accent-citron); color: var(--accent-ink); }
@media (max-width: 860px) { .abo-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; } .carte-formulaire.abo-large { padding: 28px 22px; } .abo-prix { padding: 22px; } }

/* Compte : des cartes côte à côte sur grand écran, la zone sensible repliée. */
.compte-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 24px; }
.compte-bloc { min-width: 0; padding: 24px; border-radius: 26px; background: var(--card); }
.compte-bloc > h2 { margin: 0 0 14px; font-size: 20px; }
.compte-bloc > :last-child { margin-bottom: 0; }
.compte-bloc .carte-reprise { margin-bottom: 0; background: var(--soft); }
.compte-bloc .note-carte { margin-bottom: 12px; }
.compte-sensible { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 8px; }
.compte-sensible > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; font-weight: 600; list-style: none; }
.compte-sensible > summary::-webkit-details-marker { display: none; }
.compte-sensible > summary::after { content: ""; flex: none; width: .55em; height: .55em; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--sortie); }
.compte-sensible[open] > summary::after { transform: rotate(-135deg); }
.compte-sensible > summary:focus-visible { outline: 3px solid var(--accent-trait); outline-offset: 3px; border-radius: 8px; }
.compte-sensible[open] > :not(summary) { max-width: 640px; }
@media (max-width: 900px) { .compte-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .compte-bloc { padding: 20px; border-radius: 22px; } }
.compte-sensible h2 { font-size: 20px; margin: 22px 0 10px; }

/* Connexion et inscription : le formulaire et, sur grand écran, ce que donne un compte. */
.auth-aside { display: none; }
@media (min-width: 961px) {
  .auth-page { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 400px); gap: 64px; justify-content: center; align-items: center; margin-block: 24px; }
  .auth-page .carte-formulaire { margin: 0; }
  .auth-aside { display: block; }
  .auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
  .auth-aside li { display: flex; align-items: flex-start; gap: 16px; }
  .auth-aside .pastille-icone { flex: none; }
  .auth-aside h2 { margin: 2px 0 6px; font-size: 18px; }
  .auth-aside p { margin: 0; color: var(--muted-foreground); font-size: 15px; line-height: 1.55; }
}

/* Inscription : ce qui se passe ensuite, et une issue après l'envoi de l'e-mail. */
.aide-inscription { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.aide-inscription a { text-decoration: underline; text-underline-offset: 3px; }
.panneau-centre .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* Liste des chapitres sur téléphone : une ligne par chapitre (le titre se replie, l'étiquette et l'icône restent à droite). */
@media (max-width: 720px) {
  .liste-chapitres a { flex-wrap: nowrap; gap: 10px; padding: 12px 16px; }
  .liste-chapitres a > span:not(.num):not(.tag) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .liste-chapitres a > .tag { flex: none; margin-inline-start: 0; white-space: nowrap; }
  .liste-chapitres a:hover { padding-inline-start: 16px; }
}
@media (max-width: 360px) {
  .liste-chapitres a { flex-wrap: wrap; }
  .liste-chapitres a > span:not(.num):not(.tag) { flex: 1 1 110px; }
  .liste-chapitres a > .tag { margin-inline-start: 30px; }
}

/* Lecteur : pas de barre latérale, donc pas de marge de réserve (le texte était décalé de 54 px vers la droite sur ordinateur). */
.coque.coque-lecteur, html[dir="rtl"] .coque.coque-lecteur { margin-left: 0; margin-right: 0; }

/* Lecteur sur grand écran : les boutons de la barre se rapprochent de la colonne de texte au lieu de coller aux bords de l'écran. */
@media (min-width: 1100px) {
  .barre-lecteur { padding-inline: max(24px, calc((100% - 1040px) / 2)); }
}

/* Lecteur : raccourcis clavier pour surligner (texte atteignable par Tab, paragraphe choisi entouré). */
.texte-livre:focus { outline: none; }
.texte-livre p.para-courant { outline: 3px solid var(--accent-trait); outline-offset: 8px; border-radius: 6px; }
.clavier-etat { position: fixed; inset-inline: 12px; bottom: 16px; z-index: 40; max-width: 640px; margin-inline: auto; padding: 12px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--foreground); box-shadow: 0 14px 30px rgb(10 14 12 / .2); font-size: 14px; line-height: 1.45; text-align: center; }
.clavier-etat[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .texte-livre p.para-courant { transition: outline-color .2s ease; } }


/* 21 octobre 2026, cadres retirés à la demande du porteur : le texte et les sections reposent sur le fond. Les cartes de livres, les formulaires, les panneaux centrés, les feuilles et l'administration gardent leur cadre. */
.a-la-une { padding: 8px 0; border: 0; border-radius: 0; background: none; }
.bandeau-abo { padding: 8px 0; border-radius: 0; background: none; }
.compte-bloc { padding: 0; border-radius: 0; background: none; }
.compte-bloc + .compte-bloc { padding-top: 24px; border-top: 1px solid var(--border); }
@media (min-width: 861px) { .compte-bloc + .compte-bloc { padding-top: 0; border-top: 0; } }
.carte-reprise { padding: 10px 0; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--border); }
.cartes-reprises .carte-reprise { border-bottom: 1px solid var(--border); }
.compte-bloc .carte-reprise { background: none; }
.liste-chapitres { border: 0; border-radius: 0; background: none; }
.vitrine-atouts li { padding: 8px 0; border-radius: 0; background: none; }

/* Après le retrait des cadres : un peu plus d'air entre les rangées de la page de compte, et l'ancre du menu de la vitrine tient compte de ses deux lignes sur téléphone. */
.compte-grille { row-gap: 36px; }
@media (max-width: 720px) { html { scroll-padding-top: 132px; } }

/* 22 octobre 2026 : composition de la fiche d'un livre (références « The Graphic Effect »).
   Texte à gauche sur 7/12, couverture hors-centre à droite sur 5/12, plus grande et collée au défilement.
   Sous 901 px, la mise en page d'origine (couverture en tête) reste en vigueur. */
@media (min-width: 901px) {
  .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: start; padding: clamp(28px, 4vw, 52px); }
  .fiche > div { grid-column: 1; grid-row: 1; }
  .fiche > .couverture { grid-column: 2; grid-row: 1; width: min(100%, 340px); justify-self: end; top: 112px; }
  .fiche h1 { max-width: 13ch; font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; margin-bottom: 10px; }
}

/* 22 octobre 2026 : pages de texte (autrice, comment lire, conditions, aide) en lignes éditoriales.
   Le titre de chaque section occupe 5/12 à gauche, le texte 7/12 à droite, sur le même axe que l'en-tête de page.
   La colonne centrée de 70 caractères ne subsiste que sur téléphone et tablette. */
@media (min-width: 901px) {
  .page-texte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 80px); max-width: none; margin: 0 0 56px; }
  .page-texte > section { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; margin: 0; padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--border); }
  .page-texte > section:first-of-type { border-top: 0; }
  .page-texte > section > h2 { grid-column: 1; position: sticky; top: 112px; margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
  .page-texte > section > :not(h2) { grid-column: 2; max-width: 62ch; }
  .page-texte > :not(section) { grid-column: 2; max-width: 62ch; }
  .page-texte > .questions { max-width: none; margin: 0; }
}

/* 22 octobre 2026 : axe 5/12 | 7/12 commun à tout le site, côté connecté.
   Compte : colonnes 5/7 au lieu de 6/6, sur le même axe que le texte d'appui de l'en-tête.
   Sommaire d'un livre : titre, recherche et notes à gauche (5/12), liste des chapitres à droite (7/12). */
@media (min-width: 901px) {
  .contenu .compte-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 80px); }
  .contenu:has(> .liste-chapitres) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(32px, 6vw, 80px); align-items: start; }
  .contenu:has(> .liste-chapitres) > * { grid-column: 1; }
  .contenu:has(> .liste-chapitres) > h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin-block: 14px 12px; }
  .contenu:has(> .liste-chapitres) > .liste-chapitres { grid-column: 2; grid-row: 1 / span 5; margin-top: 14px; }
}

/* Bibliothèque : recherche et cartes lisibles, dans la palette Carbon/Lime. */
.page-bibliotheque .recherche { padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--card); box-shadow: 0 8px 28px rgb(0 0 0 / .035); }
.page-bibliotheque .champ-recherche { min-height: 50px; background: var(--input); border-radius: 12px; }
.page-bibliotheque .filtres { gap: 8px; flex-wrap: wrap; }
.page-bibliotheque .filtres a { min-height: 44px; border-radius: 12px; }
.page-bibliotheque .filtres a[aria-current] { background: var(--accent-citron); color: #171717; font-weight: 650; }
.page-bibliotheque .intro { padding-block: 24px 16px; }
.page-bibliotheque .intro h1 { max-width: 22ch; font-size: clamp(30px,3.5vw,46px); line-height: 1.12; letter-spacing: -.03em; }
.page-bibliotheque .livre-item { border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 8px 28px rgb(0 0 0 / .04); overflow: hidden; }
.page-bibliotheque .livre-legende { padding: 20px; }
.page-bibliotheque .livre-legende h2, .page-bibliotheque .livre-legende h3 { font-size: 23px; line-height: 1.2; }
.page-bibliotheque .livre-extrait { min-height: 46px; font-weight: 650; }
.page-bibliotheque .en-tete-section { margin-block: 28px 18px; }
/* Abonnement : une offre clairement mise en avant et un seul bouton de paiement. */
.page-abonnement .carte-formulaire { border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 16px 48px rgb(0 0 0 / .045); }
.page-abonnement .carte-formulaire h1 { max-width: 22ch; font-size: clamp(30px,3.8vw,44px); line-height: 1.12; letter-spacing: -.03em; margin-bottom: 30px; }
.page-abonnement .abo-prix { border: 1px solid color-mix(in srgb,var(--accent-citron) 65%,var(--border)); background: radial-gradient(ellipse at top left,color-mix(in srgb,var(--accent-citron) 17%,transparent),transparent 70%),var(--card); box-shadow: 0 8px 24px rgb(0 0 0 / .035); }
.page-abonnement .abo-prix .etiquette { color: var(--foreground); font-size: 12px; letter-spacing: .1em; }
.page-abonnement .abo-montant strong { font-size: clamp(42px,4vw,56px); }
.page-abonnement .abo-prix .btn { background: var(--accent-citron); color: #171717; min-height: 52px; border-radius: 14px; font-weight: 700; }
.page-abonnement .abo-inclus { padding-block: 20px; }
.page-abonnement .abo-inclus li { padding-block: 8px; }
.page-abonnement .abo-note { line-height: 1.65; }
@media (max-width:600px) {
 .page-bibliotheque .recherche { padding: 10px; }
 .page-abonnement .carte-formulaire { border-radius: 22px; }
 .page-abonnement .abo-grille { gap: 12px; }
}

/* Création et réinitialisation du mot de passe : critères du serveur et état explicite. */
.page-mot-de-passe .carte-formulaire { max-width: 520px; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 12px 36px rgb(0 0 0 / .045); }
.page-mot-de-passe .carte-formulaire h1 { font-size: clamp(26px,4vw,34px); letter-spacing: -.025em; line-height: 1.15; }
.page-mot-de-passe .btn.plein, .auth-page .carte-formulaire form > .btn.plein { min-height: 50px; border-radius: 12px; background: #c6ff34; color: #171717; font-weight: 700; }
.page-mot-de-passe .btn.plein:hover, .auth-page .carte-formulaire form > .btn.plein:hover { background: #b4ec1f; }
.mdp-conseils { margin: 12px 0 24px; padding: 16px; background: var(--soft); border-radius: 14px; }
.mdp-conseils__titre { margin: 0 0 12px; font-weight: 650; font-size: 14px; }
.mdp-conseils ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.mdp-conseils li { display: flex; align-items: baseline; gap: 10px; }
.mdp-repere { font-weight: 700; }
.mdp-conseils .discret { margin-block: 14px; font-size: 13px; }
.mdp-etat { margin: 0; font-size: 14px; line-height: 1.5; }
.mdp-valide { color: var(--success); }
.champ-mdp .voir-mdp { min-height: 44px; min-width: 64px; }