:root{
  --cream:#FBEFF2; --ink:#141112; --muted:#7A6A70;
  --terra:#C24D6E; --sage:#5F7A61; --rouge:#A63A2B; --rose:#F6D6DD; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#app{max-width:480px;margin:0 auto;min-height:100dvh}
.ecran{display:none;flex-direction:column;min-height:100dvh;padding:28px 20px calc(32px + env(safe-area-inset-bottom))}
.ecran.actif{display:flex;animation:entre .25s ease}
@keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sombre{background:var(--ink);color:var(--cream)}
.marque{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;margin-bottom:40px}
.kicker{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);margin:8px 0 12px}
h1{font-family:'Playfair Display',serif;font-weight:700;font-size:44px;line-height:1.05;letter-spacing:-.02em}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--terra)}
.sombre h1 em{color:var(--rose)}
h2{font-family:'Playfair Display',serif;font-weight:700;font-size:32px;line-height:1.1;margin-bottom:20px}
.lead{font-size:17px;line-height:1.5;color:var(--muted);margin-top:16px}
.sombre .lead{color:#CFC5BA}
.etapes{list-style:none;margin:32px 0;display:flex;flex-direction:column;gap:12px}
.etapes li{display:flex;align-items:center;gap:14px;font-weight:600;font-size:16px}
.etapes span{width:32px;height:32px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:800;color:var(--terra)}
.coche{display:flex;align-items:center;gap:10px;font-size:15px;margin-top:auto;margin-bottom:14px}
.coche input{width:20px;height:20px;accent-color:var(--terra)}
.btn{display:block;width:100%;border:0;border-radius:999px;padding:18px 24px;background:var(--terra);color:#fff;font:800 17px Inter,sans-serif;text-align:center;text-decoration:none;cursor:pointer;margin-top:12px}
.btn:disabled{opacity:.4;cursor:default}
.btn.secondaire{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.mini{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
.legal{opacity:.8}
.retour{align-self:flex-start;border:0;background:var(--card);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grille button{border:2px solid transparent;background:var(--card);border-radius:20px;padding:16px 12px;font:600 15px Inter,sans-serif;text-align:left;cursor:pointer;color:var(--ink)}
.grille button .e{display:block;font-size:24px;margin-bottom:6px}
.grille button.sel{border-color:var(--ink);background:#FBE3EA}
.champ{width:100%;margin-top:14px;border:0;border-radius:16px;padding:16px;font:15px Inter,sans-serif;background:var(--card)}
#b-occasion,#b-analyser{margin-top:auto}
.depot{display:grid;place-items:center;background:var(--card);border:2px dashed #D8CCBF;border-radius:28px;min-height:300px;cursor:pointer;overflow:hidden;text-align:center;font-weight:600;color:var(--muted);line-height:1.8}
.depot img{width:100%;max-height:420px;object-fit:contain}
.conseils{margin:18px 0 20px 20px;color:var(--muted);font-size:14px;line-height:1.7}
.chargement{margin:auto;text-align:center}
.pastille{width:72px;height:72px;margin:0 auto 24px;border-radius:50%;border:6px solid var(--rose);border-top-color:var(--terra);animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.carte{background:var(--card);border-radius:28px;padding:20px;box-shadow:0 20px 50px rgba(60,40,20,.10)}
.verdict{border-radius:20px;padding:22px;background:#FBE3EA}
.verdict .v{font-family:'Playfair Display',serif;font-weight:700;font-size:32px;color:var(--terra)}
.verdict.ok{background:#E7EFE6}.verdict.ok .v{color:var(--sage)}
.verdict.non{background:#F6DEDA}.verdict.non .v{color:var(--rouge)}
.verdict p{font-size:16px;line-height:1.5;margin-top:10px}
.notes{display:flex;gap:8px;margin-top:14px}
.notes div{flex:1;background:var(--cream);border-radius:16px;padding:12px 4px;text-align:center;font-size:12px;color:var(--muted);font-weight:600}
.notes strong{display:block;font-family:'Playfair Display',serif;font-size:28px;color:var(--ink)}
.bonus{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.bonus:not(:empty)::before{content:"💡 "}
#b-partager{margin-top:24px}
.avantages{list-style:none;margin:28px 0;display:flex;flex-direction:column;gap:12px;font-size:16px}
#b-payer{margin-top:auto}
.pro{margin-top:14px;padding:14px 16px;border-left:4px solid var(--terra);background:var(--cream);border-radius:0 14px 14px 0;font-size:14px;line-height:1.5}
.pro:empty{display:none}
.pro b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);margin-bottom:4px}
.avis{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:14px;color:var(--muted)}
.avis button{border:0;background:var(--card);width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer}
.avis.envoye button{display:none}
.liens a{color:inherit}
/* Univers « Hey ! Mirette » : rose et noir, miroir de Blanche-Neige */
.rayures{background:repeating-linear-gradient(90deg,#F6D6DD 0 34px,#FBE9ED 34px 68px)}
.marque{display:flex;align-items:center;gap:10px}
.marque i{font-weight:500}
.sombre .marque img{filter:invert(88%) sepia(12%) saturate(500%) hue-rotate(295deg)}
.btn{background:var(--ink)}
.sombre .btn{background:#F6D6DD;color:#141112}
h1,h2{font-weight:900}
/* --- Accueil façon maquette : photos, cartes d'étapes, bouton rose dégradé --- */
:root{--rose-vif:#E23A72;--rose-vif2:#F0679A}
.accueil{background:radial-gradient(120% 60% at 50% 0%,#FFF8FA 0%,#FBEFF2 60%),#FBEFF2;position:relative;overflow:hidden;padding-top:20px}
.accueil::before,.accueil::after{content:"";position:absolute;border-radius:50%;background:#F8D3DE;opacity:.55;z-index:0}
.accueil::before{width:220px;height:220px;right:-110px;top:52%}
.accueil::after{width:260px;height:260px;left:-150px;bottom:-90px}
.accueil > *{position:relative;z-index:1}
.hero{position:relative;padding:0 0 8px;min-height:380px}
.hero .photo{position:absolute;top:70px;width:34%;max-width:150px;height:300px;object-fit:cover;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 55%,transparent 100%)}
.hero .gauche{left:-20px}
.hero .droite{right:-20px;top:30px}
.hero > :not(.photo){position:relative;z-index:1}
.logo-accueil{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:26px}
.nom-marque{font:900 30px/1 'Playfair Display',serif}
.nom-marque i{font-weight:700}
.slogan{font:600 11px Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;margin-top:6px;text-align:center}
.titre-accueil{text-align:center;font-size:42px;margin:0 auto;max-width:300px;position:relative;text-shadow:0 0 18px #FBEFF2,0 0 6px #FBEFF2}
.titre-accueil em{color:var(--rose-vif);font-style:italic}
.souligne{display:block;width:150px;height:14px;margin:2px 0 0 auto;margin-right:22px;color:var(--rose-vif)}
.accueil .lead{text-align:center;max-width:250px;margin:14px auto 0;font-size:15px;color:#4a3b42;text-shadow:0 0 10px #FBEFF2,0 0 4px #FBEFF2}
.etapes-cartes{list-style:none;display:flex;flex-direction:column;gap:12px;margin:18px 0 20px}
.etapes-cartes li{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-radius:22px;padding:12px 14px;box-shadow:0 8px 24px rgba(194,77,110,.08)}
.pastille-ic{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--rose-vif2),var(--rose-vif));box-shadow:0 6px 16px rgba(226,58,114,.35)}
.pastille-ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.etapes-cartes b{display:flex;align-items:center;gap:8px;font-size:15px}
.etapes-cartes small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.num{width:20px;height:20px;border-radius:50%;background:var(--rose-vif);color:#fff;font-size:11px;display:inline-grid;place-items:center;flex:0 0 20px}
.accueil .coche{margin-top:0}
.coche input{accent-color:var(--rose-vif)}
.btn-rose,.btn{background:linear-gradient(90deg,var(--rose-vif2),var(--rose-vif));box-shadow:0 10px 24px rgba(226,58,114,.35)}
.btn.secondaire{background:transparent;box-shadow:none}
.btn-rose{display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px}
.sombre .btn{background:linear-gradient(90deg,var(--rose-vif2),var(--rose-vif));color:#fff}
@media (max-width:360px){.hero .photo{width:30%}.titre-accueil{font-size:36px}}
/* ajustements accueil : photos fondues sur les côtés, texte dégagé */
.hero .photo{top:96px;width:120px;height:280px;opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 45%,transparent 100%)}
.hero .gauche{left:-34px}
.hero .droite{right:-34px;top:70px}
.titre-accueil{font-size:37px;max-width:250px}
.souligne{width:130px;margin-right:4px}
.accueil .lead{max-width:220px}
.hero{min-height:360px}
.hero{min-height:330px}
/* v3 : photos nettes, fondu léger seulement côté texte et en haut, coupées par une courbe blanche */
.accueil{padding-top:16px}
.hero{min-height:400px}
.hero .photo{top:64px;width:132px;height:400px;opacity:1;
  -webkit-mask-image:linear-gradient(var(--sens),#000 70%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(var(--sens),#000 70%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}
.hero .gauche{--sens:to right;left:-20px}
.hero .droite{--sens:to left;right:-20px;top:24px;height:440px}
.bas{position:relative;z-index:2;background:#FFFBFC;margin:-70px -20px 0;padding:26px 20px 8px;border-radius:56% 56% 0 0 / 70px 70px 0 0;flex:1;display:flex;flex-direction:column}
.bas .etapes-cartes{margin-top:4px}
.bas .etapes-cartes li{background:#fff;box-shadow:0 8px 24px rgba(194,77,110,.10)}
.accueil::before{z-index:3}
.accueil::before{z-index:0}
.hero .photo{width:128px;-webkit-mask-image:linear-gradient(var(--sens),#000 50%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 12%);mask-image:linear-gradient(var(--sens),#000 50%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 12%)}
.hero .gauche{left:-34px}
.hero .droite{right:-34px}
.titre-accueil{font-size:35px;max-width:235px}
.accueil .lead{max-width:205px;font-size:14.5px}
@media (min-width:430px){.hero .photo{width:150px}.hero .gauche{left:-10px}.hero .droite{right:-10px}.titre-accueil{font-size:38px;max-width:270px}.accueil .lead{max-width:240px}}
/* petits détails de la maquette */
.i-coeur{position:relative}
.i-coeur::after{content:"♥";position:absolute;left:50%;top:-.38em;transform:translateX(-50%);font-size:.42em;color:var(--rose-vif);text-shadow:0 0 0 #FBEFF2}
.eclats{position:absolute;width:30px;height:30px;left:38px;top:86px;color:var(--rose-vif);z-index:2}
.coeur-deco{position:absolute;width:24px;height:24px;right:52px;top:236px;color:var(--rose-vif);z-index:2;transform:rotate(12deg)}
@media (min-width:430px){.eclats{left:70px}.coeur-deco{right:90px}}
.hero > .eclats,.hero > .coeur-deco{position:absolute}
.hero > .eclats{left:58px;top:132px}
.hero > .coeur-deco{right:44px;top:262px}
@media (min-width:430px){.hero > .eclats{left:84px}.hero > .coeur-deco{right:96px}}
.hero > .eclats{left:40px;top:100px}
@media (min-width:430px){.hero > .eclats{left:70px}}
/* v4 : femme en pied (selfie miroir) à droite, homme à gauche avec bulle de verdict */
.hero{min-height:470px}
.hero .gauche{top:150px;left:-26px;width:132px;height:212px;object-fit:cover;object-position:top}
.hero .droite{top:28px;right:-6px;width:104px;height:466px;object-fit:cover;object-position:top;
  -webkit-mask-image:linear-gradient(to left,#000 75%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%);mask-image:linear-gradient(to left,#000 75%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%)}
.bulle{position:absolute;left:6px;top:350px;z-index:3;background:#fff;border:2px solid var(--rose-vif);border-radius:22px;padding:8px 12px;font-size:13px;line-height:1.25;box-shadow:0 8px 20px rgba(226,58,114,.18)}
.bulle::before{content:"";position:absolute;top:-9px;left:58px;width:14px;height:14px;background:#fff;border-left:2px solid var(--rose-vif);border-top:2px solid var(--rose-vif);transform:rotate(45deg)}
.titre-accueil{max-width:225px}
.accueil .lead{max-width:200px}
.hero > .coeur-deco{right:20px;top:20px}
.bas{margin-top:-46px}
@media (min-width:430px){.hero .gauche{left:-4px;width:150px;height:240px}.hero .droite{right:6px;width:118px;height:528px}.hero{min-height:520px}.bulle{left:20px;top:390px}.hero > .coeur-deco{right:40px}}
.hero > .bulle{position:absolute;width:auto}
.hero > .coeur-deco{display:none}
.hero{min-height:520px}
.hero .droite{top:104px;right:-4px;width:96px;height:430px}
.hero .gauche{top:168px;left:-26px;width:130px;height:182px}
.hero > .bulle{left:6px;top:360px}
.titre-accueil{font-size:34px;max-width:250px}
.accueil .lead{max-width:205px}
.hero > .eclats{left:30px;top:118px}
@media (min-width:430px){.hero{min-height:560px}.hero .droite{right:8px;width:108px;height:484px}.hero .gauche{left:-4px;width:150px;height:210px}.hero > .bulle{left:18px;top:392px}.titre-accueil{font-size:37px;max-width:270px}.hero > .eclats{left:56px}}
.hero .gauche{-webkit-mask-image:linear-gradient(to right,#000 55%,transparent 98%),linear-gradient(to bottom,transparent 0,#000 14%,#000 72%,transparent 100%);mask-image:linear-gradient(to right,#000 55%,transparent 98%),linear-gradient(to bottom,transparent 0,#000 14%,#000 72%,transparent 100%)}
/* fidélité à la maquette : textes bleu nuit, grandes pastilles, bouton lumineux, courbe asymétrique */
.accueil{--nuit:#1B1E4B;--ardoise:#555A85}
.accueil .titre-accueil{color:#0F1130}
.accueil .lead{color:var(--ardoise)}
.etapes-cartes b{color:var(--nuit);font-size:16px}
.etapes-cartes small{color:var(--ardoise);font-size:13.5px}
.pastille-ic{flex:0 0 60px;height:60px;background:linear-gradient(145deg,#F25C8E,#E2336D)}
.pastille-ic svg{width:27px;height:27px}
.num{background:#E2336D}
.bas{border-radius:62% 38% 0 0 / 96px 46px 0 0;background:#FFFAFC}
.accueil .coche{color:var(--nuit);font-size:16px}
.coche input{width:22px;height:22px;accent-color:#E2336D}
.btn-rose{font-size:22px;padding:20px 24px;background:linear-gradient(90deg,#E2336D,#F25C8E 55%,#E2336D);box-shadow:0 12px 30px rgba(226,51,109,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.accueil #compteur{color:var(--ardoise);font-weight:600;font-size:15px}
.accueil .legal,.accueil .liens{color:var(--ardoise)}
.bulle{color:var(--nuit);font-size:14px;border-width:2px;border-radius:24px}
/* v5 : la scène sans texte en fond (fidèle à la maquette), vrais textes et boutons par-dessus */
.avec-fond{background:url(/img/fond-accueil.jpg) center top / 100% auto no-repeat,#FFFAFC}
.avec-fond::before,.avec-fond::after{display:none}
.avec-fond .hero{min-height:calc(min(100vw,480px) * 1.24)}
.avec-fond .logo-accueil{background:rgba(255,250,252,.0)}
.avec-fond .nom-marque,.avec-fond .slogan{text-shadow:0 0 14px #fff,0 0 4px #fff}
.avec-fond .titre-accueil{font-size:33px;max-width:240px;text-shadow:0 0 18px #fff,0 0 8px #fff,0 0 2px #fff}
.avec-fond .lead{max-width:210px;text-shadow:0 0 12px #fff,0 0 6px #fff,0 0 2px #fff}
.avec-fond .hero > .bulle{left:10px;top:calc(min(100vw,480px) * .62)}
.avec-fond .hero > .eclats{left:30px;top:96px}
.avec-fond .hero > .coeur-deco{display:block;right:14px;top:18px}
.avec-fond .bas{margin-top:-40px}
@media (min-width:430px){.avec-fond .titre-accueil{font-size:37px;max-width:280px}.avec-fond .lead{max-width:250px}}
.avec-fond .hero{min-height:calc(min(100vw,480px) * 1.31)}
.avec-fond .hero > .bulle{left:6px;top:calc(min(100vw,480px) * .80)}
.avec-fond .lead{max-width:200px}
@media (min-width:430px){.avec-fond .lead{max-width:250px}.avec-fond .hero > .bulle{left:14px;top:calc(min(100vw,480px) * .70)}}
.lien-discret{background:none;border:0;color:var(--ardoise,#555A85);text-decoration:underline;font:600 14px Inter,sans-serif;margin:12px auto 0;display:block;cursor:pointer}
/* écran d'offre : deux formules */
.formules{display:flex;flex-direction:column;gap:14px;margin:26px 0 8px}
.formule{position:relative;text-align:left;border:2px solid #3a3236;background:#221d20;color:#FBEFF2;border-radius:24px;padding:18px 20px;cursor:pointer;font-family:Inter,sans-serif;display:grid;grid-template-columns:1fr auto;row-gap:4px}
.formule .f-titre{font:900 22px 'Playfair Display',serif}
.formule .f-prix{font:800 24px Inter,sans-serif;grid-row:1 / span 2;grid-column:2;align-self:center}
.formule .f-prix small{font-size:14px;font-weight:600;opacity:.8}
.formule .f-detail{font-size:13px;opacity:.8;grid-column:1}
.formule.vedette{border-color:#E2336D;background:linear-gradient(135deg,rgba(242,92,142,.18),rgba(226,51,109,.10))}
.f-badge{position:absolute;top:-11px;left:18px;background:#E2336D;color:#fff;font:800 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
#e-offre .liens{margin-top:auto}
/* pièces conseillées (affiliation) */
.achats{margin-top:16px;border-top:1px dashed #F2C4D3;padding-top:14px}
.achats-titre{font-weight:800;font-size:14px;color:#1B1E4B;margin-bottom:10px}
.achats ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.achats li{background:#FFF5F8;border-radius:16px;padding:10px 12px}
.achats li span{display:block;font-weight:700;font-size:14px;color:#1B1E4B;margin-bottom:8px}
.achats li div{display:flex;flex-wrap:wrap;gap:6px}
.achats a{font:700 12px Inter,sans-serif;text-decoration:none;color:#fff;background:linear-gradient(90deg,#E2336D,#F25C8E);padding:7px 12px;border-radius:999px}
.achats a[data-boutique="vinted"]{background:#09B1BA}
.achats-mention{font-size:11px;color:#7A6A70;margin-top:8px}

/* v6 : la démonstration du produit remplace la photo d'ambiance (tenue réelle -> verdict de Mirette) */
.accueil:not(.avec-fond) .hero{min-height:0;padding-bottom:6px}
.accueil:not(.avec-fond) .hero > .eclats{left:26px;top:92px}
.accueil:not(.avec-fond) .hero > .coeur-deco{display:block;right:22px;top:150px}
.accueil:not(.avec-fond) .titre-accueil{font-size:36px;max-width:300px}
.accueil:not(.avec-fond) .lead{max-width:290px}
.accueil:not(.avec-fond) .bas{margin-top:18px}
.demo{position:relative;width:216px;height:392px;margin:22px auto 0;transform:rotate(-2deg)}
.demo-carte{position:absolute;inset:0;margin:0;border-radius:30px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 22px 50px rgba(226,51,109,.28),0 4px 12px rgba(20,17,18,.10);opacity:0;transition:opacity .6s ease}
.demo-carte.on{opacity:1}
.demo-carte img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:24px}
.demo-occasion{position:absolute;top:12px;left:12px;background:#141112;color:#fff;font:700 12px Inter,sans-serif;padding:6px 11px;border-radius:999px}
.demo-carte figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:18px;padding:10px 12px;font:500 12px/1.35 Inter,sans-serif;color:#1B1E4B;border:2px solid #E2336D;box-shadow:0 8px 18px rgba(20,17,18,.18)}
.demo-carte figcaption b{display:block;font:900 17px 'Playfair Display',serif;color:#E2336D;margin-bottom:2px}
.demo-carte figcaption.ok{border-color:#2E7D4F}.demo-carte figcaption.ok b{color:#2E7D4F}
.demo-carte figcaption.non{border-color:#B3261E}.demo-carte figcaption.non b{color:#B3261E}
.demo-points{position:absolute;left:0;right:0;bottom:-20px;display:flex;justify-content:center;gap:7px;transform:rotate(2deg)}
.demo-points i{width:7px;height:7px;border-radius:50%;background:#F2C4D3}
.demo-points i.on{background:#E2336D}
.demo-legende{text-align:center;font-size:12px;color:#555A85;margin-top:30px}
@media (max-width:360px){.demo{width:190px;height:346px}}

/* v6.1 : verdict accroché sous la carte (on voit toute la tenue), bouton avant les étapes */
.demo{width:188px;height:330px;margin:18px auto 58px}
.demo-carte{overflow:visible}
.demo-carte figcaption{left:-22px;right:-22px;bottom:-46px;transform:rotate(2deg)}
.demo-points{bottom:-70px}
.demo-legende{margin-top:26px}
.accueil:not(.avec-fond) .bas{margin-top:10px;padding-top:22px}
.accueil:not(.avec-fond) .coche{margin-top:0}
.titre-etapes{font:800 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#E2336D;margin:26px 0 10px;text-align:center}
.accueil:not(.avec-fond) .etapes-cartes{margin:0 0 18px}
@media (max-width:360px){.demo{width:170px;height:300px}}
/* v6.2 : chaussures visibles, espace resserré pour garder le bouton visible sans défiler */
.demo-carte img{object-position:center 88%}
.demo-points{display:none}
.accueil:not(.avec-fond){padding-top:12px}
.accueil:not(.avec-fond) .logo-accueil{margin-bottom:14px}
.accueil:not(.avec-fond) .lead{margin-top:10px;font-size:14px}
.demo{margin:14px auto 54px}
.demo-legende{margin-top:0;font-size:11px}
.accueil:not(.avec-fond) .bas{margin-top:6px;padding-top:18px}
/* choix de la photo : appareil photo ou galerie */
.choix-photo{display:flex;gap:10px;margin-top:12px}
.btn-choix{flex:1;text-align:center;padding:14px 10px;border-radius:999px;font:800 14px Inter,sans-serif;cursor:pointer;color:#fff;background:linear-gradient(90deg,#E2336D,#F25C8E);box-shadow:0 8px 18px rgba(226,51,109,.28)}
.btn-choix.clair{background:#fff;color:#1B1E4B;border:2px solid #F2C4D3;box-shadow:none}

/* appareil photo intégré */
button.btn-choix{border:0;font-family:Inter,sans-serif}
.depot{cursor:pointer}
.camera{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column}
.camera[hidden]{display:none}
.camera video{flex:1;min-height:0;width:100%;object-fit:contain;background:#000}
.camera video.miroir{transform:scaleX(-1)}
.cam-aide{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;right:16px;text-align:center;color:#fff;font:600 14px Inter,sans-serif;text-shadow:0 1px 6px #000}
.cam-info{position:absolute;top:60px;left:16px;right:16px;text-align:center;color:#FFD3E0;font:600 13px Inter,sans-serif}
.cam-compte{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 140px 'Playfair Display',serif;text-shadow:0 4px 30px #000;pointer-events:none}
.cam-barre{display:flex;align-items:center;justify-content:space-around;padding:16px 12px calc(18px + env(safe-area-inset-bottom));background:#141112}
.cam-barre button{border:0;background:#2a2428;color:#fff;font:700 15px Inter,sans-serif;border-radius:999px;min-width:56px;height:56px;padding:0 14px;cursor:pointer}
#cam-photo{width:76px;height:76px;min-width:76px;padding:0;background:#fff;border:6px solid #E2336D;box-shadow:0 0 0 4px #141112 inset}