Daniel Allaire
f8e754c0b0
Palette (promo/, les 4 pages) — ajoute --rose:#ff6fc4 (frange magenta) et
--vert:#5cff9d (vert fluo), uniquement dans les DÉGRADÉS FONCÉS : fond fixe du
corps, nappe .aurora dérivante, filets .rule. Opacités de 5,5 % à 8,5 %, une
teinte et non un motif. Le vert entre par la gauche et le rose sort par la
droite, comme une vraie aurore. --aurora (texte et boutons) est inchangé :
l'identité de marque ne bouge pas. Appliqué identiquement aux quatre fichiers,
0 conflit CSS après coup.
Thème Forgejo (alliance.css, 29 → 118 lignes) — la feuille étant injectée par
templates/custom/header.tmpl sur toutes les pages, le wiki est couvert sans
feuille distincte. Réorganisée en deux sections de risque explicite :
§1 Variables — couleurs officielles + ciel nocturne. Sûr, résiste aux
mises à jour. ÉPROUVÉ sur forge-01 (CHANGELOG 2026-07-03).
§2 Décor — fond aurore, filet sous les titres, citations, tableaux et code
en ligne de .markup. Fragile (classes internes). JAMAIS RENDU.
Supprimer §2 ramène au thème sobre. Le ciel nocturne ne s'applique qu'aux
thèmes sombres, pour ne pas casser le thème clair.
docs/theme-forgejo-hors-flotte.md — pose manuelle sur une instance Forgejo non
gérée par Set-OPS (la forge historique qui héberge ce dépôt et son wiki).
Forgejo n'ayant aucun réglage web pour le CSS, il faut déposer la feuille sur
le serveur. La procédure ne duplique aucun fichier : elle pointe vers ceux du
rôle. Inclut la détection du répertoire custom, un garde-fou pour ne pas
écraser un header.tmpl existant (ajout de ligne), la vérification curl et la
marche arrière.
Corrige deux affirmations fausses de ma part :
- « thème jamais rendu par un Forgejo réel » était faux pour §1, éprouvée.
Le statut est désormais donné section par section.
- Contradiction consignée sur forge-01 : le plan la dit `etat: planifie`, le
CHANGELOG 2026-07-03 dit le branding « prouvé sur forge-01 ». Les deux ne
peuvent pas être vrais ; l'écart est écrit dans le README du rôle, à trancher.
Validé : équilibre accolades/parenthèses du CSS, 0 conflit CSS entre les quatre
pages, lien de doc résolu, ansible-lint 0 échec sur 485 fichiers,
prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
679 lines
34 KiB
HTML
679 lines
34 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Set-OPS — Les tarifs · Chezlepro</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;
|
||
--rose:#ff6fc4; --vert:#5cff9d; /* frange magenta + vert fluo de l'aurore */
|
||
--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%),
|
||
radial-gradient(780px 540px at 97% 38%,rgba(255,111,196,.085) 0%,transparent 62%),
|
||
radial-gradient(840px 580px at 3% 72%,rgba(92,255,157,.065) 0%,transparent 62%),
|
||
radial-gradient(700px 500px at 50% 112%,rgba(169,139,255,.07) 0%,transparent 60%),
|
||
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(34% 52% at 6% 52%,var(--vert) 0%,transparent 66%),
|
||
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%),
|
||
radial-gradient(32% 48% at 95% 62%,var(--rose) 0%,transparent 66%);
|
||
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 nav a[aria-current="page"]{color:var(--ink);font-weight:640}
|
||
.nav nav a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px;background:var(--aurora);margin-top:3px}
|
||
.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 60px}
|
||
.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:17ch}
|
||
.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;border:0;margin:0;background:linear-gradient(90deg,rgba(92,255,157,.28),rgba(86,194,255,.22) 34%,rgba(255,111,196,.24) 68%,transparent)}
|
||
/* ---- 3 postes ---- */
|
||
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,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}
|
||
/* ---- 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.26rem;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:13px}
|
||
.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: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:.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:76ch}
|
||
.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: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 28px;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 — Chezlepro">
|
||
<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‑OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
|
||
</a>
|
||
<nav>
|
||
<a href="index.html">Capacités</a>
|
||
<a href="offres.html">Offres</a>
|
||
<a href="tarifs.html" aria-current="page">Tarifs</a>
|
||
<a href="valeur.html">Valeur</a>
|
||
<a class="cta-mini" href="https://chezlepro.ca/contact">Nous parler</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 →</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‑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‑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 & 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 :</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é & 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‑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 & 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‑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 →</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="index.html">Capacités</a> · <a href="offres.html">Offres</a> · <a href="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a></div>
|
||
<div>Set‑OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</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>
|