/* BABA STUDIO · LES ÉCRANS DE LA MAISON (accueil de l'outil et éditeur).
   La direction des autres outils : le fond de couleur porte l'écran, le travail vit dans
   des cartes blanches. Les jetons viennent de maison.css ; rien n'est inventé ici hors des
   trois couleurs de statut d'un bilan. */

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}
html,body{height:100%;overflow:hidden}
.app{height:100%;display:flex;flex-direction:column;min-height:0}
button,input,select,textarea{font:inherit;color:inherit}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.baba-mot{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--sur);
  text-decoration:none;padding:4px 12px;border-radius:999px;white-space:nowrap}
.baba-mot i{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:21px;letter-spacing:0}

/* ------------------------------------------------------------------ les écrans */
.ecran{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:22px;padding:14px 30px 70px;overflow-y:auto;scrollbar-width:none}
.ecran::-webkit-scrollbar{display:none}
body[data-ecran="accueil"] .ecran{overflow:visible;justify-content:center;padding:18px 30px 96px}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.02em;margin:0}
.logo-rond{width:36px;height:36px;border-radius:50%;background:#fff;object-fit:contain;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--acc-dk);overflow:hidden;flex:none}
.logo-rond.grand{width:60px;height:60px;font-size:16px;box-shadow:0 0 0 3px rgb(var(--surv)/.25)}

/* ------------------------------------------------------------------ la campagne */
.fiche{width:min(1120px,100%);display:flex;flex-direction:column;gap:16px}
.retour-verre{align-self:flex-start;border:1px solid rgb(var(--surv)/.22);background:rgb(var(--verre)/var(--verre-a));color:var(--sur);
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:620;cursor:pointer}
.retour-verre:hover{background:rgb(var(--verre)/var(--verre-b))}
.fiche-tete{display:flex;align-items:center;gap:18px;margin:6px 0 8px;color:var(--sur)}
.fiche-tete h1{font-size:clamp(26px,3vw,36px);color:var(--sur)}
.fiche-tete p{margin:4px 0 0;font-size:13px;color:var(--sur-2)}
.carte{background:var(--card);color:var(--encre);border-radius:24px;padding:24px 26px;box-shadow:0 30px 70px -40px rgba(6,8,30,.55);display:flex;flex-direction:column;gap:12px}
.carte h2{font-size:19px;color:var(--encre)}
.aide{color:var(--dim);font-size:13px;margin:0}
.vagues{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:4px}
.vague{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:16px 18px;border-radius:18px;border:1.5px solid var(--line-2);
  background:var(--card-2);color:var(--encre);cursor:pointer;transition:border-color .15s,transform .12s,background .15s}
.vague:hover{border-color:var(--acc);background:var(--acc-soft);transform:translateY(-2px)}
.vague:active{transform:translateY(0)}
.vague b{font-size:16px;font-weight:700}
.vague span{font-size:12.5px;color:var(--dim)}
.vague i{font-style:normal;font-size:11.5px;color:var(--warn);margin-top:4px}
.vague.premiere{border-color:var(--acc);background:var(--acc-soft)}
.bilans{display:flex;flex-direction:column;gap:8px}
.bilan-l{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid var(--line-2);border-radius:16px;
  color:var(--encre);text-decoration:none;transition:background .14s}
.bilan-l:hover{background:var(--card-2)}
.bilan-l b{display:block;font-size:14.5px}
.bilan-l .sous{font-size:12px;color:var(--faint)}


/* Les trois stades d'un bilan. La couleur double un mot, jamais seule. */
.statut{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:999px;white-space:nowrap}
.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.statut.brouillon{background:var(--neu);color:var(--dim)}
.statut.valide{background:#E3F3E9;color:var(--ok)}
.compte-bilans{font-size:12px;font-weight:650;color:var(--dim)}


.bouton{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);
  background:#fff;color:var(--encre);font-weight:650;font-size:13px;text-decoration:none;cursor:pointer;transition:background .14s,transform .1s;white-space:nowrap}
.bouton:hover{background:var(--card-2)}
.bouton:active{transform:translateY(1px)}
.bouton.plein{background:var(--acc);border-color:var(--acc);color:#fff}
.bouton.plein:hover{background:var(--acc-dk)}
.bouton.petit{min-height:32px;padding:0 12px;font-size:12.5px}
.bouton[disabled]{opacity:.45;cursor:not-allowed}
.bouton.danger{color:#A12A2A}

.lien-client{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--card-2)}
.lien-client code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--dim)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--encre);color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);z-index:80}
.toast.erreur{background:#A12A2A}

@media (max-width:760px){
  .ac-bar{flex-direction:column;border-radius:24px;align-items:stretch}
  .ac-sep{width:auto;height:1px}
  .ac-go{align-self:flex-end;margin:6px}
  .ecran{padding:10px 14px 60px}
  .carte{padding:20px 18px}
}
.baba-mot{text-transform:none}
.tb-logo img{height:20px}

/* ------------------------------------------------------------------ le rapport Looker */
.lk-pose{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}
.lk-pose a{color:var(--acc-dk,#3C44BE);font-weight:650;text-decoration:none}
.lk-pose a:hover{text-decoration:underline}
.lien-btn{border:0;background:none;padding:4px 2px;font:inherit;font-size:12.5px;font-weight:650;color:var(--dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-btn:hover{color:var(--encre)}
.lk-choix{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lk-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line-2,#E6E7F2);background:#fff;color:var(--encre);cursor:pointer;transition:border-color .14s,background .14s}
.lk-c:first-child{border-color:var(--acc,#4A52D4)}
.lk-c:hover{border-color:var(--acc,#4A52D4);background:var(--acc-soft,#EEF0FE)}
.lk-c b{font-size:13.5px}
.lk-c span{font-size:11.5px;color:var(--faint)}
.lk-autre{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:10px}
.lk-champ{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:650;color:var(--dim)}
.lk-champ input{height:36px;border:1px solid var(--line-2,#E6E7F2);border-radius:10px;padding:0 10px;font:inherit;font-size:13px;color:var(--encre);background:#fff;min-width:0}
.lk-ok{height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--encre);color:#fff;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.lk-pied{display:flex;gap:14px;margin-top:6px}
@media (max-width:760px){.lk-autre{grid-template-columns:1fr}}

/* Un brouillon se supprime depuis la liste ; un bilan validé, jamais (le client a pu le lire). */
.bilan-ligne{display:flex;align-items:center;gap:8px}
.bilan-ligne .bilan-l{flex:1;min-width:0}
.suppr{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--faint);cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.suppr:hover{color:#A12A2A;border-color:#E8B4B4;background:#FDF3F3}

/* ------------------------------------------------------------------ la campagne : une feuille
   Le titre se pose sur la couleur, centré ; tout le travail est sur UNE feuille blanche,
   en sections séparées d'un filet. L'entrée est en haut de la feuille : le nouveau bilan. */
.fiche{width:min(800px,100%)}
.fiche-tete{flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0 0 8px}
.fiche-tete h1{font-family:Figtree,sans-serif;font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:-.015em}
.fiche-tete h1 b{font-weight:650}
.fil{margin:0;font-size:12.5px;color:var(--sur-2);letter-spacing:.02em}
.feuille{background:var(--card);color:var(--encre);border-radius:26px;box-shadow:0 30px 70px -40px rgba(6,8,30,.6);overflow:hidden}
.f-sec{padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.f-sec+.f-sec{border-top:1px solid var(--line)}
.f-sec h2{font-family:Figtree,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--encre)}
.f-tete{padding:28px 28px 26px;gap:10px}
.f-tete h2{font-size:20px}
.f-sec .vagues{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:4px}
.f-sec .vague{background:#fff;border:1.5px solid var(--line-2);border-radius:16px}
.f-sec .vague:hover{border-color:var(--acc);background:var(--acc-soft)}
.f-sec .vague.premiere{border-color:var(--acc);background:var(--acc);color:#fff}
.f-sec .vague.premiere span{color:rgb(255 255 255/.82)}
.f-sec .vague.premiere i{color:#FFE2B0}
/* Le pied : deux réglages de la campagne, en lignes, plus calmes que ce qui précède. */
.f-pied{background:var(--card-2);padding:18px 28px;gap:14px}
.f-rang{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:start}
.f-rang h3{font-family:Figtree,sans-serif;font-size:12.5px;font-weight:650;color:var(--dim);padding-top:3px}
.f-rang .lien-client{background:#fff;padding:8px 10px}
@media (max-width:760px){.f-sec{padding:20px 18px}.f-rang{grid-template-columns:1fr;gap:6px}}

/* ------------------------------------------------------------------ la liste des campagnes
   Copiée de Furies (studio.css, .ca-w et suivantes), à la demande de Fabrice du 20/10/2026 :
   le même écran dans les deux outils, mêmes mesures, même aplomb de dix-huit pixels. */
:root{--chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
body[data-fond="blanc"],body[data-fond="blanc-etoile"]{--chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23141633' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.ac-act{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ac-plus{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:560;padding:10px 16px 10px 12px;
  border-radius:999px;background:rgb(var(--verre)/var(--verre-a));color:var(--sur);transition:.14s}
.ac-plus:hover{background:rgb(var(--verre)/var(--verre-b));transform:translateY(-1px)}
.ac-plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.ca-w{width:min(1040px,100%);display:flex;flex-direction:column;gap:20px}
.pl-t{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:16px}
.pl-r{display:flex;flex-wrap:wrap;gap:8px;justify-self:start}
.pl-tt{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.pl-ti{margin:0;color:var(--sur);font:inherit;font-size:clamp(20px,2.4vw,27px);font-weight:600;letter-spacing:-.015em;text-align:center;line-height:1.2}
.pl-qui{margin:0;font-size:14.5px;font-weight:500;color:var(--sur-2);text-align:center;letter-spacing:-.005em}
.rap-t{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  background:rgb(var(--verre)/var(--verre-a));border:1px solid rgb(var(--surv)/.18);color:var(--sur-2);transition:background .14s,color .14s}
.rap-t:hover{background:rgb(var(--verre)/var(--verre-b));color:var(--sur)}
.rech{position:relative;display:flex;align-items:center;gap:9px;padding:0 18px;height:44px;border-radius:999px;background:rgb(var(--verre)/var(--verre-a));
  border:1px solid rgb(var(--surv)/.22);transition:background .15s,border-color .15s}
.rech:focus-within{background:rgb(var(--verre)/var(--verre-b));border-color:rgb(var(--surv)/.4)}
.rech-i{width:16px;height:16px;flex:none;fill:none;stroke:rgb(var(--surv)/.66);stroke-width:2;stroke-linecap:round}
.rech input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0;font:inherit;font-size:13.5px;font-weight:500;color:var(--sur)}
.rech input::placeholder{color:rgb(var(--surv)/.88);font-weight:400}
.ca-fs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.ca-fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.ca-fl span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sur-2)}
.ca-fl select{appearance:none;-webkit-appearance:none;height:34px;border-radius:10px;padding:0 30px 0 10px;font:inherit;font-size:12.5px;color:var(--sur);
  background:rgb(var(--verre)/var(--verre-a)) var(--chev) no-repeat right 11px center/10px;border:1px solid rgb(var(--surv)/.18);outline:none;max-width:230px}
.ca-fl select option{color:var(--encre)}
.ca-fl select:focus{border-color:rgb(var(--surv)/.55)}
.ca-fs .lien{line-height:34px;margin-left:auto}
.ca-w .lien{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:12px;color:var(--sur-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ca-w .lien:hover{color:var(--sur)}
.ca-l{display:flex;flex-direction:column;gap:2px;margin-inline:-14px}
.ca-r{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:14px;cursor:pointer;transition:background .14s;flex-wrap:wrap}
.ca-r:hover{background:rgb(var(--verre)/var(--verre-b))}
.ca-r .av{width:34px;height:34px;font-size:12.5px}
.ca-n{flex:1 1 240px;min-width:240px;display:flex;flex-direction:column;gap:1px}
.ca-n b{font-size:13.5px;font-weight:620;color:var(--sur);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-n i{font-style:normal;font-size:11.5px;color:var(--sur-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-b{display:flex;gap:8px;flex:none}
.ca-b i{font-style:normal;font-size:11px;color:var(--sur-2);white-space:nowrap;background:rgb(var(--surv)/.12);border-radius:999px;padding:3px 9px}
.ca-b i.ok{background:rgba(126,231,178,.18);color:#8FF0C0}
body[data-fond="blanc"] .ca-b i.ok,body[data-fond="blanc-etoile"] .ca-b i.ok{background:#E3F6EC;color:#16784A}
.ca-r .lien{flex:none;min-height:24px;display:inline-flex;align-items:center}
.ca-r .lien.danger{color:#FF7A7A}  /* le rouge de Furies sur fond sombre, 4,6:1 */
.ca-l .hint{padding:14px}
@media (max-width:640px){
  .ca-r{gap:8px 10px}
  .ca-n{flex:1 1 calc(100% - 44px);min-width:0}
  .ca-b{order:3}
  .ca-l{margin-inline:0}
}

/* LA VAGUE A LA FORME D'UNE LIGNE DE BILAN (Fabrice, 20/10/2026) : même hauteur, même
   largeur, même disposition. Elle laisse vide la colonne de la corbeille, et un bilan
   validé, qui n'en a pas, la laisse vide aussi : toutes les lignes s'arrêtent au même x. */
.f-sec .vagues{display:flex;flex-direction:column;gap:8px;padding-right:48px}
.f-sec .vague{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:13px 16px;border-width:1px;transform:none}
.f-sec .vague:hover{transform:none}
.f-sec .vague b{display:block;font-size:14.5px;font-weight:700}
.f-sec .vague .sous{font-size:12px;color:var(--faint)}
.f-sec .vague.premiere .sous{color:rgb(255 255 255/.82)}
.f-sec .vague i{margin-top:0;white-space:nowrap}
.f-sec .vague > span{font-size:inherit;color:inherit}
.suppr-place{width:40px;flex:none}