Alliance-Boreale/Set-OPS-Public
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajoute les pages offres et tarifs (promo/)

Browse source 
promo/offres.html — les écosystèmes livrables, nommés par persona (Socle,
Identité, Maison OBNL, Cabinet, Atelier, Vigie, Intégral, Présence Web). Le
périmètre annoncé est tiré des modèles réels : le nombre de machines est celui
du plan, pas une estimation. Les états sont honnêtes — collaboration marquée
« en chantier », presence-web marquée « feuille de route, non vendable ».

promo/tarifs.html — grille tarifaire de Chezlepro inc., alignée sur les six
offres du site chezlepro.ca (diagnostic, socle opérateur, tenant portable,
audit-ready ops, exploitation gérée, observabilité) plutôt que sur les noms de
modèles Set-OPS. Diagnostic dès 4 500 $ et déductible, socle dès 18 000 $,
tenant dès 12 000 $ (7 500 $ les suivants), parcours combiné dès 38 000 $ au
lieu de 42 000 $, exploitation à 750/1 500/2 800 $ par mois. Trois postes,
aucune facturation par siège, licences à 0 $.

Montants = estimations de marché (taux effectif ~1 000-1 100 $/jour, firme
spécialisée québécoise), pas des prix validés par une vente réelle. Dollars
canadiens avant taxes. Le README le consigne, ainsi que le fait que cette
grille est publique et versionnée.

Corrige au passage une contradiction introduite : offres.html affirmait « un
prix affiché serait un prix inventé » ; son tableau porte désormais les prix de
départ et renvoie à tarifs.html, source de vérité.

Validé : node --check du JS des 4 pages, balises équilibrées, liens internes et
croisés vérifiés, prouver.py --verifier → CONFORME 16/16.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Daniel Allaire 2026-07-21 11:28:51 -04:00
parent 917a2835ce
commit 6458469098
5 changed files with 1541 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
promo/README.md
View file

@ -1,22 +1,69 @@
# promo/ — pages de présentation Set-OPS
Deux pages web **autonomes** (un seul fichier chacune, aucun asset externe, aucune
dépendance réseau), sœurs de thème et liées entre elles.
Quatre pages web **autonomes** (un seul fichier chacune, aucun asset externe, aucune
dépendance réseau), sœurs de thème et liées entre elles par la barre de navigation.
| Fichier | Public visé | Répond à |
|---|---|---|
| `index.html` | sysadmin, personne technique | *Qu'est-ce que je peux faire avec ça ?* |
| `offres.html` | prospect, client | *Qu'est-ce que vous pouvez bâtir pour moi ?* |
| `tarifs.html` | prospect, acheteur | *Combien ça coûte ?* |
| `valeur.html` | direction, CA, bailleur de fonds | *Qu'est-ce que ça me rapporte, et comment le vérifier ?* |
> ⚠️ **`tarifs.html` est du matériel commercial de Chezlepro inc.**, publié dans un dépôt
> public. Les montants y sont donc visibles de tous, y compris des concurrents et des
> clients existants, et l'historique git en conserve chaque version. C'est un choix
> assumé ; le rappeler avant chaque ajustement de prix.
- **Thème** : identité *Alliance Boréale* (ciel nocturne + aurore + constellation),
reprise des thèmes Keycloak/Forgejo du dépôt.
- **Honnêteté** : les capacités **éprouvées** (déployées sur VM réelles) sont distinguées
de la **feuille de route**, conformément au principe « ne jamais affirmer plus que ce
qui est prouvé » (cf. `docs/audit/`). `valeur.html` pousse la règle jusqu'à une section
« Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une personne
responsable, mainteneur unique, épreuve de l'opérateur indépendant en cours.
de ce qui est **en chantier** et de la **feuille de route**, conformément au principe
« ne jamais affirmer plus que ce qui est prouvé » (cf. `docs/audit/`). Les trois pages
portent une section de réserves assumées.
## Le calculateur de `valeur.html`
## `offres.html` — périmètre tiré des modèles réels
Chaque offre correspond à un modèle d'instance existant, et le **nombre de machines
annoncé est celui du plan**, pas une estimation :
| Offre | Modèle | VM | État |
|---|---|---|---|
| Le Socle | `socle` (public) | 4 | éprouvé |
| Identité | `identite` | 7 | éprouvé |
| Maison OBNL · Cabinet | `collaboration` | 8 | **en chantier** |
| Atelier | `forge` | 6 | éprouvé |
| Vigie | `observabilite` | 7 | éprouvé |
| Intégral | `integral` | 12 | éprouvé |
| Présence Web | `presence-web` | 7 | **feuille de route — non vendable** |
> Si un modèle change de périmètre (VM ajoutée, module éprouvé), **mettre la page à jour** :
> son intérêt tient entièrement à ce que ces chiffres soient vrais.
Les montants de départ sont repris de `tarifs.html`, dont c'est la source de vérité — en
cas d'ajustement de prix, **modifier `tarifs.html` puis reporter dans `offres.html`**.
## `tarifs.html` — grille tarifaire Chezlepro inc.
Alignée sur les **six offres du site chezlepro.ca** (diagnostic, socle opérateur, tenant
portable, audit-ready ops, exploitation gérée, observabilité), et non sur les noms de
modèles Set-OPS.
| Mandat | Prix de départ |
|---|---|
| Diagnostic & Trajectoire | dès 4 500 $ (déduit du mandat suivant) |
| Socle Opérateur Souverain | dès 18 000 $ |
| Tenant Portable Clé en Main | dès 12 000 $ · dès 7 500 $ pour les suivants |
| Audit-Ready Ops | dès 9 000 $ |
| Observabilité & Journalisation | dès 7 500 $ |
| Parcours Démarrage Souverain | dès 38 000 $ (au lieu de 42 000 $) |
| Exploitation Gérée & Transfert | 750 / 1 500 / 2 800 $ par mois |
> **Ces montants sont des estimations de marché**, calées sur un taux effectif de
> ~1 000–1 100 $/jour (firme spécialisée québécoise), pas des prix validés par une vente
> réelle. À confronter au premier vrai mandat et à corriger. Dollars canadiens, avant taxes.
## `valeur.html` — le calculateur
Le comparatif coût total est **interactif** : le visiteur remplace les hypothèses par les
siennes (personnes desservies, coût des abonnements, matériel, mise en place,
@ -31,8 +78,8 @@ tarifs Set-OPS : ce sont des ordres de grandeur à remplacer.
## Voir / publier
```bash
xdg-open promo/valeur.html
python3 -m http.server -d promo 8080 # puis http://localhost:8080/valeur.html
xdg-open promo/offres.html
python3 -m http.server -d promo 8080 # puis http://localhost:8080/offres.html
```
Les fichiers sont prêts à déposer tels quels sur n'importe quel hébergement statique

2
promo/index.html
View file

@ -217,6 +217,8 @@
<a href="#capacites">Capacités</a>
<a href="#methode">Méthode</a>
<a href="#preuve">Preuve</a>
<a href="offres.html">Offres</a>
<a href="tarifs.html">Tarifs</a>
<a href="valeur.html">Valeur</a>
<a class="cta-mini" href="#demarrer">Démarrer</a>
</nav>

794
promo/offres.html Normal file
View file

@ -0,0 +1,794 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set-OPS — Les offres</title>
<meta name="description" content="Les écosystèmes numériques souverains livrables avec Set-OPS : socle, identité, maison OBNL, atelier, vigie, intégral. Périmètre réel, état honnête, accompagnement et réversibilité.">
<meta name="color-scheme" content="dark">
</head>
<body>
<style>
:root{
--night:#05060f; --night-2:#0a0d24; --night-3:#0e1640;
--ink:#e9ecff; --dim:#99a1c9; --dim-2:#727aa6;
--line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
--panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.03);
--teal:#4fe3c1; --cyan:#56c2ff; --violet:#a98bff; --amber:#ffc46b;
--aurora:linear-gradient(100deg,var(--teal) 0%,var(--cyan) 46%,var(--violet) 100%);
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
--wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
background:
radial-gradient(1200px 760px at 82% -8%,#141c4c 0%,transparent 58%),
radial-gradient(900px 620px at 8% -2%,#0e1640 0%,transparent 55%),
linear-gradient(180deg,var(--night-2) 0%,var(--night) 62%) fixed;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
#sky{position:fixed;inset:0;z-index:-2;pointer-events:none}
#sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.aurora{
position:fixed;left:-10%;right:-10%;top:-22%;height:74vh;z-index:-1;pointer-events:none;
filter:blur(64px) saturate(140%);opacity:.42;
background:
radial-gradient(40% 60% at 20% 30%,var(--teal) 0%,transparent 70%),
radial-gradient(45% 70% at 55% 20%,var(--cyan) 0%,transparent 70%),
radial-gradient(40% 65% at 82% 35%,var(--violet) 0%,transparent 70%);
animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(-3%,0) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
header.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
background:linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.28));
border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav nav a{color:var(--dim);text-decoration:none;font-size:.94rem;font-weight:500}
.nav nav a:hover{color:var(--ink)}
.nav .cta-mini{padding:8px 16px;border-radius:999px;background:var(--aurora);color:#04121a;font-weight:700;font-size:.9rem}
.nav .cta-mini:hover{color:#04121a;filter:brightness(1.08)}
@media(max-width:900px){.nav nav a:not(.cta-mini){display:none}}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);font-weight:600}
h1,h2,h3{text-wrap:balance;line-height:1.08;margin:0}
.grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0}
.lede{color:var(--dim);font-size:1.12rem;max-width:60ch}
.hero{position:relative;padding:82px 0 58px}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:800;letter-spacing:-.02em;max-width:16ch}
.hero .lede{margin-top:26px;font-size:clamp(1.05rem,1.9vw,1.26rem);max-width:64ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;border:1px solid transparent;transition:transform .15s ease,filter .15s ease,border-color .15s ease}
.btn-primary{background:var(--aurora);color:#04121a}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--panel)}
.btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px)}
section{padding:72px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- principe modulaire ---- */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.beat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:22px}
.beat .n{font-family:var(--mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em}
.beat h3{font-size:1.06rem;font-weight:680;margin:12px 0 8px}
.beat p{color:var(--dim);font-size:.94rem}
@media(max-width:820px){.beats{grid-template-columns:1fr}}
/* ---- offres ---- */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:880px){.offres{grid-template-columns:1fr}}
.offre{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.offre:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.42);box-shadow:0 18px 50px -24px rgba(86,194,255,.45)}
.offre::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
.offre.phare{border-color:rgba(79,227,193,.42);background:linear-gradient(150deg,rgba(79,227,193,.07),rgba(169,139,255,.05)),var(--panel)}
.offre.phare::before{opacity:1;height:3px}
.offre .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.offre h3{font-size:1.32rem;font-weight:740}
.offre .who{color:var(--cyan);font-size:.87rem;font-weight:600;margin-top:4px}
.offre .sub{color:var(--dim);font-size:.96rem;margin-top:12px}
.offre .meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px}
.pill{font-family:var(--mono);font-size:.74rem;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px 10px;border-radius:7px;white-space:nowrap}
ul.does{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.94rem}
ul.does li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--aurora);transform:rotate(45deg)}
ul.does b{color:var(--ink);font-weight:640}
.offre .foot{margin-top:auto;padding-top:18px;color:var(--dim-2);font-size:.87rem;border-top:1px solid var(--line-2);margin-top:20px}
.offre .foot b{color:var(--dim)}
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;margin-left:auto;flex:none}
.st.ok{color:#7ff0d0;background:rgba(79,227,193,.12);border:1px solid rgba(79,227,193,.32)}
.st.wip{color:#ffd79a;background:rgba(255,196,107,.1);border:1px solid rgba(255,196,107,.3)}
.st.road{color:#c3b2ff;background:rgba(169,139,255,.1);border:1px solid rgba(169,139,255,.3)}
/* ---- services ---- */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.4)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
.card h3{font-size:1.16rem;font-weight:720;margin-bottom:10px}
.card p{color:var(--dim);font-size:.95rem}
/* ---- label ---- */
.label-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.label-grid{grid-template-columns:1fr}}
.lv{background:var(--panel-2);border:1px solid var(--line-2);border-radius:16px;padding:24px;position:relative}
.lv .rank{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.lv h3{font-size:1.22rem;font-weight:740;margin:10px 0 10px;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv p{color:var(--dim);font-size:.94rem}
/* ---- tarification ---- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.94rem}
thead th{text-align:left;padding:15px 18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-2);border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--dim)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.022)}
tbody td:first-child{color:var(--ink);font-weight:640;white-space:nowrap}
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:76ch}
.note b{color:var(--dim)}
.honest{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;padding:24px 26px}
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
.honest li{color:var(--dim);font-size:.96rem}
.honest b{color:var(--ink);font-weight:640}
.close{text-align:center;padding:88px 0 96px}
.close h2{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.02em;max-width:20ch;margin-inline:auto}
.close p{margin:20px auto 0;color:var(--dim);max-width:56ch;font-size:1.06rem}
.close .cta-row{justify-content:center}
footer{border-top:1px solid var(--line-2);padding:40px 0;color:var(--dim-2);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--cyan)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.aurora{animation:none}
html{scroll-behavior:auto}
}
</style>
<div id="sky" aria-hidden="true"><canvas></canvas></div>
<div class="aurora" aria-hidden="true"></div>
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Set-OPS — Alliance Boréale">
<svg viewBox="0 0 32 32" role="img" aria-hidden="true"><defs>
<radialGradient id="sky1" cx="50%" cy="36%" r="75%"><stop offset="0%" stop-color="#10184a"/><stop offset="100%" stop-color="#05060f"/></radialGradient>
<linearGradient id="au1" x1="0" y1="1" x2="1" y2="0"><stop offset="0%" stop-color="#2ec18f"/><stop offset="45%" stop-color="#56c2ff"/><stop offset="100%" stop-color="#a98bff"/></linearGradient>
<radialGradient id="gl1" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#bfe9ff"/><stop offset="100%" stop-color="#bfe9ff" stop-opacity="0"/></radialGradient>
<radialGradient id="st1" cx="50%" cy="45%" r="60%"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#d6ecff"/></radialGradient>
</defs>
<circle cx="16" cy="16" r="16" fill="url(#sky1)"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="url(#au1)" stroke-width="2.6" stroke-linecap="round" opacity=".85"/>
<circle cx="7" cy="9" r=".9" fill="#cfe6ff"/><circle cx="24" cy="8" r="1.1" fill="#fff"/><circle cx="26" cy="22" r=".8" fill="#bfe9ff"/><circle cx="9" cy="25" r=".7" fill="#cfe6ff"/>
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Alliance Boréale</span></span>
</a>
<nav>
<a href="#offres">Les offres</a>
<a href="#services">Accompagnement</a>
<a href="#label">Le label</a>
<a href="tarifs.html">Tarifs</a>
<a href="valeur.html">Valeur</a>
<a class="cta-mini" href="index.html">Capacités</a>
</nav>
</div>
</header>
<main id="top">
<!-- =================== HERO =================== -->
<div class="hero">
<div class="wrap">
<span class="eyebrow">Offres · Périmètre réel · Accompagnement</span>
<h1>Un écosystème <span class="grad">complet</span>, pas un logiciel de plus.</h1>
<p class="lede">
Chaque offre est un écosystème numérique entier — machines, réseau, identité,
chiffrement, sauvegardes, supervision — décrit dans un plan versionné et déployé par
le même moteur libre. Vous choisissez la portée ; le socle souverain est toujours
dessous. Et vous pouvez ajouter un module plus tard sans rien reconstruire.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="#offres">Voir les offres &rarr;</a>
<a class="btn btn-ghost" href="valeur.html#calcul">Calculer ce que ça coûte</a>
</div>
</div>
</div>
<hr class="rule">
<!-- =================== PRINCIPE =================== -->
<section id="principe">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Le principe</span>
<h2>Une base commune, des modules qui s'ajoutent.</h2>
<p>
Aucune offre n'est un produit figé. Toutes partent du même socle souverain et
s'enrichissent de modules. Passer de l'une à l'autre, c'est éditer un plan et
relancer une commande — pas rappeler un fournisseur pour renégocier.
</p>
</div>
<div class="beats reveal">
<div class="beat">
<p class="n">01</p>
<h3>Le socle, toujours</h3>
<p>DNS interne, autorité de certification, passerelle TLS, relais courriel. Toute offre repose dessus — c'est ce qui rend l'ensemble souverain plutôt qu'assemblé.</p>
</div>
<div class="beat">
<p class="n">02</p>
<h3>Les modules, au choix</h3>
<p>Identité, collaboration, forge, supervision, données, sauvegardes. Chacun est un ensemble de machines et de réglages déjà éprouvés, pas un projet à recommencer.</p>
</div>
<div class="beat">
<p class="n">03</p>
<h3>La croissance, sans rupture</h3>
<p>Ajouter un module plus tard ne remet rien en cause : le plan grandit, l'inventaire se régénère, seules les nouvelles machines apparaissent.</p>
</div>
</div>
</div>
</section>
<hr class="rule">
<!-- =================== OFFRES =================== -->
<section id="offres">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Les offres</span>
<h2>Huit portées, du strict nécessaire à l'écosystème entier.</h2>
<p>
Le nombre de machines indiqué est celui du plan réel, pas une estimation.
L'état l'est aussi : <b>éprouvé</b> signifie déployé et vérifié sur des machines
réelles, <b>en chantier</b> signifie en construction, <b>feuille de route</b>
signifie pas encore commencé. Nous ne vendons pas les deux derniers.
</p>
</div>
<div class="offres reveal">
<!-- SOCLE -->
<article class="offre">
<div class="top">
<div>
<h3>Le Socle</h3>
<p class="who">Pour poser la fondation</p>
</div>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">
L'infrastructure de base souveraine, sur laquelle tout le reste s'appuie.
La bonne première étape quand on veut avancer sans tout basculer d'un coup.
</p>
<div class="meta">
<span class="pill">4 machines</span><span class="pill">2 zones réseau</span><span class="pill">libre et public</span>
</div>
<ul class="does">
<li><b>DNS interne</b> — vos noms de machines vous appartiennent</li>
<li><b>Autorité de certification</b> — vos propres certificats, partout</li>
<li><b>Passerelle TLS</b> — un seul point d'entrée, chiffré</li>
<li><b>Relais courriel</b> — les alertes et notifications partent de chez vous</li>
</ul>
<p class="foot"><b>Aussi :</b> ce modèle est public et libre. Vous pouvez l'installer vous-même, sans nous.</p>
</article>
<!-- IDENTITÉ -->
<article class="offre">
<div class="top">
<div>
<h3>Identité</h3>
<p class="who">Une personne, un mot de passe</p>
</div>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">
L'annuaire de votre organisation devient la source de vérité unique, et la
connexion unique s'applique à tout ce que vous ajouterez ensuite.
</p>
<div class="meta">
<span class="pill">7 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
</div>
<ul class="does">
<li><b>Annuaire central</b> — arrivées et départs gérés à un seul endroit</li>
<li><b>Connexion unique (SSO)</b> — un mot de passe pour tous vos services</li>
<li><b>Base de données</b> chiffrée de bout en bout</li>
<li><b>Passerelle d'authentification</b> pour protéger même les outils sans SSO natif</li>
</ul>
<p class="foot"><b>Le bon point de départ</b> si vous prévoyez d'ajouter plusieurs services : tout s'y raccorde.</p>
</article>
<!-- MAISON OBNL — PHARE -->
<article class="offre phare">
<div class="top">
<div>
<h3>Maison OBNL</h3>
<p class="who">Offre phare · OBNL et coopératives</p>
</div>
<span class="st wip">En chantier</span>
</div>
<p class="sub">
Le remplaçant souverain de Google&nbsp;Workspace ou Microsoft&nbsp;365 : identité,
fichiers, documents partagés, agendas, contacts, courriel — chez vous, sous votre
seule autorité.
</p>
<div class="meta">
<span class="pill">8 machines</span><span class="pill">5 zones réseau</span><span class="pill">identité incluse</span>
</div>
<ul class="does">
<li><b>Fichiers et partage</b> — l'équivalent de Dropbox ou OneDrive</li>
<li><b>Documents collaboratifs</b> — édition à plusieurs, dans le navigateur</li>
<li><b>Agendas et contacts</b> synchronisés sur tous les appareils</li>
<li><b>Courriel complet</b> avec filtrage du pourriel</li>
<li><b>Connexion unique</b> sur l'ensemble</li>
</ul>
<p class="foot"><b>État réel :</b> le socle et l'identité sont éprouvés ; le module collaboration est en construction et constitue notre priorité de développement. Nous ne le livrerons pas avant de l'avoir prouvé.</p>
</article>
<!-- CABINET -->
<article class="offre">
<div class="top">
<div>
<h3>Cabinet</h3>
<p class="who">PME et professionnels</p>
</div>
<span class="st wip">En chantier</span>
</div>
<p class="sub">
La même base que Maison OBNL, réglée pour un cabinet ou une petite entreprise :
confidentialité des dossiers clients, cloisonnement par équipe, traçabilité.
</p>
<div class="meta">
<span class="pill">8 machines</span><span class="pill">cloisonnement</span><span class="pill">journalisation</span>
</div>
<ul class="does">
<li><b>Dossiers clients</b> hébergés chez vous, jamais chez un tiers</li>
<li><b>Droits par équipe</b> et par dossier</li>
<li><b>Journal des accès</b> conservé et consultable</li>
<li><b>Sauvegardes chiffrées</b> hors du serveur principal</li>
</ul>
<p class="foot"><b>État réel :</b> repose sur le même module collaboration, en construction.</p>
</article>
<!-- ATELIER -->
<article class="offre">
<div class="top">
<div>
<h3>Atelier</h3>
<p class="who">Équipes qui développent</p>
</div>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">
Votre forge logicielle souveraine : dépôts, suivi des tickets, revues de code et
documentation, sans dépendre d'une plateforme étrangère.
</p>
<div class="meta">
<span class="pill">6 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
</div>
<ul class="does">
<li><b>Dépôts git</b> illimités, privés par défaut</li>
<li><b>Tickets, revues, wiki</b> intégrés</li>
<li><b>Base de données</b> et sauvegardes incluses</li>
<li><b>Connexion unique</b> en ajoutant l'offre Identité</li>
</ul>
<p class="foot"><b>Remplace</b> un abonnement GitHub ou GitLab payant, sans limite de sièges.</p>
</article>
<!-- VIGIE -->
<article class="offre">
<div class="top">
<div>
<h3>Vigie</h3>
<p class="who">Savoir avant vos usagers</p>
</div>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">
La supervision de votre parc : mesures, journaux centralisés, tableaux de bord et
alertes. Ce qui transforme « le site est lent » en un diagnostic.
</p>
<div class="meta">
<span class="pill">7 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
</div>
<ul class="does">
<li><b>Mesures et historique</b> de chaque machine et service</li>
<li><b>Journaux centralisés</b>, cherchables</li>
<li><b>Tableaux de bord</b> et alertes par courriel</li>
<li><b>Vue métier</b> — l'état de vos services, pas seulement des serveurs</li>
</ul>
<p class="foot"><b>Remplace</b> un abonnement de supervision facturé à la machine.</p>
</article>
<!-- INTÉGRAL -->
<article class="offre phare">
<div class="top">
<div>
<h3>Intégral</h3>
<p class="who">L'écosystème entier</p>
</div>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">
Tout ce que nous savons faire, assemblé et cloisonné : identité, collaboration,
forge, supervision, données, sauvegardes. Le modèle de référence pour une
organisation qui internalise l'ensemble de son numérique.
</p>
<div class="meta">
<span class="pill">12 machines</span><span class="pill">6 zones de sécurité</span><span class="pill">tout inclus</span>
</div>
<ul class="does">
<li><b>Six zones réseau cloisonnées</b> — une brèche ne se propage pas</li>
<li><b>Sauvegardes hors&#8209;nœud</b> chiffrées, restauration testée</li>
<li><b>Chiffrement de bout en bout</b> entre serveurs, pas seulement en façade</li>
<li><b>Supervision complète</b> de l'ensemble</li>
</ul>
<p class="foot"><b>C'est le modèle</b> sur lequel notre propre infrastructure fonctionne. Nous ne vendons pas autre chose que ce que nous utilisons.</p>
</article>
<!-- PRÉSENCE WEB -->
<article class="offre">
<div class="top">
<div>
<h3>Présence Web</h3>
<p class="who">Sites et applications</p>
</div>
<span class="st road">Feuille de route</span>
</div>
<p class="sub">
Héberger vos sites et vos applications web sur votre propre socle, en natif —
sans conteneur, sans plateforme tierce.
</p>
<div class="meta">
<span class="pill">7 machines prévues</span><span class="pill">non livrable</span>
</div>
<ul class="does">
<li><b>Sites statiques</b> et applications dynamiques</li>
<li><b>Base de données</b> et certificats automatiques</li>
</ul>
<p class="foot"><b>État réel :</b> les briques web frontale et dorsale n'ont pas encore de rôle implémenté. Cette offre <b>n'est pas vendable aujourd'hui</b> et figure ici pour que vous sachiez où nous allons. Pour un besoin web immédiat, c'est Intégral qui répond.</p>
</article>
</div>
</div>
</section>
<hr class="rule">
<!-- =================== SERVICES =================== -->
<section id="services">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">L'accompagnement</span>
<h2>Le logiciel est libre. C'est le travail qui se paie.</h2>
<p>
Aucune de ces prestations n'est obligatoire : tout est documenté, et une équipe
technique peut s'en charger seule. Elles existent pour les organisations qui
préfèrent confier.
</p>
</div>
<div class="duo reveal">
<div class="card">
<h3>Mise en place</h3>
<p>
Installation complète sur votre matériel, migration de vos données existantes
(courriels, fichiers, comptes), configuration à vos couleurs et formation de vos
équipes. Une fois, au début.
</p>
</div>
<div class="card">
<h3>Infogérance</h3>
<p>
Mises à jour de sécurité, surveillance, sauvegardes dont la restauration est
réellement testée, et intervention en cas d'incident. Mensuel, résiliable.
</p>
</div>
<div class="card">
<h3>Audit et certification</h3>
<p>
Vérification indépendante de votre installation selon le label ci-dessous, avec
rapport daté. Utile en conseil d'administration, en appel d'offres ou en demande
de financement.
</p>
</div>
<div class="card">
<h3>Formation et reprise</h3>
<p>
Nous formons votre personnel pour qu'il reprenne l'exploitation. C'est une
prestation, pas une menace : notre modèle ne repose pas sur votre dépendance.
</p>
</div>
<div class="card">
<h3>Réversibilité garantie</h3>
<p>
Vous partez quand vous voulez, avec vos données dans des formats ouverts, votre
plan d'infrastructure et toute la documentation. Rien n'est retenu en otage —
le moteur lui&#8209;même est sous licence libre.
</p>
</div>
<div class="card">
<h3>Hébergement du matériel</h3>
<p>
Si vous n'avez pas de local adapté, vos machines peuvent être hébergées au
Québec, chez nous ou chez un partenaire. Elles restent les vôtres.
</p>
</div>
</div>
</div>
</section>
<hr class="rule">
<!-- =================== LABEL =================== -->
<section id="label">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Le label</span>
<h2>Trois niveaux, qui s'accumulent.</h2>
<p>
Un cadre pour dire où en est réellement une installation — la vôtre comme la nôtre.
Chaque niveau suppose le précédent, et se constate par des vérifications, pas par
une déclaration.
</p>
</div>
<div class="label-grid reveal">
<div class="lv">
<p class="rank">Niveau 1</p>
<h3>Souverain</h3>
<p>
Les données sont chez vous, sur du logiciel libre, sans dépendance à un
fournisseur qui pourrait fermer, augmenter ses prix ou changer ses conditions.
</p>
</div>
<div class="lv">
<p class="rank">Niveau 2</p>
<h3>Résilient</h3>
<p>
Les sauvegardes existent hors du serveur, chiffrées, et leur restauration a été
testée pour de vrai. L'ensemble est supervisé, et se reconstruit à partir de son
plan.
</p>
</div>
<div class="lv">
<p class="rank">Niveau 3</p>
<h3>Exemplaire</h3>
<p>
Le chiffrement s'applique entre les serveurs et pas seulement en façade, les
accès sont cloisonnés et journalisés, et un tiers peut le vérifier lui&#8209;même.
</p>
</div>
</div>
<p class="note">
<b>En préparation.</b> Le cadre des trois niveaux est arrêté ; la méthode de
vérification et son indépendance sont encore en cours de définition. Nous ne
délivrons pas encore de certification formelle, et nous préférons le dire.
</p>
</div>
</section>
<hr class="rule">
<!-- =================== TARIFICATION =================== -->
<section id="tarifs">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">La tarification</span>
<h2>Trois postes, et pas de siège à payer.</h2>
<p>
Aucune de nos offres ne se facture par utilisateur. Ajouter trente personnes à
votre organisation ne change pas la facture — c'est la différence structurelle avec
un abonnement.
</p>
</div>
<div class="tbl-scroll reveal">
<table>
<thead>
<tr><th>Poste</th><th>Quand</th><th>Ce que ça couvre</th><th>Montant</th></tr>
</thead>
<tbody>
<tr>
<td>Matériel</td>
<td>Une fois</td>
<td>Serveurs et réseau. Vous l'achetez et il vous appartient ; nous pouvons vous conseiller ou le fournir.</td>
<td>Au coût</td>
</tr>
<tr>
<td>Diagnostic</td>
<td>Une fois</td>
<td>Le point de départ : état des lieux, priorités, feuille de route. Déduit du mandat suivant, s'il y en a un.</td>
<td>dès 4 500 $</td>
</tr>
<tr>
<td>Mise en place</td>
<td>Une fois</td>
<td>Installation, migration des données, configuration, formation initiale. Varie selon l'offre et l'état de votre existant.</td>
<td>dès 18 000 $</td>
</tr>
<tr>
<td>Infogérance</td>
<td>Mensuel</td>
<td>Mises à jour, supervision, sauvegardes testées, intervention. Optionnel et résiliable.</td>
<td>750 – 2 800 $</td>
</tr>
<tr>
<td>Licences logicielles</td>
<td>—</td>
<td>Tous les composants sont libres. Il n'y a rien à payer, ni maintenant ni plus tard.</td>
<td>0 $</td>
</tr>
</tbody>
</table>
</div>
<p class="note">
<b>Des prix de départ, pas des devis.</b> L'essentiel du coût dépend de votre situation :
le volume à migrer, les habitudes à accompagner, le matériel dont vous disposez déjà.
C'est pourquoi tout commence par un diagnostic — et pourquoi son montant est déduit de
la suite. La <a href="tarifs.html" style="color:var(--cyan)">grille tarifaire complète</a>
détaille chaque mandat, et la page
<a href="valeur.html#calcul" style="color:var(--cyan)">Valeur</a> vous laisse simuler
l'ensemble avec vos propres hypothèses avant même de nous parler.
</p>
</div>
</section>
<hr class="rule">
<!-- =================== RÉSERVES =================== -->
<section id="reserves">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Honnêteté</span>
<h2>Ce que nous ne vendons pas encore.</h2>
</div>
<div class="honest reveal">
<h3>À lire avant de nous appeler</h3>
<ul>
<li>
<b>Présence Web n'est pas livrable.</b> Les briques manquent. Elle figure dans
cette page comme direction, pas comme catalogue.
</li>
<li>
<b>Maison OBNL et Cabinet reposent sur un module en construction.</b> Le socle et
l'identité sont éprouvés ; la collaboration est notre chantier prioritaire. Nous
pouvons en discuter et planifier, pas la livrer aujourd'hui.
</li>
<li>
<b>La certification n'est pas encore délivrée.</b> Le cadre existe, la méthode de
vérification indépendante est en cours de définition.
</li>
<li>
<b>Nous sommes une très petite équipe.</b> Cela vous donne un interlocuteur qui
connaît réellement votre installation, et cela veut dire que nous ne pouvons pas
servir tout le monde en même temps. Nous le dirons plutôt que de vous faire
attendre.
</li>
</ul>
</div>
</div>
</section>
<!-- =================== CLOSE =================== -->
<div class="close">
<div class="wrap reveal">
<h2>Commençons par une <span class="grad">conversation</span>.</h2>
<p>
Dites-nous ce que vous payez aujourd'hui, ce que vous hébergez et ce qui vous
inquiète. Nous vous dirons franchement si Set&#8209;OPS est une bonne idée pour vous
— y compris quand la réponse est non.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="valeur.html#calcul">Simuler le coût &rarr;</a>
<a class="btn btn-ghost" href="index.html">Voir les capacités techniques</a>
</div>
</div>
</div>
</main>
<footer>
<div class="wrap">
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/>
</svg>
<span>Set&#8209;OPS · Alliance Boréale — tout est libre</span>
</div>
<div><a href="index.html">Capacités</a> · <a href="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a> · <a href="#reserves">Nos réserves</a></div>
</div>
</footer>
<script>
(function(){
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var sky = document.querySelector('#sky canvas');
if(sky){
var ctx = sky.getContext('2d'), W, H, DPR, stars=[], raf;
function size(){
DPR = Math.min(window.devicePixelRatio||1, 2);
W = sky.clientWidth; H = sky.clientHeight;
sky.width = W*DPR; sky.height = H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0);
var count = Math.min(120, Math.round(W*H/14000));
stars = [];
for(var i=0;i<count;i++){
stars.push({x:Math.random()*W, y:Math.random()*H,
r:Math.random()*1.3+0.3, vx:(Math.random()-.5)*0.12, vy:(Math.random()-.5)*0.12,
tw:Math.random()*Math.PI*2, ts:Math.random()*0.02+0.006});
}
}
function frame(){
ctx.clearRect(0,0,W,H);
for(var i=0;i<stars.length;i++){
var s=stars[i];
if(!reduce){ s.x+=s.vx; s.y+=s.vy; s.tw+=s.ts;
if(s.x<0)s.x+=W; if(s.x>W)s.x-=W; if(s.y<0)s.y+=H; if(s.y>H)s.y-=H; }
var a = 0.5 + Math.sin(s.tw)*0.4;
ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,6.2832);
ctx.fillStyle='rgba(207,230,255,'+a.toFixed(3)+')'; ctx.fill();
}
for(var i=0;i<stars.length;i++){
for(var j=i+1;j<stars.length;j++){
var dx=stars[i].x-stars[j].x, dy=stars[i].y-stars[j].y, d=dx*dx+dy*dy;
if(d<10000){
var o=(1-d/10000)*0.22;
ctx.strokeStyle='rgba(86,194,255,'+o.toFixed(3)+')'; ctx.lineWidth=0.6;
ctx.beginPath(); ctx.moveTo(stars[i].x,stars[i].y); ctx.lineTo(stars[j].x,stars[j].y); ctx.stroke();
}
}
}
if(!reduce) raf=requestAnimationFrame(frame);
}
size(); frame();
var to; window.addEventListener('resize',function(){ clearTimeout(to); to=setTimeout(function(){ cancelAnimationFrame(raf); size(); frame(); },180); });
document.addEventListener('visibilitychange',function(){
if(document.hidden){ cancelAnimationFrame(raf); } else if(!reduce){ raf=requestAnimationFrame(frame); }
});
}
var els = document.querySelectorAll('.reveal');
if(reduce || !('IntersectionObserver' in window)){
els.forEach(function(e){ e.classList.add('in'); });
} else {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
els.forEach(function(e){ io.observe(e); });
}
})();
</script>
</body>
</html>

686
promo/tarifs.html Normal file
View file

@ -0,0 +1,686 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chezlepro — Tarifs des offres souveraines</title>
<meta name="description" content="Grille tarifaire indicative de Chezlepro inc. : diagnostic de souveraineté, socle opérateur, tenant portable clé en main, audit-ready ops, observabilité, exploitation gérée. Dollars canadiens, avant taxes, sans facturation par siège.">
<meta name="color-scheme" content="dark">
</head>
<body>
<style>
:root{
--night:#05060f; --night-2:#0a0d24; --night-3:#0e1640;
--ink:#e9ecff; --dim:#99a1c9; --dim-2:#727aa6;
--line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
--panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.03);
--teal:#4fe3c1; --cyan:#56c2ff; --violet:#a98bff; --amber:#ffc46b;
--aurora:linear-gradient(100deg,var(--teal) 0%,var(--cyan) 46%,var(--violet) 100%);
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
--wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
background:
radial-gradient(1200px 760px at 82% -8%,#141c4c 0%,transparent 58%),
radial-gradient(900px 620px at 8% -2%,#0e1640 0%,transparent 55%),
linear-gradient(180deg,var(--night-2) 0%,var(--night) 62%) fixed;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
#sky{position:fixed;inset:0;z-index:-2;pointer-events:none}
#sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.aurora{
position:fixed;left:-10%;right:-10%;top:-22%;height:74vh;z-index:-1;pointer-events:none;
filter:blur(64px) saturate(140%);opacity:.42;
background:
radial-gradient(40% 60% at 20% 30%,var(--teal) 0%,transparent 70%),
radial-gradient(45% 70% at 55% 20%,var(--cyan) 0%,transparent 70%),
radial-gradient(40% 65% at 82% 35%,var(--violet) 0%,transparent 70%);
animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(-3%,0) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
header.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
background:linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.28));
border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}
.nav nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav nav a{color:var(--dim);text-decoration:none;font-size:.94rem;font-weight:500}
.nav nav a:hover{color:var(--ink)}
.nav .cta-mini{padding:8px 16px;border-radius:999px;background:var(--aurora);color:#04121a;font-weight:700;font-size:.9rem}
.nav .cta-mini:hover{color:#04121a;filter:brightness(1.08)}
@media(max-width:960px){.nav nav a:not(.cta-mini){display:none}}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);font-weight:600}
h1,h2,h3{text-wrap:balance;line-height:1.08;margin:0}
.grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0}
.lede{color:var(--dim);font-size:1.12rem;max-width:60ch}
.hero{position:relative;padding:82px 0 56px}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,5.6vw,4.3rem);font-weight:800;letter-spacing:-.02em;max-width:17ch}
.hero .lede{margin-top:26px;font-size:clamp(1.05rem,1.9vw,1.24rem);max-width:64ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;border:1px solid transparent;transition:transform .15s ease,filter .15s ease,border-color .15s ease}
.btn-primary{background:var(--aurora);color:#04121a}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--panel)}
.btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px)}
section{padding:70px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:40px}
.sec-head h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.06rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- 3 postes ---- */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.beat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:22px}
.beat .n{font-family:var(--mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em}
.beat h3{font-size:1.05rem;font-weight:680;margin:12px 0 8px}
.beat p{color:var(--dim);font-size:.93rem}
@media(max-width:820px){.beats{grid-template-columns:1fr}}
/* ---- offres tarifées ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.offre{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.offre:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.42);box-shadow:0 18px 50px -24px rgba(86,194,255,.45)}
.offre::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
.offre.phare{border-color:rgba(79,227,193,.42);background:linear-gradient(150deg,rgba(79,227,193,.07),rgba(169,139,255,.05)),var(--panel)}
.offre.phare::before{opacity:1;height:3px}
.offre h3{font-size:1.24rem;font-weight:740}
.offre .say{color:var(--cyan);font-size:.9rem;font-weight:600;margin-top:6px;font-style:italic}
.offre .sub{color:var(--dim);font-size:.95rem;margin-top:14px}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:20px 0 4px;padding-top:18px;border-top:1px solid var(--line-2)}
.price .from{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)}
.price .amt{font-size:1.95rem;font-weight:800;letter-spacing:-.02em;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.price .unit{color:var(--dim);font-size:.92rem}
.price .dur{width:100%;color:var(--dim-2);font-size:.85rem;margin-top:2px}
ul.does{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.93rem}
ul.does li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--aurora);transform:rotate(45deg)}
ul.does b{color:var(--ink);font-weight:640}
.offre .foot{margin-top:auto;padding-top:18px;margin-top:20px;color:var(--dim-2);font-size:.86rem;border-top:1px solid var(--line-2)}
.offre .foot b{color:var(--dim)}
/* ---- paliers exploitation ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--panel-2);border:1px solid var(--line-2);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.tier.mid{border-color:rgba(86,194,255,.35);background:linear-gradient(160deg,rgba(86,194,255,.07),transparent),var(--panel-2)}
.tier .rank{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim-2)}
.tier .amt{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 2px;color:var(--teal);font-variant-numeric:tabular-nums}
.tier .per{color:var(--dim-2);font-size:.86rem;margin-bottom:14px}
.tier ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tier li{position:relative;padding-left:20px;color:var(--dim);font-size:.9rem}
.tier li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--aurora);transform:rotate(45deg)}
/* ---- tableaux ---- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
thead th{text-align:left;padding:15px 18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-2);border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--dim)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.022)}
tbody td:first-child{color:var(--ink);font-weight:640;white-space:nowrap}
td.num{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
td.free{font-family:var(--mono);color:var(--teal);font-weight:700;white-space:nowrap}
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:78ch}
.note b{color:var(--dim)}
.note a{color:var(--cyan)}
.honest{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;padding:24px 26px}
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
.honest li{color:var(--dim);font-size:.95rem}
.honest b{color:var(--ink);font-weight:640}
.close{text-align:center;padding:84px 0 92px}
.close h2{font-size:clamp(1.85rem,4.4vw,3rem);font-weight:800;letter-spacing:-.02em;max-width:20ch;margin-inline:auto}
.close p{margin:20px auto 0;color:var(--dim);max-width:56ch;font-size:1.05rem}
.close .cta-row{justify-content:center}
footer{border-top:1px solid var(--line-2);padding:40px 0;color:var(--dim-2);font-size:.89rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--cyan)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.aurora{animation:none}
html{scroll-behavior:auto}
}
</style>
<div id="sky" aria-hidden="true"><canvas></canvas></div>
<div class="aurora" aria-hidden="true"></div>
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Chezlepro inc.">
<svg viewBox="0 0 32 32" role="img" aria-hidden="true"><defs>
<radialGradient id="sky1" cx="50%" cy="36%" r="75%"><stop offset="0%" stop-color="#10184a"/><stop offset="100%" stop-color="#05060f"/></radialGradient>
<linearGradient id="au1" x1="0" y1="1" x2="1" y2="0"><stop offset="0%" stop-color="#2ec18f"/><stop offset="45%" stop-color="#56c2ff"/><stop offset="100%" stop-color="#a98bff"/></linearGradient>
<radialGradient id="gl1" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#bfe9ff"/><stop offset="100%" stop-color="#bfe9ff" stop-opacity="0"/></radialGradient>
<radialGradient id="st1" cx="50%" cy="45%" r="60%"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#d6ecff"/></radialGradient>
</defs>
<circle cx="16" cy="16" r="16" fill="url(#sky1)"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="url(#au1)" stroke-width="2.6" stroke-linecap="round" opacity=".85"/>
<circle cx="7" cy="9" r=".9" fill="#cfe6ff"/><circle cx="24" cy="8" r="1.1" fill="#fff"/><circle cx="26" cy="22" r=".8" fill="#bfe9ff"/><circle cx="9" cy="25" r=".7" fill="#cfe6ff"/>
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Chezlepro <b>·</b> <span style="color:var(--dim);font-weight:500">tarifs</span></span>
</a>
<nav>
<a href="#forfaits">Forfaits</a>
<a href="#exploitation">Exploitation</a>
<a href="#materiel">Matériel</a>
<a href="#inclus">Sans supplément</a>
<a class="cta-mini" href="#contact">Un diagnostic</a>
</nav>
</div>
</header>
<main id="top">
<!-- =================== HERO =================== -->
<div class="hero">
<div class="wrap">
<span class="eyebrow">Chezlepro inc. · Saint-Bruno-de-Montarville</span>
<h1>Des prix <span class="grad">affichés</span>, parce que vous méritez de savoir.</h1>
<p class="lede">
Infrastructure numérique souveraine au Québec. Voici ce que coûtent nos offres, avant
même que vous nous appeliez. Rien n'est facturé par utilisateur, aucune licence n'est
à payer, et vous repartez avec tout si vous décidez de partir.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="#forfaits">Voir la grille &rarr;</a>
<a class="btn btn-ghost" href="valeur.html#calcul">Simuler mon cas</a>
</div>
</div>
</div>
<hr class="rule">
<!-- =================== TROIS POSTES =================== -->
<section id="postes">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">La structure</span>
<h2>Trois postes, et aucun siège à payer.</h2>
<p>
C'est la différence de fond avec un abonnement infonuagique : ajouter trente
personnes à votre organisation ne change pas votre facture.
</p>
</div>
<div class="beats reveal">
<div class="beat">
<p class="n">01</p>
<h3>Les forfaits</h3>
<p>Des mandats à portée définie, facturés une fois. Diagnostic, socle, tenant, mise en conformité, observabilité.</p>
</div>
<div class="beat">
<p class="n">02</p>
<h3>L'exploitation</h3>
<p>Mensuel, optionnel, résiliable. Vous pouvez aussi exploiter vous&#8209;même : tout est documenté pour ça.</p>
</div>
<div class="beat">
<p class="n">03</p>
<h3>Le matériel</h3>
<p>Serveurs et réseau, à votre nom. Vous l'achetez vous&#8209;même ou nous l'approvisionnons pour vous.</p>
</div>
</div>
</div>
</section>
<hr class="rule">
<!-- =================== FORFAITS =================== -->
<section id="forfaits">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Les forfaits</span>
<h2>Cinq mandats, du premier coup d'œil à l'écosystème entier.</h2>
<p>
Les montants indiqués sont des <b>prix de départ</b> pour une organisation de taille
courante. Le prix ferme est établi après le diagnostic, quand la portée réelle est
connue — c'est précisément à ça qu'il sert.
</p>
</div>
<div class="grid reveal">
<!-- 1 DIAGNOSTIC -->
<article class="offre phare">
<h3>Diagnostic &amp; Trajectoire de Souveraineté</h3>
<p class="say">« Faire le point avant de construire. »</p>
<p class="sub">
On clarifie votre situation réelle : architecture, accès, identité, sauvegardes,
observabilité, dépendances critiques. Vous en ressortez avec une feuille de route
priorisée — utilisable même si vous ne travaillez jamais avec nous ensuite.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">4 500 $</span>
<span class="unit">forfait</span>
<span class="dur">2 à 4 semaines · déductible du mandat suivant</span>
</div>
<ul class="does">
<li><b>Note de diagnostic</b> et cartographie simplifiée</li>
<li><b>Priorités d'action</b> classées par risque</li>
<li><b>Feuille de route</b> vers l'autonomie</li>
<li><b>Recommandations</b> d'architecture cible</li>
</ul>
<p class="foot"><b>La bonne première étape.</b> Son montant est déduit du mandat qui suit, s'il y en a un.</p>
</article>
<!-- 2 SOCLE -->
<article class="offre">
<h3>Socle Opérateur Souverain</h3>
<p class="say">« Bâtir des fondations qui tiennent dans le temps. »</p>
<p class="sub">
Capacité, stockage, segmentation réseau, accès opérateur, identité, observabilité,
chaîne de livraison. Des fondations compréhensibles, maintenues, auditées et
transmissibles — pas un montage que personne n'ose toucher.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">18 000 $</span>
<span class="unit">forfait</span>
<span class="dur">6 à 10 semaines selon l'existant</span>
</div>
<ul class="does">
<li><b>Architecture cible</b> du socle, documentée</li>
<li><b>Fondations déployées</b> ou remises en ordre</li>
<li><b>Base SSO</b> et rôles d'accès</li>
<li><b>Observabilité initiale</b> et conventions d'exploitation</li>
<li><b>Documentation de départ</b> complète</li>
</ul>
<p class="foot"><b>Inclut</b> la formation initiale de votre personnel technique.</p>
</article>
<!-- 3 TENANT -->
<article class="offre">
<h3>Tenant Portable Clé en Main</h3>
<p class="say">« Déployer sans vous enfermer. »</p>
<p class="sub">
Un environnement complet, décrit de façon structurée, déployé de manière
reproductible et rejouable ailleurs. La portabilité n'est pas une promesse
commerciale : c'est une propriété du livrable.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">12 000 $</span>
<span class="unit">par environnement</span>
<span class="dur">4 à 8 semaines · <b style="color:var(--teal)">dès 7 500 $</b> pour les suivants</span>
</div>
<ul class="does">
<li><b>Description structurée</b> et manifeste de déploiement</li>
<li><b>Conventions</b> de secrets et d'inventaire</li>
<li><b>Plan de sauvegarde</b> et de restauration</li>
<li><b>Documentation de migration</b></li>
<li><b>Journaux et tableaux de bord</b> de départ</li>
</ul>
<p class="foot"><b>Dégressif&nbsp;:</b> notre outillage rend le deuxième environnement bien moins coûteux que le premier. Vous en profitez, pas nous.</p>
</article>
<!-- 4 AUDIT-READY -->
<article class="offre">
<h3>Audit-Ready Ops</h3>
<p class="say">« Rendre l'exploitation prouvable. »</p>
<p class="sub">
On structure les accès, les rôles, les journaux de changement et les procédures,
pour transformer une exploitation implicite en exploitation lisible. Ce qui se
démontre devant un vérificateur, un bailleur ou un conseil d'administration.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">9 000 $</span>
<span class="unit">forfait</span>
<span class="dur">3 à 6 semaines</span>
</div>
<ul class="does">
<li><b>Matrice des accès</b> et des rôles</li>
<li><b>Structure de preuves</b> rejouables</li>
<li><b>Journal de changement</b> et checklist d'exploitation</li>
<li><b>Runbooks prioritaires</b></li>
<li><b>Cadre de revue</b> périodique</li>
</ul>
<p class="foot"><b>Notre spécialité.</b> Nos propres outils vérifient nos propres affirmations — nous vous donnons la même chose.</p>
</article>
<!-- 5 OBSERVABILITÉ -->
<article class="offre">
<h3>Observabilité &amp; Journalisation</h3>
<p class="say">« Voir clairement ce qui se passe. »</p>
<p class="sub">
Une base d'observabilité simple, robuste et proportionnée : un point d'entrée
unifié, des responsabilités séparées, et de quoi répondre à « depuis quand ? »
autrement qu'en devinant.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">7 500 $</span>
<span class="unit">forfait</span>
<span class="dur">3 à 5 semaines</span>
</div>
<ul class="does">
<li><b>Base d'observabilité</b> déployée</li>
<li><b>Collecte et consultation</b> des journaux</li>
<li><b>Tableaux de bord</b> initiaux</li>
<li><b>Conventions</b> d'étiquettes et d'accès</li>
<li><b>Politique de rétention</b> et guide d'usage</li>
</ul>
<p class="foot"><b>Souvent combiné</b> au socle, où il revient moins cher qu'en mandat séparé.</p>
</article>
<!-- COMBINÉ -->
<article class="offre phare">
<h3>Parcours Démarrage Souverain</h3>
<p class="say">« Tout le chemin, d'un seul tenant. »</p>
<p class="sub">
Le parcours complet pour une organisation qui internalise son numérique :
diagnostic, socle opérateur, premier environnement portable et observabilité,
menés comme un seul mandat plutôt que quatre.
</p>
<div class="price">
<span class="from">à partir de</span>
<span class="amt">38 000 $</span>
<span class="unit">forfait</span>
<span class="dur">4 à 7 mois · au lieu de <b style="color:var(--teal)">42 000 $</b> en mandats séparés, et trois mois d'exploitation inclus</span>
</div>
<ul class="does">
<li>Les quatre mandats ci&#8209;dessus, <b>enchaînés sans reprise</b></li>
<li><b>Un seul interlocuteur</b> du diagnostic à la mise en service</li>
<li><b>Trois mois d'exploitation gérée</b> inclus, pour la période critique</li>
<li><b>Transfert de connaissance</b> planifié dès le départ</li>
</ul>
<p class="foot"><b>Paiement par jalons</b> — vous ne payez chaque étape qu'une fois la précédente livrée et acceptée.</p>
</article>
</div>
</div>
</section>
<hr class="rule">
<!-- =================== EXPLOITATION =================== -->
<section id="exploitation">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">L'exploitation gérée</span>
<h2>Exploitation Gérée &amp; Transfert</h2>
<p>
« Maintenir, améliorer et transmettre. » Mensuel, résiliable en tout temps, et conçu
pour <b>réduire votre dépendance</b> plutôt que l'entretenir. Chaque palier inclut
l'accompagnement de votre montée en autonomie.
</p>
</div>
<div class="tiers reveal">
<div class="tier">
<p class="rank">Palier 1</p>
<p class="amt">750 $</p>
<p class="per">par mois · jusqu'à 8 machines</p>
<ul>
<li>Revue mensuelle et compte rendu d'exploitation</li>
<li>Mises à jour de sécurité appliquées</li>
<li>Sauvegardes vérifiées chaque mois</li>
<li>Intervention en heures ouvrables</li>
<li>Mise à jour documentaire</li>
</ul>
</div>
<div class="tier mid">
<p class="rank">Palier 2 · le plus courant</p>
<p class="amt">1 500 $</p>
<p class="per">par mois · jusqu'à 16 machines</p>
<ul>
<li>Tout le palier 1</li>
<li>Supervision continue avec alertes</li>
<li><b>Restauration réellement testée</b>, deux fois l'an</li>
<li>Priorités d'amélioration trimestrielles</li>
<li>Accompagnement de montée en autonomie</li>
</ul>
</div>
<div class="tier">
<p class="rank">Palier 3</p>
<p class="amt">2 800 $</p>
<p class="per">par mois · multi&#8209;environnements</p>
<ul>
<li>Tout le palier 2</li>
<li>Plusieurs environnements ou entités</li>
<li>Disponibilité étendue sur incident</li>
<li>Revue d'architecture semestrielle</li>
<li><b>Rapport de preuves annuel</b>, daté et archivable</li>
</ul>
</div>
</div>
<p class="note">
<b>Un service qu'on peut quitter.</b> Si votre équipe reprend l'exploitation, vous
descendez de palier ou vous arrêtez — sans pénalité et sans perdre l'accès à quoi que
ce soit. Notre modèle d'affaires ne repose pas sur votre dépendance, et c'est un choix
délibéré.
</p>
</div>
</section>
<hr class="rule">
<!-- =================== MATÉRIEL =================== -->
<section id="materiel">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Le matériel</span>
<h2>Ce que coûte le fer.</h2>
<p>
Ordres de grandeur pour du matériel professionnel neuf, amorti sur cinq ans. Il vous
appartient dès le premier jour. Du matériel reconditionné réduit ces montants de
moitié dans bien des cas.
</p>
</div>
<div class="tbl-scroll reveal">
<table>
<thead>
<tr><th>Portée</th><th>Configuration</th><th>Matériel</th><th>Par mois, amorti</th></tr>
</thead>
<tbody>
<tr><td>Socle</td><td>1 serveur, 4 machines virtuelles</td><td class="num">5 000 – 8 000 $</td><td class="num">85 – 135 $</td></tr>
<tr><td>Organisation</td><td>2 serveurs, 8 machines virtuelles</td><td class="num">10 000 – 16 000 $</td><td class="num">165 – 265 $</td></tr>
<tr><td>Écosystème complet</td><td>3 serveurs redondants, 12+ machines</td><td class="num">18 000 – 30 000 $</td><td class="num">300 – 500 $</td></tr>
<tr><td>Approvisionnement</td><td>Si nous l'achetons pour vous</td><td class="num">au coût + 12 %</td><td class="num">—</td></tr>
</tbody>
</table>
</div>
<p class="note">
<b>Pas de local adapté ?</b> Vos machines peuvent être hébergées au Québec, chez nous ou
chez un partenaire, à partir de <b>250 $ par mois</b>. Elles restent votre propriété et
vous pouvez les reprendre.
</p>
</div>
</section>
<hr class="rule">
<!-- =================== SANS SUPPLÉMENT =================== -->
<section id="inclus">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Sans supplément</span>
<h2>Ce que d'autres facturent, et que nous ne facturons pas.</h2>
</div>
<div class="tbl-scroll reveal">
<table>
<thead>
<tr><th>Poste</th><th>Ailleurs</th><th>Chez nous</th></tr>
</thead>
<tbody>
<tr><td>Licences logicielles</td><td>Par utilisateur, chaque mois, à perpétuité</td><td class="free">0 $ — tout est libre</td></tr>
<tr><td>Utilisateurs supplémentaires</td><td>Facturés au siège</td><td class="free">0 $ — illimités</td></tr>
<tr><td>Espace de stockage</td><td>Par tranche, en supplément</td><td class="free">0 $ — limité par vos disques</td></tr>
<tr><td>Sortie de vos données</td><td>Frais d'extraction, formats fermés</td><td class="free">0 $ — formats ouverts</td></tr>
<tr><td>Documentation</td><td>Optionnelle, souvent absente</td><td class="free">Incluse, en français</td></tr>
<tr><td>Le moteur d'automatisation</td><td>Propriétaire, sous licence</td><td class="free">Libre et public</td></tr>
</tbody>
</table>
</div>
<p class="note">
<b>Le moteur que nous utilisons est libre et public.</b> Vous pouvez le télécharger,
le lire, l'installer sans nous. Ce que vous nous achetez, c'est le travail, le jugement
et la responsabilité — pas l'accès au logiciel.
<a href="index.html">Voir le moteur</a>.
</p>
</div>
</section>
<hr class="rule">
<!-- =================== RÉSERVES =================== -->
<section id="reserves">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Honnêteté</span>
<h2>Les conditions, en clair.</h2>
</div>
<div class="honest reveal">
<h3>À lire avant de nous appeler</h3>
<ul>
<li>
<b>Montants en dollars canadiens, avant taxes.</b> Ce sont des prix de départ pour
une portée courante ; le prix ferme est établi après le diagnostic et fait l'objet
d'une proposition écrite.
</li>
<li>
<b>L'autohébergement n'est pas rentable pour tout le monde.</b> Sous une quarantaine
de personnes, l'économie sur les abonnements ne compense pas toujours. À cette
échelle, la bonne raison devient la souveraineté — et nous vous le dirons plutôt que
de vous vendre un socle.
<a href="valeur.html#calcul" style="color:var(--cyan)">Faites le calcul vous-même</a>.
</li>
<li>
<b>Le module de collaboration est en construction.</b> Bureautique en ligne et
partage de fichiers façon Nextcloud : c'est notre chantier prioritaire, pas encore
un livrable. Nous pouvons le planifier avec vous, pas vous le facturer aujourd'hui.
</li>
<li>
<b>Nous sommes une très petite équipe.</b> Vous aurez un interlocuteur qui connaît
réellement votre installation. En contrepartie, nous ne pouvons pas servir tout le
monde en même temps — et nous préférons le dire que vous faire attendre.
</li>
</ul>
</div>
</div>
</section>
<!-- =================== CLOSE =================== -->
<div class="close" id="contact">
<div class="wrap reveal">
<h2>Reprenez le contrôle de votre <span class="grad">infra numérique</span>.</h2>
<p>
Besoin de clarifier votre situation actuelle ? Nous pouvons commencer par un
diagnostic — et son montant est déduit de la suite, s'il y a une suite.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="https://chezlepro.ca/contact">Demander un diagnostic &rarr;</a>
<a class="btn btn-ghost" href="valeur.html#calcul">Simuler mon cas</a>
</div>
</div>
</div>
</main>
<footer>
<div class="wrap">
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/>
</svg>
<span>Chezlepro inc. · Saint-Bruno-de-Montarville, Québec</span>
</div>
<div><a href="https://chezlepro.ca">chezlepro.ca</a> · <a href="index.html">Le moteur</a> · <a href="valeur.html">Valeur</a> · <a href="#reserves">Conditions</a></div>
</div>
</footer>
<script>
(function(){
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var sky = document.querySelector('#sky canvas');
if(sky){
var ctx = sky.getContext('2d'), W, H, DPR, stars=[], raf;
function size(){
DPR = Math.min(window.devicePixelRatio||1, 2);
W = sky.clientWidth; H = sky.clientHeight;
sky.width = W*DPR; sky.height = H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0);
var count = Math.min(120, Math.round(W*H/14000));
stars = [];
for(var i=0;i<count;i++){
stars.push({x:Math.random()*W, y:Math.random()*H,
r:Math.random()*1.3+0.3, vx:(Math.random()-.5)*0.12, vy:(Math.random()-.5)*0.12,
tw:Math.random()*Math.PI*2, ts:Math.random()*0.02+0.006});
}
}
function frame(){
ctx.clearRect(0,0,W,H);
for(var i=0;i<stars.length;i++){
var s=stars[i];
if(!reduce){ s.x+=s.vx; s.y+=s.vy; s.tw+=s.ts;
if(s.x<0)s.x+=W; if(s.x>W)s.x-=W; if(s.y<0)s.y+=H; if(s.y>H)s.y-=H; }
var a = 0.5 + Math.sin(s.tw)*0.4;
ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,6.2832);
ctx.fillStyle='rgba(207,230,255,'+a.toFixed(3)+')'; ctx.fill();
}
for(var i=0;i<stars.length;i++){
for(var j=i+1;j<stars.length;j++){
var dx=stars[i].x-stars[j].x, dy=stars[i].y-stars[j].y, d=dx*dx+dy*dy;
if(d<10000){
var o=(1-d/10000)*0.22;
ctx.strokeStyle='rgba(86,194,255,'+o.toFixed(3)+')'; ctx.lineWidth=0.6;
ctx.beginPath(); ctx.moveTo(stars[i].x,stars[i].y); ctx.lineTo(stars[j].x,stars[j].y); ctx.stroke();
}
}
}
if(!reduce) raf=requestAnimationFrame(frame);
}
size(); frame();
var to; window.addEventListener('resize',function(){ clearTimeout(to); to=setTimeout(function(){ cancelAnimationFrame(raf); size(); frame(); },180); });
document.addEventListener('visibilitychange',function(){
if(document.hidden){ cancelAnimationFrame(raf); } else if(!reduce){ raf=requestAnimationFrame(frame); }
});
}
var els = document.querySelectorAll('.reveal');
if(reduce || !('IntersectionObserver' in window)){
els.forEach(function(e){ e.classList.add('in'); });
} else {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
els.forEach(function(e){ io.observe(e); });
}
})();
</script>
</body>
</html>

4
promo/valeur.html
View file

@ -206,6 +206,8 @@
<a href="#remplace">Ce que ça remplace</a>
<a href="#preuve">La preuve</a>
<a href="#reserves">Nos réserves</a>
<a href="offres.html">Offres</a>
<a href="tarifs.html">Tarifs</a>
<a class="cta-mini" href="index.html">Capacités</a>
</nav>
</div>
@ -608,7 +610,7 @@
</svg>
<span>Set&#8209;OPS · Alliance Boréale — tout est libre</span>
</div>
<div><a href="index.html">Capacités</a> · <a href="#calcul">Le calcul</a> · <a href="#reserves">Nos réserves</a></div>
<div><a href="index.html">Capacités</a> · <a href="offres.html">Offres</a> · <a href="tarifs.html">Tarifs</a> · <a href="#calcul">Le calcul</a> · <a href="#reserves">Nos réserves</a></div>
</div>
</footer>