/*
* Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
* Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
* autorisation ecrite.
*/
/* ==========================================================================
Punchbox — FEUILLE DE STYLE UNIQUE DU SITE
Applique charte/CHARTE-GRAPHIQUE.md. À lire avant toute retouche de web/.
Registre : régie radio, bakélite et laiton. Sobre, chaud, dense.
Tout passe par des VARIABLES CSS sur :root (thème clair), surchargées sous
[data-theme="sombre"]. AUCUNE couleur hors palette, AUCUNE ressource tierce.
Accent laiton #c9a227 et témoin vert #1f9d6b : identiques dans les deux thèmes.
========================================================================== */
/* --------------------------------------------------------------------------
1. JETONS — thème CLAIR (défaut, pages publiques)
-------------------------------------------------------------------------- */
:root {
color-scheme: light;
--fond: #faf7f0;
--fond-alt: #f5efe2; /* section alternée, dérivée du fond */
--carte: #ffffff;
--surface: #f3ede0; /* surface légèrement relevée (boutons, tuiles) */
--enfonce: #efe8d8; /* surface enfoncée (champs, VU, pistes) */
--texte: #1b1a17; /* 16.3:1 sur fond */
--secondaire: #5a5346; /* 7.1:1 sur fond */
--discret: #6f6650; /* ≥ 4.6:1 sur toutes surfaces claires — texte courant OK */
--bordure: #e6dfd0;
--bordure-forte:#d8cfb8;
--laiton: #c9a227; /* accent — identique clair/sombre */
--vert: #1f9d6b; /* témoin — identique clair/sombre */
--corail: #b6512f; /* tampons hero : publics visés */
--bleu: #3a6ea5; /* tampons hero : à venir (pointillés) */
--lien: #7e6410; /* laiton assombri, 5.3:1 sur fond — liens & focus */
--accent-titre:#7e6410; /* titres « laiton » lisibles sur clair */
--sur-laiton: #1b1a17; /* texte sur aplat laiton — 7.2:1 */
--sur-vert: #1b1a17; /* texte sur aplat vert — 5.1:1 */
--focus: #7e6410;
--err-fond: #f4edd8; /* teinte dérivée du fond, jamais de rouge cru */
--err-bord: #c9a227;
--err-texte: #1b1a17;
--ok-fond: #e6f3ec; /* vert dilué dans le fond */
/* Accents ASSOMBRIS pour l'emploi EN TEXTE / EN ICÔNE sur fonds clairs
(mission pb-passe-css, correctif A3). Le laiton/vert d'aplat rayonnent en
FOND ; passés en premier plan sur le clair ils tombaient sous le seuil WCAG
(laiton-icône 2,07:1 ; vert-texte 2,82:1). Ces variantes tiennent les seuils
mesurés — voir rapports/pb-passe-css.md. Aucun jeton existant renommé. */
--vert-texte: #0e7048; /* ≥ 4,5:1 texte : 5,02 sur --enfonce, 6,12 sur carte */
--laiton-icone: #94720f; /* ≥ 3:1 icône (UI) : 3,85 sur --surface, 4,49 carte */
--laiton-texte: #786010; /* ≥ 4,5:1 texte : 4,94 sur --enfonce, 5,27 fond-alt */
--corail-texte: #8a3d22; /* corail assombri — lisible en texte sur clair */
--bleu-texte: #29517d; /* bleu assombri — lisible en texte sur clair */
/* IDENTITÉ DE BOUTON — anthracite à filet laiton, bombé (décision fondateur
du 7 août 2026, mission pb-passe-css). Le laiton en aplat disparaît des
boutons. Lumière en haut, assombrissement RÉGULIER vers le bas (aucune bande
claire au milieu). L'-ombre porte le FILET laiton (0 0 0 1px), l'ÉPAISSEUR
de touche (0 2px 0, console uniquement) et une portée. La variante «-plat »
supprime l'épaisseur : pages publiques + état enfoncé de la console. */
--btn-p-texte: #f2e4c4;
--btn-p-fond: linear-gradient(180deg, #4a4d55 0%, #3b3e46 26%, #2c2f36 66%, #22252b 100%);
--btn-p-ombre: inset 0 1px 0 rgba(255,245,220,.22), inset 0 -2px 3px rgba(0,0,0,.5), 0 0 0 1px #8a6d35, 0 2px 0 #16181c, 0 3px 5px rgba(40,34,20,.35);
--btn-p-ombre-plat: inset 0 1px 0 rgba(255,245,220,.22), inset 0 -2px 3px rgba(0,0,0,.5), 0 0 0 1px #8a6d35, 0 3px 5px rgba(40,34,20,.35);
--btn-s-texte: #3d3a33;
--btn-s-fond: linear-gradient(180deg, #eeebe4 0%, #e0dcd2 28%, #cec9bc 68%, #bcb6a6 100%);
--btn-s-ombre: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(80,72,55,.2), 0 0 0 1px #8f886f, 0 2px 0 #9d9583, 0 3px 5px rgba(80,72,55,.22);
--btn-s-ombre-plat: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(80,72,55,.2), 0 0 0 1px #8f886f, 0 3px 5px rgba(80,72,55,.22);
/* Arbitrage A019 (7 août 2026) — « 2 px partout, doctrine franc ». Une seule
valeur, aucune gradation. Les trois noms de jetons subsistent (référencés
partout) mais valent tous 2 px. Voir rapports/rayon-unifie.md. */
--rayon: 2px;
--rayon-s: 2px;
--rayon-g: 2px;
--largeur: 1120px; /* pages applicatives & vente */
--largeur-doc: 1040px; /* documents légaux (2 zones) */
--mesure: 68ch; /* mesure de lecture confortable */
--ombre: 0 1px 2px rgba(27,26,23,.05), 0 8px 24px rgba(27,26,23,.06);
--ombre-forte: 0 18px 50px -14px rgba(27,26,23,.30);
--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "DejaVu Sans Mono",
"Liberation Mono", Consolas, "Courier New", monospace;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* --------------------------------------------------------------------------
1bis. JETONS — thème SOMBRE (poste de dictée + admin par défaut)
-------------------------------------------------------------------------- */
[data-theme="sombre"] {
color-scheme: dark;
--fond: #16181d;
--fond-alt: #1a1d24;
--carte: #1c1f26;
--surface: #22262f;
--enfonce: #101216;
--texte: #f2efe6; /* 15.5:1 sur fond */
--secondaire: #b9b3a5; /* 8.5:1 sur fond */
--discret: #989483; /* correctif A3/A8 : 4,98:1 sur --surface, 5,42 carte
(était #8a8578 : 4,12 surface / 4,48 carte, sous AA) */
--bordure: #2a2e36;
--bordure-forte:#3a3f4a;
--laiton: #c9a227;
--vert: #1f9d6b;
--corail: #c1653f;
--bleu: #4a84bd;
--lien: #e0c463; /* laiton éclairci, 10.4:1 sur fond */
--accent-titre:#e2c977;
--sur-laiton: #1b1a17;
--sur-vert: #06231a; /* 4.8:1 sur vert */
--focus: #e0c463;
--err-fond: #24231e;
--err-bord: #c9a227;
--err-texte: #f2efe6;
--ok-fond: #12241d;
/* En SOMBRE le laiton/vert tiennent déjà en premier plan (laiton 6,3–7,8:1,
vert 4,4–5,4:1 selon la surface) : les variantes A3 gardent donc la teinte
vive de la charte. Aucun assombrissement inutile qui casserait le rayonnement. */
--vert-texte: #1f9d6b; /* = --vert : 4,79 carte / 5,44 enfoncé / 4,89 fond-alt */
--laiton-icone: #c9a227; /* = --laiton : ≥ 6,2:1 sur toutes les surfaces sombres */
--laiton-texte: #c9a227; /* = --laiton : 6,97 sur fond-alt (avert) */
--corail-texte: #e2916c; /* corail éclairci — lisible en texte sur sombre */
--bleu-texte: #8fbbe8; /* bleu éclairci — lisible en texte sur sombre */
/* Bouton sombre — mêmes règles, paliers et filet éclaircis pour la bakélite. */
--btn-p-texte: #f7ecd2;
--btn-p-fond: linear-gradient(180deg, #565a63 0%, #464a53 26%, #363a42 66%, #2a2d34 100%);
--btn-p-ombre: inset 0 1px 0 rgba(255,245,220,.28), inset 0 -2px 3px rgba(0,0,0,.55), 0 0 0 1px #a9873f, 0 2px 0 #101216, 0 3px 5px rgba(0,0,0,.5);
--btn-p-ombre-plat: inset 0 1px 0 rgba(255,245,220,.28), inset 0 -2px 3px rgba(0,0,0,.55), 0 0 0 1px #a9873f, 0 3px 5px rgba(0,0,0,.5);
--btn-s-texte: #ddd8cc;
--btn-s-fond: linear-gradient(180deg, #333842 0%, #272b33 28%, #1d2027 68%, #15181d 100%);
--btn-s-ombre: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.5), 0 0 0 1px #6b6455, 0 2px 0 #0d0f12, 0 3px 5px rgba(0,0,0,.45);
--btn-s-ombre-plat: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.5), 0 0 0 1px #6b6455, 0 3px 5px rgba(0,0,0,.45);
--ombre: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.40);
--ombre-forte: 0 18px 50px -14px rgba(0,0,0,.60);
}
/* --------------------------------------------------------------------------
2. Socle
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* L'attribut [hidden] doit TOUJOURS gagner : plusieurs composants posent un
display (flex/grid) via leur classe, ce qui, sinon, écraserait le display:none
du navigateur (un .message ou .champ « hidden » resterait visible et vide). */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: var(--sans);
font-size: 17px;
line-height: 1.6;
min-height: 100dvh;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
a { color: var(--lien); }
a:hover { color: var(--lien); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.lien-saut {
position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 100;
background: var(--laiton); color: var(--sur-laiton);
padding: 10px 16px; border-radius: var(--rayon-s); font-weight: 700;
}
.lien-saut:focus { inset-inline-start: 16px; }
.sr-seulement {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Pictogrammes SVG inline — au trait, en currentColor. */
.pic { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; flex: none; }
.pic-l { width: 1.8rem; height: 1.8rem; }
svg { color: inherit; }
/* Séparateur discret entre sections. */
.sep { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--discret); margin: 6px 0; }
.sep::before, .sep::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--bordure); max-width: 160px; }
/* --------------------------------------------------------------------------
3. Bandeau (partagé par toutes les pages) + bascule de thème
-------------------------------------------------------------------------- */
.bandeau {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--fond) 88%, transparent);
backdrop-filter: saturate(1.3) blur(8px);
border-bottom: 1px solid var(--bordure);
}
.bandeau-inner {
max-width: var(--largeur); margin: 0 auto;
padding: 12px 20px; display: flex; align-items: center; gap: 14px;
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.marque .marque-titre { margin: 0; font-size: 1.15rem; letter-spacing: .16em; font-weight: 800; color: var(--accent-titre); }
.marque-nom { font-weight: 800; letter-spacing: .06em; font-size: 1.05rem; }
.marque-sous { color: var(--discret); font-size: .85rem; letter-spacing: .02em; }
.pastille { width: 11px; height: 11px; border-radius: 50%; background: var(--vert);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 22%, transparent); flex: none; }
/* Témoin d'état serveur (poste de dictée). */
.led { width: 13px; height: 13px; border-radius: 50%; background: var(--discret);
box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); flex: none; }
.led[data-etat="ok"] { background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.led[data-etat="occupe"] { background: var(--laiton); box-shadow: 0 0 8px var(--laiton); }
.led[data-etat="erreur"] { background: var(--laiton); box-shadow: 0 0 8px var(--laiton); }
.led[data-etat="inconnu"] { background: var(--discret); }
/* Nav de tête (mission hero-tampons-verifie) : onglets TOUJOURS visibles, entre
la marque et les actions (thème / compte). Volontairement plus légère que
.pbnav (vitrine/soutien) : pas de burger, pas de panneau — quatre liens. */
.bandeau-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 6px; }
.bandeau-nav a {
padding: 8px 12px; border-radius: var(--rayon-s); color: var(--texte);
text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.bandeau-nav a:hover { background: var(--surface); }
.bandeau-nav a[aria-current="page"] {
color: var(--accent-titre); font-weight: 700; box-shadow: inset 0 -2px 0 var(--laiton);
}
.bandeau-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
.bandeau-inner { flex-wrap: wrap; row-gap: 4px; }
.bandeau-nav { order: 3; width: 100%; justify-content: center; margin-inline-start: 0; }
.bandeau-nav a { padding: 6px 8px; font-size: .82rem; }
}
.badge-horslimite {
background: var(--err-fond); color: var(--err-texte); border: 1px solid var(--err-bord);
padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
}
.bouton-icone {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 14px; border-radius: var(--rayon-s);
border: 1px solid var(--bordure); background: var(--carte); color: var(--texte);
font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer;
}
.bouton-icone:hover { border-color: var(--discret); }
/* Sélecteur de langue — monté par js/i18n.js dans [data-lang-switcher].
Repose sur les mêmes jetons que .bouton-icone pour rester dans la charte. */
.pb-lang { display: inline-flex; }
.pb-lang-select {
font: inherit; font-size: .95rem;
/* place logique : le rembourrage large est côté fin de ligne (là où vit le
chevron), donc il se retourne tout seul en RTL. */
padding-block: 8px; padding-inline: 12px 30px; border-radius: var(--rayon-s);
border: 1px solid var(--bordure); background: var(--carte); color: var(--texte);
cursor: pointer; max-width: 11rem;
/* chevron maison en currentColor, pas d'image ni de ressource tierce */
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 14px center, right 9px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
/* En RTL, le chevron du sélecteur passe à gauche (background-position n'a pas
d'équivalent logique). */
[dir="rtl"] .pb-lang-select { background-position: left 14px center, left 9px center; }
.pb-lang-select:hover { border-color: var(--discret); }
/* Bouton de bascule de thème — présent sur toutes les pages. */
.btn-theme { width: 42px; padding: 8px 0; }
.btn-theme .pic { width: 1.25rem; height: 1.25rem; }
/* Un seul pictogramme est visible à la fois selon le thème courant. */
.btn-theme .ico-sombre { display: none; }
[data-theme="sombre"] .btn-theme .ico-clair { display: none; }
[data-theme="sombre"] .btn-theme .ico-sombre { display: inline-block; }
/* --------------------------------------------------------------------------
4. Boutons d'action
-------------------------------------------------------------------------- */
.bouton-laiton, .bouton-plein {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
background: var(--laiton); color: var(--sur-laiton);
border: 1px solid var(--laiton); border-radius: var(--rayon-s);
font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.bouton-laiton { font-size: 1.1rem; padding: 15px 30px; border-radius: 2px;
box-shadow: 0 6px 18px color-mix(in srgb, var(--laiton) 30%, transparent); }
.bouton-plein { padding: 11px 20px; }
.bouton-laiton:hover, .bouton-plein:hover { background: color-mix(in srgb, var(--laiton) 82%, var(--texte)); color: var(--sur-laiton); }
.bouton-secondaire {
background: var(--surface); color: var(--secondaire);
border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.bouton-secondaire:hover { border-color: var(--laiton); color: var(--texte); }
.bouton-annuler:hover { border-color: var(--err-bord); color: var(--texte); }
.lien-texte { background: none; border: none; color: var(--lien);
text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
/* --------------------------------------------------------------------------
5. Cartes, titres, notes, messages
-------------------------------------------------------------------------- */
.carte { background: var(--carte); border: 1px solid var(--bordure);
border-radius: var(--rayon-g); padding: 20px; box-shadow: var(--ombre); }
.carte-console { border-color: var(--bordure-forte); }
.titre-section { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700;
color: var(--accent-titre); letter-spacing: .02em; }
.sous-titre, .titre-section .sous-titre { color: var(--discret); font-weight: 400; }
.note { margin: 12px 0 0; font-size: .9rem; color: var(--secondaire); min-height: 1.2em; }
.note:empty { display: none; }
.note a { color: var(--lien); }
.message {
display: flex; gap: 10px; align-items: flex-start;
padding: .7rem 1rem; border-radius: var(--rayon-s);
background: var(--fond-alt); border: 1px solid var(--bordure); color: var(--texte);
}
.message-erreur { background: var(--err-fond); border-color: var(--err-bord); color: var(--err-texte); }
/* Pictogramme d'alerte (SVG inline embarqué, aucune requête tierce). */
.message-erreur::before {
content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px;
background: var(--laiton);
-webkit-mask: var(--ico-alerte) center / contain no-repeat;
mask: var(--ico-alerte) center / contain no-repeat;
}
:root {
--ico-alerte: url('data:image/svg+xml;utf8,');
}
/* --------------------------------------------------------------------------
5bis. MODE CLAIR — LISERÉS DE RÉGIE (thème par défaut)
Le clair est le thème PAR DÉFAUT (décision fondateur). On le structure par
des TRAITS NETS, pas par des ombres ni des reliefs simulés : bords un cran
plus francs, filet discret sous les titres de panneau, filet laiton en tête
des cartes « console ». Aucune de ces règles ne touche le thème sombre, qui
reste identique (sélecteur : tout SAUF [data-theme="sombre"]).
-------------------------------------------------------------------------- */
:root:not([data-theme="sombre"]) {
/* Profondeur par le trait, pas par le flou : cartes à plat, bord net. */
--ombre: none;
}
:root:not([data-theme="sombre"]) .carte,
:root:not([data-theme="sombre"]) .metier,
:root:not([data-theme="sombre"]) .page-vente .etape,
:root:not([data-theme="sombre"]) .tarif,
:root:not([data-theme="sombre"]) .plan,
:root:not([data-theme="sombre"]) .doc-carte,
:root:not([data-theme="sombre"]) details,
:root:not([data-theme="sombre"]) .volet-flottant {
border-color: var(--bordure-forte);
}
/* Filet discret sous le titre d'un panneau : bandeau d'étiquette de régie. */
:root:not([data-theme="sombre"]) .carte > .titre-section {
padding-bottom: 10px;
margin-bottom: 16px;
border-bottom: 1px solid var(--bordure);
}
/* Filet laiton en tête des cartes « console » — façade de régie, trait net. */
:root:not([data-theme="sombre"]) .carte-console {
border-top: 2px solid var(--laiton);
}
/* --------------------------------------------------------------------------
6. Champs de formulaire
-------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-inline { flex-direction: row; align-items: center; gap: 10px; }
.champ-libelle { font-size: .9rem; color: var(--secondaire); }
.champ-case { display: flex; flex-direction: row; align-items: center; gap: 10px;
font-size: .9rem; color: var(--secondaire); cursor: pointer; }
.champ-case input { width: auto; margin: 0; }
/* Choix du niveau de session (mission pb-session-durable) : deux options claires,
chacune avec sa durée ANNONCÉE — jamais en petits caractères. */
.champ-session { border: 1px solid var(--bord, color-mix(in srgb, var(--texte) 14%, transparent));
border-radius: 2px; padding: 12px 14px; margin: 4px 0 4px; display: flex;
flex-direction: column; gap: 12px; }
.champ-session > legend { padding: 0 6px; }
.champ-session .champ-case { align-items: flex-start; }
.champ-session .champ-case > span { display: flex; flex-direction: column; gap: 3px;
color: var(--texte); }
/* La durée n'est PAS de la fine impression : lisible, à peine plus discrète que le
libellé qu'elle précise. */
.note-duree { display: block; font-size: .85rem; line-height: 1.4;
color: var(--secondaire); }
.titre-sous { font-size: 1rem; margin: 4px 0 0; }
.champ-aide { font-size: .82rem; color: var(--secondaire); }
.champ-aide code {
font-family: var(--mono); background: color-mix(in srgb, var(--texte) 8%, transparent);
padding: 1px 5px; border-radius: 2px; }
.select, .entree {
font: inherit; color: var(--texte); background: var(--enfonce);
border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
padding: 11px 12px; width: 100%;
}
.champ-inline .select { width: auto; min-width: 8rem; } /* A6 : ≥ 128px, jamais écrasé à une lettre */
.couleur { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--bordure-forte);
border-radius: var(--rayon-s); background: var(--enfonce); cursor: pointer; }
/* --------------------------------------------------------------------------
7. PAGE DE VENTE (page-vente)
-------------------------------------------------------------------------- */
/* DENSITÉ (mission pb-densite) : la page de vente flottait dans 1120 px centrés,
laissant ~800 px de fond vide sur un 1920. On élargit pour occuper l'écran —
les grilles de cartes (auto-fit) se densifient d'elles-mêmes — en gardant une
gouttière et une mesure de lecture pour les blocs de texte étroits (accroche). */
.contenu-large { max-width: min(1400px, 94vw); margin: 0 auto; padding: 0 20px; }
.page-vente section { padding: 56px 0; }
.accroche { text-align: center; padding: 40px 20px 32px; }
.accroche h1 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 800;
letter-spacing: -.01em; margin: 0 auto; max-width: 32ch; }
.accroche h1 .laiton { color: var(--accent-titre); }
.accroche-sous { color: var(--secondaire); font-size: clamp(1rem, 2.2vw, 1.1rem);
max-width: 42ch; margin: 14px auto 0; }
.accroche-sous strong { color: var(--texte); font-weight: 600; }
.bloc-cta { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-note { color: var(--discret); font-size: .95rem; }
/* --------------------------------------------------------------------------
3bis. HERO D'ACCUEIL avec tampons — VERSION FINALE validée par le fondateur
(mission-finale-hero-valide.md, remplace hero-tampons-verifie et son
correctif). Recopiée depuis la maquette fournie ; adaptations nécessaires
documentées ici (règle du pacte « adapter si collision, sinon copier tel
quel ») :
- la nav simplifiée de la maquette (.nav/.marque/.bouton-secondaire) n'est
PAS dupliquée : le vrai bandeau (.bandeau plus haut dans ce fichier —
LED d'état, thème, disposition) fait déjà le même travail en mieux,
« vrai code, pas reconstruit » ;
- CTA sur .hero-cta .bouton-laiton/.bouton-secondaire plutôt que réécrire
.bouton-plein/.bouton-secondaire globaux, utilisés tels quels par toute
la console (chat, newsletter, régie…) — les réécrire aurait changé
l'allure de dizaines de boutons hors du hero ;
- .rect-b copié tel quel (aucune collision dans ce fichier) ; couleur de
bordure/texte factorisée en --tampon-bordure + var(--laiton)/var(--vert)
déjà existantes plutôt que répétée en dur 8 fois ;
- texte des tampons en text-transform:uppercase plutôt qu'écrit en
capitales dans i18n/*.json (garde la convention du reste du site,
où le CSS met en capitales — voir .titre-regie).
8 tampons, TOUS en z-index:-1 (jamais devant le titre/CTA/console — c'est
la règle qui a posé le plus de problèmes aux itérations précédentes).
.hero reçoit isolation:isolate pour que ce z-index négatif reste confiné au
hero (sinon les tampons passent sous le fond de la PAGE, pas juste sous le
texte). Pleine largeur, SANS carte (fond/bordure/max-width) : la maquette
validée n'en a pas — vérifié en écran, un fond de carte n'était pas dans le
code fourni. « Casse » volontairement la colonne .page-app main (--largeur,
1120-1600px) qui contient le reste de la console : le hero de la maquette
est pensé plein écran (comme .bandeau au-dessus), pas comme une carte dans
la colonne de lecture — vérifié en écran : les tampons larges (ex.
YOUTUBEURS, échelle 1.6) débordaient de la colonne à toutes les largeurs
utiles quand le hero restait dedans. overflow:hidden (les deux axes ;
overflow-x:clip seul ne clippe pas un enfant transform:rotate()scale(),
testé en isolation) évite qu'un tampon incliné+agrandi ne déborde
visiblement de son cadre. */
.hero {
position: relative; isolation: isolate; overflow: hidden;
width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
padding: 16px 40px 0; min-height: 400px;
}
.hero-texte {
position: relative; z-index: 2;
max-width: 640px; margin: 0; text-align: left;
}
.hero-titre { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800;
letter-spacing: -.01em; margin: 0 auto; max-width: 34ch; color: var(--texte); }
.hero-titre .laiton { color: var(--laiton); }
.hero-sous { color: var(--secondaire); font-size: clamp(1rem, 2.2vw, 1.1rem);
max-width: 44ch; margin: 14px auto 0; }
.hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center;
justify-content: center; gap: 10px; position: relative; z-index: 50; }
.hero-etoiles { color: var(--laiton); font-size: 13px; margin: 8px 0 0;
position: relative; z-index: 2; }
.hero-etoiles small { color: var(--discret); font-weight: 600; margin-left: 6px; }
/* CTA du hero : garde .bouton-laiton/.bouton-secondaire pour le comportement
commun (focus-visible, disabled…) mais leur donne, seulement dans le hero,
l'allure plate « console » de la maquette finale — sans toucher aux mêmes
classes utilisées ailleurs (compte tenu de la note en tête de bloc). */
.hero-cta .bouton-laiton, .hero-cta .bouton-secondaire { border-radius: 2px; box-shadow: none; }
.hero-cta .bouton-laiton {
background: var(--btn-p-fond); color: var(--btn-p-texte); box-shadow: var(--btn-p-ombre);
border: none; font-weight: 600; font-size: 14px; padding: 11px 22px;
}
.hero-cta .bouton-secondaire {
background: var(--btn-s-fond); color: var(--btn-s-texte); box-shadow: var(--btn-s-ombre);
border: none; font-weight: 600; font-size: 13px; padding: 10px 18px;
}
/* Tampons décoratifs façon passeport — .rect-b recopié de la maquette. Fond
teinté : ce qui est dessous reste lisible en transparence. Le fond des
tampons est décalé de 52px vers le bas (inset) : à top:0, la maquette
fournie fait légèrement déborder le tampon 1 (rotation+scale) au-dessus du
cadre — vérifié en écran, sans ce décalage il était rogné par
overflow:hidden. Ce décalage ne change ni la position relative des 8
tampons entre eux, ni leurs couleurs/rotations/échelles. */
.hero-tampons-fond { position: absolute; inset: 52px 0 0 0; z-index: -1; pointer-events: none; }
.rect-b {
position: absolute; z-index: -1;
border: 3px solid var(--tampon-bordure, currentColor); border-radius: 3px;
padding: 15px 22px; text-align: center; background: rgba(14,15,19,0.5);
pointer-events: none;
}
.rect-b::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--tampon-bordure, currentColor); opacity: .5; }
.rect-b .coin { position: absolute; width: 11px; height: 11px; border: 2px solid var(--tampon-bordure, currentColor); }
.rect-b .coin.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.rect-b .coin.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.rect-b .coin.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.rect-b .coin.br { bottom: -6px; right: -6px; border-left: none; border-top: none; }
.rect-b .petite { font-family: 'Courier New', monospace; font-size: 13px; letter-spacing: .15em;
display: block; text-transform: uppercase; }
.rect-b .grosse { font-family: 'Courier New', monospace; font-size: 24px; font-weight: 900;
letter-spacing: .02em; display: block; line-height: 1.15; margin-top: 4px; text-transform: uppercase; }
.rect-b.laiton { --tampon-bordure: var(--laiton); color: var(--laiton); }
.rect-b.vert { --tampon-bordure: var(--vert); color: var(--vert); }
.rect-b.corail { --tampon-bordure: #d9714f; color: #e8a084; }
.rect-b.bleu { --tampon-bordure: #5a9bd4; color: #7fb4e0; }
.rect-b.pointille { border-style: dashed; }
/* Position/rotation/échelle de chaque tampon — valeurs recopiées telles
quelles depuis la maquette (top/left/transform), en classes plutôt qu'en
style inline pour éviter de répéter 8 fois des couleurs déjà en variables. */
.tampon-1 { top: -6px; left: 26%; transform: rotate(-9deg) scale(1.3); }
.tampon-2 { top: 0; left: 60%; transform: rotate(6deg) scale(1.2); }
.tampon-3 { top: 130px; left: 82%; transform: rotate(5deg) scale(1.6); }
.tampon-4 { top: 270px; left: 80%; transform: rotate(-6deg) scale(1.15); }
.tampon-5 { top: 90px; left: 58%; transform: rotate(-8deg) scale(1.4); }
.tampon-6 { top: 250px; left: 66%; transform: rotate(7deg) scale(1.1); }
.tampon-7 { top: 210px; left: 24%; transform: rotate(10deg) scale(1.05); }
.tampon-8 { top: 200px; left: 56%; transform: rotate(-4deg) scale(1.2); }
/* La maquette (positions en %, tampon YOUTUBEURS à gauche:82% échelle 1.6)
ne tient sans déborder qu'à partir de ~1490px de large — vérifié en écran
à plusieurs largeurs (1920 → 1081), le tampon YOUTUBEURS dépassait le cadre
du hero entre 1080 et 1480px. En dessous de 1480px, les tampons rejoignent
le flux, en bande sous le CTA, à plat. La règle « jamais devant » reste la
même (z-index:-1), elle ne dépend pas de la largeur d'écran. */
@media (max-width: 1480px) {
.hero { padding: 28px 20px 24px; min-height: 0; }
.hero-tampons-fond {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin-top: 26px; position: relative; inset: auto; z-index: -1;
}
/* position:relative (pas static) : .coin est en position:absolute et doit
rester ancré à SON tampon, pas remonter au prochain ancêtre positionné
(.hero) — vérifié en écran, sans ça les coins des tampons 1 et 8
sautaient dans les angles du bloc entier. top/left aussi neutralisés :
position:relative les applique encore comme décalage (contrairement à
static), sans quoi chaque tampon restait décalé de son ancienne position
en %/px — vérifié en écran, ils sortaient tous du cadre. */
.rect-b { position: relative; top: auto !important; left: auto !important; transform: none !important; }
}
.page-vente .surtitre { text-align: center; color: var(--discret); text-transform: uppercase;
letter-spacing: .12em; font-size: .82rem; font-weight: 700; margin-bottom: 30px; }
.page-vente .titre-section { text-align: center; font-size: clamp(1.5rem, 3.6vw, 2.1rem);
font-weight: 800; color: var(--texte); letter-spacing: -.01em; }
.soustitre-section { text-align: center; color: var(--secondaire); margin: 12px auto 0; max-width: 46ch; }
/* Fonds alternés discrets pour distinguer les sections. */
.section-alt { background: var(--fond-alt); }
/* Métiers — grille dense, jamais une colonne (2 mini sur téléphone). */
.grille-metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.metier { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
padding: 22px 18px; text-align: center; font-weight: 600; box-shadow: var(--ombre);
display: flex; flex-direction: column; align-items: center; gap: 10px; }
.metier .pic { color: var(--laiton-icone); } /* A3 : icône laiton lisible sur carte */
/* Étapes */
.grille-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px; margin-top: 34px; }
.page-vente .etape { background: var(--carte); border: 1px solid var(--bordure);
border-radius: var(--rayon); padding: 26px 24px; box-shadow: var(--ombre); }
.etape-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.etape-num { flex: none; width: 34px; height: 34px; border-radius: 50%;
background: color-mix(in srgb, var(--laiton) 18%, var(--carte)); border: 1px solid var(--laiton);
color: var(--accent-titre); font-weight: 800; display: grid; place-items: center; }
.etape-ico { color: var(--laiton-icone); } /* A3 */
.page-vente .etape h3 { font-size: 1.15rem; }
.page-vente .etape p { margin: 0; color: var(--secondaire); }
/* Confiance */
.bloc-confiance { background: var(--fond-alt); }
.grille-confiance { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px; margin-top: 34px; }
.gage { background: var(--carte); border: 1px solid var(--bordure); border-inline-start: 4px solid var(--vert);
border-radius: var(--rayon); padding: 18px 20px; }
.gage h3 { font-size: 1.02rem; display: flex; gap: 8px; align-items: center; }
.gage h3 .coche { color: var(--vert); flex: none; }
.gage p { margin: 6px 0 0; color: var(--secondaire); font-size: .95rem; }
.gage-large { margin-top: 14px; background: transparent; border: 1px dashed var(--bordure-forte);
border-radius: var(--rayon); padding: 16px 20px; color: var(--secondaire); font-size: .92rem; text-align: center; }
.gage-large strong { color: var(--texte); }
.lien-charte { text-align: center; margin-top: 26px; }
/* Tarifs */
.grille-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; margin-top: 34px; align-items: start; }
.tarif { position: relative; background: var(--carte); border: 1px solid var(--bordure);
border-radius: var(--rayon); padding: 28px 26px; box-shadow: var(--ombre); }
.tarif-pro { border-color: var(--laiton); border-width: 2px; }
.badge-complet { position: absolute; top: -13px; inset-inline-end: 20px; background: var(--laiton);
color: var(--sur-laiton); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
padding: 5px 12px; border-radius: 999px; border: 1px solid var(--laiton); }
.tarif h3 { font-size: 1.25rem; letter-spacing: .02em; }
.prix-annuel { margin: 16px 0 4px; }
.prix-annuel .montant { font-size: 2.3rem; font-weight: 800; }
.prix-annuel .unite { color: var(--secondaire); font-weight: 600; }
.prix-equiv { color: var(--vert-texte); font-weight: 700; font-size: .95rem; } /* A3 */
.prix-mensuel { color: var(--secondaire); font-weight: 600; font-size: 1.05rem; margin-top: 8px; }
.tarif ul { list-style: none; padding: 0; margin: 18px 0 22px; }
.tarif li { padding: 6px 0; padding-inline-start: 26px; position: relative; color: var(--secondaire); }
.tarif li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--vert); font-weight: 700; }
.tarif .bouton-laiton { width: 100%; }
.tarif-clair .bouton-laiton { background: transparent; color: var(--lien); box-shadow: none; }
.tarif-clair .bouton-laiton:hover { background: var(--laiton); color: var(--sur-laiton); }
.bandeau-fondateurs { margin-top: 22px; background: var(--texte); color: var(--fond);
border-radius: var(--rayon); padding: 20px 24px; display: flex; flex-wrap: wrap;
align-items: center; gap: 8px 16px; justify-content: center; text-align: center; }
.bandeau-fondateurs .fort { color: var(--laiton); font-weight: 800; }
.bandeau-fondateurs .contrepartie { color: color-mix(in srgb, var(--fond) 78%, var(--discret)); }
.ligne-limite { text-align: center; color: var(--discret); font-size: .9rem; margin-top: 16px; }
.titre-fonctions { text-align: center; font-size: 1.2rem; font-weight: 800; margin-top: 52px; }
.grille-fonctions { list-style: none; padding: 0; margin: 26px auto 0; max-width: 900px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; }
.grille-fonctions li { position: relative; padding: 10px 0; padding-inline-start: 30px; color: var(--secondaire);
border-bottom: 1px solid var(--bordure); }
.grille-fonctions li::before { content: "✓"; position: absolute; inset-inline-start: 4px; top: 10px;
color: var(--vert); font-weight: 700; }
.grille-fonctions strong { color: var(--texte); font-weight: 600; }
.apercu-note { text-align: center; color: var(--discret); font-size: .92rem; margin-top: 16px; }
.apercu-note a { font-weight: 600; }
/* Limites du moteur — jamais promettre plus que ce qu'il fait (transcription
et synthèse vocale sur 8 langues européennes, 12 voix). Encadré sobre. */
.limites-moteur {
max-width: var(--mesure); margin: 22px auto 0;
padding: 14px 18px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
background: var(--surface); color: var(--secondaire); font-size: .92rem; text-align: center;
}
.compte-limites { color: var(--secondaire); font-size: .92rem; margin-top: 4px; }
/* Documents légaux : mention « fait foi en français » (seul élément traduit
d'une page qui reste sinon intégralement en français — choix juridique). */
.doc-foi {
margin: 0 0 20px; padding: 12px 16px;
border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
background: var(--surface); color: var(--secondaire); font-size: .92rem;
}
/* --------------------------------------------------------------------------
7bis. Maquette du poste de dictée (aperçu décoratif, TOUJOURS sombre)
Palette figée : la maquette dépeint la console sombre quel que soit le thème.
-------------------------------------------------------------------------- */
.cadre-appli { margin: 36px auto 0; max-width: 980px; border-radius: var(--rayon);
overflow: hidden; border: 1px solid var(--bordure); box-shadow: var(--ombre-forte); background: #16181d; }
.cadre-barre { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
background: #1e222a; border-bottom: 1px solid #333a45; }
.pastille-nav { width: 11px; height: 11px; border-radius: 50%; background: #454e5c; flex: none; }
.cadre-url { margin-inline-start: 8px; padding: 4px 14px; flex: 1; background: #12151a;
border-radius: 999px; color: #8b93a1; font-size: .8rem; }
.appli { --m-laiton:#e2c977; --m-vert:#3ddc97; --m-carte:#20242d; --m-bord:#333a45;
--m-bord-f:#454e5c; --m-texte:#f2efe6; --m-doux:#b9c0cc; --m-faible:#8b93a1;
background: radial-gradient(120% 80% at 50% -10%, #1b1f27 0%, #16181d 60%);
padding: 16px; color: var(--m-texte); line-height: 1.4; }
.mk-bandeau { display: flex; align-items: center; gap: 9px; padding: 2px 4px 14px; }
.mk-led { width: 11px; height: 11px; border-radius: 50%; background: var(--m-vert); box-shadow: 0 0 8px var(--m-vert); flex: none; }
.mk-marque { font-weight: 800; letter-spacing: .16em; color: var(--m-laiton); font-size: 1.05rem; }
.mk-marque-sous { color: var(--m-faible); font-size: .8rem; }
.mk-bandeau-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.mk-btn { padding: 5px 11px; border-radius: 2px; border: 1px solid var(--m-bord); background: #1e222a; color: var(--m-doux); font-size: .78rem; }
.mk-tableau { display: grid; gap: 12px; grid-template-columns: 156px minmax(0,1fr) 146px; align-items: start; }
.mk-carte { background: var(--m-carte); border: 1px solid var(--m-bord); border-radius: 2px; padding: 13px; }
.mk-carte-console { border-color: var(--m-bord-f); }
.mk-titre { margin: 0 0 11px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--m-laiton); }
.mk-regie { display: flex; flex-direction: column; gap: 11px; }
.mk-champ-lib { display: block; font-size: .72rem; color: var(--m-doux); margin-bottom: 4px; }
.mk-select { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px;
border: 1px solid var(--m-bord-f); border-radius: 2px; background: #16181d; color: var(--m-texte); font-size: .8rem; }
.mk-select .chev { color: var(--m-faible); }
.mk-enreg-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 2px 0; }
.mk-enreg { width: 74px; height: 74px; border-radius: 50%;
background: radial-gradient(circle at 50% 42%, #262b34, #14171d 78%);
border: 3px solid var(--m-laiton); box-shadow: 0 0 0 4px rgba(201,162,39,.28), 0 0 24px -2px var(--m-laiton);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.mk-enreg-pastille { width: 20px; height: 20px; border-radius: 2px; background: var(--m-laiton); }
.mk-enreg-txt { font-size: .56rem; font-weight: 800; letter-spacing: .08em; color: var(--m-texte); }
.mk-chrono { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--m-vert); letter-spacing: .06em; }
.mk-vu { width: 100%; height: auto; display: block; background: #0d0f13; border: 1px solid var(--m-bord); border-radius: 2px; }
.mk-vu .barre-vu { fill: var(--m-vert); }
.mk-vu .barre-vu.pic { fill: var(--m-laiton); }
.mk-vu-legende { margin: 5px 0 0; text-align: center; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-faible); }
.mk-texte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.mk-texte-tete .mk-titre { margin: 0; }
.mk-etat-txt { font-size: .68rem; color: var(--m-faible); }
.mk-zone-texte { background: #12151a; border: 1px solid var(--m-bord-f); border-radius: 2px; padding: 13px 14px;
min-height: 196px; font-family: var(--mono); font-size: .82rem; line-height: 1.75; color: var(--m-texte); }
.mk-zone-texte p { margin: 0 0 10px; }
.mk-caret { color: var(--m-vert); font-weight: 700; }
.mk-sorties { display: flex; flex-direction: column; gap: 8px; }
.mk-action { border: 1px solid var(--m-bord-f); border-radius: 2px; background: #1e222a; padding: 8px 11px; }
.mk-action-primaire { background: var(--m-laiton); border-color: var(--m-laiton); }
.mk-action-titre { display: block; font-weight: 700; font-size: .78rem; }
.mk-action-primaire .mk-action-titre { color: #2a2007; }
.mk-action-sous { font-size: .66rem; color: var(--m-faible); }
.mk-action-primaire .mk-action-sous { color: #5c4a12; }
.mk-etat-carte { border: 1px solid var(--m-bord); border-radius: 2px; background: #171b22; padding: 10px 11px; margin-top: 2px; }
.mk-etat-carte .mk-titre { margin-bottom: 8px; font-size: .58rem; }
.mk-etat-liste { margin: 0; }
.mk-etat-ligne { display: flex; justify-content: space-between; gap: 8px; font-size: .68rem; margin-bottom: 5px; }
.mk-etat-ligne:last-child { margin-bottom: 0; }
.mk-etat-ligne dt { margin: 0; color: var(--m-faible); }
.mk-etat-ligne dd { margin: 0; color: var(--m-doux); font-family: var(--mono); }
@media (max-width: 800px) { .mk-tableau { grid-template-columns: 1fr; } .mk-zone-texte { min-height: 130px; } }
/* --------------------------------------------------------------------------
8. Pied de page public / documents
-------------------------------------------------------------------------- */
.pied { border-top: 1px solid var(--bordure); background: var(--carte); padding: 40px 0 48px; margin-top: 20px; }
.pied-liens, .pied-inner .pied-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 24px; }
.pied-liens a { color: var(--secondaire); text-decoration: none; }
.pied-liens a:hover { color: var(--lien); text-decoration: underline; }
.pied-inner { max-width: var(--largeur-doc); margin: 0 auto; padding: 0 20px; }
.attributions { max-width: 640px; margin: 0 auto; color: var(--discret); font-size: .86rem; line-height: 1.55; }
.attributions h2 { font-size: .95rem; color: var(--secondaire); margin-bottom: 8px; text-align: center; border: 0; padding: 0; }
.attributions p { margin: 8px 0; }
.attributions a { color: var(--secondaire); }
.attributions .obligation { text-align: center; margin-top: 14px; }
/* --------------------------------------------------------------------------
9. DOCUMENTS LÉGAUX (page-doc) — deux zones : rail collant + corps
Jamais une colonne perdue au centre : la titraille tient le rail à gauche,
le corps occupe la largeur restante ; sous 900 px, tout s'empile.
-------------------------------------------------------------------------- */
/* DENSITÉ (mission pb-densite) : un document légal centré à 1040 px avec un corps
plafonné à 68ch laissait un large désert à droite du texte. On élargit le
cadre et on porte la mesure de lecture à ~86ch : le corps occupe l'espace sans
sacrifier la lisibilité (au-delà, une ligne trop longue nuirait à la lecture —
c'est une FONCTION, pas du vide décoratif : on ne la casse pas, charte §2). */
.doc { max-width: min(1280px, 94vw); margin: 0 auto; padding: 44px 20px 20px;
display: grid; gap: 20px 48px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .doc { grid-template-columns: 280px minmax(0, 1fr); } }
.doc-rail { }
@media (min-width: 900px) { .doc-rail { position: sticky; top: 76px; } }
.doc-corps { min-width: 0; max-width: 86ch; }
.doc-surtitre { color: var(--discret); text-transform: uppercase; letter-spacing: .12em;
font-size: .82rem; font-weight: 700; margin: 0 0 10px; }
.doc h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; line-height: 1.15; }
.doc .maj { color: var(--discret); font-size: .92rem; margin: 0 0 8px; }
.doc-corps h2 { font-size: 1.35rem; font-weight: 800; margin: 2.4rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid var(--bordure); }
.doc-corps h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.doc-corps h3 { font-size: 1.1rem; font-weight: 700; margin: 1.6rem 0 .4rem; }
.doc p { margin: .7rem 0; color: var(--secondaire); }
.doc strong { color: var(--texte); }
.doc ul { color: var(--secondaire); padding-inline-start: 1.3rem; }
.doc li { margin: .4rem 0; }
.resume { font-size: 1.2rem; line-height: 1.5; color: var(--texte); background: var(--carte);
border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px 22px; box-shadow: var(--ombre); margin: 1.2rem 0 0; }
.resume strong { color: var(--accent-titre); }
.sous { color: var(--discret); font-size: .95rem; margin: 0 0 1rem; }
.voir-aussi { margin-top: 1.6rem; }
/* Engagements — grille dense sur large écran (jamais une colonne étroite). */
ol.engagements { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: e;
display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 1100px) { ol.engagements { grid-template-columns: 1fr 1fr; } }
ol.engagements > li { counter-increment: e; position: relative; padding: 1.1rem 0; padding-inline-start: 3.25rem; border-bottom: 1px solid var(--bordure); }
ol.engagements > li::before { content: counter(e); position: absolute; inset-inline-start: 0; top: 1.05rem;
width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--laiton) 16%, var(--carte)); color: var(--accent-titre);
border: 1px solid var(--laiton); border-radius: 50%; font-weight: 700; font-size: 1.05rem; }
.titre-eng { display: block; font-weight: 700; font-size: 1.12rem; margin-bottom: .3rem; color: var(--texte); }
.corps-eng { color: var(--secondaire); font-size: 1rem; }
details { background: var(--carte); border: 1px solid var(--bordure); border-radius: 2px; margin: .75rem 0 0; padding: 0 1.1rem; }
details[open] { padding-bottom: 1rem; }
summary { cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none; color: var(--lien); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; display: inline-block; margin-inline-end: .6rem; color: var(--lien); transition: transform .15s ease; }
details[open] summary::before { transform: rotate(90deg); }
/* Icône directionnelle : le triangle fermé pointe vers le sens de lecture, donc
vers la gauche en RTL. Ouvert, il pointe vers le bas dans les deux sens. */
[dir="rtl"] summary::before { transform: scaleX(-1); }
[dir="rtl"] details[open] summary::before { transform: rotate(90deg); }
details p { margin: .5rem 0; }
.verif { font-size: .95rem; background: var(--ok-fond); border-inline-start: 4px solid var(--vert);
border-radius: 2px; padding: .7rem .9rem; margin-top: .6rem; color: var(--secondaire); }
.verif strong { color: var(--texte); }
.encadre { background: var(--err-fond); border: 1px solid var(--bordure); border-inline-start: 5px solid var(--laiton);
border-radius: var(--rayon); padding: 16px 18px; margin: 1.8rem 0; }
.encadre p { margin: .4rem 0; color: var(--secondaire); }
.encadre strong { color: var(--texte); }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.doc th, .doc td { text-align: start; padding: .5rem .7rem; border-bottom: 1px solid var(--bordure); color: var(--secondaire); }
.doc th { color: var(--texte); }
dl.contact { margin: 1rem 0; }
dl.contact div { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: .5rem 0; border-bottom: 1px solid var(--bordure); }
dl.contact dt { min-width: 190px; color: var(--discret); }
dl.contact dd { margin: 0; color: var(--texte); }
/* --------------------------------------------------------------------------
10. ESPACE CLIENT (page-compte) — grille : présentation | formulaires
-------------------------------------------------------------------------- */
.compte-page { max-width: var(--largeur); margin: 0 auto; padding: 24px 20px 56px;
display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
/* Deux colonnes dès la tablette : contexte à gauche, actions à droite. */
@media (min-width: 900px) {
.compte-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Les blocs pleine largeur (message, plans, factures, simulation) traversent. */
.compte-page > .message,
.compte-page > #bloc-plans,
.compte-page > #bloc-factures,
.compte-page > #bloc-simulation,
.compte-page > #bloc-reinit { grid-column: 1 / -1; }
}
.compte-intro p { margin: 0 0 .7rem; color: var(--secondaire); }
.compte-intro .compte-pitch { color: var(--texte); }
.compte-intro .compte-obtient strong { color: var(--accent-titre); }
.compte-retour { margin: .2rem 0 0 !important; }
.compte-retour a { color: var(--lien); }
.onglets { display: flex; gap: .5rem; margin-bottom: 1rem; }
.onglet { flex: 1; padding: .6rem; background: transparent; border: 1px solid var(--bordure-forte);
border-radius: var(--rayon-s); color: inherit; cursor: pointer; font: inherit; }
.onglet.actif { background: color-mix(in srgb, var(--laiton) 14%, var(--carte)); border-color: var(--laiton); color: var(--texte); }
.form-compte { display: grid; gap: .8rem; }
.compte-liste dt { color: var(--discret); }
.minutes { margin: 1rem 0; }
.minutes-tete { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.compte-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.grille-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.plan { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; display: grid; gap: .5rem; background: var(--carte); }
.plan-fondateur { border-color: var(--laiton); background: color-mix(in srgb, var(--laiton) 12%, var(--carte)); }
.plan-prix { font-size: 1.4rem; font-weight: 700; }
.carte-simulation { border: 1px dashed var(--laiton); }
.alerte-verif { padding: .7rem 1rem; border-radius: var(--rayon-s); background: var(--err-fond);
border: 1px solid var(--err-bord); color: var(--err-texte); }
.table-factures { width: 100%; border-collapse: collapse; }
.table-factures th, .table-factures td { text-align: start; padding: .4rem .6rem; border-bottom: 1px solid var(--bordure); }
/* Pied simple (compte / app) : rangée sobre plutôt que bloc bordé.
Texte COURANT → --secondaire (≥ 7:1 dans les deux thèmes) : --discret (3,7:1
en clair) est réservé aux étiquettes/grandes tailles, jamais à ce paragraphe. */
.page-compte .pied, .page-app .pied {
max-width: var(--largeur); margin: 28px auto 0; padding: 20px; background: none;
border-top: 1px solid var(--bordure); color: var(--secondaire); font-size: .9rem;
display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.page-compte .pied p, .page-app .pied p { margin: 0; max-width: 560px; }
/* --------------------------------------------------------------------------
11. POSTE DE DICTÉE (page-app) — tableau de bord en TROIS ZONES
La grille porte l'agencement par zones nommées ; l'ordre DOM reste l'ordre
de lecture. < 900px : une colonne (règle « formulaire/outil dense ») ;
900–1200 : régie | texte + sorties en bandeau ; ≥1200 : trois colonnes.
-------------------------------------------------------------------------- */
.page-app main { max-width: var(--largeur); margin: 0 auto; padding: 0 20px 24px; }
/* ==========================================================================
ASPECT INSTRUMENTAL DE LA CONSOLE (mission pb-console-pro — charte règle 8)
Décision du fondateur du 7 août 2026, au navigateur : la console est carrée,
nette, mate. Depuis l'arbitrage A019, les rayons sont à 2 px PARTOUT via les
défauts globaux (:root) — la surcharge de rayon ici n'a plus lieu d'être et a
été retirée (leçon 019 : plus de double règle). Ce bloc ne conserve que ce qui
reste PROPRE à la console : on coupe les ombres douces (--ombre), la profondeur
passe par le TRAIT, jamais par le flou.
Les voyants ronds (LED, pastilles d'état) restent circulaires — ce sont des
lampes, pas des panneaux. La sémantique de couleur (laiton = action principale,
vert = prêt/actif) est intacte. Les pages marketing (sans .page-app) suivent
désormais la MÊME doctrine (2 px), sans exception.
========================================================================== */
.page-app {
--ombre: none;
--ombre-forte: none;
}
/* Ligne d'actions fusionnée « SORTIE DU TEXTE » (Copier | Télécharger | Effacer) :
rangée à la base de la tranche, boutons de largeur égale, repliés si la voie est
étroite. Elle s'aligne avec le pied « Lire à voix haute » par la même règle
.tranche-bas (charte règle 10). */
.tranche-actions-sortie { align-items: stretch; }
.tranche-actions-sortie .bouton-action { flex: 1 1 7rem; justify-content: center; }
.tranche-actions-sortie .bouton-action-titre { flex: 0 1 auto; justify-content: center; gap: 8px; }
/* ==========================================================================
CONSOLE — disposition « L'ÉTABLI » (maquette console-v2 « B », mission
pb-console-reparation, 7 août 2026). Remplace la grille à trois colonnes
FIXES + `align-items: stretch` qui produisait à l'écran : le TROU CENTRAL
(colonne texte étirée à la hauteur du rack puis vide dessous — audit §5.2, D1),
le VIDE DE GAUCHE sous le VU (régie courte figée à 210 px à côté de colonnes
plus hautes, D2), et le DÉBORDEMENT À DROITE (vidéo + rendu en lot empilés
dans 300 px). Ici : des bandes PLEINE LARGEUR sizées à leur contenu (aucun
étirement, donc aucune zone morte), puis un FLUX équilibré pour les sorties.
On gagne la place en multipliant les colonnes DANS le flux, jamais en figeant
des colonnes vides (règle 12 / leçon 007). Ordre de lecture = ordre du DOM. */
.tableau-de-bord { display: flex; flex-direction: column; gap: 18px; }
/* RÉGIE en bandeau HORIZONTAL — trois groupes (saisie · transport · écoute)
coulés par auto-fit : leur nombre suit la place, sans seuil écrit. La régie
n'est plus une colonne haute à demi vide (D2) : c'est une bande courte. */
.console-regie { gap: 12px; }
.regie-bandeau { display: grid; gap: 16px 24px; align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.regie-groupe { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.regie-groupe-transport { align-items: center; text-align: center; }
.regie-groupe-transport .regie-bouton { margin: 2px auto; }
/* SORTIES — le FLUX (repris de maquettes/console-v2/commun.css) : multi-colonnes
CSS. Le navigateur calcule combien de colonnes de largeur >= --col-min tiennent,
les panneaux coulent et s'équilibrent → jamais de colonne figée qui déborde,
jamais de zone morte sous un panneau court (D1). Aucun @media : le nombre de
colonnes suit la largeur réelle. */
.console-sorties.flux { columns: 21rem; column-gap: 20px; }
.console-sorties.flux > .bloc { break-inside: avoid; margin: 0 0 20px; width: 100%; }
.console-sorties.flux > .bloc:last-child { margin-bottom: 0; }
/* Le télescripteur vit DANS le flux comme panneau escamotable (une colonne),
plus jamais une bande pleine largeur en bas de page (D3, R3). */
.console-sorties .telescripteur { max-width: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
.page-app main { max-width: 1120px; }
/* Pied compact sur le poste de dictée (mission pb-console-regie). */
.page-app .pied { margin-top: 14px; }
/* Note de traduction compacte dans la régie. */
.zone-regie .note { font-size: .82rem; line-height: 1.35; }
}
@media (min-width: 1200px) {
/* Remplir la largeur des grands écrans : sur 1920, une console figée laissait du
fond de chaque côté (mission pb-densite). On occupe l'écran, gouttière gardée. */
.page-app main, .page-app .bandeau-inner { max-width: min(1600px, 95vw); }
}
/* ==========================================================================
DISPOSITIONS DE CONSOLE (mission pb-dispositions, 7 août 2026).
UN SEUL squelette DOM (voir app/index.html), TROIS dispositions. Le client
bascule l'attribut `data-disposition` sur (posé avant rendu, mémorisé
comme le thème — js/disposition.js) ; SEULE la grille change. Tout le reste de
la feuille (cartes, boutons, relief, contrastes, jetons de thème) reste COMMUN :
on ne duplique pas la feuille, la maintenance ne triple pas — il n'y a que
TROIS jeux de règles de grille à tenir, réunis ci-dessous.
Coût de maintenance : ces trois blocs, et eux seuls. Ajouter un panneau = un
`.bloc` de plus dans le DOM ; il coule tout seul dans les trois (aucune règle
par disposition à ajouter). Le relief des boutons ne dépend PAS d'ici : il vit
sous `.page-app` (posé sur ), qu'aucune disposition ne retire.
Défaut = « etabli » (le socle laissé par pb-console-reparation, qui a corrigé
les défauts de rendu D1/D2/D3) : c'est la mise en page déjà vérifiée, donc le
défaut sûr pour qui ne choisit rien.
========================================================================== */
/* En-têtes de COULOIR — cachés partout SAUF en « lanes ». */
.lane-entete { display: none; }
/* ---- « colonnes égales » (flux) : régie, texte, rack et sorties dans UN même
flux multi-colonnes ; toutes les cartes égales. Les conteneurs intermédiaires
passent en display:contents pour que leurs enfants rejoignent le flux commun.
Le nombre de colonnes suit la largeur réelle (aucun @media). ------------- */
[data-disposition="flux"] .tableau-de-bord {
display: block; columns: 21rem; column-gap: 20px;
}
[data-disposition="flux"] .rack-editeurs,
[data-disposition="flux"] .rack-editeurs-grille,
[data-disposition="flux"] .console-sorties { display: contents; }
/* Chaque unité qui coule : ne se coupe pas entre deux colonnes, occupe la
largeur de sa colonne, garde une gouttière basse constante. */
[data-disposition="flux"] .tableau-de-bord > *,
[data-disposition="flux"] .console-sorties > *,
[data-disposition="flux"] .rack-editeurs-grille > * {
break-inside: avoid; width: 100%; margin: 0 0 20px;
}
/* La bannière de récupération (alerte rare) traverse toutes les colonnes. */
[data-disposition="flux"] .banniere-recup { column-span: all; }
/* ---- « plan de travail » (etabli, DÉFAUT) : régie en bandeau, texte + rack en
pleine largeur, sorties en flux dense. C'est le comportement de BASE de
.tableau-de-bord (flex colonne) + .console-sorties.flux ci-dessus ; rien à
surcharger. On l'écrit explicitement pour la lisibilité et pour qu'un
data-disposition absent ou inconnu retombe sur ce socle vérifié. --------- */
[data-disposition="etabli"] .tableau-de-bord,
:root:not([data-disposition]) .tableau-de-bord {
display: flex; flex-direction: column; gap: 18px;
}
/* ---- « par étapes » (lanes) : trois couloirs numérotés (capter · relire ·
produire). Même ossature que « plan de travail » (bandeau + pleine largeur +
flux), mais les en-têtes de couloir apparaissent, le rythme vertical s'aère et
les sorties se resserrent (col-min plus court) pour un damier d'étapes net. - */
[data-disposition="lanes"] .tableau-de-bord {
display: flex; flex-direction: column; gap: 28px;
}
[data-disposition="lanes"] .console-sorties.flux { columns: 18rem; }
[data-disposition="lanes"] .lane-entete {
display: flex; align-items: baseline; gap: 10px;
margin: 4px 0 -6px; padding-bottom: 6px;
border-bottom: 1px solid var(--bordure, currentColor);
}
[data-disposition="lanes"] .lane-num {
font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700;
line-height: 1; padding: 3px 8px; border: 1px solid currentColor;
border-radius: 2px;
/* Jeton TEXTE laiton (≥ 4,5:1 clair, 6,97:1 sombre) — pas --laiton (accent UI
≥ 3:1) : le chiffre est du texte, il doit passer le seuil texte. */
color: var(--laiton-texte, currentColor);
}
[data-disposition="lanes"] .lane-titre {
font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em;
}
[data-disposition="lanes"] .lane-sous {
font-size: .82rem; color: var(--secondaire); margin-inline-start: auto;
}
/* Sélecteur de disposition dans le bandeau : compact, à côté du bouton de thème.
pb-dispositions-fix — le contrôle existait mais s'effaçait : pas de libellé
visible, bordure à 1,45:1 (< 3:1), et écrasable sur mobile. On lui rend une
présence claire (icône + bord contrasté ≥ 3:1 dans les deux thèmes) sans
toucher aux variables de la charte. */
.disposition-choix { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.disposition-choix .ico-disposition { color: var(--secondaire); width: 1.15rem; height: 1.15rem; flex: none; }
.select-compact { min-width: 10.5rem; max-width: 13rem; height: 36px; padding: 2px 8px;
font-size: .9rem; cursor: pointer;
/* Bord franc, nettement détaché du fond du bandeau : 3,43:1 (clair) /
4,81:1 (sombre) — au-dessus du seuil 3:1 des éléments d'interface. */
border-color: color-mix(in srgb, var(--secondaire) 60%, var(--bordure-forte)); }
/* Sur téléphone : on peut rétrécir, mais JAMAIS jusqu'à l'illisible (l'ancien
min-width:0 laissait le flex l'écraser à un filet). */
@media (max-width: 640px) { .select-compact { min-width: 7.5rem; max-width: 46vw; } }
.titre-regie { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .22em; color: var(--accent-titre); }
.zone-regie { display: flex; flex-direction: column; gap: 14px; }
.regie-bouton { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0; }
.regie-vu { width: 100%; }
/* Gros bouton d'enregistrement — ORGANE de régie, pas un panneau rectangulaire
(charte règle 8, exception « organes »). C'est le transport repris de la maquette
d'accueil (.mk-enreg) : ROND, cerclé de laiton, avec un halo lumineux. La forme
emprunte à la fonction — un bouton d'enregistrement a toujours été rond. Laiton au
repos, vert à l'enregistrement : la couleur sémantique est conservée, et le halo
suit la même couleur. C'est une lueur d'organe actif (une vraie LED rayonne), pas
une fausse ombre de profondeur. Cible ≥ 84 px partout → WCAG 2.5.5 AAA (44 px). */
.bouton-enreg { --taille: 96px; width: var(--taille); height: var(--taille); border-radius: 50%;
background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--laiton) 8%, var(--surface)), var(--enfonce) 78%);
border: 3px solid var(--laiton); color: var(--texte); font: inherit; cursor: pointer;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--laiton) 28%, transparent), 0 0 24px -2px var(--laiton);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
transition: border-color .15s, box-shadow .2s; }
.bouton-enreg:hover { border-color: var(--laiton);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--laiton) 36%, transparent), 0 0 30px -2px var(--laiton); }
.bouton-enreg-pastille { width: 26px; height: 26px; border-radius: 2px; background: var(--laiton);
transition: background .2s, transform .2s; }
.bouton-enreg-txt { font-weight: 800; letter-spacing: .08em; font-size: .72rem; }
.bouton-enreg[aria-pressed="true"] { border-color: var(--vert);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 28%, transparent), 0 0 26px -2px var(--vert); }
.bouton-enreg[aria-pressed="true"] .bouton-enreg-pastille { width: 24px; height: 24px;
background: var(--vert); animation: pulse-rec 1.1s ease-in-out infinite; }
@keyframes pulse-rec { 0%,100% { transform: scale(1); } 50% { transform: scale(.86); } }
.bouton-enreg:disabled { opacity: .5; cursor: not-allowed; border-color: var(--bordure); box-shadow: none; }
.bouton-enreg:disabled .bouton-enreg-pastille { background: var(--discret); }
.bouton-enreg:focus-visible { outline-offset: 5px; }
.chrono { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--vert-texte); /* A3 */
letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.chrono-restant { font-family: var(--mono); font-size: .85rem; color: var(--secondaire);
font-variant-numeric: tabular-nums; text-align: center; }
.chrono-restant[data-ton="alerte"] { color: var(--lien); font-weight: 700; }
.vumetre { width: 100%; height: auto; display: block; background: var(--enfonce);
border: 1px solid var(--bordure); border-radius: var(--rayon-s); }
.vumetre-pied { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; min-height: 1.4em; }
.vumetre-legende { margin: 0; text-align: center; font-size: .78rem; color: var(--discret);
letter-spacing: .14em; text-transform: uppercase; }
.temoin-sat { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono);
font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 2px;
color: var(--sur-laiton); background: var(--laiton); border: 1px solid var(--laiton); }
.temoin-sat-titre { letter-spacing: .12em; }
.temoin-sat-conseil { font-family: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; font-size: .7rem; }
.temoin-sat.actif .temoin-sat-titre { animation: clignote-sat .5s steps(1) infinite; }
@keyframes clignote-sat { 50% { opacity: .35; } }
.champ-micro { width: 100%; }
.commandes-capture { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Bouton d'ouverture du MODE FLOTTANT (dans la régie). Discret : action secondaire. */
.btn-flottant { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
align-self: center; margin-top: 2px; }
.btn-flottant .pic { width: 18px; height: 18px; }
/* ==========================================================================
MODE FLOTTANT — dictaphone compact « sous la main »
Le volet #volet-flottant vit caché dans la page ; à l'activation il est déplacé
dans une fenêtre Document Picture-in-Picture ou détachée (voir app.js). Trois
contextes d'affichage : dans une fenêtre externe (.--fenetre), ancré dans un
coin de la page (.--ancre), ou caché (défaut). Même charte : carte bakélite,
accents laiton/vert, deux thèmes.
========================================================================== */
.volet-flottant { display: flex; flex-direction: column; gap: 12px;
padding: 16px; background: var(--carte); color: var(--texte);
border: 1px solid var(--bordure-forte); border-radius: var(--rayon); box-shadow: var(--ombre); }
.volet-flottant[hidden] { display: none; }
.volet-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.volet-marque { display: inline-flex; align-items: center; gap: 8px;
font-weight: 800; letter-spacing: .12em; font-size: .78rem; color: var(--accent-titre); }
.led-mini { width: 9px; height: 9px; border-radius: 50%; background: var(--laiton);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--laiton) 30%, transparent); }
.volet-flottant.enreg .led-mini { background: var(--vert);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vert) 30%, transparent); }
/* Boutons du volet : ICÔNES compactes, carrées, infobulle au survol (title/aria).
Assez grandes pour le doigt (36px) mais tenant à 4 de front dans 300 px. */
.volet-icone { display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; padding: 0; cursor: pointer; border-radius: var(--rayon-s);
background: var(--fond-doux, transparent); color: var(--texte); border: 1px solid var(--bordure-forte); }
.volet-icone:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--laiton); color: var(--accent-titre); }
/* Grisé, que l'inactivité passe par l'attribut disabled ou par aria-disabled (ce
dernier pour garder l'infobulle visible pendant une capture, mission pb-fix-effacer). */
.volet-icone:disabled, .volet-icone[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.volet-icone .pic { width: 18px; height: 18px; }
.volet-icone--rec { color: var(--vert); }
.volet-icone.ok { border-color: var(--vert); color: var(--vert); }
.volet-icone.ko { border-color: var(--err-bord, var(--laiton)); color: var(--err-texte, var(--laiton)); }
.volet-retour { width: 30px; height: 30px; }
.volet-retour .pic { width: 16px; height: 16px; }
/* Bascule pause ⇄ reprendre : une seule icône visible à la fois. */
.volet-icone .ico-reprendre { display: none; }
.volet-icone.en-pause .ico-pause { display: none; }
.volet-icone.en-pause .ico-reprendre { display: inline; }
.volet-mesures { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.volet-chrono { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.volet-vu { height: auto; width: 100%; }
.volet-etat { margin: 0; font-size: .82rem; line-height: 1.2; text-align: end; color: var(--secondaire);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volet-etat[data-ton="erreur"] { color: var(--err-texte, var(--laiton)); white-space: normal; }
.volet-transport { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Fenêtre externe (PiP / détachée) : le volet remplit la fenêtre, sans double cadre. */
.pip-body { margin: 0; min-height: 100vh; display: flex; background: var(--fond); }
/* Fenêtre externe : le volet remplit la hauteur, contenu réparti du haut (marque)
au bas (transport) — aucune zone vide, aucun défilement. */
.volet-flottant--fenetre { flex: 1; border: 0; border-radius: 0; box-shadow: none;
justify-content: space-between; gap: 10px; padding: 12px 14px; }
/* Repli ancré : barre compacte fixée dans un coin de la page (reste dans l'onglet). */
.volet-flottant--ancre { position: fixed; right: 16px; bottom: 16px; z-index: 1000;
width: min(300px, calc(100vw - 32px)); box-shadow: var(--ombre-forte); }
.alerte-capture { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--rayon-s);
font-size: .92rem; line-height: 1.5; border: 1px solid var(--laiton); background: var(--err-fond); color: var(--err-texte); }
.alerte-capture[data-ton="erreur"] { border-color: var(--err-bord); }
/* Garde-fou anti-perte du texte (mission pb-perte-texte) : avertissement EN
PLACE avant de remplacer ou d'effacer un texte transcrit non sauvegardé.
Jamais une modale ni une surcouche (charte §1) — même famille visuelle que
.alerte-capture (fond dérivé du fond, bordure laiton), deux actions claires. */
.confirm-perte { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--rayon-s);
border: 1px solid var(--err-bord); background: var(--err-fond); color: var(--err-texte);
display: flex; flex-direction: column; gap: 10px; }
.confirm-perte[hidden] { display: none; }
.confirm-perte-msg { margin: 0; font-size: .92rem; line-height: 1.5; }
.confirm-perte-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm-perte-actions .bouton-plein { flex: 1 1 auto; }
/* Bouton EFFACER : même gabarit que les autres sorties. Le danger se signale par
la forme (icône corbeille) et une teinte d'alerte discrète, jamais un rouge cru
(charte §4). */
.bouton-action-effacer .bouton-action-ico { color: var(--lien); }
/* Pas d'affordance de survol quand EFFACER est grisé pendant une capture
(aria-disabled) : sinon un bouton inactif « répondrait » au survol (pb-fix-effacer). */
.bouton-action-effacer:hover:not([aria-disabled="true"]) { border-color: var(--err-bord);
background: color-mix(in srgb, var(--laiton) 8%, var(--surface)); }
.banniere-recup { display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex-wrap: wrap; padding: 16px 18px; border-radius: var(--rayon-g);
border: 1px solid var(--laiton); background: color-mix(in srgb, var(--laiton) 12%, var(--carte)); color: var(--texte); }
.banniere-recup[hidden] { display: none; }
.banniere-recup-txt { display: flex; flex-direction: column; gap: 2px; }
.banniere-recup-txt strong { color: var(--accent-titre); }
.banniere-recup-txt span { color: var(--secondaire); font-size: .9rem; }
.banniere-recup-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* --- ACCUEIL (mission punchbox-console-accueil) : bandeau, palier newsletter,
chat — propres à web/index.html, absents de /app/. Même famille visuelle que
.banniere-recup/.confirm-perte ci-dessus : EN PLACE, jamais de modale ni de
surcouche (charte §1). -->
/* Bandeau compact au-dessus de la console (§1) : trois informations, pas plus
(produit bientôt payant, mécanique de l'essai, newsletter). */
.accueil-bandeau { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--rayon-g);
border: 1px solid var(--bordure); border-inline-start: 4px solid var(--laiton);
background: var(--fond-alt); }
.accueil-bandeau-txt { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--texte); }
.accueil-bandeau-txt strong { color: var(--accent-titre); }
.accueil-bandeau-quota { margin: 6px 0 0; font-size: .88rem; color: var(--secondaire); }
.accueil-bandeau-quota[hidden] { display: none; }
/* Palier newsletter (§3) : même gabarit que .confirm-perte, teinte laiton (pas
une erreur — juste une invitation) plutôt que la teinte d'alerte. */
.palier-newsletter { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--rayon-g);
border: 1px solid var(--laiton); background: color-mix(in srgb, var(--laiton) 10%, var(--carte));
color: var(--texte); }
.palier-newsletter[hidden] { display: none; }
.palier-newsletter h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--accent-titre); }
.palier-newsletter p { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; }
.palier-newsletter form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.palier-newsletter .panneau-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Chat public/privé (§4) : hauteur bornée + défilement interne — un chat ne
doit jamais pousser la console hors de vue (charte densité). */
.accueil-chat { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rayon-g);
border: 1px solid var(--bordure); background: var(--carte); display: flex; flex-direction: column; gap: 8px; }
.accueil-chat-onglets { display: flex; gap: 4px; }
.accueil-chat-onglet { padding: 6px 14px; border: 1px solid var(--bordure); background: var(--fond-alt);
color: var(--secondaire); border-radius: var(--rayon-s); cursor: pointer; font: inherit; font-size: .88rem; }
.accueil-chat-onglet.actif { background: var(--laiton); color: var(--sur-laiton); border-color: var(--laiton); font-weight: 600; }
.accueil-chat-onglet:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.accueil-chat-messages { height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
padding: 8px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--enfonce); }
.accueil-chat-msg { font-size: .88rem; line-height: 1.4; }
.accueil-chat-msg-pseudo { font-weight: 600; color: var(--accent-titre); margin-inline-end: 6px; }
.accueil-chat-msg-heure { color: var(--secondaire); font-size: .78rem; margin-inline-start: 6px; }
.accueil-chat-msg-texte { color: var(--texte); overflow-wrap: anywhere; }
.accueil-chat-vide { color: var(--secondaire); font-size: .88rem; margin: auto; }
.accueil-chat-form { display: flex; gap: 8px; flex-wrap: wrap; }
.accueil-chat-pseudo { flex: 0 1 140px; }
.accueil-chat-texte { flex: 1 1 240px; }
.accueil-chat .etat[data-ton="erreur"], .palier-newsletter .etat[data-ton="erreur"] { color: var(--lien); }
@media (max-width: 600px) {
.accueil-chat-form { flex-direction: column; }
.accueil-chat-pseudo, .accueil-chat-texte { flex: 1 1 auto; }
}
/* Progression */
.progression { margin: 0 0 12px; }
.progression[hidden] { display: none; }
.progression-tete { display: flex; justify-content: flex-end; align-items: baseline; margin-bottom: 6px; gap: 12px; min-height: 1em; }
.etat { color: var(--secondaire); font-size: .95rem; }
.progression-pct { font-family: var(--mono); color: var(--vert-texte); font-variant-numeric: tabular-nums; } /* A3 */
/* Jauge instrumentale (charte règle 8) : rectangulaire, aplat mat, aucun dégradé.
Vert = progression (état actif) ; laiton = attente (occupé) — sémantique gardée. */
.barre { height: 16px; background: var(--enfonce); border: 1px solid var(--bordure-forte);
border-radius: 2px; overflow: hidden; position: relative; }
.barre-jauge { height: 100%; width: 0%; background: var(--vert);
border-radius: 0; transition: width .25s ease; }
.barre[data-mode="pulse"] .barre-jauge { width: 35%; animation: pulse-barre 1.3s ease-in-out infinite;
background: var(--laiton); }
@keyframes pulse-barre { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.ligne-etat { margin: 10px 0 0; color: var(--secondaire); font-size: .88rem; min-height: 1.4em; }
.ligne-etat[data-ton="erreur"] { color: var(--lien); }
.ligne-etat[data-ton="succes"] { color: var(--vert-texte); } /* A3 (paire mesurée 3,01:1 dans l'audit) */
/* Zone texte */
.zone-texte { display: flex; flex-direction: column; }
.texte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.texte-tete .titre-section { margin: 0; }
.texte-etat { display: flex; align-items: baseline; gap: 10px; font-size: .85rem; color: var(--secondaire); }
.texte-etat .etat { font-size: .85rem; color: var(--secondaire); }
.texte-etat .compte { font-family: var(--mono); color: var(--secondaire); }
.texte-transcrit { width: 100%; flex: 1 1 auto; min-height: 340px; resize: none; overflow-y: auto;
font-family: var(--mono); font-size: 1.02rem; line-height: 1.75; color: var(--texte);
background: var(--enfonce); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s); padding: 16px; tab-size: 2; }
.texte-transcrit::placeholder { color: var(--discret); }
.texte-transcrit.ecrit { caret-color: var(--vert); }
/* Transcription EN DIRECT (mission pb-direct) — deux couleurs de la charte, en
place dans la console. Témoin d'état : pastille + libellé. */
.direct-etat { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8rem;
letter-spacing: .02em; color: var(--secondaire); }
.direct-etat::before { content: ""; align-self: center; width: 9px; height: 9px; border-radius: 50%;
background: var(--laiton); }
.direct-etat[data-etat="direct"] { color: var(--vert); }
.direct-etat[data-etat="direct"]::before { background: var(--vert); }
.direct-etat[data-etat="differe"] { color: var(--secondaire); }
.direct-etat[data-etat="differe"]::before { background: var(--laiton); }
/* Direct ÉTEINT (mission pb-direct-off) : pendant la dictée, la zone de texte ne
reste jamais vide sans explication — on montre que la machine travaille. Libellé
en --secondaire (7,1:1 clair / 8,5:1 sombre ≥ 4,5:1) ; pastille verte qui respire
pour signaler l'activité (figée si l'utilisateur réduit les animations). */
.direct-etat[data-etat="enregistrement"] { color: var(--secondaire); }
.direct-etat[data-etat="enregistrement"]::before { background: var(--vert);
animation: direct-respire 1.6s ease-in-out infinite; }
@keyframes direct-respire { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
.direct-etat[data-etat="enregistrement"]::before { animation: none; }
}
/* Mention BETA (mission pb-direct-off) : note discrète, en place sous la zone de
texte. --secondaire garantit le contraste ≥ 4,5:1 en clair ET en sombre. */
.direct-beta { margin: 8px 2px 0; font-size: .82rem; line-height: 1.5;
color: var(--secondaire); }
.direct-beta[hidden] { display: none; }
/* Aperçu provisoire : les mots pas encore figés, en chasse fixe comme le texte —
jamais dans le