/* MODÈLE « LUNE » : journal éditorial minimaliste, sur quatre pages (accueil, journal, une note, à propos).
   Architecture : une seule colonne, aucun visuel d'ornement ; la typographie fait tout. Liste d'entrées à filets fins (date, titre, résumé, thème),
   page de lecture à colonne étroite, lettre du mois en pied. Voix native : Newsreader éditoriale. */
html[data-modele="lune"] { --n-titre: "Newsreader", Georgia, serif; --n-poids: 380; --n-suivi: -0.025em; }

.w--col { width: min(42rem, calc(100% - 2 * var(--gut))); }
.w--large { width: min(70rem, calc(100% - 2 * var(--gut))); }

/* en-tête : un nom, trois liens, un filet */
.tete { border-bottom: 1px solid var(--faint); }
.tete__int { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; padding: clamp(18px, 2.6vw, 30px) 0; }
.marque { font-size: calc(clamp(1.7rem, 2.6vw, 2.2rem) * var(--echelle-titre)); line-height: 1; text-decoration: none; color: var(--fg); }
.nav { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 3vw, 38px); font: 500 0.78rem/1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; }
.nav a { padding: 10px 0; text-decoration: none; box-shadow: inset 0 -1.5px 0 transparent; transition: box-shadow 0.3s, color 0.3s; }
.nav a:hover, .nav a[aria-current="page"] { box-shadow: inset 0 -1.5px 0 var(--signe); color: var(--signe); }

/* accueil : la phrase, puis la liste */
.intro { padding: clamp(48px, 9vw, 140px) 0 clamp(40px, 6vw, 96px); }
.intro__int { display: grid; gap: clamp(18px, 2.4vw, 30px); justify-items: start; }
.intro .titre { font-size: calc(clamp(2.7rem, 8.2vw, 7.4rem) * var(--echelle-titre)); line-height: 0.96; max-width: 14ch; }
.intro .titre .it { color: var(--signe); }
.intro__texte { max-width: 36rem; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.65; color: var(--soft); }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }

.notes { padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 120px); }
.notes__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1.5px solid var(--fg); }
.liste { display: block; }
.entree { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr) auto; gap: 6px 28px; align-items: baseline; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--faint); text-decoration: none; color: var(--fg); transition: padding 0.4s cubic-bezier(0.22, 0.7, 0.25, 1); }
.entree__date { font: 500 0.82rem/1.4 var(--f-texte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); font-variant-numeric: tabular-nums; }
.entree__corps { display: block; min-width: 0; }
.entree__titre { display: block; font-size: calc(clamp(1.35rem, 2.3vw, 2rem) * var(--echelle-titre)); line-height: 1.12; transition: color 0.3s; }
.entree__resume { display: block; max-width: 44rem; margin-top: 8px; font-size: 0.98rem; line-height: 1.55; }
.entree__meta { font: 500 0.8rem/1.4 var(--f-texte); white-space: nowrap; }
.entree:hover { padding-left: 10px; }
.entree:hover .entree__titre { color: var(--signe); }

.citation { padding: clamp(24px, 5vw, 80px) 0 clamp(64px, 9vw, 140px); }
.citation blockquote { max-width: 60rem; }
.citation .titre { font-size: calc(clamp(2rem, 5.4vw, 4.6rem) * var(--echelle-titre)); line-height: 1.04; }
.citation .titre .it { color: var(--signe); }
.citation footer { margin-top: 22px; font: 500 0.78rem/1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; }

/* pages intérieures */
.page { padding: clamp(36px, 6vw, 92px) 0 clamp(56px, 8vw, 120px); }
.page__tete { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(24px, 4vw, 52px); }
.page h1.titre { font-size: calc(clamp(3rem, 9vw, 8rem) * var(--echelle-titre)); line-height: 0.94; }
.page h1.titre .it { color: var(--signe); }
.page__chapo { max-width: 36rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--soft); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(8px, 2vw, 24px); }
.filtres button { min-height: 40px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, var(--bg)); font: 500 0.84rem/1 var(--f-texte); transition: background 0.25s, color 0.25s; }
.filtres button:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.filtres button[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.annee { margin-top: clamp(28px, 4.4vw, 60px); }
.annee[hidden] { display: none; }
.annee__titre { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1.5px solid var(--fg); font-size: calc(clamp(1.8rem, 3.4vw, 2.8rem) * var(--echelle-titre)) !important; line-height: 1 !important; }
.liste li[hidden] { display: none; }
.filtre__vide { margin-top: 32px; }

/* une note */
.note { padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 6vw, 90px); }
.note__fil { margin-bottom: 18px; font: 500 0.8rem/1 var(--f-texte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.note__fil a { color: inherit; }
.note h1.titre { font-size: calc(clamp(2.5rem, 6.4vw, 5.2rem) * var(--echelle-titre)); line-height: 0.98; }
.note h1.titre .it { color: var(--signe); }
.note__meta { margin-top: 18px; font-size: 0.86rem; }
.note__chapo { margin-top: 22px; font: italic var(--w-titre) clamp(1.25rem, 2.2vw, 1.75rem)/1.4 var(--f-titre); letter-spacing: -0.005em; color: var(--soft); }
.note__photo { aspect-ratio: 3 / 2; margin: clamp(28px, 4vw, 56px) 0; border-radius: 2px; }
.note__corps { display: grid; gap: 1.35em; font: 400 clamp(1.08rem, 1.3vw, 1.2rem)/1.75 var(--f-titre); letter-spacing: 0; }
html[data-voix="grotesque"] .note__corps, html[data-voix="lecture"] .note__corps { font-family: var(--f-texte); }
.note__corps p, .note__corps li { color: var(--soft); }
.note__corps .titre { margin-top: 0.6em; font-size: calc(clamp(1.6rem, 2.6vw, 2.2rem) * var(--echelle-titre)); line-height: 1.1; color: var(--fg); }
.note__corps blockquote { margin: 0.8em 0; padding-left: clamp(16px, 2.4vw, 30px); border-left: 3px solid var(--signe); }
.note__corps blockquote .titre { margin: 0; font-size: calc(clamp(1.5rem, 2.8vw, 2.3rem) * var(--echelle-titre)); line-height: 1.12; }
.note__corps blockquote .it { color: var(--signe); }
.note__liste { display: grid; gap: 0.5em; padding-left: 1.2em; list-style: disc; }
.note__liste li::marker { color: var(--signe); }
.note__vignette { max-width: 24rem; }
.note__vignette .ph, figure.note__vignette { position: static; }
.note__vignette img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.note__vignette figcaption { margin-top: 10px; font: italic 0.92rem/1.4 var(--f-titre); color: var(--soft); }
.note__suite { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 80px); border-top: 1.5px solid var(--fg); }
.note__suite a { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--faint); text-decoration: none; color: var(--fg); }
.note__suite a .soft { font: 500 0.76rem/1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; }
.note__suite a .titre { font-size: calc(clamp(1.3rem, 2.2vw, 1.8rem) * var(--echelle-titre)); line-height: 1.12; }
.note__suite a:hover .titre { color: var(--signe); }

/* à propos */
.apropos { display: grid; gap: clamp(24px, 4vw, 56px); }
.apropos__texte { display: grid; gap: 1.2em; max-width: 36rem; font: 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.7 var(--f-titre); }
html[data-voix="grotesque"] .apropos__texte, html[data-voix="lecture"] .apropos__texte { font-family: var(--f-texte); }
.apropos__texte p { color: var(--soft); }
.apropos__texte p:first-child { color: var(--fg); }
.apropos__photo { aspect-ratio: 4 / 5; max-width: 26rem; border-radius: 2px; }
.maintenant { padding: clamp(40px, 6vw, 88px) 0; }
.maintenant .etiquette { margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1.5px solid var(--fg); }
.maintenant__liste > div { display: grid; gap: 6px 28px; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--faint); }
.maintenant__liste dt { font-size: calc(clamp(1.3rem, 2vw, 1.7rem) * var(--echelle-titre)); line-height: 1.1; }
.maintenant__liste dd { max-width: 40rem; line-height: 1.6; margin: 0; }
.contact { padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 8vw, 110px); }
.contact .titre { font-size: calc(clamp(2.2rem, 4.6vw, 3.8rem) * var(--echelle-titre)); line-height: 1; }
.contact .titre .it { color: var(--signe); }
.contact > .w > * + * { margin-top: 18px; }
.contact__mail { font-size: calc(clamp(1.5rem, 3vw, 2.4rem) * var(--echelle-titre)) !important; }
.contact__note { font-size: 0.82rem; }

/* la lettre et le pied */
.lettre { padding: clamp(48px, 7vw, 104px) 0; }
.lettre__int { display: grid; gap: clamp(22px, 4vw, 56px); align-items: center; }
.lettre .titre { margin-top: 12px; font-size: calc(clamp(2rem, 4.4vw, 3.6rem) * var(--echelle-titre)); line-height: 1; max-width: 14ch; }
.lettre .titre .it { color: var(--signe); }
.lettre__texte .soft { margin-top: 14px; max-width: 30rem; line-height: 1.6; }
.lettre__form { display: grid; gap: 14px; max-width: 30rem; }
.lettre__form input { min-height: 54px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--fg); border-radius: 0; background: transparent; color: var(--fg); font: 400 1.05rem var(--f-texte); }
.lettre__form input::placeholder { color: color-mix(in srgb, var(--fg) 58%, var(--bg)); }
.lettre__form input:focus { outline: none; border-bottom-color: var(--signe); box-shadow: 0 1.5px 0 var(--signe); }
.lettre__form .btn { justify-self: start; }
.lettre__retour { min-height: 1.4em; font-size: 0.86rem; }
.pied { padding: clamp(36px, 5vw, 64px) 0 28px; border-top: 1px solid var(--faint); }
.pied__int { display: grid; gap: 14px; }
.pied__nom { font-size: calc(clamp(2.4rem, 5vw, 4rem) * var(--echelle-titre)); line-height: 1; }
.pied__nav { display: flex; flex-wrap: wrap; gap: 6px 26px; font: 500 0.78rem/1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; }
.pied__nav a { padding: 8px 0; text-decoration: none; }
.pied__nav a:hover { color: var(--signe); }
.pied__legal { margin-top: 12px; font-size: 0.78rem; line-height: 1.5; }

@media (min-width: 900px) {
  .lettre__int { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .apropos { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
  .apropos .page__tete { grid-column: 1 / -1; margin-bottom: 0; }
  .apropos__photo { margin-top: 0; justify-self: end; width: 100%; }
  .maintenant__liste > div { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; }
  .note__suite { grid-template-columns: 1fr 1fr; gap: 0 40px; }
}
@media (max-width: 640px) {
  .entree { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .entree__date { order: -1; }
  .entree__meta { white-space: normal; }
  .nav { gap: 2px 20px; }
  .nav__lettre { display: none; }
}