:root{
  /* fonds et neutres : gris très légèrement chauds, jamais purs */
  --bg:#F6F6F8; --card:#FFFFFF; --card-2:#FBFBFC;
  /* les deux rails encadrent la zone de travail, plus claire ;
     les deux fonds restent assez creusés pour que les cartes blanches se détachent */
  --rail:#ECECF2; --canvas:#F4F4F8; --sep:#D3D5DE;
  --line:#E9E9EE; --line-2:#DADCE3;
  --ink:#1B1C21; --ink-2:#4B4D57; --dim:#7B7E8A; --faint:#A6A9B3;
  /* accent unique, désaturé */
  --acc:#5A67A8; --acc-dk:#454F87; --acc-soft:#EEF0F8; --acc-line:#C9CEE6;
  /* repères de section : une teinte par colonne, indépendante du thème de palier */
  --s1:#454F87; --s1-bg:#EDEFF8; --s2:#8A6633; --s2-bg:#F6F0E4;
  --s3:#33705F; --s3-bg:#E6F1EC;
  /* paliers : trois pastels distincts */
  --n1:#6E9E82; --n2:#6E8CBF; --n3:#B37E9B;
  /* sémantique, volontairement sourde */
  --ok:#4C8168; --ok-bg:#EDF4F0; --warn:#A5784A; --warn-bg:#F8F3EC;
  --bad:#A0625C; --bad-bg:#F8EFEE; --neu-bg:#F1F1F5;
  --sh:0 1px 2px rgba(27,28,33,.04);
  --sh-md:0 2px 8px -2px rgba(27,28,33,.07);
  --sh-lg:0 16px 40px -14px rgba(27,28,33,.18);
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);overflow:hidden;
  font:14px/1.55 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit}
/* Réglage neutralisé : visible pour dire ce qui existe, inerte pour dire qu'il ne joue pas. */
select:disabled{background:var(--neu-bg);color:var(--faint);cursor:not-allowed;opacity:1}
button{cursor:pointer}
a{color:var(--acc);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D6D8DF;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

.app{height:100vh;display:flex;flex-direction:column}

/* ---------------- barre supérieure ---------------- */
.topbar{--pill-h:37px;
  position:relative;flex:none;height:62px;background:var(--card);
  border-bottom:1px solid var(--sep);display:flex;align-items:center;gap:16px;
  padding:0 18px 0 20px}
/* Bascule d'interface. « Réalisé » restera inerte tant que les performances
   de campagne ne seront pas importées : visible pour annoncer la suite, pas cliquable. */
.tb-v{display:flex;gap:2px;padding:3px;background:var(--rail);border-radius:999px}
.tb-v button{padding:6px 14px;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  border:0;border-radius:999px;background:transparent;color:var(--dim);
  transition:background .14s,color .14s}
.tb-v button:hover:not(:disabled):not(.on){color:var(--ink-2)}
.tb-v button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.tb-v button:disabled{color:var(--faint);cursor:not-allowed}
.tb-c{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:10px;padding:5px 6px 5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card-2);transition:border-color .14s}
.tb-c:hover{border-color:var(--line-2)}
.tb-c .yt{width:22px;height:16px;flex:none;display:block;border-radius:4px;
  box-shadow:0 1px 3px rgba(238,59,46,.28)}
.tb-l{display:flex;align-items:center;height:40px}
.tb-l img{height:38px;width:auto;display:block}
.wordmark{font-size:21px;font-weight:700;letter-spacing:-.045em;color:var(--ink);line-height:1}
.wordmark i{font-style:normal;color:#D9552F}
/* État du cache local : l'âge de la donnée est aussi utile que le bouton lui-même. */
.tb-c2{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 10px;border:1px solid var(--line);
  min-height:var(--pill-h,37px);box-sizing:border-box;
  border-radius:999px;background:var(--card);cursor:pointer;flex:none;text-align:left;
  transition:border-color .14s,background .14s}
.tb-c2:hover:not(:disabled){border-color:var(--acc-line);background:var(--acc-soft)}
.tb-c2:disabled{cursor:default;background:var(--warn-bg);border-color:#EADDC8}
.tb-c2 svg{width:14px;height:14px;flex:none;stroke:var(--faint);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tb-c2:hover:not(:disabled) svg{stroke:var(--acc)}
.tb-c2 span{display:flex;flex-direction:column;line-height:1.2}
.tb-c2 b{font-size:11.5px;font-weight:620;color:var(--ink)}
.tb-c2 i{font-style:normal;font-size:9.5px;color:var(--faint)}
.tb-c2.occupe b{color:var(--warn)}
.tb-c2.vide{border-color:var(--acc-line);background:var(--acc-soft)}
.tb-c2.vide b{color:var(--acc-dk)}
.spin2{width:11px;height:11px;flex:none;border:2px solid #EADDC8;border-top-color:var(--warn);
  border-radius:50%;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin2{animation:none}}

.tb-r{position:relative;display:flex;align-items:center;gap:11px;padding:6px 10px 6px 14px;
  border-radius:999px;cursor:pointer;transition:background .14s;user-select:none}
.tb-r:hover{background:var(--card-2)}
.tb-r.open{background:var(--acc-soft)}
.who{text-align:right;line-height:1.25}
.who b{display:block;font-size:12.5px;font-weight:620;color:var(--ink)}
.who span{display:block;font-size:10.5px;color:var(--faint)}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:660;color:#fff;overflow:hidden;position:relative;
  background:linear-gradient(148deg,var(--acc) 0%,var(--acc-dk) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line)}
.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:40px;height:40px;font-size:14px}
.chev{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.tb-r.open .chev{transform:rotate(180deg)}
.menu{display:none;position:absolute;top:calc(100% + 9px);right:0;width:252px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-lg);padding:6px;z-index:70;
  cursor:default}
.tb-r.open .menu{display:block}
.mn-h{display:flex;align-items:center;gap:11px;padding:10px 11px 12px;margin-bottom:5px;
  border-bottom:1px solid var(--line)}
.mn-h b{display:block;font-size:13px;font-weight:620;color:var(--ink)}
.mn-h span{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.mn-i{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer}
.mn-i:hover{background:var(--card-2);color:var(--ink)}
a.mn-i{text-decoration:none}
.mn-i svg{width:15px;height:15px;flex:none;stroke:var(--faint);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mn-i:hover svg{stroke:var(--acc)}
/* ---------------- ecran 1 : le brief ---------------- */
/* Un seul écran visible à la fois. */
body[data-ecran="brief"] .grid{display:none}
body[data-ecran="outil"] #brief{display:none}
.brief{flex:1;overflow-y:auto;background:var(--canvas);scrollbar-width:none}
.brief::-webkit-scrollbar{width:0}
.bf{max-width:1000px;margin:0 auto;padding:38px 24px 120px}
.bf-t{margin-bottom:22px}
.bf-e{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-weight:700;margin-bottom:9px}
.bf-t h1{margin:0;font-size:30px;font-weight:660;letter-spacing:-.035em;color:var(--ink)}
.bf-t p{margin:9px 0 0;font-size:13.5px;color:var(--dim);line-height:1.6;max-width:62ch}
.bf-id{margin-bottom:14px;border-color:var(--acc-line);box-shadow:var(--sh-md)}
.bf-id select{font-size:14px;font-weight:560;padding:11px 12px}

/* Deux colonnes équilibrées sans découper les cartes. */
.bf-grid{columns:2;column-gap:14px}
.bf-grid>.card{break-inside:avoid;margin:0 0 14px;display:inline-block;width:100%}

/* Barre de validation, toujours accessible. */
.bf-go{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;
  gap:18px;padding:13px 24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--sep)}
.bf-r{flex:1;display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;color:var(--dim);
  max-width:620px;margin-left:auto}
.bf-r span{white-space:nowrap}
.bf-r span+span::before{content:"·";margin-right:9px;color:var(--faint)}
.btn-go{display:flex;align-items:center;gap:10px;margin-right:auto;padding:13px 20px;
  border:0;border-radius:10px;background:var(--acc);color:#fff;font-size:14px;
  font-weight:640;letter-spacing:-.015em;box-shadow:0 3px 14px -3px rgba(90,103,168,.5);
  transition:background .14s,box-shadow .14s,transform .06s}
.btn-go:hover:not(:disabled){background:var(--acc-dk);box-shadow:0 5px 20px -4px rgba(90,103,168,.6)}
.btn-go:active:not(:disabled){transform:translateY(1px)}
.btn-go:disabled{background:var(--line-2);color:var(--dim);box-shadow:none;cursor:not-allowed}
.btn-go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* Retour au brief depuis l'outil. */
.tb-ed{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;
  background:transparent;flex:none}
.tb-ed:hover{background:var(--card)}
.tb-ed svg{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tb-ed:hover svg{stroke:var(--acc)}

/* Les deux colonnes latérales ont la MÊME largeur : le bloc d'export doit faire la
   largeur du bloc de campagne, et tout ce qui n'est pas pris par les côtés revient à la
   colonne du plan, qui porte les grands chiffres, la carte et la répartition. La colonne
   de droite tenait 412 px du temps où elle affichait une liste de chaînes en fiches. */
.grid{flex:1;display:grid;grid-template-columns:350px minmax(0,1fr) 350px;gap:0;
  overflow:hidden}
/* Trois zones franchement séparées : un filet pleine hauteur et un fond propre à chacune. */
.colw{min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:14px}
.zn-brief{background:var(--rail);border-right:1px solid var(--sep)}
.zn-pot{background:var(--canvas);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.zn-pot::-webkit-scrollbar{width:0;height:0}
.zn-sel{background:var(--rail);border-left:1px solid var(--sep)}
.col{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  gap:12px}
.b2{flex:none;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:12px}
/* Défilement sans ascenseur visible dans les trois colonnes. */
.col,.b3,.zn-pot,.chlist{scrollbar-width:none}

/* L'ancre de la colonne centrale : un rond collé en haut à droite, qui descend au bloc
   suivant puis ramène au plan. Sa marge négative annule la hauteur qu'elle prendrait
   dans la colonne, elle se pose donc à hauteur du titre sans rien décaler. */
/* Le retrait du haut cale l'ancre sur le titre du plan ; la marge basse annule TOUT ce
   que l'ancre prend dans la colonne, sa hauteur ET l'intervalle de 12 px que la colonne
   pose entre ses éléments. 22 + 30 + 12 = 64. Sans l'intervalle dans le compte, le plan
   descendait de 8 px dès que l'ancre apparaissait, donc en vue trader et pas en client :
   c'était tout le décalage entre les deux vues. Ici 14 + 30 + 12 = 56. */
.ancre{position:sticky;top:8px;z-index:6;align-self:flex-end;margin:14px 2px -56px 0;
  width:30px;height:30px;flex:none;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--acc);color:#fff;
  box-shadow:0 6px 18px -8px rgba(10,12,40,.5);transition:background .14s,opacity .2s}
/* L'attribut hidden doit être déclaré : une règle d'auteur qui pose display l'emporte
   sur la feuille du navigateur, et le bouton restait visible tout en se croyant masqué. */
.ancre[hidden]{display:none}
.ancre:hover{background:var(--acc-dk)}
.ancre:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}
.ancre svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.col::-webkit-scrollbar,.b2::-webkit-scrollbar,.chlist::-webkit-scrollbar{width:0;height:0}
/* La colonne de droite défile d'un seul tenant, comme celle de gauche : l'export, le
   filtre et la liste sont solidaires. Avant, seule la liste défilait dans une boîte
   fixe, donc les blocs 6 et 7 restaient collés en haut et volaient la place. */
.b3{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.b3::-webkit-scrollbar{width:0;height:0}

/* ---------------- en-tête ---------------- */
.sp{flex:1}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .d{font-size:9.5px;color:var(--faint);margin-top:4px;line-height:1.35}
.card .in>.sec-t:not(:first-child){margin-top:6px}
/* Chaque indicateur dans sa propre cellule. Les cellules d'une même grille s'étirent à la
   hauteur de la plus haute et la valeur est chassée en bas : les cinq valeurs partagent donc
   une ligne de base, qu'un libellé tienne sur une ou deux lignes. */
.kpi{background:var(--card-2);border:1px solid var(--line-2);border-radius:9px;
  padding:10px 11px 11px;display:flex;flex-direction:column}
.kpi .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;line-height:1.35}
.kpi .v{font-size:20px;font-weight:640;letter-spacing:-.03em;color:var(--ink);
  margin-top:auto;padding-top:8px}
/* ---------------- cartes ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card>h2,.cdd-h{margin:0;padding:15px 17px 0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:640;display:flex;align-items:center;gap:9px}
.card>h2 i,.cdd-h i{width:17px;height:17px;border-radius:5px;
  font-style:normal;display:grid;place-items:center;font-size:9.5px;font-weight:700;
  letter-spacing:0;flex:none}
/* Blocs 1-4 le brief, 5-7 le potentiel, 8 la sélection. */
#b1 .card>h2 i,.bf-grid .card>h2 i{background:var(--s1-bg);color:var(--s1)}
#hd .card>h2 i,#b2 .card>h2 i{background:var(--s2-bg);color:var(--s2)}
#b3 .cdd-h i{background:var(--s3-bg);color:var(--s3)}
.card>.sub{margin:7px 17px 0;font-size:11.5px;color:var(--dim);line-height:1.5}
.card .in{padding:14px 17px 17px;display:flex;flex-direction:column;gap:13px}
.lbl{font-size:10px;font-weight:640;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  margin-bottom:6px;display:block}
.hint{font-size:11px;color:var(--dim);line-height:1.5}
.sec-t{font-size:10.5px;font-weight:640;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.sec-t b{color:var(--acc);margin-left:4px;font-weight:700}
/* Sélecteur à trois états : une intention à la fois, lisible d'un coup d'oeil. */
.trio{display:flex;gap:0;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  background:var(--card)}
.tr{flex:1;border:0;background:transparent;padding:8px 6px;font:inherit;font-size:12px;
  font-weight:560;color:var(--dim);cursor:pointer;border-right:1px solid var(--line-2);
  transition:background .13s,color .13s}
.tr:last-child{border-right:0}
.tr:hover{background:var(--acc-soft);color:var(--ink)}
.tr.on{background:var(--acc);color:#fff}
.tr:focus-visible{outline:2px solid var(--acc-line);outline-offset:-2px}
.note{background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:10.5px;color:var(--dim);line-height:1.6}
.note b{color:var(--ink-2);font-weight:600}
.note.sm{font-size:10px}

input[type=text],input[type=number],input[type=date],input[type=search],select{width:100%;
  border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:13px;
  background:var(--card);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus{outline:none;border-color:var(--acc-line);
  box-shadow:0 0 0 3px var(--acc-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.suffix{position:relative}
.suffix input{padding-right:32px}
.suffix span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--faint)}

/* ---------------- pastilles ---------------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{border:1px solid var(--line-2);background:var(--card);border-radius:20px;padding:6px 12px;
  font-size:11.5px;font-weight:500;color:var(--dim);transition:.14s;line-height:1.3}
.tag:hover{border-color:var(--acc-line);color:var(--ink-2);background:var(--card-2)}
.tag.on{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-dk);font-weight:600}
.tag.red.on{background:var(--bad-bg);border-color:#E2CBC8;color:var(--bad)}

/* ---------------- bloc 2 : arbitrage ---------------- */
.card>.in>.dial{display:flex;flex-direction:column}
.dial{padding:4px 0 0}
.readout{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto;column-gap:12px;row-gap:0;padding-bottom:20px}
.readout-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Deux rangées de trois : on les sépare par une marge sur la seconde, et non par un
   row-gap. Les cellules sont en subgrid, donc un row-gap écarterait aussi le libellé
   du chiffre à l'intérieur de chaque cellule. */
.readout-3 .ro:nth-child(n+4){margin-top:14px}
.readout-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ro{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;
  border-radius:13px;padding:15px 17px 14px;border:1px solid transparent}
.ro .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  align-self:end;font-weight:600}
.ro .v{font-size:31px;font-weight:640;letter-spacing:-.04em;line-height:1.06;align-self:end;
  margin-top:6px}
.ro .mx{font-size:10.5px;align-self:end;margin-top:8px;line-height:1.45;padding-bottom:2px}
.ro .mx b{font-weight:660}
.ro .mx span{opacity:.72}
/* trois teintes pastel distinctes, indépendantes des couleurs de niveau */
.ro.c1{background:#FBF4E9;border-color:#EFE0C9}
.ro.c1 .l{color:#9A7434} .ro.c1 .v{color:#7C5A22} .ro.c1 .mx{color:#8A6C3C}
.ro.c2{background:#EEF1FB;border-color:#D4DCF2}
.ro.c2 .l{color:#5566A8} .ro.c2 .v{color:#3E4E8C} .ro.c2 .mx{color:#5A6899}
.ro.c3{background:#EAF4F2;border-color:#CBE3DE}
.ro.c3 .l{color:#3F7D72} .ro.c3 .v{color:#2F6A60} .ro.c3 .mx{color:#457F76}
@supports not (grid-template-rows: subgrid){
  .readout{display:flex;gap:12px} .ro{display:block;flex:1}
  .ro .l{min-height:2.7em}
}
@supports not (grid-template-rows: subgrid){
  .readout{display:flex;gap:26px} .ro{display:block} .ro .l{min-height:2.7em}
  .ro .v{margin-top:4px} .ro .d{margin-top:3px}
}

.verdict{margin-top:20px;padding:13px 15px;background:var(--acc-soft);border-radius:10px;
  font-size:12.5px;color:var(--acc-dk);line-height:1.6}
.verdict b{font-weight:650}
.verdict.warn{background:var(--warn-bg);color:var(--warn)}

.comp{display:flex;flex-direction:column;gap:15px}
.cp-h{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
.cp-h b{font-weight:600;color:var(--ink-2)}
.cp-v{margin-left:auto;color:var(--faint);font-size:11px;white-space:nowrap}
.cp-v b{color:var(--ink-2);font-weight:620}
.cp-b{display:flex;height:7px;border-radius:4px;overflow:hidden;background:#EFEFF3;margin-top:7px}
/* La barre pousse depuis la gauche : sa largeur part de zéro dans le HTML et
   l'animation lui donne la vraie. La transition fait tout le travail. */
.sg2{height:100%;background:var(--acc);border-radius:4px;
  transition:width .62s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){ .sg2{transition:none} }
.cp-f{display:flex;gap:14px;margin-top:6px;font-size:10px;color:var(--faint);flex-wrap:wrap}
.cp-f span{display:flex;align-items:center;gap:5px}
.cp-f i{width:7px;height:7px;border-radius:2px;display:inline-block}
.cp-cap{margin-left:auto}
/* « non mesurée » n'est pas une valeur : le dire sans lui donner le poids d'un chiffre. */
.ch-g .nm{font-family:Inter,sans-serif;font-style:normal;font-size:10.5px;
  font-weight:500;color:var(--faint);letter-spacing:0}
.cp.reduit .cp-b{box-shadow:0 0 0 1px var(--line-2)}
.cp-al{color:var(--faint);font-weight:500}

/* Curseur de répartition : un par univers, désactivé quand le cadre n'en compte qu'un. */
.cp-r{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:7px 0 0;
  background:transparent;cursor:ew-resize;display:block}
.cp-r::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--line-2)}
.cp-r::-moz-range-track{height:3px;border-radius:2px;background:var(--line-2)}
.cp-r::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:2px solid var(--acc);margin-top:-5px;
  box-shadow:var(--sh-md);transition:transform .12s}
.cp-r::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--card);
  border:2px solid var(--acc);box-shadow:var(--sh-md)}
.cp-r:hover::-webkit-slider-thumb,.cp-r:active::-webkit-slider-thumb{transform:scale(1.15)}
.cp-r:focus-visible{outline:2px solid var(--acc-line);outline-offset:3px;border-radius:4px}
.cp-s{position:relative;margin-top:14px}
/* Le curseur va de 0 au nombre de chaînes disponibles : sa butée EST le maximum de
   l'univers. Le compteur à droite dit ce plafond, et annonce quand il est atteint. */
.cp-max{position:absolute;right:0;top:-13px;font-size:10px;color:var(--faint);
  font-family:"JetBrains Mono",monospace;letter-spacing:.02em;pointer-events:none}
.cp.plein .cp-max{color:var(--acc);font-weight:700}
.cp.plein .cp-r::-webkit-slider-thumb{border-color:var(--acc);background:var(--acc-soft)}
.cp.plein .cp-r::-moz-range-thumb{border-color:var(--acc);background:var(--acc-soft)}

/* Concentration : le budget ne bouge pas, seule la pression par chaîne change. */
/* Chaîne de prix : une ligne par étape, le prix facturé détaché en bas. */
.px{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px}
.px-e,.px-h{display:grid;grid-template-columns:1fr 78px 92px;column-gap:14px;
  align-items:baseline;padding:5px 0;font-size:11.5px;color:var(--ink-2)}
/* Pas de trait sous CPM et campagne : ce ne sont pas des en-têtes de tableau à border,
   ce sont deux mots qui nomment les colonnes. Le trait les transformait en règle et
   ajoutait une ligne de plus dans un bloc qui en a déjà six. */
.px-h{padding:0 0 5px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.px-e>span i{display:block;font-style:normal;font-size:10px;color:var(--faint);
  margin-top:2px;line-height:1.4}
.px-e>b,.px-h>b{font-weight:620;color:var(--ink);text-align:right}
.px-h>b,.px-h>em{color:var(--faint);font-weight:600}
.px-e>em,.px-h>em{font-style:normal;font-weight:620;color:var(--ink);text-align:right}
.px-f{margin-top:5px;padding-top:9px;border-top:1px solid var(--line-2)}
.px-f>span{font-weight:640;color:var(--ink)}
.px-f>b,.px-f>em{font-size:13.5px;color:var(--acc-dk)}

.conc{font-size:11px;color:var(--dim);background:var(--card-2);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;line-height:1.55}
.conc b{color:var(--ink-2);font-weight:620}
.conc.fort{background:var(--warn-bg);border-color:#EADDC8;color:var(--warn)}
.conc.fort b{color:var(--warn)}
.conc span{display:block;margin-top:5px;font-size:10.5px;line-height:1.5}
.cp-act{display:flex;align-items:center;gap:12px;padding-top:3px;border-top:1px solid var(--line)}
.cp-act .hint{flex:1;font-size:10.5px}

/* ---------------- bloc 3 : chaînes ---------------- */
.chbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:12px 14px;display:flex;flex-direction:column;gap:10px;flex:none}
.chbar .row{display:flex;gap:8px;align-items:center}
.cdd-h{padding:1px 1px 2px}

.mini-sel{padding:7px 10px;font-size:11px;border-radius:8px;
  color:var(--dim);background:var(--card-2)}
.srch{position:relative;flex:1}
.srch input{padding-left:31px}
.srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;
  stroke:var(--faint);fill:none;stroke-width:2}
.modes{display:flex;background:var(--neu-bg);border-radius:8px;padding:3px;gap:3px;flex:none}
.modes button{border:0;background:transparent;border-radius:6px;padding:6px 11px;font-size:11.5px;
  font-weight:550;color:var(--dim)}
.modes button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.chlist{flex:none;min-height:0;overflow:visible;display:flex;flex-direction:column;
  gap:10px;padding-right:3px}

/* mode liste */
/* La ligne ne DÉBORDE PLUS. Le bouton de redirection sortait de la carte de cinquante
   pixels depuis que la colonne est passée de 412 à 350 px : le nom portait un plancher
   de 96 px, les deux boutons et le prix ne se comprimaient pas, et la somme dépassait la
   largeur. L'intervalle passe donc de 10 à 8 px, le mot d'échelle s'efface quand la
   colonne se resserre, et le débordement est coupé net en dernier recours plutôt que
   d'échapper au bord arrondi. Les deux marges redeviennent égales. */
.li{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:9px;transition:.12s;overflow:hidden}
.li:hover{border-color:var(--acc-line);background:var(--card-2)}
.li .pip{width:8px;height:8px;border-radius:50%;flex:none}
.li .nm{flex:1;min-width:0;font-size:12.5px;font-weight:550;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le mot d'échelle CÈDE avant tout le monde : sans « min-width:0 » un texte en
   « nowrap » refuse de rétrécir et pousse la flèche hors du cadre. */
.li .lv{font-size:10px;color:var(--dim);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.li .ext{width:22px;height:22px;font-size:11px}

/* mode carte */
.chan{padding:14px 16px}
.ch-h{display:flex;gap:11px;align-items:center}
.ch-h img{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;background:#EFEFF3}
.ch-n{font-size:14px;font-weight:620;letter-spacing:-.012em}
.ch-u{font-size:11px;color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:6px}
.ext{width:28px;height:28px;border:1px solid var(--line-2);border-radius:8px;display:grid;
  place-items:center;color:var(--faint);flex:none;font-size:12px;transition:.12s}
.ext:hover{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.ch-t{display:flex;align-items:center;gap:8px;margin-top:12px;padding:7px 11px;border-radius:8px;
  background:var(--lv-bg);border:1px solid var(--line)}
.ch-t b{font-size:11px;font-weight:640;color:var(--lv)}
.ch-t .pip{width:7px;height:7px;border-radius:50%;background:var(--lv);flex:none}
.ch-t .pv{margin-left:auto;font-size:10px;font-weight:550;color:var(--dim)}
.ch-g{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;
  column-gap:10px;row-gap:3px;margin-top:13px}
.cc{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:end}
.cc .l{font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  align-self:end;line-height:1.35}
.cc .v{font-size:12.5px;font-weight:620;align-self:end}
@supports not (grid-template-rows: subgrid){
  .cc{display:block} .cc .l{min-height:2.4em;display:flex;align-items:flex-end}
  .cc .v{margin-top:2px}
}
.ch-w{font-size:11px;color:var(--dim);margin:12px 0 0;padding:11px 0 0 15px;
  border-top:1px solid var(--line);line-height:1.6}
.ch-w li{margin-bottom:3px}
.ch-w li.warn{color:var(--warn);font-weight:550;list-style:none;margin-left:-15px}

.btn{border:1px solid var(--line-2);background:var(--card);border-radius:8px;padding:8px 13px;
  font-size:12.5px;font-weight:520;color:var(--ink-2);transition:.12s}
.btn:hover{background:var(--card-2);border-color:var(--acc-line)}
.btn.w{width:100%}
.btn.sm{padding:6px 10px;font-size:11.5px}
.row-b{display:flex;gap:8px}
.row-b .btn{flex:1}
.btn:disabled{opacity:.45;cursor:not-allowed}
.load{padding:44px;text-align:center;color:var(--dim);font-size:12.5px}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line-2);
  border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:44px 20px;text-align:center;color:var(--dim);font-size:12.5px;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1480px){.grid{grid-template-columns:296px minmax(0,1fr) 296px}}

/* ---------------- thème piloté par le palier retenu ---------------- */
body[data-palier="Niveau 1"]{--acc:#6E9E82;--acc-dk:#4C7860;--acc-soft:#EEF5F1;--acc-line:#C4DDD0}
body[data-palier="Niveau 2"]  {--acc:#6E8CBF;--acc-dk:#4C6A9C;--acc-soft:#EFF3FA;--acc-line:#C7D6EC}
body[data-palier="Niveau 3"]{--acc:#B37E9B;--acc-dk:#8C5B77;--acc-soft:#FAF0F5;--acc-line:#E7D0DD}
body{transition:none}
.card,.chbar{transition:border-color .25s}

/* définition du palier, au-dessus du verdict */

/* ---------------- modale ---------------- */
.scrim{position:fixed;inset:0;background:rgba(27,28,33,.34);backdrop-filter:blur(2px);
  z-index:60;display:grid;place-items:center}
.modal{width:min(430px,92vw);background:var(--card);border-radius:14px;box-shadow:var(--sh-lg);
  overflow:hidden}
.mh{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}
.mh b{font-size:13.5px;font-weight:640}
.mh .btn{margin-left:auto}
.mb{padding:17px 18px 18px;display:flex;flex-direction:column;gap:14px}
.mf{display:flex;gap:9px;justify-content:flex-end;margin-top:2px}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.p:hover{background:var(--acc-dk);border-color:var(--acc-dk)}

/* ---------------- niveaux d'exigence (colonne de gauche) ---------------- */
.lvl{border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;
  transition:.14s;background:var(--card)}
.lvl:hover{border-color:var(--line-2)}
.lvl.on{border-color:var(--lv);background:color-mix(in srgb,var(--lv) 7%,#fff)}
/* Les cinq critères et leur poids : la hiérarchie doit se voir sans lire. */
.crit{display:flex;flex-direction:column;gap:1px;background:var(--card-2);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px 9px}
.cr{position:relative;display:flex;align-items:baseline;gap:8px;padding:4px 0;
  font-size:11.5px;color:var(--ink-2)}
.cr-b{position:absolute;left:0;bottom:1px;height:2px;border-radius:1px;
  background:var(--acc-line);opacity:.9}
.cr b{font-weight:550;flex:1}
.cr .num{color:var(--dim);font-size:11px;font-weight:500}
.crit .lien{align-self:flex-start;margin-top:6px;font-size:10.5px}

.lv-r{margin-left:7px;font-size:10.5px;font-weight:500;color:var(--dim);
  background:var(--neu-bg);border-radius:5px;padding:1px 6px;letter-spacing:0}
.lv-h{display:flex;align-items:center;gap:9px}
.lv-h b{font-size:13px;font-weight:650;color:var(--dim)}
.lvl.on .lv-h b{color:var(--lv)}
.sw2{margin-left:auto;width:34px;height:19px;border-radius:11px;background:#D8DAE2;
  position:relative;transition:.16s;flex:none}
.sw2::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:.16s;box-shadow:0 1px 2px rgba(0,0,0,.22)}
.sw2.on{background:var(--lv)}
.sw2.on::after{left:17.5px}
.lv-s{display:flex;align-items:baseline;gap:8px;font-size:10.5px;color:var(--faint);
  margin-top:4px;font-variant-numeric:tabular-nums}
.lvl.on .lv-s{color:var(--dim)}
.lv-p{font-size:11px;font-weight:620;color:var(--lv);margin-left:auto}
.lv-p span{background:color-mix(in srgb,var(--lv) 14%,#fff);border-radius:5px;padding:1px 6px;
  font-size:9.5px;margin-left:4px}
.lv-d{font-size:11px;color:var(--dim);line-height:1.55;margin-top:7px}

/* ---------------- lien discret ---------------- */
.lien{border:0;background:none;padding:0;margin-top:7px;display:block;font-size:10.5px;
  color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lien:hover{color:var(--acc-dk)}

/* ---------------- modale explicative ---------------- */
.modal.lg{width:min(620px,94vw);max-height:88vh;display:flex;flex-direction:column}
.modal.lg .mb{overflow-y:auto}
.mp{margin:0;font-size:12px;color:var(--ink-2);line-height:1.65}
.mp.sm{font-size:10.5px;color:var(--dim)}
.mp b{font-weight:620;color:var(--ink)}
.blocs{display:flex;flex-direction:column;gap:8px}
.bl{border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--card-2)}
.bl-h{display:flex;align-items:baseline;gap:10px}
.bl-h b{font-size:12px;font-weight:620}
.bl-h span{margin-left:auto;font-size:11px;color:var(--acc-dk);font-weight:640}
.bl-q{font-size:12px;color:var(--ink-2);font-weight:550;margin:3px 0 4px}
.bl-d{font-size:10.5px;color:var(--dim);line-height:1.6;margin-top:4px}
.niv-x{display:flex;flex-direction:column;gap:9px}
.nx{border:1px solid var(--line);border-left:3px solid var(--lv);border-radius:0 9px 9px 0;
  padding:11px 14px}
.nx-h{display:flex;align-items:center;gap:8px}
.nx-h .pip{width:8px;height:8px;border-radius:50%;background:var(--lv);flex:none}
.nx-h b{font-size:12.5px;color:var(--lv);font-weight:650}
.nx-h .num{margin-left:auto;font-size:10.5px;color:var(--faint)}
.nx-r{font-size:10.5px;color:var(--dim);line-height:1.6;margin-top:5px}
.nx-r b{color:var(--ink-2);font-weight:600}
.nx-s{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line-2)}
.nx-s span{display:flex;align-items:baseline;gap:5px;font-size:9.5px;color:var(--faint)}
.nx-s i{font-style:normal;font-size:11.5px;font-weight:650;color:var(--lv)}

/* ---------------- note visible sur les chaînes ---------------- */
.sc{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;color:var(--lv);
  background:color-mix(in srgb,var(--lv) 12%,#fff);border-radius:6px;padding:2px 7px;
  flex:none;font-variant-numeric:tabular-nums}
.ch-t .sc{margin-left:8px}
.inote{width:17px;height:17px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);
  color:var(--faint);font-size:9.5px;font-family:Georgia,serif;font-style:italic;font-weight:700;
  display:grid;place-items:center;flex:none;padding:0;line-height:1}
.inote:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* Le bouton i suit la phrase, il ne passe pas à la ligne. La pastille .inote est en
   grille, donc de niveau bloc dans un flux de texte : elle s'octroyait sa propre ligne.
   En grille EN LIGNE, elle reste sur la même. Le sélecteur porte deux classes pour
   passer devant .inote, déclarée juste au-dessus. */
/* Le dernier mot et le bouton forment un bloc insécable : sinon le bouton se retrouvait
   seul à la ligne suivante dès qu'il manquait vingt pixels en fin de ligne. */
.nowr{white-space:nowrap}
.exp-u .exp-i{display:inline-grid;vertical-align:middle;margin-left:6px}
.exp-u .exp-i[aria-expanded="true"]{background:var(--acc);border-color:var(--acc);
  color:#fff}
.li .sc{margin-left:auto}
.li .lv{margin-left:0}
/* Mode liste : nom, mot d'affinité, chiffre. Dans une colonne de 300 px, l'échelle
   d'audience volait toute la place au nom : elle reste sur la fiche et dans l'infobulle.
   Le PLANCHER DU NOM est passé de 96 à 56 px : à 96 la rangée dépassait sa propre
   largeur d'un pixel dès 1512 px de fenêtre, et de douze sur un téléphone, ce qui
   rognait la flèche de sortie contre le bord arrondi. Cinquante-six pixels laissent
   encore lire quatre ou cinq lettres avant les points de suspension, et c'est le nom
   qui cède, pas le bouton qu'on vise. */
.li .nm{min-width:56px}
/* Sous 1480 px la colonne tombe à 296 px : le mot d'échelle ne tient plus avec le nom,
   les deux boutons et le prix. Il s'efface, il vit dans la fiche et dans l'infobulle. */
@media (max-width:1480px){ .li .lv{display:none} }
/* LE BOUTON DE SORTIE NE DÉBORDE PLUS. La rangée additionnait un nom à 96 px minimum,
   un prix, deux boutons et cinq intervalles : sous 260 px de colonne le total dépassait,
   et « overflow:hidden » coupait net la flèche au bord arrondi, ce qui se voyait sur le
   lien du client dès qu'on le lisait sur un téléphone.
   Trois réglages, du plus souple au plus ferme : le nom cède sa largeur minimale,
   l'intervalle se resserre, et les deux boutons ne rétrécissent jamais puisque ce sont
   eux qu'on vise du pouce. */
@media (max-width:560px){
  .li{gap:6px;padding:9px 10px}
  .li .nm{min-width:0}
  .li .sc2{font-size:11px}
}
/* Et la vraie mesure est celle de la COLONNE, pas de la fenêtre : la même rangée vit
   dans une colonne de 300 px chez le trader et dans toute la largeur sur un téléphone.
   On interroge donc son conteneur. Sous 270 px, le mot d'échelle et le prix ne tiennent
   plus avec le nom et les deux boutons : l'échelle part la première, le prix rétrécit
   ensuite, et la flèche reste entière parce que c'est elle qu'on clique. */
.chlist{container-type:inline-size}
@container (max-width:270px){
  .li .lv{display:none}
  .li{gap:6px}
  .li .sc2{font-size:11px}
  /* Le nom rend aussi son plancher : dans une colonne aussi étroite, deux lettres et
     des points de suspension valent mieux qu'un bouton coupé. */
  .li .nm{min-width:0}
}

/* ---------------- exports ---------------- */
.exp-bloc{gap:9px}
/* Bouton d'export : aux couleurs de YouTube, volontairement le point le plus
   contrasté de l'écran. Teintes fixes, insensibles au thème de niveau. */
/* Le JAUNE ORANGE d'Atlas, repris du logo Rockstar. Il sert au bouton Displayce et aux
   points de la carte : sur l'indigo comme sur le noir, c'est la seule teinte qui tient
   sans écraser l'encre blanche du reste de l'écran. */
:root{--or:#FFAB00; --or-dk:#E09400}
/* Les marques des deux exports DOOH. Ce sont des silhouettes blanches détourées, donc
   elles se posent telles quelles sur les deux fonds de bouton. */
.dh-mk{width:19px;height:19px;flex:none;object-fit:contain;display:block}
.btn-yt{--yt:#E62117; --yt-dk:#B81810;
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;text-align:left;
  padding:11px 13px;border:0;border-radius:10px;background:var(--yt);color:#fff;
  box-shadow:0 2px 10px -2px rgba(230,33,23,.45);transition:background .14s,box-shadow .14s,transform .06s}
.btn-yt:hover{background:var(--yt-dk);box-shadow:0 4px 16px -3px rgba(230,33,23,.55)}
.btn-yt:active{transform:translateY(1px)}
.btn-yt:focus-visible{outline:2px solid var(--yt);outline-offset:3px}
.yt-g{width:24px;height:17px;flex:none;display:block;border-radius:5px}
/* L'accroche PASSE À LA LIGNE plutôt que de se couper. Elle tenait sur une seule ligne
   du temps où la colonne de droite faisait 412 px ; depuis qu'elle en fait 350, pour
   égaler le bloc de campagne, « Exportez votre cadre de diffusion » demandait 192 px et
   n'en avait que 145 : le titre finissait en points de suspension. Une accroche sur deux
   lignes se lit, une accroche tronquée non. */
.yt-t{flex:1;min-width:0;font-size:12.5px;font-weight:640;letter-spacing:-.02em;
  line-height:1.25;white-space:normal;text-wrap:balance}
.yt-t span{display:block;font-size:10.5px;font-weight:450;color:rgba(255,255,255,.82);
  margin-top:3px;letter-spacing:0;white-space:normal}
.yt-f{width:15px;height:15px;flex:none;stroke:rgba(255,255,255,.85);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Exports par univers : nettement secondaires, pour ne pas concurrencer le bouton. */
.exp-u{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding-top:2px}
.exp-u>span{flex:0 0 100%;font-size:10px;color:var(--faint);line-height:1.4}
.exp-u .lien{font-size:11px;color:var(--ink-2)}
.exp-u .lien b{color:var(--faint);font-weight:500;margin-left:3px}
.exp-u .lien:hover{color:#B81810}
.exports .btn{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-dk);
  font-weight:600;padding:11px 14px;font-size:12.5px}
.exports .btn:hover{background:color-mix(in srgb,var(--acc) 14%,#fff)}
.exports .btn span{color:var(--acc);font-size:10px}

/* sélecteur de campagne, en barre supérieure */
/* L'en-tête NOMME la campagne, elle ne la choisit plus : deux lignes, l'annonceur au
   dessus et la campagne en dessous, comme le compte à l'autre bout de la barre. Le
   sélecteur a disparu, et sa pilule avec lui : un objet à fond plein se lit comme un
   bouton, et celui-ci ne mène nulle part. */
.camp-nom{display:flex;flex-direction:column;gap:1px;min-width:0;
  letter-spacing:-.015em;color:var(--ink)}
.camp-nom b{font-size:13.5px;font-weight:650;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-nom i{font-style:normal;font-size:11px;font-weight:500;color:var(--dim);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Lien vers la notice de calcul : discret, mais toujours a portee de main. */
.tb-doc{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--card);
  font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.tb-doc:hover{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-dk)}
.tb-doc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Avertissement de découpe : dit la limite réelle de la plateforme, pas la nôtre. */
.exp-n{margin-top:9px;font-size:10.5px;line-height:1.5;color:var(--dim);
  background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:8px;padding:8px 10px}
.exp-n b{color:var(--acc-dk);font-weight:700}

/* ---------------------------------------------- fiche chaîne : quatre informations
   Deux mots qui qualifient, deux nombres qui décident. Le reste vit dans la modale
   ouverte par le « i » : la densité d'avant traitait l'acheteur comme un analyste. */
.ch-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bg-a,.bg-e,.bg-d,.bg-p{font-size:11.5px;font-weight:600;border-radius:6px;padding:3px 9px;
  white-space:nowrap;cursor:default}
.bg-a{color:var(--lv);background:var(--lv-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lv) 22%,transparent)}
/* Badges de fiche : une couleur par NATURE d'information, pour qu'on les distingue
   sans lire. Taille d'audience, langue, catégorie YouTube, audience jeunesse, dormance.
   Aucun badge ne s'affiche si sa donnée manque. */
.bg{font-size:11.5px;font-weight:550;border-radius:6px;padding:3px 9px;white-space:nowrap;
  cursor:default;box-shadow:inset 0 0 0 1px rgba(27,28,33,.05)}
.bg-taille{color:#3C5A86;background:#E8EEF7}
.bg-langue{color:#2F6B5E;background:#E4F0EC}
.bg-cat{color:#6B4E86;background:#EFE9F6}
.bg-kids{color:#8A5A22;background:#FAEEDD}
.bg-jeune{color:#7A6A45;background:#F5F1E4}
.bg-dormante{color:#8C4F4A;background:#F8EAE8}
.li .sc2{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tagl{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tagl span{font-size:11.5px;color:var(--dim);background:var(--card-2);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px}
.mp.desc{color:var(--ink-2);line-height:1.55;white-space:pre-line}
.bg-e{color:var(--ec);background:var(--neu-bg);font-weight:500}
.bg-d{color:var(--acc-dk);background:var(--acc-soft);font-weight:500}
.bg-p{color:var(--dim);background:var(--neu-bg);font-weight:500}
/* Six mesures brutes en trois colonnes. Le libellé réserve deux lignes et s'aligne par
   le bas : sans cela, « Vues par vidéo » sur une ligne et « Vues de la chaîne » sur deux
   décalaient les chiffres d'une cellule à l'autre. */
.ch-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 12px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.ch-f > div{display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
/* Deux lignes, jamais trois : le libellé est coupé à la main par un <br> et chaque
   moitié ne se replie pas. Hauteur fixe, donc les chiffres tombent au même niveau
   quelle que soit la longueur du libellé. */
.ch-f span{height:2.5em;display:flex;align-items:flex-end;line-height:1.25;
  white-space:nowrap;overflow:hidden;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
/* La redirection et le « i » se rangent l'un sous l'autre, en tête de fiche. */
.ch-a{display:flex;flex-direction:column;gap:6px;align-items:center;flex:none}
.ch-f b{font-size:16px;font-weight:600;letter-spacing:-.02em}

/* détail d'une chaîne */
/* Détail d'une chaîne : les mêmes sept mesures que la fiche, en quatre colonnes.
   Le libellé occupe deux lignes coupées à la main, donc une hauteur fixe suffit à
   aligner tous les chiffres. */
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
@media (max-width:640px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dgrid > div{border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background:var(--card-2)}
.dpr{margin:9px 0 0;padding-left:17px;font-size:13px;color:var(--ink-2);line-height:1.55}
.dpr li{margin:4px 0}

/* La phrase de synthèse : ce que l'écran sert à faire, en mots avant les chiffres. */
.synth{font-size:15.5px;line-height:1.55;color:var(--ink-2);background:var(--acc-soft);
  border:1px solid var(--acc-line);border-radius:10px;padding:14px 16px}
.synth b{color:var(--ink);font-weight:650;font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;font-size:15px}
.synth.att{color:var(--dim);background:var(--neu-bg);border-color:var(--line)}

/* Attribut qui se coche, et non univers qui se choisit : l'audience jeunesse. */
.opt{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line)}
.opt b{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.opt span{display:block;font-size:10.5px;line-height:1.5;color:var(--faint);margin-top:2px}
.sw3{flex:0 0 auto;width:34px;height:19px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--neu-bg);position:relative;padding:0;transition:background .15s,border-color .15s}
.sw3 i{position:absolute;top:2px;left:2px;width:13px;height:13px;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}
.sw3:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}

/* ---------------------------------------------- répartition : deux boutons, pas un curseur
   Le réglage fin par univers demandait un arbitrage chaîne par chaîne que personne ne
   veut faire. Deux intentions suffisent, et elles se lisent dans les chiffres du plan. */
.rep-b{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.rep{flex:1;min-width:150px;padding:9px 12px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--card);font-size:12.5px;font-weight:550;color:var(--ink-2);text-align:left}
.rep:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.rep.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-dk);font-weight:650;
  box-shadow:inset 0 0 0 1px var(--acc)}

/* Objectif du brief : ce que le cadre privilégie. */
.obj{display:grid;gap:7px;margin-top:4px}
.ob{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--card-2);text-align:left;width:100%}
.ob:hover:not(.off){border-color:var(--acc-line);background:var(--acc-soft)}
.ob.on{border-color:var(--acc);background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc)}
.ob.off{opacity:.55;cursor:not-allowed}
.ob i{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-2);
  margin-top:2px;background:var(--card)}
.ob.on i{border-color:var(--acc);background:radial-gradient(circle,var(--acc) 0 45%,transparent 46%)}
.ob b{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ob.on b{color:var(--acc-dk)}
.ob span{display:block;font-size:10.5px;line-height:1.45;color:var(--faint);margin-top:2px}

/* Ce que l'objectif écarte : la phrase qui évite de prendre un réglage pour une panne. */
.ob-x{margin-top:9px;font-size:11px;line-height:1.5;color:var(--warn);
  background:var(--warn-bg);border-radius:8px;padding:8px 10px}
.ob-x b{color:var(--ink);font-weight:660}
/* Le même bloc, quand il n'annonce rien à surveiller : l'ambre dirait « attention » à
   propos d'un cadre intact. */
.ob-x.ok{color:var(--acc-dk);background:var(--acc-soft)}

/* ---------------- aperçu du cadre et page du cadre complet ----------------
   L'écran principal ne montre que trente chaînes : le lien qui suit dit combien il en
   reste et où elles sont, plutôt que de laisser croire que le cadre s'arrête là. */
.voir-tout{padding:13px 16px;border-radius:12px;border:1px dashed var(--acc-line);
  background:var(--acc-soft);color:var(--ink)}
.voir-tout b{display:block;font-size:12.5px;font-weight:650}
.voir-tout span{display:block;font-size:11px;color:var(--dim);line-height:1.45;margin-top:3px}

/* L'écran du cadre : c'est lui qui défile, et non une colonne dans un écran figé. La
   grille de travail s'efface, et réciproquement. */
/* L'accueil tient dans la hauteur de la fenêtre : rien à faire défiler. */
body[data-ecran="brief"]{overflow:hidden}
body[data-ecran="plan"] .cddp{display:none}
/* Tout écran qui n'est pas le plan remplace la grille de travail : accueil et
   paramétrage se comportent pareil. */
body:not([data-ecran="plan"]) .grid{display:none}
body:not([data-ecran="plan"]) .app{height:auto;min-height:100vh}
body:not([data-ecran="plan"]) .cddp{flex:1;min-height:0}
/* Tous les écrans hors plan sont centrés en hauteur, TITRE COMPRIS. Le centrage se fait
   par des marges automatiques et non par justify-content : une page plus haute que la
   fenêtre serait alors rognée en haut, sans possibilité de remonter. Avec des marges, le
   contenu se centre quand il y a de la place et défile normalement sinon. */
/* LES ÉCRANS DE PARAMÉTRAGE COMMENCENT EN HAUT, comme dans Engage, et c'est le seul
   arrangement qui tienne pour cette famille d'écrans.

   Ils étaient centrés verticalement, par des marges automatiques sur le premier et le
   dernier enfant. Le titre flottait donc au milieu de la fenêtre, et sa position
   changeait avec le nombre de fiches de la liste : à trois agences le titre était bas,
   à quinze il remontait. Un titre qui bouge selon la donnée qu'il coiffe n'est pas un
   repère.

   Le centrage garde son sens sur l'accueil, qui ne porte qu'une salutation et une
   barre. Il n'en a aucun sur une liste qui peut dépasser la hauteur de l'écran.

   Les valeurs sont celles d'Engage, pour que les deux outils se ressemblent
   réellement : même retrait, même écart entre les blocs. */
body[data-ecran="params"] .ac,body[data-ecran="users"] .ac,
body[data-ecran="campagne"] .ac,body[data-ecran="annonceur"] .ac,
body[data-ecran="agence"] .ac,body[data-ecran="campagnes"] .ac{position:static;
  justify-content:flex-start;min-height:auto;gap:24px;padding:18px 30px 60px}
/* La connexion est courte comme l'accueil : elle garde le centrage plein écran, plutôt
   que la règle des pages de paramétrage. Celles-ci peuvent dépasser la hauteur, d'où les
   marges automatiques ; ici un centrage simple suffit et ne peut rien rogner. */

/* ---------------- écran d'accueil ----------------
   Rien qu'une salutation et une barre, centrées sur la hauteur. Le rail disparaît : sur
   une page d'intro il n'y a nulle part où aller avant d'avoir choisi. */
/* Retraits symétriques : avec 90 px en bas et 20 en haut, le centrage optique remontait
   le groupe de 35 px et la page paraissait mal calée. */
/* Centrage EXACT dans la fenêtre, pas dans la place qui reste sous l'en-tête : posé en
   flux, le groupe tombait 12 px trop bas parce que la barre du haut mange sa hauteur.
   L'en-tête repasse au-dessus par son z-index, il reste donc cliquable. */
.ac{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;padding:24px}
/* TOUS les écrans posés dans cette coquille, pas seulement l'accueil : la coquille est
   fixée et couvre la fenêtre entière, donc sans ce rappel elle passe par-dessus la barre
   du haut et le logo, la palette et le menu du compte cessent de répondre. Le défaut
   s'est vu sur la page Campagnes, il valait pour les cinq écrans de réglages. */
.topbar{position:relative;z-index:5}
/* Légère et large, pas grasse : c'est ce qui fait la tenue de la référence. */
/* Les deux entrées de l'accueil : créer, ou parcourir. Elles se ressemblent, donc elles
   ont besoin d'un vrai écart, sinon elles se lisent comme un seul objet coupé en deux. */
.ac-act{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.ac-h{margin:0;text-align:center;font-size:clamp(24px,2.8vw,37px);font-weight:300;
  letter-spacing:-.01em;line-height:1.16;color:var(--ink)}

/* Une seule pilule, deux champs et le bouton. Aucun cadre autour des champs : les
   contours du select natif faisaient un formulaire là où il faut une barre. */
.ac-bar{display:flex;align-items:center;padding:7px 7px 7px 5px;border-radius:999px;
  /* Trois champs dans la largeur qu'en tenaient deux : les libellés sont courts et les
     valeurs le sont aussi, donc les colonnes se serrent sans se tronquer. */
  background:var(--card);width:min(700px,100%);box-sizing:border-box;
  box-shadow:0 18px 44px -30px rgba(10,12,40,.5)}
.ac-f{flex:1;position:relative;min-width:0}
/* La page de connexion réutilise la barre de l'accueil, mais avec de vrais champs de
   saisie et non le menu déroulant : elle a donc besoin de ses propres libellés et de
   son propre retrait, que le déclencheur portait jusqu'ici. */
.ac-f>span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:0 0 2px 16px}
.ac-f>input{width:100%;box-sizing:border-box;border:0;background:none;padding:0 14px 0 16px;
  font-size:14.5px;font-weight:520;color:var(--ink);border-radius:0}
.ac-f>input:focus{outline:none;box-shadow:none}
.ac-f>input::placeholder{color:var(--faint);font-weight:400}
label.ac-f{padding:7px 0 8px}
/* Le déclencheur occupe TOUT le champ, chevron compris : le chevron était dessiné dans
   le retrait du conteneur, donc cliquer dessus ne faisait rien. */
.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 26px 9px 15px;border-radius:999px;transition:background .14s}
.ac-t:hover,.ac-f.ouv .ac-t{background:var(--card-2)}
.ac-t:focus-visible{outline:2px solid var(--acc-line);outline-offset:-2px}
.ac-lbl{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.ac-val{font-size:14.5px;font-weight:520;color:var(--ink);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-ch{position:absolute;right:10px;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}
.ac-f.ouv .ac-ch{transform:rotate(180deg)}
.ac-sep{width:1px;height:38px;background:var(--line);flex:none}

/* Le menu, calqué sur la référence : panneau sombre arrondi, une ligne par choix avec
   son titre et sa description, une coche sur la ligne retenue. */
/* Le panneau est une version assombrie du FOND, pas un noir en dur : sur l'indigo il
   reste indigo, sur le noir il reste noir. Un panneau noir posé sur l'indigo se lisait
   comme un corps étranger. */
/* Le panneau ne pousse JAMAIS la page. Il est déjà hors du flux, mais rien ne bornait sa
   hauteur : à seize annonceurs il mesurait 750 px et dépassait de 430 px sous la fenêtre,
   donc la fin de la liste était hors d'atteinte. Il est maintenant plafonné et il défile
   chez lui, sans entraîner la page derrière lui quand on arrive au bout. */
.ac-menu{position:absolute;top:calc(100% + 10px);left:6px;min-width:min(300px,92vw);
  max-height:min(42vh,380px);overflow-y:auto;overscroll-behavior:contain;
  z-index:40;border-radius:20px;padding:8px;
  background:color-mix(in srgb,var(--bleu,#17181C) 72%,#08080C);
  backdrop-filter:blur(14px);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:2px}
/* La forme d'origine, EMPILÉE : la coche, puis le nom et sa phrase en dessous. Elle sert
   aux campagnes, dont le second niveau est une phrase et non un chiffre. */
.ac-o{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:0;
  background:none;border-radius:14px;padding:11px 14px 11px 8px;cursor:pointer;
  transition:background .12s}
/* La forme EN LIGNE : la pastille, le nom, et le compte poussé à droite. Elle sert aux
   agences et aux annonceurs, dont le second niveau tient en deux mots. */
.ac-o1{align-items:center;gap:10px;padding:9px 14px 9px 10px}
.ac-o:hover{background:rgba(255,255,255,.10)}
.ac-o:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:-2px}
/* Une barre de défilement fine et claire. Elle est VISIBLE, contrairement à celles des
   colonnes du plan : ici elle est le seul signe qu'il reste des choix dessous. */
.ac-menu{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.ac-menu::-webkit-scrollbar{width:8px}
.ac-menu::-webkit-scrollbar-track{background:transparent}
.ac-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}
.ac-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4);
  border:2px solid transparent;background-clip:content-box}
/* La pastille de gauche, TOUJOURS SUR FOND BLANC : une agence y met sa première lettre,
   un annonceur sa marque, et les deux se lisent sur le même disque clair. Le panneau du
   menu est sombre, un disque translucide y noyait la lettre comme le logo. */
.ac-mk{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  overflow:hidden;background:#fff;color:#2E3596;
  font-size:12px;font-weight:700;letter-spacing:.02em}
.ac-mk img{width:100%;height:100%;object-fit:contain;display:block}
/* La coche et le texte empilé de la forme d'origine. */
.ac-ck{width:22px;flex:none;display:grid;place-items:center;padding-top:2px}
.ac-ck svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.ac-ot{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-ot b{font-size:14px;font-weight:500;color:rgba(255,255,255,.96);line-height:1.35}
.ac-ot i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.35}
.ac-on{flex:1;min-width:0;font-size:14px;font-weight:500;color:rgba(255,255,255,.96);
  line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-os{flex:none;font-style:normal;font-size:12px;color:rgba(255,255,255,.55);
  line-height:1.35;white-space:nowrap}

/* Le bouton d'envoi prend la couleur du fond : indigo sur l'indigo, noir sur le noir. */
.ac-go{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--bleu,var(--acc));color:#fff;display:grid;place-items:center;
  margin-left:6px;transition:filter .14s}
.ac-go:hover{filter:brightness(1.18)}
.ac-go:focus-visible{outline:2px solid var(--acc-line);outline-offset:3px}
.ac-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

/* La direction Console n'a pas de fond de couleur : le menu et le bouton y reprennent
   l'accent et l'encre du thème clair. */
body[data-da="console"] .ac-go{background:var(--acc)}
/* Le bouton d'ouverture DIT quand il est prêt. Tant qu'il manque l'annonceur ou la
   campagne il reste éteint ; dès que la barre est complète il passe au vert, le même que
   celui du lien de démo, et la barre annonce d'elle-même qu'il n'y a plus qu'à ouvrir. */
.ac-go:enabled,body[data-da="console"] .ac-go:enabled{background:#0E9F6E;color:#fff;
  box-shadow:0 8px 20px -8px rgba(14,159,110,.7)}
.ac-go:enabled:hover{background:#0A7F57}
body[data-da="console"] .ac-menu{background:#17181C}
@media (max-width:720px){
  .ac-bar{flex-direction:column;align-items:stretch;border-radius:24px;gap:6px;padding:10px}
  .ac-sep{display:none}
  .ac-menu{left:0;right:0;min-width:0}
  .ac-go{width:100%;border-radius:16px;height:42px;margin:4px 0 0}
}

/* ---------------- couverture du niveau 2, en-tête trader ----------------
   Une seule ligne, qui ne se comprime pas : c'est la part de la base réellement
   achetable depuis que le cadre exige l'analyse. */
.jn2{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  padding:5px 12px;min-height:var(--pill-h,37px);box-sizing:border-box;
  border-radius:999px;background:var(--card-2);border:1px solid var(--line)}
.jn2>b{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim)}
.jn2-b{width:46px;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;
  flex:none;display:block}
.jn2-b i{display:block;height:100%;border-radius:3px;background:var(--acc);
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.jn2-p{font-size:11.5px;font-weight:650;color:var(--ink)}

/* ---------------- variation d'un chiffre du plan ----------------
   Petite, sous le nombre, et elle s'efface au bout de dix secondes. Elle ne prend jamais
   de place : sa hauteur est réservée, sinon l'apparition ferait sauter toute la grille. */
.ro-var{min-height:15px;font-size:11px;font-weight:650;letter-spacing:-.01em;
  margin-top:3px;opacity:0;transform:translateY(-2px);
  transition:opacity .3s ease,transform .3s ease}
.ro-var.vu{opacity:1;transform:none}
.ro-var.up{color:var(--ok)}
.ro-var.down{color:var(--bad)}

/* ---------------- écrans de paramétrage ----------------
   Charte de l'accueil : titre léger, et des BARRES en pilule plutôt qu'un pavé de
   formulaire. Deux ou trois champs par barre, séparés d'un filet, le bouton rond en
   bout. Chaque section porte un intitulé court, ce qui découpe la page. */
.pf{gap:26px}
.pf-w{width:min(760px,100%);box-sizing:border-box;display:flex;flex-direction:column;
  gap:22px}
/* LE BLOC UNIQUE. Les rangées vivent dedans, séparées d'un filet horizontal, et le
   bouton rond de validation ferme le bloc en bas à droite. L'essai en blocs séparés ne
   tenait pas : chaque section devenait une île et la page perdait son unité. */
.pb-mono{background:var(--card);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-go{display:flex;justify-content:flex-end;padding:8px 8px 4px;
  border-top:1px solid var(--line);margin-top:4px}
.pb-rap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 16px 12px;
  border-bottom:1px solid var(--line)}
.pb-rap>b{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-right:2px}
.pb-photo{gap:14px;padding:12px 12px 12px 14px}
.pb-ph{flex:1;min-width:0}
.pb-ph b{display:block;font-size:12.5px;font-weight:620;color:var(--ink)}
.pb-ph span{display:block;font-size:11px;color:var(--faint)}
.pb-s{display:flex;flex-direction:column;gap:9px}
.pb-t{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.pb-t>span{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--faint)}
/* La barre : même pilule que sur l'accueil. */
.pb{display:flex;align-items:center;padding:7px 7px 7px 5px;border-radius:999px;
  background:var(--card);box-shadow:0 14px 36px -28px rgba(10,12,40,.5)}
.pb+.pb{margin-top:9px}
.pb-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:7px 14px 7px 16px;border-radius:999px}
.pb-f.lg{flex:1.6}
.pb-f>span{font-size:9.5px;font-weight:600;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(--ink);border-radius:0;
  appearance:none;-webkit-appearance:none}
.pb-f input:focus,.pb-f select:focus{outline:none;box-shadow:none}
.pb-f input::placeholder{color:var(--faint);font-weight:400}
.pb-f input:disabled,.pb-f select:disabled{color:var(--faint);background:none;
  cursor:not-allowed;opacity:1}
.pf-trio{max-width:320px}
/* Le texte d'aide sous le titre : centré comme le titre, et jamais plus large que la
   ligne de lecture confortable. */
.pf-s{margin:0;align-self:center;text-align:center;font-size:12.5px;color:var(--dim);
  max-width:520px;line-height:1.6}
/* Les messages de confirmation sont CENTRÉS, comme les titres et les textes d'aide :
   ils répondent à une action et se lisent au milieu de la page, pas collés à gauche. */
.pf-msg{font-size:12px;color:var(--acc-dk);line-height:1.55;text-align:center;
  max-width:520px;align-self:center}
.pf-msg:empty{display:none}
/* Pastilles de rappel de l'existant. */
.pf-liste{display:flex;flex-wrap:wrap;gap:6px}
.pf-pu{font-size:11.5px;padding:5px 11px;border-radius:999px;background:var(--card);
  color:var(--ink-2);box-shadow:0 8px 20px -18px rgba(10,12,40,.5)}
.pf-pu.off{opacity:.5;text-decoration:line-through}
/* Photo du compte. */
.pf-av{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:20px;
  background:var(--card);box-shadow:0 14px 36px -28px rgba(10,12,40,.5)}
/* Liste des utilisateurs : la mise en forme des lignes de chaînes. Carte pleine quand le
   compte est actif, voile transparent quand il est éteint : l'état se lit sans lire. */
.pu-l{display:flex;flex-direction:column;gap:8px}
.pu{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;
  background:var(--card);box-shadow:0 10px 26px -20px rgba(10,12,40,.4);transition:.14s}
.pu-av{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc-dk);font-size:10px;font-weight:700}
.pu-n{font-size:13px;font-weight:600;color:var(--ink);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);background:var(--acc-soft);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
/* Le crayon de modification, et l'en-tête d'actions au dessus de la liste. */
.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 svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pu-ed:hover{background:var(--acc-soft)}
.pu-ed:hover svg{stroke:var(--acc)}
.pu.ed{box-shadow:0 0 0 2px var(--acc)}
.pu-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pu-h .ac-plus{align-self:auto}
/* Le bouton + reprend celui de l'accueil. */
.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:var(--card);color:var(--ink-2);align-self:center;
  box-shadow:0 10px 26px -20px rgba(10,12,40,.5);transition:.14s}
/* Dans une liste, en revanche, il se cale à gauche sous les lignes. */
.pf-w .ac-plus{align-self:flex-start}
.ac-plus:hover{color:var(--acc-dk);transform:translateY(-1px)}
.ac-plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round}
.mn-sep{height:1px;background:var(--line);margin:5px 4px}

/* ---------------- couverture du niveau 2, en-tête trader ----------------
   Une seule ligne, qui ne se comprime pas : c'est la part de la base réellement
   achetable depuis que le cadre exige l'analyse. */
.jn2{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  padding:5px 12px;min-height:var(--pill-h,37px);box-sizing:border-box;
  border-radius:999px;background:var(--card-2);border:1px solid var(--line)}
.jn2>b{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim)}
.jn2-b{width:46px;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;
  flex:none;display:block}
.jn2-b i{display:block;height:100%;border-radius:3px;background:var(--acc);
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.jn2-p{font-size:11.5px;font-weight:650;color:var(--ink)}

/* ---------------- variation d'un chiffre du plan ----------------
   Petite, sous le nombre, et elle s'efface au bout de dix secondes. Elle ne prend jamais
   de place : sa hauteur est réservée, sinon l'apparition ferait sauter toute la grille. */
.ro-var{min-height:15px;font-size:11px;font-weight:650;letter-spacing:-.01em;
  margin-top:3px;opacity:0;transform:translateY(-2px);
  transition:opacity .3s ease,transform .3s ease}
.ro-var.vu{opacity:1;transform:none}
.ro-var.up{color:var(--ok)}
.ro-var.down{color:var(--bad)}

/* ---------------- bande des leviers de la campagne ----------------
   Une campagne peut porter plusieurs plans : YouTube, la programmatique, le DOOH. La
   bande les met en onglets au dessus du bloc « Votre plan », et un rond « + » ouvre
   l'invite des leviers qui restent à créer.

   Sa hauteur est FIXE et déclarée en variable, parce que le CSS doit la connaître : la
   bande ne coiffe que la colonne du milieu, donc les deux colonnes latérales prennent
   exactement le même retrait, faute de quoi la première carte du brief ne tomberait plus
   en face du plan et toute la mécanique d'alignement des rangées serait à refaire. */
:root{--lev-h:34px}
.lev:empty{display:none}
.lev{flex:none}
/* Les onglets sont CENTRÉS sur la colonne du plan : c'est le titre de ce qu'on lit
   dessous, et un titre se pose au milieu de sa colonne. */
.lev-b{display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--lev-h)}
.lev-o{display:inline-flex;align-items:center;gap:7px;height:var(--lev-h);box-sizing:border-box;
  border:1px solid var(--line-2);background:var(--card);color:var(--dim);
  border-radius:999px;padding:0 6px 0 13px;font:inherit;font-size:12.5px;font-weight:560;
  cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.lev-o>span{padding-right:7px}
.lev-o svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lev-o:hover{color:var(--ink);border-color:var(--acc-line)}
.lev-o.on{background:var(--acc);border-color:var(--acc);color:#fff}
.lev-o:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}
/* La croix ne s'affiche que sur l'onglet regardé, et seulement s'il reste un plan
   derrière : une campagne sans aucun plan n'existe pas. */
.lev-x{font-style:normal;width:19px;height:19px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:rgba(255,255,255,.18);transition:background .12s}
.lev-x:hover{background:rgba(255,255,255,.34)}
/* Le rond « + », fermé sur lui-même comme la palette de fonds. */
.lev-a{position:relative;display:flex;align-items:center}
.lev-p{width:var(--lev-h);height:var(--lev-h);flex:none;border-radius:50%;cursor:pointer;
  border:1px dashed var(--line-2);background:var(--card);color:var(--dim);
  display:grid;place-items:center;transition:.14s}
.lev-p svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round}
.lev-p:hover{border-style:solid;border-color:var(--acc);color:var(--acc);
  transform:translateY(-1px)}
.lev-p:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}
/* L'invite reprend le menu de l'accueil, un titre et une description par ligne, avec
   l'icône du levier à la place de la coche. */
.lev-m{position:fixed;top:0;left:0;width:min(340px,calc(100vw - 28px));min-width:0}
.lev-mt{margin:2px 8px 6px 10px;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.lev-ck{width:26px;padding-top:1px}
.lev-ck svg{width:16px;height:16px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* La bande vit hors de la grille : les trois colonnes descendent donc ENSEMBLE et il
   n'y a plus de compensation par colonne à tenir.

   Les deux espaces, au dessus et en dessous de la bande, sont ÉGAUX par construction, à
   partir d'un seul jeton. Chacun part d'un vide déjà présent qu'il faut déduire : au
   dessus, l'en-tête laisse 19 px sous la pilule de campagne, mesurés et non déduits, car
   son retrait haut de 22 px et son retrait bas de 10 px se combinent à la hauteur de la
   pilule ; en dessous, la grille de la direction Studio pose 8 px avant les colonnes. */
:root{--lev-air:24px; --lev-air-h:19px; --lev-air-b:8px}
body[data-bande="on"] .lev{padding:calc(var(--lev-air) - var(--lev-air-h)) 0 0}
body[data-bande="on"] .zn-brief,body[data-bande="on"] .zn-pot,
body[data-bande="on"] .zn-sel{padding-top:calc(var(--lev-air) - var(--lev-air-b))}
/* La direction Console ne pose pas ces 8 px : son jeton est donc nul. */
body[data-da="console"]{--lev-air-b:0px}
/* LA PROGRAMMATIQUE A REPRIS SES TROIS COLONNES le 9 septembre 2026, quand sa base a
   été branchée. Ces cinq règles la mettaient sur une seule colonne centrée, du temps où
   elle n'avait ni brief ni liste : elles sont retirées, elle vit maintenant dans la même
   ossature que YouTube et le DOOH. Un levier resté sans base retomberait sur
   « planLevier », qui vide les deux colonnes latérales sans les masquer. */
@media (max-width:1180px){
  body[data-bande="on"] .zn-brief,body[data-bande="on"] .zn-pot,
  body[data-bande="on"] .zn-sel{padding-top:0}
}

/* ---------------- levier DOOH ----------------
   Le plan DOOH reprend les objets du plan YouTube, cartes, pastilles, sélecteurs à
   trois états. Il n'ajoute que ce qui lui est propre : la saisie des codes postaux, les
   barres de répartition, la carte et la liste d'écrans. */
.dh-ta{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;font:inherit;font-size:12.5px;line-height:1.6;color:var(--ink);
  background:var(--card);resize:vertical;min-height:74px}
.dh-ta:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
/* ---- autour des points d'intérêt ----
   QUATRE MODES DE ZONE, DEUX PAR DEUX. Le sélecteur à trois états devient une grille
   de deux sur deux : « Codes postaux » et « Autour des POI » ne tiennent pas dans un
   quart de colonne de deux cent quatre-vingts pixels, et un libellé coupé se lit moins
   bien qu'un bouton de plus. */
.dh-z4{display:grid;grid-template-columns:1fr 1fr}
.dh-z4 .tr{border-bottom:1px solid var(--line-2)}
.dh-z4 .tr:nth-child(2n){border-right:0}
.dh-z4 .tr:nth-last-child(-n+2){border-bottom:0}
/* La saisie d'une adresse : le champ prend la place, le bouton ne prend que son mot. */
.poi-s{display:flex;gap:7px;align-items:stretch}
.poi-s input{flex:1;min-width:0;box-sizing:border-box;border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;font:inherit;font-size:12.5px;color:var(--ink);
  background:var(--card)}
.poi-s input:focus{outline:none;border-color:var(--acc-line);
  box-shadow:0 0 0 3px var(--acc-soft)}
.poi-s .btn{white-space:nowrap}
/* Les propositions du géocodeur. Elles se cliquent, et chacune DIT SA PRÉCISION : à
   cinquante mètres, « rue » et « numéro exact » ne désignent pas le même trottoir. */
.poi-p{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.poi-pr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;border:1px solid var(--line-2);border-radius:10px;background:var(--card);
  padding:7px 10px;font:inherit;cursor:pointer;transition:.12s}
.poi-pr:hover{border-color:var(--acc);background:var(--acc-soft)}
.poi-pr span{font-size:12px;font-weight:560;color:var(--ink);line-height:1.35}
.poi-pr i{font-size:10px;font-style:normal;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase;font-weight:640}
/* Les points retenus. Le vert est la couleur du point sur la carte : la pastille de la
   liste et le disque de la carte doivent se reconnaître sans légende. */
.poi-l{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.poi-r{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--card);padding:7px 8px 8px 10px}
.poi-r.vide{border-color:var(--warn);background:var(--warn-bg)}
/* DEUX LIGNES PAR POINT : l'adresse garde toute la largeur, le rayon et le compte
   s'alignent dessous. Sur une seule ligne, un menu de rayon réduisait le nom de
   l'adresse à trois mots et un point de suspension. */
.poi-r1{display:flex;align-items:center;gap:8px}
.poi-r2{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-left:17px}
.poi-sel{border:1px solid var(--line-2);border-radius:8px;background:var(--card-2);
  color:var(--ink);font:inherit;font-size:11px;font-weight:560;padding:3px 4px 3px 6px;
  cursor:pointer}
.poi-sel:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
/* L'IMPORT D'UNE LISTE. Le panneau vit sous le champ d'adresse, replié par défaut :
   on importe une fois, on ajuste ensuite, et un bloc toujours ouvert prendrait la place
   de la liste qu'il sert à remplir. */
.poi-imp{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.poi-impb{display:flex;gap:7px;align-items:center}
.poi-impb .btn{flex:1;text-align:center;cursor:pointer}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{filter:brightness(1.06)}
.btn.acc:disabled{opacity:.55;cursor:default;filter:none}
/* Le compte rendu d'un import : ce qui est entré, ce qui est approché, ce qui manque.
   Les trois se lisent d'un coup, faute de quoi on croirait tout importé. */
.poi-rap{position:relative;margin-top:9px;border:1px solid var(--acc-line);
  background:var(--acc-soft);border-radius:10px;padding:9px 26px 9px 11px;
  font-size:11px;line-height:1.5;color:var(--ink)}
.poi-rap.ko{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.poi-rap b{font-weight:660}
.poi-rap .poi-x{position:absolute;top:4px;right:6px}
.poi-rd,.poi-rk{display:block;margin-top:4px;color:var(--dim)}
.poi-rk{color:var(--warn)}
/* Une adresse approchée : la pastille passe en creux et un « ? » précède le nom. Un
   point posé sur la rue voisine ne se voit plus une fois dans la liste. */
.poi-d.doute{background:transparent;box-shadow:inset 0 0 0 2px #22C55E}
.poi-q{display:inline-block;width:13px;height:13px;line-height:13px;text-align:center;
  border-radius:50%;background:var(--warn);color:#fff;font-size:9px;font-weight:700;
  vertical-align:1px;cursor:help}
/* Les points, lus par le client : l'adresse et son rayon, sans commande. */
.poi-lu{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.poi-lr{display:flex;align-items:center;gap:8px;font-size:12px}
.poi-lr>span{flex:1;min-width:0;color:inherit;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.poi-lr>b{font-weight:660;white-space:nowrap}
.poi-d{width:9px;height:9px;border-radius:50%;background:#22C55E;flex:none;
  box-shadow:0 0 0 2px rgb(34 197 94 / .22)}
.poi-n{flex:1;min-width:0;font-size:12px;font-weight:560;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poi-c{font-size:10.5px;color:var(--dim);white-space:nowrap;text-align:right}
.poi-r.vide .poi-c{color:var(--warn)}
.poi-x{border:0;background:none;padding:0 2px;font:inherit;font-size:15px;line-height:1;
  color:var(--faint);cursor:pointer;flex:none}
.poi-x:hover{color:var(--ink)}
/* La réglette du rayon. Sa valeur est écrite au dessus, en gros : c'est le chiffre que
   le trader règle, il ne doit pas se lire dans une infobulle. */
.poi-ray{margin-top:11px}
.poi-rh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:4px}
.poi-rh b{font-size:14px;font-weight:680;color:var(--acc);white-space:nowrap}
.poi-sl{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:var(--line-2);outline:none;margin:6px 0 2px}
.poi-sl::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--acc);border:2px solid var(--card);cursor:pointer;
  box-shadow:0 1px 3px rgb(0 0 0 / .25)}
.poi-sl::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);
  border:2px solid var(--card);cursor:pointer}
.poi-re{display:flex;justify-content:space-between;font-size:10px;color:var(--faint)}
.hint.err{color:var(--warn)}
/* Les départements sont nombreux : leur bloc défile plutôt que d'allonger la colonne. */
.dh-dpt{max-height:190px;overflow-y:auto;margin-top:8px;padding-right:2px;
  scrollbar-width:none}
.dh-dpt::-webkit-scrollbar{width:0}
/* Répartition : un libellé, deux compteurs, une barre. La barre porte la comparaison,
   les chiffres portent la valeur. */
.dh-rep{display:flex;flex-direction:column;gap:11px}
.dh-r{display:flex;flex-direction:column;gap:5px}
.dh-rl{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dh-rl>b{font-size:12.5px;font-weight:600;color:var(--ink)}
.dh-rl>span{font-size:11px;color:var(--dim);white-space:nowrap}
.dh-rb{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.dh-rb>i{display:block;height:100%;border-radius:3px;background:var(--acc);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
/* La carte. UN SEUL CADRE, celui du bloc : le cadre intérieur faisait un cadre dans un
   cadre et alourdissait le bloc pour rien.

   Elle occupe TOUTE la largeur du bloc. Les deux bandes libres que je lui avais laissées
   n'ont plus d'objet : la molette fait maintenant défiler la colonne même au dessus de
   la carte, il n'y a donc plus de zone de repli à ménager, et une carte a besoin de
   toute la place qu'on peut lui donner. */
.dh-carte{position:relative;width:100%;aspect-ratio:1 / 1.06;overflow:hidden;
  touch-action:pan-y}
.dh-carte>canvas{display:block;width:100%;height:100%;cursor:crosshair}
.dh-carte>canvas.tire{cursor:grabbing}
/* Les commandes de zoom, sur la LIGNE DU TITRE du bloc et alignées avec lui. Elles
   étaient posées dans un coin de la carte, où elles couvraient le dessin et où rien ne
   les rattachait au bloc. Les marges négatives absorbent la hauteur du bouton dans celle
   du titre, sinon l'intitulé se décalerait de dix pixels par rapport aux autres blocs. */
.dh-zc{margin:-6px -2px -6px auto;display:flex;align-items:center;gap:5px;flex:none}
.dh-zb{width:24px;height:24px;border-radius:7px;cursor:pointer;padding:0;flex:none;
  display:grid;place-items:center;border:1px solid var(--line-2);
  background:var(--card);color:var(--dim);transition:.12s}
.dh-zb:hover{color:var(--acc);border-color:var(--acc-line);background:var(--card-2)}
.dh-zb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* L'échelle courante, à gauche des boutons. Vide au cadrage complet. */
.dh-zn{font-size:10.5px;font-weight:650;letter-spacing:0;text-transform:none;
  color:var(--faint);margin-right:3px}
.dh-zn:empty{display:none}
/* L'étiquette de survol. Elle ne prend jamais le pointeur : elle suit le curseur, et
   l'intercepter la ferait clignoter sous lui. */
.dh-tip{position:absolute;z-index:3;pointer-events:none;min-width:110px;
  padding:7px 10px 8px;border-radius:10px;line-height:1.35;
  background:rgba(14,15,32,.86);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.dh-tip b{display:block;font-size:12px;font-weight:650;color:#fff}
.dh-tip i{display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.55)}
.dh-tip span{display:block;margin-top:3px;font-size:10.5px;color:rgba(255,255,255,.82)}
/* Cinq indicateurs sur trois colonnes. Le sélecteur bat celui de la direction Studio,
   qui impose une trame de quatre : ici la seconde rangée n'en porte que deux et une
   trame de quatre laisserait deux trous. */
.readout.dh-ro{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Liste des écrans, sur le modèle des lignes de chaînes. */
.dh-fam{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.dh-l{display:flex;flex-direction:column;gap:8px}
.dh-e{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:2px 10px;padding:10px 13px;border-radius:13px;background:var(--card-2);
  border:1px solid var(--line-2)}
.dh-en{grid-column:1;font-size:12.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-em{grid-column:1;font-size:11px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-eo{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:11.5px;
  color:var(--acc-dk);white-space:nowrap}
/* Les deux exports DOOH, chacun sa couleur. Displayce prend le jaune orange, qui est le
   point le plus contrasté de la colonne ; Data Studio garde l'encre d'Atlas. Deux
   destinations qui se distinguent d'un coup d'oeil valent mieux que deux boutons jumeaux
   qu'on lit avant de cliquer. */
.btn-displayce{background:var(--or);color:#241900;
  box-shadow:0 2px 10px -2px rgba(255,171,0,.45)}
.btn-displayce:hover{background:var(--or-dk);box-shadow:0 4px 16px -3px rgba(255,171,0,.55)}
.btn-displayce:focus-visible{outline-color:var(--or)}
.btn-displayce .yt-t span{color:rgba(36,25,0,.72)}
.btn-displayce .yt-f{stroke:rgba(36,25,0,.7)}
/* La marque Displayce est blanche : sur le jaune elle disparaîtrait. On la repeint en
   encre sombre par un masque, comme le logo Atlas dans l'en-tête. */
.btn-displayce .dh-mk{background:#241900;
  -webkit-mask:url(/logo-displayce.png) center/contain no-repeat;
          mask:url(/logo-displayce.png) center/contain no-repeat}
/* Les deux exports PROGRAMMATIQUES, même principe. DV360 prend le bleu de Google, dont
   il est un produit ; The Trade Desk une ardoise sombre, la couleur de sa propre
   console. Sans ces deux règles ils héritaient du rouge de l'export YouTube, comme le
   lien client avant eux. */
.btn-dv360{background:#1A73E8;box-shadow:0 2px 10px -2px rgba(26,115,232,.45)}
.btn-dv360:hover{background:#1257B8;box-shadow:0 4px 16px -3px rgba(26,115,232,.55)}
.btn-dv360:focus-visible{outline-color:#1A73E8}
.btn-ttd{background:#2F3A4A;box-shadow:0 2px 10px -2px rgba(47,58,74,.5)}
.btn-ttd:hover{background:#222A36;box-shadow:0 4px 16px -3px rgba(47,58,74,.6)}
.btn-ttd:focus-visible{outline-color:#2F3A4A}
.btn-datastudio{background:var(--acc);box-shadow:0 2px 10px -2px rgba(90,99,232,.45)}
.btn-datastudio:hover{background:var(--acc-dk);box-shadow:0 4px 16px -3px rgba(90,99,232,.55)}
.btn-datastudio:focus-visible{outline-color:var(--acc)}
.btn-yt:disabled{opacity:.45;cursor:not-allowed}
/* Le bloc d'export DOOH respire en bas comme en haut : il ne porte plus que deux
   boutons, et sans ce retrait le second touchait le bord de la carte. */
#b3 .exp-bloc{padding-bottom:16px}
/* Pastilles de familles : fond de second plan, sinon elles disparaissent sur la carte
   blanche qui les porte. */
.dh-p{font-size:11px;padding:4px 10px;border-radius:999px;background:var(--card-2);
  border:1px solid var(--line-2);color:var(--ink-2)}
.dh-p b{color:var(--faint);font-weight:600;margin-left:3px}

/* ---------------- miniature d'un annonceur ----------------
   L'aperçu reprend la forme que la miniature aura dans le sélecteur de campagne : un
   disque blanc. Les logos de marque sont détourés sur blanc, donc le disque disparaît
   sous l'image et seule la marque se voit. Sans image, les deux premières lettres du
   nom, pour que la case ne soit jamais vide. */
.pf-mk{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-2), 0 6px 16px -10px rgba(10,12,40,.5)}
.pf-mk img{width:100%;height:100%;object-fit:contain;display:block}
.pf-mk.vide{background:var(--acc-soft);box-shadow:none}
.pf-mk>b{font-size:14px;font-weight:700;color:var(--acc-dk);letter-spacing:.02em}
/* Une pastille de rappel qui porte sa marque. */
.pf-pu.img{display:inline-flex;align-items:center;gap:6px;padding-left:5px}
.pf-pu.img img{width:18px;height:18px;border-radius:50%;background:#fff;
  object-fit:contain;flex:none}
/* Le champ de fichier natif ne se met pas en forme : il est masqué et c'est le bouton
   qui le déclenche. Il garde sa place dans le document pour rester atteignable au
   clavier par le bouton qui le vise. */
.pb-photo input[type=file]{display:none}
/* La pastille du menu de l'accueil a pris la place de la coche : sur une liste de
   marques, l'image identifie plus vite qu'un nom. La coche portait aussi l'état retenu,
   et le perdre aurait laissé la liste muette sur son propre choix : c'est donc le FOND
   de la ligne qui le dit, et il vaut pour toutes les listes.
   La règle de taille qui vivait ici visait une balise « img » et écrasait la pastille
   ronde depuis qu'elle porte aussi des initiales : elle est retirée. */
.ac-o[aria-selected="true"]{background:rgba(255,255,255,.13)}
.ac-o[aria-selected="true"] .ac-on{color:#fff}
/* Une pastille de liste qui porte une miniature. Sans contrainte de taille, l'image
   s'affichait à sa taille naturelle et débordait sur toute la page : la case est en
   grille, elle ne borne pas son contenu. */
.pu-av{overflow:hidden}
.pu-av.img{background:#fff}
.pu-av.img img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------------- tri d'une liste de paramétrage ----------------
   Une recherche et des filtres, posés sur un voile et non sur une carte : c'est un outil
   de lecture, il doit s'effacer devant les fiches qu'il sert. */
.pu-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pu-src{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;
  padding:0 12px;height:36px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line-2)}
.pu-src svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--faint);
  stroke-width:2;stroke-linecap:round}
.pu-src input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;
  font-size:12.5px;color:var(--ink)}
.pu-src input:focus{outline:none;box-shadow:none}
.pu-src input::placeholder{color:var(--faint)}
.pu-src input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5}
.pu-sel{height:36px;flex:none;max-width:180px;border-radius:999px;padding:0 30px 0 13px;
  font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;
  background:var(--card-2);border:1px solid var(--line-2);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
.pu-sel:focus{outline:none;border-color:var(--acc-line)}
/* Les leviers d'une campagne, en badges. Plusieurs par ligne, donc un groupe et non un
   badge unique. */
.pu-lv{display:flex;align-items:center;gap:5px;flex:none}
.pu-lvb{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:10px;font-weight:620;padding:3px 9px 3px 7px;border-radius:999px;
  background:var(--acc-soft);color:var(--acc-dk)}
.pu-lvb svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------------- masquer les fiches éteintes ----------------
   Sous le titre d'un écran de liste, une pilule qui porte son interrupteur et son
   libellé. Elle remplace la phrase d'explication qui vivait là : une action vaut mieux
   qu'un commentaire.

   Le cadre de la pilule est ce qui rend le réglage visible. L'interrupteur seul se
   perdait sur le fond, dans un état comme dans l'autre. */
/* PAS D'APLAT derrière ce réglage. La pilule pleine le faisait ressembler aux champs de
   recherche et aux filtres qui vivent juste en dessous, et on cherchait à taper dedans.
   Ce qui le rend visible, c'est son INTERRUPTEUR : éteint il porte un contour franc,
   allumé il prend l'encre pleine. Le libellé suit la même bascule. */
/* (« .pf-mqz » portait le bouton « Masquer les désactivés », retiré) */
.pf-mq{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;
  font-size:12px;font-weight:520;color:var(--dim);line-height:1;
  padding:6px 6px 6px 2px;border-radius:999px;background:none;border:0;transition:.14s}
.pf-mq:hover{color:var(--ink)}
.pf-mq:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}
.pf-mq.on{color:var(--acc-dk);font-weight:600}
/* Une agence sans rétrocession : le badge reste, mais sans l'accent, parce qu'il ne dit
   pas un taux, il dit son absence. */
.pu-r0{background:var(--card-2);color:var(--faint)}
/* La phrase qui dit l'effet des taux d'agence. Elle hérite sinon de l'encre BLANCHE du
   fond de couleur, alors qu'elle vit dans une carte blanche : elle disparaissait. */
.pb-eff{display:block;font-size:12px;font-weight:500;line-height:1.5;
  color:var(--ink-2);padding-top:2px}
/* L'agence du plan ne se choisit plus : elle se lit. Même gabarit qu'un champ, sans le
   cadre ni le curseur, pour que la colonne garde son alignement. */
.f-fixe{display:flex;align-items:center;height:35px;padding:0 2px;font-size:13px;
  font-weight:600;color:var(--ink)}

/* ---------------- suppression d'une fiche ----------------
   Rouge, à l'opposé du bouton de validation, et à deux temps : le premier clic l'arme,
   le second supprime. La couleur ne se négocie pas, c'est la seule action de ces écrans
   qui ne se rattrape pas. */
.btn-sup{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;
  font-size:12px;font-weight:560;line-height:1;padding:9px 14px 9px 11px;
  border-radius:999px;color:#C0261C;background:#FDEEEC;border:1px solid #F3CFCB;
  transition:.14s}
.btn-sup svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn-sup:hover{background:#FBDFDC;border-color:#E9B6B0}
.btn-sup:focus-visible{outline:2px solid #C0261C;outline-offset:2px}
/* Armé, il ne laisse plus de doute : il devient plein. */
.btn-sup.arme{background:#C0261C;border-color:#C0261C;color:#fff}
.btn-sup.arme:hover{background:#9E1E15;border-color:#9E1E15}
.pb-go .sp{flex:1}
/* Un champ de l'accueil sans choix : son invite est grise, pour qu'on voie d'un coup
   d'oeil ce qui reste à désigner. */
.ac-val.vide{color:var(--faint);font-weight:450}
.ac-t:disabled{cursor:not-allowed}
.ac-t:disabled .ac-val{opacity:.55}
.ac-go:disabled{opacity:.35;cursor:not-allowed}
.ac-go:disabled:hover{filter:none}
/* Une entrée de rail éteinte : elle reste lisible, elle ne réagit plus. */
.rl-i:disabled{opacity:.38;cursor:not-allowed}
.rl-i:disabled:hover{background:none}

/* ---------------- toute pastille qui porte une marque est BLANCHE ----------------
   Les logos d'agence et d'annonceur sont détourés sur blanc : posés sur un voile clair
   ou sur un fond de couleur, ils perdent leur contour et deviennent illisibles. La règle
   vaut partout et dans tous les états, y compris sur une fiche éteinte, où la règle de
   la direction Studio reprenait le voile et l'emportait sur la mienne. */
.pu .pu-av.img,
.pu.off .pu-av.img,
body[data-da="studio"] .pu .pu-av.img,
body[data-da="studio"] .pu.off .pu-av.img,
.pf-mk:not(.vide){background:#fff}

/* ---------------- écran Campagnes ----------------
   La liste de travail : on l'ouvre pour retrouver ce sur quoi on travaille, pas pour
   éditer. Chaque carte est un bouton, et son clic mène au plan. */
/* ---------------- le brief programmatique ----------------
   DEUX FORMES, ET DEUX SEULES. Un sélecteur à segments quand le choix est exclusif ou
   presque, des cartes d'appareil quand il faut reconnaître un écran sans lire. Les
   pastilles à cocher restent pour les univers et les formats, où il y en a seize et
   quinze : un segment de quinze cases n'est plus un segment. */
.pg-inv{display:flex;flex-direction:column;gap:16px}
.pg-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;
  background:var(--neu-bg);border:1px solid var(--line)}
.pg-s{flex:1 1 auto;min-width:0;border:0;background:none;cursor:pointer;font:inherit;
  font-size:12px;font-weight:560;color:var(--dim);padding:7px 11px;border-radius:9px;
  white-space:nowrap;transition:.12s}
.pg-s:hover{color:var(--ink)}
.pg-s.on{background:var(--card);color:var(--ink);font-weight:640;
  box-shadow:0 1px 3px rgba(10,12,40,.12)}
.pg-s .num{margin-left:5px;font-weight:600;color:var(--faint)}
.pg-s.on .num{color:var(--acc)}
/* Les appareils : une carte par écran, l'icône au-dessus du mot, le compte en dessous.
   C'est le seul endroit du brief où l'on choisit un OBJET physique, et une icône le dit
   plus vite qu'un libellé. */
.pg-dev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
/* Le type d'emplacement n'a que trois cases : elles se partagent la même largeur. */
.pg-dev-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Un bouton dont le compte est tombé à zéro : il reste lisible, il ne répond plus. */
.pg-d:disabled{opacity:.4;cursor:not-allowed}
.pg-d:disabled:hover{border-color:var(--line-2);background:var(--card)}
.tag:disabled{opacity:.4;cursor:not-allowed}
/* QUATRE INDICATEURS SUR UNE SEULE LIGNE dans le plan programmatique : les URLs, le
   taux de clic, les univers traversés et les formats servis. Ils tiennent la ligne
   jusqu'en bas de l'échelle, c'est la TYPOGRAPHIE qui cède et non la trame : quatre
   chiffres qui passent sur deux rangées ne se comparent plus d'un coup d'oeil, et c'est
   la seule raison d'être d'un bandeau d'indicateurs. */
.pg-ro4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pg-ro4 .v{font-size:34px;letter-spacing:-.04em}
@media (max-width:1320px){ .pg-ro4{gap:14px} .pg-ro4 .v{font-size:28px} }
@media (max-width:1180px){ .pg-ro4{gap:10px} .pg-ro4 .v{font-size:24px} }
/* La liste filtrée jusqu'au vide : elle le dit à sa place, dans le cadre de la liste. */
.li-vide{padding:26px 18px;text-align:center;color:var(--dim);font-size:12.5px}
.pg-d{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  font:inherit;padding:10px 4px 8px;border-radius:12px;background:var(--card);
  border:1px solid var(--line-2);transition:.12s}
.pg-d:hover{border-color:var(--acc-line);background:var(--card-2)}
.pg-d.on{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc)}
.pg-d svg{width:20px;height:20px;fill:none;stroke:var(--dim);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pg-d.on svg{stroke:var(--acc-dk)}
.pg-d span{font-size:10.5px;font-weight:560;color:var(--ink-2);text-align:center;
  line-height:1.15}
.pg-d.on span{color:var(--acc-dk);font-weight:640}
.pg-d b{font-size:11px;font-weight:640;color:var(--faint)}
.pg-d.on b{color:var(--acc)}
/* La taille du format, derrière son nom : présente pour qui la cherche, effacée pour
   qui lit le nom. */
.pg-t{font-style:normal;font-size:9.5px;font-weight:500;color:var(--faint);
  margin-left:4px}
.tag.on .pg-t{color:var(--acc)}
/* Une pastille d'univers vide, pour les emplacements sans univers : la colonne de la
   liste garde son alignement. */
.uic.vide{background:none;box-shadow:none}
.ext.vide{border:0;color:var(--line-2)}

/* La rangée des réglages, rendue cliquable sur l'écran Campagnes. */
.pu-cl{cursor:pointer;transition:.14s}
.pu-cl:hover{border-color:var(--acc-line);
  box-shadow:0 12px 28px -22px rgba(10,12,40,.5)}
.pu-cl:focus-visible{outline:2px solid var(--acc-line);outline-offset:2px}

/* ---------------- détail des marges, replié par défaut ----------------
   Cinq lignes de décomposition à chaque ouverture du plan noyaient les chiffres qu'on
   vient lire. Le prix de vente reste visible, c'est la conclusion. */
.px-plus{display:inline-flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;
  font:inherit;font-size:11px;font-weight:560;color:var(--dim);background:none;border:0;
  padding:4px 2px;transition:color .12s}
.px-plus:hover{color:var(--acc-dk)}
.px-plus svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.px-plus.ouv svg{transform:rotate(180deg)}

/* La pastille claire du lien client, sous son icône de chaîne. */
.dm-i{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.18)}
.dm-i svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;color:#fff}

/* Les outils d'exploitation du trader, en tête de la colonne de droite. */
.ops{display:flex;flex-direction:column;gap:8px}
.ops .jn2,.ops .tb-c2{width:100%;flex:1 1 auto}
.ops .jn2{justify-content:space-between}
.ops .jn2-b{flex:1;width:auto;margin:0 4px}

/* ---------------- le brief lu, dans la démo ----------------
   Des valeurs, pas des commandes : une ligne par choix, et seulement ce qui a été
   retenu. Rien ici ne doit se lire comme cliquable. */
.vl{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.vl:last-child{border-bottom:0;padding-bottom:0}
.vl:first-child{padding-top:0}
.vl>span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.vl>b{font-size:13.5px;font-weight:640;color:var(--ink);text-align:right;
  letter-spacing:-.01em}
.vl-s{margin-top:12px;padding-top:2px;border-top:1px solid var(--line)}
.vp{display:flex;flex-wrap:wrap;gap:7px}
.vp>span{font-size:12px;font-weight:560;color:var(--acc-dk);background:var(--acc-soft);
  border-radius:999px;padding:6px 12px;line-height:1.15}
/* Les chiffres de tête. Ils portent la carte : c'est la même encre et la même graisse
   que les indicateurs du plan, en plus petit, pour que les deux colonnes se répondent. */
.vk{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding-bottom:13px;
  margin-bottom:11px;border-bottom:1px solid var(--line)}
/* QUATRE RÉGLAGES : deux rangées, donc un écart entre elles. Dix pixels suffisaient
   entre deux colonnes, pas entre deux lignes de valeurs : le marché se lisait collé
   sous le budget. Et le trait du bas disparaît, parce qu'il ne sépare plus rien : il
   fermait une grille suivie de lignes, ici la grille EST le bloc. */
.vk-4{gap:22px 14px;padding-bottom:0;margin-bottom:0;border-bottom:0}
.vk>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.vk span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.vk b{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--ink);
  line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La SECONDE RANGÉE de la grille garde les colonnes mais pas le corps : le marché et la
   langue s'alignent sous le budget et la durée, en plus petit, parce qu'un pays n'est
   pas un chiffre qu'on vient chercher. Le sélecteur porte sur les cellules 3 et 4, donc
   il tient quel que soit le nombre de réglages posés. */
.vk>div:nth-child(n+3) b{font-size:14.5px;font-weight:620;letter-spacing:-.01em}
/* Le compte des univers, en tête de sa liste. */
.vn{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.vn>b{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1}
.vn>span{font-size:11.5px;color:var(--faint)}
/* L'objectif retenu : un titre qui porte, sa définition, puis ce qu'il écarte. */
.vo{display:flex;flex-direction:column;gap:4px;margin-bottom:2px}
.vo>b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.025em;
  line-height:1.15}
.vo>span{font-size:12px;color:var(--faint);line-height:1.45}
.lu .ob-x{margin-top:12px}
/* Dans une carte lue, les nombres cités dans une phrase prennent l'encre pleine :
   c'est ce qui distingue un chiffre d'un mot au premier coup d'oeil. */
.lu .hint b{color:var(--ink);font-weight:660}
.lu .hint{font-size:11.5px}

/* Le brief figé de la démo : il se lit, il ne se règle pas. */
.fige .tag,.fige .tr,.fige input,.fige select{cursor:default}
.fige .tag:hover,.fige .tr:hover{background:var(--card);border-color:var(--line-2);
  color:var(--dim)}
.fige .tag.on:hover{background:var(--acc-soft);border-color:var(--acc-line);
  color:var(--acc-dk)}

/* ------------------------------------------------------- LE LIEN CLIENT
   LE VERT, et non l'indigo. L'indigo est la couleur du fond et celle de tous les objets
   de réglage : un bouton indigo posé sur un fond indigo ne se voyait pas, alors que
   c'est l'action la plus engageante de la page, la seule qui sorte de la maison. Le vert
   était celui de l'aperçu, retiré depuis : il est libre, et il disait déjà « ce que le
   client va voir ». */
.btn-lien{--yt:#0E9F6E; --yt-dk:#0A7F57;
  box-shadow:0 2px 10px -2px rgba(14,159,110,.45);margin-bottom:8px}
.btn-lien:hover{box-shadow:0 4px 16px -3px rgba(14,159,110,.55)}
.btn-lien:focus-visible{outline:2px solid var(--yt);outline-offset:3px}
.btn-lien:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.lc-z{margin:-2px 0 10px;padding:10px;border-radius:12px;background:var(--card-2);
  border:1px solid var(--line)}
.lc-z input{width:100%;font:inherit;font-size:11.5px;font-family:"JetBrains Mono",
  ui-monospace,monospace;color:var(--encre);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 9px}
.lc-a{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.lc-b{border:0;background:var(--acc);color:#fff;font:inherit;font-size:11.5px;
  font-weight:620;border-radius:999px;padding:6px 12px;cursor:pointer;
  text-decoration:none;display:inline-block}
.lc-b.pale{background:#fff;color:var(--acc-dk);border:1px solid var(--line)}
.lc-m{margin:7px 0 0;font-size:10.5px;line-height:1.5;color:var(--faint)}
.lc-m.err{color:#C0392B;margin:6px 0 10px}

/* Un lien client qui n'existe plus, ou qui a expiré. La page n'a rien d'autre à dire,
   et elle le dit à la place du plan plutôt qu'en surimpression. */
.lien-mort{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:40px 24px;text-align:center;
  background:#5A63E8;color:#fff;
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.lien-mort b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:300;
  font-size:clamp(21px,2.6vw,30px);letter-spacing:-.015em}
.lien-mort p{margin:0;max-width:420px;line-height:1.55;font-size:13.5px;
  color:rgba(255,255,255,.72)}