/* =========================================================
   shopzy.css — page vitrine du produit SHOPZY (abonnement)
   Vient après app.css : réutilise .btn/.hide mais définit son propre
   univers — la vitrine ne doit jamais influencer une boutique cliente
   (fichier chargé uniquement par index.html).

   Design « Comptoir » (2026-08-22) : éditorial premium pierre + or,
   généré avec ui-ux-pro-max (palette Premium dark + gold accent,
   typographie Cormorant/Montserrat, pattern Feature-Rich Showcase,
   style Exaggerated Minimalism). Chaque paire texte/fond vérifiée :
   #57534E sur #FAFAF9 = 6,8:1 · #A16207 sur #FAFAF9 = 4,9:1 ·
   #FFFFFF sur #A16207 = 4,9:1 · #D9A93F sur #1C1917 = 8,1:1.

   ANIMATIONS : chorégraphie riche demandée explicitement — MAIS tout
   est enfermé derrière (prefers-reduced-motion: no-preference) : un
   visiteur qui préfère réduire les animations voit une page immobile
   et complète. Uniquement transform/opacity/translate/scale (jamais
   width/height/top). CONVENTION ANTI-CONFLIT : les ENTRÉES animent
   `transform` (via animation, fill both) ; les SURVOLS et boucles
   animent les propriétés individuelles `translate`/`scale`/`rotate`,
   qui se composent avec transform sans jamais l'écraser.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;0,700;1,600&family=Montserrat:wght@400;500;600;700&display=swap');


:root{
  --z-bg:#FAFAF9; --z-bg-2:#F5F5F4;
  --z-ink:#1C1917; --z-ink-2:#0C0A09;
  --z-muted:#57534E; --z-soft:#6E6863;
  --z-gold:#A16207; --z-gold-d:#854D0E; --z-gold-l:#FBF3DF;
  --z-gold-dark:#D9A93F;            /* or sur fond sombre uniquement */
  --z-card:#FFFFFF; --z-line:#E7E5E4; --z-line-d:#D6D3D1;
  --z-dark:#1C1917; --z-dark-2:#292524;
  --z-serif:'Cormorant',Georgia,'Times New Roman',serif;
  --z-sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --z-ombre:0 14px 40px -20px rgba(28,25,23,.28);
  --z-ease:cubic-bezier(.22,.61,.21,1);
}

/* ---------- socle ---------- */
html{scroll-padding-top:84px}
body.suc{
  background:var(--z-bg); color:var(--z-ink);
  font-family:var(--z-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* `clip` et non `hidden` : `hidden` fait de body une boîte de défilement,
     ce qui décrochait l'en-tête position:sticky de la page d'accueil. Voir
     le bloc « PAS DE DÉPLACEMENT LATÉRAL » en bas de ce fichier. */
  overflow-x:clip;
}
.suc ::selection{background:var(--z-gold-l); color:var(--z-gold-d)}
.suc :focus-visible{outline:2px solid var(--z-gold); outline-offset:3px; border-radius:4px}
.suc-skip{
  position:fixed; top:-60px; left:16px; z-index:200; padding:10px 16px;
  background:var(--z-ink); color:#fff; border-radius:0 0 10px 10px;
  font-size:13.5px; font-weight:600; transition:top .2s;
}
.suc-skip:focus{top:0}

/* boutons : recadrés sur l'univers pierre + or (app.css fournit la base) */
.suc .btn{
  font-family:var(--z-sans); font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; border-radius:11px;
  border:1px solid var(--z-line-d); background:transparent; color:var(--z-ink);
  box-shadow:none; cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .2s, background .2s, color .2s, translate .22s var(--z-ease);
}
.suc .btn:hover{border-color:var(--z-ink); translate:0 -1px}
.suc .btn.primary{background:var(--z-gold); border-color:transparent; color:#fff}
.suc .btn.primary:hover{background:var(--z-gold-d)}
.suc .btn.gold{background:var(--z-gold); border-color:transparent; color:#fff}
.suc .btn.gold:hover{background:var(--z-gold-dark); color:var(--z-ink-2)}
.suc .btn.ghost{border-color:transparent}
.suc .btn.ghost:hover{color:var(--z-gold-d)}

/* ---------- en-tête ---------- */
.suc-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,249,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.suc-nav.scrolled{border-bottom-color:var(--z-line); box-shadow:0 8px 24px -20px rgba(28,25,23,.35)}
.suc-nav-in{
  max-width:1160px; margin:0 auto; padding:0 20px; height:66px;
  display:flex; align-items:center; gap:22px;
}
.suc-brand{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--z-serif); font-weight:700; font-size:24px;
  letter-spacing:.02em; color:var(--z-ink);
}
.suc-brand .mark{width:19px; height:19px; fill:var(--z-gold)}
.suc-nav-links{display:none; gap:26px; margin-left:8px}
.suc-nav-links a{
  text-decoration:none; color:var(--z-muted); font-size:14px; font-weight:500;
  position:relative; padding:4px 0;
}
.suc-nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--z-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--z-ease);
}
.suc-nav-links a:hover{color:var(--z-ink)}
.suc-nav-links a:hover::after{transform:scaleX(1)}
.suc-nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
/* « Mon compte » reste visible sur TÉLÉPHONE.
   Il était masqué sous 560px pour désencombrer l'en-tête : comme les liens
   de navigation sont eux aussi masqués sous 900px, un visiteur sur mobile
   n'avait plus AUCUN moyen d'atteindre son compte. Pour faire tenir les deux
   boutons, l'appel à l'action se raccourcit au lieu de disparaître. */
.mot-court{display:none}
@media (max-width:559.98px){
  .suc-nav-in{gap:10px; padding:0 14px}
  .suc-brand{font-size:20px; gap:7px}
  .suc-brand .mark{width:16px; height:16px}
  .suc-nav-cta{gap:7px}
  .suc-nav-cta .btn{font-size:11.5px; padding:8px 11px; letter-spacing:.05em}
  .mot-long{display:none}
  .mot-court{display:inline}
}
@media (min-width:900px){ .suc-nav-links{display:flex} }

/* barre de progression de lecture (le JS remplit --lu ; transform seul) */
.suc-progress{
  position:fixed; top:0; left:0; right:0; height:2.5px; z-index:110;
  background:var(--z-gold); transform:scaleX(var(--lu,0));
  transform-origin:left; pointer-events:none;
}

/* ---------- héros ---------- */
.suc-hero{
  position:relative; max-width:1160px; margin:0 auto;
  padding:64px 20px 40px; text-align:center;
}
/* halos décoratifs : éléments réels (et non plus ::before/::after), pour que
   le JS puisse leur appliquer une parallaxe via `translate` (data-par).
   Position/couleur posées en style en ligne dans le HTML. */
.suc-halo{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(70px); opacity:.5; pointer-events:none;
}
.suc-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border:1px solid var(--z-line-d); border-radius:999px;
  background:rgba(255,255,255,.7); font-size:12.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--z-gold-d);
}
.suc-tag svg{width:13px; height:13px; fill:var(--z-gold)}
.suc-hero h1{
  margin:26px auto 0; max-width:820px;
  font-family:var(--z-serif); font-weight:600;
  font-size:clamp(2.7rem, 8.5vw, 5.4rem); line-height:1.04;
  letter-spacing:-.012em; color:var(--z-ink-2);
}
.suc-hero h1 em{
  font-style:italic; color:var(--z-gold); position:relative; white-space:nowrap;
}
.suc-hero h1 em::after{
  content:''; position:absolute; left:2%; right:2%; bottom:.02em; height:2px;
  background:linear-gradient(90deg, transparent, var(--z-gold), transparent);
}
.suc-hero .lead{
  margin:22px auto 0; max-width:640px;
  font-size:clamp(1.02rem, 2.4vw, 1.17rem); line-height:1.7; color:var(--z-muted);
}
.suc-cta-row{margin-top:30px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.suc-cta-row .btn{padding:15px 30px; font-size:13.5px}
.suc-hero-note{margin:18px auto 0; font-size:13px; color:var(--z-soft); max-width:480px}

/* cartes chiffrées illustratives */
.suc-strip{
  margin:52px auto 0; max-width:860px;
  display:grid; grid-template-columns:1fr; gap:14px;
}
.suc-strip .card{
  background:var(--z-card); border:1px solid var(--z-line);
  border-radius:16px; padding:20px 22px; text-align:left;
  box-shadow:var(--z-ombre); will-change:transform;
  transition:scale .25s var(--z-ease);
}
.suc-strip .card:hover{scale:1.02}
.suc-strip .card span{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--z-soft);
}
.suc-strip .card b{
  display:block; margin-top:6px; font-family:var(--z-serif);
  font-size:34px; font-weight:700; line-height:1.1; color:var(--z-ink-2);
  font-variant-numeric:tabular-nums;
}
.suc-strip .card em{display:block; margin-top:5px; font-style:normal; font-size:12.5px; color:var(--z-soft)}
.suc-strip .card.on{border-top:3px solid var(--z-gold)}
.mini-chart{display:flex; align-items:flex-end; gap:5px; height:44px; margin-top:10px}
.mini-chart i{
  flex:1; border-radius:3px 3px 0 0; background:#EDE3CB;
  transform-origin:bottom;
}
.mini-chart i.on{background:var(--z-gold)}
@media (min-width:700px){
  .suc-strip{grid-template-columns:repeat(3,1fr); gap:18px}
  .suc-strip .card.on{translate:0 -10px}
}

/* ---------- bande de réassurance (bande défilante) ---------- */
.suc-band{border-top:1px solid var(--z-line); border-bottom:1px solid var(--z-line); margin-top:56px}
.suc-band-in{max-width:1160px; margin:0 auto; padding:22px 20px}
.suc-band .it{display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.45; color:var(--z-muted)}
.suc-band .it svg{
  width:26px; height:26px; flex:0 0 auto; fill:none;
  stroke:var(--z-gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* Bande défilante partagée (réassurance + secteurs). PAR DÉFAUT (sans JS,
   ou animations réduites) c'est une grille enveloppée et centrée, TOUT est
   lisible et les copies `aria-hidden` sont masquées. Le défilement continu
   n'est activé que dans le bloc @media (prefers-reduced-motion: no-preference)
   plus bas — voir css d'animation. L'espacement est porté par la marge des
   items (jamais par `gap`) : c'est ce qui garantit deux moitiés strictement
   identiques, donc une boucle sans saccade au translateX(-50%). */
.suc-marquee{display:flex; flex-wrap:wrap; justify-content:center; align-items:center}
.suc-marquee > [aria-hidden="true"]{display:none}
.suc-marquee .it{flex:0 0 auto; margin:6px 22px; white-space:nowrap}
.suc-marquee .s{flex:0 0 auto; margin:5px}

/* ---------- sections ---------- */
.suc-section{max-width:1160px; margin:0 auto; padding:clamp(56px,9vw,104px) 20px 0}
.suc-eyebrow{
  display:block; text-align:center; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--z-gold);
}
.suc-section h2{
  margin:14px auto 0; text-align:center; max-width:760px;
  font-family:var(--z-serif); font-weight:600;
  font-size:clamp(1.95rem, 4.6vw, 3.05rem); line-height:1.12;
  letter-spacing:-.008em; color:var(--z-ink-2);
}
.suc-section p.center{
  margin:16px auto 0; max-width:640px; text-align:center;
  font-size:15.5px; line-height:1.7; color:var(--z-muted);
}

/* ---------- audience ---------- */
.suc-audience{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--z-card); border:1px solid var(--z-line); border-radius:18px;
  padding:26px 24px; box-shadow:var(--z-ombre);
}
.suc-audience .ic{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px;
  background:var(--z-gold-l); display:grid; place-items:center;
}
.suc-audience .ic svg{width:26px; height:26px; fill:none; stroke:var(--z-gold-d); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.suc-audience b{font-size:17px; font-weight:600; letter-spacing:-.01em}
.suc-audience p{margin:8px 0 0; font-size:14.5px; line-height:1.7; color:var(--z-muted)}
@media (max-width:560px){ .suc-audience{flex-direction:column} }

/* ---------- secteurs (deux bandes défilantes) ---------- */
.suc-sectors{
  margin-top:34px; display:flex; flex-direction:column; gap:12px;
}
.suc-sectors .s{
  padding:10px 18px; border:1px solid var(--z-line-d); border-radius:999px;
  background:var(--z-card); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--z-muted); cursor:default;
  transition:translate .22s var(--z-ease), border-color .22s, background .22s, color .22s;
}
.suc-sectors .s:hover{translate:0 -3px; border-color:var(--z-gold); color:var(--z-gold-d); background:var(--z-gold-l)}
.suc-sectors .s.on{background:var(--z-gold-l); border-color:var(--z-gold); color:var(--z-gold-d); font-weight:600}

/* ---------- fonctionnalités ---------- */
.suc-feats{
  margin-top:40px; display:grid; grid-template-columns:1fr; gap:16px;
}
.suc-feat{
  background:var(--z-card); border:1px solid var(--z-line); border-radius:16px;
  padding:24px 22px;
  transition:translate .28s var(--z-ease), box-shadow .28s, border-color .28s;
}
.suc-feat:hover{translate:0 -5px; box-shadow:var(--z-ombre); border-color:var(--z-line-d)}
.suc-feat .ic{
  width:44px; height:44px; border-radius:12px; background:var(--z-gold-l);
  display:grid; place-items:center; margin-bottom:14px;
  transition:scale .28s var(--z-ease), rotate .28s var(--z-ease);
}
.suc-feat:hover .ic{scale:1.08; rotate:-4deg}
.suc-feat .ic svg{width:22px; height:22px; fill:none; stroke:var(--z-gold-d); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.suc-feat b{display:block; font-size:16px; font-weight:600; letter-spacing:-.01em}
.suc-feat p{margin:7px 0 0; font-size:14px; line-height:1.65; color:var(--z-muted)}
@media (min-width:640px){ .suc-feats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .suc-feats{grid-template-columns:repeat(4,1fr)} }

/* ---------- étapes ---------- */
.suc-steps{
  position:relative; margin-top:44px; display:grid; grid-template-columns:1fr; gap:30px;
}
/* filet doré horizontal reliant les numéros — dessiné au défilement (scaleX
   piloté par le JS). Masqué en pile mobile, affiché quand les étapes sont en
   ligne (≥760px). */
.suc-steps-rail{display:none}
.suc-step{position:relative; text-align:left; padding-top:8px}
.suc-step .n{
  display:block; font-family:var(--z-serif); font-style:italic; font-weight:600;
  font-size:44px; line-height:1; color:var(--z-gold);
}
.suc-step b{display:block; margin-top:14px; font-size:16.5px; font-weight:600}
.suc-step p{margin:7px 0 0; font-size:14.5px; line-height:1.65; color:var(--z-muted)}
@media (min-width:760px){
  .suc-steps{grid-template-columns:repeat(3,1fr); gap:36px}
  .suc-steps-rail{
    display:block; position:absolute; left:6%; right:6%; top:30px; height:2px;
    background:linear-gradient(90deg, var(--z-gold), color-mix(in srgb, var(--z-gold) 15%, transparent));
    transform-origin:left; z-index:0;
  }
}

/* ---------- tarifs ---------- */
.suc-plans{
  margin-top:44px; display:grid; grid-template-columns:1fr; gap:18px;
  align-items:start;
}
.suc-plan{
  position:relative; background:var(--z-card); border:1px solid var(--z-line);
  border-radius:20px; padding:30px 26px;
  transition:translate .3s var(--z-ease), box-shadow .3s;
}
.suc-plan:hover{translate:0 -6px; box-shadow:var(--z-ombre)}
.suc-plan.on{border:2px solid var(--z-gold); box-shadow:var(--z-ombre)}
.suc-plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--z-gold); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
  white-space:nowrap;
}
.suc-plan h3{
  margin:0; font-family:var(--z-serif); font-weight:600; font-size:28px;
  letter-spacing:-.01em; color:var(--z-ink-2);
}
.suc-plan .cap{margin:4px 0 0; font-size:13px; color:var(--z-muted)}
.suc-plan .price{
  margin-top:18px; font-size:38px; font-weight:700; letter-spacing:-.02em;
  color:var(--z-ink-2); font-variant-numeric:tabular-nums;
}
.suc-plan .price span{font-size:14px; font-weight:500; color:var(--z-soft); letter-spacing:0}
.suc-plan .per{
  margin:2px 0 0; font-size:12.5px; color:var(--z-gold-d); font-weight:600;
  font-family:ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.01em;
}
.suc-plan ul{margin:20px 0 24px; padding:0; list-style:none}
.suc-plan li{
  position:relative; padding:9px 0 9px 26px; font-size:14px; line-height:1.5;
  color:var(--z-muted); border-top:1px solid var(--z-bg-2);
}
.suc-plan li:first-child{border-top:0}
.suc-plan li b{color:var(--z-ink); font-weight:600}
.suc-plan li::before{
  content:''; position:absolute; left:0; top:12px; width:16px; height:16px;
  background:var(--z-gold);
  -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='M20 6 9 17l-5-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='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (min-width:900px){
  .suc-plans{grid-template-columns:repeat(3,1fr); gap:20px}
  .suc-plan.on{scale:1.03}
}

/* encart domaine */
.suc-addon{
  margin-top:26px; display:flex; gap:18px; align-items:flex-start;
  background:var(--z-gold-l); border:1px solid #EEDFB9; border-radius:18px;
  padding:24px 22px;
}
.suc-addon .ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:#fff;
  display:grid; place-items:center;
}
.suc-addon .ic svg{width:22px; height:22px; fill:none; stroke:var(--z-gold-d); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.suc-addon b{font-weight:600}
.suc-addon > div > b{font-size:15.5px}
.suc-addon p{margin:7px 0 0; font-size:14px; line-height:1.7; color:#6B5A32}
.suc-addon code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12.5px;
  background:#fff; border:1px solid #EEDFB9; border-radius:6px; padding:1px 6px;
  color:var(--z-gold-d);
}
@media (max-width:560px){ .suc-addon{flex-direction:column} }

/* ---------- FAQ ---------- */
.suc-faq{margin:36px auto 0; max-width:720px; border-top:1px solid var(--z-line)}
.suc-faq details{border-bottom:1px solid var(--z-line)}
.suc-faq summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 2px;
  font-size:16px; font-weight:600; letter-spacing:-.01em; position:relative;
  transition:color .2s;
}
.suc-faq summary::-webkit-details-marker{display:none}
.suc-faq summary:hover{color:var(--z-gold-d)}
.suc-faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:18px; height:18px;
  margin-top:-9px; background:var(--z-gold);
  -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' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%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' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--z-ease);
}
.suc-faq details[open] summary::after{transform:rotate(135deg)}
.suc-faq details p{
  margin:0; padding:0 24px 20px 2px; font-size:14.5px; line-height:1.7;
  color:var(--z-muted);
}

/* ---------- bandeau final ---------- */
.suc-cta-band{
  position:relative; text-align:center; border-radius:24px;
  background:linear-gradient(150deg, var(--z-dark), var(--z-dark-2));
  padding:clamp(48px,8vw,76px) 24px; overflow:hidden;
}
/* halo doré à l'intérieur du bandeau sombre : le z-index 0 le pose au-dessus
   du fond mais le texte (z-index 1) reste devant. */
.suc-cta-band .suc-halo{z-index:0; opacity:.55}
.suc-cta-band h2, .suc-cta-band p, .suc-cta-band .btn{position:relative; z-index:1}
.suc-cta-band h2{
  margin:0; font-family:var(--z-serif); font-weight:600;
  font-size:clamp(2rem, 5vw, 3.2rem); letter-spacing:-.01em; color:#FAFAF9;
}
.suc-cta-band p{
  margin:14px auto 0; max-width:520px; font-size:15px; line-height:1.7; color:#D6D3D1;
}
.suc-cta-band .btn{margin-top:28px; padding:15px 32px}

/* ---------- pied de page ---------- */
.suc-foot{border-top:1px solid var(--z-line); margin-top:clamp(56px,9vw,104px)}
.suc-foot .wrap{
  max-width:1160px; margin:0 auto; padding:34px 20px 42px;
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;
}
.suc-foot .suc-brand{font-size:21px}
.suc-foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px}
.suc-foot-links a{text-decoration:none; color:var(--z-muted); font-size:13.5px; transition:color .2s}
.suc-foot-links a:hover{color:var(--z-gold-d)}
.suc-foot small{color:var(--z-soft); font-size:12.5px}


/* =========================================================
   ANIMATIONS — intégration du handoff « Comptoir cinétique » (2026-08-23).
   Tout vit dans @media (prefers-reduced-motion: no-preference) ET, pour ce
   qui masque du contenu, sous body:not(.sans-js) : animations réduites OU
   JavaScript absent = page immobile, complète, lisible. Uniquement
   transform / opacity / translate / scale (exceptions assumées : hauteur des
   barres du mini-graphique et ouverture de la FAQ, hors flux critique).
   Convention anti-conflit : les ENTRÉES animent `transform` ; les SURVOLS et
   boucles animent `translate`/`scale`/`rotate`, qui se composent sans écraser.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }

  /* 1. apparitions au défilement (le JS pose .in ; cascade --d de 80 ms) */
  body:not(.sans-js) .rv,
  body:not(.sans-js) .rv-mots {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--z-ease), transform .8s var(--z-ease);
    transition-delay: var(--d, 0ms);
  }
  body:not(.sans-js) .rv.in,
  body:not(.sans-js) .rv-mots.in { opacity: 1; transform: none; }

  /* 2. titres révélés mot à mot — le padding vertical de .16em évite que le
        masque ne rogne accents et jambages sur un line-height serré (1.04) */
  .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .16em 0; margin: -.16em 0; }
  .mot > span { display: inline-block; transform: translateY(110%) rotate(3deg); transition: transform .8s var(--z-ease); }
  .rv-mots.in .mot > span { transform: none; }
  .rv-mots.in .mot:nth-child(2) > span { transition-delay: 45ms }
  .rv-mots.in .mot:nth-child(3) > span { transition-delay: 90ms }
  .rv-mots.in .mot:nth-child(4) > span { transition-delay: 135ms }
  .rv-mots.in .mot:nth-child(5) > span { transition-delay: 180ms }
  .rv-mots.in .mot:nth-child(6) > span { transition-delay: 225ms }
  .rv-mots.in .mot:nth-child(n+7) > span { transition-delay: 270ms }

  /* 3. bandes défilantes : passage de la grille enveloppée (défaut) au
        défilement continu. Les copies aria-hidden réapparaissent — c'est la
        seconde moitié, strictement identique, qui rend la boucle invisible. */
  body:not(.sans-js) .suc-band-in,
  body:not(.sans-js) .suc-sectors { overflow: hidden }
  body:not(.sans-js) .suc-marquee {
    flex-wrap: nowrap; justify-content: flex-start; width: max-content;
    animation: suc-marq 42s linear infinite;
  }
  body:not(.sans-js) .suc-marquee.inverse { animation-name: suc-marq-inv; animation-duration: 38s; }
  body:not(.sans-js) .suc-marquee > .it[aria-hidden="true"] { display: flex; }
  body:not(.sans-js) .suc-marquee > .s[aria-hidden="true"] { display: block; }
  @keyframes suc-marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
  @keyframes suc-marq-inv { from { transform: translateX(-50%) } to { transform: translateX(0) } }

  /* 4. barres du mini-graphique : poussent à l'entrée (hauteur posée par le
        JS ; la transition + le décalage produisent la montée en éventail) */
  body:not(.sans-js) .mini-chart i { transition: height 1s var(--z-ease); }
  body:not(.sans-js) .mini-chart i:nth-child(2) { transition-delay: .08s }
  body:not(.sans-js) .mini-chart i:nth-child(3) { transition-delay: .16s }
  body:not(.sans-js) .mini-chart i:nth-child(4) { transition-delay: .24s }
  body:not(.sans-js) .mini-chart i:nth-child(5) { transition-delay: .32s }
  body:not(.sans-js) .mini-chart i:nth-child(6) { transition-delay: .40s }

  /* 10. filet doré des étapes (scaleX piloté par le JS au défilement) */
  .suc-steps-rail { transform: scaleX(0); }

  /* 6 + 7. cartes : inclinaison au survol + bande lumineuse qui traverse */
  .suc-tilt { position: relative; overflow: hidden; transition: translate .3s var(--z-ease), rotate .3s var(--z-ease), box-shadow .3s; }
  .suc-sweep {
    position: absolute; inset-block: 0; width: 45%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--z-gold) 10%, transparent), transparent);
    transform: translateX(-140%) skewX(-16deg);
    transition: transform .9s var(--z-ease); pointer-events: none;
  }

  /* 8. boutons magnétiques (translate posé par le JS au mousemove) */
  .suc-mag { transition: background .2s, border-color .2s, color .2s, translate .25s var(--z-ease); }

  /* 9. curseur : point d'or + halo à retard (souris fine uniquement) */
  .suc-cur, .suc-cur-halo { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; border-radius: 50%; }
  .suc-cur { width: 10px; height: 10px; background: var(--z-gold); mix-blend-mode: multiply; transition: scale .25s, opacity .25s; }
  .suc-cur-halo { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--z-gold) 45%, transparent); z-index: 119; transition: scale .3s, opacity .3s; }

  /* 11. filet d'or qui se trace sous un surtitre à l'entrée */
  .suc-eyebrow::after {
    content: ''; display: block; height: 1px; max-width: 120px; margin-top: 8px;
    background: var(--z-gold); transform: scaleX(0); transform-origin: left;
    transition: transform .9s var(--z-ease) .2s;
  }
  .suc-eyebrow.center::after { margin-inline: auto; transform-origin: center }
  .suc-eyebrow.in::after { transform: scaleX(1); }

  /* 14 + 15. respiration de la formule vedette + onde sur les numéros d'étape */
  .suc-plan.on { animation: suc-breathe 6s ease-in-out infinite }
  @keyframes suc-breathe { 0%, 100% { scale: 1 } 50% { scale: 1.015 } }
  .suc-step .n { position: relative }
  .suc-step.in .n::after {
    content: ''; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid var(--z-gold-dark); animation: suc-ring 1.6s ease-out .2s 2;
  }
  @keyframes suc-ring { from { opacity: .55; scale: 1 } to { opacity: 0; scale: 1.8 } }

  /* 12. halos décoratifs qui respirent (parallaxe `translate` posée par le JS) */
  .suc-halo { animation: suc-glow 9s ease-in-out infinite }
  @keyframes suc-glow { 0%, 100% { opacity: .35; scale: 1 } 50% { opacity: .8; scale: 1.06 } }
}

/* =========================================================
   VITRINES D'EXEMPLE (section « À quoi peut ressembler votre boutique »)
   Chaque carte contient une VRAIE mise en page de boutique construite à
   1000 px de large, puis réduite à 39 % dans un cadre qui la rogne — d'où
   un aperçu fidèle plutôt qu'un schéma. Le balisage vient de la maquette
   fournie et garde ses styles en ligne ; seul ce qui doit s'adapter à
   l'écran est repris ici.

   TOUT EST PILOTÉ PAR --k (facteur d'échelle) : la largeur de colonne, la
   taille du cadre et le `scale()` intérieur le partagent. Sans lui, les
   cartes de 414 px déborderaient d'un téléphone de 375 px — le piège
   classique d'une grille à colonnes fixes.
   ========================================================= */
.suc-vitrines{
  margin-top:44px; display:grid;
  grid-template-columns:repeat(auto-fit, calc(414px * var(--k,1)));
  justify-content:center; align-items:start; gap:18px;
}
/* Sur PC la section déborde volontairement de la colonne de texte (1160) :
   il y a de la place à droite et à gauche, autant montrer trois vitrines
   confortables plutôt que trois vignettes serrées. */
.suc-large{max-width:1360px}

.suc-vitr{
  border:1px solid var(--z-line); border-radius:18px; background:var(--z-card);
  padding:12px; overflow:hidden;
  transition:translate .28s var(--z-ease), box-shadow .28s, border-color .28s;
}
.suc-vitr:hover{translate:0 -5px; box-shadow:var(--z-ombre); border-color:var(--z-line-d)}

/* le cadre qui rogne la vitrine réduite ; --h est propre à chaque carte */
.suc-vitr .ecran{
  width:calc(390px * var(--k,1));
  height:calc(var(--h) * 1px * var(--k,1));
  border-radius:12px; overflow:hidden; position:relative;
}

.suc-vitr .meta{padding:13px 4px 3px}
.suc-vitr .meta b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.suc-vitr .meta span{display:block; margin-top:2px; font-size:12.5px; color:var(--z-soft)}

.suc-vitr-note{
  margin:22px auto 0; max-width:560px; text-align:center;
  font-size:12.5px; line-height:1.6; color:var(--z-soft);
}

/* Réduction progressive : à chaque palier, colonne + cadre + contenu
   rétrécissent ensemble, donc l'aperçu reste entier et rien ne déborde. */
@media (max-width:1379px){ .suc-vitrines{--k:.92} }
/* Palier ajouté pour tenir la promesse « 3 par ligne » sur un portable :
   à .92 la colonne fait 381px, trois n'entrent qu'à partir de 1219px. À .80
   elles font 331px, donc trois tiennent dès ~1070px — la largeur d'écran la
   plus courante. */
@media (max-width:1219px){ .suc-vitrines{--k:.80} }
@media (max-width:1000px){ .suc-vitrines{--k:.92} }
/* Calcul : la section a 20px de marge de chaque côté, donc 414 × k doit
   tenir dans (largeur − 40). À 375px : 335 disponibles → k ≤ 0,80. */
@media (max-width:459px){  .suc-vitrines{--k:.78} }
@media (max-width:389px){  .suc-vitrines{--k:.70} }

@media (prefers-reduced-motion: no-preference){
  /* l'accent respire doucement, décalé par colonne : neuf cartes qui
     pulseraient à l'unisson feraient clignoter la page. */
  .suc-vitr{animation:vitrRespire 7s ease-in-out infinite}
  .suc-vitr:nth-child(3n+2){animation-delay:-2.3s}
  .suc-vitr:nth-child(3n){animation-delay:-4.6s}
  @keyframes vitrRespire{0%,100%{opacity:.94}50%{opacity:1}}
}

/* =========================================================
   PAS DE DÉPLACEMENT LATÉRAL
   `overflow-x:hidden` posé sur `body` seul ne suffit pas : si c'est `html`
   qui défile, la page se déplace quand même du doigt. On coupe donc aux DEUX
   niveaux.
   `clip` plutôt que `hidden` : `hidden` fait de l'élément une boîte de
   défilement, ce qui casserait l'en-tête collant (position:sticky). `clip`
   rogne sans rien rendre défilable — l'en-tête continue de suivre.
   Les défilements horizontaux VOLONTAIRES (rayons, choix de styles,
   carrousel) sont dans des conteneurs internes : ils ne sont pas touchés.
   Le zoom à deux doigts reste possible : le désactiver rendrait le site
   inutilisable pour qui a besoin d'agrandir.
   ========================================================= */
html{overflow-x:clip}
body{overflow-x:clip; max-width:100%}

/* =========================================================
   MENU DE TÉLÉPHONE
   Sous 900px les liens de l'en-tête sont masqués : « Espace gérant » et
   « Tarifs » devenaient inatteignables. Construit sur <details>, donc sans
   JavaScript : il s'ouvre au doigt comme au clavier, et survivrait à un
   script en échec.
   ========================================================= */
.suc-menu{display:none; position:relative}
.suc-menu > summary{
  list-style:none; cursor:pointer; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--z-line-d); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; background:#fff;
}
.suc-menu > summary::-webkit-details-marker{display:none}
.suc-menu > summary span{width:16px; height:1.6px; border-radius:2px; background:var(--z-ink)}
.suc-menu[open] > summary{border-color:var(--z-ink)}
.suc-menu nav{
  /* Ancré à DROITE : le bouton est collé au bord droit de l'en-tête, un
     ancrage à gauche faisait sortir le panneau de l'écran sur téléphone. */
  position:absolute; top:46px; right:0; left:auto; z-index:120; min-width:196px;
  background:#fff; border:1px solid var(--z-line); border-radius:14px;
  box-shadow:var(--z-ombre); padding:6px; display:flex; flex-direction:column;
}
.suc-menu nav a{
  padding:11px 13px; border-radius:9px; text-decoration:none;
  color:var(--z-ink); font-size:14px; font-weight:500;
}
.suc-menu nav a:hover{background:var(--z-gold-l); color:var(--z-gold-d)}
@media (max-width:899.98px){
  .suc-menu{display:block}
  /* Le bouton « Mon compte » ferait doublon avec le menu, qui le contient. */
  .suc-nav-cta .btn.ghost{display:none}
}

/* Badge « 1er mois offert » sur la carte Essentiel (à gauche pour ne pas
   heurter le badge « Le plus choisi » centré de la carte Domaine voisine). */
.suc-plan-badge.essai{
  left:20px; transform:none; background:var(--z-gold-d);
}

/* ── Comparatif « Pourquoi nous » (avantages vs concurrence) ──────────── */
.suc-zero{
  max-width:820px; margin:34px auto 0; display:flex; align-items:center; gap:26px;
  background:var(--z-gold-l); border:1px solid #EBD9AE; border-radius:22px; padding:26px 32px;
}
.suc-zero .big{
  font-family:var(--z-serif); font-weight:700; color:var(--z-gold-d);
  font-size:clamp(58px,11vw,92px); line-height:.85; letter-spacing:-.02em; flex:none;
}
.suc-zero .big span{font-size:.5em; vertical-align:top; margin-left:2px}
.suc-zero .txt b{display:block; font-family:var(--z-sans); font-weight:700; font-size:19px; color:var(--z-ink-2)}
.suc-zero .txt span{display:block; margin-top:6px; color:var(--z-muted); font-size:14.5px; line-height:1.55}

.suc-compare{
  max-width:820px; margin:28px auto 0; background:var(--z-card);
  border:1px solid var(--z-line); border-radius:18px; overflow:hidden;
}
.suc-compare > div{
  display:grid; grid-template-columns:1.3fr 1fr 1.4fr; gap:12px;
  align-items:center; padding:14px 18px; border-top:1px solid var(--z-line);
}
.suc-compare > div:first-child{border-top:0}
.suc-compare .cmp-head{background:var(--z-bg-2); font-family:var(--z-sans); font-size:12.5px; font-weight:700; letter-spacing:.02em}
.suc-compare .cmp-head .me{color:var(--z-gold-d)}
.suc-compare .cmp-head .them{color:var(--z-soft)}
.suc-compare span{min-width:0}
.suc-compare .crit{font-weight:600; color:var(--z-ink); font-size:13.5px; line-height:1.4}
.suc-compare .me{font-weight:600; color:var(--z-ink-2); font-size:13.5px; line-height:1.4}
.suc-compare .me b{color:var(--z-gold-d); font-weight:800}
.suc-compare .cmp-row .me{position:relative; padding-left:20px}
.suc-compare .cmp-row .me::before{content:"\2713"; position:absolute; left:0; color:var(--z-gold); font-weight:800}
.suc-compare .them{color:var(--z-soft); font-size:12.5px; line-height:1.45}
.suc-compare-note{margin-top:12px !important; font-size:12px; color:var(--z-soft)}

@media (max-width:560px){
  .suc-zero{flex-direction:column; text-align:center; gap:12px; padding:24px 22px}
  .suc-compare .cmp-head{display:none}
  .suc-compare > div{grid-template-columns:1fr; gap:4px; padding:15px 16px}
  .suc-compare .crit{font-size:14.5px; margin-bottom:3px}
  .suc-compare .cmp-row .me{position:static; padding-left:0}
  .suc-compare .cmp-row .me::before{content:"\2713\A0SHOPZY\A0: "; position:static; color:var(--z-gold-d); font-weight:700; font-size:11.5px; letter-spacing:.02em}
  .suc-compare .cmp-row .them::before{content:"Ailleurs\A0: "; color:var(--z-soft); font-weight:700; font-size:11.5px}
}