/* La Halle du Marché, épicerie fine. Style "Gazette".
   Une une de quotidien : manchette, gros titre du jour, colonnes justifiées,
   filets épais. Les blocs se déroulent de haut en bas, comme à l'impression. */

@font-face {
  font-family: 'Newsreader Variable';
  src: url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papier: #F3EEE3;
  --encre: #1B1B1B;
  --encre-70: #5E5A53;      /* 4.95:1 sur le papier */
  --encre-filet: rgba(27, 27, 27, .22);
  --rouge: #A81F19;         /* rouge de titre assombri pour tenir 4.5:1 */
  --rouge-vif: #B3261E;     /* la teinte d'origine, pour les aplats et les filets */
  --presse: cubic-bezier(.26, .8, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 3rem) 8rem;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--rouge-vif); color: var(--papier); }

.feuille { max-width: 76rem; margin-inline: auto; }

/* ── Manchette ────────────────────────────────────────────────────────── */

.manchette { padding-top: clamp(1.5rem, 4vh, 2.5rem); text-align: center; }
.filet-fin { border: 0; border-top: 1px solid var(--encre); margin: 0; }
.filet-gras { border: 0; border-top: 5px solid var(--encre); border-bottom: 1px solid var(--encre); height: 4px; margin: 0; }

.edition {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  margin: 0;
  padding: .45rem 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.titre-journal {
  margin: .6rem 0 .4rem;
  font-size: clamp(2.6rem, 11vw, 7.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.035em;
}
.devise {
  margin: 0;
  padding-bottom: .5rem;
  font-style: italic;
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: var(--encre-70);
}

/* ── La une ───────────────────────────────────────────────────────────── */

.une { padding-top: 2rem; }
.rubrique {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .25rem .6rem;
  background: var(--rouge-vif);
  color: var(--papier);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gros-titre {
  margin: 0;
  font-size: clamp(2rem, 7.4vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.chapeau {
  max-width: 54ch;
  margin: 1rem 0 1.6rem;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  font-style: italic;
  color: var(--encre-70);
}

.colonnes {
  column-gap: 2rem;
  column-rule: 1px solid var(--encre-filet);
  padding-top: 1.4rem;
  border-top: 3px solid var(--encre);
  text-align: justify;
  hyphens: auto;
}
@media (min-width: 42rem) { .colonnes { column-count: 2; } }
@media (min-width: 62rem) { .colonnes { column-count: 3; } }
@media (min-width: 82rem) { .colonnes { column-count: 4; } }
.colonnes p { margin: 0 0 .9rem; }
.colonnes p:first-of-type::first-letter {
  float: left;
  margin: .08em .1em 0 0;
  font-size: 3.6em;
  font-weight: 700;
  line-height: .76;
  color: var(--rouge);
}

/* ── Sections ─────────────────────────────────────────────────────────── */

section { padding-top: clamp(2.5rem, 6vh, 4rem); }
.tete-section {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--encre);
}
.tete-section h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.025em;
}
.tete-section span {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-70);
}

/* Arrivages : une liste tenue comme une cote de marché. */
.arrivages { margin: 0; padding: 0; list-style: none; }
.arrivage {
  display: grid;
  gap: .1rem 1.5rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--encre-filet);
}
@media (min-width: 44rem) { .arrivage { grid-template-columns: 1fr 13rem 8.5rem; align-items: baseline; } }
.arrivage-nom { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; }
.arrivage-det { font-size: .9rem; font-style: italic; color: var(--encre-70); }
.arrivage-prix {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 44rem) { .arrivage-prix { text-align: right; } }

/* Le produit du jour : encadré épais, comme un entrefilet. */
.entrefilet {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.6rem;
  padding: 1.5rem;
  border: 3px double var(--encre);
}
@media (min-width: 50rem) { .entrefilet { grid-template-columns: 1.3fr 1fr; } }
.entrefilet h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.entrefilet p { margin: 0 0 .8rem; }
.entrefilet p:last-child { margin-bottom: 0; }
.fiche-produit { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: .85rem; }
.fiche-produit div {
  display: flex;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px dotted var(--encre-filet);
}
.fiche-produit dt { color: var(--encre-70); }
.fiche-produit dd { margin: 0 0 0 auto; font-weight: 600; }

/* Petites annonces : la grille serrée du bas de page. */
.annonces {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .annonces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .annonces { grid-template-columns: repeat(3, 1fr); } }
.annonce {
  padding: 1rem 1.1rem;
  border: 1px solid var(--encre);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
}
.annonce b {
  display: block;
  margin-bottom: .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge);
}
.annonce i { font-style: normal; color: var(--encre-70); }

/* ── L'ours ───────────────────────────────────────────────────────────── */

.ours {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1rem;
  border-top: 5px solid var(--encre);
  display: grid;
  gap: 1.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  line-height: 1.7;
}
@media (min-width: 50rem) { .ours { grid-template-columns: repeat(3, 1fr); } }
.ours b {
  display: block;
  margin-bottom: .3rem;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-70);
}
.ours a { color: var(--rouge); text-underline-offset: .22em; }
.ours a:hover, .ours a:focus-visible { color: var(--encre); }

/* ── Mouvement : chaque bloc se déroule, comme sorti de la presse ─────── */

.js .rv { clip-path: inset(0 0 100% 0); animation: secours .01s linear 2.6s forwards; }
.js .rv.vu {
  clip-path: inset(0 0 0 0);
  animation: none;
  transition: clip-path .85s var(--presse) var(--retard, 0ms);
}
@keyframes secours { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.vu { clip-path: none; transition: none; animation: none; }
}

/* ── Bandeau Webot ────────────────────────────────────────────────────────
   Identique sur toutes les démos, volontairement neutre pour rester lisible
   quel que soit le style derrière. Police système : elle ne compte pas dans
   les deux familles de la démo. */

.webot-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(16, 16, 18, .92);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .webot-bar { background: rgba(16, 16, 18, .78); backdrop-filter: blur(10px); }
}
.webot-bar p { margin: 0; color: rgba(255, 255, 255, .78); }
.webot-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.webot-bar a:hover { border-bottom-color: #fff; }
.webot-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 34rem) {
  .webot-bar { top: .75rem; bottom: auto; gap: .75rem; padding: .5rem .9rem; font-size: .75rem; }
}