/* ============================================================
   CMAC — Couche "premium" : profondeur, motion, micro-interactions
   Progressive enhancement : le site reste 100% utilisable sans JS.
   ============================================================ */

/* ---------- Reveal au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--stagger, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Sans JS ou reduced-motion : tout visible immédiatement */
.no-js .reveal,
html.reduced-motion .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Titre de section : soulignement qui se trace ---------- */
.section-title::after {
  width: 0;
  transition: width .9s cubic-bezier(.22,.61,.36,1) .25s;
}
.section-title.in::after,
.no-js .section-title::after,
html.reduced-motion .section-title::after {
  width: 64px;
}

/* ---------- Header : état compact au scroll ---------- */
header.site {
  transition: box-shadow .35s ease, background-color .35s ease;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
header.site.scrolled {
  box-shadow: 0 6px 24px rgba(13,36,64,.10);
}
header.site .container {
  transition: padding .35s ease;
}
header.site.scrolled .container {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Hero : canvas blueprint + entrée du texte ---------- */
.hero { position: relative; overflow: hidden; }
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.hero .kicker, .hero h1, .hero p.lead, .hero .btn {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero .kicker  { animation-delay: .10s; }
.hero h1       { animation-delay: .25s; }
.hero p.lead   { animation-delay: .42s; }
.hero .btn     { animation-delay: .58s; }
.hero .btn-ghost { animation-delay: .68s; }

@keyframes heroRise {
  to { opacity: 1; transform: none; }
}
html.reduced-motion .hero .kicker,
html.reduced-motion .hero h1,
html.reduced-motion .hero p.lead,
html.reduced-motion .hero .btn {
  animation: none; opacity: 1; transform: none;
}

/* Indicateur de scroll */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 14px;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold-light);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
html.reduced-motion .scroll-cue::before { animation: none; }
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* ---------- Bandeau de chiffres clés ---------- */
.stats-band {
  background: var(--navy);
  color: var(--white);
  padding: 54px 0;
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px);
}
.stats-band .container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}
.stat .stat-num {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
}
.stat .stat-num sup { font-size: .45em; }
.stat .stat-label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b9c5d2;
}
@media (max-width: 760px) {
  .stats-band .container { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}

/* ---------- Cartes : profondeur & tilt ---------- */
.grid { perspective: 1200px; }
.card {
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease,
    border-color .45s ease;
  transform-style: preserve-3d;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    box-shadow: 0 18px 44px rgba(13,36,64,.14);
    border-color: var(--gold);
  }
  .card.tilt {
    transform:
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translateY(-6px);
    transition: box-shadow .45s ease, border-color .45s ease;
  }
}
.card .icon {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .45s ease;
}
.card:hover .icon {
  transform: translateZ(30px) scale(1.08);
  background: var(--gold);
  color: var(--white);
}
.card .num { transition: transform .45s ease; }
.card:hover .num { transform: translateZ(24px); }

/* ---------- Liens & boutons raffinés ---------- */
.btn { position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -80%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn:hover::after { left: 130%; }
html.reduced-motion .btn::after { display: none; }

nav.main a { position: relative; }
nav.main a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
nav.main a:not(.cta):hover::after,
nav.main a.active:not(.cta)::after { transform: scaleX(1); }

/* ---------- Tableaux : ligne au survol ---------- */
table.data tbody tr { transition: background-color .25s ease; }
@media (hover: hover) {
  table.data tbody tr:hover td { background: #f3ecdd; }
}

/* ---------- Documents ---------- */
.doc-item { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.doc-item:hover { transform: translateX(6px); }
.doc-item .ext { transition: transform .35s ease, background-color .35s ease; }
.doc-item:hover .ext { background: var(--gold); color: var(--white); transform: rotate(-4deg) scale(1.05); }

/* ---------- Photo président ---------- */
.president-photo img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.president-photo:hover img { transform: scale(1.03); }
.president-photo { overflow: hidden; }

/* ---------- Page hero intérieure : léger fondu ---------- */
.page-hero h1, .page-hero .crumb {
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.page-hero .crumb { animation-delay: .05s; }
.page-hero h1 { animation-delay: .15s; }
html.reduced-motion .page-hero h1,
html.reduced-motion .page-hero .crumb { animation: none; opacity: 1; transform: none; }