@font-face { font-family: 'Geist'; src:url('/Geist.ttf') format('truetype-variations'), url('/Geist.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg:#000; --text: var(--wc-text); --text-secondary: var(--wc-text-secondary); --accent: var(--wc-accent);
    --photo:#34c759; --video:var(--wc-bleu-vif); --violet:#a78bfa;
    --card-bg:rgba(15,25,50,0.7); --card-border:rgba(var(--wc-bleu-vif-rgb),0.15);
  }
  body { font-family:var(--wc-police); background:#000; color:var(--wc-text);
    min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-0.012em; overflow-x:hidden; }

  .bg-glow { position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--wc-accent-rgb),0.10) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 85% 100%, rgba(175,82,222,0.07) 0%, transparent 55%); }
  #bubbles-wrap { position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
  .bubble { position:absolute; border-radius:50%; filter:blur(130px); pointer-events:none; will-change:transform; transform:translateZ(0); }
  .b1 { animation:f1 44s ease-in-out infinite; } .b2 { animation:f2 60s ease-in-out infinite; }
  .b3 { animation:f3 50s ease-in-out infinite; } .b4 { animation:f4 70s ease-in-out infinite; }
  @keyframes f1 { 0%{transform:translate(0,0) scale(1)} 35%{transform:translate(60vw,-10vh) scale(0.9)} 55%{transform:translate(20vw,55vh) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes f2 { 0%{transform:translate(0,0) scale(1)} 40%{transform:translate(-60vw,-20vh) scale(0.93)} 65%{transform:translate(15vw,50vh) scale(1.06)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes f3 { 0%{transform:translate(0,0) scale(1)} 45%{transform:translate(50vw,30vh) scale(1.07)} 70%{transform:translate(30vw,-40vh) scale(0.96)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes f4 { 0%{transform:translate(0,0) scale(1)} 42%{transform:translate(-20vw,-50vh) scale(0.94)} 68%{transform:translate(40vw,45vh) scale(1.03)} 100%{transform:translate(0,0) scale(1)} }
  @media (prefers-reduced-motion: reduce) { .bubble { animation:none; } }

  nav { position:sticky; top:0; z-index:1000; height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:0 24px; background:rgba(0,0,0,0.75); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,0.08); }
  nav .brand { justify-self:start; display:inline-flex; align-items:center; height:100%; }
  nav .brand img { height:24px; display:block; }
  nav .nav-pill { justify-self:center; display:inline-flex; align-items:center; padding:6px 14px; font-size:12px; font-weight:500;
    color:var(--wc-text-secondary); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--wc-r-pilule); line-height:1; }
  nav .nav-user { justify-self:end; display:none; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--wc-r-pilule);
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); font-size:12px; font-weight:500; color:var(--wc-text-secondary); cursor:pointer; transition:all .15s; line-height:1; }
  nav .nav-user:hover { background:rgba(255,69,58,0.15); border-color:rgba(255,69,58,0.3); color:var(--wc-red); }
  nav .nav-user .x { opacity:0.5; font-size:10px; }

  main { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:32px 24px 90px; }

  .toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
  .toolbar h1 { font-size:24px; font-weight:700; color:var(--wc-texte-bleute); letter-spacing:-0.02em; }
  .toolbar .actions { display:flex; gap:10px; flex-wrap:wrap; }
  .toolbar .tb-mobile { display:none; }
  @media (max-width: 560px) {
    .toolbar .actions { width:100%; flex-wrap:nowrap; align-items:center; }
    .toolbar .actions > .btn:not(.tb-mobile) { display:none !important; }
    .toolbar .tb-mobile { display:inline-flex; justify-content:center; min-height:44px; }
    .toolbar .tb-mobile:not(.tb-outils) { flex:1; font-size:15px; }
    .toolbar .tb-outils { width:44px; padding:0; font-size:20px; letter-spacing:1px; }
    .toolbar .storage { order:-1; flex:0 0 auto; }
  }

  .btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--wc-r-s); font-size:13px; font-weight:600;
    cursor:pointer; border:none; transition:all 0.15s; font-family:inherit; text-decoration:none; color:var(--wc-texte-bleute); white-space:nowrap; }
  .btn-primary { background:var(--wc-bleu-fonce); color:#fff; } .btn-primary:hover { background:#1d4ed8; }
  .btn-photo { background:#22a147; color:#eafff0; } .btn-photo:hover { background:#1d8a3d; }
  .btn-video { background:var(--wc-bleu-fonce); color:#fff; } .btn-video:hover { background:#1d4ed8; }
  .btn-ghost { background:rgba(var(--wc-bleu-vif-rgb),0.08); color:#93b4ef; border:1px solid rgba(var(--wc-bleu-vif-rgb),0.2); }
  .btn-ghost:hover { background:rgba(var(--wc-bleu-vif-rgb),0.15); }
  .btn-danger { background:rgba(239,68,68,0.1); color:var(--wc-rouge-clair); border:1px solid rgba(239,68,68,0.2); }
  .btn-danger:hover { background:rgba(239,68,68,0.2); }
  .btn-sm { padding:6px 11px; font-size:12px; border-radius:var(--wc-r-s); }
  .btn[disabled] { opacity:.5; pointer-events:none; }

  .cl-section { margin-bottom:30px; }
  .cl-header { display:flex; align-items:center; gap:14px; background:rgba(167,139,250,0.06); border:1px solid rgba(167,139,250,0.28);
    border-radius:var(--wc-r-m); padding:13px 16px; cursor:pointer; user-select:none; transition:border-color .2s, background .2s; margin-bottom:16px; }
  .cl-header:hover { border-color:rgba(167,139,250,0.5); background:rgba(167,139,250,0.09); }
  .cl-header.orphan { background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.13); border-style:dashed; }
  .cl-caret { color:#c4b5fd; font-size:12px; transition:transform .15s; flex-shrink:0; }
  .cl-section.collapsed .cl-caret { transform:rotate(-90deg); }
  .cl-header.orphan .cl-caret { color:var(--wc-gris-bleu); }
  .cl-icon { width:38px; height:38px; border-radius:var(--wc-r-m); background:rgba(167,139,250,0.15); display:grid; place-items:center; flex-shrink:0; }
  .cl-header.orphan .cl-icon { background:rgba(255,255,255,0.05); }
  .cl-name { font-size:16px; font-weight:700; color:var(--wc-texte-bleute); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cl-badges { display:flex; gap:8px; flex-shrink:0; }
  .cl-actions { display:flex; gap:6px; flex-shrink:0; }
  .cl-section.collapsed .cl-body { display:none; }

  .grp-label { font-size: var(--wc-surtitre-taille); text-transform: var(--wc-surtitre-casse); letter-spacing: var(--wc-surtitre-espacement); color: var(--wc-surtitre-couleur); font-weight: var(--wc-surtitre-graisse); margin:6px 0 12px;
    display:flex; align-items:center; gap:10px; }
  .grp-label .dot { width:8px; height:8px; border-radius:50%; }
  .grp-label.photo .dot { background:var(--photo); } .grp-label.video .dot { background:var(--video); }
  .grp-label .sp { flex:1; }

  /* Sous-groupe : dossier dans un client */
  .folder { margin:2px 0 14px; }
  .folder-head { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:var(--wc-r-s); margin-bottom:10px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); }
  .folder-head .folder-ic { font-size:14px; flex-shrink:0; }
  .folder-name { font-size:13.5px; font-weight:600; color:#dbe6f7; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .folder-cnt { font-size:11px; color:var(--wc-gris-acier); font-weight:600; }
  .folder-acts { display:flex; gap:5px; }
  .folder-empty { font-size:12px; color:var(--wc-gris-nuit); font-style:italic; padding:0 2px 8px; }

  /* Élément DANS un dossier : présenté en ligne compacte (façon liens client) */
  .frows { display:flex; flex-direction:column; gap:7px; margin-bottom:6px; }
  .frow { display:flex; align-items:center; gap:12px; padding:8px 11px; border-radius:var(--wc-r-m);
    background:var(--card-bg); border:1px solid var(--card-border); }
  .frow.photo { border-color:rgba(52,199,89,0.18); }
  .frow-thumb { width:66px; aspect-ratio:16/9; border-radius:var(--wc-r-s); overflow:hidden; background:#0a1220; flex-shrink:0; cursor:pointer; position:relative; }
  .frow-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .frow-thumb.ph { display:grid; place-items:center; font-size:19px; background:linear-gradient(135deg, rgba(52,199,89,0.16), rgba(52,199,89,0.03)); }
  .frow-tag { position:absolute; top:2px; left:2px; padding:1px 5px; border-radius:var(--wc-r-xs); font-size:9px; font-weight:700; }
  .frow-tag.photo { background:rgba(52,199,89,0.92); color:#04210f; } .frow-tag.video { background:rgba(var(--wc-bleu-fonce-rgb),0.92); color:#fff; }
  .frow-body { flex:1; min-width:0; }
  .frow-title { font-size:13.5px; font-weight:600; color:var(--wc-texte-bleute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .frow-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px; color:var(--wc-gris-nuit); margin-top:3px; }
  .pos-sel { flex:0 0 auto; align-self:center; margin-right:2px; background:rgba(255,255,255,.05);
             border:1px solid rgba(255,255,255,.14); border-radius:var(--wc-r-s); color:#cdd9f0;
             font:inherit; font-size:12.5px; padding:5px 6px; cursor:pointer; }
  .pos-sel:hover { border-color:var(--wc-accent); }
  .frow-acts { display:flex; gap:5px; flex-shrink:0; }
  /* Éléments du rendu téléphone, absents sur ordinateur. */
  .frow-etat, .frow-plus, .frow-pos, .folder-sous { display:none; }
  .folder-txt { flex:1; min-width:0; display:flex; align-items:center; }

  @media (max-width: 560px) {
    .frow-acts .lbl { display:none; }
    /* Lignes d'archives (ancien rendu) : deux rangées, boutons dessous. */
    .frow:not(.frow2) { display:grid; grid-template-columns:96px minmax(0,1fr);
      grid-template-areas:"thumb body" "acts acts"; column-gap:13px; row-gap:11px; padding:12px; border-radius:var(--wc-r-m); }
    .frow:not(.frow2) .frow-thumb { grid-area:thumb; width:96px; }
    .frow:not(.frow2) .frow-body { grid-area:body; align-self:center; }
    .frow:not(.frow2) .frow-acts { grid-area:acts; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

    /* ── Dossier + son contenu = une seule carte, façon liste iOS (21/10) ── */
    .folder { margin:0; }
    .folder-head { margin:0; padding:13px 10px 13px 14px; gap:11px; border-radius:var(--wc-r-l) var(--wc-r-l) 0 0;
      background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-bottom:0; }
    .folder-head .folder-ic { font-size:20px; }
    .folder-txt { flex-direction:column; align-items:flex-start; gap:2px; }
    .folder-name { font-size:16px; font-weight:700; color:#f2f6ff; width:100%; }
    .folder-sous { display:block; font-size:12.5px; color:#7f93b4; }
    .folder-head .folder-acts, .folder-head .folder-cnt, .folder-head > .badge { display:none; }
    .folder + .frows, .folder + .folder-empty { margin:0 0 22px; border:1px solid rgba(255,255,255,.08); border-top:0;
      border-radius:0 0 var(--wc-r-l) var(--wc-r-l); background:rgba(255,255,255,.025); overflow:hidden; }
    .folder + .frows { gap:0; }
    .folder + .folder-empty { padding:14px 16px; }

    /* ── Une ligne : miniature · titre + état · « ⋯ » ── */
    .frows .frow2 { display:flex; align-items:center; gap:13px; padding:12px 8px 12px 14px; margin:0;
      background:none; border:0; border-radius:0; border-top:1px solid rgba(255,255,255,.07);
      cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s; }
    .frows .frow2:active { background:rgba(255,255,255,.05); }
    .frow2 .pos-sel, .frow2 .frow-acts, .frow2 .frow-meta, .frow2 .frow-tag { display:none; }
    /* Les marqueurs accolés au titre (✅ par le client, 🔒, 🖼, ✨) sont dits en clair
       dans la ligne d'état : on ne les répète pas. */
    .frow2 .frow-title > span { display:none; }
    .frow2 .frow-thumb { width:112px; border-radius:var(--wc-r-s); align-self:center; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
    .frow2 .frow-thumb.ph { font-size:24px; }
    .frow-pos { display:block; position:absolute; left:6px; bottom:6px; min-width:21px; height:21px; padding:0 6px;
      border-radius:var(--wc-r-s); background:rgba(8,12,22,.82); color:#fff; font-size:11.5px; font-weight:700;
      line-height:21px; text-align:center; font-variant-numeric:tabular-nums; }
    .frow2 .frow-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
      font-size:15px; font-weight:650; line-height:1.28; color:#f2f6ff; }
    .frow-etat { display:flex; flex-direction:column; gap:3px; margin-top:5px; font-size:12.5px; line-height:1.35; color:#c9d5ea; }
    .frow-etat .e-gris, .folder-sous .e-gris { color:#7f93b4; }
    .e-vert { color:var(--wc-vert-clair); font-weight:600; }
    .e-rouge { color:var(--wc-rouge-clair); font-weight:600; }
    .e-orange { color:#fb923c; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
    .e-orange i { width:7px; height:7px; border-radius:50%; background:#fb923c; box-shadow:0 0 6px rgba(251,146,60,.7); }
    .frow-plus { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%;
      border:0; background:rgba(255,255,255,.06); color:#c9d5ea; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .frow-plus:active { background:rgba(255,255,255,.14); }
    .folder-head .frow-plus { background:rgba(255,255,255,.08); }
  }

  /* ── Feuille d'actions (téléphone) ── */
  body.fa-ouverte #home-shortcut-link { display:none !important; }
  body.fa-ouverte .bubble { animation-play-state:paused; }
  /* Pas d'attente du double-toucher (zoom) de Safari iOS : le toucher agit tout de suite. */
  .frow2, .frow-plus, .fa-item, .fa-annuler, .fa-pos-sel { touch-action:manipulation; }
  /* Toujours en place, invisible tant qu'il est fermé : rien à construire à l'ouverture. */
  .fa-fond { position:fixed; inset:0; z-index:100450; background:rgba(0,0,0,.55); opacity:0; visibility:hidden;
    pointer-events:none; transition:opacity .15s ease, visibility 0s linear .2s; }
  .fa-fond.ouvert { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .15s ease, visibility 0s; }
  .fa-feuille { position:absolute; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px));
    max-height:80vh; overflow:auto; background:#121b2e; border:1px solid rgba(255,255,255,.09); border-radius:var(--wc-r-xl);
    padding:6px 6px 8px; transform:translateY(110%); transition:transform .2s cubic-bezier(.2,.9,.3,1); will-change:transform;
    box-shadow:0 -10px 40px rgba(0,0,0,.45); }
  .fa-fond.ouvert .fa-feuille { transform:none; }
  .fa-poignee { width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,.18); margin:6px auto 4px; }
  .fa-titre { padding:8px 14px 12px; font-size:13px; font-weight:600; color:#7f93b4; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(255,255,255,.07); }
  .fa-liste { display:flex; flex-direction:column; }
  .fa-item, .fa-pos { display:flex; align-items:center; gap:13px; width:100%; min-height:52px; padding:0 14px;
    background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06); color:#eef3ff; font:inherit;
    font-size:15.5px; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .fa-item:active { background:rgba(255,255,255,.06); }
  .fa-ic { width:26px; text-align:center; font-size:18px; flex:0 0 26px; }
  .fa-danger { color:var(--wc-rouge-clair); }
  .fa-pos { cursor:default; }
  .fa-pos > span:nth-child(2) { flex:1; }
  .fa-pos-sel { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--wc-r-s);
    color:#eef3ff; font:inherit; font-size:15px; padding:6px 10px; min-width:64px; }
  .fa-annuler { display:block; width:100%; margin-top:8px; min-height:52px; border:0; border-radius:var(--wc-r-l);
    background:rgba(255,255,255,.07); color:#eef3ff; font:inherit; font-size:16px; font-weight:650; cursor:pointer; }

  /* Vue disque (admin) */
  .disk-filters { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 6px; }
  .disk-filters .btn.on { background:rgba(var(--wc-bleu-vif-rgb),0.18); border-color:rgba(var(--wc-bleu-vif-rgb),0.45); color:#dbe6f7; }
  .disk-list { max-height:52vh; overflow-y:auto; }
  .dk { display:flex; align-items:center; gap:11px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .dk-ic { width:30px; height:30px; border-radius:var(--wc-r-s); display:grid; place-items:center; flex-shrink:0; font-size:14px; }
  .dk-ic.video { background:rgba(var(--wc-bleu-fonce-rgb),0.16); } .dk-ic.gallery { background:rgba(52,199,89,0.14); }
  .dk-ic.orphan { background:rgba(251,191,36,0.16); }
  .dk-body { flex:1; min-width:0; }
  .dk-name { font-size:13.5px; font-weight:600; color:var(--wc-texte-bleute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--wc-gris-acier); margin-top:2px; }
  .dk-size { font-size:12.5px; font-weight:700; color:#dbe6f7; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .dk-acts { display:flex; gap:5px; flex-shrink:0; }
  .dk-empty { color:var(--wc-gris-nuit); font-size:13px; padding:16px 4px; }
  .dk-count { margin-left:auto; align-self:center; font-size:11.5px; color:var(--wc-gris-acier); font-variant-numeric:tabular-nums; }

  /* Indicateur d'espace de stockage (barre d'outils) */
  .storage { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--wc-gris-acier); margin-right:4px; }
  .storage .st-txt { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .storage .st-bar { width:70px; height:5px; border-radius:3px; background:rgba(255,255,255,0.09); overflow:hidden; }
  .storage .st-fill { display:block; height:100%; background:var(--wc-vert-clair); border-radius:3px; transition:width .3s; }
  .storage .st-fill.warn { background:var(--wc-ambre); }
  .storage .st-fill.danger { background:var(--wc-rouge-clair); }

  /* Espace Archives : volontairement discret (en pointillé, en bas du client) */
  .arch-wrap { margin-top:22px; }
  .arch-toggle { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--wc-r-s);
    background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.14); color:var(--wc-gris-acier); font-size:12.5px;
    font-weight:600; cursor:pointer; font-family:inherit; }
  .arch-toggle:hover { color:var(--wc-texte-bleute); border-color:rgba(255,255,255,0.28); }
  .arch-section { margin-top:12px; padding:14px 16px 6px; border-radius:var(--wc-r-m); background:rgba(255,255,255,0.015); border:1px dashed rgba(255,255,255,0.1); }
  .arch-section .grp-label { margin-top:2px; }
  .frow.gone { opacity:.6; border-style:dashed; }

  .badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--wc-r-xl); font-size:11px; font-weight:600; white-space:nowrap; }
  .badge-photo { background:rgba(52,199,89,0.15); color:var(--wc-vert-clair); }
  .badge-video { background:rgba(var(--wc-bleu-fonce-rgb),0.15); color:var(--wc-bleu-clair); }
  .badge-orange { background:rgba(234,88,12,0.15); color:#fb923c; }
  .badge-green { background:rgba(22,163,74,0.15); color:var(--wc-vert-clair); }
  .badge-amber { background:rgba(251,191,36,0.15); color:var(--wc-ambre); }

  .reviews-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:13px; margin-bottom:6px; }
  .card2 { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--wc-r-m); overflow:hidden;
    transition:border-color 0.2s; display:flex; flex-direction:column; }
  .card2.photo { border-color:rgba(52,199,89,0.18); } .card2.photo:hover { border-color:rgba(52,199,89,0.45); }
  .card2.video:hover { border-color:rgba(var(--wc-bleu-vif-rgb),0.4); }
  .card2-thumb { position:relative; width:100%; aspect-ratio:16/9; background:#0a1220; overflow:hidden; cursor:pointer; }
  .card2-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .card2-thumb.ph { display:flex; align-items:center; justify-content:center; font-size:34px;
    background:linear-gradient(135deg, rgba(52,199,89,0.16), rgba(52,199,89,0.03)); }
  .card2-thumb .ov { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); opacity:0; transition:opacity .2s; }
  .card2-thumb:hover .ov { opacity:1; }
  .card2-play { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .card2.video .card2-play { background:rgba(var(--wc-bleu-fonce-rgb),0.9); } .card2.photo .card2-play { background:rgba(52,199,89,0.9); }
  .card2-type { position:absolute; top:8px; left:8px; padding:3px 9px; border-radius:var(--wc-r-pilule); font-size:11px; font-weight:700; }
  .card2-type.photo { background:rgba(52,199,89,0.92); color:#04210f; } .card2-type.video { background:rgba(var(--wc-bleu-fonce-rgb),0.92); color:#fff; }
  .card2-count { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.7); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--wc-r-pilule); }
  .card2-body { padding:14px 16px; flex:1; }
  .card2-title { font-size:14px; font-weight:600; color:var(--wc-texte-bleute); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card2-desc { font-size:12px; color:var(--wc-gris-acier); margin-bottom:10px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card2-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--wc-gris-nuit); }
  .card2-meta .date { margin-left:auto; }
  .card2-actions { display:flex; gap:6px; padding:11px 16px; border-top:1px solid rgba(var(--wc-bleu-vif-rgb),0.1); flex-wrap:wrap; align-items:center; }
  .card2.photo .card2-actions { border-top-color:rgba(52,199,89,0.12); }
  .card2-sel { display:flex; gap:6px; padding:0 16px 12px; flex-wrap:wrap; }
  .card2-sel select { flex:1; min-width:120px; background:rgba(255,255,255,0.06); color:var(--wc-texte-bleute); border:1px solid rgba(255,255,255,0.12); border-radius:var(--wc-r-s);
    padding:5px 8px; font-size:12px; font-family:inherit; cursor:pointer; }

  .empty-state { text-align:center; padding:80px 24px; color:var(--wc-gris-nuit); }
  .empty-state .ei { font-size:48px; margin-bottom:16px; }

  /* Au-dessus de la barre d'onglets de l'application (wc-onglets, 100400). */
  .mb { position:fixed; inset:0; z-index:100420; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s ease, visibility 0s linear .26s; }
  .mb.open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .26s ease; }
  .modal { background:#0a1628; border:1px solid rgba(var(--wc-bleu-vif-rgb),0.2); border-radius:var(--wc-r-l); width:100%; max-width:520px; padding:26px;
    position:relative; margin:auto; max-height:calc(100vh - 40px); overflow-y:auto;
    transform:translateY(16px) scale(0.96); transition:transform .3s cubic-bezier(0.16,1,0.3,1); }
  .modal.wide { max-width:680px; }
  .mb.open .modal { transform:translateY(0) scale(1); }
  @media (prefers-reduced-motion: reduce) { .mb { transition:opacity .12s ease, visibility 0s linear .12s; } .modal { transition:none; transform:none; } }
  .modal h2 { font-size:17px; font-weight:700; color:var(--wc-texte-bleute); margin-bottom:4px; }
  .modal .msub { font-size:13px; color:var(--wc-gris-acier); margin-bottom:18px; line-height:1.5; }
  .modal-close { position:absolute; top:15px; right:16px; background:none; border:none; color:var(--wc-gris-nuit); cursor:pointer; font-size:18px; }
  .modal-close:hover { color:var(--wc-texte-bleute); }
  .fg { margin-bottom:15px; }
  .fg2 { display:flex; gap:12px; } .fg2 > * { flex:1; }
  .fl { font-size:12px; font-weight:500; color:var(--wc-gris-acier); margin-bottom:6px; display:block; }
  .fl .opt { opacity:.7; font-weight:400; }
  .fi { width:100%; padding:10px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(var(--wc-bleu-vif-rgb),0.2); border-radius:var(--wc-r-s);
    color:var(--wc-texte-bleute); font-size:13.5px; outline:none; transition:border-color 0.15s; font-family:inherit; }
  .fi:focus { border-color:rgba(var(--wc-bleu-vif-rgb),0.6); }
  textarea.fi { resize:vertical; min-height:64px; }
  .chk { display:flex; align-items:center; gap:9px; font-size:13px; color:#cbd8ee; cursor:pointer; margin-bottom:11px; }
  .chk input { width:auto; }
  .err { color:var(--wc-rouge-clair); font-size:13px; min-height:16px; margin-bottom:8px; }
  .form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; align-items:center; }

  /* Onglets internes (source vidéo) */
  .tabs { display:flex; gap:4px; background:rgba(255,255,255,0.04); border-radius:var(--wc-r-s); padding:4px; margin-bottom:12px; }
  .tab { flex:1; padding:8px; border-radius:var(--wc-r-s); border:none; background:transparent; color:#8ba0c0; font-size:12.5px; font-weight:600;
    cursor:pointer; font-family:inherit; }
  .tab.on { background:var(--wc-bleu-fonce); color:#fff; }
  .up-row { display:flex; gap:8px; align-items:center; }
  .up-row input[type=file] { flex:1; min-width:0; font-size:12px; color:var(--wc-text-secondary); }
  .up-status { font-size:12px; margin-top:7px; color:#8ba0c0; min-height:14px; }
  .up-bar-wrap { height:6px; background:rgba(255,255,255,0.07); border-radius:var(--wc-r-s); overflow:hidden; margin-top:6px; display:none; }
  .up-bar-wrap.on { display:block; }
  .up-bar { height:100%; width:0; background:var(--wc-bleu-fonce); transition:width .2s; }
  .filecard { display:none; align-items:center; gap:10px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25);
    border-radius:var(--wc-r-s); padding:9px 12px; margin-top:8px; }
  .filecard.on { display:flex; }
  .filecard .fn { flex:1; min-width:0; font-size:12.5px; color:#dbe6f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .filecard .fs { font-size:11px; color:#8ba0c0; }

  .attach-list { max-height:280px; overflow-y:auto; margin:-2px 0 14px; }
  .attach-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--wc-r-s); border:1px solid rgba(255,255,255,0.08); margin-bottom:7px; }
  .attach-row .ic { width:26px; height:26px; border-radius:var(--wc-r-s); display:grid; place-items:center; flex-shrink:0; font-size:13px; }
  .attach-row .ic.photo { background:rgba(52,199,89,0.9); } .attach-row .ic.video { background:rgba(var(--wc-bleu-fonce-rgb),0.9); }
  .attach-row .an { flex:1; min-width:0; font-size:13px; color:var(--wc-texte-bleute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .attach-row select { min-width:130px; padding:6px 9px; font-size:12.5px; }

  .pm-zone { border:2px dashed rgba(var(--wc-bleu-vif-rgb),0.3); border-radius:var(--wc-r-m); padding:24px 16px; text-align:center; color:var(--wc-gris-acier);
    cursor:pointer; transition:all .15s; margin-bottom:6px; }
  .pm-zone:hover, .pm-zone.drag { border-color:rgba(var(--wc-bleu-vif-rgb),0.7); background:rgba(var(--wc-bleu-vif-rgb),0.07); color:var(--wc-texte-bleute); }
  .pm-zone strong { color:var(--wc-bleu-clair); }
  .pm-prog { margin:14px 0 4px; display:none; } .pm-prog.on { display:block; }
  .pm-bar-wrap { height:7px; background:rgba(255,255,255,0.07); border-radius:var(--wc-r-s); overflow:hidden; margin-top:6px; }
  .pm-bar { height:100%; width:0; background:var(--wc-bleu-fonce); transition:width .2s; } .pm-bar.webp { background:#22a147; }
  .pm-status { font-size:12.5px; color:var(--wc-gris-acier); }
  .pm-links { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 4px; }
  .pm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin-top:16px; }
  .pm-thumb { position:relative; aspect-ratio:1; border-radius:var(--wc-r-s); overflow:hidden; background:rgba(255,255,255,0.04); }
  .pm-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .pm-thumb .del { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.72); border:none; color:#fff; border-radius:50%;
    width:22px; height:22px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
  .pm-thumb:hover .del { opacity:1; }
  .pm-thumb .mv { position:absolute; top:3px; left:3px; width:24px; height:24px; border:none; border-radius:50%;
    background:rgba(0,0,0,.72); color:#fff; font-size:13px; line-height:24px; text-align:center; cursor:pointer; opacity:0; transition:opacity .15s; }
  .pm-thumb:hover .mv { opacity:1; }
  @media (hover:none) { .pm-thumb .mv, .pm-thumb .del { opacity:1; } }
  .fa-lib { display:flex; flex-direction:column; min-width:0; }
  .fa-lib small { font-size:12.5px; color:#7f93b4; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  #toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100500;
    background:rgba(15,25,50,0.96); border:1px solid rgba(var(--wc-bleu-vif-rgb),0.3); color:var(--wc-texte-bleute); padding:11px 18px; border-radius:var(--wc-r-m);
    font-size:13px; font-weight:500; opacity:0; pointer-events:none; transition:all .25s; box-shadow:0 8px 30px rgba(0,0,0,.5); }
  #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }  
  .page-footer { position:relative; z-index:1; text-align:center; padding:18px; font-size:12px; color:rgba(255,255,255,0.3); border-top:1px solid rgba(255,255,255,0.06); }
  .page-footer a { color:rgba(255,255,255,0.3); text-decoration:none; }

  /* ─── Mise en page maître-détail : liste des clients à gauche, contenu à droite ─── */
  .layout { display:grid; grid-template-columns:266px minmax(0,1fr); gap:24px; align-items:start; }
  .side { position:sticky; top:80px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 100px); }
  .side-search { width:100%; padding:9px 12px; border-radius:var(--wc-r-s); border:1px solid rgba(var(--wc-bleu-vif-rgb),0.2);
    background:rgba(255,255,255,0.04); color:var(--wc-texte-bleute); font-size:13px; font-family:inherit; outline:none; }
  .side-search:focus { border-color:rgba(var(--wc-bleu-vif-rgb),0.6); }
  .clist { display:flex; flex-direction:column; gap:4px; overflow-y:auto; padding-right:2px; }
  .crow { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--wc-r-m); cursor:pointer;
    border:1px solid transparent; transition:background .15s, border-color .15s; }
  .crow:hover { background:rgba(255,255,255,0.04); }
  .crow.on { background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.4); }
  .crow.orphan.on { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); }
  .crow-ic { width:30px; height:30px; border-radius:var(--wc-r-s); background:rgba(167,139,250,0.15); display:grid; place-items:center; flex-shrink:0; }
  .crow.orphan .crow-ic { background:rgba(255,255,255,0.05); }
  .crow-name { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:#dbe6f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .crow.on .crow-name { color:#fff; }
  .crow-cnt { display:flex; gap:6px; flex-shrink:0; font-size:11px; font-weight:600; }
  .crow-cnt .p { color:var(--wc-vert-clair); } .crow-cnt .v { color:var(--wc-bleu-clair); }
  .side-empty { font-size:12.5px; color:var(--wc-gris-nuit); padding:10px 12px; }

  .detail { min-width:0; }
  .detail-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .detail-back { display:none; }
  .detail-title { font-size:19px; font-weight:700; color:var(--wc-texte-bleute); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detail-acts { display:flex; gap:6px; flex-shrink:0; }
  .type-block { margin-bottom:26px; }

  @media (max-width: 860px) {
    .layout { grid-template-columns:1fr; }
    .side { position:static; max-height:none; }
    /* Sur mobile : on montre la liste OU le détail, avec un bouton retour */
    body.detail-open .side { display:none; }
    body:not(.detail-open) .detail { display:none; }
    .detail-back { display:inline-flex; }
  }

    /* Cibles tactiles : sur ecran tactile uniquement, ces boutons-icones
       mesuraient 20 a 29 px de haut — trop petits pour le doigt. Aucun effet
       a la souris. */
    @media (pointer: coarse) {
      .modal-close,
      .btn {
        min-height: 40px;
        min-width: 40px;
      }
      input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    }

  /* ── Paramètres de la review : quatre onglets (21/10) ─────────────────────
     En-tête (titre + onglets) et pied (Annuler / Enregistrer) fixes, seul le
     contenu de l'onglet défile. Au-dessus de la barre d'onglets de l'application
     (wc-onglets, z-index 100400), qui recouvrait le bas de la fenêtre. */
  #m-review { z-index:100420; }
  /* Le raccourci Accueil (z-index maximal) recouvrait « Enregistrer » : masqué tant qu'une fenêtre est ouverte. */
  body:has(.mb.open) #home-shortcut-link { display:none !important; }
  .mr-modal { padding:0; display:flex; flex-direction:column; overflow:hidden; max-height:calc(100vh - 40px); }
  .mr-tete { flex:0 0 auto; padding:22px 24px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  .mr-tete h2 { margin:0 34px 14px 0; }
  .mr-onglets { display:flex; gap:3px; padding:3px; margin-bottom:12px; border-radius:var(--wc-r-m); background:rgba(255,255,255,.055); }
  .mr-onglets button { flex:1; min-width:0; padding:8px 4px; border:0; border-radius:var(--wc-r-s); background:none; color:#8ba0c0;
    font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; touch-action:manipulation; transition:background .15s, color .15s; }
  .mr-onglets button.on { background:rgba(255,255,255,.13); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .mr-tete .err { margin:0 0 10px; }
  .mr-tete .err:empty { display:none; }
  .mr-corps { flex:1 1 auto; overflow-y:auto; padding:18px 24px 10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .mr-pane { display:none; }
  .mr-pane.on { display:block; }
  .mr-pied { flex:0 0 auto; margin:0; padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,.07); background:#0a1628; }
  .mr-sensible { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
  .mr-sensible:not(:has(button:not([style*="display:none"]))) { display:none; }

  /* Statuts et options : une ligne par réglage, interrupteur à droite. */
  .mr-modal .mr-pane .chk { justify-content:space-between; flex-direction:row-reverse; gap:14px; margin:0;
    padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14.5px; color:#e3ebf8; }
  .mr-modal .mr-pane .chk:last-of-type { border-bottom:0; }
  .chk-t { flex:1; min-width:0; line-height:1.35; }
  .chk-t small { display:block; margin-top:3px; font-size:12px; color:#7f93b4; line-height:1.4; }
  .mr-modal .mr-pane .chk input[type="checkbox"] { -webkit-appearance:none; appearance:none; position:relative; flex:0 0 46px;
    width:46px; height:28px; margin:0; border-radius:var(--wc-r-l); background:rgba(255,255,255,.16); cursor:pointer;
    transition:background .2s; touch-action:manipulation; }
  .mr-modal .mr-pane .chk input[type="checkbox"]::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px;
    border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.3,.7,.3,1); }
  .mr-modal .mr-pane .chk input[type="checkbox"]:checked { background:var(--wc-green); }
  .mr-modal .mr-pane .chk input[type="checkbox"]:checked::after { transform:translateX(18px); }
  #m-review .mr-pane[data-p="video"] .chk { border-bottom:0; padding:9px 0; }
  #m-gallery .mr-modal { max-width:540px; }
  #mr-pres-couleurs { margin:12px 0 0 !important; }

  /* Téléphone : la fenêtre monte du bas, sur presque toute la hauteur. */
  @media (max-width: 560px) {
    .mb-onglets { padding:0; align-items:flex-end; }
    .mb-onglets .mr-modal { max-width:none; margin:0; border-radius:var(--wc-r-xl) var(--wc-r-xl) 0 0; border-bottom:0;
      min-height:min(66dvh, calc(100dvh - 28px)); max-height:calc(100dvh - 28px); }
    .mr-tete { padding:18px 16px 0; }
    .mr-corps { padding:16px 16px 10px; }
    .mr-pied { padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
    .mr-pied .btn { flex:1; justify-content:center; min-height:46px; }
    .mb-onglets .fg2 { flex-direction:column; gap:0; }
  }

/* iPhone : un champ date garde sa largeur native et déborde de la fenêtre */
input[type=date].fi { -webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; min-height:42px; text-align:left; }
input[type=date].fi::-webkit-date-and-time-value { text-align:left; }