/* ══════════════════════════════════════════════════════════════ GEX-CHARTE.CSS — couche visuelle Gexperteam (charte 2026) ────────────────────────────────────────────────────────────── Se pose PAR-DESSUS le CSS existant de chaque outil : aucune structure, aucun script, aucune classe à modifier. Installation (1 ligne par page, JUSTE AVANT gex-brand.js) : Pages concernées : static/outils/fec.html static/outils/import-immos.html static/outils/pdf.html static/outils/releves-bancaires.html static/outils/plannings.html static/outils/bihl.html static/outils/prise-rdv-passeport-bookings-cactus.html static/outils/juridique/index.html vendor/lmnp-app/templates/index.html vendor/bdd/dashboard.html templates/portail.html (via base.html, en dernier dans ) Palette : marine #083085 · bleu vif #0087FF · cyan #5ABFDD · menthe #B8F7B5 — encre #0E1726, ardoise #54627A. Typo : Manrope (titres + textes), Newsreader italique (signature). ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@1,18,400;1,18,500&display=swap'); :root { /* ── Couleurs de marque ── */ --gx-navy:#083085; --gx-navy-deep:#06245f; --gx-navy-ink:#04173f; --gx-blue:#0087ff; --gx-blue-mid:#0a5cc4; --gx-sky:#2ca2ef; --gx-cyan:#5abfdd; --gx-mint:#b8f7b5; --gx-mint-deep:#8fe6a0; --gx-ink:#0e1726; --gx-slate:#54627a; --gx-grey:#8694a8; --gx-cloud:#e6edf6; --gx-mist:#f3f7fc; --gx-paper:#ffffff; --gx-line:#dbe5f2; --gx-grad:linear-gradient(100deg,#083085 0%,#0087ff 38%,#5abfdd 70%,#b8f7b5 100%); --gx-grad-btn:linear-gradient(120deg,#083085,#0087ff); --gx-ring:rgba(0,135,255,.14); --gx-ease:cubic-bezier(.22,1,.36,1); --gx-r:12px; --gx-r-lg:18px; --gx-r-pill:999px; /* ── Remap des tokens historiques des outils ── (les pages utilisent déjà var(--navy), var(--bright)… les redéfinir suffit à rhabiller 70 % de l'interface) */ --navy:#083085; --navy2:#04173f; --blue:#0a3a9e; --blue2:#06245f; --bright:#0087ff; --bright2:#2ca2ef; --teal:#5abfdd; --teal2:#2ca2ef; --mint:#e6edf6; --mint2:#d5e2f2; --bg:#f3f7fc; --card:#ffffff; --panel:#f8fafd; --border:#dbe5f2; --muted:#54627a; --txt:#0e1726; --gex-page-bg:#f3f7fc; } /* ── Fond de page : lavis bleu + menthe, très léger ───────────── */ body{ font-family:'Manrope',system-ui,sans-serif; color:var(--gx-ink); letter-spacing:-.005em; -webkit-font-smoothing:antialiased; background: radial-gradient(860px 380px at 8% -60px,rgba(0,135,255,.11),transparent 68%), radial-gradient(760px 360px at 92% -80px,rgba(184,247,181,.30),transparent 66%), var(--gx-mist); background-attachment:fixed; } h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.03em;color:var(--gx-navy-ink)} a{color:var(--gx-blue);text-decoration:none} a:hover{color:var(--gx-navy)} ::selection{background:var(--gx-mint);color:var(--gx-navy-ink)} /* Signature éditoriale (baseline, citations) */ .gx-serif{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400} /* ── Surfaces ─────────────────────────────────────────────────── */ .card,.panel,.box,.status-msg,.xl-mode-bar,.xl-mode-desc,.xl-preview, .cr-gal-item,.cp-level-card,.conv-options,.p2j-options,.xe-opts, .fbadge,.xe-badge,.p2j-badge,.tip,.hl-toolbar,.mg-item{ background:var(--gx-paper)!important; border:1px solid var(--gx-line)!important; border-radius:var(--gx-r-lg); box-shadow:0 1px 2px rgba(4,23,63,.04),0 12px 30px rgba(4,23,63,.05); } .tip{background:#f4f9ff!important;color:var(--gx-slate)} /* ── Boutons ──────────────────────────────────────────────────── */ .btn-primary,.btn-gen,.btn-dl,.btn-primary-custom{ background:var(--gx-grad-btn)!important; color:#fff!important;border:none!important; border-radius:var(--gx-r-pill)!important; font-weight:700;letter-spacing:-.01em; box-shadow:0 6px 18px rgba(8,48,133,.22); transition:transform .22s var(--gx-ease),box-shadow .22s var(--gx-ease); } .btn-primary:hover:not(:disabled),.btn-gen:hover:not(:disabled), .btn-dl:hover,.btn-primary-custom:hover:not(:disabled){ opacity:1;transform:translateY(-1px); box-shadow:0 12px 28px rgba(8,48,133,.30); } .btn-secondary,.btn-outline,.btn-back,.btn-sm,.bq,.xe-add-field,.sec-btn{ background:#fff!important;color:var(--gx-navy)!important; border:1px solid var(--gx-line)!important; border-radius:var(--gx-r-pill)!important; font-weight:700;transition:.2s var(--gx-ease); } .btn-secondary:hover,.btn-outline:hover:not(:disabled), .btn-back:hover,.btn-sm:hover,.bq:hover{ border-color:var(--gx-blue)!important;color:var(--gx-blue)!important; background:#f4f9ff!important; } .btn-cancel,.btn-danger{ background:#fdecec!important;color:#b3261e!important; border:1px solid #f7d4d1!important;border-radius:var(--gx-r-pill)!important;font-weight:700; } /* ── Champs ───────────────────────────────────────────────────── */ input,select,textarea,.form-control,.form-select,.name-input{ border:1px solid var(--gx-line)!important;border-radius:10px!important; font-family:'Manrope',system-ui,sans-serif;color:var(--gx-ink); } input:focus,select:focus,textarea:focus, .form-control:focus,.form-select:focus,.name-input:focus{ outline:none!important;border-color:var(--gx-blue)!important; box-shadow:0 0 0 3px var(--gx-ring)!important; } /* ── Zones de dépôt ───────────────────────────────────────────── */ .drop-zone,.dropzone,.ff-import-drop,.upload-zone{ border:2px dashed #c3d6ee!important;border-radius:var(--gx-r-lg)!important; background:linear-gradient(180deg,#fff,#f7fafe)!important; transition:.25s var(--gx-ease); } .drop-zone:hover,.dropzone:hover,.upload-zone:hover, .drop-zone.drag-over,.dropzone.drag-over{ border-color:var(--gx-blue)!important; background:linear-gradient(180deg,#f4f9ff,#eaf3ff)!important; box-shadow:0 0 0 5px rgba(0,135,255,.09); } .dz-text,.dz-label{color:var(--gx-navy-ink);font-weight:700} .dz-hint{color:var(--gx-grey)} /* ── Onglets ──────────────────────────────────────────────────── */ .tab-bar,.cv-tabs,.xe-tabs,.nav-tabs{ background:#fff;border:1px solid var(--gx-line); border-radius:var(--gx-r-pill);padding:5px;gap:4px; } .tab-btn,.cv-tab,.xe-tab{border-radius:var(--gx-r-pill);font-weight:700;color:var(--gx-slate)} .tab-active,.cv-tab.active,.xe-tab.active,.nav-tabs .nav-link.active{ background:var(--gx-grad-btn)!important;color:#fff!important; border-color:transparent!important; box-shadow:0 4px 14px rgba(8,48,133,.22); } .tab-btn:not(.tab-active):hover,.cv-tab:not(.active):hover,.xe-tab:not(.active):hover{ background:#f0f6ff;color:var(--gx-blue); } /* ── Tableaux ─────────────────────────────────────────────────── */ table thead th,.xe-preview th{ background:var(--gx-navy-ink)!important;color:#fff!important; font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; } table tbody tr:hover{background:#f4f8ff} /* ── Barres de progression, spinners ──────────────────────────── */ .pb,.progress-bar{background:var(--gx-grad)!important} .pb-bg,.progress{background:var(--gx-cloud)!important} .spinner{border-color:var(--gx-cloud)!important;border-top-color:var(--gx-blue)!important} /* ══════════════════════════════════════════════════════════════ PORTAIL — tuiles : la couleur de la CATÉGORIE Chaque tuile reçoit sa couleur en ligne (--tile-color), posée par portail.html depuis sa section ou choisie par l'utilisateur. Elle dit l'usage de l'outil. La première version de cette charte faisait traverser la grille par le dégradé de marque, tuile après tuile, et repeignait l'icône par-dessus : la couleur ne disait plus rien de l'usage, et changeait dès qu'on déplaçait une tuile. Les finitions restent ; la couleur revient à la catégorie. ══════════════════════════════════════════════════════════════ */ .portail-tile{ border:1px solid #e3ebf7!important;border-radius:20px!important; box-shadow:0 1px 2px rgba(4,23,63,.04),0 12px 30px rgba(4,23,63,.06); transition:transform .28s var(--gx-ease),box-shadow .28s var(--gx-ease),border-color .28s; } .portail-tile::after{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background:var(--tile-color,var(--gx-navy)); } .portail-tile:hover{ transform:translateY(-4px);border-color:var(--tile-color,#cfe0f5)!important; box-shadow:0 22px 48px rgba(4,23,63,.14); } .tile-icon-wrap{border-radius:16px!important} .tile-name{color:var(--gx-navy-ink);font-weight:800;letter-spacing:-.02em} .tile-cat{color:var(--tile-color);opacity:1;font-weight:800} .tile-desc{color:var(--gx-slate)} /* Hero du portail : dégradé de marque au lieu du bleu plat */ .portail-hero{ background:linear-gradient(115deg,#04173f 0%,#083085 55%,#0a3a9e 100%)!important; border-radius:20px!important; } .portail-hero::before{background:rgba(0,135,255,.14)!important} .portail-hero h2{color:#fff;letter-spacing:-.03em} .portail-hero p{opacity:.72} .hero-stat{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.14)} .hero-stat-n{color:#b8f7b5} .btn-hero-outline{ background:rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.28)!important; border-radius:var(--gx-r-pill)!important;color:#fff!important; } .btn-hero-outline:hover{background:rgba(255,255,255,.22)!important} /* Accessibilité : on respecte prefers-reduced-motion */ @media (prefers-reduced-motion:reduce){ .portail-tile,.btn-primary,.btn-gen,.drop-zone,.dropzone{transition:none!important} .portail-tile:hover,.btn-primary:hover{transform:none!important} } /* ══════════════════════════════════════════════════════════════ OUTILS DU PORTAIL — en-tête de page et fond (maquettes 2026) Surtitre de catégorie, titre avec un mot en dégradé, phrase d'intro : le langage de la page Outils PDF, à la taille d'un outil. Classes gx-outil-* distinctes des gx-hero de la page PDF, qui garde son accueil plus grand. ══════════════════════════════════════════════════════════════ */ body.gx-outil-fond{ background: radial-gradient(860px 380px at 8% -60px,rgba(0,135,255,.11),transparent 68%), radial-gradient(760px 360px at 92% -80px,rgba(184,247,181,.32),transparent 66%), #f3f7fc !important; background-repeat:no-repeat !important; color:#0e1726; } .gx-outil-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px; flex-wrap:wrap;width:100%;box-sizing:border-box;margin:0 0 28px;text-align:left} .gx-outil-hero-texte{display:flex;flex-direction:column;gap:14px;min-width:0} .gx-outil-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Manrope',system-ui,sans-serif; font-size:11.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#0087ff} .gx-outil-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:#0087ff} h1.gx-outil-titre{margin:0 !important;padding:0 !important;font-family:'Manrope',system-ui,sans-serif !important; font-size:46px !important;font-weight:800 !important;letter-spacing:-.04em !important;line-height:1 !important; color:#04173f !important;text-align:left !important;background:none !important} .gx-outil-mot{background:linear-gradient(100deg,#083085 0%,#0087ff 38%,#5abfdd 70%,#b8f7b5 100%); -webkit-background-clip:text;background-clip:text;color:transparent} p.gx-outil-intro{margin:0 !important;max-width:620px;font-family:'Manrope',system-ui,sans-serif; font-size:16px !important;line-height:1.6;color:#54627a !important;font-weight:500;text-wrap:pretty;text-align:left} @media(max-width:720px){h1.gx-outil-titre{font-size:34px !important}}