924d127ab4
Refonte visuelle et accessibilité (WCAG 2.2 AA) de la section /legal/ sans toucher au contenu juridique signé (dc4ac97). Templates : - templates/legal/index.html : grille 6 cartes (5 internes + AGPL externe) avec icônes SVG sémantiques, hero gradient, bloc info sous-processeurs, carte AGPL ↗ (target=_blank, rel=noopener noreferrer). - templates/legal/_layout.html : breadcrumb sticky, TOC sticky desktop + collapsible mobile (Alpine.js + IntersectionObserver), prev/next nav entre les 6 docs, skip link, landmarks (main / aside / nav), typographie améliorée (h2 avec accent gradient, tables zebrées, blockquotes), print stylesheet (cache header/breadcrumb/TOC/prev-next). Routes (src/legal/routes.py) : - DISPLAY_ORDER + EXTERNAL_LINKS + PAGE_ICONS exposés. - legal_page() calcule prev/next via _neighbour() helper. - legal_index() concatène pages internes + EXTERNAL_LINKS dans `pages`. Footer : lien AGPL déjà présent depuisdc4ac97(col 4 Compte, ligne 49). Tests (tests/test_legal_pages.py) : 9 anciens + 9 nouveaux = 18/18 PASS - AGPL external link (target+rel) - 5 internes + 1 externe sur l'index - Skip link présent partout - Prev/next existe sur chaque page - Conditions (1ère) sans prev / Mentions (dernière) sans next - Landmarks aside aria-label="Table des matières" - Landmark main role + id="main-content" - Breadcrumb avec aria-current="page" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
380 lines
14 KiB
HTML
380 lines
14 KiB
HTML
{% extends 'marketing/base.html' %}
|
||
|
||
{% block title %}{{ title }} — DictIA{% endblock %}
|
||
{% block description %}{{ description }}{% endblock %}
|
||
|
||
{% block head_extra %}
|
||
<style>
|
||
/* ---------------------------------------------------------------------------
|
||
Typographie pour le markdown rendu (héritée de B-2.9, étendue B-2.10).
|
||
Inlinée pour ne pas avoir à reconstruire static/css/marketing.css.
|
||
--------------------------------------------------------------------------- */
|
||
.legal-content h2 {
|
||
position: relative;
|
||
font-size: 1.5rem; /* 24px */
|
||
line-height: 2rem;
|
||
font-weight: 700;
|
||
color: #060d1a; /* brand-navy */
|
||
margin-top: 2.75rem;
|
||
margin-bottom: 1rem;
|
||
letter-spacing: -0.022em;
|
||
scroll-margin-top: 90px; /* pour ancres sous le header sticky */
|
||
}
|
||
.legal-content h2::after {
|
||
content: '';
|
||
display: block;
|
||
width: 56px;
|
||
height: 4px;
|
||
margin-top: 0.5rem;
|
||
border-radius: 4px;
|
||
background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896);
|
||
}
|
||
.legal-content h3 {
|
||
font-size: 1.25rem; /* 20px */
|
||
line-height: 1.75rem;
|
||
font-weight: 600;
|
||
color: #060d1a;
|
||
margin-top: 2rem;
|
||
margin-bottom: 0.75rem;
|
||
scroll-margin-top: 90px;
|
||
}
|
||
.legal-content h4 {
|
||
font-size: 1.05rem;
|
||
font-weight: 600;
|
||
color: #060d1a;
|
||
margin-top: 1.25rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.legal-content p {
|
||
margin-bottom: 1rem;
|
||
font-size: 1rem;
|
||
line-height: 1.75;
|
||
}
|
||
.legal-content ul,
|
||
.legal-content ol {
|
||
margin-bottom: 1rem;
|
||
margin-left: 1.5rem;
|
||
line-height: 1.75;
|
||
}
|
||
.legal-content ul { list-style-type: disc; list-style-position: outside; }
|
||
.legal-content ol { list-style-type: decimal; list-style-position: outside; }
|
||
.legal-content li { margin-bottom: 0.35rem; }
|
||
.legal-content a {
|
||
background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
text-decoration-color: #0062ff;
|
||
}
|
||
.legal-content a:focus-visible {
|
||
outline: 2px solid #0062ff;
|
||
outline-offset: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
.legal-content table {
|
||
width: 100%;
|
||
margin: 1rem 0 1.5rem;
|
||
border-collapse: collapse;
|
||
font-size: 0.875rem;
|
||
}
|
||
.legal-content th,
|
||
.legal-content td {
|
||
border: 1px solid #e6ebf2;
|
||
padding: 0.6rem 0.75rem;
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
.legal-content th {
|
||
background-color: #f7f9fc;
|
||
font-weight: 600;
|
||
color: #060d1a;
|
||
}
|
||
.legal-content tbody tr:nth-child(even) td {
|
||
background-color: #fafbfd;
|
||
}
|
||
.legal-content blockquote {
|
||
border-left: 4px solid #0062ff;
|
||
background-color: rgba(247, 249, 252, 0.6);
|
||
padding: 0.75rem 1rem;
|
||
margin: 1.25rem 0;
|
||
border-radius: 0 8px 8px 0;
|
||
font-style: italic;
|
||
color: rgba(6, 13, 26, 0.75);
|
||
}
|
||
.legal-content code {
|
||
padding: 0.15rem 0.4rem;
|
||
background-color: #f7f9fc;
|
||
border-radius: 4px;
|
||
font-size: 0.875rem;
|
||
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
|
||
}
|
||
.legal-content pre {
|
||
background-color: #f7f9fc;
|
||
border: 1px solid #e6ebf2;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
overflow-x: auto;
|
||
margin-bottom: 1.25rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
.legal-content pre code {
|
||
background-color: transparent;
|
||
padding: 0;
|
||
}
|
||
.legal-content hr {
|
||
margin: 2rem 0;
|
||
border: none;
|
||
border-top: 1px solid #e6ebf2;
|
||
}
|
||
.legal-content strong { font-weight: 700; color: #060d1a; }
|
||
|
||
/* DRAFT callout — visually distinct yellow banner */
|
||
.legal-content .draft-callout,
|
||
.legal-draft-callout {
|
||
background-color: #fffbeb;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 0.75rem 1rem;
|
||
margin: 1rem 0 1.5rem;
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 0.9rem;
|
||
color: #78350f;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
Sticky TOC + breadcrumb (desktop ≥ lg).
|
||
--------------------------------------------------------------------------- */
|
||
.legal-toc {
|
||
position: sticky;
|
||
top: 86px; /* sous header 62px + marge */
|
||
max-height: calc(100vh - 110px);
|
||
overflow-y: auto;
|
||
}
|
||
.legal-toc a {
|
||
border-left: 2px solid transparent;
|
||
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
|
||
}
|
||
.legal-toc a:hover {
|
||
background-color: rgba(0, 98, 255, 0.05);
|
||
}
|
||
.legal-toc a.is-active {
|
||
border-left-color: #0062ff;
|
||
color: #0062ff !important;
|
||
background-color: rgba(0, 98, 255, 0.06);
|
||
}
|
||
.legal-breadcrumb {
|
||
position: sticky;
|
||
top: 62px;
|
||
z-index: 30;
|
||
background-color: rgba(247, 249, 252, 0.92);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid #e6ebf2;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
Print stylesheet — hide nav chrome, keep article + header.
|
||
--------------------------------------------------------------------------- */
|
||
@media print {
|
||
header.fixed,
|
||
.legal-breadcrumb,
|
||
.legal-toc-wrapper,
|
||
.legal-prev-next,
|
||
footer {
|
||
display: none !important;
|
||
}
|
||
main { padding-top: 0 !important; }
|
||
.legal-content a {
|
||
color: #000 !important;
|
||
background: none !important;
|
||
-webkit-text-fill-color: #000 !important;
|
||
text-decoration: underline !important;
|
||
}
|
||
body { background: white !important; }
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{# Skip link (WCAG 2.4.1) — visible uniquement au focus clavier. #}
|
||
<a href="#main-content"
|
||
class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-brand-navy focus:text-white focus:rounded-lg focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
|
||
Aller au contenu principal
|
||
</a>
|
||
|
||
{# Breadcrumb sticky #}
|
||
<nav class="legal-breadcrumb px-4 py-3" aria-label="Fil d'Ariane">
|
||
<ol class="max-w-[1200px] mx-auto flex flex-wrap items-center gap-2 text-xs md:text-sm text-brand-navy/70">
|
||
<li><a href="/" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Accueil</a></li>
|
||
<li aria-hidden="true" class="text-brand-navy/40">›</li>
|
||
<li><a href="{{ url_for('legal.legal_index') }}" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Documents légaux</a></li>
|
||
<li aria-hidden="true" class="text-brand-navy/40">›</li>
|
||
<li class="text-brand-navy font-semibold truncate" aria-current="page">{{ title }}</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<section class="bg-brand-bg pt-8 pb-16 px-4">
|
||
<div class="max-w-[1200px] mx-auto lg:grid lg:grid-cols-[1fr_240px] lg:gap-10">
|
||
|
||
{# Article principal #}
|
||
<article id="main-content"
|
||
role="main"
|
||
aria-labelledby="legal-title"
|
||
class="bg-white p-6 md:p-10 rounded-[18px] border border-brand-border shadow-cta order-1">
|
||
<header class="mb-8 pb-6 border-b border-brand-border">
|
||
<p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">Document légal DictIA</p>
|
||
<h1 id="legal-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-4 tracking-tight">{{ title }}</h1>
|
||
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-brand-navy/70">
|
||
<span class="inline-flex items-center gap-1.5">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||
</svg>
|
||
<span>Version <strong class="text-brand-navy">{{ legal_version }}</strong></span>
|
||
</span>
|
||
<span class="text-brand-navy/40" aria-hidden="true">·</span>
|
||
<span>Dernière mise à jour : {{ legal_version }}</span>
|
||
<span class="text-brand-navy/40" aria-hidden="true">·</span>
|
||
<span>RPRP : <a href="mailto:rprp@dictia.ca" class="grad-text font-semibold underline">rprp@dictia.ca</a></span>
|
||
</div>
|
||
</header>
|
||
|
||
{# TOC mobile (collapsible) — visible < lg seulement #}
|
||
<details class="lg:hidden mb-6 border border-brand-border rounded-[12px] bg-brand-bg/50">
|
||
<summary class="cursor-pointer px-4 py-3 text-sm font-semibold text-brand-navy flex items-center justify-between focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-[12px]">
|
||
<span>Sur cette page</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</summary>
|
||
<ul id="legal-toc-mobile" class="px-4 pb-3 pt-1 space-y-1 text-sm">
|
||
{# Rempli côté JS (Alpine via init du desktop). #}
|
||
</ul>
|
||
</details>
|
||
|
||
<div class="legal-content text-brand-navy/90 leading-relaxed">
|
||
{{ content | safe }}
|
||
</div>
|
||
|
||
{# Prev / Next navigation #}
|
||
{% if prev_page or next_page %}
|
||
<nav class="legal-prev-next mt-12 pt-6 border-t border-brand-border grid sm:grid-cols-2 gap-3"
|
||
aria-label="Navigation entre documents légaux">
|
||
{% if prev_page %}
|
||
<a href="{{ url_for('legal.legal_page', page=prev_page) }}"
|
||
rel="prev"
|
||
class="block p-4 bg-brand-bg/60 border border-brand-border rounded-[12px] hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
|
||
<span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
|
||
<span aria-hidden="true">←</span> Précédent
|
||
</span>
|
||
<span class="block text-sm font-semibold text-brand-navy">{{ prev_title }}</span>
|
||
</a>
|
||
{% else %}
|
||
<span></span>
|
||
{% endif %}
|
||
|
||
{% if next_page %}
|
||
<a href="{{ url_for('legal.legal_page', page=next_page) }}"
|
||
rel="next"
|
||
class="block p-4 bg-brand-bg/60 border border-brand-border rounded-[12px] hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 sm:text-right">
|
||
<span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
|
||
Suivant <span aria-hidden="true">→</span>
|
||
</span>
|
||
<span class="block text-sm font-semibold text-brand-navy">{{ next_title }}</span>
|
||
</a>
|
||
{% endif %}
|
||
</nav>
|
||
{% endif %}
|
||
|
||
<footer class="mt-8 pt-6 border-t border-brand-border text-sm text-brand-navy/70">
|
||
<p>
|
||
<span aria-hidden="true">←</span>
|
||
<a href="{{ url_for('legal.legal_index') }}" class="grad-text font-semibold">Index des documents légaux</a>
|
||
</p>
|
||
</footer>
|
||
</article>
|
||
|
||
{# TOC desktop — sidebar sticky #}
|
||
<aside class="legal-toc-wrapper hidden lg:block order-2"
|
||
aria-label="Table des matières">
|
||
<div x-data="legalToc()"
|
||
x-init="init()"
|
||
class="legal-toc bg-white border border-brand-border rounded-[14px] p-5 mt-0">
|
||
<h2 class="text-xs font-bold uppercase tracking-wider text-brand-navy/70 mb-3">
|
||
Sur cette page
|
||
</h2>
|
||
<ul role="list">
|
||
<template x-for="item in items" :key="item.id">
|
||
<li>
|
||
<a :href="'#' + item.id"
|
||
:class="active === item.id ? 'is-active font-semibold' : ''"
|
||
:aria-current="active === item.id ? 'true' : null"
|
||
class="block py-1.5 pl-3 pr-2 text-sm text-brand-navy/70 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded"
|
||
x-text="item.text"></a>
|
||
</li>
|
||
</template>
|
||
<template x-if="items.length === 0">
|
||
<li class="text-xs text-brand-navy/50 italic py-1">
|
||
Aucune section à afficher.
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// Construit la TOC en scannant les <h2> du contenu rendu, met l'élément actif
|
||
// à jour via IntersectionObserver. Synchronise aussi la liste mobile.
|
||
function legalToc() {
|
||
return {
|
||
items: [],
|
||
active: '',
|
||
init() {
|
||
const populate = () => {
|
||
const headings = Array.from(document.querySelectorAll('.legal-content h2'));
|
||
this.items = headings
|
||
.filter(h => h.id) // markdown.toc auto-id; skip if missing
|
||
.map(h => ({ id: h.id, text: h.textContent.trim() }));
|
||
|
||
// Mirror dans le <details> mobile.
|
||
const mobileList = document.getElementById('legal-toc-mobile');
|
||
if (mobileList) {
|
||
mobileList.innerHTML = '';
|
||
this.items.forEach(it => {
|
||
const li = document.createElement('li');
|
||
const a = document.createElement('a');
|
||
a.href = '#' + it.id;
|
||
a.textContent = it.text;
|
||
a.className = 'block py-1.5 text-brand-navy/80 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded';
|
||
li.appendChild(a);
|
||
mobileList.appendChild(li);
|
||
});
|
||
}
|
||
|
||
if (headings.length === 0) return;
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) this.active = e.target.id;
|
||
});
|
||
}, { rootMargin: '-100px 0px -60% 0px' });
|
||
headings.forEach(el => observer.observe(el));
|
||
};
|
||
// Lance après que Alpine ait rendu et que le DOM soit posé.
|
||
if (document.readyState === 'complete') populate();
|
||
else window.addEventListener('load', populate, { once: true });
|
||
},
|
||
};
|
||
}
|
||
</script>
|
||
{% endblock %}
|