/* ═══ MES FACTURES — marbre lumineux, or de la maison, lecture en Inter ═══ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/cormorant.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(polices/cormorant-italique.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;src:url(polices/inter.woff2) format('woff2')}

:root{
  --encre:#2b1f0e; --encre-douce:#5b4a33; --encre-pale:#8a7658;
  --or-1:#F4D58A; --or-2:#E8C078; --or-3:#C9A253; --or-4:#A07840;
  --filet:rgba(160,120,64,.38); --filet-fort:rgba(160,120,64,.6);
  --carte:rgba(255,253,248,.86); --carte-pleine:#fffdf8;
  --vert:#3f7a4f; --vert-fond:rgba(63,122,79,.1);
  --ambre:#9a6412; --ambre-fond:rgba(214,152,36,.13);
  --terre:#9b4a2f; --terre-fond:rgba(155,74,47,.1);
  --ombre:0 1px 2px rgba(74,48,12,.06),0 8px 28px -10px rgba(74,48,12,.22);
  --rayon:18px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{background:linear-gradient(180deg,#fffdf8,#fdfaf2 40%,#f4ecda);min-height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:transparent;color:var(--encre);font:400 17px/1.55 var(--sans);
  font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(marbre.webp) center/cover no-repeat;
  filter:contrast(1.16) saturate(1.12);background-attachment:scroll}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,253,248,.30),rgba(255,252,245,.52))}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.cache{display:none!important}
:focus-visible{outline:2px solid var(--or-4);outline-offset:3px;border-radius:6px}

/* ── En-tête ── */
.tete{display:flex;align-items:center;gap:14px;padding:22px 20px 6px;max-width:1180px;margin:0 auto}
.tete .logo{width:52px;height:52px;background:url(logo.png) center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(120,80,10,.28));flex:none}
.tete h1{font:600 31px/1.05 var(--serif);margin:0;letter-spacing:.2px}
.tete .sous{font-size:14.5px;color:var(--encre-douce);margin-top:3px}
.tete .droite{margin-left:auto}
main{max-width:1180px;margin:0 auto;padding:10px 16px 120px}

/* ── Boutons : le favori « L'Affilié » ── */
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;text-decoration:none;
  font:500 21px/1.15 var(--serif);letter-spacing:.2px;color:#3a2708;padding:18px 30px;border-radius:16px;
  border:1px solid rgba(160,120,64,.55);font-variant-numeric:lining-nums;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 26px rgba(74,48,12,.18),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 1px rgba(60,40,4,.12);transition:transform .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
.g-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(74,48,12,.16),0 16px 34px rgba(74,48,12,.24),inset 0 1px 0 rgba(255,255,255,.6)}
.g-btn:active{transform:translateY(0)}
.g-btn svg{width:26px;height:26px;flex:none}
.g-btn.creux{font:600 16px/1.2 var(--sans);color:#4a3520;padding:15px 22px;
  background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88));border-color:rgba(160,120,64,.45);
  box-shadow:0 1px 3px rgba(74,48,12,.08),0 6px 16px -6px rgba(74,48,12,.16);text-shadow:none}
.g-btn.creux svg{width:21px;height:21px}
.g-btn.petit{font-size:15px;padding:10px 16px;border-radius:12px}
.g-btn.nu{background:none;border:none;box-shadow:none;font:600 15px var(--sans);color:var(--encre-douce);padding:10px 12px}
.g-btn.nu:hover{color:var(--encre);transform:none}
.g-btn.grave{background:var(--terre-fond);border-color:rgba(155,74,47,.35);color:var(--terre);box-shadow:none;font:600 15px var(--sans)}
.g-btn[disabled]{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Cartes, pastilles, tuiles ── */
.carte{background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);box-shadow:var(--ombre);
  backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}
.pastille{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--sans);letter-spacing:.2px;
  padding:6px 10px;border-radius:999px;background:rgba(201,162,83,.14);color:#6b4f1e;border:1px solid rgba(160,120,64,.25);white-space:nowrap}
.pastille.vert{background:var(--vert-fond);color:var(--vert);border-color:rgba(63,122,79,.25)}
.pastille.ambre{background:var(--ambre-fond);color:var(--ambre);border-color:rgba(214,152,36,.3)}
.pastille.terre{background:var(--terre-fond);color:var(--terre);border-color:rgba(155,74,47,.28)}
.pastille.lecture{background:rgba(255,255,255,.7);color:var(--encre-douce)}
.pastille.lecture::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or-3);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.tuile{padding:14px 14px 12px;text-align:left}
.tuile .v{font:600 27px/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.tuile .l{font-size:13px;color:var(--encre-douce);margin-top:3px}

/* ── Onglets des mois (segmenté) ── */
.mois{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mois::-webkit-scrollbar{display:none}
.mois button{flex:none;border:1px solid var(--filet);background:rgba(255,253,248,.8);border-radius:999px;
  padding:9px 16px;font:600 14.5px var(--sans);color:var(--encre-douce);cursor:pointer}
.mois button[aria-pressed=true]{background:linear-gradient(135deg,#F4D58A,#E8C078 42%,#C9A253 72%,#A07840);color:#3a2708;border-color:rgba(160,120,64,.55)}

/* ── Liste des pièces ── */
.titre-section{font:600 23px/1.2 var(--serif);margin:22px 4px 10px;display:flex;align-items:baseline;gap:10px}
.titre-section small{font:500 14px var(--sans);color:var(--encre-pale)}
.pieces{display:grid;gap:10px}
.piece{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"mini qui montant" "mini etiq etiq";column-gap:14px;row-gap:8px;align-items:start;padding:12px;cursor:pointer;text-align:left;width:100%;
  transition:transform .15s ease}
.piece:active{transform:scale(.99)}
.piece .mini{grid-area:mini;align-self:center;width:64px;height:80px;border-radius:10px;background:#f3ead8 center/cover no-repeat;border:1px solid var(--filet);overflow:hidden}
.piece .mini img{width:100%;height:100%;object-fit:cover}
.piece .corps{grid-area:qui}
.piece .qui{font:600 17px/1.25 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.piece .quoi{font-size:14px;color:var(--encre-douce);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.piece .etiquettes{grid-area:etiq;display:flex;gap:6px;flex-wrap:wrap}
.piece .montant{grid-area:montant;font:600 21px/1 var(--serif);text-align:right;white-space:nowrap;padding-top:2px}
.piece .montant small{display:block;font:500 12.5px var(--sans);color:var(--encre-pale);margin-top:5px}
.piece>div{min-width:0}
.vide{text-align:center;padding:40px 24px;color:var(--encre-douce)}
.vide .grand{font:600 26px/1.2 var(--serif);color:var(--encre);margin-bottom:8px}

/* ── Feuille (bottom sheet / fenêtre) ── */
.voile{position:fixed;inset:0;background:rgba(43,31,14,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;animation:apparaitre .2s ease}
@keyframes apparaitre{from{opacity:0}}
.feuille{width:100%;max-width:760px;max-height:94vh;overflow:auto;border-radius:24px 24px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(255,253,248,.93),rgba(255,251,243,.96)),url(marbre.webp) center/cover,#fdfaf2;
  box-shadow:0 -10px 40px rgba(43,31,14,.25);animation:monter .26s cubic-bezier(.2,.8,.2,1)}
@keyframes monter{from{transform:translateY(40px);opacity:.4}}
@media (min-width:800px){.voile{align-items:center}.feuille{border-radius:24px}}
.poignee{width:44px;height:5px;border-radius:5px;background:rgba(120,90,40,.3);margin:0 auto 12px}
.feuille-tete{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.feuille-tete h2{font:600 26px/1.15 var(--serif);margin:0;flex:1;min-width:0}
.fermer{width:44px;height:44px;border-radius:50%;border:1px solid var(--filet);background:rgba(255,255,255,.8);display:grid;place-items:center;cursor:pointer;flex:none}
.fermer svg{width:18px;height:18px}
.apercu{border-radius:14px;overflow:hidden;border:1px solid var(--filet);background:#f3ead8;margin-bottom:14px}
.apercu img{width:100%;max-height:56vh;object-fit:contain;background:#efe6d3}
.apercu iframe{width:100%;height:60vh;border:0;background:#fff}
.alerte{border-radius:12px;padding:12px 14px;font-size:15px;margin-bottom:14px;background:var(--ambre-fond);color:#6d4709;border:1px solid rgba(214,152,36,.3)}
.alerte.terre{background:var(--terre-fond);color:var(--terre);border-color:rgba(155,74,47,.28)}

.champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.champ{display:flex;flex-direction:column;gap:5px}
.champ.large{grid-column:1/-1}
.champ label{font:600 13px var(--sans);color:var(--encre-douce);letter-spacing:.2px}
.champ input,.champ select,.champ textarea{border:1px solid var(--filet);background:rgba(255,255,255,.9);border-radius:12px;padding:12px 13px;
  font-size:17px;min-height:48px;width:100%}
.champ textarea{min-height:76px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--or-4);box-shadow:0 0 0 3px rgba(201,162,83,.22)}
.bascule{display:flex;align-items:center;gap:10px;font-size:15.5px;padding:6px 0;cursor:pointer}
.bascule input{width:22px;height:22px;accent-color:var(--or-4)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.actions .g-btn{flex:1 1 auto}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;
  background:#2b1f0e;color:#fdf5e2;padding:13px 18px;border-radius:14px;font:500 15.5px var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:calc(100% - 32px);animation:apparaitre .2s ease}

@media (max-width:600px){
  .tete h1{font-size:28px}
  .tuile .v{font-size:23px}
  .champs{grid-template-columns:1fr}
  .actions .g-btn{width:100%}
}

/* ── Le dépôt (espace de Maha) ── */
.depot{padding:22px 18px 18px;display:flex;flex-direction:column;gap:12px}
.depot-titre{font:600 24px/1.2 var(--serif);margin:0 0 2px;text-align:center}
.depot .g-btn{width:100%}
.depot .grand-appel{padding:22px 18px;font-size:22.5px;border-radius:18px;white-space:nowrap}
.depot .grand-appel svg{width:32px;height:32px}
.depot-note{font-size:14.5px;color:var(--encre-douce);margin:2px 4px 0;text-align:center;line-height:1.5}
.envois{display:grid;gap:8px}
.envoi{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--filet)}
.envoi .vig{width:44px;height:54px;border-radius:8px;background:#f3ead8 center/cover no-repeat;display:grid;place-items:center}
.envoi .vig svg{width:24px;height:24px}
.envoi .nom{font:600 14.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.envoi .etat{font-size:13.5px;color:var(--encre-douce)}
.envoi .etat.ok{color:var(--vert)} .envoi .etat.ko{color:var(--terre)}
.barre{height:5px;border-radius:5px;background:rgba(160,120,64,.15);overflow:hidden;margin-top:6px}
.barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--or-2),var(--or-4));transition:width .2s}
.envoi>div{min-width:0}
.cabinet{padding:6px 18px 14px;margin-top:26px}
.cabinet p{color:var(--encre-douce);font-size:15.5px;margin:0 4px}
.cabinet .g-btn.nu{margin-top:6px;font-size:13.5px;font-weight:500;color:var(--encre-pale)}
.alerte.vert{background:var(--vert-fond);color:var(--vert);border-color:rgba(63,122,79,.25)}

/* ── L'espace du cabinet ── */
.filtres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:16px;margin-top:8px}
.filtres .champ input,.filtres .champ select{min-height:46px;font-size:16px}
.tuiles.quatre{grid-template-columns:repeat(4,1fr)}
.barre-export{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 16px}
.barre-export .aide{flex-basis:100%;font-size:14px;color:var(--encre-douce);margin:4px 4px 0;max-width:820px}
.tableau{padding:6px 0;overflow:hidden}
.ligne{display:grid;grid-template-columns:108px minmax(0,1.6fr) minmax(0,1.3fr) 92px 82px 100px 172px 44px;gap:12px;align-items:center;
  padding:12px 18px;border-top:1px solid rgba(160,120,64,.16);cursor:pointer;text-align:left;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font-size:15.5px}
.ligne:hover{background:rgba(244,213,138,.12)}
.ligne.entete{border-top:0;cursor:default;font:600 12.5px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--encre-pale);padding-top:10px;padding-bottom:10px}
.ligne.entete:hover{background:none}
.ligne .n{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.ligne .f{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .f small{display:block;font-weight:400;color:var(--encre-pale);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.ligne .r{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--encre-douce)}
.ligne .r small{display:block;font-size:12.5px;color:var(--encre-pale)}
.ligne .e{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.ligne .dl{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--encre-douce);border:1px solid transparent}
.ligne .dl:hover{border-color:var(--filet);background:rgba(255,255,255,.8);color:var(--encre)}
.ligne .dl svg{width:20px;height:20px}
.ligne.sous-total{cursor:default;background:rgba(201,162,83,.08);font:600 15px var(--sans)}
.ligne.sous-total span:first-child{grid-column:1/4;font:600 19px var(--serif)}
.tableau .vide{padding:34px 18px;text-align:center;color:var(--encre-douce)}
.fiche-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:0 0 16px}
.fiche-infos div{font-size:15.5px}
.fiche-infos b{display:block;font:600 12.5px var(--sans);color:var(--encre-pale);letter-spacing:.3px;text-transform:uppercase;margin-bottom:2px}
@media (max-width:980px){
  .ligne{grid-template-columns:82px minmax(0,1fr) 96px 40px;gap:10px;padding:12px 14px}
  .ligne .r,.ligne .ht,.ligne .tv,.ligne.entete .r,.ligne.entete .ht,.ligne.entete .tv{display:none}
  .ligne .e{grid-column:2/4;order:9}
  .ligne.entete .e{display:none}
  .ligne.sous-total span:first-child{grid-column:1/3}
}
@media (max-width:600px){ .tuiles.quatre{grid-template-columns:repeat(2,1fr)} .barre-export .g-btn{width:100%} }

.apercu .ouvrir-pdf{display:flex;justify-content:center;padding:10px;border-top:1px solid var(--filet);background:rgba(255,255,255,.75);font:600 15px var(--sans);color:var(--encre-douce);text-decoration:none}
.ligne .dm{display:none}
@media (max-width:600px){
  .ligne{grid-template-columns:minmax(0,1fr) auto 40px}
  .ligne .d{display:none}
  .ligne .dm{display:inline}
  .ligne .f{white-space:normal}
  .ligne .f small{white-space:nowrap}
  .ligne .e{grid-column:1/3}
  .ligne.sous-total span:first-child{grid-column:1/2}
  .filtres{grid-template-columns:1fr}
  .filtres .recherche{grid-column:1/-1}
}

/* ── Secteurs, cartes, dossier réseau (v1.1) ── */
.pastille.secteur{background:rgba(74,53,32,.07);color:var(--encre);border-color:rgba(74,53,32,.18)}
.choix-secteur{display:flex;flex-direction:column;gap:8px}
.choix-secteur .etiq{font:600 13.5px var(--sans);color:var(--encre-douce);text-align:center}
.puces{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.puces::-webkit-scrollbar{display:none}
.puces button{flex:none;border:1px solid var(--filet);background:rgba(255,253,248,.85);border-radius:999px;padding:9px 15px;
  font:600 14px var(--sans);color:var(--encre-douce);cursor:pointer;min-height:40px}
.puces button[aria-pressed=true]{background:linear-gradient(135deg,#F4D58A,#E8C078 42%,#C9A253 72%,#A07840);color:#3a2708;border-color:rgba(160,120,64,.55)}
.depot .puces{justify-content:flex-start}
@media (min-width:601px){.depot .puces{flex-wrap:wrap;justify-content:center}}
.bouton-rond{width:46px;height:46px;border-radius:50%;border:1px solid var(--filet);background:rgba(255,253,248,.85);display:grid;place-items:center;cursor:pointer;color:var(--encre-douce);box-shadow:0 2px 8px -3px rgba(74,48,12,.2)}
.bouton-rond svg{width:22px;height:22px}
.jumelle{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;font-size:15px}
.reseau{display:grid;gap:10px;margin:12px 4px 4px}
.reseau .ident{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;background:rgba(255,255,255,.75);border:1px solid var(--filet);border-radius:14px;padding:12px 14px}
.reseau .ident b{font:600 12.5px var(--sans);color:var(--encre-pale);text-transform:uppercase;letter-spacing:.3px}
.reseau .ident code{font:500 15.5px/1.3 ui-monospace,'SF Mono',Menlo,monospace;word-break:break-all;color:var(--encre)}
.reseau .ident button{border:1px solid var(--filet);background:#fff;border-radius:10px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--encre-douce)}
.reseau .ident button svg{width:18px;height:18px}
.reseau details{background:rgba(255,255,255,.6);border:1px solid var(--filet);border-radius:14px;padding:12px 14px;font-size:15px}
.reseau summary{font-weight:600;cursor:pointer}
.reseau ol{margin:8px 0 0;padding-left:20px;color:var(--encre-douce)}
.reseau li{margin:4px 0}
.reglage-ligne{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid rgba(160,120,64,.16)}
.reglage-ligne input[type=text]{border:1px solid var(--filet);background:rgba(255,255,255,.9);border-radius:10px;padding:10px 12px;font-size:16px;width:100%;min-height:44px}
.reglage-ligne .petit-texte{font-size:13px;color:var(--encre-pale);grid-column:1/-1;margin-top:-2px}
.reglages h3{font:600 21px var(--serif);margin:18px 0 4px}
.reglages p.aide{font-size:14.5px;color:var(--encre-douce);margin:0 0 6px}
.nouveau{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.nouveau input{border:1px solid var(--filet);background:#fff;border-radius:10px;padding:10px 12px;font-size:16px;min-height:44px;width:100%}
.ligne .s{display:block;font-size:12.5px;color:var(--encre-pale)}
.ligne.justif{opacity:.72}
.aide-reseau{font-size:14.5px;color:var(--encre-douce);margin:0 2px}
@media (max-width:600px){
  .reseau .ident{grid-template-columns:1fr auto;row-gap:2px}
  .reseau .ident b{grid-column:1/-1;margin-top:8px}
  .reseau .ident b:first-child{margin-top:0}
}