/*
Theme Name: Al-Arabiya Lil-Akhbar
Theme URI: https://www.alarabialilakhbar.com
Author: Al-Arabiya Lil-Akhbar
Description: Thème sur-mesure pour العربية للأخبار — publication marocaine généraliste. Style "magazine vibrant" : identité tricolore turquoise/violet/or assumée comme signature visuelle, hero en diagonale, blocs de mise en avant colorés par rubrique. Conçu pour le RTL arabe.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: al-arabiya
Tags: news, magazine, colorful, rtl, arabic
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --ala-turquoise: #1abc9c;
  --ala-violet:    #8e44ad;
  --ala-gold:      #d4a017;
  --ala-gold-bg:   #f1c40f;
  --ala-navy:      #2c3e50;
  --ala-paper:     #fdfdfd;
  --ala-mist:      #f5f4fa;
  --ala-line:      #e9e6f2;
  --ala-text:      #2c3e50;
  --ala-text-soft: #6b7280;

  --ala-font-head: 'El Messiri', 'Georgia', serif;
  --ala-font-body: 'Rubik', 'Inter', sans-serif;

  --ala-radius: 10px;
  --ala-shadow: 0 10px 26px rgba(44,62,80,.10);
}

.cat-politique   { --cat-color: var(--ala-violet); }
.cat-economie    { --cat-color: var(--ala-turquoise); }
.cat-sport       { --cat-color: var(--ala-gold); }
.cat-culture     { --cat-color: #e74c3c; }
.cat-sante       { --cat-color: #16a085; }
.cat-technologie { --cat-color: #6c3fa0; }
.cat-societe     { --cat-color: #c0392b; }
.cat-lifestyle   { --cat-color: #d63384; }
.cat-varietes    { --cat-color: var(--ala-gold); }
.cat-defaut      { --cat-color: var(--ala-violet); }

/* =========================================================
   1. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--ala-paper); color:var(--ala-text);
  font-family:var(--ala-font-body); font-size:16px; line-height:1.65;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ala-font-head); font-weight:700; line-height:1.25; margin:0 0 .5em; color:var(--ala-navy); }
.container{ max-width:1240px; margin:0 auto; padding:0 20px; }

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

.ala-header{ background:#fff; padding:22px 0 16px; text-align:center; }
.ala-header .site-title{ font-family:var(--ala-font-head); font-size:38px; font-weight:700; margin:0; color:var(--ala-navy); }
.ala-header .site-tagline{ font-size:13.5px; color:var(--ala-text-soft); margin-top:6px; }
.ala-rainbow{ height:5px; background:linear-gradient(90deg, var(--ala-turquoise), var(--ala-violet), var(--ala-gold-bg)); }

.ala-nav{ background:#fff; border-bottom:1px solid var(--ala-line); }
.ala-nav .container{ display:flex; justify-content:center; }
.ala-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; justify-content:center; }
.ala-nav a{ display:block; padding:14px 15px; font-weight:700; font-size:14px; color:var(--ala-navy); border-bottom:3px solid transparent; }
.ala-nav li:nth-child(3n+1) a:hover, .ala-nav li:nth-child(3n+1) a.current{ border-color:var(--ala-turquoise); color:var(--ala-turquoise); }
.ala-nav li:nth-child(3n+2) a:hover, .ala-nav li:nth-child(3n+2) a.current{ border-color:var(--ala-violet); color:var(--ala-violet); }
.ala-nav li:nth-child(3n+3) a:hover, .ala-nav li:nth-child(3n+3) a.current{ border-color:var(--ala-gold); color:var(--ala-gold); }
.ala-menu-toggle{ display:none; }

/* =========================================================
   3. HERO EN DIAGONALE
   ========================================================= */
.ala-hero{ position:relative; overflow:hidden; background:var(--ala-navy); }
.ala-hero-grid{ display:grid; grid-template-columns:1.7fr 1fr; min-height:420px; }
.ala-hero-media{
  position:relative; background:linear-gradient(135deg, var(--ala-violet), var(--ala-navy));
  clip-path: polygon(0 0, 92% 0, 78% 100%, 0% 100%);
  display:flex; align-items:flex-end; padding:40px 90px 40px 40px; background-size:cover; background-position:center;
}
.ala-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%); clip-path:inherit; }
.ala-hero-body{ position:relative; z-index:1; color:#fff; max-width:520px; }
.ala-hero .tag{ display:inline-block; background:var(--ala-gold-bg); color:var(--ala-navy); font-size:12px; font-weight:800; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.ala-hero h1{ color:#fff; font-size:28px; margin:0 0 8px; }
.ala-hero p{ color:rgba(255,255,255,.85); font-size:14.5px; margin:0; }

.ala-hero-list{ background:var(--ala-mist); padding:26px 24px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.ala-hero-list a{ display:flex; gap:10px; align-items:flex-start; }
.ala-hero-list .dot{ width:9px; height:9px; border-radius:50%; background:var(--cat-color, var(--ala-violet)); margin-top:6px; flex:0 0 auto; }
.ala-hero-list h4{ font-size:14px; margin:0; }
.ala-hero-list .tagname{ font-size:11px; font-weight:700; color:var(--cat-color, var(--ala-violet)); text-transform:uppercase; }

/* =========================================================
   4. SPOTLIGHTS COLORÉS
   ========================================================= */
.ala-spotlights{ padding:28px 0 6px; }
.ala-spotlight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ala-spotlight{ border-radius:var(--ala-radius); overflow:hidden; color:#fff; min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; position:relative; }
.ala-spotlight.turquoise{ background:linear-gradient(135deg, #1abc9c, #0e8c73); }
.ala-spotlight.violet{ background:linear-gradient(135deg, #8e44ad, #5e2d73); }
.ala-spotlight.gold{ background:linear-gradient(135deg, #e6b400, #b8880a); }
.ala-spotlight .tag{ font-size:11px; font-weight:800; text-transform:uppercase; opacity:.85; margin-bottom:6px; }
.ala-spotlight h3{ color:#fff; font-size:18px; margin:0; }

/* =========================================================
   5. GRILLE PRINCIPALE + SIDEBAR
   ========================================================= */
.ala-main{ padding:34px 0 54px; }
.ala-columns{ display:grid; grid-template-columns:2.1fr .9fr; gap:30px; align-items:start; }

.ala-section-title{ display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:20px; font-weight:700; color:var(--ala-navy); }
.ala-section-title::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg, var(--ala-turquoise), var(--ala-violet), var(--ala-gold-bg)); opacity:.4; }

.ala-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ala-card{ background:#fff; border-radius:var(--ala-radius); overflow:hidden; box-shadow:var(--ala-shadow); border-top:4px solid var(--cat-color, var(--ala-violet)); }
.ala-card .thumb{ aspect-ratio:16/10; background:var(--cat-color, var(--ala-violet)); opacity:.85; }
.ala-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.ala-card .body{ padding:14px 16px 18px; }
.ala-card .tag{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--ala-violet)); margin-bottom:8px; }
.ala-card h3{ font-size:16.5px; margin:0 0 6px; }
.ala-card .meta{ font-size:12px; color:var(--ala-text-soft); }
.ala-card .excerpt{ font-size:14px; color:var(--ala-text-soft); margin-top:6px; }

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

/* Sidebar */
.ala-widget{ background:#fff; border-radius:var(--ala-radius); box-shadow:var(--ala-shadow); padding:18px; margin-bottom:20px; }
.ala-widget h4{ font-size:14px; text-transform:uppercase; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--ala-gold-bg); }
.ala-trend{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--ala-line); align-items:center; }
.ala-trend:last-child{ border-bottom:none; }
.ala-trend .num{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; flex:0 0 auto;
}
.ala-trend:nth-child(3n+1) .num{ background:var(--ala-turquoise); }
.ala-trend:nth-child(3n+2) .num{ background:var(--ala-violet); }
.ala-trend:nth-child(3n+3) .num{ background:var(--ala-gold); }
.ala-trend h5{ font-size:13px; margin:0; font-weight:700; }
.ala-newsletter{ background:linear-gradient(135deg, var(--ala-turquoise), var(--ala-violet)); color:#fff; }
.ala-newsletter h4{ color:#fff; border-color:var(--ala-gold-bg); }
.ala-newsletter input{ width:100%; padding:9px; border:none; border-radius:6px; margin-bottom:8px; }
.ala-newsletter button{ width:100%; padding:9px; border:none; border-radius:6px; background:var(--ala-gold-bg); color:var(--ala-navy); font-weight:800; cursor:pointer; }
.ala-ad-slot{ background:var(--ala-mist); border:1px dashed #d6d2e6; text-align:center; padding:30px 10px; color:var(--ala-text-soft); font-size:13px; border-radius:var(--ala-radius); }

/* =========================================================
   6. SINGLE ARTICLE
   ========================================================= */
.ala-article{ max-width:820px; margin:0 auto; }
.ala-article .tag{ display:inline-block; background:var(--cat-color, var(--ala-violet)); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:14px; }
.ala-article h1{ font-size:31px; margin-bottom:12px; }
.ala-article .meta{ color:var(--ala-text-soft); font-size:14px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--ala-line); }
.ala-article .featured-img{ border-radius:var(--ala-radius); overflow:hidden; margin-bottom:24px; box-shadow:var(--ala-shadow); border-top:4px solid var(--cat-color, var(--ala-violet)); }
.ala-article .entry-content{ font-size:17.5px; line-height:1.85; }
.ala-article .entry-content p{ margin:0 0 1.3em; }
.ala-article .entry-content blockquote{ border-inline-start:4px solid var(--ala-gold-bg); margin:1.6em 0; padding:.4em 1.4em; font-style:italic; color:var(--ala-violet); font-size:18px; }
.ala-share{ display:flex; gap:10px; margin:28px 0; }
.ala-share a{ padding:8px 16px; border-radius:20px; background:var(--ala-mist); font-weight:700; font-size:13px; }

/* =========================================================
   7. FOOTER
   ========================================================= */
.ala-footer{ background:var(--ala-navy); color:rgba(255,255,255,.75); margin-top:30px; }
.ala-footer .container{ padding:44px 20px 20px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; }
.ala-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid; }
.ala-footer div:nth-child(1) h4{ border-color:var(--ala-turquoise); }
.ala-footer div:nth-child(2) h4{ border-color:var(--ala-violet); }
.ala-footer div:nth-child(3) h4{ border-color:var(--ala-gold-bg); }
.ala-footer div:nth-child(4) h4{ border-color:var(--ala-turquoise); }
.ala-footer ul{ list-style:none; margin:0; padding:0; }
.ala-footer li{ margin-bottom:8px; }
.ala-footer a:hover{ color:var(--ala-gold-bg); }
.ala-footer-bottom{ text-align:center; padding:16px; font-size:13px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.12); }
.ala-footer .nmg-badge{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.ala-footer .nmg-label{ font-size:11px; letter-spacing:.03em; opacity:.55; white-space:nowrap; }
.ala-footer .nmg-badge img{ height:30px; width:auto; display:block; opacity:.85; transition:opacity .2s ease; }
.ala-footer .nmg-badge img:hover{ opacity:1; }

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .ala-hero-grid{ grid-template-columns:1fr; }
  .ala-hero-media{ clip-path:none; padding:40px; }
  .ala-hero-media::after{ clip-path:none; }
  .ala-spotlight-grid{ grid-template-columns:1fr; }
  .ala-columns{ grid-template-columns:1fr; }
  .ala-footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .ala-nav ul{ display:none; }
  .ala-nav.open ul{ display:flex; flex-direction:column; }
  .ala-menu-toggle{ display:block; width:100%; padding:12px; font-weight:700; background:none; border:none; }
  .ala-card-grid{ grid-template-columns:1fr; }
  .ala-footer .container{ grid-template-columns:1fr; }
}

/* --- Finitions migration (logo, CTA pub, pagination) --- */
.ala-header .site-logo img{ max-height:72px; width:auto; height:auto; display:inline-block; }
@media (max-width:600px){ .ala-header .site-logo img{ max-height:48px; } }
.ala-ad-cta{ padding:22px 16px; }
.ala-ad-cta .ala-ad-label{ display:block; font-size:11px; letter-spacing:.5px; color:var(--ala-text-soft); margin-bottom:8px; }
.ala-ad-cta p{ font-size:14px; color:var(--ala-navy); margin:0 0 14px; line-height:1.6; }
.ala-ad-btn{ display:inline-block; background:var(--ala-violet); color:#fff !important; font-weight:700; font-size:13.5px; padding:9px 20px; border-radius:22px; }
.ala-ad-btn:hover{ opacity:.9; }
/* RTL : la diagonale du hero côté liste (gauche), pas côté début du texte */
.ala-hero-media{ clip-path: polygon(8% 0, 100% 0, 100% 100%, 22% 100%); padding:40px 40px 40px 26%; }
@media (max-width:960px){ .ala-hero-media{ clip-path:none; padding:40px; } }
/* Menu mobile : bouton au-dessus, liste pleine largeur */
@media (max-width:960px){
  .ala-nav .container{ flex-direction:column; align-items:stretch; }
  .ala-nav.open ul{ width:100%; gap:0; border-top:1px solid var(--ala-line); }
  .ala-nav.open li{ border-bottom:1px solid var(--ala-line); }
  .ala-nav.open a{ padding:12px 6px; text-align:right; }
  .ala-menu-toggle{ cursor:pointer; color:var(--ala-navy); font-size:15px; }
}
/* .ala-main écrasait le padding latéral du .container */
.container.ala-main{ padding-left:20px; padding-right:20px; }
@media (max-width:600px){ .container.ala-main{ padding-left:16px; padding-right:16px; } }

/* =========================================================
   Blocs devises & météo (v1.1.0)
   ========================================================= */
.ala-src{ font-size:11px; color:var(--ala-text-soft); margin:10px 0 0; }
.ala-src a{ text-decoration:underline; }

/* Bandeau défilant des devises */
.ala-ticker{ background:var(--ala-mist); border-bottom:1px solid var(--ala-line); font-size:13px; }
.ala-ticker .container{ display:flex; align-items:center; gap:12px; height:38px; overflow:hidden; }
.ala-tk-label{ flex:0 0 auto; background:var(--ala-violet); color:#fff; font-weight:700; font-size:12px; padding:4px 12px; border-radius:20px; }
.ala-tk-viewport{ flex:1; overflow:hidden; position:relative; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ala-tk-track{ display:inline-flex; gap:26px; white-space:nowrap; animation:ala-tk 60s linear infinite; direction:ltr; }
.ala-ticker:hover .ala-tk-track{ animation-play-state:paused; }
.ala-tk-item{ color:var(--ala-navy); font-variant-numeric:tabular-nums; }
.ala-tk-item b{ color:var(--ala-turquoise); font-weight:700; margin-inline-end:4px; }
@keyframes ala-tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ala-tk-track{ animation:none; } .ala-tk-viewport{ overflow-x:auto; } }

/* Widget devises */
.ala-fx table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.ala-fx th{ text-align:start; color:var(--ala-text-soft); font-weight:600; font-size:11.5px; padding:0 0 6px; }
.ala-fx th:not(:first-child), .ala-fx td:not(:first-child){ text-align:end; direction:ltr; }
.ala-fx td{ padding:7px 0; border-top:1px dashed var(--ala-line); }
.ala-fx tbody tr:nth-child(3n+1) .ala-fx-code{ background:var(--ala-turquoise); }
.ala-fx tbody tr:nth-child(3n+2) .ala-fx-code{ background:var(--ala-violet); }
.ala-fx tbody tr:nth-child(3n+3) .ala-fx-code{ background:var(--ala-gold); }
.ala-fx-code{ display:inline-block; min-width:36px; text-align:center; color:#fff; font-size:10.5px; font-weight:700; border-radius:4px; padding:1px 4px; margin-inline-end:6px; }
.ala-fx-name{ color:var(--ala-navy); }

/* Bandeau météo */
.ala-weather{ padding:26px 0 4px; }
.ala-weather-row{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.ala-wcard{ flex:0 0 118px; scroll-snap-align:start; background:#fff; border-radius:var(--ala-radius); box-shadow:var(--ala-shadow); padding:14px 10px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; border-top:3px solid var(--ala-turquoise); }
.ala-wcard:nth-child(3n+2){ border-top-color:var(--ala-violet); }
.ala-wcard:nth-child(3n+3){ border-top-color:var(--ala-gold-bg); }
.ala-wcity{ font-weight:700; font-size:14px; color:var(--ala-navy); }
.ala-wtemp{ font-family:var(--ala-font-head); font-size:26px; font-weight:700; color:var(--ala-navy); line-height:1; }
.ala-wdesc{ font-size:12px; color:var(--ala-text-soft); }
.ala-wminmax{ font-size:11.5px; color:var(--ala-text-soft); direction:ltr; font-variant-numeric:tabular-nums; }

/* Widget météo compact */
.ala-wx ul{ list-style:none; margin:0; padding:0; }
.ala-wx li{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-top:1px dashed var(--ala-line); }
.ala-wx li:first-child{ border-top:0; }
.ala-wx .ala-wx-r{ display:flex; align-items:center; gap:6px; }
.ala-wx .ala-wicon{ width:24px; height:24px; }
.ala-wx b{ font-variant-numeric:tabular-nums; min-width:30px; text-align:end; }

/* =========================================================
   v1.2.0 — عاجل, recherche, rubriques, رأي, اقرأ أيضاً, or/pétrole, prière
   ========================================================= */

/* Devises dans la barre du haut (remplace la mention « صحيفة مغربية ») */
.ala-topbar .container{ gap:18px; }
.ala-topbar > .container > span:first-child{ flex:0 0 auto; }
.ala-ticker-top{ flex:1; min-width:0; background:none; border:0; font-size:12px; }
.ala-ticker-top .ala-tk-item{ color:rgba(255,255,255,.85); }
.ala-ticker-top .ala-tk-item b{ color:var(--ala-gold-bg); }

/* Bandeau « آخر الأخبار » */
.ala-breaking{ background:#fff; border-bottom:1px solid var(--ala-line); }
.ala-breaking .container{ display:flex; align-items:center; gap:12px; height:42px; }
.ala-bk-label{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:#c0392b; color:#fff; font-weight:700; font-size:13px; padding:5px 14px; border-radius:20px; }
.ala-bk-dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:ala-pulse 1.4s ease-in-out infinite; }
@keyframes ala-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.ala-bk-viewport{ flex:1; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ala-bk-track{ display:inline-flex; gap:40px; white-space:nowrap; animation:ala-bk 70s linear infinite; }
.ala-breaking:hover .ala-bk-track, .ala-breaking:focus-within .ala-bk-track{ animation-play-state:paused; }
.ala-bk-item{ font-weight:600; font-size:14px; color:var(--ala-navy); position:relative; }
.ala-bk-item::before{ content:"•"; color:var(--ala-violet); margin-inline-end:10px; }
.ala-bk-item:hover{ color:var(--ala-violet); }
@keyframes ala-bk{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
@media (prefers-reduced-motion: reduce){ .ala-bk-track, .ala-bk-dot{ animation:none; } .ala-bk-viewport{ overflow-x:auto; } }

/* Recherche */
.ala-nav .container{ position:relative; }
.ala-search-btn{ position:absolute; inset-inline-end:20px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--ala-navy); cursor:pointer; padding:8px; border-radius:50%; line-height:0; }
.ala-search-btn:hover, .ala-search-btn[aria-expanded="true"]{ background:var(--ala-mist); color:var(--ala-violet); }
.ala-search{ display:flex; gap:8px; }
.ala-nav .ala-search{ position:absolute; top:100%; inset-inline-end:20px; z-index:50; background:#fff; padding:12px; border-radius:var(--ala-radius); box-shadow:var(--ala-shadow); width:min(420px, calc(100vw - 40px)); }
.ala-search[hidden]{ display:none; }
.ala-search input{ flex:1; min-width:0; border:1px solid var(--ala-line); border-radius:8px; padding:9px 12px; font:inherit; }
.ala-search input:focus{ outline:2px solid var(--ala-turquoise); outline-offset:0; }
.ala-search button{ border:0; border-radius:8px; background:var(--ala-violet); color:#fff; font-weight:700; padding:9px 16px; cursor:pointer; font:inherit; }
.ala-search-inline{ margin:0 0 22px; max-width:520px; }

/* Rubriques de l'accueil */
.ala-catblock{ margin-top:36px; }
.ala-catblock-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid var(--ala-line); margin-bottom:16px; }
.ala-catblock-head h2{ margin:0; font-size:20px; padding:0 0 8px; border-bottom:3px solid var(--cat-color, var(--ala-violet)); margin-bottom:-2px; }
.ala-more{ font-size:13px; font-weight:700; color:var(--cat-color, var(--ala-violet)); }
.ala-catblock-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; }
.ala-cb-lead{ display:block; }
.ala-cb-img{ display:block; aspect-ratio:16/10; border-radius:var(--ala-radius); overflow:hidden; background:var(--cat-color, var(--ala-violet)); margin-bottom:10px; }
.ala-cb-img img{ width:100%; height:100%; object-fit:cover; }
.ala-cb-lead h3{ font-size:18px; margin:0 0 6px; }
.ala-cb-lead:hover h3{ color:var(--cat-color, var(--ala-violet)); }
.ala-cb-lead p{ font-size:14px; color:var(--ala-text-soft); margin:0; }
.ala-cb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ala-cb-list a{ display:flex; gap:12px; align-items:flex-start; }
.ala-cb-thumb{ flex:0 0 96px; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--ala-mist); }
.ala-cb-thumb img{ width:100%; height:100%; object-fit:cover; }
.ala-cb-txt strong{ display:block; font-size:14.5px; line-height:1.45; color:var(--ala-navy); }
.ala-cb-txt small{ display:block; font-size:12px; color:var(--ala-text-soft); margin-top:3px; }
.ala-cb-list a:hover strong{ color:var(--cat-color, var(--ala-violet)); }

/* رأي */
.ala-opinions{ margin-top:40px; background:var(--ala-mist); border-radius:var(--ala-radius); padding:20px; --cat-color:var(--ala-violet); }
.ala-op-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ala-op{ background:#fff; border-radius:var(--ala-radius); padding:16px; display:flex; flex-direction:column; gap:8px; border-inline-start:4px solid var(--ala-gold-bg); }
.ala-op-quote{ font-family:var(--ala-font-head); font-size:46px; line-height:.6; color:var(--ala-violet); height:22px; }
.ala-op h3{ font-size:16px; margin:0; }
.ala-op p{ font-size:13.5px; color:var(--ala-text-soft); margin:0; flex:1; }
.ala-op-author{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ala-text-soft); }
.ala-op-author img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }

/* اقرأ أيضاً */
.ala-related{ margin-top:34px; }
.ala-related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ala-related .ala-card h3{ font-size:15px; }

/* Or & pétrole */
.ala-comm-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.ala-tile{ border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:2px; }
.ala-tile span{ font-size:12px; opacity:.85; }
.ala-tile b{ font-size:20px; font-family:var(--ala-font-head); direction:ltr; text-align:end; font-variant-numeric:tabular-nums; }
.ala-tile em{ font-style:normal; font-size:12px; font-weight:700; direction:ltr; text-align:end; }
.ala-tile-gold{ background:linear-gradient(135deg, #f7dc6f, var(--ala-gold-bg)); color:var(--ala-navy); }
.ala-tile-oil{ background:var(--ala-navy); color:#fff; }
.ala-tile-oil em.up{ color:#2ecc71; } .ala-tile-oil em.down{ color:#ff7675; }
.ala-comm table{ width:100%; border-collapse:collapse; font-size:13px; }
.ala-comm td{ padding:6px 0; border-top:1px dashed var(--ala-line); }
.ala-comm td:last-child{ text-align:end; direction:ltr; font-variant-numeric:tabular-nums; font-weight:600; }

/* Prière */
.ala-pr-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.ala-pr-top select{ font:inherit; font-weight:700; color:var(--ala-navy); border:1px solid var(--ala-line); border-radius:8px; padding:6px 8px; background:#fff; }
.ala-hijri{ font-size:12px; color:var(--ala-violet); font-weight:600; }
.ala-pr-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.ala-pr-list[hidden]{ display:none; }
.ala-pr-list li{ background:var(--ala-mist); border-radius:8px; padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.ala-pr-list li span{ font-size:12px; color:var(--ala-text-soft); }
.ala-pr-list li b{ font-size:16px; color:var(--ala-navy); font-variant-numeric:tabular-nums; }
.ala-pr-list li:nth-child(3n+1){ border-top:3px solid var(--ala-turquoise); }
.ala-pr-list li:nth-child(3n+2){ border-top:3px solid var(--ala-violet); }
.ala-pr-list li:nth-child(3n+3){ border-top:3px solid var(--ala-gold-bg); }

/* Responsive */
@media (max-width:960px){
  .ala-search-btn{ top:22px; }
  .ala-nav .ala-search{ inset-inline-end:16px; }
}
@media (max-width:700px){
  .ala-catblock-body{ grid-template-columns:1fr; }
  .ala-op-grid, .ala-related-grid{ grid-template-columns:1fr; }
  .ala-topbar > .container > span:first-child{ display:none; }
  .ala-breaking .container{ height:40px; }
  .ala-bk-label{ font-size:12px; padding:4px 10px; }
}
/* Correctifs v1.2.1 */
.ala-card .thumb{ display:block; overflow:hidden; }
@media (min-width:961px){ .ala-nav ul{ padding-inline:52px; } }