/* ============================================================
   L'ATELIER DIGITAL — V3 · Expériences thématiques
   · Création de site  → navigateur interactif, builder, devices, code
   · Réseaux sociaux   → téléphone, stories cliquables, posts, reels, DM
   · SEO / SEA         → recherche Google, SERP, positions, dashboard
   S'appuie sur les variables de premium.css.
   ============================================================ */

:root{
  --wire:      #EBD8D0;
  --wire-2:    #E0C8C0;
  --wire-line: #C9ADA5;
  --blueprint: rgba(166,107,152,.10);
  --ring: linear-gradient(45deg,#A66B98 0%,#F2A76B 45%,#FBD9B8 75%,#FBD9B8 100%);
}

/* ============================================================
   1. PARTAGÉ
   ============================================================ */
.hero--grid-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 62% 38%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 62% 38%,#000 0%,transparent 75%);
  pointer-events:none;
}

.type-caret{
  display:inline-block;width:2px;height:1em;background:var(--violet);
  margin-left:2px;vertical-align:-.15em;
  animation:caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink{50%{opacity:0}}

.stat-pill{display:flex;flex-direction:column;gap:2px}
.stat-pill b{
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(1.4rem,2.4vw,2.1rem);color:var(--violet);
}
.stat-pill span{font-size:.82rem;color:var(--text-mute)}

/* ============================================================
   2. NAVIGATEUR & BUILDER — Création de site
   ============================================================ */
.browser{
  width:100%;border-radius:16px;background:var(--paper);
  box-shadow:0 40px 90px -30px rgba(42,18,48,.55);
  overflow:hidden;border:1px solid rgba(255,255,255,.1);
}
.browser__bar{
  display:flex;align-items:center;gap:12px;padding:.7rem 1rem;
  background:#F6EAE4;border-bottom:1px solid #F1DFD8;
}
.browser__dots{display:flex;gap:6px}
.browser__dots i{width:11px;height:11px;border-radius:50%;display:block}
.browser__dots i:nth-child(1){background:#ff6058}
.browser__dots i:nth-child(2){background:#ffbd2e}
.browser__dots i:nth-child(3){background:#28ca42}
.browser__url{
  flex:1;background:#fff;border-radius:999px;padding:.4rem .9rem;
  font-size:.8rem;color:var(--text-mute);border:1px solid #F1DFD8;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;
}
.browser__url b{color:var(--text-dark);font-weight:600}
.browser__lock{
  display:none;color:#1f9d4d;font-size:.75rem;font-style:normal;
}
.browser--live .browser__lock{display:inline}
.browser__live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#1f9d4d;
  opacity:0;transform:translateX(6px);transition:all .45s var(--ease-out);
  white-space:nowrap;
}
.browser__live::before{content:"";width:8px;height:8px;border-radius:50%;background:#28ca42}
.browser__view{position:relative;aspect-ratio:4/3.1;background:var(--paper);overflow:hidden}
.browser__view::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    linear-gradient(var(--blueprint) 1px,transparent 1px),
    linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:1;transition:opacity .45s var(--ease-out);
}
.browser--built .browser__view::before{opacity:0}

/* ---- Mini-site ---- */
.site{padding:14px;display:flex;flex-direction:column;gap:12px;height:100%}
.ms{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.ms--d1{transition-delay:.04s}
.ms--d2{transition-delay:.12s}
.ms--d3{transition-delay:.2s}
.ms--d4{transition-delay:.28s}
.blk{background:var(--wire);border-radius:6px;transition:background .5s var(--ease-out)}
.bar{height:8px;background:var(--wire-line);border-radius:999px;transition:background .5s var(--ease-out),width .5s var(--ease-out)}

.ms-nav{display:flex;align-items:center;justify-content:space-between}
.ms-nav__logo{width:56px;height:14px}
.ms-nav__links{display:flex;gap:8px;align-items:center}
.ms-nav__links .bar{width:26px}
.ms-nav__btn{width:50px;height:18px;border-radius:999px}

.ms-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center}
.ms-hero__copy{display:flex;flex-direction:column;gap:7px}
.ms-hero__tag{width:40px}
.ms-hero__h{height:13px}
.ms-hero__h.w1{width:90%}
.ms-hero__h.w2{width:65%}
.ms-hero__p{width:80%}
.ms-hero__btn{width:64px;height:22px;border-radius:999px;margin-top:4px}
.ms-hero__img{
  aspect-ratio:4/3;border-radius:8px;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}

.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ms-card{padding:9px;border-radius:8px;display:flex;flex-direction:column;gap:6px;background:var(--wire);transition:background .5s var(--ease-out)}
.ms-card__icon{width:18px;height:18px;border-radius:6px;background:var(--wire-2)}
.ms-card .bar.w1{width:80%}
.ms-card .bar.w2{width:55%}

.ms-cta{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;background:var(--wire);transition:background .5s var(--ease-out)}
.ms-cta__txt{width:45%;height:10px}
.ms-cta__btn{width:60px;height:20px;border-radius:999px;background:var(--wire-2)}

.ms-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:6px;background:var(--wire)}
.ms-footer .bar{width:60px;height:6px}

/* Contenu réel — n'apparaît qu'au stage "en ligne" */
.ms-real{display:none;font-family:var(--font-display);color:var(--text-dark)}
.ms-real--h{font-size:.78rem;font-weight:800;line-height:1.2}
.ms-real--p{font-family:var(--font-body);font-weight:400;font-size:.5rem;color:var(--text-mute);line-height:1.4}
.ms-real--btn{
  display:none;font-family:var(--font-body);font-weight:600;font-size:.5rem;color:#fff;
  background:linear-gradient(135deg,var(--violet),#8E5484);
  padding:4px 10px;border-radius:999px;width:max-content;margin-top:4px;
}
.ms-real--logo{font-size:.6rem;font-weight:800;color:var(--violet)}

/* États */
.site--built .ms{opacity:1;transform:none}
.site--built:not(.site--designed) .blk,
.site--built:not(.site--designed) .bar{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%;
  animation:wire-shimmer 1.5s linear infinite;
}
@keyframes wire-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.site--designed .ms-nav__logo,
.site--designed .ms-nav__btn,
.site--designed .ms-hero__tag,
.site--designed .ms-hero__btn,
.site--designed .ms-card__icon{background:linear-gradient(135deg,var(--violet),#8E5484)}
.site--designed .ms-nav__links .bar,
.site--designed .ms-card .bar{background:var(--text-mute)}
.site--designed .ms-hero__h{background:var(--text-dark)}
.site--designed .ms-hero__p{background:var(--gris-clair)}
.site--designed .ms-hero__img{background:linear-gradient(135deg,var(--violet) 0%,var(--deep) 100%)}
.site--designed .ms-card{background:var(--lavender-2)}
.site--designed .ms-cta{background:var(--ink)}
.site--designed .ms-cta__txt{background:rgba(255,255,255,.35)}
.site--designed .ms-cta__btn{background:var(--violet-2)}
.site--designed .ms-footer{background:var(--lavender-2)}

/* Stage final : le site "vit" — vrai contenu + image + https */
.site--live .ms-hero__h,
.site--live .ms-hero__p,
.site--live .ms-hero__btn.blk,
.site--live .ms-nav__logo{display:none}
.site--live .ms-real{display:block}
.site--live .ms-real--btn{display:inline-block}
.site--live .ms-hero__img{
  background-image:
    linear-gradient(160deg,rgba(166,107,152,.25),rgba(42,18,48,.05)),
    url("Images/Site/Conception de site web.webp");
}
.site--live .ms-hero__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:img-shine 2.6s var(--ease-out) .4s 2;
}
@keyframes img-shine{to{transform:translateX(120%)}}
.browser--live .browser__live{opacity:1;transform:none}
.browser--live .browser__live::before{animation:live-pulse 1.8s var(--ease-out) infinite}
.site--live .ms-real--btn{animation:btn-glow 2s var(--ease-out) infinite}
.browser--live{animation:pop .5s var(--ease-out)}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(40,202,66,.55)}
  70%{box-shadow:0 0 0 7px rgba(40,202,66,0)}
  100%{box-shadow:0 0 0 0 rgba(40,202,66,0)}
}
@keyframes btn-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(166,107,152,0)}
  50%{box-shadow:none}
}
@keyframes pop{
  0%{transform:scale(.992)}
  60%{transform:scale(1.006)}
  100%{transform:scale(1)}
}

/* ---- Blocs déplaçables (hero création) ---- */
[data-drag-scene] .ms{cursor:grab;touch-action:none}
[data-drag-scene] .ms.is-dragging{
  cursor:grabbing;transition:none;z-index:5;position:relative;
  filter:drop-shadow(0 14px 24px rgba(42,18,48,.35));
}
.drag-hint{
  position:absolute;bottom:14px;right:16px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  padding:7px 14px;border-radius:999px;border:1px solid var(--lavender-2);
  animation:hint-bob 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes hint-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* ---- Builder scrollytelling ---- */
.builder{position:relative;background:var(--paper);padding:96px 0 64px}
.builder__head{text-align:center;max-width:760px;margin:0 auto 64px}
.builder__head .tag{justify-content:center}
.builder__layout{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
.builder__canvas{position:sticky;top:90px;z-index:2}
.builder__canvas-inner{max-width:560px;margin:0 auto}
.builder__progress{
  height:4px;background:var(--lavender-2);border-radius:999px;
  margin-top:24px;overflow:hidden;
}
.builder__progress i{
  display:block;height:100%;width:var(--progress,0%);
  background:linear-gradient(90deg,var(--violet),var(--glow));
  box-shadow:none;
  border-radius:999px;transition:width .25s var(--ease-out);
}
.builder__steps{display:flex;flex-direction:column}
.builder__step{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.35;transition:opacity .45s var(--ease-out);
}
.builder__step.is-active{opacity:1}
.builder__step-num{
  font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.06em;
  color:var(--violet);display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
}
.builder__step-num::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--gris-clair);
  box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--gris-clair);
  transition:all .45s var(--ease-out);
}
.builder__step.is-active .builder__step-num::before{
  background:radial-gradient(circle at 35% 30%,#fff,var(--violet) 70%);
  box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--violet),0 0 18px 2px rgba(166,107,152,.4);
}
.builder__step h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:16px}
.builder__step p{color:var(--text-mute);max-width:460px}
@media (min-width:992px){
  .builder__layout{grid-template-columns:1fr 1.05fr;gap:96px}
  .builder__steps{order:1}
  .builder__canvas{order:2;top:120px}
  .builder__canvas-inner{margin:0}
}
@media (max-width:991px){
  .builder__canvas{top:64px;margin-bottom:32px}
  .builder__canvas-inner{max-width:420px}
  .builder__steps{position:relative;z-index:3}
  .builder__step{
    min-height:0;margin:34vh auto;max-width:460px;
    padding:24px 24px 32px;
    opacity:1;
    background:#FBF2EC;
    border:1px solid rgba(166,107,152,.14);
    border-radius:var(--r-md);
    box-shadow:0 16px 40px -14px rgba(61,26,63,.22);
    transition:box-shadow .45s var(--ease-out),border-color .45s,transform .45s var(--ease-out);
  }
  .builder__step:not(.is-active){transform:scale(.97)}
  .builder__step:not(.is-active) h3,
  .builder__step:not(.is-active) p,
  .builder__step:not(.is-active) .builder__step-num{opacity:.55}
  .builder__step:first-child{margin-top:6vh}
  .builder__step:last-child{margin-bottom:10vh}
  .builder__step h3{font-size:clamp(1.2rem,5vw,1.6rem)}
  .builder__step.is-active{box-shadow:0 34px 70px -24px rgba(61,26,63,.3);border-color:rgba(166,107,152,.4)}
}

/* ---- Multi-device ---- */
.devices{display:flex;align-items:flex-end;justify-content:center;gap:32px;flex-wrap:wrap}
.device{flex-shrink:0}
.device--laptop{width:min(560px,100%)}
.device--tablet{
  width:220px;border:8px solid var(--ink);border-radius:22px;
  background:var(--paper);overflow:hidden;
  box-shadow:0 34px 70px -24px rgba(42,18,48,.45);
}
.device--tablet .site{padding:10px;gap:8px}
.device--tablet .ms-hero{grid-template-columns:1fr}
.device--tablet .ms-hero__img{aspect-ratio:16/7}
.device--phone-frame{
  width:130px;border:7px solid var(--ink);border-radius:24px;
  background:var(--paper);overflow:hidden;position:relative;
  box-shadow:0 34px 70px -24px rgba(42,18,48,.45);
}
.device--phone-frame::before{
  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:38px;height:5px;border-radius:999px;background:var(--ink);z-index:2;
}
.device--phone-frame .site{padding:14px 8px 8px;gap:7px}
.device--phone-frame .ms-hero{grid-template-columns:1fr;gap:7px}
.device--phone-frame .ms-cards{grid-template-columns:1fr;gap:5px}
.device--phone-frame .ms-card{flex-direction:row;align-items:center;padding:6px}
.device--phone-frame .ms-hero__img{aspect-ratio:16/8}

/* ---- Éditeur de code + scores ---- */
.code-panel{
  background:var(--ink);
  border:1px solid rgba(242,167,107,.3);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.code-panel__bar{
  display:flex;align-items:center;gap:12px;padding:.65rem 1rem;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);
}
.code-panel__file{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;color:rgba(255,255,255,.55)}
.code-panel__body{
  padding:24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.78rem;line-height:1.9;color:rgba(255,255,255,.75);
  overflow-x:auto;white-space:nowrap;
}
.code-panel__body .ln{color:rgba(255,255,255,.22);display:inline-block;width:2ch;margin-right:1.2ch;text-align:right;user-select:none}
.code-panel__body .tg{color:var(--violet-2)}
.code-panel__body .at{color:#F6BE8F}
.code-panel__body .vl{color:var(--glow)}
.code-panel__body .cm{color:rgba(255,255,255,.32);font-style:italic}

.scores{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px}
@media (min-width:768px){.scores{grid-template-columns:repeat(4,1fr)}}
.score{text-align:center}
.score__ring{
  width:84px;height:84px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;
  background:
    radial-gradient(closest-side,var(--ink) 79%,transparent 80% 100%),
    conic-gradient(var(--violet-2) calc(var(--val,100)*1%),rgba(255,255,255,.08) 0);
  filter:drop-shadow(0 0 14px rgba(166,107,152,.35));
}
.score__label{font-size:.85rem;color:var(--text-light-mute)}

/* ---- Dashboard (graphique) ---- */
.dash{
  background:#fff;
  border:1px solid var(--lavender-2);
  border-radius:var(--r-md);
  box-shadow:0 34px 70px -24px rgba(61,26,63,.28);
  padding:32px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;
}
.dash::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),rgba(166,107,152,.1),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.dash:hover::before{opacity:1}
.dash:hover{border-color:rgba(166,107,152,.4);box-shadow:0 40px 90px -28px rgba(61,26,63,.36)}
.dash > *{position:relative;z-index:1}
.dash__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.dash__title{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--text-dark)}
.dash__delta{
  font-size:.8rem;font-weight:700;color:#1f9d4d;
  background:rgba(40,202,66,.1);padding:3px 12px;border-radius:999px;
  animation:delta-pulse 2.8s ease-in-out infinite;
}
@keyframes delta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(40,202,66,.25)}
  50%{box-shadow:0 0 0 5px rgba(40,202,66,0)}
}
.dash__chart{width:100%;height:auto;display:block}
.dash__chart .grid-line{stroke:#F4E6DF;stroke-width:1}
.dash__chart .curve{
  fill:none;stroke:url(#strokeGrad) var(--violet);stroke:var(--violet);
  stroke-width:3;stroke-linecap:round;
  stroke-dasharray:620;stroke-dashoffset:620;
  filter:drop-shadow(0 4px 8px rgba(166,107,152,.35));
}
.dash__chart .curve-fill{opacity:0;transition:opacity .8s var(--ease-out) .9s}
.reveal.is-in .dash__chart .curve{animation:draw-curve 1.6s var(--ease-out) .2s forwards}
.reveal.is-in .dash__chart .curve-fill{opacity:1}
.dash__chart .dot{fill:var(--violet);opacity:0;transition:opacity .4s var(--ease-out) 1.5s}
.reveal.is-in .dash__chart .dot{opacity:1;animation:dot-pulse 2s ease-in-out 1.8s infinite}
@keyframes dot-pulse{
  0%,100%{r:6}
  50%{r:8}
}
@keyframes draw-curve{to{stroke-dashoffset:0}}
.dash__axis{display:flex;justify-content:space-between;font-size:.68rem;color:var(--gris-clair);margin-top:6px}
.dash__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:24px;padding-top:24px;border-top:1px solid var(--lavender-2);
}
.dash__stats .stat-pill{text-align:center;align-items:center;min-width:0}
.dash__stats .stat-pill b{font-size:clamp(1.2rem,1.8vw,1.8rem)}
.dash__stats .stat-pill span{font-size:.74rem;line-height:1.35}

/* ============================================================
   3. TÉLÉPHONE / INSTAGRAM — Réseaux sociaux
   ============================================================ */
.phone-scene{position:relative;width:min(330px,88vw);margin:0 auto}
.phone{
  position:relative;width:100%;
  border:9px solid var(--ink);border-radius:38px;
  background:var(--paper);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(42,18,48,.6);
}
.phone::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:86px;height:22px;border-radius:999px;background:var(--ink);z-index:5;
}
.phone__screen{padding:44px 0 12px}

.ig-profile{padding:0 14px}
.ig-profile__top{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ig-avatar{width:64px;height:64px;border-radius:50%;padding:3px;background:var(--ring);flex-shrink:0}
.ig-avatar img,.ig-avatar span{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  border:2px solid var(--paper);object-fit:cover;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
}
.ig-profile__stats{display:flex;flex:1;justify-content:space-around;text-align:center}
.ig-profile__stats b{display:block;font-family:var(--font-display);font-size:.95rem;color:var(--text-dark)}
.ig-profile__stats span{font-size:.68rem;color:var(--text-mute)}
.ig-profile__bio{font-size:.74rem;line-height:1.5;color:var(--text-dark);margin-bottom:12px}
.ig-profile__bio b{display:block;font-weight:700}
.ig-profile__bio .lnk{color:var(--violet);font-weight:600}
.ig-profile__actions{display:flex;gap:6px;margin-bottom:12px}
.ig-profile__actions span{
  flex:1;text-align:center;font-size:.72rem;font-weight:700;padding:6px 0;border-radius:8px;
  background:linear-gradient(135deg,var(--violet),#8E5484);color:#fff;
}
.ig-profile__actions span + span{background:var(--lavender-2);color:var(--text-dark)}
.ig-highlights{display:flex;gap:10px;padding:2px 0 10px}
.ig-highlights figure{text-align:center;width:44px}
.ig-highlights i{display:block;width:40px;height:40px;margin:0 auto 3px;border-radius:50%;padding:2px;background:var(--ring)}
.ig-highlights i b{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;border:2px solid var(--paper);background:var(--lavender);font-size:.7rem;
}
.ig-highlights figcaption{font-size:.56rem;color:var(--text-mute)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid > *{aspect-ratio:1;overflow:hidden}
.ig-grid img{width:100%;height:100%;object-fit:cover}
.ig-grid .tile{
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,var(--violet) 0%,var(--deep) 100%);
}
.ig-grid .tile--soft{background:linear-gradient(135deg,var(--lavender-2),var(--lavender));color:var(--violet)}

.float-notif{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;background:rgba(251,242,236,.96);
  border:1px solid rgba(242,167,107,.35);border-radius:999px;
  box-shadow:0 16px 40px -14px rgba(42,18,48,.5);
  font-size:.78rem;font-weight:600;color:var(--text-dark);
  white-space:nowrap;z-index:6;
  animation:float 3.4s ease-in-out infinite;
}
.float-notif i{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--lavender);color:var(--violet);
  font-style:normal;font-size:.8rem;flex-shrink:0;
}
.float-notif--1{top:2.5%;right:-12%;animation-delay:0s}
.float-notif--2{top:42%;left:-22%;animation-delay:.8s}
.float-notif--3{bottom:10%;right:-12%;animation-delay:1.6s}

/* ---- Stories cliquables + visionneuse ---- */
.stories-strip{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap}
.story{
  text-align:center;width:92px;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);
}
.story__ring{
  width:72px;height:72px;margin:0 auto 8px;border-radius:50%;padding:3px;
  background:var(--ring);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.story:hover .story__ring{transform:scale(1.08)}
.story.is-active .story__ring{
  transform:scale(1.1);
  box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--violet),0 14px 34px -10px rgba(166,107,152,.6);
}
.story__ring i{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  border:3px solid var(--paper);background:var(--lavender);
  color:var(--violet);font-style:normal;font-size:1.35rem;
  transition:background .35s;
}
.story.is-active .story__ring i{background:#fff}
.story figcaption{font-size:.78rem;font-weight:600;color:var(--text-dark);line-height:1.3}

.story-viewer{
  max-width:560px;margin:40px auto 0;
  background:
    radial-gradient(420px 280px at 85% -10%,rgba(242,167,107,.35),transparent 60%),
    linear-gradient(150deg,var(--deep-2),var(--ink));
  color:var(--text-light);
  border-radius:var(--r-md);
  border:1px solid rgba(242,167,107,.35);
  box-shadow:0 40px 90px -30px rgba(42,18,48,.55);
  padding:26px 30px 30px;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
  pointer-events:none;
}
.story-viewer.is-open{opacity:1;transform:none;pointer-events:auto}
.story-viewer__bar{
  height:3px;background:rgba(255,255,255,.18);border-radius:999px;
  overflow:hidden;margin-bottom:18px;
}
.story-viewer__bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--violet-2),var(--glow));
}
.story-viewer.is-open .story-viewer__bar i{animation:story-progress 6s linear forwards}
@keyframes story-progress{to{width:100%}}
.story-viewer__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.story-viewer__head .ig-avatar{width:34px;height:34px;padding:2px}
.story-viewer__head .ig-avatar span{font-size:.6rem;border-width:1.5px}
.story-viewer__head b{font-size:.85rem}
.story-viewer__head span{font-size:.72rem;color:var(--text-light-mute)}
.story-viewer h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:8px}
.story-viewer p{font-size:.95rem;color:var(--text-light-mute);line-height:1.65}

/* ---- Post Instagram ---- */
.ig-post{
  background:#fff;border:1px solid var(--lavender-2);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 34px 70px -24px rgba(61,26,63,.3);
  max-width:430px;width:100%;
  transition:transform .5s var(--ease-out),box-shadow .5s;
}
.ig-post:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 44px 90px -28px rgba(61,26,63,.4)}
.ig-post__head{display:flex;align-items:center;gap:10px;padding:10px 14px}
.ig-post__head .ig-avatar{width:36px;height:36px;padding:2px}
.ig-post__head .ig-avatar span{font-size:.7rem;border-width:1.5px}
.ig-post__who{flex:1;line-height:1.25}
.ig-post__who b{display:block;font-size:.82rem;font-weight:700;color:var(--text-dark)}
.ig-post__who span{font-size:.7rem;color:var(--text-mute)}
.ig-post__more{color:var(--text-mute);font-weight:700;letter-spacing:1px}
.ig-post__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--lavender-2)}
.ig-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.ig-post:hover .ig-post__media img{transform:scale(1.04)}
.ig-post__heart{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4rem;opacity:0;transform:scale(.4);pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(42,18,48,.35));
}
.reveal.is-in .ig-post__heart{animation:heart-pop 1s var(--ease-out) .35s}
@keyframes heart-pop{
  0%{opacity:0;transform:scale(.4)}
  25%{opacity:1;transform:scale(1.15)}
  55%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
.ig-post__actions{display:flex;align-items:center;gap:14px;padding:10px 14px 4px;font-size:1.15rem}
.ig-post__actions .save{margin-left:auto}
.ig-post__likes{padding:0 14px;font-size:.8rem;font-weight:700;color:var(--text-dark)}
.ig-post__caption{padding:4px 14px 14px;font-size:.85rem;line-height:1.55;color:var(--text-dark)}
.ig-post__caption b{font-weight:700}
.ig-post__caption .tags{color:var(--violet)}

/* ---- Reels ---- */
.reels-row{display:grid;grid-template-columns:1fr;gap:24px;max-width:980px;margin:0 auto}
@media (min-width:768px){.reels-row{grid-template-columns:repeat(3,1fr)}}
.reel{
  position:relative;aspect-ratio:9/15;border-radius:var(--r-md);overflow:hidden;
  background:var(--deep);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.5);
  transition:transform .5s var(--ease-out),box-shadow .5s;
}
.reel:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 44px 90px -28px rgba(0,0,0,.6)}
.reel__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .8s var(--ease-out)}
.reel:hover .reel__bg{transform:scale(1.06)}
.reel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,18,48,.35) 0%,rgba(42,18,48,.05) 32%,rgba(42,18,48,.45) 58%,rgba(42,18,48,.95) 100%);
}
.reel__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(42,18,48,.55);backdrop-filter:blur(6px);
  padding:5px 10px;border-radius:999px;
}
.reel__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;
  background:rgba(251,242,236,.94);
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 10px rgba(251,242,236,.15)}
.reel__play::after{
  content:"";margin-left:4px;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--violet);
}
.reel__side{
  position:absolute;right:10px;bottom:70px;z-index:2;
  display:flex;flex-direction:column;gap:14px;text-align:center;
  color:#fff;font-size:.68rem;font-weight:600;
}
.reel__side i{font-style:normal;display:block;font-size:1.25rem;margin-bottom:2px}
.reel__meta{position:absolute;left:14px;right:56px;bottom:14px;z-index:2;color:#fff}
.reel__meta b{font-family:var(--font-display);font-size:1rem;display:block;margin-bottom:4px}
.reel__meta span{font-size:.78rem;opacity:.85;line-height:1.4;display:block}

/* ---- Conversation DM ---- */
.dm-thread{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.dm{display:flex;gap:10px;align-items:flex-end;max-width:86%}
.dm--in{align-self:flex-start}
.dm--out{align-self:flex-end;flex-direction:row-reverse}
.dm .ig-avatar{width:30px;height:30px;padding:2px;flex-shrink:0}
.dm .ig-avatar span{font-size:.55rem;border-width:1px}
.dm__bubble{
  padding:16px 24px;border-radius:20px;
  font-size:.95rem;line-height:1.6;
  box-shadow:0 10px 26px -12px rgba(42,18,48,.25);
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.dm:hover .dm__bubble{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(42,18,48,.35)}
.dm--in .dm__bubble{
  background:#fff;border:1px solid var(--lavender-2);
  border-bottom-left-radius:6px;color:var(--text-dark);
}
.dm--out .dm__bubble{
  background:linear-gradient(135deg,var(--violet),#8E5484);
  color:#fff;border-bottom-right-radius:6px;
}
.dm__bubble b{display:block;font-family:var(--font-display);margin-bottom:4px}
.dm--in .dm__bubble b{color:var(--violet)}
.dm__step{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.75;display:block;margin-bottom:2px;
}
.dm__typing{display:inline-flex;gap:4px;padding:4px 2px}
.dm__typing i{width:7px;height:7px;border-radius:50%;background:var(--gris-clair);animation:typing-dot 1.2s ease-in-out infinite}
.dm__typing i:nth-child(2){animation-delay:.15s}
.dm__typing i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-4px);opacity:1}
}

/* ============================================================
   4. GOOGLE / SERP — SEO & SEA
   ============================================================ */
.gwin{
  width:100%;background:var(--paper);
  border-radius:var(--r-md);
  box-shadow:0 40px 90px -30px rgba(42,18,48,.55);
  overflow:hidden;border:1px solid rgba(255,255,255,.1);
}
.gwin__head{padding:24px 24px 0}
.gwin__logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--text-dark);margin-bottom:16px}
.gwin__logo span{color:var(--violet)}
.gsearch{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #F1DFD8;border-radius:999px;
  padding:.7rem 1.1rem;box-shadow:0 4px 14px rgba(42,18,48,.07);
  font-size:.9rem;color:var(--text-dark);
}
.gsearch svg{flex-shrink:0;color:var(--text-mute)}
.gsearch__q{font-weight:600;white-space:nowrap;overflow:hidden}
.gwin__tabs{
  display:flex;gap:24px;padding:16px 8px 0;font-size:.78rem;color:var(--text-mute);
  border-bottom:1px solid #F4E6DF;margin:0 8px;
}
.gwin__tabs b{color:var(--violet);font-weight:600;padding-bottom:8px;border-bottom:2px solid var(--violet)}
.gwin__tabs span{padding-bottom:8px}
.gwin__results{padding:16px 24px 24px;display:flex;flex-direction:column;gap:12px}
.serp{
  position:relative;padding:12px 16px;border-radius:var(--r-sm);
  transition:transform .35s var(--ease-out),box-shadow .35s,background .35s;
}
.serp:hover{transform:translateX(4px)}
.serp__site{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.serp__fav{
  width:18px;height:18px;border-radius:50%;background:var(--lavender-2);
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;font-weight:800;color:var(--violet);flex-shrink:0;
}
.serp__url{font-size:.68rem;color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.serp__title{font-size:.95rem;font-weight:600;color:#8E5484;line-height:1.3;margin-bottom:2px}
.serp__desc{font-size:.75rem;color:var(--text-mute);line-height:1.5}
.serp--you{
  background:var(--lavender);
  border:1.5px solid var(--violet);
  box-shadow:none;
}
.serp--you:hover{box-shadow:none}
.serp--you .serp__title{color:var(--violet);font-weight:700}
.serp--you .serp__fav{background:linear-gradient(135deg,var(--violet),#8E5484);color:#fff}
.serp__pos{
  position:absolute;top:-10px;right:14px;
  background:linear-gradient(135deg,var(--violet),#8E5484);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  padding:3px 10px;border-radius:999px;
  box-shadow:0 8px 22px -6px rgba(166,107,152,.7);
  animation:badge-pulse 2.6s ease-in-out infinite;
}
.serp--ad .serp__title{color:var(--text-dark)}
.serp__adlabel{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  color:var(--text-dark);border:1px solid var(--gris-clair);border-radius:4px;
  padding:0 5px;margin-right:6px;vertical-align:1px;
}
.serp--dim{opacity:.55}
.serp-note{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);padding:2px 16px 6px;
}
.serp-note::before{content:"";width:22px;height:2px;background:var(--violet);border-radius:2px}

/* Mots-clés locaux */
.kw-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:880px;margin:0 auto}
.kw{
  display:inline-flex;align-items:center;gap:8px;
  padding:.6rem 1.2rem;border-radius:999px;
  border:1px solid var(--lavender-2);background:#fff;
  font-size:.88rem;font-weight:500;color:var(--text-dark);
  transition:all .35s var(--ease-out);
  animation:kw-bob 5s ease-in-out infinite;
}
.kw:nth-child(2n){animation-delay:-1.4s}
.kw:nth-child(3n){animation-delay:-2.8s}
.kw:nth-child(5n){animation-delay:-3.6s}
@keyframes kw-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.kw:hover{
  border-color:var(--violet);
  box-shadow:0 14px 32px -12px rgba(166,107,152,.45);
  transform:translateY(-5px) scale(1.03);
  animation-play-state:paused;
}
.kw b{
  font-family:var(--font-display);font-size:.7rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--violet),#8E5484);
  border-radius:999px;padding:2px 8px;
}
.kw b.up{background:#1f9d4d}

/* ============================================================
   5. PILIERS interactifs (RS + SEO) & mini-mockups Home
   ============================================================ */
.pillars-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.pillars-grid{grid-template-columns:1fr 1fr}}
@media (min-width:992px){.pillars-grid--3{grid-template-columns:repeat(3,1fr)}}
.pillar-card{
  position:relative;padding:36px 32px;
  background:#fff;border:1px solid var(--lavender-2);
  border-left:3px solid var(--violet);
  border-radius:6px var(--r-md) var(--r-md) 6px;
  overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;
}
.pillar-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),rgba(166,107,152,.12),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.pillar-card:hover::before{opacity:1}
.pillar-card:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 70px -24px rgba(61,26,63,.3);
  border-color:rgba(166,107,152,.45);
  border-left-color:var(--violet);
}
.pillar-card > *{position:relative;z-index:1}
.pillar-card__num{
  font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1;
  background:linear-gradient(180deg,rgba(166,107,152,.5),rgba(166,107,152,.08));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:12px;
  transition:transform .5s var(--ease-out);
}
.pillar-card:hover .pillar-card__num{transform:scale(1.12) translateX(2px)}
.pillar-card h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:10px}
.pillar-card p{color:var(--text-mute);font-size:.95rem}

/* Mini-mockups dans les cartes services (Home) */
.service-card__mock{
  position:relative;height:150px;border-radius:var(--r-sm);overflow:hidden;
  margin-bottom:26px;
  background:linear-gradient(160deg,var(--lavender) 0%,var(--lavender-2) 100%);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.mini-browser{
  width:78%;background:var(--paper);border-radius:8px 8px 0 0;
  box-shadow:0 16px 40px -14px rgba(61,26,63,.3);
  transform:translateY(8px);transition:transform .45s var(--ease-out);
}
.service-card:hover .mini-browser{transform:translateY(2px)}
.mini-browser__bar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #F4E6DF}
.mini-browser__bar i{width:6px;height:6px;border-radius:50%;background:var(--gris-clair)}
.mini-browser__bar i:first-child{background:var(--violet)}
.mini-browser__body{padding:8px;display:flex;flex-direction:column;gap:5px}
.mini-browser__body .bar{height:6px}
.mini-browser__body .bar:nth-child(1){width:55%;background:var(--text-dark)}
.mini-browser__body .bar:nth-child(2){width:80%}
.mini-browser__body .pill{width:34px;height:11px;border-radius:999px;background:linear-gradient(135deg,var(--violet),#8E5484)}
.mini-phone{
  width:44%;background:var(--paper);
  border:4px solid var(--ink);border-bottom:none;border-radius:14px 14px 0 0;
  box-shadow:0 16px 40px -14px rgba(61,26,63,.3);
  padding:8px 6px 0;transform:translateY(10px);transition:transform .45s var(--ease-out);
}
.service-card:hover .mini-phone{transform:translateY(3px)}
.mini-phone__stories{display:flex;gap:4px;margin-bottom:6px}
.mini-phone__stories i{width:12px;height:12px;border-radius:50%;background:var(--ring)}
.mini-phone__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mini-phone__grid i{aspect-ratio:1;border-radius:2px;background:var(--lavender-2)}
.mini-phone__grid i:nth-child(1){background:var(--violet)}
.mini-phone__grid i:nth-child(5){background:var(--violet-2)}
.mini-phone__grid i:nth-child(6){background:var(--ink)}
.mini-serp{
  width:78%;background:var(--paper);border-radius:8px 8px 0 0;
  box-shadow:0 16px 40px -14px rgba(61,26,63,.3);
  padding:8px;display:flex;flex-direction:column;gap:5px;
  transform:translateY(8px);transition:transform .45s var(--ease-out);
}
.service-card:hover .mini-serp{transform:translateY(2px)}
.mini-serp__search{
  display:flex;align-items:center;gap:5px;
  border:1px solid #F1DFD8;border-radius:999px;padding:4px 8px;
  font-size:.55rem;color:var(--text-mute);white-space:nowrap;overflow:hidden;
}
.mini-serp__search::before{
  content:"";width:7px;height:7px;border:1.5px solid var(--violet);border-radius:50%;flex-shrink:0;
}
.mini-serp__hit{border-radius:6px;padding:5px 7px;display:flex;flex-direction:column;gap:3px}
.mini-serp__hit .bar{height:5px}
.mini-serp__hit--you{background:var(--lavender);border:1px solid var(--violet)}
.mini-serp__hit--you .bar:first-child{background:var(--violet);width:70%}
.mini-serp__hit--you .bar:last-child{width:90%}
.mini-serp__hit--dim{opacity:.5}
.mini-serp__hit--dim .bar:first-child{width:60%}

/* ============================================================
   6. RESPONSIVE & ACCESSIBILITÉ
   ============================================================ */
@media (max-width:768px){
  .float-notif--1{right:-4%}
  .float-notif--2{left:-6%}
  .float-notif--3{right:-2%}
  .devices{gap:24px}
  .device--tablet{width:180px}
  .device--phone-frame{width:110px}
  .dash{padding:24px}
  .dm{max-width:95%}
  .story{width:80px}
}
@media (prefers-reduced-motion:reduce){
  .site .ms{opacity:1 !important;transform:none !important}
  .browser__view::before{opacity:0 !important}
  .builder__canvas{position:static}
  .builder__step{opacity:1 !important;min-height:auto;margin-bottom:48px}
  .float-notif,.kw,
  .reveal.is-in .ig-post__heart,
  .dm__typing i,
  .drag-hint{animation:none !important}
  .reveal.is-in .dash__chart .curve{animation:none;stroke-dashoffset:0}
  .reveal.is-in .dash__chart .curve-fill{opacity:1}
  .story-viewer{opacity:1;transform:none;pointer-events:auto}
}