Daniel Allaire
131a30075d
Palette (promo/, les 4 pages) — les teintes rose, verte et violette etaient trop presentes une fois etalees au tour precedent. Reduction d'environ 40 % : rose .075 -> .044, vert .058 -> .034, violet .062 -> .036, arrets intermediaires abaisses dans la meme proportion, opacite de la nappe .aurora .44 -> .32. Geometrie inchangee : meme largeur, meme position, seule l'intensite baisse. 0 conflit CSS entre les quatre pages. forge-01 — la note precedente presentait comme une contradiction a trancher le fait que le plan dise `etat: planifie` et que le CHANGELOG du 2026-07-03 dise le branding « prouve sur forge-01 ». Ce n'en etait pas une : l'hote a ete cree, puis supprime. Le plan decrit l'etat COURANT, le CHANGELOG un etat PASSE — les deux disent vrai. La preuve reste valable, simplement non rejouable tant que l'hote n'est pas recree. roles/serveur_forgejo/README.md corrige. Valide : equilibre accolades/parentheses du CSS, 0 conflit CSS, 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(1500px 1020px at 76% 28%,rgba(255,111,196,.044) 0%,rgba(255,111,196,.021) 44%,transparent 82%),
|
||
radial-gradient(1620px 1120px at 20% 64%,rgba(92,255,157,.034) 0%,rgba(92,255,157,.016) 46%,transparent 84%),
|
||
radial-gradient(1400px 960px at 52% 106%,rgba(169,139,255,.036) 0%,rgba(169,139,255,.017) 44%,transparent 80%),
|
||
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(86px) saturate(140%);opacity:.32;
|
||
background:
|
||
radial-gradient(60% 80% at 22% 50%,var(--vert) 0%,transparent 78%),
|
||
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(58% 78% at 79% 57%,var(--rose) 0%,transparent 78%);
|
||
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>
|