/* Flowmetrik — feuille de style des articles. Générée par scripts/content/build.py ; ne pas éditer dans public/, éditer ici. Marque mère en noir et blanc ; une filiale ne change QUE son accent, posé par [data-unit] sur et plafonné aux filets, aux puces et aux étiquettes — jamais en fond, jamais au-delà de ~5 % de la surface. Les valeurs d'accent ci-dessous sont une COPIE des tokens de marque, dont la source de vérité est `assets/brand/tokens/` dans le dépôt flowmetrik-cowork. Ce dépôt n'y a pas accès au build, d'où la copie. Après toute évolution des tokens, régénérer côté cowork (`python3 assets/tools/build_css.py`) et reporter ici les seules lignes [data-unit]. Dernier report : 2026-08-14. */ :root{ --ink:#111111; --ink-2:#3D3E3E; --soft:#777B7E; --line:#E3E6E6; --mist:#F6F6F5; --paper:#FFFFFF; --accent:#111111; --accent-ink:#111111; --head:Poppins,'Arial Black',system-ui,sans-serif; --body:Nunito,Arial,system-ui,sans-serif; --data:'Space Grotesk',ui-monospace,monospace; --wrap:760px; --shell:1180px; } body[data-unit="flowspend"]{--accent:#1B5FE0;--accent-ink:#1449AB} body[data-unit="flowenergy"]{--accent:#16A46A;--accent-ink:#0A6B45} body[data-unit="flowimmo"]{--accent:#F2B705;--accent-ink:#7A5300} body[data-unit="flowbank"]{--accent:#6D28D9;--accent-ink:#5B21B6} *,*::before,*::after{box-sizing:border-box;margin:0} body{font-family:var(--body);color:var(--ink);background:var(--paper); line-height:1.65;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} .nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.93); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav-inner{max-width:var(--shell);margin:0 auto;padding:0 32px;min-height:68px; display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none; font-family:var(--head);font-weight:800;font-size:20px} .brand img{height:26px;width:auto} .nav-links{display:flex;gap:22px;font-size:15px;font-weight:600} .nav-links a{text-decoration:none} .nav-links a:hover{text-decoration:underline} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px; padding:13px 22px;background:var(--ink);color:#fff;text-decoration:none; font-family:var(--head);font-weight:800;font-size:15px} .btn:focus-visible{outline-color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} main{padding:0 0 96px} .fil{max-width:var(--wrap);margin:0 auto;padding:22px 32px 0;font-size:14px; color:var(--soft)} .fil a{text-decoration:none}.fil a:hover{text-decoration:underline} .hero{padding:26px 0 8px} .kicker{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink); display:flex;align-items:center;gap:10px;margin-bottom:14px} .kicker::before{content:"";width:26px;height:2px;background:var(--accent)} h1{font-family:var(--head);font-size:clamp(30px,4vw,46px);font-weight:800; line-height:1.1;letter-spacing:-.03em;margin-bottom:14px} .chapo{font-size:19px;color:var(--ink-2);margin-bottom:20px} .signature{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center; font-size:14px;color:var(--soft);padding-bottom:22px; border-bottom:1px solid var(--line)} .signature a{text-decoration:none;font-weight:700;color:var(--ink)} .signature a:hover{text-decoration:underline} .preuve{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.06em;border:1px solid var(--line);padding:3px 8px} h2{font-family:var(--head);font-size:clamp(22px,2.4vw,28px);font-weight:800; line-height:1.2;letter-spacing:-.02em;margin:52px 0 14px;scroll-margin-top:88px} h3{font-family:var(--head);font-size:19px;font-weight:700;margin:34px 0 10px} h4{font-family:var(--head);font-size:16px;font-weight:700;margin:26px 0 8px} p,li{font-size:17px;color:var(--ink-2)} p{margin-bottom:16px} ul,ol{padding-left:22px;margin-bottom:18px} li{margin-bottom:8px} li::marker{color:var(--accent-ink)} strong{color:var(--ink);font-weight:700} code{font-family:var(--data);font-size:.92em;background:var(--mist); padding:2px 6px;border:1px solid var(--line)} hr{border:0;border-top:1px solid var(--line);margin:44px 0} blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px; margin:26px 0} blockquote p{font-size:19px;color:var(--ink);margin:0} .table-wrap{overflow-x:auto;margin:26px 0} table{border-collapse:collapse;width:100%;font-size:15px} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line); vertical-align:top} th{font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink); border-bottom:2px solid var(--ink);white-space:nowrap} td{color:var(--ink-2)} /* --- bloc « En bref », commun aux trois gabarits : c'est l'unité citée --- */ .bref{background:var(--mist);border-left:3px solid var(--accent); padding:24px 26px;margin:30px 0 8px} .bref h2{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 12px} .bref ul{margin:0;padding-left:20px} .bref li{font-size:16px;color:var(--ink)} /* --- sommaire : gabarit pilier --- */ .sommaire{border:1px solid var(--line);padding:22px 26px;margin:34px 0} .sommaire p{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 10px} .sommaire ol{margin:0;padding-left:20px;column-gap:32px} .sommaire li{font-size:15px;margin-bottom:6px} /* --- bandeau normatif : gabarit obligation --- */ .norme{border:1px solid var(--ink);margin:30px 0} .norme-tete{background:var(--ink);color:#fff;font-family:var(--data); font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:8px 18px} .norme-corps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-right:-1px;overflow:hidden} .norme-item{padding:18px;border-right:1px solid var(--line); border-top:1px solid var(--line)} .norme-item dt{font-family:var(--data);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--soft);margin-bottom:6px} .norme-item dd{font-family:var(--head);font-size:17px;font-weight:700; color:var(--ink);margin:0} /* --- verdict : gabarit radar --- */ .verdict{display:flex;flex-wrap:wrap;align-items:center;gap:14px; border:1px solid var(--line);border-left:4px solid var(--accent); padding:18px 22px;margin:30px 0} .verdict-mot{font-family:var(--head);font-size:22px;font-weight:800; letter-spacing:-.02em} .verdict-meta{font-size:14px;color:var(--soft)} .verdict-motif{flex-basis:100%;font-size:16px;color:var(--ink-2);margin:0} /* --- offre : la règle 2, câblée --- */ .offre{background:#0B0B0B;color:#fff;padding:36px;margin:56px 0 0} .offre h2{color:#fff;margin:0 0 10px;font-size:24px} .offre p{color:rgba(255,255,255,.74);margin-bottom:22px} .offre .btn{background:#fff;color:#111} .offre a.lien-offre{color:#fff;font-weight:700} .offre-pied{margin-top:18px;font-size:14px;color:rgba(255,255,255,.6)} .offre-pied a{color:rgba(255,255,255,.9)} /* --- FAQ --- */ .faq{margin:56px 0 0;border-top:1px solid var(--line);padding-top:8px} .faq h2{font-size:24px} .faq details{border-bottom:1px solid var(--line);padding:16px 0} .faq summary{font-family:var(--head);font-weight:700;font-size:17px; cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";float:right;color:var(--soft);font-weight:400} .faq details[open] summary::after{content:"–"} .faq details p{margin:12px 0 0} /* --- auteur : un visage, et le chemin vers la fiche --- */ .auteur{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line); padding:24px;margin:44px 0 0} .auteur-nom{font-family:var(--head);font-weight:800;font-size:17px} .auteur-role{font-size:14px;color:var(--soft);margin-bottom:8px} .auteur p{font-size:15px;margin:0} .auteur-portrait{flex:0 0 auto;width:76px;height:76px;border-radius:50%; overflow:hidden;background:var(--mist);border:1px solid var(--line)} .auteur-portrait img{width:100%;height:100%;object-fit:cover;display:block} .auteur-liens{margin-top:10px;font-size:14px;display:flex;flex-wrap:wrap; gap:6px 14px;color:var(--soft)} .auteur-liens a{font-weight:700;color:var(--ink)} /* Le portrait dans la signature : 32 px, il accompagne le nom sans le voler. */ .sig-portrait{width:32px;height:32px;border-radius:50%;object-fit:cover; display:block;border:1px solid var(--line);background:var(--mist)} .signature .sig-auteur{display:inline-flex;align-items:center;gap:9px} /* --- le mot de l'équipe : la seule adresse directe de la page --- */ .mot{border:1px solid var(--line);border-left:4px solid var(--accent); background:var(--mist);padding:26px 28px;margin:48px 0 0} .mot h2{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 12px} .mot p{font-size:17px;color:var(--ink);margin:0 0 14px} .mot-signe{display:flex;flex-direction:column;align-items:flex-start;gap:8px; font-size:14px;color:var(--soft);margin:0;padding-top:16px; border-top:1px solid var(--line)} .mot-qui{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2)} .mot-signe img{width:34px;height:34px;border-radius:50%;object-fit:cover; border:1px solid var(--line);flex:0 0 auto} .mot-signe strong{font-family:var(--head);font-size:15px;color:var(--ink)} .mot-signe a{font-weight:700;color:var(--ink)} /* --- fiche personne : /equipe/ --- */ .fiche-tete{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap; margin:8px 0 6px} .fiche-portrait{flex:0 0 auto;width:132px;height:132px;border-radius:50%; overflow:hidden;border:1px solid var(--line);background:var(--mist)} .fiche-portrait img{width:100%;height:100%;object-fit:cover;display:block} .fiche-corps{flex:1 1 320px;min-width:260px} .fiche-liens{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0 0; font-size:15px;font-family:var(--head);font-weight:700} .cv{list-style:none;padding:0;margin:18px 0 0} .cv li{border-top:1px solid var(--line);padding:12px 0;font-size:16px; color:var(--ink-2);margin:0} .cv li::before{content:"—";color:var(--accent-ink);margin-right:10px} .jalons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0; list-style:none} .jalons li{font-family:var(--data);font-size:12px;letter-spacing:.04em; border:1px solid var(--line);padding:5px 10px;color:var(--ink-2);margin:0} /* --- pied --- */ .footer{background:#0B0B0B;color:rgba(255,255,255,.68);padding:34px 0} .footer-inner{max-width:var(--shell);margin:0 auto;padding:0 32px;display:flex; justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; font-size:15px} .footer a{color:rgba(255,255,255,.9)} .footer :focus-visible{outline-color:#fff} /* --- ancre de section : rend un passage citable par lien direct --- */ .ancre{margin-left:10px;color:var(--line);text-decoration:none;font-weight:400; opacity:0;transition:opacity .15s} h2:hover .ancre,.ancre:focus-visible{opacity:1;color:var(--accent-ink)} /* --- couverture --- */ .couverture{margin:26px 0 0} .couverture img{width:100%;height:auto;display:block} .couverture figcaption{font-family:var(--data);font-size:12px;color:var(--soft); margin-top:10px} .credit{display:block;font-family:var(--data);font-size:11px;color:var(--soft); margin-top:4px} .credit a{color:var(--soft)} /* --- sommaire compact : gabarit obligation --- */ .sommaire-compact{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline; margin:30px 0;padding:14px 0;border-top:1px solid var(--line); border-bottom:1px solid var(--line);font-size:15px} .sommaire-compact span{font-family:var(--data);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--soft)} .sommaire-compact a{text-decoration:none;border-bottom:1px solid var(--line)} .sommaire-compact a:hover{border-bottom-color:var(--accent)} /* --- rappel en cours de lecture : discret, une seule promesse --- */ .cta-lecture{border-left:3px solid var(--accent);background:var(--mist); padding:20px 24px;margin:36px 0;display:flex;flex-wrap:wrap;gap:10px 20px; align-items:center;justify-content:space-between} .cta-lecture p{margin:0;font-size:16px;color:var(--ink);font-weight:600; max-width:60ch} .cta-lecture a{font-family:var(--head);font-weight:800;font-size:15px; white-space:nowrap} /* --- sources : les liens sortants qui rendent la page vérifiable --- */ .sources{margin:48px 0 0;border-top:1px solid var(--line);padding-top:8px} .sources h2{font-size:20px} .sources ol{padding-left:20px} .sources li{font-size:15px;margin-bottom:10px} .src-date{display:block;font-family:var(--data);font-size:11px;color:var(--soft)} /* --- à lire ensuite : le maillage descendant --- */ .relies{margin:48px 0 0;border-top:1px solid var(--line);padding-top:8px} .relies h2{font-size:20px} .relies ul{list-style:none;padding:0;margin:0} .relies li{border-bottom:1px solid var(--line);padding:14px 0;margin:0} .relies li:last-child{border-bottom:0} .relies a{font-family:var(--head);font-weight:700;font-size:17px; text-decoration:none;display:block} .relies a:hover{text-decoration:underline} .rel-silo{font-family:var(--data);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--soft)} /* --- rassurance sous le bouton : lève l'objection avant le clic --- */ .offre-rassure{font-size:14px;color:rgba(255,255,255,.66);margin:12px 0 0} /* --- formulaire de contact --- */ .contact{display:flex;flex-direction:column;gap:16px;margin:22px 0 0} .form-titre{font-family:var(--head);font-weight:800;font-size:18px;margin:0} .form-intro{margin:0} .contact label{display:flex;flex-direction:column;gap:6px;font-size:14px; font-weight:700;font-family:var(--head)} .contact label span{font-weight:400;font-family:var(--body);color:var(--soft)} .contact input[type=text],.contact input[type=email],.contact input[type=tel], .contact textarea{font-family:var(--body);font-size:16px;padding:12px 14px; border:1px solid var(--line);background:var(--paper);color:var(--ink); border-radius:0;width:100%} .contact textarea{resize:vertical;min-height:96px} .contact input:focus-visible,.contact textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .champ-paire{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} /* Piège à robots : hors écran plutôt que display:none, que certains remplisseurs automatiques ignorent. */ .champ-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contact label.champ-accord{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400; font-family:var(--body);font-size:14px;color:var(--ink-2)} .contact label.champ-accord input{margin-top:3px;flex:0 0 auto;width:18px;height:18px} .contact .btn{align-self:flex-start;border:0;cursor:pointer} .form-delai{font-size:14px;color:var(--soft);margin:0} .form-erreurs{font-size:15px;color:var(--ink);background:#FFF3F3; border-left:3px solid #B01018;padding:12px 14px;margin:0} .form-merci{border-left:3px solid var(--accent);background:var(--mist); padding:24px 26px;margin:22px 0} .merci-titre{font-family:var(--head);font-weight:800;font-size:20px; color:var(--ink);margin:0 0 8px} .merci-delai{margin:0 0 12px} .merci-appel{margin:0 0 14px;color:var(--ink)} /* Dans le bloc d'offre, qui est sur fond noir, le formulaire s'inverse. */ .offre .contact label{color:#fff} .offre .contact label span{color:rgba(255,255,255,.6)} .offre .contact input,.offre .contact textarea{background:#151515; border-color:#333;color:#fff} .offre .contact label.champ-accord{color:rgba(255,255,255,.74)} .offre .contact .champ-accord a{color:#fff} .offre .contact .btn{background:#fff;color:#111} .offre .form-delai{color:rgba(255,255,255,.6)} .offre .form-delai a{color:#fff} .offre .form-titre{color:#fff} .offre-alt{font-size:14px;color:rgba(255,255,255,.66);margin:4px 0 0} .offre-alt a{color:#fff;font-weight:700} .offre .form-merci{background:#151515;border-left-color:#fff} .offre .merci-titre,.offre .merci-appel{color:#fff} .offre .merci-delai{color:rgba(255,255,255,.74)} /* --- le rappel « appelez Mehdi » --- */ .rappel-appel{border:1px solid var(--line);border-left:4px solid var(--accent); padding:22px 24px;margin:30px 0} .rappel-appel p{margin:0 0 12px} .rappel-appel p:last-child{margin:0} .rappel-coord{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center; font-family:var(--head);font-weight:700;font-size:17px} .rappel-coord a{text-decoration:none;border-bottom:2px solid var(--accent)} .rappel-coord a:hover{border-bottom-width:3px} .rappel-sombre{background:#0B0B0B;color:rgba(255,255,255,.74);border-color:#333} .rappel-sombre strong,.rappel-sombre .rappel-coord a{color:#fff} /* --- brouillon : visible en prévisualisation, jamais indexé --- */ .brouillon{background:#FFF7E0;border:1px solid #8F6400;color:#5B4500; padding:14px 18px;margin:22px 0;font-size:15px} /* --- index de silo --- */ .silo-liste{list-style:none;padding:0;margin:34px 0 0} .silo-liste li{border-top:1px solid var(--line);padding:22px 0;margin:0} .silo-liste a{text-decoration:none;font-family:var(--head);font-weight:700; font-size:20px;line-height:1.25;display:inline-block;margin-bottom:6px} .silo-liste a:hover{text-decoration:underline} .silo-liste p{font-size:16px;margin:0 0 6px} .silo-meta{font-size:13px;color:var(--soft);font-family:var(--data)} /* --- décider : le lien vers l'éditeur GitHub, sur la page de relecture --- */ .decider{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px; margin-top:10px;background:var(--ink);color:#fff;text-decoration:none; font-family:var(--head);font-weight:800;font-size:14px} .decider:hover{text-decoration:underline} .decider-non{display:inline-block;margin-top:10px;font-size:14px;color:var(--soft)} /* --- schémas : du HTML mis en page, jamais une image --- */ .schema{margin:34px 0;border:1px solid var(--line);padding:26px} .sch-legende{font-family:var(--data);font-size:12px;color:var(--soft); margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .sch-etapes{list-style:none;margin:0;padding:0;counter-reset:etape} .sch-etape{display:flex;gap:16px;padding:0 0 20px;margin:0;position:relative} .sch-etape:last-child{padding-bottom:0} .sch-etape::before{content:"";position:absolute;left:15px;top:34px;bottom:0; width:2px;background:var(--line)} .sch-etape:last-child::before{display:none} .sch-num{flex:0 0 32px;height:32px;border-radius:999px;background:var(--accent); color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--data);font-weight:600;font-size:14px;position:relative;z-index:1} body:not([data-unit]) .sch-num{background:var(--ink)} .sch-corps{display:flex;flex-direction:column;gap:3px;padding-top:3px} .sch-corps strong{font-family:var(--head);font-size:17px;color:var(--ink)} .sch-corps span{font-size:16px;color:var(--ink-2)} .sch-repere{font-family:var(--data);font-size:12px;color:var(--soft)} .sch-comparaison{display:grid;gap:1px;background:var(--line); grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .sch-option{background:var(--paper);padding:20px} .sch-option-titre{font-family:var(--head);font-weight:700;font-size:17px; color:var(--ink);margin:0 0 8px} .sch-option-gagne{font-size:16px;color:var(--ink-2);margin:0 0 8px} .sch-option-limite{font-size:14px;color:var(--soft);margin:0; border-top:1px solid var(--line);padding-top:8px} .sch-chiffres{display:grid;gap:24px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .sch-chiffre{border-left:3px solid var(--accent);padding-left:16px} .sch-valeur{font-family:var(--head);font-weight:800; font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.03em; color:var(--ink);margin:0 0 6px} .sch-libelle{font-size:15px;color:var(--ink-2);margin:0 0 4px} .sch-source{font-family:var(--data);font-size:11px;color:var(--soft);margin:0} /* --- figures image --- */ figure.image{margin:34px 0} figure.image img{width:100%;height:auto;display:block;border:1px solid var(--line)} figure.image figcaption{font-family:var(--data);font-size:12px;color:var(--soft); margin-top:10px} @media (max-width:620px){.schema{padding:18px}} @media (max-width:620px){ .wrap,.nav-inner,.footer-inner,.fil{padding-left:20px;padding-right:20px} .nav-links{display:none} .offre{padding:26px} main{padding-bottom:64px} .cta-lecture{flex-direction:column;align-items:flex-start} }