/* ==========================================================================
   Arkancia United People — hero.css
   Slider plein écran + composants visuels de la refonte
   (bandeau mosaïque, cartes image, chiffres, section sombre)
   ========================================================================== */

/* ---------- Slider ---------- */
.hero-slider {
  position: relative;
  height: min(88vh, 860px);
  min-height: 560px;
  background: var(--noir);
  color: var(--creme);
  overflow: hidden;
  outline: none;
}
.hero-slider:focus-visible { box-shadow: inset 0 0 0 3px var(--or); }

.hs-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.1s;
}
.hs-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s;
  z-index: 2;
}
.hs-slide.is-leaving { z-index: 1; }

/* image de fond : Ken Burns lent, voile sombre gradué, mosaïque en surimpression */
.hs-media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hs-media img,
.hs-media .hs-fallback {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s linear;
  will-change: transform;
}
.hs-slide.is-active .hs-media img,
.hs-slide.is-active .hs-media .hs-fallback { transform: scale(1.14) translate3d(-1.2%, -0.6%, 0); }
.hs-fallback { background: var(--noir) url('/assets/img/mosaic-hero.png') center right / cover no-repeat; }
.hs-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,.18) 100%),
    linear-gradient(0deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,0) 45%);
}
.hs-media::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: url('/assets/img/mosaic-hero.png') right center / cover no-repeat;
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* contenu */
.hs-content {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 96px;
}
.hs-kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
  display: inline-flex; align-items: center; gap: 14px;
}
.hs-kicker::before { content: ''; width: 36px; height: 1px; background: var(--or); }
.hs-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--creme);
  max-width: 13ch;
  margin-top: var(--space-5);
}
.hs-title em { font-style: italic; color: var(--or); }
.hs-lead {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: rgba(250,248,242,.78);
}
.hs-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* mouvement d'entrée du texte, par diapositive */
.hs-slide .hs-kicker, .hs-slide .hs-title, .hs-slide .hs-lead, .hs-slide .hs-actions {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.hs-slide.is-active .hs-kicker  { opacity: 1; transform: none; transition-delay: .25s; }
.hs-slide.is-active .hs-title   { opacity: 1; transform: none; transition-delay: .38s; }
.hs-slide.is-active .hs-lead    { opacity: 1; transform: none; transition-delay: .52s; }
.hs-slide.is-active .hs-actions { opacity: 1; transform: none; transition-delay: .66s; }

/* boutons sur fond sombre */
.hero-slider .btn-primary { background: var(--or); color: var(--noir); border-color: var(--or); }
.hero-slider .btn-primary:hover { background: var(--or-clair); border-color: var(--or-clair); }
.hero-slider .btn-secondary { color: var(--creme); border-color: rgba(250,248,242,.4); }
.hero-slider .btn-secondary:hover { background: var(--creme); color: var(--noir); border-color: var(--creme); }

/* barre de contrôle */
.hs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  border-top: 1px solid rgba(250,248,242,.12);
  background: linear-gradient(0deg, rgba(10,10,10,.55), rgba(10,10,10,0));
}
.hs-bar .container {
  display: flex; align-items: center; gap: var(--space-6);
  height: 72px;
}
.hs-counter {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--creme);
  letter-spacing: .1em;
  display: flex; align-items: baseline; gap: 6px;
}
.hs-counter-total { color: rgba(250,248,242,.45); }
.hs-counter-current { font-size: var(--fs-lg); color: var(--or); }
.hs-progress {
  flex: 1; height: 1px; background: rgba(250,248,242,.18); position: relative;
}
.hs-progress span {
  position: absolute; inset: 0;
  background: var(--or);
  transform-origin: left center;
  transform: scaleX(0);
}
.hs-dots { display: flex; gap: 10px; }
.hs-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(250,248,242,.5);
  background: transparent;
  transition: all var(--t-base);
}
.hs-dot.is-active, .hs-dot:hover { background: var(--or); border-color: var(--or); transform: scale(1.15); }
.hs-nav { display: flex; gap: 8px; }
.hs-prev, .hs-next {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(250,248,242,.35);
  color: var(--creme);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-base);
}
.hs-prev:hover, .hs-next:hover { background: var(--or); border-color: var(--or); color: var(--noir); }
.hs-prev svg, .hs-next svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (max-width: 960px) {
  .hero-slider { height: auto; min-height: 640px; }
  .hs-content { padding: 120px 0 130px; justify-content: flex-end; }
  .hs-bar .container { gap: var(--space-4); }
  .hs-dots { display: none; }
}
@media (max-width: 640px) {
  .hs-title { max-width: none; }
  .hs-actions .btn { width: 100%; justify-content: center; }
  .hs-media::after { background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.25) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-media img, .hs-media .hs-fallback, .hs-slide.is-active .hs-media img { transform: none; transition: none; }
  .hs-slide { transition: opacity .3s; }
  .hs-slide .hs-kicker, .hs-slide .hs-title, .hs-slide .hs-lead, .hs-slide .hs-actions { transition: none; }
}

/* ---------- Bandeau mosaïque (transition entre sections) ---------- */
.mosaic-band {
  height: 120px;
  background: var(--noir) url('/assets/img/mosaic-band.png') center / cover no-repeat;
}

/* ---------- Cartes avec image ---------- */
.img-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--noir);
  color: var(--creme);
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.img-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s;
  z-index: 0;
}
.img-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.35) 50%, rgba(10,10,10,.05) 100%);
}
.img-card:hover img { transform: scale(1.06); }
.img-card-body { position: relative; z-index: 2; padding: var(--space-6); }
.img-card-num {
  font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 700; color: var(--or); line-height: 1;
  margin-bottom: var(--space-3);
}
.img-card h3 { color: var(--creme); font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.img-card p { color: rgba(250,248,242,.78); font-size: var(--fs-sm); line-height: 1.6; }
.img-card .pill { background: rgba(250,248,242,.12); color: var(--creme); }

/* ---------- Section image + texte ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
}
.split-media {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--creme-fonce);
  box-shadow: var(--shadow-lg);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.is-mosaic { background: var(--noir) url('/assets/img/mosaic-tile.png') center / cover; }

/* ---------- Chiffres sur fond sombre ---------- */
.figures {
  background: var(--noir); color: var(--creme);
  padding: var(--space-9) 0;
  position: relative; overflow: hidden;
}
.figures::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/img/mosaic-hero.png') right center / cover no-repeat; opacity: .22;
}
.figures .container { position: relative; }
.figures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.figure { border-left: 2px solid var(--or); padding-left: var(--space-5); }
.figure-value { font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; color: var(--creme); line-height: 1; }
.figure-label { margin-top: var(--space-3); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--or); font-weight: 600; }
.figure-note { margin-top: var(--space-2); font-size: var(--fs-sm); color: rgba(250,248,242,.6); }

/* ---------- Citation institutionnelle ---------- */
.quote-band {
  background: var(--creme-fonce);
  padding: var(--space-8) 0;
}
.quote-band blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.4; color: var(--noir);
  max-width: 34ch; border-left: 3px solid var(--or); padding-left: var(--space-6);
}
.quote-band cite {
  display: block; margin-top: var(--space-4); font-family: var(--font-sans); font-style: normal;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--or-fonce); font-weight: 600;
}

/* ---------- Bloc « trajectoire » ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.timeline-item { border-top: 2px solid var(--gris-10); padding-top: var(--space-4); }
.timeline-item.is-now { border-top-color: var(--or); }
.timeline-when { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--or-fonce); font-weight: 700; }
.timeline-item h4 { margin-top: var(--space-2); }
.timeline-item p { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--gris-70); line-height: 1.6; }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .figures-grid, .timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .figures-grid, .timeline { grid-template-columns: 1fr; }
  .mosaic-band { height: 72px; }
}

/* ---------- Cartes publics (image + texte) ---------- */
.public-card {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: center;
  background: var(--blanc); border: 1px solid var(--gris-10); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.public-card:hover { border-color: var(--or); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.public-card-media { width: 96px; height: 96px; border-radius: var(--radius); overflow: hidden; background: var(--noir); }
.public-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.public-card:hover .public-card-media img { transform: scale(1.08); }
.public-card h4 { font-size: var(--fs-lg); margin-bottom: 2px; }
.public-card p { font-size: var(--fs-sm); color: var(--gris-70); line-height: 1.5; }

/* ---------- Cartes actualités avec image ---------- */
.news-card.has-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--noir); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.news-card.has-media:hover .news-card-media img { transform: scale(1.05); }
.news-card-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.news-card-body .news-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) { .public-card { grid-template-columns: 72px 1fr; } .public-card-media { width: 72px; height: 72px; } }