/* ==========================================================================
   components.css — Composants du design system ADIR-PI
   Tous les composants supportent les thèmes clair/sombre via les tokens.
   ========================================================================== */

/* 1. BOUTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-base);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }
.btn--icon { padding: var(--space-3); aspect-ratio: 1; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--outline:hover:not(:disabled) { background: var(--accent-soft); color: var(--on-accent-soft); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--on-accent-soft); }
.btn--gold { background: var(--gold-bright); color: var(--on-gold); }
.btn--gold:hover:not(:disabled) { filter: brightness(1.08); }
.btn--danger { background: var(--color-danger); color: var(--on-danger); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

/* 2. CARTES */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
}
.card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--color-border-strong); }
.card--accent { border-top: 4px solid var(--gold-bright); }
.card__media { aspect-ratio: 16 / 9; background: var(--accent-soft); overflow: hidden; }
.card__media > img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.card__title { font-size: var(--text-lg); margin: 0; }
.card__text { color: var(--color-muted); font-size: var(--text-sm); }
.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
}
.card-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font-weight: 600; font-size: var(--text-sm); }
.card-link::after { content: "→"; transition: transform var(--transition-base); }
.card-link:hover::after { transform: translateX(3px); }

/* 3. NAVIGATION — bandeau bleu royal + or, sous-menus (sitemap §5) */
.site-header {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-drawer) + 10); /* reste au-dessus du tiroir mobile */
  background: var(--adirtpi-blue-deep);
  color: var(--adirtpi-text-on-dark);
  border-bottom: 3px solid var(--adirtpi-gold);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 1320px;
  margin-inline: auto;
  padding: 0 var(--space-5);
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--adirtpi-white);
  line-height: 1.1;
}
.brand:hover { color: var(--adirtpi-white); }
.brand__logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); }
.brand__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--adirtpi-text-on-dark) 80%, transparent);
}
@media (max-width: 87.5em) {
  .brand__tagline { display: none; }
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.site-header .theme-toggle {
  color: var(--adirtpi-text-on-dark);
  border-color: color-mix(in srgb, var(--adirtpi-text-on-dark) 40%, transparent);
}
.site-header .theme-toggle:hover { background: color-mix(in srgb, var(--adirtpi-white) 12%, transparent); }
.site-header .btn--gold { flex-shrink: 0; }

/* Navigation principale — rangée unique centrée */
.nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--adirtpi-white);
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.nav-link:hover { background: color-mix(in srgb, var(--adirtpi-white) 12%, transparent); color: var(--adirtpi-white); }
.nav-link[aria-current="page"] { color: var(--adirtpi-gold-light); font-weight: 700; }
.nav-item--has-sub > .nav-link::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid currentColor;
  opacity: 0.7;
  transition: transform var(--transition-base);
}
.nav-item--has-sub:hover > .nav-link::after,
.nav-item--has-sub:focus-within > .nav-link::after { transform: rotate(180deg); }

/* Panneaux de sous-menus (desktop : survol / focus clavier) */
.nav-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: var(--z-dropdown);
  min-width: 300px;
  max-width: calc(100vw - 2rem);
  padding: var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.nav-sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--adirtpi-gold), transparent);
  border-radius: var(--radius-full);
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sub ul[role="list"] { display: flex; flex-direction: column; gap: 2px; }
.nav-sub__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.nav-sub__link:hover { background: var(--accent-soft); color: var(--on-accent-soft); transform: translateX(2px); }
.menu-icon { flex-shrink: 0; margin-top: 2px; color: var(--gold-ink); }
.nav-sub__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-sub__label { font-weight: 600; }
.nav-sub__hint { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.nav-sub-toggle { display: none; }

/* Mega-panneau (Tribus & Dan) */
.nav-sub--mega { display: flex; gap: var(--space-4); min-width: 660px; padding: var(--space-4); }
.nav-sub--mega .nav-sub__group { flex: 1; min-width: 0; }
.nav-sub--mega .nav-sub__group + .nav-sub__group { border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
.nav-sub__group-title {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
}

.site-header .nav-toggle__bar { background: var(--adirtpi-text-on-dark); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: var(--space-2); background: transparent; border: none; cursor: pointer; }
.nav-toggle__bar { display: block; width: 100%; height: 2px; border-radius: var(--radius-full); transition: transform var(--transition-base), opacity var(--transition-base); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 30em) {
  .site-header .theme-toggle { display: none; }
}
@media (max-width: 74.99em) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: block;
    flex: none;
    padding: calc(4.5rem + var(--space-4)) var(--space-5) var(--space-8);
    background: var(--adirtpi-blue-deep);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid color-mix(in srgb, var(--adirtpi-white) 10%, transparent); }
  .nav-item--has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-item--has-sub > .nav-link { flex: 1; }
  .nav-item--has-sub > .nav-link::after { display: none; }
  .nav-link { font-size: var(--text-lg); padding: var(--space-3) var(--space-2); }
  .nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--adirtpi-gold-light);
    cursor: pointer;
  }
  .nav-sub-toggle svg { transition: transform var(--transition-base); }
  .nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-sub,
  .nav-sub--mega {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    background: color-mix(in srgb, var(--adirtpi-white) 8%, transparent);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-sub::before { display: none; }
  .nav-sub.is-open,
  .nav-sub--mega.is-open { display: block; }
  .nav-sub--mega .nav-sub__group + .nav-sub__group { border-left: none; padding-left: 0; margin-top: var(--space-3); }
  .nav-sub__group-title { color: var(--adirtpi-gold-light); }
  .nav-sub__link { color: var(--adirtpi-white); font-size: var(--text-base); }
  .nav-sub__link:hover { background: color-mix(in srgb, var(--adirtpi-white) 12%, transparent); color: var(--adirtpi-white); }
  .menu-icon { color: var(--adirtpi-gold-light); }
  .nav-sub__hint { color: color-mix(in srgb, var(--adirtpi-text-on-dark) 78%, transparent); }
  .nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
  .nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.theme-toggle:hover { background: var(--accent-soft); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

/* 4. BADGES & TAGS */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.15em 0.7em; font-size: var(--text-xs); font-weight: 600; line-height: 1.6; border-radius: var(--radius-full); white-space: nowrap; }
.badge--accent { background: var(--accent-soft); color: var(--on-accent-soft); }
.badge--gold { background: var(--gold-bright); color: var(--on-gold); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); }
.tag { display: inline-block; padding: 0.15em 0.7em; font-size: var(--text-xs); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-muted); }

/* 5. FORMULAIRES */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__hint { font-size: var(--text-xs); color: var(--color-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); font-weight: 500; }
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.input::placeholder, .textarea::placeholder { color: var(--color-muted); opacity: 0.8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--accent); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.textarea { min-height: 120px; resize: vertical; }
.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

/* Confirmation animée de formulaire (coche verte) */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-success-soft);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
  animation: form-success-in 320ms ease-out;
}
.form-success[hidden] { display: none; }
.form-success__icon svg { display: block; }
.form-success__circle {
  stroke: var(--color-success);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: form-success-draw 600ms ease-out forwards;
}
.form-success__check {
  stroke: var(--color-success);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: form-success-draw 400ms 350ms ease-out forwards;
}
.form-success__title { margin: 0; font-size: var(--text-lg); color: var(--color-success); }
.form-success__text { margin: 0; color: var(--color-text); }
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes form-success-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .form-success, .form-success__circle, .form-success__check { animation: none; }
  .form-success__circle, .form-success__check { stroke-dashoffset: 0; }
}

/* 6. TABLEAUX */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table caption { padding: var(--space-4); text-align: left; font-weight: 600; font-size: var(--text-base); border-bottom: 1px solid var(--color-border); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); }
.table thead th { background: var(--color-surface-alt); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.table tbody tr:hover { background: var(--accent-soft); }
.table tbody tr:last-child td { border-bottom: none; }

/* 7. ALERTES */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid; border-left-width: 4px; font-size: var(--text-sm); }
.alert strong { display: block; margin-bottom: var(--space-1); }
.alert--info { background: var(--color-info-soft); border-color: var(--color-info); color: var(--color-info); }
.alert--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.alert--info :is(strong, a), .alert--success :is(strong, a), .alert--warning :is(strong, a), .alert--danger :is(strong, a) { color: inherit; }

/* 8. MODALES & DRAWER */
.modal, .drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.modal.is-open, .drawer.is-open { display: flex; }
.modal__backdrop, .drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border: none; cursor: pointer; }
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(85vh, 100%);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
}
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-xl);
  cursor: pointer;
}
.modal__close:hover { background: var(--accent-soft); color: var(--on-accent-soft); }
.modal__title { margin-bottom: var(--space-4); font-size: var(--text-xl); }
.drawer.is-open { align-items: stretch; justify-content: flex-end; padding: 0; }
.drawer__panel { position: relative; z-index: 1; width: min(400px, 92vw); height: 100%; overflow-y: auto; background: var(--color-surface); box-shadow: var(--shadow-xl); padding: var(--space-6); }

/* 9. TOASTS */
.toast-stack { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(360px, calc(100vw - var(--space-8))); }
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.toast--success { border-left-color: var(--color-success); }
.toast--danger { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }

/* 10. ACCORDÉON */
.accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.accordion__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.accordion__trigger:hover { background: var(--accent-soft); }
.accordion__icon { flex-shrink: 0; transition: transform var(--transition-base); color: var(--gold-ink); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__panel { padding: 0 var(--space-5); max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow); }
.accordion__panel.is-open { max-height: 60rem; }
.accordion__panel[hidden] { display: block; max-height: 0; padding: 0 var(--space-5); }

/* 11. ONGLETS */
.tabs__list { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-border); overflow-x: auto; }
.tabs__tab { padding: var(--space-3) var(--space-4); background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); cursor: pointer; white-space: nowrap; transition: color var(--transition-base), border-color var(--transition-base); }
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--gold-bright); }
.tabs__panel { padding-top: var(--space-5); }
.tabs__panel[hidden] { display: none; }

/* 12. TIMELINE */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-6); padding-left: var(--space-8); }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--gold-bright), var(--color-border)); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-8) + 4px); top: 6px; width: 16px; height: 16px; background: var(--color-surface); border: 3px solid var(--gold-bright); border-radius: var(--radius-full); }
.timeline__date { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-ink); }
.timeline__title { font-size: var(--text-lg); margin: var(--space-1) 0; }

/* 13. SECTIONS, HERO, FOOTER */
.section { padding-block: clamp(var(--space-10), 6vw, var(--space-12)); }
.section--alt { background: var(--color-surface-alt); }
.section__head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(var(--space-8), 5vw, var(--space-10)); text-align: center; }
.section__kicker { display: inline-block; margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink); }
.section__intro { color: var(--color-muted); font-size: var(--text-lg); }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.hero {
  position: relative;
  padding-block: var(--space-12);
  background: radial-gradient(ellipse at top, var(--accent-soft) 0%, transparent 65%), var(--color-bg);
  text-align: center;
}
.hero__title { margin-bottom: var(--space-5); }
.hero__text { max-width: 680px; margin-inline: auto; margin-bottom: var(--space-8); font-size: var(--text-lg); color: var(--color-muted); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
/* Précision sous un appel à l'action (ex. « Devenir Daniste ») */
.cta-hint { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
.site-footer { padding-block: var(--space-9) var(--space-6); background: var(--accent); color: var(--on-accent); }
.site-footer a { color: inherit; opacity: 0.85; }
.site-footer a:hover { opacity: 1; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-8); }
.site-footer__emblem { width: 72px; height: 72px; margin-bottom: var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-md); }
.site-footer__title { font-family: var(--font-heading); font-size: var(--text-base); margin-bottom: var(--space-4); }
.site-footer__subtitle { font-family: var(--font-heading); font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-3); }
.site-footer ul[role="list"] { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer .social-links { flex-direction: row; gap: var(--space-3); }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.social-link:hover { background: color-mix(in srgb, var(--on-accent) 15%, transparent); transform: translateY(-2px); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--on-accent) 25%, transparent);
  font-size: var(--text-xs);
  opacity: 0.85;
}
.divider { display: flex; align-items: center; gap: var(--space-4); color: var(--gold-bright); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5; }

/* 20. VIDÉO EN FACADE (miniature cliquable, iframe au clic) */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-md);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video-facade iframe { width: 100%; height: 100%; border: 0; }
.video-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.video-facade__play svg {
  padding: 14px;
  background: color-mix(in srgb, var(--adirtpi-blue-deep) 78%, transparent);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}
.video-facade__play:hover svg { transform: scale(1.08); }
.video-facade__title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.card__media .video-facade { border-radius: 0; }

/* 21. PARTAGE SOCIAL (contact / footer) */
.social-links--labeled { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
.social-links--labeled .social-link {
  width: auto;
  height: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 22. FAQ — recherche, catégories, feedback */
.faq-recherche { margin-bottom: var(--space-8); }
.faq-categorie { margin-bottom: var(--space-9); }
.faq-categorie__titre {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}
.faq-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.faq-feedback__actions { display: inline-flex; gap: var(--space-2); }
.faq-feedback__merci { color: var(--color-success); font-weight: 600; }
.faq-vide { margin-top: var(--space-6); text-align: center; color: var(--color-muted); }

/* 23. NEWSLETTER (footer + encart Actualités) */
.newsletter-form { max-width: 520px; }
.newsletter-form__row { display: flex; gap: var(--space-3); align-items: center; }
.newsletter-form__row .input { flex: 1; }
.newsletter-form .field__hint { margin-top: var(--space-2); }
.newsletter-encart {
  max-width: 640px;
  padding: var(--space-6);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.newsletter-encart h3 { margin-bottom: var(--space-2); }
.newsletter-encart .newsletter-form { margin: var(--space-5) auto 0; }
.site-footer__newsletter {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent);
}
.site-footer__newsletter .field__hint { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.site-footer .newsletter-form .input {
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-accent) 35%, transparent);
  color: var(--on-accent);
}
.site-footer .newsletter-form .input::placeholder { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
@media (max-width: 48em) {
  .newsletter-form__row { flex-direction: column; align-items: stretch; }
  .site-footer__newsletter { grid-template-columns: 1fr; }
}

/* 23 bis. SÉLECTEUR DE LANGUE (FR/EN) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}
.lang-switch__link {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.4;
}
.lang-switch__link:hover { color: var(--accent); }
.lang-switch__link.is-active { background: var(--accent); color: var(--on-accent); }

/* 24. GALERIE — vignettes, visionneuse, lecteur audio */
.galerie-item { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); }
.galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.galerie-item:hover img { transform: scale(1.04); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.lightbox.is-open { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(9, 16, 38, 0.92); border: 0; cursor: zoom-out; }
.lightbox__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: min(1100px, 96vw); max-height: 92vh; }
.lightbox__image { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-md); cursor: zoom-in; transition: transform var(--transition-base); }
.lightbox__image.is-zoomed { transform: scale(1.8); cursor: zoom-out; }
.lightbox__caption { margin: 0; color: #fff; font-size: var(--text-sm); text-align: center; }
.lightbox__counter { margin: 0; color: color-mix(in srgb, #fff 70%, transparent); font-size: var(--text-xs); }
.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--space-10));
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: var(--text-lg);
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__nav--prev { left: calc(-1 * var(--space-12)); }
.lightbox__nav--next { right: calc(-1 * var(--space-12)); }
@media (max-width: 64em) {
  .lightbox__nav--prev { left: 0; }
  .lightbox__nav--next { right: 0; }
  .lightbox__close { top: 0; right: 0; }
  .lightbox__panel { max-height: 88vh; }
}

.audio-playlist { max-width: 820px; margin-inline: auto; }
.audio-playlist__player {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.audio-playlist__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.audio-playlist__time { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.audio-playlist__progress { width: 100%; accent-color: var(--accent); }
.audio-playlist__now { margin: 0; font-weight: 600; }
.audio-playlist__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.audio-playlist__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.audio-playlist__item:hover { border-color: var(--accent); }
.audio-playlist__item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.audio-playlist__index { font-size: var(--text-xs); font-weight: 700; color: var(--gold-ink); }
.audio-playlist__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.audio-playlist__titre { font-weight: 600; }
.audio-playlist__meta { font-size: var(--text-xs); color: var(--color-muted); }
.audio-playlist__state { color: var(--accent); }

/* 14. BREADCRUMB & PAGINATION */
.breadcrumb ol[role="list"] { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-border-strong); }
.pagination { display: flex; justify-content: center; gap: var(--space-1); }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.pagination__link:hover { background: var(--accent-soft); color: var(--on-accent-soft); }
.pagination__link[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 15. SKELETONS & SPINNERS */
.skeleton { background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--accent-soft) 50%, var(--color-surface-alt) 75%); background-size: 200% 100%; border-radius: var(--radius-md); animation: skeleton-wave 1.4s ease-in-out infinite; }
@keyframes skeleton-wave { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 20px; height: 20px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: var(--radius-full); animation: spinner-rotate 0.7s linear infinite; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* 16. CODE */
.code { display: block; padding: var(--space-4); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm); overflow-x: auto; }
code:not(pre code) { padding: 0.1em 0.4em; background: var(--color-surface-alt); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9em; }

/* 17. RETOUR EN HAUT */
.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-sticky);
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.back-to-top.is-visible { display: inline-flex; }
.back-to-top:hover { transform: translateY(-2px); }

/* ==========================================================================
   CHARTE ADIRTPI — COMPOSANTS SIGNATURE
   Ornements, cartes de section et bandeaux inspirés de l'infographie source
   (« Les différentes appellations de serviteurs dans l'ADIRTPI »).
   Couleurs : uniquement les tokens --adirtpi-* / --on-section-* de tokens.css.
   Ornements : SVG autonomes dans assets/images/ornaments/ — l'or y est en dur
   car les variables CSS ne s'appliquent pas aux fichiers chargés via <img>.
   ========================================================================== */

/* 18.1 CARTES DE SECTION — bandeau coloré + citation dorée ------------------ */

/* Couple de couleurs piloté par [data-section] :
   --section-color      : couleur pleine (bandeau, bordure, filets) ;
   --on-section-color   : texte sur la couleur pleine (tokens --on-section-*) ;
   --section-text-color : texte de section sur fond clair — variante accessible
                          --on-section-*-soft (AA sur le fond des cartes). */
.card--section {
  --section-color: var(--adirtpi-blue-deep);
  --on-section-color: var(--adirtpi-text-on-dark);
  --section-text-color: var(--section-color);
  border-color: var(--section-color); /* bordure fine à la couleur de section */
}
[data-section] {
  --section-color: var(--adirtpi-blue-deep);
  --on-section-color: var(--adirtpi-text-on-dark);
  --section-text-color: var(--section-color);
}
[data-section="danisme"] {
  --section-color: var(--adirtpi-danisme);
  --on-section-color: var(--on-section-danisme);
  --section-text-color: var(--on-section-danisme-soft);
}
[data-section="danite"] {
  --section-color: var(--adirtpi-danite);
  --on-section-color: var(--on-section-danite);
  --section-text-color: var(--on-section-danite-soft);
}
[data-section="daniste"] {
  --section-color: var(--adirtpi-daniste);
  --on-section-color: var(--on-section-daniste);
  --section-text-color: var(--on-section-daniste-soft);
}
[data-section="maison-priere"] {
  --section-color: var(--adirtpi-maison-priere);
  --on-section-color: var(--on-section-maison-priere);
  --section-text-color: var(--on-section-maison-priere-soft);
}
[data-section="responsables"] {
  --section-color: var(--adirtpi-responsables);
  --on-section-color: var(--on-section-responsables);
  --section-text-color: var(--on-section-responsables-soft);
}
[data-section="femmes"] {
  --section-color: var(--adirtpi-femmes);
  --on-section-color: var(--on-section-femmes);
  --section-text-color: var(--on-section-femmes-soft);
}
[data-section="jeunes"] {
  --section-color: var(--adirtpi-jeunes);
  --on-section-color: var(--on-section-jeunes);
  --section-text-color: var(--on-section-jeunes-soft);
}
[data-section="israel"] {
  --section-color: var(--adirtpi-blue-israel);
  --on-section-color: var(--adirtpi-white);
  --section-text-color: var(--adirtpi-blue-israel);
}
[data-section="ressources"] {
  --section-color: var(--adirtpi-gold);
  --on-section-color: var(--adirtpi-blue-deep);
  --section-text-color: #8A6508;
}

/* Codification appliquée aux contenus : en-têtes de tableaux et libellés */
[data-section] .table thead th,
[data-section] table thead th {
  background: var(--section-color);
  color: var(--on-section-color);
  border-bottom-color: var(--section-color);
}
[data-section] .section__kicker { color: var(--section-text-color); }

/* Bandeau d'en-tête coloré : icône ronde + titre en majuscules */
.card--section .card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--section-color);
  color: var(--on-section-color);
}
.card--section .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--on-section-color) 18%, transparent);
  color: var(--on-section-color);
  font-size: var(--text-lg);
  line-height: 1;
}
.card--section .card__icon :is(svg, img) { width: 1.5rem; height: 1.5rem; }
.card--section .card__header .card__title {
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: inherit;
}

/* « Définition : » souligné, en couleur de section */
.card--section .card__subtitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--section-text-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Citation de bas de carte — signature dorée de l'infographie.
   Taille ≥ 24 px : l'or #B8860B est AA « grand texte » sur fond clair. */
.card--section .card__quote {
  width: 100%;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 600;
  line-height: var(--leading-normal);
  text-align: center;
  text-wrap: balance;
  color: var(--adirtpi-text-quote);
}
.card--section > .card__quote,
.card--section .card__body > .card__quote { margin-top: auto; }

/* 18.2 SÉPARATEUR À BRANCHE D'OLIVIER --------------------------------------- */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 24px;
  margin-block: var(--space-8);
  color: var(--adirtpi-gold); /* filets ::before/::after en currentColor */
  background: url("../images/ornaments/branche-olivier.svg") center / auto 24px no-repeat;
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  flex: 1;
  max-width: max(0px, calc(50% - 9rem)); /* réserve ~240px au centre pour la branche */
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* 18.3 ORNEMENTS & CITATION DU PIED DE PAGE (balises posées par layout.php) -- */
.site-footer__ornaments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.site-footer__ornament {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  opacity: 0.9;
}
/* Balance de la justice (gauche) et branche d'olivier (droite) — cf. logo.md §Bandeau de
   clôture. max-width + max-height bornent les deux formats (64×64 et 240×24)
   sans déformer le motif ; le miroir de droite symétrise la paire. */
.site-footer__ornament--left,
.site-footer__ornament--right {
  max-width: clamp(6rem, 20vw, 11rem);
  max-height: clamp(2rem, 6vw, 3.5rem);
  object-fit: contain;
}
.site-footer__ornament--right { transform: scaleX(-1); }
.site-footer__verse {
  margin-inline: auto;
  max-width: 60ch;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-lg), 2.4vw, var(--text-2xl));
  font-style: italic;
  line-height: var(--leading-tight);
  text-align: center;
  text-wrap: balance;
  color: var(--adirtpi-text-on-dark);
}
.site-footer__mission {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--adirtpi-gold-light);
}

/* En thème sombre, --accent s'éclaircit (or/pastel) : la citation du pied de
   page en --adirtpi-text-on-dark exige un fond bleu nuit. On rétablit donc le
   bandeau de clôture de la charte (cf. logo.md) dans ce contexte uniquement. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer {
    background: linear-gradient(var(--adirtpi-blue-night), var(--adirtpi-blue-deep));
  }
}
:root[data-theme="dark"] .site-footer {
  background: linear-gradient(var(--adirtpi-blue-night), var(--adirtpi-blue-deep));
}

/* 18.4 BANDEAU DE CLÔTURE — citation biblique sur fond bleu nuit ------------- */
.section-banner {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) var(--space-5) var(--space-10);
  background: linear-gradient(var(--adirtpi-blue-night), var(--adirtpi-blue-deep));
  border-top: 2px solid var(--adirtpi-gold);
  color: var(--adirtpi-text-on-dark);
  text-align: center;
}
/* Balance de la justice (Dan) en tête de bandeau */
.section-banner::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  background: url("../images/ornaments/balance.svg") center / contain no-repeat;
  opacity: 0.95;
}
/* Branche d'olivier discrète en pied de bandeau */
.section-banner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  width: min(220px, 55%);
  height: 22px;
  transform: translateX(-50%);
  background: url("../images/ornaments/branche-olivier.svg") center / contain no-repeat;
  opacity: 0.55;
}
.section-banner__verse {
  max-width: 62ch;
  margin-inline: auto;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-style: italic;
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--adirtpi-gold-light);
}
.section-banner__mission {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adirtpi-text-on-dark);
}

/* 18.5 HÉROS SIGNATURE — ciel lumineux & silhouette de Jérusalem ------------- */

/* Fond ciel : image hero-ciel.svg (fournie en parallèle) superposée à des
   rayons et à un halo CSS. Si l'image manque, les couches CSS restent visibles
   (dégradation gracieuse), le fond bleu nuit servant de base. */
/* Héros d'accueil : photographie (dérivés générés par tools/optimize_images.php)
   avec voile bleu pour la lisibilité et zoom lent très discret. */
.hero--sky {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--adirtpi-blue-deep) 0%, var(--adirtpi-blue-night) 60%, var(--adirtpi-blue-deep) 100%);
  color: var(--adirtpi-text-on-dark);
}
.hero--sky::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  background: url("../images/hero/accueil-fond-1672.jpg") center 30% / cover no-repeat;
}
.hero--sky::before {
  /* WebP prioritaire ; les navigateurs sans image-set gardent le JPEG ci-dessus */
  background-image: image-set(
    url("../images/hero/accueil-fond-1672.webp") type("image/webp"),
    url("../images/hero/accueil-fond-1672.jpg") type("image/jpeg")
  );
}
.hero--sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%,
      color-mix(in srgb, var(--adirtpi-blue-deep) 60%, transparent),
      color-mix(in srgb, var(--adirtpi-blue-deep) 90%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--adirtpi-blue-deep) 45%, transparent) 0%,
      transparent 30%,
      color-mix(in srgb, var(--adirtpi-blue-deep) 35%, transparent) 78%,
      var(--adirtpi-blue-deep) 100%);
}
.hero--sky > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero--sky::before { animation: hero-zoom 30s ease-in-out infinite alternate; }
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
@media (max-width: 40em) {
  .hero--sky::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--adirtpi-blue-deep) 82%, transparent) 0%,
      color-mix(in srgb, var(--adirtpi-blue-deep) 78%, transparent) 100%);
  }
}
@media (max-width: 40em) {
  /* Variante 1280 plus légère sur mobile */
  .hero--sky::before,
  .hero--page::before {
    background-image: image-set(
      url("../images/hero/accueil-fond-1280.webp") type("image/webp"),
      url("../images/hero/accueil-fond-1280.jpg") type("image/jpeg")
    );
  }
}

.hero--sky .hero__title {
  color: var(--adirtpi-gold-light);
  text-shadow: 0 2px 18px color-mix(in srgb, var(--adirtpi-blue-deep) 65%, transparent);
}
.hero--sky .hero__text { color: var(--adirtpi-text-on-dark); }
/* CTA lisibles sur ciel : bouton primaire en or, contour or clair */
.hero--sky .btn--primary { background: var(--adirtpi-gold); color: var(--adirtpi-blue-deep); }
.hero--sky .btn--primary:hover:not(:disabled) { background: var(--adirtpi-gold-light); }
.hero--sky .btn--outline { border-color: var(--adirtpi-gold-light); color: var(--adirtpi-gold-light); }

/* Silhouette de Jérusalem en bas du héros, discrète et hors du texte */
.hero--jerusalem {
  position: relative;
  padding-bottom: calc(var(--space-12) + clamp(3.5rem, 9vw, 8rem));
}
.hero--jerusalem::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(3.5rem, 9vw, 8rem);
  background: url("../images/hero/jerusalem.svg") bottom center / contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}

/* 19. HÉROS DE PAGE — photographie de l'assemblée + voile bleu teinté section */
.hero--page {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-9), 7vw, var(--space-12));
  background-color: var(--adirtpi-blue-deep);
  color: var(--adirtpi-text-on-dark);
}
.hero--page::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  background: url("../images/hero/accueil-fond-1672.jpg") center 28% / cover no-repeat;
}
.hero--page::before {
  /* WebP prioritaire ; les navigateurs sans image-set gardent le JPEG ci-dessus */
  background-image: image-set(
    url("../images/hero/accueil-fond-1672.webp") type("image/webp"),
    url("../images/hero/accueil-fond-1672.jpg") type("image/jpeg")
  );
}
.hero--page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, var(--adirtpi-gold), transparent) bottom / 100% 3px no-repeat,
    radial-gradient(ellipse 70% 140% at 12% 0%,
      color-mix(in srgb, var(--section-color, var(--adirtpi-blue-israel)) 32%, transparent),
      transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--adirtpi-blue-night) 80%, transparent) 0%,
      color-mix(in srgb, var(--adirtpi-blue-deep) 86%, transparent) 72%,
      color-mix(in srgb, var(--adirtpi-blue-deep) 92%, transparent) 100%);
}
.hero--page > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero--page::before { animation: hero-zoom 34s ease-in-out infinite alternate; }
}
@media (max-width: 40em) {
  .hero--page::after {
    background:
      linear-gradient(90deg, transparent, var(--adirtpi-gold), transparent) bottom / 100% 3px no-repeat,
      linear-gradient(160deg,
        color-mix(in srgb, var(--adirtpi-blue-night) 90%, transparent) 0%,
        color-mix(in srgb, var(--adirtpi-blue-deep) 92%, transparent) 100%);
  }
}
.hero--page .section__kicker { color: var(--adirtpi-gold-light); }
.hero--page h1 { color: var(--adirtpi-gold-light); }
.hero--page .hero__text { color: var(--adirtpi-text-on-dark); }
.hero--page .devise { color: var(--adirtpi-gold-light); }

/* 20. ANIMATIONS — apparitions au scroll et entrée du héros (sobres) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .section__kicker,
  .hero__title,
  .hero__text,
  .hero__actions,
  .hero-verset { animation: hero-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__title { animation-delay: 90ms; }
  .hero__text { animation-delay: 160ms; }
  .hero__actions { animation-delay: 230ms; }
}

/* 21. MOSAÏQUE DES DOUZE TRIBUS — filtres, tuiles, modale de détail ---------- */

.tribe-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.tribe-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), transform var(--transition-base);
}
.tribe-chip:hover { border-color: var(--section-color, var(--adirtpi-gold)); transform: translateY(-1px); }
.tribe-chip.is-active {
  background: var(--section-color, var(--adirtpi-blue-deep));
  border-color: var(--section-color, var(--adirtpi-blue-deep));
  color: var(--on-section-color, var(--adirtpi-white));
}
.tribe-chip__count { font-size: var(--text-xs); font-weight: 700; opacity: 0.75; }

.tribe-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}
.tribe-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  overflow: hidden;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.tribe-tile::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--section-color, var(--adirtpi-gold));
  opacity: 0;
  transition: opacity var(--transition-base);
}
.tribe-tile:hover,
.tribe-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--section-color, var(--adirtpi-gold)) 55%, var(--color-border));
}
.tribe-tile:hover::after,
.tribe-tile:focus-visible::after { opacity: 1; }
.tribe-tile.is-filtered { display: none; }

.tribe-tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tribe-tile__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}
.tribe-tile__mere { border-color: color-mix(in srgb, var(--section-color, var(--adirtpi-gold)) 45%, var(--color-border-strong)); }
.tribe-tile__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-block: var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--section-color, var(--adirtpi-blue-israel)) 10%, transparent);
  color: var(--section-color, var(--adirtpi-blue-israel));
  transition: transform var(--transition-base);
}
.tribe-tile__glyph svg { width: 32px; height: 32px; }
.tribe-tile:hover .tribe-tile__glyph,
.tribe-tile:focus-visible .tribe-tile__glyph { transform: scale(1.08); }
.tribe-tile__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }
.tribe-tile__hebrew { font-size: var(--text-sm); color: var(--color-muted); }
.tribe-tile__symbol {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-ink);
}

/* Modale de détail */
.modal-tribu__panel { width: min(620px, 100%); }
.modal-tribu__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.modal-tribu__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--adirtpi-blue-israel) 12%, transparent);
  color: var(--adirtpi-blue-israel);
}
.modal-tribu__glyph svg { width: 36px; height: 36px; }
.modal-tribu__identity { min-width: 0; }
.modal-tribu__num {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}
.modal-tribu__hebrew { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-lg); color: var(--color-muted); }
.modal-tribu__benediction {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--adirtpi-gold);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.modal-tribu__verse {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.modal-tribu__verse-text { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.modal-tribu__symbol { margin: 0; font-size: var(--text-sm); }

@media (max-width: 40em) {
  .tribe-mosaic { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tribe-tile { padding: var(--space-4); }
}

/* 22. CARTES DES PILIERS — numéro, icône, filet or --------------------------- */

/* Pastille numérotée générique (méthode d'étude, parcours du chercheur) */
.pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--gold-bright);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold-ink);
  margin-bottom: var(--space-3);
}

.pillar-card { position: relative; overflow: hidden; }
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--adirtpi-gold), color-mix(in srgb, var(--adirtpi-gold) 15%, transparent));
}
.pillar-card__num {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--adirtpi-gold) 24%, transparent);
  pointer-events: none;
  user-select: none;
}
.pillar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border: 2px solid var(--gold-bright);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--adirtpi-gold) 9%, transparent);
  color: var(--gold-ink);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  transition: transform var(--transition-base), background-color var(--transition-base);
}
.pillar-card__icon svg { width: 28px; height: 28px; }
.pillar-card:hover .pillar-card__icon {
  transform: translateY(-2px) scale(1.05);
  background: color-mix(in srgb, var(--adirtpi-gold) 16%, transparent);
}
.pillar-card__rule {
  display: block;
  width: 42px;
  height: 3px;
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--adirtpi-gold), transparent);
}

/* 18.6 AJUSTEMENTS RESPONSIVE ------------------------------------------------ */
@media (max-width: 40em) {
  .card--section .card__header { padding: var(--space-3) var(--space-4); }
  .card--section .card__icon { width: 2.25rem; height: 2.25rem; }
  .card--section .card__icon :is(svg, img) { width: 1.25rem; height: 1.25rem; }
  .section-banner { padding: var(--space-10) var(--space-4) var(--space-9); }
  .site-footer__ornaments { gap: var(--space-3); }
}