/* =========================================================================
   Lucas Bemben - site d'auteur
   Feuille de style unique.

   Organisation :
     1.  Polices
     2.  Couleurs et reglages generaux
     3.  Textes
     4.  En-tete et menu
     5.  Ouverture de page
     6.  La vignette (le composant central du site)
     7.  Fiche d'un ouvrage
     8.  Page d'accueil
     9.  Page "Explorer"
     10. Auteur, contact, mentions
     11. Pied de page
     12. Affichage sur telephone
   ========================================================================= */


/* ============================== 1. POLICES ============================== */
/* Hebergees avec le site : aucun appel a un service exterieur, donc aucune
   donnee de visiteur transmise a un tiers. */

@font-face { font-family:'Cormorant'; src:url('assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }


/* ==================== 2. COULEURS ET REGLAGES GENERAUX ==================== */

:root {
  /* Fonds : le parchemin du site de Caroline, pour que les deux sites
     se repondent. Les cartes restent presque blanches : c'est l'ecart entre
     le fond et la carte qui fait tenir la lecture. */
  --page:        #F2E7D3;   /* identique a --parchemin sur caroline.lucas-bemben.fr */
  --carte:       #FFFCF5;
  --creme:       #F8F1E3;   /* bandes de section, plus claires que le fond */
  --pied:        #EDE0C9;   /* pied de page, legerement plus soutenu */
  --cadre:       #F4EBD9;   /* le fond des cadres de couverture, dans la carte */

  /* Textes */
  --encre:       #1F1A15;
  --encre-douce: #574C42;
  --encre-legere:#8A7D70;

  /* Accent : le doré du site actuel, assombri pour rester lisible sur blanc */
  --or:          #9A6D28;
  --or-clair:    #C79A4E;
  --trait:       rgba(120, 88, 42, .20);
  --trait-fort:  rgba(120, 88, 42, .34);
  --or-pale:     rgba(154, 109, 40, .09);

  /* Une teinte par type de publication, pour les pastilles */
  --t-ouvrage:     #9A6D28;
  --t-article:     #3E6B7A;
  --t-livret:      #6B7A3E;
  --t-application: #7A4E6B;

  --largeur:     1200px;
  --rayon:       14px;
  --ombre:       0 2px 4px rgba(31,26,21,.04), 0 10px 26px rgba(31,26,21,.055);
  --ombre-forte: 0 4px 8px rgba(31,26,21,.06), 0 20px 44px rgba(31,26,21,.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* Les ligatures fi, ff et ffi sont desactivees : elles soudent les lettres
     et font disparaitre le point du i. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0;
  /* Meme lumiere que sur le site de Caroline : un eclaircissement en haut de
     page, une ombre chaude en bas a droite. Le parchemin ne parait pas plat. */
  background-image:
    radial-gradient(1200px 700px at 50% -5%, rgba(255, 251, 243, .92), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(216, 196, 156, .30), transparent 60%);
}

img { max-width: 100%; height: auto; }

.contenu { width: min(100% - 48px, var(--largeur)); margin-inline: auto; }
.contenu--etroit { width: min(100% - 48px, 820px); margin-inline: auto; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.saut-contenu:focus { left: 0; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 3px; }


/* ============================== 3. TEXTES ============================== */

h1, h2, h3, h4 {
  font-family: 'Cormorant', Georgia, serif;
  color: var(--encre);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 54px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: clamp(19px, 1.9vw, 22px); }

p { margin: 0 0 1.05em; color: var(--encre-douce); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.surtitre {
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--or); margin: 0 0 12px;
}
.chapo {
  font-family: 'Cormorant', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1.45;
  color: var(--encre-douce); max-width: 62ch;
}
.prose { max-width: 70ch; }
.filet { width: 72px; height: 2px; border: 0; background: var(--or); margin: 24px 0; opacity: .5; }
.filet--centre { margin-inline: auto; }

.citation {
  font-family: 'Cormorant', Georgia, serif;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.38;
  color: var(--encre); border-left: 2px solid var(--or);
  padding-left: 22px; margin: 0; font-style: italic;
}


/* ========================= 4. EN-TETE ET MENU ========================= */
/* Plus de bandeau photographique : un en-tete fin, et le contenu tout de suite. */

.bandeau-site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 236, 219, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.bandeau-site__interieur {
  width: min(100% - 40px, var(--largeur));
  margin-inline: auto; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; min-height: 68px;
}

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.marque img { width: 34px; height: auto; display: block; }
.marque__nom {
  font-family: 'Cormorant', Georgia, serif; font-size: 23px; font-weight: 600;
  line-height: 1; color: var(--encre);
}
.marque__role {
  display: block; font-family: 'Inter', sans-serif; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-legere);
  margin-top: 4px; font-weight: 500;
}

.menu { display: flex; align-items: center; gap: 2px; }
.menu a, .menu__bouton {
  font-size: 14px; color: var(--encre-douce); text-decoration: none;
  padding: 9px 13px; border-radius: 8px; background: none; border: 0; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.menu a:hover, .menu__bouton:hover { color: var(--encre); background: var(--or-pale); }
.menu a[aria-current="page"] { color: var(--or); font-weight: 600; }

.menu__bouton::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.menu__bouton[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }

.menu__groupe { position: relative; }
.menu__liste {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 272px; padding: 8px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: var(--ombre-forte); display: none; flex-direction: column; gap: 1px;
  list-style: none; margin: 0;
}
/* Passerelle invisible : sans elle, la souris quitte le menu en traversant
   l'espace vide et le sous-menu se referme. */
.menu__liste::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.menu__groupe[data-ouvert="true"] .menu__liste { display: flex; }
.menu__liste a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; }

.burger {
  display: none; background: none; border: 1px solid var(--trait-fort); border-radius: 9px;
  width: 42px; height: 42px; cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--encre);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }


/* ========================= 5. OUVERTURE DE PAGE ========================= */

.ouverture { padding: clamp(42px, 6vw, 76px) 0 clamp(26px, 3.5vw, 42px); }
.ouverture h1 { margin-bottom: .3em; }
.ouverture .chapo { margin-top: 14px; }
.compte {
  font-size: 13px; color: var(--encre-legere); letter-spacing: .04em;
  margin-top: 18px; display: block;
}

.section { padding: clamp(40px, 6vw, 80px) 0; }
.section--creme { background: var(--creme); border-block: 1px solid var(--trait); }
.section__entete { max-width: 62ch; margin-bottom: clamp(26px, 3.5vw, 44px); }


/* ===================== 6. LA VIGNETTE (composant central) ===================== */
/* Le meme bloc sert aux ouvrages, aux articles, aux livrets et aux applications.
   Le cadre de couverture a toujours les memes proportions : c'est ce qui donne
   au rayonnage son alignement. */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}
.grille--large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.vignette {
  display: flex; flex-direction: column;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.vignette:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--trait-fort); }
.vignette[hidden] { display: none; }

.vignette__cadre {
  aspect-ratio: 3 / 4;
  background: var(--cadre);
  display: grid; place-items: center;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--trait);
}
.vignette__cadre img {
  max-width: 100%; max-height: 100%; width: auto;
  box-shadow: 0 6px 16px rgba(31,26,21,.18), 0 1px 2px rgba(31,26,21,.12);
  border-radius: 2px;
}
/* Les captures d'application sont en paysage : leur cadre l'est aussi. */
.vignette--paysage .vignette__cadre { aspect-ratio: 4 / 3; }

.vignette__corps { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.vignette__source {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-legere); margin: 0 0 9px; line-height: 1.35;
}
.vignette__titre {
  font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 600;
  line-height: 1.2; margin: 0 0 9px; color: var(--encre);
}
/* La description est ramenee a trois lignes : sans cela, un resume long
   etire toute la rangee de la grille et casse l'alignement. */
.vignette__desc {
  font-size: 14.5px; line-height: 1.55; color: var(--encre-douce); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.vignette__pied {
  margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--or);
  display: flex; align-items: center; gap: 6px;
}
.vignette:hover .vignette__pied { text-decoration: underline; }
.vignette__pied--inactif { color: var(--encre-legere); font-style: italic; }

/* Pastille de type, utilisee sur la page Explorer */
.type {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; margin-bottom: 10px;
  /* Le corps de la vignette est une colonne flex : sans cette ligne, la
     pastille s'etire sur toute la largeur au lieu d'epouser son texte. */
  align-self: flex-start;
}
.type--ouvrage     { color: var(--t-ouvrage); }
.type--article     { color: var(--t-article); }
.type--livret      { color: var(--t-livret); }
.type--application { color: var(--t-application); }

/* Une application et sa notice forment un seul bloc dans la grille. */
.bloc-appli { display: flex; flex-direction: column; }
.bloc-appli .vignette { flex: 1; }

.lien-second {
  font-size: 13px; color: var(--encre-legere); text-decoration: underline;
  margin-top: 11px; align-self: flex-start;
}
.lien-second:hover { color: var(--encre); }


/* ========================= 7. FICHE D'UN OUVRAGE ========================= */

.fiche {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-bottom: clamp(40px, 6vw, 70px);
}
.fiche__couverture {
  position: sticky; top: 96px;
  background: var(--cadre); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 26px; display: grid; place-items: center;
}
.fiche__couverture img {
  max-width: 100%; border-radius: 2px;
  box-shadow: 0 10px 26px rgba(31,26,21,.2), 0 2px 4px rgba(31,26,21,.12);
}
.fiche h1 { margin-bottom: .35em; }

.bouton {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  background: var(--or); color: #FFFDF8; text-decoration: none;
  font-size: 14.5px; font-weight: 500; border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31,26,21,.16); }
.bouton--fin { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton--fin:hover { background: var(--or-pale); }
.bouton--inactif {
  background: transparent; color: var(--encre-legere);
  border: 1px dashed var(--trait-fort); cursor: default; font-style: italic;
}
.bouton--inactif:hover { transform: none; box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; align-items: center; }

.etiquettes { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.etiquettes li {
  font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--trait-fort); color: var(--encre-douce);
}
.etiquettes a { text-decoration: none; }
.etiquettes a:hover { color: var(--or); }


/* Liste d'articles compacte : sur l'accueil, les couvertures de revue se
   ressemblent trop pour faire des vignettes lisibles. */
.liste-articles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.liste-articles li { border-top: 1px solid var(--trait); }
.liste-articles li:last-child { border-bottom: 1px solid var(--trait); }
.liste-articles a, .liste-articles .inactif {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: baseline; padding: 18px 4px; text-decoration: none;
  transition: background .2s ease;
}
.liste-articles a:hover { background: var(--or-pale); }
.liste-articles .titre {
  font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 600;
  line-height: 1.25; color: var(--encre);
}
.liste-articles .revue {
  display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-legere); margin-bottom: 5px; font-weight: 600;
}
.liste-articles .action { font-size: 13.5px; color: var(--or); white-space: nowrap; }
.liste-articles .action--inactif { color: var(--encre-legere); font-style: italic; }

/* Bloc « dans la meme rubrique », au bas des fiches d'ouvrage */
.voisins { padding-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--trait); }
.voisins h2 { font-size: 24px; margin-bottom: 22px; }


/* ========================= 8. PAGE D'ACCUEIL ========================= */

.intro {
  display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px); align-items: center;
  padding: clamp(44px, 6vw, 78px) 0 clamp(36px, 5vw, 60px);
}
.intro__portrait img {
  width: 100%; border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
}
.intro__devise {
  font-family: 'Cormorant', Georgia, serif; font-style: italic;
  font-size: 16.5px; color: var(--encre-legere); text-align: center;
  margin-top: 14px; line-height: 1.4;
}

.rayons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rayon {
  display: flex; flex-direction: column; text-decoration: none;
  padding: 24px 22px 26px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.rayon:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); border-color: var(--or-clair); }
.rayon__nombre {
  font-family: 'Cormorant', Georgia, serif; font-size: 40px; font-weight: 600;
  line-height: 1; color: var(--or); margin-bottom: 10px;
}
.rayon h3 { margin-bottom: .35em; font-size: 21px; }
.rayon p { font-size: 14.5px; margin: 0; }
.rayon__fleche { margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--or); }

.bandeau-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 28px 0; border-block: 1px solid var(--trait);
}
.chiffre { text-align: center; }
.chiffre b {
  display: block; font-family: 'Cormorant', Georgia, serif; font-size: 34px;
  font-weight: 600; color: var(--encre); line-height: 1;
}
.chiffre span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-legere); }


/* ========================= 9. PAGE "EXPLORER" ========================= */

.filtres {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre); margin-bottom: 38px;
}
.filtres__groupe + .filtres__groupe { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--trait); }
.filtres__titre {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-legere); margin: 0 0 13px; font-weight: 600;
}
.choix { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.choix label {
  display: inline-block; cursor: pointer; font-size: 13.5px;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--trait-fort);
  color: var(--encre-douce); background: var(--cadre); user-select: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* La case elle-meme est masquee a l'oeil mais reste active au clavier et pour
   les lecteurs d'ecran. On la retire du flux sans la superposer aux etiquettes,
   sinon elle intercepte les clics destines a l'etiquette voisine. */
.choix input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.choix input:checked + label { background: var(--or); color: #FFFDF8; border-color: transparent; }
.choix input:focus-visible + label { outline: 3px solid var(--or); outline-offset: 3px; }
.choix label:hover { border-color: var(--or); }

.filtres__pied {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; justify-content: space-between;
}
.compteur { font-size: 14.5px; color: var(--encre-douce); font-weight: 500; }
.raz {
  background: none; border: 0; cursor: pointer; color: var(--encre-legere);
  font-family: inherit; font-size: 14px; text-decoration: underline;
}
.raz:hover { color: var(--encre); }

.aucun-resultat {
  grid-column: 1 / -1; text-align: center; padding: 48px 20px;
  border: 1px dashed var(--trait-fort); border-radius: var(--rayon);
  color: var(--encre-legere); font-style: italic;
}


/* ===================== 10. AUTEUR, CONTACT, MENTIONS ===================== */

.auteur { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(32px, 5vw, 62px); align-items: start; }
.auteur img { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre-forte); }

.cartes-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.carte-contact {
  padding: 28px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.carte-contact h2 { font-size: 25px; }
/* Le :not(.bouton) est indispensable : sans lui, cette regle (0-1-1) l'emporte
   sur .bouton (0-1-0) et repeint le libelle du bouton en or sur fond or, donc
   invisible. Les boutons gardent ainsi leur propre couleur de texte. */
.carte-contact a:not(.bouton) { color: var(--or); font-weight: 500; }

.texte-legal h2 { margin-top: 1.6em; font-size: 24px; }
.texte-legal p, .texte-legal li { font-size: 15.5px; }


/* ========================= 11. PIED DE PAGE ========================= */

.pied {
  margin-top: clamp(46px, 6vw, 80px); border-top: 1px solid var(--trait);
  background: var(--pied); padding: clamp(36px, 4.5vw, 54px) 0 26px;
}
.pied__colonnes { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
.pied h4 {
  font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-legere); margin: 0 0 14px; font-weight: 600;
}
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { color: var(--encre-douce); text-decoration: none; font-size: 14.5px; }
.pied a:hover { color: var(--or); text-decoration: underline; }
.pied p { font-size: 14.5px; }
.pied__bas {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 13.5px; color: var(--encre-legere);
}


/* ==================== 12. AFFICHAGE SUR TELEPHONE ==================== */

@media (max-width: 1060px) {
  .rayons, .bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 1px;
    padding: 12px 18px 20px; background: var(--carte);
    border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-forte);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .bandeau-site[data-menu="ouvert"] .menu { display: flex; }
  .menu a, .menu__bouton { font-size: 16px; padding: 11px 12px; width: 100%; justify-content: space-between; }
  .menu__liste {
    position: static; display: flex; box-shadow: none; border: 0; background: none;
    padding: 0 0 8px 14px; min-width: 0; border-left: 1px solid var(--trait); margin-left: 12px;
  }
  .menu__groupe:not([data-ouvert="true"]) .menu__liste { display: none; }
  .menu__liste::before { display: none; }
}

@media (max-width: 780px) {
  body { font-size: 16.5px; }
  .contenu, .contenu--etroit { width: calc(100% - 34px); }
  .intro { grid-template-columns: 1fr; }
  .intro__portrait { width: min(62%, 240px); margin-inline: auto; }
  .fiche { grid-template-columns: 1fr; }
  .fiche__couverture { position: static; width: min(68%, 270px); margin-inline: auto; }
  .auteur { grid-template-columns: 1fr; }
  .auteur img { width: min(62%, 240px); margin-inline: auto; display: block; }
  .cartes-contact { grid-template-columns: 1fr; }
  .rayons { grid-template-columns: 1fr; }
  .bandeau-chiffres { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pied__colonnes { grid-template-columns: 1fr; gap: 28px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 18px; }
}

@media print {
  .bandeau-site, .pied, .filtres, .actions { display: none; }
  body { background: #fff; font-size: 11pt; }
  .vignette, .fiche { page-break-inside: avoid; }
}