/* Homepage — sans-serif, panneaux arrondis, photos */
.btn-lg{padding:15px 24px;font-size:15.5px}
.eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.eyebrow.center{text-align:center}
section.block{padding:88px 0}
section.block.tight{padding:14px 0}
@media(max-width:700px){section.block{padding:64px 0}}

/* Médias (photos d'illustration, avec repli si absentes) */
.media{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#E7E2D8,#D9D3C7)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.missing img{visibility:hidden}
.media.missing::after{content:"Image bientôt disponible";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--ink-3)}
.tag{position:absolute;top:12px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.94);color:var(--ink)}
.tag.tl{left:12px} .tag.tr{right:12px} .tag.dark{background:var(--ink);color:#fff} .tag.nomia{background:var(--coral-deep);color:#fff}
.credit{font-size:12px;color:var(--ink-3);margin-top:10px}

/* Hero */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(42px,5.4vw,70px);margin-top:20px;letter-spacing:-.04em;line-height:1.02}
.hero h1 em{display:block}
.hero .lead{font-size:clamp(16.5px,1.4vw,18.5px);color:var(--ink-2);margin-top:20px;max-width:520px;line-height:1.6}
.checks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px;font-weight:500}
.checks li{display:flex;align-items:center;gap:8px}
.ic-check{width:18px;height:18px;border-radius:50%;background:var(--coral);display:inline-block;position:relative;flex:none}
.ic-check::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-cta{margin-top:28px}
.micro{font-size:13px;color:var(--ink-3);margin-top:12px}
.hero-media .ba{border-radius:24px;aspect-ratio:3/2;box-shadow:0 30px 60px -30px rgba(16,18,22,.45)}
.hero-media .ba img{height:100%;object-fit:cover}
.hero-media .ba .tag{top:14px}

/* Étapes */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px;position:relative}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.steps li{text-align:center;padding:0 12px;position:relative}
.steps li+li::before{content:"";position:absolute;top:28px;left:-28%;width:46%;border-top:1px dashed var(--line-2)}
@media(max-width:860px){.steps li+li::before{display:none}}
.step-ic{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 4px 14px -6px rgba(16,18,22,.15)}
.step-ic svg,.sec-ic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.steps h3{font-size:17px;margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:14.5px;max-width:300px;margin:0 auto}

/* Panneaux */
.panel{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:40px}
@media(max-width:700px){.panel{padding:26px 22px;border-radius:22px}}
.panel h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.035em;line-height:1.08}
.panel h2.h-sm{font-size:clamp(22px,2.2vw,28px)}
.panel.dark{background:var(--night);border-color:var(--night);color:var(--paper)}
.panel.dark .eyebrow{color:#8C9199}
.panel.dark p{color:#B4B8BF} .panel.dark p b{color:var(--paper)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.trio{gap:6px}.trio .tag{font-size:10px;padding:3px 6px;top:6px;left:6px}.trio .media{border-radius:10px}}
.trio .media{aspect-ratio:4/3}

.usages-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{font-size:13.5px;font-weight:550;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);transition:all .15s}
.tabs button:hover{border-color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.pricing{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
@media(max-width:980px){.pricing{grid-template-columns:1fr}}
.pricing p{margin-top:12px;font-size:15.5px}
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.price-cards{grid-template-columns:1fr}}
.pc{border:1px solid var(--line);border-radius:18px;padding:22px 16px;text-align:center;position:relative;background:#FBFAF7}
.pc span{display:block;font-size:13.5px;color:var(--ink-2)}
.pc b{display:block;font-size:34px;letter-spacing:-.035em;margin:6px 0 2px}
.pc sup{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:3px;vertical-align:super}
.pc small{font-size:12.5px;color:var(--ink-3)}
.pc.featured{background:var(--card);border-color:var(--ink);box-shadow:0 14px 30px -18px rgba(16,18,22,.4)}
.pc.featured em{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:600;background:var(--ink);color:#fff;padding:3px 10px;border-radius:999px;white-space:nowrap}
.price-note{grid-column:1/-1;font-size:13.5px;color:var(--ink-3);margin-top:4px}

.security{display:grid;grid-template-columns:.9fr 1.6fr;gap:36px;align-items:start}
@media(max-width:980px){.security{grid-template-columns:1fr}}
.sec-items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:700px){.sec-items{grid-template-columns:1fr}}
.sec-ic{width:44px;height:44px;border-radius:12px;background:var(--paper);display:grid;place-items:center;margin-bottom:12px}
.sec-items h3{font-size:15px;margin-bottom:4px}
.sec-items p{font-size:14px;color:var(--ink-2)}
.sec-link{grid-column:2;font-size:14px;font-weight:550;text-decoration:none}
@media(max-width:980px){.sec-link{grid-column:1}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.lines{list-style:none;display:grid;gap:12px;margin-top:18px}
.lines li{font-size:14.5px;color:var(--ink-2);padding-left:18px;position:relative}
.lines li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.lines b{color:var(--ink);font-weight:600}

.resp{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.resp{grid-template-columns:1fr}}
.resp p{margin:14px 0 22px;font-size:15.5px}
.rules{list-style:none;display:grid;gap:12px}
.rules li{padding:14px 16px 14px 42px;border:1px solid rgba(245,243,238,.12);border-radius:14px;position:relative;color:#D5D8DC;font-size:14.5px}
.rules li::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--coral)}

/* FAQ */
.faq{margin-top:18px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-2);padding:0 40px 22px 0;font-size:15px}

/* Appel final */
.final{padding:0 0 96px}
.final-box{background:var(--night);border-radius:28px;padding:80px 28px;text-align:center;color:var(--paper)}
.final-box h2{font-size:clamp(34px,4.6vw,58px)}
.final-box p{font-size:17px;margin:16px auto 30px;max-width:520px;color:#B4B8BF}
.panel.dark h2 em{color:#8C9199}

/* Notes manuscrites flottantes */
@font-face{font-family:"Caveat";src:url("/assets/fonts/caveat-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
.hand{position:absolute;font-family:"Caveat",cursive;font-weight:600;font-size:25px;line-height:1.02;color:var(--ink-2);transform:rotate(var(--r,-4deg));pointer-events:none;white-space:nowrap;z-index:3}
.hand.ok{color:var(--green)}
.arr-hand{width:46px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.rel{position:relative}
.hero-media{position:relative}
.price-hand{left:auto;right:-10px;top:-34px;font-size:27px;color:var(--coral-deep)}
@media(max-width:700px){.price-hand{position:static;display:block;margin:10px 0 12px}}

/* Le problème : bannière + grand trio */
.banner{position:relative;border-radius:28px;overflow:hidden;min-height:400px;display:flex;align-items:center;background:var(--paper-2)}
.banner-img{position:absolute;right:0;top:0;width:68%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper-2) 34%,rgba(236,233,226,.85) 46%,rgba(236,233,226,0) 72%)}
.banner-text{position:relative;z-index:1;max-width:460px;padding:48px}
.banner-text h2{font-size:clamp(32px,3.8vw,50px);letter-spacing:-.04em;line-height:1.04}
.banner-text p{color:var(--ink-2);margin-top:16px;font-size:16px}
@media(max-width:760px){.banner{min-height:0;flex-direction:column;align-items:stretch}.banner-img{position:static;width:100%;height:220px}.banner::after{display:none}.banner-text{padding:26px 22px}}
.trio.big{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.trio.big figure{position:relative}
.trio.big .media{aspect-ratio:4/3;border-radius:22px}
.trio.big .tag{font-size:13px;padding:6px 11px;top:14px;left:14px}
.trio.big figcaption{font-size:14px;color:var(--ink-2);margin:12px 4px 0;max-width:330px}

/* Cas d'usage : grand avant/après */
.usages-head{margin-bottom:54px}
.case-media{padding-bottom:40px}
.case{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:center}
@media(max-width:980px){.case{grid-template-columns:1fr;gap:26px}}
.case-media{position:relative}
#case-ba{aspect-ratio:4/3;border-radius:22px}
#case-ba img{height:100%;object-fit:cover}
#case-ba.no-after .after,#case-ba.no-after .handle,#case-ba.no-after .tag.tr{display:none}
.case-text h3{font-size:24px;letter-spacing:-.025em}
.case-text p{color:var(--ink-2);margin-top:10px;font-size:15.5px}
.case-text .lines{margin-top:16px}

/* Notes manuscrites : chaque flèche vise sa cible réelle */
.arr-hand.down{display:block;width:40px;height:52px;margin:2px 0 0 auto}
.hero-hand{right:12%;top:-94px;text-align:right}
@media(max-width:980px){.hero-media{display:flex;flex-direction:column}.hero-hand{position:relative;order:-1;align-self:flex-end;top:auto;right:auto;margin:0 14% 6px 0}}
.trio.big{margin-top:96px}
.trio-hand{right:14%;top:-88px;text-align:right}
@media(max-width:860px){.trio.big{grid-template-columns:1fr;margin-top:16px}.trio.big figure{margin-bottom:10px}.trio.big figure+figure{margin-top:92px}}
.case-hand{left:calc(50% + 26px);top:auto;bottom:2px;transition:opacity .4s}
.case-hand .arr-hand.up{position:absolute;left:-36px;top:-6px;width:34px;height:30px}
.case-media.touched .case-hand{opacity:0}
@media(max-width:560px){.case-hand{font-size:22px}}