/* ========================================================================= campagne-nouvelle.css — vue « Nouvelle campagne » (#/campagne/nouvelle). Cette feuille est servie à tous (comme les autres CSS) : elle ne nomme AUCUN module à privilège ni aucune route d'API — uniquement ses propres classes cn-*. Le module qui l'utilise, lui, n'est servi qu'aux sessions autorisées. Un test du dépôt garde cet invariant. Design : mêmes conventions liquid-glass que campagnes.css / reglages.css (.glass, .glassin, tokens --txt/--muted/--dim/--line/--accent). Chaque élément interactif porte une classe cn-* DÉDIÉE et unique. 19/08/2026 — CE N'EST PLUS UN PANNEAU, C'EST UNE VUE. Demande de Sylvain : « fais un front-end comme les autres et l'animation de chargement comme les autres, repense tout, ne supprime aucune fonction ». Ont donc disparu, et avec eux tout leur coût : le voile plein écran, le panneau en 100vw/100dvh, le flou du fond d'écran, l'effacement de l'application derrière, les vingt-huit particules animées, l'ouverture animée (gonflage depuis le bouton, glissé du contenu) et le verrouillage du défilement de la page. N'ont RIEN perdu : les quatre écrans, leurs boutons, leurs compteurs, leurs avertissements et leurs explications — tout ce qui suit à partir de « Écran 0 » est inchangé. L'attente de chargement est désormais celle de toute l'application : `App.skeleton`, posé par le shell puis par la vue. Il n'y a plus une seule animation propre à cet écran, donc plus rien à mettre en pause, à couper en `prefers-reduced-motion` ou à recomposer image par image. ========================================================================= */ /* ---------- La vue : un panneau de verre comme les autres ----------------- */ .cn-vue{display:flex;flex-direction:column;min-width:0;overflow:hidden} /* Tête et pied : les deux barres qui portent le titre, la jauge et les boutons d'action. Leur voile propre est CONSERVÉ — la vue est un panneau de verre posé sur une photo, et un titre de 21 px comme un bouton « Envoyer » doivent se lire quel que soit le fond d'écran tiré. */ .cn-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between; padding:20px 24px 14px;border-bottom:1px solid var(--line);flex:none; background:linear-gradient(180deg,rgba(8,10,17,.52),rgba(8,10,17,.30))} .cn-head-txt{min-width:0;display:flex;flex-direction:column;gap:10px} .cn-title{margin:0;font-size:21px;font-weight:780;letter-spacing:-.02em;color:var(--txt)} /* Jauge d'avancement */ .cn-jauge{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none} .cn-jauge-pas{display:inline-flex;align-items:center;gap:8px;padding:6px 13px; border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06); color:var(--dim);font-size:12px;font-weight:650} .cn-jauge-n{display:grid;place-items:center;width:19px;height:19px;border-radius:50%; background:rgba(255,255,255,.14);font-size:10.5px;font-weight:780} .cn-jauge-pas.fait{color:var(--muted)} .cn-jauge-pas.fait .cn-jauge-n{background:color-mix(in srgb, var(--accent) 40%, transparent)} .cn-jauge-pas.on{color:var(--txt);background:color-mix(in srgb, var(--accent) 20%, transparent); border-color:color-mix(in srgb, var(--accent) 45%, transparent)} .cn-jauge-pas.on .cn-jauge-n{background:var(--accent);color:#06090e} /* Le corps ne défile plus DANS le panneau : c'est la PAGE qui défile, comme dans toutes les autres vues. Un conteneur à défilement interne n'avait de sens que tant que le panneau occupait exactement l'écran ; sur une vue, il produirait deux barres de défilement imbriquées. */ .cn-body{padding:18px 24px 10px} .cn-foot{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 24px;border-top:1px solid var(--line);background:rgba(4,6,11,.46)} .cn-foot .cn-suivant,.cn-foot .cn-envoyer,.cn-foot .cn-fin{margin-left:auto} .cn-retenu,.cn-retenu2{font-size:13px;font-weight:650;color:var(--muted);margin-left:auto} .cn-foot .cn-retenu + .cn-suivant,.cn-foot .cn-retenu2 + .cn-envoyer{margin-left:0} /* ---------- Textes transverses -------------------------------------------- */ .cn-intro{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:78ch} .cn-note{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:82ch} .cn-note-prevision{border-left:2px solid var(--line);padding-left:12px} .cn-avert{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--muted);max-width:82ch} .cn-avert-email{border-left:3px solid var(--warn);padding-left:12px} .cn-avert-tronque{border-left:3px solid var(--warn);padding-left:12px} .cn-err{display:flex;gap:9px;align-items:flex-start;margin:14px 0;padding:12px 14px; border-radius:12px;background:rgba(255,69,58,.13);border:1px solid rgba(255,69,58,.38); font-size:13px;line-height:1.55;color:var(--txt)} .cn-err .ic{width:17px;height:17px;flex:none;color:var(--danger);margin-top:2px} /* ---------- Écran 0 : les colonnes ---------------------------------------- */ /* `grid-auto-rows:1fr` : SANS lui, seules les cartes d'une MÊME rangée ont la même hauteur, et la rangée qui contient « Contact autorisé » (badge du garde-fou en plus) était plus haute que les autres — c'est le décalage signalé par Sylvain. Avec `1fr`, toutes les rangées prennent la hauteur de la plus grande, et le badge vide (`.cn-col-gate-vide`) réserve sa ligne dans les cartes qui n'en ont pas. */ .cn-cols{display:grid;gap:12px;grid-auto-rows:1fr; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} /* Fond OPACIFIÉ : `var(--glass)` est un blanc très transparent, conçu pour se poser sur un panneau opaque. Le socle sombre propre est conservé — il délimite les cartes sur le verre de la vue. */ .cn-col{display:flex;flex-direction:column;gap:4px;padding:16px 18px;text-align:left; border:1px solid var(--line);background:rgba(13,16,25,.52);color:var(--txt);cursor:pointer; border-radius:var(--radius);transition:border-color .14s,transform .14s,background .14s} .cn-col:hover{border-color:color-mix(in srgb, var(--accent) 55%, transparent);transform:translateY(-2px)} @media (prefers-reduced-motion: reduce){.cn-col{transition:none}.cn-col:hover{transform:none}} .cn-col-nom{font-size:14.5px;font-weight:730;letter-spacing:-.01em} .cn-col-n{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--accent-ink)} .cn-col-sub{font-size:11.5px;color:var(--dim)} /* Le compteur pousse le badge en bas de carte : les quatre badges se lisent alors sur une même ligne d'horizon, quelle que soit la longueur du nom. */ .cn-col-sub{margin-bottom:auto} .cn-col-gate{display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:15px; font-size:11px;font-weight:680;color:var(--warn)} .cn-col-gate .ic{width:13px;height:13px} .cn-col-gate-vide{visibility:hidden} /* Teinte des 4 étapes-bascules — même source que le kanban (App.teinterEtape). On choisit ici la colonne qu'on regardait là-bas : elle doit avoir la même couleur, sinon c'est deux objets différents dans la tête. */ /* La teinte se mélange au socle sombre, PAS au transparent : sinon les quatre cartes-bascules seraient les seules à laisser passer le fond. */ .cn-col.etape-teinte{ border-color:color-mix(in srgb, var(--etape-teinte, var(--accent)) 50%, transparent); background:color-mix(in srgb, var(--etape-teinte, var(--accent)) 14%, rgba(13,16,25,.52))} .cn-col.etape-teinte .cn-col-nom{ color:color-mix(in srgb, var(--etape-teinte, var(--accent)) 55%, var(--txt))} .cn-col.etape-teinte .cn-col-n{ color:color-mix(in srgb, var(--etape-teinte, var(--accent)) 62%, #ffffff)} .cn-col.etape-teinte:hover{ border-color:color-mix(in srgb, var(--etape-teinte, var(--accent)) 78%, transparent); background:color-mix(in srgb, var(--etape-teinte, var(--accent)) 22%, rgba(13,16,25,.55))} /* ---------- Compteurs (écrans 1 et 3) ------------------------------------- */ .cn-compteurs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px} .cn-c{display:flex;flex-direction:column;gap:2px;padding:11px 16px;border-radius:13px; border:1px solid var(--line);background:rgba(11,14,22,.46);min-width:132px} .cn-c-n{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--txt)} .cn-c-l{font-size:11.5px;color:var(--dim)} .cn-n-joignables,.cn-n-envoyes{color:var(--ok)} .cn-n-ecartees,.cn-n-echecs{color:var(--warn)} .cn-motifs{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.7} .cn-motif-l{margin:0} /* ---------- Écran 1 : nom, outils, liste ---------------------------------- */ .cn-nom-l{display:flex;flex-direction:column;gap:6px;margin:16px 0 12px;max-width:520px; font-size:12px;font-weight:650;color:var(--muted)} .cn-nom{padding:10px 13px;border-radius:11px;font-size:13.5px;color:var(--txt); border:1px solid var(--line);background:rgba(4,6,11,.52)} .cn-outils{display:flex;gap:8px;margin-bottom:10px} .cn-vide{margin:24px 0;padding:26px;text-align:center;font-size:13.5px;color:var(--muted); border:1px dashed var(--line);border-radius:14px} .cn-liste-zone{display:grid;grid-template-columns:1fr;gap:14px} .cn-liste-zone:has(.cn-fiche-zone.on){grid-template-columns:1fr 330px} .cn-liste{display:flex;flex-direction:column;gap:2px;min-width:0} .cn-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:12px;padding:9px 12px;border-radius:11px;border:1px solid transparent} .cn-row:hover{background:rgba(255,255,255,.05);border-color:var(--line)} .cn-row-exclu{opacity:.62} /* La ligne dont la fiche est ouverte dans le tiroir. Sur une colonne de deux cents sociétés, sans ce repère on ne sait plus de qui parle le panneau de droite dès qu'on a fait défiler trois lignes. Le liseré est à GAUCHE et non tout autour : la bordure complète se confondait avec celle du survol. */ .cn-row-active,.cn-row-active:hover{ background:color-mix(in srgb, var(--accent) 13%, transparent); border-color:color-mix(in srgb, var(--accent) 34%, transparent)} .cn-row-active{box-shadow:inset 3px 0 0 var(--accent)} .cn-case{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:none} .cn-case:disabled{cursor:not-allowed} .cn-ouvre{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left; background:none;border:none;padding:0;cursor:pointer;color:var(--txt)} .cn-nom-soc{font-size:13.5px;font-weight:690;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cn-meta{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cn-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .cn-chip-mail{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted)} .cn-chip-motif{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent)} .cn-chip-envoi{color:var(--dim)} .cn-chip-grade{color:var(--muted)} /* Tiroir fiche — DANS le panneau : aucune navigation, aucune sélection perdue */ .cn-fiche-zone{display:none} .cn-fiche-zone.on{display:block;position:sticky;top:0;align-self:start; padding:14px 16px;border-radius:14px;border:1px solid var(--line); background:rgba(5,7,12,.62);max-height:70vh;overflow:auto} .cn-fiche-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .cn-fiche-t{margin:0;font-size:13.5px;font-weight:740;color:var(--txt)} .cn-fiche-close{padding:6px 11px;font-size:12px} .cn-fiche-corps{display:flex;flex-direction:column;gap:6px} .cn-fiche-l{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;font-size:12.5px} .cn-fiche-k{color:var(--dim)} .cn-fiche-v{color:var(--txt);word-break:break-word} /* Note d'équipe — texte libre, donc pleine largeur et non en colonne de droite (18/08/2026). Le filet à gauche la distingue des couples clé/valeur sans lui construire un cadre de plus. `pre-wrap` : les retours à la ligne saisis par l'équipe font partie de la note. */ .cn-fiche-note-eq{margin-top:10px;padding:9px 0 2px 11px; border-left:2px solid color-mix(in srgb, var(--accent) 55%, transparent)} .cn-fiche-note-eq-t{display:block;font-size:10.5px;text-transform:uppercase; letter-spacing:.06em;color:var(--dim);margin-bottom:4px} .cn-fiche-note-eq-v{margin:0;font-size:12.5px;line-height:1.55;color:var(--txt); white-space:pre-wrap;word-break:break-word} .cn-fiche-pied{display:flex;flex-direction:column;gap:2px} .cn-fiche-note{margin:10px 0 0;font-size:11.5px;color:var(--dim);line-height:1.55} .cn-fiche-full{margin-top:10px;align-self:flex-start;font-size:12px;padding:8px 13px; text-decoration:none;display:inline-flex;align-items:center;gap:7px} /* ---------- Écran 2 : réglages appliqués ---------------------------------- */ .cn-reglages{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px} .cn-r{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:12px; border:1px solid var(--line);background:rgba(11,14,22,.44);min-width:150px;max-width:280px} .cn-r-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)} .cn-r-v{font-size:13px;font-weight:680;color:var(--txt);word-break:break-word} .cn-r-sub{font-size:11px;color:var(--muted)} .cn-v-apres{color:var(--accent-ink)} /* ---------- Réglages MODIFIABLES sur place (20/08/2026, point 5) ----------- Les mêmes cartes que les puces en lecture — même cadre, même clé en petites capitales — avec un contrôle à la place du texte. Continuité voulue : ce n'est pas un « mode édition » qu'on ouvre, ce sont les mêmes réglages, simplement devenus actionnables. `cursor:pointer` sur le