:root{ color-scheme:light; --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --bg:#dadeeb;--bg3:rgba(255,255,255,.5); --bgmesh:radial-gradient(115% 80% at 6% -12%, oklch(0.8 0.08 268 / .95) 0%, transparent 60%), radial-gradient(100% 68% at 100% 4%, oklch(0.82 0.09 300 / .8) 0%, transparent 62%), radial-gradient(85% 58% at 58% 112%, oklch(0.85 0.05 240 / .7) 0%, transparent 64%),#dadeeb; --surf:rgba(255,255,255,.82);--surf2:rgba(255,255,255,.58); --line:rgba(22,28,50,.11);--line2:rgba(22,28,50,.2); --t1:#0d1018;--t2:#333a4a;--t3:#474d5f; --ac:oklch(0.5 0.16 292);--ac2:oklch(0.42 0.15 292);--acl:oklch(0.5 0.16 292 / .1); --grl:oklch(0.58 0.15 165 / .13);--gr-tx:oklch(0.45 0.12 165); --rd:oklch(0.58 0.16 25);--rdl:oklch(0.58 0.16 25 / .12); --am:#a06b3a;--aml:rgba(160,107,58,.14); --sh:inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 4px -1px rgba(20,26,44,.16), 0 18px 32px -20px rgba(20,26,44,.36); --shp:0 14px 30px -22px rgba(26,32,52,.5), inset 0 1px 0 #fff; --r:16px;--rl:18px;--rm:14px;--rxl:26px;--blur:blur(22px) saturate(1.5); } /* ════════════════════════════════════════════════════════════════════════════ LES QUATRE THÈMES (2026-09-07) — au NIVEAU DES JETONS, comme chez HUBS. Aucun composant n'est restylé : tout ce qui précède et tout ce qui suit lit les mêmes variables, donc suit le thème sans une ligne de plus. ⚠ « :root » ci-dessus EST le thème « fluid », et il le reste : c'est ce que tout le monde voyait avant cette migration, et un thème par défaut différent aurait changé l'apparence de tous sans que personne l'ait demandé. ⚠ VALEURS RECOPIÉES de hubs-server/frontend/src/theme.css, blocs [data-theme="dark"|"light"|"neo"]. MÊME DUPLICATION ASSUMÉE qu'au-dessus, et même clés : recopier une palette corrigée là-bas ne doit jamais demander de traduire un sélecteur au passage. ════════════════════════════════════════════════════════════════════════════ */ /* Clair — fond grège à mesh menthe/pêche, cartes blanches, encre vert-noir. */ [data-theme="light"]{ color-scheme:light; --bg:#e8e6e0;--bg3:#eeece6; --bgmesh:radial-gradient(110% 70% at 6% -8%, oklch(0.88 0.07 165 / .85) 0%, transparent 58%), radial-gradient(100% 60% at 100% 0%, oklch(0.9 0.05 60 / .8) 0%, transparent 60%),#e8e6e0; --surf:#fdfdfa;--surf2:#f0efe9; --line:rgba(20,28,24,.1);--line2:rgba(20,28,24,.18); --t1:#0f1513;--t2:#59635e;--t3:#5a635d; --ac:#12352a;--ac2:#0b2119;--acl:rgba(18,53,42,.09); --grl:oklch(0.58 0.15 165 / .13);--gr-tx:oklch(0.47 0.13 165); --rd:oklch(0.58 0.16 25);--rdl:oklch(0.58 0.16 25 / .12); --am:#a06b3a;--aml:rgba(160,107,58,.15); --sh:inset 0 0 0 1px rgba(255,255,255,.62), 0 2px 4px -1px rgba(24,32,28,.16), 0 26px 44px -26px rgba(24,32,28,.4); --shp:0 14px 30px -22px rgba(30,40,35,.5), inset 0 1px 0 #fff; --r:16px;--rl:18px;--rm:13px;--rxl:26px;--blur:none; } /* Sombre — noir bleuté à lueurs, surfaces translucides, accent violet. */ [data-theme="dark"]{ color-scheme:dark; --bg:#080c10;--bg3:#0d1218; --bgmesh:radial-gradient(120% 80% at 8% -10%, oklch(0.55 0.14 165 / .55) 0%, transparent 60%), radial-gradient(110% 70% at 100% 6%, oklch(0.48 0.15 290 / .48) 0%, transparent 62%),#080c10; --surf:rgba(255,255,255,.055);--surf2:rgba(255,255,255,.09); --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.15); --t1:#f6faf8;--t2:rgba(255,255,255,.62);--t3:rgba(255,255,255,.61); --ac:oklch(0.58 0.17 290);--ac2:oklch(0.5 0.17 290);--acl:oklch(0.58 0.17 290 / .16); --grl:oklch(0.86 0.17 165 / .14);--gr-tx:oklch(0.86 0.17 165); --rd:#e0705e;--rdl:rgba(224,112,94,.14); --am:#e3b551;--aml:rgba(227,181,81,.16); --sh:inset 0 1px 0 rgba(255,255,255,.12), 0 22px 40px -30px rgba(0,0,0,.9); --shp:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 48px -32px rgba(0,0,0,.95); --blur:none; } /* Néo — monochrome gris-bleu où le RELIEF remplace bordures et aplats. */ [data-theme="neo"]{ color-scheme:light; --bg:#e3e7ee;--bg3:#e9edf3; --bgmesh:#e3e7ee; --surf:#e3e7ee;--surf2:#e9edf3; --line:rgba(47,56,68,.07);--line2:rgba(47,56,68,.13); --t1:#2f3844;--t2:#5f6877;--t3:#606875; --ac:oklch(0.55 0.17 290);--ac2:oklch(0.48 0.17 290);--acl:oklch(0.55 0.17 290 / .13); --grl:rgba(63,125,99,.16);--gr-tx:#1f4436; --rd:oklch(0.62 0.16 20);--rdl:oklch(0.62 0.16 20 / .13); --am:#a06b3a;--aml:rgba(160,107,58,.16); /* ⚠ LE RELIEF EST LE THÈME : deux ombres opposées, pas une bordure. */ --sh:6px 6px 12px #c5cad3, -6px -6px 12px #ffffff; --shp:9px 9px 18px #c5cad3, -9px -9px 18px #ffffff; --r:18px;--rl:20px;--rm:14px;--rxl:28px;--blur:none; } /* ⚠ LE FLOU NE S'ALLUME QUE SUR « fluid ». Ailleurs « --blur:none » le rend inerte — mais « backdrop-filter:none » reste un coût de composition sur certains navigateurs, alors on ne le pose plus du tout. */ [data-theme="light"] .tete,[data-theme="dark"] .tete,[data-theme="neo"] .tete, [data-theme="light"] .formulaire,[data-theme="dark"] .formulaire,[data-theme="neo"] .formulaire{ backdrop-filter:none;-webkit-backdrop-filter:none; } *{box-sizing:border-box} body{margin:0;min-height:100vh;font-family:var(--f-body);font-size:15px;line-height:1.55; color:var(--t1);background:var(--bg);overflow-x:hidden;display:flex;flex-direction:column} body::before{content:'';position:fixed;inset:0;z-index:0;background:var(--bgmesh);pointer-events:none} /* ── En-tête ─────────────────────────────────────────────────────────────── */ .tete{position:relative;z-index:1;display:flex;align-items:center;gap:16px; padding:11px 20px;border-bottom:1px solid var(--line);background:var(--surf); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--t1)} .logo{display:grid;place-items:center;width:32px;height:32px;border-radius:11px; background:var(--acl);color:var(--ac);flex:none} .logo.grand{width:52px;height:52px;border-radius:17px;margin:0 auto 14px} .mot{font-weight:700;font-size:17px;letter-spacing:-.02em} .mot b{color:var(--ac);font-weight:800} .fin{margin-left:auto;display:flex;align-items:center;gap:9px} /* Le bouton de profil : photo + nom, cliquable, vers sa propre fiche. */ .profil{display:flex;align-items:center;gap:9px;padding:4px 13px 4px 4px;border-radius:22px; background:var(--bg3);border:1px solid var(--line);text-decoration:none;color:var(--t1); max-width:230px;transition:background .15s,border-color .15s} .profil:hover{background:var(--surf);border-color:var(--line2)} .profil-txt{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} button.profil{font:inherit;cursor:pointer} .profil-fleche{font-size:11px;color:var(--t2)} /* ── LE MENU DE PROFIL (lot 2 du 11/09) ────────────────────────────────────── ⚠ SANS SCRIPT : popover natif. Tout ce qui ne vaut que pour le menu OUVERT se déclare sous :popover-open — sans popover, le menu reste déplié dans le bandeau, moins joli mais entier (même règle que le panneau du lot 1). ⚠ ANCRÉ AU COIN HAUT-DROIT, jamais au centre : il grandit depuis son déclencheur. ⚠ « SE DÉCONNECTER » À L'ENCRE, L'ICÔNE SEULE EN ROUGE : le rouge mesuré sur la surface (4,41:1 en fluid) est sous le seuil AA d'un texte de 13,5 px. */ .menu-profil:popover-open{position:fixed;inset:auto;top:62px;right:16px;margin:0; width:min(300px,calc(100vw - 32px));padding:6px;border:1px solid var(--line); border-radius:var(--rl);color:var(--t1); background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--sh2,var(--sh)); transform-origin:top right; transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1)} @starting-style{.menu-profil:popover-open{opacity:0;transform:scale(.97)}} .mp-qui{display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px; border-bottom:1px solid var(--line)} .mp-qui strong{font-size:14.5px;color:var(--t1)} .mp-adr,.mp-ctx{font-size:12.5px;color:var(--t2)} .mp-groupe{margin:0;padding:10px;border-bottom:1px solid var(--line)} .menu-profil > .mp-groupe:last-child{border-bottom:none} .mp-titre{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--t2)} .mp-themes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px} .mp-theme{font:inherit;font-size:13px;font-weight:650;padding:8px 10px;text-align:start; border:1px solid var(--line2);border-radius:var(--rm);background:var(--bg3);color:var(--t1); cursor:pointer} .mp-theme.on{border-color:var(--ac);background:var(--acl)} .mp-lien{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:12px 10px;border-bottom:1px solid var(--line);color:var(--t1); text-decoration:none;font-size:13.5px;font-weight:650} .mp-sortie{display:flex;align-items:center;gap:8px;width:100%;padding:2px 0;border:none; background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--t1);cursor:pointer} .mp-sortie svg{color:var(--rd)} @media (hover:hover) and (pointer:fine){ .mp-lien:hover,.mp-theme:not(.on):hover{background:var(--surf2)} } @media (prefers-reduced-motion:reduce){ .menu-profil:popover-open{transform:none;transition:opacity .15s ease} @starting-style{.menu-profil:popover-open{transform:none}} } @media (max-width:720px){.profil-fleche{display:none}} main{position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto; padding:22px 18px 64px;flex:1} /* ── Onglets — des LIENS, pas des boutons ────────────────────────────────── */ .atabs{display:flex;gap:5px;margin:0 0 22px;padding:5px;border-radius:var(--r); background:var(--surf2);border:1px solid var(--line);overflow-x:auto; scrollbar-width:none;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .atabs::-webkit-scrollbar{display:none} .atab{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 15px; border-radius:12px;text-decoration:none;color:var(--t2);font-size:13.5px;font-weight:700; white-space:nowrap;transition:background .15s,color .15s} .atab:hover{color:var(--t1)} .atab.on{background:var(--surf);color:var(--ac);box-shadow:var(--sh)} /* ⚠ Grisé, pas masqué : ça enseigne ce qui vient. */ .atab.bientot{opacity:.42;cursor:default} /* ⚠ « Réglages » est poussé tout à droite, et séparé : ce n'est pas une destination de plus dans le flux de travail, c'est l'endroit où l'on va rarement, pour configurer. La distance le dit sans qu'on l'écrive. ⚠ La classe s'appelle « pousse » et non « fin » : .fin désigne déjà le bloc de droite de l'en-tête, et deux règles homonymes se seraient appliquées à la même balise — le genre de collision de cascade qui ne casse rien franchement et déplace tout d'un cheveu. */ .atab.pousse{margin-left:auto} /* Sous-onglets — plus discrets que le menu principal : ils sont subordonnés, la hiérarchie doit se voir. */ .stabs{display:flex;gap:4px;margin:-12px 0 22px;padding:0 4px;overflow-x:auto; scrollbar-width:none} .stabs::-webkit-scrollbar{display:none} .stabs .atab{padding:8px 13px;font-size:13px;border-radius:11px;box-shadow:none} .stabs .atab.on{background:var(--acl);color:var(--ac);box-shadow:none} /* ── Titres de section ───────────────────────────────────────────────────── */ /* ⚠ UN BLOC, PLUS UN FLEX (typographie, 11/09). Le filet est un inline-block de toute la largeur, qui ne compte pour rien dans la ligne (marge droite de −100 %) et que le bloc rogne : il suit le texte, même replié sur deux lignes. ⚠ CASSE DU 15/09 : plus de majuscule initiale au rendu — le titre s'affiche comme il est écrit, en minuscules (typographie.md, en tête). */ .sec-title{display:block;overflow:hidden;font-size:13px;font-weight:700;color:var(--t2); margin:26px 4px 12px} .sec-title::after{content:'';display:inline-block;vertical-align:middle;width:100%;height:1px; margin:0 -100% 0 12px;background:linear-gradient(90deg,var(--line2),transparent)} /* ── Tuiles de statistiques ──────────────────────────────────────────────── */ .tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px} /* 24 px 20 px : « pas assez de padding » (Olivier, 11/09, fiche d'une commande). */ .tuile{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl); padding:24px 20px;box-shadow:var(--sh);text-align:center; backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .chiffre{display:block;font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.03em; color:var(--t1);font-variant-numeric:tabular-nums} .chiffre i{font-style:normal;font-size:17px;font-weight:700;color:var(--am)} .tlab{display:block;margin-top:6px;font-size:12.5px;color:var(--t3);font-weight:600} /* ── Tuiles-LIENS de l'écran Argent ────────────────────────────────────────── ⚠ CHAQUE TUILE EST UN LIEN, PAS UN ENCART. Elle doit donc se VOIR cliquable au repos (pas seulement au survol : sur tablette il n'y a pas de survol) — d'où la pastille d'icône colorée, qui sert d'affordance autant que de repère. ⚠ ET LA TUILE ACTIVE DOIT SE DISTINGUER SANS LA COULEUR SEULE : elle prend un contour ET un fond. Huit tuiles dont l'une n'est marquée que par une teinte, c'est un écran qu'un daltonien lit à l'envers. */ .ktuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px} /* ⚠ DEUX RANGEES SEPAREES, PAS UN FLUX QUI SE REPLIE. Les huit tuiles en un seul grid se cassaient en 6 + 2 selon la largeur : les trois lectures de FACTURES se retrouvaient a cheval sur deux lignes, sans rapport visible entre elles. Le cycle d'un cote, les factures de l'autre — le groupement est ce qu'on lit avant les chiffres. */ .ktuiles.cinq{grid-template-columns:repeat(5,1fr)} .ktuiles.trois{grid-template-columns:repeat(3,1fr);max-width:63%} .ktuile{position:relative;display:block;text-decoration:none;background:var(--surf); border:1px solid var(--line);border-radius:var(--rl);padding:15px 15px 13px; box-shadow:var(--sh);transition:transform .12s,border-color .15s,box-shadow .15s; backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .ktuile:hover{transform:translateY(-2px);box-shadow:var(--sh2,var(--sh))} .ktuile:active{transform:translateY(0)} .kico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;margin-bottom:11px} .kfig{display:block;font-weight:800;font-size:23px;line-height:1.05;letter-spacing:-.03em; color:var(--t1);font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .klab{display:block;margin-top:5px;font-size:12.5px;font-weight:650;color:var(--t2); line-height:1.3} .ksub{display:block;margin-top:2px;font-size:11.5px;color:var(--t3); font-variant-numeric:tabular-nums} /* R6-3 (15/09) : ce qui vit a part, hors de la somme. Les lignes de la tuile payee restent petites ; la ligne des orphelins porte sa pastille, pour se lire sans compter sur la couleur. */ .kext{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:var(--t3);font-variant-numeric:tabular-nums} .korph{margin:10px 4px 0;font-size:12.5px;line-height:1.45;color:var(--t2);font-variant-numeric:tabular-nums} .korph strong{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%; background:var(--aml);color:var(--am);font-size:11.5px;vertical-align:1px} .kaide{margin:0 4px 10px} /* Les quatre tons. Ils colorent la PASTILLE, pas le fond de la tuile : huit cartes pleines de couleur se neutraliseraient les unes les autres. */ .ktuile.t-ac .kico{background:var(--acl);color:var(--ac)} .ktuile.t-gr .kico{background:var(--grl);color:var(--gr-tx)} .ktuile.t-am .kico{background:var(--aml);color:var(--am)} .ktuile.t-rd .kico{background:var(--rdl);color:var(--rd)} .ktuile.on{border-color:currentColor} .ktuile.t-ac.on{color:var(--ac);background:var(--acl)} .ktuile.t-gr.on{color:var(--gr-tx);background:var(--grl)} .ktuile.t-am.on{color:var(--am);background:var(--aml)} .ktuile.t-rd.on{color:var(--rd);background:var(--rdl)} /* ⚠ Le fond teinté ne doit pas emporter le TEXTE avec lui : le chiffre reste à l'encre normale, sinon la tuile active devient la moins lisible des huit. */ .ktuile.on .kfig{color:var(--t1)} .ktuile.on .klab{color:var(--t2)} .ktuile.on .kico{background:var(--surf)} /* ── Rangée de pastilles ─────────────────────────────────────────────────── */ .chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px; padding:11px 16px;border-radius:var(--rl);background:var(--surf); border:1px solid var(--line);box-shadow:var(--sh); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px; background:var(--bg3);border:1px solid var(--line);font-size:12.5px;color:var(--t2)} .chip b{font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums} .chip.att{background:var(--aml);border-color:transparent;color:var(--am)} .chip.att b{color:var(--am)} .chip.non{background:var(--rdl);border-color:transparent;color:var(--rd)} .chip.non b{color:var(--rd)} .chips-fin{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.12em; color:var(--t3)} /* ── Rang de chiffres (écran Identités, lot 3 du 11/09) ────────────────────── ⚠ UN SEUL CONTENANT POUR UN SEUL SUJET. Quatre tuiles puis une bande de pastilles se lisaient comme deux sujets : ici une carte, des cellules, un filet. Ce ne sont PAS des liens (≠ .ktuile) : aucun survol, aucun mouvement — une carte qui réagirait promettrait un clic qui n'existe pas. ⚠ LE FILET EST UNE OMBRE d'un pixel vers le haut et la gauche, rognée par la carte : il suit le repli 6 → 3 → 2 sans une règle par largeur. */ .rang{display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden; background:var(--surf);border:1px solid var(--line);border-radius:var(--rl); box-shadow:var(--sh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .rcel{min-width:0;padding:14px 16px 13px;box-shadow:-1px -1px 0 var(--line)} .rfig{display:block;font-weight:800;font-size:24px;line-height:1.05;letter-spacing:-.03em; color:var(--t1);font-variant-numeric:tabular-nums} /* Le dénominateur n'est pas une alerte : --t2, pas l'ambre de .chiffre i. */ .rfig i{font-style:normal;font-size:15px;font-weight:700;color:var(--t2)} .rlab{display:block;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--t2); line-height:1.3} .rcel.att .rfig{color:var(--am)} .rcel.non .rfig{color:var(--rd)} /* ⚠ JAMAIS 5 + 1 : la cellule orpheline se lirait comme un autre sujet. */ @media(max-width:900px){.rang{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.rang{grid-template-columns:repeat(2,1fr)}.rcel{padding:12px 13px 11px}} /* ── Listes ──────────────────────────────────────────────────────────────── */ .list{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl); overflow:hidden;box-shadow:var(--sh); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .li{display:flex;align-items:center;gap:14px;padding:13px 18px; border-bottom:1px solid var(--line)} .li:last-child{border-bottom:0} .li.vide{color:var(--t3);font-size:14px;justify-content:center;padding:26px} /* ── LE TABLEAU (2026-09-07) — pour les listes longues ─────────────────────── ⚠ UNE GRILLE, ET LES MÊMES COLONNES POUR L'EN-TÊTE ET LES LIGNES. La liste précédente empilait nom et courriel, puis laissait pastilles et chiffres flotter après un contenu de largeur variable : d'une ligne à l'autre rien ne tombait au même endroit, et la hauteur changeait avec le nombre de rôles. Aligner les colonnes est ce qui rend deux lignes COMPARABLES. ⚠ HAUTEUR FIXE, ET CE N'EST PAS COSMÉTIQUE : elle rend le défilement prévisible et empêche qu'un tiers à trois rôles pousse ses voisins. Ce qui déborde est coupé proprement, jamais renvoyé à la ligne. */ .tab{--cols:minmax(0,1fr) 92px 190px 62px 132px 26px; background:var(--surf);border:1px solid var(--line);border-radius:var(--rxl); box-shadow:var(--sh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); overflow:hidden} .tab-tete,.tab-l{display:grid;grid-template-columns:var(--cols);align-items:center; gap:12px;padding:0 18px} .tab-tete{height:34px;font-size:12px;font-weight:600;color:var(--t2); border-bottom:1px solid var(--line2)} /* ⚠ UN EN-TETE NE SE REPLIE JAMAIS. La regle .tab-tete a une hauteur FIXE de 34 px : un libelle trop long y passait a la ligne et se faisait COUPER par le haut, illisible — vu sur la colonne des stocks du catalogue, dont le titre tenait cinq mots. La regle vaut pour tous les ecrans, presents et a venir : ce qui ne tient pas se coupe proprement, et surtout le libelle doit etre COURT (la legende, elle, a sa place sous le titre de section). */ .tab-tete>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .tab-l{height:46px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--t1)} .tab-l:last-child{border-bottom:0} .tab-l:hover{background:var(--surf2)} .tab-l.vide{display:flex;justify-content:center;color:var(--t3);font-size:14px;height:64px} /* ⚠ UN MIN-WIDTH NUL SUR CHAQUE CELLULE : sans lui, une grille refuse de réduire un enfant en dessous de son contenu, et la colonne du nom pousse tout le reste hors de l'écran au lieu de tronquer. */ .tab-l > *,.tab-tete > *{min-width:0;overflow:hidden} .tab-l .d,.tab-tete .d{text-align:right;justify-self:end} /* ⚠ UN TITRE SE PLACE COMME SON CONTENU (typographie, 11/09 ; arbitrages xiv et xv). · TEXTE (nom, client, type) : titre et contenu à gauche. Tous les titres centrés, un titre tombait au-dessus d'un texte calé à gauche et ne désignait plus sa colonne. · COURTES et pastilles (« c » : état, boutique, quantité, date, compte) : titre et contenu centrés — ce qu'Olivier demandait (« les titres ne sont pas centrés »). · MONTANTS (« d ») : chiffres collés à droite, on les compare ; titre centré (xiv). « span.d » l'emporte sur « .tab-tete .d ». */ .tab-tete > span.d,.tab-tete > span.c{justify-self:stretch;text-align:center} .tab-l > .c{justify-self:center;text-align:center} .tab-nom{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.25} .tab-nom strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .tab-nom .sub{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .tab-roles{display:flex;align-items:center;gap:6px;overflow:hidden} .tab-l .num{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;white-space:nowrap} .tab-l .num.vide{color:var(--t3);font-weight:500} .tab-roles .badge{padding:2px 9px;font-size:11px;flex:none;white-space:nowrap} /* ⚠ CHAQUE ÉCRAN DÉCLARE SES COLONNES ICI, ET NULLE PART AILLEURS. La CSP est style-src 'self' : un style en ligne serait ignoré EN SILENCE, et la grille retomberait sur une colonne unique sans que rien ne le dise. */ .t-tiers{--cols:minmax(0,1fr) 92px 190px 62px 132px 26px} .t-pieces{--cols:minmax(0,1.2fr) 96px minmax(0,1fr) 108px 116px 26px} .t-achats{--cols:minmax(0,1.2fr) 128px minmax(0,1fr) 108px 116px 26px} .t-argent{--cols:minmax(0,1fr) minmax(0,1fr) 130px 170px 110px 26px} .t-catalogue{--cols:minmax(0,1fr) 84px 140px 160px 104px 62px 26px} /* 055 : les références d'achat. ⚠ CALQUÉE LE 30/10 SUR LA PAGE « FOURNITURES » DE LA CONSOLE (Olivier : « calquées, pas seulement inspirées » ; hubs-admin frontend/src/catalogue-fournitures.css, « .cat1-fournitures »). Mêmes tailles, graisses et espacements que la console ; police et couleurs de l'ADV. QUATRE COLONNES, QUATRE CELLULES, et une ligne de hauteur FIXE (120 px, la hauteur minimale de la console) : l'ancienne grille déclarait 5 colonnes pour 7 cellules. */ .ra-tete{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:12px 0 28px} .ra-tete h1{font-size:30px;letter-spacing:-.8px;margin:0 0 4px} .ra-tete p{margin:0;color:var(--t3);font-size:14px} .ra-tete .cta{width:auto;flex:none;padding:10px 16px;font-size:14px;font-weight:650;border-radius:7px;white-space:nowrap} .ra-nouvelle{width:min(520px,calc(100vw - 32px));border:1px solid var(--line);border-radius:14px;padding:22px; background:var(--bg);color:var(--t1);box-shadow:0 24px 90px #14102040} .ra-nouvelle:popover-open{position:fixed;inset:96px 24px auto auto;margin:0} .ra-nouvelle h2{font-size:17px;margin:0 0 14px} .ra-nouvelle .formulaire{grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:none;padding:0;border:0;background:none; backdrop-filter:none;-webkit-backdrop-filter:none} .ra-nouvelle .formulaire .cta{grid-column:1/-1} .ra-disposition{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start;margin-bottom:24px} .ra-disposition > *{min-width:0} .ra-cote{position:sticky;top:20px;align-self:start} .ra-cote h2{font-size:11px;font-weight:700;color:var(--t3);margin:0 12px 12px} .ra-categories{display:grid;gap:5px} .ra-categorie{display:flex;align-items:center;gap:10px;padding:12px;border-radius:7px;color:var(--t2);font-size:13px; text-decoration:none} .ra-categorie:hover{background:var(--surf2)} .ra-categorie[aria-current=page]{background:var(--acl);color:var(--ac);font-weight:600;box-shadow:inset 3px 0 var(--ac)} .ra-categorie svg{width:20px;height:20px;flex:none;opacity:.75} .ra-categorie span{min-width:0;overflow:hidden;text-overflow:ellipsis} .ra-categorie b{margin-left:auto;font-size:11px;font-weight:500;color:var(--t3)} .ra-categorie[aria-current=page] b{color:inherit} .ra-bascule{margin-top:8px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;padding-top:14px} .ra-cote-note{font-size:11px;color:var(--t3);line-height:1.7;margin:22px 12px 0;padding-top:18px;border-top:1px solid var(--line)} .ra-outils{display:flex;align-items:stretch;gap:10px;margin:0 0 24px} .ra-recherche:focus-within{outline:2px solid var(--ac);outline-offset:1px} .ra-recherche{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1;font-weight:400;min-width:140px;padding:0 13px;border:1px solid var(--line); border-radius:7px;background:var(--surf);color:var(--t3)} .ra-recherche svg{flex:none} .ra-recherche input{width:100%;min-width:0;border:0;border-radius:0;background:transparent;padding:12px 0;outline:none;font-weight:400;font:inherit;font-size:14px;color:var(--t1)} .ra-outils select{border:1px solid var(--line);background-color:var(--surf);font-weight:400;color:var(--t2);border-radius:7px;padding:10px 30px 10px 12px; max-width:225px;font:inherit;font-size:14px} .ra-outils .btn{min-height:0;border-radius:7px;font-size:13px} .ra-resultats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .ra-resultats h2{font-size:17px;margin:0;font-weight:600} .ra-resultats span{font-size:12px;color:var(--t3)} .tab.t-ref-achat{border-radius:12px;box-shadow:none} .t-ref-achat{--cols:minmax(240px,1fr) 125px 125px 96px} .t-ref-achat .tab-tete,.t-ref-achat .tab-l{gap:18px;padding:0 22px} .t-ref-achat .tab-tete{height:auto;padding-block:13px;font-size:11px;font-weight:500;color:var(--t3);background:var(--surf2)} .t-ref-achat .tab-l{height:120px} .t-ref-achat .ra-fourniture{display:flex;align-items:center;gap:18px} .ra-vignette{flex:none;display:grid;place-items:center;width:84px;height:80px;border-radius:10px;color:var(--t3);overflow:hidden} .ra-vignette img{display:block;width:100%;height:100%;object-fit:contain} .ra-vignette svg{width:35px;height:35px;opacity:.65} .ra-fourniture .tab-nom{min-width:0;gap:0;line-height:1.45} .ra-fourniture .tab-nom strong{font-size:14px;font-weight:600;margin:0 0 5px;white-space:normal;overflow-wrap:anywhere} .ra-fourniture .tab-nom .sub{font-size:12px;color:var(--t3)} .ra-marque{display:inline-flex;align-self:flex-start;margin-top:7px;padding:2px 6px;border-radius:4px;background:var(--bg3); color:var(--t3);font-size:10px} .t-ref-achat .tab-l > .ra-prix{display:block;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap} .ra-prix strong{display:block;font-size:16px;font-weight:500;color:var(--t1)} .ra-prix small{display:block;margin-top:4px;font-size:11px;color:var(--t3)} .ra-prix.vide strong{font-size:13px;color:var(--t3)} .ra-epreuve,.ra-console{display:inline-block;margin-inline-start:4px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:650} .ra-epreuve{background:var(--aml);color:var(--am)} .ra-console{background:var(--acl);color:var(--ac)} .ra-prix-mobile{display:none} .ra-ouvrir{display:inline-flex;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:6px; background:var(--acl);color:var(--ac);font-size:12px;white-space:nowrap} .t-ref-achat .tab-l:hover .ra-ouvrir{border-color:var(--ac)} /* LA FICHE : le tiroir de la console (« #supply-dialog »), à droite, par-dessus la liste voilée. Sans script : la page elle-même ; le voile et la croix ramènent à la liste. La page dessous ne défile pas tant que le tiroir est là. */ body:has(.ra-tiroir){overflow:hidden} .ra-voile{position:fixed;inset:0;z-index:60;background:rgba(47,32,60,.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .ra-tiroir{position:fixed;inset:0 0 0 auto;z-index:61;width:min(620px,100vw);height:100dvh;overflow:auto;background:var(--bg); color:var(--t1);box-shadow:-15px 0 80px rgba(57,36,77,.13)} .ra-tiroir-tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:17px 24px;border-bottom:1px solid var(--line);background:var(--bg);color:var(--t3);font-size:12px} .ra-fermer{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--acl);color:var(--ac);text-decoration:none} .ra-tiroir-corps{padding:26px} .ra-identite{display:flex;align-items:center;gap:22px;margin-bottom:28px} .ra-identite-image{flex:0 0 116px;width:116px;height:110px;display:grid;place-items:center;color:var(--t3)} .ra-identite-image a,.ra-identite-image img{display:block;width:100%;height:100%} .ra-identite-image img{object-fit:contain} .ra-identite-image svg{width:40px;height:40px;opacity:.65} .ra-identite p{margin:0;color:var(--t3);font-size:12px} .ra-identite h2{font-size:23px;line-height:1.3;margin:4px 0 10px;letter-spacing:-.4px;overflow-wrap:anywhere} .ra-identite .ra-marques{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .ra-identite .badge{padding:2px 8px;font-size:10.5px} .ra-cartes{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ra-carte{min-width:0;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--surf)} .ra-carte h3{font-size:12px;color:var(--t3);margin:0 0 10px;font-weight:400} .ra-carte-prix{display:block;font-size:25px;font-weight:600;font-variant-numeric:tabular-nums} .ra-carte p{font-size:12px;color:var(--t3);margin:7px 0 0} .ra-carte-detail{display:grid;gap:3px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px} .ra-carte-detail div{display:flex;justify-content:space-between;gap:10px} .ra-carte-detail dt{color:var(--t3)} .ra-carte-detail dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap} .ra-carte .ra-carte-provenance{font-size:12px;overflow-wrap:anywhere} .ra-carte .ra-carte-transmis{font-size:11px;margin-top:4px} .ra-lien{color:var(--ac);text-decoration:none} .ra-lien:hover{text-decoration:underline} .ra-boutons{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .ra-boutons .cta{width:auto;padding:10px 16px;font-size:14px;font-weight:650;border-radius:7px} .ra-boutons .btn{min-height:0;padding:10px 16px;font-size:14px;font-weight:550;border-radius:7px} .ra-aide{font-size:12px;color:var(--t3);line-height:1.6;margin:12px 0 0} .ra-sources{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:13px} .ra-sources li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .ra-sources small{font-size:11px;color:var(--t3)} .ra-fiche-h3{font-size:15px;margin:26px 0 10px} .ra-docs{display:flex;flex-wrap:wrap;gap:8px} .ra-docs a{padding:9px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:12px;color:var(--ac)} .ra-notes{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;color:var(--t2);font-size:13px} .ra-notes summary{cursor:pointer;font-weight:600;color:var(--t1)} .ra-notes[open] summary{margin-bottom:14px} .ra-notes-texte{white-space:pre-line;line-height:1.75} .ra-notes .list{box-shadow:none} .ra-notes .li{padding:10px 14px;font-size:12.5px;align-items:baseline} .ra-notes .li .k{flex:0 0 120px;color:var(--t3)} .ra-notes .li .v{flex:1 1 auto;min-width:0;text-align:left;overflow-wrap:anywhere} .ra-notes .li .v a{color:var(--ac);text-decoration:none} .ra-notes .formulaire{grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:none} .ra-notes .formulaire .cta{grid-column:1/-1} .ra-medias{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} .ra-medias figure{margin:0;width:140px} .ra-medias img{display:block;width:140px;height:110px;object-fit:contain} .ra-medias figcaption{font-size:11px;color:var(--t3);margin-top:4px} /* Sous 1150 px, la console resserre (même règle) ; sous 900 px, le menu devient une rangée qui défile, sans titre ni note. */ @media(max-width:1150px){ .ra-disposition{grid-template-columns:180px minmax(0,1fr);gap:18px} .t-ref-achat{--cols:minmax(185px,1fr) 100px 100px 80px} .t-ref-achat .tab-tete,.t-ref-achat .tab-l{gap:12px;padding:0 16px} .t-ref-achat .tab-tete{padding-block:13px} .ra-vignette{width:65px;height:66px} .ra-fourniture .tab-nom strong{font-size:13px} .t-ref-achat .tab-l > .ra-prix,.ra-prix strong{font-size:14px} .ra-outils select{max-width:180px;font-size:12px} } @media(max-width:900px){ .ra-disposition{grid-template-columns:minmax(0,1fr);gap:0} .ra-cote{position:static} .ra-cote h2,.ra-cote-note{display:none} .ra-categories{display:flex;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .ra-categorie{flex:none;white-space:nowrap;padding:9px 12px} .ra-categorie b{margin-left:4px} .ra-bascule{margin-top:0;border-top:0;border-radius:7px;padding-top:9px} .ra-outils{margin-bottom:18px} .ra-tete{margin-bottom:20px} .t-ref-achat{--cols:minmax(220px,1fr) 110px 110px 86px} } /* Sous 650 px, une carte par référence, comme la console : l'identité sur toute la largeur, puis les deux prix (chacun titré, l'en-tête étant masqué) et « voir la fiche ». Les cartes de prix de la fiche s'empilent. */ @media(max-width:650px){ .ra-tete{align-items:flex-start;gap:10px} .ra-tete h1{font-size:26px} .ra-tete p{font-size:12px} .ra-tete .cta{font-size:11px;padding:9px 10px} .ra-nouvelle:popover-open{inset:80px 16px auto 16px;width:auto} .ra-nouvelle .formulaire{grid-template-columns:minmax(0,1fr)} .ra-outils{flex-wrap:wrap;gap:8px} .ra-recherche{flex-basis:100%} .ra-outils select{flex:1;max-width:none;min-width:0} .ra-resultats h2{font-size:15px} .ra-resultats span{font-size:11px} .tab.t-ref-achat{--tab-min:0px} .t-ref-achat .tab-tete{display:none} .t-ref-achat .tab-l{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px 10px;padding:17px;align-items:start} .t-ref-achat .tab-l > :last-child{align-self:center} .t-ref-achat .ra-fourniture{grid-column:1/-1;gap:12px} .ra-vignette{width:74px;height:68px} .ra-fourniture .tab-nom strong{font-size:14px} .ra-prix-mobile{display:block;font-size:10px;color:var(--t3);margin-bottom:4px} .ra-prix small{font-size:10px} .ra-tiroir-corps{padding:20px} .ra-identite{gap:14px} .ra-identite-image{flex-basis:80px;width:80px;height:80px} .ra-identite h2{font-size:20px} .ra-cartes{grid-template-columns:minmax(0,1fr)} .ra-carte{padding:13px} .ra-carte-prix{font-size:21px} .ra-notes .li{flex-wrap:wrap;gap:4px} .ra-notes .li .k{flex-basis:100%} .ra-notes .formulaire{grid-template-columns:minmax(0,1fr)} } /* Les commandes gardent une table sémantique avec colonnes réglables. L'esquisse validée remplace l'ancienne largeur intrinsèque par une carte pleine largeur. Sur écran étroit, seule la carte défile ; ses cellules restent alignées avec les titres. */ .tab-defile{overflow-x:auto} .tab-table{border-collapse:collapse;table-layout:auto} .t-commandes .tab-table{width:100%} .tab-table th{height:34px;padding:0 6px;font-size:12px;font-weight:600;color:var(--t2);text-align:left; white-space:nowrap;border-bottom:1px solid var(--line2);vertical-align:middle} .tab-table th.c,.tab-table th.d{text-align:center} .tab-table td{padding:0 6px;vertical-align:middle} .tab-table th:first-child,.tab-table td:first-child{padding-inline-start:18px} .tab-table th:last-child,.tab-table td:last-child{padding-inline-end:18px} .tab-table .poignee{resize:horizontal;overflow:hidden;min-width:60px} .tab-table .tab-l{display:table-row;padding:0} .tab-table .tab-l > td{display:table-cell} .tab-table td > *{display:block;width:0;min-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ⚠ UN PANNEAU ÉCRIT DANS UNE CELLULE N'EN HÉRITE PAS LA COUPE (lot 14a, R1 ; Olivier : « la phrase n'est pas affichée ») : la règle ci-dessus lui imposait nowrap et overflow:hidden, et « Effacer cette commande ? » tranchait sa phrase. */ .tab-table td > [popover]{white-space:normal;overflow:visible;min-width:0} /* ⚠ LE LIBELLÉ ET SON NUMÉRO EN BLOCS, PAS EN FLEX (vu sur la mesure de la vraie liste) : en flex, le libellé ne se laissait pas contraindre et se faisait trancher net, sans « … ». En blocs, chacun se coupe proprement. */ .tab-table td > .tab-nom{display:block} /* Le libellé est DANS son lien () : c'est le lien qui se coupe, pas le . */ .tab-table td > .tab-nom > .tab-lien,.tab-table td > .tab-nom > .sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tab-table td > .c{text-align:center} .tab-table .tab-l.vide > td{height:64px;text-align:center;color:var(--t3);font-size:14px} /* Les largeurs de départ (§ « Lot 12b-2 — l'application »). ⚠ RÉDUITES APRÈS MESURE : les premières (240, 200, 128, 190, 120, 108) donnaient une table de 1152 px dans une carte de 1084 — la liste défilait dès l'ouverture, et la colonne des gestes sortait de l'écran. Celles-ci la font tenir à 1280 px ; l'élargir, ensuite, la fait défiler. ⚠ La colonne des gestes n'a pas de poignée : sa cellule prend la largeur de son contenu, sinon le crayon et la croix tomberaient dans une colonne de largeur nulle. */ .t-couts-techniques .tab-table{width:100%;table-layout:fixed} .t-couts-techniques .tab-table th{white-space:normal} .t-couts-techniques .tab-table .poignee{resize:none;min-width:0;overflow:visible} .t-couts-techniques .tab-table td > *{width:auto;white-space:normal;overflow:visible;padding:12px 0} .t-commandes th:nth-child(1) .poignee{width:300px} .t-commandes th:nth-child(2) .poignee{width:230px} .t-commandes th:nth-child(3) .poignee{width:120px} .t-commandes td:last-child > *{width:auto;min-width:0} .t-stocks{--cols:minmax(0,1fr) 150px 104px 124px 96px 80px 110px} .t-stock-fiche{--cols:minmax(0,1fr) 96px 110px 124px 96px 80px} .t-choisir{--cols:minmax(0,1fr) 138px 106px 70px 86px 104px 122px 104px} /* ── LA LISTE DES COMMANDES (lot 7d, Olivier, 11/09) ───────────────────────── La ligne n'est plus un lien entier : c'est le libellé qui mène à la fiche. ⚠ Le menu « ⋯ » d'un brouillon (lot 7d) a disparu au lot 12a : un crayon et une croix rouge le remplacent, et ses règles sont parties avec lui — un style sans balise devient un piège pour qui le relit. */ .tab-lien{color:inherit;text-decoration:none} .tab-lien:hover strong{text-decoration:underline;text-underline-offset:3px} /* ── LA CROIX ROUGE ET LA CORBEILLE (lot 12a, 14/09) ────────────────────────── « Modifier » et la croix, côte à côte, à la place du « ⋯ ». La croix ouvre un panneau NATIF (popover, sans script) qui demande confirmation ; « Rappeler une commande effacée » ouvre la corbeille, et « Effacer définitivement » y ouvre un second panneau, imbriqué. Centrés à l'écran : ils ne sont pas ancrés à leur bouton. */ .l-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px} /* ⚠ « text-align:start » (vu sur capture, panneau ouvert) : le panneau de la croix est écrit DANS la cellule d'actions, calée à droite comme un montant — son titre et son texte s'alignaient à droite, et pas celui de l'effacement définitif, écrit hors d'une telle cellule. Un panneau lit de gauche à droite, où qu'il soit écrit. */ .panneau-confirmer:popover-open,.panneau-corbeille:popover-open{text-align:start;margin:auto;padding:18px; border:1px solid var(--line);border-radius:var(--rl);color:var(--t1); background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--sh2,var(--sh))} /* 440 px (lot 14a, R1 ; Olivier : « plus claire et plus lisible ») : à 360, la phrase tenait sur trois lignes serrées. */ .panneau-confirmer:popover-open{width:min(440px,calc(100vw - 32px))} /* La corbeille à 860 px (lot 12b-1, arbitrage lxxviii) : à 760, ses noms tombaient à « Cuisine abando… ». */ .panneau-corbeille:popover-open{width:min(860px,calc(100vw - 32px))} /* « Sauvegarder ? » à 460 px (lot 12b-1, lxxix) : à 360, « Continuer sans enregistrer » et « Enregistrer et continuer » passaient chacun sur deux lignes. Sur une ligne ; l'un sous l'autre seulement sur écran étroit. ⚠ APRÈS la règle des 360 px : à spécificité égale, la dernière l'emporte. */ .panneau-sauver:popover-open{width:min(460px,calc(100vw - 32px))} .panneau-sauver .pc-gestes .cta{white-space:nowrap} @media (max-width:520px){.panneau-sauver .pc-gestes{flex-direction:column;align-items:stretch}} .pc-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .pc-titre{margin:0;font-size:15px;font-weight:750} .pc-texte{margin:6px 0 16px;font-size:13.5px;color:var(--t2)} .pc-gestes{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0} .pc-gestes .cta{width:auto;padding:8px 14px;font-size:13px} .pc-gestes form{margin:0} /* Un geste qui détruit se DIT en rouge : « Effacer », « Effacer définitivement ». */ .cta.danger{background:var(--rd);border-color:transparent;color:#fff} /* ⚠ UN NOM SUR DEUX LIGNES AU PLUS plutôt qu'une coupée (lot 12b-1, lxxviii) : la ligne grandit avec lui. ⚠ DES LARGEURS FIXES POUR LA DATE ET LES GESTES, JAMAIS « auto » (vu sur capture) : chaque ligne est sa propre grille, et l'en-tête, dont la dernière cellule est vide, donnait à « auto » zéro pixel — ses titres glissaient d'une colonne. 290 px : « Rappeler » et « Effacer définitivement » côte à côte. */ .t-corbeille{--cols:minmax(0,1fr) minmax(0,1fr) 110px 290px;box-shadow:none} .t-corbeille .tab-l{height:auto;min-height:46px;padding-block:6px} .t-corbeille .tab-nom strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .t-corbeille .tab-txt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .corbeille-bas{display:flex;justify-content:flex-end;margin:12px 0 0} .corbeille-bas .cta{width:auto} .t-identites{--cols:minmax(0,1fr) 110px 108px 62px 150px 26px} .t-journal{--cols:150px 180px minmax(0,1fr) 160px 150px} .t-metiers{--cols:minmax(0,1fr) 110px 62px 40px} /* Réglages › Catalogue (lot 6) : le taux porte son badge « à vérifier », d'où la largeur. */ .t-categories{--cols:minmax(0,1fr) 300px 200px 62px 84px} /* Réglages › transport (lot 14h) : le nom, le prix ht, les gestes — la forme des catégories. */ .t-transport{--cols:minmax(0,1fr) 140px 84px} /* ⚠ UN MENU DANS UNE LIGNE DE TABLEAU N'A PAS LA TAILLE D'UN MENU DE FORMULAIRE. Le style global (14,5 px, 12 px de marge) est plus haut que la ligne FIXE de 46 px : il débordait, et le menu de l'icône sortait de sa colonne sans flèche. */ .tab-l select.mini{width:100%;min-width:0;height:30px;padding:0 24px 0 8px;font-size:12.5px; border-radius:var(--rm)} /* ⚠ PAS .tab-txt pour le taux : sa coupure en « … » mangeait le badge qui dit « taux de départ, à vérifier » — l'information même que la cellule doit porter. */ .tab-l .taux{display:flex;align-items:center;gap:8px;white-space:nowrap} .tab-l .taux select.mini{width:76px;flex:none} /* Le texte d'une cellule ordinaire : une seule ligne, coupée proprement. */ .tab-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--t2)} .tab-txt code{font-size:12px} /* Une cellule qui porte un avatar : l'image ne rétrécit pas, le texte si. */ /* L'icone d'un produit, a la place de l'avatar d'une personne : meme gabarit, pour que les deux familles de tableaux gardent la meme hauteur de ligne. */ .prod-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:9px; flex:none;background:var(--acl);color:var(--ac)} /* ── Les cinq etats de stock ───────────────────────────────────────────────── Cinq cases de largeur FIXE, toujours les cinq, toujours dans le meme ordre : c'est ce qui permet de lire une colonne d'un coup d'oeil au long de la liste. Un zero s'estompe, il ne disparait pas — sinon les cases se decaleraient d'une ligne a l'autre et la comparaison verticale serait perdue. */ .stk{display:inline-grid;grid-template-columns:repeat(5,26px);gap:3px} .stk i{display:grid;place-items:center;height:22px;border-radius:7px;font-style:normal; font-size:11.5px;font-weight:750;font-variant-numeric:tabular-nums} /* ⚠ UN ZERO S'EFFACE, IL NE DISPARAIT PAS. Le retirer ferait des cases qui se decalent d'une ligne a l'autre et la colonne ne se lirait plus d'un coup d'oeil ; le laisser criard, comme dans la premiere version, remplissait l'ecran de « 0 0 0 0 0 » colores ou l'oeil ne trouvait plus les vraies quantites. Il reste donc present, et discret. */ .stk i.vide{background:none;color:var(--t3);font-weight:600;opacity:.38} .stk i.s-stock{background:var(--grl);color:var(--gr-tx)} .stk i.s-commande{background:var(--acl);color:var(--ac)} .stk i.s-construction{background:var(--aml);color:var(--am)} .stk i.s-interrompu{background:var(--bg3);color:var(--t2)} .stk i.s-retours{background:var(--rdl);color:var(--rd)} /* ⚠ LA LEGENDE DECODE LES COULEURS UNE SEULE FOIS. Repeter cinq etiquettes sur chaque ligne rendrait le tableau illisible ; ne rien ecrire du tout laissait cinq chiffres nus dont personne ne pouvait deviner l'ordre. Une legende sous le titre de section coute une ligne et sert toute la liste. */ .stk-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 4px 10px; font-size:11.5px;color:var(--t3)} .stk-leg span{display:inline-flex;align-items:center;gap:6px} .stk-leg i{width:11px;height:11px;border-radius:4px;flex:none} .stk-leg i.s-stock{background:var(--grl);box-shadow:inset 0 0 0 1px var(--gr-tx)} .stk-leg i.s-commande{background:var(--acl);box-shadow:inset 0 0 0 1px var(--ac)} .stk-leg i.s-construction{background:var(--aml);box-shadow:inset 0 0 0 1px var(--am)} .stk-leg i.s-interrompu{background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line2)} .stk-leg i.s-retours{background:var(--rdl);box-shadow:inset 0 0 0 1px var(--rd)} /* La saisie des cinq quantites, sur la page d'edition. */ .stk-saisie{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px} .stk-champ{display:block;background:var(--bg2,var(--bg3));border:1px solid var(--line); border-radius:var(--rm);padding:10px 11px} .stk-champ input{width:100%;margin-top:5px;font-variant-numeric:tabular-nums} .stk-lab{display:block;font-size:12.5px;font-weight:700;color:var(--t1)} .stk-champ.s-stock .stk-lab{color:var(--gr-tx)} .stk-champ.s-commande .stk-lab{color:var(--ac)} .stk-champ.s-construction .stk-lab{color:var(--am)} .stk-champ.s-retours .stk-lab{color:var(--rd)} .stk-aide{display:block;margin-top:5px;font-size:11px;color:var(--t3);line-height:1.4} /* Le choix de l'icone d'un produit — une liste FERMEE, donc des boutons radio. */ .ico-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px} .ico-case input{position:absolute;opacity:0;width:0;height:0} /* ⚠ LE NOM SOUS L'ICÔNE EST DU TEXTE COURANT (lot 6′, Olivier : « pas belles du tout »). Il héritait du style des titres de champ (label : 11 px, graisse 800, minuscules, lettres espacées) ; on le lui retire. */ .ico-vue{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px; border:1px solid var(--line);border-radius:var(--rm);background:var(--surf); font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:normal; color:var(--t2);cursor:pointer;text-align:center; /* ⚠ TOUTES LES CASES À LA MÊME HAUTEUR (lot 6″, Olivier : « les boutons icônes ne sont pas de même taille »). La grille étire déjà chaque case sur la hauteur de sa rangée ; la vue la remplit, et un nom sur une ligne se centre au lieu de laisser un vide dessous. */ flex:1;justify-content:center} .ico-case:has(input:checked) .ico-vue{background:var(--acl);border-color:transparent; color:var(--ac);font-weight:700} /* Le titre d'un champ et son aide sur UNE ligne (lot 6′) : l'aide sous le menu décalait la catégorie d'un rang par rapport au prix. */ .lab-titre{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .lab-titre .champ-aide{font-size:11.5px} /* Le fournisseur et la référence d'un produit, une fois fixés : du texte, plus un champ. */ .ref-fixe{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px} .ref-fixe .num{font-variant-numeric:tabular-nums;letter-spacing:.02em} /* Les photos d'un produit, et sa vignette dans la liste. */ .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px} .photo{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--rm); overflow:hidden;background:var(--surf)} .photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .photo form{position:absolute;top:6px;right:6px;margin:0} .prod-vign{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none} /* LES LISTES ORDONNÉES DE LA FICHE COMMERCIALE (21/09) — points forts, contenu du colis, caractéristiques, photos. ⚠ L'ORDRE SE RÈGLE PAR DES FLÈCHES : il n'y a aucun script dans cet ADV (la CSP pose script-src 'none'), donc pas de glisser-déposer, et le rang est une donnée en base, pas une position à l'écran. ⚠ PAS D'APOSTROPHE INVERSE DANS CE FICHIER : ce CSS vit dans un template literal, et une seule refermerait la chaîne — tout l'ADV cesserait de charger. */ .rangs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} /* ⚠ UNE RANGÉE EST UNE RANGÉE, PAS UNE CARTE DE FORMULAIRE. Mesuré le 21/09 sur la première version : ces lignes portaient la classe « .formulaire », qui est une GRILLE en carte (colonnes de 190 px minimum, 20 px de marge intérieure). Résultat rendu en capture : un champ de 110 px où le texte était coupé à mi-mot, le bouton empilé dessous, les flèches éjectées à côté et la moitié droite vide. La classe existante avait l'air de convenir ; elle ne convenait pas. */ .rangs li{display:flex;align-items:center;gap:6px;min-width:0;background:var(--surf); border:1px solid var(--line);border-radius:var(--rm);padding:8px 10px} .rangs li form{margin:0;display:flex;align-items:center;gap:6px} /* ⚠ Le champ prend toute la place restante : une ligne de texte tronquée à 40 caractères ne se relit pas, et c'est pourtant ce qu'on vient corriger. */ .rang-ligne{flex:1 1 auto;min-width:0} .rang-ligne input{flex:1 1 auto;min-width:0;padding:9px 12px;font-size:14px} /* Le NOM d'une caractéristique est court et se compare d'une ligne à l'autre : une largeur stable le met en colonne. La VALEUR prend ce qui reste. */ .rang-ligne input[name="nom"]{flex:0 1 190px} .rang-txt{flex:1 1 auto;min-width:0;font-size:13px;color:var(--t2)} /* ⚠ SUR UN TÉLÉPHONE, LE CHAMP PASSE AU-DESSUS DES BOUTONS. Mesuré le 21/09 à 390 px : les quatre boutons ronds (valider, monter, descendre, retirer) mangent la moitié de la ligne, et « Alimentation » s'affichait « Alimenta ». Un nom de caractéristique coupé à huit lettres ne se relit pas — or c'est exactement ce qu'on vient corriger sur cet écran. Replié, chaque champ prend toute la largeur et les boutons s'alignent dessous. */ @media (max-width:560px){ .rangs li{flex-wrap:wrap} .rang-ligne{flex:1 1 100%} .rang-ligne input[name="nom"]{flex:1 1 100%} .rangs li form.enligne{margin-left:auto} } /* LE CHOIX DE CHAQUE PRODUIT (écran des axes, 04/10) : le nom et son état sur une ligne, puis UNE LISTE PAR AXE, toutes de même largeur, d'une rangée à l'autre. Mesuré le 04/10 à 800 px sur la famille Piscine : sur une seule ligne, les trois listes se partageaient ce que le nom leur laissait — « sans mesure » s'affichait « sans mesu », et aucune colonne ne s'alignait. */ .rangs.choix li{flex-wrap:wrap} .rangs.choix .rang-txt{flex:1 1 100%} .rangs.choix .rang-ligne select{flex:1 1 0;padding-top:9px;padding-bottom:9px;font-size:14px} /* Sur un téléphone (mesuré à 375 px), trois listes côte à côte se coupaient encore à cinq lettres : une liste par ligne, et le bouton d'enregistrement en dessous, à droite. */ @media (max-width:560px){ .rangs.choix .rang-ligne{flex-wrap:wrap} .rangs.choix .rang-ligne select{flex:1 1 100%} .rangs.choix .rang-ligne .rond{margin-left:auto} } .photos-rang li{gap:10px} .vignette{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none; border:1px solid var(--line)} /* ⚠ Un bouton éteint se VOIT éteint : sinon on le clique, et le silence passe pour une panne. La raison, elle, est écrite à côté — jamais un bouton gris nu. */ .rangs .rond:disabled,.cta:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} .rangs .rond:disabled:hover{background:none;color:inherit} /* La liste de ce qui manque avant de publier. */ .puces{margin:6px 0 0;padding-left:18px;line-height:1.7} .tab-avec-av{display:flex;align-items:center;gap:9px;min-width:0} .tab-avec-av .av{width:26px;height:26px;font-size:10.5px;flex:none} .tab-avec-av .tab-nom{min-width:0} /* Les boutons d'action d'une rangée, groupés à droite. */ .tab-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end} .tab-l .rond{width:26px;height:26px} /* Un champ de saisie DANS une rangée : il doit tenir dans la hauteur fixe. */ .tab-l input.mini{width:100%;max-width:96px;padding:4px 8px;font-size:12.5px; border-radius:9px;text-align:right} .tab-l input.mini.large{max-width:none;text-align:left;font-weight:600} .tab-l .coche{display:flex;justify-content:flex-end;padding:0} .tab-l .coche input{width:16px;height:16px;accent-color:var(--ac);padding:0} /* Une identité désactivée reste lisible, mais s'efface. */ .tab-l.off{opacity:.5} /* ── CE QUI MANQUE SUR UNE FICHE ───────────────────────────────────────────── ⚠ Discret mais VISIBLE, et au-dessus des données : une donnée absente ne se remarque pas dans une liste de champs vides, elle se remarque quand quelque chose la nomme. */ .manques{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px; background:var(--surf);border:1px solid var(--line);border-radius:var(--rl); padding:14px 18px;box-shadow:var(--sh)} .manque-l{display:flex;align-items:center;gap:10px;margin:0;font-size:13.5px;color:var(--t2)} .manque-l strong{color:var(--t1)} .manque-l .badge{flex:none} /* ── LE TITRE D'UNE LISTE, AVEC SON ACTION ─────────────────────────────────── ⚠ Le trait de séparation du titre s'arrête AVANT le bouton : une ligne qui passerait dessous le ferait flotter au lieu de l'ancrer. */ .sec-title.sec-action{display:flex;align-items:center;gap:14px} /* ⚠ Le pseudo-élément ::after EST TOUJOURS LE DERNIER ENFANT D'UN FLEX — sans la propriete order, le trait de separation se placerait APRES le bouton au lieu d'entre les deux. */ .sec-title.sec-action > span:first-child{flex:none;order:1} .sec-title.sec-action{overflow:visible} .sec-title.sec-action::after{order:2;display:block;flex:1;width:auto;margin:0} .cta.plus{order:3;flex:none;display:inline-flex;align-items:center;gap:7px; letter-spacing:normal;padding:6px 14px} .plus-signe{font-size:16px;font-weight:800;line-height:1} /* ── LE PANNEAU « INVITER UNE PERSONNE » (lot 1 du 11/09) ──────────────────── ⚠ AUCUN JAVASCRIPT : l'attribut HTML popover ouvre, ferme à Échap et au clic extérieur, et tient le focus — le navigateur le fait mieux qu'un script. ⚠ LE REPLI : un navigateur sans popover ignore l'attribut, et le panneau reste dans le flux, en bas de page, comme avant ce lot. Tout ce qui ne vaut que pour le panneau OUVERT se déclare donc sous :popover-open — un sélecteur inconnu fait ignorer la règle entière, le repli n'en voit rien. ⚠ PAS D'ANIMATION DE FERMETURE : il faudrait poser l'état fermé hors de :popover-open, donc rendre le formulaire invisible dans le repli. */ .panneau .fermer{display:none} .panneau:popover-open{width:min(720px,calc(100vw - 32px)); max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;margin:auto; padding:22px;border:1px solid var(--line);border-radius:var(--rxl);color:var(--t1); background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--sh2,var(--sh)); transform-origin:center; transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1)} @starting-style{.panneau:popover-open{opacity:0;transform:scale(.97)}} .panneau:popover-open::backdrop{background:rgba(8,12,16,.32)} .panneau:popover-open .fermer{display:inline-flex;align-items:center;justify-content:center} .panneau:popover-open .formulaire{padding:0;background:none;border:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none} .panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:6px} .panneau-tete h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--t1)} /* ⚠ EN HAUT, PAS EN BAS : l'aide sous l'adresse allonge ce champ ; alignés par le bas (règle de .formulaire), les trois champs de la ligne se décalaient. */ .panneau .formulaire{align-items:start} .panneau > .formulaire{margin-top:14px} .formulaire hr.separe{grid-column:1/-1;width:100%;height:1px;margin:2px 0;border:none; background:var(--line)} .panneau-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px} .panneau-actions .cta{width:auto} .champ-aide{font-size:12px;font-weight:500;line-height:1.35;color:var(--t2); letter-spacing:normal} @media (prefers-reduced-motion:reduce){ .panneau:popover-open{transform:none;transition:opacity .15s ease} @starting-style{.panneau:popover-open{transform:none}} } /* La NATURE d'un tiers — elle décide de ce que sa facture doit porter (prix TTC et rétractation pour un particulier, mentions professionnelles sinon), donc elle se lit d'un coup d'œil, dans sa propre colonne. */ .nat{display:inline-block;max-width:100%;padding:2px 9px;border-radius:20px;font-size:11px; font-weight:800;letter-spacing:.03em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line2);color:var(--t3)} .nat.part{background:var(--acl);border-color:transparent;color:var(--ac)} .nat.pro{background:var(--surf2)} @media(max-width:900px){ /* Sur un écran étroit, l'ANNUAIRE sacrifie les rôles et la date — le nom, la nature et le nombre de pièces suffisent à retrouver quelqu'un. ⚠ L'ANNUAIRE SEUL (poste 1, 05/10). Écrite « .tab » le 07/09, cette règle masquait les 3e et 5e cellules de TOUTE table, et la fenêtre des réglages la rejouait sous 900 px : le transport et les catégories y perdaient leurs boutons, le journal sa date. Une autre table garde toutes ses colonnes ; trop large, elle DÉFILE dans son cadre (--tab-min : la largeur sous laquelle elle défile plutôt que d'écraser son nom). */ .tab.t-identites{--cols:minmax(0,1fr) 84px 56px 26px} .t-identites .tab-tete > :nth-child(3),.t-identites .tab-l > :nth-child(3), .t-identites .tab-tete > :nth-child(5),.t-identites .tab-l > :nth-child(5){display:none} .tab{overflow-x:auto} .tab > .tab-tete,.tab > .tab-l{min-width:var(--tab-min,0)} /* ⚠ LES BOUTONS RESTENT À L'ÉCRAN QUAND LA TABLE DÉFILE : collés au bord droit de son cadre. Sans cela, les catégories les rangeaient hors de la fenêtre d'un portable — le défaut même que cette règle répare. */ .tab > .tab-l > .tab-actions{position:sticky;right:0;z-index:1;background:linear-gradient(var(--surf),var(--surf)),var(--bg); box-shadow:-10px 0 10px -8px rgba(20,26,44,.18);padding-left:6px} /* Les largeurs sous lesquelles chaque table défile : ses colonnes fixes, plus 140 px pour son nom (mesuré le 05/10 sur des tables tirées de cette feuille, dans la fenêtre des réglages et à 375 px). */ .t-tiers{--tab-min:790px}.t-pieces{--tab-min:720px}.t-achats{--tab-min:740px}.t-argent{--tab-min:780px} .t-catalogue{--tab-min:830px}.t-ref-achat{--tab-min:600px}.t-stock-fiche{--tab-min:790px}.t-corbeille{--tab-min:730px} .t-journal{--tab-min:870px}.t-categories{--tab-min:880px}.t-metiers{--tab-min:420px}.t-transport{--tab-min:380px} /* ⚠ CONSERVÉ À L'IDENTIQUE, HORS DE LA FENÊTRE : ces écrans de commande ont été dessinés avec ces cellules masquées par l'ancienne règle générale. Écrit ici pour eux seuls, rien ne change sur ces écrans. */ .t-choisir .tab-tete > :nth-child(5),.t-choisir .tab-l > :nth-child(5), .t-lignes .tab-tete > :nth-child(5),.t-lignes .tab-l > :nth-child(5), .t-validation .tab-tete > :nth-child(3),.t-validation .tab-l > :nth-child(3){display:none} } img.av,span.av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%; flex:none;background:var(--acl);color:var(--ac);font-size:14px;font-weight:800; object-fit:cover;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .av.grand{width:60px;height:60px;font-size:19px} .av.petit{width:28px;height:28px;font-size:11px} .k{flex:1;min-width:0} .k strong{display:block;font-size:15px;font-weight:700;color:var(--t1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k .sub{display:block;font-size:12.5px;color:var(--t3);margin-top:2px; overflow:hidden;text-overflow:ellipsis} .v{flex:none;text-align:right;min-width:0} .v.large{min-width:158px} .v b{display:block;font-size:14px;font-weight:700;color:var(--t1); font-variant-numeric:tabular-nums} .vlab{display:block;font-size:11.5px;color:var(--t3)} /* ⚠ Barré, pas masqué : un droit retiré doit rester LISIBLE. */ .li.off .k,.li.off .v{opacity:.5} .li.off .k strong{text-decoration:line-through} .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750; padding:4px 11px;border-radius:20px;flex:none;white-space:nowrap} .badge.ok{background:var(--grl);color:var(--gr-tx)} .badge.att{background:var(--aml);color:var(--am)} .badge.non{background:var(--rdl);color:var(--rd)} .badge.zero{background:var(--bg3);color:var(--t3)} .badge.ac{background:var(--acl);color:var(--ac)} /* ⚠ « EN PRÉPARATION » ET « REÇUE » ÉTAIENT EN TEXTE NU (relevé le 17/09) : leurs tons, am et gr, n'avaient pas de règle — comme les boutiques HUBS-elements et HUBS (prestations). Un test vérifie que chaque ton d'un état ou d'une boutique a la sienne. */ .badge.am{background:var(--aml);color:var(--am)} .badge.gr{background:var(--grl);color:var(--gr-tx)} /* Les états affichés de la liste des commandes (retours du 16/09, point 3). Une pastille affichée est PLEINE, de la couleur de son état, et porte une coche ; masquée, un contour et un texte atténué. Jamais la couleur seule : la coche, le contour et le nom lu disent aussi l'état. Des liens, sans script. */ /* ⚠ LE FILTRE DES ÉTATS EST UN DÉPLIANT (17/09 au soir, Olivier : « je déteste cet affichage ») : neuf pastilles débordaient sur deux lignes. Fermé, une ligne fine ; ouvert, les pastilles d'avant. Sans script. */ .filtre-etats{margin:0 0 14px} .filtre-etats > summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;box-sizing:border-box; padding:0 12px;border:1px dashed var(--line2);border-radius:999px;background:var(--surf);color:var(--t2); font-size:13px;font-weight:700;cursor:pointer;list-style:none;width:fit-content} .filtre-etats > summary::-webkit-details-marker{display:none} .filtre-etats > summary::after{content:"▾";font-size:11px;color:var(--t3)} .filtre-etats[open] > summary::after{content:"▴"} .filtre-etats > summary:hover{color:var(--t1);border-color:var(--line)} .pastilles-etats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0} .pastille-etat{display:inline-flex;align-items:center;gap:6px;min-height:32px;box-sizing:border-box;padding:0 12px; border-radius:20px;border:1.5px dashed var(--line2);background:none;color:var(--t3);font-size:12.5px;font-weight:650; text-decoration:none;white-space:nowrap} .pastille-etat b{font-weight:800;font-variant-numeric:tabular-nums} .pastille-etat.on{border-style:solid;border-color:transparent;font-weight:750} .pastille-etat.on::before{content:"✓";font-weight:900} .pastille-etat.on.zero{background:var(--bg3);color:var(--t1)} .pastille-etat.on.ac{background:var(--acl);color:var(--ac)} .pastille-etat.on.am{background:var(--aml);color:var(--am)} .pastille-etat.on.gr{background:var(--grl);color:var(--gr-tx)} .pastille-etat.on.non{background:var(--rdl);color:var(--rd)} /* Paiements, étape 1 : « à vérifier » a le ton d'une attente. */ .pastille-etat.on.att{background:var(--aml);color:var(--am)} @media (hover:hover) and (pointer:fine){.pastille-etat:hover{border-color:var(--t3);color:var(--t1)} .pastille-etat.on:hover{border-color:currentColor}} .pastille-etat:focus-visible{outline:2px solid var(--ac);outline-offset:2px} /* ── La barre de progression d'une commande ────────────────────────────────── ⚠ CHAQUE ETAPE EST UNE COLONNE EGALE, reliee a la suivante par un trait. Le trait porte l'etat de l'etape QUI LE PRECEDE : c'est ce qui fait lire la barre comme un chemin parcouru, et non comme cinq pastilles posees cote a cote. ⚠ L'ETAT NE TIENT PAS QU'A LA COULEUR — une coche pour ce qui est fait, une croix pour ce qui est abandonne, le numero pour le reste. Une barre lisible seulement en couleur est une barre qu'un daltonien lit a l'envers. */ .prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin-top:14px; padding:20px 16px 16px;background:var(--surf);border:1px solid var(--line); border-radius:var(--rl);box-shadow:var(--sh);overflow-x:auto; backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .prog-e{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;padding:0 6px;min-width:104px} /* Le trait de liaison, tire vers l'etape SUIVANTE. Pas sur la derniere. ⚠ IL S'ARRETE AU BORD DES PASTILLES (retours du 16/09, point 4 ; Olivier : les coches sont traversees par la ligne). Les fonds des pastilles sont translucides dans trois themes sur quatre (--grl, --bg3, --surf) : un trait qui passe dessous se voit au travers. Il part a 7 px du bord de la sienne et finit a 7 px de la suivante (l anneau de l etape en cours fait 5 px) ; --pt est le diametre. */ .prog{--pt:29px} .prog-e::after{content:'';position:absolute;top:calc(var(--pt) / 2 - 1px);left:calc(50% + var(--pt) / 2 + 7px); width:calc(100% - var(--pt) - 14px);height:2px;background:var(--line2);z-index:0} .prog-e:last-child::after{display:none} .prog-pt{position:relative;z-index:1;display:grid;place-items:center; width:29px;height:29px;border-radius:50%;font-size:12px;font-weight:800; background:var(--bg3);color:var(--t3);border:2px solid var(--line2)} .prog-n{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--t2);line-height:1.3} .prog-d{margin-top:3px;font-size:10.5px;color:var(--t3);line-height:1.35} .prog-faite .prog-pt{background:var(--grl);color:var(--gr-tx);border-color:transparent} .prog-faite .prog-n{color:var(--gr-tx)} .prog-faite::after{background:var(--gr-tx);opacity:.45} /* Retours du 15/09, R4 : soldée, la case 6 « réglée » passe en vert PLEIN (Olivier : « devra être vert »), comme une étape faite du parcours de création ; le vert clair d'une case faite ne se distinguait pas assez. */ .prog-reglee .prog-pt{background:var(--gr-tx);color:#fff;border-color:transparent} /* ⚠ L'ETAPE COURANTE EST LA SEULE QUI PORTE L'ACCENT PLEIN : c'est la reponse a « qu'est-ce que je dois faire maintenant », et il ne doit y en avoir qu'une. */ .prog-courante .prog-pt{background:var(--ac);color:#fff;border-color:transparent; box-shadow:0 0 0 4px var(--acl)} .prog-courante .prog-n{color:var(--ac);font-weight:800} .prog-abandonnee .prog-pt{background:var(--rdl);color:var(--rd);border-color:transparent} .prog-abandonnee .prog-n{color:var(--t3);text-decoration:line-through} .prog-off{opacity:.85} /* La barre du parcours de commande (lot 14b, R3 ; Olivier : « La progress bar doit être visuelle et prendre la totalité de la largeur de la page »). C'est la frise, sur toute la largeur, sous la barre de tête ; une étape passée est un lien sans changer de dessin. Le « ! » rose (« Quand une étape pose problème elle doit afficher un ! en rose ») : un signe ET une couleur, jamais la couleur seule. Sur l'étape en cours, il garde l'anneau de l'accent. */ .prog-parcours{width:100%;box-sizing:border-box;margin:4px 0 16px;list-style:none} .prog-parcours a{display:contents;color:inherit;text-decoration:none} .prog-parcours a:hover .prog-n{text-decoration:underline;text-underline-offset:3px} .prog-probleme .prog-pt{background:var(--rdl);color:var(--rd);border-color:var(--rd)} .prog-probleme .prog-n{color:var(--rd)} .prog-probleme[aria-current="step"] .prog-pt{background:var(--rd);color:#fff;border-color:transparent; box-shadow:0 0 0 4px var(--rdl)} /* Les pastilles de la BARRE sont pleines (lot 14c′ ; Olivier : « améliorer le fond des icones de la progress bar ») : sur le thème clair, le vert pâle de la frise laissait la barre vide. Blanc sur vert, blanc sur rose, un contour pour ce qui vient, un anneau autour de l'étape en cours. La frise de la fiche garde ses pastilles. */ .prog-parcours{--pt:32px} .prog-parcours .prog-pt{width:32px;height:32px;font-size:13px} .prog-parcours .prog-faite .prog-pt{background:var(--gr-tx);color:#fff;border-color:transparent} .prog-parcours .prog-probleme .prog-pt{background:var(--rd);color:#fff;border-color:transparent} .prog-parcours .prog-a_venir .prog-pt{background:var(--surf);color:var(--t2);border-color:var(--line2)} .prog-parcours .prog-courante .prog-pt{box-shadow:0 0 0 5px var(--acl)} .prog-parcours .prog-probleme[aria-current="step"] .prog-pt{box-shadow:0 0 0 5px var(--rdl)} /* Le choix du type de vente (lot 7a) : chaque ligne est un LIEN, et se voit cliquable par sa flèche et son survol — pas par un soulignement de texte courant. */ a.li-lien{text-decoration:none;color:inherit} @media (hover:hover) and (pointer:fine){a.li-lien:hover{background:var(--surf2)}} /* La frise (lot 7a) : une étape SANS OBJET (dépôt / envoi d'un devis) se DIT — pointillés et mention, pas une case vide qu'on prendrait pour un oubli. */ .prog-sans_objet .prog-pt{background:none;border-style:dashed;color:var(--t2)} .prog-sans_objet .prog-n{color:var(--t2);font-weight:600} /* ⚠ LE TICKET « paiement reçu » : le mot ET le montant, jamais la couleur seule. Un paiement peut arriver à tout moment, avant que l'étape soit atteinte. */ .prog-ticket{margin-top:6px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:800; background:var(--grl);color:var(--gr-tx);white-space:nowrap;font-variant-numeric:tabular-nums} @media (max-width:720px){ /* ⚠ EN COLONNE SUR TELEPHONE : sept etapes en ligne donneraient sept colonnes de 40 px illisibles, ou un defilement horizontal qu'on ne devine pas. */ .prog{grid-auto-flow:row;grid-auto-columns:auto;gap:2px} .prog-e{flex-direction:row;align-items:flex-start;gap:11px;text-align:left; min-width:0;padding:5px 0} /* En colonne, les étapes sont serrées (9 px entre deux pastilles) : le trait laisse 2 px de chaque côté. Du bas de la pastille (5 px de marge + diamètre + 2) au haut de la suivante moins 2 (2 px d’écart entre étapes, 5 px de marge). */ .prog-e::after{top:calc(var(--pt) + 7px);left:calc(var(--pt) / 2 - 1px);width:2px;height:calc(100% - var(--pt) - 2px)} .prog-n{margin-top:4px} } /* ── LE BON DE COMMANDE, UNE BARRE AU-DESSUS DES ARTICLES (retours du 16/09, point 2) ── Le bon n'est plus affiché à côté de la saisie : il écrasait le tableau (Olivier : « inutilisable »). Son nom à gauche, ses deux actions à droite ; sans bon, le dépôt tient sur la même barre. Sur téléphone, les actions passent dessous. */ .bon-barre{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 14px; padding:12px 16px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .bon-nom{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px;color:var(--t2)} .bon-nom > span{display:flex;flex-direction:column;min-width:0} .bon-nom strong{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bon-gestes{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bon-gestes .cta,.bon-barre.depot .cta{width:auto;padding:9px 16px;font-size:13.5px;white-space:nowrap} .bon-barre.depot .note{flex:1 1 100%;margin:0} .bon-fichier{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;font-size:13px;font-weight:600;color:var(--t2)} @media (max-width:720px){.bon-gestes{flex:1 1 100%}.bon-gestes .cta{flex:1 1 auto;text-align:center}} /* Le paiement en ligne d'un brouillon (paiements, étape 1) : son état à gauche, « simuler le paiement » à droite, sur la même carte que la barre du bon. */ .paiement-barre{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 14px; padding:12px 16px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .paiement-etat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .paiement-barre > .cta{width:auto;padding:9px 16px;font-size:13.5px;white-space:nowrap} /* Le lien de paiement Stripe (étape 2) : l'adresse en entier, sélectionnable, coupée n'importe où plutôt que de déborder. */ .paiement-lien{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;flex:1 1 100%;min-width:0} .paiement-lien .cta{width:auto;padding:9px 16px;font-size:13.5px;white-space:nowrap} .paiement-lien .vlab:last-child{flex:1 1 100%} /* « simuler le paiement » (17/09 au soir) : un dépliant qui reste dans la barre, à la place d'une bulle qui recouvrait la barre des étapes. Ouvert, ses deux choix passent sous le bouton, sur toute la largeur. */ .simuler-paiement{margin-inline-start:auto} .simuler-paiement[open]{flex:1 1 100%} .simuler-paiement > summary{display:block;list-style:none;width:fit-content;margin-inline-start:auto;padding:9px 16px;font-size:13.5px;white-space:nowrap;cursor:pointer} .simuler-paiement > summary::-webkit-details-marker{display:none} .simuler-choix{display:flex;align-items:center;justify-content:flex-end;gap:8px 10px;flex-wrap:wrap;margin:10px 0 0} .simuler-choix .cta{width:auto;padding:9px 16px;font-size:13.5px;white-space:nowrap} .simuler-choix .vlab{margin-inline-end:auto} .paiement-lien .cta:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .lien-copie{flex:1 1 260px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px; font-size:12px;overflow-wrap:anywhere;word-break:break-all;user-select:all;background:var(--surf)} /* La page d'impression d'un bon en image : le bon seul, à la taille de la page. */ .impression{display:block;margin:0;background:#fff} .impression::before,.impression::after{display:none} .impression img{display:block;max-width:100%;margin:0 auto} @media print{@page{margin:10mm}.impression img{max-height:277mm;object-fit:contain}} .depot{margin:0} .formulaire.serre{margin-top:12px} /* ── LA SAISIE EN LIGNES (lot 7b, Olivier, 11/09) ────────────────────────── Les colonnes du document imprimé : désignation, qté, PU HT, remise, TVA, montant HT, puis l'action (la croix d'une ligne, « Ajouter » sur la ligne de saisie). */ /* Lot 7b′ (Olivier, 11/09 au soir) : « chaque article sur une seule ligne », la référence en tête. Huit colonnes : réf., désignation, qté, PU HT, remise, TVA, montant HT, action. */ /* ⚠ LA PREMIÈRE COLONNE S'ÉLARGIT POUR LA VIGNETTE (lot 8′, 12/09) : la photo du produit, ou son icône, à gauche de sa référence. 92 px ne tenaient que la référence. */ /* ⚠ « EN STOCK » JUSTE APRÈS « QTÉ » (lot 11b, arbitrage lii) : la quantité commandée et le stock se comparent d'un coup d'œil, côte à côte. */ .t-lignes{--cols:124px minmax(0,1fr) 64px 80px 96px 64px 60px 104px 84px} /* ⚠ L'ALERTE SE POSE SOUS LE CHIFFRE, PAS À CÔTÉ (lot 11b, vu sur capture) : côte à côte, la pastille débordait de la colonne et poussait le « 0 » du stock contre le « 1 » de la quantité — on lisait « 1 0 », une fausse quantité. */ .t-lignes .l-stock-alerte{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.1} .t-lignes .l-stock-alerte .badge{font-size:10.5px;padding:2px 6px;white-space:normal;text-align:center;max-width:100%} .l-ref{display:flex;align-items:center;gap:8px;min-width:0; font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums} .l-ref .l-ref-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* L'ÉTAT DE CHAQUE ARTICLE (lot 13) : une pastille ronde en tête de la cellule « Réf. ». Une forme, une couleur et un nom (infobulle, lecteur d'écran) — jamais la couleur seule : coche verte « Article validé », alerte rouge « Problème », sablier ambre « En création ». */ .l-etat{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%} .l-etat.ok{color:var(--gr-tx);background:var(--grl)} .l-etat.non{color:var(--rd);background:var(--rdl)} .l-etat.cree{color:var(--am);background:var(--aml)} /* La cellule « Réf. » de la ligne d'ajout : son sablier, puis le champ. */ .c-ref{display:flex;align-items:center;gap:6px;min-width:0} .c-ref input{flex:1;min-width:0} /* La ligne de saisie : UNE LIGNE du tableau, aux mêmes colonnes, en pointillé. */ .l-saisie{position:relative;display:grid;grid-template-columns:var(--cols);gap:12px; align-items:center;margin:6px 8px 8px;padding:10px 10px;border:1.5px dashed var(--line2); border-radius:var(--rm);background:var(--bg3)} .l-saisie input{padding:8px 10px;font-size:13.5px;min-width:0;width:100%} .l-saisie .c-nom{display:flex;align-items:center;gap:6px;min-width:0} .l-saisie .cta{width:auto;padding:9px 12px;font-size:13.5px} /* La ligne en modification (lot 14a, R8 ; Olivier : « quand je clicke sur la crayon, rien ne se passe ») : surlignée dans le tableau, et la ligne de saisie qui la reprend prend la même teinte — on voit laquelle on modifie. « Annuler » et « Enregistrer » descendent sous le cumul (R9). */ .tab-l.l-modif{background:var(--aml);box-shadow:inset 3px 0 0 var(--am)} .l-saisie.en-modif{border-style:solid;border-color:var(--am);background:var(--aml)} .l-barre-modif{gap:8px;margin-top:12px} /* Entrée dans un champ AJOUTE la ligne : c'est le premier bouton du formulaire, hors de la vue ; la loupe ne cherche que si on la clique. */ .l-defaut{position:absolute;width:1px;height:1px;padding:0;overflow:hidden; clip-path:inset(50%);opacity:0} .l-loupe{flex:none;width:30px;height:30px} /* ⚠ LES RÉSULTATS EN LIGNE DE LA LOUPE ONT QUITTÉ LA SAISIE (lot 8, arbitrage xv, 12/09) : la recherche a sa page, « Choisir un produit », avec ses filtres. Leurs règles (.l-trouves, .l-trouve) sont retirées avec eux — un style sans balise devient un piège pour qui le relit. */ /* ⚠ LA MONNAIE SE LIT À CÔTÉ DU PRIX (lot 8, Olivier : « il faut marquer la monnaie utilisée ») : « € » à droite du champ, dans la même cellule de la grille — une cellule de plus décalerait toutes les colonnes de la ligne de saisie. */ .c-prix{display:flex;align-items:center;gap:6px;min-width:0} .c-prix input{flex:1;min-width:0} .c-prix .devise{flex:none;font-size:13px;font-weight:600;color:var(--t2)} /* ── LA PAGE STOCKS (lot 9) ───────────────────────────────────────────────── Une boutique à la fois, choisie par des pastilles-liens ; − et + autour de « en stock ». */ .boutiques{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .boutiques a{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--surf); color:var(--t2);font-size:13px;font-weight:650;text-decoration:none} .boutiques a.on{background:var(--acl);border-color:transparent;color:var(--ac)} .stk-pm{display:inline-flex;align-items:center;gap:8px} .stk-pm form{margin:0} .stk-pm b{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums} .stk-pm b.stk-negatif{color:var(--rd)} /* Retours du 15/09, R9 (gestion des stocks) : la quantité en stock est un bouton qui ouvre le journal ; le panneau porte le journal des mouvements, puis les gestes entrée et sortie, chacun sur une rangée. */ .stk-q{min-width:2.4ch;padding:3px 9px;border:1px solid var(--line2);border-radius:10px;background:var(--surf); color:var(--t1);font:inherit;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer} .stk-q.stk-negatif{color:var(--rd)} /* ⚠ PLUS LARGE QU'UN PANNEAU DE CONFIRMATION (vu sur capture) : hérité à 440 px, le champ « raison » tombait à 70 px. Même sélecteur que la règle de la confirmation (:popover-open), écrit après elle : il l'emporte. */ .panneau-journal:popover-open{width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 48px);overflow:auto;text-align:left} .journal-stock{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 14px} .journal-stock th,.journal-stock td{padding:6px 7px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .journal-stock th{font-weight:700;color:var(--t2)} .journal-stock .d{text-align:right;white-space:nowrap} .panneau-journal .pj-gestes{display:grid;gap:10px} .panneau-journal .f-mouvement{grid-template-columns:88px minmax(160px,1fr) 150px auto;align-items:end;margin:0} .panneau-journal .f-mouvement .large{grid-column:auto} .panneau-journal .f-mouvement .cta{width:auto;grid-column:auto} @media (max-width:560px){.panneau-journal .f-mouvement{grid-template-columns:minmax(0,1fr)} .journal-stock th:nth-child(5),.journal-stock td:nth-child(5){display:none}} .tab-table td:has(.etat-alertes),.tab-table td > :has(.etat-alertes){overflow:visible;text-overflow:clip} .etat-alertes{display:inline-flex;align-items:center;gap:4px;vertical-align:middle} .signe-alerte{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--rdl);color:var(--rd);font-family:inherit;font-size:12px;font-weight:800;line-height:1;cursor:pointer;vertical-align:middle} .signe-alerte:hover{background:var(--rd);color:#fff} .panneau-alertes{white-space:normal} .panneau-alertes:popover-open{width:min(520px,calc(100vw - 32px));min-width:0;text-align:start} .panneau-alertes .alertes{margin:10px 0} .t-stocks .cta{width:auto;padding:6px 12px;font-size:12.5px} .stk-note{font-size:12px;color:var(--t3);white-space:nowrap} /* ⚠ EN HAUT, PAS EN BAS (même motif que le panneau d'invitation) : l'aide sous « Écart » allonge ce champ ; alignés par le bas, « État » et « Écart » se décalaient. */ .formulaire.f-ajuster{align-items:start} /* Un geste SECONDAIRE dans un champ (« + » Nouveau tiers, lot 10) : SUR LA LIGNE de la liste, à sa droite et à sa hauteur. Sous la liste (lot 8″), il grandissait le champ et décalait ses voisins. ⚠ « stretch » donne au bouton la hauteur exacte de la liste, sans la recopier en pixels ; la largeur est fixe, sinon la règle générale de « .cta » l'étire sur tout le champ. */ .champ-ligne{display:flex;gap:8px;align-items:stretch} .champ-ligne select{flex:1;min-width:0} .formulaire .champ-plus{flex:0 0 48px;width:48px;padding:0;font-size:20px;font-weight:600;line-height:1} /* ── LE PARCOURS DE COMMANDE (lot 11b, 14/09) ───────────────────────────────── La ligne de repères, recréée à l'identique du lot 8′ (retirée le 12/09 avec son écran) : réservée aux étapes d'un geste en cours — voir hubs-coordinator/design/jetons/reperes.md. Les étapes à venir en texte simple, plus pâle : on lit ce qui reste, sans pouvoir y sauter (arbitrage xlviii). */ .reperes{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 4px 8px; font-size:13px;color:var(--t3)} .reperes a{color:var(--t2);text-decoration:none} .reperes a:hover{color:var(--ac)} .reperes strong{color:var(--t1);font-weight:700} .reperes-avenir{color:var(--t3)} /* LA BARRE DE TÊTE DU PARCOURS (amendement l, 14/09 soir — Olivier, sur l'écran réel : « étape suivante en haut à droite », « le nom de la commande - client au centre et un peu plus lisible »). Elle remplace la barre du bas, jamais mise en ligne. ⚠ LE HTML EST ÉCRIT « droite, centre, gauche » — la touche Entrée soumet le premier bouton rattaché au formulaire, qui doit être le geste principal — et la grille le remet « gauche, centre, droite » sous l'œil. */ .tete-parcours{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"g t d";align-items:center;gap:14px;margin:4px 0 10px} .tete-parcours .tp-g{grid-area:g;justify-self:start} .tete-parcours .tp-titre{grid-area:t;margin:0;text-align:center;font-size:20px;font-weight:750; letter-spacing:-.02em;color:var(--t1)} .tete-parcours .tp-d{grid-area:d;justify-self:end} .tete-parcours .cta{width:auto;padding-inline:22px} /* ⚠ LES DEUX BOUTONS D'ÉTAPE SONT LE MÊME BOUTON (lot 11b′, arbitrage ① ; Olivier : « ne sont pas les mêmes c'est ridicule ») : un contour, la même taille, la flèche seule change de côté. Le seul bouton PLEIN d'un écran du parcours est celui qui enregistre. */ .cta.etape{display:inline-flex;align-items:center;gap:8px;width:auto;padding-inline:18px;font:inherit;font-weight:650} /* « Enregistrer », en bas à droite du formulaire de la Livraison (③). */ .barre-bas{display:flex;justify-content:flex-end;margin-top:6px} .barre-bas .cta{width:auto;padding-inline:26px} /* Le bouton par défaut de l'Identification : il porte la touche Entrée, et rien d'autre — ni à l'œil, ni au lecteur d'écran (aria-hidden), ni à la tabulation (tabindex -1). */ .f-commande .l-defaut{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);border:0} /* Le panneau « Quantités » d'une ligne (lxi) : le libellé à gauche, le chiffre à droite ; le stock dépassé en rouge. */ .pq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;margin:12px 0 16px;text-align:start} .pq dt{color:var(--t2);font-size:13.5px} .pq dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums} .pq .pq-rouge{color:var(--rd)} .pq .pq-rouge .badge{margin-inline-start:6px;font-size:11px} /* Un bouton qui enregistre puis recule (Livraison) a l'allure du lien « ← » des autres écrans. */ button.retour{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer} @media (max-width:720px){ .tete-parcours{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "g d"} .tete-parcours .tp-titre{font-size:17px} } /* L'écran Livraison, EN RANGÉES (retours du 15/09, R2) : rangée 1, le mode puis, pour un envoi ou un point relais, le transporteur, le montant du port ht et le port tout à droite ; rangée 2, la date seule ; dessous, l'adresse. */ .formulaire.f-livraison{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start} .f-livraison fieldset{grid-column:1/-1;border:0;margin:0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px} .f-livraison legend{font-size:13px;font-weight:600;color:var(--t2);padding:0;margin-bottom:6px} .f-livraison .choix{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;flex-direction:row; font-weight:500;color:var(--t1)} .f-livraison .choix input{width:auto;margin-top:3px} /* L'autre adresse (lot 14a, R10) : ses champs n'apparaissent que si « Autre » est coché, sans script, par :has. « contents » garde chaque champ dans la grille du fieldset, comme avant l'enveloppe. */ .f-livraison .adr-autre{display:none} .f-livraison fieldset:has(input[value="autre"]:checked) .adr-autre{display:contents} /* Lot 14h (R11) : le transporteur et le port ne valent que pour un envoi. « contents » garde leurs champs dans la grille ; en main propre, ils se masquent, sans script. « nom » n'apparaît qu'à côté du choix « autre ». */ .f-livraison .champ-envoi{display:contents} .f-livraison:has(select[name="remise"] option[value="main_propre"]:checked) .champ-envoi{display:none} .f-livraison:has(select[name="remise"] option[value="main_propre"]:checked) .champ-adresse{display:none} .f-livraison .champ-autre-transporteur{display:none} .f-livraison:has(select[name="prestataire"] option[value="autre"]:checked) .champ-autre-transporteur{display:flex} /* R2 : le transporteur et son « nom » tiennent dans une case ; le port est une case de la rangée, ses deux choix l'un sous l'autre ; la date, rangée 2, colonne 1, dans les trois modes. À une colonne, chacun reprend l'ordre du texte. */ .f-livraison .champ-transporteur{display:flex;flex-direction:column;gap:10px;min-width:0} .f-livraison fieldset.champ-port{grid-column:auto;grid-template-columns:minmax(0,1fr);gap:6px} .f-livraison .champ-date{grid-column:1;grid-row:2} /* Retours du 16/09, point 1 : un seul des trois libellés de la date, celui du mode choisi ; « date prévue » à préciser. */ .f-livraison .champ-date .dl{display:none} .f-livraison .champ-date .dl-neutre{display:inline} .f-livraison:has(select[name="remise"] option:is([value="domicile"],[value="point_relais"],[value="main_propre"]):checked) .champ-date .dl-neutre{display:none} .f-livraison:has(select[name="remise"] option:is([value="domicile"],[value="point_relais"]):checked) .champ-date .dl-expedition{display:inline} .f-livraison:has(select[name="remise"] option[value="main_propre"]:checked) .champ-date .dl-remise{display:inline} @media (max-width:720px){.f-livraison .champ-date{grid-row:auto} .formulaire.f-livraison,.f-livraison fieldset{grid-template-columns:minmax(0,1fr)}} /* L'écran « Modalités de paiement » (lot 11c) : les conditions en choix, le nombre de jours dessous ; la phrase d'échéance sur toute la largeur, sous les conditions. */ .formulaire.f-paiement{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .f-paiement fieldset{grid-column:1/-1;border:0;margin:0;padding:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px} .f-paiement legend{font-size:13px;font-weight:600;color:var(--t2);padding:0;margin-bottom:6px} .f-paiement .choix{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;flex-direction:row; font-weight:500;color:var(--t1)} .f-paiement .choix input{width:auto;margin-top:3px} .f-paiement .echeance{grid-column:1/-1;margin:0} /* L'acompte et le délai selon les conditions (lot 14a, R13) : l'acompte pour « À réception », le délai pour « À n jours de la facture ». Sans script, par :has ; la lecture du formulaire ne garde l'acompte qu'avec « À réception ». */ .f-paiement .champ-acompte{display:none} .f-paiement:has(input[name="conditions"][value="reception"]:checked) .champ-acompte{display:block} .f-paiement:has(input[name="conditions"][value="jours"]:checked) .champ-acompte{display:block} .f-paiement .champ-delai{display:none} .f-paiement:has(input[name="conditions"][value="jours"]:checked) .champ-delai{display:block} .f-paiement .champ-moyen{display:flex;gap:12px;align-items:flex-end} .f-paiement .champ-moyen > *{flex:1 1 0;min-width:0} .f-paiement .champ-precision{display:none} .f-paiement:has(select[name="moyen"] option[value="autre"]:checked) .champ-precision{display:block} @media (max-width:720px){.formulaire.f-paiement,.f-paiement fieldset{grid-template-columns:minmax(0,1fr)}} /* L'écran Validation (lot 11d-1, renommé au lot 14b) : les alertes en tête, celles qui bloquent en rouge ; chaque bloc lu en deux colonnes, le libellé à gauche, la valeur à droite ; « Valider la commande » en bas à droite, avec ce qu'il fait. */ /* ⚠ LES ALERTES SE VOIENT (lot 14c, R14 ; Olivier : « les alertes doivent être plus visible ») : des cartes, un « ! » en tête, ambre si elle informe, rose si elle bloque. Le signe ET la couleur, jamais la couleur seule. */ .alertes{list-style:none;margin:0 4px 16px;padding:0;display:grid;gap:8px} .alertes .alerte{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--line); border-inline-start:4px solid var(--am);border-radius:var(--rm);background:var(--aml);color:var(--t1); font-size:14px;font-weight:600} .alertes .alerte::before{content:"!";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%; background:var(--am);color:#fff;font-size:12px;font-weight:800} .alertes .alerte.bloque{border-color:var(--rd);background:var(--rdl);color:var(--rd)} .alertes .alerte.bloque::before{background:var(--rd)} /* Le tableau des articles de l'écran Validation (lot 14c, R14) : code, libellé, quantité, PU, remise en % et en euros, montant. Sur écran étroit : le libellé, la quantité et le montant. Les totaux en dessous, séparés du tableau. */ .t-validation{--cols:minmax(80px,120px) minmax(0,1fr) 56px 96px 70px 96px 110px;margin:0 4px 12px} /* ⚠ « recap-totaux », PAS « totaux » : ce nom porte déjà la barre des totaux d'une pièce (en ligne, en carte), et la liste des totaux de la Validation en héritait (vu sur capture). */ /* ⚠ LES TOTAUX EN ENCADRÉ À DROITE (lot 14c′ ; Olivier : « cet affichage est moche et pas claire ») : ils ferment le tableau, les montants s'alignent à droite, et le grand total se lit d'abord — en gras, plus grand, sous un filet. */ .recap.recap-totaux{margin:12px 4px 18px;margin-inline-start:auto;max-width:420px;padding:14px 18px; grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;background:var(--surf);border:1px solid var(--line); border-radius:var(--rl);box-shadow:var(--sh)} .recap.recap-totaux dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .recap.recap-totaux dt:last-of-type,.recap.recap-totaux dd:last-of-type{padding-top:10px;border-top:1px solid var(--line2); font-size:16px;font-weight:800;color:var(--t1)} /* Le détail des paiements d'une commande (lot A, 24/09) : date, moyen, référence, sur quelle pièce, montant. Il vit DANS le bloc « paiement » du résumé, sous les deux lignes récapitulatives — d'où la marge réduite en haut : le tableau prolonge le récapitulatif, il n'ouvre pas une section. */ .t-paiements{--cols:96px 110px minmax(0,1fr) minmax(0,1.1fr) 110px;margin:2px 4px 6px} /* ⚠ Sur écran étroit, le MOYEN et la RÉFÉRENCE tombent — jamais « sur » ni « montant ». Une référence de virement se retrouve sur la pièce ; « sur quelle pièce » est la seule réponse à « pourquoi ce paiement n'apparaît pas sur ma commande », et un tableau de paiements sans montant ne sert à rien. ⚠ LE SEUIL EST 900, PAS 720, ET LA 5e COLONNE SE RÉTABLIT EXPLICITEMENT. La règle générale des tableaux masque les 3e ET 5e colonnes sous 900 px — elle est pensée pour la liste des tiers et s'applique à tous. Sans ce rétablissement, la colonne « montant » disparaissait sous 900, et une media query posée à 720 n'y changeait rien. Mesuré le 24/09 par captures/rendre-paiements-0924.mjs : à 390 px, il ne restait que « date · sur ». */ @media (max-width:900px){ .t-paiements{--cols:84px minmax(0,1fr) 92px} .t-paiements .tab-tete > :nth-child(2),.t-paiements .tab-l > :nth-child(2), .t-paiements .tab-tete > :nth-child(3),.t-paiements .tab-l > :nth-child(3){display:none} .t-paiements .tab-tete > :nth-child(5),.t-paiements .tab-l > :nth-child(5){display:block} } /* ⚠ « sur » PORTE UN TEXTE ET PARFOIS UNE PASTILLE : les deux doivent tenir sans se couper à mi-mot. Ils passent à la ligne plutôt que de déborder — une ligne de tableau plus haute se lit, un mot coupé non. Mesuré à 390 px : « cette commande simulation » se tronquait. */ .t-paiements .tab-l > :nth-child(4){display:flex;flex-wrap:wrap;align-items:center;gap:4px; white-space:normal;line-height:1.35} @media (max-width:720px){ .t-validation{--cols:minmax(0,1fr) 56px 110px} .t-validation .tab-tete > :nth-child(1),.t-validation .tab-l > :nth-child(1), .t-validation .tab-tete > :nth-child(n+4):nth-child(-n+6),.t-validation .tab-l > :nth-child(n+4):nth-child(-n+6){display:none} } .recap{display:grid;grid-template-columns:minmax(0,16em) minmax(0,1fr);gap:6px 18px;margin:0 4px 14px} .recap dt{color:var(--t2);font-size:13.5px} .recap dd{margin:0;color:var(--t1);font-weight:600;overflow-wrap:anywhere} /* « Modifier » en BOUT de ligne, après le titre et son filet (ordres 1 et 2) : sans ordre, il passait devant le titre. */ .sec-action .lien{order:3;flex:none;font-size:13px;font-weight:600} .barre-bas.validation{align-items:center;gap:16px;flex-wrap:wrap} .barre-bas.validation .note{margin:0} @media (max-width:720px){.recap{grid-template-columns:minmax(0,1fr);gap:2px}.recap dd{margin-bottom:8px}} /* Sur écran étroit, les totaux gardent leurs deux colonnes : un montant sous son libellé ne se compare plus. */ @media (max-width:720px){.recap.recap-totaux{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;max-width:none} .recap.recap-totaux dd{margin-bottom:0}} /* La page « Choisir un produit » (lot 8) : la recherche et ses filtres sur une ligne, et un « Choisir » à la taille de son mot. */ /* ── LE DIALOGUE DE RECHERCHE (lot 8″, 12/09) ──────────────────────────────── ⚠ RENDU DÉJÀ OUVERT PAR LE SERVEUR (« dialog open ») : aucun script, sous script-src 'none'. ⚠ CE QU'UN DIALOGUE NON MODAL N'A PAS : ni voile, ni fermeture par Échap. Le voile est donc dessiné ET c'est un LIEN — un clic à l'extérieur ferme ; « Fermer » en est un autre. ⚠ LA SAISIE RESTE VISIBLE DERRIÈRE : c'est tout l'objet de la demande d'Olivier. ⚠ LES REPÈRES ONT QUITTÉ CET ÉCRAN AVEC SA PAGE (arbitrage xxxii) : leurs règles sont retirées avec eux — un style sans balise devient un piège. Le motif reste décrit dans hubs-coordinator/design/jetons/reperes.md, sans écran aujourd'hui. */ /* ⚠ LE VOILE ASSOMBRIT, IL NE FLOUTE PAS : la saisie doit rester LISIBLE derrière — c'est la raison même du dialogue (« je veux que cet écran soit sous forme d'un popup »). Un flou la rendait illisible, donc inutile. */ .voile{position:fixed;inset:0;z-index:30;background:rgba(8,12,16,.28)} dialog.dlg-choisir{position:fixed;z-index:31;inset:auto;top:50%;left:50%; transform:translate(-50%,-50%);width:min(1120px,calc(100vw - 24px)); max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow:auto;margin:0;padding:20px; border:1px solid var(--line);border-radius:var(--rxl);color:var(--t1); background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--sh2,var(--sh))} .dlg-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .dlg-tete strong{font-size:16px;font-weight:800} /* Dans un dialogue, la place est plus courte que sur une page : les colonnes fixes se serrent pour que le NOM du produit reste lisible — c'est lui qu'on cherche. */ .dlg-choisir .t-choisir{--cols:minmax(0,1fr) 118px 96px 58px 78px 96px 112px 92px} @media(max-width:900px){dialog.dlg-choisir{padding:14px}} .formulaire.f-choisir{grid-template-columns:minmax(200px,2fr) repeat(auto-fit,minmax(196px,1fr))} /* ⚠ « Chercher » À LA TAILLE DE SON MOT, EN BOUT DE LIGNE : la règle générale des formulaires étire un bouton sur toute la largeur, ce qui en faisait ici une barre sous les filtres. */ .formulaire.f-choisir .cta{grid-column:auto;width:auto;align-self:end;padding:12px 22px} .t-choisir .cta{width:auto;padding:6px 14px;font-size:12.5px} @media(max-width:900px){ /* Sur écran étroit : le produit, ce qui est en stock, et le geste. Le reste se lit sur la fiche du produit — huit colonnes sur un téléphone ne se lisent pas. */ .t-choisir{--cols:minmax(0,1fr) 92px 104px} .t-choisir .tab-tete > :nth-child(n+2):nth-child(-n+4), .t-choisir .tab-l > :nth-child(n+2):nth-child(-n+4), .t-choisir .tab-tete > :nth-child(n+6):nth-child(-n+7), .t-choisir .tab-l > :nth-child(n+6):nth-child(-n+7){display:none} } .tab-l.envoi-direct .tab-nom strong{color:var(--t2)} @media(max-width:900px){ /* Sur écran étroit : le produit, « en stock » et le geste. Les quatre autres états restent sur la page d'un produit (« Ajuster »). */ .t-stocks{--cols:minmax(0,1fr) 140px 96px} .t-stocks .tab-tete > :nth-child(n+3):nth-child(-n+6), .t-stocks .tab-l > :nth-child(n+3):nth-child(-n+6){display:none} } /* ⚠ LA LIGNE « + » ET « FERMER » ONT DISPARU (lot 13, arbitrage lxxxviii) : sur un brouillon, la ligne d'ajout reste ouverte. Leurs règles sont parties avec eux — un style sans balise devient un piège pour qui le relit. */ /* Le cumul, collé au bas de l'écran pendant qu'on saisit — dès zéro ligne. */ .cumul{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:18px; flex-wrap:wrap;margin-top:12px;padding:12px 18px;background:var(--surf); border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh); font-size:13px;color:var(--t3);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .cumul span:first-child{margin-right:auto} .cumul b{color:var(--t1);font-variant-numeric:tabular-nums;margin-left:5px} .cumul .fort b{font-size:15px;font-weight:800} @media(max-width:900px){ /* Sur écran étroit, il reste désignation, quantité, montant et action. Le repli générique de .tab cache la 3e et la 5e cellule : ici la 3e est la quantité, qu'on remontre ; on cache la référence, le PU HT, la remise (5e) et la TVA. */ /* ⚠ SUR TÉLÉPHONE, LA VIGNETTE RESTE ET LA RÉFÉRENCE S'EFFACE (lot 8′) : c'est la photo qu'Olivier veut voir, pas le code. La colonne se réduit à la taille de l'image. */ /* ⚠ SUR TÉLÉPHONE, UNE LIGNE D'ARTICLE TIENT SUR DEUX RANGS (lot 11b, vu sur capture à 390 px). En ajoutant « En stock », les colonnes de largeur fixe et leurs espaces prenaient toute la carte : la désignation, seule colonne souple, tombait à quelques pixels et disparaissait — on ne savait plus quel article portait la ligne. Rang 1 : la vignette (sur les deux rangs) et la DÉSIGNATION, sur toute la largeur. Rang 2 : la quantité, « En stock », le montant HT et les actions, chacun dans sa colonne. ⚠ LES CELLULES SONT PLACÉES PAR LEUR NUMÉRO : 1 vignette, 2 désignation, 3 qté, 4 en stock, 5 PU HT, 6 remise, 7 TVA, 8 montant, 9 actions. Le PU (5, repli générique), la remise et la TVA restent cachés. ⚠ L'EN-TÊTE NE GARDE QUE LES TITRES DU RANG 2, posés sur les mêmes colonnes : « Réf. » et « Désignation » se lisent d'eux-mêmes sur la ligne. */ /* ⚠ LA COLONNE DES ACTIONS À SA TAILLE (retours du 16/09, point 2, mesuré à 390 px) : à 66 px, trois boutons ronds débordaient sur le montant (« 258,00 » sous le crayon). Boutons de 30 px, colonne « auto ». */ .t-lignes{--cols:34px minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) auto} .t-lignes .tab-l .rond{width:30px;height:30px;border-radius:10px} .t-lignes .tab-l{grid-template-rows:auto auto;row-gap:4px} .t-lignes .l-ref-txt, .t-lignes .tab-tete > :nth-child(1),.t-lignes .tab-tete > :nth-child(2), .t-lignes .tab-tete > :nth-child(6),.t-lignes .tab-l > :nth-child(6), .t-lignes .tab-tete > :nth-child(7),.t-lignes .tab-l > :nth-child(7){display:none} .t-lignes .tab-l > :nth-child(1){display:block;grid-column:1;grid-row:1 / span 2;align-self:start} .t-lignes .tab-l > :nth-child(2){grid-column:2 / -1;grid-row:1} .t-lignes .tab-tete > :nth-child(3),.t-lignes .tab-l > :nth-child(3){display:block;grid-column:2} .t-lignes .tab-tete > :nth-child(4),.t-lignes .tab-l > :nth-child(4){display:block;grid-column:3} .t-lignes .tab-tete > :nth-child(8),.t-lignes .tab-l > :nth-child(8){grid-column:4} .t-lignes .tab-tete > :nth-child(9),.t-lignes .tab-l > :nth-child(9){grid-column:5} .t-lignes .tab-l > :nth-child(n+3){grid-row:2} .l-saisie{display:flex;flex-wrap:wrap} .l-saisie > *{flex:1 1 110px} .l-saisie .c-nom{flex-basis:100%} .l-saisie > .vlab{display:none} } .totaux{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap; margin:10px 4px 0;font-size:13px;color:var(--t3)} .totaux b{color:var(--t1);font-variant-numeric:tabular-nums;margin-left:5px} .totaux .fort b{font-size:15px;font-weight:800} /* ── Boutons ronds d'action ──────────────────────────────────────────────── */ .rond{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none; background:var(--bg3);border:1px solid var(--line);color:var(--t2);cursor:pointer; text-decoration:none;transition:background .15s,color .15s,transform .12s;padding:0} .rond:hover{background:var(--acl);color:var(--ac)} .rond:active{transform:scale(.94)} .rond.danger:hover{background:var(--rdl);color:var(--rd)} .rond.fantome{background:none;border-color:transparent;pointer-events:none} .enligne{display:inline;flex:none} /* ── Fiche ───────────────────────────────────────────────────────────────── */ .fiche{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin:14px 0 4px; padding:20px;border-radius:var(--rxl);background:var(--surf);border:1px solid var(--line); box-shadow:var(--sh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .fiche-txt{flex:1;min-width:0} .fiche h1{font-size:22px;word-break:break-word} .retour{display:inline-flex;align-items:center;gap:6px;color:var(--t2);text-decoration:none; font-size:13.5px;font-weight:700;margin-bottom:2px} .retour:hover{color:var(--ac)} h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0} h1 b{color:var(--ac)} .sous{color:var(--t2);margin:4px 0 0;font-size:13.5px} code{font-family:var(--f-mono);font-size:.9em} /* ── Formulaire ──────────────────────────────────────────────────────────── */ .formulaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px; align-items:end;background:var(--surf);border:1px solid var(--line); border-radius:var(--rxl);padding:20px;box-shadow:var(--sh); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} /* ⚠ LES TITRES DE CHAMP SONT DU TEXTE COURANT (typographie, 11/09 ; hubs-coordinator design/jetons/typographie.md). 11 px, graisse 800, minuscules forcées et lettres espacées : un style de capitales appliqué à des minuscules, qu'Olivier trouvait laid (« je n'aime pas cette fonte "fournisseur", "catégorie" »). Les libellés sont déjà écrits dans la casse de la phrase ; ne plus les forcer suffit — et « SIRET », « TVA » retrouvent leurs capitales. */ label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600; color:var(--t2)} label.large{grid-column:1/-1} input{font:inherit;font-size:14.5px;padding:12px 15px;border:1px solid var(--line2); border-radius:var(--rm);background:var(--bg3);color:var(--t1);min-width:0; letter-spacing:normal;font-weight:500} input::placeholder{color:var(--t3)} input:focus,select:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent} .formulaire .cta{grid-column:1/-1} .formulaire .large,.err.large{grid-column:1/-1} /* ⚠ LA CRÉATION D'UNE COMMANDE : TROIS COLONNES ÉGALES (Olivier, 11/09). En auto-fit, les champs pleine largeur occupent toutes les colonnes, qu'auto-fit ne replie donc pas : les trois menus n'en prenaient que trois sur neuf, et « Remise en main propre » était coupé. */ .formulaire.f-commande{grid-template-columns:repeat(3,minmax(0,1fr))} /* ⚠ ALIGNÉS PAR LE HAUT (lot 10, Olivier, 14/09 : « pas alignés ; il faut les aligner »). Par le bas (règle générale du formulaire), un champ plus haut que ses voisins — l'aide sous le Client en vente sur BDC — faisait descendre Boutique et Enlèvement : titres et listes quittaient la ligne. */ .formulaire.f-commande{align-items:start} /* ⚠ UN CHOIX PAS ENCORE OUVERT SE GRISE, IL NE SE BARRE PAS : barré (.li.off) veut dire « supprimé », pas « viendra ». La pastille, elle, reste lisible. */ .li-attente{cursor:default} .li-attente .k{opacity:.55} /* ⚠ PRÉCISER L'ENLÈVEMENT OU LA LIVRAISON, DANS L'EN-TÊTE : le seul champ qui se corrige après la création (arbitrage ii du poste 1, 11/09). */ .preciser{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:12px} .preciser label{min-width:230px} /* .cta est pleine largeur par défaut : ici, un bouton à la taille de son mot, à côté du menu, comme dans .actions. L'en-tête qui grandit garde son icône en haut. */ .preciser .cta{width:auto;padding:12px 20px;font-size:14px} .fiche:has(.preciser){align-items:flex-start} /* Les tuiles ne se collent plus au bouton : la section de rattachement qui les séparait a quitté la fiche (Olivier, 11/09). */ .actions + .tuiles{margin-top:24px} /* ── LES DROITS EN CASES À COCHER (2026-09-07) ─────────────────────────────── ⚠ Le formulaire demandait de TAPER le droit dans un champ libre : personne ne pouvait savoir ce qui existait, et une faute de frappe accordait un droit inerte que rien ne vérifierait jamais. Ici tout le registre est visible, et chaque case porte ce que le droit OUVRE — pas seulement sa clé technique. */ .droits-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px} .dgroupe{border:1px solid var(--line2);border-radius:var(--rl);padding:12px 14px 6px; background:var(--bg3);min-width:0} /* Les titres de groupe : le style des titres de champ (typographie, 11/09). */ .dgroupe legend,fieldset.roles legend,fieldset.adr legend{font-size:13px;font-weight:600; color:var(--t2);padding:0 6px} .dcase{display:flex;flex-direction:row;align-items:flex-start;gap:11px;padding:9px 4px; letter-spacing:normal;font-weight:500;font-size:14px;color:var(--t1); border-top:1px solid var(--line);cursor:pointer} .dgroupe .dcase:first-of-type{border-top:0} .dcase input[type=checkbox]{width:18px;height:18px;min-width:18px;margin-top:2px; accent-color:var(--ac);padding:0} .dtxt{display:flex;flex-direction:column;gap:3px;min-width:0} .dtxt strong{font-weight:700} .dtxt .sub{font-size:12.5px;color:var(--t3);font-weight:400;line-height:1.45} .dtxt code{font-size:11.5px;color:var(--t3);font-family:var(--mono,ui-monospace,monospace)} /* ⚠ LE DROIT QUI PERMET DE S'ACCORDER TOUS LES AUTRES SE VOIT. */ .dcase.sensible{background:var(--aml,transparent);border-radius:var(--rm)} .dcase.sensible .dtxt strong::after{content:" — sensible";color:var(--am);font-size:11px; font-weight:800;letter-spacing:.08em} /* ⚠ Son PROPRE droit de gérer les accès : coché, verrouillé, et il DIT pourquoi. */ .dcase.verrou{cursor:not-allowed} .dcase.verrou input[type=checkbox]{opacity:.55} /* Les listes déroulantes reprennent la forme des champs — sinon deux grammaires cohabitent dans le même formulaire. */ select{font:inherit;font-size:14.5px;padding:12px 13px;border:1px solid var(--line2); border-radius:var(--rm);background:var(--bg3);color:var(--t1);min-width:0; letter-spacing:normal;font-weight:500;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%), linear-gradient(135deg,var(--t3) 50%,transparent 50%); background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px} /* ⚠ LE CHAMP FAUTIF EST DÉSIGNÉ, pas seulement nommé dans un message. « SIRET invalide » écrit en haut d'un formulaire à huit champs oblige à chercher ; un liseré rouge sur la bonne case ne l'oblige pas. */ label.faux input,label.faux select{border-color:var(--rd); box-shadow:0 0 0 3px var(--rdl)} label.faux{color:var(--rd)} /* Les rôles : des cases à cocher, parce qu'ils SE CUMULENT. Une liste déroulante dirait le contraire. */ fieldset.roles{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center; border:1px solid var(--line);border-radius:var(--rm);padding:12px 15px;margin:0; background:var(--bg3)} .coche{flex-direction:row;align-items:center;gap:8px;padding:7px 13px;border-radius:20px; background:var(--surf);border:1px solid var(--line);cursor:pointer; font-size:13px;font-weight:650;color:var(--t2);letter-spacing:normal} .coche input{width:15px;height:15px;padding:0;min-width:0;accent-color:var(--ac);cursor:pointer} .coche:has(input:checked){background:var(--acl);border-color:transparent;color:var(--ac)} /* ── LE MODE D'UNE ENTITÉ ────────────────────────────────────────────────── ⚠ L'épreuve est peinte en ORANGE, pas en rouge. Le rouge dit « faute » ; l'épreuve n'en est pas une, c'est un état voulu qui durera des semaines. Une alerte rouge permanente s'apprend à ignorer en trois jours — et le jour où quelque chose est vraiment rouge, plus personne ne le voit. */ .mode{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;margin:18px 0 4px; background:var(--surf)} .mode.epreuve{background:var(--aml);border-color:rgba(160,107,58,.34)} .mode.reel{background:var(--grl);border-color:rgba(0,0,0,.06)} .mode-t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800; letter-spacing:.1em;margin-bottom:9px} .mode.epreuve .mode-t{color:var(--am)} .mode.reel .mode-t{color:var(--gr-tx)} .mode p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--t2);max-width:78ch} .mode .pied{margin:0 0 10px} .mode code{font-family:var(--f-mono);font-size:12.5px} .mode form{display:inline-flex;margin:2px 8px 6px 0} /* Les adresses : un bloc par usage, avec la MÊME grille que le formulaire qui les contient — sinon les champs d'adresse s'alignent sur eux-mêmes et le formulaire semble fait de deux morceaux. */ fieldset.adr{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;border:1px solid var(--line);border-radius:var(--rm);padding:12px 15px 16px; margin:0;background:var(--bg3)} fieldset.adr .large{grid-column:1/-1} /* ⚠ Le liseré rouge se pose sur le BLOC, pas sur une case : une adresse incomplète est refusée en tant qu'ensemble, et l'on ne sait pas laquelle des trois cases manquantes l'utilisateur voulait remplir. */ fieldset.adr.faux{border-color:var(--rd);box-shadow:0 0 0 3px var(--rdl)} fieldset.adr.faux legend{color:var(--rd)} /* La barre de recherche : une ligne, pas une carte. */ .filtre{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 4px} .filtre input{flex:1 1 220px} .filtre .cta{width:auto} .cta.sm{width:auto;padding:11px 18px;font-size:13.5px;border-radius:var(--rm)} .lien{color:var(--ac);text-decoration:underline;text-underline-offset:3px; font-size:13.5px;font-weight:700} /* ── La fiche société ─────────────────────────────────────────────────────── */ .logo-soc{width:72px;height:72px;border-radius:var(--rm);object-fit:contain;flex:none; background:var(--bg3);border:1px solid var(--line);padding:6px} .logo-soc.vide{display:grid;place-items:center;color:var(--t3);padding:0} /* ⚠ Un natif : une barre dessinée en CSS aurait exigé une largeur variable, donc un style en ligne — que la CSP ignore EN SILENCE. */ progress.jauge{-webkit-appearance:none;appearance:none;width:100%;height:8px; border:none;border-radius:20px;background:var(--surf2);overflow:hidden; display:block;margin:16px 0 6px} progress.jauge::-webkit-progress-bar{background:var(--surf2);border-radius:20px} progress.jauge::-webkit-progress-value{ background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:20px} progress.jauge::-moz-progress-bar{ background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:20px} .jauge-txt{margin-top:0} /* Le bandeau des empêchements — c'est le cœur de la page, il doit peser. */ .empeche{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .emp{background:var(--rdl);border:1px solid var(--rd);border-radius:var(--rl);padding:15px 17px} .emp.ok{background:var(--grl);border-color:transparent} .emp-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px; color:var(--rd);letter-spacing:-.01em} .emp.ok .emp-t{color:var(--gr-tx)} .emp-l{margin:8px 0 0;padding-left:19px;font-size:12.5px;color:var(--t2);line-height:1.6} .li.manque{background:color-mix(in srgb,var(--rd) 4%,transparent)} .sub.texte{font-family:var(--f-mono);font-size:11.5px;opacity:.75;margin-top:3px} /* Un titre de section À L'INTÉRIEUR d'une carte de formulaire. */ .sec-dans{margin-top:0} input[type=file]{padding:10px 13px;font-size:13.5px;cursor:pointer} input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:13px; padding:7px 13px;margin-right:11px;border:none;border-radius:10px; background:var(--acl);color:var(--ac);cursor:pointer} /* ⚠ Le formulaire société est une SUITE de cartes, pas une carte géante : trente champs d'un bloc sont illisibles, et l'on ne sait plus où l'on en est. */ .societe{display:block} .societe .formulaire{margin-bottom:4px} .cta.grand{margin-top:24px;padding:17px 20px;font-size:16px} /* ── Les marques d'état des sous-onglets ─────────────────────────────────── */ /* ⚠ Trois états, trois signes. Le « sans objet » n'emprunte NI le vert NI le rouge : lui donner le vert ferait croire à un acquis, le rouge à une faute. */ .mq{font-weight:800;font-size:13px;line-height:1;flex:none} .mq.gros{font-size:20px;width:26px;text-align:center} .e-vert .mq,.mq.e-vert{color:var(--gr-tx)} .e-rouge .mq,.mq.e-rouge{color:var(--rd)} .e-sans_objet .mq,.mq.e-sans_objet{color:var(--t3)} .stabs .atab.e-rouge{color:var(--rd)} .stabs .atab.e-vert{color:var(--gr-tx)} .stabs .atab.e-sans_objet{color:var(--t3)} .stabs .atab.on{background:var(--acl)} /* Une ligne de liste qui est un LIEN : elle doit se comporter comme tel. */ .lien-li{text-decoration:none;color:inherit;transition:background .15s} .lien-li:hover{background:var(--bg3)} .fiche.mince{padding:16px 20px} /* Un formulaire tenant sur UNE ligne de liste — renommer sans quitter la page. */ .ligne-form{display:flex;gap:8px;align-items:center;flex:0 0 auto} .ligne-form input{padding:8px 12px;font-size:13.5px;width:170px} @media(max-width:720px){.ligne-form{flex:1 1 100%}.ligne-form input{width:auto;flex:1}} /* ── Les pièces ──────────────────────────────────────────────────────────── */ .titre-type{font-size:14px;font-weight:650;color:var(--t3);letter-spacing:0} .gros-total{font-size:19px} /* Le pied de totaux : aligné à droite, chiffres en colonne. */ .totaux{margin-top:12px;margin-left:auto;max-width:380px;background:var(--surf); border:1px solid var(--line);border-radius:var(--rl);padding:14px 18px;box-shadow:var(--sh)} .tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:5px 0;font-size:14px;color:var(--t2)} .tot b{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums} .tot.fin{font-size:12.5px;color:var(--t3)} .tot.grand{border-top:1px solid var(--line2);margin-top:6px;padding-top:10px;font-size:16px} .tot.grand b{font-size:19px;font-weight:800;color:var(--ac)} /* Les actions : des formulaires côte à côte, pas empilés. */ .actions{display:flex;flex-wrap:wrap;gap:10px} .actions form{flex:0 1 auto} .actions .cta{width:auto;padding:12px 20px;font-size:14px} .cta.ghost{background:var(--surf);color:var(--t1);border:1px solid var(--line2); box-shadow:var(--sh)} .cta.ghost:hover{filter:none;background:var(--bg3)} .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:14px 20px;border:none;border-radius:var(--r);cursor:pointer;font-family:inherit; font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff; background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:var(--shp); transition:filter .15s,transform .12s;text-decoration:none} .cta:hover{filter:brightness(1.08)} .cta:active{transform:scale(.98)} /* ── Notes et messages ───────────────────────────────────────────────────── */ /* ⚠ PAS D'ATTRIBUT style="" DANS LE HTML : la CSP est style-src 'self' SANS unsafe-inline, donc un style en ligne serait ignoré EN SILENCE. Toute règle ponctuelle prend une classe. */ .pied{color:var(--t3);font-size:12.5px;max-width:78ch;margin:12px 4px 0;line-height:1.6} /* ⚠ UN NUMÉRO DE PIÈCE NE SE COUPE PAS EN DEUX. Sur un téléphone, « CM-2026-00007 » se repliait en « CM-2026- » puis « 00007 » : c'est une référence qu'on recopie pour retrouver la commande, et une référence coupée se recopie faux. */ .insec{white-space:nowrap} /* ⚠ UN GESTE ANNULÉ SE VOIT SANS LIRE. Il reste dans la liste — on le barre, on ne l'efface pas — mais sans marque il se lit comme les autres, et le mot « annulée » se trouve trois lignes plus bas. Vu à la capture, pas aux tests : 881 étaient verts. */ .li.barre{opacity:.62} .li.barre .k strong{text-decoration:line-through} .pied strong{color:var(--t2)} .note{color:var(--t3);font-size:13px;line-height:1.55} .note.serre{margin:0} .note strong{color:var(--t2)} /* ⚠ p.ok, PAS .ok — ET C'EST TOUT L'OBJET DE CE COMMENTAIRE (07/09). Le bandeau de message et la PASTILLE de statut se disputaient la classe .ok : une pastille s'écrit span class="badge ok", et comme .ok était déclaré ICI, plus bas que .badge et à spécificité ÉGALE (0,1,0), c'est la CASCADE qui tranchait — en faveur du bandeau. La pastille « acceptée » héritait donc d'un padding 13px 17px, d'un font-size 14px et surtout d'un margin 16px 0 de BANDEAU : une boîte verte deux fois trop grosse, qui débordait de la ligne de 46 px du tableau et cassait la hauteur constante demandée. Le sélecteur porte maintenant l'ÉLÉMENT : un bandeau est un p, une pastille un span. Ne PAS rétablir un .ok nu — la collision reviendrait en silence, et elle ne se voit que sur le seul statut vert d'un écran, donc jamais en relisant. */ p.ok,p.err{border-radius:var(--rm);padding:13px 17px;margin:16px 0;font-size:14px; font-weight:600;border:1px solid transparent} p.ok{background:var(--grl);color:var(--gr-tx)} p.err{background:var(--rdl);color:var(--rd)} /* ── Page de connexion ───────────────────────────────────────────────────── */ .accueil{max-width:27rem;margin:9vh auto;text-align:center} .accueil h1{font-size:30px} .acard{margin-top:22px;text-align:left;background:var(--surf);border:1px solid var(--line); border-radius:var(--rxl);padding:22px;box-shadow:var(--sh); display:flex;flex-direction:column;gap:14px; backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} @media(max-width:720px){ main{padding:16px 12px 48px} .tete{padding:10px 13px} .profil-txt{display:none} .profil{padding:4px;border-radius:50%} .li{flex-wrap:wrap;gap:10px} .k{flex:1 1 60%} .v.large{min-width:0;text-align:left;flex:1 1 100%;order:5} .fiche h1{font-size:19px} .tuile{padding:18px 14px} .formulaire.f-commande{grid-template-columns:minmax(0,1fr)} .chiffre{font-size:25px} /* ⚠ DEUX COLONNES SUR TÉLÉPHONE, PAS UNE. Huit tuiles empilées feraient huit écrans à faire défiler avant d'atteindre la liste qu'elles filtrent. */ .ktuiles,.ktuiles.cinq,.ktuiles.trois{grid-template-columns:repeat(2,1fr);gap:9px;max-width:none} .ktuile{padding:13px 12px 11px} .kfig{font-size:19px} .klab{font-size:11.5px} } main.derriere{min-height:60vh} .fvoile{position:fixed;inset:0;z-index:40;background:rgba(3,9,14,.5); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:f-voile .28s} .fenetre{position:fixed;z-index:41;inset:24px;margin:auto;width:min(1120px,calc(100% - 48px)); height:min(820px,calc(100% - 48px));border-radius:var(--rxl);border:1px solid var(--line);color:var(--t1); background:linear-gradient(180deg,var(--bg),var(--bg3)),var(--bg);box-shadow:0 40px 90px -30px rgba(0,0,0,.6); display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden; animation:f-monte .3s cubic-bezier(.32,.72,0,1)} .fhead{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .fhead h2{font-size:19px;font-weight:700;flex:1;letter-spacing:-.01em;margin:0} .fx{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--line); background:var(--surf);color:var(--t1);text-decoration:none} .fmenu{border-right:1px solid var(--line);padding:12px;overflow-y:auto} .fmenu .stabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;background:none;border:none;box-shadow:none} .fmenu .stabs .atab{justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px} .fmenu .stabs .atab.on{background:var(--ac);color:#fff;box-shadow:var(--shp)} .fcorps{overflow-y:auto;padding:18px 22px 22px;container:reglages/inline-size} .fcorps>:first-child{margin-top:0} @keyframes f-voile{from{opacity:0}} @keyframes f-monte{from{opacity:0;transform:translateY(12px) scale(.98)}} @media (prefers-reduced-motion:reduce){.fvoile,.fenetre{animation:none}} @media (max-width:720px){ .fenetre{inset:0;width:100%;height:100%;border-radius:0;border:none;grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr)} .fmenu{border-right:none;border-bottom:1px solid var(--line);padding:8px 12px} .fmenu .stabs{flex-direction:row;flex-wrap:wrap;gap:4px} .fmenu .stabs .atab{white-space:nowrap;padding:7px 10px;font-size:13px} .fmenu .stabs .atab svg{display:none} .fcorps{padding:16px} } @container reglages (max-width:720px){.profil-fleche{display:none}} @container reglages (max-width:900px){.rang{grid-template-columns:repeat(3,1fr)}} @container reglages (max-width:720px){.rang{grid-template-columns:repeat(2,1fr)}.rcel{padding:12px 13px 11px}} @container reglages (max-width:1150px){ .ra-disposition{grid-template-columns:180px minmax(0,1fr);gap:18px} .t-ref-achat{--cols:minmax(185px,1fr) 100px 100px 80px} .t-ref-achat .tab-tete,.t-ref-achat .tab-l{gap:12px;padding:0 16px} .t-ref-achat .tab-tete{padding-block:13px} .ra-vignette{width:65px;height:66px} .ra-fourniture .tab-nom strong{font-size:13px} .t-ref-achat .tab-l > .ra-prix,.ra-prix strong{font-size:14px} .ra-outils select{max-width:180px;font-size:12px} } @container reglages (max-width:900px){ .ra-disposition{grid-template-columns:minmax(0,1fr);gap:0} .ra-cote{position:static} .ra-cote h2,.ra-cote-note{display:none} .ra-categories{display:flex;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .ra-categorie{flex:none;white-space:nowrap;padding:9px 12px} .ra-categorie b{margin-left:4px} .ra-bascule{margin-top:0;border-top:0;border-radius:7px;padding-top:9px} .ra-outils{margin-bottom:18px} .ra-tete{margin-bottom:20px} .t-ref-achat{--cols:minmax(220px,1fr) 110px 110px 86px} } @container reglages (max-width:650px){ .ra-tete{align-items:flex-start;gap:10px} .ra-tete h1{font-size:26px} .ra-tete p{font-size:12px} .ra-tete .cta{font-size:11px;padding:9px 10px} .ra-nouvelle:popover-open{inset:80px 16px auto 16px;width:auto} .ra-nouvelle .formulaire{grid-template-columns:minmax(0,1fr)} .ra-outils{flex-wrap:wrap;gap:8px} .ra-recherche{flex-basis:100%} .ra-outils select{flex:1;max-width:none;min-width:0} .ra-resultats h2{font-size:15px} .ra-resultats span{font-size:11px} .tab.t-ref-achat{--tab-min:0px} .t-ref-achat .tab-tete{display:none} .t-ref-achat .tab-l{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px 10px;padding:17px;align-items:start} .t-ref-achat .tab-l > :last-child{align-self:center} .t-ref-achat .ra-fourniture{grid-column:1/-1;gap:12px} .ra-vignette{width:74px;height:68px} .ra-fourniture .tab-nom strong{font-size:14px} .ra-prix-mobile{display:block;font-size:10px;color:var(--t3);margin-bottom:4px} .ra-prix small{font-size:10px} .ra-tiroir-corps{padding:20px} .ra-identite{gap:14px} .ra-identite-image{flex-basis:80px;width:80px;height:80px} .ra-identite h2{font-size:20px} .ra-cartes{grid-template-columns:minmax(0,1fr)} .ra-carte{padding:13px} .ra-carte-prix{font-size:21px} .ra-notes .li{flex-wrap:wrap;gap:4px} .ra-notes .li .k{flex-basis:100%} .ra-notes .formulaire{grid-template-columns:minmax(0,1fr)} } @container reglages (max-width:520px){.panneau-sauver .pc-gestes{flex-direction:column;align-items:stretch}} @container reglages (max-width:560px){ .rangs li{flex-wrap:wrap} .rang-ligne{flex:1 1 100%} .rang-ligne input[name="nom"]{flex:1 1 100%} .rangs li form.enligne{margin-left:auto} } @container reglages (max-width:560px){ .rangs.choix .rang-ligne{flex-wrap:wrap} .rangs.choix .rang-ligne select{flex:1 1 100%} .rangs.choix .rang-ligne .rond{margin-left:auto} } @container reglages (max-width:900px){ /* Sur un écran étroit, l'ANNUAIRE sacrifie les rôles et la date — le nom, la nature et le nombre de pièces suffisent à retrouver quelqu'un. ⚠ L'ANNUAIRE SEUL (poste 1, 05/10). Écrite « .tab » le 07/09, cette règle masquait les 3e et 5e cellules de TOUTE table, et la fenêtre des réglages la rejouait sous 900 px : le transport et les catégories y perdaient leurs boutons, le journal sa date. Une autre table garde toutes ses colonnes ; trop large, elle DÉFILE dans son cadre (--tab-min : la largeur sous laquelle elle défile plutôt que d'écraser son nom). */ .tab.t-identites{--cols:minmax(0,1fr) 84px 56px 26px} .t-identites .tab-tete > :nth-child(3),.t-identites .tab-l > :nth-child(3), .t-identites .tab-tete > :nth-child(5),.t-identites .tab-l > :nth-child(5){display:none} .tab{overflow-x:auto} .tab > .tab-tete,.tab > .tab-l{min-width:var(--tab-min,0)} /* ⚠ LES BOUTONS RESTENT À L'ÉCRAN QUAND LA TABLE DÉFILE : collés au bord droit de son cadre. Sans cela, les catégories les rangeaient hors de la fenêtre d'un portable — le défaut même que cette règle répare. */ .tab > .tab-l > .tab-actions{position:sticky;right:0;z-index:1;background:linear-gradient(var(--surf),var(--surf)),var(--bg); box-shadow:-10px 0 10px -8px rgba(20,26,44,.18);padding-left:6px} /* Les largeurs sous lesquelles chaque table défile : ses colonnes fixes, plus 140 px pour son nom (mesuré le 05/10 sur des tables tirées de cette feuille, dans la fenêtre des réglages et à 375 px). */ .t-tiers{--tab-min:790px}.t-pieces{--tab-min:720px}.t-achats{--tab-min:740px}.t-argent{--tab-min:780px} .t-catalogue{--tab-min:830px}.t-ref-achat{--tab-min:600px}.t-stock-fiche{--tab-min:790px}.t-corbeille{--tab-min:730px} .t-journal{--tab-min:870px}.t-categories{--tab-min:880px}.t-metiers{--tab-min:420px}.t-transport{--tab-min:380px} /* ⚠ CONSERVÉ À L'IDENTIQUE, HORS DE LA FENÊTRE : ces écrans de commande ont été dessinés avec ces cellules masquées par l'ancienne règle générale. Écrit ici pour eux seuls, rien ne change sur ces écrans. */ .t-choisir .tab-tete > :nth-child(5),.t-choisir .tab-l > :nth-child(5), .t-lignes .tab-tete > :nth-child(5),.t-lignes .tab-l > :nth-child(5), .t-validation .tab-tete > :nth-child(3),.t-validation .tab-l > :nth-child(3){display:none} } @container reglages (max-width:720px){ /* ⚠ EN COLONNE SUR TELEPHONE : sept etapes en ligne donneraient sept colonnes de 40 px illisibles, ou un defilement horizontal qu'on ne devine pas. */ .prog{grid-auto-flow:row;grid-auto-columns:auto;gap:2px} .prog-e{flex-direction:row;align-items:flex-start;gap:11px;text-align:left; min-width:0;padding:5px 0} /* En colonne, les étapes sont serrées (9 px entre deux pastilles) : le trait laisse 2 px de chaque côté. Du bas de la pastille (5 px de marge + diamètre + 2) au haut de la suivante moins 2 (2 px d’écart entre étapes, 5 px de marge). */ .prog-e::after{top:calc(var(--pt) + 7px);left:calc(var(--pt) / 2 - 1px);width:2px;height:calc(100% - var(--pt) - 2px)} .prog-n{margin-top:4px} } @container reglages (max-width:720px){.bon-gestes{flex:1 1 100%}.bon-gestes .cta{flex:1 1 auto;text-align:center}} @container reglages (max-width:560px){.panneau-journal .f-mouvement{grid-template-columns:minmax(0,1fr)} .journal-stock th:nth-child(5),.journal-stock td:nth-child(5){display:none}} @container reglages (max-width:720px){ .tete-parcours{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "g d"} .tete-parcours .tp-titre{font-size:17px} } @container reglages (max-width:720px){.f-livraison .champ-date{grid-row:auto} .formulaire.f-livraison,.f-livraison fieldset{grid-template-columns:minmax(0,1fr)}} @container reglages (max-width:720px){.formulaire.f-paiement,.f-paiement fieldset{grid-template-columns:minmax(0,1fr)}} @container reglages (max-width:900px){ .t-paiements{--cols:84px minmax(0,1fr) 92px} .t-paiements .tab-tete > :nth-child(2),.t-paiements .tab-l > :nth-child(2), .t-paiements .tab-tete > :nth-child(3),.t-paiements .tab-l > :nth-child(3){display:none} .t-paiements .tab-tete > :nth-child(5),.t-paiements .tab-l > :nth-child(5){display:block} } @container reglages (max-width:720px){ .t-validation{--cols:minmax(0,1fr) 56px 110px} .t-validation .tab-tete > :nth-child(1),.t-validation .tab-l > :nth-child(1), .t-validation .tab-tete > :nth-child(n+4):nth-child(-n+6),.t-validation .tab-l > :nth-child(n+4):nth-child(-n+6){display:none} } @container reglages (max-width:720px){.recap{grid-template-columns:minmax(0,1fr);gap:2px}.recap dd{margin-bottom:8px}} @container reglages (max-width:720px){.recap.recap-totaux{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;max-width:none} .recap.recap-totaux dd{margin-bottom:0}} @container reglages (max-width:900px){dialog.dlg-choisir{padding:14px}} @container reglages (max-width:900px){ /* Sur écran étroit : le produit, ce qui est en stock, et le geste. Le reste se lit sur la fiche du produit — huit colonnes sur un téléphone ne se lisent pas. */ .t-choisir{--cols:minmax(0,1fr) 92px 104px} .t-choisir .tab-tete > :nth-child(n+2):nth-child(-n+4), .t-choisir .tab-l > :nth-child(n+2):nth-child(-n+4), .t-choisir .tab-tete > :nth-child(n+6):nth-child(-n+7), .t-choisir .tab-l > :nth-child(n+6):nth-child(-n+7){display:none} } @container reglages (max-width:900px){ /* Sur écran étroit : le produit, « en stock » et le geste. Les quatre autres états restent sur la page d'un produit (« Ajuster »). */ .t-stocks{--cols:minmax(0,1fr) 140px 96px} .t-stocks .tab-tete > :nth-child(n+3):nth-child(-n+6), .t-stocks .tab-l > :nth-child(n+3):nth-child(-n+6){display:none} } @container reglages (max-width:900px){ /* Sur écran étroit, il reste désignation, quantité, montant et action. Le repli générique de .tab cache la 3e et la 5e cellule : ici la 3e est la quantité, qu'on remontre ; on cache la référence, le PU HT, la remise (5e) et la TVA. */ /* ⚠ SUR TÉLÉPHONE, LA VIGNETTE RESTE ET LA RÉFÉRENCE S'EFFACE (lot 8′) : c'est la photo qu'Olivier veut voir, pas le code. La colonne se réduit à la taille de l'image. */ /* ⚠ SUR TÉLÉPHONE, UNE LIGNE D'ARTICLE TIENT SUR DEUX RANGS (lot 11b, vu sur capture à 390 px). En ajoutant « En stock », les colonnes de largeur fixe et leurs espaces prenaient toute la carte : la désignation, seule colonne souple, tombait à quelques pixels et disparaissait — on ne savait plus quel article portait la ligne. Rang 1 : la vignette (sur les deux rangs) et la DÉSIGNATION, sur toute la largeur. Rang 2 : la quantité, « En stock », le montant HT et les actions, chacun dans sa colonne. ⚠ LES CELLULES SONT PLACÉES PAR LEUR NUMÉRO : 1 vignette, 2 désignation, 3 qté, 4 en stock, 5 PU HT, 6 remise, 7 TVA, 8 montant, 9 actions. Le PU (5, repli générique), la remise et la TVA restent cachés. ⚠ L'EN-TÊTE NE GARDE QUE LES TITRES DU RANG 2, posés sur les mêmes colonnes : « Réf. » et « Désignation » se lisent d'eux-mêmes sur la ligne. */ /* ⚠ LA COLONNE DES ACTIONS À SA TAILLE (retours du 16/09, point 2, mesuré à 390 px) : à 66 px, trois boutons ronds débordaient sur le montant (« 258,00 » sous le crayon). Boutons de 30 px, colonne « auto ». */ .t-lignes{--cols:34px minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) auto} .t-lignes .tab-l .rond{width:30px;height:30px;border-radius:10px} .t-lignes .tab-l{grid-template-rows:auto auto;row-gap:4px} .t-lignes .l-ref-txt, .t-lignes .tab-tete > :nth-child(1),.t-lignes .tab-tete > :nth-child(2), .t-lignes .tab-tete > :nth-child(6),.t-lignes .tab-l > :nth-child(6), .t-lignes .tab-tete > :nth-child(7),.t-lignes .tab-l > :nth-child(7){display:none} .t-lignes .tab-l > :nth-child(1){display:block;grid-column:1;grid-row:1 / span 2;align-self:start} .t-lignes .tab-l > :nth-child(2){grid-column:2 / -1;grid-row:1} .t-lignes .tab-tete > :nth-child(3),.t-lignes .tab-l > :nth-child(3){display:block;grid-column:2} .t-lignes .tab-tete > :nth-child(4),.t-lignes .tab-l > :nth-child(4){display:block;grid-column:3} .t-lignes .tab-tete > :nth-child(8),.t-lignes .tab-l > :nth-child(8){grid-column:4} .t-lignes .tab-tete > :nth-child(9),.t-lignes .tab-l > :nth-child(9){grid-column:5} .t-lignes .tab-l > :nth-child(n+3){grid-row:2} .l-saisie{display:flex;flex-wrap:wrap} .l-saisie > *{flex:1 1 110px} .l-saisie .c-nom{flex-basis:100%} .l-saisie > .vlab{display:none} } @container reglages (max-width:720px){.ligne-form{flex:1 1 100%}.ligne-form input{width:auto;flex:1}} @container reglages (max-width:720px){ main{padding:16px 12px 48px} .tete{padding:10px 13px} .profil-txt{display:none} .profil{padding:4px;border-radius:50%} .li{flex-wrap:wrap;gap:10px} .k{flex:1 1 60%} .v.large{min-width:0;text-align:left;flex:1 1 100%;order:5} .fiche h1{font-size:19px} .tuile{padding:18px 14px} .formulaire.f-commande{grid-template-columns:minmax(0,1fr)} .chiffre{font-size:25px} /* ⚠ DEUX COLONNES SUR TÉLÉPHONE, PAS UNE. Huit tuiles empilées feraient huit écrans à faire défiler avant d'atteindre la liste qu'elles filtrent. */ .ktuiles,.ktuiles.cinq,.ktuiles.trois{grid-template-columns:repeat(2,1fr);gap:9px;max-width:none} .ktuile{padding:13px 12px 11px} .kfig{font-size:19px} .klab{font-size:11.5px} } @container reglages (max-width:1200px){.tete{gap:12px}.tete>.atabs{order:3;flex-basis:100%;min-height:44px}.tete>.fin{margin-left:auto}.tete>.atabs .atab{padding-block:9px}} @container reglages (max-width:720px){.tete>.atabs{scrollbar-width:thin;scrollbar-color:var(--ac) transparent;padding-bottom:5px}.tete>.atabs::-webkit-scrollbar{display:block;height:4px}.tete>.atabs::-webkit-scrollbar-thumb{background:var(--ac);border-radius:4px}.tete>.atabs::after{content:"›";position:sticky;right:0;background:var(--bg);padding:8px;align-self:stretch;display:grid;place-items:center}.cf-entete h1{font-size:23px}main,main:has(.cf-page){padding:18px 16px 48px}.tete{padding:10px 16px}.mot{font-size:14px}.adv-entete{align-items:start;flex-wrap:wrap;gap:12px}.adv-entete h1{font-size:23px}.tiers-filtres label{flex:1 1 140px}.tiers-filtres select{min-width:0;width:100%}.tiers-filtres label:first-child{flex-basis:100%}.t-tiers{--tab-min:700px}.adv-fenetre-head,.adv-fenetre-corps{padding:18px}.adv-fenetre .formulaire,.tiers-complement-champs,.tiers-adresses-champs{grid-template-columns:minmax(0,1fr)}.adv-fenetre{max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}.adv-fenetre-pied{flex-wrap:wrap}} @container reglages (max-width:600px){.off-modules{grid-template-columns:1fr}.off-table{min-width:640px}.off-tranches th,.off-tranches td{padding:6px 4px}.off-recap{text-align:left;line-height:1.6}.off-form .adv-fenetre-pied{gap:12px}} @container reglages (max-width:720px){.prestation-carte .off-champs{grid-template-columns:minmax(0,1fr)}} @container reglages (max-width:850px){.achat-fiche{grid-template-columns:1fr}.achat-description{grid-template-columns:1fr 1fr}.achat-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}.gestion-grille{grid-template-columns:1fr 1fr}.gestion-paiement{grid-template-columns:1fr}.gestion-grand{font-size:28px}.gestion-infos{grid-template-columns:1fr 1fr}} @container reglages (max-width:500px){.gestion-grille{grid-template-columns:1fr}.gestion-card{padding:15px}.achat-nombres{grid-template-columns:1fr 1fr}.gestion-modal{padding:18px}.gestion-filtres label{flex-basis:40%}} @container reglages (max-width:520px){.tarif-composant-identite{flex-wrap:wrap}.tarif-composant-prix{margin-left:0}.tarif-composant-choix{grid-template-columns:1fr}} @container reglages (max-width:1050px){.pc-colonnes,.pc-colonnes-avoir{grid-template-columns:minmax(0,1fr)}.pc-montants{position:static}} @container reglages (max-width:650px){.pc-entete,.pc-titre-action{flex-wrap:wrap}.pc-champs-3,.pc-ligne-principal,.pc-remise .pc-champs,.pc-credit-champs{grid-template-columns:1fr}.pc-ligne-valeurs{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-ligne-total{align-items:flex-start}.pc-ligne{padding:16px}.pc-carte>header{padding:16px}.pc-champs{padding:16px}.pc-donnees{padding:8px 16px}.pc-recherche{flex-wrap:wrap}.pc-table{min-width:620px}.pc-interne .pc-table{min-width:560px}.pc-champ-ligne{flex-wrap:wrap}} @container reglages (max-width:720px){.pc-titre h1{font-size:26px}} main:has(.cf-page){max-width:1600px;padding-inline:28px}.cf-page{padding-top:24px}.cf-page .cta,.cf-dialog .cta{width:auto;flex:0 0 auto;padding:11px 18px;min-height:42px;box-sizing:border-box}.cf-page .cta.sec,.cf-dialog .cta.sec{background:var(--surf);border:1px solid var(--line2);color:var(--t2);box-shadow:none}.cf-filtres label{flex:0 0 auto}.cf-filtres select{min-width:140px}.cf-entete>div{min-width:0}.cf-pied .cta{min-width:130px}.cf-table td:nth-child(2){min-width:160px}.cf-entete{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.cf-entete h1{font-size:28px;margin:5px 0;letter-spacing:-.6px}.cf-filtres{display:flex;align-items:end;gap:14px;margin:24px 0}.cf-filtres label{display:grid;gap:6px;font-size:13px}.cf-filtres input{min-width:240px}.cf-filtres .sub{margin-left:auto;align-self:center}.cf-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surf)}.cf-table{width:100%;border-collapse:collapse;font-size:14px}.cf-table th{padding:18px 14px;background:var(--acl);font-weight:600;text-align:center;white-space:nowrap}.cf-table th:first-child{text-align:left}.cf-table td{padding:20px 14px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}.cf-table td:first-child{text-align:left;min-width:220px}.cf-ligne{cursor:pointer}.cf-ligne:hover{background:var(--acl)}.cf-produit{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none}.cf-produit img{width:55px;height:55px;object-fit:contain}.cf-produit small{display:block;font-size:12px;margin-top:6px;color:var(--t3)}.cf-fonctions{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.cf-fonction{display:inline-flex;color:var(--ac);border-radius:9px;background:var(--acl);padding:7px}.cf-prix-lien{display:inline-flex;gap:10px;align-items:center;white-space:nowrap;font-weight:600;color:inherit}.cf-marge{display:block;font-weight:600;white-space:nowrap}.cf-marge small{display:block;margin-top:5px;font-size:12px;font-weight:400}.cf-marge.rouge{color:#ae3e4d}.cf-marge.orange{color:#93651f}.cf-marge.vert{color:#267254}.cf-onglets{display:flex;gap:28px;border-bottom:1px solid #ded8e7;margin-bottom:24px}.cf-onglets a{padding:12px 0;text-decoration:none}.cf-onglets [aria-current]{border-bottom:2px solid #7957a5;font-weight:600}.cf-produit-grille{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px}.cf-carte{padding:24px;border-radius:16px;background:var(--surf);border:1px solid var(--line)}.cf-carte h2{font-size:17px;margin:0 0 20px}.cf-visuel{display:flex;align-items:center;justify-content:center;min-height:320px}.cf-visuel img{width:100%;max-height:52vh;object-fit:contain}.cf-details{display:grid;grid-template-columns:1fr 1.5fr;gap:14px 20px;margin:24px 0}.cf-details dt{color:var(--t3)}.cf-details dd{margin:0;overflow-wrap:anywhere}.cf-grand-prix{font-size:28px;font-weight:600;text-decoration:none;color:inherit}.cf-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:30px;width:min(780px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--t1);box-shadow:0 24px 80px #24163230;z-index:100}.cf-dialog::backdrop{background:#251b3c66;backdrop-filter:blur(3px)}.cf-dialog .cf-entete h1{font-size:24px}.cf-fermer{display:flex;padding:8px;color:inherit;border:0;background:none;cursor:pointer;border-radius:8px}.cf-prix-grille{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0}.cf-prix-grille label{font-size:13px;color:var(--t3)}#prix-saisie{font-size:34px;font-weight:600;font-family:inherit;width:100%;margin:10px 0 20px;padding:14px;border:1px solid #d7cce6;border-radius:12px}.cf-prix-grille input[type=range]{width:100%;accent-color:#7957a5;margin:12px 0}.cf-plancher{display:flex;justify-content:space-between;gap:10px;font-size:13px}.cf-comparaison{display:grid;gap:12px}.cf-marge-carte{padding:18px;background:var(--surf2);border-radius:12px;display:grid;gap:10px}.cf-marge-carte>span{font-size:13px}.cf-marge-carte output{font-size:26px}.cf-marge-carte>small{font-size:12px;color:var(--t3)}.cf-pied{display:flex;justify-content:flex-end;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:22px}.cf-dialog button:disabled{opacity:.45;cursor:not-allowed} @media(max-width:800px){.cf-produit-grille,.cf-prix-grille{grid-template-columns:1fr}.cf-filtres{flex-wrap:wrap}.cf-filtres input{min-width:160px}.cf-entete{align-items:start}.cf-table{font-size:13px}.cf-dialog{padding:22px}.cf-entete h1{font-size:24px}.cf-marge-carte output{font-size:22px}} .cf-fonctions-libellees .cf-fonction{gap:8px;border-radius:24px;font-size:12px;padding:7px 10px}.cf-fonctions-libellees .cf-fonction>span{color:var(--t1)}.cf-fonctions-libellees svg{width:20px;height:20px;flex:none}.cf-informations-manquantes{margin-top:22px;color:var(--t3);font-size:13px}.cf-informations-manquantes summary{cursor:pointer}.cf-informations-manquantes p{margin:12px 0} /* Galerie et présentation : même composition que l'esquisse validée. */ .cf-fiche-produit>.retour,.cf-page-presentation>.retour{display:inline-flex;margin-bottom:20px} .cf-fiche-produit .cf-produit-grille{grid-template-columns:minmax(0,2fr) minmax(250px,1fr);align-items:start;gap:22px} .cf-fiche-produit .cf-carte{padding:25px}.cf-fiche-produit .cf-details{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:13px;margin:0}.cf-produit-resume>.cta{margin-top:22px}.cf-fiche-produit .cf-fonctions{justify-content:flex-start} .cf-produit-resume .cf-visuel{min-height:160px;height:160px;margin:12px 0 24px;background:#fff;border-radius:8px;text-decoration:none} .cf-produit-resume .cf-visuel img{height:100%;max-height:100%;width:100%;object-fit:contain} .cf-presentation{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:stretch;max-width:1650px;margin:0 auto} .cf-galerie.cf-carte{position:relative;min-width:0;padding:16px;display:flex;flex-direction:column;gap:12px} .cf-galerie-barre{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:center} .cf-galerie-barre>div{min-width:0}.cf-galerie-barre strong{font-size:13px;overflow-wrap:anywhere}.cf-galerie-barre small{display:block;color:var(--t3);font-size:12px;margin-top:6px} .cf-photo-zone{position:relative;min-width:0;height:clamp(200px,calc(100dvh - 440px),500px);flex:1;min-height:200px;background:#fff;border-radius:12px;overflow:hidden} .cf-photo-viewport{position:absolute;inset:0;overflow:auto;display:grid;place-items:center} .cf-photo-viewport>img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:contain;transform-origin:top left} .cf-photo-viewport.cf-agrandi{display:block}.cf-photo-vide{color:#777;align-self:center} .cf-photo-fonctions{position:absolute;left:12px;top:12px;z-index:2}.cf-photo-fonctions .cf-fonctions{flex-direction:column}.cf-photo-fonctions .cf-fonction{border:1px solid #e7e0ef;background:#fbf9fd;color:#7654a1} .cf-photo-prev,.cf-photo-next{display:none;position:absolute;top:50%;transform:translateY(-50%);border:1px solid #e4dfee;border-radius:50%;background:#fff;color:#7955a4;width:42px;height:42px;z-index:3;font-size:30px;box-shadow:0 3px 10px #2010300b;cursor:pointer}.cf-photo-prev{left:16px}.cf-photo-next{right:16px} .cf-photo-zoom{position:absolute;right:18px;bottom:16px;z-index:3;display:flex;align-items:center;background:#fff;border:1px solid #e7e0ef;border-radius:8px;padding:3px} .cf-photo-zoom button{border:0;background:transparent;color:#7955a4;padding:7px 9px;cursor:pointer;font-size:14px}.cf-photo-zoom button:disabled{opacity:.35;cursor:default} .cf-phototheque{min-width:0}.cf-phototheque>header,.cf-plein-entete,.cf-plein-legende,.cf-plein-pied{display:none} .cf-vignettes{display:flex;gap:8px;overflow:auto;padding:2px} .cf-vignettes button{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:72px;min-width:72px;border:1px solid var(--line);border-radius:6px;background:var(--surf2);padding:4px;cursor:pointer;color:var(--t2)} .cf-vignettes button[aria-pressed=true]{outline:2px solid var(--ac);outline-offset:-2px;background:var(--surf)} .cf-vignettes img{display:block;width:100%;height:42px;object-fit:contain;background:white}.cf-vignette-nom,.cf-vignette-numero{display:none}.cf-vignette-index{font-size:11px;margin:5px 0 1px} .cf-vignettes .cf-modele-choix{width:85px;min-width:85px;font-size:20px;gap:2px}.cf-modele-choix small{font-size:10px}.cf-vignettes button:disabled{opacity:.5;cursor:default} .cf-reperes{display:flex;flex-direction:column;gap:14px;min-width:0}.cf-reperes .cf-carte{padding:18px 16px;min-width:0}.cf-reperes .cf-carte:first-child{flex:1}.cf-reperes .cf-carte h2{font-size:16px;margin-bottom:16px}.cf-finances{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0 0 22px;align-items:center;font-size:12px}.cf-finances dt,.cf-finances dd{margin:0;padding:15px 0;border-bottom:1px solid var(--line)}.cf-finances dd{text-align:right;font-size:14px;font-weight:600;padding-left:8px}.cf-finances dt:last-of-type,.cf-finances dd:last-child{border:0;padding-top:23px}.cf-finances dt:last-of-type{color:var(--ac)}.cf-reperes .sub{font-size:11px}.cf-reperes .cf-prix-lien{gap:8px}.cf-lien-boutique{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;font-size:12px} body:has(.cf-plein){overflow:hidden} .cf-presentation.cf-plein{position:fixed;inset:0;z-index:120;max-width:none;margin:0;padding:0;height:100dvh;width:100%;display:grid;grid-template-rows:64px minmax(0,1fr) 94px;grid-template-columns:minmax(0,1fr);gap:0;background:var(--surf);color:var(--t1)} .cf-plein .cf-plein-entete{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;gap:16px;border-bottom:1px solid var(--line)} .cf-collection,.cf-plein-commandes{display:flex;align-items:center;gap:12px}.cf-collection strong{font-size:13px;border-left:1px solid var(--line);padding-left:20px;margin-left:10px}.cf-plein-commandes{font-size:12px}.cf-plein-commandes select{width:auto;min-width:64px;padding:8px}.cf-plein-commandes .cta{font-size:12px;padding:8px 12px;min-height:38px} .cf-plein .cf-galerie.cf-carte{padding:0;border:0;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,20vw,360px);gap:0;min-height:0;background:#fff} .cf-plein .cf-galerie-barre,.cf-plein .cf-reperes{display:none}.cf-plein .cf-photo-zone{border-radius:0;height:auto;min-height:0;grid-column:1;grid-row:1;flex:none} .cf-plein .cf-photo-prev,.cf-plein .cf-photo-next{display:block}.cf-plein .cf-photo-fonctions{display:none}.cf-plein .cf-plein-legende{display:block;position:absolute;left:18px;top:20px;font-size:11px;color:#777;z-index:2} .cf-plein .cf-photo-viewport{inset:42px 60px}.cf-plein .cf-phototheque{grid-column:2;grid-row:1;padding:22px 18px;overflow:auto;background:var(--surf2);border-left:1px solid var(--line)} .cf-plein .cf-phototheque>header{display:block;margin-bottom:18px}.cf-plein .cf-phototheque>header>small{font-size:9px;letter-spacing:1.5px;color:var(--t3)}.cf-plein .cf-phototheque h2{font-size:17px;margin:12px 0 6px}.cf-plein .cf-phototheque p{font-size:12px;margin:0;color:var(--t3)} .cf-plein .cf-vignettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;padding:2px} .cf-plein .cf-vignettes button{width:100%;min-width:0;background:var(--surf);padding:6px;align-items:stretch;text-align:left;border-radius:4px}.cf-plein .cf-vignettes button:first-child{grid-column:1/-1}.cf-plein .cf-vignettes img{height:auto;width:100%;aspect-ratio:1.3;object-fit:contain}.cf-plein .cf-vignette-index{display:none}.cf-plein .cf-vignette-numero{display:block;position:absolute;top:10px;left:10px;background:#ffffffd9;color:#777;border-radius:4px;padding:3px;font-size:8px}.cf-plein .cf-vignette-nom{display:block;padding:10px 2px 4px;font-size:11px;line-height:1.5;overflow-wrap:anywhere} .cf-plein .cf-plein-pied{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:16px 24px;border-top:1px solid var(--line);background:var(--surf2)} .cf-plein-pied>div{min-width:0}.cf-plein-pied strong{font-family:'Manrope',sans-serif;font-size:22px;font-weight:700;color:var(--t1)}.cf-plein-pied small{display:block;font-size:10px;color:var(--t3);margin:6px 0}.cf-plein-prix{display:flex;align-items:center;justify-content:flex-end;gap:20px}.cf-plein-prix strong{font-size:26px}.cf-plein-pied .cta{font-size:11px;padding:10px}.cf-plein-pied .cf-fonction{background:none;border:0} @media(min-width:1900px){.cf-presentation:not(.cf-plein){grid-template-columns:minmax(0,1fr) 350px}.cf-photo-zone{height:clamp(260px,calc(100dvh - 390px),620px)}} @media(max-width:850px){.cf-plein .cf-plein-pied{display:flex;justify-content:space-between}.cf-fiche-produit .cf-produit-grille,.cf-presentation:not(.cf-plein){grid-template-columns:1fr}.cf-reperes{display:grid;grid-template-columns:1fr 1fr}.cf-photo-zone{height:280px;flex:auto}.cf-plein .cf-galerie.cf-carte{grid-template-columns:minmax(0,1fr) 170px}.cf-plein .cf-phototheque{padding:14px 10px}.cf-plein .cf-vignettes{grid-template-columns:1fr}.cf-plein .cf-vignettes [aria-pressed=true] img{height:100px}.cf-plein-pied strong,.cf-plein-prix strong{font-size:18px}.cf-plein-prix{gap:10px}} @media(max-width:560px){.cf-reperes{grid-template-columns:1fr}.cf-galerie.cf-carte{padding:12px}.cf-galerie-barre .cta{padding:8px;font-size:11px;min-height:36px}.cf-galerie-barre strong{font-size:11px}.cf-vignettes button{width:56px;min-width:56px}.cf-presentation.cf-plein{grid-template-rows:100px minmax(0,1fr) 110px}.cf-plein .cf-plein-entete{padding:8px 12px;flex-wrap:wrap;gap:6px}.cf-collection img{width:30px;height:30px}.cf-plein-commandes{width:100%;justify-content:flex-end;gap:6px}.cf-plein-commandes .cta{font-size:10px;min-height:30px;padding:6px}.cf-plein-commandes select{min-width:48px;padding:5px;font-size:11px}.cf-plein .cf-galerie.cf-carte{grid-template-columns:minmax(0,1fr) 90px}.cf-plein .cf-phototheque{padding:8px 5px}.cf-plein .cf-phototheque>header{display:none}.cf-plein .cf-vignettes img,.cf-plein .cf-vignettes [aria-pressed=true] img{height:48px}.cf-plein .cf-vignette-nom{font-size:8px;padding:5px 0}.cf-plein .cf-photo-viewport{inset:35px 8px 48px}.cf-photo-prev,.cf-photo-next{width:28px;height:28px;font-size:22px}.cf-photo-prev{left:5px}.cf-photo-next{right:5px}.cf-plein .cf-plein-pied{padding:10px 12px;gap:10px;flex-wrap:wrap}.cf-plein-pied strong,.cf-plein-prix strong{font-size:16px}.cf-plein-pied>.cf-fonctions{order:3;gap:4px}.cf-plein-pied .cf-fonction{padding:0}.cf-plein-pied .cf-fonction svg{width:20px;height:20px}.cf-plein-prix{margin-left:auto}.cf-plein-prix .cta{display:none}.cf-plein-pied small{font-size:8px}.cf-plein .cf-photo-zoom{right:8px;bottom:8px}} .cf-onglets a{color:var(--t3);text-decoration:none}.cf-onglets a[aria-current=page]{color:var(--ac);font-weight:600}.bp-table td:last-child a{color:var(--ac)} .bp-table .bp-incomplet{margin:8px 0 0 62px;font-size:.82rem;color:var(--t3)} .bp-incomplet summary{cursor:pointer}.bp-incomplet ul{padding-left:18px;margin:8px 0} .bp-switch{display:inline-flex;gap:10px;align-items:center;white-space:nowrap;border:0;background:transparent;color:inherit;padding:6px;width:auto;cursor:pointer} .bp-switch span{width:34px;height:20px;flex:none;border-radius:20px;background:#aaa4b2;position:relative} .bp-switch span::after{content:'';position:absolute;width:14px;height:14px;top:3px;left:3px;background:white;border-radius:50%} .bp-switch[aria-checked=true] span{background:#7955a4}.bp-switch[aria-checked=true] span::after{left:17px}.bp-switch:disabled{opacity:.5;cursor:not-allowed} .bp-familles{display:grid;gap:12px}.bp-famille{padding:0}.bp-famille>summary{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px;cursor:pointer}.bp-famille>summary::after{content:'⌄';margin-left:auto}.bp-famille[open]>summary::after{content:'⌃'} .bp-famille summary small{display:block;margin-top:5px;color:var(--t3)}.bp-famille-corps{padding:0 20px 20px;border-top:1px solid var(--line)}.bp-famille-corps .cf-entete{padding-top:16px;flex-wrap:wrap}.bp-famille-corps .cta{white-space:normal;max-width:100%;text-align:center;flex-shrink:1}.bp-famille summary span{min-width:0}.bp-famille summary small{overflow-wrap:anywhere}.bp-variantes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}.bp-variantes article{border:1px solid var(--line);border-radius:10px;padding:16px}.bp-variantes h3{margin:0 0 12px}.bp-dialog{max-width:540px}.bp-dialog input{width:100%;box-sizing:border-box} .cf-modele-frame{position:absolute;inset:0;width:100%;height:100%;border:0}.cf-modele-frame[hidden],.cf-photo-viewport img[hidden]{display:none}.cf-modele-actif .cf-photo-zoom{visibility:hidden} .bf-entete-liste{display:grid;grid-template-columns:1fr 1fr;padding:18px 24px;background:var(--surf2);color:var(--t3);border-radius:12px 12px 0 0;font-size:13px}.bp-familles{gap:0}.bp-famille{border-radius:0;margin:0}.bp-famille>summary{justify-content:flex-start;background:var(--surf2);padding:20px 24px}.bp-famille>summary>.cf-fonctions{flex-shrink:0}.bp-famille>summary>span:first-of-type{flex:1}.bp-famille>summary>.bf-identifiant{flex:1;color:var(--t3);font-size:13px}.bp-famille-corps{padding:24px}.bf-identite{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bf-edition label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--t2)}.bf-edition input:not([type=radio]):not([type=checkbox]),.bf-edition select{width:100%;min-width:0;box-sizing:border-box}.bf-fonctions{border:0;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:8px}.bf-fonctions legend{font-size:13px;color:var(--t3);margin-bottom:10px}.bf-fonctions label{flex-direction:row;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer}.bf-fonctions label:has(:checked){border-color:var(--ac);background:var(--surf2)}.bf-fonctions svg{width:24px;height:24px;fill:var(--ac)}.bf-bloc{background:var(--surf2);border-radius:10px;padding:18px;margin-top:20px}.bf-bloc h2{font-size:16px;margin:0 0 18px}.bf-question{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 18px;margin-bottom:16px;border-bottom:1px solid var(--line)}.bf-actions{display:flex;gap:6px;align-items:center}.bf-valeurs{display:grid;gap:8px}.bf-valeur{display:flex;gap:8px;align-items:end}.bf-valeur label{flex:1}.bf-lien{border:0;background:none;color:var(--ac);text-align:left;cursor:pointer;padding:4px}.bf-variante{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px}.bf-variante-titre{display:flex;gap:12px;align-items:center;margin-bottom:14px}.bf-variante-titre strong{flex:1}.bf-reponses{display:grid;gap:10px;margin-top:14px}.bf-reponses label{display:grid;grid-template-columns:1fr 1fr;align-items:center}.bf-edition .bf-defaut{display:flex;flex-direction:row;align-items:center;margin-top:14px}.bf-ajout{display:flex;gap:12px;align-items:end}.bf-ajout label{flex:1}.bf-edition .cf-pied{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.bf-edition [hidden]{display:none!important} @media(max-width:650px){.bf-identite,.bf-question{grid-template-columns:1fr}.bf-reponses label{grid-template-columns:1fr}.bf-ajout,.bf-edition .cf-pied{align-items:stretch;flex-direction:column}.bp-famille-corps{padding:16px}.bf-fonctions{gap:6px}.bf-fonctions label{padding:8px}.bp-famille>summary{padding:16px;gap:10px}.bf-entete-liste{padding:16px}.bf-identifiant{overflow-wrap:anywhere}} .bp-famille>summary{display:grid;grid-template-columns:1fr 1fr 20px}.bp-famille>summary>.bf-famille-nom{display:flex;align-items:center;gap:14px}.bp-famille>summary .cf-fonctions{flex:0 0 auto;justify-content:start}.bp-famille .cf-fonction{padding:0;background:none}.bf-famille-nom>.cf-fonctions>.sub{display:none}.bf-entete-actions{display:flex;gap:16px;align-items:end}.bf-boutique{display:flex;gap:8px;align-items:end}.bf-boutique label{display:grid;gap:6px;font-size:12px;color:var(--t3)}.bf-boutique select{width:160px}.bf-boutique button{padding:10px;background:var(--surf);border:1px solid var(--line);border-radius:8px}.bf-edition{padding-top:20px}.bf-options{display:flex;gap:8px;flex-wrap:wrap}.bf-valeur{flex:1 1 140px;min-width:0;align-items:center;max-width:100%}.bf-valeur label{font-size:0;gap:0;min-width:0}.bf-valeur input{font-size:14px}.bf-fonctions label{position:relative;padding:10px 14px;gap:8px}.bf-fonctions input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bf-fonctions label:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:3px}.bf-fonctions .bf-coche{display:none}.bf-fonctions label:has(:checked) .bf-coche{display:inline-flex;margin-left:5px}.bf-fonctions .bf-coche svg{width:14px;height:14px;fill:none;stroke:currentColor}.bf-question{margin-bottom:12px;padding-bottom:12px}.bf-question>.bf-valeurs{align-content:start} @media(max-width:650px){.bf-entete-actions{flex-wrap:wrap}.bf-boutique select{width:140px}.bp-famille>summary{grid-template-columns:1fr 1fr 16px}.bf-options{flex-direction:column}.bf-valeur{flex-basis:auto}.bf-entete-liste{font-size:11px}.bf-famille-nom{flex-wrap:wrap}} .cf-photo-zoom button{display:inline-flex;align-items:center;justify-content:center}.cf-photo-prev svg,.cf-photo-next svg{vertical-align:middle} /* Variantes : grille et repères produit de l’esquisse. */ [data-famille-membres]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} [data-famille-membres]>.bf-defaut,[data-famille-membres]>.sub{grid-column:1/-1} .bf-variante{min-width:0;margin-bottom:0}.bf-produit{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.bf-produit img,.bf-photo-absente{width:56px;height:56px;flex:none;object-fit:contain;border-radius:6px;background:var(--surf2)}.bf-photo-absente{display:grid;place-items:center;color:var(--t3)}.bf-produit-texte{display:grid;gap:4px;min-width:0}.bf-produit-texte strong,.bf-produit-texte small{overflow-wrap:anywhere}.bf-produit-texte small{font-size:11px}.bf-question-intitule{display:flex;align-items:center;gap:8px}.bf-numero{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:11px;color:var(--t2)}.bf-variantes{background:none;padding:0;margin-top:30px}.bf-reponses{gap:0}.bf-reponses label{gap:12px;grid-template-columns:minmax(0,1fr) 112px;border-top:1px solid var(--line);padding:10px 0}.bf-reponses label:last-child{border-bottom:1px solid var(--line)}.bf-numero{border:0;background:var(--surf2);color:var(--ac)}.bf-variante .rond{border-radius:6px;box-shadow:none}.bf-ajout{margin-top:18px}@media(max-width:650px){.bf-reponses label{grid-template-columns:minmax(0,1fr) 112px}} @media(max-width:900px){[data-famille-membres]{grid-template-columns:1fr}} .bf-question{padding:0;margin-bottom:18px;border:0}.bf-question-saisie{position:relative}.bf-question-options{position:absolute;right:0;top:0;font-size:11px}.bf-question-options summary{cursor:pointer;color:var(--t3)}.bf-question-options[open]{z-index:1;padding:5px;background:var(--surf);border:1px solid var(--line);border-radius:6px}.bf-question-options .bf-actions{margin-top:6px}.bf-question-commandes{display:flex;gap:10px;flex-wrap:wrap} .bf-options-variante,.bf-reglage-defaut{font-size:12px;color:var(--t3);margin-top:12px}.bf-options-variante summary,.bf-reglage-defaut summary{cursor:pointer}.bf-options-variante label{margin:12px 0}.bf-reglage-defaut{grid-column:1/-1;margin:0}.bf-reglage-defaut[open]{padding:12px;background:var(--surf2);border-radius:8px} .bp-disponibilite{margin:24px 0}.bp-disponibilite-champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}.bp-disponibilite-champs label{display:grid;gap:8px}.bp-envoi{display:flex;align-items:center;gap:10px;margin:20px 0}.bp-envoi input{width:auto}.bp-disponibilite .sub{font-size:12px;margin:12px 0 20px}@media(max-width:650px){.bp-disponibilite-champs{grid-template-columns:1fr}} .cf-photo-viewport>img.cf-zoom-100{width:100%;height:100%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-125{width:125%;height:125%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-150{width:150%;height:150%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-175{width:175%;height:175%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-200{width:200%;height:200%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-225{width:225%;height:225%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-250{width:250%;height:250%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-275{width:275%;height:275%;max-width:none;max-height:none}.cf-photo-viewport>img.cf-zoom-300{width:300%;height:300%;max-width:none;max-height:none} main,main:has(.cf-page){max-width:1600px;padding:24px 28px 64px} .tete{gap:22px;min-height:78px;padding:10px 28px;flex-wrap:wrap} .marque{flex:0 0 auto;gap:12px}.marque .logo{width:42px;height:42px;object-fit:contain;background:transparent;border-radius:0} .mot{font-size:15px;line-height:1.4;letter-spacing:0}.mot small{display:block;font-size:11px;font-weight:500;color:var(--t2)} .tete>.atabs{flex:1;margin:0;padding:0;min-width:0;align-self:stretch;align-items:center;border:0;border-radius:0;background:none;backdrop-filter:none;gap:4px} .tete>.atabs .atab{height:100%;padding:12px 10px;border-radius:0;border-bottom:2px solid transparent;font-size:12px;font-weight:500} .tete>.atabs .atab.on{border-bottom-color:var(--ac);background:none;box-shadow:none;font-weight:650} .tete>.fin{margin-left:0}.tete .profil-txt,.tete .profil-fleche{display:none}.tete .profil{padding:0;border:0;background:none} main>.stabs,.cf-onglets{margin:0 0 24px;padding:0;border-bottom:1px solid var(--line);gap:10px} .stabs .atab,.cf-onglets a{padding:10px 0;margin-right:16px;border-radius:0;border-bottom:2px solid transparent;font-weight:500;font-size:13px} .stabs .atab.on,.cf-onglets a[aria-current=page]{background:none;border-bottom-color:var(--ac);color:var(--ac)} .stabs .atab svg{display:none}.cf-page{padding-top:0} .adv-entete{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px}.adv-entete h1{margin:0;font-size:26px;letter-spacing:-.035em}.adv-entete p{margin:5px 0 0;color:var(--t2);font-size:13px}.adv-entete .cta{width:auto} .tab{border-radius:14px}.tab-table .tab-l{height:72px}.tab-table th{height:46px;color:var(--t1);background:var(--acl)} .cf-entete h1{font-size:26px}.cf-entete .sub{font-size:13px} .champ-plus[data-nouveau-client]{width:auto;white-space:nowrap;font-size:12px;padding-inline:12px}.tab-tete{min-height:46px;height:auto;padding-block:12px;color:var(--t1);background:var(--acl)} .tab-l{height:auto;min-height:72px;padding-block:14px}.tab-l .tab-roles{white-space:normal;display:flex;justify-content:center;flex-wrap:wrap;gap:5px} .tab-l .tab-roles .badge{margin:0}.tab-l[data-ligne-href]{cursor:pointer}.tab-l[data-ligne-href]:hover{background:var(--acl)} .t-tiers{--cols:minmax(220px,1fr) minmax(160px,300px) 80px 150px 30px} .tiers-nom{display:flex;align-items:center;gap:9px}.tiers-nom strong{min-width:0}.tiers-nom .nat{flex:none;font-size:10px;padding:2px 7px} .tiers-filtres{margin:0 0 18px;display:flex;align-items:end;gap:12px;flex-wrap:wrap} .tiers-filtres label{display:grid;gap:6px;font-size:12px;color:var(--t2)}.tiers-filtres label:first-child{flex:1 1 260px}.tiers-filtres select{min-width:180px}.tiers-filtres .cta{width:auto;min-height:40px} .adv-compteur{margin:0 0 10px;font-size:12px;color:var(--t2)} .adv-fenetre{position:fixed;inset:0;width:min(790px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;border:1px solid var(--line);border-radius:20px;padding:0;background:var(--bg);color:var(--t1);box-shadow:0 24px 90px #14102040;overflow:auto} .adv-fenetre::backdrop{background:#20173460;backdrop-filter:blur(4px)} .adv-fenetre-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line);background:var(--surf)} .adv-fenetre-head h1{font-size:22px;margin:0}.adv-fenetre-head p{font-size:12px;color:var(--t2);margin:4px 0 0} .adv-fermer{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--t2);text-decoration:none;background:var(--acl)} .adv-fenetre-corps{padding:22px 26px}.adv-fenetre .formulaire{margin:0;padding:0;box-shadow:none;border:0;background:none;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));backdrop-filter:none} .adv-fenetre .formulaire fieldset{margin:0}.adv-fenetre .roles{display:flex;gap:10px;flex-wrap:wrap}.adv-fenetre .roles legend{margin-bottom:8px}.adv-fenetre .roles .coche{padding:8px 12px;background:var(--surf);border:1px solid var(--line);border-radius:9px} .adv-fenetre .revente,.adv-fenetre .prefixe{flex:1 1 250px}.adv-fenetre .prefixe input{width:100%} .adv-fenetre-pied{display:flex;justify-content:flex-end;align-items:center;gap:10px;grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.adv-fenetre-pied .cta{width:auto} .adv-fenetre .adr{padding:14px}.tiers-complement summary,.tiers-adresses summary{cursor:pointer;padding:10px 0;font-size:13px;font-weight:600}.tiers-complement-champs,.tiers-adresses-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.adv-fenetre .champ-aide{font-size:11px} .panneau-corbeille:popover-open,.panneau-effacer:popover-open{border-radius:18px;box-shadow:0 24px 90px #14102040} :focus-visible{outline:2px solid var(--ac);outline-offset:3px} @media(max-width:1200px){.tete{gap:12px}.tete>.atabs{order:3;flex-basis:100%;min-height:44px}.tete>.fin{margin-left:auto}.tete>.atabs .atab{padding-block:9px}} @media(max-width:720px){.tete>.atabs{scrollbar-width:thin;scrollbar-color:var(--ac) transparent;padding-bottom:5px}.tete>.atabs::-webkit-scrollbar{display:block;height:4px}.tete>.atabs::-webkit-scrollbar-thumb{background:var(--ac);border-radius:4px}.tete>.atabs::after{content:"›";position:sticky;right:0;background:var(--bg);padding:8px;align-self:stretch;display:grid;place-items:center}.cf-entete h1{font-size:23px}main,main:has(.cf-page){padding:18px 16px 48px}.tete{padding:10px 16px}.mot{font-size:14px}.adv-entete{align-items:start;flex-wrap:wrap;gap:12px}.adv-entete h1{font-size:23px}.tiers-filtres label{flex:1 1 140px}.tiers-filtres select{min-width:0;width:100%}.tiers-filtres label:first-child{flex-basis:100%}.t-tiers{--tab-min:700px}.adv-fenetre-head,.adv-fenetre-corps{padding:18px}.adv-fenetre .formulaire,.tiers-complement-champs,.tiers-adresses-champs{grid-template-columns:minmax(0,1fr)}.adv-fenetre{max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}.adv-fenetre-pied{flex-wrap:wrap}} .stk-table{min-width:760px}.stk-table th{text-align:center;color:var(--t1);font-weight:650}.stk-table td:not(:first-child){text-align:center;position:relative}.stk-table td:first-child{min-width:250px}.stk-table .stk-stock{background:#e6f3eb}.stk-table .stk-construction{background:#faf4d9}.stk-table .stk-commande{background:#fbeadd}.stk-table .stk-interrompu{background:#f8e5e8}.stk-valeur{font-size:18px;font-weight:400;color:#302d3c}.stk-editer{margin-left:8px;color:#6b587c}.stk-historique{font-size:11px;margin-top:8px;color:var(--t2)}.stk-historique summary{cursor:pointer}.stk-historique p{margin:6px 0}.stk-table .cf-fonctions{margin:6px 0}.stk-table small.sub{display:block} @media(min-width:960px){.cf-presentation:not(.cf-plein):not(:fullscreen){align-items:stretch}.cf-presentation:not(.cf-plein):not(:fullscreen) .cf-photo-zone{min-height:180px;height:clamp(180px,34vh,380px)}.cf-presentation:not(.cf-plein):not(:fullscreen) .cf-vignettes button{width:68px;height:60px}.cf-reperes .cf-carte{padding:18px}.cf-reperes .cf-details{gap:8px}.cf-reperes h2{margin-bottom:10px}} .off-groupe{margin:28px 0}.off-groupe h2{font-size:18px;margin:0}.off-table{min-width:680px}.off-table td:first-child{width:36%}.off-table small.sub{display:block;max-width:440px;margin-top:6px}.off-actions{min-width:155px;text-align:right}.off-actions a{display:block}.off-retirer{font-size:12px;color:var(--t2);margin-top:10px}.off-module{display:flex;align-items:center;gap:8px;font-size:12px;margin:5px 0}.off-module .cf-fonctions{flex-wrap:wrap}.off-form{margin:0}.off-champs{padding:0;border:0;display:grid;gap:14px;min-width:0}.off-champs>label{display:grid;gap:6px}.off-champs textarea{resize:vertical;min-height:64px}.off-montants{display:flex;gap:14px;flex-wrap:wrap}.off-montants>label{flex:1 1 140px;display:grid;gap:6px;font-size:12px}.off-modules{border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:180px;overflow:auto;padding:12px}.off-modules legend{font-size:12px;padding:0 6px}.off-modules .coche{padding:7px;display:flex;gap:8px;align-items:center;font-size:12px}.off-modules .cf-fonctions{flex-wrap:wrap}.off-tranches{width:100%;border-collapse:collapse}.off-tranches th{text-align:left;font-size:12px;font-weight:600}.off-tranches td,.off-tranches th{padding:6px 8px;border-bottom:1px solid var(--line)}.off-tranches input{width:100%;min-width:0}.off-recap{padding:14px;border-radius:12px;background:var(--acl);font-size:14px;font-weight:600;text-align:right}.off-graphique{display:block;width:100%;height:auto;max-height:190px;margin-top:8px}.off-grille{stroke:var(--line);stroke-width:1}.off-courbe{fill:none;stroke:var(--ac);stroke-width:2.5}.off-point{fill:var(--ac)}.off-graphique text{fill:var(--t2);font-size:10px}.off-simulation .sub{font-size:11px;margin:6px 0 0}.off-form .adv-fenetre-pied{justify-content:space-between}.off-form fieldset:disabled{opacity:.8}.off-form input[type=range]{accent-color:var(--ac)}.off-form .cta.sec{background:transparent;color:var(--ac);box-shadow:inset 0 0 0 1px var(--line)}.stk-valeur.stk-negatif{color:var(--rd)}.stk-alerte{color:var(--rd);font-size:11px}.stk-journal{border:0;background:none;color:var(--t2);font-size:11px;padding:6px 0;cursor:pointer}.stk-table .stk-note{display:block;font-size:11px;margin-top:6px} @media(max-width:600px){.off-modules{grid-template-columns:1fr}.off-table{min-width:640px}.off-tranches th,.off-tranches td{padding:6px 4px}.off-recap{text-align:left;line-height:1.6}.off-form .adv-fenetre-pied{gap:12px}} .fam-fonctions{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.fam-fonctions label{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px}.rangs.choix>li{display:block;padding:18px}.fam-reponses{display:grid;gap:10px;margin:14px 0;max-width:760px}.fam-reponses label{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr);align-items:center;gap:14px}.fam-reponses select{width:100%}.bp-famille>summary{gap:16px}.bp-famille>summary .cf-fonctions{flex-wrap:wrap} .off-form input:not([type=checkbox]):not([type=hidden]):not([type=range]),.off-form select{min-height:38px;height:38px;padding:7px 10px;font-size:13px;border-radius:9px} .off-champs textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;background:var(--surf);color:var(--t1);font:inherit;font-size:13px;padding:10px;min-height:64px} .adv-fenetre:has(.off-form){background:linear-gradient(var(--surf),var(--surf)),var(--bg)} .cf-table.stk-table th:first-child{text-align:center}.cf-table.stk-table td{padding:12px 14px}.stk-table .cf-fonctions{display:inline-flex;justify-content:flex-start;gap:5px;margin:4px 0}.stk-table .cf-fonction{width:27px;height:27px;padding:3px}.stk-table .cf-fonction svg{width:21px;height:21px}.stk-table small.sub{display:inline;font-size:11px;margin-left:8px}.stk-table .stk-journal{display:block;padding:3px 0}.stk-table .cf-produit img{width:42px;height:42px;object-fit:contain;flex:none} .fam-ecriture{padding:0;border:0;min-width:0}.fam-editeur .sec-title{font-size:18px;font-weight:650;margin:24px 0 10px}.fam-valeurs,.fam-ajout{border:1px solid var(--line);background:var(--surf);border-radius:12px;padding:14px 18px;margin:10px 0}.fam-valeurs>summary,.fam-ajout>summary{cursor:pointer;font-weight:600;font-size:13px}.fam-valeurs>summary span{float:right;font-size:12px;color:var(--t2);font-weight:400}.fam-editeur .pied{font-size:11px;line-height:1.5;max-width:900px}.fam-editeur .rangs{margin-block:12px}.fam-editeur .formulaire{margin-top:14px}.fam-editeur .rangs li form.fam-reponses{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;width:100%;margin-top:14px;gap:10px}.fam-reponses .rond{justify-self:end}.fam-reponses label{min-width:0}.fam-editeur .cf-carte{padding:18px}.fam-editeur .fiche{margin-block:16px} .prestation-carte .formulaire{margin:0;padding:0;box-shadow:none;border:0;background:none;display:block}.prestation-carte .off-champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.prestation-carte .off-montants{grid-column:1/-1}.prestation-carte .off-recap{margin-top:16px}.prestation-carte .cf-entete{margin-bottom:18px}@media(max-width:720px){.prestation-carte .off-champs{grid-template-columns:minmax(0,1fr)}} @media(min-width:960px){ .cf-page-presentation .retour{margin-bottom:8px}.cf-page-presentation>.cf-entete{margin-bottom:12px}.cf-page-presentation>.cf-onglets{margin-bottom:16px} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-galerie{height:clamp(380px,calc(100dvh - 360px),620px);box-sizing:border-box;padding:16px;display:grid;grid-template-rows:auto minmax(120px,1fr) auto auto;gap:8px} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-photo-zone{height:auto;min-height:0;margin:0} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-photo-zone>img{height:100%;max-height:100%} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-photo-zoom{margin:0} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-vignettes img{width:100%;height:100%} .cf-page-presentation .cf-reperes{gap:12px}.cf-page-presentation .cf-reperes .cf-carte{padding:14px}.cf-page-presentation .cf-details{margin:14px 0;font-size:13px}.cf-page-presentation .cf-grand-prix{font-size:24px} } .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;min-height:36px;background:var(--surf);border:1px solid var(--line);border-radius:9px;color:var(--ac);font:inherit;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer}.btn:hover{background:var(--acl)}.btn:disabled{opacity:.45;cursor:default}.gestion-toolbar>a:not(.btn),.gestion-paiement a:not(.cta),.gestion-document{color:var(--ac);text-decoration:none}.gestion-document small{font-size:11px;color:var(--t2)}.gestion-grille input,.gestion-grille select,.achat-article input,.achat-article select{min-height:38px;border:1px solid var(--line);border-radius:7px;background:var(--surf);padding:8px 10px;color:var(--t1);font:inherit}.gestion-filtres label{display:grid;gap:7px;font-size:12px;color:var(--t2)}.gestion-filtres input,.gestion-filtres select{height:38px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surf);color:var(--t1)}.gestion-card a.retour{color:var(--ac)} .gestion-filtres{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:22px 0}.gestion-filtres label{flex:1 1 140px;min-width:125px}.gestion-filtres input,.gestion-filtres select{width:100%;min-width:0} .gestion-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:18px 0}.gestion-toolbar h2{margin:0;margin-right:auto;font-size:16px}.gestion-toolbar>span:first-child{margin-right:auto}.gestion-toolbar .btn{white-space:nowrap} .argent-registre-table{--cols:130px minmax(180px,1.5fr) minmax(130px,1fr) minmax(150px,1fr) 120px 150px 30px;--tab-min:1000px}.t-achats.gestion-table{--cols:110px minmax(200px,1.5fr) 150px 170px 160px 30px;--tab-min:850px}.achat-articles-table{--cols:minmax(160px,2fr) 65px 100px 110px 110px;--tab-min:580px}.achat-paiements-table{--cols:120px minmax(160px,1fr) 120px 30px;--tab-min:450px}.achat-couts-table{--cols:minmax(200px,2fr) 80px 180px 190px 190px;--tab-min:840px} .gestion-table{width:100%}.gestion-table th,.gestion-table td{vertical-align:middle}.gestion-table .num{white-space:nowrap}.gestion-table .sub{display:block;font-size:12px;color:var(--t2,#747084);margin-top:4px}.gestion-table form{margin:0}.gestion-table button.badge{cursor:pointer;border:1px solid currentColor;background:transparent} .gestion-total{display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:20px 0;font-variant-numeric:tabular-nums}.gestion-total strong{font-size:22px} .gestion-card{background:var(--surf,#fff);border:1px solid var(--line,#e5dfec);border-radius:16px;padding:22px;min-width:0}.gestion-card h2{font-size:16px;margin:0 0 20px}.gestion-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gestion-grille label,.achat-article label{min-width:0;display:flex;flex-direction:column;gap:6px;font-size:12px}.gestion-grille input,.gestion-grille select,.achat-article input,.achat-article select{width:100%;min-width:0}.gestion-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.gestion-form{max-width:1000px} .achat-editeur{display:grid;gap:18px}.achat-article{border:1px solid var(--line,#e5dfec);border-radius:10px;margin:12px 0;padding:12px 16px}.achat-article legend{font-size:12px;color:var(--t2,#747084)}.achat-description{display:grid;grid-template-columns:2fr 1.4fr 1fr .7fr auto;gap:10px;align-items:end}.achat-article>label{margin-top:10px}.achat-nombres{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr)) 2fr;gap:10px;align-items:end;margin-top:10px}.achat-nombres output{font-size:12px;color:var(--t2,#747084);padding-bottom:8px}.achat-fiche{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:20px;align-items:stretch}.achat-fiche .gestion-card{overflow:auto} .gestion-montants{display:grid;grid-template-columns:1fr auto;gap:14px;margin:0}.gestion-montants dt{color:var(--t2,#747084)}.gestion-montants dd{text-align:right;margin:0;font-variant-numeric:tabular-nums}.gestion-documents{display:grid;gap:8px;margin-bottom:18px}.gestion-document{display:flex;align-items:center;gap:12px;border:1px solid var(--line,#e5dfec);border-radius:10px;padding:12px}.gestion-document span{flex:1;overflow-wrap:anywhere}.gestion-document small{display:block}.gestion-card input[type=file]{width:100%;font-size:12px;margin:10px 0} .gestion-modal{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid var(--line,#e5dfec);border-radius:18px;background:var(--surf,#fff)}.gestion-modal header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.gestion-modal h2{margin:0;font-size:21px}.gestion-modal footer{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}.gestion-modal::backdrop{background:rgba(30,22,50,.35);backdrop-filter:blur(3px)}.gestion-modal p{font-size:13px;line-height:1.6}.gestion-modal-document{width:min(1100px,calc(100vw - 32px))}.gestion-scan iframe{width:100%;height:64vh;border:0}.gestion-scan img{display:block;max-width:100%;max-height:64vh;object-fit:contain;margin:auto} .gestion-contexte{display:inline-flex;gap:16px;align-items:center;background:var(--acl,#f0eaf9);border-radius:30px;padding:8px 14px;font-size:13px}.gestion-contexte a{font-size:22px;text-decoration:none}.gestion-paiement{display:grid;grid-template-columns:1fr auto;gap:28px;max-width:1000px}.gestion-paiement h1{font-size:24px}.gestion-grand{font-size:34px;align-self:center;font-variant-numeric:tabular-nums}.gestion-infos{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line,#e5dfec);padding-top:22px}.gestion-infos dt{font-size:12px;color:var(--t2,#747084)}.gestion-infos dd{margin:8px 0 0;overflow-wrap:anywhere}.gestion-paiement footer{grid-column:1/-1} @media(max-width:850px){.achat-fiche{grid-template-columns:1fr}.achat-description{grid-template-columns:1fr 1fr}.achat-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}.gestion-grille{grid-template-columns:1fr 1fr}.gestion-paiement{grid-template-columns:1fr}.gestion-grand{font-size:28px}.gestion-infos{grid-template-columns:1fr 1fr}} @media(max-width:500px){.gestion-grille{grid-template-columns:1fr}.gestion-card{padding:15px}.achat-nombres{grid-template-columns:1fr 1fr}.gestion-modal{padding:18px}.gestion-filtres label{flex-basis:40%}} .tarif-composant-modal{max-width:680px}.tarif-composant-identite{display:flex;align-items:center;gap:18px;margin:18px 0}.tarif-composant-identite img{width:84px;height:84px;object-fit:contain;border-radius:12px;background:white}.tarif-photo-absente{width:84px;font-size:12px;color:var(--t2,#747084)}.tarif-composant-prix{margin-left:auto;text-align:right}.tarif-composant-prix strong{display:block;font-size:28px}.tarif-composant-prix small{display:block}.tarif-composant-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tarif-composant-choix label{border:1px solid var(--line,#e5dfec);border-radius:12px;padding:16px;display:flex;align-items:flex-start;gap:10px;cursor:pointer}.tarif-composant-choix label:has(input:checked){outline:2px solid var(--ac,#7652a6)}.tarif-composant-choix label:has(input:disabled){opacity:.55}.tarif-composant-choix input{width:auto;flex:none}.tarif-composant-choix span span,.tarif-composant-choix small{display:block;margin-top:8px}.tarif-composant-choix small{color:var(--t2,#747084)}@media(max-width:520px){.tarif-composant-identite{flex-wrap:wrap}.tarif-composant-prix{margin-left:0}.tarif-composant-choix{grid-template-columns:1fr}} .pc-entete{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:5px 0 26px}.pc-entete h1{margin:0;font-size:28px;letter-spacing:-.035em} .pc-nouveau{position:relative;z-index:3}.pc-nouveau>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;width:auto}.pc-nouveau>summary::-webkit-details-marker{display:none} .pc-nouveau>div{position:absolute;right:0;top:calc(100% + 8px);background:var(--surf);border:1px solid var(--line);box-shadow:0 10px 24px #0002;border-radius:12px;padding:6px;min-width:190px;display:grid} .pc-nouveau>div a{padding:12px;border-radius:8px;color:var(--t1);text-decoration:none;font-size:14px}.pc-nouveau>div a:hover,.pc-nouveau>div a:focus-visible{background:var(--acl)} .pc-vide{padding:45px 20px;text-align:center;background:var(--surf);border:1px solid var(--line);border-radius:14px}.pc-vide h2{font-size:18px;margin:0 0 20px;line-height:1.2}.pc-vide p{font-size:14px;color:var(--t2);margin:0} .pc-table-wrap{position:relative;overflow-x:auto;background:var(--surf);border:1px solid var(--line);border-radius:14px}.pc-table-wrap.pc-interne{border:0;border-radius:0;background:none} .pc-table{width:100%;border-collapse:collapse;font-size:13px}.pc-table th{padding:14px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--t2);border-bottom:1px solid var(--line);white-space:nowrap} .pc-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}.pc-table tr:last-child td{border-bottom:0}.pc-table td strong{white-space:nowrap}.pc-table td small{display:block;margin-top:4px;color:var(--t2);font-size:12px} .pc-table .d{text-align:right}.pc-table .c{text-align:center}.pc-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}.pc-table tr[data-ligne-href]{cursor:pointer}.pc-table tr[data-ligne-href]:hover{background:var(--acl)} .pc-ouvrir{text-align:right;white-space:nowrap}.pc-ouvrir a{display:inline-flex;align-items:center;gap:6px;color:var(--ac);font-size:12px;text-decoration:none} .pc-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:1.5;padding:4px 9px;border-radius:4px;background:var(--bg);color:var(--t2);white-space:nowrap} .pc-badge.ac{background:var(--acl);color:var(--ac)}.pc-badge.green{background:var(--grl);color:var(--gr-tx)}.pc-badge.amber{background:var(--aml);color:var(--am)}.pc-badge.red{background:#fbe9ec;color:var(--rd)} .pc-titre{margin:5px 0 26px}.pc-titre h1{margin:0;font-size:30px;letter-spacing:-.035em}.pc-titre p{margin:8px 0 0;color:var(--t2);font-size:14px;font-weight:400} .pc-titre-action{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.pc-titre-action .cta{width:auto;display:inline-flex;align-items:center;gap:8px} .pc-colonnes{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}.pc-colonnes-avoir{grid-template-columns:minmax(0,1fr) 300px}.pc-principal{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}.pc-principal>*,.pc-colonnes>*{min-width:0} .pc-carte{background:var(--surf);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0} .pc-carte>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}.pc-carte>header>span{display:flex;align-items:center;gap:9px} .pc-carte .ic-piece{color:var(--ac);flex:none}.pc-carte>header a{color:var(--ac);text-decoration:none} .pc-champs{display:grid;grid-template-columns:1fr;gap:20px 28px;padding:24px}.pc-champs-3{grid-template-columns:repeat(3,minmax(0,1fr))} .pc-champs label,.pc-ligne label,.pc-corps label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--t2);min-width:0} .pc-devis input,.pc-devis select,.pc-devis textarea,.pc-corps input,.pc-corps select,.pc-champs input{width:100%;min-width:0;box-sizing:border-box}.pc-devis textarea{min-height:64px;resize:vertical} .pc-champ-ligne{display:flex;gap:8px}.pc-champ-ligne .cta{width:auto;white-space:nowrap} /* Esquisse : le champ (200 px) puis l'aide dessous, sur une colonne. */ .pc-remise .pc-champs{grid-template-columns:1fr;align-items:start}.pc-remise .pc-champs label{max-width:200px}.pc-remise label{max-width:200px}.pc-discret{color:var(--t2);font-size:12px;font-weight:400} .pc-ajout{display:flex;gap:8px;flex-wrap:wrap}.pc-ajout .cta{width:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:9px 14px;min-height:0} .pc-ligne{padding:16px 24px 20px;border-bottom:1px solid var(--line)}.pc-ligne:last-child{border-bottom:0}.pc-ligne>header{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px} .pc-genre{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:12px}.pc-retirer{border:0;background:none;color:var(--ac);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex}.pc-retirer:hover{background:var(--acl)} .pc-ligne-principal{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;margin-bottom:12px}.pc-ligne-valeurs{display:grid;grid-template-columns:1fr 1.3fr .8fr .8fr 1.2fr;gap:14px;align-items:end} .pc-ligne-total{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:10px;font-size:12px}.pc-ligne-total strong{font-size:14px;font-variant-numeric:tabular-nums} .pc-vide-ligne,.pc-notes{padding:24px;margin:0;color:var(--t2);white-space:pre-wrap;font-size:13px} .pc-montants{position:sticky;top:20px}.pc-montants dl{display:grid;gap:15px;padding:24px;margin:0}.pc-montants dl>div{display:flex;justify-content:space-between;gap:12px;font-size:13px} .pc-montants dt{color:var(--t2)}.pc-montants dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}.pc-grand{border-top:1px solid var(--line);padding-top:18px;font-size:18px!important}.pc-grand dt{color:var(--t1)!important} .pc-montants>footer{padding:0 24px 24px;display:grid;gap:10px}.pc-montants>footer .cta,.pc-montants>footer form{width:100%}.pc-montants>footer .cta{justify-content:center;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box} .pc-erreur{padding:0 24px;margin:0;color:var(--rd);font-size:13px}.pc-erreur:empty{display:none}.pc-validite{padding:0 24px 18px;margin:0;font-size:13px;color:var(--t2)}.pc-validite strong{color:var(--t1)} .pc-donnees{margin:0;padding:8px 24px}.pc-donnees>div{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.pc-donnees>div:last-child{border-bottom:0}.pc-donnees dt{color:var(--t2)}.pc-donnees dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere} .pc-corps{padding:20px 24px;display:grid;gap:16px}.pc-recherche{display:flex;gap:10px;align-items:end}.pc-recherche label{flex:1}.pc-recherche .cta{width:auto} .pc-clients{display:flex;gap:8px;flex-wrap:wrap}.pc-client{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surf);color:var(--t1);text-decoration:none;font-size:13px}.pc-client.choisi{border-color:var(--ac);background:var(--acl)} .pc-facture{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);background:var(--surf);border-radius:10px;color:var(--t1);text-decoration:none;margin-top:8px;font-size:13px}.pc-facture>span{display:flex;align-items:center;gap:12px}.pc-facture small{display:block;margin-top:6px;color:var(--t2)}.pc-facture.choisi{border-color:var(--ac);background:var(--acl)} .pc-quantite{max-width:92px;min-width:72px;text-align:right} .pc-solde{font-size:20px;font-weight:600;color:var(--t1);white-space:nowrap}.pc-commandes-credit{margin-top:22px} .pc-confirmation{margin:auto;border:1px solid var(--line);border-radius:18px;padding:26px;max-width:min(460px,calc(100vw - 32px));background:var(--surf);color:var(--t1);box-shadow:0 24px 80px #24163230}.pc-confirmation::backdrop{background:#251b3c66}.pc-confirmation h2{margin:0 0 12px;font-size:18px}.pc-confirmation p{margin:0 0 20px;font-size:14px;color:var(--t2)}.pc-gestes{display:flex;justify-content:flex-end;gap:10px}.pc-gestes .cta{width:auto} .pc-credit-champs{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:14px;align-items:end}.pc-credit-champs .cta{width:auto}.pc-credit-resume{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--t2)}.pc-credit-resume strong{color:var(--t1);margin-left:6px} .pc-avoir-pastille{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:8px 12px;background:var(--acl);color:var(--ac);font-size:13px;white-space:nowrap;text-decoration:none}.pc-avoir-pastille strong{font-weight:650} .pc-donnees-pile>div{display:grid;gap:4px;justify-content:stretch}.pc-donnees-pile dd{text-align:left;font-weight:400}.pc-pied-carte{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}.pc-pied-carte .cta{width:auto}.pc-champs .pc-gestes .cta{width:auto} .t-tiers{--cols:minmax(220px,1fr) minmax(150px,270px) 170px 150px 30px} @media(max-width:1050px){.pc-colonnes,.pc-colonnes-avoir{grid-template-columns:minmax(0,1fr)}.pc-montants{position:static}} /* Esquisse : les champs restent sur trois colonnes jusqu'à 650 px (mesuré à 768 et 690 px). */ @media(max-width:650px){.pc-entete,.pc-titre-action{flex-wrap:wrap}.pc-champs-3,.pc-ligne-principal,.pc-remise .pc-champs,.pc-credit-champs{grid-template-columns:1fr}.pc-ligne-valeurs{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-ligne-total{align-items:flex-start}.pc-ligne{padding:16px}.pc-carte>header{padding:16px}.pc-champs{padding:16px}.pc-donnees{padding:8px 16px}.pc-recherche{flex-wrap:wrap}.pc-table{min-width:620px}.pc-interne .pc-table{min-width:560px}.pc-champ-ligne{flex-wrap:wrap}} /* Audit 106 du 29/10, mesures de l'esquisse à 768 et 1280 px. */ .cta[hidden]{display:none!important} .pc-retour{font-weight:400;font-size:13px;color:var(--ac);gap:8px;margin-bottom:18px} .pc-grand dt{font-size:13px} .pc-principal>form{display:grid;gap:22px;min-width:0} .pc-t-credit th,.pc-t-credit td{padding-left:14px;padding-right:14px} /* Les montants réels sont plus larges que les 0,00 € de l'esquisse : les en-têtes passent à la ligne au besoin. */ .pc-t-credit th,.pc-t-credit td,.pc-t-credit td strong,.pc-t-credit .num{white-space:normal} .pc-t-credit .pc-quantite{text-align:center} .pc-devis textarea[name=notes]{height:100px} .pc-validite{padding-bottom:20px} .pc-validite-bloc strong{display:block} .pc-montants>footer.pc-pied-recap{display:grid;justify-content:flex-end;border-top:1px solid var(--line)} .pc-montants>footer.pc-pied-recap .cta{width:auto} @media(max-width:720px){.pc-titre h1{font-size:26px}} @font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/polices/public-sans.woff2) format("woff2")} @font-face{font-family:Manrope;font-style:normal;font-weight:100 900;font-display:swap;src:url(/polices/manrope.woff2) format("woff2")} @media screen{ :root{--bg:#e8e7f1;--surf:#fafafd;--surf2:#f0eef6;--t1:#171922;--t2:#606271;--line:#dedde7;--ac:#70549b;--acl:#e8e1f2;--actext:#fff;--gr-tx:#246e62;--grl:#dcefea;--am:#88622c;--aml:#f7eddc;--rd:#a13c53;--rdl:#f7e3e8;--sh:0 2px 10px #24203506;--bgmesh:radial-gradient(ellipse at 0 0,#dfdbf2,transparent 62%),radial-gradient(ellipse at 100% 100%,#dcedea,transparent 65%)} [data-theme="light"]{--bg:#e8e6e0;--surf:#fdfdfa;--surf2:#f0efe9;--t1:#0f1513;--t2:#5b6560;--line:#d2d7ce;--ac:#12352a;--acl:#dfe8e0;--bgmesh:radial-gradient(ellipse at 0 0,#d1e5d9,transparent 60%),radial-gradient(ellipse at 100% 0,#f1e0ce,transparent 65%);} [data-theme="dark"]{--bg:#0b1016;--surf:#151c25;--surf2:#1d2632;--t1:#f1f4f8;--t2:#b1bac8;--line:#303b4a;--ac:#b39ae4;--acl:#30263f;--actext:#161023;--gr-tx:#98dec7;--grl:#183b34;--am:#e8c489;--aml:#3f321f;--rd:#f3a2b7;--rdl:#442534;--sh:none;--bgmesh:radial-gradient(ellipse at 0 0,#18332d66,transparent 60%),radial-gradient(ellipse at 100% 0,#39245266,transparent 60%);} [data-theme="neo"]{--bg:#e3e7ee;--surf:#e3e7ee;--surf2:#edf0f5;--t1:#2f3844;--t2:#5f6b79;--line:#c8cfd9;--ac:#7257a3;--acl:#dcd6eb;--sh:5px 5px 12px #cbd0d9,-5px -5px 12px #fff;--bgmesh:none;} :root,[data-theme]{--f-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--f-heading:Manrope,'Public Sans',sans-serif;--bg3:var(--surf);--line2:var(--line);--t3:var(--t2);--ac2:var(--ac);--shp:var(--sh);--sh2:var(--sh);--r:10px;--rl:10px;--rm:6px;--rxl:10px;--blur:none} body{font-size:14px;line-height:1.5} h1,h2,h3,.mot{font-family:var(--f-heading);letter-spacing:-.025em} h1,.adv-entete h1,.cf-entete h1{font-size:30px;line-height:1.2;font-weight:750;letter-spacing:-.025em} h2{font-size:18px;font-weight:700}h3{font-size:15px} main,main:has(.cf-page){max-width:none;width:100%;margin:0;padding:32px 30px 45px;flex:0 0 auto} .adv-pied{border-top:1px solid var(--line);padding:20px 30px;font-size:11px;color:var(--t2)} .tete{min-height:0;padding:20px 30px 0;gap:0 24px;flex-wrap:wrap;background:var(--surf);backdrop-filter:none;box-shadow:none} .marque{margin-bottom:18px;gap:12px}.marque .logo{width:36px;height:36px} .mot{font-size:17px;font-weight:750;line-height:1.3}.mot small{font-family:var(--f-body);font-size:11px;font-weight:400;margin-top:3px} .tete>.fin{margin-left:auto;margin-bottom:18px;order:0} .profil .av{width:38px;height:38px;font-size:12px;border:1px solid var(--line);background:var(--acl);color:var(--ac)} .tete>.atabs{order:3;flex:1 1 100%;width:100%;gap:24px;min-height:0;overflow:visible;flex-wrap:wrap;align-self:stretch;align-items:stretch} .tete>.atabs .atab{height:auto;padding:10px 0 20px;font-size:13px;font-weight:400;gap:8px} .tete>.atabs .atab.on{font-weight:650}.tete>.atabs .atab svg{width:16px;height:16px} .tete>.atabs .atab:last-child{margin-left:auto} main>.stabs,.cf-onglets{margin:-12px 0 28px;padding:0;border-bottom:1px solid var(--line);gap:26px;flex-wrap:wrap;background:none;box-shadow:none} .stabs .atab,.cf-onglets a{margin:0;padding:10px 0 15px;font-size:13px;line-height:1.5;font-weight:400;box-shadow:none} .stabs .atab.on,.cf-onglets a[aria-current=page]{font-weight:650} .t-commandes .tab-table th{height:auto;padding:14px 20px}.t-commandes .tab-table td{padding:13px 20px}.t-commandes .tab-table .tab-l{height:61px} .t-commandes .tab-table th:nth-child(1){width:33%}.t-commandes .tab-table th:nth-child(2){width:25%}.t-commandes .tab-table th:nth-child(3){width:20%}.t-commandes .tab-table th:nth-child(4){width:22%}.t-commandes .tab-table th.d,.t-commandes .tab-table .num{text-align:left}.t-commandes .tab-table .num{font-size:14px;font-weight:400}.t-commandes .cmd-source .cmd-origine{display:block;margin-bottom:4px}.t-commandes .cmd-source .badge{font-size:11px;padding:1px 7px}.t-commandes .tab-table td > .cmd-source{overflow:visible}.t-commandes .tab-table .etat-alertes{display:flex;gap:6px;align-items:center} .commandes-vide{padding:45px 20px;text-align:center;background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh)}.commandes-vide h2{font-size:18px;margin:0 0 20px;line-height:1.2}.commandes-vide p{font-size:14px;color:var(--t2);margin:0} .adv-entete,.cf-entete{margin:5px 0 26px;gap:20px}.adv-entete p,.cf-entete .sub{font-size:14px;color:var(--t2);margin:9px 0 0} .cta,.cta.sm,.cta.sec,.cta.plus,.gestion-action{border-radius:6px;min-height:42px;padding:10px 15px;box-shadow:none;font-family:var(--f-body);font-size:14px;line-height:1.5;font-weight:550;letter-spacing:normal;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto} .cta{background:var(--ac);color:var(--actext);border:1px solid var(--ac)} .cta.sec,.gestion-action{background:var(--surf);color:var(--t1);border:1px solid var(--line)} .cta:hover,.gestion-action:hover{transform:none;box-shadow:none;filter:brightness(.97)} label{font-weight:400;gap:7px} input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])),select,textarea{font-family:var(--f-body);font-size:14px;font-weight:400;line-height:1.5;border:1px solid var(--line);border-radius:6px;padding:11px 13px;background:var(--surf);color:var(--t1);max-width:100%;min-width:0;box-shadow:none} /* Le fond uniforme du thème remplace les anciens chevrons CSS : garder l’indicateur natif. */ select{appearance:auto} [data-nouveau-client][hidden]{display:none!important} .adv-client-dialog{width:min(640px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--surf);color:var(--t1);box-shadow:0 24px 80px #211a3840} .adv-client-dialog::backdrop{background:rgba(22,18,38,.44)} .adv-client-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding:0;border:0} .adv-client-dialog h2{font-size:21px;line-height:1.4;font-weight:700;margin:0}.adv-client-dialog>header button{width:48px;height:42px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--t2);font-size:22px;cursor:pointer} .adv-client-dialog form{display:block;margin:0;padding:0;border:0;background:none;box-shadow:none} .adv-client-champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;padding:20px 0} .adv-client-champs label{display:flex;flex-direction:column;font-size:12px;line-height:18px;gap:6px;min-width:0}.adv-client-champs input,.adv-client-champs select{width:100%;height:40px;font-size:12px;line-height:18px;padding:8px;box-sizing:border-box} .adv-client-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:0;border:0} .adv-client-dialog [role=alert]{color:var(--rd);font-size:13px;margin:0 0 18px}.adv-client-dialog [role=alert]:empty{display:none} .adv-client-dialog button:disabled{opacity:.6;cursor:wait} @media(max-width:550px){.adv-client-dialog{padding:20px}.adv-client-champs{grid-template-columns:minmax(0,1fr);gap:14px}.adv-client-dialog footer{flex-wrap:wrap}.adv-client-dialog .cta{font-size:13px}} .tab,.cf-carte,.gestion-card,.list,.formulaire,.off-modules{border-radius:10px;box-shadow:var(--sh);background:var(--surf);border:1px solid var(--line);backdrop-filter:none} .tab-table .tab-l,.tab-l{min-height:70px;height:auto;padding-block:13px} .tab-tete,.tab-table th{min-height:46px;height:auto;background:var(--surf);color:var(--t2);font-size:12px;font-weight:500;padding-block:14px} .tab-l:hover,.tab-l[data-ligne-href]:hover{background:var(--bg)} .tab-nom strong{font-size:14px;font-weight:650}.tab-l .sub{font-size:12px;margin-top:4px;font-weight:400} .badge{border-radius:4px;padding:4px 9px;font-size:11px;font-weight:500;line-height:1.5;box-shadow:none} .nat{font-size:11px;font-weight:400;border:0;background:none;padding:0 4px} .adv-compteur{text-align:right;margin:0 0 10px;font-size:12px;color:var(--t2)} .tiers-fiche-identite{flex:1;min-width:0}.tiers-fiche-entete h1{overflow-wrap:anywhere}.tiers-fiche-roles{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.tiers-fiche-entete>.cta{flex:none} .tiers-filtres{gap:16px;margin-bottom:16px;align-items:end}.tiers-filtres label{font-size:12px}.tiers-filtres select{min-width:220px} .tiers-filtres [hidden]{display:none}.tiers-identite{display:flex;align-items:center;gap:12px;min-width:0}.tiers-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--acl);color:var(--ac);font-size:12px}.tiers-nom{min-width:0;flex-wrap:wrap} .cf-filtres-liste{align-items:center;gap:12px;margin:26px 0 16px}.cf-filtres-liste [hidden]{display:none}.cf-filtres-liste .cf-recherche{flex:1;min-width:0;position:relative;display:block}.cf-recherche>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t2)}.cf-filtres-liste .cf-recherche input{width:100%;padding-left:42px;min-width:0}.cf-filtres-liste select{width:auto;min-width:90px}.cf-filtres-liste .sub{font-size:12px;font-weight:400;margin:0;white-space:nowrap} .cf-table-wrap{border-radius:10px;box-shadow:var(--sh)}.cf-table th{background:var(--surf);color:var(--t2);font-size:12px;font-weight:500;padding:14px 18px}.cf-table th small{display:block;margin-top:6px;font-size:12px;font-weight:400}.cf-table th:first-child,.cf-table th:nth-child(2){text-align:left}.cf-table td{padding:20px 18px;font-size:14px;font-weight:400}.cf-table td:first-child{min-width:240px}.cf-table td:nth-child(2){min-width:145px}.cf-table td:last-child{width:36px;padding-inline:8px}.cf-table td:last-child a{color:var(--ac)}.cf-table .cf-fonctions{justify-content:flex-start}.cf-table .cf-fonction{background:none;border-radius:0;padding:0}.cf-table .cf-prix-lien{text-decoration:none;gap:12px}.cf-prix-lien svg{color:var(--ac)}.cf-produit img,.cf-produit>.prod-ico{width:60px;height:60px;flex:none}.cf-produit strong{font-weight:650}.cf-produit small{line-height:1.5}.cf-ligne:hover{background:var(--bg)}.cf-publication-details{margin-top:20px;color:var(--t2);font-size:12px}.cf-publication-details>summary{cursor:pointer}.cf-publication-details[open]>summary{margin-bottom:18px} .cf-prix-dialog{width:min(820px,calc(100vw - 40px));max-height:calc(100dvh - 48px);padding:0;background:var(--surf);border-radius:18px;box-shadow:0 24px 80px #24203340}.cf-prix-dialog::backdrop{background:#24203360;backdrop-filter:blur(4px)} .cf-prix-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:26px 30px 22px;border-bottom:1px solid var(--line)}.cf-prix-entete h2{font-size:22px;margin:18px 0 0}.cf-prix-entete .cf-produit{font-size:14px}.cf-prix-dialog .cf-fermer{padding:5px;color:var(--t2)}.cf-prix-dialog .cf-alerte-cogs{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--aml);color:var(--am);font-weight:600}.cf-prix-dialog .cf-alerte-cogs[hidden]{display:none}.cf-prix-dialog form{padding:24px 30px} .cf-prix-dialog .cf-prix-grille{grid-template-columns:1.2fr 1fr;gap:20px;align-items:stretch;margin:0}.cf-prix-editeur{padding:20px;border-radius:12px;background:var(--bg);min-width:0}.cf-prix-editeur>label{font-size:12px;color:var(--t2)}.cf-prix-saisie{display:flex;align-items:baseline;gap:12px;margin:8px 0 18px}.cf-prix-saisie>span{font-size:13px;color:var(--t2);white-space:nowrap} .cf-prix-saisie #prix-saisie{min-width:0;width:100%;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:4px 0;font-size:32px;font-weight:600}.cf-prix-dialog input[type=range]{width:100%;height:7px;margin:0;padding:0;border:0;accent-color:var(--ac)}.cf-prix-echelle{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px;color:var(--t2)} .cf-prix-dialog .cf-comparaison{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:16px 20px;background:var(--bg);border:1px solid var(--line);border-radius:12px}.cf-prix-dialog .cf-marge-carte{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0;background:none;padding:0;min-width:0}.cf-prix-dialog .cf-marge-carte+.cf-marge-carte{padding-top:14px;border-top:1px solid var(--line)}.cf-prix-dialog .cf-marge-carte>span{font-size:13px;color:var(--t2)}.cf-marge-carte>span small{display:block;margin-top:7px;font-size:11px;white-space:nowrap}.cf-prix-dialog .cf-marge-carte output{font-size:24px;text-align:right}.cf-prix-dialog .cf-marge small{font-size:13px;margin-top:5px}.cf-prix-dialog .cf-plancher{margin:20px 0;font-size:13px;align-items:center}.cf-plancher>span{color:var(--t2)}.cf-legende{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;font-size:11px;margin:16px 0 22px}.cf-marge.rouge,.cf-legende .rouge{color:#b44958}.cf-marge.orange,.cf-legende .orange{color:#a36922}.cf-marge.vert,.cf-legende .vert{color:#347658}.cf-prix-dialog .cf-pied{gap:10px;padding-top:18px}.cf-prix-dialog .cf-pied .cta{min-width:0;padding:10px 15px} @media(max-width:600px){.cf-prix-dialog .cf-prix-grille{grid-template-columns:minmax(0,1fr)}.cf-prix-entete,.cf-prix-dialog form{padding:18px}.cf-prix-saisie #prix-saisie{font-size:28px}.cf-prix-dialog .cf-comparaison{padding:15px}.cf-prix-dialog .cf-marge-carte{flex-wrap:wrap}} .adv-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.adv-actions .cta{white-space:nowrap} .btn{border-radius:6px;min-height:42px;padding:10px 15px;background:var(--surf);color:var(--t1);border:1px solid var(--line);font-size:14px;font-weight:550} .gestion-liste{border:1px solid var(--line);border-radius:10px;background:var(--surf);box-shadow:var(--sh);overflow:clip}.gestion-liste .gestion-filtres{margin:0;padding:20px 22px 18px;border-bottom:1px solid var(--line);gap:16px;align-items:end}.gestion-liste .gestion-filtres [hidden]{display:none} .gestion-filtres input,.gestion-filtres select{border-radius:6px;min-height:40px;height:auto;font-size:13px;padding:10px 12px}.gestion-filtres label{font-size:12px;color:var(--t2)}.gestion-filtres-achats>label{flex:0 1 200px}.gestion-compteur{color:var(--t2);font-size:12px;white-space:nowrap}.gestion-filtres-achats>.gestion-compteur{margin-left:auto;padding-bottom:10px} .gestion-filtres-plus{font-size:12px;color:var(--t2);align-self:center}.gestion-filtres-plus>summary{cursor:pointer;list-style:none}.gestion-filtres-plus>summary::after{content:' ＋';color:var(--ac)}.gestion-filtres-plus[open]>summary::after{content:' −'}.gestion-filtres-plus>div{display:flex;flex-wrap:wrap;gap:12px;padding-top:12px}.gestion-filtres-plus[open]{flex-basis:100%}.gestion-filtres-plus label{min-width:150px;flex:1}.gestion-filtres-plus select{width:100%} .gestion-liste .gestion-table{border:0;border-radius:0;box-shadow:none;margin:0}.gestion-table .tab-tete a{color:inherit;text-decoration:none}.gestion-table .tab-tete a:hover{color:var(--ac)}.gestion-liste .gestion-total{margin:0;padding:20px 22px;border-top:1px solid var(--line)} .gestion-vide{text-align:center;padding:44px 24px}.gestion-vide h2{font-size:18px;margin:0 0 20px}.gestion-vide p{font-size:14px;color:var(--t2);margin:0} .gestion-liste .gestion-filtres-argent{display:block}.gestion-filtres-principaux{display:flex;align-items:end;gap:16px}.gestion-filtres-principaux>label{flex:1;min-width:0}.gestion-filtres-principaux>.gestion-recherche{flex:1.65}.gestion-recherche>span{display:block;position:relative}.gestion-recherche svg{position:absolute;left:14px;top:50%;transform:translateY(-50%)}.gestion-filtres .gestion-recherche input{width:100%;padding-left:44px}.gestion-filtres-principaux select{width:100%} .gestion-dates{flex:1.8;border:0;margin:0;padding:0;min-width:0;display:flex;gap:12px}.gestion-dates legend{font-size:12px;color:var(--t2);padding:0;margin:0 0 7px}.gestion-dates label{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1;min-width:0}.gestion-dates input{width:100%;min-width:0} .gestion-filtres-secondaires{display:flex;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.gestion-filtres .lien{font-size:12px;font-weight:400;color:var(--ac);text-decoration:none}.gestion-pointage{border:0;padding:0;margin:0;display:flex;gap:6px}.gestion-pointage label{position:relative;display:block;cursor:pointer;flex:none;min-width:0}.gestion-pointage input{position:absolute;width:1px;height:1px;opacity:0}.gestion-pointage label>span{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:12px}.gestion-pointage input:checked+span{background:var(--acl);color:var(--ac);font-weight:600}.gestion-pointage input:focus-visible+span{outline:2px solid var(--ac);outline-offset:2px}.gestion-pointage small{font-size:11px;padding:0 5px;background:var(--surf);border-radius:3px}.gestion-suivi{display:inline-block;color:var(--ac);font-size:12px;text-decoration:none;margin-top:18px} .gestion-form{max-width:1000px;margin-inline:auto}.gestion-form .gestion-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.gestion-paiement{max-width:none}@media(max-width:600px){.gestion-form .gestion-grille{grid-template-columns:1fr}}.gestion-contexte{margin-bottom:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:900px){.gestion-filtres-principaux{flex-wrap:wrap}.gestion-filtres-principaux>.gestion-recherche{flex-basis:100%}.gestion-dates{flex-basis:100%}} @media(max-width:600px){.gestion-liste .gestion-filtres{padding:16px}.gestion-filtres-achats>label{flex:1 1 100%}.gestion-pointage{gap:0}.gestion-pointage label>span{padding:9px 8px;gap:6px}.gestion-dates{flex-wrap:wrap}.gestion-dates label{flex-basis:100%}.gestion-filtres-secondaires{gap:10px}.gestion-vide{padding:30px 18px}.gestion-liste .gestion-total{flex-wrap:wrap}.adv-actions .cta{white-space:normal}} .stk-notice{font-size:13px;color:var(--ac);padding:14px 16px;background:var(--acl);border-radius:6px;margin:24px 0} .stk-table{table-layout:fixed;min-width:900px}.cf-table.stk-table th{text-align:center;font-weight:650;color:var(--t1);padding:18px 12px}.stk-table th:first-child{width:30%}.stk-table th:last-child{width:14%}.cf-table.stk-table td{padding:14px 12px;text-align:center;min-width:0}.cf-table.stk-table td:first-child{text-align:left}.cf-table.stk-table td:last-child{width:auto;padding:14px 12px}.stk-table .cf-produit img,.stk-table .cf-produit>.prod-ico{width:44px;height:44px}.stk-table .cf-produit{gap:14px}.stk-table .stk-valeur{font-size:14px;font-weight:400;color:var(--t1)}.stk-table .stk-negatif{color:var(--rd)}.stk-table .lien{font-size:12px;font-weight:400;white-space:nowrap;color:var(--ac);text-decoration:none}.stk-historique{margin:24px 0;color:var(--t2);font-size:12px}.stk-historique>summary{cursor:pointer}.stk-historique>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.stk-historique .stk-journal{display:inline-flex;gap:8px;align-items:center;margin:0} .cf-carte.prestation-carte{padding:0;overflow:hidden}.prestation-entete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}.prestation-entete h2{font-family:var(--f-body);font-size:14px;font-weight:550;letter-spacing:normal;margin:0;display:flex;align-items:center;gap:10px}.prestation-entete svg{color:var(--ac);width:18px;height:18px}.prestation-entete .badge{font-size:11px;color:var(--t2);background:var(--acl)}.prestation-carte .formulaire{display:block;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}.prestation-carte .prestation-champs{padding:26px 24px 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:0}.prestation-champs label{display:flex;flex-direction:column;align-self:start;justify-content:flex-start;font-size:13px;color:var(--t2);gap:8px}.prestation-champs input,.prestation-champs textarea{padding:11px 13px;min-height:44px;width:100%;border-radius:6px}.prestation-champs textarea{min-height:100px}.prestation-carte .prestation-recap{display:flex;justify-content:flex-end;gap:28px;flex-wrap:wrap;border-radius:0;background:none;border-top:1px solid var(--line);padding:20px 24px;margin:0;font-size:13px;font-weight:400}.prestation-recap strong{font-weight:600;margin-left:10px}.prestation-carte .adv-fenetre-pied{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;margin:0;border-top:1px solid var(--line)}.prestation-carte .adv-fenetre-pied .sub{font-size:11px;font-weight:400;color:var(--t2)} @media(max-width:600px){.prestation-carte .prestation-champs{grid-template-columns:1fr;padding:20px 16px}.prestation-entete,.prestation-carte .prestation-recap,.prestation-carte .adv-fenetre-pied{padding:16px}.prestation-carte .adv-fenetre-pied{flex-wrap:wrap}.prestation-carte .prestation-recap{justify-content:space-between}} .adv-fenetre{border-radius:14px;background:var(--surf)}.adv-fenetre-head{background:var(--surf);padding:22px 26px}.adv-fenetre-corps{padding:22px 26px} .adv-fenetre::backdrop,.gestion-modal::backdrop{background:#16122670;backdrop-filter:blur(3px)} .adv-fenetre .formulaire{background:none;border:0;box-shadow:none} .gestion-modal{border-radius:14px;background:var(--surf);color:var(--t1)} .ktuile{border-radius:7px;padding:20px;box-shadow:var(--sh)}.ktuile:hover{transform:none;box-shadow:var(--sh)} .kfig{font-family:var(--f-heading);font-size:28px;font-weight:750}.klab{font-size:13px;font-weight:400} @media(min-width:1450px){ main,main:has(.cf-page){padding:36px} .tete{padding:18px 36px 0;column-gap:36px;flex-wrap:nowrap} .tete>.atabs{order:0;width:auto;flex:1;gap:25px;flex-wrap:nowrap} .tete>.atabs .atab{padding-bottom:20px} .tete>.fin{order:5}.kfig{font-size:32px} } @media(max-width:1050px){.tete>.atabs{gap:18px}.tete>.atabs .atab svg{display:none}} @media(max-width:720px){ main,main:has(.cf-page){padding:24px 16px} .tete{padding:16px 16px 0;gap:10px}.mot{font-size:15px} .tete>.atabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:visible;padding:0} .tete>.atabs::after{content:none}.tete>.atabs .atab{font-size:12px;padding:10px 4px;justify-content:center;white-space:normal} .tete>.atabs .atab:last-child{margin:0}.tete>.fin{margin-left:auto} .adv-entete,.cf-entete{align-items:flex-start;flex-direction:column;gap:16px} h1,.adv-entete h1,.cf-entete h1{font-size:26px} input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])),select,textarea{font-size:16px} .tiers-filtres label{flex:1 1 100%;min-width:0}.tiers-filtres select{width:100%;min-width:0}.tiers-entete>.cta{width:100%;justify-content:center}.tiers-fiche-identite{width:100%} .cf-filtres-liste .cf-recherche{flex-basis:100%}.cf-filtres-liste select{flex:1}.cf-filtres-liste .sub{margin-left:auto} .stabs,.cf-onglets{gap:18px}.cta{white-space:normal} } } /* Modeleur pisciniste : page à deux panneaux de l’esquisse, IA en fenêtre. */ .off-exemple{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--t2);font-size:11px}.off-exemple button{padding:0;border:0;background:none;color:var(--ac);font:inherit;font-size:12px;text-align:left;cursor:pointer} .off-outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .off-modeleur>.retour{display:inline-block;margin-bottom:22px;color:var(--t2);font-size:13px;text-decoration:none} .off-modeleur .cf-entete{margin-bottom:28px} .off-modeleur-form{display:grid;grid-template-columns:minmax(400px,.85fr) minmax(0,1.3fr);gap:24px;align-items:stretch} .off-panneau{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surf);overflow:hidden} .off-panneau>header{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);min-height:48px;box-sizing:border-box} .off-panneau h2{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:600}.off-panneau h2 svg{color:var(--t2);flex:none}.off-panneau>header .sub{font-size:12px;margin:0} .off-modeleur .off-champs{padding:14px 20px;gap:10px;margin:0} .off-modeleur .off-champs label{display:grid;gap:5px;font-size:12px;font-weight:400;color:var(--t2)} .off-modeleur .off-champs input:not([type=hidden]){height:36px;min-height:36px;padding:8px 12px;border-radius:6px;width:100%;box-sizing:border-box} .off-modeleur .off-champs textarea{min-height:44px;height:44px;padding:8px 12px;border-radius:6px} .off-base{display:grid;grid-template-columns:1fr 1fr;gap:16px} .off-modeleur .off-tranches{table-layout:fixed;font-size:12px} .off-modeleur .off-tranches th{font-weight:400;color:var(--t2);font-size:11px} .off-modeleur .off-tranches th:first-child{width:22%}.off-modeleur .off-tranches th:nth-child(2){width:20%}.off-modeleur .off-tranches th:nth-child(3){width:30%} .off-modeleur .off-tranches td,.off-modeleur .off-tranches th{padding:7px 4px;vertical-align:middle} .off-modeleur .off-tranches td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .off-modeleur .off-tranches tbody th{color:var(--t1);font-size:12px} .off-modeleur .off-tranches input[type=number]{appearance:textfield}.off-modeleur .off-tranches input::-webkit-inner-spin-button,.off-modeleur .off-tranches input::-webkit-outer-spin-button{appearance:none;margin:0} .off-modeleur .off-tranches input{padding:5px 7px!important;height:30px!important;min-height:30px!important} .off-modeleur .off-remise{display:flex!important;flex-direction:row;align-items:center;gap:4px}.off-remise input{min-width:0} .off-panneau>footer{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line)} .off-panneau>footer .cta{width:auto}.off-erreur{color:var(--rd);font-size:12px;margin:0} .off-projection{display:flex;flex-direction:column}.off-courbe-choix{display:flex;gap:4px;margin:14px 24px 0;background:var(--acl);border-radius:9px;padding:4px} .off-courbe-choix button{flex:1;padding:9px 12px;border:0;border-radius:6px;background:transparent;color:var(--t2);font:inherit;font-size:12px;cursor:pointer} .off-courbe-choix button[aria-pressed=true]{background:var(--surf);color:var(--t1);box-shadow:0 1px 4px var(--line);font-weight:600} .off-projection-corps{padding:14px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;flex:1;min-width:0} .off-graphe-zone{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px} .off-modeleur .off-graphique{height:auto;max-height:260px;margin:0;width:100%} .off-graphe-vide{text-align:center;color:var(--t2);font-size:13px}.off-graphe-vide h3{font-size:16px;color:var(--t1)} .off-modeleur [hidden]{display:none!important} .off-parc{border-top:1px solid var(--line);padding-top:16px}.off-parc>label{display:flex;flex-direction:row;justify-content:space-between;font-size:13px;align-items:center}.off-parc output{font-weight:600} .off-parc input[type=range]{width:100%;margin:12px 0;padding:0} .off-projection-totaux{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--acl);padding:18px;border-radius:10px} .off-projection-totaux>div{display:flex;flex-direction:column;gap:8px;min-width:0}.off-projection-totaux span{font-size:12px;color:var(--t2)}.off-projection-totaux strong{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums} .off-projection-tva{font-size:12px;margin:12px 0 0;color:var(--t2)}.off-parc>.sub{font-size:11px;margin:8px 0 0} @media(max-width:1100px){.off-modeleur-form{grid-template-columns:minmax(0,1fr)}.off-graphe-zone{flex:none}} @media(max-width:600px){.off-graphe-zone{min-height:150px}.off-modeleur .off-graphique text{font-size:16px}.off-outils{width:100%}.off-modeleur .off-champs,.off-projection-corps{padding:16px}.off-courbe-choix{margin:12px 16px 0;flex-direction:column}.off-base{gap:10px}.off-projection-totaux{gap:12px;padding:14px}.off-projection-totaux strong{font-size:20px}.off-modeleur .off-tranches th{font-size:10px}.off-modeleur .off-tranches tbody th{font-size:11px}} /* Souscriptions : mêmes listes et fenêtre de saisie que l’esquisse. */ .off-filtre{display:flex;align-items:center;gap:8px}.off-filtre select{min-width:154px;padding:12px 16px}.off-groupe{margin:28px 0}.off-entete{margin-bottom:14px;min-height:26px}.off-entete>div{display:flex;align-items:center;gap:12px}.off-entete h2{font-size:17px;font-weight:700}.off-entete .sub{font-size:12px;margin:0}.off-table{table-layout:fixed}.off-table th{font-size:12px;font-weight:400;color:var(--t2);padding:16px 20px;background:none}.off-table td{padding:14px 20px;height:100px;font-size:13px}.off-table th:first-child,.off-table td:first-child{width:36%}.off-table th:nth-child(2){width:23%}.off-table th:last-child{width:210px}.off-table td strong{font-weight:600;font-size:14px}.off-table td small.sub{font-size:12px;line-height:1.6}.off-table .off-actions a{display:inline-flex}.off-actions .cta{font-size:13px;font-weight:400;gap:10px}.off-actions .off-retirer{display:block;margin-top:12px}.off-table:has(.bp-switch){min-width:880px}.off-table:has(.bp-switch) th:first-child{width:28%} /* Boutique : colonnes de la liste de référence, action flèche compacte. */ .off-table.off-table-boutique{min-width:980px} .off-table.off-table-boutique th:first-child,.off-table.off-table-boutique td:first-child{width:27%} .off-table.off-table-boutique th:nth-child(2){width:18%} .off-table.off-table-boutique th:nth-child(3){width:21%} .off-table.off-table-boutique th:nth-child(4){width:7%} .off-table.off-table-boutique th:nth-child(5){width:14%} .off-table.off-table-boutique th:nth-child(6){width:7%} .off-table.off-table-boutique th:last-child{width:6%} .off-table.off-table-boutique td,.off-table.off-table-boutique th{padding:14px 16px;height:auto} .off-table-boutique .off-tarif strong,.off-table-boutique .off-tva{white-space:nowrap;font-variant-numeric:tabular-nums} .off-table.off-table-boutique .off-actions{min-width:0;text-align:right;padding:14px 12px} .off-table.off-table-boutique .off-actions>a.cta{width:40px;height:40px;padding:0;justify-content:center;gap:0} .off-table.off-table-boutique .off-actions>a.off-retirer{font-size:11px;margin-top:8px} .off-table-boutique .off-publication form{display:flex;justify-content:center} .off-table-boutique .badge{font-size:11px;white-space:nowrap} .off-table-boutique .off-module{flex-direction:column;align-items:flex-start;gap:6px} .adv-fenetre:has(.off-form-ia){width:min(650px,calc(100vw - 32px));border-radius:18px}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head{padding:24px 26px}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head>div{display:flex;flex-direction:column}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head h1{font-size:23px;letter-spacing:-.6px;margin:0}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head p{order:-1;margin:0 0 12px;font-size:12px;color:var(--ac)}.adv-fenetre:has(.off-form-ia) .adv-fenetre-corps{padding:24px 26px 22px}.adv-fenetre .off-form-ia{display:block;padding:0;border:0;background:none;box-shadow:none}.off-form-ia .off-champs{gap:18px}.off-form-ia .off-champs>label{font-size:12px;font-weight:400;color:var(--t2);gap:8px}.off-form-ia input:not([type=checkbox]):not([type=hidden]),.off-form-ia textarea{padding:12px 13px;height:45px;font-size:13px;border-radius:6px;min-width:0}.off-form-ia textarea{height:100px;min-height:70px}.off-form-ia .off-montants{display:grid;grid-template-columns:1.25fr .7fr 1fr;align-items:end}.off-form-ia .off-montants>label{font-size:12px;font-weight:400;color:var(--t2);gap:8px}.off-ttc{border-radius:12px;background:var(--acl);padding:14px 13px;min-height:75px;display:flex;flex-direction:column;gap:10px}.off-ttc span{font-size:11px;color:var(--t2)}.off-ttc strong{font-size:19px}.off-form-ia .off-modules{display:block;border:0;border-radius:0;padding:0;box-shadow:none;background:none;max-height:none;overflow:visible}.off-modules legend{padding:0;margin-bottom:12px;font-size:13px}.off-modules legend small{margin-left:12px;font-size:11px;color:var(--t2)}.off-module-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:180px;overflow:auto;padding:2px}.off-module-choix .coche{border:1px solid var(--line);border-radius:8px;padding:12px;min-height:40px;font-size:12px;gap:10px;cursor:pointer}.off-module-choix input{margin:0;accent-color:var(--ac)}.off-form-ia .adv-fenetre-pied{justify-content:flex-end;margin-top:14px;padding-top:16px;border-top:1px solid var(--line);gap:10px}.off-form-ia .adv-fenetre-pied .cta.sec{color:var(--t1)} @media(max-width:600px){.off-entete>div{align-items:flex-start;flex-direction:column;gap:4px}.off-entete{flex-wrap:wrap}.off-filtre select{min-width:0}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head,.adv-fenetre:has(.off-form-ia) .adv-fenetre-corps{padding:18px}.off-form-ia .off-montants{grid-template-columns:1fr 1fr}.off-ttc{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between}.off-module-choix{grid-template-columns:1fr}.off-modules legend small{display:block;margin:4px 0 0}} .off-filtre [hidden]{display:none}.off-table th,.off-table td{text-align:left}.off-table td:first-child a{color:var(--t1);text-decoration:none}.off-table td:last-child{width:auto;padding:14px 20px;text-align:right}.off-table .off-actions>a.cta{color:var(--t1)}.off-table .off-actions>a.off-retirer{display:block;text-decoration:none;margin-top:12px;color:var(--t2);font-size:12px}.off-groupe:last-child{margin-bottom:0}.off-groupe .off-entete .sub{margin:0;font-size:12px} .adv-fenetre .off-form-ia input:not([type=checkbox]):not([type=hidden]):not([type=range]){height:45px;min-height:45px;padding:12px 13px}.off-module-choix .coche span{font-weight:400}.adv-fenetre:has(.off-form-ia) .adv-fermer{background:none;border:0;align-self:flex-start} @media screen{ .off-table td[colspan]{text-align:center;color:var(--t2)} .achat-entete{margin:22px 0}.achat-meta{display:flex;align-items:center;flex-wrap:wrap;gap:28px;padding:18px 20px;margin-bottom:22px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--t2);font-size:13px}.achat-meta a{color:inherit;text-underline-offset:3px;margin-left:5px} .achat-fiche{grid-template-columns:minmax(0,1fr) 300px;gap:20px}.achat-fiche .achat-section{padding:0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.achat-section>header{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line)}.achat-section>header h2{font-family:var(--f-body);font-size:15px;letter-spacing:normal;margin:0;font-weight:600}.achat-section>header small{font-size:12px;color:var(--t2)}.achat-section-corps{padding:20px}.achat-section .gestion-table{border:0;box-shadow:none;border-radius:0;margin:0;flex:none}.achat-section .gestion-table .num{font-weight:400}.achat-section .tab-l strong{font-weight:500}.achat-section .achat-articles-table{--cols:minmax(200px,3fr) repeat(4,minmax(90px,1fr))}.achat-section .tab-tete{font-size:12px}.achat-section .tab-l{padding-block:20px} .achat-section .gestion-documents{margin:0}.achat-joindre{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--acl);color:var(--t1);font-size:13px;font-weight:550;text-decoration:none}.achat-joindre small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--t2)}.achat-joindre>svg{color:var(--ac);flex:none}.achat-paiements>footer{margin-top:auto;border-top:1px solid var(--line);padding:18px 20px;text-align:right}.achat-paiements>footer a{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:400;color:var(--ac);text-decoration:none}.achat-section .gestion-montants{font-size:13px;gap:14px 0}.achat-total-ttc{border-block:1px solid var(--line);padding:16px 0;margin:0!important;font-size:17px;color:var(--t1)!important;font-weight:600}.achat-validation{margin-top:20px}.achat-validation .cta{width:100%;font-size:13px}.achat-import{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;margin-top:20px;background:var(--surf);border:1px solid var(--line);border-radius:10px;font-size:14px}.achat-import small{margin-left:12px;font-size:12px;color:var(--t2)}.achat-joindre-modal{max-width:540px}.achat-joindre-modal input[type=file]{width:100%;font-size:13px;margin-top:12px} @media(max-width:900px){.achat-fiche{grid-template-columns:minmax(0,1fr)}.achat-meta{gap:12px 24px}.achat-import{flex-wrap:wrap}.achat-section>header{padding-inline:16px}.achat-section-corps{padding:16px}} } @media screen{.t-achats.gestion-table{--cols:minmax(170px,1.5fr) minmax(160px,1.3fr) minmax(100px,.8fr) 115px 155px 120px 80px 30px;--tab-min:1030px}.t-achats .tab-l a{color:var(--ac)}.achat-document-lien{display:inline-flex;align-items:center;justify-content:center;color:var(--ac);padding:8px;border-radius:6px}.achat-document-lien:hover{background:var(--acl)}.t-achats .tab-l .num{font-weight:500}.t-achats .tab-l strong{font-weight:550}} @media screen{ .achat-saisie{max-width:1260px}.achat-editeur{gap:24px}.achat-saisie .gestion-card{padding:24px;border-radius:10px}.achat-saisie h2{font-family:var(--f-body);font-size:16px;font-weight:650;letter-spacing:normal;margin:0 0 22px}.achat-editeur label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:400;color:var(--t2);min-width:0}.achat-editeur input:not([type=hidden]),.achat-editeur select{width:100%;min-width:0;min-height:42px;padding:11px 12px;border-radius:6px;font-size:13px}.achat-piece-champs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.achat-piece-suivi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;margin:14px 0 24px}.achat-paiement-etat{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--acl);font-size:13px}.achat-paiement-etat>span{display:flex;align-items:center;gap:10px}.achat-paiement-etat small{display:block;margin-top:14px;color:var(--t2);font-size:12px;line-height:1.65}.achat-justificatif{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:24px;font-size:13px}.achat-justificatif strong{font-weight:600}.achat-justificatif small{display:block;color:var(--t2);margin-top:10px;font-size:12px}.achat-articles-editeur .gestion-toolbar{margin-bottom:18px}.achat-articles-editeur .gestion-toolbar h2{margin:0}.achat-article{padding:0;margin:12px 0;border:1px solid var(--line);border-radius:8px;background:var(--surf);min-width:0;overflow:hidden}.achat-article-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:0;padding:9px 14px;border-bottom:1px solid var(--line)}.achat-catalogue{font-size:12px;color:var(--t2);flex:1}.achat-catalogue summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ac);min-height:30px}.achat-catalogue summary::after{content:'＋'}.achat-catalogue[open] summary::after{content:'−'}.achat-catalogue>div{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:12px}.achat-retirer{min-height:30px;padding:6px;background:none}.achat-description{grid-template-columns:1.3fr .8fr 1.5fr;gap:14px;padding:12px 14px 10px}.achat-nombres{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:0;padding:0 14px 12px}.achat-nombres .achat-lot-ttc output{display:flex;align-items:center;min-height:42px;padding:10px 0;color:var(--t1);font-size:15px;font-weight:550}.achat-article-recap{border-top:1px solid var(--line);padding:10px 14px;margin-top:0;background:var(--bg);font-size:12px;color:var(--t2)}.achat-totaux-editeur{font-size:14px;border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.achat-saisie .gestion-actions{justify-content:flex-end} @media(max-width:900px){.achat-piece-champs,.achat-piece-suivi{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){.achat-saisie .gestion-card{padding:18px 16px}.achat-piece-champs,.achat-piece-suivi,.achat-description,.achat-catalogue>div{grid-template-columns:1fr}.achat-nombres{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-justificatif{align-items:flex-start;flex-direction:column}.achat-article{padding:0}.achat-saisie .gestion-toolbar{flex-wrap:wrap}.achat-editeur input:not([type=hidden]),.achat-editeur select{font-size:16px}} } @media screen{ .achat-article-entete h3{font-family:var(--f-body);font-size:13px;font-weight:600;white-space:nowrap;margin:8px 12px 0 0}.achat-catalogue{flex:0 1 65%;margin-left:auto}.achat-catalogue summary{justify-content:flex-end}.achat-nombres{grid-template-columns:repeat(4,minmax(0,1fr))}.achat-nombres .achat-lot-ttc output{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surf);font-weight:400;font-size:13px}.achat-article-options{display:flex;justify-content:flex-end;gap:20px;margin:0;padding:0 14px 12px}.achat-article-options label{flex-direction:row;align-items:center;gap:10px}.achat-article-options input:not([type=hidden]){width:90px;min-height:34px;padding:7px 10px;font-size:12px}.achat-resume-editeur{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:24px}.achat-totaux-editeur{width:360px;max-width:100%;margin:0 0 0 auto;padding:0;border:0}.achat-totaux-editeur>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:8px 0;font-size:13px}.achat-totaux-editeur output{font-size:13px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.achat-totaux-editeur>div:last-child{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}.achat-totaux-editeur>div:last-child output{font-weight:600;font-size:24px;font-family:var(--f-heading)}.achat-article label{font-size:11px;gap:5px}.achat-nombres label{justify-content:flex-end}.achat-article input:not([type=hidden]),.achat-article select{min-height:34px;padding:7px 9px;font-size:12px}.achat-nombres .achat-lot-ttc output{min-height:34px;padding:7px 9px;font-size:12px}.achat-editeur .achat-import{margin:0} @media(max-width:600px){.achat-nombres{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-article-options{gap:12px;flex-wrap:wrap;justify-content:flex-start}.achat-article-options input:not([type=hidden]){width:85px}.achat-resume-editeur{flex-direction:column;gap:18px}.achat-totaux-editeur{width:100%}.achat-totaux-editeur>div:last-child output{font-size:21px}.achat-article input:not([type=hidden]),.achat-article select{min-height:40px;font-size:16px}.achat-article-entete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.achat-article-entete h3{margin-right:0}.achat-catalogue{min-width:0;width:100%}.achat-catalogue summary{white-space:normal;flex-wrap:wrap}.achat-catalogue>div{width:100%}.achat-nombres label{justify-content:flex-end}.achat-nombres .achat-lot-ttc output{min-height:40px}.achat-catalogue{flex-basis:auto}.achat-article-entete{gap:6px}.achat-catalogue summary{font-size:11px}} } @media screen{ .argent-registre-table{--cols:minmax(250px,2.4fr) 115px 90px 125px 120px minmax(155px,1.1fr) 150px 35px;--tab-min:1120px}.argent-registre-table .tab-l{min-height:92px;padding-block:16px}.argent-registre-table .tab-l strong{font-size:13px;font-weight:550}.argent-registre-table .tab-l .sub{font-size:11px;margin-top:7px}.argent-registre-table .num{font-weight:400}.argent-transaction{display:flex;align-items:center;gap:24px}.argent-symbole{width:20px;flex:none;text-align:center;color:var(--ac);font-size:16px}.argent-pointer{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font-size:12px;padding:8px 0;color:var(--t2);white-space:nowrap}.argent-pointer>span{font-size:19px}.argent-pointer.pointe{color:#3b7a68}.argent-registre-table .tab-l>span:last-child a{color:var(--ac)} .argent-fiche{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.argent-section.gestion-card{padding:0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.argent-section>header{min-height:56px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.argent-section>header h2{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--f-body);font-size:13px;font-weight:550;letter-spacing:normal}.argent-section>header h2 svg,.argent-section>header h2>span{color:var(--ac)}.argent-section>header>span{font-size:12px;color:var(--t2)}.argent-montant{padding:26px 24px;background:var(--acl);display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line)}.argent-montant>span{font-size:12px;color:var(--t2)}.argent-montant strong{font-family:var(--f-heading);font-size:32px;font-weight:750;letter-spacing:-1px}.argent-montant a{font-size:13px;color:var(--t1);text-decoration:none}.argent-details{padding:12px 24px 24px;margin:0;font-size:13px}.argent-details>div{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--line)}.argent-details>div:last-child{border:0}.argent-details dt{color:var(--t2)}.argent-details dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:65%}.argent-details dd a{color:var(--t1);text-decoration:none}.argent-pointe{color:#3b7a68}.argent-piece{display:flex;align-items:center;gap:14px;padding:26px 24px 12px}.argent-piece-icone{width:48px;height:48px;border-radius:12px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;flex:none}.argent-piece h2,.argent-sans-piece h2{font-size:20px;margin:8px 0;font-weight:700;letter-spacing:-.5px}.argent-piece small,.argent-piece>div>span{color:var(--t2);font-size:12px}.argent-section>footer{padding:18px 24px;margin-top:auto;border-top:1px solid var(--line);text-align:right}.argent-section>footer .cta{font-size:13px;gap:12px}.argent-sans-piece{padding:32px 24px;text-align:center}.argent-sans-piece .argent-piece-icone{margin:0 auto 16px}.argent-sans-piece p{font-size:13px;line-height:1.7;color:var(--t2);max-width:360px;margin:12px auto} @media(max-width:800px){.argent-fiche{grid-template-columns:1fr}.argent-section>header,.argent-montant,.argent-piece,.argent-section>footer{padding-inline:18px}.argent-details{padding-inline:18px}} } @media screen{ .bp-page .bp-filtres{align-items:end;margin:24px 0 20px;gap:18px}.bp-filtres label:first-child{flex:1;min-width:220px;max-width:none}.bp-filtres label:nth-child(2){min-width:200px}.bp-filtres [data-result-count]{align-self:end;margin-left:0;padding-bottom:12px;font-size:12px}.bp-filtres input{width:100%}.bp-filtres [hidden]{display:none}.bp-table{min-width:1050px}.bp-table th{background:var(--surf);font-size:12px;font-weight:500;text-align:left}.bp-table td{padding:18px 20px;font-size:13px;text-align:left;height:96px}.bp-table td:nth-child(2){min-width:120px}.bp-table th:nth-child(3),.bp-table td:nth-child(3){text-align:right;white-space:nowrap}.bp-table td:nth-child(5){max-width:280px;width:25%;font-size:12px;color:var(--t2)}.bp-table th:nth-child(6),.bp-table td:nth-child(6){text-align:center}.bp-table .cf-produit img,.bp-table .prod-ico{width:42px;height:42px}.bp-table .cf-fonction{background:none;padding:0}.bp-table .cf-produit strong{font-size:14px;font-weight:600}.bp-table .cf-fonctions{justify-content:flex-start}.bp-table .bp-switch{padding:10px}.bp-table td:last-child{width:48px;text-align:right}.bp-table td:last-child>a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:40px;border:1px solid var(--line);border-radius:6px;color:var(--t1)}.bp-table .cf-produit small{font-size:11px} .bp-editeur>.retour{display:inline-flex;gap:8px;align-items:center;margin-bottom:20px}.bp-editeur-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.bp-saisie.cf-carte{padding:0;min-width:0}.bp-sections{display:flex;gap:24px;padding:0 24px;border-bottom:1px solid var(--line)}.bp-sections a{padding:18px 0;color:var(--t2);font-size:13px;text-decoration:none;border-bottom:2px solid transparent}.bp-sections [aria-selected=true]{border-color:var(--ac);color:var(--ac);font-weight:600}.bp-champs{min-width:0;border:0;margin:0;padding:24px}.bp-champs [hidden]{display:none}.bp-identite{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:18px}.bp-identite label{display:flex;flex-direction:column;font-size:12px;color:var(--t2)}.bp-identite input{width:100%}.bp-modifier-identite{display:block;text-align:right;font-size:11px;margin:10px 0 24px;color:var(--ac)}.bp-saisie .formulaire{max-width:none;box-shadow:none;border:0;border-radius:0;background:none;padding:0;margin:14px 0;gap:16px;grid-template-columns:1fr 1fr}.bp-saisie .formulaire label{min-width:0;font-size:12px;gap:8px;align-content:start;align-self:start}.bp-saisie .formulaire select{min-width:0;width:100%;max-width:100%}.bp-saisie .formulaire button{justify-self:end;grid-column:1/-1;font-size:12px;min-height:36px;padding:8px 12px}.bp-saisie .pied{font-size:11px;line-height:1.6;color:var(--t2);margin:10px 0 18px}.bp-saisie .formulaire label>.pied{margin:0;font-size:10px;text-align:right}.bp-saisie .bp-presentation{margin-top:0}.bp-saisie .bp-presentation textarea{min-height:86px}.bp-saisie .sec-title{font-size:14px;font-family:var(--f-heading);font-weight:650;color:var(--t1);letter-spacing:normal;border:0;margin:24px 0 14px;padding:0}.bp-saisie .sec-title:after{display:none}.bp-saisie .note{font-size:12px;padding:0;margin:12px 0}.bp-listes-contenu{display:grid;grid-template-columns:1fr 1fr;gap:24px}.bp-listes-contenu>section{min-width:0}.bp-saisie .rangs{margin:12px 0;max-width:none}.bp-saisie .rangs li{padding:10px 0;gap:6px;flex-wrap:wrap}.bp-saisie .rang-ligne{min-width:0;flex:1 1 70%}.bp-saisie .rang-ligne input{min-width:0;width:100%;font-size:12px}.bp-saisie .rang-txt{font-size:12px}.bp-saisie .rond{width:30px;height:30px}.bp-saisie .photos-rang img{width:100px;height:75px;object-fit:contain;background:white}.bp-saisie .photos-rang li{padding:12px 0}.bp-saisie .photos-rang .rang-txt{flex:1}.bp-saisie .photos-rang+.pied{margin-top:20px} .bp-photo-entete{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:24px}.bp-photo-entete h2{font-size:18px;margin:0 0 8px}.bp-photo-entete .sub{font-size:12px}.bp-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;list-style:none;margin:0;padding:0}.bp-photos>li{min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:12px}.bp-photo{width:100%;height:130px;object-fit:contain;background:white;border-radius:6px}.bp-photo-actions{display:flex;gap:8px;margin-top:auto;justify-content:flex-end}.bp-photos .rang-txt{line-height:1.5}.bp-apercu-public{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:32px}.bp-apercu-public img{width:100%;max-height:520px;object-fit:contain;background:white}.bp-apercu-public h2{font-size:28px}.bp-apercu-public article{min-width:0;line-height:1.7;overflow-wrap:anywhere}.bp-prix-public{font-size:26px;font-family:var(--f-heading)}.bp-preline{white-space:pre-line}.bp-apercu-public dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px}.bp-apercu-public dd{margin:0}.bp-apercu-public h3{margin-top:24px}@media(max-width:850px){.bp-apercu-public{grid-template-columns:1fr;padding:20px;gap:20px}.bp-photo-entete{flex-wrap:wrap}} .bp-aside{display:grid;gap:18px;min-width:0}.bp-verification.cf-carte{padding:20px}.bp-verification h2:first-child{margin-top:0}.bp-presentation small{font-size:10px;color:var(--t2);font-weight:400}.bp-presentation textarea{resize:vertical}.bp-presentation .pied.large{margin:0}.bp-apercu{display:block;width:100%;height:150px;object-fit:contain;background:#fff;border-radius:8px;margin-bottom:20px}.bp-sans-photo{display:grid;place-items:center;color:#777;font-size:13px}.bp-verification h2{font-size:16px;margin:24px 0 14px}.bp-verification dl{display:grid;grid-template-columns:minmax(0,1fr) auto;font-size:13px;margin:0 0 20px;gap:0}.bp-verification dt,.bp-verification dd{padding:12px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.bp-verification dt svg{color:var(--ac);flex:none}.bp-verification dd{margin:0;color:var(--t2);font-size:11px}.bp-verification .bp-complet{color:var(--t2)}.bp-verification>p{font-size:12px;overflow-wrap:anywhere}.bp-verification .sub,.bp-refus{font-size:11px;line-height:1.65;color:var(--t2)}.bp-refus{padding-left:16px}.bp-tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px;align-items:stretch}.bp-tarifs>div{display:flex;flex-direction:column;gap:12px;padding:12px 0}.bp-tarifs>.bp-total-ttc{padding:12px 16px;background:var(--surf2);border-radius:9px}.bp-publication-details{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.bp-publication-details>summary{cursor:pointer;font-size:13px;font-weight:600}.bp-publication-details>summary span{float:right;font-size:11px;font-weight:400;color:var(--t2)}.bp-tarifs span{font-size:12px;color:var(--t2)}.bp-tarifs strong,.bp-tarifs a{font-family:var(--f-heading);font-size:20px;color:var(--t1);text-decoration:none}.bp-famille-details{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.bp-famille-details>summary{cursor:pointer;font-weight:600} .bp-familles{gap:14px}.bp-famille>summary{padding:20px 24px;justify-content:flex-start}.bp-famille>summary>.cf-fonctions{flex:none}.bp-famille>summary>.cf-fonctions .cf-fonction{background:none;padding:0}.bp-famille>summary>.bf-identifiant{margin-left:0;justify-self:stretch;font-size:12px;color:var(--t2)}.bp-famille>summary::after{margin-left:12px}.bp-famille-corps{padding:0 24px 24px}.bp-variantes{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}.bp-variantes .cf-details{font-size:12px;grid-template-columns:minmax(0,1fr) minmax(90px,1fr)} /* Présentation commerciale compacte : mêmes seuils que l’esquisse, sans rogner les cartes. */ @media(min-width:1100px) and (max-width:1449px){ body:has(.cf-page-presentation) .tete{flex-wrap:nowrap;column-gap:20px;padding:14px 24px 0} body:has(.cf-page-presentation) .tete>.atabs{order:0;width:auto;flex:1;gap:16px;flex-wrap:nowrap} body:has(.cf-page-presentation) .tete>.atabs .atab svg{display:none} body:has(.cf-page-presentation) .mot{font-size:15px} body:has(.cf-page-presentation) .tete>.fin{order:5} } @media(min-width:851px) and (max-height:850px){ main:has(.cf-page-presentation){padding-top:10px} .cf-page-presentation>.retour{margin-bottom:6px} .cf-page-presentation>.cf-entete{margin:1px 0 8px} .cf-page-presentation>.cf-onglets{margin-bottom:14px} .cf-page-presentation>.cf-onglets a{padding-top:6px;padding-bottom:9px} .cf-page-presentation .cf-presentation:not(.cf-plein):not(:fullscreen) .cf-galerie{height:auto;min-height:clamp(380px,calc(100dvh - 270px),620px);grid-template-rows:auto minmax(120px,1fr) auto;gap:12px} .cf-page-presentation .cf-reperes .cf-carte{padding:16px} .cf-page-presentation .cf-reperes h2{margin-bottom:12px} .cf-page-presentation .cf-finances{margin-bottom:16px;align-items:stretch} .cf-page-presentation .cf-finances dt,.cf-page-presentation .cf-finances dd{padding-top:12px;padding-bottom:12px;display:flex;align-items:center} .cf-page-presentation .cf-finances dd{justify-content:flex-end;font-size:16px} .cf-page-presentation .cf-reperes p{margin-top:12px} } .cf-prix-lien{text-decoration:none}.cf-plein .cf-plein-commandes .cta{font-size:12px}.cf-plein .cf-plein-pied .cta{font-size:11px} @media(max-width:850px){.bp-editeur-grille{grid-template-columns:1fr}.bp-verification{display:block}.bp-listes-contenu{grid-template-columns:1fr}.bp-identite{grid-template-columns:1fr 1fr}.bp-identite label:first-child{grid-column:1/-1}.bp-saisie .formulaire{grid-template-columns:minmax(0,1fr)}.bp-tarifs{gap:10px}.bp-tarifs strong,.bp-tarifs a{font-size:17px}} @media(max-width:560px){.bp-champs{padding:16px}.bp-sections{gap:14px;padding:0 16px;flex-wrap:wrap}.bp-sections a{font-size:11px;padding:14px 0}.bp-filtres label:first-child{flex-basis:100%;max-width:none}.bp-filtres .sub{width:100%;text-align:right}.bp-famille>summary{padding:16px;gap:10px}.bp-famille>summary .cf-fonction svg{width:20px;height:20px}.bp-famille>summary>.bf-identifiant{display:block}.bp-famille-corps{padding:0 16px 16px}.cf-plein .cf-plein-commandes .cta{font-size:10px;padding:6px;min-height:30px}.cf-plein .cf-plein-prix .cta{display:none}} } .bp-photo-ajout{display:flex;align-items:end;gap:12px;margin:0;max-width:480px}.bp-photo-ajout label{display:grid;gap:6px;min-width:0}.bp-photo-ajout input{width:100%;box-sizing:border-box;font-size:12px}.bp-photo-ajout small{color:var(--t3);font-size:11px}.bp-photo-ajout button{flex-shrink:0}@media(max-width:600px){.bp-photo-ajout{width:100%;max-width:none;align-items:stretch;flex-direction:column}} .bp-selection-entete{display:flex;justify-content:space-between;gap:16px;margin:0 0 16px}.bp-photos-selection{grid-template-columns:repeat(3,minmax(0,1fr))}.bp-photos strong{font-size:13px}.bp-photo-source{font-size:11px;color:var(--t3)}.bp-photo-actions form{margin:0}.bp-photo-actions .cta{padding:7px 10px;font-size:12px}.bp-source-galerie{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.bp-source-galerie h3{font-size:16px;margin:0 0 16px}.bp-photos-disponibles{grid-template-columns:repeat(4,minmax(0,1fr))}.bp-photos-disponibles .bp-photo{height:100px}.bp-selection-vide{border:1px dashed var(--line);border-radius:10px;padding:32px;text-align:center;color:var(--t3)}@media(max-width:1100px){.bp-photos-selection,.bp-photos-disponibles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.bp-photos-selection,.bp-photos-disponibles{grid-template-columns:1fr}.bp-selection-entete{flex-direction:column;gap:6px}} .bp-photo-ajout [hidden]{display:none!important}.bp-photo-ajout [data-photo-choisir]{padding:12px 16px}.bp-photos-selection>li{padding:10px;gap:8px}.bp-photos-selection .rang-txt{font-size:11px;margin:0}.bp-photos-selection .bp-photo-actions{justify-content:flex-start;gap:6px}.bp-photo-actions .rond{border-radius:6px}.bp-photos-disponibles{display:flex;flex-wrap:wrap;gap:14px}.bp-photos-disponibles>li{width:145px;box-sizing:border-box;padding:8px;gap:6px}.bp-photos-disponibles .bp-photo{height:90px}.bp-photos-disponibles strong{font-size:12px}.bp-photo-source{overflow-wrap:anywhere}.bp-photos-disponibles .bp-photo-actions{justify-content:flex-start}.bp-selection-vide{background:var(--bg);border:0;text-align:left;padding:24px}.bp-source-galerie{border:0;padding-top:0}.bp-selection-entete{font-size:12px;color:var(--t3);margin-bottom:12px}@media(max-width:600px){.bp-photos-selection{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-photos-selection .bp-photo{height:100px}.bp-photo-actions .cta{padding:5px 8px}.bp-photos-selection strong{font-size:12px}} .bp-photo-legende{font-size:12px;line-height:1.4;overflow-wrap:anywhere;min-height:32px}.bp-photo-legende small{display:block;font-size:10px;color:var(--t3);font-weight:400}.bp-selection-compte{font-family:var(--f-body);font-size:11px;color:var(--t3);font-weight:400;margin-left:8px}.bp-photos-selection .bp-photo-actions .rond{width:36px;height:36px}.bp-photos-selection>li{gap:8px}.bp-photo-entete{margin-bottom:20px} @media(max-width:600px){.bp-photos-disponibles{flex-direction:column;align-items:flex-start}} .bp-photo-actions button:disabled{opacity:.35;cursor:not-allowed;background:var(--bg);box-shadow:none}.bp-retrait-dialog{max-width:500px;width:calc(100vw - 40px);box-sizing:border-box}.bp-retrait-dialog>p{font-size:14px;line-height:1.6;margin:20px 0}.bp-retrait-dialog h2{font-size:21px} /* Parcours de commande : la même checklist compacte que l’esquisse. La frise de suivi d’une commande validée (.prog sans .prog-parcours) reste distincte. */ @media screen{ .commande-creation-entete{margin:24px 0}.commande-type-panel{padding:25px;background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh)}.commande-type-panel h2{margin:0 0 20px;font-size:18px}.commande-type-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.commande-type-champs label{display:flex;flex-direction:column;font-size:13px;color:var(--t2)}.commande-type-champs select{width:100%}.commande-aide{margin:20px 0;color:var(--t2);font-size:13px}.commande-aide summary{color:var(--ac);cursor:pointer}.commande-aide p{line-height:1.7;margin-top:12px;max-width:85ch}.commande-type-panel footer{display:flex;justify-content:flex-end;gap:10px;margin-top:25px;padding-top:20px;border-top:1px solid var(--line)} @media(max-width:650px){.commande-type-champs{grid-template-columns:minmax(0,1fr)}.commande-type-panel{padding:20px}} .tete-parcours{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"g g" "t d";align-items:center;gap:20px;margin:0 0 24px} .tete-parcours .tp-identite{grid-area:t;min-width:0}.tete-parcours .tp-titre{font-size:30px;line-height:1.2;text-align:left;font-weight:750;letter-spacing:-.025em}.tete-parcours .tp-sous-titre{margin:9px 0 0;font-size:14px;color:var(--t2);overflow-wrap:anywhere} .tete-parcours .tp-g:empty,.tete-parcours .tp-d:empty{display:none} .tete-parcours .tp-g .cta.etape{padding:0;border:0;min-height:24px;background:none;color:var(--ac);font-weight:500;box-shadow:none}.tete-parcours .tp-d .cta.etape{background:var(--ac);color:var(--actext);border-color:var(--ac);font-weight:550} @media(max-width:650px){.tete-parcours{grid-template-columns:minmax(0,1fr);grid-template-areas:"g" "t" "d";gap:16px}.tete-parcours .tp-titre{font-size:26px}.tete-parcours .tp-d{justify-self:stretch}.tete-parcours .tp-d .cta{width:100%}} .prog.prog-parcours{--pt:36px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:20px 12px;margin:0 0 24px;border:1px solid var(--line);border-radius:16px;background:var(--surf);box-shadow:0 3px 12px #00000006;overflow:visible;backdrop-filter:none} .prog-parcours .prog-e{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;min-width:0;text-align:center;line-height:1.3} .prog-parcours .prog-e::after{top:17px;left:calc(50% + 25px);right:calc(-50% + 25px);width:auto;height:2px;background:var(--line);opacity:1} .prog-parcours .prog-pt{box-sizing:border-box;width:36px;height:36px;margin:0 auto 3px;border:1px solid var(--line);background:var(--surf);color:var(--t2);font-size:14px;font-weight:600} .prog-parcours .prog-pt svg{width:17px;height:17px}.prog-parcours .prog-n{margin:0;font-family:var(--f-body);font-size:13px;font-weight:600;line-height:1.3;color:var(--t1)} .prog-parcours .prog-etat{font-size:11px;font-weight:400;color:var(--t2)} .prog-parcours .prog-courante .prog-pt{color:var(--actext);background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 5px var(--acl)} .prog-parcours .prog-courante .prog-n,.prog-parcours .prog-courante .prog-etat{color:var(--ac)} .prog-parcours .prog-faite .prog-pt{background:var(--acl);border-color:transparent;color:var(--ac)}.prog-parcours .prog-faite::after{background:var(--line)} .prog-parcours .prog-probleme .prog-pt{background:var(--rdl);color:var(--rd);border-color:var(--rd)}.prog-parcours .prog-probleme .prog-n,.prog-parcours .prog-probleme .prog-etat{color:var(--rd)} .prog-parcours .prog-probleme[aria-current="step"] .prog-pt{box-shadow:0 0 0 5px var(--rdl)} .prog-parcours a:focus-visible .prog-pt{outline:2px solid var(--ac);outline-offset:5px} @media(max-width:650px){.prog.prog-parcours{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px;padding:18px 8px}.prog-parcours .prog-e::after{display:none}} } @media screen{ .commande-articles-table .tab-tete,.commande-articles-table .tab-l{grid-template-columns:minmax(200px,2.5fr) .5fr 1fr .9fr .6fr .6fr 1fr minmax(120px,1fr)} .commande-articles-table .l-ref-txt{display:flex;flex-direction:column;gap:4px;min-width:0}.commande-articles-table .l-ref-txt strong{color:var(--t1)} .commande-articles-table .num{font-weight:400}.commande-articles-table .lien{font-weight:400;text-decoration:none}.commande-articles-table.tab>.tab-l>.tab-actions{flex-wrap:wrap;position:static;box-shadow:none}.commande-articles-table .tab-l{padding-block:16px} .commande-articles-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0;color:var(--t2);font-size:13px} .commande-articles-totaux{margin:32px 0 32px auto;width:min(100%,350px)} .commande-articles-totaux>div{display:flex;justify-content:space-between;gap:20px;padding:8px 0}.commande-articles-totaux dt{color:var(--t2)}.commande-articles-totaux dd{margin:0;font-variant-numeric:tabular-nums}.commande-articles-totaux .fort{font-size:20px;font-weight:600;border-top:1px solid var(--line);margin-top:8px}.commande-articles-totaux .fort dt{color:inherit} .commande-articles-detail{font-size:13px;color:var(--t2);margin-top:28px}.commande-articles-detail summary{cursor:pointer;color:var(--ac)} .commande-article-editeur{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .commande-article-panel{min-width:0;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--surf);box-shadow:var(--sh)} .commande-article-panel h2{margin:0 0 24px;font-size:18px}.commande-article-panel>p{font-size:13px;color:var(--t2)} .commande-article-panel [hidden]{display:none!important} .commande-article-panel .article-appliquer{font:inherit;color:var(--ac);background:none;border:0;text-align:left;padding:0;cursor:pointer} .commande-article-panel .l-saisie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;border:0;box-shadow:none;background:none} .commande-article-panel .l-saisie label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px;color:var(--t2)} .commande-article-panel .l-saisie :is(input,select){width:100%;min-width:0;text-align:left;box-sizing:border-box} .commande-article-panel .c-nom{display:flex;gap:6px;min-width:0}.commande-article-panel .l-loupe{flex-shrink:0} .commande-article-enregistrer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:4px} .commande-article-disponibilite{margin:0}.commande-article-disponibilite>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;font-size:13px}.commande-article-disponibilite dt{color:var(--t2)}.commande-article-disponibilite dd{margin:0;font-variant-numeric:tabular-nums} @media(max-width:1000px){.commande-articles-table{overflow-x:auto}.commande-articles-table .tab-tete,.commande-articles-table .tab-l{min-width:900px;grid-template-rows:auto}.commande-articles-table .tab-tete>:nth-child(n),.commande-articles-table .tab-l>:nth-child(n){display:block;grid-column:auto;grid-row:auto}.commande-articles-table .tab-l>.l-ref,.commande-articles-table .tab-l>.tab-actions,.commande-articles-table .tab-l>.l-stock-alerte{display:flex}} @media(max-width:650px){.commande-article-editeur{grid-template-columns:minmax(0,1fr);gap:16px}.commande-article-panel{padding:20px}.commande-article-panel .l-saisie{grid-template-columns:minmax(0,1fr)}.commande-article-enregistrer{flex-wrap:wrap}} .commande-details-panel{border:1px solid var(--line);border-radius:10px;background:var(--surf);box-shadow:var(--sh);overflow:hidden} .commande-details-panel>h2{font-family:var(--f-body);font-size:14px;font-weight:600;margin:0;padding:20px 24px;border-bottom:1px solid var(--line)} .commande-details-panel>h2{display:flex;align-items:center;gap:10px}.commande-details-panel>h2 svg{color:var(--ac);flex-shrink:0} .commande-details-panel .formulaire.f-commande{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;padding:24px;margin:0;max-width:none;border:0;background:none;box-shadow:none;border-radius:0} .commande-details-panel .f-commande label{min-width:0;font-size:13px;color:var(--t2)} .commande-details-panel .champ-ligne{min-width:0;gap:8px}.commande-details-panel .champ-ligne select{min-width:0;flex:1}.commande-details-panel .champ-plus{flex-shrink:0;font-size:12px;padding:9px} .commande-details-panel .barre-bas{display:flex;align-items:center;justify-content:flex-end;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin:4px 0 0}.commande-details-panel .barre-bas .note{margin:0 auto 0 0;font-size:12px;color:var(--t2)} @media(max-width:650px){.commande-details-panel .formulaire.f-commande{grid-template-columns:minmax(0,1fr);padding:20px}.commande-details-panel>h2{padding:20px}.commande-details-panel .barre-bas{flex-wrap:wrap}.commande-creation-entete{align-items:start;flex-wrap:wrap;gap:16px}} } @media screen{ /* Livraison : la même composition que l’esquisse, sans remplacer les règles d’envoi. */ .formulaire.f-livraison{display:block;max-width:none;padding:0;border:0;background:none;box-shadow:none} .commande-parcours-panels{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:22px;align-items:start} .commande-parcours-panel{min-width:0;padding:25px;border:1px solid var(--line);border-radius:10px;background:var(--surf);box-shadow:var(--sh)} .commande-parcours-panel h2{font-size:17px;margin:0 0 22px} .commande-livraison-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .commande-livraison-frais{display:grid;gap:20px} .f-livraison .commande-livraison-transport{display:block} .f-livraison .commande-livraison-port{display:grid;gap:18px} .f-livraison .champ-date{grid-column:auto;grid-row:auto} .f-livraison .champ-adresse{padding-top:4px} .f-livraison .champ-adresse legend{margin-bottom:12px;font-weight:400} .f-livraison .champ-port{margin:0} .commande-livraison-aide{font-size:12px;color:var(--t2);line-height:1.6;margin:24px 0 0} .f-livraison>.barre-bas{margin-top:22px} @media(max-width:760px){.commande-parcours-panels{grid-template-columns:minmax(0,1fr)}.commande-livraison-champs{grid-template-columns:minmax(0,1fr)}.commande-parcours-panel{padding:20px}} .tete-parcours .tp-d .cta.etape.commande-retour-articles{background:var(--surf);color:var(--t1);border-color:var(--line)} /* Paiement et validation : même composition que l’esquisse, contrôles conservés. */ /* Fiche d'une commande validée (5f, esquisse « commande-detail ») : deux piles de cartes, puis les articles. */ .cmd-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;margin:22px 0} .cmd-pile{display:grid;gap:22px;min-width:0} .cmd-articles{margin-bottom:22px} .cmd-paiement-actions{display:grid;gap:12px;padding:0 24px 20px} .cmd-suivi{list-style:none;margin:0;padding:12px 24px 20px;display:grid;gap:14px} .cmd-suivi li{display:flex;gap:12px;align-items:flex-start} .cmd-suivi-point{width:9px;height:9px;border-radius:50%;background:var(--ac);margin-top:5px;flex:none} .cmd-suivi p{margin:0;font-size:13px}.cmd-suivi small{color:var(--t2);font-size:12px} .cmd-detail{margin-bottom:22px}.cmd-detail>summary{cursor:pointer;color:var(--ac);font-size:13px;margin-bottom:12px} @media(max-width:950px){.cmd-colonnes{grid-template-columns:minmax(0,1fr)}} /* Souscription, simulation du premier paiement (5f F3, esquisse « souscription-validation » : stripe-demo-controls). */ .sp-simulation{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px} .sp-simulation>span{font-size:12px;color:var(--t2)} .sp-simulation .cta{width:auto} .sp-lien{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ac);cursor:pointer} .commande-avoir{margin-bottom:22px} .commande-avoir,.commande-reglement{padding:0;overflow:hidden} .commande-avoir header,.commande-reglement header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--line)} .commande-avoir header h2,.commande-reglement header h2{display:flex;gap:10px;align-items:center;margin:0;font-size:13px;font-weight:600} .commande-avoir header h2 svg{color:var(--ac)} .commande-avoir header>span{font-size:13px;color:var(--t2)} .commande-avoir .note{margin:20px 24px} .commande-avoir-champs{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:end;gap:16px;margin:20px 24px} .commande-avoir-champs label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--t2);min-width:0} .commande-avoir-champs .cta,.commande-avoir-prevu .cta{width:auto} .commande-avoir-prevu{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 24px} .commande-avoir-prevu p{margin:0} @media(max-width:720px){.commande-avoir-champs{grid-template-columns:1fr}} .commande-avoir-total{display:flex;gap:28px;border-top:1px solid var(--line);padding-top:18px;margin:0 24px 24px;font-size:14px;flex-wrap:wrap} .commande-avoir-total>div{display:grid;gap:8px}.commande-avoir-total span{color:var(--t2)} .commande-avoir-total strong{white-space:nowrap;font-size:20px;font-weight:600} .commande-reglement .f-paiement{margin:0;max-width:none;padding:24px;border:0;background:transparent;box-shadow:none} .commande-reglement .f-paiement>.barre-bas{margin-top:12px} .commande-validation-panels{margin-bottom:22px} .commande-validation-recap{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .commande-validation-recap dd{text-align:left;font-weight:400} .commande-validation-notice{display:flex;gap:12px;align-items:center;padding:14px 18px;margin:0 0 22px;background:var(--aml);color:var(--am);font-size:13px;border-radius:6px} .commande-controles-valides{display:grid;gap:12px}.commande-controles-valides>span{display:flex;align-items:center;gap:6px;background:var(--grl);color:var(--gr-tx);font-size:12px;padding:7px 10px;border-radius:4px;margin-bottom:12px} .commande-controles>.lien{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px;border-top:1px solid var(--line);padding-top:18px} .commande-validation-detail{margin-top:24px;border-top:1px solid var(--line);padding-top:18px} .commande-validation-detail>summary{cursor:pointer;color:var(--ac);font-size:14px;font-weight:500} .commande-validation-detail[open]>summary{margin-bottom:24px} .commande-validation-detail .t-validation{overflow-x:auto;--cols:90px minmax(180px,1fr) 56px 96px 70px 96px 110px} .commande-validation-detail .t-validation .tab-tete,.commande-validation-detail .t-validation .tab-l{min-width:698px} .commande-validation-detail .t-validation .tab-tete>span:nth-child(n),.commande-validation-detail .t-validation .tab-l>span:nth-child(n){display:block} .commande-controles .alertes{padding:0;margin:0;list-style:none;display:grid;gap:12px} .commande-controles .alerte{margin:0;padding:12px 14px;border-radius:7px;font-size:13px;line-height:1.55} @media(max-width:760px){.commande-validation-recap{grid-template-columns:minmax(80px,1fr) minmax(0,2fr)}.commande-validation-recap dd{margin:0}.commande-avoir-total{flex-wrap:wrap}} .gestion-contrat{display:flex;align-items:center;gap:12px;margin:0 0 18px;flex-wrap:wrap;font-size:12px;color:var(--t2)}.gestion-contrat-pastille{display:inline-flex;align-items:center;gap:9px;padding:7px 8px 7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surf2);color:var(--ac);max-width:100%;flex-wrap:wrap}.gestion-contrat-pastille strong{font-size:12px;color:var(--t);font-weight:600}.gestion-contrat-separateur{color:var(--t2)}.gestion-contrat-pastille a{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;margin-left:3px;color:var(--ac)}.gestion-contrat-pastille a:hover{background:var(--acl)} .sc-dialog{padding:0!important;width:min(640px,calc(100vw - 40px))!important;max-height:calc(100dvh - 40px)}.sc-heading{display:flex;align-items:center;gap:16px;padding:24px 26px;border-bottom:1px solid var(--line)}.sc-avatar{display:grid;place-items:center;width:48px;height:48px;background:var(--acl);color:var(--ac);border-radius:14px;flex:none}.sc-client{flex:1}.sc-client h2{margin:4px 0;font-size:23px}.sc-client p{margin:0;color:var(--t2);font-size:13px}.sc-client small{font-size:11px;color:var(--t2)}.sc-fiche{padding:22px 26px 24px}.sc-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;border-top:1px solid var(--line);gap:20px}.sc-footer>small{color:var(--t2);font-size:11px}.sc-echeance{gap:10px;align-items:center}.sc-echeance>svg{color:var(--ac)}.sc-echeance>strong{margin-left:auto} .sc-table td a{color:inherit;text-decoration:none}.sc-table td a:hover{text-decoration:underline}.sc-table .badge.zero{background:var(--surf2);color:var(--t2)}.sc-filtres [hidden]{display:none!important}.sc-filtres select{padding-right:30px}.sc-table td{font-size:13px} .sc-filtres{display:flex;gap:18px;align-items:end;margin:20px 0}.sc-filtres label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--t2)}.sc-filtres input,.sc-filtres select{min-height:40px}.sc-recherche{flex:1}.sc-table{border-radius:14px 14px 0 0}.sc-table table{min-width:1000px;width:100%}.sc-table .cf-table td,.sc-table .cf-table th{padding:17px 14px;text-align:left}.sc-table td:nth-child(4),.sc-table td:nth-child(6),.sc-table th:nth-child(4),.sc-table th:nth-child(6){text-align:center}.sc-table td:first-child{min-width:220px}.sc-table td:nth-child(7),.sc-table th:nth-child(7){text-align:right;white-space:nowrap}.sc-table .sub{display:block}.sc-acces{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sc-acces>span{display:flex;gap:5px;align-items:center}.sc-acces small{font-size:11px}.sc-exports{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .sc-export-menu{position:relative;flex:none}.sc-export-menu>summary{list-style:none;cursor:pointer;white-space:nowrap}.sc-export-menu>summary::-webkit-details-marker{display:none}.sc-export-menu[open]>summary{border-color:var(--ac)}.sc-export-menu>summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px}.sc-export-choix{position:absolute;z-index:5;right:0;top:calc(100% + 8px);width:250px;max-width:calc(100vw - 40px);box-sizing:border-box;padding:6px;background:var(--surf);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #25174020}.sc-export-choix a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;color:var(--t1);text-decoration:none;font-size:13px}.sc-export-choix a:hover,.sc-export-choix a:focus-visible{background:var(--surf2);outline:2px solid var(--ac);outline-offset:-2px}.sc-export-choix svg{flex:none;color:var(--ac)}.sc-export-choix small{display:block;margin-top:3px;color:var(--t2);font-size:11px} @media(max-width:600px){.sc-export-choix{left:0;right:auto}} .sc-total{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:var(--acl);border-radius:0 0 14px 14px}.sc-total>strong{font-size:24px;white-space:nowrap}.sc-total small{display:block;font-size:12px;font-weight:400;margin-top:6px;color:var(--t2)}.sc-total>strong small{display:inline}.sc-vide{text-align:center;padding:32px}.adv-fenetre:has(.sc-fiche){width:min(640px,calc(100vw - 40px))}.sc-offre{margin:0 0 20px;color:var(--t2)}.sc-facturation{display:flex;align-items:start;justify-content:space-between;padding:20px;background:var(--surf2);border-radius:14px;gap:16px}.sc-facturation span,.sc-facturation small{font-size:12px;color:var(--t2)}.sc-facturation strong{display:block;font-size:30px;line-height:1.3;margin:7px 0;letter-spacing:-.7px}.sc-facturation strong small{margin-left:8px;font-weight:400;letter-spacing:0}.sc-dates{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.sc-dates span{display:block;color:var(--t2);font-size:12px;margin-bottom:7px}.sc-dates strong{font-size:15px;font-weight:600}.sc-dates small{display:block;font-size:10px;font-weight:400;color:var(--t2);margin-top:4px}.sc-echeance{display:flex;justify-content:space-between;gap:10px;padding:17px 0;font-size:13px}.sc-fonctions{border:1px solid var(--line);padding:15px 16px;border-radius:12px}.sc-fonctions header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.sc-fonctions h3{display:flex;align-items:center;gap:8px;font-size:13px;margin:0}.sc-fonctions header>span{font-size:11px;color:var(--t2)}.sc-fonctions p{font-size:12px;color:var(--t2);margin-bottom:0} @media(max-width:800px){.sc-filtres{flex-wrap:wrap}.sc-recherche{flex-basis:100%}.sc-total{align-items:start;flex-direction:column}.sc-total>strong{white-space:normal}} @media(max-width:550px){.sc-dates{grid-template-columns:1fr 1fr}.sc-fonctions header{flex-wrap:wrap}.sc-facturation{flex-wrap:wrap}} .sp-tarifs-recap{margin:0 24px 20px}.sp-verification{padding:0 24px 24px;font-size:13px;color:var(--t2)}.sp-verification .sp-confirmation{display:flex;flex-direction:row;align-items:flex-start;color:var(--t1);margin-top:18px}.sp-verification .sp-confirmation input{flex:none;margin-top:3px}@media(max-width:750px){.sp-tarifs-recap{margin:0 16px 16px}.sp-verification{padding:0 16px 16px}} .sp-panel>header>small{color:var(--t2);font-size:12px}.sp-paiement-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px}.sp-premier{background:var(--acl);border-radius:10px;padding:24px}.sp-premier>span{font-size:13px;color:var(--t2)}.sp-premier>strong{display:block;font-family:var(--f-heading);font-size:32px;margin:12px 0}.sp-premier>strong small{font-size:12px;font-weight:400;margin-left:8px}.sp-premier p,.sp-recurrence p{font-size:13px;line-height:1.6}.sp-recurrence{padding:12px 8px}.sp-recurrence h3{display:flex;gap:8px;align-items:center;margin-top:0;font-size:14px}.sp-recurrence .sp-note{margin:16px 0}.sp-cadence{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.sp-donnees{display:block;margin:0;padding:10px 24px}.sp-donnees>div{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;box-sizing:border-box}.sp-donnees>div:last-child{border-bottom:0}.sp-donnees dt{color:var(--t2)}.sp-donnees dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere;min-width:0}.sp-donnees .sp-documents{margin:0;padding:0}.sp-premier .sp-donnees{padding:0}.sp-inactif{border-top:1px solid var(--line);padding-top:16px}.sp-page>form>.sp-note{margin-left:0}.sp-page>form>.sp-confirmation{font-size:13px}@media(max-width:750px){.sp-paiement-grille{grid-template-columns:1fr;padding:16px}.sp-premier>strong{font-size:28px}.sp-donnees{padding:8px 16px}.sp-donnees>div{gap:12px}.sp-panel>header{flex-wrap:wrap}} .sp-suivi-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.sp-suivi-grille>.sp-panel{margin:0}.sp-suivi-pied{display:flex;justify-content:flex-end;padding:18px 24px;border-top:1px solid var(--line)}.sp-suivi-etat{padding:28px;text-align:center}.sp-suivi-icone{display:inline-flex;width:48px;height:48px;box-sizing:border-box;align-items:center;justify-content:center;margin:0 auto;border-radius:50%;background:var(--acl);color:var(--ac)}.sp-suivi-icone.confirme{background:var(--grl);color:var(--gr-tx)}.sp-suivi-icone.refuse{background:var(--rdl);color:var(--rd)}.sp-panel.sp-suivi-etat h2{display:block;font-size:16px;margin:18px 0 8px}.sp-suivi-etat p{font-size:13px;line-height:1.6}.sp-suivi-etat .sp-inactif{margin-top:24px;padding-top:24px;color:var(--t2)}@media(max-width:750px){.sp-suivi-grille{grid-template-columns:1fr}} .sp-page{width:100%;min-width:0}.sp-page>.retour{display:inline-flex;margin-bottom:18px;color:var(--t2);font-weight:500}.sp-page .cf-entete{margin-bottom:22px}.sp-progress.prog{grid-template-columns:repeat(5,minmax(0,1fr))}.sp-progress a{text-decoration:none}.sp-progress .prog-faite::after{background:var(--line)}.sp-progress .prog-pt svg{width:24px;height:24px}.sp-panel{border:1px solid var(--line);border-radius:14px;background:var(--surf);overflow:hidden;margin-bottom:20px}.sp-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line)}.sp-panel h2{display:flex;align-items:center;gap:9px;font-family:var(--f-body);font-size:13px;font-weight:600;margin:0}.sp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;padding:24px}.sp-panel h2 svg{color:var(--ac);flex:none}.sp-page [hidden]{display:none!important}.sp-fields label,.sp-document label{display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--t2);font-size:12px}.sp-fields input,.sp-fields select{width:100%;min-width:0;min-height:42px;box-sizing:border-box}.sp-fields .champ-ligne{display:flex;align-items:center;gap:8px}.sp-fields .champ-ligne select{flex:1;width:0}.sp-fields .champ-plus{white-space:nowrap;font-size:11px;padding:9px}.sp-actions{display:flex;justify-content:flex-end;gap:12px;margin:20px 0}.sp-actions .cta{display:inline-flex;align-items:center;gap:8px}.sp-offre{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding:20px 24px;background:var(--surf2)}.sp-offre p{margin:0}.sp-offre small,.sp-note{color:var(--t2);font-size:12px;line-height:1.6}.sp-note{margin:18px 24px}.sp-choix{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.sp-choix a{font-size:12px}.sp-reference{display:flex;flex-direction:column;gap:8px;color:var(--t2);font-size:12px}.sp-reference strong{font-size:20px;color:var(--t1)}.sp-modules{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}.sp-modules>span{display:flex;align-items:center;gap:8px;font-size:12px}.sp-modules>span:first-child{color:var(--t2);margin-right:8px}.sp-article [hidden]{display:none!important}.sp-tranches{position:relative;margin:0 24px;overflow:auto}.sp-tranches table{width:100%;min-width:500px}.sp-tranches input{max-width:110px}.sp-resume{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:24px;border-bottom:1px solid var(--line)}.sp-resume>div{display:flex;flex-direction:column;gap:8px}.sp-resume strong{font-size:22px;overflow-wrap:anywhere}.sp-resume small,.sp-resume span{font-size:12px;color:var(--t2);font-weight:400}.sp-paiement{padding:22px 24px}.sp-paiement h3{font-family:var(--f-body);font-size:16px;margin:0 0 12px}.sp-paiement p{font-size:13px;line-height:1.65}.sp-paiement .sp-note{margin:20px 0 0;padding:12px 16px;background:var(--surf2);border-radius:8px}.sp-confirmation{display:flex;align-items:start;gap:10px;font-size:13px;margin-top:22px}.sp-confirmation input{width:auto;flex-shrink:0;margin-top:3px}.sp-document{padding:0 24px 24px;width:50%;box-sizing:border-box}.sp-document-joint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;overflow-wrap:anywhere}.sp-document-joint small{flex-basis:100%}.sp-document input{width:100%;min-width:0;box-sizing:border-box}.sp-document form{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.sp-document small{font-size:11px;color:var(--t2)}.sp-documents{padding:0;list-style:none;margin:0 0 18px}.sp-documents a{display:inline-flex;align-items:center;gap:8px;font-size:13px;overflow-wrap:anywhere}.sp-liste-action{display:flex;justify-content:flex-end;margin-top:18px} @media(max-width:650px){.sp-document{width:100%}.sp-progress.prog{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}.sp-fields{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px}.sp-panel>header,.sp-offre,.sp-modules,.sp-paiement,.sp-document{padding:18px}.sp-resume{grid-template-columns:minmax(0,1fr);padding:18px;gap:18px}.sp-resume strong{font-size:20px}.sp-actions{flex-wrap:wrap}.sp-actions .cta{font-size:12px}.sp-tranches{margin:0 18px}.sp-fields .champ-ligne{flex-wrap:wrap}.sp-fields .champ-ligne select{flex-basis:100%;width:100%}} .sp-article>header{display:flex;justify-content:space-between;gap:20px;align-items:center}.sp-article>header a{display:inline-flex;align-items:center;gap:7px;font-size:12px}.sp-offre-choix{align-items:start}.sp-offre-choix .cta{font-size:11px;padding:7px 12px;margin-top:10px}.sp-catalogue-copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.sp-offre-choix .sp-offre{flex-direction:row;justify-content:space-between;gap:20px;border:0;background:none;padding:0;font-size:14px;color:var(--t2)}.sp-offre-choix .sp-offre strong{font-size:14px;color:var(--t1);white-space:nowrap}.sp-offre-choix .sp-offre small{font-size:14px}.sp-offre-choix .sp-offre [role=status]{flex-basis:100%}.sp-conditions{margin:0 24px 24px;border-top:1px solid var(--line);padding-top:18px}.sp-conditions h3{font-family:var(--f-body);font-size:16px;margin:0 0 16px}.sp-conditions .sp-modules{border:0;padding:0;margin:0 0 24px}.sp-conditions .sp-modules>span{padding:7px 10px;background:var(--surf2);border-radius:6px;margin:0;color:var(--t1)}.sp-tarif{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:18px;align-items:end}.sp-tarif label,.sp-tva label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--t2)}.sp-tarif input,.sp-tva input{width:100%;box-sizing:border-box;min-width:0;min-height:42px}.sp-tarif .sp-reference{padding-bottom:9px}.sp-tarif .sp-reference strong{font-size:16px}.sp-conditions .sp-tranches{margin:16px 0}.sp-conditions .sp-tranches table{min-width:760px}.sp-conditions .sp-tranches input{width:100px;min-width:100px}.sp-conditions .sp-note{margin:14px 0}.sp-tva{max-width:180px;margin:22px 0 0}.sp-totaux{display:flex;justify-content:flex-end;gap:28px;flex-wrap:wrap;padding:18px 0 0;margin-top:18px;border-top:1px solid var(--line);font-size:13px}.sp-totaux strong{margin-left:10px}.sp-conditions [role=alert]:empty{display:none} .sp-tranches .cf-table td,.sp-tranches .cf-table th{display:table-cell!important;padding:12px 16px;white-space:normal}.sp-tranches .cf-table label{display:inline-flex;flex-direction:row;align-items:center;gap:8px}.sp-tranches .cf-table input{height:40px;margin:0}.sp-tranches .cf-table td:last-child{padding-right:16px}.sp-tranches .cf-table th:last-child,.sp-tranches .cf-table td:last-child{width:auto;min-width:150px}.sp-article>header a{color:var(--ac);text-decoration:none} @media(max-width:700px){.sp-offre-choix .sp-offre{flex-direction:column}.sp-fields{grid-template-columns:minmax(0,1fr)}.sp-tarif{grid-template-columns:1fr 1fr}.sp-conditions{margin:0 18px 18px}.sp-totaux{justify-content:flex-start;gap:14px}.sp-article>header{flex-wrap:wrap}.sp-tarif .sp-reference strong{font-size:14px}} } .commande-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0}.commande-type-carte{display:flex;flex-direction:column;align-items:flex-start;gap:14px;border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--surf);color:var(--t1);text-decoration:none}.commande-type-carte:hover,.commande-type-carte:focus-visible{border-color:var(--ac);box-shadow:0 4px 16px #69509b16}.commande-type-icone{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--surf2);color:var(--ac)}.commande-type-carte h2{font-family:var(--f-body);font-size:21px;margin:0}.commande-type-carte p,.commande-type-carte small{margin:0;color:var(--t2)}.commande-type-carte strong{display:flex;align-items:center;gap:12px;color:var(--ac);font-size:13px;margin-top:12px}.sc-commandes .cf-table td{vertical-align:middle}.sc-commandes .cf-table td:first-child a{color:var(--t1);text-decoration:none}.sc-commandes .cf-table td:first-child a:hover{text-decoration:underline}.sc-commandes .cf-table th:not(:first-child),.sc-commandes .cf-table td:not(:first-child){text-align:center}.sc-commandes .cf-table td:first-child{width:40%}.sc-commandes .cf-table td:nth-child(2){min-width:0}.sc-commandes .cf-table small{display:block;margin-top:5px;color:var(--t2)} @media(max-width:650px){.commande-types{grid-template-columns:minmax(0,1fr);gap:16px}.commande-type-carte{padding:22px}} .rapport-dialog{width:min(1100px,calc(100vw - 40px))!important;max-height:94dvh;padding:24px!important;box-sizing:border-box;border-radius:14px}.rapport-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.rapport-dialog>header>a{display:inline-flex;padding:4px;color:var(--t2);text-decoration:none}.rapport-dialog h2{margin:0;font-size:21px}.rapport-dialog header p{font-size:12px;color:var(--t2);margin:5px 0 18px}.rapport-dialog form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.rapport-dialog label{display:flex;flex-direction:column;gap:6px;font-size:12px}.rapport-dialog input{height:40px;padding:8px;box-sizing:border-box;min-width:0}.rapport-dialog .rapport-vide{padding:60px 20px;text-align:center;color:var(--t2);background:var(--surf2);border-radius:8px;margin-top:18px}.rapport-dialog iframe{display:block;width:100%;height:62dvh;border:1px solid var(--line);border-radius:8px;margin-top:18px;background:var(--surf2)}.rapport-dialog [hidden]{display:none!important}.rapport-dialog [role=alert]{color:var(--ko);font-size:13px;margin:16px 0}.rapport-dialog .cta{min-height:40px;box-sizing:border-box} @media(max-width:600px){.rapport-dialog{padding:18px!important}.rapport-dialog form>label{flex:1;min-width:120px}.rapport-dialog input{width:100%}.rapport-dialog .rapport-vide{padding:36px 14px}} .sc-contrat{min-width:0}.sc-contrat>.retour{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--ac);text-decoration:none;margin-bottom:18px}.sc-contrat>.cf-entete{margin:22px 0}.sc-contrat-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}.sc-contrat-carte{background:var(--surf);border:1px solid var(--line);border-radius:12px;margin-bottom:20px;overflow:hidden;min-width:0}.sc-contrat-carte>header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}.sc-contrat-carte h2{display:flex;align-items:center;gap:9px;font-family:var(--f-body);font-size:13px;margin:0}.sc-contrat-carte h2 svg{color:var(--ac);width:17px;height:17px;flex:none}.sc-contrat-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.sc-contrat-etat{font-size:11px;font-weight:500;color:var(--t2)}.sc-contrat-actions .cta.sec{color:var(--t1);gap:9px}.sc-contrat-donnees .sc-acces{justify-content:flex-end}.sc-contrat-donnees .sc-acces small{display:inline;font-size:13px;color:var(--t1)}.sc-contrat-donnees .cf-fonction{background:none;padding:0}.sc-contrat-carte header small{color:var(--t2);font-size:11px}.sc-contrat-donnees{margin:0;padding:10px 24px}.sc-contrat-donnees>div{display:flex;align-items:center;justify-content:space-between;min-height:48px;box-sizing:border-box;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.sc-contrat-donnees>div:last-child{border:0}.sc-contrat-donnees dt{color:var(--t2)}.sc-contrat-donnees dd{margin:0;overflow-wrap:anywhere;text-align:right;font-weight:500;min-width:0}.sc-contrat-donnees dt{flex-shrink:0;max-width:45%}.sc-contrat-table{overflow:auto}.sc-contrat-table table{width:100%;min-width:620px;margin:0;border:0}.sc-contrat-table .cf-table th,.sc-contrat-table .cf-table td{padding:15px 22px;text-align:left;font-size:13px}.sc-contrat-table .cf-table td:first-child,.sc-contrat-table .cf-table td:nth-child(2){min-width:0}.sc-contrat-table .cf-table th:last-child,.sc-contrat-table .cf-table td:last-child{text-align:right}.sc-contrat-table td a{color:var(--ac);text-decoration:none}.sc-contrat-table td a:hover{text-decoration:underline}.sc-contrat-table td small{display:block;color:var(--t2);font-size:11px;margin-top:5px}.sc-contrat-note,.sc-contrat-vide{padding:18px 22px;margin:0;font-size:13px;color:var(--t2)}.sc-complet{display:flex;align-items:center;justify-content:space-between;margin-top:20px;color:var(--ac);font-size:13px;text-decoration:none} @media(max-width:760px){.sc-contrat-grille{grid-template-columns:minmax(0,1fr);gap:0}.sc-contrat-carte>header{align-items:start;flex-direction:column;gap:6px}.sc-contrat-donnees{padding:8px 16px}.sc-contrat-donnees>div{gap:12px}.sc-contrat>.cf-entete{align-items:start;gap:15px}} .navigation-saisie{width:min(620px,calc(100vw - 32px));padding:26px;border:1px solid var(--line);color:var(--t1)}.navigation-saisie h2{font-size:22px;letter-spacing:-.4px;margin:0 0 14px}.navigation-saisie p{font-size:14px;line-height:1.6;color:var(--t2);margin:0 0 24px}.navigation-saisie-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.navigation-saisie-actions .cta{font-size:12px}.navigation-saisie-actions [data-rester]{margin-right:auto}@media(max-width:600px){.navigation-saisie{padding:20px}.navigation-saisie-actions{flex-direction:column}.navigation-saisie-actions .cta{width:100%;text-align:center;justify-content:center}.navigation-saisie-actions [data-rester]{margin-right:0}} @media screen { .achat-couts-page{max-width:1320px;margin:0 auto}.achat-import-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;align-items:start}.achat-import-champs{display:grid;gap:12px;padding:16px 20px}.achat-import-champs label,.achat-import-base{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;font-size:13px;margin:0;min-height:38px}.achat-import-champs input{width:140px;flex:none;box-sizing:border-box;padding:8px 10px;text-align:right;font-size:13px;margin:0;height:36px}.achat-import-champs p,.achat-couts-note{font-size:12px;line-height:1.5;color:var(--t2);margin:4px 0}.achat-couts-note{padding:12px 20px;margin:0}.achat-couts-page .achat-section{padding:0;overflow:hidden;border-radius:10px}.achat-couts-section .achat-couts-table{--cols:minmax(200px,2fr) 100px 150px 140px 170px 120px;--tab-min:900px;overflow-x:auto;min-width:0}.achat-couts-table .tab-tete,.achat-couts-table .tab-l{min-width:900px;grid-template-columns:var(--cols);grid-template-rows:auto}.achat-couts-table .tab-tete>span:nth-child(n),.achat-couts-table .tab-l>span:nth-child(n){display:block;grid-column:auto;grid-row:auto}.achat-couts-table .tab-tete>span.d{text-align:right}.achat-couts-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}.achat-couts-total{display:flex;justify-content:flex-end;gap:28px;font-size:13px;padding:18px 22px;border-top:1px solid var(--line);flex-wrap:wrap}.achat-import-base strong{font-variant-numeric:tabular-nums}.achat-couts-page .gestion-actions{flex-wrap:wrap} @media(max-width:750px){.achat-import-grille{grid-template-columns:minmax(0,1fr)}.achat-import-champs input{font-size:16px}.achat-import-base{flex-wrap:wrap}.achat-couts-total{gap:12px}.achat-couts-page .gestion-actions .btn,.achat-couts-page .gestion-actions .cta{white-space:normal}.achat-couts-page .achat-section>header{flex-wrap:wrap}.achat-couts-page .adv-entete{align-items:start}} @media(max-width:500px){.achat-import-champs label{flex-direction:column;align-items:stretch;gap:8px}.achat-import-champs input{width:100%}} /* 30/10 : prix par composant, un gabarit pour le coût réel et les estimations (achat-couts.js). Colonnes : composant, coût complet, achat, port, taxes, lot, console. */ .prx-section{padding:0!important;overflow:hidden;border-radius:10px;margin:0 0 20px} .prx-tete{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 24px;padding:16px 20px;border-bottom:1px solid var(--line)} .prx-titre{min-width:0;flex:1 1 260px}.prx-titre h2{font-family:var(--f-body);font-size:16px;font-weight:650;letter-spacing:normal;margin:0} .prx-source{margin:5px 0 0;font-size:13px;color:var(--t2)} .prx-faits{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;align-items:center} .prx-faits li{font-size:12px;color:var(--t2);background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap} .prx-faits li:has(.badge){background:none;border:0;padding:0}.prx-faits b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums} .prx-actions{margin-left:auto}.prx-actions form{margin:0} .prx-section .btn.sm{min-height:30px;padding:5px 11px;font-size:12px;border-radius:7px;white-space:nowrap} .prx-reparti{margin:0;padding:10px 20px;font-size:12px;color:var(--t2);border-bottom:1px solid var(--line)} .prx-details{padding:10px 20px;border-bottom:1px solid var(--line);font-size:12px;color:var(--t2)} .prx-details summary{cursor:pointer;color:var(--ac);width:fit-content}.prx-details p{margin:8px 0 0;line-height:1.55;max-width:900px;overflow-wrap:anywhere} .prx-methode{border:1px solid var(--line);border-radius:10px;background:var(--surf);padding:12px 18px} .prx-entete,.prx-ligne{display:grid;grid-template-columns:minmax(190px,1.2fr) 118px 84px 78px 84px 108px minmax(340px,1.8fr);gap:0 16px;padding:0 20px} .prx-entete{padding-block:10px;font-size:12px;color:var(--t2);background:var(--surf2);border-bottom:1px solid var(--line)} .prx-entete small{display:block;font-size:11px;color:var(--t3);margin-top:2px;font-weight:400}.prx-entete .d{text-align:right} .prx-lignes{list-style:none;margin:0;padding:0} .prx-ligne{padding-block:18px;border-top:1px solid var(--line);align-items:start}.prx-ligne:first-child{border-top:0} .prx-ligne>*{min-width:0} .prx-vide{padding:22px 20px;font-size:13px;color:var(--t2)} .prx-composant{display:flex;gap:12px;align-items:flex-start} .prx-composant strong{display:block;font-size:14px;font-weight:600;color:var(--t1);overflow-wrap:anywhere} .prx-composant .sub{display:block;font-size:12px;color:var(--t2);margin-top:3px} .prx-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.45;color:var(--t2);margin-top:5px;overflow-wrap:anywhere} .prx-vignette{flex:none;width:44px;height:44px;border-radius:8px;background:var(--surf2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--t2);overflow:hidden} .prx-vignette img{width:100%;height:100%;object-fit:contain;background:#fff} .prx-lib{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .prx-cle{text-align:right}.prx-cle strong{display:block;font-family:var(--f-heading);font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2} .prx-num{text-align:right;font-size:13px;color:var(--t1);font-variant-numeric:tabular-nums;padding-top:4px}.prx-num .prx-val{white-space:nowrap} .prx-lot .prx-val{font-weight:600}.prx-devise{display:block;margin-top:4px;font-size:11.5px;color:var(--t2);white-space:nowrap} .prx-console{background:var(--surf2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px} .prx-lien{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.prx-lien .badge{flex:none} .prx-cible{font-weight:600;color:var(--t1);text-decoration:none;overflow-wrap:anywhere}.prx-cible:hover{text-decoration:underline} .prx-cible-meta{flex-basis:100%;font-size:11.5px;color:var(--t2)}.prx-cible-meta code{font-size:11px;word-break:break-all} .prx-lien-detail,.prx-blocage{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--t2)}.prx-blocage .badge{margin-right:4px} .prx-paliers{list-style:none;margin:8px 0 0;padding:0} .prx-palier{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0 0;margin-top:7px;border-top:1px solid var(--line)} .prx-palier-nom{font-weight:600;color:var(--t1)}.prx-palier-etat small{display:block;margin-top:3px;font-size:11px;line-height:1.4;color:var(--t2)} .prx-palier .badge{padding:2px 7px;font-size:10.5px;white-space:nowrap} @media(max-width:1180px){.prx-entete{display:none}.prx-ligne{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;padding:16px}.prx-composant,.prx-cle,.prx-console{grid-column:1/-1}.prx-cle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;border-radius:8px;background:var(--acl)}.prx-lib{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;font-size:11px;color:var(--t2);white-space:normal;margin-bottom:3px}.prx-cle .prx-lib{margin:0;font-size:12px}.prx-num{text-align:left;padding-top:0}.prx-tete{padding:14px 16px}.prx-reparti,.prx-details{padding-inline:16px}} @media(max-width:560px){.prx-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-actions{margin-left:0}.prx-faits li{white-space:normal}.prx-palier{grid-template-columns:minmax(0,1fr) auto}.prx-palier-nom{grid-column:1/-1}.prx-palier-etat{grid-column:1}} } @container reglages (max-width:550px){.adv-client-dialog{padding:20px}.adv-client-champs{grid-template-columns:minmax(0,1fr);gap:14px}.adv-client-dialog footer{flex-wrap:wrap}.adv-client-dialog .cta{font-size:13px}} @container reglages (max-width:600px){.cf-prix-dialog .cf-prix-grille{grid-template-columns:minmax(0,1fr)}.cf-prix-entete,.cf-prix-dialog form{padding:18px}.cf-prix-saisie #prix-saisie{font-size:28px}.cf-prix-dialog .cf-comparaison{padding:15px}.cf-prix-dialog .cf-marge-carte{flex-wrap:wrap}} @container reglages (max-width:600px){.gestion-form .gestion-grille{grid-template-columns:1fr}} @container reglages (max-width:900px){.gestion-filtres-principaux{flex-wrap:wrap}.gestion-filtres-principaux>.gestion-recherche{flex-basis:100%}.gestion-dates{flex-basis:100%}} @container reglages (max-width:600px){.gestion-liste .gestion-filtres{padding:16px}.gestion-filtres-achats>label{flex:1 1 100%}.gestion-pointage{gap:0}.gestion-pointage label>span{padding:9px 8px;gap:6px}.gestion-dates{flex-wrap:wrap}.gestion-dates label{flex-basis:100%}.gestion-filtres-secondaires{gap:10px}.gestion-vide{padding:30px 18px}.gestion-liste .gestion-total{flex-wrap:wrap}.adv-actions .cta{white-space:normal}} @container reglages (max-width:600px){.prestation-carte .prestation-champs{grid-template-columns:1fr;padding:20px 16px}.prestation-entete,.prestation-carte .prestation-recap,.prestation-carte .adv-fenetre-pied{padding:16px}.prestation-carte .adv-fenetre-pied{flex-wrap:wrap}.prestation-carte .prestation-recap{justify-content:space-between}} @container reglages (max-width:1050px){.tete>.atabs{gap:18px}.tete>.atabs .atab svg{display:none}} @container reglages (max-width:720px){ main,main:has(.cf-page){padding:24px 16px} .tete{padding:16px 16px 0;gap:10px}.mot{font-size:15px} .tete>.atabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:visible;padding:0} .tete>.atabs::after{content:none}.tete>.atabs .atab{font-size:12px;padding:10px 4px;justify-content:center;white-space:normal} .tete>.atabs .atab:last-child{margin:0}.tete>.fin{margin-left:auto} .adv-entete,.cf-entete{align-items:flex-start;flex-direction:column;gap:16px} h1,.adv-entete h1,.cf-entete h1{font-size:26px} input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])),select,textarea{font-size:16px} .tiers-filtres label{flex:1 1 100%;min-width:0}.tiers-filtres select{width:100%;min-width:0}.tiers-entete>.cta{width:100%;justify-content:center}.tiers-fiche-identite{width:100%} .cf-filtres-liste .cf-recherche{flex-basis:100%}.cf-filtres-liste select{flex:1}.cf-filtres-liste .sub{margin-left:auto} .stabs,.cf-onglets{gap:18px}.cta{white-space:normal} } @container reglages (max-width:1100px){.off-modeleur-form{grid-template-columns:minmax(0,1fr)}.off-graphe-zone{flex:none}} @container reglages (max-width:600px){.off-graphe-zone{min-height:150px}.off-modeleur .off-graphique text{font-size:16px}.off-outils{width:100%}.off-modeleur .off-champs,.off-projection-corps{padding:16px}.off-courbe-choix{margin:12px 16px 0;flex-direction:column}.off-base{gap:10px}.off-projection-totaux{gap:12px;padding:14px}.off-projection-totaux strong{font-size:20px}.off-modeleur .off-tranches th{font-size:10px}.off-modeleur .off-tranches tbody th{font-size:11px}} @container reglages (max-width:600px){.off-entete>div{align-items:flex-start;flex-direction:column;gap:4px}.off-entete{flex-wrap:wrap}.off-filtre select{min-width:0}.adv-fenetre:has(.off-form-ia) .adv-fenetre-head,.adv-fenetre:has(.off-form-ia) .adv-fenetre-corps{padding:18px}.off-form-ia .off-montants{grid-template-columns:1fr 1fr}.off-ttc{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between}.off-module-choix{grid-template-columns:1fr}.off-modules legend small{display:block;margin:4px 0 0}} @container reglages (max-width:900px){.achat-fiche{grid-template-columns:minmax(0,1fr)}.achat-meta{gap:12px 24px}.achat-import{flex-wrap:wrap}.achat-section>header{padding-inline:16px}.achat-section-corps{padding:16px}} @container reglages (max-width:900px){.achat-piece-champs,.achat-piece-suivi{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}} @container reglages (max-width:600px){.achat-saisie .gestion-card{padding:18px 16px}.achat-piece-champs,.achat-piece-suivi,.achat-description,.achat-catalogue>div{grid-template-columns:1fr}.achat-nombres{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-justificatif{align-items:flex-start;flex-direction:column}.achat-article{padding:0}.achat-saisie .gestion-toolbar{flex-wrap:wrap}.achat-editeur input:not([type=hidden]),.achat-editeur select{font-size:16px}} @container reglages (max-width:600px){.achat-nombres{grid-template-columns:repeat(2,minmax(0,1fr))}.achat-article-options{gap:12px;flex-wrap:wrap;justify-content:flex-start}.achat-article-options input:not([type=hidden]){width:85px}.achat-resume-editeur{flex-direction:column;gap:18px}.achat-totaux-editeur{width:100%}.achat-totaux-editeur>div:last-child output{font-size:21px}.achat-article input:not([type=hidden]),.achat-article select{min-height:40px;font-size:16px}.achat-article-entete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.achat-article-entete h3{margin-right:0}.achat-catalogue{min-width:0;width:100%}.achat-catalogue summary{white-space:normal;flex-wrap:wrap}.achat-catalogue>div{width:100%}.achat-nombres label{justify-content:flex-end}.achat-nombres .achat-lot-ttc output{min-height:40px}.achat-catalogue{flex-basis:auto}.achat-article-entete{gap:6px}.achat-catalogue summary{font-size:11px}} @container reglages (max-width:800px){.argent-fiche{grid-template-columns:1fr}.argent-section>header,.argent-montant,.argent-piece,.argent-section>footer{padding-inline:18px}.argent-details{padding-inline:18px}} @container reglages (max-width:850px){.bp-apercu-public{grid-template-columns:1fr;padding:20px;gap:20px}.bp-photo-entete{flex-wrap:wrap}} @container reglages (max-width:850px){.bp-editeur-grille{grid-template-columns:1fr}.bp-verification{display:block}.bp-listes-contenu{grid-template-columns:1fr}.bp-identite{grid-template-columns:1fr 1fr}.bp-identite label:first-child{grid-column:1/-1}.bp-saisie .formulaire{grid-template-columns:minmax(0,1fr)}.bp-tarifs{gap:10px}.bp-tarifs strong,.bp-tarifs a{font-size:17px}} @container reglages (max-width:560px){.bp-champs{padding:16px}.bp-sections{gap:14px;padding:0 16px;flex-wrap:wrap}.bp-sections a{font-size:11px;padding:14px 0}.bp-filtres label:first-child{flex-basis:100%;max-width:none}.bp-filtres .sub{width:100%;text-align:right}.bp-famille>summary{padding:16px;gap:10px}.bp-famille>summary .cf-fonction svg{width:20px;height:20px}.bp-famille>summary>.bf-identifiant{display:block}.bp-famille-corps{padding:0 16px 16px}.cf-plein .cf-plein-commandes .cta{font-size:10px;padding:6px;min-height:30px}.cf-plein .cf-plein-prix .cta{display:none}} @container reglages (max-width:600px){.bp-photo-ajout{width:100%;max-width:none;align-items:stretch;flex-direction:column}} @container reglages (max-width:1100px){.bp-photos-selection,.bp-photos-disponibles{grid-template-columns:repeat(2,minmax(0,1fr))}} @container reglages (max-width:600px){.bp-photos-selection,.bp-photos-disponibles{grid-template-columns:1fr}.bp-selection-entete{flex-direction:column;gap:6px}} @container reglages (max-width:600px){.bp-photos-selection{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-photos-selection .bp-photo{height:100px}.bp-photo-actions .cta{padding:5px 8px}.bp-photos-selection strong{font-size:12px}} @container reglages (max-width:600px){.bp-photos-disponibles{flex-direction:column;align-items:flex-start}} @container reglages (max-width:650px){.commande-type-champs{grid-template-columns:minmax(0,1fr)}.commande-type-panel{padding:20px}} @container reglages (max-width:650px){.tete-parcours{grid-template-columns:minmax(0,1fr);grid-template-areas:"g" "t" "d";gap:16px}.tete-parcours .tp-titre{font-size:26px}.tete-parcours .tp-d{justify-self:stretch}.tete-parcours .tp-d .cta{width:100%}} @container reglages (max-width:650px){.prog.prog-parcours{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px;padding:18px 8px}.prog-parcours .prog-e::after{display:none}} @container reglages (max-width:1000px){.commande-articles-table{overflow-x:auto}.commande-articles-table .tab-tete,.commande-articles-table .tab-l{min-width:900px;grid-template-rows:auto}.commande-articles-table .tab-tete>:nth-child(n),.commande-articles-table .tab-l>:nth-child(n){display:block;grid-column:auto;grid-row:auto}.commande-articles-table .tab-l>.l-ref,.commande-articles-table .tab-l>.tab-actions,.commande-articles-table .tab-l>.l-stock-alerte{display:flex}} @container reglages (max-width:650px){.commande-article-editeur{grid-template-columns:minmax(0,1fr);gap:16px}.commande-article-panel{padding:20px}.commande-article-panel .l-saisie{grid-template-columns:minmax(0,1fr)}.commande-article-enregistrer{flex-wrap:wrap}} @container reglages (max-width:650px){.commande-details-panel .formulaire.f-commande{grid-template-columns:minmax(0,1fr);padding:20px}.commande-details-panel>h2{padding:20px}.commande-details-panel .barre-bas{flex-wrap:wrap}.commande-creation-entete{align-items:start;flex-wrap:wrap;gap:16px}} @container reglages (max-width:760px){.commande-parcours-panels{grid-template-columns:minmax(0,1fr)}.commande-livraison-champs{grid-template-columns:minmax(0,1fr)}.commande-parcours-panel{padding:20px}} @container reglages (max-width:950px){.cmd-colonnes{grid-template-columns:minmax(0,1fr)}} @container reglages (max-width:720px){.commande-avoir-champs{grid-template-columns:1fr}} @container reglages (max-width:760px){.commande-validation-recap{grid-template-columns:minmax(80px,1fr) minmax(0,2fr)}.commande-validation-recap dd{margin:0}.commande-avoir-total{flex-wrap:wrap}} @container reglages (max-width:600px){.sc-export-choix{left:0;right:auto}} @container reglages (max-width:800px){.sc-filtres{flex-wrap:wrap}.sc-recherche{flex-basis:100%}.sc-total{align-items:start;flex-direction:column}.sc-total>strong{white-space:normal}} @container reglages (max-width:550px){.sc-dates{grid-template-columns:1fr 1fr}.sc-fonctions header{flex-wrap:wrap}.sc-facturation{flex-wrap:wrap}} @container reglages (max-width:750px){.sp-tarifs-recap{margin:0 16px 16px}.sp-verification{padding:0 16px 16px}} @container reglages (max-width:750px){.sp-paiement-grille{grid-template-columns:1fr;padding:16px}.sp-premier>strong{font-size:28px}.sp-donnees{padding:8px 16px}.sp-donnees>div{gap:12px}.sp-panel>header{flex-wrap:wrap}} @container reglages (max-width:750px){.sp-suivi-grille{grid-template-columns:1fr}} @container reglages (max-width:650px){.sp-document{width:100%}.sp-progress.prog{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}.sp-fields{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px}.sp-panel>header,.sp-offre,.sp-modules,.sp-paiement,.sp-document{padding:18px}.sp-resume{grid-template-columns:minmax(0,1fr);padding:18px;gap:18px}.sp-resume strong{font-size:20px}.sp-actions{flex-wrap:wrap}.sp-actions .cta{font-size:12px}.sp-tranches{margin:0 18px}.sp-fields .champ-ligne{flex-wrap:wrap}.sp-fields .champ-ligne select{flex-basis:100%;width:100%}} @container reglages (max-width:700px){.sp-offre-choix .sp-offre{flex-direction:column}.sp-fields{grid-template-columns:minmax(0,1fr)}.sp-tarif{grid-template-columns:1fr 1fr}.sp-conditions{margin:0 18px 18px}.sp-totaux{justify-content:flex-start;gap:14px}.sp-article>header{flex-wrap:wrap}.sp-tarif .sp-reference strong{font-size:14px}} @container reglages (max-width:650px){.commande-types{grid-template-columns:minmax(0,1fr);gap:16px}.commande-type-carte{padding:22px}} @container reglages (max-width:600px){.rapport-dialog{padding:18px!important}.rapport-dialog form>label{flex:1;min-width:120px}.rapport-dialog input{width:100%}.rapport-dialog .rapport-vide{padding:36px 14px}} @container reglages (max-width:760px){.sc-contrat-grille{grid-template-columns:minmax(0,1fr);gap:0}.sc-contrat-carte>header{align-items:start;flex-direction:column;gap:6px}.sc-contrat-donnees{padding:8px 16px}.sc-contrat-donnees>div{gap:12px}.sc-contrat>.cf-entete{align-items:start;gap:15px}} @container reglages (max-width:600px){.navigation-saisie{padding:20px}.navigation-saisie-actions{flex-direction:column}.navigation-saisie-actions .cta{width:100%;text-align:center;justify-content:center}.navigation-saisie-actions [data-rester]{margin-right:0}} @container reglages (max-width:750px){.achat-import-grille{grid-template-columns:minmax(0,1fr)}.achat-import-champs input{font-size:16px}.achat-import-base{flex-wrap:wrap}.achat-couts-total{gap:12px}.achat-couts-page .gestion-actions .btn,.achat-couts-page .gestion-actions .cta{white-space:normal}.achat-couts-page .achat-section>header{flex-wrap:wrap}.achat-couts-page .adv-entete{align-items:start}} @container reglages (max-width:500px){.achat-import-champs label{flex-direction:column;align-items:stretch;gap:8px}.achat-import-champs input{width:100%}} @container reglages (max-width:1180px){.prx-entete{display:none}.prx-ligne{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;padding:16px}.prx-composant,.prx-cle,.prx-console{grid-column:1/-1}.prx-cle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;border-radius:8px;background:var(--acl)}.prx-lib{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;font-size:11px;color:var(--t2);white-space:normal;margin-bottom:3px}.prx-cle .prx-lib{margin:0;font-size:12px}.prx-num{text-align:left;padding-top:0}.prx-tete{padding:14px 16px}.prx-reparti,.prx-details{padding-inline:16px}} @container reglages (max-width:560px){.prx-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-actions{margin-left:0}.prx-faits li{white-space:normal}.prx-palier{grid-template-columns:minmax(0,1fr) auto}.prx-palier-nom{grid-column:1/-1}.prx-palier-etat{grid-column:1}}