@font-face{font-family:'Playfair Display';src:url(fonts/Playfair.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(fonts/Playfair-Italic.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url(fonts/Jost.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#161412;--soft:#5d554d;--muted:#9a8f84;--ivory:#fbf8f3;--sand:#f3ede4;--gold:#a8875a;--gold2:#c9ad7f;--line:#e6ddd0}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Jost',sans-serif;font-weight:400;color:var(--ink);background:#ece6dd;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
.screen{display:none;min-height:100vh;max-width:430px;margin:0 auto;background:var(--ivory);position:relative;padding-bottom:128px}
.screen.on{display:block}
.top{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px}
.logo{font-family:'Playfair Display',serif;font-size:15px;letter-spacing:.34em;text-transform:uppercase;font-weight:400}
.logo small{display:block;font-family:'Jost';font-size:7.5px;letter-spacing:.5em;color:var(--gold);text-align:center;margin-top:3px}
.ico{width:36px;height:36px;display:grid;place-items:center}
.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2}
.kicker{font-size:9.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:500}
h1{font-family:'Playfair Display',serif;font-weight:400;font-size:31px;line-height:1.14;letter-spacing:-.01em;margin:10px 0 0}
h1 em{font-style:italic}
.pad{padding:0 24px}
.rule{display:flex;align-items:center;gap:10px;margin:22px 24px 16px;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--soft)}
.rule:after{content:'';flex:1;height:1px;background:var(--line)}
.lead{color:var(--soft);font-size:13.5px;line-height:1.65;font-weight:300}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;width:calc(100% - 48px);max-width:382px;background:var(--ink);color:#fff;border:0;padding:19px;font:500 11px 'Jost';letter-spacing:.32em;text-transform:uppercase;display:flex;justify-content:center;align-items:center;gap:14px;z-index:5}
.cta:after{content:'';width:22px;height:1px;background:var(--gold2)}
.steps{display:flex;gap:6px;padding:0 24px 24px}
.steps span{flex:1;height:1px;background:var(--line)}.steps span.d{background:var(--ink);height:1.5px}
/* accueil */
.hero{height:560px;position:relative;overflow:hidden}
.hero img{object-position:50% 22%}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,18,.35) 0%,rgba(22,20,18,0) 22%,rgba(22,20,18,0) 50%,rgba(22,20,18,.55) 72%,rgba(22,20,18,.82) 100%)}
.hero .top{position:absolute;top:0;left:0;right:0;z-index:2;color:#fff}
.hero .top .logo small{color:#fff;opacity:.85}
.hero .cap{position:absolute;left:24px;right:24px;bottom:30px;z-index:2;color:#fff}
.hero .cap .kicker{color:var(--gold2)}
.hero .cap h1{font-size:38px;color:#fff}
.trio{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 24px 0;border-top:1px solid var(--line)}
.trio div{padding:16px 10px 0 0;font-size:11.5px;line-height:1.5;color:var(--soft)}
.trio div+div{padding-left:12px;border-left:1px solid var(--line)}
.trio b{display:block;font-family:'Playfair Display';font-style:italic;font-weight:400;color:var(--gold);font-size:15px;margin-bottom:6px}
.trio strong{display:block;font-weight:500;color:var(--ink);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.privacy{margin:22px 24px 0;display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);letter-spacing:.02em}
.privacy svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.3;flex:none}
/* profil */
.prof{display:grid;grid-template-columns:132px 1fr;gap:20px;margin-top:22px}
.photo{height:228px;position:relative;overflow:hidden;background:var(--sand)}
.photo img{object-position:50% 30%}
.photo .ok{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(22,20,18,.7),transparent);color:#fff;font-size:9px;letter-spacing:.22em;text-transform:uppercase;padding:24px 10px 10px}
.photo .ok i{color:var(--gold2);font-style:normal;font-display:swap}
.num{border-bottom:1px solid var(--line);padding:2px 0 12px;margin-bottom:14px}
.lbl{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.num .v{font-family:'Playfair Display';font-size:34px;line-height:1}.num .v small{font-family:'Jost';font-size:11px;letter-spacing:.2em;color:var(--muted);margin-left:6px;text-transform:uppercase}
.seg2{display:flex;border:1px solid var(--line)}
.seg2 span{flex:1;text-align:center;font-size:11px;padding:9px 0;letter-spacing:.06em;color:var(--soft)}.seg2 span.on{background:var(--ink);color:#fff}
.q{margin:24px 24px 0}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.cmp div{padding:14px 6px 12px;text-align:center;font-size:10.5px;line-height:1.35;color:var(--soft)}
.cmp div+div{border-left:1px solid var(--line)}
.cmp div.on{background:var(--sand);color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.cmp svg{height:44px;width:44px;display:block;margin:0 auto 8px;fill:none;stroke:var(--ink);stroke-width:1.1}
.sw{display:flex;gap:12px}
.sw span{width:30px;height:30px;border-radius:50%;position:relative}
.sw span.on:after{content:'';position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);padding:8px 14px;font-size:11.5px;letter-spacing:.04em;color:var(--soft)}
.chip.on{border-color:var(--ink);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 .5px var(--ink)}
/* dressing */
.tabs{display:flex;gap:22px;padding:0 24px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.tabs span{padding:12px 0}.tabs b{font-weight:500;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;padding:22px 24px}
.piece .img{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--sand)}
.piece .old{position:absolute;top:10px;left:10px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;background:rgba(251,248,243,.92);padding:5px 8px;color:var(--ink)}
.piece .old i{color:var(--gold);font-style:normal;font-display:swap}
.piece .meta{padding-top:10px}
.piece .t{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.piece .n{font-family:'Playfair Display';font-size:15px;margin-top:3px}
.piece .c{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;margin-top:3px}
.piece .c i{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.add{aspect-ratio:4/5;border:1px solid var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:10px;letter-spacing:.24em;text-transform:uppercase;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(168,135,90,.05) 9px 10px)}
.add b{display:block;font-family:'Playfair Display';font-weight:400;font-size:36px;color:var(--gold);letter-spacing:0;margin-bottom:6px}
/* résultats */
.morph{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;background:var(--ink);color:#fff;padding:22px;margin:22px 24px 0}
.morph svg{width:70px;height:96px;fill:none;stroke:var(--gold2);stroke-width:1}
.morph .kicker{color:var(--gold2)}
.morph h2{font-family:'Playfair Display';font-weight:400;font-size:24px;margin:6px 0 6px}
.morph h2 em{color:var(--gold2)}
.morph p{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.7);font-weight:300}
.look{margin:0 24px 28px}
.look .col{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:300px}
.look .col>div{overflow:hidden;background:var(--sand)}
.look .col>div:first-child{grid-row:1/3}
.look .hd{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.look h3{font-family:'Playfair Display';font-weight:400;font-size:21px}
.look h3 em{font-style:italic;color:var(--gold)}
.look .occ{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.why{list-style:none;margin-top:10px}
.why li{font-size:12.5px;line-height:1.6;color:var(--soft);padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--line);font-weight:300}
.why li:before{content:'';position:absolute;left:0;top:15px;width:10px;height:1px;background:var(--gold)}
.why li b{font-weight:500;color:var(--ink)}
.pal{display:flex;margin:0 24px}.pal span{flex:1;height:44px}
.palt{display:flex;margin:6px 24px 0;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.palt span{flex:1}
/* maquillage */
.dip{display:grid;grid-template-columns:1fr 1fr;gap:4px;height:300px;margin:0 0 0}
.dip div{overflow:hidden;position:relative}
.dip .a img{object-position:50% 50%}
.dip .b img{object-position:50% 70%}
.dip .cap{position:absolute;left:12px;top:12px;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.diag{display:flex;margin:-22px 24px 0;background:#fff;position:relative;z-index:2;box-shadow:0 10px 30px rgba(22,20,18,.08)}
.diag div{flex:1;padding:14px 12px;text-align:center;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.diag div+div{border-left:1px solid var(--line)}
.diag b{display:block;font-family:'Playfair Display';font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400;margin-top:4px}
.occs{display:flex;gap:22px;padding:0 24px;margin-top:20px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.occs span{padding:12px 0}.occs b{font-weight:500;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--ink)}
.adv{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:20px 0;margin:0 24px;border-bottom:1px solid var(--line)}
.adv .ph{width:76px;height:96px;overflow:hidden}
.adv .k{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.adv h4{font-family:'Playfair Display';font-weight:400;font-size:18px;margin:3px 0 4px}
.adv p{font-size:12px;color:var(--soft);line-height:1.6;font-weight:300}
.pans{display:flex;gap:14px;margin-top:12px}
.pan{text-align:center;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:44px}
.pan i{display:block;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold2),inset -3px -4px 8px rgba(0,0,0,.18),inset 3px 3px 7px rgba(255,255,255,.35)}
.pan i.stick{border-radius:14px 14px 4px 4px;width:16px;height:34px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold2),inset -3px 0 5px rgba(0,0,0,.2)}
/* coiffure */
.hairs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 24px 0}
.hairs div{position:relative}
.hairs .im{aspect-ratio:3/4.4;overflow:hidden}
.hairs span{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:9px;text-align:center}
.hairs div.on span{color:var(--ink);font-weight:500}
.hairs div.on .im{outline:1px solid var(--ink);outline-offset:0;box-shadow:0 0 0 3px var(--ivory),0 0 0 4px var(--gold)}
.tip{margin:0 24px;padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;gap:12px}
.tip .n{font-family:'Playfair Display';font-style:italic;color:var(--gold);font-size:22px;line-height:1}
.tip h4{font-family:'Playfair Display';font-weight:400;font-size:18px;margin-bottom:4px}
.tip p{font-size:12px;color:var(--soft);line-height:1.6;font-weight:300}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(251,248,243,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:12px 0 22px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);z-index:5}
.nav span{text-align:center;position:relative}
.nav svg{width:20px;height:20px;display:block;margin:0 auto 5px;fill:none;stroke:currentColor;stroke-width:1.1}
.nav span.on{color:var(--ink)}.nav span.on:before{content:'';position:absolute;top:-13px;left:50%;width:18px;height:1.5px;background:var(--gold);transform:translateX(-50%)}

/* ===== Ajouts application fonctionnelle ===== */
html{scroll-behavior:smooth}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.screen.has-nav{padding-bottom:150px}
.cta[disabled]{opacity:.35}
.cta.above-nav{bottom:92px}
.ico{cursor:pointer;color:inherit}
.field{margin:24px 24px 0}
.inrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:22px 24px 0}
.inbox{border-bottom:1px solid var(--line);padding-bottom:8px}
.inbox input{width:100%;border:0;background:transparent;font-family:'Playfair Display',serif;font-size:30px;color:var(--ink);outline:none;padding:0;-moz-appearance:textfield}
.inbox input::-webkit-outer-spin-button,.inbox input::-webkit-inner-spin-button{-webkit-appearance:none}
.inbox input::placeholder{color:#d5ccc0}
.inbox .u{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.inbox:focus-within{border-color:var(--gold)}
.photoBlock{display:grid;grid-template-columns:132px 1fr;gap:20px;margin:22px 24px 0;align-items:end}
.photo.empty img{opacity:.28;filter:grayscale(.6)}
.photo .ph-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);padding:12px}
.btnline{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);padding:13px 10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;width:100%;margin-top:10px;background:#fff}
.btnline.ghost{border-color:var(--line);background:transparent;color:var(--soft)}
.btnline svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.2}
.hint{font-size:11px;color:var(--muted);line-height:1.55;margin-top:8px;font-weight:300}
.chip,.seg2 span,.cmp div,.sw span,.tabs span,.tabs b,.occs span,.occs b{cursor:pointer}
.cmp.c4{grid-template-columns:repeat(2,1fr)}
.cmp.c4 div:nth-child(3){border-left:0}
.cmp.c4 div:nth-child(n+3){border-top:1px solid var(--line)}
.sw{flex-wrap:wrap}
.sw span{border:0}
.sw .sl{width:auto;height:auto;border-radius:0;font-size:10px;color:var(--muted);align-self:center}
.err{color:#9b3b2f;font-size:11.5px;margin:14px 24px 0;min-height:16px}
.section-note{margin:14px 24px 0;font-size:11px;color:var(--muted);line-height:1.6;display:flex;gap:10px}
.section-note svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.3;flex:none;margin-top:1px}
/* dressing */
.piece{cursor:pointer}
.add{cursor:pointer;width:100%}
.empty-state{margin:10px 24px;padding:26px 20px;border:1px solid var(--line);text-align:center}
.empty-state h3{font-family:'Playfair Display';font-weight:400;font-size:20px;margin-bottom:8px}
.empty-state p{font-size:12px;color:var(--soft);line-height:1.6;font-weight:300}
.insp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 4px}
.insp div{aspect-ratio:4/5;overflow:hidden;opacity:.9}
.counter{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 24px}
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(22,20,18,.45);z-index:20;display:none}
.sheet-bg.on{display:block}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;max-height:92vh;overflow:auto;background:var(--ivory);z-index:21;padding:0 0 110px;display:none}
.sheet.on{display:block}
.sheet .grab{width:36px;height:2px;background:var(--line);margin:10px auto 0}
.sheet .sh-head{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 0}
.sheet .sh-prev{height:230px;margin:16px 24px 0;overflow:hidden;background:var(--sand)}
.sheet .sh-prev img{object-fit:contain}
.sheet .q{margin-top:20px}
.sheet .txt{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:'Playfair Display';font-size:19px;padding:6px 0;outline:none;color:var(--ink)}
.sheet .txt:focus{border-color:var(--gold)}
.sheet .actions{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--ivory);padding:14px 24px 22px;display:flex;gap:10px;border-top:1px solid var(--line)}
.sheet .actions .cta{position:static;transform:none;width:auto;flex:1}
.sheet .actions .del{border:1px solid var(--line);padding:0 16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9b3b2f}
.colsw{display:flex;flex-wrap:wrap;gap:10px}
.colsw span{width:28px;height:28px;border-radius:50%;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.colsw span.on:after{content:'';position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%}
.colname{font-size:11px;color:var(--soft);margin-top:10px;min-height:14px}
.toggle{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;cursor:pointer}
.toggle .sw-t{width:40px;height:22px;border-radius:12px;background:var(--line);position:relative;transition:.2s}
.toggle .sw-t:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on .sw-t{background:var(--ink)}.toggle.on .sw-t:after{left:21px;background:var(--gold2)}
.toggle b{font-weight:400;font-size:13px}.toggle small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
/* résultats */
.measure{margin:14px 24px 0;font-size:11.5px;color:var(--soft);line-height:1.6;font-weight:300}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:0 24px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .chip{white-space:nowrap}
.look .col.c2{grid-template-rows:1fr}
.look .col.c2>div:first-child{grid-row:auto}
.look .col.c1{grid-template-columns:1fr;grid-template-rows:1fr}
.look .col.c1>div:first-child{grid-row:auto}
.look .col.c4>div:first-child{grid-row:1/3}
.look .col.c4{grid-template-columns:1.35fr 1fr 1fr}
.look .col.c4>div:nth-child(2){grid-column:2/4}
.look .extra{display:flex;gap:4px;margin-top:4px;height:76px}
.look .extra div{flex:1;overflow:hidden;background:var(--sand)}
.look .score{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.advgrid{margin:0 24px}
.advgrid h4{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:18px 0 6px}
.advgrid h4.no{color:var(--muted)}
.oldcard{display:grid;grid-template-columns:76px 1fr;gap:16px;margin:0 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.oldcard .ph{height:96px;overflow:hidden;background:var(--sand)}
.oldcard h4{font-family:'Playfair Display';font-weight:400;font-size:17px;margin-bottom:4px}
.oldcard p{font-size:12px;color:var(--soft);line-height:1.6;font-weight:300}
.avoid{display:flex;gap:8px;margin:12px 24px 0;align-items:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.avoid span.d{width:18px;height:18px;border-radius:50%;position:relative;overflow:hidden}
.avoid span.d:after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:#fff;transform:rotate(-45deg)}
.userphoto{margin:22px 24px 0;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.userphoto .ph{height:128px;overflow:hidden;background:var(--sand)}
.pal.big span{height:52px}
.menu-list{padding:10px 24px}
.menu-list button{display:block;width:100%;text-align:left;padding:18px 0;border-bottom:1px solid var(--line);font-family:'Playfair Display';font-size:19px}
.menu-list button.danger{color:#9b3b2f}
.menu-list p{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:18px;font-weight:300}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;letter-spacing:.14em;padding:12px 18px;z-index:40;opacity:0;transition:.3s;pointer-events:none}
.toast.on{opacity:1}
.hairs .im.txt{display:grid;place-items:center;background:var(--sand);font-family:'Playfair Display';font-style:italic;color:var(--gold);font-size:28px}
.resume{margin:16px 24px 0;display:flex;gap:10px}
.resume .btnline{margin:0}
.sheet{left:0;right:0;margin:0 auto;transform:none}
.sheet .actions{left:0;right:0;margin:0 auto;transform:none}
.screen.on:not(.has-nav)::after{content:'';position:fixed;left:0;right:0;bottom:0;height:120px;max-width:430px;margin:0 auto;background:linear-gradient(rgba(251,248,243,0),var(--ivory) 45%);z-index:4;pointer-events:none}
.avoid{flex-wrap:wrap;gap:8px 16px}
.avoid .al{width:100%}
.avoid .it{display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--soft)}
.avoid span.d{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* Emblème Allure Dorée */
.logo .emb{display:block;width:auto;height:38px;object-fit:contain;margin:0 auto 9px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hero .top{align-items:flex-start;padding-top:16px}
.hero .top .ico{margin-top:40px}
.logo .emb{height:48px;margin-bottom:10px}
.hero:after{background:linear-gradient(180deg,rgba(22,20,18,.62) 0%,rgba(22,20,18,.32) 20%,rgba(22,20,18,0) 34%,rgba(22,20,18,0) 50%,rgba(22,20,18,.55) 72%,rgba(22,20,18,.82) 100%)}
.hero .top .ico{margin-top:52px}

/* iOS : les éléments non natifs n'émettent un « click » que s'ils sont marqués cliquables */
[data-go],[data-act],[data-edit],[data-k],[data-pk],[data-filter],[data-occ],[data-bocc],[data-hocc],[data-hair],.sheet-bg{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.sheet-open{overflow:hidden}
.sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Bandeaux horizontaux défilables au doigt (iOS) */
.tabs,.occs,.chiprow{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)}
.tabs::-webkit-scrollbar,.occs::-webkit-scrollbar,.chiprow::-webkit-scrollbar{display:none}
.tabs.end,.occs.end,.chiprow.end{-webkit-mask-image:none;mask-image:none}
.tabs>*,.occs>*,.chiprow>*{flex:none;scroll-snap-align:start}
.tabs::after,.occs::after,.chiprow::after{content:'';flex:none;width:24px}
.occs{gap:22px}
.screen{padding-bottom:150px}
.screen.has-nav{padding-bottom:170px}
.add{min-height:160px}
.add{border-color:rgba(176,141,87,.6);color:var(--ink)}
.occs,.chiprow{white-space:nowrap}
.tabs,.occs,.chiprow{scroll-padding-inline:24px}

/* ===== QA iPhone : zones sûres (encoche, barre d'accueil) ===== */
.top{padding-top:calc(20px + env(safe-area-inset-top))}
.hero .top{padding-top:calc(16px + env(safe-area-inset-top))}
.nav{padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px))}
.cta{bottom:calc(26px + env(safe-area-inset-bottom))}
.cta.above-nav{bottom:calc(92px + env(safe-area-inset-bottom))}
.sheet .actions{padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px))}
.sheet{max-height:calc(92vh - env(safe-area-inset-top));padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.toast{top:calc(18px + env(safe-area-inset-top));max-width:calc(100% - 32px);text-align:center;line-height:1.5}
.screen{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.screen.has-nav{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
/* ===== Cibles tactiles ≥ 44 px ===== */
.ico{width:44px;height:44px;margin:-4px}
.chip{min-height:44px;display:inline-flex;align-items:center}
.chips .chip{min-height:40px}
.seg2 span{padding:14px 0}
.tabs span,.tabs b,.occs span,.occs b{padding:15px 0 14px}
.nav span{flex:1;min-height:44px;padding-top:2px}
.resume .btnline{min-height:46px}
.sw span::before,.colsw span::before{content:'';position:absolute;inset:-7px}
.colsw{gap:12px}.colsw span{width:30px;height:30px}
.inbox input{min-height:40px}
/* ===== Palette : libellés lisibles sans chevauchement ===== */
.palt{letter-spacing:.06em;font-size:8px;gap:2px}
.palt span{text-align:center;overflow-wrap:anywhere;line-height:1.3}
/* ===== Beauté : visuels cohérents avec la teinte conseillée ===== */
.liptint{position:absolute;inset:0;mix-blend-mode:color;-webkit-mask:url(assets/levres-mask.png) 50% 70%/cover no-repeat;mask:url(assets/levres-mask.png) 50% 70%/cover no-repeat;pointer-events:none}
.adv .ph .smear{width:76px;height:96px;display:block}
.dip .cap{white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chips .chip{min-height:44px}
.tabs,.occs{gap:12px}
.tabs span,.tabs b,.occs span,.occs b{padding:15px 6px 14px}
.dip .cap{white-space:normal;right:10px}
.dip .cap small{display:block;margin-top:5px;font-size:8px;letter-spacing:.2em;opacity:.9}
.hero .cap{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero .cap .kicker{color:#f3dfb2;text-shadow:0 1px 8px rgba(0,0,0,.55)}
:root{--muted:#7a7066;--gold:#8a6b42}