/* Page « Expérience patient » (outils/experience.py) — maquette du 06/10/2026 */
.xp{max-width:var(--W,1240px);margin:0 auto;padding:clamp(70px,12vh,140px) clamp(16px,5vw,64px) clamp(80px,14vh,160px)}
.xp-s{opacity:0;transform:translateY(40px);transition:opacity .9s,transform 1.1s cubic-bezier(.34,1.25,.64,1)}
.xp-s.vu{opacity:1;transform:none}
.xp-s+.xp-s{margin-top:clamp(90px,16vh,180px)}
.xp-k{font:500 11px/1.2 Satoshi,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#5c6354;margin:0 0 18px}
.xp h2{font-family:Aegean;font-weight:400;font-size:clamp(34px,3.6vw,60px)!important;line-height:1.08;margin:0 0 24px!important;color:var(--ink);text-transform:none;max-width:16ch}
.xp-t p{font-size:clamp(16px,1.15vw,19px);line-height:1.7;color:#3a3633;max-width:46ch;margin:0}
.xp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:center}
.xp-duo.inv .xp-t{order:2}
.xp-m{margin:0;border-radius:22px;overflow:hidden;background:#1d1b19;box-shadow:0 40px 80px -50px rgba(11,10,9,.6)}
.xp-m img,.xp-m video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.xp-s.vu .xp-m img,.xp-s.vu .xp-m video{transform:scale(1.03)}
/* petites attentions : bandeau sauge clair */
.xp-attn{background:#E3E6DB;border-radius:28px;padding:clamp(48px,7vw,96px) clamp(24px,5vw,80px)}
.xp-attg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:clamp(24px,4vh,48px)}
.xp-att{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.xp-tv{margin:0;min-height:320px}.xp-tv video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.xp-tv figcaption{position:absolute;left:16px;bottom:14px;font:500 10.5px/1 Satoshi,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#F3EEE6;background:rgba(11,10,9,.45);padding:8px 12px;border-radius:999px}
.xp-m{position:relative}
.xp-a{display:flex;align-items:center;gap:20px;padding:18px 24px;background:rgba(255,255,255,.62);border:1px solid rgba(92,99,84,.18);border-radius:20px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .7s calc(.3s + var(--i)*.12s),transform 1s cubic-bezier(.34,1.5,.64,1) calc(.3s + var(--i)*.12s),background .4s,border-color .4s}
.xp-s.vu .xp-a{opacity:1;transform:none}
.xp-a:hover{background:#fff;border-color:rgba(92,99,84,.4)}
.xp-a svg{flex:none;width:48px;height:48px;padding:10px;border-radius:50%;background:#F3EEE6;fill:none;stroke:#5c6354;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s cubic-bezier(.34,1.8,.64,1)}
.xp-a:hover svg{transform:scale(1.1) rotate(-6deg)}
.xp-a span{font-family:Aegean;font-size:clamp(20px,1.6vw,26px);line-height:1.2;color:var(--ink)}
/* peur du dentiste */
.xp-peur{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,110px);align-items:start}
.xp-t .xp-pal{font-size:16.5px;color:#5c6354;margin:0 0 44px}
.xp-ps{list-style:none;margin:0;padding:0;position:relative}
.xp-ps::before{content:"";position:absolute;left:21px;top:24px;bottom:70px;width:2px;background:linear-gradient(to bottom,#E3E6DB,#5c6354);transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.6,.05,.2,1) .2s}
.xp-s.vu .xp-ps::before{transform:none}
.xp-p{position:relative;display:grid;grid-template-columns:44px 1fr;gap:26px;padding:0 0 46px;opacity:0;transform:translateX(-16px);transition:opacity .7s calc(.3s + var(--i)*.22s),transform .9s cubic-bezier(.34,1.4,.64,1) calc(.3s + var(--i)*.22s)}
.xp-s.vu .xp-p{opacity:1;transform:none}
.xp-p b{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:Aegean;font-weight:400;font-size:18px;line-height:1;background:color-mix(in srgb,#5c6354 calc(18% + var(--i)*20%),#E3E6DB);color:var(--ink)}
.xp-p:nth-child(n+4) b{color:#F3EEE6}
.xp-p h3{font-family:Aegean;font-weight:400;font-size:clamp(22px,1.7vw,28px);line-height:1.25;margin:6px 0 14px;color:var(--ink)}
.xp-p p{font-size:16px;line-height:1.75;color:#4a4642;margin:0;max-width:50ch}
.xp-col{display:grid;gap:18px;position:sticky;top:110px}
.xp-ep{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:12px 18px 12px 12px;border-radius:18px;background:#fff;border:1px solid rgba(11,10,9,.08);text-decoration:none;color:var(--ink);transition:transform .6s cubic-bezier(.34,1.4,.64,1),box-shadow .6s}
.xp-ep:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(11,10,9,.45)}
.xp-ep img{width:64px;height:84px;object-fit:cover;border-radius:10px;display:block}
.xp-ep small{display:block;font:500 10.5px/1.4 Satoshi,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5c6354}
.xp-ep span{font-family:Aegean;font-size:22px;line-height:1.2}
/* fin */
.xp-fin{border-top:1px solid rgba(11,10,9,.12);padding-top:clamp(50px,8vh,90px)}
.xp-b{display:flex;flex-wrap:wrap;gap:12px}
.xp-btn{display:inline-flex;align-items:center;padding:18px 28px;border-radius:999px;background:var(--ink);color:var(--ivory)!important;text-decoration:none;font:500 12.5px/1 Satoshi,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:transform .5s cubic-bezier(.34,1.6,.64,1)}
.xp-btn:hover{transform:translateY(-3px)}
.xp-btn.ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1px rgba(11,10,9,.3)}
@media(max-width:900px){
  .xp-attg{grid-template-columns:1fr}
  .xp-tv{min-height:0;aspect-ratio:16/10}
  .xp-duo,.xp-peur{grid-template-columns:1fr}
  .xp-duo.inv .xp-t{order:0}
  .xp-col{position:static}
}
@media(max-width:620px){.xp-a{padding:20px}}
@media(prefers-reduced-motion:reduce){.xp-s,.xp-a,.xp-p{opacity:1!important;transform:none!important;transition:none!important}}
.xp-lien{display:inline-block;margin-top:14px;color:#5c6354;font-weight:500;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(92,99,84,.4)}
.xp-lien:hover{text-decoration-color:#5c6354}
.xp-nb{display:block;margin-top:8px;font-size:12.5px;color:#8a857d}
/* jouer depuis le fauteuil */
.xp-jeu{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(28px,5vh,56px);padding-top:clamp(28px,5vh,56px);border-top:1px solid rgba(92,99,84,.2)}
.xp-jv{margin:0;aspect-ratio:9/16;max-height:620px}
.xp-jv video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.xp-son{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);border:0;border-radius:999px;padding:11px 16px;background:rgba(243,238,230,.92);color:#0B0A09;font:500 11px/1 Satoshi,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.xp-son:hover{transform:translateX(-50%) translateY(-2px)}
.xp-jt{background:rgba(255,255,255,.62);border:1px solid rgba(92,99,84,.18);border-radius:20px;padding:26px 30px 28px}
.xp-jh{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.xp-jh svg{flex:none;width:48px;height:48px;padding:10px;border-radius:50%;background:#F3EEE6;fill:none;stroke:#5c6354;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.xp-jt h3{font-family:Aegean;font-weight:400;font-size:clamp(20px,1.6vw,26px);line-height:1.2;margin:0;color:var(--ink)}
.xp-jt p:not(.xp-k){font-size:clamp(16px,1.15vw,19px);line-height:1.7;color:#3a3633;max-width:40ch;margin:0}
@media(max-width:700px){.xp-jeu{grid-template-columns:1fr}.xp-jv{max-width:320px;margin:0 auto;width:100%}}
.xp-kim{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
.xp-kim .xp-t p+p{margin-top:18px}
.xp-portrait{max-width:440px;justify-self:end;width:100%}
.xp-portrait img{aspect-ratio:4/5!important}
@media(max-width:900px){.xp-portrait{justify-self:start}}
.xp .xp-k{margin:0 0 26px!important;line-height:1.4}
.xp-jt .xp-k{margin-bottom:14px!important}
.xp-q{font-family:Aegean;font-size:clamp(20px,1.6vw,25px)!important;line-height:1.35!important;color:var(--ink)!important;border-left:2px solid #5c6354;padding-left:18px;margin-top:26px!important}
.xp-kim{align-items:center}
.xp-portrait img,.xp-s.vu .xp-portrait img{transform:none!important;object-fit:cover;object-position:0% 50%;height:auto}
.xp-kcol{display:grid;gap:18px;justify-self:end;width:100%;max-width:440px}.xp-kcol .xp-portrait{max-width:none}.xp-ep-kim{margin:0}
@media(max-width:900px){.xp-kcol{justify-self:start}}
.xp-kim .xp-t p.xp-q{margin-top:44px!important;margin-bottom:8px!important;line-height:1.4!important}
.xp-jeu{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;align-items:stretch!important}
.xp-jeu .xp-jv{max-height:none;aspect-ratio:auto;min-height:340px}
.xp-att2{align-self:center}
.xp-a-jeu{align-items:flex-start}
.xp-a-jeu .xp-em{display:block;font:500 10.5px/1 Satoshi,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#5c6354;margin:4px 0 8px}
.xp-a-jeu p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#4a4642}
.xp-a-jeu .xp-lien{margin-top:0;font-size:14px}
@media(max-width:900px){.xp-jeu{grid-template-columns:1fr!important}.xp-jeu .xp-jv{min-height:0;aspect-ratio:9/16;max-width:320px}}
.xp video:fullscreen,.xp video:-webkit-full-screen{object-fit:contain!important;background:#000}
.xp-lb{position:fixed;inset:0;z-index:80;background:rgba(11,10,9,.88);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s}
.xp-lb.on{opacity:1;pointer-events:auto}
.xp-lb video{height:min(88vh,calc(92vw*16/9));aspect-ratio:9/16;width:auto;max-width:92vw;object-fit:contain;border-radius:16px;background:#000;transform:scale(.94);transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.xp-lb.on video{transform:none}
.xp-lb-x{position:absolute;top:22px;right:24px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,238,230,.35);background:none;color:#F3EEE6;font-size:26px;cursor:pointer}
/* téléphone : Kim et sa colonne sous le texte (rien ne déborde à droite) ; la vidéo du jeu sous « Jouer depuis le fauteuil », sur toute la largeur du bandeau */
@media(max-width:900px){.xp-kim{grid-template-columns:1fr}.xp-kcol{max-width:none}.xp-jeu .xp-jv{order:2;max-width:none!important;width:100%;aspect-ratio:3/4!important}}