Daniel Allaire
f8e754c0b0
Palette (promo/, les 4 pages) — ajoute --rose:#ff6fc4 (frange magenta) et
--vert:#5cff9d (vert fluo), uniquement dans les DÉGRADÉS FONCÉS : fond fixe du
corps, nappe .aurora dérivante, filets .rule. Opacités de 5,5 % à 8,5 %, une
teinte et non un motif. Le vert entre par la gauche et le rose sort par la
droite, comme une vraie aurore. --aurora (texte et boutons) est inchangé :
l'identité de marque ne bouge pas. Appliqué identiquement aux quatre fichiers,
0 conflit CSS après coup.
Thème Forgejo (alliance.css, 29 → 118 lignes) — la feuille étant injectée par
templates/custom/header.tmpl sur toutes les pages, le wiki est couvert sans
feuille distincte. Réorganisée en deux sections de risque explicite :
§1 Variables — couleurs officielles + ciel nocturne. Sûr, résiste aux
mises à jour. ÉPROUVÉ sur forge-01 (CHANGELOG 2026-07-03).
§2 Décor — fond aurore, filet sous les titres, citations, tableaux et code
en ligne de .markup. Fragile (classes internes). JAMAIS RENDU.
Supprimer §2 ramène au thème sobre. Le ciel nocturne ne s'applique qu'aux
thèmes sombres, pour ne pas casser le thème clair.
docs/theme-forgejo-hors-flotte.md — pose manuelle sur une instance Forgejo non
gérée par Set-OPS (la forge historique qui héberge ce dépôt et son wiki).
Forgejo n'ayant aucun réglage web pour le CSS, il faut déposer la feuille sur
le serveur. La procédure ne duplique aucun fichier : elle pointe vers ceux du
rôle. Inclut la détection du répertoire custom, un garde-fou pour ne pas
écraser un header.tmpl existant (ajout de ligne), la vérification curl et la
marche arrière.
Corrige deux affirmations fausses de ma part :
- « thème jamais rendu par un Forgejo réel » était faux pour §1, éprouvée.
Le statut est désormais donné section par section.
- Contradiction consignée sur forge-01 : le plan la dit `etat: planifie`, le
CHANGELOG 2026-07-03 dit le branding « prouvé sur forge-01 ». Les deux ne
peuvent pas être vrais ; l'écart est écrit dans le README du rôle, à trancher.
Validé : équilibre accolades/parenthèses du CSS, 0 conflit CSS entre les quatre
pages, lien de doc résolu, ansible-lint 0 échec sur 485 fichiers,
prouver.py --verifier → CONFORME 16/16.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
785 lines
38 KiB
HTML
785 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Set-OPS — Les offres · Chezlepro</title>
|
||
<meta name="description" content="Les écosystèmes numériques souverains livrables avec Set-OPS : socle, identité, maison OBNL, atelier, vigie, intégral. Périmètre réel, état honnête, accompagnement et réversibilité.">
|
||
<meta name="color-scheme" content="dark">
|
||
</head>
|
||
<body>
|
||
<style>
|
||
:root{
|
||
--night:#05060f; --night-2:#0a0d24; --night-3:#0e1640;
|
||
--ink:#e9ecff; --dim:#99a1c9; --dim-2:#727aa6;
|
||
--line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
|
||
--panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.03);
|
||
--teal:#4fe3c1; --cyan:#56c2ff; --violet:#a98bff; --amber:#ffc46b;
|
||
--rose:#ff6fc4; --vert:#5cff9d; /* frange magenta + vert fluo de l'aurore */
|
||
--aurora:linear-gradient(100deg,var(--teal) 0%,var(--cyan) 46%,var(--violet) 100%);
|
||
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
|
||
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
|
||
--wrap:1140px;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
|
||
background:
|
||
radial-gradient(1200px 760px at 82% -8%,#141c4c 0%,transparent 58%),
|
||
radial-gradient(900px 620px at 8% -2%,#0e1640 0%,transparent 55%),
|
||
radial-gradient(780px 540px at 97% 38%,rgba(255,111,196,.085) 0%,transparent 62%),
|
||
radial-gradient(840px 580px at 3% 72%,rgba(92,255,157,.065) 0%,transparent 62%),
|
||
radial-gradient(700px 500px at 50% 112%,rgba(169,139,255,.07) 0%,transparent 60%),
|
||
linear-gradient(180deg,var(--night-2) 0%,var(--night) 62%) fixed;
|
||
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
|
||
overflow-x:hidden;
|
||
}
|
||
#sky{position:fixed;inset:0;z-index:-2;pointer-events:none}
|
||
#sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
|
||
.aurora{
|
||
position:fixed;left:-10%;right:-10%;top:-22%;height:74vh;z-index:-1;pointer-events:none;
|
||
filter:blur(64px) saturate(140%);opacity:.42;
|
||
background:
|
||
radial-gradient(34% 52% at 6% 52%,var(--vert) 0%,transparent 66%),
|
||
radial-gradient(40% 60% at 20% 30%,var(--teal) 0%,transparent 70%),
|
||
radial-gradient(45% 70% at 55% 20%,var(--cyan) 0%,transparent 70%),
|
||
radial-gradient(40% 65% at 82% 35%,var(--violet) 0%,transparent 70%),
|
||
radial-gradient(32% 48% at 95% 62%,var(--rose) 0%,transparent 66%);
|
||
animation:drift 24s ease-in-out infinite alternate;
|
||
}
|
||
@keyframes drift{from{transform:translate(-3%,0) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
|
||
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
|
||
header.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
|
||
background:linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.28));
|
||
border-bottom:1px solid var(--line-2)}
|
||
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px}
|
||
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
|
||
.brand svg{width:30px;height:30px;flex:none}
|
||
.brand b{font-weight:750}
|
||
.nav nav{margin-left:auto;display:flex;gap:24px;align-items:center}
|
||
.nav nav a{color:var(--dim);text-decoration:none;font-size:.94rem;font-weight:500}
|
||
.nav nav a:hover{color:var(--ink)}
|
||
.nav nav a[aria-current="page"]{color:var(--ink);font-weight:640}
|
||
.nav nav a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px;background:var(--aurora);margin-top:3px}
|
||
.nav .cta-mini{padding:8px 16px;border-radius:999px;background:var(--aurora);color:#04121a;font-weight:700;font-size:.9rem}
|
||
.nav .cta-mini:hover{color:#04121a;filter:brightness(1.08)}
|
||
@media(max-width:900px){.nav nav a:not(.cta-mini){display:none}}
|
||
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);font-weight:600}
|
||
h1,h2,h3{text-wrap:balance;line-height:1.08;margin:0}
|
||
.grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
p{margin:0}
|
||
.lede{color:var(--dim);font-size:1.12rem;max-width:60ch}
|
||
.hero{position:relative;padding:82px 0 60px}
|
||
.hero .eyebrow{display:block;margin-bottom:22px}
|
||
.hero h1{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:800;letter-spacing:-.02em;max-width:17ch}
|
||
.hero .lede{margin-top:26px;font-size:clamp(1.05rem,1.9vw,1.26rem);max-width:64ch}
|
||
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
|
||
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;border:1px solid transparent;transition:transform .15s ease,filter .15s ease,border-color .15s ease}
|
||
.btn-primary{background:var(--aurora);color:#04121a}
|
||
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
|
||
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--panel)}
|
||
.btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px)}
|
||
section{padding:72px 0;position:relative}
|
||
.sec-head{max-width:68ch;margin-bottom:42px}
|
||
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:750;letter-spacing:-.015em;margin-top:14px}
|
||
.sec-head p{margin-top:16px;color:var(--dim);font-size:1.07rem}
|
||
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,rgba(92,255,157,.28),rgba(86,194,255,.22) 34%,rgba(255,111,196,.24) 68%,transparent)}
|
||
/* ---- principe modulaire ---- */
|
||
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
|
||
.beat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:15px;padding:22px}
|
||
.beat .n{font-family:var(--mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em}
|
||
.beat h3{font-size:1.06rem;font-weight:680;margin:12px 0 8px}
|
||
.beat p{color:var(--dim);font-size:.94rem}
|
||
/* ---- offres ---- */
|
||
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
|
||
@media(max-width:880px){.offres{grid-template-columns:1fr}}
|
||
.offre{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
|
||
.offre:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.42);box-shadow:0 18px 50px -24px rgba(86,194,255,.45)}
|
||
.offre::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
|
||
.offre.phare{border-color:rgba(79,227,193,.42);background:linear-gradient(150deg,rgba(79,227,193,.07),rgba(169,139,255,.05)),var(--panel)}
|
||
.offre.phare::before{opacity:1;height:3px}
|
||
.offre .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
|
||
.offre h3{font-size:1.26rem;font-weight:740}
|
||
.offre .who{color:var(--cyan);font-size:.87rem;font-weight:600;margin-top:4px}
|
||
.offre .sub{color:var(--dim);font-size:.95rem;margin-top:13px}
|
||
.offre .meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px}
|
||
.pill{font-family:var(--mono);font-size:.74rem;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px 10px;border-radius:7px;white-space:nowrap}
|
||
ul.does{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
|
||
ul.does li{position:relative;padding-left:22px;color:var(--dim);font-size:.94rem}
|
||
ul.does li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--aurora);transform:rotate(45deg)}
|
||
ul.does b{color:var(--ink);font-weight:640}
|
||
.offre .foot{margin-top:auto;padding-top:18px;color:var(--dim-2);font-size:.86rem;border-top:1px solid var(--line-2)}
|
||
.offre .foot b{color:var(--dim)}
|
||
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;margin-left:auto;flex:none}
|
||
.st.ok{color:#7ff0d0;background:rgba(79,227,193,.12);border:1px solid rgba(79,227,193,.32)}
|
||
.st.wip{color:#ffd79a;background:rgba(255,196,107,.1);border:1px solid rgba(255,196,107,.3)}
|
||
.st.road{color:#c3b2ff;background:rgba(169,139,255,.1);border:1px solid rgba(169,139,255,.3)}
|
||
/* ---- services ---- */
|
||
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
|
||
@media(max-width:820px){.duo{grid-template-columns:1fr}}
|
||
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
|
||
.card:hover{transform:translateY(-3px);border-color:rgba(86,194,255,.42);box-shadow:0 18px 50px -24px rgba(86,194,255,.45)}
|
||
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--aurora);opacity:.75}
|
||
.card h3{font-size:1.2rem;font-weight:720;margin-bottom:10px}
|
||
.card p{color:var(--dim);font-size:.95rem}
|
||
/* ---- label ---- */
|
||
.label-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||
@media(max-width:820px){.label-grid{grid-template-columns:1fr}}
|
||
.lv{background:var(--panel-2);border:1px solid var(--line-2);border-radius:16px;padding:24px;position:relative}
|
||
.lv .rank{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
|
||
.lv h3{font-size:1.22rem;font-weight:740;margin:10px 0 10px;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.lv p{color:var(--dim);font-size:.94rem}
|
||
/* ---- tarification ---- */
|
||
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
|
||
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
|
||
thead th{text-align:left;padding:15px 18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-2);border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
|
||
tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--dim)}
|
||
tbody tr:last-child td{border-bottom:0}
|
||
tbody tr:hover{background:rgba(255,255,255,.022)}
|
||
tbody td:first-child{color:var(--ink);font-weight:640;white-space:nowrap}
|
||
.note{font-size:.87rem;color:var(--dim-2);margin-top:18px;max-width:76ch}
|
||
.note b{color:var(--dim)}
|
||
.honest{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;padding:24px 26px}
|
||
.honest h3{font-size:1.04rem;font-weight:700;margin-bottom:12px;color:var(--amber)}
|
||
.honest ul{margin:0;padding-left:20px;display:grid;gap:10px}
|
||
.honest li{color:var(--dim);font-size:.95rem}
|
||
.honest b{color:var(--ink);font-weight:640}
|
||
.close{text-align:center;padding:88px 0 96px}
|
||
.close h2{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.02em;max-width:20ch;margin-inline:auto}
|
||
.close p{margin:20px auto 0;color:var(--dim);max-width:56ch;font-size:1.06rem}
|
||
.close .cta-row{justify-content:center}
|
||
footer{border-top:1px solid var(--line-2);padding:40px 0;color:var(--dim-2);font-size:.9rem}
|
||
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
|
||
footer a{color:var(--dim);text-decoration:none}
|
||
footer a:hover{color:var(--cyan)}
|
||
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(prefers-reduced-motion:reduce){
|
||
.reveal{opacity:1;transform:none;transition:none}
|
||
.aurora{animation:none}
|
||
html{scroll-behavior:auto}
|
||
}
|
||
</style>
|
||
|
||
<div id="sky" aria-hidden="true"><canvas></canvas></div>
|
||
<div class="aurora" aria-hidden="true"></div>
|
||
|
||
<header class="nav">
|
||
<div class="wrap">
|
||
<a class="brand" href="#top" aria-label="Set-OPS — Chezlepro">
|
||
<svg viewBox="0 0 32 32" role="img" aria-hidden="true"><defs>
|
||
<radialGradient id="sky1" cx="50%" cy="36%" r="75%"><stop offset="0%" stop-color="#10184a"/><stop offset="100%" stop-color="#05060f"/></radialGradient>
|
||
<linearGradient id="au1" x1="0" y1="1" x2="1" y2="0"><stop offset="0%" stop-color="#2ec18f"/><stop offset="45%" stop-color="#56c2ff"/><stop offset="100%" stop-color="#a98bff"/></linearGradient>
|
||
<radialGradient id="gl1" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#bfe9ff"/><stop offset="100%" stop-color="#bfe9ff" stop-opacity="0"/></radialGradient>
|
||
<radialGradient id="st1" cx="50%" cy="45%" r="60%"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#d6ecff"/></radialGradient>
|
||
</defs>
|
||
<circle cx="16" cy="16" r="16" fill="url(#sky1)"/>
|
||
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="url(#au1)" stroke-width="2.6" stroke-linecap="round" opacity=".85"/>
|
||
<circle cx="7" cy="9" r=".9" fill="#cfe6ff"/><circle cx="24" cy="8" r="1.1" fill="#fff"/><circle cx="26" cy="22" r=".8" fill="#bfe9ff"/><circle cx="9" cy="25" r=".7" fill="#cfe6ff"/>
|
||
<circle cx="16" cy="15" r="9" fill="url(#gl1)" opacity=".55"/>
|
||
<path d="M16 5 C 16.9 12.4, 17.6 13.1, 25 14 C 17.6 14.9, 16.9 15.6, 16 23 C 15.1 15.6, 14.4 14.9, 7 14 C 14.4 13.1, 15.1 12.4, 16 5 Z" fill="url(#st1)"/>
|
||
</svg>
|
||
<span>Set‑OPS <b>·</b> <span style="color:var(--dim);font-weight:500">Chezlepro</span></span>
|
||
</a>
|
||
<nav>
|
||
<a href="index.html">Capacités</a>
|
||
<a href="offres.html" aria-current="page">Offres</a>
|
||
<a href="tarifs.html">Tarifs</a>
|
||
<a href="valeur.html">Valeur</a>
|
||
<a class="cta-mini" href="https://chezlepro.ca/contact">Nous parler</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
|
||
<!-- =================== HERO =================== -->
|
||
<div class="hero">
|
||
<div class="wrap">
|
||
<span class="eyebrow">Offres · Périmètre réel · Accompagnement</span>
|
||
<h1>Un écosystème <span class="grad">complet</span>, pas un logiciel de plus.</h1>
|
||
<p class="lede">
|
||
Chaque offre est un écosystème numérique entier — machines, réseau, identité,
|
||
chiffrement, sauvegardes, supervision — décrit dans un plan versionné et déployé par
|
||
le même moteur libre. Vous choisissez la portée ; le socle souverain est toujours
|
||
dessous. Et vous pouvez ajouter un module plus tard sans rien reconstruire.
|
||
</p>
|
||
<div class="cta-row">
|
||
<a class="btn btn-primary" href="#offres">Voir les offres →</a>
|
||
<a class="btn btn-ghost" href="valeur.html#calcul">Calculer ce que ça coûte</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== PRINCIPE =================== -->
|
||
<section id="principe">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Le principe</span>
|
||
<h2>Une base commune, des modules qui s'ajoutent.</h2>
|
||
<p>
|
||
Aucune offre n'est un produit figé. Toutes partent du même socle souverain et
|
||
s'enrichissent de modules. Passer de l'une à l'autre, c'est éditer un plan et
|
||
relancer une commande — pas rappeler un fournisseur pour renégocier.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="beats reveal">
|
||
<div class="beat">
|
||
<p class="n">01</p>
|
||
<h3>Le socle, toujours</h3>
|
||
<p>DNS interne, autorité de certification, passerelle TLS, relais courriel. Toute offre repose dessus — c'est ce qui rend l'ensemble souverain plutôt qu'assemblé.</p>
|
||
</div>
|
||
<div class="beat">
|
||
<p class="n">02</p>
|
||
<h3>Les modules, au choix</h3>
|
||
<p>Identité, collaboration, forge, supervision, données, sauvegardes. Chacun est un ensemble de machines et de réglages déjà éprouvés, pas un projet à recommencer.</p>
|
||
</div>
|
||
<div class="beat">
|
||
<p class="n">03</p>
|
||
<h3>La croissance, sans rupture</h3>
|
||
<p>Ajouter un module plus tard ne remet rien en cause : le plan grandit, l'inventaire se régénère, seules les nouvelles machines apparaissent.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== OFFRES =================== -->
|
||
<section id="offres">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Les offres</span>
|
||
<h2>Huit portées, du strict nécessaire à l'écosystème entier.</h2>
|
||
<p>
|
||
Le nombre de machines indiqué est celui du plan réel, pas une estimation.
|
||
L'état l'est aussi : <b>éprouvé</b> signifie déployé et vérifié sur des machines
|
||
réelles, <b>en chantier</b> signifie en construction, <b>feuille de route</b>
|
||
signifie pas encore commencé. Nous ne vendons pas les deux derniers.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="offres reveal">
|
||
|
||
<!-- SOCLE -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Le Socle</h3>
|
||
<p class="who">Pour poser la fondation</p>
|
||
</div>
|
||
<span class="st ok">Éprouvé</span>
|
||
</div>
|
||
<p class="sub">
|
||
L'infrastructure de base souveraine, sur laquelle tout le reste s'appuie.
|
||
La bonne première étape quand on veut avancer sans tout basculer d'un coup.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">4 machines</span><span class="pill">2 zones réseau</span><span class="pill">libre et public</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>DNS interne</b> — vos noms de machines vous appartiennent</li>
|
||
<li><b>Autorité de certification</b> — vos propres certificats, partout</li>
|
||
<li><b>Passerelle TLS</b> — un seul point d'entrée, chiffré</li>
|
||
<li><b>Relais courriel</b> — les alertes et notifications partent de chez vous</li>
|
||
</ul>
|
||
<p class="foot"><b>Aussi :</b> ce modèle est public et libre. Vous pouvez l'installer vous-même, sans nous.</p>
|
||
</article>
|
||
|
||
<!-- IDENTITÉ -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Identité</h3>
|
||
<p class="who">Une personne, un mot de passe</p>
|
||
</div>
|
||
<span class="st ok">Éprouvé</span>
|
||
</div>
|
||
<p class="sub">
|
||
L'annuaire de votre organisation devient la source de vérité unique, et la
|
||
connexion unique s'applique à tout ce que vous ajouterez ensuite.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">7 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Annuaire central</b> — arrivées et départs gérés à un seul endroit</li>
|
||
<li><b>Connexion unique (SSO)</b> — un mot de passe pour tous vos services</li>
|
||
<li><b>Base de données</b> chiffrée de bout en bout</li>
|
||
<li><b>Passerelle d'authentification</b> pour protéger même les outils sans SSO natif</li>
|
||
</ul>
|
||
<p class="foot"><b>Le bon point de départ</b> si vous prévoyez d'ajouter plusieurs services : tout s'y raccorde.</p>
|
||
</article>
|
||
|
||
<!-- MAISON OBNL — PHARE -->
|
||
<article class="offre phare">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Maison OBNL</h3>
|
||
<p class="who">Offre phare · OBNL et coopératives</p>
|
||
</div>
|
||
<span class="st wip">En chantier</span>
|
||
</div>
|
||
<p class="sub">
|
||
Le remplaçant souverain de Google Workspace ou Microsoft 365 : identité,
|
||
fichiers, documents partagés, agendas, contacts, courriel — chez vous, sous votre
|
||
seule autorité.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">8 machines</span><span class="pill">5 zones réseau</span><span class="pill">identité incluse</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Fichiers et partage</b> — l'équivalent de Dropbox ou OneDrive</li>
|
||
<li><b>Documents collaboratifs</b> — édition à plusieurs, dans le navigateur</li>
|
||
<li><b>Agendas et contacts</b> synchronisés sur tous les appareils</li>
|
||
<li><b>Courriel complet</b> avec filtrage du pourriel</li>
|
||
<li><b>Connexion unique</b> sur l'ensemble</li>
|
||
</ul>
|
||
<p class="foot"><b>État réel :</b> le socle et l'identité sont éprouvés ; le module collaboration est en construction et constitue notre priorité de développement. Nous ne le livrerons pas avant de l'avoir prouvé.</p>
|
||
</article>
|
||
|
||
<!-- CABINET -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Cabinet</h3>
|
||
<p class="who">PME et professionnels</p>
|
||
</div>
|
||
<span class="st wip">En chantier</span>
|
||
</div>
|
||
<p class="sub">
|
||
La même base que Maison OBNL, réglée pour un cabinet ou une petite entreprise :
|
||
confidentialité des dossiers clients, cloisonnement par équipe, traçabilité.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">8 machines</span><span class="pill">cloisonnement</span><span class="pill">journalisation</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Dossiers clients</b> hébergés chez vous, jamais chez un tiers</li>
|
||
<li><b>Droits par équipe</b> et par dossier</li>
|
||
<li><b>Journal des accès</b> conservé et consultable</li>
|
||
<li><b>Sauvegardes chiffrées</b> hors du serveur principal</li>
|
||
</ul>
|
||
<p class="foot"><b>État réel :</b> repose sur le même module collaboration, en construction.</p>
|
||
</article>
|
||
|
||
<!-- ATELIER -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Atelier</h3>
|
||
<p class="who">Équipes qui développent</p>
|
||
</div>
|
||
<span class="st ok">Éprouvé</span>
|
||
</div>
|
||
<p class="sub">
|
||
Votre forge logicielle souveraine : dépôts, suivi des tickets, revues de code et
|
||
documentation, sans dépendre d'une plateforme étrangère.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">6 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Dépôts git</b> illimités, privés par défaut</li>
|
||
<li><b>Tickets, revues, wiki</b> intégrés</li>
|
||
<li><b>Base de données</b> et sauvegardes incluses</li>
|
||
<li><b>Connexion unique</b> en ajoutant l'offre Identité</li>
|
||
</ul>
|
||
<p class="foot"><b>Remplace</b> un abonnement GitHub ou GitLab payant, sans limite de sièges.</p>
|
||
</article>
|
||
|
||
<!-- VIGIE -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Vigie</h3>
|
||
<p class="who">Savoir avant vos usagers</p>
|
||
</div>
|
||
<span class="st ok">Éprouvé</span>
|
||
</div>
|
||
<p class="sub">
|
||
La supervision de votre parc : mesures, journaux centralisés, tableaux de bord et
|
||
alertes. Ce qui transforme « le site est lent » en un diagnostic.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">7 machines</span><span class="pill">4 zones réseau</span><span class="pill">socle inclus</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Mesures et historique</b> de chaque machine et service</li>
|
||
<li><b>Journaux centralisés</b>, cherchables</li>
|
||
<li><b>Tableaux de bord</b> et alertes par courriel</li>
|
||
<li><b>Vue métier</b> — l'état de vos services, pas seulement des serveurs</li>
|
||
</ul>
|
||
<p class="foot"><b>Remplace</b> un abonnement de supervision facturé à la machine.</p>
|
||
</article>
|
||
|
||
<!-- INTÉGRAL -->
|
||
<article class="offre phare">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Intégral</h3>
|
||
<p class="who">L'écosystème entier</p>
|
||
</div>
|
||
<span class="st ok">Éprouvé</span>
|
||
</div>
|
||
<p class="sub">
|
||
Tout ce que nous savons faire, assemblé et cloisonné : identité, collaboration,
|
||
forge, supervision, données, sauvegardes. Le modèle de référence pour une
|
||
organisation qui internalise l'ensemble de son numérique.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">12 machines</span><span class="pill">6 zones de sécurité</span><span class="pill">tout inclus</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Six zones réseau cloisonnées</b> — une brèche ne se propage pas</li>
|
||
<li><b>Sauvegardes hors‑nœud</b> chiffrées, restauration testée</li>
|
||
<li><b>Chiffrement de bout en bout</b> entre serveurs, pas seulement en façade</li>
|
||
<li><b>Supervision complète</b> de l'ensemble</li>
|
||
</ul>
|
||
<p class="foot"><b>C'est le modèle</b> sur lequel notre propre infrastructure fonctionne. Nous ne vendons pas autre chose que ce que nous utilisons.</p>
|
||
</article>
|
||
|
||
<!-- PRÉSENCE WEB -->
|
||
<article class="offre">
|
||
<div class="top">
|
||
<div>
|
||
<h3>Présence Web</h3>
|
||
<p class="who">Sites et applications</p>
|
||
</div>
|
||
<span class="st road">Feuille de route</span>
|
||
</div>
|
||
<p class="sub">
|
||
Héberger vos sites et vos applications web sur votre propre socle, en natif —
|
||
sans conteneur, sans plateforme tierce.
|
||
</p>
|
||
<div class="meta">
|
||
<span class="pill">7 machines prévues</span><span class="pill">non livrable</span>
|
||
</div>
|
||
<ul class="does">
|
||
<li><b>Sites statiques</b> et applications dynamiques</li>
|
||
<li><b>Base de données</b> et certificats automatiques</li>
|
||
</ul>
|
||
<p class="foot"><b>État réel :</b> les briques web frontale et dorsale n'ont pas encore de rôle implémenté. Cette offre <b>n'est pas vendable aujourd'hui</b> et figure ici pour que vous sachiez où nous allons. Pour un besoin web immédiat, c'est Intégral qui répond.</p>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== SERVICES =================== -->
|
||
<section id="services">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">L'accompagnement</span>
|
||
<h2>Le logiciel est libre. C'est le travail qui se paie.</h2>
|
||
<p>
|
||
Aucune de ces prestations n'est obligatoire : tout est documenté, et une équipe
|
||
technique peut s'en charger seule. Elles existent pour les organisations qui
|
||
préfèrent confier.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="duo reveal">
|
||
<div class="card">
|
||
<h3>Mise en place</h3>
|
||
<p>
|
||
Installation complète sur votre matériel, migration de vos données existantes
|
||
(courriels, fichiers, comptes), configuration à vos couleurs et formation de vos
|
||
équipes. Une fois, au début.
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Infogérance</h3>
|
||
<p>
|
||
Mises à jour de sécurité, surveillance, sauvegardes dont la restauration est
|
||
réellement testée, et intervention en cas d'incident. Mensuel, résiliable.
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Audit et certification</h3>
|
||
<p>
|
||
Vérification indépendante de votre installation selon le label ci-dessous, avec
|
||
rapport daté. Utile en conseil d'administration, en appel d'offres ou en demande
|
||
de financement.
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Formation et reprise</h3>
|
||
<p>
|
||
Nous formons votre personnel pour qu'il reprenne l'exploitation. C'est une
|
||
prestation, pas une menace : notre modèle ne repose pas sur votre dépendance.
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Réversibilité garantie</h3>
|
||
<p>
|
||
Vous partez quand vous voulez, avec vos données dans des formats ouverts, votre
|
||
plan d'infrastructure et toute la documentation. Rien n'est retenu en otage —
|
||
le moteur lui‑même est sous licence libre.
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Hébergement du matériel</h3>
|
||
<p>
|
||
Si vous n'avez pas de local adapté, vos machines peuvent être hébergées au
|
||
Québec, chez nous ou chez un partenaire. Elles restent les vôtres.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== LABEL =================== -->
|
||
<section id="label">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Le label</span>
|
||
<h2>Trois niveaux, qui s'accumulent.</h2>
|
||
<p>
|
||
Un cadre pour dire où en est réellement une installation — la vôtre comme la nôtre.
|
||
Chaque niveau suppose le précédent, et se constate par des vérifications, pas par
|
||
une déclaration.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="label-grid reveal">
|
||
<div class="lv">
|
||
<p class="rank">Niveau 1</p>
|
||
<h3>Souverain</h3>
|
||
<p>
|
||
Les données sont chez vous, sur du logiciel libre, sans dépendance à un
|
||
fournisseur qui pourrait fermer, augmenter ses prix ou changer ses conditions.
|
||
</p>
|
||
</div>
|
||
<div class="lv">
|
||
<p class="rank">Niveau 2</p>
|
||
<h3>Résilient</h3>
|
||
<p>
|
||
Les sauvegardes existent hors du serveur, chiffrées, et leur restauration a été
|
||
testée pour de vrai. L'ensemble est supervisé, et se reconstruit à partir de son
|
||
plan.
|
||
</p>
|
||
</div>
|
||
<div class="lv">
|
||
<p class="rank">Niveau 3</p>
|
||
<h3>Exemplaire</h3>
|
||
<p>
|
||
Le chiffrement s'applique entre les serveurs et pas seulement en façade, les
|
||
accès sont cloisonnés et journalisés, et un tiers peut le vérifier lui‑même.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="note">
|
||
<b>En préparation.</b> Le cadre des trois niveaux est arrêté ; la méthode de
|
||
vérification et son indépendance sont encore en cours de définition. Nous ne
|
||
délivrons pas encore de certification formelle, et nous préférons le dire.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== TARIFICATION =================== -->
|
||
<section id="tarifs">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">La tarification</span>
|
||
<h2>Trois postes, et pas de siège à payer.</h2>
|
||
<p>
|
||
Aucune de nos offres ne se facture par utilisateur. Ajouter trente personnes à
|
||
votre organisation ne change pas la facture — c'est la différence structurelle avec
|
||
un abonnement.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="tbl-scroll reveal">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Poste</th><th>Quand</th><th>Ce que ça couvre</th><th>Montant</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Matériel</td>
|
||
<td>Une fois</td>
|
||
<td>Serveurs et réseau. Vous l'achetez et il vous appartient ; nous pouvons vous conseiller ou le fournir.</td>
|
||
<td>Au coût</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Diagnostic</td>
|
||
<td>Une fois</td>
|
||
<td>Le point de départ : état des lieux, priorités, feuille de route. Déduit du mandat suivant, s'il y en a un.</td>
|
||
<td>dès 4 500 $</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Mise en place</td>
|
||
<td>Une fois</td>
|
||
<td>Installation, migration des données, configuration, formation initiale. Varie selon l'offre et l'état de votre existant.</td>
|
||
<td>dès 18 000 $</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Infogérance</td>
|
||
<td>Mensuel</td>
|
||
<td>Mises à jour, supervision, sauvegardes testées, intervention. Optionnel et résiliable.</td>
|
||
<td>750 – 2 800 $</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Licences logicielles</td>
|
||
<td>—</td>
|
||
<td>Tous les composants sont libres. Il n'y a rien à payer, ni maintenant ni plus tard.</td>
|
||
<td>0 $</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p class="note">
|
||
<b>Des prix de départ, pas des devis.</b> L'essentiel du coût dépend de votre situation :
|
||
le volume à migrer, les habitudes à accompagner, le matériel dont vous disposez déjà.
|
||
C'est pourquoi tout commence par un diagnostic — et pourquoi son montant est déduit de
|
||
la suite. La <a href="tarifs.html" style="color:var(--cyan)">grille tarifaire complète</a>
|
||
détaille chaque mandat, et la page
|
||
<a href="valeur.html#calcul" style="color:var(--cyan)">Valeur</a> vous laisse simuler
|
||
l'ensemble avec vos propres hypothèses avant même de nous parler.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="rule">
|
||
|
||
<!-- =================== RÉSERVES =================== -->
|
||
<section id="reserves">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Honnêteté</span>
|
||
<h2>Ce que nous ne vendons pas encore.</h2>
|
||
</div>
|
||
|
||
<div class="honest reveal">
|
||
<h3>À lire avant de nous appeler</h3>
|
||
<ul>
|
||
<li>
|
||
<b>Présence Web n'est pas livrable.</b> Les briques manquent. Elle figure dans
|
||
cette page comme direction, pas comme catalogue.
|
||
</li>
|
||
<li>
|
||
<b>Maison OBNL et Cabinet reposent sur un module en construction.</b> Le socle et
|
||
l'identité sont éprouvés ; la collaboration est notre chantier prioritaire. Nous
|
||
pouvons en discuter et planifier, pas la livrer aujourd'hui.
|
||
</li>
|
||
<li>
|
||
<b>La certification n'est pas encore délivrée.</b> Le cadre existe, la méthode de
|
||
vérification indépendante est en cours de définition.
|
||
</li>
|
||
<li>
|
||
<b>Nous sommes une très petite équipe.</b> Cela vous donne un interlocuteur qui
|
||
connaît réellement votre installation, et cela veut dire que nous ne pouvons pas
|
||
servir tout le monde en même temps. Nous le dirons plutôt que de vous faire
|
||
attendre.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- =================== CLOSE =================== -->
|
||
<div class="close">
|
||
<div class="wrap reveal">
|
||
<h2>Commençons par une <span class="grad">conversation</span>.</h2>
|
||
<p>
|
||
Dites-nous ce que vous payez aujourd'hui, ce que vous hébergez et ce qui vous
|
||
inquiète. Nous vous dirons franchement si Set‑OPS est une bonne idée pour vous
|
||
— y compris quand la réponse est non.
|
||
</p>
|
||
<div class="cta-row">
|
||
<a class="btn btn-primary" href="valeur.html#calcul">Simuler le coût →</a>
|
||
<a class="btn btn-ghost" href="index.html">Voir les capacités techniques</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="wrap">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
|
||
<circle cx="16" cy="16" r="16" fill="#0a0d24"/>
|
||
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13" fill="none" stroke="#56c2ff" stroke-width="2.4" stroke-linecap="round" opacity=".8"/>
|
||
<path d="M16 6 C 16.8 12.6, 17.4 13.2, 24 14 C 17.4 14.8, 16.8 15.4, 16 22 C 15.2 15.4, 14.6 14.8, 8 14 C 14.6 13.2, 15.2 12.6, 16 6 Z" fill="#e9ecff"/></svg>
|
||
<span>Chezlepro inc. · Saint-Bruno-de-Montarville, Québec</span>
|
||
</div>
|
||
<div><a href="index.html">Capacités</a> · <a href="offres.html">Offres</a> · <a href="tarifs.html">Tarifs</a> · <a href="valeur.html">Valeur</a></div>
|
||
<div>Set‑OPS — moteur libre, licence AGPLv3 · <a href="https://chezlepro.ca">chezlepro.ca</a></div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function(){
|
||
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
|
||
var sky = document.querySelector('#sky canvas');
|
||
if(sky){
|
||
var ctx = sky.getContext('2d'), W, H, DPR, stars=[], raf;
|
||
function size(){
|
||
DPR = Math.min(window.devicePixelRatio||1, 2);
|
||
W = sky.clientWidth; H = sky.clientHeight;
|
||
sky.width = W*DPR; sky.height = H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0);
|
||
var count = Math.min(120, Math.round(W*H/14000));
|
||
stars = [];
|
||
for(var i=0;i<count;i++){
|
||
stars.push({x:Math.random()*W, y:Math.random()*H,
|
||
r:Math.random()*1.3+0.3, vx:(Math.random()-.5)*0.12, vy:(Math.random()-.5)*0.12,
|
||
tw:Math.random()*Math.PI*2, ts:Math.random()*0.02+0.006});
|
||
}
|
||
}
|
||
function frame(){
|
||
ctx.clearRect(0,0,W,H);
|
||
for(var i=0;i<stars.length;i++){
|
||
var s=stars[i];
|
||
if(!reduce){ s.x+=s.vx; s.y+=s.vy; s.tw+=s.ts;
|
||
if(s.x<0)s.x+=W; if(s.x>W)s.x-=W; if(s.y<0)s.y+=H; if(s.y>H)s.y-=H; }
|
||
var a = 0.5 + Math.sin(s.tw)*0.4;
|
||
ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,6.2832);
|
||
ctx.fillStyle='rgba(207,230,255,'+a.toFixed(3)+')'; ctx.fill();
|
||
}
|
||
for(var i=0;i<stars.length;i++){
|
||
for(var j=i+1;j<stars.length;j++){
|
||
var dx=stars[i].x-stars[j].x, dy=stars[i].y-stars[j].y, d=dx*dx+dy*dy;
|
||
if(d<10000){
|
||
var o=(1-d/10000)*0.22;
|
||
ctx.strokeStyle='rgba(86,194,255,'+o.toFixed(3)+')'; ctx.lineWidth=0.6;
|
||
ctx.beginPath(); ctx.moveTo(stars[i].x,stars[i].y); ctx.lineTo(stars[j].x,stars[j].y); ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
if(!reduce) raf=requestAnimationFrame(frame);
|
||
}
|
||
size(); frame();
|
||
var to; window.addEventListener('resize',function(){ clearTimeout(to); to=setTimeout(function(){ cancelAnimationFrame(raf); size(); frame(); },180); });
|
||
document.addEventListener('visibilitychange',function(){
|
||
if(document.hidden){ cancelAnimationFrame(raf); } else if(!reduce){ raf=requestAnimationFrame(frame); }
|
||
});
|
||
}
|
||
|
||
var els = document.querySelectorAll('.reveal');
|
||
if(reduce || !('IntersectionObserver' in window)){
|
||
els.forEach(function(e){ e.classList.add('in'); });
|
||
} else {
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
|
||
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
|
||
els.forEach(function(e){ io.observe(e); });
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|