/* ====================================================================== FURIES
   La feuille d'Illuminati, reprise sans un jeton de plus : le fond de couleur porte
   l'ecran, le contenu vit dans des cartes blanches qui flottent dessus. Les cinq
   outils de la maison se reconnaissent a cela, et un sixieme qui s'en ecarterait
   ferait doute sur les cinq autres.

   CE QUE CETTE FEUILLE AJOUTE, tout a la fin, tient a une seule chose : Furies affiche
   des LISTES DE LIBELLES A COPIER, ce qu'aucun des cinq autres ne faisait. Un libelle
   de regie doit se lire caractere par caractere, se copier d'un geste, et porter a
   cote de lui sa preuve et la date de sa source. D'ou une ligne de segment dense,
   cliquable, et deux pastilles qui ne quittent jamais le libelle.
   ---------------------------------------------------------------------------- */

:root{
  --bleu:#5A63E8;
  --encre:#141633; --dim:#6C6F94; --faint:#9A9DBC;
  --sur:#FFFFFF; --surv:255 255 255; --sur-on:#2E3596;
  --acc:#5A63E8; --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}

*{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)/.20),transparent 62%),
    radial-gradient(820px 560px at 0% 104%,rgb(var(--halo)/.14),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. */
.tb-mk{flex:none;line-height:0;padding:4px 6px;border:0;background:none;cursor:pointer;
  border-radius:10px;transition:opacity .14s}
.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}
@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:conic-gradient(#5A63E8 0 50%,#0B0B0E 50% 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;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.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:rgb(var(--surv)/.6)}
/* 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}

/* -------------------------------------------------------------------- ecrans */
.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;-ms-overflow-style:none}
.ecran::-webkit-scrollbar{width:0;height:0;display:none}
body[data-ecran="accueil"] .ecran,body[data-ecran="entree"] .ecran{
  overflow:visible;justify-content:center;padding:18px 30px calc(18px + 78px)}

.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:rgb(var(--surv)/.62);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%}

/* -------------------------------------------------------------------- entree */
.entree{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ent-u{display:flex;flex-direction:column;align-items:center;gap:9px;border:0;
  cursor:pointer;font:inherit;padding:22px 30px;border-radius:22px;
  background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.2);
  color:var(--sur);min-width:168px;transition:.15s}
.ent-u:hover{background:rgb(var(--surv)/.24);transform:translateY(-2px)}
.ent-u b{font-size:14px;font-weight:640}
.ent-u i{font-style:normal;font-size:11.5px;color:rgb(var(--surv)/.66)}

/* ------------------------------------------------------------------- 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)}
.ac-lbl{font-size:9.5px;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,.rech-res{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}
.rech-res{display:none;top:calc(100% + 10px);left:0;right:0}
.rech-res.on{display:flex}
.ac-menu::-webkit-scrollbar,.rech-res::-webkit-scrollbar{width:8px}
.ac-menu::-webkit-scrollbar-thumb,.rech-res::-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:rgba(255,255,255,.96);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-ot i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.35;
  margin-left:auto;white-space:nowrap;flex:none}
.rech-res .ac-ot{gap:10px}
.rech-res .ac-ot b{flex:none;max-width:52%}
.rech-res .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:rgba(255,255,255,.72)}
.et.attente{background:rgba(255,214,148,.16);color:#FFD694}

.rech{position:relative;width:min(700px,100%);display:flex;align-items:center;gap:9px;
  padding:0 18px;height:44px;border-radius:999px;background:rgb(var(--surv)/.14);
  border:1px solid rgb(var(--surv)/.22);transition:background .15s,border-color .15s}
.rech:focus-within{background:rgb(var(--surv)/.2);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-size:13.5px;font-weight:500;color:var(--sur)}
.rech input::placeholder{color:rgb(var(--surv)/.55);font-weight:400}
.rech-x{width:22px;height:22px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgb(var(--surv)/.2);color:var(--sur);display:grid;place-items:center;padding:0}
.rech-x:hover{background:rgb(var(--surv)/.36)}
.rech-x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.rech-rien{margin:0;padding:12px 14px;font-size:12.5px;color:rgba(255,255,255,.62)}

/* --------------------------------------------------------------- la campagne */
.fw{width:min(1140px,100%);display:flex;flex-direction:column;gap:18px}
.fw.etroit{width:min(720px,100%)}
/* Le nom de la campagne en titre, l'agence et l'annonceur dessous, centres tous les
   deux : on sait ou l'on est avant de lire quoi que ce soit d'autre. */
.fh.centre{text-align:center;display:block;padding:6px 0 2px}
.fh h1{margin:0;font-size:clamp(21px,2.1vw,30px);font-weight:300;letter-spacing:-.015em;
  color:var(--sur);line-height:1.2}
.fh h1 b{font-weight:650}
.fh .fil{margin:5px 0 0;font-size:12.5px;color:rgb(var(--surv)/.66);letter-spacing:.02em}

/* Deux colonnes : le travail a gauche, la memoire a droite. */
.deux-tiers{display:grid;grid-template-columns:1.85fr 1fr;gap:18px;align-items:start}
@media (max-width:940px){.deux-tiers{grid-template-columns:1fr}}
.colg,.cold{display:flex;flex-direction:column;gap:18px;min-width:0}

.card{background:#fff;border-radius:26px;padding:22px 24px;color:var(--encre);
  box-shadow:0 22px 54px -34px rgba(10,12,40,.5)}

/* ------------------------------------------------------------------ le plan
   La regle d'Atlas : l'objet du travail se pose DIRECTEMENT sur la couleur, sans
   carte. Cinq aplats blancs de meme poids ne disaient plus lequel comptait ; ici la
   page respire sur le fond, les sections se separent d'un filet, et le seul aplat
   blanc de l'ecran est le bilan lui-meme, ce qu'on lit vraiment. */
.plan{display:flex;flex-direction:column}
.pan{padding:24px 0}
.pan{position:relative}
/* Le filet part du CONTENU, pas du bord : sans cela il dépassait de 32 px à gauche et
   les zones de texte paraissaient plus courtes que lui. */
.pan+.pan::before{content:'';position:absolute;left:32px;right:0;top:0;height:1px;
  background:rgb(var(--surv)/.16)}
.pan h2,.voile-b h2{display:flex;align-items:center;gap:10px;margin:0 0 4px;
  font-size:15px;font-weight:640;letter-spacing:-.01em;color:var(--sur)}
/* Le numero devant le titre : on sait ou l'on en est sans compter les blocs. */
.pan h2 i,.voile-b h2 i{font-style:normal;flex:none;width:22px;height:22px;
  border-radius:50%;background:rgb(var(--surv)/.2);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--sur)}
.voile-b .sous{display:flex;align-items:center;gap:10px;margin:22px 0 4px;
  font-size:13px;font-weight:620;color:rgb(var(--surv)/.84);padding-left:32px}
.pan .sub{margin:0 0 15px;font-size:12.5px;color:rgb(var(--surv)/.66);line-height:1.55;
  padding-left:32px}
.pan .seg,.pan .kpis,.pan .act,.pan textarea,.pan .dates,.pan .avert,.pan .depot,
.pan>p:not(.sub){margin-left:32px}
/* La page d'import n'a ni carte ni retrait : elle ne porte qu'un message. */
.pan.nu{padding:0}
.pan.nu .sub,.pan.nu .depot,.pan.nu .dates,.pan.nu .avert{margin-left:0;padding-left:0}
.fw.haut{justify-content:center;flex:1;gap:24px}
.pan .tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.pan .tete>div:first-child{flex:1;min-width:0}
/* width:100% se calcule sur la boite de contenu SANS retrancher la marge de gauche :
   la zone debordait de 32 px a droite. width:auto ne rattrape rien non plus, un
   textarea gardant sa largeur intrinseque. On retranche donc la marge a la main, et la
   zone finit exactement ou finit le filet. */
.pan textarea{display:block;width:calc(100% - 32px);background:rgb(var(--surv)/.1);
  border-color:rgb(var(--surv)/.22);color:var(--sur);font-weight:500}
.pan textarea::placeholder{color:rgb(var(--surv)/.5);font-weight:400}
.pan textarea:focus{border-color:rgb(var(--surv)/.5)}
.pan .act{border-top:0;margin-top:14px;padding-top:0}
.pan .pico{background:rgb(var(--surv)/.14);color:rgb(var(--surv)/.72)}
.pan .pico:hover{background:rgb(var(--surv)/.3);color:var(--sur)}
.pan .kpi b{color:var(--sur)}
.pan .kpi span{color:rgb(var(--surv)/.56)}
.pan .rien{color:rgb(var(--surv)/.5)}
.pan .lien{color:rgb(var(--surv)/.72)}
.pan .lien:hover{color:var(--sur)}
.pan .hist:hover{background:rgb(var(--surv)/.12)}
.pan .hist b{color:var(--sur)}
.pan .hist i{color:rgb(var(--surv)/.55)}
.pan .dates{color:rgb(var(--surv)/.66)}
.pan .dates input{background:rgb(var(--surv)/.12);border-color:rgb(var(--surv)/.24);
  color:var(--sur)}
/* Le jeu de boutons de l'accueil, repris ici : des pilules posees sur la couleur, et
   celle qui est retenue devient blanche. */
.pan .seg{background:rgb(var(--surv)/.1);border:1px solid rgb(var(--surv)/.16)}
.pan .seg button{color:rgb(var(--surv)/.72)}
.pan .seg button:hover{color:var(--sur)}
.pan .seg button.on{background:#fff;color:var(--sur-on);box-shadow:none}
.pan .btn-fant{color:rgb(var(--surv)/.8);border-color:rgb(var(--surv)/.3)}
.pan .btn-fant:hover{background:rgb(var(--surv)/.16);color:var(--sur);
  border-color:rgb(var(--surv)/.5)}
.pan .btn-plein{background:var(--sur);color:var(--sur-on);border-color:var(--sur)}
.pan .btn-plein:hover{filter:brightness(.94)}
.pan .avert{background:rgba(255,214,148,.16);color:#FFE0AC}
.pan .avert code{background:rgba(255,255,255,.12)}
.pan .depot{background:rgb(var(--surv)/.08);border-color:rgb(var(--surv)/.28)}
.pan .depot:hover,.pan .depot.sur{background:rgb(var(--surv)/.16);
  border-color:rgb(var(--surv)/.5)}
.pan .depot svg{stroke:var(--sur)}
.pan .depot b{color:var(--sur)}
.pan .depot span{color:rgb(var(--surv)/.62)}
.card.grand{padding:34px 34px 30px}
.card h2{margin:0 0 3px;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--encre)}
.card .sub{margin:0 0 14px;font-size:12px;color:var(--dim);line-height:1.55}
.centre{text-align:center}
h2.centre{font-size:16px;margin-bottom:8px}
.tete{display:flex;align-items:flex-start;gap:12px}
.tete>div:first-child{flex:1;min-width:0}
.pico{width:28px;height:28px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--card-2);color:var(--faint);display:grid;place-items:center;padding:0;
  transition:.14s}
.pico:hover{background:var(--acc-soft);color:var(--acc-dk)}
.pico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Les chiffres, sur la carte et non sur la couleur : ce sont eux le premier bloc. */
.kpis{display:flex;flex-wrap:wrap;gap:16px 40px;padding:4px 0 2px}
.kpi{min-width:118px}
.kpi b{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:clamp(21px,2.1vw,27px);font-weight:500;
  letter-spacing:-.02em;color:var(--encre);line-height:1.2}
.kpi span{display:block;font-size:10.5px;font-weight:660;letter-spacing:.04em;
  color:var(--faint);margin-top:4px}

.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)}
.dates{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);
  flex-wrap:wrap}
.dates.centre{justify-content:center}
.dates input,.dates select{border:1px solid var(--line-2);border-radius:12px;
  padding:8px 11px;font-size:12.5px;color:var(--encre);background:#fff}

.btn-plein,.btn-fant{display:inline-flex;align-items:center;gap:8px;height:38px;
  border-radius:999px;padding:0 20px;font:inherit;font-size:13px;font-weight:620;
  cursor:pointer;transition:.14s;border:1px solid transparent}
.btn-plein{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-plein:hover{filter:brightness(1.08)}
.btn-plein:disabled{opacity:.45;cursor:default;filter:none}
.btn-plein.grand{height:44px;padding:0 26px;font-size:13.5px}
.btn-fant{background:none;color:var(--dim);border-color:var(--line-2)}
.btn-fant:hover{background:var(--card-2);color:var(--encre)}
.btn-plein svg,.btn-fant svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.act .sp{flex:1}
.lien{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:12px;
  color:var(--acc-dk);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lien:hover{color:var(--encre)}

.lig{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line);font-size:13px}
.lig:first-of-type{border-top:0}
.lig b{font-weight:620;color:var(--encre);flex:1;min-width:0}
.lig b i.off{font-style:normal;font-size:11px;color:var(--faint);font-weight:500}
.lig span{color:var(--dim);font-size:12px}
.lig .et{margin-left:0;background:var(--acc-soft);color:var(--acc-dk)}
.lig .et.terminee{background:var(--neu);color:var(--dim)}

/* L'historique : des lignes cliquables, pas des cartes. Elles ne sont pas le sujet. */
.hist{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  border:0;background:none;text-align:left;cursor:pointer;font:inherit;
  padding:10px 12px;margin:0 -12px;width:calc(100% + 24px);border-radius:13px;
  transition:background .12s}
.hist:hover{background:var(--card-2)}
.hist b{font-size:12.5px;font-weight:620;color:var(--encre)}
.hist i{font-style:normal;font-size:11px;color:var(--faint)}
.rien{text-align:center;padding:16px 8px;font-size:12.5px;color:var(--faint);margin:0}
.avert{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:11px 14px;
  background:var(--warn-bg);color:var(--warn);font-size:12px;line-height:1.5}
.avert code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;
  background:rgba(138,90,34,.12);border-radius:5px;padding:1px 5px}

textarea,.form input,.form select,.form textarea{width:100%;box-sizing:border-box;
  border:1px solid var(--line-2);border-radius:13px;padding:10px 13px;font:inherit;
  font-size:13px;color:var(--encre);background:#fff}
textarea{resize:vertical;min-height:78px}
textarea:focus,.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--acc-line)}
.lbl2{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.depot{border:1.5px dashed var(--line-2);border-radius:20px;padding:34px 20px;
  display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  background:var(--card-2);text-align:center;transition:.15s}
.depot:hover,.depot.sur{border-color:var(--acc-line);background:var(--acc-soft)}
.depot svg{width:28px;height:28px;fill:none;stroke:var(--acc);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.depot b{font-size:13.5px;font-weight:640;color:var(--encre)}
.depot span{font-size:11.5px;color:var(--dim)}

/* ------------------------------------------------------------------ le bilan */
.bilan .texte{max-width:70ch;font-size:14.5px;line-height:1.7;color:var(--encre)}
.bilan .texte h3{margin:24px 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc-dk)}
.bilan .texte h3:first-child{margin-top:6px}
.bilan .texte p{margin:0 0 12px}
.bilan .texte ul{margin:0 0 12px;padding-left:19px}
.bilan .texte li{margin:0 0 5px}
.bilan .texte b{font-weight:680}

.tourne{width:15px;height:15px;flex:none;border-radius:50%;display:inline-block;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:tourner .7s linear infinite;vertical-align:-3px}
.tourne.sombre{border-color:var(--line-2);border-top-color:var(--acc)}
@keyframes tourner{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- fenetres */
.voile{position:fixed;inset:0;z-index:80;background:rgba(8,10,36,.5);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:30px}
.modale{background:#fff;color:var(--encre);border-radius:24px;width:min(620px,100%);
  max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.mo-h{display:flex;align-items:center;gap:12px;padding:20px 22px 12px}
.mo-h b{flex:1;font-size:14px;font-weight:700}
.mo-x{width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;background:var(--neu);
  color:var(--dim);display:grid;place-items:center;padding:0}
.mo-x:hover{background:var(--line-2);color:var(--encre)}
.mo-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.mo-c{padding:0 22px 6px;overflow-y:auto}
.mo-a{display:flex;align-items:center;gap:11px;padding:14px 22px 20px;
  border-top:1px solid var(--line);margin-top:12px}
.mo-a .sp{flex:1}
.lecture{margin:0;font-size:14px;line-height:1.7;color:var(--encre);
  background:var(--card-2);border-radius:14px;padding:14px 16px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:90;
  background:var(--encre);color:#fff;border-radius:999px;padding:11px 20px;
  font-size:13px;font-weight:600;box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.9,.25,1);
  max-width:min(560px,86vw);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------- impression
   « Exporter en PDF » passe par l'impression du navigateur. La page imprimee ne
   montre que le bilan : ni fond de couleur, ni carte, ni bouton. */
@media print{
  html,body{overflow:visible;height:auto;background:#fff!important;color:#000}
  body{background-image:none!important}
  .topbar,.voile,.toast,.deux-tiers,.act,.pico,.rech{display:none!important}
  .app,.ecran{display:block;padding:0;overflow:visible}
  .ecran{gap:0}
  .fh.centre{text-align:left;padding:0 0 18px;border-bottom:1px solid #ddd;
    margin-bottom:22px}
  .fh h1,.fh h1 b{color:#000;font-size:20pt;font-weight:600}
  .fh .fil{color:#555;font-size:10pt}
  .card{box-shadow:none;border-radius:0;padding:0;background:none}
  .card.bilan .sub{color:#666;font-size:9pt;margin-bottom:18px}
  .bilan .texte{max-width:none;font-size:11pt;line-height:1.6;color:#000}
  .bilan .texte h3{color:#000;font-size:10pt;margin:18pt 0 6pt}
  .bilan .texte h3:first-child{margin-top:0}
  /* Un graphique ne se coupe pas en deux entre deux pages. */
  .bilan .viz{break-inside:avoid;page-break-inside:avoid;margin:14pt 0}
}


/* ==================================================== ÉCRANS DE PARAMÉTRAGE
   Repris d'Atlas et d'Engage, dans le fond comme dans la forme : ce sont les mêmes
   gestes, voir ce qui existe, en ajouter, en modifier un, en éteindre un. Un seul
   bloc blanc, des rangées séparées d'un filet, et le bouton rond qui valide en bas
   à droite. Quatre écrans identiques valent mieux que quatre écrans cousins. */
.pf-w{width:min(720px,100%);display:flex;flex-direction:column;gap:16px;
  align-self:center}
.pf-msg{font-size:12px;color:rgb(var(--surv)/.8);line-height:1.55;text-align:center;
  max-width:520px;align-self:center}

.pb-mono{background:#fff;border-radius:26px;padding:6px 8px 8px;
  box-shadow:0 22px 54px -34px rgba(10,12,40,.5)}
.pb-r{display:flex;align-items:center;padding:4px 0}
.pb-r+.pb-r{border-top:1px solid var(--line)}
.pb-sep{width:1px;height:34px;background:var(--line);flex:none}
.pb-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:7px 14px 7px 16px}
.pb-f.lg{flex:1.6}
.pb-f>span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.pb-f input,.pb-f select{width:100%;box-sizing:border-box;border:0;background:none;
  padding:0;font-size:14.5px;font-weight:520;color:var(--encre);border-radius:0;
  appearance:none;-webkit-appearance:none}
.pb-f input:focus,.pb-f select:focus{outline:none;border:0}
.pb-f input::placeholder{color:var(--faint);font-weight:400}
.pb-f input:disabled,.pb-f select:disabled{color:var(--faint);cursor:not-allowed;opacity:1}
.pb-go{display:flex;align-items:center;justify-content:flex-end;padding:8px 8px 4px;
  border-top:1px solid var(--line);margin-top:4px}
.pb-photo{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;
  border-bottom:1px solid var(--line)}
.pb-ph{flex:1;min-width:0}
.pb-ph b{display:block;font-size:12.5px;font-weight:620;color:var(--encre)}
.pb-ph span{display:block;font-size:11px;color:var(--faint)}

.pu{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;
  background:#fff;box-shadow:0 22px 50px -34px rgba(8,10,34,.7);transition:.14s}
.pu.off{opacity:.55}
.pu-av{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc-dk);font-size:10px;font-weight:700;
  overflow:hidden}
.pu-av img{width:100%;height:100%;object-fit:cover;display:block}
.pu-n{font-size:13px;font-weight:600;color:var(--encre);white-space:nowrap}
.pu-m{flex:1;min-width:0;font-size:11.5px;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pu-r{font-size:10.5px;font-weight:600;color:var(--acc-dk);background:var(--acc-soft);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
.pu-ed{width:26px;height:26px;flex:none;border:0;border-radius:8px;cursor:pointer;
  background:var(--card-2);display:grid;place-items:center;transition:.12s}
.pu-ed:hover{background:var(--acc-soft)}
.pu-ed svg{width:14px;height:14px;fill:none;stroke:var(--dim);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pu-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pu-l{display:flex;flex-direction:column;gap:8px}

.sw3{width:32px;height:19px;flex:none;border:1.5px solid var(--line-2);border-radius:999px;
  background:var(--neu);position:relative;padding:0;cursor:pointer;
  transition:background .15s,border-color .15s}
.sw3 i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(27,28,33,.25);transition:left .15s}
.sw3.on{background:var(--acc);border-color:var(--acc)}
.sw3.on i{left:17px}

.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(--surv)/.16);color:var(--sur);transition:.14s}
.ac-plus:hover{background:rgb(var(--surv)/.28);transform:translateY(-1px)}
.ac-plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round}
.btn.sm{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);
  border-radius:999px;background:#fff;color:var(--encre);font:inherit;font-size:12px;
  font-weight:650;padding:8px 14px;cursor:pointer;transition:.14s;flex:none}
.btn.sm:hover{border-color:var(--acc-line);background:var(--card-2)}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr{border:1.5px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:620;color:var(--dim);padding:8px 6px;
  transition:.14s}
.tr:hover{border-color:var(--acc-line)}
.tr.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-dk)}


/* ------------------------------------------------- la colonne de droite
   Les deux blocs de memoire ne sont pas le travail : ils se posent sur un voile blanc
   translucide, present sans peser, et non sur un aplat opaque de plus. */
.voile-b{background:rgb(var(--surv)/.1);border:1px solid rgb(var(--surv)/.16);
  border-radius:22px;padding:20px 22px;-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)}
.voile-b+.voile-b{margin-top:16px}
.voile-b .rien{color:rgb(var(--surv)/.55);text-align:center}
.voile-b .hist{color:inherit}
.voile-b .hist:hover{background:rgb(var(--surv)/.14)}
.voile-b .hist b{color:var(--sur)}
.voile-b .hist i{color:rgb(var(--surv)/.6)}
.voile-b .lien{color:rgb(var(--surv)/.75)}
.voile-b .lien:hover{color:var(--sur)}
.voile-b .act{border-top-color:rgb(var(--surv)/.16);margin-top:14px;padding-top:12px}
.btn-fant.plein{width:100%;justify-content:center;color:var(--sur);
  border-color:rgb(var(--surv)/.34);background:rgb(var(--surv)/.1)}
.btn-fant.plein:hover{background:rgb(var(--surv)/.22);border-color:rgb(var(--surv)/.55)}

/* Le bilan s'arrete a la colonne de gauche : il n'a pas a passer sous la memoire. */
.colb{width:calc(65.5% - 9px)}
@media (max-width:940px){.colb{width:100%}}

/* Les ecrans de parametrage se centrent en hauteur, comme l'accueil. */
body[data-ecran="params"] .ecran,body[data-ecran="comptes"] .ecran{
  justify-content:center}
.pf{flex:none!important}


/* ==================================================== LA PAGE DU BILAN, SEULE
   Une colonne, centree. Les blocs 1 a 4 portent la decision ; la memoire et le cadre
   passent sous eux, en liens, parce qu'on ne les consulte qu'une fois de temps en
   temps et qu'une colonne entiere pour cela volait de l'attention aux chiffres. */
.fw.seul{width:min(760px,100%)}
/* Le bilan s'aligne sur le CONTENU des blocs, pas sur les pastilles de numero. */
/* 32 px de retrait plus les 4 px de padding du bloc : le bilan tombe exactement sous
   le bouton qui l'a lance. */
.fw.seul .card{margin-left:32px}
@media (max-width:620px){.fw.seul .card{margin-left:0}}

.pan h2 em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:rgb(var(--surv)/.5);padding:2px 8px;border-radius:999px;
  background:rgb(var(--surv)/.1)}

.second{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding:22px 0 0 32px;margin-top:4px}
.second::before{content:'';position:absolute;left:32px;right:0;top:0;height:1px;
  background:rgb(var(--surv)/.16)}
.second .lien{color:rgb(var(--surv)/.72);font-size:12px}
.second .lien:hover{color:var(--sur)}
.second p{width:100%;margin:2px 0 0;font-size:11px;color:rgb(var(--surv)/.45)}

/* Les historiques passent en fenetre : memes lignes, sur fond clair cette fois. */
.hist.sombre b{color:var(--encre)}
.hist.sombre i{color:var(--faint)}
.hist.sombre:hover{background:var(--card-2)}
.mo-c .ret{padding:10px 0 2px}
.mo-c .ret b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.mo-c .ret+.ret{border-top:1px solid var(--line);margin-top:8px}

/* La page d'import : tout centre, et centree en hauteur. */
.fw.haut{justify-content:center;flex:1;gap:24px;text-align:center}
.fw.haut .depot{text-align:center}
.fw.haut h2,.card h2.centre,.pan h2.centre{justify-content:center;text-align:center}
.fw.haut .rien,.card .rien{display:flex;align-items:center;justify-content:center;
  gap:10px}
.pan.nu .act{margin-left:0;justify-content:center}

/* Le retour, en haut a gauche de la page d'une campagne. Discret : c'est un chemin,
   pas une action. */
.retour{position:absolute;left:0;top:2px;display:inline-flex;align-items:center;gap:6px;
  border:0;background:rgb(var(--surv)/.12);color:rgb(var(--surv)/.8);cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;padding:8px 15px 8px 11px;
  border-radius:999px;transition:.14s}
.retour:hover{background:rgb(var(--surv)/.24);color:var(--sur)}
.retour svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fh.centre{position:relative}
@media (max-width:760px){.retour{position:static;margin-bottom:14px}}
/* Sur la page d'import : en haut, a gauche, dans le flux. */
.haut-r{width:100%;display:flex;justify-content:center;margin-bottom:2px}
.haut-r .retour{position:static}

/* Le rafraichissement de la vue, au pied de l'accueil : une action rare, posee la ou
   se lit la fraicheur de la base. */
.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(--surv)/.1);color:rgb(var(--surv)/.82);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(--surv)/.22);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}
.rafr.tourne-b svg{animation:tourner .9s linear infinite}

/* Le second critere : sous le titre, discret, mais present. Il dit sur quoi porte tout
   ce qui suit, donc il ne peut pas etre cache dans un reglage. */
.perim{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:-6px 0 2px}
.perim-l{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgb(var(--surv)/.5)}
.perim select{border:1px solid rgb(var(--surv)/.24);background:rgb(var(--surv)/.12);
  color:var(--sur);border-radius:999px;padding:6px 30px 6px 13px;font-size:12.5px;
  font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.6l3 3 3-3' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px}
.perim select:hover{background-color:rgb(var(--surv)/.2)}
.perim select option{color:var(--encre)}
.perim .lien{color:rgb(var(--surv)/.6);font-size:11.5px}
.perim .lien:hover{color:var(--sur)}

/* L'avatar d'une marque dans la descente, à la place de ses initiales. « contain » et
   « overflow:hidden » ensemble : un logo de six cents pixels doit être rogné par sa
   pastille, et non étiré ni débordant. */
.ac-mk.img{overflow:hidden;padding:2px;box-sizing:border-box}
.ac-mk.img img{width:100%;height:100%;object-fit:contain;display:block}

/* Une campagne silencieuse : le calendrier court encore, mais plus rien ne sort. Ce
   n'est ni « en cours » ni « terminée », et c'est une question a poser au trader. */
/* « Silencieuse » a disparu avec la deduction par les dates : l'etat vient desormais
   du dispositif confirme. Restent deux etats neutres, qui ne disent pas un probleme
   mais une information manquante ou une campagne pas encore partie. */
.et.aconfirmer{background:rgba(255,255,255,.13);color:rgba(255,255,255,.66)}
.et.avenir{background:rgba(168,199,255,.18);color:#BBD2FF}
.lig .et.aconfirmer{background:var(--neu);color:var(--dim)}
.fh .fil .alerte{color:#FFD694;font-weight:640}

/* La ligne d'un bilan dans l'historique : le bilan, et sa corbeille.
   La corbeille reste effacee tant qu'on ne survole pas la ligne. Un geste destructeur
   ne doit pas etre le plus visible d'un ecran qu'on ouvre pour relire. */
.hist-l{display:flex;align-items:center;gap:4px;margin:0 -12px;border-radius:13px;
  transition:background .12s}
.hist-l .hist{margin:0;width:auto;flex:1;min-width:0}
.hist-l .hist:hover{background:none}
.hist-l:hover{background:var(--card-2)}
.hist-x{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-right:8px;
  border:0;background:none;border-radius:9px;cursor:pointer;color:var(--faint);
  opacity:0;transition:opacity .12s,color .12s,background .12s}
.hist-l:hover .hist-x{opacity:1}
.hist-x:focus-visible{opacity:1}
.hist-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hist-x:hover{color:var(--rouge,#c0392b);background:rgb(192 57 43/.1)}

/* La ligne retournee. Elle ne change pas de taille : rien ne saute a l'ecran. */
.hist-l.confirme{background:rgb(192 57 43/.07);padding:10px 12px;gap:8px}
.hist-l.confirme:hover{background:rgb(192 57 43/.07)}
.hist-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hist-t b{font-size:12.5px;font-weight:620;color:var(--encre)}
.hist-t i{font-style:normal;font-size:11px;color:var(--faint)}
.hist-ok,.hist-non{flex:none;border:0;cursor:pointer;font:inherit;font-size:12px;
  font-weight:600;padding:7px 12px;border-radius:10px;transition:background .12s}
.hist-ok{background:var(--rouge,#c0392b);color:#fff}
.hist-ok:hover{background:#a5301f}
.hist-non{background:none;color:var(--faint)}
.hist-non:hover{background:var(--card-2);color:var(--encre)}

/* La période du dispositif, sous l'agence et l'annonceur. Discrète quand elle est
   confirmée, appelante quand elle ne l'est pas : c'est elle qui décide de l'état. */
.dates{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:6px 0 0;font-size:12px;color:rgb(var(--surv)/.7)}
.dates .dates-s{font-size:11px;color:rgb(var(--surv)/.5)}
.dates .lien{font-size:11.5px}
.dates.a-faire{color:rgb(var(--surv)/.85)}
.dates.a-faire::before{content:"";width:5px;height:5px;border-radius:50%;
  background:rgb(var(--surv)/.55)}
.dates.edite{gap:10px}
.dates.edite label{display:flex;align-items:center;gap:6px;font-size:12px;
  color:rgb(var(--surv)/.7)}
.dates.edite input[type=date]{border:0;border-radius:9px;padding:5px 8px;font:inherit;
  font-size:12px;background:rgb(var(--surv)/.14);color:var(--sur)}
.btn-mini{border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:9px;background:var(--sur);color:var(--sur-on);
  transition:opacity .12s}
.btn-mini:hover{opacity:.85}
.dates .dates-p{font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:rgb(var(--surv)/.5)}
.dates .dates-s{flex-basis:100%;text-align:center}
.sub.bloque{margin:12px 0 0;max-width:52ch}
.dates .dates-s.manque{color:#FFD694;max-width:60ch;margin:0 auto;line-height:1.5}

/* ------------------------------------------------------------------ graphiques
   Le dessin se pose dans le fil du bilan, sans cadre ni fond : la carte est deja
   blanche, une boite autour ne ferait qu'ajouter du trait la ou il n'y a pas de
   donnee. Il respire au-dessus et au-dessous, et il ne deborde jamais du texte. */
.bilan .viz{margin:18px 0;padding:0;max-width:100%;overflow-x:auto}
.bilan .viz svg{max-width:100%;height:auto}
.bilan .q-posee{margin:8px 0 0;font-size:12px;color:var(--dim);font-style:italic;
  padding-left:11px;border-left:2px solid var(--acc-line)}

/* ============================================================= FURIES, DEUX ÉCRANS
   Tout ce qui suit est propre à Furies. Rien au-dessus n'a été touché : la feuille
   d'Illuminati est reprise telle quelle, et les six outils restent identiques là où
   ils se ressemblent.

   LA MATIÈRE EST CELLE D'ILLUMINATI : la couleur porte l'écran, et ce qui vit dessus
   est un voile blanc translucide, pas un aplat. La première version faisait le
   contraire, des cartes blanches pleines partout, et l'écran perdait sa profondeur.
   Le blanc plein est gardé pour UNE chose : la fenêtre d'un levier, qui est un
   document qu'on lit et qu'on copie.

   LES MOTS-SYMBOLES DES ÉDITEURS SONT NOIRS. Sur la couleur, ils sont retournés en
   blanc par un filtre ; dans la fenêtre, où le fond est blanc, ils restent noirs.
   C'est le même fichier dans les deux cas.
   ---------------------------------------------------------------------------- */

/* -------------------------------------------------------------- écran 1, le brief
   Centré quand il tient dans la fenêtre, défilant sinon. « margin:auto 0 » fait les
   deux ; « justify-content:center » sur un conteneur qui défile aurait coupé le haut
   du contenu sans permettre d'y remonter. */
/* De l'air entre les trois temps de la page : la question, ce qu'on attend, le champ.
   Vingt pixels les collaient, et le sous-titre semblait appartenir au champ. */
.brf-z{margin:auto 0;gap:34px}
body[data-ecran="brief"] .ecran{padding-top:20px}
.brf-s{max-width:660px;margin:-18px 0 0;text-align:center;font-size:13.5px;
  line-height:1.75;color:rgb(var(--surv)/.72)}
.brf-s b{font-weight:680;color:var(--sur)}
.brf{width:min(760px,100%);display:flex;flex-direction:column;gap:30px;
  align-items:center}
.brf-c{position:relative;width:100%}
/* LE CONTOUR EST EN POINTILLÉS : un trait plein enferme, le pointillé invite. C'est
   le même signe que sur les zones de dépôt d'Atlas et d'IRIS, et il dit la même
   chose : ici, on pose quelque chose. */
.brf textarea{display:block;width:100%;min-height:220px;resize:vertical;
  border-radius:20px;padding:20px 22px;
  background:rgb(var(--surv)/.1);border:1.5px dashed rgb(var(--surv)/.34);
  color:var(--sur);font-size:14px;line-height:1.7;outline:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Les pointillés restent au focus : ils passent en trait plein sous le curseur, le
   contour changeait de nature au moment où l'on commençait à écrire, et le champ
   semblait sauter. Seule la clarté du trait bouge. */
.brf textarea:focus{background:rgb(var(--surv)/.16);
  border-color:rgb(var(--surv)/.55)}
/* L'invitation, centrée dans les deux sens et transparente au clic. */
.brf-ph{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;font-size:13.5px;font-weight:500;
  color:rgb(var(--surv)/.55);padding:20px}
.brf-a{display:flex;align-items:center;gap:14px}
.brf-note{margin:0;font-size:12px;color:#FFE0AC;text-align:center}

/* Le bouton blanc, la marque d'un objet allumé dans toute la maison. Grisé, il porte
   l'attente : « Étude du brief en cours ». */
.env-b,.btn-blanc{display:inline-flex;align-items:center;justify-content:center;
  gap:10px;border:0;border-radius:999px;cursor:pointer;background:var(--sur);
  color:var(--sur-on);font:inherit;font-weight:660;
  box-shadow:0 12px 30px -14px rgba(8,10,34,.6);
  transition:transform .14s,box-shadow .14s,background .14s,color .14s}
/* LE BOUTON S'ALLUME QUAND IL Y A DE QUOI ENVOYER. Champ vide, il est blanc
   transparent : présent, mais pas encore une invitation à cliquer. Dès qu'un texte
   est là, il devient un aplat blanc plein, la marque d'un objet allumé dans toute la
   maison. */
.env-b{height:46px;min-width:150px;padding:0 32px;font-size:13.5px;
  background:rgb(var(--surv)/.16);color:var(--sur);
  border:1px solid rgb(var(--surv)/.28);box-shadow:none}
/* Au survol, le bouton transparent se remplit de blanc et son encre passe en sombre.
   Il gardait une encre blanche sur un fond qui s'éclaircissait : le mot devenait
   illisible au moment précis où l'on visait le bouton. */
.env-b:hover{background:var(--sur);color:var(--sur-on);border-color:var(--sur);
  box-shadow:0 12px 30px -14px rgba(8,10,34,.6)}
.env-b.pret{background:var(--sur);color:var(--sur-on);border-color:var(--sur);
  box-shadow:0 12px 30px -14px rgba(8,10,34,.6)}
.env-b.pret:hover{background:#F4F5FF;color:var(--sur-on);
  box-shadow:0 18px 36px -16px rgba(8,10,34,.7)}
.btn-blanc{height:38px;padding:0 22px;font-size:12.5px}
/* Le survol du bouton d'envoi est décrit plus haut, dans ses deux états. Il figurait
   aussi ici, et cette règle-ci, venant après, reprenait la main sur le fond : deux
   endroits pour un même geste, c'est un endroit de trop. */
.btn-blanc:hover{transform:translateY(-1px);background:#F4F5FF;color:var(--sur-on);
  box-shadow:0 18px 36px -16px rgba(8,10,34,.7)}
.env-b:hover{transform:translateY(-1px)}
.env-b:active,.btn-blanc:active{transform:translateY(0)}
.env-b:disabled,.btn-blanc:disabled{opacity:.42;cursor:default;transform:none;
  box-shadow:none}
/* PENDANT L'ÉTUDE, LE BOUTON REDEVIENT ÉTEINT. Il s'allume en blanc plein quand il y
   a de quoi envoyer, et au survol ; une fois l'étude lancée, il n'y a plus rien à
   cliquer et il doit le dire. Il reprend donc l'aplat transparent, y compris sous la
   souris, et le rond qui tourne repasse en blanc pour rester lisible dessus. */
.env-b.encours,.env-b.encours:hover,.env-b.pret.encours,.env-b.pret.encours:hover,
.btn-blanc.encours,.btn-blanc.encours:hover{
  background:rgb(var(--surv)/.16);color:rgb(var(--surv)/.72);
  border:1px solid rgb(var(--surv)/.24);box-shadow:none;transform:none}
.env-b.encours:disabled,.btn-blanc.encours:disabled{opacity:1;cursor:progress}

/* ------------------------------------------------------------ écran 2, les blocs
   Le voile d'Illuminati : la couleur reste visible dessous, le contenu flotte. */
.bloc{width:100%;border-radius:24px;padding:20px 24px;color:var(--sur);
  background:rgb(var(--surv)/.1);border:1px solid rgb(var(--surv)/.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bloc-t{display:block;font-size:14px;font-weight:680}
.bloc-s{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:rgb(var(--surv)/.7)}
.bloc .lien{color:rgb(var(--surv)/.72);font-size:12px}
.bloc .lien:hover{color:var(--sur)}

/* LE BRIEF SE REPLIE DERRIÈRE UN BOUTON, sous le titre. Replié, il ne prend qu'une
   pastille : la page commence par les leviers, qui sont ce qu'on est venu chercher. */
/* De l'air autour du bouton : il sépare le titre des leviers, et une pastille collée
   à l'un ou à l'autre se lit comme si elle lui appartenait. */
.rap-z{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;
  margin:16px 0}
.rap-b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.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(--surv)/.12);border:1px solid rgb(var(--surv)/.2);
  color:rgb(var(--surv)/.86);transition:background .14s,color .14s}
.rap-t:hover{background:rgb(var(--surv)/.22);color:var(--sur)}
.rap-t .chv{transition:transform .18s}
.rap-t.ouvert .chv{transform:rotate(180deg)}
.rap textarea{display:block;width:100%;min-height:120px;resize:vertical;
  border-radius:16px;border:1px solid rgb(var(--surv)/.22);
  background:rgb(var(--surv)/.1);color:var(--sur);padding:14px 16px;
  font-size:13px;line-height:1.65;outline:none}
.rap textarea:focus{background:rgb(var(--surv)/.16);border-color:rgb(var(--surv)/.45)}
.rap-a{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
/* Ce que Furies a retenu. Discret par choix : c'est une vérification, pas un tableau
   de bord. On le lit quand on soupçonne une lecture de travers. */
.ret{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgb(var(--surv)/.16)}
.ret span{font-size:12px;color:rgb(var(--surv)/.9);max-width:100%}
.ret i{font-style:normal;display:inline-block;min-width:86px;font-size:9.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgb(var(--surv)/.5)}

/* --------------------------------------------------------- écran 2, les leviers */
.lvs{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px}
/* LES LOGOS S'ALIGNENT EN HAUT, TOUS AU MÊME NIVEAU. Le contenu était centré
   verticalement, et une tuile sans bouton (un levier en attente) n'a pas la même
   hauteur de contenu qu'une tuile avec bouton : M6 se retrouvait plus bas que TF1+.
   Le remède n'est pas un calage à la main mais une structure : le contenu part du
   haut, la zone de logo a une hauteur FIXE, et le bouton est poussé en bas. Les huit
   fichiers partageant le même gabarit, 2560 x 1075, leurs lettres arrivent alors
   exactement à la même hauteur. */
.lv{flex:0 0 268px;min-height:250px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:20px;padding:30px 24px 28px;
  border-radius:28px;background:rgb(var(--surv)/.19);
  border:1px solid rgb(var(--surv)/.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* LES LOGOS ÉTAIENT À 26 PIXELS ET ILLISIBLES. Les huit fichiers sont dessinés à la
   même échelle, 1075 px de haut, avec de l'air autour du dessin : une hauteur de
   boîte généreuse est donc nécessaire pour que les lettres arrivent à la taille des
   mots-symboles de l'accueil. */
.lv-lg{flex:none;height:52px;width:auto;max-width:86%;object-fit:contain;display:block;
  filter:brightness(0) invert(1);opacity:.97}
.lv-mot{flex:none;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:24px;
  font-weight:300;letter-spacing:.1em;text-transform:uppercase;line-height:52px;
  color:var(--sur)}
.lv-t{margin:0;text-align:center;font-size:12.5px;line-height:1.6;
  color:rgb(var(--surv)/.78);max-width:216px;text-wrap:balance}
.lv-b{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  height:40px;
  padding:0 22px;border:0;border-radius:999px;cursor:pointer;background:var(--sur);
  color:var(--sur-on);font:inherit;font-size:12.5px;font-weight:640;
  box-shadow:0 10px 26px -14px rgba(8,10,34,.6);
  transition:transform .14s,background .14s}
.lv-b:hover{transform:translateY(-1px);background:#F4F5FF}
.lv-b:active{transform:translateY(0)}
/* Un levier en attente : même carré, en retrait, sans bouton. Il dit ce qui manque
   chez NOUS, pas ce que la régie ne sait pas faire. */
.lv-off{background:rgb(var(--surv)/.06);border-style:dashed;
  border-color:rgb(var(--surv)/.24)}
.lv-off .lv-lg{opacity:.5}
.lv-off .lv-mot{color:rgb(var(--surv)/.6)}
.lv-off .lv-t{color:rgb(var(--surv)/.5)}
.lv-e{margin-top:auto;font-size:10.5px;font-weight:640;letter-spacing:.02em;
  border-radius:999px;
  padding:5px 12px;background:rgb(var(--surv)/.12);color:rgb(var(--surv)/.68);
  text-align:center}

/* ------------------------------------------------- la fenêtre d'un levier
   Le seul aplat blanc de l'outil, et il est justifié : c'est un document qu'on lit
   et qu'on copie, pas un objet posé sur la couleur. */
.modale{width:min(680px,100%)}
.mo-h{align-items:center}
.fh-lg{height:34px;width:auto;max-width:190px;object-fit:contain;display:block}
.fh-env{flex:1;font-size:11px;color:var(--faint);line-height:1.35}
.fx-l{margin:2px 0 18px;font-size:13px;line-height:1.65;color:var(--encre)}
.fx+.fx{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.fx>h4{margin:0;display:flex;align-items:baseline;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-dk)}
.fx>h4 .lien{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11.5px}
.fx-p{margin:7px 0 10px;font-size:12.5px;line-height:1.6;color:var(--dim)}
/* LE LIBELLÉ EST L'OBJET. Il est celui de la régie, jamais retouché : un accent
   corrigé serait un ciblage introuvable. Un clic le copie. La date de la source reste
   collée à lui ; le niveau de preuve n'apparaît que s'il porte une réserve. */
.fs{display:flex;align-items:baseline;gap:10px;padding:6px 0;
  border-top:1px solid var(--line)}
.fs:first-of-type{border-top:0}
.fs>button{border:0;background:none;padding:0;cursor:copy;text-align:left;font:inherit;
  font-size:13px;font-weight:580;color:var(--encre);
  border-bottom:1px dashed transparent}
.fs>button:hover{color:var(--acc-dk);border-bottom-color:var(--acc-line)}
.fs-c{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:38%}
.fs-m{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
.fs-m .dt{font-style:normal;font-size:10px;font-weight:600;color:var(--faint);
  white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.fs-m .res{font-style:normal;font-size:9.5px;font-weight:700;border-radius:999px;
  padding:2px 8px;background:var(--warn-bg);color:var(--warn);white-space:nowrap}
/* La glose d'un libellé ambigu : sous lui, en retrait, et pas plus haute qu'une
   ligne. C'est une précaution, pas un commentaire. */
.fs-g{margin:1px 0 5px;font-size:11px;line-height:1.45;color:var(--warn);
  background:var(--warn-bg);border-radius:8px;padding:4px 9px;display:inline-block}
.fx-src{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--faint);line-height:1.5}

/* La boîte de secours de la copie. Elle n'apparaît que si le navigateur a refusé les
   deux voies du presse-papier : le texte y est sélectionné, prêt pour un Cmd+C. */
.cpb{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:95;
  width:min(560px,92vw);background:#fff;color:var(--encre);border-radius:20px;
  padding:16px 18px;box-shadow:0 40px 90px -40px rgba(6,8,30,.7),0 0 0 1px var(--line)}
.cpb b{display:block;font-size:13px;font-weight:700}
.cpb p{margin:3px 0 10px;font-size:11.5px;color:var(--dim)}
.cpb textarea{display:block;width:100%;height:120px;resize:none;font-size:12px;
  line-height:1.5;border-radius:12px;border:1px solid var(--line-2);padding:10px 12px;
  background:var(--card-2);color:var(--encre);outline:none}

/* Le nom écrit derrière le logo de l'en-tête : il tient la place jusqu'à ce que
   l'image se charge, et reste seul si le fichier disparaît. */
.tb-mot{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:19px;
  font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  color:rgb(var(--surv)/.94)}

/* ------------------------------------------------------------------- le pied
   Une seule porte, discrète, présente sur les deux écrans. */
.pied{flex:none;display:flex;justify-content:center;padding:0 30px 18px;
  position:relative;z-index:10}
.pied-b{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;
  border-radius:999px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  background:rgb(var(--surv)/.1);border:1px solid rgb(var(--surv)/.18);
  color:rgb(var(--surv)/.68);transition:background .14s,color .14s}
.pied-b:hover{background:rgb(var(--surv)/.2);color:var(--sur)}

/* --------------------------------------------------------- les études passées */
.hs{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line)}
.hs:first-of-type{border-top:0}
.hs>div{flex:1;min-width:0}
.hs b{display:block;font-size:13px;font-weight:620;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs span{display:block;font-size:11px;color:var(--faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .n{flex:none;font-size:10.5px;font-weight:660;color:var(--dim);white-space:nowrap}
.hs .ouv{flex:none}
.hs .sup{flex:none;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:var(--neu);color:var(--faint);display:grid;place-items:center;padding:0;
  font-size:14px;line-height:1;transition:background .12s,color .12s}
.hs .sup:hover{background:var(--warn-bg);color:var(--warn)}
.hs.confirme{background:var(--warn-bg);border-radius:12px;padding:11px 12px;
  margin:2px -12px;border-top-color:transparent}
.hs .oui{flex:none;border:0;border-radius:999px;cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:640;padding:6px 13px;background:var(--warn);color:#fff}
/* Le rappel du doublon, sous le bouton d'envoi. */
.dbl{margin:0;font-size:12.5px;line-height:1.6;color:var(--sur);text-align:center;
  background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.24);
  border-radius:16px;padding:12px 18px;max-width:560px}
.dbl .act2{display:flex;gap:14px;justify-content:center;margin-top:10px}

@media (max-width:720px){
  .lv{flex:0 0 min(88vw,300px);min-height:0}
}

/* La campagne, sous le nom de l'annonceur et en mineur : même famille, deux rangs.
   Elle occupe la place où l'oeil descend après le nom, et le compte des ciblages
   vient encore en dessous, plus petit et plus pâle. */
.fh-c{margin:6px 0 0;font-size:15px;font-weight:500;line-height:1.35;
  color:rgb(var(--surv)/.82)}
/* La majuscule initiale de la campagne. Le modèle rend « lancement d'un polar », en
   minuscule, parce que c'est un morceau de phrase ; sous le nom de l'annonceur, c'est
   un titre. On ne retouche pas le texte, on le met en capitale à l'affichage : la
   valeur enregistrée reste celle du modèle. */
.fh-c::first-letter{text-transform:uppercase}
.fh .fil{margin-top:8px}