:root {
  --accent:#4f140a;
  --black:#0a0a0a;
  --grey:#6b6b6b;
  --ink:#0a0a0a;
  --paper:#fff;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --serif:"DM Serif Display","Playfair Display",Georgia,serif;
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-top:env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --grey:#9a9a9a;
    --ink:#f3efe6;
    --paper:#121212;
  }
}

:root[data-theme="dark"] {
  --grey:#9a9a9a;
  --ink:#f3efe6;
  --paper:#121212;
}

html {
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);
}

* {
  box-sizing:border-box;
  margin:0;
}

body {
  -webkit-font-smoothing:antialiased;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
}

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

cite {
  font-style:normal;
}

ul, ol {
  margin-bottom:1.5em;
}

/* Header */
.top {
  align-items:center;
  background:var(--black);
  color:#fff;
  display:flex;
  height:56px;
  justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:100;
}

.logo {
  align-items:center;
  display:flex;
  gap:14px;
}

.logo img {
  display:block;
  height:36px;
  width:auto;
}

.logo small {
  font-size:10px;
  letter-spacing:.22em;
  opacity:.55;
  text-transform:uppercase;
}

.top nav {
  display:flex;
  font-size:13px;
  gap:32px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.top nav a {
  opacity:.75;
  transition:opacity .2s;
}

.top nav a:hover {
  opacity:1;
}

.top nav [aria-current] {
  border-bottom:1px solid currentColor;
  cursor:default;
  opacity:1;
  padding-bottom:3px;
}

.top-actions {
  align-items:center;
  display:flex;
  gap:8px;
}

.lang {
  color:#fff;
  font-size:11px;
  letter-spacing:.2em;
  opacity:.55;
  padding:8px 6px;
  text-transform:uppercase;
  transition:opacity .2s;
}

.lang:hover,.lang:focus-visible {
  opacity:1;
}

.search {
  background:none;
  border:0;
  color:#fff;
  cursor:pointer;
  display:grid;
  height:36px;
  place-items:center;
  width:36px;
}

/* Hero (image unique, fondu au blanc) */
.hero {
  height:min(82vh,820px);
  margin:0 auto;
  max-width:2048px;
  min-height:520px;
  overflow:hidden;
  position:relative;
}

.hero--article {
  height:min(82vh,820px);
  min-height:520px;
}

.hero-art {
  background:radial-gradient(circle at 68% 24%,#f1d88a 0 7%,transparent 7.3%),linear-gradient(to bottom,transparent 52%,#1f4e8c 52%,#0e2a4d 100%),linear-gradient(to bottom,#a9c4d8,#e9dcb4);
  inset:0;
  position:absolute;
}

.hero-art::before {
  background:linear-gradient(#f4efe4,#b8321f);
  bottom:30%;
  clip-path:polygon(0 100%,0 55%,25% 40%,45% 52%,70% 20%,100% 60%,100% 100%);
  content:"";
  height:35%;
  left:0;
  position:absolute;
  width:60%;
}

.hero-art.has-img {
  background-position:center top;
  background-size:cover;
}

.hero-art.has-img::before {
  display:none;
}

.hero::after {
  background:linear-gradient(to bottom,transparent 30%,color-mix(in srgb,var(--paper) 85%,transparent) 82%,var(--paper) 94%);
  content:"";
  inset:0;
  position:absolute;
}

.hero-txt {
  bottom:clamp(8px,2vw,24px);
  left:clamp(20px,6vw,140px);
  position:absolute;
  right:clamp(20px,6vw,140px);
  z-index:2;
}

.hero--home .hero-txt {
  align-items:flex-end;
  bottom:clamp(28px,5vw,64px);
  display:flex;
  gap:32px;
  justify-content:space-between;
}

.hero--article .hero-txt {
  text-align:center;
}

.hero h1,.page-head h1 {
  font-family:var(--serif);
  font-size:clamp(42px,7vw,112px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.98;
  text-wrap:balance;
}

.hero--home h1 {
  margin-bottom:28px;
}

.hero--home p {
  font-size:17px;
  line-height:1.7;
  max-width:560px;
}

.kicker {
  display:block;
  font-size:11px;
  letter-spacing:.24em;
  margin-top:9px;
  text-transform:uppercase;
}

.hero--article .kicker {
  background:var(--black);
  color:#fff;
  display:inline-block;
  margin-bottom:22px;
  padding:7px 11px 7px 14px;
}

.hero--article .kicker b {
  color:inherit;
}

.hero--article .kicker {
  background:var(--black);
  color:#fff;
  display:inline-block;
  margin-bottom:22px;
  padding:7px 11px 7px 14px;
}

.hero--article .kicker b {
  color:inherit;
}

.go {
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  flex:none;
  height:64px;
  place-items:center;
  transition:background .25s,color .25s,transform .25s;
  width:64px;
}

.hero--home {
  display:block;
}

.hero--home:hover .go,.go:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translate(3px,-3px);
}

/* Séparateur de section */
.sec {
  align-items:center;
  display:flex;
  gap:24px;
  margin:clamp(8px,2vw,24px) auto 28px;
  max-width:1600px;
  padding:0 clamp(16px,3vw,40px);
}

.sec h3 {
  font-size:10px;
  font-weight:400;
  letter-spacing:.3em;
  opacity:.55;
  text-transform:uppercase;
  white-space:nowrap;
}

.sec .rule {
  border-bottom:1px solid var(--ink);
  border-top:1px solid var(--ink);
  flex:1;
  height:7px;
}

/* Grille bento (fond noir, bordures épaisses) */
.bento-wrap {
  margin:0 auto clamp(24px,4vw,64px);
  max-width:1600px;
  padding:0 clamp(0px,2vw,24px);
}

.bento {
  background:var(--black);
  display:grid;
  gap:12px;
  grid-auto-flow:dense;
  grid-auto-rows:375px;
  grid-template-columns:repeat(12,1fr);
  padding:12px;
}

.tile {
  background:var(--black);
  color:#fff;
  display:flex;
  flex-direction:column;
  grid-column:span 3;
  justify-content:flex-end;
  overflow:hidden;
  padding:24px;
  position:relative;
}

.tile::before {
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent 62%);
  content:"";
  inset:0;
  position:absolute;
  transition:opacity .3s;
  z-index:1;
}

a.tile:hover::before {
  opacity:.85;
}

.tile>* {
  position:relative;
  z-index:2;
}

.tile .kicker {
  margin-bottom:10px;
  opacity:.8;
}

/* Article annoncé (prochainement: true) : tuile grisée, non cliquable, sans effet au survol */
.tile--soon {
  color:rgba(255,255,255,.6);
  cursor:default;
}

.tile--soon .tile-img {
  filter:grayscale(1);
  opacity:.5;
}

.tile>.tile-soon {
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-size:10px;
  left:18px;
  letter-spacing:.24em;
  padding:6px 10px;
  position:absolute;
  text-transform:uppercase;
  top:18px;
}

/* Image de la tuile : remplit toute la tuile (dégradé de repli si l'article n'a pas d'image) */
.tile>.tile-frame {
  inset:0;
  overflow:hidden;
  position:absolute;
  z-index:0;
}

.tile-img {
  background:linear-gradient(var(--r,155deg),var(--a,#1f4e8c),var(--b,#b8321f)) center/cover;
  inset:0;
  position:absolute;
}

.tile h2 {
  font-family:var(--serif);
  font-size:clamp(22px,2vw,30px);
  font-weight:400;
  line-height:1.1;
}

.tile.l {
  grid-column:span 6;
  grid-row:span 2;
}

.tile.l h2 {
  font-size:clamp(32px,3.6vw,54px);
}

.tile.m {
  grid-column:span 4;
}

.bento--3 .tile {
  grid-column:span 4;
}

.tile:nth-child(6n+1) {
  --a:#1f4e8c;
  --b:#b8321f;
}

.tile:nth-child(6n+2) {
  --a:#f1d88a;
  --b:#7da3c4;
  --r:190deg;
}

.tile:nth-child(6n+3) {
  --a:#b8321f;
  --b:#0e2a4d;
}

.tile:nth-child(6n+4) {
  --a:#0e2a4d;
  --b:#cfe0ea;
  --r:210deg;
}

.tile:nth-child(6n+5) {
  --a:#e9c46a;
  --b:#b8321f;
  --r:130deg;
}

.tile:nth-child(6n+6) {
  --a:#7da3c4;
  --b:#1f4e8c;
}

/* En-tête de rubrique */
.page-head {
  padding:72px 20px 48px;
  text-align:center;
}

.page-head .kicker {
  color:var(--grey);
}

/* Article */
.intro {
  margin:0 auto;
  max-width:760px;
  padding:0 clamp(20px,4vw,32px);
  text-align:center;
}

.chapo {
  font-family:var(--serif);
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.5;
  margin-bottom:36px;
}

.meta {
  border-bottom:1px solid var(--ink);
  border-top:1px solid var(--ink);
  display:flex;
  flex-wrap:wrap;
  font-size:11px;
  gap:10px 28px;
  justify-content:center;
  letter-spacing:.2em;
  padding:16px 0;
  text-transform:uppercase;
}

.meta span {
  color:var(--grey);
}

.meta strong {
  font-weight:500;
}

.body {
  font-size:18px;
  line-height:1.85;
  margin:56px auto 0;
  max-width:680px;
  padding:0 clamp(20px,4vw,32px);
}

.body p {
  margin-bottom: 1.5em;
}

.body p,.chapo,.hero--home p {
  text-wrap:pretty;
}

.body>p:first-child::first-letter {
  float:left;
  font-family:var(--serif);
  font-size:5.4em;
  line-height:.8;
  padding:.08em .12em 0 0;
}

.body h2 {
  font-family:var(--serif);
  font-size:clamp(28px,3vw,38px);
  font-weight:400;
  line-height:1.15;
  margin:2em 0 .7em;
}

.body a {
  border-bottom:1px solid var(--accent);
}

.body p>img {
  display:block;
  height:auto;
  margin:2.4em -6%;
  max-width:none;
  width:112%;
}

blockquote {
  border-bottom:1px solid var(--ink);
  border-top:1px solid var(--ink);
  font-family:var(--serif);
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.3;
  margin:2.4em -6%;
  padding:1.4em 0;
  text-align:center;
}

blockquote cite {
  color:var(--grey);
  display:block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  margin-top:.9em;
  text-transform:uppercase;
}

figure {
  margin:2.4em -6%;
}

figure img {
  display:block;
  width:100%;
}

figcaption {
  color:var(--grey);
  font-size:12px;
  line-height:1.5;
  margin-top:10px;
  text-align:center;
}

.body--page>p:first-child::first-letter {
  float:none;
  font:inherit;
  padding:0;
}

.body .end {
  color:#000;
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.5em;
  margin:1em 0 0;
  text-align:center;
}

.author {
  align-items:center;
  border-top:1px solid var(--ink);
  display:flex;
  gap:20px;
  margin:56px auto 0;
  max-width:680px;
  padding:28px clamp(20px,4vw,32px) 0;
}

.avatar {
  background:linear-gradient(135deg,#1f4e8c,#b8321f);
  border-radius:50%;
  flex:none;
  height:64px;
  width:64px;
}

img.avatar {
  object-fit:cover;
}

.author p {
  color:var(--grey);
  font-size:14px;
  line-height:1.6;
}

.author strong {
  color:var(--ink);
  display:block;
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
}

.next {
  margin:72px auto;
  max-width:1600px;
  padding:0 clamp(0px,2vw,24px);
}

.next .sec {
  padding-left:clamp(16px,1vw,16px);
  padding-right:clamp(16px,1vw,16px);
}

.next-in {
  background:var(--black);
  display:grid;
  gap:12px;
  grid-auto-rows:375px;
  grid-template-columns:repeat(3,1fr);
  padding:12px;
}

.next-in .tile {
  grid-column:auto;
  min-height:0;
}

/* Liens externes : soulignement en pointillés + flèche ↗ (les liens internes restent en trait plein) */
.body a[href^="http"],.body a[href^="//"] {
  border-bottom-style:dashed;
}

.body a[href^="http"]::after,.body a[href^="//"]::after {
  color:var(--accent);
  content:"\2197\FE0E";
  display:inline-block;
  font-size:.7em;
  margin-left:.15em;
}

/* Notes de bas de page */
.footnote-ref {
  font-size:.65em;
  line-height:0;
  margin-left:.1em;
  position:relative;
  top:-.7em;
  vertical-align:baseline;
}

.body .footnote-ref a,.body .footnote-backref {
  border:0;
  color:var(--accent);
  font-weight:500;
}

.footnotes-sep {
  border:0;
  border-top:1px solid var(--ink);
  margin:3em 0 1.6em;
}

.footnotes {
  color:var(--grey);
  font-size:14px;
  line-height:1.7;
}

.footnotes-list {
  padding-left:1.5em;
}

.footnote-item p {
  margin-bottom:.7em;
}

.footnote-backref {
  margin-left:.35em;
}

/* Crédits */
.credits {
  display:grid;
  font-size:14px;
  gap:18px 32px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  line-height:1.5;
  margin:48px auto 0;
  max-width:680px;
  padding:0 clamp(20px,4vw,32px);
}

.credits dt {
  color:var(--grey);
  font-size:10px;
  letter-spacing:.22em;
  margin-bottom:3px;
  text-transform:uppercase;
}

.credits dd {
  margin:0;
}

.author {
  align-items:center;
  border-top:1px solid var(--ink);
  display:flex;
  gap:20px;
  margin:56px auto 0;
  max-width:680px;
  padding:28px clamp(20px,4vw,32px) 0;
}

.author p {
  color:var(--grey);
  font-size:14px;
  line-height:1.6;
}

.author strong {
  color:var(--ink);
  display:block;
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
}

.next {
  margin:72px auto;
  max-width:1600px;
  padding:0 clamp(0px,2vw,24px);
}

.next .sec {
  padding-left:clamp(16px,1vw,16px);
  padding-right:clamp(16px,1vw,16px);
}

.next-in {
  background:var(--black);
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,1fr);
  padding:12px;
}

.next-in .tile {
  grid-column:auto;
  min-height:280px;
}

/* Footer */
footer {
  background:var(--black);
  color:#fff;
  padding:64px clamp(20px,6vw,140px) 32px;
}

.f-grid {
  border-bottom:1px solid rgba(255,255,255,.18);
  display:grid;
  gap:40px;
  grid-template-columns:2fr 1fr 1fr;
  padding-bottom:48px;
}

.f-grid .logo {
  margin-bottom:16px;
}

.f-title {
  display:block;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.1;
  margin-bottom:14px;
}

.f-grid .logo img {
  height:64px;
}

.f-grid li a:hover {
  text-decoration:underline;
}

.f-grid p {
  font-size:14px;
  line-height:1.7;
  max-width:360px;
  opacity:.6;
}

.f-grid h4 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  margin-bottom:16px;
  opacity:.5;
  text-transform:uppercase;
}

.f-grid li {
  font-size:14px;
  list-style:none;
  margin-bottom:10px;
  opacity:.85;
}

.legal {
  font-size:12px;
  opacity:.45;
  padding-top:24px;
}

/* Recherche (Pagefind) */
dialog {
  background:var(--paper);
  border:0;
  color:var(--ink);
  margin:8vh auto auto;
  max-height:84vh;
  padding:0;
  width:min(720px,92vw);
}

dialog::backdrop {
  background:rgba(0,0,0,.65);
}

.search-in {
  padding:64px 28px 28px;
  position:relative;
}

.search-close {
  background:none;
  border:0;
  color:inherit;
  cursor:pointer;
  font-size:28px;
  position:absolute;
  right:18px;
  top:14px;
}

#pf {
  --pagefind-ui-background:var(--paper);
  --pagefind-ui-border:var(--grey);
  --pagefind-ui-font:var(--sans);
  --pagefind-ui-primary:var(--ink);
  --pagefind-ui-scale:.95;
  --pagefind-ui-tag:var(--paper);
  --pagefind-ui-text:var(--ink);
}

/* Recherche : contour de focus noir au lieu du bleu natif du navigateur */
#pf .pagefind-ui__search-input:focus,#pf .pagefind-ui__search-input:focus-visible {
  box-shadow:none;
  outline:1px solid var(--ink);
  outline-offset:0;
}

#pf :focus-visible,.search-close:focus-visible {
  box-shadow:none;
  outline:1px solid var(--ink);
  outline-offset:2px;
}

@media(max-width:900px) {
  .top nav,.logo small {
    display:none;
  }

  .bento-wrap,.next {
    margin-bottom:0;
    padding-left:0;
    padding-right:0;
  }

  .bento {
    grid-auto-rows:300px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .tile,.tile.m {
    grid-column:span 1;
  }

  .tile.l {
    grid-column:span 2;
    grid-row:span 1;
  }

  blockquote,figure {
    margin-left:0;
    margin-right:0;
  }

  .next-in {
    grid-auto-rows:300px;
    grid-template-columns:1fr;
  }

  .f-grid {
    grid-template-columns:1fr;
  }

  .go {
    height:52px;
    width:52px;
  }

  .hero--article {
    height:min(62vh,620px);
  }
}

@media(max-width:560px) {
  .next-in {
    grid-auto-rows:325px;
  }

  .bento {
    grid-auto-rows:325px;
    grid-template-columns:minmax(0,1fr);
  }

  .tile.l {
    grid-column:span 1;
  }
}

/* ------------------------------------------------------------------ Version imprimée */
@page {
  margin: 22mm 20mm 24mm;
  size: A4;
 
  /* numéro de page (navigateurs récents ; ignoré ailleurs) */
 
  @bottom-center {
    color: #555;
    content: counter(page) " / " counter(pages);
    font: 8pt "DM Sans", sans-serif;
  }
}
 
@media print {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    --grey: #555;
    --ink: #000;
    --paper: #fff;
    padding: 0;
  }
 
  html,
  body {
    background: #fff;
    color: #000;
  }
 
  body {
    font-size: 10.5pt;
    line-height: 1.6;
  }
 
  /* éléments d'interface masqués */
 
  .top,
  footer,
  .next,
  .print-row,
  dialog,
  .hero-art,
  .hero::after,
  div.avatar {
    display: none !important;
  }

  article figure {
    page-break-inside: avoid;
    width: 46%;
    float: left;
    margin-right: 4%;
  }
 
  .print-only {
    display: block;
  }
 
  /* en-tête de revue + signature d'URL */
 
  .print-masthead {
    border-bottom: .6pt solid #000;
    font-family: var(--serif);
    font-size: 15pt;
    margin-bottom: 26pt;
    padding-bottom: 7pt;
    text-align: center;
  }
 
  .print-masthead span {
    color: #555;
    font: 7.5pt var(--sans);
    letter-spacing: .22em;
    margin-left: 10pt;
    text-transform: uppercase;
  }
 
  .print-colophon {
    color: #555;
    font-size: 7.5pt;
    letter-spacing: .06em;
    margin-top: 22pt;
    text-align: center;
    word-break: break-all;
  }
 
  /* titre */
 
  .hero--article {
    height: auto;
    max-width: none;
    min-height: 0;
    overflow: visible;
  }
 
  .hero--article .hero-txt {
    padding: 0;
    position: static;
    text-align: center;
  }
 
  .hero--article .kicker {
    background: none;
    border: .6pt solid #000;
    color: #000;
    display: inline-block;
    font-size: 7.5pt;
    margin-bottom: 12pt;
    padding: 3pt 9pt 3pt 12pt;
  }
 
  .hero h1 {
    font-size: 32pt;
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: 0 0 16pt;
  }
 
  .intro {
    max-width: none;
    padding: 0;
  }
 
  .chapo {
    font-size: 13pt;
    line-height: 1.45;
    margin-bottom: 16pt;
  }
 
  .meta {
    border-color: #000;
    font-size: 7.5pt;
    padding: 8pt 0;
  }
 
  /* texte */
 
  .body {
    -webkit-hyphens: auto;
    font-size: 10.5pt;
    hyphens: auto;
    line-height: 1.6;
    margin: 20pt 0 0;
    max-width: none;
    padding: 0;
    text-align: left;
  }
 
  .body p {
    margin-bottom: .9em;
    orphans: 3;
    widows: 3;
    text-align: justify;
  }
 
  .body h2 {
    break-after: avoid;
    font-size: 17pt;
    margin: 1.5em 0 .5em;
  }
 
  .body a {
    border-bottom: .5pt solid #000;
    color: #000;
  }
 
  .body a[href^="http"]::after,
  .body a[href^="//"]::after {
    color: #555;
    content: " (" attr(href) ")";
    display: inline;
    font-size: .8em;
    margin: 0;
    word-break: break-all;
  }
 
  .body .end {
    color: #000;
  }
 
  blockquote {
    border-color: #000;
    break-inside: avoid;
    font-size: 15pt;
    margin: 1.4em 0;
  }
 
  figure {
    break-inside: avoid;
    margin: 1.4em 0;
  }
 
  .body p > img {
    break-inside: avoid;
    margin: 1.4em 0;
    width: 100%;
  }
 
  figcaption {
    color: #555;
  }
 
  /* notes, crédits, auteur */
 
  .body .footnote-ref a {
    color: #000;
  }
 
  .footnote-backref {
    display: none;
  }
 
  .footnotes {
    color: #000;
    font-size: 8.5pt;
    line-height: 1.5;
  }
 
  .footnotes-sep {
    border-top: .6pt solid #000;
    margin: 22pt 0 10pt;
  }
 
  .credits {
    border-top: .6pt solid #000;
    break-inside: avoid;
    font-size: 8.5pt;
    margin: 22pt 0 0;
    max-width: none;
    padding: 10pt 0 0;
  }
 
  .author {
    border-top: .6pt solid #000;
    break-inside: avoid;
    margin: 14pt 0 0;
    max-width: none;
    padding: 10pt 0 0;
  }
}