/* LaChevre.io — esprit magazine : noir et blanc, typographie géométrique
   (Jost, auto-hébergée), étiquettes encadrées à ombre décalée, angles droits. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  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: "Jost";
  src: url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #000000;
  --text: #1c1c1c;
  --muted: #5f5f5f;
  --line: #d9d9d9;
  --soft: #f4f4f4;
  --accent: #000000;
  --accent-ink: #ffffff;
  --accent-soft: #f4f4f4;
  --tag-bg: #f4f4f4;
  --code-bg: #f4f4f4;
  --radius: 0;
  --shadow: -5px 5px 0 var(--ink);
  /* Arrondi des images d'articles (couverture, cartes de l'accueil). */
  --radius-media: 32px;
  /* Encadrés des images (frame=shadow, frame=inset). */
  --frame-shadow: 0 24px 48px -24px rgb(0 0 0 / .5), 0 6px 16px -8px rgb(0 0 0 / .22);
  /* Ombre en couches (contact, proche, lointaine) pour les angles droits. */
  --frame-shadow-square: 0 1px 2px rgb(0 0 0 / .1), 0 10px 20px -8px rgb(0 0 0 / .2), 0 32px 60px -22px rgb(0 0 0 / .38);
  --frame-inset: inset 0 4px 24px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(0 0 0 / .3), inset 0 -2px 6px rgb(255 255 255 / .12);
  --frame-inset-edge: 0 0 0 5px var(--soft), 0 0 0 6px var(--line);
  --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  font: 350 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; width: 100%; }
a { color: inherit; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 700; }

.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap { padding: 0 18px; } }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- En-tête ---- */

.site-header { background: var(--bg); }
.header-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 140px;
}
.header-left { display: flex; gap: 28px; }
.header-left a, .header-right .link {
  font-size: 1.05rem; font-weight: 400; text-decoration: none; color: var(--ink);
}
.header-left a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.header-right { display: flex; justify-content: flex-end; }
.header-right form { margin: 0; }

.brand { display: flex; padding: 14px 0; text-decoration: none; }
.brand img { width: 96px; height: auto; transition: transform .2s ease; }
.brand:hover img { transform: rotate(-4deg); }
.brand-tld { font-weight: 300; }

.icon-btn { display: inline-flex; padding: 6px; color: var(--ink); }
.icon-btn:hover { opacity: .65; }

/* Le nom écrit en blanc sous la chèvre : sur fond clair on le détoure. */
.brand img { filter: drop-shadow(0 0 .6px #000) drop-shadow(0 0 .6px #000); }

@media (max-width: 760px) {
  .header-grid { grid-template-columns: 1fr auto; min-height: 76px; }
  .header-left { display: none; }
  .brand img { width: 64px; }
}

/* Les ancres (#explorer…) s'arrêtent sous la barre compacte. */
html { scroll-padding-top: 64px; }

/* En-tête compact une fois la page défilée (header.js) : barre en verre
   dépoli qui glisse depuis le haut, logo réduit. */
.site-header.is-stuck .header-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 6px 24px -18px rgb(0 0 0 / .45);
  animation: header-in .45s cubic-bezier(.2, .8, .2, 1);
}
.site-header.is-stuck .header-grid { min-height: 56px; }
.site-header.is-stuck .brand { padding: 6px 0; }
.site-header.is-stuck .brand img { width: 38px; animation: brand-in .6s cubic-bezier(.3, 1.4, .5, 1); }
.site-header.is-stuck .header-left a { font-size: .95rem; }
.site-header.is-stuck .header-left { gap: 22px; }

@keyframes header-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes brand-in {
  from { transform: scale(.6) rotate(-10deg); }
  to { transform: none; }
}

/* Progression de la lecture d'un article, sous la barre compacte. */
.read-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-stuck .read-progress { opacity: 1; }

@media (max-width: 760px) {
  .site-header.is-stuck .header-grid { min-height: 50px; }
  .site-header.is-stuck .brand img { width: 32px; }
}

/* Bouton « Revenir en haut », flottant, visible avec la barre compacte. */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  color: var(--bg); background: var(--ink); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease, visibility 0s linear .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -8px rgb(0 0 0 / .55); }
.to-top:hover svg { animation: to-top-nudge .6s ease infinite alternate; }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes to-top-nudge { to { transform: translateY(-3px); } }
@media (max-width: 760px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-stuck .header-bar, .site-header.is-stuck .brand img, .to-top:hover svg { animation: none; }
  .to-top { transition: opacity .2s ease; }
}

/* ---- Éléments communs ---- */

/* Étiquette encadrée, ombre décalée vers le bas à gauche. */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 6px;
  font: 400 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--ink); box-shadow: var(--shadow);
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.label:hover { transform: translate(-2px, 2px); box-shadow: -3px 3px 0 var(--ink); }
.label.is-active { background: var(--ink); color: var(--bg); }
.label-count { font-size: .65rem; opacity: .55; letter-spacing: .05em; }

.labels { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.labels-center { justify-content: center; }

/* Titre de section entre deux équerres. */
.bracket {
  position: relative; display: inline-block; margin: 0;
  padding: 12px 26px;
  font: 600 .95rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid var(--ink);
}
.bracket::before { left: 0; top: 0; border-width: 3px 0 0 3px; }
.bracket::after { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
.bracket-small { font-size: .8rem; }

/* Filet avec un rond au centre, rappel du disque du logo. */
.rule { position: relative; height: 2px; max-width: 1000px; margin: 34px auto; background: var(--ink); }
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; transform: translate(-50%, -50%);
  background: var(--bg); border: 2px solid var(--ink); border-radius: 50%;
}

.byline { margin: 14px 0 0; font-size: .95rem; font-weight: 400; color: var(--ink); }
.byline span { margin: 0 6px; }

.link {
  padding: 0; font: inherit; color: var(--ink);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px;
  font: 500 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  background: var(--bg); border: 1px solid var(--ink); border-radius: 0;
  cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover, .btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--bg); color: var(--ink); }

/* Petite pastille (admin). */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font: 400 .72rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  background: var(--bg); border: 1px solid var(--ink); cursor: pointer;
}
.tag:hover { background: var(--ink); color: var(--bg); }
.tag-static { cursor: default; }
.tag-static:hover { background: var(--bg); color: var(--ink); }

/* Visuel d'article ; sans couverture, la chèvre en filigrane. */
.media { display: block; overflow: hidden; background: var(--soft); border-radius: var(--radius-media); }
.media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.media:hover > img { transform: scale(1.03); }
.media-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.media-empty img { width: 26%; max-width: 120px; opacity: .14; filter: grayscale(1); }

/* ---- Accueil ---- */

.intro {
  margin: 8px 0 56px; text-align: center;
  font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}

.feature { display: grid; gap: 56px; align-items: start; }
.feature-cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr) minmax(0, 1fr); }
.feature-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); }
.feature-cols-1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.feature-side { display: grid; gap: 64px; }

.fcard-media { position: relative; margin-bottom: 44px; }
.fcard-media .label { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); }
.fcard-media .label:hover { transform: translate(calc(-50% - 2px), 2px); }
.fcard-side .media { aspect-ratio: 3 / 2; }
.fcard-main .media { aspect-ratio: 5 / 6; }
.feature-cols-1 .fcard-main .media { aspect-ratio: 16 / 9; }

.fcard-title { margin: 0 0 10px; line-height: 1.2; letter-spacing: -.005em; }
.fcard-title a, .rcard-title a { text-decoration: none; }
.fcard-title a:hover, .rcard-title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.fcard-side .fcard-title { font-size: .98rem; }
.fcard-main .fcard-title { font-size: clamp(1.26rem, 1.82vw, 1.68rem); }
.fcard-main { text-align: center; }
.fcard-summary { margin: 0; font-size: .71rem; font-weight: 300; color: var(--text); }
.fcard-main .fcard-summary { max-width: 620px; margin: 0 auto; font-size: .78rem; }

@media (max-width: 960px) {
  .feature-cols-3, .feature-cols-2 { grid-template-columns: 1fr; }
  .feature-main { order: -1; }
  .fcard-main .media { aspect-ratio: 4 / 3; }
  .feature-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px 32px; }
}

.explorer {
  display: grid; justify-items: center; gap: 28px;
  margin-top: 112px; padding: 64px 0;
  text-align: center;
  background: var(--soft);
  box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax);
  scroll-margin-top: 24px;
}
.search { position: relative; width: min(100%, 560px); }
.search svg { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); }
.search input {
  width: 100%; padding: 12px 4px 12px 38px;
  font: 300 1.3rem var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.search input:focus { outline: none; border-bottom-width: 3px; }
.search input::placeholder { color: var(--muted); }
.labels-cloud { justify-content: center; max-width: 960px; }
.filter-status { display: flex; gap: 20px; margin: 0; font-size: .95rem; color: var(--muted); }

.list { padding-top: 88px; text-align: center; }
.list > .bracket { margin-bottom: 24px; }

.rcard {
  display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 44px; align-items: center;
  padding: 44px 0; text-align: left;
}
.rcard + .rcard { border-top: 1px solid var(--line); }
.rcard .media { aspect-ratio: 3 / 2; }
.rcard-body .labels { margin-bottom: 22px; }
.rcard-title { margin: 0 0 12px; font-size: clamp(1.05rem, 1.68vw, 1.4rem); line-height: 1.18; }
.rcard-summary { margin: 0; max-width: 620px; font-size: .735rem; font-weight: 300; color: var(--text); }

@media (max-width: 760px) {
  .rcard { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  :root { --radius-media: 22px; }
}

.empty { padding: 56px 0; text-align: center; font-size: 1.15rem; font-weight: 300; color: var(--muted); }

/* ---- Article ---- */

.post-header { padding-top: 40px; text-align: center; }
.post-header .labels { margin-bottom: 36px; }
.post-title {
  max-width: 1100px; margin: 0 auto;
  font-size: clamp(1.61rem, 3.78vw, 2.8rem); line-height: 1.08; letter-spacing: -.015em;
}
.lede { max-width: 760px; margin: 0 auto; font-size: .91rem; font-weight: 300; line-height: 1.5; color: var(--text); }
.post-header .byline { margin-top: 26px; }

.post-cover { margin: 56px auto 0; }
/* Image principale : 70 % de la largeur et de la hauteur maximale d'origine. */
/* Couverture : jamais recadrée. 70 % de la largeur, réduite si besoin pour
   tenir dans 62 % de la hauteur de l'écran (header.js, selon son format). */
.post-cover .frame { width: 70%; margin: 0 auto; }
.post-cover img { display: block; width: 100%; height: auto; }

.prose {
  /* Tailles du texte des articles (et de la liste) : 70 % des valeurs d'origine. */
  max-width: 780px; margin: 64px auto 0; padding: 0 24px;
  font-size: .84rem; font-weight: 330; line-height: 1.75; color: var(--text);
  overflow-wrap: break-word;
}
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); line-height: 1.2; margin: 2.2em 0 .6em; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.05rem; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.3em; }
.prose li { margin: .35em 0; }
.prose a { color: var(--ink); font-weight: 450; text-underline-offset: 4px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose img, .prose video { display: block; width: 100%; height: auto; margin: 2.2em 0; }
.prose .frame { margin: 2.2em 0; }
.prose .frame img { margin: 0; }
.prose video { background: #000; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 2em 0; }
.prose blockquote {
  margin: 2em 0; padding: 4px 0 4px 28px;
  border-left: 4px solid var(--ink);
  font-size: .95rem; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { height: 2px; margin: 3em auto; border: 0; background: var(--ink); }
.prose code { font: .85em var(--mono); background: var(--code-bg); padding: .15em .4em; }
.prose pre {
  margin: 2em 0; padding: 20px 22px; overflow-x: auto;
  background: var(--code-bg); border-left: 4px solid var(--ink);
  font-size: .665rem; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: .7rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); }

.post-footer { max-width: 780px; margin: 64px auto 0; padding: 0 24px; text-align: center; }
.back { font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 5px; }

.message { padding: 72px 0; text-align: center; }
.message .btn { margin-top: 24px; }

/* ---- Pied de page ---- */

.site-footer { margin-top: 120px; background: #000; color: #fff; }
.footer-grid { display: grid; justify-items: center; gap: 18px; padding-top: 64px; padding-bottom: 48px; text-align: center; }
.footer-brand { color: #fff; text-decoration: none; font-size: 1.8rem; font-weight: 700; letter-spacing: -.01em; }
.footer-tagline { margin: 0; font-size: .78rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: #bdbdbd; }
.footer-nav { display: flex; gap: 28px; margin-top: 10px; }
.footer-nav a { color: #fff; text-decoration: none; font-weight: 400; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-copy { margin: 18px 0 0; font-size: .85rem; color: #8a8a8a; }

/* ---- Compte dans l'en-tête ---- */

.header-right { align-items: center; gap: 22px; }
.account-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 400; color: var(--ink); text-decoration: none;
}
.account-link:hover span { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) {
  .account-link span { display: none; }
}

/* ---- Téléchargements d'un article ---- */

.downloads { max-width: 780px; margin: 72px auto 0; padding: 0 24px; text-align: center; }
.downloads .bracket { margin-bottom: 28px; }
.dl-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); text-align: left; }
.dl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.dl-info { display: grid; gap: 2px; min-width: 0; }
.dl-name { font-weight: 600; overflow-wrap: anywhere; }
.dl-meta { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-item .btn { flex: none; padding: 9px 18px; }
.dl-lock { flex: none; display: inline-flex; padding: 9px; border: 1px solid var(--line); color: var(--muted); }
.dl-cta { margin: 22px 0 0; font-size: 1.02rem; }
.dl-cta a { font-weight: 500; text-underline-offset: 4px; }

/* ---- Formulaires du compte ---- */

.account { padding-top: 24px; }
.form-card {
  display: grid; gap: 20px;
  max-width: 520px; margin: 0 auto 32px; padding: 40px;
  background: var(--bg); border: 1px solid var(--ink); box-shadow: -8px 8px 0 var(--ink);
}
.form-card h1 { margin: 0; font-size: 2.1rem; line-height: 1.1; }
.form-card p { margin: 0; }
.form-intro { color: var(--text); font-weight: 300; }
@media (max-width: 600px) {
  .form-card { padding: 26px 20px; box-shadow: -5px 5px 0 var(--ink); }
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: grid; gap: 6px; }
.field-label { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="password"] {
  width: 100%; padding: 12px 14px;
  font: 400 1.05rem var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--ink); border-radius: 0;
}
.form-card input:focus { outline: none; box-shadow: -3px 3px 0 var(--ink); }
.has-error input { border-color: #b3261e; border-width: 2px; }
.field-error { font-size: .9rem; font-weight: 500; color: #b3261e; }
.hint { font-size: .85rem; color: var(--muted); }

.form-card .check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; font-weight: 300; line-height: 1.45; }
.form-card .check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }

.captcha-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.captcha-row img { display: block; border: 1px solid var(--line); background: #f2f2f2; }
.captcha input[name="captcha"] { max-width: 220px; font-family: var(--mono) !important; letter-spacing: .3em; }

.form-card .btn { width: 100%; padding: 15px; }
.form-forgot { margin-top: -8px !important; text-align: right; font-size: .9rem; }
.form-alt { text-align: center; font-size: .95rem; color: var(--muted); }
.form-alt a, .form-forgot a { color: var(--ink); text-underline-offset: 4px; }

.notice { padding: 12px 16px; border-left: 4px solid; font-size: .95rem; line-height: 1.5; }
.notice a { color: inherit; font-weight: 500; }
.notice-error { border-color: #b3261e; background: color-mix(in srgb, #b3261e 8%, var(--bg)); }
.notice-ok { border-color: var(--ink); background: var(--soft); }

.account-info { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 0; }
.account-info dt { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.account-info dd { margin: 0; overflow-wrap: anywhere; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions form { margin: 0; }
@media (max-width: 480px) { .form-actions { grid-template-columns: 1fr; } }

.danger-zone { box-shadow: none; border-color: var(--line); gap: 0; }
.danger-zone summary { cursor: pointer; font-weight: 500; color: var(--muted); }
.danger-zone[open] summary { margin-bottom: 20px; }
.danger-zone form { display: grid; gap: 18px; }
.btn.danger { border-color: #b3261e; color: #b3261e; background: var(--bg); }
.btn.danger:hover { background: #b3261e; color: #fff; }

/* ---- Langues ---- */

.lang-switch { display: inline-flex; border: 1px solid var(--ink); }
.lang-switch a, .lang-switch span {
  padding: 4px 9px;
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; line-height: 1.4;
  color: var(--ink); text-decoration: none;
}
.lang-switch a:hover { background: var(--soft); }
.lang-switch .is-active { background: var(--ink); color: var(--bg); }
.lang-switch > * + * { border-left: 1px solid var(--ink); }

.lang-badge {
  display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: middle;
  font-size: .62rem; font-weight: 500; letter-spacing: .12em; line-height: 1.5;
  border: 1px solid var(--muted); color: var(--muted);
}
.lang-notice {
  max-width: 760px; margin: 0 auto 32px; padding: 10px 16px;
  font-size: .95rem; font-weight: 400; color: var(--text);
  background: var(--soft); border-left: 3px solid var(--ink); text-align: left;
}
.lang-also { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.lang-also a { color: var(--ink); text-underline-offset: 4px; }

/* Puces de langue (admin). */
.lang-chip {
  display: inline-block; padding: 1px 8px;
  font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-decoration: none; vertical-align: middle;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
}
.lang-chip.is-missing { color: var(--muted); background: transparent; border-style: dashed; border-color: var(--muted); }
.lang-chip:hover { opacity: .8; }
h1 .lang-chip { font-size: .8rem; }

@media (max-width: 760px) {
  .header-right { gap: 14px; }
  .lang-switch a, .lang-switch span { padding: 3px 6px; }
}
@media (max-width: 420px) {
  .header-right { gap: 10px; }
  .lang-switch a, .lang-switch span { padding: 3px 4px; letter-spacing: .04em; }
}

/* ---- Aperçu d'une révision en attente (admin) ---- */

.preview-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); color: var(--bg);
}
.preview-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.preview-info { flex: 1 1 320px; font-size: .95rem; }
.preview-meta { display: block; font-size: .8rem; opacity: .7; }
.preview-langs .lang-chip { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.preview-langs .lang-chip.is-missing { background: transparent; color: var(--bg); border-color: var(--bg); }
.preview-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.preview-actions form { margin: 0; }
.preview-bar .btn { padding: 8px 16px; color: var(--bg); background: transparent; border-color: var(--bg); }
.preview-bar .btn:hover { background: var(--bg); color: var(--ink); }
.preview-bar .btn.primary { background: var(--bg); color: var(--ink); }
.preview-bar .btn.primary:hover { background: transparent; color: var(--bg); }
.preview-warnings { padding-bottom: 12px; font-size: .85rem; }
.preview-warnings summary { cursor: pointer; opacity: .85; }
.preview-warnings ul { margin: 8px 0 0; padding-left: 20px; }

/* ---- Sommaire flottant d'un article (toc.js) ----
   Grand écran : rail de traits à gauche, qui se déploie en carte de verre
   dépoli au survol. Petit écran : pastille en bas à gauche (section en
   cours et anneau de progression) qui ouvre un panneau. */

.toc { --toc-glass: color-mix(in srgb, var(--bg) 80%, transparent); font-size: .8rem; }
.toc[data-ready] { transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s; }
.toc[data-ready]:not(.is-visible):not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; }
.toc[data-ready].is-visible { transition-delay: 0s; }

.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list a {
  display: flex; align-items: center; gap: 14px; padding: 6px 0;
  color: var(--muted); text-decoration: none; line-height: 1.3;
  transition: color .2s ease;
}
.toc-list a:hover, .toc-list a.is-active { color: var(--ink); }
.toc-list a.is-read { color: color-mix(in srgb, var(--ink) 55%, var(--muted)); }
.toc-tick {
  flex: none; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transform-origin: left; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), height .2s ease;
}
.toc-h3 .toc-tick { transform: scaleX(.5); }
.toc-list a:hover .toc-tick { transform: scaleX(1.15); }
.toc-list a.is-active .toc-tick { height: 3px; transform: scaleX(1.35); }
.toc-h3 a.is-active .toc-tick { transform: scaleX(.85); }
.toc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-h3 .toc-text { padding-left: 10px; font-size: .95em; }
.toc-list a.is-active .toc-text { font-weight: 600; }
.toc-title {
  margin: 0 0 8px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.toc-ring circle { fill: none; stroke-width: 2.5; }
.toc-ring circle:first-child { stroke: color-mix(in srgb, currentColor 30%, transparent); }
.toc-ring-fill {
  stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .15s linear;
}

@media (min-width: 1200px) {
  .toc { position: fixed; left: 28px; top: 50%; z-index: 40; transform: translateY(-50%); }
  .toc[data-ready]:not(.is-visible) { transform: translate(-16px, -50%); }
  .toc-toggle, .toc-backdrop { display: none; }
  .toc-panel {
    width: 52px; max-height: 72vh; padding: 16px 15px; overflow: hidden;
    border: 1px solid transparent; border-radius: 22px;
    transition: width .45s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .toc-title, .toc-text { opacity: 0; transform: translateX(-8px); transition: opacity .2s ease, transform .3s ease; }
  .toc:hover .toc-panel, .toc:focus-within .toc-panel {
    width: 320px; overflow-y: auto;
    background: var(--toc-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: 0 24px 60px -28px rgb(0 0 0 / .45);
  }
  .toc:hover .toc-title, .toc:hover .toc-text, .toc:focus-within .toc-title, .toc:focus-within .toc-text {
    opacity: 1; transform: none; transition-delay: .12s;
  }
}

@media (max-width: 1199.98px) {
  .toc { position: fixed; left: 16px; bottom: 16px; z-index: 55; }
  .toc[data-ready]:not(.is-visible):not(.is-open) { transform: translateY(16px); }
  .toc-toggle {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 10px; height: 44px; max-width: calc(100vw - 104px); padding: 0 18px 0 9px;
    font: 500 .82rem var(--sans); color: var(--bg); background: var(--ink); border: 0; border-radius: 999px; cursor: pointer;
    box-shadow: 0 10px 26px -10px rgb(0 0 0 / .55);
  }
  .toc-ring { flex: none; }
  .toc-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toc-current { animation: toc-swap .35s ease; }
  .toc-backdrop {
    position: fixed; inset: 0; z-index: 1;
    background: rgb(0 0 0 / .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .toc-panel {
    position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 2;
    max-height: 62vh; overflow-y: auto; padding: 20px 22px;
    background: var(--toc-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 26px;
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6);
    opacity: 0; visibility: hidden; transform: translateY(24px) scale(.97); transform-origin: bottom left;
    transition: opacity .25s ease, transform .4s cubic-bezier(.2, .9, .3, 1.15), visibility 0s linear .4s;
  }
  .toc-list a { padding: 9px 0; font-size: .9rem; }
  .toc.is-open .toc-panel, .toc.is-open .toc-backdrop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

@keyframes toc-swap { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .toc, .toc *, .toc-panel { transition-duration: .01s !important; animation: none !important; }
}

/* ---- Défilements d'images (bloc :::gallery, gallery.js) ----
   Sans JS : bande défilante. Avec JS ([data-ready]), l'effet choisi ; la
   position de chaque image par rapport à l'image en cours (--pos, --abs)
   pilote les transformations. Largeur : celle du texte par défaut, ou
   width=wide | full | <n>px | <n>% (--gw, centrée sur la colonne). */

.gallery {
  --ratio: 16 / 9; --ease: cubic-bezier(.22, .8, .2, 1);
  position: relative;
  width: var(--gw, 100%); margin: 2.6em 0 2.6em calc(50% - var(--gw, 100%) / 2);
}
.gallery.w-wide { --gw: min(100vw - 48px, 1100px); }
.gallery.w-full { --gw: calc(100vw - 32px); }
.ratio-4-3 { --ratio: 4 / 3; } .ratio-3-2 { --ratio: 3 / 2; } .ratio-1-1 { --ratio: 1 / 1; }
.ratio-21-9 { --ratio: 21 / 9; } .ratio-9-16 { --ratio: 9 / 16; }
.gallery:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--radius-media); }

.gallery-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  position: relative; flex: 0 0 min(85%, 760px); aspect-ratio: var(--ratio);
  overflow: hidden; border-radius: var(--radius-media); background: var(--soft); scroll-snap-align: center;
}
.prose .gallery-slide img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Texte des images (text=below | above | over | news, quote) : seul celui
   de l'image en cours est visible, en fondu ; tous partagent la même case
   pour que la hauteur ne saute pas. --track-top / --track-h (gallery.js)
   situent les images dans la galerie. */
.gallery { --news-red: #d0021b; }
.gallery-texts { position: relative; display: grid; }
.gallery-text { grid-area: 1 / 1; max-width: 640px; margin: 0 auto; font-size: 1.1rem; font-weight: 400; line-height: 1.55; color: var(--ink); text-align: center; }
.gallery-text p { margin: 0 0 .5em; }
.gallery-text p:last-child { margin-bottom: 0; }
.gallery-text a { color: inherit; }
.gallery[data-ready] .gallery-text {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .45s ease, transform .55s var(--ease), visibility 0s linear .45s;
}
.gallery[data-ready] .gallery-text.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }

/* below / above */
.t-below .gallery-texts { margin-top: 20px; }
.t-above .gallery-texts { margin-bottom: 20px; }

/* Citation : italique, signature en petites capitales. */
.gallery-text.is-quote { font-size: 1.15rem; font-weight: 350; font-style: italic; line-height: 1.45; }
.gallery-cite {
  display: block; margin-top: .9em;
  font-size: .58em; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8;
}
.gallery-cite::before { content: "\2014\00a0"; }

/* over : par-dessus l'image, dans une carte de verre dépoli posée en bas à
   gauche (l'image reste nette autour) ; elle glisse en place à chaque image. */
.gallery[data-ready].t-over .gallery-texts {
  position: absolute; left: 0; right: 0; top: var(--track-top, 0); height: var(--track-h, 100%); z-index: 20;
  align-items: end; justify-items: start; padding: clamp(14px, 3%, 26px);
  pointer-events: none;
}
.gallery[data-ready].t-over .gallery-text {
  max-width: min(560px, 82%); margin: 0; padding: 16px 22px 18px;
  color: var(--ink); text-align: left; font-size: 1.05rem; font-weight: 450; line-height: 1.5;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: 20px; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .55);
  pointer-events: auto;
  transform: translateY(14px) scale(.98); transform-origin: bottom left;
}
.gallery[data-ready].t-over .gallery-text.is-active { transform: none; }
/* Citation : un filet vertical à gauche. */
.gallery[data-ready].t-over .gallery-text.is-quote {
  position: relative; padding-left: 30px; font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 350;
}
.gallery[data-ready].t-over .gallery-text.is-quote::after {
  content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--ink); opacity: .85;
}
.gallery[data-ready].fx-coverflow.t-over .gallery-texts { left: 19%; right: 19%; }
.gallery[data-ready].fx-stack.t-over .gallery-texts { right: 10%; height: calc(var(--track-h, 100%) - 34px); }
.gallery[data-ready].fx-strip.t-over .gallery-texts { left: 7.5%; right: 7.5%; }

/* news : bandeau défilant façon « breaking news » en bas de l'image. */
.gallery[data-ready].t-news .gallery-texts {
  position: absolute; z-index: 20; left: 16px; right: 16px; top: calc(var(--track-top, 0px) + var(--track-h, 0px) - 62px);
  grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 44px; overflow: hidden;
  color: #fff; background: rgb(12 12 12 / .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 14px; box-shadow: 0 12px 30px -16px rgb(0 0 0 / .7);
}
.gallery-news-label {
  display: flex; align-items: center; gap: 8px; align-self: stretch; padding: 0 16px;
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--news-red);
}
.gallery-news-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: news-pulse 1.4s ease-in-out infinite;
}
@keyframes news-pulse { 50% { opacity: .25; transform: scale(.7); } }
.gallery[data-ready].t-news .gallery-text {
  grid-area: 1 / 2; max-width: none; margin: 0; overflow: hidden; white-space: nowrap; text-align: left; color: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.gallery[data-ready].t-news .gallery-text, .gallery[data-ready].t-news .gallery-text.is-active { transform: none; }
.gallery-ticker { display: inline-block; font-size: .95rem; font-weight: 500; }
.gallery[data-ready].t-news .gallery-ticker { padding-left: 100%; }
.gallery[data-ready].t-news .gallery-text.is-active .gallery-ticker { animation: news-ticker var(--ticker-dur, 15s) linear infinite; }
.gallery[data-ready].t-news:is(:hover, :focus-within) .gallery-ticker { animation-play-state: paused; }
.gallery-ticker-sep { margin: 0 20px; font-size: 1.3em; color: var(--news-red); }
@keyframes news-ticker { to { transform: translateX(-100%); } }

/* Sans JS (aperçu de l'éditeur) : textes sous les images, l'un après l'autre. */
.gallery:not([data-ready]) .gallery-texts { display: block; margin-top: 16px; }
.gallery:not([data-ready]) .gallery-text { margin: 0 0 .8em; text-align: left; }
.gallery:not([data-ready]) .gallery-news-label { display: inline-flex; padding: 4px 10px; margin-bottom: 8px; }

@media (max-width: 760px) {
  .gallery[data-ready].t-news .gallery-texts { left: 10px; right: 10px; height: 38px; top: calc(var(--track-top, 0px) + var(--track-h, 0px) - 50px); }
  .gallery-news-label { padding: 0 10px; font-size: .58rem; }
  .gallery[data-ready].t-over .gallery-text { max-width: 100%; padding: 12px 16px 14px; font-size: .95rem; border-radius: 16px; }
  .gallery[data-ready].t-over .gallery-text.is-quote { padding-left: 26px; }
  .gallery[data-ready].t-over .gallery-text.is-quote::after { left: 13px; top: 14px; bottom: 14px; }
  .gallery-text { font-size: 1rem; }
  .gallery-text.is-quote { font-size: 1.05rem; }
}

/* Commandes */
.gallery-nav {
  /* --mid : mi-hauteur des images (gallery.js), sans les textes ni les points. */
  position: absolute; top: var(--mid, 40%); z-index: 30; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; margin-top: -23px;
  color: var(--ink); background: color-mix(in srgb, var(--bg) 75%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 50%; cursor: pointer;
  box-shadow: 0 10px 26px -14px rgb(0 0 0 / .5);
  opacity: 0; transition: opacity .3s ease, transform .3s var(--ease), background-color .2s ease;
}
.gallery-prev { left: 14px; transform: translateX(-6px); }
.gallery-next { right: 14px; transform: translateX(6px); }
.gallery:hover .gallery-nav, .gallery:focus-within .gallery-nav { opacity: 1; transform: none; }
.gallery-nav:hover { background: var(--ink); color: var(--bg); }
.gallery-nav:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .gallery-nav { opacity: 1; transform: none; width: 40px; height: 40px; } }

.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.gallery-dot {
  position: relative; overflow: hidden; width: 8px; height: 8px; padding: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent); border: 0; border-radius: 999px; cursor: pointer;
  transition: width .45s var(--ease), background-color .3s ease;
}
.gallery-dot[aria-current="true"] { width: 30px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
/* Le point actif se remplit pendant la lecture automatique. */
.gallery-dot[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink);
}
.gallery[data-autoplay]:not(.is-paused) .gallery-dot[aria-current="true"]::after {
  transform-origin: left; animation: gallery-fill var(--autoplay, 5s) linear;
}
@keyframes gallery-fill { from { transform: scaleX(0); } }

/* Effets (avec JS) */
.gallery[data-ready]:not(.fx-strip) .gallery-track { overflow: visible; scroll-snap-type: none; touch-action: pan-y; }

/* slide : les images glissent côte à côte. */
.gallery[data-ready].fx-slide .gallery-track { overflow: hidden; gap: 0; border-radius: var(--radius-media); }
.gallery[data-ready].fx-slide .gallery-slide {
  flex: 0 0 100%; border-radius: 0;
  transform: translateX(calc(var(--i, 0) * -100%)); transition: transform .75s var(--ease);
}
.gallery[data-ready].fx-slide .gallery-slide img { transform: scale(1.06); transition: transform 1.2s var(--ease); }
.gallery[data-ready].fx-slide .gallery-slide.is-active img { transform: none; }

/* Effets empilés : toutes les images dans la même case de grille. */
.gallery[data-ready]:is(.fx-fade, .fx-zoom, .fx-stack, .fx-coverflow) .gallery-track { display: grid; }
.gallery[data-ready]:is(.fx-fade, .fx-zoom, .fx-stack, .fx-coverflow) .gallery-slide { grid-area: 1 / 1; width: 100%; }

/* fade : fondu enchaîné, l'image arrivante se met au point. */
.gallery[data-ready].fx-fade .gallery-slide { opacity: 0; transition: opacity 1s ease; }
.gallery[data-ready].fx-fade .gallery-slide img { filter: blur(6px); transform: scale(1.03); transition: filter 1s ease, transform 1.4s var(--ease); }
.gallery[data-ready].fx-fade .gallery-slide.is-active { opacity: 1; }
.gallery[data-ready].fx-fade .gallery-slide.is-active img { filter: none; transform: none; }

/* zoom : fondu, puis lent zoom de l'image en cours (effet Ken Burns). */
.gallery[data-ready].fx-zoom .gallery-slide { opacity: 0; transition: opacity 1.2s ease; }
.gallery[data-ready].fx-zoom .gallery-slide.is-active { opacity: 1; }
.gallery[data-ready].fx-zoom .gallery-slide img { transform: scale(1); transition: transform 1.2s ease; }
.gallery[data-ready].fx-zoom .gallery-slide.is-active img {
  transform: scale(1.14) translate(-1.5%, -1%); transition: transform calc(var(--autoplay, 6s) + 1.5s) linear;
}

/* stack : cartes empilées ; celle de devant part de côté, les suivantes avancent. */
.gallery[data-ready].fx-stack .gallery-track { padding: 0 10% 34px 0; }
.gallery[data-ready].fx-stack .gallery-slide {
  transform: translate(calc(var(--pos) * 4.5%), calc(var(--pos) * 15px)) scale(calc(1 - var(--abs) * .05)) rotate(calc(var(--pos) * 1.4deg));
  opacity: calc(1 - var(--abs) * .22);
  box-shadow: 0 22px 50px -26px rgb(0 0 0 / .55);
  transition: transform .8s var(--ease), opacity .6s ease;
  cursor: pointer;
}
.gallery[data-ready].fx-stack .gallery-slide.is-active { cursor: default; }
.gallery[data-ready].fx-stack .gallery-slide:not(.is-active) img { filter: saturate(.7) brightness(.9); }
.gallery[data-ready].fx-stack .gallery-slide.is-past { opacity: 0; transform: translate(-60%, 20px) rotate(-10deg) scale(.9); pointer-events: none; }

/* coverflow : l'image en cours au centre, ses voisines tournées en perspective. */
/* Les voisines tournées dépassent : on les coupe au bord, en laissant passer les ombres. */
.gallery.fx-coverflow { overflow-x: clip; overflow-clip-margin: 40px; }
.gallery[data-ready].fx-coverflow .gallery-track { perspective: 1400px; }
.gallery[data-ready].fx-coverflow .gallery-slide {
  justify-self: center; width: 62%;
  transform: translateX(calc(var(--pos) * 58%)) translateZ(calc(var(--abs) * -180px)) rotateY(calc(var(--pos) * -38deg));
  opacity: clamp(0, calc(1.6 - var(--abs) * .7), 1);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6);
  transition: transform .9s var(--ease), opacity .6s ease, filter .6s ease;
  cursor: pointer;
}
.gallery[data-ready].fx-coverflow .gallery-slide:not(.is-active) { filter: brightness(.75); box-shadow: none; }
.gallery[data-ready].fx-coverflow .gallery-slide.is-active { cursor: default; }

/* strip : bande défilante, les voisines restent visibles, l'image en cours mise en avant. */
.gallery[data-ready].fx-strip .gallery-track { padding: 0 7.5%; scroll-padding: 0 7.5%; }
.gallery[data-ready].fx-strip .gallery-slide { transition: transform .6s var(--ease), opacity .6s ease; transform: scale(.94); opacity: .55; }
.gallery[data-ready].fx-strip .gallery-slide.is-active { transform: none; opacity: 1; }

@media (max-width: 760px) {
  .gallery.w-wide, .gallery.w-full { --gw: calc(100vw - 32px); }
  .gallery[data-ready].fx-coverflow .gallery-slide { width: 74%; }
  }

@media (prefers-reduced-motion: reduce) {
  .gallery *, .gallery *::before, .gallery *::after { transition-duration: .01s !important; animation: none !important; }
  .gallery[data-ready].t-news .gallery-ticker { padding-left: 0; }
  .gallery[data-ready].t-news .gallery-text { text-overflow: ellipsis; }
}

/* ---- Encadrés des images ----
   Images du texte et couverture : un cadre <span class="frame frame-…">
   (content.js). Galeries : la classe frame-… sur .gallery.
   flat (défaut, = auto) : arrondi plat · shadow : arrondi, ombre portée ·
   inset : arrondi, incrusté dans la page (ombre intérieure) · none : rien. */
.frame { display: block; position: relative; overflow: hidden; border-radius: var(--radius-media); }
.frame img { display: block; }
.frame.frame-none { border-radius: 0; }
.frame.frame-shadow { box-shadow: var(--frame-shadow); }
.frame.frame-shadow-square { border-radius: 0; box-shadow: var(--frame-shadow-square); }
/* Incrusté : un liseré autour, l'ombre intérieure par-dessus l'image. */
.frame.frame-inset, .gallery.frame-inset .gallery-slide { box-shadow: var(--frame-inset-edge); }
.gallery[data-ready].fx-slide.frame-inset .gallery-track { box-shadow: var(--frame-inset-edge); }
.gallery[data-ready].fx-slide.frame-inset .gallery-slide { box-shadow: none; }
.frame.frame-inset::after, .gallery.frame-inset .gallery-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--frame-inset);
}
.gallery.frame-inset 
.gallery:is(.frame-none, .frame-shadow-square) .gallery-slide, .gallery:is(.frame-none, .frame-shadow-square) .gallery-track { border-radius: 0 !important; }
.gallery.frame-none .gallery-texts { border-radius: 0 !important; }
.gallery.frame-none .gallery-slide { box-shadow: none !important; }
.gallery.frame-shadow .gallery-slide { box-shadow: var(--frame-shadow); }
.gallery.frame-shadow-square .gallery-slide { box-shadow: var(--frame-shadow-square); }
/* slide : les images défilent dans une bande qui coupe leurs ombres ; l'ombre va sur la bande. */
.gallery[data-ready].fx-slide.frame-shadow .gallery-track { box-shadow: var(--frame-shadow); }
.gallery[data-ready].fx-slide.frame-shadow-square .gallery-track { box-shadow: var(--frame-shadow-square); }
.gallery[data-ready].fx-slide:is(.frame-shadow, .frame-shadow-square) .gallery-slide { box-shadow: none; }
/* strip (et sans JS) : la bande défile, on lui laisse de la place pour l'ombre. */
.gallery:is(.frame-shadow, .frame-shadow-square):is(.fx-strip, :not([data-ready])) .gallery-track { padding-bottom: 34px; margin-bottom: -18px; }

/* glass : verre. Un brillant en biais et un liseré clair sur l'image, et
   son reflet au sol, qui s'efface vite. Sur une galerie, c'est la bande des
   images qui se reflète : le reflet suit le défilement. --reflect : part de
   l'image visible dans le reflet (place réservée dessous). Reflet absent sur
   Firefox (pas de box-reflect) : l'image reste avec son brillant. */
.frame.frame-glass, .gallery.frame-glass .gallery-track { --reflect: .22; }
.frame.frame-glass::after, .gallery.frame-glass .gallery-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / .06) 32%, transparent 48%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 1px 0 rgb(255 255 255 / .35);
}
@supports (-webkit-box-reflect: below) {
  /* Image seule : le cadre coupe ce qui dépasse, le reflet va donc sur l'image,
     arrondie comme son cadre ; la place du reflet est réservée sous le cadre. */
  .frame.frame-glass { overflow: visible; }
  .frame.frame-glass img {
    border-radius: inherit;
    -webkit-box-reflect: below 3px linear-gradient(transparent 78%, rgb(255 255 255 / .2));
  }
  .prose .frame.frame-glass { margin-bottom: calc(2.2em + 16%); }
  .gallery.frame-glass .gallery-track {
    -webkit-box-reflect: below 3px linear-gradient(transparent 78%, rgb(255 255 255 / .2));
    margin-bottom: calc(var(--track-h, 300px) * var(--reflect));
  }
}