/* ============================ COMPOSANTS COMMUNS ============================
Le langage « corail apprivoisé », défini UNE fois (source : docs/maquettes/v3,
validé sur 6 tours). Chargé juste après les tokens : les vues migrent une par
une vers ces classes, puis leurs doublons locaux disparaissent — en dernier,
les passes 13-15.
Règles du langage : une seule action pleine par écran (corail) ; statuts en
point+texte, jamais de badge encadré ; la couleur porte du sens (vert avance,
ambre relance, rouge refus, violet IA) ; pastels pour la chaleur ; zéro boîte
décorative ; ombre quasi nulle au repos, douce au survol.
Chaque migration s'accompagne de la PASSE D'ÉPURATION (voir
docs/inventaire-visuel.md) : call-to-action hiérarchisés, boutons et
annotations secondaires supprimés, textes d'aide écourtés. */
/* ---------- Boutons : pilules, hiérarchie stricte ----------
Règle canonique de TOUTE l'app (déplacée depuis 13-passe-da.css). Par défaut
un .btn est plein corail : c'est l'héritage, et ~153 boutons en dépendent.
Les variantes historiques (ghost, quiet, primary, danger) sont conservées et
reformulées dans le nouveau langage — on ne renomme pas 153 appels. */
/* LE HALO. Le bouton plein corail était, jusqu'ici, le SEUL élément d'accent de
l'app sans relief — pendant que des filtres actifs, eux, en portaient un. La
hiérarchie était inversée : ce qui déclenche une action doit peser plus lourd
que ce qui décrit un état. Le halo n'est pas une ombre grise, c'est la couleur
du bouton diffusée sous lui : elle le fait rayonner sans le décoller. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font);font-size:13.5px;font-weight:500;line-height:1.2;border-radius:980px;border:1px solid transparent;background:var(--accent);color:var(--on-color);padding:9px 18px;cursor:pointer;box-shadow:var(--halo);transition:background .15s,color .15s,border-color .15s,box-shadow var(--mo-2) var(--sortie);text-decoration:none;white-space:nowrap;}
.btn .ic{width:16px;height:16px;}
.btn:hover{background:var(--accent-h);box-shadow:var(--halo-fort);}
/* SEUL le bouton plein corail rayonne. Toute variante qui REPEINT le fond —
grise, transparente, ou pastel — éteint le halo : il est corail plein, il
n'a aucun sens sous une pilule pâle, et deux boutons qui brillent côte à côte
n'en désignent plus aucun. Une nouvelle variante de fond rejoint cette liste. */
.btn.sec,.btn.lien,.btn.ghost,.btn.quiet,.btn.danger,.btn.ia,.btn.avance,.btn:disabled{box-shadow:none;}
.btn.sec:hover,.btn.lien:hover,.btn.ghost:hover,.btn.quiet:hover,.btn.danger:hover,.btn.ia:hover,.btn.avance:hover{box-shadow:none;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.sm{font-size:12.5px;padding:6px 13px;}
.btn.sm .ic{width:14px;height:14px;}
/* Nouveaux noms */
.btn.prim,.btn.primary{background:var(--accent);color:var(--on-color);}
.btn.prim:hover,.btn.primary:hover{background:var(--accent-h);}
.btn.sec{background:var(--surface-2);color:var(--text);}
.btn.sec:hover{background:var(--surface-3);}
.btn.lien{background:none;color:var(--accent-txt);padding:9px 4px;}
.btn.lien:hover{background:none;text-decoration:underline;}
/* Anciens noms, réécrits dans le langage : le fantôme et le discret se
confondent désormais — un bouton secondaire n'a plus de bordure. */
.btn.ghost,.btn.quiet{background:var(--surface-2);color:var(--text-dim);border-color:transparent;}
.btn.ghost:hover,.btn.quiet:hover{background:var(--surface-3);color:var(--text);}
.btn.danger{background:none;color:var(--red);}
.btn.danger:hover{background:var(--red-soft);color:var(--red);}
/* Le bouton « magique » : violet, étincelle — réservé à l'IA. Il s'appuie sur
--pm-f/--pm-t (le violet DE L'IA), jamais sur --purple (violet générique). */
.btn.ia{background:var(--pm-f);color:var(--pm-t);font-weight:600;}
.btn.ia::before{content:"✦";font-size:12px;}
.btn.ia:hover{filter:brightness(.96);}
/* Le bouton d'avancée : le geste qui fait progresser la recherche. L'avion en
papier (l'icône « send » de l'app, même tracé) remplace la flèche « → », qui
ne se lisait pas comme « envoyer ». Masque + currentColor : l'icône suit la
couleur du texte, y compris au survol. */
.btn.avance{background:var(--pc-f);color:var(--pc-t);font-weight:600;}
.btn.avance::after{content:"";width:14px;height:14px;flex-shrink:0;background:currentColor;
-webkit-mask:url('data:image/svg+xml,') center/contain no-repeat;
mask:url('data:image/svg+xml,') center/contain no-repeat;}
.btn.avance:hover{background:var(--accent);color:var(--on-color);}
.rangee{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
/* ---------- Intertitre de section ---------- */
/* `[hidden]` (spécificité 0,1,0) perd contre toute classe qui pose un `display`
— `.bloc-h2` en flex, par exemple : à égalité, la dernière règle déclarée
gagne. On double l'attribut pour monter à 0,2,0 : l'élément masqué le reste,
quelle que soit la feuille qui le stylise ensuite, et sans `!important`. */
[hidden][hidden]{display:none;}
.bloc-h2{font-size:12px;font-weight:600;color:var(--text-dim);margin:30px 0 12px;display:flex;align-items:center;gap:10px;}
.bloc-h2 .btn.lien{margin-left:auto;font-size:12.5px;padding:2px 4px;}
/* ---------- Statuts : texte + point, jamais de badge encadré ---------- */
.statut{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text-dim);white-space:nowrap;}
.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex-shrink:0;}
.statut.ok{color:var(--green-txt);} .statut.ok::before{background:var(--green-txt);}
.statut.att{color:var(--orange);} .statut.att::before{background:var(--orange);}
.statut.non{color:var(--red);} .statut.non::before{background:var(--red);}
/* --pc-t, pas --accent : l'accent est calibré pour porter du BLANC (fond plein),
il devient trop sombre en texte sur fond sombre. */
.statut.cor{color:var(--pc-t);} .statut.cor::before{background:var(--pc-t);}
/* Variante pilotée : la couleur vient de --c (posée en style inline par le JS,
ex. pipeColor). Pour les statuts DONNÉES, dont la palette vit dans le JS. */
.statut.var{color:var(--c,var(--text-dim));} .statut.var::before{background:var(--c,var(--text-dim));}
/* ---------- Métadonnées : texte séparé par des puces ---------- */
.meta{color:var(--text-dim);font-size:13px;overflow-wrap:anywhere;}
.meta b{color:var(--text);font-weight:500;}
.meta span+span::before{content:"·";margin:0 7px;color:var(--border);}
/* ---------- Ronds pastel : initiales, icônes — la chaleur ---------- */
.rond{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:16px;flex-shrink:0;}
.rond.sm{width:34px;height:34px;font-size:13px;}
.rond.xs{width:28px;height:28px;font-size:12px;}
.rond.v{background:var(--pv-f);color:var(--pv-t);}
.rond.b{background:var(--pb-f);color:var(--pb-t);}
.rond.r{background:var(--pr-f);color:var(--pr-t);}
.rond.j{background:var(--pj-f);color:var(--pj-t);}
.rond.c{background:var(--pc-f);color:var(--pc-t);}
.rond.m{background:var(--pm-f);color:var(--pm-t);}
/* ---------- Cartes ---------- */
.carte{background:var(--surface);border:1px solid transparent;border-radius:var(--radius);padding:18px 20px;transition:box-shadow .2s,border-color .2s;box-shadow:var(--pose);}
.carte:hover{box-shadow:var(--souleve);}
.carte h3{font-size:15.5px;font-weight:650;letter-spacing:-.012em;margin-bottom:2px;}
.carte .ent{font-size:13.5px;color:var(--text-dim);margin-bottom:10px;}
.carte .desc{font-size:13px;color:var(--text-dim);line-height:1.55;margin:10px 0 14px;max-width:62ch;}
.carte .actions{display:flex;gap:12px;align-items:center;border-top:1px solid color-mix(in srgb,var(--border) 55%,var(--surface));padding-top:12px;}
.cartes{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.carte .pied{display:flex;align-items:center;justify-content:space-between;border-top:1px solid color-mix(in srgb,var(--border) 55%,var(--surface));padding-top:11px;margin-top:12px;}
/* Le score a son coin dédié — structuré, pas flottant. */
/* flex-shrink:1 depuis le portrait : la pastille de pertinence est plus large
qu'un nombre, le coin doit pouvoir céder (le libellé s'ellipse) plutôt que
de faire déborder la carte. */
.coin{margin-left:auto;text-align:right;flex-shrink:1;min-width:0;}
.coin b{display:block;font-size:17px;font-weight:700;color:var(--pc-t);font-variant-numeric:tabular-nums;line-height:1.1;}
.coin span{font-size:11px;color:var(--text-dim);}
/* Passer : une croix, pas un mot. */
.passer-x{width:28px;height:28px;border-radius:50%;border:none;background:none;color:var(--text-dim);font-size:15px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;}
.passer-x:hover{background:var(--surface-2);color:var(--red);}
/* ---------- Lignes de liste (mails, tâches, activité) ---------- */
.lignes{border-top:1px solid color-mix(in srgb,var(--border) 55%,var(--surface));}
/* Une ligne de liste SE DÉTACHE au survol. Elle se contentait d'un fond
--surface-2 : depuis que la page est crème, cette teinte est exactement celle
du fond — le survol ne se voyait plus du tout. Elle prend donc le blanc des
cartes et leur élévation : la ligne se décolle de la liste, c'est le même
geste que partout ailleurs.
La marge négative de 6 px sert à la SURFACE, pas au texte : elle déborde de
la largeur du texte pour que le blanc l'entoure, et le texte reste au pixel
près là où il était (−6 de marge + 10 de retrait = les 4 px d'avant). */
.ligne{display:flex;align-items:center;gap:14px;padding:13px 10px;margin:0 -6px;border-radius:10px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,var(--surface));cursor:pointer;transition:box-shadow var(--mo-2) var(--sortie),background var(--mo-2) var(--sortie);}
.ligne:hover{background:var(--surface);box-shadow:var(--souleve);border-bottom-color:transparent;}
.ligne .corps-l{flex:1;min-width:0;}
.ligne .corps-l b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ligne .corps-l span{display:block;font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Une suggestion en attente est la seule chose de cette ligne qui appelle un
geste : elle prend la couleur d'action, le reste garde le gris de contexte. */
.ligne .corps-l span.ml2-sug{color:var(--accent-txt);font-weight:600;}
/* Suggestion validée : le message a produit quelque chose. Vert, et sans le
poids du corail — c'est un acquis, plus un appel à agir. */
.ligne .corps-l span.ml2-fait{color:var(--green-txt);font-weight:600;}
.ligne .corps-l span.ml2-fait::before{content:"✓ ";}
.ligne .fin{flex-shrink:0;text-align:right;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
/* Bloc qui défile à la molette (aperçus de mails sur l'accueil) */
.defile{max-height:232px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;}
/* L'aperçu des messages de l'accueil est le seul de ces défilements qu'on LIT
vraiment : à 232 px il montrait six lignes et il fallait faire défiler pour
voir la journée. On double, sans toucher à `.defile`, qui borne aussi des
listes courtes ailleurs — les allonger n'y apporterait rien. */
#dashMailBloc .defile{max-height:480px;}
@media (max-width:900px){ #dashMailBloc .defile{max-height:360px;} }
.defile::-webkit-scrollbar{width:8px;}
.defile::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
/* ---------- Kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.kcol h4{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:10px;display:flex;justify-content:space-between;}
.kcol h4 em{font-style:normal;color:var(--text-dim);}
.kcarte{position:relative;background:var(--surface);border:1px solid transparent;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:box-shadow .2s,border-color .2s;box-shadow:var(--pose);}
.kcarte:hover{box-shadow:var(--souleve);}
/* Glisser-deposer : la main indique que la carte se prend, la carte prise
s'efface, la colonne visee se teinte du pastel corail. */
.kcarte[draggable="true"]{cursor:grab;}
.kcarte[draggable="true"]:active{cursor:grabbing;}
.kcarte.kb-pris{opacity:.4;}
.kcol.kb-cible{outline:2px dashed var(--accent);outline-offset:-4px;background:var(--pc-f);}
.kcarte b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;}
.kcarte span{display:block;font-size:12px;color:var(--text-dim);margin-top:1px;}
.kcarte .statut{margin-top:7px;display:inline-flex;}
/* Pleine page : colonnes en zones gris chaud, fonctionnelles, pas décoratives */
/* auto-fit : le tableau s'adapte au nombre réel de colonnes (5 dans l'app,
4 dans les maquettes) sans qu'aucune ne passe à la ligne. */
.kanban.plein{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));align-items:start;}
.kanban.plein .kcol{background:var(--surface-2);border-radius:var(--radius);padding:12px;min-height:62vh;}
.kanban.plein .kcol h4{padding:2px 4px 0;}
/* Déplacer à la souris : en bas à droite, seulement les directions possibles */
/* Le pied de carte est une bande réservée : « À relancer » à gauche, flèches à
droite. `visibility` et non `display` : la place est retenue même sans
survol, donc les flèches n'écrasent jamais un texte. */
.k-haut{display:flex;align-items:baseline;gap:8px;}
.k-haut b{flex:1;min-width:0;}
.k-age{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;flex-shrink:0;}
.k-pied{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-height:24px;}
.k-nav{display:flex;gap:4px;visibility:hidden;}
.kcarte:hover .k-nav{visibility:visible;}
.k-nav button{width:24px;height:24px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text-dim);font-size:12px;font-weight:700;cursor:pointer;transition:background .12s,color .12s;}
.k-nav button:hover{background:var(--pc-f);color:var(--pc-t);}
.k-nav .avancer:hover{background:var(--accent);color:var(--on-color);}
/* Suggestion née d'un mail : proposée, jamais imposée */
.sugg{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--pb-t);background:var(--pb-f);border-radius:8px;padding:5px 6px 5px 9px;}
.sugg button{margin-left:auto;border:none;background:var(--surface);color:var(--pb-t);font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px;cursor:pointer;flex-shrink:0;}
.sugg button:hover{background:var(--pb-t);color:var(--on-color);}
/* ---------- Indicateurs : deltas ▲▼ sur un trait, pas de boîte ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.stats.q{grid-template-columns:repeat(4,1fr);}
/* L'indicateur est un bouton : il mène à la partie du Bilan qui le développe.
Il n'en prend pas l'allure pour autant — le filet reste le seul ornement,
seul le survol révèle qu'on peut cliquer. */
.stat{border-top:2px solid var(--border);padding-top:11px;display:block;width:100%;
text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;
font-family:var(--font);color:inherit;cursor:pointer;transition:border-color .15s;}
.stat:hover{border-top-color:var(--accent);}
.stat:hover .n{color:var(--accent);}
/* Section du Bilan visée depuis un indicateur : un souligné bref, le temps
que l'œil la trouve après le défilement. */
.vise{animation:viseFlash 1.6s ease-out;}
@keyframes viseFlash{0%,55%{background:var(--pc-f);}100%{background:transparent;}}
.stat .l{font-size:12.5px;color:var(--text-dim);}
.stat .n{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:1px 0;}
.stat .d{font-size:12.5px;font-weight:600;}
.stat .d.up{color:var(--green-txt);} .stat .d.down{color:var(--red);} .stat .d.plat{color:var(--text-dim);font-weight:500;}
/* ---------- Tableaux (opt-in : classe .tableau sur la
) ---------- */
/* Un tableau ne se comprime pas sous son contenu : sur un vrai jeu de données
il déborde en 390 px. Il défile donc DANS sa propre boîte, et c'est la boîte
qui respecte la largeur de la page — jamais le corps qui défile. */
.tableau-boite{overflow-x:auto;max-width:100%;}
.tableau{width:100%;border-collapse:collapse;font-size:13px;}
.tableau th{text-align:left;font-size:11.5px;font-weight:600;color:var(--text-dim);padding:8px 14px 8px 0;border-bottom:1px solid var(--border);}
.tableau td{padding:10px 14px 10px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,var(--surface));font-variant-numeric:tabular-nums;}
.tableau th.num,.tableau td.num{text-align:right;padding-right:0;}
.tableau tr:hover td{background:var(--surface-2);}
/* ---------- Barres (funnel, répartitions) ---------- */
.barre{display:grid;grid-template-columns:130px 1fr 46px;align-items:center;gap:12px;margin-bottom:10px;font-size:13px;}
.barre .b-l{color:var(--text-dim);}
.barre .b-t{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;}
.barre .b-t i{display:block;height:100%;background:var(--accent);border-radius:4px;}
.barre .b-n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
/* ---------- Contrôle segmenté (conteneur ; les boutons restent .seg) ---------- */
.segments{display:inline-flex;background:var(--surface-2);border-radius:980px;padding:3px;gap:2px;}
.segments button{font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--text-dim);background:none;border:none;border-radius:980px;padding:6px 14px;cursor:pointer;}
.segments button.on,.segments button.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--saillie);}
/* ---------- Recherche & champs ---------- */
.cherche{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:980px;padding:10px 18px;max-width:520px;background:var(--surface);}
.cherche input{flex:1;border:none;outline:none;font-family:var(--font);font-size:14px;color:var(--text);background:none;min-width:0;}
.cherche input::placeholder{color:var(--text-dim);}
.champ label{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px;}
.champ-opt{color:var(--text-dim);font-weight:400;}
.champ input,.champ textarea{width:100%;font-family:var(--font);font-size:13.5px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--pc-f);}
/* ---------- Pop-up : le contenu vient à nous, l'app floutée derrière ----------
Le flou porte sur .wrap et .sidebar, JAMAIS sur un ancêtre du pop-up : un
filter non-none crée un bloc conteneur et recalerait son position:fixed. */
body.popup-ouvert .wrap,body.popup-ouvert .sidebar{filter:blur(3px);pointer-events:none;user-select:none;}
.popup-h{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;}
/* Dans le pop-up, la carte occupe la hauteur disponible — pas les 210 px du
widget qu'elle remplace. */
.popup .dash-map{height:calc(100vh - 32vh);min-height:280px;}
/* Le géocodage prend du temps sur un vrai jeu de candidatures : on dit où on
en est plutôt que de laisser croire que la carte est vide. */
.carte-etat{margin-top:12px;font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
/* Légende de la carte : la couleur d'une pastille doit se lire quelque part. */
.carte-legende{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:12.5px;color:var(--text-dim);}
.carte-legende span{display:inline-flex;align-items:center;gap:7px;}
.carte-legende i{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.carte-legende i.base{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--text);}
.voile{position:fixed;inset:0;background:var(--overlay);z-index:60;}
.popup{position:fixed;inset:4vh 6vw;background:var(--surface);border-radius:18px;box-shadow:var(--recouvre);z-index:61;overflow-y:auto;padding:30px 36px 40px;}
.popup .p-fermer{position:absolute;top:18px;right:20px;display:flex;gap:14px;align-items:center;}
.popup .p-fermer .x{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:none;color:var(--text-dim);font-size:14px;cursor:pointer;display:grid;place-items:center;text-decoration:none;}
.popup .p-fermer .x:hover{color:var(--text);}
.retour{display:inline-block;font-size:13px;color:var(--text-dim);text-decoration:none;margin-bottom:18px;background:none;border:none;cursor:pointer;font-family:var(--font);}
.retour:hover{color:var(--accent);}
/* ---------- Fiche : sous-parties à gauche, essentiel épinglé à droite ---------- */
.fiche{display:grid;grid-template-columns:160px minmax(0,1fr) 220px;gap:36px;align-items:start;}
.f-nav{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;}
.f-nav a{font-size:13px;font-weight:500;color:var(--text-dim);text-decoration:none;padding:7px 10px;border-radius:8px;cursor:pointer;}
.f-nav a:hover{background:var(--surface-2);color:var(--text);}
/* --pc-t (et non --accent-h) : c'est le texte prévu pour le fond --pc-f. */
.f-nav a.on{color:var(--pc-t);background:var(--pc-f);font-weight:600;}
.f-corps h3{font-size:14px;font-weight:650;margin:22px 0 8px;}
.f-corps h3:first-child{margin-top:0;}
.f-corps p,.f-corps li{font-size:13.5px;color:var(--text-dim);line-height:1.6;}
.f-corps ul{padding-left:19px;margin:6px 0;}
.f-corps li{margin:4px 0;}
.f-cote .g{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:16px 0 3px;}
.f-cote .g:first-child{margin-top:0;}
.f-cote .v{font-size:13.5px;font-weight:550;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text-dim);border:1px solid var(--border);border-radius:980px;padding:5px 13px;background:var(--surface);cursor:pointer;text-decoration:none;}
.chip:hover{color:var(--text);border-color:var(--text-mute);}
/* ---------- Carte d'offre de « À trier » ---------- */
.oc-carte{display:flex;flex-direction:column;}
.oc-head{display:flex;gap:11px;align-items:center;margin-bottom:9px;cursor:pointer;}
.oc-logo{overflow:hidden;}
.oc-logo img{width:100%;height:100%;object-fit:contain;}
.oc-tt{min-width:0;flex:1;}
/* Plus de min-height deux lignes : un titre court laissait un vide entre le
titre et la ligne d'identité, avec le logo flottant au milieu (retour N1). */
.oc-tt h3{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.32;}
.oc-tt .ent{margin:0;}
/* Une seule ligne d'identité : entreprise · ville · contrat. Les points
séparent, la couleur hiérarchise — l'entreprise pleine, le reste en retrait.
`nowrap` + ellipse : la ligne ne casse jamais la hauteur de la carte. */
.oc-ident{display:flex;align-items:baseline;gap:0;margin-top:3px;flex-wrap:wrap;min-width:0;}
/* L'ENTREPRISE ne rétrécit jamais : c'est l'information qui doit sauter aux
yeux. C'est le lieu qui s'abrège, et la ligne passe à deux au besoin —
avant, une adresse complète faisait disparaître le nom entièrement. */
.oc-ident>*{flex-shrink:0;white-space:nowrap;}
/* La ville cède en premier — six fois plus vite que le nom de l'employeur, qui
compte davantage. Mais L'EMPLOYEUR DOIT CÉDER AUSSI, en dernier recours :
`flex-shrink:0` sans borne le laissait pousser la carte hors de l'écran, et
la page entière avec (mesuré : 1109 px de débordement sur un nom à rallonge).
Un nom un peu long ne bouge pas d'un pixel pour autant : il faut qu'aucune
place ne reste, ce qui n'arrive jamais sur un nom ordinaire. */
.oc-ident>.oc-lieu{flex-shrink:6;min-width:0;overflow:hidden;}
.oc-ident>.oc-ent{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.oc-lieu>span{overflow:hidden;text-overflow:ellipsis;}
.oc-ident>*+*::before{content:"·";margin:0 7px;color:var(--border);font-weight:400;}
.oc-ctr{font-size:12.5px;color:var(--text-dim);}
/* Demi-gras, pas gras : le titre du poste garde le gras pour lui. L'entreprise
se distingue par sa couleur pleine face à la ville en retrait — trop de gras
sur une même carte, et plus rien ne ressort. */
.oc-ent{font-size:13.5px;font-weight:550;color:var(--text);letter-spacing:-.01em;}
.oc-lieu{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text-dim);}
.oc-lieu .ic{width:12px;height:12px;flex-shrink:0;}
.oc-carte .pied{margin-top:auto;}
.oc-suggest{display:flex;align-items:center;gap:7px;width:100%;margin-top:9px;font-family:var(--font);font-size:11.5px;font-weight:600;text-align:left;color:var(--pb-t);background:var(--pb-f);border:none;border-radius:8px;padding:7px 10px;cursor:pointer;}
.oc-suggest .ic{width:14px;height:14px;flex-shrink:0;}
.oc-suggest:hover{filter:brightness(.97);}
.btn.ghost.on{background:var(--pc-f);color:var(--pc-t);}
/* ---------- LA fiche d'offre (une seule, de « À trier » au Suivi) ----------
Elle vit dans la modale existante — pas dans un .popup — pour que les
sous-modales qu'elle ouvre (suppression, doublon, CV…) restent au-dessus.
La modale apporte déjà le fond flouté. */
.modal.fi-shell{width:min(1080px,95vw);max-height:90vh;padding:26px 30px 30px;}
.fi-tete{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.fi-logo{width:52px;height:52px;border-radius:14px;font-size:20px;overflow:hidden;}
.fi-logo img{width:100%;height:100%;object-fit:contain;}
/* Fiche marque : le logo se corrige au clic (marques seulement — une offre
tient son logo de sa marque ou de son extraction). */
.fi-logo-edit{cursor:pointer;position:relative;}
.fi-logo-edit:hover::after{content:"✎";position:absolute;inset:0;display:grid;place-items:center;
background:color-mix(in srgb,var(--text) 42%,transparent);color:var(--on-color);font-size:16px;}
.fi-tt{flex:1;min-width:0;}
.fi-titre{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:3px;}
.fi-tete .fi-x{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:none;color:var(--text-dim);font-size:14px;cursor:pointer;}
.fi-tete .fi-x:hover{color:var(--text);}
.fi-actions{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border-soft);}
/* ---------- L'ÉTAT : une piste segmentée, un curseur qui glisse ----------
C'étaient cinq pilules libres encadrées de deux flèches : 562 px de boutons
qui passaient à la ligne, trois hauteurs différentes, et un faux contour
dessiné en `inset` — un trait déguisé en ombre, contre le système.
C'est UN objet maintenant : une piste creusée, un curseur blanc qui se
déplace d'un cran à l'autre. Même geste que les volets Postes/Marques, même
relief que l'onglet actif de la barre latérale (--saillie).
Le curseur est BLANC, jamais de la couleur du statut : du blanc sur corail
plafonne à 2,73 de contraste. La couleur vit dans le TEXTE du cran actif. */
.fi-suivi-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.fi-age{margin-left:auto;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.fi-piste{position:relative;display:inline-flex;gap:1px;padding:3px;border-radius:999px;background:var(--surface-2);max-width:100%;overflow:hidden;}
.fi-cran{position:relative;z-index:1;border:0;background:none;font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--text-mute);padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color var(--mo-2) var(--sortie);}
.fi-cran:hover{color:var(--text);}
/* Les crans FRANCHIS sont plus lisibles que les crans à venir : on lit d'un
coup d'œil jusqu'où la candidature est allée. */
.fi-cran.fait{color:var(--text-dim);}
.fi-cran.on{color:var(--c,var(--accent));}
.fi-curseur{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:var(--surface);box-shadow:var(--saillie);z-index:0;}
.fi-curseur.pret{transition:transform .34s var(--ease),width .34s var(--ease);}
@media (prefers-reduced-motion:reduce){ .fi-curseur.pret{transition:none;} }
/* ---------- Les GESTES : une barre posée au bas de la fiche ----------
Elle survole l'annonce qui défile dessous, donc --flottant — retourné vers
le haut, puisque c'est par le haut qu'on l'aborde. Les boutons y sont tous
à la même hauteur : c'est le mélange de trois hauteurs qui faisait « pas
fini ». Ce qui est SECONDAIRE part à droite, séparé par l'espace. */
/* La coquille devient une COLONNE : tête et état fixes en haut, l'annonce
élastique au milieu, la barre des gestes toujours en bas. C'est la seule
façon de l'y clouer — en `position:sticky`, elle s'accrochait au bord d'une
modale qui défile elle-même, donc jamais au bon endroit. */
/* Cadré sur la fiche QUI A une barre : la même coquille sert à la fiche marque,
qui n'en a pas — sans ce `:has`, elle perdait son fond de page et son
contenu venait toucher le bord. */
.modal.fi-shell:has(.fi-pied){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;}
.fi-shell:has(.fi-pied)>.fi-tete,.fi-shell:has(.fi-pied)>.fi-actions{flex:0 0 auto;}
/* C est l ENVELOPPE qui defile, pas la grille : contrainte en hauteur, la
grille repartissait ses lignes et .f-corps recouvrait .f-cote. */
.fi-shell>.fi-defile{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.fi-pied{flex:0 0 auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
margin:16px -24px 0;padding:13px 24px calc(13px + env(safe-area-inset-bottom,0px));
background:var(--surface);border-radius:0 0 18px 18px;
box-shadow:0 -6px 20px -9px hsl(var(--ombre-teinte)/calc(var(--ombre-force) + 8%));}
.fi-pied-fin{margin-left:auto;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;}
/* Toutes les pilules de la barre sur la MÊME hauteur : .btn.lien reprenait un
retrait vertical de 9 px là où .sm en pose 6, d'où 35 px contre 29. */
.fi-pied .btn.lien.sm{padding:6px 6px;}
/* Un geste rare réduit à son icône : carré, sans fond, le libellé au survol.
Même famille que .fi-x et .sb-collapse — on ne crée pas un troisième
vocabulaire de bouton-icône. */
.fi-icone{width:30px;height:30px;padding:0;border-radius:9px;color:var(--text-dim);flex-shrink:0;
transition:background var(--mo-1) var(--sortie),color var(--mo-1) var(--sortie);}
.fi-pied .btn.lien.sm.fi-icone{padding:0;}
.fi-icone .ic{width:16px;height:16px;}
.fi-icone:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}
@media(max-width:700px){
.fi-pied{margin:14px -18px 0;padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));}
.fi-pied-fin{margin-left:0;}
.fi-piste{overflow-x:auto;scrollbar-width:none;} .fi-piste::-webkit-scrollbar{display:none;}
}
/* « Passer cette offre » était un mot en gris très clair, invisible. C'est une
décision : elle mérite un bouton — discret par la couleur, franc par la forme. */
.fi-passer{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);display:block;}
.fi-passer .btn{width:100%;justify-content:center;}
.fi-map{height:300px;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);display:grid;place-items:center;}
.fi-shell .fiche{height:58vh;}
.fi-shell .f-corps{height:100%;overflow-y:auto;padding-right:8px;}
@media(max-width:900px){.fi-shell .fiche{height:auto;}.fi-shell .f-corps{height:auto;max-height:none;}}
/* ---------- Rail latéral repliable (suivi) ---------- */
/* ---------- Grille de marques : le logo est le héros, prêt pour 100+ ---------- */
.marques{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.marque{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 10px 14px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s;box-shadow:var(--pose);}
.marque:hover{box-shadow:var(--souleve);}
.marque .logo-m{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:20px;overflow:hidden;}
.marque .logo-m img{width:100%;height:100%;object-fit:contain;}
.marque b{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.marque .statut{font-size:11.5px;}
/* La galerie de marques adopte la grille commune. */
.reve-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.reve-card.selecting{outline:2px dashed var(--border);outline-offset:-2px;}
.reve-card.selected{outline:2px solid var(--accent);outline-offset:-2px;background:var(--pc-f);}
.reve-cb{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;}
.reve-card{position:relative;}
/* L'intertitre de dossier (secteur, à revisiter…) : une ligne, pas une boîte. */
.reve-folder-head{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--text-dim);margin:18px 0 2px;cursor:pointer;}
.reve-folder-head .ff-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.reve-folder-head .ff-count{margin-left:auto;color:var(--text-mute);}
.reve-folder-head .ff-chev{display:inline-flex;transition:transform .2s;}
.reve-folder-head.collapsed .ff-chev{transform:rotate(-90deg);}
.reve-folder-head .ic{width:12px;height:12px;}
/* ---------- Tuiles d'action (accueil) ---------- */
.tuiles-action{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.tuile-action{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px 16px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);cursor:pointer;text-decoration:none;color:var(--text);font-size:13px;font-weight:600;text-align:center;transition:border-color .2s,box-shadow .2s;box-shadow:var(--pose);}
.tuile-action:hover{box-shadow:var(--souleve);}
/* ---------- En-tête d'adresse (messagerie) ---------- */
.adresse{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;max-width:860px;}
/* .a-lbl / .a-val et non .g / .v : « .adresse .v » attraperait aussi le pastel
vert .rond.v placé juste à côté. */
.adresse .a-lbl{font-size:11px;font-weight:600;color:var(--text-dim);margin-bottom:1px;}
.adresse .a-val{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.adresse .etat{text-align:right;}
.adresse .etat b{display:block;font-size:12.5px;font-weight:650;color:var(--green-txt);white-space:nowrap;}
.adresse .etat span{font-size:11.5px;color:var(--text-dim);white-space:nowrap;}
/* Un message non lu : le nom en gras, rien de plus. */
.ligne.non-lu .corps-l b{font-weight:700;}
/* Aperçu d'un mail : il vit dans la modale, comme la fiche d'offre. */
/* La coquille prend plus de large (écran 21:9), mais le corps du message reste
plafonné : au-delà d'environ 70 caractères par ligne, l'œil perd sa ligne en
revenant à la marge. L'en-tête et le pied, eux, occupent toute la largeur. */
/* `.modal.mail-shell` et non `.mail-shell` seul : `.modal` vit dans
06-modales.css, chargé APRÈS ce fichier — à spécificité égale il gagnait, et
l'aperçu restait bloqué à 560 px. Même parade que `.modal.fi-shell`. */
.modal.mail-shell{width:min(980px,94vw);}
.mail-sugg{max-width:none;margin:0 0 4px;font-size:12.5px;padding:9px 9px 9px 13px;}
.mail-sugg .ignorer{background:none;color:var(--text-dim);}
/* La candidature liée, affichée DANS la fenêtre du message : on compare sans
naviguer. Volontairement compacte — c'est un repère, pas une fiche. */
.mail-lien{display:flex;align-items:center;gap:11px;margin:10px 0 2px;padding:10px 13px;
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;}
.mail-lien .ml-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mail-lien .ml-tt b{font-size:13.5px;font-weight:650;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-lien .ml-tt span{font-size:12px;color:var(--text-dim);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-lien .ml-meta{color:var(--text-mute);display:flex;align-items:center;gap:7px;}
.mail-lien .ml-pastille{font-style:normal;font-size:11px;font-weight:650;
background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 8px;color:var(--text-dim);}
.mail-lien .ml-actes{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.mail-lien .ml-actes .btn{padding:6px 9px;}
.mail-avert{color:var(--orange);}
.mail-avert .ic{width:13px;height:13px;vertical-align:-.15em;}
.mail-corps{max-height:52vh;overflow-y:auto;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:14px;line-height:1.65;}
/* Le TEXTE se plafonne (au-delà d'environ 75 caractères par ligne, l'œil perd
sa ligne en revenant à la marge) ; l'iframe d'un mail HTML garde toute la
largeur, elle porte sa propre mise en page. */
.mail-corps > :not(.mzg-iframe){max-width:75ch;}
.mail-pied{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--border-soft);}
.mail-pied .btn.lien{margin-left:auto;}
/* ---------- Divers ---------- */
.zone-vide{border:1px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;color:var(--text-dim);font-size:13px;}
/* Variante « invitation » : un titre, une phrase, une action. */
.zone-vide b{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:5px;}
.zone-vide span{display:block;max-width:460px;margin:0 auto;line-height:1.55;}
.zone-vide .btn{margin-top:14px;}
/* ---------- Petits écrans ---------- */
@media(max-width:860px){
.kanban,.cartes{grid-template-columns:1fr 1fr;}
.stats,.stats.q{grid-template-columns:1fr 1fr;gap:18px;}
.kanban.plein{grid-template-columns:repeat(5,230px);overflow-x:auto;padding-bottom:8px;}
.fiche{grid-template-columns:minmax(0,1fr);}
.f-nav{flex-direction:row;overflow-x:auto;position:static;}
.tuiles-action{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
.kanban,.cartes{grid-template-columns:1fr;}
.adresse{grid-template-columns:auto minmax(0,1fr);}
.adresse .etat{text-align:left;}
.popup{inset:2vh 3vw;padding:20px 18px 30px;}
}
/* ---------- Accueil : deux colonnes ----------
À gauche ce qui est daté et les messages, à droite le mois. Sous 1100 px le
calendrier passe SOUS la liste — il ne disparaît jamais, c'est la seule
porte vers la vue mensuelle. */
.accueil-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px 40px;align-items:start;}
@media(max-width:1100px){ .accueil-cols{grid-template-columns:minmax(0,1fr);} }
/* ---------- Calendrier ----------
Deux échelles de la même donnée : la mini-vue signale, le pop-up détaille.
Le dessin s'inspire des calendriers de bureau — une vraie grille tramée de
filets, les jours des mois voisins en retrait, aujourd'hui en pastille
pleine — sans quitter la palette : aucun aplat neuf, que des tokens. */
.minical-tete{display:flex;align-items:center;gap:2px;margin-bottom:10px;}
.minical-mois{flex:1;text-align:center;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
text-transform:capitalize;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:7px;}
.minical-mois:hover{background:var(--bg-2);}
.cal-fleche{background:none;border:none;color:var(--text-dim);font-size:17px;line-height:1;cursor:pointer;
width:26px;height:26px;border-radius:7px;flex-shrink:0;font-family:var(--font);}
.cal-fleche:hover{background:var(--bg-2);color:var(--text);}
/* La trame : un fond de filet, des cases qui laissent passer 1 px entre elles. */
.cal-entete{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-entete span{font-size:10.5px;font-weight:600;color:var(--text-dim);text-align:center;padding:0 0 7px;text-transform:capitalize;}
.cal-cases{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:var(--radius-sm);overflow:hidden;}
.cal-case{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface);
border:none;padding:5px 3px;cursor:pointer;font-family:var(--font);color:var(--text);transition:background .12s;}
.cal-case:hover{background:var(--surface-2);}
.cal-case.hors{background:var(--surface-2);}
/* --text-dim et non --text-mute : les jours voisins doivent rester lisibles
(--text-mute tombe à 3,1 de contraste). C'est le fond gris de la case qui
les met en retrait, pas un texte qu'on n'arrive plus à lire. */
.cal-case.hors .cal-n{color:var(--text-dim);}
.cal-n{font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;
min-width:21px;height:21px;display:grid;place-items:center;border-radius:50%;}
.cal-case.ajd .cal-n{background:var(--accent);color:var(--on-color);font-weight:600;}
.cal-pts{display:flex;gap:2px;height:5px;align-items:center;justify-content:center;}
.cal-pt{width:4px;height:4px;border-radius:50%;display:block;}
.cal-pt.v{background:var(--pv-t);} .cal-pt.b{background:var(--pb-t);}
.cal-pt.r{background:var(--pr-t);} .cal-pt.j{background:var(--pj-t);}
.cal-pt.c{background:var(--pc-t);} .cal-pt.m{background:var(--pm-t);}
/* Réduit : cases carrées, grille entièrement cliquable. */
.cal-grille.compacte{cursor:pointer;}
.cal-grille.compacte .cal-case{aspect-ratio:1;justify-content:center;padding:2px;cursor:pointer;}
.cal-grille.compacte .cal-case:hover{background:var(--surface);}
.cal-grille.compacte:hover .cal-cases{border-color:var(--border);}
.minical-suite{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:14px;padding:10px 12px;
background:var(--surface-2);border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);}
.minical-suite:hover{background:var(--surface-3);}
.minical-t{display:flex;flex-direction:column;min-width:0;}
.minical-t b{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.minical-t span{font-size:11.5px;color:var(--text-dim);}
/* Développé : deux colonnes — la grille, puis le mois écrit et l'ajout. */
.cal-tete{display:flex;align-items:center;gap:6px;margin-bottom:20px;padding-right:40px;}
.cal-tete .popup-h{text-transform:capitalize;margin:0;}
.cal-tete .cal-fleche{font-size:21px;width:32px;height:32px;}
.cal-tete .btn{margin-left:10px;}
.cal-cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr);gap:30px;align-items:start;}
.popup .cal-entete span{font-size:11px;padding-bottom:9px;}
.popup .cal-case{aspect-ratio:auto;min-height:82px;justify-content:flex-start;align-items:stretch;padding:6px 6px 5px;gap:4px;}
.popup .cal-n{align-self:center;font-size:13px;min-width:25px;height:25px;}
.cal-evs{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cal-ev{font-size:10px;line-height:1.45;padding:2px 5px;border-radius:5px;text-align:left;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-ev.v{background:var(--pv-f);color:var(--pv-t);} .cal-ev.b{background:var(--pb-f);color:var(--pb-t);}
.cal-ev.r{background:var(--pr-f);color:var(--pr-t);} .cal-ev.j{background:var(--pj-f);color:var(--pj-t);}
.cal-ev.c{background:var(--pc-f);color:var(--pc-t);} .cal-ev.m{background:var(--pm-f);color:var(--pm-t);}
.cal-plus{font-size:10px;color:var(--text-dim);padding-left:5px;}
.cal-cote .bloc-h2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0;}
@media(max-width:900px){
.cal-cols{grid-template-columns:minmax(0,1fr);gap:22px;}
.popup .cal-case{min-height:62px;}
.cal-ev{font-size:9.5px;}
}
@media(max-width:680px){
.cal-tete{flex-wrap:wrap;padding-right:36px;}
.popup .cal-case{min-height:52px;padding:4px 3px;}
.popup .cal-n{font-size:12px;min-width:22px;height:22px;}
.cal-ev{display:none;}
.popup .cal-case.plein::after{content:;width:4px;height:4px;border-radius:50%;background:var(--accent);align-self:center;}
}
/* ---------- Fiche : liens en pastilles et colonne d'identité ----------
Les liens de la section Entreprise reprennent les ronds pastel de l'accueil.
La colonne de droite suit l'utilisateur d'un onglet à l'autre : elle est
soignée comme une carte d'identité, pas comme une liste d'étiquettes. */
.liens-pastel{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.liens-pastel a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;
border-radius:var(--radius);text-decoration:none;color:var(--text);font-size:12.5px;font-weight:500;
text-align:center;transition:background .13s;}
.liens-pastel a:hover{background:var(--surface-2);}
.liens-pastel .ic{width:15px;height:15px;}
.cote-score{display:flex;flex-direction:column;align-items:center;gap:7px;padding-bottom:18px;
margin-bottom:16px;border-bottom:1px solid var(--border-soft);}
.cote-score span{font-size:11.5px;color:var(--text-dim);}
.cote-liste{display:grid;grid-template-columns:1fr;gap:0;margin:0;}
.cote-liste dt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-dim);margin-top:14px;}
.cote-liste dt:first-child{margin-top:0;}
.cote-liste dd{margin:3px 0 0;font-size:13.5px;font-weight:550;}
.cote-annonce{margin-top:20px;width:100%;justify-content:center;}
.cote-suppr{margin-top:8px;width:100%;justify-content:center;}
/* ---------- Aperçu d'une candidature sur les cartes ----------
La même carte compacte que le kanban, dans la bulle Leaflet. La bulle
elle-même s'habille aux tokens : surface, bordure, ombre du langage — plus
le blanc Leaflet par défaut, illisible en thème sombre. */
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--text);border-radius:12px;
box-shadow:var(--recouvre);border:1px solid var(--border);}
.leaflet-popup-content{margin:11px 13px;font-family:var(--font);line-height:1.4;}
.leaflet-popup-tip{background:var(--surface);}
.cpop{display:flex;gap:10px;align-items:flex-start;cursor:pointer;min-width:190px;max-width:260px;}
.cpop-tt{min-width:0;}
.cpop-tt b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);}
.cpop-tt>span{display:block;font-size:12px;color:var(--text-dim);margin-top:1px;}
.cpop:hover .cpop-tt b{color:var(--accent);}
/* `.cpop .cpop-statut` (0-2-0) et non `.cpop-statut` seul : `.cpop-tt>span`
(0-1-1) gagnerait et repeindrait le statut dans le gris générique. */
.cpop .cpop-statut{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
color:var(--c,var(--text-dim));margin-top:6px;}
.cpop .cpop-statut::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--text-dim));flex-shrink:0;}
/* ---------- Infos société (fiche, sous-partie Entreprise) ----------
Étiquette + valeur, un rond pastel par donnée. Peu d'informations : on leur
donne de l'air plutôt que de les tasser en pastilles. */
.ci-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 22px;margin:6px 0 4px;}
.ci-cell{display:flex;align-items:center;gap:10px;min-width:0;}
.ci-cell .ic{width:15px;height:15px;}
.ci-txt{display:flex;flex-direction:column;min-width:0;}
.ci-l{font-size:11px;color:var(--text-dim);}
.ci-txt b{font-size:13px;font-weight:600;line-height:1.35;}
/* Suggestions de notes : la checklist devenue aide à écrire. */
.note-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.note-chip{font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-dim);background:var(--surface-2);border:none;border-radius:980px;padding:5px 12px;cursor:pointer;}
.note-chip:hover{background:var(--pc-f);color:var(--pc-t);}
/* ---------- Découvrir ----------
Les critères en rangée, les propositions en lignes. Aucun composant neuf :
.champ, .lignes/.ligne, .rond, .segments, .btn ia. */
/* Flex et non grid : `repeat(auto-fit, …)` ne peut pas cohabiter avec une piste
`auto` dans la même liste — la déclaration entière était rejetée, d'où les
champs empilés sur toute la largeur. */
.dec-criteres{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:24px;}
.dec-criteres .champ{margin:0;flex:1 1 190px;min-width:170px;}
.dec-criteres .btn{white-space:nowrap;flex:0 0 auto;height:38px;}
.dec-aide{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-mute);}
.dec-actes{display:flex;align-items:center;gap:8px;}
.dec-ligne .fin{text-align:left;}
@media(max-width:680px){
.dec-criteres{grid-template-columns:minmax(0,1fr);}
.dec-aide{display:none;}
}
/* ---------- Découvrir : la carte de jugement ----------
Une piste à la fois, en grand. Un nom d'entreprise inconnu ne dit rien : il
faut ce qu'elle fabrique, où elle est, et de la place pour s'y projeter. */
.dec-carte{background:var(--surface);border:1px solid transparent;border-radius:var(--radius);box-shadow:var(--pose);
padding:22px 24px;max-width:760px;}
.dc-tete{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.dc-tt{flex:1;min-width:0;}
.dc-tt h3{font-size:19px;font-weight:650;letter-spacing:-.018em;line-height:1.25;}
.dc-produits{font-size:14.5px;color:var(--text);line-height:1.5;margin-bottom:10px;}
.dc-meta{margin-bottom:12px;}
.dc-ctx{font-size:13px;color:var(--text-dim);line-height:1.55;}
/* « En savoir plus » : la fiche de l'entreprise n'est générée que si on la
demande. Le bloc reste discret — c'est une option, pas l'action de la carte,
qui est de garder ou d'écarter. */
.dc-endire{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
.dc-endire .meta{font-size:12px;color:var(--text-mute);}
.dc-endire .spinner{vertical-align:-.15em;margin-right:5px;}
.dc-bloc{margin-top:14px;}
.dc-lbl{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-dim);margin-bottom:4px;}
.dc-bloc p{font-size:13.5px;line-height:1.55;color:var(--text);}
.dc-bloc ul{margin:0;padding-left:18px;}
.dc-bloc li{font-size:13.5px;line-height:1.6;color:var(--text);}
.dc-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.dc-bloc.plus .dc-lbl{color:var(--pv-t);}
.dc-bloc.moins .dc-lbl{color:var(--pj-t);}
.dc-pied{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;
border-top:1px solid var(--border-soft);}
.dc-jeter{width:36px;height:36px;font-size:17px;}
.dc-reste{flex:1;font-size:12px;color:var(--text-mute);font-variant-numeric:tabular-nums;}
.dec-bascule{margin-top:14px;}
@media(max-width:680px){
.dec-carte{padding:18px 16px;}
.dc-duo{grid-template-columns:1fr;}
.dc-tt h3{font-size:17px;}
}
/* ---------- Découvrir : la conversation guidée ----------
Un chemin balisé, pas une messagerie : les bulles restent sobres, et chaque
étape se termine par des boutons — jamais par un curseur qui attend. */
.dec-jauge{max-width:420px;margin-bottom:22px;}
.dec-fil{display:flex;flex-direction:column;gap:14px;max-width:760px;}
.dec-b{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;}
.dec-b.bot>span:last-child{padding-top:3px;}
.dec-b.moi{justify-content:flex-end;}
.dec-b.moi>span{background:var(--pc-f);color:var(--pc-t);border-radius:14px 14px 4px 14px;
padding:8px 14px;font-size:13.5px;font-weight:500;max-width:80%;}
.dec-choix{display:flex;flex-wrap:wrap;gap:10px;}
/* La question posée sur une carte, et sa réponse. */
.dc-question{display:flex;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);}
.dc-question input{flex:1;min-width:0;font-family:var(--font);font-size:13px;color:var(--text);
background:var(--surface-2);border:1px solid transparent;border-radius:980px;padding:8px 15px;outline:none;}
.dc-question input:focus{border-color:var(--accent);background:var(--surface);}
.dc-rep:empty{display:none;}
.dc-qa{margin-top:14px;padding:12px 14px;background:var(--surface-2);border-radius:var(--radius-sm);}
.dc-qa b{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:5px;}
.dc-qa p{font-size:13.5px;line-height:1.6;color:var(--text);}
@media(max-width:680px){
.dec-b.moi>span{max-width:90%;}
.dc-question{flex-direction:column;}
}
/* ---------- Découvrir : le profil qui se construit ----------
Deux colonnes sur grand écran, pour ne pas laisser la moitié droite vide. */
.dp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px 34px;align-items:start;}
.dp-tt{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.dp-tt>span:last-child{display:flex;flex-direction:column;min-width:0;}
.dp-tt b{font-size:14px;font-weight:650;letter-spacing:-.012em;}
.dp-tt>span:last-child>span{font-size:12px;color:var(--text-dim);}
.dp-source{margin-top:18px;}
@media(max-width:900px){ .dp-cols{grid-template-columns:minmax(0,1fr);} }
/* ---------- Listes déroulantes natives ----------
La liste OUVERTE d'un