/* ───────────────────────────────────────────────────────────────
   OptiDress · home (refonte, septembre 2026)
   Sections propres à la home. Le socle commun (couleurs, typographie,
   boutons, navigation, pied de page, apparitions) est dans site.css,
   chargé AVANT cette feuille.
─────────────────────────────────────────────────────────────── */

/* ── Héros ────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(40px, 6vw, 84px) 0 clamp(72px, 8vw, 116px); overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
  opacity: .7;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 12px 0 11px;
  border: 1px solid var(--line-2); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: border-color .2s;
}
.pill:hover { border-color: var(--ink); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 85, 254, .16); }
.pill .i { width: 14px; height: 14px; color: var(--faint); }
.hero .display { margin: 26px 0 24px; }
/* titre du positionnement « infrastructure », plus long : trois lignes sur grand écran */
.hero .display { font-size: clamp(40px, 4.15vw, 62px); line-height: 1; }
.hero .lead { max-width: 33em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 13.5px; color: var(--muted); }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-alt { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 460px; }
.hero-alt .more { font-size: 14px; }
.more-video .i { width: 15px; height: 15px; color: var(--blue); }
/* note sur le Shopify App Store, sous les boutons */
.note-app { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; margin-top: 22px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--blue-50); color: var(--ink-2); font-size: 14px; transition: background-color .25s, box-shadow .25s; }
.note-app:hover { background: #e3ebff; box-shadow: 0 0 0 1px rgba(0, 85, 254, .22); }
.note-etoiles {
  width: 85px; height: 17px; flex: none;
  background: linear-gradient(90deg, #3f7dff, var(--blue) 55%, var(--navy));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / 17px 17px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / 17px 17px repeat-x;
}
.note-t b { font-weight: 700; color: var(--ink); margin-right: 2px; }
.hero-meta { margin-top: 20px; }

/* ── Composition produit du héros (fiche produit + panneau OptiDress)
      Toutes les dimensions internes sont en cqw : l'illustration se met
      à l'échelle comme une image, sans jamais pixelliser. Base : 640 px. ── */
.comp {
  position: relative;
  container: comp / inline-size;
  aspect-ratio: 640 / 600;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  font-family: var(--sans);
  color: var(--ink);
  user-select: none;
}
.st {
  position: absolute; left: 0; top: 4%; width: 59%; height: 84%;
  background: #fff; border: 1px solid var(--line); border-radius: 2.6cqw;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.st-bar {
  height: 7.4cqw; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3cqw; border-bottom: 1px solid var(--line);
}
.st-bar i { display: block; width: 2.6cqw; height: 2.6cqw; }
.st-bar .st-menu { background: linear-gradient(var(--ink) 0 0) 0 25% / 100% 1.5px no-repeat, linear-gradient(var(--ink) 0 0) 0 75% / 70% 1.5px no-repeat; }
.st-bar .st-bag { border: 1.5px solid var(--ink); border-radius: .4cqw .4cqw .7cqw .7cqw; height: 2.3cqw; position: relative; }
.st-bar .st-bag::before { content: ""; position: absolute; left: 25%; right: 25%; top: -1cqw; height: 1.2cqw; border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 1cqw 1cqw 0 0; }
.st-brand { font-family: var(--serif); font-size: 2.6cqw; letter-spacing: .2em; text-transform: uppercase; }
.st-body { flex: 1; display: grid; grid-template-columns: 46% 54%; min-height: 0; }
.st-img { background: #f7f8fc; overflow: hidden; }
.st-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.st-info { padding: 3.4cqw 3cqw 3cqw; display: flex; flex-direction: column; min-width: 0; }
.st-crumb { font: 500 max(8.5px, 1.45cqw)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.st-name { font-family: var(--serif); font-size: 3.7cqw; line-height: 1; margin-top: 1.8cqw; letter-spacing: -.01em; }
.st-price { font-size: 2.05cqw; margin-top: 1.3cqw; color: var(--ink-2); }
.st-col { display: flex; align-items: center; gap: 1.1cqw; font-size: max(10px, 1.75cqw); color: var(--muted); margin-top: 2.6cqw; }
.st-col i { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: #6d3b22; box-shadow: 0 0 0 .35cqw #fff, 0 0 0 .5cqw var(--line-2); }
.st-lbl { display: flex; justify-content: space-between; align-items: baseline; margin-top: 3.2cqw; font-size: max(10px, 1.75cqw); font-weight: 600; }
.st-lbl b { font-weight: 600; color: var(--ok); display: inline-flex; align-items: center; gap: .8cqw; }
.st-lbl b::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--ok); }
.st-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; margin-top: 1.4cqw; }
.st-sizes span {
  height: 5.4cqw; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 1cqw;
  font-size: 1.9cqw; font-weight: 500; position: relative;
}
.st-sizes .is-reco { border: .3cqw solid var(--ok); background: var(--ok-50); color: var(--ok); font-weight: 700; }
.st-desc { display: grid; gap: 1.2cqw; margin-top: 10.5cqw; }
.st-desc i { display: block; height: .9cqw; border-radius: 1cqw; background: var(--mist-2); }
.st-desc i:nth-child(2) { width: 88%; }
.st-desc i:nth-child(3) { width: 58%; }
.st-try, .st-cart {
  display: flex; align-items: center; justify-content: center; gap: 1.1cqw;
  height: 5.8cqw; border-radius: 1.1cqw; font-size: 1.85cqw; font-weight: 600;
}
.st-try { margin-top: auto; border: 1px solid var(--blue); color: var(--blue); background: var(--blue-50); }
.st-try svg { width: 2.6cqw; height: 2.6cqw; }
.st-cart { margin-top: 1.2cqw; background: var(--ink); color: #fff; }

.pn {
  position: absolute; right: 0; top: 11%; width: 43%; height: 85%;
  background: #fff; border: 1px solid var(--line); border-radius: 3.4cqw;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pn-grip { width: 7cqw; height: .7cqw; border-radius: 1cqw; background: var(--mist-2); margin: 1.6cqw auto 0; flex: none; }
.pn-head { display: flex; align-items: center; justify-content: space-between; padding: 1.4cqw 2.6cqw 0; font-size: 2.1cqw; flex: none; }
.pn-head b { font-weight: 600; }
.pn-head i { width: 2.2cqw; height: 2.2cqw; position: relative; }
.pn-head .pn-back::before { content: ""; position: absolute; inset: 22%; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.pn-head .pn-x::before, .pn-head .pn-x::after { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1.5px; background: var(--ink); }
.pn-head .pn-x::before { transform: rotate(45deg); }
.pn-head .pn-x::after { transform: rotate(-45deg); }
.pn-stage {
  flex: 1; min-height: 0; position: relative; margin: 1.6cqw 2cqw 0;
  border-radius: 2cqw;
  background: radial-gradient(60% 45% at 50% 42%, #fff 0%, #f1f3f6 100%);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.pn-stage::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 3.5%; height: 3.5%;
  background: radial-gradient(closest-side, rgba(11, 13, 18, .18), transparent);
}
.pn-stage img { position: relative; z-index: 1; height: 94%; width: auto; max-width: none; margin-bottom: 2%; }
.pn-arr { position: absolute; top: 48%; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #fff; border: 1px solid var(--line); z-index: 2; }
.pn-arr::before { content: ""; position: absolute; inset: 34%; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.pn-arr.l { left: 1.4cqw; }
.pn-arr.l::before { transform: translateX(15%) rotate(45deg); }
.pn-arr.r { right: 1.4cqw; }
.pn-arr.r::before { transform: translateX(-15%) rotate(-135deg); }
.pn-reco { padding: 2cqw 2.4cqw 0; flex: none; }
.pn-reco > b { display: block; font-size: max(10px, 1.75cqw); font-weight: 600; margin-bottom: 1.2cqw; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9cqw; }
.chips .c {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw;
  height: 6.4cqw; border-radius: 1.1cqw; border: 1px solid;
  font-size: max(8px, 1.2cqw); line-height: 1.1; letter-spacing: -.01em; text-align: center; padding: 0 .4cqw;
}
.chips .c b { font-size: 2.05cqw; font-weight: 700; }
.chips .warn { border-color: #f0c98f; background: var(--warn-50); color: var(--warn); }
.chips .ok { border-color: var(--ok); background: var(--ok-50); color: var(--ok); border-width: .3cqw; }
.chips .bad { border-color: #efb3ad; background: var(--bad-50); color: var(--bad); }
.pn-cart { margin: 1.8cqw 2.4cqw 2.4cqw; height: 5.6cqw; border-radius: 1.1cqw; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 1.8cqw; font-weight: 600; flex: none; }

/* annotation façon fiche technique : une étiquette accrochée à la taille M */
.ann {
  position: absolute; z-index: 3; left: 31.4%; top: 50.5%;
  max-width: 25.5cqw;
  display: flex; align-items: flex-start; gap: 1.1cqw;
  padding: 1.3cqw 1.6cqw; border-radius: 1.2cqw;
  background: var(--ink); color: #fff;
  font: 500 max(8.5px, 1.42cqw)/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(11, 13, 18, .55);
}
.ann::before { content: ""; flex: none; width: 1cqw; height: 1cqw; margin-top: .25cqw; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 .5cqw rgba(0, 85, 254, .35); }
.ann::after { content: ""; position: absolute; top: -.9cqw; left: 7.4cqw; border: .9cqw solid transparent; border-top: 0; border-bottom-color: var(--ink); }

/* entrée de la composition (jouée une fois, au chargement) */
.js-rv .comp .st { animation: compSt .9s var(--ease) .1s both; }
.js-rv .comp .pn { animation: compPn 1s var(--ease) .38s both; }
.js-rv .comp .st-sizes .is-reco { animation: pop .6s var(--ease) 1.25s both; }
.js-rv .comp .chips .ok { animation: pop .6s var(--ease) 1.1s both; }
.js-rv .comp .ann { animation: compAnn .6s var(--ease) 1.6s both; }
/* fiche et panneau visibles dès la première peinture (voir rvIn dans site.css : LCP) */
@keyframes compSt { from { opacity: .4; transform: translateY(14px); } }
@keyframes compPn { from { opacity: .4; transform: translate(18px, 10px); } }
@keyframes compAnn { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { from { transform: scale(.94); } }

/* ── La composition du héros vit un peu (validé le 26/09/2026) ────
   1. l'avatar du panneau tourne sur lui-même (vidéo heros-360.mp4, en
      boucle, un tour en 10 s ; outils/tour_360.mjs heros) ;
   2. toutes les 8 s, le parcours se rejoue : la taille M recommandée
      s'allume dans le panneau, le verdict arrive dans le sélecteur de
      la fiche, puis l'article part au panier (bouton qui passe au vert,
      pastille « 1 » sur le sac). Rien ne bouge hors écran ni en
      mouvement réduit. ── */
.pn-tour { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.pn-arr { z-index: 2; }

/* bouton du panneau : deux libellés superposés */
.pn-cart { position: relative; overflow: hidden; transition: none; }
.pn-cart-a, .pn-cart-b { grid-area: 1 / 1; }
.pn-cart-b { display: inline-flex; align-items: center; gap: .8cqw; opacity: 0; transform: translateY(60%); }
.pn-cart-b::before {
  content: ""; width: 1.9cqw; height: 1.9cqw; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147443' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
/* pastille du sac */
.st-bar .st-bag { overflow: visible; }
.st-pastille {
  position: absolute; right: -1.3cqw; top: -1.9cqw; z-index: 1;
  display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%;
  background: var(--blue); color: #fff; font: 700 1.3cqw/1 var(--sans);
  transform: scale(0); opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .comp.joue .chips .ok { animation: pop .6s var(--ease) 1.1s both, mBattement 8s var(--ease) 2.4s infinite; }
  .comp.joue .st-sizes .is-reco { animation: pop .6s var(--ease) 1.25s both, mVerdict 8s var(--ease) 2.4s infinite; }
  .comp.joue .st-lbl b { animation: mLabel 8s var(--ease) 2.4s infinite; }
  .comp.joue .ann { animation: compAnn .6s var(--ease) 1.6s both, mAnn 8s var(--ease) 2.4s infinite; }
  .comp.joue .pn-cart { animation: mBouton 8s var(--ease) 2.4s infinite; }
  .comp.joue .pn-cart-a { animation: mLibA 8s var(--ease) 2.4s infinite; }
  .comp.joue .pn-cart-b { animation: mLibB 8s var(--ease) 2.4s infinite; }
  .comp.joue .st-pastille { animation: mPastille 8s var(--ease) 2.4s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-tour { display: none; }
}
/* 0-12 % : la taille M s'allume dans le panneau */
@keyframes mBattement {
  0%, 16%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(20, 116, 67, 0); }
  6% { transform: scale(1.08); box-shadow: 0 0 0 1cqw rgba(20, 116, 67, .18); }
}
/* 12-26 % : le verdict arrive dans le sélecteur de la fiche */
@keyframes mVerdict {
  0%, 11%, 30%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(20, 116, 67, 0); }
  18% { transform: scale(1.1); box-shadow: 0 0 0 1.1cqw rgba(20, 116, 67, .2); }
}
@keyframes mLabel {
  0%, 11%, 100% { opacity: 1; transform: none; }
  12% { opacity: 0; transform: translateX(1.2cqw); }
  20% { opacity: 1; transform: none; }
}
@keyframes mAnn {
  0%, 18%, 34%, 100% { transform: none; }
  24% { transform: translateY(-.8cqw); }
}
/* 36-72 % : l'article part au panier */
@keyframes mBouton {
  0%, 36%, 100% { transform: none; background: var(--ink); }
  39% { transform: scale(.96); background: var(--ink); }
  43%, 70% { transform: none; background: var(--ok); }
  76% { background: var(--ink); }
}
@keyframes mLibA {
  0%, 40%, 100% { opacity: 1; transform: none; }
  44%, 70% { opacity: 0; transform: translateY(-60%); }
  76% { opacity: 1; transform: none; }
}
@keyframes mLibB {
  0%, 40%, 76%, 100% { opacity: 0; transform: translateY(60%); }
  45%, 70% { opacity: 1; transform: none; }
}
@keyframes mPastille {
  0%, 44%, 78%, 100% { transform: scale(0); opacity: 0; }
  49% { transform: scale(1.25); opacity: 1; }
  53%, 72% { transform: scale(1); opacity: 1; }
}

/* ── Bande de confiance ───────────────────────────────────────────
   Aux couleurs de la marque : dégradé bleu nuit → bleu OptiDress,
   quadrillage de la charte, halo qui balaie lentement la bande. La
   citation s'écrit mot à mot ; seuls les logos des marques clientes
   défilent, avec un fondu sur les côtés (en pause hors écran). ── */
.trust {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 130% at 92% -20%, rgba(92, 146, 255, .55), transparent 62%),
    radial-gradient(55% 100% at 0% 115%, rgba(0, 16, 92, .6), transparent 68%),
    linear-gradient(112deg, #001c70 0%, var(--navy) 32%, #0a43dc 74%, var(--blue) 100%);
}
.trust::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 95% at 50% 35%, #000 15%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 95% at 50% 35%, #000 15%, transparent 78%);
}
.trust::after {
  content: ""; position: absolute; z-index: -1; top: -60%; bottom: -60%; left: -35%; width: 35%;
  background: radial-gradient(closest-side, rgba(160, 190, 255, .26), transparent);
  animation: balaye 16s ease-in-out infinite; animation-play-state: paused;
}
.trust.joue::after { animation-play-state: running; }
@keyframes balaye { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(385%); } }
.trust-q {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.14; letter-spacing: -.012em;
  text-align: center; text-wrap: balance;
  max-width: 24em; margin: 0 auto;
  padding: clamp(52px, 6.5vw, 88px) 0 clamp(34px, 4vw, 52px);
  color: rgba(255, 255, 255, .8);
}
.trust-q em {
  color: #fff;
  background: linear-gradient(90deg, #8fb1ff, #d7e3ff) 0 96% / 100% 2px no-repeat;
  transition: background-size 1.1s var(--ease) 1s;
}
.js-rv .trust-q.pret:not(.vu) em { background-size: 0 2px; }
.trust-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border-top: 1px solid rgba(255, 255, 255, .16);
  transition: opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s;
}
.js-rv .trust-row:not(.vu) { opacity: 0; transform: translateY(14px); }
.trust-g { display: flex; align-items: center; gap: clamp(24px, 3.5vw, 48px); min-width: 0; padding: 30px 0 36px; }
/* les soutiens : une petite partie fixe à droite, séparée d'un filet */
.trust-soutiens { margin-left: clamp(24px, 3.5vw, 48px); padding-left: clamp(24px, 3.5vw, 48px); border-left: 1px solid rgba(255, 255, 255, .16); }
.logos { display: flex; align-items: center; gap: clamp(28px, 3vw, 44px); }
.trust .eyebrow { flex: none; color: rgba(255, 255, 255, .62); }
/* bande défilante : deux séries identiques, la piste glisse d'une série */
.defile {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.defile-piste { display: flex; width: max-content; animation: defile 34s linear infinite; animation-play-state: paused; }
.trust.joue .defile-piste { animation-play-state: running; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-set { display: flex; align-items: center; gap: clamp(64px, 7vw, 112px); padding-right: clamp(64px, 7vw, 112px); flex: none; }
@keyframes defile { to { transform: translateX(-50%); } }
/* logos teintés : l'image garde ses dimensions et son texte alternatif,
   le masque la redessine en blanc */
.lg { position: relative; display: block; opacity: .92; transition: opacity .3s, transform .35s var(--ease); }
.lg img { width: auto; max-width: none; opacity: 0; }
.lg::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: var(--lg) center / contain no-repeat;
          mask: var(--lg) center / contain no-repeat;
}
.defile li:hover .lg, .logos li:hover .lg { opacity: 1; transform: translateY(-3px); }
.lg-karabina img { height: 44px; }
.lg-arev img { height: 40px; }
.lg-jeeyodee img { height: 42px; }
.lg-trazlow img { height: 46px; }
.lg-europe1 img { height: 28px; }
.lg-pepite img { height: 32px; }

/* citations écrites mot à mot (data-mots, découpées par accueil.js) */
.mot { display: inline-block; }
.js-rv [data-mots].pret .mot {
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay: calc(.1s + var(--i, 0) * 55ms);
}
.js-rv [data-mots].pret:not(.vu) .mot { opacity: 0; transform: translateY(.35em); filter: blur(6px); }

/* ── Vidéo · une minute ──────────────────────────────────────────
   La vidéo motion design d'Arthur. En lecture muette à l'écran (grand
   écran seulement), le bouton la relance depuis le début avec le son. ── */
.motion { position: relative; isolation: isolate; overflow: hidden; }
.motion::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 254, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 254, .065) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 62%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 62%, #000 0%, transparent 75%);
}
.motion::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 90%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 85, 254, .14), transparent 72%);
}
.motion-head { max-width: 820px; margin: 0 auto; text-align: center; }
.motion-head .eyebrow { margin-bottom: 24px; }
.motion-cadre {
  position: relative; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: #dfe8ff; border: 1px solid rgba(0, 85, 254, .14);
  box-shadow: 0 2px 6px rgba(0, 40, 153, .08), 0 50px 100px -40px rgba(0, 40, 153, .5);
}
.motion-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-son {
  position: absolute; left: 50%; bottom: clamp(14px, 3vw, 30px); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px 0 7px;
  border-radius: 999px; background: rgba(11, 13, 18, .72); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0, 20, 70, .55);
  transition: background-color .3s, transform .3s var(--ease), opacity .3s, visibility .3s;
}
.motion-son:hover { background: var(--blue); transform: translateY(-2px); }
.motion-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); transition: background-color .3s, color .3s; }
.motion-son:hover .motion-ico { background: #fff; color: var(--blue); }
.motion-ico svg { width: 18px; height: 18px; margin-left: 2px; }
.motion-duree { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .28); font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, .72); }
.motion-cadre.son .motion-son { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── 01 · Le problème ─────────────────────────────────────────────
   Chiffres aux couleurs de la marque qui se comptent à l'apparition,
   jauges qui se remplissent (la plage hachurée = la fourchette),
   filet bleu qui se trace. ── */
.problem { position: relative; isolation: isolate; overflow: hidden; }
.problem::before {
  content: ""; position: absolute; z-index: -1; left: -12%; bottom: -35%; width: 75%; height: 95%;
  background: radial-gradient(closest-side, rgba(0, 85, 254, .085), transparent 72%);
}
.problem::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 254, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 254, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 88% 18%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 55% 60% at 88% 18%, #000 0%, transparent 72%);
}
/* titre à gauche, trois vêtements à droite : on parle bien de mode, et du
   doute de taille (« S ou M ? ») ; les cartes se posent en s'inclinant à
   l'apparition, puis flottent doucement tant qu'elles sont à l'écran */
.problem-top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 31vw, 420px); align-items: center; gap: clamp(28px, 4vw, 64px); }
.vet-pile { position: relative; aspect-ratio: 5 / 4; }
.vet {
  --r: 0deg; --d: 0s;
  position: absolute; width: 40%;
  rotate: var(--r);
  transition: opacity .8s var(--ease) var(--d), translate 1.1s var(--ease) var(--d), rotate 1.3s var(--ease) var(--d);
}
.vet-1 { --r: -9deg; left: 1%; top: 15%; z-index: 1; }
.vet-2 { --r: 5deg; --d: .12s; left: 30%; top: 0; width: 43%; z-index: 2; }
.vet-3 { --r: 11deg; --d: .24s; left: 59%; top: 20%; z-index: 3; }
.js-rv .vet-pile:not(.vu) .vet { opacity: 0; translate: 0 44px; rotate: 0deg; }
.vet-in {
  display: block; overflow: hidden; border-radius: 16px; background: #f7f8fc;
  box-shadow: 0 2px 4px rgba(0, 40, 153, .06), 0 30px 50px -26px rgba(0, 40, 153, .45);
  animation: flotte 6.5s ease-in-out infinite; animation-play-state: paused;
}
.vet-2 .vet-in { animation-duration: 7.4s; animation-delay: -2s; }
.vet-3 .vet-in { animation-duration: 6.9s; animation-delay: -4s; }
.vet-pile.joue .vet-in { animation-play-state: running; }
.vet-in img { display: block; width: 100%; height: auto; }
.vet-doute {
  position: absolute; z-index: 1; bottom: 5%; left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 40, 153, .1), 0 10px 22px -10px rgba(0, 40, 153, .5);
  font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: opacity .5s var(--ease) calc(var(--d) + .75s), scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .75s);
}
.vet-doute i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
/* la veste est chevauchée par le jean à droite : son étiquette part à gauche */
.vet-2 .vet-doute { left: 9%; translate: 0 0; }
.js-rv .vet-pile:not(.vu) .vet-doute { opacity: 0; scale: .5; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.stats {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}
.stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--blue) 55%, #7aa4ff);
  transform-origin: 0 50%;
  transition: transform 1.5s var(--ease) .1s;
}
.js-rv .stats:not(.vu)::before { transform: scaleX(0); }
.stat { padding: 32px 32px 0 0; display: flex; flex-direction: column; }
.stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
.stat-n {
  font-family: var(--serif); font-size: clamp(54px, 5.8vw, 92px); line-height: .95; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(120deg, var(--navy) 5%, var(--blue) 62%, #4f8aff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .04em;
}
.stat-n small { font-size: .5em; margin-left: .06em; letter-spacing: 0; }
.jauge {
  position: relative; display: block; height: 8px; margin-top: 22px; max-width: 300px;
  border-radius: 8px; background: var(--mist-2); overflow: hidden;
}
.jauge i { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; }
.jauge-a {
  left: 0; width: calc(var(--a) * 100%); border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  transition: transform 1.5s var(--ease) calc(var(--d, 0s) + .15s);
}
.jauge-b {
  left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%);
  background: repeating-linear-gradient(-45deg, var(--blue) 0 3px, rgba(0, 85, 254, .32) 3px 6px);
  transition: transform .8s var(--ease) calc(var(--d, 0s) + 1.45s);
}
.js-rv .stats:not(.vu) .jauge i { transform: scaleX(0); }
.stat-t { margin-top: 18px; font-size: 17px; color: var(--ink-2); max-width: 20em; }
.stat-s { margin-top: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* retours par pays, sous la statistique des retours */
.stat-pays { display: grid; gap: 14px; max-width: 27em; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line-2); }
.stat-pays li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stat-pays li:nth-child(1) { transition-delay: 1.5s; }
.stat-pays li:nth-child(2) { transition-delay: 1.65s; }
.stat-pays li:nth-child(3) { transition-delay: 1.8s; }
.js-rv .stats:not(.vu) .stat-pays li { opacity: 0; transform: translateX(-10px); }
.pays { grid-row: span 2; display: grid; place-items: center; height: 22px; border-radius: 6px; background: var(--blue-50); color: var(--blue); font: 600 10.5px/1 var(--mono); letter-spacing: .06em; }
.pays-t { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.pays-t b { font-weight: 700; color: var(--navy); }
.pays-s { margin-top: 3px; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.stat-pays .fort .pays { background: var(--blue); color: #fff; }
.stat-pays .fort .pays-t, .stat-pays .fort .pays-t b { color: var(--blue); }
.stat-q { justify-content: flex-end; }
.stat-qm {
  display: block; height: .5em; margin-bottom: 14px;
  font-family: var(--serif); font-size: 104px; line-height: .9; color: var(--blue);
}
.stat-q p { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.stat-q p em { color: var(--blue); }

/* taux de conversion : texte à gauche, foule de 500 visiteurs à droite
   (dessinée par accueil.js) ; 493 s'effacent en rouge, 7 restent en bleu */
.conv {
  --rouge: #f43f5e;          /* silhouettes */
  --rouge-t: #d02b47;        /* textes : 5,1:1 sur blanc */
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(64px, 8vw, 112px);
  padding: clamp(24px, 3.2vw, 44px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 40, 153, .05), 0 50px 90px -60px rgba(0, 40, 153, .45);
}
.conv-txt { padding: clamp(0px, 1vw, 12px) 0 clamp(0px, 1vw, 12px) clamp(0px, .8vw, 10px); }
.conv-k { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rouge-t); }
.conv-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(244, 63, 94, .16); }
.conv-t { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.02; letter-spacing: -.016em; text-wrap: balance; }
.conv-t em { color: var(--blue); }
.conv-p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.conv-p b { color: var(--ink); font-weight: 700; }
.conv-leg { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); gap: 12px 14px; margin-top: 24px; }
.conv-leg li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; font-size: 16px; color: var(--ink-2); }
.conv-leg i {
  align-self: center; width: 20px; height: 24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='6.5' r='5.2'/%3E%3Cpath d='M2 26c0-8 4-11 9-11s9 3 9 11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='6.5' r='5.2'/%3E%3Cpath d='M2 26c0-8 4-11 9-11s9 3 9 11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.conv-leg b { text-align: right; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.conv-achat i { background: var(--blue); }
.conv-achat b { color: var(--blue); }
.conv-perdu i { background: var(--rouge); opacity: .45; }
.conv-perdu b { color: var(--rouge-t); }
.conv-leg b { transform-origin: 100% 70%; }
.conv.verdict .conv-leg b { animation: verdict .9s var(--ease); }
.conv.verdict .conv-perdu b { animation-delay: .12s; }
@keyframes verdict { 40% { transform: scale(1.22); } }
.conv-tendance { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line-2); font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 32em; }
.conv-tendance b { font-weight: 700; color: var(--rouge-t); }
.conv .stat-s { display: block; }
.conv-foule {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r);
  background: radial-gradient(ellipse 60% 55% at 50% 50%, #fff 20%, #f4f6fb 100%);
  border: 1px solid var(--line);
}
.conv-foule::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0, 85, 254, .14) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, #000 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, #000 100%);
}
.conv-foule canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── 02 · La solution : trois étapes reliées ──────────────────────
   Démo interactive : l'étape 01 se règle (mêmes seuils que le vrai
   widget), l'étape 02 habille l'avatar obtenu, l'étape 03 en déduit
   la taille. Les pastilles fléchées entre les vignettes s'allument
   quand l'information passe de l'une à l'autre. ── */
.steps {
  --gap: clamp(20px, 2.4vw, 34px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(56px, 7vw, 88px);
}
.step { position: relative; display: flex; flex-direction: column; }
.vig {
  container: vig / inline-size;
  position: relative; aspect-ratio: 1 / 1.1;
  background: linear-gradient(165deg, #f9fbff 0%, #e9efff 100%);
  border: 1px solid rgba(0, 85, 254, .1);
  border-radius: var(--r-lg);
  overflow: hidden; isolation: isolate;
}
.vig::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(0, 85, 254, .2) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 30%, transparent 85%);
}
/* pastille fléchée entre deux vignettes (au centre de l'espace) ;
   margin-top en % = part de la LARGEUR de l'étape, soit le milieu de
   la vignette (hauteur = 1,1 × largeur) */
.flux {
  position: absolute; z-index: 3; top: 0; margin-top: 55%; right: calc(var(--gap) / -2);
  width: 38px; height: 38px; transform: translate(50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #3f7dff, var(--blue) 50%, var(--navy));
  color: #fff;
  box-shadow: 0 0 0 5px var(--mist), 0 10px 22px -8px rgba(0, 85, 254, .8);
}
/* vignettes étroites (moins de 350 px) : un peu plus hautes pour les réglages */
@media (min-width: 1041px) and (max-width: 1200px) {
  .vig { aspect-ratio: 1 / 1.2; }
  .flux { margin-top: 60%; }
}
@media (max-width: 390px) {
  .vig { aspect-ratio: 1 / 1.2; }
}
.flux svg { width: 17px; height: 17px; }
.flux::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--blue); opacity: 0;
}
.flux.pulse::after { animation: onde .9s var(--ease); }
.flux.pulse svg { animation: pousse .9s var(--ease); }
@keyframes onde { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }
@keyframes pousse { 40% { transform: translateX(4px); } }

.step-t > * { margin-left: 4px; margin-right: 8px; }
.step-n {
  justify-self: start; margin-top: 30px;
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.step-n b {
  order: -1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, #3f7dff, var(--blue) 45%, var(--navy));
  color: #fff; font: 500 14px/1 var(--mono); letter-spacing: 0;
  box-shadow: 0 10px 20px -10px rgba(0, 85, 254, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.3vw, 34px); line-height: 1.05; letter-spacing: -.01em; margin-top: 18px; }
.step p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.step-f { display: grid; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.step-f li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink-2); }
.step-f li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: -1px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 4px 10px -4px rgba(0, 85, 254, .7);
}
.step .more { justify-self: start; align-self: start; margin-top: 22px; font-size: 14.5px; }
/* grand écran : les trois colonnes partagent les mêmes lignes (numéro,
   titre, texte, points forts, lien), les listes démarrent à la même hauteur */
@media (min-width: 1041px) {
  .steps { row-gap: 0; }
  .step { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .step-t { display: contents; }
  .step-f { align-self: start; }
}

/* carte d'interface commune aux vignettes */
.ui {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 40, 153, .06), 0 18px 40px -20px rgba(0, 40, 153, .3);
  font-size: 12px; color: var(--ink);
}
.ui-title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; }
.ui-dots { display: flex; gap: 5px; }
.ui-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.ui-dots i.on { background: var(--blue); }

/* vignette 1 · créer son avatar : de vrais réglages */
.vig-create .ui { left: 6.5%; right: 6.5%; top: 9%; bottom: 6%; padding: 16px 16px 13px; display: flex; flex-direction: column; }
.vc-body { flex: 1; display: grid; grid-template-columns: 35% 1fr; gap: 14px; margin-top: 12px; min-height: 0; }
.vc-av {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(70% 50% at 50% 45%, #fff, #edf1f8); border-radius: 12px; overflow: hidden;
}
.vc-av img { height: 97%; width: auto; max-width: none; flex: none; }
.vc-fields { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--mist); }
.seg label, .sil label { position: relative; display: block; }
.seg input, .sil input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 26px; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: var(--muted); transition: background-color .25s, color .25s, box-shadow .25s; }
.seg input:checked + span { background: #fff; color: var(--blue); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 40, 153, .16); }
.seg input:focus-visible + span, .sil input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.fld { display: block; }
.fld-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--muted); }
.fld-top b { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fld input[type="range"] {
  --p: 50%;
  display: block; width: 100%; height: 20px; margin: 3px 0 0; padding: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.fld input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue) var(--p), var(--mist-2) var(--p));
}
.fld input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue);
  box-shadow: 0 2px 8px rgba(0, 40, 153, .28);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.fld input[type="range"]:hover::-webkit-slider-thumb, .fld input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(0, 85, 254, .14), 0 2px 8px rgba(0, 40, 153, .28); }
.fld input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--mist-2); }
.fld input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--blue); }
.fld input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 8px rgba(0, 40, 153, .28); }
.fld input[type="range"]:focus { outline: none; }
.fld input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.sil span {
  display: grid; place-items: center; height: 25px; padding: 0 4px;
  border: 1px solid var(--line-2); border-radius: 7px;
  font-size: 11px; color: var(--muted); white-space: nowrap;
  transition: border-color .25s, background-color .25s, color .25s;
}
.sil label:hover span { border-color: rgba(0, 85, 254, .45); color: var(--ink); }
.sil input:checked + span { border-color: var(--blue); background: var(--blue-50); color: var(--blue); font-weight: 600; }
.vc-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }
.vc-foot svg { width: 12px; height: 12px; flex: none; }
/* invitation à manipuler, retirée au premier réglage */
.vc-hint {
  position: absolute; z-index: 4; left: 50%; top: calc(9% - 14px);
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px;
  border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 22px -8px rgba(0, 85, 254, .8);
  animation: invite 2.8s var(--ease) infinite;
  transition: opacity .4s, visibility .4s;
}
.vc-hint svg { width: 15px; height: 15px; }
.vig-create.touche .vc-hint { opacity: 0; visibility: hidden; }
@keyframes invite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vc-img { transition: opacity .2s; }

/* vignette 2 · essayer : l'avatar nu, la vignette du vêtement glisse
   dessus, un balayage bleu l'habille, puis la boucle reprend */
@property --scan { syntax: '<percentage>'; inherits: true; initial-value: 112%; }
.vig-try .ui { left: 8%; right: 8%; top: 8%; bottom: 8%; overflow: hidden; }
.vt-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: radial-gradient(70% 50% at 50% 42%, #fff, #edf1f8); }
.vt-stage::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 3%; height: 4%; background: radial-gradient(closest-side, rgba(11, 13, 18, .16), transparent); }
.vt-stage::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 6%; bottom: 2.5%; z-index: 0;
  border: 1.5px dashed rgba(0, 85, 254, .55); border-radius: 16px; background: rgba(0, 85, 254, .04);
  opacity: 0;
}
.vt-fig {
  --scan: 112%;
  position: absolute; z-index: 1; left: 50%; bottom: 4.5%; height: 88%; aspect-ratio: 1 / 2;
  transform: translateX(-50%); transform-origin: 50% 100%;
  transition: opacity .22s;
}
.vt-fig.change { opacity: 0; }
.vt-fig img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt-porte {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--scan) - 7%), transparent calc(var(--scan) + 1%));
          mask-image: linear-gradient(to bottom, #000 calc(var(--scan) - 7%), transparent calc(var(--scan) + 1%));
}
.vt-scan {
  position: absolute; left: -14%; right: -14%; top: var(--scan); height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #5b93ff 16%, #fff 50%, #5b93ff 84%, transparent);
  box-shadow: 0 0 14px 3px rgba(0, 85, 254, .5);
  opacity: 0; pointer-events: none;
}
.vt-scan::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 100%; height: 60px;
  background: linear-gradient(to top, rgba(0, 85, 254, .2), transparent);
}
.vt-glow {
  position: absolute; left: 50%; top: 48%; width: 115%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 85, 254, .2), transparent 72%);
  opacity: 0;
}
.vt-side { position: absolute; z-index: 2; left: 6%; top: 16%; width: 27%; display: flex; flex-direction: column; align-items: center; }
.vt-slot { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1.5px dashed var(--line-2); border-radius: 11px; }
.vt-thumb {
  position: absolute; inset: -1.5px; z-index: 3;
  border-radius: 11px; overflow: hidden;
  background: #f7f8fc; border: 1px solid var(--line);
  box-shadow: 0 12px 26px -12px rgba(0, 40, 153, .5);
}
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vt-hint { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; line-height: 1.3; color: var(--muted); text-align: center; }
.vt-hint svg { width: 16px; height: 16px; color: var(--blue); }
.vt-arc { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vt-arc path { fill: none; stroke: rgba(0, 85, 254, .45); stroke-width: 1.3; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.vt-arc .tip { stroke-dasharray: none; }
/* la boucle (7,5 s) : repos → saisie → glissé → dépôt → balayage → porté → retour */
.vig-try.play .vt-thumb { animation: glisse 7.5s var(--ease) infinite; }
.vig-try.play .vt-fig { animation: scan 7.5s linear infinite, depot 7.5s var(--ease) infinite; }
.vig-try.play .vt-porte { animation: porte 7.5s var(--ease) infinite; }
.vig-try.play .vt-scan { animation: ligne 7.5s linear infinite; }
.vig-try.play .vt-glow { animation: halo 7.5s var(--ease) infinite; }
.vig-try.play .vt-stage::before { animation: cible 7.5s var(--ease) infinite; }
.vig-try.play .vt-hint { animation: indice 7.5s var(--ease) infinite; }
.vig-try.rs *, .vig-try.rs *::before { animation: none !important; }
@keyframes glisse {
  0%, 14% { transform: translate(0, 0); opacity: 1; }
  20% { transform: translate(6%, -4%) rotate(-3deg) scale(1.04); opacity: 1; }
  40% { transform: translate(172%, -12%) rotate(0deg) scale(.9); opacity: 1; }
  46% { transform: translate(172%, -12%) scale(.5); opacity: 0; }
  46.1%, 88% { transform: translate(0, 0); opacity: 0; }
  97%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes scan {
  0%, 44% { --scan: -10%; }
  58%, 100% { --scan: 112%; }
}
@keyframes depot {
  0%, 56% { transform: translateX(-50%) scale(1); }
  61% { transform: translateX(-50%) scale(1.022); }
  70%, 100% { transform: translateX(-50%) scale(1); }
}
@keyframes porte { 0%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes ligne { 0%, 43.5% { opacity: 0; } 45.5%, 56% { opacity: 1; } 59.5%, 100% { opacity: 0; } }
@keyframes halo { 0%, 40% { opacity: 0; } 54% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes cible { 0%, 26% { opacity: 0; } 36%, 43% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes indice {
  0%, 16% { opacity: 1; }
  24%, 88% { opacity: .25; }
  96%, 100% { opacity: 1; }
}

/* vignette 3 · acheter avec la bonne taille (calculée d'après l'étape 01) */
.vig-size .ui { left: 8%; right: 8%; top: 50%; translate: 0 -50%; padding: 20px 18px 18px; display: flex; flex-direction: column; }
.vs-prod { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vs-prod img { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; background: #f7f8fc; flex: none; }
.vs-prod b { display: block; font-size: 13.5px; font-weight: 600; }
.vs-prod span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.vs-lbl { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 12.5px; font-weight: 600; }
.vs-lbl i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 9px/1 var(--sans); font-style: normal; color: var(--faint); }
.vs-pour { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.vs-pour span {
  display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 6px;
  background: var(--blue-50); color: var(--blue);
  font: 500 10.5px/1 var(--mono); letter-spacing: .01em; white-space: nowrap;
  transition: background-color .3s;
}
.vs-pour.maj span { animation: eclat .8s var(--ease); }
@keyframes eclat { 0% { background-color: rgba(0, 85, 254, .28); } 100% { background-color: var(--blue-50); } }
.vig-size .chips { gap: 6px; }
.vig-size .chips .c { height: 50px; font-size: 9.5px; border-radius: 9px; gap: 3px; transition: background-color .3s, border-color .3s, color .3s; }
.vig-size .chips .c b { font-size: 15px; }
.vig-size .chips .ok { border-width: 2px; }
.vs-cart { margin-top: 20px; height: 42px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; position: relative; overflow: hidden; }
.vs-cart span { grid-area: 1 / 1; transition: opacity .3s, transform .3s var(--ease); }
.vs-cart .done { opacity: 0; transform: translateY(8px); display: inline-flex; align-items: center; gap: 6px; }
.vs-cart .done svg { width: 14px; height: 14px; }
.vig-size.play .chips .ok { animation: choix 5s var(--ease) infinite; }
.vig-size.play .vs-cart .go { animation: panierA 5s var(--ease) infinite; }
.vig-size.play .vs-cart .done { animation: panierB 5s var(--ease) infinite; }
@keyframes choix {
  0%, 12% { box-shadow: 0 0 0 0 rgba(23, 128, 74, 0); }
  20% { box-shadow: 0 0 0 5px rgba(23, 128, 74, .16); }
  34%, 100% { box-shadow: 0 0 0 0 rgba(23, 128, 74, 0); }
}
@keyframes panierA { 0%, 44% { opacity: 1; transform: none; } 50%, 86% { opacity: 0; transform: translateY(-8px); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes panierB { 0%, 44% { opacity: 0; transform: translateY(8px); } 50%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } }

/* réglages serrés (vignettes de moins de 350 px) */
@container vig (max-width: 350px) {
  .vig-create .ui { padding: 14px 13px 11px; }
  .vc-body { gap: 11px; margin-top: 10px; }
  .vc-fields { gap: 8px; }
  .vc-foot { font-size: 11px; margin-top: 9px; padding-top: 8px; }
  .vig-size .ui { padding: 15px; }
}

.how-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 15.5px; color: var(--muted);
}
.how-note b { color: var(--ink); font-weight: 600; }
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid var(--line-2); border-radius: 6px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.how-note .more { font-size: 14.5px; }

/* ── Essayage contre réalité (vidéo) ──────────────────────────── */
.film { background: var(--ink); color: #fff; padding: var(--section) 0; position: relative; overflow: hidden; isolation: isolate; }
.film::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -20%; width: 70%; height: 140%;
  background: radial-gradient(closest-side, rgba(0, 85, 254, .28), transparent 70%);
}
.film-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.film .eyebrow { color: rgba(255, 255, 255, .55); }
.film .h2 { margin-top: 26px; }
.film .h2 em { color: #8fb1ff; }
.film .lead { color: rgba(255, 255, 255, .7); margin-top: 24px; max-width: 30em; }
.film .actions { margin-top: 36px; }
.film-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #1a1d24; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); aspect-ratio: 1278 / 1080; }
.film-media video { width: 100%; height: 100%; object-fit: cover; }
.film-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* ça fait réagir : le post LinkedIn qui montrait cette vidéo, ses
   chiffres et un défilement de commentaires (en pause hors écran) */
.buzz { margin-top: clamp(72px, 9vw, 120px); }
.buzz-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px; padding-top: clamp(40px, 5vw, 56px); }
.buzz-head::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, .12); }
.buzz-t { margin-top: 14px; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.01em; color: #fff; }
.buzz-chiffres { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); }
.buzz-chiffres li { display: flex; flex-direction: column; gap: 8px; }
.buzz-chiffres b { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.8vw, 56px); line-height: .95; letter-spacing: -.01em; color: #fff; font-variant-numeric: lining-nums; }
.buzz-chiffres li:first-child b { color: #8fb1ff; }
.buzz-chiffres span { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.buzz .more { color: #fff; }
.buzz .more:hover { color: #9dbbff; }
.buzz-fil {
  margin-top: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.buzz-fil + .buzz-fil { margin-top: 14px; }
.buzz-piste { display: flex; width: max-content; animation: defile 80s linear infinite; animation-play-state: paused; }
.buzz-inverse .buzz-piste { animation-direction: reverse; animation-duration: 64s; }
.buzz.joue .buzz-piste { animation-play-state: running; }
.buzz-fil:hover .buzz-piste { animation-play-state: paused; }
.buzz-set { display: flex; align-items: stretch; gap: 14px; padding-right: 14px; flex: none; }
.avis {
  display: flex; align-items: flex-start; gap: 14px; width: max-content; max-width: 380px;
  padding: 18px 22px 18px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .3s, border-color .3s;
}
.avis:hover { background: rgba(255, 255, 255, .08); border-color: rgba(143, 177, 255, .4); }
.avis-ini { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #4a86ff, var(--navy)); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.avis p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.avis-qui { display: block; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.avis-qui b { font-weight: 600; color: #fff; }
.avis-qui span::before { content: " · "; }
.buzz-note { margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }

/* ── 03 · Ce qui nous distingue ───────────────────────────────────
   Animation liée au défilement : un fil bleu se remplit le long de
   la liste, le point de chaque atout s'allume à son passage, l'atout
   en cours est net et les suivants attendent en retrait. Le grand
   compteur de la colonne fixe suit l'atout en cours. ── */
.why { position: relative; isolation: isolate; overflow: clip; }
.why::before {
  content: ""; position: absolute; z-index: -1; left: -18%; top: 10%; width: 60%; height: 80%;
  background: radial-gradient(closest-side, rgba(0, 85, 254, .07), transparent 72%);
}
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.why-grid .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.why-grid .more { margin-top: 30px; }
.why-cpt { display: flex; align-items: flex-end; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.why-num { display: block; overflow: hidden; font-family: var(--serif); font-size: clamp(104px, 11vw, 168px); line-height: .84; letter-spacing: -.035em; padding: 0 .04em .06em 0; }
.why-num b {
  display: block; font-weight: 400;
  background: linear-gradient(165deg, #5d93ff 0%, var(--blue) 42%, var(--navy) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.why-side { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.why-tot { font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }
.why-seg { display: flex; gap: 5px; }
.why-seg i { width: 24px; height: 3px; border-radius: 3px; background: var(--line-2); transition: background-color .45s var(--ease); }
.why-seg i.on { background: var(--blue); }
.diffs { position: relative; padding-left: 46px; border-top: 1px solid var(--line); counter-reset: diff; }
.diffs::before, .diffs::after {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
}
.diffs::before { background: var(--mist-2); }
.diffs::after {
  background: linear-gradient(to bottom, var(--navy), var(--blue) 70%, #6f9cff);
  transform-origin: 50% 0; transform: scaleY(var(--prog, 1));
}
.diffs.suivi::after { transform: scaleY(var(--prog, 0)); }
.diff { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.diff::before { counter-increment: diff; content: counter(diff, decimal-leading-zero); font: 500 12px/1.9 var(--mono); letter-spacing: .06em; color: var(--blue); transition: color .45s var(--ease); }
.diff::after {
  content: ""; position: absolute; left: -46px; top: 33px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--blue); box-shadow: 0 0 0 5px rgba(0, 85, 254, .12);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.diff h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.01em; }
.diff p { grid-column: 2; margin-top: 8px; color: var(--muted); font-size: 16px; }
.diff h3, .diff p { transition: opacity .5s var(--ease), transform .5s var(--ease); }
/* suivi actif (accueil.js) : les atouts à venir attendent en retrait */
.diffs.suivi .diff:not(.on):not(.passe)::before { color: var(--faint); }
.diffs.suivi .diff:not(.on):not(.passe)::after { background: #fff; border-color: var(--line-2); box-shadow: none; }
.diffs.suivi .diff:not(.on):not(.passe) h3, .diffs.suivi .diff:not(.on):not(.passe) p { opacity: .32; }
.diffs.suivi .diff.passe::after { box-shadow: none; }
.diffs.suivi .diff.passe h3, .diffs.suivi .diff.passe p { opacity: .7; }
.diffs.suivi .diff.on::after { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(0, 85, 254, .16); }
.diffs.suivi .diff.on h3 { transform: translateX(4px); }

/* ── 04 · Pour votre marque ───────────────────────────────────────
   Cartes à la marque : pictogramme sur carré bleu, filet bleu qui se
   trace à l'apparition, au survol la carte se soulève, s'entoure de
   bleu et une lueur suit le pointeur. ── */
.brand { position: relative; isolation: isolate; overflow: hidden; }
.brand::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 254, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 254, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 100% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 70% at 100% 0%, #000 0%, transparent 75%);
}
.brand-top { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.capture { margin: 0; }
.capture-cadre {
  overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 40, 153, .06), 0 44px 90px -40px rgba(0, 40, 153, .45);
}
.capture-barre { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: #f1f3f7; border-bottom: 1px solid var(--line); }
.capture-barre i { width: 10px; height: 10px; border-radius: 50%; background: #d5dae3; }
.capture-barre span { margin-left: 12px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f6f5f2; }
.capture-leg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.capture-leg .more { font-size: 14px; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.pillar {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 30px 26px 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 40, 153, .05), 0 14px 34px -22px rgba(0, 40, 153, .28);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--blue) 55%, #7aa4ff);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease) calc(var(--d, 0s) + .4s);
}
.js-rv .pillars:not(.vu) .pillar::before { transform: scaleX(0); }
.pillar::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 85, 254, .1), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.pillar-ico {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #4a86ff, var(--blue) 45%, var(--navy));
  box-shadow: 0 12px 24px -12px rgba(0, 85, 254, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar-ico svg { width: 22px; height: 22px; }
.js-rv .pillars.vu .pillar-ico { animation: pico .8s cubic-bezier(.3, 1.45, .5, 1) calc(var(--d, 0s) + .3s) both; }
@keyframes pico { from { opacity: 0; scale: .35; rotate: -24deg; } }
.pillar .eyebrow { display: block; margin-top: 28px; transition: color .3s; }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 1.9vw, 27px); line-height: 1.12; margin-top: 12px; letter-spacing: -.01em; text-wrap: balance; }
.pillar p { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.pillar:hover { transform: translateY(-6px); border-color: rgba(0, 85, 254, .4); box-shadow: 0 2px 4px rgba(0, 40, 153, .06), 0 30px 54px -26px rgba(0, 85, 254, .5); }
.pillar:hover::after { opacity: 1; }
.pillar:hover .pillar-ico { transform: rotate(-8deg) scale(1.08); box-shadow: 0 16px 30px -12px rgba(0, 85, 254, .95), inset 0 1px 0 rgba(255, 255, 255, .25); }
.pillar:hover .eyebrow { color: var(--blue); }

/* ── 05 · Intégration ─────────────────────────────────────────────── */
.integ { position: relative; isolation: isolate; overflow: hidden; }
.integ::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 254, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 254, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 45% 55% at 92% 8%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 45% 55% at 92% 8%, #000 0%, transparent 75%);
}
.integ-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.mode {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: 28px 28px 26px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
a.mode:hover { border-color: rgba(0, 85, 254, .4); box-shadow: 0 22px 44px -26px rgba(0, 85, 254, .5); transform: translateY(-4px); }
.mode-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.mode-top img, .mode-top svg { width: 26px; height: 26px; }
.mode-top svg { color: var(--blue); }
.mode-k { font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); transition: color .3s; }
a.mode:hover .mode-k { color: var(--blue); }
.mode h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; margin-top: 30px; }
.mode p { margin-top: 10px; color: var(--muted); font-size: 15.5px; flex: 1; }
.mode .more { margin-top: 22px; align-self: flex-start; font-size: 14.5px; }
a.mode:hover .more { color: var(--blue); }
a.mode:hover .more .i { transform: translateX(3px); }
/* Shopify, l'installation en autonomie : la carte aux couleurs de la marque */
.mode-main {
  color: #fff; border-color: transparent;
  background:
    radial-gradient(90% 85% at 100% 0%, rgba(120, 164, 255, .55), transparent 58%),
    linear-gradient(140deg, var(--navy) 0%, #0a43dc 62%, var(--blue) 100%);
}
.mode-main::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 75%);
}
.mode-main::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-12deg); transition: left .9s var(--ease);
}
a.mode-main:hover::after { left: 120%; }
.mode-main .mode-k { color: rgba(255, 255, 255, .72); }
.mode-main p { color: rgba(255, 255, 255, .8); }
.mode-main .more, a.mode-main:hover .more { color: #fff; }
.mode-main .mode-top img { filter: brightness(0) invert(1); }
a.mode-main:hover .mode-k { color: #fff; }
a.mode-main:hover { border-color: transparent; box-shadow: 0 26px 50px -24px rgba(0, 85, 254, .8); }

/* plateformes : chaque case remplit sa ligne (plus de bande grise
   sous les libellés sur deux lignes), logos en gris puis en couleur
   au survol, « Toutes les plateformes » en bleu */
.plats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1px;
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--line);
}
.plats li { display: flex; min-width: 0; }
.plats a {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 20px 18px;
  background: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--ink-2);
  transition: background-color .25s, color .25s;
}
.plats img, .plats svg { width: 20px; height: 20px; flex: none; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s, transform .35s var(--ease); }
.plats svg { color: var(--blue); filter: none; opacity: 1; }
.plats img.wide { width: auto; height: 11px; }
.plats img.wide.wix { height: 13px; }
.plats img.wide.centra { height: 13px; }
.plats a:hover { background: var(--blue-50); color: var(--blue); }
.plats a:hover img { filter: none; opacity: 1; transform: scale(1.12); }
/* « Toutes les plateformes » : barre pleine largeur sous la grille (27/10/2026, 12 plateformes avec Centra) */
.plats .plat-all { grid-column: 1 / -1; }
.plats .plat-all a { background: var(--blue); color: #fff; font-weight: 600; }
.plats .plat-all a:hover { background: var(--navy); color: #fff; }
.plats .plat-all svg { order: 1; margin-left: auto; color: #fff; transition: transform .3s var(--ease); }
.plats .plat-all a:hover svg { transform: translateX(3px); }
.mode-top img.wide { width: auto; height: 15px; }
.integ-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 15px; color: var(--muted); }

/* ── 06 · Tarifs ──────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.plan-main { background: var(--mist); border-color: var(--mist); }
.plan-k { font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.plan h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -.012em; margin-top: 18px; }
.plan > p { margin-top: 14px; color: var(--muted); max-width: 30em; }
.plan-list { margin-top: 24px; display: grid; gap: 12px; }
.plan-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink-2); }
.plan-list li::before {
  content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: auto; padding-top: 34px; }
.plan-act .more { font-size: 14.5px; }

/* ── Appel final ──────────────────────────────────────────────── */
.cta { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 12vw, 176px) 0; }
.cta::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 75%);
}
.cta::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -55%; width: 90%; height: 100%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 85, 254, .42), transparent 72%);
}
.cta-in { max-width: 980px; margin: 0 auto; text-align: center; }
.cta .eyebrow { color: rgba(255, 255, 255, .5); }
.vision blockquote {
  margin-top: 30px;
  font-family: var(--serif); font-size: clamp(34px, 4.1vw, 60px); line-height: 1.06; letter-spacing: -.016em;
  text-wrap: balance;
}
.vision blockquote em { font-style: italic; color: #9dbbff; }
.vision figcaption { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; text-align: left; }
.vision figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.vision figcaption b { display: block; font-size: 15px; font-weight: 600; }
.vision figcaption span { display: block; font-size: 14px; color: rgba(255, 255, 255, .6); }
.cta .actions { justify-content: center; margin-top: 52px; }
.cta-meta { margin-top: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
/* quatre vêtements inclinés aux coins, qui flottent (en pause hors écran) */
.cta-vets { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-in { position: relative; z-index: 1; }
.cta-vet {
  position: absolute; display: block; overflow: hidden; border-radius: 16px; background: #f7f8fc;
  rotate: var(--r);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .6);
  animation: flotte var(--f, 7s) ease-in-out infinite var(--dl, 0s); animation-play-state: paused;
}
.cta.joue .cta-vet { animation-play-state: running; }
.cta-vet img { display: block; width: 100%; height: auto; }
.cv-1 { --r: -12deg; --f: 7s; width: clamp(84px, 9vw, 142px); left: 3.5%; top: 11%; }
.cv-2 { --r: 10deg; --f: 8s; --dl: -3s; width: clamp(80px, 8.4vw, 132px); right: 4%; top: 9%; }
.cv-3 { --r: 8deg; --f: 8.6s; --dl: -1.5s; width: clamp(70px, 7.2vw, 112px); left: 6%; bottom: 11%; }
.cv-4 { --r: -9deg; --f: 7.6s; --dl: -5s; width: clamp(80px, 8.4vw, 130px); right: 5.5%; bottom: 13%; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-grid .faq-contact { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.faq-grid .faq-contact p { color: var(--muted); font-size: 15.5px; }
.faq-grid .faq-contact .actions { margin-top: 18px; align-items: center; gap: 12px 22px; }

/* ── Blog ─────────────────────────────────────────────────────── */
.journal-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 60px); }
.post { display: flex; flex-direction: column; }
.post-img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post-img img { transform: scale(1.035); }
.post-k { margin-top: 20px; font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.post h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 1.9vw, 27px); line-height: 1.14; letter-spacing: -.01em; transition: color .2s; text-wrap: balance; }
.post:hover h3 { color: var(--blue); }
.post time { margin-top: 12px; font-size: 13.5px; color: var(--faint); }

/* ── 03 · Le jumeau numérique ─────────────────────────────────────
   L'avatar 3D au centre (face, profil puis dos en fondu enchaîné tant
   qu'il est à l'écran), les données du client à gauche, celles du
   vêtement et le verdict de taille à droite, reliés par des filets. ── */
.twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3.4vw, 52px); margin-top: clamp(48px, 6vw, 80px); }
.twin-card {
  position: relative; padding: 22px 22px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 40, 153, .05), 0 30px 60px -40px rgba(0, 40, 153, .45);
}
.twin-k { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.twin-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 85, 254, .14); }
.twin-l { display: grid; margin-top: 14px; }
.twin-l li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.twin-l li:first-child { border-top: 0; }
.twin-l b { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.twin-prod { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.twin-prod img { width: 44px; height: 55px; flex: none; object-fit: cover; border-radius: 9px; background: #f7f8fc; }
.twin-prod span { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.twin-prod b { font-size: 15px; font-weight: 600; color: var(--ink); }
.twin-verdict { margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.twin-vk { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.twin-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tc { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 7px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; }
.tc b { font-size: 16px; color: var(--ink); }
.tc.ok { border: 2px solid var(--ok); background: var(--ok-50); color: var(--ok); font-weight: 600; }
.tc.ok b { color: var(--ok); }
@media (min-width: 1041px) {
  .twin-client::after, .twin-garment::after {
    content: ""; position: absolute; top: 50%; width: clamp(22px, 3.4vw, 52px);
    border-top: 2px dashed rgba(0, 85, 254, .45);
  }
  .twin-client::after { left: 100%; }
  .twin-garment::after { right: 100%; }
}
.twin-av {
  position: relative; display: grid; place-items: end center; margin: 0; aspect-ratio: 4 / 5;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 55% at 50% 42%, #fff, #e6edff 100%);
  border: 1px solid rgba(0, 85, 254, .12);
  box-shadow: 0 50px 90px -60px rgba(0, 40, 153, .6);
}
.twin-av::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(0, 85, 254, .2) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 85%);
}
.twin-badge {
  position: absolute; z-index: 3; top: 16px; left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(135deg, #3f7dff, var(--blue) 45%, var(--navy)); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(0, 85, 254, .9);
}
/* rotation 360° en vidéo (fond, plateau et anneau compris), en boucle tant
   qu'elle est à l'écran ; image d'attente = l'avatar de face */
.twin-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.twin-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--line); }
.twin-points li { font-size: 16px; line-height: 1.5; color: var(--muted); }
.twin-points b { color: var(--ink); font-weight: 600; }

/* ── 06 · Vos données ──────────────────────────────────────────────
   Le tableau de bord de l'app (admin Shopify) redessiné d'après la
   capture d'Arthur : chiffres d'essayage réels de la boutique de test,
   indicateurs de vente présentés sans chiffres. ── */
.data-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.data-l { display: grid; gap: 12px; margin-top: 28px; }
.data-l li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.data-l li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.data-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.dash { margin: 0; }
.dash-cadre {
  overflow: hidden; border-radius: 18px; background: #f1f2f4; border: 1px solid var(--line-2);
  box-shadow: 0 2px 6px rgba(0, 40, 153, .06), 0 50px 90px -50px rgba(0, 40, 153, .5);
}
.dash-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: #fff; border-bottom: 1px solid #e3e5e8; }
.dash-fil { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.dash-fil svg { height: 12px; width: auto; aspect-ratio: 599 / 154; color: var(--ink); }
.dash-fil i { font-style: normal; color: var(--faint); }
.dash-langue { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.dash-corps { display: grid; gap: 10px; padding: 14px; }
.dash-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-kpi4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-t { display: grid; align-content: start; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid #e3e5e8; border-radius: 12px; }
.dash-t span { font-size: 12px; color: var(--ink-2); }
.dash-t b { font-size: 24px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
/* indicateurs chiffrés : valeur et variation sur la période */
.dash-v { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
.dash-v span { grid-column: 1 / -1; }
.dash-v b { font-size: 20px; }
.dash-v em, .dash-ret-v em { padding: 3px 7px; border-radius: 6px; background: #dcf3e5; color: #0d6337; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dash-c { padding: 12px 14px; background: #fff; border: 1px solid #e3e5e8; border-radius: 12px; }
.dash-ct { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* courbe du chiffre d'affaires, avec et sans OptiDress */
.dash-graphe svg { display: block; width: 100%; height: 110px; margin-top: 10px; overflow: visible; }
.dash-axe { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--faint); }
.dash-legende { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.dash-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legende i { width: 14px; height: 3px; border-radius: 2px; }
.dash-legende i.a { background: var(--blue); }
.dash-legende i.s { background: #e0304f; }
.dash-bas { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; }
.dash-art { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dash-ct + .dash-art { margin-top: 8px; border-top: 0; }
.dash-art img { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: #f7f8fc; }
.dash-art b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.dash-art small { font-size: 11px; color: var(--muted); }
.dash-art em { padding: 4px 8px; border-radius: 999px; background: #d9f4e4; color: #0d6337; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dash-art em.gris { background: #eceef2; color: var(--ink-2); }
/* coût des retours : valeur, variation, barres qui baissent */
.dash-ret { display: flex; flex-direction: column; }
.dash-ret-v { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dash-ret-v b { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-barres { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: auto; padding-top: 12px; }
.dash-barres i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(224, 48, 79, .55), rgba(224, 48, 79, .85)); }
.dash-leg { margin-top: 14px; font-size: 13px; color: var(--faint); text-align: center; }

/* ── Trajectoire : aujourd'hui, bientôt, notre cap ─────────────────── */
.cap { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(44px, 5vw, 68px); }
.cap-e {
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 40, 153, .05), 0 30px 60px -44px rgba(0, 40, 153, .4);
}
.cap-e:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 50%; right: -17px; width: 12px; height: 12px;
  border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-50%) rotate(45deg);
}
.cap-k { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cap-e h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.2vw, 31px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.cap-e p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.cap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 20px; }
.cap-tags span { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 7px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.cap-but { background: linear-gradient(150deg, var(--navy), var(--blue) 72%, #3f7dff); border-color: transparent; color: #fff; box-shadow: 0 40px 80px -40px rgba(0, 85, 254, .8); }
.cap-but .cap-k { background: rgba(255, 255, 255, .16); color: #fff; }
.cap-but h3 { color: #fff; }
.cap-but p { color: rgba(255, 255, 255, .84); }

/* ── Responsive (home) ────────────────────────────────────────── */
@media (max-width: 1180px) {
  .plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* noms de plateformes jamais coupés en plein mot (WooCom/merce) */
.plats a { overflow-wrap: normal; }
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 680px; }
  .comp { margin: 8px auto 0; }
  .film-grid, .why-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .why-grid .sec-head, .faq-grid .sec-head { position: static; }
  .why-cpt { display: none; }
  /* étapes empilées : la pastille fléchée pointe vers l'étape suivante */
  .steps { --gap: 72px; grid-template-columns: minmax(0, 1fr); max-width: 500px; }
  .step { display: grid; grid-template-columns: minmax(0, 1fr); }
  .flux { top: auto; margin-top: 0; bottom: calc(var(--gap) / -2); right: auto; left: 50%; transform: translate(-50%, 50%) rotate(90deg); box-shadow: 0 0 0 5px var(--mist), 0 10px 22px -8px rgba(0, 85, 254, .8); }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .brand-top { grid-template-columns: minmax(0, 1fr); }
  .trust-row { grid-template-columns: minmax(0, 1fr); }
  .trust-soutiens { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { padding: 26px 0 28px; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .integ-head, .journal-head { grid-template-columns: minmax(0, 1fr); display: grid; }
  .trust-g { flex-direction: column; align-items: stretch; gap: 22px; }
  .trust-soutiens { align-items: flex-start; }
  .buzz-head { align-items: flex-start; }
  .buzz-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; width: 100%; }
  .avis { max-width: 300px; }
  .avis p { font-size: 14px; }
  .motion-son { height: 48px; font-size: 14px; }
  .motion-ico { width: 36px; height: 36px; }
  .diffs { padding-left: 34px; }
  .diff { grid-template-columns: 40px minmax(0, 1fr); }
  .diff::after { left: -34px; }
}
@media (max-width: 480px) {
  .vision blockquote { line-height: 1.12; }
}

/* ── Tablette (761 à 1 040 px) ─────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1040px) {
  /* étapes : la vignette à gauche, le texte à droite, sur toute la largeur */
  .steps { --gap: 84px; max-width: none; }
  .step { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 56px); align-items: center; }
  .step-n { margin-top: 0; }
  .flux { left: 170px; }
  /* vêtements du bandeau final : plus petits, dans les marges hautes et basses */
  .cv-1 { top: 3%; left: 2.5%; }
  .cv-2 { top: 2.5%; right: 3%; }
  .cv-3 { bottom: 2.5%; left: 4%; }
  .cv-4 { bottom: 3%; right: 3.5%; }
}
@media (max-width: 900px) {
  /* titre du problème : les vêtements passent sous le texte */
  .problem-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .vet-pile { width: 100%; max-width: 400px; margin: 0 auto; }
}
@media (min-width: 761px) and (max-width: 900px) {
  /* chiffres du problème : deux colonnes, la citation dessous */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat.stat-q { grid-column: 1 / -1; margin-top: 30px; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1040px) {
  .conv { grid-template-columns: minmax(0, 1fr); }
  .conv-txt { padding: 0; }
}

/* nouvelles sections sur tablette */
@media (max-width: 1040px) {
  .twin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "av av" "cl ga"; }
  .twin-av { grid-area: av; width: 100%; max-width: 420px; justify-self: center; }
  .twin-client { grid-area: cl; }
  .twin-garment { grid-area: ga; }
  .data-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cap-e:not(:last-child)::after { top: auto; bottom: -21px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* ── Téléphone ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .twin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "cl" "ga"; }
  .twin-points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dash-kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-bas { grid-template-columns: minmax(0, 1fr); }
  .dash-t b { font-size: 21px; }
  .vet-pile { max-width: 360px; }
  .vet-doute { height: 27px; font-size: 12px; padding-left: 10px; }
  .vet-doute i { width: 18px; height: 18px; }
  .cta-vets { display: none; }
  .conv-foule { aspect-ratio: 1 / 1; }
  .conv-leg b { font-size: 30px; }
  /* plateformes : le logo au-dessus du nom, les noms ne sont jamais coupés */
  .plats a { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .plats .plat-all a { flex-direction: row; align-items: center; }
  .note-app { font-size: 13.5px; }
}

/* ── Téléphone : sections de la home plus compactes ──────────── */
@media (max-width: 760px) {
  .hero { padding: 28px 0 56px; }
  .hero .display { font-size: 33px; margin: 18px 0 14px; }
  .pill { height: auto; min-height: 30px; padding: 6px 12px 6px 10px; font-size: 12px; line-height: 1.35; }
  .actions { margin-top: 22px; }
  .note-app { margin-top: 14px; padding: 6px 12px 6px 9px; font-size: 13px; }
  .note-etoiles { width: 75px; height: 15px; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; }
  .hero-alt { margin-top: 18px; padding-top: 14px; }
  .comp { max-width: 350px; }
  .trust-q { font-size: 22px; }
  .stat-n { font-size: 46px; }
  .stat-t { font-size: 15px; }
  .stat-q p { font-size: 21px; }
  .vet-pile { max-width: 290px; }
  .conv { padding: 18px; gap: 20px; }
  .conv-t { font-size: 27px; margin-top: 14px; }
  .conv-p { font-size: 15px; }
  .conv-leg li { font-size: 14.5px; }
  .conv-leg b { font-size: 26px; }
  .conv-tendance { font-size: 14px; }
  .conv-foule { max-width: 320px; width: 100%; margin: 0 auto; }
  .steps { --gap: 56px; }
  .vig { width: 100%; max-width: 330px; margin: 0 auto; }
  .step-t { max-width: 330px; margin: 0 auto; }
  .step h3 { font-size: 23px; margin-top: 14px; }
  .step p { font-size: 15px; }
  .step-f { gap: 8px; margin-top: 14px; padding-top: 14px; }
  .step-f li { font-size: 14px; }
  .step-n { margin-top: 20px; }
  .buzz-t { font-size: 25px; }
  .buzz-chiffres b { font-size: 30px; }
  .twin { gap: 16px; margin-top: 32px; }
  .twin-av { max-width: 290px; }
  .twin-card { padding: 16px 16px 14px; }
  .twin-l li { padding: 8px 0; font-size: 13.5px; }
  .twin-points li { font-size: 14.5px; }
  .diff h3 { font-size: 21px; }
  .diff p { font-size: 14.5px; }
  .pillar { padding: 20px; }
  .pillar h3 { font-size: 21px; }
  .pillar p { font-size: 14.5px; }
  .mode h3 { font-size: 23px; }
  .plan { padding: 22px; }
  .plan h3 { font-size: 26px; }
  .plan-list li { font-size: 15px; }
  .data-l li { font-size: 15px; }
  .data-note { font-size: 14.5px; }
  .cap { gap: 22px; margin-top: 32px; }
  .cap-e { padding: 20px 18px 18px; }
  .cap-e h3 { font-size: 23px; margin-top: 14px; }
  .cap-e p { font-size: 14.5px; }
  .vision blockquote { font-size: 26px; }
  .post h3 { font-size: 21px; }
}

/* ── Écrans tactiles : curseurs de la démo plus faciles à saisir ── */
@media (pointer: coarse) {
  .fld input[type="range"] { height: 26px; margin-top: 0; }
}

/* petits libellés remontés à 11 px minimum */
.pays-s, .pays { font-size: 11px; }
.tag { font-size: 11px; }
@media (max-width: 420px) {
  .actions .btn { width: 100%; }
  .hero-meta { gap: 8px 16px; }
}

/* composition étroite (écrans de 1041 à ~1180 px) : les libellés des pastilles
   deviendraient illisibles, on n'affiche que la lettre de taille */
@container comp (min-width: 521px) and (max-width: 590px) {
  .chips .c { font-size: 0; gap: 0; }
  .chips .c b { font-size: 2.4cqw; }
}

/* composition du héros sur petits écrans : la fiche produit en haut,
   le panneau OptiDress dessous, en léger chevauchement */
@media (max-width: 600px) {
  .comp { aspect-ratio: 335 / 610; max-width: 440px; margin: 4px auto 0; }
}
@container comp (max-width: 520px) {
  .st { top: 0; left: 0; width: 100%; height: 45%; border-radius: 4cqw; }
  .st-bar { height: 10.5cqw; padding: 0 4.5cqw; }
  .st-bar i { width: 4cqw; height: 4cqw; }
  .st-bar .st-bag { height: 3.6cqw; }
  .st-brand { font-size: 3.6cqw; }
  .st-body { grid-template-columns: 42% 58%; }
  .st-info { padding: 5.5cqw 4.5cqw 4cqw; }
  .st-crumb, .st-col, .st-desc, .st-try, .st-cart { display: none; }
  .st-name { font-size: 6cqw; margin-top: 0; }
  .st-price { font-size: 3.6cqw; margin-top: 2cqw; }
  .st-lbl { font-size: 3.3cqw; margin-top: 5cqw; }
  .st-lbl b { gap: 1.2cqw; }
  .st-lbl b::before { width: 2cqw; height: 2cqw; }
  .st-sizes { gap: 1.6cqw; margin-top: 2.4cqw; }
  .st-sizes span { font-size: 3.4cqw; height: 9cqw; border-radius: 1.8cqw; }
  .st-sizes .is-reco { border-width: .5cqw; }
  .ann { left: 50%; top: 33%; max-width: 44cqw; font-size: 2.5cqw; padding: 2cqw 2.6cqw; border-radius: 2cqw; gap: 1.6cqw; }
  .ann::before { width: 1.8cqw; height: 1.8cqw; margin-top: .3cqw; }
  .ann::after { left: 13cqw; top: -1.6cqw; border-width: 1.6cqw; border-top: 0; }
  .pn { top: 41%; left: 9%; right: 9%; width: auto; height: 59%; border-radius: 5cqw; }
  .pn-grip { width: 12cqw; height: 1.1cqw; margin-top: 2.6cqw; }
  .pn-head { font-size: 3.8cqw; padding: 2.4cqw 4.2cqw 0; }
  .pn-head i { width: 3.6cqw; height: 3.6cqw; }
  .pn-stage { margin: 2.6cqw 3.4cqw 0; border-radius: 3cqw; }
  .pn-arr { width: 7.4cqw; height: 7.4cqw; }
  .pn-arr.l { left: 2.4cqw; }
  .pn-arr.r { right: 2.4cqw; }
  .pn-reco { padding: 3.4cqw 4cqw 0; }
  .pn-reco > b { font-size: 3.2cqw; margin-bottom: 2cqw; }
  .chips { gap: 1.6cqw; }
  .chips .c { height: 11.5cqw; font-size: max(8px, 2.3cqw); border-radius: 2cqw; gap: .6cqw; }
  .chips .c b { font-size: 3.7cqw; }
  .chips .ok { border-width: .5cqw; }
  .pn-cart { margin: 3cqw 4cqw 4cqw; height: 10cqw; border-radius: 2cqw; font-size: 3.4cqw; }
}

/* ── Téléphone : moins de mots, moins de blocs, plus d'air ──────
   Sur ordinateur, tout reste. Sur téléphone, on garde l'essentiel de
   chaque section (titre, une phrase, le visuel qui prouve) : détails,
   listes, légendes et textes redondants disparaissent (.m-cache), les
   paragraphes longs ont une version courte (.m-seul). ── */
.m-seul { display: none; }
@media (max-width: 760px) {
  .m-cache { display: none !important; }
  .m-seul { display: inline; }
  .plats, .dash-bas, .faq-contact .more, .posts > :nth-child(3) { display: none; }
  /* respiration : chaque bloc a sa place */
  .hero { padding: 32px 0 64px; }
  .hero .display { font-size: 31px; margin: 20px 0 14px; }
  .actions { margin-top: 26px; }
  .note-app { margin-top: 18px; }
  .comp { max-width: 320px; margin-top: 16px; }
  .trust-q { font-size: 20px; }
  .problem-top { gap: 40px; }
  .vet-pile { max-width: 250px; }
  .stats { margin-top: 48px; }
  .stat, .stat + .stat { padding: 30px 0 32px; }
  .stat-n { font-size: 40px; }
  .stat-q p { font-size: 19px; }
  .conv { margin-top: 56px; padding: 22px 18px; }
  .conv-t { font-size: 25px; }
  .conv-leg b { font-size: 24px; }
  .conv-foule { max-width: 280px; }
  .steps { --gap: 72px; margin-top: 44px; }
  .vig { max-width: 300px; }
  .step h3 { font-size: 21px; }
  .buzz-t { font-size: 23px; }
  .buzz-chiffres b { font-size: 26px; }
  .twin { margin-top: 36px; }
  .twin-av { max-width: 250px; }
  .twin-points { margin-top: 32px; gap: 14px; }
  .diffs { margin-top: 8px; }
  .diff h3 { font-size: 19px; }
  .pillars { gap: 12px; }
  .pillar { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
  .pillar-ico { width: 40px; height: 40px; flex: none; }
  .pillar h3 { margin: 0; font-size: 18px; }
  .mode { padding: 20px; }
  .mode h3 { font-size: 21px; margin-top: 16px; }
  .mode .more { margin-top: 14px; }
  .modes { gap: 12px; }
  .plan { padding: 20px; }
  .plan h3 { font-size: 23px; }
  .cap-e h3 { font-size: 20px; }
  .vision blockquote { font-size: 23px; }
  .post h3 { font-size: 19px; }
  .faq-item summary { font-size: 15px; }
  /* encore moins de chiffres et de blocs à lire */
  .dash-kpi4 { display: none; }
  .conv-foule { max-width: 250px; }
  .comp { max-width: 300px; }
  .stat-qm { font-size: 72px; margin-bottom: 8px; }
  .diff { padding: 22px 0 24px; }
  .step p { text-wrap: pretty; }
}

/* ── Home allégée (validée par Arthur le 25/09/2026) ─────────────
   Un titre, une ligne au plus, le visuel. Les sections jumeau, données et
   trajectoire sont partagées avec les pages OptiDress et OptiMove : leur
   texte en plus n'est pas dans la home, pages_v2.py l'ajoute à ces pages
   (outils/blocs_produit.py). Aucun texte masqué en CSS ici. ── */
/* deux chiffres côte à côte (la citation est retirée) */
@media (min-width: 761px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step-t .more { margin-top: 16px; }
.pillar h3 { margin-top: 26px; }
.mode h3 { margin-top: 22px; }
.mode .more { margin-top: 18px; }
.cap-e h3 { margin-bottom: 4px; }
.data-grid .sec-head { align-self: center; }
.faq-toutes { margin-top: 26px; }
@media (max-width: 760px) {
  .step-t .more { font-size: 14px; }
  .how-note { margin-top: 36px; }
  .pillar h3 { margin: 0; }
  .mode h3 { margin-top: 16px; }
}