/* Menu déroulant « Les lectures », commun à toutes les pages.
   <details> natif : s'ouvre au clic comme au toucher, sans dépendre du survol. */
details.menu-lectures{margin:0}
details.menu-lectures > summary::before,details.menu-lectures[open] > summary::before{content:none}
.menu-lectures{position:relative;font-family:Inter,system-ui,sans-serif;font-size:14px}
.menu-lectures > summary{font:inherit;list-style:none;cursor:pointer;color:var(--corps,#152833);padding:6px 0;white-space:nowrap}
.menu-lectures > summary::-webkit-details-marker{display:none}
.menu-lectures > summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.menu-lectures[open] > summary::after{transform:translateY(0) rotate(-135deg)}
.menu-lectures > summary:hover{color:var(--or-texte,#8A6508)}
.menu-lectures > summary:focus-visible{outline:2px solid var(--or,#B4830C);outline-offset:3px}
nav .menu-lectures ul{display:block;position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:250px;margin:0;padding:6px 0;list-style:none;background:var(--creme,#FAF7F0);border:1px solid rgba(180,131,12,.35);border-radius:4px;box-shadow:0 10px 30px rgba(7,29,41,.12)}
nav .menu-lectures li{margin:0}
nav .menu-lectures a{display:flex;justify-content:space-between;gap:18px;padding:10px 16px;text-decoration:none;color:var(--navy,#071D29)}
nav .menu-lectures a:hover,nav .menu-lectures a:focus-visible{background:rgba(180,131,12,.08);outline:none}
nav .menu-lectures a[aria-current="page"]{color:var(--or-texte,#8A6508)}
nav .menu-lectures a span{color:var(--muted,#6E6656)}
.nav-droite{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:600px){ .nav-droite{gap:16px} nav .menu-lectures ul{min-width:230px} }
/* Accueil et thème natal sur téléphone : logo et bouton restent sur la première ligne,
   le menu passe sur une seconde ligne au lieu de pousser le bouton hors de l'écran. */
@media (max-width:600px){
  nav:has(.avec-bouton){flex-wrap:wrap;row-gap:10px;padding-bottom:14px}
  .nav-droite.avec-bouton{display:contents}
  .avec-bouton .menu-lectures{order:3;flex-basis:100%}
  .avec-bouton .menu-lectures ul{left:0;right:auto}
}

/* Menu téléphone à trois barres (17/09/2026) : remplace tout le reste de la navigation
   sous 1100 px, quand le script l'a construit (classe js-burger). Seuil relevé de 860 à 1100 px le
   18/09/2026 : avec « Le carnet », la barre complète ne tient plus sur une ligne en dessous. */
.menu-burger,.menu-panneau{display:none}
@media (max-width:1100px){
  .js-burger nav{position:relative;flex-wrap:nowrap;padding-bottom:26px}
  .js-burger nav > ul.ui,.js-burger nav .nav-droite{display:none !important}
  .js-burger .menu-burger{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid rgba(180,131,12,.45);
    border-radius:4px;padding:9px 13px;font:500 14px Inter,system-ui,sans-serif;color:var(--navy,#071D29);cursor:pointer}
  .js-burger .menu-burger:focus-visible{outline:2px solid var(--or,#B4830C);outline-offset:3px}
  .burger-barres{position:relative;display:inline-block;width:18px;height:12px}
  .burger-barres::before,.burger-barres::after,.burger-barres span{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .15s,opacity .15s}
  .burger-barres::before{top:0}.burger-barres span{top:5px}.burger-barres::after{top:10px}
  .menu-ouvert .burger-barres::before{transform:translateY(5px) rotate(45deg)}
  .menu-ouvert .burger-barres span{opacity:0}
  .menu-ouvert .burger-barres::after{transform:translateY(-5px) rotate(-45deg)}
  .js-burger .menu-panneau:not([hidden]){display:block;position:absolute;left:0;right:0;top:calc(100% - 14px);z-index:60;
    background:var(--creme,#FAF7F0);border:1px solid rgba(180,131,12,.35);border-radius:4px;box-shadow:0 14px 34px rgba(7,29,41,.16)}
  .menu-panneau ul{list-style:none;margin:0;padding:8px 0;display:block}
  .menu-panneau li{margin:0}
  .menu-panneau a{display:block;padding:12px 18px;font:500 15px Inter,system-ui,sans-serif;color:var(--navy,#071D29);text-decoration:none}
  .menu-panneau a:hover,.menu-panneau a:focus-visible{background:rgba(180,131,12,.08);outline:none}
  .menu-panneau a[aria-current="page"]{color:var(--or-texte,#8A6508)}
  .menu-panneau .menu-titre{padding:12px 18px 4px;font:500 12px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--or-texte,#8A6508);border-top:1px solid rgba(180,131,12,.18);margin-top:4px}
  .menu-panneau .menu-lecture a{padding-left:28px}
}

/* Pied de page sur téléphone : les liens en deux colonnes, lisibles d'un coup d'œil
   (retour d'Aurélie du 18/09/2026). « body » passe devant le footer ul{display:flex}
   des pages, chargé après cette feuille. */
@media (max-width:640px){
  body footer ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
}

/* « Le carnet » dans la barre : même typographie que « Les lectures » (18/09/2026). */
.nav-droite a.lien-carnet,.nav-droite a.lien-calcul{font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--corps,#152833);text-decoration:none;white-space:nowrap;padding:6px 0}
.nav-droite a.lien-carnet:hover,.nav-droite a.lien-carnet[aria-current="page"],.nav-droite a.lien-calcul:hover,.nav-droite a.lien-calcul[aria-current="page"]{color:var(--or-texte,#8A6508)}

/* Bouton « Offrir une lecture » (bon cadeau), menu A « épuré » choisi par Aurélie le 27/09/2026. */
nav a.lien-offrir{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;
  color:var(--or-texte,#8A6508);border:1px solid var(--or,#B4830C);border-radius:4px;padding:8px 14px}
nav a.lien-offrir:hover,nav a.lien-offrir[aria-current="page"]{background:rgba(180,131,12,.08)}
nav a.lien-offrir:focus-visible{outline:2px solid var(--or,#B4830C);outline-offset:3px}
.menu-panneau .menu-offrir a{margin:10px 18px 6px;border:1px solid var(--or,#B4830C);border-radius:4px;text-align:center;color:var(--or-texte,#8A6508)}
/* Avec « Offrir une lecture », la barre ne tient plus sur une ligne dans les pages étroites (carnet, commande) :
   sur ordinateur, le lien « ← Revenir… » s'efface (le logo et le fil d'Ariane ramènent déjà à l'accueil) ;
   il reste en tête du menu téléphone. */
@media (min-width:1101px){ nav .nav-droite > a.retour, nav .nav-droite > a.lien.ui{display:none} }
.menu-panneau li.menu-titre:first-child{border-top:0;margin-top:0}

/* En-tête à la même place sur toutes les pages (audit du 29/09/2026) : le logo et le menu gardent la largeur de
   l'accueil (1120 px, marges comprises) même dans les pages de lecture à 760 px ; seul le texte reste étroit.
   Au-delà de 1180 px seulement, pour ne jamais créer de défilement horizontal (barre de défilement comprise). */
@media (min-width:1180px){
  body > .wrap > nav{width:1064px;max-width:none;margin-left:calc(50% - 532px);margin-right:0;box-sizing:border-box}
  body > .wrap > nav .nav-droite{gap:18px}  /* même espacement que l'accueil */
}

/* Finitions de l'audit du 29/09/2026 (lot B). */
.aller-contenu{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy,#071D29);color:var(--creme,#FAF7F0);
  font:500 14px Inter,system-ui,sans-serif;text-decoration:none;padding:10px 16px;border-radius:4px}
.aller-contenu:focus{top:12px;outline:2px solid var(--or,#B4830C);outline-offset:2px}
main[tabindex="-1"]:focus,#contenu:focus{outline:none}
/* Pas de mot seul en fin de titre ; paragraphes mieux coupés (navigateurs récents, sans effet ailleurs). */
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
/* Chiffres de même largeur dans les tableaux de positions : les degrés s'alignent en colonne. */
table,.positions,td{font-variant-numeric:tabular-nums}