/*
Theme Name: Alunaya Journal
Theme URI: https://journal.alunaya.co
Author: Alunaya
Author URI: https://alunaya.co
Description: Journal d'explor-[he]artist — papier vieilli, encre indigo, typographie machine à écrire, mise en page pensée pour publier un article en quelques minutes.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alunaya-journal
*/

/* ==========================================================================
   0. Variables — papier vieilli, encre, tampon rouge
   ========================================================================== */
:root{
  --c-bg: #e9dfc4;
  --c-bg-alt: #ddd0ab;
  --c-surface: #f3ead1;
  --c-border: rgba(43,29,15,.22);
  --c-ink: #2b1d0f;
  --c-ink-soft: #5a4a33;
  --c-clay: #8c2f1b;
  --c-clay-soft: #b5543a;
  --c-ochre: #b8872a;
  --c-indigo: #33539e;
  --c-indigo-soft: #5b76b8;
  --c-indigo-deep: #28345e;

  --font-display: "Special Elite", "Courier New", monospace;
  --font-sans: "Courier Prime", "Courier New", monospace;
  --wrap: 1120px;
  --wrap-narrow: 720px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--c-bg);
  background-image:
    radial-gradient(rgba(43,29,15,.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:3px 3px, 3px 3px;
  background-position:0 0, 1.5px 1.5px;
  color:var(--c-ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; filter:sepia(.18) contrast(1.02); }
a{ color:var(--c-indigo); text-decoration:underline; text-decoration-style:dotted; text-decoration-thickness:1px; }
a:hover{ color:var(--c-ink); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.25;
  letter-spacing:.01em;
  margin:0 0 .5em;
  color:var(--c-ink);
}
.container{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:var(--wrap-narrow); margin:0 auto; padding:0 24px; }
.screen-reader-text{
  position:absolute; left:-9999px;
}
.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-cat, var(--c-indigo));
  border:1px solid var(--c-cat, var(--c-indigo));
  padding:.25em .6em;
  transform:rotate(-1.2deg);
}
.eyebrow, .eyebrow a{ text-decoration:none; }
.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.7em 1.4em;
  border:1px solid var(--c-ink);
  border-radius:2px;
  color:var(--c-ink);
}
.btn:hover{ background:var(--c-ink); color:var(--c-bg); }

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header{
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
  position:relative;
  z-index:10;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:22px;
  padding-bottom:22px;
}
.site-branding .custom-logo{ max-height:52px; width:auto; }
.site-title{ margin:0; }
.site-title a{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:400;
  color:var(--c-ink);
  letter-spacing:.01em;
  text-decoration:none;
}
.site-description{
  margin:2px 0 0;
  font-size:13px;
  color:var(--c-ink-soft);
  font-style:italic;
}
/* Menu : bouton (3 traits) + panneau déroulant, avec accordéon pour les
   sous-catégories (voir main.js) — même comportement partout où le menu
   apparaît (entête des pages intérieures, ou sous la carte à l'accueil). */
.menu-toggle{
  display:block;
  background:none; border:0; cursor:pointer;
  font-size:22px; line-height:1;
  color:var(--c-ink);
}
.main-navigation{
  display:none;
  position:fixed; top:0; left:0; right:0;
  max-height:85vh; overflow-y:auto;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  box-shadow:0 10px 24px rgba(43,29,15,.2);
  padding:64px 28px 32px;
  z-index:200;
  text-align:left;
}
.main-navigation.is-open{ display:block; }
.nav-close{
  position:fixed; top:14px; right:18px;
  background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--c-ink-soft);
  z-index:201;
}
.nav-close:hover{ color:var(--c-ink); }

#primary-menu{ list-style:none; margin:0; padding:0; max-width:640px; }
#primary-menu li{ margin:.3em 0; }
#primary-menu > li > a{
  font-size:15px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--c-ink);
}
.main-navigation a{ text-decoration:none; }
.main-navigation a:hover{ color:var(--c-indigo); }

.sub-menu{
  display:none;
  list-style:none; margin:.4em 0 .5em 1.2em; padding:0;
}
.sub-menu a{
  font-weight:400; text-transform:none; letter-spacing:0;
  font-size:14px; color:var(--c-ink-soft);
}
li.is-open > .sub-menu{ display:block; }

.submenu-toggle{
  background:none; border:0; cursor:pointer;
  font-size:11px; color:var(--c-ink-soft); margin-left:8px;
  display:inline-block; transition:transform .15s;
}
li.is-open > .submenu-toggle{ transform:rotate(90deg); }

.lang-switcher{ display:flex; gap:10px; margin:24px 0 0; }
.lang-switcher a{
  font-size:12px; font-weight:700; letter-spacing:.05em;
  color:var(--c-ink-soft);
}

/* Sur l'accueil (sous la carte), à partir d'une largeur confortable :
   barre horizontale avec menus déroulants, plutôt que le panneau replié
   utilisé ailleurs sur le site. */
@media (min-width:760px){
  .map-menu .menu-toggle{ display:none; }
  .map-menu .nav-close{ display:none; }
  .map-menu .main-navigation{
    display:block; position:static;
    max-height:none; overflow:visible;
    background:none; border:0; box-shadow:none; padding:0;
  }
  .map-menu #primary-menu{
    display:flex; flex-wrap:wrap; justify-content:center; gap:32px;
    max-width:none;
  }
  .map-menu #primary-menu > li{ position:relative; margin:0; }
  .map-menu #primary-menu > li > .sub-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:16px; min-width:220px;
    background:var(--c-surface); border:1px solid var(--c-border);
    box-shadow:0 8px 20px rgba(43,29,15,.18);
    padding:18px 22px; text-align:left;
    z-index:100;
  }
  .map-menu .lang-switcher{ justify-content:center; margin-top:18px; }
}

/* ==========================================================================
   3. Catégories — couleurs d'accent (assignées automatiquement, voir
      alunaya_journal_category_class() — fonctionne avec n'importe quelle
      catégorie existante, sans liste figée)
   ========================================================================== */
.cat-a{ --c-cat: var(--c-indigo); }
.cat-b{ --c-cat: var(--c-ochre); }
.cat-c{ --c-cat: var(--c-clay); }
.cat-d{ --c-cat: var(--c-indigo-deep); }

/* ==========================================================================
   4. Accueil — hero + grille de sections
   ========================================================================== */
.hero-post{
  padding:56px 0 48px;
  border-bottom:1px solid var(--c-border);
}
.hero-post .container{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}
.hero-post figure{
  margin:0; padding:8px; background:var(--c-surface);
  border:1px solid var(--c-border); box-shadow:0 2px 6px rgba(43,29,15,.15);
  aspect-ratio:4/3;
}
.hero-post img{ width:100%; height:100%; object-fit:cover; filter:sepia(.35) contrast(1.05) brightness(.98); }
.hero-post h1{ font-size:clamp(30px,4vw,46px); margin:.4em 0 .5em; }
.hero-post .excerpt{ color:var(--c-ink-soft); font-size:18px; margin-bottom:1.2em; }
.post-meta{
  font-size:13px; color:var(--c-ink-soft);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.post-meta .sep{ opacity:.5; }

.section-block{ padding:52px 0; border-bottom:1px solid var(--c-border); }
.section-block:last-of-type{ border-bottom:0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:28px; gap:16px; flex-wrap:wrap;
}
.section-head h2{ font-size:24px; margin:0; }
.section-head .view-all{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; border-bottom:1px dotted var(--c-clay); }

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.post-card figure{
  margin:0 0 16px; padding:6px; aspect-ratio:5/4; background:var(--c-surface);
  border:1px solid var(--c-border); box-shadow:0 1px 4px rgba(43,29,15,.12);
}
.post-card img{ width:100%; height:100%; object-fit:cover; filter:sepia(.35) contrast(1.05) brightness(.98); }
.post-card h3{ font-size:20px; margin:.3em 0 .35em; }
.post-card h3 a{ color:var(--c-ink); text-decoration:none; }
.post-card h3 a:hover{ color:var(--c-clay); }
.post-card .excerpt{ font-size:15px; color:var(--c-ink-soft); margin:0 0 .5em; }

@media (max-width:900px){
  .hero-post .container{ grid-template-columns:1fr; gap:24px; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .card-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   5. Liste / archive / recherche
   ========================================================================== */
.page-header{ padding-top:48px; padding-bottom:8px; }
.page-header h1{ font-size:clamp(28px,4vw,40px); }
.page-header .archive-description{ color:var(--c-ink-soft); max-width:60ch; }
.post-list{ padding-top:32px; padding-bottom:60px; }
.post-list .card-grid{ grid-template-columns:repeat(3,1fr); }
.pagination{
  display:flex; gap:10px; justify-content:center; padding:20px 0 60px;
  font-size:14px; font-weight:600;
}
.pagination a, .pagination span{ padding:.5em .9em; border:1px solid var(--c-border); border-radius:2px; text-decoration:none; }
.pagination .current{ background:var(--c-ink); color:var(--c-bg); border-color:var(--c-ink); }

/* ==========================================================================
   6. Article
   ========================================================================== */
.single-article{ padding:52px 0 0; }
.single-article .article-header{ max-width:var(--wrap-narrow); margin:0 auto 32px; text-align:left; }
.single-article h1{ font-size:clamp(32px,5vw,52px); margin:.3em 0 .4em; }
.article-lead{ font-size:19px; color:var(--c-ink-soft); max-width:var(--wrap-narrow); margin:0 auto 32px; }
.article-cover{ margin:0 0 44px; }
.article-cover img{ width:100%; max-height:560px; object-fit:cover; filter:sepia(.35) contrast(1.05) brightness(.98); }
.article-cover figcaption{
  font-size:13px; color:var(--c-ink-soft); margin-top:10px; text-align:center;
}

.article-body{
  max-width:var(--wrap-narrow); margin:0 auto 60px;
  font-size:19px; line-height:1.75;
}
.article-body p{ margin:0 0 1.4em; }
.article-body h2{ font-size:28px; margin:1.6em 0 .6em; }
.article-body h3{ font-size:22px; margin:1.4em 0 .5em; }
.article-body blockquote{
  margin:1.8em 0; padding:.2em 0 .2em 1.2em;
  border-left:3px solid var(--c-clay);
  font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--c-ink);
}
.article-body figure{ margin:2em 0; }
.article-body figcaption{ font-size:13px; color:var(--c-ink-soft); margin-top:8px; }
.article-body img{ filter:sepia(.35) contrast(1.05) brightness(.98); }

/* Photos « patchwork » : chaque image posée comme un polaroïd, légèrement
   inclinée (voir assets/js/article-photos.js, qui ajoute ce cadre). */
.photo-frame{
  position:relative;
  display:block;
  width:100%; max-width:420px;
  margin:2.6em auto;
  background:var(--c-surface);
  padding:10px 10px 32px;
  box-shadow:0 10px 22px rgba(43,29,15,.28);
  transform:rotate(var(--tilt, -2deg));
  cursor:zoom-in;
}
.photo-frame::before{
  content:"";
  position:absolute; top:-11px; left:50%;
  width:72px; height:22px;
  background:rgba(236,228,214,.6);
  border:1px solid rgba(43,29,15,.15);
  transform:translateX(-50%) rotate(-4deg);
}
.photo-frame img{ width:100%; height:auto; display:block; margin:0; }

/* Alignement gauche/droite (choisi sur l'image dans l'éditeur) : le
   texte habille alors la photo au lieu de l'avoir toujours au-dessus. */
.photo-frame.alignleft,
.photo-frame.alignright{
  max-width:260px; margin-top:.3em; margin-bottom:18px;
}
.photo-frame.alignleft{ float:left; margin-right:28px; }
.photo-frame.alignright{ float:right; margin-left:28px; }

@media (max-width:600px){
  .photo-frame.alignleft,
  .photo-frame.alignright{
    float:none; max-width:420px; margin:2.6em auto;
  }
}

/* Pêle-mêle : plusieurs photos posées à la file (sans texte entre elles,
   ou une ancienne galerie [gallery]) sont dispersées ensemble, en pleine
   largeur d'écran plutôt que coincées dans la colonne de texte. */
.photo-cluster{
  width:100vw; position:relative; left:50%;
  margin:2.8em -50vw;
}
.photo-cluster-inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  max-width:880px; margin:0 auto; padding:0 20px;
}
.photo-cluster-inner .photo-frame{
  max-width:260px; margin:14px 8px 26px; cursor:zoom-in;
}
.photo-cluster-inner .photo-frame:nth-child(3n+2){ margin-top:44px; }
.photo-cluster-inner .photo-frame:nth-child(3n){ margin-top:6px; }
@media (max-width:700px){
  .photo-cluster-inner .photo-frame{ max-width:170px; }
}

/* Visionneuse plein écran, ouverte au clic sur une photo. */
.photo-lightbox{
  display:none; position:fixed; inset:0; z-index:1000;
  align-items:center; justify-content:center;
  background:rgba(20,14,8,.92); padding:40px;
}
.photo-lightbox.is-open{ display:flex; }
.photo-lightbox-img{
  width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next{
  position:fixed; background:none; border:0; cursor:pointer;
  color:var(--c-surface); font-family:var(--font-sans);
}
.photo-lightbox-close:hover,
.photo-lightbox-prev:hover,
.photo-lightbox-next:hover{ color:var(--c-ochre); }
.photo-lightbox-close{ top:18px; right:22px; font-size:34px; line-height:1; }
.photo-lightbox-prev,
.photo-lightbox-next{ top:50%; transform:translateY(-50%); font-size:42px; padding:10px 18px; }
.photo-lightbox-prev{ left:6px; }
.photo-lightbox-next{ right:6px; }
@media (max-width:600px){
  .photo-lightbox{ padding:16px; }
  .photo-lightbox-prev,
  .photo-lightbox-next{ font-size:32px; padding:8px 10px; }
}
.article-body ul, .article-body ol{ margin:0 0 1.4em; padding-left:1.4em; list-style:revert; }
.article-body a{
  color:var(--c-clay);
  text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:var(--c-clay-soft); text-decoration-thickness:1px;
}
.article-body a:hover{ color:var(--c-ink); }

.article-tags{
  max-width:var(--wrap-narrow); margin:0 auto 50px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.article-tags a{
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.4em .9em; border:1px solid var(--c-border); border-radius:2px; color:var(--c-ink-soft);
  text-decoration:none;
}
.article-tags a:hover{ color:var(--c-clay); border-color:var(--c-clay); }

.author-box{
  max-width:var(--wrap-narrow); margin:0 auto 60px;
  display:flex; gap:18px; align-items:center;
  padding:24px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px;
}
.author-box img{ width:60px; height:60px; border-radius:50%; object-fit:cover; }
.author-box .author-name{ font-weight:700; margin:0 0 .2em; }
.author-box .author-bio{ font-size:14px; color:var(--c-ink-soft); margin:0; }

.related-posts{ background:var(--c-bg-alt); padding:52px 0 60px; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--c-border); padding:44px 0; margin-top:0; }
.site-footer .container{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.site-footer .footer-links{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.site-footer .footer-nav{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer a{ color:var(--c-ink-soft); font-size:14px; text-decoration:none; }
.social-links{ display:flex; gap:14px; align-items:center; }
.social-links a{ color:var(--c-indigo); display:flex; }
.social-links a:hover{ color:var(--c-ink); }
.site-footer a:hover{ color:var(--c-clay); }
.site-footer .credit{ font-size:13px; color:var(--c-ink-soft); }

/* ==========================================================================
   8b. Carte des lieux (accueil)
   ========================================================================== */
.map-intro{ padding-top:28px; padding-bottom:20px; text-align:center; }
.map-intro .site-title{ margin:0; }
.map-intro .site-title a{ font-size:clamp(28px,4vw,42px); }
.map-intro .site-description{ margin:6px 0 0; font-size:15px; }
.map-legend{
  margin-top:16px;
  font-size:13px; color:var(--c-ink-soft);
  display:flex; justify-content:center; align-items:center; gap:10px;
}
.map-legend .sep{ opacity:.5; }
.map-pin-wrap{ display:flex; align-items:center; justify-content:center; }
.map-pin-dot{
  display:block; width:10px; height:10px; border-radius:50%;
  background:var(--c-ochre); border:2px solid var(--c-surface);
  box-shadow:0 0 0 1px var(--c-ochre);
}
.map-pin-star{
  display:block; font-size:22px; line-height:1; color:var(--c-indigo);
  text-shadow:0 0 0 1px var(--c-surface), 1px 1px 0 var(--c-surface), -1px -1px 0 var(--c-surface);
}

/* carte SVG (D3, projection Equal Earth) — intégrée au fond, pas de cadre */
.map-section{ padding:0 0 20px; max-width:1200px; margin:0 auto; position:relative; }
#alunaya-map{ width:100%; touch-action:none; }
.map-svg{ width:100%; height:auto; display:block; cursor:grab; }
.map-svg:active{ cursor:grabbing; }
.map-sphere{ fill:var(--c-bg-alt); fill-opacity:.5; stroke:var(--c-border); stroke-width:1; }
.map-land{ fill:var(--c-ink-soft); fill-opacity:.55; stroke:var(--c-ink-soft); stroke-opacity:.3; stroke-width:.4; }
.map-marker{ cursor:pointer; }
.map-marker .marker-dot{
  fill:var(--c-ochre); stroke:var(--c-surface); stroke-width:.6;
}
.map-marker .marker-star{
  fill:var(--c-indigo); stroke:var(--c-surface); stroke-width:.6; stroke-linejoin:round;
}
.map-marker:hover .marker-star,
.map-marker:hover .marker-dot{ filter:brightness(1.15); }

.map-preview{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:calc(100% - 40px); max-width:420px;
  background:var(--c-surface); border:1px solid var(--c-border);
  box-shadow:0 4px 16px rgba(43,29,15,.18);
  padding:20px; text-align:left;
}
.map-preview-close{
  position:absolute; top:8px; right:10px; border:0; background:none;
  font-size:20px; line-height:1; color:var(--c-ink-soft); cursor:pointer;
}
.map-preview-close:hover{ color:var(--c-ink); }
.map-preview-media{ margin:0 0 14px; }
.map-preview-media img{ width:100%; max-height:180px; object-fit:cover; }
.map-preview-title{ font-family:var(--font-display); font-size:19px; margin:0 0 .4em; padding-right:20px; }
.map-preview-excerpt{ font-size:14px; color:var(--c-ink-soft); margin:0 0 14px; }
.map-preview-link{ font-size:13px; padding:.5em 1.1em; }

/* le menu de l'accueil (bouton + panneau) est sous la carte ; voir la
   section 2 plus haut pour son style, partagé avec l'entête */
.map-menu{ padding-top:40px; padding-bottom:40px; text-align:center; }

.map-zoom-controls{
  position:absolute; top:10px; right:10px;
  display:flex; flex-direction:column; gap:1px;
}
.map-zoom-controls button{
  width:30px; height:30px; border:1px solid var(--c-border); background:var(--c-surface);
  color:var(--c-ink); font-family:var(--font-sans); font-size:16px; font-weight:700; cursor:pointer;
}
.map-zoom-controls button:hover{ background:var(--c-bg-alt); }

/* ==========================================================================
   8. Divers
   ========================================================================== */
.no-results{ padding-top:60px; padding-bottom:100px; text-align:center; color:var(--c-ink-soft); }
.search-form{ display:flex; gap:10px; max-width:420px; margin:0 auto 20px; }
.search-form input[type="search"]{
  flex:1; padding:.7em 1em; border:1px solid var(--c-border); border-radius:2px;
  font-family:var(--font-sans); font-size:15px; background:var(--c-surface); color:var(--c-ink);
}
.search-form button{
  padding:.7em 1.4em; border-radius:2px; border:1px solid var(--c-ink);
  background:var(--c-ink); color:var(--c-bg); font-weight:700; cursor:pointer;
  text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-sans);
}