Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
<!doctype html>
< html lang = "fr" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< title > Set-OPS — La valeur · Chezlepro< / title >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< 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 >
< 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;
Aurore rose-mauve et vert fluo ; thème Forgejo étendu au wiki
Palette (promo/, les 4 pages) — ajoute --rose:#ff6fc4 (frange magenta) et
--vert:#5cff9d (vert fluo), uniquement dans les DÉGRADÉS FONCÉS : fond fixe du
corps, nappe .aurora dérivante, filets .rule. Opacités de 5,5 % à 8,5 %, une
teinte et non un motif. Le vert entre par la gauche et le rose sort par la
droite, comme une vraie aurore. --aurora (texte et boutons) est inchangé :
l'identité de marque ne bouge pas. Appliqué identiquement aux quatre fichiers,
0 conflit CSS après coup.
Thème Forgejo (alliance.css, 29 → 118 lignes) — la feuille étant injectée par
templates/custom/header.tmpl sur toutes les pages, le wiki est couvert sans
feuille distincte. Réorganisée en deux sections de risque explicite :
§1 Variables — couleurs officielles + ciel nocturne. Sûr, résiste aux
mises à jour. ÉPROUVÉ sur forge-01 (CHANGELOG 2026-07-03).
§2 Décor — fond aurore, filet sous les titres, citations, tableaux et code
en ligne de .markup. Fragile (classes internes). JAMAIS RENDU.
Supprimer §2 ramène au thème sobre. Le ciel nocturne ne s'applique qu'aux
thèmes sombres, pour ne pas casser le thème clair.
docs/theme-forgejo-hors-flotte.md — pose manuelle sur une instance Forgejo non
gérée par Set-OPS (la forge historique qui héberge ce dépôt et son wiki).
Forgejo n'ayant aucun réglage web pour le CSS, il faut déposer la feuille sur
le serveur. La procédure ne duplique aucun fichier : elle pointe vers ceux du
rôle. Inclut la détection du répertoire custom, un garde-fou pour ne pas
écraser un header.tmpl existant (ajout de ligne), la vérification curl et la
marche arrière.
Corrige deux affirmations fausses de ma part :
- « thème jamais rendu par un Forgejo réel » était faux pour §1, éprouvée.
Le statut est désormais donné section par section.
- Contradiction consignée sur forge-01 : le plan la dit `etat: planifie`, le
CHANGELOG 2026-07-03 dit le branding « prouvé sur forge-01 ». Les deux ne
peuvent pas être vrais ; l'écart est écrit dans le README du rôle, à trancher.
Validé : équilibre accolades/parenthèses du CSS, 0 conflit CSS entre les quatre
pages, lien de doc résolu, ansible-lint 0 échec sur 485 fichiers,
prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 17:42:52 -04:00
--rose:#ff6fc4; --vert:#5cff9d; /* frange magenta + vert fluo de l'aurore */
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
--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%),
Aurore : opacites reduites ; etat de forge-01 elucide
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>
2026-07-22 11:57:50 -04:00
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%),
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
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;
Aurore : opacites reduites ; etat de forge-01 elucide
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>
2026-07-22 11:57:50 -04:00
filter:blur(86px) saturate(140%);opacity:.32;
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
background:
Aurore : opacites reduites ; etat de forge-01 elucide
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>
2026-07-22 11:57:50 -04:00
radial-gradient(60% 80% at 22% 50%,var(--vert) 0%,transparent 78%),
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
radial-gradient(40% 60% at 20% 30%,var(--teal) 0%,transparent 70%),
radial-gradient(45% 70% at 55% 20%,var(--cyan) 0%,transparent 70%),
Aurore rose-mauve et vert fluo ; thème Forgejo étendu au wiki
Palette (promo/, les 4 pages) — ajoute --rose:#ff6fc4 (frange magenta) et
--vert:#5cff9d (vert fluo), uniquement dans les DÉGRADÉS FONCÉS : fond fixe du
corps, nappe .aurora dérivante, filets .rule. Opacités de 5,5 % à 8,5 %, une
teinte et non un motif. Le vert entre par la gauche et le rose sort par la
droite, comme une vraie aurore. --aurora (texte et boutons) est inchangé :
l'identité de marque ne bouge pas. Appliqué identiquement aux quatre fichiers,
0 conflit CSS après coup.
Thème Forgejo (alliance.css, 29 → 118 lignes) — la feuille étant injectée par
templates/custom/header.tmpl sur toutes les pages, le wiki est couvert sans
feuille distincte. Réorganisée en deux sections de risque explicite :
§1 Variables — couleurs officielles + ciel nocturne. Sûr, résiste aux
mises à jour. ÉPROUVÉ sur forge-01 (CHANGELOG 2026-07-03).
§2 Décor — fond aurore, filet sous les titres, citations, tableaux et code
en ligne de .markup. Fragile (classes internes). JAMAIS RENDU.
Supprimer §2 ramène au thème sobre. Le ciel nocturne ne s'applique qu'aux
thèmes sombres, pour ne pas casser le thème clair.
docs/theme-forgejo-hors-flotte.md — pose manuelle sur une instance Forgejo non
gérée par Set-OPS (la forge historique qui héberge ce dépôt et son wiki).
Forgejo n'ayant aucun réglage web pour le CSS, il faut déposer la feuille sur
le serveur. La procédure ne duplique aucun fichier : elle pointe vers ceux du
rôle. Inclut la détection du répertoire custom, un garde-fou pour ne pas
écraser un header.tmpl existant (ajout de ligne), la vérification curl et la
marche arrière.
Corrige deux affirmations fausses de ma part :
- « thème jamais rendu par un Forgejo réel » était faux pour §1, éprouvée.
Le statut est désormais donné section par section.
- Contradiction consignée sur forge-01 : le plan la dit `etat: planifie`, le
CHANGELOG 2026-07-03 dit le branding « prouvé sur forge-01 ». Les deux ne
peuvent pas être vrais ; l'écart est écrit dans le README du rôle, à trancher.
Validé : équilibre accolades/parenthèses du CSS, 0 conflit CSS entre les quatre
pages, lien de doc résolu, ansible-lint 0 échec sur 485 fichiers,
prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 17:42:52 -04:00
radial-gradient(40% 65% at 82% 35%,var(--violet) 0%,transparent 70%),
Aurore : opacites reduites ; etat de forge-01 elucide
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>
2026-07-22 11:57:50 -04:00
radial-gradient(58% 78% at 79% 57%,var(--rose) 0%,transparent 78%);
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
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}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.nav nav{margin-left:auto;display:flex;gap:24px;align-items:center}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.nav nav a{color:var(--dim);text-decoration:none;font-size:.94rem;font-weight:500}
.nav nav a:hover{color:var(--ink)}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.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}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.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}
.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}
Aurore rose-mauve et vert fluo ; thème Forgejo étendu au wiki
Palette (promo/, les 4 pages) — ajoute --rose:#ff6fc4 (frange magenta) et
--vert:#5cff9d (vert fluo), uniquement dans les DÉGRADÉS FONCÉS : fond fixe du
corps, nappe .aurora dérivante, filets .rule. Opacités de 5,5 % à 8,5 %, une
teinte et non un motif. Le vert entre par la gauche et le rose sort par la
droite, comme une vraie aurore. --aurora (texte et boutons) est inchangé :
l'identité de marque ne bouge pas. Appliqué identiquement aux quatre fichiers,
0 conflit CSS après coup.
Thème Forgejo (alliance.css, 29 → 118 lignes) — la feuille étant injectée par
templates/custom/header.tmpl sur toutes les pages, le wiki est couvert sans
feuille distincte. Réorganisée en deux sections de risque explicite :
§1 Variables — couleurs officielles + ciel nocturne. Sûr, résiste aux
mises à jour. ÉPROUVÉ sur forge-01 (CHANGELOG 2026-07-03).
§2 Décor — fond aurore, filet sous les titres, citations, tableaux et code
en ligne de .markup. Fragile (classes internes). JAMAIS RENDU.
Supprimer §2 ramène au thème sobre. Le ciel nocturne ne s'applique qu'aux
thèmes sombres, pour ne pas casser le thème clair.
docs/theme-forgejo-hors-flotte.md — pose manuelle sur une instance Forgejo non
gérée par Set-OPS (la forge historique qui héberge ce dépôt et son wiki).
Forgejo n'ayant aucun réglage web pour le CSS, il faut déposer la feuille sur
le serveur. La procédure ne duplique aucun fichier : elle pointe vers ceux du
rôle. Inclut la détection du répertoire custom, un garde-fou pour ne pas
écraser un header.tmpl existant (ajout de ligne), la vérification curl et la
marche arrière.
Corrige deux affirmations fausses de ma part :
- « thème jamais rendu par un Forgejo réel » était faux pour §1, éprouvée.
Le statut est désormais donné section par section.
- Contradiction consignée sur forge-01 : le plan la dit `etat: planifie`, le
CHANGELOG 2026-07-03 dit le branding « prouvé sur forge-01 ». Les deux ne
peuvent pas être vrais ; l'écart est écrit dans le README du rôle, à trancher.
Validé : équilibre accolades/parenthèses du CSS, 0 conflit CSS entre les quatre
pages, lien de doc résolu, ansible-lint 0 échec sur 485 fichiers,
prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 17:42:52 -04:00
.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)}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
/* ---- 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}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.panel h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.panel .hint{color:var(--dim-2);font-size:.85rem;margin-bottom:20px}
.field{margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.9rem;color:var(--dim);margin-bottom:9px}
.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}
.verdict p{color:var(--dim);margin-top:12px;font-size:.99rem;max-width:56ch}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.vs{grid-template-columns:1fr}}
.col{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:20px}
.col .who{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.col .amt{font-size:1.85rem;font-weight:780;letter-spacing:-.02em;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.col.saas .amt{color:var(--amber)}
.col.setops .amt{color:var(--teal)}
.col .per{font-size:.84rem;color:var(--dim-2)}
.lines{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px;font-size:.87rem}
.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}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:76ch}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.note b{color:var(--dim)}
/* ---- tableau remplace ---- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
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}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.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}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.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 ---- */
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:34px}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.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}
.term{background:#04050d;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-family:var(--mono);font-size:.88rem}
.term .bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-2)}
.term .bar i{width:10px;height:10px;border-radius:50%;background:#2c3155;display:block}
.term .bar span{margin-left:8px;color:var(--dim-2);font-size:.78rem;letter-spacing:.05em}
.term pre{margin:0;padding:20px 18px;overflow-x:auto;line-height:1.75;color:var(--dim)}
.term .p{color:var(--violet)}
.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}}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.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)}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.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}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
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}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
.honest li{color:var(--dim);font-size:.95rem}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
.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}
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
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" >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< a class = "brand" href = "#top" aria-label = "Set-OPS — Chezlepro" >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< 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 >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< span > Set‑ OPS < b > ·< / b > < span style = "color:var(--dim);font-weight:500" > Chezlepro< / span > < / span >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< / a >
< nav >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< a href = "index.html" > Capacités< / a >
Ajoute les pages offres et tarifs (promo/)
promo/offres.html — les écosystèmes livrables, nommés par persona (Socle,
Identité, Maison OBNL, Cabinet, Atelier, Vigie, Intégral, Présence Web). Le
périmètre annoncé est tiré des modèles réels : le nombre de machines est celui
du plan, pas une estimation. Les états sont honnêtes — collaboration marquée
« en chantier », presence-web marquée « feuille de route, non vendable ».
promo/tarifs.html — grille tarifaire de Chezlepro inc., alignée sur les six
offres du site chezlepro.ca (diagnostic, socle opérateur, tenant portable,
audit-ready ops, exploitation gérée, observabilité) plutôt que sur les noms de
modèles Set-OPS. Diagnostic dès 4 500 $ et déductible, socle dès 18 000 $,
tenant dès 12 000 $ (7 500 $ les suivants), parcours combiné dès 38 000 $ au
lieu de 42 000 $, exploitation à 750/1 500/2 800 $ par mois. Trois postes,
aucune facturation par siège, licences à 0 $.
Montants = estimations de marché (taux effectif ~1 000-1 100 $/jour, firme
spécialisée québécoise), pas des prix validés par une vente réelle. Dollars
canadiens avant taxes. Le README le consigne, ainsi que le fait que cette
grille est publique et versionnée.
Corrige au passage une contradiction introduite : offres.html affirmait « un
prix affiché serait un prix inventé » ; son tableau porte désormais les prix de
départ et renvoie à tarifs.html, source de vérité.
Validé : node --check du JS des 4 pages, balises équilibrées, liens internes et
croisés vérifiés, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:28:51 -04:00
< a href = "offres.html" > Offres< / a >
< a href = "tarifs.html" > Tarifs< / a >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< a href = "valeur.html" aria-current = "page" > Valeur< / a >
< a class = "cta-mini" href = "https://chezlepro.ca/contact" > Nous parler< / a >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< / nav >
< / div >
< / header >
< main id = "top" >
<!-- =================== HERO =================== -->
< div class = "hero" >
< div class = "wrap" >
< span class = "eyebrow" > Valeur · Coût total · Preuve< / span >
< h1 > Le nuage vous < span class = "grad" > loue< / span > votre propre organisation.< / h1 >
< p class = "lede" >
Chaque mois, vous payez pour héberger vos courriels, vos documents, vos identités et
votre mémoire institutionnelle sur des serveurs qui ne vous appartiennent pas, sous des
lois qui ne sont pas les vôtres, à un prix que vous ne fixez pas.
Set‑ OPS installe la même chose chez vous — avec du logiciel libre, sur votre
matériel — et vérifie par lui‑ même qu'il tient parole.
< / p >
< div class = "cta-row" >
< a class = "btn btn-primary" href = "#calcul" > Faire le calcul → < / a >
< a class = "btn btn-ghost" href = "#preuve" > Voir la preuve< / a >
< / div >
< / div >
< / div >
< hr class = "rule" >
<!-- =================== CALCULATEUR =================== -->
< section id = "calcul" >
< div class = "wrap" >
< div class = "sec-head reveal" >
< span class = "eyebrow" > 1 — L'arithmétique< / span >
< h2 > Vos chiffres, pas les nôtres.< / h2 >
< p >
Les hypothèses ci‑ dessous sont des valeurs de départ, pas des promesses.
Remplacez‑ les par votre réalité : l'addition se refait toute seule.
< / p >
< / div >
< div class = "calc reveal" >
< div class = "panel" >
< h3 > Votre situation< / h3 >
< p class = "hint" > Glissez les curseurs.< / p >
< div class = "field" >
< label for = "p" > Personnes à desservir < b id = "p-v" > 60< / b > < / label >
< input type = "range" id = "p" min = "5" max = "250" step = "5" value = "60" >
< p class = "sub" > Employé·es, membres et bénévoles ayant un compte.< / p >
< / div >
< div class = "field" >
< label for = "s" > Abonnements $/personne/mois < b id = "s-v" > 26 $< / b > < / label >
< input type = "range" id = "s" min = "6" max = "80" step = "2" value = "26" >
< p class = "sub" > Suite bureautique, courriel, stockage, visioconférence, forge, sauvegarde — additionnés.< / p >
< / div >
< div class = "field" >
< label for = "h" > Matériel, achat unique < b id = "h-v" > 9 000 $< / b > < / label >
< input type = "range" id = "h" min = "3000" max = "40000" step = "1000" value = "9000" >
< p class = "sub" > Serveurs et réseau, amortis sur 5 ans.< / p >
< / div >
< div class = "field" >
< label for = "m" > Mise en place, une fois < b id = "m-v" > 15 000 $< / b > < / label >
< input type = "range" id = "m" min = "0" max = "60000" step = "1000" value = "15000" >
< p class = "sub" > Installation, migration, formation. Zéro si vous la faites vous‑ même.< / p >
< / div >
< div class = "field" >
< label for = "e" > Exploitation $/mois < b id = "e-v" > 600 $< / b > < / label >
< input type = "range" id = "e" min = "0" max = "4000" step = "50" value = "600" >
< p class = "sub" > Infogérance, ou le temps de votre propre équipe.< / p >
< / div >
< / div >
< div class = "results" >
< div class = "verdict" >
< p class = "big" id = "verdict-big" > —< / p >
< p id = "verdict-txt" > —< / p >
< / div >
< div class = "vs" >
< div class = "col saas" >
< p class = "who" > Abonnements · 5 ans< / p >
< p class = "amt" id = "saas-5" > —< / p >
< p class = "per" id = "saas-1" > —< / p >
< ul class = "lines" >
< li > < span > Licences et sièges< / span > < span id = "l-saas" > —< / span > < / li >
< li > < span > Matériel< / span > < span > 0 $< / span > < / li >
< li > < span > Vos données< / span > < span > ailleurs< / span > < / li >
< li > < span > Si les prix montent< / span > < span > vous payez< / span > < / li >
< / ul >
< / div >
< div class = "col setops" >
< p class = "who" > Set-OPS · 5 ans< / p >
< p class = "amt" id = "so-5" > —< / p >
< p class = "per" id = "so-1" > —< / p >
< ul class = "lines" >
< li class = "zero" > < span > Licences logicielles< / span > < span > 0 $< / span > < / li >
< li > < span > Matériel amorti< / span > < span id = "l-hw" > —< / span > < / li >
< li > < span > Mise en place< / span > < span id = "l-mep" > —< / span > < / li >
< li > < span > Exploitation< / span > < span id = "l-ops" > —< / span > < / li >
< / ul >
< / div >
< / div >
< p class = "note" >
< b > Ce que ce calcul ne dit pas.< / b > Il compare des dollars, et les dollars sont la
plus petite partie de la question. Une migration coûte du temps et de la patience.
Un serveur chez vous demande quelqu'un pour s'en occuper. En échange, vous cessez de
louer votre propre organisation, et vous pouvez partir quand vous voulez — tout est
libre, rien n'est captif.
< / p >
< / div >
< / div >
< / div >
< / section >
< hr class = "rule" >
<!-- =================== CE QUE ÇA REMPLACE =================== -->
< section id = "remplace" >
< div class = "wrap" >
< div class = "sec-head reveal" >
< span class = "eyebrow" > 2 — L'équivalence< / span >
< h2 > Ligne pour ligne, ce qui sort de votre budget.< / h2 >
< p >
Set‑ OPS n'est pas un logiciel de plus : c'est le moteur qui installe et tient à
jour une pile complète de logiciels libres, sur votre matériel. Voici ce que chaque
brique remplace — et son état réel, sans embellissement.
< / p >
< / div >
< div class = "tbl-scroll reveal" >
< table >
< thead >
< tr >
< th > Brique< / th >
< th > Ce que vous louez aujourd'hui< / th >
< th > Le libre qui le fait< / th >
< th > État< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Identité unique< / td >
< td > Entra ID, Google Workspace< / td >
< td class = "libre" > OpenLDAP + Keycloak< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Courriel< / td >
< td > Microsoft 365, Google Workspace< / td >
< td class = "libre" > Postfix + Dovecot + rspamd< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Fichiers et bureautique< / td >
< td > Dropbox, OneDrive, Google Docs< / td >
< td class = "libre" > Nextcloud + Collabora< / td >
< td > < span class = "st wip" > En chantier< / span > < / td >
< / tr >
< tr >
< td > Forge et code< / td >
< td > GitHub, GitLab payant< / td >
< td class = "libre" > Forgejo< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Site et applications web< / td >
< td > Hébergeur, PaaS< / td >
< td class = "libre" > nginx + systemd (natif)< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Base de données< / td >
< td > RDS, bases infogérées< / td >
< td class = "libre" > PostgreSQL + Redis< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Certificats et chiffrement< / td >
< td > Certificats commerciaux< / td >
< td class = "libre" > step-ca (autorité interne)< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > DNS< / td >
< td > DNS infogéré< / td >
< td class = "libre" > PowerDNS + Unbound< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Supervision et journaux< / td >
< td > Datadog, New Relic< / td >
< td class = "libre" > Prometheus + Grafana + Loki + Icinga< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Sauvegardes< / td >
< td > Sauvegarde infonuagique< / td >
< td class = "libre" > restic, hors‑ nœud, chiffré< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< tr >
< td > Sécurité du parc< / td >
< td > Options de sécurité facturées< / td >
< td class = "libre" > nftables, fail2ban, AppArmor, auditd< / td >
< td > < span class = "st ok" > Éprouvé< / span > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< p class = "note" >
< b > « Éprouvé »< / b > signifie déployé et vérifié sur des machines réelles, pas seulement
écrit. < b > « En chantier »< / b > signifie exactement cela. Nous distinguons les deux parce
que la confusion entre les deux est le mensonge le plus courant de notre industrie.
< / p >
< / div >
< / section >
< hr class = "rule" >
<!-- =================== LA PREUVE =================== -->
< section id = "preuve" >
< div class = "wrap" >
< div class = "sec-head reveal" >
< span class = "eyebrow" > 3 — La différence< / span >
< h2 > Ne nous croyez pas. Lancez la commande.< / h2 >
< p >
N'importe quel fournisseur peut écrire une page comme celle‑ ci. Presque aucun ne
vous donne le moyen de la contredire. Set‑ OPS tient un < b > registre de ses propres
affirmations< / b > — chaque phrase publique du projet y est reliée soit à une commande
qui la vérifie, soit à un aveu qu'elle n'est pas prouvée.
< / p >
< / div >
< div class = "stats reveal" >
< div class = "stat" > < p class = "n" > 51< / p > < p class = "l" > rôles d'installation, testés et documentés< / p > < / div >
< div class = "stat" > < p class = "n" > 16 / 16< / p > < p class = "l" > preuves automatiques au vert< / p > < / div >
< div class = "stat" > < p class = "n" > 54< / p > < p class = "l" > affirmations publiques tracées au registre< / p > < / div >
< div class = "stat" > < p class = "n" > 8 600< / p > < p class = "l" > lignes de documentation en français< / p > < / div >
< / div >
< div class = "term reveal" >
< div class = "bar" > < i > < / i > < i > < / i > < i > < / i > < span > make prouver< / span > < / div >
< pre > < span class = "p" > $< / span > < span class = "w" > make prouver< / span >
< span class = "c" > P01< / span > Lint Ansible ................................ < span class = "g" > OK< / span >
< span class = "c" > P03< / span > L'inventaire est bien généré depuis le plan . < span class = "g" > OK< / span >
< span class = "c" > P06< / span > Les registres du plan sont valides .......... < span class = "g" > OK< / span >
< span class = "c" > P09< / span > Flux réseau : schéma et matrice cohérents ... < span class = "g" > OK< / span >
< span class = "c" > P11< / span > Syntaxe des 35 playbooks .................... < span class = "g" > OK< / span >
< span class = "c" > P13< / span > Invariants : SSH par clé, pare-feu, licence . < span class = "g" > OK< / span >
< span class = "c" > P16< / span > Inventaire complet déchiffré et lu .......... < span class = "g" > OK< / span >
< span class = "g" > CONFORME : 16 OK, 0 échec, 0 sauté.< / span >
< span class = "w" > → docs/audit/preuve-2026-07-20.md< / span >
< / pre >
< / div >
< div class = "duo reveal" style = "margin-top:26px" >
< div class = "card" >
< h3 > Un rapport daté, à archiver< / h3 >
< p >
Chaque exécution produit une pièce justificative horodatée, versionnée avec le code.
Utilisable en conseil d'administration, en audit, en demande de subvention, ou
simplement pour dormir tranquille.
< / p >
< / div >
< div class = "card" >
< h3 > Le registre a le droit de perdre< / h3 >
< p >
Une affirmation qui échoue redescend au statut « non prouvée », publiquement, dans le
dépôt. C'est la seule façon qu'un tel registre ait la moindre valeur — et c'est
pourquoi le nôtre en a.
< / p >
< / div >
< / div >
< / div >
< / section >
< hr class = "rule" >
<!-- =================== SOUVERAINETÉ =================== -->
< section id = "souverainete" >
< div class = "wrap" >
< div class = "sec-head reveal" >
< span class = "eyebrow" > 4 — Ce qui ne se chiffre pas< / span >
< h2 > La valeur qui apparaît le jour où ça tourne mal.< / h2 >
< / div >
< div class = "duo reveal" >
< div class = "card" >
< h3 > Vos données restent où vous êtes< / h3 >
< ul class = "does" >
< li > < b > Résidence réelle< / b > — les disques sont dans votre local, pas dans une région infonuagique.< / li >
< li > < b > Aucune loi étrangère< / b > ne s'applique à un serveur que personne d'autre ne détient.< / li >
< li > < b > Vos obligations en matière de vie privée< / b > deviennent vérifiables : vous pouvez montrer la machine.< / li >
< / ul >
< / div >
< div class = "card" >
< h3 > Vous pouvez partir< / h3 >
< ul class = "does" >
< li > < b > Zéro licence, zéro captivité< / b > — chaque composant est libre, remplaçable, documenté.< / li >
< li > < b > Aucune hausse de prix unilatérale< / b > : personne ne peut doubler votre facture par courriel.< / li >
< li > < b > Aucune fonction retirée< / b > parce qu'un fournisseur a changé de stratégie.< / li >
< / ul >
< / div >
< div class = "card" >
< h3 > L'infrastructure est du texte< / h3 >
< ul class = "does" >
< li > < b > Tout est décrit dans des fichiers< / b > lisibles, versionnés, relus comme du code.< / li >
< li > < b > Reconstructible< / b > : la même commande rebâtit la même chose sur du matériel neuf.< / li >
< li > < b > Auditable par un tiers< / b > — un consultant externe lit tout en une journée.< / li >
< / ul >
< / div >
< div class = "card" >
< h3 > Pensé pour des organisations réelles< / h3 >
< ul class = "does" >
< li > < b > En français< / b > , documentation et interface comprises.< / li >
< li > < b > À l'échelle d'un OBNL ou d'une coop< / b > — pas une machinerie d'entreprise du Fortune 500.< / li >
< li > < b > Exploitable par un humain seul< / b > , sans intelligence artificielle, sans l'auteur.< / li >
< / ul >
< / div >
< / div >
< / div >
< / section >
< hr class = "rule" >
<!-- =================== RÉSERVES =================== -->
< section id = "reserves" >
< div class = "wrap" >
< div class = "sec-head reveal" >
< span class = "eyebrow" > 5 — 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 > Ce n'est pas rentable pour tout le monde.< / b > En dessous d'une certaine taille, le
calcul ci‑ dessus ne bascule pas en votre faveur avant des années. À cette
échelle, on choisit Set‑ OPS pour la souveraineté, pas pour l'économie — et nous
vous le dirons.
< / li >
< li >
< b > Il faut quelqu'un.< / b > Un serveur chez soi demande une personne responsable, à
l'interne ou sous contrat. Set‑ OPS réduit énormément ce travail ; il ne le
supprime pas.
< / li >
< li >
< b > Le projet repose encore sur un seul mainteneur.< / b > C'est le risque principal, 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, qui n'est pas
l'auteur, 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 >
<!-- =================== CLOSE =================== -->
< div class = "close" >
< div class = "wrap reveal" >
< h2 > Reprenez vos < span class = "grad" > clés< / span > .< / h2 >
< p >
Parlons de votre organisation : ce que vous payez aujourd'hui, ce que vous hébergez,
et ce qu'il faudrait pour que tout cela vous appartienne à nouveau.
< / p >
< div class = "cta-row" >
< a class = "btn btn-primary" href = "index.html" > Voir toutes les capacités → < / a >
< a class = "btn btn-ghost" href = "#calcul" > Refaire le calcul< / 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" >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< 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 >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< / div >
Rend les quatre pages promo cohérentes
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>
2026-07-21 17:19:38 -04:00
< 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 >
Ajoute la page de valeur (promo/valeur.html)
Page sœur de promo/index.html, même thème Alliance Boréale, liée dans les deux
sens. index.html s'adresse au sysadmin (« que puis-je faire ? ») ; valeur.html
s'adresse à la personne qui signe (« qu'est-ce que ça rapporte, et comment le
vérifier ? »).
Quatre pièces :
- calculateur de coût total interactif (personnes, abonnements, matériel, mise
en place, exploitation) sur 5 ans, avec point de bascule calculé ;
- tableau des équivalences : 11 briques, ce qu'elles remplacent, le libre qui
le fait, et leur état réel (Nextcloud/Collabora marqué « en chantier ») ;
- la preuve : make prouver 16/16, registre de 54 affirmations, et le fait que
le registre a le droit de perdre ;
- « Ce que nous ne prétendons pas » : seuil de rentabilité réel, besoin d'une
personne responsable, mainteneur unique, épreuve de l'opérateur indépendant
à venir — y compris si elle échoue.
Le calculateur affiche honnêtement le cas défavorable : sous ~40 personnes aux
valeurs par défaut, l'autohébergement ne se rembourse pas sur l'horizon retenu,
et la page le dit plutôt que de le cacher. Les valeurs par défaut sont des
ordres de grandeur à remplacer, pas des tarifs.
Validé : node --check du JS (rc=0), balises équilibrées, liens internes
résolus, prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:15:09 -04:00
< / div >
< / footer >
< script >
(function(){
var reduce = window.matchMedia & & window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- constellation ---------- */
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); }
});
}
/* ---------- calculateur de coût total ---------- */
var ANS = 5, AMORT = 5;
var f0 = new Intl.NumberFormat('fr-CA',{style:'currency',currency:'CAD',maximumFractionDigits:0});
function $(id){ return document.getElementById(id); }
function money(n){ return f0.format(Math.round(n)); }
var ids = ['p','s','h','m','e'];
function read(){
return {
p:+$('p').value, s:+$('s').value, h:+$('h').value,
m:+$('m').value, e:+$('e').value
};
}
function calc(){
var v = read();
$('p-v').textContent = v.p;
$('s-v').textContent = money(v.s);
$('h-v').textContent = money(v.h);
$('m-v').textContent = money(v.m);
$('e-v').textContent = money(v.e);
var saasAn = v.p * v.s * 12;
var saas5 = saasAn * ANS;
/* Matériel : achat initial + renouvellement au prorata des années au-delà de l'amortissement */
var hw5 = v.h * (ANS / AMORT);
var ops5 = v.e * 12 * ANS;
var so5 = v.m + hw5 + ops5;
var soAn1 = v.m + v.h + v.e * 12;
$('saas-5').textContent = money(saas5);
$('saas-1').textContent = 'soit ' + money(saasAn) + ' par année';
$('so-5').textContent = money(so5);
$('so-1').textContent = 'dont ' + money(soAn1) + ' la première année';
$('l-saas').textContent = money(saas5);
$('l-hw').textContent = money(hw5);
$('l-mep').textContent = money(v.m);
$('l-ops').textContent = money(ops5);
/* Point de bascule : première année où le cumul Set-OPS passe sous le cumul abonnements */
var bascule = 0;
for(var a=1; a< =25; a++){
var cSaas = saasAn * a;
var cSo = v.m + v.h * Math.ceil(a/AMORT) + v.e * 12 * a;
if(cSo < = cSaas){ bascule = a; break; }
}
var ecart = saas5 - so5;
var big = $('verdict-big'), txt = $('verdict-txt');
if(bascule & & bascule < = ANS){
big.textContent = money(Math.abs(ecart)) + ' de moins sur 5 ans';
txt.innerHTML = 'Le point de bascule tombe dans la < b > ' + bascule +
(bascule === 1 ? '< sup > re< / sup > ' : '< sup > e< / sup > ') + ' année< / b > : ' +
'à partir de là, chaque mois joue en votre faveur. Et les ' + v.p +
' personnes desservies ne coûtent plus rien de plus à ajouter.';
} else if(bascule){
big.innerHTML = 'Rentable à la ' + bascule + '< sup > e< / sup > année';
txt.innerHTML = 'Au‑ delà de l\'horizon de 5 ans retenu ici. À cette taille, ' +
'le gain n\'est pas d\'abord monétaire : < b > c\'est le contrôle de vos données et ' +
'la liberté de partir.< / b > Nous préférons vous le dire que vous le cacher.';
} else {
big.textContent = 'Pas rentable, à cette échelle';
txt.innerHTML = 'Avec ces hypothèses, l\'autohébergement ne se rembourse pas. ' +
'< b > La bonne raison de le faire devient la souveraineté, pas le budget< / b > — ' +
'et c\'est une raison parfaitement valable, tant qu\'elle est choisie en connaissance de cause.';
}
}
ids.forEach(function(id){
var el = $(id);
if(el){ el.addEventListener('input', calc); }
});
calc();
/* ---------- révélations au scroll ---------- */
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 >
