/* Portail professionnel SMAM Tools & Garden — couleurs relevees dans le
monogramme « SG » : bleu nuit des lettres, feuilles du vert d'eau au bleu
ciel. Boutons dans le bleu SG assombri (texte blanc lisible). Le vert
reste reserve aux succes : disponible, remises, validations. */
:root {
--marine: #0b2a5c; /* bleu nuit de la charte SMAM Garden (LOGO.pdf) */
--marine-fonce: #081d40;
--encre: #071937;
--sg-vert: #1597d4;
--sg-bleu: #406ebc;
--accent: #003da6;
--accent-fonce: #003185;
--vert: #24b24b;
--vert-fonce: #178a3e;
--turquoise: #406ebc;
--fond: #f5f7fa;
--surface: #ffffff;
--texte: #22293a;
--doux: #6b7689;
--bord: #dfe4ee;
--rouge: #c62828;
--ambre: #b26a00;
--ombre: 0 1px 2px rgba(22, 34, 60, .06), 0 4px 16px rgba(22, 34, 60, .06);
--rayon: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--fond); color: var(--texte);
font: 15px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--marine); }
a:hover { color: var(--vert-fonce); }
h1 { font-size: 1.55rem; margin: 0 0 .25rem; color: var(--encre); letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--encre); }
h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--encre); }
.doux { color: var(--doux); }
.petit { font-size: .85rem; }
.nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero { white-space: nowrap; }
.texte-court { display: none; }
/* ---- en-tete ---- */
.entete { background: var(--marine); color: #fff; position: sticky; top: 0; z-index: 20;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15); border-bottom: 3px solid var(--sg-bleu);
border-image: linear-gradient(90deg, var(--sg-vert), var(--sg-bleu)) 1; }
.entete-int { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 22px;
padding: 0 20px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex-shrink: 0; }
/* logo officiel SMAM GARDEN, version pour fond bleu nuit (charte, page 2) */
.logo .logo-image { height: 42px; width: auto; display: block; }
.logo .logo-espace { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8;
border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 10px; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #dfe6f3; text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
font-size: .93rem; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.actif { background: rgba(43, 178, 168, .2); color: #fff; box-shadow: inset 0 -2px 0 var(--sg-vert); }
.utilisateur { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: .88rem; }
.utilisateur form { margin: 0; }
.lien-bouton { background: none; border: 0; color: #dfe6f3; cursor: pointer; font: inherit; padding: 6px 8px;
border-radius: 6px; }
.lien-bouton:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pastille-brouillon { display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(90deg, var(--sg-vert), var(--sg-bleu));
color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 999px;
font-weight: 600; font-size: .88rem; }
.pastille-brouillon:hover { background: var(--accent-fonce); color: #fff; }
.pastille-brouillon b { background: #fff; color: var(--accent-fonce); border-radius: 999px; min-width: 22px;
text-align: center; padding: 0 6px; }
/* ---- page ---- */
.page { max-width: 1320px; margin: 0 auto; padding: 26px 20px 60px; }
.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin-bottom: 20px; }
/* ordinateur et tablette (12/10/2026) : un long texte d'introduction prenait toute la largeur et renvoyait le bouton
du titre (Actualiser...) seul a la ligne, a gauche (42 cas mesures) ; le texte cede la place au bouton */
@media (min-width: 701px) {
.titre-page > div:first-child:not(:only-child) { flex: 1 1 360px; min-width: 0; }
}
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
box-shadow: var(--ombre); padding: 20px; }
.grille-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pile > * + * { margin-top: 16px; }
/* deux colonnes seulement si le tableau de gauche y tient (brouillon a 960 px) */
@media (max-width: 1024px) { .grille-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
.grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
.page { padding: 18px 16px 50px; }
}
/* menu : libelles courts puis menu sur sa propre ligne, avant tout debordement
(le client a 7 entrees ; un menu qui defile cache les dernieres) */
@media (max-width: 1500px) { .nav a { padding: 8px 10px; } }
@media (max-width: 1100px) {
.entete-int { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
.nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
}
/* ---- boutons & formulaires ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0;
border-radius: 8px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600;
font-size: .93rem; line-height: 1.1;
padding: 11px 18px; cursor: pointer; text-decoration: none; transition: background .15s; }
.btn:hover { background: var(--accent-fonce); color: #fff; }
.btn:disabled { background: #b9c2d0; cursor: not-allowed; }
.btn-secondaire { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--marine); }
.btn-secondaire:hover { background: var(--marine); color: #fff; }
.btn-danger { background: #fff; color: var(--rouge); box-shadow: inset 0 0 0 1.5px var(--rouge); }
.btn-danger:hover { background: var(--rouge); color: #fff; }
.btn-marine { background: var(--marine); }
.btn-marine:hover { background: var(--encre); }
.btn-petit { padding: 7px 12px; font-size: .85rem; }
.btn-large { width: 100%; padding: 14px; font-size: 1rem; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--encre); }
.champ { margin-bottom: 14px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=datetime-local], input:not([type]), select, textarea {
width: 100%; border: 1.5px solid var(--bord); border-radius: 8px; padding: 10px 12px; font: inherit;
background: #fff; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(18, 131, 176, .2); }
textarea { resize: vertical; }
.aide { font-size: .82rem; color: var(--doux); margin-top: 4px; }
.en-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.en-ligne > * { margin: 0; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); }
/* ---- messages ---- */
.message { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: .93rem;
border: 1px solid; }
.message-ok { background: #eaf8ee; border-color: #bfe7cb; color: #155f2c; }
.message-erreur { background: #fdecec; border-color: #f5c2c2; color: #8e1c1c; }
.message-alerte { background: #fff5e5; border-color: #f5d7a6; color: #7a4a00; }
.message-info { background: #eaf4fb; border-color: #c4dff2; color: #164a73; }
/* message sur plusieurs lignes (effet d'une depense estimee sur les paiements, 04/10/2026) */
.message-lignes { white-space: pre-line; }
/* ---- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700;
padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-disponible { background: #e7f7ec; color: var(--vert-fonce); }
.badge-arrivage { background: #fff3e0; color: var(--ambre); }
.badge-limite { background: #fff3e0; color: var(--ambre); }
.badge-rupture { background: #fdecec; color: var(--rouge); }
.rupture-note { display: block; font-size: .78rem; color: var(--rouge); margin-top: 4px; }
.badge-promo { background: #fdecec; color: var(--rouge); }
.badge-promo::before { display: none; }
.badge-gris { background: #eef1f5; color: var(--doux); }
.badge-bleu { background: #e6effa; color: #1f4f8f; }
.badge-vert { background: #e7f7ec; color: var(--vert-fonce); }
.badge-rouge { background: #fdecec; color: var(--rouge); }
/* dans un tableau, une etiquette longue (« En livraison — BL n° 260308 ») passe
a la ligne au lieu de deborder de sa carte, quelle que soit la largeur */
.tableau td .badge { white-space: normal; line-height: 1.3; }
.tableau td .badge::before { flex-shrink: 0; }
/* ---- catalogue ---- */
.barre-filtres { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) auto;
gap: 12px; align-items: end; }
@media (max-width: 900px) { .barre-filtres { grid-template-columns: minmax(0, 1fr); } }
.recherche { position: relative; }
.recherche input { padding-left: 38px; font-size: 1rem; }
/* loupe calee sur le BAS du bloc (le champ), pas sur son milieu : le bloc
contient aussi l'intitule « Rechercher » */
.recherche::before { content: ""; position: absolute; left: 13px; bottom: 14px; width: 15px; height: 15px;
border: 2px solid var(--doux); border-radius: 50%; }
.recherche::after { content: ""; position: absolute; left: 26px; bottom: 17px; width: 7px; height: 2px;
background: var(--doux); transform: rotate(45deg); }
.options-filtres { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.produit { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.produit:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.produit-image { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(--bord); position: relative; overflow: hidden; }
/* hors du flux : une photo en portrait ne peut plus etirer la carte (un
pourcentage de hauteur ne se resout pas contre `aspect-ratio`) */
.produit-image img { position: absolute; inset: 0; margin: auto; width: 88%; height: 88%; object-fit: contain; }
.produit-image .badge-promo { position: absolute; top: 10px; left: 10px; }
.sans-photo { color: #c3cad6; font-size: .8rem; text-align: center; }
.sans-photo svg { width: 52px; height: 52px; display: block; margin: 0 auto 4px; }
.produit-corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.marque { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent); }
.designation { font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--encre);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.7em; }
.codes { font-size: .78rem; color: var(--doux); }
.prix-bloc { margin-top: auto; padding-top: 6px; }
.prix-public { font-size: .8rem; color: var(--doux); text-decoration: line-through; }
.prix-net { font-size: 1.25rem; font-weight: 800; color: var(--encre); }
.prix-net small { font-size: .75rem; font-weight: 600; color: var(--doux); }
.prix-ttc { font-size: .78rem; color: var(--doux); }
.remise { font-size: .78rem; font-weight: 700; color: var(--vert-fonce); }
.ajout { display: flex; gap: 8px; margin-top: 10px; }
.quantite { display: flex; align-items: center; border: 1.5px solid var(--bord); border-radius: 8px;
overflow: hidden; background: #fff; }
.quantite button { border: 0; background: #f1f4f9; width: 32px; height: 38px; font-size: 1.1rem; cursor: pointer;
color: var(--marine); }
.quantite button:hover { background: #e3e9f2; }
.quantite input { width: 48px; border: 0; text-align: center; padding: 0; height: 38px; font-weight: 700;
-moz-appearance: textfield; box-shadow: none !important; }
.quantite input::-webkit-outer-spin-button, .quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ajout .btn { flex: 1; padding: 10px; }
.deja { font-size: .78rem; color: var(--vert-fonce); font-weight: 600; }
.retour-ajout { font-size: .8rem; margin-top: 6px; }
.retour-ajout.ok { color: var(--vert-fonce); }
.retour-ajout.alerte { color: var(--ambre); }
.retour-ajout.erreur { color: var(--rouge); }
.plus-resultats { text-align: center; margin-top: 22px; }
.compteur { color: var(--doux); font-size: .9rem; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
/* ---- tableaux ---- */
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--doux); font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--bord);
white-space: nowrap; }
.tableau td { padding: 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:hover td { background: #fafbfd; }
.tableau .droite, .tableau th.droite { text-align: right; }
.tableau .vignette { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--bord);
border-radius: 6px; }
.tableau .vignette-vide { display: inline-block; vertical-align: middle; box-sizing: border-box; background: #f4f6fa
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cad6' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E")
center / 24px no-repeat; }
.defile { overflow-x: auto; }
.habituels .h-sep { display: block; font-size: 0; }
.totaux { margin-left: auto; min-width: 280px; }
.totaux div { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; }
.totaux .total { border-top: 2px solid var(--encre); margin-top: 6px; padding-top: 10px; font-size: 1.15rem;
font-weight: 800; color: var(--encre); }
/* ---- filtres communs : marques en un clic ---- */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.puces-marques { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.puce { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 13px;
border: 1.5px solid var(--bord); border-radius: 999px; background: #fff; color: var(--marine);
font-weight: 600; font-size: .86rem; cursor: pointer; user-select: none; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce:hover { border-color: var(--accent); }
.puce:has(input:checked) { background: var(--marine); border-color: var(--marine); color: #fff; }
.puce:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(18, 131, 176, .3); }
.puce-n { font-size: .72rem; font-weight: 700; opacity: .65; }
/* ---- commander : bon de commande rapide ---- */
.commande-rapide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.commande-principale { min-width: 0; }
.filtres-commande { margin-bottom: 14px; }
.barre-recherche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.carte-tableau { padding: 0; }
.tableau-commande { font-size: .9rem; }
.tableau-commande thead th { position: sticky; top: 67px; z-index: 2; background: #f4f6fa; }
.tableau-commande td { padding: 10px; }
.tableau-commande .c-img { width: 62px; }
.tableau-commande .c-art { min-width: 220px; }
.tableau-commande tbody tr:nth-child(even) td { background: #fafbfd; }
.tableau-commande tr.dans-commande td { background: #edf8f3; }
.tableau-commande tr.dans-commande td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.tableau .centre { text-align: center; }
.designation-ligne { font-weight: 600; color: var(--encre); line-height: 1.3; }
.habituel { font-size: .75rem; font-weight: 600; color: var(--accent); margin-top: 2px; }
.remise-taux { font-weight: 700; color: var(--vert-fonce); white-space: nowrap; }
.c-remise .petit { white-space: nowrap; font-size: .72rem; }
.remise-taux.promo { color: var(--rouge); }
.c-qte { text-align: center; white-space: nowrap; }
.c-qte .quantite { display: inline-flex; }
.plus-lignes td { text-align: center; padding: 16px; }
.resume-commande { position: sticky; top: 87px; }
.resume-chiffres > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .92rem; }
.resume-chiffres > div > span:first-child { color: var(--doux); }
.resume-chiffres .resume-remise span { color: var(--vert-fonce); font-weight: 700; }
.resume-chiffres .resume-net { border-top: 1px solid var(--bord); margin-top: 4px; padding-top: 10px; font-weight: 700; }
.resume-chiffres .resume-ttc { border-top: 2px solid var(--encre); margin-top: 6px; padding-top: 10px;
font-size: 1.15rem; font-weight: 800; color: var(--encre); }
.resume-chiffres .resume-ttc span:first-child { color: var(--encre); }
.resume-commande .btn-large { margin-top: 14px; }
.resume-note { margin: 10px 0 0; }
.totaux .totaux-remise span { color: var(--vert-fonce); font-weight: 700; }
/* Largeurs : au-dessus de 1280 px, tableau + recapitulatif a droite ; en
dessous, le recapitulatif devient une barre fixe en bas d'ecran (total TTC et
validation toujours a portee) ; sous 960 px, les lignes s'empilent en fiches. */
@media (max-width: 1280px) {
.commande-rapide { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
.resume-commande { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0;
border-radius: 0; padding: 10px 20px; display: flex; align-items: center; gap: 16px;
box-shadow: 0 -4px 16px rgba(22, 34, 60, .14); }
.resume-commande.vide { display: none; }
.resume-commande h2, .resume-commande .resume-note { display: none; }
.resume-chiffres { flex: 1; display: flex; justify-content: flex-end; gap: 22px; }
.resume-chiffres > div:not(.resume-ttc):not(.resume-remise):not(.resume-net) { display: none; }
.resume-chiffres > div { padding: 0; margin: 0; border: 0; gap: 8px; }
.resume-chiffres .resume-net, .resume-chiffres .resume-ttc { border: 0; margin: 0; padding: 0; }
.resume-chiffres .resume-ttc { font-size: 1.05rem; }
.resume-commande .btn-large { width: auto; margin: 0; padding: 12px 18px; }
}
@media (max-width: 960px) {
.tableau-commande thead { display: none; }
.tableau-commande, .tableau-commande tbody { display: block; }
.tableau-commande tr { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 6px 10px;
padding: 12px; border-bottom: 1px solid var(--bord); }
.tableau-commande tr.dans-commande { background: #edf8f3; box-shadow: inset 3px 0 0 var(--vert); }
.tableau-commande td { display: block; padding: 0; border: 0; text-align: left; }
.tableau-commande tbody tr td, .tableau-commande tr.dans-commande td { background: none; box-shadow: none; }
.tableau-commande td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem;
font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--doux); }
.tableau-commande .c-img { grid-column: 1; grid-row: 1 / 3; }
.tableau-commande .c-art { grid-column: 2 / -1; min-width: 0; }
.tableau-commande .c-dispo { grid-column: 2 / -1; }
.tableau-commande .c-prix { grid-column: 1 / 3; }
.tableau-commande .c-remise { grid-column: 3; }
.tableau-commande .c-net { grid-column: 4; text-align: right; }
.tableau-commande .c-qte { grid-column: 1 / 4; text-align: left; }
.tableau-commande .c-total { grid-column: 4; text-align: right; align-self: end; }
.tableau-commande .plus-lignes { display: block; }
}
@media (max-width: 700px) {
.barre-recherche { grid-template-columns: minmax(0, 1fr); }
.resume-chiffres > div:not(.resume-ttc) { display: none; }
.resume-commande { padding: 10px 16px; gap: 12px; }
.resume-commande .btn-large { padding: 12px 14px; }
/* « Mes commandes » en fiches */
.liste-commandes thead { display: none; }
.liste-commandes, .liste-commandes tbody { display: block; }
.liste-commandes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0;
border-bottom: 1px solid var(--bord); }
.liste-commandes td { display: block; padding: 0; border: 0; }
.liste-commandes .lc-numero { grid-column: 1; }
.liste-commandes .lc-total { grid-column: 2; grid-row: 1; }
.liste-commandes .lc-date { grid-column: 1; font-size: .85rem; color: var(--doux); }
.liste-commandes .lc-etat { grid-column: 1 / -1; }
.liste-commandes .lc-action { grid-column: 1 / -1; text-align: left; }
}
/* ---- conditions par categorie (fiche client) ---- */
.conditions .cat-principale td { background: #f4f6fa; border-top: 2px solid var(--bord); }
.conditions .cat-sous td:first-child { padding-left: 32px; }
.conditions .champ-remise { width: 76px; text-align: right; padding: 7px 9px; }
.conditions .case { margin: 0; }
/* ligne masquee : grisee des qu'on decoche, sans attendre l'enregistrement */
.conditions tr:has(.visible-cat:not(:checked)) td { opacity: .5; }
.conditions tr:has(.visible-cat:not(:checked)) td:nth-child(3) { opacity: 1; }
.barre-classement { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
margin-bottom: 16px; }
.barre-classement select { padding: 7px 10px; }
/* photos des articles qu'AKAL n'illustre pas (page Produits) */
.barre-photos { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-bottom: 16px; }
.barre-photos > div { flex: 1; min-width: 260px; }
.barre-photos .aide { margin: 6px 0 0; }
.photo-portail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.photo-portail form { margin: 0; display: inline-flex; }
label.btn { position: relative; cursor: pointer; }
label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fichier-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.conditions-client { margin-top: 6px; font-size: .9rem; }
/* sous-categorie dont la categorie principale est masquee : masquee de fait */
.conditions tr.parent-masque td { opacity: .45; }
.conditions .note-parent { display: none; font-size: .75rem; color: var(--rouge); }
.conditions tr.parent-masque .note-parent { display: inline; }
.proposition { margin-top: 6px; font-size: .8rem; font-weight: 500; }
.proposition input { width: 16px; height: 16px; }
/* ---- tableau de bord ---- */
.tuile { display: block; text-decoration: none; color: inherit; }
.tuile .chiffre { font-size: 2rem; font-weight: 800; color: var(--encre); line-height: 1.1; }
.tuile:hover { border-color: var(--accent); }
.bienvenue { background: linear-gradient(120deg, var(--marine-fonce), var(--marine) 55%, var(--accent));
color: #fff; border: 0; }
.bienvenue h1 { color: #fff; }
.bienvenue .doux { color: #cdd7e8; }
.actions-rapides { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.actions-rapides .btn-secondaire { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.actions-rapides .btn-secondaire:hover { background: #fff; color: var(--marine); }
/* ---- page d'erreur avec le logo (27/10/2026) ---- */
.ecran-erreur { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
background: linear-gradient(160deg, #f3f5f9, #e7edf6); }
.carte-erreur { width: 100%; max-width: 520px; text-align: center; padding: 36px 32px 24px; }
.carte-erreur .logo-erreur { width: 220px; max-width: 70%; height: auto; display: block; margin: 0 auto 22px; }
.carte-erreur h1 { font-size: 1.45rem; margin: 6px 0 12px; }
.carte-erreur p { margin: 0 0 10px; line-height: 1.5; }
.pastille-erreur { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center;
justify-content: center; font-size: 1.7rem; font-weight: 700; color: #fff; background: var(--marine); }
.pastille-erreur-erp { background: #d98a1e; }
.pastille-erreur-erreur { background: #c0392b; }
.actions-erreur { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0 6px; }
.carte-erreur .etat-liaison { margin-top: 4px; }
.carte-erreur .heure-erreur { margin: 14px 0 0; }
@media (max-width: 700px) {
.carte-erreur { padding: 28px 18px 18px; }
.actions-erreur .btn { flex: 1 1 100%; }
}
/* ---- connexion ---- */
.ecran-connexion { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.connexion-marque { background: linear-gradient(150deg, var(--marine-fonce), var(--marine) 55%, var(--accent));
color: #fff; display: flex; flex-direction: column; justify-content: center;
padding: 60px; gap: 22px; }
.connexion-marque .logo-connexion { width: 260px; max-width: 80%; height: auto; }
.connexion-marque h1 { color: #fff; font-size: 2rem; }
.connexion-marque p { color: #d5deed; max-width: 440px; font-size: 1.02rem; }
.connexion-marques { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; letter-spacing: .06em;
text-transform: uppercase; color: #aebcd6; }
.connexion-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.connexion-form .carte { width: 100%; max-width: 400px; padding: 32px; }
@media (max-width: 800px) {
.ecran-connexion { grid-template-columns: 1fr; }
.connexion-marque { padding: 36px 24px; }
}
/* ---- identifiants a transmettre ---- */
.identifiants { background: #f5fafc; border: 1.5px dashed var(--accent); border-radius: var(--rayon);
padding: 18px; font-size: 1rem; white-space: pre-wrap; }
.identifiants code { font: 700 1.15rem/1.4 Consolas, "Courier New", monospace; color: var(--encre);
background: #fff; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--bord); }
.pied { text-align: center; color: var(--doux); font-size: .82rem; padding: 30px 20px; }
/* ---- telephone ---- */
@media (max-width: 600px) {
/* en-tete compact : il ne colle plus en haut (il prendrait un quart de
l'ecran) ; libelles courts ; le nom du client est deja dans la page */
.entete { position: static; }
.logo .logo-espace, .utilisateur .nom-compte, .texte-long { display: none; }
.logo .logo-image { height: 34px; }
.texte-court { display: inline; }
.utilisateur { margin-left: auto; gap: 6px; }
.pastille-brouillon { padding: 6px 10px; gap: 6px; }
.nav { flex-wrap: wrap; overflow: visible; }
.nav a { padding: 7px 10px; font-size: .9rem; }
.titre-page { align-items: flex-start; }
.carte { padding: 16px; }
}
/* lignes de commande et articles habituels : une carte par ligne, sans
defilement horizontal (quantite et total restent a portee de pouce) */
@media (max-width: 700px) {
.lignes thead, .habituels thead { display: none; }
.lignes, .lignes tbody, .habituels, .habituels tbody { display: block; }
.lignes td, .habituels td { display: block; padding: 0; border: 0; text-align: left; }
.lignes tr:hover td, .habituels tr:hover td { background: none; }
.lignes td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--doux);
margin-bottom: 2px; }
.lignes tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px 12px;
padding: 14px 0; border-bottom: 1px solid var(--bord); }
.lignes .l-article { grid-column: 1 / -1; }
.lignes.modifiable .l-article { grid-column: 1 / 4; }
.lignes .l-suppr { grid-column: 4; grid-row: 1; align-self: start; }
.lignes .l-prix { grid-column: 1; text-align: left; }
.lignes .l-remise { grid-column: 2; text-align: left; }
.lignes .l-qte { text-align: left; }
.lignes .l-net { grid-column: 3 / -1; }
.lignes .l-sans-prix { grid-column: 1 / -1; }
.lignes .l-qte { grid-column: 1 / 3; }
.lignes .l-total { grid-column: 3 / -1; text-align: right; align-self: end; font-size: 1rem; }
.habituels tr { display: grid; grid-template-columns: 22px 50px minmax(0, 1fr) auto; gap: 8px 10px;
align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.habituels .h-choix { grid-column: 1; grid-row: 1; }
.habituels .h-image { grid-column: 2; grid-row: 1; }
.habituels .h-article { grid-column: 3 / -1; grid-row: 1; }
.habituels .h-achats { grid-column: 1 / -1; }
.habituels .h-sep { display: inline; font-size: inherit; }
.habituels .h-net { grid-column: 1 / 4; }
.habituels .h-net::before { content: "Net HT "; color: var(--doux); font-size: .78rem; font-weight: 600; }
.habituels .h-qte { grid-column: 4; }
}
@media print {
.entete, .pied, .ne-pas-imprimer { display: none !important; }
body { background: #fff; }
.carte { box-shadow: none; border: 0; padding: 0; }
.page { padding: 0; }
}
/* ---- cases a cocher en grille (marques, familles) ---- */
.grille-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.grille-cases .case { margin: 0; }
/* Modules du client (fiche client) : cases toutes egales, titre puis explication dessous (29/09/2026) */
.module-client { align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.module-client:last-child { margin-bottom: 0; }
.module-client input { flex: none; margin: 2px 0 0; }
.module-client strong { display: block; }
.module-client .aide { display: block; margin: 2px 0 0; font-weight: 400; }
.grille-cases .case:has(input[type=checkbox]:not(:checked)) { opacity: .5; text-decoration: line-through; }
.masquages-globaux summary { cursor: pointer; }
/* ---- documents et chiffre d'affaires ---- */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.onglet { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bord, #dfe4ee);
color: var(--marine); text-decoration: none; font-weight: 600; font-size: .92rem; }
.onglet.actif { background: var(--marine); border-color: var(--marine); color: #fff; }
.onglet .compte { opacity: .7; font-weight: 400; margin-left: 4px; }
.onglets-petits { margin: 0; }
.onglets-petits .onglet { padding: 5px 11px; font-size: .82rem; }
.filtre-annee { margin-bottom: 12px; gap: 8px; }
.liste-documents tfoot td { border-top: 2px solid var(--bord, #dfe4ee); }
/* reglement des factures (reglements.py) */
.badge-ambre { background: #fff3e0; color: var(--ambre); }
.badge-a-facturer { background: #fff3e0; color: #a55a00; }
.texte-rouge { color: var(--rouge); font-weight: 600; }
.liste-documents tr.a-facturer td { background: #fff8ec; }
.liste-documents tr.a-facturer:hover td { background: #fff1d9; }
.liste-documents tr.a-facturer td:first-child { box-shadow: inset 3px 0 0 #f0a030; }
.bandeau-reglement { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: flex-start; }
.bandeau-reglement .br-du { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bandeau-reglement .br-montant { font-size: 1.35rem; color: var(--marine); }
.bandeau-reglement .br-conditions ul { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; }
.reglement summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
flex-wrap: wrap; }
.reglement summary::-webkit-details-marker { display: none; }
.reglement summary::after { content: "▾"; color: var(--doux); font-size: .8rem; }
.reglement[open] summary::after { content: "▴"; }
.reglement-detail { margin-top: 8px; min-width: 260px; }
.reglement-bloc + .reglement-bloc { margin-top: 10px; }
.moyens { list-style: none; margin: 4px 0 0; padding: 0; }
.moyen { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 5px 0 5px 9px; font-size: .84rem;
border-left: 3px solid var(--bord); margin-bottom: 4px; }
.moyen .m-mode { font-weight: 600; }
.moyen .m-etat { color: var(--doux); }
.moyen-encaisse { border-left-color: var(--vert-fonce, #1e7d3c); }
.moyen-encaisse .m-etat { color: var(--vert-fonce, #1e7d3c); }
.moyen-a_echoir { border-left-color: #1f4f8f; }
.moyen-en_cours { border-left-color: var(--ambre); }
.moyen-en_cours .m-etat { color: var(--ambre); }
.moyen-impaye, .moyen-depasse { border-left-color: var(--rouge); }
.moyen-impaye .m-etat, .moyen-depasse .m-etat { color: var(--rouge); font-weight: 600; }
.impayes ul { margin: 6px 0; padding-left: 20px; }
.form-reglement { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px 10px;
align-items: end; margin-top: 14px; }
.form-reglement .champ { margin: 0; }
.form-reglement input, .form-reglement select { width: 100%; }
.grille-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
margin-bottom: 16px; }
.grille-chiffres .carte { margin-bottom: 0; }
.chiffre-valeur { font-size: 1.7rem; font-weight: 700; color: var(--marine); margin: 4px 0; }
.chiffre-valeur small { font-size: .9rem; font-weight: 400; color: var(--doux); }
.hausse { color: var(--vert-fonce); font-weight: 600; }
.baisse { color: var(--rouge); font-weight: 600; }
.courbe-bloc { width: 100%; }
.courbe { width: 100%; height: auto; display: block; }
.courbe .grille { stroke: #e6eaf1; stroke-width: 1; }
.courbe .grille.zero { stroke: #b9c4d6; }
.courbe .axe { font-size: 12px; fill: #6b7689; font-family: inherit; }
.legende { display: flex; gap: 18px; justify-content: center; margin-top: 6px; font-size: .9rem; }
.legende-annee { display: inline-flex; align-items: center; gap: 6px; }
.legende-annee i { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.tableau-mois td, .tableau-mois th { padding: 6px 10px; }
@media (max-width: 700px) {
.chiffre-valeur { font-size: 1.4rem; }
/* la courbe est reduite ~2x : libelles agrandis, un mois sur deux */
.courbe .axe-y { font-size: 24px; }
.courbe .mois { font-size: 24px; }
.courbe .mois-impair { display: none; }
.m-cacher { display: none; }
/* meilleurs achats : une fiche par article (designation pleine largeur) */
.meilleurs thead { display: none; }
.meilleurs tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px;
padding: 12px 0; border-bottom: 1px solid #e6eaf1; }
.meilleurs td { padding: 0; border: 0; text-align: left; }
.meilleurs .m-art { grid-column: 1 / -1; }
.meilleurs .m-qte::after { content: " ×"; color: var(--doux); }
}
/* ---- suivi d'une commande (client) ---- */
.etapes { list-style: none; display: flex; gap: 0; margin: 0 0 18px; padding: 0; counter-reset: etape; }
.etapes li { flex: 1; position: relative; padding: 12px 12px 12px 44px; background: #fff; border: 1px solid #dfe4ee;
color: var(--doux); font-weight: 600; font-size: .92rem; }
.etapes li + li { border-left: 0; }
.etapes li:first-child { border-radius: 10px 0 0 10px; }
.etapes li:last-child { border-radius: 0 10px 10px 0; }
.etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; left: 12px; top: 50%;
transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #e6eaf1; color: var(--doux);
display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.etapes li span { display: block; font-weight: 400; font-size: .8rem; }
.etapes li.fait { color: var(--vert-fonce); }
.etapes li.fait::before { content: "✓"; background: var(--vert-fonce); color: #fff; }
.etapes li.en-cours { color: var(--marine); background: #eef4fb; }
.etapes li.en-cours::before { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
.etapes { flex-direction: column; }
.etapes li + li { border-left: 1px solid #dfe4ee; border-top: 0; }
.etapes li:first-child { border-radius: 10px 10px 0 0; }
.etapes li:last-child { border-radius: 0 0 10px 10px; }
}
/* ======================================================================
TELEPHONE — refonte du 26/09/2026 (« pas bien structuree ni claire »)
En-tete sur une ligne + menu repliable ; articles en fiches compactes
(photo a gauche) ; filtres resserres ; tableaux en fiches lisibles.
====================================================================== */
.menu-bouton, .nav-sortie { display: none; }
/* code de connexion */
.champ-code { font: 700 1.6rem/1.2 Consolas, "Courier New", monospace; letter-spacing: .35em; text-align: center; }
.lien-sombre { color: var(--accent); text-decoration: underline; padding: 0; }
.lien-sombre:hover { color: var(--accent-fonce); background: none; }
/* bons de sortie : articles en consignation depliables */
.articles-sortie summary { cursor: pointer; font-size: .88rem; color: var(--marine); }
.articles-sortie ul { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; }
.articles-sortie li { margin: 3px 0; }
@media (max-width: 700px) {
/* -- en-tete : logo | brouillon | Menu ; le menu se deplie en dessous -- */
.entete-int { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; }
.logo .logo-image { height: 30px; width: auto; }
.utilisateur { margin-left: auto; gap: 8px; }
.sortie-large { display: none; }
.menu-bouton { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1);
color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 7px 11px;
font-family: inherit; font-weight: 600; font-size: .9rem; line-height: 1; cursor: pointer; }
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 16px; height: 2px;
background: #fff; border-radius: 2px; position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -5px; }
.menu-icone::after { top: 5px; }
.entete.menu-ouvert .menu-icone { background: transparent; }
.entete.menu-ouvert .menu-icone::before { top: 0; transform: rotate(45deg); }
.entete.menu-ouvert .menu-icone::after { top: 0; transform: rotate(-45deg); }
.nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; flex-wrap: nowrap; gap: 2px;
padding: 4px 0 10px; overflow: visible; }
.entete.menu-ouvert .nav { display: flex; }
.nav a { padding: 12px 12px; font-size: 1rem; border-radius: 8px; }
.nav a.actif { box-shadow: inset 3px 0 0 var(--sg-vert); }
.nav-sortie { display: block; margin: 6px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 6px; }
.nav-sortie button { width: 100%; text-align: left; background: none; border: 0; color: #dfe6f3;
font: inherit; font-size: 1rem; padding: 12px; border-radius: 8px; cursor: pointer; }
/* -- titres de page et boutons d'action plus sobres -- */
.page { padding: 14px 12px 40px; }
h1 { font-size: 1.35rem; }
.titre-page { margin-bottom: 12px; gap: 10px; }
.titre-page .doux { font-size: .86rem; }
.titre-page .en-ligne { gap: 8px; }
.titre-page .en-ligne .btn { padding: 8px 12px; font-size: .84rem; }
/* -- filtres : champs sans intitule (le texte d'aide suffit), marques sur
UNE ligne qui defile, options sur une ligne -- */
.barre-filtres, .barre-recherche { gap: 8px; }
.barre-filtres label[for], .barre-recherche label[for] { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recherche::before { bottom: 13px; }
.recherche::after { bottom: 16px; }
.puces-marques { flex-wrap: nowrap; overflow-x: auto; margin: 10px -16px 0; padding: 0 16px 4px;
scrollbar-width: none; }
.puces-marques::-webkit-scrollbar { display: none; }
.puce { flex-shrink: 0; padding: 6px 11px; font-size: .84rem; }
.options-filtres { gap: 6px 14px; margin-top: 8px; font-size: .88rem; }
.filtres-commande, form.carte:has(.barre-filtres) { padding: 12px; }
/* -- catalogue : DEUX produits par ligne (proprietaire, 27/09/2026 ; avant : un
par ligne, photo a gauche). Photo carree en haut, designation sur 3 lignes
au plus, quantite et « Ajouter » sur toute la largeur de la fiche. -- */
.grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.produit { display: flex; flex-direction: column; }
.produit:hover { transform: none; }
.produit-image { aspect-ratio: 1 / 1; min-height: 0; border-right: 0; border-bottom: 1px solid var(--bord); }
.produit-image img { width: 84%; height: 84%; }
.produit-image .badge-promo { top: 6px; left: 6px; right: 6px; font-size: .64rem; padding: 3px 6px;
white-space: normal; line-height: 1.2; text-align: center; }
.sans-photo svg { width: 30px; height: 30px; }
.sans-photo { font-size: .7rem; }
.produit-corps { padding: 8px 9px 10px; gap: 3px; }
.marque { font-size: .62rem; }
.designation { font-size: .8rem; line-height: 1.3; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden; }
.produit .codes { font-size: .66rem; line-height: 1.3; }
.produit .codes .ean { display: none; } /* la reference suffit sur petit ecran */
.produit .badge { font-size: .66rem; padding: 3px 7px; }
.produit .petit { font-size: .7rem; }
.prix-bloc { padding-top: 2px; }
.prix-public { font-size: .72rem; }
.prix-net { font-size: 1rem; }
.prix-net small { font-size: .7rem; }
.prix-ttc { font-size: .7rem; line-height: 1.3; }
.palier-promo { font-size: .72rem; }
.ajout { flex-direction: column; gap: 6px; margin-top: 6px; }
.ajout .quantite { width: 100%; }
.ajout .quantite input { flex: 1; width: auto; min-width: 0; }
.ajout .btn { width: 100%; padding: 9px 6px; }
.quantite button { width: 34px; height: 36px; }
.quantite input { width: 42px; height: 36px; }
.rupture-note, .deja, .retour-ajout { font-size: .72rem; }
.marque, .produit .codes, .produit .badge { font-size: .7rem; } /* 11 px au moins : lisible */
.prix-ttc .remise { display: block; } /* « -10 % votre remise » sous le TTC */
/* -- formulaires de la gestion : un champ par ligne (sinon deux champs cote a
cote debordent de l'ecran) -- */
.en-ligne > .champ { flex-basis: 100% !important; min-width: 0 !important; }
/* -- « Commander » : une fiche serree par article -- */
.tableau-commande tr { grid-template-columns: 46px repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 2px; }
.tableau-commande tbody tr td { background: none !important; }
.tableau-commande .c-img { grid-row: 1 / 3; }
.tableau-commande .c-img .vignette { width: 46px; height: 46px; }
.tableau-commande .designation-ligne { font-size: .88rem; line-height: 1.3; }
.tableau-commande .codes { font-size: .72rem; }
.tableau-commande .c-dispo::before { display: none !important; }
.tableau-commande .c-dispo { grid-column: 2 / -1; }
.tableau-commande td[data-label]::before { font-size: .6rem; margin-bottom: 1px; }
.tableau-commande .c-prix, .tableau-commande .c-remise, .tableau-commande .c-net { font-size: .88rem; }
.tableau-commande .c-remise .petit { display: none; }
.tableau-commande .c-qte::before { display: none !important; }
.tableau-commande .c-qte, .tableau-commande .c-total { align-self: center; }
.tableau-commande .habituel { font-size: .74rem; }
/* -- lignes d'une commande (non modifiables) : remise, net, quantite, total sur une ligne -- */
.lignes:not(.modifiable) tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 0; }
.lignes:not(.modifiable) .l-prix { display: none; }
.lignes:not(.modifiable) .l-remise { grid-column: 1; }
.lignes:not(.modifiable) .l-net { grid-column: 2; }
.lignes:not(.modifiable) .l-qte { grid-column: 3; text-align: right; }
.lignes:not(.modifiable) .l-total { grid-column: 4; }
.lignes .l-article strong { font-size: .9rem; }
/* -- factures, BL, avoirs : une fiche par document, PDF toujours visible -- */
.liste-documents thead { display: none; }
.liste-documents, .liste-documents tbody, .liste-documents tfoot { display: block; }
.liste-documents tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px;
align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.liste-documents td { display: block; padding: 0; border: 0; text-align: left; }
.liste-documents td.m-cacher { display: none; }
.liste-documents .ld-numero { grid-column: 1; grid-row: 1; }
.liste-documents .ld-date { grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--doux); white-space: nowrap; }
.liste-documents .ld-facture { grid-column: 1; grid-row: 3; font-size: .8rem; }
.liste-documents .ld-ttc { grid-column: 2; grid-row: 1 / 3; text-align: right; white-space: nowrap; }
.liste-documents .ld-action { grid-column: 3; grid-row: 1 / 3; }
.liste-documents .ld-reglement { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
.liste-documents tr.a-facturer { background: #fff8ec; padding-left: 8px; padding-right: 8px;
box-shadow: inset 3px 0 0 #f0a030; }
.liste-documents tr.a-facturer td { background: transparent; box-shadow: none; }
.reglement-detail { min-width: 0; }
.liste-documents tfoot tr { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; }
.liste-documents tfoot td:empty { display: none; }
/* -- chiffre d'affaires : tableaux resserres, rien de coupe -- */
.carte .tableau th, .carte .tableau td { padding-left: 6px; padding-right: 6px; }
.tableau { font-size: .86rem; }
}
/* marges (gestion) */
.form-marges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.form-marges .champ { margin: 0; }
.form-marges select, .form-marges input { width: 100%; }
/* Marges : « Appliquer maintenant » ou « Planifier » a une date et une heure */
.form-appliquer .planifier { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-left: 10px; border-left: 1px solid var(--bord, #dfe3ea); }
.form-appliquer input[type="datetime-local"] { width: auto; min-width: 0; padding: 7px 8px; }
@media (max-width: 640px) { .form-appliquer .planifier { padding-left: 0; border-left: 0; } }
/* Promotion a partir d'une quantite (« Promo -20 % des 10 pieces ») */
.palier-promo { color: var(--rouge); font-size: .84rem; margin-top: 4px; }
.palier-promo strong { color: inherit; }
/* Marges : les trois etapes, visibles des l'ouverture de la page */
.etapes-marges { margin: 0 0 16px; padding: 12px 16px 12px 34px; background: var(--surface); border: 1px solid var(--bord);
border-radius: var(--rayon); font-size: .92rem; line-height: 1.5; }
.etapes-marges li + li { margin-top: 4px; }
/* Gestion › Commander pour un client : recapitulatif + validation, cote droit */
.colonne-smam { position: sticky; top: 87px; display: grid; gap: 14px; align-content: start; }
.resume-lignes { list-style: none; margin: 0 0 10px; padding: 0; max-height: 260px; overflow-y: auto;
border-bottom: 1px solid var(--bord); }
.resume-lignes li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .86rem; }
.resume-lignes li + li { border-top: 1px dashed var(--bord); }
@media (max-width: 1023px) { .colonne-smam { position: static; } }
/* Personne connectee (jusqu'a 5 acces par client) */
.qui-connecte { color: #fff; opacity: .85; font-size: .88rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .qui-connecte { display: none; } }
/* Notifications : etapes d'installation sur iPhone */
.etapes-iphone { margin: 10px 0 0; padding-left: 20px; line-height: 1.5; }
.etapes-iphone li + li { margin-top: 6px; }
/* L'attribut « hidden » cache TOUJOURS (sinon un display: inline-flex, comme .btn,
l'annule : le bouton « Activer les notifications » restait visible et inerte sur iPhone) */
[hidden] { display: none !important; }
/* ======================================================================
TELEPHONE — tableaux larges en FICHES (27/09/2026, retour du proprietaire :
tableaux des promotions, commandes, clients... qui debordaient). La classe
« empile » est posee par portal.js seulement si le tableau ne tient pas.
====================================================================== */
@media (max-width: 1100px) { /* telephone ET tablette : portal.js ne pose « empile » sur tablette que si ca deborde */
table.empile, table.empile > tbody, table.empile > tbody > tr, table.empile > tbody > tr > td { display: block; width: auto; }
table.empile > thead { display: none; }
table.empile > tbody > tr { padding: 12px 0; border-bottom: 1px solid var(--bord); background: none !important; }
table.empile > tbody > tr:first-child { padding-top: 4px; }
table.empile > tbody > tr:last-child { border-bottom: 0; }
table.empile > tbody > tr > td { border: 0 !important; padding: 3px 0 !important; text-align: left !important;
white-space: normal !important; min-width: 0; }
table.empile > tbody > tr > td:empty { display: none; }
table.empile > tbody > tr > td[data-label]:not([data-label=""]) { display: grid !important;
grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
table.empile > tbody > tr > td[data-label]:not([data-label=""])::before {
content: attr(data-label); font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: var(--doux); line-height: 1.35; }
table.empile .valeur { min-width: 0; overflow-wrap: anywhere; }
/* 1re colonne = le titre de la fiche (nom, numero...) : sans etiquette, plus grand */
table.empile > tbody > tr > td:first-child::before { display: none !important; }
table.empile > tbody > tr > td:first-child { display: block !important; font-size: .98rem; padding-bottom: 6px !important; }
table.empile form, table.empile .en-ligne { flex-wrap: wrap; }
table.empile input[type=text], table.empile input[type=email] { width: 100% !important; }
table.empile .vignette { width: 44px; height: 44px; }
.defile:has(> table.empile) { overflow: visible; }
}
/* Champs de date sur iPhone : Safari leur donne une largeur minimale et son
propre style (ils debordaient de la carte, vides et tres hauts) */
input[type=date], input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block;
min-width: 0; max-width: 100%; min-height: 44px; box-sizing: border-box; line-height: 1.3; }
input[type=date]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }
/* Tableau de bord de la gestion sur telephone : les trois chiffres cote a cote
(avant : un ecran de haut pour trois nombres) */
@media (max-width: 700px) {
.grille-3:has(> .tuile) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grille-3 > .tuile { padding: 10px 10px 12px; }
.grille-3 > .tuile .doux { font-size: .74rem; line-height: 1.25; }
.grille-3 > .tuile .chiffre { font-size: 1.5rem; }
}
/* tablette portrait aussi : les trois chiffres cote a cote (avant : une tuile pleine largeur par chiffre) */
@media (max-width: 900px) { .grille-3:has(> .tuile) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* CHIFFRES ALIGNES (29/09/2026, capture iPhone : « Commandes a valider » sur 2 lignes descendait son chiffre) :
titre, chiffre, note = 3 rangees PARTAGEES par toutes les tuiles d'une meme ligne (subgrid) — le chiffre est a la
meme hauteur quelle que soit la longueur du titre. Navigateur sans subgrid : affichage d'avant. */
@supports (grid-template-rows: subgrid) {
:is(.grille-3, .grille-4) > .tuile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px;
align-content: start; }
}
/* Catalogue sans bouton « Ajouter » : la quantite EST celle du brouillon */
.ajout { flex-direction: column; gap: 4px; }
.ajout .legende-qte { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--doux); }
.ajout .quantite { width: 100%; }
.ajout .quantite input { flex: 1; width: auto; min-width: 0; }
.ajout .quantite button { width: 44px; }
.produit.dans-brouillon { border-color: var(--vert); box-shadow: inset 0 3px 0 var(--vert); }
.produit.dans-brouillon .legende-qte { color: var(--vert-fonce); }
/* fiches du catalogue a 2 par ligne : une pastille longue (« Il reste seulement 2 pieces ») passe a la ligne */
@media (max-width: 700px) { .produit .badge { white-space: normal; max-width: 100%; line-height: 1.25; } }
/* Commande minimale et ristourne annuelle (27/09/2026) */
.minimum-ok { color: var(--vert-fonce); font-weight: 600; margin: 8px 0; }
button[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }
.carte-ristourne .jauge { height: 10px; border-radius: 6px; background: #e7ebf2; overflow: hidden; margin: 4px 0 10px; }
.carte-ristourne .jauge > div { height: 100%; background: linear-gradient(90deg, #1597d4, #1f9d55); border-radius: 6px; }
.paliers-ristourne { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.paliers-ristourne li { padding: 4px 10px; border-radius: 999px; background: #eef1f5; color: var(--doux); font-size: .85rem; }
.paliers-ristourne li.atteint { background: #e7f7ec; color: var(--vert-fonce); }
.texte-vert { color: var(--vert-fonce); }
/* Client en preparation (27/09/2026) */
.carte-preparation { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
border-left: 4px solid #d99a1e; margin-bottom: 16px; }
.carte-preparation .btn { white-space: normal; }
/* Hausse de prix planifiee : annonce vive sur l'accueil du client (28/09/2026) */
.bandeau-hausse { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 14px 18px;
border-radius: 12px; color: #fff; background: linear-gradient(100deg, #e5361f, #f28b00);
box-shadow: 0 6px 18px rgba(229, 54, 31, .28); line-height: 1.45; }
.bandeau-hausse strong { font-size: 1.05rem; }
.bandeau-hausse-icone { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22);
display: grid; place-items: center; font-size: 1rem; }
.bandeau-hausse-taux { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px;
background: #fff; color: #c62a14; font-weight: 800; font-size: 1.05rem; }
@media (max-width: 640px) { .bandeau-hausse { padding: 12px 14px; gap: 10px; }
.bandeau-hausse-taux { margin: 4px 0 0; } }
/* Apercu de l'espace client par SMAM (28/09/2026) : bandeau vif, lecture seule */
.bandeau-apercu { position: relative; z-index: 60; display: flex; gap: 12px; align-items: center;
justify-content: center; flex-wrap: wrap; padding: 8px 16px; background: #7b2cbf; color: #fff; font-size: .92rem;
text-align: center; }
.bandeau-apercu .btn { background: #fff; color: #7b2cbf; border-color: #fff; }
.toast-apercu { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
background: #0b2a5c; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
transition: opacity .2s, transform .2s; z-index: 80; pointer-events: none; max-width: calc(100% - 32px); }
.toast-apercu.visible { opacity: 1; transform: translate(-50%, 0); }
.mode-apercu .entete { box-shadow: inset 0 4px 0 #7b2cbf; }
/* Page promotion : un seul enregistrement, barre toujours visible en bas (28/09/2026) */
.barre-enregistrer { position: sticky; bottom: 0; z-index: 40; display: flex; gap: 12px; align-items: center;
justify-content: flex-end; flex-wrap: wrap; margin: 20px 0 0; padding: 12px 16px; background: #fff;
border: 1px solid var(--bord, #e1e6ef); border-radius: 12px; box-shadow: 0 -4px 16px rgba(28, 44, 96, .10); }
.barre-enregistrer .btn { min-width: 220px; }
fieldset.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.sans-cadre[disabled] { opacity: .5; }
@media (max-width: 640px) { .barre-enregistrer { justify-content: stretch; } .barre-enregistrer .btn { width: 100%; }
.barre-enregistrer .petit { display: none; } }
/* Accuse de reception des e-mails d'acces (28/09/2026) */
.accuse .badge { white-space: nowrap; }
/* Hausse planifiee : alerte cliquable et page des articles concernes (28/09/2026) */
a.bandeau-hausse { text-decoration: none; }
a.bandeau-hausse:hover, a.bandeau-hausse:focus-visible { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(229, 54, 31, .38); }
.bandeau-hausse-lien { margin-top: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.titre-groupe { margin: 26px 0 12px; font-size: 1.15rem; }
.badge-hausse { position: absolute; top: 10px; left: 10px; background: #e5361f; color: #fff; font-weight: 800; }
.hausse-prix { margin: 10px 0; display: grid; gap: 4px; }
.hausse-avant, .hausse-apres { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hausse-avant .nombre { text-decoration: line-through; color: var(--doux); }
.hausse-apres .nombre { font-size: 1.25rem; font-weight: 800; color: #c62a14; }
.produit-hausse .btn { margin-top: auto; }
@media (max-width: 640px) {
.hausse-avant, .hausse-apres { flex-direction: column; align-items: flex-start; gap: 0; }
.hausse-apres .nombre { font-size: 1.05rem; }
.hausse-prix .prix-ttc { font-size: .72rem; }
.produit-hausse .btn { width: 100%; }
}
.ristourne-atteinte { padding: 10px 14px; border-radius: 10px; background: #e7f7ec; color: var(--vert-fonce); line-height: 1.5; }
/* Barre « Enregistrer / Annuler » : apparait des qu'on modifie (28/09/2026) */
.barre-modifs { position: fixed; left: 50%; bottom: 18px; z-index: 75; width: min(780px, calc(100% - 24px));
display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px;
border-radius: 16px; color: #fff; background: linear-gradient(120deg, #0b2a5c, #22407e);
box-shadow: 0 14px 34px rgba(28, 44, 96, .35), 0 0 0 1px rgba(255,255,255,.06) inset;
transform: translate(-50%, 160%); opacity: 0; visibility: hidden;
transition: transform .42s cubic-bezier(.2, .9, .25, 1.15), opacity .25s ease, visibility 0s linear .42s; }
.barre-modifs.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible;
transition: transform .42s cubic-bezier(.2, .9, .25, 1.15), opacity .25s ease, visibility 0s; }
.barre-modifs-texte { display: flex; align-items: center; gap: 12px; min-width: 0; line-height: 1.3; }
.barre-modifs-texte small { display: block; opacity: .75; font-size: .8rem; }
.barre-modifs-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #f5b83d;
animation: barre-pouls 1.8s ease-out infinite; }
@keyframes barre-pouls { 0% { box-shadow: 0 0 0 0 rgba(245, 184, 61, .75); }
70% { box-shadow: 0 0 0 11px rgba(245, 184, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 184, 61, 0); } }
.barre-modifs-boutons { display: flex; gap: 8px; flex: none; }
.barre-modifs .barre-annuler { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.barre-modifs .barre-annuler:hover { background: rgba(255,255,255,.1); }
.barre-modifs .barre-valider { background: #1597d4; border-color: #1597d4; color: #fff; min-width: 150px; }
.barre-modifs .barre-valider:hover { background: #239a91; }
.barre-modifs.envoi .barre-valider { opacity: .7; pointer-events: none; }
.barre-modifs.envoi .barre-modifs-point { animation-duration: .6s; }
body.barre-ouverte .page { padding-bottom: 110px; }
@media (max-width: 640px) {
.barre-modifs { bottom: 10px; padding: 10px 12px; gap: 10px; flex-wrap: wrap; border-radius: 14px; }
.barre-modifs-texte small { display: none; }
.barre-modifs-boutons { width: 100%; }
.barre-modifs-boutons .btn { flex: 1; min-width: 0; }
body.barre-ouverte .page { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .barre-modifs, .barre-modifs.visible { transition: none; }
.barre-modifs-point { animation: none; } }
/* Equipe : commerciaux (28/09/2026) */
.bloc-commercial { padding: 14px 0; border-top: 1px solid var(--bord); }
.bloc-commercial:first-of-type { border-top: 0; }
.bloc-commercial .grille-cases { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
/* Equipe (29/09/2026, capture du proprietaire : e-mail coupe, boutons sur 2 lignes inegales) */
.champ-nom-membre { width: 100%; min-width: 150px; }
.champ-email-membre { width: 100%; min-width: 290px; }
.bloc-commercial .champ-nom-membre { width: 200px; }
.bloc-commercial .champ-email-membre { width: 300px; }
.actions-membre { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.actions-membre .btn { white-space: nowrap; }
.actions-commercial { justify-content: flex-start; margin-top: 10px; }
.tableau-equipe td { vertical-align: middle; }
.cases-avis { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 20px; }
@media (max-width: 700px) {
.champ-email-membre, .champ-nom-membre, .bloc-commercial .champ-nom-membre, .bloc-commercial .champ-email-membre {
width: 100%; min-width: 0; }
.actions-membre { flex-wrap: wrap; justify-content: flex-start; }
.cases-avis { grid-template-columns: minmax(0, 1fr); }
}
/* Ecrans tactiles : pas de zoom automatique de Safari quand le clavier s'ouvre (texte des champs >= 16 px, prioritaire
sur les regles plus precises de la suite) ; et PAS DE ZOOM AU DOUBLE APPUI (29/09/2026 : deux appuis rapides sur
+ / − zoomaient la page) — le zoom a deux doigts reste possible */
html { touch-action: manipulation; }
button, .btn, a, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
@media (pointer: coarse) {
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* iPad en PORTRAIT (701-1023 px) : le MEME menu que sur iPhone — bouton « Menu » qui se
deplie (proprietaire, 28/09/2026). En paysage (1024 px et plus), le menu complet sur une ligne. */
@media (min-width: 701px) and (max-width: 1023px) {
.entete-int { flex-wrap: wrap; height: auto; padding: 10px 18px; gap: 10px; }
.utilisateur { margin-left: auto; gap: 10px; }
.sortie-large { display: none; }
.menu-bouton { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1);
color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 8px 13px;
font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer; }
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 16px; height: 2px;
background: #fff; border-radius: 2px; position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -5px; }
.menu-icone::after { top: 5px; }
.entete.menu-ouvert .menu-icone { background: transparent; }
.entete.menu-ouvert .menu-icone::before { top: 0; transform: rotate(45deg); }
.entete.menu-ouvert .menu-icone::after { top: 0; transform: rotate(-45deg); }
.nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; flex-wrap: nowrap; gap: 2px;
padding: 4px 0 10px; overflow: visible; }
.entete.menu-ouvert .nav { display: flex; }
.nav a { padding: 13px 14px; font-size: 1.02rem; border-radius: 8px; }
.nav a.actif { box-shadow: inset 3px 0 0 var(--sg-vert); }
.nav-sortie { display: block; margin: 6px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 6px; }
.nav-sortie button { width: 100%; text-align: left; background: none; border: 0; color: #dfe6f3;
font: inherit; font-size: 1.02rem; padding: 13px 14px; border-radius: 8px; cursor: pointer; }
}
/* 1024-1100 px (iPad Pro 12,9" en portrait, petites fenetres) : menu complet resserre sur une ligne */
@media (min-width: 1024px) and (max-width: 1100px) {
.nav { gap: 2px; }
.nav a { padding: 7px 8px; font-size: .88rem; }
}
/* Scan de code-barres (28/09/2026) */
.btn-scan { display: inline-flex; align-items: center; gap: 8px; background: var(--sg-vert, #1597d4);
border-color: var(--sg-vert, #1597d4); color: #fff; }
.btn-scan[hidden] { display: none !important; }
body.scan-ouvert { overflow: hidden; }
.scan { position: fixed; inset: 0; z-index: 90; background: #0c1430; color: #fff; display: flex; flex-direction: column; }
.scan[hidden] { display: none !important; }
.scan-entete { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
padding-top: max(12px, env(safe-area-inset-top)); }
.scan-retour { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px 0 10px;
border: 0; border-radius: 999px; background: #fff; color: #0b2a5c; font: inherit; font-size: 1rem; font-weight: 700;
cursor: pointer; }
.scan-retour:active { background: #dfe6f3; }
.scan-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-video { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.scan-video video { width: 100%; height: 100%; object-fit: cover; }
.scan-cadre { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scan-cadre span { width: min(78vw, 420px); aspect-ratio: 2.2 / 1; border-radius: 14px;
box-shadow: 0 0 0 9999px rgba(12, 20, 48, .55); border: 3px solid #1597d4; position: relative; overflow: hidden; }
.scan-cadre span::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; top: 50%;
background: #f5b83d; box-shadow: 0 0 10px #f5b83d; animation: scan-ligne 1.8s ease-in-out infinite; }
@keyframes scan-ligne { 0%, 100% { transform: translateY(-38px); } 50% { transform: translateY(38px); } }
.scan-aide { margin: 0; padding: 10px 16px; text-align: center; font-size: .95rem; opacity: .9; }
.scan-resultat { background: #fff; color: var(--texte, #22293a); border-radius: 18px 18px 0 0; max-height: 62vh;
overflow-y: auto; padding: 0 16px; padding-bottom: env(safe-area-inset-bottom); transition: padding .2s; }
.scan.avec-resultat .scan-resultat { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
.scan.avec-resultat .scan-cadre span::after { animation: none; opacity: 0; }
.scan-article { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.scan-photo { flex: none; width: 84px; height: 84px; border: 1px solid var(--bord); border-radius: 10px; display: grid;
place-items: center; overflow: hidden; background: #fff; }
.scan-photo img { max-width: 92%; max-height: 92%; object-fit: contain; }
.scan-article .designation { font-weight: 700; margin: 2px 0; }
.scan-quantite { margin: 10px 0 4px; }
.scan-quantite .btn { white-space: nowrap; }
.scan-actions { margin-top: 12px; gap: 8px; }
.scan-actions .btn { flex: 1; }
@media (min-width: 900px) { .scan-resultat { width: 520px; margin: 0 auto; } }
/* Parametres : logo et icone (28/09/2026) */
.apercu-logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.apercu-fonce { background: #0b2a5c; border-radius: 10px; padding: 10px 14px; }
.apercu-clair { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; }
.apercu-fonce img, .apercu-clair img { height: 34px; width: auto; display: block; }
.apercu-icone { border-radius: 16px; box-shadow: 0 4px 12px rgba(28, 44, 96, .25); }
.form-logo { display: grid; gap: 6px; margin: 10px 0; }
/* Installer SMAM Pro sur l'ecran d'accueil (28/09/2026) */
.carte-installer { border-left: 4px solid var(--sg-vert, #1597d4); }
.carte-installer[hidden] { display: none !important; }
.installer-tete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.installer-tete h2 { margin: 0 0 4px; font-size: 1.12rem; }
.installer-tete p { margin: 0; }
.installer-icone { flex: none; border-radius: 14px; box-shadow: 0 4px 12px rgba(28, 44, 96, .25); }
.installer-fermer { margin-left: auto; flex: none; background: none; border: 0; color: var(--doux); font-size: 1.05rem;
width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.installer-fermer:hover { background: #eef1f5; }
/* carte « Notifications sur cet appareil » : titre + ✕ (accueil seulement ; 29/09/2026) */
.notifs-tete { display: flex; align-items: flex-start; gap: 10px; }
.notifs-tete h2 { margin-top: 0; }
.notifs-tete .installer-fermer { margin-top: -6px; margin-right: -6px; }
.etapes-installer { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.etapes-installer svg { vertical-align: -4px; margin: 0 2px; color: #003da6; }
/* Visionneuse des documents (28/09/2026) */
/* SOUS l'en-tete (z-index 20) : le menu « Plus » s'ouvre par-dessus (capture du 30/09/2026) ; collee juste sous
l'en-tete (--haut-entete, mesure par portal.js) ; telephone : en-tete non colle -> en haut */
.barre-document { position: sticky; top: var(--haut-entete, 0px); z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; margin: -6px 0 14px; background: rgba(245, 247, 251, .96); backdrop-filter: blur(6px);
border-bottom: 1px solid var(--bord); }
.barre-document-titre { flex: 1; min-width: 140px; }
.barre-document-actions { display: flex; gap: 8px; }
.barre-document-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pages-pdf { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 30px; }
.page-pdf { background: #fff; box-shadow: 0 2px 12px rgba(28, 44, 96, .14); border-radius: 4px; overflow: hidden;
aspect-ratio: 1 / 1.414; }
.page-pdf.rendue { aspect-ratio: auto; }
.page-pdf canvas { display: block; }
@media (max-width: 640px) { .barre-document-titre { order: -1; flex-basis: 100%; } .pages-pdf { gap: 10px; } }
@media (max-width: 600px) { .barre-document { top: 0; } }
/* Telechargements (28/09/2026) */
.titre-rubrique { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.galerie-photo { display: block; text-decoration: none; color: inherit; border: 1px solid var(--bord); border-radius: 10px;
overflow: hidden; background: #fff; }
.galerie-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.galerie-photo span { display: block; padding: 6px 8px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-fichier { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bord); }
.ligne-fichier:first-of-type { border-top: 0; }
.ligne-fichier-texte { flex: 1; min-width: 0; }
.ligne-fichier-actions { display: flex; gap: 6px; flex: none; }
.icone-fichier { flex: none; display: inline-grid; place-items: center; width: 46px; height: 54px; border-radius: 6px;
background: #eef1f6; color: #0b2a5c; font: 800 .72rem/1 Arial, sans-serif; border: 1px solid var(--bord); }
@media (max-width: 640px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ligne-fichier { flex-wrap: wrap; } .ligne-fichier-actions { width: 100%; } .ligne-fichier-actions .btn { flex: 1; } }
/* ======================================================================
ACTIVITE du portail (gestion, 28/09/2026)
====================================================================== */
.barre-activite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.barre-activite .onglets { margin: 0; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.tuiles-activite .chiffre { font-size: 1.7rem; }
.tableau-activite td { vertical-align: top; }
.puces-clients { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-client { display: inline-flex; gap: 4px; align-items: baseline; padding: 5px 11px; border-radius: 999px;
background: #f4f6fa; border: 1px solid var(--bord); font-size: .86rem; color: inherit; text-decoration: none; }
a.puce-client:hover { border-color: var(--accent); }
.ligne-activite { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
border-bottom: 1px solid var(--bord); font-size: .9rem; }
.ligne-activite:last-child { border-bottom: 0; }
.ligne-activite > span:last-child { text-align: right; overflow-wrap: anywhere; }
details.visite { border-bottom: 1px solid var(--bord); }
details.visite:last-of-type { border-bottom: 0; }
details.visite > summary { cursor: pointer; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: baseline;
gap: 4px 10px; list-style: none; }
details.visite > summary::-webkit-details-marker { display: none; }
details.visite > summary::before { content: "▸"; color: var(--doux); }
details.visite[open] > summary::before { content: "▾"; }
.pages-visite { margin: 0 0 12px; padding-left: 26px; font-size: .88rem; line-height: 1.7; }
@media (max-width: 900px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 700px) {
.tuiles-activite > .tuile { padding: 10px 12px; }
.tuiles-activite .chiffre { font-size: 1.4rem; }
.ligne-activite { flex-direction: column; gap: 0; }
.ligne-activite > span:last-child { text-align: left; }
}
/* Menu « Plus ▾ » (gestion : Marges, Telechargements, Activite, BI, Depenses, Journal, Parametres, Equipe ;
espace client : Telechargements, Mon CA). Des 1024 px (menu sur une ligne) : menu deroulant — a 1280-1440 px,
toutes les entrees ne tenaient pas (« Equipe » etait cachee). En dessous (telephone, iPad : menu en liste,
01/10/2026) : groupe depliable dans la liste, au lieu des entrees posees a plat. */
.nav-plus { display: block; position: relative; flex: none; }
.nav-plus > summary { list-style: none; cursor: pointer; color: #dfe6f3; border-radius: 8px; white-space: nowrap;
display: flex; align-items: center; gap: 6px; user-select: none; }
.nav-plus > summary::-webkit-details-marker { display: none; }
.nav-plus > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-plus[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-plus > summary:hover, .nav-plus[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; }
@media (min-width: 1024px) {
.nav:has(> .nav-plus) { overflow: visible; }
.nav-plus > summary { padding: 8px 10px; font-size: .93rem; }
.nav-plus > summary.actif { background: rgba(43, 178, 168, .2); color: #fff; box-shadow: inset 0 -2px 0 var(--sg-vert); }
.nav-plus-liste { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 40;
display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--marine);
border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 14px 34px rgba(8, 16, 40, .35);
animation: nav-plus-entree .14s ease-out; }
.nav-plus-liste a { padding: 10px 12px; }
.nav-plus-liste a.actif { box-shadow: inset 3px 0 0 var(--sg-vert); }
}
@media (min-width: 1024px) and (max-width: 1100px) {
.nav-plus > summary { padding: 7px 8px; font-size: .88rem; }
}
@media (max-width: 1023px) {
.nav-plus > summary { padding: 12px; font-size: 1rem; justify-content: space-between; }
.nav-plus > summary.actif { color: #fff; box-shadow: inset 3px 0 0 var(--sg-vert); }
.nav-plus-liste { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 12px; padding-left: 8px;
border-left: 2px solid rgba(255, 255, 255, .16); }
}
@media (min-width: 701px) and (max-width: 1023px) {
.nav-plus > summary { padding: 13px 14px; font-size: 1.02rem; }
}
@keyframes nav-plus-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-plus-liste { animation: none; } }
/* Tableaux en fiches (telephone) : la 1re cellule (nom, numero : le titre de la fiche) prend TOUTE la
largeur. portal.js lui donne aussi une etiquette (data-label) : la regle en grille a deux colonnes
l'emportait et comprimait le titre au tiers de la largeur (noms coupes, e-mails casses). */
@media (max-width: 1100px) {
table.empile > tbody > tr > td:first-child[data-label]:not([data-label=""]) { display: block !important; }
}
.ligne-activite-jour { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
margin: -6px 0 20px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--bord);
color: inherit; text-decoration: none; }
.ligne-activite-jour:hover { border-color: var(--accent); }
/* ======================================================================
Lignes ajoutees sans enregistrer (« + Ajouter une ligne », 28/09/2026)
====================================================================== */
.lignes-ajout .ligne-ajout { position: relative; padding-right: 42px; }
.lignes-ajout .ligne-ajout + .ligne-ajout { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bord); }
.retirer-ligne { position: absolute; right: 0; bottom: 2px; width: 34px; height: 38px; border-radius: 8px;
border: 1px solid var(--bord); background: #fff; color: #b42318; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.retirer-ligne:hover { border-color: #b42318; background: #fff5f4; }
.retirer-ligne[hidden] { display: none !important; }
.ajouter-ligne { margin-top: 10px; }
.ajouter-ligne:disabled { opacity: .45; cursor: not-allowed; }
.ligne-ajout { animation: ligne-entree .18s ease-out; }
@keyframes ligne-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ligne-ajout { animation: none; } }
/* Fiche client : une fiche par personne (le tableau debordait de la colonne, avec une barre de defilement) */
.liste-personnes { border-top: 1px solid var(--bord); }
.personne { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 14px;
align-items: start; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.personne-noms { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.personne-noms input { flex: 1 1 110px; min-width: 0; }
.personne-type select { width: 100%; }
.personne-qui .codes, .personne-etat .codes { overflow-wrap: anywhere; }
.personne-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }
@media (max-width: 700px) {
.personne { grid-template-columns: minmax(0, 1fr); }
.personne-actions { justify-content: flex-start; }
}
/* Promotions : groupes entiers et selection gardee d'une recherche a l'autre */
.ligne-ajout .champ-large { grid-column: span 2; }
.promo-communs { margin: 10px 0 4px; }
.recherche-promo { margin-bottom: 4px; }
.selection-promo { margin: 10px 0; padding: 10px 12px 4px; border-radius: 10px; background: #f3faf9;
border: 1px solid #bfe5e1; }
.selection-promo[hidden] { display: none !important; }
.retirer-sel { position: static; width: 32px; height: 32px; }
@media (max-width: 700px) { .ligne-ajout .champ-large { grid-column: 1 / -1; } }
/* Liste des clients (gestion) : tient dans la carte ; une longue adresse e-mail passe a la ligne */
.liste-clients td { vertical-align: top; }
.liste-clients .email-client { overflow-wrap: anywhere; max-width: 260px; }
.liste-clients .accuse .badge { white-space: nowrap; }
/* ======================================================================
BONS DE TRANSFERT (28/09/2026) — module des agents : TELEPHONE seulement
====================================================================== */
.seulement-mobile { display: none; }
@media (pointer: coarse) { .seulement-mobile { display: block; } .seulement-ordinateur { display: none; } }
.nav a.nav-mobile-seul { display: none; }
@media (pointer: coarse) { .nav a.nav-mobile-seul { display: inline-flex; } }
@media (pointer: coarse) and (max-width: 1023px) { .nav a.nav-mobile-seul { display: block; } }
.tableau-depots th, .tableau-depots td { white-space: nowrap; }
.tableau-depots td:first-child { white-space: normal; min-width: 200px; }
/* titres des depots sur deux lignes : le tableau tient sur un ordinateur de 1366 px (29/09/2026) */
.tableau-depots thead th { white-space: normal; max-width: 118px; vertical-align: bottom; }
.tableau-depots .depot-livraison { background: #f3f7fc; }
.tableau-depots .depot-ok { color: #1a7f37; font-weight: 700; }
.tableau-depots .depot-manque { color: #b45309; font-weight: 700; background: #fff7ed; }
.carte-transfert { display: block; margin-bottom: 10px; }
.carte-transfert-lien { display: block; text-decoration: none; color: inherit; }
.carte-transfert-actions { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--bord); }
.carte-transfert-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carte-transfert-trajet { font-size: 1.05rem; margin: 4px 0; }
/* « QUI LIVRE ? » (29/09/2026) : pastille de la liste, carte du bon, 3 boutons sur une ligne */
.pastille-livreur { display: inline-block; margin: 2px 0 4px; padding: 3px 10px; border-radius: 999px; font-size: .82rem;
font-weight: 700; }
.pastille-livreur.ok { background: #dcf5e4; color: #1a7f37; }
.pastille-livreur.attente { background: #fff1d6; color: #9a5b00; }
.qui-livre { border: 2px solid var(--sg-vert, #1597d4); margin-bottom: 14px; }
.qui-livre h2 { margin: 0 0 4px; font-size: 1.1rem; }
.qui-livre p { margin: 0 0 10px; }
.qui-livre-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qui-livre-boutons form { display: contents; }
.qui-livre-boutons .btn { justify-content: center; text-align: center; white-space: normal; min-height: 46px; }
.qui-livre-boutons .btn-non { color: #b42318; border-color: #f0c2bd; }
@media (max-width: 420px) { .qui-livre-boutons .btn { font-size: .9rem; padding-left: 6px; padding-right: 6px; } }
.livraison-prise { border-left: 5px solid #1a7f37; background: #eefaf1; margin-bottom: 14px; }
.livraison-prise strong:first-child { color: #1a7f37; }
.qui-livre-changer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.progression { height: 6px; border-radius: 3px; background: #e5eaf2; margin-top: 8px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--sg-vert, #1597d4); }
.trajet-grand { font-size: 1.1rem; }
.barre-scan-transfert { position: sticky; top: 0; z-index: 5; background: var(--fond, #f4f6fa); padding: 8px 0; }
.barre-scan-transfert .btn-scan { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; }
.liste-transfert { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.ligne-transfert { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center;
background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 10px; }
.ligne-transfert.comptee { border-color: #9dd9b0; background: #f6fcf8; }
.ligne-transfert.ecart { border-color: #f5c38b; background: #fffaf3; }
.ligne-transfert.flash { animation: ligne-flash .8s ease-out; }
@keyframes ligne-flash { from { box-shadow: 0 0 0 4px rgba(43, 178, 168, .55); } to { box-shadow: 0 0 0 0 rgba(43, 178, 168, 0); } }
.ligne-transfert-photo img, .ligne-transfert-photo .vignette { width: 84px; height: 84px; object-fit: contain;
border-radius: 8px; background: #fff; border: 1px solid var(--bord); display: block; }
.ligne-transfert-texte strong { display: block; line-height: 1.25; }
.ligne-transfert-qte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.ligne-transfert-qte .livre { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.ligne-transfert-qte input { width: 86px; text-align: center; font-size: 1.05rem; }
.etat-ligne { font-size: .85rem; font-weight: 700; color: #1a7f37; }
.ligne-transfert.ecart .etat-ligne { color: #b45309; }
.terminer-transfert { margin: 8px 0 24px; }
.scan-transfert-resultat { display: flex; gap: 12px; align-items: flex-start; }
.scan-transfert-resultat img { width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: 8px; flex: none; }
.scan-transfert-texte { min-width: 0; }
.scan-transfert-qte { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-weight: 600; }
.scan-transfert-qte input { width: 90px; text-align: center; font-size: 1.1rem; }
.scan-hors-bon { color: #b42318; font-weight: 600; margin: 0 0 10px; }
/* ======================================================================
COMMANDER POUR UN CLIENT — telephone (28/09/2026) : cartes comme le catalogue, total en bas
====================================================================== */
.resume-barre { display: none; }
.scan-commande { margin-bottom: 10px; }
@media (max-width: 700px) {
.commande-smam .carte-tableau { background: none; border: 0; box-shadow: none; padding: 0; }
.commande-smam .tableau-commande tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.commande-smam .tableau-commande tr.ligne-article { display: flex; flex-direction: column; gap: 6px; padding: 10px;
background: #fff; border: 1px solid var(--bord); border-radius: 12px; min-width: 0; }
.commande-smam .tableau-commande tr.ligne-article.dans-commande { background: #f2fbf6; border-color: #9dd9b0;
box-shadow: none; }
.commande-smam .tableau-commande tr.ligne-article td { display: block; padding: 0; text-align: left;
background: none; box-shadow: none; }
.commande-smam .tableau-commande td[data-label]::before { display: none !important; }
.commande-smam .tableau-commande tr.ligne-article td.c-img { width: auto; }
.commande-smam .tableau-commande tr.ligne-article .c-img .vignette { width: 100%; height: auto; aspect-ratio: 1;
object-fit: contain; }
.commande-smam .tableau-commande tr.ligne-article td.c-prix,
.commande-smam .tableau-commande tr.ligne-article td.c-total { display: none; }
.commande-smam .tableau-commande .designation-ligne { font-size: .86rem; line-height: 1.3; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.commande-smam .tableau-commande .codes { font-size: .7rem; }
.commande-smam .tableau-commande .habituel { display: none; }
.commande-smam .tableau-commande .c-prix { display: none; }
.commande-smam .tableau-commande .c-net { font-size: 1.05rem; order: 3; }
.commande-smam .tableau-commande .c-remise { order: 4; font-size: .78rem; }
.commande-smam .tableau-commande .c-remise .petit { display: none; }
/* stock, prix, remise et quantite cales EN BAS : deux fiches voisines restent alignees meme si l'une a un nom
plus long (proprietaire, 29/09/2026 : « pourquoi il y a decalage ») */
.commande-smam .tableau-commande .c-dispo { order: 2; font-size: .78rem; margin-top: auto; }
.commande-smam .tableau-commande .c-qte { order: 5; }
.commande-smam .tableau-commande .c-qte .quantite { width: 100%; }
.commande-smam .tableau-commande .c-qte .quantite input { flex: 1; min-width: 0; }
.commande-smam .tableau-commande .c-total { display: none; }
.commande-smam .tableau-commande tr.plus-lignes { grid-column: 1 / -1; display: block; }
/* total et detail : toujours EN BAS de l'ecran ; un toucher deplie le recapitulatif et « Valider » */
.commande-smam { padding-bottom: 90px; }
.commande-smam .colonne-smam { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
display: block; height: auto;
background: #fff; border-top: 2px solid var(--sg-vert, #1597d4); box-shadow: 0 -10px 30px rgba(8, 16, 40, .18);
max-height: 82vh; overflow: auto; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.commande-smam .colonne-smam > * { display: none; }
.commande-smam .colonne-smam > .resume-smam { display: block; margin: 0; border: 0; box-shadow: none; padding: 0; }
.commande-smam .colonne-smam .resume-smam > :not(.resume-barre) { display: none; }
.commande-smam .colonne-smam.ouvert > * { display: block; }
.commande-smam .colonne-smam.ouvert .resume-smam > :not(.resume-barre) { display: revert; }
.commande-smam .colonne-smam.ouvert > form { margin-top: 12px; }
/* detail deplie : tous les totaux (le telephone du CLIENT n'affiche que le TTC dans sa barre) */
.commande-smam .colonne-smam.ouvert .resume-chiffres { display: block; }
.commande-smam .colonne-smam.ouvert .resume-chiffres > div { display: flex !important; justify-content: space-between;
gap: 12px; padding: 6px 0; font-size: .92rem; }
.commande-smam .colonne-smam.ouvert .resume-chiffres .resume-net { border-top: 1px solid var(--bord); margin-top: 4px;
padding-top: 10px; }
.commande-smam .colonne-smam.ouvert .resume-chiffres .resume-ttc { border-top: 2px solid var(--encre); margin-top: 6px;
padding-top: 10px; font-size: 1.05rem; }
.resume-barre { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 4px; background: none; border: 0; font: inherit; color: var(--encre); cursor: pointer;
position: sticky; top: 0; background: #fff; }
.resume-barre-nb { font-size: .9rem; }
.resume-barre-total { font-weight: 800; font-size: 1.08rem; margin-left: auto; }
.resume-barre-voir::after { content: "▲"; font-size: .8rem; color: var(--doux); }
.colonne-smam.ouvert .resume-barre-voir::after { content: "▼"; }
.resume-barre.pulse { animation: barre-pulse .7s ease-out; }
@keyframes barre-pulse { 0% { background: #d9f5ef; } 100% { background: #fff; } }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .resume-barre.pulse { animation: none; } }
/* validation d'une commande par SMAM : l'ancre ne passe pas sous l'en-tete fixe (28/09/2026) */
#valider-commande { scroll-margin-top: 96px; }
/* Stock par depot : UN tableau, ordinateur et telephone (proprietaire, 29/09/2026 : « tableau horizontal pour la
version mobile »). Sur telephone : colonne Article FIXE a gauche, les depots defilent du doigt. */
.tableau-depots .a-transferer strong { color: #b45309; }
.tableau-depots .a-transferer.ok { color: #1a7f37; font-weight: 700; }
.tableau-depots .a-transferer.manque .petit { color: #b42318; font-weight: 700; white-space: nowrap; }
.defile-aide { display: none; }
@media (max-width: 700px) {
.tableau-depots-bloc { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
border: 1px solid var(--bord); border-radius: 10px; }
.tableau-depots { font-size: .84rem; border-collapse: separate; border-spacing: 0; min-width: 100%; }
.tableau-depots th, .tableau-depots td { padding: 8px 8px; white-space: nowrap; }
.tableau-depots td.col-article { overflow-wrap: anywhere; }
.tableau-depots thead th { white-space: normal; min-width: 58px; max-width: 86px; font-size: .7rem; line-height: 1.2;
vertical-align: bottom; }
.tableau-depots td.col-article, .tableau-depots th.col-article { position: sticky; left: 0; z-index: 2; background: #fff; white-space: normal;
width: 124px; min-width: 124px; max-width: 124px; box-shadow: 1px 0 0 var(--bord), 6px 0 8px -6px rgba(22, 34, 60, .25); }
.tableau-depots thead .col-article { z-index: 3; background: #f4f6fa; }
.tableau-depots td.col-article strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; font-size: .78rem; line-height: 1.25; }
.tableau-depots td.col-article .codes { font-size: .7rem; }
.tableau-depots td.nombre { font-size: .95rem; }
.defile-aide { display: block; margin: 6px 0 0; }
}
/* Bons de transfert — scan obligatoire, photo du colis, rapport (28/09/2026) */
.photos-transfert { margin: 10px 0; }
.photos-transfert .bouton-photo { width: 100%; justify-content: center; margin-top: 8px; }
.vignettes-colis { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vignettes-colis figure { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vignettes-colis img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bord); background: #fff; }
.ligne-transfert-qte { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.a-la-main { color: #b45309; margin-top: 4px; }
/* comptage a la main sur toute la largeur de la carte : - [quantite] + « Tout (N) » (28/09/2026, soir) */
.ligne-transfert > .compte-ligne, .ligne-transfert > .motif-ligne, .ligne-transfert > .erreur-ligne { grid-column: 1 / -1; }
.compte-ligne { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px auto; gap: 8px; align-items: center; }
.compte-ligne .btn { min-height: 46px; justify-content: center; padding: 0 12px; font-size: 1.15rem; }
.compte-ligne [data-tout] { font-size: .95rem; white-space: nowrap; }
.compte-ligne input { min-height: 46px; text-align: center; font-size: 1.15rem; font-weight: 700; width: 100%; min-width: 0; }
.motif-ligne { display: grid; gap: 4px; color: var(--doux); }
.motif-ligne[hidden], .compte-ligne[hidden], .erreur-ligne[hidden] { display: none; }
.erreur-ligne { color: #b42318; font-weight: 600; margin: 0; }
.bon-complet { margin: 10px 0; }
.etape-transfert { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 18px 0 6px; }
.etape-transfert span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
background: var(--sg-marine, #0b2a5c); color: #fff; font-size: .95rem; }
.photos-transfert .obligatoire { color: #b42318; font-weight: 700; }
.photos-transfert.photo-attendue { border-color: #f5c38b; }
.photos-transfert .photo-requise { margin: 8px 0 0; }
.scan-bon-complet { color: #1a7f37; font-weight: 700; margin-top: 4px; }
.rapport-mobile { margin-top: 16px; }
.rapport-mobile > summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.tableau-scans tr.scan-rapide td { background: #fff7ed; }
.tableau-scans tr.scan-hors td { color: #b42318; }
/* Notifications : cloche de l'en-tete, historique ; mise a jour automatique des pages (28/09/2026) */
.cloche { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 10px; color: #fff; text-decoration: none; }
.cloche:hover, .cloche.actif { background: rgba(255, 255, 255, .12); }
.cloche-nb { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: #e5484d; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.liste-notifs { list-style: none; margin: 0; padding: 0; }
.liste-notifs li { border-top: 1px solid var(--bord); }
.liste-notifs li:first-child { border-top: 0; }
.liste-notifs a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 4px; color: inherit; text-decoration: none; }
.liste-notifs a:hover { background: #f6f8fb; }
.liste-notifs .notif-titre { font-weight: 600; }
.liste-notifs .notif-texte { grid-column: 1; color: var(--doux); font-size: .88rem; }
.liste-notifs .notif-quand { grid-column: 2; grid-row: 1; color: var(--doux); font-size: .78rem; white-space: nowrap; }
.liste-notifs li.non-lue .notif-titre::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
border-radius: 50%; background: #003da6; vertical-align: middle; }
.liste-notifs.compacte a { padding: 8px 2px; }
.bandeau-maj { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px;
align-items: center; padding: 10px 14px; background: #0b2a5c; color: #fff; border-radius: 12px;
box-shadow: 0 10px 30px rgba(8, 16, 40, .3); max-width: calc(100vw - 32px); }
/* Scan ameliore (28/09/2026) : lampe, zoom, cadre vert a la lecture, code tape a la main */
.scan-outils { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.scan-outil { background: rgba(12, 20, 48, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
padding: 8px 14px; font: inherit; font-size: .88rem; }
.scan-outil[aria-pressed="true"] { background: #f5b83d; color: #0b2a5c; border-color: #f5b83d; }
.scan-outil[hidden] { display: none !important; }
.scan-cadre.lu span { border-color: #34d399 !important; box-shadow: 0 0 0 9999px rgba(12, 20, 48, .55), 0 0 22px #34d399; }
.scan-manuel { display: flex; gap: 8px; padding: 0 16px 12px; }
.scan-manuel input { flex: 1; min-width: 0; font-size: 16px; }
/* Bon de transfert : etape 3 « Valider le transfert » (28/09/2026, soir) */
.valider-transfert { margin: 4px 0 18px; }
.valider-transfert[hidden], .terminer-transfert[hidden] { display: none; }
.btn-valider { background: #1a7f37; border-color: #1a7f37; color: #fff; justify-content: center; }
.btn-valider:hover { background: #166b2f; }
/* Module Transferts ouvert sur ordinateur (28/09/2026) : meme page ; la VALIDATION reste sur telephone / tablette
(ecran tactile) — sur ordinateur, a sa place, une note. Controle aussi cote serveur (champ « tactile »). */
.seulement-souris { display: none; }
@media (hover: hover) and (pointer: fine) {
.seulement-tactile { display: none !important; }
.seulement-souris { display: block; }
}
/* pleine largeur, comme les autres pages de la gestion (audit du 29/09/2026 : colonne etroite sur ordinateur) */
.page-transfert, .liste-bons-transfert { max-width: none; }
.compte-ligne { max-width: 460px; }
/* ======================================================================
ESPACE CLIENT — barre du TOTAL de la commande, en bas de l'ecran (29/09/2026)
Telephone et tablette (<= 1280 px) : Catalogue, Commander, Promotions, Accueil.
Monte au premier article (transition : htmx garde un instant l'ancienne classe « vide »),
clignote a chaque changement du total (classe « pulse » posee par portal.js).
Sur « Commander », elle remplace l'ancien recapitulatif fixe du bas.
====================================================================== */
.barre-commande { display: none; }
@media (max-width: 1280px) {
.barre-commande { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
background: #fff; border-top: 3px solid var(--sg-vert); box-shadow: 0 -8px 26px rgba(8, 16, 40, .18);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
transform: none; opacity: 1; transition: transform .45s cubic-bezier(.2, 1.25, .35, 1), opacity .25s ease-out; }
.barre-commande.vide { transform: translateY(130%); opacity: 0; pointer-events: none; }
.barre-commande-lien { display: flex; align-items: center; gap: 12px; max-width: 960px; margin: 0 auto;
color: inherit; text-decoration: none; }
.barre-commande-lien:hover { color: inherit; }
.barre-commande-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.barre-commande-ligne { font-size: .8rem; color: var(--doux); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.barre-commande-manque { color: #b54708; font-weight: 700; }
.barre-commande-remise { color: var(--vert-fonce); font-weight: 700; }
.barre-commande-total { font-size: .82rem; color: var(--doux); white-space: nowrap; }
.barre-commande-total b { display: inline-block; font-size: 1.28rem; font-weight: 800; color: var(--encre);
transform-origin: left center; }
.barre-commande-btn { flex: none; padding: 12px 20px; font-size: 1rem; }
.barre-commande.pulse { animation: barre-commande-flash .9s ease-out; }
.barre-commande.pulse .barre-commande-total b { animation: barre-commande-saut .5s ease-out; }
@keyframes barre-commande-flash { 0% { background: #d4f3ec; } 100% { background: #fff; } }
@keyframes barre-commande-saut { 0% { transform: scale(1); } 35% { transform: scale(1.14); color: var(--vert-fonce); }
100% { transform: scale(1); } }
/* le bas de la page (derniers articles, « Afficher plus ») reste visible au-dessus de la barre */
main.page:has(#barre-commande:not(.vide)) { padding-bottom: 100px; }
body:has(#barre-commande:not(.vide)) .bandeau-maj { bottom: 104px; }
/* « Commander » : la barre remplace l'ancien recapitulatif fixe (le detail reste sur la page Brouillon) */
.commande-rapide .resume-commande { display: none !important; }
.commande-rapide { padding-bottom: 0; }
}
/* Telephone et tablette : contenu de la barre remonte d'environ 4 mm (24 px), loin du trait d'accueil de
l'iPhone (proprietaire, 29/09/2026 : « tirer vers le haut un peu, 5 mm max ») ; le fond descend toujours au bord */
@media (max-width: 1280px) and (hover: none) {
.barre-commande { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
main.page:has(#barre-commande:not(.vide)) { padding-bottom: 124px; }
body:has(#barre-commande:not(.vide)) .bandeau-maj { bottom: 128px; }
}
@media (prefers-reduced-motion: reduce) {
.barre-commande { transition: none; }
.barre-commande.pulse, .barre-commande.pulse .barre-commande-total b { animation: none; }
}
/* Cartons (29/09/2026) : le carton d'un article dans le bon de transfert, et le resultat du scan d'un carton */
.carton-ligne { font-size: .8rem; color: #003185; font-weight: 600; margin-top: 2px; }
.scan-carton { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 999px; background: #e3f2fa;
color: #003185; font-weight: 700; }
/* ESPACE CLIENT sur PC de 1101 a 1365 px (29/09/2026, capture du proprietaire : « Factures » coupe) : l'en-tete tient
sur UNE ligne — libelle « Espace pro » masque, menu resserre, prenom abrege, « Deconnexion » en icone (son nom
reste dans l'infobulle). La gestion (sans pastille « Brouillon ») n'est pas concernee. */
.icone-sortie { display: none; }
@media (min-width: 1101px) and (max-width: 1365px) {
.entete-int:has(.pastille-brouillon) { gap: 14px; }
.entete:has(.pastille-brouillon) .logo .logo-espace { display: none; }
.entete:has(.pastille-brouillon) .nav { gap: 2px; }
.entete:has(.pastille-brouillon) .nav > a, .entete:has(.pastille-brouillon) .nav-plus > summary { padding: 8px 8px; font-size: .9rem; }
.entete:has(.pastille-brouillon) .utilisateur { gap: 10px; }
.entete:has(.pastille-brouillon) .qui-connecte { display: inline-block; max-width: 110px; overflow: hidden;
text-overflow: ellipsis; vertical-align: middle; }
.entete:has(.pastille-brouillon) .sortie-large .texte-sortie { display: none; }
.entete:has(.pastille-brouillon) .sortie-large .icone-sortie { display: block; }
}
.carton-pastille { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #e3f2fa;
color: #003185; font-size: .76rem; font-weight: 700; white-space: nowrap; }
/* Liste des commandes (gestion) : les 4 filtres sur UNE ligne, meme sur un petit telephone (proprietaire, 29/09/2026) */
@media (max-width: 420px) {
.filtres-commandes { flex-wrap: nowrap; gap: 6px; }
.filtres-commandes .btn { padding-left: 9px; padding-right: 9px; white-space: nowrap; }
}
/* « Commander » : affichage Catalogue (fiches, par defaut) ou Liste — une seule page (proprietaire, 29/09/2026).
Haut de page reorganise le meme jour : deux boutons compacts, scan DANS la recherche, options en pastilles,
choix de l'affichage a droite du nombre d'articles. */
.actions-commande { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions-commande form { margin: 0; }
.actions-commande .btn { display: inline-flex; align-items: center; gap: 7px; }
.actions-commande svg, .scan-dans-recherche svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.scan-dans-recherche { position: absolute; right: 5px; bottom: 5px; width: 36px; height: 36px; padding: 0;
display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px;
background: #e6f6f4; color: var(--marine); cursor: pointer; }
.scan-dans-recherche svg { width: 22px; height: 22px; }
.scan-dans-recherche:active { background: #c9ece7; }
.recherche:has(.scan-dans-recherche:not([hidden])) input { padding-right: 54px; }
.options-pastilles { gap: 8px; }
.options-pastilles .puce { font-size: .86rem; }
.entete-resultats { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.entete-resultats .compteur { margin: 0; flex: 1; min-width: 0; }
.choix-vue { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px;
overflow: hidden; background: #fff; flex: none; }
.choix-vue label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
font-size: .86rem; font-weight: 600; color: var(--encre); cursor: pointer; white-space: nowrap; margin: 0; }
.choix-vue label + label { border-left: 1px solid var(--bord); }
.choix-vue input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-vue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.choix-vue label:has(input:checked) { background: var(--marine); color: #fff; }
.choix-vue label:has(input:focus-visible) { box-shadow: inset 0 0 0 3px rgba(18, 131, 176, .45); }
.choix-vue label:hover:not(:has(input:checked)) { background: #f1f5fa; }
#lignes .grille-produits .habituel { margin-top: 0; }
@media (max-width: 700px) {
.titre-commander h1 { margin-bottom: 2px; }
.titre-commander .doux { font-size: .88rem; }
.actions-commande { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.actions-commande { align-items: stretch; }
.actions-commande form { display: flex; }
.actions-commande form, .actions-commande form .btn, .actions-commande > .btn { width: 100%; height: 100%; margin: 0; }
.actions-commande .btn { justify-content: center; text-align: center; white-space: normal; line-height: 1.2;
padding: 9px 8px; font-size: .84rem; min-height: 44px; }
.options-pastilles { margin-top: 10px; }
.options-pastilles .puce { padding: 6px 11px; font-size: .84rem; }
.entete-resultats .compteur { font-size: .88rem; }
.choix-vue label { padding: 8px 10px; font-size: .84rem; }
}
@media (max-width: 360px) {
.choix-vue label span { display: none; } /* tres petit ecran : les icones seules */
}
/* Gestion › Produits sur TELEPHONE : une fiche par article (proprietaire, 29/09/2026 : « pas bien organise ») —
case + vignette + nom et photo en haut, categorie, puis prix · stock · portail sur une ligne. */
@media (max-width: 700px) {
.tableau-produits > thead { display: none; }
.tableau-produits, .tableau-produits > tbody { display: block; width: auto; }
.tableau-produits > tbody > tr { display: grid; grid-template-columns: 22px 56px 52px repeat(2, minmax(0, 1fr));
gap: 8px 10px; padding: 14px 0; border-bottom: 1px solid var(--bord); align-items: start; }
.tableau-produits > tbody > tr:first-child { padding-top: 4px; }
.tableau-produits > tbody > tr > td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
.tableau-produits .p-choix { grid-column: 1; grid-row: 1; padding-top: 18px; }
.tableau-produits .p-img { grid-column: 2; grid-row: 1; }
.tableau-produits .p-img .vignette { width: 56px; height: 56px; }
.tableau-produits .p-art { grid-column: 3 / -1; grid-row: 1; }
.tableau-produits .p-nom { display: block; font-size: .95rem; line-height: 1.3; }
.tableau-produits .p-art .codes { overflow-wrap: anywhere; }
.tableau-produits .photo-portail { margin-top: 6px; }
.tableau-produits .p-cat { grid-column: 1 / -1; font-size: .84rem; line-height: 1.4; }
.tableau-produits .p-prix { grid-column: 1 / 3; }
.tableau-produits .p-stock { grid-column: 3; }
.tableau-produits .p-portail { grid-column: 4 / -1; }
.tableau-produits .p-cat::before, .tableau-produits .p-prix::before, .tableau-produits .p-stock::before,
.tableau-produits .p-portail::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--doux); margin-bottom: 2px; }
.tableau-produits .p-prix, .tableau-produits .p-stock { font-weight: 700; font-size: .95rem; text-align: left !important; }
.tableau-produits .p-visibilite { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.tableau-produits .plus-lignes { display: block; }
.tableau-produits .plus-lignes > td { display: block; }
.defile:has(> .tableau-produits) { overflow: visible; }
}
/* Fiche client › Encours : liste COMPACTE (29/09/2026, « beaucoup d'espace perdu ») — 2 a 3 lignes par facture */
.liste-encours { list-style: none; margin: 0; padding: 0; }
.liste-encours li { padding: 9px 0; border-top: 1px solid var(--bord); }
.liste-encours li:first-child { border-top: 0; padding-top: 2px; }
.enc-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enc-tete .badge { margin-left: auto; }
.enc-tete .doux { font-size: .86rem; }
.enc-montants { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; color: var(--doux); margin-top: 2px; }
.enc-montants b { color: var(--encre); font-weight: 700; }
.enc-echeance { font-size: .8rem; line-height: 1.35; }
/* Fiche commande › quantites du BC : selecteur COMPACT (29/09/2026 : « c'est quoi la partie vide en blanc devant »,
le cadre prenait toute la largeur de la cellule, boutons pousses a droite) */
.quantite.quantite-bc { display: inline-flex; }
/* Connexion › code : l'adresse saisie bien visible et corrigeable (29/09/2026 : « meme si l'e-mail n'est pas
enregistre, on voit code envoye ») — meme ecran pour toute adresse, par securite */
.code-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 12px;
padding: 10px 12px; background: #f4f6fa; border-radius: 10px; }
.code-adresse span { width: 100%; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--doux); }
.code-adresse strong { font-size: 1.05rem; overflow-wrap: anywhere; flex: 1; min-width: 0; }
/* Visionneuse : impression des pages rendues (Android) — sans la barre ni l'en-tete, une page PDF par feuille */
@media print {
.barre-document, #etat-pdf { display: none !important; }
.pages-pdf .page-pdf { break-after: page; page-break-after: always; margin: 0; box-shadow: none; }
.pages-pdf .page-pdf canvas { width: 100% !important; height: auto !important; }
}
/* « Commander pour un client » sur telephone : les DEUX fiches d'une ligne partagent les memes rangees (subgrid) —
photo, nom, references, carton, stock, prix, remise et quantite a la meme hauteur, quel que soit le contenu de la
voisine (proprietaire, 29/09/2026 : « toujours un decalage, les cartons ne sont pas alignes »). Sans subgrid
(navigateur ancien) : chaque fiche garde sa propre mise en page. */
@supports (grid-template-rows: subgrid) {
@media (max-width: 700px) {
.commande-smam .tableau-commande tbody { row-gap: 0; column-gap: 10px; grid-auto-rows: auto; }
.commande-smam .tableau-commande tr.ligne-article { display: grid; grid-row: span 8; grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
row-gap: 6px; margin-bottom: 10px; align-content: start; }
.commande-smam .tableau-commande tr.ligne-article td.c-art { display: contents; }
/* une seule colonne : annule les colonnes du tableau « tablette » (c-net en colonne 4, etc.) */
.commande-smam .tableau-commande tr.ligne-article > td, .commande-smam .tableau-commande tr.ligne-article .designation-ligne,
.commande-smam .tableau-commande tr.ligne-article .codes, .commande-smam .tableau-commande tr.ligne-article .carton-pastille
{ grid-column: 1 / -1; }
.commande-smam .tableau-commande tr.ligne-article > .c-img { grid-row: 1; }
.commande-smam .tableau-commande tr.ligne-article .designation-ligne { grid-row: 2; }
.commande-smam .tableau-commande tr.ligne-article .codes { grid-row: 3; }
.commande-smam .tableau-commande tr.ligne-article .carton-pastille { grid-row: 4; justify-self: start; align-self: start; }
.commande-smam .tableau-commande tr.ligne-article > .c-dispo { grid-row: 5; margin-top: 0; }
.commande-smam .tableau-commande tr.ligne-article > .c-net { grid-row: 6; }
.commande-smam .tableau-commande tr.ligne-article > .c-remise { grid-row: 7; }
.commande-smam .tableau-commande tr.ligne-article > .c-qte { grid-row: 8; align-self: end; }
.commande-smam .tableau-commande tr.plus-lignes { grid-row: auto; }
}
}
/* Fiches du CATALOGUE client (Commander, Promotions, Accueil) : memes rangees pour toutes les fiches d'une ligne
(subgrid) — marque, nom, references, carton, habituel, disponibilite, prix, quantite a la meme hauteur
(proprietaire, 29/09/2026 : « aussi la partie commande client »). Espacement par marges : une rangee vide
dans toute la ligne ne laisse aucun blanc. Sans subgrid : l'ancienne mise en page. */
@supports (grid-template-rows: subgrid) {
.grille-produits:has(> .produit-aligne) { row-gap: 0; }
.produit-aligne { display: grid; grid-row: span 11; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
row-gap: 0; margin-bottom: 16px; padding-bottom: 14px; align-content: start; }
.produit-aligne > .produit-corps { display: contents; }
.produit-aligne > .produit-image { grid-row: 1; }
.produit-aligne > .produit-corps > * { grid-column: 1 / -1; margin: 6px 14px 0; min-width: 0; }
.produit-aligne .marque { grid-row: 2; margin-top: 12px; }
.produit-aligne .designation { grid-row: 3; }
.produit-aligne .codes { grid-row: 4; }
.produit-aligne .carton-pastille { grid-row: 5; justify-self: start; align-self: start; }
.produit-aligne .habituel { grid-row: 6; }
.produit-aligne .produit-statut { grid-row: 7; }
.produit-aligne .prix-bloc { grid-row: 8; padding-top: 0; }
.produit-aligne .ajout, .produit-aligne .rupture-note { grid-row: 9; align-self: end; }
.produit-aligne .ajout { margin-top: 10px; }
.produit-aligne .deja { grid-row: 10; }
.produit-aligne .retour-ajout { grid-row: 11; }
@media (max-width: 700px) {
.produit-aligne { margin-bottom: 10px; padding-bottom: 10px; }
.produit-aligne > .produit-corps > * { margin: 3px 9px 0; }
.produit-aligne .marque { margin-top: 8px; }
.produit-aligne .ajout { margin-top: 6px; }
}
}
/* ECRAN D'ATTENTE (29/09/2026) : monogramme SG seul, fond transparent (proprietaire), pour toute attente qui depasse
un instant (clients et gestion). Les feuilles s'allument du bas vers le haut, en boucle ; les lettres restent fixes. */
.attente-portail { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
background: rgba(16, 28, 64, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* PIEGE (mesure du 29/09/2026) : pendant un changement de page, WebKit et Chromium FIGENT les animations de la page
quittee. Un fondu qui part de l'invisible y restait donc invisible (l'ecran « n'apparaissait jamais » sur iPhone).
Rien ne part de l'invisible : l'ecran s'affiche d'un coup, les feuilles commencent allumees. */
.attente-boite { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.attente-sg { display: block; width: 92px; height: auto; overflow: visible; }
.attente-sg .sg-feuille { transform-box: fill-box; transform-origin: 50% 100%;
animation: attente-feuille 1.5s ease-in-out infinite; }
.attente-sg .sg-milieu { animation-delay: .18s; }
.attente-sg .sg-haut { animation-delay: .36s; }
.attente-boite p { margin: 0; color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
/* secours : message et fermeture d'un appui apres quelques secondes (portal.js, classe « longue ») */
.attente-boite .attente-secours { display: none; max-width: 260px; text-align: center; font-weight: 400; font-size: .88rem;
opacity: .85; }
.attente-portail.longue { cursor: pointer; }
.attente-portail.longue .attente-secours { display: block; }
@keyframes attente-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes attente-feuille { 0%, 100% { opacity: 1; transform: none; }
45% { opacity: .22; transform: translateY(8%) scale(.92); } }
/* autre societe du portail (26/10/2026 : « meme l'animation d'attente s'affiche avec le logo de Garden ») : SON logo,
qui respire ; il commence PLEIN (meme piege que les feuilles : animation figee pendant un changement de page) */
.attente-logo { display: block; width: 120px; height: 120px; object-fit: contain;
animation: attente-respire 1.5s ease-in-out infinite; }
@keyframes attente-respire { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .55; transform: scale(.93); } }
@media (prefers-reduced-motion: reduce) {
.attente-sg .sg-feuille { animation: none; }
.attente-logo { animation: none; }
}
@media print { .attente-portail { display: none !important; } }
/* BARRE D'ETAPE de la fiche commande (gestion, 29/09/2026) : suit la page (collee en bas de l'ecran) ; valider la
commande -> valider le BC dans NeXus (compte principal) -> preparer les bons de transfert */
.barre-etape { position: sticky; bottom: 12px; z-index: 40; margin-top: 20px; display: flex; align-items: center;
justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px;
background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--sg-vert);
box-shadow: 0 10px 30px rgba(16, 28, 64, .18); }
.barre-etape-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barre-etape-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.barre-etape-boutons form { margin: 0; }
@media (max-width: 700px) {
.barre-etape { bottom: 8px; padding: 10px 12px; gap: 8px; }
.barre-etape-texte .petit, .barre-etape .sur-pc { display: none; }
.barre-etape > .btn, .barre-etape-boutons { width: 100%; }
.barre-etape-boutons form { flex: 1 1 0; min-width: 0; }
.barre-etape-boutons .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
.barre-etape > .btn, .barre-etape-boutons .btn { justify-content: center; }
}
@media print { .barre-etape { display: none !important; } }
/* AUDIT D'AFFICHAGE (29/09/2026) — telephone : champs lisibles en entier */
@media (max-width: 700px) {
/* fiche d'un tableau empile : une cellule qui porte un champ met l'etiquette AU-DESSUS et le champ pleine largeur */
table.empile > tbody > tr > td[data-label]:not([data-label=""]):has(> input[type=text], > input[type=email],
> .valeur > input[type=text], > .valeur > input[type=email], > select, > .valeur > select) { display: block !important; }
table.empile > tbody > tr > td:has(> input[type=text], > input[type=email], > .valeur > input[type=text],
> .valeur > input[type=email], > select, > .valeur > select)::before { display: block; margin-bottom: 4px; }
/* listes deroulantes a largeur « auto » : toute la largeur, le texte choisi n'est plus coupe */
.carte select[style*="width:auto"] { width: 100% !important; max-width: none !important; }
.ligne-ajout.form-reglement { grid-template-columns: minmax(0, 1fr); }
}
/* boutons dans un tableau : jamais replies sur plusieurs lignes (« Voir / le / PDF » sur iPad) */
.tableau .btn { white-space: nowrap; }
.grille-2.aligne-haut { align-items: start; } /* cartes voisines a leur propre hauteur (accueil du client) */
@media (min-width: 701px) and (max-width: 1100px) { /* tablette : lignes d'ajout moins tassees (listes lisibles) */
.ligne-ajout.form-reglement { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 700px) { .sur-pc { display: none; } } /* complement de libelle, masque sur telephone */
@media (min-width: 701px) { .page-transfert .compte-ligne { max-width: 460px; } } /* ordinateur : compteur compact */
/* JOURNAL (administrateurs, 29/09/2026) : portail et NeXus, une ligne par evenement, groupees par jour */
.filtres-journal { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.filtres-journal .champ { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filtres-journal .champ-recherche-journal { flex: 2 1 220px; }
.filtres-journal .case { margin: 0 0 8px; }
.journal-jour { margin-bottom: 16px; }
.journal-date { font-size: 1rem; margin: 0 0 6px; color: var(--marine, #0b2a5c); text-transform: capitalize; }
.journal-liste { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--bord, #e3e7ef);
border-radius: 12px; overflow: hidden; }
.journal-ligne { display: flex; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--bord, #e3e7ef);
border-left: 4px solid transparent; }
.journal-ligne:first-child { border-top: 0; }
.journal-ligne.source-nexus { border-left-color: #f5b83d; }
.journal-heure { flex: none; width: 44px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--doux, #5b6480); }
.journal-corps { min-width: 0; flex: 1; }
.journal-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.journal-role { font-size: .78rem; color: var(--doux, #5b6480); }
.journal-cat { font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #eef1f5;
color: #33405e; }
.journal-cat.cat-commandes, .journal-cat.cat-transferts { background: #e3f2fa; color: #0f5f86; }
.journal-cat.cat-connexions { background: #eef1f5; color: #4a5470; }
.journal-cat.cat-clients, .journal-cat.cat-equipe { background: #efe8fb; color: #5b3aa0; }
.journal-cat.cat-promotions, .journal-cat.cat-produits { background: #e6f6f4; color: #1d7a73; }
.journal-cat[class*="cat-nexus"] { background: #fff1d6; color: #8a5300; }
.journal-quoi { margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }
.journal-detail { font-size: .88rem; color: var(--doux, #5b6480); overflow-wrap: anywhere; }
@media (max-width: 700px) {
.journal-ligne { padding: 9px 10px; gap: 8px; }
.journal-heure { width: 38px; font-size: .9rem; }
.filtres-journal .champ { flex: 1 1 45%; min-width: 0; }
}
/* CATALOGUE PDF (29/09/2026) : choix des marques (client) et page de reglages (gestion) */
.grille-marques { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.carte-marque { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff;
border: 2px solid var(--bord, #e3e7ef); border-radius: 14px; cursor: pointer; }
.carte-marque:has(input:checked) { border-color: var(--sg-vert, #1597d4); box-shadow: 0 0 0 3px rgba(43, 178, 168, .15); }
.carte-marque input { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
.carte-marque-logo { height: 54px; display: flex; align-items: center; }
.carte-marque-logo img { max-height: 46px; max-width: 80%; object-fit: contain; }
.carte-marque-logo strong { font-size: 1.3rem; color: var(--marine, #0b2a5c); }
.carte-marque-texte { display: flex; flex-direction: column; }
.actions-catalogue { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.actions-catalogue .btn { gap: 8px; }
.reglages-catalogue .cases-avis { margin-top: 6px; }
.preparer-catalogue { margin-bottom: 16px; }
.titre-choix-catalogue { font-size: 1rem; margin: 6px 0 10px; color: var(--marine, #0b2a5c); }
.options-catalogue { align-items: flex-start; gap: 12px 24px; margin-bottom: 8px; }
.options-catalogue .champ { flex: 1 1 260px; min-width: 0; }
.options-catalogue select, .options-catalogue input[type=date] { width: 100%; max-width: 420px; }
@media (max-width: 700px) {
.grille-marques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.carte-marque { padding: 12px; }
.carte-marque-logo { height: 40px; }
.carte-marque-logo img { max-height: 34px; }
}
/* ARTICLES A ECOULER (Promotions, administrateurs ; 29/09/2026) */
.badge-orange { background: #fff1e0; color: #a85a00; }
.tuiles-ecouler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuile-ecouler { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--bord, #dde2ec);
border-radius: 12px; text-decoration: none; color: inherit; border-top: 4px solid #cfd6e4; }
.tuile-ecouler strong { font-size: 1.6rem; color: var(--marine, #0b2a5c); line-height: 1.1; }
.tuile-ecouler.niveau-dormant { border-top-color: #d64545; }
.tuile-ecouler.niveau-tres_lent { border-top-color: #e08a1e; }
.tuile-ecouler.niveau-lent { border-top-color: #3a78c2; }
.tuile-ecouler.total { border-top-color: var(--sg-vert, #1597d4); background: #f4faf9; }
.tuile-ecouler.actif { box-shadow: 0 0 0 3px rgba(43, 178, 168, .25); }
.filtres-ecouler { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 16px; }
.filtres-ecouler .champ { flex: 1 1 170px; min-width: 0; margin: 0; }
.entete-ecouler { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-ecouler { display: flex; gap: 10px; align-items: flex-start; }
@media (min-width: 1101px) { .art-ecouler { min-width: 230px; } }
.tableau-ecouler td { vertical-align: top; }
.tableau-ecouler tr.niveau-dormant td:first-child { box-shadow: inset 3px 0 0 #d64545; }
.tableau-ecouler tr.niveau-tres_lent td:first-child { box-shadow: inset 3px 0 0 #e08a1e; }
.action-ecouler { margin-top: 16px; }
.action-ecouler .en-ligne .champ { flex: 1 1 200px; min-width: 0; }
@media (max-width: 900px) { .tuiles-ecouler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-ecouler { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 16px; text-decoration: none; color: inherit; border-left: 5px solid #d64545; }
.carte-ecouler:hover { box-shadow: 0 2px 10px rgba(28, 44, 96, .12); }
.tableau-ecouler td:nth-child(3) { min-width: 190px; }
.tableau-ecouler .prix-ecouler { white-space: nowrap; }
.tableau-ecouler .remise-max { white-space: nowrap; margin-bottom: 4px; }
/* Marges : actions d'une planification sur une ligne ; options de la page d'une planification (30/09/2026) */
.actions-planif { white-space: nowrap; }
.actions-planif form { display: inline; }
.options-planif .champ { flex: 1 1 200px; min-width: 0; }
/* BI (tableau de bord et page BI, administrateurs ; 30/09/2026) */
.bi-resume { margin-bottom: 20px; }
.tuiles-bi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tuile-bi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: #fff; text-decoration: none;
color: inherit; border: 1px solid var(--bord, #dde2ec); border-radius: 12px; border-top: 4px solid var(--marine, #0b2a5c); }
.tuile-bi strong { font-size: 1.55rem; color: var(--marine, #0b2a5c); line-height: 1.15; }
.tuile-bi .etiquette { font-weight: 600; color: var(--doux, #5b6480); }
.tuile-bi.tuile-echeance { border-top-color: var(--sg-vert, #1597d4); }
.tuile-bi:hover { box-shadow: 0 2px 10px rgba(28, 44, 96, .12); }
.texte-vert { color: var(--vert-fonce, #167068); }
.onglets-bi { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.onglets-bi a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bord, #dde2ec); background: #fff;
text-decoration: none; color: var(--marine, #0b2a5c); font-weight: 600; }
.onglets-bi a.actif { background: var(--marine, #0b2a5c); color: #fff; border-color: var(--marine, #0b2a5c); }
.tableau-compare .ligne-forte td { background: #f4faf9; }
.titre-echeances { font-size: 1rem; margin: 16px 0 8px; }
@media (max-width: 1000px) { .tuiles-bi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tuile-bi strong { font-size: 1.3rem; } .tuile-bi { padding: 12px; } }
/* E-mails que je recois (30/09/2026) */
.cases-courriels { display: grid; gap: 10px; }
/* page Notifications (01/10/2026, « ameliorer l affichage ») : les deux cartes l une sous l autre, pleine largeur ;
les cases des e-mails en colonnes (plus de carte etroite et haute a cote d une carte courte) */
.pile-notifications { display: grid; gap: 16px; margin-bottom: 16px; }
.pile-notifications .cases-courriels { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px 28px; }
.cases-courriels .case { align-items: flex-start; }
.cases-courriels .case input { flex: none; margin-top: 3px; }
/* Mentions de stock longues (« Il reste 1 article de présentation — Sfax — magasin », 30/09/2026) : sur une fiche,
elles passent a la ligne au lieu d'etre coupees par le bord de la carte, sur ordinateur aussi */
.produit .badge, .scan-carte .badge, .c-dispo .badge { white-space: normal; max-width: 100%; line-height: 1.25; }
.presentation-stock { color: var(--ambre-fonce, #9a5b00); font-weight: 600; margin-top: 3px; }
/* IMPORT DU BON DE COMMANDE (01/10/2026) */
.import-bc { display: inline-flex; margin: 0; }
.import-bc label.btn { cursor: pointer; }
.import-bc label.desactive { opacity: .55; pointer-events: none; }
.rapport-bc .tableau td { vertical-align: top; }
.rapport-bc .ecart { color: var(--ambre-fonce, #9a5b00); font-weight: 700; }
.rapport-bc .ok { color: var(--vert-fonce); font-weight: 700; }
.rapport-bc .ko { color: var(--rouge); font-weight: 700; }
.modele-bc-titres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.modele-bc-titres .champ { margin: 0; }
/* Equipe (01/10/2026, capture du proprietaire) : le tableau tient dans la carte des 1280 px — e-mail entier, badge
d'accuse sur une ligne, « protégé » visible */
.tableau-equipe .champ-email-membre { min-width: 250px; }
.tableau-equipe .champ-nom-membre { min-width: 130px; }
.tableau-equipe .accuse .badge { white-space: nowrap; }
.tableau-equipe th, .tableau-equipe td { padding-left: 8px; padding-right: 8px; }
/* Recherche instantanee des listes de la gestion (01/10/2026) */
.recherche-liste { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.recherche-liste input[type=search] { flex: 1 1 260px; min-width: 0; max-width: 520px; }
form.carte.recherche-liste { margin-bottom: 16px; }
/* « Commander pour un client » : UNE carte (11/10/2026) — clients du portail puis recherche dans NeXus */
.carte-commander-clients .commander-nexus { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bord); }
.carte-commander-clients .commander-nexus h2 { margin: 0 0 4px; font-size: 1.05rem; }
.carte-commander-clients .commander-nexus > p.doux { margin: 0 0 8px; }
/* BI : rentabilite par client (01/10/2026) */
.tableau-rentabilite th a { color: inherit; text-decoration: none; }
.tableau-rentabilite th a.tri-actif { color: var(--marine, #0b2a5c); text-decoration: underline; text-underline-offset: 3px; }
.tableau-rentabilite .barre-part { display: inline-block; width: 46px; height: 6px; margin-right: 6px; border-radius: 3px;
vertical-align: middle; background: linear-gradient(90deg, var(--vert-eau, #1597d4) var(--part), #e6ebf2 var(--part)); }
.tableau-rentabilite .marge-negative { color: var(--rouge); font-weight: 700; }
.bloc-ristourne { padding: 14px 0; border-top: 1px solid var(--bordure, #e3e8ef); }
.bloc-ristourne:first-of-type { border-top: 0; }
.tete-ristourne { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: flex-start; }
.chiffres-ristourne { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.chiffres-ristourne > span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; }
.progression-ristourne { height: 6px; border-radius: 3px; background: #e6ebf2; margin-top: 10px; overflow: hidden; }
.progression-ristourne > div { height: 100%; background: var(--vert-eau, #1597d4); }
.tableau-paliers { margin-top: 10px; }
.tableau-paliers tr.palier-en-cours td { background: #eefaf8; }
@media (max-width: 700px) {
.chiffres-ristourne { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.chiffres-ristourne > span { align-items: flex-start; min-width: 0; }
}
.tri-telephone { display: none; }
@media (max-width: 700px) { /* rentabilite par client : 3 lignes par client au lieu d'une fiche de 7 rubriques */
.tri-telephone { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 6px; color: var(--doux, #6b7689); }
.tri-telephone a { color: inherit; }
.tri-telephone a.tri-actif { color: var(--marine, #0b2a5c); font-weight: 700; }
.tableau-rentabilite thead { display: none; }
.tableau-rentabilite, .tableau-rentabilite tbody { display: block; }
.tableau-rentabilite tr { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr) auto; gap: 4px 10px;
padding: 10px 0; border-bottom: 1px solid var(--bord, #dde2ec); }
.tableau-rentabilite tr[hidden] { display: none; }
.tableau-rentabilite td { padding: 0; border: 0; text-align: left; min-width: 0; }
.tableau-rentabilite td.c-client { grid-column: 1 / 4; grid-row: 1 / 3; overflow-wrap: anywhere; }
.tableau-rentabilite td.c-ca { grid-column: 4; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
.tableau-rentabilite td.c-taux { grid-column: 4; grid-row: 2; text-align: right; }
.tableau-rentabilite td.c-taux .badge { white-space: nowrap; }
.tableau-rentabilite td.c-taux .petit { max-width: 7.5em; margin-left: auto; white-space: normal; }
.tableau-rentabilite td.c-part, .tableau-rentabilite td.c-remise, .tableau-rentabilite td.c-marge,
.tableau-rentabilite td.c-fact { font-size: .88rem; white-space: nowrap; }
.tableau-rentabilite td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem;
color: var(--doux, #6b7689); text-transform: uppercase; letter-spacing: .03em; }
.tableau-rentabilite td.c-part { grid-row: 3; grid-column: 1; }
.tableau-rentabilite td.c-remise { grid-row: 3; grid-column: 2; }
.tableau-rentabilite td.c-marge { grid-row: 3; grid-column: 3; }
.tableau-rentabilite td.c-fact { grid-row: 3; grid-column: 4; text-align: right; }
.tableau-rentabilite .barre-part { display: none; }
}
/* ===================== DEPENSES ET CAISSE (01/10/2026) ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saisie-depense { margin-bottom: 16px; }
.saisie-depense .tete-saisie { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px;
flex-wrap: wrap; margin-bottom: 10px; }
.saisie-depense h2 { margin: 0; }
.choix-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-pastilles .pastille { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 7px 12px;
border-radius: 999px; border: 1.5px solid var(--bord); background: #fff; color: var(--encre); font-weight: 600;
font-size: .86rem; cursor: pointer; user-select: none; white-space: nowrap; }
.choix-pastilles .pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-pastilles .pastille:has(input:checked) { background: var(--marine); border-color: var(--marine); color: #fff; }
.choix-pastilles .pastille.p-facture:has(input:checked) { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.choix-pastilles .pastille.p-sans:has(input:checked) { background: var(--ambre); border-color: var(--ambre); }
.choix-pastilles .pastille.p-salaire:has(input:checked) { background: #1f4f8f; border-color: #1f4f8f; }
.choix-pastilles .pastille:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(18, 131, 176, .3); }
.raccourcis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.raccourci { border: 1px dashed var(--accent); background: #f2f9fc; color: var(--accent-fonce); border-radius: 999px;
padding: 5px 11px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.raccourci:hover { background: var(--accent); color: #fff; border-style: solid; }
.grille-saisie { display: grid; gap: 4px 12px; align-items: end;
grid-template-columns: 150px minmax(0, 1fr) 170px 160px;
grid-template-areas: "montant libelle qui date" "type type mode cat" "piece piece extra bouton"; }
.grille-saisie .champ { margin-bottom: 8px; min-width: 0; }
.grille-saisie .label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--encre); }
.s-montant { grid-area: montant; } .s-libelle { grid-area: libelle; } .s-qui { grid-area: qui; }
.s-date { grid-area: date; } .s-type { grid-area: type; } .s-mode { grid-area: mode; }
.s-origine { grid-area: type; } /* entree en caisse : « Vient de » a la place du type de depense */
.origines-entree .p-bl:has(input:checked) { background: #fff4e0; border-color: #e0a030; color: #7a4a00; }
.s-cat { grid-area: cat; } .s-piece { grid-area: piece; } .s-tiers, .s-repeter { grid-area: extra; }
.s-bouton { grid-area: bouton; margin-bottom: 8px; display: flex; justify-content: flex-end; }
.s-bouton .btn { width: 100%; padding: 12px 22px; font-size: 1rem; }
.grille-saisie .s-montant input { font-size: 1.25rem; font-weight: 700; color: var(--marine); }
/* champs propres a chaque mouvement */
form[data-saisie-depense] .pour-entree, form[data-saisie-depense] .pour-versement { display: none; }
form[data-sens="entree"] .pour-depense, form[data-sens="versement"] .pour-depense { display: none; }
form[data-sens="entree"] span.pour-entree, form[data-sens="versement"] span.pour-versement { display: inline; }
form[data-sens="entree"] div.pour-entree { display: block; }
.saisie-retour { min-height: 1.4em; font-size: .92rem; }
.saisie-retour .retour-ok { color: var(--vert-fonce); font-weight: 600; }
.lien-retour { background: none; border: 0; padding: 0 4px; color: var(--accent-fonce); text-decoration: underline;
font: inherit; cursor: pointer; }
.onglets-depenses { margin-top: 4px; }
.tuiles-depenses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tuiles-depenses .tuile-bi { cursor: default; }
.tuiles-depenses .tuile-caisse { border-top: 3px solid var(--sg-vert); }
.syntheses-depenses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.paire-syntheses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.syntheses-depenses > *, .paire-syntheses > * { min-width: 0; }
.tableau-mois-depenses tfoot td { border-top: 2px solid var(--bord); }
.barres-depenses { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.barres-depenses li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em; gap: 2px 12px; align-items: baseline; }
.barres-depenses .b-nom { font-weight: 600; overflow-wrap: anywhere; }
.barres-depenses .b-val { text-align: right; white-space: nowrap; }
.barres-depenses .b-barre { grid-column: 1; height: 6px; border-radius: 3px; align-self: center;
background: linear-gradient(90deg, var(--sg-vert) var(--part), #e6ebf2 var(--part)); }
.barres-depenses .b-part { grid-column: 2; text-align: right; white-space: nowrap; line-height: 1; }
.entete-liste-depenses { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.choix-vue-depenses { display: flex; gap: 6px; flex-wrap: wrap; }
.choix-vue-depenses a { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bord); text-decoration: none;
font-weight: 600; font-size: .85rem; color: var(--marine); background: #fff; }
.choix-vue-depenses a.actif { background: var(--marine); color: #fff; border-color: var(--marine); }
.tableau-depenses td { vertical-align: top; }
.tableau-depenses .c-date { white-space: nowrap; }
.tableau-depenses .c-sous { display: none; }
.tableau-depenses .c-montant { white-space: nowrap; }
.tableau-depenses tr.sens-entree .c-montant { color: var(--vert-fonce); }
.tableau-depenses tr.sens-versement .c-montant { color: var(--doux); }
.tableau-depenses .c-actions { white-space: nowrap; text-align: right; }
.barres-depenses a.b-nom { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.barres-depenses a.b-nom:hover { color: var(--bleu, #003da6); }
.carte-a-venir { border-left: 4px solid #e0a73a; }
.tuiles-depenses a.tuile-bi { color: inherit; text-decoration: none; cursor: pointer; }
.tuiles-depenses a.tuile-bi:hover { box-shadow: 0 0 0 2px var(--bleu, #003da6) inset; }
.puce-filtre { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
background: #e8f2fb; font-size: .9rem; }
.puce-filtre[hidden] { display: none; }
.puce-filtre button { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; cursor: pointer;
padding: 2px 6px; color: var(--encre); }
.icone-action { background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; font-size: 1rem;
cursor: pointer; line-height: 1; color: var(--marine); }
.icone-action:hover { border-color: var(--bord); background: #f4f6fa; }
.edition-depense td { background: #f7f9fc; }
.grille-edition { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; align-items: end; }
.grille-edition .champ { margin-bottom: 6px; min-width: 0; }
.grille-edition .e-large { grid-column: span 2; }
.grille-edition .e-boutons { display: flex; gap: 8px; margin-bottom: 6px; }
@media (max-width: 1100px) {
.tuiles-depenses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.grille-saisie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "montant date" "libelle libelle" "type type" "qui mode" "cat piece" "extra extra" "bouton bouton"; }
.s-bouton .btn { width: 100%; }
.tuiles-depenses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tuiles-depenses .tuile-total, .tuiles-depenses .tuile-caisse { grid-column: 1 / -1; }
.paire-syntheses { grid-template-columns: minmax(0, 1fr); }
.grille-edition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grille-edition .e-large, .grille-edition .e-boutons, .grille-edition .aide { grid-column: 1 / -1; }
/* liste : chaque mouvement sur 2 lignes au lieu d un tableau a 7 colonnes */
.tableau-depenses thead { display: none; }
.tableau-depenses, .tableau-depenses tbody { display: block; }
.tableau-depenses tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 0;
border-bottom: 1px solid var(--bord); }
.tableau-depenses tr[hidden] { display: none; }
.tableau-depenses td { padding: 0; border: 0; min-width: 0; }
.tableau-depenses .c-lib { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
.tableau-depenses .c-montant { grid-column: 2; grid-row: 1; text-align: right; }
.tableau-depenses .c-date { grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--doux); white-space: normal; }
.tableau-depenses .c-sous { display: inline; }
.tableau-depenses .c-cat, .tableau-depenses .c-qui { display: none; }
.tableau-depenses .c-type { grid-column: 2; grid-row: 2; text-align: right; }
.tableau-depenses .c-actions { grid-column: 2; grid-row: 3; }
.tableau-depenses tr.edition-depense { display: block; }
.tableau-depenses tr.edition-depense td { display: block; padding: 10px 6px; }
}
/* Depenses REPETITIVES (01/10/2026) */
.repetitives { margin-bottom: 16px; }
.entete-repetitives { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.liste-repetitives { display: grid; margin-top: 10px; }
.ligne-repetitive { display: grid; grid-template-columns: minmax(0, 1fr) 160px 130px 110px auto; gap: 6px 14px;
align-items: center; padding: 10px 0; border-top: 1px solid var(--bord); }
.ligne-repetitive.inactive { opacity: .6; }
.ligne-repetitive .r-montant { text-align: right; white-space: nowrap; }
.ligne-repetitive .r-etat { white-space: nowrap; }
.ligne-repetitive .r-actions { justify-self: end; }
.ligne-repetitive .r-actions > summary { list-style: none; cursor: pointer; }
.ligne-repetitive .r-actions > summary::-webkit-details-marker { display: none; }
.ligne-repetitive .r-actions[open] { grid-column: 1 / -1; justify-self: stretch; }
.ligne-repetitive .r-actions[open] > summary { margin-bottom: 10px; }
.form-repetitive { background: #f7f9fc; border: 1px solid var(--bord); border-radius: 10px; padding: 12px; }
.r-boutons { margin-top: 10px; }
.r-boutons form { margin: 0; }
.a-venir { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--bord); font-size: .9rem; }
.marque-repetitive { color: var(--accent-fonce); font-weight: 700; }
@media (max-width: 760px) {
.ligne-repetitive { grid-template-columns: minmax(0, 1fr) auto; }
.ligne-repetitive .r-info { grid-column: 1 / -1; }
.ligne-repetitive .r-etat { grid-column: 1; }
.ligne-repetitive .r-montant { grid-column: 2; grid-row: 2; }
.ligne-repetitive .r-type { grid-column: 1; }
.ligne-repetitive .r-actions { grid-column: 2; grid-row: 3; }
}
/* MARGES : marge ou ecart modifiables article par article (01/10/2026) */
.champ-pct { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.champ-pct input { width: 5.6em; padding: 5px 7px; text-align: right; font-weight: 700; }
.tableau-marges-art tr.marge-ajustee td { background: #fff8e6; }
.tableau-marges-art tr.marge-ajustee .champ-pct input { border-color: var(--ambre); }
.tableau-marges-art tr.prix-en-baisse [data-pv], .tableau-marges-art tr.prix-en-baisse [data-ecart] { color: var(--rouge); }
/* DEPENSES REPETITIVES : date de fin a la creation (01/10/2026) — sa propre case, le bouton passe dessous */
.s-fin { grid-area: fin; }
.s-fin[hidden] { display: none !important; }
.grille-saisie:has(.s-fin:not([hidden])) {
grid-template-areas: "montant libelle qui date" "type type mode cat" "piece piece extra fin" ". . . bouton"; }
.r-fin { white-space: nowrap; }
@media (max-width: 760px) {
.grille-saisie:has(.s-fin:not([hidden])) {
grid-template-areas: "montant date" "libelle libelle" "type type" "qui mode" "cat piece" "extra fin" "bouton bouton"; }
}
/* FRAIS D'ACHAT (01/10/2026) : transport d'arrivage, douane... hors charges, dans la caisse */
.choix-pastilles .pastille.p-achat { border-style: dashed; }
.choix-pastilles .pastille.p-achat:has(input:checked) { background: #6b4fa0; border-color: #6b4fa0; color: #fff; border-style: solid; }
.badge-achat { background: #efe9f8; color: #4e3880; border: 1px solid #d9cdee; }
.tuiles-depenses { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tableau-mois-depenses .col-achats { color: #4e3880; background: #faf8fd; }
.titre-achats { font-size: 1rem; margin: 18px 0 10px; padding-top: 12px; border-top: 1px dashed var(--bord); }
.barres-achats .b-barre { background: linear-gradient(90deg, #8a6cc0 var(--part), #ece6f5 var(--part)); }
.case-achat label { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 22px; }
.case-achat input { width: 18px; height: 18px; flex: none; }
@media (max-width: 1100px) {
.tuiles-depenses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.tuiles-depenses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.case-achat label { margin-top: 0; }
}
/* SCAN DE FACTURE (01/10/2026) : bloc du formulaire + ecran plein (recadrer, ameliorer) — scan_facture.js */
.s-scan { grid-area: scan; }
.grille-saisie { grid-template-areas: "montant libelle qui date" "type type mode cat" "scan scan scan scan" "piece piece extra bouton"; }
.grille-saisie:has(.s-fin:not([hidden])) {
grid-template-areas: "montant libelle qui date" "type type mode cat" "scan scan scan scan" "piece piece extra fin" ". . . bouton"; }
form[data-sens="entree"] .grille-saisie, form[data-sens="versement"] .grille-saisie {
grid-template-areas: "montant libelle qui date" "type type mode cat" "piece piece extra bouton"; }
.scan-piece-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scan-piece-apercu { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--bord);
border-radius: 10px; background: #f7f9fc; }
.scan-piece-apercu[hidden] { display: none; }
.scan-piece-apercu img { width: 46px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bord); background: #fff; }
.scan-piece-apercu img[hidden] { display: none; }
.scan-piece-nom { font-weight: 600; font-size: .9rem; flex: 1; min-width: 0; }
.case-retirer { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.case-retirer input { width: 18px; height: 18px; }
.lien-piece { text-decoration: none; margin-left: 4px; }
@media (hover: hover) and (pointer: fine) { .scan-camera { display: none; } }
@media (max-width: 760px) {
.grille-saisie { grid-template-areas: "montant date" "libelle libelle" "type type" "qui qui" "mode mode" "cat cat" "piece piece" "scan scan" "extra extra" "bouton bouton"; }
.grille-saisie:has(.s-fin:not([hidden])) {
grid-template-areas: "montant date" "libelle libelle" "type type" "qui qui" "mode mode" "cat cat" "piece piece" "scan scan" "extra fin" "bouton bouton"; }
form[data-sens="entree"] .grille-saisie, form[data-sens="versement"] .grille-saisie {
grid-template-areas: "montant date" "libelle libelle" "type type" "qui qui" "piece piece" "extra extra" "bouton bouton"; }
.scan-piece-boutons .btn { flex: 1 1 auto; }
}
html.sf-ouvert, html.sf-ouvert body { overflow: hidden; }
.scan-facture { position: fixed; inset: 0; z-index: 2000; background: #10162b; color: #fff; display: flex;
flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.scan-facture[hidden] { display: none; }
.sf-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.sf-titre { font-size: 1.05rem; }
.sf-place { width: 74px; }
.sf-zone { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.sf-cadre { position: relative; line-height: 0; }
.sf-image { display: block; max-width: 100%; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); background: #fff; }
.sf-coins { position: absolute; left: 0; top: 0; overflow: visible; touch-action: none; }
.sf-poly { fill: rgba(43, 178, 168, .16); stroke: #1597d4; stroke-width: 2.5; }
.sf-poignee { cursor: grab; touch-action: none; }
.sf-prise { fill: transparent; }
.sf-rond { fill: #fff; stroke: #1597d4; stroke-width: 4; }
.sf-poignee.actif .sf-rond { fill: #1597d4; }
.sf-attente { position: absolute; inset: auto 0 12px; text-align: center; font-weight: 600; line-height: 1.4; }
.sf-occupe .sf-actions, .sf-occupe .sf-filtres { opacity: .5; pointer-events: none; }
.sf-aide { text-align: center; font-size: .92rem; color: #cfd6e6; padding: 6px 16px; min-height: 1.4em; }
.sf-filtres { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 4px 12px; }
.sf-filtres[hidden] { display: none; }
.sf-filtre { border: 1px solid #4a5578; background: transparent; color: #fff; border-radius: 999px; padding: 8px 14px;
font: inherit; font-weight: 600; font-size: .9rem; }
.sf-filtre.actif { background: #1597d4; border-color: #1597d4; }
.sf-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 10px 12px 14px; }
.sf-btn { border: 1px solid #4a5578; background: #1c2440; color: #fff; border-radius: 10px; padding: 11px 16px;
font: inherit; font-weight: 600; min-height: 44px; }
.sf-btn.sf-principal { background: #1597d4; border-color: #1597d4; color: #0d1b2a; }
.sf-annuler { background: transparent; }
/* banque a cote de la caisse (01/10/2026) */
.tableau-caisse .col-banque { color: var(--accent-fonce); background: #f4f9fc; }
/* frais d'achat HORS depenses : une bande a part sous les tuiles (01/10/2026) */
.bande-achats { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 10px 14px; border-radius: 12px; border: 1px dashed #b9a6dc; background: #faf8fd; color: #3d2d66;
text-decoration: none; font-size: .9rem; }
.bande-achats:hover { background: #f3eefb; }
.bande-lien { font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .tuiles-depenses .tuile-caisse { grid-column: 1 / -1; } }
/* tuiles des depenses (01/10/2026, v2) : frais d'achat dans une tuile (hors depenses), detail especes / banque */
.tuiles-depenses .tuile-achats { border-top: 3px solid #6b4fa0; background: #fcfbfe; text-decoration: none; color: inherit; cursor: pointer; }
.tuiles-depenses .tuile-achats:hover { background: #f5f1fb; }
.tuiles-depenses .tuile-achats strong { color: #4e3880; }
.tuiles-depenses .detail-paiement { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: .84rem;
color: var(--doux); line-height: 1.4; }
.tuiles-depenses .detail-paiement span { display: inline; }
.tuiles-depenses .tuile-bi .detail-paiement strong { display: inline; font-size: .9rem; font-weight: 700; color: var(--encre);
margin: 0; line-height: 1.4; }
/* CHIFFRES ALIGNES (02/10/2026, capture : « aligner l'affichage ») : titre, chiffre, note (+ detail) = 3 rangees PARTAGEES
par les tuiles d'une meme ligne (subgrid) — le chiffre a la meme hauteur, que le titre tienne sur 1 ou 2 lignes.
Navigateur sans subgrid : affichage d'avant. */
@supports (grid-template-rows: subgrid) {
.tuiles-depenses > .tuile-bi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 3px;
align-content: start; }
.tuiles-depenses .tuile-bas { display: block; } /* note + detail especes / banque : la meme rangee */
}
/* RELEVE BANCAIRE (01/10/2026) — admin/banque.html */
.tuiles-banque .tuile-bi { cursor: pointer; text-decoration: none; color: inherit; }
.tuiles-banque .tuile-a-classer { border-top: 3px solid var(--ambre, #b26a00); }
.natures-banque { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 22px; }
.nature-bloc h3 { margin: 0 0 6px; font-size: 1rem; }
.nature-bloc h3 a { color: inherit; text-decoration: none; }
.nature-bloc h3 a:hover { text-decoration: underline; }
.liste-cats-banque { list-style: none; margin: 0; padding: 0; }
.liste-cats-banque li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0;
border-bottom: 1px dashed var(--bord); font-size: .92rem; }
.liste-cats-banque li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.liste-cats-banque li span.nombre { white-space: nowrap; }
.badge-nature-charge { background: #e8eefb; color: var(--marine); }
.badge-nature-frais_achat { background: #fff1e6; color: #a2520b; }
.badge-nature-fournisseur { background: #f1ecfb; color: #5b3a9b; }
.badge-nature-financement { background: #eef1f5; color: #46536a; }
.badge-nature-interne { background: #f2f3f5; color: #5d6470; }
.badge-nature-client { background: #e6f5f3; color: #167068; }
.badge-nature-a_classer { background: #fff3e0; color: var(--ambre, #b26a00); }
.tableau-banque .c-lib strong { font-weight: 600; overflow-wrap: anywhere; }
.tableau-banque .c-type .badge { white-space: nowrap; }
.form-import-banque { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
@media (max-width: 700px) {
.tableau-banque thead { display: none; }
.tableau-banque tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0;
border-bottom: 1px solid var(--bord); }
.tableau-banque td { border: 0; padding: 0; }
.tableau-banque td.c-date { grid-column: 1; grid-row: 1; }
.tableau-banque td.c-lib { grid-column: 2 / 4; grid-row: 1; }
.tableau-banque td.c-cat { grid-column: 1 / 3; grid-row: 2; font-size: .88rem; }
.tableau-banque td.c-type { grid-column: 1 / 3; grid-row: 3; }
.tableau-banque td.c-montant { grid-column: 3; grid-row: 2 / 4; align-self: center; }
.tableau-banque td.c-actions { grid-column: 3; grid-row: 4; justify-self: end; }
.tableau-banque tr.edition-depense { display: block; }
.tableau-banque tr.edition-depense td { display: block; }
.form-import-banque { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .tuiles-banque .tuile-a-classer { grid-column: 1 / -1; } }
/* scanner : image a 100 % (toucher l'image, ecran « Ameliorer le scan ») */
.sf-zone.sf-zoom { overflow: auto; display: block; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.sf-zone.sf-zoom .sf-cadre { display: inline-block; margin: 12px; }
.sf-zone.sf-zoom .sf-image { max-width: none; cursor: zoom-out; }
/* etat du serveur (Parametres) */
.jauges-serveur { display: grid; gap: 14px; }
.jauge-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.jauge-tete .nombre { font-weight: 700; font-size: 1.05rem; }
.jauge-barre { height: 10px; border-radius: 999px; background: #e9edf3; overflow: hidden; margin-bottom: 5px; }
.jauge-barre span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.jauge-vert { background: var(--vert-fonce, #167068); }
.jauge-orange { background: #d98a1c; }
.jauge-rouge { background: var(--rouge, #c62828); }
.jauge-neutre { background: #b8c0cc; }
/* Depenses : choix de la categorie et total de la liste (01/10/2026) */
.recherche-depenses select { flex: 0 1 260px; min-width: 0; max-width: 100%; }
.total-liste-depenses { white-space: nowrap; }
.total-liste-depenses strong { font-size: 1.05rem; }
.tableau-depenses tfoot td { border-top: 2px solid var(--marine, #0b2a5c); padding-top: 10px; background: #f7f9fc; }
.tableau-depenses tfoot .total-depenses { font-size: 1.05rem; text-align: right; }
.pied-total-depenses { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
@media (max-width: 700px) {
.recherche-depenses select { flex: 1 1 100%; }
.total-liste-depenses { white-space: normal; }
}
/* Depenses : « Autre categorie… » sous la liste des categories (01/10/2026) */
select[data-choix-categorie] + input[data-categorie-autre] { margin-top: 6px; }
/* SUGGESTIONS (libellé, personne : portal.js) : la liste du portail sous le champ, à la place de celle du navigateur */
.suggestions { position: fixed; z-index: 85; margin: 0; padding: 4px; list-style: none; background: var(--surface);
border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(22, 34, 60, .16);
max-height: 320px; overflow-y: auto; }
.suggestions li { padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--texte); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions li:hover, .suggestions li.actif { background: #eaf2fa; color: var(--encre); }
/* BI : marge reelle et consignation (01/10/2026) */
.tableau-cascade { max-width: 760px; }
.tableau-cascade td:last-child { width: 170px; white-space: nowrap; }
.tableau-cascade .ligne-groupe summary { cursor: pointer; }
.tableau-cascade .detail-groupe { list-style: none; margin: 6px 0 2px 18px; padding: 0; font-size: .88rem; color: var(--doux, #5b6480); }
.tableau-cascade .detail-groupe li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.tableau-cascade .ligne-resultat td { border-top: 2px solid var(--marine, #0b2a5c); background: #f3f6fb; }
.tableau-cascade .resultat-negatif td { color: #b42318; }
.liste-a-part { margin: 0; padding-left: 18px; }
.liste-a-part li { margin-bottom: 8px; }
.liste-consignation { display: flex; flex-direction: column; gap: 6px; }
.client-consignation { border: 1px solid var(--bord, #e3e7ef); border-radius: 8px; background: #fff; }
.client-consignation > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 10px 12px; cursor: pointer; flex-wrap: wrap; }
.client-consignation > summary .c-chiffres { display: flex; gap: 12px; align-items: baseline; margin-left: auto; }
.client-consignation[open] > summary { border-bottom: 1px solid var(--bord, #e3e7ef); }
.client-consignation .defile { padding: 6px 10px 10px; }
/* Equipe : droits du BI (chiffres / marge nette), une ligne par administrateur (01/10/2026) */
.tableau-droits-bi { max-width: 760px; }
.tableau-droits-bi td.centre input { width: 20px; height: 20px; }
/* 04/10/2026 : trois interrupteurs (chiffres, marge brute, marge nette) — sur telephone tout tient dans l'ecran */
.tableau-droits-bi th.centre, .tableau-droits-bi td.centre { width: 92px; }
@media (max-width: 600px) {
.tableau-droits-bi { table-layout: fixed; width: 100%; }
.tableau-droits-bi th, .tableau-droits-bi td { padding: 8px 3px; }
.tableau-droits-bi th { white-space: normal; letter-spacing: 0; font-size: .7rem; line-height: 1.25; }
.tableau-droits-bi th .petit { display: none; }
.tableau-droits-bi th.centre, .tableau-droits-bi td.centre { width: 64px; }
.tableau-droits-bi td:first-child { overflow-wrap: anywhere; }
}
/* DEPENSES FIXES (tableau de bord et liste, 01/10/2026) */
.carte-fixes { margin: 20px 0; }
.fixes-totaux { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 12px; padding: 10px 14px;
background: #f4f7fb; border-radius: var(--rayon); }
.fixes-totaux > div { display: flex; flex-direction: column; }
.fixes-totaux strong { font-size: 1.15rem; color: var(--encre); }
.fixes-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fixes-tete h2 { margin: 0; }
.tableau-fixes td, .tableau-fixes th { vertical-align: middle; }
.tableau-fixes .montant-fixe { width: 120px; text-align: right; }
.tableau-fixes tfoot td { border-top: 2px solid var(--bord); }
.fixes-boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.liste-fixes { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-fixes li { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 10px; align-items: baseline;
padding: 6px 0; border-bottom: 1px solid var(--bord); }
.liste-fixes li .nombre { text-align: right; }
.fiche-fixe { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 8px;
position: relative; }
.fiche-fixe .champ { margin: 0; }
.fiche-fixe label { display: block; font-size: .8rem; color: var(--doux); }
.fiche-fixe label input, .fiche-fixe label select { margin-top: 2px; color: var(--texte); }
.ff-ligne { display: grid; gap: 8px 10px; align-items: end; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 64px
minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr); }
.ff-ligne-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr); margin-top: 6px; }
.ff-plus { margin-top: 6px; }
.ff-plus > summary { cursor: pointer; color: var(--doux); }
.fiche-fixe.fixe-arretee { opacity: .6; }
@media (max-width: 1000px) {
.ff-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-ligne .ff-libelle { grid-column: 1 / -1; }
.ff-ligne-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-ligne-2 .ff-motif { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.ff-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tableau-fixes, .tableau-fixes tbody, .tableau-fixes tfoot { display: block; }
.tableau-fixes thead { display: none; }
.tableau-fixes tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px 12px;
align-items: end; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.tableau-fixes td { border: 0; padding: 0; }
.tableau-fixes td.f-nom { grid-column: 1 / -1; }
.tableau-fixes td.f-vide { display: none; }
.tableau-fixes td[data-l]::before { content: attr(data-l); display: block; font-size: .75rem; color: var(--doux); }
.tableau-fixes tfoot tr { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; border-top: 2px solid var(--bord); }
.tableau-fixes tfoot td { border-top: 0; }
.tableau-fixes tfoot td.f-nom { grid-column: auto; }
.tableau-fixes .montant-fixe { width: 100%; }
.liste-fixes li { grid-template-columns: minmax(0, 1fr) 100px; }
.liste-fixes li > .petit { grid-column: 1 / -1; order: 3; }
}
.fixes-reprendre { margin-top: 10px; }
.fixes-reprendre button { background: none; border: 0; padding: 0; color: var(--marine); text-decoration: underline;
cursor: pointer; font-family: inherit; }
@media (max-width: 600px) {
.fixes-totaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.fixes-totaux strong { font-size: 1.05rem; }
}
/* CATEGORIES DES DEPENSES (fusion, 02/10/2026) */
.liste-propositions, .liste-fusions { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-propositions li, .liste-fusions li { padding: 7px 0; border-bottom: 1px solid var(--ligne, #e5e9f0); }
.liste-propositions li:last-child, .liste-fusions li:last-child { border-bottom: 0; }
.liste-propositions .btn { margin-right: 8px; }
.fusion-arrivee { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fusion-arrivee .champ { min-width: 260px; flex: 1 1 260px; max-width: 420px; margin: 0; }
.tableau-categories td:first-child { width: 36px; }
.tableau-categories label { cursor: pointer; }
/* FILTRE D'AFFICHAGE des Depenses (02/10/2026) */
.filtre-actif { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f3d19c; }
.filtre-actif[hidden] { display: none; }
.filtre-actif form { margin: 0; }
.filtre-depenses { margin-top: 14px; padding: 12px 16px; }
.filtre-depenses > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.filtre-depenses[open] > summary { margin-bottom: 10px; }
.filtre-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
.filtre-cat { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
background: #f6f8fb; cursor: pointer; }
.filtre-cat input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; }
.filtre-cat .nom { flex: 1; min-width: 0; }
.filtre-cat .nombre { white-space: nowrap; font-size: .9em; }
.filtre-cat:has(input[type=checkbox]:not(:checked)) { background: #fff7e6; }
.filtre-cat:has(input[type=checkbox]:not(:checked)) .nom { text-decoration: line-through; color: #6b7280; }
@media (max-width: 600px) { .filtre-cats { grid-template-columns: 1fr; }
.filtre-depenses > summary .doux { display: none; } }
/* PILOTAGE (02/10/2026) — module secret du compte principal */
.pilotage-cadenas { font-size: .8em; }
.pilotage-reglages { margin-bottom: 16px; }
.pilotage-reglages > summary { cursor: pointer; }
.pilotage-reglages-form { align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pilotage-reglages-form .champ { margin: 0; min-width: 220px; flex: 1 1 220px; max-width: 360px; }
.pilotage-chargement { display: flex; align-items: center; gap: 12px; color: var(--doux); }
.pilotage-roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #dde2ec; border-top-color: var(--sg-vert, #1597d4);
animation: pilotage-tour 0.9s linear infinite; flex: none; }
@keyframes pilotage-tour { to { transform: rotate(360deg); } }
.pilotage-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@supports (grid-template-rows: subgrid) {
.pilotage-tuiles > .tuile-bi { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 3px; align-content: start; }
}
.pilotage-tuiles .tuile-nette { border-top-color: var(--sg-vert, #1597d4); }
.pilotage-section { margin-top: 18px; }
.pilotage-section h2 { margin-top: 0; }
.pilotage-section h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.pilotage-plafond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pilotage-plafond > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f6f8fb; }
.pilotage-plafond strong { font-size: 1.45rem; color: var(--marine, #0b2a5c); }
.pilotage-plafond strong.texte-rouge { color: var(--rouge); }
.pilotage-plafond strong.texte-vert { color: var(--vert-fonce); }
.pilotage-jauge { display: block; height: 10px; border-radius: 6px; background: #e6ebf2; overflow: hidden; margin: 12px 0 6px; }
.pilotage-jauge > span { display: block; height: 100%; background: var(--sg-vert, #1597d4); border-radius: 6px; }
.pilotage-jauge > span.limite { background: #e0a73a; }
.pilotage-jauge > span.depasse { background: var(--rouge); }
.pilotage-jauge.petite { height: 6px; margin: 4px 0; min-width: 80px; }
.pilotage-postes .col-jauge { width: 120px; }
.pilotage-mois tr.courant td { background: #f3f8f7; }
.pilotage-annee p { margin: 6px 0; }
.pilotage-fixes { margin: 10px 0 6px; }
.pilotage-dep-min { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 8px 0 10px;
padding: 10px 12px; border-radius: 10px; background: #f6f8fb; }
.pilotage-dep-min form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pilotage-dep-min label { font-weight: 600; }
.pilotage-dep-min input { width: 130px; }
.pl-question { margin: 6px 0 10px; }
.pl-calcul { max-width: 520px; margin: 6px 0 8px; display: grid; gap: 2px; }
.pl-calcul > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.pl-calcul strong, .pl-calcul span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-calcul .pl-total { border-top: 1px solid #d6dde8; font-size: 1.05em; }
.pilotage-plan tr.courant td { background: #f2f8f7; }
.pilotage-leviers { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f3d19c; }
.pilotage-leviers h4 { margin: 0 0 8px; }
.pilotage-leviers ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; }
.pl-annee { margin: 12px 0 0; }
.pl-comment { margin: 10px 0 0; }
.pl-comment > summary { cursor: pointer; color: var(--bleu, #003da6); }
.pl-comment ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
@media (max-width: 600px) { .pilotage-plan .col-secondaire { display: none; }
.pilotage-plan td.nombre { white-space: nowrap; } .pilotage-plan th { white-space: normal; } }
.comparaison-n1 { display: block; margin-top: 4px; }
.ligne-ignore { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
background: #f6f8fb; cursor: pointer; }
.ligne-ignore input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; }
.ligne-ignore .nom { flex: 1; min-width: 0; }
.ligne-ignore .nombre { white-space: nowrap; font-size: .9em; }
.ligne-ignore:has(input[type=checkbox]:checked) { background: #fff7e6; }
.ligne-ignore:has(input[type=checkbox]:checked) .nom { text-decoration: line-through; color: #6b7280; }
.pl-sous-fixes { margin-left: 4px; }
.pilotage-alerte-fixes { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff7e6;
border: 1px solid #f3d19c; line-height: 1.5; }
.pilotage-conduites { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; }
.pilotage-conduites li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 8px 12px; border-radius: 10px; background: #f6f8fb; }
.pilotage-conduites li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .pilotage-conduites li { flex-direction: column; gap: 2px; }
.pilotage-postes .col-jauge { display: none; }
.pilotage-postes td.nombre, .pilotage-postes th { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.pilotage-mois .col-secondaire { display: none; }
.pilotage-mois td.nombre { white-space: nowrap; }
.pilotage-mois th { white-space: normal; } }
.pilotage-bilan { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #f6f8fb; line-height: 1.5; }
.pilotage-liste { list-style: none; margin: 0; padding: 0; }
.pilotage-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
padding: 10px 0; border-bottom: 1px solid var(--bord, #e5e9f0); }
.pilotage-liste li:last-child { border-bottom: 0; }
.pilotage-liste .pl-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pilotage-liste .pl-case { margin: 0; display: flex; justify-content: center; }
.pilotage-liste .pl-case input { width: 20px; height: 20px; }
.pilotage-liste .pl-icone { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center;
justify-content: center; font-size: .8rem; font-weight: 700; background: #eef1f5; color: var(--doux); justify-self: center; }
.pilotage-liste .pl-icone.ok { background: #e6f5ec; color: var(--vert-fonce); }
.pilotage-liste li.pl-a_faire.urgence-1 strong { color: var(--rouge); }
.pilotage-liste li.pl-fait .pl-texte, .pilotage-liste li.pl-fait_main .pl-texte,
.pilotage-liste li:has(.pl-case input:checked) .pl-texte { opacity: .55; }
.pilotage-liste li:has(.pl-case input:checked) strong { text-decoration: line-through; color: inherit; }
.pilotage-reco { padding: 12px 14px; border: 1px solid var(--bord, #e5e9f0); border-left: 4px solid var(--sg-vert, #1597d4);
border-radius: 10px; margin-top: 12px; }
.pilotage-reco.alerte { border-left-color: var(--rouge); background: #fffafa; }
.pilotage-reco p { margin: 6px 0; }
.pr-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pr-titre { flex: 1 1 240px; }
.pr-gain { font-weight: 700; color: var(--vert-fonce); white-space: nowrap; }
.pilotage-reco.alerte .pr-gain { color: var(--rouge); }
.pr-details summary { cursor: pointer; color: var(--doux); font-size: .9rem; }
.pr-details ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pr-details li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--bord, #e5e9f0);
font-size: .9rem; }
.pr-details li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pr-details li .nombre { white-space: nowrap; text-align: right; }
.pilotage-methode { margin-top: 14px; }
@media (max-width: 1100px) {
.pilotage-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.pilotage-tuiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pilotage-tuiles > .tuile-bi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pilotage-plafond { grid-template-columns: minmax(0, 1fr); }
.pilotage-plafond > div { flex-direction: row; justify-content: space-between; align-items: baseline; }
.pilotage-plafond strong { font-size: 1.15rem; }
.pilotage-liste li { grid-template-columns: 26px minmax(0, 1fr); }
.pilotage-liste li > .btn { grid-column: 2; justify-self: start; }
.pr-details li { flex-direction: column; gap: 0; }
.pr-details li .nombre { text-align: left; }
}
/* REVUE D'AFFICHAGE DU 03/10/2026 (captures ordinateur + iPhone de tous les modules) */
/* tuile « Depenses » : les chiffres secondaires (« → … payes par le chiffre declare », « 2025 entier : … ») ne prennent
plus la taille du chiffre principal */
.tuile-bi .comparaison-n1 strong { font-size: inherit; line-height: inherit; font-weight: 700; }
@media (max-width: 600px) {
.ff-ligne .ff-cat { grid-column: 1 / -1; } /* Depenses fixes : categorie lisible */
.ff-ligne-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { /* Articles a ecouler : filtres l'un sous l'autre */
.filtres-ecouler .champ { flex: 1 1 100%; }
.filtres-ecouler > .btn { width: 100%; }
}
/* Depenses : BL non factures (affichage seul, 03/10/2026) */
.bl-nf-total { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 12px; }
.bl-nf-total > div { display: flex; flex-direction: column; gap: 2px; }
.bl-nf-total strong { font-size: 1.15rem; }
.tableau-bl-mois td:first-child, .tableau-bl-mois th:first-child { white-space: nowrap; }
.bl-nf-mois { margin-top: 8px; }
.bl-nf-mois summary { cursor: pointer; }
/* bons de retour (04/10/2026) : livre - revenu = reste, et ce que rend chaque bon */
.bl-nf-calcul { border-collapse: collapse; margin: 0 0 14px; min-width: min(100%, 460px); }
.bl-nf-calcul td { padding: 3px 0; vertical-align: top; }
.bl-nf-calcul td.nombre { text-align: right; padding-left: 18px; white-space: nowrap; }
.bl-nf-calcul .bl-nf-reste td { border-top: 1px solid var(--bord, #d8dee8); padding-top: 6px; font-weight: 700; }
.bl-nf-repartition { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 10px; font-size: .9rem; }
.tableau-bons-retour td.rend { font-size: .85rem; }
.tableau-bons-retour td.rend div + div { margin-top: 2px; }
.tableau-bl-revenus .client-ligne, .tableau-bons-retour .client-ligne { font-size: .85rem; margin-top: 2px; }
@media (max-width: 600px) {
.tableau-bl-detail th:nth-child(4), .tableau-bl-detail td:nth-child(4) { display: none; } /* vente : sur PC */
.tableau-bl-detail td:nth-child(3) { max-width: 120px; overflow-wrap: anywhere; }
.tableau-bl-mois .bl-nv { display: block; white-space: nowrap; }
.tableau-bons-retour td.rend { min-width: 120px; }
}
/* Ristourne par marque ou famille (03/10/2026) : la liste des portees ne force pas la largeur de la fiche */
.tableau-paliers-fiche select { max-width: 190px; min-width: 0; }
/* BI : tuile « BL non factures — prix d'achat » (03/10/2026, pour information) : une bande sur toute la largeur */
.tuile-bi.tuile-info { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline;
column-gap: 14px; row-gap: 2px; border-top-color: #b7791f; }
.tuile-bi.tuile-info .etiquette { flex-basis: 100%; }
/* Depenses : derniere mise a jour du compte bancaire dans la tuile (03/10/2026) */
.maj-banque { display: block; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--bord, #dde2ec); color: var(--doux, #5b6480); }
.maj-banque strong { font-size: inherit; color: var(--marine, #0b2a5c); line-height: inherit; }
.maj-banque-echec { color: #b3261e; }
/* BI : tuile « Solde du compte bancaire » (03/10/2026) : meme bande que les BL non factures, en vert d'eau */
.tuile-bi.tuile-banque { border-top-color: #1597d4; }
/* ---- BOITES (03/10/2026, « chaque box appuyee ouvre sa page ») : BI et Depenses en boites, une page par boite ---- */
a.tuile-bi { position: relative; padding-right: 30px; }
a.tuile-bi::after { content: "\203A"; position: absolute; top: 10px; right: 12px; font-size: 1.5rem; line-height: 1;
color: var(--bleu, #003da6); opacity: .75; }
a.tuile-bi:active { transform: scale(.99); }
.tuile-bi.tuile-alerte { border-top-color: #e08a00; }
.tuile-bi.tuile-saisie { border-top-color: var(--sg-vert, #1597d4); }
.texte-orange { color: #b45f00; font-weight: 600; }
.lien-hub { display: inline-block; margin-bottom: 4px; font-weight: 600; text-decoration: none; color: var(--bleu, #003da6); }
.lien-hub:hover { text-decoration: underline; }
.pile-bi .carte { margin-top: 0 !important; margin-bottom: 16px; }
.pile-bi > .chiffres-reste { margin: 0 0 16px; }
.paire-bi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.paire-bi .carte { margin-bottom: 0 !important; }
@media (max-width: 900px) { .paire-bi { grid-template-columns: minmax(0, 1fr); } }
.chiffres-reste { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.chiffres-reste > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff;
border: 1px solid var(--bord, #dde2ec); border-radius: 10px; }
.carte .chiffres-reste > div { background: #f7f9fc; border: 0; }
.chiffres-reste strong { font-size: 1.3rem; color: var(--marine, #0b2a5c); }
.tableau-reste .barre-part { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: #e6eaf1;
background-image: linear-gradient(var(--bleu, #003da6), var(--bleu, #003da6)); background-size: var(--part) 100%;
background-repeat: no-repeat; }
/* courbes de comparaison du BI (graphiques.barres_mois, graphiques.cumul) */
.titre-graphique { font-size: 1rem; margin: 18px 0 6px; }
.courbe .repere-mois { stroke: #b9c4d6; stroke-width: 1.5; stroke-dasharray: 4 4; }
.courbe .etiquette-cumul { font-size: 13px; font-weight: 600; }
.courbe .etiquette-cumul.forte { font-size: 14px; font-weight: 800; }
.legende { flex-wrap: wrap; }
.legende-annee i.hachure { width: 16px; height: 10px; background: repeating-linear-gradient(45deg, #003da6 0 3px, rgba(18, 131, 176, .3) 3px 6px); }
.legende-annee i.repere { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #a9b8cf; background: #fff; }
.tableau-evolution tr.mois-en-cours td { background: #f4faf9; }
.tableau-evolution tr.mois-futur td { color: var(--doux, #5b6480); }
@media (max-width: 700px) {
.courbe .etiquette-cumul { font-size: 20px; }
.courbe .etiquette-cumul.forte { font-size: 22px; }
}
/* marques et familles du BI : la part et la marge sous la barre, sur toute la largeur (texte plus long) */
.barres-bi li { grid-template-columns: minmax(0, 1fr) auto; }
.barres-bi .b-barre { grid-column: 1 / -1; }
.barres-bi .b-part { grid-column: 1 / -1; text-align: left; white-space: normal; line-height: 1.3; }
/* solde bancaire et BL non factures : des boites comme les autres (03/10/2026, « pourquoi ces deux boites sont
horizontales ? »), reperees par leur couleur */
.tuile-bi.tuile-bl { border-top-color: #b7791f; }
/* Tirer vers le bas pour actualiser (application installee, 03/10/2026) : portal.js, fin du fichier */
.tirer-actualiser { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 95;
width: 40px; height: 40px; margin-left: -20px; pointer-events: none; opacity: 0; transform: translateY(-56px); }
.tirer-actualiser.retour { transition: transform .25s ease, opacity .25s ease; }
.tirer-rond { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 50%; background: var(--surface); color: var(--marine); box-shadow: 0 2px 12px rgba(22, 34, 60, .28); }
.tirer-rond svg { width: 22px; height: 22px; }
.tirer-actualiser.pret .tirer-rond { background: var(--sg-vert); color: #fff; }
.tirer-actualiser.charge .tirer-rond svg { animation: tirer-tourne .7s linear infinite; }
@keyframes tirer-tourne { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Paiements a prevoir — plan de tresorerie (page Echeances du BI, 03/10/2026) */
.grille-tresor { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px;
align-items: end; margin: 12px 0 16px; }
.grille-tresor .champ { margin: 0; }
.grille-tresor .case { grid-column: 1 / -1; }
.tableau-tresor td { vertical-align: top; }
.tableau-tresor .ligne-alerte td, .tableau-semaines .ligne-alerte td { background: #fff3f3; }
.badge.prio-1 { background: #c62828; color: #fff; }
.badge.prio-2 { background: #b26a00; color: #fff; }
.badge.prio-3 { background: #e6eef8; color: var(--marine); }
.badge.prio-4 { background: #eef1f5; color: var(--doux); }
.actions-tresor { white-space: nowrap; }
.actions-tresor .en-ligne-form { display: inline; }
.actions-tresor .modifier-tresor { display: inline-block; }
.actions-tresor .modifier-tresor[open] { display: block; white-space: normal; min-width: 280px; }
.actions-tresor .modifier-tresor > summary { list-style: none; display: inline-flex; }
.actions-tresor .modifier-tresor > summary::-webkit-details-marker { display: none; }
.suggestion-tresor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; white-space: normal; }
.detail-tresor { margin-top: 14px; }
.detail-tresor > summary { cursor: pointer; font-weight: 600; color: var(--marine); }
.detail-tresor h4 { margin: 10px 0 6px; }
.grille-tresor .plein { grid-column: 1 / -1; margin: 0; }
.badge.badge-periode { background: #0f6e66; color: #fff; margin-top: 4px; white-space: nowrap; }
.actions-tresor .valider-tresor[open] { min-width: 340px; }
.resume-tresor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.resume-tresor > div { border: 1px solid var(--bord, #dde3ea); border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 2px; }
.resume-tresor strong { font-size: 1.35rem; color: var(--marine); }
.resume-tresor .resume-alerte { border-color: #e7b3b3; background: #fff6f6; }
.resume-tresor .resume-alerte strong { color: #c62828; }
/* une carte par paiement ; formulaires « Modifier » / « Valider cette date » en pleine largeur (03/10/2026, soir) */
.grille-paiement { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.grille-paiement .champ { margin: 0; min-width: 0; }
.grille-paiement input:not([type=checkbox]):not([type=radio]), .grille-paiement select { display: block; }
.grille-paiement label.champ > input, .grille-paiement label.champ > select { margin-top: 6px; }
.grille-paiement div.champ > label { margin-bottom: 6px; }
.grille-paiement .pt-libelle, .grille-paiement .pt-periode, .grille-paiement .pt-note { grid-column: span 2; }
.grille-paiement .pt-plein, .grille-paiement .pt-boutons { grid-column: 1 / -1; margin: 0; }
.pt-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-legende { display: block; font-weight: 600; margin-bottom: 4px; }
.pt-legende .doux { font-weight: 400; font-size: .85em; }
.pt-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-dates label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pt-dates input { flex: 1; min-width: 0; }
.pt-ajout { margin: 12px 0 18px; padding: 14px; border: 1px dashed var(--bord, #d5dde7); border-radius: 12px; }
.pt-lignes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.pt-ligne-ajout { position: relative; padding-right: 30px; }
.pt-ligne-ajout + .pt-ligne-ajout { padding-top: 12px; border-top: 1px solid var(--bord, #dde3ea); }
.pt-ligne-ajout .retirer-ligne { position: absolute; top: 4px; right: 0; }
.pt-ligne-ajout + .pt-ligne-ajout .retirer-ligne { top: 16px; }
.liste-paiements { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 12px; }
.paiement-tresor { border: 1px solid var(--bord, #dde3ea); border-radius: 12px; padding: 12px 14px; background: #fff; }
.paiement-tresor.en-alerte { border-color: #e7b3b3; background: #fffafa; }
.paiement-tresor.valide { border-left: 4px solid #1597d4; }
.pt-ligne { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pt-quoi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.pt-titre { font-size: 1.02rem; overflow-wrap: anywhere; }
.pt-chiffre { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pt-chiffre strong { font-size: 1.02rem; }
.badge.badge-valide { background: #e3f6f4; color: #0f6e66; }
.pt-solutions { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff3f3; border: 1px solid #f0caca; }
.pt-solutions p { margin: 0 0 4px; }
.pt-solutions-titre { font-weight: 700; color: var(--marine); margin-top: 6px !important; }
.pt-pistes { margin: 2px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-acompte { margin: 8px 0 0; }
/* « etes-vous sur de ce calcul ? » (04/10/2026) : le plus bas qui suit un paiement (plan final), et le montant
lu pendant la frappe (« 20,000 » : 20 DT ou 20 000 DT ?) */
.pt-plus-bas { margin: 8px 0 0; color: var(--doux); }
.pt-plus-bas strong { color: var(--texte); }
.pt-plus-bas.pt-plus-bas-juste { color: #7a4a00; }
.pt-plus-bas.pt-plus-bas-juste strong { color: #b45309; }
.pt-sans-seuil { margin: 10px 0; }
.montant-lu { display: block; margin-top: 2px; font-size: .8rem; font-weight: 500; color: var(--doux); }
.montant-lu:empty { display: none; }
.montant-lu.ambigu { color: #8a4b00; font-weight: 600; }
.montant-lu.illisible { color: var(--rouge); font-weight: 600; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pt-actions .en-ligne-form { display: inline; margin: 0; }
.pt-actions .btn.actif { box-shadow: inset 0 0 0 2px var(--marine); }
.pt-volet { margin-top: 10px; padding: 14px; border-radius: 10px; background: #f6f8fb; border: 1px solid var(--bord, #dde3ea); }
.pt-encaisser h4 { margin: 6px 0; }
.pt-categorie { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.badge.badge-achat { background: #fff3dc; color: #8a5a00; }
.badge.badge-depense { background: #e8eef7; color: var(--marine); }
/* depenses estimees (voyages, restaurants) : violet, comme leur losange sur la courbe (03/10/2026) */
.badge.badge-estimee { background: #efe9fb; color: #5a3ea6; }
.badge.badge-depassee { background: #c62828; color: #fff; white-space: nowrap; }
.insecable { white-space: nowrap; }
/* releve : classement intelligent (04/10/2026) */
.tuiles-classement { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.tuiles-classement > div { border: 1px solid var(--bord, #dde3ea); border-radius: 10px; padding: 8px 10px;
display: flex; flex-direction: column; gap: 2px; }
.tuiles-classement strong { font-size: 1.25rem; color: var(--marine); }
.tuiles-classement .tuile-a-classer { border-color: #f0c9a0; background: #fff8f0; }
.tuiles-classement .tuile-a-classer strong { color: #b45309; }
@media (max-width: 700px) { .tuiles-classement { grid-template-columns: 1fr 1fr; } }
/* telephone : la categorie d'une operation du releve sur toute la largeur (le nom n'est plus coupe) */
@media (max-width: 600px) { .grille-edition .champ:has(select[data-choix-categorie]) { grid-column: 1 / -1; } }
.paiement-tresor.estimee { border-left: 4px solid #7c5cc4; }
.paiement-tresor.estimee.en-alerte { border-left-color: #c62828; }
.paiement-tresor.estimee.passee { background: #fafbfc; }
.pt-section-estimees { margin-top: 6px; scroll-margin-top: calc(var(--haut-entete, 70px) + 12px); }
.pt-entete-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.pt-entete-section .titre-echeances { margin-bottom: 4px; }
.pt-total-section { display: inline-flex; align-items: baseline; gap: 8px; }
.pt-total-section strong { font-size: 1.15rem; color: #5a3ea6; }
.pt-ajout-estimees { border-color: #cbbcef; background: #fcfbff; }
.pt-passees { margin: 8px 0 4px; }
.pt-tranches { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #eef8f7; border: 1px solid #bfe5e1;
display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pt-tranches-titre { font-weight: 600; color: #0f6e66; flex-basis: 100%; }
.pt-tranches-liste { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding-left: 18px; flex: 1; }
.pt-tranches-dans { margin-top: 6px; background: #fff; }
.pt-tranches-bilan { flex-basis: 100%; margin: 0; }
.pt-choix-tranches { flex-basis: 100%; margin: 0 0 4px; }
.pt-choix-tranches label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.pt-choix-tranches select { width: auto; min-width: 150px; }
.pt-tranches-seul { margin-top: 8px; }
@media (max-width: 600px) { .pt-tranches-liste { flex-direction: column; } }
.pt-fixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pt-fixe-mois { border: 1px solid var(--bord, #dde3ea); border-radius: 10px; padding: 8px 10px; background: #fff; }
.pt-fixe-mois > summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; list-style: none; }
.pt-fixe-mois > summary::-webkit-details-marker { display: none; }
.pt-fixe-mois > summary .petit { grid-column: 1 / -1; }
.pt-fixe-mois[open] { grid-column: 1 / -1; }
.pt-fixe-nom { font-weight: 600; }
@media (max-width: 900px) {
.pt-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-quoi { grid-column: 1 / -1; }
.pt-chiffre { text-align: left; }
}
@media (max-width: 600px) {
.grille-paiement { grid-template-columns: 1fr 1fr; }
.grille-paiement .pt-libelle, .grille-paiement .pt-periode, .grille-paiement .pt-note,
.grille-paiement .pt-nb-tranches, .grille-paiement .pt-nature, .grille-paiement .pt-note-court { grid-column: 1 / -1; }
.resume-tresor { grid-template-columns: 1fr 1fr; }
.pt-ligne { gap: 10px 8px; }
.pt-chiffre > .doux.petit:first-child { font-size: .78rem; }
}
@media (max-width: 700px) {
.actions-tresor { white-space: normal; }
.grille-tresor { grid-template-columns: 1fr 1fr; }
.grille-tresor .champ:first-child { grid-column: 1 / -1; }
.actions-tresor .valider-tresor[open] { min-width: 0; }
}
/* ---- BI : FACTURES NON PAYEES (04/10/2026, « box separee dans le BI », 30 / 60 / 90 / 120 jours) ---- */
.tuile-bi.tuile-impayes { border-top-color: #d0574f; }
.tuile-bi.tuile-tresor { border-top-color: #1597d4; } /* Tresorerie (04/10/2026) : vert d'eau, comme la courbe probable */
.entete-impayes { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.entete-impayes h2 { margin: 0; }
.seuils-impayes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.seuils-impayes a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--bord, #dde2ec); border-radius: 10px; background: #fff; color: var(--marine, #0b2a5c);
text-decoration: none; }
.seuils-impayes a:hover { border-color: var(--bleu, #003da6); }
.seuils-impayes .seuil-titre { font-size: .82rem; font-weight: 700; color: var(--doux, #5b6480); }
.seuils-impayes strong { font-size: 1.15rem; line-height: 1.2; white-space: nowrap; }
.seuils-impayes strong small { font-size: .72em; font-weight: 600; }
.seuils-impayes .seuil-n { font-size: .8rem; color: var(--doux, #5b6480); }
.seuils-impayes a.actif { background: var(--marine, #0b2a5c); border-color: var(--marine, #0b2a5c); color: #fff; }
.seuils-impayes a.actif .seuil-titre, .seuils-impayes a.actif .seuil-n { color: rgba(255, 255, 255, .85); }
.clients-impayes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 14px; }
.clients-impayes a { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 11px;
border-radius: 999px; background: #f1f4f9; color: var(--marine, #0b2a5c); text-decoration: none; font-size: .88rem; }
.clients-impayes a:hover { background: #e3eaf5; }
.clients-impayes a strong { font-size: inherit; white-space: nowrap; }
.filtre-client-impayes { margin: 12px 0 14px; padding: 9px 12px; border-radius: 8px; background: #f1f4f9; }
.filtre-client-impayes .codes { display: inline; }
.tableau-impayes .codes { display: block; }
.tableau-impayes td.c-client { width: 100%; } /* la place restante : « Depuis » reste pres du montant */
.tableau-impayes td.c-facture { white-space: nowrap; width: 1%; }
.tableau-impayes td.c-jours { white-space: nowrap; width: 1%; }
.tableau-impayes td.c-reste { white-space: nowrap; }
.tableau-impayes .partielle { display: block; font-weight: 400; }
.age-impaye { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .82rem; font-weight: 700;
white-space: nowrap; background: #eef1f6; color: var(--doux, #5b6480); }
.age-impaye.age-60 { background: #fff3d6; color: #8a5a00; }
.age-impaye.age-90 { background: #ffe4c7; color: #9c4a00; }
.age-impaye.age-120 { background: #fde1df; color: #b3261e; }
.vide-impayes { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: #eaf8ee; color: #155f2c; }
@media (max-width: 700px) {
.seuils-impayes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seuils-impayes a { padding: 8px 9px; }
.seuils-impayes strong { font-size: 1rem; }
/* une facture = deux lignes : client et reste du ; numero, date et anciennete */
.tableau-impayes thead { display: none; }
.tableau-impayes, .tableau-impayes tbody { display: block; }
.tableau-impayes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 0;
border-bottom: 1px solid var(--bord, #dde2ec); }
.tableau-impayes tr[hidden] { display: none; }
.tableau-impayes td { padding: 0; border: 0; min-width: 0; text-align: left; }
.tableau-impayes td.c-client { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; font-weight: 600; }
.tableau-impayes td.c-reste { grid-column: 2; grid-row: 1; text-align: right; }
.tableau-impayes td.c-client, .tableau-impayes td.c-facture, .tableau-impayes td.c-jours { width: auto; white-space: normal; }
.tableau-impayes td.c-facture { grid-column: 1; grid-row: 2; }
.tableau-impayes td.c-jours { grid-column: 2; grid-row: 2; text-align: right; }
.tableau-impayes td.c-client .codes, .tableau-impayes td.c-facture .codes { display: inline; margin-left: 6px;
font-weight: 400; }
.tableau-impayes .partielle { white-space: normal; max-width: 11em; margin-left: auto; }
/* chiffres : le montant sur toute la largeur, la part et la plus ancienne cote a cote */
.chiffres-impayes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chiffres-impayes > div:first-child, .chiffres-impayes > div:nth-child(2):last-child { grid-column: 1 / -1; }
/* raccourcis clients : une ligne qui defile au doigt (comme les marques du catalogue) */
.clients-impayes { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
scrollbar-width: none; }
.clients-impayes::-webkit-scrollbar { display: none; }
.clients-impayes > * { flex: none; }
}
/* ---- TRESORERIE : sa propre page (04/10/2026, « un module tresorerie tres intelligent, a sa propre page, qui
estime si on va etre paye pour les factures pas encore payees ») — une ligne par paiement (date sure, date
probable), le detail se deplie ; factures attendues client par client ; mois par mois ---- */
.carte-lien-tresor { padding: 12px 16px; }
.titre-tresor { font-size: 1.12rem; margin: 0 0 10px; }
.titre-tresor .doux { font-weight: 400; }
.resume-tresor-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.resume-tresor > a { border: 1px solid var(--bord, #dde3ea); border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.resume-tresor > a:hover { border-color: var(--bleu, #003da6); }
.resume-tresor > a strong, .resume-factures .resume-attendue strong { color: #0f6e66; }
.resume-factures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-legende-courbe { margin: 6px 0 0; }
.legende-annee i.tirets { background: repeating-linear-gradient(90deg, #1597d4 0 6px, transparent 6px 10px) !important; }
.pt-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 10px; }
.pt-tete, .pt-resume { display: grid; gap: 10px; align-items: center;
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr) 18px; }
.pt-tete { padding: 0 14px; font-size: .76rem; font-weight: 700; color: var(--doux); text-transform: uppercase;
letter-spacing: .02em; }
.pt-tete > span:not(:first-child) { text-align: right; }
.pt-tete::after { content: ""; }
.pt-paiement { border: 1px solid var(--bord, #dde3ea); border-radius: 12px; background: #fff; }
.pt-paiement.en-alerte { border-color: #e7b3b3; background: #fffafa; }
.pt-paiement[open] { box-shadow: 0 2px 10px rgba(22, 34, 60, .08); }
.pt-resume { position: relative; padding: 10px 14px; cursor: pointer; list-style: none; }
.pt-resume::-webkit-details-marker { display: none; }
.pt-resume::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--doux); justify-self: end;
transition: transform .15s; }
.pt-paiement[open] > .pt-resume::after { transform: rotate(90deg); }
.pt-r-quoi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-r-quoi .pt-badges { margin: 0; }
.pt-r-montant, .pt-r-date, .pt-r-solde { display: flex; flex-direction: column; align-items: flex-end; text-align: right;
gap: 1px; min-width: 0; }
.pt-r-date .petit, .pt-r-solde .petit { line-height: 1.25; }
.pt-r-lib { display: none; font-size: .74rem; color: var(--doux); }
.pt-corps { padding: 0 14px 14px; border-top: 1px solid var(--bord, #dde3ea); }
.pt-infos { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.pt-probable-info { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #eef8f7; border: 1px solid #bfe5e1;
color: #0f5751; }
.pt-liste-clients .pt-tete, .pt-liste-clients .pt-resume {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 18px; }
.badge.etat-attendue { background: #e3f6f4; color: #0f6e66; }
.badge.etat-retard { background: #fff1db; color: #8a5a00; }
.badge.etat-douteuse { background: #fde1df; color: #b3261e; }
.badge.etat-especes, .badge.etat-groupe { background: #eef1f5; color: var(--doux); }
.tableau-attendues { margin-top: 10px; }
.pt-alerte-client { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff3f3;
border: 1px solid #f0caca; color: #8e1c1c; }
.pt-r-solde .badge + .badge { margin-top: 3px; }
.tableau-attendues td { vertical-align: top; }
.tableau-mois-tresor td { vertical-align: top; }
.tableau-mois-tresor .m-lib { display: none; }
.tableau-mois-tresor .m-detail, .tableau-mois-tresor .m-prob, .tableau-mois-tresor .m-solde .petit { display: block; }
.tableau-mois-tresor .ligne-alerte td { background: #fff3f3; }
@media (max-width: 1100px) {
.resume-tresor-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.resume-tresor-5, .resume-factures { grid-template-columns: 1fr 1fr; }
.resume-tresor-5 > :first-child { grid-column: 1 / -1; }
.pt-tete { display: none; }
.pt-resume, .pt-liste-clients .pt-resume { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px;
padding: 10px 12px; }
.pt-resume .pt-r-quoi { grid-column: 1 / -1; padding-right: 22px; }
.pt-resume::after { position: absolute; top: 12px; right: 12px; }
.pt-r-montant, .pt-r-date, .pt-r-solde { align-items: flex-start; text-align: left; }
.pt-r-lib { display: block; }
.pt-corps { padding: 0 12px 12px; }
/* paiements : les deux dates cote a cote (l'essentiel), puis le montant et le solde du jour */
.pt-resume { grid-template-areas: "quoi quoi" "sur prob" "montant solde"; gap: 6px 12px; }
.pt-resume .pt-r-quoi { grid-area: quoi; }
.pt-resume .pt-r-montant { grid-area: montant; }
.pt-resume .pt-r-date { grid-area: sur; }
.pt-resume .pt-r-probable { grid-area: prob; }
.pt-resume .pt-r-solde { grid-area: solde; }
.pt-resume .pt-r-date strong, .pt-resume .pt-r-montant strong, .pt-resume .pt-r-solde strong { font-size: .98rem; }
/* clients : reste et habitude, puis attendu et etat (ordre du code) */
.pt-liste-clients .pt-resume { grid-template-areas: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pt-liste-clients .pt-resume > * { grid-area: auto; }
.pt-liste-clients .pt-resume .pt-r-quoi { grid-column: 1 / -1; }
.pt-resume .badge { white-space: normal; }
.resume-factures > :first-child { grid-column: 1 / -1; }
/* mois par mois : une carte par mois, trois colonnes */
.tableau-mois-tresor, .tableau-mois-tresor tbody { display: block; width: 100%; }
.tableau-mois-tresor thead { display: none; }
.tableau-mois-tresor tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px;
padding: 10px 0; border-bottom: 1px solid var(--bord, #dde3ea); }
.tableau-mois-tresor td { display: flex; flex-direction: column; text-align: left !important; padding: 0; border: 0;
background: none !important; min-width: 0; white-space: normal; }
.tableau-mois-tresor .m-mois { grid-column: 1 / -1; display: block; }
.tableau-mois-tresor .m-solde { grid-column: span 2; }
.tableau-mois-tresor .m-detail { display: none; }
.tableau-mois-tresor .m-lib { display: block; font-size: .72rem; color: var(--doux); font-weight: 400; }
}
/* ---- PILOTAGE refait (04/10/2026, « pas vraiment utile et aidant ») : 4 voyants, les decisions du moment ; le plan
et la liste complete se deplient ---- */
.pilotage-etat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 6px; }
.pil-voyant { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 16px; border-radius: 12px;
background: var(--surface, #fff); border: 1px solid var(--bord, #dde3ea); border-left: 6px solid #9aa5b8;
color: inherit; text-decoration: none; }
.pil-voyant:hover { border-color: var(--bleu, #003da6); border-left-color: inherit; }
.pil-voyant strong { font-size: 1.28rem; color: var(--marine, #0b2a5c); line-height: 1.2; }
.pil-voyant-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--doux); font-size: .86rem; }
.pil-pastille { width: 11px; height: 11px; border-radius: 50%; background: #9aa5b8; flex: none; }
.pil-vert { border-left-color: #1a9e5c; } .pil-vert .pil-pastille { background: #1a9e5c; }
.pil-orange { border-left-color: #e08a00; } .pil-orange .pil-pastille { background: #e08a00; }
.pil-rouge { border-left-color: #c62828; } .pil-rouge .pil-pastille { background: #c62828; }
.pil-phrase { font-size: .9rem; line-height: 1.35; }
.pil-rouge .pil-phrase { color: #8e1c1c; }
/* une seule liste d'actions (04/10/2026) : rang, categorie, titre, montant a droite, pourquoi, a faire, detail ;
bouton et case « Fait » a droite (sous le texte sur telephone) */
.pil-actions { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pil-action { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px 14px; align-items: start;
padding: 12px 14px; border: 1px solid var(--bord, #dde3ea); border-left: 4px solid var(--sg-vert, #1597d4);
border-radius: 12px; background: #fff; }
.pil-action.urgence-1 { border-color: #f0caca; border-left-color: #c62828; background: #fffafa; }
.pil-action.urgence-2 { border-left-color: #e08a00; }
.pa-rang { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: 800; background: #eef1f5; color: var(--marine, #0b2a5c); }
.urgence-1 > .pa-rang { background: #c62828; color: #fff; }
.urgence-2 > .pa-rang { background: #e08a00; color: #fff; }
.pa-corps { min-width: 0; overflow-wrap: anywhere; }
.pa-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pa-titre { flex: 1 1 260px; }
.pa-valeur { font-weight: 700; white-space: nowrap; color: var(--marine, #0b2a5c); }
.urgence-1 .pa-valeur { color: var(--rouge); }
.pa-texte { margin: 5px 0 0; font-size: .92rem; line-height: 1.45; }
.pil-action .pr-details { margin-top: 6px; }
.pa-boutons { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pa-case { margin: 0; }
.pa-case label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--doux);
cursor: pointer; white-space: nowrap; }
.pa-case input { width: 18px; height: 18px; margin: 0; }
.pil-action:has(.pa-case input:checked) .pa-corps { opacity: .55; }
.pil-action:has(.pa-case input:checked) .pa-titre { text-decoration: line-through; }
.pil-actions-suite { margin-top: 10px; }
.pil-a-savoir { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f6f8fb; font-size: .92rem; }
.pil-a-savoir ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.pil-en-ordre { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--vert-fonce); font-size: .9rem; }
.pil-autres > summary, .pil-postes > summary { cursor: pointer; font-weight: 600; color: var(--marine, #0b2a5c); margin: 6px 0; }
.pil-replie > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
gap: 4px 12px; }
.pil-replie > summary::-webkit-details-marker { display: none; }
.pil-replie > summary h2 { display: inline; margin: 0; }
.pil-replie > summary h2::after { content: " ›"; color: var(--doux); }
.pil-replie[open] > summary h2::after { content: " ⌄"; }
.pil-replie[open] > summary { margin-bottom: 12px; }
@media (max-width: 1100px) { .pilotage-etat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.pilotage-etat { grid-template-columns: 1fr; }
.pil-action { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; padding: 12px 12px 12px 10px; }
.pa-rang { width: 26px; height: 26px; font-size: .85rem; }
.pa-boutons { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
.pilotage-plan th, .pilotage-plan td { padding-left: 6px; padding-right: 6px; }
.pr-details li { flex-wrap: wrap; gap: 2px 12px; }
.pr-details li .nombre { white-space: normal; margin-left: auto; }
}
/* ======================================================================
RECEPTIONS DES COMMANDES FOURNISSEUR (04/10/2026) — liste en cartes ; la page de reception reprend le comptage
des bons de transfert (.liste-transfert) ; apercu de la facture achat pour les administrateurs
====================================================================== */
.liste-receptions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.reception-carte { display: block; text-decoration: none; color: inherit; border-left: 5px solid var(--bord);
margin: 0; }
.reception-carte:hover { box-shadow: 0 2px 10px rgba(20, 40, 80, .1); }
.reception-carte.etat-a_recevoir { border-left-color: #e0a100; }
.reception-carte.etat-en_cours { border-left-color: #2f6fc0; }
.reception-carte.etat-recue { border-left-color: #1a7f37; background: #f6fcf8; }
.reception-carte.etat-facturee, .reception-carte.etat-cloturee { opacity: .85; }
.rc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rc-tete strong { font-size: 1.05rem; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.rc-tete .badge { flex: none; white-space: nowrap; }
.rc-chiffres { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .9rem; }
.rc-avance { margin-top: 6px; font-weight: 600; color: var(--marine, #0b2a5c); }
.reception-carte.etat-recue .rc-avance { color: #1a7f37; }
.reception-depot { margin-bottom: 12px; }
.reception-depot form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.reception-depot select { min-width: 220px; max-width: 420px; }
.reception-bc { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.reception-bc .reception-bc-texte { flex: 1 1 280px; }
.reception-bc form { margin: 0; }
@media (max-width: 600px) { .reception-bc form, .reception-bc form .btn { width: 100%; } }
.ligne-transfert.hors-commande { border-style: dashed; }
/* traites revenues impayees / reglees autrement (BI › Traites et cheques, 04/10/2026) : texte a gauche, montant a
droite — lisible sur telephone sans defilement de cote */
.liste-traites td { vertical-align: top; }
.liste-traites td.droite { width: 1%; padding-left: 12px; }
.facture-achat { margin-bottom: 14px; }
.facture-achat-lignes td strong { display: block; line-height: 1.25; }
.facture-achat-lignes td.nombre { white-space: nowrap; }
.totaux-achat { margin: 12px 0 0 auto; max-width: 340px; display: grid; gap: 4px; }
.totaux-achat > div { display: flex; justify-content: space-between; gap: 16px; }
.totaux-achat dt { color: var(--doux); }
.totaux-achat dd { margin: 0; font-weight: 600; }
.totaux-achat .ligne-forte { border-top: 2px solid var(--marine, #0b2a5c); padding-top: 6px; margin-top: 4px; }
.totaux-achat .ligne-forte dt, .totaux-achat .ligne-forte dd { color: var(--marine, #0b2a5c); font-weight: 800;
font-size: 1.05rem; }
.facture-achat-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 14px; }
.facture-achat-form .champ { flex: 1 1 240px; margin: 0; }
.facture-achat-form .btn { flex: 0 1 auto; }
.clore-reception { margin: 14px 0; }
.clore-reception summary { cursor: pointer; font-weight: 600; color: var(--doux); }
.clore-reception form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.clore-reception .champ { flex: 1 1 260px; margin: 0; }
@media (max-width: 600px) {
.liste-receptions { grid-template-columns: 1fr; }
.facture-achat-lignes .col-secondaire { display: none; }
.facture-achat-lignes th, .facture-achat-lignes td { padding-left: 6px; padding-right: 6px; }
.totaux-achat { max-width: none; }
.facture-achat-form .btn { width: 100%; justify-content: center; }
.reception-depot select { min-width: 0; width: 100%; }
}
/* Receptions fournisseur : rouvrir une reception close (04/10/2026) — deux boutons cote a cote, l'un sous l'autre
sur telephone */
.rouvrir-reception .actions-rouvrir { display: flex; gap: 10px; flex-wrap: wrap; }
.rouvrir-reception .actions-rouvrir form { margin: 0; flex: 1 1 260px; }
.rouvrir-reception .actions-rouvrir .btn { width: 100%; }
/* COMMANDES FOURNISSEUR (achats, 04/10/2026) */
.achats-depart { margin-bottom: 18px; }
.achat-entete { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.achat-entete .champ { margin: 0; }
.achat-entete #entete-etat { grid-column: 1 / -1; min-height: 1.2em; }
.achat-source { margin-bottom: 14px; }
.achat-recherche input[type=search] { width: 100%; margin-top: 6px; }
.liste-recherche-achat, .liste-manquants { list-style: none; margin: 10px 0 0; padding: 0; }
.liste-recherche-achat li, .liste-manquants li { display: flex; gap: 10px; align-items: center; justify-content: space-between;
padding: 8px 0; border-top: 1px solid var(--bord, #e3e8f0); }
.lr-texte, .lm-texte { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.lr-ajout { display: flex; gap: 6px; align-items: center; flex: none; margin: 0; }
.champ-achat { width: 92px; text-align: right; }
.champ-achat.champ-court { width: 64px; }
.achat-manquants { border-left: 4px solid #c0392b; }
.actions-manquants { display: flex; gap: 8px; flex-wrap: wrap; }
.tableau-achat td.c-article { min-width: 220px; }
.tableau-achat tr.ligne-zero td { opacity: .55; }
.achat-totaux { margin-top: 14px; }
@media (max-width: 600px) {
.liste-recherche-achat li, .liste-manquants li { flex-wrap: wrap; }
.lr-ajout { width: 100%; justify-content: flex-end; }
}
/* telephone : une fiche compacte par article — nom ; Quantite | Prix | Remise ; TVA | Net HT | Retirer */
@media (max-width: 700px) {
.tableau-achat thead { display: none; }
.tableau-achat, .tableau-achat tbody { display: block; width: 100%; }
.tableau-achat tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; padding: 10px 0;
border-top: 1px solid var(--bord, #e3e8f0); }
.tableau-achat td, .tableau-achat td.droite { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
.tableau-achat td.c-article { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
.tableau-achat td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; color: #6b7a90; }
.tableau-achat .champ-achat, .tableau-achat .champ-achat.champ-court { width: 100%; }
.tableau-achat td.c-retirer { text-align: right; align-self: end; }
.achat-lignes .defile { overflow: visible; }
}
/* RAPPEL PAR E-MAIL avant une hausse planifiee (04/10/2026) : option a cote de « Planifier » et carte de la
planification ; les champs n'apparaissent qu'une fois la case cochee. */
.rappel-planif { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d5dbe6; }
.rappel-champs { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 10px 16px;
margin-top: 10px; align-items: start; }
.rappel-champs .aide { grid-column: 1 / -1; }
.rappel-champs input[type="datetime-local"], .rappel-champs textarea { width: 100%; min-width: 0; }
.rappel-champs .champ { margin: 0; }
.carte-rappel .case { margin: 4px 0 0; }
.rappel-etat.rappel-envoye { color: #178a3e; }
.rappel-etat.rappel-prevu { color: #003da6; }
.rappel-etat.rappel-annule { color: #8a93a6; }
@media (max-width: 640px) { .rappel-champs { grid-template-columns: minmax(0, 1fr); } }
/* ACCUEIL CLIENT : resume des promotions (05/10/2026) — la plus forte remise atteignable, les promotions en cours */
a.resume-promos { display: block; margin-top: 24px; color: inherit; text-decoration: none; border-left: 4px solid #c62828; }
a.resume-promos:hover { box-shadow: 0 4px 16px rgba(28, 44, 96, .12); }
.resume-promos-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.resume-promos-sur { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #c62828; }
.resume-promos-max { font-size: 1.5rem; color: #0b2a5c; margin: 2px 0; }
.resume-promos-max strong { color: #c62828; font-size: 2rem; }
.resume-promos-liste { margin: 12px 0 0; padding-left: 18px; }
.resume-promos-liste li { margin: 3px 0; }
.promo-jusqua { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #c62828;
color: #fff; font-size: .8rem; font-weight: 700; vertical-align: middle; }
@media (max-width: 600px) { .resume-promos-tete .btn { width: 100%; text-align: center; } }
/* PAGE PROMOTIONS : une section par offre, de la plus forte remise a la plus faible (05/10/2026) */
.niveaux-promos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.niveau-promo { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px;
border: 1px solid #f1c4c4; background: #fff5f5; color: #0b2a5c; text-decoration: none; white-space: nowrap; }
.niveau-promo strong { color: #c62828; }
.niveau-promo span { font-size: .82rem; color: #5b6478; }
.niveau-promo:hover { border-color: #c62828; }
.offre-promo { margin-bottom: 26px; scroll-margin-top: calc(var(--haut-entete, 70px) + 12px); }
.offre-promo-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 2px; }
.offre-promo-titre .promo-jusqua { margin-left: 0; font-size: .95rem; padding: 3px 12px; }
.offre-promo-qte { color: #c62828; font-weight: 700; }
.offre-promo-sous { margin-bottom: 12px; }
.offre-promo-liste { list-style: none; margin: 4px 0 12px; padding: 0; }
.offre-promo-liste li { margin: 2px 0; }
/* une offre d'un ou deux articles se place a cote de la suivante, sur les MEMES colonnes que les fiches (subgrid) :
titre, sous-titre et fiches de deux offres voisines a la meme hauteur. Sans subgrid : une offre par rangee. */
@supports (grid-template-columns: subgrid) {
.offres-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 16px; }
.offre-promo { grid-column: 1 / -1; grid-row: span 3; display: grid; grid-template-columns: subgrid;
grid-template-rows: subgrid; row-gap: 0; margin-bottom: 0; }
.offre-promo > * { grid-column: 1 / -1; min-width: 0; }
.offre-promo > .grille-produits { grid-template-columns: subgrid; margin-bottom: 26px; align-self: start; }
.offre-promo.courte-1 { grid-column: span 1; }
.offre-promo.courte-2 { grid-column: span 2; }
.offre-promo.courte .offre-promo-titre { align-self: end; }
@media (max-width: 700px) {
.offres-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.offre-promo > .grille-produits { margin-bottom: 20px; }
.offre-promo.courte .offre-promo-titre { font-size: 1rem; gap: 4px 6px; }
.offre-promo.courte .offre-promo-titre .promo-jusqua { font-size: .85rem; padding: 2px 9px; }
}
}
@media (max-width: 600px) {
/* pastilles compactes (« −25 % 6 »), toutes visibles : elles passent a la ligne */
.niveaux-promos { gap: 6px; }
.niveau-promo { padding: 5px 10px; gap: 4px; }
.offre-promo-titre { font-size: 1.15rem; }
}
/* PRODUITS › STOCK PAR DEPOT (05/10/2026) : filtres, tuiles par depot, tableau ; sur telephone une fiche par article
(photo, nom, depots en pastilles, total et valeur), les colonnes des depots etant masquees. */
.filtres-stock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 14px; }
.filtres-stock .champ { margin: 0; flex: 0 1 240px; min-width: 0; }
.filtres-stock .champ > span { display: block; margin-bottom: 6px; }
.cases-stock { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 10px; }
.cases-stock .case { margin: 0; }
.case-valorise strong { color: var(--marine); }
.tuiles-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tuile-stock { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--bord);
border-radius: 10px; color: inherit; text-decoration: none; }
.tuile-stock-nb strong { font-size: 1.35rem; color: var(--marine); }
.tuile-stock-nb strong.negatif { color: var(--rouge); }
a.tuile-depot:hover { border-color: var(--accent); }
.tuile-stock-titre { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.tuile-stock-valeur { margin-top: 4px; font-weight: 700; color: #155f2c; font-variant-numeric: tabular-nums; }
.valorisation-note { margin-bottom: 14px; border-left: 4px solid #1597d4; }
.avertissement-stock { color: #a15c00; }
.tableau-stock .stock-article { display: flex; gap: 12px; align-items: flex-start; min-width: 260px; }
.stock-photo { flex: none; width: 52px; height: 52px; border: 1px solid var(--bord); border-radius: 8px; background: #fff;
display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stock-photo img { width: 46px; height: 46px; object-fit: contain; }
.tableau-stock .stock-article strong { display: block; }
.tableau-stock .codes { display: block; }
.tableau-stock th.c-depot { white-space: normal; min-width: 72px; max-width: 120px; font-size: .8rem; line-height: 1.25; }
.tableau-stock td.c-depot.vide { color: var(--doux); }
.tableau-stock .negatif, .pastille-depot.negatif strong { color: var(--rouge); }
.tableau-stock td.c-total, .tableau-stock td.c-valeur { white-space: nowrap; }
.lots-stock { margin-top: 8px; font-size: .84rem; }
.lots-stock summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.lots-stock ul { margin: 6px 0 0; padding-left: 18px; }
.lots-stock li { margin: 3px 0; }
.stock-mobile { display: none; }
@media (max-width: 700px) {
.filtres-stock .champ { flex: 1 1 100%; }
.filtres-stock .champ > span { font-size: .82rem; }
.tuiles-stock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tuile-stock { padding: 10px; }
.tuile-stock-nb strong { font-size: 1.15rem; }
.tuile-stock-titre { font-size: .72rem; }
.tableau-stock thead, .tableau-stock td.c-depot, .tableau-stock td.c-total, .tableau-stock td.c-pu,
.tableau-stock td.c-valeur { display: none; }
.tableau-stock, .tableau-stock tbody, .tableau-stock tr, .tableau-stock td.c-article { display: block; width: 100%; }
.tableau-stock tr { border-bottom: 1px solid var(--bord); }
.tableau-stock td.c-article { padding: 10px 2px; border: 0; }
.tableau-stock .stock-article { min-width: 0; }
.stock-mobile { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 64px; align-items: center; }
.pastille-depot { padding: 3px 9px; border-radius: 999px; background: #eef3f8; font-size: .8rem; white-space: nowrap; }
.stock-mobile-total { font-size: .85rem; white-space: nowrap; }
.lots-stock { margin-left: 64px; }
}
/* Stock par depot, ordinateur (05/10/2026 : « pas de separation entre les colonnes ») : traits verticaux entre les
colonnes, en-tete sur fond, une ligne sur deux teintee ; Total et Valeur separes par un trait plus marque. */
@media (min-width: 701px) {
.tableau-stock { border: 1px solid var(--bord); border-radius: 10px; border-collapse: separate; border-spacing: 0;
overflow: hidden; background: #fff; }
.tableau-stock th, .tableau-stock td { border-bottom: 1px solid var(--bord); }
.tableau-stock th + th, .tableau-stock td + td { border-left: 1px solid var(--bord); }
.tableau-stock thead th { background: #eef2f7; color: var(--encre); vertical-align: bottom; padding: 10px 12px; }
.tableau-stock tbody tr:nth-child(even) td { background: #f8fafc; }
.tableau-stock tbody tr:hover td { background: #eef6fb; }
.tableau-stock tbody tr:last-child td { border-bottom: 0; }
.tableau-stock td.c-depot { min-width: 84px; }
.tableau-stock th.c-total, .tableau-stock td.c-total { border-left: 2px solid #b9c6d8; background: #f3f6fa; }
.tableau-stock tbody tr:nth-child(even) td.c-total { background: #ecf1f7; }
.tableau-stock th.c-pu, .tableau-stock td.c-pu { border-left: 2px solid #b9c6d8; }
.tableau-stock td.c-valeur { background: #f1faf4; }
.tableau-stock tbody tr:nth-child(even) td.c-valeur { background: #e8f6ec; }
.tableau-stock td.c-valeur strong { color: #155f2c; }
}
/* BON DE TRANSFERT MODIFIE DANS NeXus avant sa validation (05/10/2026) : encadre sur le bon, pastille dans la liste */
.modif-nexus ul { margin: 6px 0 0; padding-left: 20px; }
.modif-nexus li { margin: 2px 0; }
.pastille-modif-nexus { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem;
font-weight: 600; background: #fff5e5; color: #7a4a00; border: 1px solid #f5d7a6; }
/* Boutons d'une carte des Parametres (05/10/2026 : « Enregistrer les reglages » debordait de la carte par la gauche —
le style du tableau de l'Equipe, sur une ligne et aligne a droite, n'allait pas dans une carte etroite) */
.actions-carte { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; align-items: center; margin: 4px 0 0; }
.actions-carte .btn { white-space: nowrap; }
/* CONSIGNATION (06/10/2026) : verification chez le client — photo carree, quantite, « Vendu », choix du remplacement */
.tuiles-consignation { margin-bottom: 16px; }
.aide-consignation { margin-bottom: 14px; }
.grille-consignation { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-consig { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--bord, #dde2ec);
border-left: 5px solid var(--bord, #dde2ec); transition: border-color .15s, background .15s; }
.carte-consig.vendu { border-left-color: #e0a100; background: #fffaf0; }
.consig-photo { aspect-ratio: 1 / 1; width: 100%; background: #fff; border: 1px solid #eef0f5; border-radius: 10px;
display: flex; align-items: center; justify-content: center; overflow: hidden; }
.consig-photo img { width: 100%; height: 100%; object-fit: contain; }
.consig-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.consig-nom { line-height: 1.25; overflow-wrap: anywhere; }
.consig-qte strong { font-size: 1.5rem; color: var(--marine, #0b2a5c); margin-left: 4px; }
.consig-vendu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consig-vendu .legende-qte { font-weight: 600; }
.consig-choix { border: 1px dashed #e0c27a; border-radius: 8px; padding: 8px 10px; margin: 0; display: grid; gap: 6px; }
.consig-choix legend { padding: 0 4px; font-weight: 600; }
.consig-choix .case { align-items: flex-start; }
.barre-consignation { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; display: flex; align-items: center;
justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff;
border: 1px solid var(--bord, #dde2ec); border-radius: 12px; box-shadow: 0 -4px 16px rgba(28, 44, 96, .10); }
.barre-consignation .bc-resume { font-weight: 600; }
form.avec-vente .barre-consignation { border-color: #e0a100; background: #fffaf0; }
/* liste des clients : tableau pleine largeur ; sur telephone, une fiche compacte par client */
.tableau-consignation { width: 100%; }
.tableau-consignation .c-verif { white-space: nowrap; }
.tableau-consignation .c-verif-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tableau-consignation .c-verif .btn { margin-left: 0; flex: none; } /* boutons alignes en colonne (12/10/2026) */
.consig-resume-tel { display: none; }
@media (max-width: 1000px) { .tuiles-consignation .tuile-bi:last-child { grid-column: 1 / -1; } }
/* fiches alignees ligne a ligne (photo, nom, codes, quantite, detail, « Vendu », choix) : une rangee par element */
@supports (grid-template-rows: subgrid) {
@media (min-width: 601px) {
.grille-consignation { row-gap: 0; }
.carte-consig { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 14px; }
.carte-consig .consig-texte { display: contents; }
.carte-consig .consig-nom { margin-top: 10px; align-self: start; }
.carte-consig .codes { margin-top: 3px; }
.carte-consig .consig-qte { margin-top: 6px; align-self: end; }
.carte-consig .consig-detail { margin-top: 2px; }
.carte-consig .consig-vendu { margin-top: 10px; align-self: end; }
.carte-consig .consig-choix { margin-top: 10px; align-self: start; }
}
}
@media (max-width: 700px) {
.tableau-consignation thead { display: none; }
.tableau-consignation tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0;
border-bottom: 1px solid var(--bord, #e3e7ef); }
.tableau-consignation td { display: block; padding: 0; border: 0; }
.tableau-consignation td.c-num { display: none; }
.tableau-consignation .c-verif { display: flex; align-items: center; justify-content: space-between; gap: 10px;
white-space: normal; font-size: .9rem; }
.tableau-consignation .c-verif .btn { margin-left: 0; flex: none; }
.tableau-consignation .c-verif-ligne { flex: 1; min-width: 0; }
.consig-resume-tel { display: block; margin-top: 4px; }
}
@media (max-width: 600px) {
.grille-consignation { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.carte-consig { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; padding: 10px; }
.consig-photo { width: 96px; }
.consig-vendu, .consig-choix { grid-column: 1 / -1; }
.barre-consignation { flex-direction: column; align-items: stretch; padding: 10px 12px; }
.barre-consignation .btn { width: 100%; }
}
/* SCAN (07/10/2026) : + / − dans la carte du scan des bons de transfert et des receptions ; colis ITF-14 ; trop de
pieces (combien retirer du carton) ; recherche par reference dans la barre collee en haut */
.scan-pas { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.scan-pas-legende { font-size: .9rem; color: var(--doux, #5b6480); font-weight: 600; }
.scan-pas .quantite button { width: 44px; height: 44px; font-size: 1.3rem; }
.scan-pas .quantite input { width: 64px; height: 44px; font-size: 1.15rem; }
.scan-trop { margin: 6px 0 2px; }
.scan-trop .scan-hors-bon { margin: 0 0 6px; }
.scan-trop .btn-trop { white-space: normal; text-align: left; }
.scan-note { margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: #fff7e6; color: #8a5300;
font-size: .9rem; font-weight: 600; }
.recherche-lignes { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.recherche-lignes input { flex: 1; min-width: 0; }
.recherche-lignes-compte { flex: none; white-space: nowrap; }
.barre-scan-transfert > .recherche-lignes:first-child { margin-top: 0; }
.vide-lignes { margin: 4px 0 16px; }
.scan-transfert-texte > strong { display: block; line-height: 1.25; margin-bottom: 2px; }
/* ACHAT PAR CARTON OBLIGATOIRE (07/10/2026) : pastille et suggestion de cartons complets a la validation par SMAM */
.carton-pastille.carton-oblige { background: #fff1d6; color: #8a5300; font-weight: 700; }
.suggestion-carton { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.suggestion-carton .carton-pastille { margin-top: 0; }
/* BON DE TRANSFERT MANUEL (07/10/2026) : depots, recherche, scan, bon en preparation */
.depots-transfert { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.depots-transfert .champ { margin: 0; flex: 1 1 220px; min-width: 0; }
.depots-transfert select { width: 100%; }
.fleche-depots { flex: none; font-size: 1.4rem; color: var(--doux, #5b6480); padding-bottom: 8px; }
.resume-panier-ligne { margin: 8px 0 0; }
.resultats-transfert .liste-transfert { margin-bottom: 4px; }
.ajout-transfert, .compte-panier { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ajout-transfert .quantite button, .compte-panier .quantite button { width: 44px; height: 44px; font-size: 1.25rem; }
.ajout-transfert .quantite input, .compte-panier .quantite input { width: 64px; height: 44px; font-size: 1.1rem; }
.ajout-transfert .btn { min-height: 44px; }
.dans-bon { color: #1a7f37; font-weight: 700; margin-left: 6px; }
.dans-bon:empty { display: none; }
.panier-transfert { margin-top: 16px; }
.panier-transfert .erreur-texte { color: #b42318; font-weight: 600; }
.scan-note-tn { margin: 4px 0; font-weight: 600; color: #1a7f37; }
.scan-note-tn.alerte { color: #8a5300; background: #fff7e6; padding: 4px 8px; border-radius: 8px; }
@media (min-width: 701px) {
.page-transfert-nouveau .ligne-transfert { grid-template-columns: 84px minmax(0, 1fr) auto; }
.ajout-transfert, .compte-panier { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 600px) {
.fleche-depots { display: none; }
.depots-transfert .champ { flex-basis: 100%; }
}
.scan-carte-nouveau .scan-pas > span { white-space: nowrap; }
/* BL ET FACTURE depuis la fiche commande (07/10/2026) */
.livraison-nexus { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bord, #e3e7ef); }
.livraison-nexus h3 { margin: 0 0 8px; font-size: .95rem; }
.docs-livraison { list-style: none; margin: 0 0 8px; padding: 0; }
.docs-livraison li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 6px 0; border-bottom: 1px dashed var(--bord, #e3e7ef); }
.docs-livraison li.facture { padding-left: 16px; }
.docs-livraison li > span:last-child { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.form-livraison { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.form-livraison .champ { margin: 0; flex: 1 1 200px; }
@media (max-width: 600px) { .form-livraison .btn { width: 100%; } }
/* Sous-totaux de la validation d'une commande (07/10/2026) : commande par le client / a valider (BC) */
.totaux-bc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 4px; }
.total-bc { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--bord, #dfe4ee);
border-radius: 10px; background: #f7f9fc; }
.total-bc-valider { border-color: #1597d4; background: #eefaf8; }
.total-bc-titre { font-weight: 600; font-size: .92rem; }
.total-bc-montant { font-size: 1.15rem; white-space: nowrap; }
.total-bc-ecart { grid-column: 1 / -1; margin: 0; color: #a15c00; font-size: .92rem; }
.total-bc-ecart[hidden] { display: none; }
@media (max-width: 600px) { .totaux-bc { grid-template-columns: minmax(0, 1fr); } }
/* Recapitulatif colle a droite plus haut que l'ecran (08/10/2026, capture du proprietaire : « je dois descendre jusqu'au
dernier article pour voir Vider la commande ») : sur ordinateur, la colonne ne depasse plus la hauteur de l'ecran et
defile seule (molette au-dessus d'elle) ; le bas (remarque, Enregistrer, Vider) est toujours atteignable. */
@media (min-width: 1024px) {
.colonne-smam { max-height: calc(100vh - 87px - 14px); overflow-y: auto; padding: 0 4px 6px 2px; margin-right: -4px; }
}
@media (min-width: 1281px) {
.resume-commande { max-height: calc(100vh - 87px - 14px); overflow-y: auto; }
}
/* FICHE ARTICLE de la gestion (08/10/2026) : Produits › un article — tout sur l'article sur une page */
.fa-entete { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.fa-photo { width: 220px; aspect-ratio: 1; background: #fff; border: 1px solid var(--bord); border-radius: 10px;
position: relative; overflow: hidden; }
.fa-photo img { position: absolute; inset: 0; margin: auto; max-width: 92%; max-height: 92%; }
.fa-sans-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--doux); }
.fa-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fa-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin: 0; }
.fa-dl div { min-width: 0; }
.fa-dl dt { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.fa-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fa-tuiles { margin-top: 14px; }
.fa-tuiles .fa-route { border-color: #f0c27a; background: #fffaf2; }
.fa-tuiles .fa-dispo { border-color: #9fd8b0; background: #f5fbf7; }
a.tuile-stock { text-decoration: none; color: inherit; }
.fa-grille h2 { font-size: 1.05rem; margin: 0 0 10px; }
.fa-h3 { font-size: .9rem; margin: 14px 0 6px; }
.fa-depots td, .fa-depots th { padding: 7px 8px; }
.fa-depots tfoot td { border-top: 2px solid var(--bord); font-weight: 700; }
.fa-depots .negatif, .fa-histo .negatif { color: var(--rouge); }
.fa-liste td { padding: 8px 6px; vertical-align: top; }
.fa-puces { margin: 0; padding-left: 18px; }
.fa-puces li { margin: 4px 0; }
.fa-periodes { margin: 0 0 12px; }
.fa-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fa-chiffres div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--bord);
border-radius: 8px; background: #fbfcfe; }
.fa-chiffres span { font-size: .78rem; color: var(--doux); }
.fa-chiffres strong { font-size: 1.15rem; color: var(--marine); font-variant-numeric: tabular-nums; }
.fa-chiffres .fa-net { border-color: #9fd8b0; background: #f5fbf7; }
.fa-mois { list-style: none; margin: 0; padding: 0; }
.fa-mois li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 8px; align-items: center; padding: 2px 0; }
.fa-mois-nom { font-size: .82rem; color: var(--doux); }
.fa-barre { height: 10px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.fa-barre span { display: block; height: 100%; background: var(--sg-vert, #1597d4); border-radius: 5px; }
.fa-mois-qte { text-align: right; font-weight: 600; }
.fa-titre-histo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fa-titre-histo h2 { font-size: 1.05rem; margin: 0; }
.fa-histo td { vertical-align: top; }
.fa-histo tr.fa-info td { color: var(--doux); background: #fafbfc; }
.fa-plus { color: #155f2c; }
.fa-moins { color: var(--rouge); }
@media (max-width: 700px) {
.fa-entete { grid-template-columns: 1fr; }
.fa-photo { width: 160px; margin: 0 auto; }
.fa-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.fa-dl .fa-large { grid-column: 1 / -1; }
.fa-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lien-fiche { color: inherit; text-decoration: none; }
.lien-fiche:hover strong, .lien-fiche:focus strong { text-decoration: underline; color: var(--accent, #003da6); }
.fa-histo .sur-mobile { display: none; }
@media (max-width: 700px) {
/* historique : une ligne par document, sur 3 lignes compactes (date / document / lieu et tiers) */
.fa-histo thead { display: none; }
.fa-histo, .fa-histo tbody { display: block; }
.fa-histo tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
grid-template-areas: "date mvt" "doc mvt" "lieu stock" "tiers stock"; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.fa-histo td { display: block; padding: 0; border: 0; text-align: left; }
.fa-histo .h-date { grid-area: date; font-size: .8rem; color: var(--doux); }
.fa-histo .h-doc { grid-area: doc; }
.fa-histo .h-lieu { grid-area: lieu; font-size: .82rem; color: var(--doux); }
.fa-histo .h-tiers { grid-area: tiers; font-size: .82rem; color: var(--doux); }
.fa-histo .h-mvt { grid-area: mvt; text-align: right; align-self: center; }
.fa-histo .h-stock { grid-area: stock; text-align: right; align-self: end; font-size: .82rem; }
.fa-histo .sur-mobile { display: inline; }
.fa-mois li { padding: 1px 0; }
}
/* LISTE DES COMMANDES (09/10/2026, « pas du tout pro… meme pas affichees par date ») : tuiles, etats / periodes / tri,
mois avec sous-totaux ; en cartes sur telephone */
.tuiles-commandes { margin-bottom: 14px; }
/* validees dans NeXus, pas encore livrees (10/10/2026) : bord vert d'eau, comme les echeances */
.tuile-bi.tuile-a-livrer { border-top-color: var(--sg-vert, #1597d4); }
@media (min-width: 1001px) { .tuiles-bi.tuiles-commandes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile-bi.tuile-active { box-shadow: inset 0 0 0 2px var(--marine, #0b2a5c); }
.barre-commandes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.barre-commandes .filtres-commandes { flex-wrap: wrap; gap: 6px; align-items: center; }
.barre-commandes .compteur { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 6px; border-radius: 999px;
background: rgba(0, 0, 0, .08); font-size: .78rem; text-align: center; }
a.puce { text-decoration: none; color: inherit; font-size: .85rem; }
a.puce.puce-active { background: var(--marine); border-color: var(--marine); color: #fff; }
.tableau-commandes tr.mois-commandes th { background: #f3f5fa; text-align: left; font-size: .9rem; padding: 8px 10px;
border-top: 2px solid var(--bord); }
.tableau-commandes tr.a-valider td { background: #fffaf0; }
.tableau-commandes td.c-date { white-space: nowrap; font-size: .88rem; }
@media (max-width: 960px) {
.tableau-commandes thead { display: none; }
.tableau-commandes, .tableau-commandes tbody { display: block; }
.tableau-commandes tr.mois-commandes { display: block; }
.tableau-commandes tr.mois-commandes th { display: block; white-space: normal; }
.tableau-commandes tr.ligne-commande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px;
padding: 12px; border-bottom: 1px solid var(--bord); }
.tableau-commandes tr.ligne-commande td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
.tableau-commandes td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.tableau-commandes .c-client, .tableau-commandes .c-etat { grid-column: 1 / -1; }
.tableau-commandes .c-montant { text-align: right; }
}
.tableau-commandes td.c-etat { min-width: 150px; }
.tableau-commandes td.c-client { min-width: 170px; }
.barre-commandes .btn:not(.btn-secondaire) .compteur { background: rgba(255, 255, 255, .28); color: #fff; }
/* FICHE CLIENT (09/10/2026 : « quand j'appuie sur un client, NeXus ou portail, je vois tout ; la configuration dans un
bouton ») : en-tete, chiffres cles, onglets sans rechargement, listes compactes */
.fil-ariane { margin: 0 0 6px; color: var(--doux); }
.fil-ariane a { color: inherit; }
.tete-client h1 { margin-bottom: 6px; }
.etats-client { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.coordonnees-client a { color: inherit; }
.actions-client { flex-wrap: wrap; justify-content: flex-end; }
.actions-client form { margin: 0; }
.tuiles-client { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 16px; }
.tuiles-client .tuile-bi { color: inherit; }
.tuiles-client .tuile-bi strong small { font-size: .62em; font-weight: 600; color: var(--doux); }
.tuile-bi.tuile-alerte { border-top-color: var(--rouge, #c62828); }
.onglets-client { position: sticky; top: var(--haut-entete, 0px); z-index: 15; padding: 8px 0; margin: 0 0 12px;
background: var(--fond, #f5f7fb); scroll-margin-top: var(--haut-entete, 0px); }
.onglets-client .onglet { text-decoration: none; }
.onglets-client .onglet .compte { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
background: rgba(0, 0, 0, .07); font-size: .78rem; opacity: 1; }
.onglets-client .onglet.actif .compte { background: rgba(255, 255, 255, .25); }
.grille-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grille-fiche > .carte { margin-bottom: 16px; min-width: 0; }
.en-tete-carte { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 10px; }
.en-tete-carte h2 { margin: 0; }
.liste-top { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.liste-top li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bord);
counter-increment: top; }
.liste-top li:last-child { border-bottom: 0; }
.liste-top li::before { content: counter(top); min-width: 1.4em; color: var(--doux); font-size: .85rem; }
.liste-top .top-art { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-top .top-art strong { font-weight: 600; font-size: .92rem; }
.liste-top .top-chiffres { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.liste-fiche { list-style: none; margin: 0; padding: 0; }
.liste-fiche li { display: grid; grid-template-columns: 4.6rem 7.4rem minmax(0, 1fr) 15.5rem; gap: 10px;
align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.liste-fiche li > .badge { justify-self: end; text-align: left; }
.liste-fiche li:last-child { border-bottom: 0; }
.resume-factures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.tableau-docs td { vertical-align: top; }
.tableau-top .barre-part { height: 4px; margin-top: 4px; border-radius: 2px; background: #eef1f5; }
.tableau-top .barre-part i { display: block; height: 100%; border-radius: 2px; background: var(--bleu, #003da6); }
.tableau-mois tr.mois-courant td { background: #f3f8fc; font-weight: 600; }
.tableau-mois tfoot th { border-top: 2px solid var(--bord); }
.carte-ristourne { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 1000px) {
.tuiles-client { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuiles-client .tuile-bi strong { font-size: 1.3rem; }
.grille-fiche { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 700px) {
.actions-client { justify-content: flex-start; }
.onglets-client { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px;
padding-left: 16px; padding-right: 16px; }
.onglets-client::-webkit-scrollbar { display: none; }
.onglets-client .onglet { white-space: nowrap; }
.liste-fiche li { grid-template-columns: auto minmax(0, 1fr) auto; }
.liste-fiche li > .badge { grid-column: 1 / -1; justify-self: start; }
}
.tableau-commandes a.lien-client { color: inherit; text-decoration: none; }
.tableau-commandes a.lien-client:hover { text-decoration: underline; }
/* MODULE ERP (10/10/2026 : « consulter tous les BL par date et mois, et toutes les factures ; creer des devis ») */
.barre-erp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.periode-erp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periode-erp .libelle-periode { font-size: 1.05rem; }
.choix-periode-erp { margin: 0; }
.choix-periode-erp input { width: auto; min-width: 0; padding: 6px 8px; }
.choix-periode-erp input[type=number] { width: 6.5em; }
.periode-erp span[aria-disabled] { opacity: .35; pointer-events: none; }
.onglets-erp { margin-bottom: 12px; }
.recherche-liste select { width: auto; max-width: 260px; }
.carte-brouillons-devis { border-left: 4px solid var(--ambre, #c77700); }
.liste-brouillons-devis, .liste-clients-devis, .articles-devis { list-style: none; margin: 0; padding: 0; }
.liste-brouillons-devis li { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.liste-brouillons-devis li:last-child { border-bottom: 0; }
.liste-clients-devis li, .articles-devis li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--bord); }
.liste-clients-devis li > div:first-child, .articles-devis li > div:first-child { min-width: 0; flex: 1 1 auto; }
.liste-clients-devis form { margin: 0; flex: none; }
.articles-devis li > .nombre { flex: none; white-space: nowrap; }
.articles-devis li > .btn { flex: none; }
.tableau-erp td.c-liens { font-size: .88rem; min-width: 140px; }
.tableau-erp td.c-liens a { white-space: nowrap; }
.liens-doc-erp { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.etiquette-petite { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--doux); margin-bottom: 2px; }
.tableau-lignes-erp td.c-article { min-width: 220px; }
.tableau-lignes-erp td { vertical-align: top; }
.totaux-doc-erp { margin: 12px 0 0 auto; max-width: 340px; }
.totaux-doc-erp > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.totaux-doc-erp > div.total { border-top: 2px solid var(--bord); margin-top: 4px; padding-top: 7px; font-weight: 700;
font-size: 1.05rem; }
.reglement-erp { padding: 8px 0; border-bottom: 1px solid var(--bord); }
.reglement-erp:last-of-type { border-bottom: 0; }
.reglement-erp ul { margin: 4px 0 0; padding-left: 18px; }
.entete-devis { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.entete-devis .champ { margin: 0; flex: 1 1 180px; min-width: 0; }
.entete-devis .champ-large { flex: 3 1 300px; }
.entete-devis #entete-etat { flex-basis: 100%; min-height: 1em; }
input.recherche-devis { width: 100%; max-width: 560px; }
input.champ-qte-devis { width: 5.5em; min-width: 0; text-align: right; }
input.champ-remise-devis { width: 5em; min-width: 0; text-align: right; }
input.champ-remise-devis.remise-main { border-color: var(--ambre, #c77700); background: #fffaf0; }
.tableau-devis tr.ligne-sortie td { background: #fdecec; }
@media (max-width: 760px) {
.tableau-lignes-erp thead { display: none; }
.tableau-lignes-erp, .tableau-lignes-erp tbody { display: block; }
.tableau-lignes-erp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0;
border-bottom: 1px solid var(--bord); }
.tableau-lignes-erp td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; }
.tableau-lignes-erp td.c-article { grid-column: 1 / -1; min-width: 0; }
.tableau-lignes-erp td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.tableau-lignes-erp td:last-child:not([data-label]) { grid-column: 1 / -1; }
.totaux-doc-erp { max-width: none; }
.barre-erp { flex-direction: column; align-items: stretch; }
.periode-erp { justify-content: space-between; }
.periode-erp .libelle-periode { flex-basis: 100%; order: -1; }
.articles-devis li { flex-wrap: wrap; }
.articles-devis li > div:first-child { flex-basis: 100%; }
.articles-devis li > .nombre { margin-right: auto; }
.liste-clients-devis li { flex-wrap: wrap; }
.tableau-erp td.c-liens { grid-column: 1 / -1; }
}
.tableau-devis tr.ligne-retiree td { opacity: .55; }
.tableau-devis tr.ligne-retiree td.c-article strong { text-decoration: line-through; }
.tableau-devis tr.ligne-ajoutee td { background: #f2f7ff; }
.carte-bl-actions { border-left: 4px solid var(--marine); }
@media (max-width: 960px) {
.tableau-erp tr.ligne-erp td.c-num { order: 1; }
.tableau-erp tr.ligne-erp td.c-montant { order: 2; text-align: right !important; }
.tableau-erp tr.ligne-erp td.c-client { order: 3; }
.tableau-erp tr.ligne-erp td.c-date { order: 4; }
.tableau-erp tr.ligne-erp td.c-etat { order: 5; grid-column: auto; min-width: 0; }
.tableau-erp tr.ligne-erp td.c-liens { order: 6; grid-column: 1 / -1; }
.tableau-erp tr.ligne-erp td.c-num::before, .tableau-erp tr.ligne-erp td.c-client::before,
.tableau-erp tr.ligne-erp td.c-montant::before { display: none; }
}
@media (max-width: 700px) {
.onglets-erp { gap: 5px; }
.onglets-erp .onglet { padding: 6px 10px; font-size: .86rem; }
.periode-erp { justify-content: flex-start; }
}
.articles-devis { max-height: 380px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--bord); border-radius: 10px; padding: 0 10px; }
.articles-devis li:last-child { border-bottom: 0; }
.entete-devis .champ:not(.champ-large) { max-width: 340px; }
/* GESTION de 1101 a 1279 px (10/10/2026 : entree « ERP » ajoutee au menu ; « Deconnexion » sortait deja de 36 px a 1101 px) :
meme resserrement que l espace client — libelle « Gestion » masque, menu resserre, « Deconnexion » en icone */
@media (min-width: 1101px) and (max-width: 1279px) {
.entete .logo .logo-espace { display: none; }
.entete .nav { gap: 2px; }
.entete .nav > a, .entete .nav-plus > summary { padding: 8px 8px; font-size: .9rem; }
.entete .sortie-large .texte-sortie { display: none; }
.entete .sortie-large .icone-sortie { display: block; }
}
/* MODULE ERP en sous-modules (10/10/2026, capture iPhone : « les factures, les devis et les BL sont des grands
sous-modules » ; mois affiche en anglais par le champ du navigateur) */
.erp-boites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.erp-boite { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; background: #fff; border-radius: 14px;
border: 1px solid var(--bord); border-top: 5px solid var(--marine); text-decoration: none; color: inherit; min-height: 150px; }
.erp-boite:hover { box-shadow: 0 3px 14px rgba(28, 44, 96, .14); }
.erp-boite .erp-boite-titre { font-size: 1.12rem; font-weight: 700; color: var(--marine); }
.erp-boite strong { font-size: 2.1rem; line-height: 1.1; color: var(--marine); }
.erp-boite .erp-boite-pied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.erp-boite-bl { border-top-color: #003da6; }
.erp-boite-factures { border-top-color: #1597d4; }
.erp-boite-devis { border-top-color: #c77700; }
.erp-boite-avoirs { border-top-color: #8a94ad; }
.erp-raccourcis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.erp-raccourci { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; background: #fff; border-radius: 12px;
border: 1px dashed var(--marine); text-decoration: none; color: inherit; }
.erp-raccourci strong { color: var(--marine); font-size: 1.02rem; }
.erp-raccourci:hover { background: #f6f8fc; }
@media (max-width: 1000px) { .erp-boites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.erp-boites { gap: 10px; }
.erp-boite { min-height: 0; padding: 14px; }
.erp-boite strong { font-size: 1.7rem; }
.erp-raccourcis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.titre-erp { align-items: center; }
.titre-erp h1 { margin: 0; }
.actions-erp { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.barre-erp { flex-direction: row; align-items: center; justify-content: space-between; }
.segments { display: inline-flex; border: 1px solid var(--bord); border-radius: 999px; background: #fff; padding: 3px; gap: 2px; }
.segments a { padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--marine); font-weight: 600; font-size: .9rem; }
.segments a.actif { background: var(--marine); color: #fff; }
.periode-erp { flex-wrap: nowrap; }
.periode-erp .fleche { min-width: 38px; font-size: 1.1rem; }
.periode-choix { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 170px;
padding: 7px 14px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 700;
color: var(--marine); }
.periode-choix::after { content: "▾"; margin-left: 8px; font-size: .8rem; opacity: .7; }
.periode-choix input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
margin: 0; min-width: 0; }
select.choix-annee { width: auto; min-width: 150px; font-weight: 700; color: var(--marine); }
.tuile-bi.tuile-alerte { border-top-color: #c77700; }
.etats-erp { margin: 0 0 12px; gap: 6px; flex-wrap: wrap; }
.etats-erp .compteur { display: inline-block; min-width: 1.5em; margin-left: 3px; padding: 0 6px; border-radius: 999px;
background: rgba(0, 0, 0, .08); font-size: .76rem; text-align: center; }
.etats-erp .puce-active .compteur { background: rgba(255, 255, 255, .28); }
.tableau-erp td.c-num { white-space: nowrap; }
.tableau-erp input.case-facturer { width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--marine); }
.tableau-erp tr.coche { background: #eef6ff; }
.tableau-erp tr.coche td { background: transparent; }
.barre-selection { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; width: min(760px, calc(100% - 24px));
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 14px;
background: var(--marine); color: #fff; box-shadow: 0 8px 28px rgba(28, 44, 96, .35); }
.barre-selection[hidden] { display: none; }
.barre-selection-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-selection-texte small { opacity: .85; }
.barre-selection-boutons { display: flex; gap: 8px; flex: none; }
.barre-selection .btn-secondaire { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.barre-selection .btn:not(.btn-secondaire) { background: var(--sg-vert, #1597d4); }
body.selection-ouverte .contenu, body.selection-ouverte main { padding-bottom: 90px; }
@media (max-width: 700px) {
.titre-erp { flex-direction: row; flex-wrap: wrap; }
.barre-erp { flex-direction: column; align-items: stretch; gap: 8px; }
.segments { align-self: flex-start; }
.periode-erp { justify-content: space-between; }
.periode-choix { flex: 1 1 auto; min-width: 0; }
.barre-selection { bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.barre-selection-texte { white-space: normal; flex-basis: 100%; }
.barre-selection-boutons { width: 100%; }
.barre-selection-boutons .btn { flex: 1 1 0; }
}
.etats-erp .puce-active .compteur { color: #fff; }
/* CATALOGUE DE L'EQUIPE (10/10/2026) : fiches comme « Commander », prix TTC en grand, HT et TVA dessous, petit champ
« Remise % » par fiche ; remise pour tous au-dessus de la liste. */
.filtres-catalogue { margin-bottom: 12px; }
.filtres-catalogue .recherche input { width: 100%; }
.filtres-catalogue-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.filtres-catalogue-ligne select { width: auto; max-width: 300px; flex: 0 1 auto; }
.filtres-catalogue-ligne .case-dispo { margin: 0; }
.remise-globale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px;
padding-top: 12px; padding-bottom: 12px; }
.remise-globale label { display: flex; flex-direction: column; gap: 1px; margin: 0; }
.remise-globale-champ { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.remise-globale-champ input { width: 82px; text-align: right; font-weight: 700; }
.remise-globale [data-remises-effacer] { margin-left: auto; }
input.invalide { border-color: var(--rouge, #c62828) !important; background: #fff5f5; }
.produit-equipe { color: inherit; }
.produit-equipe a.designation { text-decoration: none; }
.produit-equipe a.designation:hover { text-decoration: underline; }
.produit-equipe .produit-statut { margin-top: 2px; }
.produit-equipe .produit-statut .petit { font-size: .74rem; }
.badge-masque-catalogue { position: absolute; top: 8px; left: 8px; background: #fdecea; color: #a12a1f;
font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.prix-equipe { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--bord); }
.pe-ancien { font-size: .78rem; color: var(--doux); text-decoration: line-through; }
.pe-ttc strong { font-size: 1.3rem; font-weight: 800; color: var(--encre); }
.pe-ttc small { font-size: .75rem; font-weight: 600; color: var(--doux); }
.remise-active .pe-ttc strong { color: var(--vert-fonce); }
.pe-ht { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8rem; color: var(--doux); }
.pe-tva { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef2f8; color: var(--marine);
font-weight: 700; font-size: .74rem; white-space: nowrap; }
.pe-remise { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .8rem; color: var(--doux);
font-weight: 600; }
.pe-remise input { width: 64px; height: 32px; padding: 4px 6px; text-align: right; font-weight: 700; }
.remise-propre .pe-remise input { border-color: var(--vert-fonce); background: #f1faf4; }
.pe-gain { margin-left: auto; font-weight: 800; color: var(--vert-fonce); white-space: nowrap; }
@media (max-width: 700px) {
.filtres-catalogue-ligne select { max-width: none; flex: 1 1 100%; min-width: 0; }
.filtres-catalogue-ligne select[name="tri"] { flex: 1 1 52%; }
.filtres-catalogue-ligne .case-dispo { flex: 1 1 40%; }
.remise-globale [data-remises-effacer] { margin-left: 0; }
.pe-ttc strong { font-size: 1.05rem; }
.pe-ancien, .pe-ht { font-size: .72rem; }
.pe-tva { font-size: .7rem; padding: 1px 6px; }
.pe-remise { font-size: .72rem; gap: 4px; margin-top: 6px; }
.pe-remise input { width: 52px; height: 32px; }
.badge-masque-catalogue { top: 5px; left: 5px; right: 5px; text-align: center; font-size: .66rem; }
}
.scan-catalogue-fiche { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin: 0 auto 12px; }
.scan-catalogue-fiche .produit-equipe:hover { transform: none; box-shadow: none; }
.scan-catalogue-fiche .produit-image { aspect-ratio: 16 / 9; }
/* Catalogue de l'equipe : sous-famille de NeXus a cote de la marque (10/10/2026) */
.produit-equipe .marque .sous-famille-catalogue { font-weight: 400; color: var(--doux, #5b6480); text-transform: none; letter-spacing: 0; }
/* Catalogue PDF : pages de garde et de fin enregistrees (10/10/2026) */
.case-page-perso { align-items: center; }
.case-page-perso img { width: 46px; height: 65px; object-fit: cover; border: 1px solid var(--bord, #dde2ec); border-radius: 4px; flex: none; }
.pages-perso { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.page-perso { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--bord, #dde2ec); border-radius: 10px; }
.page-perso img { width: 64px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bord, #dde2ec); display: block; }
.page-perso > div { flex: 1; min-width: 0; }
.page-perso form { margin-left: auto; }
.ajout-page-perso { display: grid; grid-template-columns: 180px 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 760px) { .ajout-page-perso { grid-template-columns: 1fr; } }
/* ======================================================================
TELEPHONE — DESIGN « SMAM Pro » (11/10/2026 ; maquettes haute fidelite de Fable retenues par le proprietaire :
« j'aime le design de Fable mais il faut qu'il ameliore toutes les pages, surtout la page d'accueil »).
Direction « Clair et compact » + barre d'etapes : fond #F3F5F9, cartes blanches rayon 14 a ombre douce, en-tete blanc
56 px (logo couleur, cloche, avatar-initiale = menu), menu en feuille (bloc utilisateur, grille d'icones, lignes),
barre d'onglets en bas (« Commander » rond au centre), tuiles de chiffres en grille 2 colonnes qui ne debordent JAMAIS
(nombre reduit selon sa longueur : portal.js pose .longue / .tres-longue), commandes en cartes avec la barre de 5
etapes, fiches avec la liste verticale des etapes, listes en lignes de 56 px.
TOUT est sous 700 px : ordinateur et tablette inchanges. Les regles hors media ne font que cacher les elements
propres au telephone.
====================================================================== */
.logo .logo-image.logo-couleur, .menu-initiale, .nav-tete, .nav-utilisateur, .nav-ic, .barre-onglets, td.c-etapes,
td.lc-etapes, td.c-meta, .progres-fiche, .progres-mobile, .lire-suite, .tuiles-accueil-client, .carte-promos-mobile,
.carte-reglement-mobile, .pastille-icone, .etapes-fiche, .chips-conditions, .lien-bl, .recherche-tel { display: none; }
.nav-principales { display: contents; }
.bienvenue .fort-blanc { color: #fff; }
.bienvenue .lien-blanc { color: #fff; text-decoration: underline; }
:root { --h-onglets: 0px; }
/* barre d'etapes (N segments a la couleur de l'etape atteinte) — couleurs de Fable, textes fonces lisibles (AA) */
.progres { --c-etape: #B4BBC9; --c-texte: #66718A; }
.progres-1 { --c-etape: #E8833A; --c-texte: #9A4A10; } .progres-2 { --c-etape: #003da6; --c-texte: #003185; }
.progres-3 { --c-etape: #1597d4; --c-texte: #1179aa; } .progres-4 { --c-etape: #D6A200; --c-texte: #7A5A00; }
.progres-5 { --c-etape: #24B24B; --c-texte: #157A36; }
.progres-barre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.progres-barre i { height: 6px; border-radius: 3px; background: #E4E9F2; }
.progres-barre i.fait { background: var(--c-etape); }
.progres-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px;
font-size: 13px; line-height: 1.3; }
.progres-texte { font-weight: 700; color: var(--c-texte); min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.progres-precision { color: #66718A; white-space: nowrap; flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
/* ---------- jetons de Fable (telephone seulement) ---------- */
:root {
--marine: #0b2a5c; --encre: #071937; --texte: #22293A; --doux: #66718A; --bord: #E3E8F0; --fond: #F3F5F9;
--accent: #003da6; --accent-fonce: #003185; --rayon: 14px;
--ombre: 0 1px 2px rgba(22, 34, 60, .05), 0 4px 14px rgba(22, 34, 60, .05);
--muet: #8A93A6; --bord-fort: #CBD3E1; --surface-2: #EEF1F6; --surface-3: #E4E9F2;
--ok: #24B24B; --ok-texte: #157A36; --ok-pale: #E6F6EA;
--info: #003da6; --info-texte: #003185; --info-pale: #E5F2F9;
--eau: #1597d4; --eau-texte: #1179aa; --eau-pale: #E3F6F4;
--attention: #D6A200; --attention-texte: #7A5A00; --attention-pale: #FBF3D6;
--alerte: #E8833A; --alerte-texte: #9A4A10; --alerte-pale: #FDEBDD;
--danger: #C62828; --danger-texte: #A61E1E; --danger-pale: #FBE7E7;
--gris-texte: #5B6578; --gris-pale: #ECEFF4;
}
body[data-connecte] { --h-onglets: calc(64px + env(safe-area-inset-bottom, 0px)); }
body { background: var(--fond); color: var(--texte);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 700; }
.nombre, .montant-fiche, .tuile-bi strong, .tuile .chiffre { font-variant-numeric: tabular-nums; }
/* ---------- en-tete blanc, 56 px ---------- */
.entete { position: sticky; top: 0; background: #fff; color: var(--encre); border-bottom: 1px solid var(--bord);
border-image: none; box-shadow: none; }
.mode-apercu .entete { box-shadow: inset 0 4px 0 #7b2cbf; }
.entete-int { flex-wrap: nowrap; height: 56px; min-height: 56px; padding: 0 16px; gap: 8px; }
.logo { gap: 8px; }
.logo .logo-image { display: none; }
.logo .logo-image.logo-couleur { display: block; height: 28px; width: auto; }
.logo .logo-espace { display: inline; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
opacity: 1; color: var(--doux); border-left: 1px solid var(--bord); padding-left: 8px; line-height: 1.1; }
.utilisateur { margin-left: auto; gap: 8px; }
.cloche { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--marine); }
.cloche:hover, .cloche.actif { background: var(--surface-3); }
.cloche-nb { top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
display: grid; place-items: center; border: 2px solid #fff; }
.qui-connecte, .sortie-large { display: none; }
.pastille-brouillon { height: 36px; padding: 0 12px 0 10px; gap: 6px; background: var(--surface-2);
color: var(--marine); font-size: 13px; font-weight: 700; }
.pastille-brouillon .pastille-icone { display: block; }
.pastille-brouillon .pastille-texte { display: none; }
.pastille-brouillon b { background: var(--marine); color: #fff; min-width: 20px; height: 20px; font-size: 12px;
display: grid; place-items: center; padding: 0 6px; border-radius: 999px; }
.menu-bouton { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; border: 0;
background: var(--marine); color: #fff; font-weight: 700; font-size: 15px; }
.menu-bouton .menu-icone, .menu-bouton .menu-texte { display: none; }
.menu-initiale { display: inline; }
/* ---------- menu en feuille (plein ecran, la barre d'onglets reste visible) ---------- */
.entete.menu-ouvert .nav { position: fixed; top: 0; left: 0; right: 0; bottom: var(--h-onglets); z-index: 70;
display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; background: var(--fond); overflow-y: auto; }
body:has(.entete.menu-ouvert) { overflow: hidden; }
.nav-tete { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between;
margin: 0 -16px; padding: 14px 16px 10px; background: var(--fond); }
.nav-tete strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.nav-fermer { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--marine);
font-size: 1.05rem; cursor: pointer; }
.nav-utilisateur { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 14px;
box-shadow: var(--ombre); }
.nav-utilisateur .nav-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--marine); color: #fff;
font-weight: 700; font-size: 16px; display: grid; place-items: center; flex: none; }
.nav-utilisateur .nom { font-weight: 700; color: var(--encre); }
.nav-utilisateur .role { font-size: 12px; color: var(--doux); }
.nav-principales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 6px 12px;
background: #fff; border-radius: 14px; box-shadow: var(--ombre); }
.nav-principales a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 12px;
background: none; box-shadow: none; color: var(--encre); font-size: 12px; font-weight: 600;
text-align: center; line-height: 1.2; white-space: normal; text-decoration: none; }
.nav-principales a:hover { background: none; color: var(--encre); }
.nav-principales a.actif { background: none; color: var(--encre); box-shadow: none; }
.nav-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--surface-2);
color: var(--marine); flex: none; }
.nav-ic svg { width: 22px; height: 22px; }
.nav-principales a.actif .nav-ic { background: var(--marine); color: #fff; }
.nav-plus { background: #fff; border-radius: 14px; box-shadow: var(--ombre); padding: 4px 6px; }
.nav-plus > summary { display: block; padding: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--doux); background: none; box-shadow: none; pointer-events: none; }
.nav-plus > summary::after { display: none; }
.nav-plus[open] > summary, .nav-plus > summary.actif { color: var(--doux); background: none; box-shadow: none; }
.nav-plus-liste { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0 0 4px; border: 0; }
.nav-plus-liste a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; column-gap: 12px; min-height: 48px;
padding: 4px 10px; border-radius: 12px; background: none; box-shadow: none; color: var(--encre);
font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-plus-liste a .nav-ic { width: 36px; height: 36px; border-radius: 10px; }
.nav-plus-liste a .nav-ic svg { width: 18px; height: 18px; }
.nav-plus-liste a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muet); border-bottom: 2px solid var(--muet);
transform: rotate(-45deg); margin-right: 6px; }
.nav-plus-liste a:hover, .nav-plus-liste a.actif { background: var(--surface-2); color: var(--encre); box-shadow: none; }
.nav-sortie { margin: 0; padding: 4px 6px; background: #fff; border-radius: 14px; box-shadow: var(--ombre); border: 0; }
.nav-sortie button { display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px; width: 100%;
min-height: 48px; padding: 4px 10px; border: 0; border-radius: 12px; background: none;
color: var(--danger-texte); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.nav-sortie button::before { content: ""; width: 36px; height: 36px; border-radius: 10px; background: var(--danger-pale)
url("data:image/svg+xml;utf8,")
center / 18px no-repeat; }
/* ---------- barre d'onglets du bas ---------- */
.barre-onglets { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; justify-content: space-around;
align-items: flex-start; height: var(--h-onglets); background: #fff; border-top: 1px solid var(--bord);
padding: 6px 6px env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 20px rgba(22, 34, 60, .08); }
.barre-onglets .ob { flex: 1; max-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0 0;
border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--muet);
text-decoration: none; cursor: pointer; }
.barre-onglets .ob:hover, .barre-onglets .ob.actif { color: var(--marine); }
.barre-onglets .ob.actif svg { stroke-width: 2.4; }
.barre-onglets .ob-central { color: var(--accent); }
.barre-onglets .ob-rond { width: 54px; height: 54px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center;
color: #fff; background: linear-gradient(140deg, var(--eau), var(--accent));
border: 4px solid #fff; box-shadow: 0 6px 16px rgba(18, 131, 176, .32); }
.barre-onglets .ob-rond svg { width: 26px; height: 26px; }
.page { padding: 16px 16px calc(24px + var(--h-onglets)); }
.pied { font-size: 12px; padding: 16px 16px calc(16px + var(--h-onglets)); }
/* barres deja en bas de l'ecran : juste au-dessus des onglets */
.barre-commande { bottom: var(--h-onglets); padding-bottom: 10px; }
.commande-smam .colonne-smam { bottom: var(--h-onglets); padding-bottom: 12px; max-height: calc(82vh - var(--h-onglets)); }
.resume-commande { bottom: var(--h-onglets); }
.barre-etape { bottom: calc(8px + var(--h-onglets)); }
.barre-modifs { bottom: calc(10px + var(--h-onglets)); }
.bandeau-maj, .toast-apercu, .barre-selection { bottom: calc(14px + var(--h-onglets)); }
/* une barre collee au-dessus des onglets (total de la commande, recapitulatif, etape, Enregistrer, selection) :
le rond « Commander » ne depasse plus vers le haut — la barre le coupait, ou il cachait le montant (11/10/2026) */
body:has(.barre-commande:not(.vide)) .barre-onglets .ob-rond,
body:has(.commande-smam .colonne-smam) .barre-onglets .ob-rond,
body:has(.resume-commande:not(.vide)):not(:has(.barre-commande)) .barre-onglets .ob-rond,
body:has(.barre-etape) .barre-onglets .ob-rond,
body:has(.barre-modifs.visible) .barre-onglets .ob-rond,
body:has(.barre-selection:not([hidden])) .barre-onglets .ob-rond {
width: 34px; height: 34px; margin-top: 0; border-width: 0; box-shadow: none; }
body:has(.barre-commande:not(.vide)) .barre-onglets .ob-rond svg,
body:has(.commande-smam .colonne-smam) .barre-onglets .ob-rond svg,
body:has(.resume-commande:not(.vide)):not(:has(.barre-commande)) .barre-onglets .ob-rond svg,
body:has(.barre-etape) .barre-onglets .ob-rond svg,
body:has(.barre-modifs.visible) .barre-onglets .ob-rond svg,
body:has(.barre-selection:not([hidden])) .barre-onglets .ob-rond svg { width: 20px; height: 20px; }
/* et le pied de page ne passe plus sous la barre du total */
body:has(.barre-commande:not(.vide)) .pied,
body:has(.commande-smam .colonne-smam) .pied { padding-bottom: calc(80px + var(--h-onglets)); }
/* ---------- titre de page, introduction, fil d'Ariane ---------- */
.titre-page { gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.titre-page h1 { margin-bottom: 4px; }
.titre-page .doux { font-size: 14px; }
.intro-repliee { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lire-suite { display: inline-block; margin: 0; padding: 0; border: 0; background: none; color: var(--accent);
font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fil-ariane { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.fil-ariane a { color: var(--accent); text-decoration: none; }
.titre-page .petit > a:only-child { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.titre-page > .en-ligne { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.titre-page > .en-ligne > form { display: contents; }
.titre-page > .en-ligne .btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 0 10px; white-space: normal; text-align: center;
font-size: 14px; line-height: 1.2; }
.titre-rubrique { margin-top: 2px; }
.titre-rubrique a.petit, .carte .titre-rubrique a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
/* ---------- recherche, pastilles ---------- */
input[type="search"] { height: 44px; padding: 0 12px 0 40px; background: var(--surface-2)
url("data:image/svg+xml;utf8,")
12px center / 18px no-repeat; border: 0; border-radius: 12px; font-size: 16px; color: var(--texte); }
input[type="search"]::placeholder { color: var(--muet); }
.recherche-liste { gap: 8px; margin-bottom: 10px; }
.recherche-liste input[type="search"] { flex: 1 1 100%; max-width: none; }
.onglets-bi, .onglets:not(.onglets-client), .filtres-commandes, .etats-erp, .puces-marques, .options-pastilles {
flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; gap: 8px;
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onglets-bi::-webkit-scrollbar, .onglets:not(.onglets-client)::-webkit-scrollbar, .filtres-commandes::-webkit-scrollbar,
.etats-erp::-webkit-scrollbar, .puces-marques::-webkit-scrollbar, .options-pastilles::-webkit-scrollbar { display: none; }
.barre-commandes .filtres-commandes { flex-wrap: nowrap; }
.onglets-bi > *, .onglets:not(.onglets-client) > *, .filtres-commandes > *, .puces-marques > * { flex: none; white-space: nowrap; }
.onglets-bi a, .onglet, .filtres-commandes .btn, .puce { display: inline-flex; align-items: center; gap: 6px; height: 36px;
padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bord-fort); box-shadow: none;
font-size: 14px; font-weight: 600; color: var(--encre); text-decoration: none; }
.onglets-bi a.actif, .onglet.actif, .filtres-commandes .btn:not(.btn-secondaire), .puce.puce-active, .puce:has(input:checked) {
background: var(--marine); border-color: var(--marine); color: #fff; }
.onglet .compte, .filtres-commandes .compteur, .puce-n { font-size: 12px; font-weight: 700; opacity: 1; margin-left: 0;
color: var(--doux); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.onglet.actif .compte, .filtres-commandes .btn:not(.btn-secondaire) .compteur, .puce:has(input:checked) .puce-n {
background: rgba(255, 255, 255, .22); color: #fff; }
.barre-commandes { gap: 6px; }
/* ---------- cartes, boutons, badges, champs, messages ---------- */
.carte { border: 0; border-radius: 14px; padding: 14px 16px; box-shadow: var(--ombre); }
.carte > h2:first-child, .carte > h3:first-child { font-size: 16px; margin-bottom: 10px; }
.btn { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.btn-secondaire { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.btn-secondaire:hover { background: var(--surface-2); color: var(--marine); }
.btn-danger { background: #fff; color: var(--danger-texte); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.btn-petit { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-large { min-height: 48px; font-size: 16px; }
.badge { height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; line-height: 1; }
.badge-vert, .badge-disponible { background: var(--ok-pale); color: var(--ok-texte); }
.badge-bleu { background: var(--info-pale); color: var(--info-texte); }
.badge-ambre, .badge-arrivage, .badge-limite, .badge-a-facturer { background: var(--attention-pale); color: var(--attention-texte); }
.badge-orange { background: var(--alerte-pale); color: var(--alerte-texte); }
.badge-rouge, .badge-rupture { background: var(--danger-pale); color: var(--danger-texte); }
.badge-gris { background: var(--gris-pale); color: var(--gris-texte); }
.badge-promo { background: var(--eau); color: #fff; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--surface-2);
color: var(--texte); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-ok { background: var(--ok-pale); color: var(--ok-texte); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=search]), select, textarea { border-radius: 12px; }
.message { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; border: 0;
background: var(--info-pale); color: var(--info-texte); box-shadow: inset 4px 0 0 var(--info); }
.message-ok { background: var(--ok-pale); color: var(--ok-texte); box-shadow: inset 4px 0 0 var(--ok); }
.message-erreur { background: var(--danger-pale); color: var(--danger-texte); box-shadow: inset 4px 0 0 var(--danger); }
.message-alerte { background: var(--attention-pale); color: var(--attention-texte); box-shadow: inset 4px 0 0 var(--attention); }
.message-info { background: var(--info-pale); color: var(--info-texte); box-shadow: inset 4px 0 0 var(--info); }
table.empile > tbody > tr { padding: 14px 0; }
/* ---------- tuiles de chiffres (BI, tableau de bord, commandes) : grille 2 colonnes, jamais coupees ---------- */
.tuiles-bi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tuile-bi { border: 0 !important; border-radius: 14px; padding: 12px 22px 12px 14px !important; min-height: 96px; gap: 4px;
min-width: 0; box-shadow: var(--ombre); }
a.tuile-bi::after { top: 8px; right: 9px; font-size: 1.2rem; opacity: .5; }
.tuile-bi .etiquette { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--doux); }
.tuile-bi strong { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--encre);
white-space: nowrap; }
.tuile-bi strong.longue { font-size: 18px; }
.tuile-bi strong.tres-longue { font-size: 16px; letter-spacing: -.01em; }
.tuile-bi .petit { font-size: 12px; line-height: 1.35; }
.tuile-bi .petit strong, .tuile-bi .comparaison-n1 strong { font-size: inherit; line-height: inherit; font-weight: 700; white-space: normal; }
.tuile-bi .texte-vert { color: var(--ok-texte); }
.tuile-bi.tuile-banque, .tuile-bi.tuile-bl, .tuile-bi.tuile-info, .tuile-bi.tuile-tresor, .tuile-bi.tuile-impayes {
grid-column: 1 / -1; flex-direction: column; }
.tuile-bi.tuile-banque, .tuile-bi.tuile-tresor { box-shadow: inset 4px 0 0 var(--eau), var(--ombre); }
.tuile-bi.tuile-bl, .tuile-bi.tuile-info { box-shadow: inset 4px 0 0 #b7791f, var(--ombre); }
.tuile-bi.tuile-impayes { box-shadow: inset 4px 0 0 var(--danger), var(--ombre); }
.tuile-bi.tuile-active { box-shadow: inset 0 0 0 2px var(--marine), var(--ombre); }
.bi-resume .titre-rubrique h2 { font-size: 16px; }
/* liste des commandes (gestion) : grille de 2 colonnes, SANS defilement horizontal (proprietaire, 11/10/2026),
« a livrer » en tete et en couleur */
.intro-longue { display: none; }
.tuiles-bi.tuiles-commandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
margin: 0 0 12px; padding: 0; overflow: visible; }
.tuiles-commandes .tuile-bi { min-width: 0; }
.tuiles-commandes .tuile-bi .petit:not(.doux) { display: none; }
.tuiles-commandes .tuile-a-livrer { order: -1; }
.tuiles-commandes .tuile-forte { background: linear-gradient(140deg, var(--eau), var(--accent)); color: #fff; }
.tuiles-commandes .tuile-forte .etiquette, .tuiles-commandes .tuile-forte strong, .tuiles-commandes .tuile-forte .petit,
.tuiles-commandes .tuile-forte .doux { color: #fff; }
.tuiles-commandes .tuile-forte .petit, .tuiles-commandes .tuile-forte .doux { opacity: .88; }
.tuiles-commandes .tuile-forte::after { color: #fff; }
/* tableau de bord : une seule tuile « Commandes a valider », les deux autres sur ordinateur seulement */
.accueil-gestion .titre-page > .btn { display: none; }
.accueil-gestion .tuiles-accueil { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.accueil-gestion .tuile.carte.tuile-secondaire { display: none; }
/* ordre de la maquette Fable : titre, alertes, tuile, chiffres, notifications, etat du portail, activite ;
les cartes Installer / Notifications (souvent cachees : application installee, notifications actives) en fin */
.accueil-gestion { display: flex; flex-direction: column; gap: 14px; }
.accueil-gestion > * { margin: 0 !important; }
.accueil-gestion > .titre-page { order: 0; }
.accueil-gestion > .message { order: 1; }
.accueil-gestion > .tuiles-accueil { order: 3; }
.accueil-gestion > .bi-attente, .accueil-gestion > .bi-resume { order: 2; } /* le BI toujours en premier */
.accueil-gestion > .carte-notifs-accueil { order: 4; }
.accueil-gestion > .grille-2 { order: 5; gap: 14px; }
.accueil-gestion > .ligne-activite-jour { order: 6; }
.accueil-gestion > .bloc-installer { order: 7; }
.accueil-gestion > .bloc-installer:not(:has(.carte-installer:not([hidden]))) { display: none; }
.accueil-gestion > [data-carte-notifs] { order: 8; }
.accueil-gestion > [data-carte-notifs]:not(:has(.carte-notifications:not([hidden]))) { display: none; }
.accueil-gestion .tuile.carte { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 12px 14px; }
.accueil-gestion .tuile .doux { font-size: 13px; font-weight: 600; }
.accueil-gestion .tuile .chiffre { font-size: 22px; }
.accueil-gestion .tuile-alerte-cmd { box-shadow: inset 4px 0 0 var(--alerte), var(--ombre); }
.accueil-gestion .tuile .petit.doux { font-size: 12px; font-weight: 500; }
.accueil-gestion .carte-installer, .accueil-gestion .carte-notifications { padding: 12px 14px; }
.accueil-gestion .installer-tete { gap: 10px; margin-bottom: 8px; }
.accueil-gestion .installer-icone { width: 40px; height: 40px; border-radius: 11px; }
.accueil-gestion .installer-tete h2, .accueil-gestion .notifs-tete h2 { font-size: 14px; margin-bottom: 2px; }
.accueil-gestion .installer-tete p, .accueil-gestion .carte-notifications > p { font-size: 12px; }
.ligne-activite-jour { background: #fff; border: 0; border-radius: 14px; box-shadow: var(--ombre); padding: 12px 14px;
font-size: 14px; margin-bottom: 14px; }
.ligne-activite-jour .doux { font-size: 13px; font-weight: 600; color: var(--accent); }
.tableau-etat, .tableau-etat tbody { display: block; }
.tableau-etat tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px;
padding: 4px 0; border-top: 1px solid var(--bord); }
.tableau-etat tr:first-child { border-top: 0; }
.tableau-etat td { display: block; padding: 2px 0; border: 0; font-size: 14px; }
.tableau-etat td:first-child { color: var(--doux); flex: none; }
.tableau-etat td:last-child { text-align: right; font-weight: 600; color: var(--encre); min-width: 0; }
.tableau-etat tr:hover td { background: none; }
.accueil-gestion .grille-2 { gap: 14px; }
/* ---------- notifications (tableau de bord, accueil, page) : lignes de 56 px avec icone ---------- */
.liste-notifs a { grid-template-columns: 36px minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center;
min-height: 56px; padding: 10px 0; }
.liste-notifs a::before { content: ""; grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2)
url("data:image/svg+xml;utf8,")
center / 18px no-repeat; }
.liste-notifs a::after { content: ""; grid-column: 4; grid-row: 1 / 3; width: 8px; height: 8px; border-right: 2px solid var(--muet);
border-bottom: 2px solid var(--muet); transform: rotate(-45deg); margin-right: 4px; }
.liste-notifs .notif-titre { grid-column: 2; font-size: 14px; font-weight: 600; color: var(--encre); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-notifs .notif-texte { grid-column: 2; font-size: 12px; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-notifs .notif-quand { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 12px; color: var(--muet); }
.liste-notifs.compacte a { padding: 10px 0; }
/* ---------- liste des clients (gestion) : une ligne par client ---------- */
.liste-clients thead { display: none; }
.liste-clients, .liste-clients tbody { display: block; }
.liste-clients tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
padding: 12px 0; border-top: 1px solid var(--bord); align-items: start; }
.liste-clients tr:first-child { border-top: 0; }
.liste-clients tr:hover td { background: none; }
.liste-clients td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
.liste-clients .lc-client { grid-column: 1; grid-row: 1 / 4; }
.liste-clients .lc-client a { font-size: 14px; color: var(--encre); text-decoration: none; }
.liste-clients .lc-client .codes { font-size: 12px; }
.liste-clients .lc-client .email-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-clients .lc-cond { grid-column: 2; grid-row: 1; text-align: right; }
.liste-clients .lc-cond .petit { display: none; }
.liste-clients .lc-cond strong { font-size: 14px; color: var(--encre); }
.liste-clients .lc-cmd, .liste-clients .lc-acces { grid-column: 2; text-align: right; font-size: 12px; color: var(--doux); }
.liste-clients .lc-cmd { grid-row: 2; }
.liste-clients .lc-cmd .valeur::after { content: " cmd"; }
.liste-clients .lc-acces { grid-row: 3; }
.liste-clients .lc-acces .valeur::before { content: "accès "; }
.liste-clients .lc-email { grid-column: 1; grid-row: 4; font-size: 12px; margin-top: 4px; }
.liste-clients .lc-connexion { grid-column: 1; grid-row: 5; font-size: 12px; color: var(--doux); }
.liste-clients .lc-etat { grid-column: 2; grid-row: 4 / 6; text-align: right; align-self: end; }
/* ---------- commandes (gestion) : une carte par commande ---------- */
.carte.carte-commandes { background: none; box-shadow: none; padding: 0; }
.carte-commandes .defile { overflow: visible; }
.carte-commandes .tableau-commandes tr.mois-commandes th { background: none; border: 0; padding: 14px 2px 8px;
font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre); }
.carte-commandes .tableau-commandes tr.mois-commandes th .doux { display: block; text-transform: none; letter-spacing: 0;
font-weight: 500; color: var(--doux); margin-top: 2px; }
.carte-commandes .tableau-commandes tr.ligne-commande {
grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num montant" "client client" "meta meta" "etapes etapes";
column-gap: 10px; row-gap: 2px; margin: 0 0 8px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff;
box-shadow: var(--ombre); }
.carte-commandes .tableau-commandes tr.a-valider td { background: none; }
.carte-commandes .tableau-commandes tr.a-valider { box-shadow: inset 4px 0 0 var(--alerte), var(--ombre); }
.carte-commandes .tableau-commandes td[data-label]::before { display: none; }
.carte-commandes .tableau-commandes td.c-date, .carte-commandes .tableau-commandes td.c-etat,
.carte-commandes .c-montant .petit, .carte-commandes .c-client .petit, .carte-commandes .c-client .badge { display: none; }
.carte-commandes .tableau-commandes td.c-num { grid-area: num; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.carte-commandes .c-num .numero { color: var(--accent); text-decoration: none; font-size: 14px; }
.carte-commandes .c-num .petit { display: inline; font-size: 12px; color: var(--muet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-commandes .tableau-commandes td.c-montant { grid-area: montant; text-align: right; font-size: 16px; }
.carte-commandes .tableau-commandes td.c-client { grid-area: client; font-size: 15px; color: var(--encre);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-commandes .c-client .codes { font-size: 12px; color: var(--muet); }
.carte-commandes .c-client .lien-client { color: var(--encre); text-decoration: none; }
.carte-commandes .tableau-commandes td.c-meta { grid-area: meta; display: block; font-size: 12px; color: var(--doux);
margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-commandes .tableau-commandes td.c-etapes { grid-area: etapes; display: block; }
/* ---------- « Mes commandes » (client) : meme carte, liens dessous ---------- */
.carte-commandes .liste-commandes tr { grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "num total" "date date" "etapes etapes" "action action"; column-gap: 10px; row-gap: 2px;
margin: 0 0 8px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--ombre); }
.carte-commandes .liste-commandes .lc-numero { grid-area: num; }
.carte-commandes .liste-commandes .lc-numero .numero { color: var(--accent); text-decoration: none; font-size: 14px; }
.carte-commandes .liste-commandes .lc-total { grid-area: total; font-size: 16px; font-weight: 750; color: var(--encre); }
.carte-commandes .liste-commandes .lc-date { grid-area: date; display: block; font-size: 12px; color: var(--doux); margin-bottom: 8px; }
.carte-commandes .liste-commandes .lc-date .petit { display: inline; }
.carte-commandes .liste-commandes .lc-date .petit::before { content: ' · '; }
.carte-commandes .liste-commandes .lc-etat { display: none; }
.carte-commandes .liste-commandes td.lc-etapes { grid-area: etapes; display: block; }
.carte-commandes .liste-commandes .lc-action { grid-area: action; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
margin-top: 8px; text-align: left; }
.carte-commandes .liste-commandes .lc-action form { margin: 0; }
.carte-commandes .liste-commandes .lc-action .btn { min-height: 36px; }
.carte-commandes .liste-commandes .lc-action .lien-bl { display: inline; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
/* ---------- fiche d'une commande : carte d'en-tete (montant, etat, barre, liste des etapes) ---------- */
h1 .h1-ref { display: block; line-height: 1.3; margin-top: 2px; font-size: 13px !important; color: var(--doux); }
.titre-page .doux > .badge { display: none; }
.progres-fiche { display: block; margin: 12px 0 2px; padding: 14px 16px; background: #fff; border-radius: 14px; box-shadow: var(--ombre); }
.fiche-tete-mobile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 10px;
margin-bottom: 10px; }
.fiche-tete-mobile .badge { white-space: normal; max-width: 100%; line-height: 1.3; text-align: left; }
.montant-fiche { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--encre); white-space: nowrap; }
.montant-fiche small { font-size: 12px; font-weight: 600; color: var(--doux); margin-left: 4px; letter-spacing: .02em; }
.etapes-fiche { display: flex; flex-direction: column; list-style: none; margin: 14px 0 0; padding: 0; }
.etapes-fiche li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
min-height: 44px; position: relative; }
.etapes-fiche li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -4px; width: 2px; background: var(--surface-3); }
.etapes-fiche li:last-child::before { display: none; }
.etapes-fiche .rond { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3);
color: var(--doux); font-size: 12px; font-weight: 700; }
.etapes-fiche .fait .rond { background: var(--ok); color: #fff; }
.etapes-fiche .cours .rond { background: #fff; color: var(--eau); box-shadow: inset 0 0 0 2px var(--eau); }
.etapes-fiche .libelle { font-size: 14px; font-weight: 600; color: var(--encre); line-height: 1.3; padding-top: 4px; }
.etapes-fiche .libelle small { display: block; font-size: 12px; font-weight: 500; color: var(--doux); margin-top: 1px; }
.etapes-fiche .a-venir .libelle { color: var(--doux); font-weight: 500; }
.etapes-fiche .cours .libelle { color: var(--eau-texte); }
.etapes-fiche .quand { font-size: 12px; color: var(--doux); white-space: nowrap; padding-top: 6px; font-variant-numeric: tabular-nums; }
ol.etapes { display: none; }
/* ---------- accueil du client (design Fable, ecran 12) ---------- */
.accueil-client { display: flex; flex-direction: column; gap: 14px; }
.accueil-client > * { margin: 0 !important; }
.accueil-client > .bandeau-hausse { order: 0; }
.accueil-client > .bienvenue { order: 1; }
.accueil-client > .carte:has(.liste-notifs) { order: 3; }
.accueil-client > .grille-2 { order: 4; gap: 14px; }
.accueil-client > div:has(> .carte-ristourne) { order: 5; }
.accueil-client > .carte-promos-mobile { order: 6; }
.accueil-client > .carte-reglement-mobile { order: 7; }
.accueil-client > div:has(> .carte-installer) { order: 8; }
.accueil-client > [data-carte-notifs] { order: 9; }
.accueil-client > .resume-promos { display: none; }
.accueil-client .bienvenue { background: none; color: inherit; padding: 0; box-shadow: none; border: 0; border-radius: 0; }
.accueil-client .bienvenue h1 { color: var(--encre); margin-bottom: 4px; }
.accueil-client .bienvenue .doux { color: var(--doux); font-size: 14px; }
.accueil-client .bienvenue .fort-blanc { color: var(--texte); font-weight: 600; }
.accueil-client .bienvenue .lien-blanc { color: var(--accent); text-decoration: none; font-weight: 600; }
.accueil-client .bienvenue .conditions-resume, .accueil-client .bienvenue .ligne-reste { display: none; }
.accueil-client .bienvenue .conditions-client { font-size: 13px; margin-top: 4px; }
.accueil-client .chips-conditions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.accueil-client .actions-rapides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.accueil-client .actions-rapides .btn { min-width: 0; padding: 0 10px; white-space: normal; text-align: center; font-size: 14px; line-height: 1.2; }
.accueil-client .actions-rapides .btn-secondaire { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.accueil-client .actions-rapides .sur-pc { display: none; }
.tuiles-accueil-client { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.tuile-accueil { display: flex; flex-direction: column; gap: 4px; min-height: 96px; min-width: 0; padding: 12px 14px; background: #fff;
border-radius: 14px; box-shadow: var(--ombre); color: inherit; text-decoration: none; }
.tuile-accueil:only-child { grid-column: 1 / -1; }
.tuile-accueil .icone-tuile { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--marine);
display: grid; place-items: center; margin-bottom: 2px; }
.tuile-accueil .etiquette { font-size: 13px; font-weight: 600; color: var(--doux); line-height: 1.25; }
.tuile-accueil .valeur { font-size: 22px; font-weight: 800; color: var(--encre); letter-spacing: -.015em; line-height: 1.15;
font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile-accueil .valeur small { font-size: 12px; font-weight: 600; color: var(--doux); margin-left: 3px; }
.tuile-accueil .note { font-size: 12px; color: var(--doux); line-height: 1.35; }
.tuile-accueil .note b { color: var(--texte); font-weight: 600; }
.tuile-accueil.bordee-attention { box-shadow: inset 4px 0 0 var(--attention), var(--ombre); }
.tuile-accueil.forte { background: linear-gradient(140deg, var(--eau), var(--accent)); color: #fff; }
.tuile-accueil.forte .etiquette, .tuile-accueil.forte .valeur, .tuile-accueil.forte .valeur small, .tuile-accueil.forte .note,
.tuile-accueil.forte .note b { color: #fff; }
.tuile-accueil.forte .note, .tuile-accueil.forte .valeur small { opacity: .88; }
.tuile-accueil.forte .icone-tuile { background: rgba(255, 255, 255, .2); color: #fff; }
.accueil-client .carte-brouillon-accueil { display: none; }
.accueil-client .grille-2 { grid-template-columns: minmax(0, 1fr); }
.accueil-client .carte-dernieres .lien-toutes { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.liste-commandes-accueil, .liste-commandes-accueil tbody { display: block; }
.liste-commandes-accueil tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num total" "etapes etapes";
column-gap: 10px; row-gap: 2px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 14px; margin-bottom: 8px; }
.liste-commandes-accueil tr:last-child { margin-bottom: 0; }
.liste-commandes-accueil tr:hover td { background: none; }
.liste-commandes-accueil td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
.liste-commandes-accueil td:first-child { grid-area: num; }
.liste-commandes-accueil td:first-child .numero { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 700; }
.liste-commandes-accueil td:first-child .codes { font-size: 12px; color: var(--doux); }
.liste-commandes-accueil td:first-child .badge { display: none; }
.liste-commandes-accueil td.lc-total { grid-area: total; text-align: right; font-size: 16px; color: var(--encre); }
.liste-commandes-accueil td.lc-etapes { grid-area: etapes; display: block; margin-top: 6px; }
.carte-promos-mobile, .carte-reglement-mobile { display: block; }
.carte-promos-mobile .ligne-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center;
min-height: 56px; padding: 10px 0; border-top: 1px solid var(--bord); color: inherit; text-decoration: none; }
.carte-promos-mobile .ligne-promo:first-of-type { border-top: 0; }
.carte-promos-mobile .ligne-promo::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muet);
border-bottom: 2px solid var(--muet); transform: rotate(-45deg); margin-right: 4px; }
.carte-promos-mobile .corps { min-width: 0; }
.carte-promos-mobile .titre { display: block; font-size: 14px; font-weight: 600; color: var(--encre); line-height: 1.3;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.carte-promos-mobile .sous { display: block; font-size: 12px; color: var(--doux); margin-top: 1px; }
.carte-reglement-mobile p { font-size: 14px; }
.carte-ristourne .jauge { height: 8px; border-radius: 4px; }
.carte-ristourne .jauge > div { background: linear-gradient(90deg, var(--eau), var(--accent)); }
/* ---------- barre d'etapes sur les listes (transferts, receptions) et documents de NeXus ---------- */
.progres-mobile { display: block; margin: 8px 0 6px; }
.carte-transfert .progression, .reception-carte .rc-avance { display: none; }
.carte-transfert, .reception-carte { border-radius: 14px; }
.carte-commandes .tableau-erp tr.ligne-commande { grid-template-areas: "num montant" "client client" "etapes etapes" "liens liens"; }
.carte-commandes .tableau-erp td.c-liens { grid-area: liens; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px;
margin-top: 8px; }
.carte-commandes .tableau-erp td.c-liens a { color: var(--accent); font-weight: 600; text-decoration: none; }
.carte-commandes .tableau-erp td.c-liens:has(> .doux:only-child) { display: none; }
.carte-commandes .tableau-erp .c-num .case-facturer { margin-right: 8px; transform: scale(1.15); }
.carte-commandes .tableau-erp td.c-client .petit { display: block; }
.onglets-client { margin-left: -16px; margin-right: -16px; }
/* ====== (11/10/2026, soir) DESIGN FABLE PAGE PAR PAGE — maquettes 04 a 15 appliquees aux vraies pages ====== */
:root { --ic-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M15.5 14.5a5 5 0 0 1 6 5'/%3E%3C/svg%3E"); --ic-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h10v9H3z'/%3E%3Cpath d='M13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); --ic-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); --ic-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); --ic-file-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 15h6'/%3E%3C/svg%3E"); --ic-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V12M11 20V6M17 20v-4M3 20h18'/%3E%3C/svg%3E"); --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --ic-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Crect x='4' y='8' width='16' height='8' rx='2'/%3E%3Cpath d='M7 14h10v6H7z'/%3E%3C/svg%3E"); --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E"); --ic-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2C60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M16 14h2'/%3E%3C/svg%3E"); }
/* --- Clients : liste compacte (maquette 05) --- */
.liste-clients thead { display: none; }
.liste-clients, .liste-clients tbody { display: block; }
.liste-clients tr:has(.lc-client) { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 12px;
grid-template-areas: "av client cond chev" "av meta cmd chev" "av meta etat chev"; column-gap: 10px; row-gap: 2px;
align-items: center; padding: 12px 0; margin: 0; border: 0; border-bottom: 1px solid var(--bord); background: none; box-shadow: none; }
.liste-clients tr:has(.lc-client):last-child { border-bottom: 0; }
.liste-clients tr:has(.lc-client)::before { content: ""; grid-area: av; align-self: start; width: 44px; height: 44px;
border-radius: 12px; background: var(--surface-2) var(--ic-users) center / 22px no-repeat; }
.liste-clients tr:has(.lc-client)::after { content: ""; grid-area: chev; width: 8px; height: 8px; border-right: 2px solid var(--muet);
border-bottom: 2px solid var(--muet); transform: rotate(-45deg); }
.liste-clients td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
.liste-clients .lc-client { grid-area: client; }
.liste-clients .lc-client a { font-size: 15px; font-weight: 700; color: var(--encre); text-decoration: none; }
/* toute la ligne (et sa fleche) ouvre la fiche du client : le lien du nom couvre la ligne (11/10/2026) */
.liste-clients tr:has(.lc-client) { position: relative; }
.liste-clients .lc-client a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.liste-clients tr:has(.lc-client):active { background: var(--surface-2); }
.liste-clients .lc-client .codes { font-size: 12px; color: var(--doux); margin-top: 1px; }
.liste-clients .lc-client .email-client { display: none; }
.liste-clients .lc-client .badge { font-size: 10px; height: 18px; line-height: 18px; padding: 0 7px; }
.liste-clients .lc-connexion { grid-area: meta; align-self: start; font-size: 12px; color: var(--doux); }
.liste-clients .lc-connexion br { display: none; }
.liste-clients .lc-connexion .badge { margin-left: 4px; font-size: 10px; height: 18px; line-height: 18px; padding: 0 7px; }
.liste-clients .lc-cond { grid-area: cond; text-align: right; }
.liste-clients .lc-cond strong { font-size: 15px; color: var(--encre); }
.liste-clients .lc-cond .petit { display: none; }
.liste-clients .lc-cmd { grid-area: cmd; text-align: right; font-size: 12px; color: var(--doux); white-space: nowrap; }
.liste-clients .lc-cmd .valeur::after { content: " cmd"; }
.liste-clients .lc-acces, .liste-clients .lc-email { display: none; }
.liste-clients .lc-etat { grid-area: etat; text-align: right; }
/* --- Fiche client (maquette 06) --- */
.actions-client { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-client > a.btn:not(.btn-secondaire) { flex: 1 1 100%; }
.actions-client > form { flex: 1 1 calc(50% - 4px); display: block; margin: 0; }
.actions-client > form .btn { width: 100%; }
.actions-client > a.btn-secondaire { flex: 1 1 calc(50% - 4px); font-size: 20px; }
.liste-fiche li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num mnt" "date etat" "prog prog";
column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 0; }
.liste-fiche li > :nth-child(1) { grid-area: num; font-size: 14px; }
.liste-fiche li > :nth-child(2) { grid-area: date; font-size: 12px; }
.liste-fiche li > :nth-child(3) { grid-area: mnt; font-size: 15px; text-align: right; }
.liste-fiche li > :nth-child(4) { grid-area: etat; justify-self: end; }
.liste-fiche li > .progres-mobile { grid-area: prog; display: block; margin: 4px 0 0; }
.liste-fiche li:has(> .progres-mobile) { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.liste-fiche li:has(> .progres-mobile) > .badge { display: none; }
/* --- Transferts (maquette 07) --- */
.recherche-tel { display: block; margin: 0 0 12px; }
.liste-bons-transfert > h2 { margin: 16px 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--doux); display: flex; justify-content: space-between; align-items: baseline; }
.liste-bons-transfert > h2 .petit { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.liste-bons-transfert > p.doux, .liste-bons-transfert > p.aide { border: 1.5px dashed var(--bord-fort); border-radius: 14px; padding: 16px 14px;
text-align: center; margin: 0 0 12px; font-size: 14px; background: none; }
.carte-transfert { padding: 12px 14px; }
.carte-transfert-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bord); justify-content: flex-start; }
.carte-transfert-actions .btn { min-height: 32px; height: auto; padding: 0; border: 0; background: none; box-shadow: none;
color: var(--marine); font-weight: 600; font-size: 14px; gap: 6px; }
.carte-transfert-actions .btn::before { content: ""; width: 18px; height: 18px; background: var(--ic-printer) center / 18px no-repeat; }
/* --- ERP : accueil (maquette 08) --- */
.erp-boites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.erp-boite { --c-boite: var(--accent); --ic-boite: var(--ic-file); padding: 12px 12px 12px 14px; min-height: 0; border: 0;
border-radius: 14px; box-shadow: inset 4px 0 0 var(--c-boite), var(--ombre); gap: 3px; }
.erp-boite::before { content: ""; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px;
background: var(--surface-2) var(--ic-boite) center / 20px no-repeat; }
.erp-boite-bl { --c-boite: var(--eau); --ic-boite: var(--ic-truck); }
.erp-boite-factures { --c-boite: var(--accent); --ic-boite: var(--ic-file-text); }
.erp-boite-devis { --c-boite: #c77700; --ic-boite: var(--ic-file); }
.erp-boite-avoirs { --c-boite: var(--muet); --ic-boite: var(--ic-file-minus); }
.erp-boite .erp-boite-titre { font-size: 13px; font-weight: 600; color: var(--doux); }
.erp-boite strong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--encre); line-height: 1.1; }
.erp-boite > .doux { font-size: 12px; line-height: 1.35; }
.erp-boite .erp-boite-pied { gap: 4px; padding-top: 4px; }
.erp-raccourcis { display: block; background: #fff; border-radius: 14px; box-shadow: var(--ombre); padding: 2px 14px; }
.erp-raccourci { display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; column-gap: 12px; row-gap: 1px; align-items: center;
padding: 12px 0; background: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--bord); box-shadow: none; }
.erp-raccourci:last-child { border-bottom: 0; }
.erp-raccourci::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px;
background: var(--surface-2) var(--ic-file-text) center / 20px no-repeat; }
.erp-raccourci[href*="devis/nouveau"]::before { background-image: var(--ic-plus); background-color: var(--ok-pale); }
.erp-raccourci::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 8px; height: 8px; border-right: 2px solid var(--muet);
border-bottom: 2px solid var(--muet); transform: rotate(-45deg); }
.erp-raccourci strong { grid-column: 2; font-size: 15px; color: var(--encre); }
.erp-raccourci .doux { grid-column: 2; font-size: 12px; }
/* --- BI et Depenses : tuiles avec icone, tuiles pleine largeur a lisere (maquettes 09, 10) --- */
.tuile-bi.tuile-saisie::before, .tuile-bi[href^="/admin/depenses/a-venir"]::before, .bi-resume .tuiles-bi > .tuile-bi:first-child::before {
content: ""; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 2px;
background: var(--surface-2) var(--ic-plus) center / 20px no-repeat; }
.tuile-bi[href^="/admin/depenses/a-venir"]::before { background-image: var(--ic-clock); }
.bi-resume .tuiles-bi > .tuile-bi:first-child { grid-column: 1 / -1; }
.bi-resume .tuiles-bi > .tuile-bi:first-child::before { background-image: var(--ic-chart); }
.tuile-bi[href^="/admin/depenses/fixes"] { grid-column: 1 / -1; box-shadow: inset 4px 0 0 var(--ok), var(--ombre); }
.tuile-bi.tuile-total { grid-column: 1 / -1; }
.tuile-bi.tuile-caisse { grid-column: 1 / -1; box-shadow: inset 4px 0 0 var(--danger), var(--ombre); }
details.filtre-depenses { border: 0; border-radius: 14px; box-shadow: var(--ombre); padding: 0 14px; }
details.filtre-depenses > summary { padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--encre); }
details.filtre-depenses > summary .doux { display: block; font-weight: 500; font-size: 12px; }
/* --- Factures et BL du client (maquette 15) --- */
.bandeau-reglement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
.bandeau-reglement .br-du { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lib btn" "mnt btn" "nb btn";
align-items: center; column-gap: 10px; row-gap: 0; }
.bandeau-reglement .br-du > .doux { grid-area: lib; }
.bandeau-reglement .br-montant { grid-area: mnt; font-size: 22px; line-height: 1.15; }
.bandeau-reglement .br-du > .petit:not(.doux) { grid-area: nb; font-size: 12px; }
.bandeau-reglement .br-du .btn { grid-area: btn; height: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; white-space: normal;
text-align: center; max-width: 140px; }
.bandeau-reglement .br-conditions { border-top: 1px solid var(--bord); padding-top: 8px; font-size: 12px; }
.bandeau-reglement .br-conditions ul { list-style: none; padding: 0; margin: 2px 0 0; font-size: 12px; color: var(--encre); }
.bandeau-reglement .br-conditions li { display: inline; }
.bandeau-reglement .br-conditions li + li::before { content: " · "; }
.carte:has(> .defile > .liste-documents) { background: none; box-shadow: none; padding: 0; }
.filtre-annee { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.filtre-annee label { font-size: 13px; color: var(--doux); }
.filtre-annee select { width: auto; min-width: 0; height: 36px; padding: 0 30px 0 12px; border-radius: 999px; font-size: 14px; background-color: #fff; }
.liste-documents, .liste-documents tbody, .liste-documents tfoot { display: block; }
.liste-documents thead { display: none; }
.liste-documents tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "num ttc" "date ttc" "facture facture" "regl regl" "action action"; gap: 2px 10px;
padding: 12px 14px; margin: 0 0 8px; background: #fff; border: 0; border-radius: 14px; box-shadow: var(--ombre); }
.liste-documents tbody tr.a-facturer { background: var(--alerte-pale); padding-left: 14px; padding-right: 14px; }
.liste-documents td { display: block; padding: 0; border: 0; text-align: left; background: none !important; box-shadow: none !important; }
.liste-documents td.m-cacher { display: none; }
.liste-documents .ld-numero { grid-area: num; }
.liste-documents .ld-numero strong { color: var(--accent); font-size: 14px; }
.liste-documents .ld-date { grid-area: date; font-size: 13px; color: var(--encre); white-space: normal; }
.liste-documents .ld-facture { grid-area: facture; font-size: 12px; margin-top: 2px; }
.liste-documents .ld-ttc { grid-area: ttc; text-align: right; font-size: 16px; font-weight: 750; white-space: nowrap; }
.liste-documents .ld-reglement { grid-area: regl; margin-top: 4px; }
.liste-documents .ld-action { grid-area: action; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--bord); text-align: left; }
.liste-documents .ld-action .btn { min-height: 28px; height: auto; padding: 0; border: 0; background: none; box-shadow: none;
color: var(--marine); font-weight: 600; font-size: 14px; gap: 6px; }
.liste-documents .ld-action .btn::before { content: ""; width: 16px; height: 16px; background: var(--ic-doc) center / 16px no-repeat; }
.liste-documents tfoot tr { display: flex; justify-content: space-between; gap: 10px; background: none; box-shadow: none; padding: 6px 14px; border: 0; }
.liste-documents tfoot td:empty { display: none; }
/* --- Commander : fiches produit, compteur, familles et options (maquettes 04, 13) --- */
.quantite { border: 0; background: var(--surface-2); border-radius: 12px; overflow: hidden; }
.quantite button { background: transparent; color: var(--marine); font-size: 18px; font-weight: 600; height: 40px; }
.quantite input { background: transparent; height: 40px; font-size: 15px; }
.produit { border: 0; border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; }
.produit-image { position: relative; background: #fff; border-bottom: 0; } /* fond BLANC : les photos (sur fond blanc) restent lisibles (11/10/2026) */
.produit .sans-photo { color: var(--bord-fort); font-size: 0; }
.produit .sans-photo svg { width: 40px; height: 40px; margin: 0 auto; }
.produit-image .badge-promo { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--eau); color: #fff; font-size: 11px;
height: 22px; line-height: 22px; padding: 0 9px; border-radius: 999px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* fiche en promotion (11/10/2026, capture du proprietaire) : la pastille ne s'etire plus sur toute la largeur (le « right »
d'une ancienne regle la tendait et elle cachait le haut de la photo) ; la photo descend sous la pastille ; chaque
condition de promotion dans un encadre vert d'eau, le prix sur sa propre ligne */
.produit-image .badge-promo { right: auto; }
.produit-image:has(.badge-promo) img { inset: 32px 0 0 0; height: calc(100% - 40px); }
.produit .palier-promo { margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: #E6F6F4; color: #0F6F68;
font-size: 12px; font-weight: 600; line-height: 1.3; }
.produit .palier-promo strong { display: block; font-size: 14px; font-weight: 800; color: #0F6F68; }
.produit .marque { font-size: 11px; color: var(--muet); letter-spacing: .06em; }
.produit .designation { font-size: 13px; font-weight: 600; color: var(--encre); line-height: 1.3; }
.produit .codes { font-size: 11px; color: var(--doux); }
.produit .carton-pastille { background: var(--surface-2); color: var(--encre); font-size: 11px; padding: 2px 8px; }
.produit .carton-pastille.carton-oblige { background: var(--alerte-pale); color: var(--alerte-texte); }
.produit .habituel { font-size: 11px; color: var(--ok-texte); }
.produit .produit-statut .badge { background: none; padding: 0; height: auto; line-height: 1.3; font-size: 12px; font-weight: 600; border: 0; }
.produit .prix-public { font-size: 11px; color: var(--muet); }
.produit .prix-net { font-size: 16px; font-weight: 800; }
.produit .prix-net small { font-size: 11px; }
.produit .prix-ttc { font-size: 11px; color: var(--doux); }
.produit .prix-ttc .remise { color: var(--ok-texte); font-weight: 700; }
.produit .legende-qte { display: none; }
.commande-smam .tableau-commande tr.ligne-article { border: 0; border-radius: 14px; box-shadow: var(--ombre); background: #fff; }
.commande-smam .tableau-commande .c-art .designation-ligne { font-size: 13px; font-weight: 600; line-height: 1.3; }
.commande-smam .tableau-commande .c-net strong { font-size: 16px; font-weight: 800; }
.filtres-commande select { width: auto; max-width: 100%; height: 36px; min-height: 36px; padding: 0 30px 0 14px; border-radius: 999px;
font-size: 14px; background-color: #fff; border: 1px solid var(--bord-fort); }
.options-filtres { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 10px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
.options-filtres::-webkit-scrollbar { display: none; }
.options-filtres .case { display: inline-flex; align-items: center; flex: none; height: 36px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--bord-fort); background: #fff; font-size: 14px; white-space: nowrap; position: relative; gap: 0; }
.options-filtres .case input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.options-filtres .case:has(input:checked) { background: var(--marine); border-color: var(--marine); color: #fff; }
.message-info { font-size: 13px; padding: 10px 12px; }
}
/* ==========================================================================================================
TELEPHONE — BLEU EN DEGRADE DIAGONAL (11/10/2026, choix du proprietaire : « proposition B mais avec degradation
de bleu », « je confirme la degradation diagonale »). En-tete et barre du bas = UN degrade 135° a l'echelle de
l'ecran (background-size 100vw 100vh : l'en-tete en montre le haut, la barre du bas le bas), logo blanc ; fond
bleu pale ; tuiles blanc -> bleu tres pale ; montants en bleu ; 1re tuile du BI et informations du client en
carte degradee. Telephone seulement (<= 700 px) : ordinateur inchange.
========================================================================================================== */
@media (max-width: 700px) {
/* degrade en DIAGONALE sur tout l'ecran (proprietaire, 11/10) : l'en-tete en montre le haut, la barre du bas le
bas — d'un coin sombre (en haut a gauche) au coin clair (en bas a droite) */
:root { --fond: #EEF3FA;
--deg-ecran: linear-gradient(135deg, #0b2a5c 0%, #063481 50%, #003da6 100%);
--deg-carte: linear-gradient(135deg, #0b2a5c 0%, #063481 55%, #003da6 100%); }
/* fond de page : bleu plus soutenu en haut, qui s'eclaircit en descendant */
body { background: #EEF3FA linear-gradient(180deg, #D9E5F5 0, #E6EEF9 220px, #EEF3FA 460px) no-repeat; }
h1 { color: var(--marine); }
/* en-tete et barre du bas : degrade bleu nuit -> bleu SMAM, logo blanc */
.entete { background: var(--deg-ecran) 0 0 / 100vw 100vh no-repeat; color: #fff; border-bottom: 0; box-shadow: 0 3px 14px rgba(16, 26, 58, .22); }
.logo .logo-image.logo-couleur { display: none; }
.logo .logo-image { display: block; height: 28px; width: auto; }
.logo .logo-espace { color: rgba(255, 255, 255, .8); border-left-color: rgba(255, 255, 255, .3); }
.cloche { background: rgba(255, 255, 255, .16); color: #fff; }
.cloche:hover, .cloche.actif { background: rgba(255, 255, 255, .26); }
.cloche-nb { border-color: #063481; }
.pastille-brouillon { background: rgba(255, 255, 255, .16); color: #fff; }
.pastille-brouillon b { background: #fff; color: var(--marine); }
.menu-bouton { background: #fff; color: var(--marine); }
.barre-onglets { background: var(--deg-ecran) 0 100% / 100vw 100vh no-repeat; border-top: 0; box-shadow: 0 -4px 18px rgba(16, 26, 58, .25); }
.barre-onglets .ob { color: rgba(255, 255, 255, .66); }
.barre-onglets .ob:hover, .barre-onglets .ob.actif { color: #fff; }
.barre-onglets .ob-central { color: #A6ECE6; }
.barre-onglets .ob-rond { border-color: #1D5C99; background: linear-gradient(140deg, #3CC7BC, #003da6);
box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
/* cartes et tuiles : blanc vers un bleu tres pale */
.carte { background: linear-gradient(180deg, #fff 0%, #FAFCFF 100%);
box-shadow: 0 1px 2px rgba(28, 44, 96, .06), 0 6px 16px rgba(28, 44, 96, .08); }
.tuile-bi, .tuile-accueil { background: linear-gradient(135deg, #fff 0%, #EAF2FC 100%); }
/* les valeurs (montants, chiffres, prix) en bleu */
.tuile-bi strong, .tuile-accueil .valeur, .montant-fiche, .erp-boite strong,
.carte-commandes .liste-commandes .lc-total, .liste-commandes-accueil td.lc-total,
.produit .prix-net, .commande-smam .tableau-commande .c-net strong, .liste-clients .lc-cond strong { color: #003795; }
.liste-notifs a::before, .tuile-accueil .icone-tuile, .liste-clients tr:has(.lc-client)::before { background-color: #DDE9F8; }
/* tableau de bord : la premiere tuile du BI en degrade */
.accueil-gestion .bi-resume .tuile-bi:first-child { background: var(--deg-carte); box-shadow: 0 8px 20px rgba(28, 44, 96, .25); }
.accueil-gestion .bi-resume .tuile-bi:first-child, .accueil-gestion .bi-resume .tuile-bi:first-child * { color: #fff !important; }
/* accueil du client : ses informations dans une carte en degrade */
.accueil-client .bienvenue { background: var(--deg-carte); color: #fff; padding: 18px 12px 12px; border-radius: 18px;
box-shadow: 0 8px 22px rgba(28, 44, 96, .25); }
.accueil-client .bienvenue h1, .accueil-client .bienvenue > .doux, .accueil-client .bienvenue .chips-conditions { padding: 0 4px; }
.accueil-client .bienvenue h1 { color: #fff; }
.accueil-client .bienvenue .doux { color: rgba(255, 255, 255, .84); }
.accueil-client .bienvenue .fort-blanc { color: #fff; }
.accueil-client .bienvenue .lien-blanc { color: #A6ECE6; }
.accueil-client .chips-conditions .chip { background: rgba(255, 255, 255, .16); color: #fff; }
.accueil-client .actions-rapides .btn { background: #fff; color: var(--marine); box-shadow: none; }
.accueil-client .actions-rapides .btn-secondaire { background: rgba(255, 255, 255, .12); color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.accueil-client .bienvenue .tuile-accueil .valeur { font-size: 20px; }
}
/* ==========================================================================================================
ACCUEIL DU CLIENT SUR ORDINATEUR ET TABLETTE (12/10/2026, proprietaire : « l'affichage pour les clients n'est pas
bien organise », « normalement les notifications en bas et Bonjour en haut »). Le telephone (<= 700 px) ne change
pas. Ordre : augmentation de prix, carte « Bonjour » (tuiles Reste a regler / Promotions a sa droite), dernieres
commandes a gauche + brouillon et promotions a droite, ristourne, notifications EN BAS. Brouillon vide : cache.
========================================================================================================== */
@media (min-width: 701px) {
.accueil-client { display: flex; flex-direction: column; gap: 20px; }
.accueil-client > * { margin: 0 !important; }
.accueil-client > .bandeau-hausse { order: 0; }
.accueil-client > .bienvenue { order: 1; }
.accueil-client > .grille-2 { order: 2; }
.accueil-client > .resume-promos { order: 3; }
.accueil-client > div:has(> .carte-ristourne) { order: 4; }
.accueil-client > .carte:has(.liste-notifs) { order: 5; }
.accueil-client > div:has(> .carte-installer) { order: 6; }
.accueil-client > [data-carte-notifs] { order: 7; }
.accueil-client .carte-brouillon-accueil:not(:has(.btn)) { display: none; }
.accueil-client .grille-2:not(:has(.carte-brouillon-accueil .btn)) { grid-template-columns: minmax(0, 1fr); }
.accueil-client .carte-dernieres, .accueil-client .carte-brouillon-accueil { margin: 0; }
/* la carte « Bonjour » : les tuiles sous le texte (tablette), a sa droite (ordinateur) */
.accueil-client .bienvenue .ligne-reste:has(~ .tuiles-accueil-client) { display: none; }
.accueil-client .bienvenue > .tuiles-accueil-client { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; margin-top: 18px; }
.tuile-accueil { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 14px;
background: #fff; color: var(--encre); text-decoration: none; box-shadow: 0 6px 18px rgba(10, 20, 50, .18); }
.tuile-accueil:only-child { grid-column: 1 / -1; }
.tuile-accueil .icone-tuile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
background: #EAF2FC; color: var(--marine); }
.tuile-accueil .etiquette { font-size: 13px; font-weight: 600; color: var(--doux); }
.tuile-accueil .valeur { font-size: 24px; font-weight: 800; color: #003795; letter-spacing: -.01em; line-height: 1.15;
white-space: nowrap; font-variant-numeric: tabular-nums; }
.tuile-accueil .valeur small { font-size: 12px; font-weight: 600; color: var(--doux); margin-left: 3px; }
.tuile-accueil .note { font-size: 12px; color: var(--doux); line-height: 1.35; }
.tuile-accueil .note b { color: var(--texte); }
.tuile-accueil.bordee-attention { box-shadow: inset 4px 0 0 #D99A00, 0 6px 18px rgba(10, 20, 50, .18); }
.tuile-accueil.forte { background: linear-gradient(140deg, #1597d4, #003da6); color: #fff; }
.tuile-accueil.forte .etiquette, .tuile-accueil.forte .valeur, .tuile-accueil.forte .valeur small,
.tuile-accueil.forte .note, .tuile-accueil.forte .note b { color: #fff; }
.tuile-accueil.forte .icone-tuile { background: rgba(255, 255, 255, .2); color: #fff; }
.tuile-accueil:hover { transform: translateY(-1px); }
}
@media (min-width: 1024px) {
.accueil-client { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.accueil-client > * { grid-column: 1 / -1; }
.accueil-client > .grille-2 { display: contents; }
.accueil-client .carte-dernieres { grid-column: 1; grid-row: span 2; order: 2; }
.accueil-client .carte-brouillon-accueil { grid-column: 2; order: 3; }
.accueil-client > .resume-promos { grid-column: 2; order: 3; }
/* rien a droite (ni brouillon, ni promotions) : les commandes sur toute la largeur */
.accueil-client:not(:has(> .resume-promos)):not(:has(.carte-brouillon-accueil .btn)) .carte-dernieres { grid-column: 1 / -1; }
/* carte « Bonjour » : le texte a gauche, les tuiles a droite */
.accueil-client .bienvenue:has(> .tuiles-accueil-client) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
column-gap: 32px; align-items: start; }
.accueil-client .bienvenue:has(> .tuiles-accueil-client) > * { grid-column: 1; }
.accueil-client .bienvenue > .tuiles-accueil-client { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin-top: 0; }
}
/* ==== iPHONE : ECRAN DECALE PAR WebKit (12/10/2026) ====
Quand iOS laisse la zone affichee decalee par rapport a la page et que le recalage n'a pas pris, portal.js pose
html.recale-ios et les decalages mesures : les elements fixes suivent la zone affichee (en haut : en-tete, menu,
ecrans pleins ; en bas : barre du bas et barres fixees). Sans cette classe, rien ne change. */
html.recale-ios .barre-onglets, html.recale-ios .barre-commande, html.recale-ios .barre-modifs,
html.recale-ios .barre-selection, html.recale-ios .bandeau-maj, html.recale-ios .toast-apercu {
translate: 0 var(--recale-bas, 0px);
}
@media (max-width: 1280px) {
html.recale-ios .resume-commande, html.recale-ios .commande-smam .colonne-smam { translate: 0 var(--recale-bas, 0px); }
}
html.recale-ios .entete:not(.menu-ouvert), html.recale-ios .entete.menu-ouvert .nav, html.recale-ios .scan,
html.recale-ios .scan-facture, html.recale-ios .attente-portail, html.recale-ios .tirer-actualiser {
translate: 0 var(--recale-haut, 0px);
}
/* ==== ENVOIS AU CLIENT (12/10/2026) : grille de la configuration du client, choix de la personne d'une commande ==== */
.tableau-envois th.c-envoi, .tableau-envois td.c-envoi { text-align: left; white-space: nowrap; vertical-align: top; }
.tableau-envois td:first-child { min-width: 200px; }
.case-envoi { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: .86rem; cursor: pointer; }
.case-envoi input { flex: none; margin: 0; }
.form-destinataire { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 0; font-size: .9rem; }
.form-destinataire label { font-weight: 600; }
.form-destinataire select { width: auto; max-width: 100%; }
@media (max-width: 700px) {
/* le nom de l'envoi reste a gauche pendant qu'on fait glisser les personnes */
.tableau-envois td:first-child, .tableau-envois th:first-child { position: sticky; left: 0; z-index: 1;
background: #fff; min-width: 128px; max-width: 150px; white-space: normal; }
.tableau-envois td:first-child .aide { display: none; }
.tableau-envois th.c-envoi { white-space: normal; min-width: 104px; }
.form-destinataire select { width: 100%; }
}
.imprimer-seul { display: none; }
@media print { .imprimer-seul { display: block; } }
/* ==== BARRE DE FILTRES COMMUNE (12/10/2026) — « proposition 1 » choisie par le proprietaire pour le telephone et
l'ordinateur, puis « pour tous les modules utiliser ce type d'affichage » : des ONGLETS soulignes (etat, type, vue ;
nombre en pastille) puis UNE ligne d'outils : recherche, listes « Periode », « Trier par »… (_barre.html, choix()) et
le compte. Remplace les rangees de pastilles (.onglet, .onglets-bi, .filtres-commandes, .etats-erp). ==== */
/* (12/10/2026, capture iPhone « la barre se deplace horizontal et vertical ») : le trait du bas est une ombre INTERIEURE
et les onglets n'ont plus de marge negative — la marge de -1 px rendait le contenu plus haut que la barre (43 px pour 42)
et l'iPhone la laissait tirer en hauteur (texte coupe) ; overflow-y: hidden par securite. */
.onglets, .onglets:not(.onglets-client) { display: flex; flex-wrap: nowrap; gap: 2px; margin: 4px 0 14px; padding: 0;
border-bottom: 0; box-shadow: inset 0 -1px 0 var(--bord, #e3e8f0); overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onglets::-webkit-scrollbar { display: none; }
.onglets > * { flex: none; }
.onglets .onglet { display: inline-flex; align-items: center; gap: 6px; height: auto; margin: 0; padding: 10px 16px;
border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none;
color: #66718a; font-size: .95rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.onglets .onglet:hover { color: var(--marine, #0b2a5c); }
.onglets .onglet.actif { background: transparent; border-color: transparent; border-bottom-color: #003da6;
color: var(--marine, #0b2a5c); }
.onglets .onglet .compte { display: inline-block; min-width: 24px; margin: 0; padding: 1px 7px; border-radius: 999px;
background: #eef1f6; color: var(--marine, #0b2a5c); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center;
opacity: 1; }
.onglets .onglet.actif .compte { background: #003da6; color: #fff; }
.onglets-petits, .onglets-petits:not(.onglets-client) { margin: 0 0 12px; }
.onglets.onglets-petits .onglet { padding: 8px 12px; font-size: .88rem; }
.onglets-client, .onglets.onglets-client { padding: 4px 0 0; }
.outils-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.outils-ligne > input[type="search"] { flex: 1 1 280px; width: auto; min-width: 0; max-width: none; margin: 0; }
.choix-ligne { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--doux, #66718a); font-size: .86rem;
font-weight: 400; white-space: nowrap; }
.choix-ligne select { width: auto; min-width: 0; max-width: 260px; margin: 0; padding: 8px 30px 8px 10px; border-radius: 8px;
color: var(--marine, #0b2a5c); font-size: .9rem; font-weight: 600; }
.outils-ligne .outils-compte { color: var(--doux, #66718a); font-size: .86rem; white-space: nowrap; }
.outils-ligne .a-droite { margin-left: auto; }
.outils-ligne .case { margin: 0; }
.outils-ligne > .btn { flex: none; }
.outils-ligne .periode-erp { margin: 0; }
.outils-ligne .cases-stock { padding: 0; }
/* les lignes de recherche deja en place (une recherche et son compte) prennent la meme allure */
.recherche-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.recherche-liste > input[type="search"] { flex: 1 1 280px; min-width: 0; max-width: none; margin: 0; }
@media (max-width: 700px) {
.onglets, .onglets:not(.onglets-client) { gap: 0; margin: 0 -16px 12px; padding: 0 16px; }
.onglets.onglets-client { padding: 4px 16px 0; }
.carte .onglets, .carte .onglets:not(.onglets-client) { margin-left: -16px; margin-right: -16px; }
.onglets .onglet { padding: 10px 12px; font-size: 14px; }
.onglets.onglets-petits .onglet { padding: 8px 10px; font-size: 13px; }
/* onglets SERRES (portal.js : seulement quand ils tiennent ainsi) : le nom, le nombre dessous, toute la largeur partagee
-> la barre ne defile plus. Trop d'onglets (releve bancaire, fiche client) : la barre defile, l'onglet actif en vue. */
.onglets.serres { gap: 0; }
.onglets.serres .onglet { flex: 1 1 auto; min-width: 0; flex-direction: column; justify-content: flex-end; gap: 4px;
padding: 8px 4px 7px; font-size: 13px; line-height: 1.2; text-align: center; white-space: normal; }
.onglets.serres .onglet .compte { margin: 0; }
.outils-ligne { gap: 8px; margin-bottom: 12px; }
.outils-ligne > input[type="search"] { flex: 1 1 100%; }
/* une liste par ligne, son nom a gauche : cote a cote, « Date de commande » ne tenait pas (16 px impose au toucher) */
.outils-ligne .choix-ligne { flex: 1 1 100%; min-width: 0; gap: 10px; }
.outils-ligne .periode-erp { flex: 1 1 100%; min-width: 0; justify-content: space-between; }
.outils-ligne > .btn, .outils-ligne .cases-stock { flex: 1 1 100%; }
.outils-ligne .periode-erp .choix-periode-erp { flex: 1 1 auto; min-width: 0; }
.outils-ligne .periode-erp select.choix-annee { width: 100%; min-width: 0; }
.outils-ligne .periode-erp .periode-choix { min-width: 0; }
.recherche-liste { gap: 8px; margin-bottom: 12px; }
.recherche-liste > input[type="search"] { flex: 1 1 100%; }
.outils-ligne .choix-ligne > span { flex: 0 0 72px; font-size: 13px; color: var(--doux, #66718a); white-space: normal; }
.outils-ligne .choix-ligne select, .outils-ligne .periode-erp select.choix-annee { flex: 1 1 auto; width: 100%; max-width: none;
height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--bord-fort, #d5dbe6); border-radius: 12px; box-shadow: none;
-webkit-appearance: none; appearance: none; color: var(--marine, #0b2a5c); font-weight: 600;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366718A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px; }
.outils-ligne .outils-compte { flex: 1 1 100%; }
.outils-ligne .a-droite { margin-left: 0; }
}
/* ---- TELEPHONE : barre du bas cachee pendant la saisie (14/10/2026, capture iPhone du proprietaire : dans
l'application installee, iOS retrecit la fenetre quand le clavier s'ouvre ; la barre collee en bas de la fenetre
montait au-dessus du clavier). portal.js pose html.clavier-ouvert tant qu'un champ de saisie a le focus sur un ecran
tactile ; les barres posees au-dessus d'elle (total, Enregistrer...) descendent a sa place. ---- */
@media (max-width: 700px) {
html.clavier-ouvert .barre-onglets { display: none !important; }
html.clavier-ouvert body[data-connecte] { --h-onglets: 0px; }
}
/* ---- MODULE COMPTABLE (ERP › Comptabilite, 14/10/2026) ---- */
.tuiles-compta { margin-bottom: 14px; }
@media (min-width: 1001px) { .tuiles-bi.tuiles-compta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tableau-compta .col-avoirs { display: none; } }
.tableau-compta td.nombre, .tableau-compta th.nombre { text-align: right; white-space: nowrap; }
.tableau-compta .ligne-total td { font-weight: 700; background: var(--fond, #f6f8fb); }
/* ---- FENETRES DANS LA PAGE et OUI / NON (14/10/2026, portal.js : data-fenetre, data-oui-non) ---- */
html.fenetre-ouverte, html.fenetre-ouverte body { overflow: hidden; }
dialog.fenetre { padding: 0; border: 0; border-radius: 16px; width: min(640px, calc(100vw - 32px)); max-width: none;
max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--surface); color: inherit;
box-shadow: 0 24px 60px rgba(16, 28, 64, .32); overflow: hidden; }
dialog.fenetre.grande { width: min(1080px, calc(100vw - 32px)); height: calc(100vh - 48px); height: calc(100dvh - 48px); }
dialog.fenetre[open] { display: flex; }
dialog.fenetre::backdrop, dialog.oui-non::backdrop { background: rgba(16, 28, 64, .45); }
.fenetre-boite { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: inherit; position: relative; }
dialog.fenetre.grande .fenetre-boite { height: 100%; }
.fenetre-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bord);
flex: none; }
.fenetre-tete h2 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fenetre-tete h2:focus { outline: none; }
.fenetre-fermer { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fond, #f3f5f9);
font-size: 24px; line-height: 1; cursor: pointer; color: var(--texte, #22293a); }
.fenetre-fermer:hover { background: var(--bord); }
.fenetre-barre { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; opacity: 0;
transition: opacity .15s; pointer-events: none; }
.fenetre-barre::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
background: var(--sg-vert); animation: fenetre-barre 1s linear infinite; }
dialog.fenetre-charge .fenetre-barre { opacity: 1; }
dialog.fenetre-charge .fenetre-corps:empty::before { content: "Chargement…"; color: var(--doux); }
@keyframes fenetre-barre { to { left: 100%; } }
.fenetre-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; }
dialog.oui-non { border: 0; border-radius: 16px; padding: 22px 22px 18px; width: min(440px, calc(100vw - 32px));
box-shadow: 0 24px 60px rgba(16, 28, 64, .35); color: inherit; background: var(--surface); }
dialog.oui-non p { margin: 0 0 18px; font-size: 1rem; line-height: 1.45; }
.oui-non-boutons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.oui-non-boutons .btn { min-width: 110px; justify-content: center; }
.oui-non-boutons .btn.btn-danger { background: var(--rouge, #b42318); color: #fff; box-shadow: none; }
@media (max-width: 700px) {
dialog.fenetre, dialog.fenetre.grande { width: 100vw; max-width: 100vw; }
dialog.fenetre { max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
dialog.fenetre.grande { height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
.fenetre-tete { padding: 10px 12px 10px 16px; }
.fenetre-corps { padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.oui-non-boutons .btn { flex: 1 1 0; }
}
/* ---- REGLEMENTS (ERP › Reglements, refonte du 14/10/2026) ---- */
/* liste de la page : tous les reglements, puis les clients a encaisser */
.reg-synthese { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 18px; margin-bottom: 14px; }
.rs-total { display: flex; flex-direction: column; min-width: 0; }
.rs-total strong { font-size: 1.5rem; color: var(--marine); white-space: nowrap; }
.reg-synthese .etiquette { font-size: 12px; color: var(--doux); }
.rs-modes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; flex: 1 1 360px; }
.rs-modes li { display: flex; flex-direction: column; min-width: 0; }
.rs-modes strong { font-size: 1rem; white-space: nowrap; }
.rs-modes .rs-rs strong { color: var(--doux); }
.liste-reg { list-style: none; margin: 0; padding: 0; }
.liste-reg > li { border-bottom: 1px solid var(--bord); }
.liste-reg > li:last-child { border-bottom: 0; }
.lreg-lien { display: grid; align-items: center; gap: 4px 16px; padding: 11px 10px; color: inherit; text-decoration: none;
grid-template-columns: 92px minmax(160px, 1.1fr) minmax(0, 1.6fr) minmax(110px, auto);
grid-template-areas: "date client moyens montant" "date factures factures montant"; border-radius: 10px; }
.lreg-lien:hover { background: #f4f8fb; }
.lreg-date { grid-area: date; color: var(--doux); font-size: .9rem; }
.lreg-client { grid-area: client; min-width: 0; overflow-wrap: anywhere; }
.lreg-moyens { grid-area: moyens; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.lreg-factures { grid-area: factures; min-width: 0; overflow-wrap: anywhere; }
.lreg-montant { grid-area: montant; text-align: right; white-space: nowrap; }
.lreg-montant strong { font-size: 1.05rem; }
.lreg-client-choix { grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "client montant action" "factures montant action"; }
.lreg-action { grid-area: action; color: #003da6; font-weight: 600; white-space: nowrap; }
.pastille-moyen { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; line-height: 1.5;
background: #eef2f7; color: var(--texte, #22293a); white-space: nowrap; }
.pastille-moyen.moyen-encaisse { background: #e7f6ee; color: #067647; }
.pastille-moyen.moyen-a_echoir { background: #e8f3fb; color: #0b5d8a; }
.pastille-moyen.moyen-en_cours { background: #fff4e0; color: #8a5a00; }
.pastille-moyen.moyen-impaye { background: #fde8e7; color: #b42318; font-weight: 600; }
.pastille-moyen.moyen-rs { background: #f1effa; color: #4b3f8f; }
/* fenetres : choix du client, detail d'un reglement */
.reg-intro { margin: 0 0 10px; }
.reg-recherche-client { width: 100%; }
.reg-compte { margin: 6px 0 4px; }
.reg-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px;
padding: 12px 14px; border-radius: 12px; background: var(--fond, #f3f5f9); }
.reg-fiche > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.reg-fiche .etiquette, .reg-chiffres .etiquette, .reg-reste .etiquette { font-size: 12px; color: var(--doux); }
.reg-detail-fen h3, .reg-bloc h3 { margin: 18px 0 8px; font-size: 1rem; }
.reg-moyens-liste { list-style: none; margin: 0; padding: 0; }
.reg-moyens-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px;
padding: 9px 0; border-bottom: 1px solid var(--bord); }
.reg-moyens-liste li:last-child { border-bottom: 0; }
.rm-mode { min-width: 0; overflow-wrap: anywhere; }
.rm-montant { white-space: nowrap; text-align: right; }
.reg-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.reg-detail-actions form { margin: 0; }
.reg-detail-actions .message { margin: 0; flex: 1 1 100%; }
/* saisie */
.reg-client { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; align-items: baseline;
margin-bottom: 4px; }
.reg-bloc { margin-top: 6px; }
.reg-bloc:first-child h3 { margin-top: 10px; }
.reg-entete { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 10px 18px; margin-top: 12px; }
.reg-entete .champ { margin: 0; }
.reg-moyen { display: grid; gap: 8px 12px; align-items: end; padding: 10px 12px; border-radius: 12px;
background: #f4f8fb; border: 1px solid var(--bord); margin-bottom: 8px;
grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.1fr) minmax(130px, 1.2fr) minmax(130px, 1fr) minmax(110px, 1fr) auto; }
.reg-moyen .champ { margin: 0; }
.reg-montant-recu input { font-weight: 700; font-size: 1.05rem; }
.reg-factures { display: flex; flex-direction: column; gap: 8px; }
.reg-facture { display: grid; align-items: center; gap: 6px 16px; padding: 10px 12px; border: 1px solid var(--bord);
border-radius: 12px; background: var(--surface);
grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) minmax(110px, auto) minmax(150px, 1.1fr) auto;
grid-template-areas: "coche detail reste imp rs" "precis precis precis precis precis"; }
.reg-facture:has(.reg-coche input:checked), .reg-facture:has(.imp-soldee), .reg-facture:has(.imp-partielle) {
border-color: var(--sg-vert); background: #f1faf9; }
.reg-coche { grid-area: coche; margin: 0; }
.reg-detail { grid-area: detail; min-width: 0; }
.reg-reste { grid-area: reste; text-align: right; white-space: nowrap; }
.reg-reste .etiquette { display: block; }
.reg-imputation { grid-area: imp; min-width: 0; }
.reg-rs { grid-area: rs; margin: 0; white-space: nowrap; }
.reg-precis { grid-area: precis; }
.reg-precis summary { cursor: pointer; font-size: .82rem; color: var(--doux); width: max-content; }
.reg-precis[open] summary { margin-bottom: 6px; }
.reg-precis .champ { margin: 0; max-width: 340px; }
.reg-imp { display: inline-block; font-size: .88rem; }
.reg-imp.imp-soldee { color: #067647; }
.reg-imp.imp-partielle { color: #8a5a00; }
.reg-imp.imp-pas-assez, .reg-imp.imp-erreur { color: #b42318; }
.imp-reste, .imp-precis { display: block; font-size: .78rem; color: var(--doux); }
.reg-reliquats { margin-top: 10px; }
.reg-reliquats summary { cursor: pointer; color: var(--doux); font-size: .9rem; }
.reg-reliquat { opacity: .85; }
.reg-derniers { margin-top: 18px; }
.reg-derniers summary { cursor: pointer; font-weight: 600; }
/* resume colle en bas (fenetre ou page) */
.reg-resume { position: sticky; bottom: 0; z-index: 5; margin: 16px -18px -18px; padding: 12px 18px 14px;
background: var(--surface); border-top: 1px solid var(--bord); box-shadow: 0 -8px 24px rgba(16, 28, 64, .10);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 6px 18px; align-items: center; }
.page-fenetre .reg-resume { bottom: var(--h-onglets, 0px); margin: 16px -16px -16px; border-radius: 0 0 14px 14px; }
.reg-resume > .reg-bouton { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.reg-resume > :not(.reg-bouton) { grid-column: 1; }
.reg-bouton .btn { min-width: 220px; justify-content: center; }
.reg-bouton > .petit { overflow-wrap: anywhere; }
.reg-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px 16px; }
.reg-chiffres > div { display: flex; flex-direction: column; min-width: 0; }
.reg-chiffres strong { font-size: 1.12rem; white-space: nowrap; }
.reg-ecart strong { color: #b42318; }
.reg-solde strong { color: #067647; }
.reg-lignes { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--doux); }
.reg-erreurs { margin: 0; padding-left: 18px; color: #b42318; }
.reg-infos { margin: 0; padding-left: 18px; color: #0b5d8a; }
.reg-indication { margin: 0; color: #0b5d8a; }
.liste-derniers-reglements { list-style: none; margin: 0; padding: 0; }
.liste-derniers-reglements li { padding: 9px 0; border-bottom: 1px solid var(--bord); }
.liste-derniers-reglements li:last-child { border-bottom: 0; }
.ldr-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ldr-tete .nombre { margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) {
.reg-facture { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coche reste" "detail rs" "imp imp" "precis precis"; }
.reg-imputation:not(:has(strong, .imp-erreur, .imp-pas-assez)) { display: none; }
.reg-moyen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reg-moyen .retirer-ligne { grid-column: 1 / -1; justify-self: end; }
.lreg-lien { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client montant" "moyens moyens" "date factures"; }
.lreg-client-choix { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client montant" "factures action"; }
}
@media (max-width: 700px) {
.reg-entete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reg-rs { padding-bottom: 2px; }
.reg-resume { margin: 14px -14px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
grid-template-columns: minmax(0, 1fr); gap: 4px; }
.page-fenetre .reg-resume { margin: 14px -16px -16px; }
.reg-resume > .reg-bouton { grid-column: 1; grid-row: auto; }
.reg-bouton .btn { min-width: 0; min-height: 44px; }
.reg-bouton > .petit { display: none; }
.reg-chiffres { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 2px 8px; }
.reg-chiffres .petit, .reg-chiffres > .reg-du-apres, .reg-resume .reg-lignes, .reg-resume .reg-infos { display: none; }
.reg-facture { padding: 8px 10px; gap: 4px 10px; }
.reg-precis summary { font-size: 12px; }
.reg-synthese { padding: 12px 14px; gap: 8px; }
.rs-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; flex-basis: 100%; }
.rs-total strong { font-size: 1.3rem; }
.reg-chiffres .etiquette { font-size: 11px; }
.reg-chiffres strong { font-size: 14px; }
.reg-lignes { font-size: 11px; gap: 0 10px; }
.reg-erreurs, .reg-infos, .reg-indication { font-size: 12px; }
.lreg-lien { padding: 10px 4px; gap: 4px 10px; }
.lreg-date { font-size: .8rem; }
.reg-moyens-liste li { grid-template-columns: minmax(0, 1fr) auto; }
.rm-etat { grid-column: 1 / -1; grid-row: 2; }
}
/* ECHEANCIER DES TRAITES ET CHEQUES, MOIS PAR MOIS (23/10/2026) — BI › Échéances (_bi_echeances.html) */
.tuiles-ech { margin-bottom: 16px; }
.tuiles-ech .tuile-bi { border-top-width: 4px; }
.tuile-prochaines { cursor: default; }
.tuile-prochaines:hover { box-shadow: none; }
.prochaines-ech { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: .88rem; }
.prochaines-ech li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.prochaines-ech .p-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-ech { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin: 0 4px 0 2px;
vertical-align: baseline; }
.pastille-ech { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600;
color: var(--c); background: #f6f7fa; border: 1px solid #dde2ec;
background: color-mix(in srgb, var(--c) 12%, #fff); border-color: color-mix(in srgb, var(--c) 35%, #fff);
white-space: nowrap; }
.bandeau-filtre { background: #eef4fb; border: 1px solid #d3e1f1; border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; }
.courbe .colonne-courante { fill: #eef4fb; }
.courbe .val-barre { font-size: 11px; font-weight: 700; fill: var(--marine, #0b2a5c); }
.courbe .axe.fort { font-weight: 700; fill: var(--marine, #0b2a5c); }
.courbe a rect:hover { opacity: .82; }
.legende-etats { flex-wrap: wrap; gap: 6px 16px; }
.legende-etats i { width: 12px !important; height: 12px !important; border-radius: 3px !important; }
.titre-groupe-ech { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doux, #66718a);
margin: 18px 0 8px; }
.titre-groupe-ech:first-of-type { margin-top: 4px; }
.mois-ech { border: 1px solid var(--bord, #dde2ec); border-radius: 12px; background: #fff; margin: 0 0 8px; }
.mois-ech.courant { border-color: #9cc3e6; box-shadow: 0 0 0 3px #eef4fb; }
.mois-ech > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 14px; align-items: center; padding: 12px 14px; }
.mois-ech > summary::-webkit-details-marker { display: none; }
.mois-ech .m-nom { font-weight: 700; font-size: 1.02rem; color: var(--marine, #0b2a5c); }
.mois-ech .m-total { font-weight: 800; font-size: 1.05rem; color: var(--marine, #0b2a5c); text-align: right; }
.mois-ech .m-n { grid-column: 1 / -1; }
.mois-ech .m-barre { grid-column: 1 / -1; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #eef1f6; }
.mois-ech .m-barre i { display: block; height: 100%; }
.mois-ech .m-etats { grid-column: 1 / -1; color: var(--doux, #66718a); line-height: 1.6; }
.mois-ech[open] > summary { border-bottom: 1px solid var(--bord, #e3e8f0); }
.lignes-ech { list-style: none; margin: 0; padding: 4px 14px 8px; }
.ligne-ech { display: grid; grid-template-columns: 4.4em minmax(0, 1.6fr) minmax(0, 1.4fr) 8.5em; gap: 4px 14px;
align-items: start; padding: 9px 0; border-bottom: 1px solid #eef1f6; }
.ligne-ech:last-child { border-bottom: 0; }
.ligne-ech .e-date { display: flex; flex-direction: column; line-height: 1.2; }
.ligne-ech .e-qui { display: flex; flex-direction: column; min-width: 0; }
.ligne-ech .e-client { font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.ligne-ech .e-client:hover { text-decoration: underline; }
.ligne-ech .e-etat { display: block; min-width: 0; line-height: 1.5; }
.ligne-ech .e-etat .pastille-ech { margin-right: 4px; }
.chip-ech { white-space: nowrap; margin-right: 8px; }
.tuiles-ech .chip-ech { display: block; white-space: normal; margin-right: 0; }
.ligne-ech .e-montant { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) {
.tuiles-ech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.courbe .val-barre { font-size: 20px; }
.courbe .val-barre.impair { display: none; }
.ligne-ech { grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; font-size: .92rem; }
.ligne-ech .e-date .doux { font-size: .72rem; }
.ligne-ech .e-qui .doux, .ligne-ech .e-etat .doux { font-size: .78rem; }
.ligne-ech .e-etat .pastille-ech { font-size: .7rem; padding: 1px 6px; }
.ligne-ech .e-etat { grid-column: 2 / -1; grid-row: 2; }
.ligne-ech .e-montant { grid-column: 3; grid-row: 1; }
.mois-ech > summary { padding: 11px 12px; }
.lignes-ech { padding: 2px 12px 6px; }
.tuile-prochaines { grid-column: 1 / -1; }
}
/* GRAPHIQUES DYNAMIQUES (23/10/2026) — statique/js/graphes.js : bulle, repere, legende cliquable, animation */
.courbe-bloc[data-graphe] { position: relative; }
.graphe-vivant svg.courbe { cursor: crosshair; outline: none; }
.graphe-vivant svg.courbe:focus-visible { box-shadow: 0 0 0 3px #cfe3f5; border-radius: 8px; }
.courbe .guide { stroke: #0b2a5c; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; pointer-events: none; }
.courbe .focus circle { pointer-events: none; }
.courbe .serie-cachee { display: none; }
.graphe-survol .courbe rect.barre:not(.actif) { opacity: .42; }
.graphe-survol .courbe .val-barre:not(.actif) { opacity: .35; }
.courbe rect.barre { transition: opacity .15s, y .25s, height .25s; }
.courbe-bloc.anime rect.barre { transform-box: fill-box; transform-origin: 50% 100%;
animation: graphe-pousse .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 22ms); }
.courbe-bloc.anime rect.barre.neg { transform-origin: 50% 0; }
.courbe-bloc.anime .val-barre, .courbe-bloc.anime circle.point { animation: graphe-fondu .5s ease .55s both; }
.courbe .apparait { animation: graphe-fondu .9s ease both; }
@keyframes graphe-pousse { from { transform: scaleY(0); } }
@keyframes graphe-fondu { from { opacity: 0; } }
.legende button.legende-annee { background: none; border: 0; padding: 3px 6px; margin: 0; font: inherit; color: inherit;
cursor: pointer; border-radius: 8px; }
.legende button.legende-annee:hover { background: #eef2f8; }
.legende button.legende-annee.eteinte { opacity: .45; text-decoration: line-through; }
.legende-annee i.rond { width: 11px; height: 11px; border-radius: 50%; background: #fff !important; border: 2.4px solid #0b2a5c; }
.bulle-graphe { position: absolute; z-index: 6; width: max-content; min-width: 190px; max-width: min(380px, 94%);
background: #fff; border: 1px solid #dde2ec; border-radius: 12px; box-shadow: 0 10px 28px rgba(28, 44, 96, .18);
padding: 10px 12px; font-size: .86rem; line-height: 1.35; pointer-events: none; color: #1f2a44; }
.bulle-graphe .bt { font-weight: 800; color: var(--marine, #0b2a5c); }
.bulle-graphe .bs { color: var(--doux, #66718a); font-size: .8rem; margin: 1px 0 4px; }
.bulle-graphe .bl { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; align-items: baseline;
padding: 1px 0; }
.bulle-graphe .bl i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bulle-graphe .bl b, .bulle-graphe .bd b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulle-graphe .bl.eteinte { opacity: .4; }
.bulle-graphe .bd { border-top: 1px solid #eef1f6; margin-top: 6px; padding-top: 6px; display: grid; gap: 2px;
font-size: .8rem; }
.bulle-graphe .bd > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.bulle-graphe .bd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid transparent;
padding-left: 5px; }
.bulle-graphe .bplus { color: var(--doux, #66718a); padding-left: 8px; }
.bulle-graphe .blien { display: inline-block; margin-top: 6px; font-weight: 700; pointer-events: auto; }
.vues-graphe { display: inline-flex; background: #eef1f6; border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.vues-graphe button { border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 600; padding: 6px 12px;
border-radius: 8px; color: var(--doux, #66718a); cursor: pointer; }
.vues-graphe button.actif { background: #fff; color: var(--marine, #0b2a5c); box-shadow: 0 1px 3px rgba(28, 44, 96, .15); }
.tete-graphe { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.tete-graphe h2 { margin: 0; }
@media (max-width: 700px) {
.bulle-graphe { position: static; width: auto; min-width: 0; max-width: none; margin: 6px 0 2px; font-size: .82rem;
padding: 8px 10px; box-shadow: none; background: #f7f9fc; }
.bulle-graphe .bd { font-size: .74rem; }
.vues-graphe { width: 100%; }
.vues-graphe button { flex: 1 1 0; padding: 7px 6px; }
}
@media (prefers-reduced-motion: reduce) {
.courbe-bloc.anime rect.barre, .courbe-bloc.anime .val-barre, .courbe-bloc.anime circle.point,
.courbe .apparait { animation: none; }
}
/* ---------- TRESORERIE INTELLIGENTE (23/10/2026) : fiabilite des clients, lecture du compte, ventes a venir ---------- */
.badge.fiab-fiable { background: #e3f6f4; color: #0f6e66; }
.badge.fiab-lent { background: #fff1db; color: #8a5a00; }
.badge.fiab-irregulier { background: #fdf1dc; color: #8a5a00; }
.badge.fiab-nouveau, .badge.fiab-groupe { background: #eef1f5; color: var(--doux); }
.badge.fiab-risque { background: #fde1df; color: #b3261e; }
.form-lire-banque { margin: 6px 0 0; }
.form-lire-banque .btn { white-space: nowrap; }
.pt-r-prev { color: #a85f0b; }
.pt-prevision-info { border-left: 3px solid #e08a1e; padding-left: 8px; }
.pt-comment summary { font-weight: 600; }
.tableau-ventes td, .tableau-ventes th { padding: 6px 8px; }
.legende-annee i.tirets-orange { background: repeating-linear-gradient(90deg, #e08a1e 0 3px, transparent 3px 7px) !important; }
.resume-tresor-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-habitude { margin: 0 0 6px; }
.pt-autres-clients > summary { font-weight: 600; margin: 8px 0; }
.resume-tresor .resume-alerte strong { color: #b3261e; }
@media (max-width: 700px) {
.resume-tresor-4 { grid-template-columns: 1fr 1fr; }
.resume-tresor-4 > :first-child { grid-column: 1 / -1; }
.tableau-fiabilite { width: 100%; table-layout: fixed; }
.tableau-fiabilite td, .tableau-fiabilite th { padding: 5px 3px; font-size: .8rem; overflow-wrap: anywhere; }
.tableau-fiabilite th { white-space: normal; letter-spacing: 0; }
.tableau-attendues thead { display: none; }
.tableau-attendues, .tableau-attendues tbody { display: block; }
.tableau-attendues tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0;
border-bottom: 1px solid var(--bord, #e3e8f0); }
.tableau-attendues td { display: block; padding: 0; border: 0; }
.tableau-attendues td.f-chances { grid-column: 1 / -1; }
.tableau-attendues td.f-num .doux { display: block; }
.tableau-ventes td, .tableau-ventes th { padding: 6px 4px; font-size: .86rem; }
.form-lire-banque .btn { width: 100%; }
}
/* VISIONNEUSE DE PHOTOS DANS LA PAGE (24/10/2026) — a[data-photo] : la photo au-dessus de la page, « ‹ Retour » */
html.vp-ouverte, html.vp-ouverte body { overflow: hidden; }
.visionneuse-photo { position: fixed; inset: 0; z-index: 2100; background: #0e1530; color: #fff;
display: flex; flex-direction: column; }
.visionneuse-photo[hidden] { display: none; }
.vp-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.vp-retour { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 0; background: #fff; color: #0b2a5c;
font-weight: 600; font-size: 1rem; font-family: inherit; cursor: pointer; }
.vp-retour:focus-visible { outline: 2px solid #1597d4; outline-offset: 2px; }
.vp-compte { font-size: .95rem; opacity: .85; text-align: right; }
.vp-cadre { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 12px 0;
overflow: hidden; touch-action: pan-y; }
.vp-cadre img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in;
background: #fff; user-select: none; -webkit-user-select: none; }
.visionneuse-photo.vp-reel .vp-cadre { overflow: auto; display: block; touch-action: auto; padding: 8px; }
.visionneuse-photo.vp-reel .vp-cadre img { max-width: none; max-height: none; cursor: zoom-out; }
.vp-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .55); background: rgba(14, 21, 48, .72); color: #fff; font-size: 30px;
line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.vp-fleche:hover { background: rgba(14, 21, 48, .9); }
.vp-prec { left: 12px; }
.vp-suiv { right: 12px; }
.visionneuse-photo.vp-seule .vp-fleche, .visionneuse-photo.vp-reel .vp-fleche { display: none; }
.vp-aide { margin: 0; padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px)); text-align: center;
font-size: .85rem; opacity: .7; }
.visionneuse-photo.vp-reel .vp-aide { display: none; }
@media (max-width: 700px) { .vp-fleche { width: 40px; height: 40px; font-size: 26px; } .vp-prec { left: 6px; } .vp-suiv { right: 6px; } }
/* PREPARER LES COMMANDES FOURNISSEUR (appro.py, 24/10/2026) */
.ap-fournisseurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ap-four { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
border-top: 4px solid var(--marine, #0b2a5c); margin: 0; }
.ap-four:hover { box-shadow: 0 2px 12px rgba(28, 44, 96, .14); }
.ap-four-tete h2 { margin: 0; font-size: 1.2rem; }
.ap-four-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-four-chiffres > div { display: flex; flex-direction: column; background: #f5f7fb; border-radius: 10px; padding: 8px 10px; }
.ap-four-chiffres strong { font-size: 1.35rem; color: var(--marine, #0b2a5c); line-height: 1.15; }
.ap-four-chiffres span { font-size: .82rem; color: var(--doux, #5b6480); }
.ap-four-chiffres .ap-alerte { background: #fdecec; }
.ap-four-chiffres .ap-alerte strong { color: #b42318; }
.ap-four-pied { margin: 0; }
.ap-tuiles { margin-bottom: 14px; }
.ap-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.ap-grille > .carte { margin: 0; }
.ap-grille .ap-compare { margin: 4px 0 8px; padding-left: 18px; }
.ap-detail { margin-top: 8px; }
.ap-detail summary { cursor: pointer; }
.ap-detail ul { margin: 6px 0; padding-left: 18px; max-height: 260px; overflow: auto; }
#tresorerie { margin-top: 14px; }
.ap-paiements { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ap-paiements li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
padding: 8px 10px; background: #f5f7fb; border-radius: 10px; }
.ap-p-date { font-weight: 600; color: var(--marine, #0b2a5c); }
.ap-p-quoi .petit { display: block; }
.ap-p-montant { white-space: nowrap; }
.ap-txt-rouge { color: #b42318; }
.ap-objectifs { margin: 0 0 14px; }
.ap-objectifs > summary { cursor: pointer; }
.ap-obj-info { margin: 8px 0; padding-left: 18px; }
.ap-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.ap-champs .champ { margin: 0; }
.ap-familles { margin: 6px 0 4px; }
.ap-familles summary { cursor: pointer; }
.ap-familles-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px;
max-height: 420px; overflow: auto; }
.ap-famille { display: flex; flex-direction: column; gap: 2px; background: #f5f7fb; border-radius: 10px; padding: 8px 10px; }
.ap-famille .ap-sf { padding-left: 18px; font-size: .9rem; }
#ap-liste { margin-top: 18px; }
.tableau-appro td { vertical-align: top; }
.tableau-appro .ap-art { display: flex; gap: 10px; min-width: 300px; }
.ap-photo { flex: none; width: 52px; height: 52px; border-radius: 8px; background: #fff; border: 1px solid var(--bord, #dde2ec);
display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ap-art-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-nom { font-weight: 600; color: var(--marine, #0b2a5c); text-decoration: none; }
.ap-nom:hover { text-decoration: underline; }
.ap-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-plus { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ap-pourquoi summary, .ap-avis summary { cursor: pointer; color: var(--sg-bleu, #003da6); }
.ap-pourquoi p { margin: 4px 0 0; max-width: 560px; }
.ap-avis[open] { flex-basis: 100%; }
.ap-avis-corps { margin-top: 6px; padding: 10px 12px; background: #f5f7fb; border-radius: 10px; max-width: 640px; }
.ap-verdict { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ap-avis-chiffres { margin: 0; display: grid; gap: 4px; }
.ap-avis-chiffres > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px; font-size: .92rem; }
.ap-avis-chiffres dt { color: var(--doux, #5b6480); }
.ap-avis-chiffres dd { margin: 0; }
.ap-bloc { display: block; }
.ap-mois { display: flex; gap: 3px; align-items: flex-end; height: 56px; margin: 8px 0 2px; }
.ap-mois-barre { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ap-mois-barre i { display: block; width: 100%; background: var(--sg-bleu, #003da6); border-radius: 3px 3px 0 0; }
.ap-mois-barre b { font-size: 11px; font-weight: 500; color: var(--doux, #5b6480); line-height: 14px; }
.ap-clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ap-clients li { display: flex; justify-content: space-between; gap: 10px; }
.tableau-appro .ap-c { text-align: right; white-space: nowrap; }
.tableau-appro .ap-c strong { display: block; font-size: 1.02rem; }
.tableau-appro .ap-c .petit { display: block; white-space: normal; max-width: 150px; margin-left: auto; }
.tableau-appro .ap-qte form { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.tableau-appro .ap-qte input { width: 90px; text-align: right; font-weight: 600; }
.tableau-appro .ap-qte input.ap-modifie { border-color: #7c3aed; background: #f5f0ff; }
.tableau-appro tr.ap-a-commander td { background: #f6fbfa; }
.tableau-appro tr.ap-rupture .ap-art { box-shadow: inset 3px 0 0 #d92d20; }
.ap-actions { margin: 14px 0; flex-wrap: wrap; }
.ap-methode { margin-top: 14px; }
.ap-methode summary { cursor: pointer; }
.ap-methode ul { margin: 8px 0 0; padding-left: 18px; }
.ap-reglage h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
@media (max-width: 1000px) { .ap-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
.ap-fournisseurs { grid-template-columns: minmax(0, 1fr); }
.ap-paiements li { grid-template-columns: minmax(0, 1fr) auto; }
.ap-paiements .ap-p-date { grid-column: 1 / -1; }
.ap-avis-chiffres > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tableau-appro, .tableau-appro tbody { display: block; width: 100%; }
.tableau-appro thead { display: none; }
.tableau-appro tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 12px;
margin-bottom: 10px; border: 1px solid var(--bord, #dde2ec); border-radius: 12px; background: #fff; }
.tableau-appro tr.ap-a-commander td { background: transparent; }
.tableau-appro tr.ap-a-commander { background: #f6fbfa; }
.tableau-appro tr.ap-rupture { box-shadow: inset 4px 0 0 #d92d20; }
.tableau-appro tr.ap-rupture .ap-art { box-shadow: none; }
.tableau-appro td { display: block; padding: 0; border: 0; }
.tableau-appro .ap-art { grid-column: 1 / -1; min-width: 0; }
.tableau-appro .ap-c { text-align: left; white-space: normal; }
.tableau-appro .ap-c::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase;
letter-spacing: .03em; color: var(--doux, #5b6480); }
.tableau-appro .ap-c .petit { max-width: none; margin-left: 0; }
.tableau-appro .ap-qte { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: #eef2f8; border-radius: 10px; padding: 8px 10px; }
.tableau-appro .ap-qte::before { margin-right: auto; }
.tableau-appro .ap-qte form { justify-content: flex-start; }
.tableau-appro .ap-qte input { width: 110px; }
.ap-avis-corps { max-width: none; }
}
.badge-violet { background: #f1ebfd; color: #6b3fd1; }
/* IA LOCALE (24/10/2026) : « Demander a l'IA » dans Prevoir les achats, avis de l'IA, carte de Parametres */
.ap-ia { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #f2f7fb; border: 1px solid #d8e6f0; }
.ap-ia label { display: block; margin-bottom: 6px; }
.ap-ia-ligne { display: flex; gap: 8px; align-items: flex-start; }
.ap-ia-ligne textarea { flex: 1 1 auto; min-width: 0; resize: vertical; }
.ap-ia-ligne .btn { flex: none; }
.ap-ia-reponse { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c9d9e6; }
.ap-avis-ia { margin: 8px 0 4px; }
.ap-ia-avis { background: #f2f7fb; border-left: 3px solid #1597d4; padding: 6px 8px; border-radius: 6px; }
.ia-etat { display: grid; gap: 4px; margin: 0 0 8px; }
.ia-etat > div { display: flex; gap: 8px; flex-wrap: wrap; }
.ia-etat dt { min-width: 170px; color: var(--doux, #66718A); }
.ia-etat dd { margin: 0; }
.ia-reglages .champ { margin: 8px 0; }
@media (max-width: 700px) {
.ap-ia-ligne { flex-direction: column; align-items: stretch; }
.ia-etat dt { min-width: 0; width: 100%; }
}
/* PILOTAGE — LE POINT DE L'IA (25/10/2026, _pilotage_ia.html) */
.pil-ia { border-left: 4px solid #1597d4; background: linear-gradient(135deg, #f4fafc 0%, #ffffff 60%); }
.pil-ia-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pil-ia-tete h2 { margin: 0; flex: 1 1 auto; font-size: 1.15rem; }
.pil-ia-tete form { margin: 0; }
.pil-ia-icone { color: #1597d4; }
.pil-ia-resume { margin: 10px 0 4px; font-size: 1.02rem; line-height: 1.5; color: var(--marine, #0b2a5c); }
.pil-ia-sous { margin: 12px 0 6px; font-size: .92rem; color: var(--doux, #66718A); text-transform: none; }
.pil-ia-prio { margin: 0; padding: 0; list-style: none; counter-reset: piaprio; display: grid; gap: 8px; }
.pil-ia-prio > li { counter-increment: piaprio; position: relative; padding: 10px 12px 10px 44px; border-radius: 10px;
background: #fff; border: 1px solid #e3e8f0; }
.pil-ia-prio > li::before { content: counter(piaprio); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px;
border-radius: 50%; background: var(--marine, #0b2a5c); color: #fff; font-weight: 700; font-size: .8rem;
display: flex; align-items: center; justify-content: center; }
.pil-ia-prio-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pil-ia-prio p { margin: 4px 0 6px; }
.pil-ia-attention { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff7e8; border-left: 3px solid #e3a008; }
.pil-ia-note { margin: 8px 0 0; }
.pil-ia-ancien { opacity: .55; }
.pil-ia-travail { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pil-ia-points { display: inline-flex; gap: 4px; }
.pil-ia-points i { width: 8px; height: 8px; border-radius: 50%; background: #1597d4; animation: piapoint 1.2s infinite ease-in-out; }
.pil-ia-points i:nth-child(2) { animation-delay: .2s; }
.pil-ia-points i:nth-child(3) { animation-delay: .4s; }
@keyframes piapoint { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pil-ia-points i { animation: none; opacity: .7; } }
@media (max-width: 700px) {
.pil-ia-tete h2 { flex-basis: 100%; }
.pil-ia-tete form, .pil-ia-tete form .btn { width: 100%; }
.pil-ia-prio > li { padding-left: 40px; }
}
.ia-attente { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: .9rem; }
/* ASSISTANT (25/10/2026, assistant.html, _assistant_reponse.html) */
.as-carte { border-left: 4px solid #1597d4; }
.as-ligne { display: flex; gap: 8px; }
.as-ligne input { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; }
.as-ligne .btn { flex: none; }
.as-exemples { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.as-exemple { border: 1px solid #d8e6f0; background: #f2f7fb; color: var(--marine, #0b2a5c); border-radius: 999px;
padding: 5px 12px; font: inherit; font-size: .86rem; cursor: pointer; text-align: left; }
.as-exemple:hover { border-color: #1597d4; }
#as-resultat:empty { display: none; }
#as-resultat { margin-top: 12px; }
#as-resultat .as-reponse { background: #f7fafc; border: 1px solid #e3e8f0; border-radius: 12px; padding: 14px 16px; }
#as-resultat .as-phrase { font-size: 1.12rem; font-weight: 600; }
.as-question { margin: 0 0 4px; color: var(--doux, #66718A); font-size: .9rem; }
.as-titre { margin: 0 0 4px; font-size: 1.1rem; }
.as-phrase { margin: 0 0 8px; font-size: 1.02rem; color: var(--marine, #0b2a5c); line-height: 1.45; }
.as-lignes { margin: 0 0 8px; display: grid; gap: 4px; }
.as-lignes > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #eef1f6; }
.as-lignes dt { color: var(--doux, #66718A); }
.as-lignes dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.as-sous { margin: 10px 0 4px; font-size: .9rem; color: var(--doux, #66718A); }
.as-liste { margin: 0; padding: 0 0 0 22px; display: grid; gap: 4px; }
.as-liste li { padding: 4px 0; }
.as-liste li > .as-liste-texte, .as-liste li > .as-valeur { vertical-align: top; }
.as-liste li { display: list-item; }
.as-liste-texte { display: inline-flex; flex-direction: column; max-width: calc(100% - 130px); }
.as-valeur { float: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.as-hist-tete { display: flex; align-items: center; gap: 10px; }
.as-hist-tete h2 { margin: 0; flex: 1 1 auto; }
.as-hist-tete form { margin: 0; }
.as-hist { border-top: 1px solid #eef1f6; padding: 8px 0; }
.as-hist summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.as-hist summary > .petit { white-space: nowrap; flex: none; }
.as-hist .as-reponse { padding: 8px 0 0 12px; }
@media (max-width: 700px) {
.as-ligne { flex-direction: column; }
.as-ligne .btn { width: 100%; }
.as-liste-texte { max-width: 100%; display: flex; }
.as-valeur { float: none; display: block; }
.as-hist-tete { flex-wrap: wrap; }
.as-exemples { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -16px; scrollbar-width: none; }
.as-exemple { flex: none; white-space: nowrap; }
#as-resultat .as-reponse { padding: 12px; }
}
/* MESSAGERIE DE L'EQUIPE (25/10/2026, messagerie.html, _msg_*.html, messagerie.js) */
.page-messagerie { max-width: 1320px; }
.msg-cadre { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 0; background: #fff;
border: 1px solid #e3e8f0; border-radius: 14px; overflow: hidden; height: calc(100vh - 150px); min-height: 520px; }
.msg-cote { border-right: 1px solid #e3e8f0; display: flex; flex-direction: column; min-height: 0; background: #fbfcfe; }
.msg-cote-tete { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; }
.msg-cote-tete h1 { margin: 0; flex: 1 1 auto; font-size: 1.3rem; }
.msg-recherche { padding: 0 14px 8px; }
.msg-recherche input { width: 100%; }
#msg-liste-cadre { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.msg-liste { list-style: none; margin: 0; padding: 0 6px 10px; }
.msg-conv { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: inherit;
text-decoration: none; }
.msg-conv:hover { background: #eef3f8; }
.msg-conv.actif { background: #e4eef7; }
.msg-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; font-weight: 700; color: #fff; background: #0b2a5c; font-size: 1rem; }
.msg-av-groupe { background: #003da6; }
.msg-av-equipe { background: #1597d4; }
.msg-conv-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-conv-tete, .msg-conv-bas { display: flex; align-items: center; gap: 6px; min-width: 0; }
.msg-conv-tete strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-quand { flex: none; font-size: .78rem; color: var(--doux, #66718A); }
.msg-apercu { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: .86rem; color: var(--doux, #66718A); }
.msg-conv.non-lu .msg-apercu { color: var(--marine, #0b2a5c); font-weight: 600; }
.msg-conv.non-lu .msg-conv-quand { color: #003da6; font-weight: 700; }
.msg-pastille { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #003da6;
color: #fff; font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.msg-muet { flex: none; font-size: .8rem; }
.msg-vide { padding: 12px; }
.msg-resultats { padding: 0 14px 10px; display: grid; gap: 4px; }
.msg-resultat { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 10px;
background: #fff; border: 1px solid #e3e8f0; color: inherit; text-decoration: none; }
.msg-resultat-texte { grid-column: 1 / -1; font-size: .86rem; color: var(--doux, #66718A); }
.msg-fil-cadre { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
background: #f3f6fa; }
.msg-fil-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff;
border-bottom: 1px solid #e3e8f0; }
.msg-fil-titre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msg-fil-titre .petit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fil-tete form { margin: 0; }
.msg-retour { display: none; font-size: 1.8rem; line-height: 1; text-decoration: none; color: var(--marine, #0b2a5c);
padding: 0 6px 4px 0; }
.msg-ic { border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; width: 40px; height: 40px;
border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.msg-ic:hover { background: #eef3f8; }
.msg-fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 10px; display: flex;
flex-direction: column; gap: 3px; }
.msg-plus { align-self: center; margin: 0 0 8px; }
.msg-debut, .msg-rien { margin: auto; text-align: center; max-width: 420px; padding: 20px; }
.msg-jour { align-self: center; margin: 12px 0 6px; padding: 3px 12px; border-radius: 999px; background: #e4ebf3;
color: var(--doux, #66718A); font-size: .78rem; font-weight: 600; }
.msg { display: flex; align-items: flex-end; gap: 6px; max-width: 78%; position: relative; margin-top: 6px; }
.msg.msg-suite { margin-top: 0; }
.msg-moi { align-self: flex-end; flex-direction: row-reverse; }
.msg-autre { align-self: flex-start; }
.msg-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #c9d6e6; color: #0b2a5c;
font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.msg-suite .msg-av { visibility: hidden; }
.msg-bulle { background: #fff; border-radius: 16px 16px 16px 4px; padding: 7px 11px 5px; box-shadow: 0 1px 1px rgba(28, 44, 96, .08);
min-width: 70px; overflow-wrap: anywhere; }
.msg-moi .msg-bulle { background: #003da6; color: #fff; border-radius: 16px 16px 4px 16px; }
.msg-suite.msg-autre .msg-bulle { border-top-left-radius: 6px; }
.msg-suite.msg-moi .msg-bulle { border-top-right-radius: 6px; }
.msg-auteur { display: block; font-size: .76rem; font-weight: 700; color: #003da6; margin-bottom: 1px; }
.msg-suite .msg-auteur { display: none; }
.msg-texte { margin: 0; line-height: 1.4; white-space: normal; }
.msg-moi .msg-texte a { color: #fff; }
.msg-supprime { margin: 0; font-style: italic; opacity: .75; }
.msg-pied { display: flex; justify-content: flex-end; gap: 4px; align-items: center; font-size: .7rem; opacity: .75;
margin-top: 2px; }
.msg-etat.msg-lu { color: #9ff0e9; opacity: 1; font-weight: 700; }
.msg-g-systeme { align-self: center; max-width: 90%; }
.msg-systeme { margin: 6px 0; font-size: .8rem; color: var(--doux, #66718A); text-align: center; }
.msg-photo { display: block; margin: 2px -5px 2px; }
.msg-photo img { display: block; max-width: min(320px, 62vw); max-height: 360px; border-radius: 12px; }
.msg-fichier { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; padding: 4px 0; }
.msg-fichier-ic { flex: none; width: 42px; height: 48px; border-radius: 6px; background: #e4ebf3; color: #0b2a5c;
font-size: .68rem; font-weight: 800; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.msg-moi .msg-fichier-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.msg-moi .msg-fichier .doux { color: rgba(255, 255, 255, .8); }
.msg-vocal { display: flex; align-items: center; gap: 8px; min-width: 210px; padding: 2px 0; }
.msg-lecture { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: #003da6;
position: relative; }
.msg-moi .msg-lecture { background: #fff; }
.msg-lecture::before { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff;
border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.msg-moi .msg-lecture::before { border-left-color: #003da6; }
.joue .msg-lecture::before { left: 11px; top: 10px; width: 4px; height: 14px; border: 0; background: #fff;
box-shadow: 7px 0 0 #fff; }
.msg-moi .joue .msg-lecture::before { background: #003da6; box-shadow: 7px 0 0 #003da6; }
.msg-onde { flex: 1 1 auto; height: 4px; border-radius: 2px; background: rgba(28, 44, 96, .18); overflow: hidden; }
.msg-moi .msg-onde { background: rgba(255, 255, 255, .35); }
.msg-onde i { display: block; height: 100%; width: 0; background: currentColor; }
.msg-duree { flex: none; font-size: .78rem; font-variant-numeric: tabular-nums; }
.msg-appel { margin: 0; }
.msg-suppr { visibility: hidden; border: 0; background: transparent; color: var(--doux, #66718A); cursor: pointer;
font-size: 1.1rem; width: 26px; height: 26px; border-radius: 50%; flex: none; align-self: center; }
.msg:hover .msg-suppr, .msg-suppr:focus, .msg-choisi .msg-suppr { visibility: visible; }
.msg-ic svg, .msg-envoyer svg { display: block; }
.msg-ligne-saisie label.msg-ic { color: var(--doux, #66718A); }
.msg-micro { color: var(--doux, #66718A); }
.msg-envoyer { display: inline-flex; align-items: center; justify-content: center; }
.msg-cible .msg-bulle { outline: 3px solid #ffd666; }
.msg-nouveaux { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; border: 0; border-radius: 999px;
background: #0b2a5c; color: #fff; padding: 7px 14px; font: inherit; font-size: .86rem; cursor: pointer;
box-shadow: 0 4px 12px rgba(28, 44, 96, .25); }
.msg-saisie { background: #fff; border-top: 1px solid #e3e8f0; padding: 8px 10px; }
.msg-ligne-saisie { display: flex; align-items: flex-end; gap: 6px; }
.msg-ligne-saisie textarea { flex: 1 1 auto; min-width: 0; resize: none; border-radius: 20px; padding: 9px 14px;
max-height: 160px; line-height: 1.35; }
.msg-envoyer { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #003da6; color: #fff;
font-size: 1.05rem; cursor: pointer; }
.msg-envoyer:disabled { opacity: .5; }
.msg-joint-apercu { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.msg-joint-apercu img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.msg-joint-apercu span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-joint-apercu button { border: 0; background: #eef3f8; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.msg-vocal-enreg { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; }
.msg-rec { width: 12px; height: 12px; border-radius: 50%; background: #d64545; animation: msgrec 1s infinite; }
@keyframes msgrec { 50% { opacity: .3; } }
.msg-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.msg-personne { margin: 0; }
.msg-personne button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid #e3e8f0;
background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.msg-personne button:hover { border-color: #003da6; }
.msg-filtre { width: 100%; max-width: 420px; }
.msg-membres { border: 0; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
@media (max-width: 700px) {
.page-messagerie { padding-left: 0; padding-right: 0; }
.msg-cadre { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.msg-cote { border-right: 0; background: transparent; }
.msg-cote-tete { padding: 4px 16px 8px; }
.msg-recherche { padding: 0 16px 8px; }
.msg-liste { padding: 0 8px 80px; }
.page-messagerie:not(.msg-avec-fil) .msg-fil-cadre { display: none; }
.msg-avec-fil .msg-cote { display: none; }
.msg-avec-fil .msg-fil-cadre { position: fixed; inset: var(--haut-entete, 56px) 0 var(--h-onglets, 64px) 0; z-index: 20; }
.msg-retour { display: inline-block; }
.msg { max-width: 88%; }
.msg-fil { padding: 10px 10px 8px; }
.msg:hover .msg-suppr { visibility: hidden; }
.msg-choisi .msg-suppr { visibility: visible; }
/* dans une conversation, comme une application de messagerie : pas de barre d'onglets (le rond « Commander »
recouvrait la saisie) ; la conversation va jusqu'en bas de l'ecran */
body:has(.msg-avec-fil) .barre-onglets { display: none; }
.msg-avec-fil .msg-fil-cadre { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0); }
/* le MENU s'ouvre aussi depuis une conversation (proprietaire, 26/10/2026 : « il faut faire retour et ouvrir le
menu ») : la conversation (fixe, z-index 20, plus loin dans la page) passait DEVANT la feuille du menu, enfermee
dans l'en-tete (z-index 20) ; la conversation passe dessous, et la feuille descend jusqu'en bas (pas d'onglets) */
.msg-avec-fil .msg-fil-cadre { z-index: 19; }
body:has(.msg-avec-fil) .entete.menu-ouvert .nav { bottom: 0; }
.msg-nouveaux { bottom: 74px; }
}
/* AGENDA — LE PLAN DE TRAVAIL (25/10/2026, agenda.html, _agenda_*.html) */
.ag-ia .ag-ia-ligne { display: flex; gap: 8px; margin-top: 6px; }
.ag-ia .ag-ia-ligne input { flex: 1 1 auto; min-width: 0; }
#ag-ia-reponse:empty { display: none; }
#ag-ia-reponse { margin-top: 10px; }
.ag-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.ag-barre .onglets { margin: 0; }
.ag-nav { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.ag-titre { font-size: 1.05rem; }
.ag-qui { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--doux, #66718A); }
.ag-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ag-semaine.ag-un-jour { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ag-jour { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; min-height: 180px; display: flex;
flex-direction: column; min-width: 0; }
.ag-jour.passe { background: #fafbfd; }
.ag-jour.auj { border-color: #003da6; box-shadow: 0 0 0 2px rgba(18, 131, 176, .15); }
.ag-jour header { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #eef1f6; }
.ag-jour-nom { font-weight: 700; text-transform: capitalize; }
.ag-jour.auj .ag-jour-nom { color: #003da6; }
.ag-jour-date { color: var(--doux, #66718A); font-size: .84rem; flex: 1 1 auto; }
.ag-ajout { text-decoration: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; color: #003da6; font-weight: 700; }
.ag-ajout:hover { background: #e4eef7; }
.ag-liste { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.ag-rien { margin: 0; color: #c2cad6; text-align: center; }
.ag-evt { position: relative; border-radius: 10px; background: #f4f8fc; border-left: 4px solid #003da6; }
.ag-evt-lien { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; color: inherit; text-decoration: none; }
.ag-evt-heure { font-size: .76rem; font-weight: 700; color: #003da6; }
.ag-evt-titre { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.ag-evt-info { font-size: .76rem; color: var(--doux, #66718A); overflow-wrap: anywhere; }
.ag-evt-gens { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 2px; }
.ag-pers { width: 22px; height: 22px; border-radius: 50%; background: #c9d6e6; color: #0b2a5c; font-size: .68rem; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ag-pers.ok { background: #1597d4; color: #fff; }
.ag-evt.ag-g-visite { border-left-color: #1597d4; background: #f0faf9; }
.ag-evt.ag-g-visite .ag-evt-heure { color: #1d8f87; }
.ag-evt.ag-g-livraison { border-left-color: #e3a008; background: #fffaf0; }
.ag-evt.ag-g-livraison .ag-evt-heure { color: #b07c00; }
.ag-evt.ag-g-rdv { border-left-color: #0b2a5c; }
.ag-evt.ag-g-rdv .ag-evt-heure { color: #0b2a5c; }
.ag-evt.ag-g-appel { border-left-color: #7b61c9; background: #f6f3fd; }
.ag-evt.ag-g-appel .ag-evt-heure { color: #6249b3; }
.ag-evt.fait { opacity: .6; }
.ag-evt.fait .ag-evt-titre { text-decoration: line-through; }
.ag-evt.retard { border-left-color: #d64545; background: #fff5f5; }
.ag-coche { position: absolute; top: 4px; right: 6px; margin: 0; font-size: .74rem; }
.ag-coche label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; color: var(--doux, #66718A); }
.ag-evt:has(.ag-coche) .ag-evt-lien { padding-right: 52px; }
.ag-retard { border-left: 4px solid #d64545; }
.ag-retard h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.ag-retard .ag-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 0; }
.ag-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-mois-tete { font-size: .78rem; font-weight: 700; color: var(--doux, #66718A); text-transform: capitalize; padding: 2px 6px; }
.ag-case { min-height: 92px; background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; padding: 5px 6px;
display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.ag-case.hors { background: #f7f9fc; opacity: .6; }
.ag-case.auj { border-color: #003da6; }
.ag-case.auj .ag-num { background: #003da6; color: #fff; }
.ag-num { align-self: flex-start; font-size: .8rem; font-weight: 700; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; }
.ag-puce { font-size: .7rem; padding: 1px 5px; border-radius: 5px; background: #e4eef7; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.ag-puce.ag-g-visite { background: #dff3f1; }
.ag-puce.ag-g-livraison { background: #fdf1d8; }
.ag-puce.fait { opacity: .55; text-decoration: line-through; }
.ag-fenetre { min-width: 0; }
.ag-fiche-quand { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 4px; color: var(--doux, #66718A); }
.ag-fiche-titre { margin: 0 0 10px; }
.ag-fiche { display: grid; gap: 6px; margin: 0 0 10px; }
.ag-fiche > div { display: flex; gap: 12px; }
.ag-fiche dt { min-width: 80px; color: var(--doux, #66718A); }
.ag-fiche dd { margin: 0; }
.ag-details { white-space: pre-wrap; }
.ag-sous { margin: 12px 0 6px; font-size: .9rem; color: var(--doux, #66718A); }
.ag-personnes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ag-personnes li { display: flex; gap: 8px; align-items: flex-start; }
.ag-fait-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; border-radius: 10px;
background: #f4f8fc; margin: 6px 0 10px; }
.ag-fait-form input[type=text] { flex: 1 1 240px; min-width: 0; }
.ag-fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-fiche-actions form { margin: 0; }
.ag-form .ag-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ag-form .ag-large input, .ag-form .ag-large textarea { width: 100%; }
.ag-gens { border: 0; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.ag-gens legend { font-weight: 600; margin-bottom: 4px; }
.ag-form-pied { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 1100px) {
.ag-semaine { grid-template-columns: minmax(0, 1fr); }
.ag-jour { min-height: 0; }
.ag-jour.vide .ag-liste { display: none; }
.ag-jour.vide header { border-bottom: 0; }
}
@media (max-width: 700px) {
.ag-ia .ag-ia-ligne { flex-direction: column; }
.ag-nav { flex-basis: 100%; }
.ag-qui { flex-basis: 100%; }
.ag-qui select { flex: 1 1 auto; }
.ag-case { min-height: 58px; padding: 3px; }
.ag-puce { display: none; }
.ag-case:has(.ag-puce) .ag-num::after { content: ""; position: absolute; }
.ag-case:has(.ag-puce) { background: #eef6fb; }
}
/* menu : « Messages » seulement dans le menu du telephone (sur ordinateur : l'icone bulle de l'en-tete) — 25/10/2026 */
@media (min-width: 701px) { .nav a.nav-tel-seul { display: none; } }
/* APPELS AUDIO (25/10/2026, messagerie.js) : ecran d'appel */
.msg-appeler { color: #003da6; }
.appel-ecran { border: 0; border-radius: 22px; padding: 0; width: min(360px, 92vw); background: linear-gradient(160deg, #0b2a5c, #003da6);
color: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.appel-ecran::backdrop { background: rgba(10, 18, 40, .55); }
.appel-corps { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px 24px; text-align: center; }
.appel-avatar { width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex;
align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; margin-bottom: 6px; }
.appel-ecran.entrant .appel-avatar { animation: appelpulse 1.4s infinite; }
@keyframes appelpulse { 0% { box-shadow: 0 0 0 0 rgba(43, 178, 168, .7); } 70% { box-shadow: 0 0 0 22px rgba(43, 178, 168, 0); }
100% { box-shadow: 0 0 0 0 rgba(43, 178, 168, 0); } }
.appel-nom { font-size: 1.3rem; }
.appel-etat { opacity: .85; }
.appel-chrono { font-variant-numeric: tabular-nums; font-size: 1.1rem; min-height: 1.4em; }
.appel-boutons { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.appel-boutons button { border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer;
color: #fff; min-width: 110px; }
.appel-decrocher { background: #1fa463; }
.appel-refuser, .appel-raccrocher { background: #d64545; }
.appel-muet { background: rgba(255, 255, 255, .2); }
.appel-muet.coupe { background: #fff; color: #0b2a5c; }
.appel-ecran .appel-decrocher, .appel-ecran .appel-refuser { display: none; }
.appel-ecran.entrant .appel-decrocher, .appel-ecran.entrant .appel-refuser { display: inline-block; }
.appel-ecran.entrant .appel-raccrocher, .appel-ecran.entrant .appel-muet { display: none; }
.appel-ecran:not(.en-cours) .appel-muet { display: none; }
.appel-ecran.termine .appel-boutons { visibility: hidden; }
/* LOCALISATION DE L'EQUIPE (25/10/2026, gps.html, gps.js) */
.gps-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.gps-cadre { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.gps-carte { height: calc(100vh - 260px); min-height: 420px; border-radius: 14px; border: 1px solid #e3e8f0; z-index: 0; }
.gps-liste { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 260px); overflow-y: auto; }
.gps-personne { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.gps-personne:hover, .gps-personne.actif { background: #eef3f8; }
.gps-point { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #8a94a6; }
.gps-point.frais { background: #1fa463; }
.gps-point.recent { background: #e3a008; }
.gps-nom { font-weight: 700; font-size: .78rem; }
.gps-reglages .champ { margin: 4px 0; }
.gps-blocage { position: fixed; inset: 0; z-index: 3000; background: rgba(13, 22, 48, .82); display: flex; align-items: center;
justify-content: center; padding: 20px; }
.gps-blocage-boite { background: #fff; border-radius: 16px; padding: 22px; max-width: 420px; display: grid; gap: 10px; }
.gps-blocage-boite strong { font-size: 1.15rem; }
.gps-blocage-boite p { margin: 0; }
.gps-info { position: fixed; left: 12px; right: 12px; bottom: calc(var(--h-onglets, 0px) + 12px); z-index: 2500;
max-width: 560px; margin: 0 auto; background: #0b2a5c; color: #fff; border-radius: 12px; padding: 10px 12px;
display: flex; gap: 10px; align-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-size: .9rem; }
.gps-info span { flex: 1 1 auto; }
@media (max-width: 900px) {
.gps-cadre { grid-template-columns: minmax(0, 1fr); }
.gps-carte { height: 60vh; min-height: 320px; }
.gps-liste { max-height: none; }
}
/* PORTAIL MULTI-BASES (bases_choisir.html, 25/10/2026) : « Dans quelle societe ? » */
.bases-choix { max-width: 560px; margin: 24px auto; }
.bases-liste { display: grid; gap: 10px; margin-top: 14px; }
.bases-liste form { margin: 0; }
.bases-carte { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
border: 1px solid #e3e8f0; background: #fff; text-align: left; cursor: pointer; font: inherit; color: #0b2a5c; }
.bases-carte:hover { border-color: #003da6; box-shadow: 0 4px 14px rgba(18, 131, 176, .12); }
.bases-ici { border-color: #1597d4; }
.bases-initiale { width: 42px; height: 42px; border-radius: 50%; background: #0b2a5c; color: #fff; display: flex;
align-items: center; justify-content: center; font-weight: 700; flex: none; }
/* l'icone de chaque societe (26/10/2026 : « ajouter les logos ici ») : celle de son application */
.bases-logo { width: 46px; height: 46px; border-radius: 12px; flex: none; object-fit: cover;
box-shadow: 0 1px 3px rgba(16, 28, 64, .18); }
.bases-texte { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bases-fleche { font-size: 1.4rem; color: #8a94a6; }
/* MULTI-BASES (25/10/2026) : « Changer de societe », compte principal seul — dans le menu juste avant Deconnexion
(meme carte, classe nav-sortie), et dans l'en-tete sur ordinateur */
.nav-changer-ici { display: block; font-size: .78rem; font-weight: 500; opacity: .75; }
.btn-societe { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 19px;
border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none;
white-space: nowrap; }
.btn-societe:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 1599px) { .btn-societe { width: 38px; padding: 0; justify-content: center; } .btn-societe-nom { display: none; }
/* la place du bouton : Deconnexion en icone (comme de 1101 a 1279 px) */
.entete:has(.btn-societe) .sortie-large .texte-sortie { display: none; }
.entete:has(.btn-societe) .sortie-large .icone-sortie { display: block; } }
@media (min-width: 1101px) and (max-width: 1279px) { .entete:has(.btn-societe) .nav a { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 700px) {
.btn-societe { display: none; }
.nav-changer button { color: var(--marine); grid-template-columns: 36px 1fr; }
.nav-changer button::before { background: var(--surface-2)
url("data:image/svg+xml;utf8,")
center / 18px no-repeat; }
.nav-changer .nav-changer-ici { color: var(--doux); opacity: 1; }
}
/* PORTAIL MULTI-BASES : carte « Societes » de Parametres (_bases_reglages.html) */
.bases-ligne { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #e3e8f0; }
.bases-action { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.bases-action input { width: 130px; }
.bases-ajout { margin-top: 12px; }
.bases-ajout summary { cursor: pointer; }
.bases-vpn { margin: 6px 0 6px 26px; padding-left: 10px; border-left: 3px solid #e3e8f0; }
/* ============ AGENDA : ECHEANCES ET PAIEMENTS (agenda_finances.py, 26/10/2026) ============
vert = ce qui entre (traites, cheques, virements attendus), rouge = ce qui sort (paiements, charges fixes) ;
une ligne par echeance, un etat par couleur. Charge apres la page (htmx, hors-bande). */
.ag-fin { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.ag-fin:empty { display: none; }
.ag-jour:has(.ag-fin:not(:empty)) .ag-rien { display: none; }
.ag-fin-g { border-radius: 10px; background: #f3faf6; border-left: 4px solid #2e9e5b; }
.ag-fin-g.sortie { background: #fdf4f4; border-left-color: #c62828; }
.ag-fin-g > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px;
padding: 6px 9px; font-size: .8rem; }
.ag-fin-g > summary::-webkit-details-marker { display: none; }
.ag-fin-g > summary::after { content: "›"; margin-left: auto; color: var(--doux, #66718A); transition: transform .15s; }
.ag-fin-g[open] > summary::after { transform: rotate(90deg); }
.ag-fin-t { font-weight: 700; color: #1f7a45; }
.ag-fin-g.sortie .ag-fin-t { color: #a12020; }
.ag-fin-n { font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #0b2a5c; }
.ag-fin-m { font-size: .82rem; white-space: nowrap; }
.ag-fin-x { display: grid; gap: 1px; padding: 6px 9px; border-top: 1px solid rgba(28, 44, 96, .07); color: inherit;
text-decoration: none; font-size: .78rem; }
.ag-fin-x:hover { background: rgba(255, 255, 255, .6); }
.ag-fin-x-t { font-weight: 600; overflow-wrap: anywhere; }
.ag-fin-x-q { color: var(--doux, #66718A); overflow-wrap: anywhere; }
.ag-fin-x-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ag-fin-x-b strong { white-space: nowrap; }
.ag-fin-x-d { color: var(--doux, #66718A); font-size: .74rem; }
.ag-fin-etat { font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #e4eef7; color: #003795;
white-space: nowrap; }
.ag-fin-x.e-encaissee .ag-fin-etat { background: #dff3e7; color: #1f7a45; }
.ag-fin-x.e-impayee .ag-fin-etat { background: #fde3e3; color: #a12020; }
.ag-fin-x.e-attente .ag-fin-etat { background: #fdf0dc; color: #a35f00; }
.ag-fin-x.e-probable .ag-fin-etat { background: #f1ecfb; color: #6249b3; }
.ag-fin-x.e-fixe .ag-fin-etat, .ag-fin-x.e-estimee .ag-fin-etat { background: #eef1f6; color: #4a556e; }
.ag-fin-mois { display: flex; flex-wrap: wrap; gap: 2px; }
.ag-fin-mois:empty { display: none; }
.ag-fin-p { font-size: .66rem; font-weight: 700; padding: 0 4px; border-radius: 5px; white-space: nowrap; }
.ag-fin-p.entree { background: #dff3e7; color: #1f7a45; }
.ag-fin-p.sortie { background: #fde3e3; color: #a12020; }
.ag-fin-alertes { border-left: 4px solid #e08a1e; margin: 14px 0; } /* jamais colle au cadre de l'IA (26/10) */
.ag-fin-alertes h2 { margin: 0 0 6px; font-size: 1rem; }
.ag-fin-alertes-l { display: grid; gap: 6px; }
.ag-fin-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 10px;
border-radius: 10px; background: #fffaf2; color: inherit; text-decoration: none; }
.ag-fin-a-m { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.ag-fin-bascule { font-size: .82rem; white-space: nowrap; }
@media (max-width: 700px) {
.ag-jour.vide:has(.ag-fin:not(:empty)) header { border-bottom: 1px solid #eef1f6; }
.ag-jour.vide:has(.ag-fin:not(:empty)) .ag-fin { padding-top: 8px; }
.ag-fin-p { font-size: .6rem; padding: 0 2px; }
.ag-fin-bascule { flex: 1 1 100%; }
}