/* ==========================================================================
   ADHP — Ambassade des Droits Humains et de la Paix
   Feuille de style unique — thème "Charte des droits"
   Structure : 1. Variables  2. Base  3. Typo  4. Layout utils  5. Navbar
   6. Hero  7. Composant "Article"  8. Sections  9. Composants  10. Footer
   11. Animations  12. Responsive
   ========================================================================== */

/* -------------------- 1. Design tokens -------------------- */
:root{
  /* Couleurs de marque */
  --color-primary:      #0B4F6C;   /* bleu-pétrole — justice, confiance */
  --color-primary-dark: #073B52;
  --color-primary-light:#3E7C97;
  --color-accent:       #D98E3B;   /* ocre — terre, chaleur, dignité */
  --color-accent-dark:  #B36F24;
  --color-sage:         #7E9E8E;   /* vert sauge — paix, colombe */
  --color-bg:           #FAF7F1;   /* papier chaud */
  --color-bg-alt:       #F1EBDD;
  --color-surface:      #FFFFFF;
  --color-ink:          #1B2430;   /* texte principal */
  --color-ink-soft:     #4B5563;
  --color-line:         #E4DCC9;

  /* Typo */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-label: "Space Mono", "Courier New", monospace;

  /* Radius / ombres */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 30px -12px rgba(11,79,108,0.18);
  --shadow-strong: 0 20px 45px -15px rgba(11,79,108,0.28);

  --nav-height: 78px;
}

/* -------------------- 2. Base -------------------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body{
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; }
a{ color: var(--color-primary); text-decoration:none; }
a:hover{ color: var(--color-accent-dark); }
::selection{ background: var(--color-accent); color:#fff; }

/* Focus visible clavier */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, .card:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* -------------------- 3. Typographie -------------------- */
h1,h2,h3,h4,h5,.font-display{ font-family: var(--font-display); color: var(--color-primary-dark); font-weight: 600; letter-spacing: -0.01em; }
h1{ font-weight:700; }

.eyebrow{
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--color-accent); display:inline-block; }

.lede{ font-size:1.15rem; color: var(--color-ink-soft); }

/* -------------------- 4. Layout utils -------------------- */
.section{ padding: 5.5rem 0; position:relative; }
.section-alt{ background: var(--color-bg-alt); }
.section-dark{ background: var(--color-primary-dark); color:#EAF2F5; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-title{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: .5rem;
}
.section-head{ max-width: 720px; margin-bottom: 3rem; }
.divider-line{ height:1px; background: var(--color-line); border:0; margin: 0 0 3rem; }

/* -------------------- 5. Navbar -------------------- */
.navbar-adhp{
  min-height: var(--nav-height);
  background: rgba(250,247,241,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow .3s ease, background .3s ease;
}
.navbar-adhp.scrolled{ box-shadow: var(--shadow-soft); }
.navbar-brand{ font-family: var(--font-display); font-weight:700; color: var(--color-primary-dark) !important; font-size:1.35rem; }
.navbar-brand img{ height:44px; width:auto; }
.navbar-adhp .nav-link{
  font-family: var(--font-label);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--color-ink) !important;
  padding: .5rem 1rem !important;
  position:relative;
}
.navbar-adhp .nav-link::after{
  content:"";
  position:absolute; left:1rem; right:1rem; bottom:0;
  height:2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.navbar-adhp .nav-link:hover::after,
.navbar-adhp .nav-link.active::after{ transform: scaleX(1); }
.navbar-adhp .nav-link.active{ color: var(--color-accent-dark) !important; }
.btn-nav-cta{
  background: var(--color-accent); color:#fff !important; border-radius: 50px;
  padding:.55rem 1.3rem !important; font-size:.75rem !important;
}
.btn-nav-cta::after{ display:none; }
.btn-nav-cta:hover{ background: var(--color-accent-dark); }

/* -------------------- 6. Hero -------------------- */
.hero{
  padding: calc(var(--nav-height) + 4.5rem) 0 5rem;
  background:
    radial-gradient(circle at 85% 10%, rgba(217,142,59,0.16), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(126,158,142,0.18), transparent 40%),
    var(--color-bg);
  position:relative;
  overflow:hidden;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid var(--color-line);
  border-radius:50px; padding:.4rem 1rem .4rem .4rem;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-label); font-size:.72rem; letter-spacing:.05em;
}
.hero-badge .dot{ width:26px; height:26px; border-radius:50%; background: var(--color-accent); display:flex; align-items:center; justify-content:center; color:#fff; }
.hero h1{
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height:1.08;
  margin: 1.4rem 0 1.3rem;
}
.hero h1 em{ font-style: italic; color: var(--color-accent-dark); }
.hero-stats{ display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:2.2rem; }
.hero-stats .num{ font-family: var(--font-display); font-size:2rem; color: var(--color-primary); font-weight:700; }
.hero-stats .label{ font-size:.78rem; color: var(--color-ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.hero-visual{ position:relative; }
.hero-visual .frame{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-strong);
  aspect-ratio: 4/5;
}
.hero-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .chip{
  position:absolute; bottom:-1.2rem; left:-1.2rem;
  background:#fff; border-radius: var(--radius-md);
  padding:1rem 1.3rem; box-shadow: var(--shadow-soft);
  max-width: 220px; font-size:.85rem;
  border-left:4px solid var(--color-sage);
}

/* -------------------- 7. Composant "Article" (signature) -------------------- */
.article-head{ display:flex; align-items:flex-start; gap:1.2rem; margin-bottom:2.6rem; }
.article-num{
  font-family: var(--font-label);
  font-size:.72rem; letter-spacing:.08em;
  color:#fff; background: var(--color-primary);
  border-radius: 50px; padding:.55rem 1rem;
  white-space:nowrap; box-shadow: var(--shadow-soft);
  transform: rotate(-2deg);
}
.section-dark .article-num{ background: var(--color-accent); }

/* -------------------- 8. Cartes & composants génériques -------------------- */
.card-adhp{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  height:100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-adhp:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); border-color: transparent; }
.card-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color:#fff; font-size:1.2rem; margin-bottom:1.1rem;
}
.card-adhp.accent .card-icon{ background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); }

/* Boutons */
.btn-adhp-primary{
  background: var(--color-primary); color:#fff; border:none;
  border-radius:50px; padding:.75rem 1.7rem; font-weight:600;
  transition: all .25s ease; box-shadow: var(--shadow-soft);
}
.btn-adhp-primary:hover{ background: var(--color-primary-dark); color:#fff; transform: translateY(-2px); }
.btn-adhp-outline{
  background:transparent; color: var(--color-primary); border:1.5px solid var(--color-primary);
  border-radius:50px; padding:.7rem 1.6rem; font-weight:600; transition: all .25s ease;
}
.btn-adhp-outline:hover{ background: var(--color-primary); color:#fff; }
.btn-adhp-accent{
  background: var(--color-accent); color:#fff; border:none; border-radius:50px;
  padding:.75rem 1.7rem; font-weight:600; box-shadow: var(--shadow-soft); transition:.25s ease;
}
.btn-adhp-accent:hover{ background: var(--color-accent-dark); color:#fff; transform: translateY(-2px); }

/* Valeurs */
.value-item{ text-align:center; padding: 1.5rem 1rem; }
.value-item .card-icon{ margin:0 auto 1.1rem; }

/* Statistiques / compteurs */
.stat-box{ text-align:center; padding: 1.5rem; }
.stat-box .stat-num{ font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:700; color: var(--color-accent); }
.stat-box .stat-label{ font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:#D7E4E9; }

/* Équipe */
.team-card{ text-align:center; }
.team-card img{
  width:130px; height:130px; object-fit:cover; border-radius:50%;
  border:4px solid var(--color-bg-alt); margin: 0 auto 1rem; display:block;
  box-shadow: var(--shadow-soft);
}
.team-card .role{ color: var(--color-accent-dark); font-family: var(--font-label); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }

/* Galerie / carousel */
.gallery-carousel .carousel-inner{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-strong); }
.gallery-carousel .carousel-img{ width:100%; height: 460px; object-fit:cover; }
.gallery-carousel .carousel-control-prev,
.gallery-carousel .carousel-control-next{ width:5%; }
.gallery-carousel .carousel-control-prev-icon,
.gallery-carousel .carousel-control-next-icon{
  background-color: rgba(11,79,108,.65); border-radius:50%; padding:1.3rem; background-size:50%;
}

/* Bandeau défilant */
.news-ticker{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); padding:.9rem 0; }
.news-ticker div{ display:inline-block; padding-left:100%; animation: ticker 28s linear infinite; font-family: var(--font-label); font-size:.85rem; color: var(--color-primary-dark); }
@keyframes ticker{ from{ transform: translate(0,0);} to{ transform: translate(-100%,0);} }

/* Formulaires */
.form-adhp label{ font-family: var(--font-label); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--color-ink-soft); }
.form-adhp .form-control, .form-adhp .form-select{
  border-radius: var(--radius-sm); border:1.5px solid var(--color-line);
  padding:.7rem 1rem; background: var(--color-surface);
}
.form-adhp .form-control:focus, .form-adhp .form-select:focus{
  border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(11,79,108,.12);
}
.form-check-adhp{
  border:1.5px solid var(--color-line); border-radius: var(--radius-sm);
  padding: .9rem 1rem; margin-bottom:.7rem; transition: border-color .2s ease, background .2s ease;
}
.form-check-adhp:has(input:checked){ border-color: var(--color-primary); background: rgba(11,79,108,.05); }

/* Formations panel */
.formation-panel{ background: var(--color-surface); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-soft); border:1px solid var(--color-line); }

/* Événements */
.event-card{ cursor:pointer; overflow:hidden; }
.event-card img{ height:210px; object-fit:cover; transition: transform .4s ease; }
.event-card:hover img{ transform: scale(1.06); }
.event-date-tag{
  font-family: var(--font-label); font-size:.7rem; text-transform:uppercase;
  color: var(--color-primary); background: var(--color-bg-alt);
  display:inline-block; padding:.25rem .6rem; border-radius:6px; margin-bottom:.6rem;
}

.calendar-wrap{ background: var(--color-surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-soft); border:1px solid var(--color-line); }
#calendarBody td{ cursor:default; padding: .9rem .4rem; font-size:.9rem; }
#calendarBody td.event-day{
  cursor:pointer; background: var(--color-primary); color:#fff; border-radius:8px; font-weight:600;
  transition: background .2s ease;
}
#calendarBody td.event-day:hover{ background: var(--color-accent-dark); }
.table-adhp thead{ background: var(--color-bg-alt); font-family: var(--font-label); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
#eventDetails{ background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 1.5rem; border-left:4px solid var(--color-accent); }

/* Actualités */
.filter-btn{
  border-radius:50px; border:1.5px solid var(--color-line); color: var(--color-ink-soft);
  padding:.5rem 1.2rem; font-family: var(--font-label); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  background: var(--color-surface); transition: all .2s ease;
}
.filter-btn:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.active{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.news-card .card-img-top{ height:200px; object-fit:cover; }
#pagination button{ border-radius:50%; width:38px; height:38px; padding:0; }
#pagination button.active{ background: var(--color-primary); border-color: var(--color-primary); }

/* Témoignages */
.testimonial-card{ background: var(--color-surface); border-radius: var(--radius-md); padding:2rem; box-shadow: var(--shadow-soft); border:1px solid var(--color-line); height:100%; }
.testimonial-card .quote-mark{ font-family: var(--font-display); font-size:3rem; color: var(--color-accent); line-height:.6; display:block; margin-bottom:.6rem; }
.testimonial-avatar{ width:48px; height:48px; border-radius:50%; background: var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; }

/* FAQ Accordéon */
.accordion-adhp .accordion-item{ border:none; border-bottom:1px solid var(--color-line); background:transparent; }
.accordion-adhp .accordion-button{
  font-family: var(--font-display); font-weight:600; color: var(--color-primary-dark);
  background:transparent; padding:1.3rem 0; box-shadow:none;
}
.accordion-adhp .accordion-button:not(.collapsed){ color: var(--color-accent-dark); background:transparent; }
.accordion-adhp .accordion-button::after{ filter: hue-rotate(150deg); }
.accordion-adhp .accordion-body{ padding: 0 0 1.5rem; color: var(--color-ink-soft); }

/* Contact */
.contact-panel{ background: var(--color-surface); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-strong); border:1px solid var(--color-line); }
.contact-info-item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem; }
.contact-info-item .card-icon{ width:44px; height:44px; flex:0 0 44px; margin-bottom:0; }
.whatsapp-float{
  position:fixed; bottom:5.5rem; right:1.5rem; z-index:1040;
  background:#25D366; color:#fff; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow: var(--shadow-strong); transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); color:#fff; }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }

/* -------------------- 10. Footer -------------------- */
.footer-adhp{ background: var(--color-primary-dark); color: #CFE1E8; padding: 4.5rem 0 0; }
.footer-adhp h5{ color:#fff; font-family: var(--font-display); }
.footer-adhp a{ color:#CFE1E8; }
.footer-adhp a:hover{ color: var(--color-accent); }
.footer-adhp .social-link{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; transition:.2s ease;
}
.footer-adhp .social-link:hover{ background: var(--color-accent); border-color: var(--color-accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding: 1.3rem 0; font-size:.85rem; }

/* -------------------- 11. Animations & utilitaires -------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.show{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }

#loader{
  position:fixed; inset:0; background: var(--color-bg); z-index:2000;
  display:flex; align-items:center; justify-content:center; transition: opacity .5s ease, visibility .5s ease;
}
#loader.hidden{ opacity:0; visibility:hidden; }
.loader-mark{
  width:56px; height:56px; border-radius:50%; border:4px solid var(--color-line);
  border-top-color: var(--color-primary); animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.back-to-top{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1030;
  width:48px; height:48px; border-radius:50%; background: var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; border:none;
  box-shadow: var(--shadow-strong); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--color-accent-dark); }

.toast-adhp{
  position:fixed; top: calc(var(--nav-height) + 1rem); right:1.5rem; z-index:2050;
  background: var(--color-primary-dark); color:#fff; padding:1rem 1.4rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-strong); max-width:320px; transform: translateX(120%); transition: transform .35s ease;
}
.toast-adhp.show{ transform: translateX(0); }
.toast-adhp.error{ background:#8C2E2E; }

/* -------------------- 12. Responsive -------------------- */
@media (max-width: 991.98px){
  .hero{ text-align:center; padding-top: calc(var(--nav-height) + 3rem); }
  .hero-stats{ justify-content:center; }
  .hero-visual{ margin-top:3rem; }
  .hero-visual .chip{ position:static; margin-top:1rem; max-width:none; }
  .article-head{ flex-direction:column; }
}
@media (max-width: 767.98px){
  .section{ padding: 3.5rem 0; }
  .gallery-carousel .carousel-img{ height:280px; }
  .whatsapp-float{ bottom:5rem; right:1rem; width:48px; height:48px; font-size:1.3rem; }
  .back-to-top{ right:1rem; bottom:1rem; }
}