/*!**********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/00_reset.css ***!
\**********************************************************************************************************************/
*, ::after, ::before {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
list-style-type: none;
padding-inline-start: 0;
}
/*!*********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/10_font.css ***!
\*********************************************************************************************************************/
html {
/* Il est interdit de rajouter des couleurs sans demander l'accord du PO */
--cBlanc1: var(--cBlanc);
/* inutilisé 2026-06-13 --cBlanc1p: #E0E0E0; */
--cBlanc02: #F5F5F5;
--cBlanc2: #F0F0F0;
--cBlanc03: #dce1ea;
--cBlanc3: #CCCFCC;
/* inutilisé 2026-06-13 --cBlanc4: #AAAFAA; */
--cBlanc5: #999C99;
/* ============================================
COULEURS TEXTE NOIR - UTILISATION OBLIGATOIRE
============================================ */
/* --cNoir1 : ÉLÉMENTS D'EMPHASE
- Titres : h1, h2, h3
- Texte des boutons (quand pas de couleur définie)
- Labels obligatoires (required)
- Menus de navigation
- Checkbox et radio boutons
- Valeur principale dans les compteurs (ex: "3" dans "3 / 5")
*/
--cNoir1: #181818;
/* inutilisé 2026-06-13 --cNoir1o: #18181855; */
/* --cNoir2 : CORPS DE TEXTE
- Paragraphes
- Listes
, énumérations
- Labels facultatifs
- Texte saisi dans les inputs
- Titres h4, h5, h6
- Valeur secondaire dans les compteurs (ex: "/ 5" dans "3 / 5")
*/
--cNoir2: #282828;
/* --cNoir3 : TEXTE TERTIAIRE
- Placeholders
- Messages d'aide discrets
- Texte désactivé
*/
--cNoir3: #555;
/* --cNoir4-5 : TEXTE TRÈS ATTÉNUÉ
- Éléments désactivés
- Texte décoratif
*/
--cNoir4: #999;
--cNoir5: #BBB;
--cBlanc: #FFF;
--cNoir: #000;
--cTexte1: #222;
/* inutilisé 2026-06-13 --cTexte2: #444; */
--cForm: #000;
/* inutilisé 2026-06-13 --cForm_b: #555; */
/* ============================================
PALETTES DE RÔLE — une seule forme, 8 paliers, toujours nommés pareil
0 fond très pâle · 1 fond pâle · 2 bordure / moyen · 3 couleur pleine (bouton, lien,
onglet actif, indicateur) · 4 foncé / survol · _a dégradé · _ah dégradé au survol ·
t texte posé sur la couleur pleine.
Accent est la couleur de l'espace où l'on est : elle change par une classe sur
(voir le bloc après html{}). Or, Rouge et Succes ne changent jamais.
Décision PO 2026-09-05. Aucune autre couleur de rôle n'est admise.
============================================ */
/* Accent : voir le bloc body { } après html { }. Elle vit sur body, pas ici — une
variable dérivée (dégradé, halo) se calcule là où elle est déclarée, et doit donc
être déclarée sur le même élément que la classe qui change la couleur. */
/* Or — s'inscrire, connexion, tarif, mise en avant */
--cOr0: #fefce8;
--cOr1: #fef3c7;
--cOr2: #f5d96b;
--cOr3: #FFD814; /* l'or d'Amazon, texte foncé dessus (décision chef de projet 2026-10-07) */
--cOr4: #FFCE12; /* son survol */
--cOr_a: linear-gradient(to bottom, var(--cOr3), var(--cOr4) 100%);
--cOr_ah: linear-gradient(to bottom, var(--cOr3), var(--cOr3) 100%);
--cOrt: #181818; /* foncé : le blanc sur --cOr3 ne faisait que 2,0:1 de contraste, 8,8:1 ainsi (décision chef de projet 2026-10-07) */
/* Rouge — erreur, alerte, suppression, geste dangereux */
--cRouge0: #fdf3f2;
--cRouge1: #fbe2df;
--cRouge2: #f5aaa3;
--cRouge3: #f15b4e;
--cRouge4: #930000;
--cRouge_a: linear-gradient(to bottom, var(--cRouge3), var(--cRouge4) 100%);
--cRouge_ah: linear-gradient(to bottom, var(--cRouge3), var(--cRouge3) 100%);
--cRouget: #FFF;
/* Cœur « J'aime » — un rouge à lui, sang, bordeaux foncé : le rouge de la famille dit
l'alerte et le danger, pas l'affection (décision chef de projet 2026-09-16).
Deux crans, comme les autres familles : le pâle du survol, la couleur du cœur. */
--cCoeur0: #f6e4e7;
--cCoeur3: #c1192f;
/* Succes — validation, confirmation */
--cSucces0: #f0fbff;
--cSucces1: #ddf1fa;
--cSucces2: #93d3ea;
--cSucces3: #0e9dc9;
--cSucces4: #0b5f7a;
--cSucces_a: linear-gradient(to bottom, var(--cSucces3), var(--cSucces4) 100%);
--cSucces_ah: linear-gradient(to bottom, var(--cSucces3), var(--cSucces3) 100%);
--cSuccest: #FFF;
--cBackground: var(--cBlanc);
/* Le bandeau des aperçus (pageRubrique.css, ≥ 1600px). UN PLATEAU UNI AU CENTRE, le dégradé
sur les bords seulement (décision chef de projet 2026-09-24) : l'ancien dégradé allait
du gris des bords au blanc du centre, et des cartes blanches identiques paraissaient
blanches sur le gris et ternes sur le blanc. Sur le plateau, toutes se détachent
pareil. Deux halos de couleur, tenus dans les bords, donnent un peu de vie : le bleu
du site en haut à gauche, l'orange des illustrations en bas à droite. */
--cBackgroundGrand:
radial-gradient(14% 40% at 0% 25%, #436bc11f, transparent),
radial-gradient(14% 40% at 100% 75%, #f39c341f, transparent),
linear-gradient(90deg, #E8EBF0 0%, #F4F5F7 12%, #F4F5F7 88%, #E8EBF0 100%);
/* Layout */
--largeur: 1360px;
/* inutilisé 2026-06-13 --maxWidth: 760px; */
--cBg: var(--cBlanc);
/* inutilisé 2026-06-13 --cBg_b: #CCC; */
/* Noir transparent — ombres */
--cOmbre: #0002; /* environ 15% */
--cOmbreForte: #0004; /* environ 30% */
/* transparent — overlays */
--cOverlay: #0008; /* environ 50% */
--cBlancOverlay: #FFFC; /* environ 80% */
--cBlancVerre: #FFFFFF8C; /* environ 55% — verre dépoli, toujours avec un flou (barre et bulle de l'aperçu) */
/* Ombres composées */
--ombrePortee: 0 4px 12px var(--cOmbre);
--ombrePortee2: 0 0px 25px #000;
--ombreModale: 0 10px 40px var(--cOmbreForte);
--ombreInterne: 0 0 10px 10px inset var(--cBlanc02);
/* Couleurs Noir gradients */
/* inutilisé 2026-06-13 --cNoir3_a: linear-gradient(to bottom, #505858, #303838 100%); */
/* inutilisé 2026-06-13 --cNoir3_ah: linear-gradient(to bottom, #505858, #505858 100%); */
/* inutilisé 2026-06-13 --cNoir3_ahLight: linear-gradient(to bottom, #707878, #707878 100%); */
/* inutilisé 2026-06-13 --cNoir3_at: #FFF; */
/* inutilisé 2026-06-13 --sAlerte_s: #DEC4C4; */
/* inutilisé 2026-06-13 --cTuto: #C6F; */
/* inutilisé 2026-06-13 --cTuto_t: #000; */
/* inutilisé 2026-06-13 --cTuto_ah: #d79af2; */
/* inutilisé 2026-06-13 --cBlanc1_t: #181818; */
/* inutilisé 2026-06-13 --cPlacehoder: #888; */
/* inutilisé 2026-06-13 --cForm_s: #FFF; */
/* inutilisé 2026-06-13 --bsCta: 0 7px 14px #3352, 0 3px 6px #0001; */
/* Formulaires utilisateur */
/* inutilisé 2026-06-13 --cFormUsr: #EEFAFF; */
/* inutilisé 2026-06-13 --cFormUsr_b: #334; */
/* inutilisé 2026-06-13 --cFormUsr_h: #FFF; */
/* inutilisé 2026-06-13 --cFormUsr_bf: #0AF; */
/* inutilisé 2026-06-13 --cFormUsr_cb: #059; */
/* inutilisé 2026-06-13 --cForm_bf: #3C0; */
/* inutilisé 2026-06-13 --cForm_cb: #590; */
/* inutilisé 2026-06-13 --cKo_b: #F88; */
/* Logo */
/* inutilisé 2026-06-13 --cLogo1: #EBF7E4; */
/* inutilisé 2026-06-13 --cLogo2: #C6E9AF; */
--ffBase: 'Noto Sans', Arial, sans-serif;
--ffMono: 'JetBrainsMono', 'Verdana', monospace;
/* Police standard de l'écran public (tout ce qui est projeté) — seule source, lue aussi
par les canvas via policeEcran() (kitPlugin/shared/police.ts). Décision 2026-08-29 :
Noto Sans seule, pas de Scada ni Montserrat sur ce que voit le public. */
--ffEcran: 'Noto Sans', sans-serif;
/* Police des chiffres de l'écran public (tirages, compte à rebours, panneaux à volets) —
chiffres monolarges garantis aux deux familles, lue par les canvas via policeChiffres().
Décision 2026-08-29 : remplace 'Courier New' (police machine, absente d'Android/Linux). */
--ffChiffres: 'Ubuntu Sans', 'Noto Sans', sans-serif;
/* Il est interdit de rajouter des styles typo sans demander l'accord du PO */
/* inutilisé 2026-06-13 --fTitre: normal normal 700 32px 'Scada', sans-serif; */
--fH1: normal normal 700 32px 'Scada', sans-serif;
--fH2: normal normal 700 24px 'Scada', sans-serif;
--fH3: normal normal 400 22px 'Scada', sans-serif;
--fH4: normal normal 400 18px 'Scada', sans-serif;
/* Titre de l'événement sur l'écran public (.zoneTitreTexte) : police de l'écran, pas Scada.
La taille est recalée à l'affichage par GestionnaireFondEnTete. Décision chef de projet 2026-09-14. */
--fTitreEcran: normal normal 700 32px var(--ffEcran);
--fMenu14: normal normal 400 14px 'Montserrat', sans-serif;
/* Cran compact de la barre de pilotage (AdaptationBarre.ts) : la barre redéfinit --fMenu14 avec
celle-ci pour son seul périmètre. Décision du chef de projet 2026-09-03. */
--fMenu13: normal normal 400 13px 'Montserrat', sans-serif;
--fCta16: normal normal 700 18px 'Montserrat', sans-serif;
/* Remise en service le 2026-09-16 (décision chef de projet) : le mono d'un LIBELLÉ, par
opposition à --fMono24b qui est le mono d'un GROS CHIFFRE (codes d'accès, compteurs).
Première usagère : l'étiquette d'une scène sur la Vitrine (composants/etiquetteJaime.css).
Le repli 'Courier New' est une vraie chasse fixe — celui de --ffMono (Verdana) n'en est
pas une. */
--fMono16: normal normal 400 16px 'JetBrainsMono', 'Courier New', Courier, monospace;
/* inutilisé 2026-06-13 --fMono24: normal normal 400 24px 'JetBrainsMono', 'Courier New', Courier, monospace; */
--fMono24b: normal normal 700 24px 'JetBrainsMono', 'Courier New', Courier, monospace;
--fCta20: normal normal 700 20px 'Montserrat', sans-serif;
/* inutilisé 2026-06-13 --fLegend16: normal normal 400 20px 'Scada', sans-serif; */
--fLight14: italic normal 200 14px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fMini11: italic normal 200 11px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fText16: normal normal 400 16px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fText16Strong: normal normal 700 16px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fItalic16: italic normal 400 16px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fAlerte16: italic small-caps 700 20px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--fLabel: normal normal 400 14px 'Noto Sans', Verdana, Geneva, Arial, sans-serif;
--border: 1px solid #dce1ea;
--borderR0: 3px;
--borderR1: 5px;
--borderR2: 7px;
--borderCarte: 1px solid var(--cNoir4);
--borderForm: 1px solid var(--cNoir5);
--borderInput: 1px solid var(--cNoir5);
/* Espacements — nommés par rôle (comme les bordures), accord PO 2026-07-03.
Migration progressive : ne remplacer une valeur en dur que si le rôle ET la valeur
correspondent (no-op visuel) ; aligner une dérive de valeur = décision à part. */
--gapListe: 32px; /* entre les éléments d'une liste. La colonne qui borde la liste (ex. panneau de filtres) prend le MÊME gap : deux rythmes différents côte à côte, c'est moche */
--paddingCorps: 20px; /* intérieur d'un corps de bloc / panneau / modale */
--gapDefaut: 8px; /* espace standard entre éléments frères (flex/grid) */
--gapReduit: 4px; /* variante volontairement plus serrée : listes compactes, groupes de boutons */
--gapMoyen: 12px; /* espacement intermédiaire entre éléments frères */
--gapLarge: 20px; /* espacement généreux entre groupes d'éléments */
--gapColonnes: 4rem; /* entre deux colonnes de page de nature différente : le texte et son image, le menu et son contenu (décision chef de projet 2026-09-17) */
--gapBlocs: 10rem; /* le blanc entre deux blocs empilés d'une même colonne de lecture : l'article, ses questions, ses scénarios ; deux chapitres (décision chef de projet 2026-09-17) */
--paddingMiniDiv: 8px 16px; /* padding de tout les blocs avec fond colorées */
--paddingEtiquette: 3px 6px; /* padding des span et autres etiquette */
--paddingCarte: 16px 20px; /* intérieur d'une CARTE — son corps comme sa barre d'actions. La carte existe en trois exemplaires jumeaux (blocs.css, ilotScenarios.css, 55_scenariosCompatibles.css) : chacun recopiait le chiffre, ils lisent maintenant la même variable (décision chef de projet 2026-09-07) */
--paddingCarteEtroit: 12px 20px; /* la même carte en fenêtre étroite, quand la barre d'actions passe sous le corps */
--paddingCta: 15px 20px; /* LE grand bouton : pleine largeur, min-width 180px, fonte --fCta16. La silhouette compacte, elle, prend --paddingCta14 (décision chef de projet 2026-09-07) */
--paddingBadge: 4px 16px; /* un badge en pilule, posé sur un bloc — pas la petite étiquette inline d'un récap, qui garde --paddingEtiquette */
--paddingPastille: 6px 14px; /* une pastille NON cliquable : une étape, un état, un filtre posé */
--paddingInput: 10px 12px; /* l'intérieur d'un champ de saisie (--borderInput dit sa bordure) */
--paddingCellule: 8px 16px 8px 0; /* une cellule de tableau : rien à gauche, la colonne commence au texte */
--paddingCode: 12px 16px; /* un bloc de code à recopier */
--paddingLigneListe: 16px 0; /* une ligne LARGE d'une liste — une question qu'on déplie, un état vide. Les lignes ordinaires prennent --gapDefaut 0 */
--paddingRecap: 10px 14px; /* le rythme intérieur du récapitulatif de composition (blocs, actions, encadrés) */
--paddingPage: 30px 40px; /* l'enveloppe d'une page : .contenu, et les colonnes du bas de page */
--paddingCarteLarge: 30px 25px; /* une carte qui doit respirer : une offre, une catégorie d'aperçu */
--paddingRappel: 20px 40px 25px; /* une carte de rappel du compte (.divRappel), et tout bloc posé à côté d'elles sur la même page (.aide, .enAttente) : les titres et les textes tombent à l'aplomb */
--paddingBandeau: 4rem; /* le bandeau des aperçus, qui traverse la fenêtre sur grand écran */
--retraitListeCourt: 20px; /* le retrait d'un ul de liste courte — récap, progression, ul générique. Le retrait FRANC du rédactionnel est --retraitListe */
--retraitListe: 40px; /* le retrait d'un ul rédactionnel — article, chapitre, réponse de FAQ. Ce retrait franc dit que ces lignes sont un bloc à part, et non la suite du paragraphe */
/* Boutons : un bouton ne choisit NI son padding, NI sa bordure, NI sa couleur
(décision PO 2026-07-18). Il prend ces variables — ou pas de bordure, ou la
couleur d'un rôle (primaire, danger, aperçu) — jamais une valeur à lui. */
--paddingCta14V: 8px; /* l'air vertical d'un bouton compact, seul : la barre de pilotage en déduit sa hauteur (_studioIntegree.css) */
--paddingCta14: var(--paddingCta14V) 16px; /* padding de tout bouton compact (.cta14, .ctaDiscret, toggles) */
--borderCta: 1px solid var(--cNoir4); /* LA bordure d'un bouton : celle-ci ou aucune */
--cCtaTexte: var(--cNoir2); /* LE texte d'un bouton neutre : ce noir ou une couleur de rôle */
}
/* ============================================
ACCENT — la couleur de l'espace où l'on est. Déclarée sur body, JAMAIS sur html
ou :root : une variable dérivée (--cAccent_a, --cFormFocusHalo…) se calcule sur
l'élément où elle est déclarée ; sur html elle figerait le bleu par défaut et la
classe du body ne changerait plus que les valeurs directes.
La classe du choisit la teinte ; sans classe : bleu administration.
Vitrine : baseVitrinePublic.twig pose bodyPageVitrine.
Studio : studio/base.twig pose modeTester ou modeDiffuser selon l'onglet principal
(la page se recharge à chaque changement de mode, pas de Turbo).
Une règle qui a besoin d'Accent au niveau :root doit lire var(--cAccent…) sur
l'élément concerné, pas déclarer une variable dérivée à la racine.
============================================ */
/* Bleu administration : compte, tarifs, données, Studio hors mode, onglet Préparer */
body {
--cAccent0: #f1f4f8;
--cAccent1: #e3eef8;
--cAccent2: #accee8;
--cAccent3: #436bc1;
--cAccent4: #335bb1;
--cAccent_a: linear-gradient(to bottom, var(--cAccent3), var(--cAccent4) 100%);
--cAccent_ah: linear-gradient(to bottom, var(--cAccent3), var(--cAccent3) 100%);
--cAccentt: #FFF;
/* Focus des champs : l'accent, et son halo à 15 % */
--cFormFocus: var(--cAccent3);
--cFormFocusHalo: color-mix(in srgb, var(--cAccent3) 15%, transparent);
}
/* Vitrine, pages publiques : vert */
.bodyPageVitrine {
--cAccent0: #f0f9f4;
--cAccent1: #dcf2e5;
--cAccent2: #9fd9b8;
--cAccent3: #08914c;
--cAccent4: #075524;
}
/* Studio, onglet Tester : violet */
.modeTester {
--cAccent0: #f7f1f9;
--cAccent1: #ecdcf3;
--cAccent2: #d2a8e0;
--cAccent3: #9b59b6;
--cAccent4: #783b92;
}
/* Studio, onglet Diffuser : bleu diffusion */
.modeDiffuser {
--cAccent0: #f0f6fb;
--cAccent1: #e0eef8;
--cAccent2: #a6cdea;
--cAccent3: #308ed1;
--cAccent4: #2572a9;
}
/* Bleu administration POSÉ SUR UN ÉLÉMENT, dans un autre espace (décision chef de projet
2026-09-06) : un geste d'administration au milieu d'une page publique — créer un événement
depuis la page d'une scène ou la page Configurer d'un scénario — se dit en bleu, pas dans
la couleur de la page. Mêmes cinq valeurs que le body sans classe : c'est le même espace,
ramené sur l'élément qui le porte (le bouton lui-même, pas sa barre : les voisins gardent
la couleur de la page). Une règle qui lit var(--cAccent…) sur cet élément voit le bleu. */
.accentAdministration {
--cAccent0: #f1f4f8;
--cAccent1: #e3eef8;
--cAccent2: #accee8;
--cAccent3: #436bc1;
--cAccent4: #335bb1;
}
/* ============================================
TITRES ET TYPOGRAPHIE
============================================ */
h1, h2, h3 {
color: var(--cNoir1);
}
h4 {
color: var(--cNoir2);
}
h5, h6 {
color: var(--cNoir3);
}
p, li {
color: var(--cNoir2);
}
h1, h2, h3, h4, h5, h6 {
font: var(--fH1);
}
button {
font: var(--fCta16);
}
h1 {
font: var(--fH1);
margin: 10px 15px 5px 0;
padding: 0;
}
h2 {
font: var(--fH2);
margin: 15px 10px 5px 0;
padding: 0;
}
h3 {
font: var(--fH3);
padding: 0;
margin: 25px 0 15px;
}
h4, h5 {
font: var(--fH4);
}
h4, h5, h6 {
margin: 25px 0 7px;
}
/* est utilisée comme balise de suffixe (#2, #3…) sur les noms d'éléments.
La balise remplace pour l'italique sémantique. */
i {
display: inline-block;
font-size: 75%;
font-weight: 700;
font-style: italic;
font-family: var(--ffMono);
}
/*!********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/31_cta.css ***!
\********************************************************************************************************************/
button {
user-select: none;
-webkit-user-select: none;
display: inline-block;
cursor: pointer;
margin: 0;
color: var(--cAccent3);
font: var(--fCta16);
text-decoration: none;
}
button.ctaAnnuler {
font: var(--fText16);
color: var(--cAccent3);
background: transparent;
border: transparent;
text-decoration: none;
}
/* button.lienBouton : un qui a le visuel d'un lien (templates/CLAUDE.md, « Bouton
ou lien ? ») — il prend exactement le style de a (décision chef de projet 2026-09-14) */
a,
button.lienBouton {
color: var(--cAccent3);
display: inline-block;
text-decoration: none;
padding: var(--gapReduit) 0;
}
button.lienBouton {
font: var(--fText16);
background: none;
border: none;
}
a:focus,
button.lienBouton:focus {
outline: none;
}
a:focus-visible,
button.lienBouton:focus-visible {
box-shadow: 0 0 0 3px var(--cFormFocus);
}
button.ctaAnnuler,
a.ctaAnnuler {
text-decoration: none;
display: block;
margin: 20px 0;
padding: 0;
color: var(--cNoir3);
}
button.btn, a.btn {
min-width: 180px;
cursor: pointer;
border: 0;
color: var(--cAccentt);
background-color: var(--cAccent3);
font: var(--fCta16);
text-align: center;
transition: all 0.3s;
position: relative;
padding: var(--paddingCta);
margin: 10px 0;
border-radius: var(--borderR1);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
gap: var(--gapMoyen); /* aligné 10 -> 12px (échelle PO 2026-07-18) */
}
a.btn:hover, button.btn:hover {
color: var(--cAccentt);
background-color: var(--cAccent4);
}
/* inutilisé 2026-06-13
button.btn2, a.btn2 {
min-width: 100px;
display: block;
cursor: pointer;
border: 0;
font: var(--fCta20);
padding: 20px 40px;
margin: 20px auto;
text-align: center;
transition: all 0.3s;
color: var(--cTexte1);
position: relative;
background-repeat: round;
width: fit-content;
border-radius: 12px;
}
button#redirection.btn2 {
background-color: transparent;
}
button#redirection.btn2:hover,
a.btn2:hover, button.btn2:hover {
color: var(--cAccentt);
background-color: var(--cAccent4);
}
*/
/* ============================================
CTA COMPACT — socle .cta14
LA silhouette des boutons d'action compacts (barres d'action, cartes) :
forme, police, dimensions définies ici et nulle part ailleurs. Modèle :
le bouton de la barre de contrôle aperçu (décision PO 2026-07-18).
Se pose à côté du rôle qui apporte sa couleur : class="cta14 ctaPreviewControle".
14 = la taille de police (--fMenu14). Silhouette formulaire à venir : .cta18.
============================================ */
.cta14 {
display: inline-block; /* un hors barre flex reste un bouton (padding vertical réel) */
padding: var(--paddingCta14);
font: var(--fMenu14);
border: none;
border-radius: var(--borderR1);
cursor: pointer;
/* Un bouton n'est jamais souligné, quelle que soit sa balise : la Vitrine souligne tous
ses liens (vitrine.css, décision PO 2026-08-25), un y était souligné
comme un lien de paragraphe (décision chef de projet 2026-09-06). */
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* La silhouette compacte GAGNE sur un rôle qui porte aussi une silhouette : la page des
tarifs de la Vitrine redéfinit .ctaOr en grand bouton de carte (offres.css : display block,
grand padding, police 16), ce qui écrasait « cta14 ctaOr » — le petit bouton doré qui mène
à l'offre du dessus (page « Mon studio », scènes réservées à une offre : décision chef de
projet 2026-10-07). Même composition que « cta14 ctaPrimaire », même taille. */
.cta14.ctaOr {
display: inline-block;
width: auto;
margin: 0;
padding: var(--paddingCta14);
font: var(--fMenu14);
text-align: left;
/* LE JAUNE PÂLE DU PETIT BOUTON (décision chef de projet 2026-10-08) : le jaune plein
d'Amazon (--cOr3) est fait pour les gros boutons et l'onglet « Tarifs » ; sur un petit
bouton posé dans une page aux tons neutres et pastel, il prenait le dessus sur tout le
reste. Fond pâle (--cOr1), et une bordure jaune pour qu'on le voie comme un bouton et
comme du jaune : c'est elle, plus que le fond, qui le détache de la page. Même épaisseur
que les autres boutons (--borderCta), seule la couleur change. */
background: var(--cOr1);
border: var(--borderCta);
border-color: var(--cOr3);
}
.cta14.ctaOr:hover {
background: var(--cOr2);
border-color: var(--cOr4);
}
/* LE PETIT BOUTON EN JAUNE PLEIN (décision chef de projet 2026-10-14) : la même silhouette
compacte, les couleurs du gros bouton des tarifs (.ctaOr). Pour le bouton qui est SEUL et
doit se voir : « Mon studio », la limite d'événements atteinte du Studio. Là où il revient
souvent (vignettes, listes de scénarios, page d'une scène), le jaune pâle reste. */
.cta14.ctaOr.ctaOrPlein {
background: var(--cOr3);
border-color: var(--cOr3);
color: var(--cOrt);
}
.cta14.ctaOr.ctaOrPlein:hover {
background: var(--cOr4);
border-color: var(--cOr4);
}
.cta14:disabled {
opacity: 0.4;
cursor: auto;
}
/* Rôle action principale : LE bouton qui fait la chose pour laquelle la page existe
(créer un événement…), en Accent — la couleur de l'espace, ou celle qu'un
.accentAdministration pose sur lui. Un seul rôle, défini ici et nulle part ailleurs
(décision chef de projet 2026-09-06) : pas de CSS par bouton. */
.ctaPrimaire {
background: var(--cAccent3);
color: var(--cAccentt);
}
.ctaPrimaire:hover {
background: var(--cAccent4);
color: var(--cAccentt);
}
/* Rôle offre : LE bouton qui mène aux offres et aux tarifs — Or, la couleur du prix et de
l'inscription (couleurs.md). L'encadré « limite d'événements » du Studio. */
.ctaOr {
background: var(--cOr3);
color: var(--cOrt);
}
.ctaOr:hover {
background: var(--cOr4);
color: var(--cOrt);
}
/* Rôle aperçu : LE bouton qui lance un aperçu — violet aperçu, partout
(catalogue, page Modifier, fiches d'animation). Un aperçu = violet,
décision PO 2026-07-18. */
.ctaPreview {
background: var(--cAccent_a);
color: var(--cBlanc);
}
.ctaPreview:hover {
background: var(--cAccent_ah);
}
/* ============================================
BADGE MODE TEST - Réutilisable partout
============================================ */
.badgeModeTest {
display: inline-block;
padding: var(--paddingBadge);
font: var(--fLabel);
color: var(--cBlanc);
background: var(--cAccent3);
border-radius: 10px;
margin: 10px 0;
}
/*!*****************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_studioIntegree.css ***!
\*****************************************************************************************************************************************/
/* ============================================
BARRE DE PILOTAGE - En bas de l'écran
============================================ */
#barrePilotage {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
/* UN SEUL écart entre deux voisins qui ne sont pas du même groupe : les 16px du trait
des groupes (.divActionScene, _sceneBoutons.css). Entre deux blocs de la barre, le
même — plus de 20px à part (décision du chef de projet, 2026-09-16). */
gap: 16px;
/* LA MARGE DE LA BARRE : le même air sur ses quatre côtés (décision du chef de projet,
2026-09-16 — avant, 16px à gauche et à droite contre 8 en haut et en bas). Un bouton
est toujours à 8px du bord, où que ce soit ; aucun enfant ne pose sa propre marge.
Une boîte dessinée DANS la barre (cadre « Passer à : X », boîte de fin, zone de test)
ne déplace jamais un bouton : elle prend son air sur celui de la barre, air négatif
du même montant — le bouton reste à 8px du bord, la boîte se dessine 4px en dedans. */
padding: var(--gapDefaut);
/* La hauteur de la barre ne bouge JAMAIS (décision du chef de projet, 2026-09-16) : ni
quand « Passer à : X » apparaît, ni entre deux scènes quand elle est vide, ni sur une
scène sans bouton. La barre la déclare elle-même : la hauteur d'un de ses boutons
(une ligne de leur police — 1lh, d'où la police posée ici —, l'air vertical du bouton
--paddingCta14V, sa bordure --borderCta de 1px) plus son propre air. Mêmes variables
que les boutons, donc elle suit le cran compact ; seul le cran « deux lignes »
(.barreDeuxLignes) la fait grandir. Aucun enfant fantôme dans la rangée : la marge
droite reste celle de gauche, 16px. Tout texte de la barre pose sa propre police. */
font: var(--fMenu14);
min-height: calc(1lh + 2 * var(--paddingCta14V) + 2px + 2 * var(--gapDefaut));
background: var(--cBlanc02);
/* Aucune ombre sur la scène : la barre est un outil, la scène passe avant (décision du
chef de projet, 2026-09-16). */
z-index: 999900;
}
/* ============================================
Crans d'adaptation à la largeur (AdaptationBarre.ts) — cumulés, dans cet ordre :
.barreCompacte, puis .barreMenuZoom, puis .barreDeuxLignes (celui-ci vit dans
_sceneBoutons.css). Le script mesure et pose les classes ; le CSS ne fait que dire à
quoi ressemble chaque cran.
============================================ */
/* Compact : la barre redéfinit, pour son seul périmètre, les deux variables que suivent
tous ses boutons (.cta14, toggles, réglages) — un bouton ne choisit toujours ni sa
police ni ses marges, c'est la barre qui les fixe. */
#barrePilotage.barreCompacte {
--paddingCta14V: 6px;
--paddingCta14: var(--paddingCta14V) 12px;
--fMenu14: var(--fMenu13);
}
/* ============================================
Zone Barre de progression (gauche)
============================================ */
/* Vide au repos : l'icône de la scène en cours a été retirée (2026-09-03, la frise reste
cachée — _progressBar.css). Le cadre n'apparaît qu'avec « Passer à : X » dedans ; la
barre de fin, elle, flotte à sa droite (_barreFin.css). */
#zoneProgressBar {
display: flex;
align-items: center;
gap: var(--gapDefaut);
border-radius: var(--borderR2);
/* Au-dessus du voile de la barre (_barreFin.css, levé par la barre de fin ou par la
boîte de passage de l'aperçu) : la zone reste vivante et éclairée quand le reste
de la barre est voilé ; son fond change avec la prise de pouvoir. */
position: relative;
z-index: 2;
transition: background 0.2s ease;
}
/* Le cadre prend son air SUR la marge de la barre, pas en plus (règle de la barre,
#barrePilotage ci-dessus) : le bouton ne bouge pas, la barre ne grandit pas d'un pixel,
le cadre se dessine à 4px du bord — comme la boîte de fin (_barreFin.css). */
#zoneProgressBar:has(#progressBarSuivant.visible) {
padding: var(--gapReduit);
margin: calc(-1 * var(--gapReduit));
background: var(--cBlanc);
box-shadow: 0 1px 3px var(--cOmbre);
}
/* Vide — ni « Passer à », ni barre de fin déployée — elle sort de la rangée : restée
dedans, même sans largeur, elle prenait l'écart de la barre et creusait un trou entre
la marge et le premier bouton. */
#zoneProgressBar:not(:has(#progressBarSuivant.visible)):not(:has(#barreFinScene.visible)) {
display: none;
}
/* Seule la boîte de fin, sans « Passer à » : la zone n'a rien à montrer en flux, mais elle
porte la boîte (hors flux, _barreFin.css). Elle sort de la rangée, comme vide — sinon,
sans largeur, elle prendrait l'écart de la barre et décalerait de 16px les boutons du
dessous au moment où la boîte paraît. Sa position statique reste le début de la rangée,
centrée comme un enfant de la rangée : la boîte se pose là où sont les boutons. */
#zoneProgressBar:not(:has(#progressBarSuivant.visible)):has(#barreFinScene.visible) {
position: absolute;
}
/* ============================================
Mini-widgets au-dessus de la barre
============================================ */
#miniWidgets {
position: absolute;
bottom: 100%;
left: var(--gapDefaut); /* au bord de la marge de la barre */
display: flex;
gap: var(--gapMoyen);
padding-bottom: 4px;
align-items: center;
}
/* ============================================
Îlot de test (IlotTest.ts)
============================================ */
/* Même matière et même entrée que la bulle des onglets de l'aperçu (#previewBulle, _preview.css) :
en haut au centre, verre dépoli, il sort du haut de l'écran en s'étirant dès l'ouverture de
l'écran — en test, pas de délai (chef de projet, 2026-09-22). Plan du chrome « îlot de
test » (échelle de salleEcran.css) : une boîte de dialogue ouverte le recouvre. */
#ilotTest {
position: fixed;
top: 12px;
left: 50%;
z-index: 999900;
display: flex;
align-items: center;
gap: var(--gapDefaut);
max-width: calc(100vw - 32px);
padding: var(--paddingCorps);
background: var(--cBlancOverlay);
border-radius: var(--borderR2);
box-shadow: var(--ombrePortee2);
transform: translateX(-50%);
animation: previewBulleApparition 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
#ilotTest {
background: var(--cBlancVerre);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
backdrop-filter: blur(10px) saturate(1.4);
}
}
/* Fermé par sa croix (IlotTest.ts) : `display: flex` ci-dessus l'emporterait sur l'attribut. */
#ilotTest[hidden] {
display: none;
}
/* La croix (silhouette : composants/boutonFermeture.css, importée via _preview.css) ferme la
rangée, à droite des deux boutons, dans le flux — comme celle de la barre de l'aperçu. */
#ilotTest .ctaPreviewControle,
#ilotTest .modaleClose {
flex-shrink: 0;
}
/* ============================================
Contenu des boîtes « Test en cours » et « Progression » (IlotTest.ts) — la carte, le
titre, le corps qui défile et la croix sont ceux du cadre commun (_boiteDialogue.css)
============================================ */
.boiteTestIntro,
.boiteTestScene {
font: var(--fText16);
margin: 0;
}
.boiteTestScene {
margin-top: var(--gapMoyen);
}
/* Un bouton et, dessous, la phrase qui dit ce qu'il fait. */
.boiteTestAction {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gapDefaut);
margin-top: var(--gapLarge);
}
.boiteTestAide {
font: var(--fLabel);
color: var(--cNoir3);
margin: 0;
}
/* L'arrêt du test, dans le pied de la boîte — hors du corps qui défile : la bulle de
confirmation s'ancre sur le bouton par ses coordonnées, il ne doit pas bouger. Le trait
le sépare des boutons de test. */
.boiteTestPied {
border-top: var(--border);
padding-top: var(--gapLarge);
}
.boiteTestPied .boiteTestAction {
margin-top: 0;
}
/* « Êtes-vous sûr ? » : noir, comme la confirmation d'un passage (.ctaEcranConfirmation, _sceneBoutons.css). */
.boiteTestConfirmer {
background: var(--cNoir);
border: var(--borderCta);
border-color: var(--cNoir);
color: var(--cBlanc);
}
/* Écran de fin (le navigateur a refusé window.close) : message centré, lien de relance. Même
écran pour une fenêtre fermée parce qu'une autre dirige (DirectionEcran.ts). */
#ecranFinTest,
#ecranDirigeAilleurs {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
gap: var(--gapMoyen);
align-items: center;
justify-content: center;
background: var(--cBlanc);
font: var(--fText16);
color: var(--cNoir);
text-align: center;
padding: 20px;
}
#ecranFinTest a {
color: var(--cAccent3);
text-decoration: underline;
}
/* ============================================
Boîte « Qui dirige ? » (DirectionEcran.ts)
============================================ */
.directionCorps p {
margin: 0;
}
.directionCorps .directionListeTitre {
font: var(--fH4);
color: var(--cNoir3);
margin: var(--gapLarge) 0 var(--gapDefaut);
}
/* Une information, pas un choix : l'heure d'ouverture de chaque fenêtre. */
.directionListe {
margin: 0;
padding-left: var(--retraitListeCourt);
font: var(--fText16);
}
.directionCetteFenetre {
margin-left: var(--gapDefaut);
font: var(--fLabel);
color: var(--cNoir3);
}
/* « Êtes-vous sûr ? » : noir, comme la confirmation d'un passage (.ctaEcranConfirmation, _sceneBoutons.css). */
.directionConfirmer {
background: var(--cNoir);
border: var(--borderCta);
border-color: var(--cNoir);
color: var(--cBlanc);
}
/* ============================================
Mode masquage automatique (?m)
============================================ */
#barrePilotage.masquable {
transform: translateY(100%);
transition: transform 0.3s ease;
}
#barrePilotage.masquable.visible {
transform: translateY(0);
}
/* ============================================
Pagination + Zoom VueKit
============================================ */
#zoneZoomVueKit {
position: relative;
margin-left: auto;
}
#zoomVueKit {
display: flex;
gap: var(--gapMoyen);
align-items: center;
}
/* Le bouton trois points n'existe qu'au cran « menu » : hors de ce cran, zoom et
pagination sont dans la barre, à leur place. Carré des boutons de zoom (ci-dessous). */
#ctaMenuZoom {
display: none;
padding: 0;
}
#barrePilotage.barreMenuZoom #ctaMenuZoom {
display: inline-block;
}
/* Cran « menu » : zoom et pagination quittent la ligne — panneau au-dessus du bouton,
calé à droite, ouvert au clic sur le bouton (.ouvert sur la zone), fermé au clic
ailleurs (AdaptationBarre.ts). */
#barrePilotage.barreMenuZoom #zoomVueKit {
display: none;
position: absolute;
right: 0;
bottom: 100%;
margin-bottom: var(--gapReduit);
padding: 6px 12px;
background: var(--cBlanc);
border-radius: var(--borderR2);
box-shadow: var(--ombrePortee2);
}
#barrePilotage.barreMenuZoom #zoneZoomVueKit.ouvert #zoomVueKit {
display: flex;
}
#paginationVueKit[data-pag-active="1"] {
display: flex;
gap: var(--gapReduit);
align-items: center;
}
/* Paires de zoom : une par zoom nommé de l'animation (data-zoom), DOM créé par le
Dimensionneur au premier kit abonné, retiré au changement de cue (une animation sans
zoom n'a aucun espace réservé). Une paire n'est jamais masquée en cours d'animation :
quand son zoom n'est pas affiché, ses deux boutons sont grisés (disabled) — le grisage
dit à l'opérateur quel zoom est utilisable, et rien ne bouge dans la barre. */
.divActionZoom {
display: flex;
gap: var(--gapReduit);
align-items: center;
}
.actionZoomMoins,
.actionZoomPlus,
/* même carré pour le bouton trois points (cran « menu », ci-dessus) */
#ctaMenuZoom,
/* même carré pour les boutons ± du groupe de réglage de la barre (_reglageScene.css) */
.reglageSceneGroupe .ctaEcranSecondaire {
width: 28px;
height: 28px;
border: 1px solid var(--cBlanc03);
border-radius: var(--borderR1);
background: var(--cBlanc);
color: var(--cNoir2);
font-size: 16px;
cursor: pointer;
}
.actionZoomMoins:disabled,
.actionZoomPlus:disabled {
opacity: 0.3;
cursor: default;
}
#paginationVueKit .pagBtn {
width: 28px;
height: 28px;
border: 1px solid var(--cBlanc03);
border-radius: var(--borderR1);
background: var(--cBlanc);
color: var(--cNoir2);
font-size: 16px;
opacity: 1;
padding: 0;
}
#paginationVueKit .pagBtn:disabled {
opacity: 0.3;
cursor: default;
}
#paginationVueKit .pagInfo {
font: var(--fLabel);
color: var(--cNoir3);
min-width: 32px;
text-align: center;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
}
/* ============================================
Bandeau session arrêtée
============================================ */
.bandeauSessionArretee {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--cRouge3);
color: var(--cBlanc);
font: var(--fH2);
text-transform: uppercase;
padding: 10px 20px;
text-align: center;
min-width: 50%;
z-index: 999901;
}
/* Une scène qui ne peut pas démarrer (contrat non respecté, source changée après coup) :
son message, à la place d'une exception silencieuse (MoteurEcran.afficherErreurScene). */
.bandeauErreurScene {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--cRouge3);
color: var(--cBlanc);
font: var(--fH2);
text-transform: uppercase;
padding: 10px 20px;
text-align: center;
min-width: 50%;
z-index: 999901;
}
/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_progressBar.css ***!
\**************************************************************************************************************************************/
/* ============================================
BARRE DE PROGRESSION — la frise des cues, cachée
============================================
Décision du chef de projet, 2026-09-03 : plus d'icône dans la barre de pilotage — pendant
une scène, la zone n'affichait que l'icône de la scène en cours, pour rien. La frise
reste dans la page (gabarit _progressBar.twig et ses jumeaux d'aperçu), mais cachée :
quatre lecteurs y prennent la liste des cues (reprise après coupure dans entreeEcran.js,
« Scène suivante : X » ci-dessous, cueSuivante et allerCue dans MoteurEcran.ts). Elle ne
se voit jamais. Les classes .passe / .actif / .futur, toujours posées par ProgressBar.ts,
ne dessinent plus rien.
============================================ */
#progressBar {
display: flex;
align-items: center;
gap: var(--gapDefaut);
/* Aucun air vertical : la frise est cachée, il ne reste que le bouton « Scène suivante : X »,
qui a la hauteur de tous les boutons de la barre — et la barre ne grandit pas. */
padding: 0;
}
#progressBarBande {
display: none;
}
/* ============================================
Bouton « Scène suivante : X » — géré par le système (ProgressBar.ts)
============================================ */
/* Un EMPLACEMENT de confirmation (.ctaEmplacement, _sceneBoutons.css), le même que « Terminer »
dans la barre de fin, dont il prend la place dès qu'une cue suit : ProgressBar.ts y écrit le
bouton de repos (.cta14.ctaEcranPrimaire — LA silhouette des boutons de la barre, même hauteur
garantie, barreActions.md) et le bouton « Êtes-vous sûr ? » (.ctaEcranConfirmation). Ici
seulement l'apparition en fondu ; l'isolation pendant la confirmation est celle de tout
emplacement armé (body.confirmationBarre, _sceneBoutons.css). */
#progressBarSuivant {
opacity: 0;
transition: opacity 0.3s ease;
white-space: nowrap;
}
#progressBarSuivant.visible {
opacity: 1;
}
/*!***********************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_barreFin.css ***!
\***********************************************************************************************************************************/
/* ============================================
BARRE DE FIN DE SCÈNE (#barreFinScene, BarreFin.ts)
============================================
Vit DANS la zone de progression (brique _zoneProgressBar.twig), mais HORS DE SON FLUX :
#barreFinScene est une boîte flottante (position absolue) ancrée à la suite de la zone,
posée PAR-DESSUS le reste de la barre de pilotage. Elle ne pousse rien : les boutons du
dessous — voilés et injouables — gardent leur place, et la barre ne passe jamais sur
deux lignes faute de largeur. Elle est transparente et hors d'atteinte au repos ; quand la
scène déclare une fin, BarreFin.ts déploie ses boutons dans #barreFinContenu et la boîte
paraît en fondu, portée par un court glissement — sans prendre la largeur à personne.
Prise de pouvoir sur la barre — états posés sur #barrePilotage par BarreFin.ts, simple
miroir de ce que la scène a déclaré :
- .barreFinAvecRetour : fin annulable (« Annuler » présent). Le reste de la barre passe
sous le voile — grisé, désaturé, mais PRÉSENT : rien n'est perdu. L'attribut inert
(posé par BarreFin.ts) rend ces zones injouables ; le CSS ne fait que le montrer.
- .barreFinSansRetour : fin sans retour. Les boutons du dessous se rangent
(visibility, jamais display : les emplacements restent réservés).
Fin sans retour et sans bouton déclaré : aucun état, rien ne bouge — la scène garde tous
ses boutons (Show*, paginations, « Annuler » des scènes de tirage). C'est le cas de toutes
les scènes sauf les quatre bingos : ces règles ne les concernent pas.
============================================ */
/* La boîte se pose à la suite de la zone de progression (left: 100%) et déborde par-dessus
le reste de la barre. Son air est pris sur celui de la barre (règle #barrePilotage,
_studioIntegree.css) : ses boutons sont à 8px du bord comme tous les autres, la boîte se
dessine 4px en dedans — d'où la marge négative de son air. Quand « Passer à : X » est
là, la zone est en flux avec son cadre (même air) : entre le cadre et la boîte, les
16px de tout voisin, mesurés de bouton à bouton.
width: max-content est OBLIGATOIRE, pas un confort : pour un élément hors flux, la largeur
automatique est un shrink-to-fit calculé sur l'espace restant dans le bloc conteneur, et
left: 100% ne laisse par définition AUCUN espace — la boîte se réduirait à son padding,
quel que soit le nombre de boutons. On demande donc la largeur du contenu, plafonnée par
max-width.
L'ouverture est une ANIMATION (keyframes), pas une transition, et c'est délibéré :
BarreFin.afficher() insère les boutons puis pose .visible dans le même tour de boucle,
sans reflow entre les deux. Une transition n'aurait alors aucun état de départ affiché
d'où partir — elle saute à l'arrivée (le symptôme « image de départ, image de fin »).
Une animation, elle, rejoue toujours ses keyframes depuis le début, quel que soit ce qui
a été rendu avant.
Elle ne bouge QUE opacity et transform — les deux seules propriétés que le compositeur
anime sans repeindre. Au moment de l'ouverture, la même frame porte déjà l'insertion des
boutons, le voile et le grayscale du reste de la barre : tout ce qui demanderait un
repaint par image (largeur, clip-path) y perd ses images intermédiaires. */
#barreFinScene {
position: absolute;
top: 50%;
left: 100%;
margin-left: calc(-1 * var(--gapReduit));
width: max-content;
/* Jamais plus large que ce qui reste d'écran à sa droite (le % se lit sur la zone de
progression, son bloc conteneur) : le contenu se coupe plutôt que de sortir. */
max-width: calc(100vw - 100% - 4 * var(--gapDefaut));
/* Le centrage vertical est porté par transform, donc rejoué par chaque keyframe. */
transform: translate(0, -50%);
opacity: 0;
visibility: hidden;
}
/* Fermeture : masquer() vide le contenu dans la foulée, il n'y a rien à faire disparaître
en fondu — la boîte s'efface d'un coup, et c'est honnête. */
#zoneProgressBar:has(#progressBarSuivant.visible) #barreFinScene {
margin-left: calc(16px - 2 * var(--gapReduit));
}
#barreFinScene.visible {
opacity: 1;
visibility: visible;
animation: barreFinOuverture 0.25s ease-out;
}
@keyframes barreFinOuverture {
from {
opacity: 0;
transform: translate(-10px, -50%);
}
to {
opacity: 1;
transform: translate(0, -50%);
}
}
/* Le contenu porte le fond de la boîte : hors flux, il ne profite plus de celui de la zone
de progression, et doit rester lisible au-dessus du voile. Même fond que la zone en fin :
les deux boîtes se lisent comme une seule barre qui a changé. */
#barreFinContenu {
display: flex;
align-items: center;
/* Même modèle que #divActionContextuelles (_sceneBoutons.css) : BarreFin.ts range ses
boutons en groupes .divActionScene — « Terminer », les rattrapages (annuler, ajouter),
le retour —, chacun séparé du suivant par le trait du groupe. Entre deux groupes, 16px
de part et d'autre du trait ; dans un groupe, le gap commun des boutons ; dans un
cadre de réglage, les cases serrées. Aucun autre écart (décision du chef de projet,
2026-09-02). */
gap: 16px;
min-width: 0;
overflow: hidden;
padding: var(--gapReduit); /* l'air de toute boîte dans la barre */
border-radius: var(--borderR2);
background: var(--cAccent1);
}
/* Boutons de la barre de pilotage remontés dans la barre de fin (BarreFin.ts,
rendreRemontes) : BoutonsActions.ts les range dans ses propres groupes .divActionScene.
Le conteneur s'efface pour que ces groupes soient des enfants directs du rail — même
gap, même trait, même :last-child sans trait — comme ceux que BarreFin écrit elle-même. */
#barreFinContenu .barreFinRemontes {
display: contents;
}
/* La zone de progression en fin : fond légèrement différent — le « tiens, j'ai changé
de barre » (transition et fond de repos dans _studioIntegree.css). */
#barrePilotage.barreFinAvecRetour #zoneProgressBar,
#barrePilotage.barreFinSansRetour #zoneProgressBar {
background: var(--cAccent1);
}
/* Le voile — le geste d'une popup qui assombrit l'écran, confiné à la barre. La zone de
progression passe au-dessus (z-index, _studioIntegree.css). Purement visuel
(pointer-events none) : c'est inert qui rend le dessous injouable. Deux usagers : la
barre de fin (ci-dessous) et la boîte de passage de l'aperçu (_preview.css), qui le lève
dans l'ombre de l'écran pour ne laisser éclairé que le bouton « Passer à : X ». */
#barrePilotage::before {
content: '';
position: absolute;
inset: 0;
background: var(--cOmbreForte);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1;
}
#barrePilotage.barreFinAvecRetour::before,
#barrePilotage.barreFinSansRetour::before {
opacity: 1;
}
#divActionContextuelles,
#zoneZoomVueKit {
transition: filter 0.2s ease, opacity 0.2s ease;
}
/* Fin annulable : le dessous reste sous les yeux, grisé et désaturé — « Annuler »
promet un retour, on montre que tout est encore là. */
#barrePilotage.barreFinAvecRetour #divActionContextuelles,
#barrePilotage.barreFinAvecRetour #zoneZoomVueKit {
filter: grayscale(1);
opacity: 0.5;
}
/* Fin sans retour : plus rien à faire dessous, les boutons se rangent. */
#barrePilotage.barreFinSansRetour #divActionContextuelles,
#barrePilotage.barreFinSansRetour #zoneZoomVueKit {
visibility: hidden;
}
/* Silhouette : .cta14 (31_cta.css), posée par BarreFin.ts — même padding, même police,
même rayon que les boutons de la barre de pilotage : hauteur identique garantie. Ici
uniquement le rôle : même style que .ctaEcranSecondaire (blanc, contour et texte noirs). */
.barreFinBouton {
border: var(--borderCta);
background: var(--cBlanc);
color: var(--cCtaTexte);
white-space: nowrap;
}
.barreFinBouton:disabled {
opacity: 0.4;
cursor: default;
}
/* Le bouton principal du contexte (« Lot suivant », « Terminer ») : CTA plein, mêmes couleurs que
.ctaEcranPrimaire — le chemin normal se voit du premier coup d'œil, les rattrapages
(annuler, ajouter du stock) restent en contour. Le bouton « Êtes-vous sûr ? » qui se pose
sur un bouton de fin armé est celui de tout emplacement (.ctaEcranConfirmation,
_sceneBoutons.css). */
/* Plein = aucun contour visible : transparent garde l'épaisseur, la hauteur ne bouge pas. */
.barreFinBouton.barreFinPrincipal {
background: var(--couleurCta, var(--cAccent3));
border-color: transparent;
color: var(--couleurCtaTexte, var(--cAccentt));
}
/* « Annuler » — bouton système, discret, toujours en dernier, dans son propre groupe.
Silhouette .cta14 (posée par BarreFin.ts), ici uniquement le rôle. */
.barreFinRetour {
border: var(--borderCta);
background: var(--cBlanc);
color: var(--cCtaTexte);
white-space: nowrap;
}
/* L'isolation d'un bouton de fin armé (seul lui reste visible) est celle de tout emplacement
de confirmation : body.confirmationBarre, _sceneBoutons.css. */
/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_zoneActions.css ***!
\**************************************************************************************************************************************/
/* ============================================
COMPTEURS PARTICIPANTS — bas gauche de l'écran
Empilés verticalement, icône à gauche, compteur à droite aligné
============================================ */
#compteursParticipants {
display: flex;
flex-direction: column;
gap: var(--gapReduit);
padding: 6px 12px;
background: var(--cBlancOverlay);
border-radius: var(--borderR1);
}
.compteurSource,
#compteurTotalFormulaire {
display: flex;
align-items: center;
gap: var(--gapDefaut);
}
/* Le total des inscriptions en direct, sous les compteurs des formulaires. */
#compteurTotalFormulaire {
padding-top: var(--gapReduit);
border-top: var(--border);
}
#compteurTotalFormulaire .compteurLibelle {
font: var(--fLabel);
color: var(--cNoir4);
}
.compteurSource img {
width: 20px;
height: 20px;
opacity: 0.7;
}
.compteurSource .compteurNombre,
#compteurTotalFormulaire .compteurNombre {
font: var(--fLabel);
color: var(--cNoir2);
min-width: 3ch;
text-align: right;
}
/* « / 500 » : la limite de l'offre, en retrait du total. */
#compteurTotalFormulaire .compteurLimite {
font: var(--fLabel);
color: var(--cNoir4);
}
/* Dès 90 % de la limite, et au-delà : l'organisateur est prévenu (ParticipantService::etatLimiteInscriptionsFormulaire). */
.compteurAlerte .compteurNombre {
color: var(--cOr4);
}
.compteurOffert .compteurNombre {
color: var(--cRouge3);
}
.compteurPlacesOffertes {
display: none;
font: var(--fLabel);
color: var(--cRouge3);
}
.compteurOffert .compteurPlacesOffertes {
display: inline;
}
/*!***************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_sceneBoutons.css ***!
\***************************************************************************************************************************************/
/* ============================================
Boutons d'animation + zone d'animation
============================================ */
/* Zone d'animation dans #zoneAffichage */
#zoneScene {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Boutons de la barre d'actions de l'écran (BoutonsActions.ts) :
silhouette commune .cta14 (31_cta.css) — ici uniquement les couleurs par rôle.
bouton / secondaire / info = LE bouton neutre commun : fond blanc, LA bordure,
LE noir (décision PO 2026-07-18 : un bouton ne choisit ni son padding, ni sa
bordure, ni sa couleur — variables --paddingCta14 / --borderCta / --cCtaTexte). */
.ctaEcranBouton,
.ctaEcranSecondaire,
.ctaEcranInfo {
background: var(--cBlanc);
border: var(--borderCta);
color: var(--cCtaTexte);
}
/* Plein = aucun contour visible, mais LA bordure est là, transparente : elle garde son
épaisseur, et un bouton plein fait exactement la hauteur d'un bouton à contour (34 contre
36 px avant — défaut vu par le chef de projet, 2026-09-16). Même parti que
.barreFinPrincipal (_barreFin.css). */
.ctaEcranPrimaire,
.ctaEcranDanger {
border: var(--borderCta);
border-color: transparent;
}
.ctaEcranPrimaire {
background: var(--couleurCta, var(--cAccent3));
color: var(--couleurCtaTexte, var(--cAccentt));
}
.ctaEcranDanger {
background: var(--cRouge3);
color: var(--cBlanc);
}
/* Emplacement partagé par deux boutons qui s'excluent (Annuler / Êtes-vous sûr ?) :
une seule cellule, jamais côte à côte. Au repos, le bouton de confirmation est hors du
flux (display, posé par BoutonsActions ou EmplacementConfirmation.ts) et l'emplacement
suit le bouton de repos. Armé, les deux sont dans la cellule, à la même taille — le bouton
de repos tient la place, la confirmation se pose dessus — et la bulle de confirmation
(_bulleConfirmation.css) se pose sur eux depuis le body. Jamais de place vide à côté. */
.ctaEmplacement {
display: grid;
}
.ctaEmplacement > * {
grid-area: 1 / 1;
}
/* Le bouton « Êtes-vous sûr ? » d'un emplacement système (EmplacementConfirmation.ts :
« Terminer », « Scène suivante : X », les gestes de fin d'une scène) : noir pour un passage,
rouge pour un geste dangereux (`danger`). Un seul rendu, quelle que soit la barre. */
.ctaEcranConfirmation {
border: var(--borderCta);
border-color: var(--cNoir);
background: var(--cNoir);
color: var(--cBlanc);
white-space: nowrap;
}
.ctaEcranConfirmation.danger {
border-color: var(--cRouge3);
background: var(--cRouge3);
}
/* Isolation pendant la confirmation (body.confirmationBarre, posé par EmplacementConfirmation.ts
tant qu'un emplacement est armé — un seul à la fois, toutes barres confondues) : le dessous
de la barre s'efface, et dans la zone de progression seul l'emplacement armé reste — lui,
ce qu'il contient, et ce qui le contient (son groupe, son cadre, la boîte de fin). Tout le
reste (« Scène suivante » si c'est un bouton de fin, la boîte de fin entière si c'est
« Scène suivante », les autres groupes et leur trait, le retour) disparaît. visibility,
jamais display : les emplacements restent réservés, la barre ne se recompose pas à
l'entrée/sortie de l'étape de confirmation.
Exception : les cases du cadre de réglage où vit l'emplacement armé ([−] n [+] à côté
d'« Ajouter des tirages ») restent visibles. Elles disent CE QUE l'on confirme : cacher le
nombre au moment de dire « oui » surprend (décision du chef de projet, 2026-10-01). */
body.confirmationBarre #divActionContextuelles,
body.confirmationBarre #zoneZoomVueKit,
body.confirmationBarre #zoneProgressBar :not(.ctaEmplacementArme, .ctaEmplacementArme *, :has(.ctaEmplacementArme), .reglageSceneGroupe:has(.ctaEmplacementArme) *) {
visibility: hidden;
}
/* L'emplacement ne porte aucune marge : dans un groupe, l'écart entre deux boutons est
TOUJOURS le gap du groupe (décision du chef de projet, 2026-09-02). Ce qui doit se lire
à part passe par un séparateur (trait) ou par un cadre (.reglageSceneGroupe,
.toggleSceneGroupe), jamais par une marge posée sur un bouton. */
/* Ancien design des boutons d'animation — encore utilisé par la télécommande (#tcActions),
les stations tournoi (StationTournoi.ts, animations Trn*) et le kit pur saisie
(Formulaire.ts). À migrer vers .cta14 dans un lot ultérieur (décision PO 2026-07-18 :
strictement les 4 barres pour ce lot). */
.btnScene {
padding: 6px 16px;
border: var(--borderCta);
border-radius: var(--borderR1);
background: var(--cBlanc);
font: var(--fMenu14);
color: var(--cCtaTexte);
cursor: pointer;
white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btnScene:disabled {
opacity: 0.4;
cursor: auto;
}
.btnScenePrimaire {
background: var(--couleurCta, var(--cAccent3));
border-color: var(--couleurCta, var(--cAccent3));
color: var(--couleurCtaTexte, var(--cAccentt));
}
/* Le fond suit le thème et non un blanc en dur : sur un thème sombre, la couleur d'action
est claire, et un bouton blanc lui donnerait 3,1:1 — sous le seuil AA. */
.btnSceneSecondaire {
background: var(--couleurFond, var(--cBlanc));
border-color: var(--couleurCta, var(--cAccent3));
color: var(--couleurCta, var(--cAccent3));
}
.btnSceneDanger {
background: var(--cRouge3);
border-color: var(--cRouge3);
color: var(--cBlanc);
}
.btnSceneInfo {
background: var(--cBlanc);
border-color: var(--cAccent3);
color: var(--cAccent3);
}
/* Un libellé ne se plie JAMAIS dans son bouton : faute de largeur, c'est la barre qui se
plie, par crans. AdaptationBarre.ts mesure un débordement — un texte replié sur deux
lignes n'en fait aucun, et aucun cran ne se déclencherait. */
#barrePilotage .cta14,
#barrePilotage .toggleSceneBtn {
white-space: nowrap;
}
/* Conteneur des groupes — horizontal, sur une ligne : c'est ce débordement que mesure
AdaptationBarre.ts pour poser ses crans. Le retour à la ligne est le dernier d'entre eux. */
#divActionContextuelles {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 16px; /* symétrique du padding-right des groupes : la bordure respire des deux côtés */
}
/* Cran « deux lignes » : les groupes passent à la ligne. Entre deux lignes, l'écart moyen —
de quoi loger le titre d'un cadre (.toggleSceneTitre, hors flux au-dessus de son
groupe) sans le trou des 16px prévus pour la largeur. */
#barrePilotage.barreDeuxLignes #divActionContextuelles {
flex-wrap: wrap;
row-gap: var(--gapMoyen);
}
/* Groupes de boutons (séparés par bordure droite) */
.divActionScene {
display: flex;
align-items: center;
gap: var(--gapDefaut);
padding-right: 16px;
/* LE trait : le même dans la barre de pilotage et la barre d'aperçu, et de ce gris-là —
le clair d'avant ne se voyait pas (décision du chef de projet, 2026-09-16). */
border-right: 1px solid var(--cNoir4);
}
.divActionScene:last-child {
padding-right: 0;
border-right: none;
}
/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_toggleScene.css ***!
\**************************************************************************************************************************************/
/* ============================================
Toggle animation (choix exclusif)
============================================ */
.toggleSceneGroupe {
display: flex;
position: relative;
/* Les plans internes du toggle (indicateur 0, boutons 1) restent confinés au groupe :
sans cela, les boutons montaient dans l'échelle de la barre de pilotage et passaient
au-dessus de son voile (#barrePilotage::before, z 1 — _barreFin.css). */
isolation: isolate;
background: var(--cBlanc03);
border-radius: var(--borderR1);
}
/* Hors flux : le titre ne réserve aucune hauteur, il ne doit pas gêner la lecture de la barre */
.toggleSceneTitre {
position: absolute;
top: 2px;
left: 3px;
transform: translateY(-100%);
font: var(--fMini11);
color: var(--cNoir4);
white-space: nowrap;
pointer-events: none;
}
.toggleSceneIndicateur {
position: absolute;
top: 0;
bottom: 0;
background: var(--cBlanc1);
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
border: 1px solid var(--cNoir1);
pointer-events: none;
}
.toggleSceneBtn {
position: relative;
z-index: 1;
padding: var(--paddingCta14); /* même hauteur que les cta de la barre d'actions */
border: none;
font: var(--fMenu14);
cursor: pointer;
background: transparent;
color: var(--cNoir3);
border-radius: var(--borderR1);
}
.toggleSceneBtn:hover:not(.selectionne):not(:disabled) {
color: var(--cNoir1);
}
.toggleSceneBtn.selectionne {
color: var(--cNoir1);
cursor: default;
}
.toggleSceneBtn:disabled {
opacity: 0.4;
cursor: auto;
}
/* Groupe qui n'offre plus de choix (au plus un bouton actif, ou figé par verrouillerChoix) */
.toggleSceneGroupe.sansChoix .toggleSceneBtn,
.toggleSceneGroupe.sansChoix .toggleSceneIndicateur {
opacity: 0.4;
}
.toggleSceneGroupe.sansChoix .toggleSceneBtn {
cursor: auto;
pointer-events: none;
}
/*!***************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_reglageScene.css ***!
\***************************************************************************************************************************************/
/* ============================================
Groupe de réglage ([−][−][valeur][+][+])
============================================ */
/* Cadre : même fond que les groupes de toggles — c'est lui qui fait lire les cinq cases
comme UN groupe, détaché de ses voisins (loi de proximité). Ancre du titre absolu
(.toggleSceneTitre, hors flux — même principe que les toggles). */
.reglageSceneGroupe {
display: flex;
position: relative;
align-items: center;
gap: var(--gapReduit);
padding: 2px var(--gapReduit);
background: var(--cBlanc03);
border-radius: var(--borderR1);
}
/* Boutons ± : carrés — la recette des boutons de zoom (sélecteur élargi dans
_studioIntegree.css). On neutralise le padding de la silhouette .cta14, sinon le
carré 28×28 n'a plus de place pour son glyphe. */
.reglageSceneGroupe .ctaEcranSecondaire {
padding: 0;
}
/* La case de la valeur : PAS un bouton — aucun entourage, la valeur nue posée sur le
fond du groupe. Plus large que les carrés, jamais carrée. L'unité vit dans le titre.
Chiffres de même chasse et largeur de quatre chiffres (3600 est le plafond du délai) :
la valeur change à chaque appui, la case ne doit jamais bouger ni pousser ses voisins. */
.reglageSceneGroupe .ctaEcranInfo {
background: transparent;
border: none;
padding: 0;
min-width: 4ch;
text-align: center;
font-variant-numeric: tabular-nums;
}
.reglageSceneGroupe .ctaEcranInfo:disabled {
opacity: 1;
cursor: default;
}
/*!********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_bulleConfirmation.css ***!
\********************************************************************************************************************************************/
/* ============================================
BULLE DE CONFIRMATION (BulleConfirmation.ts)
Le geste « Êtes-vous sûr ? » des barres du bas — décision du chef de projet,
2026-09-02, sur maquette. Tout est LINÉAIRE : aucune accélération.
============================================
L'emplacement (.ctaEmplacement, _sceneBoutons.css) est une cellule de grille où le bouton
de repos et le bouton de confirmation se superposent, à la même taille. La bulle, elle,
vit dans le BODY, en position fixe, dans son propre plan du chrome (échelle de
salleEcran.css) : dans la barre, elle resterait sous la barre de l'aperçu. Elle est
posée sur le bouton par ses coordonnées (BulleConfirmation.ts) et ne coûte pas un pixel
de largeur ni de hauteur à la barre. La barre étant en bas de l'écran, la bulle s'ouvre
vers le haut, par-dessus la scène — la largeur manque toujours dans ces barres, la
hauteur non. */
/* Le bouton de repos, armé : il ne fait plus que tenir sa place et sa largeur dans la
barre, sous le verre. Son texte s'efface — le libellé est monté dans la bulle. */
.ctaEmplacement > .ctaRepos {
color: transparent;
pointer-events: none;
}
/* Le bouton de confirmation : même cellule, donc exactement l'empreinte du bouton de repos.
Il apparaît après l'ouverture de la bulle (0,1 s), en 0,1 s. Il est sous la souris dès
l'armement (la main ne redevient pas une flèche) ; le clic trop tôt est ignoré par le
script (anti-double-clic), pas par le CSS. */
.ctaEmplacement > .ctaConfirmation {
z-index: 2;
animation: bulleConfirmationApparition .1s linear .1s both;
}
@keyframes bulleConfirmationApparition {
from { opacity: 0; }
to { opacity: 1; }
}
/* Le double en verre du bouton. Naît EXACTEMENT sur lui (coordonnées posées par le script),
puis s'ouvre (.etendue : nouvelles coordonnées, mêmes transitions). --h : la hauteur du
bouton, posée par le script. */
.bulleConfirmation {
--bulleFond: rgba(255, 255, 255, .65);
--bulleFlou: 2px;
--cConfirmation: var(--cNoir); /* passage (Terminer) : noir */
position: fixed;
z-index: 999925; /* au-dessus de la barre de l'aperçu (999922) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 0;
font: var(--fMenu14);
color: var(--cNoir1);
white-space: nowrap;
border-radius: var(--borderR1);
background: var(--bulleFond);
-webkit-backdrop-filter: blur(var(--bulleFlou)) saturate(1.4);
backdrop-filter: blur(var(--bulleFlou)) saturate(1.4);
border: 1px solid var(--cOmbre);
box-shadow: var(--ombrePortee);
pointer-events: none;
transition: top .1s linear, left .1s linear, width .1s linear, height .1s linear,
padding .1s linear;
}
.bulleConfirmation.danger {
--cConfirmation: var(--cRouge3); /* geste dangereux (annuler, ajouter) : rouge */
}
/* La ligne du libellé : la hauteur du bouton, le texte centré dedans. Au départ elle remplit
la bulle ; à l'arrivée elle est en haut. */
.bulleConfirmationLibelle {
height: var(--h);
display: flex;
align-items: center;
}
/* Ouverte : 5px de tour en bas et sur les côtés. De bas en haut : le bouton, 2px, la mèche
(2px), 5px, la ligne du libellé, 5px. À l'endroit du bouton, la bulle est DÉCOUPÉE : le
bouton de confirmation, resté dans la barre (un plan plus bas), se voit net à travers le
trou. Le masque : toute la bulle, moins le rectangle du bouton (5px des bords, 5px du
bas, haut de --h). */
.bulleConfirmation.etendue {
padding-top: 5px;
-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
-webkit-mask-size: 100% 100%, calc(100% - 10px) var(--h);
-webkit-mask-position: 0 0, 5px calc(100% - 5px);
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
mask-size: 100% 100%, calc(100% - 10px) var(--h);
mask-position: 0 0, 5px calc(100% - 5px);
mask-repeat: no-repeat;
mask-composite: exclude;
}
/* La mèche : juste au-dessus du bouton, à 2px, d'un bord à l'autre, de la couleur de la
confirmation. Elle se consume de droite à gauche, linéaire, le temps du délai
d'armement moins l'ouverture (--dureeMeche, posée par le script). */
.bulleConfirmation::before {
content: '';
position: absolute;
bottom: calc(var(--h) + 7px);
left: 5px; right: 5px;
height: 2px;
border-radius: 1px;
background: var(--cConfirmation);
transform-origin: left center;
transform: scaleX(1);
opacity: 0;
}
.bulleConfirmation.etendue::before {
opacity: 1;
animation: bulleConfirmationMeche var(--dureeMeche) linear .2s forwards;
}
@keyframes bulleConfirmationMeche {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/*!****************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/composants/boutonFermeture.css ***!
\****************************************************************************************************************************************/
/* ============================================
BOUTON DE FERMETURE (.modaleClose) — source unique (docs/designSystem/boutonFermeture.md)
La croix est dessinée par ::before (mask SVG ci-dessous) : en HTML le bouton reste VIDE —
ne JAMAIS y mettre × / × / texte. Réutilisable : VIDE = croix centrée ; avec un
enfant .modaleCloseTexte = la même boîte s'élargit et un libellé s'ajoute à GAUCHE de la
croix (ex. « Prendre la main ✕ »). Pas de padding horizontal : la croix a déjà ~6px de
marge interne à droite (mask 6→18 sur viewBox 24), c'est .modaleCloseTexte qui redonne
le même air à gauche → équilibré.
Ici la silhouette GÉNÉRALE (boîte souple, croix 20px — barre d'aperçu écran). Les
contextes n'écrivent que leurs écarts, APRÈS leur @import de ce fichier :
- modales Studio (56_scenario/_modale.css) : boîte fixe 44×44, croix 24 ;
- surcouche aperçu (composants/surcouchePreview.css) : idem + masque « plein écran ».
============================================ */
.modaleClose {
display: flex;
align-items: center;
justify-content: center;
min-width: 25px;
padding: var(--gapDefaut) var(--gapReduit); /* vertical aligné sur .cta14 (même rythme dans la barre aperçu) */
gap: var(--gapDefaut);
border: none;
border-radius: var(--borderR1);
background: transparent;
cursor: pointer;
transition: background 0.2s;
}
.modaleClose::before {
content: '';
order: 1; /* croix à droite d'un éventuel .modaleCloseTexte (seule = centrée, inchangé) */
width: 20px;
height: 20px;
background-color: var(--cNoir1);
mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%2718%27 y1=%276%27 x2=%276%27 y2=%2718%27/%3E%3Cline x1=%276%27 y1=%276%27 x2=%2718%27 y2=%2718%27/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%2718%27 y1=%276%27 x2=%276%27 y2=%2718%27/%3E%3Cline x1=%276%27 y1=%276%27 x2=%2718%27 y2=%2718%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.modaleClose:hover {
background: var(--cBlanc02);
}
/* Libellé optionnel à gauche de la croix (cf. en-tête). Le padding gauche donne au texte
le même air (~6px) que la marge interne de la croix à droite → visuellement équilibré. */
.modaleCloseTexte {
padding-left: var(--gapReduit);
font: var(--fMenu14);
color: var(--cNoir1); /* même teinte que la croix */
}
/*!******************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/composants/jaime.css ***!
\******************************************************************************************************************************/
/* ============================================
LE CŒUR « J'AIME » ET SON COMPTEUR — brique noyau _jaime.twig, Vitrine comme Studio
(décision chef de projet 2026-09-12)
Quatre états, façon X, tous ici et nulle part ailleurs :
1. éteint — contour gris, chiffre gris ;
2. survol (actif) — cœur et chiffre en rouge, un disque pâle derrière le cœur ;
3. allumé — cœur PLEIN, rouge, un peu plus grand — un peu seulement, ça se
joue à très peu (chef de projet) ;
4. allumé au survol — le même, avec le disque pâle.
Plus l'inactif (`disabled`) : le visiteur non connecté voit le cœur et le nombre, il ne
peut pas y toucher. Ni survol, ni curseur, et À MOITIÉ ESTOMPÉ (décision chef de projet
2026-09-16, qui défait le « pas grisé » du 2026-09-12) : un cœur plein et net se lit comme
une commande, et le visiteur déconnecté cliquait dessus sans comprendre pourquoi rien ne
se passait.
Le rouge est celui du cœur (--cCoeur3, --cCoeur0 pour le survol, 10_font.css) : un rouge
sang, bordeaux foncé, à lui — le rouge de la famille --cRouge dit l'alerte et le danger,
pas l'affection (décision chef de projet 2026-09-16, qui remplace le --cRouge3 du 12).
Aucune couleur en dur (docs/designSystem/couleurs.md).
Le bouton ne pose ni bordure ni fond : c'est une icône et un chiffre posés à même la page,
comme le lien « En savoir plus » d'une tuile (.lienScenePlus). Padding : --gapReduit, la
même variable que ce lien — une valeur nommée, jamais un chiffre (assets/vitrine/css/CLAUDE.md).
============================================ */
.toggleJaime {
display: inline-flex;
align-items: center;
gap: var(--gapReduit);
padding: var(--gapReduit) 0;
border: none;
background: none;
font: var(--fMenu14);
color: var(--cNoir3);
cursor: pointer;
user-select: none;
/* `opacity` : le passage de 25 % à 50 % ou à 100 %, quand la réponse de fin de page
arrive, se fait en fondu et non d'un coup — le cœur ne clignote plus (décision chef de
projet 2026-09-16). `color` : le survol, comme avant. */
transition: color 0.2s, opacity 0.4s;
}
/* Le disque pâle du survol est un pseudo-élément derrière le cœur : le cœur reste à sa
place, seul le fond apparaît. `isolation` + `z-index` pour qu'il passe DERRIÈRE le tracé
du cœur sans sortir du bouton. */
.toggleJaimeCoeur {
position: relative;
isolation: isolate;
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round;
overflow: visible;
transition: transform 0.2s, fill 0.2s, stroke 0.2s;
}
.toggleJaimeCoeur::before {
content: '';
position: absolute;
z-index: -1;
inset: -8px;
border-radius: 50%;
background: var(--cCoeur0);
opacity: 0;
transition: opacity 0.2s;
}
/* Le chiffre ne réserve aucune largeur : à zéro il est vide, le cœur est seul. */
.toggleJaimeNombre {
font-variant-numeric: tabular-nums;
}
/* 2 — survol, bouton ACTIF seulement */
.toggleJaime:not(:disabled):hover {
color: var(--cCoeur3);
}
.toggleJaime:not(:disabled):hover .toggleJaimeCoeur::before {
opacity: 1;
}
/* 3 — allumé : cœur plein, à peine plus grand */
.toggleJaime[aria-pressed="true"] {
color: var(--cCoeur3);
}
.toggleJaime[aria-pressed="true"] .toggleJaimeCoeur {
fill: currentColor;
transform: scale(1.08);
}
/* Le petit rebond quand on clique : le cœur grossit puis revient. Posé par le JavaScript
au moment du geste, retiré à la fin de l'animation — jamais au chargement, sinon trente
cœurs rebondiraient en chœur à l'ouverture de la page. */
.toggleJaimeAnime .toggleJaimeCoeur {
animation: toggleJaimeRebond 0.35s ease-out;
}
@keyframes toggleJaimeRebond {
0% { transform: scale(1); }
40% { transform: scale(1.35); }
100% { transform: scale(1.08); }
}
/* Inactif : pas de survol, pas de curseur, et ESTOMPÉ À 50 % (décision chef de projet
2026-09-16). Le visiteur doit VOIR qu'il ne peut pas cliquer : sans l'estompe, un cœur
inactif ressemblait trait pour trait à un cœur actif au repos.
Le 2026-09-12 avait tranché l'inverse (« pas grisé, c'est une information ») : le chiffre
reste lisible à 50 %, l'information est toujours là.
Sur le Studio, l'utilisateur est toujours connecté : cet état n'y apparaît pas. */
.toggleJaime:disabled {
cursor: default;
opacity: 0.5;
}
/* EN ATTENTE : 25 % (décision chef de projet 2026-09-16). Le cœur tel que le serveur
l'écrit, avant que la requête de fin de page ait répondu. Le JavaScript retire la classe
dès la réponse : le cœur passe alors à 50 % (déconnecté, `disabled` ci-dessus) ou à 100 %
(connecté). Trois paliers, pour qu'aucun ne se confonde avec un autre.
⚠️ Même poids que `.toggleJaime:disabled` (une classe + une classe, une classe + une
pseudo-classe) : c'est l'ORDRE qui tranche. Cette règle doit rester APRÈS celle-là. */
.toggleJaime.toggleJaimeAttente {
opacity: 0.25;
}
/* Le même halo de focus que les liens et boutons du site (31_cta.css). */
.toggleJaime:focus {
outline: none;
}
.toggleJaime:focus-visible {
box-shadow: 0 0 0 3px var(--cFormFocus);
border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
.toggleJaime,
.toggleJaimeCoeur,
.toggleJaimeCoeur::before {
transition: none;
}
.toggleJaimeAnime .toggleJaimeCoeur {
animation: none;
}
}
/*!***************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/composants/etiquetteJaime.css ***!
\***************************************************************************************************************************************/
/* ============================================
L'ÉTIQUETTE ET SON CŒUR « J'AIME » — brique noyau _etiquetteJaime.twig
(décision chef de projet 2026-09-16)
Une boîte, deux pièces, une largeur qui ne change JAMAIS. C'est tout le travail de ce
fichier : rendre le bloc immobile, pour qu'on puisse le poser n'importe où sur la Vitrine
sans qu'il bouge au clic.
CE FICHIER NE PLACE RIEN. Pas de marge, pas d'alignement, pas de largeur imposée : la
brique dit comment le bloc est construit, la page qui l'accueille dit où il se pose.
C'est ce partage qui la rend placardable partout.
⚠️ Il ne touche pas à composants/jaime.css : le cœur garde sa seule et unique source. Tout
ce qui est écrit ici est porté par `.etiquetteJaime`, donc n'atteint QUE ce bloc — les
sept autres endroits où le cœur vit sont inchangés.
============================================ */
/* `inline-flex` : la boîte prend exactement la largeur de son contenu, ni plus ni moins.
C'est ce qui permet à l'appelant de la centrer (align-self, text-align, justify-content…)
sans qu'elle s'étire à toute la colonne.
--gapLarge (20px) : à 8px (--gapDefaut) puis à 12px (--gapMoyen), le mot et le cœur se
lisaient comme un seul bloc serré (décision chef de projet 2026-09-16). Une valeur nommée,
jamais un chiffre (assets/vitrine/css/CLAUDE.md). */
.etiquetteJaime {
display: inline-flex;
align-items: center;
gap: var(--gapLarge);
}
/* L'ÉTIQUETTE EN CHASSE FIXE (décision chef de projet 2026-09-16). C'est le nom du dossier
de la scène — `RafflePluck` —, pas une phrase : du PascalCase que personne ne traduit. Le
mono dit « ceci est un identifiant » sans qu'on ait à l'écrire.
C'est le geste que le Studio fait déjà sur les étiquettes de l'organisateur (.etiquetteMono,
studio/56_scenario/_etiquettes.css, décision PO 2026-06-10) — là-bas la chasse fixe
distingue le mot de l'utilisateur des libellés du système ; ici elle distingue
l'identifiant du texte rédigé. Même outil, intention voisine.
--fMono16 et pas --fMono24b : le mono d'un LIBELLÉ, pas celui d'un gros chiffre. La
variable dormait, commentée « inutilisé » depuis le 2026-06-13 ; elle est remise en
service pour ce bloc (10_font.css), aucune valeur nouvelle n'entre dans le système.
Sur la page d'une scène, l'étiquette était jusqu'ici au corps d'un H2 : 24px gras, plus
lourde que le vrai titre de la page juste au-dessus. */
.etiquetteJaimeTexte {
font: var(--fMono16);
color: var(--cNoir2);
}
/* LA CASE DU CHIFFRE — le cœur de l'affaire (décision chef de projet 2026-09-16).
Dans sa brique, le compteur « ne réserve aucune largeur » : à zéro il est vide, le cœur est
seul. C'est juste là où le cœur finit la ligne. Ça ne l'est plus dès qu'il a un voisin : le
premier « J'aime » élargissait le bouton, et tout ce qui l'entourait glissait.
Ici le chiffre a sa case, et il ne la quitte pas. Deux caractères — de 0 à 99, la case
suffit ; au-delà elle s'élargit, et c'est assumé.
`ch` : la largeur d'un chiffre dans la fonte du bouton. Ce n'est pas une mesure inventée en
pixels, c'est la case que le texte occupe — et `font-variant-numeric: tabular-nums`, déjà
posé sur ce span, garantit que tous les chiffres ont la même.
Porté par `.etiquetteJaime` : les cœurs des autres pages ne réservent toujours rien. */
.etiquetteJaime .toggleJaimeNombre {
min-width: 2ch;
}
/*!**********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/kitPur/preview/pointeurPreview.css ***!
\**********************************************************************************************************************************************/
/* Le pointeur fictif des aperçus (PointeurPreview.ts) : tout ce que la flèche de la souris
(.curseurPreview) et le doigt du téléphone (.doigtParcours) ont en commun — le trait, le
glissement qui grossit, le recul du clic, le rond du clic.
Une variante ne déclare que sa position, et sa pointe dans le dessin de 48 px :
--pointeurPointeX, --pointeurPointeY.
--pointeurEchelle, posée sur le conteneur quand il est lui-même réduit (le cadre du
téléphone) : le pointeur et son rond grossissent d'autant, pour garder à l'écran la taille et
l'épaisseur de trait de la flèche. */
.pointeurPreview {
pointer-events: none;
/* La pointe est posée sur le point visé, et tout grossissement ou recul part d'elle : elle ne
quitte jamais ce point. */
margin: calc(-1 * var(--pointeurPointeY)) 0 0 calc(-1 * var(--pointeurPointeX));
transform-origin: var(--pointeurPointeX) var(--pointeurPointeY);
transform: scale(var(--pointeurEchelle, 1));
transition: left 0.5s ease-out, top 0.5s ease-out, transform 0.2s ease-out, opacity 0.2s;
filter: drop-shadow(2px 2px 2px var(--cOmbreForte)) drop-shadow(2px 2px 2px var(--cOmbreForte));
}
.pointeurPreview svg {
display: block;
width: 48px;
height: 48px;
}
/* Blanc cerné de noir : un contour blanc disparaît sur les boutons blancs, le noir tranche sur
tous. */
.pointeurPreview path {
fill: var(--cBlanc);
stroke: var(--cNoir);
stroke-width: 1.5;
stroke-linejoin: round;
}
/* Grossi pendant le glissement : on voit le pointeur partir et où il va. Il reprend sa taille à
l'arrivée, pour ne rien cacher au moment du clic. */
.pointeurPreviewDeplacement {
transform: scale(calc(var(--pointeurEchelle, 1) * 1.6));
}
/* La transition redonne left/top : sans eux, un déplacement lancé pendant le recul sauterait. */
.pointeurPreviewClic {
transform: scale(calc(var(--pointeurEchelle, 1) * 0.75));
transition: left 0.5s ease-out, top 0.5s ease-out, transform 0.1s ease-in, opacity 0.2s;
}
/* Le rond du clic (PointeurPreview.appuyerSur). Il s'OUVRE par animation (transform) et
s'EFFACE par transition (opacity), à part : l'extinction rapide reprend l'opacité là où
elle en est, sans saut — une animation relancée repartirait de zéro. */
.pointeurPreviewFlash {
pointer-events: none;
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
border-radius: 50%;
/* Le même rond pour la souris et le doigt (décision chef de projet, 2026-10-06) : un disque
sombre translucide cerclé de blanc se voit sur une page claire comme sur un fond foncé,
aucune variante n'a à le recolorer. */
background: var(--cOmbreForte);
border: 3px solid var(--cBlanc);
opacity: 1;
transition: opacity 0.45s ease-out 0.15s;
animation: pointeurPreviewFlashAnim 0.6s ease-out forwards;
}
/* Posée à la frame suivant la naissance du rond : l'effacement normal, sur la durée de l'ouverture. */
.pointeurPreviewFlashFondu {
opacity: 0;
}
/* La cible a disparu sous le clic (bouton rangé, changement de cue) : le rond s'éteint tout
de suite plutôt que de finir de s'ouvrir sur du vide. */
.pointeurPreviewFlashEteint {
transition-duration: 0.15s;
transition-delay: 0s;
}
@keyframes pointeurPreviewFlashAnim {
0% { transform: scale(0); }
100% { transform: scale(calc(var(--pointeurEchelle, 1) * 2.5)); }
}
/*!****************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/previewParticipant/css/doigtParcours.css ***!
\****************************************************************************************************************************************************/
/* Le doigt des aperçus (DoigtParcours.ts) : celui de l'aperçu participant, et celui du
téléphone posé à côté du grand écran de l'aperçu (TelephoneApercu.ts, entrée salleEcran).
Une variante du pointeur commun (kitPur/preview/pointeurPreview.css), que l'hôte importe
avant cette feuille : le trait, le glissement et le clic sont ceux de la flèche de souris. */
/* Dans l'écran du cadre, par-dessus l'iframe. Le bout de l'index est à (11,25 ; 2) de la grille
de 28, soit (19,29 ; 3,43) px dans le dessin de 48 px. */
.doigtParcours {
position: absolute;
left: 50%;
top: 70%;
z-index: 2;
opacity: 0;
--pointeurPointeX: 19.29px;
--pointeurPointeY: 3.43px;
}
.doigtParcoursVisible {
opacity: 1;
}
/* Le rond du clic est celui du pointeur commun, même couleur que pour la souris : seule sa place
dans le cadre est à lui. */
.doigtParcoursFlash {
position: absolute;
z-index: 1;
}
/*!**********************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_preview.css ***!
\**********************************************************************************************************************************/
/* ============================================
Aperçu — Overlay, curseur, bouton prise en main
============================================ */
/* Bouton de fermeture (.modaleClose + .modaleCloseTexte) : source unique du composant —
la barre d'aperçu utilise sa silhouette générale telle quelle, aucun écart ici. */
/* POC (chef de projet, 2026-09-16) : l'étiquette et le cœur « J'aime » du site, reflétés dans
la barre de l'aperçu quand elle joue dans la fenêtre du site (MoteurPreview.dessinerGestesSite). */
/* Le pointeur fictif : ce que la flèche de souris (plus bas, « Curseur ») et le doigt ont en commun. */
/* Le doigt de l'aperçu participant, qui touche aussi le téléphone posé à côté de la scène (TelephoneApercu.ts). */
/* Overlay assombrissant brièvement au démarrage puis s'estompe — relancé au clic
sur une zone non cliquable pour guider l'utilisateur vers la barre de contrôle. */
#previewOverlay {
position: fixed;
inset: 0;
z-index: 999921;
background: var(--cOverlay);
animation: previewOverlayFade 2s ease-out forwards;
}
@keyframes previewOverlayFade {
0% { opacity: 1; }
60% { opacity: 1; }
100% { opacity: 0; }
}
/* Barre de contrôle de l'aperçu — fixée, indépendante du stacking de #barrePilotage.
Le `bottom` est appliqué dynamiquement en JS selon la hauteur de #barrePilotage. */
#divActionPreview {
position: fixed;
left: 16px;
right: 16px;
z-index: 999999;
display: flex;
align-items: center;
/* Le même écart que dans la barre de pilotage entre deux voisins qui ne sont pas du même
groupe : 16px, avec le trait du groupe de gauche (.divActionScene) — 16, trait, 16. */
gap: 16px;
padding: var(--paddingCorps);
background: var(--cBlancOverlay);
border-radius: var(--borderR2);
box-shadow: var(--ombrePortee2);
animation: divActionPreviewAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes divActionPreviewAppear {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Bulle du haut (chef de projet, 2026-09-17) : dans la fenêtre du site, les onglets quittent la
barre de titre au bout de dix secondes et se posent ici, au centre, par-dessus le logo
(MoteurPreview.poserBulle). Même matière que la barre du bas ; elle sort du haut de l'écran en
s'étirant, et s'élargit quand les boutons de fin la rejoignent. */
#previewBulle {
position: fixed;
top: 12px;
left: 50%;
z-index: 999999;
display: flex;
align-items: center;
gap: var(--gapDefaut);
max-width: calc(100vw - 32px);
padding: var(--paddingCorps);
background: var(--cBlancOverlay);
border-radius: var(--borderR2);
box-shadow: var(--ombrePortee2);
transform: translateX(-50%);
animation: previewBulleApparition 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes previewBulleApparition {
from { transform: translateX(-50%) translateY(-120%) scaleX(0.3); opacity: 0; }
to { transform: translateX(-50%) translateY(0) scaleX(1); opacity: 1; }
}
/* Verre dépoli (chef de projet, 2026-09-17) : la barre du bas et la bulle laissent voir la scène,
floutée. Le flou reste modéré et la surface petite : la scène peut bouger derrière (roue qui
tourne) sans charger le navigateur. Un seul repli : le navigateur qui ne sait pas flouter
garde le blanc à 80 %.
Le réglage « Réduire la transparence » du visiteur n'est PAS suivi (décision chef de projet
2026-09-23) : le flou est ce qui rend la barre lisible par-dessus la scène — sans lui, on
lirait ce qui passe derrière. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
#divActionPreview,
#previewBulle {
background: var(--cBlancVerre);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
backdrop-filter: blur(10px) saturate(1.4);
}
}
#previewBulle .ctaPreviewControle {
flex-shrink: 0;
}
/* La bulle et la barre du bas sont au-dessus de tout, curseur compris : le curseur glisse
dessous. Quand un voile assombrit l'écran pour n'éclairer qu'un geste — le passage,
« Quelques instants plus tard », une boîte de dialogue qui fige l'aperçu —, elles passent
SOUS ce voile : on les voit toujours, assombries comme la scène, et elles ne répondent plus.
Elles ne s'effacent jamais : ce qui disparaît puis revient n'a pas de sens pour le visiteur
(chef de projet, 2026-09-18). Le panneau existe du premier au dernier instant de son fondu
(créé à opacité 0, retiré après la remise) : elles restent sous lui tout ce temps, sans saut.
La boîte de saisie, elle, fait partie du film (le curseur la remplit) : elle ne fige pas
l'aperçu, et la barre reste au-dessus d'elle, comme avant. */
body:has(#previewQuelquesInstantsOverlay) :is(#previewBulle, #divActionPreview),
body:has(#boitesDialogue.boitesDialogueFigeApercu) :is(#previewBulle, #divActionPreview) {
z-index: 999925;
pointer-events: none;
}
/* Une bulle de confirmation s'ouvre vers le haut, par-dessus la barre du bas, et le curseur
doit s'y voir cliquer : le temps du geste, la barre redescend sous les deux (_bulleConfirmation.css). */
body:has(.bulleConfirmation) #divActionPreview {
z-index: 999922;
}
/* Bulle posée : la popup à vues s'ouvre sous elle, les onglets restent visibles et cliquables. */
body:has(#previewBulle) #previewPopupCorps {
top: calc(12px + var(--hauteurBullePreview) + 12px);
}
#previewSousTitreTexte {
margin-left: auto;
display: block;
}
#previewSousTitreTexte span {
display: block;
color: var(--cNoir1);
}
/* Trois blocs, rien que des boutons. À gauche, les boutons de la scène : un groupe de la barre
de pilotage (.divActionScene, _sceneBoutons.css), avec son trait — LE trait, le même partout.
Au centre, les boutons de fin à la fin de l'aperçu. À droite, « Prendre la main ». Tous
centrés verticalement dans la barre. */
#previewBlocApercu {
display: flex;
align-items: center;
gap: var(--gapDefaut);
}
/* Le bloc central porte le nom et la description de l'aperçu (deux lignes de --fText16 séparées
de 2px) tant que les boutons de fin ne sont pas là, puis les boutons (MoteurPreview,
afficherBoutonsFin). Sa hauteur est celle des deux lignes, toujours : la barre ne bouge pas
quand le texte cède la place aux boutons (décision PO 2026-09-15) — `lh` est la hauteur de
ligne de cette police. Les boutons portent leur propre police (.cta14). */
#previewBlocApercu {
flex: 1 1 auto;
align-self: stretch;
min-width: 0;
font: var(--fText16);
min-height: calc(2lh + 2px);
}
/* Les onglets ne sont jamais dans la barre du bas : barre de titre de la fenêtre du site, puis
bulle (chef de projet, 2026-09-17). Ceux du bas se rangent, groupe de gauche et trait compris,
boutons de fin compris, en attendant la bulle. Posé par MoteurPreview à la construction. */
body.previewOngletsEnHaut #previewBlocScene,
body.previewOngletsEnHaut #previewBlocApercu .ctaPreviewControle {
display: none;
}
/* POC : l'étiquette et le cœur du site dans la barre du bas, à GAUCHE, en groupe de la barre
(.divActionScene : trait et 16px après le trait), avant le nom et la description
(MoteurPreview.dessinerGestesSite). */
#previewBlocSite {
flex-shrink: 0;
}
/* Nom et description : deux lignes, chacune sur une seule ligne — faute de largeur, le texte se
coupe en points de suspension, il ne pousse jamais « Prendre la main » hors de la barre. */
.previewBlocTexte {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.previewBlocTexteNom,
.previewBlocTexteDescription {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.previewBlocTexteNom {
font: var(--fText16Strong);
color: var(--cNoir1);
}
.previewBlocTexteDescription {
color: var(--cNoir3);
}
/* Barre réduite, à la demande du script (étape `barreApercu`, MoteurPreview) : pour la scène qui
affiche quelque chose en bas de l'écran. Rangée à gauche ou à droite, à la largeur de son
contenu — ne restent que l'étiquette, le cœur et « Prendre la main ». Sans cette étape, rien
ne change. */
#divActionPreview.previewBarreGauche {
right: auto;
}
#divActionPreview.previewBarreDroite {
left: auto;
}
:is(#divActionPreview.previewBarreGauche, #divActionPreview.previewBarreDroite) #previewBlocApercu {
display: none;
}
/* Le bouton de sortie "Prendre la main ✕" est poussé tout à droite de la barre, dans le flux.
(Silhouette et croix : composants/boutonFermeture.css, importé en tête de ce fichier.) */
#divActionPreview .modaleClose {
margin-left: auto;
}
/* Les boutons portent une action : ils restent entiers et lisibles, jamais rétrécis. */
#divActionPreview .ctaPreviewControle,
#divActionPreview .ctaPreviewAction,
#divActionPreview .modaleClose {
flex-shrink: 0;
}
/* « Aller à la fin » se range à droite avec la sortie : c'est lui qui prend la marge qui pousse. */
#divActionPreview .ctaPreviewAction:not([hidden]) {
margin-left: auto;
}
#divActionPreview .ctaPreviewAction:not([hidden]) + .modaleClose {
margin-left: 0;
}
.ctaPreviewAction[hidden] {
display: none;
}
/* Clic sur une zone non activable : l'écran s'assombrit et la barre reste seule éclairée.
Le temps de cet assombrissement, la sortie se met en fond blanc plein — c'est le moment où
l'utilisateur cherche comment débloquer, la réponse doit sauter aux yeux. Au repos, le
bouton n'a aucun fond : le blanc ne dit quelque chose que parce qu'il est exceptionnel. */
#divActionPreview.previewAssombri .modaleClose {
background: var(--cBlanc);
}
/* Pas d'animation sur le sous-titre : le texte change en direct, comme un sous-titre de film.
Animer l'entrée ou la sortie attire l'œil sur le changement au lieu du contenu à lire. */
/* Silhouette : .cta14 (31_cta.css) — ici uniquement la couleur du rôle.
C'est LE modèle du socle .cta14 (décision PO 2026-07-18). L'ombre portée est
une exception propre à cette barre : son fond est transparent, l'ombre décolle
les boutons — ne pas la généraliser aux autres cta14 (décision PO 2026-07-18). */
.ctaPreviewControle,
.ctaPreviewAction {
color: var(--cBlanc);
background: var(--cAccent_a);
box-shadow: var(--ombrePortee);
/* Plein : LA bordure, transparente — même hauteur que tout bouton de l'écran
(.ctaEcranPrimaire, _sceneBoutons.css). */
border: var(--borderCta);
border-color: transparent;
}
/* Sous-titre flottant (style "sous-titre vidéo") : au-dessus de la barre, hors animation.
Position bottom calculée en JS. Affiché via .previewSousTitreVisible, auto-effacé par timer. */
#previewSousTitre {
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 999920;
max-width: 80vw;
padding: 10px 22px;
border-radius: var(--borderR1);
background: #f6e2fa;
color: var(--cNoir1);
font: var(--fH2);
text-align: center;
box-shadow: var(--ombrePortee2);
display: none;
}
#previewSousTitre.previewSousTitreVisible {
display: block;
}
/* Onglets de la popup : l'actif garde le bouton normal de la barre (intouché, couleur de
l'espace) ; les autres se grisent (aspect toggle menu). On ne change QUE la couleur — forme
et position inchangées. */
.ctaPreviewControleInactif { background: var(--cBlanc03); color: var(--cNoir3); box-shadow: none; }
/* Bouton Résultat : à sa première apparition (fin d'aperçu), un pulse d'attention de ~3 s signale
« un nouveau bouton vient d'apparaître ». Purement visuel (transform), ne décale pas la barre. */
@keyframes ctaPreviewResultatNouveau {
0% { transform: scale(1); }
30% { transform: scale(1.14); }
60% { transform: scale(1); }
100% { transform: scale(1); }
}
.ctaPreviewResultatNouveau {
animation: ctaPreviewResultatNouveau 0.9s ease-in-out 3;
}
/* ── Popup à vues (présentation / config, réutilisable pour la fin d'aperçu) ──
POC version « bas » : la barre reste bloquée en bas (pied + onglets), le corps
grandit au-dessus. Le fond passe SOUS la barre (z 9990 < 9991) pour la garder
visible et cliquable. Le `bottom` du corps est calculé en JS (ancré sur la barre). */
#previewPopupFond {
position: fixed;
inset: 0;
z-index: 999921;
background: var(--cOverlay);
opacity: 0;
transition: opacity 0.4s ease;
display: none;
}
#previewPopupFond.previewPopupVisible {
opacity: 1;
}
#previewPopupCorps {
position: fixed;
left: 16px;
right: 16px;
top: 6vh;
/* bottom : appliqué en JS pour se poser juste au-dessus de la barre */
/* Largeur bornée puis centrée entre left et right (la barre, elle, reste pleine largeur). */
max-width: 1280px;
margin-inline: auto;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--cBlanc);
border-radius: var(--borderR2);
box-shadow: var(--ombreModale);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
#previewPopupFond.previewPopupVisible #previewPopupCorps {
opacity: 1;
transform: translateY(0);
}
/* En-tête fixe : barre blanche titre + croix, avec fin trait de délimitation dessous.
flex-shrink:0 → reste en haut pendant que le corps scrolle (la croix ne part jamais). */
.previewPopupEntete {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gapLarge); /* aligné 16 -> 20px (échelle PO 2026-07-18) */
flex-shrink: 0;
padding: var(--paddingCorps);
background: var(--cBlanc);
border-bottom: 1px solid var(--cBlanc03);
}
.previewPopupTitre {
font: var(--fH3);
color: var(--cNoir1);
}
/* Un conteneur par vue ; seul l'actif est affiché (les autres restent montés, cachés).
Scrolle SOUS l'en-tête — le corps varie (iframe, config, constat…). */
.previewPopupVue {
flex: 1;
min-height: 0;
overflow: auto;
}
.previewPopupIframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
/* Vue en JS (liste « Autres aperçus »…) : le corps n'a pas de padding (l'iframe le gère en
interne), donc le contenu JS apporte le sien. */
.previewPopupListe {
display: flex;
flex-direction: column;
gap: var(--gapLarge); /* aligné 16 -> 20px (échelle PO 2026-07-18) */
padding: 24px;
}
/* Vue « Résultat » (fin d'aperçu) : corps JS → apporte son padding (cf. .previewPopupVue sans padding).
Sans page de résultats affichable, le message neutre se style via .previewResultatVideTexte. */
.previewResultatCorps {
padding: var(--paddingCorps);
}
.previewResultatVideTexte {
font: var(--fText16);
color: var(--cNoir3);
padding: 24px;
background: var(--cBlanc02);
border-radius: var(--borderR1);
text-align: center;
}
/* ── Vue « Résultat » (téléchargements) : blocs rendus par les resultat.js des scènes ── */
.previewResultatCorps .blocResultatScene {
max-width: 600px;
margin-bottom: 16px;
padding: 16px 20px;
background: var(--cBlanc);
border: var(--border);
border-radius: var(--borderR1);
}
.previewResultatCorps .blocResultatTitre {
font: var(--fH4);
color: var(--cNoir1);
margin: 0 0 12px 0;
}
.previewResultatCorps .blocResultatBoutons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.previewResultatCorps .ctaSecondaire {
font: var(--fLabel);
color: var(--cNoir1);
padding: 8px 14px;
background: var(--cBlanc);
border: var(--borderCta);
border-radius: var(--borderR1);
cursor: pointer;
}
.previewResultatCorps .ctaSecondaire:hover {
background: var(--cBlanc02);
}
/* ── Vue « Constat » : blocs rendus par les constat.js des scènes ── */
.blocConstatScene {
margin-bottom: 24px;
}
.constatSceneTitre {
font: var(--fH2);
color: var(--cNoir1);
margin: 0 0 8px;
}
.constatRouletteListe {
font: var(--fText16);
color: var(--cNoir1);
margin: 0 0 16px;
padding-left: 28px;
}
.constatRouletteListe li {
padding: 2px 0;
}
.constatRouletteVide,
.constatPrizeVide {
font: var(--fText16);
color: var(--cNoir3);
margin: 8px 0 16px;
}
/* ── Sous-sections du constat (commun) ── */
.constatSousTitre {
font: var(--fH3);
margin: 16px 0 8px;
color: var(--cNoir1);
}
.constatSousTitreAnnules {
color: var(--cRouge3);
}
/* inutilisé 2026-06-13
.constatNoteAnnules {
font: var(--fItalic16);
color: var(--cNoir3);
margin: 0 0 8px;
}
*/
.constatTable {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
font: var(--fText16);
}
.constatTable th {
text-align: left;
padding: 8px 12px;
border-bottom: 2px solid var(--cNoir5);
font: var(--fLabel);
color: var(--cNoir3);
background: var(--cBlanc02);
}
.constatTable td {
padding: 8px 12px;
border-bottom: var(--border);
color: var(--cNoir1);
}
.constatTable tr:last-child td {
border-bottom: none;
}
.constatTable th:first-child,
.constatTable td:first-child {
width: 40px;
color: var(--cNoir3);
}
/* Carte variante : titre + description + lien.
Utilisée aussi pour l'aperçu courant (avec la classe modificatrice .previewFinVarianteCourante). */
.previewFinVariante {
width: 100%;
padding: 16px;
background: var(--cBlanc02);
border-radius: var(--borderR2);
text-align: left;
}
.previewFinVariante h3 {
font: var(--fH4);
color: var(--cNoir1);
margin: 0 0 6px;
}
.previewFinVariante p {
font: var(--fText16);
color: var(--cNoir3);
margin: 0 0 10px;
}
.previewFinVarianteLien {
font: var(--fMenu14);
color: var(--cAccent3);
cursor: pointer;
transition: color 0.2s;
}
.previewFinVarianteLien:hover {
color: var(--cNoir1);
}
/* Carte de l'aperçu en cours : liseré accent + libellé « Aperçu en cours » (sans lien). */
.previewFinVarianteCourante {
box-shadow: inset 0 0 0 2px var(--cAccent_a);
}
.previewFinVarianteEtat {
font: var(--fMenu14);
color: var(--cAccent_a);
}
/* ── Curseur ── */
/* La flèche de souris, variante du pointeur commun (kitPur/preview/pointeurPreview.css) : sur le
document entier. Sa pointe est à (2, 2) de la grille de 28, soit 3,43 px dans le dessin de 48 px.
La forme trapue, sans queue, empêche de la confondre avec la souris du spectateur. */
.curseurPreview {
position: fixed;
z-index: 999998;
left: 50%;
top: 50%;
--pointeurPointeX: 3.43px;
--pointeurPointeY: 3.43px;
}
.curseurPreviewFlash {
position: fixed;
z-index: 999997;
}
/* « Écran trop petit » migré → _boiteDialogue.css (boîtes de dialogue génériques), 2026-06-21. */
/* ── Panneau « Quelques instants plus tard » (scène de rupture) ──
Écourte une animation trop longue pour montrer sa fin. Même ADN que la modale de fin,
mais plein écran et en fondu (jamais brutal) : le fondu dit « du temps passe ». */
#previewQuelquesInstantsOverlay {
position: fixed;
inset: 0;
z-index: 999926;
display: flex;
align-items: center;
justify-content: center;
background: var(--cOverlay);
opacity: 0;
transition: opacity 0.4s ease-out; /* même courbe que l'assombrissement d'ouverture (#previewOverlay), deux fois plus rapide */
}
#previewQuelquesInstantsOverlay.previewQuelquesInstantsVisible {
opacity: 1;
}
#previewQuelquesInstantsContenu {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gapLarge);
max-width: 560px;
width: 90%;
padding: 48px;
background: var(--cBlanc);
border-radius: var(--borderR2);
box-shadow: var(--ombreModale);
color: var(--cNoir1);
text-align: center;
opacity: 0;
transition: opacity 0.2s ease;
}
/* Le panneau apparaît APRÈS l'assombrissement, et part AVANT que l'assombrissement se lève. */
#previewQuelquesInstantsContenu.previewQuelquesInstantsContenuVisible {
opacity: 1;
}
#previewQuelquesInstantsContenu h2 {
font: var(--fH2);
margin: 0;
}
#previewQuelquesInstantsContenu p {
font: var(--fText16);
color: var(--cNoir3);
margin: 0;
}
/* ── Le passage (MoteurPreview.ouvrirPassage : classe previewPassageEnCours sur le body) ──
Le bouton « Passer à : X » vit DANS la barre de pilotage (#zoneProgressBar), et la barre,
fixée, est un contexte d'empilement : aucun de ses enfants ne peut passer seul au-dessus
du voile de la boîte (999926). Pour que le geste se voie, c'est donc la barre entière qui
monte (999927) — et pour qu'on ne voie QUE le geste, elle se voile elle-même en même temps,
de la même ombre que l'écran : son propre voile (#barrePilotage::before, _barreFin.css),
levé ici quel que soit l'état de la barre de fin. Seule #zoneProgressBar (z 2, au-dessus
du voile, _studioIntegree.css) reste éclairée : le curseur (999999) y va et clique sous les
yeux du visiteur. Même rendu pour toutes les scènes, barre de fin déployée ou non. */
body.previewPassageEnCours #barrePilotage {
z-index: 999927;
}
body.previewPassageEnCours #barrePilotage::before {
opacity: 1;
background: var(--cOverlay);
}
/* Dans la zone éclairée, rien d'autre que le bouton « Passer à : X » : la barre de fin de
la scène (hors flux, dans la zone — _barreFin.css) se range le temps du passage, et le
fond de la zone reste blanc même quand la barre de fin l'avait teinté. Les mini-widgets
(compteurs) flottent au-dessus de la barre, hors de son voile : ils se rangent aussi. */
body.previewPassageEnCours #barreFinScene,
body.previewPassageEnCours #miniWidgets {
visibility: hidden;
}
body.previewPassageEnCours #zoneProgressBar {
background: var(--cBlanc);
}
/* La boîte de passage entre deux scènes (MoteurPreview.ouvrirPassage) : deux tuiles de même
taille, l'icône et quelques mots. Un cadre à part, posé sur la première, glisse jusqu'à la
seconde ; en dessous, une flèche de l'une à l'autre rappelle la frise du scénario. */
/* La boîte de passage se serre sur ses tuiles (pas la largeur du panneau « Quelques
instants », qui partage le même contenu) : elle ne dispute rien à l'écran voilé. */
#previewQuelquesInstantsContenu.previewPassageBoite {
width: auto;
padding: 32px 40px;
}
.previewPassageTuiles {
--tuileLargeur: 160px;
--tuileEcart: 40px;
position: relative;
display: flex;
align-items: stretch;
gap: var(--tuileEcart);
padding-bottom: 28px; /* la place de la flèche */
}
.previewPassageTuile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--gapMoyen);
width: var(--tuileLargeur);
padding: 20px 12px;
border: 3px solid var(--cBlanc03);
border-radius: var(--borderR2);
background: var(--cBlanc02);
opacity: .5;
transition: opacity .9s ease-in-out, background .9s ease-in-out;
}
.previewPassageTuile.previewPassageTuileActive {
background: var(--cAccent0);
opacity: 1;
}
/* 64px de dessin, la grande des deux tailles d'icône de scène du projet
(assets/noyau/css/studio/54_icones.css) ; la tuile met l'air autour. */
.previewPassageTuile img {
width: 64px;
height: 64px;
}
/* L'étiquette de la cue, celle du bouton « Passer à : X » : un mot en PascalCase sans espace
(« PrizeNameWheel », « WinsReelGrid#2 ») — la tuile fait la largeur du plus long, et un
nom plus long encore se coupe plutôt que de sortir. */
.previewPassageTuile span {
font: var(--fH4);
color: var(--cNoir1);
text-align: center;
overflow-wrap: anywhere;
}
/* Le cadre qui glisse : même taille que la tuile, posé sur la première, translaté sur la seconde. */
.previewPassageCadre {
position: absolute;
top: 0;
left: 0;
width: var(--tuileLargeur);
height: calc(100% - 28px);
box-sizing: border-box;
border: 4px solid var(--cAccent3);
border-radius: var(--borderR2);
pointer-events: none;
transition: transform .9s ease-in-out;
}
.previewPassageCadre.previewPassageCadreArrive {
transform: translateX(calc(var(--tuileLargeur) + var(--tuileEcart)));
}
/* La flèche sous les tuiles, du centre de la première au centre de la seconde. */
.previewPassageFleche {
position: absolute;
left: calc(var(--tuileLargeur) / 2);
right: calc(var(--tuileLargeur) / 2);
bottom: 8px;
height: 0;
border-top: 3px solid var(--cNoir3);
}
.previewPassageFleche::after {
content: '';
position: absolute;
right: -2px;
top: -8px;
border: 7px solid transparent;
border-left: 12px solid var(--cNoir3);
border-right: 0;
}
/* Icône d'attente (iconeAttente.ts) : rotation lente = « le temps tourne ». Couleur = `color`. */
#previewQuelquesInstantsSablier {
width: 48px;
height: 48px;
color: var(--cNoir1);
animation: previewSablierRotation 3s linear infinite;
}
@keyframes previewSablierRotation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Le téléphone du joueur, à côté de la scène (TelephoneApercu.ts) ──
À droite, entre la bulle et la barre de l'aperçu (top, largeur et hauteur posés en JS). Au-dessus
du voile d'ouverture, sous « Quelques instants plus tard » et la boîte de passage, qui l'assombrissent
comme la scène. Une vue, pas une commande : le doigt de l'aperçu y joue, le visiteur n'y touche pas.
Même silhouette que le téléphone de l'aperçu participant (.apercuParticipantAppareilTelephone). */
#previewTelephone {
position: fixed;
right: 16px;
z-index: 999922;
pointer-events: none;
}
#previewTelephone[hidden] {
display: none;
}
/* Une vue de la popup ouverte passe par-dessus le téléphone : il reste à sa place, sous le voile,
assombri comme la scène — jamais effacé, le bouton qui le masque dit toujours vrai (chef de projet, 2026-09-25). */
body:has(#previewPopupFond.previewPopupVisible) #previewTelephone {
z-index: 999920;
}
.previewTelephoneAppareil {
width: max-content;
padding: 14px;
border-radius: 52px;
background: var(--cNoir1);
box-shadow: var(--ombreModale);
transform-origin: top left;
}
.previewTelephoneEcran {
position: relative;
overflow: hidden;
border-radius: 38px;
background: var(--cBlanc);
}
.previewTelephoneEcran iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ── Le tour : qui joue, la scène ou le téléphone (TelephoneApercu.marquerTour) ──
Téléphone affiché, le côté qui ne joue pas passe sous un voile de popup, pointeur compris.
Au téléphone : le voile couvre toute la scène, flèche de souris dessous (999997, au-dessus des
boîtes de dialogue), et le téléphone passe par-dessus ; la barre et la bulle restent au-dessus de
tout. À la scène : le voile couvre l'écran du téléphone, doigt compris (doigt z 2). Une vue de
la popup ouverte garde son propre voile : celui de la scène s'efface. */
#previewVoileScene {
position: fixed;
inset: 0;
z-index: 999998;
background: var(--cOverlay);
opacity: 0;
transition: opacity 0.3s ease-out;
pointer-events: none;
}
body.previewTourTelephone #previewVoileScene {
opacity: 1;
}
body:has(#previewPopupFond.previewPopupVisible) #previewVoileScene {
opacity: 0;
}
body.previewTourTelephone .curseurPreview {
z-index: 999997;
}
body.previewTourTelephone .curseurPreviewFlash {
z-index: 999996;
}
body.previewTourTelephone #previewTelephone {
z-index: 999999;
}
.previewTelephoneVoile {
position: absolute;
inset: 0;
z-index: 3;
background: var(--cOverlay);
opacity: 0;
transition: opacity 0.3s ease-out;
pointer-events: none;
}
body.previewTourScene .previewTelephoneVoile {
opacity: 1;
}
/* Au tour de la scène, le téléphone se range : moitié visible, le reste hors de l'écran (sa
marge de droite comprise). Le trajet dure 3 s, aller comme retour : le retour part 3 s avant
l'ouverture des réponses (RETOUR_AVANT_T0_MS, TelephoneApercu.ts). Affiché pendant le tour
de la scène, il paraît déjà rangé, sans trajet (il sort de display: none). */
#previewTelephone {
transition: transform 3s ease-in-out;
}
body.previewTelephoneRange #previewTelephone {
transform: translateX(calc(50% + 16px));
}
/*!****************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_boiteDialogue.css ***!
\****************************************************************************************************************************************/
/* ============================================
BOÎTES DE DIALOGUE — le cadre commun de toutes les boîtes de l'écran
(GestionnaireBoitesDialogue.ts ; décision du chef de projet, 2026-09-22)
============================================
Une seule boîte visible à la fois. La racine capte tous les clics (blocage local) dès le
niveau « partiel » (.boitesDialogueBloquant) et porte .boitesDialogueFigeApercu tant qu'une
boîte fige l'aperçu (_preview.css). Le rendu est celui de la boîte de saisie : grande carte
sur voile flouté, titre centré, croix en haut à droite, UNE seule barre de défilement. */
#boitesDialogue {
position: fixed;
inset: 0;
z-index: 999990;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* niveau « aucun » : l'écran reste pilotable */
}
#boitesDialogue.boitesDialogueBloquant {
pointer-events: auto; /* « partiel » / « total » : capte tous les clics locaux */
background: var(--cOverlay);
backdrop-filter: blur(12px);
}
/* Verrou de défilement : une boîte bloquante réserve la molette à la boîte — l'écran
dessous ne défile JAMAIS (même quand la barre de debug Symfony rend la page
défilable en dev). */
html:has(#boitesDialogue.boitesDialogueBloquant) {
overflow: hidden;
}
/* La carte. UNE SEULE BARRE DE DÉFILEMENT PAR BOÎTE — décision du chef de projet,
2026-09-07 : deux ascenseurs imbriqués (celui de la boîte + celui de la liste)
apparaissaient dès que la fenêtre manquait de hauteur, et la boîte emportait ses boutons
hors de vue. La carte et tout ce qu'il y a entre elle et le corps ne font qu'empiler en
colonne sans jamais défiler (ils se laissent comprimer : min-height 0) : SEUL le corps
défile, et le titre comme le pied restent visibles quelle que soit la hauteur de la
fenêtre. Une seule largeur pour toutes les boîtes (chef de projet, 2026-09-22). */
.boiteDialogueCarte {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
width: 90%;
max-width: 700px;
max-height: 85vh;
padding: 24px;
box-sizing: border-box;
background: var(--cBlanc1);
border-radius: var(--borderR1);
box-shadow: 0 0 30px var(--cNoir);
color: var(--cNoir1);
text-align: left;
overflow: hidden;
}
/* La croix (silhouette : composants/boutonFermeture.css, importée via _preview.css) est
ancrée sur la carte : elle ne défile pas avec le corps. */
.boiteDialogueCroix {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
.boiteDialogueTitre {
font: var(--fH3);
margin: 0 0 16px;
text-align: center;
}
.boiteDialogueCorps {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.boiteDialoguePied {
flex-shrink: 0;
margin-top: var(--gapLarge);
}
/* Un ou deux boutons alignés au centre : le pied des alertes. */
.boiteDialogueCtas {
display: flex;
justify-content: center;
gap: var(--gapMoyen);
}
/* Le corps des trois alertes (écran trop petit, reconnexion, tiers de confiance) : une
icône et un texte court, centrés. */
.boiteDialogueAlerte {
text-align: center;
}
.boiteDialogueAlerte svg {
color: var(--cNoir3);
margin-bottom: 16px;
}
.boiteDialogueAlerte p {
font: var(--fText16);
margin: 0 0 8px;
}
/* Fenêtre basse (petit écran, fenêtre réduite, barre de debug en dev) : la carte se
resserre — moins de marges, moins de rembourrage — pour laisser au corps de quoi
montrer des lignes. */
@media (max-height: 700px) {
.boiteDialogueCarte {
max-height: 94vh;
padding: 12px 16px;
}
.boiteDialogueTitre {
margin-bottom: 8px;
}
}
/* ── Écart « boîte de saisie » (SaisieEcran.ts) ──
Le corps est le conteneur remis à la scène ; le kit de saisie y pose lui-même le titre
(.saisieTitre), la liste (.saisieChamps) et le pied (.saisieBoutons), la consigne et le
vivier entre le titre et la liste. Le cadre ne crée donc ni titre ni pied : les blocs du
kit jouent ces rôles, et c'est la LISTE qui défile — titre, consigne et boutons restent
visibles. La marge intérieure est celle du formulaire (kitSingleton/saisie/css/saisie.css). */
.boiteSaisie {
padding: 0;
}
.boiteSaisie .boiteDialogueCorps,
.boiteSaisie .saisieConteneur {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.boiteSaisie .saisieFormulaire {
display: flex;
flex-direction: column;
min-height: 0;
}
/* La liste prend toute la place qui reste, et pas un pixel de plus : le plafond en vh
de la feuille de saisie (utile aux boîtes hors cadre) est levé ici, c'est lui qui
faisait déborder la boîte. La molette qui bute en fin de liste ne se propage pas :
overscroll-behavior est déjà posé sur .saisieChamps par la feuille de saisie. */
.boiteSaisie .saisieChamps {
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
@media (max-height: 700px) {
.boiteSaisie {
padding: 0;
}
.boiteSaisie .saisieFormulaire {
padding: 12px 16px;
}
.boiteSaisie .saisieTitre {
margin-bottom: 8px;
}
.boiteSaisie .saisieChamps {
margin-bottom: 12px;
}
/* L'air posé entre les textes du haut et le tableau : réduit, jamais supprimé. */
.boiteSaisie .saisieTableauBoite .saisieChamps {
margin-top: 0.5em;
}
}
/* La bulle « Êtes-vous sûr ? » vit dans le body, sous les boîtes (échelle de
salleEcran.css) : armée depuis une boîte (arrêt du test, pointage, stock), elle passe
au-dessus — et reste sous le curseur de l'aperçu, qui doit la voir cliquer. */
body:has(#boitesDialogue) .bulleConfirmation {
z-index: 999995;
}
/* ── Coquille des aperçus (previewCadre.twig) ──
« La fenêtre a changé de taille » vit dans la page qui contient l'iframe, hors du
moteur : elle garde son ancienne carte, conservée pour elle seule (décision du chef
de projet, 2026-09-22). Rien d'autre ne l'utilise. */
.boiteDialogueContenu {
position: relative;
max-width: 400px;
padding: 32px;
background: var(--cBlanc);
border-radius: var(--borderR2);
box-shadow: var(--ombreModale);
text-align: center;
color: var(--cNoir1);
}
.boiteDialogueContenu svg {
color: var(--cNoir3);
margin-bottom: 16px;
}
.boiteDialogueContenu p {
font: var(--fText16);
margin: 0 0 8px;
}
.boiteDialogueContenu .boiteDialogueCtas {
margin-top: 16px;
}
.boiteDialogueContenu button {
padding: 10px 24px;
font: var(--fCta16);
color: var(--cBlanc);
background: var(--cAccent_a);
border: none;
border-radius: var(--borderR1);
cursor: pointer;
}
.boiteDialogueContenu button:hover {
background: var(--cAccent_ah);
}
/*!******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_aucuneAnimation.css ***!
\******************************************************************************************************************************************/
/* ============================================
.aucuneAnimation — Classe utilitaire globale
Désactive TOUTES les animations CSS et transitions sur un élément
et tous ses descendants. À ajouter temporairement (via JS) sur un
conteneur avant un changement visuel pour figer les éléments en
place sans cascade d'animations.
Utilisation JS : window.figerAnimations(element, dureeMs)
============================================ */
.aucuneAnimation,
.aucuneAnimation *,
.aucuneAnimation *::before,
.aucuneAnimation *::after {
animation: none !important;
transition: none !important;
}
/*!******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_transitionBlocs.css ***!
\******************************************************************************************************************************************/
/* ============================================
Blocs d'une Vue d'animation — animations de bascule
Classes posées puis retirées par affichageBlocs.ts (jamais à la main dans une
animation). La durée vient de --blocDuree, poussée par le TS : source unique.
Vocabulaire FERMÉ : 'aucune' (pas de classe), 'fondu', 'glisse'. En ajouter une
suppose de toucher au noyau + ce fichier + la doc — c'est le garde-fou qui évite
que chaque animation invente son effet.
La VITESSE est un axe séparé, sans effet sur ce fichier : elle ne change que la valeur
de --blocDuree poussée par le TS ('normale' 400 ms, 'rapide' 350 ms).
Utilisation TS : this.afficherBloc(el, { anime: 'fondu', vitesse: 'rapide' })
============================================ */
.blocFonduEntree,
.blocFonduSortie,
.blocGlisseEntree,
.blocGlisseSortie {
animation-duration: var(--blocDuree, 400ms);
animation-timing-function: ease;
animation-fill-mode: both;
}
.blocFonduEntree {
animation-name: blocFonduEntree;
}
.blocFonduSortie {
animation-name: blocFonduSortie;
}
.blocGlisseEntree {
animation-name: blocGlisseEntree;
}
.blocGlisseSortie {
animation-name: blocGlisseSortie;
}
@keyframes blocFonduEntree {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes blocFonduSortie {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes blocGlisseEntree {
from { opacity: 0; transform: translateY(4%); }
to { opacity: 1; transform: none; }
}
@keyframes blocGlisseSortie {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-4%); }
}
/*!***************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/_tirageEcarte.css ***!
\***************************************************************************************************************************************/
/* ============================================
TIRAGE ÉCARTÉ — la case d'un tirage retiré sur une grille qui garde tout sous les yeux
(Wins*Grid, Raffle*Grid ; décision du chef de projet, 2026-09-04).
============================================
La case s'estompe en une seconde, puis devient invisible — mais elle garde sa PLACE :
rien autour ne bouge, l'organisateur retrouve ses repères. Posée par la vue de la
scène sur l'élément de la case (slot FluxKit, slot SplitFlapKit, case d'une grille
CSS). Retirée quand le tirage suivant reprend la case (rendue en bout de grille) :
la case revient d'un coup, ou selon sa propre transition.
Les !important : les kits posent leurs propres opacités et transitions sur leurs slots
(sfKitSlot, sfKitSlotTire…), et une case écartée l'est quoi qu'il arrive. */
.tirageEcarte {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 1s linear, visibility 0s linear 1s !important;
}
/*!********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/studio/56_scenario/_etiquettes.css ***!
\********************************************************************************************************************************************/
/* ============================================
ÉTIQUETTES - Marquage typographique
============================================
Les étiquettes données par l'organisateur (animations, sorties, groupes)
sont enveloppées dans .etiquetteMono par le filtre Twig `etiquetteHtml`.
La chasse fixe les distingue des libellés du système (décision PO 2026-06-10).
*/
.etiquetteMono {
font-family: var(--ffMono);
}
/* Marqueur d'une source provisoire, accolé à l'étiquette par le même filtre */
.etiquetteAConfigurer {
font: var(--fLight14);
color: var(--cRouge4);
}
.recapBlocDetail .etiquetteAConfigurer {
color: unset;
}
/*!***********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/studio/56_scenario/_recapitulatif.css ***!
\***********************************************************************************************************************************************/
/* ============================================
RÉCAPITULATIF SCÉNARIO (stepper vertical)
============================================ */
/* Container du stepper */
.recapStepper {
display: flex;
flex-direction: column;
gap: 0;
}
#scenarioPanneau .recapStepper > .recapActions + .recapBloc {
margin-top: 32px;
}
/* Connecteur vertical entre les blocs */
.recapConnecteur {
width: 3px;
height: 24px;
background: var(--cBlanc03);
margin-left: 20px;
}
/* Bloc individuel du stepper */
.recapBloc {
position: relative;
border-radius: var(--borderR1);
border: var(--borderCarte);
min-height: 66px;
overflow: hidden;
}
/* Titre du bloc (h3) */
.recapBloc h3 {
display: flex;
align-items: center;
gap: var(--gapMoyen); /* aligné 10 -> 12px (échelle PO 2026-07-18) */
padding: var(--paddingRecap);
padding-bottom: 0;
font: var(--fH4);
margin: 0;
}
/* Étiquettes du récap : un SEUL style, qu'elles soient cliquables ( / en mode
Préparer / progression) ou statiques. Fond clair de catégorie, texte noir, bordure légère
(choix PO 2026-07-20 : plus de pastille foncée à texte blanc — l'onglet Diffuser fait foi).
.recapTagSortie = blanc, la couleur du « produit d'une scène » (conservée en entrée).
.recapTagSortieSecondaire = sortie déclarée `secondaire` par le contrat d'une scène, en
retrait — page d'une scène seulement (Vitrine) : un scénario n'affiche pas ses sorties
inutilisées (décision chef de projet 2026-09-16). */
.recapTagGroupes,
.recapTagDistributions,
.recapTagSortie,
.recapTagSortieSecondaire,
.recapLienGroupes,
.recapLienDistributions {
display: inline-block;
margin: 2px 0;
padding: var(--paddingEtiquette);
border-radius: var(--borderR0);
border: 1px solid currentColor;
color: var(--cNoir3);
}
.recapTagSortieSecondaire {
color: var(--cNoir4);
}
.recapTagGroupes,
.recapLienGroupes { background: var(--cAccent1); }
.recapTagDistributions,
.recapLienDistributions { background: var(--cAccent1); }
/* Titre d'animation/affichage cliquable (mode Préparer) : lien sobre, sans pastille colorée,
pour ne pas perturber la lecture — même sobriété que le titre non cliquable de la progression. */
.recapLienScenes,
.recapLienAffichages {
color: inherit;
}
/* Affordance « cliquable » : soulignement au survol (étiquettes d'entrée + titres) */
.recapLienGroupes:hover,
.recapLienDistributions:hover,
.recapLienScenes:hover,
.recapLienAffichages:hover {
text-decoration: underline;
}
/* Sous-titre dans le bloc (h4) — élargi à la colonne récap de composition
(55_scenarioModifier.css), qui reprend la grammaire du récap hors panneau. */
.recapBloc h4,
.recapComposition h4 {
font: var(--fH4);
margin: 0;
color: var(--cNoir3);
}
/* Listes à puces dans le bloc */
.recapBloc ul,
.recapComposition ul {
margin: 4px 0;
padding-left: var(--retraitListeCourt);
}
/* Colonne récap de composition (largeur fixe étroite) : pas de puces — chaque ligne
est déjà un tag — et un « Étiquette : Label » ne se plie JAMAIS sur deux lignes
(décision PO 2026-08-11) ; au-delà de la colonne, ellipse. */
.recapComposition ul {
list-style: none;
padding-left: 0;
}
.recapComposition .recapTagGroupes,
.recapComposition .recapTagSortie,
.recapComposition .recapTagSortieSecondaire {
white-space: nowrap;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.recapBloc li,
.recapComposition li {
font: var(--fText16);
color: var(--cNoir3);
}
/* Détails du bloc */
.recapBlocDetail {
padding: var(--paddingRecap);
padding-top: var(--gapReduit);
font: var(--fText16);
color: var(--cNoir3);
}
.recapBlocDetail p {
margin: 2px 0;
}
.recapBlocDetail hr {
border: none;
border-top: var(--borderCarte);
margin: 20px 0;
}
/* Icône de l'animation en rappel dans le coin haut-droit du bloc.
Case 80 et 8px d'air : dessin 64, la grande des deux tailles du projet (54_icones.css).
Hors flux (absolute) pour ne pas gonfler la hauteur du titre — calée sur le padding du h3. */
.recapTitreIcone {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
padding: var(--gapDefaut);
border-radius: var(--borderR1);
}
/* Colonne de l'icône (chef de projet, 2026-09-22) : l'icône tient toute la hauteur du bloc, à
droite, séparée du contenu par un filet ; le contenu s'arrête avant elle, rien ne passe
dessous. Le dessin reste en haut de la colonne (object-fit). Ne vaut que pour le bloc du
récapitulatif (.recapBloc) : la composition de scénario porte aussi .recapBlocScene. */
.recapBloc.recapBlocScene {
min-height: 80px; /* la colonne ne descend jamais sous la case de l'icône */
padding-right: 80px;
}
.recapBloc.recapBlocScene .recapTitreIcone {
bottom: 0;
height: auto;
object-fit: contain;
object-position: top;
border-radius: 0;
border-left: var(--borderCarte);
}
/* Variantes couleur par type */
.recapBlocGroupes /* .recapBlocDistributions (inutilisé 2026-06-13) */ {
background: var(--cBlanc1);
}
.recapBlocScene .recapTitreIcone {
background: var(--cAccent1);
}
.recapBlocScene.recapBlocAffichage .recapTitreIcone {
background: var(--cAccent1);
}
.recapBlocConfigurations {
background: var(--cAccent1);
}
/* inutilisé 2026-06-13
.recapBlocFinal {
background: var(--cBlanc02);
}
*/
/* Lien "Modifier" sous le récap */
.recapActions {
padding: var(--paddingRecap);
}
/* Même couleur qu'Annuler des formulaires (noyau 31_cta.css) : les actions neutres sont
noires, les couleurs restent réservées aux actions marquées (Supprimer). */
.recapActions a {
color: var(--cNoir3);
}
.recapActions a:hover {
text-decoration: underline;
}
/* Image dans un bloc récap */
.recapImage {
max-width: 100%;
border-radius: var(--borderR1);
}
/* Pastilles couleurs dans le récap */
.recapCouleurs {
display: flex;
gap: var(--gapDefaut);
margin-top: 6px;
}
.recapCouleurPastille {
width: 28px;
height: 28px;
border-radius: 50%;
border: var(--border);
}
/* Message vide */
.recapVide {
font: var(--fItalic16);
color: var(--cNoir3);
padding: var(--paddingLigneListe);
}
/* Source list dans les détails */
/* inutilisé 2026-06-13
.recapSources {
display: flex;
flex-direction: column;
gap: 2px;
}
*/
/* Alerte insuffisance */
.recapAlerte {
color: var(--cRouge3);
font: var(--fAlerte16);
}
/* Brique récapitulatif dans la grille du scénario */
/* inutilisé 2026-06-13
.brique.briqueRecap {
background: var(--cBlanc02);
border-color: var(--cBlanc03);
}
*/
/* inutilisé 2026-06-15 - concept recap.js retiré
.recapAnimConfig:empty {
display: none;
}
*/
.recapEncadre {
margin: 10px 0;
padding: var(--paddingRecap);
border: var(--borderCarte);
border-radius: var(--borderR1);
background: #FFF8;
}
/* inutilisé 2026-06-15 - concept recap.js retiré
.recapAnimConfig h4 {
font: var(--fH4);
margin: 20px 0 4px;
}
.recapAnimConfig h4:first-child {
margin-top: 0;
}
.recapAnimConfig p {
font: var(--fText16);
color: var(--cNoir3);
margin: 2px 0;
}
.recapAnimConfig ul,
.recapAnimConfig ol {
margin: 4px 0;
padding-left: 20px;
}
.recapAnimConfig li {
font: var(--fText16);
color: var(--cNoir3);
}
.recapAnimConfig table {
width: 100%;
border-collapse: collapse;
margin: 6px 0;
font: var(--fText16);
color: var(--cNoir3);
}
.recapAnimConfig th,
.recapAnimConfig td {
padding: 4px 8px;
text-align: left;
border-bottom: var(--borderCarte);
}
.recapAnimConfig th {
font-weight: 600;
}
.recapAnimConfig hr {
border: none;
border-top: var(--borderCarte);
margin: 8px 0;
}
*/
/* Boutons participants cliquables dans la progression : même étiquette que les autres
(contour compris, cf. bloc du haut), on n'ajuste que l'interactivité. */
button.recapTagGroupes {
cursor: pointer;
font: inherit;
}
button.recapTagGroupes:hover {
text-decoration: underline;
}
/* ============================================
PROGRESSION — États des blocs
============================================ */
/* Seules les cues à venir sont atténuées : celles déjà jouées restent pleines, elles ont été
actives (chef de projet, 2026-09-22). */
#progression .recapBlocScene {
transition: opacity 0.3s;
}
#progression .recapBlocScene.recapBlocFutur {
opacity: .5;
}
/* Nombre d'éléments d'une pastille d'entrée ou de sortie (peintureProgression.ts), séparé du
libellé par un filet de la couleur de la pastille. Absent tant que le nombre n'est pas connu. */
.recapCompte {
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid currentColor;
font: var(--fText16Strong);
}
/* Section « Progression » de la cue active : une section du bloc comme Entrées et Sorties
(.recapBlocDetail, même titre, même marge), servie cachée par le template. */
.progressionEtat[hidden] {
display: none;
}
/* La barre et son compte au retrait des listes d'Entrées et de Sorties. */
.progressionEtatBlocs {
margin: 4px 0;
padding-left: var(--retraitListeCourt);
}
/* Cue à venir (après la cue active) : son titre et son icône seulement — ses entrées et ses
sorties ne disent rien tant qu'elle n'a pas commencé (chef de projet, 2026-09-22). */
#progression .recapBlocFutur .progressionContenu {
display: none;
}
/* Aération de secours quand le bloc n'a aucune section visible */
.progressionContenu:not(:has(> :not([hidden]))) {
padding-bottom: var(--gapMoyen);
}
/* Blocs de progression émis par l'animation (obtenirProgression → rendu unique peintureProgression.ts) */
.progressionBlocTitre {
font: var(--fH4);
color: var(--cNoir3);
margin: 6px 0 2px;
}
.progressionBlocTexte {
font: var(--fText16);
color: var(--cNoir3);
margin: 2px 0;
}
.progressionBlocListe {
margin: 4px 0;
padding-left: var(--retraitListeCourt);
}
.progressionBlocListe li {
font: var(--fText16);
color: var(--cNoir3);
}
/* Barre sobre (chef de projet, 2026-09-22) : la cue active se voit déjà à l'opacité, la barre
n'a pas à crier. Fine, bouts droits comme la police, noire sans couleur d'accent, la moitié
du bloc ; le compte en petit gris à côté. */
.progressionBlocBarre {
display: flex;
align-items: center;
gap: var(--gapMoyen);
margin: 4px 0;
}
.progressionBlocBarrePiste {
flex: 0 1 50%;
height: 4px;
background: var(--cBlanc03);
overflow: hidden;
}
.progressionBlocBarreJauge {
height: 100%;
background: var(--cNoir);
transition: width 0.3s;
}
.progressionBlocBarreLabel {
font: var(--fLabel);
color: var(--cNoir3);
}
/*!************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/ecran/css/salleEcran.css ***!
\************************************************************************************************************************************/
/* ============================================
PLANS DE SUPERPOSITION (z-index) — l'échelle de l'écran
Une scène affiche ce qu'elle veut au premier plan : un clone qui s'envole, une popup de lot,
un feu d'artifice. Le chrome — barre de pilotage, aperçu, saisie, boîtes de dialogue — doit
passer AU-DESSUS quoi qu'elle fasse. Deux bandes franchement séparées, jamais mitoyennes :
une scène qui monte d'un cran ne peut pas mordre sur le chrome.
Scène et kits 0 → 9 999 (fond, zones, kits, clones en vol, overlays de kit)
Chrome 999 900 → 999 999
Dans la bande du chrome, l'ordre :
999 900 barre de pilotage, îlot de test (_studioIntegree.css)
999 920 sous-titre, overlay et fond de popup de l'aperçu
999 925 bulle de confirmation (_bulleConfirmation.css) — au-dessus de la barre de
l'aperçu, qui la recouvrirait sinon
999 926 panneau « Quelques instants plus tard » et boîte de passage de l'aperçu
(_preview.css)
999 927 barre de pilotage PENDANT la boîte de passage — elle monte au-dessus de la
boîte parce que le bouton « Passer à : X » vit dedans, et se voile elle-même
pour ne laisser éclairée que la zone de ce bouton (_preview.css)
999 990 boîtes de dialogue, saisie comprise (_boiteDialogue.css) — au-dessus de tout
ce qui précède
999 995 bulle de confirmation armée depuis une boîte de dialogue (_boiteDialogue.css)
999 997 rond du clic du curseur d'aperçu
999 998 curseur d'aperçu — au-dessus des boîtes de dialogue :
l'aperçu doit MONTRER le curseur cliquer une confirmation
999 999 bulle des onglets et barre de l'aperçu — le curseur glisse dessous ; elles
s'effacent quand l'écran s'assombrit (passage, boîte qui fige l'aperçu — pas
la saisie, que le curseur remplit), et la barre redescend à 999 922 le temps
d'une bulle de confirmation (_preview.css)
Un nouveau plan se pose dans sa bande, jamais entre les deux.
============================================ */
/* ============================================
SALLE ECRAN - Styles principaux
============================================ */
/* Vue Progression de la boîte de l'îlot de test : les styles de l'onglet Progression du
studio, pour un seul design (IlotTest.ts, peintureProgression.ts). */
/* Boutons de l'écran : deux styles seulement. Plein = aucun contour ; non plein = fond blanc,
contour de la couleur de son texte. Posé ici et non dans 10_font.css : ne vaut que pour
l'écran de jeu (aperçu comme réel), jamais pour les boutons du site. */
:root {
--borderCta: 1px solid currentColor;
/* UNE hauteur de bouton sur l'écran : 34px, pleins et à contour (décision du chef de
projet, 2026-09-16). Tous portent la bordure de 1px (transparente sur un plein) :
l'air vertical passe de 8 à 7 pour que la bordure tienne dans les 34. */
--paddingCta14V: 7px;
--paddingCta14: var(--paddingCta14V) 16px;
}
/* ============================================
Structure principale
============================================ */
#salleEcran {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--couleurSecondaire);
}
/* Plan fond : couleur + image de fond (en dessous) */
#zoneFond {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--couleurFond);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Plan logo : positionné par GrilleKit (au-dessus du fond) */
#zoneLogo {
position: absolute;
z-index: 10;
pointer-events: none;
display: none;
}
#zoneLogo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Plan titre d'en-tête : positionné par GrilleKit (au-dessus du fond) */
#zoneTitre {
position: absolute;
z-index: 10;
pointer-events: none;
display: none;
}
.zoneTitreTexte {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font: var(--fTitreEcran); /* la taille est recalée sur la hauteur de rangée par GestionnaireFondEnTete */
/* Seul texte de l'écran posé à même l'image de fond : sa couleur est réglée avec le fond, pas
avec la palette de la carte. Repli sur couleurPrimaire = comportement d'avant la clé, pour
les configurations de fond qui ne la portent pas. */
color: var(--couleurTexteSurFond, var(--couleurPrimaire));
}
/* Le titre occupe au plus 70 % de la largeur, se replie sur deux lignes maximum,
et au-delà se termine en points de suspension. La longueur du texte reste libre. */
.zoneTitreClamp {
max-width: 70%;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
line-height: 1.05; /* deux lignes tiennent dans la rangée avec un peu d'air (2 × 1.05 × 45 %) */
}
/* Disposition « titre à gauche, logo à droite » : le titre colle au bord gauche de sa zone */
#zoneTitre.titreAligneGauche .zoneTitreTexte {
justify-content: flex-start;
}
#zoneTitre.titreAligneGauche .zoneTitreClamp {
text-align: left;
max-width: 100%;
}
/* Zone d'affichage principale (animations, au-dessus du fond) */
#zoneAffichage {
position: relative;
z-index: 1;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Espace pour la barre de pilotage : sa hauteur réelle, posée sur :root par
AdaptationBarre.ts — elle grandit quand la barre passe sur deux lignes. */
padding-bottom: var(--hauteurBarrePilotage, 60px);
}
/*!**********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/kitSingleton/saisie/css/saisie.css ***!
\**********************************************************************************************************************************************/
/**
* SaisieKit — Styles de base des composants de saisie.
*
* Tout scopé sous .saisieFormulaire.
* L'overlay/popup est géré par la Salle (pas ici).
*/
/* ══════════════════════════════════════
FORMULAIRE
══════════════════════════════════════ */
.saisieFormulaire {
max-width: 640px;
margin: 0 auto;
padding: 24px;
}
.saisieTitre {
font: var(--fH3);
color: var(--cNoir1);
margin-bottom: 20px;
text-align: center;
}
.saisieChamps {
max-height: 60vh;
overflow-y: auto;
/* En butée de liste, la molette s'arrête là : jamais d'enchaînement vers le dessous. */
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: var(--gapMoyen);
margin-bottom: 24px;
}
/* Barre de scroll native stylée (non-overlay). Pas de scrollbar-color : sur
Chrome ≥121 il désactiverait ces règles ::-webkit-scrollbar et réactiverait
la barre overlay auto-masquée. */
.saisieChamps::-webkit-scrollbar {
width: 12px;
}
.saisieChamps::-webkit-scrollbar-track {
background: var(--cBlanc2);
border-radius: var(--borderR1);
}
.saisieChamps::-webkit-scrollbar-thumb {
background: var(--cNoir4);
border-radius: var(--borderR1);
}
.saisieBoutons {
display: flex;
justify-content: center;
gap: var(--gapMoyen);
}
/* Boutons saisie : même taille que les boutons barre d'actions (.btnScene) */
/* ══════════════════════════════════════
INPUT SCORE
══════════════════════════════════════ */
.saisieInputScore {
display: flex;
align-items: center;
gap: var(--gapLarge); /* aligné 16 -> 20px (échelle PO 2026-07-18) */
padding: 12px 16px;
background: var(--cBlanc02);
border-radius: var(--borderR1);
transition: background 0.2s;
}
.saisieJoueur {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gapDefaut); /* aligné 6 -> 8px (échelle PO 2026-07-18) */
transition: color 0.3s;
}
.saisieJoueurNom {
font: var(--fText16);
color: var(--cNoir1);
text-align: center;
}
.saisieScore {
width: 60px;
text-align: center;
font: var(--fCta16);
padding: 6px 8px;
border: var(--border);
border-radius: var(--borderR1);
background: var(--cBlanc1);
color: var(--cNoir1);
}
.saisieScore:focus {
outline: 2px solid var(--couleurCta, var(--cAccent3));
border-color: var(--couleurCta, var(--cAccent3));
}
/* Chrome/Edge : masquer les flèches des inputs number */
.saisieScore::-webkit-inner-spin-button,
.saisieScore::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.saisieScore {
-moz-appearance: textfield;
}
.saisieResultat {
font: var(--fLabel);
min-height: 18px;
font-weight: 600;
transition: color 0.3s, opacity 0.3s;
}
.saisieSeparateur {
font-size: 24px;
color: var(--cNoir4);
flex-shrink: 0;
}
/* ══════════════════════════════════════
FEEDBACK VICTOIRE / DÉFAITE / NUL
══════════════════════════════════════ */
.saisieVictoire .saisieResultat {
color: var(--cSucces3);
}
.saisieVictoire .saisieScore {
border-color: var(--cSucces3);
}
.saisieDefaite .saisieResultat {
color: var(--cRouge3);
}
.saisieDefaite .saisieScore {
border-color: var(--cRouge3);
}
.saisieNul .saisieResultat {
color: var(--cNoir3);
}
.saisieNul .saisieScore {
border-color: var(--cNoir3);
}
/* ══════════════════════════════════════
INPUT RESULTAT
══════════════════════════════════════ */
.saisieInputResultat {
display: flex;
align-items: center;
gap: var(--gapMoyen);
padding: 12px 16px;
background: var(--cBlanc02);
border-radius: var(--borderR1);
transition: background 0.2s;
flex-wrap: wrap;
justify-content: center;
}
/* Toggle 3 positions */
.saisieToggleResultat {
display: flex;
border-radius: var(--borderR1);
overflow: hidden;
border: var(--border);
flex-shrink: 0;
}
.saisieToggleBtn {
padding: 8px 18px;
border: none;
background: var(--cBlanc1);
color: var(--cNoir2);
font: var(--fCta16);
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.saisieToggleBtn:not(:last-child) {
border-right: var(--border);
}
.saisieToggleBtn:hover:not(.saisieToggleActif) {
background: var(--cBlanc03);
}
.saisieToggleBtn.saisieToggleActif {
background: var(--couleurCta, var(--cAccent3));
color: var(--couleurCtaTexte, var(--cAccentt));
display: flex;
align-items: center;
}
/* Alerte incohérence */
.saisieAlerte {
width: 100%;
text-align: center;
font: var(--fLabel);
color: var(--cRouge3);
padding-top: 4px;
}
/* ══════════════════════════════════════
INPUT RESULTAT PERSO (points personnalisés)
══════════════════════════════════════ */
/* ── Pointage : un VRAI tableau compact (rang / noms / curseur d'état) ──
Filets fins, pas de cartes empilées ; largeurs fixes = alignement parfait des colonnes.
Le rang est en retrait visuel : l'ordre de tirage n'est pas l'information importante.
Le curseur est le toggle STANDARD (toggleScene*, feuille _toggleScene.css du bundle
écran) : indicateur glissant et tailles de bouton existants, aucun design nouveau. */
.saisieTableauBoite .saisieChamps {
gap: 0;
/* De l'air franc entre les textes du haut (titre, consigne, vivier) et la liste :
au moins une hauteur de caractère (décision du chef de projet, 2026-09-01). */
margin-top: 1.5em;
}
/* Le compteur vivant, à côté du bouton : l'état de la saisie en un chiffre
(écartés du pointage, ajoutés du stock). Largeur figée par le TS (au maximum
possible) + chiffres tabulaires : le passage de 9 à 10 ne déplace rien. */
.saisieCompteurBoite {
font: var(--fLabel);
color: var(--cNoir3);
align-self: center;
margin-right: var(--gapMoyen);
font-variant-numeric: tabular-nums;
}
/* Rangées de tableau des boîtes en mode tableau (pointage, stock) : filets, zébrage,
compacité. Le sélecteur scoped est plus spécifique que la carte de saisie, quelle
que soit leur position dans la feuille — la ligne de tableau gagne toujours. */
.saisieTableauBoite .saisieChamps > .saisieInputPerso {
/* Marge droite plus ample : la colonne de gauche réserve du large (grands
nombres), la colonne de droite ne doit pas paraître collée au bord en face. */
padding: 4px 16px 4px 8px;
background: none;
border-radius: 0;
border-bottom: var(--border);
}
.saisieTableauBoite .saisieChamps > .saisieInputPerso:first-child {
border-top: var(--border);
}
/* Une ligne sur deux en léger gris : on ne se trompe pas de ligne (décision du
chef de projet, 2026-09-01 — le surlignage au survol a été essayé puis retiré).
Compté parmi les rangées seules : la légende du tableau ne décale pas le zébrage. */
.saisieTableauBoite .saisieChamps > .saisieInputPerso:nth-child(even of .saisieInputPerso) {
background: var(--cBlanc02);
}
/* Colonnes du pointage : rang / noms / curseur. */
.saisieInputPerso.saisieInputPointage {
display: grid;
grid-template-columns: 3em minmax(0, 1fr) max-content;
gap: 0 12px;
align-items: center;
}
/* Tableau du stock, à légende : lot / stock / distribués / compteur standard [−] n [+].
Les colonnes s'alignent sur toute la hauteur : c'est le conteneur qui porte la
grille, chaque rangée (légende comprise) s'y inscrit en sous-grille. */
.saisieTableauBoite .saisieChamps:has(> .saisieTableauEntete) {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
column-gap: 12px;
}
.saisieTableauBoite .saisieChamps > .saisieTableauEntete,
.saisieTableauBoite .saisieChamps > .saisieInputPerso.saisieInputNombre {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
/* La carte de base pose un gap qui, sur une sous-grille, écraserait l'écart hérité. */
gap: 0 12px;
align-items: center;
}
/* La légende : les mots des colonnes, une fois pour toutes, en retrait visuel. */
.saisieTableauBoite .saisieChamps > .saisieTableauEntete {
padding: 4px 16px 4px 8px;
font: var(--fLabel);
color: var(--cNoir3);
border-bottom: var(--border);
}
.saisieTableauEntete > div,
.saisieTableauCellule {
text-align: center;
font-variant-numeric: tabular-nums;
}
.saisieTableauEntete > div:first-child {
text-align: left;
}
.saisieTableauCellule {
color: var(--cNoir3);
}
/* Tableau : les textes s'alignent à gauche (la carte de saisie, elle, centre). */
.saisieTableauBoite .saisieJoueurNom,
.saisieTableauBoite .saisiePersoCaption {
text-align: left;
}
/* Sauf sous le titre (consigne, vivier) : centrés, comme sur toutes les boîtes. */
.saisieTableauBoite .saisieFormulaire > .saisiePersoCaption {
text-align: center;
}
.saisiePointageRang {
font: var(--fLabel);
color: var(--cNoir4);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Le seul écart sémantique : « Écarter » sélectionné se lit en rouge. */
.saisiePointageEcarte .toggleSceneBtn.selectionne {
color: var(--cRouge3);
}
/* La ligne écartée (décision du chef de projet, 2026-09-04) : le nom s'estompe, et c'est
tout — il RESTE LISIBLE, c'est quelqu'un qu'on retire, on doit voir qui. Jamais de
rayé : trente et une langues, autant de polices, un trait barré tombe n'importe où
sur certaines écritures. */
.saisiePointageLigneEcartee .saisieJoueurNom {
opacity: .5;
}
.saisieInputPerso {
display: flex;
flex-direction: column;
gap: var(--gapDefaut); /* aligné 6 -> 8px (échelle PO 2026-07-18) */
padding: 12px 16px;
background: var(--cBlanc02);
border-radius: var(--borderR1);
}
.saisiePersoNoms {
display: flex;
gap: var(--gapMoyen);
margin-bottom: 2px;
}
.saisiePersoNoms .saisieJoueurNom {
flex: 1;
text-align: center;
}
.saisiePersoCaption {
font: var(--fLabel);
color: var(--cNoir3);
text-align: center;
}
/* Ligne à 3 colonnes : score/points sur les extérieurs, flèches (ou espace) au centre. */
.saisiePersoLigne {
display: flex;
align-items: center;
gap: var(--gapMoyen);
}
.saisiePersoLigne .saisieScore {
flex: 0 0 60px;
}
.saisiePersoLigne .saisieToggleResultat,
.saisiePersoLigne .saisiePersoGap {
flex: 1;
display: flex;
justify-content: center;
}
/* Flèches en lecture seule : reflètent les points, non cliquables. */
.saisieToggleLectureSeule .saisieToggleBtn {
cursor: default;
display: flex;
align-items: center;
}
.saisieToggleLectureSeule .saisieToggleBtn.saisieToggleActif {
background: var(--couleurCta, var(--cAccent3));
color: var(--couleurCtaTexte, var(--cAccentt));
}
/* ══════════════════════════════════════
POPUP INLINE (positionnement seul)
══════════════════════════════════════ */
.saisiePopup {
position: fixed;
z-index: 1000;
display: flex;
align-items: center;
gap: var(--gapReduit);
padding: 6px 8px;
background: var(--cBlanc1);
border-radius: var(--borderR1);
border: var(--border);
box-shadow: 0 4px 16px var(--cOmbreForte);
}
/* Popup ancrée (au clic sur un élément) : panneau complet + pied liens. */
.saisiePopupAncree {
display: block;
padding: 0;
max-width: 360px;
}
.saisiePopupAncree .saisieFormulaire {
max-width: none;
padding: 12px 16px;
margin: 0;
}
.saisiePopupAncree .saisieChamps {
max-height: 50vh;
margin-bottom: 10px;
}
/* Pied liens (popup au clic) : petits liens « Annuler » / « Valider », pas de gros bouton. */
.saisieLien {
font: var(--fLabel);
cursor: pointer;
text-decoration: underline;
padding: 2px 6px;
}
.saisieLienAnnuler {
color: var(--cNoir3);
}
.saisieLienValider {
color: var(--couleurCta, var(--cAccent3));
font-weight: 600;
}
/* « Valider » grisé tant que la saisie n'est pas complète : visible mais pas cliquable (même
concept que la barre d'actions, grisé jamais masqué). */
.saisieLien.saisieLienDesactive {
color: var(--cNoir4);
cursor: default;
}
/*!*************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/kitSingleton/css/variablesRuntime.css ***!
\*************************************************************************************************************************************************/
/*
* Variables CSS recréées en TypeScript au runtime : le JS les pose par élément via setProperty
* (valeur = base x ratio d'échelle), dans Dimensionneur / VueComposant / Tableau / Matchs / Sondage.
* Déclarées ici en `initial` (= guaranteed-invalid : aucun effet sur le rendu, le var() se comporte
* comme si rien n'était déclaré) uniquement pour que l'IDE les résolve et garde l'inspection
* « unresolved custom property » active contre les vrais typos.
*/
:root {
/* partagées (Dimensionneur, VueComposant) */
--ilotPadding: initial; /* l'espace des cartes : une seule valeur, posée sur la racine (Dimensionneur.espaceCarte) */
--ilotRayon: initial;
--ilotRayonInterne: initial;
--police1: initial;
--police2: initial;
--police3: initial;
/* tableau / classement (Tableau.ts) */
--largeurTableau: initial;
--paddingTableauV: initial;
--paddingTableauH: initial;
/* matchs (Matchs.ts) */
--mGap: initial;
--mNom: initial;
--mCentre: initial;
--paddingLigneV: initial;
--paddingLigneH: initial;
/* sondage (Sondage.ts) */
--pct: initial;
--sondQuestionMb: initial;
--sondLigneGap: initial;
--sondBarreH: initial;
}
/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/salle/kitSingleton/css/carte.css ***!
\**************************************************************************************************************************************/
/**
* Kit CSS — Effets visuels (carte)
*
* Applique via data-effet sur #salleEcran.
* Ajouter .vueCarte sur tout bloc a styliser.
*/
/* ── Variable bordure dérivée (une seule source) ── */
#salleEcran {
--ilotBordure: 1px solid color-mix(in srgb, var(--couleurPrimaire) 30%, transparent);
}
/* ── Classes partagées ── */
.vueTitreCentre {
font-size: var(--police1);
font-family: var(--ffEcran);
font-weight: 700;
text-align: center;
color: var(--couleurPrimaire);
}
/* Scene d'entree commune */
@keyframes vueApparition {
from {
opacity: 0;
transform: translateY(0.75em);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vueAnimer {
animation: vueApparition 150ms ease-out forwards;
}
/* Carte de base. Son cadre est l'espace des cartes de tout l'écran (Dimensionneur.espaceCarte) :
le même sur toutes les cartes, qui ne suit ni la police ni le zoom. */
.vueCarte {
border-radius: var(--ilotRayon);
padding: var(--ilotPadding);
}
/* L'îlot fait main d'une carte (un bloc, pas un tableau du kit) la remplit : aucun vide ne
s'ajoute au cadre d'un côté. Les tableaux du kit, eux, ont la largeur que le kit calcule, et la
carte les enveloppe. */
.vueCarte div.vueTableau {
width: auto;
margin-left: 0;
margin-right: 0;
align-self: stretch;
flex-grow: 1;
}
/* Glacis */
[data-effet="1"] .vueCarte {
background-color: color-mix(in srgb, var(--couleurFond) 30%, transparent);
backdrop-filter: blur(12px);
border: 1px solid var(--couleurFond);
box-shadow: 0 4px 20px var(--cNoir);
}
/* Transparent */
[data-effet="2"] .vueCarte {
background-color: color-mix(in srgb, var(--couleurFond) 70%, transparent);
}
/* Voile */
[data-effet="3"] .vueCarte {
background: linear-gradient(165deg,
color-mix(in srgb, var(--couleurFond) 95%, transparent),
color-mix(in srgb, var(--couleurFond) 40%, transparent));
}
/* Encadre */
[data-effet="4"] .vueCarte {
background-color: var(--couleurFond);
border: 2px solid var(--couleurPrimaire);
}
/* Ombre */
[data-effet="5"] .vueCarte {
background-color: var(--couleurFond);
box-shadow: 0 4px 20px var(--cOmbreForte);
}
/* Popup : ombre portee pour detacher du fond */
.vuePopup {
box-shadow: 0 0 20px 10px var(--cNoir);box-shadow: 0 0 50px 50px var(--cNoir);
}
/* Ilots internes : bordure subtile dans la carte */
[data-effet] .vueCarte .vueTableau,
[data-effet] .vueCarte .vueMatchLigne {
background: var(--couleurFond);
border-radius: var(--ilotRayonInterne);
border: var(--ilotBordure);
}
/* Carte « bande » : la carte sans son cadre, pour une boîte trop basse où le cadre prendrait plus
de place que le contenu (décision chef de projet 2026-09-26). Il ne reste que l'îlot, qui prend
la forme de la carte et garde sa silhouette selon l'effet — l'ombre du glacis et de l'ombré, le
liseré de l'encadré ; le transparent et le voile n'ont que leur cadre, qui disparaît. C'est la
scène qui la choisit (`vueCarte vueBande`), jamais un calcul. */
.vueCarte.vueBande,
[data-effet] .vueCarte.vueBande {
padding: 0;
background: none;
backdrop-filter: none;
border: none;
box-shadow: none;
}
[data-effet] .vueCarte.vueBande .vueTableau {
border-radius: var(--ilotRayon);
}
[data-effet="1"] .vueCarte.vueBande .vueTableau {
box-shadow: 0 4px 20px var(--cNoir);
}
[data-effet="4"] .vueCarte.vueBande .vueTableau {
border: 2px solid var(--couleurPrimaire);
}
[data-effet="5"] .vueCarte.vueBande .vueTableau {
box-shadow: 0 4px 20px var(--cOmbreForte);
}
/* Carte sans ombre : seule l'ombre disparaît, le fond et le cadre de l'effet restent. C'est la
scène (ou le kit) qui la demande, pour un affichage de base qui ne doit pas dominer
(`vueCarte vueSansOmbre`). */
[data-effet] .vueCarte.vueSansOmbre {
box-shadow: none;
}
/* Carte « pastille » : le dessin de la carte à la taille d'une mention (un rang à côté d'un
résultat). Son cadre suit son propre texte, pas l'espace de l'écran, qui la rendrait plus
grosse que ce qu'elle accompagne. C'est le kit qui la demande (`vueCarte vuePastille`). */
.vueCarte.vuePastille {
padding: 0.3em 0.5em;
}
/* Gagnant / Perdant (generique) */
.vueGagnant {
color: var(--couleurPrimaire);
}
.vuePerdant {
font-weight: 200;
opacity: 0.4;
}
/* Pagination */
.vuePagination {
text-align: center;
}
/* Lot display */
.vueLot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.vueLotImageWrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
width: 100%;
}
.vueLotImage {
max-width: min(80%, calc(100vw * 12 / 48));
max-height: min(90%, calc(100vh * 8 / 24));
object-fit: contain;
display: block;
}
/* Badge résultat — participant nommé ou numéro tombola */
@keyframes vueBadgeResultatPop {
0% { opacity: 0; transform: scale(0.2) rotate(-6deg); }
60% { opacity: 1; transform: scale(1.1) rotate(1deg); }
80% { transform: scale(0.96); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes vueBadgeResultatFlash {
0% {
box-shadow:
inset 6px 6px 18px 18px #FFB3C188,
inset -6px 6px 18px 18px #B3D9FF88,
inset 6px -6px 18px 18px #B3FFB388,
inset -6px -6px 18px 18px #FFF3B388;
}
100% { box-shadow: inset 0 0 0 0 transparent; }
}
.vueBadgeResultat.vueAnimer {
/* Le pop garde `forwards` (il fige l'échelle et l'opacité d'arrivée), le flash NON — et
c'est volontaire. Le flash pilote `box-shadow` ; avec `forwards`, sa dernière image
restait figée tant que `.vueAnimer` était posée, et la classe reste sur le dernier
résultat sorti (les kits ne la retirent qu'à l'arrivée du suivant, parfois jamais).
Le flash ne doit donc rien laisser derrière lui : il rend `box-shadow` au badge à la
fin des 700 ms, la synchronisation est portée par l'animation et non par le
JavaScript, et un oubli de retrait de classe n'a plus aucun effet visible. */
animation: vueBadgeResultatPop 550ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
vueBadgeResultatFlash 700ms ease-out;
}
.vueBadgeResultat {
font-size: var(--police1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* Accroches d'habillage (docs/architecture/habillage.md) : chaque fallback est le
défaut historique ; --habCouleurResultat est publiée en inline par VueKit. */
padding: var(--habPadding, 0.5em 1em);
border: var(--habBordure, 1px solid transparent);
border-radius: var(--habForme, var(--ilotRayonInterne));
/* PAS d'ombre : le badge résultat n'endosse pas --habOmbre (décision chef de projet
2026-09-04). L'ombre ne venait que d'un habillage, le flap, où elle sertissait le
panneau ; elle coûtait plus qu'elle ne rendait — le flash d'apparition pilote lui
aussi `box-shadow`, et toute ombre de fond devenait une valeur à restituer à la fin
de l'animation, donc une synchronisation de plus à tenir. Le badge est plat, posé sur
le fond : sa silhouette tient à la bordure, à la forme et à l'outline. */
font-family: var(--habPolice, inherit);
background: var(--habCouleurResultat, var(--habFond, var(--couleurFond)));
outline: 1px solid var(--cNoir);
outline-offset: -1px;
/* PAS de `overflow: hidden` : un résultat amputé est pire qu'un résultat qui dépasse
(décision chef de projet 2026-08-28). Le calibrage de police est là pour que le texte
tienne ; s'il se trompe de quelques pour cent, on veut le voir déborder, pas
disparaître. Le trait et le label de l'animation « Annulé » sont posés en inset: 0,
ils n'ont jamais eu besoin du clipping. */
width: 100%;
max-width: 100%;
min-height: 2.2em;
flex-shrink: 0;
/* Ancre des états posés DANS le badge (rang, tampon — kitPlugin/CLAUDE.md, « Kits d'affichage »).
Sans décalage, donc sans effet sur la mise en page ; un kit qui positionne ses badges
en absolu (GagnantKit) continue de le faire en inline, qui prime. */
position: relative;
}
.vueBadgeResultatVide {
/* Futur résultat : l'habillage ne s'applique qu'au tiré. Un badge vide ne porte ni fond ni
bordure d'habillage, seule la forme reste pour annoncer la silhouette — et son contour est
CELUI des badges pleins, pas un trait pâle : une place à prendre se voit comme une place
prise (décision PO 2026-09-11, qui remplace le trait discret du 2026-08-25). La bordure
garde sa largeur en transparent pour que le badge ne change pas de taille en se
remplissant. Rien à annuler côté ombre : le badge résultat n'en porte plus du tout. */
background: #00000005;
border-color: transparent;
}
/* Place ouverte : ce qui vient PEUT arriver ici. Le badge vide s'allume, sous tout habillage —
c'est une information de jeu, pas un décor : la question « où puis-je aller ? » se lit sur les
cartes (décision PO 2026-09-10, répartition en équipes). Dans la couleur de la carte quand
elle en a une (celle de l'équipe : la place a déjà la couleur que le nom prendra), en blanc uni
sinon. Posé par le kit à liste sur sa première place libre, option `ouvert` de `mettreAJour`. */
.vueBadgeResultatVide.vueBadgeResultatOuvert {
background: var(--habCouleurResultat, var(--cBlanc));
}
.vueBadgeResultatNom {
position: relative;
z-index: 1;
/* Sans effet à largeur naturelle ; un texte ajusté dans sa hauteur (au-delà du plafond de
signes, kitPlugin/CLAUDE.md, « Kits d'affichage ») prend toute la largeur et doit rester centré. */
text-align: center;
/* Ni `max-width: 100%`, ni `overflow: hidden`, ni `text-overflow: ellipsis`.
L'ellipsis coûtait BEAUCOUP plus que le débordement qu'elle prétendait masquer :
pour cacher 5 % de trop-plein, le navigateur doit retirer assez de caractères pour
loger le « … » lui-même — sur un numéro monospacé espacé (0.3em), cela faisait
« AF-082 » → « AF-0… », un tiers du résultat perdu. Le texte garde donc sa largeur
naturelle et reste centré par le flex parent : s'il déborde, il déborde des deux
côtés, lisiblement (décision chef de projet 2026-08-28). */
font-weight: 700;
color: var(--habCouleurResultatTexte, var(--habTexte, var(--cNoir)));
text-align: center;
white-space: nowrap;
}
@keyframes vueBadgeResultatEcarter {
0% { letter-spacing: 0; text-indent: 0; }
100% { letter-spacing: var(--habInterlettrageChiffres, 0.2em); text-indent: var(--habInterlettrageChiffres, 0.2em); }
}
.vueBadgeResultatNomChiffres {
/* text-indent = letter-spacing : l'espacement s'applique aussi APRÈS le dernier
chiffre et décale le centrage vers la gauche ; l'indent rajoute l'équivalent
devant pour rééquilibrer (même parade que les volets du flap).
text-indent et NON padding-left : un habillage peut poser la même compensation sur
le badge (`.habFlap .habElement { text-indent: 0.3em }`), et le span en hérite. Avec
deux propriétés différentes les deux s'additionnaient — 0.6em de décalage pour 0.3em
d'espacement en trop, le texte poussé à droite et coupé. Avec la même propriété, la
déclaration du span REMPLACE la valeur héritée : la compensation vaut l'espacement, une
seule fois, avec ou sans habillage.
L'espacement lui-même est un axe du contrat d'habillage (--habInterlettrageChiffres,
docs/architecture/habillage.md) : 0.2em sans habillage, la roue et la roulette le
resserrent, le flap l'aligne sur ses volets. Décision chef de projet 2026-09-06 :
les chiffres s'écartent partout, chaque habillage règle de combien. */
letter-spacing: var(--habInterlettrageChiffres, 0.2em);
text-indent: var(--habInterlettrageChiffres, 0.2em);
}
.vueBadgeResultat.vueAnimer .vueBadgeResultatNomChiffres {
animation: vueBadgeResultatEcarter 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
}
.vueBadgeResultatNumero {
position: relative;
z-index: 1;
font-size: 0.75em;
font-weight: 400;
color: var(--habCouleurResultatTexte, var(--habTexte, var(--cNoir)));
opacity: 0.7;
text-align: center;
}
/* ── États du badge posés par les kits (décision chef de projet 2026-09-10,
kitPlugin/CLAUDE.md, « Kits d'affichage »). Le rang et le tampon sont des états du badge, dans le
socle, à côté de lui : plus de copie par kit. Posés par VueKit.poserRangBadgeResultat et
VueKit.tamponnerBadgeResultat. Le socle porte le comportement par défaut ; un kit qui en
veut un autre pose sa propre classe par-dessus. ── */
/* Rang du tirage (#N), coin haut-gauche du badge. La moitié de la police du badge, sans plancher
en pixels — le rang suit la police, comme le nom, et rien d'autre —, et une pastille qui suit la
police aussi (décision PO 2026-09-11 — à 25 % et 11 px de plancher, il ne se lisait pas). */
.vueBadgeResultatRang {
position: absolute;
z-index: 2;
top: 0;
left: 0;
font-size: 50%;
line-height: 1;
letter-spacing: 0;
text-indent: 0;
padding: 0.15em 0.35em;
border-radius: 0 0 0.4em;
background: var(--cNoir);
color: var(--cBlanc);
pointer-events: none;
}
.vueBadgeResultatRang > span {
color: var(--cNoir4);
}
/* Tampon (annulation) — 8 s au total, durée reprise par VueKit.tamponnerBadgeResultat.
PRINCIPE : le résultat reste 100 % lisible, aucun overlay ne le couvre. Un trait oblique se
dessine sur le badge, une étiquette paraît dans le coin, le badge sort en glissant.
Timeline : 0 → 0.2 s délai ; 0.2 → 1 s le trait se dessine de gauche à droite ;
1 → 1.4 s l'étiquette paraît (ressort) ; 1.4 → 6.5 s tenue ; 6.5 → 8 s sortie glissée + fondu.
Le texte de l'étiquette vient de --vueBadgeTamponTexte (rendu via `content:`) : autre chose
qu'« Annulé » est possible. Trait (inset: 0) et étiquette (top/right) sont posés DANS le
badge : ils n'ont jamais eu besoin d'un overflow: hidden, qui aurait recoupé le résultat.
Sélecteur à une classe, comme les anciens .gaKitBadgeAnnule / .lgKitBadgeAnnule : un badge
qui porte encore .vueAnimer garde l'animation d'apparition (plus spécifique) et ne joue pas
la sortie — comportement constant, signalé au chef de projet à l'étape 0. */
.vueBadgeResultatTampon {
animation: vueBadgeResultatTamponSortie 1.5s cubic-bezier(0.55, 0, 0.45, 1) 6.5s forwards;
}
/* Trait oblique d'un coin à l'autre, quel que soit le ratio : SVG inline étiré par
preserveAspectRatio="none", trait gardé à 4px par vector-effect="non-scaling-stroke",
« dessiné » par un clip-path qui s'ouvre de gauche à droite. */
.vueBadgeResultatTampon::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;charset=UTF-8,