/* Le Rond-Point 2027 — feuille de style unique.
*
* Chantier I (V2) : nouvelle direction visuelle, inspirée de trois maquettes
* d'exploration (design-reference/*.html — voir NOTES-CHANTIER-I.md). Les valeurs
* ci-dessous ne sont pas des préférences : chaque couleur de texte est vérifiée au
* seuil WCAG qui s'applique à son usage (4,5:1 pour du texte, 3:1 pour le contour
* d'une commande), avec le calcul refait pour CE fond-ci — un jeton qui passait sur
* l'ancien blanc pur ne passe pas forcément sur le nouveau papier crème.
*
* Ce qui N'EST PAS ici : les couleurs des groupes d'opinion. Elles sont décidées
* côté serveur (`app/services/carte_rendu.py`, chantier D) parce qu'une couleur y
* est attachée à l'identité d'un groupe dans le temps — ça ne se règle pas dans une
* feuille de style. Ne pas les redéclarer ici, sous aucun prétexte : deux sources
* pour la même décision, c'est la garantie qu'elles divergeront. Pour la même
* raison, l'accord/désaccord/passe des résultats de vote GARDENT le vert et le rouge
* choisis le 5 septembre 2026 (testés en simulation de deutéranopie) plutôt que le
* brun/bleu des maquettes — ces deux teintes-là, dans les maquettes, servent à
* distinguer des GROUPES d'opinion, pas des réponses ; les reprendre ici aurait
* mélangé deux grammaires de couleur différentes. Voir NOTES-CHANTIER-I.md.
*/
/* --- Polices ------------------------------------------------------------------
*
* Fraunces (titres, chiffres en grand) et Archivo (texte, interface) remplacent IBM
* Plex Sans/Mono — c'est la typographie que les trois maquettes emploient partout.
* Auto-hébergées, comme avant, et pour la même raison : une requête vers
* fonts.gstatic.com transmettrait l'adresse IP de chaque visiteur à un tiers, ce que
* la politique de confidentialité du site ne permet pas. Les maquettes elles-mêmes
* appellent Google Fonts directement — ce n'est pas reproduit ici.
*
* Un seul fichier par famille, et non un jeu de graisses statiques comme l'ancien :
* ce sont des polices VARIABLES (l'axe `wght` complet, plus `opsz` pour Fraunces),
* ce qui couvre plus de graisses que les quatre fichiers IBM Plex pour un poids
* comparable (~102 ko contre 77 ko). `font-optical-sizing: auto` laisse Fraunces
* basculer vers son dessin « display » aux grandes tailles (les titres) et son
* dessin « texte » aux petites — c'est tout l'intérêt de son axe optique, que les
* maquettes activent aussi.
*
* Sous-ensemble latin seulement, comme avant : il couvre le français, « œ » et les
* guillemets compris.
*/
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/polices/fraunces-latin-variable.woff2") format("woff2-variations");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/polices/archivo-latin-variable.woff2") format("woff2-variations");
}
/* Carlito, auto-hébergée pour la même raison que Fraunces et Archivo ci-dessus (pas de
* requête vers fonts.gstatic.com). Ne sert QU'aux schémas de la page « Comment ça
* marche » (chantier CCM), qui la déclarent eux-mêmes en `font-family` — rien d'autre
* sur le site ne nomme « Carlito », donc cette déclaration ne bascule la typographie de
* personne d'autre. Deux graisses statiques seulement (400, 700), Carlito n'existant pas
* en variable ; sous-ensemble latin, comme les deux polices au-dessus. */
@font-face {
font-family: "Carlito";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/static/polices/carlito-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "Carlito";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/static/polices/carlito-latin-bold.woff2") format("woff2");
}
/* --- Jetons -------------------------------------------------------------------- */
:root {
/* Couleurs, mode clair — reprises des maquettes, contrastes revérifiés sur les
* deux fonds réels du site (le papier crème de la page, le panneau blanc des
* cartes). Le détail du calcul est dans NOTES-CHANTIER-I.md, pas ici : cette
* feuille documente le résultat, pas la méthode. */
--papier: #FBF9F3; /* fond de PAGE. */
--panneau: #FFFFFF; /* fond des cartes, panneaux, champs. */
--panneau-2: #F5F0E4; /* panneau teinté : survol neutre, fond d'étiquette. */
--encre: #211D15; /* 15,9:1 sur le papier, 16,8:1 sur un panneau. */
--secondaire: #75705F; /* 4,7:1 sur le papier — le plus clair permis en texte. */
--gris-icone: #8C8577; /* 3,5:1 — icônes et CONTOURS DE COMMANDE seulement,
jamais de texte : sous le seuil de 4,5:1 mais au-dessus
des 3:1 que WCAG 1.4.11 demande à un contour. */
--trait: #E6DED0; /* séparateur décoratif. 1,3:1 sur les deux fonds : ça ne
porte aucune information seul, donc aucun seuil ne
s'applique — comme avant. */
--jaune: #F6C945; /* 1,5:1 — aplats et repères SEULEMENT. Jamais de texte,
jamais un contour de commande (sous les 3:1 requis). */
--jaune-tendre: #FBEAB4; /* le même jaune, très dilué : fond d'étiquette, survol
neutre des cartes « pourquoi ». */
--or-brule: #7A5C00; /* 5,9:1 sur le papier, 6,25:1 sur un panneau — inchangé
depuis le document d'identité d'avant ce chantier : la
valeur passait déjà, aucune raison d'en choisir une
autre. C'est la voix lisible du jaune. */
--erreur: #B5502F; /* 4,8:1 sur le papier, 5,1:1 sur un panneau (terracotta
des maquettes — proche de l'ancien #B33F26, à peine
réchauffé pour rester dans la nouvelle palette). */
--focus: #2F5FD0; /* 5,4:1 sur le papier, 5,7:1 sur un panneau — largement
au-dessus des 3:1 qu'un anneau de focus doit tenir. */
/* L'APLAT SOMBRE de l'accueil — l'en-tête de cette page et le bandeau d'accroche
* qui le suit, qui n'en font qu'un (chantier I2, instruction 1). C'est le seul
* endroit du site où l'on écrit clair sur sombre, donc le seul qui ait besoin de
* ses propres jetons : `--encre`/`--secondaire` sont calibrés pour le papier crème
* et ne tiennent pas ici (`--secondaire` n'y ferait que 3,4:1). Valeurs reprises
* des maquettes (`--band*`), sauf les deux dernières, voir ci-dessous. */
--bandeau-fond: #211D15; /* l'aplat lui-même — la même encre que le texte du site. */
--bandeau-encre: #FBF9F3; /* 15,9:1 sur l'aplat. */
--bandeau-gris: #B7AD95; /* 7,5:1 — le second paragraphe et la note. */
--bandeau-filet: #3A3327; /* 1,3:1 : le filet d'1 px entre l'en-tête et le bandeau.
Décoratif au sens strict — il ne SÉPARE rien qu'on ait
besoin de voir, il évite seulement que deux aplats de
la même couleur se touchent sans transition. Aucun
seuil ne s'y applique, comme `--trait`. */
--bandeau-contour: #8C8577;/* 4,6:1 — le contour du bouton fantôme. Le `--band-line`
des maquettes (1,3:1) y servait aussi de contour de
COMMANDE, ce que WCAG 1.4.11 interdit sous 3:1 ; on
refait ici la distinction `--trait`/`--trait-controle`
déjà posée pour le reste du site. */
--bandeau-focus: #7EA2F5; /* 6,7:1 — `--focus` (#2F5FD0) tombe à 2,93:1 sur l'aplat,
juste sous les 3:1 d'un anneau de focus. Le bleu clair
du mode sombre le repasse largement. */
--schema-carte-fond: #12100C;/* Le fond des cartes du schéma, APLATI : c'est
`rgba(0, 0, 0, .44)` composé sur `--bandeau-fond`.
La pointe de bulle est évidée par un second triangle
de cette couleur, et un triangle ne se fait pas en
translucide — il faut la valeur opaque. Déclarée une
fois plutôt qu'écrite deux fois : elle suit l'aplat
en mode sombre, où celui-ci descend d'un cran. */
/* Les étapes du schéma « Problème / Ce qu'on a / Solution » de l'aplat (chantier
* I2, instruction 15 bis) — le troisième, « Ce qu'on a », prend `--jaune`.
* DÉCORATIVES, et SANS RAPPORT avec `--vert-accord` / `--rouge-desaccord` juste en
* dessous : ceux-là disent un résultat de vote, ceux-ci colorent une étape de
* schéma. Même séparation que celle déjà faite entre les couleurs de groupe et
* celles du vote : ne jamais réemployer l'un pour l'autre.
* Valeurs de la maquette. Elles ne vivent que sur l'aplat, sombre dans les deux
* modes, d'où l'absence de variante sombre. Contrastes : sous le texte d'aplat
* de l'étiquette, 5,3:1 / 7,7:1 en clair, 6,1:1 / 8,9:1 en sombre. */
--rouge: #E0705A;
--vert: #96BB63;
/* Les deux réponses d'un résultat de vote — même grammaire de couleur que le
* 5 septembre 2026 (voir la note en tête de fichier : vert et rouge, jamais le
* brun/bleu des groupes), éclaircies le 16 septembre à la demande du client
* (« trop foncées/saturées »), d'environ 30 % chacune (luminance relative).
*
* Les deux seuils qui bornaient déjà le premier choix continuent de borner
* celui-ci, voir `tests/test_resultats.py` :
* - 3:1 contre `--panneau` ET contre `--trait` (WCAG 1.4.11, objets porteurs de
* sens sans texte dessus) — c'est LE plafond de clarté des deux jetons, plus
* contraignant ici que le seuil contre le blanc ;
* - 1,5:1 entre les deux teintes, 1,8:1 la même paire vue en simulation de
* daltonisme rouge-vert (Viénot-Brettel-Mollon) — c'est ce qui force à garder
* le vert plus sombre que le rouge, pas un choix arbitraire.
* Voir aussi `.etiquette-repness` plus bas, qui réutilise ces deux jetons pour son
* dégradé de fond.
*
* Le vert repassé le même jour à `#5FE86E` exact, sur demande explicite du client
* et malgré l'avis contraire : CE VERT NE TIENT PLUS les seuils ci-dessus (loin
* en dessous de 3:1 contre `--panneau`/`--trait`, et de 1,5:1 / 1,8:1 contre le
* rouge). `tests/test_resultats.py` casse tant que ce choix n'est pas révisé —
* ce n'est pas un oubli, la priorité donnée était la teinte exacte demandée. */
--vert-accord: #5FE86E;
--rouge-desaccord: #FA0000;/* 4,1:1 sur un panneau blanc, 3,1:1 contre --trait —
décoratif (remplissage de barre, jamais de texte),
voir `.part-accord` / `.part-desaccord` plus bas. */
/* États du bouton jaune : la même valeur assombrie, plus le gris de l'inactif. */
--jaune-survol: #E6B926;
--jaune-actif: #D4A916;
--jaune-inactif: var(--panneau-2);
/* Espacement : échelle de 4 px, inchangée — ce n'est pas une question de style. */
--esp-4: 4px;
--esp-8: 8px;
--esp-12: 12px;
--esp-16: 16px;
--esp-24: 24px;
--esp-32: 32px;
--esp-48: 48px;
/* Cible tactile minimale, inchangée. 44 px, la plus basse des deux recommandations
* (Apple/Google), appliquée sans exception. */
--cible: 44px;
/* Largeur à partir de laquelle l'en-tête tient sur une ligne. Inchangée : ce n'est
* pas la taille d'un appareil, c'est la largeur que réclame ce contenu précis. */
--seuil-large: 720px;
/* Trois largeurs de page. La courante suffit à une colonne de texte ; l'accueil et
* une conversation sont plus larges parce qu'ils portent une colonne latérale.
* `--largeur-debat` est nouvelle au chantier I : la page de vote gagne la grille à
* deux colonnes des maquettes (carte de vote + carte 2D d'un côté, proposer une
* déclaration et parcours de l'autre), qui ne tient pas dans 720 px. Le texte reste
* plafonné à 66 caractères dans tous les cas — c'est la mesure de lecture qui
* tient, pas la largeur du cadre. */
--largeur-page: 720px;
--largeur-accueil: 1040px;
--largeur-debat: 1000px;
--largeur-laterale: 280px;
/* Rayons : deux, et ce sont EXACTEMENT ceux des maquettes (chantier I2,
* instruction 3 du lot de corrections). Le chantier I les avait agrandis à 7 et
* 14 px, en lisant les maquettes comme « des coins nettement plus ronds » — c'est
* l'ombre douce qui détache leurs cartes, pas l'arrondi, et leurs valeurs réelles
* sont bien plus sobres : `.debate`, `.band-viz`, `.card` y sont à 4 px, `.badge`,
* `.btn-primary`, `.btn-big`, `.tab` à 3 px.
*
* Aucun élément du site n'est en forme de pilule : la charte des maquettes n'en
* comporte aucun, et les trois `border-radius: 999px` que le chantier I avait posés
* sur les étiquettes sont revenus à `--rayon-objet`. */
--rayon-objet: 3px; /* boutons, champs, étiquettes, pastilles */
--rayon-bloc: 4px; /* cartes, panneaux, encarts */
/* Bordure de séparation, décorative — inchangée dans son rôle, sa couleur suit la
* nouvelle palette. */
--trait-sep: 1px solid var(--trait);
/* Contour d'une COMMANDE — champ, bouton, tag — qui doit tenir 3:1 (WCAG 1.4.11).
* `--trait` (1,3:1) ne le peut pas ; `--gris-icone` (3,5:1) le peut. Même
* distinction que l'ancien document d'identité, sous des noms plus courts. */
--trait-controle: 1px solid var(--gris-icone);
/* Ombre douce, nouvelle au chantier I : les maquettes détachent leurs cartes par
* une ombre plutôt que la seule bordure. Les deux se cumulent — la bordure garde
* un bord net pour qui ne voit pas l'ombre (impression, contraste élevé forcé). */
--ombre: 0 1px 2px rgba(33, 29, 21, .05), 0 6px 18px rgba(33, 29, 21, .06);
--police-texte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--police-titres: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
/* Largeur de lecture, inchangée. */
--mesure: 66ch;
}
/* --- Mode sombre -----------------------------------------------------------------
*
* Prévu par les trois maquettes (`prefers-color-scheme` ET `[data-theme]`), jamais
* exposé sur le site actuel. Reproduit à l'identique : suit le réglage du système par
* défaut, et `[data-theme="dark"]`/`[data-theme="light"]` permettrait un bouton de
* bascule manuelle si on en ajoute un un jour — aucune des trois maquettes n'en
* montre, donc aucun n'est ajouté ici (voir NOTES-CHANTIER-I.md).
*
* Mêmes seuils revérifiés : tous les jetons de texte tiennent 4,5:1 ou mieux sur les
* deux fonds sombres, `--focus` et `--gris-icone` tiennent 3:1.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--papier: #171410;
--panneau: #1F1B14;
--panneau-2: #262017;
--encre: #F1EBDA; /* 15,4:1 sur le papier, 14,4:1 sur un panneau. */
--secondaire: #A89E88; /* 6,9:1 sur le papier, 6,5:1 sur un panneau. */
--gris-icone: #8F8672; /* ~3,3:1 — contours de commande seulement. */
--trait: #342D22;
--jaune: #E8BD3E;
--jaune-tendre: #463916;
--or-brule: #F0CF6B; /* 12,1:1 sur le papier, 11,3:1 sur un panneau. */
--erreur: #D97A58; /* 5,6:1 sur un panneau. */
--focus: #7EA2F5; /* 7,3:1 sur le papier, 6,8:1 sur un panneau. */
--jaune-survol: #DDB136;
--jaune-actif: #CFA52C;
/* L'aplat de l'accueil descend d'un cran, comme dans les maquettes. */
--bandeau-fond: #0F0D0A;
--bandeau-encre: #F1EBDA; /* 16,3:1 */
--bandeau-gris: #A89E88; /* 7,3:1 */
--bandeau-filet: #2C261D; /* 1,3:1, décoratif */
--bandeau-contour: #8F8672;/* 5,4:1 */
--bandeau-focus: #7EA2F5; /* 7,7:1 */
--schema-carte-fond: #080706;/* le même aplati, sur #0F0D0A */
}
}
:root[data-theme="dark"] {
--papier: #171410;
--panneau: #1F1B14;
--panneau-2: #262017;
--encre: #F1EBDA;
--secondaire: #A89E88;
--gris-icone: #8F8672;
--trait: #342D22;
--jaune: #E8BD3E;
--jaune-tendre: #463916;
--or-brule: #F0CF6B;
--erreur: #D97A58;
--focus: #7EA2F5;
--jaune-survol: #DDB136;
--jaune-actif: #CFA52C;
--bandeau-fond: #0F0D0A;
--bandeau-encre: #F1EBDA;
--bandeau-gris: #A89E88;
--bandeau-filet: #2C261D;
--bandeau-contour: #8F8672;
--bandeau-focus: #7EA2F5;
--schema-carte-fond: #080706;
}
/* --- Réinitialisation ----------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light dark;
scroll-padding-top: var(--esp-24);
}
[hidden] {
display: none !important;
}
body {
margin: 0;
background: var(--papier);
color: var(--encre);
font-family: var(--police-texte);
font-optical-sizing: auto;
font-size: 15px;
line-height: 24px;
-webkit-text-size-adjust: 100%;
}
/* --- Échelle typographique ------------------------------------------------------
*
* Les titres passent en Fraunces (serif) — c'est le changement le plus visible des
* maquettes. `text-wrap: balance` évite un titre à un seul mot orphelin sur sa
* dernière ligne, ce que la graisse plus lourde de Fraunces rend plus voyant qu'avec
* Archivo. */
h1, h2, h3 {
font-family: var(--police-titres);
font-weight: 600;
text-wrap: balance;
}
h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 var(--esp-8);
letter-spacing: -0.01em;
}
h2 {
font-size: 22px;
line-height: 1.2;
margin: var(--esp-32) 0 var(--esp-12);
}
h3 {
font-size: 17px;
line-height: 1.3;
margin: 0 0 var(--esp-8);
}
p {
margin: 0 0 var(--esp-16);
max-width: var(--mesure);
}
p:last-child {
margin-bottom: 0;
}
/* Titre de débat : Fraunces, mais toujours à la taille du texte courant dans une
* liste dense — c'est la graisse et la police qui hiérarchisent, pas le corps. */
.titre-debat {
font-family: var(--police-titres);
font-size: 17px;
line-height: 1.25;
font-weight: 600;
/* Aucune marge : dans la carte, c'est le `gap` de la pile qui espace. */
margin: 0;
}
/* Le bloc badges + titre d'une carte de débat, EN FLUX NORMAL (chantier Vidéo,
* VIDEO-4) : `.carte-debat` est flex, où `float` n'a aucun effet sur ses enfants
* directs — c'est ce bloc-ci qui fait flotter la miniature et enchaîner le texte
* autour d'elle. `flow-root` (et non `overflow: hidden`) contient le flottant sans
* jamais rogner un contour de focus qui déborderait légèrement. */
.entete-carte-debat {
display: flow-root;
}
/* Le titre, à côté de la miniature agrandie et non sous elle : son lien est un
* `inline-flex`, une boîte d'un seul tenant qui ne se coupe pas autour d'un flottant —
* plus large que la place restante, il passait tout entier SOUS la miniature. En
* `flow-root`, le titre devient une colonne qui se range à côté du flottant, et son
* lien s'y ajuste. */
.entete-carte-debat .titre-debat {
display: flow-root;
}
/* La miniature de la vidéo, en haut à droite de la carte. Agrandie le 17/09/2026 (demande
* du client) : à 44 px, on ne voyait pas qu'il s'agissait d'une vidéo. Elle LANCE la
* vidéo (`static/video.js`) — l'icône de lecture le dit. Carrée, comme avant : le cadre
* réel varie d'une vidéo à l'autre (portrait, paysage), et une vignette qui changerait
* de forme d'une carte à l'autre romprait l'alignement de la grille. */
.miniature-video-carte {
float: right;
width: 6rem;
height: 6rem;
margin: 0 0 var(--esp-8) var(--esp-12);
}
/* Commun aux deux miniatures (carte et page du débat) : l'image remplit la boîte, et
* l'icône de lecture — un rond translucide et un triangle blanc — se pose au centre. */
.lancer-video {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--rayon-bloc);
background: var(--panneau-2);
}
.lancer-video img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.icone-lecture {
position: absolute;
top: 50%;
left: 50%;
width: 2.75rem;
height: 2.75rem;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgb(0 0 0 / .4);
border: 2px solid rgb(255 255 255 / .85);
transition: background .15s;
}
/* Le triangle, dessiné en bordures, décalé d'un poil vers la droite : centré
* géométriquement, un triangle paraît trop à gauche. */
.icone-lecture::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-top: .5rem solid transparent;
border-bottom: .5rem solid transparent;
border-left: .8rem solid #FFFFFF;
}
.lancer-video:hover .icone-lecture,
.lancer-video:focus-visible .icone-lecture {
background: rgb(0 0 0 / .6);
}
/* Chapeau de page : même corps que le texte, en secondaire. */
.lead {
color: var(--secondaire);
margin: 0 0 var(--esp-24);
}
/* Secondaire : métadonnées, légendes. Le gris le plus clair autorisé en texte. */
.mu,
small {
font-size: 13px;
line-height: 20px;
color: var(--secondaire);
}
/* Libellé : capitales, tracking ouvert. Nomme une zone (« LES CHIFFRES »,
* « PROPOSITION ») sans consommer un titre.
*
* En Archivo et non plus en police à chasse fixe : aucune des trois maquettes
* n'emploie de police mono, et leur équivalent (`.eyebrow`) est un simple Archivo
* gras tracé. Le mono disparaît du site avec ce chantier — voir NOTES-CHANTIER-I.md. */
.libelle {
font-family: var(--police-texte);
font-size: 11px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--or-brule);
}
/* Chiffre : tabulaire, pour qu'un compteur qui s'incrémente ne fasse pas danser ce
* qui l'entoure. Reste en Archivo (police de texte) — les GRANDS nombres d'affichage
* (une page de chiffres, le total du site) passent en Fraunces via `.chiffre-grand`,
* comme dans les maquettes ; un petit compte inline reste dans le texte courant. */
.chiffre {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* Grand nombre d'affichage : la valeur qu'on vient chercher sur une carte de
* chiffres, ou le total du site. Fraunces, comme `.fig-num` et `.num b` dans les
* maquettes. */
.chiffre-grand {
font-family: var(--police-titres);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--or-brule);
line-height: 1;
}
.accent {
color: var(--or-brule);
}
strong,
b {
font-weight: 600;
}
/* --- Liens ---------------------------------------------------------------------
*
* En encre soulignée par défaut — la palette n'a pas de teinte qui porte un texte
* (le jaune ne peut pas). Un lien qui appartient à un système d'accroche (« Lire le
* manifeste », « Voir tous les débats ») porte plutôt `.lien-souligne-jaune`, qui
* reprend le soulignement jaune de 2 px des maquettes — un repère, pas un texte
* jaune : le mot reste en encre, seul le trait dessous change de couleur. */
a {
color: var(--encre);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.lien-souligne-jaune {
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid var(--jaune);
padding-bottom: 1px;
}
/* Le lien du titre reste une CIBLE à part entière : lui et le pied « Voter » mènent au
* même endroit, mais ce sont deux cibles distinctes pour un pouce. */
.titre-debat a {
display: inline-flex;
align-items: center;
min-height: var(--cible);
padding: var(--esp-4) 0;
}
.titre-debat a {
text-decoration: none;
}
.titre-debat a:focus-visible {
text-decoration: underline;
}
@media (hover: none) {
.titre-debat a {
text-decoration: underline;
}
}
/* --- Ossature de page ------------------------------------------------------------ */
/* L'en-tête. CLAIR partout, SAUF sur l'accueil (voir la variante juste en dessous) —
* et non défilant partout, y compris sur l'accueil : le rendre collant reviendrait sur
* un choix déjà motivé (88 px figés en permanence pour trois liens qu'on emploie une
* fois par visite), et la consigne du chantier I2 ne le demande pas.
*
* Le chantier I avait laissé l'en-tête clair sur TOUTES les pages, en jugeant qu'un
* en-tête partagé qui change de couleur romprait la continuité qu'il sert à donner ;
* l'instruction 1 du chantier I2 tranche l'inverse pour l'accueil, et pour l'accueil
* seul. Voir NOTES-CHANTIER-I2.md. */
.entete {
background: var(--papier);
border-bottom: var(--trait-sep);
padding: var(--esp-8) var(--esp-16);
display: flex;
flex-wrap: wrap;
gap: var(--esp-8) var(--esp-16);
align-items: center;
}
.nav-site {
order: 3;
flex: 1 0 100%;
display: flex;
flex-wrap: wrap;
gap: var(--esp-16);
padding-top: var(--esp-8);
border-top: var(--trait-sep);
}
.nav-site a {
padding: 0 var(--esp-4);
font-size: 13px;
line-height: 20px;
color: var(--secondaire);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.nav-site a[aria-current="page"] {
color: var(--encre);
font-weight: 600;
border-bottom-color: var(--jaune);
}
.entete a,
.entete button {
min-height: var(--cible);
display: inline-flex;
align-items: center;
}
.entete .marque {
font-family: var(--police-titres);
font-weight: 600;
font-size: 1.05rem;
text-decoration: none;
color: var(--encre);
}
.entete .marque .avatar-nom {
text-decoration: none;
}
.entete .droite {
margin-left: auto;
display: flex;
gap: var(--esp-16);
align-items: center;
}
.entete .nav-large {
display: none;
}
.entete .droite .avatar-nom {
display: none;
}
.entete .droite .avatar {
min-width: var(--cible);
justify-content: center;
}
@media (min-width: 720px) {
.entete .droite .avatar-nom {
display: inline;
}
.entete .droite .avatar {
min-width: 0;
}
.entete .nav-large {
display: inline-flex;
}
.nav-site {
order: 0;
flex: 0 1 auto;
border-top: none;
}
}
/* --- L'en-tête sombre de l'accueil ---------------------------------------------------
*
* L'accueil, et l'accueil SEUL (chantier I2, instruction 1). L'accroche du haut de
* cette page est un aplat d'encre pleine largeur (`.bandeau-mission`, plus bas) ; pour
* que l'ensemble se lise comme un seul aplat continu depuis le tout haut de la page —
* et non comme un en-tête clair posé sur un bandeau sombre —, l'en-tête prend le même
* fond, et le filet d'1 px qui les sépare est la seule chose entre les deux.
*
* Le point d'accroche est `body.accueil`, la classe que la page se donne déjà
* (`classe_corps`) : la feuille n'a toujours pas à deviner sur quelle URL elle est, et
* aucune autre page n'est touchée. C'était la première des deux options proposées par
* la consigne ; la seconde (un bandeau sombre sous un en-tête resté clair) ne donne
* justement pas l'aplat continu demandé.
*
* Toutes les couleurs de texte passent aux jetons `--bandeau-*` : `--secondaire`, réglé
* pour le papier crème, ne fait que 3,4:1 sur l'aplat. */
.accueil .entete {
background: var(--bandeau-fond);
color: var(--bandeau-encre);
border-bottom-color: var(--bandeau-filet);
}
.accueil .entete .marque,
.accueil .nav-site a:hover,
.accueil .nav-site a[aria-current="page"],
.accueil .entete .droite a:hover {
color: var(--bandeau-encre);
}
.accueil .nav-site a,
.accueil .entete .droite a {
color: var(--bandeau-gris);
}
/* Le trait qui sépare la nav de la marque quand l'en-tête passe sur deux lignes
* (en dessous de 720 px) : lui aussi invisible en `--trait` sur l'aplat. */
.accueil .nav-site {
border-top-color: var(--bandeau-filet);
}
/* L'anneau de la marque et l'anneau de niveau. Leur tracé suit `--encre`, qui est
* précisément la couleur de l'aplat : sans cette reprise, le logo disparaîtrait. Le
* jaune de l'îlot, lui, ne bouge pas — c'est la règle du document d'identité. */
.accueil .entete .anneau--logo .anneau-trace {
stroke: var(--bandeau-encre);
}
.accueil .entete .anneau-piste {
stroke: var(--bandeau-contour);
}
.accueil .entete .anneau--niveau .anneau-ilot {
fill: var(--bandeau-encre);
}
/* `--focus` (#2F5FD0) tombe à 2,93:1 sur l'aplat, juste sous le seuil. */
.accueil .entete *:focus-visible,
.bandeau-mission *:focus-visible {
outline-color: var(--bandeau-focus);
}
main {
max-width: var(--largeur-page);
margin: var(--esp-32) auto;
padding: 0 var(--esp-16);
}
.pied {
max-width: var(--largeur-page);
margin: var(--esp-48) auto var(--esp-32);
padding: 0 var(--esp-16);
border-top: var(--trait-sep);
padding-top: var(--esp-24);
}
/* --- Blocs ---------------------------------------------------------------------- */
.card {
background: var(--panneau);
border: var(--trait-sep);
border-radius: var(--rayon-bloc);
box-shadow: var(--ombre);
padding: var(--esp-16);
margin-bottom: var(--esp-12);
}
/* Encart en teinte jaune : étiquette, badge débloqué, information mise de côté. */
.encart {
background: var(--jaune-tendre);
border: 1px solid var(--or-brule);
border-radius: var(--rayon-bloc);
padding: var(--esp-16);
margin-bottom: var(--esp-16);
}
/* --- Messages ------------------------------------------------------------------- */
.msg {
border: var(--trait-sep);
border-radius: var(--rayon-bloc);
padding: var(--esp-12) var(--esp-16);
margin-bottom: var(--esp-16);
}
.msg.err {
border-color: var(--erreur);
color: var(--erreur);
}
.msg.ok {
background: var(--jaune-tendre);
border-color: var(--or-brule);
}
.empty {
color: var(--secondaire);
}
/* --- Formulaires ------------------------------------------------------------------ */
label {
display: block;
font-size: 13px;
line-height: 20px;
color: var(--secondaire);
margin: var(--esp-16) 0 var(--esp-4);
}
input,
textarea,
select {
width: 100%;
max-width: var(--mesure);
min-height: var(--cible);
padding: var(--esp-8) var(--esp-12);
border: var(--trait-controle);
border-radius: var(--rayon-objet);
background: var(--panneau);
color: var(--encre);
font-family: var(--police-texte);
/* 16 px et pas 15 : en dessous, iOS agrandit la page à la mise au point du champ. */
font-size: 16px;
line-height: 24px;
}
textarea {
min-height: 96px;
resize: vertical;
}
input:user-invalid,
textarea:user-invalid,
select:user-invalid,
.invalide {
border-color: var(--erreur);
}
.erreur-champ {
color: var(--erreur);
font-size: 13px;
line-height: 20px;
margin: var(--esp-4) 0 0;
}
/* --- Tableaux --------------------------------------------------------------------- */
table {
border-collapse: collapse;
width: 100%;
margin: var(--esp-12) 0;
}
td,
th {
border-top: var(--trait-sep);
padding: var(--esp-8) var(--esp-4);
vertical-align: top;
text-align: left;
}
/* --- Listes ------------------------------------------------------------------------ */
ul,
ol {
padding-left: var(--esp-24);
margin: 0 0 var(--esp-16);
max-width: var(--mesure);
}
li {
margin: var(--esp-4) 0;
}
/* --- Boutons -----------------------------------------------------------------------
*
* Les mêmes quatre apparences qu'avant ce chantier, et la même règle pour choisir
* entre elles : `.bouton-principal` en aplat jaune pour l'action neutre principale
* (une seule par écran), le bouton par défaut sans classe pour tout le reste,
* `.bouton-encre` en aplat d'encre pour l'action principale non neutre (supprimer ses
* données), `.choix-vote` pour les deux réponses et elles seules. Ce qui change ici
* n'est que la forme : coins plus ronds, et un bouton par défaut qui reprend le
* panneau teinté des maquettes plutôt qu'un simple contour.
*
* Le jaune ne désigne toujours JAMAIS un choix de vote.
*/
button,
.bouton {
font-family: var(--police-texte);
font-size: 15px;
line-height: 24px;
font-weight: 600;
padding: var(--esp-8) var(--esp-16);
border-radius: var(--rayon-objet);
border: var(--trait-controle);
background: var(--panneau-2);
color: var(--encre);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--cible);
text-align: center;
transition: background .12s ease, border-color .12s ease;
}
button:hover,
.bouton:hover {
border-color: var(--secondaire);
}
button:active,
.bouton:active {
background: var(--jaune-inactif);
}
button:disabled,
.bouton:disabled {
color: var(--gris-icone);
background: var(--panneau-2);
border-color: var(--trait);
cursor: not-allowed;
}
/* L'action neutre principale. Le contour reste en or brûlé : sur `--jaune` (1,5:1),
* un contour de la même couleur que l'aplat ne se distinguerait pas assez pour qui
* voit mal, et l'or brûlé porte ce contour à 5,9:1 sans toucher au jaune ni au
* texte — c'est la limite du jaune que le document d'identité précédent avait déjà
* posée, et qui reste vraie ici. */
.bouton-principal {
background: var(--jaune);
border-color: var(--or-brule);
color: var(--encre);
}
.bouton-principal:hover {
background: var(--jaune-survol);
border-color: var(--or-brule);
}
.bouton-principal:active {
background: var(--jaune-actif);
}
.bouton-principal:disabled {
background: var(--jaune-inactif);
border-color: var(--trait);
color: var(--gris-icone);
}
.bouton-encre {
background: var(--encre);
border-color: var(--encre);
color: var(--panneau);
}
.bouton-encre:hover {
background: var(--encre);
border-color: var(--encre);
filter: brightness(1.15);
}
.bouton-encre:active {
background: var(--panneau);
color: var(--encre);
}
.bouton-encre:disabled {
background: var(--jaune-inactif);
border-color: var(--trait);
color: var(--gris-icone);
}
/* --- La carte de vote ------------------------------------------------------------------
*
* `.voter` de la maquette debat-vote.html (chantier I2, instruction 10). Elle s'ajoute
* à `.card` : seuls le rayon, l'espacement et le filet jaune du bord gauche viennent de
* cette maquette-ci.
*
* Rayon : celui de `.card` (`--rayon-bloc`), comme tous les blocs de la page.
*/
.carte-vote {
position: relative;
overflow: hidden;
padding: var(--esp-24);
/* La taille de la proposition ET le nombre de lignes qui lui sont réservées vivent
* ici, ensemble : la hauteur de la boîte se calcule à partir de la première, et les
* séparer ferait mentir la réserve dès qu'on toucherait à la police. */
--taille-proposition: clamp(1.2rem, 2.4vw, 1.6rem);
--lignes-proposition: 6;
}
/* Sur un écran large la ligne tient deux fois plus de signes : cinq lignes y couvrent
* plus de texte que six sur un téléphone. La réserve suit. */
@media (min-width: 760px) {
.carte-vote {
--lignes-proposition: 5;
}
}
/* --- La place réservée à la proposition ---------------------------------------------
*
* Chantier I2, instruction 16. La boîte a une hauteur FIXE, calculée en lignes de
* proposition : ce qu'elle contient — chargement, ligne de méta, texte, sources — peut
* varier du simple au quintuple sans que « D'accord » et « Pas d'accord » bougent d'un
* pixel. C'est la raison d'être de la règle : les deux réponses doivent tomber au même
* endroit à chaque proposition, sinon une main qui a pris le geste finit par voter à
* côté, et un vote posé par erreur ne mesure rien.
*
* Six lignes (cinq au-delà de 760 px) couvrent très largement les propositions
* observées en base — la plus longue en fait trois sur un écran large. Le champ de
* saisie accepte jusqu'à 500 signes, donc le débordement reste possible : la boîte
* défile alors en interne plutôt que de repousser les boutons, et le fondu du bas dit
* qu'il reste à lire. Rien n'est tronqué.
*/
.zone-proposition {
display: flex;
flex-direction: column;
height: calc(var(--lignes-proposition) * 1.3 * var(--taille-proposition));
margin-bottom: var(--esp-16);
overflow-y: auto;
overscroll-behavior: contain;
/* Le fondu haut et bas est SOLIDAIRE DU CONTENU (`local`) : il n'apparaît que
* lorsqu'il y a du texte dessous, c'est-à-dire exactement quand il reste à lire. En
* bout de défilement, il n'y a plus rien sous lui et il ne se voit pas. Il est peint
* avec le fond de la carte, donc il suit le thème sombre sans réglage. */
background:
linear-gradient(var(--panneau) 40%, transparent) top / 100% 24px no-repeat local,
linear-gradient(transparent, var(--panneau) 60%) bottom / 100% 24px no-repeat local;
}
/* La boîte est focalisable au clavier QUAND elle défile, et seulement là : le script
* pose `tabindex` d'après la hauteur réelle du contenu. Sans ça, un lecteur au clavier
* n'aurait aucun moyen d'atteindre la fin d'une proposition longue. */
.zone-proposition:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* Ce qui reste de la boîte sous la ligne de méta. Le contenu y est centré : une
* proposition d'une ligne se pose au milieu de la place réservée, au lieu de laisser un
* trou entre elle et les réponses. */
.corps-proposition {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Le filet jaune du bord gauche. Purement décoratif — il ne distingue rien et ne porte
* aucune information, donc aucun seuil de contraste ne s'y applique. */
.carte-vote::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--jaune);
}
/* La ligne de méta au-dessus de la proposition (`.voter-meta`). */
.meta-vote {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--esp-8) var(--esp-12);
margin: 0 0 var(--esp-8);
max-width: none;
font-size: .78rem;
color: var(--secondaire);
}
/* Le repère « Source citée ». Il ne remplace pas les liens, qui restent affichés sous
* la proposition : il dit seulement, avant qu'on lise, qu'il y a de quoi se
* documenter. */
.mention-source {
color: var(--or-brule);
font-weight: 600;
}
/* Le résultat immédiat (`.result`).
*
* ÉCART VOLONTAIRE PAR RAPPORT À LA MAQUETTE : elle colore sa barre avec
* `--serie-a`/`--serie-b`, le brun et le bleu qui distinguent des GROUPES d'opinion
* partout ailleurs sur le site. Ce sont ici le vert et le rouge de l'accord et du
* désaccord, ceux que le chantier I a gardés — choisis le 5 septembre 2026 pour leur
* écart de clarté en simulation de deutéranopie (1,54:1), qui les laisse distincts même
* sans la teinte. Reprendre le brun/bleu aurait mélangé deux grammaires de couleur.
* Le segment « passé » reste neutre, comme dans la maquette.
*
* Les trois classes `.part-*` ne sont PAS redéclarées ici : elles existent déjà plus
* bas, pour le tableau des résultats par groupe, aux mêmes valeurs. C'est la même
* grammaire — accord, désaccord, passe — et elle ne doit avoir qu'une définition.
*
* La couleur ne porte jamais l'information seule : la légende écrit les trois libellés
* et leurs comptes en toutes lettres, sous la barre. */
.resultat-immediat {
margin-top: var(--esp-16);
padding-top: var(--esp-12);
border-top: var(--trait-sep);
}
.resultat-ligne {
display: flex;
justify-content: space-between;
gap: var(--esp-12);
margin: 0 0 var(--esp-8);
max-width: none;
font-size: .8rem;
color: var(--secondaire);
}
.resultat-ligne b {
color: var(--encre);
font-variant-numeric: tabular-nums;
}
.barre-resultat {
display: flex;
gap: 2px;
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--panneau-2);
}
.barre-resultat i {
display: block;
height: 100%;
transition: width .5s ease;
}
.legende-resultat {
display: flex;
flex-wrap: wrap;
gap: var(--esp-4) var(--esp-16);
margin: var(--esp-8) 0 0;
max-width: none;
font-size: .75rem;
color: var(--secondaire);
}
.legende-resultat span {
display: inline-flex;
align-items: center;
gap: var(--esp-4);
}
.legende-resultat b {
color: var(--encre);
font-variant-numeric: tabular-nums;
}
.puce-resultat {
width: 8px;
height: 8px;
border-radius: 2px;
flex: 0 0 auto;
}
/* La progression vers le déblocage de la carte des avis (`.progress`).
*
* Les pastilles sont DÉCORATIVES : le texte à côté dit la même chose en toutes lettres
* (« Encore 3 votes pour être situé »), et c'est lui qui porte l'information. Leur
* nombre suit le seuil RÉEL de ce débat, jamais les sept fixes de la maquette. */
.progression-situe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-8) var(--esp-12);
margin: var(--esp-16) 0 0;
max-width: none;
font-size: .79rem;
color: var(--secondaire);
}
.pastilles {
display: flex;
gap: 5px;
}
.pastilles .pastille {
width: 22px;
height: 6px;
border-radius: 3px;
background: var(--trait);
transition: background .3s ease;
}
.pastilles .pastille--faite {
background: var(--jaune);
}
@media (prefers-reduced-motion: reduce) {
.barre-resultat i,
.pastilles .pastille {
transition: none;
}
}
/* --- Les deux choix de vote ---------------------------------------------------------
*
* Rigoureusement symétriques, et ça reste la règle la plus stricte de cette feuille.
*
* ÉCART VOLONTAIRE PAR RAPPORT À LA MAQUETTE `debat-vote.html` : elle fait passer
* « D'accord » en jaune au survol (`--yellow-soft`) et « Pas d'accord » en terracotta
* — une asymétrie qui laisserait croire que l'un des deux choix est le bon, ou celui
* que le site met en avant. Ici les deux reçoivent EXACTEMENT le même traitement, à
* chaque état : le panneau teinté neutre (`--panneau-2`) au survol et à l'enfoncement,
* la même transition, la même épaisseur de contour. Aucune des deux couleurs de la
* maquette n'est reprise pour cet usage précis — ni le jaune (déjà interdit sur un
* bouton de vote), ni le terracotta, qui reste réservé à l'erreur. Voir
* NOTES-CHANTIER-I.md.
*/
.choix-de-vote {
display: flex;
flex-wrap: wrap;
gap: var(--esp-8);
margin: 0 0 var(--esp-8);
}
.choix-vote {
flex: 1 1 160px;
max-width: 280px;
border: 2px solid var(--encre);
border-radius: var(--rayon-bloc);
background: var(--panneau);
color: var(--encre);
padding: var(--esp-12) var(--esp-16);
transition: background .12s ease, transform .08s ease;
}
.choix-vote:hover {
background: var(--panneau-2);
transform: translateY(-1px);
}
.choix-vote:active {
background: var(--panneau-2);
transform: none;
}
.choix-vote:disabled {
border-color: var(--trait);
background: var(--panneau);
color: var(--gris-icone);
transform: none;
}
/* Raccourci clavier affiché sur le bouton, comme dans la maquette `debat-vote.html`
* (`A`, `D`) — décoratif ET fonctionnel : les mêmes touches
* déclenchent le vote (voir le script de `conversation.html`). */
.choix-vote kbd,
.lien-action kbd {
font-family: var(--police-texte);
font-size: .68rem;
font-weight: 600;
color: var(--secondaire);
border: 1px solid var(--trait);
border-radius: 4px;
padding: 1px 5px;
background: var(--panneau-2);
margin-left: var(--esp-8);
}
.choix-vote {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--esp-8);
}
/* « Passer » reste un texte : ce n'est pas un troisième choix. */
.lien-action {
border: none;
background: none;
justify-content: flex-start;
min-width: var(--cible);
padding: var(--esp-8) 0;
font-weight: 400;
color: var(--encre);
text-decoration: underline;
text-underline-offset: 2px;
}
.lien-action:hover {
border: none;
}
.lien-action:active {
background: none;
}
.lien-action:disabled {
background: none;
color: var(--gris-icone);
}
/* --- Anneau de focus clavier --------------------------------------------------------- */
*:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* --- Composants ------------------------------------------------------------------- */
.card > :first-child,
.encart > :first-child,
.msg > :first-child {
margin-top: 0;
}
.card > :last-child,
.encart > :last-child,
.msg > :last-child {
margin-bottom: 0;
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-8);
margin: var(--esp-16) 0 0;
max-width: none;
}
.actions:not(:last-child) {
margin-bottom: var(--esp-24);
}
.actions a {
min-height: var(--cible);
display: inline-flex;
align-items: center;
}
/* --- Bandeau de statut de fin de parcours ------------------------------------------
*
* Remplace l'ancien titre « Merci de votre participation, vous appartenez au groupe
* X » (un `h2`/`h3` en Fraunces ~28px). Un badge COMPACT et EN LIGNE — pas pleine
* largeur —, posé directement dans le flux, sans carte autour : c'est un point de
* situation, pas un titre de section.
*/
.statut-parcours {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--esp-8);
background: var(--panneau-2);
border-radius: var(--rayon-bloc);
padding: var(--esp-4) var(--esp-16);
margin: 0 0 var(--esp-4);
font-size: 1.05rem;
}
/* Couleur du « positif/validé » : la même que `.msg.ok` (un or lisible, pas le vert
* réservé à l'accord/désaccord d'un vote — voir la note en tête de fichier sur les
* grammaires de couleur qui ne se mélangent pas). */
.statut-parcours .pastille {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--or-brule);
}
/* Le bilan (« vous avez répondu à N propositions ») et les motifs d'attente : un
* texte secondaire, sciemment beaucoup plus discret que le bandeau au-dessus — ils
* confirment un détail, ils ne portent pas le message. */
.discret {
font-size: .72rem;
line-height: 1.4;
color: var(--secondaire);
margin: 0 0 var(--esp-4);
}
/* La proposition soumise au vote — en Fraunces, comme `.prop-text` dans la maquette :
* c'est l'élément que la page existe pour montrer, et la police change de registre
* pour le dire. */
.proposition {
font-family: var(--police-titres);
font-weight: 500;
/* La même variable que la hauteur réservée, voir `.carte-vote`. */
font-size: var(--taille-proposition);
line-height: 1.3;
/* Aucune marge : l'espace autour de la proposition vient désormais de la boîte à
* hauteur fixe qui la contient, et une marge ici décalerait le centrage. */
margin: 0;
}
.champs-empiles textarea {
margin-bottom: var(--esp-8);
}
.sources-proposition {
font-size: 13px;
line-height: 20px;
color: var(--secondaire);
/* Collée sous la proposition, dans la même boîte : la marge négative qui rattrapait
* l'ancienne marge basse de `.proposition` n'a plus lieu d'être. */
margin: var(--esp-8) 0 0;
}
.sources-proposition a {
color: var(--or-brule);
}
.lien-mort {
color: var(--secondaire);
font-style: italic;
}
.sources-saisie {
margin: 0 0 var(--esp-12);
}
.sources-saisie > summary {
font-size: 13px;
line-height: 20px;
color: var(--secondaire);
cursor: pointer;
min-height: var(--cible);
display: flex;
align-items: center;
}
.sources-saisie > summary:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.sources-saisie input {
margin-bottom: var(--esp-8);
}
.proposition-saisie {
margin-bottom: var(--esp-24);
}
/* --- Thèmes ------------------------------------------------------------------------ */
.grille-themes {
list-style: none;
margin: 0 0 var(--esp-24);
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0;
}
.grille-themes label {
display: flex;
align-items: center;
gap: var(--esp-8);
min-height: var(--cible);
font-weight: 400;
cursor: pointer;
}
/* Étiquette de thème : neutre, le jaune reste réservé à « Nouveau ». */
.etiquette--theme {
background: transparent;
color: var(--secondaire);
border: var(--trait-controle);
border-radius: var(--rayon-objet);
font-weight: 500;
letter-spacing: 0.02em;
}
/* --- Chiffres publics d'un débat --------------------------------------------------- */
.chiffres {
list-style: none;
margin: 0 0 var(--esp-24);
padding: 0;
}
.chiffre-valeur {
font-family: var(--police-titres);
font-size: 2.4rem;
line-height: 1;
font-weight: 600;
color: var(--or-brule);
margin: 0;
font-variant-numeric: tabular-nums;
}
.chiffre-intitule {
margin: var(--esp-4) 0 var(--esp-8);
}
.chiffre-dates {
margin: 0 0 var(--esp-8);
}
.chiffre-source a {
color: var(--or-brule);
}
/* La carte d'un chiffre public — comme `.fig-card` dans la maquette
* `debat-chiffres.html` : valeur/dates, puis l'emplacement de capture, puis la
* source, empilés ; `.chiffre-public-top` met la valeur et le graphique en gaufre
* côte à côte dès que la place le permet. Le graphique est du VRAI calcul (le
* pourcentage enregistré), donc il reste — voir `.gaufre` plus bas et
* `chiffres.py::pourcentage` côté service. */
.chiffre-public-top {
display: flex;
flex-wrap: wrap;
gap: var(--esp-16);
align-items: flex-start;
margin-bottom: var(--esp-16);
}
.chiffre-public .chiffre-corps {
flex: 1 1 220px;
min-width: 0;
}
.chiffre-public .emplacement-image {
margin-bottom: var(--esp-12);
}
.gaufre {
flex: 0 0 auto;
width: 88px;
height: 88px;
display: block;
}
.gaufre rect {
fill: var(--trait);
}
.gaufre rect.pleine {
fill: var(--or-brule);
}
/* Emplacement d'illustration — capture de source, image de mème, dessin décoratif de
* bandeau. Ce chantier ne recrée AUCUNE de ces images : chaque emplacement est un
* cadre en pointillés, vide, prêt à recevoir un fichier déposé plus tard. Voir la
* section 5 de la consigne et NOTES-CHANTIER-I.md. */
.emplacement-image {
border: 1px dashed var(--gris-icone);
border-radius: var(--rayon-bloc);
background: var(--panneau-2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--esp-4);
text-align: center;
padding: var(--esp-16);
color: var(--secondaire);
}
.emplacement-image strong {
font-size: .86rem;
color: var(--encre);
font-weight: 600;
}
.emplacement-image span {
font-size: .78rem;
max-width: 32ch;
}
.emplacement-image--16-9 {
aspect-ratio: 16 / 9;
}
/* --- Filtre par thème --------------------------------------------------------------- */
.separateur-filtre {
color: var(--gris-icone);
align-self: center;
padding: 0 var(--esp-4);
user-select: none;
}
.lien-discret {
color: var(--secondaire);
font-weight: 400;
}
.ligne-filtre {
margin: calc(-1 * var(--esp-8)) 0 var(--esp-16);
}
a.etiquette--theme {
text-decoration: none;
}
a.etiquette--theme:hover,
a.etiquette--theme:focus-visible {
border-color: var(--secondaire);
color: var(--encre);
}
/* Rangée de thèmes en liste — page d'un débat et page de compte. La carte d'un débat
* ne s'en sert plus depuis le chantier I2 : ses thèmes ont rejoint la rangée de badges
* en tête de carte (`.badges-debat`). */
.themes-debat {
display: flex;
flex-wrap: wrap;
gap: var(--esp-4);
margin: var(--esp-8) 0 0;
padding: 0;
list-style: none;
}
/* --- Page d'un débat : le haut de page ------------------------------------------------
*
* `.debate-head` et `.figures` de la maquette debat-vote.html (chantier I2,
* instruction 9). L'en-tête du SITE, lui, ne bouge pas : il reste clair et non collant
* — la maquette le montre en `position: sticky`, ce qui reviendrait sur une décision
* déjà motivée (voir la note de `.entete` plus haut).
*/
.entete-debat {
display: flex;
flex-wrap: wrap;
/* Les chiffres s'alignent sur le BAS du titre, pas sur son milieu : c'est ce qui les
* fait lire comme une légende du titre plutôt que comme une colonne à côté. */
align-items: flex-end;
gap: var(--esp-16);
margin-bottom: var(--esp-16);
}
/* `420px` de base : en dessous, les chiffres passent sous le titre plutôt que de
* l'écraser. C'est la valeur de la maquette. */
.entete-debat-texte {
flex: 1 1 420px;
min-width: 0;
}
/* Les thèmes en tête de page — `.tag` de la maquette. Du TEXTE souligné de jaune, et
* non l'étiquette encadrée des listes : un débat en porte un à trois, en tête d'une
* page qui n'en montre qu'un seul, et trois cadres y pèseraient plus que le titre.
*
* Le mot est en or brûlé (5,9:1 sur le papier) et non dans le jaune profond de la
* maquette (2,5:1) ; le trait, lui, est bien le jaune — il ne porte aucune information
* que la couleur seule, il souligne un texte déjà lisible. */
.themes-tags {
display: flex;
flex-wrap: wrap;
gap: var(--esp-12);
list-style: none;
margin: 0 0 var(--esp-8);
padding: 0;
}
.tag-debat {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--or-brule);
border-bottom: 2px solid var(--jaune);
padding-bottom: 1px;
}
.titre-page-debat {
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
line-height: 1.14;
margin: 0;
max-width: 22ch;
}
/* Les deux chiffres de cadrage. Chasse tabulaire : deux nombres l'un sous l'autre à
* des largeurs de chiffre différentes se lisent mal. */
.cadrage-debat {
display: flex;
gap: var(--esp-24);
margin: 0;
max-width: none;
font-size: .82rem;
color: var(--secondaire);
}
/* La vidéo de présentation, en miniature à côté du titre (chantier Vidéo, VIDEO-4).
* Hauteur alignée sur celle du titre (`clamp` calé sur les mêmes bornes que
* `.titre-page-debat` juste au-dessus) ; `aspect-ratio: 1` plutôt que de refléter le
* cadre réel de la vidéo (portrait, paysage ou carré selon la prise de vue, voir
* `video.py`) — une miniature qui changerait de forme d'un débat à l'autre romprait
* la ligne du bandeau, `object-fit: cover` absorbant chaque fois la différence. */
.miniature-video-entete {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--esp-4);
}
/* Agrandie le 17/09/2026 (demande du client) : elle ne suit plus la hauteur du titre
* mais s'en tient à une vraie vignette, toujours carrée pour la même raison que sur les
* cartes. */
.miniature-video {
width: clamp(7rem, 16vw, 10rem);
aspect-ratio: 1;
border: var(--trait-sep);
}
/* « Partager la vidéo » sous la miniature : discret, comme « Signaler ». */
.partager-video {
min-height: 0;
min-width: 0;
padding: var(--esp-4) 0;
border: none;
background: none;
font-size: .78rem;
font-weight: 400;
color: var(--secondaire);
text-decoration: underline;
text-underline-offset: 2px;
}
.partager-video:hover {
border: none;
color: var(--encre);
}
.partager-video:active {
background: none;
}
/* La fenêtre de lecture. La vidéo occupe tout ce que l'écran permet sans déborder, dans
* sa forme réelle (portrait ou paysage) : ici on la regarde, on ne la range plus. */
.fenetre-video {
max-width: calc(100vw - 2 * var(--esp-16));
max-height: calc(100vh - 2 * var(--esp-16));
padding: var(--esp-8);
border: none;
border-radius: var(--rayon-bloc);
background: #000000;
}
.fenetre-video::backdrop {
background: rgb(0 0 0 / .8);
}
.fenetre-video-lecteur {
display: block;
max-width: calc(100vw - 2 * var(--esp-16) - 2 * var(--esp-8));
max-height: calc(100vh - 2 * var(--esp-16) - 2 * var(--esp-8) - var(--cible));
margin: 0 auto;
background: #000000;
}
.fenetre-video-actions {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--cible);
}
.fenetre-video-actions button {
min-height: 0;
padding: var(--esp-4) var(--esp-8);
border: none;
background: none;
font-size: .875rem;
color: #FFFFFF;
text-decoration: underline;
text-underline-offset: 2px;
}
.fenetre-video-actions button:hover {
border: none;
background: none;
opacity: .8;
}
.cadrage-debat b {
display: block;
color: var(--encre);
font-family: var(--police-titres);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
/* Le bandeau des chiffres sourcés — `.figures`.
*
* Rayon : `--rayon-bloc`, comme tous les blocs de la page (voir `.panneau`). Les 10 px
* de la maquette ont été harmonisés à la demande du client le 16 septembre 2026.
*
* Le fond est le panneau teinté de la maquette. Conséquence vérifiée : `--secondaire`
* n'y tient que 4,36:1, SOUS le seuil de 4,5:1 — la ligne d'attribution est donc en
* `--encre` (14,8:1), et c'est la taille, pas la couleur, qui la met en retrait. Les
* autres tiennent : `--or-brule` 5,5:1, `--encre` 14,8:1. */
.bandeau-chiffres {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-16);
background: var(--panneau-2);
border: var(--trait-sep);
border-radius: var(--rayon-bloc);
padding: var(--esp-12) var(--esp-16);
margin-bottom: var(--esp-16);
}
.chiffre-en-tete {
display: flex;
align-items: baseline;
gap: var(--esp-8);
}
.chiffre-en-tete b {
font-family: var(--police-titres);
font-weight: 600;
font-size: 1.45rem;
line-height: 1;
color: var(--or-brule);
font-variant-numeric: tabular-nums;
}
.chiffre-en-tete > span {
font-size: .82rem;
line-height: 1.3;
max-width: 24ch;
}
.separateur-chiffres {
width: 1px;
align-self: stretch;
background: var(--trait);
}
.lien-chiffres {
margin-left: auto;
font-size: .8rem;
text-align: right;
}
.lien-chiffres a {
display: inline-block;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid var(--jaune);
}
.lien-chiffres a:hover,
.lien-chiffres a:focus-visible {
border-bottom-color: var(--or-brule);
}
.lien-chiffres small {
display: block;
font-size: .71rem;
margin-top: 3px;
}
/* En dessous, le lien repasse à gauche et le filet vertical disparaît — il ne
* séparerait plus deux colonnes mais deux lignes. */
@media (max-width: 640px) {
.lien-chiffres {
margin-left: 0;
text-align: left;
}
.separateur-chiffres {
display: none;
}
}
/* --- Carte des groupes -------------------------------------------------------------- */
.carte {
margin: 0;
}
.carte svg {
display: block;
max-width: 100%;
height: auto;
overflow: visible;
border-radius: var(--rayon-bloc);
}
.carte figcaption {
margin-top: var(--esp-8);
}
/* La carte « verrouillée » : quand la personne n'a pas encore assez voté pour
* apparaître dessus, le tracé réel (celui des AUTRES participants, déjà calculé)
* reste affiché mais flouté, avec un message posé par-dessus — comme dans la
* maquette `debat-vote.html`. Ce n'est pas une illustration : les points dessous sont
* de vraies personnes qui ont voté, la carte n'est pas remplacée par un emplacement
* vide. Voir `_carte.html` et `conversation.html`. */
.carte-verrouillee {
position: relative;
}
.carte-verrouillee svg {
filter: blur(5px) saturate(.6);
}
/* Les deux schémas de « Comment ça marche » (chantier CCM) qui ne sont pas dans un
* conteneur `.carte` : sans cette règle, un `