/* ===================================================================== BASE DE STYLE COMMUNE de la plateforme : toutes les pages la chargent (la réception y ajoute reception.css). Une refonte de l'apparence se fait ICI. PC pour tout, téléphone seulement pour l'inventaire (décision du 15/10/2026) ; aucune bibliothèque externe. Pages des employés : apparence des anciens outils Google (carte blanche de 420 px, gros champs, bouton vert). Pages d'administration : mêmes éléments, plus larges et sobres. ===================================================================== */ /* ---------- 1. Couleurs et mesures ---------- */ :root { --bleu: #2563eb; --bleu-fonce: #1d4ed8; --vert: #16a34a; --vert-fonce: #15803d; --rouge: #dc2626; --rouge-fonce: #991b1b; --orange-fond: #fffbeb; --orange-texte: #92400e; --orange-bord: #fde68a; --texte: #111; --texte-doux: #555; --gris: #6b7280; --bord: #e2e2e2; --bord-champ: #ddd; --fond: #f5f5f7; --blanc: #fff; --rayon: 16px; --rayon-champ: 10px; --rayon-bouton: 12px; /* ===== COULEURS DES MAGASINS : le SEUL endroit du code où elles sont écrites (19/10/2026) ===== Toutes les pages (employés, connexion, portail, administration) les lisent ici ; ailleurs, seulement var(--…). plein : points, puces, barres, traits, bordures (jamais un petit texte) -texte texte et liens sur fond clair (« Ouvrir » des cartes de l'Accueil) -fonce fond plein sous un petit texte blanc (pastilles, tuiles) -bouton bouton d'action à texte blanc (choix du magasin) et son ombre -bouton-ombre -halo reflet clair en haut à droite des cartes de l'Accueil -pale fond très clair (case cochée, contour de focus) -bande bandeau des pages des employés -dA/dM/dB dégradé (début, milieu, fin) : connexion, choix du magasin, cartes et boutons de l'Accueil -ombre ombre des éléments en dégradé ; -clair : petit libellé sur le voile ; -point : point de l'en-tête -voile panneau sombre translucide sous un petit texte blanc posé sur le dégradé (absent : valeurs d'origine) -p-… portail des employés (fond de page, textes, ombres, halo, icônes, lien « Ouvrir ») -trait trait de couleur du panneau de la connexion ; -choix et -choix-ombre : bouton « Dans quel magasin… » (20/10/2026) LOVE SHOP : rose de son logo (19/10/2026, remplace l'ancien orange). PINK ATTITUDES et L'AUTRE IMAGE : inchangés. */ --LOVESHOP: #F9429E; --LOVESHOP-texte: #BE185D; --LOVESHOP-pale: #FFE4F1; --LOVESHOP-fonce: #C21F70; --LOVESHOP-bouton: linear-gradient(120deg, #C21F70, #E8338E); --LOVESHOP-bouton-ombre: rgba(194, 31, 112, 0.28); --LOVESHOP-halo: rgba(255, 255, 255, 0.10); --LOVESHOP-dA: #F9429E; --LOVESHOP-dM: #FA52A6; --LOVESHOP-dB: #FF9ACB; --LOVESHOP-ombre: rgba(249, 66, 158, 0.22); --LOVESHOP-clair: #FFFFFF; --LOVESHOP-bande: linear-gradient(120deg, #F9429E 0%, #FA52A6 55%, #FF9ACB 100%); --LOVESHOP-voile: rgba(0, 0, 0, 0.38); --LOVESHOP-point: linear-gradient(135deg, #E8338E, #F9429E); --LOVESHOP-p-fond: #FDF6FA; --LOVESHOP-p-texte: #24121C; --LOVESHOP-p-doux: #5E4555; --LOVESHOP-p-ombre: rgba(249, 66, 158, 0.22); --LOVESHOP-p-ombre-v: rgba(249, 66, 158, 0.18); --LOVESHOP-p-halo: rgba(255, 255, 255, 0.30); --LOVESHOP-p-clair: #FFFFFF; --LOVESHOP-p-lien: #BE185D; --LOVESHOP-p-icone: linear-gradient(135deg, #E8338E, #F9429E); --PINKATTITUDES: #d6249f; --PINKATTITUDES-texte: #831843; --PINKATTITUDES-pale: #fbe3f3; --PINKATTITUDES-fonce: #d6249f; --PINKATTITUDES-bande: #d6249f; --PINKATTITUDES-dA: #831843; --PINKATTITUDES-dM: #D6249F; --PINKATTITUDES-dB: #7C3AED; --PINKATTITUDES-ombre: rgba(131, 24, 67, 0.22); --PINKATTITUDES-clair: #FCE7F3; --PINKATTITUDES-point: linear-gradient(135deg, #831843, #7C3AED); --PINKATTITUDES-p-fond: #FBF6FA; --PINKATTITUDES-p-texte: #1F1119; --PINKATTITUDES-p-doux: #5A4452; --PINKATTITUDES-p-ombre: rgba(131, 24, 67, 0.18); --PINKATTITUDES-p-ombre-v: rgba(131, 24, 67, 0.16); --PINKATTITUDES-p-halo: rgba(255, 170, 230, 0.30); --PINKATTITUDES-p-clair: #F9A8D4; --PINKATTITUDES-p-lien: #D6249F; --PINKATTITUDES-p-icone: linear-gradient(135deg, #D6249F, #7C3AED); --LAUTREIMAGE: #0369a1; --LAUTREIMAGE-texte: #0C4A6E; --LAUTREIMAGE-pale: #e0f2fe; --LAUTREIMAGE-fonce: #0369a1; --LAUTREIMAGE-bande: #0369a1; --LAUTREIMAGE-dA: #0C4A6E; --LAUTREIMAGE-dM: #0369A1; --LAUTREIMAGE-dB: #0E7490; --LAUTREIMAGE-ombre: rgba(12, 74, 110, 0.22); --LAUTREIMAGE-clair: #E0F2FE; --LAUTREIMAGE-point: linear-gradient(135deg, #0C4A6E, #0E7490); --LAUTREIMAGE-p-fond: #F4F8FB; --LAUTREIMAGE-p-texte: #0F1B24; --LAUTREIMAGE-p-doux: #3F5361; --LAUTREIMAGE-p-ombre: rgba(12, 74, 110, 0.18); --LAUTREIMAGE-p-ombre-v: rgba(12, 74, 110, 0.16); --LAUTREIMAGE-p-halo: rgba(110, 231, 240, 0.30); --LAUTREIMAGE-p-clair: #7DD3FC; --LAUTREIMAGE-p-lien: #0369A1; --LAUTREIMAGE-p-icone: linear-gradient(135deg, #0369A1, #0E7490); --LOVESHOP-trait: linear-gradient(90deg, #F9429E, #FF9ACB); --LOVESHOP-choix: linear-gradient(120deg, #F9429E 0%, #FA52A6 55%, #FF9ACB 100%); --LOVESHOP-choix-ombre: rgba(249, 66, 158, 0.28); --PINKATTITUDES-trait: linear-gradient(90deg, #D6249F, #7C3AED); --PINKATTITUDES-choix: linear-gradient(120deg, #831843 0%, #D6249F 55%, #7C3AED 100%); --PINKATTITUDES-choix-ombre: rgba(131, 24, 67, 0.25); --LAUTREIMAGE-trait: linear-gradient(90deg, #0369A1, #38BDF8); --LAUTREIMAGE-choix: linear-gradient(120deg, #0C4A6E 0%, #0369A1 55%, #0E7490 100%); --LAUTREIMAGE-choix-ombre: rgba(12, 74, 110, 0.25); --TOUS: #374151; --TOUS-pale: #f3f4f6; } /* ---------- 2. Page ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--fond); color: var(--texte); font-size: 18px; overflow-wrap: break-word; } thead th { white-space: nowrap; } .carte { background: var(--blanc); max-width: 720px; margin: 16px auto; padding: 22px 16px 28px; border-radius: var(--rayon); border: 1px solid var(--bord); } .carte.etroite { max-width: 420px; padding: 28px 20px; } /* outils des employés (comme les anciens outils Google) */ .carte.large { max-width: 1280px; } /* tableaux de l'administration */ @media (max-width: 460px) { .carte, .carte.etroite { margin: 0; border-radius: 0; border-left: 0; border-right: 0; min-height: 100vh; } } .entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; margin: -6px 0 6px; } .accueil { color: var(--bleu); text-decoration: none; font-size: 15px; padding: 8px 0; } .deconnexion { margin-left: auto; } h1 { font-size: 22px; text-align: center; margin: 0 0 16px; color: #333; } h2 { font-size: 18px; margin: 22px 0 10px; } h2.erreur { color: var(--rouge); } h2.attention { color: var(--orange-texte); } a { color: var(--bleu); } .rouge { color: var(--rouge); } .vert { color: var(--vert-fonce); } .petit-texte { font-size: 13px; color: var(--texte-doux); word-break: break-word; } /* ---------- 3. Magasin (en haut de chaque page) ---------- */ .magasin { font-size: 26px; font-weight: 700; text-align: center; margin: 8px 0 6px; } .bandeau-magasin { color: #fff; border-radius: var(--rayon-bouton); padding: 12px; font-size: 30px; letter-spacing: 1px; border: none; } .bandeau-LOVESHOP { background: var(--LOVESHOP-fonce); } .bandeau-PINKATTITUDES { background: var(--PINKATTITUDES-fonce); } .bandeau-LAUTREIMAGE { background: var(--LAUTREIMAGE-fonce); } .bandeau-TOUS { background: var(--TOUS); } .choix-magasins { display: grid; gap: 16px; } .choix-magasins button { width: 100%; font-weight: 700; padding: 26px 12px; cursor: pointer; } /* ---------- 4. Messages ---------- */ .message { padding: 12px 14px; border-radius: var(--rayon-champ); font-weight: 700; margin: 0 0 14px; } .message.ok { background: #ecfdf5; color: #065f46; } .message.erreur { background: #fef2f2; color: var(--rouge-fonce); } .message.attention { background: var(--orange-fond); color: var(--orange-texte); } .avertissement { background: var(--orange-fond); color: var(--orange-texte); border: 1px solid var(--orange-bord); padding: 10px; border-radius: var(--rayon-champ); font-size: 15px; } .alertes { margin-bottom: 16px; } .alertes a { color: inherit; display: block; } /* ---------- 5. Champs ---------- */ .formulaire { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #666; } label.case { flex-direction: row; align-items: center; gap: 10px; font-size: 16px; color: var(--texte); min-height: 44px; } input, select { font-size: 22px; padding: 12px; border: 2px solid var(--bord-champ); border-radius: var(--rayon-champ); width: 100%; background: var(--blanc); color: var(--texte); } input:focus, select:focus { border-color: var(--bleu); outline: none; } input:disabled { background: #f3f3f3; } label.case input { width: 24px; height: 24px; flex: none; } input.court { width: 110px; font-size: 16px; padding: 6px; } fieldset { border: 1px solid var(--bord-champ); border-radius: var(--rayon-champ); margin: 0; padding: 8px 14px; } legend { font-size: 14px; color: #666; padding: 0 4px; } .magasins-compte { display: flex; flex-wrap: wrap; gap: 0 18px; } /* ---------- 6. Boutons et liens d'action ---------- */ button { font-size: 18px; font-weight: 700; padding: 14px; border-radius: var(--rayon-bouton); border: 2px solid #ccc; background: var(--blanc); color: var(--texte); cursor: pointer; min-height: 48px; -webkit-tap-highlight-color: transparent; } button.principal { background: var(--vert); border-color: var(--vert); color: #fff; } button.principal:active { background: var(--vert-fonce); } button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; } button.bleu { background: var(--bleu); border-color: var(--bleu); color: #fff; } button.petit { font-size: 14px; padding: 6px 10px; border-radius: 8px; min-height: 36px; } button.lien { background: none; border: none; color: var(--gris); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 0; min-height: 0; font-weight: 400; } .formulaire button { width: 100%; } /* texte cliquable (ex. « Changer le prix ») : grande zone à toucher */ .lien-action { display: inline-block; padding: 12px 4px; font-size: 18px; font-weight: 700; color: var(--bleu); text-decoration: underline; } .boutons-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .boutons-ligne > * { flex: 1 1 140px; } .en-ligne { display: inline-flex; gap: 6px; margin-left: 8px; } .tuiles { display: grid; gap: 12px; } .tuile { display: block; padding: 22px; border-radius: 14px; background: var(--vert); color: #fff; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none; } .tuile.secondaire { background: var(--blanc); color: var(--bleu); border: 2px solid var(--bleu); } .tuile.bleue { background: var(--bleu); } .choix a { margin-right: 8px; color: var(--bleu); display: inline-block; padding: 8px 0; } .choix a.choisi { font-weight: 700; text-decoration: none; color: var(--texte); } /* ---------- 7. Fenêtres (dessinées dans la page, jamais alert/confirm) ---------- */ dialog, .fenetre-boite { border: none; border-radius: var(--rayon); padding: 24px; max-width: 380px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); background: var(--blanc); } dialog::backdrop { background: rgba(0, 0, 0, .5); } dialog p { font-size: 18px; margin: 0 0 20px; } dialog .boutons, .fenetre-boite .boutons { display: flex; gap: 10px; } dialog .boutons button, .fenetre-boite .boutons > * { flex: 1; } /* fenêtre affichée par le serveur (sans script) : voile sur toute la page */ .voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; overflow-y: auto; } .fenetre-titre { font-size: 20px; font-weight: 700; margin: 0 0 12px; } .fenetre-titre.danger { color: var(--rouge); } .fenetre-texte { font-size: 16px; color: #333; line-height: 1.5; margin: 0 0 16px; } .fenetre-boite .formulaire { margin-bottom: 0; } a.bouton { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 700; padding: 12px; border-radius: var(--rayon-bouton); border: 2px solid #ccc; color: var(--texte); text-decoration: none; min-height: 48px; } /* ---------- 8. Article (fiche) ---------- */ .article { border-top: 1px solid #eee; padding-top: 12px; margin-top: 8px; } .designation { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .prix-actuel { font-size: 40px; font-weight: 700; text-align: center; margin: 8px 0 12px; } dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; color: #444; margin: 0 0 12px; } dt { color: var(--gris); } dd { margin: 0; } .resultats { list-style: none; padding: 0; margin: 0; } .resultats li a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 6px; border-bottom: 1px solid #eee; color: var(--texte); text-decoration: none; } .cle { font-family: monospace; font-size: 20px; letter-spacing: 1px; background: #f3f4f6; padding: 10px; border-radius: 8px; word-break: break-all; } .cle-agent { width: 100%; font-family: monospace; font-size: 0.95rem; } .offre { position: relative; min-height: 120px; margin-bottom: 12px; } .offre .photo { float: right; width: 110px; height: 110px; object-fit: contain; border: 1px solid #eee; border-radius: 10px; margin: 0 0 8px 10px; background: var(--blanc); } .offre.arrete { opacity: .6; } /* ---------- 9. Tableaux ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eee; vertical-align: top; } th { color: var(--texte-doux); font-weight: 700; } tr.inactif td { color: #aaa; } td form { display: inline-flex; gap: 4px; margin: 2px 0; flex-wrap: wrap; } td form input { font-size: 14px; padding: 6px; width: 170px; } table.totaux td, table.totaux th { font-size: 16px; } table.totaux td { text-align: right; } .tableau-large { overflow-x: auto; } .tableau-articles th a { color: var(--texte); text-decoration: none; white-space: nowrap; } .tableau-articles td.nombre { text-align: right; white-space: nowrap; } .pagination { display: flex; gap: 16px; justify-content: center; } .filtres { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; } .filtres label { min-width: 150px; } .filtres input:not([type=checkbox]), .filtres select { font-size: 16px; padding: 8px; } .filtres button { padding: 10px 16px; font-size: 16px; } /* tableau « en cartes » sur téléphone : chaque ligne devient une carte (aucun défilement horizontal) */ @media (max-width: 760px) { table.cartes thead { display: none; } table.cartes, table.cartes tbody, table.cartes tr, table.cartes td { display: block; width: 100%; } table.cartes tr { border: 1px solid var(--bord); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; } table.cartes td { border: none; padding: 4px 0; font-size: 15px; } table.cartes td[data-titre]::before { content: attr(data-titre) " : "; color: var(--gris); } table.cartes td form input { width: 100%; } } .compte-magasins { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .compte-magasins select { font-size: 14px; padding: 6px; width: auto; } .compte-magasins label.case { font-size: 14px; min-height: 36px; } .compte-magasins label.case input { width: 20px; height: 20px; } /* ---------- 9 bis. Étiquettes 54 x 17 mm (aperçu agrandi : 1 mm = 5,6 px) ---------- */ .file-etiquettes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .file-etiquettes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-bottom: 1px solid #eee; padding-bottom: 12px; } .file-info { display: flex; flex-direction: column; gap: 2px; font-size: 15px; min-width: 0; } .file-info span { color: var(--gris); font-size: 13px; } .etiquette { width: 302px; height: 95px; flex: none; background: #fff; border: 1px dashed #bbb; border-radius: 4px; padding: 5px 8px; display: flex; align-items: center; gap: 8px; overflow: hidden; color: #111; } .etiquette .gauche { flex: 0 0 60%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .etiquette .chiffres { font-size: 12px; line-height: 1; margin-bottom: 3px; white-space: nowrap; } .etiquette svg { width: 100%; height: 45px; display: block; fill: #000; } .etiquette .mois { font-size: 10px; line-height: 1; margin-top: 3px; white-space: nowrap; } .etiquette .droite { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; } .etiquette .prix { font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; } .etiquette.attention { flex-direction: column; justify-content: center; gap: 1px; text-align: center; border: 2px solid #111; } .etiquette.attention .att-titre { font-weight: 700; font-size: 17px; letter-spacing: 1px; } .etiquette.attention .att-ligne { font-size: 12px; font-weight: 700; } .etiquette.attention .att-nom { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---------- 10. Portail des employés (repris de l'ancien portail Google) ---------- */ .portail-liste, .portail-videos { display: grid; gap: 18px; } .portail-videos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .portail-suite { text-align: center; font-size: 22px; font-weight: 600; color: #444; margin: 40px 0 20px; } .app { display: flex; align-items: center; gap: 18px; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; text-decoration: none; color: var(--texte); } .app:hover, .video:hover { border-color: var(--vert); } .app.off { opacity: .5; } .app .icone, .video .icone { font-size: 38px; width: 72px; height: 72px; border-radius: var(--rayon); background: #f0fdf4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app .titre { font-size: 19px; font-weight: 700; } .app .desc { font-size: 14px; color: #777; margin-top: 4px; } .video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px 12px; text-decoration: none; color: var(--texte); text-align: center; } .video .titre { font-size: 16px; font-weight: 700; } /* ---------- 10 bis. Lots et caisse : MODE ESSAI / EN SERVICE, compte rendu ---------- */ .mode { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; vertical-align: middle; } .mode.essai { background: var(--orange-fond); color: var(--orange-texte); border: 1px solid var(--orange-bord); } .mode.en-service { background: var(--vert); color: #fff; } .mode.prix { background: #eff6ff; color: var(--bleu-fonce); border: 1px solid #bfdbfe; } pre.rapport { white-space: pre-wrap; font-size: 12px; background: #f3f4f6; padding: 8px; border-radius: 8px; max-height: 400px; overflow: auto; } .modes-magasins { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 15px; margin: 0 0 14px; } .modes-magasins a { color: var(--texte); font-weight: 700; text-decoration: none; } details.mise-en-service { margin-top: 12px; } details.mise-en-service summary { cursor: pointer; font-weight: 700; color: var(--rouge-fonce); padding: 8px 0; } /* ---------- 11. Portail de l'administrateur ---------- */ .section-portail { margin: 0 0 18px; } .section-portail h2 { font-size: 1.05rem; margin: 0 0 8px; } .compteur { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 99px; background: var(--rouge); color: #fff; font-size: 14px; text-align: center; margin-left: 6px; } /* Étape (c) : aperçu = image exacte envoyée à la Brother (zone imprimable 48 x 14 mm de l'étiquette 54 x 17 mm) */ .apercu-etiquette { width: 283px; height: auto; max-width: 100%; box-sizing: content-box; padding: 6px 13px; background: #fff; border: 1px dashed #bbb; border-radius: 4px; image-rendering: pixelated; } .etat-impression { font-weight: 700; } .etat-impression.en_cours { color: var(--orange-texte); } .etat-impression.a_verifier { color: #b91c1c; } .file-etiquettes li.a-verifier { background: #fef2f2; border-radius: 8px; padding: 8px; } /* Bandeau de l'environnement d'essai (absent en « prod ») */ .essai-env { background: #fef3c7; color: #92400e; text-align: center; font-weight: 700; font-size: 13px; letter-spacing: 1px; padding: 4px 8px; border-bottom: 1px solid #fde68a; } /* Commandes fournisseurs */ .tuile-magasin { color: #fff; font-size: 22px; font-weight: 700; justify-content: center; } .options-commande { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; } .options-commande label { flex: 0 1 auto; } form.commande tr.rupture td { background: #fff7ed; } form.commande tr.decoche { opacity: 0.55; } .dispo-rupture { color: #b91c1c; font-weight: 700; } .dispo-bas { color: var(--orange-texte); font-weight: 700; } .dispo-ok { color: #15803d; } .total-commande { font-size: 20px; margin: 14px 0 8px; } .liste-saisie { list-style: none; padding: 0; display: grid; gap: 8px; } .liste-saisie li { font-size: 17px; border-bottom: 1px solid #eee; padding: 6px 0; } .apercu-fichier { background: #f3f4f6; padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; } tr.annulee td { text-decoration: line-through; color: var(--gris); } .cache { display: none; } .formulaire.options-commande { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; } .options-commande label { display: flex; flex-direction: column; width: auto; min-width: 120px; margin: 0; } .options-commande button { width: auto; } /* Statistiques : ventes par jour */ .barres { display: grid; gap: 3px; margin: 8px 0 18px; } .barre-ligne { display: grid; grid-template-columns: 48px 1fr 92px; align-items: center; gap: 8px; font-size: 13px; } .barre { background: #f3f4f6; border-radius: 4px; height: 14px; overflow: hidden; } .barre-plein { display: block; height: 100%; width: 0; background: #16a34a; border-radius: 4px; } .barre-valeur { text-align: right; color: var(--gris); } /* Ingrédients FR/NL */ .formulaire textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px; border: 2px solid var(--bord); border-radius: 10px; } .apercu-ingredients { border: 1px dashed #bbb; border-radius: 8px; padding: 10px 14px; font-size: 13px; background: #fff; } .statut-valide { color: #15803d; font-weight: 700; } .statut-brouillon { color: var(--orange-texte); font-weight: 700; } .statut-a_traduire { color: #b91c1c; font-weight: 700; } /* Base commune, téléphone : un tableau simple défile dans son cadre, jamais la page ; les longs textes vont à la ligne */ @media (max-width: 600px) { main table:not(.cartes):not(.totaux) { display: block; overflow-x: auto; max-width: 100%; } main td, main th { overflow-wrap: anywhere; } table.totaux { width: 100%; } } /* ===================================================================== REFONTE DE L'APPARENCE (15/10/2026, décisions du propriétaire) PC pour tout ; téléphone seulement pour l'inventaire. Police DM Sans auto-hébergée (licence OFL, src/public/polices). Couleur par magasin, nom TOUJOURS écrit à côté d'un point (la couleur ne porte jamais seule l'information). Contraste du texte >= 4,5:1, zones à cliquer >= 44 px, aucun défilement horizontal, icônes SVG (pas d'emoji). ===================================================================== */ /* DM Sans : « latin » + « latin étendu » (turc ş ğ İ…, polonais, tchèque…), chargé seulement si la page en contient (16/10/2026) */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/polices/dm-sans-400-ext.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/polices/dm-sans-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/polices/dm-sans-500-ext.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/polices/dm-sans-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/polices/dm-sans-700-ext.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/polices/dm-sans-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/polices/dm-sans-800-ext.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/polices/dm-sans-800.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --vert: #15803d; --vert-fonce: #166534; --gris: #4b5563; --texte-doux: #4b5563; --menu: #12203a; --ambre-fond: #fef3c7; --ambre-bord: #f59e0b; --ambre-texte: #78350f; } body { font-size: 17px; } /* couleurs du magasin de l'élément (valeurs : début du fichier) ; --bande-voile : seulement LOVE SHOP (petit texte blanc sur son dégradé) */ .couleur-LOVESHOP, .bandeau-LOVESHOP { --couleur: var(--LOVESHOP); --pale: var(--LOVESHOP-pale); --fonce: var(--LOVESHOP-fonce); --bande: var(--LOVESHOP-bande); --bande-voile: var(--LOVESHOP-voile); --texte-magasin: var(--LOVESHOP-texte); --bouton: var(--LOVESHOP-bouton); } .couleur-PINKATTITUDES, .bandeau-PINKATTITUDES { --couleur: var(--PINKATTITUDES); --pale: var(--PINKATTITUDES-pale); --fonce: var(--PINKATTITUDES-fonce); --bande: var(--PINKATTITUDES-bande); --texte-magasin: var(--PINKATTITUDES-texte); } .couleur-LAUTREIMAGE, .bandeau-LAUTREIMAGE { --couleur: var(--LAUTREIMAGE); --pale: var(--LAUTREIMAGE-pale); --fonce: var(--LAUTREIMAGE-fonce); --bande: var(--LAUTREIMAGE-bande); --texte-magasin: var(--LAUTREIMAGE-texte); } .couleur-TOUS, .bandeau-TOUS { --couleur: var(--TOUS); --pale: var(--TOUS-pale); --fonce: var(--TOUS); --bande: var(--TOUS); } .icone-svg { flex: none; display: inline-block; vertical-align: middle; } button, .bouton, a.tuile, input[type=submit] { min-height: 44px; } button.principal, .principal { background: var(--vert); border-color: var(--vert); } /* ---------- Mise en page : menu latéral de l'administrateur, zone de contenu ---------- */ .mise-en-page { display: flex; min-height: 100vh; } .zone { flex: 1; min-width: 0; } .menu-admin { flex: 0 0 236px; background: var(--menu); color: #fff; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; align-self: flex-start; min-height: 100vh; } .menu-titre { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #cbd5e1; padding: 6px 12px 16px; } .menu-admin a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: #e5e7eb; text-decoration: none; font-weight: 500; font-size: 16px; } .menu-admin a:hover, .menu-admin a:focus-visible { background: rgba(255, 255, 255, 0.10); color: #fff; } .menu-admin a[aria-current="page"] { background: #fff; color: var(--menu); font-weight: 700; } @media (max-width: 900px) { .mise-en-page { flex-direction: column; } .menu-admin { position: static; min-height: 0; flex: none; flex-direction: row; flex-wrap: wrap; padding: 8px; } .menu-titre { display: none; } } /* ---------- Bande du haut : couleur du magasin (employés, aperçus) ou neutre (administration) ---------- */ .bande { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 24px; min-height: 64px; } .bande > :last-child { justify-self: end; } .bande[class*="bandeau-"] { background: var(--bande, var(--couleur)); color: #fff; border-radius: 0; } .bande-neutre { background: #fff; border-bottom: 1px solid var(--bord); } .bande .accueil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-size: 16px; font-weight: 700; text-decoration: none; color: var(--bleu-fonce); } .bande[class*="bandeau-"] .accueil { color: #fff; } .bande .deconnexion { margin: 0; } .bande .deconnexion button.lien, .portail-haut .deconnexion button.lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--texte-doux); padding: 0 12px; } .contour-blanc button.lien { color: #fff !important; border: 2px solid #fff !important; border-radius: 10px; background: var(--bande-voile, transparent); } /* nom du magasin : majuscules espacées, à côté d'un point */ .magasin { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; font-size: 20px; margin: 0; color: var(--texte); } .magasin::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--couleur, var(--TOUS)); } .bandeau-magasin { background: transparent; color: #fff; border-radius: 0; padding: 0; font-size: 20px; letter-spacing: 0.12em; } .bandeau-magasin::before { background: var(--pale); box-shadow: 0 0 0 2px #fff; } .carte .magasin.bandeau-magasin, .card .magasin.bandeau-magasin { color: var(--texte); } .carte .magasin.bandeau-magasin::before, .card .magasin.bandeau-magasin::before { background: var(--couleur); box-shadow: none; } /* ---------- Contenu ---------- */ .carte { max-width: 1040px; margin: 24px auto; padding: 24px 28px 32px; border-radius: 18px; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05); } .carte.etroite { max-width: 560px; padding: 28px; } .carte.large { max-width: 1280px; } h1 { font-size: 26px; font-weight: 800; color: var(--texte); text-align: left; } @media (max-width: 460px) { .carte, .carte.etroite { margin: 0; border-radius: 0; } .bande { padding: 8px 12px; grid-template-columns: auto 1fr auto; } .bande .deconnexion span { display: none; } } /* ---------- Portail des employés (direction C) ---------- */ .portail-bande { background: var(--bande, var(--couleur)); color: #fff; border-radius: 0 0 36px 36px; padding: 18px 32px 128px; } .portail-haut { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .portail-haut .magasin { font-size: 24px; font-weight: 800; color: #fff; } .portail-haut .accueil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none; } .portail-bande h1 { max-width: 1040px; margin: 36px auto 0; color: #fff; font-size: 46px; font-weight: 800; text-align: left; line-height: 1.1; } .portail-contenu { max-width: 1040px; margin: -84px auto 48px; padding: 0 24px; position: relative; } .portail-contenu .portail-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .portail-contenu .app { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 24px; padding: 30px; min-height: 180px; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12); color: var(--texte); text-decoration: none; border: 0; } .portail-contenu .app:hover, .portail-contenu .app:focus-visible { box-shadow: 0 14px 36px rgba(17, 24, 39, 0.18); outline: 3px solid var(--couleur); outline-offset: 2px; } .portail-contenu .app .icone { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 22px; background: var(--couleur); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0; } .portail-contenu .app .titre { font-size: 22px; font-weight: 800; line-height: 1.25; } .portail-contenu .app .desc { font-size: 16px; color: #4b5563; margin-top: 6px; } .portail-contenu .app.off { opacity: 1; background: #f9fafb; } .portail-contenu .portail-suite { font-size: 18px; font-weight: 700; margin: 40px 0 14px; text-align: left; } .portail-contenu .portail-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .portail-contenu .video { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: #fff; border-radius: 14px; border: 1px solid var(--bord); color: var(--texte); text-decoration: none; font-weight: 500; } .portail-contenu .video .icone { color: var(--couleur); display: flex; font-size: 0; } .portail-contenu .video:hover { border-color: var(--couleur); } .portail-contenu .tuiles .tuile { background: #fff; } @media (max-width: 760px) { .portail-contenu .portail-liste { grid-template-columns: 1fr; } .portail-bande { padding: 14px 18px 110px; border-radius: 0 0 28px 28px; } .portail-bande h1 { font-size: 34px; margin-top: 24px; } .portail-contenu { padding: 0 14px; } } /* ---------- Portail de l'administrateur ---------- */ .alertes-admin { background: var(--ambre-fond); border: 1px solid var(--ambre-bord); border-radius: 14px; padding: 6px 16px; margin: 0 0 20px; } .alertes-admin a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ambre-texte); font-weight: 700; text-decoration: none; } .alertes-admin a:hover { text-decoration: underline; } .cartes-magasins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 24px; } .carte-magasin { background: #fff; border: 1px solid var(--bord); border-top: 6px solid var(--couleur); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; color: var(--texte); text-decoration: none; } .carte-magasin .magasin { justify-content: flex-start; font-size: 17px; } .carte-magasin dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; } .carte-magasin dt { color: var(--texte-doux); } .carte-magasin dd { margin: 0; font-weight: 700; } .etat-ok { color: #166534; } .etat-ko { color: #b91c1c; } .etat-neutre { color: var(--texte-doux); } .section-portail { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 4px 20px 20px; margin: 0 0 18px; } .section-portail h2 { display: flex; align-items: center; gap: 10px; } @media (max-width: 900px) { .cartes-magasins { grid-template-columns: 1fr; } } /* portail : vidéos en cartes basses (64 px), icône de lecture à la couleur du magasin */ .portail-contenu .portail-videos .video { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 64px; height: auto; } .portail-contenu .portail-videos .video .icone { background: none; width: auto; height: auto; padding: 0; margin: 0; border-radius: 0; flex: none; } .portail-contenu .portail-videos .video .titre { font-size: 16px; font-weight: 500; } /* administration : liens des sections en grille de cartes sobres */ .section-portail .tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .section-portail .tuile, .section-portail .tuile.secondaire { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; margin: 0; padding: 10px 16px; background: #fff; color: var(--texte); border: 1px solid var(--bord); border-radius: 12px; font-size: 16px; font-weight: 700; text-align: left; text-decoration: none; box-shadow: none; } .section-portail .tuile.secondaire { font-weight: 500; color: #374151; background: #f9fafb; } .section-portail .tuile:hover { border-color: var(--menu); background: #f1f5f9; } .section-portail h2 { font-size: 18px; font-weight: 800; margin: 14px 0 12px; } input, button, select, textarea { font-family: inherit; } /* ===================================================================== Pages restantes (15/10/2026) : formulaires, tableaux, sections, choix — même base, sur PC. Contrastes mesurés par l'outil des captures (tests/captures/captures.ts, RAPPORT-CONTRASTES.md). ===================================================================== */ .bande-neutre .magasin.bandeau-TOUS { background: transparent; color: var(--texte); } .carte label { color: #374151; font-weight: 500; } .carte input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .carte select, .carte textarea { font: inherit; font-size: 17px; min-height: 48px; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 10px; background: #fff; color: var(--texte); } .carte input:focus-visible, .carte select:focus-visible, .carte textarea:focus-visible, .carte button:focus-visible, .carte a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } .carte input::placeholder, .carte textarea::placeholder { color: #6b7280; } .carte button.petit, .carte a.bouton.petit { width: auto; padding: 8px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; } .carte .formulaire > button.petit { justify-self: start; align-self: start; } .carte a { color: #1d4ed8; } /* sections d'une page (fournisseurs, magasins, articles) : cartes */ .carte section.article { border: 1px solid var(--bord); border-radius: 14px; padding: 16px 20px; margin: 16px 0; background: #fff; } .carte section.article .designation { font-size: 20px; font-weight: 800; } /* tableaux */ .carte table { border-collapse: collapse; width: 100%; font-size: 15px; } .carte thead th { background: #f8fafc; color: #374151; font-size: 14px; font-weight: 700; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); } .carte tbody td, .carte tbody th { padding: 10px 12px; border-bottom: 1px solid #eef0f3; vertical-align: top; text-align: left; } .carte tbody tr:hover td { background: #fafafa; } .carte table.totaux th { color: #374151; font-weight: 500; } .carte table.totaux td { font-weight: 700; } @media (max-width: 1200px) { main.carte table:not(.cartes):not(.totaux) { display: block; overflow-x: auto; max-width: 100%; } } /* choix (magasins, filtres) en pastilles */ .choix { display: flex; flex-wrap: wrap; gap: 8px; } .choix a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #1f2937; text-decoration: none; font-weight: 500; } .choix a.choisi { background: var(--menu); border-color: var(--menu); color: #fff; font-weight: 700; } /* commandes : lignes décochées sans transparence (contraste gardé) */ form.commande tr.decoche { opacity: 1; } form.commande tr.decoche td { color: #4b5563; background: #f9fafb; } form.commande tr.rupture td { background: #fff7ed; color: #1f2937; } form.commande tr .petit-texte { color: #4b5563; } form.commande input.quantite { color: var(--texte); } /* connexion, choix du magasin, double vérification */ .carte.etroite .formulaire { gap: 14px; } .choix-magasins button { min-height: 72px; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 14px; } .carte button.petit, .carte a.bouton.petit { min-height: 44px; } @media (min-width: 601px) and (max-width: 1200px) { main.carte table.cartes { display: block; overflow-x: auto; max-width: 100%; } } .carte a.tuile-magasin { background: var(--fonce, var(--couleur)); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; letter-spacing: 0.12em; text-transform: uppercase; } .carte a.tuile-magasin::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--pale); box-shadow: 0 0 0 2px #fff; } .carte a.tuile:not(.tuile-magasin) { color: inherit; } .choix-magasins button.bandeau-magasin { background: var(--bouton, var(--fonce, var(--couleur))); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; border: none; padding: 20px 16px; } .magasin:empty { visibility: hidden; } .choix-magasins button.bandeau-magasin::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pale); box-shadow: 0 0 0 2px #fff; } /* ===================================================================== ADMINISTRATION (16/10/2026) : un seul modèle de page — menu latéral sombre, barre « Aller à… », fil d'Ariane, titre, description d'une ligne, onglets, contenu. Pages des employés inchangées (tout est sous body.admin). ===================================================================== */ body.admin { background: #eef1f5; } body.admin .menu-admin { flex-basis: 240px; height: 100vh; overflow-y: auto; } body.admin .menu-admin a.menu-titre { display: block; min-height: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #cbd5e1; padding: 6px 12px 16px; } body.admin .menu-admin a.menu-titre:hover { background: none; color: #fff; } body.admin .menu-bas { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); } body.admin .menu-deconnexion { margin: 0; } body.admin .menu-deconnexion button.lien { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: #cbd5e1; font-size: 15px; font-weight: 500; text-decoration: none; text-align: left; } body.admin .menu-deconnexion button.lien:hover { color: #fff; } /* barre du haut : « Aller à… » */ .barre-admin { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--bord); padding: 10px 32px; } .barre-admin .aller { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0; position: relative; } .barre-admin .aller-icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #4b5563; display: flex; } .barre-admin .aller input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px 8px 38px; font: inherit; font-size: 16px; border: 2px solid #d1d5db; border-radius: 10px; background: #f8fafc; color: var(--texte); } .barre-admin .aller input:focus-visible { outline: 3px solid #93c5fd; outline-offset: 1px; background: #fff; } .barre-admin .aller input::placeholder { color: #4b5563; } /* page : fil d'Ariane, titre, description, onglets, contenu */ body.admin main.page-admin { max-width: 1340px; margin: 0; padding: 18px 32px 48px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .page-admin .fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: #4b5563; } .page-admin .fil a { color: #1d4ed8; text-decoration: none; font-weight: 500; } .page-admin .fil a:hover { text-decoration: underline; } .page-admin .fil .sep { color: #4b5563; } .page-admin .fil [aria-current] { color: #111827; font-weight: 700; } .page-admin .titre-page { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 2px; } .page-admin .titre-page h1 { margin: 0; font-size: 28px; line-height: 1.2; } .page-admin .titre-page .magasin { font-size: 15px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bord); color: var(--texte); } .page-admin .titre-page .magasin::before { background: var(--couleur, var(--TOUS)); box-shadow: none; } .page-admin .description { margin: 2px 0 14px; color: #4b5563; font-size: 16px; } .page-admin .onglets { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid #d5dbe3; margin: 0 0 18px; } .page-admin .onglets a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; margin-bottom: -2px; border-bottom: 3px solid transparent; color: #374151; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 8px 8px 0 0; } .page-admin .onglets a:hover { background: #e2e8f0; color: #111827; } .page-admin .onglets a[aria-current="page"] { color: #12203a; border-bottom-color: #1d4ed8; font-weight: 800; background: #fff; } .page-admin .contenu-page { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 22px 28px 28px; } .page-admin .contenu-page > :first-child { margin-top: 0; } .page-admin .contenu-page h2 { font-size: 20px; font-weight: 800; margin: 22px 0 10px; } .page-admin .contenu-page h3 { font-size: 17px; font-weight: 800; margin: 18px 0 8px; } /* sections d'une page : séparées par un trait */ .contenu-page .bloc { padding: 18px 0 6px; border-top: 1px solid #e5e7eb; } .contenu-page .bloc:first-child { border-top: 0; padding-top: 0; } .contenu-page .bloc > h2:first-child { margin-top: 0; } .contenu-page dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 10px 0; } .contenu-page dl.fiche dt { color: #4b5563; } .contenu-page dl.fiche dd { margin: 0; font-weight: 700; } .contenu-page .liens-bloc { padding-left: 20px; line-height: 1.9; } /* message de résultat : fixé en haut de la fenêtre, bien visible, fermable */ body.admin .message-fixe { position: fixed; z-index: 60; top: 14px; left: calc(240px + (100vw - 240px) / 2); transform: translateX(-50%); width: min(760px, calc(100vw - 300px)); display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px 14px 20px; font-size: 17px; font-weight: 700; border-radius: 12px; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25); border-left: 8px solid currentColor; } body.admin .message-fixe span { flex: 1; } body.admin .message-fixe .fermer-message { flex: none; min-height: 40px; min-width: 40px; padding: 6px; border: 0; background: transparent; color: inherit; border-radius: 8px; display: flex; align-items: center; justify-content: center; } body.admin .message-fixe .fermer-message:hover { background: rgba(0, 0, 0, 0.06); } body.admin .message-fixe.ferme { display: none; } /* formulaires en grille : étiquette au-dessus du champ, deux colonnes, boutons alignés à droite en bas */ body.admin .contenu-page form.formulaire:not(.options-commande):not(.en-ligne):not(.compact) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: end; margin: 12px 0 18px; } body.admin .contenu-page form.formulaire.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.admin .contenu-page form.formulaire > label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; color: #374151; } body.admin .contenu-page form.formulaire > label > input:not([type=checkbox]):not([type=radio]), body.admin .contenu-page form.formulaire > label > select, body.admin .contenu-page form.formulaire > label > textarea { width: 100%; } body.admin .contenu-page form.formulaire > label.case { flex-direction: row; align-items: center; } body.admin .contenu-page form.formulaire > label.large, body.admin .contenu-page form.formulaire > :not(label) { grid-column: 1 / -1; } body.admin .contenu-page form.formulaire > button { justify-self: end; width: auto; } body.admin .contenu-page form.formulaire > fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; margin: 0; } body.admin .contenu-page form.formulaire > h2, body.admin .contenu-page form.formulaire > h3 { margin: 0; } .contenu-page .boutons-form { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 10px 0; } .contenu-page .boutons-form form { margin: 0; } body.admin .contenu-page .boutons-ligne { justify-content: flex-end; } body.admin .contenu-page .boutons-ligne > * { flex: none; } @media (max-width: 1100px) { body.admin .contenu-page form.formulaire:not(.options-commande):not(.en-ligne):not(.compact), body.admin .contenu-page form.formulaire.trois { grid-template-columns: 1fr; } } /* boutons : principal plein, secondaire à contour, danger en rouge */ body.admin .contenu-page button, body.admin .contenu-page a.bouton { width: auto; min-height: 44px; padding: 9px 20px; border-radius: 10px; font-size: 16px; font-weight: 700; border: 2px solid #94a3b8; background: #fff; color: #1f2937; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } body.admin .contenu-page button:hover, body.admin .contenu-page a.bouton:hover { border-color: #1f2937; } body.admin .contenu-page button.principal, body.admin .contenu-page a.bouton.principal, body.admin .contenu-page button.bleu { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } body.admin .contenu-page button.principal:hover, body.admin .contenu-page a.bouton.principal:hover { background: #1e40af; border-color: #1e40af; } body.admin .contenu-page button.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; } body.admin .contenu-page button.danger:hover { background: #991b1b; border-color: #991b1b; } body.admin .contenu-page button.petit, body.admin .contenu-page a.bouton.petit { padding: 6px 14px; font-size: 15px; } body.admin .contenu-page button:disabled { opacity: 1; background: #f3f4f6; border-color: #d1d5db; color: #4b5563; cursor: not-allowed; } body.admin .contenu-page button.lien { border: 0; background: none; padding: 8px 0; color: #1d4ed8; } body.admin .barre-admin button.secondaire { min-height: 44px; padding: 8px 18px; border-radius: 10px; font-size: 16px; font-weight: 700; border: 2px solid #94a3b8; background: #fff; color: #1f2937; } /* interrupteurs : libellé, état en gros, bouton */ .interrupteur { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 12px 16px; margin: 12px 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; } .interrupteur .interrupteur-texte { flex: 1 1 320px; } .interrupteur form { margin: 0; } .etat-gros { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 8px; font-size: 20px; font-weight: 800; letter-spacing: 0.06em; } .etat-gros.on { background: #dcfce7; color: #14532d; border: 2px solid #16a34a; } .etat-gros.off { background: #f3f4f6; color: #374151; border: 2px solid #9ca3af; } /* tableaux : colonnes alignées, chiffres à droite, en-tête fixe */ body.admin .contenu-page table { font-size: 15px; } body.admin .contenu-page thead th { position: sticky; top: 65px; z-index: 2; } body.admin .contenu-page td.nombre, body.admin .contenu-page th.nombre { text-align: right; font-variant-numeric: tabular-nums; } body.admin .contenu-page td form { margin: 0; } .actions-ligne { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .actions-ligne form { margin: 0; } /* accueil et page « Magasins » : cartes des magasins */ body.admin .carte-magasin { gap: 12px; } body.admin .carte-magasin-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } body.admin .carte-magasin a.bouton { justify-self: end; } .raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .raccourcis .raccourci { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; color: #111827; font-weight: 700; font-size: 16px; text-decoration: none; } .raccourcis .raccourci .icone-svg { color: #1d4ed8; } .raccourcis .raccourci:hover { border-color: #1d4ed8; background: #f8fafc; } .raccourcis .compteur { margin-left: auto; } .cartes-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; } .carte-choix { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid var(--bord); border-top: 6px solid var(--couleur); border-radius: 14px; background: #fff; } .carte-choix .magasin { font-size: 17px; } .carte-choix a.bouton { align-self: flex-end; } @media (max-width: 1100px) { .cartes-choix { grid-template-columns: 1fr; } } /* résumé d'un magasin : tuiles d'état */ .etats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; } .etat-tuile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; color: #111827; text-decoration: none; } body.admin .contenu-page a.etat-tuile { color: #111827; } .etat-tuile:hover { border-color: #1d4ed8; } .etat-tuile .etat-titre { font-size: 14px; color: #4b5563; font-weight: 600; } .etat-tuile .etat-valeur { font-size: 19px; font-weight: 800; } body.admin .contenu-page a.etat-tuile.etat-ko .etat-valeur { color: #b91c1c; } body.admin .contenu-page a.etat-tuile.etat-ok .etat-valeur { color: #166534; } /* zone sensible : cadre rouge */ .zone-sensible { margin-top: 26px; padding: 16px 20px; border: 2px solid #b91c1c; border-radius: 14px; background: #fef2f2; } .page-admin .contenu-page .zone-sensible h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; color: #991b1b; } .zone-sensible details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: #7f1d1d; } /* fournisseurs : tableau */ .tableau-fournisseurs td:first-child { color: #4b5563; } .cle-unique { background: #fffbeb; border: 2px solid #f59e0b; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; } @media (max-width: 900px) { body.admin .menu-admin { height: auto; } body.admin .message-fixe { left: 50%; width: calc(100vw - 32px); } .barre-admin, body.admin main.page-admin { padding-left: 16px; padding-right: 16px; } }/* corrections après relecture des captures */ body.admin .contenu-page .alertes-admin a { color: var(--ambre-texte); text-decoration: none; } body.admin .contenu-page .alertes-admin a:hover { text-decoration: underline; } .alertes-admin a.alerte-rouge, body.admin .contenu-page .alertes-admin a.alerte-rouge { color: #991B1B; } /* alerte grave (24/10/2026) : rouge foncé sur le fond ambre (contraste 7:1) */ body.admin .carte-magasin { display: flex; flex-direction: column; } body.admin .carte-magasin a.bouton { margin-top: auto; align-self: flex-end; } body.admin .contenu-page form.formulaire:not(.options-commande):not(.en-ligne):not(.compact) { align-items: start; } body.admin .contenu-page input[type=file] { width: 100%; min-height: 48px; padding: 9px 10px; border: 2px solid #d1d5db; border-radius: 10px; background: #fff; font-size: 15px; } body.admin .contenu-page form.formulaire > a.bouton { justify-self: end; } .actions-ligne { flex-wrap: nowrap; white-space: nowrap; } /* formulaire compact : champ et bouton sur une ligne, à droite */ body.admin .contenu-page form.formulaire.compact { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 10px 14px; margin: 12px 0; } body.admin .contenu-page form.formulaire.compact > label { flex: 0 1 300px; } body.admin .contenu-page form.formulaire.compact > .boutons-form { margin: 0; }body.admin .contenu-page form.formulaire > label { display: block; } body.admin .contenu-page form.formulaire > label > input:not([type=checkbox]):not([type=radio]), body.admin .contenu-page form.formulaire > label > select, body.admin .contenu-page form.formulaire > label > textarea { display: block; margin-top: 6px; } body.admin .contenu-page form.formulaire > label.case { display: inline-flex; } /* comptes : rôle et magasins sur une ligne, mot de passe et bouton côte à côte */ body.admin .contenu-page form.compte-magasins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; } body.admin .contenu-page form.compte-magasins label.case { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } body.admin .contenu-page form.compte-magasins select { min-height: 40px; } body.admin .contenu-page form.en-ligne { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 6px 0 0; } body.admin .contenu-page form.en-ligne input { width: 190px; min-height: 40px; } body.admin .contenu-page fieldset.magasins-compte label.case { display: inline-flex; align-items: center; gap: 8px; margin-right: 22px; min-height: 44px; }body.admin .contenu-page form.compte-magasins { min-width: 330px; } body.admin .contenu-page form.en-ligne input { width: 150px; }body.admin .contenu-page form.compte-magasins { min-width: 230px; } body.admin .contenu-page form.en-ligne input { width: 120px; } body.admin .contenu-page thead th { white-space: normal; } /* ===================================================================== PAGE « FEUILLE DE CALCUL » (16/10/2026) : la fenêtre ne défile pas ; barre du haut (filtres), zone du tableau avec son propre défilement (en-tête collant, 2 premières colonnes fixes), barre du bas (pagination). Tableau des articles. ===================================================================== */ body.pleine-hauteur { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.pleine-hauteur .mise-en-page { flex: 1; min-height: 0; } body.pleine-hauteur .menu-admin { height: 100%; min-height: 0; position: static; } body.pleine-hauteur .zone { display: flex; flex-direction: column; min-height: 0; height: 100%; } body.pleine-hauteur .barre-admin { position: static; } body.pleine-hauteur main.page-admin { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 12px; max-width: none; } body.pleine-hauteur .page-admin .titre-page h1 { font-size: 24px; } body.pleine-hauteur .page-admin .description { margin-bottom: 8px; } body.pleine-hauteur .page-admin .onglets { margin-bottom: 10px; } body.pleine-hauteur .page-admin .contenu-page { flex: 1; min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .feuille { flex: 1; min-height: 0; display: flex; flex-direction: column; } .feuille-haut { flex: none; padding: 10px 14px; border-bottom: 1px solid var(--bord); background: #f8fafc; border-radius: 16px 16px 0 0; } .feuille-haut form.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0; } .feuille-haut form.filtres label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; color: #374151; margin: 0; } .feuille-haut form.filtres label.case { flex-direction: row; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; } body.admin .feuille-haut form.filtres input:not([type=checkbox]), body.admin .feuille-haut form.filtres select { min-height: 40px; padding: 6px 10px; font-size: 15px; border-width: 2px; } body.admin .feuille-haut form.filtres input[name=q] { width: 220px; } body.admin .feuille-haut form.filtres button { min-height: 40px; padding: 6px 16px; font-size: 15px; } .feuille-haut form.filtres a { min-height: 40px; display: inline-flex; align-items: center; font-size: 15px; } .feuille-haut form.filtres a.export { margin-left: auto; font-weight: 700; } .feuille-zone { flex: 1; min-height: 0; overflow: auto; background: #fff; } .feuille-zone:focus-visible { outline: 3px solid #93c5fd; outline-offset: -3px; } /* tableau : largeur stable, lignes compactes (environ 36 px), texte long coupé avec info-bulle */ body.admin .contenu-page table.feuille-tableau { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; display: table; } .feuille-tableau col.c-code { width: 150px; } .feuille-tableau col.c-designation { width: 320px; } .feuille-tableau col.c-fournisseur { width: 130px; } .feuille-tableau col.c-famille { width: 120px; } .feuille-tableau col.c-prix { width: 112px; } .feuille-tableau col.c-stock { width: 76px; } .feuille-tableau col.c-tva { width: 56px; } .feuille-tableau col.c-actif { width: 64px; } .feuille-tableau col.c-date { width: 140px; } body.admin .contenu-page .feuille-tableau th, body.admin .contenu-page .feuille-tableau td { height: 36px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; border-bottom: 1px solid #eef0f3; } body.admin .contenu-page .feuille-tableau thead th { position: sticky; top: 0; z-index: 3; background: #e8edf4; color: #1f2937; font-size: 13px; font-weight: 800; border-bottom: 2px solid #c5cfdc; } .feuille-tableau thead th a { color: inherit; text-decoration: none; display: block; line-height: 36px; overflow: hidden; text-overflow: ellipsis; } .feuille-tableau thead th a:hover { text-decoration: underline; } body.admin .contenu-page .feuille-tableau thead th.trie { background: #d6e0ee; color: #12203a; } .feuille-tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; } body.admin .contenu-page .feuille-tableau tbody tr:nth-child(even) td { background: #f9fafb; } body.admin .contenu-page .feuille-tableau tbody tr td { background: #fff; } body.admin .contenu-page .feuille-tableau tbody tr:nth-child(even) td { background: #f8fafc; } body.admin .contenu-page .feuille-tableau tbody tr:hover td { background: #e0ecff; cursor: pointer; } .feuille-tableau tbody tr.inactif td { color: #4b5563; } /* deux premières colonnes fixes au défilement horizontal */ body.admin .contenu-page .feuille-tableau .fixe1 { position: sticky; left: 0; z-index: 2; } body.admin .contenu-page .feuille-tableau .fixe2 { position: sticky; left: 150px; z-index: 2; border-right: 2px solid #d5dbe3; } body.admin .contenu-page .feuille-tableau thead th.fixe1, body.admin .contenu-page .feuille-tableau thead th.fixe2 { z-index: 4; } .feuille-vide { padding: 16px; margin: 0; } .feuille-bas { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 8px 14px; border-top: 1px solid var(--bord); background: #f8fafc; border-radius: 0 0 16px 16px; font-size: 14px; } .feuille-bas .pagination { display: flex; align-items: center; gap: 14px; margin: 0; } .feuille-bas .pagination a, .feuille-bas .par-page a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 8px; font-weight: 700; } .feuille-bas .inactif-lien { color: #6b7280; padding: 0 8px; } .feuille-bas .par-page { display: flex; align-items: center; gap: 4px; } .feuille-bas .par-page strong { padding: 6px 10px; border-radius: 8px; background: #12203a; color: #fff; } @media (max-width: 900px) { body.pleine-hauteur { height: auto; overflow: auto; display: block; } }/* feuille de calcul : barre du haut compacte (plus de place pour le tableau à 1280 x 720 et 1024 x 700) */ body.pleine-hauteur .page-admin .description { display: none; } body.pleine-hauteur .page-admin .titre-page { margin: 2px 0 4px; } body.pleine-hauteur .page-admin .titre-page h1 { font-size: 22px; } body.pleine-hauteur .page-admin .onglets { margin-bottom: 8px; } /* plus de défilement dans la barre d’onglets (barre parasite, 15/10/2026) */ body.pleine-hauteur .page-admin .onglets a { padding: 6px 12px; font-size: 15px; white-space: nowrap; min-height: 40px; } body.admin main.page-admin .feuille-haut form.filtres { gap: 6px 10px; } body.admin main.page-admin .feuille-haut form.filtres label { font-size: 12px; gap: 2px; } body.admin main.page-admin .feuille-haut form.filtres input:not([type=checkbox]), body.admin main.page-admin .feuille-haut form.filtres select { min-height: 40px; height: 40px; padding: 4px 8px; font-size: 15px; border-width: 2px; } body.admin main.page-admin .feuille-haut form.filtres select[name=magasin] { width: 170px; } body.admin main.page-admin .feuille-haut form.filtres select[name=fournisseur], body.admin main.page-admin .feuille-haut form.filtres select[name=etat] { width: 130px; } body.admin main.page-admin .feuille-haut form.filtres input[name=q] { width: 190px; } body.admin main.page-admin .feuille-haut form.filtres label.case { font-size: 13px; min-height: 40px; } body.admin main.page-admin .feuille-haut form.filtres label.case input { width: 20px; height: 20px; } .feuille-haut { padding: 8px 12px; } .feuille-bas { padding: 4px 12px; } /* colonnes fixes : largeur exacte de la 1re colonne (la 2e se colle juste à côté) */ body.admin .contenu-page .feuille-tableau .c-code { width: 150px; min-width: 150px; max-width: 150px; } .feuille-haut form.filtres a.export { margin-left: 12px; } .feuille-bas { gap: 4px 14px; } /* File d'impression (16/10/2026) : compteurs par état, file retenue au-delà du seuil, vider */ table.comptes-file { width: auto; min-width: 520px; } body.admin .contenu-page table.comptes-file td { font-size: 22px; font-weight: 800; text-align: center; } body.admin .contenu-page table.comptes-file th { text-align: center; } .alerte-file { margin: 14px 0; padding: 12px 16px; border: 2px solid #f59e0b; border-radius: 12px; background: #fffbeb; color: #78350f; } .alerte-file p { margin: 4px 0; } .apercu-file { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .apercu-file figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: #374151; } .apercu-file img { width: 170px; height: auto; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; } form.vider-file fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 14px; margin: 12px 0 4px; } form.vider-file label.case { display: flex; align-items: center; gap: 8px; min-height: 44px; } body.admin .contenu-page .file-impression form.formulaire.compact > label { flex: 0 1 560px; } /* ---------- En-tête commun : compte (Changer de magasin, Se déconnecter) et magasin actif de l'administrateur ---------- */ .compte { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .compte form { margin: 0; } .compte .changer-magasin button.lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 700; text-decoration: underline; color: inherit; background: transparent; border: 0; } .bande[class*="bandeau-"] .compte .changer-magasin button.lien { color: #fff; } .compte-entete { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .barre-admin { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .barre-admin .aller { flex: 1 1 360px; } .selecteur-magasin { display: inline-flex; align-items: center; gap: 10px; margin: 0; } .selecteur-magasin .actif { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; font-size: 15px; color: var(--texte); white-space: nowrap; } .selecteur-magasin .actif::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--couleur, var(--TOUS)); box-shadow: none; } .selecteur-magasin select { min-height: 44px; padding: 6px 10px; font: inherit; font-size: 15px; border: 2px solid #94a3b8; border-radius: 10px; background: #fff; color: #1f2937; } .compte-entete .selecteur-magasin .actif { color: #fff; } .compte-entete .selecteur-magasin .actif::before { background: var(--pale, #fff); box-shadow: 0 0 0 2px #fff; } .barre-compte .deconnexion button.lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 700; color: #1f2937; border: 2px solid #94a3b8; border-radius: 10px; background: #fff; text-decoration: none; } @media (max-width: 760px) { .compte-entete .selecteur-magasin .actif { display: none; } } /* SIMULATION (environnement d'essai, magasin sans agent de caisse) : impression et lots marqués à la main */ .simulation { border: 2px solid #b45309; background: #fffbeb; color: #78350f; border-radius: 12px; padding: 12px 16px; margin: 12px 0; } .simulation p { margin: 0 0 10px; } .simulation strong { letter-spacing: 0.06em; } .simulation .apercu-file { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; } .simulation figure { margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; } .simulation figcaption { font-size: 13px; color: #374151; text-align: center; } /* en-tête de l'administrateur : tout sur une ligne (le champ « Aller à… » prend la place qui reste) */ .barre-admin { flex-wrap: nowrap; } .barre-admin .aller { flex: 1 1 0; min-width: 0; max-width: none; } .barre-admin .aller input { min-width: 0; } .barre-admin .selecteur-magasin, .barre-admin .barre-compte { flex: none; } @media (max-width: 1100px) { .barre-admin .selecteur-magasin .actif { display: none; } } /* Portail des employés (16/10/2026) : titre centré avec le prénom, tuiles sans sous-titre (icône et titre centrés verticalement), vidéos en grille de 2 colonnes (une seule colonne sur téléphone) */ .portail-bande h1 { text-align: center; } .portail-contenu .app { align-items: center; } .portail-contenu .app > .titre { flex: 1; } .portail-contenu .portail-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portail-contenu .portail-videos .video:only-child { grid-column: 1 / -1; } @media (max-width: 640px) { .portail-contenu .portail-videos { grid-template-columns: 1fr; } } /* Vidéos du portail (administration) */ .videos-admin .video-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; align-items: end; margin: 0; max-width: none; } .videos-admin .video-ligne .case, .videos-admin .video-ligne .boutons-form { grid-column: 1 / -1; } .videos-admin form.en-ligne { display: inline-block; margin: 4px 4px 0 0; } .bouton-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 10px; border: 2px solid #94a3b8; background: #fff; color: #1f2937; font-weight: 700; text-decoration: none; } .videos-admin td:nth-child(2) { width: 62%; } .videos-admin td:first-child { white-space: nowrap; } .videos-admin form.en-ligne { display: block; margin: 6px 0 0; } .videos-admin form.en-ligne button { min-width: 132px; } body.admin .contenu-page .videos-admin form.video-ligne { max-width: none; width: 100%; } body.admin .contenu-page .videos-admin form.video-ligne input:not([type=checkbox]) { width: 100%; max-width: none; } .videos-admin .video-carte { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 20px; align-items: start; padding: 16px 0; border-top: 1px solid var(--bord); } .videos-admin .video-ordre, .videos-admin .video-etat { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .videos-admin .video-ordre form, .videos-admin .video-etat form { margin: 0; } .videos-admin .video-ordre button, .videos-admin .video-etat button { width: 100%; } .videos-admin .video-numero { font-size: 20px; font-weight: 800; } .videos-admin .video-etat .etat-gros { text-align: center; } /* Tableau des articles (16/10/2026) : sans Famille ni TVA, colonnes rapprochées (largeurs ajustées au contenu, marges réduites) */ .feuille-tableau col.c-code { width: 132px; } .feuille-tableau col.c-designation { width: 300px; } .feuille-tableau col.c-fournisseur { width: 116px; } .feuille-tableau col.c-prix { width: 96px; } .feuille-tableau col.c-stock { width: 60px; } .feuille-tableau col.c-actif { width: 70px; } .feuille-tableau col.c-date { width: 124px; } body.admin .contenu-page .feuille-tableau th, body.admin .contenu-page .feuille-tableau td { padding: 0 6px; } body.admin .contenu-page .feuille-tableau .c-code { width: 132px; min-width: 132px; max-width: 132px; } body.admin .contenu-page .feuille-tableau .fixe2 { left: 132px; } /* Ventes et statistiques (16/10/2026) : filtres sur une seule ligne */ body.admin .contenu-page form.barre-filtres { display: flex; align-items: flex-end; gap: 16px; flex-wrap: nowrap; margin: 0 0 16px; max-width: none; } .barre-filtres label, .barre-filtres fieldset { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 700; color: #374151; } .barre-filtres legend { padding: 0; margin-bottom: 4px; font-weight: 700; float: left; width: 100%; } .barre-filtres fieldset { flex-direction: row; flex-wrap: wrap; gap: 6px; } .barre-filtres select, .barre-filtres input { min-height: 44px; font: inherit; font-weight: 400; font-size: 15px; padding: 6px 8px; border: 2px solid #d1d5db; border-radius: 10px; background: #fff; } .barre-filtres button { min-height: 44px; } /* ---------- Comptes (16/10/2026) : un tableau aligné, pastilles des magasins, interrupteurs, panneau latéral ---------- */ .barre-comptes { display: flex; align-items: center; gap: 20px; margin: 0 0 16px; } .bouton-lien.principal-lien { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .tableau-comptes-zone { overflow-x: auto; } body.admin .contenu-page table.tableau-comptes { width: 100%; border-collapse: collapse; display: table; } body.admin .contenu-page .tableau-comptes th, body.admin .contenu-page .tableau-comptes td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e5e7eb; } body.admin .contenu-page .tableau-comptes thead th { background: #e8edf4; font-size: 13px; font-weight: 800; color: #1f2937; white-space: nowrap; } .tableau-comptes tr.inactif td { color: #4b5563; background: #f9fafb; } .pastilles { display: flex; gap: 6px; flex-wrap: wrap; } .pastille { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; } .pastille.on { background: var(--fonce, var(--couleur, #12203a)); color: #fff; } .pastille.on.tous { background: #12203a; } .pastille.off { background: #fff; color: #4b5563; border: 1px dashed #9ca3af; } .interrupteur-form { margin: 0; } .interrupteur-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid #9ca3af; background: #fff; color: #1f2937; font-weight: 800; cursor: pointer; } .interrupteur-btn .bille { width: 30px; height: 30px; border-radius: 50%; background: #9ca3af; } .interrupteur-btn.on { border-color: #15803d; background: #f0fdf4; color: #14532d; flex-direction: row-reverse; padding: 4px 4px 4px 10px; } .interrupteur-btn.on .bille { background: #15803d; } .actions-compte { display: flex; gap: 8px; flex-wrap: wrap; } .actions-compte form { margin: 0; } .panneau-voile { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 80; } .panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; z-index: 81; overflow-y: auto; padding: 24px; box-shadow: -10px 0 30px rgba(15, 23, 42, 0.2); } .panneau-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panneau-haut h2 { margin: 0; } .panneau-fermer { font-weight: 700; } body.admin .panneau .panneau-form { display: flex; flex-direction: column; gap: 14px; max-width: none; margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; } body.admin .panneau .panneau-form label:not(.case) { display: flex; flex-direction: column; gap: 6px; font-weight: 700; } body.admin .panneau .panneau-form input:not([type=checkbox]), body.admin .panneau .panneau-form select { width: 100%; box-sizing: border-box; min-height: 44px; } body.admin .panneau .panneau-form h3 { margin: 0; font-size: 17px; } .panneau .magasins-compte { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; } .panneau .boutons-form { display: flex; justify-content: flex-end; gap: 10px; } /* Messages de l'administrateur : grande fenêtre qui bloque la page jusqu'à « OK » (texte simple, retours à la ligne gardés) */ .fenetre-boite:has(.message-fenetre) { width: min(760px, calc(100vw - 32px)); max-width: none; } .message-fenetre h2 { font-size: 28px; margin: 0 0 16px; } .message-fenetre .message-texte { white-space: pre-line; font-size: 20px; line-height: 1.5; margin: 0 0 24px; overflow-wrap: anywhere; } .message-fenetre .message-ok { display: block; width: 100%; min-height: 60px; font-size: 22px; text-align: center; } .message-fenetre.apercu .message-ok { line-height: 44px; } .formulaire-message textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px; border: 2px solid #d1d5db; border-radius: 10px; } .formulaire-message .large { grid-column: 1 / -1; } .public-message { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; } .tableau-suivi tr.total td { font-weight: 800; background: #f1f5f9; } .barres-heures progress { width: 240px; height: 14px; } /* corrections 16/10/2026 : en-tête du tableau des comptes non collant ; filtres des ventes vraiment sur une ligne */ body.admin .contenu-page .tableau-comptes thead th { position: static; } .tableau-comptes .pastilles { flex-wrap: wrap; max-width: 360px; } .barre-filtres fieldset { flex-wrap: nowrap; } body.admin .contenu-page .barre-filtres input[type=date] { width: 150px; } body.admin .contenu-page .barre-filtres input[type=time] { width: 104px; } body.admin .contenu-page .barre-filtres select { min-width: 170px; width: auto; } body.admin .contenu-page .barre-filtres input[name=code] { width: 160px; } body.admin .contenu-page .barre-filtres input[type=date] { width: 172px; } body.admin .contenu-page .barre-filtres input[type=time] { width: 124px; } /* panneau latéral : champs l'un sous l'autre, même largeur */ body.admin .contenu-page .panneau form.panneau-form, body.admin .contenu-page .panneau div.panneau-form { display: flex; flex-direction: column; grid-template-columns: 1fr; gap: 14px; } body.admin .contenu-page .panneau .panneau-form > label, body.admin .contenu-page .panneau .panneau-form > fieldset { width: 100%; grid-column: auto; } body.admin .contenu-page .panneau .panneau-form > * { flex: none; } body.admin .contenu-page .panneau form.formulaire.compact.panneau-form { flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; } body.admin .contenu-page .panneau form.formulaire.compact.panneau-form > label, body.admin .contenu-page .panneau form.formulaire.compact.panneau-form > fieldset, body.admin .contenu-page .panneau form.formulaire.compact.panneau-form > div { flex: none; } body.admin .contenu-page form.barre-filtres { flex-wrap: wrap; gap: 12px; } body.admin .contenu-page .barre-filtres input[type=date] { width: 160px; } body.admin .contenu-page .barre-filtres input[type=time] { width: 112px; } body.admin .contenu-page .barre-filtres select { min-width: 150px; max-width: 200px; } body.admin .contenu-page .barre-filtres input[type=time] { width: 124px; } body.admin .contenu-page .barre-filtres input[type=date] { width: 156px; } /* Commandes (16/10/2026) : proposition compacte (action par ligne, photo, petite quantité), comparaisons */ body.admin .contenu-page table.table-commande { width: 100%; border-collapse: collapse; display: table; font-size: 14px; } body.admin .contenu-page .table-commande th, body.admin .contenu-page .table-commande td { padding: 6px 6px; vertical-align: middle; border-bottom: 1px solid #e5e7eb; text-align: left; } body.admin .contenu-page .table-commande th.nombre, body.admin .contenu-page .table-commande td.nombre { text-align: right; white-space: nowrap; } body.admin .contenu-page .table-commande thead th { background: #e8edf4; font-size: 12px; font-weight: 800; white-space: nowrap; } .table-commande select.action-ligne { min-height: 36px; max-width: 190px; font: inherit; font-size: 13px; padding: 4px 6px; border: 2px solid #94a3b8; border-radius: 8px; background: #fff; } .table-commande .photo-ligne { width: 44px; } .table-commande .photo-ligne img { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; } .table-commande .article-ligne { min-width: 220px; } .table-commande tr.decoche td { color: #4b5563; background: #f8fafc; } .moins-cher-ligne { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 800; color: #166534; background: #dcfce7; border-radius: 6px; padding: 1px 6px; } .qte-petite { display: inline-flex; align-items: center; gap: 3px; } body.admin .contenu-page .qte-petite input.quantite { width: 46px; min-height: 32px; padding: 2px 4px; font-size: 14px; text-align: center; border: 2px solid #d1d5db; border-radius: 6px; } .qte-petite .pas-petit { width: 28px; height: 32px; min-height: 32px; padding: 0; font-size: 16px; font-weight: 800; border: 2px solid #d1d5db; border-radius: 6px; background: #f3f4f6; color: #374151; cursor: pointer; } .calcul-comparaisons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; } .calcul-comparaisons form { margin: 0; } .sous-onglets { display: flex; gap: 8px; margin: 0 0 8px; } .sous-onglets a { padding: 6px 14px; border-radius: 999px; border: 2px solid #cbd5e1; text-decoration: none; font-weight: 700; color: #1f2937; } .sous-onglets a[aria-current="page"] { background: #12203a; border-color: #12203a; color: #fff; } .tableau-communs .article-commun { display: flex; align-items: center; gap: 8px; min-width: 260px; } .tableau-communs .article-commun img { width: 36px; height: 36px; object-fit: contain; flex: none; } body.admin .contenu-page .feuille-tableau td.moins-cher { background: #dcfce7 !important; color: #14532d; font-weight: 800; } body.admin .contenu-page .feuille-tableau td.actuel { outline: 2px solid #1d4ed8; outline-offset: -2px; } body.admin .contenu-page .tableau-communs td, body.admin .contenu-page .tableau-hausses td { height: auto; white-space: normal; } .anomalies-titre { margin: 16px 8px 6px; font-size: 17px; color: #991b1b; } body.admin .contenu-page form.commande .table-commande .qte-petite input.quantite { width: 44px; min-width: 0; height: 30px; min-height: 30px; padding: 0 2px; font-size: 14px; } body.admin .contenu-page form.commande .table-commande .qte-petite button.pas-petit { width: 26px; min-width: 0; height: 30px; min-height: 30px; padding: 0; font-size: 15px; line-height: 1; border-radius: 6px; } body.admin .contenu-page form.commande .table-commande select.action-ligne { width: 150px; min-height: 34px; padding: 2px 4px; } body.admin .contenu-page .table-commande .article-ligne { min-width: 180px; } /* Commandes (16/10/2026) : choix du magasin en petites bannières sur une ligne ; liste « Action » à la largeur de l'option la plus longue */ body.admin .contenu-page nav.tuiles-magasins-petites { display: flex; flex-wrap: wrap; gap: 12px; grid-template-columns: none; } body.admin .contenu-page nav.tuiles-magasins-petites a.tuile-magasin { min-height: 48px; padding: 8px 20px; font-size: 15px; letter-spacing: 0.08em; flex: 0 0 auto; gap: 8px; border-radius: 12px; } body.admin .contenu-page nav.tuiles-magasins-petites a.tuile-magasin::before { width: 10px; height: 10px; } body.admin .contenu-page form.commande .table-commande select.action-ligne { width: auto; max-width: none; min-height: 28px; height: 28px; padding: 0 2px; font-size: 12px; border-width: 1px; border-radius: 6px; } body.admin .contenu-page form.commande .table-commande select.action-ligne option, body.admin .contenu-page form.commande .table-commande select.action-ligne optgroup { font-size: 14px; } /* ---------- Connexion modernisée (16/10/2026) : logos des magasins au-dessus d'une carte blanche centrée ---------- */ body.page-connexion { background: #eef2f7; min-height: 100vh; } .logo-magasin { width: 120px; height: 120px; object-fit: contain; display: block; } .logo-repli { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: var(--fonce, var(--couleur)); color: #fff; text-align: center; padding: 8px; box-sizing: border-box; } .logo-repli .initiales { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; } .logo-repli .nom { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 460px) { .logo-magasin { width: 96px; height: 96px; } } /* Messages : éditeur de type traitement de texte (16/10/2026) */ .editeur-message { display: flex; flex-direction: column; gap: 6px; } .editeur-message .etiquette-champ { font-size: 15px; font-weight: 600; color: #374151; } .barre-editeur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 2px solid #cbd5e1; border-bottom: 0; border-radius: 10px 10px 0 0; background: #f1f5f9; } body.admin .contenu-page .barre-editeur button, body.admin .contenu-page .barre-editeur select { min-height: 36px; padding: 4px 10px; font-size: 14px; border: 1px solid #94a3b8; border-radius: 8px; background: #fff; color: #1f2937; cursor: pointer; } .barre-editeur .couleur-texte { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .barre-editeur input[type=color] { width: 36px; height: 32px; padding: 0; border: 1px solid #94a3b8; border-radius: 6px; } .zone-editeur { min-height: 220px; padding: 14px; border: 2px solid #cbd5e1; border-radius: 0 0 10px 10px; background: #fff; font-size: 18px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; } .zone-editeur:focus { outline: 3px solid #93c5fd; outline-offset: 1px; } .fenetre-lien { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px; border: 2px solid #1d4ed8; border-radius: 10px; background: #eff6ff; } .message-fenetre .message-texte ul, .message-fenetre .message-texte ol, .zone-editeur ul, .zone-editeur ol { padding-left: 1.4em; } .message-fenetre .message-texte a { color: #1d4ed8; } /* Comptes : « Peut changer les prix » en texte (Oui / Non), modifiable seulement dans le panneau « Modifier » */ .oui-non { display: inline-block; min-width: 44px; padding: 4px 10px; border-radius: 8px; font-weight: 800; text-align: center; } .oui-non.oui { background: #dcfce7; color: #14532d; border: 1px solid #15803d; } .oui-non.non { background: #f1f5f9; color: #1f2937; border: 1px solid #94a3b8; } body.admin .contenu-page form.commande { overflow-x: auto; max-width: 100%; } /* mise en forme des messages (classes posées par l'éditeur et gardées par le serveur) */ .t-petit { font-size: 0.85em; } .t-normal { font-size: 1em; } .t-grand { font-size: 1.25em; } .t-tres-grand { font-size: 1.5em; } .t-enorme { font-size: 2em; } .p-dmsans { font-family: 'DM Sans', system-ui, sans-serif; } .p-arial { font-family: Arial, sans-serif; } .p-georgia { font-family: Georgia, serif; } .p-verdana { font-family: Verdana, sans-serif; } .p-times { font-family: 'Times New Roman', serif; } .p-courier { font-family: 'Courier New', monospace; } .c-noir { color: #111827; } .c-bleu { color: #1d4ed8; } .c-rouge { color: #b91c1c; } .c-vert { color: #15803d; } .c-orange { color: #b45309; } .c-rose { color: #be185d; } .c-violet { color: #6d28d9; } .c-gris { color: #4b5563; } .a-gauche { text-align: left; } .a-centre { text-align: center; } .a-droite { text-align: right; } .a-justifie { text-align: justify; } .g-gras { font-weight: 700; } .g-italique { font-style: italic; } .g-souligne { text-decoration: underline; } .fenetre-lien[hidden], .barre-editeur[hidden], .zone-editeur[hidden] { display: none; } body.admin .contenu-page .barre-editeur select { width: auto; flex: none; } body.admin .contenu-page form.formulaire > .editeur-message { grid-column: 1 / -1; } /* page de connexion : centrée dans la fenêtre */ body.page-connexion .mise-en-page { display: block; } /* « stock inconnu » (Moins cher chez X, Articles communs) : gris discret */ .stock-inconnu{color:#4b5563;font-size:.85em;font-weight:400} /* Photos des articles (16/10/2026) : 40 x 40, coins arrondis ; sans photo : carré gris ; lignes un peu plus hautes seulement là où il y a des photos */ .vignette { display: inline-block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; vertical-align: middle; background: #e5e7eb; flex: none; } .vignette-vide { background: #e5e7eb; } td.c-photo, th.c-photo { width: 52px; text-align: center; } table.avec-photos td { vertical-align: middle; } body.admin .contenu-page table.avec-photos td { padding-top: 4px; padding-bottom: 4px; } .article-photo { display: flex; align-items: center; gap: 10px; min-width: 0; } .article-photo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Tableau des articles : colonne Photo fixe, Code-barre et Désignation à côté ; prix et stock centrés */ .feuille-tableau col.c-photo { width: 52px; } body.admin .contenu-page .feuille-tableau.avec-photos th, body.admin .contenu-page .feuille-tableau.avec-photos td { height: 48px; } body.admin .contenu-page .feuille-tableau .fixe0 { position: sticky; left: 0; z-index: 2; width: 52px; min-width: 52px; max-width: 52px; padding: 0 6px; } body.admin .contenu-page .feuille-tableau.avec-photos .fixe1 { left: 52px; } body.admin .contenu-page .feuille-tableau.avec-photos .fixe2 { left: 184px; } body.admin .contenu-page .feuille-tableau thead th.fixe0 { z-index: 4; } body.admin .contenu-page .feuille-tableau th.centre, body.admin .contenu-page .feuille-tableau td.centre { text-align: center; font-variant-numeric: tabular-nums; } /* Portail : tuile « Je veux consulter un prix et le stock » (16/10/2026), moitié moins haute, centrée sous les deux grandes */ .portail-petites { display: flex; justify-content: center; margin-top: 24px; } .portail-contenu .app.petite { min-height: 90px; padding: 14px 28px; gap: 18px; width: min(560px, 100%); border-radius: 20px; } .portail-contenu .app.petite .icone { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; } .portail-contenu .app.petite .titre { font-size: 20px; } /* Page « Consulter un prix et le stock » */ .consulter-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 20px; } .consulter-form label { font-weight: 700; font-size: 17px; } .consulter-form input { font-size: 26px; min-height: 64px; padding: 8px 14px; border: 3px solid var(--couleur, #12203a); border-radius: 14px; } .consulter-inconnu { font-size: 22px; font-weight: 800; color: #b91c1c; background: #fef2f2; border: 2px solid #fecaca; border-radius: 14px; padding: 16px; text-align: center; } .consulter-resultat { background: #fff; border: 1px solid var(--bord); border-radius: 18px; padding: 18px; display: grid; gap: 14px; } .consulter-article { display: flex; align-items: center; gap: 14px; } .consulter-article .vignette { width: 72px; height: 72px; border-radius: 10px; } .consulter-designation { font-size: 22px; font-weight: 800; line-height: 1.25; } .consulter-prix { display: flex; flex-direction: column; align-items: center; padding: 10px; background: #f8fafc; border-radius: 14px; } .consulter-prix .etiquette-champ { font-size: 15px; font-weight: 700; color: #4b5563; } .consulter-prix strong { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .consulter-stocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .consulter-stocks li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 12px; font-size: 18px; } .consulter-stocks li:first-child { border-width: 2px; border-color: var(--couleur, #12203a); } .consulter-stocks .nom { flex: 1; font-weight: 700; letter-spacing: .04em; } .consulter-stocks strong { font-size: 22px; font-variant-numeric: tabular-nums; } .point-magasin { width: 14px; height: 14px; border-radius: 50%; background: var(--couleur); flex: none; } body main .consulter-form input[name=code] { border: 3px solid var(--couleur, #12203a); font-size: 26px; min-height: 64px; } /* En-têtes de tableaux (16/10/2026) : chaque tableau à en-tête a sa zone de défilement ; l'en-tête est collé en HAUT de la zone, fond opaque ; aucune ligne n'est recouverte (avant : top 65 px, faux dans un cadre qui défile) */ body.admin .contenu-page thead th { top: 0; } body.admin .contenu-page .zone-tableau thead th { background: #eef2f7; color: #1f2937; box-shadow: inset 0 -2px 0 #c5cfdc; } body.admin .contenu-page .tableau-comptes-zone, body.admin .contenu-page form.commande { overflow: visible; } @media (min-width: 601px) { .zone-tableau { overflow: auto; max-height: max(280px, calc(100vh - 230px)); margin: 0 0 12px; border-radius: 10px; } body.admin main.carte .zone-tableau > table { display: table; overflow: visible; max-width: none; width: 100%; margin: 0; } } /* Commandes : liste « Fournisseur » en haut de la proposition */ .choix-fournisseur { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .choix-fournisseur label { font-weight: 800; font-size: 16px; } .choix-fournisseur select { min-height: 44px; font: inherit; font-size: 16px; padding: 6px 10px; border: 2px solid #94a3b8; border-radius: 10px; background: #fff; color: var(--texte); } /* « Aller à… » replié (préférence ou page avec mot de passe) : loupe discrète ; petite fenêtre ouverte par la loupe ou Ctrl+K */ .barre-admin .aller-replie { flex: 1 1 0; display: flex; } .barre-admin .aller-bouton { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #d1d5db; border-radius: 10px; background: #f8fafc; color: #374151; } .barre-admin .lien-preferences { font-size: 14px; font-weight: 700; color: #1d4ed8; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; } dialog.fenetre-aller { border: 0; border-radius: 16px; padding: 18px; width: min(560px, 92vw); box-shadow: 0 20px 50px rgba(15, 23, 42, .3); } dialog.fenetre-aller form { display: flex; gap: 8px; align-items: center; } dialog.fenetre-aller input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; border: 2px solid #94a3b8; border-radius: 10px; } dialog.fenetre-aller::backdrop { background: rgba(15, 23, 42, .45); } /* Portail des employés (16/10/2026) : grandes tuiles moins hautes (180 -> 140 px ; texte 22 px et icône de 88 px inchangés, seul l'espace au-dessus et au-dessous diminue) ; chevauchement du bandeau ajusté ; tuile « consulter » = moitié (70 px) */ .portail-contenu .portail-liste .app { min-height: 140px; padding-top: 26px; padding-bottom: 26px; } .portail-bande { padding-bottom: 106px; } .portail-contenu { margin-top: -66px; } .portail-contenu .app.petite { min-height: 70px; padding-top: 8px; padding-bottom: 8px; } .portail-contenu .app.petite .icone { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; } @media (max-width: 760px) { .portail-bande { padding-bottom: 92px; } .portail-contenu { margin-top: -66px; } } body.admin .contenu-page .zone-tableau .tableau-comptes thead th { position: sticky; top: 0; z-index: 2; } body.admin .contenu-page .tableau-comptes td .petit-texte { white-space: nowrap; } body.admin .contenu-page .choix-fournisseur select { width: auto; min-width: 280px; max-width: 100%; } /* Magasin › Livraisons (15/10/2026) : livraison en cours, à transférer, boutons de l'administrateur (grisés avec la raison) */ .bloc-livraisons .ligne-livraison { margin: 4px 0; font-size: 16px; } .boutons-livraison { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 6px; align-items: flex-start; } .boutons-livraison form { margin: 0; } .bouton-grise { display: flex; flex-direction: column; gap: 4px; max-width: 360px; } .bouton-grise button[disabled] { opacity: 1; background: #e5e7eb; color: #4b5563; border-color: #cbd5e1; cursor: not-allowed; } /* Icônes dessinées à la place des symboles qui s'affichent parfois en emoji (⚠, ↩) — 15/10/2026 ; couleur = celle du texte */ .icone-alerte::before, .icone-annuler::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -0.17em; background-color: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; flex: none; } .icone-alerte { --icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l10%2018H2L12%203z'%2F%3E%3Cpath%20d%3D'M12%2010v5'%2F%3E%3Cpath%20d%3D'M12%2018h.01'%2F%3E%3C%2Fsvg%3E"); } .icone-annuler { --icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2014L4%209l5-5'%2F%3E%3Cpath%20d%3D'M4%209h10a6%206%200%200%201%200%2012h-3'%2F%3E%3C%2Fsvg%3E"); } /* Grande photo d'un article (16/10/2026) : fiche (300 px), consultation des employés (180 px) */ .photo-article { margin: 0; display: flex; flex-direction: column; gap: 8px; } .photo-article .photo-cadre { width: 300px; height: 300px; max-width: 100%; background: #f3f4f6; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .photo-article.moyenne .photo-cadre { width: 180px; height: 180px; border-radius: 12px; } .photo-article .photo-principale { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .photo-article .photo-vide { color: #4b5563; font-size: 16px; font-weight: 700; } .photo-article .photo-vignettes { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; } .photo-article .photo-choix { width: 48px; height: 48px; min-height: 48px; padding: 2px; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .photo-article .photo-choix.choisie { border-color: #1d4ed8; } .photo-article .photo-choix img { max-width: 100%; max-height: 100%; object-fit: contain; } .article.avec-photo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; } .article.avec-photo > .infos-article { min-width: 0; } @media (max-width: 760px) { .article.avec-photo { grid-template-columns: 1fr; } } /* Accueil : cartes des magasins (16/10/2026) — chaque information en petit bloc (libellé gris au-dessus, état en gras dessous), grille de 2 colonnes ; aucune valeur ne passe à la ligne ni ne déborde ; les 3 cartes ont la même hauteur, bouton en bas */ .cartes-magasins { align-items: stretch; } .carte-magasin .infos-magasin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 4px 0 8px; } .carte-magasin .info-magasin { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .carte-magasin .info-magasin .libelle { font-size: 13px; font-weight: 600; color: #4b5563; } .carte-magasin .info-magasin .valeur { font-size: 15px; font-weight: 800; color: #111827; line-height: 1.3; overflow-wrap: anywhere; } .carte-magasin .info-magasin .valeur.etat-ko { color: #991b1b; } /* largeur suffisante pour « En ligne · version 1.3.0 » ou « 193 articles · 252 pièces » sur une ligne : 2 cartes par rangée à 1280 px, 1 à 1024 px ; toutes les cartes de la même hauteur */ body.admin .cartes-magasins { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-auto-rows: 1fr; } body.admin .carte-magasin .info-magasin .valeur { white-space: nowrap; overflow-wrap: normal; } @media (max-width: 760px) { body.admin .cartes-magasins { grid-template-columns: 1fr; } body.admin .carte-magasin .info-magasin .valeur { white-space: normal; } } /* ===== Commandes : Comparateur de prix d'achat, Hausses et Baisses de prix (16/10/2026, maquettes « PC · Commandes ») ===== Chaque ligne = une rangée de grille : toutes les cellules centrées verticalement et de même hauteur ; titres et valeurs des colonnes chiffrées centrés ; Article et Fournisseur à gauche ; aucune colonne collante ; aucun défilement horizontal à 1280 px. */ .pastille-onglet { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.5; } .pastille-onglet.rouge { background: #fee2e2; color: #991b1b; } .pastille-onglet.vert { background: #dcfce7; color: #166534; } .pastille-onglet.gris { background: #e5e7eb; color: #374151; } /* barre d'onglets : jamais de barre de défilement (les onglets passent à la ligne s'il le faut) */ body.admin .page-admin .onglets, body.pleine-hauteur .page-admin .onglets { overflow: visible; flex-wrap: wrap; } .carte-filtres { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; } .barre-calcul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: #4b5563; } .barre-calcul strong { color: #111827; } .boutons-calcul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .boutons-calcul form { margin: 0; } .boutons-calcul .bouton-lien { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; } body.admin .contenu-page form.filtres-ligne { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 12px; margin: 0; max-width: none; } .filtres-ligne label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 700; color: #4b5563; min-width: 0; } body.admin .contenu-page .filtres-ligne select, body.admin .contenu-page .filtres-ligne input { height: 40px; min-height: 40px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 10px; background: #fff; width: 150px; } body.admin .contenu-page .filtres-ligne button { height: 40px; min-height: 40px; padding: 0 20px; flex: none; } .filtres-ligne .lien-regles, .filtres-ligne .resume-seuils { margin-left: auto; align-self: center; font-size: 13px; font-weight: 700; white-space: nowrap; } .filtres-ligne .resume-seuils { font-weight: 500; color: #4b5563; } @media (max-width: 1200px) { body.admin .contenu-page form.filtres-ligne { flex-wrap: wrap; } body.admin .contenu-page .filtres-ligne select, body.admin .contenu-page .filtres-ligne input { width: 130px; } } .grille { background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; } .grille-entete, .grille-ligne { display: grid; gap: 10px; padding: 10px 14px; align-items: center; } .grille-entete { background: #eef2f7; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #374151; text-transform: uppercase; } .grille-entete > span { white-space: nowrap; } .grille-ligne { border-top: 1px solid #e8ecf2; min-height: 56px; } .grille-ligne > .cellule { display: flex; align-items: center; min-width: 0; height: 100%; } .grille .centre { justify-content: center; text-align: center; font-variant-numeric: tabular-nums; } .grille .cellule.article { flex-direction: column; align-items: flex-start; justify-content: center; } .grille .cellule.article a { font-weight: 700; font-size: 15px; color: #111827; text-decoration: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grille .cellule.article a:hover { text-decoration: underline; } .grille .cellule.article .code { font-size: 13px; color: #4b5563; font-variant-numeric: tabular-nums; } .grille .cellule.photo .vignette { width: 44px; height: 44px; } .grille .gris { color: #4b5563; } .grille .vert { color: #166534; } .grille-vide { padding: 16px; margin: 0; } .grille-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #f8fafc; border-top: 1px solid #e8ecf2; font-size: 13px; color: #4b5563; } .grille-bas .pagination { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } .grille-bas .bouton-lien { min-height: 36px; padding: 0 12px; } .grille-bas .par-page { display: flex; align-items: center; gap: 6px; } .grille-bas .par-page strong { padding: 4px 9px; border-radius: 8px; background: #12203a; color: #fff; } .grille-bas .inactif-lien { color: #6b7280; border-color: #e5e7eb; cursor: default; } .petit-libelle { display: none; } /* Comparateur : photo | article | fournisseur actuel | offres | économie */ .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1.1fr) 150px minmax(290px, 2.2fr) 140px; } .grille-comparateur .cellule.actuel { font-size: 14px; } .grille-comparateur .nom-actuel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grille-comparateur .cellule.offres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .offre { display: flex; flex-direction: column; min-width: 118px; padding: 5px 9px; border: 2px solid #dde3ec; border-radius: 12px; background: #fff; } .offre .offre-etiquette { display: flex; align-items: center; gap: 4px; min-height: 15px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #374151; } .offre .offre-prix { font-size: 14px; font-weight: 800; color: #111827; white-space: nowrap; } .offre .offre-stock { font-size: 12px; color: #4b5563; } .offre.actuel { border-color: #12203a; } .offre.actuel .offre-etiquette { color: #12203a; } .offre.moins-cher { border-color: #15803d; background: #f0fdf4; } .offre.moins-cher .offre-etiquette { color: #166534; } .grille-comparateur .cellule.economie { font-size: 14px; } .grille-comparateur .cellule.economie strong { white-space: nowrap; } @media (max-width: 1100px) { .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1fr) 140px 130px; } .grille-comparateur .grille-entete > span:nth-child(4) { display: none; } .grille-comparateur .cellule.offres { grid-column: 2 / -1; grid-row: 2; } .grille-comparateur .cellule.economie { grid-column: 4; grid-row: 1; } } /* Hausses / baisses : photo | article | fournisseur | prix d'achat | écart | date | stock | ventes 30 j | marge */ .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(130px, 1fr) 88px 150px 152px 72px 50px 62px 68px; gap: 8px; } .grille-variations .cellule.fournisseur { font-size: 14px; font-weight: 600; } .grille-variations .cellule.fournisseur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grille-variations .prix-variation { gap: 4px; font-size: 14px; white-space: nowrap; } .grille-variations .fleche-prix { color: #4b5563; flex: none; } .pastille-ecart { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap; } .pastille-ecart.hausse { background: #fee2e2; color: #991b1b; } .pastille-ecart.baisse { background: #dcfce7; color: #166534; } .grille-variations .date, .grille-variations .stock, .grille-variations .ventes, .grille-variations .marge { font-size: 14px; white-space: nowrap; } .marge-faible { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #991b1b; white-space: nowrap; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(150px, 1fr) 88px 150px 152px 72px; } .grille-variations .grille-entete > .stock, .grille-variations .grille-entete > .ventes, .grille-variations .grille-entete > .marge { display: none; } .grille-variations .grille-ligne > .stock, .grille-variations .grille-ligne > .ventes, .grille-variations .grille-ligne > .marge { grid-row: 2; justify-content: flex-start; gap: 4px; font-size: 13px; height: auto; } .grille-variations .grille-ligne > .stock { grid-column: 2; } .grille-variations .grille-ligne > .ventes { grid-column: 3 / 5; } .grille-variations .grille-ligne > .marge { grid-column: 5 / 7; } .petit-libelle { display: inline; color: #4b5563; font-weight: 600; } .petit-libelle::after { content: " :"; } } /* Tableau des articles (16/10/2026) : plus aucune colonne collante (elles recouvraient la colonne suivante) ; la Désignation prend la place restante : aucun défilement horizontal à 1280 px */ body.admin .contenu-page .feuille-tableau .fixe0, body.admin .contenu-page .feuille-tableau .fixe1, body.admin .contenu-page .feuille-tableau .fixe2 { position: static; left: auto; border-right: 0; } body.admin .contenu-page table.feuille-tableau { width: 100%; min-width: 0; } .feuille-tableau col.c-designation { width: auto; } /* 16/10/2026 : corrections de la refonte : anciennes règles .article et .offre (fiche article, catalogues) neutralisées dans les grilles */ .grille .cellule.article { border-top: 0; padding-top: 0; margin-top: 0; } .grille .offre { position: static; min-height: 0; margin: 0; } .carte-magasin .info-magasin .detail { font-size: 13px; font-weight: 700; color: #991b1b; white-space: nowrap; } .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(130px, 1fr) 88px 140px 146px 70px 52px 84px 64px; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(150px, 1fr) 88px 150px 152px 72px; } } .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1.1fr) 150px minmax(290px, 2.2fr) 160px; } @media (max-width: 1100px) { .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1fr) 140px 160px; } } .grille-variations .grille-entete { letter-spacing: .02em; } .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(120px, 1fr) 84px 136px 146px 70px 56px 92px 66px; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(150px, 1fr) 88px 150px 152px 72px; } } /* moins de 1100 px : la date passe aussi sous l'article (Stock · Ventes 30 j · Marge · Date), aucune colonne coupée */ @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(140px, 1fr) 88px 140px 150px; } .grille-variations .grille-entete > .date { display: none; } .grille-variations .grille-ligne > .date { grid-row: 2; grid-column: 5; justify-content: flex-start; font-size: 13px; height: auto; } .grille-variations .grille-ligne > .stock { grid-column: 2; } .grille-variations .grille-ligne > .ventes { grid-column: 3 / 4; } .grille-variations .grille-ligne > .marge { grid-column: 4; } } /* (correction) moins de 1100 px : la date reste sur la 1re ligne, colonnes resserrées pour tenir dans la largeur */ @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(120px, 1fr) 80px 128px 140px 70px; } .grille-variations .grille-entete > .date { display: block; } .grille-variations .grille-ligne > .date { grid-row: 1; grid-column: 6; justify-content: center; font-size: 14px; height: 100%; } .grille-variations .grille-ligne > .date .petit-libelle { display: none; } .grille-variations .grille-ligne > .stock { grid-column: 2; } .grille-variations .grille-ligne > .ventes { grid-column: 3 / 5; } .grille-variations .grille-ligne > .marge { grid-column: 5 / 7; } } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(110px, 1fr) 96px 124px 136px 70px; } } /* Concorde Pro : deux sources côte à côte (lien, fichier) */ .deux-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .deux-sources > .bloc { margin: 0; } @media (max-width: 900px) { .deux-sources { grid-template-columns: 1fr; } } /* Accueil (décision du 15/10/2026) : les 3 cartes des magasins côte à côte sur UNE ligne (1280 et 1024 px), même largeur, même hauteur ; dans une carte, les informations empilées en UNE colonne (libellé gris 11 px au-dessus, état en gras 14 px dessous) ; une valeur trop longue se casse à un espace, jamais au milieu d'un mot, jamais hors de la carte ; une par ligne sous 900 px */ body.admin .cartes-magasins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; grid-auto-rows: 1fr; align-items: stretch; } body.admin .carte-magasin { min-width: 0; padding: 14px 16px; } body.admin .carte-magasin-haut { align-items: flex-start; row-gap: 4px; } body.admin .carte-magasin .magasin { font-size: 15px; letter-spacing: .06em; min-width: 0; overflow-wrap: normal; } .carte-magasin .infos-magasin { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 8px; } .carte-magasin .info-magasin .libelle { font-size: 11px; line-height: 1.25; } body.admin .carte-magasin .info-magasin .valeur { font-size: 14px; line-height: 1.25; white-space: normal; overflow-wrap: normal; word-break: normal; min-width: 0; } .carte-magasin .info-magasin .detail { font-size: 12px; white-space: normal; } @media (max-width: 900px) { body.admin .cartes-magasins { grid-template-columns: 1fr; grid-auto-rows: auto; } } /* ===== En-tête compact des pages refaites (15/10/2026 : Tableau des articles, proposition de commande) ===== fil d'Ariane très petit, titre et actions sur la même ligne, pas de description ; tout ce qui précède le tableau ≤ 200 px à 1280 x 720 */ body.admin main.page-admin.compact { padding-top: 12px; } body.admin main.page-admin.compact .fil { font-size: 12px; gap: 4px; } body.admin main.page-admin.compact .titre-page { margin: 2px 0 6px; gap: 6px 14px; min-height: 36px; } body.admin main.page-admin.compact .titre-page h1 { font-size: 22px; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.admin main.page-admin.compact .titre-page .magasin { font-size: 13px; padding: 4px 12px; } .page-admin .titre-page .actions-titre { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.admin main.page-admin.compact .onglets { margin-bottom: 8px; } body.admin main.page-admin.compact .onglets a { min-height: 38px; padding: 6px 14px; font-size: 15px; } .page-admin .actions-titre .bouton.petit { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } /* ===== Tableau des articles (maquette « PC · Articles, Tableau ») ===== */ body.admin .feuille-haut { padding: 8px 12px; } body.admin .contenu-page form.filtres-tableau { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 8px; margin: 0; max-width: none; } .filtres-tableau label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: #4b5563; margin: 0; min-width: 0; } body.admin .contenu-page .filtres-tableau select, body.admin .contenu-page .filtres-tableau input[type=search] { height: 38px; min-height: 38px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 10px; background: #fff; } body.admin .contenu-page .filtres-tableau select { width: 128px; } .filtres-tableau label.recherche { flex: 1 1 auto; min-width: 160px; } .filtres-tableau .champ-loupe { position: relative; display: block; } .filtres-tableau .champ-loupe .icone-svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #4b5563; pointer-events: none; } body.admin .contenu-page .filtres-tableau .champ-loupe input[type=search] { width: 100%; padding-left: 34px; } body.admin .contenu-page .filtres-tableau button, .filtres-tableau summary.bouton { height: 38px; min-height: 38px; padding: 0 14px; font-size: 14px; flex: none; display: inline-flex; align-items: center; gap: 6px; } .filtres-tableau .plus-filtres { position: relative; flex: none; } .filtres-tableau .plus-filtres summary { list-style: none; cursor: pointer; white-space: nowrap; } .filtres-tableau .plus-filtres summary::-webkit-details-marker { display: none; } .filtres-tableau .compteur-filtres { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #1d4ed8; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .filtres-tableau .panneau-filtres { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 270px; padding: 10px 14px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); display: flex; flex-direction: column; gap: 4px; } .filtres-tableau .panneau-filtres label.case { flex-direction: row; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 600; color: #111827; } .filtres-tableau .effacer-filtres { align-self: center; font-size: 13px; font-weight: 700; white-space: nowrap; } /* colonnes serrées, AUCUNE colonne collante ; toute la place restante va à « Article » */ body.admin .contenu-page table.feuille-articles { width: 100%; min-width: 0; table-layout: fixed; } .feuille-articles col.c-photo { width: 52px; } .feuille-articles col.c-article { width: auto; } .feuille-articles col.c-fournisseur { width: 96px; } .feuille-articles col.c-pa { width: 84px; } .feuille-articles col.c-pv { width: 88px; } .feuille-articles col.c-stock { width: 56px; } .feuille-articles col.c-statut { width: 78px; } .feuille-articles col.c-date { width: 84px; } body.admin .contenu-page .feuille-articles th, body.admin .contenu-page .feuille-articles td { height: 52px; padding: 0 4px; vertical-align: middle; } body.admin .contenu-page .feuille-articles th:first-child, body.admin .contenu-page .feuille-articles td:first-child { padding-left: 10px; } body.admin .contenu-page .feuille-articles thead th { height: 38px; font-size: 12px; letter-spacing: .02em; } .feuille-articles thead th a { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; line-height: 1.2; vertical-align: middle; } .feuille-articles thead th.centre a { justify-content: center; width: 100%; } .feuille-articles thead th a .icone-svg { flex: none; color: #1d4ed8; } .feuille-articles .centre { text-align: center; font-variant-numeric: tabular-nums; } .feuille-articles td.c-article { line-height: 1.25; } .feuille-articles td.c-article .lien-article { display: block; color: #111827; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feuille-articles td.c-article .lien-article:hover { text-decoration: underline; } .feuille-articles td.c-article .code { display: block; font-size: 12px; color: #4b5563; font-variant-numeric: tabular-nums; } .feuille-articles td.c-photo .vignette { width: 40px; height: 40px; } .pastille-statut { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; } .pastille-statut.actif { background: #dcfce7; color: #166534; } .pastille-statut.arrete { background: #e5e7eb; color: #374151; } body.admin .feuille-bas { padding: 6px 12px; font-size: 13px; } .feuille-bas .feuille-bas-droite { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; } .feuille-bas .feuille-bas-droite .pagination a, .feuille-bas .feuille-bas-droite .par-page a { min-height: 34px; } /* (corrections) champ de recherche à la même hauteur que les listes ; colonne photo sans « … » ; listes resserrées sous 1100 px */ body.admin main.page-admin .contenu-page .filtres-tableau input[type=search] { height: 38px; min-height: 38px; font-size: 14px; padding-top: 0; padding-bottom: 0; } body.admin main.page-admin .contenu-page .feuille-articles td.c-photo { text-overflow: clip; padding: 0 6px 0 10px; } .feuille-articles col.c-photo { width: 58px; } @media (max-width: 1100px) { body.admin main.page-admin .contenu-page .filtres-tableau select { width: 104px; padding: 0 6px; } .filtres-tableau label.recherche { min-width: 110px; } body.admin main.page-admin .contenu-page .filtres-tableau button, body.admin main.page-admin .filtres-tableau summary.bouton { padding: 0 10px; font-size: 13px; } } /* ===== Proposition de commande (maquette « PC · Commandes, Proposition », 15/10/2026) ===== */ .page-admin .titre-page .choix-fournisseur { display: inline-flex; margin: 0; } body.admin main.page-admin.compact .titre-page .choix-fournisseur select { height: 36px; min-height: 36px; padding: 0 30px 0 10px; font-size: 16px; font-weight: 700; border: 2px solid #cbd5e1; border-radius: 10px; width: auto; } .pastille-etat { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: #eef2f7; color: #374151; font-size: 12px; font-weight: 700; white-space: nowrap; } .feuille-commande .ligne-reglages { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; } body.admin .contenu-page .feuille-commande form.options-commande { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 8px; margin: 0; max-width: none; flex: none; } .options-commande label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: #4b5563; margin: 0; } body.admin main.page-admin .contenu-page .options-commande input, body.admin main.page-admin .contenu-page .options-commande select { height: 38px; min-height: 38px; padding: 0 8px; font: inherit; font-size: 14px; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 10px; background: #fff; } body.admin main.page-admin .contenu-page .options-commande input.date-courte { width: 108px; } body.admin main.page-admin .contenu-page .options-commande input.nombre-court { width: 64px; text-align: center; } body.admin main.page-admin .contenu-page .options-commande select { width: 228px; } body.admin main.page-admin .contenu-page .options-commande button { height: 38px; min-height: 38px; padding: 0 14px; font-size: 14px; } #optionsCommande[data-mode="ventes"] .seulement-couverture { display: none; } .liens-commande { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin-left: auto; padding-bottom: 8px; justify-content: flex-end; } .panneau-lien { position: relative; } .panneau-lien > summary { list-style: none; cursor: pointer; color: #1d4ed8; font-size: 13px; font-weight: 700; text-decoration: underline; white-space: nowrap; } .panneau-lien > summary::-webkit-details-marker { display: none; } .panneau-lien .panneau-flottant { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 420px; max-width: 70vw; padding: 12px 16px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); font-size: 14px; line-height: 1.45; } .panneau-lien .panneau-flottant p { margin: 0 0 8px; } .feuille-commande .alerte-commande { margin: 6px 0 0; padding: 6px 10px; font-size: 13px; } .feuille-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; } body.admin .contenu-page .feuille-corps { max-width: none; } /* tableau : colonnes de la maquette, AUCUNE colonne collante ; cellules centrées verticalement, chiffres centrés */ body.admin .contenu-page table.table-commande { width: 100%; min-width: 0; table-layout: fixed; } .table-commande col.c-action { width: 136px; } .table-commande col.c-photo { width: 52px; } .table-commande col.c-article { width: auto; } .table-commande col.c-vendu { width: 60px; } .table-commande col.c-stock { width: 58px; } .table-commande col.c-chez { width: 128px; } .table-commande col.c-prix { width: 80px; } .table-commande col.c-qte { width: 112px; } .table-commande col.c-total { width: 88px; } body.admin .contenu-page .table-commande th, body.admin .contenu-page .table-commande td { height: 56px; padding: 4px 4px; vertical-align: middle; white-space: normal; overflow: visible; text-overflow: clip; } body.admin .contenu-page .table-commande th:first-child, body.admin .contenu-page .table-commande td:first-child { padding-left: 10px; } body.admin .contenu-page .table-commande thead th { height: 38px; font-size: 12px; white-space: nowrap; } .table-commande .centre { text-align: center; font-variant-numeric: tabular-nums; } .table-commande td.c-article { line-height: 1.25; overflow: hidden; } .table-commande td.c-article .nom-article { display: block; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-commande td .code { display: block; font-size: 12px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-commande .moins-cher-ligne { display: block; font-size: 12px; } .table-commande .dispo-sous { display: none; font-size: 12px; } .table-commande .dispo { font-weight: 700; } .table-commande .dispo-ok { color: #166534; } .table-commande .dispo-juste, .table-commande .dispo-bas { color: #9a3412; } .table-commande .dispo-rupture { color: #991b1b; } .table-commande .dispo-inconnu { color: #4b5563; font-weight: 600; } body.admin main.page-admin .contenu-page .table-commande select.action-ligne { width: 124px; height: 34px; min-height: 34px; padding: 0 22px 0 6px; font-size: 13px; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 8px; background-color: #fff; } body.admin main.page-admin .contenu-page .table-commande select.choix-autre { display: none; width: 124px; height: 30px; min-height: 30px; margin-top: 3px; padding: 0 22px 0 6px; font-size: 12px; border: 2px solid #1d4ed8; border-radius: 8px; } .table-commande tr:has(select.action-ligne option[value="autre"]:checked) select.choix-autre { display: block; } .table-commande .qte-petite { display: inline-flex; align-items: center; gap: 3px; } body.admin main.page-admin .contenu-page .table-commande .qte-petite button.pas-petit { width: 28px; height: 28px; min-height: 28px; min-width: 28px; padding: 0; font-size: 16px; line-height: 1; border-radius: 7px; } body.admin main.page-admin .contenu-page .table-commande .qte-petite input.quantite { width: 42px; height: 30px; min-height: 30px; padding: 0 2px; text-align: center; font-size: 14px; font-weight: 700; border: 2px solid #cbd5e1; border-radius: 7px; } /* lignes qui ne sont pas « Commander » : fond ambre très pâle ET libellé écrit dans la liste ; Total « — » */ body.admin .contenu-page .table-commande tbody tr.decoche td { background: #fffbeb; } /* barre du bas collée, toujours visible */ body.admin .barre-commande { justify-content: space-between; padding: 8px 14px; gap: 8px 16px; } .barre-commande .total-commande { margin: 0; font-size: 15px; } .barre-commande .total-commande strong { font-size: 17px; } .barre-commande .boutons-ligne { display: flex; gap: 10px; margin: 0; } body.admin .barre-commande .boutons-ligne button { min-height: 40px; height: 40px; padding: 0 18px; font-size: 15px; } @media (max-width: 1100px) { .table-commande col.c-chez { width: 0; } .table-commande th.c-chez, .table-commande td.c-chez { display: none; } .table-commande .dispo-sous { display: block; } body.admin main.page-admin .contenu-page .options-commande select { width: 190px; } body.admin main.page-admin .contenu-page .options-commande input.date-courte { width: 100px; } } /* (sélecteurs par identifiant : plus forts que les règles générales des champs de la carte) */ #filtresTableau input[type=search], #filtresTableau select, #optionsCommande input, #optionsCommande select { height: 38px; min-height: 38px; font-size: 14px; font-weight: 600; padding-top: 0; padding-bottom: 0; } #filtresTableau input[type=search] { padding-left: 34px; padding-right: 10px; } #optionsCommande input, #optionsCommande select { padding-left: 8px; padding-right: 8px; } #optionsCommande select { padding-right: 28px; } #commande select.action-ligne { width: 124px; height: 34px; min-height: 34px; padding: 0 22px 0 6px; font-size: 13px; font-weight: 600; } #commande select.choix-autre { width: 124px; font-size: 12px; } #commande .qte-petite input.quantite { width: 42px; height: 30px; min-height: 30px; padding: 0 2px; font-size: 14px; } /* la flèche native de la liste prend déjà sa place : pas de marge à droite en plus (sinon « Commander » est coupé) */ #commande select.action-ligne, #commande select.choix-autre { padding: 0 2px 0 6px; } #optionsCommande select { padding-right: 4px; } /* listes à la largeur de leur texte le plus long (contrôle « liste qui coupe son texte ») ; sous 1100 px, la ligne passe à la ligne */ #filtresTableau select[name=magasin], #optionsCommande select[name=mode] { width: auto; } @media (max-width: 1100px) { body.admin .contenu-page form.filtres-tableau { flex-wrap: wrap; } .feuille-commande .ligne-reglages { flex-wrap: wrap; } .liens-commande { margin-left: 0; padding-bottom: 0; justify-content: flex-start; } } /* alertes de la proposition (plafond, panier minimum, prix non communiqués) : dans la barre du bas, près du total */ .barre-commande .alerte-bas { display: block; margin-top: 2px; color: #991b1b; font-size: 13px; font-weight: 700; } /* « Autre fournisseur » (libellé le plus long) tient entier dans la liste fermée */ #commande select.action-ligne, #commande select.choix-autre { width: 138px; } .table-commande col.c-action { width: 150px; } /* (correction) sous 1100 px : la colonne « Chez … » est repliée (visibility: collapse) sans décaler les autres colonnes ; son état est écrit sous l'article */ @media (max-width: 1100px) { .table-commande col.c-chez { width: 0; visibility: collapse; } .table-commande th.c-chez, .table-commande td.c-chez { display: table-cell; visibility: collapse; padding: 0; font-size: 0; } .table-commande col.c-vendu { width: 52px; } .table-commande col.c-stock { width: 52px; } .table-commande col.c-prix { width: 72px; } .table-commande col.c-qte { width: 106px; } .table-commande col.c-total { width: 80px; } .table-commande col.c-photo { width: 48px; } } .barre-commande #avertissementTotal { display: block; font-size: 13px; font-weight: 700; } .barre-commande #avertissementTotal.cache { display: none; } .barre-commande .alerte-bas.cache { display: none; } #commande select.action-ligne, #commande select.choix-autre { width: 148px; } .table-commande col.c-action { width: 160px; } body.admin .barre-commande { flex-wrap: nowrap; align-items: center; } .barre-commande .total-commande { flex: 1 1 auto; min-width: 0; } .barre-commande .boutons-ligne { flex: none; } @media (max-width: 1100px) { .barre-commande .total-commande { font-size: 14px; } body.admin .barre-commande .boutons-ligne button { padding: 0 12px; font-size: 14px; } } /* agent 1.4.0 : redémarrage de la caisse demandé (orange foncé : contraste 7:1 sur blanc ; icône ET mots) */ .etat-attention, .carte-magasin .info-magasin .valeur.etat-attention { color: #9a3412; font-weight: 800; } .gros-etat { font-size: 18px; } /* ===== 15/10/2026 : Comparateur (sans colonne « Fournisseur actuel ») ; offres : actuel d'abord, puis la moins chère ===== */ .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 52px minmax(180px, 1.3fr) minmax(280px, 2.8fr) 130px; } @media (max-width: 1100px) { .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1fr) minmax(250px, 2fr) 120px; } .grille-comparateur .grille-entete > span:nth-child(3) { display: inline; } .grille-comparateur .cellule.offres { grid-column: auto; grid-row: auto; } .grille-comparateur .cellule.economie { grid-column: auto; grid-row: auto; } } .grille-comparateur .grille-entete > span:nth-child(3) { white-space: normal; } .offre.offre-actuel-moins-cher, .offre.offre-moins-cher { border-color: #15803d; background: #f0fdf4; } .offre.offre-actuel-moins-cher .offre-etiquette, .offre.offre-moins-cher .offre-etiquette { color: #15803d; } .offre.offre-actuel-plus-cher { border-color: #f87171; background: #fee2e2; } .offre.offre-actuel-plus-cher .offre-etiquette { color: #991b1b; } .offre.offre-actuel-plus-cher .offre-prix, .offre.offre-actuel-plus-cher .offre-stock { color: #14202b; } .offre.offre-autre { border-color: #dde3ec; background: #fff; } .economie-texte { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; } /* ===== Hausses / Baisses : Prix de vente et Action ; date sous le fournisseur ; article pas en vente : « — » et pastille ===== */ .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(110px, 1fr) 76px 124px 132px 44px 52px 56px 72px 104px; gap: 6px; } .grille-variations .grille-entete > .stock, .grille-variations .grille-entete > .ventes, .grille-variations .grille-entete > .marge, .grille-variations .grille-entete > .pv { white-space: normal; line-height: 1.15; text-align: center; } .grille-variations .cellule.fournisseur { flex-direction: column; align-items: flex-start; justify-content: center; white-space: normal; } .grille-variations .cellule.fournisseur .nom-fournisseur { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .grille-variations .cellule.fournisseur .code { font-size: 12px; color: #4b5563; font-weight: 500; } .grille-variations .pv { font-size: 14px; white-space: nowrap; } .grille-variations .action .bouton-action { min-height: 34px; padding: 0 10px; font-size: 13px; white-space: nowrap; } .grille-variations .pastille-ecart { font-size: 12px; padding: 4px 7px; } .grille-variations .prix-variation { font-size: 13px; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(110px, 1fr) 80px 124px 132px 104px; } .grille-variations .grille-entete > .pv { display: none; } .grille-variations .grille-ligne > .pv { grid-row: 2; grid-column: 5 / 7; justify-content: flex-start; gap: 4px; font-size: 13px; height: auto; } .grille-variations .grille-ligne > .stock { grid-column: 2; } .grille-variations .grille-ligne > .ventes { grid-column: 3 / 4; } .grille-variations .grille-ligne > .marge { grid-column: 4 / 5; } } /* ===== Fiche de l'article (catalogue et article vendu), 15/10/2026 ===== */ .photo-article.catalogue .photo-cadre { width: 240px; height: 240px; border-radius: 18px; } .photo-article.catalogue .photo-vignettes { max-width: 240px; } .entete-fiche { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 6px 0 14px; } .entete-fiche-texte { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .entete-fiche-texte h1 { margin: 0; font-size: 26px; line-height: 1.2; } .sous-titre-fiche { margin: 0; font-size: 15px; font-weight: 600; color: #4b5563; } .pastilles-fiche { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .carte-fiche { background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; margin: 0 0 14px; } .carte-fiche > h2 { margin: 0; padding: 10px 14px; font-size: 15px; font-weight: 800; } .carte-fiche .grille { border: 0; border-radius: 0; border-top: 1px solid #e8ecf2; } .grille-fiche-offres .grille-entete, .grille-fiche-offres .grille-ligne { grid-template-columns: minmax(110px, 1fr) 100px 100px 150px 100px 110px 84px; gap: 8px; } .grille-fiche-offres .grille-entete > span { white-space: normal; } .liste-historique .ligne-historique { display: grid; grid-template-columns: 90px 110px 1fr 150px; gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid #e8ecf2; font-size: 14px; } .ligne-magasin-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-top: 1px solid #e8ecf2; font-size: 14px; } .ligne-magasin-fiche .magasin { min-width: 160px; font-size: 13px; } .ligne-magasin-fiche .infos-vente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .ligne-magasin-fiche .bouton-action { min-height: 34px; padding: 0 12px; font-size: 13px; } .pas-en-vente-texte { font-weight: 600; } /* ===== Catalogues › page d'un fournisseur › onglet « Catalogue » (15/10/2026) ===== */ body.admin .contenu-page table.feuille-catalogue { width: 100%; min-width: 0; table-layout: fixed; } .feuille-catalogue col.c-photo { width: 58px; } .feuille-catalogue col.c-article { width: auto; } .feuille-catalogue col.c-pa { width: 112px; } .feuille-catalogue col.c-pc { width: 104px; } .feuille-catalogue col.c-stock { width: 104px; } .feuille-catalogue col.c-chez { width: 112px; } .feuille-catalogue col.c-etat { width: 84px; } body.admin .contenu-page .feuille-catalogue th, body.admin .contenu-page .feuille-catalogue td { height: 52px; padding: 0 4px; vertical-align: middle; } body.admin .contenu-page .feuille-catalogue th:first-child, body.admin .contenu-page .feuille-catalogue td:first-child { padding-left: 10px; text-overflow: clip; } body.admin .contenu-page .feuille-catalogue thead th { height: 38px; font-size: 12px; } .feuille-catalogue thead th a { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; } .feuille-catalogue thead th.centre a { justify-content: center; width: 100%; } .feuille-catalogue .centre { text-align: center; font-variant-numeric: tabular-nums; } .feuille-catalogue td.c-article { line-height: 1.25; } .feuille-catalogue td.c-article .lien-article { display: block; color: #111827; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feuille-catalogue td.c-article .lien-article:hover { text-decoration: underline; } .feuille-catalogue td.c-article .code { display: block; font-size: 12px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #filtresCatalogue input[type=search], #filtresCatalogue select { height: 38px; min-height: 38px; font-size: 14px; font-weight: 600; padding-top: 0; padding-bottom: 0; } #filtresCatalogue input[type=search] { padding-left: 34px; } #filtresCatalogue select { width: auto; } .page-admin .titre-page .pastille-etat + .pastille-etat { margin-left: -12px; } /* « Déplacer vers » (15/10/2026) : fournisseur en rupture en gris, toujours choisissable */ #commande select.action-ligne option.option-rupture { color: #6b7280; } #commande select.action-ligne optgroup { font-style: normal; font-weight: 700; color: #334155; } /* fiche de l'article, écran de 1024 px : colonnes plus étroites, écart sur deux lignes si besoin */ @media (max-width: 1199px) { .grille-fiche-offres .grille-entete, .grille-fiche-offres .grille-ligne { grid-template-columns: minmax(84px, 1fr) 76px 76px 112px 76px 88px 72px; gap: 6px; font-size: 13px; } .grille-fiche-offres .pastille-ecart { white-space: normal; text-align: center; line-height: 1.25; padding: 3px 8px; } } /* Hausses / Baisses (15/10/2026) : en-têtes lisibles (Stock, Ventes 30 j, Fournisseur), liste « Articles » assez large */ .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(132px, 1fr) 88px 112px 118px 54px 62px 56px 72px 104px; gap: 6px; } .grille-variations .grille-entete > span { word-break: normal; overflow-wrap: normal; hyphens: none; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(110px, 1fr) 92px 118px 124px 104px; } } form select[name="articles"] { min-width: 200px; } .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 52px minmax(180px, 1.3fr) minmax(280px, 2.8fr) 152px; } @media (max-width: 1100px) { .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1fr) minmax(250px, 2fr) 140px; } } .grille-comparateur .grille-entete > span:last-child { white-space: normal; text-align: center; } .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(120px, 1fr) 84px 108px 112px 52px 58px 54px 70px 100px; gap: 5px; } @media (max-width: 1100px) { .grille-variations .grille-entete, .grille-variations .grille-ligne { grid-template-columns: 44px minmax(110px, 1fr) 92px 118px 124px 104px; } } /* ===== 15/10/2026 : contrôle des prix d’achat, panier « Ajouter à la commande », catalogue par magasin ===== */ .pastille-statut.erreur { background: #fee2e2; color: #991b1b; } .pastille-statut.neutre { background: #e0e7ff; color: #1e3a8a; } .pastilles-progression { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; } .pastilles-progression .pastille-statut { font-size: 13px; padding: 4px 10px; } .icone-bouton { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; cursor: pointer; vertical-align: middle; } .icone-bouton:hover { background: #f1f5f9; } .icone-bouton.copie { background: #dcfce7; border-color: #16a34a; color: #166534; } .bouton-copier { min-width: 26px; min-height: 24px; padding: 0 4px; margin-left: 4px; } /* tableau du tirage */ body.admin .contenu-page table.feuille-controle { width: 100%; min-width: 0; table-layout: fixed; } .feuille-controle col.c-photo { width: 58px; } .feuille-controle col.c-article { width: auto; } .feuille-controle col.c-prix { width: 190px; } .feuille-controle col.c-controle { width: 350px; } .feuille-controle col.c-autre { width: 48px; } body.admin .contenu-page .feuille-controle td { vertical-align: middle; padding: 6px 6px; height: 64px; } .feuille-controle td.c-article .lien-article, .feuille-corriger td.c-article .lien-article { display: block; font-weight: 700; color: #111827; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feuille-controle .code, .feuille-corriger .code, .feuille-controle-unite .code { display: block; font-size: 12px; color: #4b5563; } .feuille-controle tr.verifie.ok td { background: #f0fdf4; } .feuille-controle tr.verifie.pas_ok td { background: #fef2f2; } .feuille-controle tr.verifie.introuvable td { background: #f8fafc; } .prix-communique { font-size: 15px; } .controle-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .groupe-controle { display: inline-flex; gap: 4px; } .bouton-controle { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 2px solid #cbd5e1; border-radius: 8px; background: #fff; color: #1f2937; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .bouton-controle.ok[aria-pressed="true"] { background: #15803d; border-color: #15803d; color: #fff; } .bouton-controle.pas_ok[aria-pressed="true"] { background: #fee2e2; border-color: #dc2626; color: #991b1b; } .bouton-controle.introuvable[aria-pressed="true"] { background: #4b5563; border-color: #4b5563; color: #fff; } .bouton-controle.ok { color: #166534; } .bouton-controle.pas_ok { color: #b91c1c; } .controle-ligne .prix-vu { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; } .controle-ligne .prix-vu input { width: 72px; min-height: 32px; padding: 0 6px; font: inherit; font-size: 14px; border: 2px solid #dc2626; border-radius: 6px; } .controle-ligne .note-controle input { width: 180px; min-height: 32px; padding: 0 6px; font: inherit; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 6px; } .controle-ligne .enregistre { font-size: 12px; color: #166534; font-weight: 700; white-space: nowrap; } .controle-ligne .enregistre.rouge { color: #b91c1c; } @media (max-width: 1100px) { .feuille-controle col.c-prix { width: 150px; } .feuille-controle col.c-controle { width: 300px; } .feuille-controle col.c-autre { width: 44px; } .bouton-controle { padding: 0 7px; font-size: 12px; } } .feuille-corriger td, .feuille-controle-unite td { vertical-align: middle; } body.admin .contenu-page table.feuille-corriger { width: 100%; min-width: 0; table-layout: auto; font-size: 13px; } .feuille-corriger td.c-article { max-width: 260px; } .feuille-corriger td form { margin-top: 4px; } /* catalogue d’un fournisseur : colonnes collées à l’article, l’espace restant à la fin */ .feuille-catalogue col.c-photo { width: 58px; } .feuille-catalogue col.c-article { width: 300px; } .feuille-catalogue col.c-pa { width: 84px; } .feuille-catalogue col.c-pc { width: 84px; } .feuille-catalogue col.c-stock { width: 64px; } .feuille-catalogue col.c-chez { width: 196px; } .feuille-catalogue col.c-etat { width: 66px; } .feuille-catalogue col.c-commander { width: 104px; } .feuille-catalogue col.c-reste { width: auto; } body.admin .contenu-page .feuille-catalogue th, body.admin .contenu-page .feuille-catalogue td { height: auto; min-height: 52px; padding: 6px 4px; } body.admin .contenu-page .feuille-catalogue tbody td { height: 52px; } body.admin .contenu-page .feuille-catalogue thead th { white-space: normal; line-height: 1.15; } .feuille-catalogue td.c-chez { text-align: left; } .pastilles-magasins { display: flex; flex-wrap: wrap; gap: 4px; } .pastille-magasin { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; } .pastille-magasin .magasin { font-size: 11px; letter-spacing: .04em; gap: 5px; font-weight: 800; } .pastille-magasin .magasin::before { width: 8px; height: 8px; } @media (max-width: 1200px) { .feuille-catalogue col.c-article { width: 210px; } .feuille-catalogue col.c-pa, .feuille-catalogue col.c-pc { width: 74px; } .feuille-catalogue col.c-stock { width: 56px; } .feuille-catalogue col.c-chez { width: 132px; } .feuille-catalogue col.c-etat { width: 62px; } .feuille-catalogue col.c-commander { width: 52px; } .feuille-catalogue col.c-photo { width: 50px; } .feuille-catalogue .bouton-panier span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .feuille-catalogue .bouton-panier { padding: 0 8px; } } /* Article jamais plus large que 420 px (comparateur) */ .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 52px minmax(180px, 420px) minmax(280px, 1fr) 152px; } @media (max-width: 1100px) { .grille-comparateur .grille-entete, .grille-comparateur .grille-ligne { grid-template-columns: 48px minmax(150px, 1fr) minmax(250px, 2fr) 140px; } } /* bouton « Ajouter » (panier), mention « Dans la commande », résumé du panier, panneau */ .bouton-panier { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 10px; border: 2px solid #15803d; border-radius: 8px; background: #fff; color: #166534; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; position: relative; } .bouton-panier:hover { background: #f0fdf4; } .bouton-panier.petit { height: 26px; padding: 0 7px; font-size: 12px; border-width: 1px; gap: 3px; } .bouton-panier:disabled { border-color: #cbd5e1; color: #6b7280; background: #f8fafc; cursor: not-allowed; } .mention-panier { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #166534; } .mention-panier.cache { display: none; } .resume-panier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 13px; color: #1f2937; } .resume-panier a { color: #1d4ed8; } .offre .bouton-panier { margin-top: 4px; align-self: flex-start; } .pastille-manuel { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #dbeafe; color: #1e3a8a; font-size: 11px; font-weight: 800; } dialog.panneau-panier { max-width: 460px; } .panneau-panier h2 { margin: 0 0 8px; font-size: 20px; } .panneau-panier .panier-article { font-size: 15px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 2px; } .panneau-panier .choix-magasins { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; } .panneau-panier .choix-magasins legend { font-weight: 700; font-size: 13px; margin-bottom: 4px; } .panneau-panier .choix-magasin { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 2px solid #e2e8f0; border-radius: 10px; cursor: pointer; } .panneau-panier .choix-magasin:has(input:checked) { border-color: var(--couleur); background: var(--pale, #f8fafc); } .panneau-panier .choix-magasin .magasin { font-size: 14px; } .panneau-panier .quantite-panier { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 10px; } .panneau-panier .quantite-panier input { width: 64px; text-align: center; min-height: 36px; font: inherit; } .panneau-panier .info-panier { font-size: 14px; color: #334155; margin: 0 0 10px; min-height: 20px; } .panneau-panier .boutons-form { display: flex; justify-content: flex-end; gap: 8px; } .grille-fiche-offres.avec-panier .grille-entete, .grille-fiche-offres.avec-panier .grille-ligne { grid-template-columns: minmax(100px, 1fr) 92px 92px 140px 92px 104px 80px 92px; } @media (max-width: 1199px) { .grille-fiche-offres.avec-panier .grille-entete, .grille-fiche-offres.avec-panier .grille-ligne { grid-template-columns: minmax(76px, 1fr) 70px 70px 104px 70px 80px 66px 76px; gap: 5px; font-size: 12px; } } #reglagesTirage select[name="parmi"] { min-width: 250px; } #reglagesTirage select[name="f"] { min-width: 150px; } body.admin .contenu-page table.tableau-historique { table-layout: auto; width: 100%; min-width: 0; } body.admin .contenu-page table.tableau-historique th { white-space: normal; } body.admin .contenu-page table.feuille-controle-unite { table-layout: auto; width: 100%; min-width: 0; } /* 15/10/2026 : ajustements (boutons compacts dans les tableaux, panneau du panier) */ body.admin .contenu-page .feuille-controle .bouton-controle, body.admin .contenu-page .feuille-controle-unite .bouton-controle { min-height: 34px; height: 34px; padding: 0 8px; font-size: 13px; border-width: 2px; } body.admin .contenu-page .icone-bouton { min-height: 30px; height: 30px; min-width: 30px; padding: 0 5px; } body.admin .contenu-page .bouton-copier { min-height: 22px; height: 22px; min-width: 24px; padding: 0 3px; } body.admin .contenu-page .controle-ligne .prix-vu, body.admin .contenu-page .controle-ligne .note-controle { flex-direction: row; display: inline-flex; margin: 0; } body.admin .contenu-page .controle-ligne .prix-vu.cache, body.admin .contenu-page .controle-ligne .note-controle.cache { display: none; } body.admin .contenu-page .controle-ligne .prix-vu input, body.admin .contenu-page .controle-ligne .note-controle input { min-height: 30px; height: 30px; } .feuille-controle col.c-controle { width: 380px; } @media (max-width: 1100px) { .feuille-controle col.c-controle { width: 318px; } .feuille-controle col.c-prix { width: 140px; } body.admin .contenu-page .feuille-controle .bouton-controle { padding: 0 6px; font-size: 12px; } } #reglagesTirage label.case { flex-direction: row; align-items: center; gap: 6px; max-width: 220px; font-size: 13px; } #reglagesTirage label.case input { width: 20px; height: 20px; min-height: 0; flex: none; } body.admin .contenu-page .feuille-catalogue .bouton-panier { height: 34px; min-height: 34px; } body.admin .contenu-page .bouton-panier.petit { height: 26px; min-height: 26px; } @media (max-width: 1200px) { .feuille-catalogue col.c-commander { width: 66px; } .feuille-catalogue col.c-chez { width: 124px; } body.admin .contenu-page .feuille-catalogue th.c-commander { font-size: 11px; word-break: keep-all; } } dialog.panneau-panier .choix-magasin { flex-direction: row; justify-content: flex-start; text-align: left; margin: 0; } dialog.panneau-panier .choix-magasin input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--couleur); } dialog.panneau-panier .quantite-panier { flex-direction: row; justify-content: flex-start; text-align: left; } dialog.panneau-panier .qte-petite button { min-height: 36px; min-width: 36px; padding: 0; } dialog.panneau-panier .panier-article { text-align: left; } dialog.panneau-panier label.case { flex-direction: row; align-items: center; gap: 8px; text-align: left; } dialog.panneau-panier label.case input { width: 20px; height: 20px; min-height: 0; flex: none; } dialog.panneau-panier .info-panier { text-align: left; font-size: 14px; } body.admin .contenu-page .feuille-catalogue .bouton-panier { padding: 0 8px; font-size: 12px; max-width: 96px; } @media (max-width: 1199px) { .grille-fiche-offres.avec-panier .grille-entete, .grille-fiche-offres.avec-panier .grille-ligne { grid-template-columns: minmax(70px, 1fr) 64px 64px 96px 64px 72px 60px 44px; gap: 4px; } .grille-fiche-offres.avec-panier .bouton-panier span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .diagnostic-fermeture { margin: 8px 0; } .diagnostic-fermeture pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; max-height: 260px; overflow: auto; } /* Administration › Agent : dépôt de la version (programme + signature) par glisser-déposer (15/10/2026) */ .depot-agent .zone-depot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:16px;border:2px dashed #9ca3af;border-radius:12px;background:#f9fafb;text-align:center;cursor:pointer;} .depot-agent .zone-depot.survol{border-color:#1d4ed8;background:#eff6ff;} .depot-agent .depot-texte,.depot-agent .depot-message{grid-column:1/-1;margin:0;} /* Fenêtre « Changer le prix » : étiquettes par magasin (15/10/2026) */ .etiquettes-prix{border:1px solid #d1d5db;border-radius:10px;padding:10px 14px;margin:0;display:grid;gap:8px;} .etiquettes-prix .ligne-magasin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .etiquettes-prix .magasin-nom{min-width:150px;font-weight:600;} .etiquettes-prix input.nb-etiquettes{width:80px;min-height:44px;text-align:center;} .etiquettes-prix .total-etiquettes{margin:4px 0 0;} /* Panneau « Ajouter à la commande » redessiné (15/10/2026) : une ligne par magasin, quantité par magasin */ dialog.panneau-panier { max-width: 560px; width: calc(100vw - 32px); } .panneau-panier .choix-fournisseur { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; margin: 0 0 12px; } .panneau-panier .choix-fournisseur select { min-height: 44px; font: inherit; font-weight: 400; } .panneau-panier .choix-fournisseur.cache { display: none; } .panneau-panier .lignes-magasins { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; } .panneau-panier .lignes-magasins legend { font-weight: 700; font-size: 13px; margin-bottom: 4px; } .panneau-panier .ligne-magasin-panier { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "case qte" "infos infos"; align-items: center; gap: 2px 10px; min-height: 52px; padding: 6px 10px; border: 2px solid #e2e8f0; border-radius: 10px; } .panneau-panier .ligne-magasin-panier.cochee { border-color: var(--couleur); background: var(--pale, #f8fafc); } .panneau-panier .case-magasin { grid-area: case; display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-weight: 700; font-size: 14px; letter-spacing: .03em; } .panneau-panier .case-magasin input { width: 20px; height: 20px; } .panneau-panier .ligne-magasin-panier .qte-petite { grid-area: qte; } .panneau-panier .ligne-magasin-panier .qte-petite input { width: 60px; text-align: center; min-height: 36px; font: inherit; } .panneau-panier .ligne-magasin-panier .qte-petite input:disabled { background: #f1f5f9; color: #6b7280; } .panneau-panier .infos-magasin-panier { grid-area: infos; color: #475569; } .panneau-panier .recap-panier { font-size: 14px; color: #334155; margin: 0 0 10px; min-height: 20px; } .panneau-panier .recap-panier p { margin: 2px 0; } .panneau-panier .recap-panier .total-panier { font-weight: 800; color: #111827; } /* Tableau des articles, refonte du 15/10/2026 : 3 magasins ensemble, colonne Article limitée, colonnes collées à l'article */ body.admin .contenu-page table.feuille-articles-3 { width: auto; min-width: 0; table-layout: fixed; } .feuille-articles-3 col.c-photo { width: 52px; } .feuille-articles-3 col.c-article { width: 260px; } .feuille-articles-3 col.c-fournisseur { width: 84px; } .feuille-articles-3 col.c-pa { width: 74px; } .feuille-articles-3 col.c-pv { width: 74px; } .feuille-articles-3 col.c-stock { width: 60px; } .feuille-articles-3 col.c-statut { width: 66px; } .feuille-articles-3 col.c-date { width: 64px; } .feuille-articles-3 col.c-commander { width: 50px; } body.admin .contenu-page .feuille-articles-3 thead th { white-space: normal; } body.admin .contenu-page .feuille-articles-3 thead th.c-stock a { font-size: 10px; letter-spacing: 0; line-height: 1.15; justify-content: center; text-align: center; white-space: normal; } .feuille-articles-3 td.c-article .article-ligne { display: flex; align-items: center; gap: 4px; min-width: 0; } .feuille-articles-3 td.c-article .texte-article { min-width: 0; flex: 1; } .feuille-articles-3 button.deplier { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; cursor: pointer; } .feuille-articles-3 button.deplier .icone-svg { transform: rotate(180deg); transition: transform .15s; } .feuille-articles-3 button.deplier[aria-expanded="true"] .icone-svg { transform: rotate(270deg); } .feuille-articles-3 td.c-fournisseur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feuille-articles-3 .stock-zero { color: #991b1b; font-weight: 800; } .feuille-articles-3 .sans-fiche { color: #6b7280; } .feuille-articles-3 td.c-statut .pastille-statut { font-size: 11px; padding: 2px 6px; } .feuille-articles-3 tr.detail-magasins td { height: auto; padding: 6px 4px 10px; background: #f8fafc; white-space: normal; } .feuille-articles-3 .detail-par-magasin { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; } .feuille-articles-3 .detail-par-magasin li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .feuille-articles-3 td.c-commander .bouton-panier span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .feuille-articles-3 td.c-commander .bouton-panier { padding: 0 8px; } @media (min-width: 1401px) { .feuille-articles-3 col.c-commander { width: 96px; } .feuille-articles-3 td.c-commander .bouton-panier span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } @media (max-width: 1100px) { .feuille-articles-3 col.c-photo { width: 48px; } .feuille-articles-3 col.c-article { width: 200px; } .feuille-articles-3 col.c-fournisseur { width: 66px; } .feuille-articles-3 col.c-pa { width: 62px; } .feuille-articles-3 col.c-pv { width: 60px; } .feuille-articles-3 col.c-stock { width: 58px; } .feuille-articles-3 col.c-statut { width: 58px; } .feuille-articles-3 col.c-date { width: 50px; } .feuille-articles-3 col.c-commander { width: 44px; } body.admin .contenu-page .feuille-articles-3 th, body.admin .contenu-page .feuille-articles-3 td { font-size: 12px; } } .panneau-filtres .en-vente-chez { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 2px; } .panneau-filtres .en-vente-chez legend { font-weight: 700; font-size: 13px; } /* corrections du 16/10/2026 : tableau à largeur fixe (colonnes collées à l'article, rien ne déborde), flèche compacte, panneau */ body.admin .contenu-page table.feuille-articles-3 { width: 904px; min-width: 0; } body.admin .contenu-page .feuille-articles-3 button.deplier { width: 28px; height: 28px; min-height: 0; padding: 0; border-width: 1px; border-radius: 6px; } @media (min-width: 1401px) { body.admin .contenu-page table.feuille-articles-3 { width: 950px; } } @media (max-width: 1100px) { body.admin .contenu-page table.feuille-articles-3 { width: 714px; } .feuille-articles-3 col.c-photo { width: 44px; } .feuille-articles-3 col.c-article { width: 184px; } .feuille-articles-3 col.c-fournisseur { width: 62px; } .feuille-articles-3 col.c-pa { width: 60px; } .feuille-articles-3 col.c-pv { width: 58px; } .feuille-articles-3 col.c-stock { width: 54px; } .feuille-articles-3 col.c-statut { width: 54px; } .feuille-articles-3 col.c-date { width: 46px; } .feuille-articles-3 col.c-commander { width: 44px; } body.admin .contenu-page .feuille-articles-3 td.c-commander .bouton-panier { padding: 0 4px; } } dialog.panneau-panier { max-height: calc(100vh - 24px); overflow: auto; } .panneau-panier .lignes-magasins label.case-magasin { flex-direction: row; color: #111827; } .panneau-panier .ligne-magasin-panier { min-height: 0; } /* titres sur deux lignes si besoin (jamais coupés) ; à 1024 px, texte un peu plus petit pour tenir sans défilement */ .feuille-articles-3 thead th a span { white-space: normal; text-align: center; } .feuille-articles-3 thead th.c-article a span, .feuille-articles-3 thead th.c-fournisseur a span { text-align: left; } @media (max-width: 1100px) { body.admin .contenu-page .feuille-articles-3 th, body.admin .contenu-page .feuille-articles-3 td { font-size: 11px; padding: 0 2px; } body.admin .contenu-page .feuille-articles-3 thead th a { font-size: 10px; letter-spacing: 0; } body.admin .contenu-page .feuille-articles-3 td.c-photo { padding: 0 2px 0 4px; } .feuille-articles-3 td.c-photo .vignette { width: 36px; height: 36px; } } @media (max-width: 1100px) { .feuille-articles-3 col.c-article { width: 176px; } .feuille-articles-3 col.c-fournisseur { width: 60px; } .feuille-articles-3 col.c-pa { width: 64px; } .feuille-articles-3 col.c-pv { width: 56px; } .feuille-articles-3 col.c-stock { width: 56px; } .feuille-articles-3 col.c-statut { width: 52px; } .feuille-articles-3 col.c-date { width: 44px; } } @media (min-width: 1101px) { body.admin .contenu-page table.feuille-articles-3 { width: 920px; } .feuille-articles-3 col.c-pa { width: 84px; } .feuille-articles-3 col.c-commander { width: 56px; } } @media (min-width: 1401px) { body.admin .contenu-page table.feuille-articles-3 { width: 980px; } .feuille-articles-3 col.c-commander { width: 116px; } } /* Messages : images et vidéos (16/10/2026) */ .message-texte img.message-image, .message-texte video.message-video { display: block; max-width: 100%; height: auto; max-height: 60vh; margin: 8px auto; border-radius: 8px; } .message-texte .activer-son { display: flex; margin: 0 auto 8px; } .ajout-media { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .ajout-media .bouton-media { position: relative; display: inline-flex; flex-direction: row; cursor: pointer; } .ajout-media .bouton-media input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } /* Administration › Avances (16/10/2026) : un mois à la fois, total du mois et par employé ; annulée = barrée + pastille */ .avances-totaux { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding: 10px 14px; margin: 10px 0; border-radius: 12px; background: #F8FAFC; font-size: 14px; font-weight: 600; color: #4B5563; } .avances-totaux strong { font-size: 16px; color: #14202B; } .tableau-avances td.magasin-ecrit { font-size: 12px; font-weight: 800; letter-spacing: .04em; } .tableau-avances tr.annulee td { text-decoration: line-through; color: #6B7280; } .tableau-avances .pastille-annulee { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-weight: 800; font-size: 11px; text-decoration: none; } .tableau-avances details.annuler-avance form { margin-top: 6px; min-width: 240px; } .filtres-avances .bouton.inactif { color: #5b6472; border-color: #c9ced6; background: #f3f4f6; cursor: not-allowed; } /* 16/10/2026 : « Ouvrir » toujours en haut à droite, sur la ligne du nom (le badge MODE passe sous le nom si la carte est étroite) */ body.admin .carte-magasin-haut { flex-wrap: nowrap; align-items: flex-start; } body.admin .carte-magasin-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1; } body.admin .carte-magasin-haut a.bouton.petit { flex: none; min-height: 40px; padding: 6px 14px; font-size: 15px; } .filtres-avances .bouton.inactif { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid #c9ced6; border-radius: var(--rayon-bouton); font-weight: 700; font-size: 16px; } body.admin .carte-magasin-haut { align-items: center; } body.admin .carte-magasin-haut .magasin { gap: 6px; } body.admin .carte-magasin-haut .magasin::before { width: 10px; height: 10px; } .carte-magasin-mode:empty { display: none; } .carte-magasin-mode { margin-top: -4px; } @media (max-width: 1180px) { body.admin .carte-magasin-haut .magasin { font-size: 14px; letter-spacing: .04em; } body.admin .carte-magasin-haut a.bouton.petit { padding: 6px 10px; font-size: 14px; } } /* « Synchroniser » (16/10/2026) : en haut de l'Accueil de l'administration */ .synchro { margin: 0 0 16px; } .synchro-haut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; } .synchro-haut .aide { color: #4b5563; font-size: 14px; } .synchro-resultats { list-style: none; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; } .synchro-resultats li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; } .synchro-resultats .magasin { font-size: 14px; flex: none; min-width: 170px; justify-content: flex-start; } .synchro-resultats .etat-ok { color: #15803d; font-weight: 700; } .synchro-resultats .etat-ko { color: #991b1b; font-weight: 700; } .synchro-resultats .etat-attention { color: #92400e; font-weight: 700; } .synchro-resultats .etat-neutre { color: #4b5563; } /* Fiche de l'article : bouton « ← Retour » en haut à gauche (16/10/2026) */ .retour-fiche { margin: 0 0 12px; display: flex; justify-content: flex-start; } .retour-fiche .bouton-retour { display: inline-flex; width: auto; min-height: 44px; padding: 8px 16px; font-size: 16px; } /* Comptes : fenêtre « Créer un compte » / « Modifier le compte » (16/10/2026, maquette validée) */ .fenetre-compte { width: 760px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); padding: 0; border: none; border-radius: 20px; box-shadow: 0 24px 70px rgba(18, 32, 58, .45); overflow: auto; color: #14202b; } .fenetre-compte[open]:not(:modal) { position: fixed; inset: 24px 0 auto; margin: 0 auto; z-index: 50; } .fenetre-compte::backdrop { background: rgba(18, 32, 58, .35); } .form-compte { display: flex; flex-direction: column; margin: 0; } .fenetre-compte-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 12px; border-bottom: 1px solid #e8ecf2; } .fenetre-compte-haut h2 { margin: 0; font-size: 22px; font-weight: 800; } .fenetre-compte-haut .sous-titre { margin: 2px 0 0; font-size: 13px; color: #4b5563; } .fermer-fenetre { width: 44px; height: 44px; border-radius: 50%; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #14202b; text-decoration: none; flex: none; } .fermer-fenetre:hover { background: #e2e8f0; } .erreur-compte { margin: 12px 24px 0; padding: 10px 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-weight: 700; } .fenetre-compte-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 16px 24px; } .colonne-compte h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: #4b5563; text-transform: uppercase; } .colonne-compte h3:first-child { margin-top: 2px; } .champ-compte { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 13px; color: #4b5563; margin-bottom: 12px; } .champ-compte input { height: 44px; box-sizing: border-box; border-radius: 11px; border: 2px solid #cbd5e1; padding: 0 12px; font: inherit; font-weight: 600; font-size: 15px; color: #14202b; width: 100%; } .champ-compte input[readonly] { background: #f8fafc; } .champ-mdp { position: relative; display: block; } .champ-mdp input { padding-right: 88px; } .champ-mdp .generer-mdp { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 8px; font-size: 13px; font-weight: 800; color: #1d4ed8; } .roles-compte { display: flex; flex-direction: column; gap: 6px; } .role-compte { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px; box-sizing: border-box; border-radius: 10px; border: 1px solid #e2e8f0; cursor: pointer; font-weight: 800; font-size: 14px; } .role-compte.choisi { background: #f1f5f9; border-color: #12203a; } .role-compte input, .case-compte input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: #12203a; } .aide-case { display: block; font-size: 12px; color: #4b5563; font-weight: 500; line-height: 1.3; } .case-compte { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; font-weight: 700; font-size: 15px; line-height: 1.25; } .case-compte input:disabled + span { color: #4b5563; } .point-magasin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--couleur); margin-right: 7px; } .fenetre-compte-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #e8ecf2; background: #f8fafc; } .fenetre-compte-pied .boutons-pied { display: flex; gap: 10px; } .fenetre-compte-pied .bouton, .fenetre-compte-pied button.principal { min-height: 44px; padding: 0 20px; width: auto; font-size: 15px; } .lien-danger { color: #991b1b; font-weight: 700; font-size: 13px; text-decoration: underline; min-height: 44px; } [data-roles][hidden] { display: none !important; } /* fenêtre des comptes : les règles générales des étiquettes (en colonne, grises) ne s'appliquent pas ici */ dialog.fenetre-compte label.case-compte, dialog.fenetre-compte label.role-compte { flex-direction: row; align-items: center; text-align: left; color: #14202b; gap: 10px; } dialog.fenetre-compte label.case-compte { align-items: flex-start; font-size: 15px; font-weight: 700; padding: 6px 0; } dialog.fenetre-compte label.case-compte input { margin-top: 1px; } dialog.fenetre-compte label.role-compte { font-size: 14px; font-weight: 800; } dialog.fenetre-compte label.case-compte > span, dialog.fenetre-compte label.role-compte > span { display: block; text-align: left; } dialog.fenetre-compte label.champ-compte { color: #4b5563; font-size: 13px; font-weight: 700; } dialog.fenetre-compte .champ-mdp input::placeholder { color: #6b7280; font-size: 14px; } dialog.fenetre-compte .champ-mdp input { padding-right: 92px; text-overflow: ellipsis; } dialog.fenetre-compte .champ-mdp .generer-mdp { background: #fff; } dialog.fenetre-compte .fenetre-compte-corps { padding: 12px 24px; gap: 24px; } dialog.fenetre-compte .colonne-compte h3 { margin: 10px 0 4px; } dialog.fenetre-compte .roles-compte { gap: 5px; } dialog.fenetre-compte .role-compte { padding: 6px 10px; } dialog.fenetre-compte button.lien-danger { color: #991b1b; } /* En-tête de l'administration (16/10/2026) : « Synchroniser » + heures des 3 magasins à la place de « Aller à… » ; les heures passent sous le bouton quand la place manque (jamais de défilement horizontal) */ .barre-admin .synchro-entete { flex: 1 1 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; position: relative; } .barre-admin .form-synchro { margin: 0; flex: none; } body.admin .barre-admin .bouton-synchro { min-height: 44px; padding: 8px 16px; border-radius: 10px; font-size: 15px; font-weight: 800; white-space: nowrap; } .barre-admin .heures-synchro { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; min-width: 0; } .barre-admin .heure-magasin { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .barre-admin .heure-magasin .point-magasin { margin: 0; width: 9px; height: 9px; } .barre-admin .heure-magasin .nom { font-weight: 800; letter-spacing: .03em; color: var(--texte); } .barre-admin .heure-magasin .heure { font-weight: 700; font-variant-numeric: tabular-nums; } .barre-admin .heures-synchro .sep { color: #6b7280; } .barre-admin .heure.etat-ok { color: #15803d; } .barre-admin .heure.etat-ko { color: #991b1b; } .barre-admin .heure.etat-attention { color: #92400e; } .barre-admin .heure.etat-neutre { color: #4b5563; } .barre-admin .resultat-synchro { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; max-width: 640px; padding: 8px 12px; border-radius: 10px; background: #12203a; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(18, 32, 58, .25); } /* Pages des employés (16/10/2026) : le bouton « Accueil » juste à côté du nom du magasin (le nom reste au milieu de la bande) */ .bande > .accueil { justify-self: end; } /* Administration › Avances : adresse directe de l'application et « Copier l'adresse » (16/10/2026) */ .adresse-avances { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 12px; background: #f8fafc; } .adresse-avances .etiquette-champ { font-weight: 700; color: #374151; font-size: 14px; } .adresse-avances .champ-adresse { flex: 1 1 280px; min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid #cbd5e1; border-radius: 10px; font: inherit; font-weight: 700; background: #fff; color: var(--texte); } /* Carrousel des photos d'un article (16/10/2026) */ .carrousel .photo-cadre { position: relative; } .carrousel .photo-principale { cursor: zoom-in; } .carrousel-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid #cbd5e1; background: rgba(255, 255, 255, .92); color: #12203a; font-size: 28px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 32, 58, .18); } .carrousel-fleche.precedente { left: 6px; } .carrousel-fleche.suivante { right: 6px; } .carrousel-fleche:hover { background: #fff; border-color: #12203a; } .carrousel-fleche[hidden] { display: none; } .carrousel-compteur { position: absolute; bottom: 8px; right: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(18, 32, 58, .82); color: #fff; font-size: 13px; font-weight: 700; } .carrousel-source { margin: 0; font-size: 13px; font-weight: 600; color: #4b5563; } .carrousel:focus-visible { outline: 3px solid #93c5fd; outline-offset: 4px; border-radius: 14px; } .photo-article.moyenne .carrousel-fleche { width: 36px; height: 36px; min-height: 36px; font-size: 22px; } /* photo en grand sur fond sombre */ dialog.photo-grande { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: none; background: transparent; display: none; align-items: center; justify-content: center; } dialog.photo-grande[open] { display: flex; } dialog.photo-grande::backdrop { background: rgba(10, 15, 25, .9); } dialog.photo-grande img { max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); object-fit: contain; background: #fff; border-radius: 8px; } .photo-grande-fermer { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; min-height: 48px; border-radius: 50%; border: none; background: #fff; color: #12203a; font-size: 22px; font-weight: 800; cursor: pointer; } .photo-grande-fleche { position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; min-height: 56px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .95); color: #12203a; font-size: 34px; font-weight: 700; cursor: pointer; } .photo-grande-fleche.precedente { left: 20px; } .photo-grande-fleche.suivante { right: 20px; } .photo-grande-fleche[hidden] { display: none; } .photo-grande-bas { position: fixed; bottom: 16px; left: 0; right: 0; margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 700; } /* « Consulter » : rupture et article pas en vente dans ce magasin */ .consulter-stocks .rupture { color: #b91c1c; } .consulter-stocks .rupture span { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .consulter-stocks .pas-en-vente { color: #4b5563; font-size: 15px; font-weight: 700; } /* en-tête « Synchroniser » : sur une ligne à 1280 px ; sinon les heures passent sous le bouton (chaque magasin reste entier) */ .barre-admin .heures-synchro { font-size: 12.5px; gap: 2px 6px; } .barre-admin .heure-magasin .nom { letter-spacing: .01em; } .barre-admin .heure-magasin .sep { margin-right: 2px; } @media (max-width: 1400px) { .barre-admin .selecteur-magasin .actif { display: none; } } .photo-grande-bas span:not(:empty) { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #12203a; color: #fff; } .filtres-avances select { width: auto; } .barre-admin .heures-synchro { font-size: 12px; gap: 2px 5px; } .barre-admin .heure-magasin { gap: 4px; } .barre-admin .heure-magasin .nom { letter-spacing: 0; } .barre-admin .synchro-entete { gap: 4px 10px; } body.admin .contenu-page .filtres-ligne.filtres-avances select { width: auto; min-width: 110px; } /* flèches et boutons du carrousel : jamais les styles généraux des boutons de l'administration */ body .photo-article .photo-cadre button.carrousel-fleche { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid #cbd5e1; background: rgba(255, 255, 255, .94); color: #12203a; font-size: 30px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(18, 32, 58, .2); } body .photo-article.moyenne .photo-cadre button.carrousel-fleche { width: 36px; height: 36px; min-height: 36px; font-size: 24px; } body dialog.photo-grande button.photo-grande-fleche { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, .95); color: #12203a; font-size: 36px; line-height: 1; } body dialog.photo-grande button.photo-grande-fermer { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: none; background: #fff; color: #12203a; font-size: 22px; } /* En-tête de l'administration (16/10/2026, maquette) : UNE ligne : « Synchroniser », juste à côté l'état des 3 magasins, à droite la liste des magasins puis « Se déconnecter » ; sous ~1100 px, les états passent SOUS le bouton (jamais de débordement) */ .barre-admin { padding: 10px 20px; gap: 12px; } .barre-admin .synchro-entete { flex-wrap: wrap; gap: 6px 12px; } .barre-admin .heures-synchro { flex-wrap: wrap; gap: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; } .barre-admin .heure-magasin { gap: 6px; padding: 0; } .barre-admin .heure-magasin:first-child { padding-left: 0; } .barre-admin .heure-magasin .nom { letter-spacing: .06em; font-weight: 800; } .barre-admin .heure-magasin .sep { color: #6b7280; margin-right: 2px; font-weight: 700; letter-spacing: 0; } .barre-admin .heure-magasin .heure { font-weight: 800; letter-spacing: .02em; margin-left: 2px; } .barre-admin .heure.etat-ok { color: #15803d; } .barre-admin .heure.etat-neutre { color: #4b5563; } /* (la place manque : les états passent d'eux-mêmes sous le bouton ; chaque magasin reste entier) */ .barre-admin .heures-synchro { letter-spacing: .03em; gap: 2px 6px; } .barre-admin .heure-magasin { gap: 5px; } .barre-admin .heure-magasin .nom { letter-spacing: .03em; } .barre-admin .synchro-entete { gap: 6px 10px; } /* Sauvegardes (16/10/2026) : accès de Backblaze en grille de 2 colonnes */ body.admin .contenu-page .form-acces-sauvegarde { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 10px; } body.admin .contenu-page .form-acces-sauvegarde label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: #374151; } body.admin .contenu-page .form-acces-sauvegarde input { min-height: 44px; padding: 0 12px; border: 2px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; } body.admin .contenu-page .form-acces-sauvegarde .boutons-form { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: 0; } .boutons-sauvegarde { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .boutons-sauvegarde form { margin: 0; } /* Accueil de l'administration (16/10/2026, maquette « proposition 2 ») : pas de fil ni de phrase sous le titre, pas de grand cadre blanc ; raccourcis compacts en premier ; trois cartes compactes côte à côte (empilées sous 900 px) */ .page-admin .contenu-page.sans-cadre { background: transparent; border: none; padding: 0; } .contenu-page.sans-cadre > .alertes-admin { margin: 0 0 14px; } .contenu-page.sans-cadre .titre-raccourcis { margin: 0 0 6px; font-size: 15px; font-weight: 800; } .raccourcis.raccourcis-compactes, .raccourcis.raccourcis-compacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .raccourcis-compacts .raccourci { flex: 0 1 auto; min-height: 44px; padding: 6px 14px; gap: 8px; border-radius: 12px; font-size: 14px; box-shadow: 0 1px 2px rgba(20, 32, 43, .06); } body.admin .cartes-magasins.cartes-compactes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; grid-auto-rows: 1fr; align-items: stretch; margin: 0 0 18px; } body.admin .carte-compacte { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; background: #fff; border: 1px solid var(--bord); border-top: 5px solid var(--couleur); border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 32, 43, .08); } body.admin .carte-compacte::before { display: none; } body.admin .carte-compacte .carte-magasin-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: nowrap; } body.admin .carte-compacte .carte-magasin-titre { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; } body.admin .carte-compacte .carte-magasin-titre .magasin { font-size: 14px; letter-spacing: .06em; margin: 0; } body.admin .carte-compacte .carte-magasin-mode { margin: 0; } body.admin .carte-compacte .carte-magasin-mode .mode { font-size: 10px; padding: 2px 7px; } body.admin .carte-compacte .carte-magasin-haut a.bouton.petit { flex: none; min-height: 44px; padding: 6px 14px; font-size: 14px; } .pastilles-etat { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; } .pastille-etat { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .pastille-etat.ok { background: #dcfce7; color: #166534; } .pastille-etat.neutre { background: #e5e7eb; color: #374151; } .pastille-etat.ko { background: #fee2e2; color: #991b1b; } .pastille-etat.attention { background: #fef3c7; color: #92400e; } .pastille-etat .icone-svg { flex: none; } .compteurs-magasin { display: flex; gap: 10px; border-top: 1px solid var(--bord); padding-top: 8px; margin-top: auto; } .compteur-magasin { flex: 1; min-width: 0; display: flex; flex-direction: column; } .compteur-magasin .libelle { font-size: 11px; font-weight: 700; color: #4b5563; line-height: 1.25; } .compteur-magasin .valeur { font-weight: 800; font-size: 14px; margin-top: 2px; overflow-wrap: break-word; line-height: 1.25; } .compteur-magasin .detail { font-size: 11px; font-weight: 700; } .contenu-page.sans-cadre .bloc-portails { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 14px 20px; } .contenu-page.sans-cadre .bloc-portails h2 { margin-top: 0; } @media (max-width: 900px) { body.admin .cartes-magasins.cartes-compactes { grid-template-columns: 1fr; grid-auto-rows: auto; } } body.admin .carte-compacte .carte-magasin-titre .magasin { justify-content: flex-start; text-align: left; } body.admin .carte-compacte .carte-magasin-haut a.bouton.petit { align-self: flex-start; } .pastille-etat > span { min-width: 0; white-space: normal; overflow-wrap: break-word; } /* Accueil : « Portail des employés » (16/10/2026, maquette proposition 2) : trois boutons de la couleur du magasin, nouvel onglet */ .portails-employes { margin: 18px 0 0; } .portails-employes .titre-raccourcis { margin: 0; } .sous-titre-portails { margin: 2px 0 8px; font-size: 13px; color: #4b5563; } .boutons-portails { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .bouton-portail { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 4px 14px 0; box-sizing: border-box; background: #fff; border: 1px solid var(--bord); border-top: 4px solid var(--couleur); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 32, 43, .06); color: #111827; font-weight: 800; font-size: 14px; text-decoration: none; } .bouton-portail:hover { background: #f8fafc; border-color: #1d4ed8; border-top-color: var(--couleur); } .bouton-portail:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } .bouton-portail .magasin-portail { text-transform: uppercase; letter-spacing: .06em; } .bouton-portail .icone-svg { flex: none; color: #4b5563; } .lecteur-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Langue des écrans des employés : bouton unique (20/10/2026), voir « Bouton de langue UNIQUE » en fin de fichier */ /* Comptes : langue de départ (Français | Türkçe), deux boutons ronds côte à côte */ .langues-compte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .choix-source { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .apercu-carte-promo { border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; } /* « Contrôler la synchro » (en-tête, à côté de « Synchroniser ») et voyant du résultat */ .form-controle { display: inline-flex; } body.admin .barre-admin .bouton-controle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } .voyant-controle { display: flex; align-items: center; gap: 10px; font-size: 18px; } .voyant-controle .voyant { width: 18px; height: 18px; border-radius: 50%; background: currentColor; flex: none; } /* place pour le bouton « Contrôler la synchro » (16/10/2026) : barre un peu plus serrée, l'en-tête reste sur une ligne à 1280 px */ .barre-admin { gap: 10px; padding-left: 24px; padding-right: 24px; } .barre-admin .synchro-entete { gap: 4px 8px; } .barre-admin .heures-synchro { gap: 2px 4px; font-size: 12.5px; } body.admin .barre-admin .bouton-synchro { padding-left: 12px; padding-right: 12px; } .barre-admin .form-controle { margin-left: -4px; } body.admin .barre-admin .barre-compte button.lien { padding-left: 10px; padding-right: 10px; } .barre-admin .heure-magasin .nom { letter-spacing: 0; } .barre-admin { gap: 8px; padding-left: 16px; padding-right: 16px; } body.admin .barre-admin .selecteur-magasin select { font-size: 14px; padding: 6px 6px; } body.admin .barre-admin .barre-compte .deconnexion button.lien { font-size: 14px; padding-left: 10px; padding-right: 10px; gap: 6px; } /* Articles à prix variable (17/10/2026) */ .prix-variable { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .prix-variable .consigne { background: #FEF3C7; color: #78350F; border-radius: 6px; padding: 8px 12px; font-weight: 600; } /* « Dernière synchronisation » (17/10/2026) : carte de l'Accueil et onglet Caisse */ .cadre-synchro { display: flex; flex-direction: column; gap: 2px; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 12px; background: #F8FAFC; } .cadre-synchro .libelle { font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .cadre-synchro.compact { margin-top: 10px; padding: 6px 10px; font-size: 13px; } .cadre-synchro.compact .petit-texte { font-size: 12px; } /* Ventes et statistiques (refonte du 17/10/2026, maquette validée) */ .filtres-stats { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 4px; } .filtres-stats label { display: flex; flex-direction: column; gap: 3px; font-weight: 700; font-size: 12px; color: #4B5563; } .filtres-stats select { min-height: 40px; min-width: 180px; } .filtres-stats .periode-dates { font-size: 13px; color: #4B5563; align-self: center; } .bloc-stat-titre { margin: 24px 0 8px; } .bloc-stat-titre h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; } .bloc-stat-titre p { margin: 2px 0 0 34px; font-size: 13px; color: #4B5563; } .numero-bloc { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #12203A; color: #fff; font-size: 13px; margin-right: 8px; } .rangee-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .rangee-stat:has(.carte-stat.large) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); } .rangee-stat.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } .carte-stat { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(20,32,43,.12); padding: 14px 16px; min-width: 0; color: #14202B; } a.carte-stat.cliquable { text-decoration: none; min-height: 44px; } a.carte-stat.cliquable:hover, a.carte-stat.cliquable:focus-visible { box-shadow: 0 0 0 2px #1D4ED8; } .carte-stat-titre { font-size: 12px; font-weight: 700; color: #4B5563; } .carte-stat-valeur { font-weight: 800; font-size: 26px; } .carte-stat-valeur.grand { font-size: 26px; } .carte-stat-valeur.rouge { color: #991B1B; } .carte-stat-valeur.ambre { color: #92400E; } .carte-stat-texte { font-size: 12px; color: #4B5563; } .ecart-hausse { color: #166534; font-weight: 700; font-size: 13px; } .ecart-baisse { color: #991B1B; font-weight: 700; font-size: 13px; } .ecart-neutre { color: #4B5563; font-size: 13px; } .ecart-detail { color: #4B5563; font-weight: 500; } .ligne-ca-magasin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid #E8ECF2; } .ligne-ca-magasin .magasin-point { grid-column: 1 / -1; } .ligne-ca-magasin strong { white-space: nowrap; } .ligne-ca-magasin .magasin-point { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; letter-spacing: .06em; min-width: 0; } .ligne-ca-magasin .ecart-court { text-align: right; font-size: 12px; } .tableau-stat { padding: 0; overflow: hidden; } .stat-mini { width: 100%; border-collapse: collapse; } .stat-mini th { background: #EEF2F7; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #4B5563; padding: 8px 12px; text-align: left; } .stat-mini th { white-space: nowrap; } .stat-mini td:first-child { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-mini .nombre { white-space: nowrap; } .stat-mini td { padding: 8px 10px; border-top: 1px solid #E8ECF2; font-size: 14px; } .stat-mini .nombre, .stat-liste .nombre, .stat-marge .nombre { text-align: right; font-weight: 800; } .article-stat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .voir-tout { display: block; padding: 10px 12px; border-top: 1px solid #E8ECF2; font-weight: 700; min-height: 44px; box-sizing: border-box; } .stat-marge { width: 100%; border-collapse: collapse; } .stat-marge td, .stat-marge th { padding: 6px 8px; border-top: 1px solid #E8ECF2; text-align: left; } .barre-marge { display: flex; align-items: center; gap: 8px; } .barre-marge .barre { flex: 1; } .barre-marge b { min-width: 42px; text-align: right; } .carte-chaleur { border-collapse: separate; border-spacing: 4px; width: 100%; table-layout: fixed; } .carte-chaleur th { font-size: 11px; color: #4B5563; font-weight: 700; } .carte-chaleur tbody th { text-align: left; font-size: 12px; color: #14202B; width: 44px; } .carte-chaleur td { height: 30px; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 700; color: #14202B; } .chaleur-0 { background: #F1F5F9; } .chaleur-1 { background: #E2E6EE; } .chaleur-2 { background: #CED5E2; } .chaleur-3 { background: #B6C0D3; } .chaleur-4 { background: #9AA7C0; } .carte-chaleur td.chaleur-5 { background: #5C6B88; color: #fff; } .carte-chaleur td.chaleur-6 { background: #43527A; color: #fff; } .carte-chaleur td.chaleur-7 { background: #2C3B5F; color: #fff; } .carte-chaleur td.chaleur-8 { background: #12203A; color: #fff; } .maj-stats { margin-top: 20px; } .stat-liste { width: 100%; border-collapse: collapse; } .stat-liste th, .stat-liste td { padding: 8px; border-top: 1px solid #E8ECF2; text-align: left; } @media (max-width: 1100px) { .rangee-stat, .rangee-stat:has(.carte-stat.large) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Familles d'articles (17/10/2026) : navigation interne, statuts, lignes à vérifier, formulaires d'une ligne */ .sous-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .sous-onglets a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #CBD5E1; color: #1E293B; text-decoration: none; font-weight: 600; background: #fff; } .sous-onglets a[aria-current="page"] { background: #1E293B; color: #fff; border-color: #1E293B; } .statut-famille { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #E2E8F0; color: #1E293B; white-space: nowrap; } .statut-famille.valide { background: #DCFCE7; color: #14532D; } .statut-famille.ignore { background: #F1F5F9; color: #475569; } .statut-famille.verifier { background: #FEF3C7; color: #78350F; } tr.a-verifier > td { background: #FFFBEB; } .ligne-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ligne-form input, .ligne-form select { min-height: 44px; max-width: 220px; } table.correspondance select, form.classer select { min-height: 44px; width: 220px; min-width: 220px; } table.correspondance td, table.a-classer td { vertical-align: top; } table.correspondance td.petit-texte, table.a-classer td.petit-texte { min-width: 120px; white-space: normal; } form.classer { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } form.classer .case { display: flex; gap: 6px; align-items: center; font-size: 13px; } .feuille-articles-3 col.c-famille { width: 112px; } .feuille-articles-3 td.c-famille { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .feuille-catalogue col.c-famille { width: 118px; } .feuille-catalogue td.c-famille { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #filtresCatalogue select.filtre-famille { width: 150px; min-width: 0; } table.a-classer { table-layout: fixed; width: 100%; } table.a-classer th:nth-child(1) { width: 56px; } table.a-classer th:nth-child(3) { width: 12%; } table.a-classer th:nth-child(4) { width: 15%; } table.a-classer th:nth-child(5) { width: 15%; } table.a-classer th:nth-child(6) { width: 230px; } table.a-classer td { overflow-wrap: anywhere; } table.a-classer form.classer select { width: 100%; min-width: 0; } table.a-classer th { overflow-wrap: normal; word-break: normal; } table.a-classer td.c-photo { overflow-wrap: normal; } /* ---------- Portail des employés : nouveau design (17/10/2026, maquette validée) ---------- Couleurs propres au portail (l'administration garde les siennes) : A = foncé, M = couleur du magasin, B = 2e teinte. */ body.portail-v2, body.portail-v2.couleur-LOVESHOP { --pA: var(--LOVESHOP-dA); --pM: var(--LOVESHOP-dM); --pB: var(--LOVESHOP-dB); --p-fond: var(--LOVESHOP-p-fond); --p-texte: var(--LOVESHOP-p-texte); --p-doux: var(--LOVESHOP-p-doux); --p-ombre: var(--LOVESHOP-p-ombre); --p-ombre-v: var(--LOVESHOP-p-ombre-v); --p-halo: var(--LOVESHOP-p-halo); --p-clair: var(--LOVESHOP-p-clair); --p-lien: var(--LOVESHOP-p-lien); --p-icone: var(--LOVESHOP-p-icone); --p-voile: var(--LOVESHOP-voile); } body.portail-v2 { background: var(--p-fond); color: var(--p-texte); font-family: 'DM Sans', system-ui, sans-serif; padding-bottom: 56px; } body.portail-v2.couleur-PINKATTITUDES { --pA: var(--PINKATTITUDES-dA); --pM: var(--PINKATTITUDES-dM); --pB: var(--PINKATTITUDES-dB); --p-fond: var(--PINKATTITUDES-p-fond); --p-texte: var(--PINKATTITUDES-p-texte); --p-doux: var(--PINKATTITUDES-p-doux); --p-ombre: var(--PINKATTITUDES-p-ombre); --p-ombre-v: var(--PINKATTITUDES-p-ombre-v); --p-halo: var(--PINKATTITUDES-p-halo); --p-clair: var(--PINKATTITUDES-p-clair); --p-lien: var(--PINKATTITUDES-p-lien); --p-icone: var(--PINKATTITUDES-p-icone); --p-voile: rgba(0, 0, 0, 0.28); } body.portail-v2.couleur-LAUTREIMAGE { --pA: var(--LAUTREIMAGE-dA); --pM: var(--LAUTREIMAGE-dM); --pB: var(--LAUTREIMAGE-dB); --p-fond: var(--LAUTREIMAGE-p-fond); --p-texte: var(--LAUTREIMAGE-p-texte); --p-doux: var(--LAUTREIMAGE-p-doux); --p-ombre: var(--LAUTREIMAGE-p-ombre); --p-ombre-v: var(--LAUTREIMAGE-p-ombre-v); --p-halo: var(--LAUTREIMAGE-p-halo); --p-clair: var(--LAUTREIMAGE-p-clair); --p-lien: var(--LAUTREIMAGE-p-lien); --p-icone: var(--LAUTREIMAGE-p-icone); --p-voile: rgba(0, 0, 0, 0.28); } body.portail-v2 .p2-bande { position: relative; overflow: hidden; background-color: var(--pB); background-image: linear-gradient(120deg, var(--pA) 0%, var(--pM) 55%, var(--pB) 100%); color: #fff; padding-bottom: 150px; } body.portail-v2 .p2-halo { position: absolute; border-radius: 50%; pointer-events: none; } body.portail-v2 .p2-halo-1 { top: -240px; right: -140px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%); } body.portail-v2 .p2-halo-2 { bottom: -280px; left: 18%; width: 520px; height: 520px; background: radial-gradient(circle, var(--p-halo), rgba(255, 255, 255, 0) 65%); } body.portail-v2 .p2-interieur { position: relative; max-width: 1120px; margin: 0 auto; padding: 28px 32px 0; } body.portail-v2 .p2-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } body.portail-v2 .p2-magasin { font-size: 22px; font-weight: 700; letter-spacing: 0.14em; color: #fff; text-transform: uppercase; } body.portail-v2 .p2-accueil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--p-voile); color: #fff; font-size: 17px; font-weight: 500; text-decoration: none; } body.portail-v2 .p2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } body.portail-v2 .p2-compte { gap: 12px; } body.portail-v2 .p2-compte button.lien { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--p-voile); color: #fff; font-family: inherit; font-size: 17px; font-weight: 500; text-decoration: none; } body.portail-v2 .p2-compte button.lien svg { width: 22px; height: 22px; } body.portail-v2 .p2-salut { margin: 56px 0 0; font-size: 58px; line-height: 1.1; font-weight: 700; color: #fff; text-align: left; } body.portail-v2 .p2-question { margin: 12px 0 0; font-size: 28px; font-weight: 500; color: #fff; } body.portail-v2 .p2-bande a:focus-visible, body.portail-v2 .p2-bande button:focus-visible { outline: 3px solid var(--p-clair); outline-offset: 3px; } body.portail-v2 .p2-contenu { position: relative; max-width: 1120px; margin: -96px auto 0; padding: 0 32px; } body.portail-v2 .p2-apercu { margin: 0 0 20px; } body.portail-v2 .p2-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } body.portail-v2 .p2-carte { display: flex; flex-direction: column; gap: 18px; padding: 32px; min-height: 270px; background: #fff; border-radius: 28px; box-shadow: 0 18px 40px var(--p-ombre); color: var(--p-texte); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } body.portail-v2 .p2-carte:hover { transform: translateY(-4px); box-shadow: 0 24px 48px var(--p-ombre); } body.portail-v2 .p2-icone { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--p-icone); color: #fff; flex: none; } body.portail-v2 .p2-titre { font-size: 30px; font-weight: 700; line-height: 1.15; } body.portail-v2 .p2-phrase { font-size: 21px; color: var(--p-doux); line-height: 1.35; } body.portail-v2 .p2-ouvrir { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; color: var(--p-lien); } body.portail-v2 .p2-bloc-videos { margin-top: 56px; } body.portail-v2 .p2-h2 { margin: 0 0 20px; font-size: 30px; font-weight: 700; color: var(--p-texte); text-align: left; } body.portail-v2 .p2-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } body.portail-v2 .p2-video { display: block; color: var(--p-texte); text-decoration: none; border-radius: 20px; transition: transform 0.15s ease; } body.portail-v2 .p2-video:hover { transform: translateY(-4px); } body.portail-v2 .p2-vignette { display: flex; align-items: center; justify-content: center; height: 150px; border-radius: 20px; box-shadow: 0 10px 24px var(--p-ombre-v); } body.portail-v2 .p2-v1 { background: linear-gradient(135deg, var(--pA), var(--pM)); } body.portail-v2 .p2-v2 { background: linear-gradient(135deg, var(--pM), var(--pB)); } body.portail-v2 .p2-v3 { background: linear-gradient(225deg, var(--pA), var(--pB)); } body.portail-v2 .p2-v4 { background: linear-gradient(315deg, var(--pM), var(--pA)); } body.portail-v2 .p2-lecture { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--pM); } body.portail-v2 .p2-lecture svg { margin-left: 4px; } body.portail-v2 .p2-video-titre { display: block; margin-top: 12px; font-size: 20px; font-weight: 700; line-height: 1.25; } /* focus clavier bien visible sur fond clair : contour foncé de la couleur du magasin */ body.portail-v2 .p2-contenu a:focus-visible { outline: 3px solid var(--pA); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.portail-v2 .p2-carte, body.portail-v2 .p2-video { transition: none; } body.portail-v2 .p2-carte:hover, body.portail-v2 .p2-video:hover { transform: none; } } @media (max-width: 700px) { body.portail-v2 .p2-interieur { padding: 18px 16px 0; } body.portail-v2 .p2-bande { padding-bottom: 120px; } body.portail-v2 .p2-salut { margin-top: 32px; font-size: 40px; } body.portail-v2 .p2-question { font-size: 24px; } body.portail-v2 .p2-contenu { margin-top: -80px; padding: 0 16px; } body.portail-v2 .p2-cartes { grid-template-columns: 1fr; gap: 16px; } body.portail-v2 .p2-carte { min-height: 0; padding: 24px; } body.portail-v2 .p2-titre { font-size: 26px; } body.portail-v2 .p2-magasin { font-size: 19px; } } /* ---------- 17/10/2026 (maquette validée) : connexion, choix du magasin, menu et en-tête de l'administration, Accueil ---------- Dégradés des magasins (120°, 0 / 55 / 100 %) ; couleur de l'administration : #7C3AED → #2563EB ; « Synchroniser » : #15803D → #0F766E. background-color = teinte la plus claire du dégradé (contraste mesuré au pire endroit). */ .degrade-LOVESHOP { --dA: var(--LOVESHOP-dA); --dM: var(--LOVESHOP-dM); --dB: var(--LOVESHOP-dB); --dOmbre: var(--LOVESHOP-ombre); --dClair: var(--LOVESHOP-clair); --dTexte: var(--LOVESHOP-texte); --dVoile: var(--LOVESHOP-voile); --dHalo: var(--LOVESHOP-halo); --dBouton: var(--LOVESHOP-bouton); --dBoutonOmbre: var(--LOVESHOP-bouton-ombre); } .degrade-PINKATTITUDES { --dA: var(--PINKATTITUDES-dA); --dM: var(--PINKATTITUDES-dM); --dB: var(--PINKATTITUDES-dB); --dOmbre: var(--PINKATTITUDES-ombre); --dClair: var(--PINKATTITUDES-clair); --dTexte: var(--PINKATTITUDES-texte); } .degrade-LAUTREIMAGE { --dA: var(--LAUTREIMAGE-dA); --dM: var(--LAUTREIMAGE-dM); --dB: var(--LAUTREIMAGE-dB); --dOmbre: var(--LAUTREIMAGE-ombre); --dClair: var(--LAUTREIMAGE-clair); --dTexte: var(--LAUTREIMAGE-texte); } .degrade-LOVESHOP, .degrade-PINKATTITUDES, .degrade-LAUTREIMAGE { background-color: var(--dB); background-image: linear-gradient(120deg, var(--dA) 0%, var(--dM) 55%, var(--dB) 100%); } /* Connexion et choix du magasin (le reste : « B · Écran partagé », fin du fichier) */ body.page-connexion { font-family: 'DM Sans', system-ui, sans-serif; } body.page-connexion .cx-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } body.page-connexion .cx-essai { padding: 5px 12px; border-radius: 8px; background: #FEF3C7; border: 1px solid #FCD34D; color: #92400E; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } body.page-connexion .cx-magasins { display: flex; flex-direction: column; gap: 14px; } body.page-connexion .cx-magasins form { margin: 0; } body.page-connexion .cx-magasin { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 80px; padding: 0 26px; border: 0; border-radius: 22px; color: #fff; font: 700 21px 'DM Sans', system-ui, sans-serif; letter-spacing: 0.12em; text-align: left; cursor: pointer; box-shadow: 0 12px 26px var(--dOmbre); transition: transform 0.2s ease; } body.page-connexion .cx-magasin:hover { transform: translateY(-3px); } /* LOVE SHOP : son « bouton d'action » (--LOVESHOP-bouton) ; les autres magasins gardent leur dégradé */ body.page-connexion .cx-magasin { background-image: var(--dBouton, linear-gradient(120deg, var(--dA) 0%, var(--dM) 55%, var(--dB) 100%)); box-shadow: 0 12px 26px var(--dBoutonOmbre, var(--dOmbre)); } body.page-connexion .cx-deconnexion { margin: 18px 0 0; display: flex; justify-content: center; } body.page-connexion .cx-deconnexion button.lien { min-height: 48px; padding: 0 20px; border: 0; background: transparent; color: #334155; font: 700 17px 'DM Sans', system-ui, sans-serif; text-decoration: underline; cursor: pointer; } @media (prefers-reduced-motion: reduce) { body.page-connexion .cx-magasin, .carte-degrade, .grand-raccourci, .bouton-portail { transition: none !important; transform: none !important; } } /* Administration : menu de gauche et en-tête (toutes les pages ; le contenu des pages ne change pas) */ body.admin { background: #F1F3F9; font-family: 'DM Sans', system-ui, sans-serif; } body.admin .menu-admin { background-color: #0B1220; background-image: linear-gradient(180deg, #1B1640 0%, #0B1220 100%); padding: 24px 14px; gap: 4px; flex-basis: 248px; } body.admin .menu-admin a.menu-titre { padding: 0 12px 20px; font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; } body.admin .menu-admin a { min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: #E2E8F0; } body.admin .menu-admin a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; } body.admin .menu-admin a[aria-current="page"] { background-color: #4F46E5; background-image: linear-gradient(120deg, #7C3AED, #2563EB); color: #fff; font-weight: 700; } body.admin .menu-admin a:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; } body.admin .barre-admin { min-height: 68px; padding: 10px 28px; box-sizing: border-box; background: #fff; border-bottom: 0; box-shadow: 0 1px 0 #E2E8F0; gap: 14px; } body.admin .barre-admin .bouton-synchro { height: 46px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 14px; background-color: #0F766E; background-image: linear-gradient(120deg, #15803D, #0F766E); color: #fff; font-size: 16px; font-weight: 700; } body.admin .barre-admin .heures-synchro { gap: 6px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; } body.admin .barre-admin .heure-magasin { gap: 8px; } body.admin .barre-admin .heure-magasin .sep { display: none; } body.admin .barre-admin .heure-magasin .nom { font-weight: 700; letter-spacing: 0.06em; color: #14202B; } body.admin .barre-admin .heure-magasin .point-magasin { width: 12px; height: 12px; } body.admin .barre-admin .heure-magasin.couleur-LOVESHOP .point-magasin { background: var(--LOVESHOP-point); } body.admin .barre-admin .heure-magasin.couleur-PINKATTITUDES .point-magasin { background: var(--PINKATTITUDES-point); } body.admin .barre-admin .heure-magasin.couleur-LAUTREIMAGE .point-magasin { background: var(--LAUTREIMAGE-point); } body.admin .barre-admin .selecteur-magasin select { height: 46px; min-height: 46px; min-width: 190px; padding: 0 14px; border: 2px solid #CBD5E1; border-radius: 14px; background-color: #fff; font-size: 15px; font-weight: 500; color: #14202B; } body.admin .barre-admin .barre-compte button.lien, body.admin .barre-admin .bouton-controle { height: 46px; min-height: 46px; padding: 0 16px; border: 2px solid #CBD5E1; border-radius: 14px; background: #fff; color: #14202B; font-size: 15px; font-weight: 700; text-decoration: none; } body.admin .barre-admin .bouton-controle { padding: 0 12px; } body.admin .barre-admin button:focus-visible, body.admin .barre-admin select:focus-visible { outline: 3px solid #2563EB; outline-offset: 3px; } /* Accueil : titre, pastilles de la nuit, cartes des magasins en dégradé, raccourcis, portails */ body.admin main.page-admin:has(.pastille-synchro) .titre-page h1 { font-size: 34px; font-weight: 700; color: #14202B; } /* pastille « Synchro automatique » à côté du titre de l'Accueil (19/10/2026) */ .pastille-synchro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; box-sizing: border-box; } .pastille-synchro.ok { background: #DCFCE7; color: #14532D; } .pastille-synchro.attention { background: #FEF3C7; color: #78350F; } .pastille-synchro.ko { background: #FEE2E2; color: #7F1D1D; } .pastille-synchro.neutre { background: #E2E8F0; color: #1E293B; } .pastille-synchro:focus-visible { outline: 3px solid #2563EB; outline-offset: 3px; } body.admin .contenu-page.sans-cadre > .alertes-admin { margin-top: 16px; } .cartes-magasins.cartes-degrade { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } body.admin .cartes-degrade .carte-degrade { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 0; border-radius: 26px; color: #fff; box-shadow: 0 16px 34px var(--dOmbre); min-width: 0; } body.admin .cartes-degrade .carte-degrade > * { position: relative; } body.admin .cartes-degrade .carte-degrade .carte-magasin-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; } body.admin .cartes-degrade .carte-degrade .carte-magasin-titre { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } body.admin .cartes-degrade .carte-degrade .carte-magasin-titre .magasin { font-size: 21px; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: none; padding: 0; } body.admin .cartes-degrade .carte-degrade .carte-magasin-titre .magasin::before { display: none; } body.admin .cartes-degrade .carte-degrade .mode { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--dVoile, rgba(0, 0, 0, 0.30)); color: #fff; border: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } body.admin .cartes-degrade .carte-degrade .bouton-ouvrir { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--dTexte, var(--dA)); font-size: 16px; font-weight: 700; text-decoration: none; } body.admin .cartes-degrade .carte-degrade .bouton-ouvrir:focus-visible, .bouton-portail:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #1E293B; } body.admin .cartes-degrade .carte-degrade .compteurs-magasin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; } body.admin .cartes-degrade .carte-degrade .compteur-magasin { padding: 12px 14px; border-radius: 16px; background: var(--dVoile, rgba(0, 0, 0, 0.24)); min-width: 0; border: 0; } body.admin .cartes-degrade .carte-degrade .compteur-magasin.large { grid-column: span 2; } body.admin .cartes-degrade .carte-degrade .compteur-magasin .libelle, .carte-degrade .cadre-synchro .libelle { display: block; font-size: 13px; font-weight: 500; color: var(--dClair); } body.admin .cartes-degrade .carte-degrade .compteur-magasin .valeur { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; color: #fff; overflow-wrap: anywhere; } body.admin .cartes-degrade .carte-degrade .cadre-synchro { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--dVoile, rgba(0, 0, 0, 0.24)); border: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; } body.admin .cartes-degrade .carte-degrade .cadre-synchro .petit-texte { color: #fff; font-weight: 500; font-size: 13px; } body.admin .cartes-degrade .carte-degrade .pastille-etat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; } body.admin .cartes-degrade .carte-degrade .pastille-etat.ko, .carte-degrade .cadre-synchro .etat-ko { background: #FEE2E2; color: #7F1D1D; padding: 3px 10px; border-radius: 999px; } body.admin .cartes-degrade .carte-degrade .pastille-etat.attention { background: #FEF3C7; color: #78350F; } body.admin .cartes-degrade .carte-degrade .cadre-synchro .etat-ko::before { display: none; } .titre-accueil { margin: 40px 0 16px; font-size: 24px; font-weight: 700; color: #14202B; } .grands-raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .grand-raccourci { display: flex; align-items: center; gap: 14px; min-height: 80px; box-sizing: border-box; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(20, 32, 43, 0.08); text-decoration: none; color: #14202B; font-size: 17px; font-weight: 700; transition: transform 0.2s ease; } .grand-raccourci:hover, .bouton-portail:hover { transform: translateY(-3px); } .grand-raccourci:focus-visible { outline: 3px solid #2563EB; outline-offset: 3px; } .rond-raccourci { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7C3AED, #2563EB); color: #fff; } .autres-raccourcis.raccourcis-compacts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .autres-raccourcis .raccourci { min-height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; box-shadow: none; font-size: 14px; font-weight: 500; color: #334155; } .portails-employes .boutons-portails { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .bouton-portail.degrade-LOVESHOP, .bouton-portail.degrade-PINKATTITUDES, .bouton-portail.degrade-LAUTREIMAGE { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 0 26px; border: 0; border-radius: 22px; color: #fff; text-decoration: none; box-shadow: 0 12px 26px var(--dOmbre); transition: transform 0.2s ease; } .bouton-portail .magasin-portail { font-size: 19px; font-weight: 700; letter-spacing: 0.1em; color: #fff; } .bouton-portail .voir-portail { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--dVoile, rgba(0, 0, 0, 0.28)); font-size: 15px; font-weight: 700; white-space: nowrap; } .lien-essai { margin: 32px 0 0; } .lien-essai a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: #475569; } /* corrections après les premières captures : halo dans le fond (aucun débordement), en-tête sur une ligne, textes de la maquette */ body.admin .cartes-degrade .carte-degrade { background-image: radial-gradient(circle 180px at calc(100% - 70px) 30px, var(--dHalo, rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0) 65%), linear-gradient(120deg, var(--dA) 0%, var(--dM) 55%, var(--dB) 100%); border-top: 0; } body.admin .cartes-degrade .carte-degrade .carte-magasin-titre .magasin { justify-content: flex-start; text-align: left; margin: 0; overflow-wrap: normal; } body.admin .cartes-degrade .carte-degrade .carte-magasin-mode { margin: 0; } body.admin .cartes-degrade .carte-degrade .cadre-synchro .libelle { text-transform: none; letter-spacing: 0; } body.admin .barre-admin { flex-wrap: nowrap; } body.admin .barre-admin .synchro-entete { flex-wrap: nowrap; gap: 14px; } body.admin .barre-admin .heures-synchro { flex-wrap: wrap; gap: 6px 18px; } @media (max-width: 1100px) { body.admin .barre-admin .synchro-entete { flex-wrap: wrap; } } body.admin .grand-raccourci .nom-raccourci { color: #14202B; } .bouton-portail.degrade-LOVESHOP, .bouton-portail.degrade-PINKATTITUDES, .bouton-portail.degrade-LAUTREIMAGE { flex-wrap: wrap; row-gap: 8px; padding: 14px 26px; box-sizing: border-box; } .bouton-portail .magasin-portail { white-space: nowrap; } /* Administration › Avances › Aperçu iPhone (18/10/2026) : téléphone dessiné (bords arrondis, Dynamic Island, barre d'état, barre d'accueil ; aucun logo), écran de 390 × 844 réduit pour tenir sans défilement (--e, calculé par apercu-avances.js), légendes à côté */ .apercu-iphone { display: flex; gap: 32px; align-items: flex-start; } .titre-page .apercu-barre { margin-left: auto; } .apercu-colonne { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; } .apercu-barre { display: flex; align-items: center; gap: 12px; } .apercu-langue { display: inline-flex; border: 1px solid var(--bord-champ); border-radius: var(--rayon-bouton); overflow: hidden; background: var(--blanc); } .apercu-langue a { min-height: 44px; min-width: 88px; box-sizing: border-box; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--texte); font-weight: 700; text-decoration: none; } .apercu-langue a + a { border-left: 1px solid var(--bord-champ); } .apercu-langue a[aria-current="true"] { background: #12203A; color: #fff; } .apercu-langue a:focus-visible, .apercu-barre .bouton:focus-visible, .iphone-page:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } .apercu-barre .bouton { min-height: 44px; display: inline-flex; align-items: center; } .iphone-place { --e: 0.55; width: calc(414px * var(--e)); height: calc(868px * var(--e)); } .iphone { width: 414px; height: 868px; box-sizing: border-box; padding: 12px; border-radius: 66px; background: #1F2937; transform: scale(var(--e)); transform-origin: top left; box-shadow: inset 0 0 0 2px #4B5563, inset 0 0 0 5px #111827, 0 18px 40px rgba(15, 23, 42, 0.25); } .iphone-ecran { position: relative; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; background: #F3F5F8; } .iphone-statut { position: absolute; top: 0; left: 0; right: 0; height: 47px; box-sizing: border-box; padding: 4px 28px 0 46px; display: flex; align-items: center; justify-content: space-between; color: #14202B; font-size: 17px; font-weight: 700; } .iphone-icones { display: inline-flex; align-items: center; gap: 6px; } .iphone-icones svg { fill: currentColor; } .iphone-ile { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; z-index: 2; } .iphone-page { position: absolute; top: 47px; left: 0; width: 390px; height: 763px; border: 0; display: block; background: #F3F5F8; } .iphone-accueil { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; justify-content: center; } .iphone-accueil span { width: 134px; height: 5px; border-radius: 3px; background: #14202B; } .apercu-legendes-bloc { flex: 1; min-width: 220px; max-width: 420px; margin-top: 24px; } .apercu-legendes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .apercu-legendes li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; } .apercu-numero { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #12203A; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .apercu-note { margin: 16px 0 0; }/* aperçu iPhone : marges resserrées pour que le téléphone garde le plus de hauteur possible */ .page-admin.carte:has(.apercu-iphone) { margin-top: 12px; margin-bottom: 0; padding-bottom: 12px; } .page-admin:has(.apercu-iphone) .onglets { margin-bottom: 10px; } .page-admin .contenu-page:has(.apercu-iphone) { padding: 14px 24px 14px; }/* Aperçu iPhone (19/10/2026) : nouvel onglet qui ne montre QUE le téléphone dessiné, centré, mis à l'échelle par apercu-avances.js */ body.page-iphone-seul { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #E5E9F0; } /* ---------- Avances : page du secrétariat (19/10/2026, maquette « AVANCES — secrétariat ») ---------- Compte Secrétariat : la page seule ; administrateur : onglet « Écran du secrétariat » (même composant, dans l'administration). */ body.page-secretariat { margin: 0; background: #F1F3F9; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page { background: #F1F3F9; color: #14202B; font-family: 'DM Sans', system-ui, sans-serif; padding-bottom: 56px; } .page-admin .sec-page { border-radius: 28px; overflow: hidden; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-largeur { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bandeau { position: relative; overflow: hidden; background: linear-gradient(120deg, #5B21B6 0%, #7C3AED 45%, #2563EB 100%); padding-bottom: 60px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bandeau .sec-largeur { padding-top: 24px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-halo { position: absolute; top: -220px; right: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0) 65%); pointer-events: none; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-haut form { margin: 0; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-titre { display: flex; align-items: center; gap: 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-titre h1 { margin: 0; font-size: 30px; font-weight: 700; color: #FFFFFF; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-pastille { padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,0.28); font-size: 14px; font-weight: 700; color: #FFFFFF; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-sortie { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.28); color: #FFFFFF; font: 500 16px 'DM Sans', system-ui, sans-serif; cursor: pointer; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-mois { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-fleche { width: 48px; height: 48px; border-radius: 14px; background: rgba(0,0,0,0.28); color: #FFFFFF; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-fleche.inactif { opacity: .4; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-mois-nom { min-width: 200px; text-align: center; padding: 0 22px; line-height: 48px; border-radius: 14px; background: #FFFFFF; color: #14202B; font-size: 20px; font-weight: 700; box-sizing: border-box; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-corps { margin-top: -28px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-message { margin: 0 0 16px; padding: 12px 18px; border-radius: 16px; font-weight: 700; background: #FFFFFF; box-shadow: 0 4px 14px rgba(20,32,43,0.08); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-message.ok { color: #14532D; border: 2px solid #86D3A5; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-message.erreur { color: #991B1B; border: 2px solid #FCA5A5; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-colonnes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-liste { flex: 1 1 300px; max-width: 380px; min-width: 0; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-liste { padding-top: 40px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-liste h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: #14202B; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-etiquette { display: block; font-size: 15px; font-weight: 700; color: #475569; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-liste .sec-etiquette { margin-bottom: 6px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-champ { display: block; width: 100%; height: 50px; box-sizing: border-box; margin-top: 6px; padding: 0 16px; border: 2px solid #CBD5E1; border-radius: 14px; background: #FFFFFF; font: 500 17px 'DM Sans', system-ui, sans-serif; color: #14202B; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-liste .sec-champ { margin: 0 0 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-employes { display: flex; flex-direction: column; gap: 10px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 14px 18px; border: 2px solid transparent; border-radius: 18px; background: #FFFFFF; box-shadow: 0 4px 14px rgba(20,32,43,0.08); color: #14202B; text-decoration: none; transition: transform .15s ease; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp:hover { transform: translateY(-2px); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp[aria-current="true"] { border-color: #7C3AED; background: #F3EEFF; box-shadow: 0 8px 20px rgba(124,58,237,0.20); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp[hidden] { display: none; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp-nom { display: block; font-size: 18px; font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp-detail { display: block; margin-top: 2px; font-size: 14px; color: #475569; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp-total { font-size: 18px; font-weight: 700; white-space: nowrap; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-aucun, :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-vide { margin: 8px 0 0; color: #475569; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-detail { flex: 2 1 520px; min-width: 0; padding: 28px; box-sizing: border-box; border-radius: 28px; background: #FFFFFF; box-shadow: 0 14px 32px rgba(20,32,43,0.10); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-detail-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-nom { margin: 0; font-size: 28px; font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-sous { margin: 2px 0 0; font-size: 16px; color: #475569; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-pdf { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 16px; background: linear-gradient(120deg, #7C3AED, #2563EB); color: #FFFFFF; font: 700 17px 'DM Sans', system-ui, sans-serif; text-decoration: none; box-shadow: 0 10px 22px rgba(79,70,229,0.28); box-sizing: border-box; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-h3 { margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-h3 + .sec-cadre-tableau + .sec-vide + .sec-h3, :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-cadre-tableau + .sec-h3 { margin-top: 32px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-point { width: 12px; height: 12px; border-radius: 50%; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-point.violet { background: linear-gradient(135deg, #7C3AED, #2563EB); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-point.vert { background: linear-gradient(135deg, #0F766E, #15803D); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-cadre-tableau { overflow-x: auto; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau thead tr { text-align: left; color: #475569; font-size: 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau th { padding: 8px 10px; font-weight: 700; text-align: left; background: none; position: static; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau td { padding: 12px 10px; border-top: 1px solid #E2E8F0; vertical-align: middle; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau .nombre { text-align: right; white-space: nowrap; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau td:first-child { white-space: nowrap; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau td.sec-action { padding: 8px 10px; text-align: right; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau tr.annulee td { color: #64748B; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau tr.annulee td.nombre strong { text-decoration: line-through; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-pastille-annulee { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 14px; font-weight: 700; text-align: left; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 2px solid #CBD5E1; border-radius: 12px; background: #FFFFFF; color: #14202B; font: 700 15px 'DM Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bouton.danger { color: #B91C1C; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bouton.plein { border-color: #7C3AED; background: #7C3AED; color: #FFFFFF; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-bouton.danger.plein { border-color: #B91C1C; background: #B91C1C; color: #FFFFFF; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ligne-form td { background: #F8FAFC; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-form-ligne .sec-etiquette { flex: 0 0 170px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-form-ligne .sec-large, :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout .sec-large { flex: 1 1 180px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-form-annuler { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #CBD5E1; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout { margin-top: 18px; padding: 20px; border-radius: 20px; background: #E8F7EE; border: 2px solid #86D3A5; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout h4 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #14532D; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout .sec-etiquette { color: #14532D; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout .sec-champ { border-color: #86D3A5; padding: 0 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout .sec-date { flex: 0 0 170px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-ajout .sec-montant { flex: 0 0 170px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-enregistrer { min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: linear-gradient(120deg, #0F766E, #15803D); color: #FFFFFF; font: 700 17px 'DM Sans', system-ui, sans-serif; cursor: pointer; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-totaux { margin-top: 26px; padding: 22px 24px; border-radius: 22px; background: #F8FAFC; border: 2px solid #E2E8F0; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-ligne + .sec-total-ligne { margin-top: 8px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-ligne strong { font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-final { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, #1E1B4B, #4C1D95); color: #FFFFFF; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-final span { font-size: 20px; font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-total-final strong { font-size: 28px; font-weight: 700; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page a:focus-visible, :is(body.admin .contenu-page, body.page-secretariat) .sec-page button:focus-visible, :is(body.admin .contenu-page, body.page-secretariat) .sec-page input:focus-visible { outline: 3px solid #93C5FD; outline-offset: 3px; } @media (max-width: 700px) { :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-largeur { padding: 0 16px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-detail { padding: 20px; } } /* 19/10/2026 : liste déroulante « Employé », cases à cocher et « Imprimer la sélection » */ :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-choix-employe { margin: 0 0 14px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-choix-employe select { appearance: auto; cursor: pointer; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-selection-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 10px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case-tout { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 700; color: #14202B; cursor: pointer; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case-tout input, :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case input { width: 22px; height: 22px; margin: 0; accent-color: #7C3AED; cursor: pointer; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-compteur { font-size: 15px; font-weight: 700; color: #475569; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp-carte { position: relative; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-emp-carte .sec-emp { padding-left: 62px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case { position: absolute; left: 6px; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: flex; align-items: center; justify-content: center; z-index: 1; cursor: pointer; border-radius: 12px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case:has(input:focus-visible) { outline: 3px solid #93C5FD; outline-offset: 0; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-impression { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 4px 14px rgba(20,32,43,0.08); display: flex; flex-direction: column; gap: 12px; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-imprimer-selection { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 16px; background: linear-gradient(120deg, #7C3AED, #2563EB); color: #FFFFFF; font: 700 17px 'DM Sans', system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 22px rgba(79,70,229,0.28); } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-imprimer-selection:disabled { background: #E2E8F0; color: #475569; box-shadow: none; cursor: not-allowed; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-tableau td.sec-donne-par { white-space: nowrap; } :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-choix-employe select:focus { outline: 3px solid #93C5FD; outline-offset: 3px; } /* liste déroulante : contour à chaque mise au point */ :is(body.admin .contenu-page, body.page-secretariat) .sec-page .sec-case-tout { flex-direction: row; } /* Raccourcis et menu déplaçables (19/10/2026) : même balise pour un grand et un petit raccourci, le groupe décide de l'apparence */ .grands-raccourcis .icone-petite { display: none; } .autres-raccourcis .rond-raccourci { display: none; } .autres-raccourcis .icone-petite { display: inline-flex; color: #1d4ed8; } [data-deplacable] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .place-deplacement { opacity: 0.35; outline: 2px dashed #7C3AED; outline-offset: 2px; } .fantome-deplacement { position: fixed; z-index: 1000; margin: 0; pointer-events: none; transform: scale(1.05); box-shadow: 0 18px 36px rgba(20, 32, 43, 0.28); opacity: 0.96; transition: none !important; } .menu-admin .fantome-deplacement, a.fantome-deplacement { display: flex; align-items: center; gap: 12px; } body.deplacement-en-cours, body.deplacement-en-cours * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; } .menu-entrees { display: flex; flex-direction: column; gap: 4px; } .aide-deplacer { margin: 10px 0 0; color: #475569; } .ordre-origine { margin: 24px 0 0; } body.admin .contenu-page .ordre-origine button.bouton-lien { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 400; color: #475569; text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; } @media (max-width: 900px) { .menu-entrees { flex-direction: row; flex-wrap: wrap; } } /* pastilles « Synchro automatique » et « Sauvegarde de nuit » sur la ligne du titre de l'Accueil ; à la ligne si la place manque */ .pastilles-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .pastille-synchro span { overflow-wrap: anywhere; } /* ---------- LOVE SHOP, rose du logo (19/10/2026) : textes blancs posés sur le voile sombre (--bande-voile, --p-voile) ---------- Le dégradé du logo s'éclaircit vers la droite : tout texte blanc de la bande des pages des employés et du nom sur le portail est posé sur un panneau sombre translucide (contraste d'au moins 4,5:1 mesuré par tests/navigateur/couleurs-magasins.ts). */ .bande.bandeau-LOVESHOP :is(a.accueil, a.home), .bande.bandeau-LOVESHOP .titreBande, .bande.bandeau-LOVESHOP .compte .changer-magasin button.lien { background: var(--bande-voile); border-radius: 999px; padding-left: 14px; padding-right: 14px; } .bande.bandeau-LOVESHOP .titreBande { padding-top: 6px; padding-bottom: 6px; } body.portail-v2.couleur-LOVESHOP .p2-magasin { background: var(--p-voile); border-radius: 999px; padding: 6px 18px; } /* ---------- Connexion, choix du magasin, double vérification : « B · Écran partagé » (20/10/2026, maquette validée) ---------- À gauche, panneau indigo en dégradé vertical (« Plateforme magasins », « Bienvenue. », les 3 magasins avec leur trait de couleur) ; à droite, fond blanc : badge d'essai et bouton de langue en haut, formulaire au centre, sans carte. Téléphone : panneau au-dessus, réduit. */ body.page-connexion { background: #FFFFFF; color: #14202B; } body.page-connexion .cxb-page { display: flex; min-height: 100vh; font-family: 'DM Sans', system-ui, sans-serif; color: #14202B; background: #FFFFFF; } body.page-connexion .cxb-panneau { flex: 1 1 520px; min-width: 0; box-sizing: border-box; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; background-color: #1E1B4B; background-image: linear-gradient(180deg, #1E1B4B 0%, #2E2A7A 100%); color: #FFFFFF; } body.page-connexion .cxb-marque { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; } body.page-connexion .cxb-bienvenue { margin: 0; font-size: 64px; line-height: 1.05; font-weight: 700; } body.page-connexion .cxb-phrase { margin: 16px 0 0; max-width: 420px; font-size: 22px; line-height: 1.4; color: #E0E7FF; } body.page-connexion .cxb-magasins { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } body.page-connexion .cxb-magasins li { display: flex; align-items: center; gap: 14px; } body.page-connexion .cxb-trait { flex: none; width: 56px; height: 8px; border-radius: 999px; } body.page-connexion .cxb-trait.trait-LOVESHOP { background: var(--LOVESHOP-trait); } body.page-connexion .cxb-trait.trait-PINKATTITUDES { background: var(--PINKATTITUDES-trait); } body.page-connexion .cxb-trait.trait-LAUTREIMAGE { background: var(--LAUTREIMAGE-trait); } body.page-connexion .cxb-nom { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; } body.page-connexion .cxb-droite { flex: 1 1 480px; min-width: 0; box-sizing: border-box; padding: 40px 44px; display: flex; flex-direction: column; background: #FFFFFF; } body.page-connexion .cxb-droite .cx-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } body.page-connexion .cxb-centre { flex: 1; display: flex; align-items: center; justify-content: center; } body.page-connexion .cxb-formulaire { width: 100%; max-width: 410px; padding: 36px 0; } body.page-connexion .cxb-formulaire h1 { margin: 0; font-size: 42px; line-height: 1.15; font-weight: 700; color: #14202B; text-align: left; } body.page-connexion .cxb-formulaire.cxb-simple h1 { margin-bottom: 26px; font-size: 36px; } body.page-connexion .cxb-consigne { margin: 10px 0 30px; font-size: 18px; line-height: 1.4; color: #4B5563; } body.page-connexion .cxb-consigne:has(+ .cxb-message) { margin-bottom: 22px; } body.page-connexion .cxb-formulaire > p:not([class]) { font-size: 17px; line-height: 1.45; color: #374151; } /* messages existants (textes inchangés) : bandeau rouge clair avec icône au-dessus des champs ; information : bleu clair */ body.page-connexion .cxb-message { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; font-size: 17px; font-weight: 700; line-height: 1.35; } body.page-connexion .cxb-message svg { flex: 0 0 26px; margin-top: -1px; } body.page-connexion .cxb-message.erreur { background: #FEE2E2; border: 2px solid #FCA5A5; color: #7F1D1D; } body.page-connexion .cxb-message.info { background: #E0E7FF; border: 2px solid #C7D2FE; color: #1E1B4B; } /* champs : 60 px, icône à gauche, contour indigo et halo au focus, rouge quand le prénom ou le mot de passe est refusé */ body.page-connexion .cxb-champs { display: block; margin: 0; } body.page-connexion .cxb-champs > label:not(.case) { display: block; margin: 22px 0 8px; font-size: 18px; font-weight: 700; color: #14202B; } body.page-connexion .cxb-champs > label:first-child { margin-top: 0; } body.page-connexion .cxb-champ { position: relative; } body.page-connexion .cxb-champ .cxb-icone { position: absolute; left: 18px; top: 18px; color: #6B7280; pointer-events: none; } body.page-connexion .cxb-champ input { display: block; width: 100%; height: 60px; min-height: 60px; box-sizing: border-box; margin: 0; padding: 0 18px 0 54px; border: 2px solid #CBD5E1; border-radius: 14px; background: #FFFFFF; font: 500 20px 'DM Sans', system-ui, sans-serif; color: #14202B; } body.page-connexion .cxb-champ.cxb-sans-icone input { padding-left: 18px; } body.page-connexion .cxb-champ-mdp input { padding-right: 60px; } body.page-connexion .cxb-champ input:focus, body.page-connexion .cxb-champ input:focus-visible { outline: none; border-color: #3730A3; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14); } body.page-connexion .cxb-champ input[aria-invalid="true"] { border-color: #DC2626; } body.page-connexion .cxb-champ input[aria-invalid="true"]:focus { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.16); } body.page-connexion .cxb-oeil { position: absolute; right: 6px; top: 6px; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #4B5563; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none; } body.page-connexion .cxb-oeil:hover { background: #EEF2FF; color: #1E1B4B; } body.page-connexion .cxb-oeil .oeil-ferme, body.page-connexion .cxb-oeil[aria-pressed="true"] .oeil-ouvert { display: none; } body.page-connexion .cxb-oeil[aria-pressed="true"] .oeil-ferme { display: block; } body.page-connexion .cxb-champs label.case { margin: 18px 0 0; font-size: 17px; color: #14202B; } body.page-connexion .cxb-envoyer { margin-top: 30px; width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border: 0; border-radius: 14px; background-color: #1E1B4B; background-image: linear-gradient(120deg, #1E1B4B, #3730A3); color: #FFFFFF; font: 700 21px 'DM Sans', system-ui, sans-serif; cursor: pointer; box-shadow: 0 12px 26px rgba(30, 27, 75, 0.30); } body.page-connexion .cxb-envoyer svg { width: 24px; height: 24px; flex: none; } body.page-connexion .cxb-oublie { margin: 22px 0 0; font-size: 16px; line-height: 1.45; color: #4B5563; } /* choix du magasin : grands boutons de 80 px aux dégradés des magasins, « Se déconnecter » dessous, à gauche */ body.page-connexion .cxb-formulaire .cx-magasins { display: flex; flex-direction: column; gap: 14px; } body.page-connexion .cxb-formulaire .cx-magasin { min-height: 80px; padding: 0 26px; border-radius: 20px; font-size: 21px; letter-spacing: 0.12em; } body.page-connexion .cxb-formulaire .cx-magasin.degrade-LOVESHOP { background-color: var(--LOVESHOP-dB); background-image: var(--LOVESHOP-choix); box-shadow: 0 12px 26px var(--LOVESHOP-choix-ombre); } body.page-connexion .cxb-formulaire .cx-magasin.degrade-PINKATTITUDES { background-color: var(--PINKATTITUDES-dB); background-image: var(--PINKATTITUDES-choix); box-shadow: 0 12px 26px var(--PINKATTITUDES-choix-ombre); } body.page-connexion .cxb-formulaire .cx-magasin.degrade-LAUTREIMAGE { background-color: var(--LAUTREIMAGE-dB); background-image: var(--LAUTREIMAGE-choix); box-shadow: 0 12px 26px var(--LAUTREIMAGE-choix-ombre); } /* LOVE SHOP : son dégradé s'éclaircit vers la droite ; comme ailleurs, le nom et la flèche blancs sont posés sur le voile sombre */ body.page-connexion .cxb-formulaire .cx-magasin.degrade-LOVESHOP > span { margin-left: -12px; padding: 6px 12px; border-radius: 999px; background: var(--LOVESHOP-voile); } body.page-connexion .cxb-formulaire .cx-magasin.degrade-LOVESHOP > svg { box-sizing: content-box; padding: 7px; margin-right: -9px; border-radius: 50%; background: var(--LOVESHOP-voile); } body.page-connexion .cxb-formulaire .cx-deconnexion { margin: 22px 0 0; justify-content: flex-start; } body.page-connexion .cxb-formulaire .cx-deconnexion button.lien { min-height: 48px; padding: 0; color: #374151; font: 700 17px 'DM Sans', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 5px; } body.page-connexion .cxb-page :is(a, button, input[type=checkbox]):focus-visible { outline: 3px solid #818CF8; outline-offset: 3px; } /* tablette étroite et téléphone : le panneau passe au-dessus du formulaire, réduit */ @media (max-width: 860px) { body.page-connexion .cxb-page { flex-direction: column; } body.page-connexion .cxb-panneau { flex: none; padding: 20px 20px 22px; gap: 14px; } body.page-connexion .cxb-marque { font-size: 15px; } body.page-connexion .cxb-bienvenue { font-size: 34px; } body.page-connexion .cxb-phrase { margin-top: 6px; font-size: 17px; } body.page-connexion .cxb-magasins { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } body.page-connexion .cxb-magasins li { gap: 8px; } body.page-connexion .cxb-trait { width: 24px; height: 6px; } body.page-connexion .cxb-nom { font-size: 13px; letter-spacing: 0.08em; } body.page-connexion .cxb-droite { flex: 1 0 auto; padding: 16px; } body.page-connexion .cxb-centre { align-items: flex-start; } body.page-connexion .cxb-formulaire { padding: 20px 0 24px; } body.page-connexion .cxb-formulaire h1 { font-size: 34px; } body.page-connexion .cxb-formulaire.cxb-simple h1 { font-size: 28px; } } /* ---------- Bouton de langue UNIQUE (20/10/2026) : globe + nom de l'autre langue, partout où il y a un choix de langue ---------- Fond blanc (connexion, choix du magasin) : contour #C7D2FE, texte #1E1B4B. Sur un fond en dégradé ou de couleur (portail, bandes des applications) : « sur-fonce » = pastille sombre translucide à texte blanc. */ .bouton-langue { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 20px; border: 2px solid #C7D2FE; border-radius: 999px; background: #FFFFFF; color: #1E1B4B; font: 700 17px 'DM Sans', system-ui, sans-serif; letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none; } .bouton-langue:hover { background: #EEF2FF; } .bouton-langue .globe { flex: none; } .bouton-langue:focus-visible { outline: 3px solid #818CF8; outline-offset: 3px; } .bouton-langue.sur-fonce, body.portail-v2 .bouton-langue.sur-fonce { gap: 10px; border: 0; padding: 0 20px; background: rgba(0, 0, 0, 0.38); color: #FFFFFF; } .bouton-langue.sur-fonce:hover { background: rgba(0, 0, 0, 0.5); } .bouton-langue.sur-fonce:focus-visible { outline-color: #FFFFFF; } @media (max-width: 460px) { .bouton-langue { padding: 0 14px; gap: 8px; } } /* ---------- Notes de l'administrateur (21/10/2026, maquette validée « NOTES — administration ») ---------- Bandeau violet → bleu, liste à gauche (magasin, recherche, cartes), note à droite dans une grande carte blanche. Tout est sous .nt-page. */ body.admin main.carte .contenu-page .nt-page { --nt-texte: #14202B; --nt-doux: #475569; --nt-bord: #CBD5E1; --nt-indigo: #3730A3; font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--nt-texte); padding-bottom: 32px; } .nt-page .nt-LOVESHOP { background: var(--LOVESHOP); } .nt-page .nt-PINKATTITUDES { background: var(--PINKATTITUDES); } .nt-page .nt-LAUTREIMAGE { background: var(--LAUTREIMAGE); } .nt-page .nt-GENERAL { background: #64748B; } /* 24/10/2026 : mise en page de la maquette validée « NOTES — administration » : fil d'Ariane, bandeau violet FIN, colonne de gauche de 290 px collée à gauche, cartes compactes, fond clair, contours fins ; magasins en cases à cocher, désignation en liste (ajout possible). */ .nt-page .nt-fil { margin: -6px 0 -10px; font-size: 14px; color: #475569; } body.admin main.carte .contenu-page .nt-page .nt-fil a { display: inline-flex; align-items: center; min-height: 44px; color: #1D4ED8; text-decoration: none; font-weight: 500; } .nt-page .nt-fil a:hover { text-decoration: underline; } .nt-page .nt-fil b { color: var(--nt-texte); } .nt-page .nt-bandeau { position: relative; margin-top: 10px; padding: 10px 18px; border-radius: 18px; background: linear-gradient(120deg, #5B21B6 0%, #7C3AED 55%, #2563EB 100%); } .nt-page .nt-bandeau-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; } .nt-page .nt-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; } .nt-page .nt-titre h1 { margin: 0; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.25; } .nt-page .nt-badge { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; } .nt-page .nt-actions-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body.admin main.carte .contenu-page .nt-page a.nt-lien-corbeille { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.30); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; } body.admin main.carte .contenu-page .nt-page a.nt-lien-corbeille:hover { background: rgba(0, 0, 0, 0.42); } body.admin main.carte .contenu-page .nt-page button.nt-nouvelle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; gap: 8px; border: 0; border-radius: 999px; background: #fff; color: #4C1D95; font-size: 15px; font-weight: 700; } body.admin main.carte .contenu-page .nt-page button.nt-nouvelle:hover { background: #F5F3FF; } .nt-page .nt-colonnes { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .nt-page .nt-gauche { flex: 0 0 290px; min-width: 0; max-width: 100%; } body.admin main.carte .contenu-page .nt-page label.nt-etiquette { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--nt-doux); } body.admin main.carte .contenu-page .nt-page .nt-champ { display: block; width: 100%; height: 44px; margin: 0 0 10px; padding: 0 12px; border: 1px solid #D5D9E4; border-radius: 12px; background: #fff; font: 500 15px 'DM Sans', system-ui, sans-serif; color: var(--nt-texte); } .nt-page .nt-recherche { position: relative; margin-bottom: 12px; } .nt-page .nt-recherche svg { position: absolute; left: 12px; top: 13px; pointer-events: none; } body.admin main.carte .contenu-page .nt-page .nt-recherche input.nt-champ { margin: 0; padding-left: 38px; } .nt-page .nt-liste { display: flex; flex-direction: column; gap: 6px; } body.admin main.carte .contenu-page .nt-page button.nt-carte { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #E3E6EF; border-radius: 14px; background: #fff; box-shadow: none; text-align: left; color: var(--nt-texte); font-family: inherit; transition: background 0.15s ease; } body.admin main.carte .contenu-page .nt-page button.nt-carte:hover { background: #F3F0FF; } body.admin main.carte .contenu-page .nt-page button.nt-carte[aria-pressed="true"] { border: 2px solid #7C3AED; padding: 9px 13px; background: #F3F0FF; box-shadow: none; } .nt-page .nt-carte-titre { display: flex; align-items: flex-start; gap: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .nt-page .nt-etoile { display: inline-flex; color: #7C3AED; flex: none; margin-top: 2px; } .nt-page .nt-etoile svg { width: 14px; height: 14px; } .nt-page .nt-carte-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--nt-doux); overflow-wrap: anywhere; } /* pastilles à lettres (24/10/2026) : la lettre est l'information, la couleur un léger repère */ .nt-page .nt-pastilles { display: inline-flex; gap: 4px; flex: none; } .nt-page .nt-pastille { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 22px; min-width: 22px; padding: 0 6px; border: 1px solid; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } .nt-page .nt-pastille-LOVESHOP { color: var(--LOVESHOP-texte); background: #FDF2F8; border-color: #F9A8D4; } .nt-page .nt-pastille-PINKATTITUDES { color: #6D28D9; background: #F5F3FF; border-color: #C4B5FD; } .nt-page .nt-pastille-LAUTREIMAGE { color: var(--LAUTREIMAGE-p-lien); background: #F0F9FF; border-color: #7DD3FC; } .nt-page .nt-general { color: var(--nt-doux); } .nt-page .nt-legende { margin: -4px 0 12px; font-size: 12px; color: var(--nt-doux); } .nt-page .nt-legende b { color: var(--nt-texte); } .nt-page .nt-vide { margin: 0; padding: 14px; border: 1px solid #E3E6EF; border-radius: 14px; background: #fff; color: var(--nt-doux); font-size: 15px; } .nt-page .nt-note .nt-vide { padding: 0; border: 0; background: none; } .nt-page .nt-vide-petit { margin: 0; color: var(--nt-doux); font-size: 15px; } .nt-page .nt-note { flex: 1 1 520px; min-width: 0; padding: 22px 24px 26px; border: 1px solid #E3E6EF; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(20, 32, 43, 0.06); } .nt-page .nt-note-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .nt-page .nt-note-titre { flex: 1 1 260px; min-width: 0; } body.admin main.carte .contenu-page .nt-page textarea.nt-titre-champ { display: block; width: 100%; min-height: 48px; margin: 0; padding: 6px 12px; border: 2px solid transparent; border-radius: 12px; background: transparent; font: 700 24px/1.25 'DM Sans', system-ui, sans-serif; color: var(--nt-texte); resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; } body.admin main.carte .contenu-page .nt-page textarea.nt-titre-champ:hover { border-color: #E2E8F0; } body.admin main.carte .contenu-page .nt-page textarea.nt-titre-champ:focus { border-color: #A5B4FC; outline: none; } .nt-page .nt-boutons-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nt-page .nt-reglages { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; } .nt-page .nt-reglage-magasins { flex: 1 1 340px; min-width: 0; margin: 0; padding: 0; border: 0; } .nt-page .nt-reglage-magasins legend { padding: 0; } .nt-page .nt-reglage-designation { flex: 0 1 290px; min-width: 0; position: relative; } .nt-page .nt-reglage-titre { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--nt-doux); } .nt-page .nt-cases { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; } body.admin main.carte .contenu-page .nt-page label.nt-case { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #D5D9E4; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: var(--nt-texte); cursor: pointer; } body.admin main.carte .contenu-page .nt-page label.nt-case input { display: inline-block; width: 20px; height: 20px; margin: 0; flex: none; } body.admin main.carte .contenu-page .nt-page label.nt-case-LOVESHOP input { accent-color: var(--LOVESHOP-texte); } body.admin main.carte .contenu-page .nt-page label.nt-case-PINKATTITUDES input { accent-color: var(--PINKATTITUDES-texte); } body.admin main.carte .contenu-page .nt-page label.nt-case-LAUTREIMAGE input { accent-color: var(--LAUTREIMAGE-texte); } body.admin main.carte .contenu-page .nt-page label.nt-case-LOVESHOP:has(input:checked) { border: 2px solid var(--LOVESHOP); padding: 0 13px; background: var(--LOVESHOP-pale); } body.admin main.carte .contenu-page .nt-page label.nt-case-PINKATTITUDES:has(input:checked) { border: 2px solid var(--PINKATTITUDES); padding: 0 13px; background: var(--PINKATTITUDES-pale); } body.admin main.carte .contenu-page .nt-page label.nt-case-LAUTREIMAGE:has(input:checked) { border: 2px solid var(--LAUTREIMAGE); padding: 0 13px; background: var(--LAUTREIMAGE-pale); } .nt-page .nt-aide { margin: 6px 0 0; font-size: 13px; color: #475569; } body.admin main.carte .contenu-page .nt-page button.nt-designation { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 6px 14px; border: 2px solid #D5D9E4; border-radius: 12px; background: #fff; font: 700 16px/1.3 'DM Sans', system-ui, sans-serif; color: var(--nt-texte); text-align: left; overflow-wrap: anywhere; } body.admin main.carte .contenu-page .nt-page button.nt-designation[aria-expanded="true"], body.admin main.carte .contenu-page .nt-page button.nt-designation:hover { border-color: #7C3AED; } .nt-page .nt-designation svg { flex: none; } .nt-page .nt-menu-designation { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 290px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 6px; border: 1px solid #D5D9E4; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(20, 32, 43, 0.18); } .nt-page .nt-options { max-height: 300px; overflow-y: auto; } body.admin main.carte .contenu-page .nt-page button.nt-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; font: 500 15px/1.3 'DM Sans', system-ui, sans-serif; color: var(--nt-texte); text-align: left; overflow-wrap: anywhere; } body.admin main.carte .contenu-page .nt-page button.nt-option:hover, body.admin main.carte .contenu-page .nt-page button.nt-option:focus-visible { background: #F3F0FF; } body.admin main.carte .contenu-page .nt-page button.nt-option[aria-selected="true"] { background: #F3F0FF; font-weight: 700; } .nt-page .nt-ajoutee { flex: none; padding: 2px 8px; border-radius: 999px; background: #EEF2F7; font-size: 12px; font-weight: 700; color: #475569; } .nt-page .nt-separateur { margin: 6px 4px; height: 1px; background: #E3E6EF; } .nt-page .nt-nouvelle-designation { padding: 4px 8px 8px; } body.admin main.carte .contenu-page .nt-page label.nt-nouvelle-titre { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--nt-indigo); } .nt-page .nt-nouvelle-ligne { display: flex; gap: 8px; } body.admin main.carte .contenu-page .nt-page input.nt-nouvelle-champ { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 12px; border: 1px solid #A5B4FC; border-radius: 10px; font: 500 15px 'DM Sans', system-ui, sans-serif; color: var(--nt-texte); } body.admin main.carte .contenu-page .nt-page button.nt-ajouter-designation { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: linear-gradient(120deg, #6D28D9, #2563EB); color: #fff; font: 700 15px 'DM Sans', system-ui, sans-serif; } .nt-page .nt-message-designation { min-height: 0; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #B91C1C; } .nt-page .nt-message-designation:empty { display: none; } .nt-page .nt-etat { font-size: 14px; font-weight: 500; color: var(--nt-doux); } .nt-page .nt-etat.nt-erreur, .nt-page .nt-message-image.nt-erreur { color: #B91C1C; font-weight: 700; } body.admin main.carte .contenu-page .nt-page button.nt-bouton { min-height: 44px; padding: 0 16px; border: 2px solid var(--nt-bord); border-radius: 12px; background: #fff; color: #334155; font-size: 15px; font-weight: 700; } body.admin main.carte .contenu-page .nt-page button.nt-bouton:hover, body.admin main.carte .contenu-page .nt-page button.nt-icone:hover:not(:disabled) { border-color: #64748B; } body.admin main.carte .contenu-page .nt-page button.nt-bouton[aria-pressed="true"][data-epingler] { border-color: #7C3AED; background: #F3EEFF; color: #5B21B6; } body.admin main.carte .contenu-page .nt-page button.nt-rouge { color: #B91C1C; } body.admin main.carte .contenu-page .nt-page h2.nt-section { margin: 28px 0 12px; font-size: 18px; font-weight: 700; color: var(--nt-texte); } body.admin main.carte .contenu-page .nt-page h2.nt-section label { display: inline; font-size: inherit; color: inherit; } .nt-page .nt-lignes { display: flex; flex-direction: column; gap: 10px; } /* 23/10/2026 : ligne en grille. Libellé large (sur deux lignes s'il est long, jamais « … »), valeur plus étroite (points courts et de largeur fixe ; valeur affichée : sous le libellé, à la ligne si elle est longue), « Afficher » et « Copier » à une place fixe à droite. Ligne étroite (moins de 520 px) : libellé, puis valeur, puis boutons, chacun sur toute la largeur. */ .nt-page .nt-lignes { container-type: inline-size; } .nt-page .nt-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 16px; background: #F8FAFC; border: 2px solid #E2E8F0; } .nt-page .nt-libelle-boite { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--nt-doux); } .nt-page .nt-cadenas { display: inline-flex; flex: none; } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-libelle, textarea.nt-valeur, input.nt-valeur) { box-sizing: border-box; display: block; min-width: 0; min-height: 44px; margin: 0; padding: 9px 6px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--nt-texte); } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-libelle, textarea.nt-valeur) { width: 100%; height: 44px; resize: none; overflow: hidden; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; } body.admin main.carte .contenu-page .nt-page textarea.nt-libelle { flex: 1 1 auto; font: 700 16px/1.3 'DM Sans', system-ui, sans-serif; color: var(--nt-doux); } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-valeur, input.nt-valeur) { grid-column: 2; grid-row: 1; font: 500 18px/1.3 'DM Sans', system-ui, sans-serif; } body.admin main.carte .contenu-page .nt-page input.nt-valeur[type=password] { width: 100px; max-width: 100%; height: 44px; justify-self: start; font-size: 22px; letter-spacing: 0.18em; } body.admin main.carte .contenu-page .nt-page .nt-ligne.nt-affichee textarea.nt-valeur-vue { grid-column: 1 / 3; grid-row: 2; user-select: text; } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-libelle, textarea.nt-valeur, input.nt-valeur):hover { border-color: #E2E8F0; background: #fff; } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-libelle, textarea.nt-valeur, input.nt-valeur):focus { border-color: var(--nt-bord); background: #fff; outline: none; } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-libelle, textarea.nt-valeur, input.nt-valeur)::placeholder { color: #64748B; font-weight: 500; letter-spacing: 0; } .nt-page .nt-actions-ligne { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } @container (max-width: 519px) { .nt-page .nt-ligne { grid-template-columns: minmax(0, 1fr); } .nt-page .nt-libelle-boite { grid-column: 1; grid-row: 1; } body.admin main.carte .contenu-page .nt-page :is(textarea.nt-valeur, input.nt-valeur), body.admin main.carte .contenu-page .nt-page .nt-ligne.nt-affichee textarea.nt-valeur-vue { grid-column: 1; grid-row: 2; } .nt-page .nt-actions-ligne { grid-column: 1; grid-row: 3; } } body.admin main.carte .contenu-page .nt-page button.nt-copier { min-width: 84px; padding: 0 14px; border-color: #C7D2FE; color: var(--nt-indigo); font-size: 15px; } body.admin main.carte .contenu-page .nt-page button.nt-copier.nt-copie { border-color: #15803D; background: #F0FDF4; color: #166534; } body.admin main.carte .contenu-page .nt-page button.nt-voir { min-width: 100px; padding: 0 12px; font-size: 15px; } body.admin main.carte .contenu-page .nt-page button.nt-icone { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 2px solid #E2E8F0; border-radius: 12px; background: #fff; color: #334155; } body.admin main.carte .contenu-page .nt-page button.nt-icone.nt-rouge { color: #B91C1C; } body.admin main.carte .contenu-page .nt-page button.nt-icone:disabled { background: #F8FAFC; border-color: #E2E8F0; color: #94A3B8; } .nt-page .nt-ajouts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } /* « Réordonner ou supprimer » : flèches et croix à la place de Afficher / Copier (lignes à la largeur de la maquette) */ .nt-page .nt-lignes:not(.nt-mode-ordre) .nt-actions-ordre, .nt-page .nt-lignes.nt-mode-ordre .nt-actions-usage { display: none; } .nt-page .nt-actions-ordre, .nt-page .nt-actions-usage { display: flex; flex-wrap: wrap; gap: 8px; } body.admin main.carte .contenu-page .nt-page button.nt-ordre { border-style: solid; border-color: var(--nt-bord); color: #334155; } body.admin main.carte .contenu-page .nt-page button.nt-ordre[aria-pressed="true"] { border-color: #7C3AED; background: #F3EEFF; color: #5B21B6; } body.admin main.carte .contenu-page .nt-page button.nt-ajout { min-height: 44px; padding: 0 16px; border: 2px dashed #A5B4FC; border-radius: 12px; background: transparent; color: var(--nt-indigo); font-size: 15px; font-weight: 700; } body.admin main.carte .contenu-page .nt-page button.nt-ajout:hover { background: #EEF2FF; } body.admin main.carte .contenu-page .nt-page textarea.nt-texte { display: block; width: 100%; min-height: 120px; padding: 14px 16px; border-radius: 16px; border: 2px solid #E2E8F0; font: 400 17px/1.5 'DM Sans', system-ui, sans-serif; color: #1F2937; resize: vertical; } body.admin main.carte .contenu-page .nt-page textarea.nt-texte:focus { border-color: var(--nt-bord); outline: none; } .nt-page .nt-images { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; } .nt-page .nt-image { position: relative; flex: 0 0 150px; height: 110px; } body.admin main.carte .contenu-page .nt-page button.nt-miniature { display: block; width: 150px; height: 110px; padding: 0; border: 0; border-radius: 14px; background: #E2E8F0; overflow: hidden; } .nt-page .nt-miniature img { display: block; width: 100%; height: 100%; object-fit: cover; } body.admin main.carte .contenu-page .nt-page button.nt-suppr-image { position: absolute; top: 6px; right: 6px; box-shadow: 0 2px 8px rgba(20, 32, 43, 0.25); } body.admin main.carte .contenu-page .nt-page label.nt-depot { flex: 1 1 220px; min-height: 110px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 12px; border: 2px dashed #A5B4FC; border-radius: 14px; background: #F8FAFF; text-align: center; font-size: 16px; line-height: 1.4; color: var(--nt-indigo); font-weight: 700; cursor: pointer; } body.admin main.carte .contenu-page .nt-page label.nt-depot.nt-survol, body.admin main.carte .contenu-page .nt-page label.nt-depot:hover { background: #EEF2FF; border-color: #6366F1; } .nt-page .nt-souligne { text-decoration: underline; } .nt-page .nt-message-image { min-height: 22px; margin: 8px 0 0; font-size: 15px; color: var(--nt-doux); } .nt-page :is(input, select, textarea, button, a, label.nt-depot):focus-visible { outline: 3px solid #93C5FD; outline-offset: 3px; } .nt-page dialog.nt-grande { max-width: min(96vw, 1640px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px; background: #0F172A; overflow: visible; } .nt-page dialog.nt-grande::backdrop { background: rgba(15, 23, 42, 0.78); } .nt-page dialog.nt-grande img { display: block; max-width: min(96vw, 1600px); max-height: 94vh; border-radius: 16px; } body.admin main.carte .contenu-page .nt-page button.nt-fermer { position: absolute; top: -14px; right: -14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #14202B; font-size: 28px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .nt-copie-cachee { position: fixed; top: -100px; left: 0; opacity: 0; } .nt-retour a { font-weight: 700; color: #1d4ed8; } @media (max-width: 760px) { .nt-page .nt-bandeau { padding: 10px 14px; border-radius: 16px; } .nt-page .nt-colonnes { padding: 0; } .nt-page .nt-gauche { flex: 1 1 100%; max-width: none; } .nt-page .nt-note { padding: 18px; border-radius: 22px; } .nt-page .nt-actions-ligne { margin-left: 0; } } /* ===================================================================== Mode compact automatique des écrans des employés (23/10/2026) : petit écran en HAUTEUR (portable 14 pouces de PINK ATTITUDES, hauteur utile du navigateur d'environ 530 à 650 px). Apparence seulement ; au-dessus de 760 px de haut (ou sous 901 px de large), rien ne change. Portail : les trois cartes visibles sans descendre. « Consulter » : prix et stocks à côté de l'article. ===================================================================== */ @media (min-width: 901px) and (max-height: 760px) { body.portail-v2 .p2-interieur { padding: 10px 32px 0; } body.portail-v2 .p2-bande { padding-bottom: 76px; } body.portail-v2 .p2-compte button.lien { min-height: 44px; padding: 0 16px; font-size: 16px; } body.portail-v2 .p2-magasin { font-size: 18px; } body.portail-v2 .p2-salut { margin-top: 14px; font-size: 32px; } body.portail-v2 .p2-question { margin-top: 4px; font-size: 19px; } body.portail-v2 .p2-contenu { margin-top: -60px; } body.portail-v2 .p2-cartes { gap: 16px; } body.portail-v2 .p2-carte { min-height: 0; padding: 16px 20px; gap: 8px; border-radius: 22px; } body.portail-v2 .p2-icone { width: 52px; height: 52px; } body.portail-v2 .p2-icone svg { width: 26px; height: 26px; } body.portail-v2 .p2-titre { font-size: 22px; } body.portail-v2 .p2-phrase { font-size: 16px; } body.portail-v2 .p2-ouvrir { font-size: 17px; min-height: 44px; } body.portail-v2 .p2-bloc-videos { margin-top: 18px; } body.portail-v2 .p2-h2 { margin-bottom: 8px; font-size: 20px; } body.portail-v2 .p2-videos { gap: 14px; } body.portail-v2 .p2-vignette { height: 64px; border-radius: 14px; } body.portail-v2 .p2-lecture { width: 44px; height: 44px; } body.portail-v2 .p2-video-titre { margin-top: 6px; font-size: 16px; } body:has(.consulter-form) header.bande { min-height: 44px; padding-top: 2px; padding-bottom: 2px; } main.carte.etroite:has(.consulter-form) { max-width: 900px; margin-top: 10px; margin-bottom: 10px; padding-top: 14px; padding-bottom: 14px; } main.carte.etroite:has(.consulter-form) h1 { margin: 0 0 6px; font-size: 22px; } .consulter-form { margin: 0 0 10px; } .consulter-form input, body main .consulter-form input[name=code] { min-height: 48px; font-size: 22px; } .consulter-resultat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px 18px; padding: 14px; } .consulter-resultat > .consulter-article { grid-row: span 3; flex-direction: column; align-items: flex-start; } .consulter-resultat .photo-article.moyenne .photo-cadre { width: 140px; height: 140px; } .consulter-designation { font-size: 19px; } .consulter-prix { padding: 6px; } .consulter-prix strong { font-size: 36px; } .consulter-resultat > .petit-texte { grid-column: 2; margin: 0; } }