/* ===========================================
   Algeroise • French section CSS (v4)
   Path: /french/components/style.css
   Fun + readable + RTL + mobile
   =========================================== */

/* --------- Theme --------- */
:root{
  /* Surfaces & structure */
  --paper:#ffffff;
  --card:#ffffff;
  --soft:#f7f9fc;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --maxw:1100px;

  /* Text & links */
  --ink:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;
  --accent-ink:#ffffff;

  /* Decorative headline gradients */
  --grad-1: linear-gradient(90deg,#0ea5e9,#2563eb,#7c3aed);
  --grad-2: linear-gradient(90deg,#22c55e,#06b6d4,#2563eb);
  --grad-3: linear-gradient(90deg,#f97316,#db2777,#7c3aed);

  /* Chips/badges */
  --chip-bg:#eef2ff;
  --chip-border:#c7d2fe;
  --chip-ink:#1e40af;

  /* Callouts */
  --tips-bg:#f8fafc;
  --tips-border:#cbd5e1;

  --ex-bg:#eef6ff;
  --ex-border:#bfdbfe;

  /* Radii */
  --radius:16px;
  --radius-sm:12px;
}

/* --------- Base --------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--soft); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.85;
  direction: rtl; /* Arabic section default */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin-inline:auto;padding:16px}

/* Better defaults for article text */
.article{
  padding:22px;
  /* comfortable line length on wide screens */
  --measure:72ch;
}
.article > *{
  max-width:var(--measure);
}
.article p{margin: .8rem 0}
.article ul, .article ol{margin:.6rem 0 .9rem 0; padding:0 1rem 0 0}
.article li{margin:.2rem 0}

/* --------- Layout --------- */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.page-wrap{
  display:grid;grid-template-columns:1.7fr .9fr;gap:26px;align-items:start;margin-top:20px
}
@media (max-width:1000px){.page-wrap{grid-template-columns:1fr}}

/* --------- Header / nav --------- */
.site{background:#fff;border-bottom:1px solid var(--border)}
.site .site-top{display:flex;align-items:center;justify-content:space-between}
nav[aria-label="Main"] a{
  display:inline-block;padding:.55rem .8rem;border-radius:999px;
  transition:background .2s ease, transform .2s ease;
}
nav[aria-label="Main"] a:hover{background:#f1f5ff}
nav[aria-label="Main"] a.badge{
  background:var(--accent);color:var(--accent-ink)
}

/* --------- Hero --------- */
.hero{
  /* layered subtle pattern + glossy gradient */
  background:
    radial-gradient(1200px 300px at 50% -30%, rgba(255,255,255,.18), transparent),
    linear-gradient(90deg,#0b6bdc,#2aa4f4);
  color:#fff;padding:26px 20px;border-radius:var(--radius) var(--radius) 0 0;text-align:center
}
.hero h1{
  margin:0;font-size:clamp(1.4rem, 2.2vw + 1rem, 2.1rem);
  font-weight:800; letter-spacing:.2px;
}
.hero p{margin:.45rem 0 0;opacity:.98}

/* --------- Headings (colorful & bold) --------- */
.article h1,.article h2,.article h3,.article h4{
  font-weight:800; line-height:1.25; margin:1.1rem 0 .55rem;
}
.article h1{
  font-size:clamp(1.6rem, 2.3vw + 1rem, 2.2rem);
  background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.article h2{
  font-size:clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.article h3{
  font-size:clamp(1.1rem, .9vw + 1rem, 1.25rem);
  background:var(--grad-3); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* your utility */
.mini-title{margin:.9rem 0 .35rem; font-weight:800}

/* --------- Inline code & kbd --------- */
code, kbd{
  background:#0f172a08; border:1px solid #0f172a14;
  padding:.08rem .35rem; border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95em;
}
kbd{box-shadow:inset 0 -2px #00000010}

/* --------- Callouts & quiz blocks --------- */
.tips{
  background:var(--tips-bg); border:1px dashed var(--tips-border);
  border-radius:12px;padding:12px;margin:12px 0
}
.ex{
  background:var(--ex-bg); border:1px solid var(--ex-border);
  border-radius:12px;padding:12px;margin:10px 0
}
/* details/summary used for “أظهر الحل” */
details{background:#ffffff;border:1px solid var(--border);border-radius:10px; padding:.6rem .8rem; margin:.5rem 0}
details[open]{box-shadow:var(--shadow)}
details > summary{cursor:pointer;font-weight:700;outline:none}

/* --------- Pills / badges --------- */
.badge-pill{
  display:inline-block;background:var(--chip-bg);color:var(--chip-ink);
  border:1px solid var(--chip-border);
  border-radius:999px;padding:.18rem .6rem;margin:.15rem 0;
  font-weight:700;
}

/* --------- Sidebar --------- */
.aside-list{padding:14px}
.aside-list ul{list-style:none;margin:0;padding:0}
.aside-list li{margin:.28rem 0}
.aside-list a{
  display:block;padding:.5rem .65rem;border-radius:12px;border:1px solid transparent;
  transition:background .2s ease, transform .15s ease, border-color .2s ease;
}
.aside-list a:hover{background:#f8faff;border-color:#e5e9ff}
.aside-list a[aria-current="page"]{background:#eef2ff;border:1px solid #c7d2fe}

/* --------- Footer --------- */
.site-footer{
  margin-top:24px;padding:18px;text-align:center;
  border-top:1px solid var(--border);background:#fafafa;border-radius:var(--radius)
}

/* --------- Forms (if any in lessons) --------- */
input, select, textarea, button{
  font:inherit; color:inherit;
}
button, .btn{
  display:inline-block; padding:.6rem .9rem; border-radius:12px;
  background:var(--accent); color:var(--accent-ink); border:none; cursor:pointer;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transition:transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
button:hover, .btn:hover{transform:translateY(-1px)}
button:active, .btn:active{transform:translateY(0)}
.btn.outline{
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  box-shadow:none;
}

/* --------- Focus (accessibility) --------- */
:where(a, button, summary, [tabindex="0"], input, select, textarea):focus-visible{
  outline:3px solid #9ad3ff; outline-offset:3px; border-radius:10px;
}

/* --------- Tables (if you add later) --------- */
.table-wrap{overflow:auto}
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:560px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.table th, .table td{padding:.7rem .8rem; border-bottom:1px solid var(--border)}
.table thead th{background:#f8faff; text-align:right; font-weight:800}
.table tr:last-child td{border-bottom:none}

/* --------- Misc polish --------- */
hr{border:none;height:1px;background:var(--border);margin:16px 0}
blockquote{
  margin: .8rem 0; padding:.6rem .9rem; background:#fff; border-inline-start:6px solid #93c5fd; border-radius:10px;
}

/* ===== IMPORTANT =====
   Carousel styles remain scoped inside caroussel.html
   (no globals here to avoid conflicts).
*/
/* --- Carousel (RTL, snap, smooth) --- */
.vf-carousel-wrap{
  padding: 8px 0 2px;
}
.vf-carousel{
  display:flex;
  flex-direction: row-reverse; /* RTL visual flow */
  gap:12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px;
}
.vf-carousel:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }
.vf-carousel::-webkit-scrollbar{ height:8px }
.vf-carousel::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px }

.vf-item{
  flex:0 0 auto;
  min-width: 260px;
  scroll-snap-align:start;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.vf-item a{
  display:block;
  padding:12px 14px;
  color:var(--ink);
  text-decoration:none;
  line-height:1.6;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.vf-item a:hover{ text-decoration:underline }

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .vf-carousel{ scroll-behavior:auto }
}