/* ══════════════════════════════════════════════════════════════
   AZUROTEC — Couche « premium »
   Chargée après style.css / carousel.css.
   Applique le système éditorial ERA : Didone monumental, angles
   vifs, révélations masquées, boutons à double texte, RTL arabe.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0. BASE — grain, sélection, scrollbar
   ───────────────────────────────────────────────────────────── */
html { scroll-behavior: auto; }          /* Lenis pilote le défilement */
html.lenis-stopped { overflow: hidden; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain photographique — le liant « luxe » sur les aplats crème */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--color-burgundy); color: var(--color-paper); }

:focus-visible {
  outline: 2px solid var(--color-burgundy);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   1. TYPOGRAPHIE — Didone monumental
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4,
.hero-title, .section-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.hero-title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  text-transform: none;
}

.section-title {
  font-size: var(--text-4xl);
  letter-spacing: var(--track-tight);
}

.section-title .accent {
  font-style: italic;
  color: var(--color-burgundy);
}

/* Anglaise — la ligne « signature » */
.hero-script,
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-sky);
}

/* Micro-typo UI : 13px, capitales, très tracké — la marque ERA */
.mono,
.section-eyebrow,
.hero-eyebrow,
.era-panel-count,
.footer-col-title,
.footer-copy,
.footer-tag {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  font-stretch: 112%;          /* la largeur « Extended » de la référence */
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  line-height: 1.4;
}

[lang="ar"] .mono,
[lang="ar"] .section-eyebrow,
[lang="ar"] .hero-eyebrow { text-transform: none; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   2. PRÉLOADER — compteur 00 → 100 + révélation du nom
   ───────────────────────────────────────────────────────────── */
/* Masqué par défaut : sans JS la page n'est jamais bloquée */
.preloader { display: none; }
.js-motion .preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--color-burgundy);
  color: var(--color-paper);
}
html.is-loading { overflow: hidden; }

.preloader-inner { text-align: center; padding: var(--gutter); }

.preloader-word {
  display: block;
  overflow: hidden;
}
.preloader-word > span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  transform: translateY(105%);
}

.preloader-count {
  margin-top: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--track-widest);
  opacity: .65;
}

.preloader-bar {
  margin-top: var(--space-md);
  width: min(280px, 60vw);
  height: 1px;
  background: rgba(243, 243, 236, .22);
  margin-inline: auto;
  overflow: hidden;
}
.preloader-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-sky);
}

/* ─────────────────────────────────────────────────────────────
   3. RÉVÉLATIONS — masques de lignes et d'images
   ───────────────────────────────────────────────────────────── */
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask > .reveal-inner { display: block; will-change: transform; }

/* État initial posé par JS uniquement : sans JS tout reste visible */
.js-motion .reveal-mask > .reveal-inner { transform: translateY(105%); }

.reveal-img {
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.reveal-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js-motion .reveal-img { clip-path: inset(0 0 100% 0); }
.js-motion .reveal-img img { transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal-mask > .reveal-inner { transform: none; }
  .js-motion .reveal-img { clip-path: inset(0 0 0 0); }
  .js-motion .reveal-img img { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   4. BOUTONS — roulement à double texte + balayage de fond
   ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg-t: 100%;         /* position du fond au repos */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 1.05rem 2.25rem;
  border: 1px solid currentColor;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  transition: color var(--dur-m) var(--ease-in-out),
              border-color var(--dur-m) var(--ease-in-out);
}

[lang="ar"] .btn { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Le fond monte depuis le bas au survol */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(var(--btn-bg-t));
  transition: transform var(--dur-m) var(--ease-in-out);
}

.btn:hover, .btn:focus-visible { --btn-bg-t: 0%; }

/* Roulement du libellé : le texte sort par le haut, son double entre par le bas */
.btn-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.btn-roll > span {
  display: block;
  transition: transform var(--dur-m) var(--ease-in-out),
              opacity var(--dur-m) var(--ease-in-out);
}
.btn-roll > .btn-t2 {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.btn:hover .btn-roll > .btn-t1,
.btn:focus-visible .btn-roll > .btn-t1 { transform: translateY(-100%); }
.btn:hover .btn-roll > .btn-t2,
.btn:focus-visible .btn-roll > .btn-t2 { transform: translateY(0); }

/* Variantes */
.btn-gold {
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
  color: var(--color-paper);
}
.btn-gold::before { background: var(--color-sky); }
.btn-gold:hover, .btn-gold:focus-visible {
  color: var(--color-burgundy);
  border-color: var(--color-sky);
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-ghost::before { background: var(--color-burgundy); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--color-paper);
  border-color: var(--color-burgundy);
}

.btn-glass {
  background: transparent;
  border-color: rgba(243, 243, 236, .55);
  color: var(--color-paper);
  backdrop-filter: blur(6px);
}
.btn-glass::before { background: var(--color-paper); }
.btn-glass:hover, .btn-glass:focus-visible {
  color: var(--color-burgundy);
  border-color: var(--color-paper);
}

.btn-sm { padding: .8rem 1.5rem; font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn-roll > span { transition-duration: .01ms; }
}

/* ─────────────────────────────────────────────────────────────
   5. EN-TÊTE — barre fine, sélecteur de langue
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-m) var(--ease-out),
              border-color var(--dur-m) var(--ease-out),
              color var(--dur-m) var(--ease-out);
  color: var(--color-paper);
  mix-blend-mode: normal;
}
/* app.js pose « scrolled », la couche premium « is-scrolled » */
.site-header.is-scrolled,
.site-header.scrolled {
  background: rgba(243, 243, 236, .92);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(23, 35, 59, .12);
  color: var(--color-ink);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-md) var(--gutter);
  min-height: var(--header-h);
}

.header-brand {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.brand-text {
  font-size: var(--text-label);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}

.header-nav { display: flex; gap: var(--space-lg); }

.header-link,
.header-cta-minimal {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: var(--text-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding-block: .35rem;
}
[lang="ar"] .header-link,
[lang="ar"] .header-cta-minimal { text-transform: none; letter-spacing: 0; }

.header-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur-m) var(--ease-in-out);
}
.header-link:hover::after,
.header-link.is-active::after { transform: scaleX(1); }

.header-cta-minimal {
  border: 1px solid currentColor;
  padding: .7rem 1.25rem;
}

/* Sélecteur de langue FR / AR */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  overflow: hidden;
}
.lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  padding: .55rem .8rem;
  cursor: pointer;
  transition: background var(--dur-s) var(--ease-out),
              color var(--dur-s) var(--ease-out);
}
.lang-btn + .lang-btn { border-inline-start: 1px solid currentColor; }
.lang-btn[aria-pressed="true"] {
  background: currentColor;
}
.lang-btn[aria-pressed="true"] > span {
  /* le texte prend la couleur du fond de la page derrière */
  color: var(--color-burgundy);
  mix-blend-mode: normal;
}
.site-header:not(.is-scrolled):not(.scrolled) .lang-btn[aria-pressed="true"] > span { color: var(--color-burgundy); }
.site-header.is-scrolled .lang-btn[aria-pressed="true"] > span,
.site-header.scrolled .lang-btn[aria-pressed="true"] > span { color: var(--color-paper); }

.header-burger { display: none; }

@media (max-width: 900px) {
  .header-nav, .header-cta-minimal { display: none; }
  .header-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid currentColor;
    cursor: pointer;
  }
  .header-burger span {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform var(--dur-s) var(--ease-in-out),
                opacity var(--dur-s) var(--ease-in-out);
  }
  .header-burger[aria-expanded="true"] span:nth-child(1),
  .header-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header-burger[aria-expanded="true"] span:nth-child(2),
  .header-burger.open span:nth-child(2) { opacity: 0; }
  .header-burger[aria-expanded="true"] span:nth-child(3),
  .header-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .header-mobile-nav {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl) var(--gutter) var(--space-2xl);
    background: var(--color-burgundy);
    color: var(--color-paper);
    max-height: 0;
    overflow: hidden;
    padding-block: 0;
    transition: max-height var(--dur-m) var(--ease-in-out),
                padding var(--dur-m) var(--ease-in-out);
  }
  /* app.js pose « open » : les deux noms doivent ouvrir le menu,
     sinon la classe est bien ajoutée mais rien ne s'affiche.      */
  .header-mobile-nav.is-open,
  .header-mobile-nav.open {
    max-height: 70vh;
    padding-block: var(--space-xl) var(--space-2xl);
    overflow-y: auto;
  }
  .header-mobile-nav a {
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.75rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. HERO — vidéo 4K plein écran conservée
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  overflow: hidden;
  color: var(--color-paper);
  background: var(--color-burgundy);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* plein écran, aucun recadrage visible */
  object-position: center;
  display: block;
}

/* Dégradé feutré : lisibilité du titre sans écraser la 4K */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(36, 8, 26, .82) 0%, rgba(36, 8, 26, .30) 45%, rgba(36, 8, 26, .45) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gutter);
}

.hero-eyebrow { color: var(--color-sky); margin-bottom: var(--space-lg); }

.hero-title {
  margin: 0;
  color: var(--color-paper);
}

.divider-gold {
  width: 84px;
  height: 1px;
  background: var(--color-sky);
  margin-block: var(--space-lg);
}

.hero-sub {
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: rgba(243, 243, 236, .84);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Indicateur de défilement — clin d'œil au « 00 / Scroll » d'ERA */
.hero-scroll {
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: rgba(243, 243, 236, .7);
}
.hero-scroll i {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(243,243,236,.7), transparent);
}

/* ─────────────────────────────────────────────────────────────
   7. BANDEAU DÉFILANT — « A place to live » revisité
   ───────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(23, 35, 59, .14);
  background: var(--color-paper-2);
  padding-block: var(--space-md);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-2xl);
  will-change: transform;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  color: var(--color-ink);
}
.marquee-item span { color: var(--color-sky-2); font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   8. AVANT / APRÈS — reprise du bouton jour/nuit d'ERA
   ───────────────────────────────────────────────────────────── */
.ba-section {
  padding-block: var(--space-4xl);
  background: var(--color-burgundy);
  color: var(--color-paper);
}
.ba-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ba-head { margin-bottom: var(--space-xl); }
.ba-head .section-eyebrow { color: var(--color-sky); }
.ba-head h2 { color: var(--color-paper); margin: var(--space-sm) 0 0; }

.ba-toggle {
  display: inline-flex;
  gap: 0;
  margin-block: var(--space-lg);
  border: 1px solid rgba(243, 243, 236, .45);
}
.ba-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: .8rem 1.6rem;
  cursor: pointer;
  transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
[lang="ar"] .ba-tab { text-transform: none; letter-spacing: 0; }
.ba-tab + .ba-tab { border-inline-start: 1px solid rgba(243, 243, 236, .45); }
.ba-tab[aria-pressed="true"] { background: var(--color-sky); color: var(--color-burgundy); }

.ba-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-burgundy-2);
}
.ba-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-l) var(--ease-out),
              transform var(--dur-xl) var(--ease-out);
}
.ba-stage img.is-active { opacity: 1; transform: scale(1); }

@media (max-width: 700px) { .ba-stage { aspect-ratio: 4 / 5; } }

/* ─────────────────────────────────────────────────────────────
   9. GALERIE À GLISSER — « Drag to see more »
   ───────────────────────────────────────────────────────────── */
.drag-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}
[lang="ar"] .drag-hint { text-transform: none; letter-spacing: 0; }

.is-draggable { cursor: grab; user-select: none; }
.is-draggable.is-dragging { cursor: grabbing; }
.is-draggable.is-dragging img { pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   10. SECTIONS — rythme éditorial et compteurs
   ───────────────────────────────────────────────────────────── */
section { position: relative; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.preuve, .process, .services, .offres, .contact {
  padding-block: var(--space-4xl);
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}
.section-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(23, 35, 59, .16);
}

/* Compteur « 00 » en marge, façon ERA */
.section-count {
  position: absolute;
  inset-block-start: var(--space-xl);
  inset-inline-end: var(--gutter);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  color: var(--color-muted);
}

/* Cartes — angles vifs, filets fins, image qui respire */
.process-card, .service-card, .pricing-card, .gallery-item {
  border-radius: 0;
  background: var(--color-paper);
  border: 1px solid rgba(23, 35, 59, .12);
  overflow: hidden;
  transition: border-color var(--dur-m) var(--ease-out),
              transform var(--dur-m) var(--ease-out);
}
.process-card:hover, .service-card:hover, .gallery-item:hover {
  border-color: var(--color-burgundy);
  transform: translateY(-4px);
}

.process-visual, .service-asset, .gallery-item img { overflow: hidden; }
.process-visual img, .service-asset img, .service-video, .gallery-item img {
  transition: transform var(--dur-xl) var(--ease-out);
}
.process-card:hover .process-visual img,
.service-card:hover .service-asset img,
.service-card:hover .service-video,
.gallery-item:hover img { transform: scale(1.06); }

.process-name, .service-name, .pricing-name {
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}

.pricing-featured {
  background: var(--color-burgundy);
  color: var(--color-paper);
  border-color: var(--color-burgundy);
}
.pricing-featured .pricing-name,
.pricing-featured .pricing-price { color: var(--color-paper); }
.pricing-featured .btn-gold {
  background: var(--color-sky);
  border-color: var(--color-sky);
  color: var(--color-burgundy);
}
.pricing-featured .btn-gold::before { background: var(--color-paper); }
.pricing-badge {
  background: var(--color-sky);
  color: var(--color-burgundy);
  border-radius: 0;
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: .35rem .75rem;
}

.pricing-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--track-display);
}

/* Panneaux d'ambiance */
.era-burgundy-panel {
  background: var(--color-burgundy);
  color: var(--color-paper);
  padding: var(--space-4xl) var(--gutter);
}
.era-panel-line {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  max-width: 22ch;
  margin: var(--space-lg) 0 0;
}
.era-panel-count { color: var(--color-sky); }

.era-sky-offers { background: var(--color-sky-3); }
.era-cream-silence { background: var(--color-paper); }
.era-editorial-proof { background: var(--color-paper-2); }

/* Formulaire — champs à filet unique */
.form-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(23, 35, 59, .28);
  border-radius: 0;
  padding: .85rem 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--dur-s) var(--ease-out);
}
.form-input:focus { outline: none; border-bottom-color: var(--color-burgundy); }
.form-label {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}
[lang="ar"] .form-label { text-transform: none; letter-spacing: 0; }

.faq-item {
  border-bottom: 1px solid rgba(23, 35, 59, .14);
  padding-block: var(--space-md);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--track-tight);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: inline-end; }
.faq-item[open] summary::after { content: "−"; }

/* Pied de page */
.site-footer {
  background: var(--color-burgundy);
  color: var(--color-paper);
  padding-block: var(--space-3xl) var(--space-xl);
}
.site-footer a { color: inherit; }
.footer-mark { font-family: var(--font-display); font-size: 1.5rem; }
.footer-col-title { color: var(--color-sky); margin-bottom: var(--space-md); }
.footer-link { display: block; text-decoration: none; padding-block: .3rem; opacity: .8; }
.footer-link:hover { opacity: 1; }
.footer-bottom { border-top: 1px solid rgba(243, 243, 236, .18); margin-top: var(--space-2xl); padding-top: var(--space-lg); }
.footer-legal-link { text-decoration: none; opacity: .7; font-size: var(--text-xs); }

/* ─────────────────────────────────────────────────────────────
   11. RETOUR EN HAUT + CTA collant
   ───────────────────────────────────────────────────────────── */
.to-top {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--gutter);   /* à droite : le texte éditorial est aligné à gauche */
  z-index: 880;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-burgundy);
  background: var(--color-paper);
  color: var(--color-burgundy);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(.85);
  transition: opacity var(--dur-m) var(--ease-out),
              transform var(--dur-m) var(--ease-out),
              background var(--dur-s) var(--ease-out),
              color var(--dur-s) var(--ease-out);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); }
.to-top:hover { background: var(--color-burgundy); color: var(--color-paper); }
.to-top svg { width: 16px; height: 16px; }

.sticky-cta {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--gutter);
  z-index: 880;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
/* app.js pose « visible », la couche premium « is-visible » */
.sticky-cta.is-visible,
.sticky-cta.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Barre de progression injectée par app.js */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 950;
  height: 2px;
  width: 0;
  background: var(--color-burgundy);
  pointer-events: none;
}
.site-header.is-scrolled ~ .scroll-progress { background: var(--color-burgundy); }

@media (max-width: 700px) {
  .to-top { width: 48px; height: 48px; }
  .sticky-cta { inset-inline: var(--gutter); width: auto; }
}

/* ─────────────────────────────────────────────────────────────
   12. RTL — arabe
   ───────────────────────────────────────────────────────────── */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .hero-content,
[dir="rtl"] .container { text-align: right; }
[dir="rtl"] .marquee-track { flex-direction: row-reverse; }
[dir="rtl"] .faq-item summary::after { float: left; }
[dir="rtl"] .divider-gold { margin-inline-start: 0; }

/* Les chiffres et les libellés techniques restent lisibles en LTR */
[dir="rtl"] .process-num,
[dir="rtl"] .service-num,
[dir="rtl"] .era-panel-count,
[dir="rtl"] .section-count,
[dir="rtl"] .stat-num,
[dir="rtl"] .pricing-price,
[dir="rtl"] .footer-copy { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* « 2 999 MAD » se réordonnait en « MAD 999 2 » sous l'algorithme
   bidirectionnel : le prix est isolé en LTR, aligné à droite.     */
[dir="rtl"] .pricing-price { text-align: right; width: 100%; }

[dir="rtl"] .hero-scroll i { transform: none; }

/* ─────────────────────────────────────────────────────────────
   13. Accessibilité mouvement
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   14. CORRECTIFS FONCTIONNELS repris de la version précédente
   Ces règles ne sont pas décoratives : elles corrigent des
   contraintes réelles des médias et des composants.
   ═══════════════════════════════════════════════════════════════ */

/* ── Vidéo hero 4K plein écran ─────────────────────────────────
   La source comporte du texte incrusté en haut de l'image : on
   recadre vers le bas pour le sortir du champ, sans letterbox.  */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-burgundy-2);
  isolation: isolate;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
  transform: scale(1.18) translateY(-2.5%);
  filter: contrast(1.05) saturate(1.02);
}

@media (max-width: 768px) {
  .hero-video {
    object-position: center 66%;
    transform: scale(1.26) translateY(-3.5%);
  }
}

/* ── Storyboards de la méthode ─────────────────────────────────
   Ce sont des planches dessinées : elles doivent être vues en
   entier (contain), jamais recadrées.                           */
.process-visual,
.whiteboard-visual,
.story-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(180px, 17vw, 255px);
  margin: 0 0 var(--space-md);
  padding: .5rem;
  background: var(--color-white);
  border: 1px solid rgba(23, 35, 59, .10);
  border-radius: 0;
  overflow: hidden;
}
.whiteboard-story-img,
.process-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.story-modal-visual img,
.whiteboard-modal-visual img { object-fit: contain; }

/* Le numéro d'étape en pastille, façon compteur éditorial */
.process-num, .service-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(23, 35, 59, .22);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  color: var(--color-burgundy);
  margin-bottom: var(--space-sm);
}

/* Ces étiquettes alourdissaient la carte : masquées, comme avant */
.process-tags { display: none; }

.process-card, .service-card {
  padding: var(--space-md);
  text-align: start;
  background: var(--color-white);
}
.process-card::before, .service-card::before { display: none; }

/* ── Offres : listes sans puces parasites ───────────────────── */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.6rem 1.65rem 1.65rem;
  background: var(--color-white);
  overflow: visible;
}
.pricing-card::before, .pricing-card::after { content: none; display: none; }
.pricing-features { display: grid; gap: .5rem; margin: var(--space-lg) 0; padding: 0; list-style: none; }
.pricing-features li {
  border: 0;
  border-bottom: 1px solid rgba(23, 35, 59, .12);
  padding: .6rem 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: start;
}
.pricing-featured .pricing-features li { border-bottom-color: rgba(243, 243, 236, .18); }
.pricing-features li::before, .pricing-features li::after,
.modal-list li::before, .modal-list li::after { content: none; display: none; }
.modal-list { list-style: none; padding: 0; }
.modal-list li { border-bottom: 1px solid rgba(23, 35, 59, .12); padding: .5rem 0; }
.pricing-card .btn { margin-top: auto; width: 100%; }
.pricing-badge {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
[dir="rtl"] .pricing-badge { transform: translate(50%, -50%); }

/* ── Garde-fou : GSAP ne doit jamais laisser une carte invisible ── */
.process-card, .pricing-card, .service-card { opacity: 1; visibility: visible; }

/* ── Rythme mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --space-4xl: 5.5rem; }
  .process-grid, .pricing-grid { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; }
  .hero-sub { font-size: var(--text-base); }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 380px; }
  .hero-scroll { display: none; }
  .era-panel-line { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}

/* ═══════════════════════════════════════════════════════════════
   15. CORRECTIFS DE MISE EN PAGE
   ═══════════════════════════════════════════════════════════════ */

/* L'ancienne feuille centrait la nav en absolu : avec le sélecteur
   de langue en plus, elle chevauchait le bouton « Book a call ».
   On revient à un flux flex simple, aligné sur trois zones.       */
.header-inner {
  max-width: var(--container-max);
  padding: var(--space-sm) var(--gutter);
  min-height: var(--header-h);
  gap: clamp(1rem, 3vw, 2.5rem);
}
.header-brand { min-width: 0; color: inherit; }
.header-nav {
  position: static;
  left: auto;
  transform: none;
  margin-inline-start: auto;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Le fond sombre de l'ancienne barre masquait la vidéo du hero */
.site-header:not(.is-scrolled):not(.scrolled) {
  background: linear-gradient(180deg, rgba(36, 8, 26, .45), rgba(36, 8, 26, 0));
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--color-paper);
}

@media (max-width: 900px) {
  .header-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
}

/* ── Contraste des CTA sur les fonds bordeaux ─────────────────
   Un bouton bordeaux sur un panneau bordeaux disparaît : sur ces
   fonds, la primaire passe en bleu Méditerranée.                */
.hero .btn-gold,
.site-footer .btn-gold,
.ba-section .btn-gold,
.era-burgundy-panel .btn-gold {
  background: var(--color-sky);
  border-color: var(--color-sky);
  color: var(--color-burgundy);
}
.hero .btn-gold::before,
.site-footer .btn-gold::before,
.ba-section .btn-gold::before,
.era-burgundy-panel .btn-gold::before { background: var(--color-paper); }
.hero .btn-gold:hover,
.hero .btn-gold:focus-visible { color: var(--color-burgundy); border-color: var(--color-paper); }

/* Le CTA collant flotte au-dessus de sections claires ou sombres */
.sticky-cta { background: var(--color-burgundy); border-color: var(--color-burgundy); color: var(--color-paper); }
.sticky-cta::before { background: var(--color-sky); }

/* ── Hero : composition éditoriale alignée à gauche ──────────── */
.hero-content { text-align: start; max-width: var(--container-max); }
.hero-eyebrow, .hero-sub { margin-inline: 0; text-align: start; }
.hero-title, .hero-script { text-align: start; }
.divider-gold { margin-inline-start: 0; }
.hero-ctas { justify-content: flex-start; }
.hero-photos { max-width: var(--container-max); margin-inline: auto; }

@media (max-width: 768px) {
  .hero-content { text-align: center; }
  .hero-eyebrow, .hero-sub, .hero-title, .hero-script { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .divider-gold { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
}

/* Les images du hero et de la galerie : cadres nets, pas de rayon */
.hero-slide, .gallery-item, .hero-slide img, .gallery-item img {
  border-radius: 0;
}
.hero-slide {
  border: 1px solid rgba(243, 243, 236, .22);
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.hero-slide img { height: clamp(150px, 18vw, 240px); width: auto; }

/* ═══════════════════════════════════════════════════════════════
   16. AJUSTEMENTS ÉDITORIAUX
   ═══════════════════════════════════════════════════════════════ */

/* La référence compose ses titres en casse normale : les capitales
   écrasaient le contraste du Didone et cassaient les italiques.  */
.section-title,
.era-arch h2,
.era-panel-line {
  text-transform: none;
  letter-spacing: var(--track-tight);
  line-height: 1.02;
}
h1, h2, h3 { letter-spacing: var(--track-display); }

/* Section « Réalisations » : troisième valeur de la gamme, l'encre.
   Elle était déjà pensée en fond sombre (texte crème) : on garde ce
   contraste plutôt qu'un texte crème sur crème.                   */
.preuve, .era-editorial-proof { background: var(--color-ink); color: var(--color-paper); }
.preuve .section-eyebrow { color: var(--color-sky); }
.preuve .section-eyebrow::after { background: rgba(243, 243, 236, .28); }
.preuve .section-title { color: var(--color-paper); }
.preuve .section-title .accent { color: var(--color-sky); }
.preuve .stat-num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); }
.preuve .stat-label,
.preuve .testimonial-source { color: rgba(243, 243, 236, .68); font-size: var(--text-2xs); letter-spacing: var(--track-widest); text-transform: uppercase; }
[lang="ar"] .preuve .stat-label,
[lang="ar"] .preuve .testimonial-source { text-transform: none; letter-spacing: 0; }
.preuve .testimonial {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  line-height: 1.25;
  max-width: 24ch;
  border: 0;
  padding: 0;
}
.preuve .gallery-item { background: transparent; border-color: rgba(243, 243, 236, .22); }
.preuve .gallery-item:hover { border-color: var(--color-sky); }

/* Offres : cartes de hauteur égale, quel que soit le nombre de lignes */
.pricing-grid { align-items: stretch; }
.pricing-card { height: 100%; }

/* Le CTA collant reste une barre mobile : sur desktop, le bouton
   « retour en haut » et l'en-tête suffisent.                      */
/* .visible (posé par app.js) est plus spécifique : on l'égale */
.sticky-cta,
.sticky-cta.visible,
.sticky-cta.is-visible { display: none; }
@media (max-width: 768px) {
  .sticky-cta.visible, .sticky-cta.is-visible {
    display: flex;
    justify-content: center;
    inset: auto 0 0 0;
    width: 100%;
    border-radius: 0;
  }
}

/* Les chiffres clés étaient en bordeaux sur l'encre : illisibles. */
.preuve .stat-num { color: var(--color-sky); }
.preuve .testimonial { color: var(--color-paper); }

/* Les ancres doivent s'arrêter sous l'en-tête fixe, que le
   défilement passe par Lenis (offset) ou par le navigateur.      */
section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }