/* ══════════════════════════════════════════════════════════════
   ANNUAIRE BRESLEV FRANCOPHONE — STYLES PARTAGÉS
   Extrait à l'identique du design system du site (index.html)
   À inclure sur toutes les pages du module Institutions
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs */
  --ink:        #0D1520;
  --navy:       #112038;
  --blue:       #1A3560;
  --blue-mid:   #1E4080;
  --gold:       #C4881E;
  --gold-l:     #DCA93A;
  --gold-ll:    #F0C85A;
  --gold-p:     #FBF3DC;
  --gold-dim:   rgba(196,136,30,0.15);
  --cream:      #F8F5EE;
  --off:        #F2F5F9;
  --white:      #FFFFFF;
  --sage:       #2A5242;
  --violet:     #5A3A8A;
  --muted:      #5E718A;
  --border:     #DDE3EE;
  --border-l:   #EEF1F7;

  /* Typographie */
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Syne', system-ui, sans-serif;
  --body:       'DM Sans', system-ui, sans-serif;

  /* Espacement */
  --pad-x:      clamp(20px, 5vw, 72px);
  --pad-x-sm:   clamp(16px, 4vw, 48px);

  /* Ombre */
  --shadow-sm:  0 1px 4px rgba(13,21,32,0.06);
  --shadow-md:  0 4px 20px rgba(13,21,32,0.08);
  --shadow-lg:  0 12px 48px rgba(13,21,32,0.12);

  /* Transitions */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border: 0;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ═══ NAVBAR ═══ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
  background: rgba(13,21,32,0.97);
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
}
.nav::after {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-ll), var(--gold), transparent);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x);
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-ll));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.04em; flex-shrink: 0; box-shadow: 0 2px 12px rgba(196,136,30,0.4);
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-top { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ll); }
.nav-logo-bottom { font-family: var(--serif); font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.85); font-style: italic; }

.nav-links { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.nav-link {
  font-family: var(--body); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.5);
  padding: 6px 12px; border-radius: 4px; transition: color 0.2s, background 0.2s; white-space: nowrap;
}
.nav-link:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--gold-ll); }

.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-nav-ghost {
  font-family: var(--body); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55);
  padding: 7px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; transition: all 0.2s;
}
.btn-nav-ghost:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }
.btn-nav-primary {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink);
  background: linear-gradient(135deg, var(--gold-l), var(--gold-ll)); padding: 8px 18px; border-radius: 5px;
  transition: all 0.2s; box-shadow: 0 2px 10px rgba(196,136,30,0.3);
}
.btn-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,136,30,0.4); }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(255,255,255,0.7); border-radius: 2px; transition: all 0.3s; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

.nav-mobile {
  display: none; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.08);
  padding: 16px var(--pad-x-sm); flex-direction: column; gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile-link { font-family: var(--body); font-size: 14px; color: rgba(255,255,255,0.6); padding: 10px 12px; border-radius: 5px; transition: all 0.2s; }
.nav-mobile-link:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }
.nav-mobile-cta {
  margin-top: 8px; background: linear-gradient(135deg, var(--gold-l), var(--gold-ll)); color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 12px; border-radius: 5px; text-align: center;
}

@media (max-width: 768px) {
  .nav-links, .nav-right { display: none; }
  .nav-hamburger { display: flex; }
}

/* ═══ FOOTER ═══ */
.footer { background: var(--ink); border-top: 1px solid rgba(255,255,255,0.05); }
.footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 32px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-logo-mark {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(196,136,30,0.2);
  border: 1px solid rgba(196,136,30,0.3); display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 9px; font-weight: 700; color: var(--gold-ll); flex-shrink: 0;
}
.footer-copy { font-family: var(--body); font-size: 12px; color: rgba(255,255,255,0.28); line-height: 1.5; }
.footer-mid { display: flex; gap: 20px; }
.footer-link { font-family: var(--body); font-size: 12px; color: rgba(255,255,255,0.3); transition: color 0.2s; }
.footer-link:hover { color: rgba(255,255,255,0.7); }
.footer-right { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--gold); opacity: 0.7; }

@media (max-width: 768px) {
  .footer-inner { flex-direction: column; text-align: center; gap: 16px; }
  .footer-mid { justify-content: center; }
}

/* ═══ BARRE LÉGALE (mentions légales) ═══ */
.footer-legal-bar { text-align: center; padding: 10px 0 14px; border-top: 1px solid rgba(255,255,255,0.04); }
.footer-legal-link { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.03em; color: var(--gold); opacity: 0.55; transition: opacity 0.2s; }
.footer-legal-link:hover { opacity: 1; }

/* ═══ BOUTON WHATSAPP FLOTTANT ═══ */
#wa-btn-wrap { position: fixed; bottom: 28px; right: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#wa-tooltip {
  background: var(--ink); color: rgba(255,255,255,.88); font-family: var(--body); font-size: 12px; font-weight: 400;
  padding: 7px 14px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateX(10px) scale(.95);
  transition: all .25s var(--ease); pointer-events: none; position: relative;
}
#wa-tooltip.show { opacity: 1; transform: translateX(0) scale(1); }
#wa-tooltip::after {
  content: ''; position: absolute; right: 16px; bottom: -5px; width: 10px; height: 10px;
  background: var(--ink); border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); transform: rotate(45deg);
}
#wa-btn {
  width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#C4881E,#F0C85A);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 20px rgba(196,136,30,.45), 0 2px 8px rgba(0,0,0,.2); transition: all .25s var(--ease);
  border: none; position: relative; text-decoration: none;
}
#wa-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 32px rgba(196,136,30,.55), 0 4px 12px rgba(0,0,0,.2); }
#wa-btn:active { transform: scale(.96); }
#wa-btn svg { width: 26px; height: 26px; fill: #0D1520; }
#wa-btn::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(196,136,30,.4); animation: waPulse 2.4s ease-out infinite; }
#wa-btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(196,136,30,.18); animation: waPulse 2.4s .6s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(.9); opacity: .8; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
#wa-badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--off); background: #1a9e5a; transition: background .3s; }
#wa-badge.away { background: #ba7517; }
#wa-shabbat-note {
  background: var(--ink); color: rgba(255,255,255,.6); font-family: var(--body); font-size: 11px;
  padding: 6px 12px; border-radius: 12px; text-align: center; line-height: 1.5; border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.2); display: none; max-width: 200px; opacity: 0; transform: translateX(10px); transition: all .3s ease;
}
#wa-shabbat-note.show { opacity: 1; transform: translateX(0); }