/* Polices auto-hébergées (charte EmotionWay) — fichiers .woff2 versionnés dans assets/fonts/, extraits à l'origine des paquets @fontsource/space-grotesk et @fontsource/instrument-sans (retirés du projet au bloc 0b-1 : plus aucune dépendance, pas de bundler dans ce projet). */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/instrument-sans-latin-700-normal.woff2') format('woff2')} :root{ /* Couleurs : base.css (Bloc A), chargée avant ce fichier sur chaque page — seule source. */ --radius:14px; /* BLOC V.3 §2 (partie 2) — hauteur réelle du bandeau d'observation (0 si absent/masqué), posée en JS (loadMe, dashboard.js) une fois le bandeau mesuré — décale tous les éléments sticky sous le header (maintabs, client-sticky) du même montant, jamais un chiffre en dur qui se désynchroniserait si le bandeau change de taille (retour à la ligne mobile, etc). */ --obs-h:0px; } *{box-sizing:border-box;margin:0;padding:0} /* Filet de sécurité mobile : aucun élément ne doit jamais forcer un scroll horizontal sur la page entière (BUG responsive) — les zones qui ont besoin de défiler horizontalement (table des posts, historique des collectes, onglets) le font dans leur propre conteneur overflow-x:auto, jamais sur html/body. */ html{overflow-x:hidden} body{background:var(--bg);color:var(--white);font-size:15px;line-height:1.5;min-height:100vh;overflow-x:clip} h1,h2.section,.cname,.modal-title{font-family:'Space Grotesk','Instrument Sans',Arial,sans-serif} /* Bloc M1 — l'en-tête de la PAGE seulement (enfant direct de body) : un sélecteur `header` nu rendait aussi collants, à z-index 50, les
internes (accueil .ajd-head, fiche lead, bilan) — sur téléphone, « Bonjour… » et ses compteurs passaient par-dessus le menu ouvert. */ body > header{position:sticky;top:var(--obs-h);z-index:50;background:rgba(22,23,26,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .observation-banner{position:sticky;top:0;z-index:55;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;background:var(--orange);color:var(--bg);font-weight:600;font-size:13px;padding:9px 16px;text-align:center} .observation-banner.hidden{display:none} .observation-exit-btn{background:var(--bg);color:var(--white);border:none;border-radius:8px;padding:6px 14px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit} .hwrap{max-width:1280px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* Logo bitmap (A1) : fond blanc/orange conçu pour un fond sombre — jamais de fond clair derrière (le header est toujours rgba(22,23,26,.92)). */ .logo{height:28px;width:auto;display:block;flex:none} #logoLink{display:inline-flex;align-items:center;line-height:0} .hspacer{flex:1} /* BLOC B — indicateur permanent de collecte, en-tête, sur toutes les pages. Discret par défaut (texte gris, pas de fond) ; devient visible (couleur + fond + libellé explicite) en cas d'échec/collecte en cours — jamais caché, cf. computeCollectStatusChip (dashboard-logic.js). */ .collect-status-chip{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--grey-dim); text-decoration:none;padding:5px 10px;border-radius:20px;border:1px solid transparent;white-space:nowrap} .collect-status-chip .short-label{display:none} .collect-status-chip:hover{color:var(--grey);border-color:var(--line)} .collect-status-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--grey-dim);flex:none} .collect-status-chip.ok .dot{background:var(--ok)} .collect-status-chip.unknown .dot{background:var(--grey-dim)} .collect-status-chip.running{color:var(--cyan);border-color:rgba(97,206,207,.3);background:rgba(97,206,207,.08)} .collect-status-chip.running .dot{background:var(--cyan)} .collect-status-chip.warn{color:var(--warn);border-color:rgba(245,196,81,.3);background:rgba(245,196,81,.08)} .collect-status-chip.warn .dot{background:var(--warn)} .collect-status-chip.err{color:var(--bad);font-weight:700;border-color:rgba(232,106,92,.35);background:rgba(232,106,92,.08)} .collect-status-chip.err .dot{background:var(--bad)} .center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;width:100%;max-width:380px} .card h1{font-size:20px;font-weight:700;margin-bottom:6px} .card p.sub{color:var(--grey-dim);font-size:13px;margin-bottom:22px} label{display:block;font-size:12.5px;font-weight:600;color:var(--grey);margin:14px 0 6px} input[type=text],input[type=password]{ width:100%;background:var(--bg-card-hi);border:1px solid var(--line);border-radius:8px; color:var(--text-2);padding:10px 12px;font-family:inherit;font-size:14px; } input:focus{outline:2px solid var(--orange);outline-offset:1px} /* Champs sans règle dédiée (e-mail, URL, date, nombre, heure, liste, zone de texte) : même apparence que les champs texte. :where() = spécificité nulle, toute règle de contexte existante garde la main. */ :where(input[type=email],input[type=url],input[type=date],input[type=number],input[type=time],input[type=search],select,textarea){ background:var(--bg-card-hi);border:1px solid var(--line-strong);border-radius:8px; color:var(--text-2);padding:8px 10px;font-family:inherit;font-size:13.5px;line-height:1.5} :where(select,textarea):focus{outline:2px solid var(--orange);outline-offset:1px} /* Champ pleine largeur de sa carte ; une zone de texte garde au moins 3 lignes visibles. */ .settings-field{display:block;width:100%} textarea.settings-field{min-height:calc(4.5em + 18px);resize:vertical} /* Focus clavier visible sur tout élément activable, quel que soit son style. */ :where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--orange-bright);outline-offset:2px} .card button{ margin-top:20px;width:100%;background:var(--orange);color:var(--bg);border:none;border-radius:8px; padding:11px 14px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer; } .card button:hover{opacity:.9} .card button:disabled{opacity:.5;cursor:not-allowed} .msg{margin-top:14px;font-size:13px;border-radius:8px;padding:9px 12px;display:none} .msg.err{display:block;color:var(--bad);background:rgba(232,106,92,.1)} .msg.ok{display:block;color:var(--ok);background:rgba(95,203,142,.1)} .msg.info{display:block;color:var(--text-2);background:var(--bg-card-hi);border:1px solid var(--line)} #reason-msg{margin:0 0 16px} .forgot-link{margin:-4px 0 14px;font-size:13px;text-align:right} .forgot-link a{color:var(--orange-bright);text-decoration:underline;text-underline-offset:2px} .hint{font-size:12px;color:var(--grey-dim);margin-top:18px} .hint a{color:var(--grey);text-decoration:none} .hint a:hover{color:var(--white);text-decoration:underline} main.app{max-width:1280px;margin:0 auto;padding:22px 24px 96px} /* BLOC C.1 — pied de page sobre, sur toutes les pages (remplace l'ancienne note de développement "données réelles, lues depuis SQLite…"). Aucun jargon technique. */ footer.app-footer{max-width:1280px;margin:0 auto;padding:20px 24px 32px;display:flex; align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:var(--grey-dim); flex-wrap:wrap;text-align:center} footer.app-footer a{color:var(--grey-dim);text-decoration:none} footer.app-footer a:hover{color:var(--grey)} footer.app-footer .app-footer-sep{opacity:.5} .userchip{font-size:13px;color:var(--grey);display:flex;align-items:center;gap:10px} .userchip b{color:var(--text-2)} /* Version compacte (avatar rond, initiale) — cachée sur desktop, remplace le texte complet sur mobile (BUG responsive : "Nom · rôle" + bouton pleine largeur ne tenaient pas sur une ligne avec le logo, forçant l'en-tête sur 2 lignes). */ .userchip-avatar{display:none;align-items:center;justify-content:center;width:28px;height:28px; border-radius:50%;background:var(--bg-card-hi);border:1px solid var(--line);color:var(--white); font-size:12px;font-weight:700;flex:none} .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.05em; color:var(--warn);background:rgba(245,196,81,.1);border-radius:999px;padding:3px 9px;text-transform:uppercase} .linkbtn{background:none;border:1px solid var(--line);color:var(--grey);border-radius:8px;padding:6px 12px; font-family:inherit;font-size:13px;cursor:pointer} .linkbtn:hover{color:var(--white);border-color:var(--grey-dim)} .linkbtn .btn-icon{display:none} a.linkbtn{display:inline-block;text-decoration:none} .shell{background:var(--bg-card);border:1px dashed var(--line);border-radius:var(--radius);padding:40px 24px; text-align:center;color:var(--grey-dim);margin-top:24px} /* ===== Dashboard — repris de design/maquette_dashboard_v2.html, charte EmotionWay ===== */ /* Navigation principale du PORTAIL CLIENT (l'agence a le menu à gauche, Bloc A) — collante juste sous l'en-tête. Bloc A : les hauteurs de l'en-tête et de cette rangée sont MESURÉES (layout-offsets.js → --header-h/--maintabs-h, base.css), plus jamais écrites en dur dans les décalages des barres collantes suivantes (.toolbar/.client-sticky/.ptl-sticky → --sticky-top). */ .maintabs{display:flex;align-items:center;gap:8px;position:sticky;top:calc(var(--obs-h) + var(--header-h));z-index:45;height:54px;background:var(--bg);border-bottom:1px solid var(--line)} .maintab{flex:1;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--line);border-radius:9px;color:var(--grey);font-family:'Space Grotesk','Instrument Sans',Arial,sans-serif;font-weight:600;font-size:13.5px;cursor:pointer} .maintab:hover{color:var(--white)} .maintab.on{background:var(--bg-card-hi);color:var(--white);border-color:var(--orange)} /* BLOC I.4 §2 — onglet verrouillé : reste visible (vitrine de ce qui est proposé), cadenas discret, jamais cliquable en pratique (le clic n'appelle jamais switchMainTab, voir wireMainTabs) — le curseur "not-allowed" le confirme visuellement avant même le clic. */ .maintab.locked{opacity:.55;cursor:not-allowed} .maintab.locked:hover{color:var(--grey)} .maintab.locked::after{content:'🔒';margin-left:6px;font-size:11px} /* Explication au clic sur un onglet verrouillé (brief : jamais un refus sec) — un seul élément réutilisé pour tous les onglets, jamais une pastille par bouton. */ .locked-tab-explain{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius); padding:12px 16px;font-size:13px;color:var(--grey);margin-bottom:14px} /* Collant sous #mainTabs (REFONTE 1/2) : le sélecteur de période reste accessible pendant le scroll, sur le portefeuille comme en vue client. top = --sticky-top (bandeau d'observation + en-tête + #mainTabs, hauteurs mesurées — base.css). */ .toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;position:sticky;top:var(--sticky-top);z-index:40;background:var(--bg);padding:10px 0} /* Sur l'accueil, #toolbar est déplacé ici par JS (switchMainTab, dashboard.js), en enfant DIRECT de #accueil — jamais dans un slot dédié qui ne contiendrait que lui. Cause exacte du bandeau non collant (relecture Thomas, deuxième passe : la position:sticky elle-même n'a jamais été en cause) : un position:sticky est borné par la boîte de contenu de son parent — s'il est le SEUL enfant de ce parent, cette boîte fait exactement sa propre hauteur, donc aucune marge de manœuvre pour se détacher du flux : l'élément reste "collé" à sa position naturelle et défile avec la page, sans qu'aucun overflow ni transform ne soit en cause. #accueil (toute la section) est un parent assez grand pour laisser cette marge, comme #mainTabs (collant, jamais cassé) dont le parent est main.app en entier. */ #accueil > .toolbar{margin-bottom:14px;padding:14px 0 0} .chip{border:1px solid var(--line);background:var(--bg-card);color:var(--grey);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:color .13s,background-color .13s,border-color .13s;display:inline-flex;align-items:center;gap:6px;margin:0} .chip:hover{color:var(--white)} .chip.on{background:var(--white);color:var(--bg);border-color:var(--white)} .chip.locked{opacity:.45;cursor:not-allowed} .chip .dot{width:8px;height:8px;border-radius:50%} .chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px} .chip-sm{padding:4px 10px;font-size:11.5px} .scatter-scale-toggle{display:flex;gap:4px} .tsep{width:1px;height:22px;background:var(--line);margin:0 4px} /* Bouton retour + nom du client (REFONTE 2) : à l'intérieur de #client, sa visibilité suit déjà celle de la section (plus besoin d'une classe .show séparée). */ .client-header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px} .back{display:inline-flex;align-items:center;gap:8px;color:var(--grey);background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0} .back:hover{color:var(--white)} .client-name{font-size:26px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px} /* REFONTE : bloc collant UNIQUE en vue client — nom+retour / période / onglets, une seule barre sticky au lieu de trois empilées. #toolbar y est déplacé par JS (jamais dupliqué). top = --sticky-top, même calcul que .toolbar ci-dessus. */ .client-sticky{position:sticky;top:var(--sticky-top);z-index:40;background:var(--bg);padding-top:10px;margin-bottom:18px;border-bottom:1px solid var(--line)} .client-sticky .client-header{margin-bottom:8px} .client-sticky .toolbar{position:static;margin-bottom:8px;padding:0} .client-sticky .ctabs{margin:0;border-bottom:none;padding-bottom:10px} /* Séparateur visuel entre les 2 groupes d'onglets (Général | réseaux) — Ads a migré dans l'onglet principal "Campagnes" (transversal, #mainTabs). */ .ctab-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px} h2.section{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--grey-dim);margin:26px 0 13px} h2.section b{color:var(--grey)} .hint-roadmap{font-size:12px;color:var(--grey-dim);background:var(--bg-card);border:1px dashed var(--line);border-radius:10px;padding:9px 14px;margin-bottom:18px} .hint-roadmap b{color:var(--grey)} /* État vide : toujours une zone délimitée (contour pointillé), jamais un texte flottant. Dans une cellule de tableau ou un graphique, le conteneur suffit : pas de second cadre. */ .empty-state{color:var(--grey);font-size:13px;padding:18px 20px;text-align:center; background:var(--bg-card);border:1px dashed var(--line-strong);border-radius:var(--radius)} td.empty-state{background:none;border:0;border-radius:0} .hidden{display:none!important} .chartbox .empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0} .loading-state{display:flex;align-items:center;justify-content:center;gap:8px} .spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--orange);animation:spin .8s linear infinite;flex:none} @keyframes spin{to{transform:rotate(360deg)}} /* Squelettes de chargement (AJOUT 2) — évite que la page saute pendant un fetch, plutôt qu'un spinner central qui masque toute la mise en page en cours de construction. */ .skeleton{background:var(--bg-card-hi);border-radius:6px;animation:skeleton-pulse 1.4s ease-in-out infinite} @keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.45}} @media (prefers-reduced-motion: reduce){ .skeleton{animation:none;opacity:.6} } .skeleton-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .skeleton-line{height:11px;margin-bottom:10px} .skeleton-line:last-child{margin-bottom:0} .skeleton-kcard{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px} .skeleton-kcard .skeleton-line:first-child{height:9px;width:60%;margin-bottom:12px} .skeleton-kcard .skeleton-line:last-child{height:20px;width:45%} /* Bannière de progression d'une collecte (refresh/backfill) — sondée via /api/collect/status */ .collect-banner{display:flex;align-items:flex-start;gap:12px;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--grey)} .collect-banner .spinner{margin-top:3px} .collect-banner-main{flex:1;min-width:0} .collect-banner-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px} .collect-banner-row:first-child{margin-bottom:6px} .collect-banner-row:last-child{margin-top:6px} #collectBannerText{color:var(--white);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .collect-progress-pct{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--white);white-space:nowrap;flex:none} .collect-progress-track{height:6px;border-radius:3px;background:var(--bg-card-hi);overflow:hidden} .collect-progress-fill{height:100%;width:0;background:var(--orange);border-radius:3px;transition:width .3s} .collect-progress-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .collect-progress-eta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey-dim);white-space:nowrap;flex:none} /* BUG backfill interrompu : run mort détecté côté client (aucune progression depuis COLLECT_STALE_MINUTES) — remplace le compteur qui grimperait sans fin par un état explicite. */ .collect-banner.stale{border-color:var(--bad)} .collect-banner.stale .spinner{display:none} .collect-banner.stale #collectBannerText{color:var(--bad)} #collectRelaunchBtn{font-family:inherit;font-size:12px;font-weight:600;color:var(--bg);background:var(--bad);border:none;border-radius:8px;padding:4px 10px;cursor:pointer;margin-top:0} #collectRelaunchBtn:disabled{opacity:.6;cursor:default} /* AJOUT : panneau admin de contrôle des collectes — BUG « mal placé » : outil technique, repliable, replié par défaut (une ligne résumée), déplié automatiquement seulement si une collecte est en cours ou si la dernière a échoué (jamais refermé automatiquement ensuite). */ .admin-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;margin-bottom:18px;overflow:hidden} .panel-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; background:none;border:none;color:var(--grey);font-family:inherit;font-size:13px;font-weight:600; padding:13px 16px;cursor:pointer;text-align:left} .panel-toggle:hover{color:var(--white)} .panel-toggle .chev{transition:transform .15s;color:var(--grey-dim);flex:none} .panel-toggle.open .chev{transform:rotate(180deg)} .admin-panel-body{padding:14px 16px 16px;border-top:1px solid var(--line)} .admin-panel-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .admin-panel-head b{font-size:14px;color:var(--white)} .admin-panel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* Les boutons de cette barre portent .settings-btn-secondary ; la liste s'aligne sur leur hauteur. */ .admin-panel-actions select{font-family:inherit;font-size:13.5px;color:var(--text-2);background:var(--bg-card-hi);border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;cursor:pointer;line-height:1.5} .admin-panel-msg{font-size:12px;margin-top:8px} .admin-panel-msg.ok{color:var(--ok)} .admin-panel-msg.err{color:var(--bad)} /* BUG responsive : le tableau n'a jamais de largeur minimale supérieure au viewport imposée à la PAGE — il défile dans son propre conteneur, comme .tablewrap pour les posts. */ .admin-panel-history{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch} .admin-history-table{width:100%;min-width:480px;border-collapse:collapse;font-size:12px} .admin-history-table th{text-align:left;color:var(--grey-dim);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--line)} .admin-history-table td{padding:5px 8px;border-bottom:1px solid var(--line);color:var(--grey)} .run-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:8px;background:rgba(148,152,160,.15);color:var(--grey)} .run-status.ok{color:var(--ok);background:rgba(95,203,142,.12)} .run-status.running{color:var(--warn);background:rgba(245,196,81,.12)} .run-status.partial{color:var(--warn);background:rgba(245,196,81,.12)} .run-status.failed,.run-status.cancelled,.run-status.error{color:var(--bad);background:rgba(232,106,92,.12)} .run-status.skipped,.run-status.idle{color:var(--grey-dim);background:rgba(148,152,160,.12)} /* BLOC R.1 §4 — progression source par source (Metricool/Asana/agenda) de la passe unifiée. */ .collect-sources-banner{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .collect-source-chip{padding:3px 9px} /* BLOC J.0 §3 — nature d'un échec de collecte (Timeout/Authentification/Marque introuvable/ Limite API/Erreur), même langage visuel que .run-status : rouge = nécessite une action, orange = transitoire (se résorbe seul au run suivant), gris = non catégorisé. */ .collect-error-kind{font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:8px; background:rgba(148,152,160,.15);color:var(--grey);white-space:nowrap;margin-right:2px} .collect-error-kind.bad{color:var(--bad);background:rgba(232,106,92,.12)} .collect-error-kind.warn{color:var(--warn);background:rgba(245,196,81,.12)} .collect-error-kind.unknown{color:var(--grey-dim);background:rgba(148,152,160,.12)} /* Cartes clients */ .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .ccard{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 34px 18px 18px;cursor:pointer;transition:border-color .15s,background-color .15s;position:relative;text-align:left;font-family:inherit;color:inherit;width:100%} /* BLOC P.3 §7 — CORRECTIF : rien n'indiquait qu'une carte de marque est cliquable (on le découvrait au survol) — chevron permanent à droite + survol nettement plus marqué (bordure orange + fond légèrement relevé, pas juste un gris à peine différent). */ .ccard:hover{border-color:var(--orange);background:var(--bg-card-hi)} .ccard:focus-visible{outline:2px solid var(--orange)} .ccard-chevron{position:absolute;top:18px;right:14px;font-size:22px;line-height:1;color:var(--grey-dim);transition:color .15s,transform .15s} .ccard:hover .ccard-chevron{color:var(--orange);transform:translateX(2px)} .cname{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:2px} .cname .inactive{font-size:10.5px;font-weight:700;color:var(--grey-dim);background:rgba(148,152,160,.12);border-radius:8px;padding:2px 7px;letter-spacing:.04em;text-transform:uppercase} .cpastilles{display:flex;gap:6px;margin-left:auto} .csub{color:var(--grey-dim);font-size:12px;margin-bottom:12px} /* Portefeuille simplifié (REFONTE 1) — 3 informations par carte, rien de plus */ .ccard-metric{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)} .ccard-metric:first-of-type{border-top:none;padding-top:0} .ccard-metric-label{font-size:12px;color:var(--grey)} .ccard-metric-val{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--white);font-size:15px} .ccard-metric-val.up{color:var(--ok)} .ccard-metric-val.down{color:var(--bad)} .ccard-axes{font-size:11.5px;color:var(--grey-dim);margin:-4px 0 4px} .ccard-campaign{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .ccard-campaign-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ok);background:rgba(95,203,142,.12);border-radius:8px;padding:2px 7px} .ccard-campaign-cpl{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--white);font-size:13px} .ccard-campaign-stage{font-size:10.5px;color:var(--grey-dim)} .netline{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13px;color:var(--grey)} .netdot{width:8px;height:8px;border-radius:50%;flex:none} .netline .v{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--white);font-size:13.5px;margin-left:auto} .netline .delta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;margin-left:6px} .netline .delta.up{color:var(--ok)} .netline .delta.down{color:var(--bad)} .netline .delta.flat{color:var(--grey-dim)} /* Pastilles de vigilance (organique/Ads) — le pire des indicateurs, jamais une donnée fabriquée */ /* Bloc 0b-3b E — puce « glyphe + nom » (✓ Organique, ! Ads…) : le glyphe porte l'état sans la couleur, le nom dit ce qui est jugé ; la teinte n'est plus qu'un renfort. */ .pastille{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 3px;border-radius:11px;flex:none;cursor:default;position:relative; background:var(--bg-card-hi);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--grey);white-space:nowrap} .pastille-glyph{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%; font-size:10.5px;font-weight:800;line-height:1;color:var(--bg)} .pastille.ok .pastille-glyph{background:var(--ok)} .pastille.warn .pastille-glyph{background:var(--warn)} .pastille.bad .pastille-glyph{background:var(--bad)} .pastille.unknown .pastille-glyph{background:var(--unknown)} .pastille-wrap{position:relative;display:inline-flex} .pastille-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:20;background:var(--bg-card-hi);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:230px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:12px;color:var(--grey)} .pastille-wrap:hover .pastille-pop,.pastille-wrap:focus-within .pastille-pop{display:block} /* BLOC L.1.1 §5 — CORRECTIF : rendu initial trop voyant (cercle bordé, orange vif au repos plutôt qu'au survol) — refait en texte inline discret, même taille que le texte qui l'entoure, jamais un badge à part. `appearance:none` : un