/* LES BOARDS D'ALPHA (Lionel, 11/10) -- maquette v3 validee : cadre lumineux qui vibre, tuiles en verre,
   aux couleurs d'Alpha (bleu nuit, violet, cyan). Le board s'ouvre DANS la page, dans un coin ; la sphere
   se pousse dans la place libre (constellation.js lit .aboard). Voir board/boards.js. */
#alpha-boards{position:fixed;inset:0;pointer-events:none;z-index:4}
@property --aboard-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes aboard-tourne{to{--aboard-a:360deg}}
.aboard{position:fixed;display:flex;flex-direction:column;border-radius:16px;pointer-events:auto;color:#e9e6f2;
  font:13px/1.45 system-ui,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,rgba(14,18,48,.9),rgba(8,10,30,.94));
  box-shadow:0 0 0 1px rgba(160,140,255,.55),0 0 18px rgba(162,125,255,.5),0 0 40px rgba(125,240,184,.16),inset 0 0 30px rgba(122,162,255,.12);
  transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease;backdrop-filter:blur(6px)}
.aboard::before{content:"";position:absolute;inset:-2px;border-radius:18px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--aboard-a),#7aa2ff,#a27dff,#7df0b8,#9fd0ff,#a27dff,#7aa2ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:aboard-tourne 6s linear infinite;filter:drop-shadow(0 0 6px rgba(162,125,255,.9))}
.aboard__fils{position:absolute;left:-14px;top:-14px;pointer-events:none;overflow:visible;opacity:.8}
.aboard__haut{display:flex;align-items:center;gap:8px;padding:9px 12px 6px;position:relative;z-index:1;user-select:none}
.aboard__nom{letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:600;color:#cfd8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aboard__qui{color:#9aa3c7;font-size:11px;white-space:nowrap}
.aboard__btns{margin-left:auto;display:flex;gap:5px}
.aboard__btns button{all:unset;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#9aa3c7;border:1px solid rgba(255,255,255,.14);cursor:pointer;font-size:12px}
.aboard__btns button:hover{color:#e8c27a;border-color:#e8c27a}
.aboard__corps{overflow:auto;padding:4px 12px 12px;min-height:0;flex:1;position:relative;z-index:1}
.aboard__tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.aboard__tuile{background:rgba(120,130,200,.12);border:1px solid rgba(160,170,255,.14);border-radius:9px;padding:6px 8px}
.aboard__tuile b{display:block;font-size:17px;color:#fff}
.aboard__tuile span{font-size:10.5px;color:#9aa3c7}
.aboard__ligne{display:flex;gap:8px;align-items:baseline;padding:6px 8px;margin:3px 0;border-radius:8px;background:rgba(120,130,200,.08);border:1px solid rgba(160,170,255,.08)}
.aboard__ligne.nonlu{border-color:rgba(125,240,184,.35)}
.aboard__num{color:#e8c27a;font-weight:700;min-width:16px}
.aboard__txt{flex:1;min-width:0}
.aboard__txt small{display:block;color:#9aa3c7;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aboard__tag{font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:#9aa3c7;white-space:nowrap}
.aboard__note{font-size:11px;color:#7df0b8;margin:0 0 6px}
.aboard__vide{color:#9aa3c7;font-style:italic;padding:8px 0}
.aboard__dock{position:fixed;left:14px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:auto;max-width:60vw}
.aboard__puce{all:unset;border:1px solid rgba(225,185,110,.4);color:#e8c27a;border-radius:999px;padding:4px 11px;cursor:pointer;background:rgba(10,16,40,.9);font:12px system-ui}
.aboard__onglets{position:fixed;left:10px;right:10px;display:flex;gap:6px;overflow-x:auto;pointer-events:auto}
.aboard__onglets button{all:unset;flex:0 0 auto;padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font:13px system-ui;color:#9aa3c7;background:rgba(10,16,40,.88);cursor:pointer}
.aboard__onglets button.on{border-color:#e8c27a;color:#e8c27a}
/* LE CHANTIER (11/10) : chaque ligne s'ouvre au doigt ; le bouton d'une solution demande « Sûr ? » avant d'agir */
.achantier{cursor:pointer}
.achantier.ouvert{border-color:rgba(232,194,122,.45);background:rgba(120,130,200,.14)}
.achantier__voir{display:block;font-style:normal;font-size:11px;color:#e8c27a;margin-top:2px}
.achantier__detail{margin-top:6px}
.achantier__detail p{margin:6px 0;white-space:normal}
.achantier__detail b{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#9fd0ff;margin-bottom:1px}
.achantier .aboard__txt small{white-space:normal}
.achantier__plan{margin:4px 0 6px 18px;padding:0;color:#cfd8ff}
.achantier__btn{all:unset;display:inline-block;margin-top:4px;padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid #7df0b8;color:#7df0b8;font:600 13px system-ui}
.achantier__btn:hover{background:rgba(125,240,184,.12)}
.achantier__btn.arme{border-color:#e8c27a;color:#10131f;background:#e8c27a}
/* LE CAMEMBERT AVEC LES EUROS (11/10) */
.acam{display:flex;gap:12px;align-items:center;margin:2px 0 10px;flex-wrap:wrap}
.acam__svg{width:128px;height:128px;flex:0 0 auto;transform:none;filter:drop-shadow(0 0 8px rgba(130,120,255,.45))}
.acam__t{font:600 4.6px system-ui;fill:#fff;text-anchor:middle}
.acam__s{font:3px system-ui;fill:#9aa3c7;text-anchor:middle}
.acam__leg{flex:1;min-width:170px;display:grid;gap:3px}
.acam__l{display:grid;grid-template-columns:10px 1fr auto auto;gap:6px;align-items:center;font-size:12px}
.acam__l i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px currentColor}
.acam__l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acam__l b{color:#cfd8ff;font-weight:600}
.acam__l em{font-style:normal;color:#e8c27a;min-width:64px;text-align:right}
.aboard__eur{color:#e8c27a !important;white-space:normal !important}
/* MON RAPPORT (11/10) */
.arap{margin:8px 0;padding:7px 9px;border-radius:9px;background:rgba(120,130,200,.08);border:1px solid rgba(160,170,255,.1)}
.arap__t{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#9fd0ff;margin-bottom:4px}
.arap__l{margin:3px 0;font-size:12.5px}
.arap__l i{color:#9aa3c7;font-style:normal}
.arap__l.rouge{color:#ff9b9b}
.arap__barre{display:inline-block;width:70px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);vertical-align:middle;margin:0 4px;overflow:hidden}
.arap__barre span{display:block;height:100%;background:linear-gradient(90deg,#7aa2ff,#7df0b8)}
/* LE MUR « N'IMPORTE QUOI » (12/10) : texte, graphique, image, video, proposition */
.amt__texte{white-space:pre-wrap;font-size:13px;line-height:1.5;margin:4px 0 6px}
.amt__courbe{width:100%;height:120px;display:block}
.amt__img{width:100%;border-radius:10px;display:block}
.amt__video{width:100%;border-radius:10px;background:#000;display:block}
.amt__btn{all:unset;cursor:pointer;display:inline-block;margin:6px 6px 0 0;padding:6px 12px;border-radius:999px;border:1px solid #7df0b8;color:#7df0b8;font:600 12.5px system-ui}
.amt__btn.or{border-color:#e8c27a;color:#e8c27a}
.amt__btn.non{border-color:#ff9b9b;color:#ff9b9b}
.amt__oui{margin-top:6px}
/* YOUTUBE SUR LE MUR (13/10, maquette v2) : le lecteur (hors du board, voir boards.js) et la liste qu'on fait glisser */
.amt__ytplace{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000}
#alpha-yt{position:fixed;inset:0;pointer-events:none;z-index:5}
.amt__ytcadre{position:fixed;border-radius:10px;overflow:hidden;pointer-events:auto;background:#000}
.amt__ytcadre iframe{border:0;width:100%;height:100%;display:block}
.amt__yttitre{margin:8px 0 1px;font-weight:600;font-size:14px}
.amt__ytchaine{color:#9aa3c7;font-size:12px;margin:0 0 2px}
.amt__ytliste{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.amt__ytliste>b{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#9fd0ff;margin-bottom:6px}
.amt__ytv{display:flex;gap:10px;padding:6px;margin:0 0 6px;border-radius:10px;background:rgba(120,130,200,.07);border:1px solid transparent;cursor:pointer}
.amt__ytv.on{border-color:rgba(232,194,122,.5);background:rgba(232,194,122,.08)}
.amt__ytmini{position:relative;flex:0 0 150px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111}
.amt__ytmini img{width:100%;height:100%;object-fit:cover;display:block}
.amt__ytmini i{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.82);color:#fff;font:600 11px system-ui;font-style:normal;padding:1px 5px;border-radius:4px}
.amt__ytmini em{position:absolute;left:5px;top:5px;background:#e8c27a;color:#10131f;font:700 11px system-ui;font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.amt__ytinfo{min-width:0;flex:1}
.amt__ytinfo p{margin:0 0 3px;font-weight:600;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.amt__ytinfo span{display:block;color:#9aa3c7;font-size:11.5px}
.amt__ytinfo small{display:block;color:#7f88ad;font-size:11px}
@media (max-width:700px){.amt__ytmini{flex-basis:118px}}
/* 13/10 (n°10) : la liste des notifications */
.aboard__ligne .aboard__btns{margin-left:auto;display:flex;gap:5px;flex:0 0 auto}
.aboard__ligne .aboard__btns button{border:1px solid rgba(255,255,255,.18);background:transparent;color:#cfd8ff;border-radius:8px;padding:3px 7px;cursor:pointer}
.aboard__tout{display:block;width:100%;margin-top:10px;border-radius:10px;padding:8px;border:1px solid rgba(255,155,155,.4);background:rgba(255,155,155,.08);color:#ffb3b3;cursor:pointer}
/* 15/10 (Lionel) : SUR LE TELEPHONE, « agrandir » = TOUT l'ecran, par-dessus le nom d'Alpha, le chat et ses boutons */
body.aboard-telplein #alpha-boards{z-index:1500}
body.aboard-telplein #alpha-yt{z-index:1501}
.aboard--telplein{border-radius:0;box-shadow:none;background:#070a1c;transition:none}
.aboard--telplein::before,.aboard--telplein .aboard__fils{display:none}
.aboard--telplein .aboard__haut{padding-top:max(10px,env(safe-area-inset-top,0px))}
.aboard--telplein .aboard__btns button{width:34px;height:34px;font-size:15px}
/* YouTube en grand : la video SEULE sur fond noir ; une fine barre AU-DESSUS (jamais sur la video) */
.aboard--ytplein{background:#000}
.aboard--ytplein .aboard__corps{padding:0;overflow:hidden}
.ayt-plein{display:flex;flex-direction:column;height:100%}
.ayt-barre{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:max(6px,env(safe-area-inset-top,0px)) 10px 6px;min-height:40px}
.ayt-titre{flex:1;min-width:0;color:#e9e6f2;font:600 13px system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:ayt-part 1s ease 4s forwards}
.ayt-titre--revient{animation:ayt-revient 5s ease forwards}
.ayt-titre--revient2{animation:ayt-revient2 5s ease forwards}
@keyframes ayt-part{to{opacity:0}}
@keyframes ayt-revient{0%,80%{opacity:1}100%{opacity:0}}
@keyframes ayt-revient2{0%,80%{opacity:1}100%{opacity:0}}
.ayt-btns{display:flex;gap:8px;flex:0 0 auto}
.ayt-btns button{all:unset;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.12);font-size:16px;cursor:pointer}
.ayt-ecran{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ayt-place{width:100%;max-height:100%;border-radius:0}
@media (orientation:landscape){.ayt-place{width:auto;height:100%;max-width:100%}}
body.aboard-telplein .amt__ytcadre{border-radius:0}
/* 15/10 : l'article du blog sur le board -- le texte entier, puis Publier / Modifier */
.apub__titre{margin:4px 0 8px;font:600 16px/1.35 Georgia,"Palatino Linotype",serif;color:#f2dcab}
.apub__texte{font-size:14px;line-height:1.6}
.apub__bas{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.apub__arme{background:#7df0b8;color:#10131f}
.apub__q{margin:0 0 6px;color:#cfd8ff}
.apub__txt{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid rgba(232,194,122,.45);background:rgba(8,10,30,.9);color:#e9e6f2;padding:8px;font:14px system-ui}
.apub__rien{margin:8px 0 0;font-size:11px;color:#9aa3c7}
/* 15/10 : un mail se touche pour l'ouvrir ; les traders sur le board */
.amail{cursor:pointer}
.amail:active{background:rgba(232,194,122,.12)}
.atrad{margin:4px 0 14px;padding:8px;border-radius:12px;background:rgba(120,130,200,.06);border:1px solid rgba(160,170,255,.1)}
.atrad--focus{border-color:rgba(232,194,122,.55)}
.atrad__nom{margin:0 0 6px;font:600 15px Georgia,"Palatino Linotype",serif;color:#f2dcab}
.atrad__t{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#9fd0ff;margin:8px 0 2px}
/* YouTube en grand, telephone couche : la video prend toute la hauteur, les boutons passent sur le cote */
@media (orientation:landscape){
  .aboard--ytplein .ayt-plein{flex-direction:row-reverse}
  .aboard--ytplein .ayt-barre{flex-direction:column;justify-content:flex-start;min-height:0;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 8px 4px}
  .aboard--ytplein .ayt-titre{display:none}
  .aboard--ytplein .ayt-btns{flex-direction:column}
  .aboard--ytplein .ayt-ecran{height:100%}
}

/* 11/11 (Lionel : le gros doigt touche la ligne au lieu de la corbeille) : 🔊 et 🗑 des notifications font 44 px,
   bien ecartes ; le coin des boutons ne laisse plus passer le toucher vers la ligne (boards.js). */
.aboard .aboard__btns button[data-nt^="notif_"]{width:44px;height:44px;min-width:44px;font-size:20px;padding:0;display:grid;place-items:center;border-radius:10px}
.aboard .aboard__ligne[data-notif]{align-items:center}
.aboard .aboard__ligne[data-notif] .aboard__btns{gap:12px;padding-left:10px}