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

Rend les quatre pages promo cohérentes

Browse source 
Les pages ayant été écrites l'une après l'autre, six dérives s'étaient
installées entre elles. Passe de normalisation :

- Adresse au lecteur : index.html tutoyait (17 occurrences), les trois autres
  vouvoyaient. Vouvoiement partout — ce sont des pages commerciales.
- Marque : trois pages affichaient « Alliance Boréale », tarifs affichait
  « Chezlepro · tarifs ». Désormais « Set-OPS · Chezlepro » dans la barre et
  « Chezlepro inc. · Saint-Bruno-de-Montarville, Québec » au pied.
- Navigation : quatre barres différentes (libellés et ordres distincts) →
  Capacités · Offres · Tarifs · Valeur + « Nous parler », identique partout,
  page courante marquée aria-current="page".
- Pieds de page : quatre structures → une seule, licence AGPLv3 incluse.
- Vocabulaire d'état : index utilisait .tag proven/soon, les autres
  .st ok/wip/road. Un seul système : Éprouvé · En chantier · Feuille de route.
- CSS : 35 sélecteurs partagés avaient des déclarations divergentes → 0 conflit.
  Deux étaient de vrais conflits de mise en page (.beats 4 colonnes contre 3,
  .stats grille contre flex) ; passés en repeat(auto-fit,minmax(...)), une seule
  règle qui s'adapte au nombre d'éléments.

Ajoute une section « Nos réserves » à index.html — seule page à en manquer,
alors que c'est celle qui affirme le plus de capacités. Les quatre assument
désormais leurs limites (mainteneur unique, épreuve de l'opérateur indépendant).

promo/README.md consigne les conventions communes en tableau et fournit le
script de détection des conflits CSS à lancer avant commit.

Validé : liens, balises, identifiants, équilibre CSS et node --check du JS sur
les quatre pages ; 0 conflit CSS ; prouver.py --verifier → CONFORME 16/16.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Daniel Allaire 2026-07-21 17:19:38 -04:00
parent 6458469098
commit 7cc6b1e878
5 changed files with 247 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
promo/README.md
View file

@ -17,6 +17,49 @@ dépendance réseau), sœurs de thème et liées entre elles par la barre de nav
- **Thème** : identité *Alliance Boréale* (ciel nocturne + aurore + constellation),
reprise des thèmes Keycloak/Forgejo du dépôt.
## Conventions communes — à respecter pour toute modification
Les quatre pages forment un ensemble navigable : ce qui suit doit rester **identique**
partout, sous peine de dérive (c'est déjà arrivé une fois, et il a fallu une passe
complète pour la résorber).
| Élément | Règle |
|---|---|
| **Adresse au lecteur** | **Vouvoiement**, sans exception. Ce sont des pages commerciales. |
| **Barre de navigation** | `Capacités · Offres · Tarifs · Valeur` + bouton « Nous parler ». Même ordre, mêmes libellés, page courante marquée `aria-current="page"`. |
| **Marque** | `Set-OPS · Chezlepro` dans la barre ; `Chezlepro inc. · Saint-Bruno-de-Montarville, Québec` au pied. |
| **`<title>`** | `Set-OPS — <Section> · Chezlepro` |
| **Vocabulaire d'état** | Trois valeurs seulement : **Éprouvé** (`.st.ok`), **En chantier** (`.st.wip`), **Feuille de route** (`.st.road`). Jamais d'autre mot, jamais d'autre classe. |
| **Fin de page** | Section `#reserves` (bloc `.honest`) puis bloc `.close`. Les quatre pages assument leurs limites. |
| **CSS partagé** | Un sélecteur commun (`section`, `.card`, `.sec-head`, `ul.does`, `.st`, `footer`…) doit avoir **la même déclaration** dans les quatre fichiers. |
Vérifier avant de committer :
```bash
python3 - <<'EOF'
import re,pathlib
from collections import defaultdict
r=defaultdict(dict)
for f in ['index.html','offres.html','tarifs.html','valeur.html']:
css=re.sub(r'/\*.*?\*/','',re.search(r'<style>(.*?)</style>',
pathlib.Path('promo',f).read_text(encoding='utf-8'),re.S).group(1),flags=re.S)
d,buf,sel=0,'',None
for c in css:
if c=='{':
d+=1
if d==1: sel,buf=buf.strip(),''
else: buf+=c
elif c=='}':
d-=1
if d==0:
if not sel.startswith('@'): r[sel][f]=re.sub(r'\s+','',buf)
buf=''
else: buf+=c
else: buf+=c
print("conflits CSS :",sum(1 for s,d in r.items() if len(set(d.values()))>1))
EOF
```
- **Honnêteté** : les capacités **éprouvées** (déployées sur VM réelles) sont distinguées
de ce qui est **en chantier** et de la **feuille de route**, conformément au principe
« ne jamais affirmer plus que ce qui est prouvé » (cf. `docs/audit/`). Les trois pages

211
promo/index.html
View file

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set-OPS — Ton écosystème numérique souverain, prouvé</title>
<meta name="description" content="Set-OPS : moteur Ansible d'écosystèmes numériques souverains — identité, PKI, DNS, données, courriel, edge TLS, observabilité, forge, sauvegardes, pare-feu. Sur ta propre grappe Proxmox, sans SaaS, prouvé.">
<title>Set-OPS — Capacités du moteur · Chezlepro</title>
<meta name="description" content="Set-OPS : moteur Ansible d'écosystèmes numériques souverains — identité, PKI, DNS, données, courriel, edge TLS, observabilité, forge, sauvegardes, pare-feu. Sur votre propre grappe Proxmox, sans SaaS, prouvé.">
<meta name="color-scheme" content="dark">
</head>
<body>
@ -14,7 +14,7 @@
--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;
--teal:#4fe3c1; --cyan:#56c2ff; --violet:#a98bff; --amber:#ffc46b;
--aurora:linear-gradient(100deg,var(--teal) 0%,var(--cyan) 46%,var(--violet) 100%);
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
@ -44,9 +44,7 @@
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}
/* ---- nav ---- */
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));
@ -55,25 +53,25 @@
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav nav{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:760px){.nav nav a:not(.cta-mini){display:none}}
/* ---- typographie ---- */
.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 ---- */
.hero{position:relative;padding:88px 0 76px}
.hero{position:relative;padding:82px 0 60px}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:800;letter-spacing:-.02em;max-width:16ch}
.hero .lede{margin-top:26px;font-size:clamp(1.05rem,1.9vw,1.28rem);max-width:64ch}
.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}
@ -83,60 +81,56 @@
.flow{margin-top:40px;font-family:var(--mono);font-size:.92rem;color:var(--dim);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.flow code{color:var(--teal);background:var(--panel);border:1px solid var(--line-2);padding:4px 10px;border-radius:7px;white-space:nowrap}
.flow .arw{color:var(--dim-2)}
/* ---- bandeaux de section ---- */
section{padding:76px 0;position:relative}
.sec-head{max-width:66ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.7rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.08rem}
section{padding:72px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- méthode : 4 temps ---- */
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.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.08rem;font-weight:680;margin:12px 0 8px}
.beat p{color:var(--dim);font-size:.95rem}
@media(max-width:880px){.beats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.beats{grid-template-columns:1fr}}
.beat h3{font-size:1.06rem;font-weight:680;margin:12px 0 8px}
.beat p{color:var(--dim);font-size:.94rem}
/* ---- piliers (capacités) ---- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;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,.5)}
.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 .kick{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card .dot{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(86,194,255,.12);border:1px solid rgba(86,194,255,.28)}
.card .dot svg{width:19px;height:19px}
.card h3{font-size:1.24rem;font-weight:720}
.card h3{font-size:1.2rem;font-weight:720;margin-bottom:10px}
.card .sub{color:var(--dim);font-size:.96rem;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 4px}
.chip{font-family:var(--mono);font-size:.76rem;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px 9px;border-radius:7px}
ul.does{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.95rem}
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}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:auto}
.tag.proven{color:#062b22;background:linear-gradient(90deg,var(--teal),#7ff0d6)}
.tag.soon{color:var(--violet);background:transparent;border:1px solid rgba(169,139,255,.5)}
.card .kick .tag{margin-left:auto}
.card .kick .st{margin-left:auto}
/* ---- console opérateur ---- */
.console{background:linear-gradient(180deg,rgba(10,13,36,.9),rgba(5,6,15,.9));border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px -30px rgba(0,0,0,.8)}
.console .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.console .bar i{width:11px;height:11px;border-radius:50%;display:block}
.console .bar i:nth-child(1){background:#ff5f57}.console .bar i:nth-child(2){background:#febc2e}.console .bar i:nth-child(3){background:#28c840}
.console .bar i:nth-child(1){background:#ff5f57}
.console .bar i:nth-child(2){background:#febc2e}
.console .bar i:nth-child(3){background:#28c840}
.console .bar span{margin-left:8px;font-family:var(--mono);font-size:.82rem;color:var(--dim)}
.console pre{margin:0;padding:22px 20px;font-family:var(--mono);font-size:.86rem;line-height:1.85;overflow-x:auto}
.console .c{color:var(--dim-2)} /* commentaire */
.console .p{color:var(--teal)} /* prompt/cmd */
.console .o{color:var(--ink)} /* sortie */
.console .g{color:var(--cyan)} /* mise en avant */
.console .c{color:var(--dim-2)}
/* commentaire */
.console .p{color:var(--teal)}
/* prompt/cmd */
.console .o{color:var(--ink)}
/* sortie */
.console .g{color:var(--cyan)}
/* mise en avant */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
/* ---- cycle de vie ---- */
.life{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.life .step{padding:24px 22px;border:1px solid var(--line-2);border-right:0;background:var(--panel-2);position:relative}
@ -146,7 +140,6 @@
.life .step h3{font-size:1.02rem;margin:10px 0 7px;font-weight:680}
.life .step p{color:var(--dim);font-size:.9rem}
@media(max-width:820px){.life{grid-template-columns:1fr}.life .step{border-right:1px solid var(--line-2);border-bottom:0}.life .step:first-child{border-radius:15px 15px 0 0}.life .step:last-child{border-radius:0 0 15px 15px}}
/* ---- preuve : traits ---- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.proof{grid-template-columns:1fr}}
@ -155,34 +148,42 @@
.pf h3 svg{width:20px;height:20px}
.pf p{color:var(--dim);font-size:.95rem}
.pf code{font-family:var(--mono);color:var(--teal);font-size:.85em}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.stat{flex:1 1 150px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:18px 20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:34px}
.stat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:22px}
.stat b{display:block;font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat b .grad{font-weight:800}
.stat span{color:var(--dim);font-size:.86rem}
/* ---- feuille de route ---- */
.roadmap{display:flex;flex-wrap:wrap;gap:14px}
.rm{flex:1 1 260px;border:1px dashed rgba(169,139,255,.4);border-radius:14px;padding:20px 22px;background:rgba(169,139,255,.05)}
.rm .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.rm h3{font-size:1.05rem;margin:9px 0 6px;font-weight:680}
.rm p{color:var(--dim);font-size:.9rem}
/* ---- clôture ---- */
.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)}
.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}
.closing{text-align:center;padding:96px 0 40px}
.closing h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.02em;max-width:18ch;margin-inline:auto}
.closing p{margin:20px auto 0;color:var(--dim);max-width:52ch;font-size:1.08rem}
footer{border-top:1px solid var(--line-2);padding:38px 0;color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items: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 .brand{opacity:.95}
footer .meta{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.86rem}
footer .meta span b{color:var(--ink);font-weight:600}
footer a{color:var(--cyan);text-decoration:none}
footer a{color:var(--dim);text-decoration:none}
/* ---- révélations au scroll ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
@ -198,7 +199,7 @@
<!-- =================== NAV =================== -->
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Set-OPS — Alliance Boréale">
<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>
@ -211,16 +212,14 @@
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Alliance Boréale</span></span>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
</a>
<nav>
<a href="#capacites">Capacités</a>
<a href="#methode">Méthode</a>
<a href="#preuve">Preuve</a>
<a href="index.html" aria-current="page">Capacités</a>
<a href="offres.html">Offres</a>
<a href="tarifs.html">Tarifs</a>
<a href="valeur.html">Valeur</a>
<a class="cta-mini" href="#demarrer">Démarrer</a>
<a class="cta-mini" href="https://chezlepro.ca/contact">Nous parler</a>
</nav>
</div>
</header>
@ -230,11 +229,11 @@
<div class="hero">
<div class="wrap">
<span class="eyebrow">Alliance Boréale · moteur d'écosystèmes souverains</span>
<h1>Ton écosystème numérique, <span class="grad">souverain</span> — et prouvé.</h1>
<p class="lede">Set&#8209;OPS est un moteur Ansible qui <b style="color:var(--ink)">construit et exploite tout un écosystème interne</b> — identité, confiance, DNS, données, courriel, observabilité, forge — sur <b style="color:var(--ink)">ta propre grappe Proxmox</b>. À partir d'un plan déclaratif. Sans SaaS. Sans conteneur propriétaire. Et exploitable <b style="color:var(--ink)">sans aucune IA</b>.</p>
<h1>Votre écosystème numérique, <span class="grad">souverain</span> — et prouvé.</h1>
<p class="lede">Set&#8209;OPS est un moteur Ansible qui <b style="color:var(--ink)">construit et exploite tout un écosystème interne</b> — identité, confiance, DNS, données, courriel, observabilité, forge — sur <b style="color:var(--ink)">votre propre grappe Proxmox</b>. À partir d'un plan déclaratif. Sans SaaS. Sans conteneur propriétaire. Et exploitable <b style="color:var(--ink)">sans aucune IA</b>.</p>
<div class="cta-row">
<a class="btn btn-primary" href="#capacites">Voir tout ce que tu peux faire →</a>
<a class="btn btn-ghost" href="#demarrer">De zéro à ton écosystème</a>
<a class="btn btn-primary" href="#capacites">Voir tout ce qu'il sait faire →</a>
<a class="btn btn-ghost" href="#demarrer">De zéro à votre écosystème</a>
</div>
<div class="flow" aria-label="flux de travail">
<code>édite le plan</code><span class="arw">→</span>
@ -250,11 +249,11 @@
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">La méthode</span>
<h2>Tu décris. Le moteur génère. Ansible déploie. <span class="grad">La preuve suit.</span></h2>
<p>Set&#8209;OPS se pilote par un <b style="color:var(--ink)">plan</b>, pas par l'édition de l'inventaire. Les registres sont la source unique de vérité ; l'inventaire Ansible en est dérivé. Tu ne touches jamais <code style="font-family:var(--mono);color:var(--teal)">hosts.yml</code> à la main.</p>
<h2>Vous décrivez. Le moteur génère. Ansible déploie. <span class="grad">La preuve suit.</span></h2>
<p>Set&#8209;OPS se pilote par un <b style="color:var(--ink)">plan</b>, pas par l'édition de l'inventaire. Les registres sont la source unique de vérité ; l'inventaire Ansible en est dérivé. Vous ne touchez jamais <code style="font-family:var(--mono);color:var(--teal)">hosts.yml</code> à la main.</p>
</div>
<div class="beats">
<div class="beat reveal"><div class="n">01 · décrire</div><h3>Un plan déclaratif</h3><p>Serveurs, applications, bases, domaines, nomenclature — des registres lisibles par la machine, ta seule source de vérité.</p></div>
<div class="beat reveal"><div class="n">01 · décrire</div><h3>Un plan déclaratif</h3><p>Serveurs, applications, bases, domaines, nomenclature — des registres lisibles par la machine, votre seule source de vérité.</p></div>
<div class="beat reveal"><div class="n">02 · générer</div><h3>Un inventaire dérivé</h3><p>VMID, IP, VLAN et passerelle sont <b style="color:var(--ink)">dérivés</b> de la fonction. <code style="font-family:var(--mono);color:var(--teal)">make instancier</code> montre le diff avant d'appliquer.</p></div>
<div class="beat reveal"><div class="n">03 · déployer</div><h3>Par groupes, en couches</h3><p>Chaque groupe a son playbook homonyme. L'orchestrateur déploie socle → PKI → services → apps → agents, dans l'ordre.</p></div>
<div class="beat reveal"><div class="n">04 · prouver</div><h3>Une preuve rejouable</h3><p><code style="font-family:var(--mono);color:var(--teal)">make prouver</code> rejoue les vérifications et produit un rapport horodaté. Le dépôt n'affirme jamais plus qu'il ne prouve.</p></div>
@ -268,9 +267,9 @@
<section id="capacites">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Tout ce que tu peux faire</span>
<span class="eyebrow">Tout ce qu'il sait faire</span>
<h2>Sept piliers. Un écosystème complet, <span class="grad">natif, chiffré, relié.</span></h2>
<p>Tout ce qu'un hébergeur met en ligne, Set&#8209;OPS le tient en interne — en logiciel libre, sur systemd et paquets, sans dépendance à un géant. Voici, pilier par pilier, ce que tu déploies et exploites. <b style="color:var(--ink)">Le badge <span class="tag proven" style="margin:0">Éprouvé</span> marque ce qui tourne sur des VM réelles</b> ; <span class="tag soon" style="margin:0">Feuille de route</span> ce qui est planifié.</p>
<p>Tout ce qu'un hébergeur met en ligne, Set&#8209;OPS le tient en interne — en logiciel libre, sur systemd et paquets, sans dépendance à un géant. Voici, pilier par pilier, ce qu'il déploie et exploite. <b style="color:var(--ink)">Le badge <span class="st ok" style="margin:0">Éprouvé</span> marque ce qui tourne sur des VM réelles</b> ; <span class="st road" style="margin:0">Feuille de route</span> ce qui est planifié.</p>
</div>
<div class="pillars">
@ -280,13 +279,13 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
<h3>Identité &amp; accès</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Une identité, un mot de passe, pour tout le parc.</p>
<div class="chips"><span class="chip">OpenLDAP</span><span class="chip">Keycloak</span><span class="chip">oauth2-proxy</span><span class="chip">OIDC · RBAC</span></div>
<ul class="does">
<li><b>Un annuaire central</b> (OpenLDAP) source unique des identités.</li>
<li><b>SSO web</b> via Keycloak, qui fédère l'annuaire — « se connecter avec ton organisation ».</li>
<li><b>SSO web</b> via Keycloak, qui fédère l'annuaire — « se connecter avec votre organisation ».</li>
<li><b>Mets n'importe quelle app derrière le SSO</b> avec oauth2-proxy, même sans OIDC natif.</li>
<li><b>RBAC</b> : des rôles de realm pilotent les niveaux d'accès (ex. Grafana Admin/Editor/Viewer).</li>
</ul>
@ -297,9 +296,9 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><path d="M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5z"/><path d="M9 12l2 2 4-4"/></svg></span>
<h3>Confiance &amp; PKI</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Ta propre autorité de certification. Tout le trafic interne, chiffré et vérifié.</p>
<p class="sub">Votre propre autorité de certification. Tout le trafic interne, chiffré et vérifié.</p>
<div class="chips"><span class="chip">step-ca</span><span class="chip">ACME</span><span class="chip">client_pki</span><span class="chip">mTLS</span></div>
<ul class="does">
<li><b>Une AC interne</b> (step-ca) qui émet les certificats par ACME.</li>
@ -314,7 +313,7 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg></span>
<h3>Nommage &amp; réseau</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Un DNS interne cohérent, et un réseau convergé multi-tenant.</p>
<div class="chips"><span class="chip">PowerDNS</span><span class="chip">Unbound</span><span class="chip">VLAN dérivé</span><span class="chip">make devis-reseau</span></div>
@ -331,7 +330,7 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg></span>
<h3>Données</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Bases relationnelles et cache, provisionnés depuis le registre.</p>
<div class="chips"><span class="chip">PostgreSQL</span><span class="chip">Redis</span><span class="chip">TLS verify-full</span><span class="chip">binding app→base</span></div>
@ -348,9 +347,9 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span>
<h3>Courriel souverain</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Recevoir <i>et</i> envoyer, de bout en bout, sur ton infra.</p>
<p class="sub">Recevoir <i>et</i> envoyer, de bout en bout, sur votre infrastructure.</p>
<div class="chips"><span class="chip">Postfix</span><span class="chip">Dovecot</span><span class="chip">rspamd</span><span class="chip">DKIM · SASL</span></div>
<ul class="does">
<li><b>MTA Postfix</b> + soumission <code>:587</code> authentifiée (SASL déléguée à Dovecot).</li>
@ -365,7 +364,7 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><path d="M4 12h16M4 12a8 8 0 0116 0M4 12a8 8 0 0016 0"/><rect x="9" y="9" width="6" height="6" rx="1" fill="#56c2ff" stroke="none" opacity=".5"/></svg></span>
<h3>Reverse-proxy &amp; TLS</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Déclare une exposition — tout le reste se dérive.</p>
<div class="chips"><span class="chip">nginx edge</span><span class="chip">TLS step-ca</span><span class="chip">X-Forwarded</span><span class="chip">WAF</span></div>
@ -382,7 +381,7 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><path d="M3 17l5-6 4 4 5-8 4 6"/><path d="M3 21h18"/></svg></span>
<h3>Observabilité &amp; supervision</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Voir toute la flotte : métriques, journaux, tableaux de bord, impact.</p>
<div class="chips"><span class="chip">Prometheus</span><span class="chip">Loki</span><span class="chip">Grafana</span><span class="chip">Icinga2 · BPM</span></div>
@ -399,9 +398,9 @@
<div class="kick">
<span class="dot"><svg viewBox="0 0 24 24" fill="none" stroke="#56c2ff" stroke-width="1.8"><path d="M8 18l-5-6 5-6M16 6l5 6-5 6M13 4l-2 16"/></svg></span>
<h3>Applicatif &amp; forge</h3>
<span class="tag proven">Éprouvé</span>
<span class="st ok">Éprouvé</span>
</div>
<p class="sub">Tes services internes, adossés à l'identité commune.</p>
<p class="sub">Vos services internes, adossés à l'identité commune.</p>
<div class="chips"><span class="chip">Forgejo</span><span class="chip">SSO OIDC</span><span class="chip">branding</span></div>
<ul class="does">
<li><b>Forge Git Forgejo</b> : dépôts, CI, wiki — <b>branchée au SSO</b>, comptes auto-créés depuis l'annuaire.</li>
@ -478,7 +477,7 @@
<div class="reveal">
<span class="eyebrow">La console de l'opérateur</span>
<h2 style="font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:750;letter-spacing:-.015em;margin-top:14px">De la grappe nue à <span class="grad">l'écosystème vivant.</span></h2>
<p class="lede" style="margin-top:16px">Tout passe par <code style="font-family:var(--mono);color:var(--teal)">make</code> et un plan. Un modèle générique <code style="font-family:var(--mono);color:var(--teal)">socle</code> — DNS, AC/PKI, edge TLS, courriel — est prêt à copier, renseigner, déployer. Puis tu vis dans le plan.</p>
<p class="lede" style="margin-top:16px">Tout passe par <code style="font-family:var(--mono);color:var(--teal)">make</code> et un plan. Un modèle générique <code style="font-family:var(--mono);color:var(--teal)">socle</code> — DNS, AC/PKI, edge TLS, courriel — est prêt à copier, renseigner, déployer. Puis vous vivez dans le plan.</p>
<ul class="does" style="margin-top:20px">
<li><b>Golden template</b> Debian 13 construit une fois, cloné pour chaque VM.</li>
<li><b>Clone Proxmox + cloud-init</b> pour l'identité initiale, puis conformité par groupes.</li>
@ -562,39 +561,55 @@
</div>
<div class="roadmap reveal">
<div class="rm"><div class="k">Collaboration</div><h3>Nextcloud &amp; Collabora</h3><p>Fichiers, agenda, édition en ligne — sous la même identité SSO. Build prioritaire, offre « maison-OBNL ».</p></div>
<div class="rm"><div class="k">Couche web</div><h3>Frontal &amp; dorsal applicatifs</h3><p>Présentation (UI, assets) et application (API), servis derrière l'edge — pour mettre tes propres webapps en ligne.</p></div>
<div class="rm"><div class="k">Couche web</div><h3>Frontal &amp; dorsal applicatifs</h3><p>Présentation (UI, assets) et application (API), servis derrière l'edge — pour mettre vos propres applications web en ligne.</p></div>
<div class="rm"><div class="k">Certification</div><h3>Label Souverain · Résilient · Exemplaire</h3><p>Trois niveaux accumulatifs pour attester la qualité d'un écosystème — garde-fou social inclus.</p></div>
</div>
</div>
</section>
<!-- =================== RÉSERVES =================== -->
<section id="reserves">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Honnêteté</span>
<h2>Ce que nous ne prétendons pas.</h2>
<p>La règle du projet est écrite dans son dépôt : <i>ne jamais affirmer plus que ce qu'on prouve.</i> Elle s'applique aussi à cette page.</p>
</div>
<div class="honest reveal">
<h3>Nos réserves, en clair</h3>
<ul>
<li><b>« Éprouvé » et « feuille de route » ne se mélangent pas.</b> Les capacités marquées éprouvées ont été déployées et vérifiées sur des machines réelles ; les autres sont annoncées comme des intentions, jamais comme des livrables.</li>
<li><b>Il faut quelqu'un.</b> Set&#8209;OPS réduit énormément le travail d'exploitation ; il ne le supprime pas. Une personne responsable reste nécessaire, à l'interne ou sous contrat.</li>
<li><b>Le projet repose encore sur un seul mainteneur.</b> C'est le risque principal, et nous le nommons. La documentation, les procédures et le registre de preuves existent précisément pour que le savoir ne vive pas dans une seule tête.</li>
<li><b>Une épreuve est en cours.</b> Un administrateur système indépendant doit installer l'ensemble à partir de la seule documentation, sans aide et sans IA. Le protocole est public, le résultat sera publié — <i>y compris s'il échoue.</i></li>
</ul>
</div>
</div>
</section>
<!-- =================== CLÔTURE =================== -->
<div class="closing wrap">
<div class="reveal">
<h2>Reprends la <span class="grad">souveraineté</span> de ton infrastructure.</h2>
<p>Un plan, ta grappe Proxmox, et tout un écosystème numérique — libre, chiffré, prouvé. Sous le ciel de l'Alliance Boréale.</p>
<div class="cta-row" style="justify-content:center">
<a class="btn btn-primary" href="#capacites">Explorer les capacités</a>
<a class="btn btn-ghost" href="#top">Revenir en haut ↑</a>
<div class="close">
<div class="wrap reveal">
<h2>Reprenez le contrôle de votre <span class="grad">infra numérique</span>.</h2>
<p>Un plan, votre grappe Proxmox, et tout un écosystème numérique — libre, chiffré, prouvé. Sous le ciel de l'Alliance Boréale.</p>
<div class="cta-row">
<a class="btn btn-primary" href="offres.html">Voir les offres &rarr;</a>
<a class="btn btn-ghost" href="valeur.html#calcul">Simuler le coût</a>
</div>
</div>
</div>
<footer>
<div class="wrap">
<span class="brand">
<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="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"/>
<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>
Set&#8209;OPS
</span>
<div class="meta">
<span><b>Alliance Boréale</b> · Chezlepro — Daniel Allaire</span>
<span>Licence <b>AGPLv3</b></span>
<span><i>Tout est libre.</i></span>
<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&#8209;OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</a></div>
</div>
</footer>

69
promo/offres.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set-OPS — Les offres</title>
<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>
@ -43,9 +43,7 @@
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)}
@ -53,22 +51,22 @@
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav nav{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 58px}
.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:16ch}
.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}
@ -76,21 +74,17 @@
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--panel)}
.btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px)}
section{padding:72px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- principe modulaire ---- */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.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}
@media(max-width:820px){.beats{grid-template-columns:1fr}}
/* ---- offres ---- */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:880px){.offres{grid-template-columns:1fr}}
@ -100,32 +94,29 @@
.offre.phare{border-color:rgba(79,227,193,.42);background:linear-gradient(150deg,rgba(79,227,193,.07),rgba(169,139,255,.05)),var(--panel)}
.offre.phare::before{opacity:1;height:3px}
.offre .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.offre h3{font-size:1.32rem;font-weight:740}
.offre 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:.96rem;margin-top:12px}
.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:.87rem;border-top:1px solid var(--line-2);margin-top:20px}
.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}
.card:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.4)}
.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.16rem;font-weight:720;margin-bottom:10px}
.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}}
@ -133,10 +124,9 @@
.lv .rank{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.lv h3{font-size:1.22rem;font-weight:740;margin:10px 0 10px;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv p{color:var(--dim);font-size:.94rem}
/* ---- tarification ---- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.94rem}
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}
@ -144,23 +134,19 @@
tbody td:first-child{color:var(--ink);font-weight:640;white-space:nowrap}
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:76ch}
.note b{color:var(--dim)}
.honest{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;padding:24px 26px}
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
.honest li{color:var(--dim);font-size:.96rem}
.honest 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;align-items:center;justify-content:space-between}
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){
@ -175,7 +161,7 @@
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Set-OPS — Alliance Boréale">
<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>
@ -188,15 +174,14 @@
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Alliance Boréale</span></span>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
</a>
<nav>
<a href="#offres">Les offres</a>
<a href="#services">Accompagnement</a>
<a href="#label">Le label</a>
<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="index.html">Capacités</a>
<a class="cta-mini" href="https://chezlepro.ca/contact">Nous parler</a>
</nav>
</div>
</header>
@ -721,13 +706,13 @@
<div class="wrap">
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/>
</svg>
<span>Set&#8209;OPS · Alliance Boréale — tout est libre</span>
<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="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a> · <a href="#reserves">Nos réserves</a></div>
<div><a href="index.html">Capacités</a> · <a href="offres.html">Offres</a> · <a href="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a></div>
<div>Set&#8209;OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</a></div>
</div>
</footer>

85
promo/tarifs.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chezlepro — Tarifs des offres souveraines</title>
<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>
@ -43,9 +43,7 @@
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)}
@ -56,41 +54,37 @@
.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 56px}
.hero{position:relative;padding:82px 0 60px}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,5.6vw,4.3rem);font-weight:800;letter-spacing:-.02em;max-width:17ch}
.hero .lede{margin-top:26px;font-size:clamp(1.05rem,1.9vw,1.24rem);max-width:64ch}
.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:70px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:40px}
.sec-head h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.06rem}
section{padding:72px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- 3 postes ---- */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.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.05rem;font-weight:680;margin:12px 0 8px}
.beat p{color:var(--dim);font-size:.93rem}
@media(max-width:820px){.beats{grid-template-columns:1fr}}
.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}}
@ -99,21 +93,20 @@
.offre::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
.offre.phare{border-color:rgba(79,227,193,.42);background:linear-gradient(150deg,rgba(79,227,193,.07),rgba(169,139,255,.05)),var(--panel)}
.offre.phare::before{opacity:1;height:3px}
.offre h3{font-size:1.24rem;font-weight:740}
.offre 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:14px}
.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:8px}
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.93rem}
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;margin-top:20px;color:var(--dim-2);font-size:.86rem;border-top:1px solid var(--line-2)}
.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}}
@ -125,7 +118,6 @@
.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}
@ -136,27 +128,22 @@
tbody td:first-child{color:var(--ink);font-weight:640;white-space:nowrap}
td.num{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
td.free{font-family:var(--mono);color:var(--teal);font-weight:700;white-space:nowrap}
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:78ch}
.note{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:84px 0 92px}
.close h2{font-size:clamp(1.85rem,4.4vw,3rem);font-weight:800;letter-spacing:-.02em;max-width:20ch;margin-inline:auto}
.close p{margin:20px auto 0;color:var(--dim);max-width:56ch;font-size:1.05rem}
.close{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:.89rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
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){
@ -171,7 +158,7 @@
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Chezlepro inc.">
<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>
@ -184,14 +171,14 @@
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Chezlepro <b>·</b> <span style="color:var(--dim);font-weight:500">tarifs</span></span>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
</a>
<nav>
<a href="#forfaits">Forfaits</a>
<a href="#exploitation">Exploitation</a>
<a href="#materiel">Matériel</a>
<a href="#inclus">Sans supplément</a>
<a class="cta-mini" href="#contact">Un diagnostic</a>
<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>
@ -613,13 +600,13 @@
<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>
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/></svg>
<span>Chezlepro inc. · Saint-Bruno-de-Montarville, Québec</span>
</div>
<div><a href="https://chezlepro.ca">chezlepro.ca</a> · <a href="index.html">Le moteur</a> · <a href="valeur.html">Valeur</a> · <a href="#reserves">Conditions</a></div>
<div><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&#8209;OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</a></div>
</div>
</footer>

71
promo/valeur.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set-OPS — La valeur, chiffrée et prouvée</title>
<title>Set-OPS — La valeur · Chezlepro</title>
<meta name="description" content="Ce que Set-OPS remplace, ce qu'il coûte, ce qu'il prouve. Calculateur de coût total, tableau des équivalences SaaS, registre d'affirmations vérifiables. Infrastructure numérique souveraine sur votre propre matériel.">
<meta name="color-scheme" content="dark">
</head>
@ -43,9 +43,7 @@
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)}
@ -53,19 +51,19 @@
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav nav{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:860px){.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}
@ -76,13 +74,11 @@
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--panel)}
.btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px)}
section{padding:72px 0;position:relative}
.sec-head{max-width:68ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
/* ---- calculateur ---- */
.calc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
@ -94,7 +90,6 @@
.field label b{color:var(--ink);font-family:var(--mono);font-size:.95rem;font-weight:600}
.field input[type=range]{width:100%;accent-color:#56c2ff;height:22px;cursor:pointer}
.field .sub{font-size:.78rem;color:var(--dim-2);margin-top:5px}
.results{display:grid;gap:18px}
.verdict{background:linear-gradient(135deg,rgba(79,227,193,.11),rgba(169,139,255,.09));border:1px solid rgba(86,194,255,.3);border-radius:18px;padding:26px}
.verdict .big{font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
@ -111,25 +106,22 @@
.lines li{display:flex;justify-content:space-between;gap:12px;color:var(--dim)}
.lines li span:last-child{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lines li.zero span:last-child{color:var(--teal);font-weight:700}
.note{font-size:.86rem;color:var(--dim-2);margin-top:18px;max-width:74ch}
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:76ch}
.note b{color:var(--dim)}
/* ---- tableau remplace ---- */
.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:680px;font-size:.94rem}
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}
tbody td.libre{color:var(--dim);font-family:var(--mono);font-size:.86rem}
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.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)}
/* ---- preuve ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:34px}
.stat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:22px}
.stat .n{font-size:2rem;font-weight:800;letter-spacing:-.02em;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat .l{color:var(--dim);font-size:.9rem;margin-top:5px}
@ -142,36 +134,31 @@
.term .c{color:var(--cyan)}
.term .g{color:var(--teal)}
.term .w{color:var(--ink)}
/* ---- colonnes génériques ---- */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.4)}
.card{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.18rem;font-weight:720;margin-bottom:10px}
.card p{color:var(--dim);font-size:.96rem}
ul.does{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.95rem}
.card h3{font-size:1.2rem;font-weight:720;margin-bottom:10px}
.card p{color:var(--dim);font-size:.95rem}
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}
.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.05rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
.honest li{color:var(--dim);font-size:.96rem}
.honest 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;align-items:center;justify-content:space-between}
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){
@ -186,7 +173,7 @@
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="Set-OPS — Alliance Boréale">
<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>
@ -199,16 +186,14 @@
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
</svg>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Alliance Boréale</span></span>
<span>Set&#8209;OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
</a>
<nav>
<a href="#calcul">Le calcul</a>
<a href="#remplace">Ce que ça remplace</a>
<a href="#preuve">La preuve</a>
<a href="#reserves">Nos réserves</a>
<a href="index.html">Capacités</a>
<a href="offres.html">Offres</a>
<a href="tarifs.html">Tarifs</a>
<a class="cta-mini" href="index.html">Capacités</a>
<a href="valeur.html" aria-current="page">Valeur</a>
<a class="cta-mini" href="https://chezlepro.ca/contact">Nous parler</a>
</nav>
</div>
</header>
@ -604,13 +589,13 @@
<div class="wrap">
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/>
</svg>
<span>Set&#8209;OPS · Alliance Boréale — tout est libre</span>
<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="#calcul">Le calcul</a> · <a href="#reserves">Nos réserves</a></div>
<div><a href="index.html">Capacités</a> · <a href="offres.html">Offres</a> · <a href="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a></div>
<div>Set&#8209;OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</a></div>
</div>
</footer>