/* ============================================================
   AubeInfo — Edition blanche, percutante, editoriale
   ============================================================ */

:root {
  --bg:         #ffffff;
  --bg-soft:    #fafafa;
  --bg-band:    #0a0a0a;
  --ink:        #0a0a0a;
  --ink-soft:   #2a2a2a;
  --ink-mute:   #6a6a6a;
  --rule:       #e6e6e6;
  --rule-strong:#0a0a0a;
  --signal:     #d62828;     /* rouge presse, vif */
  --signal-dk:  #a31d1d;
  --gold:       #b08538;
  --link:       #0a0a0a;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 8px 30px -12px rgba(0,0,0,.18);
  --shadow-lg:  0 30px 80px -30px rgba(0,0,0,.35);
  --serif:      'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:       'Inter', system-ui, -apple-system, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, Menlo, monospace;
  --maxw:       1280px;
  --ease:       cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--signal); }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
::selection { background: var(--signal); color: #fff; }

/* ============================================================
   TICKER haut — ligne vivante
   ============================================================ */
.tickbar {
  background: var(--bg-band);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
  overflow: hidden;
  border-bottom: 1px solid #000;
}
.tickbar-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: tick 60s linear infinite;
}
.tickbar:hover .tickbar-inner { animation-play-state: paused; }
.tick-label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--signal); font-weight: 600;
}
.tick-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; opacity: .85;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.tick-item em {
  font-style: normal;
  color: var(--signal);
  font-weight: 600;
  letter-spacing: .18em;
}
.tick-item strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: -.01em;
}
.tick-item:hover { opacity: 1; color: #fff; }
.tick-item:hover strong { color: var(--signal); }
.tickbar .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(214,40,40,.6);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,40,40,.7); }
  100% { box-shadow: 0 0 0 14px rgba(214,40,40,0); }
}
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: 18px;
  position: relative;
}
.masthead-bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
}
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.account-nav a { margin-left: 18px; color: var(--ink-soft); position: relative; }
.account-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.account-nav a:hover::after { transform: scaleX(1); }

.wordmark {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(54px, 11vw, 140px);
  line-height: .9;
  letter-spacing: -.045em;
  margin: 22px 0 4px;
  color: var(--ink);
}
.wordmark-aube { color: var(--ink); }
.wordmark-info { color: var(--signal); font-style: italic; }
.wordmark:hover { color: var(--ink); }

.tagline {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
  margin: 0 0 22px;
  letter-spacing: -.01em;
}

.rubrics {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 32px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  background: rgba(255,255,255,.92);
}
.rubrics a { color: var(--ink-soft); white-space: nowrap; position: relative; padding: 4px 0; }
.rubrics a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.rubrics a:hover { color: var(--ink); }
.rubrics a:hover::after { transform: scaleX(1); }
.search-inline { margin-left: auto; }
.search-inline input {
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  width: 220px;
  border-radius: 999px;
  transition: all .25s var(--ease);
  outline: none;
}
.search-inline input:focus {
  border-color: var(--ink);
  background: #fff;
  width: 280px;
}

/* ============================================================
   MAIN
   ============================================================ */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 32px 100px;
}

.section-rule {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink);
  margin: 64px 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-rule::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--signal);
  flex-shrink: 0;
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ============================================================
   HERO / UNE
   ============================================================ */
.hero-banner {
  background: var(--bg-band);
  color: #fff;
  padding: 6px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.hero-banner span { color: var(--signal); margin-right: 8px; }

.frontpage {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  margin-top: 16px;
}
@media (max-width: 960px) { .frontpage { grid-template-columns: 1fr; gap: 32px; } }

.lead-story { display: flex; flex-direction: column; }
.lead-story h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 18px 0 14px;
}
.lead-story h1 a { background-image: linear-gradient(var(--signal), var(--signal)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.lead-story h1 a:hover { background-size: 100% 3px; color: var(--ink); }
.lead-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #111;
  overflow: hidden;
  border-radius: 4px;
}
.lead-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.15), transparent 40%);
  transition: opacity .35s var(--ease);
}
.lead-hero:hover::after { opacity: 0; }
.lead-body .lede {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.45;
  letter-spacing: -.005em;
}

.lead-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 36px;
  border-left: 1px solid var(--rule);
}
@media (max-width: 960px) { .lead-aside { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); padding-top: 24px; } }
.aside-story { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.aside-story:last-child { border: none; padding-bottom: 0; }
.aside-story h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 8px 0 6px;
}

/* ============================================================
   RUBRIQUES TAGS & BYLINE
   ============================================================ */
.rubric-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--signal);
  font-weight: 600;
  padding: 0;
  position: relative;
  padding-left: 14px;
}
.rubric-tag::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--signal);
}
.rubric-tag:hover { color: var(--signal-dk); }
.rubric-tag.small { font-size: 9px; }

.byline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 10px 0 0;
}
.byline.small { font-size: 10px; }
.byline a { color: var(--ink-soft); border-bottom: 1px solid currentColor; }

/* ============================================================
   GRILLE CARTES
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 36px 32px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}
.card-hero {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #ececec;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.card-hero::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .3s var(--ease);
}
.card:hover .card-hero { transform: scale(1.015); }
.card:hover .card-hero::after { background: rgba(0,0,0,.04); }
.card-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 6px 0 4px;
}
.card-body h3 a { background-image: linear-gradient(var(--ink), var(--ink)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size .3s var(--ease); }
.card-body h3 a:hover { background-size: 100% 1px; color: var(--ink); }
.card-lede {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 4px 0 8px;
  font-family: var(--serif);
}

/* ============================================================
   BANDEAU CTA
   ============================================================ */
.cta-band {
  margin: 80px 0 0;
  padding: 56px 48px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 4px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(214,40,40,.35), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.cta-band > div { position: relative; z-index: 1; max-width: 600px; }
.cta-band h3 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.cta-band p { margin: 0; opacity: .82; font-size: 16px; }
.cta-band .btn { position: relative; z-index: 1; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 14px 22px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  transition: all .2s var(--ease);
  text-decoration: none;
}
.btn::after { content: '→'; transition: transform .2s var(--ease); }
.btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--signal); border-color: var(--signal); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-danger { background: transparent; border-color: var(--signal); color: var(--signal); }
.btn-danger:hover { background: var(--signal); color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 11px; }
.btn-sm::after { display: none; }

/* ============================================================
   ARTICLE
   ============================================================ */
.article-page { max-width: 760px; margin: 0 auto; }
.article-head { text-align: center; margin: 32px 0 36px; }
.article-head h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 18px 0 14px;
}
.article-lede {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.42;
  letter-spacing: -.005em;
  max-width: 640px;
  margin: 0 auto 18px;
}
.article-hero { margin: 0 -60px 40px; }
@media (max-width: 760px) { .article-hero { margin: 0 -32px 28px; } }
.article-hero img { width: 100%; border-radius: 4px; }

.article-body {
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.78;
  color: var(--ink);
}
.article-body p { margin: 0 0 1.1em; }
.article-body p:first-of-type::first-letter {
  font-size: 5em;
  font-weight: 900;
  float: left;
  line-height: .85;
  margin: .04em .08em 0 -.04em;
  color: var(--signal);
  font-family: var(--serif);
}
.article-body h2, .article-body h3 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.018em;
  margin: 1.7em 0 .5em;
  color: var(--ink);
}
.article-body h2 { font-size: 32px; }
.article-body h3 { font-size: 25px; }
.article-body blockquote {
  border-left: 3px solid var(--signal);
  margin: 1.6em 0;
  padding: .2em 0 .2em 24px;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  font-family: var(--serif);
}
.article-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--bg-soft);
  padding: 2px 7px;
  border-radius: 3px;
}
.article-body pre {
  font-family: var(--mono);
  background: var(--ink);
  color: #fff;
  padding: 18px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.article-body img { margin: 1.6em auto; border-radius: 4px; }
.article-body a { color: var(--ink); border-bottom: 2px solid var(--signal); transition: background .2s var(--ease); }
.article-body a:hover { background: rgba(214,40,40,.08); color: var(--ink); }

/* ============================================================
   AUTEUR ENCART + COMMENTAIRES
   ============================================================ */
.author-card {
  margin: 56px 0;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--bg-soft);
}
.author-card img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.author-card h4 { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; }
.author-card p { margin: 0; color: var(--ink-soft); }

.comments { margin-top: 56px; }
.comments h3 {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
}
.comments form { margin: 18px 0 28px; }
.comments textarea {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 14px;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--bg);
  border-radius: 4px;
  margin-bottom: 10px;
  resize: vertical;
  transition: border-color .2s var(--ease);
}
.comments textarea:focus { border-color: var(--ink); outline: none; }
.comment {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.comment-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-mute);
  margin: 0 0 8px;
}

/* ============================================================
   CATEGORIE / RECHERCHE / AUTEUR
   ============================================================ */
.cat-head {
  text-align: center;
  margin: 16px 0 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink);
}
.cat-head h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: -.025em;
  margin: 0 0 10px;
}
.cat-head p { color: var(--ink-mute); font-style: italic; font-family: var(--serif); font-size: 18px; }

.pager {
  margin: 40px 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.pager a { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; }
.pager a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.search-block {
  max-width: 560px;
  margin: 18px auto 0;
  display: flex;
  gap: 10px;
}
.search-block input {
  flex: 1;
  border: 1.5px solid var(--ink);
  padding: 14px 18px;
  font-family: var(--serif);
  font-size: 19px;
  background: #fff;
  border-radius: 999px;
  outline: none;
}
.search-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 18px; text-transform: uppercase; letter-spacing: .12em; }

.author-page {}
.author-head {
  display: flex;
  gap: 28px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.author-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.author-head h1 { font-family: var(--serif); font-size: 42px; margin: 0 0 6px; letter-spacing: -.02em; }
.author-role { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--signal); margin: 0 0 8px; }
.author-bio { color: var(--ink-soft); margin: 0; max-width: 620px; font-family: var(--serif); font-size: 17px; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 32px 0 80px;
}
.auth-card {
  background: #fff;
  padding: 44px 40px;
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 460px;
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.auth-card.wider { max-width: 680px; }
.auth-card h1 { font-family: var(--serif); font-size: 36px; margin: 0 0 8px; letter-spacing: -.02em; }
.auth-sub { color: var(--ink-mute); margin: 0 0 24px; font-style: italic; font-family: var(--serif); font-size: 17px; }
.auth-card label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-weight: 600;
}
.auth-card input,
.auth-card textarea,
.auth-card select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  border-radius: 4px;
  transition: border-color .2s var(--ease);
  outline: none;
}
.auth-card input:focus, .auth-card textarea:focus, .auth-card select:focus {
  border-color: var(--ink);
}
.auth-card textarea { font-family: var(--serif); font-size: 16px; resize: vertical; }
.auth-card button { margin-top: 10px; }
.auth-foot { font-size: 13px; color: var(--ink-mute); margin-top: 20px; }
.avatar-preview { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-top: 10px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 22px;
  margin-bottom: 32px;
}
.dash-head h1 { font-family: var(--serif); font-size: 42px; margin: 0; letter-spacing: -.02em; }
.dash-role { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); margin: 8px 0 0; }
.dash-actions { display: flex; gap: 10px; }

.callout {
  background: var(--bg-soft);
  border-left: 3px solid var(--signal);
  padding: 22px 26px;
  margin: 18px 0 36px;
  border-radius: 4px;
}
.callout h3 { font-family: var(--serif); margin: 0 0 8px; font-size: 24px; letter-spacing: -.01em; }
.callout p { margin: 0 0 12px; color: var(--ink-soft); }
.callout-warn { background: #fdeded; border-left-color: var(--signal); }

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.dash-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
  padding: 12px 10px;
  font-weight: 600;
}
.dash-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.dash-table tr:hover td { background: var(--bg-soft); }

.status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.status-brouillon { color: var(--ink-mute); }
.status-en_revue  { color: var(--gold); }
.status-publie    { color: #1f8a3d; }
.status-archive   { color: #555; }

/* ============================================================
   EDITEUR
   ============================================================ */
.editor-page { max-width: 940px; margin: 0 auto; }
.editor-head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.editor-head h1 { font-family: var(--serif); font-size: 30px; margin: 0; flex: 1; letter-spacing: -.01em; }
.big-input { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); font-weight: 600; }
.big-input input,
.big-input textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  padding: 12px 0;
  outline: none;
  transition: border-color .2s var(--ease);
}
.big-input input { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.big-input textarea { font-size: 19px; font-style: italic; resize: vertical; color: var(--ink-soft); }
.big-input input:focus, .big-input textarea:focus { border-bottom-color: var(--signal); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 22px 0;
}
.form-row label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
  font-weight: 600;
}
.form-row input, .form-row select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  border-radius: 4px;
  outline: none;
}
.hero-preview { margin-top: 10px; max-height: 130px; border-radius: 4px; }

#quill-editor {
  min-height: 460px;
  background: #fff;
  font-family: var(--serif);
  font-size: 18px;
}
.ql-editor { min-height: 460px; line-height: 1.7; }
.ql-toolbar { background: var(--bg-soft); border-color: var(--rule) !important; border-radius: 4px 4px 0 0; }
.ql-container { border-color: var(--rule) !important; border-radius: 0 0 4px 4px; }

.editor-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-page h1 {
  font-family: var(--serif);
  font-size: 42px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  letter-spacing: -.02em;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.stat {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 22px 18px;
  text-align: center;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-n {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.stat span:last-child {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
}

.admin-list { display: flex; flex-direction: column; gap: 16px; }
.admin-card {
  background: #fff;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.admin-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}
.admin-card .muted { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.admin-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.admin-actions form { display: inline-flex; gap: 8px; align-items: center; }
.admin-actions input {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 4px;
}
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions form { display: inline; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-band);
  color: #fff;
  padding: 64px 0 28px;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0 0 16px;
  color: var(--signal);
  font-weight: 600;
}
.footer p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 8px 0; }
.footer a { color: #fff; opacity: .8; font-size: 14px; transition: opacity .2s, color .2s; }
.footer a:hover { color: var(--signal); opacity: 1; }
.footer-bottom {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 20px 32px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   FLASHES & ERREUR
   ============================================================ */
.flashes {
  max-width: var(--maxw);
  margin: 18px auto 0;
  padding: 0 32px;
}
.flash {
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  border-left: 3px solid;
  background: var(--bg-soft);
}
.flash-success { border-color: #1f8a3d; color: #1f8a3d; }
.flash-error   { border-color: var(--signal); color: var(--signal); background: #fdeded; }
.flash-info    { border-color: var(--gold); color: var(--ink); }

.error-page { text-align: center; padding: 100px 0; }
.error-code {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 120px;
  color: var(--signal);
  margin: 0;
  line-height: 1;
  letter-spacing: -.04em;
}
.error-page h1 { font-family: var(--serif); font-size: 36px; margin: 12px 0 28px; letter-spacing: -.02em; }

.empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  text-align: center;
  padding: 40px 0;
  font-size: 17px;
}

/* ============================================================
   HERO ACCUEIL VIDE (pas encore d'articles)
   ============================================================ */
.hero-empty {
  text-align: center;
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--signal);
  margin: 0 0 16px;
  font-weight: 600;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 110px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 auto 28px;
  max-width: 1000px;
  color: var(--ink);
}
.hero-title em { color: var(--signal); font-style: italic; }
.hero-sub {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto 36px;
  letter-spacing: -.005em;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-rubrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-chip {
  background: #fff;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  transition: all .25s var(--ease);
  position: relative;
}
.hero-chip::after {
  content: '→';
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  transition: all .25s var(--ease);
  color: var(--signal);
  font-family: var(--sans);
}
.hero-chip:hover {
  background: var(--ink);
  color: #fff;
}
.hero-chip:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); color: var(--signal); }
.hero-chip:hover .hero-chip-num { color: var(--signal); }
.hero-chip-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--signal);
  letter-spacing: -.02em;
  transition: color .25s var(--ease);
}
.hero-chip-name { font-weight: 600; }

/* ============================================================
   PAGES LEGALES (mentions, charte, cgu)
   ============================================================ */
.legal-page { max-width: 760px; margin: 0 auto; }
.legal-head { text-align: center; margin: 24px 0 48px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.legal-eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .26em; color: var(--signal); margin: 0 0 14px; font-weight: 600;
}
.legal-head h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(36px, 5vw, 56px); letter-spacing: -.025em;
  line-height: 1.05; margin: 0 0 12px;
}
.legal-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 19px; color: var(--ink-mute); margin: 0;
}
.legal-page section { margin-bottom: 36px; }
.legal-page h2 {
  font-family: var(--serif); font-weight: 800; font-size: 26px;
  letter-spacing: -.015em; margin: 0 0 14px; color: var(--ink);
}
.legal-page p, .legal-page ul {
  font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink-soft);
}
.legal-page a { color: var(--ink); border-bottom: 2px solid var(--signal); }
.legal-page a:hover { background: rgba(214,40,40,.08); }
.legal-page ul { padding-left: 22px; }
.legal-page li { margin: 6px 0; }
.legal-foot {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-mute);
  border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 48px;
}

/* Page editable (À propos / autres) */
.page-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
}
.page-body h2 { font-family: var(--serif); font-weight: 800; font-size: 28px; letter-spacing: -.015em; margin: 1.6em 0 .4em; }
.page-body h3 { font-family: var(--serif); font-weight: 700; font-size: 23px; margin: 1.4em 0 .4em; }
.page-body p { margin: 0 0 1em; color: var(--ink-soft); }
.page-body a { color: var(--ink); border-bottom: 2px solid var(--signal); }
.page-body a:hover { background: rgba(214,40,40,.08); }
.page-body img { margin: 1.4em auto; border-radius: 4px; }
.page-body blockquote { border-left: 3px solid var(--signal); padding: .2em 0 .2em 22px; font-style: italic; margin: 1.4em 0; color: var(--ink-soft); }

.admin-shortcuts { display: flex; gap: 10px; margin: 0 0 24px; flex-wrap: wrap; }

/* Checkbox CGU dans candidature */
.check-row {
  display: flex !important; align-items: flex-start; gap: 10px;
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--sans) !important; font-size: 14px !important;
  color: var(--ink-soft) !important; font-weight: 400 !important;
  margin: 4px 0 18px !important;
}
.check-row input[type=checkbox] {
  width: 18px !important; height: 18px !important; margin-top: 3px !important;
  flex-shrink: 0; accent-color: var(--signal);
}
.check-row a { color: var(--ink); border-bottom: 1px solid var(--signal); }

/* ============================================================
   FALLBACK image carte (sans hero) — gradient + lettre
   ============================================================ */
.card-hero-fallback {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  color: #fff;
  overflow: hidden;
}
.card-hero-fallback::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(214,40,40,.4), transparent 70%);
  filter: blur(20px);
}
.fb-letter {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(64px, 12vw, 110px);
  line-height: 1;
  letter-spacing: -.04em;
  position: relative;
  z-index: 1;
}
.fb-cat {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--signal);
  margin-top: 8px;
  position: relative; z-index: 1;
  font-weight: 600;
}
.fb-politique     { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.fb-societe       { background: linear-gradient(135deg, #2d1b3a, #4a1a4a); }
.fb-economie      { background: linear-gradient(135deg, #1d2d23, #2d4a35); }
.fb-international { background: linear-gradient(135deg, #1a2a3a, #2d4a5a); }
.fb-sciences      { background: linear-gradient(135deg, #2a1a3a, #3a2a5a); }
.fb-culture       { background: linear-gradient(135deg, #3a2a1a, #5a3a2a); }
.fb-sport         { background: linear-gradient(135deg, #1a3a2a, #2a5a3a); }
.fb-opinions      { background: linear-gradient(135deg, #3a1a1a, #5a2a2a); }
.fb-enquetes      { background: linear-gradient(135deg, #1a1a1a, #2a1a3a); }

/* ============================================================
   NEWSLETTER bandeau
   ============================================================ */
.newsletter-band {
  margin: 64px 0 0;
  padding: 48px 44px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) { .newsletter-band { grid-template-columns: 1fr; padding: 36px 28px; } }
.nl-eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .26em; color: var(--signal); margin: 0 0 12px; font-weight: 600;
}
.newsletter-band h3 {
  font-family: var(--serif); font-size: 32px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; margin: 0 0 10px;
}
.nl-sub { color: var(--ink-soft); font-size: 15px; margin: 0; }
.nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-form input {
  flex: 1; min-width: 220px;
  padding: 14px 18px;
  border: 1.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  font-family: var(--sans); font-size: 14px;
  outline: none;
}
.nl-form input:focus { border-color: var(--signal); }

/* ============================================================
   PAGE candidature enrichie
   ============================================================ */
.apply-page { max-width: 1000px; margin: 0 auto; }
.apply-hero { text-align: center; padding: 32px 0 56px; border-bottom: 1px solid var(--rule); }
.apply-eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .26em; color: var(--signal); margin: 0 0 18px; font-weight: 600;
}
.apply-hero h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(40px, 7vw, 84px); letter-spacing: -.03em;
  line-height: .98; margin: 0 0 22px;
}
.apply-hero h1 em { color: var(--signal); font-style: italic; }
.apply-sub {
  font-family: var(--serif); font-size: 21px; line-height: 1.55;
  color: var(--ink-soft); max-width: 700px; margin: 0 auto;
  letter-spacing: -.005em;
}

.apply-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 56px 0;
}
.pillar { padding: 24px 0; border-top: 2px solid var(--ink); }
.pillar-num {
  font-family: var(--serif); font-weight: 900; font-size: 36px;
  color: var(--signal); margin: 0 0 8px; letter-spacing: -.02em; line-height: 1;
}
.pillar h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 8px;
}
.pillar p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.pillar a { color: var(--ink); border-bottom: 1px solid var(--signal); }

.apply-form-wrap {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  padding: 40px;
  border-radius: 6px;
  max-width: 720px;
  margin: 0 auto;
}
.apply-form-wrap h2 {
  font-family: var(--serif); font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 6px;
}
.form-intro { color: var(--ink-soft); margin: 0 0 24px; font-style: italic; font-family: var(--serif); }
.apply-form label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-weight: 600;
}
.apply-form .hint {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-mute); font-size: 12px; margin-left: 6px;
  font-family: var(--sans);
}
.apply-form input, .apply-form textarea {
  display: block; width: 100%; margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--sans); font-size: 15px;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  border-radius: 4px; outline: none;
  transition: border-color .2s var(--ease);
}
.apply-form input:focus, .apply-form textarea:focus { border-color: var(--ink); }
.apply-form textarea { font-family: var(--serif); font-size: 16px; resize: vertical; }

/* ============================================================
   AUTO-SAVE indicator
   ============================================================ */
.autosave-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-left: 8px;
}

/* ============================================================
   ANIMATIONS d'entree
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .lead-story, .aside-story, .card {
    animation: rise .6s var(--ease) both;
  }
  .aside-story:nth-child(2) { animation-delay: .08s; }
  .aside-story:nth-child(3) { animation-delay: .16s; }
  .card:nth-child(2)  { animation-delay: .04s; }
  .card:nth-child(3)  { animation-delay: .08s; }
  .card:nth-child(4)  { animation-delay: .12s; }
  .card:nth-child(5)  { animation-delay: .16s; }
  .card:nth-child(6)  { animation-delay: .20s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}