:root{--fond: #f4f5f7;--surface: #ffffff;--surface-2: #eef0f3;--texte: #16181d;--discret: #5f6672;--bord: #dde1e6;--accent: #2563eb;--accent-texte: #ffffff;--bulle-moi: #2563eb;--bulle-lui: #e9ebef;--erreur: #c62828;--verrou: #fff4d6;--ombre: 0 1px 3px rgb(0 0 0 / .08);color-scheme:light}@media(prefers-color-scheme:dark){:root{--fond: #0f1115;--surface: #171a20;--surface-2: #20242c;--texte: #e8eaee;--discret: #9aa1ad;--bord: #2b303a;--accent: #4f8bff;--bulle-moi: #3b74f0;--bulle-lui: #252a33;--erreur: #ff6b6b;--verrou: #3a3220;--ombre: none;color-scheme:dark}}*{box-sizing:border-box}html,body,#racine{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--fond);color:var(--texte);font-size:15px}button,input,select,textarea{font:inherit;color:inherit}input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--bord);border-radius:8px;background:var(--surface)}textarea{resize:vertical}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--discret)}label.case{flex-direction:row;align-items:center;gap:8px;color:var(--texte)}label.case input{width:auto}button{cursor:pointer;border:1px solid var(--bord);background:var(--surface-2);border-radius:8px;padding:8px 14px}button:disabled{opacity:.5;cursor:not-allowed}button.principal{background:var(--accent);color:var(--accent-texte);border-color:var(--accent)}button.petit{padding:4px 10px;font-size:13px}button.lien{border:none;background:none;color:var(--accent);padding:0}.discret{color:var(--discret);font-size:13px}.centre{text-align:center}.erreur{color:var(--erreur);font-size:13px;margin:4px 0}.appli{display:flex;flex-direction:column;height:100%}.barre{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--bord)}.logo{display:flex;align-items:center;gap:8px;font-weight:700;border:none;background:none;padding:0;color:inherit;font-size:inherit;cursor:pointer}.menu{display:flex;align-items:center;gap:16px;flex:1}.burger{display:none;margin-left:auto;border:none;background:none;font-size:22px;padding:4px 10px;color:inherit}.onglets{display:flex;gap:4px}.onglets button{border:none;background:none;padding:6px 12px}.onglets button.actif{background:var(--surface-2);font-weight:600}.compte{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:14px}.contenu{flex:1;min-height:0;overflow:auto}.carte-connexion{max-width:400px;margin:48px auto;padding:24px;background:var(--surface);border:1px solid var(--bord);border-radius:14px;box-shadow:var(--ombre)}.carte-connexion h1{margin-top:0;font-size:22px}.carte-connexion form{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.jauge{display:flex;flex-direction:column;gap:2px}.jauge-barre{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}.jauge-barre span{display:block;height:100%;background:var(--erreur);transition:width .2s}.jauge[data-score="2"] .jauge-barre span{background:#e0a100}.jauge[data-score="3"] .jauge-barre span,.jauge[data-score="4"] .jauge-barre span{background:#2e9d4f}.jauge small{color:var(--discret);font-size:12px}.messagerie{display:grid;grid-template-columns:280px 1fr;height:100%}.contacts{border-right:1px solid var(--bord);background:var(--surface);padding:12px;overflow:auto}.ajout-contact{display:flex;gap:6px;margin-bottom:8px}.contacts ul{list-style:none;padding:0;margin:0}.contacts li.actif .contact{background:var(--surface-2)}.contact{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:8px;text-align:left}.contact .nom{flex:1}.avatar{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;background:var(--accent);color:var(--accent-texte);font-weight:700;flex:none}.etiquette{font-size:11px;color:var(--discret)}.pastille{background:var(--accent);color:var(--accent-texte);border-radius:10px;padding:0 7px;font-size:12px}.demande{display:flex;align-items:center;gap:6px;padding:0 8px 8px 52px;font-size:12px;color:var(--discret)}.panneau{min-width:0;height:100%}.vide{height:100%;display:grid;place-content:center;text-align:center;color:var(--discret);padding:16px}.conversation{display:flex;flex-direction:column;height:100%}.conversation header{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--bord);background:var(--surface)}.conversation header .lien{margin-left:auto;font-size:13px}.retour{display:none;border:none;background:none;font-size:20px;padding:0 6px}.verification{padding:10px 16px;background:var(--surface-2);font-size:13px}.verification code{font-size:16px;letter-spacing:1px}.fil{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.bulle{max-width:min(75%,520px);padding:8px 12px;border-radius:16px;display:flex;flex-direction:column;gap:6px}.bulle.moi{align-self:flex-end;background:var(--bulle-moi);color:#fff;border-bottom-right-radius:4px}.bulle.lui{align-self:flex-start;background:var(--bulle-lui);border-bottom-left-radius:4px}.bulle.lui.verrouillee{background:var(--verrou)}.bulle .texte{margin:0;white-space:pre-wrap;word-break:break-word}.bulle img{max-width:100%;height:auto;border-radius:10px}.bulle .meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;opacity:.8;align-items:center}.bulle.moi .meta .lien{color:#fff}.bulle .minuteur{font-weight:600}.verrou{display:flex;align-items:center;gap:8px}.cadenas{font-size:20px}.deverrouillage{display:flex;flex-direction:column;gap:8px;min-width:240px}.actions{display:flex;gap:8px;flex-wrap:wrap}.redaction{position:relative;border-top:1px solid var(--bord);background:var(--surface);padding:8px 12px;display:flex;flex-direction:column;gap:8px}.redaction .options{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.redaction .options select{width:auto}.options-chiffre{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}.options-chiffre .jauge,.options-chiffre .discret,.options-chiffre .case{grid-column:1 / -1;margin:0}.icone{font-size:18px;padding:6px 10px}.apercu{display:flex;align-items:flex-start;gap:8px}.apercu img{max-height:120px;border-radius:8px}.bascule{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px}.bascule button{border:none;background:none;padding:5px 12px;border-radius:8px}.bascule button.actif{background:var(--surface);box-shadow:var(--ombre);font-weight:600}.atelier{max-width:1100px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.atelier h1{font-size:22px;margin:0 0 4px}.intro{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.atelier-grille{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}.carte{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}.cases{display:flex;gap:16px;flex-wrap:wrap}.resultat h4{margin:0 0 6px;font-size:14px}.resultat pre{white-space:pre-wrap;word-break:break-all;background:var(--surface-2);padding:10px;border-radius:8px;margin:0 0 8px}.resultat pre.bruit{font-size:12px;color:var(--discret)}.fiche{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:16px;font-size:14px}.fiche h3{margin-top:0}.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 8px}.fiche dt{color:var(--discret)}.fiche dd{margin:0}.grille{display:grid;grid-template-columns:repeat(5,32px);gap:3px;margin-top:8px}.grille span{display:grid;place-items:center;height:32px;background:var(--surface-2);border-radius:4px;font-weight:700}.atelier-image{display:flex;flex-direction:column;gap:16px}.reglages{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}.etapes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.etapes figure{margin:0;flex:1 1 240px;max-width:340px;text-align:center}.etapes img{width:100%;border-radius:8px;border:1px solid var(--bord);image-rendering:pixelated}.etapes figcaption{font-size:13px;color:var(--discret);margin-top:4px}.fleche{font-size:24px;color:var(--discret)}@media(max-width:720px){.barre{position:relative;gap:8px}.burger{display:block}.barre .panique{margin-left:auto}.barre .panique+.burger{margin-left:0}.menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;flex-direction:column;align-items:stretch;gap:8px;padding:8px 16px 16px;background:var(--surface);border-bottom:1px solid var(--bord);box-shadow:0 8px 24px #00000040}.menu.ouvert{display:flex}.menu .onglets{flex-direction:column}.menu .onglets button{text-align:left;padding:12px;font-size:16px}.compte{margin-left:0;justify-content:space-between;border-top:1px solid var(--bord);padding-top:10px}.messagerie{grid-template-columns:1fr}.messagerie.conversation-ouverte .contacts{display:none}.messagerie:not(.conversation-ouverte) .panneau{display:none}.retour{display:inline-block}.bulle{max-width:88%}.atelier-grille,.options-chiffre{grid-template-columns:1fr}.fleche{transform:rotate(90deg)}}.texte.chiffre{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:1px;word-break:break-all}.apercu-chiffre img,.dechiffrage canvas{max-width:100%;height:auto;border-radius:10px;display:block;image-rendering:pixelated}.dechiffrage{display:flex;flex-direction:column;gap:4px}.dechiffrage small{font-size:12px;font-weight:600;opacity:.8}.redaction label.case{font-size:13px}.miniature{padding:0;border:none;background:none;cursor:zoom-in;display:block}.visionneuse{position:fixed;inset:0;z-index:100;background:#000000e0;display:grid;place-items:center;padding:16px;cursor:zoom-out}.visionneuse img{width:100%;height:100%;object-fit:contain}.visionneuse .fermer{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff26;color:#fff;font-size:18px}.tuto,.admin{max-width:900px;margin:0 auto;padding:16px 16px 48px}.tuto h1,.admin h1{font-size:24px;margin:8px 0}.tuto h2{font-size:19px;margin:32px 0 8px;scroll-margin-top:16px}.tuto h3{font-size:16px;margin:20px 0 8px}.tuto p,.tuto li{line-height:1.55}.chapeau{font-size:16px;color:var(--discret)}.attention{background:var(--verrou);border-radius:10px;padding:10px 14px}.sommaire{display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0;font-size:14px}.sommaire a{color:var(--accent);text-decoration:none}.parcours{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;margin:20px 0}.parcours figcaption{flex-basis:100%;text-align:center;font-size:13px;color:var(--discret)}.etape-parcours{flex:1 1 150px;max-width:190px;background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;text-align:center;align-items:center}.etape-parcours small{color:var(--discret);font-size:12px}.etape-parcours.serveur{border-style:dashed}.pastille-etape{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-texte);display:grid;place-items:center;font-size:13px;font-weight:700}.parcours .fleche{align-self:center}.tableau{overflow-x:auto}.tableau table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-radius:10px;overflow:hidden}.tableau th,.tableau td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bord);vertical-align:top}.tableau th{font-size:12px;color:var(--discret);font-weight:600;background:var(--surface-2)}.admin .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}.admin .stats div{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px;display:flex;flex-direction:column}.admin .stats strong{font-size:22px}.admin .stats span{font-size:12px;color:var(--discret)}.admin .filtre{max-width:320px;margin-bottom:10px}.admin tr.bloque td{opacity:.6}.admin td .actions{gap:6px}.etiquette.admin,.etiquette.bloque{margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--surface-2)}.etiquette.bloque,button.danger{color:var(--erreur)}button.principal.danger{background:var(--erreur);border-color:var(--erreur);color:#fff}.fenetre{position:fixed;inset:0;background:#00000080;display:grid;place-items:center;padding:16px;z-index:50}.fenetre .carte{max-width:440px}.fenetre h3{margin:0}@media(max-width:720px){.parcours .fleche{transform:rotate(90deg);flex-basis:100%;text-align:center}.etape-parcours{max-width:none}}.vue{height:100%}.vue[hidden]{display:none}.notif{display:block;margin:4px 0 10px;text-align:left}.secret{-webkit-text-security:disc;text-security:disc;font-family:inherit}.mon-compte{max-width:760px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:16px}.mon-compte h1{font-size:24px;margin:8px 0 0}.mon-compte h2{font-size:16px;margin:0}.mon-compte p{margin:0}.mon-compte .etat{margin-left:6px;color:var(--texte);font-weight:600}.mon-compte .infos{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:14px}.mon-compte .infos dt{color:var(--discret)}.mon-compte .infos dd{margin:0}.mon-compte .zone-danger{border-color:var(--erreur)}.mon-compte .actions{display:flex;gap:8px;align-items:center}.mon-compte .carte>button{align-self:flex-start}.camera{cursor:default;grid-template-rows:1fr auto;gap:12px}.camera video{max-width:100%;max-height:75vh;border-radius:12px;background:#000}.camera .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.vocal{display:flex;flex-direction:column;gap:4px}.vocal audio{max-width:100%;min-width:220px;height:40px}.enregistrement{flex:1;display:flex;padding:0 6px 0 14px;align-items:center;gap:8px;min-height:40px;color:var(--erreur);font-weight:600}.enregistrement .point{width:10px;height:10px;border-radius:50%;background:var(--erreur);animation:clignote 1s infinite}@keyframes clignote{50%{opacity:.2}}.titre-groupes{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.titre-groupes h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--discret);margin:0}.creation-groupe{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--surface-2);border-radius:10px;margin:6px 0}.avatar.groupe{font-size:14px}.bulle .auteur{display:block;font-size:12px;font-weight:600;color:var(--accent, #2563eb);margin-bottom:2px}.infos-groupe{padding:12px 16px;border-bottom:1px solid var(--bord);display:flex;flex-direction:column;gap:10px;background:var(--surface)}.infos-groupe .ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.infos-groupe .ligne input,.infos-groupe .ligne select{flex:1;min-width:160px}.infos-groupe .membres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.infos-groupe .membres li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.infos-groupe .membres .nom{flex:1}.indice{margin:0;padding:6px 10px;border-radius:8px;background:var(--surface-2);font-size:13px}.panique{border:none;background:transparent;font-size:18px;padding:4px 6px;border-radius:8px;cursor:pointer}.panique:hover{background:#dc26261f}.citation{margin:0 0 6px;padding:4px 8px;border-left:3px solid var(--accent);background:#0000000d;border-radius:6px;font-size:13px;display:flex;flex-direction:column}.citation span{color:var(--discret);overflow:hidden;text-overflow:ellipsis}.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.reaction{border:1px solid var(--bord);background:var(--surface);border-radius:999px;padding:1px 8px;font-size:13px;cursor:pointer}.reaction.mienne{border-color:var(--accent);background:#2563eb1a}.choix-emoji{display:flex;gap:2px;align-items:center;flex-wrap:wrap;margin-top:4px}.choix-emoji button{border:none;background:transparent;font-size:20px;cursor:pointer;padding:2px 4px;border-radius:6px}.choix-emoji button:hover{background:var(--surface-2)}.choix-emoji input{width:64px;padding:4px 6px}.fichier{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border-radius:8px;background:#0000000d;color:inherit;text-decoration:none}.fichier small{color:var(--discret)}.reponse-en-cours{display:flex;align-items:center;gap:8px}.reponse-en-cours .citation{flex:1;margin:0}.ecrit{font-size:12px;color:var(--discret);font-style:italic;padding:0 16px 4px;min-height:18px}.stegano{display:flex;flex-direction:column;gap:6px}.stegano .ligne{display:flex;gap:6px}.texte-cache{margin:0;padding:6px 10px;border-radius:8px;background:#7c3aed1f}.barre{padding-top:max(8px,env(safe-area-inset-top))}.redaction{padding-bottom:max(12px,env(safe-area-inset-bottom))}.saisie{display:flex;gap:8px;align-items:flex-end}.pilule{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;background:var(--surface-2);border:1px solid transparent;border-radius:24px;padding:3px 4px;min-height:46px}.pilule.chiffre{border-color:var(--accent)}.pilule textarea{flex:1;min-width:0;border:none;background:transparent;resize:none;padding:10px 4px;min-height:40px;max-height:140px;line-height:1.35;outline:none;box-shadow:none;overflow-y:auto}.pilule textarea:focus{outline:none;box-shadow:none}.pilule .piece-prete{flex:1;align-self:center;padding:0 6px;color:var(--discret);font-size:14px}.dans-pilule{flex:none;width:38px;height:38px;padding:0;border:none;background:none;border-radius:50%;font-size:19px;line-height:1;display:grid;place-items:center}.dans-pilule.actif{background:var(--surface)}.cadenas.actif{background:var(--accent)}.rond-envoi{flex:none;width:46px;height:46px;padding:0;border-radius:50%;border:none;background:var(--accent);color:var(--accent-texte);font-size:20px;display:grid;place-items:center}.rond-envoi .tourne{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .8s linear infinite}@keyframes tourne{to{transform:rotate(360deg)}}.resume-envoi{align-self:flex-start;border:none;background:var(--surface-2);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--discret)}.resume-envoi .manque{color:var(--erreur);font-weight:600}.panneau-envoi{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;padding-bottom:4px;border-bottom:1px solid var(--bord)}.panneau-envoi .options{flex-wrap:nowrap}.panneau-envoi .options select{flex:1;min-width:0}.fermer-panneau{flex:none;border:none;background:none;font-size:16px;padding:4px 8px;margin-left:auto}.menu-pieces{display:flex;justify-content:space-around;gap:8px;padding:8px 4px;background:var(--surface-2);border-radius:16px}.menu-pieces button{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;padding:4px 8px}.menu-pieces .rond{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px}.rond.violet{background:#8b5cf6}.rond.rose{background:#ec4899}.rond.bleu{background:#3b82f6}.recherche{background:var(--surface-2);border-radius:12px;padding:8px 10px;margin-bottom:8px}.recherche h3{margin:0 0 6px;font-size:13px;color:var(--discret);display:flex;justify-content:space-between}.trouves{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.trouves li{display:flex;align-items:center;gap:8px}.trouves .nom{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}.trouves .nom small{color:var(--discret);font-size:12px}.grille-infos{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grille-infos .ligne{grid-column:1 / -1;display:flex;gap:10px;align-items:center}@media(max-width:700px){.grille-infos{grid-template-columns:1fr}}.nom-compte{display:inline-flex;align-items:center;gap:6px;color:var(--texte);font-weight:600}.nom-compte .roue{font-size:17px}.nom-compte.actif .roue,.nom-compte:hover .roue{transform:rotate(60deg)}.nom-compte .roue{transition:transform .3s;display:inline-block}button.grand{width:100%;padding:14px 18px;font-size:17px;border-radius:12px}.invitation-notif{display:flex;flex-direction:column;gap:12px;text-align:center;padding:28px 22px}.invitation-notif h2{margin:0;font-size:22px}.invitation-notif p{margin:0}.invitation-notif .cloche{font-size:56px;line-height:1}
