/* Charte Alias Photographies — écrans de l'équipe (Lot D, portails 2026-09-17).
 *
 * Source unique : la maquette approuvée par le client (MAQUETTE-FICHES.html). Les jetons et
 * les composants en sont repris tels quels ; chaque écart est commenté ici avec sa raison.
 * Cette feuille REMPLACE style.css (charte Horizon) pour les pages fiches, fiche et connexion.
 *
 * Écart assumé n° 1 — contraste : la maquette écrit certains TEXTES en --faint (#9A9A94,
 * 2,8:1 sur blanc, sous le seuil WCAG AA). Les textes passent en --faint-text (#74746E,
 * 4,6:1) ; --faint reste pour ce qui n'est pas du texte (pastilles, bordures).
 */
:root{
  --ink:#0A0A0A; --ink-2:#1C1C1B; --paper:#FFFFFF; --mist:#F4F4F2; --mist-2:#ECECE9;
  --line:#E3E3DF; --line-2:#D4D4CF; --text:#1A1A19; --muted:#6B6B66; --faint:#9A9A94; --faint-text:#74746E;
  --on-ink:#FFFFFF; --on-ink-2:#BDBDB8;
  --attn:#9A6212; --attn-bg:#F6EEDF; --ok:#2E6A43; --ok-bg:#E4EFE7; --bad:#9E3A2B; --bad-bg:#F5E4E0;
  --serif:"Libre Baskerville","Baskervville",Georgia,"Times New Roman",serif;
  --sans:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px;
  /* Fond d'une façade absente : noir uni et un motif discret, jamais une image cassée. */
  --motif:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 14px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--mist);color:var(--text);margin:0}
body{font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;text-wrap:balance;margin:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:8px;top:-60px;z-index:60;background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:var(--r);font-weight:700}
.evitement:focus{top:8px}

/* ── chrome de l'app ───────────────────────────────── */
.app-bar{background:var(--ink);color:var(--on-ink);display:flex;align-items:center;gap:22px;padding-block:10px;padding-inline:20px;flex-wrap:wrap}
.app-bar .marque{display:block;line-height:0}
.app-bar .marque img{height:34px;width:auto;display:block}
.app-bar nav{display:flex;gap:18px;font-family:var(--serif);font-size:15px;flex-wrap:wrap}
.app-bar nav a{color:var(--on-ink-2);text-decoration:none}
.app-bar nav a:hover{color:var(--on-ink)}
.app-bar nav a[aria-current="page"]{color:var(--on-ink)}
.app-bar :focus-visible{outline-color:var(--on-ink)}
.app-bar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--on-ink-2)}
.app-bar .who .ph{width:28px;height:28px;border-radius:50%;background:var(--ink-2);color:var(--on-ink);display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid #3a3a38}
.app-bar .deco{border:0;background:none;padding:0;color:var(--on-ink-2);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.app-bar .deco:hover{color:var(--on-ink)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:24px 60px}
@media (max-width:640px){.wrap{padding-inline:16px}.app-bar{padding-inline:16px;gap:12px}.app-bar nav{display:none}}

/* ── éléments communs ──────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--paper);color:var(--text)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.pill.s-attn{border-color:transparent;background:var(--attn-bg);color:var(--attn)}.pill.s-attn::before{background:var(--attn)}
.pill.s-ok{border-color:transparent;background:var(--ok-bg);color:var(--ok)}.pill.s-ok::before{background:var(--ok)}
.pill.s-bad{border-color:transparent;background:var(--bad-bg);color:var(--bad)}.pill.s-bad::before{background:var(--bad)}
.pill.s-ink{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}.pill.s-ink::before{background:var(--on-ink)}
.avatar{display:inline-flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.avatar img,.avatar .ph{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--mist-2);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted)}
.mini{display:flex;gap:3px;margin-top:6px}
.mini i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.mini i.done{background:var(--ink)}
.mini i.cur{background:var(--ink);opacity:.45}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);border-radius:var(--r);padding:9px 14px;font-weight:700;font-size:14px;text-decoration:none;display:inline-block;line-height:1.35}
.btn:hover{background:var(--ink-2)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--mist)}
.btn.ghost{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.45)}
.btn.ghost:hover{border-color:var(--on-ink)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.link{border:0;background:none;padding:0;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--text)}
.hint{font-size:12.5px;color:var(--muted);margin-top:10px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:40;max-width:calc(100vw - 32px);text-align:center}
.toast.erreur{background:var(--bad)}
.etat-page{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 22px;text-align:center;color:var(--muted)}
.etat-page h2{font-size:20px;color:var(--text);margin-bottom:6px}
.chargement{color:var(--muted);padding:40px 0;text-align:center}

/* ── liste ─────────────────────────────────────────── */
.list-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.list-head h1{font-size:30px}
/* Onglets : à 390 px ils ne tiennent pas. Ils défilent DANS leur barre (jamais la page), et un
   fondu au bord dit qu'il en reste de ce côté — sans lui, « En édition / Livrées / Toutes »
   étaient simplement coupés hors écran (contrôle qualité 2026-09-17). Les classes
   .suite-droite / .suite-gauche sont posées par public/js/fiches.js selon la position. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none}
.tabs.suite-droite{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.tabs.suite-gauche{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.tabs.suite-gauche.suite-droite{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.tabs button{border:0;background:none;padding:10px 12px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
.tabs .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--mist-2);font-size:12px;color:var(--text);text-align:center}
.fcards{display:grid;gap:10px;margin-top:6px}
/* La carte est un LIEN (<a>) et pas un bouton : clic du milieu, « ouvrir dans un onglet »
   et lecteurs d'écran s'y retrouvent. La maquette livrée une fois avec des fiches non
   cliquables est la raison de ce choix — un lien ne peut pas oublier d'être cliquable. */
.fcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:end;width:100%;min-height:150px;border:0;border-radius:var(--r);padding:16px 18px;text-align:left;color:#fff;text-decoration:none;background-color:var(--ink);background-image:var(--motif);background-size:cover;background-position:center;transition:transform .15s,box-shadow .15s}
.fcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.18);transform:translateY(-1px)}
.fcard:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fcard .fc-main{display:grid;gap:3px;min-width:0}
.fcard .fc-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.fcard .fc-sv{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fcard .addr{font-family:var(--serif);font-size:21px;line-height:1.2}
.fcard .sub{font-size:13px;color:rgba(255,255,255,.78)}
.fcard .mini{max-width:320px}
.fcard .mini i{background:rgba(255,255,255,.28)}
.fcard .mini i.done{background:#fff}
.fcard .mini i.cur{background:#fff;opacity:.55}
.fcard .fc-side{display:grid;gap:8px;justify-items:end;text-align:right;min-width:0}
.fcard .avatar{color:#fff}
.fcard .avatar .ph{background:rgba(255,255,255,.9);color:var(--ink)}
.fcard .dim{color:rgba(255,255,255,.7);font-size:13px}
.fcard .next{font-weight:800;font-size:13.5px;background:#fff;color:var(--ink);border-radius:999px;padding:5px 12px}
.fcard .next.attn{background:var(--attn-bg);color:var(--attn)}
/* Téléphone : le nom du photographe et la pastille d'action partagent une ligne tant qu'ils y
   tiennent, et la pastille passe DESSOUS sinon. L'ancienne grille en colonnes imposait une
   seule ligne : à 390 px un nom long passait sous la pastille (contrôle qualité 2026-09-17). */
@media (max-width:640px){
  .fcard{grid-template-columns:minmax(0,1fr)}
  .fcard .fc-side{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;text-align:left}
  .fcard .fc-side .avatar{flex:0 1 auto;min-width:0;max-width:100%}
  .fcard .fc-side .avatar > :last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fcard .next{flex:0 1 auto;max-width:100%;margin-left:auto}
  .fcard .addr{font-size:19px}
}

/* ── fiche ─────────────────────────────────────────── */
.back{border:0;background:none;padding:0;font-weight:700;color:var(--muted);text-decoration:none;font-size:15px}
.back:hover{color:var(--ink)}
.crumbs{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.crumbs .ref{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint-text)}
.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px;margin-top:12px;align-items:stretch}
@media (max-width:980px){.head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.head .title{grid-column:1/-1}}
@media (max-width:620px){.head{grid-template-columns:minmax(0,1fr)}}
.head .title{padding:4px 0}
.head h1{font-size:clamp(26px,3.6vw,38px);line-height:1.12;margin-top:8px}
.head .city{color:var(--muted);margin-top:4px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.card .eyebrow{margin-bottom:6px}
.rdv .big{font-family:var(--serif);font-size:22px;line-height:1.2}
.rdv .time{font-size:28px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.rdv .who{font-size:13px;color:var(--muted);margin-top:6px}
.contact .name{font-weight:800;font-size:16px}
.contact .org{font-size:13px;color:var(--muted)}
.contact .lines{font-size:13.5px;margin:8px 0 10px;display:grid;gap:2px}
.contact .lines span{overflow-wrap:anywhere}
.cbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cbtns a{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:var(--r);padding:7px 4px;text-decoration:none;color:var(--text);font-size:12px;font-weight:700}
.cbtns a svg{width:18px;height:18px}
.cbtns a:hover{border-color:var(--ink)}
.rabais-edit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13px}
.rabais-edit input{width:72px;border:1px solid var(--line-2);border-radius:var(--r);padding:5px 8px}

/* ── Champs modifiables en place (fiche modifiable, 2026-09-17) ──────────────
   Le crayon se voit SANS survol : sur un téléphone il n'y a pas de survol, et une
   modification qu'on ne découvre qu'en tâtonnant n'existe pas. Ces formulaires vivent sur
   fond clair (cartes et panneaux), à l'inverse de .field qui est fait pour le panneau noir. */
.crayon{border:0;background:none;padding:0;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--muted);white-space:nowrap}
.crayon:hover{color:var(--ink)}
.crayon::before{content:"✎ "}
.edit{display:grid;gap:8px;margin-top:8px;font-size:13px}
.edit label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:3px}
.edit input,.edit select,.edit textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r);padding:6px 8px;background:var(--paper);color:var(--text);font:inherit;font-size:13px;min-width:0}
.edit textarea{resize:vertical}
.edit .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:520px){.edit .duo{grid-template-columns:minmax(0,1fr)}}
.svc-edit{display:grid;gap:6px;margin-top:8px;font-size:13px}
.svc-edit .row{display:grid;grid-template-columns:auto minmax(0,1fr) 58px;gap:4px 10px;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:6px}
.svc-edit .row:last-of-type{border-bottom:0}
.svc-edit .row input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink)}
.svc-edit .row input[type=number]{width:100%;border:1px solid var(--line-2);border-radius:var(--r);padding:4px 6px;font:inherit;font-size:13px;text-align:right;background:var(--paper);color:var(--text)}
.svc-edit .row .nom{min-width:0;overflow-wrap:anywhere}
.svc-edit .row .prix{grid-column:2/-1;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.svc-edit .row .prix input{width:96px;text-align:right}

.stepper{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin:16px 0 0;padding:16px 8px 12px;list-style:none}
.step{position:relative;text-align:center;padding:0 2px;min-width:0}
.step .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);background:var(--paper);margin:0 auto 8px;position:relative;z-index:1}
.step::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--line)}
.step:first-child::before{display:none}
.step.done .dot{background:var(--ink);border-color:var(--ink)}
.step.done::before,.step.cur::before{background:var(--ink)}
.step.cur .dot{border-color:var(--ink);box-shadow:0 0 0 4px var(--mist-2)}
.step .lab{font-size:12px;font-weight:700;color:var(--faint-text);overflow-wrap:anywhere;line-height:1.25}
.step.done .lab,.step.cur .lab{color:var(--text)}
.step .when{font-size:11px;color:var(--faint-text);min-height:15px}
.stepper.annulee .step .dot{border-style:dashed}
@media (max-width:760px){
  .stepper{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
  .step:nth-child(5)::before{display:none}
}

.grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media (max-width:980px){.grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.stack{display:grid;gap:16px;min-width:0}
.panel h3{font-size:15px;margin-bottom:8px}
.panel .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.panel .h h3{margin:0}
.action{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.action .eyebrow{color:var(--on-ink-2)}
.action h2{font-size:20px;margin:6px 0 6px}
.action p{margin:0 0 14px;color:var(--on-ink-2);font-size:13.5px}
.action :focus-visible{outline-color:var(--on-ink)}
.action .hint{color:var(--on-ink-2);margin:10px 0 0}
.action .erreur-action{background:var(--bad-bg);color:var(--bad);border-radius:4px;padding:8px 10px;font-size:13px;font-weight:700;margin:10px 0 0}
.field{display:grid;gap:4px;margin-bottom:10px}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--on-ink-2)}
.field select,.field input,.field textarea{background:var(--ink-2);border:1px solid #3a3a38;border-radius:var(--r);padding:8px 10px;color:var(--on-ink);width:100%;min-width:0}
.field input::-webkit-calendar-picker-indicator{filter:invert(1)}
.team{display:grid;gap:10px}
.team .line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;flex-wrap:wrap}
.team .inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.team select{border:1px solid var(--line-2);border-radius:var(--r);padding:5px 8px;background:var(--paper);max-width:100%}
.services{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.services li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.services li:last-child{border:0}
.notes{margin:0;font-size:13.5px;white-space:pre-line}

/* message du courtier (portail) en attente */
.message-courtier{border-color:var(--attn);box-shadow:0 0 0 1px var(--attn)}
.message-courtier .messages{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.message-courtier .messages li{border-top:1px solid var(--line);padding-top:8px;font-size:13.5px;display:grid;gap:2px}
.message-courtier .messages li:first-child{border-top:0;padding-top:0}
.message-courtier .m-t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.message-courtier .m-t time{font-size:12px}
.message-courtier .m-x{margin:2px 0 0;white-space:pre-line}
.message-courtier .m-q{font-size:12px}

/* contrôle qualité : ce qui est déjà dans la Livraison */
.qc-deja{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:10px;display:grid;gap:8px;font-size:12.5px}
.gallery figure.deja{opacity:.8}
.gallery .tag-deja{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
/* contrôle qualité : déposé AVANT le dernier refus — visible pour comparer, décoché, et il le
   dit. À DROITE : la case à cocher occupe déjà le coin haut-gauche de la tuile. */
.gallery figure.avant-refus img{opacity:.42;filter:grayscale(.4)}
.gallery .tag-avant{position:absolute;top:6px;right:6px;max-width:calc(100% - 40px);background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;text-align:center}

/* lieu */
.lieu{padding:0;overflow:hidden}
.sv{position:relative;aspect-ratio:16/9;background:var(--mist-2)}
.sv img{width:100%;height:100%;object-fit:cover;display:block}
.sv.vide{background-color:var(--ink);background-image:var(--motif);display:grid;place-items:center;color:rgba(255,255,255,.72);font-size:13px;font-weight:700;text-align:center;padding:16px}
.tag{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.map{position:relative;aspect-ratio:16/10;background:#E9ECE6;border-top:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lieu .b{padding:12px 16px;display:grid;gap:8px}
.lieu .addr{font-size:13.5px}

/* facture */
.inv dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 0;margin:0;font-size:13.5px}
.inv dt{min-width:0}
.inv dd{margin:0;text-align:right;padding-left:12px;white-space:nowrap}
.inv .tot{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-weight:800;font-size:18px}

/* boîtes */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1180px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flow{grid-template-columns:minmax(0,1fr)}}
.bx{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:flex;flex-direction:column;min-width:0;text-align:left;padding:0;overflow:hidden}
.bx.cur{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bx.open{background:var(--mist)}
.bx .bh{padding:10px 12px 8px;display:grid;gap:2px}
.bx .phase{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint-text)}
.bx .name{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px}
.bx .name .new{width:7px;height:7px;border-radius:50%;background:var(--attn)}
.bx .meta{font-size:12px;color:var(--muted)}
.bx .vis{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
.bx .vis svg{width:13px;height:13px;flex:none}
.bx .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:0 12px}
.bx .strip span{aspect-ratio:1;background:var(--mist-2);border-radius:2px;overflow:hidden;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted)}
.bx .strip img{width:100%;height:100%;object-fit:cover}
.bx .strip .v{background:var(--ink-2);color:#fff}
.bx .state{margin:10px 12px 12px;padding:10px 8px;border-radius:4px;background:var(--mist);font-size:12px;color:var(--muted);text-align:center}
.bx.open .state{background:var(--paper)}
.bx .open-btn{border:0;border-top:1px solid var(--line);background:none;padding:8px 12px;font-size:12.5px;font-weight:700;text-align:left;margin-top:auto}
.bx .open-btn:hover{background:var(--mist-2)}
.boxview{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.box-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px;font-size:13px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gallery figure{margin:0;position:relative;border-radius:4px;overflow:hidden;background:var(--mist-2);aspect-ratio:3/2}
.gallery figure > a,.gallery figure > .tuile{display:block;width:100%;height:100%;color:inherit;text-decoration:none;border:0;padding:0;background:none}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:11px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.gallery .chk{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:3px;background:rgba(255,255,255,.92);border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:800;padding:0;color:var(--ink)}
.gallery .chk.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gallery figure.sel-off img{opacity:.55}
.gallery .vid,.gallery .plus{display:grid;place-items:center;color:var(--on-ink);background:var(--ink-2);font-size:12px;font-weight:700;padding:6px;text-align:center;border:0;width:100%;height:100%;overflow-wrap:anywhere}
.qc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--attn-bg);color:var(--attn);border-radius:4px;padding:8px 10px;font-size:13px;font-weight:700;margin-bottom:10px}
.qc .link{color:var(--attn);font-size:12.5px}

.hist{list-style:none;margin:0;padding:0;display:grid}
.hist li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.hist li:first-child{border-top:0}
.hist time{color:var(--muted);font-size:12.5px}
.hist b{font-weight:700}
@media (max-width:520px){.hist li{grid-template-columns:minmax(0,1fr);gap:0}}

/* ── composant de dépôt (doublure au contrat du Lot A) ── */
.mini-drop{margin:10px 12px 12px;border:1.5px dashed var(--line-2);border-radius:4px;padding:10px 8px;text-align:center;font-size:12px;color:var(--muted);background:var(--mist)}
.mini-drop.over{border-color:var(--ink);background:var(--mist-2)}
.mini-drop b{color:var(--text)}
.mini-drop label{text-decoration:underline;cursor:pointer;font-weight:700;color:var(--text)}
.mini-drop label:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.bx.open .mini-drop{background:var(--paper)}
.files{list-style:none;margin:10px 12px 0;padding:0;display:grid;gap:4px}
.files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.files li > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li.echec{border-color:var(--bad);color:var(--bad)}
.files li .link{font-size:12px;color:inherit}
.bar{grid-column:1/-1;height:3px;background:var(--mist-2);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .3s}

/* Le vrai composant du Lot A (public/js/depot.js) dans une boîte de la fiche : sa zone est
   faite pour une page entière ; ici on la ramène au gabarit « Glissez ici ou choisissez » de la
   maquette, ses deux boutons devenant des liens. */
.bx .depot{margin:10px 12px 12px;gap:8px}
.bx .depot .drop{padding:10px 8px;border-radius:4px;font-size:12px}
.bx.open .depot .drop{background:var(--paper)}
.bx .depot .drop strong{font-family:var(--sans);font-weight:800;font-size:12px;color:var(--text)}
.bx .depot .drop p{display:none}
.bx .depot .drop .btns{gap:2px 10px;margin-top:2px}
.bx .depot .drop .btn{border:0;background:none;padding:0;color:var(--text);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bx .depot .drop label:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.bx .depot .global .ligne{font-size:12px}
.bx .depot .files{max-height:180px}
.bx .depot .files li{font-size:12px}

/* ── ouverture ─────────────────────────────────────── */
html.ouverture,html.ouverture body{background:#000}
html.ouverture body > :not(.splash){visibility:hidden}
.splash{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .6s ease}
.splash img{width:min(220px,50vw);height:auto;opacity:0;transform:scale(.96);animation:spIn 1.1s ease forwards .15s}
.splash .sp-sub{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;opacity:0;animation:spIn .9s ease forwards .7s}
.splash.out{opacity:0}
@keyframes spIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.splash img,.splash .sp-sub{animation:none;opacity:1;transform:none}.splash{transition:none}}

/* ── connexion ─────────────────────────────────────── */
.page-connexion{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.lg{width:100%;max-width:600px;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:520px;border:1px solid var(--line);background:var(--paper)}
@media (max-width:640px){.lg{grid-template-columns:minmax(0,1fr);min-height:0}.lg .side{min-height:220px}}
.lg .side{background:#000;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.lg .side img.logo{width:120px;height:auto}
.lg .side .quote{font-family:var(--serif);font-size:22px;line-height:1.3;position:relative;margin:0}
.lg .side .quote small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;margin-bottom:10px}
.lg .side .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.lg .side > *{position:relative}
.lg .form{padding:32px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.lg .form h1{font-size:26px}
.lg .form .lead{color:var(--muted);font-size:14px;margin:0 0 6px}
.lg label{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.lg input{border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;font-size:15px;background:var(--paper);color:var(--text);width:100%;min-width:0}
.lg input:focus{outline:2px solid #000;outline-offset:1px;border-color:#000}
.lg input[aria-invalid="true"]{border-color:var(--bad)}
.lg .btn{padding:12px 14px;text-align:center}
.lg .fine{font-size:12.5px;color:var(--muted);margin:0}
.lg .erreur{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:10px 12px;font-size:13.5px;font-weight:700;margin:0}
.lg .ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:10px 12px;font-size:13.5px;font-weight:700;margin:0}
.lg .info{background:var(--mist);color:var(--text);border-radius:8px;padding:10px 12px;font-size:13px;margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

main:focus{outline:none}