/* Page Images */
:root{color-scheme:dark;--line:#ffffff14;--red:#ff4d58;--text:#f4eef0;--muted:#9a8c92}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:#050206;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* fond */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(1000px 600px at 50% -10%,#2a0a1055,transparent 70%)}
.bg i{position:absolute;border-radius:50%;will-change:transform}
.bg .o1{width:640px;height:640px;left:-180px;top:-160px;background:radial-gradient(circle,#e5303c44,transparent 68%);animation:o1 22s ease-in-out infinite alternate}
.bg .o2{width:560px;height:560px;right:-160px;bottom:-200px;background:radial-gradient(circle,#8f142044,transparent 68%);animation:o2 26s ease-in-out infinite alternate}
@keyframes o1{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes o2{to{transform:translate(-180px,-100px) scale(1.12)}}

/* barre du haut */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--line);background:#06030aeb}
.back{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 9px;border:1px solid #ffffff1f;border-radius:13px;background:#ffffff08;font-size:13px;font-weight:650;transition:background .18s,border-color .18s,transform .18s}
.back:hover{background:#ff4d5818;border-color:#ff4d5877;transform:translateY(-1px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:850;letter-spacing:-.02em}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px #ff393966)}
.brand span{color:var(--red)}
.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.quota{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:99px;background:#ffffff08;font-size:12.5px;color:#cfc2c8}
.quota b{color:#fff}.quota small{color:var(--muted)}
.quota .ring{--p:100%;width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--red) var(--p),#ffffff1c 0);position:relative}
.quota .ring::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:#0b0709}

/* contenu */
.page{max-width:1280px;margin:0 auto;padding:34px 22px 190px}
.page h1{margin:0;font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;font-weight:800}
.sub{margin:8px 0 22px;color:var(--muted);font-size:15px}
.sub b{color:#ff9aa5}
.chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;margin-bottom:22px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;height:40px;padding:0 18px;border:1px solid #ffffff1c;border-radius:99px;background:#ffffff08;color:#d8ccd1;font-size:13.5px;font-weight:650;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s}
.chips button:hover{background:#ffffff12;color:#fff}
.chips button[aria-selected=true]{border-color:#ff4d58aa;background:linear-gradient(135deg,#ff4d5833,#c2152b22);color:#fff;box-shadow:0 8px 22px #e5303c33}
.block{margin-bottom:34px}
.block h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:17px;font-weight:750}
.block h2 span{padding:2px 9px;border-radius:99px;background:#ff2d3a1c;border:1px solid #ff4d5844;color:#ff9aa5;font-size:11.5px;font-weight:800}

/* grille de cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:20px;background:#120c10;cursor:pointer;text-align:left;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s;animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.card:hover{transform:translateY(-5px);border-color:#ff4d5877;box-shadow:0 22px 50px #000a,0 0 40px #e5303c26}
.card:focus-visible{outline:2px solid #ff7782;outline-offset:3px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.08)}
.card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#000d 0%,#0008 28%,transparent 62%)}
.card .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px;font-size:14px;font-weight:700;line-height:1.3;text-shadow:0 2px 12px #000}
.card .cap small{display:block;margin-top:4px;color:#ffb3ba;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.card .use{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff33;border-radius:50%;background:#000a;color:#fff;opacity:0;transform:scale(.8);transition:opacity .2s,transform .25s}
.card:hover .use,.card:focus-visible .use{opacity:1;transform:none}
.card .del{position:absolute;left:12px;top:12px;z-index:3;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff33;border-radius:50%;background:#000b;color:#fff;font-size:17px;line-height:1;opacity:0;cursor:pointer;transition:opacity .2s,background .2s}
.card:hover .del{opacity:1}.card .del:hover{background:#ff2d3a}

/* carte « en cours » */
.card.loading::after{background:linear-gradient(110deg,#ffffff06 30%,#ffffff18 50%,#ffffff06 70%) 0 0/200% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.card .prog{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;font-size:12px;color:#ffd5d9}
.card .prog i{display:block;height:5px;margin-top:8px;border-radius:99px;background:#ffffff1c;overflow:hidden}
.card .prog i b{display:block;height:100%;width:8%;border-radius:99px;background:linear-gradient(90deg,#c81b3c,#ff8e96);transition:width .5s}
.card.err{border-color:#ff4d5877}
.card.err .cap{color:#ffb0b6}

/* barre de création */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;pointer-events:none;background:linear-gradient(to top,#050206 0,#050206cc 55%,transparent)}
.dock>*{pointer-events:auto}
.dock-box{position:relative;display:flex;align-items:center;gap:8px;width:min(860px,100%);height:60px;padding:0 10px;border:1px solid #ffffff24;border-radius:99px;background:linear-gradient(180deg,#171013f5,#0c0709f7);box-shadow:0 18px 50px #000c,inset 0 1px 0 #ffffff12;transition:border-color .2s,box-shadow .2s}
.dock-box:focus-within{border-color:#ff4d5899;box-shadow:0 18px 50px #000c,0 0 0 4px #ff4d5820}
.dock-box input{flex:1;min-width:0;height:100%;padding:0 6px;border:0;background:none;font-size:16px;outline:0}
.dock-box input::placeholder{color:#8f8086}
.d-plus,.d-q,.d-go{flex:none;display:grid;place-items:center;border:0;cursor:pointer;transition:background .18s,transform .18s,box-shadow .2s}
.d-plus{width:42px;height:42px;border-radius:50%;background:#ffffff0f;color:#f3eaed}
.d-plus:hover{background:#ff4d5822;transform:rotate(90deg)}
.d-q{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:99px;background:transparent;color:#cfc2c8;font-size:13.5px;font-weight:650}
.d-q:hover{background:#ffffff10;color:#fff}
.d-go{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#ff5560,#cf1c2a);color:#fff;box-shadow:0 8px 22px #e5303c77,inset 0 1px 0 #ffffff66}
.d-go:hover{transform:scale(1.08);box-shadow:0 12px 30px #e5303caa,inset 0 1px 0 #ffffff66}
.d-go:disabled{background:#2a1218;box-shadow:none;opacity:.6;cursor:not-allowed;transform:none}
.dock-note{margin:9px 0 0;color:#6f6168;font-size:11.5px}
.menu{position:absolute;bottom:calc(100% + 12px);left:0;z-index:5;width:230px;padding:8px;border:1px solid #ff4d5844;border-radius:18px;background:linear-gradient(170deg,#220a10,#0a0508 70%);box-shadow:0 24px 60px #000d;animation:pop .18s cubic-bezier(.2,1.1,.4,1) both}
.menu.right{left:auto;right:56px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.menu p{margin:2px 8px 6px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.menu button{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 10px;border:0;border-radius:11px;background:none;color:#eadfe3;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.menu button:hover{background:#ffffff10}
.menu button small{margin-left:auto;color:#8f8086;font-size:11.5px;font-weight:500}
.menu button[aria-checked=true]{background:linear-gradient(90deg,#ff4d5822,transparent);color:#fff}
.menu button[aria-checked=true]::after{content:"✓";margin-left:8px;color:#ff7a86;font-size:12px}
.ar{display:block;border:2px solid #cfc2c8;border-radius:3px}
.ar.sq{width:16px;height:16px}.ar.ls{width:20px;height:12px}.ar.pt{width:12px;height:20px}

/* visionneuse */
.lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.lb-bd{position:absolute;inset:0;background:#030105e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-box{position:relative;margin:0;display:grid;gap:14px;max-width:min(1000px,100%);max-height:100%;animation:pop .25s both}
.lb-box img{display:block;max-width:100%;max-height:68dvh;margin:0 auto;border-radius:18px;box-shadow:0 30px 90px #000,0 0 60px #e5303c26}
.lb-box figcaption{text-align:center}
.lb-box p{margin:0 0 12px;color:#cfc2c8;font-size:13.5px;line-height:1.5}
.lb-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.lb-x{position:absolute;right:-6px;top:-14px;z-index:3;width:38px;height:38px;border:1px solid #ffffff33;border-radius:50%;background:#000b;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid #ffffff26;border-radius:13px;background:#ffffff0a;color:#f1e7ea;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:#ffffff16;transform:translateY(-1px)}
.btn.primary{border:0;background:linear-gradient(180deg,#ff5560,#cf1c2a);color:#fff;box-shadow:0 8px 22px #e5303c55,inset 0 1px 0 #ffffff55}
.btn.danger{border-color:#ff4d5855;color:#ff9aa5}

/* fenêtre « connexion requise » */
.wall{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.wall-bd{position:absolute;inset:0;background:#030105d0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wall-dlg{position:relative;width:min(420px,100%);padding:30px 26px 24px;border:1px solid #ff4d5844;border-radius:24px;text-align:center;background:radial-gradient(300px 140px at 50% 0%,#ff2d3a2a,transparent 70%),linear-gradient(160deg,#2a0b11,#0b0508 65%);box-shadow:0 40px 100px #000,0 0 70px #e5303c33;animation:pop .25s both}
.wall-dlg h2{margin:12px 0 8px;font-size:21px}.wall-dlg p{margin:0 0 18px;color:#a8999d;font-size:14px;line-height:1.55}
.wall-dlg .btn{width:100%;margin-top:8px;height:46px}
.wall-ico{display:grid;place-items:center;width:58px;height:58px;margin:0 auto;border:1px solid #ff4d5877;border-radius:18px;background:linear-gradient(145deg,#4a0e18,#1a070c);color:#ff6a75;box-shadow:0 0 28px #e5303c66}

@media(max-width:700px){
  .top{padding:10px 12px;gap:8px}
  .back span{display:none}.back{padding:0 10px}
  .brand{font-size:18px}.brand img{width:28px;height:28px}
  .quota small{display:none}
  .page{padding:22px 14px 170px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{border-radius:16px}.card .cap{font-size:12.5px;padding:11px}
  .dock-box{height:56px}
  .dock-note{display:none}
  .menu.right{right:48px}
}

/* ===== Modification d'une photo ===== */
.d-photo{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:#ffffff0f;color:#f3eaed;cursor:pointer;transition:background .18s,transform .18s,color .18s}
.d-photo:hover{background:#ff4d5822;color:#fff;transform:translateY(-1px)}
.d-photo.on{background:linear-gradient(135deg,#ff5560,#cf1c2a);color:#fff;box-shadow:0 6px 18px #e5303c66}
.attach{display:flex;align-items:center;gap:12px;width:min(860px,100%);margin:0 0 10px;padding:8px 10px;border:1px solid #ff4d5855;border-radius:18px;background:linear-gradient(135deg,#2a0b11f2,#0d0709f5);box-shadow:0 14px 40px #000b;animation:pop .22s cubic-bezier(.2,1.1,.4,1) both}
.attach img{width:54px;height:54px;flex:none;border-radius:12px;object-fit:cover;border:1px solid #ffffff2a}
.att-txt{flex:1;min-width:0;display:grid;gap:2px}
.att-txt b{font-size:13.5px}.att-txt small{color:#a8999d;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-x{flex:none;width:32px;height:32px;border:1px solid #ffffff26;border-radius:50%;background:#ffffff0a;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.att-x:hover{background:#ff2d3a;border-color:#ff2d3a}
.drop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#050206d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.drop>div{display:grid;justify-items:center;gap:8px;padding:48px 64px;border:2px dashed #ff4d58aa;border-radius:28px;background:#ff2d3a12;color:#ffd5d9;text-align:center}
.drop b{font-size:20px;color:#fff}.drop small{color:#a8999d}
.card .tag{position:absolute;left:12px;bottom:46px;z-index:3;padding:2px 9px;border:1px solid #ff4d5877;border-radius:99px;background:#000a;color:#ffb3ba;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.strength{flex:none;display:inline-flex;gap:2px;padding:3px;border:1px solid #ffffff1c;border-radius:12px;background:#06040a}
.strength button{height:30px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#a89aa0;font-size:12px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}
.strength button:hover{color:#fff}
.strength button[aria-pressed=true]{background:linear-gradient(135deg,#ff4d58,#c2152b);color:#fff;box-shadow:0 4px 12px #e5303c55}
@media(max-width:700px){.attach{flex-wrap:wrap}.att-txt{flex-basis:calc(100% - 100px)}.strength{order:5;width:100%}.strength button{flex:1}}

/* ===== Finitions v4 ===== */
.page{padding-top:46px}
.page h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.05em;line-height:1.05;background:linear-gradient(180deg,#fff 20%,#ff8f99 120%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .6s both}
.sub{margin:12px 0 34px;font-size:16.5px;max-width:560px;animation:rise .6s .08s both}
.block h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#d9ccd1;margin-bottom:16px}
.block h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#ff4d5833,transparent)}
.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{border-radius:24px;border-color:#ffffff1a;box-shadow:0 14px 34px #0009}
.card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff26;pointer-events:none}
.card .cap{font-size:15px;padding:18px 18px}
.card.err{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;background:radial-gradient(220px 160px at 50% 20%,#ff2d3a22,transparent 70%),linear-gradient(170deg,#1c0a0f,#0b0608);border-color:#ff4d5877}
.card.err::after{display:none}
.card.err .cap{position:static;padding:0;font-size:13.5px;line-height:1.45;color:#ffc4c9;text-shadow:none}
.errico{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ff4d5888;border-radius:15px;background:#ff2d3a22;color:#ff7a86;font-size:22px;font-weight:800;box-shadow:0 0 26px #e5303c55}
.card .retry{padding:7px 14px;border:1px solid #ffffff2a;border-radius:99px;background:#ffffff0c;font-size:12px;font-weight:700;color:#fff}
.card.err:hover .retry{background:#ff2d3a;border-color:#ff2d3a}
.dock-box{height:64px;border-radius:99px}
@media(max-width:700px){.page h1{font-size:34px}.grid{gap:12px}.card .cap{font-size:12.5px;padding:12px}}