/* ══════════════════════════════════════════════
   HAYATAK — PRODUCT MOCKUP SYSTEM
   Un seul appareil, une seule lumière, une seule
   famille d'ombres et de cartes. Voir mockups.html.
   ══════════════════════════════════════════════ */
:root{
--mk-body:linear-gradient(152deg,#123a30 0%,#03261E 46%,#0A2C24 100%);
--mk-sh:0 40px 64px -30px rgba(2,56,47,.34),0 8px 18px -10px rgba(2,56,47,.22);
--mk-sh-ink:0 46px 74px -34px rgba(0,0,0,.62),0 10px 20px -12px rgba(0,0,0,.4);
--mk-card-sh:0 0 0 1px rgba(2,59,47,.06),0 22px 38px -22px rgba(2,59,47,.3);
--mk-tilt:perspective(1800px) rotateY(-7deg) rotateX(1.4deg) rotate(-.5deg);
--mk-tilt-r:perspective(1800px) rotateY(7deg) rotateX(1.4deg) rotate(.5deg);
--mk-r-card:18px;
}

/* ── scène ── */
.stage{position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate}
.stage-glow{position:absolute;z-index:-1;width:86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(191,233,201,.72),rgba(191,233,201,0) 70%);pointer-events:none}
.stage-glow.g-apri{background:radial-gradient(closest-side,rgba(247,199,155,.62),rgba(247,199,155,0) 70%)}
.ink .stage-glow{background:radial-gradient(closest-side,rgba(191,233,201,.17),rgba(191,233,201,0) 70%)}

/* ── appareil : cadre fin, rayons concentriques, une seule ombre ── */
.pf{--pw:300px;--pad:calc(var(--pw)*.019);position:relative;flex:none;width:var(--pw);padding:var(--pad);border-radius:calc(var(--pw)*.132);background:var(--mk-body);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 0 0 .75px rgba(0,0,0,.45),var(--mk-sh)}
.pf::before{content:"";position:absolute;top:calc(var(--pad)*.42);inset-inline-start:50%;translate:-50% 0;width:14%;height:max(2px,calc(var(--pw)*.008));border-radius:99px;background:rgba(255,255,255,.17)}
.pf::after{content:"";position:absolute;top:20%;inset-inline-end:calc(var(--pw)*-.006);width:calc(var(--pw)*.008);height:10.5%;border-radius:99px;background:linear-gradient(#205446,#0a2a22)}
.pf-s{position:relative;overflow:hidden;border-radius:calc(var(--pw)*.113);background:#fff;aspect-ratio:511/992;box-shadow:inset 0 0 0 .75px rgba(2,56,47,.16)}
.pf-s>img{display:block;width:100%;height:auto;aspect-ratio:511/992;object-fit:cover;object-position:top center}
.pf-s::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 46%)}
.ink .pf{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 .75px rgba(0,0,0,.5),var(--mk-sh-ink)}
@media(min-width:980px){.tilt{transform:var(--mk-tilt)}.tilt-r{transform:var(--mk-tilt-r)}}

/* ── cartes flottantes : même langage que l'app ── */
.fc{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;max-width:236px;padding:13px 16px;border-radius:var(--mk-r-card);background:#fff;box-shadow:var(--mk-card-sh)}
.fc .k{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-40)}
.fc b{display:block;margin-top:4px;font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.28;color:var(--ink)}
.fc .ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--mint-soft);color:var(--ink)}
/* carte = vrai fragment d'interface */
.fc-img{display:block;padding:0;overflow:hidden;max-width:none;width:clamp(228px,24vw,306px);border-radius:var(--mk-r-card);background:#fff}
.fc-img>img{display:block;width:100%;height:auto}
.fc-cap{display:flex;align-items:center;gap:9px;padding:10px 15px;font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);border-top:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){.flt{animation:flt 11s var(--ease) infinite alternate}.flt-b{animation-duration:14s;animation-delay:-5s}.flt-c{animation-duration:17s;animation-delay:-9s}}
@keyframes flt{from{translate:0 -3px}to{translate:0 3px}}
.par{transform:translate3d(0,var(--par,0px),0)}
html.js .rv{transition-delay:var(--d,0s)}

/* ── hero ── */
.hero-grid{display:grid;gap:clamp(40px,5vw,72px)}
@media(min-width:960px){.hero-grid{grid-template-columns:1fr .95fr;align-items:center}}
.stage-hero{padding-block:clamp(8px,2vw,26px)}
.stage-hero .pf{--pw:clamp(272px,25vw,344px)}

/* ── trio (parcours) ── */
.trio{display:grid;gap:clamp(38px,6vw,52px);justify-items:center}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr);align-items:end;gap:clamp(14px,2.2vw,38px)}}
.trio-i{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:360px;text-align:center}
.trio-i .pf{--pw:clamp(236px,24vw,296px)}
.trio-i .n{font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--ink-40)}
.trio-i b{display:block;margin-top:8px;font-size:clamp(18px,1.7vw,21px);font-weight:600;letter-spacing:-.025em;line-height:1.25}
@media(min-width:900px){.trio-i:nth-child(1){transform:translateY(16px)}.trio-i:nth-child(2){transform:translateY(-40px)}.trio-i:nth-child(2) .pf{--pw:clamp(256px,27vw,336px)}.trio-i:nth-child(3){transform:translateY(30px)}}

/* ── écrans en profondeur (parcours : choisir → réserver → confirmer) ── */
.deck{position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate}
.deck>.pf{--pw:clamp(132px,15.5vw,206px);z-index:1;opacity:.97}
.deck>.pf:first-child{transform:rotate(-2.2deg) scale(.965);transform-origin:bottom right}
.deck>.pf:last-child{transform:rotate(2.2deg) scale(.965);transform-origin:bottom left}
.deck>.pf-lead{--pw:clamp(190px,21vw,282px);z-index:4;margin-inline:calc(var(--pw)*-.16);transform:none;opacity:1}
.deck-cap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:26px;font-family:var(--fm);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-40)}
.deck-cap i{font-style:normal;color:var(--ink)}
.deck-cap s{text-decoration:none;opacity:.5}

/* ── fonctionnalités alternées ── */
.feat{display:grid;gap:clamp(34px,4.5vw,72px);align-items:center}
@media(min-width:980px){.feat{grid-template-columns:1fr 1.06fr}.feat-rev .feat-v{order:-1}}
.feat+.feat{margin-top:clamp(64px,9vw,140px)}
.feat-t .n{font-family:var(--fm);font-size:12px;letter-spacing:.2em;color:var(--ink-40)}
.feat-t h3{margin-top:18px;font-size:clamp(27px,3vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.feat-t p{margin-top:18px}
.feat-v{position:relative;display:flex;justify-content:center;isolation:isolate}
.feat-v .pf{--pw:clamp(256px,26vw,332px)}

/* ── photo réelle + application ── */
.compo{position:relative}
.compo .pf{position:absolute;z-index:3;inset-inline-end:-7%;bottom:-9%;--pw:clamp(160px,18vw,240px)}

/* ── duo (téléchargement) ── */
.duo{display:flex;justify-content:center;align-items:flex-end}
.duo .pf{--pw:clamp(186px,19vw,258px)}
.duo .pf+.pf{position:relative;z-index:2;margin-inline-start:calc(var(--pw)*-.2);margin-bottom:clamp(20px,3vw,42px)}

/* ── emplacement de capture manquante ── */
.slot{display:flex;flex-direction:column;gap:7px;justify-content:center;padding:19px 21px;border-radius:var(--mk-r-card);background:repeating-linear-gradient(135deg,var(--paper-2) 0 9px,var(--paper-3) 9px 18px);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.slot b{font-family:var(--fm);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.slot span{font-size:12.5px;line-height:1.5;color:var(--ink-55)}
.fc.slot{display:flex;max-width:246px;background-color:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--line-2),0 22px 38px -24px rgba(2,59,47,.26)}

/* ── mobile & tablette : composition dédiée, pas une réduction ── */
@media(max-width:979px){
.stage,.feat-v{flex-direction:column;align-items:center}
.stage .fc,.feat-v .fc{display:none}
.stage .fc.keep,.feat-v .fc.keep{position:static;display:flex;inset:auto;margin:-20px auto 0;max-width:min(100%,342px);width:auto}
.stage .fc-img.keep,.feat-v .fc-img.keep{display:block;width:min(90%,342px);margin-top:-26px}
.stage-hero .pf,.feat-v .pf{--pw:min(78vw,326px)}
.deck>.pf{--pw:min(24vw,150px)}
.deck>.pf-lead{--pw:min(44vw,232px)}
}
@media(max-width:899px){
.trio-i{transform:none!important}
.compo .pf{position:static;--pw:min(64%,240px);margin:-46px auto 0}
.compo .fc{position:static;display:flex;inset:auto;margin:20px auto 0;max-width:min(100%,342px)}
}
@media(max-width:759px){.duo .pf{--pw:min(44%,186px)}}

/* ── explorateur interactif (onglets → écrans réels) ── */
.ip{display:grid;gap:clamp(22px,3vw,32px);justify-items:center;width:100%}
.ip .pf{--pw:clamp(272px,26vw,336px)}
.ip-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ip-tabs button{height:42px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:550;color:var(--ink-70);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .25s,color .25s,box-shadow .25s}
.ip-tabs button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ip-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.ink .ip-tabs button{color:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ink .ip-tabs button[aria-pressed="true"]{background:var(--mint);color:var(--ink);box-shadow:none}
.ip .pf-s>img{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.ip .pf-s>img.is-on{opacity:1}
.ip-hint{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-40)}
.ink .ip-hint{color:rgba(255,255,255,.55)}
.duo-lg .pf{--pw:clamp(200px,22vw,296px)}

/* ── triptyque : problème → HAYATAK → résolu ── */
.tri{display:grid;gap:clamp(14px,2vw,26px);align-items:center;width:100%}
@media(min-width:900px){.tri{grid-template-columns:1fr .84fr 1fr}}
.tri figure{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;background:var(--paper-3)}
.tri figure>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tri figure:hover>img{transform:scale(1.04)}
.tri figcaption{position:absolute;z-index:2;inset-inline:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:14px;padding:10px 14px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tri-mid{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.tri-mid .pf{--pw:clamp(176px,19vw,252px)}
.tri-mid .k{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}

/* ── univers de services (téléphone + familles réelles) ── */
.uv{position:relative;display:grid;justify-items:center;gap:clamp(24px,3vw,34px);width:100%}
.uv .pf{--pw:clamp(240px,24vw,310px)}
.uv-ring{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:720px}
.chip{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:#fff;font-size:15px;font-weight:550;color:var(--ink);box-shadow:var(--mk-card-sh);transition:transform .4s var(--ease),opacity .4s}
.chip i{width:8px;height:8px;border-radius:3px;background:var(--mint);font-style:normal;flex:none}
.chip.c-apri i{background:var(--apricot)}
.chip.c-ink i{background:var(--ink)}
@media(hover:hover){.uv-ring:hover .chip{opacity:.42}.uv-ring .chip:hover{opacity:1;transform:translateY(-3px)}}

/* ── fiche prestataire agrandie ── */
.pfz{position:relative;display:flex;justify-content:center;align-items:center;width:100%;gap:clamp(22px,3vw,48px);flex-wrap:wrap}
.pfz .pf{--pw:clamp(158px,16vw,212px)}
.pfz-card{flex:1 1 320px;max-width:460px;background:#fff;border-radius:var(--r2);box-shadow:var(--mk-card-sh);overflow:hidden}
.pfz-card>img{width:100%;height:auto;display:block}
.pfz-card .rows{display:grid;padding:6px 22px 18px}
.pfz-card .rows div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.pfz-card .rows div:last-child{border:0}
.pfz-card .rows span{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-40);flex:none}
.pfz-card .rows b{font-weight:600;letter-spacing:-.015em;text-align:end}

/* ── reçu de réservation ── */
.rc{display:grid;gap:clamp(28px,4vw,60px);align-items:center;width:100%;justify-items:center}
@media(min-width:820px){.rc{grid-template-columns:auto 1fr}}
.rc .pf{--pw:clamp(196px,20vw,262px)}
.rc-card{width:100%;max-width:430px;background:#fff;border-radius:var(--r2);box-shadow:var(--mk-card-sh);padding:clamp(20px,2.4vw,30px)}
.rc-card>img{width:100%;height:auto;display:block;border-radius:12px}
.rc-card .rows{display:grid;margin-top:16px}
.rc-card .rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.rc-card .rows div:last-child{border:0}
.rc-card .rows span{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-40);flex:none}
.rc-card .rows b{font-size:15px;font-weight:600;letter-spacing:-.015em;text-align:end}
.rc-card.float{position:absolute;z-index:3;width:clamp(238px,25vw,318px);padding:16px}
.rc-card.float .rows div{padding:9px 0}
.rc-card.float .rows b{font-size:13.5px}
.rc-card.float .rows span{font-size:9px}
@media(max-width:979px){.rc-card.float{position:static;width:min(92%,360px);margin:-24px auto 0}}

/* ── pile d'écrans qui s'ouvre au survol ── */
.sk{position:relative;width:min(100%,640px);aspect-ratio:1.3/1;display:grid;place-items:center;margin-inline:auto}
.sk .pf{position:absolute;--pw:clamp(150px,17vw,224px);transition:transform .75s var(--ease)}
.sk .pf:nth-child(1){transform:translate(0,26px) scale(.9);z-index:1}
.sk .pf:nth-child(2){transform:translate(0,14px) scale(.95);z-index:2}
.sk .pf:nth-child(3){transform:translate(0,4px);z-index:3}
.sk .pf:nth-child(4){z-index:4}
@media(hover:hover) and (min-width:760px){
.sk:hover .pf:nth-child(1){transform:translate(-46%,-4%) rotate(-7deg)}
.sk:hover .pf:nth-child(2){transform:translate(-16%,4%) rotate(-2.5deg)}
.sk:hover .pf:nth-child(3){transform:translate(16%,4%) rotate(2.5deg)}
.sk:hover .pf:nth-child(4){transform:translate(46%,-4%) rotate(7deg)}
}
@media(max-width:759px){.sk{aspect-ratio:1/1}.sk .pf{--pw:min(52vw,214px)}}

/* ── page bibliothèque (mockups.html) ── */
.mk-item{padding-block:clamp(44px,6vw,84px);border-top:1px solid var(--line)}
.mk-head{display:grid;gap:20px;align-items:end}
@media(min-width:900px){.mk-head{grid-template-columns:1.2fr 1fr}}
.mk-spec{display:grid;gap:0;font-size:13.5px}
.mk-spec div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.mk-spec dt{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-40);padding-top:2px}
.mk-spec dd{color:var(--ink-70)}
.mk-vars{display:grid;gap:clamp(24px,3vw,44px);margin-top:clamp(30px,4vw,52px)}
@media(min-width:900px){.mk-vars.v-3{grid-template-columns:repeat(3,1fr)}.mk-vars.v-2{grid-template-columns:repeat(2,1fr)}}
.mk-var{display:flex;flex-direction:column;gap:18px}
.mk-frame{position:relative;display:flex;justify-content:center;align-items:center;padding:clamp(26px,4vw,54px) clamp(18px,3vw,40px);border-radius:var(--r3);overflow:hidden;background:var(--paper-2);min-height:340px}
.mk-frame.f-mint{background:var(--mint-soft)}
.mk-frame.f-apri{background:linear-gradient(170deg,var(--apricot-soft),var(--apricot-2))}
.mk-frame.f-ink{background:var(--ink)}
.mk-frame .pf{--pw:clamp(150px,17vw,216px)}
.mk-frame .deck>.pf{--pw:clamp(104px,11vw,142px)}
.mk-frame .deck>.pf-lead{--pw:clamp(142px,16vw,196px)}
.mk-frame .fc{max-width:158px;padding:10px 12px;gap:9px;border-radius:15px}
.mk-frame .fc b{font-size:12px;margin-top:3px}
.mk-frame .fc .k{font-size:8.5px;letter-spacing:.14em}
.mk-frame .fc .ic{width:26px;height:26px;border-radius:9px}
.mk-frame .fc-img{width:clamp(124px,13vw,162px);border-radius:15px}
.mk-frame .fc-cap{padding:8px 11px;font-size:8.5px;letter-spacing:.13em}
.mk-frame .slot span{font-size:11px}
.mk-frame .deck-cap{margin-top:20px;font-size:9px;gap:8px 12px}
.mk-lbl{display:flex;align-items:baseline;gap:12px}
.mk-lbl b{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.mk-lbl span{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}
@media(max-width:699px){.mk-frame .fc{display:none}.mk-frame{min-height:0}}