/* ==========================================================================
   salelles.fr — feuille de style unique
   Toutes les pages utilisent ce fichier. Ne pas créer de CSS par page.
   Ordre : 1. réglages  2. base  3. navigation  4. fonds  5. pages
           6. composants  7. responsive
   ========================================================================== */

/* ---------- 1. Réglages ------------------------------------------------- */

:root {
  /* Couleur active de chaque onglet, relevée dans la maquette PowerPoint.
     « accueil » ne figure pas dans la maquette : gris neutre en attendant
     une couleur choisie. */
  --actif-accueil:       #6e6e6e;
  --actif-livres:        #83cbeb;
  --actif-films:         #ffc000;
  --actif-instants:      #caeefb;
  --actif-conferences:   #de09ee;
  --actif-pataphysique:  #a51642;
  --actif-actualites:    #7030a0;
  --actif-sites:         #9bb716;

  --texte:        #ffffff;
  --nav-texte:    #000000;   /* menu en lettres noires, comme dans la maquette */
  --texte-ombre:  0 1px 4px rgba(0, 0, 0, .55);

  /* Maquette de référence : 1280 x 720 */
  --marge:        3.4vw;   /* ≈ 44 px sur 1280 */
  --nav-hauteur:  4.6rem;

  --transition:   .18s ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* ---------- 2. Base ----------------------------------------------------- */

html { font-size: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--texte);
  background: #1a1a1a;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

/* Titre de page : présent pour la structure et les moteurs de recherche,
   absent de la maquette donc masqué visuellement. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement clavier */
.lien-evitement {
  position: absolute;
  top: -100vh; left: var(--marge);
  z-index: 100;
  padding: .6rem 1rem;
  background: #000;
  color: #fff;
  font-size: .95rem;
}
.lien-evitement:focus { top: .6rem; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- 3. Navigation ----------------------------------------------- */
/* Identique sur toutes les pages. Fond totalement transparent, fixe,
   posée au-dessus de la photographie. Texte en minuscules. */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  padding: 1.1rem var(--marge) 0;
}

/* Les sept onglets occupent toute la largeur de la page, comme dans la
   maquette : ils sont répartis d'un bord à l'autre. */
.nav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4em 1em;
}

.nav__lien {
  display: inline-block;
  font-size: 1.25rem;      /* 20 pt dans la maquette */
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--nav-texte);
  transition: color var(--transition);
}

/* Chaque onglet porte sa propre couleur : elle apparaît au survol,
   au focus clavier, et sur la page en cours. */
.nav__lien--accueil       { --couleur: var(--actif-accueil); }
.nav__lien--livres        { --couleur: var(--actif-livres); }
.nav__lien--films         { --couleur: var(--actif-films); }
.nav__lien--instants      { --couleur: var(--actif-instants); }
.nav__lien--conferences   { --couleur: var(--actif-conferences); }
.nav__lien--pataphysique  { --couleur: var(--actif-pataphysique); }
.nav__lien--actualites    { --couleur: var(--actif-actualites); }
.nav__lien--sites         { --couleur: var(--actif-sites); }

.nav__lien:hover,
.nav__lien:focus-visible,
.nav__lien[aria-current="page"] { color: var(--couleur); }

/* Le menu est noir par défaut. Sur le fond sombre de la page livres,
   il passe en blanc. */
.page-livres { --nav-texte: #ffffff; }
.page-livres .nav__lien { text-shadow: var(--texte-ombre); }

/* Pages sur fond clair — films (fond générique) et « seul en selle » :
   tout y est en noir, sans ombre portée qui salirait le texte.
   Les couleurs d'onglet y sont assombries, teinte conservée : sur cet
   ivoire, celles de la maquette tombent à 1,2 de contraste, autant dire
   invisibles. Les autres pages gardent les couleurs de la maquette. */
.page-films,
.page-livre-yvan {
  --nav-texte: #000000;
  color: #000;

  --actif-livres:      #1b7ca7;
  --actif-films:       #946f00;
  --actif-instants:    #0c7ca4;
  --actif-conferences: #ca08d9;
  --actif-sites:       #697c0f;
}
/* Fiches de conférences et de pataphysique : le fond y est clair,
   le texte est noir. Les grilles, elles, gardent leur texte blanc
   sur les vignettes. */
.page-conference-detail,
.page-pataphysique-detail {
  --nav-texte: #000000;
  color: #000;
}

.page-films .nav__lien,
.page-films .film,
.page-films .retour,
.page-livre-yvan .nav__lien,
.page-livre-yvan .film,
.page-livre-yvan .retour,
.page-conference-detail .nav__lien,
.page-conference-detail .film,
.page-conference-detail .retour,
.page-pataphysique-detail .nav__lien,
.page-pataphysique-detail .film,
.page-pataphysique-detail .retour { text-shadow: none; }

/* Le lecteur reste posé sur un cadre noir : son texte demeure blanc. */
.page-conference-detail .film__lancer,
.page-pataphysique-detail .film__lancer { color: #fff; }

/* Sur les fiches de films, le lecteur reste sur fond noir : son texte,
   lui, demeure blanc. */
.page-films .film__lancer,
.page-films .film__lien-video { color: #fff; }


/* Chaque page déclare sa couleur, réutilisée par les liserés de survol. */
.page-accueil       { --onglet-actif: var(--actif-accueil); }
.page-livres        { --onglet-actif: var(--actif-livres); }
.page-films         { --onglet-actif: var(--actif-films); }
.page-instants      { --onglet-actif: var(--actif-instants); }
.page-conferences   { --onglet-actif: var(--actif-conferences); }
.page-pataphysique  { --onglet-actif: var(--actif-pataphysique); }
.page-actualites    { --onglet-actif: var(--actif-actualites); }
.page-sites         { --onglet-actif: var(--actif-sites); }

/* Bouton d'ouverture du menu, mobile uniquement */
.nav__bouton {
  display: none;
  position: fixed;
  top: .9rem; right: var(--marge);
  z-index: 60;
  width: 2.6rem; height: 2.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__bouton span,
.nav__bouton span::before,
.nav__bouton span::after {
  position: absolute;
  left: 0;
  display: block;
  width: 2.2rem; height: 2px;
  background: var(--nav-texte);
  transition: transform var(--transition), opacity var(--transition);
}
.nav__bouton span { top: 50%; }
.nav__bouton span::before { content: ""; top: -.55rem; }
.nav__bouton span::after  { content: ""; top:  .55rem; }

/* ---------- 4. Fonds ---------------------------------------------------- */
/* La photographie est prioritaire : elle occupe l'écran, proportions
   conservées, jamais rognée au-delà du nécessaire. */

.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #1a1a1a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.page-accueil       .fond { background-image: url("../assets/fonds/fond-accueil.jpg"); }
.page-livres        .fond { background-image: url("../assets/fonds/fond-livres.jpg"); }
.page-films         .fond { background-image: url("../assets/fonds/fond-films-generique.jpg"); }
.page-instants      .fond { background-image: url("../assets/fonds/fond-instants.jpg"); }
.page-conferences   .fond { background-image: url("../assets/fonds/fond-conferences.jpg"); }
.page-pataphysique  .fond { background-image: url("../assets/fonds/fond-pataphysique.jpg"); }
.page-actualites    .fond { background-image: url("../assets/fonds/fond-actualites.jpg"); }
.page-sites         .fond { background-image: url("../assets/fonds/fond-sites.jpg"); }

/* Pages intérieures : le fond ne défile pas avec le contenu. */
/* Les chemins sont relatifs à ce fichier CSS, pas à la page qui l'appelle :
   « ../ » même pour les pages rangées dans pages/.
   Les fiches de films héritent du fond générique via .page-films. */
.page-livre-yvan    .fond { background-image: url("../assets/fonds/fond-livre-yvan.jpg"); }

/* Classe posée sur les 21 fiches de films : elles reprennent le fond
   générique de .page-films, aucune règle propre n'est nécessaire. */
.page-film-detail { }

/* ---------- 5. Pages ---------------------------------------------------- */

/* 5.1 Accueil : photographie, navigation, « salelles.fr ». Rien d'autre. */

.page-accueil { height: 100vh; overflow: hidden; }

.accueil {
  position: relative;
  height: 100vh;
}

.accueil__signature {
  position: absolute;
  right: var(--marge);
  bottom: 1.2rem;
  font-size: 1.75rem;          /* 28 pt dans la maquette */
  line-height: 1;
  text-transform: lowercase;
  color: var(--texte);
  text-shadow: var(--texte-ombre);
}

/* 5.2 Cadre commun des pages intérieures */

.contenu {
  position: relative;
  min-height: 100vh;
  padding: var(--nav-hauteur) var(--marge) 3rem;
}

/* Page « fixe » : tout tient dans un écran. Les images sont dimensionnées
   en vh pour cela. Le défilement reste possible sur un écran très bas,
   afin qu'aucun contenu ne soit inaccessible. */
.contenu--fixe { min-height: 100vh; }

/* 5.3 Livres — 5 colonnes, 2 rangées */

.grille-livres {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem 1.9rem;
  align-items: start;
  max-width: 96rem;
  margin: 0 auto;
}

/* Les couvertures n'ont pas toutes les mêmes proportions. Chaque vignette
   occupe donc un cadre identique, et l'image s'y inscrit entière, centrée,
   sur fond noir. Aucune couverture n'est rognée. */
.grille-livres .vignette {
  aspect-ratio: 2 / 3;
  max-height: calc((100vh - var(--nav-hauteur) - 6rem) / 2);
  margin: 0 auto;
}

/* 5.4 Films — 4 colonnes, 5 rangées */

.grille-films {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem 1rem;
  max-width: 66rem;
  margin: 0 auto;
}

/* 21 films : 4 colonnes, 6 rangées (la dernière n'en contient qu'un). */
.grille-films .vignette {
  aspect-ratio: 16 / 9;
  max-height: calc((100vh - var(--nav-hauteur) - 6rem) / 6);
  margin: 0 auto;
}

/* 5.5 Conférences — 4 sur la première rangée, 3 sur la seconde.
   Grille de 12 colonnes : 4 × 3 puis 3 × 4, comme dans la maquette. */

.grille-conferences {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem 1.5rem;
  max-width: 78rem;
  margin: 0 auto;
}
/* Huit conférences : deux rangées de quatre. */
.grille-conferences .vignette { grid-column: span 3; aspect-ratio: 4 / 3; }

.grille-pataphysique .vignette { aspect-ratio: 4 / 3; }

.legende-page {
  position: absolute;
  right: var(--marge);
  bottom: 1.4rem;
  font-size: 1.25rem;
  text-transform: lowercase;
  text-shadow: var(--texte-ombre);
}

/* 5.6 Pataphysique — 3 colonnes, 2 rangées, texte de contexte à droite */

.pataphysique {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(14rem, 2fr);
  gap: 2.5rem;
  align-items: center;
  max-width: 96rem;
  margin: 0 auto;
}

.grille-pataphysique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.2rem;
}

/* Le fond de la page pataphysique est clair : le texte est en noir. */
.contexte {
  font-size: 1.15rem;
  line-height: 1.55;
  text-transform: lowercase;
  color: #000;
}
.contexte p + p { margin-top: 1em; }

/* 5.7 Instants — citation puis trois accès */

.instants {
  max-width: 34rem;
  margin-left: 37%;
  padding-top: 3vh;
}

.citation {
  font-size: 1.1rem;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
  text-shadow: var(--texte-ombre);
}
.citation cite { font-style: normal; }
.citation__auteur {
  display: block;
  margin-top: .9em;
  text-transform: lowercase;
}

.acces { margin-top: 3.2rem; }
.acces li + li { margin-top: .6rem; }

.acces a {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: lowercase;
  text-shadow: var(--texte-ombre);
  transition: opacity var(--transition);
}
.acces a:hover,
.acces a:focus-visible { opacity: .72; }

/* 5.8 Actualités / archives — page à scroller */

.archives {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
  max-width: 44rem;
  margin: 0 auto;
}

.archives .vignette__image { max-height: 88vh; width: auto; }

/* 5.9 Sites amis / contact */

/* La photographie de fond de cette page est blanche : tout le texte
   y est en noir. */
.sites {
  max-width: 34rem;
  margin: 6vh auto 0;
  text-align: center;
  color: #000;
}

.sites__titre {
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: lowercase;
}

.sites__liste { margin-top: 1.8rem; }
.sites__liste li + li { margin-top: .85rem; }

.sites__liste a {
  font-size: 1.05rem;
  word-break: break-word;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), opacity var(--transition);
}
.sites__liste a:hover,
.sites__liste a:focus-visible { border-bottom-color: currentColor; }

/* 5.10 Contact — bouton noir posé sous la liste des sites amis.
   Le formulaire se déplie au clic, sans JavaScript. */

.contact {
  margin-top: 2.4rem;
  text-align: left;
}

.contact__bouton {
  display: inline-block;
  padding: .7rem 2.2rem;
  border-radius: .4rem;
  background: #000;
  color: #fff;
  font-size: 1.1rem;
  text-transform: lowercase;
  cursor: pointer;
  list-style: none;
  transition: opacity var(--transition);
}
.contact__bouton::-webkit-details-marker { display: none; }
.contact__bouton:hover,
.contact__bouton:focus-visible { opacity: .8; }

.contact { text-align: center; }
.contact__formulaire {
  max-width: 30rem;
  margin: 1.6rem auto 0;
  text-align: left;
}

.contact__champ { margin: 0 0 1rem; }

.contact__champ label {
  display: block;
  margin-bottom: .3rem;
  font-size: .95rem;
  text-transform: lowercase;
}

.contact__champ input,
.contact__champ textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid #000;
  background: rgba(255, 255, 255, .85);
  color: #000;
  font: inherit;
  font-size: 1rem;
}

.contact__champ textarea { resize: vertical; }

.contact__envoi {
  padding: .7rem 2.2rem;
  border: 0;
  border-radius: .4rem;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  text-transform: lowercase;
  cursor: pointer;
  transition: opacity var(--transition);
}
.contact__envoi:hover,
.contact__envoi:focus-visible { opacity: .8; }

/* Piège à robots : invisible pour les visiteurs, rempli par les spammeurs. */
.contact__piege { position: absolute; left: -9999px; }

/* 5.11 Mentions légales — lien discret et page de texte au long */

.lien-legal {
  margin-top: 2.6rem;
  font-size: .9rem;
  text-transform: lowercase;
  opacity: .7;
}
.lien-legal a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), opacity var(--transition);
}
.lien-legal a:hover,
.lien-legal a:focus-visible { border-bottom-color: currentColor; }

.page-legal { color: #000; --nav-texte: #000000; }
.page-legal .nav__lien { text-shadow: none; }

/* Page de texte au long : la photographie est atténuée à 20 % derrière un
   voile blanc, pour que le texte reste lisible sur toute la hauteur. */
.page-legal .fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .8);
}

.legal {
  max-width: 42rem;
  margin: 0 auto;
  font-size: .95rem;
  line-height: 1.65;
}

.legal__titre {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: lowercase;
}

.legal h2 {
  margin-top: 2rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: lowercase;
}

.legal p { margin-top: .6rem; }

.legal a {
  border-bottom: 1px solid currentColor;
  transition: opacity var(--transition);
}
.legal a:hover,
.legal a:focus-visible { opacity: .7; }

.legal em { font-style: italic; opacity: .75; }

/* ---------- 6. Composants ----------------------------------------------- */

/* Vignette : un cadre de dimensions constantes, l'image entière centrée
   dedans sur fond noir, et une légende qui apparaît au survol.
   La légende reste accessible au clavier et visible sur écran tactile. */

.vignette {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  background: #000;
  outline: 1px solid transparent;
  outline-offset: 0;
  transition: outline-color var(--transition);
}

/* Seules les vignettes qui mènent quelque part sont cliquables.
   « trouville », en montage, n'a pas de lien : pas de curseur main. */
a.vignette { cursor: pointer; }

.vignette__image {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* l'image n'est jamais rognée : elle s'inscrit
                            entière dans le cadre, proportions conservées */
  transition: opacity var(--transition);
}

/* Au survol, l'image s'atténue légèrement et un liseré à la couleur de
   l'onglet apparaît : on comprend que la vignette est cliquable. */
a.vignette:hover .vignette__image,
a.vignette:focus-visible .vignette__image { opacity: .55; }

a.vignette:hover,
a.vignette:focus-visible { outline-color: var(--onglet-actif, #fff); }

.vignette__legende {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .8rem;
  color: #fff;
  font-size: .82rem;
  line-height: 1.35;
  text-transform: lowercase;
  text-align: center;
  opacity: 0;
  transition: opacity var(--transition);
}

a.vignette:hover  .vignette__legende,
a.vignette:focus-visible .vignette__legende { opacity: 1; }

/* text-wrap: balance répartit les mots sur des lignes de longueur voisine :
   plus de nom isolé en fin de légende. */
.vignette__titre {
  font-weight: 700;
  text-wrap: balance;
}
.vignette__meta {
  margin-top: .35em;
  font-size: .95em;
  opacity: .9;
  text-wrap: balance;
}

/* Chiffres romains et sigles : la mise en minuscules ne s'applique pas. */
.romain { text-transform: none; }

/* 6.2 Page détail d'un film */

.film {
  max-width: 58rem;
  margin: 0 auto;
  text-shadow: var(--texte-ombre);
}

.film__titre {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: lowercase;
}

.film__meta {
  margin-top: .35rem;
  font-size: 1.05rem;
  text-transform: lowercase;
}

/* Le lecteur n'est chargé qu'au clic : la page reste légère et aucun
   cookie tiers n'est déposé tant que le visiteur n'a rien demandé. */
.film__lecteur {
  position: relative;
  margin: 1.6rem 0;
  aspect-ratio: 16 / 9;
  background: #000;
}
.film__lecteur iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.film__lancer,
.film__lien-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.film__lancer { position: absolute; inset: 0; height: 100%; }

/* Deux films que Vimeo refuse d'intégrer : on renvoie vers leur page. */
.film__lien-video { margin: 1.6rem 0; }

.film__lancer img,
.film__lien-video img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .7;
  transition: opacity var(--transition);
}

.film__lancer:hover img,
.film__lancer:focus-visible img,
.film__lien-video:hover img,
.film__lien-video:focus-visible img { opacity: .45; }

.film__lancer-texte {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: .6rem 1.4rem;
  border: 1px solid #fff;
  font-size: 1rem;
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: var(--texte-ombre);
}

/* Film sans lien : l'image seule, avec sa mention. */
.film__attente { margin: 1.6rem 0; }
.film__attente img { width: 100%; }
.film__attente figcaption {
  margin-top: .6rem;
  font-size: .95rem;
  text-transform: lowercase;
}

.film__generique {
  font-size: .95rem;
  line-height: 1.6;
}
.film__generique p + p { margin-top: 1em; }

/* Résumé du livre : détaché du prix qui le précède, en gras italique. */
.film__resume {
  margin-top: 1.8rem;
  font-weight: 700;
  font-style: italic;
}

.retour {
  display: inline-block;
  margin-top: 2rem;
  font-size: 1rem;
  text-transform: lowercase;
  border-bottom: 1px solid transparent;
  text-shadow: var(--texte-ombre);
  transition: border-color var(--transition);
}
.retour:hover,
.retour:focus-visible { border-bottom-color: currentColor; }

/* ---------- 7. Responsive ----------------------------------------------- */
/* Desktop d'abord, puis tablette, puis mobile.
   La logique de la maquette est conservée : le nombre de colonnes diminue,
   la disposition ne change pas de nature. */

/* Écrans larges : on suit l'échelle de la maquette sans la dépasser. */
@media (min-width: 1600px) {
  :root { --marge: 4vw; }
  .nav__lien          { font-size: 1.4rem; }
  .accueil__signature { font-size: 2rem; }
}

/* Tablette paysage */
@media (max-width: 1180px) {
  :root { --nav-hauteur: 4.2rem; }
  .grille-livres      { grid-template-columns: repeat(4, 1fr); }
  .grille-films       { grid-template-columns: repeat(3, 1fr); }
  .grille-conferences { grid-template-columns: repeat(6, 1fr); }
  .grille-conferences .vignette { grid-column: span 2; }
  .instants           { margin-left: 28%; }
}

/* Tablette portrait */
@media (max-width: 900px) {
  :root { --marge: 5vw; --nav-hauteur: 4rem; }

  .nav__lien { font-size: 1.05rem; }

  .grille-livres      { grid-template-columns: repeat(3, 1fr); }
  .grille-livres .vignette,
  .grille-films  .vignette { max-height: none; }

  .pataphysique {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .contexte { max-width: 34rem; }

  .instants { margin-left: 0; max-width: none; }

  .contenu--fixe { height: auto; overflow: visible; }

  /* Le survol n'existe pas au doigt : les légendes passent sous l'image,
     et le cadre de hauteur fixe n'a plus lieu d'être. */
  .vignette {
    background: transparent;
    aspect-ratio: auto;
    overflow: visible;
  }
  .vignette__image { opacity: 1 !important; height: auto; }

  /* La légende n'est plus posée sur l'image mais sur le fond de la page :
     elle prend donc la couleur de la page, noire sur les fonds clairs. */
  .vignette__legende {
    position: static;
    opacity: 1;
    padding: .5rem 0 0;
    text-align: left;
    color: inherit;
    text-shadow: var(--texte-ombre);
  }

  .page-films .vignette__legende,
  .page-livre-yvan .vignette__legende,
  .page-conference-detail .vignette__legende,
  .page-pataphysique-detail .vignette__legende { text-shadow: none; }
}

/* Mobile — la navigation se replie derrière un bouton */
@media (max-width: 700px) {
  :root { --marge: 6vw; --nav-hauteur: 3.6rem; }

  .nav__bouton { display: block; }

  .nav {
    padding: 0;
  }

  .nav__liste {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    padding: 0 var(--marge);
    background: rgba(0, 0, 0, .88);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--transition), visibility var(--transition);
  }

  .nav[data-ouvert="true"] .nav__liste {
    transform: translateY(0);
    visibility: visible;
  }

  /* Le panneau déplié est sombre : les lettres y passent en blanc. */
  .nav__liste { --nav-texte: #fff; }

  .nav__lien { font-size: 1.35rem; }

  /* Accueil sur mobile : pas de bouton à découvrir. Les sept entrées sont
     posées d'emblée sur la photographie, dans sa partie haute et claire.
     La signature disparaît, l'écran étant réservé au menu. */
  .page-accueil .nav__bouton { display: none; }

  /* Sur les petits écrans, les huit entrées dépassent la hauteur visible.
     La navigation quitte donc la position fixe et reprend sa place dans le
     flux : la page peut défiler et la dernière entrée reste atteignable.
     La photographie, elle, reste fixe derrière. */
  .page-accueil { height: auto; overflow: visible; }

  .page-accueil .accueil { height: auto; min-height: 0; }

  .page-accueil .nav {
    position: static;
    padding: 2.4rem var(--marge);
    padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
  }

  .page-accueil .nav__liste {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0;
    background: transparent;
    transform: none;
    visibility: visible;
    text-align: center;
    --nav-texte: #000;
  }

  /* Typographie généreuse : les entrées doivent se lire sans effort et
     offrir une cible large au doigt. */
  .page-accueil .nav__lien {
    font-size: 1.5rem;
    padding: .2rem .4rem;
  }

  /* Un voile clair sur la photographie : sans lui, le noir du menu se
     perdrait sur les montants sombres de la véranda. */
  .page-accueil .fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .3);
  }

  /* La signature est retirée de l'écran mais reste lue par les lecteurs
     d'écran et prise en compte par les moteurs de recherche : c'est le
     seul titre de niveau 1 de la page. */
  .page-accueil .accueil__signature {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Sans JavaScript, ou tant que le menu est fermé, l'onglet courant
     reste visible en haut de page. */
  .nav__liste .nav__lien[aria-current="page"] { order: -1; }

  .nav[data-ouvert="true"] .nav__bouton span            { transform: rotate(45deg); }
  .nav[data-ouvert="true"] .nav__bouton span::before    { transform: rotate(-90deg) translateX(.55rem); }
  .nav[data-ouvert="true"] .nav__bouton span::after     { opacity: 0; }

  .grille-livres,
  .grille-films,
  .grille-pataphysique { grid-template-columns: repeat(2, 1fr); }

  .grille-conferences { grid-template-columns: repeat(2, 1fr); }
  .grille-conferences .vignette { grid-column: span 1; }

  .accueil__signature { font-size: 1.4rem; }
  .archives { gap: 3rem; }
  .film__titre { font-size: 1.3rem; }
}

@media (max-width: 430px) {
  .grille-films { grid-template-columns: 1fr; }
}

/* ---------- Préférences système ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .nav, .nav__bouton, .fond { display: none; }
  body { color: #000; background: #fff; }
}