/* LA MAISON : jetons, six fonds, en-tête et compte, repris tels quels de
   illuminati/web/studio.css (lignes 10 à 196) le 19/10/2026. Chaque outil porte sa copie :
   il n'y a pas de feuille de thème commune. Ce qui est propre à Baba est dans studio.css. */

/* ============================== L'ENCRE SECONDAIRE, ET POURQUOI ELLE DEPEND DU FOND
   Mesure du 13 septembre 2026, faite en PHOTOGRAPHIANT le fond sous chaque mot.

   Ces feuilles ecrivaient leur second niveau de texte en blanc dilue, avec douze
   valeurs d'opacite differentes pour la meme intention (.5, .55, .6, .62, .66, .68,
   .7, .72, .76, .78, .8, .86). Sur l'INDIGO, ce levier n'existe pas : le fond rend
   4,73:1 au blanc PUR la ou le halo l'eclaircit, il ne reste donc rien a diluer, et
   un blanc a 62 % tombait a 2,5:1, la moitie du seuil AA. Sur le NOIR, au contraire,
   le blanc part de 15,6:1 et la dilution est un vrai niveau de lecture.

   D'ou un seul jeton, --sur-2, que CHAQUE FOND definit pour lui-meme : blanc plein
   sur l'indigo, blanc a 72 % sur le noir. La hierarchie sur l'indigo se fait a la
   taille et a la graisse, que ces feuilles font deja varier de 11,5 a 14 px et de
   400 a 660.

   LE VERRE DES PILULES S'ASSOMBRIT SUR L'INDIGO, meme raison : un voile pose sur un
   fond de clarte moyenne doit jouer la TEINTE ou l'OMBRE, jamais la clarte. Un voile
   blanc a 16 % faisait tomber le blanc pose dessus a 3,5:1 : la pilule se detachait
   du fond en rendant son propre texte illisible. Sur le noir le voile reste clair.
   --verre porte la couleur du voile, --verre-a son opacite au repos, --verre-b au
   survol. */

:root{
  --sur-2:#FFFFFF; --verre:20 22 51; --verre-a:.22; --verre-b:.34;
  /* L'INDIGO A ETE ASSOMBRI le 13 septembre 2026, de #5A63E8 a #4A52D4, et les
     halos de blanc sont passes de 20 et 14 % a 12 et 8 %. La mesure a ete faite en
     PHOTOGRAPHIANT le fond sous chaque texte, jamais en lisant la feuille de style :
     sur l'ancien indigo, du blanc PUR ne donnait que 4,79:1 en plein fond et 3,00:1
     la ou les deux halos se croisent, contre un seuil AA de 4,5. Aucune opacite de
     blanc ne pouvait rattraper cela ; seul le fond pouvait bouger. C'est la valeur
     que le site public avait deja prise le matin meme : la maison n'a qu'un indigo.

     LES DEUX GRIS ONT SUIVI. --faint ne faisait que 2,58:1 sur une carte blanche, et
     --dim tombait a 4,34:1 sur --neu. Un gris de texte se mesure sur la surface la
     PLUS CLAIRE ou il se pose, pas sur sa valeur nominale. */
  --bleu:#4A52D4;
  --encre:#141633; --dim:#545775; --faint:#666A8C;
  --sur:#FFFFFF; --surv:255 255 255; --sur-on:#2E3596;
  --acc:#4A52D4; --acc-dk:#3C44BE; --acc-soft:#EEF0FE; --acc-line:#C9CDF7;
  --card:#FFFFFF; --card-2:#F8F9FE; --line:#EDEEF8; --line-2:#E0E2F2;
  --neu:#F1F2FC;
  --ok:#1E6A40; --warn:#8A5A22; --warn-bg:#FAEEDD;
  --halo:255 255 255;
}
body[data-fond="noir"]{--bleu:#0B0B0E; --sur-on:#0B0B0E; --sur-2:rgb(var(--surv)/.72); --verre:255 255 255; --verre-a:.10; --verre-b:.18}
/* DEUX FONDS ETOILES, depuis le 13 septembre 2026, les memes que sur l'accueil.
   MINUIT est presque noir et bleute, avec une lueur bleue en haut ; STAR INDIGO est
   l'indigo ci-dessus, tel quel, et n'a donc aucune ligne. Le ciel des deux, etoiles
   et meteores, vit dans identite/web/ciel.js et se pose tout seul sur « data-fond ». */
body[data-fond="nuit"]{--bleu:#05060F; --sur-on:#0B0B2A; --sur-2:rgb(var(--surv)/.72); --verre:255 255 255; --verre-a:.10; --verre-b:.18; --halo:120 140 255}

/* DEUX FONDS CLAIRS, depuis le 14 septembre 2026, et la maison en compte six. Ils
   sont nes du plan media de Furies : une grille dense de champs et de nombres alignes
   se lit mal en blanc sur de la couleur. Une seule declaration suffit, et c'est tout
   l'interet des jetons : « --sur » devient l'encre sombre, « --surv » sa valeur brute,
   « --verre » le voile gris. Tout ce que la feuille dessine en blanc sur la couleur se
   dessine alors en sombre sur le blanc. Les etoiles du fond etoile sont noircies par
   ciel.js, qui est partage. */
body[data-fond="blanc"],body[data-fond="blanc-etoile"]{
  --bleu:#FFFFFF; --sur-on:#FFFFFF;
  --sur:#141633; --sur-2:#545775; --surv:20 22 51;
  --verre:20 22 51; --verre-a:.035; --verre-b:.07; --halo:20 22 51}
/* Les mots-symboles de la maison sont blancs : sur un fond clair ils disparaitraient.
   On les inverse plutot que de doubler chaque fichier. */
body[data-fond="blanc"] .tb-mk img,body[data-fond="blanc-etoile"] .tb-mk img,
body[data-fond="blanc"] .tb-logo img,body[data-fond="blanc-etoile"] .tb-logo img{
  filter:invert(1)}
/* Ce qui etait blanc sur la couleur doit se detacher sur le blanc. */
body[data-fond="blanc"] .ac-bar,body[data-fond="blanc-etoile"] .ac-bar{
  box-shadow:0 18px 44px -28px rgba(10,12,40,.45),0 0 0 1px rgba(20,22,51,.1)}
body[data-fond="blanc"] .ac-menu,body[data-fond="blanc-etoile"] .ac-menu{
  background:#fff;
  box-shadow:0 30px 70px -30px rgba(10,12,40,.45),0 0 0 1px rgba(20,22,51,.1)}
body[data-fond="blanc"] .ac-o:hover,body[data-fond="blanc-etoile"] .ac-o:hover{
  background:rgba(20,22,51,.05)}
body[data-fond="blanc"] .pal-c.on,body[data-fond="blanc-etoile"] .pal-c.on{
  border-color:#141633}
/* La pastille des initiales est un disque BLANC sur la couleur : sur un fond clair,
   il disparait et la lettre flotte. Elle prend le gris neutre de la maison. */
body[data-fond="blanc"] .ac-mk,body[data-fond="blanc-etoile"] .ac-mk{
  background:var(--neu)}

.pal-c.clair{box-shadow:inset 0 0 0 1px rgba(20,22,51,.3)}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font:14px/1.5 Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bleu);
  background-image:
    radial-gradient(1100px 720px at 66% -8%,rgb(var(--halo)/.12),transparent 62%),
    radial-gradient(820px 560px at 0% 104%,rgb(var(--halo)/.08),transparent 60%);
  background-attachment:fixed;color:var(--sur);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

.app{height:100%;display:flex;flex-direction:column;min-height:0}

/* ------------------------------------------------------------------- en-tete */
.topbar{flex:none;display:flex;align-items:center;gap:14px;padding:22px 30px 10px;
  position:relative;z-index:20}
/* Le mot-symbole Tags est le seul chemin de retour : il n'y a pas de rail, deux
   ecrans ne justifiant pas une colonne de navigation permanente. */
/* LA CIBLE FAIT AU MOINS 24 px DE HAUT, regle AA de WCAG 2.2 (2.5.8). Le
   mot-symbole ne faisait que 22 px : son image en fait 23, et le remplissage
   vertical du lien etait a zero. Un logo cliquable est un bouton. */
.tb-mk{flex:none;line-height:0;padding:4px 6px;border:0;background:none;cursor:pointer;
  border-radius:10px;transition:opacity .14s;min-height:26px;box-sizing:border-box;align-items:center;display:flex}
.tb-mk:hover{opacity:.7}
.tb-mk img{height:23px;width:auto;object-fit:contain;display:block}
.tb-sp{flex:1}
/* Le logo du produit est le retour à son accueil : il est donc CLIQUABLE, et il porte
   les attributs d'un bouton sans en avoir l'aspect. */
.tb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin-top:5px;line-height:0;border:0;background:none;padding:6px 10px;
  cursor:pointer;border-radius:12px;transition:background .14s,opacity .14s;
  font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-size:19px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  color:rgb(var(--surv)/.94)}
.tb-logo:hover{background:rgb(var(--surv)/.12)}
.tb-logo:focus-visible{outline:2px solid var(--sur);outline-offset:2px}
.tb-logo img{height:22px;width:auto;object-fit:contain;display:block}
/* Le mot-symbole Tags SORT de l'outil : c'est un lien, pas un bouton d'écran. */
.tb-mk{display:flex;align-items:center;text-decoration:none;min-height:26px;box-sizing:border-box;align-items:center;display:flex}
@media (max-width:1180px){.tb-logo{display:none}}

.pal{position:relative;display:flex;align-items:center;height:34px;flex:none}
.pal-b{width:26px;height:26px;border-radius:50%;border:2px solid rgb(var(--surv)/.7);
  cursor:pointer;padding:0;flex:none;
  background:radial-gradient(circle at 74% 30%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 62% 74%,#fff 0 .6px,transparent 1.1px),conic-gradient(#4A52D4 0 25%,#0B0B0E 25% 50%,#05060F 50% 75%,#4A52D4 75% 100%)}
.pal-l{position:absolute;left:-6px;top:-5px;display:flex;align-items:center;gap:5px;
  padding:5px 7px;border-radius:999px;background:rgba(8,10,36,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);opacity:0;transform:scale(.82);
  transform-origin:left center;pointer-events:none;
  /* Sortie exponentielle, SANS REBOND, comme dans Atlas : le dépassement en fin
     de course est une coquetterie qui se remarque, et sur une étiquette qui
     apparaît au survol elle se remarque cent fois par séance. */
  transition:opacity .16s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.pal:hover .pal-l,.pal:focus-within .pal-l{opacity:1;transform:scale(1);pointer-events:auto}
.pal:hover .pal-b,.pal:focus-within .pal-b{opacity:0}
.pal-c{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;
  cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .12s}
.pal-c:hover{transform:scale(1.18)}
.pal-c.on{border-color:#fff}

/* -------------------------------------------------------------------- compte */
#tb-user{position:relative;flex:none}
.tb-r{display:flex;align-items:center;gap:11px;padding:6px 8px 6px 14px;
  border-radius:999px;user-select:none;cursor:pointer;transition:background .14s}
.tb-r:hover{background:rgb(var(--surv)/.16)}
.tb-r.open{background:rgb(var(--surv)/.24)}
.who{text-align:right;line-height:1.25}
.who b{display:block;font-size:13px;font-weight:640;color:var(--sur)}
.who span{display:block;font-size:11px;color:var(--sur-2)}
/* L'encadre blanc autour de la photo, repris d'Atlas : c'est lui qui detache le
   portrait du fond de couleur. */
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:660;overflow:hidden;position:relative;
  background:#fff;color:var(--acc-dk);
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(var(--surv)/.3)}
.av img{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1}
.av span{display:none;grid-area:1/1}
.av.ini span{display:block}
.av.lg{width:46px;height:46px;font-size:15px}
.av.petit{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)}
.chev{width:14px;height:14px;stroke:rgb(var(--surv)/.7);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.tb-r.open .chev{transform:rotate(180deg)}

.mn{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:246px;
  background:#fff;border-radius:18px;padding:7px;
  box-shadow:0 30px 70px -30px rgba(6,8,30,.6),0 0 0 1px var(--line)}
.mn-h{display:flex;align-items:center;gap:12px;padding:10px 12px 12px}
.mn-h b{display:block;font-size:13.5px;font-weight:650;color:var(--encre)}
.mn-h span{display:block;font-size:11.5px;color:var(--faint)}
.mn-i{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;font-size:13px;
  font-weight:560;color:var(--encre);text-align:left;transition:background .12s}
.mn-i:hover{background:var(--card-2)}
.mn-i svg{width:16px;height:16px;flex:none;stroke:var(--faint);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mn-i:hover svg{stroke:var(--acc)}
.mn-sep{height:1px;background:var(--line);margin:5px 4px}


/* ------------------------------------------------------------------ l'invite
   Reprise telle quelle d'Illuminati (studio.css, lignes 205 à 296 et 411 à 432) le 19/10/2026 :
   la même entrée dans les deux outils, décision de Fabrice. */
.ac-h{margin:0;text-align:center;font-size:clamp(24px,2.6vw,36px);font-weight:300;
  letter-spacing:-.015em;line-height:1.16;color:var(--sur)}
.hint{font-size:11.5px;color:var(--sur-2);line-height:1.5;text-align:center;margin:0}
.acc{display:flex;flex-direction:column;align-items:center;gap:26px;flex:1;
  justify-content:center;width:100%}

/* ------------------------------------------------------------------- accueil */
.ac-bar{display:flex;align-items:center;padding:7px 7px 7px 5px;border-radius:999px;
  background:#fff;width:min(700px,100%);box-sizing:border-box;
  box-shadow:0 24px 60px -32px rgba(6,8,30,.9)}
.ac-f{flex:1;position:relative;min-width:0;padding:0}
.ac-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  box-sizing:border-box;border:0;background:none;cursor:pointer;text-align:left;
  padding:9px 30px 9px 15px;border-radius:999px;font:inherit;transition:background .14s}
.ac-t:hover,.ac-f.ouv .ac-t{background:var(--card-2)}
/* 11 px ET NON 9,5 : c'est l'etiquette du selecteur de campagne, la premiere
   chose qu'on lit en entrant dans l'outil. */
.ac-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.ac-val{font-size:14.5px;font-weight:520;color:var(--encre);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-val.vide{color:var(--faint);font-weight:400}
.ac-ch{position:absolute;right:12px;top:50%;margin-top:-7px;width:14px;height:14px;
  fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s;pointer-events:none}
.ac-f.ouv .ac-ch{transform:rotate(180deg)}
.ac-sep{width:1px;height:38px;background:var(--line);flex:none}
.ac-go{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--bleu);color:var(--sur);display:grid;place-items:center;margin-left:6px;
  transition:filter .14s,opacity .14s}
.ac-go:hover{filter:brightness(1.2)}
.ac-go:disabled{opacity:.34;cursor:default;filter:none}
.ac-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.ac-menu{position:absolute;z-index:40;border-radius:20px;padding:8px;
  max-height:min(44vh,300px);overflow-y:auto;overscroll-behavior:contain;
  background:color-mix(in srgb,var(--bleu) 72%,#08080C);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
  flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.ac-menu{display:flex;top:calc(100% + 12px);left:6px;
  min-width:min(360px,92vw);max-width:min(460px,92vw)}
.ac-f:last-of-type .ac-menu{left:auto;right:6px}
.ac-menu::-webkit-scrollbar{width:8px}
.ac-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);border-radius:99px;border:2px solid transparent;
  background-clip:content-box}
.ac-o{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:none;border-radius:14px;padding:10px 14px 10px 10px;cursor:pointer;
  font:inherit;transition:background .12s}
.ac-o:hover{background:rgba(255,255,255,.1)}
.ac-o[aria-selected="true"]{background:rgba(255,255,255,.13)}
.ac-mk{width:26px;height:26px;flex:none;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#2E3596;font-size:10px;font-weight:700}
.ac-ot{display:flex;align-items:baseline;gap:14px;min-width:0;flex:1}
.ac-ot b{font-size:14px;font-weight:500;color:var(--sur);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-ot i{font-style:normal;font-size:12.5px;color:var(--sur-2);line-height:1.35;
  margin-left:auto;white-space:nowrap;flex:none}
/* UNE RANGEE A TROIS INFORMATIONS : son nom, sa marque et son etat. Ces trois
   reglages vivaient sous la barre de recherche, retiree le 17 septembre 2026 ; ils
   servent maintenant le menu Campagne, qui affiche la marque des qu'aucun annonceur
   n'est choisi. Sur une rangee a deux informations ils n'ont rien a faire : la
   pastille d'etat s'y etalait sur toute la largeur. */
.ac-o3 .ac-ot{gap:10px}
.ac-o3 .ac-ot b{flex:none;max-width:52%}
.ac-o3 .ac-ot i:first-of-type{margin-left:0;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis}
/* La pastille d'etat. Elle a grossi le jour ou « A confirmer » est devenu « Periode a
   confirmer » : un libelle deux fois plus long dans une capsule dessinee pour deux mots.
   On enleve donc la majuscule forcee et l'interlettrage, qui coutent le plus de largeur,
   et on resserre le reste. Elle redevient une etiquette, pas un bouton. */
.et{font-style:normal;font-size:9.5px;font-weight:650;letter-spacing:.01em;
  padding:2px 7px;border-radius:999px;flex:none;
  margin-left:auto;white-space:nowrap;line-height:1.5}
.et.encours{background:rgba(126,231,178,.18);color:#8FF0C0}
.et.terminee{background:rgba(255,255,255,.13);color:var(--sur-2)}
.et.attente{background:rgba(255,214,148,.16);color:#FFD694}


.seg{display:inline-flex;flex-wrap:wrap;background:var(--neu);border-radius:999px;
  padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:8px 15px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:620;color:var(--dim);transition:.14s}
.seg button.on{background:#fff;color:var(--acc-dk);box-shadow:0 2px 8px -2px rgba(10,12,40,.24)}
/* Le filtre d'annee de l'accueil. Le segment de base est peint pour une carte claire ;
   l'accueil, lui, est sur le fond de la maison, d'ou le verre et l'encre de surface,
   exactement comme le bouton « Rafraichir » qui vit deux lignes plus bas. L'etat actif
   prend --sur-on et NON un fond clair : c'est le jeton qui porte l'encre sur blanc. */
.seg-an{background:rgb(var(--verre)/var(--verre-a));
  border:1px solid rgb(var(--surv)/.18)}
.seg-an button{color:var(--sur-2)}
.seg-an button:hover{color:var(--sur)}
/* LA PILULE ACTIVE PREND LE COUPLE `--sur` / `--sur-on`, ET NON LE BLANC EN DUR.
   Defaut trouve par `identite/controle-outils.py` le 14 octobre 2026, le jour meme ou
   ce filtre est ne : sur les deux fonds clairs de la maison, `--sur-on` VAUT BLANC, si
   bien que « Toutes » s'ecrivait en blanc sur un fond mesure a 1,48:1 pour un seuil de
   4,50. Le couple, lui, se retourne tout seul sur les quatre fonds : pilule blanche a
   encre indigo sur l'indigo, pilule sombre a encre blanche sur le blanc. */
.seg-an button.on{background:var(--sur);color:var(--sur-on);box-shadow:none}
.dates{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);
  flex-wrap:wrap}
.hint.pied{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:center}
.rafr{display:inline-flex;align-items:center;gap:6px;border:1px solid rgb(var(--surv)/.24);
  background:rgb(var(--verre)/var(--verre-a));color:var(--sur-2);cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:620;padding:5px 12px 5px 9px;border-radius:999px;
  transition:.14s}
.rafr:hover{background:rgb(var(--verre)/var(--verre-b));color:var(--sur);
  border-color:rgb(var(--surv)/.42)}
.rafr:disabled{cursor:default;opacity:.7}
.rafr svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* L'avatar de la marque dans les menus : borné à sa pastille (studio.css d'Illuminati, l. 762). */
.ac-mk.img{overflow:hidden;padding:2px;box-sizing:border-box}
.ac-mk.img img{width:100%;height:100%;object-fit:contain;display:block}