/* Page d'accueil et pages légales */
.wrap.wide{max-width:600px}
.site{display:flex;flex-direction:column;gap:64px;padding-bottom:40px}
.site h2{font-size:clamp(25px,6vw,32px);max-width:22ch}
.site section>p,.site .flow,.site .letter p{max-width:60ch}
.site section{display:flex;flex-direction:column;gap:14px}

/* Haut de page */
.hero{gap:28px!important;padding-top:10px}
.hero-text{display:flex;flex-direction:column;gap:16px}
.hero h1{font-size:clamp(36px,10vw,58px);line-height:1.02;font-weight:800;max-width:13ch}
.lead{font-size:19px;line-height:1.5;color:var(--mute);max-width:34ch}
.btn.cta{width:auto;align-self:flex-start;padding:0 30px;font-size:18px}
.reassure{font-size:15px;color:var(--mute)}

/* Les deux téléphones avec les notes manuscrites */
.duo-phones{position:relative;margin:0;height:500px}
.phone-shot{position:absolute;width:196px;aspect-ratio:585/995;border-radius:30px;padding:7px;background:var(--ink);box-shadow:0 18px 40px rgba(43,22,38,.18)}
.phone-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:24px}
.phone-shot.back{left:0;top:62px;transform:rotate(-5deg)}
.phone-shot.front{right:0;top:30px;transform:rotate(4deg)}
.note{position:absolute;font-family:var(--hand);font-size:25px;line-height:1;color:var(--rose);font-weight:600}
.note.n1{left:4px;top:0;max-width:12ch;transform:rotate(-3deg)}
.note.n2{left:0;bottom:0;max-width:17ch;transform:rotate(-2deg)}
.arrow{position:absolute;width:52px;height:44px;fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.a1{left:112px;top:10px}
.arrow.a2{left:178px;bottom:16px}

/* Comment ça marche : une vraie suite d'étapes */
.flow{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:16px}
.flow li{counter-increment:s;position:relative;padding-left:44px;line-height:1.5}
.flow li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font:800 15px var(--head)}

/* Exemples de questions */
.decks{display:grid;gap:12px}
.deck{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.deck h3{font-size:17px;color:var(--rose);margin-bottom:8px}
.deck ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.deck li{font-weight:700;line-height:1.35}

/* Question du jour */
.daily p{line-height:1.55}

/* Le mot d'Iyad */
.letter{background:#fff;border:1.5px solid var(--line);border-radius:6px;padding:26px 22px 22px;transform:rotate(-.6deg);
  box-shadow:0 2px 0 var(--line),0 14px 30px rgba(43,22,38,.06)}
.letter p{line-height:1.6}
.letter-head{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.letter-head h2{font-size:22px}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:#FDE7ED url(/img/iyad.jpg) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font:700 30px var(--hand);color:var(--rose)}
.sign{font-family:var(--hand);font-size:34px;color:var(--ink);line-height:1;margin-top:4px!important}

/* Prix */
.plans{display:flex;flex-direction:column;gap:12px}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.plan.best{border:2.5px solid var(--rose)}

/* Questions fréquentes */
.faq{gap:8px!important}
.faq h2{margin-bottom:6px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{font-weight:800;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rose);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;color:var(--mute);line-height:1.55}

.final{align-items:flex-start}

/* Pied de page */
.site-foot{flex-direction:column;align-items:flex-start;gap:10px;border-top:1.5px solid var(--line);margin-top:10px;padding:22px 18px 30px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.maker{color:var(--mute);font-size:14px}

/* Pages légales */
.legal{display:flex;flex-direction:column;gap:12px;line-height:1.6;padding-bottom:40px}
.legal h1{font-size:36px}
.legal h2{font-size:21px;margin-top:12px}
.legal ul{margin:0;padding-left:20px}

@media (min-width:900px){
  .wrap.wide{max-width:1040px}
  .hero{display:grid!important;grid-template-columns:1fr 440px;align-items:center;padding-top:40px}
  .duo-phones{height:560px}
  .phone-shot{width:220px}
  .site>section:not(.hero){max-width:640px}
  .decks{grid-template-columns:repeat(3,1fr)}
  .site>section.samples{max-width:none}
  .plans{flex-direction:row}.plans>*{flex:1}
  .wrap{max-width:720px}
}
@media (max-width:370px){
  .phone-shot{width:168px}
  .duo-phones{height:450px}
}