/* Feuille de composition — proposition « Affiche manifeste ». Page : affiche.html */
/* Composition propre à cette page : noir profond et jaune affichiste,
 * enseignes typographiques énormes en graisse 900, deux colonnes décalées,
 * panneaux réels tournés et superposés, texture d’impression. */
[data-design="affiche-manifeste"] {
  --noir: #101014;
  --noir-2: #1a1a20;
  --jaune: #f2c94c;
  --rouge: #d83a2b;
  --clair: #f5f2e9;
  --font-display: "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --font-body: Verdana, Geneva, sans-serif;
  background: var(--noir);
  color: var(--clair);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: .02em;
}
[data-design="affiche-manifeste"] body { margin: 0; background: var(--noir); color: var(--clair); }

[data-design="affiche-manifeste"] h1,
[data-design="affiche-manifeste"] h2,
[data-design="affiche-manifeste"] h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .88;
  margin: 0;
}
[data-design="affiche-manifeste"] h1 { font-size: clamp(3rem, 13vw, 9.5rem); }
[data-design="affiche-manifeste"] h2 { font-size: clamp(2rem, 7vw, 4.5rem); }
[data-design="affiche-manifeste"] h3 { font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -.01em; }
[data-design="affiche-manifeste"] p { margin: 0 0 var(--space-3); max-inline-size: 60ch; }
[data-design="affiche-manifeste"] a { color: var(--jaune); }

.cadre { margin-inline: auto; max-inline-size: 82rem; padding-inline: var(--space-4); }
.plein-cadre { padding-inline: 0; overflow: clip; }

/* Enseigne d’ouverture : logo sur panneau jaune, navigation en capitales */
.enseigne { background: var(--noir); border-block-end: .19rem solid var(--jaune); padding-block: var(--space-4); }
.enseigne__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.logo { display: inline-flex; align-items: center; background: var(--jaune); padding: .45rem .7rem; min-block-size: var(--touch-target); }
.logo img { block-size: 2.25rem; inline-size: auto; }
.enseigne nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; }
.enseigne nav a {
  display: inline-flex; align-items: center; min-block-size: var(--touch-target);
  font-family: var(--font-display); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--clair); text-decoration: none; padding-inline: .35rem;
  border-block-end: .19rem solid transparent;
}
.enseigne nav a:hover, .enseigne nav a:focus-visible { border-block-end-color: var(--jaune); color: var(--jaune); }
.marques { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.marques span, .marques a { display: inline-flex; align-items: center; gap: .35rem; min-block-size: var(--touch-target); }
.marques img { inline-size: 1rem; block-size: auto; }
.pictogramme { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.repere-boite { border: .06rem solid var(--clair); padding: .3rem .55rem; }

/* Bascule par liens, traitée comme un bandeau d’imprimerie */
.bascule { background: var(--jaune); color: var(--noir); border-block-end: .19rem solid var(--noir); }
.bascule__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); }
.bascule__titre { font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.bascule ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.bascule a {
  display: inline-flex; flex-direction: column; justify-content: center; min-block-size: var(--touch-target);
  padding: .3rem .85rem; text-decoration: none; color: var(--noir); background: var(--clair);
  border: .12rem solid var(--noir);
  font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  transform: rotate(-1.2deg);
  transition: transform var(--motion-base) ease-out, background-color var(--motion-base) linear;
}
.bascule li:nth-child(2) a { transform: rotate(1deg); }
.bascule a:hover, .bascule a:focus-visible { transform: rotate(0); background: var(--jaune); }
.bascule li:nth-child(2) a:hover, .bascule li:nth-child(2) a:focus-visible { transform: rotate(0); }
.bascule a[aria-current="page"] { background: var(--noir); color: var(--jaune); transform: rotate(0); }
.bascule .url { font-family: var(--font-body); font-size: .62rem; letter-spacing: .04em; text-transform: none; font-weight: 400; }
.zone-annonce { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }

/* Hero-manifeste : mur de panneaux réels sous une enseigne géante */
.manifeste { position: relative; background: var(--noir-2); padding-block: var(--space-8) var(--space-7); }
.manifeste::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: repeating-linear-gradient(45deg, var(--clair) 0 .07rem, transparent .07rem .3rem);
}
.manifeste__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); align-items: end; }
.enseigne-mot { margin: 0; color: var(--clair); }
.enseigne-mot .mot-jaune { color: var(--jaune); display: block; }
.lettrage { inline-size: min(100%, 20rem); margin-block: var(--space-4); }
.manifeste__resume { border-inline-start: .35rem solid var(--rouge); padding-inline-start: var(--space-4); }
.panneaux { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; align-items: start; }
.panneau { margin: 0; grid-column: span 3; border: .19rem solid var(--jaune); background: var(--noir); }
.panneau:nth-child(1) { transform: rotate(-2.4deg); margin-block-end: -3rem; }
.panneau:nth-child(2) { transform: rotate(1.8deg); margin-inline-start: -2.5rem; }
.panneau img { inline-size: 100%; block-size: auto; }
.panneau figcaption { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: var(--space-2) var(--space-3); border-block-start: .06rem solid var(--jaune); }
.panneau:hover img, .panneau:focus-within img, .panneau:hover, .panneau:focus-within { transform: rotate(0); }
.panneau img { transition: transform 320ms cubic-bezier(.2, .8, .2, 1); }

section { padding-block: var(--space-8); }
.tete-rubrique { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5); margin-block-end: var(--space-6); border-block-end: .19rem solid var(--jaune); padding-block-end: var(--space-3); }
.tete-rubrique__indice { font-family: var(--font-display); font-size: .75rem; letter-spacing: .12em; color: var(--rouge); }
.tete-rubrique__note { margin-inline-start: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(245, 242, 233, .75); }

/* Affiches : colonnes décalées, panneaux tournés qui se redressent */
.mur { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.mur figure { margin: 0; border: .12rem solid var(--clair); background: var(--noir-2); transition: transform 320ms ease-out; }
.mur figure:nth-child(odd) { transform: rotate(-1.4deg); }
.mur figure:nth-child(even) { transform: rotate(1.2deg); margin-block-start: var(--space-6); }
.mur figure:hover, .mur figure:focus-within { transform: rotate(0); border-color: var(--jaune); }
.mur img { inline-size: 100%; block-size: auto; }
.mur figcaption { padding: var(--space-3); display: grid; gap: .2rem; }
.mur figcaption strong { font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; letter-spacing: -.01em; color: var(--jaune); }
.talon { display: inline-block; align-self: start; background: var(--rouge); color: var(--clair); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; padding: .25rem .6rem; margin: var(--space-3) var(--space-3) 0; }

/* Rencontres : très grands chiffres d’année sur bandeau jaune */
.rencontres { background: var(--jaune); color: var(--noir); }
.rencontres h2, .rencontres h3 { color: var(--noir); }
.rencontres .tete-rubrique { border-block-end-color: var(--noir); }
.rencontres .tete-rubrique__indice { color: var(--noir); }
.rencontres .tete-rubrique__note { color: rgba(16, 16, 20, .7); }
.agenda { display: grid; gap: 0; }
.agenda article { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 14rem); gap: var(--space-4); align-items: center; border-block-end: .06rem solid rgba(16, 16, 20, .3); padding-block: var(--space-4); }
.agenda__chiffre { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .8; }
.agenda__chiffre small { display: block; font-family: var(--font-body); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.agenda p { margin: 0; font-size: .8rem; color: rgba(16, 16, 20, .8); }
.agenda__lieu { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

/* Livres : bandeau rouge, couvertures réelles en rangée dense */
.bande-rouge { background: var(--rouge); }
.bande-rouge h2, .bande-rouge h3 { color: var(--clair); }
.bande-rouge .tete-rubrique { border-block-end-color: var(--clair); }
.bande-rouge .tete-rubrique__indice { color: var(--noir); }
.bande-rouge .tete-rubrique__note { color: rgba(245, 242, 233, .85); }
.rangee { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-4); }
.rangee figure { margin: 0; }
.rangee img { inline-size: 100%; block-size: auto; border: .12rem solid var(--noir); }
.rangee figcaption { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding-block-start: var(--space-2); }

/* Microédition + blog : deux colonnes de respiration */
.breathing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.micro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.micro figure { margin: 0; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); align-items: center; border: .06rem solid rgba(245, 242, 233, .35); padding: var(--space-3); }
.micro img { inline-size: 6rem; block-size: auto; }
.micro figcaption { font-size: .72rem; }
.micro figcaption strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: .85rem; color: var(--jaune); }
.citation-manifeste { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.8rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 var(--space-4); color: var(--jaune); }
.blog { list-style: none; margin: 0; padding: 0; }
.blog li { border-block-end: .06rem solid rgba(245, 242, 233, .3); padding-block: var(--space-3); display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3); }
.blog time { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(245, 242, 233, .75); }
.blog strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.01em; font-size: .95rem; }
.blog span { display: block; font-size: .7rem; color: var(--jaune); text-transform: uppercase; letter-spacing: .1em; }

/* Pied : newsletter et adresse en blocs francs */
.pied { background: var(--noir-2); border-block-start: .35rem solid var(--jaune); padding-block: var(--space-8) var(--space-6); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.pied h2 { font-size: clamp(1.4rem, 3.4vw, 2.2rem); margin-block-end: var(--space-4); }
.champ { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.champ input { flex: 1 1 10rem; padding: .55rem .7rem; background: var(--noir); color: var(--clair); border: .12rem solid var(--clair); }
.champ button { padding: .55rem 1.1rem; background: var(--jaune); color: var(--noir); border: .12rem solid var(--noir); font-family: var(--font-display); text-transform: uppercase; cursor: not-allowed; }
.champ button:disabled { background: rgba(242, 201, 76, .25); color: rgba(245, 242, 233, .6); border-color: rgba(245, 242, 233, .3); }
.note-etat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rouge); margin-block-start: var(--space-2); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding-block: .25rem; font-size: .8rem; }
.pied .repere-inactif { display: inline-flex; align-items: center; min-block-size: 2rem; }
.provenance { font-size: .72rem; color: rgba(245, 242, 233, .7); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: .06rem solid rgba(245, 242, 233, .3); }
.en-chargement { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--jaune); }
.repli-visuel { border: .12rem dashed var(--jaune); padding: var(--space-3); font-size: .75rem; }
.repli-visuel strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; color: var(--jaune); }

@media (max-width: 63.99rem) {
  .manifeste__grille, .mur, .breathing, .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .agenda article { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .agenda__lieu { grid-column: 2; }
}

@media (max-width: 47.99rem) {
  [data-design="affiche-manifeste"] { font-size: .875rem; }
  .enseigne__ligne { grid-template-columns: minmax(0, 1fr); }
  .marques { justify-content: flex-start; }
  .panneaux { grid-template-columns: minmax(0, 1fr); }
  .panneau, .panneau:nth-child(2) { grid-column: span 1; transform: rotate(0); margin-inline-start: 0; margin-block-end: var(--space-4); }
  .mur figure:nth-child(odd), .mur figure:nth-child(even) { transform: rotate(0); margin-block-start: 0; }
  .bascule a, .bascule li:nth-child(2) a { transform: rotate(0); flex: 1 1 8rem; }
  .micro, .rangee { grid-template-columns: minmax(0, 1fr); }
  .micro figure { grid-template-columns: 5rem minmax(0, 1fr); }
  .micro img { inline-size: 5rem; }
  .blog li { grid-template-columns: minmax(0, 1fr); }
  .manifeste, section { padding-block: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .mur figure, .panneau, .panneau img, .bascule a { transition: none; }
  /* La lecture ne doit rien à l’animation : tous les panneaux sont remis à plat. */
  .mur figure:nth-child(odd), .mur figure:nth-child(even),
  .panneau:nth-child(1), .panneau:nth-child(2), .bascule a { transform: rotate(0); }
}