/* =====================================================================
   ORDRE DES HOSPITALIERS — jetons de style
   Palette : parchemin vieilli, encre, rouge hospitalier, bronze, pierre
   ===================================================================== */
:root{
  --parchment: #EAE0C7;
  --parchment-2: #DCCFA8;
  --parchment-3: #F3ECD8;
  --ink: #241F18;
  --ink-soft: #423A2E;
  --red: #7C1D2C;
  --red-dark: #4E1220;
  --bronze: #A9834A;
  --bronze-light: #CBAA6C;
  --stone: #4E5B63;
  --stone-dark: #313B41;
  --cross-white: #F5F1E4;

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-mono: 'Courier New', Courier, monospace;

  --shadow-deep: 0 18px 40px rgba(20,15,8,.35);

  /* --- Palette "gazette" du site principal (indépendante de l'écran de verrou) --- */
  --gaz-bg: #ffffff;
  --gaz-bg-soft: #f6f5f2;
  --gaz-ink: #191919;
  --gaz-ink-soft: #4a4a4a;
  --gaz-muted: #8a8a86;
  --gaz-red: #c2261f;
  --gaz-red-dark: #8f1a15;
  --gaz-line: #191919;
  --gaz-border: rgba(0,0,0,.14);
  --font-headline: Georgia, 'Times New Roman', serif;
  --font-sans: Helvetica, Arial, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--stone-dark);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3{ font-family: var(--font-display); margin: 0; }
img{ max-width: 100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===================== ÉCRAN DE VERROU ===================== */
#lock-screen[hidden]{ display:none !important; }
#lock-screen{
  position: fixed;
  inset: 0;
  z-index: 200;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6vh 5vw;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(169,131,74,.18), transparent 55%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--stone-dark), #201a15 70%);
  transition: opacity 1.1s ease;
}
#lock-screen.dismiss{
  opacity: 0;
  pointer-events: none;
}

.lock-wrap{
  width: 100%;
  max-width: 720px;
  text-align: center;
}
.lock-eyebrow{
  font-family: var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--bronze-light);
  margin: 0 0 .6rem;
}
.lock-title{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--cross-white);
  font-variant: small-caps;
  letter-spacing: .04em;
}
.lock-sub{
  color: rgba(245,241,228,.6);
  font-size: .95rem;
  margin: .6rem 0 2.6rem;
}

/* --- Étiquettes (les 7 cases) --- */
.tag-rail{
  display:flex;
  justify-content:center;
  gap: clamp(8px, 2vw, 20px);
  margin-bottom: 2.6rem;
  flex-wrap: wrap;
  perspective: 900px;
}
.tag{
  position: relative;
  width: clamp(56px, 11.5vw, 86px);
  height: clamp(92px, 18.5vw, 142px);
  background: linear-gradient(160deg, var(--parchment-3), var(--parchment-2));
  border-radius: 6px 6px 10px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(36,31,24,.25);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom: 12px;
  transform-origin: top center;
  transition: transform .25s ease;
  overflow: visible;
}
.tag::before{ /* œillet */
  content:"";
  position:absolute;
  top: 12px; left:50%;
  width: 11px; height:11px;
  transform: translateX(-50%);
  background: var(--stone-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bronze);
}
.tag::after{ /* ruban */
  content:"";
  position:absolute;
  top: -20px; left:50%;
  width: 3px; height:22px;
  background: var(--red);
  transform: translateX(-50%);
}
.tag .digit{
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  color: var(--ink);
  opacity: 0;
  transform: scale(.4);
}
.tag.filled .digit{
  animation: stamp .55s cubic-bezier(.16,1.6,.3,1) forwards;
  will-change: transform, opacity;
}
.tag.filled::before{ box-shadow: 0 0 0 2px var(--red); }
@keyframes stamp{
  0%{ opacity:0; transform: scale(4) rotate(-35deg) translateY(-14px); }
  45%{ opacity:1; transform: scale(.78) rotate(8deg) translateY(2px); }
  65%{ transform: scale(1.12) rotate(-4deg); }
  82%{ transform: scale(.94) rotate(2deg); }
  100%{ opacity:1; transform: scale(1) rotate(0deg) translateY(0); }
}
.tag.stamp-flash{ animation: tagJolt .3s ease; }
@keyframes tagJolt{
  0%{ transform: translateY(0) rotate(0); }
  25%{ transform: translateY(-3px) rotate(-2.5deg); }
  55%{ transform: translateY(1px) rotate(2deg); }
  100%{ transform: translateY(0) rotate(0); }
}

/* Onde de choc au moment où le chiffre s'imprime */
.burst{
  position:absolute;
  left:50%; bottom: 34px;
  width: 14px; height:14px;
  margin-left:-7px;
  border: 2px solid var(--red);
  border-radius: 50%;
  pointer-events:none;
  z-index: 3;
  animation: burstExpand .55s ease-out forwards;
  will-change: transform, opacity;
}
.burst.burst-2{ border-color: var(--bronze-light); animation-delay: .07s; }
@keyframes burstExpand{
  0%{ transform: scale(.3); opacity: .9; }
  100%{ transform: scale(6.5); opacity: 0; }
}

/* Étincelles autour du chiffre */
.spark{
  position:absolute;
  left:50%; bottom: 40px;
  width: 4px; height:4px;
  background: var(--bronze-light);
  border-radius: 50%;
  pointer-events:none;
  z-index: 3;
  animation: sparkFly .5s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes sparkFly{
  0%{ transform: translate(-50%,0) scale(1); opacity: 1; }
  100%{ transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

.tag-rail.shake{ animation: shake .5s ease; }

@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(4px); }
}

.tag.unlocking{
  animation: swingOpen .6s ease forwards;
}
@keyframes swingOpen{
  to{ transform: rotateX(95deg) translateY(6px); opacity:0; }
}

/* --- Clavier --- */
.keypad{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  max-width: 380px;
  margin: 0 auto;
}
.key{
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 30%, var(--bronze-light), var(--bronze) 70%);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--red-dark), 0 8px 14px rgba(0,0,0,.4);
  transition: transform .08s ease, box-shadow .08s ease;
}
.key:active{
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--red-dark), 0 3px 8px rgba(0,0,0,.4);
}
.key:focus-visible{ outline: 3px solid var(--cross-white); outline-offset: 3px; }

.lock-actions{ margin-top: 1.4rem; }
.ghost-btn{
  background: transparent;
  border: 1px solid rgba(245,241,228,.35);
  color: rgba(245,241,228,.75);
  padding: .5rem 1.3rem;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .06em;
}
.ghost-btn:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }
.ghost-btn:focus-visible{ outline: 3px solid var(--cross-white); outline-offset: 2px; }

.lock-hint{
  margin-top: 1rem;
  min-height: 1.4em;
  font-size: .85rem;
  color: var(--red);
  font-weight: 700;
}
.lock-hint.ok{ color: #8fbf7a; }

/* ===================== SITE PRINCIPAL — style "gazette" ===================== */
#main-site{
  background: var(--gaz-bg);
  color: var(--gaz-ink);
  min-height: 100vh;
  animation: reveal .8s ease;
  font-family: var(--font-body);
}
@keyframes reveal{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* --- Ex-libris / bandeau --- */
.gaz-masthead{
  padding: 1.6rem clamp(1rem, 5vw, 3rem) 0;
  max-width: 1220px;
  margin: 0 auto;
}
.gaz-masthead-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1.4rem;
  text-align:center;
  flex-wrap: wrap;
}
.gaz-badge{
  width: 58px; height:58px;
  border: 2px solid var(--gaz-ink);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.gaz-badge svg{ width: 30px; height:30px; color: var(--gaz-red); }
.gaz-title-block{ max-width: 640px; }
.gaz-title{
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.8rem, 5.4vw, 3.1rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}
.gaz-title .accent{ color: var(--gaz-red); }
.gaz-tagline{
  font-style: italic;
  color: var(--gaz-ink-soft);
  font-size: clamp(.85rem, 1.6vw, 1rem);
  margin: .5rem 0 0;
}
.gaz-rule{
  margin-top: 1.4rem;
  border-top: 3px solid var(--gaz-line);
  border-bottom: 1px solid var(--gaz-line);
  height: 4px;
}

.site-nav{
  display:flex;
  gap: clamp(.9rem, 2.4vw, 1.8rem);
  justify-content:center;
  flex-wrap: wrap;
  padding: .85rem clamp(1rem, 5vw, 3rem);
  max-width: 1220px;
  margin: 0 auto;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gaz-bg);
  border-bottom: 1px solid var(--gaz-border);
}
.nav-link{
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gaz-ink-soft);
  font-family: var(--font-sans);
  padding: .3rem .1rem;
  font-size: .92rem;
  transition: color .15s ease, border-color .15s ease;
}
.nav-link:hover{ color: var(--gaz-ink); }
.nav-link.active{ color: var(--gaz-ink); border-bottom-color: var(--gaz-red); font-weight: 700; }
.nav-link.nav-admin{
  border: 1px solid var(--gaz-border);
  padding: .3rem .8rem;
  border-radius: 2px;
}
.nav-link.nav-admin.active{ border-color: var(--gaz-red); }
.nav-link:focus-visible{ outline: 2px solid var(--gaz-red); outline-offset: 2px; }

#view-root{
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 5vw, 3rem) 4rem;
  max-width: 1220px;
  margin: 0 auto;
  border-top: 1px solid var(--gaz-border);
}

/* --- Mise en page à deux colonnes (accueil) --- */
.gaz-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items:start;
}
@media (max-width: 860px){ .gaz-layout{ grid-template-columns: 1fr; } }

/* --- Article vedette --- */
.gaz-feature{ margin-bottom: 2.6rem; }
.gaz-illustration{
  display:block;
  width: 100%;
  height: 170px;
  border: 1px solid var(--gaz-border);
  margin-bottom: 1rem;
  background-color: var(--gaz-bg-soft);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.card-eyebrow{
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gaz-red);
  margin: 0 0 .4rem;
}
.gaz-feature h2{
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 .7rem;
}
.gaz-feature .dropcap{
  color: var(--gaz-ink-soft);
  line-height: 1.6;
  font-size: 1.02rem;
}
.gaz-feature .dropcap::first-letter{
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 3.2em;
  float: left;
  line-height: .82;
  padding: .05em .08em 0 0;
  color: var(--gaz-red);
}
.card-meta{
  margin-top: .8rem;
  font-family: var(--font-sans);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gaz-muted);
}

/* --- Grille d'articles --- */
.section-heading{
  display:flex;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--gaz-border);
  padding-bottom: .6rem;
}
.section-heading h2{
  font-family: var(--font-headline);
  font-size: 1.3rem;
  margin:0;
}
.section-heading .count{
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--gaz-muted);
  text-transform: uppercase;
}

.article-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.6rem 1.4rem;
  margin-bottom: 2.6rem;
}
.article-card{
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  transition: opacity .15s ease;
}
.article-card:hover{ opacity: .82; }
.article-card:focus-visible{ outline: 2px solid var(--gaz-red); outline-offset: 3px; }
.article-card .gaz-illustration{ height: 130px; margin-bottom: .7rem; }
.article-card h3{
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 .4rem;
  color: var(--gaz-ink);
}
.article-card p{ color: var(--gaz-ink-soft); font-size: .88rem; line-height: 1.55; margin:0; }

.empty-state{
  padding: 2.4rem;
  border: 1px dashed var(--gaz-border);
  text-align: center;
  color: var(--gaz-muted);
}

/* --- Colonne latérale --- */
.gaz-aside-box{
  border: 1px solid var(--gaz-border);
  padding: 1.2rem;
  margin-bottom: 1.6rem;
  background: var(--gaz-bg-soft);
}
.gaz-aside-box .card-eyebrow{ margin-bottom: .5rem; }
.gaz-aside-box h3{
  font-family: var(--font-headline);
  font-size: 1.15rem;
  margin: 0 0 .7rem;
  line-height: 1.3;
}
.gaz-aside-box .gaz-illustration{ height: 150px; }
.gaz-aside-box p{ color: var(--gaz-ink-soft); font-size: .88rem; line-height: 1.55; margin: .8rem 0 1rem; }
.gaz-aside-tag{
  display:inline-block;
  font-family: var(--font-sans);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gaz-muted);
  border: 1px solid var(--gaz-border);
  padding: .15rem .5rem;
  margin-bottom: .7rem;
}
.gaz-aside-btn{
  display:inline-block;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gaz-ink);
  background: transparent;
  border: 1px solid var(--gaz-ink);
  padding: .5rem 1rem;
  transition: background .15s ease, color .15s ease;
}
.gaz-aside-btn:hover{ background: var(--gaz-ink); color: var(--gaz-bg); }

/* --- Grands Maîtres : liste chronologique --- */
.masters-list{ list-style:none; margin:0; padding:0; }
.masters-item{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--gaz-border);
}
.masters-item .num{
  font-family: var(--font-headline);
  font-size: 1.5rem;
  color: var(--gaz-red);
  text-align:right;
}
.masters-item h3{ font-family: var(--font-headline); font-size: 1.05rem; margin-bottom: .25rem; }
.masters-item .years{ font-family: var(--font-sans); font-size: .74rem; letter-spacing:.04em; text-transform:uppercase; color: var(--gaz-muted); }
.masters-item p{ margin: .4rem 0 0; color: var(--gaz-ink-soft); font-size: .9rem; line-height: 1.55; }

/* --- Modale article --- */
.modal-backdrop[hidden]{ display:none !important; }
.modal-backdrop{
  position: fixed; inset:0;
  background: rgba(10,10,10,.6);
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
  z-index: 50;
}
.modal-sheet{
  position:relative;
  background: var(--gaz-bg);
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow-deep);
}
.modal-close{
  position:absolute; top: .8rem; right: .8rem;
  background: var(--gaz-ink); color: var(--gaz-bg);
  border:none; width: 32px; height:32px; border-radius:50%;
  font-size: .9rem;
}
.modal-close:focus-visible{ outline: 2px solid var(--gaz-red); outline-offset: 2px; }
#modal-body .card-eyebrow{ margin-bottom: .3rem; }
#modal-body h2{ font-family: var(--font-headline); font-size: 1.5rem; margin-bottom: .3rem; }
#modal-body .card-meta{ margin-bottom: 1.2rem; }
#modal-body .content{ color: var(--gaz-ink-soft); line-height: 1.75; white-space: pre-line; }
#modal-body .content::first-letter{
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 3em;
  float: left;
  line-height: .8;
  padding: .05em .08em 0 0;
  color: var(--gaz-red);
}

.research-box{
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--gaz-border);
}
.research-box .content::first-letter{ all: unset; }
.research-empty{
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--gaz-muted);
  font-style: italic;
}
.research-box textarea{
  width: 100%;
  min-height: 110px;
  padding: .7rem .8rem;
  border: 1px solid var(--gaz-border);
  background: var(--gaz-bg-soft);
  font-family: var(--font-body);
  font-size: .92rem;
  resize: vertical;
  margin-bottom: .7rem;
}

/* --- Admin --- */
.admin-gate{
  max-width: 420px;
  margin: 0 auto;
  text-align:center;
  padding: 2.4rem 1.5rem;
  background: var(--gaz-bg-soft);
  border: 1px solid var(--gaz-border);
}
.admin-gate input{
  width:100%;
  padding: .7rem .9rem;
  font-family: var(--font-sans);
  border: 1px solid var(--gaz-border);
  margin: 1rem 0;
  background: var(--gaz-bg);
}
.primary-btn{
  background: var(--gaz-red);
  color: #fff;
  border: none;
  padding: .7rem 1.4rem;
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .15s ease;
}
.primary-btn:hover{ background: var(--gaz-red-dark); }
.primary-btn:focus-visible{ outline: 2px solid var(--gaz-ink); outline-offset: 2px; }
.admin-note{ font-size: .78rem; color: var(--gaz-muted); margin-top: .6rem; font-family: var(--font-sans); }

.admin-panel h2{ font-family: var(--font-headline); margin-bottom: 1.2rem; }
.admin-form{
  display:grid;
  gap: .9rem;
  max-width: 620px;
  background: var(--gaz-bg-soft);
  padding: 1.6rem;
  border: 1px solid var(--gaz-border);
  margin-bottom: 2rem;
}
.admin-form label{
  display:block;
  font-size: .72rem;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gaz-ink-soft);
  margin-bottom: .3rem;
}
.admin-form input, .admin-form select, .admin-form textarea{
  width:100%;
  padding: .6rem .7rem;
  border: 1px solid var(--gaz-border);
  background: var(--gaz-bg);
  font-family: var(--font-body);
  font-size: .92rem;
}
.admin-form textarea{ min-height: 140px; resize: vertical; }
.admin-form .row-actions{ display:flex; gap: .8rem; align-items:center; }

.admin-list{ list-style:none; margin:0; padding:0; }
.admin-list li{
  display:flex; justify-content:space-between; align-items:center; gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--gaz-border);
}
.admin-list .meta{ font-size: .8rem; color: var(--gaz-muted); font-family: var(--font-sans); }
.admin-list .title{ font-weight: 700; font-family: var(--font-headline); }
.danger-btn{
  background: transparent;
  border: 1px solid var(--gaz-red);
  color: var(--gaz-red);
  padding: .35rem .8rem;
  font-family: var(--font-sans);
  font-size: .78rem;
}
.danger-btn:hover{ background: var(--gaz-red); color: #fff; }
.admin-cancel-btn{
  background: transparent;
  border: 1px solid var(--gaz-border);
  color: var(--gaz-ink-soft);
  padding: .35rem .9rem;
  font-family: var(--font-sans);
  font-size: .78rem;
}
.admin-cancel-btn:hover{ border-color: var(--gaz-ink); color: var(--gaz-ink); }

/* --- Repères de catégorie dans l'admin --- */
.editing-banner{
  background: var(--gaz-bg-soft);
  border: 1px solid var(--gaz-border);
  padding: .7rem 1rem;
  margin: -.6rem 0 1.2rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--gaz-ink-soft);
}
.editing-badge{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 999px;
  color: #fff;
  margin-left: .3rem;
}
.editing-badge-histoire{ background: #20201d; }
.editing-badge-organisation{ background: var(--gaz-red); }
.editing-badge-maitres{ background: #a9834a; }
.editing-badge-antimaitres{ background: #8a8a86; }
.editing-badge-monflanquin{ background: #4a7a6a; }
.editing-badge-breuil{ background: #2e6b56; }
.editing-badge-commandeursbreuil{ background: #6b5a2e; }

.admin-group-heading{
  font-family: var(--font-headline);
  font-size: 1.05rem;
  margin: 1.6rem 0 .3rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--gaz-border);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-list-controls{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.admin-list-controls input, .admin-list-controls select{
  padding: .5rem .7rem;
  border: 1px solid var(--gaz-border);
  background: var(--gaz-bg);
  font-family: var(--font-sans);
  font-size: .85rem;
}
.admin-list-controls input{ flex: 1; min-width: 200px; }

.site-footer{
  text-align:center;
  padding: 1.4rem;
  font-family: var(--font-sans);
  font-size: .76rem;
  color: var(--gaz-muted);
  border-top: 1px solid var(--gaz-border);
}

/* ===================== Visionneuse plein écran (lightbox) ===================== */
.lightbox-backdrop[hidden]{ display:none !important; }
.lightbox-backdrop{
  position: fixed; inset: 0;
  background: rgba(8,8,8,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
  z-index: 300;
  cursor: zoom-out;
}
.lightbox-backdrop img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: default;
}
.lightbox-close{
  position: fixed; top: 1rem; right: 1.2rem;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  z-index: 301;
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }

/* --- Élément cliquable pour ouvrir la visionneuse --- */
.zoomable{ cursor: zoom-in; }

/* --- Galerie photo dans la fiche article --- */
.gallery-box{
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--gaz-border);
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .5rem;
  margin-top: .7rem;
}
.gallery-thumb{
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--gaz-border);
  cursor: zoom-in;
  transition: opacity .15s ease;
}
.gallery-thumb:hover{ opacity: .8; }

/* --- Sélecteur de photos dans l'admin --- */
.admin-photo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .5rem;
  margin-top: .7rem;
}
.admin-photo-item{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--gaz-border);
}
.admin-photo-item button{
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gaz-red);
  color: #fff;
  border: 2px solid var(--gaz-bg);
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
}