/* ================================================================= ILLUMINATI
   La direction d'Atlas et d'Engage, sans un jeton de plus : le fond de couleur porte
   l'ecran, le contenu vit dans des cartes blanches qui flottent dessus.

   Le parti pris de cette feuille est l'air. Un account manager ouvre l'outil pour
   decider d'une chose : produire un bilan. Tout ce qui ne sert pas cette decision est
   soit absent, soit derriere un bouton.
   ---------------------------------------------------------------------------- */

: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)}