/* ============================================================ DIRECTION STUDIO Tout ici vit sous body[data-da="studio"]. La feuille d'origine reste intacte, et le sélecteur du pied de page bascule d'une direction à l'autre sans rien recharger. Le principe de la direction : le fond de couleur porte l'écran, le contenu vit dans des cartes blanches qui flottent dessus, et les chiffres du plan se posent DIRECTEMENT sur la couleur, sans carte. C'est le seul endroit où l'on renonce à la carte, et c'est ce qui fait la signature. */ /* Les cinq fonds de la charte. Chacun apporte quatre jetons, et c'est ce qui permet d'avoir des fonds clairs sans casser la lisibilité : --bleu la couleur du fond ; --surv l'encre posée SUR le fond, en composantes, pour les voiles translucides ; --sur la même encre en opaque ; --sur-on ce qu'on écrit dans un aplat de --sur (une pastille, un onglet actif). Sur l'indigo l'encre est blanche, comme avant. Sur les quatre fonds clairs elle devient sombre : sans ce retournement, les grands chiffres du plan, la chaîne de prix et l'en-tête, tous en blanc, disparaîtraient purement et simplement. */ /* Les deux fonds. L'indigo porte l'encre blanche, le noir aussi : il n'y a plus de fond clair, donc plus de retournement d'encre à gérer. --sur l'encre posée sur le fond ; --surv la même en composantes, pour les voiles translucides ; --sur-on ce qu'on écrit DANS un aplat de --sur. Sur le noir, --halo-d vaut zéro : le voile clair du bas se lisait comme une tache. */ body[data-da="studio"][data-fond="indigo"]{--bleu:#5A63E8; --surv:255 255 255; --sur:#FFFFFF; --sur-on:#2E3596; --halo-c:255 255 255; --halo-w:.20; --halo-d:.24} body[data-da="studio"][data-fond="noir"]{--bleu:#0B0B0E; --surv:255 255 255; --sur:#FFFFFF; --sur-on:#0B0B0E; --halo-c:64 96 220; --halo-w:.24; --halo-d:0} body[data-da="studio"]{ --bleu:#5A63E8; --encre:#141633; --dim:#6C6F94; --surv:255 255 255; --sur:#FFFFFF; --sur-on:#2E3596; --halo-c:255 255 255; --halo-w:.20; --halo-d:.24; --acc:#5A63E8; --acc-dk:#3C44BE; --acc-soft:#EEF0FE; --acc-line:#C9CDF7; --ink:#141633; --ink-2:#3E4166; --faint:#9A9DBC; --card:#FFFFFF; --card-2:#F8F9FE; --line:#EDEEF8; --line-2:#E0E2F2; --neu-bg:#F1F2FC; --ok:#1E6A40; --ok-bg:#E6F3EC; --warn:#8A5A22; --warn-bg:#FAEEDD; --bad:#8C3A34; --bad-bg:#FAEAE8; font-family:Figtree,Inter,-apple-system,sans-serif; background:var(--bleu); background-image:radial-gradient(1100px 720px at 64% -6%, rgb(var(--halo-c)/var(--halo-w)),transparent 62%), radial-gradient(820px 560px at 2% 104%,rgb(var(--surv)/var(--halo-d)),transparent 60%); background-attachment:fixed; color:var(--sur); } /* ---------------------------------------------------------------- ossature PLUS DE RAIL. La navigation tient dans les deux marques de l'en-tête : le mot-symbole Tags à gauche sort vers l'accueil de la maison, le logo Atlas au centre ramène à l'accueil d'Atlas. Une colonne de gauche pour deux destinations était du mobilier, et elle mangeait 92 px sur toute la hauteur. */ body[data-da="console"] .pickda{--x:0} /* ---------------------------------------------------------------- en-tête Transparent, posé sur la couleur : la campagne en pilule claire, le compte à droite. La bascule client/trader disparaît, le rail la porte. */ body[data-da="studio"] .topbar{background:none;border:0;box-shadow:none; padding:22px 30px 10px;gap:20px;height:auto;min-height:0} body[data-da="studio"] .tb-v{display:none} body[data-da="studio"] .tb-l img,body[data-da="studio"] .tb-l .wordmark{display:none} body[data-da="studio"] .tb-l{width:0;min-width:0;margin:0;padding:0} /* SANS PILULE. Elle encadrait un sélecteur, donc un objet qu'on ouvre ; il n'y a plus que le logo de l'annonceur et deux lignes de texte, et un aplat autour d'un libellé le fait passer pour un bouton. */ body[data-da="studio"] .tb-c{position:static;left:auto;transform:none; background:none;border:0;border-radius:0;padding:0;gap:11px;box-shadow:none} body[data-da="studio"] .camp-sel option{color:var(--encre)} body[data-da="studio"] .camp-nom{color:var(--sur)} body[data-da="studio"] .camp-nom b{font-size:14px;font-weight:650} body[data-da="studio"] .camp-nom i{color:rgb(var(--surv)/.66);font-size:11.5px} body[data-da="studio"] .tb-doc,body[data-da="studio"] .tb-c2{background:rgb(var(--surv)/.14); border-color:rgb(var(--surv)/.28);color:var(--sur)} body[data-da="studio"] .tb-doc:hover,body[data-da="studio"] .tb-c2:hover{ background:rgb(var(--surv)/.24);border-color:rgb(var(--surv)/.4);color:var(--sur)} body[data-da="studio"] .tb-c2 i,body[data-da="studio"] .tb-c2 b{color:var(--sur);opacity:.9} body[data-da="studio"] .tb-r .who b{color:var(--sur)} body[data-da="studio"] .tb-r .who span{color:rgb(var(--surv)/.7)} body[data-da="studio"] .tb-r .chev{stroke:rgb(var(--surv)/.7)} /* Le bouton du compte est posé SUR LA COULEUR avec du texte blanc : son survol ne peut pas prendre un fond clair, le nom disparaissait. Un voile de l'encre du fond suffit. */ body[data-da="studio"] .tb-r:hover{background:rgb(var(--surv)/.16)} body[data-da="studio"] .tb-r.open{background:rgb(var(--surv)/.24)} body[data-da="studio"] .tb-r .av{background:var(--sur);color:var(--sur-on)} body[data-da="studio"] .tb-r .av.ini span{color:var(--sur-on)} body[data-da="studio"] .tb-r .menu{color:var(--encre)} /* Le menu du compte est une carte BLANCHE posée sur la couleur : ses entrées doivent donc garder une encre sombre, y compris au survol. Sans ces trois lignes, le survol héritait d'une encre claire pensée pour le fond et le texte disparaissait. */ body[data-da="studio"] .mn-i{color:var(--ink-2)} body[data-da="studio"] .mn-i:hover{background:var(--acc-soft);color:var(--acc-dk)} body[data-da="studio"] .mn-i:hover svg{stroke:var(--acc)} body[data-da="studio"] .mn-h b{color:var(--ink)} body[data-da="studio"] .mn-h span{color:var(--faint)} /* La jauge est posée sur la couleur : voile clair, encre du fond. */ body[data-da="studio"] .jn2{background:rgb(var(--surv)/.14); border-color:rgb(var(--surv)/.24)} body[data-da="studio"] .jn2>b{color:rgb(var(--surv)/.7)} body[data-da="studio"] .jn2-b{background:rgb(var(--surv)/.22)} body[data-da="studio"] .jn2-b i{background:var(--sur)} body[data-da="studio"] .jn2-p{color:var(--sur)} /* les rails de fond et les filets pleine hauteur n'ont plus lieu d'être */ /* Aucune bande morte en bas : les colonnes vont jusqu'au bord, et la grille ne garde qu'un filet. Les 40 px d'origine étaient la place du sélecteur de direction. */ body[data-da="studio"] .grid{background:none;gap:24px;padding:8px 30px 10px} body[data-da="studio"] .colw{padding-bottom:0} body[data-da="studio"] .colw{background:none;border:0} body[data-da="studio"] .colw+.colw{border-left:0} body[data-da="studio"] .zn-brief,body[data-da="studio"] .zn-pot, body[data-da="studio"] .zn-sel{background:none} /* ---------------------------------------------------------------- cartes Blanches, très arrondies, portées par une ombre longue : elles doivent flotter. */ body[data-da="studio"] .card{background:#fff;color:var(--encre);border:0;border-radius:26px; padding:22px 24px;box-shadow:0 30px 70px -34px rgba(10,12,40,.5)} body[data-da="studio"] .card+.card{margin-top:18px} body[data-da="studio"] .card>h2,body[data-da="studio"] .cdd-h{ font-size:18px;font-weight:700;letter-spacing:-.02em;text-transform:none; color:var(--encre);gap:10px;padding:0 0 3px} body[data-da="studio"] .card>h2 i,body[data-da="studio"] .cdd-h i{ width:22px;height:22px;border-radius:8px;background:var(--acc-soft)!important; color:var(--acc-dk)!important;font-size:11px;font-weight:800;letter-spacing:0} body[data-da="studio"] .in{padding:14px 0 0} /* Le sous-titre se cale à GAUCHE sur le titre et sur les libellés. La feuille d'origine lui donnait 17 px de marge latérale, hérités d'une carte sans retrait propre ; la carte Studio a le sien, donc les 17 px s'ajoutaient et décalaient la ligne de 17 px vers la droite. Une phrase courte ainsi retirée des deux côtés se lit comme centrée. */ body[data-da="studio"] .card>.sub{color:var(--dim);font-size:12.5px; margin-left:0;margin-right:0} body[data-da="studio"] .lbl,body[data-da="studio"] .sec-t{color:var(--dim)} body[data-da="studio"] select,body[data-da="studio"] input{border-radius:14px; border:1.5px solid var(--line-2);background:#fff;color:var(--encre);font-weight:600} body[data-da="studio"] .suffix{border-radius:14px;border:1.5px solid var(--line-2)} body[data-da="studio"] .suffix input{border:0} body[data-da="studio"] .tag,body[data-da="studio"] .tags button{border-radius:999px; border:0;background:var(--neu-bg);color:#4C4F78;font-weight:600} body[data-da="studio"] .tag.on,body[data-da="studio"] .tags button.on{ background:var(--encre);color:#fff} body[data-da="studio"] .btn{border-radius:999px;border:1.5px solid var(--line-2); background:#fff;color:var(--encre);font-weight:650} body[data-da="studio"] .btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc-dk)} body[data-da="studio"] .note{border-radius:14px;background:var(--card-2);color:var(--ink-2); border:0} body[data-da="studio"] .ob{border-radius:16px;border:1.5px solid var(--line-2)} body[data-da="studio"] .ob.on{border-color:var(--acc);background:var(--acc-soft); box-shadow:none} body[data-da="studio"] .ob-x{border-radius:14px} body[data-da="studio"] .sw3.on{background:var(--acc);border-color:var(--acc)} body[data-da="studio"] .trio{border-radius:12px} body[data-da="studio"] .tr.on{background:var(--acc);color:#fff} /* ---------------------------------------------------------------- le plan Sans carte : les chiffres se posent sur la couleur. C'est la signature de la direction, donc rien ne doit venir les encadrer. */ body[data-da="studio"] #hd .card{background:none;box-shadow:none;padding:14px 6px 6px; color:var(--sur)} /* Le titre du plan a la même graphie que les autres blocs, numéro compris. Seule différence, imposée par le fond : l'encre devient blanche et la pastille translucide. */ /* Le titre reste où il est, mais les chiffres descendent : le premier libellé du plan se met au niveau du premier libellé de la carte 1, à sa gauche. Les 48 px sont la somme du retrait d'origine et de l'écart mesuré entre les deux cartes, dont les hauteurs de titre et de retrait sont fixées par la feuille et ne bougent pas. */ body[data-da="studio"] #hd .card>h2{color:var(--sur);margin-bottom:48px} body[data-da="studio"] #hd .card>h2 i{background:rgb(var(--surv)/.22)!important; color:var(--sur)!important} body[data-da="studio"] #hd .in{padding:0} body[data-da="studio"] .readout{grid-template-rows:auto auto;column-gap:26px;row-gap:0; padding-bottom:0} /* UNE SEULE grille de quatre colonnes pour les deux rangées, et une seule taille de chiffre : les sept nombres s'alignent sur la même trame invisible, la première rangée laissant sa quatrième colonne vide. C'est ce qui donne l'effet d'affiche. */ body[data-da="studio"] .readout-3, body[data-da="studio"] .readout-4{grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:20px} /* La bascule a deux colonnes se declenche a 1320 px et non a 1100. En dessous de 1320 px, quatre colonnes ne laissent plus que 86 px par chiffre, or « 0,011 € » en a besoin de 100 : le plancher de 24 px de la police bloquait avant la colonne et le nombre debordait de 17 px sur son voisin. Deux colonnes larges valent mieux qu'un chiffre rapetisse, c'est la trame qui cede, pas la typographie. */ @media (max-width:1320px){ body[data-da="studio"] .readout-3,body[data-da="studio"] .readout-4{ grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px} body[data-da="studio"] .ro{grid-row:auto} } /* Une seule colonne quand meme deux ne suffisent plus. */ @media (max-width:880px){ body[data-da="studio"] .readout-3,body[data-da="studio"] .readout-4{ grid-template-columns:minmax(0,1fr);row-gap:18px} } body[data-da="studio"] .readout-3 .ro:nth-child(n+4){margin-top:0} /* Écart entre les deux rangées de chiffres. Il valait 34 px, mais la ligne de variation sous chaque nombre en a ajouté 18 : l'espace réel était monté à 65 px. Douze suffisent pour que les deux rangées se distinguent sans se détacher. */ body[data-da="studio"] .readout.r2{margin-top:12px} body[data-da="studio"] .ro{grid-row:span 2;background:none!important;border:0;padding:0; border-radius:0} /* DEUX LIGNES RESERVEES pour chaque libelle, toujours. « Chaînes retenues » et « Coût par TrueView » passent sur deux lignes quand les autres tiennent sur une, et le chiffre suivait : les sept nombres perdaient leur ligne de base, de 14 px en haut et de 15 px en bas. Ce n'est ni une affaire de police ni de titres trop longs, c'est un alignement. 2,6 em = deux fois l'interligne de 1,3, donc la reserve suit la taille du libelle sans valeur en dur. Les libelles restent libres de revenir a la ligne. */ body[data-da="studio"] .ro .l{font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:rgb(var(--surv)/.68);align-self:end;line-height:1.3; min-height:2.6em;display:flex;align-items:flex-end} /* Les chiffres sont contraints par la LARGEUR DE LEUR COLONNE, pas par celle de l'écran : c'est la trame de quatre colonnes qui décide de la place disponible. Réglés sur le viewport, « 15 718 » et « 0,011 € » débordaient de 12 à 18 px sur leur voisin dès que la fenêtre descendait vers 1500 px. On les règle donc sur la colonne, avec un repli sur le viewport pour les navigateurs sans requête de conteneur. */ body[data-da="studio"] .ro .v{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;font-size:clamp(20px,2.1vw,42px);line-height:.96;letter-spacing:-.04em; color:var(--sur);margin-top:7px;white-space:nowrap} @supports (container-type:inline-size){ body[data-da="studio"] .ro{container-type:inline-size} body[data-da="studio"] .ro .v{font-size:clamp(20px,28cqi,42px)} } body[data-da="studio"] .ro .mx{display:none} /* Sur la couleur, la variation reprend l'encre du fond : le vert et le rouge des cartes y passeraient inaperçus. La direction du signe suffit à lire le sens. */ body[data-da="studio"] .ro-var{color:rgb(var(--surv)/.8)} body[data-da="studio"] .ro-var.up,body[data-da="studio"] .ro-var.down{ color:rgb(var(--surv)/.8)} /* La chaîne de prix est posée sur la couleur, donc TOUT y passe en blanc : les libellés, les deux colonnes de chiffres et la ligne de prix de vente. Les couleurs d'origine viennent de règles qui ciblent directement les enfants (b, em, i, span), il faut donc les reprendre une par une : l'héritage ne suffit pas. */ body[data-da="studio"] .px{border-top:1px solid rgb(var(--surv)/.24);margin-top:34px; padding-top:16px} body[data-da="studio"] .px-e,body[data-da="studio"] .px-h, body[data-da="studio"] .px-e>b,body[data-da="studio"] .px-e>em, body[data-da="studio"] .px-f>span,body[data-da="studio"] .px-f>b, body[data-da="studio"] .px-f>em{color:var(--sur)} body[data-da="studio"] .px-h,body[data-da="studio"] .px-h>b, body[data-da="studio"] .px-h>em{color:rgb(var(--surv)/.62)} body[data-da="studio"] .px-e>span i{color:rgb(var(--surv)/.66)} body[data-da="studio"] .px-e{border-bottom-color:rgb(var(--surv)/.14)} body[data-da="studio"] .px-f{background:rgb(var(--surv)/.16);border-radius:14px; border:0;margin-top:8px;padding:12px 14px} /* ---------------------------------------------------------------- répartition */ body[data-da="studio"] .b2{margin-top:34px} body[data-da="studio"] #b2 .card{background:rgb(var(--surv)/.14);color:var(--sur); border:1px solid rgb(var(--surv)/.24);box-shadow:none;border-radius:22px} body[data-da="studio"] #b2 .card h2{color:var(--sur)} body[data-da="studio"] #b2 .card h2 i{background:rgb(var(--surv)/.2);color:var(--sur)} body[data-da="studio"] #b2 .card .sub,body[data-da="studio"] #b2 .cp-h b, body[data-da="studio"] #b2 .cp-v{color:rgb(var(--surv)/.78)} body[data-da="studio"] #b2 .cp-v b{color:var(--sur)} body[data-da="studio"] #b2 .cp-b{background:rgb(var(--surv)/.2)} body[data-da="studio"] #b2 .sg2{background:var(--sur)} body[data-da="studio"] #b2 .conc{background:rgb(var(--surv)/.14);border:0;color:var(--sur)} /* ---------------------------------------------------------------- colonne de droite */ body[data-da="studio"] .chbar{background:#fff;border:0;border-radius:22px; box-shadow:0 22px 54px -30px rgba(10,12,40,.45);color:var(--encre)} body[data-da="studio"] .cdd-h{color:var(--encre)} body[data-da="studio"] .cdd-h i{background:var(--acc-soft);color:var(--acc-dk)} /* Le rouge YouTube reste : c'est le seul endroit de l'écran qui parle de la plateforme d'achat, et il doit se voir. */ body[data-da="studio"] .btn-yt{border-radius:20px;padding:16px 18px; box-shadow:0 14px 30px -14px rgba(230,33,23,.5)} /* Mais il ne doit PAS déteindre sur les exports DOOH, qui héritaient de la même règle et traînaient une lueur rougeâtre sous un bouton jaune et un bouton indigo. Chacun porte la sienne. */ body[data-da="studio"] .btn-displayce{box-shadow:0 14px 30px -14px rgba(255,171,0,.55)} body[data-da="studio"] .btn-datastudio{box-shadow:0 14px 30px -14px rgba(90,99,232,.55)} /* Le lien client manquait à l'appel : il héritait donc de la lueur ROUGE de l'export YouTube, sous un bouton qui n'a rien de rouge. C'était le halo rougeâtre visible en tête de colonne. */ body[data-da="studio"] .btn-dv360{box-shadow:0 14px 30px -14px rgba(26,115,232,.55)} body[data-da="studio"] .btn-ttd{box-shadow:0 14px 30px -14px rgba(47,58,74,.6)} body[data-da="studio"] .btn-lien{box-shadow:0 14px 30px -14px rgba(14,159,110,.5)} body[data-da="studio"] .btn-lien:disabled{box-shadow:none} /* Le bloc d'export DOOH ne porte que deux boutons : il lui faut un vrai retrait en bas, sinon le second bouton semble posé sur le bord de la carte. */ body[data-da="studio"] #b3 .exp-bloc{padding:14px 16px 22px} body[data-da="studio"] .mini-sel{border-radius:12px;border:1.5px solid var(--line-2)} body[data-da="studio"] .chercher input{border-radius:12px} body[data-da="studio"] .modes{background:var(--neu-bg);border-radius:999px} body[data-da="studio"] .modes button.on{background:#fff;color:var(--encre)} body[data-da="studio"] .chan{border:0;border-radius:22px; box-shadow:0 18px 44px -28px rgba(10,12,40,.42)} body[data-da="studio"] .ch-n{color:var(--encre);font-weight:700} /* Les lignes de chaînes reprennent le voile du bloc Répartition : posées sur la couleur plutôt qu'en cartes blanches, elles allègent une colonne qui en aligne trente. Le bloc de filtres au-dessus, lui, reste une carte blanche : c'est un objet de réglage, pas de lecture. */ body[data-da="studio"] .li{border-radius:16px;margin-bottom:8px;box-shadow:none; background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.24);color:var(--sur)} body[data-da="studio"] .li:hover{background:rgb(var(--surv)/.24); border-color:rgb(var(--surv)/.38)} body[data-da="studio"] .li .nm{color:var(--sur)} body[data-da="studio"] .li .lv{color:rgb(var(--surv)/.68)} body[data-da="studio"] .li .sc2{color:var(--sur)} body[data-da="studio"] .li .ext,body[data-da="studio"] .li .inote{ background:rgb(var(--surv)/.10);border-color:rgb(var(--surv)/.30); color:rgb(var(--surv)/.78)} body[data-da="studio"] .li .ext:hover,body[data-da="studio"] .li .inote:hover{ background:var(--sur);border-color:var(--sur);color:var(--sur-on)} body[data-da="studio"] .exp-n{background:var(--acc-soft);border:0;color:#4C4F78} body[data-da="studio"] .exp-u{color:var(--dim)} /* ---------------------------------------------------------------- fenêtres */ body[data-da="studio"] .modal{border-radius:26px;color:var(--encre)} body[data-da="studio"] .modal .mh b{color:var(--encre)} body[data-da="studio"] .scrim{background:rgba(20,22,51,.55)} /* ---------------------------------------------------------------- sélecteur de direction Neutre et discret : il n'appartient à aucune des deux directions. */ /* Le sélecteur flotte, sans barre de pied de page : une barre opaque coupait l'écran en deux et cassait l'effet du fond continu. */ /* Sélecteur de direction MASQUÉ : une seule direction est présentée. Le code reste entier, et la direction se force par l'adresse, /?da=console ou /?da=studio, pour pouvoir montrer l'autre sans remettre le bouton. */ .pickda{display:none;position:fixed;z-index:80;bottom:14px;left:50%; transform:translateX(-50%);align-items:center;gap:6px;pointer-events:none} .pickda span{display:none} .pickda button{pointer-events:auto;font:inherit;font-size:11.5px;font-weight:600; border:0;border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap; color:rgb(var(--surv)/.7);background:rgb(var(--surv)/.14); backdrop-filter:blur(10px);transition:background .14s,color .14s} .pickda button:hover{background:rgb(var(--surv)/.26);color:var(--sur)} .pickda button.on{background:var(--sur);color:var(--sur-on); box-shadow:0 6px 18px -8px rgba(10,12,40,.5)} body[data-da="console"] .pickda button{color:var(--dim);background:rgba(255,255,255,.7); box-shadow:0 1px 3px rgba(27,28,33,.12)} body[data-da="console"] .pickda button:hover{background:#fff;color:var(--ink)} body[data-da="console"] .pickda button.on{background:var(--ink);color:#fff} /* Sur la direction Console, la liste de chaînes touche le bord bas de l'écran : on lui laisse la place du sélecteur. */ /* Plus de sélecteur de direction en pied d'écran : la liste n'a plus à lui garder sa place. */ body[data-da="console"] .b3,body[data-da="studio"] .b3{padding-bottom:6px} /* Sur la couleur, l'ancre est un voile clair à flèche blanche, comme les autres objets posés sur le fond. */ body[data-da="studio"] .ancre{background:rgb(var(--surv)/.18);color:var(--sur); box-shadow:none;backdrop-filter:blur(6px)} body[data-da="studio"] .ancre:hover{background:rgb(var(--surv)/.30)} body[data-da="studio"] .zn-pot{padding-bottom:6px} /* ---------------------------------------------------------------- palette de fonds Un bouton multicolore qui s'ouvre au survol. Fermé il ne dit qu'une chose, la couleur actuelle ; ouvert il propose les deux fonds. Il vit dans l'en-tête central, à côté de la campagne, parce que c'est un réglage de confort et pas un réglage de brief. */ .pal{position:relative;display:flex;align-items:center;height:34px} .pal-b{width:26px;height:26px;border-radius:50%;border:2px solid rgb(var(--surv)/.7); cursor:pointer;padding:0;flex:none; background:conic-gradient(#5A63E8 0 50%,#0B0B0E 50% 100%)} .pal-l{position:absolute;left:-6px;top:-5px;display:flex;align-items:center;gap:5px; padding:5px 7px;border-radius:999px;background:rgba(20,22,51,.55); backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2); opacity:0;transform:scale(.82);transform-origin:left center;pointer-events:none; transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2)} .pal:hover .pal-l,.pal:focus-within .pal-l{opacity:1;transform:scale(1);pointer-events:auto} .pal:hover .pal-b,.pal:focus-within .pal-b{opacity:0} .pal-c{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0; cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); transition:transform .12s} .pal-c:hover{transform:scale(1.18)} .pal-c.on{border-color:#fff} /* Sur la direction Console la palette n'a rien à régler : le fond y est blanc. Et comme ce fond est clair, l'encre posée dessus s'inverse : c'est ce jeton qui donne au logo Atlas et au sélecteur de direction leur couleur sombre sur cette direction. */ body[data-da="console"] .pal{display:none} body[data-da="console"]{--surv:27 28 33; --sur:#1B1C21; --sur-on:#FFFFFF} /* ---------------------------------------------------------------- logo Atlas Le fichier est un PNG blanc détouré. Le peindre tel quel le rendrait invisible sur les quatre fonds clairs, donc on ne l'affiche pas : on s'en sert comme MASQUE et on peint dessous l'encre du fond. Le logo suit alors la palette sans second fichier. */ /* Le logo, posé en masque pour qu'il prenne l'encre du fond : blanc sur l'indigo et le noir, noir sur les trois pastels. Le décalage compense l'asymétrie de l'en-tête, 22 px de retrait en haut contre 10 en bas : sans lui le logo se centrait sur la boîte de retrait et flottait 6 px plus haut que la pilule de campagne. LA BOÎTE EST CELLE DU FICHIER, pas celle de l'encre. La nouvelle version du logo est posée sur un gabarit commun aux trois marques de la maison, 2162 × 282, où l'encre n'occupe que 1237 px de large et 210 de haut, centrée. Le masque étant en « contain », c'est le gabarit qu'il faut dimensionner : 180 × 24 pour retrouver les 17,5 px d'encre d'avant. Le vide autour n'est que du vide, il ne recouvre rien puisque le bloc ne reçoit pas le clic. Et comme le gabarit est désormais symétrique, à 2 px près, la compensation du fichier a disparu. */ .tb-atlas{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);margin-top:6px;border:0;padding:0; width:180px;height:24px;background:var(--sur); -webkit-mask:url(/logo-atlas.png) center/contain no-repeat; mask:url(/logo-atlas.png) center/contain no-repeat; pointer-events:none} /* Sauf en démo, le logo RAMÈNE à l'accueil d'Atlas : c'est alors un bouton, et il reprend le clic que le div refusait. Le survol l'estompe plutôt que de lui poser un fond, un aplat derrière un masque blanc n'aurait rien donné de lisible. */ button.tb-atlas{cursor:pointer;pointer-events:auto;transition:opacity .14s} button.tb-atlas:hover{opacity:.72} button.tb-atlas:focus-visible{outline:2px solid var(--sur);outline-offset:6px; border-radius:6px} /* Sur la Console, l'en-tête centre déjà le sélecteur de campagne : le logo se range à gauche, à la place du mot-symbole Tags, pour ne pas se superposer. */ body[data-da="console"] .tb-atlas{position:static;transform:none;top:auto;left:auto; margin:0 0 0 2px;width:167px;height:22px} body[data-da="studio"] .topbar{position:relative} @media (max-width:1180px){ .tb-atlas{display:none} } /* Logo de l'annonceur dans le sélecteur de campagne : un disque blanc, comme l'avatar du compte, ce qui évite toute bordure visible. Les logos fournis sont détourés sur blanc, donc le disque disparaît sous le logo et seule la marque se voit. */ .camp-lg{width:30px;height:30px;border-radius:50%;background:#fff;flex:none; display:grid;place-items:center;overflow:hidden} /* « contain » et non « cover » : un logo de marque a son propre cadrage, on ne rogne pas dedans. « cover » convenait aux PNG carrés livrés avec l'outil ; il coupait les bords d'un logo déposé au référentiel. Le léger retrait évite qu'il touche le bord du cercle. */ .camp-lg img{width:100%;height:100%;object-fit:contain;display:block;padding:2px; box-sizing:border-box} /* Sans avatar, les INITIALES de la marque sur fond blanc, et non un rond rouge : deux lettres nomment, une couleur ne dit rien. Elles viennent d'un attribut posé par le script, le CSS n'a pas à connaître le nom de l'annonceur. */ .camp-lg.vide{background:#fff;color:var(--acc-dk)} .camp-lg.vide::after{content:attr(data-ini);font-size:11px;font-weight:660} /* ---------------------------------------------------------------- icônes d'univers Une pastille ronde teintée, la même dans la liste, sur les fiches et partout ailleurs : on voit qu'une chaîne est auto ou musique sans lire son libellé. */ .uic{width:var(--us,18px);height:var(--us,18px);border-radius:50%;flex:none; display:grid;place-items:center;background:color-mix(in srgb,var(--uc) 15%,#fff); color:var(--uc)} .uic svg{width:calc(var(--us,18px) * .68);height:calc(var(--us,18px) * .68);display:block; fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} .ch-u .uic{display:inline-grid;vertical-align:-3px;margin-right:5px} /* Ligne d'univers de la fiche détaillée : même pastille que dans la liste, posée dans le fil du texte. Elle vaut mieux qu'un libellé seul, on reconnaît l'univers de la chaîne avant de l'avoir lu. */ .ligne-u .uic{display:inline-grid;vertical-align:-3px;margin-right:5px} .li .uic{margin-right:2px} /* ---------------------------------------------------------------- écrans étroits En dessous de 1180 px, aucun réglage du bloc du plan ne pouvait suffire : la coquille garde trois colonnes dont deux sont FIXES, 296 px à gauche et 348 px à droite, plus les 92 px du rail. À 860 px il ne restait que 124 px au milieu, et les libellés des chiffres se pliaient à une lettre par ligne. C'est donc la coquille qui cède : une seule colonne, et c'est la page qui défile au lieu de chaque colonne séparément. */ @media (max-width:1180px){ body[data-da="studio"]{overflow:auto} body[data-da="studio"] .app{height:auto;min-height:100vh} body[data-da="studio"] .grid{grid-template-columns:minmax(0,1fr);overflow:visible; gap:16px;padding:8px 22px 64px} body[data-da="studio"] .colw{overflow:visible;padding:0} body[data-da="studio"] #b1,body[data-da="studio"] #b2,body[data-da="studio"] .b3, body[data-da="studio"] .chlist{overflow:visible;flex:none;min-height:0} /* Le plan reprend une carte : posé sur la couleur en pleine largeur, il flottait entre deux cartes blanches sans plus rien pour le tenir. */ body[data-da="studio"] #hd .card{padding:14px 4px 0} body[data-da="studio"] .b2{margin-top:0!important} } /* ---------------------------------------------------------------- écran d'accueil La salutation est posée sur la couleur, donc elle prend l'encre du fond. La pilule reste blanche : c'est le seul objet de la page, il doit trancher. L'en-tête se dépouille au passage, le sélecteur de campagne y ferait doublon avec les deux champs. */ /* Le titre reprend l'allure de la référence : le même caractère que les grands chiffres, mais en graisse normale. En 800 il écrasait la page. */ body[data-da="studio"] .ac-h{color:var(--sur); font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:300; letter-spacing:-.015em} body[data-da="studio"] .ac-bar{border:0;box-shadow:0 26px 60px -34px rgba(8,10,34,.7)} /* Les écrans de paramétrage suivent la charte de l'accueil : les intitulés de section prennent l'encre du fond, les barres restent blanches, et ce qui est éteint passe en voile transparent, comme les lignes de chaînes. */ /* Les champs d'une barre n'ont pas de contour : c'est la pilule qui fait le cadre. La feuille Studio habille tous les select et input, et sa règle porte le sélecteur du corps, donc elle l'emportait sur celle de la barre. */ body[data-da="studio"] .pb-f input,body[data-da="studio"] .pb-f select{ border:0;border-radius:0;background:none;padding:0;font-weight:520} /* La barre de connexion porte de vrais champs de saisie : ils gardent leur retrait gauche, sinon la valeur se posait seize pixels à gauche de son libellé. */ body[data-da="studio"] .ac-f>input,body[data-da="studio"] .ac-f>select{ border:0;border-radius:0;background:none;font-weight:520;padding:0 14px 0 16px} body[data-da="studio"] .pb-f input:focus,body[data-da="studio"] .pb-f select:focus, body[data-da="studio"] .ac-f input:focus{outline:none;box-shadow:none} body[data-da="studio"] .pb-t{color:rgb(var(--surv)/.72)} /* Le texte d'aide est posé sur la couleur : il prend l'encre du fond, pas le gris des cartes, sinon il devient illisible. */ body[data-da="studio"] .pf-s{color:rgb(var(--surv)/.72)} body[data-da="studio"] .pb-t>span{color:rgb(var(--surv)/.55)} body[data-da="studio"] .pb,body[data-da="studio"] .pb-mono, body[data-da="studio"] .pf-av, body[data-da="studio"] .pu{box-shadow:0 22px 50px -34px rgba(8,10,34,.7)} body[data-da="studio"] .pf-msg{color:var(--sur)} body[data-da="studio"] .pf-pu{color:var(--ink-2)} body[data-da="studio"] .pf-pu.off{background:rgb(var(--surv)/.14);color:var(--sur); box-shadow:none;opacity:1} body[data-da="studio"] .pu.off{background:rgb(var(--surv)/.14);box-shadow:none} body[data-da="studio"] .pu.off .pu-n{color:var(--sur)} body[data-da="studio"] .pu.off .pu-m{color:rgb(var(--surv)/.6)} body[data-da="studio"] .pu.off .pu-r{background:rgb(var(--surv)/.16);color:var(--sur)} body[data-da="studio"] .pu.off .pu-av{background:rgb(var(--surv)/.18);color:var(--sur)} body[data-da="studio"] .pu.off .pu-ed{background:rgb(var(--surv)/.16)} body[data-da="studio"] .pu.off .pu-ed svg{stroke:rgb(var(--surv)/.7)} body[data-da="studio"] .pu-h .lien{color:rgb(var(--surv)/.8)} body[data-da="studio"] .ac-plus{background:rgb(var(--surv)/.16);color:var(--sur); box-shadow:none} body[data-da="studio"] .ac-plus:hover{background:rgb(var(--surv)/.28);color:var(--sur)} /* La page de paramétrage peut dépasser la hauteur : elle défile. */ body[data-ecran="params"],body[data-ecran="users"],body[data-ecran="campagne"], body[data-ecran="annonceur"],body[data-ecran="agence"]{overflow:auto} /* Sur l'accueil, ni rail ni sélecteur de campagne : il n'y a nulle part où aller avant d'avoir choisi, et les deux champs de la barre disent déjà la campagne. Ces règles vivent ici et non dans la feuille de base, parce que c'est celle-ci qui pose le rail et le retrait de 92 px, et qu'elle est chargée en dernier. */ body:not([data-ecran="plan"]) .tb-c{display:none} /* Le mot-symbole Tags, en blanc avec son point orange. Il ne paraît que sur l'accueil, où le rail est masqué et où le coin haut gauche est libre. Il porte ses couleurs, donc il vaut sur l'indigo comme sur le noir. */ /* Le logo est un lien vers l'accueil : sa cible de clic est élargie par un retrait compensé d'une marge négative, donc la mise en page ne bouge pas et le bouton n'attrape plus 80 × 23 px seulement. */ .tb-mk{display:flex;align-items:center;flex:none;border:0;background:none; cursor:pointer;line-height:0;text-decoration:none; padding:10px 12px;margin:-10px -12px;border-radius:14px;transition:background .14s} .tb-mk:hover{background:rgb(var(--surv)/.14)} .tb-mk img{height:23px;width:auto;object-fit:contain;display:block} /* Sur la connexion il n'y a rien à quitter : on n'est pas encore entré. */ body[data-ecran="login"] .tb-mk{display:none} /* ------------------------------------------------------------------ démo live La page qui part chez le client : pas de rail, rien à parcourir. Le nom de la campagne n'est plus une pilule, parce qu'une pilule se clique et que celle-ci ne mène nulle part : le logo de l'annonceur et son nom, posés sur le fond, alignés sur le bloc 1. */ /* 30 px de grille + 14 px de colonne : le logo du client tombe pile sur le bord du bloc 1. La colonne vide de gauche est retirée, sinon son écart décalait le tout. */ body[data-da="studio"][data-demo="on"] .tb-l{display:none} body[data-da="studio"][data-demo="on"] .topbar{padding-left:44px} body[data-da="studio"][data-demo="on"] .camp-nom b{font-size:16px;font-weight:700; letter-spacing:-.02em} body[data-da="studio"][data-demo="on"] .camp-nom i{font-size:12.5px} body[data-da="studio"][data-demo="on"] .camp-lg{width:34px;height:34px} /* ---------------------------------------------------------------- leviers Sur le fond de couleur, les onglets sont des voiles clairs et l'onglet regardé prend l'encre pleine, comme le sélecteur de direction : c'est le même geste, choisir entre deux lectures de la même campagne. */ body[data-da="studio"] .lev-o{background:rgb(var(--surv)/.14);color:rgb(var(--surv)/.78); border-color:rgb(var(--surv)/.18);backdrop-filter:blur(6px)} body[data-da="studio"] .lev-o:hover{background:rgb(var(--surv)/.24);color:var(--sur); border-color:rgb(var(--surv)/.28)} body[data-da="studio"] .lev-o.on{background:var(--sur);color:var(--sur-on); border-color:var(--sur);box-shadow:0 6px 18px -8px rgba(10,12,40,.5)} /* Sur l'onglet allumé la croix se pose sur l'encre pleine : son voile doit donc être sombre, et non clair comme partout ailleurs. */ body[data-da="studio"] .lev-o.on .lev-x{background:rgb(var(--surv)/.001); color:var(--sur-on);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} body[data-da="studio"] .lev-o.on .lev-x:hover{background:rgba(0,0,0,.10)} body[data-da="studio"] .lev-p{background:rgb(var(--surv)/.10);color:var(--sur); border-color:rgb(var(--surv)/.34);backdrop-filter:blur(6px)} body[data-da="studio"] .lev-p:hover{background:rgb(var(--surv)/.24);border-style:solid; border-color:var(--sur);color:var(--sur)} /* Le panneau de l'invite est une version assombrie du FOND, comme le menu de l'accueil : sur l'indigo il reste indigo, sur le noir il reste noir. */ body[data-da="studio"] .lev-m{background:color-mix(in srgb,var(--bleu,#17181C) 72%,#08080C)} /* ---------------------------------------------------------------- levier DOOH Sur le fond de couleur, les objets du DOOH suivent la même règle que le reste : pas de carte blanche pour le plan, des voiles clairs pour tout ce qui se pose sur la couleur, l'encre pleine pour ce qui doit ressortir. */ body[data-da="studio"] .dh-rl>b{color:var(--sur)} body[data-da="studio"] .dh-rl>span{color:rgb(var(--surv)/.68)} body[data-da="studio"] .dh-rb{background:rgb(var(--surv)/.18)} body[data-da="studio"] .dh-rb>i{background:var(--sur)} /* Pas de fond propre à la carte : le voile du bloc lui suffit. Un second fond faisait un cadre dans un cadre. */ /* Le bloc de répartition et la carte vivent dans la colonne du plan, donc sans carte blanche : leur titre et leurs textes prennent l'encre du fond. */ body[data-da="studio"] #b2 .hint{color:rgb(var(--surv)/.62)} /* La trame de CINQ indicateurs du DOOH est en trois colonnes, et non en quatre comme celle de YouTube : la seconde rangée n'en porte que deux. Le sélecteur est plus précis que celui qui impose quatre colonnes, il n'a donc pas besoin d'un !important. */ body[data-da="studio"] .readout.dh-ro{grid-template-columns:repeat(3,minmax(0,1fr))} /* La bascule à deux colonnes tombe plus bas que pour YouTube, à 1150 px et non 1320 : trois colonnes laissent 157 px par nombre là où quatre n'en laissaient que 86, et « 150 008 € » en demande 140. */ @media (max-width:1150px){ body[data-da="studio"] .readout.dh-ro{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:880px){ body[data-da="studio"] .readout.dh-ro{grid-template-columns:minmax(0,1fr)} } /* Sur la couleur, les commandes de zoom sont des voiles clairs, comme l'ancre. */ body[data-da="studio"] .dh-zb{background:rgb(var(--surv)/.16);color:var(--sur); border-color:rgb(var(--surv)/.22);backdrop-filter:blur(6px)} body[data-da="studio"] .dh-zb:hover{background:rgb(var(--surv)/.30);color:var(--sur); border-color:rgb(var(--surv)/.34)} body[data-da="studio"] .dh-zn{color:rgb(var(--surv)/.6)} /* Sur la couleur, l'aperçu sans image prend le voile clair du fond plutôt que le bleu pâle des cartes, qui n'existe pas ici. */ body[data-da="studio"] .pf-mk.vide{background:var(--acc-soft)} /* Sur la couleur, la barre de tri est un voile clair, comme les onglets de leviers. Le champ de saisie doit être déshabillé EXPLICITEMENT : la direction Studio habille tous les « input » d'un fond blanc et d'un contour de 1,5 px, et ce sélecteur est plus fort que le mien. Ici c'est la pilule qui porte le cadre, pas le champ. */ body[data-da="studio"] .pu-src input{background:none;border:0;border-radius:0; padding:0;font-weight:500} body[data-da="studio"] .pu-src,body[data-da="studio"] .pu-sel{ background:rgb(var(--surv)/.14);border-color:rgb(var(--surv)/.22);color:var(--sur); backdrop-filter:blur(6px)} body[data-da="studio"] .pu-src input{color:var(--sur)} body[data-da="studio"] .pu-src input::placeholder{color:rgb(var(--surv)/.55)} body[data-da="studio"] .pu-src svg{stroke:rgb(var(--surv)/.6)} body[data-da="studio"] .pu-sel option{color:var(--encre)} body[data-da="studio"] .pu-sel:focus{border-color:rgb(var(--surv)/.5)} /* Sur la couleur, tout repose sur l'interrupteur, puisque le réglage n'a plus d'aplat. Éteint : contour franc et fond à peine voilé, assez pour se détacher du fond. Allumé : l'encre pleine, le seul contraste maximal disponible sur l'indigo comme sur le noir. */ body[data-da="studio"] .pf-mq{color:rgb(var(--surv)/.78)} body[data-da="studio"] .pf-mq:hover{color:var(--sur)} body[data-da="studio"] .pf-mq.on{color:var(--sur);font-weight:600} body[data-da="studio"] .pf-mq .sw3{background:rgb(var(--surv)/.16); border-color:rgb(var(--surv)/.45)} body[data-da="studio"] .pf-mq.on .sw3{background:var(--sur);border-color:var(--sur)} body[data-da="studio"] .pf-mq.on .sw3 i{background:var(--sur-on);box-shadow:none} body[data-da="studio"] .pb-eff{color:var(--dim)} /* Le déclencheur du détail des marges vit sur la couleur, pas sur une carte : son encre est blanche, comme tout ce qui se lit sur le fond. */ body[data-da="studio"] .px-plus{color:var(--sur);font-weight:600} body[data-da="studio"] .px-plus:hover{color:var(--sur);opacity:.78} body[data-da="studio"] .ac-val.vide{color:var(--faint)}