Alliance-Boreale/alliance-boreale
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site web
Some checks failed
CI / yaml-lint (pull_request) Has been cancelled
Details
CI / ssot-export (pull_request) Has been cancelled
Details
CI / tests (pull_request) Has been cancelled
Details
CI / docs (pull_request) Has been cancelled
Details

Browse source
This commit is contained in:
Dan Allaire 2026-06-25 18:45:42 -04:00
parent 84dd08f702
commit a0655d2e45
16 changed files with 1739 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
infrastructure/ansible/inventories/prod/hosts.yml
View file

@ -10,66 +10,35 @@
"c2_edge":
"hosts": {}
"c3_core":
"hosts":
"c3-netbox-01":
"ansible_host": "192.168.10.30"
"boreale_env": null
"boreale_layer": "c3"
"boreale_managed_by": "opentofu"
"boreale_role": "netbox"
"hosts": {}
"c3_identity":
"hosts": {}
"c3_supervision":
"hosts":
"c3-icinga-01":
"ansible_host": "192.168.10.31"
"boreale_env": null
"boreale_layer": "c3"
"boreale_managed_by": "opentofu"
"boreale_role": "icinga"
"icinga_role": "master"
"hosts": {}
"c4_forge":
"hosts":
"c4-forgejo-01":
"ansible_host": "192.168.10.40"
"boreale_env": null
"boreale_layer": "c4"
"boreale_managed_by": "opentofu"
"boreale_role": "forgejo"
"hosts": {}
"c5_pivot":
"hosts":
"c5-runner-01":
"ansible_host": "192.168.10.50"
"boreale_env": null
"boreale_layer": "c5"
"boreale_managed_by": "opentofu"
"boreale_role": "runner"
"hosts": {}
"tenants":
"children":
"c6_services":
"hosts": {}
"c7_products":
"hosts":
"c7-87-16-01":
"ansible_host": "192.168.12.45"
"boreale_env": null
"boreale_layer": "c7"
"boreale_managed_by": "opentofu"
"boreale_role": "87-16"
"c7-87-16-02":
"ansible_host": "192.168.12.46"
"boreale_env": null
"boreale_layer": "c7"
"boreale_managed_by": "opentofu"
"boreale_role": "87-16"
"c7-life-noc-01":
"ansible_host": "192.168.12.40"
"c7-gestion-01":
"ansible_host": "192.168.8.30"
"boreale_env": null
"boreale_layer": "c7"
"boreale_managed_by": "opentofu"
"boreale_role": "life-noc"
"c7-life-noc-02":
"ansible_host": "192.168.12.20"
"boreale_role": "gestion"
"c7-life-noc-01":
"ansible_host": "192.168.12.40"
"boreale_env": null
"boreale_layer": "c7"
"boreale_managed_by": "opentofu"

91
site-alliance-boreale/README.md Normal file
View file

@ -0,0 +1,91 @@
# Site — Alliance Boréale
Site web statique de l'**Alliance Boréale — souveraineté numérique**.
Thème : aurore boréale, étoiles, constellation. Aucune dépendance, aucun build,
aucun pistage, aucune ressource tierce (police système, JS et CSS locaux).
> Ce site **remplace** l'ancien `alliance-boreale.ca`, déclaré obsolète.
> Il abandonne volontairement toute imagerie **forestière** (sapin, « forêt
> numérique ») pour éviter la confusion avec l'OBNL *Alliance Forêt Boréale*,
> et adopte le registre **aurore / constellation**.
## Arborescence
```
site-alliance-boreale/
├── public/ # racine web (ce que nginx sert)
│ ├── index.html # Accueil
│ ├── vision.html # Vision, valeurs, infrastructure mutualisée, « tout est libre »
│ ├── label.html # Le Label : 3 niveaux (Souverain / Résilient / Exemplaire)
│ ├── constellation.html # Les artisans = étoiles ; réciprocité
│ ├── atelier.html # Set-OPS (moteur libre) + la forge de l'Alliance
│ ├── faq.html # Questions & réponses (par public + le Label)
│ ├── contact.html # Contact
│ ├── 404.html
│ └── assets/
│ ├── css/styles.css
│ └── js/constellation.js # champ d'étoiles + lignes de constellation
└── deploy/
├── alliance-boreale.nginx.conf # exemple de vhost
└── deployer.sh # synchronisation rsync + reload nginx
```
## Prévisualiser en local
Aucun outil requis ; un simple serveur statique suffit :
```bash
cd public
python3 -m http.server 8080
# puis http://localhost:8080
```
## Déployer sur web-frontal-01
1. **Créer la racine web** sur le serveur (une fois) :
```bash
ssh ansible@web-frontal-01 'sudo mkdir -p /var/www/alliance-boreale \
&& sudo chown ansible:ansible /var/www/alliance-boreale'
```
2. **Installer le vhost** (une fois) :
```bash
scp deploy/alliance-boreale.nginx.conf \
ansible@web-frontal-01:/tmp/alliance-boreale.conf
ssh ansible@web-frontal-01 '
sudo mv /tmp/alliance-boreale.conf /etc/nginx/sites-available/ &&
sudo ln -sf /etc/nginx/sites-available/alliance-boreale.conf \
/etc/nginx/sites-enabled/alliance-boreale.conf &&
sudo nginx -t && sudo systemctl reload nginx'
```
> Adapter `server_name` et les chemins TLS dans le vhost. Le bloc HTTPS
> attend un certificat (step-ca interne, Let's Encrypt, etc.).
3. **Déployer le contenu** (à chaque mise à jour) :
```bash
./deploy/deployer.sh # valeurs par défaut
RECHARGER_NGINX=1 ./deploy/deployer.sh # + reload nginx
DRY_RUN=1 ./deploy/deployer.sh # simulation
```
Variables : `HOTE`, `UTILISATEUR`, `RACINE`, `PORT_SSH`, `RECHARGER_NGINX`, `DRY_RUN`.
## À personnaliser avant publication
- **Courriel de contact** dans `public/contact.html` (`info@alliance-boreale.ca`
est un repère à remplacer).
- **`server_name`** et **chemins des certificats** dans le vhost.
- Logo si vous en avez un (le « brand-mark » de l'en-tête est dessiné en CSS).
Le **favicon** (`public/favicon.svg`, étoile + aurore) est déjà fourni.
## Choix techniques
- **Statique pur** : portable, auditable, longévité maximale, souverain.
- **Zéro tiers** : pas de CDN, pas de Google Fonts, pas de tracker. CSP stricte
`default-src 'self'`.
- **Accessibilité** : navigation au clavier, `skip-link`, contrastes,
`prefers-reduced-motion` respecté (l'animation s'arrête).

78
site-alliance-boreale/deploy/alliance-boreale.nginx.conf Normal file
View file

@ -0,0 +1,78 @@
# =============================================================================
# Alliance Boréale — vhost nginx (site statique)
# À déposer sur web-frontal-01 dans /etc/nginx/sites-available/, puis lier
# dans sites-enabled/. Sert le contenu statique de /var/www/alliance-boreale.
#
# sudo ln -s /etc/nginx/sites-available/alliance-boreale.conf \
# /etc/nginx/sites-enabled/alliance-boreale.conf
# sudo nginx -t && sudo systemctl reload nginx
#
# Adapter : server_name, chemins des certificats TLS, racine si besoin.
# =============================================================================
# --- Redirection HTTP -> HTTPS ---------------------------------------------
server {
listen 80;
listen [::]:80;
server_name alliance-boreale.ca www.alliance-boreale.ca;
# Laisser passer les défis ACME si vous en utilisez un :
location /.well-known/acme-challenge/ {
root /var/www/alliance-boreale;
}
location / {
return 301 https://$host$request_uri;
}
}
# --- Site HTTPS -------------------------------------------------------------
server {
listen 443 ssl;
listen [::]:443 ssl;
http2 on;
server_name alliance-boreale.ca www.alliance-boreale.ca;
root /var/www/alliance-boreale;
index index.html;
# --- TLS (adapter les chemins : step-ca interne, Let's Encrypt, etc.) ---
ssl_certificate /etc/ssl/alliance-boreale/fullchain.pem;
ssl_certificate_key /etc/ssl/alliance-boreale/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers off;
ssl_session_timeout 1d;
ssl_session_cache shared:AB_TLS:10m;
# --- En-têtes de sécurité (site statique, sans pistage) ----------------
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
# Tout le contenu est local : pas de CDN, pas de tiers.
add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; style-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'" always;
# Décommenter une fois le HTTPS stabilisé sur le domaine :
# add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# --- Compression --------------------------------------------------------
gzip on;
gzip_types text/css application/javascript text/html image/svg+xml;
gzip_min_length 1024;
# --- Cache des actifs statiques ----------------------------------------
location /assets/ {
expires 7d;
add_header Cache-Control "public";
}
# --- Routage ------------------------------------------------------------
location / {
try_files $uri $uri/ $uri.html =404;
}
error_page 404 /404.html;
# Pas de logs d'accès nominatifs au-delà du nécessaire (sobriété/vie privée).
access_log /var/log/nginx/alliance-boreale.access.log;
error_log /var/log/nginx/alliance-boreale.error.log;
}

54
site-alliance-boreale/deploy/deployer.sh Executable file
View file

@ -0,0 +1,54 @@
#!/usr/bin/env bash
# =============================================================================
# Déploiement du site Alliance Boréale vers web-frontal-01 (ou tout hôte nginx).
#
# Synchronise public/ vers la racine web distante, puis (optionnel) recharge
# nginx. N'embarque aucun secret. À lancer depuis votre poste.
#
# ./deploy/deployer.sh # déploie avec les valeurs par défaut
# HOTE=web-frontal-01 ./deploy/deployer.sh
# RACINE=/var/www/alliance-boreale UTILISATEUR=ansible ./deploy/deployer.sh
# RECHARGER_NGINX=1 ./deploy/deployer.sh # recharge nginx après copie
# DRY_RUN=1 ./deploy/deployer.sh # simulation, ne copie rien
# =============================================================================
set -euo pipefail
# --- Paramètres (surcharger par variables d'environnement) ------------------
HOTE="${HOTE:-web-frontal-01}"
UTILISATEUR="${UTILISATEUR:-ansible}"
RACINE="${RACINE:-/var/www/alliance-boreale}"
PORT_SSH="${PORT_SSH:-22}"
RECHARGER_NGINX="${RECHARGER_NGINX:-0}"
DRY_RUN="${DRY_RUN:-0}"
# --- Emplacements -----------------------------------------------------------
ICI="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
SOURCE="${ICI}/public/"
if [[ ! -d "${SOURCE}" ]]; then
echo "ERREUR : dossier source introuvable : ${SOURCE}" >&2
exit 1
fi
CIBLE="${UTILISATEUR}@${HOTE}:${RACINE}/"
OPTS_RSYNC=(-az --delete --human-readable --itemize-changes
--exclude ".DS_Store" --exclude "*.swp")
[[ "${DRY_RUN}" == "1" ]] && OPTS_RSYNC+=(--dry-run)
echo "==> Source : ${SOURCE}"
echo "==> Cible : ${CIBLE} (port SSH ${PORT_SSH})"
[[ "${DRY_RUN}" == "1" ]] && echo "==> MODE SIMULATION (aucune écriture)"
echo
rsync "${OPTS_RSYNC[@]}" -e "ssh -p ${PORT_SSH}" "${SOURCE}" "${CIBLE}"
if [[ "${RECHARGER_NGINX}" == "1" && "${DRY_RUN}" != "1" ]]; then
echo
echo "==> Vérification et rechargement de nginx sur ${HOTE}"
ssh -p "${PORT_SSH}" "${UTILISATEUR}@${HOTE}" 'sudo nginx -t && sudo systemctl reload nginx'
fi
echo
echo "==> Terminé."
[[ "${DRY_RUN}" == "1" ]] && echo " (simulation — relancer sans DRY_RUN=1 pour déployer pour de vrai)"

BIN
site-alliance-boreale/promo.piz Normal file
View file

Binary file not shown.

30
site-alliance-boreale/public/404.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page introuvable — Alliance Boréale</title>
<meta name="theme-color" content="#05060f">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<main id="main">
<section class="hero wrap">
<p class="eyebrow">Erreur 404</p>
<h1>Cette <span class="gradient-text">étoile</span> n'existe pas</h1>
<p class="lead">La page demandée s'est éteinte ou n'a jamais brillé. Revenons vers la constellation.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="/index.html">Retour à l'accueil</a>
</div>
</section>
</main>
<script src="/assets/js/constellation.js" defer></script>
</body>
</html>

350
site-alliance-boreale/public/assets/css/styles.css Normal file
View file

@ -0,0 +1,350 @@
/* =========================================================================
Alliance Boréale — souveraineté numérique
Thème : aurore boréale · étoiles · constellation
100 % statique, sans dépendance, sans pistage. Police système (souveraineté).
========================================================================= */
:root {
--bg: #05060f;
--bg-2: #0a0d24;
--panel: rgba(255, 255, 255, 0.045);
--panel-2: rgba(255, 255, 255, 0.07);
--border: rgba(255, 255, 255, 0.10);
--ink: #e9ecff;
--ink-dim: #99a1c9;
--ink-faint: #6b739b;
--aurora-teal: #4fe3c1;
--aurora-cyan: #56c2ff;
--aurora-violet: #a98bff;
--aurora-green: #2ec18f;
--star: #ffffff;
--gold: #ffd58a;
--maxw: 1080px;
--radius: 16px;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* ---------- Ciel : aurore + constellation (fixe, derrière tout) ---------- */
.sky {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(1200px 700px at 80% -10%, #131a44 0%, transparent 60%),
radial-gradient(900px 600px at 10% 0%, #0e1640 0%, transparent 55%),
linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 70%);
}
.sky canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.aurora {
position: absolute;
inset: -20% -10% auto -10%;
height: 70vh;
filter: blur(60px) saturate(140%);
opacity: 0.55;
background:
radial-gradient(40% 60% at 20% 30%, var(--aurora-teal) 0%, transparent 70%),
radial-gradient(45% 70% at 55% 20%, var(--aurora-cyan) 0%, transparent 70%),
radial-gradient(40% 65% at 80% 35%, var(--aurora-violet) 0%, transparent 70%);
animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
0% { transform: translate3d(-4%, -2%, 0) scale(1.05); opacity: 0.45; }
50% { transform: translate3d(3%, 2%, 0) scale(1.15); opacity: 0.60; }
100% { transform: translate3d(6%, -1%, 0) scale(1.08); opacity: 0.50; }
}
/* ---------- Mise en page ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
section { padding: clamp(3rem, 7vw, 6rem) 0; }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aurora-teal);
margin: 0 0 0.6rem;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 6vw, 4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
p { color: var(--ink-dim); margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink); max-width: 60ch; }
a { color: var(--aurora-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.gradient-text {
background: linear-gradient(100deg, var(--aurora-teal), var(--aurora-cyan) 45%, var(--aurora-violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- En-tête / navigation ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
background: rgba(5, 6, 15, 0.55);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
width: 30px; height: 30px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, var(--star) 0 2px, transparent 3px),
conic-gradient(from 200deg, var(--aurora-violet), var(--aurora-cyan), var(--aurora-teal), var(--aurora-violet));
box-shadow: 0 0 18px rgba(86, 194, 255, 0.55);
flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; letter-spacing: 0.01em; }
.brand-sub { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.site-nav ul {
list-style: none;
display: flex;
gap: 0.4rem;
margin: 0; padding: 0;
}
.site-nav a {
display: block;
padding: 0.5rem 0.85rem;
border-radius: 999px;
color: var(--ink-dim);
font-size: 0.95rem;
}
.site-nav a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--panel-2); }
.nav-toggle {
display: none;
background: var(--panel);
border: 1px solid var(--border);
color: var(--ink);
border-radius: 10px;
padding: 0.5rem 0.7rem;
font-size: 0.95rem;
cursor: pointer;
}
/* ---------- Héro ---------- */
.hero { padding-top: clamp(3rem, 8vw, 6.5rem); text-align: center; }
.hero .lead { margin-inline: auto; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
/* ---------- Boutons ---------- */
.btn {
display: inline-block;
padding: 0.8rem 1.4rem;
border-radius: 999px;
font-weight: 600;
border: 1px solid var(--border);
color: var(--ink);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary {
background: linear-gradient(100deg, var(--aurora-teal), var(--aurora-cyan));
color: #04121a;
border-color: transparent;
box-shadow: 0 10px 30px rgba(79, 227, 193, 0.25);
}
.btn-primary:hover { box-shadow: 0 14px 38px rgba(86, 194, 255, 0.35); }
.btn-ghost { background: var(--panel); }
/* ---------- Cartes / grilles ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.6rem;
backdrop-filter: blur(6px);
}
.card h3 { color: var(--ink); }
.card p:last-child { margin-bottom: 0; }
.star-bullet { color: var(--aurora-teal); margin-right: 0.4rem; }
/* ---------- Le Label : paliers ---------- */
.tiers { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.tier {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.8rem 1.6rem;
overflow: hidden;
}
.tier::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
}
.tier-1::before { background: var(--aurora-teal); }
.tier-2::before { background: var(--aurora-cyan); }
.tier-3::before { background: var(--aurora-violet); }
.tier .tier-rank { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.tier h3 { font-size: 1.5rem; margin-top: 0.2rem; }
.tier ul { padding-left: 0; list-style: none; margin: 1rem 0 0; }
.tier li { color: var(--ink-dim); padding: 0.35rem 0; border-top: 1px solid var(--border); }
.tier li:first-child { border-top: none; }
.tier .privilege { color: var(--ink); font-weight: 600; }
/* ---------- Citation ---------- */
.quote {
border-left: 3px solid var(--aurora-cyan);
padding: 0.4rem 0 0.4rem 1.4rem;
font-size: clamp(1.15rem, 2.4vw, 1.6rem);
color: var(--ink);
font-style: italic;
max-width: 60ch;
}
.quote cite { display: block; font-style: normal; font-size: 0.95rem; color: var(--ink-faint); margin-top: 0.8rem; }
/* ---------- Bandeau ---------- */
.panel-feature {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: clamp(1.8rem, 4vw, 3rem);
}
/* ---------- Pied de page ---------- */
.site-footer {
border-top: 1px solid var(--border);
background: rgba(5, 6, 15, 0.6);
padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
margin-top: 2rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
.site-footer nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.site-footer nav a { color: var(--ink-dim); }
.site-footer .legal {
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--ink-faint);
}
/* ---------- Accessibilité ---------- */
:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 3px; border-radius: 6px; }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--aurora-cyan); color: #04121a; padding: 0.6rem 1rem; border-radius: 0 0 10px 0; z-index: 100;
}
.skip-link:focus { left: 0; }
/* ---------- FAQ (accordéons natifs) ---------- */
.faq-group { margin-top: 1rem; }
details.qa {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
margin: 0.7rem 0;
padding: 0 1.3rem;
}
details.qa[open] { background: var(--panel-2); }
details.qa summary {
list-style: none;
cursor: pointer;
position: relative;
padding: 1.1rem 2.2rem 1.1rem 0;
font-weight: 600;
color: var(--ink);
font-size: 1.05rem;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
content: "+";
position: absolute; right: 0; top: 50%;
transform: translateY(-50%);
color: var(--aurora-teal);
font-size: 1.5rem; line-height: 1; font-weight: 400;
transition: transform 0.2s ease;
}
details.qa[open] summary::after { content: "\2212"; }
details.qa .answer {
color: var(--ink-dim);
padding: 0 0 1.3rem;
max-width: 68ch;
}
details.qa .answer strong { color: var(--ink); }
details.qa .answer em { color: var(--aurora-teal); font-style: italic; }
/* ---------- Responsive ---------- */
@media (max-width: 820px) {
.grid-3, .grid-2, .tiers, .footer-grid { grid-template-columns: 1fr; }
.nav-toggle { display: inline-block; }
.site-nav ul {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
gap: 0;
background: rgba(5, 6, 15, 0.96);
border-bottom: 1px solid var(--border);
padding: 0.5rem;
display: none;
}
.site-nav.open ul { display: flex; }
.site-nav a { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.aurora { animation: none; }
html { scroll-behavior: auto; }
}

102
site-alliance-boreale/public/assets/js/constellation.js Normal file
View file

@ -0,0 +1,102 @@
/* Alliance Boréale — champ d'étoiles + constellation.
Vanilla JS, aucune dépendance. Désactivé si l'utilisateur préfère moins
d'animation. La métaphore : chaque artisan est une étoile ; reliés, ils
forment la constellation. */
(function () {
"use strict";
/* ---- Menu mobile ---- */
var nav = document.querySelector(".site-nav");
var toggle = document.querySelector(".nav-toggle");
if (nav && toggle) {
toggle.addEventListener("click", function () {
var open = nav.classList.toggle("open");
toggle.setAttribute("aria-expanded", open ? "true" : "false");
});
}
/* ---- Constellation ---- */
var canvas = document.getElementById("constellation");
if (!canvas) return;
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var ctx = canvas.getContext("2d");
var stars = [];
var w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
var LINK_DIST = 130;
function resize() {
w = canvas.clientWidth;
h = canvas.clientHeight;
canvas.width = w * dpr;
canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed();
}
function seed() {
var count = Math.round((w * h) / 14000);
count = Math.max(40, Math.min(160, count));
stars = [];
for (var i = 0; i < count; i++) {
stars.push({
x: Math.random() * w,
y: Math.random() * h,
r: Math.random() * 1.3 + 0.4,
vx: (Math.random() - 0.5) * 0.12,
vy: (Math.random() - 0.5) * 0.12,
tw: Math.random() * Math.PI * 2
});
}
}
function draw() {
ctx.clearRect(0, 0, w, h);
// liens de constellation
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;
var dy = stars[i].y - stars[j].y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < LINK_DIST) {
var a = (1 - d / LINK_DIST) * 0.22;
ctx.strokeStyle = "rgba(120, 200, 255," + a + ")";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(stars[i].x, stars[i].y);
ctx.lineTo(stars[j].x, stars[j].y);
ctx.stroke();
}
}
}
// étoiles
for (var k = 0; k < stars.length; k++) {
var s = stars[k];
s.tw += 0.02;
var glow = 0.6 + Math.sin(s.tw) * 0.4;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
ctx.fillStyle = "rgba(255,255,255," + glow + ")";
ctx.shadowColor = "rgba(160,220,255,0.9)";
ctx.shadowBlur = 6;
ctx.fill();
ctx.shadowBlur = 0;
if (!reduce) {
s.x += s.vx;
s.y += s.vy;
if (s.x < 0 || s.x > w) s.vx *= -1;
if (s.y < 0 || s.y > h) s.vy *= -1;
}
}
if (!reduce) requestAnimationFrame(draw);
}
window.addEventListener("resize", resize);
resize();
draw(); // un rendu statique si reduce, sinon animé
})();

141
site-alliance-boreale/public/atelier.html Normal file
View file

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>L'atelier — Alliance Boréale</title>
<meta name="description" content="L'atelier ouvert de l'Alliance Boréale : Set-OPS, le moteur Ansible souverain qui déploie des écosystèmes numériques libres, et la forge où vit le code.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html" aria-current="page">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">L'atelier ouvert</p>
<h1>Le moteur derrière la promesse&nbsp;: <span class="gradient-text">Set-OPS</span></h1>
<p class="lead">La souveraineté ne se décrète pas, elle s'outille. <strong>Set-OPS</strong> est le moteur Ansible libre de l'Alliance Boréale&nbsp;: on décrit l'écosystème dans un plan, et la flotte de serveurs se déploie, durcie et reproductible, sur du logiciel libre de bout en bout.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="https://forge.alliance-boreale.ca/Alliance-Boreale/Set-OPS-Public" rel="noopener">Voir le code sur la forge ↗</a>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Comment ça marche</p>
<h2>Un plan déclaratif, une flotte cohérente</h2>
<div class="grid grid-2">
<article class="card">
<h3><span class="star-bullet">✦</span>On édite le plan</h3>
<p>Serveurs, applications, bases de données, domaines&nbsp;: tout est décrit dans des fichiers lisibles. La vérité tient dans le plan, pas dans la tête d'un administrateur.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>L'inventaire se génère</h3>
<p>Set-OPS dérive l'inventaire Ansible depuis le plan&nbsp;: adressage, groupes et rôles découlent de la nomenclature, sans saisie en double.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>Les VM se clonent</h3>
<p>Chaque serveur naît d'un <em>golden template</em> Debian&nbsp;13 durci sur Proxmox&nbsp;: socle commun, identité par cloud-init, puis configuration réelle par Ansible.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>Les rôles s'appliquent</h3>
<p>Par groupes, de façon idempotente. Le même plan rejoué redonne le même état&nbsp;: traçable, auditable, reproductible.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">Un écosystème complet</p>
<h2>Des piliers, tous libres</h2>
<p class="lead">Set-OPS assemble les briques d'un écosystème souverain — chacune un logiciel libre éprouvé&nbsp;:</p>
<div class="grid grid-3" style="margin-top:1.4rem">
<article class="card"><h3>Socle durci</h3><p>Debian 13, AppArmor, auditd, fail2ban, mises à jour automatiques, nftables préparé.</p></article>
<article class="card"><h3>PKI &amp; DNS</h3><p>Autorité de certification interne et résolution de noms souveraine.</p></article>
<article class="card"><h3>Identité &amp; SSO</h3><p>Annuaire et authentification unique pour tout l'écosystème.</p></article>
<article class="card"><h3>Bases de données</h3><p>Stockage relationnel et cache, opérés selon les mêmes règles.</p></article>
<article class="card"><h3>Observabilité</h3><p>Métriques, journaux, tableaux de bord et supervision.</p></article>
<article class="card"><h3>Forge</h3><p>Hébergement du code et de l'automatisation — la forge de l'Alliance.</p></article>
</div>
</div>
</section>
<section class="wrap">
<p class="eyebrow">La forge</p>
<h2>Là où vit le code commun</h2>
<p class="lead">La forge de l'Alliance Boréale héberge Set-OPS et l'automatisation de l'écosystème, sur du logiciel libre. C'est l'un des services mutualisés de l'infrastructure — et la preuve concrète que « tout est libre » n'est pas qu'une devise.</p>
<div class="grid grid-2" style="margin-top:1rem">
<article class="card">
<h3>Explorer le code</h3>
<p><a href="https://forge.alliance-boreale.ca" rel="noopener">forge.alliance-boreale.ca ↗</a></p>
<p>Le moteur Set-OPS y est publié, ouvert à la lecture et à la contribution.</p>
</article>
<article class="card">
<h3>Cloner Set-OPS</h3>
<p>Le moteur est offert à la communauté québécoise&nbsp;:</p>
<p><code>git clone https://forge.alliance-boreale.ca/Alliance-Boreale/Set-OPS-Public.git</code></p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<blockquote class="quote">
« Set-OPS s'exploite entièrement à la main, sans aucune IA. La souveraineté, c'est aussi ne dépendre d'aucune boîte noire. »
</blockquote>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

107
site-alliance-boreale/public/constellation.html Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La Constellation — Alliance Boréale</title>
<meta name="description" content="Chaque artisan est une étoile ; ensemble, ils forment une constellation. Réciprocité, entraide et résilience collective au sein de l'Alliance Boréale.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html" aria-current="page">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">La Constellation</p>
<h1>Chaque artisan est une <span class="gradient-text">étoile</span></h1>
<p class="lead">Pris séparément, un artisan du numérique reste fragile&nbsp;: une panne, une absence, un sinistre. Reliés, les artisans forment une constellation — un dessin stable que l'on reconnaît dans le ciel, même si une étoile vacille.</p>
<blockquote class="quote" style="margin-top:2rem">
« Tu ne dépends pas d'une étoile, mais de la constellation. »
</blockquote>
</section>
<section class="wrap">
<p class="eyebrow">Comment ça tient</p>
<h2>La réciprocité, pas la hiérarchie</h2>
<div class="grid grid-3">
<article class="card">
<h3><span class="star-bullet">✦</span>Entraide opérée</h3>
<p>L'infrastructure commune — DNS, forges, supervision, sauvegardes — est portée par le réseau, pas par chacun dans son coin.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>Reprise mutuelle</h3>
<p>Si une étoile tombe, une autre reprend ses clients. La portabilité prouvée rend cette promesse réelle, pas théorique.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>Audit entre pairs</h3>
<p>On se vérifie mutuellement, avec bienveillance et rigueur. La confiance circule de pair à pair, gratuitement.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">Qui peut rejoindre</p>
<h2>Une place pour chaque étoile</h2>
<p class="lead">L'Alliance Boréale s'adresse aux artisans et organisations du numérique au Québec — petits ou grands — qui veulent offrir des services souverains, libres et dignes de confiance. On entre par la transparence&nbsp;: on déclare ce que l'on fait, on accepte le regard des pairs, on progresse à travers le Label.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="contact.html">Parler de votre adhésion</a>
<a class="btn btn-ghost" href="label.html">Comprendre le Label</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

100
site-alliance-boreale/public/contact.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact — Alliance Boréale</title>
<meta name="description" content="Entrer en contact avec l'Alliance Boréale, fédération québécoise d'acteurs du numérique éthique.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html" aria-current="page">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">Contact</p>
<h1>Allumons une <span class="gradient-text">nouvelle étoile</span></h1>
<p class="lead">Vous portez un projet numérique souverain, ou vous voulez rejoindre la constellation&nbsp;? Écrivez-nous. L'Alliance Boréale est un projet collectif et polyphonique — votre voix y a sa place.</p>
</section>
<section class="wrap">
<div class="grid grid-2">
<article class="card">
<h3>Nous écrire</h3>
<p>
<!-- TODO : remplacer par l'adresse réelle de l'Alliance -->
<a href="mailto:info@alliance-boreale.ca">info@alliance-boreale.ca</a>
</p>
<p>Site officiel&nbsp;: <a href="https://alliance-boreale.ca">alliance-boreale.ca</a></p>
</article>
<article class="card">
<h3>Président-fondateur</h3>
<p><strong>Daniel Allaire</strong></p>
<p>Porteur d'une vision&nbsp;: une façon différente, responsable et durable, de concevoir nos écosystèmes numériques.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<blockquote class="quote">
« L'Alliance Boréale, c'est avant tout une vision&nbsp;: une façon différente de concevoir nos écosystèmes numériques. »
<cite>— Daniel Allaire, président-fondateur</cite>
</blockquote>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

236
site-alliance-boreale/public/faq.html Normal file
View file

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FAQ — Alliance Boréale</title>
<meta name="description" content="Questions et réponses franches sur l'Alliance Boréale et Set-OPS : des professionnels du milieu aux décideurs publics, en passant par les clients et le Label.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html" aria-current="page">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">Questions &amp; réponses</p>
<h1>Des réponses <span class="gradient-text">franches</span></h1>
<p class="lead">Voici les questions qu'on nous pose le plus souvent — des professionnels du milieu aux décideurs publics. Quand quelque chose est encore en chantier, on le dit&nbsp;: la franchise distingue l'artisan sérieux du vendeur de rêve.</p>
</section>
<section class="wrap">
<p class="eyebrow">Aux professionnels du milieu</p>
<h2>MSP, intégrateurs, revendeurs</h2>
<div class="faq-group">
<details class="qa">
<summary>Confier des données de PME à des structures moins outillées, n'est-ce pas risqué&nbsp;?</summary>
<div class="answer">L'outil <strong>encode les bonnes pratiques</strong> — durcissement, PKI interne, validations à chaque étape, golden template commun. Il <strong>élève le plancher</strong>, il ne l'abaisse pas. Un sysadmin compétent n'est pas un amateur&nbsp;; il lui manquait surtout un levier. Et la continuité ne repose plus sur un individu, mais sur le <strong>réseau</strong>.</div>
</details>
<details class="qa">
<summary>Vous cassez le marché avec du gratuit.</summary>
<div class="answer">On ne casse rien&nbsp;: on <strong>rouvre</strong> un marché que les géants étrangers ont capté. L'outil est libre, mais l'expertise et le service, eux, se paient — c'est le modèle <strong>Red Hat</strong>. Et très franchement, un professionnel aguerri serait un excellent candidat&nbsp;: l'outil le rend plus efficace, <em>il ne le remplace pas</em>.</div>
</details>
<details class="qa">
<summary>Vous n'aurez jamais notre échelle ni nos SLA.</summary>
<div class="answer">Exact, et c'est volontaire. On ne cherche pas à battre le géant sur son terrain — le capital — <strong>on change de terrain</strong>&nbsp;: la proximité et la souveraineté. Pour une PME, un hébergeur local qu'on peut appeler vaut souvent mieux qu'un SLA papier d'un géant injoignable.</div>
</details>
<details class="qa">
<summary>Pourquoi ne devrais-je pas vous voir comme un concurrent&nbsp;?</summary>
<div class="answer">Parce que le vrai concurrent, celui qui aspire vos clients année après année, c'est l'<strong>hyperscaler</strong> — pas nous. Nous, on vous donne le levier pour les <strong>garder ici</strong>, au Québec. On joue dans la même équipe.</div>
</details>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Aux prudents et exigeants</p>
<h2>Techniciens et investisseurs prudents</h2>
<div class="faq-group">
<details class="qa">
<summary>Un hébergeur seul peut-il offrir la fiabilité d'un hyperscaler&nbsp;?</summary>
<div class="answer">Seul, non — et on ne le prétend pas. <strong>En constellation, oui</strong>, et c'est tout le design. La clé, c'est la <strong>portabilité</strong>&nbsp;: l'écosystème d'un client est un plan déclaratif reproductible. Si un hébergeur tombe, un autre le ré-instancie ailleurs. Le client ne fait pas confiance à un individu, mais au <strong>standard et au réseau</strong>.</div>
</details>
<details class="qa">
<summary>Qui est responsable quand ça plante&nbsp;? Sauvegardes, reprise&nbsp;?</summary>
<div class="answer">L'hébergeur, contractuellement, comme tout hébergeur. La différence&nbsp;: plus de point unique de défaillance humain. <em>Honnêtement, la sauvegarde et la reprise sont des volets encore à muscler — c'est sur la feuille de route.</em></div>
</details>
<details class="qa">
<summary>Le Québec ne peut pas rivaliser avec des milliards de R&amp;D.</summary>
<div class="answer">On ne <strong>rivalise pas</strong> en R&amp;D — on récupère ce qui fuit déjà. Des dizaines de milliers de PME paient des géants étrangers&nbsp;; en rapatrier une fraction localement, c'est énorme. Ça ne demande pas de battre AWS, juste d'offrir une <strong>alternative souveraine et joignable</strong>.</div>
</details>
<details class="qa">
<summary>Open source, n'est-ce pas synonyme de mal maintenu&nbsp;?</summary>
<div class="answer">Maintenu par un artisan <strong>et</strong> par l'Alliance, avec des validations automatiques à chaque changement. Et un point fort sous-estimé&nbsp;: l'outil s'exploite entièrement <strong>à la main, sans aucune IA</strong>, sans magie ni opacité — un humain lit et comprend tout. La transparence, c'est <em>l'inverse</em> du trou de sécurité.</div>
</details>
<details class="qa">
<summary>Vous réinventez NetBox ou YunoHost.</summary>
<div class="answer">On en recoupe des morceaux, on l'assume — c'est écrit noir sur blanc dans le dépôt. Mais l'<strong>assemblage</strong> — Proxmox + Ansible + un modèle souverain léger, possédé en entier — n'existe nulle part. Et la règle est claire&nbsp;: <em>si on se surprend à réimplémenter un NetBox, on l'adopte — on ne le réécrit pas</em>.</div>
</details>
<details class="qa">
<summary>N'est-ce pas déjà ce que font les CHATONS&nbsp;?</summary>
<div class="answer">Un cousin qu'on admire — et il en existe déjà au Québec, donc on s'inscrit dans leur lignée. Mais deux pièces leur manquent <strong>par choix</strong>&nbsp;: un moteur technique commun (chaque chaton bricole sa propre stack) et un modèle viable pour servir des entreprises. On ajoute exactement ça&nbsp;: la <strong>portabilité</strong> et l'outillage. Pas un rival — le cousin d'ici, outillé.</div>
</details>
<details class="qa">
<summary>C'est déployé en production, ou c'est de la vapeur&nbsp;?</summary>
<div class="answer">Le moteur et la modélisation sont <strong>prouvés et validés</strong>&nbsp;; le déploiement à grande échelle sur de vraies machines est l'<strong>étape en cours</strong>. On ne vend pas du « déployé partout » — on montre une fondation solide et un chemin clair.</div>
</details>
<details class="qa">
<summary>C'est construit avec une IA — est-ce sérieux et maintenable&nbsp;?</summary>
<div class="answer">L'IA a aidé à <em>construire</em>, mais l'outil <strong>ne dépend d'aucune IA</strong> pour s'exécuter ni se maintenir — c'est un impératif gravé dans le dépôt. Tout est commité, documenté, validé, lisible par un humain. La souveraineté va jusque-là&nbsp;: <strong>pas de laisse, ni géant, ni IA</strong>.</div>
</details>
<details class="qa">
<summary>Êtes-vous certifiés SOC&nbsp;2 ou ISO&nbsp;?</summary>
<div class="answer">Pas aujourd'hui, et on ne le prétend pas. SOC&nbsp;2 est un audit lourd, coûteux et surtout <strong>américain</strong> — un peu dissonant dans un récit de souveraineté. Ce que l'outil montre déjà&nbsp;: il encode les <strong>principes</strong> que ces normes auditent (sécurité, disponibilité, traçabilité), avec une trajectoire vers <strong>ISO&nbsp;27001</strong> à mesure que la constellation mûrit.</div>
</details>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Aux curieux et futurs partenaires</p>
<h2>Clients, hébergeurs candidats, alliés</h2>
<div class="faq-group">
<details class="qa">
<summary>En quoi est-ce mieux que Google ou AWS&nbsp;?</summary>
<div class="answer">Tes données restent au Québec, chez un humain que tu peux <strong>appeler</strong>, sans verrouillage propriétaire. C'est souvent moins cher à ton échelle — et surtout <strong>réversible</strong>&nbsp;: tu repars avec ton écosystème quand tu veux. Tu n'es jamais prisonnier.</div>
</details>
<details class="qa">
<summary>Et si mon hébergeur disparaît&nbsp;?</summary>
<div class="answer">Tu n'es pas coincé&nbsp;: ton écosystème est <strong>portable</strong>, et un autre artisan de la constellation le reprend. Tu ne dépends pas d'un homme, mais d'un <strong>réseau et d'un standard</strong>. C'est ça, la vraie sécurité.</div>
</details>
<details class="qa">
<summary>Est-ce aussi simple que le cloud&nbsp;?</summary>
<div class="answer">Pour toi, oui — l'artisan s'occupe de toute la technique. La différence, c'est qu'il est <strong>à toi</strong>, local, joignable, et que tu n'es jamais enfermé. <em>Le confort du cloud, sans la laisse.</em></div>
</details>
<details class="qa">
<summary>Qu'est-ce qu'il me faut pour me lancer comme hébergeur&nbsp;?</summary>
<div class="answer">Des bases solides en <strong>Linux, Ansible et Proxmox</strong>, une grappe Proxmox, et l'envie. L'outil est libre et ouvert&nbsp;; tu pars d'un <strong>modèle prêt à déployer</strong>, tu le mets à tes couleurs, et un guide pas-à-pas te tient la main.</div>
</details>
<details class="qa">
<summary>Est-ce que je peux en vivre&nbsp;?</summary>
<div class="answer">Le modèle est celui de la <strong>boutique</strong>&nbsp;: peu de clients, à haute valeur, bien servis. Le levier de l'outil et le <strong>Label</strong> de l'Alliance te rendent crédible face à des PME qui veulent du local. Tu ne vises pas le volume — tu vises la <strong>relation</strong>.</div>
</details>
<details class="qa">
<summary>Comment fonctionne la gouvernance&nbsp;?</summary>
<div class="answer">Une <strong>alliance sans subordination</strong>&nbsp;: chaque membre reste pleinement souverain, et on mutualise ce qui a du sens — DNS, forge, supervision, label. La gouvernance est distribuée, et prendra une forme <strong>coopérative ou OBNL</strong> quand la constellation aura sa masse critique.</div>
</details>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Aux décideurs publics</p>
<h2>Décideurs, médias, bailleurs</h2>
<div class="faq-group">
<details class="qa">
<summary>En quoi est-ce un enjeu de souveraineté pour le Québec&nbsp;?</summary>
<div class="answer">Aujourd'hui, les <strong>données et les dollars</strong> des PME québécoises partent chez des géants étrangers, soumis à des lois étrangères. Set-OPS et l'Alliance gardent les deux ici&nbsp;: <strong>sous le droit d'ici, contrôlés par des gens d'ici</strong>. La souveraineté numérique, concrètement.</div>
</details>
<details class="qa">
<summary>Et le Cloud Act, les lois étrangères&nbsp;?</summary>
<div class="answer">Des données chez un géant américain restent soumises au <strong>Cloud Act</strong>, même hébergées ici. Un hébergement souverain local, lui, relève <strong>uniquement du droit canadien et québécois</strong>. La localisation ne suffit pas — <strong>il faut la propriété</strong>.</div>
</details>
<details class="qa">
<summary>Qu'en est-il de la Loi&nbsp;25&nbsp;?</summary>
<div class="answer">La Loi&nbsp;25 exige une évaluation avant toute communication de renseignements personnels <strong>hors Québec</strong> — une vraie friction. L'hébergement local l'<strong>efface</strong>&nbsp;: pas de transfert à justifier, pas d'exposition à un droit étranger. <em>La conformité reste toutefois organisationnelle — l'outil la facilite, il ne la garantit pas.</em></div>
</details>
<details class="qa">
<summary>Quelles retombées économiques concrètes&nbsp;?</summary>
<div class="answer">On rapatrie une part des dépenses cloud de milliers de PME, et on crée des <strong>emplois d'artisans numériques répartis sur le territoire</strong> — régions comprises — plutôt que concentrés dans une tour. La valeur <strong>circule localement</strong>.</div>
</details>
<details class="qa">
<summary>Est-ce pertinent pour les données publiques et le parapublic&nbsp;?</summary>
<div class="answer">Oui, dès aujourd'hui&nbsp;: hébergement souverain pour OBNL, collectivités et organismes, avec une <strong>localisation et un contrôle réels</strong>, hors juridiction étrangère. C'est exactement le terrain où la souveraineté compte le plus.</div>
</details>
<details class="qa">
<summary>Est-ce sérieux, ou un rêve militant&nbsp;?</summary>
<div class="answer">La fondation technique est réelle et validée, et le modèle économique est éprouvé&nbsp;: du <strong>libre + des services</strong>, façon Red Hat. On ne parie pas des milliards — on <strong>réplique une petite cellule qui fonctionne</strong>. Une croissance <em>fractale</em>, pas un pari d'hyperscaler.</div>
</details>
<details class="qa">
<summary>Et la sobriété numérique, l'environnement&nbsp;?</summary>
<div class="answer">Le modèle est <strong>décentralisé et dimensionné juste</strong> — pas la surcapacité permanente d'un hyperscaler. C'est une valeur fondatrice de l'Alliance, pas un argument de façade.</div>
</details>
<details class="qa">
<summary>Comment l'État ou un bailleur peut-il aider&nbsp;?</summary>
<div class="answer">Trois leviers&nbsp;: <strong>orienter ses propres besoins</strong> vers du souverain&nbsp;; <strong>financer la structuration</strong> (coopérative ou OBNL) et la formation des hébergeurs&nbsp;; et <strong>reconnaître le Label</strong> comme gage de confiance. Pas subventionner un géant — <strong>outiller une constellation</strong>.</div>
</details>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Le Label de l'Alliance</p>
<h2>Une garantie vérifiable, jamais une hiérarchie de prestige</h2>
<div class="faq-group">
<details class="qa">
<summary>Qu'est-ce que le Label, concrètement&nbsp;?</summary>
<div class="answer">Trois niveaux <strong>accumulatifs</strong>, qui certifient la <strong>garantie offerte au client</strong> — pas le « prestige » de l'artisan. <strong>Souverain</strong>&nbsp;: libre, local, transparent (le socle). <strong>Résilient</strong>&nbsp;: portable et couvert — si une étoile s'éteint, une autre te reprend. <strong>Exemplaire</strong>&nbsp;: porte le commun (contribution, transparence). Chaque niveau ajoute <em>autant d'obligations que de privilèges</em>. <a href="label.html">Voir le détail du Label</a>.</div>
</details>
<details class="qa">
<summary>Un audit par les pairs va-t-il exposer mes méthodes&nbsp;?</summary>
<div class="answer">Non. Comme le standard est <strong>ouvert et déclaratif</strong>, le pair vérifie la <strong>conformité au barème</strong> via des preuves <strong>publiques</strong> (le plan, les CGU, la pile libre) + une <strong>démo de reprise</strong> — pas ta recette. Tu montres que ta stack atteint une <strong>barre publique</strong>&nbsp;; tu n'ouvres pas tes livres. <em>L'Alliance ne se mêle jamais de ta régie interne — ni salaires, ni prix.</em></div>
</details>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">Une autre question&nbsp;?</p>
<h2>Écrivez-nous</h2>
<p class="lead">On répond avec la même franchise. Et si on ne sait pas, on le dit.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="contact.html">Nous contacter</a>
<a class="btn btn-ghost" href="atelier.html">Voir l'atelier</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

46
site-alliance-boreale/public/favicon.svg Normal file
View file

@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Alliance Boréale">
<defs>
<radialGradient id="sky" cx="50%" cy="36%" r="75%">
<stop offset="0%" stop-color="#10184a"/>
<stop offset="100%" stop-color="#05060f"/>
</radialGradient>
<linearGradient id="aurora" 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="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#bfe9ff"/>
<stop offset="100%" stop-color="#bfe9ff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="star" cx="50%" cy="45%" r="60%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#d6ecff"/>
</radialGradient>
</defs>
<!-- ciel nocturne -->
<circle cx="16" cy="16" r="16" fill="url(#sky)"/>
<!-- ruban d'aurore -->
<path d="M3 21 C 9 16, 13 23, 18 18 C 22 14, 26 17, 30 13"
fill="none" stroke="url(#aurora)" stroke-width="2.6"
stroke-linecap="round" opacity="0.85"/>
<!-- petites étoiles (constellation) -->
<circle cx="7" cy="9" r="0.9" fill="#cfe6ff"/>
<circle cx="24" cy="8" r="1.1" fill="#ffffff"/>
<circle cx="26" cy="22" r="0.8" fill="#bfe9ff"/>
<circle cx="9" cy="25" r="0.7" fill="#cfe6ff"/>
<!-- halo de l'étoile centrale -->
<circle cx="16" cy="15" r="9" fill="url(#glow)" opacity="0.55"/>
<!-- étoile centrale à quatre branches -->
<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(#star)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

124
site-alliance-boreale/public/index.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alliance Boréale — souveraineté numérique</title>
<meta name="description" content="Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée — une constellation d'artisans sous l'aurore.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html" aria-current="page">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap">
<p class="eyebrow">Fédération québécoise du numérique éthique</p>
<h1>Bâtir ensemble une <span class="gradient-text">infrastructure numérique souveraine</span></h1>
<p class="lead">L'Alliance Boréale réunit des artisans du numérique qui partagent une même exigence : responsabilité, traçabilité, portabilité et sobriété. Chacun est une étoile&nbsp;; ensemble, nous formons une constellation.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="vision.html">Découvrir la vision</a>
<a class="btn btn-ghost" href="label.html">Le Label de confiance</a>
</div>
</section>
<section class="wrap">
<div class="grid grid-3">
<article class="card">
<h3>Infrastructure mutualisée</h3>
<p>DNS, forges, supervision et sauvegardes opérés en commun, sur du logiciel libre. La robustesse d'un grand opérateur, à l'échelle d'un artisan.</p>
</article>
<article class="card">
<h3>Un Label de confiance</h3>
<p>Trois niveaux — Souverain, Résilient, Exemplaire — qui certifient la garantie offerte au client, pas la taille de l'entreprise.</p>
</article>
<article class="card">
<h3>Tout est libre</h3>
<p>L'écosystème entier se construit exclusivement avec du logiciel libre. Pas de boîte noire, pas de dépendance, pas de pistage.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<blockquote class="quote">
« Tu ne dépends pas d'une étoile, mais de la constellation. »
<cite>— le principe de réciprocité de l'Alliance Boréale</cite>
</blockquote>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">L'atelier ouvert</p>
<h2>Le moteur derrière la promesse&nbsp;: Set-OPS</h2>
<p class="lead">Notre souveraineté est outillée. <strong>Set-OPS</strong>, notre moteur Ansible libre, déploie des écosystèmes numériques durcis et reproductibles — et tout le code vit sur notre forge, ouvert à qui veut le lire.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="atelier.html">Voir l'atelier</a>
<a class="btn btn-ghost" href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a>
</div>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Pourquoi maintenant</p>
<h2>Le numérique souverain n'est pas un slogan</h2>
<p class="lead">C'est une façon différente de concevoir nos écosystèmes&nbsp;: des données qui restent au Québec, des outils que l'on comprend de bout en bout, une résilience qui ne tient pas à un seul acteur. L'Alliance Boréale en fait un bien commun, documenté et partagé.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="constellation.html">Rejoindre la constellation</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

152
site-alliance-boreale/public/label.html Normal file
View file

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Label — Alliance Boréale</title>
<meta name="description" content="Le Label de l'Alliance Boréale : trois niveaux accumulatifs — Souverain, Résilient, Exemplaire. Il certifie la garantie offerte au client, par des audits entre pairs.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html" aria-current="page">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">Le Label de confiance</p>
<h1>Trois niveaux, <span class="gradient-text">une même promesse au client</span></h1>
<p class="lead">Le Label certifie la <strong>garantie offerte au client</strong> — jamais la « valeur » de l'artisan ni ses méthodes internes. Les niveaux sont <strong>accumulatifs</strong>&nbsp;: chacun ajoute autant d'obligations que de privilèges. Noblesse oblige.</p>
</section>
<section class="wrap">
<div class="tiers">
<article class="tier tier-1">
<p class="tier-rank">Niveau 1 · Socle</p>
<h3>Souverain</h3>
<p>Le socle de confiance que tous respectent.</p>
<ul>
<li>100 % logiciel libre</li>
<li>Données hébergées au Québec</li>
<li>Durcissement appliqué (Set-OPS)</li>
<li>CGU claires — zéro revente, zéro pub</li>
<li>Sauvegardes en place</li>
</ul>
</article>
<article class="tier tier-2">
<p class="tier-rank">Niveau 2 · + Souverain</p>
<h3>Résilient</h3>
<p>Le client est libre, et couvert s'il tombe.</p>
<ul>
<li>Portabilité prouvée (pas seulement promise)</li>
<li>Reprise après sinistre testée</li>
<li>Supervision active</li>
<li>Résilience par géo-redondance <em>ou</em> par réciprocité de la constellation</li>
<li class="privilege">✦ « La constellation te reprend » si tu tombes</li>
</ul>
</article>
<article class="tier tier-3">
<p class="tier-rank">Niveau 3 · + Résilient</p>
<h3>Exemplaire</h3>
<p>Celui qui porte le commun.</p>
<ul>
<li>Contribution vérifiable au commun (code, doc, formation, mentorat)</li>
<li>Transparence renforcée envers les clients</li>
<li>Audit pair-à-pair approfondi</li>
<li>Aucune ingérence dans la régie interne&nbsp;: ni salaires, ni prix, ni méthodes</li>
<li class="privilege">✦ Voix accrue dans la gouvernance de l'Alliance</li>
</ul>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">Un garde-fou social</p>
<h2>Le mérite, pas le capital</h2>
<div class="grid grid-2" style="margin-top:1rem">
<article class="card">
<h3>La résilience peut être collective</h3>
<p>Un petit artisan atteint « Résilient » par la réciprocité de la constellation, sans s'imposer une coûteuse géo-redondance. La force du réseau remplace la taille.</p>
</article>
<article class="card">
<h3>« Exemplaire » se gagne par la générosité</h3>
<p>On y accède par la contribution et l'éthique, pas par le chiffre d'affaires. Un petit artisan généreux y accède&nbsp;; un gros sans contribution, non.</p>
</article>
</div>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Comment on certifie</p>
<h2>Par la transparence, entre pairs</h2>
<div class="grid grid-3">
<article class="card">
<h3><span class="star-bullet">✦</span>Audits pair-à-pair</h3>
<p>À tous les niveaux, rigueur croissante. Pas de tiers externe payant&nbsp;: gratuit, réciproque, et ça tisse la constellation.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>Preuves publiques</h3>
<p>Le pair vérifie la conformité à un barème public via des preuves déclaratives — plan Set-OPS, CGU, pile libre — et une démo de reprise réciproque. On ne fouille pas tes méthodes.</p>
</article>
<article class="card">
<h3><span class="star-bullet">✦</span>La porte d'entrée</h3>
<p>La transparence est l'entrée, pas une contrainte. Le profil totalement fermé, qui refuse toute vérification, s'auto-exclut — c'est tout.</p>
</article>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>

119
site-alliance-boreale/public/vision.html Normal file
View file

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vision — Alliance Boréale</title>
<meta name="description" content="Gouvernance numérique souveraine : responsabilité, traçabilité, portabilité, sobriété. Une infrastructure mutualisée et un bien commun, exclusivement en logiciel libre.">
<meta name="theme-color" content="#05060f">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Aller au contenu</a>
<div class="sky" aria-hidden="true">
<canvas id="constellation"></canvas>
<div class="aurora"></div>
</div>
<header class="site-header">
<a class="brand" href="index.html">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-text">
<span class="brand-name">Alliance Boréale</span>
<span class="brand-sub">souveraineté numérique</span>
</span>
</a>
<nav class="site-nav" aria-label="Navigation principale">
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="vision.html" aria-current="page">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section class="hero wrap" style="text-align:left">
<p class="eyebrow">Notre vision</p>
<h1>La <span class="gradient-text">gouvernance numérique souveraine</span> comme bien commun</h1>
<p class="lead">L'Alliance Boréale n'est pas qu'une infrastructure&nbsp;: c'est une façon différente de concevoir nos écosystèmes numériques. Une infrastructure que l'on comprend, que l'on possède, et dont on répond.</p>
</section>
<section class="wrap">
<p class="eyebrow">Quatre exigences</p>
<h2>Ce qui nous tient ensemble</h2>
<div class="grid grid-2">
<article class="card">
<h3>Responsabilité</h3>
<p>Chaque acteur répond de ses services devant ses clients et devant ses pairs. La confiance se mérite et se documente.</p>
</article>
<article class="card">
<h3>Traçabilité</h3>
<p>Ce qui est déployé est décrit, versionné, auditable. Pas de magie&nbsp;: des configurations explicites, comprises de bout en bout.</p>
</article>
<article class="card">
<h3>Portabilité</h3>
<p>Le client n'est jamais prisonnier. Ses données et ses services peuvent migrer d'une étoile à l'autre&nbsp;: c'est prouvé, pas promis.</p>
</article>
<article class="card">
<h3>Sobriété</h3>
<p>Des outils dimensionnés au besoin réel, durables, économes. La sobriété numérique est aussi une responsabilité environnementale.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="panel-feature">
<p class="eyebrow">Concrètement</p>
<h2>Une infrastructure mutualisée</h2>
<p class="lead">Seuls, les artisans réinventent chacun la même plomberie. Ensemble, nous l'opérons une fois, bien, en commun&nbsp;:</p>
<div class="grid grid-2" style="margin-top:1.4rem">
<article class="card"><h3><span class="star-bullet">✦</span>DNS interne</h3><p>Résolution de noms souveraine pour tout l'écosystème.</p></article>
<article class="card"><h3><span class="star-bullet">✦</span>Forges</h3><p>Hébergement du code et de l'automatisation, chez nous.</p></article>
<article class="card"><h3><span class="star-bullet">✦</span>Supervision</h3><p>Métriques, journaux et alertes pour veiller sur la flotte.</p></article>
<article class="card"><h3><span class="star-bullet">✦</span>Sauvegardes</h3><p>Des copies testées&nbsp;: la reprise se vérifie, elle ne se suppose pas.</p></article>
</div>
</div>
</section>
<section class="wrap">
<p class="eyebrow">Le socle</p>
<h2>Tout est libre</h2>
<p class="lead">L'écosystème de l'Alliance Boréale se construit <strong>exclusivement avec du logiciel libre</strong>. Ce n'est pas un choix d'outillage&nbsp;: c'est la condition de la souveraineté. Du logiciel que l'on peut lire, auditer, corriger et transmettre — sans demander la permission de personne.</p>
<div class="hero-cta" style="justify-content:flex-start">
<a class="btn btn-primary" href="label.html">Voir comment on le certifie</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<span class="brand-name" style="font-size:1.1rem">Alliance Boréale</span>
<p>Fédération québécoise d'acteurs du numérique éthique. Une infrastructure souveraine, libre et mutualisée.</p>
</div>
<nav aria-label="Pied de page">
<ul>
<li><a href="vision.html">Vision</a></li>
<li><a href="label.html">Le Label</a></li>
<li><a href="constellation.html">La Constellation</a></li>
<li><a href="atelier.html">L'atelier</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://forge.alliance-boreale.ca" rel="noopener">La forge ↗</a></li>
</ul>
</nav>
</div>
<p class="wrap legal">© 2026 Alliance Boréale · souveraineté numérique · Site bâti en logiciel libre, sans pistage.</p>
</footer>
<script src="assets/js/constellation.js" defer></script>
</body>
</html>