/* ─────────────────────────────────────────────────────────────
   Les Gardiens de l'Expédition — styles de l'easter egg.
   Palette et typos alignées sur le site : aubergine #452B54,
   vert #1E6B5A, or #C1A263, crème #FAF6EE / #FDFAF3,
   Cormorant Garamond (titres) + Jost (corps).
   ───────────────────────────────────────────────────────────── */

/* ─── Overlays communs ─── */
.gardien-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(35, 20, 42, 0.88);
  opacity: 0; transition: opacity 0.3s ease;
  overflow-y: auto;
}
.gardien-overlay.open { opacity: 1; }
.gardien-overlay.open > * { animation: gardienPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
@keyframes gardienPop {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.gardien-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: #5C5A52; cursor: pointer; padding: 4px;
}
.gardien-close:hover { color: #452B54; }
.gardien-close:focus-visible, .final-fermer:focus-visible,
.galerie-reset:focus-visible, #gardien-fab:focus-visible {
  outline: 2px solid #C1A263; outline-offset: 2px;
}
.gardien-close:focus:not(:focus-visible) { outline: none; }

.gardien-eyebrow {
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase; color: #8A6B31; margin-bottom: 14px;
}

/* ─── Carte de révélation ─── */
.gardien-card {
  position: relative;
  width: min(360px, 92vw);
  background: #FDFAF3;
  border: 1px solid rgba(193, 162, 99, 0.55);
  outline: 1px solid rgba(193, 162, 99, 0.22); outline-offset: 5px;
  padding: 34px 28px 26px;
  text-align: center;
  font-family: 'Jost', sans-serif;
}
.gardien-photo-ring {
  width: 168px; height: 168px; margin: 0 auto 18px;
  border-radius: 50%; padding: 5px;
  border: 1px solid rgba(193, 162, 99, 0.6);
  background: linear-gradient(140deg, rgba(69,43,84,0.12), rgba(30,107,90,0.12));
}
.gardien-photo-ring img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.gardien-nom {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: 34px; color: #452B54; line-height: 1.1; margin-bottom: 6px;
}
.gardien-titre {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 19px; color: #1E6B5A; margin-bottom: 6px;
}
.gardien-note { font-size: 13px; color: #5C5A52; font-style: italic; margin-bottom: 4px; }
.gardien-compteur {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(193, 162, 99, 0.4);
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #8A6B31;
}

/* ─── Toast « déjà trouvé » ─── */
#gardien-toast {
  position: fixed; bottom: 74px; right: 18px; z-index: 210;
  background: rgba(35, 20, 42, 0.94); color: #E4DACB;
  border: 1px solid rgba(193, 162, 99, 0.45);
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.5px;
  padding: 9px 16px; border-radius: 100px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#gardien-toast.show { opacity: 1; transform: translateY(0); }

/* ─── Bouton de progression 🐾 ─── */
#gardien-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 190;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(35, 20, 42, 0.9); border: 1px solid rgba(193, 162, 99, 0.5);
  font-size: 17px; cursor: pointer;
  opacity: 0; transition: opacity 0.6s ease;
}
#gardien-fab.visible { opacity: 0.5; }
#gardien-fab.visible:hover, #gardien-fab.visible:focus-visible { opacity: 1; }

/* ─── Galerie de progression ─── */
.gardien-galerie {
  position: relative;
  width: min(680px, 94vw);
  max-height: 88vh; overflow-y: auto;
  background: #FDFAF3;
  border: 1px solid rgba(193, 162, 99, 0.55);
  outline: 1px solid rgba(193, 162, 99, 0.22); outline-offset: 5px;
  padding: 32px 26px 22px;
  text-align: center;
  font-family: 'Jost', sans-serif;
}
.galerie-compteur {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: 26px; color: #452B54; margin-bottom: 22px;
}
.galerie-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.galerie-cell {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid rgba(193, 162, 99, 0.5);
}
.galerie-cell.found img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-cell-label {
  position: absolute; inset: auto 0 0 0;
  background: rgba(35, 20, 42, 0.82); color: #F6EFE1;
  font-size: 10px; letter-spacing: 0.5px; padding: 5px 6px; line-height: 1.35;
}
.galerie-cell-label span { display: block; color: #C1A263; font-style: italic; }
.galerie-cell.locked {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(69,43,84,0.08), rgba(30,107,90,0.08));
  border-style: dashed; border-color: rgba(91, 58, 102, 0.3);
}
.galerie-cell.locked span {
  font-family: 'Cormorant Garamond', serif; font-size: 30px; color: rgba(91, 58, 102, 0.35);
}
.galerie-reset {
  background: none; border: none; font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 1px; color: #8a8478;
  text-decoration: underline; cursor: pointer; padding: 4px;
}
.galerie-reset:hover { color: #452B54; }

/* ─── Écran final 17/17 ─── */
.gardien-final-overlay {
  background:
    radial-gradient(ellipse at 20% 8%, rgba(74,42,85,0.92) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(23,54,46,0.92) 0%, transparent 55%),
    rgba(30, 17, 36, 0.97);
}
.gardien-final {
  position: relative;
  width: min(860px, 95vw);
  max-height: 92vh; overflow-y: auto;
  border: 1px solid rgba(193, 162, 99, 0.45);
  outline: 1px solid rgba(193, 162, 99, 0.18); outline-offset: 6px;
  padding: clamp(26px, 4vw, 40px) clamp(20px, 4vw, 36px);
  text-align: center;
  font-family: 'Jost', sans-serif;
}
.gardien-final .gardien-close { color: rgba(246, 239, 225, 0.6); }
.gardien-final .gardien-close:hover { color: #C1A263; }
.final-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.final-ornament .line { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, rgba(193,162,99,0.8)); }
.final-ornament .line.right { background: linear-gradient(270deg, transparent, rgba(193,162,99,0.8)); }
.final-ornament .dot { width: 7px; height: 7px; transform: rotate(45deg); background: #C1A263; }
.final-titre {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: clamp(28px, 4.4vw, 40px); color: #F6EFE1; margin: 0 0 10px;
}
.final-soustitre {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #C1A263; margin: 0 0 26px;
}
.final-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-bottom: 26px;
}
.final-cell { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(193, 162, 99, 0.4); }
.final-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.final-cell:hover img { transform: scale(1.06); }
.final-cell-titre {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
  background: rgba(35, 20, 42, 0.78); color: #F6EFE1;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12.5px; line-height: 1.35;
  opacity: 0; transition: opacity 0.3s ease;
}
.final-cell:hover .final-cell-titre { opacity: 1; }
.final-mot {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 20px; color: rgba(246, 239, 225, 0.85); margin: 0 0 20px;
}
.final-fermer {
  padding: 13px 34px; background: linear-gradient(90deg, #452B54, #1E6B5A);
  border: none; color: #F3F2EE; font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}

/* ─── Flammes Konami (clin d'œil Karlach) ─── */
#gardien-flammes {
  position: fixed; inset: 0; z-index: 220; pointer-events: none; overflow: hidden;
}
#gardien-flammes::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42vh;
  background: linear-gradient(0deg, rgba(226, 84, 58, 0.42) 0%, rgba(255, 140, 66, 0.18) 40%, transparent 100%);
  animation: braise 1.6s ease-out forwards;
}
@keyframes braise {
  0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; }
}
#gardien-flammes .flamme {
  position: absolute; bottom: -80px;
  width: 46px; height: 82px;
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 80%, #FFD08A 0%, #FF8C42 34%, #E2543A 62%, rgba(91, 58, 102, 0.85) 88%, transparent 100%);
  filter: blur(2px);
  opacity: 0;
  animation: flammeMonte 1.2s ease-in forwards;
}
@keyframes flammeMonte {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 0.95; }
  70% { opacity: 0.75; transform: translateY(-55vh) scale(1.05) skewX(3deg); }
  100% { opacity: 0; transform: translateY(-105vh) scale(0.5) skewX(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gardien-overlay.open > * { animation: none; }
  #gardien-flammes .flamme { animation-duration: 0.6s; }
  #gardien-flammes::after { animation-duration: 0.8s; }
  .final-cell img, .final-cell:hover img { transition: none; transform: none; }
}