/*
Theme Name: Arabic Discography
Theme URI: https://www.arabicdiscography.com
Author: Arabic Discography
Description: Thème sur-mesure repositionnant le site sur sa vocation d'origine : arts, culture et musique arabe. Identité "pochette de disque" : disque vinyle tournant en vedette, grille façon bac à vinyles, notation par étoiles pour les critiques, tags de genre colorés. Conçu pour le RTL arabe.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: arabic-discography
Tags: music, arts, culture, reviews, rtl, arabic
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --ad-plum:      #4a1942;
  --ad-plum-2:    #6a2760;
  --ad-magenta:   #c2185b;
  --ad-gold:      #e8a33d;
  --ad-gold-2:    #f4c874;
  --ad-cream:     #fdf6ec;
  --ad-mist:      #f6e9f2;
  --ad-line:      #ecdce6;
  --ad-ink:       #241220;
  --ad-text-soft: #7a6570;

  --ad-font-display: 'Rakkas', 'Georgia', serif;
  --ad-font-body:    'Harmattan', 'Tahoma', sans-serif;

  --ad-radius: 12px;
  --ad-shadow: 0 12px 28px rgba(74,25,66,.16);
}

.cat-musique-pop  { --cat-color:#c2185b; }
.cat-rap          { --cat-color:#3a3a5c; }
.cat-tarab        { --cat-color:#a8752e; }
.cat-electronique { --cat-color:#1f7a8c; }
.cat-cinema       { --cat-color:#8e3b46; }
.cat-arts-visuels { --cat-color:#6a4c93; }
.cat-litterature  { --cat-color:#3a6b5c; }
.cat-defaut       { --cat-color: var(--ad-magenta); }

/* =========================================================
   1. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; color:var(--ad-ink); font-family:var(--ad-font-body); font-size:16.5px; line-height:1.7;
  background:var(--ad-cream);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ad-font-display); font-weight:400; line-height:1.3; margin:0 0 .3em; color:var(--ad-plum); }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* =========================================================
   2. DISQUE VINYLE (élément signature)
   ========================================================= */
.ad-vinyl{
  border-radius:50%; position:relative; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--ad-ink) 0 8%, transparent 8.5%),
    repeating-radial-gradient(circle at 50% 50%, #17090f 0, #17090f 2px, #2a1420 3px, #2a1420 5px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ad-vinyl::after{
  content:""; position:absolute; inset:36%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--cat-color, var(--ad-magenta)), color-mix(in srgb, var(--cat-color, var(--ad-magenta)) 60%, black));
}
.ad-vinyl.spin{ animation:ad-spin 6s linear infinite; }
@keyframes ad-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Étoiles de notation */
.ad-stars{ color:var(--ad-gold); letter-spacing:1px; font-size:15px; white-space:nowrap; }
.ad-stars .off{ color:var(--ad-line); }

/* =========================================================
   3. HEADER
   ========================================================= */
.ad-topbar{ background:var(--ad-plum); color:rgba(255,255,255,.75); font-size:12.5px; }
.ad-topbar .container{ display:flex; justify-content:space-between; align-items:center; height:32px; }

.ad-header{ padding:26px 0; }
.ad-header .container{ display:flex; align-items:center; gap:20px; }
.ad-header .ad-vinyl{ width:56px; height:56px; }
.ad-header .site-title{ font-size:34px; margin:0; color:var(--ad-plum); }
.ad-header .site-title span{ color:var(--ad-magenta); }
.ad-header .site-tagline{ font-size:13.5px; color:var(--ad-text-soft); margin-top:2px; font-family:var(--ad-font-body); }
.ad-header .search-box{ margin-inline-start:auto; }
.ad-header .search-box input{ border:1px solid var(--ad-line); background:#fff; border-radius:20px; padding:9px 18px; font-size:13px; width:210px; }

.ad-nav{ background:var(--ad-plum); }
.ad-nav .container{ display:flex; justify-content:center; }
.ad-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; }
.ad-nav a{ display:block; padding:13px 16px; color:#fff; font-weight:700; font-size:13.5px; }
.ad-nav a:hover, .ad-nav .current a{ background:var(--ad-magenta); }
.ad-menu-toggle{ display:none; }

/* =========================================================
   4. À LA UNE (featured release)
   ========================================================= */
.ad-main{ padding:34px 0 56px; }
.ad-feature{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0; background:linear-gradient(135deg, var(--ad-plum), var(--ad-plum-2));
  border-radius:var(--ad-radius); overflow:hidden; box-shadow:var(--ad-shadow); margin-bottom:38px; position:relative;
}
.ad-feature .art{ position:relative; aspect-ratio:1/1; background:var(--cat-color, var(--ad-magenta)); }
.ad-feature .art img{ width:100%; height:100%; object-fit:cover; }
.ad-feature .art .ad-vinyl{ position:absolute; width:46%; aspect-ratio:1/1; bottom:-8%; inset-inline-end:-8%; }
.ad-feature .text{ padding:38px; display:flex; flex-direction:column; justify-content:center; color:#fff; }
.ad-feature .tag{ display:inline-block; align-self:flex-start; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--ad-gold-2); background:rgba(255,255,255,.12); padding:5px 12px; border-radius:20px; margin-bottom:14px; }
.ad-feature h1{ color:#fff; font-size:34px; margin:0 0 .3em; }
.ad-feature .artist{ color:var(--ad-gold-2); font-size:15px; margin-bottom:10px; }
.ad-feature .excerpt{ color:rgba(255,255,255,.8); font-size:14.5px; }
.ad-feature .ad-stars{ margin-top:14px; }

/* =========================================================
   5. GRILLE "BAC À VINYLES"
   ========================================================= */
.ad-columns{ display:grid; grid-template-columns:2.2fr .85fr; gap:32px; align-items:start; }

.ad-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.ad-section-head h2{ font-size:22px; margin:0; }
.ad-section-head .count{ font-size:12.5px; color:var(--ad-text-soft); font-family:var(--ad-font-body); }

.ad-crate{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.ad-card{ background:#fff; border-radius:var(--ad-radius); overflow:hidden; box-shadow:var(--ad-shadow); transition:transform .15s ease; }
.ad-card:hover{ transform:translateY(-4px); }
.ad-card .art{ position:relative; aspect-ratio:1/1; background:var(--cat-color, var(--ad-magenta)); overflow:hidden; }
.ad-card .art img{ width:100%; height:100%; object-fit:cover; }
.ad-card .art .ad-vinyl{ position:absolute; width:38%; aspect-ratio:1/1; bottom:-10%; inset-inline-end:-10%; }
.ad-card .body{ padding:14px 16px 18px; }
.ad-card .tag{ display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--ad-magenta)); margin-bottom:6px; }
.ad-card h3{ font-size:16.5px; margin:0 0 3px; }
.ad-card .artist{ font-size:12.5px; color:var(--ad-text-soft); margin-bottom:8px; }

.ad-pagination{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.ad-pagination a, .ad-pagination span{ padding:8px 14px; border:1px solid var(--ad-line); border-radius:20px; background:#fff; font-weight:700; font-size:13.5px; }
.ad-pagination .current{ background:var(--ad-magenta); color:#fff; border-color:var(--ad-magenta); }

/* =========================================================
   6. BARRE LATÉRALE
   ========================================================= */
.ad-widget{ background:#fff; border:1px solid var(--ad-line); border-radius:var(--ad-radius); padding:18px; margin-bottom:20px; box-shadow:var(--ad-shadow); }
.ad-widget h4{ font-size:14px; text-transform:uppercase; border-bottom:2px solid var(--ad-gold); padding-bottom:8px; margin-bottom:14px; font-family:var(--ad-font-body); color:var(--ad-plum); font-weight:700; }

.ad-chart-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--ad-line); align-items:center; }
.ad-chart-item:last-child{ border-bottom:none; }
.ad-chart-item .pos{ font-family:var(--ad-font-display); font-size:26px; color:var(--ad-gold); width:30px; text-align:center; }
.ad-chart-item .move{ font-size:11px; font-weight:700; }
.ad-chart-item .move.up{ color:#2f8f5b; }
.ad-chart-item .move.down{ color:var(--ad-magenta); }
.ad-chart-item h5{ font-size:13px; margin:0; font-weight:700; }
.ad-chart-item .artist{ font-size:11.5px; color:var(--ad-text-soft); }

.ad-newsletter{ background:var(--ad-plum); color:#fff; }
.ad-newsletter h4{ color:#fff; border-color:var(--ad-gold); }
.ad-newsletter input{ width:100%; padding:9px; border:none; border-radius:20px; margin-bottom:8px; box-sizing:border-box; padding-inline-start:14px; }
.ad-newsletter button{ width:100%; padding:9px; border:none; border-radius:20px; background:var(--ad-gold); color:var(--ad-ink); font-weight:800; cursor:pointer; }

.ad-ad-slot{ background:var(--ad-mist); border:1px dashed var(--ad-line); text-align:center; padding:34px 10px; color:var(--ad-text-soft); font-size:12.5px; border-radius:var(--ad-radius); }

/* =========================================================
   7. PAGE ARTICLE / CRITIQUE
   ========================================================= */
.ad-article{ max-width:800px; margin:0 auto; }
.ad-article .head-row{ display:flex; gap:18px; align-items:center; margin-bottom:16px; }
.ad-article .head-row .ad-vinyl{ width:64px; height:64px; }
.ad-article .tag{ display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--ad-magenta)); margin-bottom:6px; }
.ad-article h1{ font-size:32px; margin:0 0 4px; }
.ad-article .artist{ color:var(--ad-text-soft); font-size:14px; }
.ad-article .meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--ad-text-soft); font-size:13px; margin:18px 0 20px; padding-bottom:16px; border-bottom:1px solid var(--ad-line); }
.ad-article .featured-img{ border-radius:var(--ad-radius); overflow:hidden; margin-bottom:24px; box-shadow:var(--ad-shadow); aspect-ratio:16/9; }
.ad-article .entry-content{ font-size:17.5px; line-height:1.9; }
.ad-article .entry-content p{ margin:0 0 1.3em; }
.ad-article .entry-content blockquote{ border-inline-start:4px solid var(--ad-gold); margin:1.6em 0; padding:.4em 1.4em; font-family:var(--ad-font-display); color:var(--ad-plum); font-size:20px; }
.ad-share{ display:flex; gap:10px; margin:28px 0; }
.ad-share a{ padding:8px 16px; border-radius:20px; background:var(--ad-mist); font-weight:700; font-size:13px; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.ad-footer{ background:var(--ad-plum); color:rgba(255,255,255,.75); margin-top:30px; }
.ad-footer .container{ padding:40px 20px 18px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px; }
.ad-footer h4{ color:#fff; font-size:13.5px; text-transform:uppercase; margin-bottom:12px; font-family:var(--ad-font-body); }
.ad-footer ul{ list-style:none; margin:0; padding:0; }
.ad-footer li{ margin-bottom:8px; }
.ad-footer a:hover{ color:var(--ad-gold-2); }
.ad-footer-bottom{ text-align:center; padding:14px; font-size:12.5px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.12); }
.ad-footer .nmg-badge{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.ad-footer .nmg-label{ font-size:11px; letter-spacing:.03em; opacity:.55; white-space:nowrap; }
.ad-footer .nmg-badge img{ height:20px; width:auto; display:block; opacity:.85; transition:opacity .2s ease; }
.ad-footer .nmg-badge img:hover{ opacity:1; }

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .ad-columns{ grid-template-columns:1fr; }
  .ad-feature{ grid-template-columns:1fr; }
  .ad-crate{ grid-template-columns:repeat(2,1fr); }
  .ad-footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .ad-header .search-box{ display:none; }
  .ad-header .site-title{ font-size:26px; }
  .ad-nav ul{ display:none; }
  .ad-nav.open ul{ display:flex; flex-direction:column; }
  .ad-menu-toggle{ display:block; width:100%; padding:12px; color:#fff; background:none; border:none; font-weight:700; }
  .ad-crate{ grid-template-columns:1fr 1fr; gap:14px; }
  .ad-footer .container{ grid-template-columns:1fr; }
}