/* ==========================================================================
   Invitations digitales (invitations.html) — et blocs repris sur l'accueil et les tarifs.
   Tout est préfixé .inv-, .tel ou .dedans : rien ne touche les autres pages.
   Le mouvement vient de scroll-engine.js (data-sfx) et de js/pages/invitations.js (SYR_motion.on).
   ========================================================================== */
.inv-page section[id]{scroll-margin-top:84px}
/* la lueur des téléphones dépasse de leur colonne : on la coupe au bord de la page (clip ne crée pas de défilement, la scène épinglée marche) */
.inv-page{overflow-x:clip}

/* ---------- Téléphone : cadre commun (accroche, scène, modèles, accueil) ---------- */
.tel{
  --tw:clamp(170px,22vw,290px);
  position:relative;display:block;width:calc(var(--tw) + 20px);padding:10px;direction:ltr;
  border-radius:calc(var(--tw) * .17 + 10px);
  background:linear-gradient(155deg,#34343f,#0b0b10 55%,#1c1c24);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 50px 110px -40px rgba(192,132,252,.5),0 30px 60px -30px rgba(0,0,0,.9);
}
.tel-screen{
  position:relative;display:block;width:var(--tw);aspect-ratio:390/844;overflow:hidden;isolation:isolate;
  border-radius:calc(var(--tw) * .135);background:#14141b;
}
.tel-screen::after{ /* l'îlot de la caméra */
  content:"";position:absolute;z-index:5;top:2.1%;left:50%;width:27%;height:2.7%;transform:translateX(-50%);
  border-radius:99px;background:#050507;pointer-events:none;
}
.tel-screen img{width:100%;height:100%;object-fit:cover}
.tel-screen iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform:scale(var(--k,.5));transform-origin:0 0;pointer-events:none;background:#14141b}
a.tel{color:inherit;transition:transform .5s var(--ease-out)}
a.tel:focus-visible{outline-offset:6px}
/* aperçu manquant (démo pas encore en ligne) : un décor de repli, jamais une image cassée */
.tel-screen.is-noimg img{display:none}
.tel-screen.is-noimg::before{
  content:attr(data-name);position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:12%;text-align:center;
  font-family:var(--font-serif);font-style:italic;font-size:calc(var(--tw) * .17);color:rgba(255,255,255,.92);
  background:linear-gradient(170deg,#2a3f35,#101a16);
}
.tel-screen.is-noimg[data-art="belvedere"]::before{background:linear-gradient(170deg,#E9DCC4,#C9B48F 75%,#8E1F32 190%);color:#4A2A2F}
.tel-screen.is-noimg[data-art="envol"]::before{background:radial-gradient(80% 55% at 50% 30%,rgba(232,172,120,.65),transparent 70%),linear-gradient(170deg,#7A4A32,#2A1812)}
.tel-screen.is-noimg[data-art="velours"]::before{background:radial-gradient(70% 40% at 50% 50%,rgba(240,190,100,.28),transparent 70%),linear-gradient(170deg,#0F4D3E,#082A22)}
.tel-glow{position:absolute;inset:-12% -22%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(192,132,252,.28),rgba(244,114,182,.08) 60%,transparent);pointer-events:none}

/* ---------- 1 · Accroche ---------- */
.inv-hero{padding-block:clamp(36px,7vh,96px) clamp(36px,6vw,72px)}
.inv-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.inv-hero h1{font-size:clamp(2.3rem,4.9vw,4.5rem);max-width:15ch;margin:24px 0 22px}
.inv-hero .lead{margin-bottom:28px}
.inv-hero .lead b{color:var(--text);font-weight:600}
.inv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.inv-facts{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:12px 28px;margin-bottom:26px}
.inv-facts li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}
.inv-facts li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--iris);box-shadow:0 0 12px rgba(244,114,182,.7)}
.inv-hero-visual{position:relative;display:grid;justify-items:center;padding-block:16px}
.inv-hero-visual .tel{--tw:clamp(180px,21vw,284px);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(2deg)}
.inv-hero-chip{
  position:absolute;inset-inline-start:50%;bottom:7%;z-index:6;transform:translateX(-50%);padding:9px 16px;white-space:nowrap;
  border-radius:var(--radius-pill);font-size:.82rem;font-weight:560;color:var(--text);pointer-events:none;
  background:rgba(12,12,16,.72);border:1px solid var(--line-hi);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[dir="rtl"] .inv-hero-chip{transform:translateX(50%)}

/* ---------- 2 · La scène : le téléphone reste, la page l'anime ---------- */
.dedans-intro{padding-block:var(--section) clamp(20px,4vw,44px)}
.dedans-intro h2{font-size:clamp(1.9rem,3.8vw,3.4rem);max-width:20ch;margin-bottom:18px}
.dedans-track{position:relative}
.dedans-pin{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,7vw,110px);align-items:center;
  padding-block:clamp(10px,3vw,40px) var(--section);
}
.dedans-side{min-width:0}
.dedans-list{margin-bottom:22px}
.dedans-list li{
  --k:1;position:relative;display:grid;grid-template-columns:2.8rem minmax(0,1fr);align-items:baseline;column-gap:6px;padding:12px 0;
  border-bottom:1px solid var(--line);color:rgba(245,245,247,calc(.34 + var(--k) * .66));
}
.dedans-list li::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--iris);
  transform:scaleX(var(--k));transform-origin:left center;
}
html[dir="rtl"] .dedans-list li::after{transform-origin:right center}
.dedans-list .n{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--dim)}
.dedans-list li.is-lit .n{color:#F472B6}
.dedans-list .t{font-size:1.12rem;font-weight:560;letter-spacing:-.012em}
.dedans-list .d{grid-column:2;margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--muted)}
.dedans-cap{display:none;padding:16px 20px;border-radius:var(--radius);min-height:7.4em}
.dedans-cap .cap-t{display:block;margin-bottom:6px;font-weight:600}
.dedans-cap .cap-d{display:block;font-size:.92rem;color:var(--muted);line-height:1.5}
.dedans-stage{position:relative;justify-self:center}
.dedans-stage .tel{--tw:min(300px,calc((100vh - 190px) * .462));--tw:min(300px,calc((100svh - 190px) * .462))}
.dedans-demo{display:inline-flex;margin-top:18px;font-size:.88rem;color:#F0ABFC;border-bottom:1px solid rgba(240,171,252,.4)}
.dedans-note{margin-top:14px;font-size:.8rem;color:var(--dim)}
/* bouton transparent posé sur l'écran : toucher le cachet ouvre l'invitation d'exemple */
.tel-open{position:absolute;inset:0;z-index:4;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.tel-open:focus-visible{outline:2px solid #F472B6;outline-offset:-4px}
.tel-open[hidden]{display:none}
.tel-poster{position:absolute;inset:0;z-index:2;transition:opacity .4s var(--ease-lux)}
.tel.is-ready .tel-poster{opacity:0;pointer-events:none}

/* scène active (JS) : le téléphone est épinglé, 34 % d'écran de défilement par pastille */
.dedans-track.is-scene{height:calc(100vh + 10 * 34vh);height:calc(100svh + 10 * 34svh)}
.is-scene .dedans-pin{position:sticky;top:0;height:100vh;height:100svh;padding-block:84px 24px;box-sizing:border-box}
.is-scene .dedans-list .d{display:none}
.is-scene .dedans-cap{display:block}
.is-scene .dedans-note,.is-scene .dedans-demo{display:none}

/* ---------- 3 · Les trois modèles ---------- */
.inv-sec-head{margin-bottom:clamp(36px,5vw,60px)}
.inv-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.inv-model{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.inv-model .tel{--tw:clamp(150px,16vw,220px);margin-bottom:26px}
.inv-model .tel-glow{inset:-8% -16%}
.inv-model-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#F472B6;margin-bottom:8px}
.inv-model h3{font-size:clamp(1.8rem,2.8vw,2.4rem);margin-bottom:12px}
.inv-model p{color:var(--muted);font-size:.94rem;max-width:34ch}
.inv-model .inv-model-open{margin:12px 0 22px;font-size:.84rem;color:var(--dim)}
.inv-model-actions{display:grid;gap:10px;width:100%;max-width:300px;margin-top:auto}
.inv-model-link{margin-top:14px;font-size:.88rem;color:#F0ABFC;border-bottom:1px solid rgba(240,171,252,.4)}
.inv-model-link:hover{border-color:#F0ABFC}
.inv-model-soon{display:none;position:absolute;top:0;inset-inline-start:50%;z-index:7;transform:translate(-50%,-30%);padding:6px 14px;border-radius:var(--radius-pill);font-size:.74rem;font-weight:600;color:#0B0B10;background:var(--iris);white-space:nowrap}
.inv-model.is-soon .inv-model-soon{display:block}
.inv-model.is-soon .tel,.inv-model.is-soon [data-demo-link]{pointer-events:none;opacity:.55}
.inv-swipe{display:none}

/* ---------- 4 · Les réponses ---------- */
.inv-rsvp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.inv-rsvp-copy p{color:var(--muted);margin-bottom:16px;max-width:52ch}
.inv-rsvp-copy .inv-rsvp-soon{padding:14px 18px;border-radius:var(--radius);border:1px dashed var(--line-hi);color:var(--text);font-size:.92rem}
.inv-rsvp-copy .inv-rsvp-soon b{color:#F472B6;font-weight:600}
.inv-link{display:inline-flex;margin-top:6px;color:#F0ABFC;font-weight:560;border-bottom:1px solid rgba(240,171,252,.4)}
.inv-link:hover{border-color:#F0ABFC}
.mock{padding:22px;border-radius:var(--radius-l)}
.mock-flag{display:inline-block;margin-bottom:16px;padding:5px 12px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#0B0B10;background:var(--iris)}
.mock-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.mock-stats div{padding:12px 10px;border-radius:var(--radius-s);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.mock-stats b{display:block;font-size:1.7rem;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mock-stats span{display:block;margin-top:6px;font-size:.72rem;line-height:1.25;color:var(--muted)}
.mock-rows{display:grid}
.mock-rows li{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-top:1px solid var(--line);font-size:.88rem}
.mock-rows li span:last-child{color:var(--muted);text-align:end}
.mock-rows li.no span:last-child{color:var(--dim)}

/* ---------- 5 · Trois étapes ---------- */
.inv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.inv-step{padding:clamp(24px,3vw,34px)}
.inv-step .n{display:block;margin-bottom:22px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;color:var(--dim)}
.inv-step h3{margin-bottom:12px}
.inv-step p{color:var(--muted);font-size:.95rem}

/* ---------- 6 · Les prix (cartes : pricing.css) ---------- */
/* Les trois listes ont la même hauteur : la liste prend la place libre, les boutons restent en bas. */
#prix .plan-list,#invitations .plan-list{flex:1 1 auto}
@media (min-width:901px){#prix .plan.feat,#invitations .plan.feat{margin-block:0}}
/* Ligne sous les cartes : le texte s'étire, l'icône garde sa taille, les logos de paiement restent à droite. */
#prix .pay-strip .lbl,#invitations .pay-strip .lbl{flex:1 1 320px;align-items:flex-start;line-height:1.5}
#prix .pay-strip .lbl svg,#invitations .pay-strip .lbl svg{flex:none;margin-top:2px}
.inv-compare{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;margin-top:28px;border-radius:var(--radius-l);overflow:hidden}
.inv-compare>div{padding:clamp(22px,3vw,34px)}
.inv-compare h3{margin-bottom:16px;font-size:1.15rem}
.inv-compare ul{display:grid;gap:8px;margin-bottom:14px}
.inv-compare li{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;color:var(--muted)}
.inv-compare li span:last-child{color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-compare .tot{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);color:var(--text);font-weight:600}
.inv-compare .note{font-size:.8rem;color:var(--dim);max-width:60ch}
.inv-compare .here{display:flex;flex-direction:column;justify-content:center;gap:8px;background:linear-gradient(165deg,rgba(192,132,252,.14),rgba(244,114,182,.04))}
.inv-compare .here .big{font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.inv-compare .here .big .cur{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:.04em}
.inv-compare .here p{color:var(--muted);font-size:.92rem}

/* ---------- 7 · Et pour mamie ? ---------- */
.inv-elder{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,6vw,90px);align-items:center}
.inv-list{display:grid;gap:22px;margin-top:30px}
.inv-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.inv-list .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--iris-soft);border:1px solid rgba(255,255,255,.12)}
.inv-list .ic svg{width:20px;height:20px;stroke:#F5E1FF}
.inv-list h3{font-size:1.05rem;margin-bottom:4px;letter-spacing:-.01em}
.inv-list p{color:var(--muted);font-size:.94rem}
.carton-wrap{position:relative;display:grid;justify-items:center;padding:18px}
.carton{
  position:relative;width:min(250px,100%);aspect-ratio:105/148;padding:9% 8%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6%;
  color:#243A2F;background:linear-gradient(160deg,#FBF7EC,#EFE6D2);border-radius:4px;transform:rotate(-3deg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(36,58,47,.12) inset;
}
.carton::before{content:"";position:absolute;inset:6px;border:1px solid rgba(139,112,48,.45);border-radius:2px;pointer-events:none}
.carton .c-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8B7030}
.carton .c-n{font-family:var(--font-serif);font-style:italic;font-size:1.7rem;line-height:1.05}
.carton img{width:46%;height:auto;aspect-ratio:1;background:#fff;padding:5px;border-radius:4px}
.carton .c-s{font-size:.72rem;line-height:1.35}
.carton .c-t{margin-top:auto;font-size:.66rem;color:#5B6B60}
.carton-cap{margin-top:22px;font-size:.78rem;color:var(--dim);text-align:center}
.carton-back{position:absolute;top:26px;inset-inline-start:calc(50% - 120px);width:min(250px,86%);aspect-ratio:105/148;border-radius:4px;background:#1B2A22;opacity:.55;transform:rotate(5deg);z-index:-1}

/* ---------- 8 · 9 · 10 · Sérieux, soi-même, données ---------- */
.inv-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.inv-points.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.inv-point{padding:clamp(22px,3vw,32px)}
.inv-point .ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:14px;background:var(--iris-soft);border:1px solid rgba(255,255,255,.12)}
.inv-point .ic svg{width:21px;height:21px;stroke:#F5E1FF}
.inv-point h3{margin-bottom:10px;font-size:1.2rem}
.inv-point p{color:var(--muted);font-size:.95rem}
.inv-contact{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:26px;font-size:.95rem;color:var(--muted)}
.inv-contact a{color:#F0ABFC;border-bottom:1px solid rgba(240,171,252,.4)}
.inv-diy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.inv-diy>div{padding:clamp(24px,3vw,36px);border-radius:var(--radius-l)}
.inv-diy h3{margin-bottom:18px;font-size:1.25rem}
.inv-diy ul{display:grid;gap:12px}
.inv-diy li{display:flex;gap:12px;font-size:.95rem;color:var(--muted);line-height:1.45}
.inv-diy li::before{content:"";flex:none;width:14px;height:1px;margin-top:.75em;background:var(--dim)}
.inv-diy .yes li{color:var(--text)}
.inv-diy .yes li::before{background:var(--iris);width:18px}
.inv-diy .yes{background:linear-gradient(165deg,rgba(192,132,252,.14),rgba(244,114,182,.04))}

/* ---------- 11 · 12 ---------- */
.inv-faq{max-width:860px}
.inv-end{margin-top:0}
.inv-end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- Accueil et tarifs : blocs repris ---------- */
.inv-home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px);border-radius:var(--radius-l);overflow:hidden}
.inv-home h2{font-size:var(--fs-h2);margin-bottom:18px}
.inv-home p.lead{margin-bottom:26px}
.inv-home .inv-actions{margin-bottom:0}
.inv-home-visual{display:grid;justify-items:center}
.inv-home-visual .tel{--tw:clamp(150px,17vw,220px);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(3deg)}

/* ---------- Écrans moyens et petits ---------- */
@media (max-width:1100px){
}
@media (max-width:900px){
  .inv-hero>.wrap{grid-template-columns:1fr}
  .inv-hero h1{max-width:none}
  .inv-hero-visual{order:2;padding-block:8px}
  .inv-hero-visual .tel{--tw:min(52vw,210px)}
  .inv-rsvp,.inv-elder,.inv-compare,.inv-diy,.inv-home{grid-template-columns:1fr}
  .inv-points.three{grid-template-columns:1fr}
  .inv-steps{grid-template-columns:1fr}
  .inv-home-visual{order:-1}
  .inv-compare .here{order:-1}

  /* scène : le téléphone au-dessus, la pastille courante dessous, dix points */
  .dedans-pin{grid-template-columns:1fr;gap:14px;padding-inline:var(--gutter)}
  .dedans-stage{order:-1}
  .dedans-stage .tel{--over:226px;--tw:min(66vw,calc((100vh - var(--over) - 20px) * .462));--tw:min(66vw,calc((100svh - var(--over) - 20px) * .462))}
  .is-scene .dedans-pin{grid-template-rows:minmax(0,1fr) auto;align-content:center;padding-block:76px 80px}
  .is-scene .dedans-list{display:flex;justify-content:center;gap:7px;margin:12px 0 0}
  .is-scene .dedans-list li{display:block;width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,calc(.18 + var(--k) * .75));overflow:hidden}
  .is-scene .dedans-list li::after{display:none}
  .is-scene .dedans-list li>*{display:none}
  .is-scene .dedans-list li.is-cur{background:#F472B6;transform:scale(1.35)}
  .dedans-cap{min-height:0;padding:12px 16px;text-align:center}
  .dedans-cap .cap-d{display:none}
  .is-scene .dedans-side{display:flex;flex-direction:column;gap:0}
  .is-scene .dedans-side .dedans-cap{order:-1}
  .dedans-list{margin-bottom:0}
  .inv-models{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;direction:ltr;
    margin-inline:calc(-1 * var(--gutter));padding:24px var(--gutter) 10px;
  }
  .inv-models::-webkit-scrollbar{display:none}
  .inv-model{flex:0 0 min(80%,320px);scroll-snap-align:center;direction:ltr}
  html[dir="rtl"] .inv-model{direction:rtl}
  .inv-model .tel{--tw:min(48vw,190px)}
  .inv-swipe{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:.8rem;color:var(--dim)}
}
@media (min-width:900px) and (max-height:760px){
  .dedans-intro .lead{display:none}
}
@media (max-width:899px) and (min-height:780px){
  .dedans-stage .tel{--over:306px}
  .dedans-cap .cap-d{display:block}
}
@media (max-width:560px){
  .inv-facts{grid-template-columns:1fr}
  .mock-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-actions .btn{flex:1 1 100%}
  .inv-compare li{flex-wrap:wrap;gap:2px 16px}
}

/* ---------- Mouvement réduit ou sans scène : tout posé, rien d'épinglé ---------- */
@media (prefers-reduced-motion:reduce){
  .dedans-track.is-scene{height:auto}
  .is-scene .dedans-pin{position:static;height:auto}
  .tel-poster{transition:none}
  .inv-hero-visual .tel,.inv-home-visual .tel{transform:none}
}