/* ═══════════════════════════════════════════════════════════════════════════ PABLO APP - systeme de design v0.2 (« B ⊕ C », choix de Paul 16.08.2026) Un seul jeu de composants, deux themes : - clair = direction B « le tableau de bord » : bandeau violet, cartes blanches sur gris perle - sombre = direction C « le cockpit » : violet profond, cartes ardoise, accent lavande Le theme suit le reglage du telephone (prefers-color-scheme) ; le bouton dans le bandeau force l'un ou l'autre (memorise dans localStorage, attribut data-theme sur ). Regles (ROADMAP-PABLO-APP section 7) : pas de voyants rouge/vert « qui font IA » - l'etat se dit avec le chiffre + le mot + une fleche, et une couleur DISCRETE sur le texte seulement. Pas de jargon. Chiffres tabulaires. Lisible sans lunettes. Police de charte : Halyard Display / Text (licence Adobe, non embarquee) -> fallback systeme propre sur telephone. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─ Marque (fixe, les deux themes) ─ */ --violet: #211937; --violet-2: #3a2f5c; --lavande: #c9b8ff; /* ─ Typo ─ */ --f-display: "Halyard Display", "HalyardDisplay", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --f-text: "Halyard Text", "HalyardText", "Avenir Next", "Segoe UI", system-ui, sans-serif; --fs-0: 12px; --fs-1: 13px; --fs-2: 14.5px; --fs-3: 16px; --fs-4: 18px; --fs-kpi: 34px; --fs-hero: 58px; --fs-h1: 26px; /* ─ Forme ─ */ --r: 16px; --r-s: 10px; --r-pill: 999px; --gap: 12px; --pad: 18px; --nav-h: 64px; /* ─ Theme CLAIR (defaut) ─ */ --bg: #f4f3f7; --surface: #ffffff; --surface-2: #efedf3; --surface-3: #e6e4ea; --ink: #1b1526; --ink-2: #4d475f; --muted: #7a7587; --muted-2: #a6a3af; --line: #e6e4ea; --band: #211937; /* bandeau du haut */ --band-ink: #ffffff; --band-muted: #cfc9dc; --band-chip: rgba(255,255,255,.12); --accent: #211937; /* traits, courbes, selection */ --accent-soft: rgba(33,25,55,.10); --accent-ink: #ffffff; /* texte sur --accent */ --good: #1f7a5a; --bad: #a63a2b; --shadow: 0 1px 2px rgba(33,25,55,.05), 0 8px 24px -16px rgba(33,25,55,.25); --nav-bg: rgba(255,255,255,.92); color-scheme: light; } /* ─ Theme SOMBRE : suit le telephone... ─ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1a1430; --surface: #2a2148; --surface-2: #332a55; --surface-3: #3d3462; --ink: #f3f1f7; --ink-2: #cfc9dc; --muted: #a6a3af; --muted-2: #7f7a8f; --line: rgba(255,255,255,.09); --band: #1a1430; --band-ink: #f3f1f7; --band-muted: #a6a3af; --band-chip: rgba(255,255,255,.08); --accent: #c9b8ff; --accent-soft: rgba(201,184,255,.16); --accent-ink: #1a1430; --good: #7fd8b0; --bad: #ff9d8a; --shadow: none; --nav-bg: rgba(26,20,48,.94); color-scheme: dark; } } /* ─ ...ou le bouton du bandeau force le sombre ─ */ :root[data-theme="dark"] { --bg: #1a1430; --surface: #2a2148; --surface-2: #332a55; --surface-3: #3d3462; --ink: #f3f1f7; --ink-2: #cfc9dc; --muted: #a6a3af; --muted-2: #7f7a8f; --line: rgba(255,255,255,.09); --band: #1a1430; --band-ink: #f3f1f7; --band-muted: #a6a3af; --band-chip: rgba(255,255,255,.08); --accent: #c9b8ff; --accent-soft: rgba(201,184,255,.16); --accent-ink: #1a1430; --good: #7fd8b0; --bad: #ff9d8a; --shadow: none; --nav-bg: rgba(26,20,48,.94); color-scheme: dark; } /* ═══ Base ═══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--band); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--f-text); font-size: var(--fs-3); line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .num, .kpi-v, .hero-v, .row b, .kw-pos, .m, .month b, .bar-v { font-variant-numeric: tabular-nums; } .wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ═══ Bandeau (identite + client + periode) ═══ */ .band { background: var(--band); color: var(--band-ink); padding: calc(12px + env(safe-area-inset-top)) 0 0; } .band .top { display: flex; align-items: center; justify-content: space-between; height: 40px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .02em; } /* ─ Le LOGO (brand kit -> web/logo/, regle Paul 14.09.2026 : jamais une lettre a la place du logo) ─ Deux fichiers : violet + noir (fond clair) et tout blanc (fond sombre). Le bandeau est violet dans les deux themes : blanc toujours. */ .logo { display: inline-block; height: 22px; width: auto; vertical-align: middle; } .logo-sombre { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-clair { display: none; } :root:not([data-theme="light"]) .logo-sombre { display: inline-block; } } :root[data-theme="dark"] .logo-clair { display: none; } :root[data-theme="dark"] .logo-sombre { display: inline-block; } .brand .logo { height: 24px; } .brand-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--band-chip); color: var(--band-muted); padding: 3px 8px; border-radius: var(--r-pill); } /* Selecteur de client dans le bandeau (telephone, role agence dans un espace client) : une pastille, comme les puces */ .band .sel-client { appearance: none; -webkit-appearance: none; max-width: 160px; border: 0; border-radius: var(--r-pill); background: var(--band-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px; color: var(--band-ink); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 28px 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .band .sel-client option { color: #1b1526; background: #fff; } /* Bandeau « vue client » (role agence qui regarde l'espace comme le client) : discret, un seul lien pour revenir */ .vue-client { position: sticky; top: 0; z-index: 25; background: var(--lavande); color: var(--violet); font-size: 13.5px; font-weight: 600; padding: 8px 16px; display: flex; justify-content: center; align-items: center; gap: 6px 16px; flex-wrap: wrap; text-align: center; } .vue-client a { color: inherit; font-weight: 700; white-space: nowrap; } body.vue-client-on .chips { top: 37px; } .band-actions { display: flex; gap: 6px; align-items: center; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--band-chip); color: var(--band-ink); font-size: 15px; text-decoration: none; } .icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--band-chip); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .02em; } .band h1 { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.01em; margin-top: 18px; } .band .sub { color: var(--band-muted); font-size: var(--fs-2); margin-top: 3px; } .band .sub b { color: var(--band-ink); font-weight: 600; } /* Selecteur de periode : DES L'ARRIVEE, branche sur l'API. */ .seg { display: flex; gap: 2px; background: var(--band-chip); border-radius: var(--r-pill); padding: 3px; margin-top: 14px; } .seg button { flex: 1; color: var(--band-muted); font-size: 13.5px; font-weight: 600; padding: 8px 6px; border-radius: var(--r-pill); white-space: nowrap; transition: background .15s, color .15s; } .seg button[aria-pressed="true"] { background: var(--band-ink); color: var(--band); } .seg button:disabled { opacity: .45; cursor: default; } .dates { display: none; gap: 8px; margin-top: 10px; align-items: center; } .dates.on { display: flex; } .dates input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--band-chip); background: var(--band-chip); color: var(--band-ink); color-scheme: dark; } .dates .go { padding: 8px 14px; border-radius: var(--r-s); background: var(--band-ink); color: var(--band); font-weight: 600; font-size: 14px; } /* ═══ Navigation par categories (collante sous le bandeau) ═══ */ .chips { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0 8px; margin: 0 -16px; } .chips::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); } .chips ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; } .chips ul::-webkit-scrollbar { display: none; } .chips a { display: inline-block; text-decoration: none; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); scroll-snap-align: start; } .chips a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } main > section, main > .grid, main > .summary { scroll-margin-top: 66px; } /* ═══ Cartes & tuiles ═══ */ .card { background: var(--surface); border-radius: var(--r); padding: var(--pad); box-shadow: var(--shadow); margin-bottom: var(--gap); } .card h2, .grid h2 { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; } .card h2 .lnk, .grid h2 .lnk { font-family: var(--f-text); font-size: var(--fs-1); color: var(--muted); font-weight: 400; text-align: right; flex: 1 1 auto; } /* Le titre (noeud texte) reste sur une ligne, c'est le sous-titre .lnk qui plie (vu sur 12 mois : « Visites depuis Google » cassé sur 3 lignes). */ .card h2 { white-space: nowrap; } .card h2 .lnk, .grid h2 .lnk { white-space: normal; } .hero { margin-top: 0; } .hero-v { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-hero); line-height: 1; letter-spacing: -.03em; } .hero-l { font-size: var(--fs-3); color: var(--ink-2); margin-top: 2px; } .cmp { font-size: var(--fs-2); color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cmp .arr { font-weight: 700; } .cmp .good { color: var(--good); } .cmp .bad { color: var(--bad); } .split { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); } .tile { background: var(--surface); border-radius: var(--r); padding: 15px 16px 14px; box-shadow: var(--shadow); min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; } .tile .lbl { font-size: var(--fs-1); color: var(--muted); font-weight: 600; letter-spacing: .01em; } .kpi-v { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-kpi); line-height: 1; letter-spacing: -.02em; margin: 8px 0 4px; } .kpi-v small { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 3px; } .kpi-v.txt, .kpi-v .txt { font-size: 22px; } .kpi-v.txt { margin-top: 12px; } .tile .d { font-size: 12.5px; color: var(--muted); line-height: 1.35; } .tile .d .good { color: var(--good); font-weight: 600; } .tile .d .bad { color: var(--bad); font-weight: 600; } .tile .spark { margin: 6px -4px -4px; } .tile.ring { flex-direction: row; align-items: center; gap: 12px; } .tile.ring .kpi-v { margin: 6px 0 2px; } /* ═══ Graphes ═══ */ .chart { margin: 6px -6px 0; } .axis { display: flex; justify-content: space-between; font-size: var(--fs-0); color: var(--muted); margin-top: 2px; } .months { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; } .months::-webkit-scrollbar { display: none; } .month { flex: 1; min-width: 56px; text-align: center; background: var(--surface-2); border-radius: var(--r-s); padding: 8px 6px; font-size: var(--fs-0); color: var(--muted); } .month b { display: block; font-family: var(--f-display); font-size: 18px; color: var(--ink); } .month.now { outline: 2px solid var(--accent); outline-offset: -2px; } /* Survol des graphes (Paul, 10.09.2026) : la colonne / le jour touche s'allume, les autres s'effacent, l'infobulle se pose au-dessus. */ .slot { cursor: pointer; } .slot .v { transition: opacity .15s; } svg.has-on .slot:not(.on) .v, svg:hover .slot:not(:hover) .v { opacity: .45; } .slot .mk { visibility: hidden; } .slot:hover .mk, .slot.on .mk { visibility: visible; } .tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: var(--bg); padding: 8px 11px; border-radius: 10px; font-size: var(--fs-1); line-height: 1.4; box-shadow: 0 8px 22px -8px rgba(0,0,0,.4); max-width: min(280px, calc(100vw - 16px)); white-space: nowrap; } .tip b { display: block; font-weight: 600; margin-bottom: 3px; } .tip .l { display: flex; align-items: center; gap: 7px; } .tip .l i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 1.5px rgba(255,255,255,.45); } /* anneau clair : la pastille « Recherche Google » (encre) reste visible sur l'infobulle sombre */ .tip .m { opacity: .68; } .legend { display: flex; gap: 14px; font-size: var(--fs-0); color: var(--muted); margin-top: 6px; } .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); vertical-align: middle; margin-right: 5px; } .legend i.prev { background: var(--muted-2); opacity: .7; } .legend.wrap { flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; } .legend i.dot, .bar-label i.dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; } .card h3.sub { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink-2); margin: 16px 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .card h3.sub .lnk { font-family: var(--f-text); font-size: var(--fs-1); color: var(--muted); font-weight: 400; } .types { font-size: var(--fs-2); color: var(--ink-2); margin: 8px 0 0; } .types b { color: var(--ink); } /* Ce que le compteur de demandes couvre (Paul, 10.09.2026 : « mesuré par : formulaire / agenda / téléphone ») */ .mesure { margin-top: 10px; font-size: var(--fs-1); color: var(--muted); } .mesure summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 2px 0; } .mesure summary::-webkit-details-marker { display: none; } .mesure .k { font-weight: 600; color: var(--ink-2); } .mesure span i { font-style: normal; font-weight: 700; margin-right: 4px; } .mesure .ok i { color: var(--good); } .mesure .partiel i { color: #d9a441; } .mesure .non i { color: var(--muted-2); } .mesure .non { color: var(--muted-2); } .mesure summary::after { content: "+"; color: var(--muted-2); margin-left: auto; font-weight: 600; } .mesure[open] summary::after { content: "–"; } .mesure ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; line-height: 1.4; color: var(--muted); } .mesure ul span { color: var(--ink-2); font-weight: 600; } .hero-v.verif { font-size: var(--fs-h1); line-height: 1.15; padding: 10px 0 2px; color: var(--ink-2); letter-spacing: -.01em; } .gloss { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .gloss summary { cursor: pointer; font-size: var(--fs-2); font-weight: 600; color: var(--accent); list-style: none; padding: 4px 0; } .gloss summary::-webkit-details-marker { display: none; } .gloss summary::after { content: " +"; color: var(--muted); } .gloss[open] summary::after { content: " –"; } .gloss dl { margin: 6px 0 2px; display: grid; gap: 8px; } .gloss dt { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); } .gloss dd { margin: 2px 0 0 15px; font-size: var(--fs-1); color: var(--muted); line-height: 1.4; } /* Barres horizontales (demandes par canal) */ .bar-row { display: grid; grid-template-columns: 1fr 88px 30px; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--fs-2); } .bar-label { color: var(--ink-2); } .bar-track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); border-radius: 4px; } .bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* ═══ Listes ═══ */ .rows .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .rows .row:last-child { border-bottom: 0; } .row .l small { display: block; color: var(--muted); font-size: 12.5px; } .row b { font-family: var(--f-display); font-weight: 600; font-size: 18px; white-space: nowrap; } .row b small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; } .row .good { color: var(--good); } .row .bad { color: var(--bad); } .list { list-style: none; } .list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: center; } .list li:last-child { border-bottom: 0; } .list .m { color: var(--muted); font-size: var(--fs-1); white-space: nowrap; } .hint { font-size: var(--fs-1); color: var(--muted); margin-bottom: 6px; } .empty { color: var(--muted); font-size: var(--fs-2); padding: 8px 0; } .empty b { color: var(--ink-2); font-weight: 600; display: block; margin-bottom: 2px; } .more { color: var(--accent); font-size: var(--fs-2); font-weight: 600; padding: 10px 0 2px; } /* Onglets (pages qui marchent / a ameliorer / pas encore visibles) */ .tabs { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { border: 1px solid var(--line); background: var(--surface); font-size: 13px; padding: 7px 11px; border-radius: var(--r-pill); color: var(--ink-2); white-space: nowrap; } .tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .tabs button .n { opacity: .7; margin-left: 4px; } /* Mots-cles */ .kw { list-style: none; } .kw li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); } .kw li:last-child { border-bottom: 0; } .kw-pos { width: 38px; height: 38px; border-radius: var(--r-s); background: var(--surface-2); display: flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--f-display); font-weight: 600; font-size: 17px; } .kw-pos.top { background: var(--accent); color: var(--accent-ink); } .kw-pos.none { color: var(--muted-2); font-size: 14px; } .kw .k { font-size: 15px; } .kw .k small { display: block; color: var(--muted); font-size: 12px; } .kw .tr { display: flex; gap: 8px; font-size: 12px; font-weight: 600; } .kw .tr span { padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .kw .tr .up { color: var(--good); } .kw .tr .down { color: var(--bad); } /* Posts */ .posts { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; } .posts::-webkit-scrollbar { display: none; } .post { flex: 0 0 132px; scroll-snap-align: start; } .post img, .post .noimg { width: 132px; height: 132px; object-fit: cover; border-radius: 12px; background: var(--surface-2); display: block; } .post .noimg { display: grid; place-items: center; color: var(--muted); font-size: 12px; } .post .t { font-size: 12px; color: var(--ink-2); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post .d { font-size: 11px; color: var(--muted); } /* ═══ Etats ═══ */ .err { background: var(--surface); border-left: 4px solid var(--bad); color: var(--ink); padding: 14px 16px; border-radius: 12px; margin-top: 16px; } .err b { display: block; margin-bottom: 2px; } .skeleton { background: var(--surface); border-radius: var(--r); height: 120px; margin-bottom: var(--gap); position: relative; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-2), transparent); transform: translateX(-100%); animation: shimmer 1.2s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } main.busy { opacity: .55; transition: opacity .2s; pointer-events: none; } .foot { text-align: center; color: var(--muted); font-size: var(--fs-0); padding: 14px 0 8px; line-height: 1.6; } /* ═══ Barre du bas : les espaces (Resultats reel, les autres arrivent en v1) ═══ */ nav.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); } nav.bottom a { text-decoration: none; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; font-weight: 600; } nav.bottom a .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; } nav.bottom a.on { color: var(--accent); } nav.bottom a.on .ic { background: var(--accent); color: var(--accent-ink); } nav.bottom a.soon { opacity: .5; } nav.bottom a.side-only { display: none; } /* « Voir comme le client » : barre laterale seulement (le telephone l'a dans le bandeau) */ /* ═══ Mouvement (respecte le reglage « reduire les animations ») ═══ */ @media (prefers-reduced-motion: no-preference) { .card, .tile { animation: pop .4s ease both; } .grid .tile:nth-child(2) { animation-delay: .04s; } .grid .tile:nth-child(3) { animation-delay: .08s; } .grid .tile:nth-child(4) { animation-delay: .12s; } @keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } html { scroll-behavior: smooth; } } /* ═══ Grand ecran (tablette / ordinateur) : meme app, plus d'air ═══ */ @media (min-width: 720px) { :root { --fs-hero: 64px; --fs-kpi: 36px; } .grid { grid-template-columns: repeat(4, 1fr); } .tile { min-height: 136px; } } /* ═══ Complements (ecran final) ═══ */ .cmp-note { color: var(--muted); font-style: normal; } .prop { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin: 8px 0 6px; } .prop span { display: block; min-width: 0; } .prop .top3 { background: var(--accent); } .prop .top10 { background: var(--accent); opacity: .5; } .prop .rest { background: var(--surface-2); } .summary { font-size: var(--fs-4); line-height: 1.4; color: var(--ink); font-family: var(--f-display); font-weight: 500; margin: 16px 0 14px; letter-spacing: -.005em; } .summary b { font-weight: 600; color: var(--accent); } .phrase { font-size: var(--fs-2); color: var(--ink-2); margin-top: 10px; line-height: 1.45; } .phrase .good { color: var(--good); font-weight: 600; } .phrase .bad { color: var(--bad); font-weight: 600; } .objectif { font-size: var(--fs-1); color: var(--muted); border-left: 2px solid var(--accent-soft); padding: 2px 0 2px 10px; margin: 0 0 10px; } .objectif b { color: var(--ink-2); font-weight: 600; } .chips.in-band { background: var(--band); margin: 0; padding: 10px 0 12px; } .chips.in-band::after { display: none; } .chips.in-band a { background: var(--band-chip); border-color: transparent; color: var(--band-muted); } .chips.in-band a[aria-current="true"] { background: var(--band-ink); color: var(--band); } .band-shell { position: sticky; top: 0; z-index: 20; } nav.bottom svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } nav.bottom a .ic { background: transparent; width: 28px; height: 24px; } nav.bottom a.on .ic { background: transparent; color: var(--accent); } .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: 13.5px; padding: 9px 14px; border-radius: 10px; z-index: 40; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; text-align: center; } .toast.on { opacity: 1; } .retry { margin-top: 8px; color: var(--accent); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ ORDINATEUR (>= 1024 px) : un VRAI tableau de bord, meme code que le telephone (Paul, 13.09.2026 : « quand les gens l'ouvrent sur leur ordi, ce soit un vrai dashboard », pas une colonne de telephone). La barre du bas devient une barre laterale ; le bandeau devient une barre de titre avec la periode a droite ; les cartes se posent sur une grille de 12 colonnes. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { :root { --side-w: 248px; --fs-hero: 60px; --fs-kpi: 34px; --fs-h1: 28px; --gap: 16px; --pad: 20px; } body { padding-bottom: 40px; padding-left: var(--side-w); } .wrap { max-width: 1360px; padding: 0 36px; } /* Barre laterale = l'ancienne barre du bas, redressee */ nav.bottom { top: 0; bottom: 0; right: auto; width: var(--side-w); flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; padding: 22px 14px; background: var(--surface); border-top: 0; border-right: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; } nav.bottom .side-brand { display: block !important; padding: 6px 10px 18px; } nav.bottom .side-brand .logo { height: 44px; } nav.bottom .side-title { display: block !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; } nav.bottom a { flex-direction: row; justify-content: flex-start; gap: 12px; min-width: 0; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); } nav.bottom a .ic { width: 24px; height: 24px; } nav.bottom a:hover { background: var(--surface-2); } nav.bottom a.on { background: var(--accent-soft); color: var(--accent); } nav.bottom a.on .ic { color: var(--accent); } nav.bottom a.soon { opacity: .6; } nav.bottom a.side-only { display: flex; } /* Retour « Agence » depuis un espace client (role agence) : petit, au-dessus des rubriques du client */ nav.bottom a.back { font-size: 13px; color: var(--muted); padding: 6px 10px; margin-bottom: 4px; } nav.bottom a.back .ic { width: 18px; height: 18px; } nav.bottom a.back:hover { color: var(--accent); } /* Selecteur de client dans la barre laterale */ nav.bottom .side-select { display: block !important; padding: 0 6px 6px; } nav.bottom .sel-client { appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 32px 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7587' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } nav.bottom .sel-client:hover { border-color: var(--muted-2); } .band .sel-client, .band #voir-client { display: none; } /* sur ordinateur, la barre laterale porte le selecteur et « Voir comme le client » */ nav.bottom .side-foot { display: block !important; margin-top: auto; padding: 12px 10px 0; font-size: 12px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); } nav.bottom .side-foot a { display: inline; padding: 0; font-size: 12px; color: var(--accent); } /* Bandeau = barre de titre : titre a gauche, periode a droite */ .band { padding-top: 14px; } .band .wrap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top top" "h1 seg" "sub seg" "dates dates"; align-items: end; column-gap: 32px; } .band .top { grid-area: top; height: 36px; } .band .brand { visibility: hidden; } /* la marque est dans la barre laterale */ .band h1 { grid-area: h1; margin-top: 10px; } .band .sub { grid-area: sub; margin-top: 2px; padding-bottom: 14px; } .seg { grid-area: seg; margin: 0 0 14px; width: 380px; } .dates { grid-area: dates; margin: 0 0 14px; max-width: 520px; } /* Rubriques : restent sous le bandeau, en ligne, collantes */ .chips ul { padding: 0 36px; } .chips.in-band a { padding: 8px 14px; } /* La grille du tableau de bord */ main#app { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; margin-top: 4px; } main#app > * { grid-column: span 12; min-width: 0; } main#app > .card, main#app > .grid { margin-bottom: 0; } main#app > .summary { font-size: 20px; margin: 22px 0 6px; max-width: 980px; } main#app > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } main#app > #demandes { grid-column: span 7; } main#app > #google { grid-column: span 5; } main#app > #mots { grid-column: span 6; } main#app > #pages { grid-column: span 6; } main#app > #pub { grid-column: span 6; } main#app > #reseaux { grid-column: span 6; } main#app > #site { grid-column: span 12; } main#app > .skeleton { margin-bottom: 0; } main#app > .foot { padding-top: 20px; } .card { display: flex; flex-direction: column; } .tile { min-height: 150px; } .toast { bottom: 32px; left: calc(50% + var(--side-w) / 2); } .card h2 { font-size: 16px; } .posts .post { flex-basis: 150px; } .posts .post img, .posts .post .noimg { width: 150px; height: 150px; } #site .rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; } #site .rows .row { border-bottom: 0; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0; } } /* Tres grand ecran : plus d'air, memes proportions */ @media (min-width: 1600px) { :root { --fs-hero: 68px; --fs-kpi: 38px; } .wrap { max-width: 1520px; } } /* ═══════════════════════════════════════════════════════════════════════════ SUIVI DU LANCEMENT + PARCOURS (nuit du 20-21.09.2026, chantiers PA1 / PA6) Le lancement d'un nouveau site (J-N puis J+1..J+30) et le parcours du client (visiteurs -> pages cles -> demandes) : memes tokens, zero voyant, une barre discrete dans la couleur d'accent, le mot avant la couleur. ═══════════════════════════════════════════════════════════════════════════ */ .lance-t { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); } .lance-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin: 10px 0 8px; } .lance-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .lance-p { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.45; margin: 6px 0 0; } .lance-prets, .lance-ctrl { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .lance-prets li, .lance-ctrl li { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-1); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-pill); padding: 5px 11px; } .lance-prets i, .lance-ctrl i { font-style: normal; font-weight: 700; color: var(--ink-2); } .lance-ctrl li b { font-weight: 600; } .lance-ctrl li.ko { background: var(--accent-soft); } .lance-ctrl li span { color: var(--muted); } .tn { list-style: none; margin: 4px 0 0; padding: 0; } .tn li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l v" "bar bar" "c c"; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .tn li:last-child { border-bottom: 0; } .tn .tn-l { grid-area: l; font-size: var(--fs-2); color: var(--ink-2); } .tn .tn-l b { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; margin-right: 8px; } .tn .tn-v { grid-area: v; font-family: var(--f-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); } .tn .tn-v small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; } .tn .tn-bar { grid-area: bar; display: block; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 4px; } .tn .tn-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .tn .tn-c { grid-area: c; font-size: var(--fs-0); color: var(--muted); min-height: 14px; } .tn .tn-c .good { color: var(--good); font-weight: 600; } .tn .tn-c .bad { color: var(--bad); font-weight: 600; } .tn li.off .tn-v { color: var(--muted-2); } .tn li.off .tn-bar { opacity: .5; } @media (min-width: 1024px) { main#app > #lancement, main#app > #parcours, main#app > #sante, main#app > .card.wide { grid-column: span 12; } .tn li { grid-template-columns: minmax(220px, 1.2fr) 130px 2fr minmax(200px, 1fr); grid-template-areas: "l v bar c"; align-items: center; } .tn .tn-bar { margin-top: 0; } .tn .tn-c { text-align: right; } }