/* ======================================================================
   XINERGI Storming dans le design system de XINERGI (lot 1 de la refonte, 7 octobre 2026)
   Chargée après styles.css sur toutes les pages. Les jetons de XINERGI d'abord, puis l'enveloppe
   de l'animateur (barre latérale et en-tête de la Finance), les composants, la console, l'écran
   de la salle et le téléphone des participants. La couleur de Storming est celle de sa tuile du
   Bureau (violet vers rose) : sobre chez l'animateur, franche dans la salle.
   ====================================================================== */

:root {
  /* Les noms de styles.css, avec les valeurs de XINERGI. */
  --violet: #7C3AED;
  --violet-fonce: #6d28d9;
  --rose: #E8408F;
  --sombre: #0a0a0a;
  --clair: #f9fafb;
  --blanc: #ffffff;
  --texte: #0a0a0a;
  --texte-doux: #737373;
  --bordure: #e5e5e5;
  --vert: #10b981;
  --rouge: #e11d48;
  --rayon: 16px;
  --ombre: none;

  /* Les jetons de XINERGI (xinergi-organization-front, globals.css). */
  --primaire: #171717;
  --primaire-survol: #262626;
  --discret: #f5f5f5;
  --texte-moyen: #404040;
  --succes: #10b981; --succes-fond: #ecfdf5; --succes-texte: #047857;
  --alerte: #d97706; --alerte-fond: #fffbeb; --alerte-texte: #b45309;
  --danger: #e11d48; --danger-fond: #fff1f2; --danger-texte: #be123c;
  --info: #6366f1; --info-fond: #eef2ff; --info-texte: #4338ca;

  /* Storming : sa tuile du Bureau, et une palette pour distinguer les réponses (teintes des modules). */
  --storming: #7C3AED;
  --storming-fond: #f5f3ff;
  --storming-texte: #6d28d9;
  --degrade-storming: linear-gradient(135deg, #7C3AED 0%, #E8408F 100%);
  --rep-1: #7C3AED; --rep-2: #0D9488; --rep-3: #D97706; --rep-4: #2563EB; --rep-5: #E8408F; --rep-6: #0284C7;

  --police: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-chiffres: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --largeur-barre: 222px;
}

body { font-family: var(--police); font-size: 14px; background: var(--clair); color: var(--texte); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--texte); }
.mono, .num, #code, .code-seance b, .minuteur, .minuteur-ecran { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* ---------- La marque : le carré S aux couleurs de la tuile du Bureau ---------- */
.marque { gap: 8px; letter-spacing: 0; }
.marque .logo { width: 28px; height: 28px; border-radius: 6px; background: var(--degrade-storming); font-size: 13px; font-weight: 700; }
.marque .nom { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; line-height: 1; }
.marque .nom span { color: var(--texte-doux); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }

/* ---------- Les composants communs ---------- */
.carte { border: 1px solid var(--bordure); box-shadow: none; border-radius: 16px; }
.bouton {
  height: 36px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--blanc);
  color: var(--texte); font-size: 13px; font-weight: 600; justify-content: center; white-space: nowrap; line-height: 1;
}
.bouton:hover { border-color: var(--bordure); background: var(--discret); }
.bouton.accent { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.bouton.accent:hover { background: var(--primaire-survol); }
.bouton.rose { background: var(--blanc); border-color: var(--bordure); color: var(--texte); }
.bouton.rose:hover { background: var(--discret); }
.bouton.danger { border-color: transparent; background: transparent; color: var(--danger-texte); }
.bouton.danger:hover { background: var(--danger-fond); }
.bouton.petit { height: 32px; padding: 0 10px; font-size: 12.5px; }
.bouton .touche, .touche {
  font-family: var(--police-chiffres); font-size: 11px; font-weight: 500; color: var(--texte-doux);
  border: 1px solid var(--bordure); background: var(--blanc); border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.bouton.accent .touche { background: #2a2a2a; border-color: #3a3a3a; color: #d4d4d4; }

.statut { font-weight: 600; padding: 0 8px; height: 22px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.statut.a_venir { background: var(--discret); color: var(--texte-moyen); }
.statut.ouverte { background: var(--succes-fond); color: var(--succes-texte); }
.statut.ouverte::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--succes); }
.statut.fermee { background: var(--discret); color: var(--texte-moyen); }
.statut.a-l-ecran { background: var(--storming-fond); color: var(--storming-texte); }
.jeton { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--discret); color: var(--texte-moyen); font-size: 12px; font-weight: 500; }

/* Les listes déroulantes et les champs de l'animateur : 36 px, bordure fine, chevron dessiné. */
.app select, .ecran select {
  -webkit-appearance: none; appearance: none; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--bordure);
  border-radius: 8px; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px; font-weight: 500; color: var(--texte); cursor: pointer;
}
.app input[type="text"], .app input[type="email"], .app input[type="number"], .app input[type="search"], .app input:not([type]), .app textarea {
  border: 1px solid var(--bordure); border-radius: 8px; font-size: 14px;
}
.app input:focus, .app textarea:focus, .app select:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(23, 23, 23, .08); }

.message { background: var(--primaire); border-radius: 8px; font-size: 13px; font-weight: 500; }
.message.echec { background: var(--danger-texte); }
.fenetre { border: 1px solid var(--bordure); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .18); }
.fenetre::backdrop { background: rgba(10, 10, 10, .45); }

/* ======================================================================
   L'enveloppe de l'animateur : la barre latérale et l'en-tête de la Finance
   ====================================================================== */
body.app { max-width: none; margin: 0; padding: 0 24px 48px calc(var(--largeur-barre) + 24px); box-sizing: border-box; }
.barre-xs {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; width: var(--largeur-barre); box-sizing: border-box;
  background: var(--clair); border-right: 1px solid var(--bordure); display: flex; flex-direction: column;
}
.barre-xs .marque { height: 56px; padding: 0 16px; border-bottom: 1px solid var(--bordure); box-sizing: border-box; text-decoration: none; color: var(--texte); }
.barre-xs nav { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.barre-xs .section { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); padding: 10px 10px 4px; }
.lien-xs {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: 8px;
  color: var(--texte); font-size: 12.5px; font-weight: 600; text-decoration: none; background: transparent; border: 0; width: 100%; box-sizing: border-box; cursor: pointer;
}
.lien-xs:hover { background: #f0f0f0; }
.lien-xs[aria-current="page"] { background: var(--primaire); color: #fff; }
.lien-xs svg { flex: none; }
.barre-xs .pied-xs { border-top: 1px solid var(--bordure); padding: 8px; }
.barre-xs .pied-xs form { margin: 0; }
.barre-xs .pied-xs .lien-xs { color: var(--texte-doux); }
.barre-xs .pied-xs .lien-xs:hover { background: var(--danger-fond); color: var(--danger-texte); }

.en-tete-app {
  position: sticky; top: 0; z-index: 30; height: 56px; margin: 0 -24px 20px; padding: 0 24px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; background: var(--blanc); border-bottom: 1px solid var(--bordure);
}
.en-tete-app .menu-xs { display: none; }
.en-tete-app .recherche-xs {
  display: flex; align-items: center; gap: 8px; height: 36px; min-width: 260px; padding: 0 12px; border-radius: 8px;
  background: var(--discret); color: var(--texte-doux); font-size: 14px; text-decoration: none;
}
.en-tete-app .espace { flex: 1; }
.en-tete-app .ajouter-xs { position: relative; }
.en-tete-app .ajouter-xs summary { list-style: none; }
.en-tete-app .ajouter-xs summary::-webkit-details-marker { display: none; }
.en-tete-app .ajouter-xs .menu-ajouter {
  position: absolute; right: 0; top: 42px; min-width: 220px; padding: 4px; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); display: flex; flex-direction: column;
}
.en-tete-app .ajouter-xs .menu-ajouter a { padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--texte); }
.en-tete-app .ajouter-xs .menu-ajouter a:hover { background: var(--discret); }
.en-tete-app .qui-xs { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--bordure); height: 36px; }
.en-tete-app .qui-xs .avatar { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.en-tete-app .qui-xs .lignes { line-height: 1.2; min-width: 0; }
.en-tete-app .qui-xs .lignes b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.en-tete-app .qui-xs .lignes small { display: block; font-size: 12px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.voile-xs { display: none; }

@media (max-width: 900px) {
  body.app { padding: 0 16px 40px; }
  .barre-xs { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  body.menu-ouvert .barre-xs { transform: none; }
  body.menu-ouvert .voile-xs { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(10, 10, 10, .4); }
  .en-tete-app { margin: 0 -16px 16px; padding: 0 12px; gap: 8px; }
  .en-tete-app .menu-xs { display: inline-flex; }
  .en-tete-app .recherche-xs { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .en-tete-app .recherche-xs span, .en-tete-app .recherche-xs .touche { display: none; }
  .en-tete-app .qui-xs .lignes { display: none; }
  .en-tete-app .ajouter-xs .libelle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .barre-xs { transition: none; } }

/* Le fil d'Ariane : gris, sans soulignement, séparé par un chevron. */
.fil { font-size: 13px; color: var(--texte-doux); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--texte); }
.fil .chevron { color: #a3a3a3; }
.titre-page { font-size: 20px; font-weight: 700; }
.app h1 { font-weight: 700; }

/* ======================================================================
   La console d'une séance
   ====================================================================== */
.tete-seance { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-bottom: 16px; }
.tete-seance .titre { flex: 1 1 360px; min-width: 0; }
.tete-seance h1 { margin: 0; font-size: 20px; font-weight: 700; display: inline; }
.tete-seance .statut { margin-left: 10px; vertical-align: 3px; }
.tete-seance .reglages-seance { margin-top: 8px; }
.tete-seance .actions-tete { display: flex; flex-wrap: wrap; gap: 8px; }
.bouton.projeter { gap: 8px; }

.bandeau-seance { border: 1px solid var(--bordure); box-shadow: none; border-radius: 16px; padding: 0; gap: 0; align-items: stretch; }
.bandeau-seance > * { padding: 16px 20px; }
.bandeau-seance .code-bloc { flex: 1 1 300px; flex-direction: row; align-items: center; gap: 16px; border-right: 1px solid #f0f0f0; }
.bandeau-seance .qr-mini { width: 64px; height: 64px; flex: none; padding: 4px; border: 1px solid var(--bordure); border-radius: 8px; box-sizing: border-box; background: #fff; }
.bandeau-seance .qr-mini img { display: block; width: 100%; height: 100%; }
.bandeau-seance .code-bloc small, .bandeau-seance .chiffres small, .etiquette {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux);
}
.bandeau-seance #code { display: block; font-size: 30px; font-weight: 600; letter-spacing: .04em; line-height: 1.15; color: var(--texte); }
.bandeau-seance #adresse { display: block; font-size: 12.5px; color: var(--texte-doux); }
.bandeau-seance .chiffres { flex: 0 1 160px; display: flex; }
.bandeau-seance .chiffres > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.bandeau-seance .chiffres b { font-family: var(--police-chiffres); font-size: 28px; font-weight: 600; color: var(--texte); }

.reglages-seance { display: flex; flex-wrap: wrap; gap: 6px; }
.connectes-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; margin: 12px 0 16px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; }
.barre-actions .bouton:not(.accent):not(.danger) { border-color: transparent; background: transparent; }
.barre-actions .bouton:not(.accent):not(.danger):hover { background: var(--discret); }
.barre-actions #terminer { margin-left: auto; }
.raccourcis-console { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -6px 0 16px; padding: 0 4px; font-size: 12px; color: var(--texte-doux); }

.activite-carte { border-left: 1px solid var(--bordure); }
.activite-carte.ouverte { border-left: 1px solid var(--bordure); box-shadow: inset 4px 0 0 var(--succes); }
.activite-carte.fermee { border-left: 1px solid var(--bordure); }
.activite-carte h2 { font-size: 16px; font-weight: 700; }
.activite-carte .meta { font-size: 13px; }
.activite-carte summary { color: var(--texte); font-weight: 600; }
.pilotage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.console .barre .plein, .rapport-page .barre .plein { background: var(--storming); }
.console .barre.gagnant .plein, .rapport-page .barre.gagnant .plein { background: var(--storming); }
.console .echelle-ligne .moyenne, .console .nombre-ligne .mediane { color: var(--storming-texte); }
.console .mini div { background: rgba(124, 58, 237, .3); }
.console .phrase { border-left-color: var(--storming); background: var(--discret); }

/* La télécommande : sur un téléphone, la console garde ses gestes en grand, l'ordinateur projette. */
@media (max-width: 640px) {
  .tete-seance .actions-tete { width: 100%; }
  .tete-seance .actions-tete .bouton { flex: 1; }
  .bandeau-seance .code-bloc { border-right: 0; border-bottom: 1px solid #f0f0f0; }
  .bandeau-seance #code { font-size: 26px; }
  .raccourcis-console { display: none; }
  .barre-actions #suivante, .barre-actions #ouvrir-maintenant { width: 100%; height: 56px; font-size: 15px; }
  .activite-carte .pilotage .bouton, .activite-carte .actions .bouton { min-height: 48px; }
  .activite-carte [data-action="ouvrir"], .activite-carte [data-action="fermer"] { flex: 1 1 100%; height: 52px; font-size: 15px; }
  .activite-carte [data-action="question"].accent { flex: 1 1 100%; height: 52px; font-size: 15px; }
}

/* Les cibles de l'animateur sur un téléphone (13 octobre 2026). Les contrôles font 36 px sur un écran
   d'ordinateur, où la souris vise juste. Sur un téléphone, le doigt demande davantage : la carte d'activité
   montait déjà ses boutons à 48 px, les autres suivent à 44 px, comme le recommande le WCAG (2.5.5).
   Les cibles du participant restent à 48 px et plus, inchangées. */
@media (max-width: 640px) {
  body.console .bouton, body.console select, body.console .filtre,
  body.console input[type=search], body.console .champ-recherche input,
  body.console .onglets-app button, body.console .onglets-modeles button,
  body.console .file-onglets button { min-height: 44px; }
  body.console .bouton.icone, body.console .barre-xs .lien-xs { min-height: 44px; }
  body.console .bouton.icone { min-width: 44px; }
  body.console .en-tete-app .menu-xs { min-width: 44px; min-height: 44px; }
}

/* ======================================================================
   L'écran de la salle : clair par défaut, sombre au choix, lisible du fond de la salle
   ====================================================================== */
.ecran {
  --e-fond: #ffffff; --e-texte: #0a0a0a; --e-doux: #404040; --e-carte: #f5f5f5; --e-piste: #f0f0f0; --e-ligne: #e5e5e5; --e-trait: #d4d4d4;
  --echelle: 1;
  background: var(--e-fond); color: var(--e-texte); font-family: var(--police);
  grid-template-columns: 560px 1fr; position: relative;
}
.ecran.theme-sombre { --e-fond: #0a0a0a; --e-texte: #fafafa; --e-doux: #d4d4d4; --e-carte: #1f1f1f; --e-piste: #262626; --e-ligne: #2e2e2e; --e-trait: #404040; }
.ecran::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 8px; background: var(--degrade-storming); z-index: 3; }
.ecran .entete { padding: 32px 48px 0; }
.ecran .marque .logo { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
.ecran .marque .nom { font-size: 18px; }
.ecran .marque .nom span { font-size: 12px; color: var(--e-doux); }
.ecran .entete .seance { color: var(--e-doux); font-size: 20px; font-weight: 600; }
.ecran .gauche { padding: 32px 48px 40px; gap: 20px; }
.ecran .qr { width: 460px; height: 460px; padding: 8px; border-radius: 32px; background: var(--degrade-storming); box-shadow: none; box-sizing: border-box; }
.ecran .qr img { background: #fff; border-radius: 26px; padding: 22px; box-sizing: border-box; }
.ecran .adresse { font-size: calc(30px * var(--echelle)); font-weight: 700; color: var(--e-texte); }
.ecran .adresse small { font-size: calc(20px * var(--echelle)); font-weight: 500; color: var(--e-doux); margin-bottom: 4px; }
.ecran .adresse .code-seance { display: inline-flex; flex-direction: column; align-items: center; margin-top: 16px; padding: 14px 28px 18px; border-radius: 24px; background: var(--e-carte); font-size: calc(16px * var(--echelle)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--e-doux); }
.ecran .adresse .code-seance b { font-size: calc(96px * var(--echelle)); font-weight: 600; letter-spacing: .05em; line-height: 1; color: var(--e-texte); text-transform: none; }
.ecran .connectes { background: var(--e-carte); font-size: calc(20px * var(--echelle)); font-weight: 600; padding: 12px 22px; color: var(--e-texte); }
.ecran .connectes b { font-family: var(--police-chiffres); font-size: calc(30px * var(--echelle)); color: var(--e-texte); }
.ecran .connectes .point { background: var(--succes); }
.ecran .droite { padding: 32px 48px 40px 16px; }
.ecran .titre-activite { font-size: calc(48px * var(--echelle)); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.ecran .sous-titre { color: var(--e-doux); font-size: calc(22px * var(--echelle)); }
.ecran .sous-titre b { color: var(--e-texte); font-family: var(--police-chiffres); font-weight: 600; }
.ecran .pastille { background: var(--succes-fond); color: var(--succes-texte); font-size: calc(18px * var(--echelle)); padding: 6px 16px; }
.ecran .pastille.fermee { background: var(--e-carte); color: var(--e-doux); }
.ecran .pastille.a-venir { background: var(--alerte-fond); color: var(--alerte-texte); }
.ecran .vide h2 { font-size: calc(56px * var(--echelle)); font-weight: 800; }
.ecran .vide p { font-size: calc(26px * var(--echelle)); color: var(--e-doux); }
.ecran .masque .grand { font-family: var(--police-chiffres); background: var(--degrade-storming); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ecran .masque p { color: var(--e-doux); font-size: calc(26px * var(--echelle)); }
.ecran .plein-ecran { border-color: var(--e-trait); color: var(--e-texte); font-weight: 600; }
.ecran .plein-ecran:hover { background: var(--e-carte); }

/* Pendant le vote : le code et le QR passent en haut à droite, mais restent lisibles des retardataires. */
.ecran.avec-activite .gauche {
  top: 88px; right: 40px; bottom: auto; flex-direction: row; align-items: center; gap: 18px; padding: 14px 20px 14px 14px;
  background: var(--e-carte); border-radius: 20px;
}
.ecran.avec-activite .qr { width: 150px; height: 150px; padding: 4px; border-radius: 14px; }
.ecran.avec-activite .qr img { border-radius: 10px; padding: 6px; }
.ecran.avec-activite .adresse { font-size: calc(20px * var(--echelle)); text-align: left; }
.ecran.avec-activite .adresse small { font-size: calc(15px * var(--echelle)); }
.ecran.avec-activite .adresse .code-seance { margin-top: 6px; padding: 0; background: transparent; align-items: flex-start; font-size: calc(14px * var(--echelle)); }
.ecran.avec-activite .adresse .code-seance b { font-size: calc(56px * var(--echelle)); }
.ecran.avec-activite .connectes { display: none; }
.ecran.avec-activite .droite { padding: 24px 560px 40px 48px; }
.ecran.avec-activite .titre-activite { font-size: calc(44px * var(--echelle)); }

/* Les résultats : une couleur par réponse, la piste en gris clair, les chiffres en Roboto. */
.ecran .resultat h3 { font-size: calc(30px * var(--echelle)); font-weight: 700; }
.ecran .barre { margin-bottom: 18px; }
.ecran .barre .libelle { font-size: calc(30px * var(--echelle)); font-weight: 600; }
.ecran .barre .valeur { font-family: var(--police-chiffres); font-size: calc(32px * var(--echelle)); font-weight: 600; }
.ecran .barre .fond { height: 22px; border-radius: 10px; background: var(--e-piste); }
.ecran .barre .plein { border-radius: 10px; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.ecran .barre:nth-of-type(6n+1) .plein { background: var(--rep-1); }
.ecran .barre:nth-of-type(6n+2) .plein { background: var(--rep-2); }
.ecran .barre:nth-of-type(6n+3) .plein { background: var(--rep-3); }
.ecran .barre:nth-of-type(6n+4) .plein { background: var(--rep-4); }
.ecran .barre:nth-of-type(6n+5) .plein { background: var(--rep-5); }
.ecran .barre:nth-of-type(6n) .plein { background: var(--rep-6); }
.ecran .echelle-ligne, .ecran .nombre-ligne { border-bottom-color: var(--e-ligne); }
.ecran .echelle-ligne .moyenne, .ecran .nombre-ligne .mediane { font-family: var(--police-chiffres); font-weight: 600; color: var(--storming); }
.ecran .mini div { background: rgba(124, 58, 237, .45); }
.ecran .phrase { background: var(--e-carte); border-left: 0; box-shadow: inset 4px 0 0 var(--storming); color: var(--e-texte); }
.ecran .ouinon-resultat div { background: var(--e-carte); }
.ecran .ouinon-resultat .oui b { color: var(--succes); }
.ecran .ouinon-resultat .non b { color: var(--danger); }
.ecran .resultats-grille .resultat h3 { font-size: calc(24px * var(--echelle)); }

/* Le diaporama et les vues animées, sur le fond clair ou sombre. */
.diapo-nav { color: var(--e-doux); font-size: calc(18px * var(--echelle)); }
.diapo-nav .compteur { color: var(--e-texte); font-size: calc(20px * var(--echelle)); }
.diapo-nav .points i { background: var(--e-trait); }
.diapo-nav .points i.actif { background: var(--storming); }
.ecran .diapo-titre { font-size: calc(40px * var(--echelle)); font-weight: 800; }
.billes-entete { color: var(--e-doux); border-bottom-color: var(--e-ligne); }
.billes-ligne { border-bottom-color: var(--e-ligne); }
.billes-ligne .libelle { font-size: calc(26px * var(--echelle)); }
.case-billes { background: var(--e-carte); }
.bille-0 { background: var(--rep-1); } .bille-1 { background: var(--rep-2); } .bille-2 { background: var(--rep-3); } .bille-3 { background: var(--rep-4); }
.billes-ligne .moyenne b { font-family: var(--police-chiffres); font-weight: 600; color: var(--storming); }
.etoiles-fond { color: var(--e-trait); }
.etoiles-plein { color: #F59E0B; }
.reglette-echelle, .salle-dit { color: var(--e-doux); }
.reglette-ligne { border-bottom-color: var(--e-ligne); }
.salle-dit b { color: var(--storming); font-family: var(--police-chiffres); }
.reglette { background: var(--e-piste); }
.reglette .bande { background: linear-gradient(90deg, rgba(124, 58, 237, .55), rgba(232, 64, 143, .55)); }
.reglette .mediane-trait { background: var(--e-texte); box-shadow: none; }
.reglette .point { background: #F59E0B; border-color: var(--e-fond); }
.postit { color: #0a0a0a; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.nuage-cadre { background: var(--e-carte); }
.nuage-titre, .file-titre { color: var(--e-doux); }
.nuage .mot { color: var(--rep-1); }
.nuage .mot:nth-child(5n+2) { color: var(--rep-2); }
.nuage .mot:nth-child(5n+3) { color: var(--rep-3); }
.nuage .mot:nth-child(5n+4) { color: var(--rep-4); }
.nuage .mot:nth-child(5n) { color: var(--rep-5); }
.anneau .fond { stroke: var(--e-piste); }
.anneau .plein { stroke: var(--storming); }
.anneau .pourcent { color: var(--storming); font-family: var(--police-chiffres); font-weight: 600; }
.anneau .detail { color: var(--e-doux); }
.pastille-prenom { background: var(--storming-fond); border-color: rgba(124, 58, 237, .45); color: var(--storming-texte); }
.ecran.theme-sombre .pastille-prenom { background: rgba(124, 58, 237, .22); color: #ddd6fe; }

/* Les réglages de l'écran : la taille du texte, le thème et le plein écran, qui s'effacent seuls. */
.reglages-ecran {
  position: fixed; right: 24px; bottom: 24px; z-index: 5; display: flex; gap: 8px; padding: 8px; border-radius: 14px;
  background: var(--e-fond); border: 1px solid var(--e-ligne); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.ecran.reglages-visibles .reglages-ecran { opacity: 1; pointer-events: auto; }
.reglages-ecran button {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--e-trait); background: transparent;
  color: var(--e-texte); font-size: 15px; font-weight: 600; cursor: pointer;
}
.reglages-ecran button:hover { background: var(--e-carte); }
.ecran.avec-activite .entete-droite .plein-ecran { display: none; }
@media (prefers-reduced-motion: reduce) { .reglages-ecran, .ecran .barre .plein { transition: none; } }

/* Le quiz : chaque réponse a sa couleur et son numéro ; la bonne réponse se révèle en vert. */
.ecran .podium .marche.premiere .socle { background: var(--degrade-storming); color: #fff; }
.ecran .podium .marche .socle { background: var(--storming-fond); color: var(--storming-texte); }
.ecran.theme-sombre .podium .marche .socle { background: rgba(124, 58, 237, .25); color: #ddd6fe; }
.ecran .podium .nom, .ecran .podium .points { color: var(--e-texte); }

@media (max-width: 1500px) {
  .ecran { grid-template-columns: 440px 1fr; }
  .ecran .qr { width: 360px; height: 360px; }
  .ecran .adresse .code-seance b { font-size: calc(72px * var(--echelle)); }
  .ecran.avec-activite .droite { padding-right: 500px; }
}
@media (max-width: 900px) {
  .ecran { grid-template-columns: 1fr; }
  .ecran .qr { width: 300px; height: 300px; }
  .ecran.avec-activite .gauche { position: static; margin: 16px 20px 0; }
  .ecran.avec-activite .droite { padding: 16px 20px 30px; }
}

/* ======================================================================
   Le téléphone des participants : la couleur de Storming, des cibles de 48 px et plus
   ====================================================================== */
.participant { background: var(--clair); }
.participant > header { background: var(--blanc); margin: -16px -16px 16px; padding: 10px 16px; border-bottom: 1px solid var(--bordure); }
.participant .marque .logo { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.participant .seance { font-size: 13px; font-weight: 600; color: var(--texte-moyen); }
.participant .carte { padding: 18px 16px; }
.participant .carte h1 { font-size: 22px; font-weight: 800; }
.participant .consigne { color: var(--texte-moyen); font-size: 15px; line-height: 1.5; }
.participant .question h2 { font-size: 18px; font-weight: 700; }
.participant .option { border: 1px solid #d4d4d4; border-radius: 12px; min-height: 56px; font-size: 16px; }
.participant .option .numero { background: var(--storming-fond); color: var(--storming-texte); font-family: var(--police-chiffres); }
.participant .option[aria-pressed="true"] { border-color: var(--storming); background: var(--storming-fond); box-shadow: 0 0 0 1px var(--storming); }
.participant .option[aria-pressed="true"] .numero { background: var(--storming); color: #fff; }
.participant .notes button { border: 1px solid #d4d4d4; height: 48px; font-family: var(--police-chiffres); font-size: 17px; }
.participant .notes button[aria-pressed="true"], .participant .ouinon button[aria-pressed="true"] { background: var(--storming); border-color: var(--storming); color: #fff; }
.participant .ouinon button { border: 1px solid #d4d4d4; }
.participant textarea, .participant .champ-nombre input, .participant .prenom input, .participant input.code-saisi { border: 1px solid #d4d4d4; border-radius: 12px; }
.participant textarea:focus, .participant input:focus { outline: none; border-color: var(--storming); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.participant .principal { background: var(--storming); height: 52px; border-radius: 12px; font-size: 16px; }
.participant .principal:disabled { opacity: .45; }
.participant .etat { background: var(--succes-fond); color: #065f46; border-radius: 12px; font-weight: 600; }
.participant .etat.echec { background: var(--danger-fond); color: #9f1239; }
.participant .etat.attente-reseau { display: block; background: var(--alerte-fond); color: #78350f; }
.participant .hors-ligne { background: var(--alerte-fond); color: #78350f; border: 1px solid #fde68a; border-radius: 12px; font-weight: 600; text-align: left; padding: 10px 12px; }
.participant .attente .point { background: var(--storming); }
.participant .pied { color: var(--texte-doux); font-size: 13px; }
.participant .bonjour a, .participant a { color: var(--texte-moyen); }
.participant .onglets-participant button[aria-pressed="true"] { background: var(--blanc); color: var(--texte); }
.participant .score-participant { background: var(--degrade-storming); }
.participant input.code-saisi { font-family: var(--police-chiffres); font-weight: 600; letter-spacing: .12em; }
.participant input.code-saisi:focus { border-color: var(--storming); }

/* La révélation du quiz : la bonne réponse en vert, les autres s'effacent (sur l'écran comme ailleurs). */
.barre.juste .plein, .ecran .barre.juste .plein { background: var(--succes); }
.barre.fausse { opacity: .5; }
.barre.fausse .plein, .ecran .barre.fausse .plein { background: var(--e-trait, #d4d4d4); }
.coche-juste { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; border-radius: 999px; background: var(--succes); color: #fff; font-size: .7em; vertical-align: .1em; }

/* Les onglets du téléphone : un segment neutre, l'onglet actif en blanc. */
.participant .onglets-participant { background: #f0f0f0; border-radius: 12px; padding: 3px; box-shadow: none; gap: 3px; }
.participant .onglets-participant button { border-radius: 9px; min-height: 40px; color: #525252; font-weight: 600; }
.participant .onglets-participant button[aria-pressed="true"] { background: var(--blanc); color: var(--texte); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.participant .onglets-participant .pastille-nombre { background: var(--storming); color: #fff; }
.participant .onglets-participant button[aria-pressed="false"] .pastille-nombre { background: var(--storming-fond); color: var(--storming-texte); }

/* La barre en tête ne prend pas le style du gagnant de la roue (.gagnant, lot 5) : ce conflit la
   centrait et la rejouait en fondu à chaque réponse, sur l'écran comme dans le rapport. */
.barre.gagnant { text-align: left; margin-top: 0; animation: none; }

/* Le code sous l'adresse, en Roboto, sur l'écran de la salle. */
.ecran .adresse span#adresse { display: block; }
.ecran .adresse .code-seance b { font-family: var(--police-chiffres); }

/* Sur le téléphone, la navigation entre activités est secondaire : contour, pas de noir. */
.participant .bouton { height: 48px; border-radius: 12px; font-size: 15px; }
.participant .bouton.accent { background: var(--blanc); color: var(--texte); border: 1px solid #d4d4d4; }
.participant .bouton.accent:hover { background: var(--discret); }

/* Les billes : la ligne a une hauteur fixe (66 px, ecran-vues.js) ; le libellé tient en deux lignes au plus. */
.ecran .billes-entete, .ecran .billes-ligne { grid-template-columns: minmax(300px, 1.3fr) minmax(0, 2fr) 180px; }
.ecran .billes-ligne .libelle { font-size: calc(21px * var(--echelle)); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ecran .billes-entete { font-size: calc(15px * var(--echelle)); }
.ecran .billes-entete .cases { font-size: calc(18px * var(--echelle)); }
.ecran .diapo-nav .aide { font-size: calc(16px * var(--echelle)); }
.ecran .billes-ligne .moyenne b { font-size: calc(40px * var(--echelle)); }

/* Le podium : le rang lisible sur la marche claire, les noms et les points en grand. */
.ecran .podium .marche .socle b { color: var(--storming-texte); }
.ecran .podium .marche.premiere .socle b { color: #fff; }
.ecran.theme-sombre .podium .marche .socle b { color: #ddd6fe; }
.ecran .podium .nom { font-size: calc(36px * var(--echelle)); font-weight: 800; }
.ecran .podium .points { font-family: var(--police-chiffres); font-size: calc(26px * var(--echelle)); font-weight: 600; color: var(--e-doux); }

/* Le mur à l'écran : des titres de colonne lisibles sur fond clair, plus pâles sur fond sombre. */
.ecran .mur-etapes span { background: var(--e-carte); color: var(--e-doux); font-size: calc(16px * var(--echelle)); }
.ecran .mur-etapes span.on { background: var(--degrade-storming); color: #fff; }
.ecran .mur-etapes b { color: var(--e-doux); }
.ecran .mur-colonne { background: var(--e-carte); }
.ecran .mur-colonne h4 { color: var(--storming-texte); font-size: calc(22px * var(--echelle)); }
.ecran .mur-colonne.t1 h4 { color: var(--danger-texte); } .ecran .mur-colonne.t2 h4 { color: var(--succes-texte); } .ecran .mur-colonne.t3 h4 { color: var(--alerte-texte); }
.ecran.theme-sombre .mur-colonne h4 { color: #c4b5fd; }
.ecran.theme-sombre .mur-colonne.t1 h4 { color: #fda4af; } .ecran.theme-sombre .mur-colonne.t2 h4 { color: #86efac; } .ecran.theme-sombre .mur-colonne.t3 h4 { color: #fde68a; }
.ecran .mur-colonne .postit { font-size: calc(19px * var(--echelle)); }
.ecran .mur-colonne .postit.en-tete-du-vote { outline-color: var(--storming); }

/* Les autres vues de l'écran, sur les variables du thème (clair par défaut, sombre au choix). */
.ecran .partenaires-compteur b { color: var(--storming); font-family: var(--police-chiffres); }
.ecran .sous-titre .fil { color: var(--e-doux); }
.ecran .minuteur-ecran { background: var(--e-carte); color: var(--e-texte); }
.ecran .minuteur-ecran.presque { background: var(--danger-fond); color: var(--danger-texte); }
.ecran .question-guidee small { color: var(--e-doux); font-size: calc(16px * var(--echelle)); }
.ecran .classement-resultat .rang { background: var(--e-carte); color: var(--e-texte); }
.ecran .mot-nuage small, .ecran .aide-filtre, .ecran .masque-quiz { color: var(--e-doux); }
.ecran .qs-carte { background: var(--e-carte); }
.ecran .qs-carte.en-avant { background: var(--storming-fond); box-shadow: inset 0 0 0 2px var(--storming); }
.ecran.theme-sombre .qs-carte.en-avant { background: rgba(124, 58, 237, .22); }
.ecran .qs-carte.en-avant .qs-votes b, .ecran .qs-votes b { color: var(--storming); font-family: var(--police-chiffres); }
.ecran .qs-votes small, .ecran .qs-texte small { color: var(--e-doux); }
.ecran .qs-texte p { color: var(--e-texte); font-size: calc(26px * var(--echelle)); }
.ecran .deviner-resultat b { color: var(--storming); font-family: var(--police-chiffres); }
.ecran .deviner-resultat small { color: var(--e-doux); }
.ecran .suite-classement li { background: var(--e-carte); }
.ecran .equipe-ecran { background: var(--e-carte); color: var(--e-texte); }
.ecran .equipe-ecran em { color: var(--storming); }
.ecran .equipe-ecran small { color: var(--e-doux); }
.ecran .roue { border-color: var(--e-fond); box-shadow: 0 0 0 2px var(--e-ligne); }
.ecran .gagnant small { color: var(--e-doux); }
.ecran .gagnant b { background: var(--degrade-storming); -webkit-background-clip: text; background-clip: text; }
.ecran .odj-ecran li { border-bottom-color: var(--e-ligne); }
.ecran .odj-ecran li small { color: var(--e-doux); font-family: var(--police-chiffres); }
.ecran .pastille-nombre { background: var(--e-carte); }

/* ======================================================================
   Lot 2 (7 octobre 2026) : la bibliothèque, les fenêtres et l'éditeur
   ====================================================================== */

/* Les teintes des formats : la palette des avatars de XINERGI. */
.fmt { width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--discret); color: var(--texte-moyen); }
.fmt.petite { width: 28px; height: 28px; }
.fmt-presentation { background: #f5f3ff; color: #6d28d9; }
.fmt-sondage { background: #ecfdf5; color: #047857; }
.fmt-questionnaire { background: #eff6ff; color: #1d4ed8; }
.fmt-formulaire { background: #fffbeb; color: #b45309; }
.fmt-quiz { background: #fff1f2; color: #be123c; }
.fmt-parcours { background: #eef2ff; color: #4338ca; }

.bouton.fantome { border-color: transparent; background: transparent; }
.bouton.fantome:hover { background: var(--discret); }
.bouton.icone { width: 36px; padding: 0; color: var(--texte-moyen); border-color: transparent; background: transparent; }
.bouton.icone:hover { background: var(--discret); }
.bouton.danger-plein { background: var(--danger-texte); border-color: var(--danger-texte); color: #fff; }
.bouton.danger-plein:hover { background: #9f1239; }
.compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--discret); color: var(--texte-moyen); font-size: 12px; font-weight: 600; vertical-align: 3px; }
.compte:empty { display: none; }

/* Les vues de la bibliothèque, dans la barre latérale. */
.barre-xs .vues-xs nav { display: flex; flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
.barre-xs .vue { position: relative; }
.barre-xs .vue small { margin-left: auto; font-family: var(--police-chiffres); font-size: 11px; font-weight: 600; color: var(--texte-doux); }
.barre-xs .vue.actif { background: var(--primaire); color: #fff; }
.barre-xs .vue.actif small { color: #d4d4d4; }
.barre-xs .vue.ajout { color: #525252; }
.barre-xs .nouveau-dossier { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; }
.barre-xs .nouveau-dossier[hidden] { display: none; }
.barre-xs .nouveau-dossier label { font-size: 12px; font-weight: 600; color: var(--texte-moyen); padding: 0 4px; }
.barre-xs .nouveau-dossier input { height: 32px; padding: 0 10px; border: 1px solid var(--bordure); border-radius: 8px; font-size: 13px; }
.barre-xs .nouveau-dossier .boutons { display: flex; gap: 6px; }
.barre-xs .nouveau-dossier .boutons .accent { flex: 1; }
.biblio.sans-cote { display: block; }
.biblio.sans-cote .biblio-cote { display: none; }

/* Les séances en cours : des cartes compactes, le code en Roboto. */
.en-cours h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.grille-seances { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 24px; }
.carte-seance { padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.carte-seance .tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carte-seance h3 { flex: 1 1 120px; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-seance .statut { margin: 0; }
.carte-seance .code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.carte-seance .code b { font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.carte-seance .code small { font-size: 12px; color: var(--texte-doux); }
.carte-seance .actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* La liste des activités : des lignes denses, un seul bouton en contour qui noircit au survol. */
.biblio-tete { margin: 0 0 12px; }
.biblio-tete .titre-page { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.biblio-outils { gap: 10px 12px; margin-bottom: 12px; }
.champ-recherche { position: relative; flex: 0 1 300px; min-width: 220px; }
.champ-recherche svg { position: absolute; left: 11px; top: 10px; pointer-events: none; }
.champ-recherche input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--bordure); border-radius: 8px; font-size: 13.5px; box-sizing: border-box; background: var(--blanc); }
.biblio-outils input[type=search] { border-width: 1px; height: 36px; border-radius: 8px; }
.filtres, .segment { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 2px; border-radius: 8px; background: var(--discret); border: 1px solid var(--bordure); }
.filtre, .segment button { height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--texte-doux); cursor: pointer; }
.filtre.on, .segment button.on { background: var(--blanc); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.liste-lignes { padding: 0; overflow: visible; display: block; }
.liste-lignes > .aucune { padding: 24px 16px; text-align: center; margin: 0; font-style: normal; color: var(--texte-doux); }
.tete-lignes, .ligne-activite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; }
.tete-lignes { border-bottom: 1px solid #f0f0f0; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux); }
.tete-lignes .ligne-texte { padding-left: 48px; }
.ligne-activite { min-height: 60px; border-top: 1px solid #f0f0f0; box-sizing: border-box; }
.tete-lignes + .ligne-activite, .liste-lignes > .ligne-activite:first-child { border-top: 0; }
.ligne-activite:hover { background: #fafafa; }
.ligne-texte { flex: 1 1 300px; min-width: 0; }
.ligne-texte h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 600; }
.ligne-texte .titre-lien { color: var(--texte); text-decoration: none; }
.ligne-texte a.titre-lien:hover { text-decoration: underline; }
.ligne-texte .meta { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; overflow-wrap: anywhere; }
.ligne-texte .statut { margin: 0; }
.ligne-format { flex: 0 0 170px; font-size: 13px; color: var(--texte-moyen); }
.ligne-questions { flex: 0 0 100px; font-size: 13px; color: var(--texte-moyen); }
.ligne-activite .actions, .tete-lignes .actions { flex: 0 0 auto; min-width: 236px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.ligne-seance .actions { min-width: 0; flex-wrap: wrap; }
.ligne-activite:hover .bouton.go, .ligne-activite:focus-within .bouton.go { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.sous-titre-liste { margin: 0; padding: 14px 16px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux); }
.liste-lignes > p.aucune { border-top: 1px solid #f0f0f0; }
.menu-flottant { border: 1px solid var(--bordure); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); width: 264px; }
.menu-flottant button { height: 34px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.menu-flottant button:hover, .menu-flottant button:focus-visible { background: var(--discret); }
.menu-flottant button.danger { color: var(--danger-texte); border-top: 1px solid #f0f0f0; border-radius: 0 0 6px 6px; margin-top: 4px; }
.menu-flottant button.danger:hover { background: var(--danger-fond); }
@media (max-width: 900px) {
  .tete-lignes { display: none; }
  .ligne-format, .ligne-questions { flex: 0 0 auto; font-size: 12px; color: var(--texte-doux); }
  .ligne-activite .actions { min-width: 0; flex: 1 1 100%; justify-content: flex-start; padding-left: 48px; }
  .champ-recherche { flex: 1 1 100%; }
}

/* Les fenêtres : en-tête avec croix, formats en cartes, modèles par usage. */
dialog.fenetre { border: 1px solid var(--bordure); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
dialog.fenetre.fenetre-large { width: min(940px, calc(100vw - 32px)); }
.fenetre-corps { padding: 20px 24px; gap: 12px; }
.fenetre-corps h2 { font-size: 18px; font-weight: 700; }
.fenetre-corps h3 { color: var(--texte); font-size: 15px; font-weight: 700; margin: 0; }
.fenetre-corps select { height: 36px; border-width: 1px; border-radius: 8px; }
.fenetre-tete { display: flex; align-items: flex-start; gap: 12px; }
.fenetre-tete > div { flex: 1; }
.fenetre-tete .aide-app { margin: 4px 0 0; }
.fenetre-pied { padding-top: 12px; border-top: 1px solid var(--bordure); margin: 4px -24px -20px; padding: 12px 24px; background: #fafafa; border-radius: 0 0 16px 16px; }
.formats { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.format-carte { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; }
.format-carte:hover, .format-carte:focus-visible { border-color: var(--primaire); background: #fafafa; }
.format-carte > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.format-carte b { font-size: 13.5px; }
.format-carte small { font-size: 12px; line-height: 1.4; }
.modeles-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 16px; margin-top: 4px; border-top: 1px solid #f0f0f0; }
.modeles-tete h3 { flex: 1 1 200px; }
.modeles-tete .champ-recherche { flex: 0 1 260px; }
.usages { align-self: flex-start; }
.modeles { display: block; max-height: 42vh; overflow-y: auto; }
.modeles .etiquette { display: block; margin: 10px 0 8px; }
.modeles-groupe { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 8px; }
.modele-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--blanc); text-align: left; cursor: pointer; }
.modele-ligne:hover, .modele-ligne:focus-visible { border-color: var(--primaire); outline: none; }
.modele-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modele-texte b { font-size: 13.5px; font-weight: 600; }
.modele-texte small { font-size: 12px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modele-texte em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #525252; }
.vide-modeles { padding: 10px 12px; border-radius: 10px; background: var(--discret); }
@media (max-width: 640px) { .modeles-groupe { grid-template-columns: 1fr; } }
dialog.fenetre.fenetre-question { width: min(440px, calc(100vw - 32px)); }
.fenetre-question input { height: 36px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 8px; font-size: 14px; }
.modele-ligne { flex-direction: row; border-style: solid; }
.biblio-outils .champ-recherche input, .modeles-tete .champ-recherche input { padding-left: 34px; height: 36px; border-width: 1px; }

/* « Lancer une séance » (lot 2) : chaque réglage sur une ligne, son titre à gauche, ses choix en cartes. */
#fenetre-lancer { width: min(940px, calc(100vw - 32px)); }
#form-lancer { gap: 0; max-height: calc(100vh - 64px); overflow-y: auto; }
#form-lancer > h2 { margin-bottom: 4px; }
#form-lancer > .aide-app { margin: 0 0 12px; }
#form-lancer > label[for="lancer-nom"] { font-size: 13px; font-weight: 700; padding: 12px 0 6px; border-top: 1px solid #f0f0f0; }
#form-lancer > #lancer-nom { height: 36px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
#form-lancer fieldset { position: relative; border: 0; border-top: 1px solid #f0f0f0; border-radius: 0; padding: 14px 0 12px 216px; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; min-height: 40px; }
#form-lancer fieldset > legend { position: absolute; left: 0; top: 16px; width: 200px; padding: 0; font-size: 13px; font-weight: 700; color: var(--texte); line-height: 1.35; }
#form-lancer fieldset > .aide-app, #form-lancer fieldset > div, #form-lancer fieldset > .case-ligne { flex: 1 1 100%; }
#form-lancer .choix-radio { flex: 1 1 200px; gap: 10px; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); }
#form-lancer .choix-radio:hover { background: #fafafa; }
#form-lancer .choix-radio:has(input:checked) { border-color: var(--primaire); box-shadow: 0 0 0 1px var(--primaire); background: #fafafa; }
#form-lancer .choix-radio input, #form-lancer .case-ligne input { accent-color: var(--primaire); }
#form-lancer .choix-radio b { font-size: 13px; }
#form-lancer .choix-radio small { font-size: 12px; line-height: 1.4; }
#form-lancer .case-ligne { margin: 2px 0; font-size: 13px; }
#form-lancer textarea, #form-lancer input[type="datetime-local"] { border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.resume-lancer { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--discret); font-size: 12.5px; line-height: 1.5; color: var(--texte-moyen); }
.resume-lancer b { color: var(--texte); }
#form-lancer .fenetre-pied { position: sticky; bottom: -20px; }
@media (max-width: 720px) {
  #form-lancer fieldset { padding-left: 0; padding-top: 40px; }
  #form-lancer fieldset > legend { top: 14px; width: auto; }
}

/* L'éditeur (lot 2) : la tête de page de XINERGI, trois cartes, l'aperçu du téléphone sans défilement visible. */
.editeur-page { max-width: none; }
.editeur-barre { margin: 0 0 16px; gap: 12px 16px; }
.editeur-barre .titre { flex: 1 1 360px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.editeur-barre h1 { margin: 0; font-size: 20px; font-weight: 700; }
.editeur-barre .statut { margin: 0; }
.editeur-barre .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.etat-enregistrement { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--discret); color: var(--texte-moyen); }
.etat-enregistrement.ok { background: var(--succes-fond); color: var(--succes-texte); }
.etat-enregistrement.ok::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--succes); }
.etat-enregistrement.attente { background: var(--alerte-fond); color: var(--alerte-texte); }
.etat-enregistrement.echec { background: var(--danger-fond); color: var(--danger-texte); }
.editeur { grid-template-columns: 300px minmax(0, 1fr) 400px; gap: 16px; }
.editeur-plan, .editeur-apercu, .editeur-centre { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; box-shadow: none; padding: 16px; }
.editeur-plan .champ-app label, .question-edition label { font-size: 12.5px; font-weight: 600; color: var(--texte-moyen); }
.editeur-plan textarea, .question-edition textarea { border: 1px solid var(--bordure); border-radius: 8px; font-size: 14px; }
.app .champ-app input, .question-edition input { height: 36px; border: 1px solid var(--bordure); border-radius: 8px; }
.alerte-consigne { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--alerte-fond); color: #78350f; font-size: 12.5px; line-height: 1.45; }
.alerte-consigne[hidden] { display: none; }
.plan-titre { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--texte-doux); }
.plan-q { border: 1px solid transparent; border-radius: 10px; }
.plan-q:hover { background: #fafafa; }
.plan-q.actif { background: #fafafa; border-color: var(--primaire); }
.plan-q.fautive { border-color: var(--danger); background: var(--danger-fond); }
.plan-q .poignee { color: #a3a3a3; }
.plan-ouvrir .n { background: var(--discret); color: var(--texte-moyen); border-radius: 999px; font-family: var(--police-chiffres); font-weight: 600; }
.plan-q.actif .plan-ouvrir .n { background: var(--primaire); color: #fff; }
.plan-fleches button { width: 28px; height: 20px; border-radius: 6px; }
.plan-fleches button:hover:not(:disabled) { background: var(--discret); color: var(--texte); }
.bouton.ajouter { border-style: solid; color: var(--texte); gap: 6px; }
.bouton.ajouter.bouton-xina { color: var(--texte); }
.palette { padding: 4px; border: 1px solid var(--bordure); border-radius: 10px; gap: 0; }
.palette button { border: 0; border-radius: 8px; padding: 8px 10px; }
.palette button:hover, .palette button:focus-visible { background: var(--discret); }
.palette button b, .palette button strong { font-size: 13px; }
.editeur-apercu .plan-titre { margin-top: 0; }
.telephone { width: 340px; max-width: 100%; margin: 0 auto; border-radius: 40px; background: #0a0a0a; padding: 10px; box-sizing: border-box; }
.telephone iframe { height: 600px; border-radius: 30px; background: var(--clair); }
.question-edition .bouton.danger { border-color: transparent; }
@media (max-width: 1280px) { .editeur { grid-template-columns: 280px minmax(0, 1fr); } .editeur-apercu { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .editeur { grid-template-columns: 1fr; } }

/* Dans le cadre du téléphone de l'éditeur, le défilement reste possible mais ne se voit pas, et rien ne déborde. */
html.apercu, html.apercu body { overflow-x: hidden; scrollbar-width: none; }
html.apercu::-webkit-scrollbar, html.apercu body::-webkit-scrollbar { display: none; }
html.apercu .participant { max-width: 100%; box-sizing: border-box; }
html.apercu .participant img, html.apercu .participant iframe { max-width: 100%; }
.editeur-centre > .carte { border: 0; padding: 0; margin: 0; box-shadow: none; }
@media (max-width: 900px) {
  .barre-xs { box-shadow: none; }
  body.menu-ouvert .barre-xs { box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
}
@media (max-width: 640px) {
  .grille-seances { grid-template-columns: 1fr; gap: 8px; }
  .carte-seance { padding: 10px 12px; gap: 6px; }
  .carte-seance .code b { font-size: 18px; }
  .carte-seance .actions .bouton { height: 40px; }
  .biblio-tete .titre-page { font-size: 18px; }
  .biblio-tete #nouvelle-reunion { display: none; }
  .filtres { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .filtre { white-space: nowrap; }
}
.liste-saisie .lettre { background: var(--discret); color: var(--texte-moyen); font-family: var(--police-chiffres); font-weight: 600; }
.lien-ajout { color: var(--texte); font-weight: 600; }
.app input[type="checkbox"], .app input[type="radio"] { accent-color: var(--primaire); }
.liste-saisie input { height: 36px; border: 1px solid var(--bordure); border-radius: 8px; }
/* Les réglages ne rétrécissent pas pour tenir dans la hauteur de la fenêtre : la fenêtre défile. */
#form-lancer > * { flex-shrink: 0; }
#form-lancer .reserve-membres { flex: 1 1 100%; padding: 2px 0 0; }
#form-lancer .reserve-membres .aide-app { margin: 2px 0 0 26px; font-size: 12px; }

/* ======================================================================
   Lot 3 (8 octobre 2026) : l'identification des participants
   ====================================================================== */

/* Les messages d'erreur du téléphone, en rouge et précédés d'un cercle (ils étaient noirs). */
.participant .erreur { color: var(--danger-texte); font-size: 14px; font-weight: 600; line-height: 1.4; }
.participant .erreur:not(:empty) { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; }
.participant .erreur:not(:empty)::before { content: '!'; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 999px; background: var(--danger-texte); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.participant .prenom label { font-size: 13px; font-weight: 600; color: var(--texte-moyen); margin-top: 12px; }
.participant .prenom input { height: 52px; font-size: 17px; }
.participant .prenom .aide { font-size: 13px; line-height: 1.5; color: var(--texte-doux); }

/* Le code : six cases dessinées par-dessus une seule saisie accessible. */
.saisie-code { position: relative; margin-top: 6px; }
.saisie-code input.code-six { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; letter-spacing: normal; }
.cases-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.cases-code span { height: 56px; border: 1px solid #d4d4d4; border-radius: 12px; background: var(--blanc); display: flex; align-items: center; justify-content: center; font-family: var(--police-chiffres); font-size: 26px; font-weight: 600; color: var(--texte); }
.cases-code span.pleine { border-color: var(--texte-doux); }
.cases-code span.courante { border-color: var(--storming); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.saisie-code:has(+ .erreur:not(:empty)) .cases-code span { border-color: var(--danger-texte); background: var(--danger-fond); }

/* Le choix « compte XINERGI » ou « autre organisation » : deux cartes de même poids, chacune expliquée. */
.participant .compte-verifie a.principal.bouton-lien, .participant .compte-verifie #compte-exterieur.bouton-large {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 64px; margin-top: 14px; padding: 12px 16px;
  border: 1px solid #d4d4d4; border-radius: 14px; background: var(--blanc); color: var(--texte); font-size: 15px; font-weight: 700; text-align: left; box-sizing: border-box; text-decoration: none;
}
.participant .compte-verifie a.principal.bouton-lien::after, .participant .compte-verifie #compte-exterieur.bouton-large::after {
  content: ''; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid #a3a3a3; border-top: 2px solid #a3a3a3; transform: rotate(45deg);
}
.participant .compte-verifie a.principal.bouton-lien::before, .participant .compte-verifie #compte-exterieur.bouton-large::before {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.participant .compte-verifie a.principal.bouton-lien::before { content: 'X'; background: var(--primaire); color: #fff; }
.participant .compte-verifie #compte-exterieur.bouton-large::before { content: '@'; background: var(--storming-fond); color: var(--storming-texte); }
.participant .compte-verifie a.principal.bouton-lien:hover, .participant .compte-verifie #compte-exterieur.bouton-large:hover { border-color: var(--storming); }
.participant .compte-verifie .aide { margin: 6px 2px 0; }

/* L'entrée réussie : « Bonjour Kossi » dans une carte, la pastille « Compte vérifié » en vert. */
.participant .bonjour { padding: 10px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--blanc); font-size: 14px; color: var(--texte-moyen); margin-bottom: 12px; }
.participant .bonjour b { color: var(--texte); }
.pastille-verifie, .participant .bonjour .pastille-verifie, .console .connectes-liste .pastille-verifie {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--succes-fond); color: var(--succes-texte); font-size: 12px; font-weight: 700; vertical-align: 1px;
}
.pastille-verifie::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--succes); }
.console .connectes-liste .pastille-verifie { height: 18px; font-size: 11px; margin-left: 4px; }
.participant .bonjour .souvenir { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texte-doux); }

/* « Choisir pour moi » : un bouton secondaire en contour, à côté de la saisie du pseudo. */
.participant .choisir-pseudo { background: var(--blanc); border: 1px solid #d4d4d4; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--texte); }
.participant .choisir-pseudo:hover { border-color: var(--storming); }
.participant .bouton.secondaire { background: var(--blanc); border: 1px solid #d4d4d4; color: var(--texte); }
.participant .bouton.secondaire:disabled { color: var(--texte-doux); background: var(--discret); }
.participant .compte-verifie #compte-exterieur.bouton-large { height: auto; white-space: normal; line-height: 1.3; }

/* ======================================================================
   Lot 4 (8 octobre 2026) : les écarts restants avec le canevas
   ====================================================================== */

/* Les chiffres de l'activité à l'écran, à côté du code de la séance. */
.bandeau-seance .chiffres { border-left: 1px solid #f0f0f0; }
.bandeau-seance .chiffres[hidden] { display: none; }
.bandeau-seance .chiffres b small.sur { font-family: var(--police); font-size: 13px; font-weight: 500; color: var(--texte-doux); letter-spacing: 0; text-transform: none; }
@media (max-width: 640px) { .bandeau-seance .chiffres { border-left: 0; border-top: 1px solid #f0f0f0; flex: 1 1 33%; } }

/* « Qui répond ? » : ce que le téléphone demandera, selon le mode choisi. */
#form-lancer .apercu-identification { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f0; }
.apercu-identification .etiquette { flex: 1 1 100%; }
.apercu-identification .aide-app { flex: 1 1 200px; margin: 0; }
.mini-tel { flex: none; width: 210px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border: 6px solid #0a0a0a; border-radius: 22px; background: var(--clair); font-size: 11px; }
.mini-tel b { font-size: 12px; font-weight: 800; }
.mini-tel .ligne-tel { height: 8px; border-radius: 4px; background: #e5e5e5; }
.mini-tel .ligne-tel.courte { width: 60%; }
.mini-tel .champ-tel { padding: 6px 8px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; color: var(--texte-doux); }
.mini-tel .bouton-tel { padding: 6px 8px; border-radius: 6px; background: var(--storming); color: #fff; font-weight: 700; text-align: center; }
.mini-tel .bouton-tel.contour { background: #fff; color: var(--texte); border: 1px solid #d4d4d4; }
.mini-tel .carte-tel { padding: 7px 8px; border: 1px solid #d4d4d4; border-radius: 8px; background: #fff; font-weight: 700; }

/* Le menu « … » d'une activité, sur un téléphone : une feuille qui monte du bas de l'écran. */
@media (max-width: 640px) {
  .menu-flottant { position: fixed !important; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .18); z-index: 60; }
  .menu-flottant button { height: 48px; font-size: 15px; }
}

/* La vue Modèles en deux onglets (8 octobre 2026) : le motif d'onglets de XINERGI, un trait noir sous l'onglet actif. */
.onglets-modeles { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 0 16px; border-bottom: 1px solid var(--bordure); }
.onglet-modeles { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--texte-doux); cursor: pointer; }
.onglet-modeles:hover { color: var(--texte); }
.onglet-modeles.on { color: var(--texte); border-bottom-color: var(--primaire); }
.onglets-modeles + [role="tabpanel"] > .tete-lignes { border-top: 0; }