/* ============================================================================
   SmartMuseum — Magazine M1 homepage stylesheet
   Loaded only on is_front_page() (see inc/sm-home.php).
   Design tokens + editorial components + RTL + CJK. No external dependency
   beyond the Google Fonts already enqueued by the theme.
   ========================================================================== */

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
.sm-home-front{
  /* Couleurs — fond papier chaud, encre presque noire, accent bronze/ocre */
  --sm-bg:#FBF9F4;
  --sm-bg-alt:#F4EFE6;
  --sm-surface:#FFFFFF;
  --sm-ink:#1A1714;
  --sm-ink-soft:#5A5248;
  --sm-line:#E6DECF;
  --sm-accent:#A9824F;        /* bronze/ocre */
  --sm-accent-deep:#8A6636;
  --sm-dark:#1D1B18;
  --sm-on-dark:#F4ECDC;

  /* Typographie */
  --sm-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sm-sans:'Inter', Arial, Helvetica, sans-serif;

  /* Espacements */
  --sm-sp-1:6px; --sm-sp-2:12px; --sm-sp-3:20px; --sm-sp-4:32px;
  --sm-sp-5:48px; --sm-sp-6:72px; --sm-sp-7:104px;

  /* Rayons / bordures / ombres */
  --sm-radius:4px;
  --sm-border:1px solid var(--sm-line);
  --sm-shadow:0 8px 28px rgba(26,23,20,.08);
  --sm-shadow-hover:0 14px 40px rgba(26,23,20,.13);

  /* Largeurs de contenu */
  --sm-maxw:1200px;
  --sm-maxw-text:680px;

  /* Transitions */
  --sm-tr:.18s ease;
}

/* Polices localisées (CJK + arabe) — surchargent les tokens dans le scope home */
html[lang^="zh"] .sm-mag{--sm-serif:'Noto Serif SC', Georgia, serif; --sm-sans:'Noto Sans SC', Arial, sans-serif;}
html[lang^="ja"] .sm-mag{--sm-serif:'Noto Serif JP', Georgia, serif; --sm-sans:'Noto Sans JP', Arial, sans-serif;}
html[lang^="ko"] .sm-mag{--sm-serif:'Noto Serif KR', Georgia, serif; --sm-sans:'Noto Sans KR', Arial, sans-serif;}
html[lang^="ar"] .sm-mag{--sm-serif:'Amiri', 'Times New Roman', serif; --sm-sans:'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;}

/* ─── BASE LAYOUT ────────────────────────────────────────────────────────── */
.sm-mag{
  box-sizing:border-box;
  color:var(--sm-ink);
  background:var(--sm-bg);
  font-family:var(--sm-serif);
  -webkit-font-smoothing:antialiased;
}
.sm-mag *,.sm-mag *::before,.sm-mag *::after{box-sizing:border-box;}
.sm-mag a{color:inherit;}
.sm-mag-container{max-width:var(--sm-maxw);margin:0 auto;padding:0 24px;}

.sm-mag-kicker{
  display:inline-block;
  font-family:var(--sm-sans);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sm-accent-deep);text-decoration:none;margin:0 0 10px;
}
.sm-mag-kicker:hover{color:var(--sm-accent);}

.sm-mag-readlink{
  display:inline-block;font-family:var(--sm-sans);font-size:14px;font-weight:500;
  color:var(--sm-ink);text-decoration:none;border-bottom:1px solid var(--sm-accent);
  padding-bottom:2px;transition:color var(--sm-tr);
}
.sm-mag-readlink:hover{color:var(--sm-accent-deep);}
.sm-ar{display:inline-block;}

/* Images & placeholder (toutes les médias-zones partagent ce comportement) */
.sm-mag-img{display:block;width:100%;height:100%;object-fit:cover;}
.sm-mag-ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,var(--sm-bg-alt),#e7dcc7);
}
.sm-mag-ph>span{
  font-family:var(--sm-serif);font-size:clamp(40px,8vw,96px);font-weight:500;
  color:rgba(138,102,54,.42);line-height:1;
}

/* ─── MASTHEAD (le H1 unique = identité de marque) ───────────────────────── */
.sm-mag-masthead{
  text-align:center;background:var(--sm-bg-alt);border-bottom:var(--sm-border);
  padding:var(--sm-sp-6) 24px var(--sm-sp-5);
}
.sm-mag-masthead__kicker{
  font-family:var(--sm-sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sm-accent-deep);margin:0 0 16px;
}
.sm-mag-masthead__h1{
  font-family:var(--sm-serif);font-weight:500;line-height:1.12;
  font-size:clamp(32px,4.4vw,56px);margin:0 auto 18px;max-width:18ch;color:var(--sm-ink);
}
.sm-mag-masthead__sub{
  font-family:var(--sm-serif);font-size:clamp(17px,1.6vw,21px);line-height:1.6;
  color:var(--sm-ink-soft);max-width:60ch;margin:0 auto var(--sm-sp-4);
}
.sm-mag-ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.sm-mag-cta{
  font-family:var(--sm-sans);font-size:14px;font-weight:500;text-decoration:none;
  padding:11px 22px;border-radius:40px;border:1px solid var(--sm-ink);
  color:var(--sm-ink);background:transparent;transition:background var(--sm-tr),color var(--sm-tr);
}
.sm-mag-cta:hover{background:var(--sm-ink);color:var(--sm-bg);}
.sm-mag-cta--solid{background:var(--sm-ink);color:var(--sm-bg);}
.sm-mag-cta--solid:hover{background:var(--sm-accent-deep);border-color:var(--sm-accent-deep);}

/* M2-A5 — keep the PRIMARY (solid) CTA label visible. The generic
   `.sm-mag a{color:inherit}` (specificity 0,1,1) outranked
   `.sm-mag-cta--solid{color:var(--sm-bg)}` (0,1,0), so the solid button inherited
   the dark --sm-ink colour → black label on the black pill (secondary buttons are
   transparent, so their inherited ink label stayed readable). These selectors
   carry the `.sm-mag a` ancestor (specificity 0,2,1) so they win WITHOUT
   !important, in every interaction state. -webkit-text-fill-color guards Safari. */
.sm-mag a.sm-mag-cta--solid,
.sm-mag a.sm-mag-cta--solid:visited{
  color:var(--sm-bg);
  -webkit-text-fill-color:var(--sm-bg);
}
.sm-mag a.sm-mag-cta--solid:hover,
.sm-mag a.sm-mag-cta--solid:focus-visible,
.sm-mag a.sm-mag-cta--solid:active{
  color:var(--sm-on-dark);
  -webkit-text-fill-color:var(--sm-on-dark);
}
.sm-mag a.sm-mag-cta--solid:focus-visible{
  outline:2px solid var(--sm-accent-deep);
  outline-offset:3px;
}

/* ─── HERO (lead + 2 secondaires) ────────────────────────────────────────── */
.sm-mag-hero{padding:var(--sm-sp-6) 0 var(--sm-sp-4);}
.sm-mag-heroinner{display:grid;grid-template-columns:1.65fr 1fr;gap:var(--sm-sp-5);align-items:start;}

.sm-mag-lead{display:flex;flex-direction:column;}
.sm-mag-lead__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--sm-radius);background:var(--sm-bg-alt);}
.sm-mag-lead__media .sm-mag-img{transition:transform .4s ease;}
.sm-mag-lead:hover .sm-mag-lead__media .sm-mag-img{transform:scale(1.03);}
.sm-mag-lead__body{padding-top:var(--sm-sp-3);}
.sm-mag-lead__eyebrow{
  font-family:var(--sm-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sm-accent);margin:0 0 8px;
}
.sm-mag-lead__title{font-family:var(--sm-serif);font-weight:500;line-height:1.18;
  font-size:clamp(26px,3vw,40px);margin:0 0 14px;}
.sm-mag-lead__title a{text-decoration:none;}
.sm-mag-lead__title a:hover{color:var(--sm-accent-deep);}
.sm-mag-lead__ex{font-family:var(--sm-serif);font-size:19px;line-height:1.6;color:var(--sm-ink-soft);margin:0 0 18px;max-width:60ch;}

.sm-mag-asides{display:flex;flex-direction:column;gap:var(--sm-sp-4);}
.sm-mag-aside{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;}
.sm-mag-aside__media{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--sm-radius);background:var(--sm-bg-alt);}
.sm-mag-aside .sm-mag-kicker{margin-bottom:6px;font-size:11px;}
.sm-mag-aside__title{font-family:var(--sm-serif);font-weight:500;font-size:19px;line-height:1.3;margin:0;}
.sm-mag-aside__title a{text-decoration:none;}
.sm-mag-aside__title a:hover{color:var(--sm-accent-deep);}

/* ─── SECTION GENERICS ───────────────────────────────────────────────────── */
.sm-mag-sec{padding:var(--sm-sp-5) 0;}
.sm-mag-sec--alt{background:var(--sm-bg-alt);border-top:var(--sm-border);border-bottom:var(--sm-border);}
.sm-mag-h2{
  font-family:var(--sm-serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);
  margin:0 0 var(--sm-sp-4);padding-bottom:12px;border-bottom:2px solid var(--sm-accent);
  display:inline-block;
}

/* ─── LATEST STORIES (cartes éditoriales) ────────────────────────────────── */
.sm-mag-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sm-sp-4);}
.sm-mag-story{display:flex;flex-direction:column;}
.sm-mag-story__media{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--sm-radius);background:var(--sm-bg-alt);}
.sm-mag-story__media .sm-mag-img{transition:transform .4s ease;}
.sm-mag-story:hover .sm-mag-story__media .sm-mag-img{transform:scale(1.03);}
.sm-mag-story__body{padding-top:14px;}
.sm-mag-story .sm-mag-kicker{margin-bottom:6px;font-size:11px;}
.sm-mag-story__title{font-family:var(--sm-serif);font-weight:500;font-size:21px;line-height:1.28;margin:0 0 8px;}
.sm-mag-story__title a{text-decoration:none;}
.sm-mag-story__title a:hover{color:var(--sm-accent-deep);}
.sm-mag-story__ex{font-family:var(--sm-serif);font-size:16px;line-height:1.55;color:var(--sm-ink-soft);margin:0;}

/* ─── EXPLORE BY THEME (entrées catégories) ──────────────────────────────── */
.sm-mag-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sm-mag-theme{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-decoration:none;background:var(--sm-surface);border:var(--sm-border);
  border-radius:var(--sm-radius);padding:20px 22px;transition:border-color var(--sm-tr),box-shadow var(--sm-tr),transform var(--sm-tr);
}
.sm-mag-theme:hover{border-color:var(--sm-accent);box-shadow:var(--sm-shadow);transform:translateY(-2px);}
.sm-mag-theme__name{font-family:var(--sm-serif);font-size:20px;font-weight:500;}
.sm-mag-theme__arrow{font-family:var(--sm-sans);color:var(--sm-accent);font-size:18px;}

/* ─── INVITE (visite privée — bloc sombre) ───────────────────────────────── */
.sm-mag-invite{
  background:var(--sm-dark);color:var(--sm-on-dark);border-radius:var(--sm-radius);
  padding:var(--sm-sp-5) var(--sm-sp-4);text-align:center;margin:var(--sm-sp-5) 0;
}
.sm-mag-invite h2{font-family:var(--sm-serif);font-weight:500;color:var(--sm-on-dark);
  font-size:clamp(24px,2.6vw,34px);margin:0 0 14px;border:0;padding:0;}
.sm-mag-invite p{font-family:var(--sm-serif);font-size:18px;line-height:1.6;
  color:rgba(244,236,220,.8);max-width:60ch;margin:0 auto var(--sm-sp-3);}
.sm-mag-invite__cta{
  display:inline-block;font-family:var(--sm-sans);font-size:14px;font-weight:600;
  text-decoration:none;background:var(--sm-accent);color:var(--sm-dark);
  padding:13px 26px;border-radius:40px;transition:background var(--sm-tr);
}
.sm-mag-invite__cta:hover{background:#d8b985;}

/* ─── NEWSLETTER / ENGAGEMENT (visuel seulement, pas de formulaire) ──────── */
.sm-mag-news{text-align:center;padding:var(--sm-sp-5) 0;}
.sm-mag-news__title{font-family:var(--sm-serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);margin:0 0 12px;}
.sm-mag-news__body{font-family:var(--sm-serif);font-size:18px;line-height:1.6;color:var(--sm-ink-soft);max-width:56ch;margin:0 auto var(--sm-sp-3);}
.sm-mag-news__cta{
  display:inline-block;font-family:var(--sm-sans);font-size:14px;font-weight:500;
  text-decoration:none;border:1px solid var(--sm-ink);color:var(--sm-ink);
  padding:12px 26px;border-radius:40px;transition:background var(--sm-tr),color var(--sm-tr);
}
.sm-mag-news__cta:hover{background:var(--sm-ink);color:var(--sm-bg);}

/* ─── ÉTAT VIDE ──────────────────────────────────────────────────────────── */
.sm-mag-empty{
  text-align:center;font-family:var(--sm-serif);font-size:20px;color:var(--sm-ink-soft);
  padding:var(--sm-sp-6) 24px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .sm-mag-stories,.sm-mag-themes{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:880px){
  .sm-mag-heroinner{grid-template-columns:1fr;gap:var(--sm-sp-4);}
  .sm-mag-asides{flex-direction:row;flex-wrap:wrap;}
  .sm-mag-aside{flex:1 1 260px;}
}
@media (max-width:560px){
  .sm-mag-container{padding:0 18px;}
  .sm-mag-masthead{padding:var(--sm-sp-5) 18px var(--sm-sp-4);}
  .sm-mag-stories,.sm-mag-themes{grid-template-columns:1fr;}
  .sm-mag-asides{flex-direction:column;}
  .sm-mag-aside{grid-template-columns:84px 1fr;}
}

/* ─── RTL (arabe) ────────────────────────────────────────────────────────── */
[dir="rtl"] .sm-mag,.rtl .sm-mag{text-align:right;}
[dir="rtl"] .sm-mag-masthead,.rtl .sm-mag-masthead,
[dir="rtl"] .sm-mag-invite,.rtl .sm-mag-invite,
[dir="rtl"] .sm-mag-news,.rtl .sm-mag-news{text-align:center;}
[dir="rtl"] .sm-ar,.rtl .sm-ar{transform:scaleX(-1);}
[dir="rtl"] .sm-mag-h2,.rtl .sm-mag-h2{border-bottom-color:var(--sm-accent);}
[dir="rtl"] .sm-mag-readlink,.rtl .sm-mag-readlink{border-bottom-color:var(--sm-accent);}

/* ─── ACCESSIBILITÉ ──────────────────────────────────────────────────────── */
.sm-mag a:focus-visible{outline:2px solid var(--sm-accent-deep);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){
  .sm-mag *,.sm-mag *::before,.sm-mag *::after{transition:none !important;}
  .sm-mag-lead:hover .sm-mag-img,
  .sm-mag-story:hover .sm-mag-img,
  .sm-mag-theme:hover{transform:none !important;}
}