/* =====================================================================
   Msolutions.AI — Feuille de style principale
   Reconstruction fidèle (recodage propre) du site Hostinger Builder.
   Couleurs, typographies et espacements extraits du site d'origine.
   ===================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  --c-purple:        #73058f;          /* boutons primaires (rgb 115,5,143) */
  --c-purple-hover:  #8a0aa9;
  --c-grad-1:        #9b30e0;          /* dégradé formulaire (start) */
  --c-grad-2:        #7520b8;          /* dégradé formulaire (end)   */
  --c-ink:           #090909;          /* fond très sombre — NEUTRE (ex #07060c bleu-violet : faisait ressortir du violet dans tout le glass) */
  --c-ink-2:         #0d0d0d;          /* NEUTRE (ex #0d0a16) */
  --c-card:          #101010;          /* NEUTRE (ex #0e0a18) */
  --c-white:         #ffffff;
  --c-muted:         rgba(255,255,255,.72);
  --c-muted-2:       rgba(255,255,255,.55);

  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-pill: 28px;
  --radius-card: 20px;

  --container: 1200px;
  --header-h: 204px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--c-ink);
  color: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Layout ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Boutons LIQUID GLASS (fidèle au composant 21st.dev) ─────────────────
   Fond TOUJOURS verre clair (transparent) · réfraction via #container-glass
   · biseau de verre (box-shadow 9 couches) · hover scale. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: url(#container-glass);
  backdrop-filter: url(#container-glass);
  box-shadow:
    0 0 8px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3.5px rgba(255,255,255,.09),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.btn:hover { transform: scale(1.045); }
.btn:active { transform: scale(.99); }
.btn--gradient { min-width: 220px; padding: 15px 36px; }
.btn--gradient:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--sm { padding: 11px 24px; font-size: 15px; }

/* SIGNATURE — anneau irisé (le fond reste verre clair) */
.btn--irid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, #a78bfa, #60a5fa 35%, #22d3ee 65%, #f0abfc);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Header / Navigation (liquid glass) ───────────────────────────────
   Au repos : taille pleine, logo plein, AUCUN flou (le dock porte le verre).
   Au scroll : header + logo + dock se réduisent ; retour à la normale en haut. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
.site-header.scrolled { height: 96px; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; position: relative; z-index: 1001; }
.site-header .container { max-width: none; padding-inline: clamp(20px, 4vw, 56px); }

/* Logo — taille pleine au repos, réduit au scroll uniquement */
.brand { display: inline-flex; align-items: center; }
.brand__mark { width: auto; height: 188px; object-fit: contain; display: block; transition: height .4s cubic-bezier(.4,0,.2,1); }
.site-header.scrolled .brand__mark { height: 80px; }
.brand__name { display: none; }

/* ── Primitives verre (scope header) ── */
.glass { position: relative; display: inline-flex; border-radius: 26px; box-shadow: 0 2px 7px rgba(0,0,0,.12); transition: all .4s cubic-bezier(.175,.885,.32,2.2); }
.glass__d { position: absolute; inset: 0; border-radius: inherit; z-index: 0; overflow: hidden; -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2) url(#hd-glass); }
.glass__t { position: absolute; inset: 0; border-radius: inherit; z-index: 1; background: rgba(255,255,255,.06); }
.glass__s { position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; box-shadow: inset 2px 2px 2px -1px rgba(255,255,255,.75), inset -2px -2px 2px -1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
.glass__s::before { display: none; }
.glass__in { position: relative; z-index: 3; }
.glass--circle { border-radius: 50%; box-shadow: none; }

/* ── Dock desktop (menu principal en verre) ── */
/* dock centré en ABSOLU (indépendant des largeurs logo/boutons) → reste parfaitement centré même pendant
   l'animation de réduction/agrandissement du header. translateX(-50%) se recalcule à chaque frame → jamais de décalage. */
.dock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 9px 14px; transition: padding .4s cubic-bezier(.4,0,.2,1); }
.site-header.scrolled .dock { padding: 4px 9px; }
.dock__in { display: flex; align-items: flex-end; gap: 14px; transition: gap .4s; }
.site-header.scrolled .dock__in { gap: 6px; }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 11px; border-radius: 18px; text-decoration: none; color: #fff; transition: background .3s, transform .4s cubic-bezier(.175,.885,.32,2.2), min-width .4s, padding .4s; }
.dock-item:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.site-header.scrolled .dock-item { min-width: 50px; padding: 7px; }
.dock-item__ic { width: 28px; height: 28px; transition: transform .4s cubic-bezier(.175,.885,.32,2.2), width .4s, height .4s; }
.site-header.scrolled .dock-item__ic { width: 20px; height: 20px; }
.dock-item:hover .dock-item__ic { transform: scale(1.16); }
.dock-item__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock-item__lbl { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px); opacity: 0; color: #fff; font-family: var(--font-head); font-weight: 500; font-size: 15px; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.85); transition: opacity .3s, transform .3s; }
.dock-item:hover .dock-item__lbl { opacity: 1; transform: translateX(-50%); }
/* Header réduit : libellés du dock descendus (trop proches de la bordure haute sinon) */
.site-header.scrolled .dock-item__lbl { bottom: calc(100% - 2px); }

/* Dropdown Services — pleine largeur du dock, centré, reste ouvert au survol */
.has-dd { position: relative; }
.dd { position: absolute; top: calc(100% + 12px); left: 0; right: 0; transform: translateY(10px); padding: 14px 16px; border-radius: 22px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, transform .3s, visibility .3s; }
.dd.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.dock-item.has-dd { cursor: pointer; }
.dd__in { display: flex; flex-direction: column; gap: 2px; }
.dd-link { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; color: #e9e7f4; text-decoration: none; font-size: 15px; transition: background .2s, color .2s; }
.dd-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.dd-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 22px; }

/* Cercles réseaux desktop */
.soc-row { display: flex; gap: 12px; align-items: center; }
.soc-glass { width: 50px; height: 50px; color: #fff; transition: transform .45s cubic-bezier(.175,.885,.32,2.2), width .4s, height .4s; }
.site-header.scrolled .soc-glass { width: 36px; height: 36px; }
.soc-glass:hover { transform: scale(1.14) translateY(-2px); }
.soc-glass .glass__in { display: grid; place-items: center; width: 100%; height: 100%; }
.soc-glass .glass__d, .burger .glass__d { -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1) url(#hd-glass-sm); }
.soc-glass .glass__s, .burger .glass__s { box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 1px rgba(255,255,255,.30); }
.soc-glass .glass__t, .burger .glass__t { background: rgba(255,255,255,.04); }
.soc-glass svg, .burger svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.soc-glass svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: width .4s, height .4s; }
.site-header.scrolled .soc-glass svg { width: 18px; height: 18px; }
.soc-glass svg path[d^="M14 9h3"] { fill: #fff; stroke: none; }

/* Sélecteur de langue — bouton DISCRET sans bordure (globe + code) + menu déroulant glass */
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-trigger { position: relative; z-index: 61; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #fff; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .3px; padding: 8px 4px; cursor: pointer; opacity: .8; transition: opacity .25s ease; }
.lang-trigger:hover, .lang-switch.open .lang-trigger { opacity: 1; }
.lang-globe { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition: width .4s, height .4s; }
.site-header.scrolled .lang-globe { width: 17px; height: 17px; }
.lang-cur { min-width: 16px; }
/* menu déroulant — verre liquide EXACT du dock : il porte la classe .glass et ses couches
   .glass__d (réfraction url(#hd-glass)) / .glass__t (tint) / .glass__s (arêtes blanches). Ici on ne
   gère que le positionnement, l'ombre portée et l'anim ouverture ; le verre vient des couches. */
/* Le panneau démarre DERRIÈRE le bouton (top:0) : le bouton (z-index 61) reste visible au-dessus
   et devient le "haut" du panneau ; les options sont calées sous le bouton (padding-top = sa hauteur)
   → le menu paraît intégré au bouton, sans séparation. */
.lang-menu { position: absolute; top: 0; left: 0; right: auto; min-width: 54px; border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
  opacity: 0; transform: translateY(-3px); transform-origin: top left; pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.34,1.56,.64,1); z-index: 60; }
.lang-menu .glass__in { display: flex; flex-direction: column; gap: 1px; padding: 38px 8px 6px 0; position: relative; z-index: 3; }
.lang-switch.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
/* codes alignés sous le « FR » du bouton : padding-left 30px = 4(pad bouton)+20(globe)+6(gap) ; même taille */
.lang-opt { border: 0; background: transparent; color: #fff; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .3px; text-align: left; padding: 7px 8px 7px 30px; border-radius: 9px; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: background .2s ease; }
.lang-opt:hover { background: rgba(255,255,255,.16); }
.lang-opt.is-active { display: none; }   /* langue courante déjà visible sur le bouton → masquée du menu */
.lang-opt--ar { font-size: 15px; }
.lang-opt--zgh { font-size: 15px; }
/* Amazighe (tamaziɣt) : police Tifinagh dédiée (les polices système ne couvrent pas le tifinagh).
   Pile avec fallback latin → les caractères latins (FR non traduit) restent en Outfit/Inter. */
[lang="zgh"], .lang-opt--zgh { font-family: "Noto Sans Tifinagh", "Outfit", "Inter", sans-serif; }
/* Desktop : un peu d'espace après le bouton pour que le menu ouvert ne colle pas aux réseaux */
.soc-row .lang-switch { margin-right: 14px; }
/* Bouton langue MOBILE : à côté du burger (hors du sheet), menu déroulant vers le bas */
.lang-switch--mobile { display: none; }
@media (max-width: 860px) {
  /* margin-left:auto → pousse le bouton à DROITE ; petit écart au burger pour que le menu ouvert ne le touche pas */
  .lang-switch--mobile { display: inline-flex; align-items: center; margin-left: auto; margin-right: 2px; }
}

/* Burger (mobile) — bouton verre, morph ☰↔✕ */
.burger { display: none; width: 48px; height: 48px; color: #fff; background: transparent; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.burger .glass__in { display: grid; place-items: center; width: 100%; height: 100%; }
.burger-ico { position: relative; width: 22px; height: 14px; }
.burger-ico i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.55); transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s; }
.burger-ico i:nth-child(1) { top: 0; }
.burger-ico i:nth-child(2) { top: 6px; }
.burger-ico i:nth-child(3) { top: 12px; }
.burger.open .burger-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open .burger-ico i:nth-child(2) { opacity: 0; }
.burger.open .burger-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Bottom sheet (mobile) */
.scrim { display: none; position: fixed; inset: 0; z-index: 998; background: rgba(4,2,10,.55); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
body.nav-open .scrim { opacity: 1; visibility: visible; }
.sheet { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; border-radius: 28px 28px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .45s cubic-bezier(.32,.72,0,1); }
body.nav-open .sheet { transform: translateY(0); }
.sheet__grip { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); margin: 6px auto 12px; }
.sheet .glass__in { max-height: 72vh; overflow-y: auto; overflow-x: hidden; width: 100%; }
.sheet .glass__in::-webkit-scrollbar { width: 0; }
/* iOS Safari accepte la syntaxe url(#hd-glass) mais ne la rend PAS → il n'appliquait que le blur(2px)
   de base (menu quasi transparent), qui écrasait toute valeur -webkit. On cible donc iOS Safari
   uniquement (-webkit-touch-callout, inconnu de Chrome desktop) et on force un vrai flou natif fort.
   Chrome garde le filtre liquid-glass (.glass__d par défaut) → rendu local strictement inchangé. */
@supports (-webkit-touch-callout: none) {
  .sheet .glass__d { -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2); }
}
.m-link { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 14px; color: #fff; text-decoration: none; font-size: 16px; font-family: var(--font-head); font-weight: 500; transition: background .2s; }
.m-link:hover, .m-link:active { background: rgba(255,255,255,.12); }
.m-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 24px; }
.m-acc { width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; color: #fff; }
.m-chev { width: 20px; height: 20px; margin-left: auto; stroke: #fff; stroke-width: 2; fill: none; transition: transform .3s; flex: 0 0 20px; }
.m-acc.open .m-chev { transform: rotate(180deg); }
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.m-sub.open { grid-template-rows: 1fr; }
.m-sub__in { overflow: hidden; min-height: 0; padding-left: 8px; }
.m-sub .m-link { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: #d7d5e6; }
.sheet__sec { font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin: 10px 8px 4px; }
.m-soc { display: flex; gap: 14px; justify-content: center; padding: 8px 0 4px; }
.m-soc .soc-glass { width: 50px; height: 50px; }

/* ── Bascule mobile : dock/réseaux → burger + bottom sheet ── */
@media (max-width: 860px) {
  :root { --header-h: 130px; }
  .site-header.scrolled { height: 72px; }
  .brand__mark { height: 116px; }
  .site-header.scrolled .brand__mark { height: 62px; }
  .dock, .soc-row { display: none; }
  .burger { display: inline-flex; }
  /* menu ouvert : on remonte un peu la croix pour qu'elle ne soit pas collée au bord du menu
     (transition héritée de .glass → mouvement doux ; valable sur toutes les tailles mobiles) */
  body.nav-open .burger { transform: translateY(-12px); }
  .scrim, .sheet { display: block; }
  body.nav-open { overflow: hidden; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(110deg, rgba(7,6,12,.86) 0%, rgba(20,10,40,.62) 45%, rgba(40,20,70,.3) 100%),
    linear-gradient(0deg, rgba(7,6,12,.92) 0%, rgba(7,6,12,0) 35%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 680px; }
.hero__title {
  font-family: 'Orbitron', var(--font-head), sans-serif;
  font-weight: 600;                       /* police Orbitron (test), organisation/placement inchangés */
  font-size: clamp(2.15rem, 4.85vw, 3.55rem);  /* Orbitron : un poil réduit (jusqu'à ~57px) pour éviter le débordement, même présentation */
  line-height: 1.3;
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.hero__text { font-family: var(--font-body); font-size: clamp(1.05rem, 1.5vw, 1.25rem); /* jusqu'à 20px */ color: rgba(255,255,255,.92); max-width: 560px; margin-bottom: 32px; line-height: 1.45; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__nowrap { white-space: nowrap; }
/* Desktop : texte à gauche + boutons CTA à droite, centrés verticalement, un peu plus grands */
@media (min-width: 861px) {
  .hero__content { max-width: 1000px; }
  .hero__title { max-width: 680px; }
  .hero__lead { display: flex; align-items: center; gap: 44px; }
  .hero__text { margin-bottom: 0; max-width: 520px; flex: 1 1 auto; }
  .hero__actions { flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; }
  .hero__actions .btn { font-size: 1.1rem; padding: 17px 32px; white-space: nowrap; }
}

/* ── Section heading commun ────────────────────────────────────────── */
.section-title {
  text-wrap: balance;   /* retour à la ligne équilibré quand le titre passe sur 2 lignes (mobile) */
  font-family: 'Orbitron', var(--font-head), sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);   /* Orbitron : plus large → un cran réduit */
  line-height: 1.18; letter-spacing: 0;
}
.section-sub { color: var(--c-muted); font-size: 1.05rem; max-width: 620px; margin: 14px auto 0; }

/* ── Services ──────────────────────────────────────────────────────── */
.services { background: var(--c-ink); padding: 110px 0 120px; position: relative; z-index: 5; }  /* z-index:5 = masque l'overlay violet FIXE du hero (piège #3) ; requis car les cartes en verre le réfracteraient */

/* ═══════════ Services — section PINNÉE + cartes qui S'EMPILENT au scroll (accueil) ═══════════ */
/* Desktop : la section s'ÉPINGLE (grille + titre FIXES) et les 6 cartes s'EMPILENT (la suivante monte et couvre,
   les précédentes reculent dans la pile) — piloté en JS + SNAP à chaque service. Mobile/reduced : cartes en flux. */
.services.svc-cine-sec { padding: 0; }
.svc-cine__track { position: relative; height: 560vh; }
.svc-cine__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
/* fond services = MÊME grille animée (pan) que la section contact : réutilise .contact__grid + .contact__grid--active
   (lumière qui suit le curseur, câblée en JS via querySelectorAll('.contact__grid--active')). Placée dans le pin
   sticky → grille FIXE pendant l'empilement. */
.svc-cine__inner { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(24px, 5vh, 64px); height: 100%; padding-bottom: calc(clamp(18px, 3.5vh, 46px) + 12px); }   /* +12px : compense le -12px du padding-top → carte MÊME taille, mais titre+carte remontés de 12px (dégage le bas des cartes du widget) */
.svc-cine__inner .section-head { margin-bottom: 0; flex: 0 0 auto; padding-top: 100px; }   /* header maintenu RÉDUIT (96px) sur cette section (desktop) ; -12px vs 112 → titre+carte remontés de 12px, gap titre↔header ~4px */
.svc-cine__inner .section-title { font-size: clamp(1.6rem, 3.6vw, 2.8rem); }   /* agrandi (compromis) — plus proche des titres de page service sans casser l'empilement */
.svc-cine__inner .section-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-top: 8px; }   /* aligné sur .page-hero__sub */
.svc-cine__stage { position: relative; flex: 1 1 auto; min-height: 0; }
.svc-slide { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; }
.svc-slide__inner { display: block; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
/* verre ADN LIQUIDE : réfraction url(#hd-glass) PROÉMINENTE → la carte/grille derrière est DÉFORMÉE (voulu),
   pas un fantôme lisible ni un frosté plat. Teinte légère pour laisser voir la distortion. iOS = fallback blur seul. */
.svc-slide__inner .glass__d { -webkit-backdrop-filter: blur(2px) saturate(1.35); backdrop-filter: blur(3px) saturate(1.35) url(#hd-glass); }
.svc-slide__inner .glass__t { background: linear-gradient(155deg, rgba(17,17,21,.4), rgba(9,9,12,.48)); }
.svc-slide__inner .glass__s { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.svc-slide__inner .glass__in { position: relative; z-index: 3; height: 100%; }
.svc-slide__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(24px, 3.2vw, 56px); align-items: center; height: 100%; padding: clamp(20px, 2.8vw, 42px); }
.svc-slide__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(9px, 1.4vh, 15px); min-height: 0; }
.svc-slide__head { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); }
.svc-slide__num { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .16em; color: #fff; }
.svc-slide__num i { color: rgba(255,255,255,.34); font-style: normal; font-size: .76em; }
.svc-slide__ic { flex: 0 0 auto; display: grid; place-items: center; width: clamp(52px, 4.4vw, 66px); height: clamp(52px, 4.4vw, 66px); color: #fff; filter: drop-shadow(0 3px 16px rgba(255,255,255,.2)); }
.svc-slide__ic svg { width: 82%; height: 82%; }
.svc-slide__ic svg * { stroke-dasharray: 1; }
.svc-slide.is-live .svc-slide__ic svg * { animation: icon-draw .9s cubic-bezier(.65,0,.35,1) both; }
.svc-slide__title { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 700; font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.06; color: #fff; margin: 0; }
.svc-slide__pitch { color: var(--c-muted); font-size: clamp(.92rem, 1.05vw, 1.04rem); line-height: 1.52; max-width: 30rem; margin: 0; }
.svc-slide__visual { position: relative; height: 100%; min-height: 170px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 56px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12); }
.svc-slide__img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
/* vidéo de fond scrubée à la souris (remplace l'image dans .svc-slide__visual) — même cadrage cover */
.svc-slide__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #0d0d0d; }
.svc-slide__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(9,9,9,0) 46%, rgba(9,9,9,.4)); }
/* Hub /services-ia : cadre vidéo carré (l'en-tête retirée au transplant rendait le cadre portrait -> recadrage trop zoomé). Aligné sur le cadre carré de l'accueil. Desktop uniquement. */
@media (min-width: 761px) {
  .svc-cine-sec--hub .svc-slide__visual { height: auto; aspect-ratio: 1 / 1; align-self: center; }
  /* Sujets collés au bord droit sur 3 vidéos (chatbots, agents vocaux, automatisation) -> recentrés (image décalée à gauche) */
  .svc-cine-sec--hub .svc-slide[data-i="0"] .svc-slide__vid,
  .svc-cine-sec--hub .svc-slide[data-i="1"] .svc-slide__vid,
  .svc-cine-sec--hub .svc-slide[data-i="4"] .svc-slide__vid { object-position: 78% center; }
}
.svc-cine__rail { position: absolute; top: 50%; right: clamp(6px, 2vw, 24px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 6; }
.svc-cine__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.22); cursor: pointer; transition: background .3s ease, height .3s ease, border-radius .3s ease; }
.svc-cine__dot.is-active { height: 26px; border-radius: 5px; background: rgba(255,255,255,.9); }
/* Mobile : on GARDE l'empilement (pin sticky + cartes qui s'empilent), mais carte en 1 COLONNE avec l'IMAGE EN HAUT. */
@media (max-width: 860px) {
  .svc-cine__pin { height: 100svh; }
  .svc-cine__inner { gap: clamp(8px, 1.6vh, 16px); padding-bottom: clamp(10px, 2vh, 20px); }
  .svc-cine__inner .section-head { padding-top: 82px; }   /* header maintenu RÉDUIT (72px) sur cette section → titre remonté, +espace carte */
  .svc-cine__inner .section-title { font-size: clamp(1.3rem, 5.4vw, 1.8rem); }
  .svc-cine__inner .section-sub { font-size: clamp(.92rem, 3.6vw, 1.05rem); margin-top: 5px; }
  /* carte en 1 colonne FLEX : l'IMAGE se redimensionne (flex:1) pour remplir l'espace restant → la carte rentre
     TOUJOURS dans la hauteur dispo, quel que soit l'iPhone (pas de débordement/clipping). Ordre : n° → image → titre → pitch → bouton */
  .svc-slide__grid { display: flex; flex-direction: column; justify-content: center; gap: clamp(11px, 2.3vh, 22px); padding: clamp(12px, 2vh, 18px); }
  .svc-slide__text { display: contents; }
  .svc-slide__num { order: -2; font-size: .92rem; }
  .svc-slide__visual { order: -1; width: 100%; flex: 1 1 auto; min-height: 84px; max-height: 40vh; height: auto; aspect-ratio: auto; }
  .svc-slide__head { order: 0; gap: 10px; }
  .svc-slide__ic { width: 38px; height: 38px; }
  .svc-slide__title { order: 0; font-size: clamp(1.02rem, 4.4vw, 1.38rem); }
  .svc-slide__pitch { order: 1; font-size: clamp(.8rem, 3.2vw, .9rem); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .svc-slide__grid .btn { order: 2; }
  .svc-cine__rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-cine__track { height: auto; }
  .svc-cine__pin { position: static; height: auto; display: block; overflow: visible; }
  .svc-cine__stage { position: static; }
  .svc-slide { position: relative; inset: auto; transform: none !important; opacity: 1 !important; margin-bottom: 20px; }
  .svc-slide__inner { height: auto; }
}
.services .container { position: relative; z-index: 1; }
/* Fond grille masqué (gros carrés) — lignes slate subtiles, estompées par un masque radial */
.services__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(165,165,165,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(165,165,165,.11) 1px, transparent 1px);
  background-size: 96px 96px;
  /* fondu VERTICAL (entrée en haut pour raccorder au hero + sortie en bas) × fondu latéral léger */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .btn { margin-top: 28px; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.06);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--card-bg);
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,6,20,.22) 0%, rgba(10,6,20,.58) 52%, rgba(10,6,20,.9) 100%);
}
.card:hover::before { transform: scale(1.06); }
.card__body {
  margin-top: auto;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.card__icon { width: 54px; height: 54px; color: #fff; align-self: center; filter: drop-shadow(0 2px 12px rgba(255,255,255,.22)); }
/* Mouvement au survol — UNIFORME : toutes les icônes line se redessinent (tracé). */
.card__icon { transform-origin: center center; }
.card__icon * { stroke-dasharray: 1; }
.card:hover .card__icon * { animation: icon-draw .8s cubic-bezier(.65,0,.35,1) both; }
@keyframes icon-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .card:hover .card__icon * { animation: none; } }
.card__title { font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; align-self: center; text-align: center; }
.card__text { color: var(--c-muted); font-size: .95rem; line-height: 1.6; flex: 1; }
.card__body .btn { align-self: flex-start; margin-top: 6px; }

/* ── Carte à révélation au survol (image + icône → texte + CTA au survol) ── */
.card--reveal .card__body { justify-content: flex-end; }
.card--reveal .card__icon,
.card--reveal .card__title { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.card--reveal:hover .card__icon { transform: translateY(-4px) scale(1.05); }
.card--reveal .card__reveal {
  display: grid;
  grid-template-rows: 0fr;            /* replié par défaut */
  opacity: 0;
  width: 100%;
  margin-top: 0;
  transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin-top .4s ease;
}
.card--reveal:hover .card__reveal {
  grid-template-rows: 1fr;            /* déplié au survol */
  opacity: 1;
  margin-top: 14px;
}
.card--reveal .card__reveal-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
/* Tactile / mobile : pas de survol → tout est visible */
@media (hover: none), (max-width: 760px) {
  .card--reveal .card__reveal { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
}

/* ── Contact ───────────────────────────────────────────────────────── */
.contact { position: relative; z-index: 5; overflow: hidden; padding: 100px 0; background: var(--c-ink); } /* z-index:5 (comme .services) → masque l'overlay VIOLET fixe du hero, sinon le verre de la carte le réfracte */
/* fond : grille animée infinie (mêmes couleur + taille des carrés que la section services), pan lent */
.contact__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(165,165,165,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(165,165,165,.11) 1px, transparent 1px);
  background-size: 96px 96px;
  animation: contact-grid-pan 36s linear infinite;
  /* IDENTIQUE à .services__grid : même opacité .11 + même fondu noir 4 côtés → sections cohérentes */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
@keyframes contact-grid-pan { to { background-position: 96px 96px; } }
@media (prefers-reduced-motion: reduce) { .contact__grid { animation: none; } }
/* couche ACTIVE : mêmes carrés mais plus lumineux, révélés UNIQUEMENT par un spot radial qui suit le curseur
   (var --cx/--cy posées en JS) → effet "lumière sur la grille". Hors curseur : masqué (spot hors champ). */
.contact__grid--active {
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(208,210,214,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(208,210,214,.55) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle 185px at var(--cx, -400px) var(--cy, -400px), #000 0%, rgba(0,0,0,.5) 42%, transparent 70%);
          mask-image: radial-gradient(circle 185px at var(--cx, -400px) var(--cy, -400px), #000 0%, rgba(0,0,0,.5) 42%, transparent 70%);
}
.contact__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.contact__intro { text-align: center; }
.contact__lead { color: var(--c-muted); margin: 16px auto 30px; max-width: 440px; }
.contact__logo { width: min(340px, 82%); height: auto; margin: 0 auto; }

/* ════ Contact — tête IA légère qui suit le curseur (SVG/CSS, sans WebGL) ════ */
/* Seul le BOUT BAS du cou glisse derrière la carte formulaire (petit overlap négatif + carte au-dessus via
   z-index) → son bord bas n'est jamais visible, donc aucun défaut de détachement quand la tête bouge.
   Pas de flottement, pas de halo. */
.ai-head { position: relative; z-index: 1; width: clamp(150px, 22vw, 184px); margin: 0 auto -14px; pointer-events: none; }
.contact__form-wrap { position: relative; }
.contact__form-wrap > .cform--float { position: relative; z-index: 2; }
/* MOBILE uniquement : le logo Msolutions passe AU-DESSUS du titre « Contactez-nous »
   (page contact + section contact de l'accueil, même structure .contact__intro). */
@media (max-width: 860px) {
  .contact__intro { display: flex; flex-direction: column; }
  .contact__intro .contact__logo { order: -1; margin-bottom: 18px; }
}
.ai-head__float { position: relative; z-index: 1; perspective: 520px; }
.ai-head__tilt { transform-style: preserve-3d; will-change: transform; }
.ai-head__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 5px 11px rgba(0,0,0,.42)); }
.ai-head__eyes { will-change: transform; }
.ai-head__blink { transform-box: fill-box; transform-origin: center; animation: aiBlink 5.6s ease-in-out infinite; }
.ai-head__beacon { animation: aiBeacon 2.6s ease-in-out infinite; }
@keyframes aiBlink { 0%, 90%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(.08); } }
@keyframes aiBeacon { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-head__blink, .ai-head__beacon { animation: none; }
}
/* État « content » après envoi réussi du formulaire : tout le bleu (yeux, points d'oreilles, balise) passe au
   VERT du même style + un sourire apparaît. */
.ai-smile { opacity: 0; transition: opacity .5s ease .15s; }
.ai-dot, .ai-beacon-core { transition: fill .5s ease; }
.ai-head.is-happy .ai-eye { fill: url(#ah-eye-green); }
.ai-head.is-happy .ai-dot { fill: #39ffab; }
.ai-head.is-happy .ai-beacon-core { fill: #c8ffe6; }
.ai-head.is-happy .ai-smile { opacity: 1; }
/* Variante « écran de succès » (accueil) : robot vert autonome, pas de carte à masquer → pas d'overlap négatif */
.ai-head--success { margin: 0 auto 10px; }

/* Formulaire */
.contact__form-wrap { width: 100%; max-width: 640px; }
/* carte glass autour du formulaire : bordure blanche + flou + arêtes (même langage que le menu) */
.cform--float {
  padding: clamp(22px, 3vw, 34px); border-radius: 24px;
  background: rgba(255,255,255,.06);
  /* MÊME verre que le menu (saturate REMIS — le violet venait du fond, pas de lui ; fond désormais neutre) */
  -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2) url(#hd-glass);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 2px 2px 2px -1px rgba(255,255,255,.75), inset -2px -2px 2px -1px rgba(255,255,255,.5),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    0 24px 60px -24px rgba(0,0,0,.55);
}
.cform__field { margin-bottom: 13px; }
.cform__label { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 8px; letter-spacing: .01em; }
.req { color: #fff; margin-left: 2px; }
.cform__input, .cform__textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 13px;
  color: #fff;
  font: inherit; font-size: 14px;
  padding: 15px 17px;
  outline: none;
  -webkit-backdrop-filter: blur(4px) saturate(1.2);
  backdrop-filter: blur(4px) saturate(1.2);
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255,255,255,.5),
    inset -2px -2px .5px -3px rgba(255,255,255,.4),
    inset 1px 1px 1px -.5px rgba(255,255,255,.4),
    inset -1px -1px 1px -.5px rgba(255,255,255,.4),
    inset 0 0 4px 3px rgba(255,255,255,.05),
    0 4px 14px rgba(0,0,0,.22);
  transition: box-shadow .25s ease;
}
.cform__input::placeholder, .cform__textarea::placeholder { color: rgba(255,255,255,.5); }
.cform__input:focus, .cform__textarea:focus {
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255,255,255,.7),
    inset -2px -2px .5px -3px rgba(255,255,255,.5),
    inset 1px 1px 1px -.5px rgba(255,255,255,.5),
    inset 0 0 4px 3px rgba(255,255,255,.07),
    0 0 0 3px rgba(167,139,250,.32),
    0 6px 18px rgba(0,0,0,.3);
}
.cform__textarea { min-height: 76px; resize: vertical; }
.cform__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(22,22,27,.92) inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* services : 2 par ligne en desktop/tablette (gain de place), 1 par ligne en petit mobile */
.cform__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
@media (max-width: 600px) { .cform__checks { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.65);
  border-radius: 4px;
  background: rgba(255,255,255,.10);
  cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.check input[type="checkbox"]:checked { background: #fff; border-color: #fff; }
.check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid var(--c-purple); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check span { color: #fff; font-size: 14px; }

/* ── Formulaire glass : FLOATING LABELS (titre dans le champ → remonte au focus/à la saisie) ──────
   Scopé .cform--float. Détection via :has() (label reste avant l'input dans le markup). */
.cform--float .cform__field:has(.cform__input, .cform__textarea) { position: relative; }
.cform--float .cform__field:has(.cform__input, .cform__textarea) > .cform__label {
  position: absolute; left: 18px; margin: 0; z-index: 2;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.58); letter-spacing: 0;
  pointer-events: none; transform-origin: left center;
  transition: transform .18s cubic-bezier(.4,0,.2,1), color .18s ease;
}
/* repos : input → titre CENTRÉ (effet placeholder) ; textarea → titre en haut */
.cform--float .cform__field:has(.cform__input) > .cform__label { top: 50%; transform: translateY(-50%); }
.cform--float .cform__field:has(.cform__textarea) > .cform__label { top: 22px; transform: none; }
/* place pour le titre flottant en haut */
.cform--float .cform__field:has(.cform__input, .cform__textarea) .cform__input,
.cform--float .cform__field:has(.cform__input, .cform__textarea) .cform__textarea { padding-top: 24px; padding-bottom: 8px; }
/* focus OU rempli (placeholder=" ") → le titre remonte en haut + rétrécit + blanc */
.cform--float .cform__field:has(.cform__input:focus) > .cform__label,
.cform--float .cform__field:has(.cform__input:not(:placeholder-shown)) > .cform__label {
  transform: translateY(-50%) translateY(-16px) scale(.76); color: #fff;
}
.cform--float .cform__field:has(.cform__textarea:focus) > .cform__label,
.cform--float .cform__field:has(.cform__textarea:not(:placeholder-shown)) > .cform__label {
  transform: translateY(-13px) scale(.76); color: #fff;
}

.cform__btn-row { display: flex; justify-content: center; margin-top: 8px; }
.cform__error {
  display: none; margin-top: 12px; padding: 11px 16px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; text-align: center;
  background: rgba(220,60,60,.2); border: 1px solid rgba(220,60,60,.5); color: #ff9090;
}
.cform__error.show { display: block; }

/* Consentement RGPD (case obligatoire, validation front) — réutilise .check ; couleur d'erreur = #ff9090 */
.cform__consent { margin-top: 6px; }
.cform__consent .check span { font-size: 13px; line-height: 1.45; }
.cform__consent .check a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 2px; }
.cform__consent .check a:hover { text-decoration-color: #fff; }
.cform__consent.is-error .check span { color: #ff9090; }
.cform__consent.is-error .check input[type="checkbox"] { border-color: #ff9090; }
.cform__consent-err { display: none; margin-top: 6px; font-size: 12.5px; color: #ff9090; padding-left: 30px; }
.cform__consent.is-error .cform__consent-err { display: block; }

/* Écran de succès */
.cform__success[hidden] { display: none; }
.cform__success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 30px 10px; animation: fadeUp .55s cubic-bezier(.22,1,.36,1) both; }
.cform__success-icon svg { width: 80px; height: 80px; overflow: visible; }
.cform__success .ring { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.5; }
.cform__success .arc { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; animation: arcDraw .7s .3s cubic-bezier(.4,0,.2,1) forwards; }
.cform__success .check { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: checkDraw .4s .85s ease forwards; }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.cform__success-title { font-family: 'Orbitron', var(--font-head), sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .5px; }
.cform__success-divider { width: 40px; height: 2px; background: rgba(255,255,255,.35); border-radius: 2px; }
.cform__success-text { font-family: var(--font-head); font-size: 17px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.9); }
.cform__success-text strong { font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────── */
/* position:relative + z-index → le footer passe AU-DESSUS de la vidéo hero en position:fixed
   (scroll 3D) ; sinon, statique, il était peint sous la vidéo qui transparaissait à sa place. */
.site-footer { background: var(--c-ink); padding-top: 44px; position: relative; z-index: 5; }
/* Footer calé sur le même gabarit que le header (pleine largeur + padding latéral identique) → logo footer aligné au logo header */
.site-footer .container { max-width: none; padding-inline: clamp(20px, 4vw, 56px); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 32px; align-items: start; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.footer__brand img { width: 260px; height: auto; margin-bottom: 16px; }
/* Boutons réseaux : mêmes cercles en verre que le header (.soc-glass), CENTRÉS sous le logo (largeur = largeur du logo) */
.footer__social { display: flex; gap: 12px; width: 260px; justify-content: center; }

.footer__col h4 { font-family: 'Orbitron', var(--font-head), sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; margin-top: 22px; }
.footer__col h4:first-child { margin-top: 0; }
.footer__col p { color: var(--c-muted); font-size: .95rem; margin-bottom: 6px; }
.footer__col a:hover { color: #fff; }
/* Desktop : colonnes Contact/Support un peu plus grandes + bouton CTA agrandi (mobile inchangé) */
@media (min-width: 761px) {
  .footer__col h4 { font-size: 1.22rem; }   /* Orbitron : un cran réduit (plus large que Outfit) */
  .footer__col p  { font-size: 1.05rem; }
  .mf__cta-btn    { padding: 17px 40px; font-size: 17px; }
}
.footer__links li { margin-bottom: 10px; }
.footer__links a { color: var(--c-muted); transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer__bottom .container { color: var(--c-muted-2); font-size: .9rem; text-align: left; }

/* ── Motion footer (refonte 21st) ──────────────────────────────────── */
/* Footer remonté en NÉGATIF (margin, PAS transform → ne casse pas le glass du marquee) : le marquee (1er
   élément) chevauche la section précédente → plus de bande noire, transition directe. Top transparent →
   la section précédente transparaît derrière le verre, puis fondu vers le noir. z-index:5 (hérité) = au-dessus. */
.site-footer.mf { background: linear-gradient(180deg, transparent 0px, var(--c-ink) 60px, var(--c-ink) 210px);
  padding-top: 0; overflow: hidden; margin-top: -78px; }

/* Footer : effet "text-disperse" (21st.dev) sur les liens email/téléphone.
   JS découpe le texte en .td-char et pose --x/--y/--rz par lettre ; au survol elles se dispersent. */
.td-link { white-space: nowrap; }
.td-char {
  display: inline-block;
  /* inline-block = conteneur de bloc : une espace seule y serait ecrasee a 0 (« Concuavec »). */
  white-space: pre;
  transition: transform .75s cubic-bezier(.33, 1, .68, 1);
  will-change: transform;
}
.td-link:hover .td-char,
.td-link:focus-visible .td-char {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rz, 0deg));
}
@media (prefers-reduced-motion: reduce) {
  .td-char { transition: none; }
  .td-link:hover .td-char, .td-link:focus-visible .td-char { transform: none; }
}
/* GAP UNIFORME « dernière ligne de contenu → footer » sur TOUTES les pages (présentes ET futures), automatique.
   Le `padding-bottom` ci-dessous EST le gap (relation : gap visible ≈ padding-bottom − 78px, car le footer remonte
   de margin-top:-78px). Content-independent → marche pour texte, carte, grille. **Pour changer le gap partout :
   changer CETTE valeur, ne PAS ajouter d'override par section.** (188px ≈ 110px de gap, validé sur Agence/services.)
   Le marquee reste collé à la frontière section↔footer qu'il masque : augmenter le gap descend footer+marquee
   ENSEMBLE (le recouvrement -78px tombe sur le padding vide = encre sur encre), sans rien découvrir.
   Deux structures gérées :
   - footer juste après une <section> (services, contact, agence…) → cible la section ;
   - footer après un <main> qui enveloppe tout (accueil) → cible le DERNIER ENFANT du main, pas le main. */
:has(+ .site-footer.mf):not(:where(main, body)) { padding-bottom: 188px; }
main:has(+ .site-footer.mf) { padding-bottom: 0; }
main:has(+ .site-footer.mf) > :last-child { padding-bottom: 188px; }
/* (1) ENTRÉE : le footer NE translate PAS (sinon il découvrirait la séparation du dessus, et le marquee qui
   la couvre descendrait avec). Le MARQUEE reste en place (couvre la séparation) ; seul le CONTENU remonte en
   CASCADE (phases). Piloté par .mf--in (keyframe → REJOUABLE à chaque retour au footer). Gated par .mf--ready
   (posé en JS) → sans JS le contenu reste visible. */
/* CONTENU : chaque bloc remonte quand il APPROCHE le viewport (observer PAR élément) → on le voit vraiment ;
   rejouable au retour (.is-in retiré à la sortie). Gated .mf--ready (posé en JS) → sans JS le contenu reste visible. */
.mf--ready .mf-rise { opacity: 0; transform: translateY(52px); }
.mf--ready .mf-rise.is-in { animation: mf-up 1.25s cubic-bezier(.16,1,.3,1) both; }
@keyframes mf-up { from { opacity: 0; transform: translateY(52px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mf--ready .mf-rise { opacity: 1 !important; transform: none !important; animation: none !important; } }
.site-footer.mf .container { position: relative; z-index: 2; }

/* grille — même modèle que la section services, fondu en haut pour raccorder */
.mf__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.2) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%); }

/* marquee : mix services + marque, légèrement incliné comme l'original */
/* bannière publicitaire : EXACTEMENT le verre du menu (dock) — structure .glass + couches __d/__t/__s/__in.
   .glass__d laissé PAR DÉFAUT = la vraie réfraction liquid-glass url(#hd-glass) sur Chrome (fallback blur iOS),
   identique au dock. On NE le surcharge pas. */
/* taille précédente (fine). La séparation n'est PAS cachée par la bande mais par le FOND : l'ink du footer
   (gradient ci-dessus) recouvre l'arête de la section juste sous le marquee → aucun défaut, ni à gauche ni à droite. */
.mf__marquee { position: relative; z-index: 2; overflow: hidden; direction: ltr; padding: 13px 0; margin-top: 16px;
  transform: rotate(-1.3deg) scale(1.05); transform-origin: center; }
.mf__marquee.glass { display: block; border-radius: 0; box-shadow: 0 14px 32px -14px rgba(0,0,0,.55); }
.mf__marquee .glass__in { display: block; width: 100%; }
.mf__track { display: inline-flex; align-items: center; width: max-content; animation: mf-scroll 52s linear infinite; }
.mf__track span { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(.72rem, 1.2vw, .96rem); padding: 0 18px; white-space: nowrap;   /* Orbitron : plus large → letter-spacing + taille réduits */
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mf__track i { font-style: normal; font-size: .8em; color: rgba(124,150,255,.55); }
.mf__marquee:hover .mf__track { animation-play-state: paused; }
@keyframes mf-scroll { to { transform: translateX(-50%); } }

/* CTA — titre dégradé blanc + liens légaux en boutons glass */
.mf__cta { position: relative; z-index: 2; text-align: center; padding: clamp(56px,9vw,104px) 20px 32px; }
.mf__title { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 700; line-height: .95; letter-spacing: 0;
  font-size: clamp(2.2rem, 6.4vw, 5.4rem); margin: 0;  /* Orbitron plus large → réduit pour tenir sur 1 ligne, dégradé conservé */
  background: linear-gradient(180deg, #fff 28%, rgba(255,255,255,.42));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mf__cta-btn { margin-top: clamp(26px,3.5vw,40px); }
/* liens légaux : rangée centrée SOUS Contact/Support */
.mf__legal-wrap { position: relative; z-index: 2; padding: 6px 0 10px; }
.mf__legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* filigrane géant MSOLUTIONS (étiré sur toute la largeur, mot entier visible) */
.mf__wm { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.mf__wm svg { display: block; width: 100%; height: auto; }
.mf__wm text { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 800; font-size: 153px; letter-spacing: 0; fill: url(#wm-grad); }  /* Orbitron (max 800 chargé) : taille calée pour que "MSOLUTIONS" tienne la largeur comme Outfit 188px */

/* logo + réseaux | Contact | Support */
.mf__main { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start;
  padding: clamp(24px,4vw,48px) 0 36px; }
.mf__main .footer__brand img { width: 240px; }

/* bas : copyright · crafted · back-to-top */
/* copyright à gauche · crafted CENTRÉ au milieu (desktop) */
.mf__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 20px;
  border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0 30px; }
.mf__bottom .mf__crafted { grid-column: 2; text-align: center; }
.mf__copy { color: var(--c-muted-2); font-size: .9rem; }
.mf__crafted { font-family: var(--font-head); color: var(--c-muted); font-size: .92rem; }
.mf__crafted b { color: #fff; font-weight: 600; }

/* ══════════ Correctifs RTL (arabe) ══════════ */
/* 1) NE JAMAIS réordonner le contenu LTR (email, téléphone, marque) dans un bloc RTL → isolation bidi. */
a[href^="mailto:"], a[href^="tel:"] { unicode-bidi: isolate; direction: ltr; }
.mf__crafted b, .brand__mark, .lang-cur { unicode-bidi: isolate; }
/* 2) Les titres en Orbitron ont un line-height serré (calé sur le latin) qui TRONQUE l'arabe (fallback) → on aère. */
html[dir="rtl"] .mf__title { line-height: 1.4; }
html[dir="rtl"] .page-hero__title { line-height: 1.35; }
html[dir="rtl"] .section__title { line-height: 1.45; }
html[dir="rtl"] .agency-hero__title { line-height: 1.25; }
/* 2b) Orbitron n'a PAS de glyphes arabes → le titre tombe sur un fallback système ÉTROIT qui paraît
   petit. On force une vraie police arabe (display) sur tous les titres Orbitron en RTL. */
html[dir="rtl"] .mf__title,
html[dir="rtl"] .page-hero__title,
html[dir="rtl"] .section__title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .agency-hero__title {
  font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
/* 2c) Titre hero AGENCE : en arabe c'est UN mot court (« وكالتنا ») là où le latin fait 2 grandes
   lignes → il paraissait minuscule face à l'emblème central. On l'agrandit pour un poids visuel égal. */
html[dir="rtl"] .agency-hero__title { font-size: clamp(3.4rem, 21vw, 8.5rem); font-weight: 700; }
.mf__heart { color: #f5365c; }
/* retour au hero : fixe, empilé JUSTE AU-DESSUS du widget chatbot (fab 56px, right/bottom 16px).
   Caché par défaut → révélé seulement quand le footer entre dans le viewport (JS observer). */
.mf__top { position: fixed; right: 16px; bottom: 86px; z-index: 998; width: 50px; height: 50px; padding: 0; border-radius: 50%;
  opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none;
  /* PAS de url(#container-glass) ici : ce filtre de réfraction (feDisplacementMap), sur un élément
     position:fixed + transform, déforme TOUTE la page sur Chrome (bug GPU). On force un flou simple. */
  -webkit-backdrop-filter: blur(10px) saturate(1.35) !important; backdrop-filter: blur(10px) saturate(1.35) !important;
  transition: opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.mf__top.mf__top--show { opacity: 1; transform: none; pointer-events: auto; }


@media (max-width: 760px) {
  /* MOBILE — ordre voulu : Contact, Support, liens légaux, PUIS logo+réseaux, puis copyright.
     mf__main passe en display:contents (sa grille disparaît) → ses enfants (brand/contact/support)
     deviennent des items du footer (flex column) → on les replace avec 'order'. */
  .site-footer.mf { display: flex; flex-direction: column; }
  .mf__main { display: contents; }
  .mf__main > .footer__col   { order: 1; text-align: center; padding-inline: clamp(20px,4vw,56px); margin-top: 26px; }
  .mf__legal-wrap            { order: 2; margin-top: 10px; }
  .mf__main > .footer__brand { order: 3; align-items: center; text-align: center; padding-inline: clamp(20px,4vw,56px); margin-top: 34px; }
  .mf__bottom                { order: 4; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; margin-top: 24px; }
  .mf__bottom .mf__crafted   { grid-column: auto; }
  /* « Prêt à commencer ? » sur UNE seule ligne, le plus GRAND possible (texte court, facteur ~8.5) :
     il remplit la largeur en gardant ~12px de marge vs les bords. Tient jusqu'à ~320px. */
  .mf__cta { padding-inline: 12px; }
  .mf__title { white-space: nowrap; font-size: clamp(1.4rem, 8vw, 2.7rem); }  /* Orbitron : réduit pour rester sur 1 ligne sur mobile */
  /* grille + filigrane plus visibles sur mobile (trop discrets sur petit écran : grille clairsemée,
     filigrane réduit). + contenu maintenu AU-DESSUS (z-index, car .mf__main passe en display:contents). */
  .mf__grid { background-image:
      linear-gradient(to right, rgba(148,163,184,.15) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148,163,184,.15) 1px, transparent 1px);
    background-size: 78px 78px; }
  .mf__wm text { fill: rgba(255,255,255,.085); }
  .mf__main > .footer__brand, .mf__main > .footer__col { position: relative; z-index: 2; }
}

/* ── Reveal on scroll ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Révélation « blur-in » lettre par lettre (titres/sous-titres) — même effet que le titre hero, déclenché au scroll */
.tw-word { display: inline-block; white-space: nowrap; }
.tw-char { display: inline-block; opacity: 0; }
.tw-go .tw-char { animation: twBlurIn .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes twBlurIn { 0% { opacity: 0; transform: translateY(10px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .tw-char { opacity: 1 !important; animation: none !important; } }
/* ══ Page agence — Notre approche : texte à gauche + gradient-cards (3 points) à droite ══ */
.agency-manifesto { position: relative; }
.agency-manifesto__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 4vw, 60px); align-items: center; }
.agency-manifesto__title { text-align: left; margin: 0 0 16px; }   /* .section__title = Orbitron, même taille que « Notre vision » */
.agency-manifesto__statement { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.35; color: #fff; margin: 0; }
.agency-manifesto__lead { color: var(--c-muted); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; max-width: 460px; margin: 16px 0 0; }
/* gradient-cards — corps verre à hauteur du contenu (aucun vide) + panneau dégradé skew qui dépasse en bas (valeur fixe) */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gcard { position: relative; }
.gcard__panel { position: absolute; z-index: 0; left: 50%; top: 38px; bottom: -30px; width: 62%; transform: translateX(-50%) skewX(11deg); border-radius: 14px; background: linear-gradient(315deg, var(--gc-a), var(--gc-b)); transition: transform .55s cubic-bezier(.4,0,.2,1), width .55s cubic-bezier(.4,0,.2,1), top .55s; }
.gcard::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 38px; bottom: -30px; width: 62%; transform: translateX(-50%) skewX(11deg); border-radius: 14px; background: linear-gradient(315deg, var(--gc-a), var(--gc-b)); filter: blur(30px); opacity: .5; pointer-events: none; transition: transform .55s cubic-bezier(.4,0,.2,1), width .55s cubic-bezier(.4,0,.2,1), top .55s, opacity .55s, filter .55s; }
.gcard:hover .gcard__panel, .gcard:hover::after { transform: translateX(-50%) skewX(0deg); width: 80%; top: 22px; }
.gcard:hover::after { opacity: .62; filter: blur(36px); }
.gcard__body { position: relative; z-index: 2; height: 100%; box-sizing: border-box; padding: clamp(15px, 1.4vw, 20px); border-radius: 16px; background: rgba(16,16,22,.5); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25); box-shadow: 0 16px 40px -18px rgba(0,0,0,.7); transition: transform .5s cubic-bezier(.4,0,.2,1); }
.gcard:hover .gcard__body { transform: translateY(-5px); }
.gcard__title { font-family: var(--font-head); font-weight: 600; color: #fff; margin: 0 0 8px; white-space: nowrap; font-size: clamp(1.02rem, 1.2vw, 1.2rem); }
.gcard__desc { font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.5; color: rgba(255,255,255,.86); margin: 0; }
@media (max-width: 980px) {
  .agency-manifesto__inner { grid-template-columns: 1fr; gap: 30px; }
  .agency-manifesto__title, .agency-manifesto__statement { text-align: center; }
  .agency-manifesto__lead { max-width: none; margin-inline: auto; text-align: center; }
  /* 3 cartes sur la MÊME ligne horizontale, même sur mobile (compactées, titre 1 ligne) */
  .gcards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gcard__panel, .gcard::after { top: 24px; bottom: -22px; }
  .gcards { gap: 7px; }
  .gcard__body { padding: 12px 8px; }
  .gcard__title { font-size: clamp(.6rem, 2.75vw, 1.08rem); margin-bottom: 6px; letter-spacing: -.01em; }
  .gcard__desc { font-size: clamp(.8rem, 2.7vw, .92rem); line-height: 1.42; }
}
@media (prefers-reduced-motion: reduce) { .gcard__panel, .gcard::after, .gcard__body { transition: none; } }

/* ══ Page agence — Notre vision : bento 6 solutions cliquables ══ */
.agency-bento { position: relative; }
.bento { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 42px; }
.bento-card { position: relative; display: block; min-height: 232px; border-radius: 20px; overflow: hidden; text-decoration: none; background: #0c0c10; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 -18px 70px -22px rgba(94,114,228,.14) inset, 0 22px 50px -28px rgba(0,0,0,.7); transition: transform .5s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .5s; }
.bento-card--wide { grid-column: 1 / -1; min-height: 0; cursor: default; }
.bento-card--wide .bento-card__img { opacity: .3; }
.bento-card--wide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(9,9,12,.94) 34%, rgba(9,9,12,.62)); }
.bento-card--wide:hover { transform: none; border-color: rgba(255,255,255,.1); box-shadow: 0 -18px 70px -22px rgba(94,114,228,.14) inset, 0 22px 50px -28px rgba(0,0,0,.7); }
.bento-wide { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(24px, 2.6vw, 40px); }
.bento-wide__head { font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 600; line-height: 1.2; color: #fff; margin: 0; text-wrap: balance; }
.bento-wide__text { color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.65; margin: 0; }
.bento-card--2 { grid-column: span 2; }
.bento-card--3 { grid-column: span 3; }
.bento-card--4 { grid-column: span 4; }
.bento-card__img { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; opacity: .6; filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1)); transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s; }
.bento-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,9,12,.97) 6%, rgba(9,9,12,.55) 42%, transparent 74%); }
.bento-card__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(18px, 1.8vw, 26px); }
.bento-card__ic { width: 34px; height: 34px; margin-bottom: 6px; color: #fff; }
.bento-card__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bento-card__ic svg * { stroke-dasharray: 1; }   /* icône tracée (icon-draw) au SURVOL de la carte, comme les cartes services */
.bento-card:hover .bento-card__ic svg * { animation: icon-draw .8s cubic-bezier(.65, 0, .35, 1) both; }
@media (prefers-reduced-motion: reduce) { .bento-card:hover .bento-card__ic svg * { animation: none; } }
.bento-card__title { font-family: var(--font-head); font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 600; color: #fff; margin: 0; }
.bento-card__desc { font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; max-width: 32ch; }
.bento-card__go { position: absolute; z-index: 3; top: 18px; right: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 1.05rem; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s, background .3s; }
.bento-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); box-shadow: 0 -18px 70px -18px rgba(94,114,228,.3) inset, 0 32px 60px -28px rgba(0,0,0,.8); }
.bento-card:hover .bento-card__img { transform: scale(1.06); opacity: .72; }
.bento-card:hover .bento-card__go { opacity: 1; transform: translateX(0); background: rgba(255,255,255,.16); }
.bento-card:focus-visible { outline: 2px solid rgba(33,212,253,.8); outline-offset: 3px; }
@media (max-width: 860px) {
  /* bento « mélangé » : 2 colonnes, cartes feature (--4) en pleine largeur → rendu éparpillé, pas un simple empilement */
  .bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bento-card--2, .bento-card--3 { grid-column: span 1; }
  .bento-card--4 { grid-column: span 2; }
  /* Automatisation des tâches : carte VERTICALE (1 colonne × 2 lignes) → Génération + Réseaux se placent à sa droite */
  .bento-card--tallmob { grid-column: span 1; grid-row: span 2; }
  .bento-card--wide { grid-column: 1 / -1; min-height: 0; }
  .bento-card { min-height: 172px; }
  .bento-card__body { padding: 14px; }
  .bento-card__title { font-size: clamp(1rem, 3.4vw, 1.28rem); }
  .bento-card__desc { max-width: none; }
  .bento-wide { grid-template-columns: 1fr; gap: 12px; padding: clamp(20px, 5vw, 28px); }
}

/* ══ Page agence — Notre mission : 3 cartes animées (style bundled/1108) ══ */
.agency-mission { position: relative; }
.acards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.acard { position: relative; border-radius: 20px; padding: 1.5px; isolation: isolate; }
/* Bordure : le dégradé tube est MASQUÉ sur le seul anneau de 1.5px (padding + mask xor) → il ne
   transparaît plus dans le verre translucide. RELAIS : une carte fait son tour complet, puis la
   suivante (delays -6s/-3s sur un cycle 9s → chaque carte s'allume 3s à tour de rôle). */
.acard::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--acard-angle), transparent 0 44%, rgba(33,212,253,.85) 56%, rgba(94,114,228,.85) 68%, rgba(245,54,92,.8) 80%, rgba(244,208,63,.9) 94%, transparent 100%);   /* palette tube : cyan → indigo → rose → orange → jaune */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; animation: acardRelay 9s linear infinite;
}
/* Fond COPIÉ EXACTEMENT de la carte témoignages (.tt-card) : verre CLAIR = teinte blanche 6%
   translucide (la section sombre transparaît sous le blur) + réfraction #hd-glass + reflets
   liquid-glass. La bordure tube étant masquée sur l'anneau, aucun bleed dans ce verre translucide. */
.acard__inner {
  position: relative; z-index: 1; height: 100%; border-radius: 19px; overflow: hidden;
  padding: clamp(24px, 2.5vw, 36px);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2) url(#hd-glass);
  box-shadow: inset 2px 2px 2px -1px rgba(255,255,255,.6), inset -2px -2px 2px -1px rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -22px rgba(0,0,0,.6);
}
.acard__ic { display: inline-flex; width: 46px; height: 46px; margin-bottom: 16px; padding: 10px; border-radius: 13px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.acard__ic svg { width: 100%; height: 100%; }
.acard__title { font-family: var(--font-head); font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 600; color: #fff; margin: 0 0 10px; }
.acard__text { color: var(--c-muted); font-size: clamp(.92rem, 1vw, 1rem); line-height: 1.6; margin: 0; }
@property --acard-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes acardRelay {
  0%     { --acard-angle: 0deg;   opacity: 0; }   /* éteinte (verre nu) en attendant son tour */
  3%     { --acard-angle: 0deg;   opacity: 1; }   /* s'allume */
  30.5%  { --acard-angle: 360deg; opacity: 1; }   /* tour COMPLET visible */
  33.33% { --acard-angle: 360deg; opacity: 0; }   /* s'éteint, passe la main */
  100%   { --acard-angle: 360deg; opacity: 0; }
}
/* Relais gauche→droite : carte 1 (0-3s), carte 2 (3-6s), carte 3 (6-9s) sur le cycle de 9s. */
.acards .acard:nth-child(2)::before { animation-delay: -6s; }
.acards .acard:nth-child(3)::before { animation-delay: -3s; }
@media (max-width: 860px) {
  /* 3 cartes mission sur la MÊME ligne (comme Notre approche), compactées */
  .acards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .acard__inner { padding: 14px 10px; }
  .acard__ic { width: 38px; height: 38px; padding: 8px; margin-bottom: 12px; }
  .acard__title { font-size: clamp(.82rem, 3vw, 1.3rem); margin-bottom: 7px; }
  .acard__text { font-size: clamp(.72rem, 2.5vw, .95rem); line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .acard::before { animation: none; opacity: .5; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .contact__form-wrap { margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 760px) {
  .hero { min-height: 92vh; padding-top: calc(var(--header-h) + 24px); }
  .hero__actions .btn { flex: 1 1 auto; }
  .services { padding: 80px 0; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { min-height: 380px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  /* Mobile : marque + boutons recentrés à la page (pas d'alignement gauche) */
  .footer__brand { align-items: center; text-align: center; }
  .footer__bottom .container { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   PAGES INTÉRIEURES — hero de page, sections, features, CTA, prose
   Même langage visuel que l'accueil (tokens partagés).
   ===================================================================== */

/* ── Hero de page intérieure (sans vidéo, léger) ───────────────────── */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 70px) 0 70px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 38%, rgba(9,9,9,0) 70%),
    linear-gradient(180deg, #0d0d0d 0%, var(--c-ink) 100%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(59,130,246,.16) 0%, transparent 55%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.breadcrumb { font-size: .85rem; color: var(--c-muted-2); margin-bottom: 18px; }
.breadcrumb a { color: var(--c-muted); transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 8px; opacity: .5; }
.page-hero__title {
  text-wrap: balance;   /* retour à la ligne équilibré (mobile) */
  font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 600;   /* Orbitron (style titres principaux) */
  font-size: clamp(1.9rem, 4.3vw, 3.4rem); line-height: 1.22; letter-spacing: 0;  /* réduit car Orbitron est plus large */
}
.page-hero__sub { font-family: var(--font-body); color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 1.5vw, 1.25rem); /* jusqu'à 20px */ margin-top: 18px; max-width: 660px; line-height: 1.5; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Variante hero avec vidéo de fond plein écran (pages intérieures) — comme l'accueil */
.page-hero--media {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 20px) 0 60px;
}
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero__media-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(110deg, rgba(9,9,9,.88) 0%, rgba(13,13,13,.68) 45%, rgba(18,18,18,.44) 100%),
    linear-gradient(0deg, rgba(9,9,9,.94) 0%, rgba(9,9,9,0) 42%);
}
.page-hero--media .page-hero__title, .page-hero--media .page-hero__sub { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
/* Hero des pages services : titre + sous-titre blancs CENTRÉS (comme l'original) */
.page-hero--media .page-hero__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.page-hero--media .page-hero__sub { margin-left: auto; margin-right: auto; }
.page-hero--media .page-hero__actions { justify-content: center; }
.page-hero--media .breadcrumb { justify-content: center; }

/* Hero L'agence : fond GRILLE animée (réutilise .contact__grid) au lieu de la vidéo → fond neutre, pas de halo */
.page-hero--grid { background: var(--c-ink); }
.page-hero--grid::after { display: none; }
/* tube autonome (même lib que le hero principal) collé à la grille — au-dessus de la grille, sous le contenu */
.agency-tubes { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  opacity: 0; filter: blur(8px); transition: opacity 1.2s ease-out, filter 1.2s ease-out; }  /* état repos = flou/transparent → apparition = dissolution douce (flou→net) */
.agency-tubes.is-on { opacity: 1; filter: blur(0); }
.agency-tubes.is-leaving { opacity: 0; filter: blur(8px); transition: opacity 1.4s ease-out, filter 1.4s ease-out; }  /* disparition douce : dissolution + flou */
@media (prefers-reduced-motion: reduce) { .agency-tubes { display: none !important; } }

/* ── Page L'agence : titre GÉANT animé (effet BlurText 21st.dev) + emblème central ──
   On garde la taille/effet du modèle partagé ; couleur/police = celles du site (pas le démo). */
.page-hero--media .page-hero__inner.agency-hero { max-width: min(1200px, 94vw); }
.agency-hero__display { position: relative; display: inline-block; }
.agency-hero__title {
  font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 15vw, 7.5rem); line-height: 1.04; letter-spacing: 0;  /* 15vw → titre proportionnel/plus grand sur mobile, max desktop inchangé */
  color: #fff; margin: 0;
}
.agency-hero__line { display: block; white-space: nowrap; }
.agency-hero__line:empty { display: none; }   /* langues où le titre tient sur 1 ligne (ex. arabe « وكالتنا ») → 2e ligne vide masquée */
/* emblème central par-dessus le titre (remplace la photo du démo), même hover scale(1.1) */
.agency-hero__emblem {
  --r: clamp(3rem, 22vw, 11.7rem);                /* taille du LOGO/disque, proportionnelle au titre (~187px max desktop) */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; width: var(--r); height: var(--r);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1); cursor: pointer;
}
.agency-hero__emblem:hover { transform: translate(-50%, -50%) scale(1.1); }
/* cercle en VERRE (flou givré + arêtes type menu ; PAS de url(#hd-glass) car l'emblème est transformé
   → éviterait le bug fisheye). Plus PETIT que le logo (--disc) pour masquer le résidu (wordmark) en bas. */
.agency-hero__disc {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88%; height: 88%; border-radius: 50%; overflow: hidden;
  -webkit-backdrop-filter: blur(3px) saturate(1.2); backdrop-filter: blur(3px) saturate(1.2);
  background: rgba(255,255,255,.022);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 2px 2px 3px -1px rgba(255,255,255,.5), inset -2px -2px 3px -1px rgba(255,255,255,.28),
    0 16px 36px -16px rgba(0,0,0,.5);
}
/* logo : taille fixée via --r (INDÉPENDANTE du disque) → réduire le disque ne réduit pas le logo */
.agency-hero__logo {
  position: absolute; left: 50%; top: 65.5%;
  width: calc(var(--r) * 1.5); height: auto; max-width: none;
  transform: translate(-50%, -50%);
}
.agency-hero__sub {
  font-family: var(--font-body); color: rgba(255,255,255,.92);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5;
  max-width: 760px; margin: 34px auto 0;
}

/* BlurText : révélation lettre par lettre (.bt) / mot par mot (.bt-words) à l'entrée à l'écran.
   Chaque span : opacity 0->1, blur(10px)->0, translateY(-20px)->0, transition all .5s ease-out + stagger. */
.bt-char, .bt-word {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(-20px);
  transition: opacity .5s ease-out, filter .5s ease-out, transform .5s ease-out;
  transition-delay: var(--d, 0ms);
}
.bt-char { white-space: pre; }
.bt.is-in .bt-char, .bt-words.is-in .bt-word { opacity: 1; filter: blur(0); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bt-char, .bt-word { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── Section générique ─────────────────────────────────────────────── */
.section { padding: 84px 0; }
.section--alt { background: var(--c-ink-2); border-block: 1px solid rgba(255,255,255,.05); }
/* Fond GRILLE animée (réutilise .contact__grid + couche --active suivant le curseur en JS), comme
   les sections services/contact de l'accueil. z-index:5 = masque un éventuel overlay violet fixe (piège #3). */
.section--grid { position: relative; z-index: 5; overflow: hidden; background: var(--c-ink); }
.section--grid > .container { position: relative; z-index: 1; }

/* ═══ Vertical Tabs (présentation service) — porté de 21st larsen66/vertical-tabs, calé DNA Msolutions ═══ */
/* Compacte pour tenir sur un écran desktop (titre + services). */
.section.svc-vtabs { padding-top: clamp(40px, 6vw, 76px); }   /* padding-bottom = défaut .section (comme svc-kpi) → écart marquee→ROI = écart cards→FAQ */
.vtabs__head { text-align: left; margin: 0 0 clamp(14px, 1.8vw, 26px); }
.vtabs__cols { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; }   /* align-items:center → image centrée face à l'accordéon */
@media (min-width: 900px) { .vtabs__cols { grid-template-columns: 5fr 7fr; } }
.vtabs__list { display: flex; flex-direction: column; }
.vtab { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.1); cursor: pointer; padding: clamp(13px, 1.5vw, 20px) 0 clamp(13px, 1.5vw, 20px) 20px; color: rgba(255,255,255,.5); transition: color .5s; -webkit-tap-highlight-color: transparent; }
.vtab:first-child { border-top: 0; }
.vtab:hover, .vtab.is-active { color: #fff; }
.vtab__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
.vtab__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(180deg, #21d4fd, #5e72e4 55%, #8965e0); }
.vtab__num { font-family: 'Orbitron', var(--font-head), sans-serif; font-size: .62rem; letter-spacing: .1em; opacity: .55; margin-top: 9px; }
.vtab__main { min-width: 0; }
.vtab__title { display: block; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.95rem); line-height: 1.14; letter-spacing: -.01em; }
.vtab__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.23,1,.32,1); }
.vtab.is-active .vtab__desc { grid-template-rows: 1fr; }
.vtab__desc-in { min-height: 0; overflow: hidden; }
.vtab.is-active .vtab__desc-in { padding-top: 10px; }
.vtab__desc-in { color: var(--c-muted); font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.55; max-width: 44ch; }
/* Colonne image (slider) */
.vtabs__stage { position: relative; border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden; aspect-ratio: 16 / 11; background: var(--c-card); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 34px 66px -34px rgba(0,0,0,.75); }
/* Mobile : image capée en hauteur d'écran + accordéon compact → tout (image + services) tient dans une vue. */
@media (max-width: 899px) {
  .section.svc-vtabs { padding-top: clamp(26px, 7vw, 48px); }
  .vtabs__right { order: -1; }
  .vtabs__stage { aspect-ratio: auto; height: clamp(180px, 34vh, 300px); }
  .vtabs__head { margin-bottom: 10px; }
  .vtabs__cols { gap: 14px; }
  .vtab { padding: 10px 0 10px 16px; gap: 10px; }
  .vtab__num { margin-top: 6px; }
  .vtab__title { font-size: clamp(1rem, 4.3vw, 1.4rem); }
  .vtab__desc-in { font-size: .87rem; line-height: 1.45; }
  .vtab.is-active .vtab__desc-in { padding-top: 6px; }
}

/* ═══ FAQ (SEO) : items glass — porté de 21st larsen66/faq-section, DNA Msolutions ═══ */
.faq { position: relative; z-index: 1; max-width: 940px; margin: clamp(26px, 3.5vw, 44px) auto 0; }
.faq__grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 760px) { .faq__grid { grid-template-columns: 1fr 1fr; } }
.faq-item { border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.12); overflow: hidden; transition: border-color .3s, background .3s; }
.faq-item:hover { border-color: rgba(255,255,255,.28); }
.faq-item.is-open { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.05); }
.faq-item__q { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: clamp(15px, 1.7vw, 21px); color: #fff; -webkit-tap-highlight-color: transparent; }
.faq-item__num { font-family: 'Orbitron', var(--font-head), sans-serif; font-size: .66rem; color: rgba(255,255,255,.4); }
.faq-item__text { font-family: var(--font-head); font-weight: 500; font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.3; }
.faq-item__ico { width: 22px; height: 22px; color: rgba(255,255,255,.55); transition: transform .35s cubic-bezier(.23,1,.32,1), color .3s; }
.faq-item__ico svg { width: 100%; height: 100%; display: block; }
.faq-item.is-open .faq-item__ico { transform: rotate(180deg); color: #fff; }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.23,1,.32,1); }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-in { min-height: 0; overflow: hidden; }
.faq-item__a-in p { margin: 0; padding: 0 clamp(15px,1.7vw,21px) clamp(15px,1.7vw,21px); color: var(--c-muted); font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.55; }
.faq__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-top: clamp(26px, 3.5vw, 40px); }
.faq__cta-text { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 600; color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.4; letter-spacing: 0; margin: 0; }
.faq__cta-btn { cursor: pointer; }

/* ═══ ROI : KPI cards (compteurs animés, porté Freevox Studio NumberTicker) ═══ */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 26px); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { text-align: center; }
.kpi__num { display: inline-flex; align-items: baseline; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.kpi__pre, .kpi__suf { font-size: .6em; font-weight: 600; opacity: .92; }
.kpi__pre { margin-right: .03em; }
.kpi__suf { margin-left: .03em; }
.kpi__label { margin: 13px auto 0; max-width: 20ch; color: var(--c-muted); font-size: clamp(.9rem, 1vw, 1.02rem); line-height: 1.4; }
.kpi__note { max-width: 760px; margin: clamp(38px, 5vw, 62px) auto 0; text-align: center; }
.kpi__note p { color: rgba(255,255,255,.6); }
/* ROI : 2 cartes réutilisant le style .acard d'Expertise (agence), sur 2 colonnes desktop ET mobile
   (`.roi-cards.acards` spécificité 0,2,0 → bat le repeat(3) mobile de .acards). */
.roi-cards.acards { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; margin-top: clamp(30px, 4vw, 52px); }

/* ═══ Perspective marquee (canaux compatibles) — porté de 21st reapollo/remocn-perspective-marquee, vanilla DNA ═══ */
.pmarquee { position: relative; z-index: 1; margin-top: clamp(40px, 4vw, 56px); height: clamp(84px, 10vw, 150px); overflow: hidden; perspective: 1200px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pmarquee__persp { position: absolute; inset: 0; display: flex; align-items: center; transform: rotateX(8deg) rotateY(-20deg); transform-style: preserve-3d; }
.pmarquee__track { display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.pmarquee__item { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.1rem, 6vw, 4.6rem); letter-spacing: -.03em; color: #fafafa; padding-right: .8em; }
@media (prefers-reduced-motion: reduce) { .pmarquee__item { filter: none !important; opacity: .9 !important; } }
/* Mobile : marquee encore plus resserré dans le fondu service/FAQ (placé APRÈS les règles de base pour l'ordre source). */
@media (max-width: 899px) {
  .pmarquee { margin-top: clamp(30px, 9vw, 42px); height: clamp(60px, 22vw, 100px); }
}
.vtabs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(5%) scale(1.03); transition: opacity .55s ease, transform .8s cubic-bezier(.23,1,.32,1); }
.vtabs__img.is-active { opacity: 1; transform: none; }
.vtabs__tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: .64rem; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); }
.vtabs__nav { position: absolute; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); display: flex; gap: 10px; z-index: 3; }
.vtabs__arrow { width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px); border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; transition: transform .18s, background .2s; }
.vtabs__arrow:hover { background: rgba(0,0,0,.72); }
.vtabs__arrow:active { transform: scale(.9); }
.vtabs__arrow svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .vtabs__img { transition: opacity .3s; transform: none; } .vtab__fill { display: none; } }
.section__head { max-width: 720px; margin-bottom: 46px; }
.section__head.center { margin-inline: auto; text-align: center; }
.section__title { font-family: 'Orbitron', var(--font-head), sans-serif; font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.22; letter-spacing: 0; }  /* Orbitron (titres principaux) — plus large → taille réduite, aligné sur .section-title */
.section__lead { color: var(--c-muted); font-size: 1.05rem; margin-top: 14px; }

/* ── Grille de features (cas d'usage / avantages) ──────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.45); box-shadow: 0 18px 40px rgba(0,0,0,.35); }

/* Cartes avec image de fond abstraite (comme l'original) */
.feature--bg { position: relative; isolation: isolate; overflow: hidden; background: var(--c-card); }
.feature--bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--feat-bg); background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.feature--bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,6,20,.74) 0%, rgba(10,6,20,.82) 55%, rgba(10,6,20,.9) 100%);
}
.feature--bg:hover::before { transform: scale(1.06); }
.feature--bg .feature__text { color: rgba(255,255,255,.82); }
.feature__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(59,130,246,.22));
  border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-head); font-weight: 700; color: #fff;
}
.feature__icon--img { width: auto; height: auto; background: none; border: none; margin-bottom: 14px; display: block; }
.feature__icon--img img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 5px 16px rgba(124,58,237,.45)); }
/* Icônes line des cartes services (cas d'usage) + tracé au survol — harmonisé */
.feature__icon-svg { width: 46px; height: 46px; color: #fff; display: block; margin-bottom: 16px; transform-origin: center; filter: drop-shadow(0 2px 10px rgba(255,255,255,.2)); }
.feature__icon-svg * { stroke-dasharray: 1; }
.feature:hover .feature__icon-svg * { animation: icon-draw .8s cubic-bezier(.65,0,.35,1) both; }
@media (prefers-reduced-motion: reduce) { .feature:hover .feature__icon-svg * { animation: none; } }
.feature__title { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; margin-bottom: 10px; }
.feature__text { color: var(--c-muted); font-size: .96rem; line-height: 1.62; }

/* ── Bande CTA ─────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; padding: 70px 0; background: linear-gradient(120deg, #3a0546 0%, #1a0a2c 52%, #5a134c 100%); }
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; }
.cta-band__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band__text { color: var(--c-muted); margin: 14px auto 28px; max-width: 540px; }

/* ── Prose (légal / à propos) ──────────────────────────────────────── */
.prose { max-width: 820px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-family: var(--font-head); font-weight: 600; font-size: 1.45rem; margin-top: 40px; }
.prose h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; margin-top: 28px; }
.prose p, .prose li { color: var(--c-muted); line-height: 1.75; }
.prose ul { padding-left: 22px; list-style: disc; }
.prose ul > li + li { margin-top: 8px; }
.prose a { color: #c79bff; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #fff; }
.prose strong { color: #fff; font-weight: 600; }
.prose .muted-meta { font-size: .9rem; color: var(--c-muted-2); }

/* ── Bloc coordonnées (à propos / contact) ─────────────────────────── */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.info-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px; }
.info-card h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 8px; }
.info-card p, .info-card a { color: var(--c-muted); font-size: .95rem; }
.info-card a:hover { color: #fff; }

@media (max-width: 980px) {
  .feature-grid, .feature-grid--2 { grid-template-columns: 1fr 1fr; }
  .info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature-grid, .feature-grid--2 { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--header-h) + 44px) 0 54px; }
  .section { padding: 60px 0; }
}

/* =====================================================================
   WIDGET CHAT IA — composant flottant (reproduit du site d'origine)
   Connecté à n8n. Voir assets/js/widget.js
   ===================================================================== */
#msol-widget-v2 {
  --win-w: clamp(320px, 30vw, 380px);
  --win-h: clamp(520px, 70vh, 640px);
  --radius: 22px; --fab: 56px;
  --safe-min-top: 28px; --safe-min-x: 28px; --safe-min-bottom: 28px;
  --safe-top: max(var(--safe-min-top), env(safe-area-inset-top, 0px));
  --safe-right: max(var(--safe-min-x), env(safe-area-inset-right, 0px));
  --safe-left: max(var(--safe-min-x), env(safe-area-inset-left, 0px));
  --safe-bottom: max(var(--safe-min-bottom), env(safe-area-inset-bottom, 0px));
  --section-gap: 12px; --panel-pad-y: 12px; --panel-pad-x: 20px; --ghost: 10px;
  --bubble-max: 70%; --bubble-pad-x: 14px; --bubble-pad-y: 10px; --bubbles-gap: 12px;
  --input-h: 52px; --send: 46px; --mic: 46px; --input-pad-x: 16px;
  --title: 18px; --status: 13px; --msg: 16px; --input: 16px;
  /* GLASS = recette EXACTE du menu header (frosted clair + arêtes blanches), SANS violet.
     tint blanc ~6% (comme .glass__t) + léger plancher sombre pour la lisibilité du chat */
  --panel-top: rgba(255,255,255,.08); --panel-bot: rgba(255,255,255,.04);
  --glass-floor-1: rgba(12,12,18,.24); --glass-floor-2: rgba(12,12,18,.40);
  --glass-stroke: rgba(255,255,255,.16); --panel-shadow: rgba(0,0,0,.42);
  --user-a1: rgba(255,255,255,.20); --user-a2: rgba(255,255,255,.11);
  --bubble-bot: rgba(255,255,255,.08); --bubble-bot-b: rgba(255,255,255,.18);
  --logo-pad-fab: 3px; --logo-pad-ava: 2%;
}
#msol-widget-v2 { position: fixed; inset: auto 0 0 auto; z-index: 999999; pointer-events: none; }
#msol-widget-v2 * { box-sizing: border-box; margin: 0; padding: 0; pointer-events: auto; }
/* Mobile : widget masqué tant qu'on est dans le hero — apparaît à partir de la 2e section */
@media (max-width: 760px) {
  #msol-widget-v2 { transition: opacity .35s ease, transform .35s ease; }
  #msol-widget-v2.msol-hide-hero { opacity: 0 !important; transform: translateY(18px); pointer-events: none !important; }
  #msol-widget-v2.msol-hide-hero .msol-fab-v2 { pointer-events: none !important; }
}

.msol-fab-v2 {
  position: fixed; right: 16px; bottom: 16px; width: var(--fab); height: var(--fab);
  border: 1px solid var(--glass-stroke); border-radius: 50%;
  display: grid; place-items: center; overflow: visible;
  background: linear-gradient(135deg, rgba(40,40,52,.62), rgba(18,18,26,.74));
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: 0 14px 30px rgba(0,0,0,.42), 0 0 22px rgba(0,0,0,.25),
    inset 2px 2px 2px -1px rgba(255,255,255,.6), inset -2px -2px 2px -1px rgba(255,255,255,.35);
  transition: transform .25s, opacity .2s; isolation: isolate;
  will-change: transform; backface-visibility: hidden;
}
/* modèle 21st : la FAB RESTE visible à l'ouverture et devient le bouton « fermer » */
#msol-widget-v2.open .msol-fab-v2 { transform: none; }
.msol-fab-v2 .fab-orb { transition: opacity .3s ease; }
#msol-widget-v2.open .msol-fab-v2 .fab-orb { opacity: 0; }

/* Icône bot blanche + croix : empilées, transition ROTATIVE bot↔croix au clic (et inverse).
   Le parent gère la rotation/fondu ; le <svg> bot "respire" (apparaît/disparaît) à part. */
.msol-fab-v2 .fab-bot, .msol-fab-v2 .fab-close {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity .35s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}
.msol-fab-v2 .fab-bot svg, .msol-fab-v2 .fab-close svg { stroke: #fff; fill: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.msol-fab-v2 .fab-bot svg { width: 26px; height: 26px; stroke-width: 1.8; animation: fab-bot-breathe 3.4s ease-in-out infinite; }
.msol-fab-v2 .fab-close svg { width: 22px; height: 22px; stroke-width: 2.4; }
/* fermé : bot visible, croix masquée + tournée */
.msol-fab-v2 .fab-bot   { opacity: 1; transform: rotate(0) scale(1); }
.msol-fab-v2 .fab-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
/* ouvert : bot tourne+disparaît, croix arrive en tournant */
#msol-widget-v2.open .msol-fab-v2 .fab-bot   { opacity: 0; transform: rotate(90deg) scale(.5); }
#msol-widget-v2.open .msol-fab-v2 .fab-close { opacity: 1; transform: rotate(0) scale(1); }
@keyframes fab-bot-breathe { 0%, 100% { opacity: .18; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .msol-fab-v2 .fab-bot svg { animation: none; opacity: 1; } }

/* Accroche TEXTE animée (machine à écrire + curseur) près du FAB — DESKTOP uniquement, SANS bulle.
   Texte blanc + ombre portée → lisible sur tout fond ; ancré à droite, le curseur reste côté FAB. */
#msol-widget-v2 .msol-bubble-nudge {
  position: fixed; right: calc(16px + var(--fab) + 16px); bottom: 30px;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: .1px; line-height: 1.3; text-align: right; white-space: nowrap;
  opacity: 0; transform: translateX(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none; cursor: pointer;
}
#msol-widget-v2 .msol-bubble-nudge.show { opacity: 1; transform: none; pointer-events: auto; }
#msol-widget-v2 .msol-bubble-nudge .nudge-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: #fff; border-radius: 1px; animation: nudge-blink 1s steps(1, end) infinite; }
@keyframes nudge-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (max-width: 600px) { #msol-widget-v2 .msol-bubble-nudge { display: none !important; } }
.fab-logo {
  width: 100%; height: 100%; padding: var(--logo-pad-fab); border-radius: 50%; display: block;
  background-repeat: no-repeat; background-position: center; background-size: 180% 180%;
  background-origin: content-box; background-clip: content-box;
  background-image: image-set(
    url("../img/widget-fab.webp") type("image/webp") 1x,
    url("../img/widget-fab@2x.webp") type("image/webp") 2x,
    url("../img/widget-fab@3x.webp") type("image/webp") 3x);
  background-image: -webkit-image-set(
    url("../img/widget-fab.webp") 1x,
    url("../img/widget-fab@2x.webp") 2x,
    url("../img/widget-fab@3x.webp") 3x);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.25)); transition: opacity .22s ease;
}
.msol-fab-v2::before, .msol-fab-v2::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.msol-fab-v2::before { background: radial-gradient(transparent 55%, rgba(255,255,255,.22)); filter: blur(8px); opacity: .5; }
.msol-fab-v2::after {
  background: conic-gradient(from 0deg, rgba(255,255,255,.22), transparent 25%, rgba(255,255,255,.22) 50%, transparent 75%, rgba(255,255,255,.22) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  animation: fv-spin 9s linear infinite; opacity: .55;
}
.msol-fab-v2:hover { transform: translateY(-2px) scale(1.05); }
@keyframes fv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fv-spin { to { transform: rotate(360deg); } }

/* ── Siri Orb (composant 21st, porté en CSS pur) — utilisé dans le FAB et l'avatar.
   Taille XS (remplit le conteneur), vitesse 5s, comme l'image de référence. ── */
@property --siri-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.siri-orb {
  position: absolute; inset: 0; display: grid; grid-template-areas: "stack";
  overflow: hidden; border-radius: 50%;
  --c1: oklch(75% 0.15 350); --c2: oklch(80% 0.12 200); --c3: oklch(78% 0.14 280);
  --orb-blur: 8px; --orb-contrast: 1.8; --orb-dur: 5s;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 30%, transparent 70%);
}
.siri-orb::before {
  content: ""; grid-area: stack; width: 100%; height: 100%; border-radius: 50%;
  background:
    conic-gradient(from calc(var(--siri-angle) * 1.2) at 30% 65%, var(--c3) 0deg, transparent 45deg 315deg, var(--c3) 360deg),
    conic-gradient(from calc(var(--siri-angle) * 0.8) at 70% 35%, var(--c2) 0deg, transparent 60deg 300deg, var(--c2) 360deg),
    conic-gradient(from calc(var(--siri-angle) * -1.5) at 65% 75%, var(--c1) 0deg, transparent 90deg 270deg, var(--c1) 360deg),
    conic-gradient(from calc(var(--siri-angle) * 2.1) at 25% 25%, var(--c2) 0deg, transparent 30deg 330deg, var(--c2) 360deg),
    conic-gradient(from calc(var(--siri-angle) * -0.7) at 80% 80%, var(--c1) 0deg, transparent 45deg 315deg, var(--c1) 360deg),
    radial-gradient(ellipse 120% 80% at 40% 60%, var(--c3) 0%, transparent 50%);
  filter: blur(var(--orb-blur)) contrast(var(--orb-contrast)) saturate(1.2);
  animation: siri-rotate var(--orb-dur) linear infinite;
  transform: translateZ(0); will-change: transform;
}
.siri-orb::after {
  content: ""; grid-area: stack; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 45% 55%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 30%, transparent 60%);
  mix-blend-mode: overlay;
}
@keyframes siri-rotate { from { --siri-angle: 0deg; } to { --siri-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .siri-orb::before { animation: none; } }

.msol-win-v2 {
  position: fixed; right: 16px; bottom: calc(var(--fab) + 18px);
  width: var(--win-w); height: min(var(--win-h), calc(100vh - (var(--fab) + 60px)));
  /* MÊME verre que le menu : tint blanc + filtre liquid-glass url(#hd-glass) sur Chrome,
     + léger plancher sombre pour la lisibilité ; arêtes blanches identiques à .glass__s */
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)),
              linear-gradient(180deg, var(--glass-floor-1), var(--glass-floor-2));
  border: 1px solid var(--glass-stroke); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(3px) saturate(1.25);
  backdrop-filter: blur(3px) saturate(1.25) url(#hd-glass);
  box-shadow: 0 28px 80px var(--panel-shadow),
    inset 2px 2px 2px -1px rgba(255,255,255,.75), inset -2px -2px 2px -1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.14);
  display: none; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  will-change: transform, opacity; backface-visibility: hidden;
}
.msol-win-v2.show { display: block; transform-origin: bottom right; animation: msol-win-in .38s cubic-bezier(.22,1,.36,1) both; }
@keyframes msol-win-in { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
/* iOS Safari n'exécute pas les filtres SVG en backdrop → flou natif lisible (même esprit que le menu) */
@supports (-webkit-touch-callout: none) {
  .msol-win-v2 { -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
}
.msol-shell { height: 100%; display: flex; flex-direction: column; gap: var(--section-gap); }
.msol-panel { background: transparent; border: var(--ghost) solid transparent; border-radius: 16px; padding: var(--panel-pad-y) var(--panel-pad-x); }
.msol-fill { flex: 1 1 auto; display: flex; min-height: 0; }

.msol-hdr-v2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; }
/* avatar du header : orb SEUL, sans bordure ni effet glass (fond/box-shadow retirés) */
.msol-avatar-v2 { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: transparent; border: 0; box-shadow: none; }
.avatar-logo {
  position: absolute; inset: var(--logo-pad-ava);
  background-repeat: no-repeat; background-position: center; background-size: 175% 175%;
  background-origin: content-box; background-clip: content-box;
  background-image: image-set(
    url("../img/widget-avatar.webp") type("image/webp") 1x,
    url("../img/widget-avatar@2x.webp") type("image/webp") 2x,
    url("../img/widget-avatar@3x.webp") type("image/webp") 3x);
  background-image: -webkit-image-set(
    url("../img/widget-avatar.webp") 1x,
    url("../img/widget-avatar@2x.webp") 2x,
    url("../img/widget-avatar@3x.webp") 3x);
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
}
.msol-info-v2 h3 { color: #fff; font-size: var(--title); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msol-status-v2 { display: flex; align-items: center; gap: 8px; color: #fff; opacity: .95; font-size: var(--status); }
.msol-dot-v2 { position: relative; width: 11px; height: 11px; background: #25e39b; border-radius: 50%; box-shadow: 0 0 8px rgba(37,227,155,.9); animation: msol-blink 2.4s ease-in-out infinite; }
.msol-dot-v2::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(37,227,155,.65); animation: msol-ping 1.9s ease-out infinite; }
@keyframes msol-blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes msol-ping { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.85); opacity: 0; } }
/* bouton fermer : croix SEULE (sans bordure ni fond) + animation au clic */
.msol-close-v2 { width: 36px; height: 36px; border-radius: 12px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 36px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.msol-close-v2:hover { opacity: .75; }
.msol-close-v2:active { transform: scale(.78) rotate(90deg); }   /* croix qui pivote/s'enfonce au clic */
.msol-close-v2 svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.6; }

.msol-msgs-v2 { height: 100%; overflow: auto; overflow-x: hidden; display: flex !important; flex-direction: column !important; gap: var(--bubbles-gap) !important; padding: 4px 0; }
.msol-msg-v2 { display: flex; }
.msol-bubble-v2 { max-width: min(var(--bubble-max), 520px); padding: var(--bubble-pad-y) var(--bubble-pad-x) !important; border-radius: 18px; font-size: var(--msg); line-height: 1.4; color: #fff; word-break: break-word; white-space: pre-wrap; margin-inline: 6px; box-shadow: 0 10px 20px rgba(0,0,0,.2); overflow: hidden; }
.msol-msg-v2.user { justify-content: flex-end; }
.msol-msg-v2.user .msol-bubble-v2 { background: linear-gradient(135deg, var(--user-a1), var(--user-a2)); border: 1px solid rgba(255,255,255,.14); border-bottom-right-radius: 10px; }
.msol-msg-v2.bot .msol-bubble-v2 { background: var(--bubble-bot); border: 1px solid var(--bubble-bot-b); border-bottom-left-radius: 10px; }
.msol-bubble-audio { display: flex; align-items: center; gap: 8px; max-width: min(var(--bubble-max), 520px); padding: 8px 10px !important; border-radius: 18px; overflow: hidden; min-width: 240px; }
.msol-audio { width: 100%; } .msol-audio audio { display: block; width: 100%; max-width: 100%; height: 36px; }

/* minmax(0,1fr) : le champ peut rétrécir sous sa largeur intrinsèque → le bouton ENVOYER n'est
   jamais poussé hors écran, même sur écran très étroit (zoom d'affichage Samsung ≤320px). */
.msol-input-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.msol-field-v2 { min-width: 0; width: 100%; height: var(--input-h); padding: 0 var(--input-pad-x) !important; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); border-radius: 16px; color: #fff; font-size: var(--input); outline: none; box-shadow: inset 0 2px 8px rgba(0,0,0,.2); }
.msol-field-v2::placeholder { color: rgba(255,255,255,.72); }
.msol-field-v2:focus { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 2px 6px rgba(0,0,0,.2); }
.msol-btn { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(135deg, var(--user-a1), var(--user-a2)); color: #fff; cursor: pointer; border-radius: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.2); transition: transform .15s ease, box-shadow .2s ease; }
.msol-btn:hover { transform: translateY(-1px); } .msol-btn:active { transform: translateY(0) scale(.98); }
.msol-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.1; }
.msol-mic-v2 { width: var(--mic); height: var(--mic); border-radius: 12px; position: relative; overflow: visible; }
.msol-mic-v2::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; background: conic-gradient(from 0deg, rgba(255,255,255,.6), rgba(255,255,255,.18), rgba(255,255,255,.6)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); opacity: 0; transition: opacity .2s ease; }
.msol-mic-v2:hover::after { opacity: .35; }
.msol-mic-dot { position: absolute; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; right: 8px; top: 8px; box-shadow: 0 0 10px rgba(34,197,94,.8); }
.msol-mic-v2.recording::after { opacity: .65; animation: ring-spin 2.2s linear infinite; }
.msol-mic-v2.recording .msol-mic-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.9); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.msol-send-v2 { width: var(--send); height: var(--send); border-radius: 12px; position: relative; overflow: visible; }
.msol-send-v2::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; background: conic-gradient(from 0deg, rgba(255,255,255,.4), rgba(255,255,255,.12), rgba(255,255,255,.4)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); opacity: .25; transition: opacity .2s ease; }
.msol-send-v2:hover::after { opacity: .45; } .msol-send-v2:disabled { opacity: .45; cursor: not-allowed; } .msol-send-v2:active svg { transform: translate(1px,-1px) rotate(12deg); }
.typing-dot { width: 8px; height: 8px; background: rgba(255,255,255,.6); border-radius: 50%; animation: typing-bounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -.32s; }
.typing-dot:nth-child(2) { animation-delay: -.16s; }
@keyframes typing-bounce { 0%,80%,100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ── Touches inspirées du modèle 21st (adaptées au verre NEUTRE du site) ── */
/* popIn des messages */
.msol-msg-v2 { animation: msol-pop .32s cubic-bezier(.175,.885,.32,1.15) both; }
@keyframes msol-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
/* barre de statut en pied de widget */
/* Sélecteur préfixé par l'ID (spécificité 1,1,0) pour BATTRE le reset #msol-widget-v2 *{padding:0}
   (1,0,0) qui sinon écrase tout padding de classe. padding ≥ rayon des coins (24px) + safe-area. */
#msol-widget-v2 .msol-foot-v2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 24px calc(13px + env(safe-area-inset-bottom, 0px)); font-size: 11px; line-height: 1.25; color: rgba(255,255,255,.6); user-select: none; flex: 0 0 auto; }
.msol-foot-hint { display: inline-flex; align-items: center; gap: 5px; }
.msol-foot-hint kbd { font: inherit; line-height: 1; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 1px 5px; color: rgba(255,255,255,.85); }
.msol-foot-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.msol-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: #25e39b; box-shadow: 0 0 6px rgba(37,227,155,.85); animation: msol-blink 2.4s ease-in-out infinite; }

@media (max-width: 600px) {
  #msol-widget-v2 { --safe-min-top: 16px; --safe-min-x: 16px; --safe-min-bottom: 14px; --panel-pad-x: 16px; --panel-pad-y: 10px; --ghost: 8px; --bubble-max: 86%; --send: 44px; --mic: 44px;
    /* texte adaptatif aux dimensions ; --input reste 16px (sinon iOS zoome au focus) */
    --title: clamp(15.5px, 4.7vw, 18px); --status: clamp(11px, 3.4vw, 13px); --msg: clamp(14px, 4.2vw, 16px); }
  /* MOBILE : sheet plein largeur, HAUT FIXE (le header ne bouge jamais, ni au scroll ni au clavier)
     + bottom:0 (le fond glass va TOUJOURS jusqu'au bas → passe sous le clavier, aucun bord/coin bas
     visible, et jamais de page qui apparaît dessous). Aucune bordure dure (arêtes = box-shadow, pas
     de liseré en bas). Le clavier est géré par padding-bottom (le contenu remonte) — PAS par la
     hauteur → zéro instabilité, le haut reste fixe. */
  .msol-win-v2 {
    left: 0; right: 0; width: auto;
    top: 14svh; bottom: 0; height: auto;   /* fallback ; le JS pose top/height/bottom en inline via visualViewport */
    border: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 44px rgba(0,0,0,.5),
      inset 2px 0 2px -1px rgba(255,255,255,.5), inset -2px 0 2px -1px rgba(255,255,255,.4), inset 0 2px 2px -1px rgba(255,255,255,.6);
  }
  /* padding latéral des panneaux restauré (sinon le bouton ENVOYER est rogné au bord droit) */
  #msol-widget-v2 .msol-panel { padding: var(--panel-pad-y) var(--panel-pad-x); }
  /* clavier ouvert : on masque le footer (« Entrée… / Opérationnel ») pour gagner de l'espace */
  #msol-widget-v2.msol-kb .msol-foot-v2 { display: none; }
  .msol-fab-v2 { right: 12px; bottom: 12px; }
  /* à l'ouverture la FAB se masque (le sheet prend le relais ; on ferme via la croix du header) */
  #msol-widget-v2.open .msol-fab-v2 { opacity: 0; pointer-events: none; }
  .avatar-logo { background-size: 185% 185%; inset: calc(var(--logo-pad-ava) + 1%); }
}

/* ── i18n / RTL (arabe) ───────────────────────────────────────────────────────
   `dir="rtl"` (posé par i18n.js sur <html>) inverse déjà l'axe et l'alignement du
   texte. Ici on ne fait qu'ajouter une pile de polices arabes (Outfit/Inter ne
   couvrent pas l'arabe) et neutraliser le letter-spacing (inadapté à l'arabe).
   NB : pour le futur code, privilégier les propriétés logiques (margin/padding-inline,
   inset-inline, text-align:start) → le RTL fonctionne sans surcharge. */
[dir="rtl"] { font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; }
[lang="ar"] *, [dir="rtl"] { letter-spacing: 0 !important; }

/* ════════════════════ Page L'AGENCE — bloc fin de page : Notre équipe + Témoignages ════════════════════ */
/* Sur le fond GRILLE (réutilise .contact__grid + couche --active suivant le curseur). Portage vanilla des
   composants 21st.dev team-showcase & scroll-reel-testimonials, adaptés à la charte glass dark. */
/* z-index:5 OBLIGATOIRE → masque l'overlay VIOLET fixe du hero (sinon le verre des cartes le réfracte) — piège #3/#6. */
.about-extras { position: relative; z-index: 5; overflow: hidden; background: var(--c-ink); padding: 94px 0; }
/* Le padding-BAS de la dernière section (= gap « dernière ligne → footer », UNIFORME sur toutes les pages)
   est posé UNE seule fois par la règle globale `:has(+ .site-footer.mf)` (~l.638). Ne PAS remettre d'override
   par section ici — pour changer le gap partout, changer LA valeur de la règle globale. */
.about-extras .container { position: relative; z-index: 2; }
.about-extras__block + .about-extras__block { margin-top: 104px; }

/* ───────── Notre équipe (team-showcase) ───────── */
.team__layout { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
/* Desktop : groupe (photos + liste) CENTRÉ, large espace au milieu ; la liste ne s'étire plus (sinon poussée à droite = non centré) */
@media (min-width: 861px) {
  .team__layout { flex-direction: row; gap: clamp(74px, 9vw, 134px); justify-content: center; align-items: flex-start; }
  .team__list { flex: 0 0 auto; width: auto; max-width: 320px; }
}
.team__photos { display: flex; gap: 12px; flex-shrink: 0; align-items: center; }   /* col1 (Mehdi, 1 photo) centrée verticalement ; col2 aussi centrée (alignée à Mehdi) */
.team__col { display: flex; flex-direction: column; gap: 12px; }
.team__col--3 { transform: translateY(30px); }   /* dernière colonne (2 photos droite) DÉCALÉE, pas alignée à col2 — style organique d'origine (le transform ne casse pas le centrage de Mehdi) */
.team__tile {
  position: relative; width: 112px; height: 124px; border-radius: 14px; overflow: hidden; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(155deg, var(--c-card), #0a0a0a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  filter: grayscale(1) brightness(.74);
  transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, filter .5s ease;
}
@media (min-width: 861px) { .team__tile { width: 150px; height: 164px; } }
.team__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.team__ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(125% 95% at 50% 0%, var(--ph-tint, rgba(255,255,255,.05)), transparent 62%); }
.team.is-hovering .team__tile { opacity: .5; }
.team.is-hovering .team__tile.is-active { opacity: 1; }   /* l'actif ne doit PAS être estompé (sinon couleur/photo paraît grise) — spécificité (0,4,0) bat le (0,3,0) d'estompage */
.team__tile.is-active { opacity: 1; filter: none; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 34px rgba(0,0,0,.45); }

.team__list { display: flex; flex-direction: column; gap: 18px; flex: 1; width: 100%; }
@media (min-width: 540px) and (max-width: 860px) { .team__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; } }
.team__row { cursor: pointer; transition: opacity .3s ease; }
.team.is-hovering .team__row { opacity: .45; }
.team__row.is-active { opacity: 1; }
.team.is-hovering .team__row.is-active { opacity: 1; }   /* l'actif reste à PLEINE opacité → nom + poste vraiment BLANCS (sinon #fff rendu à 45% = gris) */
.team__name-wrap { display: flex; align-items: center; gap: 10px; }
.team__marker { width: 16px; height: 11px; border-radius: 5px; background: rgba(255,255,255,.25); flex-shrink: 0; transition: width .3s ease, background .3s ease; }
.team__row.is-active .team__marker { width: 22px; background: rgba(255,255,255,.92); }
.team__name { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; color: rgba(255,255,255,.55); transition: color .3s ease; }   /* inactif = gris net → le blanc actif ressort clairement */
.team__row.is-active .team__name { color: #fff; }
.team__role { margin: 7px 0 0 26px; font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--c-muted); transition: color .3s ease; }
.team__row.is-active .team__role { color: #fff; }   /* actif = BLANC franc (nom + poste), plus gris */
.team__social { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.team__row.is-active .team__social { opacity: 1; transform: none; pointer-events: auto; }
.team__social a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--c-muted); transition: color .15s ease, background .15s ease, transform .15s ease; }
.team__social a:hover { color: #fff; background: rgba(255,255,255,.1); transform: scale(1.12); }
.team__social svg { width: 11px; height: 11px; }

/* ───────── Équipe — CARROUSEL circulaire MOBILE (<861px) : 1 membre centré, voisins inclinés 3D, actif en couleur ───────── */
.team-mob { display: none; }
@media (max-width: 860px) {
  .team__layout { display: none; }   /* masque le layout desktop (photos haut / liste bas) */
  .team-mob { display: block; width: 100%; }
}
/* 5 photos en ARC (2 proches + 2 lointaines estompées) : à chaque avance, TOUT glisse d'un cran en 3D (slide continu). Active = couleur, voisines = gris. */
.team-mob__stage { position: relative; height: 300px; perspective: 1250px; margin-top: 22px; }
.team-mob__photo {
  position: absolute; top: 50%; left: 50%; width: 182px; height: 222px; margin: -111px 0 0 -91px;
  border-radius: 20px; overflow: hidden; cursor: pointer; backface-visibility: hidden;
  background: rgba(255,255,255,.05); box-shadow: 0 16px 36px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.1);
  filter: grayscale(1) brightness(.7);
  transition: transform .9s cubic-bezier(.6,.02,.24,1), opacity .9s ease, filter .7s ease;
  will-change: transform, opacity, filter;
}
.team-mob__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-mob__photo.is-active { filter: none; box-shadow: 0 24px 52px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.45); }
/* petit pop d'agrandissement quand l'image devient active (sur l'<img>, indépendant du transform de position) */
@keyframes team-mob-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.team-mob__photo.is-active img { animation: team-mob-pop .8s ease-out both; }
.team-mob__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; color: rgba(255,255,255,.5); background: linear-gradient(155deg, var(--c-card), #0a0a0a); }
.team-mob__info { text-align: center; margin-top: 20px; }
.team-mob__name { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: #fff; }
.team-mob__role { margin: 7px 0 0; font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--c-muted); }
.team-mob__li { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: 14px; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.18); transition: background .2s ease, transform .2s ease; }
.team-mob__li:hover { background: rgba(255,255,255,.08); transform: scale(1.08); }
.team-mob__li svg { width: 16px; height: 16px; }
.team-mob__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.team-mob__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.16); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.team-mob__arrow:hover { background: rgba(255,255,255,.08); }
.team-mob__arrow:active { transform: scale(.94); }
.team-mob__arrow svg { width: 17px; height: 17px; }
.team-mob__dots { display: flex; align-items: center; gap: 7px; }
.team-mob__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: width .3s ease, background .3s ease, border-radius .3s ease; }
.team-mob__dot.is-active { width: 20px; border-radius: 4px; background: rgba(255,255,255,.92); }
@media (prefers-reduced-motion: reduce) { .team-mob__photo { transition: none; } .team-mob__photo.is-active img { animation: none; } }

/* ───────── Témoignages (scroll-reel-testimonials) ───────── */
.tt { display: flex; justify-content: center; }
.tt-card {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1000px; border-radius: 26px; overflow: hidden;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2) url(#hd-glass);
  /* mêmes reflets liquid-glass que le composant .glass du site (.glass__s) */
  box-shadow: inset 2px 2px 2px -1px rgba(255,255,255,.6), inset -2px -2px 2px -1px rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -22px rgba(0,0,0,.6);
}
@media (min-width: 861px) { .tt-card { flex-direction: row; min-height: 330px; } }
.tt-reel {
  position: relative; width: 100%; height: 216px; flex-shrink: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
@media (min-width: 861px) { .tt-reel { width: 352px; height: auto; } }
.tt-reel__cols { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tt-col { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.tt-tile { position: relative; width: 102px; height: 102px; border-radius: 16px; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }   /* carré verre translucide VISIBLE (grille autour de l'image centrale) */
.tt-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }   /* témoignages en NOIR & BLANC */
.tt-tile--ph { display: grid; place-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.5rem; color: rgba(255,255,255,.55); }
.tt-tile--ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 0%, var(--ph-tint, rgba(255,255,255,.05)), transparent 64%); }
.tt-tile--featured { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 30px rgba(0,0,0,.5); }
/* Glow VIOLET sur l'image centrale active (comme l'original) — palette des tubes du hero (dégradé fondu), par-dessus le N&B */
.tt-tile--featured::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(150deg, rgba(183,33,255,.9), rgba(94,114,228,.5) 46%, rgba(94,114,228,0) 74%); mix-blend-mode: screen; }
.tt-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; padding: 30px 28px 26px; }
@media (min-width: 861px) { .tt-body { padding: 38px 38px 30px; } }
.tt-quote-mark { display: block; width: 44px; height: 44px; color: rgba(255,255,255,.18); }
.tt-textwrap { position: relative; }
.tt-quote { margin: 14px 0 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.12rem, 2.1vw, 1.5rem); line-height: 1.34; letter-spacing: -.01em; color: #f3f3f6; }
.tt-author { margin: 18px 0 0; font-size: .92rem; font-weight: 600; color: var(--c-muted); }
.tt-char { display: inline-block; opacity: 0; transform: translateY(10px); animation: tt-char-rise .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes tt-char-rise { to { opacity: 1; transform: none; } }
.tt-textwrap.is-exit { animation: tt-exit .24s ease forwards; }
@keyframes tt-exit { to { opacity: 0; transform: translateY(-12px); } }
.tt-nav { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.tt-dots { display: flex; align-items: center; gap: 7px; }
.tt-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: width .3s ease, background .3s ease, border-radius .3s ease; }
.tt-dot.is-active { width: 20px; border-radius: 4px; background: rgba(255,255,255,.92); }
.tt-arrows { display: flex; gap: 8px; margin-left: auto; }
.tt-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.16); transition: background .2s ease, transform .2s ease, opacity .2s ease; }
.tt-arrow:hover:not(:disabled) { background: rgba(255,255,255,.08); transform: scale(1.08); }
.tt-arrow:active:not(:disabled) { transform: scale(.94); }
.tt-arrow:disabled { opacity: .35; cursor: default; }
.tt-arrow svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .tt-char { animation: none; opacity: 1; transform: none; }
  .tt-textwrap.is-exit { animation: none; }
  .tt-col { transition: none !important; }
}

/* ════════════ Titres hero services — le TUBE (comme le hero) passe PAR-DESSUS et RÉVÈLE le titre blanc ════════════ */
/* Reveal type shutter : lettres gris/blanc-transparent AVANT → blanc plein APRÈS, au rythme du shutter. PAR-DESSUS,
   l'animation TUBE d'origine (comme le hero, NON masquée, mix-blend screen) fait UN passage L→R synchronisé au reveal
   puis s'efface (opacity gérée en JS). Le titre finit blanc/grand/1-ligne. Mobile/reduced : reveal blanc sans tube. */
.page-hero__title[data-shutter] { font-size: clamp(2rem, 6.7vw, 4rem); line-height: 1.1; color: #fff; }   /* taille UNIFORME calée sur la largeur RÉELLE du hero (.page-hero__inner max 900px → contenu ~852px) ; color:#fff garantit le blanc en rendu CLAIR RTL (arabe, non découpé) */
/* Logo animé du service (même icône que la carte home) AU-DESSUS du titre, en GRAND, tracé au chargement (icon-draw, 1×) */
.page-hero__logo { display: flex; justify-content: center; margin-bottom: clamp(12px, 2vw, 24px); }
.page-hero__logo svg { width: clamp(76px, 11vw, 118px); height: auto; color: #fff; filter: drop-shadow(0 3px 18px rgba(255,255,255,.22)); }
.page-hero__logo svg * { stroke-dasharray: 1; animation: icon-draw 1s cubic-bezier(.65,0,.35,1) both; }
@media (prefers-reduced-motion: reduce) { .page-hero__logo svg * { animation: none; } }
.sh-stage { position: relative; display: inline-block; }
.sh-word { display: inline-block; white-space: nowrap; }   /* pas de coupure au milieu d'un mot */
.sh-l { display: inline-block; white-space: pre; color: #fff; opacity: 0; filter: blur(6px); }   /* INVISIBLE avant le passage du tube */
.sh-l.sh-go { animation: sh-reveal .6s cubic-bezier(.2,1,.36,1) forwards; }   /* → blanc au passage du tube ; delay posé en JS (calé sur la position du tube) */
@keyframes sh-reveal { to { opacity: 1; filter: blur(0); } }
/* le tube passe PAR-DESSUS (NON masqué, comme le hero) ; posé au niveau du HERO (position en JS) → blend contre la grille, pas de rectangle */
.sh-tube { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; mix-blend-mode: screen; opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .sh-l { opacity: 1; filter: none; animation: none; } .sh-tube { display: none; } }