:root{--bg:#fafafa;--fg:#222;--muted:#666;--brand:#8a2be2;--card:#fff;--border:#eaeaea}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Kufi Arabic","Amiri",sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:16px}
.nav{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);z-index:10}
.nav .container{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand .logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 45deg,var(--brand),#f6a,#ffda79)}
.nav .links{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card)}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.hero{padding:48px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
footer{margin-top:40px;border-top:1px solid var(--border);background:var(--card)}
footer .cols{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
.badge{font-size:12px;color:var(--muted)}.meta{color:var(--muted);font-size:14px}
.article-list .item{display:flex;gap:14px;align-items:flex-start}
.thumb{width:120px;height:80px;border-radius:10px;background:#ddd;flex:none;object-fit:cover}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff}
label{font-size:14px;color:var(--muted)}form .row{display:grid;gap:12px;margin:8px 0}
.cookie{position:fixed;bottom:16px;right:16px;max-width:360px}

/* Compact language button */
.lang{position:relative}
.lang-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lang-btn span{font-size:18px;line-height:1}
.lang-menu{position:absolute;top:42px;right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none;min-width:120px;overflow:hidden}
.lang-menu.open{display:block}
.lang-menu button{display:block;width:100%;text-align:left;padding:10px 12px;background:#fff;border:none;cursor:pointer}
.lang-menu button:hover{background:#f3f3f3}

/* RTL support */
html[dir=rtl] body{font-family:"Noto Kufi Arabic","Amiri",Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
html[dir=rtl] .article-list .item{flex-direction:row-reverse}
html[dir=rtl] .nav .container{flex-direction:row-reverse}
html[dir=rtl] .nav .links{flex-direction:row-reverse}
html[dir=rtl] .hero{direction:rtl}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}


/* Conteneur fluide + safe area (iPhone notch) */
.container {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

/* Typo fluide */
:root { --fs-h1: clamp(1.4rem, 3.5vw, 2.2rem); --fs-body: clamp(0.95rem, 2.2vw, 1.05rem); }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
body { font-size: var(--fs-body); }

/* Images 100% */
img, video, canvas { max-width: 100%; height: auto; }

/* NAV: layout de base */
.nav { position: sticky; top: 0; background: #fff; z-index: 50; border-bottom: 1px solid #eee; }
.nav .container { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.links { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Bouton menu (desktop caché) */
.menu-btn { display: none; font-size: 1.4rem; line-height: 1; background: none; border: 0; padding: 6px 8px; cursor: pointer; }

/* Lang menu position */
.lang { position: relative; }
.lang-menu { position: absolute; right: 0; top: 120%; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 8px; display: none; box-shadow: 0 10px 25px rgba(0,0,0,.07); }
.lang-menu.open { display: block; }
.lang-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: 0; cursor: pointer; }

/* Grilles & cartes */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { border: 1px solid #eee; border-radius: 16px; padding: 16px; background: #fff; }
.btn { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid #8a2be2; text-decoration: none; }

/* FOOTER */
footer { margin-top: 40px; border-top: 1px solid #eee; }
footer .cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }

/* ============ MOBILE ============ */
@media (max-width: 900px) {
  .menu-btn { display: inline-block; margin-left: auto; }  /* bouton visible */
  /* on cache le menu par défaut sur mobile */
  #navLinks {
    position: fixed; inset: 56px 0 auto 0;  /* en dessous du header */
    background: #fff; border-bottom: 1px solid #eee;
    display: none; flex-direction: column; gap: 10px;
    padding: 12px 16px;
  }
  #navLinks.open { display: flex; }

  /* liens plus gros, tactiles */
  .links a, .links .btn, .lang-btn { padding: 10px 6px; }

  /* brand à gauche, bouton à droite */
  .nav .container { gap: 8px; }
  .brand { margin-right: auto; }

  /* Grilles: une seule colonne */
  .grid-2 { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr; }

  /* cookies: largeur fluide */
  .cookie.card { left: 12px; right: 12px; bottom: 12px; }
}

/* RTL tweaks */
html[dir="rtl"] .nav .container { flex-direction: row-reverse; }
html[dir="rtl"] #navLinks { text-align: right; }
/* 1) Par défaut, les liens ont le style normal */
.links a,
.links .btn {
  background: transparent;
  border-color: transparent;
}

/* 2) On stylise UNIQUEMENT la page courante */
.links a[aria-current="page"],
.links .btn[aria-current="page"] {
  background: #f5ebff;       /* léger fond */
  border-color: #8a2be2;     /* bord violet */
  color: inherit;
}

/* 3) (Optionnel) Ne stylise pas :visited pour éviter l'effet “sélectionné” */
.links a:visited,
.links .btn:visited {
  color: inherit;             /* même couleur que non visité */
}

/* 4) (Optionnel) Désactive l’état :active trop appuyé sur mobile */
.links a:active,
.links .btn:active {
  filter: none;
  transform: none;
}