/* ═══════════════════════════════════════════════════════════════════════════ DOVADA — site vitrine. L'identité EXACTE de la plateforme DOVADA ACCOUNTING (mêmes jetons que core/webapp/ui.py), en MODE CLAIR PERMANENT — décision produit : plus professionnel pour la cible. Zéro dépendance externe : pas de CDN, pas de police téléchargée, pas de témoin, pas de pistage. ═══════════════════════════════════════════════════════════════════════════ */ :root { --fond:#f3f2ec; --carte:#fbfaf5; --texte:#1b1c1e; --discret:#4a4a50; --faible:#5c5c63; --tres-faible:#6e6e76; --bord:#ddd9cb; --bord-fin:#e7e3d6; --vert:#1a7f5a; --vert-fond:#e6f2e7; --vert-texte:#14563e; --jaune:#7a5c00; --jaune-fond:#fdf3d0; --inverse:#1b1c1e; --sur-inverse:#f3f2ec; } /* LA POLICE DE LA PLATEFORME, à l'identique. C'est le même fichier que DOVADA ACCOUNTING (48 Ko, servi depuis le site — jamais un CDN) : sans lui, le navigateur retombait sur Segoe UI et l'écriture n'était pas la même. */ @font-face { font-family:'InterDovada'; src:url('inter-var.woff2') format('woff2'); font-weight:100 900; font-display:block; } * { box-sizing:border-box; } html { scrollbar-gutter:stable; scroll-behavior:smooth; } body { margin:0; background:var(--fond); color:var(--texte); font-weight:300; font-family:'InterDovada', -apple-system, 'Segoe UI', system-ui, sans-serif; font-synthesis:none; -webkit-font-smoothing:antialiased; line-height:1.65; font-size:15px; } a { color:inherit; text-decoration:none; } /* ── Bilinguisme : chaque texte existe en .fr et .en ; l'attribut data-lang du décide lequel s'affiche. Aucun rechargement, aucun doublon d'URL. ── */ html[data-lang="fr"] .en { display:none !important; } html[data-lang="en"] .fr { display:none !important; } /* ── Bandeau — la même barre que la plateforme ── */ .bandeau { background:var(--carte); border-bottom:0.5px solid var(--bord); position:sticky; top:0; z-index:60; } /* Mesures reprises telles quelles de la plateforme (ui.py) : même hauteur de ruban, même colonne centrée, même respiration. */ .bandeau-int { max-width:1180px; margin:0 auto; padding:13px 28px; display:flex; align-items:center; gap:14px; } .marque { font-size:13px; letter-spacing:.04em; font-weight:400; flex:1; display:inline-flex; align-items:center; gap:9px; } /* Le ruban ignore l'interligne du corps de texte (1.65) : la plateforme n'en applique aucun ici. Sans ça, la bande des onglets était 6 px trop haute. */ .bandeau-int, .bandeau-int * { line-height:normal; } .onglets { display:flex; gap:2px; flex:0 0 auto; border:0.5px solid var(--bord); border-radius:999px; padding:3px; } .onglet { font-size:11px; letter-spacing:.09em; padding:6px 13px; border-radius:999px; color:var(--discret); white-space:nowrap; } .onglet:hover { color:var(--texte); } .onglet.actif { background:var(--vert); color:#fbfaf5; } .actions { flex:1; display:flex; gap:6px; align-items:center; justify-content:flex-end; } .pilule-lien { font-size:11px; letter-spacing:.08em; border:0.5px solid var(--bord); border-radius:999px; padding:6px 12px; color:var(--discret); background:none; cursor:pointer; font-family:inherit; } .pilule-lien:hover { color:var(--texte); } .pilule-pleine { font-size:11px; letter-spacing:.08em; border-radius:999px; padding:7px 14px; background:var(--inverse); color:var(--sur-inverse); } main { max-width:1180px; margin:0 auto; padding:10px 28px 56px; } .eyebrow { font-size:11px; letter-spacing:.16em; color:var(--faible); text-transform:uppercase; } /* ── Héros ── */ .heros { padding:58px 0 40px; max-width:820px; } .heros h1 { font-size:44px; font-weight:200; letter-spacing:-.02em; line-height:1.13; margin:14px 0 18px; } .heros h1 b { font-weight:400; } .sous-titre { font-size:16px; color:var(--discret); margin:0 0 26px; max-width:660px; } .boutons { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .bouton-plein { font-size:12.5px; letter-spacing:.04em; background:var(--inverse); color:var(--sur-inverse); border:none; border-radius:999px; padding:12px 24px; display:inline-block; cursor:pointer; font-family:inherit; } .bouton-plein:hover { opacity:.9; } .bouton-vide { font-size:12.5px; letter-spacing:.04em; border:0.5px solid var(--inverse); border-radius:999px; padding:12px 24px; display:inline-block; background:none; cursor:pointer; font-family:inherit; color:inherit; } section { margin-top:54px; } .titre-section { font-size:27px; font-weight:200; letter-spacing:-.01em; margin:10px 0 8px; } .sous-section { font-size:14px; color:var(--discret); max-width:640px; margin:0 0 24px; } /* ═══ LA FENÊTRE DE DÉMONSTRATION — la plateforme, recréée fidèlement ═══ */ .demo-fenetre { background:var(--carte); border:0.5px solid var(--bord); border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(27,28,30,.10); margin-top:34px; } .demo-chrome { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--fond); border-bottom:0.5px solid var(--bord); } .demo-points { display:flex; gap:5px; } .demo-point { width:9px; height:9px; border-radius:50%; background:var(--bord); } .demo-url { flex:1; max-width:340px; margin:0 auto; background:var(--carte); border:0.5px solid var(--bord-fin); border-radius:999px; font-size:10.5px; color:var(--tres-faible); padding:4px 14px; text-align:center; } /* L'ECRAN REEL DE LA PLATEFORME, dans son cadre. La page est rendue en 1500 px de large (sa vraie largeur de travail) puis reduite pour tenir dans la fenetre : on voit exactement la mise en page du client, en plus petit. */ .demo-cadre { position:relative; width:100%; overflow:hidden; aspect-ratio:1500 / 790; background:var(--fond); } /* --echelle-demo est posee par app.js : largeur du cadre / 1500. */ .demo-iframe { position:absolute; top:0; left:0; width:1500px; height:790px; border:0; transform:scale(var(--echelle-demo, 1)); transform-origin:top left; } .demo-corps { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); } .demo-gauche { padding:0; border-right:0.5px solid var(--bord-fin); min-width:0; } .demo-bandeau { display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:0.5px solid var(--bord); font-size:9px; letter-spacing:.06em; } .demo-marque { font-weight:400; letter-spacing:.04em; font-size:9.5px; } .demo-pills { display:flex; gap:2px; border:0.5px solid var(--bord); border-radius:999px; padding:2px; margin-left:auto; } .demo-pill { font-size:7.5px; letter-spacing:.08em; padding:3px 8px; border-radius:999px; color:var(--discret); } .demo-pill.on { background:var(--vert); color:#fbfaf5; } .demo-contenu { padding:14px 16px 18px; } .demo-eyebrow { font-size:7.5px; letter-spacing:.14em; color:var(--faible); } .demo-client { font-size:19px; font-weight:200; margin:2px 0 0; } .demo-periode { font-size:11px; font-weight:200; color:var(--discret); margin:0 0 12px; } .demo-bande { display:flex; align-items:center; gap:8px; background:var(--vert-fond); border:0.5px solid var(--bord); border-bottom:none; border-radius:9px 9px 0 0; padding:7px 12px; font-size:9.5px; } .demo-bande b { font-weight:400; } .demo-compteur { border:0.5px solid var(--bord); border-radius:999px; background:var(--carte); padding:2px 8px; font-size:8.5px; white-space:nowrap; } .demo-lot { margin-left:auto; background:var(--vert); color:#fbfaf5; border-radius:999px; padding:4px 10px; font-size:8.5px; white-space:nowrap; } .demo-table { border:0.5px solid var(--bord); border-radius:0 0 9px 9px; overflow:hidden; background:var(--carte); } .demo-rangee { display:grid; grid-template-columns:34px minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.3fr) 74px; font-size:8.5px; line-height:1.5; border-bottom:0.5px solid var(--bord-fin); } .demo-rangee:last-child { border-bottom:none; } .demo-rangee > div { padding:8px 9px; min-width:0; } .demo-entete { background:var(--fond); font-size:8px; letter-spacing:.06em; color:var(--texte); font-weight:400; border-bottom:0.5px solid var(--bord); } .demo-releve { color:var(--discret); } .demo-montant { font-weight:400; } .demo-ref { font-size:7.5px; color:var(--tres-faible); } .demo-lien { color:var(--vert-texte); } .demo-just { color:var(--discret); font-size:8px; } .demo-btn { display:block; border:0.5px solid var(--vert); color:var(--vert); border-radius:999px; text-align:center; padding:3px 0; font-size:8px; margin-bottom:4px; } .demo-btn.no { border-color:var(--bord); color:var(--discret); } /* Le panneau ALTO à droite — comme sur la plateforme. */ .demo-alto { padding:14px 16px; display:flex; flex-direction:column; gap:10px; background:var(--carte); min-width:0; } .demo-alto-titre { font-size:8px; letter-spacing:.1em; color:var(--faible); text-transform:uppercase; } .demo-bulle { border:0.5px solid var(--bord-fin); border-radius:10px; padding:9px 11px; font-size:9px; line-height:1.55; } .demo-bulle.moi { background:var(--fond); align-self:flex-end; max-width:88%; } .demo-bulle.alto { background:var(--vert-fond); color:var(--vert-texte); max-width:94%; } .demo-prov { font-size:7.5px; color:var(--tres-faible); margin-top:5px; border-top:0.5px solid var(--bord-fin); padding-top:4px; } .demo-saisie { margin-top:auto; border:0.5px solid var(--bord); border-radius:999px; padding:6px 12px; font-size:8.5px; color:var(--tres-faible); } .demo-legende { text-align:center; font-size:11.5px; color:var(--tres-faible); margin-top:12px; } /* ── Cartes d'agents (facture du tableau de bord de la plateforme) ── */ .cartes { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; } .carte { background:var(--carte); border:0.5px solid var(--bord); border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:3px; } .carte:hover { border-color:var(--vert); } .carte-num { font-size:11px; letter-spacing:.14em; color:var(--tres-faible); } .carte-nom { font-size:23px; font-weight:200; margin:4px 0 1px; } .carte-role { font-size:11px; letter-spacing:.08em; color:var(--vert-texte); text-transform:uppercase; } .carte-texte { font-size:12.5px; color:var(--discret); margin-top:9px; line-height:1.6; } .etiquette { display:inline-block; font-size:10px; letter-spacing:.06em; padding:3px 10px; border-radius:999px; background:var(--vert-fond); color:var(--vert-texte); align-self:flex-start; margin-top:12px; } .etiquette.neutre { background:var(--fond); color:var(--tres-faible); border:0.5px solid var(--bord); } /* ── Principes ── */ .principes { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .principe { border-left:2px solid var(--vert); padding:4px 0 4px 18px; } .principe h3 { font-size:15px; font-weight:400; margin:0 0 6px; } .principe p { font-size:13px; color:var(--discret); margin:0; line-height:1.65; } /* ── Sections détaillées de la page Agents ── */ .agent-bloc { background:var(--carte); border:0.5px solid var(--bord); border-radius:14px; padding:28px 30px; margin-top:18px; } .agent-tete { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .agent-nom { font-size:30px; font-weight:200; } .agent-role { font-size:11.5px; letter-spacing:.1em; color:var(--vert-texte); text-transform:uppercase; } .agent-corps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:16px; } .agent-corps h4 { font-size:13px; font-weight:400; margin:0 0 6px; } .agent-corps p, .agent-corps li { font-size:13px; color:var(--discret); margin:0; line-height:1.65; } .agent-corps ul { margin:0; padding-left:16px; display:flex; flex-direction:column; gap:5px; } /* ── Appel final ── */ .final { background:var(--carte); border:0.5px solid var(--bord); border-radius:14px; padding:34px 32px; margin-top:56px; display:flex; flex-wrap:wrap; align-items:center; gap:18px; } .final-texte { flex:1 1 340px; } .final h2 { font-size:23px; font-weight:200; margin:0 0 7px; } .final p { font-size:13px; color:var(--discret); margin:0; } /* ── Formulaire de contact ── */ .form { max-width:620px; } .form-rangee { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form-groupe { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; } .form-libelle { font-size:11px; letter-spacing:.1em; color:var(--faible); text-transform:uppercase; } .form-champ { border:0.5px solid var(--bord); border-radius:9px; padding:11px 13px; font-size:13.5px; font-family:inherit; font-weight:300; background:var(--carte); color:var(--texte); outline:none; width:100%; } .form-champ:focus { border-color:var(--vert); box-shadow:0 0 0 3px var(--vert-fond); } textarea.form-champ { resize:vertical; min-height:130px; } /* Champ-piège anti-robots : invisible pour un humain, rempli par les robots. */ .fg-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-note { font-size:12px; color:var(--tres-faible); margin-top:12px; line-height:1.6; } .form-etat { border-radius:9px; padding:11px 14px; font-size:13px; margin-top:14px; display:none; } .form-etat.ok { display:block; background:var(--vert-fond); color:var(--vert-texte); } .form-etat.err { display:block; background:var(--jaune-fond); color:var(--jaune); } .contact-carte { background:var(--carte); border:0.5px solid var(--bord); border-radius:12px; padding:22px 24px; font-size:13px; color:var(--discret); } .contact-carte b { font-weight:400; color:var(--texte); } .contact-grille { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:26px; align-items:start; } /* ── Le bouton ALTO du bandeau — la pilule EXACTE de la plateforme (.echo-lanceur) : hauteur 29 px, logo noir de 15 px à gauche du mot. ── */ .pilule-alto { border:0.5px solid var(--bord); border-radius:999px; background:var(--carte); color:var(--texte); font-family:inherit; font-size:11px; letter-spacing:.09em; padding:0 14px; height:29px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; vertical-align:middle; flex:0 0 auto; white-space:nowrap; } .pilule-alto:hover { background:var(--fond); } .alto-rond { display:inline-flex; align-items:center; flex:0 0 auto; } .alto-rond svg { height:15px; width:auto; display:block; color:var(--texte); } /* Le rond du logo, à gauche du bouton de langue — la boîte du bouton de thème de la plateforme (.rond) : 29 × 29 px, logo de 15 px dedans. */ .logo-rond { border:0.5px solid var(--bord); border-radius:999px; width:29px; height:29px; background:var(--carte); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .logo-rond svg { height:15px; width:auto; display:block; color:var(--texte); } /* ── Le panneau ALTO (version vitrine : réponses préécrites) ── */ .alto-panneau { position:fixed; top:0; right:0; bottom:0; width:min(380px, 100vw); background:var(--carte); border-left:0.5px solid var(--bord); z-index:100; display:none; flex-direction:column; box-shadow:-18px 0 50px rgba(27,28,30,.12); } .alto-panneau.ouvert { display:flex; } .alto-tete { display:flex; align-items:center; gap:9px; padding:14px 18px; border-bottom:0.5px solid var(--bord); font-size:12px; letter-spacing:.08em; font-weight:400; } .alto-fermer { margin-left:auto; border:0.5px solid var(--bord); border-radius:999px; width:26px; height:26px; background:none; color:var(--discret); cursor:pointer; font-size:14px; line-height:1; font-family:inherit; } .alto-fermer:hover { color:var(--texte); } .alto-corps { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .alto-bulle { border:0.5px solid var(--bord-fin); border-radius:12px; padding:10px 13px; font-size:13px; line-height:1.55; max-width:92%; white-space:pre-line; } .alto-bulle.moi { background:var(--fond); align-self:flex-end; } .alto-bulle.bot { background:var(--vert-fond); color:var(--vert-texte); align-self:flex-start; } .alto-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 10px; } .alto-chip { border:0.5px solid var(--bord); border-radius:999px; padding:5px 11px; font-size:11px; color:var(--discret); background:none; cursor:pointer; font-family:inherit; } .alto-chip:hover { color:var(--texte); border-color:var(--vert); } .alto-pied { display:flex; gap:8px; padding:12px 18px 8px; border-top:0.5px solid var(--bord-fin); } .alto-entree { flex:1; border:0.5px solid var(--bord); border-radius:999px; padding:9px 14px; font-family:inherit; font-weight:300; font-size:13px; background:var(--carte); color:var(--texte); outline:none; min-width:0; } .alto-entree:focus { border-color:var(--vert); } .alto-envoyer { border:none; border-radius:999px; background:var(--vert); color:#fbfaf5; padding:9px 16px; font-size:12px; cursor:pointer; font-family:inherit; flex:0 0 auto; } .alto-note { font-size:10.5px; color:var(--tres-faible); margin:0; padding:0 18px 14px; line-height:1.5; } /* ── Compléments de la fenêtre démo : AXIS grisé, boutons ALTO/INFO, icônes du coin droit — pour coller au vrai bandeau. ── */ .demo-bandeau { flex-wrap:wrap; row-gap:4px; } .demo-pill.off { color:var(--tres-faible); } .demo-alto-btn { display:inline-flex; align-items:center; gap:4px; border:0.5px solid var(--bord); border-radius:999px; padding:2px 8px 2px 3px; font-size:7.5px; letter-spacing:.08em; white-space:nowrap; } .demo-mini-rond { width:12px; height:12px; border-radius:50%; background:var(--inverse); display:inline-flex; align-items:center; justify-content:center; } .demo-mini-rond svg { height:7px; width:auto; color:var(--sur-inverse); } .demo-coin { display:inline-flex; gap:4px; align-items:center; } .demo-pill-ronde { border:0.5px solid var(--bord); border-radius:999px; padding:2px 6px; font-size:7.5px; letter-spacing:.06em; color:var(--discret); white-space:nowrap; } /* ── Pied ── */ .pied { max-width:1180px; margin:26px auto 0; padding:24px 28px 40px; border-top:0.5px solid var(--bord-fin); display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:12px; color:var(--tres-faible); } .pied a { color:var(--discret); text-decoration:underline; } .pied .droite { margin-left:auto; } @media (max-width:840px) { .demo-corps { grid-template-columns:1fr; } .demo-gauche { border-right:none; border-bottom:0.5px solid var(--bord-fin); } .contact-grille { grid-template-columns:1fr; } .heros { padding-top:40px; } .heros h1 { font-size:32px; } .form-rangee { grid-template-columns:1fr; } /* Bandeau sur deux lignes : marque + actions en haut, onglets en dessous, pleine largeur et défilables — rien ne déborde de l'écran. */ .bandeau-int { flex-wrap:wrap; padding:11px 18px; row-gap:9px; } .actions { flex:0 0 auto; margin-left:auto; } .onglets { order:3; flex-basis:100%; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; } main { padding-left:18px; padding-right:18px; } .pied { padding-left:18px; padding-right:18px; } }