/* Oneclic Portfolio — interface sombre et sobre */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #161a21;
  --surface: #1d222b;
  --stage: #232933;
  --line: #2e3542;
  --text: #eef0f4;
  --muted: #939baa;
  --link: #6cbce6;
  --primary: #1c78b0;
  --primary-hover: #2388c5;
  --danger: #e5484d;
  --ok: #3fb68b;
  --client: #1e6fd9;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: #9dd3ef; }
h1, h2 { margin: 0; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
p { margin: 0; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 0.85rem; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 40px; padding: 0 1.1em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 0.92rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(229, 72, 77, .45); }
.btn-danger:hover { background: rgba(229, 72, 77, .12); }
.linklike { background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(.8rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4vw, 2.5rem) .8rem;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 26, 33, .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
html { scroll-padding-top: 80px; }
.admin-banner {
  margin: 0; padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: #1f2a36; color: #cfd8e3; font-size: .88rem; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--muted); }
.brand img { display: block; height: 40px; width: auto; }
.brand-sub { padding-left: .8rem; border-left: 1px solid var(--line); font-size: .95rem; }
.topbar-actions { display: flex; gap: .6rem; margin: 0; }
.topbar-actions .btn { white-space: nowrap; }

/* ================= Présentation client ================= */
.pf-view main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

.intro { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); max-width: 60rem; }
.intro-client { color: var(--muted); font-size: 1.05rem; margin-bottom: .75rem; }
.intro h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -0.035em; }
.intro-msg { margin-top: 1.5rem; max-width: 62ch; font-size: 1.12rem; color: #cfd4dc; }
.intro-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; color: var(--muted); font-size: .92rem; align-items: center; }
.status { display: inline-flex; align-items: center; gap: .5em; color: var(--text); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a43b; }
.status-ok::before { background: var(--ok); }

/* Paiement */
.pay { margin-top: 2rem; display: grid; gap: .7rem; justify-items: start; max-width: 36rem; }
.btn-pay { min-height: 52px; padding: 0 1.4rem; font-size: 1rem; gap: .9rem; }
.pay-amount { padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .35); font-variant-numeric: tabular-nums; }
.pay-note { color: var(--muted); font-size: .88rem; }
.pay-note strong { color: var(--text); font-weight: 600; }

/* Déblocage par code de livraison */
.unlock { margin-top: 1.4rem; max-width: 34rem; }
.unlock summary {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer; color: var(--link);
  font-weight: 600; list-style: none;
}
.unlock summary::-webkit-details-marker { display: none; }
.unlock summary::before { content: "+"; display: grid; place-items: center; width: 1.3em; height: 1.3em; border: 1px solid currentColor; border-radius: 50%; font-size: .85em; line-height: 1; }
.unlock[open] summary::before { content: "−"; }
.unlock .code-form { margin-top: .9rem; }
.unlock .form-error { margin-top: .6rem; }

.badge { padding: .1em .65em; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); color: var(--text); }
.badge-draft { color: #e9c07a; border-color: rgba(224, 164, 59, .45); }
.badge-final { color: #7fd6b4; border-color: rgba(63, 182, 139, .45); }

.empty { padding: 4rem 0; color: var(--muted); font-size: 1.1rem; }

.piece { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.piece-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.1rem; }
.piece-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.piece-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: var(--muted); font-size: .9rem; }

.stage {
  position: relative;
  background: var(--stage);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 4vw, 3rem);
}
.stage img { -webkit-user-drag: none; user-select: none; }

/* Filigrane de surimpression (SVG/ICO qui ne passent pas par GD) */
.wm-overlay {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150'%3E%3Ctext x='10' y='90' transform='rotate(-28 130 75)' font-family='sans-serif' font-size='17' font-weight='700' fill='%23ffffff' fill-opacity='.22' stroke='%23000' stroke-opacity='.12' stroke-width='.6'%3EAPER%C3%87U %C2%B7 ONECLIC%3C/text%3E%3C/svg%3E");
}

/* --- Visuel simple --- */
.stage-image { padding: 0; background: transparent; }
.image-frame {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--stage);
  border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in;
}
.image-frame img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }

/* --- Logo --- */
.stage-logo {
  min-height: 420px; display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  transition: background-color .25s;
}
.stage-logo[data-bg="dark"] { background: #101318; }
.stage-logo[data-bg="light"] { background: #f5f6f8; color: #1d222b; }
.stage-logo[data-bg="c1"] { background: var(--c1, var(--client)); }
.stage-logo[data-bg="c2"] { background: var(--c2, var(--client)); }
.stage-logo[data-bg="c3"] { background: var(--c3, var(--client)); }
.swatches { display: inline-flex; flex-wrap: wrap; justify-self: start; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(127, 135, 150, .22); }
.swatches button {
  border: 0; background: transparent; color: inherit; font: 500 .85rem/1 var(--font);
  padding: .55em 1em; border-radius: 999px; cursor: pointer; color: var(--text);
}
.stage-logo[data-bg="light"] .swatches button { color: #1d222b; }
.swatches button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #161a21; }
.stage-logo[data-bg="light"] .swatches button[aria-pressed="true"] { background: #1d222b; color: #fff; }
.logo-main { position: relative; display: grid; place-items: center; cursor: zoom-in; }
.logo-main img { max-height: 190px; max-width: min(78%, 560px); object-fit: contain; }
.logo-sizes { display: flex; align-items: flex-end; gap: 2.2rem; flex-wrap: wrap; opacity: .95; }
.logo-sizes img { width: auto; }

/* --- Favicon --- */
.stage-favicon { display: grid; gap: 1.75rem; }
.mock-tabs {
  display: flex; align-items: flex-end; gap: 2px; padding: 8px 10px 0;
  background: #0f1216; border-radius: 10px 10px 0 0; margin: calc(-1 * clamp(1rem, 4vw, 3rem)) calc(-1 * clamp(1rem, 4vw, 3rem)) 0;
  font-size: .8rem; color: #c3c8d0; overflow: hidden;
}
.tab { display: flex; align-items: center; gap: 8px; width: 220px; max-width: 45%; padding: 9px 12px; border-radius: 9px 9px 0 0; }
.tab span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tab b { font-weight: 400; opacity: .6; }
.tab-active { background: #2a2f37; color: #fff; }
.tab-active img { width: 16px; height: 16px; object-fit: contain; }
.tab-dot { width: 14px; height: 14px; border-radius: 50%; background: #3c424c; }
.tab-plus { padding: 6px 10px 10px; opacity: .6; }
.mock-address {
  display: flex; align-items: center; gap: 10px;
  margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)); padding: 8px clamp(1rem, 4vw, 3rem);
  background: #2a2f37; color: #d3d7de; font-size: .88rem;
}
.mock-address img { width: 14px; height: 14px; object-fit: contain; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; align-items: stretch; }
.fav-sizes { display: flex; align-items: flex-end; justify-content: space-around; gap: .75rem; padding: 1.4rem 1rem 1rem; border-radius: 10px; }
.fav-sizes figure { margin: 0; display: grid; justify-items: center; gap: .6rem; }
.fav-sizes img { object-fit: contain; image-rendering: auto; }
.fav-sizes figcaption { font-size: .75rem; opacity: .7; white-space: nowrap; }
.fav-dark { background: #101318; color: var(--muted); }
.fav-light { background: #f5f6f8; color: #555c68; }
.homescreen {
  display: grid; align-content: center; justify-items: center; gap: .5rem; padding: 1rem .8rem; min-width: 0; overflow: hidden;
  border-radius: 10px; background: linear-gradient(155deg, var(--client), #0d1015 85%);
}
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6%; width: 100%; max-width: 250px; }
.app { position: relative; width: 100%; aspect-ratio: 1; border-radius: 24%; overflow: hidden; }
.app.ghost { background: rgba(255, 255, 255, .16); }
.app.real { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.app.real img { width: 100%; height: 100%; object-fit: cover; }
.app-label { grid-column: 3; justify-self: center; margin-top: -4px; font-size: .72rem; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fav-big {
  position: relative; display: grid; place-items: center; padding: 1rem; border: 1px solid var(--line);
  border-radius: 10px; background: transparent; cursor: zoom-in;
}
.fav-big img { width: 150px; height: 150px; object-fit: contain; }

/* --- Planche de déclinaisons du logo --- */
.stage-planche { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.planche-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.planche-label { display: grid; gap: .5rem; justify-items: start; padding-top: .2rem; font-size: .9rem; }
.planche-label p { font-weight: 600; font-size: 1rem; }
.planche-label a { font-size: .85rem; }
.planche-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .planche-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lcard { margin: 0; display: grid; gap: .45rem; }
.lcard-bg {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10;
  padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.lcard-photo { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(5px) saturate(.9); }
.lcard-logo { position: relative; max-width: 64%; max-height: 52%; object-fit: contain; }
.lcard figcaption { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lcard figcaption strong { color: #ff8d90; font-weight: 600; margin-left: .3em; }
.lcard.is-avoid .lcard-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), #e5484d calc(50% - 1.5px), #e5484d calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

/* --- Site web (ordinateur) --- */
.stage-web { display: grid; gap: 1rem; }
.browser { border-radius: 10px; overflow: hidden; background: #0f1216; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); }
.browser-tabs { display: flex; align-items: flex-end; gap: 7px; padding: 8px 12px 0; background: #0f1216; font-size: .8rem; color: #c3c8d0; }
.browser-tabs > i { align-self: center; width: 11px; height: 11px; border-radius: 50%; background: #3a404a; margin-bottom: 8px; }
.browser-tabs .tab { margin-left: 10px; }
.browser-tabs .tab img { width: 16px; height: 16px; object-fit: contain; }
.browser-bar { display: flex; align-items: center; padding: 7px 14px; background: #2a2f37; }
.browser-bar span {
  display: flex; align-items: center; gap: 8px; flex: 1; padding: 5px 12px; border-radius: 999px;
  background: #1b1f25; color: #d3d7de; font-size: .82rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.browser-bar img { width: 14px; height: 14px; object-fit: contain; flex: none; }
.browser-view { position: relative; max-height: min(74vh, 780px); overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.browser-view img { display: block; width: 100%; height: auto; }
.stage-zoom { justify-self: end; }

/* --- Site web (mobile) --- */
.stage-mobile { display: grid; place-items: center; padding-block: clamp(1.5rem, 5vw, 3.5rem); }
.phone {
  position: relative; width: min(320px, 86vw); height: 640px; padding: 11px;
  border-radius: 46px; background: #07090c; box-shadow: 0 0 0 2px #333a45, 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.phone-notch { position: absolute; top: 20px; left: 50%; z-index: 2; width: 92px; height: 26px; border-radius: 20px; background: #07090c; transform: translateX(-50%); }
.phone-view { position: relative; height: 100%; border-radius: 36px; overflow-y: auto; overscroll-behavior: contain; background: #fff; scrollbar-width: none; }
.phone-view::-webkit-scrollbar { display: none; }
.phone-view img { display: block; width: 100%; height: auto; }

/* --- Pièces jointes --- */
.attachments { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.attachments h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.attachments ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.attachments li { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.att-ext { flex: none; display: grid; place-items: center; width: 52px; height: 40px; border-radius: 6px; background: var(--stage); font-size: .75rem; font-weight: 700; color: var(--muted); }
.att-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.att-name small { display: block; color: var(--muted); }
.att-lock { color: var(--muted); font-size: .88rem; }

.foot { max-width: 1180px; margin: 3rem auto 0; padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem; border-top: 1px solid var(--line); color: #c3c8d0; font-size: .92rem; display: grid; gap: .4rem; }

/* --- Visionneuse ---
   Positionnement fixe et tailles en unités d'écran : pas de grille ni de pourcentage,
   qui posent problème à Safari/WebKit. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(10, 12, 16, .97); color: #fff;
}
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: block; }
.lightbox::backdrop { background: rgba(10, 12, 16, .6); }
.lb-stage {
  position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  padding: 3.5rem 72px;
}
.lb-stage img {
  display: block; margin: auto; width: auto; height: auto;
  max-width: calc(100vw - 144px); max-height: calc(100vh - 7rem);
}
.lb-stage.is-tall { align-items: flex-start; }
.lb-stage.is-tall img { max-height: none; }
.lb-msg { color: var(--muted); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 2;
  background: none; border: 0; color: #fff; font: 300 2.4rem/1 var(--font); cursor: pointer; padding: .5rem .8rem; opacity: .75;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: calc(10px + env(safe-area-inset-top, 0px)); right: 14px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
html.lb-open { overflow: hidden; }

/* ================= Pages messages / connexion ================= */
.pf-msg { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.msg-card { width: min(440px, 100%); display: grid; gap: 1rem; }
.msg-logo { height: auto; margin-bottom: 1.5rem; }
.msg-card h1 { font-size: 1.9rem; }
.code-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.code-form.stack { flex-direction: column; }
.code-form.stack input { flex: none; } /* en colonne, la base flexible de 200 px devenait une hauteur */
.code-form input { flex: 1 1 200px; }
.form-error { color: #ff8d90; }

/* ================= Formulaires ================= */
input[type="text"], input[type="url"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; min-height: 42px; padding: .55rem .8rem;
  background: #12151b; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 400 .95rem/1.4 var(--font);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(108, 188, 230, .2); }
input[type="color"] { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #12151b; }

/* ================= Administration ================= */
.admin { max-width: 1280px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 5rem; }
.crumb { font-size: .9rem; margin-bottom: 1rem; }
.admin-head { display: grid; gap: 1.2rem; margin-bottom: 2rem; }
.admin-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.inline-create { display: flex; flex-wrap: wrap; gap: .6rem; }
.inline-create input { flex: 1 1 220px; width: auto; }
.share { display: flex; flex-wrap: wrap; gap: .6rem; }
.share input { flex: 1 1 320px; width: auto; font-size: .9rem; color: #cfd4dc; }
.code-show { font-size: 1.1rem; letter-spacing: .08em; }

.flash { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; background: rgba(63, 182, 139, .12); border: 1px solid rgba(63, 182, 139, .35); }
.flash-err { background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .4); }

.projects { width: 100%; border-collapse: collapse; font-size: .95rem; }
.projects th { text-align: left; font-weight: 500; color: var(--muted); padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.projects td { padding: .9rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.projects .row-actions .btn { margin-top: -.35rem; }
.projects small { display: block; color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.proj-title { color: var(--text); font-weight: 600; text-decoration: none; }
.proj-title:hover { color: var(--link); }
.row-actions { text-align: right; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { font-size: .75rem; padding: .2em .6em; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag-ok { color: var(--ok); border-color: rgba(63, 182, 139, .4); }
.tag-off { color: var(--danger); border-color: rgba(229, 72, 77, .4); }

.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; }
.panel h2 { font-size: 1.15rem; margin-bottom: 1rem; }

.dropzone { border: 1.5px dashed #3c4454; border-radius: 12px; padding: 1.6rem; text-align: center; transition: border-color .15s, background-color .15s; }
.dropzone.is-over { border-color: var(--link); background: rgba(108, 188, 230, .06); }
.dropzone .muted { font-size: .85rem; margin-top: .3rem; }
.upload-list { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; font-size: .88rem; display: grid; gap: .4rem; }
.upload-list li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; }
.upload-list progress { grid-column: 1 / -1; width: 100%; height: 4px; appearance: none; border: 0; background: var(--line); border-radius: 2px; }
.upload-list progress::-webkit-progress-bar { background: var(--line); }
.upload-list progress::-webkit-progress-value { background: var(--link); }
.upload-list progress::-moz-progress-bar { background: var(--link); }
.upload-list .err { color: #ff8d90; }
.upload-list .done { color: var(--ok); }

.file-list { margin-top: 1.4rem; }
.file-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--line); }
.file-thumb { width: 84px; height: 64px; border-radius: 8px; background: #12151b; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: .75rem; font-weight: 700; }
.file-thumb img { width: 100%; height: 100%; object-fit: contain; }
.file-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-size: .9rem; margin-bottom: .45rem; }
.rename { display: inline-flex; align-items: baseline; max-width: 100%; }
.rename input {
  width: auto; min-width: 8ch; max-width: 34ch; min-height: 0; padding: .15rem .35rem; margin-left: -.35rem;
  background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: .9rem; color: var(--text);
  field-sizing: content;
}
.rename input:hover { border-color: var(--line); }
.rename input:focus { background: #12151b; border-color: var(--link); }
.rename-ext { color: var(--muted); }
.grid-opts { display: grid; gap: .7rem; margin-top: .7rem; padding: .8rem; border-radius: var(--radius-sm); background: #171b22; border: 1px solid var(--line); }
.grid-opts[hidden] { display: none; }
.grid-opts label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 500; }
.bg-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bg-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 3px 4px 3px 3px; border: 1px solid var(--line); border-radius: 8px; background: #12151b; font-size: .78rem; }
.bg-chip.is-avoid { border-color: rgba(229, 72, 77, .6); }
.bg-chip input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.bg-chip .chip-tag { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .4rem; border-radius: 5px; background: var(--line); color: var(--text); }
.bg-chip button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-size: .85rem; }
.bg-chip button:hover { color: var(--text); background: var(--line); }
.bg-chip button[aria-pressed="true"] { color: #fff; background: var(--danger); }
.bg-add { display: flex; flex-wrap: wrap; gap: .3rem; }
.bg-add button { min-height: 30px; padding: 0 .6rem; font-size: .78rem; }
.file-name small { color: var(--muted); }
.file-inputs { display: flex; flex-wrap: wrap; gap: .5rem; }
.file-inputs select { width: auto; min-width: 190px; }
.file-inputs .grow { flex: 1 1 200px; }
.file-actions { display: flex; gap: .3rem; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; }
.icon-btn:hover:not(:disabled) { border-color: var(--muted); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-danger { color: var(--danger); }
.form-foot { padding-top: 1rem; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }

.settings { display: grid; gap: 1rem; }
.settings label { display: block; font-size: .9rem; font-weight: 500; }
.settings label > input:not([type="checkbox"]), .settings label > textarea, .settings label > .with-btn { display: block; margin-top: .35rem; }
.settings label > .with-btn { display: flex; }
.settings label.color { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.settings label.color input { margin: 0 0 0 auto; order: 3; }
.settings label.check { display: flex; align-items: center; gap: .6rem; font-weight: 400; }
.settings fieldset { border: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; margin: 0; display: grid; gap: .9rem; }
.settings legend { padding: 0 .5rem 0 0; font-weight: 650; }
.with-btn { display: flex; gap: .4rem; }
.site-icon { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .7rem; border-radius: var(--radius-sm); background: #12151b; border: 1px solid var(--line); }
.site-icon img, .site-icon-empty { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: #fff; }
.site-icon-empty { background: var(--line); }
.site-icon img, .site-icon-empty { flex: none; }
.site-icon p { flex: 1 1 60%; font-size: .85rem; min-width: 0; }
.site-icon .btn { margin-left: 40px; }
.site-icon small { display: block; color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-icon .btn { min-height: 34px; padding: 0 .7em; font-size: .8rem; }
.status-select { width: auto; min-width: 120px; }
.status-select.is-final { border-color: rgba(63, 182, 139, .55); color: #7fd6b4; }
.form-foot { gap: .5rem; flex-wrap: wrap; }
.danger { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.danger label { display: block; font-size: .9rem; }
.danger label input { display: block; margin-top: .35rem; }
.danger code { color: var(--text); }

@media (max-width: 960px) {
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand img { height: 32px; }
  .pf-view .topbar-actions .btn-ghost { display: none; } /* sur mobile, seule l'action principale reste dans la barre */
  .file-row { grid-template-columns: 64px minmax(0, 1fr); }
  .file-thumb { width: 64px; height: 52px; }
  .file-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .projects thead { display: none; }
  /* Sur mobile : une carte par présentation (titre + bouton, visuels et vues libellés, états) */
  .projects tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "title title action" "vis views views" "tags tags tags"; column-gap: 1rem; border-bottom: 1px solid var(--line); padding: .8rem 0; }
  .projects td { border: 0; padding: .15rem 0; }
  .projects td:nth-child(1) { grid-area: title; }
  .projects td:nth-child(2) { grid-area: vis; font-size: .85rem; color: var(--muted); }
  .projects td:nth-child(3) { grid-area: views; font-size: .85rem; color: var(--muted); }
  .projects td:nth-child(2)::before { content: "Visuels : "; }
  .projects td:nth-child(3)::before { content: "Vues : "; }
  .projects td:nth-child(3) small { display: inline; margin-left: .3rem; }
  .projects td:nth-child(3) small::before { content: "· "; }
  .projects td:nth-child(4) { grid-area: tags; }
  .projects td:nth-child(4):empty, .projects td:nth-child(4) .tags:empty { display: none; }
  .projects td.row-actions { grid-area: action; align-self: start; }
  .projects .row-actions .btn { margin-top: 0; }
  .lb-stage { padding: 3rem 40px; }
  .lb-stage img { max-width: calc(100vw - 80px); }
  .phone { height: 560px; }
  .planche-row { grid-template-columns: 1fr; gap: .7rem; }
  .planche-label { grid-auto-flow: column; justify-content: start; align-items: center; }
  .planche-cards { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.err-log { margin-top: .8rem; padding: 1rem; background: #0f1216; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; white-space: pre-wrap; word-break: break-word; color: #ffb3b5; }

/* ================= Retours du client ================= */
.decision {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.5rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: #1b2029; border-bottom: 1px solid var(--line);
  position: sticky; top: var(--topbar-h, 66px); z-index: 19;
}
.decision-state { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .92rem; }
.decision-state span:not(.dot) { color: var(--muted); }
.decision-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.decision .btn { min-height: 38px; }
.btn-approve { background: var(--ok); color: #06231a; }
.btn-approve:hover { background: #52c99d; color: #06231a; }
.btn-decline { color: #ff9b9e; border-color: rgba(229, 72, 77, .45); }
.btn-decline:hover { border-color: var(--danger); color: #ffb3b5; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #ee5d62; color: #fff; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-wait { background: #e0a43b; }
.dot-no { background: var(--danger); }

/* Fenêtres modales (même robustesse que la visionneuse : positionnement fixe) */
.modal {
  position: fixed; inset: 0; z-index: 1100; margin: auto;
  width: min(560px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); height: fit-content;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); overflow: auto;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.modal-wide { width: min(720px, calc(100vw - 1.5rem)); }
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(8, 10, 14, .72); }
.modal-backdrop-fallback { position: fixed; inset: 0; z-index: 1099; background: rgba(8, 10, 14, .72); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .4rem; }
.modal-head h2 { font-size: 1.25rem; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; border-radius: 6px; }
.modal-x:hover { color: var(--text); background: var(--line); }
.modal-body { display: grid; gap: 1rem; padding: .6rem 1.3rem 1.3rem; }
.modal-body > p { color: #cfd4dc; }
.modal .field { display: block; font-size: .9rem; font-weight: 500; border: 0; padding: 0; margin: 0; min-width: 0; }
.modal .field > input, .modal .field > .editor-wrap, .modal .field > .fb-drop, .modal .field > .choice-grid, .modal .field > .choice-list { display: block; margin-top: .4rem; }
.modal .field > .choice-grid { display: flex; }
.modal .field > .choice-list { display: grid; }
.modal legend { padding: 0; margin-bottom: .4rem; font-weight: 500; }
.modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.privacy { font-size: .78rem; color: var(--muted); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal .form-error:not([hidden]) { padding: .6rem .8rem; border-radius: var(--radius-sm); background: rgba(229, 72, 77, .1); border: 1px solid rgba(229, 72, 77, .4); }
.modal-done { display: grid; justify-items: center; gap: .8rem; padding: 2.5rem 1.5rem; text-align: center; }
.modal-done .big { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(63, 182, 139, .15); color: var(--ok); font-size: 1.6rem; }
html.modal-open { overflow: hidden; }

/* Éditeur de texte mis en forme */
.editor-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12151b; font-weight: 400; }
.editor-wrap:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px rgba(108, 188, 230, .2); }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); }
.editor-toolbar button { min-width: 32px; height: 30px; padding: 0 .45rem; border: 0; border-radius: 5px; background: transparent; color: #cfd4dc; font: 500 .85rem/1 var(--font); cursor: pointer; }
.editor-toolbar button:hover { background: var(--line); color: #fff; }
.editor-toolbar button.is-on { background: #2b3b4b; color: #fff; }
.editor-toolbar .sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.editor { padding: .7rem .8rem; outline: none; font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.editor:empty::before, .editor.is-empty::before { content: attr(data-placeholder); color: #6b7383; pointer-events: none; }
.editor ul, .editor ol, .fb-text ul, .fb-text ol { margin: .3rem 0; padding-left: 1.4rem; }
.editor p, .fb-text p { margin: 0 0 .4rem; }
.editor a, .fb-text a { color: var(--link); }

/* Choix (visuels, raisons) */
.choice-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice-list { display: grid; gap: .35rem; }
.choice { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; font-size: .9rem; }
.choice:hover { border-color: #4a5364; }
.choice input { width: 17px; height: 17px; accent-color: var(--primary); flex: none; margin: 0; }
.choice:has(input:checked) { border-color: var(--link); background: rgba(108, 188, 230, .08); }
.other-input { margin-top: .2rem; }

/* Pièces jointes du formulaire */
.fb-drop { padding: .9rem; border: 1.5px dashed #3c4454; border-radius: var(--radius-sm); font-weight: 400; font-size: .88rem; color: #cfd4dc; }
.fb-drop.is-over { border-color: var(--link); background: rgba(108, 188, 230, .06); }
.fb-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fb-files:not(:empty) { margin-top: .7rem; }
.fb-files li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .6rem; font-size: .85rem; }
.fb-files .thumb { width: 44px; height: 34px; border-radius: 5px; object-fit: cover; background: var(--line); display: grid; place-items: center; font-size: .65rem; font-weight: 700; color: var(--muted); }
.fb-files .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-files .name small { color: var(--muted); margin-left: .4rem; }
.fb-files .err { color: #ff8d90; }
.fb-files button { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem; border-radius: 5px; }
.fb-files button:hover { color: var(--text); background: var(--line); }

/* Historique des retours */
.feedback-history { display: grid; gap: .9rem; margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); max-width: 60rem; scroll-margin-top: calc(var(--topbar-h, 66px) + 70px); }
.feedback-history h2 { font-size: 1.05rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.feedback-history > .fb-entry { padding: 1.2rem 1.3rem; font-size: 1rem; }
.feedback-history > .fb-entry .fb-type { font-size: 1.1rem; }
.feedback-history > .fb-no { background: linear-gradient(90deg, rgba(229, 72, 77, .10), rgba(229, 72, 77, .03) 60%), #1a1f27; }
.feedback-history > .fb-wait { background: linear-gradient(90deg, rgba(224, 164, 59, .10), rgba(224, 164, 59, .03) 60%), #1a1f27; }
.feedback-history > .fb-ok { background: linear-gradient(90deg, rgba(63, 182, 139, .10), rgba(63, 182, 139, .03) 60%), #1a1f27; }
.fb-older summary { cursor: pointer; color: var(--link); font-size: .92rem; font-weight: 600; }
.fb-older[open] summary { margin-bottom: .8rem; }
.decision-link { font-size: .88rem; margin-right: auto; }
.decision-state + .decision-link { margin-left: -.6rem; }
.fb-list { display: grid; gap: .8rem; }
.fb-entry { display: grid; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); background: #1a1f27; }
.fb-ok { border-left-color: var(--ok); }
.fb-wait { border-left-color: #e0a43b; }
.fb-no { border-left-color: var(--danger); }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
.fb-type { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.fb-who { color: var(--muted); font-size: .88rem; }
.fb-del { margin: 0 0 0 auto; }
.fb-reasons { margin: 0; padding-left: 1.2rem; font-size: .92rem; color: #cfd4dc; }
.fb-visuals { font-size: .88rem; color: var(--muted); }
.fb-text { font-size: .95rem; color: #dfe3ea; max-width: 70ch; }
.fb-attach { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font-size: .85rem; }
.fb-attach li { display: flex; align-items: center; gap: .5rem; }
.fb-attach small { color: var(--muted); }
.fb-thumb img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.feedback-panel { margin-bottom: 1.5rem; }
.feedback-panel .count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .3rem; padding: 0 .4em; border-radius: 999px; background: var(--line); font-size: .8rem; vertical-align: middle; }
.tag-fb-approve { color: var(--ok); border-color: rgba(63, 182, 139, .4); }
.tag-fb-changes { color: #e9c07a; border-color: rgba(224, 164, 59, .45); }
.tag-fb-decline { color: var(--danger); border-color: rgba(229, 72, 77, .4); }

@media (max-width: 760px) {
  .decision { position: static; }
  .decision-state { font-size: .88rem; }
  .decision-state + .decision-link { margin-left: 0; margin-top: -.3rem; }
  .decision-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .decision-actions .btn-approve { grid-column: 1 / -1; }
  .decision .btn { font-size: .85rem; padding: 0 .6rem; }
  .modal { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .modal-body, .modal-head { padding-left: 1rem; padding-right: 1rem; }
}

/* Engagements à l'approbation */
.consents { display: grid; gap: .45rem; }
.consent { align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.consent input { margin-top: .15rem; accent-color: var(--ok); }
.consent:has(input:checked) { border-color: rgba(63, 182, 139, .6); background: rgba(63, 182, 139, .08); }
.consent.is-missing { border-color: var(--danger); }
.fb-consents { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; color: #cfe9de; }
.fb-consents li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.fb-snapshot { font-size: .82rem; color: var(--muted); }
.fb-snapshot summary { cursor: pointer; }
.fb-snapshot ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.consent-preview { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: #cfd4dc; display: grid; gap: .2rem; }
.modal-done .done-pay { display: grid; gap: .4rem; justify-items: center; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; }
.modal-done .done-pay .btn { min-height: 48px; font-size: 1rem; }
.modal-done .done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* ================= Accordéon « statut actuel + historique » =================
   Sobre : une boîte neutre, la couleur du statut portée uniquement par la pastille ;
   l'historique est une simple liste à plat, séparée par des filets. */
.timeline {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); max-width: 60rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #1a1f27; scroll-margin-top: calc(var(--topbar-h, 66px) + 70px);
}
.timeline > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; cursor: pointer; list-style: none; border-radius: var(--radius-lg);
}
.timeline > summary::-webkit-details-marker { display: none; }
.timeline > summary:hover .tl-toggle { color: var(--text); }
.tl-status { display: grid; gap: .2rem; min-width: 0; }
.tl-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.tl-label { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; font-weight: 650; }
.tl-meta { color: #b9c0cc; font-size: .9rem; overflow-wrap: anywhere; }
.tl-toggle { display: inline-flex; align-items: center; gap: .5rem; flex: none; color: var(--link); font-size: .88rem; font-weight: 600; }
.tl-chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.timeline[open] .tl-chev { transform: rotate(-135deg) translateY(-2px); }
.tl-close, .timeline[open] .tl-open { display: none; }
.timeline[open] .tl-close { display: inline; }

.tl-list { list-style: none; margin: 0; padding: 0 1.2rem .4rem; border-top: 1px solid var(--line); }
.tl-item + .tl-item { border-top: 1px solid rgba(46, 53, 66, .6); }
/* Dans l'historique, les éléments ne sont plus des cartes : juste une ligne titre + détails */
.tl-item .fb-entry { border: 0; border-radius: 0; background: none; padding: .85rem 0; gap: .4rem; }
.tl-item .fb-head { gap: .2rem .8rem; }
.tl-item .fb-type { font-size: .95rem; }
.tl-item .fb-who { font-size: .82rem; }
.tl-item .fb-head ~ * { margin-left: 1.05rem; } /* détails alignés sous le titre, après la pastille */
.tl-item .fb-del { margin-left: auto; }
.tl-item .icon-btn { width: 30px; height: 30px; }
.dot-new, .dot-ev { background: var(--link); }
.ev-delivered .dot-ev { background: var(--ok); }
.ev-created .dot-ev { background: #5a6475; }
.note-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem .6rem; align-items: end; margin-bottom: 1.2rem; }
.note-form label { grid-column: 1 / -1; font-size: .9rem; font-weight: 500; }
.feedback-panel .timeline { max-width: none; margin-bottom: 0; }
@media (max-width: 640px) {
  .timeline > summary { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem 1rem; }
  .tl-list { padding: 0 1rem .3rem; }
  .note-form { grid-template-columns: 1fr; }
}
.tl-item .fb-reasons { list-style: none; padding-left: 0; display: grid; gap: .15rem; }
.tl-item .fb-reasons li::before { content: "– "; color: var(--muted); }
@media (max-width: 640px) {
  .tl-item .fb-head ~ * { margin-left: 0; } /* sur mobile, le nom passe à la ligne : tout s'aligne à gauche */
}

/* E-mails au client (admin) */
.note-notify { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #cfd4dc; }
.mail-box { margin: 0 0 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #171b22; }
.mail-box > summary { padding: .75rem 1rem; cursor: pointer; font-weight: 600; font-size: .92rem; }
.mail-box[open] > summary { border-bottom: 1px solid var(--line); }
.mail-box .flash { margin: .8rem 1rem 0; }
.mail-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; padding: 1rem; }
.mail-form label { display: block; font-size: .88rem; font-weight: 500; }
.mail-form label > input, .mail-form label > select, .mail-form label > textarea { display: block; margin-top: .35rem; }
.mail-form .wide { grid-column: 1 / -1; }
.mail-foot { display: flex; justify-content: flex-end; }
.ev-mail .dot-ev { background: #9aa3b2; }
@media (max-width: 640px) { .mail-form { grid-template-columns: 1fr; } }

/* Logo : versions blanche / noire obtenues par filtre (la transparence est conservée) */
.stage-logo img.is-white { filter: brightness(0) invert(1); }
.stage-logo img.is-black { filter: brightness(0); }
.stage-logo .sw-dot { display: inline-block; width: .7em; height: .7em; margin-right: .45em; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); vertical-align: -.05em; }
.stage-logo { position: relative; }
.logo-variant { position: absolute; right: 1rem; bottom: .8rem; margin: 0; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; background: rgba(0, 0, 0, .35); color: #fff; }
.stage-logo[data-bg="light"] .logo-variant { background: rgba(0, 0, 0, .08); color: #1d222b; }
/* Admin : options de présentation d'un logo */
.logo-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: .7rem; padding: .8rem; border-radius: var(--radius-sm); background: #171b22; border: 1px solid var(--line); }
.logo-opts[hidden], .logo-manual[hidden] { display: none; }
.logo-opts label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 500; }
.logo-opts .check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.logo-opts .color-row { display: flex; align-items: center; gap: .6rem; }
.logo-manual { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.logo-opts .grid-photo { grid-column: 1 / -1; }
.logo-opts .hint.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .logo-manual { grid-template-columns: 1fr; } }

/* Fond « Couleur » clair (ex. jaune) : libellés et pastilles en sombre */
.stage-logo.bg-is-light { color: #1d222b; }
.stage-logo.bg-is-light .swatches { background: rgba(0, 0, 0, .08); }
.stage-logo.bg-is-light .swatches button { color: #1d222b; }
.stage-logo.bg-is-light .swatches button[aria-pressed="true"] { background: #1d222b; color: #fff; }
.stage-logo.bg-is-light .logo-variant { background: rgba(0, 0, 0, .1); color: #1d222b; }
.stage-logo.bg-is-light .sw-dot { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }

/* Couleurs du client / palette d'un logo (admin) */
.palette-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; font-size: .82rem; grid-column: 1 / -1; }
.palette-row[hidden] { display: none; }
.pal-label { color: var(--muted); }
.pal-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem .2rem .25rem; border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.pal-chip i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.pal-btn { min-height: 30px; padding: 0 .7rem; font-size: .8rem; }
.pal-pick { display: inline-flex; align-items: center; gap: .35rem; }
.pal-pick input[type="color"]:disabled { opacity: .3; }
.client-colors { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: .9rem; font-weight: 500; }
.client-colors .cc-title { flex-basis: 100%; }

/* Visionneuse : fond conservé (couleur ou photo floutée) */
.lb-bg { position: absolute; inset: 0; z-index: 0; background: var(--lb-bg, transparent); }
.lb-bg.is-photo { inset: -30px; background-size: cover; background-position: center; }
.lb-bg.blur-light { filter: blur(8px) saturate(.9); }
.lb-bg.blur-strong { filter: blur(22px) saturate(.85); }
.lightbox.has-context .lb-stage { z-index: 1; }
.lightbox.has-context .lb-close, .lightbox.has-context .lb-prev, .lightbox.has-context .lb-next { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.lightbox .lb-stage img.is-white { filter: brightness(0) invert(1); }
.lightbox .lb-stage img.is-black { filter: brightness(0); }
/* Planche : niveaux de flou de la photo */
.lcard-photo.blur-none { filter: none; }
.lcard-photo.blur-light { filter: blur(5px) saturate(.9); }
.lcard-photo.blur-strong { filter: blur(14px) saturate(.85); }

/* Mises en situation (page client) */
.mockups { display: grid; grid-template-columns: repeat(var(--mk-cols, 3), minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.mk { margin: 0; display: grid; gap: .45rem; }
.mk-view { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--stage); cursor: zoom-in; }
.mk.is-ready .mk-view { aspect-ratio: auto; }
.mk-img { display: block; width: 100%; height: auto; }
.mk-wait { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%) var(--stage); background-size: 200% 100%; animation: mk-shimmer 1.4s linear infinite; }
.mk.is-ready .mk-wait { display: none; }
.mk.is-error .mk-wait { animation: none; }
.mk figcaption { font-size: .85rem; color: var(--muted); }
@keyframes mk-shimmer { to { background-position: -200% 0; } }
@media (max-width: 760px) { .mockups { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .mk-wait { animation: none; } }

/* Bibliothèque et éditeur de mises en situation (admin) */
.mk-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.mk-card { display: grid; gap: .3rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.mk-card:hover { border-color: var(--muted); color: var(--text); }
.mk-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #12151b; }
.mk-card small { color: var(--muted); }
.mk-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.mk-wrap { position: relative; border-radius: var(--radius-sm); overflow: visible; background: #12151b; touch-action: none; }
.mk-preview { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.mk-quad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mk-quad polygon { fill: none; stroke: #6cbce6; stroke-width: .3; stroke-dasharray: 1 .8; vector-effect: non-scaling-stroke; }
.mk-handle { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #fff; background: var(--primary); color: #fff; font: 700 .7rem/1 var(--font); cursor: grab; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); padding: 0; touch-action: none; }
.mk-handle:active { cursor: grabbing; }
.mk-form label output { float: right; color: var(--muted); font-weight: 400; }
.mk-form input[type="range"] { width: 100%; accent-color: var(--primary); }
.mk-choose { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mk-pick { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem .25rem .25rem; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; cursor: pointer; }
.mk-pick img { width: 42px; height: 32px; object-fit: cover; border-radius: 4px; }
.mk-pick:has(input:checked) { border-color: var(--link); background: rgba(108, 188, 230, .08); }
.mk-pick:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.grid-photo { display: grid; grid-template-columns: 1fr 140px; gap: .6rem; }
.grid-photo .hint { grid-column: 1 / -1; }
@media (max-width: 960px) { .mk-editor-grid { grid-template-columns: 1fr; } }

/* Logo sur photo (avec ou sans flou) */
.stage-logo[data-bg="photo"] { background: #111; }
.logo-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; display: none; }
.stage-logo[data-bg="photo"] .logo-photo { display: block; }
.logo-photo img { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; }
.logo-photo img.blur-none { inset: 0; width: 100%; height: 100%; }
.logo-photo img.blur-light { filter: blur(6px) saturate(.9); }
.logo-photo img.blur-strong { filter: blur(18px) saturate(.85); }
.stage-logo > :not(.logo-photo) { position: relative; z-index: 1; }
.stage-logo > .logo-variant { position: absolute; }
.stage-logo .sw-photo { background: linear-gradient(135deg, #7aa6c9, #3d5f45 60%, #c9a86a); }

/* ================= Tableau de bord du projet ================= */
.dash-head { gap: 1rem; }
.dash-title h1 { margin-bottom: .2rem; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .7rem; margin-bottom: 1.5rem; }
@media (max-width: 1240px) { .dash-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-card.is-new { border-color: rgba(63, 182, 139, .55); }
@media (max-width: 640px) { .btn-upload { display: none; } }
.dash-card { display: grid; gap: .25rem; align-content: start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s; }
.dash-card:hover { border-color: var(--link); color: var(--text); }
.dash-card.is-off .dc-v { color: var(--muted); }
.dc-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.dc-v { display: flex; align-items: center; gap: .45rem; font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.dc-d { font-size: .8rem; color: #b9c0cc; }
.dash-tabs { display: flex; gap: .3rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--line); position: sticky; top: var(--topbar-h, 66px); z-index: 5; background: var(--bg); padding-top: .3rem; }
.dash-tabs button { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: 600 .95rem/1 var(--font); cursor: pointer; }
.dash-tabs button:hover { color: var(--text); }
.dash-tabs button.is-active { color: var(--text); border-bottom-color: var(--link); }
.dash-tabs .count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--line); font-size: .75rem; color: var(--text); }
.tab-panel[hidden] { display: none; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.set-card { margin: 0; display: grid; gap: .9rem; min-width: 0; scroll-margin-top: 140px; }
.set-card .set-title { margin: 0 0 .1rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.set-card label { display: block; font-size: .9rem; font-weight: 500; }
.set-card label > input:not([type="checkbox"]):not([type="color"]), .set-card label > textarea, .set-card label > select, .set-card label > .with-btn { display: block; margin-top: .35rem; }
.set-card label > .with-btn { display: flex; }
.set-card label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; }
.set-card .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.wm-choice { display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.wm-choice .cc-title { font-weight: 500; font-size: .9rem; }
.wm-state { font-size: .85rem; padding: .45rem .7rem; border-radius: var(--radius-sm); background: rgba(108, 188, 230, .08); color: #cfe3f1; }
.wm-state.is-none { background: rgba(224, 164, 59, .1); color: #e9c07a; }
.settings-bar { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(29, 34, 43, .95); backdrop-filter: blur(8px); }
.danger-zone { margin-top: 1rem; }
.danger-zone > summary { cursor: pointer; color: #ff9b9e; font-weight: 600; font-size: .92rem; }
.danger-zone[open] > summary { margin-bottom: .8rem; }
.danger-zone .danger { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.danger-zone .danger label { flex: 1 1 260px; }
.pf-admin .tab-panel > .panel + .panel, .pf-admin .tab-panel > .panel + details { margin-top: 1rem; }
@media (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr; }
  .set-card .two-cols { grid-template-columns: 1fr; }
  .dash-cards { grid-template-columns: 1fr 1fr; }
  .dash-tabs { overflow-x: auto; }
}

/* Annuaire des clients */
.admin-links a { font-weight: 500; }
input[type="search"] { width: 100%; min-height: 42px; padding: .55rem .8rem; background: #12151b; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 .95rem/1.4 var(--font); }
.cbe-results { margin-bottom: 1.2rem; }
.cbe-results h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.cbe-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.cbe-row strong { margin-right: .5rem; }
.cbe-row small { display: block; color: var(--muted); margin-top: .2rem; }
.cbe-row form { margin: 0; }
.clients-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.clients-grid h2 .count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--line); font-size: .8rem; vertical-align: middle; }
.client-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
.client-list a { display: grid; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.client-list a:hover, .client-list .is-sel a { background: #252b36; }
.client-list small { color: var(--muted); font-size: .8rem; }
.manual-client input { flex: 1 1 100%; }
.client-dl { display: grid; grid-template-columns: 150px 1fr; gap: .45rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.client-dl dt { color: var(--muted); }
.client-dl dd { margin: 0; overflow-wrap: anywhere; }
.nace { display: block; font-size: .85rem; color: #cfd4dc; }
.nace.is-main { color: var(--text); font-weight: 600; }
.client-edit { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.client-card { display: grid; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12151b; font-size: .85rem; color: #cfd4dc; }
.client-card strong { color: var(--text); }
@media (max-width: 900px) { .clients-grid { grid-template-columns: 1fr; } .client-dl { grid-template-columns: 1fr; } .cbe-row { flex-wrap: wrap; } }

/* Recherche BCE : nom + code postal, ou numéro / lien Public Search */
.cbe-search { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.cbe-form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cbe-form label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 500; flex: 1 1 200px; }
.cbe-form label:has([name=zip]) { flex: 0 0 120px; }
.kbo-help { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.kbo-help .btn { min-height: 34px; font-size: .85rem; }
@media (max-width: 900px) { .cbe-search { grid-template-columns: 1fr; } }

/* Connexion (e-mail + mot de passe) */
.auth-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; }
.auth-form { gap: .9rem; }

/* Équipe et personnes du client */
.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2b3b4b; color: #d6e8f5; font-weight: 700; font-size: .8rem; }
.topbar-user { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-size: .9rem; margin-right: .4rem; }
.topbar-user:hover { color: var(--link); }
.users-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.users-grid h2 .count, .people-panel .count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--line); font-size: .8rem; vertical-align: middle; }
.team-list { display: grid; gap: .4rem; margin-bottom: 1.2rem; }
.team-row { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.team-row > summary { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; cursor: pointer; list-style: none; }
.team-row > summary::-webkit-details-marker { display: none; }
.tm-main { display: grid; flex: 1; min-width: 0; }
.tm-main small, .pr-main small { color: var(--muted); font-size: .8rem; }
.team-edit { display: grid; gap: .7rem; padding: .2rem .8rem .8rem; }
.team-edit label, .team-add label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 500; }
.team-add { display: grid; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.team-add .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.people-panel { margin-top: 1rem; display: grid; gap: .9rem; }
.people-list { display: grid; gap: .5rem; }
.person-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pr-main { display: grid; gap: .2rem; min-width: 0; }
.pr-link { margin-top: .3rem; }
.pr-link input { font-size: .8rem; color: #b9c0cc; }
.pr-link .btn { min-height: 34px; font-size: .8rem; }
.btn[hidden] { display: none; }
.pr-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.pr-actions select { width: auto; min-height: 34px; font-size: .85rem; }
.pr-actions .btn { min-height: 34px; font-size: .82rem; padding: 0 .7rem; }
.person-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--line); }
.person-add input[type="text"], .person-add input[type="email"] { flex: 1 1 180px; width: auto; }
.person-add select { width: auto; }
.person-add .check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
input[type="email"] { width: 100%; min-height: 42px; padding: .55rem .8rem; background: #12151b; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 .95rem/1.4 var(--font); }
/* Page client : identité de la personne */
.decision .who { font-size: .85rem; color: var(--muted); }
.decision .who strong { color: var(--text); }
.decision .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .users-grid { grid-template-columns: 1fr; } .person-row { grid-template-columns: auto minmax(0, 1fr); } .pr-actions { grid-column: 1 / -1; } .team-add .two-cols { grid-template-columns: 1fr; } }

/* Version validée : plus de boutons de décision */
.decided-note { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: #7fd6b4; font-weight: 600; }
.decided-more { font-size: .85rem; }

/* Barre du cadre logo : fonds à gauche, flou et version à droite */
.stage-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.stage-toolbar .swatches { justify-self: auto; }
.versions { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(127, 135, 150, .22); margin-left: auto; }
.versions button { display: inline-flex; align-items: center; gap: .4em; border: 0; background: transparent; font: 500 .85rem/1 var(--font); padding: .55em 1em; border-radius: 999px; cursor: pointer; color: var(--text); }
.versions button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #161a21; }
.versions button.is-current:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.vx { width: .75em; height: .75em; border-radius: 50%; }
.vx-white { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.vx-black { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.blur-ctl { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(127, 135, 150, .22); font-size: .85rem; font-weight: 500; }
.blur-ctl[hidden] { display: none; }
.blur-ctl input { width: 120px; accent-color: #fff; }
.logo-photo img.is-dyn { inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); }
.stage-logo.bg-is-light .versions, .stage-logo.bg-is-light .blur-ctl { background: rgba(0, 0, 0, .08); color: #1d222b; }
.stage-logo.bg-is-light .versions button { color: #1d222b; }
.stage-logo.bg-is-light .versions button[aria-pressed="true"] { background: #1d222b; color: #fff; }
.stage-logo.bg-is-light .blur-ctl input { accent-color: #1d222b; }
@media (max-width: 760px) { .versions { margin-left: 0; } }

/* Planche : versions blanche / noire */
.lcard-logo.is-white { filter: brightness(0) invert(1); }
.lcard-logo.is-black { filter: brightness(0); }
.lc-variant { color: var(--muted); }

.hint-warn { color: #e9c07a; }

/* Pastille de fond : version forcée du logo */
.bg-chip .chip-version { width: auto; min-width: 44px; padding: 0 .45rem; font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); }
.bg-chip .chip-version.is-set { border-style: solid; color: var(--text); }
.bg-chip .chip-version.v-white { background: #fff; color: #161a21; border-color: #fff; }
.bg-chip .chip-version.v-black { background: #000; color: #fff; border-color: #555; }

/* Paiement Green Pay (bouton intégré à la page) */
.pay-green { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #1a1f27; justify-items: stretch; max-width: 30rem; scroll-margin-top: calc(var(--topbar-h, 66px) + 80px); }
.pay-title { font-size: 1rem; }
.pay-amount-inline { margin-left: .4rem; padding-left: .6rem; border-left: 1px solid var(--line); color: #cfd4dc; }
.pay-widget { min-height: 48px; }
.pay-widget.is-loaded .pay-loading { display: none; }
.pay-loading { color: var(--muted); font-size: .85rem; }
.pay-widget.is-error .pay-loading { color: #ff8d90; }
.set-card label[hidden] { display: none; }

/* Green Pay dans la fenêtre de remerciement */
.modal-done .done-pay .pay-widget { display: grid; justify-items: center; min-height: 48px; }
.modal-done .done-pay .pay-loading { margin: 0; }
.modal-done .done-pay .pay-loading:empty { display: none; }
.modal-done .done-pay .pay-widget.is-loaded .pay-loading:not(:empty) { display: block; } /* filet de sécurité */

/* Versions monochromes (fichiers dédiés) */
.variants-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: .7rem; padding: .8rem; border-radius: var(--radius-sm); background: #171b22; border: 1px solid var(--line); }
.variants-opts[hidden] { display: none; }
.variants-opts .pal-label { grid-column: 1 / -1; font-weight: 600; color: var(--text); font-size: .88rem; }
.variants-opts label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 500; }
.variants-opts .hint.full { grid-column: 1 / -1; }
.versions button[disabled] { opacity: .35; cursor: not-allowed; }

/* Bon de livraison (réglages › Livraison) */
.bon-row { display: grid; gap: .5rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12151b; }
.bon-row p { display: grid; gap: .2rem; font-size: .9rem; }
.bon-row .with-btn input { flex: 1; min-width: 0; }

/* ================= Fichiers clients : zone de dépôt et gestionnaire ================= */
.count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: 999px; background: var(--line); color: var(--text); font-size: .78rem; font-weight: 600; }
.count-new { background: var(--ok); color: #0c1a14; }
a.icon-btn { display: inline-grid; place-items: center; text-decoration: none; }

/* File d'envoi (commune) */
.depot-queue { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; text-align: left; font-size: .9rem; }
.depot-queue:empty { display: none; }
.depot-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .2rem .8rem; align-items: center; padding: .55rem .7rem; border-radius: var(--radius-sm); background: #12151b; border: 1px solid var(--line); }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-size, .q-state { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.q-remove { grid-column: 4; grid-row: 1; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 .2rem; }
.is-sending .q-remove, .is-done .q-remove { visibility: hidden; }
.depot-queue progress { grid-column: 1 / -1; width: 100%; height: 4px; appearance: none; border: 0; background: var(--line); border-radius: 2px; }
.depot-queue progress::-webkit-progress-bar { background: var(--line); border-radius: 2px; }
.depot-queue progress::-webkit-progress-value { background: var(--link); border-radius: 2px; }
.depot-queue progress::-moz-progress-bar { background: var(--link); }
.depot-queue .is-done .q-state { color: var(--ok); }
.depot-queue .is-err { border-color: rgba(229, 72, 77, .45); }
.depot-queue .is-err .q-state { color: #ff8d90; white-space: normal; grid-column: 1 / -1; grid-row: 2; }

/* Zone de dépôt (client) */
.pf-depot main.depot { max-width: 860px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.pf-depot .intro { padding-bottom: 2rem; }
.depot-form { padding: clamp(1rem, 3vw, 1.6rem); display: grid; gap: 1.2rem; }
.depot-drop { padding: clamp(2rem, 6vw, 3.5rem) 1.2rem; background: rgba(255, 255, 255, .015); }
.depot-drop-title { font-size: 1.1rem; }
.depot-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.depot-fields label { display: block; font-size: .9rem; font-weight: 500; }
.depot-fields label > input, .depot-fields label > select, .depot-fields label > textarea { display: block; width: 100%; margin-top: .35rem; }
.depot-fields .full { grid-column: 1 / -1; }
.depot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.depot-foot .hint { flex: 1 1 280px; }
.depot-foot .btn { min-height: 46px; padding: 0 1.6em; font-size: 1rem; }
.depot-foot .btn:disabled { opacity: .45; cursor: default; }
.depot-result { padding: .9rem 1rem; border-radius: var(--radius-sm); font-weight: 500; }
.depot-result.is-ok { background: rgba(63, 182, 139, .12); border: 1px solid rgba(63, 182, 139, .4); }
.depot-result.is-warn { background: rgba(224, 164, 59, .1); border: 1px solid rgba(224, 164, 59, .45); }
.depot-result.is-err { background: rgba(229, 72, 77, .1); border: 1px solid rgba(229, 72, 77, .4); }
.pf-depot .attachments .count { margin-left: .3rem; vertical-align: middle; }
@media (max-width: 640px) { .depot-fields { grid-template-columns: 1fr; } }

/* Gestionnaire (admin) */
.fm-head { margin-bottom: 1.2rem; }
.fm-quota { height: 4px; max-width: 360px; margin-top: .6rem; border-radius: 2px; background: var(--line); overflow: hidden; }
.fm-quota span { display: block; height: 100%; background: var(--link); }
.fm-link { margin-bottom: 1.2rem; display: grid; gap: 1rem; }
.fm-link summary { display: grid; gap: .2rem; cursor: pointer; list-style: none; }
.fm-link summary::-webkit-details-marker { display: none; }
.fm-link summary > span:first-child::after { content: " ▾"; color: var(--muted); }
.fm-link[open] summary > span:first-child::after { content: " ▴"; }
.fm-link[open] summary { margin-bottom: 1rem; }
.fm-link .share { margin-bottom: 1rem; }
.fm-link-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.fm-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.fm-side { padding: .8rem; position: sticky; top: 84px; }
.fm-side ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 2px; }
.fm-side a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .92rem; }
.fm-side a:hover, .fm-side .is-sel a { background: #252b36; }
.fm-side .fm-sep { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.fm-folder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-folder::before { content: "▸ "; color: var(--muted); }
.fm-mkdir { display: flex; gap: .4rem; }
.fm-mkdir input { min-width: 0; }
.fm-main { display: grid; gap: 1rem; min-width: 0; }
.fm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.fm-toolbar h2 { margin: 0; }
.fm-folder-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.fm-folder-actions input { width: 200px; }
.fm-drop { padding: 1rem; font-size: .92rem; }
.fm-bulk { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .7rem; margin-bottom: .4rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.fm-bulk-actions { display: flex; flex-wrap: wrap; gap: .4rem; opacity: .45; pointer-events: none; transition: opacity .15s; }
.fm-bulk.has-sel .fm-bulk-actions { opacity: 1; pointer-events: auto; }
.fm-bulk .btn, .fm-bulk select { min-height: 34px; font-size: .82rem; }
.fm-bulk select { width: auto; max-width: 170px; padding-top: .3rem; padding-bottom: .3rem; }
.fm-bulk .check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.fm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fm-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .8rem; padding: .5rem .5rem; border-bottom: 1px solid var(--line); }
.fm-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fm-table td small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.fm-table tr.is-new td { background: rgba(63, 182, 139, .06); }
.fm-thumb { width: 72px; }
.fm-thumb img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #fff; }
.fm-thumb .att-ext { width: 64px; height: 48px; }
.fm-name strong { overflow-wrap: anywhere; font-weight: 600; }
.fm-name .tag { margin-left: .3rem; }
.fm-note { margin-top: .4rem; padding: .45rem .6rem; border-left: 2px solid var(--link); background: #12151b; border-radius: 0 6px 6px 0; font-size: .85rem; color: #cfd4dc; }
.fm-actions { white-space: nowrap; text-align: right; }
.fm-table td:nth-child(5), .fm-table td:nth-child(6) { white-space: nowrap; }
.fm-project + .fm-project { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.fm-project h3 { font-size: 1rem; margin: 0 0 .6rem; }
.fm-project h3 a { color: var(--text); }
.fm-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fm-plist li { display: flex; align-items: center; gap: .8rem; }
.fm-plist .att-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.fm-plist .att-name small { display: block; color: var(--muted); }
.fm-log { margin-top: 1.2rem; font-size: .88rem; }
.fm-log summary { cursor: pointer; font-weight: 600; }
.fm-log ul { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.fm-log time { color: var(--muted); margin-right: .4rem; }
.drive-alert { display: grid; gap: .4rem; padding: .9rem 1rem; margin-bottom: 1.2rem; border-radius: var(--radius-sm); background: rgba(63, 182, 139, .1); border: 1px solid rgba(63, 182, 139, .35); }
.drive-alert ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.client-files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem; margin: 1rem 0; border-radius: var(--radius-sm); background: #12151b; border: 1px solid var(--line); }
.client-files p { font-size: .9rem; }
@media (max-width: 960px) {
  .fm-grid, .fm-link-grid { grid-template-columns: 1fr; }
  .fm-side { position: static; }
}
@media (max-width: 640px) {
  .fm-table thead { display: none; }
  .fm-table tr { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr); border-bottom: 1px solid var(--line); padding: .4rem 0; }
  .fm-table td { border: 0; padding: .25rem .3rem; }
  .fm-table td:nth-child(n+4) { grid-column: 3; font-size: .82rem; color: var(--muted); }
  .fm-table td:nth-child(4) small, .fm-table td:nth-child(6) small { display: inline; margin-left: .3rem; }
  .fm-actions { text-align: left; }
  .fm-bulk { position: static; }
  .pf-admin .brand-sub { display: none; }
}

.fb-depot-hint { margin-top: .5rem; font-size: .85rem; }

/* ================= Accueil de l'espace clients (/portfolio/) ================= */
.pf-welcome main.welcome { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.welcome-hero { padding: clamp(3.5rem, 11vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4rem); max-width: 46rem; }
.welcome-hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 700; letter-spacing: -0.035em; }
.welcome-lead { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #cfd4dc; max-width: 40rem; }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.welcome-steps li { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.welcome-steps h2 { font-size: 1.15rem; margin: 1rem 0 .55rem; }
.welcome-steps p { color: #c3c8d0; font-size: .95rem; }
.ws-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(108, 188, 230, .5); color: var(--link); font-weight: 700; }
.welcome-recover { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: clamp(1.2rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 2.5rem; align-items: center; }
.welcome-recover h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.welcome-recover .code-form { margin: 0; }
.welcome-recover .form-error, .welcome-recover .depot-result { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.welcome-foot { max-width: 1080px; }
.welcome-team { color: var(--muted); }
@media (max-width: 860px) {
  .welcome-steps, .welcome-recover { grid-template-columns: 1fr; }
  .welcome-recover .form-error, .welcome-recover .depot-result { grid-column: 1; }
}

/* ================= Édition de la page d'accueil ================= */
.wa .admin-head { margin-bottom: 1.2rem; }
.wa-form { display: grid; gap: 1.2rem; max-width: 980px; }
.wa-form .panel h2 { margin-bottom: .2rem; }
.wa-visuals { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.wa-choice { display: flex !important; gap: .6rem; align-items: flex-start; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.wa-choice:has(input:checked) { border-color: var(--link); background: rgba(108, 188, 230, .07); }
.wa-choice input { margin-top: .25rem; }
.wa-choice small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; margin-top: .15rem; }
.wa-image { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: center; }
.wa-image img, .wa-noimg { width: 160px; height: 100px; border-radius: 8px; object-fit: cover; background: #12151b; border: 1px solid var(--line); }
.wa-noimg { display: grid; place-items: center; color: var(--muted); font-size: .85rem; }
.wa-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.6fr); gap: .8rem; align-items: start; padding-top: .8rem; border-top: 1px solid var(--line); }
.wa-num { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 1.5rem; border-radius: 50%; background: linear-gradient(135deg, #0B6FA4, #7A8CE0); color: #fff; font-weight: 700; }
.wa-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .8rem 0; background: var(--bg); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .wa-visuals { grid-template-columns: 1fr; }
  .wa-step { grid-template-columns: 1fr; }
  .wa-num { margin-top: 0; }
  .wa-image { grid-template-columns: 1fr; }
}
.wa-form .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 760px) { .wa-form .two-cols { grid-template-columns: 1fr; } }

/* Planche logo liée (réglages du projet) */
.lb-panel { display: grid; gap: .8rem; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lb-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12151b; }
.lb-list form { margin: 0; }
.lb-name { flex: 1 1 220px; display: grid; }
.lb-name small { color: var(--muted); font-size: .8rem; }
.lb-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lb-actions .with-btn { flex: 1 1 360px; margin: 0; }
.lb-actions select { flex: 1; min-width: 0; }

/* Planche logo liée (page client) */
.lb-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 520px)); gap: 1rem; margin: -1rem 0 2.5rem; }
.lb-card { display: grid; gap: .35rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-lg); text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #0B6FA4, #3B9BD7 70%, #7A8CE0); box-shadow: 0 18px 40px -24px rgba(11, 111, 164, .8); transition: transform .15s; }
.lb-card:hover { color: #fff; transform: translateY(-2px); }
.lb-card-k { font-size: .82rem; opacity: .85; }
.lb-card strong { font-size: 1.25rem; line-height: 1.2; }
.lb-card-d { font-size: .92rem; opacity: .92; max-width: 46ch; }
.lb-card-go { justify-self: start; margin-top: .5rem; padding: .45rem .9rem; border-radius: 8px; background: #fff; color: #0B6FA4; font-weight: 600; font-size: .9rem; }
@media (max-width: 640px) { .btn-lb { display: none; } }
@media (prefers-reduced-motion: reduce) { .lb-card { transition: none; } }

/* Menu de l'administration (portfolio et planches logo) */
.topnav { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 auto 0 1rem; }
.topnav a { color: var(--muted); text-decoration: none; padding: .45rem .75rem; border-radius: 8px; font-size: .92rem; }
.topnav a:hover, .topnav a.is-on { color: var(--text); background: #252b36; }
@media (max-width: 1100px) { .pf-admin .topbar { flex-wrap: wrap; } .topnav { order: 3; width: 100%; margin: 0; } }
@media (max-width: 640px) { .topnav a { padding: .4rem .55rem; font-size: .85rem; } }