/*
Theme Name: Filiofoto
Theme URI: https://filiofoto.fr
Author: Thierry Russo-Delattre
Description: Theme sur mesure - espace client et back-office pour la photographie immobiliere en Perigord Noir. Transpose fidelement depuis les maquettes validees (pack v2).
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: filiofoto
*/

/* ============================================================
   TOKENS - repris exactement des maquettes v2 (source de verite)
   ============================================================ */
:root{
  --font-heading:'Playfair Display',serif;
  --font-body:'Lexend',sans-serif;
  --font-signature:'Signature TRD','Playfair Display',serif;
  --font-heading-weight:500;
  --color-bg:#ffffff;
  --color-text:#2e2c29;
  --color-neutral-100:#f4f3f0;
  --color-neutral-200:#e8e6e0;
  --color-divider:#e0ddd4;
  --color-neutral-300:#d9d6cd;
  --color-neutral-400:#c2beb2;
  --color-neutral-500:#8f8b83;
  --color-neutral-600:#797569;
  --color-neutral-700:#5c584e;
  --color-neutral-800:#43403a;
  --color-neutral-900:#2e2c29;
  --color-charbon:#33322f;
  --color-accent:#a3925e;
  --color-accent-100:#f1ede1;
  --color-accent-200:#e2dbc6;
  --color-accent-300:#cfc39f;
  --color-accent-400:#b8a97c;
  --color-accent-500:#a3925e;
  --color-accent-600:#8b7c4e;
  --color-accent-700:#726540;
  --color-accent-800:#5a5033;
  --color-accent-900:#423b26;
  --color-band:#ad9f7c;
  --color-band-text:#fdfbf6;
  --color-band-kicker:#f3ecdc;
  --color-surface:#faf9f6;
  --text-on-dark:#fdfbf6;
  --field-bg:#f7f5f0;
  --field-border:#dfdacb;
  --radius-sm:4px;
}

/* ---- Police de signature : chargee via assets/fonts/signature.css (data-URI) ---- */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent-600)}
.plate{filter:none}
.num{font-feature-settings:'tnum'}

/* ---- Champs (v2 : fond legerement teinte) ---- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600);font-weight:400}
.input{
  font-family:var(--font-body);font-weight:300;font-size:14px;color:var(--color-text);
  background:var(--field-bg);border:1px solid var(--field-border);
  border-radius:var(--radius-sm);padding:11px 14px;width:100%;
  transition:background .15s,border-color .15s;
}
.input:focus{outline:2px solid var(--color-accent);outline-offset:1px;background:#fff;border-color:var(--color-accent)}
.input::placeholder{color:var(--color-neutral-500)}

/* ---- Boutons v2 : fond leger, contour conserve, jamais de plein bronze ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;font-family:var(--font-body);font-weight:400;font-size:13.5px;
  letter-spacing:.04em;border-radius:var(--radius-sm);cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--color-text);
  transition:background .15s,border-color .15s,color .15s;text-decoration:none;
}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.btn-primary{border-color:var(--color-accent);color:var(--color-accent-700);background:var(--color-accent-100)}
.btn-primary:hover{background:var(--color-accent-200);color:var(--color-accent-700)}
.btn-secondary{border-color:var(--color-neutral-400);color:var(--color-neutral-800);background:var(--color-neutral-100)}
.btn-secondary:hover{background:var(--color-neutral-200);color:var(--color-neutral-800)}
.btn-dark{background:var(--color-charbon);border-color:var(--color-charbon);color:#f5f2ea}
.btn-dark:hover{background:#454440;border-color:#454440;color:#f5f2ea}
.btn-ghost{color:var(--color-accent-700)}
.btn-ghost:hover{background:var(--color-accent-100)}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed}

/* ---- Filet double signature : 1px bronze + 3px vide + 1px filet clair ---- */
.filet-double{display:flex;flex-direction:column;gap:3px}
.filet-double > i{display:block;height:1px}
.filet-double > i:first-child{background:var(--color-accent)}
.filet-double > i:last-child{background:var(--color-divider)}

/* ---- Kicker ---- */
.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent-700)}

/* ---- Wordmark signature ---- */
.wordmark{font-family:var(--font-signature);font-weight:400;font-size:26px;line-height:1.05;color:var(--color-accent-200)}

/* ============================================================
   CONNEXION - valeurs relevees sur maquette-connexion.html
   (palier <=860px : maquette-connexion-mobile.html, cadre 390px)
   ============================================================ */
.cnx{display:flex;align-items:stretch;min-height:100vh;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}
.cnx-aside{width:46%;flex:none;background:#33322f;color:var(--color-bg);display:flex;flex-direction:column;padding:40px 52px;position:relative;overflow:hidden}
.cnx-ghost{position:absolute;left:24px;bottom:-90px;font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:420px;line-height:1;color:var(--color-accent);opacity:.1;pointer-events:none}
.cnx-marque{position:relative}
.cnx-sub{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent-400);margin-top:12px}
.cnx-sub-lieu{color:color-mix(in srgb, var(--color-bg) 55%, transparent);margin-top:3px}
.cnx-flex{flex:1;display:flex;align-items:center;position:relative}
.cnx-flex-in{width:100%}
.cnx-visual{height:clamp(180px, 34vh, 320px);position:relative}
.cnx-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.cnx-meta-lieu{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb, var(--color-bg) 55%, transparent)}
.cnx-meta-pack{font-family:var(--font-heading);font-style:italic;font-size:15px;color:var(--color-accent-400);white-space:nowrap}
.cnx-contact{position:relative;display:flex;flex-direction:column;gap:10px}
.cnx-quote{font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:21px;line-height:1.4;color:color-mix(in srgb, var(--color-bg) 85%, transparent)}
.cnx-tel{font-size:11.5px;line-height:1.6;color:color-mix(in srgb, var(--color-bg) 50%, transparent)}
.cnx-main{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:28px 40px;overflow:auto}
.cnx-box{width:min(430px,100%)}

/* Vue connexion */
.cnx-h1{font-family:var(--font-heading);font-weight:400;font-size:34px;line-height:1.1;margin-top:8px}
.cnx-h1 span,.cnx-h1-mdp span{font-style:italic;color:var(--color-accent-700)}
.cnx-lead{font-size:13px;color:var(--color-neutral-600);margin-top:8px;line-height:1.6}
.cnx-filet{margin:18px 0 20px}
.cnx-form{display:flex;flex-direction:column;gap:14px}
.cnx-ligne{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cnx-remember{position:relative;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--color-neutral-700);cursor:pointer}
.cnx-oubli{font-size:12.5px}
.cnx-sep{display:flex;align-items:center;gap:14px;margin:18px 0}
.cnx-sep > i{display:block;flex:1;height:1px;background:var(--color-divider)}
.cnx-sep > span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-neutral-500)}
.cnx-new{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.cnx-new-txt{font-size:12.5px;line-height:1.55;color:var(--color-neutral-700)}
.cnx-new .btn{white-space:nowrap}
.cnx-lbl-m{display:none}

/* Vue mot de passe oublie */
.cnx-h1-mdp{font-family:var(--font-heading);font-weight:400;font-size:40px;line-height:1.1;margin-top:10px}
.cnx-lead-mdp{font-size:13.5px;color:var(--color-neutral-600);margin-top:10px;line-height:1.6}
.cnx-filet-mdp{margin:24px 0 26px}
.cnx-form-mdp{display:flex;flex-direction:column;gap:18px}
.cnx-envoye{border:1px solid var(--color-accent);padding:22px 24px}
.cnx-envoye-txt{font-size:13.5px;line-height:1.65;color:var(--color-neutral-800);margin-top:10px}
.cnx-retour{font-size:13px;display:inline-block}
.cnx-envoye .cnx-retour{margin-top:14px}

/* Emplacement photo : rayures diagonales + libelle monospace capitales */
.slot{position:absolute;inset:0;background:var(--color-neutral-100);border:1px solid var(--color-divider);
  background-image:repeating-linear-gradient(45deg,transparent 0 9px,rgba(46,44,41,.07) 9px 10px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.slot span{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-neutral-600)}
.cnx-aside .slot{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);
  background-image:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.06) 9px 10px)}
.cnx-aside .slot span{color:color-mix(in srgb, var(--color-bg) 55%, transparent)}

/* Coche bronze */
.check{width:17px;height:17px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer;border:1px solid var(--color-neutral-400);background:transparent;color:transparent;border-radius:2px}
.check-input{position:absolute;opacity:0;width:0;height:0}
.check-input:checked + .check{border:none;background:var(--color-accent);color:#fff}
.check-input:focus-visible + .check{outline:2px solid var(--color-accent);outline-offset:2px}

/* Message d'erreur */
.msg-err{font-size:12.5px;color:#8a4a3a;border:1px solid #d8b6ab;background:#f9efec;padding:10px 14px;line-height:1.5}

/* ------------------------------------------------------------
   Palier mobile - valeurs exactes de maquette-connexion-mobile
   ------------------------------------------------------------ */
@media (max-width:860px){
  .cnx{flex-direction:column;min-height:100vh}
  .cnx-aside{width:100%;padding:30px 26px 24px}
  .cnx-ghost{left:auto;right:-30px;bottom:-120px;font-size:300px}
  .cnx-sub{font-size:9px;margin-top:10px}
  .cnx-sub-lieu{margin-top:3px}
  .cnx-flex{display:block}
  .cnx-visual{height:150px;margin-top:20px}
  .cnx-meta{margin-top:10px}
  .cnx-meta-lieu{font-size:9px;letter-spacing:.18em}
  .cnx-meta-pack{font-size:13px}
  .cnx-quote{display:none}
  .cnx-contact{display:none}
  .cnx-main{padding:26px 26px 32px;align-items:flex-start}
  .cnx-box{width:100%}
  .cnx-h1{font-size:32px}
  .cnx-lead{display:none}
  .cnx-filet{margin:18px 0 22px}
  .cnx-form{gap:16px}
  .cnx-sep{margin:22px 0}
  .cnx-new{flex-direction:column;align-items:stretch;padding:18px 20px;gap:14px}
  .cnx-new .btn{display:flex;width:100%}
  .cnx-lbl-d{display:none}
  .cnx-lbl-m{display:inline}
  .cnx-h1-mdp{font-size:32px;margin-top:8px}
  .cnx-lead-mdp{font-size:13px;margin-top:8px}
  .cnx-filet-mdp{margin:20px 0 22px}
  .cnx-form-mdp{gap:16px}
  .cnx-envoye{padding:22px 22px}
}
/* ============================================================
   ESPACE CLIENT - colonne charbon (valeurs de maquette-espace-client)
   ============================================================ */
.esp{display:flex;align-items:stretch;min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}
.esp-nav{width:270px;flex:none;background:#33322f;color:var(--color-bg);display:flex;flex-direction:column;padding:42px 32px 32px;position:sticky;top:0;height:100vh;overflow:auto;align-self:flex-start}
body.admin-bar .esp-nav{top:32px;height:calc(100vh - 32px)}
.esp-marque{position:relative}
.esp-ghost{position:absolute;top:-28px;left:-10px;font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:110px;line-height:1;color:var(--color-accent);opacity:.14;pointer-events:none}
.esp-nav .wordmark{font-size:22px;position:relative}
.esp-nav .esp-sur{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;margin-top:10px;position:relative;color:var(--color-accent-400)}
.esp-nav .esp-sur + .esp-sur{margin-top:3px;color:color-mix(in srgb, var(--color-bg) 55%, transparent)}
.esp-filet{height:1px;background:color-mix(in srgb, var(--color-accent) 45%, transparent);margin:30px 0 6px}
.esp-menu{display:flex;flex-direction:column}
.esp-lien{display:flex;align-items:baseline;gap:14px;padding:12px 0;cursor:pointer;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--color-bg) 14%, transparent);
  color:color-mix(in srgb, var(--color-bg) 68%, transparent)}
.esp-lien:hover{color:var(--color-bg)}
.esp-lien i{font-family:var(--font-heading);font-style:italic;font-weight:600;font-size:15px;font-feature-settings:'tnum';
  color:color-mix(in srgb, var(--color-accent) 45%, transparent)}
.esp-lien b{font-weight:inherit;font-size:14px}
.esp-lien.is-actif{border-bottom-color:var(--color-accent-400);color:var(--color-bg)}
.esp-lien.is-actif i{color:var(--color-accent-400)}
.esp-espace{flex:1}
.esp-bas{display:flex;flex-direction:column;gap:16px}
.esp-cite{font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:17px;line-height:1.35;color:color-mix(in srgb, var(--color-bg) 82%, transparent)}
.esp-cta{background:transparent;border:1px solid var(--color-accent-400);color:var(--color-bg);border-radius:var(--radius-sm);
  padding:12px 16px;font-size:13px;font-family:var(--font-body);letter-spacing:.04em;cursor:pointer;text-align:center;text-decoration:none}
.esp-cta:hover{background:color-mix(in srgb, var(--color-accent) 18%, transparent);color:var(--color-bg)}
.esp-contact{font-size:11px;line-height:1.6;color:color-mix(in srgb, var(--color-bg) 50%, transparent)}
.esp-corps{flex:1;min-width:0}
.esp-vue{padding:34px 48px 52px}
@media (max-width:860px){
  .esp{flex-direction:column}
  .esp-nav{width:100%;height:auto;position:static;padding:26px}
  body.admin-bar .esp-nav{top:auto;height:auto}
  .esp-espace{flex:none;height:26px}
  .esp-vue{padding:26px}
}

/* ============================================================
   TABLEAU DE BORD - valeurs de maquette-espace-client.html
   (paliers 960px puis 860px : maquette-espace-client-mobile.html)
   ============================================================ */
.dash-band{background:var(--color-band);color:var(--color-band-text);padding:26px 34px;display:flex;justify-content:space-between;align-items:center;gap:32px;position:relative;overflow:hidden}
.dash-band-num{position:absolute;right:220px;top:-34px;font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:150px;line-height:1;color:#fff;opacity:.18;pointer-events:none;font-feature-settings:'tnum'}
.dash-band-in{position:relative}
.dash-band-kick{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-band-kicker)}
.dash-band-title{font-family:var(--font-heading);font-weight:400;font-size:25px;line-height:1.2;margin-top:6px}
.dash-band-title span{font-style:italic}
.dash-band-cta{position:relative;background:var(--color-charbon);border:1px solid var(--color-charbon);color:#f5f2ea;border-radius:var(--radius-sm);padding:14px 28px;font-size:13.5px;font-family:var(--font-body);letter-spacing:.04em;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.dash-band-cta:hover{background:#454440;color:#f5f2ea}

.dash-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:30px;position:relative}
.dash-tete-txt{position:relative}
.dash-bonjour{font-family:var(--font-heading);font-weight:400;font-size:52px;line-height:1.05;margin-top:10px}
.dash-bonjour span{font-style:italic;color:var(--color-accent-700)}
.dash-compteurs{display:flex;gap:26px;flex:none;font-feature-settings:'tnum';padding-bottom:6px}
.dash-ct{text-align:right}
.dash-ct-n{font-family:var(--font-heading);font-weight:400;font-size:34px;line-height:1}
.dash-ct-l{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-600);margin-top:5px}
.dash-ct-sep{width:1px;background:var(--color-divider)}
.dash-ct-court{display:none}
.dash-filet{margin:26px 0 30px}

.dash-vedette{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
.dash-mosa{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:215px 215px;gap:12px}
.dash-plate{position:relative;background:var(--color-neutral-100);border:1px solid var(--color-divider);overflow:hidden}
.dash-plate-hero{grid-row:span 2}
.dash-img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.dash-panneau{display:flex;flex-direction:column;align-items:flex-start}
.dash-tagline{display:flex;align-items:center;gap:10px}
.dash-date{font-size:12px;color:var(--color-neutral-600)}
.dash-panneau-titre{font-family:var(--font-heading);font-weight:600;font-size:29px;line-height:1.12;margin-top:14px}
.dash-panneau-meta{font-size:12.5px;color:var(--color-neutral-600);margin-top:6px}
.dash-p{font-size:13.5px;line-height:1.65;color:var(--color-neutral-800);margin:14px 0 0;text-wrap:pretty;text-align:justify}
.dash-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.dash-lien{font-size:13px;margin-top:16px}

.dash-hr{margin:36px 0 18px}
.dash-recents{display:flex;justify-content:space-between;align-items:baseline}
.dash-lien-tous{font-size:13px}
.dash-table{margin-top:12px}
.dash-table th{border-bottom:1px solid var(--color-accent)}
.dash-table .ta-d{text-align:right}
.dash-td-bien{font-family:var(--font-heading);font-weight:600;font-size:16px}
.dash-td-det{color:var(--color-neutral-600)}

/* Liste compacte : remplace le tableau au palier mobile */
.dash-liste{display:none;flex-direction:column}
.dash-li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--color-divider);text-decoration:none;color:var(--color-text)}
.dash-li:last-child{border-bottom:0}
.dash-li-t{font-family:var(--font-heading);font-weight:600;font-size:16px;display:block}
.dash-li-s{font-size:11.5px;color:var(--color-neutral-600);margin-top:2px;display:block}

@media (max-width:960px){
  .dash-tete{flex-direction:column;align-items:flex-start;gap:20px}
  .dash-bonjour{font-size:40px}
  .dash-vedette{grid-template-columns:1fr;gap:24px}
  .dash-band{flex-direction:column;align-items:flex-start;gap:16px}
  .dash-band-num{display:none}
}

/* Palier mobile - valeurs exactes de maquette-espace-client-mobile */
@media (max-width:860px){
  .dash-band{padding:18px 20px;margin-bottom:22px;gap:0}
  .dash-band-kick{font-size:9px}
  .dash-band-title{font-size:19px;line-height:1.25;margin-top:5px}
  .dash-band-cta{margin-top:14px;border:none;padding:11px 18px;font-size:13px;width:100%;text-align:center}
  .dash-tete{margin-top:0;gap:0}
  .dash-bonjour{font-size:32px;line-height:1.08;margin-top:8px}
  .dash-compteurs{display:flex;gap:0;margin-top:20px;padding-bottom:0;width:100%;
    border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
  .dash-ct{flex:1;text-align:center;padding:14px 0}
  .dash-ct-n{font-size:26px}
  .dash-ct-l{font-size:8.5px;letter-spacing:.14em;margin-top:4px}
  .dash-ct-long{display:none}
  .dash-ct-court{display:inline}
  .dash-filet{display:none}
  .dash-vedette{margin-top:24px;gap:0}
  .dash-mosa{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:130px 130px;gap:8px}
  .dash-tagline{margin-top:16px}
  .dash-date{font-size:11.5px}
  .dash-panneau-titre{font-size:24px;margin-top:10px}
  .dash-panneau-meta{font-size:12px;margin-top:5px}
  .dash-p{font-size:13px;line-height:1.6;margin:12px 0 0;text-align:left}
  .dash-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
  .dash-actions .btn{display:flex;width:100%}
  .dash-lien{display:none}
  .dash-hr{margin:26px 0 16px}
  .dash-recents{display:block}
  .dash-recents .kicker{margin-bottom:12px;display:block}
  .dash-recents .dash-lien-tous{display:none}
  .dash-table{display:none}
  .dash-liste{display:flex}
}
/* ============================================================
   TABLEAUX & ETIQUETTES (repris de charte/components.css)
   ============================================================ */
.table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-weight:300;font-size:13.5px}
.table th{text-align:left;font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-600);padding:10px 12px;border-bottom:1px solid var(--color-accent)}
.table td{padding:13px 12px;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.table .num{font-feature-settings:'tnum'}

.tag{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 12px;border-radius:2px}
.tag-accent{background:var(--color-accent);color:#fff}
.tag-neutral{background:var(--color-neutral-200);color:var(--color-neutral-800)}
.tag-outline{background:transparent;border:1px solid var(--color-neutral-500);color:var(--color-neutral-700)}

.ff-hr{height:1px;background:var(--color-divider);border:0}

/* ============================================================
   GALERIE DE SELECTION (valeurs de maquette-espace-client)
   ============================================================ */
.gal-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:36px;align-items:start}
.gal-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gal-mini{position:relative;cursor:pointer}
.gal-mini-img{aspect-ratio:4/3;position:relative;overflow:hidden}
.gal-img{width:100%;height:100%;object-fit:cover;display:block}
.gal-ring{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px var(--color-divider)}
.gal-mini.is-sel .gal-ring{box-shadow:inset 0 0 0 2px var(--color-accent)}
.gal-chip{position:absolute;bottom:8px;left:8px;padding:3px 9px;font-size:9.5px;letter-spacing:.08em;font-family:ui-monospace,Menlo,monospace;text-transform:uppercase;background:rgba(46,44,41,.62);color:#fff;pointer-events:none;border-radius:2px}
.gal-ret{position:absolute;bottom:8px;right:8px;padding:3px 9px;font-size:10px;letter-spacing:.06em;cursor:pointer;background:rgba(255,255,255,.9);border:1px solid var(--color-divider);border-radius:2px;color:var(--color-neutral-700);font-family:var(--font-body)}
.gal-mini.is-ret .gal-ret{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}

.gal-panneau{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:22px 22px 24px;display:flex;flex-direction:column;position:sticky;top:16px;background:color-mix(in srgb, var(--color-neutral-100) 60%, transparent)}
.gal-count{font-family:var(--font-heading);font-weight:400;font-size:40px;line-height:1;font-feature-settings:'tnum'}
.gal-progress{height:2px;background:var(--color-neutral-200);margin-top:12px;position:relative;overflow:hidden}
.gal-progress-bar{height:2px;background:var(--color-accent);width:0;transition:width .2s}
.gal-opt{border:1px solid var(--color-divider);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.gal-opt:hover{border-color:var(--color-accent-400)}
.gal-opt.is-active{border:1.5px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 8%, transparent)}
.gal-total{font-family:var(--font-heading);font-weight:600;font-size:21px;font-feature-settings:'tnum'}
@media (max-width:960px){
  .gal-grid{grid-template-columns:1fr;gap:24px}
  .gal-panneau{position:static}
}

/* ============================================================
   MES BIENS - cartes (valeurs de maquette-espace-client)
   ============================================================ */
.biens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.bien-card{display:flex;flex-direction:column}
.bien-plate{position:relative;height:200px;background:var(--color-neutral-100);border:1px solid var(--color-divider);overflow:hidden}
.bien-img{width:100%;height:100%;object-fit:cover;display:block}
.bien-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-700);margin-top:14px}
.bien-title{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.15;margin-top:6px}
.bien-meta{font-size:12.5px;color:var(--color-neutral-600);margin-top:5px}
@media (max-width:860px){ .biens-grid{grid-template-columns:1fr} }

/* ============================================================
   MES COMMANDES - suivi timeline + encart rdv
   ============================================================ */
.cmd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.cmd-timeline{display:flex;flex-direction:column;margin-top:16px}
.cmd-step{display:flex;gap:14px}
.cmd-rail{display:flex;flex-direction:column;align-items:center}
.cmd-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--color-divider);background:transparent;flex:none}
.cmd-dot.is-fait{border-color:var(--color-accent);background:var(--color-accent)}
.cmd-dot.is-encours{border-color:var(--color-accent);background:transparent}
.cmd-line{width:1px;flex:1;background:var(--color-divider);min-height:14px}
.cmd-line.is-fait{background:var(--color-accent)}
.cmd-rdv{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:24px 26px}
@media (max-width:860px){ .cmd-grid{grid-template-columns:1fr} }

/* ============================================================
   TUNNEL DE COMMANDE
   ============================================================ */
.cmdr-steps{display:flex;gap:0;margin-top:24px;border-bottom:1px solid var(--color-divider);flex-wrap:wrap}
.cmdr-step{padding:12px 20px 14px;font-size:13px;color:var(--color-neutral-500);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cmdr-step span{font-feature-settings:'tnum';color:var(--color-accent-700)}
.cmdr-step.is-actif{color:var(--color-text);border-bottom-color:var(--color-accent)}
.cmdr-step.is-done{color:var(--color-neutral-700)}
.cmdr-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:start;margin-top:4px}
.cmdr-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600)}
.cmdr-chip{padding:9px 16px;border:1px solid var(--color-divider);border-radius:var(--radius-sm);font-size:13px;cursor:pointer;transition:border-color .12s,background .12s}
.cmdr-chip:hover{border-color:var(--color-accent-400)}
.cmdr-chip.is-active{border:1.5px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 8%, transparent);font-weight:500}
.cmdr-pack{border:1px solid var(--color-divider);border-radius:var(--radius-sm);padding:16px 18px;cursor:pointer;transition:border-color .12s,background .12s}
.cmdr-pack:hover{border-color:var(--color-accent-400)}
.cmdr-pack.is-active{border:1.5px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 6%, transparent)}
.cmdr-opt{border:1px solid var(--color-divider);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.cmdr-opt:hover{border-color:var(--color-accent-400)}
.cmdr-opt.is-active{border:1.5px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 8%, transparent)}
.cmdr-opt.is-inc{opacity:.7;cursor:default;border-style:dashed}
.cmdr-opt.is-inc:hover{border-color:var(--color-divider)}
.cmdr-slot{padding:8px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-sm);font-size:13px;cursor:pointer;font-feature-settings:'tnum';transition:border-color .12s,background .12s}
.cmdr-slot:hover{border-color:var(--color-accent-400)}
.cmdr-slot.is-active{border:1.5px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 8%, transparent);font-weight:500}
.cmdr-panneau{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:22px 22px 24px;position:sticky;top:16px;background:color-mix(in srgb, var(--color-neutral-100) 60%, transparent)}
textarea.input{resize:vertical;min-height:70px;font-family:var(--font-body)}
@media (max-width:960px){ .cmdr-grid{grid-template-columns:1fr;gap:28px} .cmdr-panneau{position:static} }

/* ============================================================
   BACK-OFFICE (accès photographe)
   ============================================================ */

.bo-badge{margin-left:auto;background:var(--color-accent);color:#fff;font-size:10px;font-weight:500;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-feature-settings:'tnum'}
.esp-lien{position:relative}
.bo-stats{display:flex;gap:26px;flex:none;font-feature-settings:'tnum';padding-bottom:6px}
.bo-tour{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--color-divider);align-items:flex-start}
.bo-heure{font-family:var(--font-heading);font-style:italic;font-weight:600;font-size:19px;color:var(--color-accent-700);width:64px;flex:none;font-feature-settings:'tnum'}
.bo-plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.bo-slot{padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--color-divider);transition:border-color .12s,background .12s}
.bo-slot.is-libre{border-style:dashed;color:var(--color-neutral-500)}
.bo-slot.is-libre:hover{border-color:var(--color-accent-400);color:var(--color-accent-700)}
.bo-slot.is-pris{background:color-mix(in srgb, var(--color-accent) 8%, transparent);border-color:var(--color-accent-400);color:var(--color-accent-800)}
.bo-slot.is-bloque{background:var(--color-neutral-100);color:var(--color-neutral-500);border-style:dotted}
.bo-ret{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--color-divider);align-items:flex-start}
.bo-ret-vign{width:86px;height:60px;flex:none;background:repeating-linear-gradient(45deg,var(--color-neutral-200),var(--color-neutral-200) 8px,var(--color-neutral-100) 8px,var(--color-neutral-100) 16px);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:center;padding:0 4px}
.bo-ret-vign span{font-family:ui-monospace,Menlo,monospace;font-size:8px;letter-spacing:.08em;color:var(--color-neutral-600);text-align:center}
@media (max-width:960px){ .bo-plan{grid-template-columns:1fr 1fr} .bo-stats{flex-wrap:wrap;gap:16px} }

/* ============================================================
   ATELIER - ecran de livraison
   ============================================================ */
.liv-ok{font-size:12.5px;color:var(--color-accent-800);border:1px solid var(--color-accent);background:var(--color-accent-100);padding:10px 14px;line-height:1.5;margin-bottom:18px}
.liv-choix{max-width:560px;margin-top:4px}
.liv-etat{display:flex;gap:0;margin-top:26px;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.liv-etat > div{flex:1;padding:14px 0}
.liv-lbl{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-600)}
.liv-etat b{display:block;font-family:var(--font-heading);font-weight:400;font-size:20px;margin-top:5px}
.liv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:30px;align-items:start}
.liv-bloc{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:20px 22px 22px}
.liv-aide{font-size:12px;line-height:1.55;color:var(--color-neutral-600);margin:8px 0 14px}
.liv-champ{margin-bottom:12px}
.liv-btn{margin-top:14px}
.liv-titre{margin-top:36px;display:block}
.liv-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}
.liv-vign{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--color-divider);background:var(--color-neutral-100)}
.liv-vign img{width:100%;height:100%;object-fit:cover;display:block}
.liv-final{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:20px 22px 22px;margin-top:36px}
@media (max-width:860px){
  .liv-cols{grid-template-columns:1fr;gap:22px}
  .liv-etat{flex-wrap:wrap}
  .liv-etat > div{flex:1 1 50%}
  .liv-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.dash-vide{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:30px 32px 32px;margin-top:30px;max-width:620px}
.dash-vide-t{font-family:var(--font-heading);font-weight:400;font-size:30px;line-height:1.12;margin-top:8px}
.dash-vide-t span{font-style:italic;color:var(--color-accent-700)}
.dash-vide-p{font-size:13.5px;line-height:1.65;color:var(--color-neutral-700);margin:12px 0 0}
.dash-vide .dash-actions{margin-top:20px}
@media (max-width:860px){ .dash-vide{padding:22px 20px 24px} .dash-vide-t{font-size:24px} }


/* ============================================================
   IDENTIFICATION DES ECRANS
   Espace client : colonne charbon, corps blanc, aucun bandeau
   Atelier       : meme colonne charbon + un bandeau colore PAR ECRAN
                   01 Poste de travail = charbon
                   02 Livraison        = bronze (#ad9f7c)
   ============================================================ */

/* Bandeau d ecran - structure commune */
.esp-ban{display:flex;align-items:center;gap:24px;padding:26px 48px;position:relative;overflow:hidden}
.esp-ban-num{font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:74px;line-height:.85;flex:none;margin:-8px 0 -14px;font-feature-settings:'tnum'}
.esp-ban-txt{flex:1;min-width:0}
.esp-ban-k{font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.esp-ban-h{font-family:var(--font-heading);font-weight:400;font-size:40px;line-height:1.05;margin-top:4px}
.esp-ban-cote{flex:none;text-align:right;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.8}

/* 01 - Poste de travail : charbon */
.esp-ban-charbon{background:var(--color-charbon);color:var(--text-on-dark)}
.esp-ban-charbon .esp-ban-num{color:var(--color-accent);opacity:.5}
.esp-ban-charbon .esp-ban-k{color:var(--color-accent-300)}
.esp-ban-charbon .esp-ban-cote{color:color-mix(in srgb, var(--color-bg) 45%, transparent)}

/* 02 - Livraison : bronze plein (aplat autorise par la charte) */
.esp-ban-bronze{background:var(--color-band);color:var(--color-band-text)}
.esp-ban-bronze .esp-ban-num{color:#fff;opacity:.45}
.esp-ban-bronze .esp-ban-k{color:var(--color-band-kicker)}
.esp-ban-bronze .esp-ban-cote{color:color-mix(in srgb, #fff 55%, transparent)}

/* Rappel quand le photographe passe cote client */
.esp-ban-client{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--color-accent-100);border-bottom:2px solid var(--color-accent);padding:20px 48px}
.esp-ban-client .esp-ban-k{color:var(--color-accent-800)}
.esp-ban-h2{font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.1;margin-top:4px;color:var(--color-accent-900)}
.esp-ban-h2 span{font-style:italic;color:var(--color-accent-700)}
.esp-ban-client .btn{flex:none;white-space:nowrap;background:var(--color-bg)}

@media (max-width:860px){
  .esp-ban{padding:18px 26px;gap:14px}
  .esp-ban-num{font-size:50px;margin:-6px 0 -10px}
  .esp-ban-h{font-size:26px}
  .esp-ban-cote{display:none}
  .esp-ban-client{padding:16px 26px;flex-direction:column;align-items:flex-start;gap:12px}
  .esp-ban-h2{font-size:21px}
}

.gal-dl-note{font-size:11px;line-height:1.55;color:var(--color-neutral-600);margin-top:-2px}

/* Table de montage - ordre des apercus (atelier) */
.liv-montage-tete{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:36px}
.liv-montage-h{font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.15;margin-top:5px}
.liv-montage-etat{font-size:11px;color:var(--color-neutral-600);min-height:14px;text-align:right}
.liv-montage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.mon-item{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--color-divider);background:var(--color-neutral-100);cursor:grab}
.mon-item img{width:100%;height:100%;object-fit:cover;display:block}
.mon-item.is-tire{opacity:.35;cursor:grabbing}
.mon-item.is-hero{box-shadow:inset 0 0 0 2px var(--color-accent)}
.mon-num{position:absolute;top:0;left:0;padding:4px 9px;font-family:var(--font-heading);font-style:italic;font-size:14px;background:rgba(46,44,41,.62);color:#fff;font-feature-settings:'tnum'}
.mon-hero-tag{position:absolute;top:0;right:0;display:none;padding:4px 9px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--color-accent);color:#fff}
.mon-item.is-hero .mon-hero-tag{display:block}
.mon-outils{position:absolute;left:0;right:0;bottom:0;display:flex;opacity:0;transition:opacity .12s}
.mon-item:hover .mon-outils{opacity:1}
.mon-outils button{flex:1;border:0;background:rgba(46,44,41,.78);color:#fff;font-size:13px;padding:7px 0;cursor:pointer;font-family:var(--font-body)}
.mon-outils button:hover{background:var(--color-accent)}
@media (max-width:1200px){ .liv-montage{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){ .liv-montage{grid-template-columns:repeat(2,minmax(0,1fr))} .mon-outils{opacity:1} .liv-montage-tete{flex-direction:column;gap:6px} .liv-montage-etat{text-align:left} }

.liv-progres{font-size:11.5px;line-height:1.5;color:var(--color-neutral-600);margin-top:10px;min-height:16px}

/* Choix du reportage a livrer : fiches visuelles */
.liv-choix-h{font-family:var(--font-heading);font-weight:400;font-size:34px;line-height:1.1;margin-top:6px}
.liv-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:26px}
.liv-carte{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);border:1px solid var(--color-divider);border-top:2px solid var(--color-divider);padding:0 0 16px;transition:border-color .15s}
.liv-carte:hover{border-color:var(--color-accent-300);border-top-color:var(--color-accent);color:var(--color-text)}
.liv-carte-img{position:relative;height:190px;overflow:hidden;background:var(--color-neutral-100);border-bottom:1px solid var(--color-divider)}
.liv-carte-img img{width:100%;height:100%;object-fit:cover;display:block}
.liv-carte-nb{position:absolute;bottom:0;left:0;padding:4px 10px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(46,44,41,.66);color:#fff;font-feature-settings:'tnum'}
.liv-carte-tag{padding:16px 18px 0}
.liv-carte-t{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.15;margin-top:10px;padding:0 18px}
.liv-carte-m{font-size:12.5px;color:var(--color-neutral-600);margin-top:4px;padding:0 18px}
.liv-carte-etat{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding:0 18px}
.liv-carte-etat span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:2px;border:1px solid var(--color-divider);color:var(--color-neutral-600)}
.liv-carte-etat .est-ok{border-color:var(--color-accent-300);color:var(--color-accent-800)}
.liv-carte-etat .est-ko{border-style:dashed;border-color:var(--color-neutral-400);color:var(--color-neutral-500)}
.liv-retour{font-size:13px;display:inline-block;margin-top:4px}
@media (max-width:1200px){ .liv-cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} }
@media (max-width:860px){ .liv-cartes{grid-template-columns:1fr} .liv-choix-h{font-size:26px} }

/* Visionneuse plein ecran */
.vis{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(46,44,41,.94);padding:40px 70px}
.vis.est-ouverte{display:flex}
.vis-cadre{margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.vis-cadre img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;display:block}
.vis-cadre figcaption{display:flex;align-items:baseline;gap:16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent-300)}
.vis-cpt{color:color-mix(in srgb, #fff 55%, transparent)}
.vis button{position:absolute;border:1px solid color-mix(in srgb, #fff 28%, transparent);background:transparent;color:#fdfbf6;cursor:pointer;font-family:var(--font-body);line-height:1}
.vis button:hover{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 26%, transparent)}
.vis-f{top:24px;right:28px;width:40px;height:40px;font-size:22px}
.vis-p,.vis-s{top:50%;transform:translateY(-50%);width:44px;height:64px;font-size:26px}
.vis-p{left:16px}
.vis-s{right:16px}
.gal-loupe{position:absolute;top:8px;right:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(46,44,41,.55);color:#fff;font-size:13px;cursor:zoom-in;opacity:0;transition:opacity .12s,background .12s;z-index:2}
.gal-mini:hover .gal-loupe{opacity:1}
.gal-loupe:hover{background:var(--color-accent)}
.dash-plate a[data-vue]{display:block;width:100%;height:100%;cursor:zoom-in}
@media (max-width:860px){ .vis{padding:20px 12px} .vis-p,.vis-s{width:36px;height:52px} .gal-loupe{opacity:1} }

/* ============================================================
   GRILLES JUSTIFIEES - chaque image garde ses proportions
   Rangees a hauteur constante, largeur proportionnelle au ratio.
   Portrait, paysage et carre cohabitent sans aucun recadrage.
   ============================================================ */
.gal-mini-grid{display:flex;flex-wrap:wrap;gap:12px}
.gal-mini{position:relative;cursor:pointer;min-width:0}
.gal-mini-img{position:relative;height:240px;overflow:hidden}
.gal-img{width:100%;height:100%;object-fit:cover;display:block}
.gal-mini .slot{position:absolute;inset:0}

.liv-montage{display:flex;flex-wrap:wrap;gap:10px}
.mon-item{position:relative;margin:0;height:170px;overflow:hidden;border:1px solid var(--color-divider);background:var(--color-neutral-100);cursor:grab;min-width:0}
.mon-item img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:860px){
  .gal-mini-img{height:180px}
  .mon-item{height:130px}
}

/* --- Correctif : neutraliser les anciennes contraintes de format --- */
.gal-mini-grid{display:flex;flex-wrap:wrap;gap:0}
.gal-mini{position:relative;cursor:pointer;min-width:0}
.gal-mini-img{position:relative;aspect-ratio:auto;width:100%;height:240px;overflow:hidden}
.gal-img{width:100%;height:100%;object-fit:cover;display:block}
.gal-ring{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.gal-mini.is-sel .gal-ring{box-shadow:inset 0 0 0 3px var(--color-accent)}

.liv-montage{display:flex;flex-wrap:wrap;gap:0}
.mon-item{position:relative;margin:0;aspect-ratio:auto;height:170px;overflow:hidden;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);background:var(--color-neutral-100);cursor:grab;min-width:0}
.mon-item img{width:100%;height:100%;object-fit:cover;display:block}
.mon-item.is-hero{box-shadow:inset 0 0 0 3px var(--color-accent)}

@media (max-width:860px){
  .gal-mini-img{height:170px}
  .mon-item{height:120px}
}

/* --- Ecart entre les images (rangees justifiees) --- */
.gal-mini-grid{display:flex;flex-wrap:wrap;gap:12px}
.liv-montage{display:flex;flex-wrap:wrap;gap:12px}
.gal-ring{box-shadow:inset 0 0 0 1px rgba(46,44,41,.07)}
.gal-mini.is-sel .gal-ring{box-shadow:inset 0 0 0 3px var(--color-accent)}
.mon-item{box-shadow:inset 0 0 0 1px rgba(46,44,41,.07)}
.mon-item.is-hero{box-shadow:inset 0 0 0 3px var(--color-accent)}
@media (max-width:860px){
  .gal-mini-grid{gap:8px}
  .liv-montage{gap:8px}
}

/* --- Rangees justifiees : la hauteur suit la largeur, aucun rognage --- */
.gal-mini-img{position:relative;width:100%;height:auto;overflow:hidden}
.gal-img{width:100%;height:100%;object-fit:cover;display:block}
.mon-item{height:auto}
.mon-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Surface cliquable : ouvre la visionneuse. Les commandes passent au-dessus. */
.gal-ouvre{position:absolute;inset:0;z-index:1;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.gal-ouvre i{opacity:0;font-style:normal;font-size:20px;color:#fff;width:44px;height:44px;border-radius:50%;background:rgba(46,44,41,.5);display:flex;align-items:center;justify-content:center;transition:opacity .14s}
.gal-mini:hover .gal-ouvre i{opacity:1}
.gal-ret{z-index:3}
.gal-chip{z-index:2}
.gal-ring{z-index:2}

/* --- Selection explicite sur la vignette et dans la visionneuse --- */


/* --- Correctif : la pilule de selection doit recevoir le clic --- */
/* la regle d origine portait pointer-events:none (pastille decorative) */
.gal-ouvre{pointer-events:auto}

/* --- Bouton de selection dans la visionneuse : meme pilule, en haut a gauche --- */
@media (max-width:860px){ .vis-sel{top:14px;left:14px;padding:8px 13px 8px 8px;font-size:10px} }

/* --- Bouton de selection pose sur la photo, en bas a droite --- */
.vis-img{position:relative;display:inline-block;line-height:0;max-width:100%}
.vis-img img{max-width:100%;max-height:calc(100vh - 150px);display:block}
@media (max-width:860px){ .vis-sel{right:10px;bottom:10px;padding:9px 15px 9px 9px;font-size:10px} }

/* --- Pilules de selection : aplats opaques, lisibles sur toute photo --- */
/* Vignette */
/* Visionneuse */

/* ============================================================
   PILULE DE SELECTION - definition unique
   Grille      : aplat charbon, sobre (rendu valide)
   Visionneuse : idem, mais la specificite doit depasser
                 .vis button (fleches et fermeture), sinon
                 le fond transparent de ces boutons l emporte.
   Retenue     : aplat bronze #ad9f7c dans les deux cas.
   ============================================================ */
.gal-check,.vis .vis-sel{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;margin:0;padding:7px 14px 7px 9px;border:0;border-radius:999px;background:#33322f;color:#fdfbf6;cursor:pointer;pointer-events:auto;opacity:1;font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1;box-shadow:0 1px 8px rgba(0,0,0,.3)}
.gal-check{top:10px;left:10px}
.vis .vis-sel{right:18px;bottom:18px;top:auto;left:auto;padding:10px 18px 10px 11px;font-size:11.5px}
.gal-check i,.vis .vis-sel i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid rgba(255,255,255,.75);font-size:10px;color:transparent;background:transparent;flex:none}
.gal-check b,.vis .vis-sel b{font-weight:400}
.vis .vis-sel em{font-style:normal;opacity:.7;font-feature-settings:'tnum'}
.gal-check:hover,.vis .vis-sel:hover{background:#454440}
.gal-mini.is-sel .gal-check,.vis .vis-sel.est-retenue{background:#ad9f7c;color:#fdfbf6}
.gal-mini.is-sel .gal-check i,.vis .vis-sel.est-retenue i{background:#fdfbf6;border-color:#fdfbf6;color:#5a5033}
.vis .vis-sel.est-fige{opacity:.6;cursor:default}
@media (max-width:860px){
  .gal-check{top:7px;left:7px;padding:6px 12px 6px 7px;font-size:10px}
  .vis .vis-sel{right:10px;bottom:10px;padding:9px 15px 9px 9px;font-size:10px}
}

/* --- Cartes de biens : photo et titre cliquables, survol --- */
.bien-plate{display:block;position:relative;height:300px;background:var(--color-neutral-100);border:1px solid var(--color-divider);overflow:hidden}
.bien-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.bien-plate:hover .bien-img{transform:scale(1.04)}
.bien-plate::after{content:"";position:absolute;inset:0;background:var(--color-charbon);opacity:0;transition:opacity .25s;pointer-events:none}
.bien-plate:hover::after{opacity:.12}
.bien-title{display:block;text-decoration:none;color:var(--color-text);transition:color .18s}
.bien-card:hover .bien-title,.bien-title:hover{color:var(--color-accent-700)}
@media (max-width:860px){ .bien-plate{height:220px} }

/* --- Choix de la cliente, vu depuis l atelier --- */
.liv-sel{border:1px solid var(--color-divider);border-top:2px solid var(--color-neutral-400);padding:22px 24px 24px;margin-top:30px}
.liv-sel.est-encours{border-top-color:var(--color-accent-400)}
.liv-sel.est-validee{border-top-color:var(--color-accent)}
.liv-sel.est-verrouille{border-top-color:var(--color-charbon)}
.liv-sel-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.liv-sel-h{font-family:var(--font-heading);font-weight:400;font-size:24px;line-height:1.15;margin-top:5px}
.liv-sel-chiffres{display:flex;gap:26px;flex:none;font-feature-settings:'tnum'}
.liv-sel-chiffres > div{text-align:right}
.liv-sel-chiffres b{display:block;font-family:var(--font-heading);font-weight:400;font-size:24px;line-height:1}
.liv-sel-chiffres span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-600);margin-top:4px}
.liv-sel-grille{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.liv-sel-item{margin:0;width:132px}
.liv-sel-item img{width:100%;height:88px;object-fit:cover;display:block;border:1px solid var(--color-divider)}
.liv-sel-item figcaption{font-size:9.5px;line-height:1.35;color:var(--color-neutral-600);margin-top:5px;word-break:break-all}
.liv-sel-item.est-retouche img{box-shadow:inset 0 0 0 3px var(--color-accent);border-color:var(--color-accent)}
.liv-sel-item.est-retouche figcaption::after{content:" - retouche demandee";color:var(--color-accent-700)}
@media (max-width:860px){ .liv-sel-chiffres{gap:16px} .liv-sel-item{width:104px} }

.dbx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* Bloc Dropbox de l ecran de livraison */
.liv-dbx{border:1px solid var(--color-divider);border-top:2px solid var(--color-accent-400);padding:22px 24px 24px;margin-top:30px}
.liv-dbx code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--color-neutral-100);padding:2px 6px}
.liv-manque{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.7;color:#8a4a3a}
.liv-ok-txt{color:var(--color-accent-800)}

.liv-montage-cote{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.liv-vider{border:1px solid var(--color-neutral-400);background:transparent;color:var(--color-neutral-600);font-family:var(--font-body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer}
.liv-vider:hover{border-color:#c39a8c;color:#8a4a3a}

.liv-progres{font-size:12.5px;line-height:1.5;margin-top:12px;min-height:18px;word-break:break-word}

/* --- Preparation du dossier puis apparition du bouton --- */
.prep{margin-top:4px}
.prep-txt{font-size:11.5px;letter-spacing:.06em;color:var(--color-neutral-700);margin-bottom:8px;font-feature-settings:'tnum'}
.prep-piste{height:3px;background:var(--color-neutral-200);overflow:hidden}
.prep-piste i{display:block;height:100%;width:4%;background:var(--color-accent);transition:width .5s cubic-bezier(.22,.61,.36,1)}

/* Le bouton entre en scene : montee, puis halo bronze qui se dissipe */
@keyframes dlEntree{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes dlHalo{0%{box-shadow:0 0 0 0 rgba(163,146,94,.55)}70%{box-shadow:0 0 0 14px rgba(163,146,94,0)}100%{box-shadow:0 0 0 0 rgba(163,146,94,0)}}
.dl-pret.est-apparu{animation:dlEntree .45s cubic-bezier(.22,.61,.36,1), dlHalo 1.6s ease-out .45s 3}
@media (prefers-reduced-motion:reduce){ .dl-pret.est-apparu{animation:none} .prep-piste i{transition:none} }

.liv-rouvrir{margin:14px 0 10px}

.liv-sel-tete{align-items:center}
.liv-sel-tete .liv-rouvrir{margin:0 0 0 auto}

/* Photos deja livrees : acquises, non retirables */
.gal-mini.est-acquise{cursor:default}
.gal-mini.est-acquise .gal-check{background:var(--color-charbon);cursor:default}
.gal-mini.est-acquise .gal-check i{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.gal-mini.est-acquise .gal-ring{box-shadow:inset 0 0 0 3px var(--color-charbon)}
.vis .vis-sel.est-acquise{background:var(--color-charbon);cursor:default}
.vis .vis-sel.est-acquise i{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* Pack incomplet : le bouton attend, le message explique */
.gal-manque{font-size:12px;line-height:1.55;color:var(--color-accent-800);background:var(--color-accent-100);border-left:2px solid var(--color-accent);padding:10px 12px;margin-top:12px}
.btn.est-inactif{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Retour de paiement */
.pay-ok{font-size:13px;line-height:1.6;color:var(--color-accent-900);background:var(--color-accent-100);border-left:2px solid var(--color-accent);padding:14px 16px;margin-bottom:22px}
.pay-info{font-size:13px;line-height:1.6;color:var(--color-neutral-700);border-left:2px solid var(--color-neutral-400);padding:14px 16px;margin-bottom:22px}
.pay-attente{font-size:11.5px;color:var(--color-neutral-600);margin-top:8px}

/* ============================================================
   L attribut hidden doit toujours l emporter.
   Sans cette regle, .btn-block{display:flex} rend visibles des
   elements explicitement marques masques.
   ============================================================ */
[hidden]{display:none!important}

/* Etat financier visible par la cliente */
.dash-argent{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:12px 14px;border-left:2px solid var(--color-accent);background:var(--color-accent-100)}
.dash-argent-l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-800)}
.dash-argent-s{font-size:12px;color:var(--color-neutral-700)}
.dash-argent-p{font-size:12.5px;color:var(--color-accent-900);margin-top:4px}
.gal-regle{font-size:12px;line-height:1.6;color:var(--color-accent-900);background:var(--color-accent-100);border-left:2px solid var(--color-accent);padding:10px 12px;margin-top:12px}

/* Montant du reportage en vedette, lisible de loin */
.dash-facture{margin-top:16px;padding:16px 18px;border:1px solid var(--color-divider);border-left:3px solid var(--color-accent)}
.dash-facture-k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-700)}
.dash-facture-n{font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.15;margin-top:6px;font-feature-settings:'tnum'}
.dash-facture-n b{font-weight:400;font-style:italic;color:var(--color-accent-700)}
.dash-facture-d{font-size:12px;line-height:1.55;color:var(--color-neutral-600);margin-top:6px}
.dash-ct-euro .dash-ct-n{color:var(--color-accent-700)}
@media (max-width:860px){ .dash-facture{padding:13px 14px} .dash-facture-n{font-size:21px} }

/* Bandeau de recuperation du dossier, toujours visible une fois livre */
.gal-recup{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;border:1px solid var(--color-divider);border-left:3px solid var(--color-accent);background:var(--color-accent-100);padding:22px 26px;margin-bottom:26px}
.gal-recup-h{font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.15;margin-top:5px;color:var(--color-accent-900)}
.gal-recup-s{font-size:12.5px;line-height:1.55;color:var(--color-neutral-700);margin-top:6px;max-width:520px}
.gal-recup-btn{flex:none;white-space:nowrap;padding:15px 30px;font-size:14px}
@media (max-width:860px){ .gal-recup{padding:18px 18px;gap:16px} .gal-recup-h{font-size:21px} .gal-recup-btn{width:100%;display:flex;justify-content:center} }

.cnx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}