/* Créa'tech Facturation — deux thèmes : « Néon » (par défaut) et « Créa'Tech » (couleurs du logo) */
:root {
  /* Thème Néon : cyan et violet */
  --fond: #060a14;
  --fond-2: #0b1222;
  --verre-rgb: 16, 26, 48;
  --verre: rgba(var(--verre-rgb), 0.72);
  --creux-rgb: 6, 10, 20;
  --panneau-rgb: 8, 13, 26;
  --ligne-rgb: 56, 189, 248;
  --accent-rgb: 34, 211, 238;
  --second-rgb: 139, 92, 246;
  --bord: rgba(var(--ligne-rgb), 0.18);
  --bord-fort: rgba(var(--ligne-rgb), 0.5);
  --texte: #e2e8f0;
  --texte-doux: #8fa3bf;
  --cyan: #22d3ee;            /* couleur d'accent principale */
  --violet: #8b5cf6;          /* couleur secondaire */
  --second-clair: #c4b5fd;
  --accent-clair: #cffafe;
  --sur-accent: #04121a;      /* texte posé sur l'accent */
  --halo-1: #10204a;
  --halo-2: #2a1050;
  --fond-sugg: #0d1529;
  --degrade: linear-gradient(90deg, var(--cyan), var(--violet));
  --degrade-valider: linear-gradient(90deg, #34d399, var(--cyan));
  --rouge: #f43f5e;
  --vert: #34d399;
  --lueur: 0 0 24px rgba(var(--accent-rgb), 0.25);
  --rayon: 14px;
  --police-titre: "Orbitron", "Segoe UI", sans-serif;
  --police: "Exo 2", "Segoe UI", system-ui, sans-serif;
}

/* Thème Créa'Tech : orange, bleu marine et reflets chromés */
html[data-theme="createch"] {
  --fond: #050a16;
  --fond-2: #0a1428;
  --verre-rgb: 13, 24, 47;
  --creux-rgb: 4, 9, 20;
  --panneau-rgb: 7, 14, 30;
  --ligne-rgb: 150, 172, 205;
  --accent-rgb: 255, 122, 26;
  --second-rgb: 66, 121, 255;
  --texte: #eef2f8;
  --texte-doux: #9eabbf;
  --cyan: #ff7a1a;
  --violet: #4279ff;
  --second-clair: #a9c3ff;
  --accent-clair: #ffe1c7;
  --sur-accent: #1c0d02;
  --halo-1: #10275c;
  --halo-2: #3b1a06;
  --fond-sugg: #0b1630;
  --degrade: linear-gradient(90deg, #ff6a00, #ffa04a);
  --degrade-valider: linear-gradient(90deg, #34d399, #6ee7b7);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 20% 0%, var(--halo-1) 0%, transparent 55%),
              radial-gradient(ellipse at 100% 100%, var(--halo-2) 0%, transparent 50%),
              var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
}
.grille {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(var(--ligne-rgb), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ligne-rgb), .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
a { color: var(--cyan); }
h1, h2 { font-family: var(--police-titre); letter-spacing: .04em; font-weight: 700; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1rem; margin: 0 0 1rem; color: var(--cyan); text-transform: uppercase; }
.petit { font-size: .85rem; color: var(--texte-doux); }
.aide { color: var(--texte-doux); margin: 0 0 1.25rem; }
.centre { text-align: center; }

/* ---------- Logo */
.logo-noyau {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: conic-gradient(from 210deg, var(--cyan), var(--violet), var(--cyan));
  box-shadow: var(--lueur); position: relative;
}
.logo-noyau::after {
  content: ""; position: absolute; inset: 7px; border-radius: 5px; background: var(--fond);
  box-shadow: inset 0 0 8px rgba(var(--accent-rgb), .6);
}
.logo-titre { font-family: var(--police-titre); font-weight: 700; letter-spacing: .12em; }
.logo-sous { font-size: .75rem; color: var(--texte-doux); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Pages publiques (connexion) */
body.public { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh; }
.carte-auth {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--verre); backdrop-filter: blur(14px);
  border: 1px solid var(--bord); border-radius: 20px; padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), var(--lueur);
}
.carte-auth::before {
  content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.logo-auth { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.logo-auth .logo-noyau { width: 46px; height: 46px; }
.logo-auth .logo-noyau::after { inset: 10px; }
.etapes { color: var(--texte-doux); padding-left: 1.2rem; }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 220px; margin: 16px auto; }
.qr svg { display: block; width: 100%; height: auto; }
.secret { margin-bottom: 16px; color: var(--texte-doux); }
.secret summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.secret code { display: block; word-break: break-all; color: var(--cyan); font-size: 1rem; padding: 8px 0; }

/* ---------- Formulaires (pensés pour le tactile) */
form label { display: block; margin-bottom: 16px; font-size: .9rem; color: var(--texte-doux); }
input, textarea, select {
  display: block; width: 100%; margin-top: 6px; font: inherit; color: var(--texte);
  background: rgba(var(--creux-rgb), .7); border: 1px solid var(--bord); border-radius: 10px;
  padding: 12px 14px; min-height: 48px; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2);
}
input.code { font-family: var(--police-titre); font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 10px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s, box-shadow .2s;
}
.bouton:active { transform: scale(.98); }
.bouton.principal {
  width: 100%; color: var(--sur-accent);
  background: var(--degrade);
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), .3);
}
.panneau .bouton.principal { width: auto; }
.bouton.principal:hover { box-shadow: 0 6px 32px rgba(var(--second-rgb), .5); }
.bouton.fantome { width: 100%; background: transparent; color: var(--texte); border-color: var(--bord); }
.bouton.fantome:hover { border-color: var(--bord-fort); }

.alerte { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; position: relative; z-index: 1; }
.alerte.erreur { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.5); color: #fecdd3; }
.alerte.succes { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.5); color: #bbf7d0; }
.alerte.info { background: rgba(var(--accent-rgb), .1); border-color: var(--bord-fort); color: var(--accent-clair); }

/* ---------- Mise en page connectée */
.menu-case { display: none; }
.barre-haut { display: none; }
.menu {
  position: fixed; top: 0; bottom: 0; left: 0; width: 250px; z-index: 20;
  background: rgba(var(--panneau-rgb), .92); backdrop-filter: blur(14px);
  border-right: 1px solid var(--bord); padding: 16px 14px;
  display: flex; flex-direction: column; overflow-y: auto;
}
.logo-nav { display: flex; align-items: center; gap: 12px; padding: 0 8px 10px; }
.nav-groupe {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux);
  margin: 10px 10px 4px; opacity: .7;
}
.nav-lien {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--texte); text-decoration: none; border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.nav-lien svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--texte-doux); }
.nav-lien:hover { background: rgba(var(--accent-rgb), .06); }
.nav-lien.actif { background: rgba(var(--accent-rgb), .1); border-color: var(--bord); box-shadow: inset 3px 0 0 var(--cyan); }
.nav-lien.actif svg { color: var(--cyan); }
.nav-pied { margin-top: auto; position: sticky; bottom: -16px; background: rgb(var(--panneau-rgb)); padding: 10px 4px 12px 8px; margin-bottom: -16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--bord); }
.bouton.mini { width: 48px; padding: 0; flex: none; }
.bouton.mini svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voile { display: none; }

/* Contenu centré dans l'espace à droite du menu, jusqu'à 1 440 px de large */
.contenu { position: relative; z-index: 1; margin-left: 250px; max-width: none;
  padding: 32px max(36px, calc((100vw - 250px - 1440px) / 2)); }
.titre-page { font-size: 1.6rem; margin-bottom: 1.5rem; }
.titre-page::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: 10px; border-radius: 2px;
  background: var(--degrade);
}

.panneau {
  background: var(--verre); backdrop-filter: blur(10px);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; margin-bottom: 22px;
}

/* ---------- Tuiles du tableau de bord */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.tuile {
  background: var(--verre); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 18px 20px; position: relative; overflow: hidden;
}
.tuile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.tuile.accent { border-color: var(--bord-fort); box-shadow: var(--lueur); }
.tuile-libelle { font-size: .82rem; color: var(--texte-doux); margin-bottom: 8px; }
.tuile-valeur { font-family: var(--police-titre); font-size: 1.45rem; font-weight: 700; }
.tuile.accent .tuile-valeur { color: var(--cyan); text-shadow: 0 0 18px rgba(var(--accent-rgb), .4); }

.liste-activite { list-style: none; margin: 0; padding: 0; }
.liste-activite li {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(var(--ligne-rgb), .08);
}
.liste-activite li:last-child { border-bottom: none; }
.horodatage { font-variant-numeric: tabular-nums; color: var(--texte-doux); font-size: .88rem; }

.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.champs-2 .large { grid-column: 1 / -1; }

.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; color: var(--cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
th, td { padding: 12px 10px; border-bottom: 1px solid rgba(var(--ligne-rgb), .08); white-space: nowrap; }

.vide { text-align: center; padding: 60px 20px; color: var(--texte-doux); }
.pulsar {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  border: 2px solid var(--cyan); box-shadow: var(--lueur); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(.85); opacity: .5; } }

/* ---------- Tablette et téléphone */
@media (max-width: 900px) {
  .barre-haut {
    display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 15;
    padding: 10px 16px; background: rgba(var(--panneau-rgb), .92); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bord);
  }
  .logo-mini { display: flex; align-items: center; gap: 10px; font-family: var(--police-titre); font-weight: 700; letter-spacing: .12em; }
  .logo-mini .logo-noyau { width: 28px; height: 28px; }
  .logo-mini .logo-noyau::after { inset: 6px; }
  .burger { width: 48px; height: 48px; display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .burger span { display: block; width: 24px; height: 2px; background: var(--cyan); border-radius: 2px; }
  .menu { transform: translateX(-100%); transition: transform .25s ease; width: 280px; }
  .menu-case:checked ~ .menu { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
  .menu-case:checked ~ .voile { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.5); }
  .contenu { margin-left: 0; padding: 20px 16px; }
  .champs-2 { grid-template-columns: 1fr; }
  .liste-activite li { grid-template-columns: 1fr; gap: 2px; }
}

/* ================================================================ Lot 2 */
[hidden] { display: none !important; }
.entete-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.entete-page .bouton.principal { width: auto; }
.retour { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--texte-doux); }
.retour:hover { color: var(--cyan); }

.barre-outils { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.recherche { position: relative; flex: 1; min-width: 220px; margin: 0; }
.recherche svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.recherche input { margin: 0; padding-left: 44px; }

.onglets { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.onglet {
  min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px;
  border: 1px solid var(--bord); color: var(--texte-doux); text-decoration: none; font-size: .9rem;
}
.onglet.actif { color: var(--sur-accent); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }

.liste { background: var(--verre); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.ligne {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px; align-items: center; min-height: 60px; padding: 10px 18px;
  color: var(--texte); text-decoration: none; border-bottom: 1px solid rgba(var(--ligne-rgb), .08);
  transition: background .15s;
}
a.ligne:hover { background: rgba(var(--accent-rgb), .06); }
a.ligne:active { background: rgba(var(--accent-rgb), .12); }
.ligne:last-child { border-bottom: none; }
.ligne-principal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ligne-titre { font-weight: 600; }
.ligne-info { color: var(--texte-doux); font-size: .92rem; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-articles .ligne { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.entete-liste { min-height: 44px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num small { display: block; font-size: .78rem; color: var(--texte-doux); }
.fort { font-weight: 600; }
.positif { color: var(--vert); }
.negatif { color: var(--rouge) !important; }
.ligne.inactif { opacity: .5; }
.vide-recherche { text-align: center; color: var(--texte-doux); padding: 24px; }

.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(var(--accent-rgb), .1); color: var(--cyan); border: 1px solid var(--bord);
}
.badge.pro, .badge.produit { background: rgba(var(--second-rgb), .14); color: var(--second-clair); border-color: rgba(var(--second-rgb), .4); }
.badge.eteint { background: rgba(143,163,191,.12); color: var(--texte-doux); border-color: rgba(143,163,191,.3); }

/* Choix à gros boutons (tactile) */
.choix { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(var(--creux-rgb), .6); margin-bottom: 18px; }
.choix label { margin: 0; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.choix span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 8px; cursor: pointer; color: var(--texte-doux); font-weight: 600; }
.choix input:checked + span { background: var(--degrade); color: var(--sur-accent); }
.choix input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

.calcul-marge {
  display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin: 4px 0 20px; padding: 16px 18px;
  border-radius: 12px; border: 1px dashed var(--bord-fort); background: rgba(var(--accent-rgb), .05);
}
.calcul-marge div { display: grid; gap: 4px; }
.calcul-marge strong { font-family: var(--police-titre); font-size: 1.3rem; color: var(--cyan); }

.interrupteur { display: flex !important; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; color: var(--texte) !important; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.interrupteur .piste { flex: none; width: 52px; height: 30px; border-radius: 999px; background: rgba(143,163,191,.25); position: relative; transition: background .2s; }
.interrupteur .piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.interrupteur input:checked + .piste { background: var(--cyan); }
.interrupteur input:checked + .piste::after { transform: translateX(22px); }
.interrupteur input:focus-visible + .piste { outline: 2px solid var(--cyan); outline-offset: 2px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bouton.auto { width: auto; }
.zone-danger { margin-top: 8px; }
.bouton.danger { background: transparent; color: #fda4af; border-color: rgba(244,63,94,.45); }
.bouton.danger:hover { background: rgba(244,63,94,.12); }

a.tuile { color: inherit; text-decoration: none; transition: border-color .2s; }
a.tuile:hover { border-color: var(--bord-fort); }

@media (max-width: 900px) {
  .ligne, .liste-articles .ligne { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; }
  .ligne .ligne-principal { grid-column: 1 / -1; }
  .ligne-info:empty { display: none; }
  .entete-liste { display: none; }
  .liste-articles .num { text-align: left; }
  .liste-articles .num::before { content: attr(data-libelle) " "; color: var(--texte-doux); font-size: .78rem; margin-right: 4px; }
  .liste-articles .num small { display: inline; margin-left: 6px; }
  .liste-articles .ligne { grid-template-columns: 1fr 1fr; }
  .liste-articles .ligne .num:last-child { grid-column: 1 / -1; }
  .calcul-marge { grid-template-columns: 1fr; }
  .entete-page .bouton.principal { width: 100%; margin-bottom: 16px; }
}

/* ================================================================ Lot 3 : devis, factures, avoirs */
.droite { text-align: right; }
.multiligne { white-space: pre-line; }
.champs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.champs-3 .large { grid-column: 1 / -1; }
.champs-3 .large-2 { grid-column: span 2; }
.champ-fixe { display: grid; gap: 6px; margin-bottom: 16px; grid-column: span 2; }
.champ-fixe strong { min-height: 48px; display: flex; align-items: center; padding: 0 14px; border: 1px dashed var(--bord); border-radius: 10px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select option { background: var(--fond-2); color: var(--texte); }

/* États */
.etat { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.etat.grand { height: 34px; padding: 0 16px; font-size: .9rem; margin-top: 4px; }
.etat-brouillon { color: var(--texte-doux); border-color: rgba(143,163,191,.35); background: rgba(143,163,191,.08); }
.etat-attente { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.etat-ok { color: var(--vert); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.etat-retard { color: var(--rouge); border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.1); }
.etat-refus { color: var(--second-clair); border-color: rgba(var(--second-rgb), .4); background: rgba(var(--second-rgb), .1); }

.liste-docs .ligne { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); }
.a-encaisser { margin-left: auto; align-self: center; color: var(--texte-doux); font-size: .9rem; }
.a-encaisser strong { color: #fbbf24; font-family: var(--police-titre); }

.liens-docs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -8px 0 18px; }
.liens-docs a { min-height: 36px; display: inline-flex; align-items: center; text-decoration: none; font-size: .92rem; }

/* Saisie des lignes */
.lignes-doc { display: grid; gap: 10px; margin-bottom: 14px; }
.ligne-doc {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 130px 120px 44px; gap: 10px; align-items: end;
  padding: 12px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(var(--creux-rgb), .45);
}
.ld-designation { position: relative; align-self: stretch; }
.ld-designation textarea { margin: 0; resize: none; overflow: hidden; line-height: 1.4; min-height: 48px; }
.ld-champ { margin: 0 !important; }
.ld-champ span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ld-champ input { margin-top: 4px; text-align: right; }
.ld-champ input[name=l_unite] { text-align: left; }
.ld-total { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-suppr {
  width: 44px; height: 48px; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--texte-doux);
}
.ld-suppr:hover { color: var(--rouge); border-color: rgba(244,63,94,.4); }
.ld-suppr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.suggestions {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto;
  background: var(--fond-sugg); border: 1px solid var(--bord-fort); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.6), var(--lueur);
}
.suggestion {
  display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; padding: 8px 14px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ligne-rgb), .1); color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion:focus { background: rgba(var(--accent-rgb), .1); outline: none; }
.suggestion strong { color: var(--cyan); white-space: nowrap; font-size: .9rem; }

.total-doc { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.total-doc span { color: var(--texte-doux); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.total-doc strong { font-family: var(--police-titre); font-size: 1.8rem; color: var(--cyan); text-shadow: 0 0 20px rgba(var(--accent-rgb), .35); }

.barre-actions { align-items: center; margin-bottom: 22px; }
.barre-actions form { margin: 0; }
.bouton.emettre { color: var(--sur-accent); background: var(--degrade-valider); box-shadow: 0 6px 24px rgba(52,211,153,.25); }

.resume-doc { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 16px; }
.resume-doc > div { display: grid; gap: 4px; align-content: start; }
.resume-doc .montant { font-family: var(--police-titre); font-size: 1.2rem; color: var(--cyan); }
.resume-doc .montant.positif { color: var(--vert); }

.table-lignes td { white-space: normal; vertical-align: top; }
.table-lignes td.num, .table-lignes th.num { white-space: nowrap; }

.liste-paiements { list-style: none; margin: 0 0 16px; padding: 0; }
.liste-paiements li { display: grid; grid-template-columns: 110px 1fr auto 44px; gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(var(--ligne-rgb), .08); }
.liste-paiements form { margin: 0; }
.form-paiement { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; align-items: end; }
.form-paiement .bouton { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 1100px) {
  .resume-doc { grid-template-columns: 1fr 1fr; }
  .resume-doc > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .champs-3, .form-paiement { grid-template-columns: 1fr; }
  .champs-3 .large-2, .champ-fixe { grid-column: auto; }
  .ligne-doc { grid-template-columns: 1fr 1fr 44px; }
  .ld-designation { grid-column: 1 / -1; }
  .ld-champ:nth-of-type(3) { grid-column: 1 / 2; }
  .ld-total { grid-column: 2 / 3; }
  .ld-suppr { grid-row: 1; grid-column: 3; align-self: start; }
  .ld-designation { grid-column: 1 / 3; }
  .liste-docs .ligne { grid-template-columns: 1fr auto; }
  .liste-docs .num::before { content: none; }
  .liste-paiements li { grid-template-columns: 1fr auto 44px; }
  .liste-paiements li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .85rem; color: var(--texte-doux); }
  .a-encaisser { margin-left: 0; width: 100%; }
  .total-doc strong { font-size: 1.4rem; }
}
.barre-actions .bouton.principal { width: auto; }
.etat.grand { margin-bottom: 14px; }

/* ================================================================ Logo et thèmes */
.logo-image { background: #fff; border-radius: 16px; padding: 10px 14px; margin-bottom: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.logo-image img { display: block; width: 100%; height: auto; }
.sous-logo { margin-bottom: 24px; }

.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.carte-theme {
  display: grid; gap: 14px; padding: 16px; text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  background: var(--verre); border: 1px solid var(--bord); border-radius: 18px; transition: border-color .2s, transform .15s;
}
.carte-theme:hover { border-color: var(--bord-fort); }
.carte-theme:active { transform: scale(.99); }
.carte-theme.choisi { border-color: var(--cyan); box-shadow: var(--lueur); }
.carte-theme-texte { display: grid; gap: 4px; }
.carte-theme-texte strong { font-family: var(--police-titre); letter-spacing: .06em; font-size: 1.05rem; }
.coche {
  justify-self: start; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--bord); color: var(--texte-doux); font-weight: 600; font-size: .9rem;
}
.carte-theme.choisi .coche { background: var(--degrade); color: var(--sur-accent); border-color: transparent; }

/* Aperçus miniatures (couleurs fixes, indépendantes du thème actif) */
.apercu-theme { display: grid; grid-template-columns: 26% 1fr; height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.ap-menu { display: block; }
.ap-contenu { display: grid; align-content: start; gap: 10px; padding: 14px; }
.ap-titre { display: block; width: 45%; height: 10px; border-radius: 4px; }
.ap-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap-tuiles span { display: block; height: 42px; border-radius: 8px; }
.ap-bouton { display: block; width: 40%; height: 22px; border-radius: 6px; }
.theme-neon { background: radial-gradient(ellipse at 20% 0%, #10204a, transparent 60%), #060a14; }
.theme-neon .ap-menu { background: #080d1a; border-right: 1px solid rgba(56,189,248,.2); }
.theme-neon .ap-titre { background: #e2e8f0; }
.theme-neon .ap-tuiles span { background: rgba(16,26,48,.9); border: 1px solid rgba(56,189,248,.25); }
.theme-neon .ap-tuiles span:first-child { border-color: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,.4); }
.theme-neon .ap-bouton { background: linear-gradient(90deg, #22d3ee, #8b5cf6); }
.theme-createch { background: radial-gradient(ellipse at 20% 0%, #10275c, transparent 60%), radial-gradient(ellipse at 100% 100%, #3b1a06, transparent 55%), #050a16; }
.theme-createch .ap-menu { background: #070e1e; border-right: 1px solid rgba(150,172,205,.25); }
.theme-createch .ap-titre { background: linear-gradient(90deg, #f1f5fb, #9eabbf); }
.theme-createch .ap-tuiles span { background: rgba(13,24,47,.9); border: 1px solid rgba(150,172,205,.3); }
.theme-createch .ap-tuiles span:first-child { border-color: #ff7a1a; box-shadow: 0 0 12px rgba(255,122,26,.45); }
.theme-createch .ap-bouton { background: linear-gradient(90deg, #ff6a00, #ffa04a); }
.pastilles { display: flex; gap: 6px; margin-top: 6px; }
.pastille { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); }
.pastille-neon-1 { background: #060a14; } .pastille-neon-2 { background: #22d3ee; } .pastille-neon-3 { background: #8b5cf6; } .pastille-neon-4 { background: #e2e8f0; }
.pastille-createch-1 { background: #050a16; } .pastille-createch-2 { background: #ff7a1a; } .pastille-createch-3 { background: #4279ff; } .pastille-createch-4 { background: #c9d3e2; }

/* Reflet chromé sur les titres du thème Créa'Tech */
html[data-theme="createch"] .titre-page,
html[data-theme="createch"] .logo-titre {
  background: linear-gradient(180deg, #ffffff 0%, #cfd8e6 55%, #8e9bb0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="createch"] .titre-page::after { background: var(--degrade); }

/* ================================================================ Lot 4 : achats, comptabilité */
.separateur { width: 1px; align-self: stretch; background: var(--bord); margin: 0 4px; }
.liste-achats .ligne { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.trombone svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sous-titre-form { display: block; margin: 8px 0 12px; font-family: var(--police-titre); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.zone-fichier { margin: 6px 0 20px; }
.fichier-actuel { margin: 0 0 8px; }
.case { display: flex !important; align-items: center; gap: 10px; min-height: 44px; }
.case input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--cyan); }
.depot { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: 92px; padding: 16px;
  border: 2px dashed var(--bord-fort); border-radius: 14px; background: rgba(var(--accent-rgb), .04); cursor: pointer; text-align: center; color: var(--texte) !important; }
.depot:hover { background: rgba(var(--accent-rgb), .08); }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; min-height: 0; height: 100%; }
.depot-texte { font-weight: 600; }
.bouton .icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.jauge { margin-bottom: 18px; }
.jauge-entete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.jauge-piste { display: block; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; }
.jauge-fond { fill: rgba(var(--ligne-rgb), .12); }
.jauge-remplie.jauge-ok { fill: var(--cyan); }
.jauge-remplie.jauge-alerte { fill: #fbbf24; }
.jauge-remplie.jauge-danger { fill: var(--rouge); }
.jauge-repere { stroke: rgba(255,255,255,.35); stroke-width: .4; vector-effect: non-scaling-stroke; }
.jauge .petit { margin: 6px 0 0; }

.entete-graphique { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.legende { display: flex; align-items: center; gap: 8px; color: var(--texte-doux); font-size: .88rem; }
.puce { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px; }
.puce-recettes { background: var(--cyan); }
.puce-depenses { background: var(--violet); }
.graphique { display: block; width: 100%; height: auto; }
.grille-axe { stroke: rgba(var(--ligne-rgb), .12); stroke-width: 1; }
.axe { stroke: rgba(var(--ligne-rgb), .4); stroke-width: 1; }
.etiquette-axe, .etiquette-mois { fill: var(--texte-doux); font-size: 11px; font-family: var(--police); }
.mois-courant .etiquette-mois { fill: var(--cyan); font-weight: 700; }
.barre-recettes { fill: var(--cyan); }
.barre-depenses { fill: var(--violet); opacity: .85; }
.barre-recettes:hover, .barre-depenses:hover { opacity: 1; filter: brightness(1.2); }

.categories { display: grid; gap: 10px; }
.categorie { display: grid; grid-template-columns: 200px 1fr 120px; gap: 14px; align-items: center; }
.categorie-piste { display: block; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; }
.categorie-fond { fill: rgba(var(--ligne-rgb), .1); }
.categorie-barre { fill: var(--violet); }
tfoot td { font-weight: 600; border-top: 1px solid var(--bord-fort); }

@media (max-width: 900px) {
  .liste-achats .ligne { grid-template-columns: 1fr auto; }
  .liste-achats .num::before { content: none; }
  .categorie { grid-template-columns: 1fr auto; }
  .categorie-piste { grid-column: 1 / -1; grid-row: 2; }
  .separateur { display: none; }
}

/* ================================================================ Lot 4.1 */
.taux-grille { display: grid; grid-template-columns: 60px repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: center; margin-bottom: 18px; }
.taux-grille input { margin: 0; text-align: right; }
.choix-nature { margin-left: 8px; }
.aide-nature { display: block; margin: -10px 0 16px; }
.alerte-lien { display: block; text-decoration: none; }
.alerte-lien:hover { border-color: var(--cyan); }
.prochaine-decla { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 18px; margin-bottom: 18px;
  border-radius: 12px; border: 1px solid var(--bord-fort); background: rgba(var(--accent-rgb), .06); }
.prochaine-decla > div { display: grid; gap: 4px; align-content: start; }
.prochaine-decla strong { font-family: var(--police-titre); font-size: 1.15rem; color: var(--cyan); }
@media (max-width: 900px) {
  .prochaine-decla { grid-template-columns: 1fr 1fr; }
  .prochaine-decla > div:first-child { grid-column: 1 / -1; }
  .taux-grille { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
}

/* ================================================================ Version 4.2 : remises */
.ligne-doc { grid-template-columns: minmax(0, 1fr) 76px 96px 112px 132px 112px 44px; }
.champ-remise { display: flex; gap: 4px; margin-top: 4px; }
.champ-remise input { margin: 0; text-align: right; min-width: 0; flex: 1; padding: 12px 8px; }
.champ-remise select { margin: 0; width: 58px; flex: none; padding: 0 22px 0 10px; background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; }
.ld-total.avec-remise { color: var(--vert); }
.bas-totaux { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.remise-globale { width: 220px; }
.recap-totaux { display: grid; gap: 4px; min-width: 260px; }
.recap-totaux > div { display: flex; justify-content: space-between; gap: 18px; color: var(--texte-doux); }
.recap-totaux > div span:last-child { font-variant-numeric: tabular-nums; color: var(--texte); }
.recap-totaux [data-remises-total] { color: var(--vert) !important; }
@media (max-width: 1250px) and (min-width: 901px) {
  .ligne-doc { grid-template-columns: 1fr 1fr 1fr 44px; }
  .ld-designation { grid-column: 1 / 4; }
  .ld-suppr { grid-row: 1; grid-column: 4; align-self: start; }
}
@media (max-width: 900px) {
  .ld-remise { grid-column: 1 / 3; }
  .remise-globale, .recap-totaux { width: 100%; }
}
/* Lignes de document : disposition fiable sur tablette en portrait et téléphone */
@media (max-width: 900px) {
  .ligne-doc {
    grid-template-columns: 1fr 1fr 44px;
    grid-template-areas: "des des sup" "qte unite unite" "prix remise remise" "tot tot tot";
  }
  .ld-designation { grid-area: des; }
  .ld-suppr { grid-area: sup; align-self: start; }
  .ld-qte { grid-area: qte; }
  .ld-unite { grid-area: unite; }
  .ld-prix { grid-area: prix; }
  .ld-remise { grid-area: remise; }
  .ld-total { grid-area: tot; justify-content: flex-end; min-height: 32px; }
}
@media (max-width: 1250px) and (min-width: 901px) {
  .ligne-doc {
    grid-template-columns: 1fr 1fr 1fr 44px;
    grid-template-areas: "des des des sup" "qte unite prix ." "remise remise tot tot";
  }
  .ld-designation { grid-area: des; }
  .ld-suppr { grid-area: sup; align-self: start; }
  .ld-qte { grid-area: qte; }
  .ld-unite { grid-area: unite; }
  .ld-prix { grid-area: prix; }
  .ld-remise { grid-area: remise; }
  .ld-total { grid-area: tot; }
}

/* ================================================================ Version 5.0 : abonnements et contrats */
.espace-haut { margin-top: 18px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.ligne-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.ligne-form label { margin: 0; }
.ligne-form input[name=jour_abonnements] { width: 80px; }
.liste-abos .ligne, .liste-contrats .ligne { grid-template-columns: auto minmax(0, 2fr) auto minmax(0, 1fr); }
.liste-contrats .ligne { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.ligne-case { cursor: pointer; }
.ligne-case input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--cyan); }
.choix-formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.carte-formule { position: relative; margin: 0 !important; cursor: pointer; }
.carte-formule input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.carte-formule > span { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--bord); border-radius: 14px; background: rgba(var(--creux-rgb), .5); color: var(--texte); transition: border-color .2s, box-shadow .2s; }
.carte-formule input:checked + span { border-color: var(--cyan); box-shadow: var(--lueur); }
.carte-formule input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.prix-formule { font-family: var(--police-titre); font-size: 1.3rem; color: var(--cyan); }
.prix-formule small { font-family: var(--police); font-size: .8rem; color: var(--texte-doux); }
.texte-contrat { font-size: .95rem; line-height: 1.6; }
.texte-contrat h3 { font-family: var(--police-titre); font-size: .85rem; letter-spacing: .06em; color: var(--cyan); margin: 18px 0 6px; }
.texte-contrat p { margin: 0 0 8px; color: var(--texte); }
.modele-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.texte-modele { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; line-height: 1.5; }
.liste-champs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste-champs li { display: grid; gap: 2px; }
.liste-champs code { color: var(--cyan); font-size: .85rem; }
.liste-champs span { font-size: .82rem; color: var(--texte-doux); }
form.inactif { opacity: .6; }
@media (max-width: 900px) {
  .deux-colonnes, .modele-grille { grid-template-columns: 1fr; }
  .liste-abos .ligne { grid-template-columns: auto 1fr auto; }
  .liste-abos .ligne > a { grid-column: 2; }
  .liste-contrats .ligne { grid-template-columns: 1fr auto; }
}

/* ---------- Version 5.1 : signatures, e-mail, sauvegardes, sécurité */
.grille-signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pave-signature { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pave-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.etiquette-sig { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--cyan); font-weight: 600; }
.bouton.mini-texte { min-height: 36px; padding: 0 14px; font-size: .85rem; }
.pave-signature canvas {
  width: 100%; height: 210px; display: block; touch-action: none; cursor: crosshair;
  background: #fbfdff; border-radius: 12px; border: 2px dashed rgba(var(--accent-rgb), .55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.pave-signature.rempli canvas { border-style: solid; }
.pave-consigne { font-size: .82rem; color: var(--texte-doux); }
.pave-signature.signe img { background: #fbfdff; border-radius: 12px; padding: 8px; max-width: 100%; max-height: 160px; object-fit: contain; align-self: flex-start; }
.texte-depliable summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.piece-jointe { display: flex; align-items: center; gap: 8px; color: var(--texte-doux); }
.piece-jointe svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tuile-valeur.petite-valeur { font-size: 1.15rem; }
.machine { color: var(--texte-doux); font-size: .78rem; }
.bandeau-secours { border-width: 2px; }
.liste-sauvegardes .ligne { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto 44px; }
.liste-sauvegardes form { margin: 0; }
.codes-secours { columns: 2; column-gap: 32px; margin: 0 0 16px; padding-left: 1.6em; font-size: 1.15rem; }
.codes-secours li { padding: 6px 0; }
.codes-secours code { letter-spacing: .12em; font-weight: 600; }
.negatif { color: var(--rouge); }
@media (max-width: 640px) {
  .liste-sauvegardes .ligne { grid-template-columns: minmax(0, 1fr) 44px; }
  .liste-sauvegardes .ligne-info, .liste-sauvegardes .bouton { grid-column: 1; }
  .codes-secours { columns: 1; }
}
@media print {
  body:has(.codes-secours) .menu, body:has(.codes-secours) .barre-haut, body:has(.codes-secours) .actions { display: none !important; }
}
.resume-doc .bouton { white-space: nowrap; }

/* ================================================================ Version 5.2 : recherche et filtres */
.nav-recherche { position: relative; margin: 4px 0 6px; }
.nav-recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.nav-recherche input { margin: 0; min-height: 42px; padding: 8px 10px 8px 38px; font-size: .92rem; }
.loupe-haut { margin-left: auto; }
@media (min-width: 901px) { .loupe-haut { display: none; } }

.filtres { margin-bottom: 14px; }
.filtres label { margin-bottom: 0; }
.filtres-ligne { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.filtres-ligne .recherche { flex: 1 1 260px; }
.filtres-ligne .bouton { flex: none; }
.filtres-avances { margin: 12px 0 0; padding: 0; }
.filtres-avances > summary {
  cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  font-weight: 600; color: var(--texte); list-style: none;
}
.filtres-avances > summary::-webkit-details-marker { display: none; }
.filtres-avances > summary::before { content: "▸"; color: var(--cyan); transition: transform .2s; }
.filtres-avances[open] > summary::before { transform: rotate(90deg); }
.filtres-avances[open] > summary { border-bottom: 1px solid var(--bord); }
.filtres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; padding: 16px 18px 4px; }
.filtres-avances > .petit { padding: 8px 18px 0; margin: 0; }
.filtres-actions { padding: 14px 18px 18px; }
.barre-resultats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; color: var(--texte-doux); }
.barre-resultats .export { margin-left: auto; min-height: 42px; }
.barre-resultats .export svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liste-tiers .ligne { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }

.sommaire-recherche { margin-top: 8px; }
.sommaire-recherche .badge { margin-left: 6px; }
.groupe-recherche { margin-bottom: 24px; scroll-margin-top: 80px; }
.entete-groupe { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.entete-groupe h2 { margin: 0; font-size: 1.1rem; }
.entete-groupe a { color: var(--cyan); text-decoration: none; }
.liste-recherche .ligne { grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) minmax(0, .8fr); }

@media (max-width: 900px) {
  .liste-tiers .ligne, .liste-recherche .ligne { grid-template-columns: 1fr auto; }
  .liste-tiers .num::before { content: attr(data-libelle) " "; color: var(--texte-doux); font-size: .78rem; margin-right: 4px; }
  .filtres-ligne .bouton { width: 100%; }
  .barre-resultats .export { margin-left: 0; width: 100%; }
}