/* SITE VITRINE — blocs propres à la page (24/10/2026). Histoire : « votre bureau est fermé, votre vitrine, elle, accueille ».
   Pôle Création (violet) ; mercure en plis, lissé en soie dans le hero. */

/* ---------- La devanture : quatre vitres givrées qui se dégivrent, une enseigne qui s'allume ----------
   data-vitres sur la section : nombre de vitres claires (0 à 4). Sans JavaScript : 4, tout est visible. */
.v-devanture__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start}
.v-devanture__scene{position:sticky;top:clamp(80px,12vh,140px)}
.v-devanture{padding:22px;border:1px solid var(--w-filet-fort);border-radius:28px;background:linear-gradient(180deg,#11131A,#0A0B0E)}
.v-enseigne{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 18px}
.v-enseigne__heure{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris);font-variant-numeric:tabular-nums}
.v-enseigne__neon{padding:8px 16px;border-radius:999px;border:1px solid var(--w-filet-fort);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w-gris-doux);transition:color .8s,border-color .8s,box-shadow .8s,text-shadow .8s}
[data-vitres="4"] .v-enseigne__neon{color:#F7FAFF;border-color:var(--pole);box-shadow:0 0 0 1px var(--pole),0 0 32px -4px var(--pole),inset 0 0 18px -6px var(--pole);text-shadow:0 0 12px var(--pole)}
.v-vitres{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;isolation:isolate}
.v-vitres canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.v-vitre{position:relative;display:flex;align-items:flex-end;padding:18px;border-radius:12px;outline:1px solid rgba(220,229,242,.16);overflow:hidden}
.v-vitre::before{content:"";position:absolute;inset:0;background:rgba(14,16,22,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity 1.2s var(--w-ease)}
.v-vitre em{position:relative;font-style:normal;font-size:clamp(16px,1.3vw,20px);font-weight:600;color:var(--w-gris-doux);transition:color .8s}
[data-vitres="1"] [data-vitre="1"]::before,[data-vitres="2"] [data-vitre="1"]::before,[data-vitres="2"] [data-vitre="2"]::before,
[data-vitres="3"] [data-vitre="1"]::before,[data-vitres="3"] [data-vitre="2"]::before,[data-vitres="3"] [data-vitre="3"]::before,
[data-vitres="4"] .v-vitre::before{opacity:0}
[data-vitres="1"] [data-vitre="1"] em,[data-vitres="2"] [data-vitre="1"] em,[data-vitres="2"] [data-vitre="2"] em,
[data-vitres="3"] [data-vitre="1"] em,[data-vitres="3"] [data-vitre="2"] em,[data-vitres="3"] [data-vitre="3"] em,
[data-vitres="4"] .v-vitre em{color:#F7FAFF;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.v-devanture__legende{margin:18px 6px 2px;font-size:15px;color:var(--w-gris)}
.v-besoins{list-style:none;margin:0;padding:0}
.v-besoins li{min-height:clamp(320px,52vh,520px);opacity:.3;transition:opacity .6s var(--w-ease)}
.v-besoins li.est-actif{opacity:1}
.v-besoins__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--pole)}
.v-besoins h3{margin:16px 0 14px;max-width:22ch;font-size:clamp(24px,2.1vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.v-besoins p{margin:0;max-width:46ch;font-size:16.5px;line-height:1.65;color:var(--w-gris)}

/* ---------- Chiffres : des nombres qui se remplissent de mercure, du bas vers le haut ----------
   24/10 (Raphaël : « réduire, que ce soit clean ») : taille réduite, et le remplissage va jusqu'en haut
   (plus de chiffre à moitié fantôme). */
@property --niveau{syntax:'<percentage>';inherits:true;initial-value:100%}
.v-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin:0}
.v-chiffres > div{--niveau:100%;display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:1px solid var(--w-filet)}
.v-chiffres dd{margin:0;font-size:clamp(48px,4.4vw,76px);font-weight:400;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(0deg,var(--pole) 0%,#F7FAFF var(--niveau),rgba(220,229,242,.1) var(--niveau));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.v-chiffres dt{max-width:30ch;font-size:16px;line-height:1.55;color:var(--w-gris)}
.v-chiffres small{display:block;margin-top:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--w-gris-doux)}

/* ---------- Étagère : six propositions qui défilent doucement (pause au survol) ---------- */
.v-etagere{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.v-etagere__piste{list-style:none;margin:0;padding:0 0 8px;display:flex;gap:16px;width:max-content;animation:v-etagere 55s linear infinite}
.v-etagere:hover .v-etagere__piste{animation-play-state:paused}
@keyframes v-etagere{to{transform:translateX(-50%)}}
.v-etagere__piste li{flex:none;width:clamp(280px,24vw,360px);min-height:260px;padding:30px;box-sizing:border-box;border-radius:22px;border:1px solid var(--w-filet);background:linear-gradient(170deg,rgba(220,229,242,.05),rgba(220,229,242,.01));display:flex;flex-direction:column;transition:border-color .4s,transform .4s var(--w-ease)}
.v-etagere__piste li:hover{border-color:var(--pole-filet);transform:translateY(-6px)}
.v-etagere__piste span{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--pole)}
.v-etagere__piste h3{margin:auto 0 12px;padding-top:40px;font-size:22px;font-weight:500;letter-spacing:-.015em}
.v-etagere__piste p{margin:0;font-size:15px;line-height:1.6;color:var(--w-gris)}

/* ---------- Pour qui : une phrase, trois mots qui s'ouvrent ---------- */
.v-pourqui{margin:0;max-width:26ch;font-size:clamp(34px,3.6vw,64px);font-weight:400;letter-spacing:-.025em;line-height:1.25;color:var(--w-gris)}
.v-mot{position:relative;display:inline;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--w-blanc);cursor:pointer;
  background-image:linear-gradient(var(--pole),var(--pole));background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--w-ease)}
.v-mot:hover,.v-mot:focus-visible,.v-mot[aria-expanded="true"]{background-size:100% 100%;color:#F7FAFF}
.v-mot__bulle{position:absolute;left:0;top:calc(100% + 12px);z-index:3;width:max-content;max-width:300px;padding:14px 16px;border-radius:14px;border:1px solid var(--pole-filet);background:#12141B;
  font-size:15px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--w-gris);text-align:left;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .3s var(--w-ease),visibility 0s .3s}
.v-mot:hover .v-mot__bulle,.v-mot:focus-visible .v-mot__bulle,.v-mot[aria-expanded="true"] .v-mot__bulle{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s var(--w-ease)}

/* ---------- Méthode : trois vitres qui s'éclairent l'une après l'autre ---------- */
.v-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.v-phase{position:relative;padding:32px 30px 36px;border-radius:22px;border:1px solid var(--w-filet);overflow:hidden;isolation:isolate}
.v-phase::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--pole-doux),transparent 70%);transform:translateY(100%);transition:transform 1.2s var(--w-ease)}
.v-phase.est-claire::before{transform:none}
.v-phase.est-claire{border-color:var(--pole-filet)}
.v-phase h3{margin:0 0 20px;font-size:clamp(22px,1.7vw,28px);font-weight:500;letter-spacing:-.015em}
.v-phase ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v-phase li{display:grid;grid-template-columns:26px minmax(0,1fr);font-size:16px;line-height:1.55;color:var(--w-gris)}
.v-phase li span{font-weight:600;color:var(--w-blanc)}

/* ---------- Projets : trois vrais sites vitrines ---------- */
.v-projets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.v-projets a{display:block;color:var(--w-blanc);text-decoration:none}
.v-projets figure{margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--w-filet)}
.v-projets img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--w-ease)}
.v-projets a:hover img{transform:scale(1.05)}
.v-projets h3{margin:18px 0 6px;font-size:20px;font-weight:600}
.v-projets p{margin:0;font-size:14px;color:var(--w-gris)}

@media (max-width:1100px){
  .v-devanture__grille{grid-template-columns:1fr}
  .v-devanture__scene{position:relative;top:0}
  .v-besoins li{min-height:0;padding:28px 0;opacity:1}
  .v-chiffres,.v-phases,.v-projets{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.v-etagere__piste{animation:none;flex-wrap:wrap;width:auto}}
.v-pourqui .insecable{white-space:nowrap}

/* Pour qui v2 (24/10, Raphaël : « qu'est-ce qu'il se passe ici ») : les mots s'allument à tour de rôle,
   leur description apparaît en grand dessous ; une barre montre le temps avant le mot suivant. */
.v-pourqui{max-width:30ch;text-wrap:balance;color:var(--w-gris-doux)}
.v-mot{background-size:100% 2px!important;color:var(--w-gris)}
.v-mot.est-allume{background-size:100% 100%!important;color:#F7FAFF;border-radius:4px}
.v-mot__bulle{display:none}
.v-pourqui__reponse{position:relative;min-height:2.6em;margin-top:clamp(28px,3vw,48px);font-size:clamp(24px,2.2vw,36px);font-weight:400;letter-spacing:-.015em;line-height:1.3}
.v-pourqui__reponse p{position:absolute;left:0;top:0;margin:0;max-width:34ch;color:#E6DCFF;opacity:0;transform:translateY(14px);transition:opacity .6s var(--w-ease),transform .8s var(--w-ease)}
.v-pourqui__reponse p.est-la{opacity:1;transform:none}
.v-pourqui__temps{display:block;width:160px;height:3px;margin-top:20px;border-radius:2px;background:var(--w-filet)}
.v-pourqui__temps i{display:block;height:100%;width:0;border-radius:2px;background:var(--pole)}
.v-pourqui__temps i.court{animation:v-temps 3.6s linear forwards}
@keyframes v-temps{to{width:100%}}
@media (prefers-reduced-motion:reduce){.v-pourqui__reponse p{position:static;opacity:1;transform:none;margin-bottom:8px}.v-pourqui__temps{display:none}}
.v-pourqui{max-width:34ch}

/* ---------- Ce que nous vous proposons : le site se construit (24/10, remplace l'étagère qui défilait) ----------
   data-etape 1 → 6, cumulatif : 1 la mise en page sur mesure · 2 le résultat Google · 3 la version mobile ·
   4 le parcours (curseur, bouton mis en avant) · 5 les contenus (photo, textes) · 6 les nouvelles rubriques (Blog, Boutique). */
.v-chantier{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.v-chantier__offres{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-filet)}
.v-chantier__offres li{border-bottom:1px solid var(--w-filet)}
.v-chantier__offres button{display:flex;align-items:baseline;gap:18px;width:100%;padding:18px 0 6px;border:0;background:none;color:rgba(247,250,255,.5);font:500 clamp(19px,1.5vw,24px)/1.25 "Plus Jakarta Sans",system-ui,sans-serif;text-align:left;cursor:pointer;transition:color .35s}
.v-chantier__offres button span{flex:none;width:26px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--w-gris-doux);transition:color .35s}
.v-chantier__offres p{margin:0;padding:0 0 0 44px;max-height:0;overflow:hidden;opacity:0;font-size:15px;line-height:1.55;color:var(--w-gris);transition:max-height .5s var(--w-ease),opacity .4s,padding .5s}
.v-chantier__offres li.est-actif button,.v-chantier__offres button:hover{color:#F7FAFF}
.v-chantier__offres li.est-actif button span{color:var(--pole)}
.v-chantier__offres li.est-actif p{max-height:90px;opacity:1;padding-bottom:18px}
.v-chantier__scene{position:relative;padding-top:74px}
.v-google{position:absolute;left:0;top:0;width:min(78%,440px);padding:12px 16px;border-radius:12px;background:#F7FAFF;color:#1C1E24;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s var(--w-ease);z-index:2}
.v-google small{display:block;font-size:11px;color:#4A5367}.v-google b{display:block;margin:2px 0;font-size:15px;color:#1A47C9}.v-google span{font-size:12px;color:#4A5367}
.v-navigateur{width:100%;margin-left:auto;border-radius:16px;overflow:hidden;border:1px solid var(--w-filet-fort);background:#0C0D11;box-shadow:0 50px 100px -50px rgba(0,0,0,.95);transition:width .9s var(--w-ease)}
.v-navigateur__barre{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#15171D;border-bottom:1px solid var(--w-filet)}
.v-navigateur__barre i{width:9px;height:9px;border-radius:50%;background:#2A2E39}
.v-navigateur__barre p{margin:0 auto;padding:3px 12px;border-radius:999px;background:#0C0D11;font-size:11px;color:var(--w-gris)}
.v-site{position:relative;display:flex;flex-direction:column;gap:16px;padding:18px 22px 24px;min-height:330px;background:#F4F5F7;color:#1C1E24;transition:background .6s}
.v-site__nav{display:flex;align-items:center;gap:16px;font-size:12px;color:#4A5367}
.v-site__nav b{margin-right:auto;font-size:13px;color:#1C1E24}
.v-site__nav em{font-style:normal;padding:6px 12px;border-radius:999px;background:#1C1E24;color:#fff}
.v-site__plus{display:none}
.v-site__hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.v-site__hero > div{display:flex;flex-direction:column;gap:9px}
.v-ligne{display:block;height:9px;width:90%;border-radius:5px;background:#D5D9E0;transition:background .6s,width .6s}
.v-ligne--titre{height:16px;background:#BFC5CF}.v-ligne--court{width:60%}
.v-site__cta{align-self:flex-start;margin-top:6px;padding:9px 14px;border-radius:999px;background:#BFC5CF;color:transparent;font-size:12px;font-weight:700;transition:background .5s,color .5s,box-shadow .5s,transform .4s}
.v-site__photo{display:block;aspect-ratio:4/3;border-radius:10px;background:#D5D9E0;transition:background .8s}
.v-site__cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v-site__cartes span{height:62px;border-radius:9px;background:#E3E6EB;transition:background .6s}
.v-site__curseur{position:absolute;left:40%;top:70%;width:18px;height:18px;opacity:0;transition:opacity .4s,left 1s var(--w-ease),top 1s var(--w-ease);
  background:conic-gradient(from 200deg at 30% 20%,#0E1016 0 40deg,transparent 40deg);clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,64% 94%,44% 66%,80% 64%)}
/* 1 · la mise en page sur mesure : la couleur de la marque entre */
.v-chantier[data-etape] .v-site{background:#F7F4EF}
.v-chantier[data-etape] .v-ligne--titre{background:#2A1468}
.v-chantier[data-etape] .v-site__cartes span{background:color-mix(in srgb,#7A3BFF 14%,#fff)}
/* 2 · le résultat Google */
.v-chantier:not([data-etape="1"]) .v-google{opacity:1;transform:none}
/* 3 · la version mobile : la fenêtre se resserre, puis revient */
.v-chantier[data-etape="3"] .v-navigateur{width:44%}
.v-chantier[data-etape="3"] .v-site__hero{grid-template-columns:1fr}
.v-chantier[data-etape="3"] .v-site__cartes{grid-template-columns:1fr}
.v-chantier[data-etape="3"] .v-site__nav span{display:none}
/* 4 · le parcours : le curseur va au bouton, qui s'allume */
.v-chantier[data-etape="4"] .v-site__curseur,.v-chantier[data-etape="5"] .v-site__curseur,.v-chantier[data-etape="6"] .v-site__curseur{opacity:1;left:16%;top:47%}
.v-chantier:is([data-etape="4"],[data-etape="5"],[data-etape="6"]) .v-site__cta{background:#7A3BFF;color:#fff;box-shadow:0 0 0 5px rgba(122,59,255,.2)}
/* 5 · les contenus : la photo et les textes arrivent */
.v-chantier:is([data-etape="5"],[data-etape="6"]) .v-site__photo{background:url(../../assets/portfolio/m2toit/ecran.jpg) 70% 30%/cover}
.v-chantier:is([data-etape="5"],[data-etape="6"]) .v-ligne:not(.v-ligne--titre){background:#9AA0AB}
/* 6 · l'évolution : de nouvelles rubriques dans le menu */
.v-chantier[data-etape="6"] .v-site__plus{display:inline;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,#7A3BFF 16%,#fff);color:#2A1468;animation:v-apparait .6s var(--w-ease)}
@keyframes v-apparait{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:1000px){.v-chantier{grid-template-columns:1fr}.v-chantier[data-etape="3"] .v-navigateur{width:70%}}
.v-chantier{align-items:start}

/* ---------- Pour qui : un vrai site par profil (24/10) ----------
   Chaque profil est illustré par un site réalisé ; au survol, la page du site défile dans son écran. */
.v-cas-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.v-cas a{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.v-cas__ecran{display:block;margin-bottom:12px;border-radius:16px;overflow:hidden;border:1px solid var(--w-filet);background:#0C0D11;transition:border-color .4s,box-shadow .5s,transform .5s var(--w-ease)}
.v-cas__barre{display:flex;gap:6px;padding:10px 12px;background:#15171D;border-bottom:1px solid var(--w-filet)}
.v-cas__barre i{width:8px;height:8px;border-radius:50%;background:#2A2E39}
.v-cas__vue{display:block;aspect-ratio:4/3;overflow:hidden}
.v-cas__vue img{width:100%;height:auto;transition:transform 7s cubic-bezier(.45,0,.3,1)}
.v-cas a:hover .v-cas__ecran,.v-cas a:focus-visible .v-cas__ecran{border-color:color-mix(in srgb,var(--projet) 70%,transparent);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--projet) 70%,transparent);transform:translateY(-4px)}
.v-cas a:hover .v-cas__vue img,.v-cas a:focus-visible .v-cas__vue img{transform:translateY(calc(-100% + 340px))}
.v-cas__profil{font-size:clamp(22px,1.8vw,28px);font-weight:600;letter-spacing:-.02em}
.v-cas__texte{max-width:34ch;font-size:16px;line-height:1.55;color:var(--w-gris)}
.v-cas__exemple{margin-top:4px;font-size:14px;font-weight:600;color:var(--projet)}
@media (max-width:1000px){.v-cas-liste{grid-template-columns:1fr}}

/* ---------- 25/10 : le chantier dans l'identité du site — le site en construction est sombre (comme Webcraft),
   le résultat Google en verre sombre ; seule la couleur de marque (violet) entre au fil des étapes ---------- */
.v-google{background:rgba(21,24,31,.94);color:#E7E9EE;border:1px solid rgba(220,229,242,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.v-google small,.v-google span{color:#8A93A6}.v-google b{color:#A9C4FF}
.v-site{background:#111319;color:#E7E9EE}
.v-site__nav{color:#8A93A6}.v-site__nav b{color:#F7FAFF}
.v-site__nav em{background:#F7FAFF;color:#0A0B0E}
.v-ligne{background:#262A35}.v-ligne--titre{background:#363B48}
.v-site__cta{background:#363B48}
.v-site__photo{background:#1C1F28}
.v-site__cartes span{background:#1A1D25;box-shadow:inset 0 0 0 1px rgba(220,229,242,.08)}
.v-site__curseur{background:conic-gradient(from 200deg at 30% 20%,#F7FAFF 0 40deg,transparent 40deg)}
.v-chantier[data-etape] .v-site{background:radial-gradient(80% 70% at 80% 0%,rgba(122,59,255,.16),transparent 70%),#111319}
.v-chantier[data-etape] .v-ligne--titre{background:linear-gradient(90deg,#F7FAFF,#B9A2FF)}
.v-chantier[data-etape] .v-site__cartes span{background:color-mix(in srgb,#7A3BFF 14%,#14161C)}
.v-chantier:is([data-etape="5"],[data-etape="6"]) .v-ligne:not(.v-ligne--titre){background:#5C6476}
.v-chantier[data-etape="6"] .v-site__plus{background:rgba(122,59,255,.25);color:#D9CCFF}

/* ---------- 26/10 : avant / après (remplace la devanture) — un seul écran ; à chaque besoin atteint, son cas apparaît
   et le trait argent balaie l'écran de gauche à droite : à gauche du trait « avant », à droite « avec Webcraft » ---------- */
.v-avap{position:relative;padding:22px;border:1px solid var(--w-filet-fort);border-radius:28px;background:linear-gradient(180deg,#11131A,#0A0B0E)}
.v-cas{margin:0;display:none}
.v-devanture-section:is([data-vitres="0"],[data-vitres="1"]) .v-cas[data-cas="1"],
.v-devanture-section[data-vitres="2"] .v-cas[data-cas="2"],.v-devanture-section[data-vitres="3"] .v-cas[data-cas="3"],.v-devanture-section[data-vitres="4"] .v-cas[data-cas="4"]{display:block;animation:va-entre .6s var(--w-ease)}
@keyframes va-entre{from{opacity:0;transform:translateY(10px)}}
.v-cas__tete{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:0 4px 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris-doux)}
.v-cas__tete b{font-size:clamp(18px,1.5vw,24px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:#F7FAFF}
.v-cas__tete span:last-child{text-align:right;color:#B9A2FF}
.v-cas__ecran{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid var(--w-filet);--cut:100%;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.v-cas__avant,.v-cas__apres{position:absolute;inset:0;padding:6%;box-sizing:border-box;display:flex;flex-direction:column;gap:5%}
.v-cas__apres{clip-path:inset(0 0 0 var(--cut));transition:clip-path 1.6s cubic-bezier(.6,0,.2,1) .5s}
.v-cas__trait{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#F7FAFF 20%,#DCE5F2 80%,transparent);box-shadow:0 0 18px 2px rgba(185,162,255,.6);transition:left 1.6s cubic-bezier(.6,0,.2,1) .5s}
.v-devanture-section:not([data-vitres="0"]) .v-cas__ecran{--cut:42%}
/* L'avant : volontairement terne */
.v-cas__avant{background:#16171B;color:#8D8F96;filter:saturate(.3)}
.va-amateur{display:flex;flex-direction:column;gap:12px;font-family:"Times New Roman",Times,serif;transform:rotate(-1.2deg)}
.va-amateur__titre{margin:0;font-size:clamp(16px,1.7vw,26px);color:#A9A27E;text-decoration:underline}
.va-amateur__texte{margin:0;max-width:30ch;font-size:13px;line-height:1.3}
.va-amateur__img{width:44%;aspect-ratio:4/3;display:grid;place-items:center;border:2px dashed #3A3C44;font-size:12px;margin-left:18%}
.va-amateur__lien{font-size:14px;color:#6F7FB4;text-decoration:underline}
.va-confus{display:flex;flex-direction:column;gap:12px}
.va-confus__menu{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:10px;color:#6E717A}
.va-confus__texte{margin:0;font-size:11px;line-height:1.35;color:#5E616A}
.va-google{display:flex;flex-direction:column;gap:12px}
.va-google__barre{margin:0;padding:9px 16px;border-radius:999px;background:#1E2027;font-size:13px;color:#C7CBD6}
.va-google ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.va-google li{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.02)}
.va-google li b{font-size:14px;font-weight:600;color:#8DA0C8}.va-google li span{font-size:11px;color:#6E717A}
.va-google__page{margin:auto 0 0;font-size:12px;color:#6E717A}
.va-modele{display:flex;flex-direction:column;gap:14px}
.va-modele__img{flex:1;display:grid;place-items:center;border-radius:10px;background:#22242B;font-size:13px;color:#6E717A}
.va-modele__titre{margin:0;font-size:20px;font-weight:600;color:#9A9CA4}
/* L'après : le site Webcraft */
.v-cas__apres{background:radial-gradient(80% 90% at 90% 0%,rgba(122,59,255,.22),transparent 65%),#0E1016;color:#C7CBD6}
.va-nav{display:flex;align-items:center;gap:16px;margin:0;font-size:12px;color:#8A93A6}
.va-nav b{margin-right:auto;font-size:13px;color:#F7FAFF}
.va-nav em{font-style:normal;padding:6px 12px;border-radius:999px;background:#F7FAFF;color:#0A0B0E;font-weight:600}
.va-pro{display:flex;flex-direction:column;gap:9%;height:100%}
.va-pro__hero{flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:6%;align-items:center}
.va-pro__hero > div{display:flex;flex-direction:column;gap:10px}
.va-titre{margin:0;font-size:clamp(17px,1.8vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#F7FAFF}
.va-ligne{display:block;width:90%;height:7px;border-radius:4px;background:#262A35}.va-ligne--courte{width:60%}
.va-bouton{align-self:flex-start;margin-top:6px;padding:9px 16px;border-radius:999px;background:#7A3BFF;color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 5px rgba(122,59,255,.18)}
.va-image{margin:0;height:100%;border-radius:12px;background:url(../images/flux-matiere-plis.jpg) center/cover;box-shadow:inset 0 0 0 1px rgba(220,229,242,.1)}
.va-clair{display:flex;flex-direction:column;gap:14px}
.va-clair ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:va}
.va-clair li{counter-increment:va;padding:14px;border-radius:12px;background:#151821;box-shadow:inset 0 0 0 1px rgba(220,229,242,.08);font-size:14px;font-weight:600;color:#F7FAFF}
.va-clair li::before{content:"0" counter(va);display:block;margin-bottom:8px;font-size:11px;color:#B9A2FF}
.va-google--apres li.est-vous{background:rgba(122,59,255,.14);box-shadow:inset 0 0 0 1px rgba(185,162,255,.5),0 0 30px -8px rgba(122,59,255,.7)}
.va-google--apres li.est-vous b{color:#F7FAFF}.va-google--apres li.est-vous span{color:#F5C04E}
.va-google--apres .va-google__page{color:#B9A2FF;font-weight:600}
.va-marque{height:100%;display:flex;flex-direction:column;justify-content:space-between;margin:-6%;padding:6%;
  background:linear-gradient(180deg,rgba(10,11,14,.35),rgba(10,11,14,.8)),linear-gradient(rgba(122,59,255,.35),rgba(122,59,255,.35)),url(../images/mercure-rubans.jpg) center/cover;background-blend-mode:normal,color,normal}
.va-marque__logo{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400!important;font-size:16px!important}
.va-marque__titre{margin:0;font-size:clamp(24px,2.6vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1;color:#F7FAFF}
.va-marque__titre em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#D9CCFF}
@media (prefers-reduced-motion:reduce){.v-cas__apres,.v-cas__trait{transition:none}}
/* Le trait traverse tout l'écran : on lit d'abord l'avant (1,4 s), puis l'après le remplace en entier */
.v-cas__apres{transition:clip-path 1.5s cubic-bezier(.6,0,.2,1) 1.4s}
.v-cas__trait{transition:left 1.5s cubic-bezier(.6,0,.2,1) 1.4s,opacity .4s 2.9s}
.v-devanture-section:not([data-vitres="0"]) .v-cas__ecran{--cut:0%}
.v-devanture-section:not([data-vitres="0"]) .v-cas__trait{opacity:0}
.v-cas__tete span{transition:color .5s 1.4s}
.v-devanture-section:not([data-vitres="0"]) .v-cas__tete span:first-child{color:rgba(138,147,166,.4)}
.va-marque{position:absolute;inset:0;margin:0;height:auto;box-sizing:border-box}
/* Le balayage rejoue à chaque cas (l'animation repart quand le cas réapparaît) */
.v-cas__apres,.v-cas__trait{transition:none}
.v-devanture-section:not([data-vitres="0"]) .v-cas__apres{animation:va-balaie 1.5s cubic-bezier(.6,0,.2,1) 1.4s both}
.v-devanture-section:not([data-vitres="0"]) .v-cas__trait{opacity:1;animation:va-trait 1.5s cubic-bezier(.6,0,.2,1) 1.4s both}
@keyframes va-balaie{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes va-trait{0%{left:100%;opacity:1}92%{opacity:1}100%{left:0%;opacity:0}}
.v-devanture-section[data-vitres="0"] .v-cas__trait{left:100%}
@media (prefers-reduced-motion:reduce){.v-devanture-section:not([data-vitres="0"]) .v-cas__apres{animation:none;clip-path:none}.v-cas__trait{display:none}}