/* ------------------------------------------------------------------ */ /* ITC Avant Garde Gothic Std — la police de l'agence */ /* ------------------------------------------------------------------ */ /* Trois graisses, converties en WOFF2 (un tiers du poids des OTF, et supporté partout depuis 2018). Les fichiers sont dans assets/polices/. Le nommage des graisses suit la fonderie et non les valeurs CSS habituelles : le BOOK est la graisse de texte courant, il est donc déclaré en 400 — sinon un paragraphe ordinaire serait tombé sur le Medium, trop gras pour de la lecture. Le reste s'enchaîne selon l'algorithme de correspondance CSS : 400 → Book 500 → Medium 600, 700, 800 → Bold La feuille utilise justement ces quatre valeurs, sans jamais rien demander d'intermédiaire. « font-display: swap » : le texte s'affiche tout de suite dans la police de repli et bascule à l'arrivée du fichier. Sur le mutualisé OVH, une page qui reste blanche le temps d'un téléchargement est pire qu'un changement de police à l'écran. Les symboles que la police ne porte pas (⬢, ✕, ●, flèches) retombent d'eux-mêmes sur la pile de repli, glyphe par glyphe : c'est le comportement normal des navigateurs, et il n'y a rien à faire pour ça. */ @font-face { font-family: 'ITC Avant Garde Std'; src: url('polices/itc-avant-garde-book.woff2?m2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ITC Avant Garde Std'; src: url('polices/itc-avant-garde-medium.woff2?m2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ITC Avant Garde Std'; src: url('polices/itc-avant-garde-bold.woff2?m2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* POURQUOI LES MÉTRIQUES SONT CORRIGÉES DANS LES FICHIERS, PAS ICI. Telle qu'elle sort de la fonderie, cette police déclare une ascendante de 740/1000 — exactement sa hauteur de capitale. Il n'y a donc AUCUN air au-dessus des majuscules dans la boîte de ligne, alors qu'Arial en laisse un cinquième de cadratin. Or un navigateur centre la boîte de ligne, pas l'encre : mesuré au pixel, le texte d'un bouton se retrouvait 0,13 cadratin trop haut, plus près du bord supérieur que de l'inférieur. La première tentative corrigeait cela en CSS, avec « ascent-override ». Elle marchait dans Chrome et pas ailleurs : ce descripteur n'est appliqué qu'à partir de Safari 16.4, et rien n'avertit quand il est ignoré — la correction était donc invisible sur la moitié des écrans, sans le moindre signe. Une capture d'écran mesurée au pixel l'a montrée : marges de 17 et 17 autour de l'encre, c'est-à-dire les métriques BRUTES. Les métriques sont donc corrigées à la source, dans les trois fichiers WOFF2 : ascendante 1000, descendante 260, gain de ligne 0, dans « hhea » comme dans « OS/2 », avec le drapeau USE_TYPO_METRICS. Aucun navigateur ne peut ignorer ça : c'est ce que dit la police. Le « ?m2 » des URL n'est pas décoratif. Le nom des fichiers n'a pas changé et rien ne casse leur cache, contrairement à la feuille de style qui porte la date du fichier : sans ce paramètre, un navigateur qui a déjà la police garderait les anciennes métriques pendant des mois. */ /* Une seule variable, pour n'avoir qu'un endroit à changer le jour où la charte évolue. */ :root { --police: 'ITC Avant Garde Std', 'Century Gothic', 'Avant Garde', Arial, Helvetica, sans-serif; } /* LE ROUGE DU GESTE QUI DÉTRUIT (I68). Pas une couleur de plus : c'est celui qui peignait déjà les croix de suppression (`.icon-btn-delete`), les corbeilles et les licences échues — plus de quatre-vingts règles. La variable le NOMME pour que `.bouton-danger` n'ait qu'une source ; le contour clair et le fond pâle sont eux aussi ceux qui existaient (`*-effacer` des corbeilles, `.archive-licence-echue`). */ :root { --danger: #c0392b; --danger-contour: #e0b4b0; --danger-fond: #fdeceb; } /* LES TROIS SURLIGNEURS DE ⬢ FLUO (lot nu). Nommés ici, à côté des autres couleurs de SENS : rouge = orthographe et grammaire, bleu = ponctuation, vert = tournure. Ce sont des couleurs de surligneur, donc PÂLES — le texte noir doit s'y lire (15,9:1, 14,8:1 et 15,3:1, calculés selon la WCAG) —, et elles ne se repeignent pas d'un outil à l'autre : elles disent quelque chose. Le rouge de ⬢ Fluo n'est pas `--danger` : il ne dit pas « ça détruit », il dit « faute d'orthographe ». LES CONTRASTES, MESURÉS (et non estimés — la première écriture de ce commentaire portait trois chiffres faux, écrits avant d'être calculés) : contre le texte de la Toolbox (#333), 9,8:1 sur le rose, 10,1:1 sur le bleu, 10,5:1 sur le vert. Contre un noir pur : 16,3, 16,8 et 17,4:1. */ :root { --fluo-rouge: #fbdcd8; --fluo-bleu: #d9e8f5; --fluo-vert: #dcefdc; } /* ------------------------------------------------------------------ */ /* LES TEINTES DE ZONE — écrites ici, et nulle part ailleurs */ /* ------------------------------------------------------------------ */ /* Un décor peut porter jusqu'à quarante zones, et elles se ressemblaient toutes : même contour rouge en pointillés, sur l'écran du décor comme sur la vignette. Avec deux zones on s'en sortait ; avec huit volets de brochure, plus du tout. TROISIÈME FAMILLE DE COULEURS, et il faut la tenir à part des deux autres. L'ACCENT est la couleur de l'outil — elle change d'un outil à l'autre, elle vient de `--accent` posée sur le corps de page. Les COULEURS DE SENS (vert = gagné, rouge = échéance) disent quelque chose et ne se repeignent jamais. Celles-ci ne disent RIEN : elles ne servent qu'à distinguer, comme les couleurs d'un plan de métro. D'où leur place sur `:root` — fixes, les mêmes dans tous les outils. HUIT, ET ELLES TOURNENT. Au-delà de huit teintes, l'œil ne les distingue plus ; la neuvième zone reprend donc la première. C'est précisément pourquoi l'atelier, lui, NUMÉROTE : la couleur groupe, le numéro nomme. Le rouge de l'accent n'en fait pas partie, pour qu'un contour de zone ne se confonde jamais avec une alerte. Le rang choisit la teinte, et le calcul est écrit UNE fois, dans `teinteDeZone()` (src/helpers.php). */ :root { --zone-1: #1F6FEB; /* bleu */ --zone-2: #E8590C; /* orange */ --zone-3: #0CA678; /* vert */ --zone-4: #9C36B5; /* violet */ --zone-5: #0B7285; /* sarcelle */ --zone-6: #C2255C; /* framboise */ --zone-7: #856404; /* bronze */ --zone-8: #495057; /* ardoise */ } * { box-sizing: border-box; } /* La barre du haut est collante : quand la page saute vers une ancre (#encart-…, etc.), l'élément visé doit s'arrêter SOUS la barre, pas derrière elle. */ html { scroll-padding-top: 110px; } body { font-family: var(--police); /* ITC Avant Garde a une hauteur d'x généreuse : à taille égale, elle paraît plus grosse qu'Arial, qui régnait ici jusqu'à présent. D'où ce 15 px là où le navigateur mettait 16. Il ne touche QUE le texte qui hérite — paragraphes, cellules, étiquettes ; les composants qui fixent leur propre taille (12,5 px de la barre, 14 px des champs) gardent la leur. */ font-size: 14px; margin: 0; background: var(--fond-clair, #f4f6f8); color: #3c3c3b; } /* Les contrôles de formulaire n'héritent PAS de la police du document : sans cette règle, champs, menus et boutons restaient dans celle du système, ce qui se voyait immédiatement à côté du texte. */ input, select, textarea, button { font-family: var(--police); } a { color: var(--accent, #004899); text-decoration: none; font-weight: bold; } .main-nav { background: #fff; padding: 19.5px 20px; border-bottom: 3px solid var(--accent, #004899); box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; /* Repère pour la photo utilisateur et la barre de connexions FLUX. */ } .main-nav .echo-logo { height: 30px; width: auto; margin-right: 24px; } /* Page d'icônes : la barre n'y a pas de logo d'outil à gauche, et les marges fixes du « + » (62 px à gauche, 78 à droite, la place de l'arc) le laissaient nettement décalé. Là, et seulement là, il se cale au milieu de la barre. Le « position: sticky » de .main-nav lui sert de repère. */ .main-nav-hub .nav-creer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } /* Le « + » ne prend plus de place dans la barre : c'était SON « margin:auto » qui poussait le menu Toolbox à droite. Sans cette ligne, le menu revient se coller à gauche. */ .main-nav-hub .outils-menu { margin-left: auto !important; } /* Photo de l'utilisateur : à droite du logo Toolbox, dans le flux. */ .main-nav-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 16px; } .main-nav-photo-vide { background: #DB0819; color: #fff; font-size: 15px; font-weight: 700; } .main-nav a { color: var(--accent, #004899); text-decoration: none; margin-right: 16px; font-size: 12.5px; font-weight: 600; } .main-nav a:hover { text-decoration: underline; } /* LA BARRE DU MENU D'UN OUTIL sépare deux familles de pages : ce qu'on fabrique, et l'atelier où l'on prépare. Purement décorative — d'où l'`aria-hidden` sur la balise : un lecteur d'écran n'a pas à lire « barre verticale » entre deux liens. */ .nav-outil-barre { color: #cfcfcf; margin-right: 16px; font-size: 12.5px; user-select: none; } /* Le « + » du menu d'un outil : il crée un gabarit, il ÉCRIT donc en base, et c'est un bouton d'envoi. Dessiné comme les liens qui l'entourent — même couleur d'accent, même graisse — pour qu'on n'ait pas à se demander ce que c'est. Le formulaire qui le porte reste en ligne : block, il casserait la rangée du menu. */ .nav-outil-envoi { display: inline-flex; align-items: center; margin: 0; } .nav-plus { background: none; border: 0; padding: 0; margin-right: 16px; font: inherit; font-size: 17px; font-weight: 600; line-height: 1; color: var(--accent, #004899); cursor: pointer; } .nav-plus:hover { text-decoration: underline; } /* Barre de navigation : le logo à gauche, puis le menu de l'outil ; le séparateur absorbe l'espace libre et pousse à droite les pastilles, le bouton « + » et le menu Toolbox. */ .nav-saut { flex: 1 1 auto; } .flux-barres, .edition-barre, .nav-creer, .outils-menu { flex-shrink: 0; } .flux-barres, .edition-barre { margin-right: 16px; } .nav-user a { color: var(--accent, #004899); font-weight: 600; } /* Menu déroulant "Outils" : le libellé est à la fois un lien vers la page hub et le déclencheur du sous-menu au survol. Le sous-menu est un enfant direct de .outils-menu, avec l'espace visuel en padding (pas en margin) : la souris reste ainsi toujours "dans" .outils-menu en descendant vers le sous-menu, au lieu de sortir par un espace mort qui referme tout. */ .outils-menu { position: relative; display: inline-block; padding: 4px 0; } .nav-toolbox-lien { display: inline-flex; align-items: center; } .nav-toolbox-logo { height: 26px; width: auto; display: block; } /* Le logo de la page de connexion : sa taille écrite ici plutôt que sur la balise, pour que le pictogramme de la Toolbox la prenne aussi (lot *kc*). */ .login-logo { height: 40px; width: auto; margin-bottom: 20px; display: block; } .outils-dropdown { display: none; position: absolute; top: 100%; right: 0; padding-top: 10px; z-index: 50; } .outils-dropdown-inner { background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 270px; padding: 6px 0; display: flex; flex-direction: column; /* Le panneau se taille sur son contenu. Indispensable depuis que les deux colonnes sont strictement égales (minmax(0, 1fr) plus bas) : sans cette largeur, les pistes se partageraient les 270 px du minimum et les noms les plus longs seraient rognés. Ici, la largeur se calcule sur la plus exigeante des deux colonnes, doublée. */ width: max-content; } .outils-menu:hover .outils-dropdown { display: block; } /* La taille est posée ICI, sur les trois formes que prend une entrée du menu. Sans cela, seuls les héritaient des 12,5 px de « .main-nav a » : l'outil courant et ceux qui sont restreints, qui sont des , ressortaient en 16 px — un « plus gros » que personne n'avait demandé. Le fond coloré suffit à désigner l'outil où l'on se trouve. */ .outils-dropdown a.outils-dropdown-item, .outils-dropdown span.outils-dropdown-item { display: block; padding: 8px 16px; color: #3c3c3b; font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; box-sizing: border-box; } .outils-dropdown a.outils-dropdown-item:hover { background: #f2f6fb; text-decoration: none; } /* L'icône d'un outil devant son nom (lot *kf*) : une case fixe, que le dessin remplisse ou non — un dessin plus large que haut s'y range sans pousser le nom, et un outil sans pictogramme garde la case vide, pour que les noms restent alignés. Pas de marge à droite (lot *kg*) : l'entrée est une boîte flexible (plus bas, « Pastilles du hub »), et son « gap » de 4 px sépare déjà l'icône du nom — les deux s'additionnaient en 9 px. */ .outils-dropdown .outils-menu-picto { display: inline-block; width: 16px; height: 16px; margin-right: 0; vertical-align: -3px; flex: none; } .outils-separateur { height: 1px; background: #eee; margin: 6px 0; } /* ---------- Le menu des outils sur deux colonnes ---------- Les outils occupent une grille de deux colonnes ; ce qui vient dessous (photo, réglages, déconnexion) reste hors de la grille et tient donc toute la largeur. Chaque famille de couleur est un bloc porteur d'un trait vertical à sa teinte — le même repère que les lignes du tableau de bord du Journal (« .tache-ligne », border-left 4 px). Le trait court sans interruption du premier au dernier outil de la famille : c'est lui qui dit qu'ils vont ensemble. La teinte arrive en variable, posée par index.php depuis $couleursOutils : la palette reste écrite à un seul endroit. */ /* « minmax(0, 1fr) » et non « 1fr » : les deux colonnes doivent faire LA MÊME largeur. Avec « 1fr », chaque colonne garde un minimum égal à son contenu, et le menu s'ajustant au contenu, celle qui porte « Coup d'œil bon ap' » sortait plus large que sa voisine. Le minimum ramené à 0, les deux pistes sont strictement égales, et la largeur du menu se calcule sur la plus exigeante des deux — rien n'est rogné pour autant. */ .outils-menu-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 0 8px; } /* Pas de « min-width: 0 » ici : une colonne de grille doit garder le droit d'être aussi large que son plus long nom d'outil (les entrées sont en nowrap). Sans cela, « Coup d'œil bon ap' » serait rogné dès que le menu n'aurait pas la place. Les deux colonnes restent égales : 1fr et 1fr. */ .outils-menu-groupe { border-left: 4px solid var(--groupe, #e0e0e0); border-radius: 2px; margin-bottom: 8px; } .outils-menu-colonne > .outils-menu-groupe:last-child { margin-bottom: 0; } /* Dans un groupe, l'entrée se recolle au trait : les 16 px d'origine laissaient un couloir vide entre le trait et le nom. */ /* 6 px et non 10 depuis le lot *kg* : l'icône est venue se poser devant le nom, et « réduire l'espace à droite et à gauche des icônes ». TROIS classes, et pas deux : « .outils-dropdown a.outils-dropdown-item » (plus haut) compte une balise de plus et l'emportait — ces marges intérieures ne s'appliquaient pas. Et « .main-nav a » donnait aux liens une marge DROITE de 16 px que la ligne en cours (un ) n'a pas : les liens s'arrêtaient 16 px avant le bord de leur colonne, et leurs pastilles avec eux. */ .outils-dropdown .outils-menu-grille .outils-dropdown-item { padding-left: 6px; padding-right: 10px; margin-right: 0; } /* ⬢ Lead — les en-têtes de colonne qui trient. Discrets tant qu'on ne les survole pas : ce sont des titres de colonne d'abord, des boutons ensuite. Celui qui commande l'ordre porte la couleur de l'outil et un chevron. */ .prospection-tri { color: inherit; text-decoration: none; border-bottom: 1px dotted #bbb; } .prospection-tri:hover { color: var(--accent, #DB0819); border-bottom-color: currentColor; text-decoration: none; } .prospection-tri-actif { color: var(--accent, #DB0819); font-weight: 700; border-bottom: none; } /* ---------- ⬢ Prompt : ses prompts sous son nom ---------- Ils s'ouvraient auparavant en sous-menu latéral. Le menu tenant désormais sur deux colonnes, cette liste passait par-dessus la colonne voisine : les prompts se posent maintenant SOUS le nom de l'outil, sur une ligne d'icônes qui revient à la ligne si elle est trop longue. Le titre passe en infobulle et en nom accessible, faute de place pour l'écrire. */ .outils-prompts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 10px 6px; margin-top: -2px; } .outils-prompt { flex: none; width: 26px; height: 26px; padding: 0; border: none; cursor: pointer; border-radius: 7px; background: var(--groupe, #DC4D7F); display: inline-flex; align-items: center; justify-content: center; position: relative; opacity: .85; transition: opacity .12s, transform .12s; } .outils-prompt:hover, .outils-prompt:focus-visible { opacity: 1; transform: translateY(-1px); } .outils-prompt svg, .outils-prompt img { width: 15px; height: 15px; display: block; object-fit: contain; } /* Le trait qui sépare mes prompts de ceux des autres membres : vertical ici, la ligne étant horizontale. */ .outils-prompts-separateur { flex: none; width: 1px; height: 18px; background: #ddd; margin: 0 3px; } /* Copie faite : l'icône s'efface derrière une coche verte. Le libellé ne peut plus servir de confirmation — il n'y en a plus. */ .outils-prompt.firefly-copie-faite { background: #2f8f4e; opacity: 1; } .outils-prompt.firefly-copie-faite > * { visibility: hidden; } .outils-prompt.firefly-copie-faite::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; } .outils-prompt.firefly-copie-ratee { background: #b0343c; opacity: 1; } .outils-prompt.firefly-copie-ratee > * { visibility: hidden; } .outils-prompt.firefly-copie-ratee::after { content: '\2715'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; } .outils-dropdown button.outils-dropdown-item { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 12.5px; padding: 8px 16px; color: #3c3c3b; font-weight: 500; background: #fff; border: none; white-space: nowrap; box-sizing: border-box; cursor: pointer; } .outils-dropdown button.outils-dropdown-item:hover { background: #f2f6fb; } .outils-dropdown button.firefly-copie-faite { color: #2f8f4e; font-weight: 700; } @media (max-width: 900px) { /* Sur petit écran, la ligne d'icônes reste : elle tient sur une ou deux lignes sous le nom, là où l'ancienne liste latérale n'avait pas de place du tout. */ .outils-dropdown button.outils-dropdown-item { font-size: 13px; } /* Le menu ne doit jamais déborder de l'écran : il s'y ajuste, et défile si la liste des outils est plus haute que la fenêtre. */ .outils-dropdown { right: 0; left: auto; max-width: calc(100vw - 16px); } /* Deux colonnes AUSSI sur petit écran : elles tiennent en resserrant les espaces (gouttière, retrait, hauteur des lignes). Sur 390 px de large, le menu dispose de 374 px : deux colonnes de ~180 px suffisent aux noms les plus longs. min-width: 0 ici, et seulement ici : un nom trop long doit passer à la ligne (« white-space: normal » plus bas) plutôt que déborder de l'écran. Sur grand écran c'est l'inverse — la colonne s'élargit. */ .outils-menu-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; padding: 0 6px; } .outils-menu-colonne { min-width: 0; } .outils-menu-groupe { margin-bottom: 6px; } .outils-dropdown .outils-menu-grille .outils-dropdown-item { padding: 7px 8px 7px 6px; line-height: 1.25; } .outils-prompts { padding: 0 8px 5px; gap: 3px; } .outils-dropdown-inner { min-width: 0; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 70px); overflow-y: auto; } .outils-dropdown a.outils-dropdown-item, .outils-dropdown span.outils-dropdown-item, .outils-dropdown button.outils-dropdown-item { padding: 8px 12px; white-space: normal; } } /* ---------- Pastilles du hub ---------- Les compteurs posés sur les icônes des outils et sur leur entrée du menu. Le fond prend la couleur de l'outil (posée en style en ligne depuis index.php) ; celles qui pressent battent doucement. */ .pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #DB0819; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; box-sizing: border-box; vertical-align: middle; flex: none; } @keyframes pastille-battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .pastille-pulse { animation: pastille-battement 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { /* Sans mouvement, la pastille qui presse se distingue par son contour. */ .pastille-pulse { animation: none; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px currentColor; } } /* Dans le menu déroulant, les pastilles se collent à droite de l'entrée. */ .outils-dropdown a.outils-dropdown-item, .outils-dropdown span.outils-dropdown-item { display: flex; align-items: center; gap: 4px; } /* Au bord droit de la COLONNE (lot *kg*) : la marge automatique pousse la première pastille contre le bord, et elle le fait parce que l'entrée est flexible ET prend toute la largeur de sa colonne. Le nom, lui, ne se rétrécit pas (nowrap) : une pastille ne le recouvre jamais. */ .outils-dropdown .outils-dropdown-item .pastille { margin-left: auto; } .outils-dropdown .outils-dropdown-item .pastille + .pastille { margin-left: 4px; } /* Sur la carte du hub, elles se posent en haut à droite du logo. */ .outil-carte { position: relative; } /* Les pastilles s'asseyent à cheval sur le bord bas de la carte, centrées : moitié dedans, moitié dehors. D'où le overflow visible plus bas — sans quoi la partie qui dépasse serait rognée. */ .outil-carte-pastilles { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: flex; gap: 4px; pointer-events: none; } .outil-carte-pastilles .pastille { margin-left: 0; /* Un liseré blanc détache la pastille du trait qu'elle chevauche. */ box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25); } /* Menu du compte : l'engrenage seul, sans libellé, qui mène à la page « Mes réglages ». */ .outils-compte-engrenage { justify-content: flex-start; } .outils-compte-engrenage svg, .outils-compte-cle svg, .outils-compte-notice svg { flex: none; } /* Le « ? » de la notice, contre l'engrenage : même teinte que la clé plate, parce que ce sont deux secours et non deux destinations de travail. */ .outils-compte-notice { color: #767676; } .outils-compte-notice:hover { color: var(--accent, #DB0819); } /* Les deux icônes du compte sur une même ligne : réglages personnels à gauche, clé de l'administration à droite (administrateur seulement). */ .outils-compte-icones { display: flex; align-items: center; gap: 14px; } .outils-compte-cle { color: #767676; } .outils-compte-cle:hover { color: var(--accent, #DB0819); } /* Page « Mes réglages » : notifications, puis le compte. */ .reglages-bloc { max-width: 680px; margin: 0 auto 34px; } .reglages-bloc h2 { margin-bottom: 8px; } .reglages-aide { font-size: 13px; color: #555; margin-top: 0; } .reglages-actions { display: flex; flex-wrap: wrap; gap: 10px; } .notifications-table { width: 100%; border-collapse: collapse; } .notifications-table th { font-size: 11px; color: #767676; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding-bottom: 6px; width: 90px; } .notifications-table th:first-child { text-align: left; width: auto; } .notifications-table td { padding: 8px 6px; border-top: 1px solid #f0f0f0; } /* Le nom de l'outil porte sa couleur (posée en ligne) — pas de pastille devant. */ .notifications-table tr.notifications-outil td { border-top: none; padding-top: 18px; font-weight: 700; font-size: 14px; } .notifications-nom { font-weight: 600; font-size: 13px; } /* Les deux colonnes d'interrupteurs, à droite. */ .notifications-case { width: 90px; text-align: center; white-space: nowrap; } .notifications-case .switch-row { justify-content: center; } .notifications-mention { display: block; font-size: 10px; color: #767676; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } .notifications-nom .notifications-mention { display: inline; margin-left: 8px; } .notifications-vide { color: #c8c8c8; } /* Trois colonnes d'interrupteurs : sur un téléphone, elles mangeraient la place du libellé si on les laissait à 90 px. */ @media (max-width: 560px) { .notifications-table th, .notifications-case { width: 62px; } .notifications-table th { font-size: 10px; } .notifications-table td { padding: 8px 2px; } } /* Autorisation d'un appareil pour les notifications du navigateur. */ .push-appareil { margin-top: 18px; padding: 14px 16px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; } .push-etat { margin: 0 0 10px; font-size: 13px; font-weight: 600; } .push-aide { font-size: 12px; color: #767676; margin: 8px 0 0; } /* Les boutons du bloc s'alignent et retournent à la ligne sur un téléphone, plutôt que de déborder du cadre. */ .push-boutons { display: flex; gap: 8px; flex-wrap: wrap; } /* ⬢ Board — l'empreinte de la composition, dans le partage et sur la page publique. Le code est groupé par huit (EmpreinteService::lisible) : une empreinte se compare à l'œil, elle a besoin d'air et d'une chasse fixe. */ /* La date de la coche d'une sous-tâche : discrète, à droite du libellé. Elle répond à « c'était quand ? » sans encombrer la ligne. */ /* ⬢ Devis — la liste des brouillons en cours, en tête de page. Repliée au-delà de cinq : c'est un rappel, pas le sujet de la page. */ /* Le journal de preuve d'une signature : replié, il n'occupe rien ; ouvert, il tient dans la cellule sans l'élargir. */ .signature-preuve { margin-top: 4px; } .signature-preuve > summary { cursor: pointer; font-size: 11.5px; color: #767676; } .signature-preuve dl { margin: 6px 0 0; font-size: 11.5px; } .signature-preuve dt { color: #767676; margin-top: 4px; } .signature-preuve dd { margin: 0; } .signature-preuve code { font-size: 11px; letter-spacing: .02em; word-break: keep-all; } /* La chaîne brute du navigateur : gardée pour la preuve, réduite pour l'œil. */ .signature-preuve-ua { display: block; max-width: 260px; font-size: 10px; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .devis-brouillons { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; } .devis-brouillons > summary { cursor: pointer; font-size: 13px; font-weight: 600; } .devis-brouillons > summary small { font-weight: 400; color: #767676; } .devis-brouillons-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; } .devis-brouillons-table td { padding: 4px 8px 4px 0; border-top: 1px solid #f0f0f0; } .devis-brouillons-table tr:first-child td { border-top: 0; } .devis-brouillon-date { color: #767676; } .devis-brouillon-action { text-align: right; width: 1%; white-space: nowrap; } .sous-tache-date { margin-left: 6px; font-size: 10.5px; color: #9a9a9a; } .sous-tache-faite .sous-tache-date, .tache-sous-tache-faite .sous-tache-date { color: #b0b0b0; } .board-empreinte { margin: 12px 0 0; font-size: 12px; } /* Le retour à la ligne se fait ENTRE les groupes de huit, jamais au milieu de l'un d'eux : une empreinte coupée en plein groupe ne se compare plus. */ .board-empreinte code { font-size: 11.5px; letter-spacing: .02em; word-break: keep-all; color: #3c3c3b; } .board-empreinte-aide { display: block; margin-top: 4px; font-size: 11px; color: #767676; } .board-public-empreinte { margin: 6px 0 0; font-size: 11px; color: #767676; } .board-public-empreinte code { font-size: 11px; letter-spacing: .02em; word-break: keep-all; } /* La liste des appareils autorisés. Pas de bordures : c'est un inventaire de trois lignes, pas un tableau de données — des filets l'alourdiraient. */ .push-appareils { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; } .push-appareils td { padding: 5px 8px 5px 0; border-top: 1px solid #f0f0f0; vertical-align: middle; } .push-appareils tr:first-child td { border-top: 0; } .push-appareil-date { color: #767676; } .push-appareil-action { text-align: right; width: 1%; white-space: nowrap; } .push-appareils button { font-size: 11.5px; padding: 2px 9px; } /* Les clés VAPID, à recopier telles quelles dans config.php. */ .push-avertissement { background: #fff8e6; border-left: 3px solid #e8a13c; border-radius: 0 4px 4px 0; padding: 10px 12px; font-size: 13px; color: #3c3c3b; } .push-cles { background: #2f3136; color: #e8e8ea; border-radius: 6px; padding: 12px 14px; font-size: 12px; line-height: 1.6; user-select: all; /* Les clés font 87 caractères : elles passent à la ligne plutôt que de sortir du cadre, sinon on ne peut pas les relire avant de les copier. */ white-space: pre-wrap; word-break: break-all; } /* Page hub "Outils" : grille de logos cliquables centrée, sans titre ni texte sous les logos, sur fond nu. PAS DE FILIGRANE. Un `::before` posait ici le logo Toolbox répété à 5 % d'opacité — écrit avec le mauvais chemin (« assets/logo… » depuis /assets/style.css demande /assets/assets/logo…), il répondait 404 et ne s'est jamais affiché. Réparer le chemin l'a fait paraître pour la première fois : ce fond n'avait jamais été prévu, il est retiré. `overflow: hidden` part avec lui — il n'était là que pour retenir un fond tourné de 8° et agrandi. Vérifié par capture : identique à 1440 et 900 px, au pixel près ; à 375 px, 84 pixels d'écart — exactement le plancher de bruit, mesuré à part entre deux captures de la MÊME page. */ main.outils-hub { position: relative; min-height: calc(100vh - 70px); max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 60px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent, #004899); outline-offset: 1px; } /* LA RECHERCHE. Deux formes, une seule feuille : la FENÊTRE, qui s'ouvre par la loupe et cherche sans qu'on quitte ce qu'on fait ; et la PAGE, qui se partage par son adresse, s'ouvre dans un onglet et répond quand le script ne tourne pas. Les résultats se dessinent pareil dans les deux — un seul jeu de classes, sinon les deux se seraient mises à diverger dès la première retouche. */ .recherche-forme { display: flex; gap: 10px; align-items: stretch; margin: 14px 0 18px; flex-wrap: wrap; } .recherche-champ { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; border: 1px solid #d0d0d0; border-radius: 3px; padding: 0 12px; background: #fff; } .recherche-champ:focus-within { border-color: var(--accent, #004899); box-shadow: 0 0 0 2px rgba(0,0,0,.05); } .recherche-loupe { color: #8a8a8a; display: flex; } .recherche-champ input { flex: 1; border: 0; outline: 0; background: transparent; padding: 11px 0; font: inherit; font-size: 15px; min-width: 0; } .recherche-vide, .recherche-compte { color: #6b6b6b; font-size: 14px; max-width: 70ch; } .recherche-vide small { color: #8a8a8a; } .recherche-familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; } .recherche-famille { background: #fff; border: 1px solid #e4e4e4; border-radius: 3px; padding: 12px 14px; } .recherche-famille h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; display: flex; align-items: baseline; gap: 6px; } .recherche-famille h2 small { color: #9a9a9a; font-size: 11px; } .recherche-tout { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; } .recherche-famille ul { list-style: none; margin: 0; padding: 0; } .recherche-famille li + li { border-top: 1px solid #f2f2f2; } .recherche-famille li a { display: block; padding: 7px 6px; text-decoration: none; color: #3c3c3b; border-radius: 3px; } .recherche-famille li a:hover, .recherche-famille li a:focus-visible { background: #f6f6f6; } .recherche-titre { display: block; font-size: 14px; overflow-wrap: anywhere; } .recherche-detail { display: block; font-size: 11.5px; color: #8a8a8a; margin-top: 1px; } /* ---- LA FENÊTRE (lot db) ------------------------------------------------ Haute et étroite plutôt que large : on la lit du regard, de haut en bas, et elle doit tenir sur un téléphone sans que le champ sorte de l'écran. Le corps défile seul — le champ et le pied restent sous la main. */ .recherche-fenetre { max-width: 720px; width: 100%; text-align: left; display: flex; flex-direction: column; max-height: 82vh; } .recherche-fenetre .recherche-forme { margin: 0 0 12px; } .recherche-fermer { flex: 0 0 auto; } .recherche-fenetre-corps { overflow-y: auto; flex: 1 1 auto; min-height: 120px; } /* Pendant la requête : on ternit sans rien déplacer. Un contenu qui saute à chaque frappe est plus pénible qu'une demi-seconde de gris. */ .recherche-fenetre-corps[aria-busy="true"] { opacity: .55; transition: opacity .12s ease; } .recherche-fenetre .recherche-familles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .recherche-fenetre-pied { margin: 12px 0 0; font-size: 12px; color: #8a8a8a; } @media (max-width: 640px) { .recherche-fenetre { max-height: 88vh; } .recherche-fenetre .recherche-familles { grid-template-columns: 1fr; } } /* LA BANDE « EN ATTENTE DE SA RÉPONSE », sur la fiche client. Elle traverse les outils au lieu de les aligner : c'est la seule chose de cette page qu'on lit avant de décrocher le téléphone, elle passe donc en haut et en pleine largeur, pas dans la grille. */ .attente-bande { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e4e4e4; border-left: 3px solid var(--accent, #004899); background: #fff; border-radius: 3px; } .attente-bande h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; } .attente-bande h3 small { color: #9a9a9a; font-size: 11px; margin-left: 4px; } .attente-bande ul { list-style: none; margin: 0; padding: 0; } .attente-bande li + li { border-top: 1px solid #f0f0f0; } .attente-bande a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 6px; text-decoration: none; color: #3c3c3b; border-radius: 3px; } .attente-bande a:hover, .attente-bande a:focus-visible { background: #f6f6f6; } .attente-quoi { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 2px; color: #fff; white-space: nowrap; } /* Les trois seules provenances possibles. Les valeurs sont celles de PaletteOutils::LOGOS, recopiées ici parce que la palette est calculée en PHP et ne descend pas jusqu'à cette feuille — c'est le seul endroit où elles le sont, avec la colonne des liens jetables. */ .attente-proof { background: #E8A13C; } .attente-sign { background: #DB0819; } .attente-poll { background: #6B7A76; } .attente-titre { font-size: 14px; overflow-wrap: anywhere; } .attente-depuis { font-size: 11.5px; color: #8a8a8a; margin-left: auto; white-space: nowrap; } /* QUINZE JOURS SANS RÉPONSE, ce n'est plus un délai, c'est un oubli. */ .attente-longue .attente-depuis { color: #c0392b; font-weight: 600; } /* LA CORBEILLE DE ⬢ TÂCHES. Même forme que les deux autres. */ .taches-corbeille { margin-top: 22px; border-top: 1px solid #e4e4e4; padding-top: 12px; } .taches-corbeille > summary { cursor: pointer; font-size: 13px; color: #6b6b6b; list-style: none; padding: 6px 0; user-select: none; } .taches-corbeille > summary::-webkit-details-marker { display: none; } .taches-corbeille > summary::before { content: '▸ '; } .taches-corbeille[open] > summary::before { content: '▾ '; } .taches-corbeille > summary:hover { color: #3c3c3b; } .taches-corbeille-note { color: #9a9a9a; } .taches-corbeille .radar-table td { color: #6b6b6b; } /* LA CORBEILLE DE ⬢ PROOF. Même forme que celle de ⬢ Archive : deux corbeilles qui ne se ressemblent pas, ce sont deux mécaniques à apprendre. */ .proof-corbeille { margin-top: 22px; border-top: 1px solid #e4e4e4; padding-top: 12px; } .proof-corbeille > summary { cursor: pointer; font-size: 13px; color: #6b6b6b; list-style: none; padding: 6px 0; user-select: none; } .proof-corbeille > summary::-webkit-details-marker { display: none; } .proof-corbeille > summary::before { content: '▸ '; } .proof-corbeille[open] > summary::before { content: '▾ '; } .proof-corbeille > summary:hover { color: #3c3c3b; } .proof-corbeille-note { color: #9a9a9a; } .proof-corbeille .radar-table td { color: #6b6b6b; } /* LA CORBEILLE DE ⬢ ARCHIVE. Repliée par défaut, discrète : c'est un filet, pas un écran de travail. */ .archive-corbeille { margin-top: 22px; border-top: 1px solid #e4e4e4; padding-top: 12px; } .archive-corbeille > summary { cursor: pointer; font-size: 13px; color: #6b6b6b; list-style: none; padding: 6px 0; user-select: none; } .archive-corbeille > summary::-webkit-details-marker { display: none; } .archive-corbeille > summary::before { content: '▸ '; } .archive-corbeille[open] > summary::before { content: '▾ '; } .archive-corbeille > summary:hover { color: #3c3c3b; } .archive-corbeille-note { color: #9a9a9a; } .archive-corbeille .radar-table td { color: #6b6b6b; } /* LA LICENCE D'UNE TYPOGRAPHIE, sur la ligne de charte. Trois états et trois seulement : échue, bientôt, au large. La couleur ne remplace pas le mot — un daltonien lit « licence échue » aussi bien que n'importe qui, et c'est le texte qui porte l'information. */ .archive-licence { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 2px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; border: 1px solid currentColor; } .archive-licence-echue { color: #c0392b; background: #fdeceb; } .archive-licence-bientot { color: #9C4E18; background: #fdf3e7; } .archive-licence-valable { color: #6b6b6b; background: #f4f4f4; } /* LA BARRE DU BROUILLON DE L'ATELIER. Elle n'existe que lorsqu'un travail a été gardé : `hidden` au chargement, et le script la découvre seulement s'il a quelque chose à proposer. Restée `display:flex` par une classe, elle aurait battu le `[hidden]` du navigateur — le piège consigné au lot cm ; d'où la règle qui le redit explicitement. */ .vis-brouillon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e0c48a; border-left: 3px solid #E8A13C; background: #fdf6e9; border-radius: 3px; } .vis-brouillon[hidden] { display: none; } .vis-brouillon-mot { margin: 0; font-size: 14px; color: #3c3c3b; max-width: 62ch; } .vis-brouillon-gestes { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } /* « Jeter » ne doit pas avoir le même poids que « Reprendre » : c'est le geste qui détruit, il se donne en second et sans couleur. `.bouton-discret` existe déjà mais n'est défini que dans les pieds de message type — on ne s'appuie donc pas dessus ici. */ #vis-brouillon-jeter { background: transparent; border: 1px solid #cfcfcf; color: #6b6b6b; } #vis-brouillon-jeter:hover { border-color: #c0392b; color: #c0392b; } /* LA RANGÉE PROFIL — la photo, et ce qui attend le membre à sa droite. Sans rien à porter, `.profil-bloc` n'a qu'un enfant et le centrage est exactement celui d'avant : la photo ne se décale pas parce qu'une colonne vide existerait quelque part. C'est la modification qui se voit le moins quand il n'y a rien, et c'est voulu. */ .profil-bloc { display: flex; flex-direction: column; align-items: center; } .profil-bloc-avec { flex-direction: row; align-items: flex-start; justify-content: center; gap: 28px; flex-wrap: wrap; /* LARGEUR IMPOSÉE, sinon la rangée n'existe pas. `main.outils-hub` est lui-même une colonne flexible : sans `width`, ce bloc se réduit à la largeur de son contenu, la rangée n'a plus la place de tenir ses deux enfants, et `flex-wrap` les empile silencieusement — on obtient une colonne SOUS la photo au lieu d'une colonne À DROITE. Vu en mesurant, pas en lisant. */ width: 100%; max-width: 780px; } .profil-utilisateur { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 28px; } .profil-bloc-avec .profil-utilisateur { margin-bottom: 28px; flex: 0 0 auto; } /* UNE SEULE COLONNE, jamais deux : la consigne le dit, et une colonne se lit d'un coup d'œil là où deux obligent à choisir par où commencer. */ .profil-attente { flex: 0 1 340px; min-width: 0; margin-bottom: 28px; border-left: 2px solid var(--accent, #004899); padding-left: 14px; } .profil-attente-titre { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; } .profil-attente ul { list-style: none; margin: 0; padding: 0; } .profil-attente li + li { margin-top: 2px; } .profil-attente a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 7px 8px; text-decoration: none; color: #3c3c3b; border-radius: 3px; } .profil-attente a:hover, .profil-attente a:focus-visible { background: #f1f1f1; } .profil-attente-quoi { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 2px; color: #fff; white-space: nowrap; align-self: start; } /* Les trois provenances possibles. La couleur est celle du logo de l'outil, écrite ici parce que la palette des outils est calculée en PHP et ne descend pas jusqu'à cette feuille — les deux premières valeurs sont celles de PaletteOutils::LOGOS, et c'est le seul endroit où elles sont recopiées. */ .profil-attente-sign { background: #DB0819; } .profil-attente-proof { background: #E8A13C; } /* Un rendez-vous n'a pas de logo : il prend LE VERT DE « À VALIDER », celui de la pastille du calendrier (lot dw). La même couleur pour la même chose aux deux endroits — on reconnaît la demande avant d'avoir lu le mot. */ .profil-attente-rdv { background: #1F7A5A; } .profil-attente-titre-ligne { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } .profil-attente-depuis { grid-column: 2; font-size: 11.5px; color: #8a8a8a; } @media (max-width: 640px) { .profil-bloc-avec { flex-direction: column; align-items: center; gap: 0; } .profil-attente { flex: 1 1 auto; width: 100%; max-width: 340px; } } .profil-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; cursor: pointer; display: flex; align-items: center; justify-content: center; } .profil-photo-vide { background: #DB0819; color: #fff; font-size: 32px; font-weight: 700; } .profil-bonjour { font-size: 15px; color: #3c3c3b; margin: 0; } .agences-utilisateur { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; margin-top: auto; padding-top: 40px; padding-bottom: 24px; } .agence-logo { width: 84px; height: auto; object-fit: contain; } .outils-grille { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; width: 100%; max-width: 940px; /* 3 boutons de 300px + 2 espaces de 20px, tient dans la largeur de page */ margin: 0 auto; box-sizing: border-box; } .deck-categorie-bandeau { padding: 8px 14px; margin-top: 20px; border-radius: 4px; } .deck-categorie-case { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; } .deck-categorie-case input { cursor: pointer; accent-color: var(--accent, #8665A6); } .deck-fiches-grille { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; } .deck-fiche { width: 95%; margin: 0 auto; display: flex; align-items: center; gap: 10px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 12px; background: #fff; } .deck-fiche-case input { cursor: pointer; accent-color: var(--accent, #8665A6); } .deck-icone-fiche { background: var(--accent, #8665A6); color: #fff; } .deck-fiche-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .deck-fiche-nom { font-size: 13px; } /* Deck — la vignette d'une fiche : sa première page, en petit. Elle tient dans la hauteur de la ligne et ne la fait pas grandir d'un pixel : la liste doit rester une liste. Ce qu'on y lit, c'est la forme et la couleur du document ; pour le voir vraiment, le survol l'agrandit. */ .deck-fiche-vignette { padding: 6px 12px 6px 8px; } .deck-fiche-apercu-cadre { position: relative; display: flex; flex: 0 0 auto; align-items: center; } .deck-fiche-apercu { height: 22px; width: auto; max-width: 30px; object-fit: cover; object-position: top center; border: 1px solid #e0e0e0; border-radius: 2px; background: #fff; cursor: pointer; display: block; } .deck-fiche-apercu:hover { border-color: var(--accent, #8665A6); } /* L'agrandissement flotte au-dessus de la liste : posé en absolu, il ne pousse rien et ne décale aucune ligne. */ .deck-fiche-apercu-grand { /* À droite de la vignette, jamais par-dessus : la case à cocher et le nom de la fiche survolée restent lisibles pendant qu'on regarde. */ position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); z-index: 60; width: 150px; height: auto; border: 1px solid #cfcfd6; border-radius: 4px; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } .deck-fiche-apercu-cadre:hover .deck-fiche-apercu-grand { opacity: 1; visibility: visible; } @media (hover: none) { /* Sans survol (tactile), l'agrandissement ne sert à rien : la vignette reste une pastille de repérage, et le doigt coche la fiche. */ .deck-fiche-apercu-grand { display: none; } } /* ECHOMMERCE — le bon à tirer d'un encart (v69). Sur la fiche client, une colonne étroite : le bouton quand il n'y a pas encore de BAT, sa pastille d'état quand il existe. */ .encart-col-bat { white-space: nowrap; text-align: right; } /* Liste des parutions : toute la ligne ouvre le numéro, sauf la cellule Année, qui chapeaute plusieurs lignes et ne désigne donc aucun numéro. */ .table-parutions tbody tr.parution-rangee { cursor: pointer; } .table-parutions .annee-cell { cursor: default; } .encart-bat-etat { display: inline-block; font-size: 11px; font-weight: 700; text-decoration: none; border-radius: 10px; padding: 2px 9px; border: 1px solid transparent; /* Sert aussi dans la colonne d'actions d'un numéro, à côté des boutons ronds : la pastille ne se coupe pas et s'aligne sur eux. */ white-space: nowrap; vertical-align: middle; } .encart-bat-brouillon { background: #f0f0f4; color: #5a5a63; border-color: #dededf; } .encart-bat-envoye { background: #fff4e0; color: #8a5a00; border-color: #f0d9a0; } .encart-bat-signe { background: #e6f4ea; color: #206c39; border-color: #b7dfc4; } .encart-bat-refuse { background: #fdecec; color: #b3261e; border-color: #f2c5c1; } /* Tableau de bord — la ligne unique des BAT d'encarts, dans le panneau ECHOMMERCE : un nombre par état, rien de plus. */ .echommerce-bat-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-left-color: var(--accent, #004899); } .echommerce-bat-etat { font-size: 12px; color: #555; white-space: nowrap; } .echommerce-bat-etat strong { font-size: 13px; color: #767676; } .echommerce-bat-etat.echommerce-bat-envoye strong { color: #8a5a00; } .echommerce-bat-etat.echommerce-bat-signe strong { color: #206c39; } .echommerce-bat-etat.echommerce-bat-refuse strong { color: #b3261e; } .deck-agence-logo-select { width: 60px; height: auto; object-fit: contain; cursor: pointer; border: 2px solid transparent; border-radius: 4px; padding: 4px; } .deck-agence-logo-select.selectionne { border-color: var(--accent, #8665A6); } .outil-carte { display: flex; align-items: center; justify-content: center; /* visible, et non hidden : les pastilles débordent volontairement du bord bas. Rien d'autre ne dépasse — le logo est bridé en % et le texte d'un outil restreint tient dans la carte. */ box-sizing: border-box; overflow: visible; aspect-ratio: 300 / 180; /* même ratio L/H partout, seule la largeur change */ flex: 1 1 calc((100% - 80px) / 5); max-width: 172px; /* 5 par ligne par défaut, rétrécit sur écran étroit */ padding: 8px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; text-decoration: none; color: #3c3c3b; transition: box-shadow 0.15s, transform 0.15s; cursor: grab; } .outil-carte:nth-child(-n+3) { flex: 1 1 calc((100% - 40px) / 3); max-width: 300px; /* les 3 premières : 3 par ligne, même logique */ padding: 14px; } .outil-carte:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); text-decoration: none; } .outil-carte-cible { background: #fdecea; border-color: #c0392b; box-shadow: inset 0 0 0 2px #c0392b; } .outil-carte-logo { max-width: 92%; max-height: 84%; object-fit: contain; pointer-events: none; } /* en % : ne déborde jamais, quelle que soit la taille du bouton */ .outil-carte-nom { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--accent, #004899); } .outil-carte-description { font-size: 12px; color: #767676; } @media (max-width: 640px) { .outils-grille { max-width: 100%; padding: 0 12px; } .outil-carte { aspect-ratio: 300 / 150; } /* nouveau ratio plus plat, commun à tous les boutons mobiles */ .outil-carte:nth-child(-n+3) { flex: 0 0 100%; max-width: none; } /* pleine largeur : équivaut à la largeur des 2 colonnes réunies des lignes suivantes */ .outil-carte:nth-child(n+4) { flex: 0 0 calc((100% - 20px) / 2); max-width: none; } /* 2 par ligne, même ratio */ } main { padding: 24px; max-width: 1100px; margin: 0 auto; } /* Page de connexion : centrée horizontalement et verticalement dans la fenêtre */ main.login-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } h1 { font-size: 22px; margin-bottom: 16px; color: #3c3c3b; } h2 { color: #3c3c3b; } table { border-collapse: collapse; width: 100%; background: #fff; } th, td { padding: 8px 10px; border-bottom: 1px solid #e0e0e0; text-align: left; font-size: 14px; } th { background: var(--fond-clair, #e8eef5); color: #3c3c3b; } tfoot .recap-row td { font-weight: bold; background: #e8eef5; border-top: 2px solid var(--accent, #004899); } form.inline { display: inline; } .progress-bar { background: #e0e0e0; border-radius: 4px; height: 14px; width: 160px; overflow: hidden; } .progress-bar-fill { background: #2f8f4e; height: 100%; } .progress-bar-fill.overflow { background: #c0392b; } .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #ddd; } .badge.partage { background: #f0c419; } .badge.exclusif { background: #7fb3d5; } select, input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], textarea { padding: 4px 6px; font-size: 14px; } /* Un champ posé SOUS son étiquette collait au texte : le retour à la ligne (
) est la façon d'empiler les deux dans tout le projet, et il ne laisse aucun blanc. Trois pixels suffisent à décoller la paire, et la règle ne touche jamais un champ posé EN LIGNE — c'est le
qui la déclenche. */ br + input, br + select, br + textarea { margin-top: 3px; } /* Même blanc pour les étiquettes écrites en (fenêtres de ⬢ Notes) : elles portent leur marge en clair sur l'élément, mais un demi-pixel de plus ne se refuse pas — la règle passe APRÈS le style en ligne parce qu'elle vise l'élément suivant, pas l'étiquette. */ .note-champ-nom + input, .note-champ-nom + select, .note-champ-nom + textarea, .note-champ-nom + .rc { margin-top: 3px; } /* POURQUOI UNE INTERLIGNE EXPLICITE SUR LES BOUTONS. Sans « line-height », la hauteur d'un bouton dépend des métriques de la police : l'ancienne pile (Helvetica, Arial) donnait 1,15 cadratin, la nouvelle en donne 1,26. Tous les boutons ont donc grandi d'un pixel et demi le jour du changement de police, et — pire — deux boutons voisins écrits dans des corps différents ne grandissaient pas d'autant : la rangée devenait irrégulière. Une interligne fixe rend la hauteur calculable : corps x 1,2 + les rembourrages, quelle que soit la police. */ button, input[type=submit] { background: var(--accent, #004899); color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; line-height: 1.2; cursor: pointer; } button:hover, input[type=submit]:hover { background: var(--accent-fonce, #003a7a); } /* Logo d'édition : jamais plus de 300px de large, quelle que soit la taille du fichier */ .edition-logo { display: block; max-width: 300px; max-height: 120px; width: auto; height: auto; margin-bottom: 14px; } /* Bouton on/off (remplace les liens "Modifier"/"Annuler") */ .toggle-switch { display: inline-block; width: 36px; height: 18px; border-radius: 9px; background: #ccc; position: relative; vertical-align: middle; text-decoration: none; } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .toggle-switch.on { background: #2f8f4e; } .toggle-switch.on::after { left: 20px; } /* Interrupteur on/off pour une vraie case à cocher (ex: Distribuée) */ .switch-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .switch-checkbox { display: none; } .switch-label { display: inline-block; width: 36px; height: 18px; border-radius: 9px; background: #ccc; position: relative; flex-shrink: 0; } .switch-label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.15s; } .switch-checkbox:checked + .switch-label { background: #2f8f4e; } .switch-checkbox:checked + .switch-label::after { left: 20px; } /* Couleurs de ligne par statut d'avancement : dégradé horizontal, transparent à gauche vers la couleur du statut à droite (sur pour un dégradé continu sur toute la ligne plutôt que de repartir à zéro à chaque cellule) */ /* Lightbox de confirmation (remplace confirm() natif) */ .confirmation-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 12px; } /* La création de client peut être appelée par-dessus une autre lightbox (« Nouvelle tâche », modification…) : elle passe toujours devant. */ #lightbox-nouveau-client-global.confirmation-overlay { z-index: 130; } .confirmation-box { background: #fff; border-radius: 6px; padding: 24px; max-width: 360px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); text-align: center; /* Un formulaire long doit rester entièrement atteignable, surtout sur téléphone : la boîte défile au lieu de déborder de l'écran. */ max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; } @media (max-width: 700px) { .confirmation-box { padding: 16px; width: 100%; } .confirmation-actions { flex-wrap: wrap; } } .confirmation-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; } .confirmation-actions button { padding: 8px 16px; } #confirmation-valider { background: #c0392b; color: #fff; border: none; border-radius: 4px; cursor: pointer; } #confirmation-annuler { background: #eee; border: none; border-radius: 4px; cursor: pointer; } /* Ligne d'un encart en cours de modification : fond bleu du logo qui oscille doucement entre 10% et 25% d'opacité, pour la distinguer nettement du reste du tableau pendant l'édition. */ @keyframes ligne-edition-pulse { 0%, 100% { background-color: rgba(0, 72, 153, 0.10); } 50% { background-color: rgba(0, 72, 153, 0.25); } } tr.ligne-edition-encart { animation: ligne-edition-pulse 1.8s ease-in-out infinite; } /* PLUS DE DÉGRADÉ EN FOND DE LIGNE (15/09). Ces sept états s'affichaient sur un fondu de gauche à droite : la même ligne n'avait pas la même couleur au début et à la fin, et deux lignes voisines ne se comparaient qu'à leur bord droit. Un aplat se lit d'un coup d'œil, ce qui est tout ce qu'on lui demande. La hachure de « à signer » reste : elle ne dit pas une couleur, elle dit « en attente », et ce n'est pas un fond, c'est un motif. */ tr.statut-a_signer { background: #f3e5f5; } tr.statut-a_signer.a-signer-hachure { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(120,120,120,.3) 8px, rgba(120,120,120,.3) 16px), #f3e5f5; } tr.statut-en_attente { background: #f5f5f5; } tr.statut-demande { background: #fff3e0; } tr.statut-a_faire { background: #fffde7; } tr.statut-en_validation { background: #e3f2fd; } tr.statut-valide { background: #e8f5e9; } /* Alerte visuelle : client non soumis à TVA mais facturé par l'agence. Sur (pas ) pour que le motif soit continu sur toute la ligne plutôt que de repartir à zéro à chaque cellule. Discret (faible opacité). */ tr.alerte-tva { background-image: repeating-linear-gradient(45deg, rgba(241,196,15,0.22) 0px, rgba(241,196,15,0.22) 3px, transparent 3px, transparent 6px); } /* Ligne "encart flottant" : un client a un bon de commande sans numéro choisi, proposé en fin de liste des encarts pour affectation rapide à ce numéro. Style pointillé/discret pour la distinguer des vrais encarts. */ tr.encart-flottant-row { background-image: repeating-linear-gradient(45deg, rgba(0,72,153,0.07) 0px, rgba(0,72,153,0.07) 6px, transparent 6px, transparent 14px); font-style: italic; } /* Variante corail : ce client a exactement autant de flottants + encarts déjà affectés sur l'année que de numéros dans l'année — il ne reste donc plus aucune marge, un encart DOIT être affecté à ce numéro précis. */ tr.encart-flottant-imperatif { background-image: repeating-linear-gradient(45deg, rgba(230,74,25,0.14) 0px, rgba(230,74,25,0.14) 6px, transparent 6px, transparent 14px); } /* Badges de droite des lignes d'encarts flottants : rouge si l'affectation est impérative (voir plus haut), bleu sinon (juste "disponible"). */ .badge-imperatif { background: #e57373; color: #fff; } .badge-disponible { background: var(--accent, #004899); color: #fff; } /* Vignette du visuel d'un encart, en début de ligne */ .encart-thumb { max-width: 40px; max-height: 40px; display: block; border-radius: 3px; border: 1px solid #ccc; object-fit: cover; } /* Boutons icône seule (envoyer / supprimer / télécharger le visuel d'un encart) : petits ronds colorés, une seule lettre/flèche dedans. */ td.fichier-actions { white-space: nowrap; } /* Colonne d'actions d'un encart : des CASES de largeur fixe, une par type d'action, pour qu'elles tombent au même endroit d'une ligne à l'autre. Sans cela, un encart sans visuel décalait tout ce qui suit et la colonne descendait en escalier. Deux actions qui ne peuvent jamais coexister partagent une case : reprendre le dernier visuel / le supprimer d'un côté, l'envoi / le téléchargement de l'autre. */ .encart-actions { display: inline-flex; align-items: center; gap: 4px; } .encart-action-case { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; min-height: 22px; } .encart-action-case form { margin: 0; line-height: 0; } .encart-action-case .icon-btn { margin-right: 0; } /* Le bon à tirer prend tantôt un rond, tantôt une pastille d'état plus large : sa case a la largeur de la pastille, sinon le post-it qui suit sauterait d'une ligne à l'autre. */ .encart-action-case-bat { flex: 0 0 96px; width: 96px; justify-content: flex-start; } /* Sur la fiche client, le bon à tirer est un bouton en toutes lettres (« Bon à tirer ») et non un rond : sa case est plus large. */ .encart-action-case-bat-large { flex: 0 0 122px; width: 122px; } @media (max-width: 900px) { /* Au doigt, la colonne est déjà à l'étroit : la case du bon à tirer reprend la largeur de son contenu. */ /* La case garde une largeur MINIMALE : sans elle, une ligne sans bon à tirer laissait le post-it remonter d'une case et l'alignement, qui est tout l'intérêt, se perdait sur téléphone. Une pastille d'état plus large repousse la colonne, c'est inévitable à cette largeur d'écran. */ .encart-action-case-bat, .encart-action-case-bat-large { flex: 0 0 auto; width: auto; min-width: 26px; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; text-decoration: none; margin-right: 3px; vertical-align: middle; } /* Envoyer et télécharger portaient la même flèche bleue et le même bleu : à la voir de loin, on ne savait pas laquelle on visait. Deux teintes voisines mais distinctes — le BLEU PÉTROLE, sombre, pour ce qui monte ; le BLEU LAGON, plus clair, pour ce qui descend. Le lagon est retenu à #0E7C8C plutôt qu'à un turquoise plus vif : au-delà, la flèche blanche passait sous le seuil de lisibilité (contraste 4,9 contre 2,9). Les deux teintes sont écartées d'un facteur 2 en luminance : à 22 px de diamètre, c'est ce qu'il faut pour les distinguer d'une ligne à l'autre. */ .icon-btn-upload { background: #10505C; color: #fff; } .icon-btn-download { background: #0E7C8C; color: #fff; } .icon-btn-delete { background: #c0392b; color: #fff; } .icon-btn-reutiliser { background: #2f8f4e; color: #fff; font-size: 15px; font-weight: bold; } .icon-btn-modifier { background: #e8e8e8; color: #4a4a4a; } /* Bon à tirer d'un encart : l'orange de PROOF (cf. $couleursOutils dans public/index.php), puisque c'est vers Proof que le bouton emmène — et non une couleur de plus à retenir. L'arrobase est un caractère plus menu que les flèches voisines : elle est agrandie pour occuper le rond comme elles, et posée en gras, le fond de PROOF étant clair. */ /* L'ORANGE DE ⬢ PROOF, SUR UN ÉCRAN ECHOMMERCE. Le bouton ouvre un bon à tirer : il nomme ⬢ Proof, pas la page où il se trouve. Il suit donc le réglage de ⬢ Proof — `var(--accent)` l'aurait teint en bleu ECHOMMERCE. */ .icon-btn-bat { background: var(--outil-proof, #E8A13C); color: #fff; font-size: 14px; font-weight: 700; } /* Écrire à l'annonceur (v87) : arobase sur fond violet. Le bon à tirer porte déjà une arobase, en orange — les deux ne se rencontrent que sur un encart dont le visuel est là et le bon pas encore lancé, et la couleur suffit alors à les distinguer. */ .icon-btn-mail { background: #7B4FA8; color: #fff; font-size: 14px; font-weight: 700; } .icon-btn-mail:hover { background: #653f8c; } /* --- Fenêtre « Écrire à l'annonceur » ---------------------------------- */ .mail-annonceur-de { font-size: 12.5px; color: #767676; margin: 0 0 12px; } .mail-annonceur-champ { display: block; font-size: 13px; margin-bottom: 10px; } .mail-annonceur-champ input, .mail-annonceur-champ select, .mail-annonceur-champ textarea { width: 100%; box-sizing: border-box; margin-top: 2px; } .mail-annonceur-champ textarea { font-family: inherit; font-size: 13px; line-height: 1.45; } .mail-annonceur-dates { display: flex; gap: 10px; flex-wrap: wrap; } .mail-annonceur-dates label { font-size: 12px; color: #767676; } .mail-annonceur-dates input { display: block; margin-top: 2px; } .mail-annonceur-aide { font-size: 11.5px; color: #767676; margin: 4px 0 10px; } .mail-annonceur-alerte { color: #8a5a00; } .icon-btn-modifier:hover { background: #d8d8d8; } .icone-brouillon-client { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2f8f4e; color: #fff; margin-left: 6px; vertical-align: middle; } /* Chemin de fer : doubles pages, page impaire à droite, page 1 seule sans vis-à-vis. Chaque page = grille 4x4 (voir formatsGrilleReference()) ; les encarts "double" (1/2 Large, 1 Large, 2) sont positionnés en absolu par rapport au spread entier (8 colonnes), pas à une page seule. Présentation : 2 doubles-pages par ligne sur PC/tablette (100% de la largeur disponible réparti entre les deux), 1 seule par ligne sur mobile. */ #cf-contenu .cf-pages { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; } .cf-spread { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); display: flex; gap: 0; position: relative; } @media (max-width: 640px) { .cf-spread { flex: 1 1 100%; max-width: 100%; } } .cf-page { flex: 1 1 50%; aspect-ratio: 193 / 280; position: relative; border: 1px solid #999; background: #fff; overflow: visible; } .cf-page-vide { border: none; background: var(--fond-clair, #f4f6f8); } .cf-page-numero { position: absolute; bottom: 2px; right: 4px; font-size: 9px; color: #999; pointer-events: none; } .cf-encart { position: absolute; box-sizing: border-box; border: 1px solid var(--accent, #004899); overflow: hidden; cursor: grab; background: #fff; } .cf-encart-double { z-index: 2; } .cf-encart-a-signer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(120,120,120,.3) 8px, rgba(120,120,120,.3) 16px); } .cf-encart-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Chemin de fer : l'option « cadres de couleur » ---------------------- Chaque encart porte déjà la couleur de son avancement en variable CSS (--statut, posée par parution.php à partir de statutCouleurHex() : la même palette que les lignes du tableau). Ici, on décide seulement de la montrer. Le liseré sombre à l'intérieur est indispensable : deux des six teintes sont presque blanches, et un cadre invisible ne renseigne personne. */ .cf-cadres .cf-encart { border-width: 3px; border-color: var(--statut, #004899); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); } /* Bouton de l'option, dans la barre de titre du chemin de fer. */ .cf-option-cadres { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 2px 9px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; color: #5a5a63; font-size: 11.5px; font-weight: 600; cursor: pointer; vertical-align: middle; line-height: 1.6; } .cf-option-cadres:hover { border-color: #c7c7c7; color: #3C3C3B; } .cf-option-cadres.actif { border-color: var(--accent, #004899); color: var(--accent, #004899); background: #eef2f7; } /* La légende ne paraît qu'avec l'option — sinon elle expliquerait des couleurs qu'on ne voit pas. */ .cf-legende { display: none; } .cf-cadres.cf-legende, #cf-contenu.cf-cadres .cf-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 11.5px; color: #767676; } .cf-legende-case { display: inline-block; width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .22); } .cf-legende-libelle { margin-right: 8px; } .cf-encart-vide { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; text-align: center; background: #eef2f7; color: var(--accent, #004899); padding: 2px; overflow: hidden; line-height: 1.3; } /* Surbrillance verte : encarts qui seront chassés (repassés en non-placé) si on dépose ici l'encart en cours de glisser-déposer. */ /* Prévisualisation du glisser-déposer : les encarts qui seront expulsés (chassés) sont matérialisés par des hachures rouges superposées à leur contenu ; l'emplacement exact où atterrira l'encart déplacé est matérialisé par un cadre vert distinct (voir .cf-cible-preview). */ .cf-surbrillance { position: relative; z-index: 4; } .cf-surbrillance::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(45deg, rgba(192,57,43,0.4) 0, rgba(192,57,43,0.4) 6px, transparent 6px, transparent 14px); } .cf-cible-preview { position: absolute; border: 3px solid #2f8f4e; box-sizing: border-box; background: rgba(47,143,78,0.1); pointer-events: none; z-index: 6; } .cf-alerte { color: #c0392b; } .cf-toggle { background: none; border: none; color: var(--accent, #004899); font-weight: bold; font-size: 16px; cursor: pointer; padding: 0; } /* Cartouche titre (1/8, réservé, page 1 uniquement) : logo ECHOMMERCE puis logo de l'édition en dessous, jamais déplaçable ni supprimable. */ .cf-cartouche { position: absolute; box-sizing: border-box; border: 1px solid #999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; z-index: 10; /* toujours au-dessus, même si un encart placé avant ce correctif occupe encore sa case */ } .cf-cartouche-logo { max-width: 90%; max-height: 45%; object-fit: contain; } /* Grille d'alignement année x numéro ("Ajouter des parutions" de la fiche client) : purement pour aligner les colonnes, sans bordures ni fond, contrairement aux tableaux de données habituels de l'appli. */ table.table-grille { background: none; } table.table-grille td { border: none; padding: 4px 10px 4px 0; } /* Onglet Clients : une ligne sur deux légèrement teintée de bleu, et un séparateur d'initiale (lettre, ou "#" pour les noms commençant par un chiffre) à chaque changement — fond bleu plein, texte blanc gras, prioritaire sur la teinte zébrée grâce à !important. */ table.table-clients tbody tr:nth-child(even) { background: rgba(0,72,153,0.1); } table.table-clients tr.initiale-separateur { background: var(--accent, #004899) !important; color: #fff !important; font-weight: bold; } table.table-clients tr.initiale-separateur td { padding: 4px 10px; } /* Colonne Propriétaire(s) : "Gratuit" comme les noms de propriétaires, même présentation — fond bleu, texte blanc gras italique. */ .badge-proprietaire { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--accent, #004899); color: #fff; font-weight: normal; font-style: italic; font-size: 12px; } /* Client désactivé (admin) : grisé, comme les numéros archivés */ tr.ligne-inactive { opacity: 0.55; } /* Liens rapides vers chaque initiale, au-dessus du tableau Clients */ .initiales-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .initiales-nav a { font-weight: bold; } /* Remplissage : rectangles au ratio A4, subdivisés en grille 4x4 par couleur de statut */ .a4-boxes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .a4-box-col { display: flex; flex-direction: column; align-items: flex-start; width: 56px; flex: 0 0 56px; } .a4-box-legende { font-size: 11px; height: 14px; line-height: 14px; white-space: nowrap; margin-bottom: 3px; color: #333; overflow: visible; position: relative; z-index: 1; } .a4-box { width: 56px; height: 79px; border: 1px solid #ccc; border-radius: 3px; position: relative; overflow: hidden; background: #fff; } .a4-box-extra { background: rgba(0,0,0,0.1); border: 1px dashed #999; } .a4-mini-bloc { position: absolute; border: 1px solid rgba(0,0,0,0.15); box-sizing: border-box; } /* Remplissage simplifié de la page Parutions : un petit rectangle A4 par page, rempli successivement — gris (cartouche + gratuits) puis bleu (payants) — pas de détail par statut ici (voir la fiche numéro). Un espace triple sépare chaque groupe de 4 pages (cahier). */ .a4-mini-boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px; max-width: 120px; } .a4-mini-groupe-page { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 2px; flex: 0 0 auto; } .a4-mini-box { width: 11px; height: 15px; border: 1px solid #ccc; border-radius: 1px; position: relative; overflow: hidden; background: #fff; flex-shrink: 0; } .a4-mini-fill { position: absolute; left: 0; width: 100%; } .a4-mini-fill-gris { bottom: 0; background: #ccc; } .a4-mini-fill-bleu { background: var(--accent, #004899); } /* A193 — la surface d'un devis parti en signature : la couleur du vendu, hachurée. Elle est réservée, pas encore acquise ; un aplat la confondrait avec le bleu, une autre couleur ferait croire à un autre genre d'encart. */ .a4-mini-fill-signature { background: repeating-linear-gradient(135deg, var(--accent, #004899) 0 1.5px, #fff 1.5px 3px); } .a4-mini-survol { display: inline-block; cursor: help; } .a4-mini-box-extra { border-style: dashed; border-color: #999; background: rgba(0,0,0,0.06); } /* Cellule "Année" fusionnée (rowspan) de la page Parutions : bleu ECHOMMERCE, texte blanc gras, centrée verticalement sur tout le bloc de l'année. */ .annee-cell { background: var(--accent, #004899); color: #fff; font-weight: bold; text-align: center; vertical-align: middle; } /* Années passées (écoulées) : gris 80% plutôt que bleu, pour les distinguer visuellement de l'année en cours et des années à venir. */ .annee-cell-passee { background: #333333; } /* Numéro archivé : grisé, MAIS pas la cellule Année fusionnée (rowspan) qui peut appartenir à cette ligne — l'opacité s'applique par cellule, pas sur toute la ligne, sinon la case Année se retrouve grisée elle aussi dès que le premier numéro de l'année est archivé. */ tr.ligne-archivee td:not(.annee-cell) { opacity: 0.55; } /* Dégradé de la parution en cours : porté par la ligne entière, pour qu'il traverse toute la largeur au lieu de redémarrer à chaque colonne. La ligne qui contient la cellule année a un rowspan sur toute l'année, ce qui étire sa boîte bien au-delà de sa propre hauteur ; on rend donc les cellules des autres lignes opaques, sinon le dégradé se verrait à travers et teinterait tout le bloc de l'année. */ table.table-parutions td:not(.annee-cell) { background-color: #fff; } table.table-parutions tr.ligne-flottants td:not(.annee-cell) { background-color: #f4f6f8; } table.table-parutions tr.ligne-en-cours td:not(.annee-cell) { background-color: transparent; } table.table-parutions tr.ligne-en-cours { background-image: linear-gradient(to right, rgba(0,72,153,.18), rgba(0,72,153,.02)); } /* Ligne récapitulative des recettes d'encarts flottants, sous les numéros d'une année encore active */ tr.ligne-flottants td { background: #f4f6f8; font-size: 13px; } tr.encart-section-bandeau td { background: var(--accent, #004899); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-bottom: none; } tr.ligne-flottants em { font-style: italic; color: #575756; } /* ---------- COBA : Gantt + détail (voir coba.html fourni en référence) ---------- */ .coba-city-head { display: flex; align-items: center; gap: 11px; margin: 24px 0 14px; } .coba-city-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent, #3f6cb3); } .coba-city-head h2 { font-size: 19px; font-weight: 700; margin: 0; } .coba-city-head .count { font-size: 12px; color: #767676; font-weight: 500; background: #f2f2f2; padding: 3px 9px; border-radius: 20px; } .coba-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 1px 2px rgba(33,28,22,.06), 0 6px 18px rgba(33,28,22,.05); overflow: hidden; margin-bottom: 20px; } .gantt-city { overflow-x: auto; } .gantt-city-inner { width: max-content; } .gantt-scale { display: flex; border-bottom: 1px solid #e0e0e0; } .gantt-scale .mcell { flex: 1 0 0; text-align: center; font-size: 10.5px; color: #767676; padding: 5px 0; border-left: 1px solid #e0e0e0; position: relative; } .gantt-scale .mcell:first-child { border-left: none; } .gantt-scale .mcell.peak { background: #FBEFD6; color: #9a6a18; font-weight: 600; } .gantt-scale .yr { font-size: 9px; letter-spacing: .05em; opacity: .6; display: block; } .grow { display: flex; align-items: stretch; border-bottom: 1px solid #e0e0e0; } .grow:last-child { border-bottom: none; } .glabel { flex: 0 0 160px; width: 160px; position: sticky; left: 0; z-index: 10; background: #fff; padding: 8px 13px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; justify-content: center; gap: 3px; box-shadow: 3px 0 5px rgba(33,28,22,.04); } .glabel h4 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.15; } .ghead .glabel { background: #f7f7f7; } .gtimeline { flex: 0 0 auto; position: relative; } .track { position: relative; height: 46px; margin: 6px 0; } .track-grid { position: absolute; inset: 0; display: flex; pointer-events: none; } .track-grid .g { flex: 1 0 0; border-left: 1px solid #f1ebdd; } .track-grid .g:first-child { border-left: none; } .track-grid .g.peak { background: #FBEFD6; opacity: .5; } .track-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent, #3f6cb3); opacity: .55; pointer-events: none; z-index: 1; } .track-vide { display: flex; align-items: center; height: 100%; padding-left: 10px; font-size: 11px; font-style: italic; color: #a79a82; } .block { position: absolute; top: 0; height: 100%; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.14); cursor: pointer; } .block .seg { flex: 1 1 0; position: relative; display: flex; align-items: center; padding: 0 7px; font-size: 9.5px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; line-height: 1; } .block .seg span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.18); } .block .seg + .seg { border-top: 1px solid rgba(255,255,255,.55); } .block.est { outline: 1.5px dashed rgba(33,28,22,.5); outline-offset: -1.5px; } .block.est .seg::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.32) 5px, rgba(255,255,255,.32) 10px); } .block.eclair { transform: translateY(-7px); height: calc(100% - 4px); z-index: 5; outline: 1.5px solid #211C16; outline-offset: -1.5px; box-shadow: 0 3px 8px rgba(33,28,22,.28); } .block.eclair .bolt { position: absolute; top: 2px; left: 3px; z-index: 2; font-size: 9px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .block.nocamp { background: #e7e3da; box-shadow: none; border: 1px solid #d4cfc3; } .block.nocamp::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: #211C16; } .block.nocamp.est { outline: 1.5px dashed rgba(33,28,22,.4); outline-offset: -1.5px; } .gtip { position: fixed; z-index: 9999; background: #211C16; color: #fff; border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; max-width: 240px; } .gtip .cli { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; } .gtip .cli .l2 { display: block; font-weight: 500; opacity: .92; } .gtip .r { font-family: monospace; font-size: 11px; opacity: .85; } .gtip .tag { display: inline-block; margin-top: 5px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.16); padding: 2px 6px; border-radius: 4px; } .gtip-image { display: block; margin-top: 8px; max-width: 100%; border-radius: 5px; } /* Détail (cartes) sous le Gantt : historique masqué par défaut (
) */ .city-detail { border-top: 1px solid #e0e0e0; padding: 12px 18px 16px; } .city-detail-title { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: #767676; font-weight: 600; margin: 0 0 12px; } .resto-detail { margin-bottom: 14px; } .resto-detail:last-child { margin-bottom: 0; } .resto-detail-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; } .resto-detail-head .dot { width: 7px; height: 7px; border-radius: 50%; background: #767676; } .resto-detail-head h4 { margin: 0; font-size: 13px; font-weight: 600; } .camps { display: flex; flex-direction: column; gap: 6px; } .camp { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 7px; background: #a79a82; color: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(33,28,22,.1); } .camp.passee { opacity: .6; } .camp.estimee::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.18) 6px, rgba(255,255,255,.18) 12px); } .camp.estimee { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); } .camp-image { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .camp-ann { font-weight: 700; font-size: 13.5px; line-height: 1.2; position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.22); } .camp-ann .amp { font-weight: 400; opacity: .85; margin: 0 5px; } .camp-mid { flex: 1 1 auto; font-family: monospace; font-size: 11.5px; color: rgba(255,255,255,.92); position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.2); white-space: nowrap; } .camp-mid .est { text-transform: uppercase; font-size: 9.5px; letter-spacing: .06em; background: rgba(255,255,255,.22); padding: 1px 6px; border-radius: 4px; margin-left: 6px; } .camp-acts { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; position: relative; z-index: 1; } .camp .btn-mini { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.14); padding: 5px 9px; font-size: 12px; border-radius: 6px; cursor: pointer; } .camp .btn-mini:hover { border-color: #fff; background: rgba(255,255,255,.26); } .camp-nocamp { background: #e7e3da; color: #767676; } .camp-nocamp .camp-ann { color: #211C16; text-shadow: none; } .camp-nocamp .camp-mid { color: #767676; text-shadow: none; } .camp-nocamp .btn-mini { border-color: #e0e0e0; color: #767676; background: transparent; } .tag-eclair { margin-right: 5px; } .camp-eclair { box-shadow: inset 4px 0 0 #e0a900, 0 1px 2px rgba(33,28,22,.1); } .coba-historique summary { cursor: pointer; font-size: 12px; color: var(--accent, #3f6cb3); font-weight: 600; margin: 6px 0; list-style: none; } .coba-historique summary::-webkit-details-marker { display: none; } .coba-historique summary::before { content: "▸ "; } .coba-historique[open] summary::before { content: "▾ "; } .empty-br { padding: 10px 0; color: #767676; font-size: 12.5px; font-style: italic; } .btn-mini { display: inline-block; padding: 5px 9px; font-size: 12px; border-radius: 6px; cursor: pointer; text-decoration: none; } a.btn-mini { background: var(--accent, #3f6cb3); color: #fff; } .coba-editbox { padding: 13px; border: 1px solid var(--accent, #3f6cb3); border-radius: 8px; background: #fff; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 6px; } .coba-editbox .row2 { display: flex; gap: 8px; margin-left: auto; align-items: flex-start; } /* ---------- ⬢ Prompt (ex-Firefly) : les prompts d'images ---------- Le rose du logo PROMPT est géré par la variable --accent globale (voir index.php) : les cartes s'y réfèrent plutôt que de figer la couleur, pour suivre une éventuelle personnalisation de l'outil. */ .firefly-liste { max-width: 560px; margin: 20px auto 0; } .firefly-commande { position: relative; background: var(--accent, #DC4D7F); color: #fff; border: 2px solid var(--accent, #DC4D7F); border-radius: 14px; margin-bottom: 14px; overflow: hidden; transition: box-shadow .2s ease; } .firefly-commande:hover { box-shadow: 0 4px 18px rgba(34,36,42,.25); } .firefly-bouton { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 18px; font-family: inherit; color: inherit; font-size: 14px; } /* Empêche explicitement le survol/clic/focus de reprendre le fond bleu foncé des boutons génériques du reste de l'appli (règle globale plus spécifique une fois combinée à :hover/:active). */ .firefly-bouton:hover, .firefly-bouton:active, .firefly-bouton:focus { background: none; } /* Le bleu vu au clic ne vient pas du fond mais du contour de focus et/ou du surlignage tactile par défaut du navigateur (ni l'un ni l'autre n'est une couleur "background", d'où l'inefficacité de la règle ci-dessus seule) : on les neutralise et on garde un indicateur de focus clavier accessible, discret, dans le rouge de l'outil. */ .firefly-bouton { -webkit-tap-highlight-color: transparent; outline: none; } .firefly-bouton:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } .firefly-icone { flex: none; width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: transparent; } .firefly-icone svg, .firefly-icone img { width: 26px; height: 26px; display: block; object-fit: contain; } .firefly-titre { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff; } /* Effet de balayage (reflet rapide) au clic, à la place du petit bouton "Copier" — la carte entière est déjà le bouton, plus besoin d'un état textuel séparé pour confirmer l'action. */ .firefly-commande::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%); transform: skewX(-20deg); pointer-events: none; } .firefly-commande.balayage::after { animation: firefly-balayage .55s ease-out; } @keyframes firefly-balayage { from { left: -75%; } to { left: 125%; } } @media (prefers-reduced-motion: reduce) { .firefly-commande.balayage::after { animation: none; } /* Le bandeau reste visible, sans mouvement. */ .bandeau-emprunt { animation: none; background-image: none; background-color: #8665A6; } .bandeau-critique { background-color: #DB0819; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Réglages ⬢ Prompt : aperçu de l'icône dans la liste, mise en forme du formulaire */ .firefly-icone-mini { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent, #DC4D7F); } .firefly-icone-mini svg, .firefly-icone-mini img { width: 18px; height: 18px; object-fit: contain; } /* ⬢ Prompt — poignée de rangement. Elle vit À CÔTÉ du bouton de copie, pas dedans : tirer une carte ne doit jamais copier son prompt au passage. touch-action: none sur la poignée elle-même — Safari l'applique à l'élément touché, pas à son ancêtre. */ .prompt-poignee { position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .45; font-size: 15px; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .prompt-poignee:hover { opacity: .9; } .prompt-poignee:active { cursor: grabbing; } .firefly-commande-deplacee { opacity: .55; } /* La poignée mange le coin droit : on écarte le titre pour qu'ils ne se chevauchent pas sur un titre long. */ .firefly-commande .firefly-bouton { padding-right: 40px; } .prompt-aide-rangement { max-width: 560px; margin: 4px auto 0; text-align: center; color: #767676; } /* ⬢ Prompt — page de copie : étiquette de l'auteur sur une carte adoptée, trait de séparation avant les prompts venus des autres membres. */ .prompt-etiquette { flex: none; font-size: 11px; color: #fff; opacity: .85; text-transform: uppercase; letter-spacing: .04em; } .prompt-separateur { max-width: 560px; margin: 26px auto 14px; display: flex; align-items: center; gap: 12px; color: #767676; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .prompt-separateur::before, .prompt-separateur::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; } /* ⬢ Prompt — page de réglages : trois sections (nouveau, les miens, le réseau groupé par auteur). Chaque prompt est une rangée qui se déplie. */ .prompt-bloc { max-width: 680px; margin: 0 auto 34px; } .prompt-bloc h2 { margin-bottom: 10px; } .prompt-bloc h2 small, .prompt-auteur small { color: #767676; font-weight: 500; margin-left: 6px; } .prompt-auteur { font-size: 14px; margin: 18px 0 8px; color: #3c3c3b; } .prompt-form label { display: block; font-weight: 600; font-size: 13px; } .prompt-form input[type=text], .prompt-form textarea { font-family: inherit; box-sizing: border-box; } .prompt-cases { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .prompt-cases label { font-weight: 500; display: flex; align-items: center; gap: 8px; } .prompt-cases input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent, #DC4D7F); } .prompt-rangees { display: flex; flex-direction: column; gap: 8px; } .prompt-rangee { border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; overflow: hidden; } .prompt-rangee-inactive { opacity: .6; } .prompt-rangee-tete-reseau { display: flex; align-items: center; } /* Bouton pleine largeur : le thème repeint « form button », d'où le préfixe. */ .prompt-rangee .prompt-rangee-tete { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; background: #fff; border: none; color: #3c3c3b; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .prompt-rangee .prompt-rangee-tete:hover { background: #f7f7f8; } .prompt-rangee-titre { flex: 1; min-width: 0; } .prompt-rangee-bascule { flex: none; margin: 0 12px 0 0; } .prompt-etiquette-grise { flex: none; font-size: 11px; color: #767676; text-transform: uppercase; letter-spacing: .04em; } .prompt-rangee-detail { padding: 4px 14px 14px; border-top: 1px solid #f0f0f0; } .prompt-rangee-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .prompt-rangee-actions .prompt-lien-supprimer { margin-right: auto; } .prompt-texte { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; background: #f7f7f8; border-radius: 6px; padding: 10px 12px; margin: 10px 0 0; color: #3c3c3b; } .prompt-icone-perso { margin-top: 14px; font-size: 13px; } .prompt-icone-perso label { font-weight: 600; } /* Boutons discrets de la page de réglages. */ .prompt-bloc .prompt-lien { background: none; border: 1px solid #e0e0e0; color: #767676; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; } .prompt-bloc .prompt-lien:hover { background: #f4f4f4; } /* Après la règle ci-dessus, sinon la teinte grise l'emporterait. */ .prompt-bloc .prompt-lien-supprimer { border-color: #e0a0a0; color: #c0392b; } .prompt-bloc .prompt-lien-supprimer:hover { background: #fdecea; } /* ⬢ Prompt — catégories, fichiers, commentaire (A146, 23/09). UN CHAMP QU'ON CACHE SE CACHE POUR DE BON : les `label` des champs « texte » et « fichier » portent un `display:block` écrit sur place, qui l'emporterait sur le `display:none` que le navigateur donne à `[hidden]` — l'attribut se poserait sans rien cacher (§ 13 unvicies). */ .prompt-form [data-prompt-si][hidden], .prompt-form [data-prompt-si-categorie][hidden] { display: none !important; } .prompt-type { border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px 12px 10px; margin: 0; } .prompt-type legend { font-weight: 600; font-size: 13px; padding: 0 4px; } .prompt-form .prompt-type label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin-right: 16px; } .prompt-type small { color: #767676; } .prompt-commentaire-lu { font-size: 13px; color: #555; margin: 10px 0 0; } .prompt-categorie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; } .prompt-categorie-forme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .prompt-categorie-forme:first-child { flex: 1; min-width: 0; } .prompt-categorie-forme input[type=text] { flex: 1; min-width: 120px; max-width: 280px; font-family: inherit; box-sizing: border-box; } .prompt-categorie small { color: #767676; } .prompt-categorie-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; } /* La page de copie : les filtres de catégorie, et la ligne qui dit ce que produit un prompt. */ .prompt-filtres { max-width: 560px; margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 6px; } .prompt-filtre { font-size: 12.5px; font-weight: 600; color: #767676; text-decoration: none; border: 1px solid #e0e0e0; border-radius: 999px; padding: 4px 12px; background: #fff; } .prompt-filtre:hover { border-color: var(--accent, #DC4D7F); color: #3c3c3b; } .prompt-filtre-actif, .prompt-filtre-actif:hover { background: var(--accent, #DC4D7F); border-color: var(--accent, #DC4D7F); color: #fff; } a.firefly-bouton { text-decoration: none; } .firefly-commentaire { display: block; font-size: 12px; font-weight: 500; opacity: .85; margin-top: 3px; letter-spacing: 0; overflow-wrap: anywhere; } /* ---------- Calculateur de tarifs (onglet ECHOMMERCE) ---------- */ .repli-valeur { display: contents; } .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; } .actions-buttons { display: flex; gap: 10px; margin-bottom: 20px; } #calc-tbody td:first-child, #calc-tbody th:first-child { text-align: left; } #calc-tbody input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; } .calc-select-sansdate { padding: 4px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; background: var(--fond-clair, #f0f8ff); cursor: pointer; } .calc-sep-annee { border-left: 2px solid #b0b0b0; } @media (max-width: 600px) { #calc-tbody input[type=checkbox] { width: 22px; height: 22px; } .actions-buttons { flex-direction: column; } .actions-buttons button { width: 100%; padding: 12px; font-size: 15px; } } .contacts-modes { display: flex; gap: 12px; margin-bottom: 18px; } .contacts-modes a { padding: 6px 14px; border: 1px solid #e0e0e0; border-radius: 4px; text-decoration: none; color: #3c3c3b; } .contacts-modes a.contacts-mode-actif { background: var(--accent, #DB0819); color: #fff; border-color: var(--accent, #DB0819); } .contacts-agence-entete { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 22px 0 10px; padding: 8px 12px; background: var(--fond-clair, #f4f6f8); border-radius: 6px; } .contacts-agence-bloc { display: flex; align-items: center; gap: 8px; } .contacts-agence-logo { height: 32px; width: auto; } .contacts-agence-dept { font-weight: 800; font-size: 17px; color: var(--accent, #DB0819); } .contacts-agence-nom { font-weight: 600; } .contact-ligne-ville { font-size: 12px; color: #767676; font-weight: 600; } .contact-carte { display: flex; align-items: center; gap: 14px; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; background: #fff; box-sizing: border-box; max-width: 100%; overflow: hidden; } .contact-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-photo-vide { background: #DB0819; color: #fff; font-size: 20px; font-weight: 700; } .contact-infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .contact-ligne { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .contact-ligne-nom .contact-nom { flex: 1 1 100%; } .contact-ligne-nom .contact-activite { flex: 1 1 100%; } .contact-nom { font-weight: 700; } .contact-activite { color: #767676; } .contact-carte-visite { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .contact-carte-image { height: 54px; width: auto; max-width: 44px; object-fit: cover; border: 1px solid #e0e0e0; border-radius: 4px; cursor: zoom-in; } @media (max-width: 640px) { .contact-carte { gap: 8px; padding: 8px 10px; } .contact-photo { width: 44px; height: 44px; } .contact-carte-image { height: 40px; max-width: 32px; } .contact-nom { font-size: 14px; } .contact-activite { font-size: 12px; } } .fiche-entete { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } .fiche-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 34px; } .fiche-book { display: flex; flex-wrap: wrap; gap: 12px; } .fiche-book-item { position: relative; } .fiche-book-item img { width: 160px; height: 120px; object-fit: cover; border-radius: 6px; cursor: zoom-in; display: block; } .fiche-book-supprimer { position: absolute; top: 4px; right: 4px; } .contacts-agence-marques { margin-left: auto; display: flex; gap: 10px; align-items: center; } .contacts-marque-logo { height: 28px; width: auto; } table.masquer-pendant-edition .col-actif-mdp { display: none; } tr.ligne-en-edition td { padding-top: 10px; padding-bottom: 10px; vertical-align: top; } /* Bloc dépliable par outil sur la fiche client (ECHOMMERCE, bon ap'...) */ .bloc-outil { border: 1px solid #e0e0e0; border-radius: 6px; margin-top: 20px; background: #fff; } .bloc-outil > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #8665A6); } .bloc-outil[open] > summary { border-bottom: 1px solid #e0e0e0; } .bloc-outil > div { padding: 10px 14px; } .lettres-ancres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .lettres-ancres a { display: inline-block; min-width: 22px; text-align: center; padding: 2px 5px; border: 1px solid #e0e0e0; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: 700; color: var(--accent, #8665A6); } .lettres-ancres a:hover { background: var(--accent, #8665A6); color: #fff; } .bloc-outil-titre { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; } /* Zones de largeur fixe : sans ça, les logos (de ratios différents d'une édition à l'autre) décalent le titre d'un bloc à l'autre. */ .bloc-outil-titre .edition-logo { max-height: 22px; max-width: 100%; width: auto; margin: 0; display: block; object-fit: contain; object-position: left center; } .bloc-outil-titre > .bloc-outil-logo { flex: 0 0 26px; max-width: 26px; object-fit: contain; object-position: center; } .bloc-outil-titre > span:not(.bloc-outil-logo), .bloc-outil-titre > .edition-logo { flex: 0 0 150px; max-width: 150px; } .bloc-outil-logo { max-height: 20px; width: auto; display: block; } .bloc-outil-titre > span:not(.bloc-outil-logo) { display: inline-block; } /* Le « + » de la barre de navigation. DE LA COULEUR DE L'OUTIL EN COURS (lot *ki*, 28/09 : « le rouge remplacé par la couleur de l'outil en cours ») — `--accent` et `--accent-fonce`, posées sur par index.php ; hors d'un outil elles valent le rouge de la maison, et le repli écrit ici aussi. Le halo et les raccourcis de l'arc suivent. */ .nav-nouveau-client { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: var(--accent, #DB0819); color: #fff; cursor: pointer; flex-shrink: 0; } .nav-nouveau-client:hover { background: var(--accent-fonce, #b80715); } /* I76 — LE RACCOURCI DU FAVORI, juste à gauche du « + ». La MÊME boîte que le « + » (22 px, ronde, même milieu vertical) : deux voisins de tailles différentes se lisent comme une erreur de rendu. Le dessin, lui, est un peu plus petit que sa boîte — un pictogramme plein paraît plus gros qu'un disque de couleur à diamètre égal. Pas de fond : le « + » est le bouton, le favori est une icône. IL MORD SUR LA GARDE DE L'ARC, EXPRÈS. `.nav-creer` se réserve 78 px de chaque côté pour que l'arc des raccourcis ne morde pas sur le voisin ; collé à cette garde, le favori serait à 78 px du « + » et ne se lirait plus comme son voisin. La marge négative reprend 70 de ces 78 et le pose à 8 px du bouton — il reste alors 48 px de garde à sa gauche, de quoi laisser passer l'arc. ET IL PASSE AU-DESSUS DU HALO. Le halo du « + » (z-index 1045) fait 151 px de large, centré sur le bouton : il recouvrirait le favori d'un voile blanc au survol. À 1046 il passe derrière — sous les raccourcis de l'arc (1050), qui s'ouvrent sous la barre et ne le croisent pas. */ /* `.main-nav` DEVANT LA CLASSE, et ce n'est pas du zèle : `.main-nav a` pose déjà `margin-right: 16px` à tous les liens de la barre, et il gagne en spécificité sur une classe seule — la marge négative était écrasée et le raccourci se retrouvait à 94 px du « + », mesuré au parcours. */ .main-nav .nav-favori { position: relative; z-index: 1046; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; flex: none; margin: 0 -70px 0 0; text-decoration: none; } /* PAS DE ROND, et pas de fond du tout (lot nn, Grégory : « et pas dans un rond ») : le « + » est un bouton — un disque plein —, le favori est une icône. Un rond autour de lui en faisait un second bouton, et deux boutons côte à côte ne disent plus lequel agit. Au survol, le dessin s'éclaircit un peu : c'est assez pour dire qu'il est cliquable. */ .main-nav .nav-favori:hover { background: none; text-decoration: none; opacity: .72; } /* LE DESSIN SEUL — et son nom n'est pas composé à côté (`iconeFavoriBarre()` passe la clé du texte VIDE) : à 19 px, un pictogramme qui porte son nom rapetisse le dessin jusqu'à rien et donne un nom qu'on ne lit pas. */ .nav-favori .nav-favori-logo { width: 19px; height: 19px; display: block; } /* La troisième marche : l'initiale, quand aucun pictogramme n'est déposé. Une lettre à 19 px se lit ; un logo à 19 px non. */ .nav-favori-initiale { font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0; } /* Restreint (fermé, ou privé où l'on est nommé) : estompé comme au menu déroulant. Un membre sans accès ne voit pas la ligne du tout (I77). */ .nav-favori-restreint { opacity: .45; } /* SUR LA PAGE D'ICÔNES, le « + » est sorti du flux pour se caler au milieu de la barre (règle `.main-nav-hub .nav-creer`, plus haut) ; un raccourci resté dans le flux s'en retrouverait loin. Il en sort donc aussi, et se pose à gauche du bouton : 11 px (demi-« + ») + 8 d'écart + 11 (demi-icône) = 30 px du milieu. LE « + » NE BOUGE PAS D'UN PIXEL — c'est ce que le parcours mesure, et c'est pour ça que le décalage est porté par le favori et non par le groupe. */ .main-nav-hub .nav-favori { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% - 30px), -50%); margin: 0; } /* Raccourcis de création de l'outil Tâches, même gabarit que le « + ». */ .nav-bouton-rond { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: #DB0819; color: #fff; text-decoration: none; margin-right: 8px; } .nav-bouton-rond:hover { background: #b80715; } .main-nav .nav-bouton-rond { margin-right: 8px; } /* Formulaire « nouveau client » de la barre de navigation : plus compact */ .confirmation-box-compacte { padding: 14px 16px; } .confirmation-box-compacte label { font-size: 12px; } .confirmation-box-compacte input[type="text"], .confirmation-box-compacte input[type="email"], .confirmation-box-compacte input[type="tel"], .confirmation-box-compacte select, .confirmation-box-compacte textarea { font-size: 13px; padding: 4px 6px; } .confirmation-box-compacte h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #767676; } .confirmation-box-compacte .confirmation-actions { margin-top: 10px; } /* Fiche client — bloc contact : deux colonnes de largeur égale, les quatre champs à gauche, l'adresse à droite sur toute leur hauteur. */ .fiche-contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .fiche-contact-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .fiche-contact-grille label { display: block; } /* Même format pour les quatre champs de contact et l'adresse. */ .fiche-contact-grille input, .fiche-contact-grille textarea { width: 100%; box-sizing: border-box; } .fiche-contact-adresse { display: flex; flex-direction: column; height: 100%; } .fiche-contact-adresse label { display: flex; flex-direction: column; height: 100%; } .fiche-contact-adresse textarea { flex: 1; min-height: 96px; resize: vertical; } @media (max-width: 700px) { .fiche-contact-grille { grid-template-columns: 1fr; } .fiche-contact-champs { grid-template-columns: 1fr 1fr; } } /* Flux — bloc de saisie, placé au-dessus de la liste. */ .flux-ajout { border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; background: #f7f5fa; } .flux-ajout .flux-saisie-haut { display: flex; gap: 8px; margin-bottom: 8px; } .flux-ajout .flux-saisie-haut span { position: relative; } /* Proportions relatives : 30/50/20 en pourcentages fixes déborderaient une fois les espacements ajoutés. */ .flux-ajout .flux-saisie-haut > span, table.table-flux .flux-saisie-haut > span { min-width: 0; box-sizing: border-box; } .flux-col-client { flex-grow: 3; flex-shrink: 1; flex-basis: 0; } .flux-col-desc { flex-grow: 5; flex-shrink: 1; flex-basis: 0; } .flux-col-cat { flex-grow: 2; flex-shrink: 1; flex-basis: 0; } table.table-flux .flux-saisie-haut select, table.table-flux .flux-saisie-haut input[type=text] { max-width: 100%; box-sizing: border-box; } .flux-ajout input[type=text], .flux-ajout select { width: 100%; font-size: 13px; padding: 4px 6px; } .flux-ajout .flux-details { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12.5px; } /* Tous les éléments d'une même ligne alignés sur leur milieu. */ .flux-ajout .flux-details > span { display: inline-flex; align-items: center; gap: 5px; } .flux-ajout .flux-details label { display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; } /* Montants : largeur réduite de moitié. */ .flux-ajout input[type=text].flux-prix { width: 68px; text-align: right; } .flux-ajout input[type=date] { width: auto; font-size: 12.5px; padding: 3px 5px; } .flux-ajout .flux-actions { margin-left: auto; } /* Flux — liste des ventes : une ligne par vente en lecture, deux lignes en saisie (client 30 % / description 50 % / catégorie 20 %, puis le détail). */ table.table-flux { font-size: 11px; } table.table-flux th, table.table-flux td { padding: 2px 5px; } table.table-flux th { font-size: 10px; } table.table-flux .flux-num { text-align: right; white-space: nowrap; } table.table-flux select, table.table-flux input[type=text] { width: 100%; font-size: 12px; padding: 3px 5px; } /* Ligne de saisie : deux rangées dans une seule cellule. */ table.table-flux .flux-saisie-haut { display: flex; gap: 8px; margin-bottom: 6px; } table.table-flux .flux-details { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12px; color: #4a4a4a; } table.table-flux .flux-details label { font-size: 12px; } table.table-flux input[type=text].flux-prix { width: 68px; text-align: right; } table.table-flux .flux-details > span { display: inline-flex; align-items: center; gap: 5px; } table.table-flux .flux-details label { display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; } table.table-flux .flux-details input[type=date] { width: auto; font-size: 12px; padding: 2px 4px; } table.table-flux .flux-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; } /* Boutons de ces deux blocs : légèrement plus compacts. */ .flux-ajout button, table.table-flux .flux-details button { font-size: 12.1px; padding: 4.85px 9.7px; } /* Bouton balance d'équilibrage (page Paiements) : trois états. — éteint (gris) : la balance est sur OFF de mon côté ; — .attente (orange) : activée ici mais pas encore en face ; — .actif (rouge) : les deux côtés sont sur ON, la procédure tourne. */ .flux-balance { display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; color: #767676; cursor: pointer; vertical-align: middle; } .flux-balance:hover { color: var(--accent, #DB0819); } .flux-balance.attente { color: #b06f00; border-color: #e0a13c; background: #fdf6ea; } .flux-balance.attente:hover { color: var(--accent, #DB0819); } .flux-balance.actif { color: #fff; border-color: var(--accent, #DB0819); background: var(--accent, #DB0819); } .flux-balance.actif:hover { color: #fff; opacity: 0.85; } /* Soldé : rien si non, coche rouge si oui. */ table.table-flux .flux-solde { color: var(--accent, #DB0819); font-weight: 700; font-size: 14px; text-align: center; } table.table-flux tr.flux-nouvelle td { background: #f7f5fa; } table.table-flux tr.flux-en-edition td { background: #f4f6f8; } /* Saisie seule : pas de flèches de réglage sur les montants. */ table.table-flux input[type=number]::-webkit-outer-spin-button, table.table-flux input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } table.table-flux input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* Recherche prédictive de client (Flux, ECHOMMERCE, bon ap'). */ .rc { position: relative; } .rc-champ { width: 100%; } .rc-liste { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #d0d0d0; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; } .rc-option { padding: 5px 8px; font-size: 12.5px; cursor: pointer; } .rc-option:hover { background: #f0edf5; } .rc-option.rc-creation { font-weight: 700; color: var(--accent, #8665A6); border-top: 1px solid #e8e8e8; } /* Bouton rond de réaffectation du client depuis un tableau. */ .btn-changer-client { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: var(--accent, #8665A6); color: #fff; cursor: pointer; flex-shrink: 0; vertical-align: middle; } .btn-changer-client:hover { filter: brightness(.9); } /* Séparateur mensuel dans la liste des ventes Flux. */ table.table-flux tr.flux-mois td { background: var(--accent, #DB0819); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; } /* Bandeau de regroupement : les totaux occupent la cellule de la colonne qu'ils additionnent, sans libellé. */ table.table-flux tr.flux-mois td.flux-num { text-align: right; font-variant-numeric: tabular-nums; } /* Message d'alerte affiché après une action refusée (doublon de client...). */ /* A114 — la phrase qui dit qui lira la note. Ni une alerte ni une réussite : un renseignement, à lire une fois. D'où le gris et la barre discrète. */ .note-qui-lit { margin: 0 0 10px; padding: 6px 10px; border-radius: 4px; background: #f4f4f6; border-left: 3px solid #b9b9c2; color: #5a5a63; font-size: 12.5px; line-height: 1.35; } .message-alerte { margin: 12px 0 0; padding: 8px 12px; border-radius: 4px; background: #fdecea; border-left: 4px solid #DB0819; color: #8a1017; font-size: 13px; } /* CE QUI S'EST BIEN PASSÉ (O57). Même forme que l'alerte, l'autre couleur : un encart rouge pour annoncer une tâche créée ferait lire « problème » à qui ne lit que la couleur. Le vert est celui du point de validation des tâches (`.tache-point-vert`), pour qu'il n'y en ait pas deux. */ .message-fait { margin: 12px 0 0; padding: 8px 12px; border-radius: 4px; background: #eaf7ee; border-left: 4px solid #2e7d32; color: #1c5220; font-size: 13px; } /* Recherche de client : seconde section (clients d'autres utilisateurs, ou clients de l'utilisateur courant dans Flux). */ .rc-section-titre { padding: 3px 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #767676; background: #f4f4f4; border-top: 1px solid #e0e0e0; } .rc-section-rouge, .rc-option.rc-section-rouge { background: rgba(219, 8, 25, .2); } .rc-option.rc-section-rouge:hover { background: rgba(219, 8, 25, .32); } /* Paiements : le mois à venir, présenté en grisé et sans action. */ table.table-flux tr.paiement-avenir td { color: #9a9a9a; background: #fafafa; } /* Barre des connexions FLUX : pastilles rondes dans un cadre en demi-cercle. L'espacement entre pastilles est le même que celui qui les sépare du contour, à gauche comme à droite. */ .flux-barre { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: #f0edf5; border: 1px solid #e0dce8; } /* Les pastilles sont des liens : sans cette remise à zéro, elles héritent de la marge des liens de la barre de navigation, ce qui les écarte et laisse un vide après la dernière. */ .main-nav .flux-pastille { margin: 0; } .flux-pastille { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: visible; background: transparent; color: #4a4a4a; font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0; cursor: pointer; box-sizing: border-box; } .flux-pastille img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .flux-pastille:hover { filter: brightness(.95); } /* Connexion active : un point rouge à cheval sur le contour du cadre. */ .flux-pastille-active::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent, #DB0819); box-shadow: 0 0 0 2px #fff; } .flux-pastille.flux-glisse { opacity: .4; } /* Paiements : hauteur de ligne constante, avec ou sans bouton. */ table.table-flux td.paiement-actions { white-space: nowrap; height: 30px; box-sizing: border-box; vertical-align: middle; } /* Les deux groupes côte à côte, centrés entre la photo de l'utilisateur (au milieu de la barre de navigation) et le bouton « + » à droite. */ .flux-barres { display: inline-flex; align-items: center; gap: 8px; } /* Connexions SORTANTES (créées par l'utilisateur, modifiables) : contour rouge. ENTRANTES (créées par d'autres, lecture seule) : contour vert. */ .flux-barre-sortantes { background: #fff; border: 2px solid var(--accent, #DB0819); } .flux-barre-entrantes { background: #fff; border: 2px solid #28a050; } /* Lien de la barre d'outil réduit à une icône (réglages de Flux). */ .nav-lien-icone { display: inline-flex; align-items: center; vertical-align: middle; } /* Lignes issues d'un transfert ECHOMMERCE : bleu de l'outil à 20 %. */ table.table-flux tr.flux-ligne-echommerce td { background: rgba(0, 72, 153, .2); } table.table-flux td.flux-tick { color: var(--accent, #004899); font-weight: 700; font-size: 14px; text-align: center; } /* Ventes issues d'une campagne « bon ap' » : bleu de l'outil à 35 %. */ table.table-flux tr.flux-ligne-bonap td { background: rgba(0, 72, 153, .35); } /* Interrupteur présenté sous son libellé (formulaires « bon ap' »). */ .switch-colonne { display: inline-block; cursor: pointer; text-align: left; } .switch-colonne .switch-label { margin-top: 4px; } /* Barre des éditions ECHOMMERCE : logos dans un cadre dont le rayon égale la marge intérieure, ce qui garde un écart constant avec le bord du logo. */ .edition-barre { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: #eef2f8; border: 1px solid #d9e2ef; } .edition-pastille { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; border-radius: 4px; background: transparent; text-decoration: none; flex-shrink: 0; cursor: pointer; position: relative; box-sizing: border-box; } .main-nav .edition-pastille { margin: 0; } .edition-pastille img { height: 32px; width: auto; display: block; } #coba-barre .edition-pastille img { height: 100%; width: 100%; object-fit: cover; } .edition-pastille-nom { font-size: 11px; font-weight: 700; color: var(--accent, #004899); white-space: nowrap; } .edition-pastille:hover { filter: brightness(.95); } /* Édition affichée : point rouge à cheval sur le contour du cadre. */ .edition-pastille-active::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #DB0819; box-shadow: 0 0 0 2px #fff; } .edition-pastille.flux-glisse { opacity: .4; } /* Montants d'un mois déjà réglé : grisés pour les distinguer des sommes dues. */ table.table-flux td.paiement-regle { color: rgba(60, 60, 59, .5); } /* Logos des éditions « bon ap' » : la pastille est ronde et découpe le logo — c'est le conteneur qui porte le masque, pas l'image. Les logos ECHOMMERCE restent rectangulaires, d'où le ciblage sur cette barre seule. */ #coba-barre .edition-pastille { width: 45px; height: 45px; padding: 0; border-radius: 50%; overflow: visible; /* sinon le point rouge de l'édition active est rogné */ background: transparent; } #coba-barre .edition-pastille img { border-radius: 50%; } /* Rayon du cadre = rayon de la pastille (20px) + marge intérieure (4px). */ #coba-barre { border-radius: 26.5px; } /* rayon pastille (22,5) + marge (4) */ /* Tableau des parutions : corps réduit et colonnes resserrées. */ .table-parutions-compacte { font-size: 14px; } .table-parutions-compacte th, .table-parutions-compacte td { font-size: 14px; } .table-parutions-compacte .col-numero { width: 48px; } .table-parutions-compacte .col-remplissage { width: 132px; } /* Bloc compte du menu déroulant : la photo occupe la hauteur des deux entrées, qui sont décalées à sa droite. */ .outils-compte { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; } .outils-compte-liens { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .outils-compte-liens .outils-dropdown-item { padding-left: 0; white-space: nowrap; } .outils-compte-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .outils-compte-photo-vide { background: #DB0819; color: #fff; font-size: 18px; font-weight: 700; } .outils-compte-liens { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .outils-compte-liens .outils-dropdown-item { padding-left: 0; padding-right: 0; white-space: nowrap; } /* Prise de contrôle : bandeau permanent, pour ne jamais oublier sous quelle identité on travaille. */ .bandeau-emprunt { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: #fff; padding: 8px 16px; font-size: 13px; /* Dégradé défilant : le motif se répète à l'identique, si bien que la boucle est invisible. Deux périodes complètes sur 200 % de largeur. */ background-image: linear-gradient(90deg, #8665A6 0%, #c3b2d3 25%, #8665A6 50%, #c3b2d3 75%, #8665A6 100%); background-size: 200% 100%; animation: bandeau-defile 6s linear infinite; } @keyframes bandeau-defile { from { background-position: 0 0; } to { background-position: -200% 0; } } .bandeau-emprunt strong { color: #fff; } .bandeau-emprunt button { background: #fff; color: #8665A6; border: none; border-radius: 4px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; } /* Le bandeau de prise de contrôle coiffe la barre de menu. */ .bandeau-emprunt { z-index: 1200; } /* État en lecture seule d'un interrupteur (réglages FLUX). */ .etat-tick { color: var(--accent, #004899); font-weight: 700; font-size: 14px; } /* Outil Tâches. */ .pastille-couleur { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 6px; } .etiquette-critique { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: #DB0819; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; } table.table-flux tr.tache-retard td { background: rgba(219, 8, 25, .08); } table.table-flux tr.tache-terminee td { color: rgba(60, 60, 59, .5); } /* Tableau de bord : trois colonnes, une par horizon. `minmax(0, 1fr)` ET NON `1fr` — c'est la même chose SAUF sur un contenu qui ne se coupe pas. `1fr` a pour minimum automatique la largeur du contenu le plus étroit possible : un nom de client insécable en capitales pousse alors sa colonne, et toutes les autres se serrent pour lui faire de la place. Le tableau paraissait déréglé au hasard des clients. Le zéro dit à la colonne qu'elle a le droit d'être plus étroite que ce qu'elle porte — c'est ce qui rend la troncature possible plus bas. */ .bord-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .bord-colonne { min-width: 0; } .bord-colonne h2 { font-size: 15px; margin: 0 0 8px; } .bord-colonne h2 small { color: #767676; font-weight: normal; } .bord-carte { border: 1px solid #e0e0e0; border-left: 4px solid #e0e0e0; border-radius: 5px; padding: 7px 10px; margin-bottom: 7px; background: #fff; } .bord-carte-titre { font-size: 13px; font-weight: 600; } .bord-carte-info { font-size: 11.5px; color: #767676; margin-top: 2px; } /* Alerte « tâches critiques en retard » : même bandeau collant, mais rouge animé, au-dessus de la barre de menu (posé par index.php). */ .bandeau-critique { margin-bottom: 0; background-image: linear-gradient(90deg, #DB0819 0%, #f26b73 25%, #DB0819 50%, #f26b73 75%, #DB0819 100%); background-size: 200% 100%; animation: bandeau-defile 4s linear infinite; font-weight: 600; } .bandeau-critique a { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .bord-colonnes { grid-template-columns: minmax(0, 1fr); } } /* Tableau de bord : une tâche par ligne, notes dépliables. */ .bord-colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* `min-width: 0` : sans lui, le bloc refuse de devenir plus étroit que sa ligne la plus large, et la colonne repart en largeur malgré le `minmax`. */ .bord-bloc { border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; background: #fff; min-width: 0; } .bord-bloc h2 { font-size: 14px; margin: 0 0 8px; } .tache-ligne { display: flex; align-items: center; gap: 10px; border-left: 4px solid #e0e0e0; padding: 4px 8px; font-size: 12.5px; border-bottom: 1px solid #f0f0f0; } .tache-ligne-retard { background: rgba(219, 8, 25, .07); } .tache-ligne-nom { font-weight: 600; flex: 0 1 auto; } .tache-ligne-meta { color: #767676; font-size: 11.5px; flex: 1 1 auto; min-width: 0; } .tache-ligne-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .tache-notes { padding: 6px 8px 10px; } .tache-notes textarea { width: 100%; font-size: 12px; padding: 4px 6px; } @media (max-width: 900px) { .bord-colonnes-2 { grid-template-columns: minmax(0, 1fr); } } /* Menu de création, déroulé sous le bouton « + ». */ /* Le conteneur épouse exactement le bouton : sans cela, sa marge droite décale le point d'ancrage et l'arc n'est plus centré sous le « + ». */ .nav-creer { position: relative; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; /* 40px d'air de chaque côté du « + » (l'ancienne marge droite de 16px passe à 56px, et autant apparaît à gauche). */ /* Il faut au moins la moitié de la largeur de l'arc (66 + 13 = 79) de chaque côté pour que les raccourcis extrêmes ne mordent pas sur le logo voisin. */ /* v120 — L'ARC S'EST OUVERT, LA MARGE GAUCHE A DÛ SUIVRE. À quatre branches le bouton extrême tombait à 52 px du centre ; à cinq il tombe à 61,8, soit 74,8 px de demi-arc bouton compris. Les 62 px d'avant le laissaient mordre de 13 px sur le logo voisin. Les deux côtés sont maintenant égaux, et l'arc est centré pour de bon. */ margin-left: 78px; margin-right: 78px; } .nav-creer .nav-nouveau-client { margin: 0; } .main-nav .nav-creer .nav-nouveau-client { margin: 0; } /* Fond blanc circulaire, centré sur le « + » et passant sous les icônes. Son rayon dépasse de 15 px le bord extérieur des raccourcis. */ .nav-creer-halo { position: absolute; top: 50%; left: 50%; z-index: 1045; width: 0; height: 0; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); border: 3px solid var(--accent, #DB0819); box-sizing: border-box; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: width .18s ease, height .18s ease, opacity .18s ease; } .nav-creer:hover .nav-creer-halo, .nav-creer.ouvert .nav-creer-halo { /* Le halo passe par le bord extérieur des raccourcis : rayon de l'arc (66) + demi-bouton (13) - l'épaisseur du trait (3,5). L'arc s'étant élargi pour accueillir un quatrième raccourci, le cercle suit. */ width: 151px; height: 151px; opacity: 1; /* Centré sur le « + » lui-même. */ transform: translate(-50%, -50%); /* Intercepte les clics de ce qu'il recouvre (logo Toolbox…). */ pointer-events: auto; } /* Le bouton reste au-dessus du fond. */ .nav-creer .nav-nouveau-client { position: relative; z-index: 1060; overflow: visible; } /* Les raccourcis passent devant le cercle. */ .nav-creer-menu { z-index: 1050; } .bouton-rond-creer { z-index: 1055; } .nav-creer { z-index: 1040; } /* Les trois raccourcis se déploient en arc de cercle sous le « + ». Chacun est positionné en absolu ; l'arc s'ouvre au survol. */ .nav-creer-menu { position: absolute; top: 100%; left: 50%; z-index: 1050; width: 0; height: 0; pointer-events: none; } .nav-creer:hover .nav-creer-menu, .nav-creer.ouvert .nav-creer-menu { pointer-events: auto; } .bouton-rond-creer { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; /* padding et line-height remis à zéro : sur un