/* ============================================================
   ACIR — Styles partagés entre toutes les pages
   Variables, reset, typographie, utilitaires, composants communs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --green-deep:    #1A5C38;
  --gold:          #C9952A;
  --gold-light:    #E8B84B;
  --gold-dark:     #A87820;
  --cream:         #FAFAF7;
  --slate:         #2D2D2D;
  --emerald:       #2E8B57;
  --emerald-light: #3DAD6E;
  --white:         #FFFFFF;
  --gray-100:      #F5F5F0;
  --gray-200:      #E8E8E2;
  --gray-400:      #A0A09A;
  --gray-600:      #6B6B65;

  --bg:            var(--cream);
  --bg-card:       var(--white);
  --text-primary:  var(--slate);
  --text-secondary:var(--gray-600);
  --border:        var(--gray-200);
  --nav-bg:        rgba(250,250,247,0.95);
  --nav-shadow:    0 2px 20px rgba(26,92,56,0.08);

  --font-arabic:   'Amiri', serif;
  --font-display:  'Playfair Display', serif;
  --font-body:     'Inter', sans-serif;

  --container:     1200px;
  --section-pad:   5rem;
  --transition:    0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-fast:0.15s ease;

  --shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.12);

  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-full:   9999px;
}

[data-theme="dark"] {
  --bg:            #111714;
  --bg-card:       #1C2420;
  --text-primary:  #EDF2EE;
  --text-secondary:#9BB3A2;
  --border:        #2A3830;
  --nav-bg:        rgba(17,23,20,0.95);
  --nav-shadow:    0 2px 20px rgba(0,0,0,0.4);
  --gray-100:      #1C2420;
  --gray-200:      #2A3830;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text-primary); line-height:1.6; overflow-x:hidden; transition:background var(--transition),color var(--transition); }
img,svg { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul,ol { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); line-height:1.2; font-weight:700; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ── Container ── */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }

/* ── Accessibility ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ── Section header ── */
.section-header { text-align:center; margin-bottom:3rem; }
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.75rem;
}
.section-label::before,.section-label::after { content:''; display:block; width:24px; height:1px; background:var(--gold); opacity:.5; }
.section-title { font-family:var(--font-display); font-size:clamp(1.75rem,4vw,2.75rem); color:var(--text-primary); margin-bottom:.75rem; }
.section-desc  { font-size:1rem; color:var(--text-secondary); max-width:520px; margin-inline:auto; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:var(--radius-full); font-size:.9375rem; font-weight:600; letter-spacing:.02em; transition:all var(--transition); white-space:nowrap; }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--white); box-shadow:0 4px 15px rgba(201,149,42,.35); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(201,149,42,.45); }
.btn-green { background:linear-gradient(135deg,var(--green-deep),var(--emerald)); color:var(--white); box-shadow:0 4px 15px rgba(26,92,56,.3); }
.btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(26,92,56,.4); }
.btn-outline-green { display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 2rem; border:2px solid var(--green-deep); border-radius:var(--radius-full); font-size:.9375rem; font-weight:600; color:var(--green-deep); background:transparent; transition:all var(--transition); }
.btn-outline-green:hover { background:var(--green-deep); color:var(--white); }
[data-theme="dark"] .btn-outline-green { border-color:var(--gold); color:var(--gold); }
[data-theme="dark"] .btn-outline-green:hover { background:var(--gold); color:var(--slate); }

/* ── Form elements ── */
.form-group   { margin-bottom:1.25rem; }
.form-label   { display:block; font-size:.875rem; font-weight:600; color:var(--text-secondary); margin-bottom:.375rem; }
.form-input,.form-select,.form-textarea {
  width:100%; padding:.75rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius-md); font-size:1rem; font-family:var(--font-body);
  color:var(--text-primary); background:var(--bg); transition:border-color var(--transition-fast);
}
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--green-deep); }
[data-theme="dark"] .form-input:focus,[data-theme="dark"] .form-select:focus,[data-theme="dark"] .form-textarea:focus { border-color:var(--gold); }
.form-textarea { min-height:120px; resize:vertical; }
.form-row      { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px) { .form-row { grid-template-columns:1fr; } }
.form-error    { font-size:.8125rem; color:#dc2626; margin-top:.25rem; }

/* ── Toast / notification ── */
.toast {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--slate); color:var(--white); padding:.75rem 1.5rem;
  border-radius:var(--radius-full); font-size:.9rem; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:9999;
  opacity:0; pointer-events:none; transition:all .3s ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--green-deep); }
.toast.error   { background:#dc2626; }

/* ── Navigation (partagée) ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); transition:box-shadow var(--transition),background var(--transition);
}
.nav.scrolled { box-shadow:var(--nav-shadow); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem; }
.nav__logo { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.nav__logo-icon { width:38px; height:38px; flex-shrink:0; }
.nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
.nav__logo-acir { font-family:var(--font-display); font-size:.8125rem; font-weight:700; letter-spacing:.12em; color:var(--green-deep); text-transform:uppercase; }
.nav__logo-name { font-family:var(--font-arabic); font-size:1.0625rem; font-weight:700; color:var(--green-deep); }
[data-theme="dark"] .nav__logo-acir,[data-theme="dark"] .nav__logo-name { color:var(--gold); }
.nav__links { display:flex; align-items:center; gap:.125rem; }
.nav__link { font-size:.875rem; font-weight:500; color:var(--text-secondary); padding:.5rem .75rem; border-radius:var(--radius-sm); transition:color var(--transition-fast),background var(--transition-fast); }
.nav__link:hover,.nav__link--active { color:var(--green-deep); }
.nav__link:hover { background:rgba(26,92,56,.06); }
[data-theme="dark"] .nav__link:hover,[data-theme="dark"] .nav__link--active { color:var(--gold); }
.nav__controls { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.nav__btn-don { font-size:.8125rem; font-weight:700; padding:.5rem 1.25rem; border-radius:var(--radius-full); background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--white); letter-spacing:.03em; transition:all var(--transition); box-shadow:0 2px 10px rgba(201,149,42,.3); }
.nav__btn-don:hover { transform:translateY(-1px); box-shadow:0 4px 18px rgba(201,149,42,.45); }
.nav__darkmode { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--text-secondary); transition:background var(--transition-fast); }
.nav__darkmode:hover { background:var(--gray-100); color:var(--text-primary); }
.nav__darkmode svg { width:18px; height:18px; }
.icon-sun { display:none; } .icon-moon { display:block; }
[data-theme="dark"] .icon-sun { display:block; } [data-theme="dark"] .icon-moon { display:none; }
.nav__hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; padding:6px; border-radius:var(--radius-sm); transition:background var(--transition-fast); }
.nav__hamburger:hover { background:var(--gray-100); }
.nav__hamburger span { display:block; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition); transform-origin:center; }
.nav__hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav__mobile { display:none; position:fixed; top:70px; left:0; right:0; background:var(--nav-bg); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); padding:1rem 1.5rem 1.5rem; flex-direction:column; gap:.25rem; max-height:calc(100vh - 70px); overflow-y:auto; z-index:999; animation:slideDown .25s ease forwards; }
.nav__mobile.open { display:flex; }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.nav__mobile-link { font-size:1rem; font-weight:500; color:var(--text-secondary); padding:.75rem 1rem; border-radius:var(--radius-md); transition:all var(--transition-fast); }
.nav__mobile-link:hover { color:var(--green-deep); background:rgba(26,92,56,.06); }
.nav__mobile-don { margin-top:.75rem; text-align:center; padding:.875rem; border-radius:var(--radius-full); background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--white); font-weight:700; }

/* ── Page header (sous-pages) ── */
.page-hero {
  background:linear-gradient(160deg,#0D3520 0%,#1A5C38 60%,#145230 100%);
  padding:7rem 0 4rem; text-align:center;
  position:relative; overflow:hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.page-hero__label { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.75rem; }
.page-hero__title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); color:var(--white); margin-bottom:1rem; }
.page-hero__desc  { font-size:1rem; color:rgba(255,255,255,.7); max-width:540px; margin-inline:auto; }

/* ── Content card (news, events, education) ── */
.content-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition); }
.content-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ── Tag badges ── */
.tag { display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .625rem; border-radius:var(--radius-full); }
.tag--annonce    { background:#dbeafe; color:#1e40af; }
.tag--evenement  { background:#fef3c7; color:#92400e; }
.tag--communique { background:#dcfce7; color:#15803d; }
.tag--spirituel  { background:#f3e8ff; color:#7e22ce; }
.tag--cours      { background:#dcfce7; color:#15803d; }
.tag--guide      { background:#dbeafe; color:#1e40af; }
.tag--accompagnement { background:#fce7f3; color:#9d174d; }
.tag--formation  { background:#fef3c7; color:#92400e; }
.tag--ressources { background:#f3e8ff; color:#7e22ce; }
[data-theme="dark"] .tag--annonce    { background:rgba(30,64,175,.25); color:#93c5fd; }
[data-theme="dark"] .tag--evenement  { background:rgba(146,64,14,.25); color:#fcd34d; }
[data-theme="dark"] .tag--communique { background:rgba(21,128,61,.25); color:#86efac; }
[data-theme="dark"] .tag--spirituel  { background:rgba(126,34,206,.25); color:#d8b4fe; }
[data-theme="dark"] .tag--cours      { background:rgba(21,128,61,.25); color:#86efac; }
[data-theme="dark"] .tag--guide      { background:rgba(30,64,175,.25); color:#93c5fd; }
[data-theme="dark"] .tag--accompagnement { background:rgba(157,23,77,.25); color:#f9a8d4; }
[data-theme="dark"] .tag--formation  { background:rgba(146,64,14,.25); color:#fcd34d; }
[data-theme="dark"] .tag--ressources { background:rgba(126,34,206,.25); color:#d8b4fe; }

/* ── Back to top ── */
.back-to-top { position:fixed; bottom:2rem; right:2rem; width:48px; height:48px; background:linear-gradient(135deg,var(--green-deep),var(--emerald)); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(26,92,56,.4); transition:all var(--transition); opacity:0; pointer-events:none; z-index:800; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-3px); }
.back-to-top svg { width:20px; height:20px; }

/* ── Footer ── */
.footer { background:#0A1F12; color:rgba(255,255,255,.7); padding:4rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand-logo  { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.footer__brand-name  { font-family:var(--font-display); font-size:1.125rem; color:var(--white); font-weight:700; }
.footer__brand-sub   { font-size:.8125rem; color:rgba(255,255,255,.45); }
.footer__brand-desc  { font-size:.875rem; line-height:1.65; color:rgba(255,255,255,.5); margin-bottom:1.25rem; }
.footer__col-title   { font-family:var(--font-display); font-size:.875rem; font-weight:700; color:var(--white); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer__links       { display:flex; flex-direction:column; gap:.5rem; }
.footer__link        { font-size:.875rem; color:rgba(255,255,255,.5); transition:color var(--transition-fast); }
.footer__link:hover  { color:var(--gold-light); }
.footer__hours-item  { display:flex; justify-content:space-between; font-size:.875rem; color:rgba(255,255,255,.5); padding:.25rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.footer__hours-item:last-child { border-bottom:none; }
.footer__hours-time  { color:var(--gold-light); font-weight:500; }
.footer__bottom      { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8125rem; color:rgba(255,255,255,.35); }
.footer__bottom-links { display:flex; gap:1.5rem; }
.footer__bottom-link { color:rgba(255,255,255,.35); transition:color var(--transition-fast); }
.footer__bottom-link:hover { color:var(--gold-light); }
@media(max-width:900px) { .footer__grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:560px) { .footer__grid { grid-template-columns:1fr; gap:1.5rem; } .footer__bottom { flex-direction:column; text-align:center; } }

/* ── Responsive nav ── */
@media(max-width:1024px) { .nav__links,.nav__btn-don { display:none; } .nav__hamburger { display:flex; } }
@media(max-width:768px) { :root { --section-pad:3.5rem; } }