/* (07/10, PastiiJay) Identité PAIRPING : tricolore (noir, blanc, gris #222222), police DIN ; plus d’orange. Maquette : Claudal/partage-comptes/maquettes/identite-pairping.html */
:root{--fond:#161616;--panneau:#1b1b1b;--carte:#222222;--bord:#3a3a3a;--texte:#f2f2f2;--doux:#9b9b9b;--accent:#ffffff;--ok:#76b900;--ko:#ed1c24;--att:#f5b041}
/* (13/10, PastiiJay : « le texte des boutons est trop bas ») la DIN se posait ~5 % trop bas (ses mesures internes : vides pour Mac/iPhone, déséquilibrées sous Windows) :
(PastiiJay, la loi finale : « la moyenne de hauteur entre minuscule et majuscule ») le texte centré sur la MOYENNE du milieu des
minuscules et de celui des majuscules ; les DESSINS se centrent sur la majuscule (0,048 em plus haut que le milieu de la ligne), même hauteur de ligne qu'avant, identique sur tous les appareils */
/* (20/10, PastiiJay : « ok pour D-DIN ») D-DIN de Datto, licence libre OFL 1.1 (public/polices/D-DIN-OFL.txt) : la FF DIN est commerciale (licence web incertaine) ; le logo reste en DIN (une image) */
@font-face{font-family:DIN;src:url(/polices/D-DIN-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:DIN;src:url(/polices/D-DIN.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:DINPro;src:url(/polices/D-DIN-Bold.woff2) format("woff2");font-weight:900;font-display:swap}
*{box-sizing:border-box}
body{margin:0;display:flex;min-height:100vh;background:var(--fond);color:var(--texte);font:16px/1.5 DIN,"Segoe UI",system-ui,sans-serif;font-weight:300}
/* (08/10) Le gras est TOUJOURS le DIN gras : avec un texte en 300, « bolder » donnait 400 = la DIN fine (le gras disparaissait). */
b,strong{font-weight:700}
.menu{width:220px;background:var(--panneau);border-right:1px solid var(--bord);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.logo{font-weight:700;font-size:20px;display:flex;align-items:center;gap:10px;margin:0 8px 22px}
.point{width:10px;height:10px;border-radius:50%;background:var(--doux)}
.point.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
nav a{display:block;padding:8px 12px;border-radius:4px;color:var(--doux);cursor:pointer;text-decoration:none;margin:1px 0}
nav a:hover{background:var(--carte);color:var(--texte)}
nav a.actif{background:var(--accent);color:#1a1918;font-weight:600}
nav a.sous{padding-left:26px;font-size:14px}
/* Catégories du menu (28/09) : bien plus visibles que leurs onglets (gras, couleur, icône, espace au-dessus) */
.groupe{margin:18px 6px 4px;padding-top:10px;border-top:1px solid var(--bord);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
nav > .groupe:first-child{margin-top:0;padding-top:0;border-top:none}
/* Catégories repliables (28/09) : clic sur la catégorie ; le menu défile tout seul s'il est plus haut que la fenêtre */
.groupe{cursor:pointer;user-select:none;display:flex;align-items:center}
.groupe::after{content:'▾';margin-left:auto;font-size:11px;opacity:.7}
.groupe.replie::after{content:'▸'}
nav a.cache-groupe{display:none}
.menu{overflow-y:auto}
nav a.bientot{opacity:.45}
nav .discret{font-size:11px;color:var(--doux);margin-left:4px}
nav a.actif .discret{color:#1a1918}
.bas{margin-top:auto;color:var(--doux);font-size:12px;padding:0 12px}
main{flex:1;min-width:0;padding:28px 36px;max-width:2560px}
h1{margin:0 0 20px;font-size:24px}h1 small{font-size:13px;color:var(--doux);font-weight:400;margin-left:8px}
h3{margin:0 0 12px;font-size:15px}
.page{display:none}.page.visible{display:block}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.deux{display:grid;grid-template-columns:220px 1fr;gap:16px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:4px;padding:18px}
.aide{color:var(--doux);font-size:13px;margin:10px 0 0}
.lignes div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--bord)}
.lignes div:last-child{border:0}.lignes span:first-child{color:var(--doux)}
button{background:var(--panneau);color:var(--texte);border:1px solid var(--bord);border-radius:4px;padding:8px 14px;cursor:pointer;font:inherit}
@media (hover:hover) and (pointer:fine){button:hover,.entete-gauche > a:hover{border-color:var(--skin, var(--accent))}} /* (11/10 au soir, PastiiJay : « il reste entouré en blanc… il faut que je reclique ailleurs ») sur téléphone, le survol restait collé après un appui : seulement avec une vraie souris */
button.principal,.boutons button.actif{background:var(--skin, var(--accent));color:var(--sur-skin, #1a1918);border-color:var(--skin, var(--accent));font-weight:600} /* (12/10, PastiiJay) les boutons principaux à la couleur du skin (blancs en Sombre) */
.boutons{display:flex;gap:8px;flex-wrap:wrap}
input,textarea,select{background:var(--panneau);color:var(--texte);border:1px solid var(--bord);border-radius:4px;padding:8px 10px;font:inherit;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:#6a6a6a} /* (11/10, PastiiJay : « ça s'éclaire en bleu… ça n'a pas de sens ») le contour bleu du navigateur remplacé par un gris plus clair (le bleu est réservé aux Légendaires) */
textarea{min-height:260px;resize:vertical;font-size:13px;line-height:1.45}
label.champ{display:block;margin:12px 0 4px;color:var(--doux);font-size:13px}
.bascule{display:flex;align-items:center;gap:10px;cursor:pointer}
.bascule input{display:none}
.bascule span{width:42px;height:24px;border-radius:4px;background:var(--bord);position:relative;transition:.2s;flex:none}
.bascule span:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.bascule input:checked+span{background:var(--att)}.bascule input:checked+span:after{left:21px}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:10px 12px;border-radius:4px;cursor:pointer;border:1px solid transparent}
.liste li:hover{background:var(--carte)}.liste li.actif{border-color:var(--accent);background:var(--carte)}
.liste small{display:block;color:var(--doux)}
.ajout{display:flex;gap:8px;margin:14px 0}
.tableau{width:100%;border-collapse:collapse;margin-top:6px}
.tableau th,.tableau td{padding:8px;border-bottom:1px solid var(--bord);text-align:center}
.tableau th:first-child,.tableau td:first-child{text-align:left}
.pastille{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.msg{color:var(--doux);font-size:13px}
.suppr{background:none;border:0;color:var(--ko);padding:2px 6px}
#toast{position:fixed;bottom:20px;right:20px;background:var(--carte);border:1px solid var(--bord);padding:10px 16px;border-radius:4px;opacity:0;transition:.3s;pointer-events:none}
#toast.vu{opacity:1}
.badge{font-size:12px;padding:2px 8px;border-radius:4px;background:var(--panneau);border:1px solid var(--bord);color:var(--doux)}
.badge.test{color:var(--att);border-color:var(--att)}
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.onglets button.actif{background:var(--accent);color:#1a1918;border-color:var(--accent)}
.defile{max-height:65vh;overflow:auto}
.tableau td.texte{text-align:left;max-width:1100px;white-space:pre-wrap;font-size:13px}
.tableau td[contenteditable]{outline:1px dashed transparent;cursor:text}.tableau td[contenteditable]:focus{outline-color:var(--accent);background:var(--panneau)}
.mini{padding:3px 8px;font-size:12px}
.barre{height:8px;background:var(--panneau);border-radius:4px;margin-top:10px;overflow:hidden}.barre div{height:100%;background:var(--ok);width:0}
.ex{border:1px solid var(--bord);border-radius:4px;padding:12px;margin-top:10px}.ex .ctx{color:var(--doux);font-size:13px;white-space:pre-wrap;border-left:3px solid var(--bord);padding-left:8px}
.ex textarea{min-height:60px}.ex .rate{color:var(--ko);text-decoration:line-through;white-space:pre-wrap;font-size:13px}
.v-ok{color:var(--ok)}.v-juste{color:var(--att)}.v-trop{color:var(--ko);font-weight:600}
.place{margin-top:12px;font-size:14px}.emp{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center;margin:6px 0}
.hf{border-top:1px solid var(--bord);padding:8px 0}.hf summary{cursor:pointer}
.depot{border:2px dashed var(--bord);border-radius:4px;padding:28px;text-align:center;color:var(--doux);margin-top:14px}.depot.survol{border-color:var(--accent);color:var(--texte)}
.lien{color:var(--accent);cursor:pointer;text-decoration:underline}
.candidats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
.cand{border:1px solid var(--bord);border-radius:4px;padding:12px}.cand h4{margin:0 0 6px}.cand audio{width:100%;height:32px;margin:3px 0}
.cand .ref{font-size:12px;color:var(--doux);margin-bottom:6px}
@media (max-width:720px){body{flex-direction:column}.menu{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:8px;gap:6px;align-items:center}.logo{margin:0 8px 0 0;font-size:16px}nav{display:flex;gap:4px}nav a{white-space:nowrap;padding:6px 10px}nav a.sous{padding-left:10px}.groupe,.bas{display:none}main{padding:16px}.deux{grid-template-columns:1fr}}
.lecteur{display:flex;align-items:center;gap:8px;background:var(--panneau);border:1px solid var(--bord);border-radius:4px;padding:8px 10px;margin:12px 0;position:sticky;top:8px;z-index:2}
.lecteur .titre{flex:1;font-size:13px;color:var(--doux);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lecteur button{padding:4px 10px}.bascule.petit span{width:34px;height:20px}.bascule.petit span:after{width:14px;height:14px}.bascule.petit input:checked+span:after{left:17px}
.piste{display:block;width:100%;text-align:left;margin:3px 0}.piste.actif{border-color:var(--accent);color:var(--accent)}
.avance{margin-top:16px;border-top:1px solid var(--bord);padding-top:10px}.avance summary{cursor:pointer;color:var(--doux)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}.opt{display:flex;flex-direction:column;gap:3px}.opt label{font-size:13px}
.micro{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}.micro button.rec{background:var(--ko);color:#fff;border-color:var(--ko)}
.niveau{flex:1;min-width:120px;height:8px;background:var(--panneau);border-radius:4px;overflow:hidden}.niveau div{height:100%;width:0;background:var(--ok);transition:width .08s}
#microApercu audio{width:100%;margin-top:10px}
.roles summary { cursor: pointer; }
.roles label { display: block; font-size: .9em; white-space: nowrap; }
/* Barre de la carte graphique (façon réglages graphiques d'un jeu) */
.barreCarte { position: relative; height: 18px; border-radius: 4px; background: rgba(255,255,255,.07); margin: 10px 0 6px; overflow: visible; }
.barreCarte .segs { display: flex; height: 100%; border-radius: 4px; overflow: hidden; }
.barreCarte .seg { height: 100%; border-right: 1px solid rgba(0,0,0,.35); }
.barreCarte .limite { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 4px #000; }
.barreCarte.trop .segs { box-shadow: 0 0 0 2px #e05a5a; }
.barreCarte.mini { height: 8px; margin: 2px 0; min-width: 140px; }
.barreCarte.mini .limite { top: -2px; bottom: -2px; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85em; opacity: .85; margin-bottom: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.placeCol small { font-size: .8em; }
/* En direct */
#page-direct.visible { display: flex; flex-direction: column; height: calc(100vh - 48px); }
#page-direct:fullscreen { background: var(--fond, #1f1e1d); padding: 16px; height: 100vh; }
.direct-barre .filtres { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.puce { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 4px; background: rgba(255,255,255,.06); font-size: .88em; cursor: pointer; user-select: none; }
.puce input { width: auto; margin: 0; }
.filtres .sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; }
.journal { flex: 1; min-height: 300px; overflow-y: auto; background: #161514; border-radius: 4px; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45; }
.journal .l { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.journal .h { color: #86837b; margin-right: 8px; }
.journal .c-chrono { color: #b3afa5; }
.journal .c-actions { color: #d7b8ff; }
.journal .c-memoire { color: #9fd8c2; }
.journal .c-ecoute { color: #a8a59c; font-style: italic; }
.journal .c-systeme { color: #8f8c84; }
.journal .err { color: #ff8a8a; }
.carte.large { grid-column: 1 / -1; }
@media (max-width: 700px) { #page-direct.visible { height: calc(100vh - 90px); } .journal { font-size: 12px; } }
/* Accueil : état en tuiles, ressources */
.etat-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tuile { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px; background: rgba(255,255,255,.04); border-left: 3px solid #ffffff; }
.tuile .ic { font-size: 1.3em; }
.tuile small { display: block; opacity: .65; font-size: .78em; }
.tuile b { font-weight: 600; }
.tuile.vert { border-color: #3fc59a; } .tuile.gris { border-color: #6b6963; opacity: .75; } .tuile.orange { border-color: #f0b35a; } .tuile.violet { border-color: #b88cff; } .tuile.bleu { border-color: #ffffff; }
.tuile .pseudo { font-weight: 600; margin-right: 4px; }
.badge.gris { background: rgba(255,255,255,.1); color: inherit; }
.gpu { margin-bottom: 16px; }
.gpu-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.aide-liste { margin: 8px 0 0; padding-left: 18px; }
.aide-liste li { margin: 2px 0; }
/* Onglets */
.onglets { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.onglets button { border-radius: 4px 4px 0 0; opacity: .7; }
.onglets button.actif { opacity: 1; background: var(--accent, #ffffff); color: #1a1918; }
/* LoRA : tri lisible */
.ex .ctx > div { margin: 2px 0; }
.ex .qui { opacity: .6; font-size: .85em; margin-right: 4px; }
.ex .q-principale { font-size: 1.25em; font-weight: 700; color: #fff; background: rgba(255,255,255,.15); border-radius: 4px; padding: 4px 8px; margin: 6px 0 !important; }
.ex .q-liee { font-weight: 700; color: #f0eee6; }
.ex .q-claudal { font-style: italic; opacity: .75; }
.ex .rate { margin-top: 6px; }
button.vert { background: #1f7a57; color: #fff; } button.vert:hover { background: #26946a; }
button.rouge { background: #8a2f2f; color: #fff; } button.rouge:hover { background: #a63939; }
.auto { position: relative; }
.propositions { position: absolute; z-index: 5; left: 0; right: 0; background: #2b2a28; border: 1px solid var(--bord); border-radius: 4px; padding: 4px; }
.propositions > div { padding: 6px 8px; border-radius: 4px; cursor: pointer; } .propositions > div:hover { background: rgba(255,255,255,.2); }
/* Accueil : tout en pleine largeur, l'un sous l'autre */
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile .carte { width: 100%; box-sizing: border-box; }
.etat-tuiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Modes façon « soundboard » : gros boutons faciles à cliquer */
#modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#modes button { padding: 16px 10px; font-size: 1.05em; font-weight: 600; border-radius: 4px; }
textarea.grand { min-height: 420px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45; }
.texte-bloc + .texte-bloc { margin-top: 24px; }
/* Loupe : le texte suit la taille choisie (tout est en em à l'intérieur) */
.loupe { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.loupe button { padding: 4px 10px; font-size: 14px; }
#directJournal { font-size: 14px; }
#triListe .ex .ctx { font-size: 1em; } #triListe .ex .rate { font-size: .95em; } #triListe textarea { font-size: 1em; }
/* Grands écrans (16:9, 32:9) : l'interface prend la largeur (jusqu'à 2 560 px), les listes gagnent des colonnes */
@media (min-width: 1600px) { .deux { grid-template-columns: 280px 1fr; } .etat-tuiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
/* Téléphone : tout sur une colonne, tableaux défilants, boutons faciles à toucher */
@media (max-width: 720px) {
.pile .carte, .carte { padding: 12px; }
.tableau { display: block; overflow-x: auto; }
.boutons button, .actions button { min-height: 40px; }
#modes { grid-template-columns: repeat(2, 1fr); }
.gpu-tete { font-size: .9em; }
}
.prio { padding-left: 22px; } .prio li { padding: 6px 4px; border-bottom: 1px solid var(--bord); display: flex; align-items: center; gap: 8px; } .prio li.fixe { opacity: .8; } .prio-btn { margin-left: auto; display: inline-flex; gap: 4px; }
/* Un panneau caché reste caché, même s'il a une mise en page (grille…) : corrige « Règles communes » sous les modes */
[hidden] { display: none !important; }
.tuile.allume { box-shadow: 0 0 0 1px #b88cff, 0 0 14px rgba(184,140,255,.35); }
.part-claudal { font-size: 1.15em; font-weight: 700; color: #ffffff; background: rgba(255,255,255,.12); padding: 2px 10px; border-radius: 4px; }
/* Modèles : modèle | matériel | moteur de calcul sur une ligne (écran large) */
#emplacements .emp { display: grid; grid-template-columns: 220px minmax(260px, 2fr) minmax(160px, 1fr) minmax(150px, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
#emplacements .emp small { grid-column: 2 / -1; }
@media (max-width: 900px) { #emplacements .emp { grid-template-columns: 1fr; } }
.tableau th.triable{cursor:pointer;user-select:none;white-space:nowrap}.tableau th.triable:hover{color:var(--accent,#ffffff)}.tableau th.trie{color:var(--accent,#ffffff)}
.fenetre{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.fenetre-boite{background:var(--panneau);border:1px solid var(--bord);border-radius:4px;width:min(1400px,100%);height:100%;display:flex;flex-direction:column}
.fenetre-tete{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bord)}.fenetre-tete h3{flex:1;margin:0}
#fenetreContenu{overflow:auto;padding:12px 16px;flex:1}#fenetreContenu input{margin:6px 0 10px;width:100%}
.cv-resume{color:var(--doux);font-style:italic}.cv-l{padding:3px 0;line-height:1.45}.cv-l b{color:var(--accent);margin-right:4px}.cv-claudal b{color:var(--ok)}
.cv-ev{color:var(--doux);font-size:.85em;padding:3px 0}.cv-h{color:var(--doux);font-size:.8em;margin-right:8px;font-variant-numeric:tabular-nums}
td.lien-conv{cursor:pointer}td.lien-conv:hover{color:var(--accent);text-decoration:underline}
a{color:var(--accent)}
.lignes-moteur{display:grid;gap:6px;margin:6px 0 10px}.lignes-moteur .etiq{display:inline-block;min-width:170px;color:var(--doux)}
.rubrique{border:1px solid var(--bord);border-radius:4px;margin:10px 0;background:var(--panneau)}.rubrique>summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:1.05em}.rubrique>summary small{color:var(--doux);font-weight:400;margin-left:6px}
.rubrique .texte-bloc{padding:4px 16px 16px;border-top:1px solid var(--bord)}
textarea.mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.vars{font-size:.85em;color:var(--doux)}.var{font-family:ui-monospace,Consolas,monospace;background:var(--carte);border:1px solid var(--bord);border-radius:4px;padding:1px 6px;color:var(--accent)}
.fixe{font-size:.85em;color:var(--doux);background:var(--carte);border-left:3px solid var(--bord);padding:4px 10px;border-radius:4px}
.avec-mots{display:flex;gap:8px;margin-top:8px}.avec-mots input{flex:1}
.proposition{margin-top:10px;border:1px solid var(--accent);border-radius:4px;padding:10px}
.diff{font-family:ui-monospace,Consolas,monospace;font-size:.85em;max-height:420px;overflow:auto;white-space:pre-wrap}.dplus{background:rgba(118,185,0,.15);color:var(--ok)}.dmoins{background:rgba(255,107,107,.12);color:var(--ko);text-decoration:line-through}.degal{color:var(--doux)}
.code-bloc{padding:8px 16px;border-top:1px solid var(--bord)}.code-bloc pre{white-space:pre-wrap;margin:4px 0 0;color:var(--doux);font-size:.85em}
.mat{margin-top:14px}.mat-reglage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}.mat-reglage input[type=range]{flex:1;min-width:180px}
.grand-juge{margin-top:14px;border-top:1px solid var(--bord);padding-top:10px}.grand-juge h4{margin:0 0 4px}
.retour{border-top:1px solid var(--bord);padding:10px 0;display:grid;gap:4px}.retour.annule{opacity:.6}.cv-form{display:flex;gap:6px;margin:4px 0 8px 40px}.cv-form textarea{flex:1}.cv-avis{padding:0 6px;opacity:.6}.cv-avis:hover{opacity:1}
.point{border:1px solid var(--bord);border-radius:4px;padding:8px 10px;margin:8px 0}.point.erreur{border-color:var(--att)}.point-tete{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.compris{margin:6px 0}.reeval,.refaire{display:flex;gap:6px;margin-top:6px}.reeval textarea,.refaire textarea{flex:1}button.gris{opacity:.5}
#emplacements .suivi-lora { grid-column: 3 / -1; display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
@media (max-width: 900px) { #emplacements .suivi-lora { grid-column: auto; } }
.ressources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ressources .etiquette { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.segments { display: inline-flex; border: 1px solid var(--bord, #444); border-radius: 4px; overflow: hidden; }
.segments button { border: 0; border-radius: 0; margin: 0; padding: 6px 12px; background: transparent; }
.segments button + button { border-left: 1px solid var(--bord, #444); }
.segments button.actif { background: var(--accent); color: #1a1918; font-weight: 600; }
.segments button.effectif { box-shadow: inset 0 -3px 0 var(--accent, #ffffff); }
.ressources small { flex-basis: 100%; }
#listeTaches { display: grid; gap: 10px; }
.tache .tete-tache { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tache h3 { margin: 0; }
.tache p { margin: 6px 0; }
.pastille { font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--bord); }
/* (28/09) Une pastille AVEC du texte (« en service », « prête »…) est une étiquette : elle prend la taille de son texte.
Avant, elle gardait les 10 px du petit rond de couleur (même nom de style) et le texte débordait sur la description. */
.pastille:not(:empty) { width: auto; height: auto; margin-right: 0; white-space: nowrap; flex-shrink: 0; line-height: 1.4; }
.pastille.ok { border-color: var(--ok); color: var(--ok); }
.pastille.pause { opacity: .7; }
.pastille.attente { color: var(--doux); }
.pastille.pret { border-color: var(--accent); color: var(--accent); }
.option-tache { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-left: 8px; cursor: pointer; }
/* Menu repliable (28/09) : ☰ dans la barre ; replié tout seul en plein écran */
body.menu-replie:not(.menu-ouvert) aside.menu { display: none; }
/* Barre d'accès rapide (28/09) : collée en haut, sur toutes les pages et en plein écran */
.barre-rapide { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; margin: -12px 0 14px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; }
.barre-rapide button, .barre-rapide select { padding: 3px 8px; min-width: 32px; font-size: 15px; line-height: 1.4; }
.barre-rapide button.actif { background: var(--accent); color: #1a1918; border-color: var(--accent); }
.barre-rapide button.effectif { border-color: var(--accent); color: var(--accent); }
.barre-rapide .sep { width: 1px; align-self: stretch; background: var(--bord); margin: 0 4px; }
.groupe-barre { display: inline-flex; gap: 3px; }
/* Familles repliables de la barre (28/09) */
.famille { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--bord); border-radius: 4px; } /* (28/09 : contour blanc essayé, trop flash : retour à la couleur des autres contours) */
.famille .contenu-famille { display: inline-flex; gap: 3px; }
.famille.fermee .contenu-famille { display: none; }
.tete-famille { display: inline-flex; align-items: center; justify-content: center; }
.famille.fermee.actif-dedans .tete-famille { box-shadow: 0 0 0 2px var(--accent); } /* replié mais un bouton est allumé dedans */
.barre-droite { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.avec-point { position: relative; }
.avec-point.notif::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ko); box-shadow: 0 0 0 2px var(--panneau); }
.enveloppe { margin-left: auto; font-size: 14px; padding: 2px 8px; border-radius: 4px; background: var(--att); color: #1a1918; cursor: pointer; text-decoration: none; }
/* Écran partagé : la page courante à gauche, la page choisie à droite */
main.double { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 10px; align-content: start; }
main.double > .barre-rapide { grid-column: 1 / -1; order: 0; }
main.double > .page.visible { order: 1; } main.double > .separateur-double { order: 2; } main.double > .page.droite { order: 3; }
.separateur-double { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.separateur-double::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--bord); }
.boutons-separateur { position: sticky; top: 70px; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.separateur-double button { padding: 4px 5px; }
#redimDouble { cursor: ew-resize; touch-action: none; }
body.redim { cursor: ew-resize; user-select: none; }
.info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 4px; border: 1px solid var(--doux); color: var(--doux); font-size: 11px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; }
.info:hover { border-color: var(--accent); color: var(--accent); }
.barre-rapide select { width: auto; max-width: 200px; }
main.double > .page.visible { min-width: 0; }
main:fullscreen { background: var(--fond); overflow: auto; padding: 16px; }
main:fullscreen #page-direct.visible, main.double #page-direct.visible { height: calc(100vh - 90px); }
.ordre-perso { display: inline-flex; gap: 2px; margin-right: 6px; }
.ordre-perso button { padding: 0 5px; font-size: 11px; }
/* Local : discussion privée (28/09) */
#page-local.visible { display: block; height: calc(100vh - 130px); }
.local-barre label { display: flex; align-items: center; gap: 6px; } .local-barre label input { width: auto; margin: 0; }
.local { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; height: 100%; }
.local.replie { grid-template-columns: minmax(0, 1fr); } .local.replie .local-barre { display: none; }
.local-barre { display: flex; flex-direction: column; gap: 8px; min-height: 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 10px; }
.local-barre-tete { display: flex; align-items: center; gap: 8px; }
.local-barre-tete button, .local-chat-tete button { padding: 2px 8px; }
#localListe { flex: 1; overflow-y: auto; min-height: 0; }
.local-section { margin: 10px 2px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); display: flex; align-items: center; gap: 6px; }
.local-section button { padding: 0 6px; font-size: 12px; margin-left: auto; }
.local-section .nom-projet { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texte); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (11/10) le nom d'un projet tel qu'il a été écrit, sur une ligne */
.local-conv { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.local-conv:hover { background: var(--carte); } .local-conv.actif { background: var(--carte); outline: 1px solid var(--skin, var(--accent)); }
.local-conv .titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-conv .actions { display: none; gap: 2px; } .local-conv:hover .actions { display: inline-flex; }
/* Explorateur (28/09) : glisser-déposer et menu du clic droit */
.local-zone { border-radius: 4px; padding-bottom: 2px; }
.local-zone.survol { outline: 2px dashed var(--accent); background: rgba(255,255,255,.06); }
.local-zone .local-section { cursor: pointer; }
.local-conv.glisse { opacity: .4; }
.local-conv[draggable="true"] { cursor: grab; }
.msg.vide { font-size: 12px; padding: 4px 8px; }
.menu-contexte { position: fixed; z-index: 100; min-width: 220px; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.menu-contexte button { text-align: left; border: none; background: none; padding: 6px 10px; border-radius: 4px; }
.menu-contexte button:hover { background: var(--panneau); }
.menu-contexte button.danger { color: var(--ko); }
.menu-contexte hr { border: none; border-top: 1px solid var(--bord); margin: 4px 0; }
.menu-contexte .mc-titre { font-size: 11px; color: var(--doux); padding: 4px 10px 0; text-transform: uppercase; }
.local-conv .actions button { padding: 0 4px; font-size: 12px; border: none; background: none; }
.local-conv .extrait { display: block; font-size: 11px; color: var(--doux); }
.local-chat { display: flex; flex-direction: column; min-height: 0; }
.local-chat-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 18px; }
.chat-boutons { display: grid; grid-template-columns: 44px 64px; grid-template-rows: 1fr 1fr; gap: 6px; }
.chat-boutons #localMaintenir { grid-column: 1; grid-row: 1; } .chat-boutons #localMicro { grid-column: 1; grid-row: 2; }
.chat-boutons .envoyer { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; }
.chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; }
.bulle { max-width: 75%; padding: 10px 14px; border-radius: 4px; line-height: 1.5; white-space: normal; }
.bulle.moi { align-self: flex-end; background: var(--accent); color: #1a1918; border-bottom-right-radius: 4px; }
.bulle.lui { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.bulle.attente { opacity: .8; }
/* (20/10, maquette « La carte dans la conversation » validée) le morceau de carte d'un lieu, sa ligne (nom, adresse) et « Y aller » ; les contrôles de MapLibre aux couleurs du site */
.bulle .carte-alfred { margin-top: 10px; border: 1px solid var(--bord); border-radius: 4px; overflow: hidden; background: var(--panneau); max-width: 420px; }
.bulle .carte-vue { height: 200px; position: relative; }
.bulle .carte-vue.carte-vide { display: flex; align-items: center; justify-content: center; color: var(--doux); font-size: 14px; padding: 12px; text-align: center; }
.bulle .carte-lieu { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--bord); }
.bulle .carte-lieu div { flex: 1; min-width: 0; } .bulle .carte-lieu b { display: block; } .bulle .carte-lieu small { display: block; color: var(--doux); line-height: 1.35; }
.bulle.lui .carte-lieu a.carte-aller { flex: none; font-weight: 700; text-decoration: none; word-break: normal; border-radius: 4px; padding: 8px 14px; background: var(--eclat); color: var(--sur-eclat); }
/* (22/10, maquette « La délégation » C, conseil des 5) LA CARTE D'UN TRAVAIL CONFIÉ : coins légèrement anguleux, dessins au trait, l'état en mots */
.bulle .travail { margin: 10px 0; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; max-width: 520px; transition: border-color .4s; }
.bulle .travail-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bulle .travail-titres { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.bulle .travail-titres b { font-size: 14px; overflow-wrap: anywhere; }
.bulle .travail-sorte { font-size: 12px; color: var(--doux); }
.bulle .travail-etat { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--bord); border-radius: 3px; color: var(--doux); white-space: nowrap; }
.bulle .travail[data-etat="encours"] .travail-etat { color: var(--texte); border-color: var(--texte); }
.bulle .travail[data-etat="question"], .bulle .travail[data-etat="rate"] { border-color: var(--att); }
.bulle .travail[data-etat="question"] .travail-etat, .bulle .travail[data-etat="rate"] .travail-etat { color: var(--att); border-color: var(--att); }
.bulle .travail[data-etat="pret"] .travail-etat { color: var(--ok); border-color: var(--ok); }
.bulle .travail .phrase-travail { font-size: 13px; }
.bulle .travail-note, .bulle .travail-rate { font-size: 12px; color: var(--doux); }
.bulle .travail-rate .code-outils { display: flex; justify-content: flex-start; margin: 6px 0 0; }
.bulle .travail .entite-anim { width: 30px; height: 30px; }
.bulle .travail .entite-anim svg { width: 30px; height: 30px; overflow: visible; }
.bulle .travail .atelier path { fill: none; stroke: var(--texte); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: atelierTrace 2.6s ease-in-out infinite; }
.bulle .travail .atelier path:nth-child(2) { animation-delay: .35s; } .bulle .travail .atelier path:nth-child(3) { animation-delay: .7s; }
@keyframes atelierTrace { 0% { stroke-dashoffset: 60; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
.bulle .travail .attend path { fill: none; stroke: var(--doux); stroke-width: 1.6; stroke-linecap: round; }
.bulle .travail .attend .aiguille { transform-origin: 15px 15px; animation: aiguilleTravail 3s linear infinite; }
@keyframes aiguilleTravail { to { transform: rotate(360deg); } }
.bulle .travail[data-etat="question"] .attend path { stroke: var(--att); }
.bulle .travail .fini path { fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 40; animation: cocheTravail .6s ease-out both; }
@keyframes cocheTravail { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.bulle .travail .rate path { fill: none; stroke: var(--att); stroke-width: 1.8; stroke-linecap: round; }
/* repliée (la réponse qui l'a lancée, une fois fini) : un bouton mène au fichier, en bas */
.bulle .travail.replie { padding: 6px 10px; }
.bulle .travail.replie .entite-anim, .bulle .travail.replie .entite-anim svg { width: 18px; height: 18px; }
.bulle .travail .vers-bas { background: none; font: inherit; font-size: 11px; font-weight: 700; color: var(--ok); border-color: var(--ok); cursor: pointer; text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.bulle .travail .vers-bas:hover { background: var(--fond); }
/* (les contrôles et la mention de MapLibre gardent leur fond blanc d'origine, lisible dans les deux thèmes ; le texte de la bulle ne doit pas les éclaircir) */
.bulle.lui .carte-vue .maplibregl-ctrl-attrib, .bulle.lui .carte-vue .maplibregl-ctrl-attrib a { font-size: 10px; color: rgba(0, 0, 0, .75); text-decoration: none; word-break: normal; }
/* ▶ lire la réponse à voix haute, à la demande (29/09) */
.chat-saisie { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
/* (18/10, PastiiJay, maquette « La zone d'écriture qui grandit », A) la zone grandit avec le texte, de 3 à 9 lignes (compte.js grandirZone), puis l'ascenseur ;
les boutons gardent leur taille, collés en bas */
.chat-saisie { align-items: flex-end !important; }
.chat-saisie textarea { flex: 1; resize: none; min-height: 88px; max-height: min(225.7px, 40vh); overflow-y: auto; box-sizing: border-box; margin: 0; }
.chat-boutons { min-height: 88px; height: 112.55px; }
/* Tribunal : boîte aux lettres des seconds regards (28/09) */
.boite { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 12px; }
@media (max-width: 800px) { .boite { grid-template-columns: 1fr; } }
.courrier { border: 1px solid var(--bord); border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; background: var(--panneau); }
.courrier.actif { border-color: var(--accent); }
.courrier .objet { color: var(--att); }
.courrier.nonlu .objet { font-weight: 700; }
.courrier.nonlu::before { content: '●'; color: var(--accent); margin-right: 6px; }
.courrier .msg, .etape .msg { color: var(--doux); font-size: 13px; }
.courrier.panne .objet, .objet-grand.panne { color: var(--ko); }
/* Messagerie (28/09) : une vraie lettre (De / Objet), leçons une par une */
.courrier .expediteur { color: var(--texte); } .courrier .objet { display: block; }
.lettre-tete { border-bottom: 1px solid var(--bord); padding-bottom: 8px; margin-bottom: 10px; display: grid; gap: 2px; }
.lettre-tete .objet-grand { font-size: 17px; margin: 0; }
.lecon { border: 1px solid var(--bord); border-radius: 4px; padding: 8px 10px; margin: 6px 0; background: var(--panneau); }
.lecon.actif { border-color: var(--accent); }
.lecon.faite { opacity: .8; }
.total-modeles { margin: 4px 0 10px; font-size: 15px; }
.precision { margin: 6px 0; padding: 6px 8px; border-left: 3px solid var(--att); background: rgba(245,176,65,.08); border-radius: 4px; font-size: 14px; }
#filtreMessages select { width: auto; margin-left: auto; }
.objet-grand { font-size: 20px; font-weight: 700; color: var(--att); margin: 0 0 6px; }
.etape { border-left: 3px solid var(--bord); padding: 4px 10px; margin: 6px 0; white-space: pre-wrap; }
.etape.verdict { border-color: var(--accent); }
.conv-tribunal > div { padding: 4px 8px; margin: 3px 0; border-radius: 4px; }
.cle-contexte { color: var(--doux); font-size: 13px; opacity: .75; }
.cle-source { font-size: 17px; background: rgba(245,176,65,.15); border-left: 4px solid var(--att); }
.cle-reponse { font-size: 17px; background: rgba(255,255,255,.15); border-left: 4px solid var(--accent); }
.cle-importante { font-size: 15px; border-left: 3px solid var(--doux); }
.conv-tribunal small { color: var(--doux); font-size: 11px; }
.statut-tribunal { font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--bord); }
.statut-tribunal.coupable { color: var(--ko); border-color: var(--ko); } .statut-tribunal.acquittee, .statut-tribunal.relaxee { color: var(--ok); border-color: var(--ok); } .statut-tribunal.second_regard { color: var(--att); border-color: var(--att); }
/* Menu (28/09) : icônes monochromes, de la couleur du texte ; glisser-déposer */
.groupe .ico{font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols',sans-serif;font-variant-emoji:text;margin-right:7px;font-weight:400}
#nav > .tire{opacity:.4}
#nav > .cible-avant{box-shadow:0 -2px 0 var(--accent)}
#nav > .cible-apres{box-shadow:0 2px 0 var(--accent)}
/* Menu plus compact (28/09) : pages et catégories plus serrées en hauteur */
nav a.sous{padding-top:4px;padding-bottom:4px;margin:0}
.groupe{margin:10px 6px 2px;padding-top:7px}
/* Ascenseurs discrets, aux couleurs de l'interface (plus de barre blanche) */
*{scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bord);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--doux)}
/* Barre rapide toute monochrome (28/09, propriétaire) : les émoticônes deviennent des silhouettes d'une seule couleur ;
têtes de famille en bleu (comme les catégories du menu), boutons en blanc ; bouton allumé : silhouette sombre. */
.barre-rapide button { color: transparent !important; text-shadow: 0 0 0 var(--texte); }
.barre-rapide button.actif, .barre-rapide button.principal { text-shadow: 0 0 0 #1a1918; }
.barre-rapide button.effectif { text-shadow: 0 0 0 var(--accent); }
.barre-rapide svg { color: var(--texte); }
/* Tête de famille « bouton séparé » : icône bleue | petite flèche (‹ déplié, › replié), comme un menu déroulant. */
.barre-rapide .tete-famille { padding: 0 !important; gap: 0; overflow: hidden; text-shadow: 0 0 0 var(--accent); }
.tete-famille > svg, .tete-famille > .ico-tete { color: var(--accent); margin: 0 6px; }
.tete-famille:not(:has(svg)) { padding-left: 6px !important; }
.tete-famille::after { content: '‹'; align-self: stretch; display: flex; align-items: center; padding: 0 5px; margin-left: 6px; border-left: 1px solid var(--bord); font-size: 13px; text-shadow: 0 0 0 var(--doux); }
.tete-famille:has(svg)::after { margin-left: 0; }
.famille.fermee .tete-famille::after { content: '›'; }
.tete-famille:hover::after { text-shadow: 0 0 0 var(--accent); }
/* Préréglages d'écran partagé (28/09) : un préréglage vide est plus pâle */
.barre-rapide [data-double].vide { opacity: .5; }
.barre-rapide [hidden] { display: none !important; }
/* Confiance du Professeur dans une leçon (28/09) */
.badge-conf { font-size: 12px; white-space: nowrap; opacity: .9; margin-right: 2px; }
/* Coach en chat (28/09) */
.chat-boutons #coachMaintenir { grid-column: 1; grid-row: 1; } .chat-boutons #coachMicro { grid-column: 1; grid-row: 2; }
.bulle .propositions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; position: static; background: none; border: none; padding: 0; } /* (29/09 : n'hérite plus de la liste déroulante qui flottait sur toute la largeur) */
.bulle .propositions button { white-space: normal; max-width: 100%; }
.bulle .propositions button { text-align: left; }
/* Téléphone (28/09) : Local sur une seule colonne (la liste des conversations en haut, compacte ; le chat en pleine
largeur) et un en-tête qui passe à la ligne : avant, l'en-tête débordait et le téléphone dézoomait toute la page. */
@media (max-width:720px) {
.local { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
.local-barre { max-height: 34vh; overflow-y: auto; }
.local-chat-tete { flex-wrap: wrap; font-size: 16px; }
.local-chat .chat { min-height: 45vh; }
.chat-saisie textarea { min-width: 0; }
.bulle { max-width: 88%; }
/* 29/09 : la zone d'écriture reste en bas de l'écran, comme dans une messagerie. */
.local-chat .chat-saisie { position: sticky; bottom: 0; z-index: 5; background: var(--fond); margin-top: 0; padding: 8px 0; }
}
/* Téléphone, toute l'interface (29/09, propriétaire) : la barre d'actions rapides tient sur UNE ligne qu'on fait défiler du
doigt (comme le menu du haut) ; rien ne dépasse la largeur de l'écran (sinon le téléphone dézoome toute la page) :
cartes, tableaux, journaux et onglets défilent dans leur propre cadre. */
@media (max-width:720px) {
main { padding: 10px !important; }
.barre-rapide { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: -4px 0 10px; padding: 4px 6px; border-radius: 4px; -webkit-overflow-scrolling: touch; }
.barre-rapide > *, .barre-rapide .famille, .barre-rapide .contenu-famille { flex: none; }
.barre-droite { margin-left: 8px; }
.carte { max-width: 100% !important; box-sizing: border-box; overflow-x: auto; }
.tableau { display: block; overflow-x: auto; }
pre, .journal { max-width: 100%; overflow-x: auto; box-sizing: border-box; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
h1 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.onglets { flex-wrap: nowrap; overflow-x: auto; }
.onglets > button { flex: none; }
.actions { flex-wrap: wrap; }
.bulle { max-width: 92%; }
}
/* Serveur › Domaines (29/09) : champs du tableau pleine largeur */
#domainesListe input:not([type=checkbox]) { width: 100%; box-sizing: border-box; margin: 0; }
/* Comptes web (29/09) : boutons réservés aux donateurs (grisés, cliquables pour lire pourquoi), bandeau « occupé »
près de la saisie, et sur téléphone : conversations au-dessus, saisie ancrée en bas. */
.verrou { opacity: .45; filter: grayscale(1); cursor: help; }
.bandeau-occupe { margin: 8px 0 0; padding: 6px 10px; border-radius: 4px; background: rgba(245,176,65,.12); border: 1px solid rgba(245,176,65,.35); color: var(--att); font-size: 13px; }
@media (max-width:720px) {
.compte-chat { flex-direction: column; }
.compte-convs { width: auto !important; max-height: 28vh; }
.compte-saisie { position: sticky; bottom: 0; z-index: 5; background: var(--fond); padding-bottom: 8px; }
#chat > :last-child { scroll-margin-bottom: calc(var(--haut-saisie, 0px) + 12px); } /* (16/10, PastiiJay, vidéo : la réponse et ses boutons passaient derrière la zone d'écriture et le bandeau) */
}
/* Messages des agents (29/09) : un rappel du passé (ce qui s'est passé) est présenté à part, grisé, en italique. */
.rappel { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--bord); background: rgba(255,255,255,.04); border-radius: 4px; color: var(--doux); font-style: italic; }
.rappel small { display: block; font-style: normal; margin-bottom: 4px; }
/* Petite fenêtre centrée (comptes web, 29/09) : lisible et facile à toucher sur téléphone (Android, iPhone). */
/* (13/10) la coche et la croix au trait, à la taille et à la couleur du texte (compte.js COCHE_T) */
.ico-t { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.popup-fond { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.popup { width: min(380px, 100%); box-sizing: border-box; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5); max-height: calc(100dvh - 32px); overflow-y: auto; } /* (11/10 au soir : trop haute, elle défile au lieu d'être coupée) */
.popup h3 { margin: 0 0 8px; font-size: 17px; }
/* (13/10, PastiiJay, maquette « Le mode maintenance » v2 validée) le rappel en haut de la page (jaune : les notifications), la dernière minute */
.rappel-u { position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,214,80,.5); border-radius: 4px; background: #1f1c12; color: var(--texte); font-size: 14px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.4); pointer-events: none; }
.rappel-u svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #ffd650; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rappel-u b { color: #ffd650; }
.rappel-u.sous-onglets-r { position: static; transform: none; z-index: auto; margin: 8px auto; width: min(560px, calc(100% - 32px)); box-shadow: none; } /* (16/10 : sous les onglets, dans la page, jamais par-dessus) */
.popup.urgence-p { padding-top: 0; overflow: hidden; border-color: #ed1c24; }
.popup.urgence-p .bandeau-u { margin: 0 -18px 14px; padding: 7px 10px 6px; background: #ed1c24; color: #141414; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.popup.urgence-p p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
/* (13/10, PastiiJay, maquette « Les fichiers, pour les pairs », A) joindre un fichier : réservé aux pairs (le jaune des pairs) */
.popup.reserve-p { width: min(400px, 100%); border-color: rgba(255,214,80,.6); }
.popup.reserve-p h3 { color: #ffd650; }
/* (14/10 au soir) l'essai Donateur : l'étiquette « Offert », la liste au trait, la phrase de la communauté un ton plus doux */
.popup.essai-p { width: min(460px, 100%); } .popup.essai-p .etiquette-g { display: inline-block; align-self: flex-start; padding: 4px 8px 2px; border-radius: 4px; background: #ffd650; color: #141414; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; } .popup.essai-p .don-dessins { margin: 0 0 12px; } .popup.essai-p .communaute-e { color: var(--doux); } .popup.essai-p .choix-e b { color: #ffd650; }
/* (15/10, PastiiJay, maquette « Fenêtres de limite » validée) LA FENÊTRE DE LIMITE : un espace régulier entre chaque bloc ; le retour (quand ça
revient tout seul) ; LA RÉSERVE, seule tout en haut, un consommable (ticket perforé, pastilles, la couleur des bonus en attente) ; puis les
moyens, une ligne chacun avec son bouton en face (150 px, tous pareils) ; tout ce qui touche aux pairs dans UN cadre (la couleur des pairs) */
:root { --c-pairs: #ffd650; --c-reserve: #76b900; --sur-reserve: #141414; } /* (15/10 au soir, PastiiJay : le bonus et la réserve en vert NVIDIA, « le positif ») */
.popup.limite-p { width: min(500px, 100%); border-color: var(--bord); display: flex; flex-direction: column; gap: 16px; } .popup.reserve-p.limite-p > * { margin: 0; } .popup.limite-p h3 { color: var(--texte); }
.limite-p .retour-l { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 4px; font-size: 14px; color: var(--doux); } .limite-p .retour-l b { color: var(--texte); }
.limite-p .retour-l svg, .limite-p .moyens svg, .limite-p .reserve-l svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .limite-p .retour-l svg { width: 20px; height: 20px; stroke-width: 1.8; }
.limite-p .moyens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.limite-p .moyens li { border: 1px solid var(--bord); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.limite-p .ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
.limite-p .ligne .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .limite-p .ligne .t b { font-size: 15px; } .limite-p .ligne .t small { color: var(--doux); font-size: 13px; line-height: 1.4; } .limite-p .ligne .t small b { font-size: inherit; color: var(--texte); }
.limite-p .ligne button { width: 150px; min-height: 36px; padding: 6px 10px; }
.limite-p .moyens li.pair { border-color: color-mix(in srgb, var(--c-pairs) 55%, transparent); background: color-mix(in srgb, var(--c-pairs) 5%, transparent); } .limite-p .moyens li.pair svg { stroke: var(--c-pairs); }
.limite-p .moyens li.pair .ligne + .ligne { border-top: 1px solid color-mix(in srgb, var(--c-pairs) 28%, transparent); padding-top: 12px; }
.limite-p .reserve-l { position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px dashed var(--c-reserve); border-radius: 4px; padding: 10px 12px; background: color-mix(in srgb, var(--c-reserve) 12%, transparent); }
.limite-p .reserve-l::before, .limite-p .reserve-l::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--carte); border: 1px dashed var(--c-reserve); box-sizing: border-box; } .limite-p .reserve-l::before { left: -8px; } .limite-p .reserve-l::after { right: -8px; }
.limite-p .reserve-l .titre-r { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-reserve); } .limite-p .reserve-l svg { stroke: var(--c-reserve); }
.limite-p .reserve-l .ligne + .ligne { border-top: 1px dashed color-mix(in srgb, var(--c-reserve) 45%, transparent); padding-top: 10px; }
.limite-p .reserve-l button { background: var(--c-reserve); border-color: var(--c-reserve); color: var(--sur-reserve); font-weight: 600; }
.limite-p .pastilles { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 2px; } .limite-p .pastilles i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-reserve); box-sizing: border-box; } .limite-p .pastilles i.plein { background: var(--c-reserve); }
@media (max-width: 480px) { .limite-p .ligne { grid-template-columns: 28px minmax(0, 1fr); } .limite-p .ligne button { grid-column: 1 / -1; width: 100%; } }
.popup.reserve-p p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--texte); }
/* (23/10) l'avis des testeurs (compte.js fenetreAvisSentinelle) : ses quatre points */
.popup.avis-s ul { margin: 8px 0 14px; padding-left: 20px; } .popup.avis-s li { margin: 4px 0; text-wrap: pretty; }
.popup.reserve-p .popup-boutons { flex-direction: row; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
/* (15/10, PastiiJay : « toujours les boutons de la même taille ») côte à côte, ils se partagent la largeur à parts égales ; seul, il garde sa taille */
.popup.reserve-p .popup-boutons > * { flex: 1 1 0; min-width: 0; } .popup.reserve-p .popup-boutons > :only-child { flex: 0 0 auto; }
/* (15/10, PastiiJay : « je vois le bouton blanc beaucoup plus gros ») le cadre du bouton secondaire bien visible (même boîte, il le paraît aussi) ;
sur téléphone, les boutons l'un au-dessus de l'autre, toute la largeur (le principal en haut) : plus de texte sur deux lignes dans un seul */
/* (même jour, PastiiJay : « une moyenne… les deux entourés du même gris ») le même contour gris pour le principal et le secondaire ; au survol
il s'inverse : noir sur le bouton clair, blanc sur le bouton foncé */
.popup-boutons > button:not(.bouton-pair) { border-color: #6a6a6a; }
@media (hover: hover) and (pointer: fine) { .popup-boutons > button.principal:hover { border-color: #000; } .popup-boutons > button:not(.principal):not(.bouton-pair):hover { border-color: #fff; } }
@media (max-width: 420px) { .popup.reserve-p .popup-boutons { flex-direction: column-reverse; } .popup.reserve-p .popup-boutons > *, .popup.reserve-p .popup-boutons > :only-child { flex: 0 0 auto; width: 100%; } } .popup.reserve-p .popup-boutons button { height: auto; min-height: 36px; box-sizing: border-box; padding: 8px 16px; line-height: 20px; }
.popup.guide-installation { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.guide-compris { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; cursor: pointer; font-weight: 600; }
.guide-compris input { width: auto; }
.popup p { margin: 0 0 14px; line-height: 1.5; color: var(--texte); }
.popup-boutons { display: flex; flex-direction: column; gap: 8px; }
/* (13/10, maquette « La fenêtre des saisons » validée) LA FENÊTRE DES SAISONS (compte.js ouvrirSaison) aux couleurs de la Légende : le liseré
aurore qui défile, le bandeau en haut, la couronne qui brille, le bouton aurore */
.popup.saison-l { position: relative; overflow-x: hidden; padding: 0 18px 18px; text-align: center; border: 2px solid transparent; background: linear-gradient(var(--carte), var(--carte)) padding-box, var(--aurore) border-box; background-size: auto, 300% 100%; animation: aurore 9s linear infinite; }
.saison-l .bandeau-s { margin: 0 -18px 14px; padding: 7px 10px 6px; background: var(--aurore); background-size: 300% 100%; animation: aurore 9s linear infinite; color: #141414; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.saison-l .couronne-s { display: block; width: 64px; height: 64px; margin: 2px auto 6px; }
.saison-l .saison-m { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b8a6ff; }
.saison-l h3 { margin: 0 0 12px; font-size: 20px; }
.saison-l p { text-align: left; } .saison-l .chance-s { text-align: center; font-size: 14px; }
.saison-l .nom-legende { background: var(--aurore); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurore 9s linear infinite; }
.saison-l .aurore-s { background: var(--aurore); background-size: 300% 100%; animation: aurore 9s linear infinite; border-color: transparent; color: #141414; font-weight: 700; }
/* (14/10, maquette « Rapport de la semaine » B validée) LE RAPPORT DE LA SEMAINE, à la couleur du thème (blanc en Sombre, gris Pairping en
Clair, la couleur du thème de saison) ; tout apparaît à son tour (--k), « passe » (un clic) montre tout d'un coup */
.popup.rapport-s { position: relative; width: min(420px, 100%); padding: 0 18px 18px; text-align: center; border-color: var(--skin); }
.rapport-s .bandeau-r { margin: 0 -18px 14px; padding: 7px 10px 6px; background: var(--skin); color: var(--sur-skin); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transform: scaleX(0); animation: rapport-bande .5s .1s cubic-bezier(.2, .8, .2, 1) forwards; }
.rapport-s .anneau-r { position: relative; width: 150px; height: 150px; margin: 4px auto 14px; } .rapport-s .anneau-r svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rapport-s .anneau-r circle { fill: none; stroke-width: 6; } .rapport-s .fond-a { stroke: var(--bord); }
.rapport-s .arc-a { stroke: var(--barre, var(--skin)); stroke-dasharray: var(--de-p, 25) 100; transition: stroke-dasharray .5s cubic-bezier(.2, .8, .2, 1), stroke .5s; }
.rapport-s .anneau-r > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rapport-s .anneau-r small { font-size: 12px; color: var(--doux); } .rapport-s .mult-r { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.rapport-s .gagne-r { margin: -4px 0 12px; font-size: 16px; color: var(--doux); opacity: 0; transition: opacity .4s; } .rapport-s .gagne-r b { font-size: 22px; color: var(--skin); } .rapport-s.fini .gagne-r { opacity: 1; }
.rapport-s .jours-r { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 14px; }
.rapport-s .jours-r i { height: 30px; border: 1px solid var(--bord); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-style: normal; animation: rapport-jour .25s calc(.6s + var(--k) * .09s) forwards; }
.rapport-s .jours-r b { font-size: 11px; font-weight: 700; color: var(--doux); animation: rapport-jour-texte .25s calc(.6s + var(--k) * .09s) forwards; }
.rapport-s .tuiles-r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 14px; }
.rapport-s .tuile-r { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--bord); border-radius: 4px; opacity: 0; transform: translateY(10px) scale(.96); animation: rapport-tuile .4s calc(1.4s + var(--k) * .55s) cubic-bezier(.2, 1.3, .4, 1) forwards; }
.rapport-s .tuile-r:last-child:nth-child(odd) { grid-column: span 2; }
.rapport-s .tuile-r b { font-size: 14px; } .rapport-s .tuile-r small { font-size: 12px; color: var(--doux); line-height: 1.3; min-height: 32px; }
.rapport-s .plus-r { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--skin); }
.rapport-s .dessin-r, .bonus-sem .dessin-r { color: var(--skin); } .rapport-s .dessin-r svg, .bonus-sem .dessin-r svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.rapport-s .objet-r { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px; margin: 16px 0 12px; border: 1px dashed var(--skin); border-radius: 4px; text-align: left; opacity: 0; transform: scale(.9); animation: rapport-objet .45s calc(1.6s + var(--k) * .55s) cubic-bezier(.2, 1.4, .4, 1) forwards; }
.rapport-s .objet-r .logo-rang { width: 44px; height: 44px; } .rapport-s .objet-r b { display: block; font-size: 15px; } .rapport-s .objet-r small { display: block; font-size: 12px; color: var(--doux); line-height: 1.35; }
.rapport-s .nouveau-r { position: absolute; top: -9px; left: 10px; padding: 0 6px; background: var(--carte); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--skin); }
.rapport-s .popup-boutons { opacity: 0; animation: rapport-monte .4s calc(1.8s + var(--k) * .55s) forwards; }
.rapport-s .principal { background: var(--skin); border-color: var(--skin); color: var(--sur-skin); }
.rapport-s.passe, .rapport-s.passe * { animation-delay: 0s !important; animation-duration: .01s !important; }
@keyframes rapport-bande { to { transform: scaleX(1); } } @keyframes rapport-monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rapport-tuile { to { opacity: 1; transform: none; } } @keyframes rapport-objet { to { opacity: 1; transform: none; } }
@keyframes rapport-jour { to { background: var(--skin); border-color: var(--skin); } } @keyframes rapport-jour-texte { to { color: var(--sur-skin); } }
/* le cadre « Bonus de la semaine » de la carte (la semaine qui suit) */
.bonus-sem { margin: 6px 0 10px; border: 1px solid var(--skin); border-radius: 4px; padding: 14px; }
.bonus-sem .haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .bonus-sem .titre { display: flex; flex-direction: column; } .bonus-sem .titre b { font-size: 17px; } .bonus-sem .titre small { font-size: 12px; color: var(--doux); }
.bonus-sem .gros { font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--skin); }
.bonus-sem .mini { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .bonus-sem .mini li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; font-size: 14px; } .bonus-sem .mini b { font-variant-numeric: tabular-nums; }
.bonus-sem .mini .dessin-r { color: var(--doux); } .bonus-sem .mini .dessin-r svg { width: 18px; height: 18px; }
.bonus-sem .bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--bord); font-variant-numeric: tabular-nums; color: var(--doux); } .bonus-sem .bas b { font-size: 18px; }
.bonus-sem .bas svg { width: 16px; height: 16px; fill: none; stroke: var(--doux); stroke-width: 1.8; vertical-align: -2px; }
.bonus-sem .bas > span { white-space: nowrap; } .bonus-sem .revoir-r { flex-shrink: 0; white-space: nowrap; height: 36px; padding: 0 14px; border: 1px solid var(--bord); border-radius: 4px; background: transparent; color: var(--texte); font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 440px) { .bonus-sem .mini { grid-template-columns: 1fr; } }
.popup-boutons > * { min-height: 44px; font-size: 16px; text-align: center; display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Rappel discret dans la bulle d'attente (29/09) : les donateurs passent devant (touchable : ouvre l'explication). */
.verrou-doux { opacity: .7; filter: none; font-size: 12px; text-decoration: underline dotted; cursor: pointer; }
.popup-soutenir { border-radius: 4px; background: #ffd650; color: #141414; font-weight: 600; } /* (11/10 au soir : le jaune premium, plus l'orange d'alerte) */
.popup-soutenir.bientot { opacity: .55; cursor: default; }
.popup-soutenir.blanc { background: #fff; color: #141414; } /* (12/10, PastiiJay : le Donateur en blanc, le jaune est pour « devenir pair ») */
/* Mes données (RGPD discret, 29/09) : replié, petit, sans insister. */
.interrupteur-ligne { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.interrupteur-ligne input { width: auto; margin: 0; }
.lien-doux { background: none !important; border: none !important; color: var(--doux); text-decoration: underline; padding: 4px 6px; font-size: 13px; cursor: pointer; }
/* Confirmation de demande de compte (29/09). */
.confirmation { text-align: center; padding: 8px 4px; }
.confirmation-icone { font-size: 40px; margin-bottom: 6px; } .confirmation-icone.ok { color: var(--texte); } /* (13/10, PastiiJay : plus de coche verte) la coche « c'est fait » en blanc */
.confirmation button { margin-top: 10px; min-height: 44px; width: 100%; }
/* Comptes web (29/09) : bouton ⋯ des conversations (menu sur téléphone ; au survol sur PC). */
.conv-menu { padding: 0 6px !important; min-height: 0; background: none !important; border: none !important; color: var(--doux); opacity: 0; }
.local-conv:hover .conv-menu, .local-conv.actif .conv-menu { opacity: 1; }
@media (hover: none) { .conv-menu { opacity: .8; } }
/* (29/09) Téléphone : la dernière bulle amenée à l'écran ne passe pas sous la zone d'écriture ancrée en bas. */
@media (max-width:720px) { .compte-chat .bulle, #localFil .bulle { scroll-margin-bottom: 160px; } }
/* Fenêtre donateurs (29/09) : une étoile par avantage. */
/* (11/10 au soir, maquette « Fenêtres Donateur allégées ») les avantages du don en pastilles dorées ; « Voir les offres » et « Plus tard » côte à côte */
.popup .don { margin: 0 0 6px; font-size: 13px; color: var(--doux); }
.don-dessins { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 16px; padding: 0; font-size: 13px; color: #f2f2f2; }
.don-dessins li { white-space: nowrap; } @media (max-width: 420px) { .don-dessins { grid-template-columns: 1fr; } } /* (14/10 au soir) un avantage ne se coupe pas : sur un téléphone étroit, une seule colonne */
.don-dessins li { display: flex; align-items: center; gap: 8px; } .dessin-don { width: 16px; height: 16px; flex: none; fill: none; stroke: #f2f2f2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.popup-boutons > .popup-rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.popup-rangee > * { min-height: 44px; font-size: 15px; display: flex; align-items: center; justify-content: center; }
/* Système › Priorités (29/09). */
.liste-priorites { padding-left: 22px; margin: 8px 0 14px; }
.liste-priorites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; }
.liste-priorites li button { margin-left: 4px; }
/* E-mail (29/09) : le texte d'un mail, tel quel (jamais de HTML exécuté). */
.email-texte { white-space: pre-wrap; word-break: break-word; margin: 12px 0; line-height: 1.5; max-height: 60vh; overflow: auto; }
/* E-mail comme Gmail (29/09) : dossiers à gauche, liste paginée au milieu, lecture à droite. */
.email-cadre { display: grid; grid-template-columns: 170px minmax(240px, 360px) minmax(0, 1fr); gap: 10px; align-items: start; }
.email-dossiers { display: flex; flex-direction: column; gap: 4px; }
.email-dossiers button { text-align: left; }
.email-dossiers button.actif { outline: 1px solid var(--accent); background: var(--carte); }
.email-pages { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.email-pages .msg { flex: 1; text-align: right; }
@media (max-width: 900px) { .email-cadre { grid-template-columns: 1fr; } .email-dossiers { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; } .email-dossiers button { flex: none; } }
/* Après l'inscription (29/09) : la consigne « vérifie tes e-mails » bien visible. */
.bulle-verif { background: rgba(255,255,255,.12); border: 1px solid var(--accent); border-radius: 4px; padding: 12px 14px; font-size: 16px; line-height: 1.5; }
/* Avertissement bien visible (orange), à ne pas rater (29/09). */
.avertissement { margin: 0 0 10px; padding: 10px 12px; border-radius: 4px; background: rgba(245,176,65,.14); border: 1px solid var(--att); color: var(--att); line-height: 1.45; }
/* Barre rapide (29/09) : compteur rouge (demandes à valider, mails non lus). */
.compteur { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--ko); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; box-shadow: 0 0 0 2px var(--panneau); }
/* Utilisateurs (29/09) : en attente en haut, filtres, tableau compact, fiche à droite. */
.attente-comptes { border-color: var(--att); }
.ligne-attente { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--bord); flex-wrap: wrap; }
.filtres-comptes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.filtres-comptes input { max-width: 240px; }
.comptes-cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 12px; align-items: start; }
.comptes-cadre:has(#ficheCompte[hidden]) { grid-template-columns: minmax(0, 1fr); }
.comptes-table tr[data-compte] { cursor: pointer; }
.comptes-table tr[data-compte]:hover, .comptes-table tr.actif { background: var(--carte); }
.comptes-table td, .comptes-table th { padding: 6px 8px; font-size: 13px; }
.fiche-tete { display: flex; justify-content: space-between; align-items: center; }
.fiche-tete h3 { margin: 0; }
.fiche-email { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.fiche-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bord); font-size: 13px; }
.fiche-ligne select { width: auto; padding: 2px 6px; font-size: 13px; }
@media (max-width: 900px) { .comptes-cadre { grid-template-columns: 1fr; } }
/* (29/09) Compteurs lisibles (pas d'ombre de la barre monochrome) ; icônes au trait sombres quand le bouton est allumé. */
.barre-rapide .compteur { text-shadow: none; color: #fff !important; }
.barre-rapide button.actif svg, .barre-rapide button.principal svg { color: #1a1918; }
.barre-rapide button svg { vertical-align: -3px; }
/* Groupes et droits (29/09). */
.groupes-cadre { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .groupes-cadre { grid-template-columns: 1fr; } }
#listeGroupes li { cursor: pointer; } #listeGroupes li.actif { outline: 1px solid var(--accent); }
.famille-droits { margin: 14px 0 4px; font-size: 14px; color: var(--accent); }
.droit-ligne { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; } .droit-ligne input { width: auto; margin: 0; }
.fiche-groupes { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; } .fiche-groupes input { width: auto; margin: 0 2px 0 0; }
.fiche-perso { margin: 10px 0; } .fiche-perso summary { cursor: pointer; font-size: 13px; }
/* (29/09) Fenêtre plein écran qui cache tout le reste (suppression du compte). */
.plein-fond { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--fond); }
.popup-boutons .danger { background: var(--ko); color: #fff; border-color: var(--ko); }
/* « Voir en tant que… » (29/09). */
.voir-en-tant-que { width: auto; font-size: 13px; padding: 3px 8px; vertical-align: middle; }
.bandeau-apercu { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; background: rgba(245,176,65,.14); border: 1px solid var(--att); color: var(--att); }
.attente-dans-liste:empty { display: none; }
/* tokens (29/09). */
.compteur-tokens { font-size: 13px; color: var(--att); padding: 0 6px; }
.tokens-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tokens-grille > div { background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; }
.tokens-grille b { font-size: 20px; color: var(--att); } #pairRatio b { color: var(--accent); } /* (05/10, propriétaire : notre orange, pas ce jaune) */ .tokens-grille .petit b { font-size: 15px; } .tokens-grille small { color: var(--doux); font-size: 12px; }
/* (29/09) Indicateur de la réponse en cours. */
.indicateur-reponse { font-size: 12px; color: var(--doux); margin-top: 4px; }
/* (29/09) Ligne d'état sous la conversation (comme l'appli Claude). */
.statut-reponse { min-height: 18px; font-size: 12px; color: var(--doux); padding: 4px 4px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.statut-reponse:empty { display: none; }
.fil-cadre { position: relative; }
/* (22/10, PastiiJay, maquette « Messages en haut du fil » validée : « ça remonte la fenêtre… très désagréable ») LES MESSAGES TECHNIQUES
(#infoCerveau : réseau lent, mode de secours) : une petite bande posée en haut du fil, par-dessus, sous l'ombre ; elle n'occupe aucune place */
.info-fil { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 6px 10px; font-size: 12px; line-height: 1.4; color: var(--doux); box-shadow: 0 4px 10px rgba(0,0,0,.45); pointer-events: none; animation: info-fil-arrive .35s ease; }
.info-fil::before { content: ''; flex: none; width: 14px; height: 14px; background: var(--att); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.info-fil:empty { display: none; }
@keyframes info-fil-arrive { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width:720px) { .info-fil { position: fixed; top: calc(var(--haut-entete, 96px) + 52px); left: 12px; right: 12px; z-index: 24; } } /* (téléphone : c'est la page qui défile ; juste sous la barre « Conversations », fixée elle aussi) */
.point-travail { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: battement 1s ease-in-out infinite; vertical-align: 1px; }
@keyframes battement { 50% { opacity: .25; } }
/* (29/09) Liens, vidéos et images dans les bulles. */
.bulle a { color: var(--accent); word-break: break-all; }
.bulle.moi a { color: #1a1918; text-decoration: underline; }
.video-chat { position: relative; width: min(480px, 100%); aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 4px; overflow: hidden; background: #000; }
.video-chat iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.image-chat { display: block; max-width: min(360px, 100%); max-height: 320px; margin-top: 8px; border-radius: 4px; }
/* Analyse › tokens (29/09). */
.tokens-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tokens-resume .petite { display: flex; flex-direction: column; margin: 0; } .tokens-resume b { font-size: 24px; color: var(--att); } .tokens-resume small { color: var(--doux); }
.barre-c { height: 8px; background: var(--panneau); border-radius: 4px; overflow: hidden; flex: 1; } .barre-c span { display: block; height: 100%; background: var(--att); border-radius: 4px; }
.usage-c { display: grid; grid-template-columns: 170px 1fr 110px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } .usage-c { grid-template-columns: 1fr; } }
/* (29/09) « Obtenir plus de tokens » : fenêtre Matrix, pilule rouge (don) à gauche, bleue (pubs) à droite, comme Morpheus. */
.compteur-tokens { cursor: pointer; }
.matrix-fond { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; align-items: center; justify-content: center; }
.matrix-fond[hidden] { display: none; }
#matrixPluie { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix-contenu { position: relative; text-align: center; color: #b6ffc8; padding: 22px 18px; max-width: 560px; width: calc(100% - 32px); background: rgba(0, 0, 0, .72); border: 1px solid rgba(31, 211, 92, .4); border-radius: 4px; box-shadow: 0 0 40px rgba(31, 211, 92, .25); font-family: ui-monospace, Consolas, monospace; }
.matrix-contenu h2 { margin: 0 0 6px; color: #1fd35c; letter-spacing: 1px; }
.matrix-fermer { position: absolute; top: 8px; right: 8px; background: none !important; border: none !important; color: #b6ffc8; font-size: 18px; }
.matrix-choix { display: flex; justify-content: center; gap: 28px; margin: 18px 0 8px; flex-wrap: wrap; }
.matrix-main { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 200px; }
.matrix-main small { color: #7fd99a; font-size: 12px; }
.main { font-size: 64px; line-height: 1; margin-top: -8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.main.miroir { transform: scaleX(-1); }
.pilule { border-radius: 4px !important; padding: 10px 22px !important; font-weight: 700; color: #fff !important; border: none !important; min-width: 170px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.5); cursor: pointer; font-family: inherit; }
.pilule.rouge { background: linear-gradient(180deg, #ff5b5b, #b3001b) !important; }
.pilule.bleue { background: linear-gradient(180deg, #5b9bff, #0034b3) !important; }
.pilule:hover { transform: translateY(-2px); }
.matrix-msg { min-height: 20px; color: #d8ffd8; }
/* (29/09) Les mains dessinées (façon fan art), la pilule couchée à l'horizontale dans la paume. */
.matrix-contenu { background: rgba(0, 0, 0, .55); }
.matrix-choix { gap: 12px; align-items: flex-end; }
.matrix-main { position: relative; width: 250px; }
.matrix-main .main-svg { width: 250px; height: 160px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.8)); }
.matrix-main.droite .main-svg { transform: scaleX(-1); }
.matrix-main .pilule { position: absolute; top: 72px; min-width: 0; padding: 7px 14px !important; font-size: 12px; white-space: nowrap; transform: rotate(-4deg); }
.matrix-main.gauche .pilule { left: 108px; }
.matrix-main.droite .pilule { right: 108px; transform: rotate(4deg); }
.matrix-main .pilule:hover { transform: rotate(0deg) scale(1.05); }
.matrix-main small { margin-top: 2px; }
@media (max-width: 560px) { .matrix-main, .matrix-main .main-svg { width: 200px; } .matrix-main .main-svg { height: 128px; } .matrix-main .pilule { top: 56px; font-size: 11px; } .matrix-main.gauche .pilule { left: 80px; } .matrix-main.droite .pilule { right: 80px; } }
/* (29/09) Les mains sortent du noir : plus de cadre, mains écartées sur les côtés, texte lisible sur la pluie. */
.matrix-contenu { background: none; border: none; box-shadow: none; max-width: 900px; }
.matrix-contenu h2, .matrix-contenu p, .matrix-main small { text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 2px #000; }
.matrix-contenu h2 { font-size: 26px; }
.matrix-choix { gap: clamp(20px, 18vw, 260px); }
/* (29/09 v2) Mains de Windows en noir et blanc, gélules brillantes couchées dans la paume. */
.matrix-main { width: 240px; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.main-emoji { font-size: 150px; line-height: 1; filter: grayscale(1) contrast(1.25) brightness(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.9)); user-select: none; }
.main-emoji.miroir { transform: scaleX(-1); }
.gelule { position: absolute; top: 88px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 170px; height: 46px; border-radius: 4px !important; border: none !important; padding: 0 !important; cursor: pointer; overflow: hidden; color: #fff !important; font: 700 13px/46px system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6) !important; }
.matrix-main.droite .gelule { transform: translateX(-50%) rotate(6deg); }
.gelule::before { content: ''; position: absolute; left: 10%; right: 10%; top: 5px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); }
.gelule::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.15); }
.gelule span { position: relative; z-index: 1; }
.gelule.rouge { background: radial-gradient(ellipse at 50% 30%, #ff6d6d, #c4001d 60%, #6d0010) !important; box-shadow: 0 0 22px rgba(255, 40, 60, .55), 0 8px 16px rgba(0,0,0,.7); }
.gelule.bleue { background: radial-gradient(ellipse at 50% 30%, #6fb0ff, #0049d6 60%, #001c63) !important; box-shadow: 0 0 22px rgba(40, 120, 255, .55), 0 8px 16px rgba(0,0,0,.7); }
.gelule:hover { filter: brightness(1.15); }
.matrix-main small { margin-top: 6px; }
@media (max-width: 560px) { .matrix-main { width: 160px; height: 170px; } .main-emoji { font-size: 110px; } .gelule { top: 64px; width: 130px; height: 38px; font-size: 11px; line-height: 38px; } }
/* (29/09 v2) La main bien visible, la gélule posée dans le creux de la paume. */
.matrix-main { height: 260px; }
.main-emoji { font-size: 190px; }
.gelule { top: 150px; width: 150px; height: 40px; line-height: 40px; font-size: 12px; }
.matrix-main.gauche .gelule { left: 44%; } .matrix-main.droite .gelule { left: 56%; }
@media (max-width: 560px) { .matrix-main { height: 190px; } .main-emoji { font-size: 130px; } .gelule { top: 104px; width: 120px; height: 34px; line-height: 34px; font-size: 10px; } }
/* (29/09 v3) Une PETITE fenêtre par-dessus la page (pas du plein écran), qui s'ouvre avec une animation ; marche sur téléphone. */
.matrix-fond { background: rgba(0, 0, 0, .65); padding: 16px; }
.matrix-contenu { position: relative; overflow: hidden; width: min(560px, 100%); max-width: none; padding: 20px 16px 16px; background: #000; border: 1px solid rgba(31, 211, 92, .55); border-radius: 4px; box-shadow: 0 0 36px rgba(31, 211, 92, .35); animation: apparition .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes apparition { from { opacity: 0; transform: scale(.8) translateY(16px); } to { opacity: 1; transform: none; } }
#matrixPluie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .75; }
.matrix-contenu > *:not(canvas) { position: relative; z-index: 1; }
.matrix-fermer { position: absolute !important; z-index: 2 !important; }
.matrix-contenu h2 { font-size: 22px; }
.matrix-choix { gap: 16px; margin: 10px 0 4px; }
.matrix-main { width: 45%; min-width: 150px; height: 210px; }
.main-emoji { font-size: 140px; }
.gelule, .matrix-main.droite .gelule { width: 132px; height: 38px; line-height: 38px; font-size: 12px; top: 112px; }
.matrix-main.gauche .gelule { left: 46%; } .matrix-main.droite .gelule { left: 54%; }
/* Textes lisibles : blanc sur un fond sombre. */
.matrix-contenu p, .matrix-main small { color: #fff !important; background: rgba(0, 0, 0, .7); border-radius: 4px; padding: 3px 8px; display: inline-block; }
.matrix-main small { font-size: 12px; margin-top: 8px; }
@media (max-width: 480px) { .matrix-main { height: 170px; min-width: 130px; } .main-emoji { font-size: 104px; } .gelule, .matrix-main.droite .gelule { width: 112px; height: 32px; line-height: 32px; font-size: 11px; top: 84px; } }
/* (29/09 v3) Les deux mains à la même hauteur ; la phrase toujours sous la main. */
.matrix-choix { align-items: flex-start; }
.matrix-main { justify-content: flex-start; height: auto; }
.main-emoji { display: block; height: 150px; }
.matrix-main small { margin-top: 10px; }
@media (max-width: 480px) { .main-emoji { height: 112px; } }
/* (29/09 v3) Mains du fan art (images PNG transparentes) : la gélule posée au creux de chaque paume, en % de l'image. */
.matrix-main { height: auto; justify-content: flex-start; }
.paume { position: relative; width: 100%; max-width: 240px; }
.paume img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.9)); }
.paume .gelule, .matrix-main.droite .paume .gelule { top: 40%; width: 58%; height: auto; aspect-ratio: 3.4; line-height: normal; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 2.6vw, 13px); }
.matrix-main.gauche .paume .gelule { left: 63%; transform: translate(-50%, -50%) rotate(-8deg); }
.matrix-main.droite .paume .gelule { left: 37%; transform: translate(-50%, -50%) rotate(8deg); }
@media (max-width: 480px) { .paume .gelule, .matrix-main.droite .paume .gelule { width: 70%; font-size: 10px; white-space: nowrap; } }
/* (29/09) E-mail comme Gmail : mail HTML dans un cadre blanc isolé, liens des mails texte, boutons de l'expéditeur, contacts. */
.email-html { width: 100%; min-height: 300px; border: 0; border-radius: 4px; background: #fff; margin: 12px 0; display: block; }
.email-texte.riche { white-space: normal; }
.email-texte.riche a { color: var(--accent); }
.de-outils { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.de-outils .mini { padding: 1px 6px; font-size: 12px; }
.contact-ajout { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.contact-ajout input { flex: 1 1 180px; }
.contact-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.contact-ligne > div:last-child { display: flex; gap: 4px; flex-shrink: 0; }
/* (29/09) E-mail comme Gmail, suite : la liste OU le message en grand (plus d'écrasement), dossiers plus étroits. */
.email-cadre { grid-template-columns: 150px minmax(0, 1fr); }
.email-cadre:not(.lecture) .email-lecture-cadre, .email-cadre.lecture .email-liste-cadre { display: none; }
.email-lecture-cadre #emailRetour { margin-bottom: 8px; }
@media (max-width: 900px) { .email-cadre { grid-template-columns: 1fr; } }
/* (29/09) Menu à la façon de Claude : l'élément actif en gris clair (l'orange reste pour les boutons et les surbrillances). */
nav a.actif { background: #3d3c38; color: var(--texte); }
nav a.actif .discret { color: var(--doux); }
/* (29/09) La marque : le logo + le nom de l’IA dans une police élégante (accueil, espace des comptes). Texte presque à la hauteur du logo. */
.marque { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: -4px; }
.marque img { width: 54px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.titre-accueil, .marque-nom { margin: 0; font-size: 56px; line-height: normal; font-weight: 400; letter-spacing: .5px; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif; }
.marque.petite { gap: 6px; margin: 0 4px 0 2px; justify-content: flex-start; }
.marque.petite img { width: 33px; filter: none; }
.marque.petite .marque-nom { font-size: 34px; }
/* (07/10) Le logo Pairping (SVG du designer) à la place du nom écrit : jamais « Pairping » tapé avec la police. */
.titre-accueil img { display: block; width: min(420px, 82vw); height: auto; }
.marque.petite .marque-logo { height: 28px; width: auto; display: block; filter: none; }
/* (29/09) Interface administrateur : le logo sert de loupiote (orange et lumineux = démarré, grisé = ne répond pas). */
.logo { gap: 7px; }
.logo .marque-nom { font-size: 30px; font-weight: 400; }
.logo-etat { width: 30px; height: auto; filter: grayscale(1) brightness(.55); transition: filter .4s; }
.logo-etat.ok { filter: drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 12px rgba(255,255,255,.45)); }
/* (29/09) Membres d'un groupe (pastilles) et sélecteur d'émoticônes. */
.membres-groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.membre { display: inline-flex; align-items: center; gap: 4px; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 2px 4px 2px 10px; }
.membre .mini { padding: 0 6px; border-radius: 4px; }
.membres-groupe select { width: auto; }
.emoji-bouton { flex: none; align-self: flex-start; }
.emoji-grille { position: fixed; z-index: 5000; width: 300px; max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.emoji-grille[hidden] { display: none; }
.emoji-grille button { background: none; border: none; font-size: 20px; padding: 4px 0; border-radius: 4px; cursor: pointer; }
.emoji-grille button:hover { background: var(--carte); }
/* (29/09) Bouton d'arrêt d'urgence (comme un vrai : rouge, anneau jaune) et bandeau des comptes en pause. */
.barre-rapide .arret-urgence { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a4d, #b3130b 70%) !important; border: 3px solid #f2c400 !important; box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.6); color: #fff; font: 800 7px/1 system-ui, sans-serif; letter-spacing: .2px; display: inline-flex; align-items: center; justify-content: center; }
.barre-rapide .arret-urgence:hover { filter: brightness(1.15); }
.barre-rapide .arret-urgence.actif-urgence { animation: urgence 1s ease-in-out infinite; }
@keyframes urgence { 50% { box-shadow: 0 0 0 1px #000, 0 0 14px 4px rgba(255,60,40,.8); } }
.bandeau-urgence { background: #5a1a14; color: #ffd9d3; border: 1px solid #b3130b; border-radius: 4px; padding: 10px 14px; margin: 8px 0; font-weight: 600; text-align: center; }
.bandeau-urgence[hidden] { display: none; }
/* (29/09) Application installée sur téléphone (plein écran) : rien sous l'encoche ni sous la barre du bas (iPhone, Android). */
@supports (padding: env(safe-area-inset-top)) {
body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}
/* Comptes liés : une ligne par service (grisée tant qu'il n'est pas prêt). */
.lie-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.lie-ligne.grise { opacity: .5; }
.lie-ligne.sous { padding-left: 16px; border-left: 2px solid var(--bord); } /* (14/10 au soir) le Drive, rattaché à la ligne Google */
/* (05/10) Onglet Pair : le petit ordinateur dessiné au trait, sur la hauteur des deux lignes (nom, « connectée depuis ») */
.machine-ligne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ico-machine { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--texte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lie-ligne button { flex: none; }
/* (29/09) Promotions : liste (admin) et bandeau chez les comptes concernés. */
.promo-ligne { padding: 8px 10px; border: 1px solid var(--bord); border-radius: 4px; margin: 6px 0; cursor: pointer; }
.promo-ligne.actif { border-color: var(--accent); background: var(--carte); }
.bandeau-promo { background: rgba(255,255,255,.12); color: var(--texte); border: 1px solid var(--accent); border-radius: 4px; padding: 8px 14px; margin: 8px 0; text-align: center; }
.bandeau-promo[hidden] { display: none; }
/* (29/09) Choix du pseudo obligatoire (comptes créés avec Google). */
.choix-pseudo { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.choix-pseudo .carte { width: min(420px, 100%); }
.choix-pseudo.appel-sentinelle .actions button { flex: 1 1 0; } /* (23/10 : Décrocher et Refuser, de la même taille) */
/* (29/09) Espace des comptes : le compteur de tokens en haut à droite est retiré (doublon avec l'onglet Utilisation). */
#tokensBarre { display: none !important; }
#deconnexion svg, #boutonDeconnexion svg { display: block; }
/* (29/09) Espace des comptes : « Nouvelle conversation » et « Nouveau dossier » empilés, plus fins. */
.boutons-convs { display: flex; flex-direction: column; gap: 6px; }
.boutons-convs button { width: 100%; padding: 7px 10px; font-size: 14px; }
/* (11/10, PastiiJay : maquette « Chatbot revu ») « ＋ Nouveau » : le petit menu, une ligne par choix avec sa phrase (comme le menu Effort) */
.menu-nouveau { position: fixed; z-index: 3000; width: min(330px, calc(100vw - 16px)); background: #262626; border: 1px solid #4a4a4a; border-radius: 4px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; transform-origin: top left; animation: menu-ouvre .16s ease-out; }
@keyframes menu-ouvre { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu-nouveau button { display: grid; grid-template-columns: 24px 1fr; gap: 1px 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; padding: 9px 10px; color: var(--texte); }
.menu-nouveau button:hover { background: #343434; }
.menu-nouveau .ico-conv { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 2px 0 0; }
.menu-nouveau b { font-size: 14px; } .menu-nouveau small { font-size: 12.5px; line-height: 1.35; color: var(--doux); }
.menu-nouveau button.bientot { opacity: .45; cursor: default; } .menu-nouveau button.bientot:hover { background: none; } /* (11/10 : « + » : les formats à venir, en gris) */
/* (29/09) Arrêt d'urgence déplacé dans Accueil › Contrôle (plus dans la barre rapide : trop facile à toucher par erreur). */
#boutonUrgence.actif-urgence { background: #5a1a14 !important; border-color: #b3130b !important; color: #ffd9d3 !important; animation: urgence 1s ease-in-out infinite; }
/* Comptes liés : bloc d'un service (Ko-fi : adresse puis code reçu par mail). */
.lie-bloc { border-top: 1px solid var(--bord); }
.lie-bloc .lie-ligne { border-top: 0; }
#pPair .carte > .lie-bloc:first-child { border-top: 0; } /* (08/10, PastiiJay : plus d’en-tête au-dessus, donc pas de trait) */
.lie-form { display: flex; gap: 8px; margin: 0 0 8px; }
.lie-form input { flex: 1; }
.lie-ligne .code-discord { white-space: nowrap; } /* (23/10 : le code et /relier, d'un bloc) */
/* (30/09) Téléphone : zone d'écriture et ligne d'état (« Terminé en… ») vraiment fixées en bas ; la page ne « rebondit » plus ;
la liste des conversations ne prend pas toute la hauteur (elle défile dans son cadre). */
@media (max-width:720px) {
html, body { overscroll-behavior-y: none; } /* (10/10, PastiiJay : « une vraie appli ») tirer vers le bas n'actualise plus nulle part : tout se met à jour tout seul */
.compte-saisie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 4px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); background: var(--fond); }
#pDiscuter #chat { padding-bottom: calc(var(--saisie-h, 178px) + 12px); } /* (10/10 : la hauteur réelle de la zone d’écriture, compte.js) */
#convs { max-height: 38vh; overflow-y: auto; }
}
.local-section .conv-menu { float: right; padding: 0 6px; }
/* (30/09) Utilisation : le forfait du compte, bien visible. */
.forfait { margin: 4px 0 10px; font-size: 15px; }
/* (11/10, PastiiJay : maquette « Chatbot revu », validée) TES MESSAGES : une bulle sombre bordée de gris (le blanc en grand « flashait » ;
il reste au bouton d'envoi). L'IA SANS BULLE : ses réponses sur la page, toute la largeur, sans nom ni logo. */
.bulle.moi { background: #2b2b2b; color: var(--texte); border: 1px solid #4a4a4a; } .bulle.moi { padding: 6px 10px; } /* (13/10, PastiiJay : sa bulle plus resserrée, plus de messages à l'écran) */
.bulle.lui { align-self: stretch; max-width: none; background: none; color: var(--texte); border: none; border-radius: 0; padding: 2px 2px; }
.bulle.moi a, .bulle.lui a { color: var(--texte); text-decoration: underline; }
.bulle.lui.attente { opacity: 1; }
/* (11/10, PastiiJay : « tout empaqueté, pas agréable ») la mise en forme des messages : de vrais paragraphes, des listes, du code */
.bulle p { margin: 0 0 10px; } .bulle p:last-child, .bulle ul:last-child, .bulle ol:last-child, .bulle .code-chat:last-child { margin-bottom: 0; }
.bulle ul, .bulle ol { margin: 0 0 10px; padding-left: 22px; } .bulle li { margin: 4px 0; } .bulle li::marker { color: var(--doux); }
.code-chat { margin: 0 0 10px; padding: 10px 12px; background: #141414; border: 1px solid #3a3a3a; border-radius: 4px; overflow-x: auto; font: 13px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }
/* (12/10 au soir, le dossier du PC) sous un bloc de code de l'IA : « Enregistrer » (14/10 : PC ou Google Drive), seulement quand l’un des deux est là */
.qcm-alfred { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--skin, var(--bord)); border-radius: 4px; display: grid; gap: 6px; } /* (19/10 : le questionnaire d'Alfred, mode Sentinelle) */
.qcm-alfred .qcm-q { margin: 0 0 4px; } .qcm-alfred .qcm-q small { color: var(--doux); }
.qcm-choix { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 4px; cursor: pointer; }
.qcm-choix input { margin: 3px 0 0; accent-color: var(--skin, var(--accent)); } .qcm-choix:has(input:checked) { border-color: var(--skin, var(--accent)); }
.qcm-repondre { justify-self: start; margin-top: 4px; }
.decisions { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--skin, var(--bord)); border-radius: 4px; display: grid; gap: 8px; max-height: 40vh; overflow-y: auto; } /* (22/10 : le tableau des décisions de la Sentinelle, au-dessus de la zone d'écriture) */
.decisions-titre { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.decision p { margin: 0 0 4px; overflow-wrap: anywhere; } .decision.remplacee { opacity: .5; } .decision.remplacee p { text-decoration: line-through; }
.decision-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.decision-choix label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--bord); border-radius: 4px; cursor: pointer; }
.decision-choix input { margin: 0; width: auto; flex: none; accent-color: var(--skin, var(--accent)); } .decision-choix label:has(input:checked) { border-color: var(--skin, var(--accent)); }
.decisions-valider { justify-self: start; }
.decision-choix label.court { white-space: nowrap; min-width: 96px; justify-content: center; } /* (Oui, Non, Plus tard : d'un bloc, même largeur) */
.code-outils { display: none; } .avec-enregistrer .code-outils { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.code-outils .sur-pc { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
/* (14/10, Google Drive) un seul bouton « Enregistrer » ; choix mémorisé : le dessin de l'endroit, et la petite flèche qui rouvre le menu */
.code-outils .menu-enr { display: inline-flex; }
.code-outils .menu-enr button { display: inline-flex; align-items: center; gap: 6px; }
.code-outils .menu-enr.memo [data-enregistrer] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.code-outils .menu-enr .chevron { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; padding: 0 6px; }
.code-outils .menu-enr svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menuEnr { position: fixed; z-index: 40; box-sizing: border-box; }
#menuEnr button.actif { background: var(--carte); }
#menuEnr .memo-case { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--texte); cursor: pointer; }
#menuEnr .memo-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--texte); }
/* (14/10, PastiiJay) la fenêtre de Google Drive dans un cadre de Pairping : un bandeau au-dessus (le nom, « Fermer »), toujours visible ;
sur téléphone, la fenêtre de Google ajustée à l'écran (elle se dessine pour un PC) */
#cadreDrive { position: fixed; z-index: 2147483000; display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 48px; padding: 0 6px 0 14px; background: var(--panneau); border: 1px solid var(--bord); border-bottom: none; border-radius: 6px 6px 0 0; color: var(--texte); font-weight: 700; font-size: 14px; }
#cadreDrive svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#cadreDrive span { flex: 1; }
#cadreDrive button { height: 36px; padding: 0 14px; }
@media (max-width: 640px) {
.picker-dialog { width: calc(100vw - 16px) !important; }
.picker-dialog-content, .picker-dialog-content iframe { width: 100% !important; height: calc(100dvh - 80px) !important; }
}
.compte-chat #chat { gap: 22px; } /* (PastiiJay : « ça fait des paquets, c'est indigeste ») de l'air entre tes messages et ses réponses */
/* L'ENTITÉ : là où la réponse arrive, ce que {{IA}} fait ; elle s'efface quand la réponse est finie */
.entite { display: flex; align-items: center; gap: 10px; height: 30px; margin-bottom: 4px; min-width: 0; }
.entite .phrase-travail { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.en-appel .entite .phrase-travail { display: none; } /* (22/10, PastiiJay) pendant un appel, la ligne du bas dit déjà « Il répond… » : la bulle garde son dessin seul */
.entite.part { animation: entite-part .6s ease-in forwards; }
@keyframes entite-part { to { opacity: 0; height: 0; margin: 0; } }
.entite-anim { width: 30px; height: 30px; flex: none; }
.entite-anim svg { width: 30px; height: 30px; overflow: visible; }
.entite .reflechit .noyau { fill: none; stroke: #fff; stroke-width: 1.6; transform-origin: 15px 15px; animation: entite-respire 1.6s ease-in-out infinite; }
.entite .reflechit .orbite { transform-origin: 15px 15px; animation: entite-tourne 2.2s linear infinite; }
.entite .reflechit .orbite circle { fill: #fff; }
.entite .cherche .cercle { fill: none; stroke: #5a5a5a; stroke-width: 1.4; }
.entite .cherche .balai { transform-origin: 15px 15px; animation: entite-tourne 1.4s linear infinite; }
.entite .cherche .point { fill: #fff; animation: entite-clignote 1.4s ease-in-out infinite; }
.entite .souvient rect { fill: none; stroke: #fff; stroke-width: 1.4; animation: entite-feuillette 1.8s ease-in-out infinite; }
.entite .souvient rect:nth-child(2) { animation-delay: .3s; stroke: #9b9b9b; } .entite .souvient rect:nth-child(3) { animation-delay: .6s; stroke: #5a5a5a; }
.entite .ecrit line { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; }
@keyframes entite-respire { 50% { transform: scale(.72); opacity: .6; } }
@keyframes entite-tourne { to { transform: rotate(360deg); } }
@keyframes entite-clignote { 50% { opacity: .2; } }
@keyframes entite-feuillette { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* LE BOUTON D'ENVOI (11/10, PastiiJay : « le blanc flashe… le gris Pairping, comme le fond de ce qu'on a écrit, et la flèche blanche ») :
le gris de tes messages, bordé comme eux ; la flèche « Un peu plus étroite », au trait blanc aussi fin que le micro (1,85 px à l'écran,
quelle que soit sa taille) */
.chat-boutons button.envoyer { background: #2b2b2b; border: 1px solid #4a4a4a; color: var(--texte); }
/* (11/10 au soir, PastiiJay : « je veux pas qu'il y ait une mémoire de j'ai cliqué dessus dernièrement ») la voix en temps réel, la dictée
et « Envoyer » : jamais de contour blanc au survol ni après un clic ; seul leur ÉTAT se voit (le doré pendant l'appel, le blanc de la dictée
qui écoute). À la souris, un léger éclaircissement suffit. */
.chat-boutons button.envoyer { --bord-btn: #4a4a4a; }
@media (hover:hover) and (pointer:fine) { .chat-boutons button:hover { border-color: var(--bord-btn, var(--bord)); filter: brightness(1.15); } }
/* (12/10, PastiiJay, maquette « Bouton Envoyer », G) l'invite de commande « >_ », le trait qui clignote ; ENVOYER gris (zone vide, ou voix
en temps réel), blanc dès qu'il y a de quoi envoyer ; au départ : le chevron file, ENVOI… puis OK (compte.js animerEnvoi) */
.envoyer .cmd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.envoyer .invite { width: 28px; height: 28px; display: block; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-off .envoyer:not(.frappe) .invite .curseur { opacity: 0; } /* (l'horloge commune avec la pile : compte.js ; la frappe le fige allumé) */
.envoyer .mot { font: 700 10px/12px ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .06em; color: #fff; transition: color .25s; }
.envoyer.vide .mot, .en-appel .envoyer .mot { color: #5a5a5a; }
@keyframes chev-part { 0% { transform: none; opacity: 1; } 45% { transform: translateX(14px); opacity: 0; } 46% { transform: translateX(-10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.envoyer.part .chev { animation: chev-part .7s ease-in-out; }
.envoyer.part .mot { color: #fff; }
/* (11/10, PastiiJay) LES FICHIERS JOINTS : le « + » à gauche d'« Effort », écarté de lui (« Effort » va avec « Auto ») */
/* (18/10, PastiiJay, maquette « Le bouton trombone », B : les trois du bas à 24 de haut : trombone, case Effort, pile) */
.effort .joindre { width: 24px; height: 24px; min-width: 0; padding: 0; margin-right: 8px; border-radius: 4px; border: 1px solid var(--bord); background: var(--panneau); display: inline-flex; align-items: center; justify-content: center; }
.effort .joindre svg { width: 16px; height: 16px; fill: none; stroke: var(--texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.effort .joindre:hover { border-color: var(--accent); }
.pieces-jointes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.piece { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #4a4a4a; border-radius: 4px; background: #2b2b2b; padding: 3px 4px 3px 10px; font-size: 13px; }
.piece > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.piece small, .fichier-joint small { color: var(--doux); flex: none; }
.piece button { width: 20px; height: 20px; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: none; display: inline-flex; align-items: center; justify-content: center; }
.piece button:hover { background: #444; }
.piece svg, .fichier-joint svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* dans la conversation : un fichier joint = une ligne qui s'ouvre d'un clic */
.fichier-joint { margin-top: 8px; border: 1px solid #4a4a4a; border-radius: 4px; background: #232323; overflow: hidden; }
.fichier-joint summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; list-style: none; }
.fichier-joint summary::-webkit-details-marker { display: none; }
.fichier-joint.sur-pc { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; }
.fichier-joint.sur-pc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fichier-joint summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fichier-joint pre { margin: 0; max-height: 320px; overflow: auto; padding: 8px 10px; border-top: 1px solid #3a3a3a; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }
/* glisser-déposer : le cadre qui dit « dépose ici » (en gris : le blanc pointillé est aux pubs) */
.depot-fichier { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,.6); pointer-events: none; }
.depot-fichier div { border: 2px dashed #9b9b9b; border-radius: 4px; padding: 28px 36px; font-size: 18px; background: #1b1b1b; }
/* (30/09) Bouton de discussion vocale : le logo de l’IA (c'est à elle qu'on parle), grisé tant qu'il est verrouillé. */
.logo-vocal { width: 24px; height: auto; display: block; margin: auto; pointer-events: none; }
.verrou .logo-vocal { filter: grayscale(1); opacity: .6; }
button.principal .logo-vocal { filter: drop-shadow(0 0 4px rgba(0,0,0,.5)); }
/* (30/09) Boutons de la zone d'écriture (logo vocal, micro, envoyer) : contenu parfaitement centré. */
.chat-boutons button { display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; line-height: 1; min-width: 0; }
.chat-boutons button > * { margin: 0; }
/* (30/09, propriétaire) En-tête des comptes sur deux lignes, fixé en haut de l'écran : logo + pseudo + déconnexion, puis les onglets
(qui défilent du doigt s'ils dépassent). Sur téléphone, « Nouvelle conversation » et « Nouveau dossier » côte à côte. */
.entete-compte { position: sticky; top: 0; z-index: 30; background: var(--fond); padding: 6px 0 4px; margin: 0 0 8px; border-bottom: 1px solid var(--bord); }
.onglets-compte { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 6px 0 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onglets-compte::-webkit-scrollbar { display: none; }
.onglets-compte button { flex: none; white-space: nowrap; }
/* (13/10, PastiiJay, maquette « Les onglets sur téléphone », validée) sur téléphone : le DESSIN au-dessus d'un petit nom ; (18/10) remplacé : tous les onglets tiennent, seul le nom de l'ouvert se lit */
@media (max-width: 720px) {
/* (18/10, PastiiJay, maquette « La barre des onglets », D « Tous visibles », validée) les onglets TIENNENT TOUS sur la largeur, sans défiler : chacun est
un dessin, seul l'onglet ouvert déplie son nom (animé) ; les noms des autres restent lus par les lecteurs d'écran (masqués, pas retirés) */
.onglets-compte { gap: 4px; }
.onglets-compte button:not([hidden]) { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 1px; height: 56px; font-size: 10.5px; letter-spacing: 0; transition: flex-grow .28s cubic-bezier(.2, .8, .2, 1); }
.onglets-compte button.actif:not([hidden]) { flex-grow: 2.4; justify-content: flex-start; padding: 7px 1px 6px; }
.onglets-compte button .ico { width: 22px; height: 22px; margin: 0; vertical-align: 0; } /* (13/10, PastiiJay : les dessins trop à gauche) plus fort que la marge de droite de l’ordinateur */
.onglets-compte button.actif .ico { width: 19px; height: 19px; }
.onglets-compte .libelle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onglets-compte button.actif .libelle { position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; display: block; max-width: 100%; text-overflow: ellipsis; font-size: 14px; line-height: 1.2; } /* (18/10, PastiiJay : « le nom est trop petit ») */
}
@media (min-width: 721px) { .onglets-compte button { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } .onglets-compte .ico { transform: translateY(-.048em); } } /* (13/10, PastiiJay) sur PC, les onglets aussi fins que « Nouveau » */
/* (30/09) Sous le pseudo, son groupe ; tiroir des conversations sur téléphone, ancré sous les onglets. */
.tiroir-convs { display: none; }
@media (max-width:720px) {
.compte-convs { position: sticky; top: var(--haut-entete, 96px); z-index: 25; padding: 6px 10px !important; }
.tiroir-convs { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none !important; border: none !important; padding: 4px 2px; font-weight: 600; text-align: left; }
.tiroir-convs #tiroirTitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiroir-convs .fleche { flex: none; transition: transform .2s; }
.compte-convs.ferme #convsContenu { display: none; }
.compte-convs.ferme .fleche { transform: rotate(-90deg); }
.boutons-convs button { padding: 5px 8px; font-size: 13px; }
}
/* (30/09) Liste des conversations : ascenseur orange (bien visible) ; la conversation ouverte a un liseré orange, dans le tiroir
fermé comme dans la liste dépliée. */
#convs { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
#convs::-webkit-scrollbar { width: 6px; }
#convs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
#convs::-webkit-scrollbar-track { background: transparent; }
#convs .local-conv.actif { border: 1px solid var(--skin, var(--accent)) !important; border-radius: 4px; outline: none; } /* (12/10, PastiiJay) la conversation active à la couleur du skin */
@media (max-width:720px) {
.tiroir-convs { border: 1px solid var(--bord) !important; border-radius: 4px; padding: 6px 10px !important; margin-bottom: 4px; }
}
/* (30/09) Rubriques du chatbot : petite flèche ▸ (repliée) / ▾ (dépliée) ; ascenseur orange aussi pour le fil de la conversation (PC). */
.local-section .chevron { display: inline-block; width: 14px; color: var(--accent); font-size: 12px; }
.local-section[data-zone-titre] { cursor: pointer; user-select: none; }
#chat { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
#chat::-webkit-scrollbar { width: 6px; }
#chat::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
/* (30/09) Téléphone, administration : les catégories du menu (Tableau de bord, Skills, Analyse…) réapparaissent dans la
bande qui défile, en petits intitulés orange devant leurs sous-menus. */
@media (max-width:720px) {
nav .groupe { display: inline-flex !important; margin: 0 2px 0 12px; padding: 0; border: 0; font-size: 11px; white-space: nowrap; color: var(--accent); flex: none; }
nav .groupe:first-child { margin-left: 0; }
}
/* (30/09 v2) Téléphone : tiroir LATÉRAL des conversations (remplace le tiroir replié sous les onglets). */
.tiroir-tete, .tiroir-fond { display: none; }
@media (max-width:720px) {
/* (11/10, PastiiJay : « une grosse barre en surbrillance blanche, c'était trop agressif » ; maquette « Chatbot revu ») une barre sobre :
fond gris, liseré gris, texte normal, ☰ au trait */
.tiroir-convs { display: flex; gap: 10px; align-items: center; justify-content: flex-start; position: sticky; top: var(--haut-entete, 96px); z-index: 25; width: 100%; background: var(--carte) !important; border: 1px solid var(--bord) !important; border-radius: 4px; padding: 7px 10px !important; margin: 0 0 6px; font-weight: 400; font-size: 14px; text-align: left; color: var(--texte); }
.tiroir-convs #tiroirTitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiroir-convs .fleche { transform: none !important; width: 18px; height: 18px; flex: none; fill: none; stroke: #ddd; stroke-width: 2; stroke-linecap: round; }
.compte-convs, .compte-convs.ferme { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(85vw, 340px) !important; z-index: 60; margin: 0 !important; border-radius: 0 4px 4px 0 !important; overflow-y: auto !important; transform: translateX(-105%); transition: transform .25s ease; padding: 12px !important; }
.compte-convs.ouvert { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
.compte-convs.ferme #convsContenu, .compte-convs #convsContenu { display: flex !important; } /* (12/10 : une pile, la corbeille au fond) */
.compte-convs #convs { max-height: none !important; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tiroir-fond.ouvert { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); }
}
@media (max-width:720px) { .compte-convs, .compte-convs.ferme { height: 100vh !important; height: 100dvh !important; max-height: none !important; background: var(--panneau) !important; } }
/* LE BORD DU FIL (11/10 au soir, maquette « Le chat sur téléphone », validée ; PastiiJay : « le flou… ça m'empêche de bien lire ») : plus de
fondu sur le texte (il effaçait les dernières lignes pendant qu'il écrit) ; un TRAIT FIN et une petite ombre marquent le bord : en haut
toujours, en bas seulement quand il reste du texte en dessous (body.reste-dessous, compte.js majBoutonBas). Le texte reste net jusqu'au
bord. PC : le fil défile dans son cadre (le trait sur le cadre). Téléphone : c'est la page qui défile (sous la barre ☰, au-dessus de la
zone d'écriture). */
@media (min-width:721px) {
/* (22/10, PastiiJay : « c'est devenu trop brut en haut… le texte se fait avaler ») l'ombre du haut était peinte SOUS le contenu (inset) :
une bulle la recouvrait. Elle est maintenant POSÉE PAR-DESSUS, collée en haut du fil (sticky) ; les marges rendent sa place (rien ne bouge). */
.compte-chat #chat::before { content: ''; position: sticky; top: -12px; flex: none; height: 8px; margin: -12px -12px -7px; border-top: 1px solid #2e2e2e; background: linear-gradient(rgba(0,0,0,.6), transparent); z-index: 2; pointer-events: none; }
body.reste-dessous .compte-chat #chat { box-shadow: inset 0 -1px 0 #2e2e2e, inset 0 -7px 6px -6px rgba(0,0,0,.6); }
}
@media (max-width:720px) {
.compte-saisie::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 0; border-bottom: 1px solid #2e2e2e; box-shadow: 0 -2px 6px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transition: opacity .25s; }
body.reste-dessous .compte-saisie::before { opacity: 1; }
}
/* (11/10, PastiiJay, même maquette) l'heure sous chaque réponse : petite et grise */
.bulle.lui .pied-msg { margin-top: 6px; font-size: 11.5px; color: #6f6f6f; letter-spacing: .02em; }
/* (13/10, maquette « Copier et écouter », B ; plus d'heure) les actions d'une réponse, sous elle : dessins au trait gris, éclairés au survol */
.bulle.lui .pied-msg { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.action-msg { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: #7a7a7a; cursor: pointer; }
.action-msg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .action-msg:hover { color: var(--texte); background: #262626; border: 0; } }
.action-msg.fait { color: var(--texte); } .action-msg.joue { color: var(--skin, var(--texte)); }
.action-msg.ferme-a { position: relative; color: #5a5a5a; } .action-msg .cad-a { position: absolute; top: 3px; right: 2px; width: 9px; height: 9px; stroke-width: 2.6; } /* (réservé : grisé, le cadenas de la même couleur) */
/* (13/10, PastiiJay : « la ligne sous la réponse fait déjà sauter une ligne ») après une réponse (et sa ligne de boutons), ton message suit
de plus près ; entre ton message et sa réponse, l'air reste */
.compte-chat #chat .bulle.lui:has(.pied-msg) + .bulle.moi { margin-top: -20px; } /* (16/10, PastiiJay : « ta bulle recollée sous la ligne Copier / haut-parleur » : ~8 px sous les icônes) */
@media (max-width:720px) {
.tiroir-convs::after { content: ''; position: absolute; left: -12px; right: -12px; top: calc(100% + 1px); height: 0; border-top: 1px solid #2e2e2e; box-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
}
/* (30/09) Téléphone : le haut (en-tête + barre ☰) vraiment FIXÉ comme la zone d'écriture (en « sticky », il bougeait un peu
quand la barre d'adresse du navigateur apparaissait ou disparaissait) ; la page garde une marge de la même hauteur. */
@media (max-width:720px) {
.entete-compte { position: fixed !important; top: 0; left: 0; right: 0; margin: 0 !important; padding: calc(6px + env(safe-area-inset-top)) 12px 4px !important; }
.tiroir-convs { position: fixed !important; top: var(--haut-entete, 96px); left: 12px; right: 12px; width: auto !important; margin: 4px 0 0 !important; }
body:has(.entete-compte) { padding-top: calc(var(--haut-entete, 96px) + 8px) !important; }
body:has(.entete-compte) #pDiscuter { padding-top: 52px; }
}
@media (max-width:720px) { .tiroir-convs { box-shadow: 0 -8px 0 4px var(--fond); } }
/* (30/09) Bouton ▶ dans les bulles de l’IA : couleurs inversées (fond foncé, triangle orange). */
/* (30/09) Utilisation : tokens restants (∞ en promotion illimitée). */
#tokensDetail .reste { color: var(--accent); font-size: 15px; }
#tokensDetail small { display: block; }
/* (30/09) Petit cadenas sur les boutons verrouillés (temps réel, lecture ▶) : on voit tout de suite que l'option est fermée. */
/* (11/10, PastiiJay, maquette « Touches de couleur » v2, validée) LE JAUNE « PREMIUM » : la voix en temps réel en jaune, même
verrouillée, avec un petit cadenas jaune dessiné (plus d'émoticône) ; « Approfondi » marqué DONATEUR, la pastille en jaune quand on
l'a choisi ; les métiers d'« À venir » en jaune. (11/10 au soir, maquette « Le chat sur téléphone », validée ; PastiiJay : « c'est
vraiment juste ce bouton pour dire que c'est la fonction premium, le reste ça fait trop ») PENDANT L'APPEL, SEUL LE BOUTON est doré :
plus de fil d'or sur la zone d'écriture, les messages, « Il écrit », « Il parle » ; les animations restent blanches. */
#vocal { position: relative; } /* (12/10, PastiiJay) ouvert (Donateur) : blanc comme les autres ; le doré seulement pour attirer l'œil d'un Standard (cadenas) et pendant l'appel */
#vocal.verrou, .avec-skin #vocal.verrou { opacity: 1; filter: none; color: #5a5a5a; } /* (13/10, PastiiJay : « la voix haute, tu la grises ») réservé : grisé, le petit cadenas de la même couleur, jamais de jaune */
#vocal .cadenas-vocal { display: none; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; align-items: center; justify-content: center; pointer-events: none; } /* (12/10, PastiiJay) un petit cadenas au trait DANS le bouton, en haut à droite, sans rond */
#vocal.verrou .cadenas-vocal { display: flex; }
#vocal .cadenas-vocal svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* (17/10, PastiiJay, maquette B) LE COMBINÉ (tout le monde comprend « appeler ») ; EN COMMUNICATION : il se couche, un cercle pulse autour AU RYTHME DE LA VOIX
d'Alfred (--voix, compte.js jouerFlux ; à la couleur du thème ou du skin), le temps de l'appel dessous. L'animation de la discussion (il réfléchit, il écrit) ne change pas. */
#vocal { flex-direction: column; gap: 2px; overflow: visible; }
#vocal .combine { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.en-appel #vocal .combine { transform: rotate(135deg); }
#vocal .chrono-appel { display: none; font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.en-appel #vocal .chrono-appel:not(:empty) { display: block; }
#vocal::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid currentColor; opacity: 0; pointer-events: none; transition: transform .08s linear, opacity .08s linear; }
.en-appel #vocal::after { opacity: calc(var(--voix, 0) * .9); transform: scale(calc(1 + var(--voix, 0) * .35)); }
#vocal.principal { background: var(--panneau); color: var(--texte); border-color: var(--texte); --bord-btn: var(--texte); } /* (13/10 au soir, PastiiJay : la brillance autour, « pas nécessaire », retirée) */ /* (l'appel en cours ; 13/10, PastiiJay : « ça doit pas être doré » : à la couleur du thème, celle du skin avec un skin de saison) */
.effort-menu button[data-effort="L"] b { flex-wrap: wrap; row-gap: 3px; } /* (l'étiquette passe sous le nom : la colonne est étroite) */
.effort-menu .tag-donateur { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #ffd650; border: 1px solid rgba(255,214,80,.5); background: rgba(255,214,80,.12); border-radius: 4px; padding: 0 6px; line-height: 15px; }
.effort-menu button.actif .tag-donateur { color: #6b5a12; border-color: #c9a640; background: rgba(255,214,80,.3); }
#effort.verrou-vocal .effort-pastille, #effort.verrou-effort .effort-pastille { opacity: .45; cursor: help; } /* (16/10 : en vocal en direct, l'effort est toujours Auto) */
#effort.verrou-vocal.aide::after, #effort.verrou-effort.aide::after { content: attr(data-aide); position: absolute; bottom: calc(100% + 8px); left: 0; width: min(280px, calc(100vw - 32px)); padding: 10px 12px; background: var(--panneau); color: var(--texte); border: 1px solid var(--bord); border-radius: 6px; font-size: 13px; line-height: 1.45; text-wrap: pretty; z-index: 30; box-shadow: 0 6px 20px rgba(0,0,0,.35); } /* (16/10, PastiiJay : la vignette « la fluidité d'abord ») */
/* (30/09) Administration sur téléphone : le menu en TIROIR latéral (☰), catégories et sous-menus en colonne, comme sur PC. */
#fondMenu { display: none; }
@media (max-width:720px) {
aside.menu, body.menu-replie:not(.menu-ouvert) aside.menu { display: flex !important; position: fixed !important; top: 0; bottom: 0; left: 0; width: min(80vw, 300px) !important; height: 100vh !important; height: 100dvh !important; flex-direction: column !important; align-items: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)) !important; gap: 0 !important; z-index: 70; transform: translateX(-110%); visibility: hidden; border-right: 1px solid var(--bord); }
body.tiroir-menu-ouvert aside.menu { transform: none !important; visibility: visible !important; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
aside.menu nav { display: block !important; }
aside.menu nav a { display: block !important; white-space: normal !important; padding: 8px 12px !important; }
aside.menu nav a.sous { padding-left: 20px !important; }
aside.menu nav .groupe { display: flex !important; margin: 16px 6px 4px !important; padding-top: 8px !important; border-top: 1px solid var(--bord) !important; font-size: 12px !important; color: var(--doux) !important; }
aside.menu .logo { margin: 0 8px 14px !important; }
aside.menu .bas { display: block !important; }
body.tiroir-menu-ouvert #fondMenu { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.5); }
}
/* (30/09) Fenêtre « Parler à l’IA à voix haute » (compte sans le droit vocal) : pub courte, pub longue, devenir donateur. */
.choix-vocal button[data-choix] { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 6px 0; padding: 10px 12px; text-align: left; }
.choix-vocal button[data-choix] small { font-weight: 400; opacity: .8; font-size: 12px; }
/* (30/09) Ton espace : ta priorité sous ton pseudo, en petit menu discret. */
#maPriorite { font-size: 11px; padding: 1px 4px; min-height: 0; height: auto; width: auto; max-width: 150px; background: transparent; color: var(--doux); border: 1px solid var(--bord); border-radius: 4px; }
/* (30/09) Réserve de vocal (Standard) : pastille sur le bouton vocal (3M, 8M…), jauge dans la fenêtre des pubs. */
#vocal[data-credit] { position: relative; }
#vocal[data-credit]::after { content: attr(data-credit); position: absolute; right: -6px; bottom: -6px; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; background: var(--accent, #ffffff); color: #fff; pointer-events: none; }
.jauge-vocal { height: 8px; border-radius: 4px; background: var(--bord); overflow: hidden; margin: 6px 0 10px; }
.jauge-vocal span { display: block; height: 100%; background: var(--accent, #ffffff); transition: width .4s ease; }
.choix-vocal button small { display: block; font-size: 11px; opacity: .8; }
/* (30/09) Onglet « À venir » : les futurs métiers, noms en gras orange. */
/* (30/09) Utilisation : « ▶ Recharger » sous chaque pourcentage (le pourcentage aussi est cliquable). */
#tokensDetail [data-recharger][role=button] { cursor: pointer; }
#tokensDetail button[data-recharger] { margin-top: 6px; }
.reinit-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
/* (30/09) Easter egg : le lapin blanc, presque invisible ; bien visible au survol ou au toucher (téléphone : le toucher suffit). */
.lapin-blanc { background: none !important; border: none !important; padding: 0 2px !important; min-height: 0; font-size: 13px; line-height: 1; opacity: .12; filter: grayscale(1) brightness(2); cursor: pointer; transition: opacity .4s; vertical-align: baseline; }
.lapin-blanc:hover, .lapin-blanc:focus-visible, .lapin-blanc:active { opacity: 1; }
.matrix-cadeau { color: #d8ffd8; }
.matrix-lien { color: #1fd35c !important; text-decoration: underline; }
.lapin-carte { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px dashed var(--accent); border-radius: 4px; }
/* (30/09) Groupes et droits : repère des multiplicateurs annoncés sur Ko-fi. */
.repere-kofi { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panneau); border-radius: 4px; font-size: 13px; }
.repere-kofi.alerte { border-left-color: var(--ko); }
/* (30/09) Message du système dans le chat (ex. un testeur cède sa place en vocal). */
.bulle.systeme { align-self: center; max-width: 92%; background: transparent !important; border: 1px dashed var(--bord); color: var(--doux); font-size: 13px; text-align: center; }
/* (23/10) le mot après un appel en Voix Standard : le nom de chaque voix d'un bloc */
.bulle.systeme.voix-mot b { white-space: nowrap; }
/* (30/09) Progression dans le tiers en cours (semaine), sans chiffre. */
.avance-tiers { height: 5px; border-radius: 3px; background: var(--bord); overflow: hidden; margin: 2px 0 8px; }
.avance-tiers span { display: block; height: 100%; background: #b53a28; transition: width .5s ease; }
/* (30/09) Fenêtre donateur : le mois seul, en bouton secondaire sous l'abonnement. */
.popup-soutenir.secondaire { background: transparent; color: var(--texte); border: 1px solid var(--bord); font-weight: 500; }
/* (30/09) Page d'accueil publique : le contenu sous la connexion (ce qu'il sait faire, comment ça marche). */
.accueil-infos { width: min(804px, 94vw); margin: 0 auto 6px; }
.accueil-infos h2 { font-size: 20px; margin: 22px 0 10px; text-align: center; }
.accueil-infos p { line-height: 1.6; color: var(--texte); }
.accueil-infos a { color: var(--accent); }
.accueil-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .accueil-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .accueil-grille { grid-template-columns: 1fr; } }
/* (30/09, propriétaire) Accueil en L sur PC : 4 cartes à droite, 3 en bas (celle du coin compte pour les deux), titre et connexion dans le creux */
.accueil-l { display: grid; grid-template-columns: repeat(3, 260px); justify-content: center; gap: 12px; width: min(804px, 94vw); margin: 2vh auto 0; }
.accueil-creux { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; }
.accueil-l { grid-auto-rows: 1fr; } /* toutes les cases de même hauteur ; la connexion en fait 2 */
.accueil-gauche { margin: 2vh auto 0; text-align: center; }
.accueil-l .accueil-atout { display: flex; flex-direction: column; justify-content: center; }
#carte { width: 100%; box-sizing: border-box; margin: 0; }
@media (max-width: 860px) { .accueil-l { grid-template-columns: 1fr 1fr; } .accueil-creux { grid-column: 1 / -1; grid-row: auto; } .accueil-l { grid-auto-rows: auto; } }
@media (max-width: 600px) { .accueil-l { grid-template-columns: 1fr; } }
/* (30/09) Téléphone et tablette : études, jeu, discuter, recherche, voix (sur PC, l ordre du HTML place les cartes courtes à droite) */
@media (max-width: 860px) { .accueil-l > :nth-child(4) { order: 1; } .accueil-l > :nth-child(6) { order: 2; } .accueil-l > :nth-child(5) { order: 3; } .accueil-l > :nth-child(2) { order: 4; } .accueil-l > :nth-child(3) { order: 5; } .accueil-l > :nth-child(7) { order: 6; } .accueil-l > .accueil-bandeau { order: 7; grid-column: 1 / -1; } }
/* (30/09) Création de compte : deux champs par ligne */
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 600px) { .paire { grid-template-columns: 1fr; } }
.accueil-bandeau { background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 16px 20px; text-align: center; }
.accueil-bandeau a { color: var(--accent); }
.accueil-bandeau b { display: block; margin-bottom: 6px; font-size: 17px; }
.accueil-bandeau p { margin: 6px auto 0; max-width: 780px; color: var(--doux); font-size: 14.5px; }
.accueil-atout { background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 14px 16px; }
.accueil-atout b { display: block; margin-bottom: 6px; }
.accueil-atout p { margin: 0; color: var(--doux); font-size: 14px; }
.accueil-etapes { margin: 0 auto; padding-left: 22px; max-width: 560px; line-height: 1.8; }
/* (30/09, propriétaire) PC : tout l'accueil tient sans ascenseur (écran 1080p, Chrome avec barre de favoris, zoom 100 %).
Connexion à gauche (2×2 cases), 4 vignettes en 2×2 à droite, « Gratuit » dessous sur toute la largeur.
À droite : 6 vignettes en 2×3 ; « Gratuit » sous la connexion. */
@media (min-width: 861px) {
.accueil-l { grid-template-columns: repeat(4, 280px); width: min(1156px, 96vw); grid-auto-rows: 1fr; }
.accueil-infos { width: min(1156px, 96vw); }
.accueil-l > :nth-child(4) { order: 1; } .accueil-l > :nth-child(6) { order: 2; } .accueil-l > :nth-child(5) { order: 3; } .accueil-l > :nth-child(3) { order: 4; }
.accueil-l > :nth-child(2) { order: 5; } .accueil-l > :nth-child(7) { order: 6; }
.accueil-l > .accueil-bandeau { grid-column: 1 / 3; grid-row: 3; }
.accueil-l .accueil-atout, .accueil-bandeau { padding: 12px 16px; }
.accueil-l .accueil-atout p, .accueil-bandeau p { font-size: 13.5px; line-height: 1.5; }
.accueil-bandeau p { margin-top: 4px; }
.accueil-l #carte { padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
.accueil-l #carte label.champ { margin: 8px 0 3px; }
.accueil-l #carte .onglets { margin-bottom: 8px; }
}
/* (30/09, propriétaire) Utilisation : chaque vignette a une entête orange (5 heures, 7 jours, Vocal, Tickets), le chiffre en gros dessous */
.tokens-grille > .tuile-u { padding: 0; overflow: hidden; border-radius: 4px; }
.tuile-tete { background: var(--skin); color: var(--sur-skin); font-weight: 700; font-size: 15px; text-align: center; padding: 7px 8px; }
/* (11/10 au soir, maquette « Le skin de progression » v2, validée) LA COULEUR DU COMPTE (--skin ; 12/10 : ne suit plus la jauge, blanc) à la place du blanc :
l'onglet ouvert, « Nouveau », la tête des jauges, « Maximum » quand la jauge est pleine (sans rien à cliquer), les coupons (cercle, chiffre,
« Utiliser »), le bandeau du Bonus. Les autres boutons d'action restent blancs (Recharger, Devenir Donateur…). */
:root { --skin: #ffffff; --sur-skin: #141414; } /* (12/10, PastiiJay : la couleur qui suivait la jauge, retirée ; blanc partout. --skin servira aux THÈMES des Donateurs) */
.onglets-compte button.actif, #nouveau { background: var(--skin); color: var(--sur-skin); border-color: var(--skin); }
/* (13/10, PastiiJay) « Nouveau » plus fin ; le MOT centré dans le bouton, le « + » dessiné à sa gauche, haut comme une majuscule (0,712 em
dans la DIN) et centré sur elle, au lieu du caractère « ＋ » qui comptait dans le centrage */
#nouveau { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; }
#nouveau .mot-nouveau { position: relative; }
/* (13/10, PastiiJay) même règle pour tout bouton avec un petit dessin : le MOT au centre, le dessin juste à sa gauche (Recharger : la pub) */
.mot-centre { position: relative; }
.mot-centre .ico-gauche { position: absolute; right: calc(100% + 6px); top: 50%; width: .712em; height: .712em; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#nouveau .plus-nouveau { position: absolute; right: calc(100% + 8px); top: 50%; width: .712em; height: .712em; transform: translateY(calc(-50% - .048em)); /* (le « + » au milieu de la majuscule) */ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
#tokensDetail button.maximum:disabled { background: var(--skin); color: var(--sur-skin); border-color: var(--skin); opacity: 1; cursor: default; }
#tokensDetail .anneau.coupons .anneau-val { color: var(--texte); } /* (12/10, PastiiJay : « les jauges ne doivent pas être soumises au skin ») */
#utiliserLapin:not(:disabled) { background: var(--skin); color: var(--sur-skin); border-color: var(--skin); }
/* (même maquette) LE SURVOL, seulement là où l'on peut cliquer quelque chose (comme le Bonus) : les jauges, les leviers de Participer, Mes PC, « Ta progression » (12/10 : son bouton « deviens pair ») */
@media (hover: hover) and (pointer: fine) {
/* (12/10, PastiiJay) les GRANDES fenêtres (5 heures, Hebdomadaire, Coupons, Progression et bonus, Espace des pairs, les cartes de
Participer) ne bougent plus : seul ce qu'on peut cliquer se soulève (leurs boutons, Mon tableau de bord, les skins) */
.cockpit .machine { transition: transform .2s, border-color .2s, box-shadow .2s; }
.cockpit .machine:hover { transform: translateY(-2px); border-color: #777; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.entete-gauche > button, .entete-gauche > a, .entete-bout > button, .theme-bloc > button, .onglets-compte button,
#tokensDetail button[data-recharger], #utiliserLapin, .bouton-plan:not(.actuelle), #telechargerLogiciel, #relierMachine, button#nouveau, .carte-jours .courbe .lignes .case-tdb, .menu-theme .case-t:not(:disabled) { transition: transform .2s, box-shadow .2s, border-color .2s; }
#tokensDetail button[data-recharger]:not(:disabled):hover, #utiliserLapin:not(:disabled):hover, .bouton-plan:not(.actuelle):hover, #telechargerLogiciel:hover, #relierMachine:hover, button#nouveau:hover, .entete-gauche > button:hover, .entete-gauche > a:hover, .entete-bout > button:hover, .theme-bloc > button:hover, .onglets-compte button:hover, .carte-jours .courbe .lignes .case-tdb:hover, .menu-theme .case-t:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.donateur-page .levier.multiplier:hover { border-color: #ffd650; }
}
.tuile-corps { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 10px; flex: 1; }
#tokensDetail .tuile-u .reste { font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.tuile-corps .coupon-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; } /* code au-dessus, Valider dessous */
.tuile-corps .coupon-form button { align-self: center; }
/* (30/09, propriétaire) Anneau d'utilisation (se vide avec le temps) ; appui = bulle avec le chiffre */
.anneau { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0; margin: 4px 0 6px; cursor: pointer;
background: radial-gradient(closest-side, var(--panneau) calc(80% - 1px), transparent 80%), conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); }
.anneau.faible { background: radial-gradient(closest-side, var(--panneau) calc(80% - 1px), transparent 80%), conic-gradient(#b3261e calc(var(--p) * 1%), rgba(255,255,255,.14) 0); }
/* (07/10, PastiiJay) Coupons : le cercle en 3 parts (3 au maximum) ; les parts se séparent par un petit vide couleur du fond, pas de trait blanc. */
.anneau.coupons { --fond-plein: #fff; --fond-vide: rgba(255,255,255,.14); background: radial-gradient(closest-side, var(--panneau) calc(80% - 1px), transparent 80%), repeating-conic-gradient(from -1.5deg, var(--panneau) 0 3deg, transparent 3.6deg 119.4deg, var(--panneau) 120deg), conic-gradient(var(--c1, var(--fond-vide)) 0 120deg, var(--c2, var(--fond-vide)) 120deg 240deg, var(--c3, var(--fond-vide)) 240deg 360deg); } /* (23/10, la vignette revue : chaque arc s'allume seul ; en haut à droite et à gauche les coupons de 5 heures, en bas le coupon hebdomadaire) */ /* (13/10, PastiiJay : « fait sur Paint à main levée ») les séparations CENTRÉES sur leur angle (from -1,5°) et leurs bords lissés (0,6° de fondu), le bord intérieur aussi : plus de marches de pixels */ /* (12/10, PastiiJay : une jauge reste blanche, jamais au skin) */
/* (07/10, PastiiJay : version B) le gros chiffre reste centré, « /3 » petit et gris collé à sa droite */
.anneau-val .nb { position: relative; }
.anneau-val .sur-max { position: absolute; left: 100%; bottom: .2em; margin-left: 3px; font-size: .4em; color: var(--doux); font-weight: 400; }
.bulle-info { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 5; width: max-content; max-width: 160px; text-align: center; white-space: pre-line; background: var(--texte); color: var(--fond); font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.bulle-info::before { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top: 0; border-bottom-color: var(--texte); }
/* (30/09, propriétaire) Espace compte : icônes d'onglets blanches, au trait (plus d'émoticônes colorées) */
.onglets-compte .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Vignettes d'utilisation : toutes sur une ligne sur PC, plus hautes, l'anneau respire ; boutons plus gros */
@media (min-width: 721px) { #tokensDetail { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } }
.tuile-corps { padding: 20px 12px 18px; gap: 12px; justify-content: space-between; }
.anneau { width: 96px; height: 96px; margin: 6px 0; }
.tuile-corps button.mini { font-size: 15px; padding: 8px 18px; }
/* Mon compte : la carte prend la largeur, les champs restent de taille raisonnable */
.changer-mdp { margin: 14px 0 4px; }
.signalement textarea { width: 100%; box-sizing: border-box; }
.signalement .actions { flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.signalement.depot { outline: 2px dashed currentColor; outline-offset: -6px; } /* (18/10 : un crash log glissé sur le cadre ; la couleur du texte, donc du thème et du skin) */
/* la version mise au propre : à lire, pas à emporter (le formulaire ne doit pas servir de résumeur) */
.signalement-propre { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--bord, rgba(128,128,128,.25)); border-radius: 4px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; user-select: none; -webkit-user-select: none; }
.souvenirs ul { list-style: none; padding: 0; margin: 8px 0; }
.souvenirs li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bord, rgba(128,128,128,.25)); font-size: 14px; }
.souvenirs li span { overflow-wrap: anywhere; }
.souvenirs-actif { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0 4px; cursor: pointer; }
.souvenirs-actif input { width: auto; }
.changer-mdp summary { cursor: pointer; color: var(--doux); font-size: 14px; text-decoration: underline; width: max-content; }
/* (30/09, propriétaire) PC : vignettes d'utilisation bien plus hautes (presque 9/16), grand anneau fin */
@media (min-width: 721px) {
#tokensDetail .tuile-u { aspect-ratio: 9 / 14; }
#tokensDetail .anneau { width: 150px; height: 150px; }
#tokensDetail .tuile-corps { justify-content: space-evenly; }
}
/* (30/09, propriétaire) Anneau au milieu de l'espace libre ; boutons Recharger et Valider tous alignés en bas */
#tokensDetail .tuile-corps { justify-content: flex-start; }
#tokensDetail .tuile-corps .anneau { margin: auto 0; }
#tokensDetail .tuile-corps .coupon-form { margin-top: auto; }
.explications-jauges { margin: 4px 0 8px; padding-left: 18px; color: var(--doux); font-size: 14px; line-height: 1.55; }
.explications-jauges li { margin: 4px 0; }
.explications-jauges b { color: var(--texte); }
#tokensDetail .tuile-coupon > :first-child { margin-top: auto; } /* (30/09) le texte à mi-chemin entre l'entête et le code */
/* (30/09, propriétaire) le texte du coupon un peu plus grand ; (13/10, PastiiJay) les entêtes des vignettes FINES, comme « Progression et bonus » */
#tokensDetail .tuile-coupon small { font-size: 14px; line-height: 1.45; }
/* (30/09, propriétaire) PC : le chatbot tient dans la fenêtre ; zone d'écriture ancrée en bas ;
deux ascenseurs séparés (la conversation, et la liste des conversations et dossiers). L'ombre du haut (masque) reste. */
@media (min-width: 721px) {
body.mode-chat { height: 100vh; height: 100dvh; min-height: 0 !important; overflow: hidden; }
body.mode-chat #pDiscuter { min-height: 0; }
body.mode-chat #pDiscuter > div:last-child { min-height: 0; }
body.mode-chat #chat { min-height: 0 !important; }
body.mode-chat .compte-convs { max-height: 100%; overflow-y: auto; }
}
.ico-micro { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-micro.plein { fill: currentColor; stroke: none; } /* (30/09) icône du bouton de dictée */
/* (30/09, propriétaire) Les trois paliers de la recharge : de plus en plus gros (plus tu montes, plus ça rapporte) */
.tiers-ligne .accent { color: var(--accent); }
.paliers { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 4px 0 6px; }
.palier { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--bord); border-radius: 4px; color: var(--doux);
padding: calc(6px + var(--t) * 3px) calc(10px + var(--t) * 3px); font-size: 12px; }
.palier b { font-size: calc(14px + var(--t) * 3px); color: var(--texte); }
.palier.encours { border-color: var(--accent); color: var(--accent); }
.palier.encours b { color: var(--accent); }
.palier.fait { opacity: .55; }
.choix-vocal h3 { text-align: center; } /* (30/09) titres des fenêtres de recharge centrés */
/* (11/10, PastiiJay : maquette « Utilisation revue ») LA FENÊTRE « RECHARGER » : une seule échelle (la jauge ronde, aplatie), les deux chemins
vers le même niveau, et le partage en jaune (la couleur des pairs) ; les pointillés restent aux jauges (blanc les pubs, rouge le partage) */
.choix-pseudo .carte.recharge-v2 { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.recharge-v2 h3 { margin: 0; text-align: left; }
.echelle-r { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.barre-r { position: relative; height: 14px; border-radius: 2px; background: rgba(255,255,255,.05); container-type: inline-size; } /* (un « conteneur » : le plein y pose le dégradé de l'échelle entière, 100cqw) */
.seg-r { position: absolute; top: 0; bottom: 0; }
.seg-r.reservoir { left: 0; background: rgba(255,255,255,.16); border-radius: 2px 0 0 2px; }
.seg-r.plein { left: 0; border-radius: 2px 0 0 2px; transition: width .9s cubic-bezier(.2,.8,.2,1); background-size: 100cqw 100%; background-repeat: no-repeat; } /* (le vrai dégradé : chaque couleur à sa place, même pendant qu'il grandit) */
.seg-r.tier { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 8px); }
.seg-r.pointille { -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px); } /* (la couleur : le dégradé posé par echelleRecharge) */
.seg-r.tier.vif { opacity: .9; }
.seg-r.partage { border-radius: 0 2px 2px 0; opacity: .8; }
.borne-r { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 2px #000; transform: translateX(-1px); }
.t-r { position: absolute; top: -19px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); }
.t-r.vif { color: #fff; }
.reperes-r { position: relative; height: 32px; font-size: 12px; color: var(--doux); }
.reperes-r span { position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.25; }
.reperes-r span.gauche { left: 0; transform: none; text-align: left; } .reperes-r span.droite { right: 0; transform: none; text-align: right; }
.reperes-r b { color: var(--texte); }
.lead-r { margin: 0; font-size: 15px; }
.deux-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-r { border: 1px solid #3d3d3d; border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #1d1d1d; }
.choix-r h4, .partage-r h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.choix-r p, .partage-r p { margin: 0; font-size: 13.5px; color: #d6d6d6; line-height: 1.45; }
/* (13/10, PastiiJay, maquette « Recharger, plus clair », validée) les paliers des pubs en cases (T1 fait, T2 le prochain…), « Regarder une pub »
centré ; le bouton du partage en bas à droite ; pour un pair, l'encouragement (son multiplicateur) et « Voir ma progression » */
.paliers-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .paliers-r i { font-style: normal; font-size: 11.5px; padding: 3px 2px; border: 1px solid #3d3d3d; border-radius: 4px; color: var(--doux); text-align: center; white-space: nowrap; } /* (PastiiJay : T1, T2, T3 sur une seule ligne, toute la largeur) */
.paliers-r i.fait { color: var(--texte); border-color: #5a5a5a; background: #2a2a2a; } .paliers-r i.ici { color: var(--texte); border-color: var(--texte); font-weight: 700; }
.recharge-v2 .bas-choix button[data-choix="pub"] { flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.partage-r .bouton-pair { align-self: flex-end; padding-top: 9px; padding-bottom: 7px; }
.pair-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid #3d3d3d; border-radius: 4px; background: #1d1d1d; }
.pair-r p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--texte); min-width: 0; flex: 1 1 260px; } .pair-r p b.j { color: #ffd650; } .pair-r .bouton-pair { flex: none; margin-left: auto; align-self: center; }
@media (max-width: 640px) { .partage-r .bouton-pair { align-self: center; } .pair-r .bouton-pair { margin: 0 auto; } }
.choix-r p.gain-r { color: var(--doux); font-size: 12.5px; }
.bas-choix { margin-top: auto; display: flex; flex-direction: column; } /* (les boutons des deux choix sur la même ligne, en bas) */
.bas-choix button[data-choix] { margin: 4px 0 0; min-height: 62px; } /* (la pub et Donateur, de la même hauteur) */
.bas-choix button[data-choix="pub"] { flex-direction: row; align-items: center; gap: 8px; } /* (l'icône à côté du texte, pas au-dessus) */
.recharge-v2 .msg { margin: 0; } .recharge-v2 .msg:empty { display: none; }
.recharge-v2 .actions { margin-top: 0; justify-content: flex-end; }
.trait-pubs, .trait-don, .trait-partage { width: 26px; height: 6px; border-radius: 3px; flex: none; }
.trait-pubs, .trait-partage { -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px); }
.note-r { margin: 0; font-size: 13px; color: var(--doux); border-left: 2px solid #555; padding-left: 10px; }
.partage-r { border: 1.5px solid rgba(255,214,80,.75); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 18px rgba(255,214,80,.16); background: linear-gradient(180deg, rgba(255,214,80,.06), transparent 70%); }
.bouton-pair { align-self: flex-start; background: #ffd650; color: #141414; border: 1px solid #ffd650; font-weight: 600; }
.bouton-pair:hover { filter: brightness(1.08); border-color: #ffd650; }
@media (max-width: 640px) { .deux-choix { grid-template-columns: 1fr; } }
/* (11/10, PastiiJay) LA CARTE DES JOURS (Progression et bonus) : la semaine en une jauge, la courbe, les PC */
.carte-jours { position: relative; max-width: 740px; margin: 0 auto 18px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); overflow: hidden; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.carte-jours .tete { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--skin); color: var(--sur-skin); padding: 7px 8px; font-size: 15px; font-weight: 700; }
/* (13/10, PastiiJay) le cadre du « i » des barres de titre centré sur la MAJUSCULE (0,048 em au-dessus du milieu de la ligne, à 15) */
.carte-jours > .tete .info-i, .tuile-tete .info-i { margin-top: -1.4px; } /* (une MARGE, jamais transform ni position : sinon le « i » devient le cadre de sa bulle d'aide, qui se retrouve large de 18 points) */ /* (le jaune des pairs ; la taille des vignettes 5 heures, Hebdomadaire, Coupons) */
/* (11/10 au soir, PastiiJay : « la fenêtre n'est pas stable ») les phrases d'une animation empilées au même endroit, une seule visible :
le cadre garde la hauteur de la plus longue (compte.js pilePhrases, montrerPhrase) */
.pile { display: grid; } .pile > span { grid-area: 1 / 1; visibility: hidden; } .pile > span.vue { visibility: visible; }
/* (13/10, PastiiJay, maquette « Ta régularité, en une jauge » validée) LA SEMAINE EN UNE JAUGE (compte.js jaugeSemaineHtml) : un jour
validé plein, figé, encadré ; aujourd'hui plus grand ; en cours, il se charge comme un téléphone ; le cadeau du bonus et sa bulle ;
semaine complète : une seule jauge, le cadeau ouvert, « Gagné », un seul reflet pour tout le dessin (--x ; --o mesuré : reperesReflet) */
div.sj { position: relative; padding: 14px 22px 4px; } /* (div : svg.sj est le dessin des jauges, il ne doit pas recevoir ce retrait) */
.sj-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sj-haut .ou { min-width: 0; font-size: 14px; color: var(--doux); } .sj-haut .ou b { color: var(--texte); font-size: 15px; } .sj-haut .ou sup { font-size: 10px; margin-right: 3px; }
.sj-bonus { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--r); cursor: help; outline: none; }
.sj-bonus svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sj-bonus small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.sj-bonus b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.sj-bulle { display: none; position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; width: min(300px, 80vw); padding: 12px 14px; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); color: var(--texte); font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.sj-bulle b { font-size: inherit; line-height: inherit; color: var(--texte); }
.sj-bonus:hover .sj-bulle, .sj-bonus:focus .sj-bulle { display: block; }
.sj-cases { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; height: 28px; transition: gap .6s ease; }
.sj-cases i { position: relative; height: 18px; border-radius: 2px; border: 1px solid #3a3a3a; overflow: hidden; transition: border-radius .6s, outline-color .6s; }
.sj-cases i.ok { background: var(--c); border-color: var(--c); outline: 1px solid color-mix(in srgb, var(--c) 60%, transparent); outline-offset: 2px; }
.sj-cases i.auj { height: 28px; }
.sj-cases i.charge { border-color: color-mix(in srgb, var(--c) 70%, #3a3a3a); }
.sj-cases i.charge::before { content: ""; position: absolute; inset: 0; background: var(--c); transform-origin: left; animation: sj-charge 2.4s ease-in-out infinite; }
@keyframes sj-charge { 0% { transform: scaleX(0); opacity: .35; } 55%, 75% { transform: scaleX(.92); opacity: .85; } 100% { transform: scaleX(0); opacity: .35; } }
.sj-cases i.pause { border: 1px dashed #ed1c24; }
.sj-noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; text-align: center; white-space: nowrap; color: var(--doux); font-size: 12px; }
.sj-noms .ici { color: var(--texte); font-weight: 700; }
@property --x { syntax: ''; inherits: true; initial-value: -100px; }
.sj.complete { animation: sj-x 3.2s ease-in-out infinite; }
@keyframes sj-x { 0% { --x: -100px; } 60%, 100% { --x: calc(var(--w, 800px) + 100px); } }
.sj.complete .sj-cases { gap: 0; }
.sj.complete .sj-cases i { height: 18px; border-radius: 0; border-color: transparent; outline-color: transparent; background: transparent; }
.sj.complete .sj-cases::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; border-radius: 2px; background: linear-gradient(90deg, var(--c0), var(--c6)); }
.sj.complete .sj-cases, .sj.complete .sj-bonus b, .sj.complete .sj-bonus small, .sj .cadeau-m { --b: calc(var(--x) - var(--o, 0px)); }
.sj.complete .sj-cases::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, transparent calc(var(--b) - 40px), rgba(255,255,255,.6) var(--b), transparent calc(var(--b) + 40px)); }
.sj.complete .sj-bonus b { position: relative; overflow: hidden; margin-top: 3px; padding: 3px 7px 2px; border-radius: 4px; background: var(--r); color: #141414; }
.sj.complete .sj-bonus b::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(var(--b) - 40px), rgba(255,255,255,.7) var(--b), transparent calc(var(--b) + 40px)); }
.sj.complete .sj-bonus small, .sj .cadeau-m { background: linear-gradient(90deg, var(--r) calc(var(--b) - 40px), #fff var(--b), var(--r) calc(var(--b) + 40px)); }
.sj.complete .sj-bonus small { -webkit-background-clip: text; background-clip: text; color: transparent; }
.sj .cadeau-m { display: none; width: 24px; height: 24px; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.sj.complete .sj-bonus .ferme { display: none; } .sj.complete .sj-bonus .cadeau-m { display: block; }
@media (max-width: 640px) { div.sj { padding: 12px 12px 4px; } .sj-noms { font-size: 10.5px; } }
.pied-jours { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 22px 16px; font-size: 13px; color: var(--doux); flex-wrap: wrap; }
.pied-jours b { color: var(--texte); } .pied-jours .aller { color: var(--texte); font-weight: 600; white-space: nowrap; }
/* (11/10 au soir, maquette « Régularité qui accélère » v2) LA COURBE DU MULTIPLICATEUR, sans durée ; plusieurs PC ; les saisons */
.carte-jours .courbe { display: flex; flex-direction: column; gap: 6px; padding: 14px 22px 0; }
.carte-jours .courbe-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--doux); min-height: 26px; }
/* (11/10 au soir, PastiiJay : « la fenêtre n'est pas stable ») le multiplicateur garde toujours sa place (×1,9 puis ×1,94 le faisaient passer
à la ligne) : la phrase à gauche se plie si besoin, toujours de la même façon */
.carte-jours .courbe-tete > :first-child { min-width: 0; }
.carte-jours .courbe-tete .mult { flex: none; min-width: 4.6ch; text-align: right; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.carte-jours .courbe svg.graphe { display: block; width: 100%; height: auto; overflow: visible; }
.carte-jours svg.graphe text { font-family: DINPro, DIN, sans-serif; font-size: 12px; fill: var(--doux); } /* (le graphique seulement : l'écran de la case des PC garde son blanc) */
/* (13/10, PastiiJay, maquette « Ton multiplicateur, autrement », D et 1, validée) deux cases équilibrées à la place de la courbe */
.mult-d { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.mult-d .cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mult-d .cases > div { border: 1px solid var(--bord); border-radius: 4px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 92px; }
.mult-d .cases > div.obj { border-style: dashed; }
/* (14/10 au soir, PastiiJay : « alignement ×2,16 ×2,21 ») les deux cases partagent leurs rangées (le titre, le chiffre, la phrase) : les chiffres en face l'un de l'autre, même quand une phrase passe sur deux lignes */
.mult-d .cases { grid-template-rows: auto auto auto; } .mult-d .cases > div { grid-row: span 3; display: grid; grid-template-rows: subgrid; justify-items: center; align-content: center; row-gap: 4px; }
.mult-d small { font-size: 12px; color: var(--doux); letter-spacing: .02em; } .mult-d .cases b { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mult-d p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #cfcfcf; } .mult-d p b { color: var(--texte); }
/* (13/10, PastiiJay, maquette « Utilisation, quelques retouches », C, B et 2, validée) la courbe : ton multiplicateur au point, le prochain
objectif ; les écritures plus grosses sur téléphone ; le « i » des vignettes à droite ; « Auj. » sous les jours ; le cadeau dit « à J7 » */
.carte-jours .courbe svg .lab-m { font-size: 14px; font-weight: 700; } .carte-jours .courbe svg .lab-o { font-size: 12px; font-weight: 700; }
.sj-noms .ici .court { display: none; }
.sj-bonus small.quand { margin-top: 3px; letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--doux); }
@media (max-width: 640px) {
.carte-jours svg.graphe text { font-size: 21px; } .carte-jours .courbe svg .lab-m { font-size: 25px; } .carte-jours .courbe svg .lab-o { font-size: 20px; }
.sj-noms .ici .long { display: none; } .sj-noms .ici .court { display: inline; }
}
@media (max-width: 720px) { #tokensDetail .tuile-tete { justify-content: space-between; } }
.carte-jours .courbe .lignes { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: #d6d6d6; }
.carte-jours .courbe .lignes .ligne-pcs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .carte-jours .courbe .lignes b { color: #ffd650; } .carte-jours .courbe .lignes b.blanc { color: var(--texte); }
/* (11/10 au soir, maquette « Bonus de régularité » v5, validée) LA CASE DES PC : un seul écran avec leur nombre dedans (en blanc), le titre
aligné sur l'écran puis la conséquence ; cliquable vers Partager (comme toute la carte), « › » à droite */
.carte-jours .courbe .lignes .bloc-pcs { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0; padding: 10px 12px; border: 1px solid #333; border-radius: 4px; background: #1d1d1d; transition: border-color .2s, background .2s; }
.carte-jours .courbe .lignes .bloc-pcs:hover { border-color: #6a6a6a; background: #232323; }
.carte-jours .bloc-pcs .ecran { width: 40px; height: 34px; flex: none; margin-top: 1px; }
.carte-jours .bloc-pcs .ecran text { font-family: DINPro, DIN, sans-serif; font-size: 13px; font-weight: 900; fill: #fff; }
.carte-jours .bloc-pcs > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.carte-jours .courbe .lignes .bloc-pcs b { color: var(--texte); font-size: 14px; }
.carte-jours .bloc-pcs .aller-pcs { margin-left: auto; align-self: center; font-size: 22px; line-height: 1; color: var(--texte); }
.carte-jours .courbe .lignes .saison { color: var(--doux); font-size: 12.5px; }
@media (max-width: 640px) { .carte-jours .courbe { padding: 12px 12px 0; } }
@media (max-width: 640px) { .carte-jours { margin: 0 0 18px; } }
/* (30/09, propriétaire) Pilules plus mates, pour aller avec les mains : reflet discret, moins de halo, couleurs plus douces */
.gelule::before { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.gelule.rouge { background: radial-gradient(ellipse at 50% 35%, #c9474d, #9a1b27 60%, #5a0d15) !important; box-shadow: 0 0 8px rgba(200, 40, 55, .25), 0 6px 12px rgba(0,0,0,.6); }
.gelule.bleue { background: radial-gradient(ellipse at 50% 35%, #4f82c4, #1d4f9e 60%, #0f2c5c) !important; box-shadow: 0 0 8px rgba(40, 100, 200, .25), 0 6px 12px rgba(0,0,0,.6); }
.gelule:hover { filter: brightness(1.08); }
.avis-utilisation { margin: 2px 0 0; font-size: 12px; color: var(--doux); text-align: center; } .avis-utilisation a { color: var(--accent); } /* (30/09) discret */
/* (30/09, propriétaire) Nouvelle conversation / Nouveau dossier : même contour gris au repos (même taille apparente) ;
au survol, Nouvelle conversation prend un contour noir (Nouveau dossier garde son contour orange) */
.boutons-convs button, .boutons-convs button.principal { border: 1px solid var(--bord); box-sizing: border-box; }
.boutons-convs button.principal:hover { border-color: #0d0c0b; }
/* (30/09, propriétaire) Écouter : juste l'icône, grise, dans le coin — sans cadre ni fond */
/* (30/09, propriétaire) Téléphone : les trois vignettes à anneau ont toutes la même hauteur ; le Coupon peut être plus long */
@media (max-width: 720px) {
/* (03/10) hauteur MINIMUM (plus fixe) : la vignette Tickets du Testeur a deux boutons, « Utiliser » était coupé ; les vignettes
d'une même rangée s'étirent ensemble, donc restent alignées */
#tokensDetail .tuile-u:has(.anneau) { min-height: 262px; }
#tokensDetail .tuile-u:has(.tuile-coupon) { min-height: 262px; } /* même hauteur que les autres */
#tokensDetail .tuile-coupon { padding: 12px 10px; gap: 8px; }
#tokensDetail .tuile-coupon small { font-size: 13px; }
}
/* (30/09, propriétaire) Chiffre au centre des anneaux (et nombre de tickets, même taille, même place) */
.anneau .anneau-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--texte); pointer-events: none; }
/* (05/10) le signe ∞ est dessiné un peu bas dans sa ligne : on le remonte pour qu'il soit au centre du cercle */
.anneau .anneau-val.infini { transform: translateY(-.13em); }
.anneau.sans-cercle { background: none !important; }
@media (min-width: 721px) { #tokensDetail .anneau .anneau-val { font-size: 36px; } }
#utiliserLapin:disabled { opacity: .45; cursor: default; }
#tokensDetail .place-vide { visibility: hidden; }
#tokensDetail .tuile-corps button.mini { min-width: 140px; height: 36px; box-sizing: border-box; margin-top: 0; } /* (30/09) Recharger et Utiliser de la même taille ; (08/10, PastiiJay) « Plein … » aussi, même hauteur : les chiffres au-dessus s'alignent */
/* (30/09, propriétaire) Barre d'onglets : fondu sur le bord où il reste des onglets (glisser pour les voir) */
.onglets-compte.suite-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.onglets-compte.suite-gauche { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.onglets-compte.suite-gauche.suite-droite { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ico-conv { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* (30/09) conversations et dossiers */
/* (30/09, propriétaire) « Il réfléchit » : trois points qui ondulent, texte qui scintille doucement, sans émoticônes */
.trois-points { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; vertical-align: middle; }
.trois-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: onde-points 1.2s ease-in-out infinite; }
.trois-points i:nth-child(2) { animation-delay: .15s; } .trois-points i:nth-child(3) { animation-delay: .3s; }
@keyframes onde-points { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.phrase-travail { background: linear-gradient(90deg, var(--doux) 0%, var(--texte) 50%, var(--doux) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: scintille 2.4s linear infinite; }
@keyframes scintille { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* (01/10, propriétaire) E-mail › Mails automatiques */
.modeles-cadre { display: grid; grid-template-columns: 280px 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .modeles-cadre { grid-template-columns: 1fr; } }
.modeles-liste { display: flex; flex-direction: column; gap: 6px; }
.modele-ligne { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 8px 10px; }
.modele-ligne small { color: var(--doux); font-size: 12px; }
.modele-ligne.actif { border-color: var(--accent); }
.mc-titre-liste { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.modeles-edition textarea { font-family: inherit; line-height: 1.5; }
/* (01/10, propriétaire) Site web › Statistiques */
.stats-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stats-barre .onglets { margin: 0; }
.stats-barre select { width: auto; }
.stat-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat-tuile small { color: var(--doux); font-size: 12px; }
.stat-tuile b { font-size: 26px; color: var(--accent); }
.stat-tuile span { color: var(--doux); font-size: 12px; }
.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; }
@media (max-width: 720px) { .stat-grille { grid-template-columns: 1fr; } }
.stat-carte h3 { margin-top: 0; font-size: 15px; }
.stat-courbe { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-bottom: 18px; }
.stat-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; }
.stat-col span { display: block; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; opacity: .85; }
.stat-col:hover span { opacity: 1; }
.stat-col small { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--doux); white-space: nowrap; }
.stat-ligne { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.stat-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-ligne i { display: block; height: 8px; background: var(--accent); border-radius: 4px; opacity: .8; }
.stat-ligne b { font-variant-numeric: tabular-nums; }
/* (01/10, propriétaire) Accueil : icônes au trait ; « Utilisable gratuitement » à gauche sur téléphone, centré sur PC */
.ico-accueil { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.accueil-bandeau { text-align: left; }
@media (min-width: 861px) { .accueil-bandeau { text-align: center; } }
.vignette-edit { border-top: 1px solid var(--bord); padding-top: 8px; margin-top: 8px; }
#envoyer.en-attente { opacity: .55; pointer-events: none; animation: battement 1s ease-in-out infinite; } /* (01/10) transcription en cours avant envoi */
/* (01/10, propriétaire) Onglet « Devenir donateur » */
.donateur-page h3 { margin: 18px 0 8px; } .donateur-page h3:first-child { margin-top: 0; }
.donateur-intro { color: var(--doux); line-height: 1.6; }
.donateur-avantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.donateur-avantages > div { border: 1px solid var(--bord); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.donateur-avantages b { color: var(--accent); font-size: 16px; }
.donateur-avantages span { color: var(--doux); font-size: 14px; line-height: 1.5; }
.donateur-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.donateur-offres button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 12px 14px; font-size: 16px; }
.donateur-offres button:first-child { border-color: var(--accent); }
.donateur-etapes { line-height: 1.8; padding-left: 20px; }
/* (01/10, propriétaire) Flèches de la barre d'onglets sur PC (souris) : rondes, discrètes, seulement du côté où il reste des onglets. */
.cadre-onglets { position: relative; margin-top: 2px; }
.cadre-onglets .onglets-compte { margin: 0 !important; padding-top: 4px; } /* (12/10 : la place du soulèvement au survol, sinon le haut de l'onglet est coupé) */
.fleche-onglets { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border-radius: 4px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.35); opacity: .9; }
.fleche-onglets:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
.fleche-onglets svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fleche-onglets.gauche { left: 0; }
.fleche-onglets.droite { right: 0; }
@media (hover: hover) and (pointer: fine) {
.cadre-onglets.suite-gauche .fleche-onglets.gauche, .cadre-onglets.suite-droite .fleche-onglets.droite { display: flex; }
}
/* (01/10, propriétaire) Utilisateurs : liste en pleine largeur, la fiche d'un compte s'ouvre en fenêtre centrée (plus de colonne étroite). */
.comptes-cadre, .comptes-cadre:has(#ficheCompte[hidden]) { display: block; }
.fond-fiche { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 200; }
.fiche-fenetre { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(860px, 94vw); max-height: 88vh; overflow-y: auto; z-index: 201; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); padding: 18px 22px; }
.fiche-fenetre[hidden], .fond-fiche[hidden] { display: none; }
.fiche-fenetre .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-fenetre .actions .mini { white-space: nowrap; }
.fiche-fenetre .fiche-groupes { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
/* (01/10, propriétaire) Mode essai : bouton « baguette magique » (passer la pub), violet pour qu'on ne le confonde jamais avec un vrai. */
.bouton-baguette { display: block; width: 100%; margin-top: 8px; border: 1px dashed #a77bf3; color: #c9a8ff; background: rgba(167, 123, 243, .08); }
.bouton-baguette:hover { background: rgba(167, 123, 243, .18); }
.popup-boutons .bouton-baguette { display: inline-block; width: auto; margin-top: 0; } /* (03/10) « Réinitialiser (0 ticket) » dans la fenêtre des tickets */
/* (01/10, propriétaire) E-mail : pièces jointes téléchargeables. */
.pieces-jointes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.piece-jointe { display: inline-block; padding: 4px 10px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); color: var(--texte); text-decoration: none; font-size: 13px; }
.piece-jointe:hover { border-color: var(--accent); color: var(--accent); }
/* (01/10, propriétaire) Icônes au trait dans les boutons (dons, « Je parle maintenant »). */
.ico-bouton { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 8px; }
/* (01/10, propriétaire) Mode essai : « Réinitialiser » tout en bas à droite des fenêtres de tiers (violet, comme la baguette). */
.reinit-essai { margin-left: auto; border: 1px dashed #a77bf3; color: #c9a8ff; background: none; }
.reinit-essai:hover { background: rgba(167, 123, 243, .15); }
/* (01/10, propriétaire) Bouton de voix haute : plus de chiffre. Contour orange vers la fin, puis une respiration lente ; vide = grisé. */
/* (01/10, propriétaire) Mode essai : chiffres exacts, discrets, en blanc. */
/* (05/10, propriétaire : « tout ce qui est un bonus de testeur, en violet ») le même violet que les boutons en pointillés des testeurs */
.chiffres-essai { color: #c9a8ff; font-size: 12px; font-variant-numeric: tabular-nums; }
/* (01/10, propriétaire) Accueil sur grand écran : la page était réglée pour un Windows à 125 %, trop petite à 100 %.
On l'agrandit par paliers selon la place RÉELLE (largeur ET hauteur en px CSS) : à 125-150 % sous Windows, la fenêtre
« paraît » plus petite, le palier baisse tout seul, rien ne déborde. Téléphone et petit écran : inchangés. */
/* (min-height divisée par le zoom : sinon la page agrandie dépasse l'écran et une barre de défilement apparaît ;
border-box : les marges intérieures comptent dans cette hauteur) */
body.page-accueil { box-sizing: border-box; }
/* Paliers mesurés le 01/10 : la page fait ~800 px de haut et ~1200 px de large au zoom 1 → un palier z ne s'active que si
la fenêtre fait au moins 800×z de haut et ~1250×z de large. */
@media (min-width: 1440px) and (min-height: 920px) { body.page-accueil { zoom: 1.15; min-height: calc(100vh / 1.15); } }
@media (min-width: 1630px) and (min-height: 1040px) { body.page-accueil { zoom: 1.3; min-height: calc(100vh / 1.3); } }
@media (min-width: 1750px) and (min-height: 1120px) { body.page-accueil { zoom: 1.4; min-height: calc(100vh / 1.4); } }
@media (min-width: 2000px) and (min-height: 1280px) { body.page-accueil { zoom: 1.6; min-height: calc(100vh / 1.6); } }
/* (02/10, PastiiJay) Pictogrammes AU TRAIT à la place des émoticônes (pictos.js) : fins, arrondis, de la couleur du texte. */
.ico-t { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: .3em; }
/* (13/10, PastiiJay : « la chasse aux coches vertes », plus jamais de coche verte sur le site sauf s'il le demande) un acquis, un avantage : un petit carré (blanc, noir en Clair ; jaune pour devenir pair ou Donateur) */
/* (14/10 au soir, PastiiJay : « il ne faut pas couper en deux les phrases… une présentation beaucoup plus soignée ») une accroche ne se coupe
jamais en deux (compte.js marquerAccroches) ; les paragraphes et les titres s'équilibrent, la coupure tombe de préférence à la ponctuation */
/* (14/10 au soir, retouche : « Maximum de cette étape » débordait) une accroche passe D'UN BLOC à la ligne suivante si elle ne tient pas sur
la ligne en cours ; plus large que sa case, elle se coupe à l'intérieur, jamais elle ne déborde */
.insecable, b[style*="color"], .pp-legende, .sans-coupure { display: inline-block; max-width: 100%; vertical-align: baseline; } .etiquette-g { white-space: nowrap; }
.coche { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2px; align-items: start; } /* (le carré d'un acquis, collé à son texte) */
p, li, small, .etat, .legende-r, .note-r, .accroche { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; }
.carre-a { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: currentColor; vertical-align: 1px; margin: 0 4px 0 2px; }
.promo-pair .carre-a { background: #ffd650; } /* (14/10 au soir) la vitrine de « Ton multiplicateur » pour qui n'est pas encore pair : les carrés jaunes des pairs */
/* (03/10, propriétaire) Tickets : « +1 ticket » au-dessus de « Utiliser », les deux de la même largeur ; le groupe en bas de la
tuile, donc « Utiliser » au même étage que les « Recharger » des autres jauges. */
/* (05/10) Le pied des tuiles de la page Utilisation : même hauteur partout, pour que les cercles soient alignés ; le bouton violet
des testeurs (« +1 coupon ») est aminci pour tenir au-dessus de « Utiliser ». */
#tokensDetail .tuile-pied { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; flex: none; width: 100%; height: 44px; }
/* (15/10, PastiiJay : « toujours les boutons de la même taille ») les boutons des trois vignettes côte à côte, à la même largeur (sur téléphone : toute la largeur, plus bas) */
#tokensDetail .tuile-pied > button.mini, #tokensDetail .tickets-boutons { width: 160px; max-width: 100%; }
/* (05/10 au soir) deux rangées sous un cercle (testeurs) : le pied est plus haut, et sur ordinateur les cercles un peu plus petits,
pour que les tuiles ne grandissent pas ; le bouton violet garde sa taille normale (aminci, il était dur à toucher) */
#tokensDetail.pied-double .tuile-pied { height: 90px; }
/* (05/10 au soir, propriétaire : « mes vignettes sont énormes… le même ratio d'aspect entre le rond et la vignette ») Sur ordinateur :
la RANGÉE est limitée à 240 px par tuile et centrée (avec trois tuiles au lieu de quatre, elles s'étiraient) ; et le cercle suit la
largeur de sa tuile (67 %), le chiffre dedans aussi : la proportion est la même quelle que soit la taille. */
@media (min-width: 721px) {
#tokensDetail { max-width: calc(var(--n, 4) * 240px + (var(--n, 4) - 1) * 10px); margin-left: auto; margin-right: auto; }
#tokensDetail .tuile-u { container-type: inline-size; }
#tokensDetail .tuile-u .anneau { width: 67cqw; height: 67cqw; }
#tokensDetail .tuile-u .anneau .anneau-val { font-size: 16cqw; }
}
/* (05/10 au soir, propriétaire : « les cercles sont trop petits ») Les cercles gardent TOUJOURS leur taille (150 px sur ordinateur) :
on ne les rétrécit plus quand il y a deux rangées dessous. */
.tickets-boutons { display: grid; gap: 6px; }
.tickets-boutons button { width: 100%; }
#pCompte button { min-width: 120px; } /* (15/10) Mon compte : les boutons de cadres voisins à la même taille (Enregistrer, Changer…) */
/* (03/10, propriétaire) Les animations des états du vocal : la petite onde (il écoute ; « vive » : il parle). (Ce qu'il fait
pendant une réponse : l'entité, plus haut.) */
.onde-anim { display: inline-flex; align-items: center; gap: 2px; height: 14px; margin-right: 8px; vertical-align: middle; }
.onde-anim i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleY(.3); animation: onde-barre 1.4s ease-in-out infinite; }
.onde-anim i:nth-child(2) { animation-delay: .15s; } .onde-anim i:nth-child(3) { animation-delay: .3s; } .onde-anim i:nth-child(4) { animation-delay: .45s; } .onde-anim i:nth-child(5) { animation-delay: .6s; }
.onde-anim.vive i { animation-duration: .7s; }
@keyframes onde-barre { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
/* (0.4.0, PastiiJay 04/10) Dictée en cours : le bouton d'arrêt en orange (le nôtre) avec le carré sombre, comme la flèche d'envoi. */
#micro.rouge { background: var(--accent); border-color: var(--accent); --bord-btn: var(--accent); color: #1a1918; } #micro.rouge:hover { background: var(--accent); filter: brightness(1.08); }
.popup button:disabled { opacity: .45; cursor: not-allowed; }
/* (07/10, PastiiJay : maquette A) L'EFFORT S | M, dans la zone d'écriture en bas à gauche (aucune hauteur en plus). */
.zone-texte { position: relative; flex: 1; display: flex; min-width: 0; }
.zone-texte textarea { flex: 1; padding-bottom: 46px; padding-right: 36px; } /* (18/10 : 46 = la barre du bas (8 + 24) et le dégradé qui la cache, sans toucher la dernière ligne) */
/* (08/10, PastiiJay : variante A) tout effacer : grise, rouge au survol / au doigt */
.effacer-texte { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 1px solid var(--bord); border-radius: 4px; display: grid; place-items: center; background: var(--panneau); color: var(--doux); cursor: pointer; transition: color .15s, background .15s, border-color .15s; /* (18/10, PastiiJay : la croix grossie, dans un bouton carré de 24 comme ses voisins) */ }
.effacer-texte svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.effacer-texte:hover, .effacer-texte:active { color: #e5484d; background: rgba(229,72,77,.12); border-color: #e5484d; }
/* (17/10, PastiiJay, maquette « Le carré qui arrête Alfred », A) LE CARRÉ : à la place d'« Annuler » (un texte effacé, tant pis), visible
seulement pendant qu'il réfléchit ou écrit ; un clic arrête sa réflexion (ce qui est écrit reste). À gauche de la croix quand elle est là. */
.arreter-reflexion { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 4px; background: var(--panneau); border: 1px solid var(--bord); color: var(--texte); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: carre-arrive .25s ease-out; }
.arreter-reflexion .carre-stop { width: 8px; height: 8px; border-radius: 1px; background: currentColor; }
.effacer-texte:not([hidden]) ~ .arreter-reflexion { right: 35px; }
@media (hover: hover) { .arreter-reflexion:hover { border-color: var(--texte); } }
@keyframes carre-arrive { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.effacer-texte[hidden], .arreter-reflexion[hidden] { display: none; }
/* (18/10, PastiiJay : « un effet d'ombre dégradé sur le texte derrière les boutons, sinon on voit mal ») le texte qui défile derrière le trombone, l'effort et la pile se fond dans le fond de la zone */
.zone-texte::after { content: ""; position: absolute; z-index: 1; left: 1px; right: 1px; bottom: 1px; height: 48px; border-radius: 0 0 3px 3px; background: linear-gradient(to bottom, transparent, var(--panneau) 30%); /* plein sous la barre, qui se fond sur 14 au-dessus */ pointer-events: none; }
.effort { z-index: 2; position: absolute; left: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doux); }
.effort[hidden] { display: none; }
.effort-choix { display: inline-flex; border: 1px solid var(--bord); border-radius: 4px; overflow: hidden; background: var(--panneau); }
.effort-choix button { background: transparent; border: 0; color: var(--doux); padding: 0 9px; font-weight: 600; font-size: 11px; line-height: 18px; height: 18px; min-height: 0; border-radius: 0; cursor: pointer; }
.effort-choix button.actif { background: var(--accent); color: #1a1918; }
/* (07/10, PastiiJay) Le L réservé aux donateurs : grisé avec un petit cadenas au trait pour un compte Standard ; la ligne violette des testeurs. */
.effort-cadenas { display: none; width: 9px; height: 9px; margin-left: 3px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.effort-choix button.ferme { opacity: .45; display: inline-flex; align-items: center; } .effort-choix button.ferme .effort-cadenas { display: inline; }
/* (07/10, PastiiJay) Onglet « Devenir donateur » : encadré d'accueil, étiquette « Nouveau » (Cerveau L), pictogrammes au trait. */
.donateur-haut { display: flex; gap: 14px; align-items: center; border: 1px solid var(--accent); border-radius: 4px; padding: 16px 18px; margin-bottom: 14px; }
.donateur-haut svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.donateur-haut b { font-size: 20px; display: block; margin-bottom: 4px; } .donateur-haut span { color: var(--doux); line-height: 1.5; }
.donateur-avantages .nouveau { border-color: var(--accent); }
.etiquette-nouveau { align-self: flex-start; font-size: 11px; font-weight: 600; border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 1px 8px; margin-bottom: 2px; }
.donateur-avantages .titre { display: flex; gap: 8px; align-items: center; }
.donateur-avantages .titre svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; flex: none; }
/* (07/10 soir, PastiiJay, maquette Participer/Utilisation) Le « i » des jauges, les tokens en clair, le « +1 » discret des testeurs,
le bandeau Pair sur toute la largeur, des vignettes plus hautes. */
.tuile-tete { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; }
.info-i { display: inline-grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; border-radius: 4px; border: 2px solid currentColor; font-family: Arial, sans-serif; font-size: 11px; line-height: 1; font-weight: 700; cursor: help; flex: none; } /* (08/10, PastiiJay : le « i » mal centré) taille paire, centrage par grille, police au « i » symétrique */
.info-i, .info { font-size: 0 !important; color: inherit; background: linear-gradient(currentColor, currentColor) 50% 3px / 2px 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 7px / 2px 5px no-repeat; } /* (mesures PAIRES : case 18, bord 2, intérieur 14, trait 2 pile au milieu ; avec 1,5 de bord, le trait penchait d'un demi-point) */ /* (13/10, PastiiJay : « les i ne sont pas bien centrés ») le « i » DESSINÉ (un point, un trait) au centre exact de sa case, plus la lettre Arial qui tombait de travers ; le texte reste pour les lecteurs d'écran (aria-label) */
.chiffres-clair { color: var(--doux); font-size: 13px; font-variant-numeric: tabular-nums; } .chiffres-clair b { color: var(--texte); font-weight: 700; }
#tokensDetail .tuile-u { position: relative; }
#tokensDetail .tuile-u:has(.anneau) { min-height: 330px; }
#tokensDetail .tuile-pied { height: 64px; }
/* (07/10 soir, PastiiJay) L'onglet « Participer » (maquette validée). */
.participer-intro { text-align: center; max-width: 640px; margin: 4px auto 22px; } .participer-intro h2 { font-size: 28px; margin: 0 0 6px; } .participer-intro p { color: var(--doux); margin: 0; } .participer-intro b { color: var(--texte); }
/* (09/10, PastiiJay : « choisis ton départ, puis évolue ») les deux départs se rejoignent vers le Pair */
/* La jauge d'EXEMPLE : la vignette hebdomadaire, mais en pointillés et marquée « Exemple » (ce n'est pas la tienne) */
/* (07/10 soir) Les bulles ne sont plus coupées par les bords des vignettes : la vignette ne cache plus ce qui dépasse, l'entête garde ses coins ronds. */
.tokens-grille > .tuile-u { overflow: visible; } #tokensDetail .tuile-tete { border-radius: 4px 4px 0 0; }
/* (08/10, PastiiJay, maquette Claudal/partage-comptes/maquettes/utilisation-mobile.html) UTILISATION SUR TÉLÉPHONE : une vignette par
ligne, couchée : le cercle à gauche, le titre et les chiffres au milieu, le bouton à droite (tous les boutons sur la même colonne).
Sur ordinateur, rien ne change. */
/* (11/10 au soir, maquette « Coupons et cadeaux » v4, validée ; PastiiJay : « agrandir le rond… à peu près deux fois la taille ») le GROS
CERCLE à gauche (le % et le multiplicateur bien lisibles dedans) ; à droite, avec de l'air, le titre et son « i » sur une ligne, les
chiffres dessous, puis le bouton : plus rien ne se chevauche, même sur un téléphone étroit (360 px). */
@media (max-width: 720px) {
#tokensDetail { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
#tokensDetail .tuile-u { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "anneau tete" "anneau chiffres" "anneau bouton"; column-gap: 26px; row-gap: 4px; align-items: center; padding: 12px; min-height: 0 !important; position: relative; }
#tokensDetail .tuile-corps, #tokensDetail .tuile-pied { display: contents; }
#tokensDetail .tuile-tete { grid-area: tete; align-self: end; background: none; color: var(--texte); padding: 0; display: block; position: static; text-align: center; /* (13/10 au soir, PastiiJay : sur téléphone, le titre CENTRÉ au-dessus du bouton) */ font-size: 15px; border-radius: 0; }
/* (14/10 au soir, PastiiJay : « les i en haut à droite de la case… rattachés à la case plutôt qu'à la ligne ») le « i » dans le coin de la vignette, sa bulle dessous, alignée à droite */
#tokensDetail .tuile-tete .info-i { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; line-height: 15px; font-size: 11px; }
#tokensDetail .tuile-u .anneau { grid-area: anneau; width: 116px; height: 116px; margin: 0; }
#tokensDetail .tuile-u .anneau .anneau-val { font-size: 31px; } #tokensDetail .tuile-u .anneau.coupons .anneau-val { font-size: 36px; }
#tokensDetail .chiffres-clair { grid-area: chiffres; align-self: center; text-align: center; } /* (13/10 au soir : les nombres centrés au-dessus du bouton) */
#tokensDetail .tuile-pied > button, #tokensDetail .tickets-boutons { grid-area: bouton; align-self: start; justify-self: center; width: 132px; margin-top: 4px; } /* (18/10, PastiiJay : « réduis la largeur des 3 boutons ») Recharger, Recharger, Utiliser : 132 points, centrés sous le titre */
#tokensDetail .tuile-corps button.mini { min-width: 0; width: 132px; justify-self: center; font-size: 13px; padding: 9px 6px; height: auto; min-height: 36px; line-height: 1.2; } /* (11/10 au soir, PastiiJay : « Plein samedi qui déborde » : sur deux lignes, le bouton grandit) */
#tokensDetail .chiffres-clair { white-space: nowrap; } #tokensDetail .chiffres-clair b { font-size: 15px; color: var(--texte); }
/* (14/10 au soir, PastiiJay : « rétrécir la vignette ») plus de chiffres sous l'anneau (les Pairpoints) : le titre et le bouton se resserrent au milieu */
#tokensDetail .tuile-u:not(:has(.chiffres-clair)) { grid-template-areas: "anneau tete" "anneau bouton"; align-content: center; row-gap: 12px; }
}
/* (08/10, PastiiJay : maquette effort-tiroir.html, variante B) L'EFFORT en petit menu : la pastille fermée dit le choix en entier
(« Auto », « Small »…), le menu s'ouvre vers le haut, une ligne par choix avec sa phrase. */
.effort-pastille { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); color: var(--texte); font: inherit; font-size: 13px; font-weight: 700; height: 24px; min-height: 0; padding: 0 6px; cursor: pointer; }
.effort-pastille:hover { border-color: var(--doux); }
.effort-pastille svg { order: -1; /* (18/10, PastiiJay : « la petite flèche avant le mot ») */ margin: 0 3px 0 0; /* (18/10 : le dessin est recadré sur la flèche, sans marge cachée : le vide à gauche = celui à droite du mot, la flèche près du mot) */ width: 12px; height: 7.2px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform .2s; }
.effort.ouvert .effort-pastille svg { transform: rotate(180deg); }
.effort-menu { position: absolute; left: 0; bottom: 30px; z-index: 30; width: 280px; max-width: calc(100vw - 40px); display: flex; flex-direction: column; gap: 2px; background: var(--carte); border: 1px solid var(--bord); border-radius: 4px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s; }
.effort.ouvert .effort-menu { opacity: 1; transform: none; pointer-events: auto; }
.effort-menu button { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; color: var(--texte); font: inherit; padding: 7px 8px; min-height: 0; cursor: pointer; }
.effort-menu button:hover { background: rgba(255,255,255,.07); }
.effort-menu button.actif { background: var(--skin, var(--accent)); color: var(--sur-skin, #1a1918); } .effort-menu button.actif small { color: #555; } /* (12/10, PastiiJay) la surbrillance à la couleur du skin (blanche en Sombre) */
.skin-legende .effort-menu button.actif { background: var(--aurore); background-size: 300% 100%; animation: aurore 9s linear infinite; }
.effort-menu button b { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.effort-menu small { color: var(--doux); font-size: 12px; line-height: 1.3; } .effort-menu small i { font-style: normal; font-size: 10px; }
.effort-menu button.ferme { opacity: .45; cursor: default; } .effort-menu button.ferme .effort-cadenas { display: inline; }
/* (08/10, PastiiJay) L'EN-TÊTE DU COMPTE, sur ordinateur comme sur téléphone : TROIS ZONES. À gauche se déconnecter ; au CENTRE
(vrai milieu de l'écran) la Console, réservée à l'équipe : un bouton en largeur, façon écran de terminal ; à droite le pseudo, et
la fiole des testeurs TOUT AU BOUT (une fonction spéciale, seule sur le bord). */
.entete-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.entete-ligne > .compteur-tokens { display: none; }
.entete-gauche { display: flex; align-items: center; gap: 6px; justify-self: start; }
.entete-centre { display: flex; align-items: center; justify-content: center; }
.entete-bout { display: flex; align-items: center; gap: 8px; justify-self: end; }
/* (08/10, vu sur le téléphone de PastiiJay : « Propriétaire · Donateur » passait sous la Console) Téléphone : la Console garde son
style terminal mais sans le mot ; le pseudo et sa ligne se coupent (…) au lieu de déborder. */
.entete-gauche > button, .entete-bout > button, .theme-bloc > button { width: 34px; height: 34px; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.entete-ligne button[hidden] { display: none !important; }
/* (11/10, PastiiJay : « pas besoin d'un truc vert, la matrix, ça me plaît pas ») comme ses voisins : fond sombre, liseré gris, texte blanc */
.bouton-console { display: inline-flex; align-items: center; gap: 7px; height: 34px; min-width: 0; padding: 0 14px; border-radius: 4px; font: inherit; font-size: 14px; color: var(--texte); background: var(--panneau); border: 1px solid var(--bord); cursor: pointer; text-decoration: none; } /* (11/10 : un lien) */
.bouton-console:hover { border-color: var(--accent); }
.bouton-console svg { flex: none; }
/* L'INVITATION À INSTALLER L'APPLI (téléphone, dans le navigateur ; installer.js) : (13/10, PastiiJay, maquette « Le petit bouton Installer », B)
un petit bouton carré comme ses voisins, le téléphone à la flèche au trait, et un POINT JAUNE (la couleur des notifications, pour tout le
monde, skin ou pas : « un petit caillou dans la chaussure ») tant que l'appli n'est pas installée ; « Installer l'appli » dans sa bulle */
#boutonInstaller { position: relative; } #boutonInstaller[hidden] { display: none !important; }
#boutonInstaller .point-i { display: none; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffd650; box-shadow: 0 0 0 2px var(--fond); }
#boutonInstaller.a-installer .point-i { display: block; }
/* (23/10, PastiiJay) REJOINDRE LE DISCORD EN UN CLIC : après les Skins ; le même point jaune tant que le compte n’est pas relié ; relié, il reste et ouvre le serveur ; (24/10, PastiiJay) juste après la palette des Skins, sur téléphone aussi */
#boutonDiscord { position: relative; } #boutonDiscord[hidden] { display: none !important; }
#boutonDiscord.relie .point-i { display: none; } /* (relié : l'icône reste, sans point) */
#boutonDiscord .point-i { display: block; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffd650; box-shadow: 0 0 0 2px var(--fond); }
.installer-etapes { margin: 8px 0 4px; padding-left: 22px; line-height: 1.5; } .installer-etapes li { margin: 4px 0; }
/* (13/10 au soir, PastiiJay, maquette « Installer, tous navigateurs », A) la fenêtre « Installer l'appli » : le grand bouton, la marche à suivre repliée */
.popup.installer-p { width: min(420px, 100%); }
.installer-p .intro { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.installer-p .gros { width: 100%; height: auto; min-height: 44px; padding: 10px 14px; font-size: 16px; }
.installer-p .gros:disabled { opacity: .5; }
.installer-p .sous { margin: 8px 0 0; font-size: 12.5px; color: var(--doux); line-height: 1.45; text-align: center; }
.installer-p details { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 10px; }
.installer-p summary { cursor: pointer; font-size: 14px; color: var(--doux); list-style: none; } .installer-p summary::-webkit-details-marker { display: none; }
.installer-p summary::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; vertical-align: 1px; }
.installer-p details[open] summary::before { transform: rotate(90deg); }
.installer-p .note { margin: 10px 0 0; font-size: 12.5px; color: var(--doux); line-height: 1.45; }
.installer-p .copier-l { background: none; border: 0; padding: 0; color: var(--texte); text-decoration: underline; font: inherit; font-size: 12.5px; cursor: pointer; min-height: 0; height: auto; }
.entete-gauche > .bouton-console { width: 34px; padding: 0; justify-content: center; flex: none; } .bouton-console .mot-console { display: none; } /* (12/10 au soir, PastiiJay : « trop large ») carré comme ses voisins, l'icône seule */
/* (08/10) Pour les curieux (onglet Pair) : fermé par défaut, discret */
.pour-curieux { margin-top: 16px; border-top: 1px solid var(--bord); padding-top: 12px; }
.pour-curieux h4 { margin: 14px 0 4px; color: var(--texte); font-size: 14px; }
.pour-curieux ul { margin: 4px 0; padding-left: 20px; } .pour-curieux li { margin: 3px 0; }
/* (08/10, PastiiJay) LE MULTIPLICATEUR DU PARTAGE : sur les vignettes (coin haut-droit) */
#tokensDetail .tuile-u { position: relative; }
/* (08/10, PastiiJay) la configuration minimale de l'onglet Pair */
.pair-telecharger { padding: 12px 0; }
.pair-telecharger .principal { margin: 10px 0; }
.config-min small { color: var(--doux); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.config-min ul { margin: 4px 0 0; padding-left: 18px; color: var(--doux); font-size: 13px; } .config-min b { color: var(--texte); }
.config-min ul { list-style: none; padding-left: 0; } .config-min li { position: relative; padding-left: 14px; } .config-min li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; border-radius: 1px; background: var(--texte); } /* (13/10, PastiiJay : « des carrés à nous », plus de petits ronds) */
/* (08/10, PastiiJay) 5 heures et Hebdomadaire en COMPTEUR : un cinquième du tour ouvert en bas, le multiplicateur dans ce creux */
.anneau.compteur { background: radial-gradient(closest-side, var(--panneau) 80%, transparent 81%), conic-gradient(from 216deg, var(--c, var(--accent)) 0 calc(var(--p) * .8%), rgba(255,255,255,.14) 0 80%, transparent 0); } /* (--c : la couleur du multiplicateur) */
.anneau.compteur.faible { background: radial-gradient(closest-side, var(--panneau) 80%, transparent 81%), conic-gradient(from 216deg, #b3261e 0 calc(var(--p) * .8%), rgba(255,255,255,.14) 0 80%, transparent 0); }
.anneau-mult { position: absolute; left: 0; right: 0; bottom: 1%; display: flex; justify-content: center; font-family: DINPro, DIN, sans-serif; font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
/* (08/10, PastiiJay) onglet Pair : « Vérifier » sous le nom de la machine, petit et fin comme « Tester » du logiciel */
.petit-verifier { padding: 2px 10px; font-size: 12px; border-radius: 4px; margin-top: 4px; }
/* (08/10, PastiiJay : « l'écriture trop décollée ») le titre collé en haut de la carte, une ligne d'air avant « Télécharger » */
#pPair .carte > .lie-bloc:first-child .pair-telecharger { padding-top: 0; }
#pPair .pair-telecharger .principal { margin-top: 18px; }
/* (08/10, PastiiJay : « la version mobile, ça va pas ») TÉLÉPHONE, comme sur ordinateur : le multiplicateur petit, DANS le creux de la jauge (il dépassait) */
@media (max-width: 720px) {
#tokensDetail .tuile-u .anneau-mult { font-size: 19px; bottom: 1px; }
#tokensDetail .tuile-u .anneau.compteur .anneau-val { transform: translateY(-5px); }
}
/* (09/10, PastiiJay, sur téléphone) la carte d'Utilisation en colonne */
@media (max-width: 720px) {
#pUtilisation > .carte { display: flex; flex-direction: column; }
}
/* (09/10, PastiiJay) les jauges en % de la jauge de départ : « % » plus petit, et le maximum actuel sous les tokens */
.anneau .anneau-val small.pc { font-size: .45em; font-weight: 700; margin-left: 1px; }
/* (16/10, maquette « Tes Pairpoints ») 5 heures et Semaine : le chiffre centré, « PP » à sa droite sur la même ligne ; dessous, la petite légende */
#tokensDetail .anneau-val .nb { position: relative; display: inline-flex; align-items: baseline; line-height: 1; } #tokensDetail .anneau-val .nb small.pc { position: static; margin-left: 4px; font-size: .4em; line-height: 1; color: var(--doux); font-weight: 400; } /* (18/10, PastiiJay : « centre le chiffre et PP ensemble ») le chiffre et « PP » forment UN groupe centré dans l'anneau, sur la même ligne d'écriture */
#tokensDetail .legende-a { display: flex; flex-direction: column; align-items: flex-start; width: max-content; gap: 2px; font-size: 13px; color: var(--doux); } /* (17/10, PastiiJay, sur téléphone : les pastilles alignées l'une sous l'autre ; la ligne longue s'étend vers la droite, jamais hors de la vignette) */ #tokensDetail .legende-a > span { white-space: nowrap; }
#tokensDetail .legende-a .pastille { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
#tokensDetail .legende-a .pastille.coupon { background: #76b900; }
#tokensDetail .legende-a b { color: #76b900; }
.chiffres-clair .max-pc { display: block; color: var(--doux); font-size: 12px; }
/* (09/10, PastiiJay, maquette participer-strategies.html) Participer : « Choisis ta stratégie », trois panneaux */
.participer-intro b { font-weight: 700; }
.bouton-plan { margin-top: auto; display: block; width: 100%; background: #fff; color: #141414; border: 0; border-radius: 4px; padding: 10px 14px; font-weight: 700; text-align: center; }
.bouton-plan small { font-weight: 400; opacity: .75; font-size: inherit; }
.bouton-plan.actuelle { background: #2a2a2a; color: #d6d6d6; border: 1px solid #444; box-shadow: inset 0 3px 7px rgba(0,0,0,.55); cursor: default; }
.bouton-plan.jaune { background: #ffd650; }
/* (11/10 au soir, maquette « Participer, version leviers », validée par PastiiJay) la formule animée, les deux leviers, plusieurs PC */
.donateur-page .hero-p { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 18px; margin-bottom: 18px; }
.donateur-page .hero-p .anneau { width: 150px; height: 150px; cursor: default; margin: 0; } .donateur-page .hero-p .anneau .anneau-val { font-size: 34px; }
.donateur-page .op { align-self: center; font-size: 26px; font-weight: 700; color: var(--doux); }
.donateur-page .regle { margin: 8px 0 0; color: var(--doux); font-size: 13.5px; } .donateur-page .regle b { color: var(--texte); }
.donateur-page .leviers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 26px; }
.donateur-page .levier { display: flex; flex-direction: column; gap: 12px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 16px; }
.donateur-page .levier.multiplier { border-color: #ffd650; box-shadow: inset 0 0 22px rgba(255,214,80,.08); } /* (13/10, PastiiJay : le cadre jaune paraissait déborder) la lueur à l'intérieur : les bords tombent pile sur ceux des autres cadres */
.donateur-page .levier h3 { margin: 0; font-size: 20px; line-height: 1.2; text-wrap: balance; }
/* (15/10, maquette « Parrainage et semaines » validée) INVITE TES AMIS : toute la largeur, sous les deux leviers ; le lien, ses deux boutons de même taille, trois étapes, les amis */
.donateur-page .levier.amis { grid-column: 1 / -1; } .donateur-page .levier.amis:empty { display: none; }
.levier.amis .etapes-a { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .levier.amis .etapes-a li { border: 1px solid var(--bord); border-radius: 4px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--doux); } .levier.amis .etapes-a li b { color: var(--texte); display: block; margin-bottom: 2px; }
.levier.amis .etapes-a .n { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffd650; color: #ffd650; font-size: 12px; text-align: center; line-height: 18px; margin-right: 6px; }
.levier.amis .lien-a { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .levier.amis .lien-a code { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; padding: 0 12px; min-height: 36px; border: 1px solid var(--bord); border-radius: 4px; background: var(--fond); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .levier.amis .lien-a button { flex: 0 0 120px; }
.levier.amis .amis-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .levier.amis .amis-l li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--bord); border-radius: 4px; padding: 8px 12px; font-size: 14px; } .levier.amis .amis-l small { color: var(--doux); font-size: 13px; text-align: right; } .levier.amis .amis-l li.fait small { color: #76b900; }
@media (max-width: 640px) { .levier.amis .etapes-a { grid-template-columns: 1fr; } }
.donateur-page .accroche { margin: 0; color: #d6d6d6; font-size: 14.5px; } .donateur-page .accroche b { color: var(--texte); } .donateur-page .levier.multiplier .accroche b.pair { color: #ffd650; }
.donateur-page .choix { display: flex; flex-direction: column; gap: 6px; background: var(--carte); border: 1px solid #2e2e2e; border-radius: 4px; padding: 12px; }
.donateur-page .choix-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .donateur-page .choix-tete h4 { margin: 0; font-size: 16px; }
.donateur-page .choix-tete span { font-size: 12px; letter-spacing: .08em; color: var(--doux); text-transform: uppercase; }
.donateur-page .choix ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #d6d6d6; }
.donateur-page .choix li { position: relative; padding-left: 22px; } .donateur-page .choix li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 1px; background: var(--texte); } /* (pas de flex : « ▶ » devient une icône, la ligne doit rester d'un seul tenant) */
.donateur-page .choix.don { border-color: rgba(255,255,255,.4); } .donateur-page .choix.don li::before { background: var(--texte); } .donateur-page .choix.don li b { color: var(--texte); } /* (13/10, PastiiJay : « le jaune, c'est la couleur du pair, pas du Donateur ») le Donateur en blanc */
.donateur-page .levier.multiplier .titre-pair, .donateur-page .levier.multiplier .choix-tete h4 .j { color: #ffd650; }
.donateur-page .levier.multiplier .choix li::before { background: #ffd650; } .donateur-page .levier.multiplier .choix li b { color: #ffd650; } /* (13/10) la carte « Pair : prête ton PC » : le jaune des pairs */
.donateur-page .ou { align-self: center; font-size: 18px; font-weight: 700; letter-spacing: .14em; color: #9b9b9b; transform-origin: center; animation: ou-choix 6s ease-in-out infinite; }
/* (12/10, PastiiJay, maquette « L'une OU l'autre », B, validée) toutes les 6 s : la case des pubs s'allume, puis le « OU » grossit, puis
la case Donateur s'allume ; puis on remonte. Rien ne bouge de place (seulement la lumière, la taille du OU, 2 px de soulèvement) */
.donateur-page .levier:has(> .ou) > .choix { animation: choix-1 6s ease-in-out infinite; } .donateur-page .levier:has(> .ou) > .choix.don { animation-name: choix-2; }
@keyframes choix-1 { 0%, 30%, 100% { box-shadow: none; transform: none; } 10%, 22% { box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(255,255,255,.18); transform: translateY(-2px); } }
@keyframes ou-choix { 0%, 28%, 50%, 100% { transform: scale(1); color: #9b9b9b; } 36%, 42% { transform: scale(1.5); color: #fff; } }
@keyframes choix-2 { 0%, 46%, 80%, 100% { box-shadow: none; transform: none; } 56%, 70% { box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(255,255,255,.18); transform: translateY(-2px); } }
/* (14/10 au soir, PastiiJay : « l'argument numéro un : le maximum gratuitement ») l'en-tête de Participer, et le lien de la Légende aux couleurs de l'aurore */
.donateur-page .gratuit-p h3 { margin: 6px 0 8px; font-size: 22px; } .donateur-page .gratuit-p .phrase-g { margin: 0 0 8px; font-size: 15px; line-height: 1.5; } .donateur-page .gratuit-p .regle { margin: 0; color: var(--doux); font-size: 13px; }
.etiquette-g { display: inline-block; padding: 4px 8px 2px; /* (15/10, loi du centrage : en majuscules, centré sur la majuscule, sans jambage) */ border-radius: 4px; background: #ffd650; color: #141414; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.legende-r.leg-l { margin-top: 2px; } .lien-legende { color: var(--doux); text-decoration: none; } .phrase-g .lien-legende { color: var(--texte); }
.pp-legende { background: var(--aurore); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurore 9s linear infinite; font-weight: 700; text-decoration: none; cursor: pointer; }
.legende-jauges .legende-e { display: block; text-align: right; margin-top: 2px; }
.donateur-page .meme { margin: 0; font-size: 13px; color: var(--doux); text-align: center; } .donateur-page .meme b { color: var(--texte); }
:is(.donateur-page, .promo-pair) .plusieurs { background: var(--carte); border: 1px solid #2e2e2e; border-radius: 4px; padding: 10px 12px; }
:is(.donateur-page, .promo-pair) .plusieurs .rangee { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; } :is(.donateur-page, .promo-pair) .plusieurs .rangee span { display: flex; align-items: center; gap: 3px; } :is(.donateur-page, .promo-pair) .plusieurs .rangee svg { width: 18px; height: 15px; }
:is(.donateur-page, .promo-pair) .plusieurs svg.graphe { display: block; width: 100%; height: auto; overflow: visible; margin-top: 4px; } :is(.donateur-page, .promo-pair) .plusieurs text { font-family: DINPro, DIN, sans-serif; font-size: 19px; font-weight: 600; }
:is(.donateur-page, .promo-pair) .plusieurs path.c { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dessine-pc 6s ease-in-out infinite; } :is(.donateur-page, .promo-pair) .plusieurs path.c2 { animation-delay: .6s; } :is(.donateur-page, .promo-pair) .plusieurs path.c3 { animation-delay: 1.2s; }
@keyframes dessine-pc { 0% { stroke-dashoffset: 1000; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* (13/10, PastiiJay : « sur téléphone, on n'y voit rien ») deux dessins : le large sur un écran d'ordinateur, l'étroit sur téléphone, écrits lisibles ; la rangée d'une seule ligne */
:is(.donateur-page, .promo-pair) .plusieurs svg.etroit { display: none; } :is(.donateur-page, .promo-pair) .plusieurs svg.etroit text { font-size: 13px; }
@media (max-width: 640px) { :is(.donateur-page, .promo-pair) .plusieurs svg.large { display: none; } :is(.donateur-page, .promo-pair) .plusieurs svg.etroit { display: block; } :is(.donateur-page, .promo-pair) .plusieurs .rangee { gap: 10px; flex-wrap: nowrap; font-size: 12px; } :is(.donateur-page, .promo-pair) .plusieurs .rangee span { gap: 2px; white-space: nowrap; } :is(.donateur-page, .promo-pair) .plusieurs .rangee svg { width: 14px; height: 12px; } }
/* (13/10, PastiiJay, maquette « La régularité en vitrine » v7, validée) pour qui ne partage pas encore, la carte « La régularité » est la vitrine
jaune de « Devenir pair » (le jaune = devenir pair, le même pour tous) ; les avantages : un petit carré jaune, la partie en gras en jaune, le reste en blanc */
.regul-prog.promo-pair { border-color: #ffd650 !important; background: rgba(255,214,80,.06); } .regul-prog.promo-pair > .titre-cadre { color: #ffd650; }
.promo-pair .bloc-promo { display: flex; flex-direction: column; gap: 12px; padding: 4px 22px 16px; }
.promo-pair .plusieurs .rangee span { color: #d6d6d6; }
.promo-pair .texte-promo { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--texte); } .promo-pair .texte-promo p { margin: 0; }
.promo-pair .texte-promo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.promo-pair .texte-promo li { position: relative; padding-left: 18px; } .promo-pair .texte-promo li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 1px; background: #ffd650; }
.promo-pair .texte-promo b { color: #ffd650; }
.regul-prog.promo-pair .bouton-pair { align-self: flex-end; flex: none; padding-top: 9px; padding-bottom: 7px; }
/* (15/10) LE FILLEUL, en haut de « Ta régularité » : son Donateur offert et ses 7 jours (jaune : la couleur des pairs) */
.filleul-b { border: 1px solid rgba(255,214,80,.5); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,214,80,.06); margin-bottom: 12px; } .filleul-b .haut { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; } .filleul-b .haut b { color: #ffd650; }
.filleul-b .cases-f { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .filleul-b .cases-f i { height: 8px; border-radius: 2px; background: var(--bord); } .filleul-b .cases-f i.ok { background: #ffd650; } .filleul-b p { margin: 0; font-size: 13.5px; color: var(--doux); line-height: 1.45; } .filleul-b p b { color: var(--texte); }
@media (max-width: 640px) { .promo-pair .bloc-promo { padding: 4px 14px 14px; } .regul-prog.promo-pair .bouton-pair { align-self: center; } }
@media (max-width: 820px) { .donateur-page .hero-p { grid-template-columns: 1fr; justify-items: center; } .donateur-page .hero-p > div:last-child { width: 100%; } .donateur-page .leviers { grid-template-columns: 1fr; } }
/* (09/10, PastiiJay, maquettes potentiel / recharge / jours) LA JAUGE EN SVG : l'anneau dessiné par compte.js svgJauge */
.anneau.compteur.svg { background: none !important; }
.anneau.svg svg.sj { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.anneau.svg .anneau-val, .anneau.svg .anneau-mult { z-index: 1; }
/* la légende des jauges, sous les vignettes */
.legende-jauges { max-width: 740px; margin: 14px auto 18px; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); overflow: hidden; }
/* (11/10 au soir, maquette « Couleurs dynamiques », validée) son titre, « Ta progression », dans un bandeau à la couleur de la jauge totale */
.legende-jauges .tete-prog { text-align: center; font-size: 15px; font-weight: 700; padding: 7px 8px; transition: background .5s, color .5s; }
.legende-jauges .corps-prog { padding: 12px 16px; }
/* (11/10 au soir, maquette « Légende en entonnoir » v7) pourcentage × multiplicateur côte à côte (même sur téléphone), « = », ta jauge */
.legende-jauges .entonnoir-haut { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.legende-jauges .carte-e { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid #2e2e2e; border-radius: 4px; padding: 10px; background: var(--carte); }
.legende-jauges .carte-e .t { color: var(--doux); font-size: 13px; }
.legende-jauges .valeur { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .legende-jauges .valeur b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; } .legende-jauges .valeur span { font-size: 14px; }
.legende-jauges .barre-e { position: relative; height: 10px; border-radius: 2px; background: #2a2a2a; overflow: hidden; } .legende-jauges .barre-e i { position: absolute; top: 0; bottom: 0; }
.legende-jauges .pointille { -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px); opacity: .75; }
.legende-jauges .regle-e { position: relative; height: 22px; margin: 6px 8px 0; } .legende-jauges .regle-e .rail { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: #4a4a4a; }
.legende-jauges .regle-e .rail-plein { position: absolute; top: 9px; height: 4px; border-radius: 2px; } .legende-jauges .regle-e .cran { position: absolute; top: 6px; width: 2px; height: 10px; background: #5a5a5a; transform: translateX(-1px); }
.legende-jauges .regle-e .curseur { position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-8px); border: 3px solid #121212; }
.legende-jauges .regle-e .bornes { position: absolute; left: -8px; right: -8px; top: -12px; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--doux); }
.legende-jauges .acquis { display: flex; flex-direction: column; color: var(--texte); font-size: 13px; line-height: 1.4; } .legende-jauges .acquis em { color: var(--texte); font-style: normal; font-weight: 700; }
.legende-jauges .etat { color: var(--texte); font-size: 12.5px; line-height: 1.35; }
.legende-jauges .egal { text-align: center; font-size: 26px; font-weight: 700; color: var(--doux); line-height: 1; margin: 6px 0; }
.legende-jauges .detail { font-size: 13px; color: var(--doux); }
.legende-jauges .op { align-self: center; font-size: 22px; font-weight: 700; color: var(--doux); }
.legende-jauges .booster { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; text-align: center; color: var(--doux); }
.legende-jauges .booster b { color: #ffd650; } .legende-jauges .bouton-pair { align-self: center; }
@media (max-width: 700px) { .legende-jauges { margin: 8px 0 12px; } .legende-jauges .corps-prog { padding: 10px; } }
@media (max-width: 420px) { .legende-jauges .valeur b { font-size: 22px; } .legende-jauges .carte-e { padding: 8px; } .legende-jauges .acquis, .legende-jauges .etat { font-size: 12px; } }
#boutonCompte.actif, .theme-bloc:has(#menuTheme:not([hidden])) > button, #boutonFormule.menu-source, .entete-gauche > button:active, .entete-gauche > a:active, .entete-bout > button:active, .theme-bloc > button:active { background: #fff; color: #161616; border-color: #fff; } /* (13/10, PastiiJay) un bouton du haut ouvert (Mon compte, la palette, la fiole) ou qu'on clique : rempli */
/* (09/10) Participer : la petite légende des jauges d'exemple (les mêmes qu'Utilisation) */
/* (09/10) l'icône « écouter » dans la bulle grise de l'IA : claire */
/* (09/10) pas encore de pub : le bouton cliqué le dit (couleur d'alerte et petit tremblement) */
button.pas-de-pub { background: #3a2a12 !important; color: #f5b041 !important; border: 1px solid #f5b041 !important; animation: tremble .4s ease-in-out; }
@keyframes tremble { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* (10/10, PastiiJay : « le bonus de recharge est mal fait ») sur téléphone, « Recharger ma semaine » passe sur deux lignes : le bouton grandit avec son texte (avant : 44 px fixes, le texte débordait du cadre) */
#tokensDetail .tuile-corps button#rechargeHebdo { height: auto; min-height: 44px; line-height: 1.25; white-space: normal; }
/* (09/10, PastiiJay) les outils de test masqués (case de Mon compte) : une vraie séance de test */
body.sans-outils-test .bouton-baguette, body.sans-outils-test .reinit-essai, body.sans-outils-test .chiffres-essai { display: none !important; }
.outils-test { margin: 18px 0 6px; padding: 8px 12px; border: 1px dashed #b88cff; border-radius: 4px; display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.outils-test .case-outils { display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: #c9a8ff; cursor: pointer; margin: 0; font-size: 14px; }
.outils-test .case-outils input { width: 16px; height: 16px; flex: none; margin: 0; padding: 0; accent-color: #b88cff; }
.outils-test small { font-size: 12px; }
/* (09/10) Mon compte : e-mail et pseudo sur la même ligne (PC) */
.compte-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .compte-deux > div { min-width: 0; }
@media (max-width: 720px) { .compte-deux { grid-template-columns: 1fr; gap: 0; } }
/* (10/10, PastiiJay, maquettes propositions-1010 n° 7 et partager-cockpit) ONGLET PARTAGER : le cockpit des PC (gris, liseré de la marque), puis la présentation */
#pPair { display: flex; flex-direction: column; gap: 16px; } #pPair[hidden] { display: none; }
.cockpit { position: relative; border: 1px solid #333; border-radius: 4px; padding: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px), #171717; }
.cockpit[hidden] { display: none; }
.cockpit-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; position: relative; z-index: 1; }
.cockpit h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.etat-reseau { font-size: 12px; letter-spacing: .08em; color: #e6e6e6; display: flex; align-items: center; gap: 8px; }
.cockpit .led { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; animation: pouls-led 1.8s infinite; }
.cockpit .led.veille { background: #ffd650; animation: none; box-shadow: 0 0 8px rgba(255,214,80,.5); }
.cockpit .led.off { background: #555; animation: none; }
@keyframes pouls-led { 0% { box-shadow: 0 0 0 0 rgba(118,185,0,.55); } 70% { box-shadow: 0 0 0 9px rgba(118,185,0,0); } 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0); } }
.cockpit .radar { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); pointer-events: none; }
.cockpit .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.10), transparent 25%); animation: tourne-radar 6s linear infinite; }
@keyframes tourne-radar { to { transform: rotate(360deg); } }
.cockpit .machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; position: relative; z-index: 1; }
.cockpit .machine { background: rgba(26,26,26,.9); border: 1px solid #333; border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0; }
.cockpit .machine::before { content: ""; position: absolute; inset: -1px; border-radius: 4px; padding: 1px; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45), transparent 70%); background-size: 250% 100%; animation: balaye-pc 4s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cockpit .machine.veille::before, .cockpit .machine.hors::before, .cockpit .machine.nouveau::before { animation: none; background: none; }
@keyframes balaye-pc { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.cockpit .machine .ligne1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cockpit .machine .nom { font-weight: 700; font-size: 17px; letter-spacing: .04em; overflow-wrap: anywhere; }
.cockpit .statut { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
/* (11/10 au soir, maquette « Mes PC » v2) les tokens de chaque PC depuis toujours, à côté de son état ; le bilan du compte au-dessus des PC */
.cockpit .statut .tok { font-weight: 300; color: #d6d6d6; font-size: 13px; font-variant-numeric: tabular-nums; }
.cockpit .statut .tok b { font-weight: 700; color: var(--texte); }
/* (12/10, maquette « Le tableau de bord ») une seule bande : générés · ratio · consommés */
.bilan-pc { display: flex; align-items: center; margin: -4px 0 14px; position: relative; z-index: 1; border: 1px solid #2e2e2e; border-radius: 4px; background: rgba(10,10,10,.55); padding: 10px 4px; }
.bilan-pc:empty { display: none; }
.bilan-pc > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bilan-pc > i { width: 1px; align-self: stretch; background: #2e2e2e; }
.bilan-pc b { font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bilan-pc small { font-size: 11px; color: var(--texte); letter-spacing: .04em; }
.bilan-pc .g b { color: #76b900; } /* (13/10, PastiiJay) seulement les tokens générés, au vert NVIDIA */
@media (max-width: 420px) { .bilan-pc b { font-size: 18px; } .bilan-pc small { font-size: 10px; } }
.cockpit .onde { height: 30px; width: 100%; }
.cockpit .onde path { fill: none; stroke: #e6e6e6; stroke-width: 1.6; opacity: .85; }
.cockpit .machine.veille .onde path, .cockpit .machine.banc .onde path, .cockpit .machine.nouveau .onde path { stroke: #ffd650; opacity: .5; }
.cockpit .machine.hors .onde path { stroke: #555; }
.cockpit .puces { display: flex; flex-wrap: wrap; gap: 6px; }
.cockpit .puce { font-size: 12px; border-radius: 4px; padding: 2px 10px; border: 1.5px solid #555; background: #1a1a1a; }
.cockpit .puce.amd { border-color: #ed1c24; } .cockpit .puce.nvidia { border-color: #76b900; } .cockpit .puce.intel { border-color: #0071c5; }
.cockpit .puce.eteinte { opacity: .45; }
/* (13/10, PastiiJay) les étiquettes écrites TOUT EN MAJUSCULES se centrent sur la majuscule (la police est centrée sur la moyenne :
le texte descend d'un demi-point) */
.cockpit .puce, .compte-badge { padding-top: 2.5px; padding-bottom: 1.5px; }
.cockpit .machine-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* (14/10 au soir, PastiiJay, maquette « Détecteur de GPU ») un PC qui ne peut pas calculer : le cadre orange et l'alerte sur sa vignette */
.cockpit .machine.sans-calcul { border-color: rgba(255,132,36,.6); }
.alerte-calcul { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 4px; background: rgba(255,132,36,.08); border: 1px solid rgba(255,132,36,.35); font-size: 12.5px; line-height: 1.45; color: #e6e6e6; } .alerte-calcul svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #ff8424; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; } .alerte-calcul b { color: #ff8424; }
/* le détecteur, sous « Configuration minimale » : vert compatible, orange un doute, gris inconnu */
.detecteur-gpu { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 4px; font-size: 13px; line-height: 1.45; color: var(--doux); } .detecteur-gpu b { color: var(--texte); }
.detecteur-gpu .led { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #76b900; } .detecteur-gpu.doute .led { background: #ff8424; } .detecteur-gpu.inconnu .led { background: #666; } .detecteur-gpu.doute { border-color: rgba(255,132,36,.45); }
.cockpit .machine-actions .retirer { margin-left: 0; margin-top: 0; }
.cockpit .petit-verifier { margin-top: 0; padding-top: 3px; padding-bottom: 1px; } /* (17/10, loi du centrage mesurée : le texte 0,8 px trop haut) */
/* (17/10, PastiiJay, maquette « Choisir le PC de stockage » validée) LE BAS DE LA VIGNETTE, coupé en deux par un trait : à gauche le stockage,
à droite Vérifier puis Délier (même largeur), Délier toujours au coin en bas à droite ; toutes les vignettes à la même hauteur */
.cockpit .machine .bas-v { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) 1px auto; gap: 12px; padding-top: 10px; border-top: 1px solid #333; }
.cockpit .machine .stock-v { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #9b9b9b; min-width: 0; }
.cockpit .machine .stock-v button { padding: 3px 10px 1px; font-size: 12px; border-radius: 4px; margin: 0; }
.cockpit .machine .stock-v button[disabled] { opacity: .45; cursor: not-allowed; }
.cockpit .machine .trait-v { background: #333; }
.cockpit .machine .machine-actions { display: grid; grid-template-columns: 72px; align-content: end; gap: 6px; }
.cockpit .machine .machine-actions button { width: 100%; }
.cockpit .machine .verif-reponse:empty { display: none; }
/* « PC de stockage » : vert, sans cadre (le trait suffit) ; le voyant posé sur la ligne de base, haut comme la majuscule (loi du centrage) */
.cockpit .machine .tag-stock { display: inline-flex; align-items: baseline; gap: 7px; color: #76b900; font-weight: 700; font-size: 12px; }
.cockpit .machine .tag-stock i { width: 9px; height: 9px; border-radius: 50%; background: #76b900; box-shadow: 0 0 6px #76b900; }
/* le nom donné au PC, son nom de code en petit, et le crayon (sur la majuscule, mesuré) */
.cockpit .machine .nom-bloc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } /* (22/10 : avec « Ce PC », à 360 px) */
.cockpit .machine .code-pc { font-size: 11px; color: #777; letter-spacing: .04em; }
/* (22/10, maquette « Ce PC » validée par le conseil des 5) ce navigateur est ce PC : l'étiquette suit la couleur du texte de la carte (tous les skins), cadre à moitié, aucune couleur réservée */
.cockpit .machine .ce-pc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: inherit; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 4px; padding: 2px 8px; line-height: 16px; white-space: nowrap; } /* (pas d’animation : le tableau de bord se redessine souvent, elle clignoterait) */
.cockpit .machine .ce-pc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-nouveau small .nom-pc { color: var(--texte); white-space: nowrap; }
.cockpit .machine .crayon { position: relative; top: -1px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; border-radius: 4px; border: 1px solid transparent; background: none; color: #9b9b9b; cursor: pointer; }
.cockpit .machine .crayon:hover { border-color: #444; color: #f2f2f2; } .cockpit .machine .crayon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cockpit .machine .nom-champ { font: inherit; font-weight: 700; font-size: 15px; width: 12em; max-width: 100%; padding: 2px 6px; border-radius: 4px; border: 1px solid #9b9b9b; background: #111; color: #f2f2f2; }
.cockpit .machine .statut .led { position: relative; top: -1px; } .cockpit .etat-reseau .led { position: relative; top: -2px; } /* (17/10, loi du centrage mesurée) */
/* les fenêtres calmes (Délier, Désactiver, Stocker ici) : deux boutons de même taille, à 36 */
.dlg-calme .actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.dlg-calme .actions button { height: 36px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; } .dlg-calme .actions button:not(.principal) { padding-top: 2px; }
.dlg-calme .champ-mdp { width: 100%; box-sizing: border-box; margin: 4px 0 2px; }
#relierIci .lie-bloc { border-top: 0; margin-top: 14px; position: relative; z-index: 1; }
.pair-heros { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.pair-heros h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.1; font-weight: 700; text-wrap: balance; }
.pair-heros h2 em { font-style: normal; color: #ffd650; }
.pair-heros .lie-bloc { border-top: 0; }
.pair-jauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pair-jauge .anneau-site { position: relative; width: 210px; height: 210px; max-width: 100%; }
.pair-jauge .anneau-site svg.sj { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pair-jauge .val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 38px; font-variant-numeric: tabular-nums; }
.pair-jauge .val small { font-size: .45em; margin-left: 2px; }
.pair-jauge .mult { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-family: DINPro, DIN, sans-serif; font-weight: 900; font-size: 21px; }
.pair-jauge .mot { font-weight: 700; text-align: center; }
.pair-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
.pair-trois > div { background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 12px; }
.pair-trois b { display: block; margin-bottom: 4px; }
.pair-trois .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #141414; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 6px; }
/* (12/10, PastiiJay) une seule ligne, sans cases, dessins en blanc ; repli en colonne seulement sur téléphone */
.pair-rassure { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.pair-rassure span { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; color: #d0d0d0; } .pair-rassure .ico-t { flex: none; margin-top: 2px; }
@media (max-width: 700px) { .pair-rassure { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .pair-heros { grid-template-columns: 1fr; } .pair-trois { grid-template-columns: 1fr; } .pair-heros h2 { font-size: 24px; } }
/* (10/10, PastiiJay : « ça me casse la bulle ») le bandeau des testeurs, en haut de la discussion, collé en haut quand on défile */
/* (10/10, PastiiJay) le bouton « revenir en bas » : un rond avec une flèche, quand on a remonté la conversation */
.vers-le-bas { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--saisie-h, 120px) + 26px); /* (PastiiJay : au centre, au-dessus de la zone d’écriture ; 11/10 : « un peu trop collée en bas, la relever légèrement ») */ z-index: 30; width: 44px; height: 44px; border-radius: 4px; border: 1px solid #4a4a4a; /* (11/10 au soir, PastiiJay : le gris Pairping du bouton « Envoyer », plus le blanc) */ background: var(--carte); color: var(--texte); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer; padding: 0; }
.vers-le-bas[hidden] { display: none; } .vers-le-bas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body:has(#bulleUtil:not([hidden])) .vers-le-bas { z-index: 4; } /* (18/10, PastiiJay : « la fenêtre doit être au-dessus de la flèche ») la bulle de la pile est dans la zone d’écriture (z-index 5 sur téléphone) : la flèche passe dessous tant qu’elle est ouverte */
/* (10/10, PastiiJay) sur téléphone, l’ascenseur de la page traversait la zone d’écriture : caché (on défile au doigt ; la flèche ↓ ramène en bas) */
@media (max-width:720px) { html, body { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } }
/* (10/10, PastiiJay) l’ascenseur visuel du téléphone : seulement le long des bulles (de sous la barre ☰ à au-dessus de la zone d’écriture) */
.ascenseur { position: fixed; right: 3px; top: calc(var(--haut-chat, 140px) + 6px); bottom: calc(var(--saisie-h, 120px) + 6px); width: 4px; z-index: 27; pointer-events: none; }
.ascenseur[hidden] { display: none; } .ascenseur i { display: block; width: 100%; border-radius: 3px; background: rgba(255,255,255,.35); }
/* (10/10, PastiiJay : « on sent un flash ») page rechargée sur un autre onglet que le Chatbot : la discussion ne s’affiche pas une fraction de seconde avant lui */
html[data-onglet-depart] #pDiscuter { display: none !important; }
/* (11/10, PastiiJay, maquette « Mon compte refait » validée) TOUT SE VOIT D'UN COUP : la carte d'identité, puis un cadre ouvert par sujet ;
« Signaler » en large, les outils de test en violet, « Mes données » en rouge (la zone de danger). */
.compte-v2 { display: flex; flex-direction: column; gap: 16px; }
.compte-identite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; background: linear-gradient(135deg, #262626, #1d1d1d); border: 1px solid var(--bord); border-radius: 4px; padding: 18px; }
.compte-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #141414; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; }
.compte-qui { min-width: 0; } .compte-qui h2 { margin: 0; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; } .compte-qui .msg { overflow-wrap: anywhere; }
.compte-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.compte-badge { font-size: 12px; border: 1px solid var(--bord); border-radius: 4px; padding: 2px 10px; color: var(--doux); } .compte-badge b { color: var(--texte); }
.compte-sommaire { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.compte-sommaire a { font-size: 13px; color: var(--texte); text-decoration: none; border: 1px solid var(--bord); border-radius: 4px; padding: 4px 10px; background: var(--panneau); }
.compte-sommaire a:hover { border-color: var(--accent); }
/* (11/10, PastiiJay : « des espaces de fou entre les cases » ; maquette « Mon compte : mises en page », choix 1) UNE COLONNE DE CADRES
LARGES : aucun trou possible, pour personne ; chaque cadre range son contenu en largeur (sur téléphone, il s'empile). */
.compte-grille { display: flex; flex-direction: column; gap: 16px; }
.compte-rang { display: grid; gap: 0 18px; } .compte-rang.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compte-rang.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compte-ligne { display: flex; gap: 8px; } .compte-ligne input { flex: 1; min-width: 0; }
.boost-u { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--c-reserve) 55%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--c-reserve) 8%, transparent); font-size: 14px; color: var(--doux); }
.boost-u svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--c-reserve); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.boost-u .barre-b { margin-left: auto; flex: none; width: 96px; height: 6px; border-radius: 2px; background: var(--bord); overflow: hidden; } .boost-u .barre-b i { display: block; height: 100%; background: var(--c-reserve); } /* (15/10, PastiiJay) le temps qui reste du boost */
.boost-u > span:not(.barre-b) { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) { .boost-u { flex-wrap: wrap; } .boost-u .barre-b { width: calc(100% - 34px); margin-left: 34px; } }
.boost-u b { color: var(--texte); } .boost-u b.pp { color: var(--c-reserve); }
.compte-lies > .lie-ligne { border-top: 0; align-items: flex-start; } .compte-lies > .lie-bloc { border-top: 0; border-left: 1px solid var(--bord); padding-left: 18px; }
.compte-danger > .compte-bloc { border-top: 0; padding-top: 0; } .compte-danger > .compte-bloc + .compte-bloc { border-left: 1px solid #3a2a2a; padding-left: 18px; }
@media (max-width: 720px) { .compte-rang.deux, .compte-rang.trois { grid-template-columns: 1fr; } .compte-lies > .lie-bloc { border-left: 0; padding-left: 0; border-top: 1px solid var(--bord); }
.compte-danger > .compte-bloc + .compte-bloc { border-left: 0; padding-left: 0; border-top: 1px solid #3a2a2a; padding-top: 10px; } }
.compte-cadre { display: flex; flex-direction: column; gap: 4px; min-width: 0; scroll-margin-top: 12px; }
.compte-cadre h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 16px; }
.compte-cadre h3 svg { width: 18px; height: 18px; fill: none; stroke: var(--doux); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.compte-cadre.outils-test { max-width: none; margin: 0; padding: 18px; border: 1px dashed #b88cff; } .compte-cadre.outils-test h3 svg { stroke: #b88cff; }
.compte-cadre.sensible { border-color: #5a2a2a; background: linear-gradient(180deg, #241c1c, var(--carte)); } .compte-cadre.sensible h3 svg { stroke: var(--ko); }
.compte-bloc { padding: 10px 0; border-top: 1px solid #3a2a2a; } .compte-bloc:first-of-type { border-top: 0; padding-top: 0; }
.micro-dictee { display: inline-flex; align-items: center; gap: 6px; } .micro-dictee .ico-micro { width: 18px; height: 18px; }
.micro-dictee.rouge { background: var(--accent); border-color: var(--accent); color: #1a1918; } /* (le même micro que le chat, même quand il écoute) */
.carte-jours .bloc-pcs .ecran.rouge rect, .carte-jours .bloc-pcs .ecran.rouge path { stroke: #ed1c24; }
/* (12/10, maquette « La pile du forfait », A2, validée) LA PILE DU CHAT : en bas à droite de la zone d'écriture ; le blanc se vide ; à 20 %
et moins, il clignote avec le curseur d'Envoyer (html.cl-off) ; vide = pile grise ; sa bulle s'ouvre au-dessus. (« batterie » et « faible » :
« pile » et « bas » sont déjà pris par d'autres styles du site) */
.jauge-chat { position: absolute; right: 10px; bottom: 8px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.jauge-chat svg { width: 32px; height: 32px; flex: none; } /* (18/10, PastiiJay : « la même hauteur en taille que le trombone ») dessin de la pile (corps + trait) = 15,07, celui du trombone = 15,06 ; même centre */
.batterie .corps { fill: none; stroke: #fff; stroke-width: 1.3; /* (18/10, PastiiJay) même trait que le micro et le téléphone (~1,75 px à l'écran : le dessin est affiché à 32) */ transition: stroke .3s; } .batterie .borne { fill: #fff; transition: fill .3s; }
.batterie .plein { fill: #fff; transition: width .4s; } /* (13/10, PastiiJay : contour ET intérieur toujours blancs, noirs en Clair, quel que soit le skin ; « orange à l'intérieur, on dirait un problème ») */
.batterie.vide .corps { stroke: #5a5a5a; } .batterie.vide .borne { fill: #5a5a5a; }
.cl-off .batterie.faible .plein { opacity: 0; }
.bulle-util { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); background: #262626; border: 1px solid #4a4a4a; border-radius: 4px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; z-index: 20; }
.bulle-util[hidden] { display: none; }
.bulle-util h4 { margin: 0; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.bulle-util h4 small { font-weight: 300; color: var(--doux); font-size: 12px; }
.ligne-util { display: flex; flex-direction: column; gap: 4px; }
.ligne-util .tete-l { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ligne-util .tete-l small { color: var(--doux); }
.jauge-l { height: 8px; border-radius: 2px; background: #333; overflow: hidden; container-type: inline-size; }
.jauge-l i { display: block; height: 100%; border-radius: 2px; background-color: #fff; background-size: 100cqw 100%; background-repeat: no-repeat; } /* (le dégradé de toute la jauge : chaque endroit à sa vraie couleur) */
.bulle-util .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulle-util .actions button { flex: 1 1 150px; padding: 7px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; } /* (14/10 au soir, PastiiJay) jamais sur deux lignes : côte à côte s'ils tiennent, sinon Recharger au-dessus, toujours de la même taille */ /* (12/10 au soir, PastiiJay) les deux boutons de la même taille ; Recharger à la couleur du skin, comme ceux des jauges */
.bulle-util .actions button.jaune { background: #ffd650; color: #141414; border-color: #ffd650; font-weight: 700; }
.bulle-util .note-util { margin: 0; color: var(--doux); font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; } /* (18/10, la pile simplifiée) la phrase du pair : centrée, son gras d'un bloc */
.bulle-util .note-util b { color: var(--texte); font-weight: 600; white-space: nowrap; }
/* (12/10, PastiiJay, maquette « Bonus et progression » A, validée) UNE SEULE CARTE : le calcul (« Ta progression ») puis « Ta régularité »
(le Bonus) ; un seul « Devenir pair » en bas ; le multiplicateur n'est écrit qu'une fois (dans le calcul) */
.carte-jours.fusion { cursor: default; }
.fusion .legende-jauges { border: 0; margin: 0; background: none; max-width: none; border-radius: 0; transition: none; }
@media (hover: hover) and (pointer: fine) { .fusion .legende-jauges:hover { transform: none; box-shadow: none; } }
.fusion .corps-prog { padding: 16px 18px 6px; }
.fusion .regul .courbe-tete .mult { display: none; }
.fusion .ligne-calcul { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .fusion .ligne-calcul .etat { text-align: right; margin-left: auto; }
.appel-pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 18px 16px; padding: 12px 14px; border: 1px solid rgba(255,214,80,.4); border-radius: 4px; background: rgba(255,214,80,.06); font-size: 14px; }
.appel-pair b { color: #ffd650; }
/* la butée verte (compte.js butee) : posée sur la barre, le trait la dépasse de 3 de chaque côté */
.legende-jauges .barre-e { overflow: visible; } .legende-jauges .barre-e i { border-radius: 2px; }
.butee { position: absolute; top: 0; transform: translateX(-9px); overflow: visible; pointer-events: none; z-index: 2; }
/* la case « Mon tableau de bord » (compte.js caseTableauDeBord) */
.carte-jours .courbe .lignes .case-tdb { display: block; position: relative; overflow: hidden; margin: 6px 0; padding: 12px 14px; border: 1px solid #333; border-radius: 4px; cursor: pointer; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), #171717; transition: border-color .2s; }
.carte-jours .courbe .lignes .case-tdb.rouge { border-color: rgba(237,28,36,.45); }
@media (hover: hover) and (pointer: fine) { .carte-jours .courbe .lignes .case-tdb:hover { border-color: #6a6a6a; } }
.case-tdb div { display: block; border-bottom: 0; padding: 0; } /* (le vieux style « .lignes div » ne s'applique pas ici) */
.case-tdb .radar-tdb { position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.case-tdb .radar-tdb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.08), transparent 25%); animation: radar-tdb 6s linear infinite; }
@keyframes radar-tdb { to { transform: rotate(360deg); } }
.case-tdb .haut-tdb { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-tdb .titre-tdb { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--texte); }
.case-tdb .voyant-tdb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #e6e6e6; }
.case-tdb .led-tdb { width: 8px; height: 8px; border-radius: 50%; background: #76b900; animation: led-tdb 1.8s infinite; }
@keyframes led-tdb { 0% { box-shadow: 0 0 0 0 rgba(118,185,0,.55); } 70% { box-shadow: 0 0 0 8px rgba(118,185,0,0); } 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0); } }
.case-tdb.rouge .led-tdb { background: #ed1c24; animation-name: led-rouge; } @keyframes led-rouge { 0% { box-shadow: 0 0 0 0 rgba(237,28,36,.6); } 70% { box-shadow: 0 0 0 8px rgba(237,28,36,0); } 100% { box-shadow: 0 0 0 0 rgba(237,28,36,0); } }
.case-tdb .corps-tdb { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.case-tdb .pcs-tdb { display: flex; gap: 4px; flex: none; } .case-tdb .pcs-tdb i { width: 24px; height: 24px; display: inline-flex; }
.case-tdb .pcs-tdb svg { width: 24px; height: 24px; fill: none; stroke: #5a5a5a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.case-tdb .pcs-tdb i.allume svg { stroke: #ffd650; } .case-tdb.rouge .pcs-tdb svg { stroke: #ed1c24; }
.case-tdb .dit-tdb { font-size: 13px; color: #cfcfcf; line-height: 1.4; min-width: 0; }
/* (12/10, maquette validée) le menu Effort : « Approfondi » grisé, le petit cadenas en haut à droite du mot (13/10, PastiiJay : « juste grisé, discret », de la couleur du mot comme le haut-parleur), l'étiquette DONATEUR après « Le plus fort » */
.effort-menu button[data-effort="L"] b { flex-wrap: nowrap; }
.effort-menu button[data-effort="L"].ferme { opacity: 1; } .effort-menu button.ferme b, .effort-menu button.ferme small { color: rgba(242,242,242,.45); }
.effort-menu sup.cad { display: none; align-self: flex-start; margin: -4px 0 0 1px; color: rgba(242,242,242,.45); } .effort-menu button.ferme sup.cad { display: inline-flex; }
.effort-menu sup.cad .effort-cadenas { display: inline; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.effort-menu small .tag-donateur { margin-left: 4px; vertical-align: 1px; }
/* (12/10, PastiiJay, maquette « Le calcul du Bonus », F3 + tokens B, validée) LE CALCUL : un cadre vert (l'acquis) coupé par « TA PROGRESSION ·
EN DIRECT » et son voyant ; une phrase qui dit qu'on parle de TOKENS ; chaque case bordée de la couleur RÉELLE de son chiffre (compte.js,
échelles dynamiques), le × et le = blancs, le = centré sur son trait ; sous le total, les tokens (affichés) en gros */
.fusion .corps-prog { position: relative; margin: 14px 12px 12px; padding: 18px 12px 12px; border: 2px solid var(--skin); border-radius: 4px; }
.direct-cadre { position: absolute; top: -10px; left: 16px; padding: 0 8px; background: var(--carte); font-size: 12px; line-height: 18px; letter-spacing: .08em; font-weight: 700; color: #e6e6e6; text-transform: uppercase; }
.led-direct { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #76b900; margin-right: 8px; vertical-align: 1px; animation: led-direct 1.8s infinite; }
@keyframes led-direct { 0% { box-shadow: 0 0 0 0 rgba(118,185,0,.55); } 70% { box-shadow: 0 0 0 6px rgba(118,185,0,0); } 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0); } }
.fusion .de-quoi { margin: 0 0 12px; font-size: 13px; color: #cfcfcf; }
.fusion .entonnoir-haut { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 4px; }
.fusion .carte-e { background: #262626; } .fusion .carte-e .t { color: #e6e6e6; }
/* (14/10 au soir, PastiiJay : « 300 % sur 300 %… il ne faudrait pas que ce soit à la ligne ») le chiffre et son maximum toujours sur UNE ligne, comme « ×2,16 / ×3 » en face ; plus petits sur un téléphone étroit */
.fusion .entonnoir-haut .valeur { flex-wrap: nowrap; white-space: nowrap; } @media (max-width: 380px) { .fusion .entonnoir-haut .valeur b { font-size: 19px; } .fusion .entonnoir-haut .valeur span { font-size: 12px; } }
/* (14/10 au soir, PastiiJay : « le ×1,79 n'est pas en face du 140 % ») les deux cartes du haut partagent leurs rangées : un titre sur deux lignes
(« Ton pourcentage de base » sur téléphone) pousse aussi l'autre carte, chaque chiffre reste en face de l'autre */
.fusion .entonnoir-haut { grid-template-rows: repeat(5, auto); row-gap: 6px; } .fusion .entonnoir-haut > .carte-e { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; align-content: start; } .fusion .entonnoir-haut > .op { grid-row: 1 / span 5; align-self: center; }
.fusion .op { font-size: 44px; line-height: 1; color: #fff; text-align: center; }
.fusion .egal { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.fusion .egal::before, .fusion .egal::after { content: ""; flex: 1; height: 2px; background: #bdbdbd; }
.fusion .signe-egal { display: block; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.fusion .egal + .carte-e { border-width: 2px; }
.tok-b { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid #3a3a3a; font-variant-numeric: tabular-nums; }
.tok-b div { display: flex; align-items: baseline; gap: 8px; } .tok-b b { font-size: 28px; color: #fff; } .tok-b span { font-size: 13px; color: #cfcfcf; }
.tok-b small { flex-basis: 100%; font-size: 12px; color: var(--doux); }
@media (max-width: 420px) { .fusion .corps-prog { margin: 14px 8px 8px; padding: 18px 8px 8px; } .fusion .entonnoir-haut { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); } .fusion .op { font-size: 32px; } .tok-b b { font-size: 24px; } }
/* (12/10, maquette « C’est quoi un token ? », 3, validée) le jeton qui brille sous la phrase des tokens, et son explication (compte.js QUOI_TOKEN) */
.quoi-token { position: relative; display: inline-block; margin: -4px 0 12px; }
.brille-t { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #555; border-radius: 4px; background: #262626; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.brille-t::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: reflet-t 4s ease-in-out infinite; pointer-events: none; }
@keyframes reflet-t { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@media (hover: hover) and (pointer: fine) { .brille-t:hover { border-color: #8a8a8a; } }
.bulle-token p { margin: 8px 0; } .bulle-token b { color: #fff; }
.bulle-token .tete-t { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.bulle-token .fermer-t { margin-left: auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: #bdbdbd; font-size: 20px; cursor: pointer; }
.bulle-token .analogie { padding: 10px 12px; border-left: 2px solid #76b900; background: rgba(118,185,0,.06); border-radius: 0 4px 4px 0; }
/* (12/10, maquette « Les repères », C, validée) les chiffres sous la barre de la bulle de la pile, et la ligne qui les explique */
.reperes-r.chiffres { height: 18px; } .reperes-r.chiffres span { line-height: 18px; }
.legende-r { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--doux); } .legende-r span { white-space: nowrap; }
.legende-r.lignes-r { display: flex; flex-direction: column; gap: 2px; } /* (14/10 au soir, PastiiJay : « 900 PP à la ligne ») un niveau par ligne, la Légende dessous */
/* (12/10, maquette « Anciennes machines », validée) les tokens sous l'état, à droite ; les anciens PC (hors ligne ou retirés), en pointillés */
.cockpit .tok-ligne { text-align: right; margin-top: -8px; font-size: 13px; font-weight: 300; color: #d6d6d6; font-variant-numeric: tabular-nums; } .cockpit .tok-ligne b { font-weight: 700; color: var(--texte); }
.cockpit .anciens-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px; position: relative; z-index: 1; }
.cockpit .anciens-tete h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.cockpit .anciens-aide { margin: 0 0 12px; color: var(--doux); font-size: 13px; position: relative; z-index: 1; }
.cockpit .machine.ancienne { background: rgba(20,20,20,.9); border-style: dashed; border-color: #3a3a3a; }
.cockpit .machine.ancienne::before { display: none; }
.cockpit .machine.ancienne .nom { color: #cfcfcf; } .cockpit .machine.ancienne .led { background: #6a6a6a; animation: none; box-shadow: none; }
.cockpit .machine.ancienne .statut { color: #bdbdbd; font-weight: 400; } .cockpit .machine.ancienne .puce { opacity: .6; }
.cockpit .quand { font-size: 12px; color: var(--doux); }
.fond-dlg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.dlg { background: #1b1b1b; border: 1px solid #444; border-radius: 4px; padding: 18px; max-width: 420px; width: 100%; box-sizing: border-box; }
.dlg h4 { margin: 0 0 8px; font-size: 17px; } .dlg p { margin: 0 0 8px; color: #cfcfcf; font-size: 14px; }
.dlg .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .dlg .supprimer { border-color: #ed1c24; color: #ff8a80; }
/* (12/10, PastiiJay) le bouton Envoyer, zone VIDE : le fond des boutons micro et vocal (plus foncé), pas de barre qui clignote ; dès qu'on
écrit : le fond un peu plus clair, la barre qui clignote (avec la pile) et ENVOYER qui s'allume */
.chat-boutons button.envoyer { transition: background-color .25s, border-color .25s; }
.chat-boutons button.envoyer.vide { background: var(--panneau); border-color: var(--bord); --bord-btn: var(--bord); }
.envoyer.vide .invite .curseur { visibility: hidden; }
/* (12/10, PastiiJay : sur téléphone, la pile chevauchait « Auto ») quand la zone d'écriture est étroite, un nom d'effort long s'abrège
(« Approfo… ») ; très étroite, le mot « Effort » s'efface aussi : la pile garde toujours sa place */
.zone-texte { container-type: inline-size; }
@container (max-width: 214px) { #effortNom { display: inline-block; max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }
/* (18/10, PastiiJay : « le rectangle de l'effort trop large, Approfondi vraiment limite sur téléphone ») le mot « Effort » seulement quand la zone est large ; très étroite : plus de chevron, marges serrées */
@container (max-width: 205px) { .mot-effort { display: none; } }
@container (max-width: 190px) { .effort-pastille svg { display: none; } .effort-pastille { padding: 0 8px; } }
/* (12/10, PastiiJay, maquette « Ton rang, à gravir » v3, validée) TROIS PARTIES dans la carte, chacune son cadre blanc épais et son titre
posé sur le bord (« Ta progression » garde seulement son voyant vert) ; « Ton rang » : la frise des rangs (compte.js dessinerRang) */
.bloc-cadre { position: relative; margin: 22px 12px 12px; padding: 20px 12px 12px; border: 2px solid var(--skin); border-radius: 4px; }
.titre-cadre { position: absolute; top: -10px; left: 16px; padding: 0 8px; background: var(--carte); font-size: 12px; line-height: 18px; letter-spacing: .08em; font-weight: 700; color: #e6e6e6; text-transform: uppercase; }
.bloc-cadre .regul { margin: 0; }
@media (max-width: 420px) { .bloc-cadre { margin: 22px 8px 8px; padding: 20px 8px 8px; } }
/* (13/10, PastiiJay, maquette « Les nouveaux onglets », validée) LE CLASSEMENT : le rang (la frise) et ses skins dans leur page,
sans vignette ni cadre ; la RÉGULARITÉ jointe à « Progression et bonus », le « Devenir pair » à la même largeur que son cadre */
.page-classement { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 30px; }
.titre-page-c { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 22px; font-weight: 700; text-align: center; }
.titre-page-c small { font-size: 15px; font-weight: 400; color: var(--doux); }
#legendeJauges .regul-prog { margin: 22px 12px 12px; } #legendeJauges .appel-pair { margin: 4px 12px 14px; }
@media (max-width: 420px) { #legendeJauges .regul-prog { margin: 22px 8px 8px; } #legendeJauges .appel-pair { margin: 4px 8px 10px; } }
/* (13/10) L'ATELIER VIDE : aucun PC relié, « Relier » ici */
/* (18/10, PastiiJay, maquette « Appareils de démonstration », A) sans PC relié : le tableau de bord d'exemple, le bouton Télécharger, relier avec un code replié */
.atelier-vide.demo { padding: 0; border: 0; background: none; gap: 0; }
.etiquette-ex { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1a1918; background: #ffd650; border-radius: 4px; padding: 3px 8px 1px; }
.ex-carte { position: relative; z-index: 1; }
.ex-carte .etiquette-ex { position: absolute; z-index: 3; top: -9px; left: 12px; }
.ex-carte .machine { opacity: .6; }
.ex-onde { overflow: hidden; height: 30px; width: 100%; }
.ex-onde svg { width: 200%; height: 30px; display: block; animation: ex-defile 3.2s linear infinite; }
.ex-onde path { fill: none; stroke: #e6e6e6; stroke-width: 1.6; opacity: .85; }
@keyframes ex-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; position: relative; z-index: 1; margin-top: 14px; }
.cta .msg { margin: 0; }
.cta button { width: 100%; }
#codeVide { margin-bottom: 14px; padding: 4px 16px 8px; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); } #codeVide .lie-bloc { border-top: 0; }
@media (min-width: 721px) { .cta button { width: auto; min-width: 260px; } }
.atelier-vide { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; padding: 18px; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); }
.atelier-vide h2 { margin: 0; font-size: 18px; }
.atelier-vide .msg { margin: 0; }
/* LES LOGOS DES RANGS (compte.js logoRang) : au trait, à la couleur du rang ; plus il est rare, plus il brille */
.logo-rang { width: 72px; height: 72px; overflow: visible; fill: none; stroke: var(--c); stroke-width: 1.75; /* (14/10, PastiiJay, « retouche 2 » : plus fin) */ stroke-linecap: round; stroke-linejoin: round; }
.logo-rang .fond { fill: color-mix(in srgb, var(--c) 16%, transparent); } .logo-rang .fond.noir { fill: #0b0b0b; }
.logo-rang .plein { fill: var(--c); stroke: none; } .logo-rang .eclat { fill: #fff; stroke: none; }
.logo-rang .reflet * { fill: none !important; } .logo-rang .reflet .plein { stroke: inherit; stroke-width: 1.2; } .logo-rang .eclat-r { display: none; }
.logo-rang .halo { stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.logo-rang.diamant .eclat, .logo-rang.champion .eclat, .logo-rang.grand-champion .eclat, .logo-rang.legende .eclat { transform-box: fill-box; transform-origin: center; animation: lr-scintille 2.2s ease-in-out infinite; }
@keyframes lr-scintille { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
.logo-rang.legende { display: inline; opacity: 1; margin: 0; font-size: inherit; } /* (14/10 : plus de halo qui pulse ni de lueur plaquée) */ .logo-rang.legende .fond:not(.noir) { fill: rgba(138, 125, 255, .14); }
.logo-rang .rayons { transform-box: view-box; transform-origin: 24px 24px; animation: lr-tourne 14s linear infinite; } @keyframes lr-tourne { to { transform: rotate(360deg); } }
/* les petites tailles : le trait plus épais pour rester lisible, sans halo ni éclats */
.logo-rang.lr-p, .logo-rang.lr-n, .logo-rang.lr-m, .logo-rang.lr-d { stroke-width: 2.8; } .logo-rang.lr-p { width: 20px; height: 20px; } .logo-rang.lr-n { width: 16px; height: 16px; } .logo-rang.lr-m { width: 32px; height: 32px; stroke-width: 2.3; }
.logo-rang.lr-p .halo, .logo-rang.lr-n .halo, .logo-rang.lr-p .rayons, .logo-rang.lr-n .rayons, .logo-rang.lr-p .eclat, .logo-rang.lr-n .eclat { display: none; }
/* (12/10, PastiiJay : pas de photo de profil) dans Mon compte, le logo du rang de la saison à la place de la photo ; sans rang, rien */
.compte-avatar:has(.logo-rang) { background: none; border-radius: 0; } .compte-avatar .logo-rang { width: 64px; height: 64px; } .compte-avatar[hidden] { display: none; }
/* (12/10, PastiiJay) LE BOUTON DU THÈME, en haut entre la fiole et « Mon compte », et son menu (compte.js menuThemeHtml) */
.theme-bloc { position: relative; display: inline-flex; }
.menu-theme { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(300px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--bord); border-radius: 4px; background: var(--panneau); box-shadow: 0 12px 32px rgba(0,0,0,.45); text-align: left; }
.menu-theme h5 { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.menu-theme .cases-t, .menu-theme .rangs-t { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .menu-theme .rangs-t { margin-top: 8px; gap: 6px; }
.menu-theme .case-t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 1px solid var(--bord); border-radius: 4px; background: none; color: var(--texte); font: inherit; font-size: 12px; cursor: pointer; min-width: 0; }
.menu-theme .case-t span { max-width: 100%; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.menu-theme .case-t.actif { border-color: var(--skin); box-shadow: inset 0 0 0 1px var(--skin); }
.menu-theme .case-t:disabled { opacity: .55; cursor: default; }
.menu-theme .pastille-skin { width: 32px; height: 20px; border-radius: 4px; border: 1px solid #555; background: #1b1b1b; } .menu-theme .pastille-skin.clair { background: #f4f3ef; }
.menu-theme .arc { display: flex; padding-left: 6px; } .menu-theme .arc .logo-rang { margin-left: -6px; }
.menu-theme .cad { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; fill: none; stroke: #8a8a8a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.menu-theme .note-t:empty { display: none; } .menu-theme .note-t { margin: 8px 0 0; font-size: 12px; color: #ffd650; }
/* LE CHOIX DU SKIN (compte.js skinsHtml) */
/* (13/10, PastiiJay, maquette « Le Classement en frise », proposition A et agencement 3, validés) LA FRISE DES RANGS */
.frise-r { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; align-items: center; margin-top: 22px; padding: 30px 6px 10px; }
.frise-r::before { content: ""; position: absolute; left: 24px; right: 24px; top: 76px; height: 2px; background: linear-gradient(90deg, #8a9097, #b8794a, #c8cfd8, #d8ad3c, #5ccfe6, #b8a6ff, #e15fc4, #dc5244, #b49cff); opacity: .35; }
.frise-r .case { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; background: #202020; border: 1px solid #333; border-radius: 4px; color: var(--texte); font: inherit; font-size: 11px; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.frise-r .case .logo-rang { width: 40px; height: 40px; }
.frise-r .case > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.frise-r .case.ferme .logo-rang, .frise-r .case.ferme > span { opacity: .35; filter: grayscale(.6); }
.frise-r .case .cad { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; fill: none; stroke: #8a8a8a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .frise-r .case:not(.ici):hover { transform: translateY(-2px); border-color: var(--rc); } }
.frise-r .case.vu { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc); } .frise-r .case.vu .logo-rang, .frise-r .case.vu > span { opacity: 1; filter: none; } .frise-r .case.vu > span { color: var(--rc) !important; }
.frise-r .case.ici { transform: scale(1.32); z-index: 2; border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 10px 26px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--rc) 35%, transparent); }
.frise-r .case.ici > span { font-weight: 700; color: var(--rc); }
.frise-r .case.ici > span:not(.marches-f) { white-space: normal; overflow: visible; text-align: center; line-height: 1.15; } /* (13/10, PastiiJay : « Grand champion III » coupé par trois points) le nom passe à la ligne au lieu d'être coupé */
.frise-r .case .toi-f { position: absolute; top: -21px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 4px; background: var(--rc); color: #141414; font-size: 9px; font-style: normal; font-weight: 700; line-height: 14px; }
.frise-r .case .marches-f { display: flex; gap: 3px; } .frise-r .case .marches-f i { width: 10px; height: 3px; border-radius: 1px; background: color-mix(in srgb, var(--rc) 30%, #333); } .frise-r .case .marches-f i.ok { background: var(--rc); }
.frise-r .case.porte::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -7px; height: 3px; border-radius: 1px; background: var(--rc); }
.page-classement .apercu-note:empty { display: none; } .page-classement .apercu-note { text-align: center; margin: 14px 0 0; }
/* (14/10, PastiiJay, proposition B) « Débloque des thèmes supplémentaires » : un cadre avec trois logos de rangs (Légende au centre) */
.debloque-g { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 18px; padding: 8px 14px; width: max-content; max-width: 100%; box-sizing: border-box; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); font-size: 14px; font-weight: 700; color: var(--texte); }
.debloque-g .logos-g { display: flex; align-items: center; gap: 2px; flex: none; }
.debloque-g .lr-d { width: 22px; height: 22px; } .debloque-g .lr-d.legende { width: 28px; height: 28px; }
.tete-g { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 4px 4px; } .tete-g .titre-page-c { justify-content: flex-start; }
.skin-g { display: flex; align-items: center; gap: 10px; } .skin-g small { font-size: 12px; color: var(--doux); }
.skin-g button { height: 36px; white-space: nowrap; padding: 0 16px; border: 1px solid #444; border-radius: 4px; background: var(--panneau); color: var(--texte); font: inherit; font-size: 13px; font-weight: 700; }
.skin-g button.actif { background: var(--skin, #fff); border-color: var(--skin, #fff); color: var(--sur-skin, #141414); }
.bas-g { display: grid; grid-template-columns: minmax(240px, auto) 1fr; gap: 14px; margin: 34px 4px 0; align-items: stretch; }
.rang-cadre-g { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--bord); border-radius: 4px; background: #1b1b1b; } .skin-g.en-bas { display: none; }
.rang-g { display: flex; align-items: center; gap: 14px; } .rang-g .logo-rang { width: 52px; height: 52px; flex: none; }
.rang-g small { display: block; font-size: 12px; color: var(--doux); } .rang-g b { display: block; font-size: 24px; line-height: 1.15; color: var(--rc, var(--texte)); } .rang-g span { font-size: 12px; color: var(--doux); }
.bas-g .regles-g { margin: 0; }
.rang-g .indice-l { display: block; margin-top: 8px; font-size: 13px; color: var(--texte); line-height: 1.5; } /* (13/10, PastiiJay : un indice aux Grand champion, sans chiffre) */
.regles-skin b.nom-legende, .texte-promo b.nom-legende { color: transparent; } /* (la Légende à ses couleurs dans les règles aussi) */
.rang-g .indice-l b { display: inline; font-size: inherit; line-height: inherit; font-weight: 700; } .rang-g .indice-l b.nom-legende { color: transparent; } .rang-g .indice-l .logo-rang { width: 18px; height: 18px; vertical-align: -4px; margin: 0 6px 0 0; } /* (PastiiJay : « la Légende, avec sa couronne, qui brille ») l'aurore, quel que soit le skin */
.regles-promo { margin: 34px 4px 4px; border-color: #ffd650 !important; background: rgba(255,214,80,.06); } .regles-promo > .titre-cadre { color: #ffd650; }
.regles-promo .bouton-pair { align-self: flex-end; flex: none; padding-top: 9px; padding-bottom: 7px; }
@media (max-width: 640px) {
.frise-r { grid-template-columns: 1fr; gap: 6px; padding: 8px 18px; }
.frise-r::before { left: 38px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; background: linear-gradient(0deg, #8a9097, #b8794a, #c8cfd8, #d8ad3c, #5ccfe6, #b8a6ff, #e15fc4, #dc5244, #b49cff); }
.frise-r .case { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px; font-size: 13px; order: calc(10 - var(--n)); }
.frise-r .case .logo-rang { width: 32px; height: 32px; }
.frise-r .case.ici { transform: none; padding: 14px 12px; font-size: 16px; } .frise-r .case.ici .logo-rang { width: 44px; height: 44px; }
.frise-r .case .toi-f { position: static; transform: none; order: 3; margin-left: auto; font-size: 11px; padding: 2px 8px; }
.frise-r .case .marches-f { order: 2; } .frise-r .case.ici .marches-f i { width: 14px; height: 4px; }
.frise-r .case.porte::after { left: -10px; right: auto; top: 18%; bottom: 18%; width: 3px; height: auto; }
.tete-g { flex-direction: column; align-items: center; } .tete-g .titre-page-c { justify-content: center; }
.skin-g.en-tete { display: none; } .skin-g.en-bas { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .skin-g button { width: 100%; }
.bas-g { grid-template-columns: 1fr; margin: 22px 0 0; } .regles-promo { margin: 22px 0 0; } .regles-promo .bouton-pair { align-self: center; }
}
.apercu-note { min-height: 3em; margin: 8px 4px 0; font-size: 12px; color: #ffd650; }
.regles-skin { list-style: none; margin: 12px 4px 2px; padding: 10px 12px; border-radius: 4px; background: #1b1b1b; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #cfcfcf; } .regles-skin b { color: #fff; }
/* LA LÉGENDE = L'AURORE BORÉALE (vert, violet, rose qui ondulent lentement), PARTOUT : barres du haut, onglet actif, boutons, cadres, son nom */
:root { --aurore: linear-gradient(90deg, #6dffb0 0%, #8a7dff 25%, #ff7ad9 50%, #8a7dff 75%, #6dffb0 100%); } /* (12/10 : à l'horizontale, sans couture quand il défile : en biais, le raccord passait comme une barre) */
@keyframes aurore { to { background-position: -300% 0; } } @keyframes aurore-bord { to { background-position: 0 0, -300% 0; } }
.skin-legende .carte-jours .tete, .skin-legende .tuile-tete, .skin-legende .onglets-compte button.actif, .skin-legende #nouveau, .skin-legende button.principal:not(:disabled):not(.envoyer), .skin-legende #utiliserLapin:not(:disabled) { background: var(--aurore); background-size: 300% 100%; border-color: transparent; animation: aurore 9s linear infinite; }
.skin-legende .bloc-cadre, .skin-legende .fusion .corps-prog { border-color: transparent; background: linear-gradient(var(--carte), var(--carte)) padding-box, var(--aurore) border-box; background-size: 100% 100%, 300% 100%; animation: aurore-bord 9s linear infinite; }
.nom-legende { background: var(--aurore); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurore 9s linear infinite; }
/* (12/10, PastiiJay) AVEC UN SKIN DE RANG (html.avec-skin ; Sombre ne change rien) : Envoyer quand il y a du texte, les icônes du micro, du
vocal, et le contour des boutons du haut (quitter, Console, fiole, palette, compte) prennent la couleur du skin */
.avec-skin .chat-boutons button.envoyer:not(.vide) { background: var(--skin); border-color: var(--skin); --bord-btn: var(--skin); }
.avec-skin .chat-boutons button.envoyer:not(.vide) .mot { color: var(--sur-skin); } .avec-skin .chat-boutons button.envoyer:not(.vide) .invite { stroke: var(--sur-skin); }
.skin-legende .chat-boutons button.envoyer { background: var(--aurore); background-size: 300% 100%; border-color: transparent; animation: aurore 9s linear infinite; transition: filter .25s; } /* (12/10, PastiiJay : « c'est le légendaire, ça brille, c'est fait exprès ») toujours l'aurore */
.skin-legende .chat-boutons button.envoyer.vide { filter: brightness(.72); } .skin-legende .chat-boutons button.envoyer .invite { stroke: #141414; } .skin-legende .chat-boutons button.envoyer .mot { color: #141414; } .skin-legende .chat-boutons button.envoyer.vide .invite { stroke: #fff; } .skin-legende .chat-boutons button.envoyer.vide .mot { color: #fff; } /* (vide : un peu plus sombre ; on écrit : il s'allume) */
/* (12/10 au soir, PastiiJay : « ça doit suivre le skin actif », skins de saison SEULEMENT ; Sombre et Clair restent réglés à la main) la dictée en cours,
l'appel en cours (plus de doré) et le bouton du don de la fenêtre Donateur à la couleur du skin ; les jauges : compte.js paletteSkin */
.avec-skin :is(#boutonCompte.actif, .theme-bloc:has(#menuTheme:not([hidden])) > button, #boutonFormule.menu-source, .entete-gauche > button:active, .entete-gauche > a:active, .entete-bout > button:active, .theme-bloc > button:active) { background: var(--skin); color: var(--sur-skin); border-color: var(--skin); }
.avec-skin #micro.rouge, .avec-skin #micro.rouge:hover { background: var(--skin); border-color: var(--skin); --bord-btn: var(--skin); color: var(--sur-skin); }
.avec-skin #vocal.principal { color: var(--skin); border-color: var(--skin); --bord-btn: var(--skin); }
.avec-skin .popup-soutenir.blanc { background: var(--skin); color: var(--sur-skin); }
/* (12/10, PastiiJay) ta bulle à la couleur du skin : un fond teinté (le texte reste blanc, lisible), le bord à sa couleur */
.avec-skin .bulle.moi { background: color-mix(in srgb, var(--skin) 24%, #1b1b1b); border-color: color-mix(in srgb, var(--skin) 70%, transparent); }
.skin-legende .bulle.moi { background: linear-gradient(110deg, rgba(109,255,176,.16), rgba(138,125,255,.24), rgba(255,122,217,.18)), #1b1b1b; border-color: rgba(138,125,255,.7); }
/* (12/10, PastiiJay) le menu « + Nouveau » (et le « + » de la zone d'écriture) : la case survolée à la couleur du skin */
.avec-skin .menu-nouveau button:not(.bientot):hover { background: color-mix(in srgb, var(--skin) 26%, #1b1b1b); } .avec-skin .menu-nouveau button:not(.bientot):hover svg { color: var(--skin); }
.skin-legende .menu-nouveau button:not(.bientot):hover { background: linear-gradient(110deg, rgba(109,255,176,.18), rgba(138,125,255,.26), rgba(255,122,217,.2)), #1b1b1b; }
/* (12/10, PastiiJay, maquette « La formule se lit », variante « Le zoom », validée) LA FORMULE SE LIT : dans l'ordre, ton pourcentage de
base, le ×, ton multiplicateur, le =, le total s'allument et grossissent un instant (les signes plus fort) ; toutes les 6 s ; la carte
ne bouge pas (seulement la taille et la lumière) */
@keyframes formule-v { 0%, 15%, 100% { transform: scale(1); filter: none; } 6% { transform: scale(1.28); filter: drop-shadow(0 0 12px rgba(255,255,255,.85)) brightness(1.3); } }
@keyframes formule-s { 0%, 15%, 100% { transform: scale(1); filter: none; } 6% { transform: scale(1.6); filter: drop-shadow(0 0 12px rgba(255,255,255,.9)); } }
.fusion .entonnoir-haut > .carte-e:first-child .valeur, .fusion .entonnoir-haut > .carte-e:last-child .valeur, .fusion .egal + .carte-e .valeur { transform-origin: left center; animation: formule-v 6s ease-in-out infinite; }
.fusion .op, .fusion .signe-egal { transform-origin: center; animation: formule-s 6s ease-in-out infinite; }
.fusion .op { animation-delay: .6s; } .fusion .entonnoir-haut > .carte-e:last-child .valeur { animation-delay: 1.2s; } .fusion .signe-egal { animation-delay: 1.8s; } .fusion .egal + .carte-e .valeur { animation-delay: 2.4s; }
/* (12/10, PastiiJay) « Relier » et « Télécharger » (Partager) restent BLANCS quel que soit le skin : des boutons techniques */
#relierMachine, #telechargerLogiciel { --skin: var(--accent); --sur-skin: #1a1918; }
.levier.amis .lien-a button.principal { --skin: var(--accent); --sur-skin: #1a1918; } /* (18/10, PastiiJay : « bouton Partager sur fond blanc ») Partager (Parrainage) reste blanc quel que soit le skin, comme Relier et Télécharger */
/* (13/10, PastiiJay : « un bouton, c'est censé avoir la même hauteur partout ») Relier, le champ du code et Télécharger à la hauteur des
boutons d'Utilisation (Recharger, Maximum, Utiliser : 36, comme les entêtes fines) */
/* (13/10, PastiiJay) LA LOI DES BOUTONS DANS LES PAGES (pas les onglets du haut) : un bouton de texte d'une ligne fait 36 de haut, partout ;
les champs posés à côté d'un bouton aussi (Mon compte, le code) ; les grandes cases à choisir (skins, niveaux) et Envoyer gardent leur taille */
#codeMachine, #relierMachine, #telechargerLogiciel, .compte-cadre button, .compte-cadre input:not([type="checkbox"]):not([type="radio"]),
.bouton-plan, .brille-t, .bouton-pair { height: auto; min-height: 36px; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; line-height: 20px; } /* (13/10, PastiiJay : sur un petit téléphone, le texte sortait du bouton) 36 de haut sur une ligne ; s'il passe à la ligne, le bouton grandit */
.sans-coupure { white-space: nowrap; } /* (le prix ne se coupe jamais : « 2,99 € / mois » ensemble) */
.skin-legende #relierMachine, .skin-legende #telechargerLogiciel { background: var(--accent); animation: none; }
/* (12/10, PastiiJay, maquette « 554 sur 571 », A en vert) pas pleine : sous le pourcentage, en vert (l'acquis du moment), ce qu'elle vaudra
pleine (le total du moment : il suit) */
/* (12/10, PastiiJay) LA CORBEILLE des conversations : discrète (en gris), les jours qui restent à droite */
#convs .local-conv.a-la-corbeille .titre { color: var(--doux); } #convs .jours-corbeille { margin-left: auto; padding: 0 4px; font-size: 11px; white-space: nowrap; }
/* (12/10, PastiiJay) la CORBEILLE tout en bas de la colonne des conversations (la colonne est une pile : la liste prend la place, la
corbeille se pose au fond) */
.compte-convs { display: flex; flex-direction: column; }
#convsContenu { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#convs { flex: 1; display: flex; flex-direction: column; }
#convs > .local-zone[data-zone="corbeille"] { margin-top: auto; padding-top: 10px; }
/* (12/10, PastiiJay) la pile de la zone d'écriture grossit un peu au survol : on peut cliquer dessus */
@media (hover: hover) and (pointer: fine) { .jauge-chat { transition: transform .2s; } .jauge-chat:hover { transform: scale(1.18); } }
/* (12/10, PastiiJay) la bulle « Aperçu » d'un skin : au centre, sur un voile transparent qui bloque tout derrière (on voit le site dans le skin) */
.apercu-voile { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; background: transparent; }
.apercu-bulle { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 18px 16px; text-align: center; background: var(--carte); border: 1px solid var(--skin, var(--bord)); border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.apercu-bulle .logo-apercu { width: 56px; height: 56px; flex: none; } /* (14/10 au soir) le logo du rang de l'aperçu */
.apercu-bulle > b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--skin, var(--texte)); }
.apercu-bulle p { margin: 0; font-size: 14px; color: var(--texte); }
.apercu-bulle button { margin-top: 6px; padding: 9px 18px; }
/* (13/10, maquette « La vitrine des skins » validée) LA VITRINE de la bulle : ce que le skin colore vraiment (compte.js vitrineSkin) */
.apercu-bulle.avec-vitrine { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.vitrine-s { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding: 12px 0 4px; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); text-align: left; }
.vitrine-s .titre-v { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); text-align: center; }
.vitrine-s .jauge-v { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--doux); } .vitrine-s .jauge-v b { min-width: 3.4ch; text-align: right; font-size: 15px; color: var(--skin, var(--texte)); }
.vitrine-s .barre-v { flex: 1; height: 8px; border-radius: 2px; background: #2a2a2a; overflow: hidden; } .vitrine-s .barre-v i { display: block; width: 68%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #fff, var(--skin, #fff)); }
.vitrine-s div.sj { padding: 0; --c0: #fff !important; --c6: var(--skin, #fff) !important; --r: var(--skin, #fff) !important; } /* (la vitrine montre le skin en entier : du blanc à sa couleur pleine) */
.vitrine-s .boutons-v { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .vitrine-s .boutons-v span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; }
.vitrine-s .onglet-v { background: var(--skin, #fff); color: #141414; } .vitrine-s .envoyer-v { border: 1px solid var(--skin, var(--bord)); color: var(--texte); }
.vitrine-s .bulle-v { background: color-mix(in srgb, var(--skin, #fff) 24%, #1b1b1b); border: 1px solid color-mix(in srgb, var(--skin, #fff) 70%, transparent); }
.skin-legende .vitrine-s .onglet-v, .skin-legende .vitrine-s .barre-v i, .skin-legende .vitrine-s .sj.complete .sj-cases::before { background: var(--aurore); background-size: 300% 100%; animation: aurore 9s linear infinite; }
/* (12/10 au soir) « Un fichier de ton dossier Pairping » : la liste du dossier du PC */
.liste-dossier { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin: 8px 0 12px; }
.liste-dossier button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; }
.liste-dossier button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.liste-dossier button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .liste-dossier button em { display: block; font-style: normal; font-size: 11px; color: var(--doux); overflow: hidden; text-overflow: ellipsis; } .liste-dossier button small { color: var(--doux); flex: none; }
.liste-dossier .vide { color: var(--doux); margin: 0; }
.depot-fichier small { display: block; margin-top: 8px; font-size: 14px; font-weight: 300; color: var(--doux); }
/* (12/10 au soir, PastiiJay) un choix en cours dans un menu (le mode de la fiole) : en surbrillance, à la couleur du skin (blanc en Sombre), sans coche */
.menu-contexte button.actif { background: color-mix(in srgb, var(--skin, #ffffff) 20%, transparent); color: var(--skin, var(--texte)); font-weight: 700; }
.liste-rangement { margin: 8px 0 14px; padding-left: 18px; max-height: 40vh; overflow-y: auto; font-size: 13px; color: var(--doux); } .liste-rangement li { margin: 0 0 6px; } .liste-rangement b { color: var(--texte); font-weight: 600; }
/* (13/10, PastiiJay, maquette « La zone d'écriture qui s'illumine », validée) L'ÉCLAT : la couleur du thème (blanc en Sombre, noir en Clair) ou
celle du skin. La zone d'écriture s'illumine sous la souris et pendant qu'on écrit ; la voix, la dictée, Envoyer, « + » et Effort : le contour
s'illumine au survol ; « + » et Effort ouverts : remplis (un 2e clic les referme), comme les boutons du haut. Les dessins de la voix, de la
dictée et d'Envoyer restent blancs (noirs en Clair), jamais de la couleur du skin ; le cadenas reste gris. (:root : plus fort que clair.css) */
:root { --eclat: var(--texte); --sur-eclat: var(--panneau); } .avec-skin { --eclat: var(--skin); --sur-eclat: var(--sur-skin); }
:root .chat-saisie textarea { transition: border-color .2s; }
:root .chat-saisie textarea:focus { border-color: var(--eclat); }
@media (hover: hover) and (pointer: fine) { :root .chat-saisie .zone-texte:hover:not(:has(button:hover)):not(:has(#bulleUtil:hover)):not(:has([role="menu"]:hover)) textarea { border-color: var(--eclat); } } /* (18/10, PastiiJay : « le focus reste » après la croix : au doigt, le survol restait collé sur la zone) (23/10, PastiiJay : « tout ce qui est à l'intérieur de l'encart » : la souris sur un bouton posé dans la zone (trombone, effort, pile, croix) ou sur une bulle ne surligne plus la zone d'écriture ; seul le bouton s'allume) */
@media (hover: hover) and (pointer: fine) { :root .chat-saisie .chat-boutons button:hover, :root .chat-saisie .effort .joindre:hover, :root .chat-saisie .effort-pastille:hover { border-color: var(--eclat); --bord-btn: var(--eclat); filter: none; } }
body:has(#menuJoindre) .effort .joindre, :root .effort.ouvert .effort-pastille { background: var(--eclat); border-color: var(--eclat); color: var(--sur-eclat); } body:has(#menuJoindre) .effort .joindre svg { stroke: var(--sur-eclat); }
/* (23/10, PastiiJay, maquette « Les 7 premiers jours » v13 : LES QUÊTES ET L'INVENTAIRE, quetes.js) la couche « jeu » de la barre du haut,
sa pastille (seulement quand il y a quelque chose à récupérer), la bulle de découverte, les fenêtres « Mes quêtes » et « Mon inventaire » */
.bouton-q { position: relative; }
.bouton-q .pastille-q { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 3px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; background: var(--skin, var(--accent)); color: var(--sur-skin, var(--fond)); border: 2px solid var(--panneau); font: 700 10px/1 inherit; font-variant-numeric: tabular-nums; } /* (23/10, maquette « Barre du haut Pairping » : un chiffre, un rond ; « 9+ » : un carré aux coins doux, jamais une gélule) */
.bouton-q .pastille-q.large { border-radius: 4px; }
.compte-role { margin-top: 6px; color: var(--doux); font-size: 13px; } .compte-role:not(:has(#role)) { display: none; } .compte-role:not(:has(select)) { display: none; } /* (23/10 : sur téléphone, seulement ta priorité ou la formule à choisir : le forfait est déjà dans les badges) */
.qui-bloc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .qui-bloc #qui { font-size: 14px; color: var(--texte); } .qui-bloc #role { font-size: 11px; color: var(--doux); }
.entete-bout .qui-bloc { margin: 0; min-width: 0; } .entete-bout .qui-bloc #qui, .entete-bout .qui-bloc #role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
@media (max-width: 520px) { .entete-bout .qui-bloc { display: none; } } /* (23/10, PastiiJay : le pseudo et le statut cachés sur téléphone seulement) */
.popup.quetes-popup { width: min(560px, 100%); }
.quetes-popup .doux-q { color: var(--doux); font-size: 13px; margin: 6px 0; }
.quetes-popup .parcours-q { margin-bottom: 14px; }
.quetes-popup .parcours-q h4 { margin: 0 0 2px; font-size: 15px; }
.quetes-popup .frise-q { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; margin-top: 10px; padding: 14px 4px 6px; }
.quetes-popup .case-q { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); color: var(--texte); font: inherit; font-size: 11px; cursor: pointer; min-width: 0; }
.quetes-popup .case-q svg { width: 22px; height: 22px; }
.quetes-popup .case-q .nom-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.quetes-popup .case-q .jour-q { font-size: 10px; color: var(--doux); letter-spacing: .06em; text-transform: uppercase; }
.quetes-popup .case-q.ferme { cursor: default; }
.quetes-popup .case-q.ferme svg, .quetes-popup .case-q.ferme .nom-q { opacity: .35; }
.quetes-popup .case-q.fait { border-color: var(--skin, var(--accent)); }
.quetes-popup .case-q.fait > svg { color: var(--skin, var(--accent)); }
.quetes-popup .case-q .coche-q { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--skin, var(--accent)); color: var(--sur-skin, var(--fond)); display: grid; place-items: center; transform: scale(0); }
.quetes-popup .case-q .coche-q svg { width: 10px; height: 10px; stroke-width: 3; }
.quetes-popup .case-q.fait .coche-q { transform: scale(1); }
.quetes-popup .case-q.ici { border-color: var(--skin, var(--accent)); box-shadow: 0 0 0 1px var(--skin, var(--accent)); }
.quetes-popup .case-q.ici .nom-q { font-weight: 700; color: var(--skin, var(--accent)); }
.quetes-popup .jour-carte-q { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 8px; padding: 12px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); }
.quetes-popup .jour-carte-q .ico-q { width: 48px; height: 48px; border-radius: 4px; border: 1px solid var(--skin, var(--accent)); color: var(--skin, var(--accent)); display: grid; place-items: center; }
.quetes-popup .jour-carte-q .ico-q svg { width: 26px; height: 26px; }
.quetes-popup .jour-carte-q p { margin: 2px 0 10px; color: var(--doux); font-size: 13px; }
.quetes-popup .jour-carte-q .etat-j { font-size: 11px; color: var(--doux); letter-spacing: .06em; text-transform: uppercase; }
.quetes-popup .quetes-q { display: flex; flex-direction: column; gap: 8px; }
.quetes-popup .quete-q { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); }
.quetes-popup .quete-q > svg { width: 32px; height: 32px; }
.quetes-popup .quete-q .t b { display: block; font-size: 14px; }
.quetes-popup .quete-q .t small { display: block; color: var(--doux); font-size: 12px; }
.quetes-popup .barre-q { height: 6px; border-radius: 3px; background: var(--bord); margin-top: 6px; overflow: hidden; }
.quetes-popup .barre-q i { display: block; height: 100%; background: var(--skin, var(--accent)); }
.quetes-popup .quete-q.pret { border-color: var(--skin, var(--accent)); box-shadow: 0 0 0 1px var(--skin, var(--accent)); }
.quetes-popup .etat-q { font-size: 12px; color: var(--doux); white-space: nowrap; }
.quetes-popup .inv-q { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.quetes-popup .slot-q { position: relative; aspect-ratio: 1; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); color: var(--texte); display: grid; place-items: center; padding: 0; cursor: pointer; }
.quetes-popup .slot-q.vide { cursor: default; background: transparent; border-style: dashed; opacity: .5; }
.quetes-popup .slot-q svg { width: 58%; height: 58%; }
.quetes-popup .slot-q.vert { color: var(--c-reserve); border-style: dashed; border-color: var(--c-reserve); }
.quetes-popup .slot-q .qte-q { position: absolute; right: 4px; bottom: 2px; font-size: 13px; font-weight: 700; color: var(--texte); }
.quetes-popup .slot-q .bientot-q { position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--att); }
.quetes-popup .slot-q.choisi { border-color: var(--skin, var(--accent)); box-shadow: 0 0 0 1px var(--skin, var(--accent)); }
.quetes-popup .detail-q { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center; padding: 12px; margin-top: 10px; border: 1px solid var(--bord); border-radius: 4px; background: var(--carte); font-size: 13px; }
.quetes-popup .detail-q > svg { grid-row: 1 / span 6; width: 64px; height: 64px; }
.quetes-popup .detail-q.vert > svg { color: var(--c-reserve); }
.quetes-popup .detail-q > span { color: var(--doux); }
.quetes-popup .detail-q > span b { color: var(--texte); }
.quetes-popup .peremption-q.bientot { color: var(--att); font-weight: 700; }
.quetes-popup .code-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--doux); }
.quetes-popup .code-q input { flex: 1 1 160px; min-width: 0; height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; }
.quetes-popup .ligne-c-q { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bord); }
.quetes-popup .ligne-c-q > svg { width: 24px; height: 24px; }
.quetes-popup .ligne-c-q .t small { display: block; color: var(--doux); font-size: 12px; }
.quetes-popup .ico-recu-q { width: 56px; height: 56px; margin: 0 auto 6px; color: var(--skin, var(--accent)); }
.quetes-popup .ico-recu-q svg { width: 56px; height: 56px; }
.bouton-inv-q { display: inline-flex; align-items: center; gap: 8px; }
.vers-inv-q { margin-bottom: 10px; }
@media (max-width: 420px) {
.quetes-popup .frise-q { gap: 3px; }
.quetes-popup .case-q { font-size: 9px; padding: 6px 1px 4px; }
.quetes-popup .case-q svg { width: 18px; height: 18px; }
.quetes-popup .inv-q { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* (23/10, PastiiJay : « la taille de la fenêtre de l'inventaire doit toujours être égale ») les fiches superposées, seule la choisie visible (quetes.js) */
.quetes-popup .details-q { display: grid; }
.quetes-popup .details-q > * { grid-area: 1 / 1; visibility: hidden; }
.quetes-popup .details-q > .actif { visibility: visible; }
/* (23/10, PastiiJay : quêtes, inventaire et thème passent à gauche) le menu des thèmes s'ouvre alors vers la droite */
.entete-gauche .menu-theme { right: auto; left: 0; }
/* (23/10) la fiche du jour : les 7 au même endroit, seule la choisie visible (la fenêtre « Mes quêtes » ne saute pas) */
.quetes-popup .jour-cartes-q { display: grid; }
.quetes-popup .jour-cartes-q > .jour-carte-q { grid-area: 1 / 1; visibility: hidden; }
.quetes-popup .jour-cartes-q > .jour-carte-q.actif { visibility: visible; }
/* (23/10, PastiiJay : la bulle des quêtes « carrée, sous les onglets, loin de ce qu'elle désigne ») LA BULLE D'AIDE, la seule du site connecté (compte.js bulleAide) :
posée en direct sous l'élément qu'elle explique (au-dessus s'il n'y a pas la place), jamais hors de l'écran ; (23/10, PastiiJay, Final Fantasy IX : « très bande
dessinée ») ses bords ARRONDIS (12 : l'exception aux coins anguleux, pour elle seule, jamais une gélule) et un petit CROCHET qui la relie à l'élément
(sa pointe sur --fleche ; retourné au-dessus, « dessus », ou vers la gauche, « droite ») ; bord et crochet suivent le skin actif */
.bulle-aide { position: fixed; z-index: 70; width: max-content; max-width: min(320px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--skin, var(--accent)); border-radius: 12px; background: var(--panneau); color: var(--texte); font-size: 14px; line-height: 1.45; text-align: left; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.bulle-aide[hidden] { display: none; }
.bulle-aide .crochet { position: absolute; left: calc(var(--fleche, 50%) - 4px); top: -15px; overflow: visible; transform-origin: 4px 50%; pointer-events: none; }
.bulle-aide .crochet path { fill: var(--panneau); stroke: var(--skin, var(--accent)); stroke-width: 1; stroke-linejoin: round; }
.bulle-aide.dessus .crochet { top: auto; bottom: -15px; transform: scaleY(-1); } .bulle-aide.droite .crochet { transform: scaleX(-1); } .bulle-aide.dessus.droite .crochet { transform: scale(-1, -1); }
.bulle-aide.aide-i { font-size: 13px; font-weight: 300; white-space: pre-line; }
.bulle-aide.quetes-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bulle-aide.bulle-token { max-width: min(420px, calc(100vw - 32px)); padding: 14px 16px; font-size: 14px; line-height: 1.5; }