/* ════════════════════════════════════════════════════════════════════
   AL IHSAN — Accueil (award v2) : hero cinématique multi-couches,
   bandeau KPI premium, mission, programmes, projets, carte, CTA.
   transform/opacity only · GPU-friendly · prefers-reduced-motion respecté · RTL-first.
   Les micro-interactions réutilisables (toutes pages) vivent dans award.css.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  HERO cinématique  ───────────────────────── */
.hero { --hero-pad: clamp(3.5rem, 9vw, 7rem); min-height: clamp(600px, 90vh, 880px); }
.hero__bg { overflow: clip; will-change: transform; }
.hero__bg img { transform: scale(1.06); will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .hero__bg img { animation: ihsan-kenburns 28s var(--ease-inout) forwards; }
  @keyframes ihsan-kenburns {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to   { transform: scale(1.17) translate3d(-1.6%, -1.2%, 0); }
  }
}

/* Voile de lecture : lumière chaude en haut, dégradé marque en biais, fondu bas */
.hero::after {
  background:
    radial-gradient(130% 95% at 86% 6%, color-mix(in oklch, var(--gold) 30%, transparent), transparent 50%),
    linear-gradient(115deg, color-mix(in oklch, var(--pine-deep) 95%, transparent) 0%, color-mix(in oklch, var(--forest) 58%, transparent) 54%, transparent 100%),
    linear-gradient(to top, color-mix(in oklch, var(--pine-deep) 74%, transparent), transparent 30%);
}
html[dir="rtl"] .hero::after {
  background:
    radial-gradient(130% 95% at 14% 6%, color-mix(in oklch, var(--gold) 30%, transparent), transparent 50%),
    linear-gradient(245deg, color-mix(in oklch, var(--pine-deep) 95%, transparent) 0%, color-mix(in oklch, var(--forest) 58%, transparent) 54%, transparent 100%),
    linear-gradient(to top, color-mix(in oklch, var(--pine-deep) 74%, transparent), transparent 30%);
}

/* Aurora : nappes de couleur en dérive derrière le voile (gold + leaf + forest) */
.hero__aurora {
  position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  filter: blur(56px) saturate(1.08); opacity: .32; mix-blend-mode: screen; /* retenue : nappe discrète */
  background:
    radial-gradient(38% 48% at 24% 28%, color-mix(in oklch, var(--leaf) 85%, transparent), transparent 70%),
    radial-gradient(34% 42% at 80% 22%, color-mix(in oklch, var(--gold) 80%, transparent), transparent 70%),
    radial-gradient(52% 60% at 62% 86%, color-mix(in oklch, var(--forest) 78%, transparent), transparent 72%);
  will-change: transform;
}
/* RTL : on miroir les positions horizontales (chaud à gauche, comme le voile + la lueur). */
html[dir="rtl"] .hero__aurora {
  background:
    radial-gradient(38% 48% at 76% 28%, color-mix(in oklch, var(--leaf) 85%, transparent), transparent 70%),
    radial-gradient(34% 42% at 20% 22%, color-mix(in oklch, var(--gold) 80%, transparent), transparent 70%),
    radial-gradient(52% 60% at 38% 86%, color-mix(in oklch, var(--forest) 78%, transparent), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__aurora { animation: ihsan-aurora 24s var(--ease-inout) infinite alternate; }
  @keyframes ihsan-aurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2.5%, 0) scale(1.14); }
  }
}

/* Grain de film : matière subtile sur les fonds sombres */
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 170px; opacity: .05; mix-blend-mode: overlay;
}

/* Graines de blé flottantes (ambiance organique) */
.hero__seeds { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; will-change: transform; }
.hero__seeds span {
  position: absolute; inset-block-end: -6%; width: .5rem; height: .5rem; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, color-mix(in oklch, var(--wheat) 96%, white), var(--gold) 70%);
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--gold) 60%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__seeds span { animation: ihsan-seed var(--d, 17s) linear var(--delay, 0s) infinite; }
  @keyframes ihsan-seed { /* poussière dorée à peine perceptible (retenue) */
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
    10%  { opacity: .5; }
    88%  { opacity: .3; }
    100% { opacity: 0; transform: translate3d(var(--drift, 24px), -118vh, 0) scale(1.05); }
  }
}
.hero__seeds span:nth-child(1)  { inset-inline-start: 6%;  width: .42rem; --d: 19s; --delay: 0s;   --drift: 34px; }
.hero__seeds span:nth-child(2)  { inset-inline-start: 16%; width: .3rem;  --d: 23s; --delay: 3s;   --drift: -26px; }
.hero__seeds span:nth-child(3)  { inset-inline-start: 27%; width: .55rem; --d: 16s; --delay: 6s;   --drift: 20px; }
.hero__seeds span:nth-child(4)  { inset-inline-start: 38%; width: .34rem; --d: 21s; --delay: 1.5s; --drift: -34px; }
.hero__seeds span:nth-child(5)  { inset-inline-start: 49%; width: .46rem; --d: 18s; --delay: 8s;   --drift: 28px; }
.hero__seeds span:nth-child(6)  { inset-inline-start: 59%; width: .3rem;  --d: 25s; --delay: 4s;   --drift: -22px; }
.hero__seeds span:nth-child(7)  { inset-inline-start: 68%; width: .5rem;  --d: 20s; --delay: 11s;  --drift: 36px; }
.hero__seeds span:nth-child(8)  { inset-inline-start: 77%; width: .36rem; --d: 22s; --delay: 2.5s; --drift: -30px; }
.hero__seeds span:nth-child(9)  { inset-inline-start: 86%; width: .48rem; --d: 17s; --delay: 7s;   --drift: 22px; }
.hero__seeds span:nth-child(10) { inset-inline-start: 93%; width: .32rem; --d: 24s; --delay: 9.5s; --drift: -28px; }

/* Lueur de blé (existante) + flottement */
.hero__glow {
  position: absolute; z-index: -1; inset-block-start: -12%; inset-inline-end: -6%;
  width: clamp(300px, 40vw, 600px); aspect-ratio: 1; border-radius: 50%;
  background: var(--glow-gold); filter: blur(10px); pointer-events: none; will-change: transform;
}
/* En RTL, inset-inline-end bascule automatiquement à gauche → la lueur reste du
   même côté que le halo doré du voile (miroir correct). Pas d'override de position. */
@media (prefers-reduced-motion: no-preference) {
  .hero__glow { animation: ihsan-float 10s var(--ease-inout) infinite alternate; }
  @keyframes ihsan-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-20px, 26px, 0) scale(1.1); } }
  html[dir="rtl"] .hero__glow { animation: ihsan-float-rtl 10s var(--ease-inout) infinite alternate; }
  @keyframes ihsan-float-rtl { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(20px, 26px, 0) scale(1.1); } }
}

/* Vague « champ » en bas du hero */
.hero__field { position: absolute; inset-block-end: -1px; inset-inline: 0; z-index: 1; line-height: 0; pointer-events: none; color: var(--bg); }
.hero__field svg { width: 100%; height: clamp(44px, 7vw, 96px); display: block; }

/* Contenu : entrée chorégraphiée (montée + flou + clip) */
.hero__inner { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { opacity: 0; animation: ihsan-rise .95s var(--ease-out) both; }
  .hero__inner > *:nth-child(1) { animation-delay: .10s; }
  .hero__inner > *:nth-child(2) { animation-delay: .20s; }
  .hero__inner > *:nth-child(3) { animation-delay: .32s; }
  .hero__inner > *:nth-child(4) { animation-delay: .46s; }
  .hero__inner > *:nth-child(5) { animation-delay: .60s; }
  .hero__inner > *:nth-child(6) { animation-delay: .72s; }
  .hero__inner > *:nth-child(7) { animation-delay: .84s; }
  @keyframes ihsan-rise {
    from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  .hero__flag { animation: ihsan-rise .95s var(--ease-out) both, ihsan-flag-wave 6s var(--ease-inout) 1.4s infinite; transform-origin: left center; }
  html[dir="rtl"] .hero__flag { transform-origin: right center; }
  @keyframes ihsan-flag-wave { 0%, 100% { rotate: 0deg; } 50% { rotate: -3deg; } }
}
/* Colonne de texte plus large → titre en 2-3 lignes, CTA au-dessus de la ligne de flottaison.
   --flow plus généreux = plus d'air entre sur-titre / titre / signature / accroche / CTA (retenue). */
.hero__inner { max-width: min(56rem, 100%); padding-block: clamp(2.75rem, 7vw, 5.5rem); --flow: 1.5em; }
.hero__cta { margin-block-start: 2.4rem; }
.harvest { margin-block-start: .35rem; }
/* Titre monumental, éditorial (Swiss × arabe) */
.hero h1 { font-size: clamp(2.7rem, 1.5rem + 4.4vw, 5.4rem); line-height: 1.03; max-width: 18ch; text-shadow: 0 2px 30px oklch(0.18 0.04 158 / .35); }
.hero h1 .accent { color: var(--wheat); }
.hero__lead { max-width: 46ch; text-shadow: 0 1px 16px oklch(0.18 0.04 158 / .3); }

/* ═══════════  MOMENT SIGNATURE — « الخطّ الحاصد » : la ligne qui moissonne  ═══════════
   Une SEULE ligne d'or se trace dans le sens de lecture (LTR → / RTL ←) sous le titre,
   puis l'épi de blé du logo éclôt à son extrémité. Concept (moisson/ihsan) + marque + geste,
   en un seul trait. RTL natif (flex se miroite), 0 JS, identique en reduced-motion (tracé plein). */
.harvest { display: flex; align-items: center; gap: .8rem; margin-block-start: .1rem; }
.harvest__rule {
  height: 2px; inline-size: min(20rem, 60%); border-radius: 2px; transform-origin: left center;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--gold) 75%, transparent) 14%, var(--wheat) 62%, var(--gold));
  box-shadow: 0 0 14px color-mix(in oklch, var(--gold) 55%, transparent);
  clip-path: inset(0 0 0 0); /* défaut : tracé plein (reduced-motion / pas d'anim) */
}
html[dir="rtl"] .harvest__rule { background: linear-gradient(270deg, transparent, color-mix(in oklch, var(--gold) 75%, transparent) 14%, var(--wheat) 62%, var(--gold)); }
.harvest__ear { inline-size: 1.6rem; block-size: 1.6rem; color: var(--wheat); flex: 0 0 auto; filter: drop-shadow(0 0 10px color-mix(in oklch, var(--gold) 55%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .harvest__rule { clip-path: inset(0 100% 0 0); animation: ihsan-harvest 1.1s var(--ease-out) .75s forwards; }
  html[dir="rtl"] .harvest__rule { clip-path: inset(0 0 0 100%); }
  @keyframes ihsan-harvest { to { clip-path: inset(0 0 0 0); } }
  .harvest__ear { opacity: 0; transform: scale(.4) rotate(-14deg); transform-origin: bottom center; animation: ihsan-harvest-ear .7s var(--ease-spring) 1.55s forwards; }
  @keyframes ihsan-harvest-ear { to { opacity: 1; transform: none; } }
}

/* CTA hero : la 1re action gagne une lueur chaude */
.hero__cta .btn--cta { box-shadow: var(--shadow-gold); }

/* Indice de défilement : ligne fine + pastille descendante + chevron */
.hero__scroll { display: inline-grid; place-items: center; gap: .5rem; }
.hero__scroll::before {
  content: ""; width: 1px; height: clamp(26px, 4vw, 40px);
  background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--cream) 80%, transparent));
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
.hero__scroll svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  /* mouvement composité (transform/opacity) uniquement — pas d'anim mask-position (repaint). */
  .hero__scroll svg { animation: ihsan-bounce 1.9s var(--ease-inout) infinite; }
  @keyframes ihsan-bounce { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(7px); opacity: 1; } }
}

/* ─────────────  BANDEAU KPI premium  ───────────── */
.stats-band { position: relative; overflow: clip; isolation: isolate; }
/* Filet doré supérieur révélé */
.stats-band::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 8%; height: 2px;
  background: var(--hairline); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) .2s;
}
.stats-band.is-in::before { opacity: 1; }
/* Balayage de lumière à l'apparition */
.stats-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 35%, color-mix(in oklch, var(--gold) 12%, transparent) 50%, transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .stats-band.is-in::after { animation: ihsan-sheen 1.5s var(--ease-out) .25s; }
}
.stats-band .kpi { background: transparent; border: 0; box-shadow: none; }
.stats-band .kpi:hover { transform: none; box-shadow: none; }
.stats-band .kpi::before { display: none; } /* neutralise le filet de survol (réservé aux KPI sur carte) */
/* Séparateurs verticaux entre KPI (desktop) */
@media (min-width: 721px) {
  .stats-band .kpi + .kpi::after {
    content: ""; position: absolute; inset-block: 18%; inset-inline-start: calc(var(--gap, var(--space-m)) / -2); width: 1px;
    background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
  }
}
.stats-band .kpi__num { background: linear-gradient(120deg, var(--forest), var(--leaf)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-band .kpi__num .suffix { -webkit-text-fill-color: var(--gold); }
/* Contraste forcé Windows : le texte clippé en dégradé deviendrait invisible → on rétablit un remplissage plein. */
@media (forced-colors: active) {
  .stats-band .kpi__num, :root[data-theme="dark"] .stats-band .kpi__num {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: CanvasText; color: CanvasText;
  }
  .stats-band .kpi__num .suffix { -webkit-text-fill-color: CanvasText; }
}
.stats-band .kpi__icon { transition: transform var(--dur-base) var(--ease-spring); }
.stats-band .kpi:hover .kpi__icon { transform: translateY(-3px) scale(1.1) rotate(-6deg); }
:root[data-theme="dark"] .stats-band .kpi__num { background: linear-gradient(120deg, var(--wheat), var(--leaf)); -webkit-background-clip: text; background-clip: text; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .stats-band .kpi__num { background: linear-gradient(120deg, var(--wheat), var(--leaf)); -webkit-background-clip: text; background-clip: text; }
}

/* ─────────────────────────  Section MISSION (intro)  ───────────────────────── */
.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.intro__title { font-size: var(--step-3); }
.intro__title em { font-style: italic; color: var(--gold); font-family: var(--font-display); }
.intro__body { color: var(--ink-soft); font-size: var(--step-1); margin-block: 1.2rem 1.8rem; max-width: 46ch; }
.intro__art {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: clip;
  background: linear-gradient(150deg, var(--pine-deep), var(--forest) 58%, var(--leaf));
  display: grid; place-items: center; box-shadow: var(--shadow-3); isolation: isolate;
  transform-style: preserve-3d;
}
/* Anneau décoratif + grain dans le panneau */
.intro__art::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  border: 1px dashed color-mix(in oklch, var(--wheat) 40%, transparent); opacity: .5;
}
:root[data-theme="dark"] .intro__art::before { border-color: color-mix(in oklch, var(--wheat) 58%, transparent); opacity: .7; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .intro__art::before { border-color: color-mix(in oklch, var(--wheat) 58%, transparent); opacity: .7; } }
.intro__art::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 150px; opacity: .06; mix-blend-mode: overlay;
}
.intro__art .emblem { position: relative; z-index: 1; width: 56%; color: color-mix(in oklch, var(--wheat) 82%, white); opacity: .96; filter: drop-shadow(0 12px 30px oklch(0 0 0 / .3)); }
.intro__art .emblem svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .intro__art .emblem { animation: ihsan-sway 7s var(--ease-inout) infinite alternate; transform-origin: bottom center; }
  @keyframes ihsan-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
}
.intro__badge {
  position: absolute; z-index: 2; inset-block-end: 1.2rem; inset-inline-end: 1.2rem;
  background: color-mix(in oklch, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--brand); border: 1px solid color-mix(in oklch, white 30%, transparent); border-radius: var(--radius);
  padding: .9rem 1.2rem; box-shadow: var(--shadow-2); text-align: center; line-height: 1.1; transform: translateZ(40px);
}
.intro__badge strong { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); }
.intro__badge span { font-size: .78rem; color: var(--ink-soft); }
:root[data-theme="dark"] .intro__badge span { color: color-mix(in oklch, var(--ink) 78%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .intro__badge span { color: color-mix(in oklch, var(--ink) 78%, var(--bg)); } }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } .intro__art { max-width: 420px; margin-inline: auto; } }
@media (min-width: 861px) { html[dir="rtl"] .intro { grid-template-columns: .95fr 1.05fr; } }

/* ─────────────────────────  Carte GIS — moment signature  ───────────────────────── */
.gis__map {
  position: relative; border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--brand-soft) 60%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-2); isolation: isolate;
}
.gis__map::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .5; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 20%, var(--glow-gold), transparent 70%);
}
.gis__legend { padding-block-start: .4rem; }
/* Panneau carte : nombre + liste des projets publiés de la région (cliquables). */
.gis__count { margin: 0 0 .6rem; font-weight: 700; color: var(--brand); }
.gis__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; max-height: 16rem; overflow: auto; }
.gis__list li { border-block-end: 1px solid var(--border); }
.gis__list li:last-child { border-block-end: 0; }
.gis__list a { display: block; padding: .55rem .2rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--step--1); transition: color var(--dur-fast), padding-inline-start var(--dur-fast); }
.gis__list a::before { content: "←"; color: var(--gold); margin-inline-end: .5em; opacity: 0; transition: opacity var(--dur-fast); }
html[dir="ltr"] .gis__list a::before { content: "→"; }
.gis__list a:hover { color: var(--brand); padding-inline-start: .4rem; }
.gis__list a:hover::before { opacity: 1; }
.gis__panel { position: relative; overflow: clip; }
.gis__panel::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--leaf));
}

/* ─────────────────────────  CTA transparence  ───────────────────────── */
.cta-band { box-shadow: var(--shadow-3); }
.cta-band::before { background: var(--glow-gold); }
.cta-band > * { position: relative; z-index: 1; } /* contenu au-dessus des lueurs */

/* Retenue : 4 graines discrètes suffisent (au lieu de 10) sur tous les écrans. */
.hero__seeds span:nth-child(n + 5) { display: none; }

/* ─────────────────────────  Tablette : KPI en 2×2 (évite des KPI trop larges)  ───────────────────────── */
@media (max-width: 860px) and (min-width: 521px) {
  .stats-band .kpis { grid-template-columns: repeat(2, 1fr); }
  .stats-band .kpi:nth-child(odd) + .kpi::after { display: none; } /* pas de séparateur en 2 colonnes */
}

/* ─────────────────────────  Allègement mobile (GPU)  ───────────────────────── */
@media (max-width: 600px) {
  /* L'aurora floutée + mix-blend-mode est la couche la plus coûteuse : on la fige (pas d'anim ni de parallaxe ici), on réduit le flou et on libère le compositeur. */
  .hero__aurora { filter: blur(30px) saturate(1.1); opacity: .42; animation: none; will-change: auto; }
  /* Image LCP : on fige le Ken Burns (cadrage conservé) — pas d'anim continue sur l'image de fond. */
  .hero__bg img { animation: none; transform: scale(1.04); }
  /* Grain quasi imperceptible (.05) → on le retire : un recomposite plein écran de moins. */
  .hero__grain { display: none; }
  /* Indice de défilement superflu sur petit écran (la vague + les CTA suffisent). */
  .hero__scroll { display: none; }
  /* Hauteur de hero adaptée aux petits écrans (svh) — évite le débordement en paysage
     que provoquait le plancher clamp 600px de .hero (home.css gagne la cascade sur theme.css). */
  .hero { min-height: 86vh; min-height: 86svh; }
  .stats-band { margin-block-start: -1.5rem; }
}
/* Paysage court : hero compact (sinon ~2 écrans avant les CTA) + pas d'indice de défilement. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__inner { padding-block: clamp(1.5rem, 6vh, 2.75rem); }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }
  .hero__scroll { display: none; }
}

/* Image réelle de la section Mission (remplace l'emblème quand une image est définie) */
.intro__img { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.intro__art:has(.intro__img)::before, .intro__art:has(.intro__img)::after { opacity: 0; }
.intro__art .intro__badge { z-index: 2; }

/* ═══════════════════════ HERO — CARROUSEL MULTILINGUE (CPT « slide ») ═══════════════════════
 * Piste à défilement natif (scroll-snap) → tactile + clavier + RTL. Chaque slide est
 * autonome (image + voile + texte centré), reprenant le traitement visuel du hero statique.
 */
/* Hero statique (une seule slide) : les enveloppes du carrousel sont neutralisées
   (display:contents) → mise en page identique à l'original, zéro régression. */
.hero:not(.hero--slider) .hero__slides,
.hero:not(.hero--slider) .hero__slide { display: contents; }

.hero--slider { padding: 0; }
.hero--slider::after { display: none; }                 /* le voile est porté par chaque slide */
.hero--slider .hero__slides {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-wrap: nowrap;
  will-change: transform; touch-action: pan-y;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .hero--slider .hero__slides { transition: none; } }
.hero--slider .hero__slide {
  position: relative; flex: 0 0 100%; inline-size: 100%; min-block-size: inherit;
  display: grid; align-items: center; overflow: clip; isolation: isolate;
}
.hero--slider .hero__slide .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--slider .hero__slide .hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: none; transform: none; }
.hero--slider .hero__slide .hero__bg-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pine-deep), var(--forest)); }
/* Voile de lecture par slide (identique à .hero::after) */
.hero--slider .hero__slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 95% at 86% 6%, color-mix(in oklch, var(--gold) 30%, transparent), transparent 50%),
    linear-gradient(115deg, color-mix(in oklch, var(--pine-deep) 95%, transparent) 0%, color-mix(in oklch, var(--forest) 58%, transparent) 54%, transparent 100%),
    linear-gradient(to top, color-mix(in oklch, var(--pine-deep) 74%, transparent), transparent 30%);
}
html[dir="rtl"] .hero--slider .hero__slide::after {
  background:
    radial-gradient(130% 95% at 14% 6%, color-mix(in oklch, var(--gold) 30%, transparent), transparent 50%),
    linear-gradient(245deg, color-mix(in oklch, var(--pine-deep) 95%, transparent) 0%, color-mix(in oklch, var(--forest) 58%, transparent) 54%, transparent 100%),
    linear-gradient(to top, color-mix(in oklch, var(--pine-deep) 74%, transparent), transparent 30%);
}
/* Le conteneur du slide respecte les gouttières + le max-width du site (contenu décalé
   vers le centre, jamais collé au bord) — comme toutes les autres sections. */
.hero--slider .hero__slide .container { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Navigation : flèches + puces */
.hero__nav { position: absolute; inset-block-end: clamp(1.1rem, 3vw, 2.1rem); inset-inline: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 1rem; pointer-events: none; }
.hero__nav > * { pointer-events: auto; }
.hero__arrow {
  inline-size: 2.9rem; block-size: 2.9rem; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid color-mix(in oklch, var(--cream) 45%, transparent);
  background: color-mix(in oklch, var(--pine-deep) 40%, transparent); color: var(--cream);
  backdrop-filter: blur(8px); cursor: pointer; transition: background .25s, transform .25s, border-color .25s;
}
.hero__arrow:hover { background: color-mix(in oklch, var(--gold) 80%, transparent); color: var(--pine-deep); border-color: transparent; transform: translateY(-2px); }
.hero__arrow svg { inline-size: 22px; block-size: 22px; }
.hero__arrow--prev svg { transform: scaleX(-1); }                  /* « précédent » pointe à l'opposé de « suivant » */
html[dir="rtl"] .hero__arrow--next svg { transform: scaleX(-1); } /* en RTL, « suivant » pointe vers la gauche */
html[dir="rtl"] .hero__arrow--prev svg { transform: none; }
.hero__dots { display: inline-flex; align-items: center; gap: .55rem; }
.hero__dot {
  inline-size: .62rem; block-size: .62rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in oklch, var(--cream) 45%, transparent); transition: background .25s, transform .25s, inline-size .25s;
}
.hero__dot:hover { background: color-mix(in oklch, var(--cream) 75%, transparent); }
.hero__dot.is-active { background: var(--gold); inline-size: 1.5rem; border-radius: .4rem; }
.hero__dot:focus-visible, .hero__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 600px) {
  .hero__arrow { inline-size: 2.5rem; block-size: 2.5rem; }
  .hero__nav { gap: .7rem; }
}