/* ============================================================
   L'ATELIER DIGITAL — V3 · DA "Prune & Abricot"
   Socle commun à toutes les pages.
   Palette : prune / abricot / crème rosée
   Typo : Instrument Serif (display) + Outfit (corps)
   ============================================================ */
:root{
  --ink:        #2A1230;   /* fond le plus sombre */
  --deep:       #3D1A3F;   /* violet profond hero */
  --deep-2:     #4A2450;
  --violet:     #A66B98;   /* violet électrique — accent maître */
  --violet-2:   #F2A76B;
  --glow:       #FBD9B8;
  --lavender:   #F6E8E2;   /* sections claires */
  --lavender-2: #F1DFD8;
  --paper:      #FBF2EC;
  --text-dark:  #2A1230;
  --text-mute:  #6F5570;
  --text-light: #FBF2EC;
  --text-light-mute: #E6D0C9;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Outfit', sans-serif;

  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 36px;
  --r-pill: 999px;

  --container: 1240px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);

  /* ---- Alias de compatibilité (composants thématiques) ---- */
  --accent: var(--violet);
  --accent-h: var(--violet-2);
  --accent-doux: var(--lavender);
  --accent-glow: rgba(166,107,152,.18);
  --noir: var(--text-dark);
  --noir-pur: var(--ink);
  --blanc-pur: var(--paper);
  --creme: var(--lavender-2);
  --gris: var(--text-mute);
  --gris-clair: #E6D0C9;
  --font-titre: var(--font-display);
  --font-corps: var(--font-body);
  --radius: var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-lg);
  --ombre-sm: 0 2px 10px rgba(42,18,48,.08);
  --ombre-md: 0 16px 40px -14px rgba(61,26,63,.22);
  --ombre-lg: 0 34px 70px -24px rgba(61,26,63,.3);
  --ombre-glow: 0 0 50px rgba(166,107,152,.25);
  --ease: var(--ease-out);
  --dur: .45s;
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px; --s-128:128px; --s-160:160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],article[id]{scroll-margin-top:96px}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text-dark);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--violet);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:none;background:none;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.container--wide{max-width:1400px;margin:0 auto;padding:0 32px}
.container--narrow{max-width:860px;margin:0 auto;padding:0 32px}

/* ---------- Préloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;
  transition:opacity .7s var(--ease-out),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__logo{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);
  color:#fff;overflow:hidden;
}
.preloader__logo span{display:inline-block;transform:translateY(110%);animation:pre-rise 1s var(--ease-expo) forwards}
.preloader__logo .accent{color:var(--violet-2)}
.preloader__bar{width:160px;height:2px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--glow));animation:pre-fill 1.4s var(--ease-out) .2s forwards}
@keyframes pre-rise{to{transform:translateY(0)}}
@keyframes pre-fill{to{width:100%}}

/* ---------- Barre de progression scroll ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:8000;
  background:linear-gradient(90deg,var(--violet),var(--glow));
  box-shadow:none;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:7000;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:22px 0;
}
.site-header.is-scrolled{
  background:rgba(42,18,48,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
  padding:14px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:#fff;
  letter-spacing:-.01em;position:relative;
}
.logo span{color:var(--violet-2)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  font-size:.95rem;font-weight:500;color:var(--text-light-mute);
  position:relative;transition:color .3s;
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--glow));
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out);
  border-radius:2px;
}
.nav-links a:not(.btn):hover{color:#fff}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.is-active{color:#fff}
.nav-links a.is-active:not(.btn)::after{transform:scaleX(1)}
.burger{display:none;flex-direction:column;gap:5px;z-index:7100}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease-out),opacity .3s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:1rem;border-radius:var(--r-pill);
  padding:16px 32px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s;
  will-change:transform;
  white-space:nowrap;
}
.btn .arrow{transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}
.btn--primary{
  background:linear-gradient(135deg,var(--violet) 0%,#8E5484 100%);
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(166,107,152,.55),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{
  background:linear-gradient(135deg,var(--violet-2) 0%,var(--violet) 100%);
  box-shadow:0 16px 44px -8px rgba(166,107,152,.75),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn--ghost{
  border:1.5px solid rgba(255,255,255,.35);color:#fff;
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--outline{
  border:1.5px solid var(--text-dark);color:var(--text-dark);
}
.btn--outline:hover{background:var(--text-dark);color:#fff;transform:translateY(-3px)}
.btn--nav{background:var(--violet);color:#fff !important;padding:11px 24px;font-size:.92rem;box-shadow:0 6px 20px -6px rgba(166,107,152,.6)}
.btn--nav:hover{background:var(--violet-2)}
.btn--lg{padding:16px 32px;font-size:1rem}

/* ---------- HERO sombre (toutes pages) ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  background:
    radial-gradient(1100px 700px at 72% 30%,rgba(166,107,152,.28),transparent 60%),
    radial-gradient(900px 600px at 8% 85%,rgba(74,36,80,.35),transparent 65%),
    linear-gradient(160deg,var(--deep) 0%,var(--ink) 70%);
  color:var(--text-light);
  padding:140px 0 80px;
  overflow:hidden;
}
.hero--page{min-height:88vh}
.hero__grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.hero__tag{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet-2);margin-bottom:18px;
}
.hero__tag::before{content:"";width:42px;height:1.5px;background:var(--violet-2)}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,3.6vw,3.4rem);
  line-height:1.08;letter-spacing:-.015em;
  margin-bottom:20px;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:inline-block;transform:translateY(115%);transition:transform 1.1s var(--ease-expo)}
.hero.is-in h1 .line > span{transform:translateY(0)}
.hero h1 .line:nth-child(2) > span{transition-delay:.1s}
.hero h1 .line:nth-child(3) > span{transition-delay:.2s}
.hero em, .em-shine{
  font-style:normal;
  background:linear-gradient(110deg,var(--violet-2) 10%,var(--glow) 50%,var(--violet-2) 90%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:200% center}}
.hero .lead{
  max-width:520px;font-size:1rem;font-weight:300;color:var(--text-light-mute);
  margin-bottom:30px;
  opacity:0;transform:translateY(24px);transition:opacity .9s ease .45s,transform .9s var(--ease-out) .45s;
}
.hero.is-in .lead{opacity:1;transform:none}
.hero__cta{
  display:flex;gap:18px;flex-wrap:wrap;
  opacity:0;transform:translateY(24px);transition:opacity .9s ease .6s,transform .9s var(--ease-out) .6s;
}
.hero.is-in .hero__cta{opacity:1;transform:none}
.hero__scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-light-mute);
  opacity:0;animation:fade-in 1s ease 1.6s forwards;
}
.hero__scroll i{
  width:1.5px;height:46px;background:linear-gradient(var(--violet-2),transparent);
  display:block;position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:#fff;animation:scroll-drip 2s var(--ease-out) infinite;
}
@keyframes scroll-drip{to{top:110%}}
@keyframes fade-in{to{opacity:1}}

/* Indice de scroll sur les pages scrollytelling : enfant de #heroText (donc il
   s'efface avec le hero au scroll). En desktop on le place à droite, au niveau
   du bouton ; en mobile il repasse sous le contenu, centré. */
.scrolly__hero .hero__scroll{
  position:absolute;left:auto;right:0;bottom:-8px;transform:none;
  margin:0;align-items:flex-end;
}
@media(max-width:1024px){
  .scrolly__hero .hero__scroll{
    position:static;right:auto;bottom:auto;
    align-items:center;margin-top:22px;
  }
}
/* Variante centrée (page création) : la ligne est hors de #heroText, donc elle
   ne peut pas hériter du fondu du titre. On neutralise son animation propre pour
   que le JS du scrollytelling puisse piloter son opacité et l'effacer en même
   temps que le titre. */
.hero__scroll--centered{animation:none;opacity:1}

/* Grille hero 2 colonnes (pages services) */
.hero__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.hero__visual{position:relative}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--ink);color:var(--text-light);
  padding:34px 0;overflow:hidden;position:relative;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee__inner{display:flex;gap:64px;width:max-content;animation:marquee 28s linear infinite}
.marquee:hover .marquee__inner{animation-play-state:paused}
.marquee__item{
  display:flex;align-items:center;gap:64px;
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);
  transition:color .4s,-webkit-text-stroke .4s;
  white-space:nowrap;
}
.marquee__item:hover{color:var(--violet-2);-webkit-text-stroke:1px var(--violet-2)}
.marquee__item .dot{width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections génériques ---------- */
.section{padding:88px 0;overflow-x:clip}
.cta-band{overflow-x:clip}
.section--lavender{background:linear-gradient(180deg,var(--lavender) 0%,var(--paper) 100%)}
.section--dark{
  background:linear-gradient(180deg,var(--ink),var(--deep) 130%);
  color:var(--text-light);position:relative;overflow:hidden;
}
.section--dark::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 500px at 85% 15%,rgba(166,107,152,.18),transparent 60%);
  pointer-events:none;
}
.section--dark > .container{position:relative;z-index:1}
.section--dark .tag{color:var(--violet-2)}
.section--dark .tag::before,.section--dark .tag::after{background:var(--violet-2)}
.section--dark p{color:var(--text-light-mute)}

.tag{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--violet);margin-bottom:22px;
}
.tag::before,.tag::after{content:"";width:34px;height:1.5px;background:var(--violet)}
.tag--left::after{display:none}
.tag--center{justify-content:center}

h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4vw,3.1rem);
  line-height:1.08;letter-spacing:-.015em;
  margin-bottom:28px;
}
h2 em{
  font-style:normal;color:var(--violet);position:relative;white-space:nowrap;
}
.section--dark h2 em{color:var(--violet-2)}
h2 em::after{
  content:"";position:absolute;left:0;bottom:.04em;width:100%;height:.14em;
  background:linear-gradient(90deg,var(--violet),var(--glow));
  border-radius:99px;opacity:.25;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-expo) .3s;
}
.reveal.is-in h2 em::after,
.is-in h2 em::after{transform:scaleX(1)}
/* Sur mobile/tablette, les expressions accentuées peuvent revenir à la ligne
   (sinon une longue expression en violet déborde et crée un scroll horizontal) */
@media (max-width:768px){ h2 em{white-space:normal} }
/* Sur petit écran, les titres ne doivent jamais être rognés :
   on autorise la césure (ne se déclenche que si un mot dépasse vraiment)
   et on réduit légèrement la taille sur les très petits écrans. */
@media (max-width:768px){
  h1,h2,h3,.scrolly__hero h1{overflow-wrap:break-word;hyphens:auto}
}
@media (max-width:400px){
  h2{font-size:clamp(1.55rem,6.6vw,1.9rem)}
}

.lead{font-size:1.05rem;color:var(--text-mute);max-width:560px}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center}
.section-head .lead{margin:0 auto}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .9s ease,transform .9s var(--ease-out)}
.reveal--left{transform:translateX(-46px) translateY(0)}
.reveal--right{transform:translateX(46px) translateY(0)}
/* Sur mobile, on révèle verticalement : un décalage horizontal créerait
   un débordement (scroll horizontal) tant que la section n'est pas vue */
@media (max-width:768px){
  .reveal--left,.reveal--right{transform:translateY(40px)}
}
.reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:.05s}
.reveal--d2{transition-delay:.15s}
.reveal--d3{transition-delay:.25s}
.reveal--d4{transition-delay:.35s}

/* ---------- Z-block ---------- */
.z-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.z-block__text p{color:var(--text-mute);margin-bottom:18px;font-size:1.02rem}
.section--dark .z-block__text p{color:var(--text-light-mute)}
.z-block__text p strong{color:inherit;font-weight:600}

.link-styled{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-weight:600;color:var(--violet);position:relative;
}
.link-styled .arrow{transition:transform .35s var(--ease-out)}
.link-styled::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:var(--violet);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.link-styled:hover::after{transform:scaleX(1);transform-origin:left}
.link-styled:hover .arrow{transform:translateX(5px)}

/* ---------- Vitre 3D décorative ---------- */
.glass-scene{
  position:relative;aspect-ratio:4/3.4;border-radius:var(--r-lg);
  background:
    radial-gradient(420px 320px at 70% 25%,rgba(251,217,184,.4),transparent 60%),
    radial-gradient(380px 300px at 20% 80%,rgba(166,107,152,.45),transparent 65%),
    linear-gradient(150deg,#3D1A3F,#2A1230);
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(42,18,48,.55);
  transform-style:preserve-3d;perspective:900px;
}
.glass-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.g-card{
  position:absolute;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:22px;color:#fff;
  will-change:transform;
  transition:transform .15s linear;
}
.g-card strong{font-family:var(--font-display);font-size:1rem;letter-spacing:.04em}
.g-card small{color:var(--text-light-mute);font-size:.78rem;line-height:1.4}
.g-card .g-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),#7A4670);
  box-shadow:none;margin-bottom:4px;
}
.g-card .g-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FBD9B8,var(--violet) 60%,#7A4670);
  box-shadow:none;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

/* ---------- Cartes services (tilt + lueur souris) ---------- */
.services-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{
  position:relative;border-radius:var(--r-md);
  background:#fff;
  border:1px solid var(--lavender-2);
  padding:46px 38px 42px;
  overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;
  transform-style:preserve-3d;will-change:transform;
}
.service-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),rgba(166,107,152,.12),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.service-card:hover::before{opacity:1}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 34px 70px -24px rgba(61,26,63,.3);
  border-color:rgba(166,107,152,.4);
}
.service-card__num{
  font-family:var(--font-display);font-weight:800;font-size:3.6rem;line-height:1;
  background:linear-gradient(180deg,rgba(166,107,152,.45),rgba(166,107,152,.05));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:26px;
}
.service-card h3{
  font-family:var(--font-display);font-weight:700;font-size:1.45rem;margin-bottom:16px;letter-spacing:-.01em;
}
.service-card p{color:var(--text-mute);margin-bottom:24px;font-size:.99rem}
.service-card > *{position:relative;z-index:1}

/* ---------- Méthode / timeline lumineuse ---------- */
.method{background:linear-gradient(180deg,var(--ink),var(--deep) 120%);color:var(--text-light);position:relative;overflow:hidden}
.method::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 500px at 85% 15%,rgba(166,107,152,.18),transparent 60%);
}
.method .tag{color:var(--violet-2)}
.method .tag::before,.method .tag::after{background:var(--violet-2)}
.method p.method-lead{color:var(--text-light-mute);max-width:560px;font-size:1.08rem;margin-bottom:80px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.timeline--4{grid-template-columns:repeat(4,1fr)}
.timeline::before{
  content:"";position:absolute;top:27px;left:3%;right:3%;height:2px;
  background:rgba(255,255,255,.1);border-radius:99px;
}
.timeline__fill{
  position:absolute;top:27px;left:3%;height:2px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--glow));
  box-shadow:none;
  border-radius:99px;
  transition:width 2.4s var(--ease-expo);
}
.timeline.is-in .timeline__fill{width:94%}
.tl-step{position:relative;padding-top:70px}
.tl-step__dot{
  position:absolute;top:18px;left:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--deep-2);border:2px solid rgba(255,255,255,.3);
  transition:background .5s,border-color .5s,box-shadow .5s,transform .5s var(--ease-out);
}
.timeline.is-in .tl-step__dot{
  background:radial-gradient(circle at 35% 30%,#fff,var(--violet) 70%);
  border-color:var(--violet-2);
  box-shadow:none;
  transform:scale(1.1);
}
.timeline.is-in .tl-step:nth-child(3) .tl-step__dot{transition-delay:.35s}
.timeline.is-in .tl-step:nth-child(4) .tl-step__dot{transition-delay:.7s}
.timeline.is-in .tl-step:nth-child(5) .tl-step__dot{transition-delay:1.05s}
.timeline.is-in .tl-step:nth-child(6) .tl-step__dot{transition-delay:1.4s}
.tl-step__phase{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet-2);display:block;margin-bottom:10px;
}
.tl-step h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:10px}
.tl-step p{font-size:.9rem;color:var(--text-light-mute);line-height:1.55}

/* ---------- Cartes "pourquoi" (icône + texte) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:54px}
.why-grid--3{grid-template-columns:repeat(3,1fr)}
.why-card{
  border-radius:var(--r-md);background:#fff;
  border:1px solid var(--lavender-2);
  padding:40px 36px;display:flex;gap:24px;align-items:flex-start;
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s;
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -22px rgba(61,26,63,.25);
  border-color:rgba(166,107,152,.35);
}
.why-card__icon{
  flex:none;width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(166,107,152,.14),rgba(242,167,107,.08));
  border:1px solid rgba(166,107,152,.25);
  color:var(--violet);
  transition:transform .45s var(--ease-out),background .45s,color .45s;
}
.why-card:hover .why-card__icon{transform:rotate(-8deg) scale(1.08);background:linear-gradient(135deg,var(--violet),#8E5484);color:#fff}
.why-card__icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-family:var(--font-display);font-weight:700;font-size:1.18rem;margin-bottom:10px;letter-spacing:-.01em}
.why-card p{color:var(--text-mute);font-size:.97rem}

/* ---------- Chips (zones, mots-clés) ---------- */
.area__chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{
  padding:10px 22px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--lavender-2);
  font-size:.92rem;font-weight:500;color:var(--text-mute);
  transition:all .35s var(--ease-out);
}
.chip:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(166,107,152,.4)}

/* ---------- Tarifs ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.price-card{
  position:relative;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--lavender-2);
  padding:46px 38px;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;
}
.price-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),rgba(166,107,152,.1),transparent 60%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.price-card:hover::before{opacity:1}
.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 70px -24px rgba(61,26,63,.28);
  border-color:rgba(166,107,152,.4);
}
.price-card > *{position:relative;z-index:1}
.price-card h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin-bottom:8px}
.price-card__price{
  font-family:var(--font-display);font-weight:800;font-size:2.5rem;line-height:1.1;
  color:var(--violet);margin-bottom:20px;
}
.price-card__price span{font-size:.9rem;font-weight:400;color:var(--text-mute);font-family:var(--font-body)}
.price-card p{color:var(--text-mute);font-size:.95rem;margin-bottom:24px}
.price-card__list{margin:0 0 28px}
.price-card__list li{
  position:relative;padding-left:30px;margin-bottom:12px;
  color:var(--text-mute);font-size:.95rem;line-height:1.5;
}
.price-card__list li::before{
  content:"";position:absolute;left:0;top:2px;width:18px;height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A66B98' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.price-card__badge{
  position:absolute;top:24px;right:24px;
  background:linear-gradient(135deg,var(--violet),#8E5484);
  color:#fff;padding:5px 16px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  box-shadow:0 8px 22px -8px rgba(166,107,152,.7);
  animation:badge-pulse 2.6s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{box-shadow:0 8px 22px -8px rgba(166,107,152,.7)}
  50%{box-shadow:0 8px 30px -4px rgba(242,167,107,.95)}
}
/* Carte mise en avant — verre sombre + orbe */
.price-card--featured{
  background:
    radial-gradient(560px 380px at 85% -10%,rgba(242,167,107,.4),transparent 60%),
    radial-gradient(460px 360px at 0% 110%,rgba(166,107,152,.35),transparent 60%),
    linear-gradient(150deg,var(--deep-2),var(--ink));
  border-color:rgba(242,167,107,.4);
  color:var(--text-light);
  box-shadow:0 40px 90px -30px rgba(42,18,48,.6);
}
.price-card--featured h3{color:#fff}
.price-card--featured p{color:var(--text-light-mute)}
.price-card--featured .price-card__price{color:var(--violet-2)}
.price-card--featured .price-card__price span{color:var(--text-light-mute)}
.price-card--featured .price-card__list li{color:var(--text-light-mute)}
.price-card--featured .price-card__list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A76B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.price-card--featured .btn--primary{background:#fff;color:var(--ink);box-shadow:0 10px 30px -8px rgba(255,255,255,.3)}
.price-card--featured .btn--primary:hover{background:var(--lavender)}
.price-card__orb{
  position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(251,217,184,.85),var(--violet) 55%,transparent 75%);
  filter:blur(44px);opacity:.4;
  top:-110px;right:-70px;z-index:0;
  animation:cta-drift 12s ease-in-out infinite alternate;
  pointer-events:none;
}

/* ---------- FAQ animée ---------- */
.faq{display:grid;gap:16px}
.faq__item{
  background:#fff;
  border:1px solid var(--lavender-2);
  border-radius:var(--r-sm);
  overflow:hidden;
  transition:border-color .4s,box-shadow .4s,transform .4s var(--ease-out);
}
.faq__item:hover{border-color:rgba(166,107,152,.35);transform:translateY(-2px)}
.faq__item[open]{
  border-color:var(--violet);
  box-shadow:0 24px 56px -24px rgba(61,26,63,.3);
}
.faq__question{
  padding:24px 30px;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:color .3s;
}
.faq__question::-webkit-details-marker{display:none}
.faq__question::after{
  content:"+";
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.2rem;font-weight:700;color:var(--violet);
  border:1.5px solid rgba(166,107,152,.3);
  transition:transform .45s var(--ease-out),background .3s,color .3s;
}
.faq__item[open] .faq__question::after{
  transform:rotate(135deg);
  background:var(--violet);color:#fff;border-color:var(--violet);
}
.faq__question:hover{color:var(--violet)}
.faq__answer{
  padding:0 30px 26px;
  color:var(--text-mute);font-size:.96rem;line-height:1.7;
}

/* ---------- Maillage interne ---------- */
.cross-links{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cross-link{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:28px 32px;
  border:1px solid var(--lavender-2);border-radius:var(--r-md);
  background:#fff;
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s;
}
.cross-link:hover{
  border-color:rgba(166,107,152,.45);
  box-shadow:0 28px 60px -22px rgba(61,26,63,.25);
  transform:translateY(-5px);
}
.cross-link h3{font-family:var(--font-display);font-size:1.08rem;font-weight:700;margin-bottom:5px}
.cross-link p{font-size:.9rem;color:var(--text-mute)}
.cross-link .arrow{color:var(--violet);font-size:1.4rem;flex:none;transition:transform .35s var(--ease-out)}
.cross-link:hover .arrow{transform:translateX(6px)}

/* ---------- CTA band ---------- */
.cta-band{padding:0 32px 90px}
.cta-band__inner{
  position:relative;max-width:1240px;margin:0 auto;
  border-radius:var(--r-lg);
  background:
    radial-gradient(700px 420px at 80% 0%,rgba(242,167,107,.35),transparent 60%),
    radial-gradient(600px 420px at 10% 100%,rgba(166,107,152,.3),transparent 60%),
    linear-gradient(150deg,var(--deep-2),var(--ink));
  color:var(--text-light);
  padding:64px 60px;text-align:center;overflow:hidden;
  box-shadow:0 50px 110px -40px rgba(42,18,48,.6);
}
.cta-band__orb{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(251,217,184,.9),var(--violet) 55%,transparent 75%);
  filter:blur(46px);opacity:.5;
  top:-120px;right:-80px;
  animation:cta-drift 12s ease-in-out infinite alternate;
}
@keyframes cta-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-60px,50px) scale(1.15)}
}
.cta-band h2{margin-bottom:12px}
.cta-band h2 em{color:var(--glow)}
.cta-band p{color:var(--text-light-mute);font-size:1.05rem;margin-bottom:30px}
.cta-band__inner > *{position:relative;z-index:1}
.cta-band .hero__cta{opacity:1;transform:none;justify-content:center}

/* ---------- Formulaire contact ---------- */
.contact-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:64px}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-group{margin-bottom:22px}
.form-group label{display:block;font-weight:600;font-size:.88rem;margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:15px 18px;
  border:1px solid var(--lavender-2);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:.95rem;color:var(--text-dark);
  background:#fff;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--violet);
  box-shadow:0 0 0 4px rgba(166,107,152,.14),0 12px 30px -14px rgba(166,107,152,.35);
}
.form-group textarea{resize:vertical;min-height:140px}
.contact-block{margin-bottom:30px}
.contact-block h3{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--violet);margin-bottom:8px;font-family:var(--font-display);
}
.contact-block p{color:var(--text-mute);font-size:.96rem}
.contact-block a{color:var(--violet);transition:color .3s}
.contact-block a:hover{color:var(--violet-2)}
.promise-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.promise-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.88);font-size:.84rem;font-weight:600;
}
.promise-badge::before{content:"✓";color:var(--glow);font-weight:800}
.alert{padding:16px 22px;border-radius:var(--r-sm);margin-bottom:22px;font-weight:500}
.alert--succes{background:#e2f8e9;color:#176b35;border:1px solid #bce8cb}
.alert--erreur{background:#fde6e9;color:#8d1f30;border:1px solid #f5c2cb}

/* ---------- Équipe / valeurs (à propos) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,420px));justify-content:center;gap:40px}
.team-card__photo{
  aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;
  margin-bottom:-60px;position:relative;z-index:0;
  box-shadow:0 30px 70px -28px rgba(42,18,48,.45);
}
.team-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.team-card:hover .team-card__photo img{transform:scale(1.04)}
.team-card__body{
  position:relative;z-index:1;margin:0 18px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(166,107,152,.16);
  border-radius:var(--r-md);padding:28px 26px;
  box-shadow:0 24px 54px -24px rgba(61,26,63,.3);
}
.team-card__body h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:4px}
.team-card__role{font-size:.85rem;color:var(--violet);font-weight:600;margin-bottom:12px}
.team-card__body p:last-child{color:var(--text-mute);font-size:.93rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--text-light-mute);padding:90px 0 40px;border-top:1px solid rgba(255,255,255,.06)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px;margin-bottom:70px}
.footer .logo{font-size:1.5rem}
.footer__brand p{margin-top:18px;font-size:.95rem;line-height:1.7}
.footer__brand a:hover{color:#fff}
.footer h4{
  font-family:var(--font-display);color:#fff;font-size:.95rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px;
}
.footer__col li{margin-bottom:12px}
.footer__col a{font-size:.95rem;transition:color .3s,padding-left .3s}
.footer__col a:hover{color:var(--violet-2);padding-left:6px}
.social-links{display:flex;gap:14px;margin-top:26px}
.social-links a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:var(--text-light-mute);
  transition:all .35s var(--ease-out);
}
.social-links a:hover{
  border-color:var(--violet);background:var(--violet);color:#fff;transform:translateY(-4px);
  box-shadow:0 12px 26px -10px rgba(166,107,152,.7);
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:32px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.86rem;
}

/* Variante claire des liens sociaux (page contact) */
.social-links--light a{border-color:var(--lavender-2);color:var(--text-mute)}

/* ---------- Prose (mentions légales) ---------- */
.prose h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:42px 0 14px}
.prose p,.prose li{color:var(--text-mute);margin-bottom:12px;font-size:.98rem}
.prose ul{padding-left:20px;list-style:disc}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .z-block{grid-template-columns:1fr;gap:50px}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .services-grid{grid-template-columns:1fr;max-width:560px}
  .pricing-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .timeline,.timeline--4{grid-template-columns:1fr;gap:0}
  .timeline::before,.timeline__fill{top:0;bottom:0;left:9px;right:auto;width:2px;height:auto}
  .timeline.is-in .timeline__fill{width:2px;height:100%}
  .tl-step{padding:0 0 44px 48px}
  .tl-step__dot{top:2px}
  .why-grid,.why-grid--3{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr;max-width:560px}
  .team-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .contact-layout{grid-template-columns:1fr;gap:48px}
  .cross-links{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0;z-index:7050;
    background:rgba(42,18,48,.96);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:34px;
    opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  }
  .nav-links.is-open{opacity:1;visibility:visible}
  .nav-links a{font-size:1.4rem;color:#fff}
  .burger{display:flex}
  /* Quand le menu est ouvert, on retire le backdrop-filter du header :
     sinon il crée un bloc de confinement qui empêche le menu (position:fixed)
     de couvrir tout l'écran dès qu'on a scrollé. */
  .site-header:has(.nav-links.is-open),
  .site-header.is-scrolled:has(.nav-links.is-open){
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  }
  .section{padding:72px 0}
  .cta-band__inner{padding:54px 28px}
  .footer__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:600px){
  .container,.container--wide,.container--narrow{padding:0 22px}
  /* Hero en colonne : le contenu déborde souvent l'écran en mobile et l'indice
     de scroll (en absolu) se posait par-dessus les boutons. On le passe dans le
     flux, en bas du contenu, sans chevauchement. */
  .hero{padding:130px 0 90px;flex-direction:column;justify-content:space-between}
  .hero > .hero__scroll{position:static;left:auto;bottom:auto;transform:none;margin-top:52px}
  .hero__cta .btn{width:100%;justify-content:center}
  .marquee__item{font-size:1.2rem}
  /* Cartes flottantes de la "scène" : en mobile la scène devient courte et les
     deux cartes (haut / bas) se chevauchaient. On donne une hauteur fixe et on
     épingle chaque carte en haut et en bas, plus larges et plus basses. */
  .glass-scene{aspect-ratio:auto !important;min-height:400px}
  .glass-scene .g-card{width:82% !important;padding:16px 18px;transform:none !important}
  .glass-scene .g-card[style*="top:"]{top:18px !important;bottom:auto !important;left:18px !important;right:auto !important}
  .glass-scene .g-card[style*="bottom:"]{bottom:18px !important;top:auto !important;right:18px !important;left:auto !important}
}

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero h1 .line > span{transform:none}
  .hero .lead,.hero__cta{opacity:1;transform:none}
  #hero-canvas{display:none}
}

/* ===== Réalisations — cartes avec aperçu live (iframe) ===== */
.real-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;margin:48px auto 0;max-width:860px}
.real-note{text-align:center;margin:26px auto 0;max-width:860px;font-size:.85rem;font-style:italic;color:var(--text-mute)}
.real-card{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--text-dark);background:var(--paper);border:1px solid rgba(166,107,152,.14);box-shadow:var(--ombre-md);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out)}
.real-card:hover{transform:translateY(-6px);box-shadow:var(--ombre-lg);border-color:rgba(166,107,152,.4)}
.real-card__frame{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.real-card__bar{position:absolute;top:0;left:0;right:0;height:24px;z-index:2;display:flex;align-items:center;gap:6px;padding-left:12px;background:linear-gradient(180deg,rgba(42,18,48,.92),rgba(42,18,48,.45))}
.real-card__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
.real-card__frame iframe{position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;border:0;pointer-events:none}
.real-card__body{display:flex;flex-direction:column;gap:5px;padding:18px 22px 22px}
.real-card__body strong{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.real-card__body small{color:var(--text-mute);font-size:.86rem;line-height:1.45}
.real-card__cta{margin-top:10px;color:var(--violet);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.real-card__cta .arrow{transition:transform .3s var(--ease-out)}
.real-card:hover .real-card__cta .arrow{transform:translateX(4px)}
@media(max-width:768px){.real-grid{grid-template-columns:1fr;gap:20px}}