/* ------------------------------------------------------------------ GEST-CO — LE DOMAINE TARIFS & PROMOTIONS Feuille cantonnée sous « .pricing ». ⚠ FICHIER GÉNÉRÉ — ne pas modifier à la main. Source : le chantier tarifaire. Générateur : outils/cantonner-tarifs.py Les classes du tarif portent parfois les mêmes noms que celles du recouvrement (.carte, .kpi, .vide, .filtre) sans avoir le même sens. C'est le préfixe qui empêche les unes de déteindre sur les autres. Trois exceptions volontaires : le panneau latéral, la boîte de confirmation et le bandeau d'annonce s'accrochent au , donc hors de « .pricing ». Leurs noms sont uniques, ils ne heurtent rien. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ AMCOVET — Pricing & Promotions Charte reprise de GES-COM : blanc dominant, vert AMCOVET, espace, sobriété. Jamais de thème sombre. La couleur est réservée à l'alerte. ------------------------------------------------------------------ */ .pricing .marque { font-weight: 700; font-size: 19px; letter-spacing: .14em; color: var(--vert-fonce); } /* ---------------------------- Boutons ----------------------------- */ .pricing .bouton-principal { background: var(--vert); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 600; } .pricing .bouton-principal:hover { background: var(--vert-fonce); } .pricing .bouton-principal:disabled { background: var(--encre-tres-doux); cursor: not-allowed; } .pricing .bouton-secondaire { background: var(--papier); color: var(--encre); border: 1px solid var(--filet); border-radius: 8px; padding: 9px 14px; font-weight: 500; } .pricing .bouton-secondaire:hover { border-color: var(--vert); color: var(--vert-fonce); } .pricing .bouton-discret { background: none; border: 0; color: var(--bleu); padding: 4px 6px; font-weight: 500; border-radius: 6px; } .pricing .bouton-discret:hover { background: var(--bleu-clair); } .pricing .bouton-danger { color: var(--rouge); } .pricing .bouton-danger:hover { background: var(--rouge-clair); } /* --------------------------- Connexion ---------------------------- */ .pricing .connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, var(--vert-clair), transparent 70%), var(--fond); } .pricing .carte-connexion { width: 100%; max-width: 390px; background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre); padding: 36px 32px 26px; display: flex; flex-direction: column; } .pricing .carte-connexion .marque { align-self: center; margin-bottom: 18px; } .pricing .carte-connexion h1 { font-size: 18px; text-align: center; } .pricing .carte-connexion .sous-titre { text-align: center; color: var(--encre-doux); margin: 4px 0 24px; font-size: 13px; } .pricing .carte-connexion label { font-size: 12px; font-weight: 600; color: var(--encre-doux); margin-bottom: 6px; } .pricing .carte-connexion input, .pricing .carte-connexion select { font: inherit; padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--filet); border-radius: 8px; background: var(--papier); } .pricing .carte-connexion input:focus, .pricing .carte-connexion select:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); } .pricing .mention { text-align: center; font-size: 11px; color: var(--encre-doux); margin: 16px 0 0; } .pricing .erreur { color: var(--rouge); font-size: 13px; margin: 0 0 12px; } /* ------------------------- Ossature ------------------------------- */ .pricing .application { display: flex; min-height: 100vh; } .pricing .tiroir { width: 236px; flex: 0 0 236px; background: var(--papier); border-right: 1px solid var(--filet); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .pricing .tiroir-tete { padding: 22px 20px 16px; border-bottom: 1px solid var(--filet); } .pricing .tiroir-sous-titre { margin: 4px 0 0; font-size: 12px; color: var(--encre-doux); } .pricing .tiroir nav { padding: 12px 10px; flex: 1; overflow-y: auto; } .pricing .tiroir-pied { padding: 14px 20px; border-top: 1px solid var(--filet); } .pricing .confidentiel { margin: 0; font-size: 10.5px; color: var(--orange); font-weight: 600; letter-spacing: .02em; } .pricing .lien-nav { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--encre-doux); font-weight: 500; margin-bottom: 2px; } .pricing .lien-nav:hover { background: var(--fond); color: var(--encre); } .pricing .lien-nav.actif { background: var(--vert-clair); color: var(--vert-fonce); font-weight: 600; } .pricing .lien-nav .compteur { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--filet); color: var(--encre-doux); } .pricing .lien-nav .compteur.alerte { background: var(--rouge-clair); color: var(--rouge); } .pricing .separateur-nav { margin: 14px 12px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--encre-tres-doux); text-transform: uppercase; } .pricing .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pricing .entete { display: flex; align-items: center; gap: 16px; padding: 18px 28px; background: var(--papier); border-bottom: 1px solid var(--filet); position: sticky; top: 0; z-index: 5; } .pricing .entete-titre h1 { font-size: 18px; } .pricing .entete-mention { margin: 2px 0 0; font-size: 12px; color: var(--encre-doux); } .pricing .entete-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .pricing .etiquette-utilisateur { font-size: 12px; color: var(--encre-doux); } .pricing .bouton-menu { display: none; background: none; border: 0; font-size: 20px; } .pricing .voile-menu { display: none; } .pricing .vue { padding: 24px 28px 60px; } /* ---------------------------- Cartes ------------------------------ */ .pricing .carte { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; } .pricing .carte + .carte { margin-top: 18px; } .pricing .carte-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .pricing .carte-tete h2 { font-size: 15px; } .pricing .carte-tete .compteur-tete { font-size: 12px; color: var(--encre-doux); margin-left: auto; } .pricing .carte-mention { margin: 0 0 16px; font-size: 12px; color: var(--encre-doux); } .pricing .grille { display: grid; gap: 18px; } .pricing .grille-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .pricing .grille-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ----------------------------- KPI -------------------------------- */ .pricing .bandeau-kpi { display: grid; gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .pricing .kpi { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 4px; } .pricing button.kpi { cursor: pointer; transition: border-color .12s, transform .12s; } .pricing button.kpi:hover { border-color: var(--vert); transform: translateY(-1px); } .pricing .kpi-libelle { font-size: 11.5px; font-weight: 600; color: var(--encre-doux); text-transform: uppercase; letter-spacing: .04em; } .pricing .kpi-valeur { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .pricing .kpi-mention { font-size: 12px; color: var(--encre-doux); } .pricing .kpi-valeur.alerte { color: var(--rouge); } .pricing .kpi-valeur.attention { color: var(--orange); } /* --------------------------- Filtres ------------------------------ */ .pricing .barre-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--ombre); } .pricing .filtre { display: flex; flex-direction: column; gap: 4px; } .pricing .filtre label { font-size: 11px; font-weight: 600; color: var(--encre-doux); text-transform: uppercase; letter-spacing: .03em; } .pricing .filtre select, .pricing .filtre input { font: inherit; font-size: 13px; padding: 7px 10px; min-width: 150px; border: 1px solid var(--filet); border-radius: 8px; background: var(--papier); } .pricing .filtre input.large { min-width: 230px; } .pricing .filtre select:focus, .pricing .filtre input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); } .pricing .filtres-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .pricing .resume-filtre { font-size: 12px; color: var(--encre-doux); } /* --------------------------- Tableaux ----------------------------- */ .pricing .tableau-cadre { overflow-x: auto; } .pricing table.tableau { width: 100%; border-collapse: collapse; font-size: 13px; } .pricing table.tableau th { text-align: left; font-size: 11px; font-weight: 700; color: var(--encre-doux); text-transform: uppercase; letter-spacing: .04em; padding: 9px 10px; border-bottom: 1px solid var(--filet); white-space: nowrap; background: var(--papier); position: sticky; top: 0; } .pricing table.tableau th.triable { cursor: pointer; user-select: none; } .pricing table.tableau th.triable:hover { color: var(--vert-fonce); } .pricing table.tableau th .fleche { color: var(--vert); } .pricing table.tableau td { padding: 9px 10px; border-bottom: 1px solid var(--fond); } .pricing table.tableau tbody tr:hover { background: var(--vert-clair); } .pricing table.tableau tr.cliquable { cursor: pointer; } .pricing .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pricing .principal-cellule { font-weight: 600; } .pricing .secondaire { color: var(--encre-doux); font-size: 12px; } .pricing .total-ligne td { font-weight: 700; border-top: 2px solid var(--filet); background: var(--fond); } /* --------------------------- Étiquettes --------------------------- */ .pricing .etiquette { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; } .pricing .etiquette-vert { background: var(--vert-clair); color: var(--vert-fonce); } .pricing .etiquette-bleu { background: var(--bleu-clair); color: var(--bleu); } .pricing .etiquette-orange { background: var(--orange-clair); color: var(--orange); } .pricing .etiquette-rouge { background: var(--rouge-clair); color: var(--rouge); } .pricing .etiquette-gris { background: var(--fond); color: var(--encre-doux); } /* ------------------------ Points d'attention ---------------------- */ .pricing .attention-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pricing .attention-item { display: flex; gap: 12px; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--filet); background: var(--papier); align-items: flex-start; } .pricing .attention-item .puce { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px; } .pricing .attention-critique { border-left: 3px solid var(--rouge); } .pricing .attention-critique .puce { background: var(--rouge); } .pricing .attention-attention { border-left: 3px solid var(--orange); } .pricing .attention-attention .puce { background: var(--orange); } .pricing .attention-information { border-left: 3px solid var(--bleu); } .pricing .attention-information .puce { background: var(--bleu); } .pricing .attention-item h3 { font-size: 13.5px; margin-bottom: 3px; } .pricing .attention-item p { margin: 0; font-size: 12.5px; color: var(--encre-doux); line-height: 1.55; } .pricing .attention-item .aller { margin-left: auto; align-self: center; } /* --------------------------- Graphiques --------------------------- */ .pricing .graphique { width: 100%; height: auto; display: block; } .pricing .barre-fond { fill: transparent; } .pricing .barre-cliquable { cursor: pointer; } .pricing .barre-cliquable:hover .barre-fond { fill: var(--vert-clair); } .pricing .barre-libelle { font-size: 11.5px; fill: var(--encre-doux); } .pricing .barre-valeur { font-size: 11.5px; fill: var(--encre); font-weight: 600; } .pricing .barre-mention { font-size: 10px; fill: var(--encre-tres-doux); } .pricing .grille { stroke: var(--filet); stroke-width: 1; } .pricing .axe { font-size: 10.5px; fill: var(--encre-tres-doux); } .pricing .ligne-offre { stroke-dasharray: 6 4; } .pricing .graphique-vide { margin: 0; padding: 26px; text-align: center; color: var(--encre-tres-doux); font-size: 13px; } .pricing .anneau { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .pricing .anneau-svg { width: 168px; height: 168px; flex: 0 0 168px; } .pricing .anneau-total { font-size: 27px; font-weight: 700; fill: var(--encre); } .pricing .anneau-mention { font-size: 10.5px; fill: var(--encre-tres-doux); } .pricing .anneau-legende { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; } .pricing .anneau-legende li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; } .pricing .legende-libelle { color: var(--encre-doux); } .pricing .legende-valeur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .pricing .pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .pricing .legende-ligne { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--encre-doux); margin: 10px 0 0; flex-wrap: wrap; } .pricing .legende-ligne .trait { width: 18px; height: 3px; border-radius: 2px; display: inline-block; } .pricing .trait-vert { background: var(--vert); } .pricing .trait-orange { background: var(--orange); } .pricing .legende-ligne .pastille { margin-left: 8px; } /* --------------------------- Panneau ------------------------------ */ .voile-panneau { position: fixed; inset: 0; background: rgba(23, 32, 27, .32); z-index: 20; animation: apparaitre .15s ease; } @keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } } .panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 100vw); background: var(--papier); z-index: 21; box-shadow: var(--ombre-forte); display: flex; flex-direction: column; animation: glisser .18s ease; } .panneau-large { width: min(940px, 100vw); } @keyframes glisser { from { transform: translateX(24px); opacity: .6; } } .panneau-tete { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--filet); } .panneau-tete h2 { font-size: 16px; flex: 1; } .panneau-tete .fermer { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--encre-doux); border-radius: 8px; width: 32px; height: 32px; } .panneau-tete .fermer:hover { background: var(--fond); color: var(--encre); } .panneau-corps { padding: 22px 24px 40px; overflow-y: auto; flex: 1; } body.panneau-ouvert { overflow: hidden; } .pricing .actions-panneau { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); } /* --------------------------- Formulaires -------------------------- */ .pricing .formulaire { display: grid; gap: 16px; } .pricing .champ { display: flex; flex-direction: column; gap: 5px; } .pricing .champ label { font-size: 12px; font-weight: 600; color: var(--encre-doux); } .pricing .champ .aide { font-size: 11.5px; color: var(--encre-tres-doux); line-height: 1.5; } .pricing .champ input, .pricing .champ select, .pricing .champ textarea { font: inherit; font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--filet); border-radius: 8px; background: var(--papier); color: var(--encre); } .pricing .champ textarea { min-height: 70px; resize: vertical; } .pricing .champ input:focus, .pricing .champ select:focus, .pricing .champ textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); } .pricing .champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pricing .section-formulaire { border: 1px solid var(--filet); border-radius: 10px; padding: 16px; } .pricing .section-formulaire > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-doux); margin-bottom: 12px; } .pricing .choix-multiple { max-height: 210px; overflow-y: auto; border: 1px solid var(--filet); border-radius: 8px; padding: 6px; } .pricing .choix-multiple label { display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; font-size: 13px; font-weight: 400; color: var(--encre); cursor: pointer; } .pricing .choix-multiple label:hover { background: var(--fond); } .pricing .choix-multiple input { margin-top: 2px; } .pricing .choix-multiple .detail-choix { color: var(--encre-doux); font-size: 12px; } .pricing .selection-resume { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pricing .jeton { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--vert-clair); color: var(--vert-fonce); border-radius: 20px; padding: 3px 10px; font-weight: 600; } .pricing .jeton button { background: none; border: 0; color: inherit; padding: 0; font-size: 14px; } .pricing .grille-paliers { display: grid; gap: 8px; } .pricing .ligne-palier { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: center; } .pricing .ligne-palier .calcul { font-size: 12px; color: var(--encre-doux); white-space: nowrap; } /* --------------------------- Contrôles ---------------------------- */ .pricing .controles { display: grid; gap: 8px; margin-top: 4px; } .pricing .controle { display: flex; gap: 10px; padding: 10px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.55; align-items: flex-start; } .pricing .controle-erreur { background: var(--rouge-clair); color: var(--rouge); } .pricing .controle-avertissement { background: var(--orange-clair); color: var(--orange); } .pricing .controle-succes { background: var(--vert-clair); color: var(--vert-fonce); } .pricing .controle strong { font-weight: 700; } /* --------------------------- Annonces ----------------------------- */ .annonce { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: var(--vert-fonce); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: var(--ombre-forte); z-index: 40; opacity: 0; transition: opacity .25s, transform .25s; max-width: 90vw; } .annonce-visible { opacity: 1; transform: translate(-50%, 0); } .annonce-erreur { background: var(--rouge); } .annonce-attention { background: var(--orange); } /* ------------------------- Fiche référence ------------------------ */ .pricing .fiche-entete { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; } .pricing .fiche-chiffre { background: var(--fond); border-radius: 10px; padding: 12px 14px; } .pricing .fiche-chiffre .libelle { font-size: 11px; font-weight: 600; color: var(--encre-doux); text-transform: uppercase; letter-spacing: .03em; } .pricing .fiche-chiffre .valeur { font-size: 19px; font-weight: 700; margin-top: 2px; } .pricing .bloc { margin-bottom: 24px; } .pricing .bloc > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-doux); margin-bottom: 10px; } .pricing .texte-offre { background: var(--orange-clair); border-radius: 9px; padding: 12px 14px; font-size: 13px; color: var(--orange); line-height: 1.6; } .pricing .vide { padding: 34px 20px; text-align: center; color: var(--encre-tres-doux); font-size: 13.5px; line-height: 1.6; } .pricing .vide strong { color: var(--encre-doux); display: block; margin-bottom: 4px; } /* ---------------------------- Journal ----------------------------- */ .pricing .journal-liste { list-style: none; margin: 0; padding: 0; } .pricing .journal-entree { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fond); font-size: 13px; } .pricing .journal-quand { color: var(--encre-doux); font-size: 12px; } .pricing .journal-qui { color: var(--encre-tres-doux); font-size: 11.5px; margin-top: 2px; } .pricing .journal-quoi strong { display: block; margin-bottom: 2px; } .pricing .journal-quoi p { margin: 0; color: var(--encre-doux); line-height: 1.55; } /* --------------------------- Impression --------------------------- */ @media print { .pricing .tiroir, .pricing .entete-actions, .pricing .bouton-menu, .pricing .barre-filtres, .pricing .voile, .panneau { display: none !important; } .pricing .application { display: block; } .pricing .carte { box-shadow: none; break-inside: avoid; } .pricing .vue { padding: 0; } } /* ---------------------------- Écrans étroits ---------------------- */ @media (max-width: 980px) { .pricing .tiroir { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; } .pricing .tiroir.ouvert { transform: none; } .pricing .voile-menu { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(23, 32, 27, .3); } .pricing .bouton-menu { display: block; } .pricing .vue { padding: 18px 16px 60px; } .pricing .entete { padding: 14px 16px; } .pricing .champ-double { grid-template-columns: 1fr; } } /* ----------------------- Boîte de confirmation -------------------- */ /* Elle se superpose au panneau ouvert : la saisie reste intacte derrière. */ .voile-confirmation { z-index: 30; } .boite-confirmation { position: fixed; z-index: 31; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto; background: var(--papier); border-radius: 16px; box-shadow: var(--ombre-forte); padding: 24px 26px 20px; } .boite-confirmation h2 { font-size: 16px; margin-bottom: 12px; } .boite-confirmation .confirmation p { margin: 0 0 10px; color: var(--encre-doux); line-height: 1.6; } .boite-confirmation .actions-panneau { margin-top: 18px; }