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>
785 lines
38 KiB
HTML
785 lines
38 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 offres · Chezlepro</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;
|
||
--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: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 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)}
|
||
/* ---- principe modulaire ---- */
|
||
.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 ---- */
|
||
.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.26rem;font-weight:740}
|
||
.offre .who{color:var(--cyan);font-size:.87rem;font-weight:600;margin-top:4px}
|
||
.offre .sub{color:var(--dim);font-size:.95rem;margin-top:13px}
|
||
.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:.86rem;border-top:1px solid var(--line-2)}
|
||
.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,box-shadow .2s ease}
|
||
.card:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.42);box-shadow:0 18px 50px -24px rgba(86,194,255,.45)}
|
||
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
|
||
.card h3{font-size:1.2rem;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: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}
|
||
.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:.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" aria-current="page">Offres</a>
|
||
<a href="tarifs.html">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">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 →</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 Workspace ou Microsoft 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‑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‑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‑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‑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 →</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>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>
|