/* ==========================================================================
   OnlySmile Côte d'Ivoire — feuille de style principale
   Palette inspirée de la marque (rose poudré / prune) + accent doré ivoirien
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --plum:#3B1449;
  --plum-2:#5B2A6E;
  --plum-soft:#7A5A8C;
  --rose:#F4577A;
  --rose-dark:#DE3B60;
  --rose-soft:#FFD7E0;
  --blush:#FDEBEF;
  --blush-2:#FBE3EA;
  --cream:#FFF9F6;
  --lav:#EFE6F7;
  --gold:#E8A33D;
  --gold-soft:#FDF0DA;
  --green:#17A87A;
  --green-soft:#E3F7F0;
  --ink:#2B1533;
  --body:#5C4A64;
  --line:rgba(59,20,73,.10);
  --white:#fff;

  --shadow-s:0 2px 8px rgba(59,20,73,.06);
  --shadow-m:0 10px 30px rgba(59,20,73,.09);
  --shadow-l:0 24px 60px rgba(59,20,73,.14);
  --shadow-rose:0 14px 34px rgba(244,87,122,.30);

  --r-s:12px;
  --r-m:20px;
  --r-l:28px;
  --r-xl:36px;

  --wrap:1180px;
  --head-h:104px;

  --f-title:"Outfit","Segoe UI",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--cream);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--f-title);color:var(--plum);margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}

/* ---------- Utilitaires ---------- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.center{text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-title);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rose-dark);
  background:var(--white);border:1px solid var(--rose-soft);
  padding:8px 16px;border-radius:999px;margin-bottom:18px;
  box-shadow:var(--shadow-s);
}
.lead{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--body);max-width:62ch}
.center .lead{margin-inline:auto}
section{padding:clamp(60px,7vw,100px) 0;position:relative}
.sec-head{max-width:720px;margin:0 auto clamp(38px,5vw,58px)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-title);font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:999px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--rose);color:#fff;box-shadow:var(--shadow-rose)}
.btn-primary:hover{background:var(--rose-dark);box-shadow:0 18px 40px rgba(222,59,96,.38)}
.btn-dark{background:var(--plum);color:#fff;box-shadow:0 12px 28px rgba(59,20,73,.28)}
.btn-dark:hover{background:var(--plum-2)}
.btn-ghost{background:var(--white);color:var(--plum);border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose-dark)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 12px 28px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1EBE5A}
.btn-lg{padding:18px 38px;font-size:1.06rem}
.btn-sm{padding:11px 20px;font-size:.9rem}
.btn-block{display:flex;width:100%}

/* ---------- Bandeau promo ---------- */
.topbar{background:var(--plum);color:#fff;font-size:.86rem;overflow:hidden}
.topbar .marquee{display:flex;gap:56px;padding:10px 0;width:max-content;animation:slide 26s linear infinite}
.topbar span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;letter-spacing:.01em}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.topbar .marquee{animation:none;justify-content:center;width:100%;flex-wrap:wrap;gap:24px}}

/* ---------- En-tête ---------- */
.head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,249,246,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.head.scrolled{box-shadow:var(--shadow-m)}
.head-in{display:flex;align-items:center;gap:26px;padding:14px 0}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
  width:42px;height:42px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(140deg,var(--rose),#B24DA8);
  display:grid;place-items:center;box-shadow:var(--shadow-rose);
}
.logo-mark svg{width:24px;height:24px}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--f-title);font-weight:800;font-size:1.3rem;color:var(--plum);letter-spacing:-.03em}
.logo-name b{color:var(--rose);font-weight:800}
.logo-sub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);font-weight:700;margin-top:3px}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{font-weight:600;font-size:.95rem;color:var(--plum);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rose);transition:width .22s ease;border-radius:2px}
.nav a:hover::after{width:100%}
.head-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:var(--white);box-shadow:var(--shadow-s);place-items:center}
.burger svg{width:22px;height:22px;stroke:var(--plum)}

/* ---------- Héros ---------- */
.hero{padding:clamp(44px,5vw,76px) 0 clamp(60px,7vw,96px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(760px 520px at 82% 12%,var(--blush) 0%,transparent 62%),
    radial-gradient(620px 460px at 8% 78%,var(--lav) 0%,transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{margin-bottom:.42em}
.hero h1 em{font-style:normal;color:var(--rose);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--rose-soft);z-index:-1;border-radius:4px;
}
.hero-usp{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px}
.hero-usp li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--plum)}
.hero-usp .tick{
  width:26px;height:26px;border-radius:50%;background:var(--green-soft);
  display:grid;place-items:center;flex-shrink:0;
}
.hero-usp .tick svg{width:14px;height:14px;stroke:var(--green);stroke-width:3}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-proof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stack{display:flex}
.stack img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:3px solid var(--cream);margin-left:-14px;box-shadow:var(--shadow-s);
}
.stack img:first-child{margin-left:0}
.stars{color:var(--gold);letter-spacing:2px;font-size:1rem}
.proof-txt{font-size:.88rem;line-height:1.4}
.proof-txt strong{color:var(--plum);font-family:var(--f-title)}

.hero-media{position:relative}
.hero-photo{
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);
  aspect-ratio:4/4.4;position:relative;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:56% 30%}
.hero-blob{
  position:absolute;inset:auto -34px -34px auto;width:210px;height:210px;z-index:-1;
  background:linear-gradient(140deg,var(--gold),var(--rose));filter:blur(46px);opacity:.5;border-radius:50%;
}
.float-card{
  position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:var(--r-m);padding:14px 18px;box-shadow:var(--shadow-m);
  display:flex;align-items:center;gap:12px;animation:bob 5s ease-in-out infinite;
}
.float-card .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.float-card small{display:block;font-size:.72rem;color:var(--plum-soft);line-height:1.3}
.float-card b{font-family:var(--f-title);color:var(--plum);font-size:.98rem;display:block;line-height:1.25}
.fc-1{top:8%;left:-26px}
.fc-2{bottom:9%;right:-22px;animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}

/* ---------- Bandeau confiance ---------- */
.trust{background:var(--white);border-block:1px solid var(--line);padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trust-it{display:flex;align-items:center;gap:13px;justify-content:center;text-align:left}
.trust-it .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:var(--blush)}
.trust-it .ico svg{width:21px;height:21px;stroke:var(--rose);fill:none;stroke-width:2}
.trust-it b{display:block;font-family:var(--f-title);color:var(--plum);font-size:.95rem;line-height:1.2}
.trust-it small{font-size:.79rem;color:var(--plum-soft)}

/* ---------- Cartes produits ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  background:var(--white);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-s);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.card-img{position:relative;aspect-ratio:1;background:var(--blush);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.05)}
.tag{
  position:absolute;top:14px;left:14px;background:var(--rose);color:#fff;
  font-family:var(--f-title);font-weight:700;font-size:.74rem;letter-spacing:.05em;
  padding:6px 12px;border-radius:999px;text-transform:uppercase;
}
.tag.gold{background:var(--gold)}
.tag.plum{background:var(--plum)}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:6px;font-size:1.08rem}
.card-rate{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--plum-soft);margin-bottom:10px}
.card-rate .stars{font-size:.85rem;letter-spacing:1px}
.card-desc{font-size:.89rem;margin-bottom:16px;flex:1}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.price .now{font-family:var(--f-title);font-weight:800;font-size:1.42rem;color:var(--plum)}
.price .was{font-size:.92rem;color:#A896B2;text-decoration:line-through}
.price .off{
  font-size:.72rem;font-weight:700;background:var(--green-soft);color:var(--green);
  padding:3px 9px;border-radius:999px;font-family:var(--f-title);
}

/* ---------- Packs ---------- */
.packs{background:linear-gradient(180deg,var(--blush) 0%,var(--cream) 100%)}
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.pack{
  background:var(--white);border-radius:var(--r-l);padding:32px 28px 30px;
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.pack:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.pack.hot{border:2px solid var(--rose);box-shadow:var(--shadow-m);transform:scale(1.03)}
.pack.hot:hover{transform:scale(1.03) translateY(-6px)}
.pack-flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--rose);color:#fff;font-family:var(--f-title);font-weight:700;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 20px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-rose);
}
.pack h3{font-size:1.28rem;margin-bottom:4px}
.pack .sub{font-size:.87rem;margin-bottom:20px;color:var(--plum-soft)}
.pack .price{margin-bottom:20px}
.pack .price .now{font-size:1.9rem}
.pack ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px;flex:1}
.pack li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem}
.pack li svg{width:19px;height:19px;stroke:var(--green);stroke-width:2.6;fill:none;flex-shrink:0;margin-top:3px}
.save{
  display:inline-block;background:var(--gold-soft);color:#9A6A15;
  font-family:var(--f-title);font-weight:700;font-size:.8rem;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:12px}
.step::before{
  counter-increment:s;content:counter(s);
  font-family:var(--f-title);font-weight:800;font-size:3.4rem;
  color:var(--rose-soft);line-height:1;display:block;margin-bottom:8px;
}
.step h3{font-size:1.08rem;margin-bottom:6px}
.step p{font-size:.9rem;margin:0}

/* ---------- Nuancier ---------- */
.shade-wrap{
  background:var(--white);border-radius:var(--r-xl);padding:clamp(28px,4vw,46px);
  box-shadow:var(--shadow-m);border:1px solid var(--line);
}
.shades{display:flex;gap:6px;margin:26px 0 14px}
.shade{
  flex:1;height:74px;border-radius:10px;position:relative;
  display:grid;place-items:end center;padding-bottom:7px;
  font-size:.7rem;font-weight:700;color:#8A7A93;font-family:var(--f-title);
  border:1px solid rgba(0,0,0,.05);
}
.shade.on{outline:3px solid var(--rose);outline-offset:3px;color:var(--plum)}
.shade-legend{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600}
.shade-legend .a{color:var(--plum-soft)}
.shade-legend .b{color:var(--rose-dark)}
.shade-note{font-size:.8rem;color:var(--plum-soft);margin:18px 0 0;font-style:italic}

/* ---------- Avis ---------- */
.avis{background:var(--white)}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.avis-card{
  background:var(--cream);border-radius:var(--r-l);padding:28px 26px;
  border:1px solid var(--line);display:flex;flex-direction:column;
}
.avis-card .stars{margin-bottom:12px;font-size:1.05rem}
.avis-card p{font-size:.95rem;flex:1;color:var(--ink)}
.avis-who{display:flex;align-items:center;gap:13px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.avis-who img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0}
.avis-who b{display:block;font-family:var(--f-title);color:var(--plum);font-size:.96rem;line-height:1.25}
.avis-who small{font-size:.8rem;color:var(--plum-soft)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--green);font-weight:700;margin-top:2px}
.verified svg{width:13px;height:13px;stroke:var(--green);stroke-width:3;fill:none}
/* recadrages sur la photo de couple */
.av-f,.av-h{object-fit:cover}
.av-f{object-position:29% 34%;transform:scale(1.05)}
.av-h{object-position:63% 26%;transform:scale(1.05)}

/* ---------- Livraison / paiement ---------- */
.livr{background:linear-gradient(180deg,var(--cream) 0%,var(--blush) 100%)}
.livr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start}
.panel{background:var(--white);border-radius:var(--r-l);padding:32px 30px;box-shadow:var(--shadow-s);border:1px solid var(--line)}
.panel h3{display:flex;align-items:center;gap:11px;margin-bottom:18px;font-size:1.2rem}
.panel h3 .ico{width:38px;height:38px;border-radius:12px;background:var(--blush);display:grid;place-items:center;flex-shrink:0}
.panel h3 .ico svg{width:19px;height:19px;stroke:var(--rose);fill:none;stroke-width:2}
.zone{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.zone:last-of-type{border-bottom:0}
.zone b{color:var(--plum);font-family:var(--f-title);font-weight:700;white-space:nowrap}
.zone .z-n{color:var(--ink);font-weight:600}
.zone small{display:block;color:var(--plum-soft);font-size:.8rem;font-weight:400}
.pays{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.pay{
  display:flex;align-items:center;gap:11px;padding:14px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--cream);
  transition:border-color .18s ease,transform .18s ease;
}
.pay:hover{border-color:var(--rose);transform:translateY(-2px)}
.pay .dot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-family:var(--f-title);font-weight:800;font-size:.8rem;color:#fff}
.pay b{font-family:var(--f-title);font-size:.9rem;color:var(--plum);display:block;line-height:1.2}
.pay small{font-size:.74rem;color:var(--plum-soft)}
.cod{
  margin-top:16px;background:var(--green-soft);border-radius:var(--r-s);
  padding:15px 17px;display:flex;gap:12px;align-items:center;
}
.cod svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2;flex-shrink:0}
.cod b{color:#0F7A57;font-family:var(--f-title);display:block;font-size:.95rem}
.cod small{font-size:.82rem;color:#2F7A63}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin-inline:auto;display:grid;gap:14px}
.faq-it{background:var(--white);border-radius:var(--r-m);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-s)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 24px;text-align:left;font-family:var(--f-title);font-weight:700;
  font-size:1.02rem;color:var(--plum);
}
.faq-q .pm{width:28px;height:28px;border-radius:50%;background:var(--blush);display:grid;place-items:center;flex-shrink:0;transition:transform .25s ease,background .25s ease}
.faq-q .pm svg{width:14px;height:14px;stroke:var(--rose);stroke-width:3}
.faq-it.open .pm{transform:rotate(45deg);background:var(--rose)}
.faq-it.open .pm svg{stroke:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-a p{padding:0 24px 22px;margin:0;font-size:.95rem}

/* ---------- CTA final ---------- */
.cta{
  background:linear-gradient(135deg,var(--plum) 0%,#6A2A7A 55%,var(--rose-dark) 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.35),transparent 68%);
  top:-180px;right:-120px;
}
.cta h2{color:#fff;position:relative;z-index:1}
.cta p{color:rgba(255,255,255,.9);position:relative;z-index:1}
.cta .btn-primary{background:#fff;color:var(--plum);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.cta .btn-primary:hover{background:var(--gold-soft)}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;margin-top:10px}
.cta-mini{margin-top:22px;font-size:.86rem;color:rgba(255,255,255,.8);position:relative;z-index:1}

/* ---------- Pied de page ---------- */
.foot{background:var(--plum);color:rgba(255,255,255,.72);padding:64px 0 0;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
.foot h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a:hover{color:#fff}
.foot .logo-name{color:#fff}
.foot .logo-sub{color:rgba(255,255,255,.55)}
.foot-about{max-width:34ch;margin-top:16px;font-size:.9rem}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .2s ease}
.socials a:hover{background:var(--rose)}
.socials svg{width:18px;height:18px;fill:#fff}
.foot-contact li{display:flex;gap:11px;align-items:flex-start}
.foot-contact svg{width:17px;height:17px;stroke:var(--rose);fill:none;stroke-width:2;flex-shrink:0;margin-top:4px}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem;
}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;align-items:center;gap:11px;
  background:#25D366;color:#fff;padding:14px 22px 14px 18px;border-radius:999px;
  font-family:var(--f-title);font-weight:700;font-size:.95rem;
  box-shadow:0 14px 34px rgba(37,211,102,.42);
  transition:transform .18s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float svg{width:24px;height:24px;fill:#fff;flex-shrink:0}

/* ---------- Apparition au défilement ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Page commande ---------- */
.order{padding:clamp(40px,5vw,72px) 0}
.order-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(28px,4vw,46px);align-items:start}
.form-card{background:var(--white);border-radius:var(--r-l);padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow-m);border:1px solid var(--line)}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--f-title);font-weight:700;color:var(--plum);font-size:.92rem;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-s);
  font-family:var(--f-body);font-size:.98rem;color:var(--ink);background:var(--cream);
  transition:border-color .18s ease,background .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--rose);background:#fff;box-shadow:0 0 0 4px rgba(244,87,122,.12);
}
.field small{display:block;color:var(--plum-soft);font-size:.8rem;margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opts{display:grid;gap:11px}
.opt{
  display:flex;align-items:center;gap:13px;padding:15px 17px;
  border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--cream);cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.opt:hover{border-color:var(--rose-soft)}
.opt input{width:auto;margin:0;accent-color:var(--rose);flex-shrink:0}
.opt.sel{border-color:var(--rose);background:#fff;box-shadow:0 0 0 3px rgba(244,87,122,.1)}
.opt b{font-family:var(--f-title);color:var(--plum);font-size:.95rem;display:block;line-height:1.25}
.opt small{font-size:.79rem;color:var(--plum-soft)}
.opt .px{margin-left:auto;font-family:var(--f-title);font-weight:700;color:var(--plum);white-space:nowrap}
.summary{background:var(--white);border-radius:var(--r-l);padding:30px 28px;box-shadow:var(--shadow-m);border:1px solid var(--line);position:sticky;top:calc(var(--head-h) + 16px)}
.sum-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:.94rem;border-bottom:1px dashed var(--line)}
.sum-line b{color:var(--plum);font-family:var(--f-title)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 4px;font-family:var(--f-title)}
.sum-total span{font-weight:700;color:var(--plum);font-size:1.02rem}
.sum-total b{font-size:1.72rem;color:var(--rose-dark);font-weight:800}
.sum-note{font-size:.82rem;color:var(--plum-soft);margin:14px 0 0}
.back-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--plum-soft);margin-bottom:20px;font-size:.92rem}
.back-link:hover{color:var(--rose-dark)}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-media{max-width:520px;margin-inline:auto;width:100%}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .pack-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .pack.hot{transform:none}
  .pack.hot:hover{transform:translateY(-6px)}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .avis-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .livr-grid,.order-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .summary{position:static}
  .nav{display:none}
  .burger{display:grid}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--white);padding:22px 26px;gap:18px;box-shadow:var(--shadow-l);
    border-bottom:1px solid var(--line);align-items:flex-start;
  }
}
@media (max-width:720px){
  :root{--head-h:76px}
  .trust-grid{grid-template-columns:1fr 1fr;gap:18px}
  .head-cta .btn-ghost{display:none}
  .float-card{padding:11px 14px}
  .fc-1{left:-8px;top:5%}
  .fc-2{right:-6px;bottom:6%}
  .shades{gap:4px}
  .shade{height:58px;font-size:.62rem}
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wa-float span{display:none}
  .wa-float{padding:16px;border-radius:50%}
}
@media (max-width:520px){
  .prod-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
  .steps{grid-template-columns:1fr}
  .pays{grid-template-columns:1fr}
  .hero-btns .btn{width:100%}
}

/* ==========================================================================
   PAGE INSTITUT — vidéo, tarifs de séance, le local, prise de rendez-vous
   ========================================================================== */

/* ---------- Bloc vidéo ---------- */
.video-sec{background:linear-gradient(180deg,var(--cream) 0%,var(--blush) 100%)}
.video-box{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-l);background:var(--plum);aspect-ratio:16/9;
  max-width:900px;margin-inline:auto;
}
.video-box video{width:100%;height:100%;object-fit:cover;display:block}
/* écran d'attente tant qu'aucune vidéo n'est déposée */
.video-vide{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:32px;
  background:
    linear-gradient(150deg,rgba(59,20,73,.90),rgba(222,59,96,.78)),
    var(--photo,none) center/cover;
  color:#fff;
}
.video-vide .play{
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.3);
}
.video-vide .play svg{width:26px;height:26px;fill:var(--rose-dark);margin-left:4px}
.video-vide b{font-family:var(--f-title);font-size:1.2rem;display:block}
.video-vide small{font-size:.88rem;opacity:.85;max-width:38ch;display:block}
.video-sous{text-align:center;font-size:.86rem;color:var(--plum-soft);margin:18px auto 0;max-width:60ch}
.son-btn{
  position:absolute;right:16px;bottom:16px;z-index:2;
  background:rgba(255,255,255,.94);color:var(--plum);
  padding:10px 18px;border-radius:999px;font-family:var(--f-title);font-weight:700;font-size:.86rem;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-m);
}
.son-btn svg{width:17px;height:17px;stroke:var(--plum);fill:none;stroke-width:2}

/* ---------- Tarifs de séance ---------- */
.tarif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.tarif{
  background:var(--white);border-radius:var(--r-l);padding:34px 28px 30px;
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.tarif:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.tarif.hot{border:2px solid var(--rose);box-shadow:var(--shadow-m);transform:scale(1.03)}
.tarif.hot:hover{transform:scale(1.03) translateY(-6px)}
.tarif .duree{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--lav);color:var(--plum-2);font-family:var(--f-title);font-weight:700;
  font-size:.78rem;padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.tarif h3{font-size:1.3rem;margin-bottom:4px}
.tarif .sub{font-size:.88rem;color:var(--plum-soft);margin-bottom:18px}
.tarif .montant{font-family:var(--f-title);font-weight:800;font-size:2.1rem;color:var(--plum);line-height:1;margin-bottom:6px}
.tarif .montant small{font-size:.86rem;font-weight:600;color:var(--plum-soft);display:block;margin-top:6px}
.tarif ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:11px;flex:1}
.tarif li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem}
.tarif li svg{width:19px;height:19px;stroke:var(--green);stroke-width:2.6;fill:none;flex-shrink:0;margin-top:3px}

/* ---------- Le local ---------- */
.local{background:var(--white)}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.local-carte{
  background:linear-gradient(150deg,var(--plum) 0%,#6A2A7A 100%);
  border-radius:var(--r-xl);padding:clamp(30px,4vw,44px);color:#fff;
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.local-carte::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.32),transparent 70%);
  bottom:-150px;left:-90px;
}
.local-carte h3{color:#fff;font-size:1.5rem;margin-bottom:22px;position:relative;z-index:1}
.local-info{list-style:none;padding:0;margin:0;display:grid;gap:18px;position:relative;z-index:1}
.local-info li{display:flex;gap:14px;align-items:flex-start}
.local-info .ico{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.13);
  display:grid;place-items:center;flex-shrink:0;
}
.local-info .ico svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2}
.local-info b{display:block;font-family:var(--f-title);font-size:1rem;color:#fff;line-height:1.3}
.local-info span{font-size:.9rem;color:rgba(255,255,255,.78);display:block;line-height:1.5}
.local-carte .btn{margin-top:26px;position:relative;z-index:1}
.horaires{display:grid;gap:7px;margin-top:4px}
.horaires div{display:flex;justify-content:space-between;gap:18px;font-size:.88rem;color:rgba(255,255,255,.82)}
.horaires div b{font-family:var(--f-body);font-weight:600;color:#fff;font-size:.88rem}
.horaires .off{color:rgba(255,255,255,.5)}
.local-photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);aspect-ratio:4/4.6;position:relative}
.local-photo img{width:100%;height:100%;object-fit:cover}
.photo-todo{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;
  background:linear-gradient(150deg,var(--blush),var(--lav));text-align:center;padding:30px;
}
.photo-todo svg{width:44px;height:44px;stroke:var(--plum-soft);fill:none;stroke-width:1.6}
.photo-todo b{font-family:var(--f-title);color:var(--plum);font-size:1.02rem}
.photo-todo small{font-size:.84rem;color:var(--plum-soft);max-width:30ch}

/* ---------- Passerelle vers le kit ---------- */
.passerelle{
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--blush) 100%);
  border-radius:var(--r-xl);padding:clamp(30px,4vw,46px);
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  border:1px solid var(--line);
}
.passerelle h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:8px}
.passerelle p{margin:0;max-width:52ch}

/* ---------- Étapes de la séance ---------- */
.seance{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:t}
.seance-it{text-align:center}
.seance-it .num{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  background:var(--white);border:2px solid var(--rose-soft);
  display:grid;place-items:center;font-family:var(--f-title);font-weight:800;
  color:var(--rose-dark);font-size:1.1rem;box-shadow:var(--shadow-s);
}
.seance-it h3{font-size:1rem;margin-bottom:5px}
.seance-it p{font-size:.86rem;margin:0}
.seance-it .min{
  display:inline-block;font-size:.72rem;font-family:var(--f-title);font-weight:700;
  color:var(--plum-soft);background:var(--lav);padding:3px 10px;border-radius:999px;margin-top:8px;
}

@media (max-width:1020px){
  .tarif-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .tarif.hot{transform:none}
  .tarif.hot:hover{transform:translateY(-6px)}
  .local-grid{grid-template-columns:1fr}
  .local-photo{max-width:480px;margin-inline:auto;width:100%}
  .seance{grid-template-columns:repeat(2,1fr);gap:28px}
  .passerelle{grid-template-columns:1fr;text-align:center;justify-items:center}
  .passerelle p{margin-inline:auto}
}
@media (max-width:520px){
  .seance{grid-template-columns:1fr}
  .video-box{border-radius:var(--r-m)}
}

/* Le lien de retour prend sa propre ligne au-dessus du badge du héros */
.hero-txt .back-link{display:flex;width:100%;margin-bottom:14px}

/* ---------- Ajustements en-tête sur très petits écrans ----------
   Sur 375 px, le logo + le bouton d'action + le burger dépassaient de
   quelques pixels et créaient un défilement horizontal parasite. */
@media (max-width:720px){
  .head-in{gap:12px}
  .head-cta{gap:8px}
  .head-cta .btn-primary{padding:11px 15px;font-size:.86rem}
  .logo-name{font-size:1.18rem}
  .logo-mark{width:38px;height:38px;border-radius:12px}
  .logo-mark svg{width:21px;height:21px}
}
@media (max-width:380px){
  .head-cta .btn-primary{padding:10px 12px;font-size:.8rem}
  .logo-sub{font-size:.56rem;letter-spacing:.14em}
}
/* `clip` plutôt que `hidden` : contient les décors qui dépassent
   sans casser le `position:sticky` de l'en-tête. */
html{overflow-x:clip}