/* Sl3t, StratCoRun 2026 : habillage de la page Participer du Sondage aux couleurs de la charte (mode Scène).
   Feuille chargée en dernier par Sondage/app/index.html. Elle ne change aucun comportement, elle rhabille seulement.
   Portée : la page #/participate uniquement (attribut data-page posé sur <html> par index.html). */

html[data-page="participate"]{
  --fond:#26375F;--carte:#213762;--scene:#213863;--citron:#D7F72A;--noir:#010101;
  --ombre-noir:-1px 2px 4px rgba(0,0,0,.16),-4px 7px 8px rgba(0,0,0,.14),-9px 15px 11px rgba(0,0,0,.08),-16px 27px 12px rgba(0,0,0,.02);
  --ombre-flottant:0 20px 50px rgba(0,0,0,.15);
  background:var(--fond)!important;color-scheme:dark;
}
html[data-page="participate"] body{font-family:"Neue Montreal",Arial,sans-serif!important;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html[data-page="participate"] *:focus,html[data-page="participate"] *:focus-visible{outline:none!important}

/* fond de page : le WallPaper de StratCoRun, fondu vers le bleu nuit pour la lisibilité, comme l'en-tête du programme */
html[data-page="participate"] body::before{content:"";position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(38,55,95,.10) 0%,rgba(38,55,95,.55) 30%,rgba(38,55,95,.92) 55%,#26375F 75%) left top/100% 176vw no-repeat,url(../pictures/wallpaper.jpg) left top/100% auto no-repeat,#26375F}
/* le fond est calé sur la largeur de l'écran seulement : quand la hauteur visible change (barres du navigateur), l'image ne bouge pas */
html[data-page="participate"] body{background:transparent!important}
/* ordre d'affichage : bleu nuit seul, puis le fond complet d'un seul coup quand l'image est prête, puis la fenêtre quand la réponse du serveur est arrivée */
html[data-page="participate"]:not(.sc-fond) body::before{background:#26375F}
html[data-page="participate"]:not(.sc-pret) #app{visibility:hidden}
html[data-page="participate"] #app,html[data-page="participate"] #app > div{background:transparent!important}
/* fond de page */
html[data-page="participate"] .bg-\[\#1f3862\]{background:transparent!important;padding:max(16px,env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom))!important}

/* cartes : blanches, arrondies, texte noir (menus et fenêtres en blanc) */
html[data-page="participate"] .card{background:#FFF!important;color:#000!important;border:0!important;border-radius:22px!important;box-shadow:0 8px 20px rgba(0,0,0,.10)!important}
html[data-page="participate"] .card .text-gray-900,html[data-page="participate"] .card .text-gray-600,html[data-page="participate"] .card .text-gray-500,
html[data-page="participate"] .card [class*="dark:text-"]{color:#000!important}
html[data-page="participate"] .card h1{font-size:28px!important;font-weight:400!important;-webkit-text-stroke:.42px currentColor;letter-spacing:-.025em!important;line-height:1.1!important;color:#000!important}
html[data-page="participate"] .text-green-700{color:#213762!important}

/* en-tête : « Sondage en Direct » puis titre du sondage, comme les titres de page */
html[data-page="participate"] .text-center.mb-6 .text-white{color:#FFF!important;font-size:13px!important;font-weight:500!important}
html[data-page="participate"] .text-\[\#CFFA1F\]{color:#FFF!important;font-size:30px!important;font-weight:400!important;-webkit-text-stroke:.45px currentColor;letter-spacing:-.025em!important;line-height:1.1!important;margin-top:6px}

/* minuterie : pilule blanche, chiffres à chasse fixe */
html[data-page="participate"] .bg-orange-50{border-radius:999px!important}
html[data-page="participate"] .bg-orange-50 .p-4{padding:10px 18px!important}
html[data-page="participate"] .bg-orange-50 .text-orange-600,html[data-page="participate"] .bg-orange-50 svg{color:#213762!important}
html[data-page="participate"] .bg-orange-50 .font-mono{font-variant-numeric:tabular-nums;font-family:inherit!important;font-weight:500!important;font-size:20px!important}

/* question : la seule zone citron de l'écran */
html[data-page="participate"] .\!bg-\[\#CFFA1F\]{background:var(--citron)!important;border-radius:28px!important;box-shadow:none!important}
html[data-page="participate"] .\!bg-\[\#CFFA1F\] h2{color:var(--scene)!important;font-size:20px!important;font-weight:500!important;line-height:1.3!important;letter-spacing:-.015em}

/* réponses : tuiles blanches ; réponse choisie en bleu nuit */
html[data-page="participate"] .space-y-3 > .card{transition:background-color .15s,transform .15s!important}
html[data-page="participate"] .space-y-3 > .card:active{transform:scale(.98)}
html[data-page="participate"] .space-y-3 > .card .w-8{width:36px!important;height:36px!important;background:#F3F4F6!important;color:#000!important;font-weight:500!important}
html[data-page="participate"] .space-y-3 > .card .text-base{color:#000!important;font-size:16px!important;font-weight:400!important}
html[data-page="participate"] .space-y-3 > .card.ring-2{background:var(--carte)!important;--tw-ring-shadow:0 0 #0000!important;box-shadow:0 8px 20px rgba(0,0,0,.18)!important}
html[data-page="participate"] .space-y-3 > .card.ring-2 .text-base{color:#FFF!important}
html[data-page="participate"] .space-y-3 > .card.ring-2 .w-8{background:var(--citron)!important;color:var(--scene)!important}
html[data-page="participate"] .space-y-3 > .card.ring-2 svg{color:var(--citron)!important}

/* bouton Valider : pilule sombre de la charte ; inactif à 40 % */
html[data-page="participate"] button.btn{height:50px!important;border-radius:99px!important;font-size:16px!important;font-weight:500!important;border:0!important}
html[data-page="participate"] button.btn-primary{background:#010101!important;color:#F3F4F6!important;box-shadow:var(--ombre-noir)!important}
html[data-page="participate"] button.btn-outline{background:#F9FAFA!important;color:#000!important;opacity:.4!important;box-shadow:none!important}

/* mention en bas */
html[data-page="participate"] .text-xs.text-white{color:#FFF!important;opacity:.85;font-size:12.5px!important}

/* bouton Fermer : pilule noire comme la barre du bas de l'application */
html[data-page="participate"] button.fixed.bottom-6{background:rgba(1,1,1,.88)!important;color:#FFF!important;border-radius:999px!important;height:50px;padding:0 28px!important;font-weight:500!important;font-size:14px!important;bottom:calc(24px + env(safe-area-inset-bottom))!important;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 10px 25px rgba(0,0,0,.25)!important}

/* messages centraux : fenêtre fixée au milieu de la partie visible de l'écran, indépendante de la hauteur de la page et du défilement */
html[data-page="participate"] .bg-\[\#1f3862\].flex.items-center{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;min-height:0!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow-y:auto}
html[data-page="participate"] .card.text-center{margin-top:0!important}
/* bascule en relief : la fenêtre pivote vers l'avant comme une carte qu'on relève, autour de son propre centre, sans déplacement.
   Elle démarre seulement quand le fond et la réponse du serveur sont prêts (classe sc-pret), et rejoue à chaque nouveau message. */
html[data-page="participate"] .bg-\[\#1f3862\].flex.items-center{perspective:1100px}
html[data-page="participate"].sc-pret .card.text-center{transform-origin:50% 50%;animation:sc-bascule .7s cubic-bezier(.215,.61,.355,1) both}
@keyframes sc-bascule{0%{opacity:0;transform:rotateX(-75deg)}70%{opacity:1;transform:rotateX(8deg)}100%{opacity:1;transform:none}}
/* question en cours : un bloc unique mauve, comme la fenêtre « Sondage fermé » ; en-tête, minuterie, question, choix et bouton à l'intérieur ;
   choix en cadres arrondis aux couleurs inversées (fond blanc, texte mauve) avec leur numéro intégré (1, 2, 3) ; grand « ? » détouré en décor */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex){padding-top:max(24px,env(safe-area-inset-top))!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md{position:relative;overflow:hidden;background:#7A62D3;color:#FFF;border-radius:24px;padding:20px 18px 22px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md::before{content:"?";position:absolute;right:-10px;bottom:-46px;font:700 220px/1 Arial,sans-serif;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.35);pointer-events:none}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md > *{position:relative}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6{text-align:left;margin-bottom:12px}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6 .flex{justify-content:flex-start}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6 svg{display:none}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6 .text-white{font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-\[\#CFFA1F\]{font-size:22px!important;font-weight:700!important;-webkit-text-stroke:0!important;color:#FFF!important;margin-top:2px}
/* minuterie : petite pastille blanche */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50{display:inline-block;width:auto;margin-bottom:14px!important;background:#FFF!important;border-radius:99px!important;box-shadow:none!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .p-4{padding:4px 12px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .font-mono{font-size:15px!important;color:#7A62D3!important;font-weight:700!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .text-orange-600,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 svg{color:#7A62D3!important}
/* question : texte blanc en gras, sans cadre */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .\!bg-\[\#CFFA1F\]{background:transparent!important;box-shadow:none!important;margin-bottom:14px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .\!bg-\[\#CFFA1F\] .p-6{padding:0!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .\!bg-\[\#CFFA1F\] h2{color:#FFF!important;text-align:left!important;font-size:19px!important;font-weight:700!important;line-height:1.3!important}
/* choix : cadres arrondis blancs, texte mauve, numéro intégré */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3{counter-reset:choix;margin-bottom:16px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card{counter-increment:choix;background:#FFF!important;border-radius:16px!important;box-shadow:none!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .p-4{padding:11px 12px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .w-8{font-size:0!important;width:30px!important;height:30px!important;background:#7A62D3!important;color:#FFF!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .w-8::after{content:counter(choix);font-size:14px;font-weight:700}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .text-base{color:#7A62D3!important;font-weight:700!important;font-size:15px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card svg{color:#7A62D3!important}
/* choix sélectionné : couleurs inversées à leur tour (citron, texte bleu nuit) */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2{background:#D7F72A!important;box-shadow:none!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .w-8{background:#213863!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .text-base,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 svg{color:#213863!important}
/* bouton : pilule citron, texte bleu nuit ; inactif : blanc transparent */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-primary{background:#D7F72A!important;color:#213863!important;box-shadow:none!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-outline{background:rgba(255,255,255,.18)!important;color:#FFF!important;opacity:1!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mt-6 p{font-size:11.5px!important;opacity:.9;margin-top:-6px}
/* question en cours : bloc aéré verticalement (validé le 04/10/2026, « très bon ») */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md{padding:28px 20px 30px;margin-top:6px}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6{margin-bottom:18px}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50{margin-bottom:22px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .\!bg-\[\#CFFA1F\]{margin-bottom:22px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:14px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .p-4{padding:14px 14px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3{margin-bottom:24px!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mt-6{margin-top:20px!important}
/* question en cours : couleur retenue = jaune citron (04/10/2026) ; textes bleu nuit, symboles noirs (numéros, minuterie, coche, grand « ? » unique) */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md{background:#D7F72A;color:#213863;border:0}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md::before{-webkit-text-stroke:1.4px rgba(1,1,1,.30)}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mb-6 .text-white,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-\[\#CFFA1F\],html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .\!bg-\[\#CFFA1F\] h2,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .text-center.mt-6 p{color:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50{background:#010101!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .font-mono,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .text-orange-600,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 svg{color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card{background:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .w-8{background:#010101!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .text-base{color:#FFF!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2{background:#FFF!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .w-8{background:#010101!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .text-base{color:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 svg{color:#010101!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-primary{background:#010101!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-outline{background:rgba(1,1,1,.12)!important;color:#213863!important}
/* version jaune : couleurs nettes (pas de gris sur le citron) : grand « ? » en blanc, bouton inactif blanc texte bleu nuit */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md::before{-webkit-text-stroke:1.6px rgba(255,255,255,.85)}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-outline{background:#FFF!important;color:#213863!important;opacity:.75!important}
/* texte des choix en graisse normale (plus élégant que le gras), toutes couleurs */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .text-base{font-weight:400!important;letter-spacing:-.005em}
/* version jaune à deux couleurs seulement, comme les autres tuiles : jaune citron et bleu nuit (plus de noir ni de blanc) */
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md::before{-webkit-text-stroke:1.4px rgba(33,56,99,.35)}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50{background:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .font-mono,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 .text-orange-600,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .bg-orange-50 svg{color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card{background:#213863!important;border:2px solid transparent!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .w-8{background:#D7F72A!important;color:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card .text-base{color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2{background:#D7F72A!important;border-color:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .w-8{background:#213863!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 .text-base,html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md .space-y-3 > .card.ring-2 svg{color:#213863!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-primary{background:#213863!important;color:#D7F72A!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md button.btn-outline{background:rgba(33,56,99,.18)!important;color:#213863!important;box-shadow:none!important;opacity:1!important}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex) > .max-w-md::before{-webkit-text-stroke:1.4px rgba(33,56,99,.35)}
/* validé le 04/10/2026 */
/* fenêtres de message (en attente, votes fermés, vote enregistré) : comme la carte du menu : cadre blanc sur le fond de page, tout le texte en noir,
   éléments d'interface en noir texte blanc (pastille d'icône, réponse donnée), mot vertical détouré noir sur le côté droit comme « StratCo » dans le menu */
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center{position:relative;overflow:hidden;background:#FFF!important;color:#000!important;border:1px solid rgba(0,0,0,.08)!important;border-radius:32px!important;box-shadow:0 20px 50px rgba(0,0,0,.15)!important;text-align:left}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .p-8{position:relative;padding:26px 84px 28px 22px!important;min-height:300px}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center::before{position:absolute;top:18px;right:14px;writing-mode:vertical-rl;transform:rotate(180deg);font:700 64px/1 Arial,sans-serif;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.4);pointer-events:none;user-select:none}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center:has(.bg-gray-100)::before{content:"Attente"}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center:has(.bg-orange-100)::before{content:"Fermé"}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center:has(.bg-green-100)::before{content:"Merci"}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .rounded-full.w-fit{margin:0 0 18px!important;padding:10px!important;background:#010101!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .rounded-full.w-fit svg{width:24px!important;height:24px!important;color:#FFF!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center h1{color:#000!important;font-size:26px!important;font-weight:400!important;-webkit-text-stroke:.42px currentColor;letter-spacing:-.025em!important;line-height:1.1!important;margin-bottom:12px!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center p,html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center strong{color:#000!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center p{font-size:15px!important;line-height:1.35}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center strong{font-weight:500}
/* message final : texte noir plus petit, séparé par un trait fin comme dans le menu */
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .p-8 > p:last-child,html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .border-t > p{margin:20px 0 0!important;padding-top:14px;border-top:1px solid rgba(0,0,0,.10);font-size:13px!important}
/* votes fermés : titre du sondage en petites capitales, question en clair */
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center:has(.bg-orange-100) h1 + p{font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center:has(.bg-orange-100) h1 + p + p{font-size:17px!important;margin:0!important}
/* vote enregistré : la réponse donnée en pilule noire texte blanc */
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .space-y-3 > p:nth-child(2){display:inline-block;padding:10px 18px;border-radius:99px;background:#010101;color:#FFF!important}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .space-y-3 > p:nth-child(2) strong{color:#FFF!important;font-weight:400}
html[data-page="participate"] .bg-\[\#1f3862\].flex > .card.text-center .border-t{border:0!important;padding-top:0!important}
/* page un peu plus haute que l'écran (barres masquées comprises) : en faisant défiler, Chrome et Safari masquent leurs barres ; les fenêtres de message restent fixes au centre (04/10/2026) */
html[data-page="participate"] body{min-height:calc(100vh + 60px);min-height:calc(100lvh + 60px)}
/* bouton « Fermer » d'origine masqué : la pilule du menu commun le remplace ; bouton « Retour » en haut à gauche (05/10/2026) */
html[data-page="participate"] button.fixed.bottom-6{display:none!important}
.sc-retour{position:fixed;z-index:9030;top:calc(14px + env(safe-area-inset-top));left:16px;height:32px;padding:0 14px 0 9px;border:0;border-radius:99px;background:#010101;color:#FFF;display:inline-flex;align-items:center;gap:5px;font:500 13px "Neue Montreal",Arial,sans-serif;cursor:pointer}
html[data-page="participate"] .bg-\[\#1f3862\]:not(.flex){padding-top:calc(62px + env(safe-area-inset-top))!important}

/* ===================== Administration du sondage (espace speaker), 05/10/2026 =====================
   Habillage selon la Baseline StandardGraphic de la plateforme (STANDARD-GRAPHIQUE-PLATEFORME_20261002-1515) : registre d'outil, pas la charte événementielle.
   Fond gris #F3F4F6, cartes blanches rayon 32 sans ombre, textes noirs, titre 48 points graisse 500, bouton principal en pilule sombre #010101,
   boutons clairs #F9FAFA à filet #E9E9E9, champs soulignés ; le noir des éléments pleins (bouton principal, bandeau actif, pastilles) remplacé par le bleu foncé StratCo #213762 (05/10/2026), couleur réservée à la donnée (barres de résultat bleues). Aucun changement de comportement. */
html[data-page="admin"]{--ba-fond-appli:#F3F4F6;--ba-carte:#FFF;--ba-encre:#000;--ba-actif:#213762;--ba-gris-bouton:#F9FAFA;--ba-filet-bouton:#E9E9E9;--ba-rail:#ECECEC;--ba-trait:#E4E4E4;--ba-trait-champ:#E5E5E5;--ba-bleu:#3570F6;--ba-rouge:#D85930;
  --ba-ombre-noir:-1px 2px 4px rgba(0,0,0,.16),-4px 7px 8px rgba(0,0,0,.14),-9px 15px 11px rgba(0,0,0,.08),-16px 27px 12px rgba(0,0,0,.02);--ba-ombre-clair:12px 8px 20px rgba(0,0,0,.06);--ba-ombre-flottant:0 20px 50px rgba(0,0,0,.15);
  background:var(--ba-fond-appli)!important;color-scheme:light}
html[data-page="admin"] body{font-family:"Neue Montreal",Arial,sans-serif!important;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;background:var(--ba-fond-appli)!important;color:#111}
html[data-page="admin"] #app,html[data-page="admin"] #app > div,html[data-page="admin"] .bg-gray-50{background:transparent!important}
html[data-page="admin"] *:focus,html[data-page="admin"] *:focus-visible,html[data-page="admin"] *:active{outline:none!important}
/* pleine largeur, marges de 22 points ; place en haut pour le bouton de retour */
html[data-page="admin"] .container{max-width:none!important;padding:calc(84px + env(safe-area-inset-top)) 22px 48px!important}
/* bandeau de titre : titre 48 points graisse 500, explication 14 points, tout en noir */
html[data-page="admin"] .container > .flex.mb-8 h1{color:#000!important;font-size:48px!important;font-weight:500!important;letter-spacing:-.011em!important;line-height:1.05}
html[data-page="admin"] .container > .flex.mb-8 p,html[data-page="admin"] .container > .flex.mb-8 .text-sm{color:#000!important;font-size:14px!important}
/* boutons : pilules ; principal sombre, secondaires clairs à filet ; suppression en rouge de la charte */
html[data-page="admin"] .btn{border-radius:99px!important;font-weight:500!important;border:0!important;transition:none!important}
html[data-page="admin"] .btn-primary{background:var(--ba-actif)!important;color:#F3F4F6!important;box-shadow:var(--ba-ombre-noir)!important;padding:12px 24px!important;font-size:16px!important}
html[data-page="admin"] .btn-outline{background:var(--ba-gris-bouton)!important;color:#000!important;box-shadow:inset 0 0 0 1px var(--ba-filet-bouton),var(--ba-ombre-clair)!important}
html[data-page="admin"] .btn-outline:hover{background:#FFF!important}
html[data-page="admin"] .btn-destructive{background:var(--ba-rouge)!important;color:#FFF!important}
html[data-page="admin"] .btn:disabled{opacity:.4!important;box-shadow:none!important}
/* cartes blanches, rayon 32, sans ombre ; sondage choisi repéré par un filet sombre */
html[data-page="admin"] .card{background:var(--ba-carte)!important;color:#000!important;border:0!important;border-radius:32px!important;box-shadow:none!important}
html[data-page="admin"] .card.ring-2{--tw-ring-shadow:0 0 #0000!important;box-shadow:0 0 0 2px var(--ba-actif)!important}
html[data-page="admin"] .card h3{font-size:20px!important;font-weight:500!important;color:#000!important}
html[data-page="admin"] .card p,html[data-page="admin"] .card .text-gray-600,html[data-page="admin"] .card .text-gray-500,html[data-page="admin"] .card [class*="text-blue"]{color:#000!important}
/* bandeau du sondage actif : la seule zone sombre de l'écran, minuterie à chasse fixe */
html[data-page="admin"] .card.bg-blue-50{background:var(--ba-actif)!important;color:#FFF!important}
html[data-page="admin"] .card.bg-blue-50 h3,html[data-page="admin"] .card.bg-blue-50 p,html[data-page="admin"] .card.bg-blue-50 [class*="text-blue"]{color:#FFF!important}
html[data-page="admin"] .card.bg-blue-50 .font-mono{font-family:inherit!important;font-variant-numeric:tabular-nums;font-size:22px!important;font-weight:500}
html[data-page="admin"] .card.bg-blue-50 .badge{background:#FFF!important;color:#000!important}
html[data-page="admin"] .card.bg-blue-50 .btn-outline{background:#FFF!important}
/* pastilles d'état */
html[data-page="admin"] .badge{border-radius:99px!important;font-weight:500!important}
html[data-page="admin"] .badge-default{background:var(--ba-actif)!important;color:#FFF!important;border:0!important}
html[data-page="admin"] .badge-outline{background:var(--ba-gris-bouton)!important;color:#000!important;border:1px solid var(--ba-filet-bouton)!important}
/* réponses : lignes grises claires ; barres de résultat sur rail gris, remplissage bleu (couleur réservée à la donnée) */
html[data-page="admin"] .space-y-2 > .bg-gray-50{background:#F7F7F8!important;border-radius:14px!important;padding:10px 14px!important}
html[data-page="admin"] .space-y-2 > .bg-gray-50 .text-sm{font-size:15px!important;color:#000!important}
html[data-page="admin"] .bg-gray-200{background:var(--ba-rail)!important}
html[data-page="admin"] .bg-blue-500{background:var(--ba-bleu)!important}
html[data-page="admin"] .text-xs.text-gray-500{color:#000!important;font-variant-numeric:tabular-nums}
/* fenêtre de création et de modification : carte flottante, champs soulignés */
html[data-page="admin"] .fixed.inset-0{background:rgba(0,0,0,.25)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html[data-page="admin"] .fixed.inset-0 .card{border:1px solid rgba(0,0,0,.08)!important;box-shadow:var(--ba-ombre-flottant)!important}
html[data-page="admin"] .fixed.inset-0 h2{font-size:28px!important;font-weight:500!important;letter-spacing:-.011em}
html[data-page="admin"] .fixed.inset-0 label{font-size:13px!important;color:#000!important}
html[data-page="admin"] .input{border:0!important;border-bottom:1px solid var(--ba-trait-champ)!important;border-radius:0!important;background:transparent!important;color:#000!important;padding:10px 0 12px!important;font-size:15px!important;box-shadow:none!important;transition:none!important}
html[data-page="admin"] .input:focus{border-bottom-color:rgba(0,0,0,.4)!important}
html[data-page="admin"] .input::placeholder{color:#000!important;opacity:1}
html[data-page="admin"] input[type="checkbox"]{accent-color:var(--ba-actif);width:18px;height:18px}
/* bouton de retour vers l'espace speaker : pilule claire à filet, comme les boutons secondaires */
html[data-page="admin"] .sc-retour{top:calc(22px + env(safe-area-inset-top))!important;left:22px!important;height:46px!important;padding:0 18px 0 14px!important;background:var(--ba-gris-bouton)!important;color:#000!important;box-shadow:inset 0 0 0 1px var(--ba-filet-bouton),var(--ba-ombre-clair)!important;font-size:14px!important}