/* Ancra Design — base, tokens & composants (design « plongée abyssale »). */

:root{
  /* ==========================================================
     ÉCHELLE DE FONDS DÉRIVÉE DU HERO  (skill hero-background-system)
     Source : shader du hero, palette relevée sur 3 frames de la boucle
     (median-cut, couverture réelle) puis passée dans
     scripts/extract_hero_palette.py.
       base retenue #11101F — teinte directrice 286.0° — mode sombre
     Les sections ne changent pas de couleur, elles changent de
     PROFONDEUR : même teinte partout, clarté qui s'écarte pas à pas.
     ========================================================== */
  --hue:286.0;
  --surface-0:#07070B;   /* oklch(0.130 0.010 286) — fond par défaut     */
  --surface-1:#0F0F17;   /* oklch(0.172 0.017 286) — respiration/preuve  */
  --surface-2:#181821;   /* oklch(0.214 0.017 286) — sections denses     */
  --surface-3:#22222B;   /* oklch(0.256 0.017 286) — ancrages forts      */
  /* Palier clair — dérivé de l'image du hero (script hero-background-system,
     teinte mesurée 291°, même famille que l'échelle sombre à ±5°).
     La page COMMENCE sur ce palier et plonge vers l'échelle sombre. */
  --surface-l0:#F0F0F3;  /* oklch(0.955 0.004 291) — sous le hero            */
  --surface-l1:#E6E5ED;  /* oklch(0.925 0.010 291) — entrée du manifeste     */
  --ink-dark:#1A1A1C;    /* encre sur paliers clairs — 15.3:1 sur l0 (AAA)   */
  --ink:#F4F4FB;
  --ink-muted:#A3A3B1;
  --line:#22222B;
  --line-soft:#1B1B21;
  /* Accent de marque conservé : teinte 288.2° (à 2.2° de la directrice,
     dans la tolérance ±5°) et 4.81:1 avec du blanc.
     --accent = aplats (texte BLANC obligatoire dessus, l'encre off-white
     échouerait à 4.40). --accent-text = liens et texte coloré, seule
     variante qui passe AA sur les quatre surfaces. */
  --accent:#7C4DFF;
  --accent-ink:#FFFFFF;
  --accent-text:#A192FF;
  --accent-text-hover:#C1BBFF;
  /* Ombres teintées sur --hue, jamais du noir pur */
  --shadow-deep:#030308;
  --hero-veil:linear-gradient(to bottom, transparent 55%, var(--surface-l0) 100%);

  /* Anciens tokens ANCRA, désormais branchés sur l'échelle */
  --ancra-bg:var(--surface-0);
  --ancra-panel:var(--surface-1);
  --ancra-panel-2:var(--surface-2);
  --ancra-line:var(--line-soft);
  --ancra-line-2:var(--line);
  --ancra-ink:#FFFFFF;
  --ancra-text:var(--ink);
  --ancra-accent:var(--accent);
  --chrome:linear-gradient(165deg,#FFFFFF 0%,#C9CED6 18%,#74797F 34%,#F4F6F8 50%,#9AA0A8 66%,#D8DCE1 82%,#6E737A 100%);

  /* Texte sur fond sombre — 4 niveaux, alignés sur --ink */
  --on-dark-muted:rgba(244,244,251,.76);
  --on-dark-soft:rgba(244,244,251,.60);
  --on-dark-faint:rgba(244,244,251,.46);

  /* Typographie — tailles relevées, lettres resserrées */
  --fs-h2:clamp(1.8rem,3vw,2.8rem);
  --fs-h3:clamp(1.25rem,1.8vw,1.65rem);
  --fs-body:clamp(15px,1.15vw,17px);
  --fs-sm:15px;
  --fs-label:clamp(20px,2.2vw,30px);
  --fs-mono:13.5px;

  /* Interlettrage — resserré (avant : .12em à .2em) */
  --track-mono:.04em;
  --track-mono-lg:.06em;
  --track-display:-.045em;

  /* Espacements */
  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:clamp(20px,3vw,40px);
  --space-2xl:clamp(28px,4vw,56px);
  --gutter:clamp(20px,5vw,96px);
  --gutter-l:clamp(56px,6vw,120px);

  /* Mouvement */
  --dur-fast:.45s; --dur-base:.6s;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Police d'affichage — cible : EUROSTILE EXTENDED (Novarese, 1962).
     Eurostile est SOUS LICENCE (URW/Linotype, dispo sur Adobe Fonts) : elle est
     nommée en tête de pile, donc dès que les fichiers ou le kit Adobe sont
     ajoutés elle prend le relais SANS AUCUNE autre modification.
     En attendant, Saira poussée en largeur tient le rôle : c'est la seule
     libre à combiner proportions étendues et graisses 400→900.
     (Michroma est plus fidèle de forme mais n'a qu'une graisse.) */
  /* « eurostile-extended » = le nom CSS servi par Adobe Fonts (minuscules,
     tirets) ; « Eurostile Extended » = le nom d'une fonte licenciée installée
     ou auto-hébergée. Les deux sont listés pour que la bascule soit
     automatique quelle que soit la voie choisie. */
  --font-display:eurostile-extended,'Eurostile Extended','Eurostile','Saira',sans-serif;
  --font-display-stretch:115%;
  --font-mono:'JetBrains Mono',monospace;
}

/* Largeur « Extended » appliquée partout où la police d'affichage est utilisée.
   Le sélecteur d'attribut attrape les usages inline (qui contiennent
   « var(--font-display) »), les autres sont listés explicitement.
   Sur une fonte statique comme Eurostile Extended, font-stretch est
   simplement ignoré : la bascule reste sans effet de bord. */
[style*="--font-display"],
.ar-wordmark, .ar-deliv-item h3, .ar-build-step h3, .ar-ident-head h3, .ar-offer-name{
  font-stretch:var(--font-display-stretch);
}

/* ============================================================
   MANIFESTE — ancre qui tourne sur elle-même, à droite du texte.
   Le conteneur du manifeste est en position:sticky, donc déjà
   positionné : l'ancre s'y accroche sans toucher au flux du texte.
   Le centrage vertical passe par la propriété `translate` et la
   rotation par la propriété `rotate` : elles sont indépendantes,
   donc l'animation n'écrase jamais le centrage.
   ============================================================ */
/* Dimensionnement : en tournant, l'ancre balaie son cercle circonscrit, de
   rayon 0,826 × largeur (pour un ratio 76/100). Pour qu'elle ne soit JAMAIS
   rognée, il faut 0,826 × l ≤ écart-droite + l/2. La largeur et l'écart
   ci-dessous respectent cette contrainte de 1024 px à 1920 px. */
.ar-manif-anchor{
  position:absolute; top:50%; right:clamp(48px,8vw,140px);
  translate:0 -50%;
  width:min(24vw,340px); aspect-ratio:76/100;
  pointer-events:none; z-index:0;
  /* `translate` tient le centrage, `transform` et `rotate` sont pilotés par le
     scroll depuis abysse.js : trois propriétés distinctes, aucun conflit. */
}
/* rotation d'inactivité : l'ancre reste vivante même à l'arrêt, pendant que le
   scroll pilote sa propre rotation sur l'enveloppe (les deux se composent) */
.ar-manif-spin{
  position:absolute; inset:0;
  animation:arSpinSelf 26s linear infinite;
}
.ar-manif-anchor svg{ width:100%; height:100%; overflow:visible; opacity:.62; }
/* halo violet qui respire au passage de la section */
.ar-manif-halo{
  position:absolute; left:50%; top:50%; width:170%; aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; opacity:0;
  background:radial-gradient(circle,
    rgba(124,77,255,.36) 0%, rgba(124,77,255,.12) 38%, rgba(124,77,255,0) 68%);
}
/* En tournant, le rectangle englobant de l'ancre grandit (jusqu'à ~1,4× à 45°)
   et dépasserait le bord droit → barre de défilement horizontale. On clippe sur
   le conteneur sticky lui-même : `overflow` posé sur l'élément sticky ne casse
   pas son propre collage (contrairement à un overflow sur son ancêtre). */
#manifeste > div{ overflow:hidden; }
@keyframes arSpinSelf{ to{ rotate:360deg } }
/* sous 900px le texte occupe toute la largeur : l'ancre se retirerait
   par-dessus les mots, on la masque plutôt que de la superposer */
@media (max-width:900px){ .ar-manif-anchor{ display:none } }
@media (prefers-reduced-motion: reduce){ .ar-manif-spin{ animation:none } }

/* ============================================================
   HERO — image pleine page animée.
   L'image est plate : on ne peut donc animer que l'ENSEMBLE
   (zoom, parallaxe, lumière). Faire dériver les panneaux
   séparément exigerait les calques d'origine.
   ============================================================ */
.ar-hero-img{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center;
  /* repli : si l'image manque ou tarde, le cadre reste dans la teinte
     de la marque au lieu d'un rectangle vide */
  /* repli ET bandes mobiles (mode contain) : le palier clair, pour que le
     hero reste dans le flux lumineux même sans image */
  background:var(--surface-l0);
}
.ar-hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  /* 25 % et non center : la composition porte son message dans la colonne de
     texte à gauche — sur un écran moins large que l'image (16/10), un cadrage
     centré rognait « CRÉER. ANCRER. DURER. ». On protège la gauche, la perte
     se reporte sur le bord droit du portable. L'origine du zoom suit le même
     point pour que l'animation ne re-rogne pas ce qu'on vient de protéger. */
  object-fit:cover; object-position:25% center;
  transform-origin:25% 50%;
  /* `scale` et `translate` sont indépendants de `transform` : le zoom lent
     (CSS) et la parallaxe (JS) cohabitent sans jamais s'écraser. */
  scale:1.02;
  animation:arHeroZoom 34s ease-in-out infinite alternate;
  will-change:scale, translate, transform;
  /* `translate` = parallaxe au scroll (immédiate) ; `transform` = parallaxe à
     la souris (amortie par cette transition). Deux propriétés séparées, donc
     aucune ne remplace l'autre. */
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
@keyframes arHeroZoom{ from{ scale:1.02 } to{ scale:1.06 } }

/* balayage de lumière violet qui traverse lentement le cadre */
.ar-hero-sweep{
  position:absolute; inset:-20% -60%; pointer-events:none; z-index:1;
  background:linear-gradient(104deg,
    rgba(124,77,255,0) 42%, rgba(161,146,255,.16) 50%, rgba(124,77,255,0) 58%);
  mix-blend-mode:screen;
  animation:arHeroSweep 11s ease-in-out infinite;
}
@keyframes arHeroSweep{
  0%,100%{ transform:translateX(-38%) }
  50%    { transform:translateX(38%) }
}

/* invite à défiler — discrète, retirable en supprimant ce bloc et le <a> */
/* ============================================================
   ÉLÉMENTS VIVANTS DU HERO — panneaux de verre + poussière.
   Trois propriétés séparées par rôle : `translate` = flottement
   (CSS), `transform` = parallaxe souris (JS), `rotate` = assiette.
   ============================================================ */
.ar-hero-float{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ar-hf-chip{
  position:absolute; display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.44);
  -webkit-backdrop-filter:blur(13px) saturate(1.25);
  backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 10px 34px rgba(38,26,84,.16), inset 0 1px 0 rgba(255,255,255,.85);
  will-change:translate, transform;
}
.ar-hf-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#3E3B4C; white-space:nowrap;
}
/* positions : bande centrale sûre — jamais sur la colonne de texte (gauche)
   ni sur l'écran du portable (droite basse) */
.ar-hf-a{ left:33%; top:21%;  animation:arHfFloatA 9s  ease-in-out infinite alternate; }
.ar-hf-b{ left:58%; top:27%;  animation:arHfFloatB 12s ease-in-out infinite alternate; }
.ar-hf-c{ left:40%; top:66%;  animation:arHfFloatC 10s ease-in-out infinite alternate; }
@keyframes arHfFloatA{ from{ translate:0 -7px;  rotate:-1.1deg } to{ translate:0 9px;  rotate:.8deg  } }
@keyframes arHfFloatB{ from{ translate:0 8px;   rotate:.9deg  } to{ translate:0 -10px; rotate:-.7deg } }
@keyframes arHfFloatC{ from{ translate:0 -5px }               to{ translate:0 7px  } }
/* micro-vie interne : barres qui respirent, courbe qui se trace, point radar */
.ar-hf-bars{ display:flex; align-items:flex-end; gap:3px; height:18px; }
.ar-hf-bars i{
  width:5px; border-radius:2px; background:var(--accent);
  transform-origin:bottom; animation:arHfBar 2.6s ease-in-out infinite;
}
.ar-hf-bars i:nth-child(1){ height:8px }
.ar-hf-bars i:nth-child(2){ height:14px; animation-delay:.3s }
.ar-hf-bars i:nth-child(3){ height:10px; animation-delay:.6s; opacity:.65 }
.ar-hf-bars i:nth-child(4){ height:17px; animation-delay:.9s }
@keyframes arHfBar{ 0%,100%{ transform:scaleY(.55) } 50%{ transform:scaleY(1) } }
.ar-hf-b svg{ width:84px; height:26px; display:block }
.ar-hf-line{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:arHfLine 4.2s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes arHfLine{ 0%{ stroke-dashoffset:120 } 55%,78%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:-120 } }
.ar-hf-dot{
  width:7px; height:7px; border-radius:999px; background:var(--accent);
  animation:arHfPing 2.2s ease-out infinite;
}
@keyframes arHfPing{
  0%{ box-shadow:0 0 0 0 rgba(124,77,255,.45) }
  70%,100%{ box-shadow:0 0 0 11px rgba(124,77,255,0) }
}
/* poussière lumineuse : monte lentement, se dissout */
.ar-hf-dust{
  position:absolute; bottom:-2%; border-radius:999px;
  background:rgba(124,77,255,.5); opacity:0;
  animation:arHfDust linear infinite;
}
.ar-hf-dust.d1{ left:22%; width:3px; height:3px; animation-duration:13s }
.ar-hf-dust.d2{ left:37%; width:2px; height:2px; animation-duration:17s; animation-delay:3s; background:rgba(255,255,255,.8) }
.ar-hf-dust.d3{ left:52%; width:4px; height:4px; animation-duration:11s; animation-delay:6s }
.ar-hf-dust.d4{ left:64%; width:2px; height:2px; animation-duration:19s; animation-delay:1.5s; background:rgba(255,255,255,.7) }
.ar-hf-dust.d5{ left:75%; width:3px; height:3px; animation-duration:15s; animation-delay:8s }
.ar-hf-dust.d6{ left:87%; width:2px; height:2px; animation-duration:21s; animation-delay:4.5s }
@keyframes arHfDust{
  0%{ translate:0 0; opacity:0 }
  8%{ opacity:.85 }
  85%{ opacity:.25 }
  100%{ translate:14px -105vh; opacity:0 }
}
@media (max-width:760px){ .ar-hero-float{ display:none } }
@media (prefers-reduced-motion: reduce){
  .ar-hf-chip, .ar-hf-bars i, .ar-hf-line, .ar-hf-dot, .ar-hf-dust{ animation:none }
  .ar-hf-line{ stroke-dashoffset:0 }
  .ar-hf-dust{ display:none }
}

/* ============================================================
   HERO « ancre colossale » — dépasse l'écran, effets numériques.
   Répartition : `translate` = parallaxe scroll (JS), `transform`
   = parallaxe souris (JS), les keyframes n'animent que des
   propriétés internes (dashoffset, rotate, background).
   ============================================================ */
.ar-hx-glow{
  position:absolute; left:64%; top:38%; width:min(58vw,900px); aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(124,77,255,.20) 0%, rgba(124,77,255,.07) 42%, rgba(124,77,255,0) 70%);
  animation:arHxGlow 7s ease-in-out infinite alternate;
}
@keyframes arHxGlow{ from{ scale:.92; opacity:.75 } to{ scale:1.1; opacity:1 } }
.ar-hx-stage{
  position:absolute; z-index:0; pointer-events:none;
  left:46%; right:auto; top:-16vh; height:132vh; aspect-ratio:76/100;
  will-change:translate, transform;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.ar-hx-anchor{ width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 26px rgba(124,77,255,.22)) drop-shadow(0 34px 60px rgba(38,26,84,.18)); }
/* impulsion : un court segment lumineux parcourt les traits en boucle */
.ar-hx-pulse *{
  stroke-dasharray:14 300; stroke-dashoffset:314; opacity:.9;
  animation:arHxPulse 5.5s linear infinite;
}
.ar-hx-pulse *:nth-child(2){ animation-delay:1.3s }
.ar-hx-pulse *:nth-child(3){ animation-delay:2.6s }
.ar-hx-pulse *:nth-child(4){ animation-delay:3.9s }
@keyframes arHxPulse{ to{ stroke-dashoffset:0 } }
/* orbite autour de l'anneau (cx100 cy68 du viewBox 62/52/76/100) */
.ar-hx-orbit{
  position:absolute; left:50%; top:16%; width:34%; aspect-ratio:1;
  translate:-50% -50%; border-radius:50%;
  border:1.5px dashed rgba(124,77,255,.5);
  animation:arHxOrbit 22s linear infinite;
}
.ar-hx-orbit::before{
  content:""; position:absolute; left:50%; top:-4px; width:8px; height:8px;
  translate:-50% 0; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px rgba(124,77,255,.8);
}
@keyframes arHxOrbit{ to{ rotate:360deg } }
/* balayage de scan vertical sur l'ancre */
.ar-hx-scan{
  position:absolute; inset:0; overflow:hidden; border-radius:2px;
}
.ar-hx-scan::before{
  content:""; position:absolute; left:-10%; right:-10%; height:10%;
  top:-12%;
  background:linear-gradient(180deg, rgba(161,146,255,0) 0%, rgba(161,146,255,.28) 50%, rgba(161,146,255,0) 100%);
  animation:arHxScan 6.5s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes arHxScan{ 0%{ top:-12% } 55%,100%{ top:112% } }
/* sol holographique : grille en perspective qui défile */
.ar-hx-grid{
  position:absolute; left:0; right:0; bottom:0; height:34vh; z-index:0;
  pointer-events:none; overflow:hidden;
  perspective:520px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%, rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 45%, rgba(0,0,0,.5) 100%);
}
.ar-hx-grid i{
  position:absolute; left:-40%; right:-40%; top:-20%; bottom:-120%;
  transform:rotateX(62deg);
  background-image:
    repeating-linear-gradient(90deg, rgba(124,77,255,.16) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(180deg, rgba(124,77,255,.16) 0 1px, transparent 1px 68px);
  animation:arHxGrid 5.5s linear infinite;
}
@keyframes arHxGrid{ from{ background-position:0 0, 0 0 } to{ background-position:0 0, 0 68px } }
/* colonne de texte */
.ar-hx-copy{
  position:relative; z-index:2; align-self:center; width:100%;
  padding:0 clamp(20px,5vw,96px) 0 clamp(56px,6vw,120px);
  margin-bottom:0;
}
.ar-hx-eyebrow{
  margin:0 0 18px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.ar-hx-title{
  margin:0 0 26px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,7.6vw,7.2rem); line-height:.98;
  letter-spacing:var(--track-display); color:var(--ink-dark);
}
.ar-hx-l{ display:block }
.ar-hx-accent{ color:var(--accent) }
.ar-hx-sub{
  margin:0 0 30px; max-width:44ch; color:#3E3B4C;
  font-size:clamp(15px,1.25vw,17.5px); line-height:1.65; text-wrap:pretty;
}
.ar-hx-ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.ar-hx-ctas [data-cta]{
  background:var(--accent); color:var(--accent-ink); border-radius:999px;
  padding:16px 30px; font-family:var(--font-mono); font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase;
}
.ar-hx-ghost{
  font-family:var(--font-mono); font-size:14.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dark);
  border-bottom:1px solid rgba(26,26,28,.35); padding-bottom:3px;
}
@media (max-width:900px){
  .ar-hx-stage{ left:34%; top:-8vh; height:100vh; opacity:.5 }
  .ar-hx-glow{ left:60%; }
  .ar-hx-title{ font-size:clamp(2.6rem,13vw,4.4rem) }
}
@media (prefers-reduced-motion: reduce){
  .ar-hx-glow, .ar-hx-pulse *, .ar-hx-orbit, .ar-hx-scan::before, .ar-hx-grid i{ animation:none }
  .ar-hx-pulse{ display:none }
  .ar-hx-scan{ display:none }
}

/* ============================================================
   FINITIONS « rêve » — grain, ruban scrubé, relief des cartes
   ============================================================ */
/* grain de film : la texture qui rend chaque aplat organique */
.ar-grain{
  position:fixed; inset:-40px; z-index:200; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* ruban géant en contour, déplacé par le moteur au rythme du scroll */
.ar-band{ overflow:hidden; padding:clamp(28px,6vh,72px) 0; }
.ar-band-track{
  display:flex; white-space:nowrap; will-change:translate;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3.4rem,8.5vw,8.4rem); line-height:1;
  letter-spacing:var(--track-display);
  color:transparent; -webkit-text-stroke:1.5px rgba(244,244,251,.30);
}
/* relief 3D au survol : la carte s'incline vers le pointeur, un reflet suit */
.ar-tilt{ position:relative; transform-style:preserve-3d; }
.ar-glare{
  position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%);
  transition:opacity .35s ease;
}
.ar-tilt:hover .ar-glare{ opacity:1 }
@media (prefers-reduced-motion: reduce){ .ar-grain{ display:none } }

/* ============================================================
   VOCABULAIRE « référence » — curseur, parallaxe média
   ============================================================ */
/* anneau de curseur : suit avec retard (transition), s'amplifie sur
   l'interactif. Le pointeur natif reste — l'anneau est un accent. */
.ar-cursor-ring{
  position:fixed; left:0; top:0; z-index:300; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:999px;
  border:1.5px solid rgba(124,77,255,.55); opacity:0;
  transition:translate .22s cubic-bezier(.215,.61,.355,1),
             scale .3s cubic-bezier(.215,.61,.355,1),
             border-color .3s ease, opacity .3s ease;
}
.ar-cursor-ring.is-on{ scale:2; border-color:rgba(124,77,255,.9); }
@media (hover: none), (pointer: coarse){ .ar-cursor-ring{ display:none } }
/* les visuels scrubés débordent dans leur cadre : sur-échelle + clip */
[data-plx]{ overflow:hidden; }
[data-plx] > svg{ scale:1.16; will-change:translate; }

/* voile de jonction : le dernier tiers du hero fond vers le palier clair.
   Au-dessus du balayage (z1), sous l'invite (z3). */
.ar-hero-img::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--hero-veil); pointer-events:none;
}
.ar-hero-scroll{
  position:absolute; left:50%; bottom:clamp(18px,3.5vh,40px);
  translate:-50% 0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:#141018; text-decoration:none;
  opacity:.62; transition:opacity var(--dur-fast) var(--ease-out);
  animation:arHeroCue 2.6s ease-in-out infinite;
}
.ar-hero-scroll:hover{ opacity:1; color:var(--accent, #7C4DFF); }
@keyframes arHeroCue{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }

/* contenu réservé aux lecteurs d'écran et aux moteurs de recherche */
.ar-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* MOBILE — l'image est en paysage (16/9) : en `cover` sur un écran vertical,
   74 % de la largeur serait rognée et la composition deviendrait illisible.
   On l'affiche donc entière, le fond de marque comblant le haut et le bas.
   Le vrai remède reste un export vertical dédié : voir le LISEZ-MOI. */
@media (max-width:760px){
  .ar-hero-sweep{ opacity:.6 }
}

@media (prefers-reduced-motion: reduce){
  .ar-hero-photo{ animation:none; scale:1 }
  .ar-hero-sweep, .ar-hero-scroll{ animation:none }
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ancra-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-hover); }
::selection { background: var(--ancra-accent); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--ancra-accent); outline-offset: 3px; }
input, textarea, button { font: inherit; }

@keyframes ancraPulse { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes ancraSway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes ancraPreOut { 0%, 88% { clip-path: inset(0 0 0 0); visibility: visible; } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes ancraMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SCÈNE GLOBALE — un seul fond fixe pour tout le site.
   Chaque section déclare data-mood ; la couche correspondante
   fond en douceur (opacity), le mouvement reste continu et
   dérive vers le haut : on coule, le décor remonte.
   ============================================================ */
.ar-scene{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.ar-scene [data-mood-layer]{
  position:absolute; inset:0; opacity:0; overflow:hidden;
  transition:opacity 1.1s var(--ease-out);
}
.ar-scene [data-mood-layer] > *{ position:absolute; will-change:transform; }
/* Aplats de l'échelle, pas des dégradés : le seul dégradé marquant de la
   page est le hero. Ce qui distingue les couches, c'est le niveau de
   profondeur (+ leur texture propre : mesh, sheen, rise, orb). */
/* jonction animée : instantanée si l'utilisateur refuse le mouvement */
@media (prefers-reduced-motion: reduce){
  .ar-scene [data-mood-layer]{ transition:none; }
}
.ar-scene [data-mood-layer="s0"]{ background:var(--surface-0); }
.ar-scene [data-mood-layer="s1"]{ background:var(--surface-1); }
.ar-scene [data-mood-layer="s2"]{ background:var(--surface-2); }
.ar-scene [data-mood-layer="s3"]{ background:var(--surface-3); }

/* lignes fines qui remontent (ink) — le mouvement de la descente */
.ar-rise{
  left:0; top:-20%; width:100%; height:140%;
  background-image:repeating-linear-gradient(180deg, rgba(232,233,235,.05) 0 1px, transparent 1px 120px);
  animation:arRiseUp 16s linear infinite;
}
@keyframes arRiseUp{ from{transform:translateY(0)} to{transform:translateY(-120px)} }
.ar-orb.at-bottom{ top:118%; }

/* ============================================================
   FONDS DE SECTION ANIMÉS — transform/opacity uniquement
   ============================================================ */
.ar-anim-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ar-anim-bg > *{ position:absolute; will-change:transform; }
.ar-sheen{
  left:-40%; top:-60%; width:180%; height:220%;
  background:conic-gradient(from 0deg at 50% 50%,
     rgba(255,255,255,0) 0deg, rgba(255,255,255,.055) 60deg,
     rgba(255,255,255,0) 140deg, rgba(124,77,255,.05) 220deg,
     rgba(255,255,255,0) 300deg, rgba(255,255,255,.045) 360deg);
  animation:ancraSheen 34s linear infinite;
}
@keyframes ancraSheen{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.ar-mesh{
  left:-10%; top:-10%; width:120%; height:130%;
  background-image:
    repeating-linear-gradient(90deg, rgba(232,233,235,.05) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(180deg, rgba(232,233,235,.045) 0 1px, transparent 1px 78px);
  animation:ancraMesh 26s linear infinite;
}
@keyframes ancraMesh{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-78px,-78px,0)} }
.ar-orb{
  left:50%; top:50%; width:70vmax; height:70vmax; margin:-35vmax 0 0 -35vmax;
  border-radius:999px;
  background:radial-gradient(circle, rgba(124,77,255,.13) 0%, rgba(124,77,255,0) 62%);
  animation:ancraBreathe 15s ease-in-out infinite;
}
.ar-orb.is-chrome{ background:radial-gradient(circle, rgba(200,207,215,.10) 0%, rgba(200,207,215,0) 64%); animation-duration:19s; }
@keyframes ancraBreathe{ 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.22);opacity:1} }
.ar-layer{ position:relative; z-index:1; }

/* JONCTIONS — une seule famille pour tout le site : le fondu.
   1. hero -> page : --hero-veil (bas du hero, cf. .ar-hero-veil) ;
   2. entre deux niveaux différents : le crossfade de 1.1s des couches
      [data-mood-layer], qui supprime toute frontière spatiale ;
   3. liseré teinté — le minimum viable quand deux sections de MÊME niveau
      se touchent, sinon la frontière disparaît et elles se lisent comme
      une seule section (livrables/piliers/process, ancrage/relevés). */
[data-sec][data-mood="s0"] + [data-sec][data-mood="s0"],
[data-sec][data-mood="s1"] + [data-sec][data-mood="s1"],
[data-sec][data-mood="s2"] + [data-sec][data-mood="s2"],
[data-sec][data-mood="s3"] + [data-sec][data-mood="s3"]{
  border-block-start:1px solid var(--line);
}

/* ============================================================
   OUVERTURE — tracé du monogramme puis levée du voile
   ============================================================ */
.ar-intro{
  position:fixed; inset:0; z-index:200; background:#060607;
  display:grid; place-items:center; overflow:hidden;
}
.ar-intro-mark{ width:min(30vh,220px); overflow:visible; }
.ar-intro-mark [data-len]{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:arIntroDraw 1.1s var(--ease-out) forwards;
}
.ar-intro-mark [data-len]:nth-child(2){ animation-delay:.14s }
.ar-intro-mark [data-len]:nth-child(3){ animation-delay:.28s }
.ar-intro-mark [data-len]:nth-child(4){ animation-delay:.4s }
.ar-intro-mark [data-len]:nth-child(5){ animation-delay:.52s }
.ar-intro-mark [data-len]:nth-child(6){ animation-delay:.64s }
@keyframes arIntroDraw{ to{ stroke-dashoffset:0 } }
.ar-intro-brand{
  margin-top:26px; text-align:center; font-family:var(--font-mono);
  font-size:15px; letter-spacing:.34em; text-transform:uppercase; color:#E8E9EB; opacity:0;
  animation:arIntroFade .7s ease .75s forwards;
}
@keyframes arIntroFade{ to{ opacity:.85 } }
.ar-intro-count{
  position:absolute; left:clamp(20px,5vw,96px); bottom:34px;
  font-family:var(--font-mono); font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.03em;
  color:#F4F6F8; font-variant-numeric:tabular-nums; line-height:1;
}
.ar-intro-count small{ font-size:.34em; letter-spacing:.07em; color:rgba(232,233,235,.5); margin-left:10px; }
.ar-intro-line{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--ancra-accent); transform:scaleX(0); transform-origin:left;
}
/* lettres du wordmark (révélées à la fin de l'ouverture).
   background-clip:text du parent ne traverse pas les inline-block :
   chaque lettre porte donc son propre chrome. */
.ar-wordmark .ar-wm-l{
  display:inline-block; will-change:transform;
  background-image:linear-gradient(168deg,#FFFFFF 0%,#CDD2DA 14%,#8B91A0 30%,#FFFFFF 46%,#A6ACBC 62%,#F2F4F8 78%,#8A90A0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   HERO — le nom sur toute la largeur
   ============================================================ */
.ar-hero-shader{ position:absolute; inset:0; z-index:0; }
.ar-hero-shader canvas{ width:100%; height:100%; display:block; }
/* sans WebGL (classe posée par hero-shader.js) : nuit statique équivalente —
   horizon incandescent violet, sol sombre, ciel indigo */
.ar-hero-shader.is-static{
  background:
    linear-gradient(180deg, rgba(7,6,14,0) 62%, rgba(7,6,14,.75) 82%, #06060C 100%),
    radial-gradient(80% 26% at 50% 74%, rgba(124,77,255,.62) 0%, rgba(124,77,255,0) 70%),
    radial-gradient(38% 12% at 50% 74%, rgba(255,252,248,.75) 0%, rgba(255,252,248,0) 72%),
    linear-gradient(180deg, #08070F 0%, #0C0A1C 52%, #14103A 74%, #08071A 100%);
}
/* logo colossal — l'ancre de la marque en très grand, cadrée par le viewport
   (anneau coupé en haut, bras fondus dans la brume vers le bas pour laisser
   les textes lisibles). data-hero-anchor : coule et s'efface au scroll. */
.ar-hero-colossus{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.24) 44%, rgba(0,0,0,.08) 57%, rgba(0,0,0,0) 68%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.24) 44%, rgba(0,0,0,.08) 57%, rgba(0,0,0,0) 68%);
}
.ar-hero-colossus svg{
  position:absolute; left:50%; top:-24vh; height:170vh; aspect-ratio:76/100;
  transform:translateX(-50%); opacity:.82; overflow:visible;
}
/* ============================================================
   NAV — sous 720px les 4 liens + le logo ne tiennent pas sur une
   ligne : la nav passe sur sa propre rangée (avant, « Contact »
   sortait de l'écran et devenait inatteignable).
   ============================================================ */
@media (max-width: 720px){
  .ar-nav{
    flex-wrap:wrap; row-gap:8px;
    padding-top:14px !important; padding-bottom:14px !important;
    padding-right:clamp(14px,4vw,20px) !important;
  }
  .ar-nav > nav{
    width:100%; justify-content:space-between;
    gap:clamp(6px,2vw,14px) !important;
  }
  .ar-nav > nav a{ font-size:12.5px !important; letter-spacing:.03em !important; }
}

/* mobile : la section hero est bien plus haute que l'écran — fondu plus court
   et ancre plus discrète pour que le paragraphe reste net */
@media (max-width: 720px){
  .ar-hero-colossus{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,.16) 38%, rgba(0,0,0,0) 54%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,.16) 38%, rgba(0,0,0,0) 54%);
  }
  .ar-hero-colossus svg{ opacity:.6; }
}
/* voile de lisibilité : scrim sombre sous la nav et derrière les zones de
   texte, puis fondu vers le noir du site en bas de section */
.ar-hero-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,7,11,.72) 0%, rgba(7,7,11,.28) 12%, rgba(7,7,11,0) 24%),
    radial-gradient(66% 34% at 26% 74%, rgba(7,7,11,.66) 0%, rgba(7,7,11,0) 72%),
    radial-gradient(48% 26% at 80% 82%, rgba(7,7,11,.54) 0%, rgba(7,7,11,0) 74%),
    /* jonction hero -> page : le voile de l'échelle */
    var(--hero-veil);
}
.ar-hero-layer{ position:relative; z-index:1; }
.ar-wordmark-wrap{
  box-sizing:border-box; width:100%; padding-inline:clamp(10px,1.4vw,22px); overflow:hidden;
  /* halo violet : le wordmark chrome s'inscrit dans la scène nocturne */
  filter:drop-shadow(0 0 30px rgba(124,77,255,.4)) drop-shadow(0 2px 12px rgba(6,6,12,.7));
}
.ar-wordmark{
  margin:0; display:block; white-space:nowrap;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,12.3vw,17rem); line-height:.82;
  letter-spacing:-.055em; text-align:center;
  background-image:linear-gradient(168deg,#FFFFFF 0%,#CDD2DA 14%,#8B91A0 30%,#FFFFFF 46%,#A6ACBC 62%,#F2F4F8 78%,#8A90A0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ar-hero-sub{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,56px); }

/* ============================================================
   LIVRABLES
   ============================================================ */
.ar-deliv{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ancra-line); border:1px solid var(--ancra-line); }
.ar-deliv-item{
  position:relative; background:var(--ancra-panel); padding:clamp(22px,2.6vw,34px);
  display:grid; gap:var(--space-sm); align-content:start; overflow:hidden;
  transition:background var(--dur-fast) var(--ease-out);
}
.ar-deliv-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ancra-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.ar-deliv-item:hover{ background:var(--ancra-panel-2); }
.ar-deliv-item:hover::after{ transform:scaleX(1); }
.ar-deliv-num{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--track-mono); color:var(--on-dark-faint); }
.ar-deliv-ico{ width:32px; height:32px; color:var(--ancra-text); opacity:.9; }
.ar-deliv-item:hover .ar-deliv-ico{ color:var(--ancra-accent); }
.ar-deliv-item h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:var(--track-display); color:var(--ancra-ink); }
.ar-deliv-item p{ margin:0; font-size:var(--fs-body); color:var(--on-dark-soft); text-wrap:pretty; }

/* ============================================================
   SAVOIR-FAIRE — 4 étapes démontrées par l'animation
   (remplace les grandes plaques chrome)
   ============================================================ */
.ar-build{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ancra-line); border:1px solid var(--ancra-line); }
.ar-build-step{ background:var(--ancra-panel); padding:clamp(18px,2vw,26px); display:grid; gap:var(--space-md); align-content:start; }
.ar-build-step h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:var(--track-display); color:var(--ancra-ink); }
.ar-build-step p{ margin:0; font-size:var(--fs-body); color:var(--on-dark-soft); text-wrap:pretty; }
.ar-build-num{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--track-mono); color:var(--ancra-accent); }
.ar-build-viz{
  aspect-ratio:5/4; background:var(--ancra-bg); border:1px solid var(--ancra-line);
  display:grid; place-items:center; overflow:hidden; padding:14px;
}
.ar-build-viz svg{ width:100%; height:100%; overflow:visible; }

/* 1 — le logo se dessine */
.ar-draw [data-len]{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.is-in .ar-draw [data-len]{ animation:arDraw 1.5s var(--ease-out) forwards; }
.is-in .ar-draw [data-len]:nth-child(2){ animation-delay:.12s }
.is-in .ar-draw [data-len]:nth-child(3){ animation-delay:.24s }
.is-in .ar-draw [data-len]:nth-child(4){ animation-delay:.36s }
.is-in .ar-draw [data-len]:nth-child(5){ animation-delay:.48s }
.is-in .ar-draw [data-len]:nth-child(6){ animation-delay:.6s }
@keyframes arDraw{ to{ stroke-dashoffset:0 } }

/* 2 — la charte se remplit */
.ar-sw{ transform:scale(0); transform-origin:center; transform-box:fill-box; }
.is-in .ar-sw{ animation:arPop .5s var(--ease-out) forwards; }
.is-in .ar-sw:nth-of-type(2){ animation-delay:.1s } .is-in .ar-sw:nth-of-type(3){ animation-delay:.2s }
.is-in .ar-sw:nth-of-type(4){ animation-delay:.3s } .is-in .ar-sw:nth-of-type(5){ animation-delay:.4s }
@keyframes arPop{ to{ transform:scale(1) } }

/* 3 — les supports se déploient */
.ar-cd{ opacity:0; }
.is-in .ar-cd{ animation:arFan .8s var(--ease-out) forwards; }
.is-in .ar-cd:nth-of-type(2){ animation-delay:.14s } .is-in .ar-cd:nth-of-type(3){ animation-delay:.28s }
@keyframes arFan{ from{ opacity:0; transform:translateY(16px) rotate(0deg) } to{ opacity:1 } }

/* 4 — l'écran se charge */
.ar-bar{ transform:scaleX(0); transform-origin:left; transform-box:fill-box; }
.is-in .ar-bar{ animation:arGrow .7s var(--ease-out) forwards; }
.is-in .ar-bar:nth-of-type(2){ animation-delay:.12s } .is-in .ar-bar:nth-of-type(3){ animation-delay:.24s }
.is-in .ar-bar:nth-of-type(4){ animation-delay:.36s }
@keyframes arGrow{ to{ transform:scaleX(1) } }

/* ============================================================
   NOTRE IDENTITÉ — la marque Ancra en vitrine
   ============================================================ */
.ar-ident{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.4vw,56px); }
.ar-ident-item{ display:grid; gap:var(--space-md); }
.ar-ident-viz{
  position:relative; overflow:hidden; border:1px solid var(--ancra-line);
  background:var(--ancra-panel); transition:border-color var(--dur-fast) var(--ease-out);
}
.ar-ident-item:hover .ar-ident-viz{ border-color:var(--ancra-line-2); }
.ar-ident-viz svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ar-ident-viz.r-wide{ aspect-ratio:16/10 } .ar-ident-viz.r-sq{ aspect-ratio:1/1 }
.ar-ident-viz.r-tall{ aspect-ratio:4/5 } .ar-ident-viz.r-card{ aspect-ratio:5/4 }
.ar-ident-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-md); }
.ar-ident-head h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:var(--track-display); color:var(--ancra-ink); }
.ar-ident-head span{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--track-mono); color:var(--on-dark-faint); white-space:nowrap; }
.ar-ident-item p{ margin:0; max-width:52ch; font-size:var(--fs-body); color:var(--on-dark-soft); text-wrap:pretty; }

/* ============================================================
   OFFRES
   ============================================================ */
.ar-offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px); align-items:stretch; }
.ar-offer{
  position:relative; display:flex; flex-direction:column; gap:var(--space-lg);
  background:var(--ancra-panel); border:1px solid var(--ancra-line);
  padding:clamp(26px,3vw,42px); overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ar-offer::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--chrome); opacity:.5; }
.ar-offer:hover{ border-color:var(--ancra-line-2); transform:translateY(-4px); }
.ar-offer.is-feat{ background:var(--ancra-panel-2); border-color:rgba(124,77,255,.42); }
.ar-offer.is-feat::before{ background:var(--ancra-accent); opacity:1; }
.ar-offer-tag{
  position:absolute; right:0; top:0; padding:8px 15px; background:var(--ancra-accent); color:#fff;
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--track-mono); text-transform:uppercase;
}
/* min-height = 2 lignes : les prix restent alignés d'une carte à l'autre */
.ar-offer-name{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2); line-height:1.04; letter-spacing:var(--track-display); color:var(--ancra-ink); margin:0; min-height:2.08em; }
.ar-offer-pitch{ margin:0; font-size:var(--fs-body); color:var(--on-dark-soft); min-height:2.8em; text-wrap:pretty; }
/* Plus de montant affiché : la ligne qui séparait le pitch du contenu porte
   désormais l'engagement de délai. Elle garde les mêmes filets haut et bas
   pour que le rythme vertical des cartes reste identique. */
.ar-offer-delai{
  display:flex; align-items:center; gap:10px;
  padding-block:var(--space-md);
  border-top:1px solid var(--ancra-line); border-bottom:1px solid var(--ancra-line);
  font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--on-dark-muted);
}
.ar-offer-delai .puce{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--ancra-accent);
}
.ar-offer.is-feat .ar-offer-delai{ color:var(--ancra-ink); }
.ar-offer-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; flex:1; }
.ar-offer-list li{ display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-body); color:var(--on-dark-muted); }
.ar-offer-list li::before{ content:""; flex:0 0 auto; width:6px; height:6px; margin-top:.55em; background:var(--ancra-accent); }
.ar-offer-cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
  padding:16px 20px; border:1px solid var(--ancra-line-2); color:var(--ancra-text);
  font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--track-mono); text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ar-offer-cta:hover{ background:var(--ancra-text); color:var(--ancra-bg); border-color:var(--ancra-text); }
.ar-offer.is-feat .ar-offer-cta{ background:var(--ancra-accent); border-color:var(--ancra-accent); color:#fff; }
.ar-offer.is-feat .ar-offer-cta:hover{ background:#A78BFA; border-color:#A78BFA; color:var(--ancra-bg); }
.ar-offer-note{ margin:var(--space-lg) 0 0; font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--on-dark-faint); text-align:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .ar-build{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .ar-deliv{ grid-template-columns:repeat(2,1fr); }
  .ar-offers,.ar-ident{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .ar-deliv,.ar-build{ grid-template-columns:1fr; }
}

/* ============================================================
   ACCESSIBILITÉ — reduced-motion : état final, aucun mouvement
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ar-sheen,.ar-mesh,.ar-orb,.ar-rise{ animation:none; }
  .ar-scene [data-mood-layer]{ transition:none; }
  .ar-offer:hover{ transform:none; }
  .ar-draw [data-len]{ stroke-dashoffset:0; }
  .ar-sw{ transform:scale(1); }
  .ar-cd{ opacity:1; }
  .ar-bar{ transform:scaleX(1); }
  .is-in .ar-draw [data-len],.is-in .ar-sw,.is-in .ar-cd,.is-in .ar-bar{ animation:none; }
}