/* ============================================================
   SALEH HALAFI — Feuille de style unique
   ------------------------------------------------------------
   Ecrite en proprietes logiques (inline-start / inline-end)
   plutot qu'en gauche/droite : la page se retourne d'elle-meme
   quand on passe de l'arabe au francais, sans une seule regle
   dupliquee.

   Aucune bibliotheque, aucun script externe : une page de
   campagne doit s'ouvrir en un instant sur un telephone, y
   compris sur un reseau lent.
   ============================================================ */

:root {
  /* Charte imposee */
  --navy:        #12264A;
  --navy-deep:   #08111F;
  --navy-soft:   #1B3560;
  --gold:        #B88F2E;
  --gold-light:  #EED6A5;
  --ink:         #16202F;
  --muted:       #5A6675;
  --line:        #E4E8EE;
  --paper:       #FFFFFF;
  --paper-soft:  #F7F8FA;

  --shell: 1180px;
  --radius: 14px;
  --shadow: 0 18px 40px -24px rgba(18, 38, 74, 0.28);

  /* Polices : serif pour les titres dans les deux ecritures,
     sans-serif pour le texte courant. */
  --font-ar-title: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ar-body:  'Noto Kufi Arabic', 'Cairo', system-ui, sans-serif;
  --font-fr-title: 'Playfair Display', Georgia, serif;
  --font-fr-body:  'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ar-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* En francais, on bascule tout le jeu de polices. */
html[lang="fr"] body { font-family: var(--font-fr-body); line-height: 1.7; }

h1, h2, h3 { font-family: var(--font-ar-title); font-weight: 700; line-height: 1.35; margin: 0; }
html[lang="fr"] h1,
html[lang="fr"] h2,
html[lang="fr"] h3 { font-family: var(--font-fr-title); line-height: 1.25; }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }

/* ============================================================
   En-tete
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header.is-dark {
  background: rgba(8, 17, 31, 0.86);
  border-bottom-color: rgba(238, 214, 165, 0.18);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; border-radius: 50%; }
.brand-text { display: grid; line-height: 1.25; }
.brand-name { font-family: var(--font-ar-title); font-weight: 700; font-size: 17px; }
html[lang="fr"] .brand-name { font-family: var(--font-fr-title); }
.brand-role { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.is-dark .brand-name { color: #fff; }
.is-dark .brand-role { color: var(--gold-light); }

.nav { display: flex; gap: 26px; margin-inline-start: auto; }
.nav a {
  font-size: 15px;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover, .nav a.is-current { color: var(--gold); border-bottom-color: var(--gold); }
.is-dark .nav a { color: #EDF1F7; }
.is-dark .nav a:hover, .is-dark .nav a.is-current { color: var(--gold-light); border-bottom-color: var(--gold-light); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  transition: background .2s ease, color .2s ease;
}
.lang-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.is-dark .lang-switch { border-color: rgba(238, 214, 165, 0.3); }
.is-dark .lang-switch button { color: var(--gold-light); }
.is-dark .lang-switch button[aria-pressed="true"] { background: var(--gold); color: var(--navy-deep); }

.burger {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(184, 143, 46, .22), transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 96px);
}

/* Filigrane du dauphin, tres discret. */
.hero::after {
  content: "";
  position: absolute;
  inset-block-start: -12%;
  inset-inline-start: -8%;
  width: 46vw;
  height: 46vw;
  background: url('../img/logo-parti.png') center/contain no-repeat;
  opacity: .05;
  filter: grayscale(1) brightness(3);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold-light);
  border: 1px solid rgba(238, 214, 165, .35);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 22px;
}

.hero h1 { font-size: clamp(30px, 4.6vw, 52px); color: #fff; }
.hero .lead {
  font-size: clamp(16px, 1.6vw, 20px);
  color: #D7DEE9;
  max-width: 34em;
  margin-top: 16px;
}

.rule {
  width: 92px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-block: 26px;
  border-radius: 3px;
}
html[dir="rtl"] .rule { background: linear-gradient(270deg, var(--gold), transparent); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }

.portrait {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
}
.portrait img {
  width: 100%;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.portrait::before {
  content: "";
  position: absolute;
  inset-block: 18px -18px;
  inset-inline: 18px -18px;
  border: 1px solid rgba(238, 214, 165, .45);
  border-radius: 20px;
  z-index: -1;
}

/* Compteurs */
.counters {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 28px;
}
.counter-value { font-family: var(--font-fr-title); font-size: clamp(30px, 4vw, 44px); color: var(--gold-light); line-height: 1; }
.counter-label { font-size: 14px; color: #C9D3E0; margin-top: 8px; }

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--soft { background: var(--paper-soft); }
.section--dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-kicker {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.section h2 { font-size: clamp(25px, 3.4vw, 38px); }
.section--dark h2 { color: #fff; }
.section-head p { color: var(--muted); margin-top: 14px; }
.section--dark .section-head p { color: #C9D3E0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -28px rgba(18,38,74,.36); }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0; font-size: 15px; }

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(184,143,46,.12);
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
  font-family: var(--font-fr-title);
}

/* Portrait + biographie */
.bio-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.bio-photo img { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }

/* ============================================================
   Programme : accordeon
   ============================================================ */
.accordion { display: grid; gap: 12px; }

.axis {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.axis[open] { border-color: rgba(184,143,46,.5); box-shadow: var(--shadow); }

.axis summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-ar-title);
  font-size: 18px;
  font-weight: 700;
}
html[lang="fr"] .axis summary { font-family: var(--font-fr-title); }
.axis summary::-webkit-details-marker { display: none; }

.axis-num {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-family: var(--font-fr-title);
  font-size: 16px;
}
.axis[open] .axis-num { background: var(--gold); color: var(--navy-deep); }

.axis-chevron {
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: transform .25s ease;
}
.axis[open] .axis-chevron { transform: rotate(180deg); color: var(--gold); }

.axis-body { padding: 0 24px 24px calc(24px + 38px + 16px); }
html[dir="rtl"] .axis-body { padding: 0 calc(24px + 38px + 16px) 24px 24px; }
.axis-body ul { margin: 0; padding-inline-start: 20px; color: var(--muted); }
.axis-body li { margin-bottom: 8px; }

/* ============================================================
   Grands projets
   ============================================================ */
.project {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(238,214,165,.2);
}
.project h3 { font-size: 18px; color: #fff; margin-bottom: 8px; }
.project p { color: #C9D3E0; font-size: 15px; margin: 0; }

.project-badge {
  align-self: start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-deep);
  background: var(--gold-light);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.notice {
  margin-top: 26px;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(238,214,165,.1);
  border-radius: 8px;
  font-size: 15px;
  color: #E8EDF4;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,143,46,.16);
}

.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.contact-line { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line svg { flex: 0 0 22px; color: var(--gold); margin-top: 3px; }
.contact-line strong { display: block; font-size: 14px; }
.contact-line span { color: var(--muted); font-size: 14px; }

.social-row { display: flex; gap: 12px; margin-top: 20px; }
.social-row a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--navy);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.social-row a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ============================================================
   Pied de page
   ============================================================ */
.site-footer { background: var(--navy-deep); color: #C9D3E0; padding-block: 48px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.site-footer a:hover { color: var(--gold-light); }
.footer-links { display: grid; gap: 9px; font-size: 15px; }
.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  color: #97A4B5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* ============================================================
   Apparition au defilement
   ------------------------------------------------------------
   Un simple glissement vers le haut, declenche a l'entree dans
   l'ecran. Supprime pour qui demande des animations reduites.
   ============================================================ */
/* Les blocs ne sont masques QUE si le script a repondu : la classe
   « js » est posee dans l'en-tete du document, avant tout rendu. Sans
   elle — bloqueur, reseau coupe, JavaScript desactive — la page
   s'affiche entiere, simplement sans animation. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ============================================================
   Ecrans etroits
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid, .bio-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .portrait { width: min(100%, 320px); order: -1; }
  .nav {
    position: fixed;
    inset-block-start: 74px;
    inset-inline: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--line); }
  .burger { display: inline-flex; margin-inline-start: auto; color: var(--ink); }
  .is-dark .burger { color: #fff; border-color: rgba(255,255,255,.3); }
  .counters { grid-template-columns: 1fr; text-align: center; }
  .axis-body, html[dir="rtl"] .axis-body { padding-inline: 24px; }
}

@media (max-width: 560px) {
  .brand-role { display: none; }
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   Lien d'evitement et parcours au clavier
   ------------------------------------------------------------
   Le lien reste hors de l'ecran jusqu'a ce qu'il recoive le
   focus : invisible a la souris, immediat au clavier.
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: 16px;
  z-index: 100;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: inset-block-start .2s ease;
}
.skip-link:focus { inset-block-start: 0; }

/* Un contour net partout ou l'on peut se poser au clavier. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Portrait : affichage reellement adaptatif
   ------------------------------------------------------------
   La balise <picture> ajoutee pour servir le WebP est une boite
   en ligne par defaut : elle glissait un espace sous l'image et
   decalait le cadre dore. Elle se comporte desormais comme un
   bloc, et l'image occupe toute sa largeur quelle qu'elle soit.
   ------------------------------------------------------------ */
.portrait picture,
.bio-photo picture {
  display: block;
  width: 100%;
}

.portrait img,
.bio-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Le portrait suit la largeur de l'ecran par paliers, sans jamais
   ecraser le texte a cote ni deborder sur les petits telephones. */
.portrait { width: clamp(220px, 34vw, 400px); }

@media (max-width: 980px) {
  .portrait { width: min(78vw, 330px); }
}

@media (max-width: 420px) {
  .portrait { width: min(84vw, 280px); }
}

/* Le cadre dore suit l'image plutot que de garder un decalage fixe,
   qui devenait disproportionne sur petit ecran. */
.portrait::before { inset-block: 4%; inset-inline: 4%; }

/* ============================================================
   EFFETS REPRIS DE MAGIC UI
   ------------------------------------------------------------
   https://github.com/magicuidesign/magicui — licence MIT.

   Magic UI est une bibliotheque React : ses composants s'ecrivent
   en TSX et s'appuient sur Motion et Tailwind. Ce site est une
   page statique, sans React ni etape de construction. Plutot que
   d'y installer toute une chaine d'outils pour trois effets, les
   effets retenus sont portes ici en CSS, a partir du code source
   d'origine.

   Ce qui est repris, et pourquoi celui-la plutot qu'un autre :

     Border Beam   un filet lumineux qui fait le tour d'une carte.
                   Mecanique d'origine conservee telle quelle : un
                   carre en degrade parcourt un « offset-path » en
                   rectangle arrondi, masque sur la seule bordure.
                   En or sur le kaki, il souligne sans crier.

     Blur Fade     l'apparition des blocs se fait avec un flou qui
                   se dissipe, et non un simple fondu. Le regard
                   accroche mieux, l'effet reste sobre.

     Dot Pattern   une trame de points tres pale sur les sections
                   claires, qui evite l'aplat de blanc sans ajouter
                   d'image.

   Ecarte volontairement : meteores, etincelles, neons. Le registre
   d'un site institutionnel de campagne ne s'y prete pas.

   Sens de lecture : le filet tourne dans le sens de la lecture —
   il repart en sens inverse quand la page passe en arabe.
   ============================================================ */

/* ------------------------------------------------------------
   Border Beam
   ------------------------------------------------------------ */
.beam {
  position: relative;
  isolation: isolate;
}

.beam::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  /* Le masque ne laisse voir le filet que sur la bordure. */
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
  mask: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  background:
    linear-gradient(to left, var(--beam-from, #B88F2E), var(--beam-to, #EED6A5), transparent) 0 0 / 60px 60px no-repeat;
  offset-path: rect(0 auto auto 0 round 60px);
  offset-distance: 0%;
  animation: beam-run 7s linear infinite;
  width: 60px;
  aspect-ratio: 1;
  inset: auto;
}

/* Le filet doit etre un carre qui se deplace : on le sort du flux
   et on le laisse suivre son chemin. */
.beam::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

@keyframes beam-run {
  to { offset-distance: 100%; }
}

/* En arabe, le filet tourne dans l'autre sens. */
html[dir="rtl"] .beam::after { animation-direction: reverse; }

/* Sur fond kaki, le filet passe en or clair. */
.section--dark .beam { --beam-from: #EED6A5; --beam-to: #B88F2E; }

/* ------------------------------------------------------------
   Blur Fade — l'apparition des blocs
   ------------------------------------------------------------ */
.js .reveal { filter: blur(6px); transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
.js .reveal.is-visible { filter: none; }

/* ------------------------------------------------------------
   Dot Pattern — trame de fond des sections claires
   ------------------------------------------------------------ */
.section--soft { position: relative; }

.section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: rgba(18, 38, 74, .07);
  /* La trame s'efface vers les bords : elle ne doit pas se voir,
     seulement se sentir. */
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

.section--soft > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .beam::after { animation: none; opacity: .35; }
  .js .reveal { filter: none; }
}

/* ============================================================
   CARROUSEL D'OUVERTURE
   ------------------------------------------------------------
   Trois volets empiles au meme endroit : ils se croisent en
   fondu, avec une legere echelle. Pas de defilement horizontal —
   sur une page qui se lit de droite a gauche, un rail impose de
   retourner tous les calculs, alors qu'un fondu n'a pas de sens
   de lecture.
   ============================================================ */
.hero-slider {
  position: relative;
  justify-self: center;
  width: clamp(220px, 34vw, 400px);
}

.slides {
  position: relative;
  aspect-ratio: 1 / 1;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
}

.slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.slide img { width: 100%; height: 100%; object-fit: cover; }

/* --- Volet 2 : l'embleme --- */
.slide--embleme {
  display: grid;
  place-content: center;
  gap: 22px;
  padding: 32px;
  background: linear-gradient(160deg, #16305C 0%, var(--navy-deep) 100%);
  text-align: center;
}
.slide--embleme img {
  width: clamp(110px, 16vw, 160px);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .45));
}
.slide--embleme figcaption {
  font-family: var(--font-ar-title);
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--gold-light);
  line-height: 1.6;
}
html[lang="fr"] .slide--embleme figcaption { font-family: var(--font-fr-title); }

/* --- Volet 3 : le chiffre --- */
.slide--chiffre {
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 32px;
  background:
    radial-gradient(90% 70% at 50% 20%, rgba(184, 143, 46, .28), transparent 60%),
    linear-gradient(160deg, #16305C 0%, var(--navy-deep) 100%);
  text-align: center;
}
.slide--chiffre .chiffre {
  font-family: var(--font-fr-title);
  font-size: clamp(76px, 11vw, 128px);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.slide--chiffre figcaption {
  font-family: var(--font-ar-title);
  font-size: clamp(14px, 1.4vw, 18px);
  color: #DDE4EE;
  line-height: 1.7;
  max-width: 22ch;
  margin-inline: auto;
}
html[lang="fr"] .slide--chiffre figcaption { font-family: var(--font-fr-title); }

/* --- Pastilles --- */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.slider-dots button.is-active {
  width: 28px;
  background: var(--gold);
}

/* Le cadre dore encadre desormais le carrousel entier. */
.hero-slider::before {
  content: "";
  position: absolute;
  inset-block: 4% 14%;
  inset-inline: 4%;
  border: 1px solid rgba(238, 214, 165, .45);
  border-radius: 20px;
  z-index: -1;
}

@media (max-width: 980px) {
  .hero-slider { width: min(78vw, 330px); order: -1; }
}

@media (max-width: 420px) {
  .hero-slider { width: min(84vw, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}