/*
Theme Name: Le Carnet d'Alpine Transports
Theme URI: https://alpine-transports.example
Author: Alpine Transports / Xavier
Author URI: https://alpine-transports.example
Description: Carnet de route nocturne facon touge. Blog cinematique sombre pour la carriere Alpine Transports (Euro Truck Simulator 2) : chroniques de livraison generees + recits hors-livraison. Palette bleu nuit / blanc glacier, accent bleu givre pour les Livraisons, ambre sodium pour les Chroniques.
Version: 1.2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alpine-carnet
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Surfaces nuit */
  --ink:        #080b13;
  --ink-2:      #0c111d;
  --panel:      #111726;
  --panel-2:    #161d2e;
  --line:       rgba(173,201,232,.10);
  --line-2:     rgba(173,201,232,.18);

  /* Texte */
  --paper:      #eaf1fb;
  --paper-soft: #c4cfe0;
  --mute:       #7d8aa3;
  --faint:      #56627b;

  /* Accents */
  --ice:        #4cc4ff;   /* Livraisons */
  --ice-soft:   #a9def5;
  --ice-glow:   rgba(76,196,255,.35);
  --sodium:     #f4a64b;   /* Chroniques */
  --sodium-soft:#ffd49a;
  --danger:     #ff5d5d;
  --ok:         #5ad19a;

  /* Type */
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --serif:   "Spectral", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --hand:    "Kalam", "Comic Sans MS", cursive;
  --encre:   #1f3a6e;

  --wrap: 1180px;
  --measure: 68ch;
  --radius: 4px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}

/* Atmosphere : degrade radial + speed-lines diagonales + grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(76,196,255,.10), transparent 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(244,166,75,.06), transparent 50%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ice);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.6rem}

/* ============================================================
   SPEED-LINE BAND (motif touge reutilisable)
   ============================================================ */
.speedband{
  height:3px;width:100%;
  background:
    repeating-linear-gradient(115deg,
      var(--ice) 0 22px, transparent 22px 30px),
    linear-gradient(90deg, transparent, var(--ice-glow), transparent);
  opacity:.65;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(8,11,19,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.masthead-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.95rem 1.6rem;max-width:var(--wrap);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:.85rem;min-width:0}
.brand-logo img{height:40px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-title{
  font-family:var(--display);font-weight:700;
  font-size:1.45rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);
}
.brand-title b{color:var(--ice);font-weight:700}
.brand-sub{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mute);margin-top:.45rem;
}
.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;font-weight:500;color:var(--paper-soft);
  padding:.5rem .85rem;border-radius:var(--radius);position:relative;
  transition:color .2s, background .2s;
}
.nav a:hover{color:var(--paper);background:rgba(255,255,255,.04)}
.nav a.is-livraisons:hover{color:var(--ice)}
.nav a.is-chroniques:hover{color:var(--sodium)}
.nav-toggle{display:none}

/* ============================================================
   PAGE HEADER (archives)
   ============================================================ */
.pagehead{padding:3.4rem 0 1.4rem}
.pagehead .eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ice);margin-bottom:.7rem;
}
.pagehead.is-chroniques .eyebrow{color:var(--sodium)}
.pagehead h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(2.4rem,6vw,4rem);line-height:.95;
  margin:0;color:var(--paper);
}
.pagehead p{color:var(--mute);max-width:54ch;margin:.9rem 0 0;font-size:1rem}

/* ============================================================
   HERO LEAD (front page)
   ============================================================ */
.hero{
  position:relative;margin:1.4rem 0 3.2rem;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);
  min-height:clamp(360px,52vw,560px);display:flex;align-items:flex-end;
  background:var(--panel);
}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);filter:saturate(1.05) contrast(1.04)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,11,19,.05) 0%, rgba(8,11,19,.55) 55%, rgba(8,11,19,.96) 100%);
}
.hero-body{position:relative;z-index:2;padding:clamp(1.6rem,4vw,3rem);max-width:760px}
.hero-body h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);line-height:.94;letter-spacing:.01em;
  margin:.7rem 0 .6rem;color:#fff;text-wrap:balance;
}
.hero-body h2 a:hover{color:var(--ice-soft)}
.hero-excerpt{color:var(--paper-soft);font-size:1.05rem;max-width:60ch;margin:0}
.hero-meta{display:flex;gap:.9rem;align-items:center;margin-top:1.1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--mute)}

/* ============================================================
   CHIPS / TAGS
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:999px;
  border:1px solid var(--line-2);color:var(--mute);
}
.chip-livraisons{color:var(--ice);border-color:rgba(76,196,255,.4);background:rgba(76,196,255,.07)}
.chip-chroniques{color:var(--sodium);border-color:rgba(244,166,75,.4);background:rgba(244,166,75,.07)}
.chip-archive{color:var(--mute);border-color:var(--line-2);background:rgba(173,201,232,.04)}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* ============================================================
   GRID + CARDS
   ============================================================ */
.section-label{
  display:flex;align-items:center;gap:1rem;margin:2.8rem 0 1.4rem;
}
.section-label h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:1.15rem;font-weight:600;margin:0;color:var(--paper);white-space:nowrap;
}
.section-label .rule{flex:1;height:1px;background:var(--line)}
.section-label .count{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.15em}

.grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:920px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
  opacity:0;transform:translateY(18px);
}
.card.reveal{opacity:1;transform:none}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9), 0 0 0 1px var(--line-2)}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:saturate(1.04)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media .chip{position:absolute;top:.8rem;left:.8rem;z-index:2;
  background:rgba(8,11,19,.72);backdrop-filter:blur(4px)}
.card.is-livraisons:hover{box-shadow:0 18px 50px -22px rgba(0,0,0,.9), 0 0 22px -6px var(--ice-glow)}
.card.is-chroniques:hover{box-shadow:0 18px 50px -22px rgba(0,0,0,.9), 0 0 22px -6px rgba(244,166,75,.3)}
.card-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1}
.card-title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;font-size:1.3rem;line-height:1.04;margin:.1rem 0 .55rem;
  color:var(--paper);text-wrap:balance;
}
.card:hover .card-title{color:#fff}
.card-excerpt{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0 0 .9rem;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:auto}
.card-date{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.card-kpis{display:flex;gap:.85rem;font-family:var(--mono);font-size:.7rem;color:var(--ice-soft)}
.card-kpis b{color:var(--ice);font-weight:600}
.card.is-chroniques .card-kpis b{color:var(--sodium)}
.card-link{position:absolute;inset:0;z-index:3}

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.single-hero{position:relative;margin-bottom:0;
  min-height:clamp(320px,46vw,520px);display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--panel)}
.single-hero .hero-img img{transform:scale(1.03)}
.single-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,11,19,.1), rgba(8,11,19,.55) 50%, rgba(8,11,19,.98) 100%)}
.single-hero .single-head{position:relative;z-index:2;padding:clamp(1.6rem,5vw,3.4rem);max-width:var(--wrap);margin:0 auto;width:100%}
.single-head h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,5.5vw,4rem);line-height:.93;letter-spacing:.01em;
  margin:.8rem 0 .7rem;color:#fff;text-wrap:balance;max-width:20ch;
}
.single-head .meta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--paper-soft);text-transform:uppercase}

/* KPI dashboard strip (Livraisons) */
.kpi-strip{
  max-width:var(--wrap);margin:-1px auto 0;padding:1.4rem 1.6rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
}
.kpi-route{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:1.25rem;color:var(--paper);margin-bottom:1.1rem;
}
.kpi-route .arrow{color:var(--ice);font-family:var(--mono);font-size:1rem}
.kpi-route .cargo{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--mute);border:1px solid var(--line-2);padding:.3rem .6rem;border-radius:999px;text-transform:uppercase}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:600px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--ink-2);padding:1rem 1.1rem}
.kpi .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.45rem}
.kpi .val{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--paper);line-height:1}
.kpi .val.ice{color:var(--ice)}
.kpi .val.ok{color:var(--ok)}
.kpi .val.danger{color:var(--danger)}
.kpi .val small{font-size:.7rem;color:var(--mute);font-weight:400}

/* Corps de l'article */
.article-wrap{max-width:var(--measure);margin:0 auto;padding:3rem 1.6rem 1rem}
.article-body{font-family:var(--serif);font-size:1.16rem;line-height:1.82;color:var(--paper-soft)}
.article-body p{margin:0 0 1.5rem}
.article-body p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;float:left;
  font-size:4.4rem;line-height:.78;padding:.25rem .6rem 0 0;color:var(--ice);
}
.is-chroniques .article-body p:first-of-type::first-letter{color:var(--sodium)}
.article-body h2,.article-body h3{font-family:var(--display);color:var(--paper);
  text-transform:uppercase;letter-spacing:.03em;margin:2.2rem 0 .8rem}
.article-body a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{border-left:2px solid var(--ice);margin:1.8rem 0;
  padding:.3rem 0 .3rem 1.4rem;color:var(--paper);font-style:italic}

.article-foot{max-width:var(--measure);margin:1.5rem auto 0;padding:1.6rem;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;
  font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.12em}
.article-foot a{color:var(--ice-soft)}

/* ============================================================
   MINI-CARTE TRAJET (Leaflet)
   ============================================================ */
.route-map-wrap{max-width:var(--wrap);margin:0 auto;padding:1.4rem 1.6rem 0}
.route-map-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.6rem}
.route-map{height:240px;width:100%;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--ink-2);z-index:0}
.route-map .leaflet-container{background:var(--ink-2)}
.route-map .leaflet-control-attribution{background:rgba(8,11,19,.6);color:var(--faint);font-size:9px}
.route-map .leaflet-control-attribution a{color:var(--mute)}
.route-map .leaflet-tooltip{background:rgba(8,11,19,.85);border:1px solid var(--line-2);
  color:var(--paper);font-family:var(--mono);font-size:.66rem;border-radius:3px;box-shadow:none}
.route-map .leaflet-tooltip::before{display:none}

/* ============================================================
   STATS VIVANTES (intro accueil)
   ============================================================ */
.stats-row{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat-val{font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--ice);line-height:1}
.stat-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ============================================================
   CARTE D'ENSEMBLE (accueil)
   ============================================================ */
.overview-map-section{margin:2.8rem 0 1rem}
.route-map-overview{height:380px}
@media(max-width:600px){.route-map-overview{height:300px}}

/* ============================================================
   FEUILLE DE CARNET (récit single)
   ============================================================ */
.carnet-zone{position:relative;max-width:var(--wrap);margin:2.2rem auto 0;padding:1rem 1.6rem 1rem;display:flex;justify-content:center}
.carnet-sheet{
  position:relative;width:100%;max-width:840px;margin:0;color:#2a2620;
  border-radius:0 6px 6px 0;
  background:
    repeating-linear-gradient(transparent,transparent 38px,rgba(90,110,150,.18) 38px,rgba(90,110,150,.18) 39px),
    linear-gradient(135deg,#f6f0e3 0%,#efe7d4 55%,#e7dcc6 100%);
  transform:rotate(-1.1deg);
  /* bord gauche déchiqueté (encoches de spirale arrachées, grosses & espacées) */
  -webkit-mask:
    radial-gradient(circle 13px at -4px 24px,transparent 13px,#000 13.5px) left top/26px 48px repeat-y,
    linear-gradient(#000,#000) right/calc(100% - 18px) 100% no-repeat;
  mask:
    radial-gradient(circle 13px at -4px 24px,transparent 13px,#000 13.5px) left top/26px 48px repeat-y,
    linear-gradient(#000,#000) right/calc(100% - 18px) 100% no-repeat;
  box-shadow:
    0 2px 5px rgba(0,0,0,.5),
    0 18px 38px -12px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.5) inset;
}
.carnet-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:0 0 40px rgba(0,0,0,.13) inset;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E")}
.carnet-inner{position:relative;z-index:2;padding:2.8rem 3.2rem 3rem 3.6rem}
.carnet-route{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#9a7b4f;margin-bottom:.5rem}
.carnet-date{font-family:var(--hand);font-weight:400;font-size:1.05rem;color:#6b5a3f;margin-bottom:1.3rem;transform:rotate(-.6deg)}
.carnet-body{font-family:var(--hand) !important;font-weight:400;font-size:1.3rem;line-height:1.75;color:var(--encre)}
.carnet-body p{margin:0 0 1rem}
/* neutralise la lettrine héritée de .article-body sur le carnet */
.carnet-body p:first-of-type::first-letter{font-family:var(--hand);float:none;font-size:inherit;line-height:inherit;padding:0;color:var(--encre)}
.carnet-body a{color:#2b4a8a;text-decoration:underline}
.carnet-sign{font-family:var(--hand);font-weight:700;font-size:1.5rem;color:var(--encre);text-align:right;margin-top:1.4rem;transform:rotate(-2deg)}

/* ============================================================
   NAVIGATION PRÉCÉDENT / SUIVANT (single)
   ============================================================ */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0 1rem}
@media(max-width:600px){.post-nav{grid-template-columns:1fr}}
.post-nav-link{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.2rem;
  border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--ink-2));
  transition:border-color .25s,transform .25s}
.post-nav-link:hover{border-color:var(--line-2);transform:translateY(-2px)}
.post-nav-link.next{text-align:right}
.pn-dir{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.pn-title{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;color:var(--paper-soft);line-height:1.1}
.post-nav-link:hover .pn-title{color:var(--paper)}

/* ============================================================
   ARTICLES LIÉS (single)
   ============================================================ */
.related{margin:2.5rem 0 1rem}

/* ============================================================
   404
   ============================================================ */
.error-404{text-align:center;padding:5rem 0 4rem;max-width:60ch;margin:0 auto}
.err-code{font-family:var(--display);font-weight:700;font-size:clamp(5rem,16vw,9rem);line-height:.9;
  color:var(--ice);opacity:.25;letter-spacing:.04em}
.error-404 h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.8rem,5vw,2.8rem);margin:.5rem 0 1rem;color:var(--paper)}
.error-404 p{color:var(--mute);font-size:1.05rem;margin:0 auto 1.8rem}
.err-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.err-btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  padding:.7rem 1.3rem;border-radius:var(--radius);background:var(--ice);color:var(--ink);font-weight:600;transition:transform .2s}
.err-btn:hover{transform:translateY(-2px)}
.err-btn.ghost{background:transparent;color:var(--ice-soft);border:1px solid var(--line-2)}

/* section-label : variante chroniques + lien tout voir */
.section-label.is-chroniques h3{color:var(--sodium)}
.section-label .count a{color:var(--faint);transition:color .2s}
.section-label .count a:hover{color:var(--ice)}
.section-label.is-chroniques .count a:hover{color:var(--sodium)}

/* ============================================================
   PAGINATION
   ============================================================ */
.pager{display:flex;justify-content:center;gap:.6rem;margin:3rem 0 1rem}
.pager a,.pager span{font-family:var(--mono);font-size:.82rem;
  padding:.55rem .9rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--paper-soft)}
.pager .current{background:var(--ice);color:var(--ink);border-color:var(--ice);font-weight:600}
.pager a:hover{border-color:var(--ice);color:var(--ice)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{margin-top:4rem;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(8,11,19,.6))}
.site-foot-inner{max-width:var(--wrap);margin:0 auto;padding:2.6rem 1.6rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.4rem}
.foot-brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-size:1.2rem;color:var(--paper)}
.foot-brand b{color:var(--ice)}
.foot-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--faint);text-align:right}
.foot-archive{color:var(--mute);transition:color .2s}
.foot-archive:hover{color:var(--ice-soft)}

/* ============================================================
   UTILS / EMPTY
   ============================================================ */
.empty{padding:4rem 0;text-align:center;color:var(--mute);font-family:var(--mono);letter-spacing:.1em}

/* Reveal stagger : pilote en JS via .reveal, fallback no-JS */
.no-js .card{opacity:1;transform:none}

/* Responsive nav */
@media(max-width:760px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(8,11,19,.97);border-bottom:1px solid var(--line);
    padding:.6rem 1rem 1.2rem;gap:.2rem;transform:translateY(-130%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:55}
  .nav.open{transform:none}
  .nav a{padding:.85rem 1rem;font-size:1.05rem}
  .nav-toggle{display:flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem}
  .nav-toggle span{width:24px;height:2px;background:var(--paper);transition:.3s}
  .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}