/* Proposition 9 — la lisibilité (24/09/2026, remarque de Jan, daltonien : « on n'arrive pas bien à lire les
   intitulés de tes agents »). Chargée en DERNIER sur toutes les pages. Mesure : chaque texte contre les pixels
   réellement derrière lui (images comprises), seuil WCAG AA : 4,5:1, et 3:1 pour les grands titres.
   Principe : les couleurs vives restent pour la lumière (points, halos, liserés) ; le texte prend une encre
   de la même teinte, assez profonde pour se lire sans compter sur la couleur. */

/* ── les jetons : la palette pastel venait du thème sombre, illisible sur fond clair ── */
:root{
  --g-45:#5A6377;--g-60:#4F596D;               /* gris secondaires : 3,1 → 6,0 et 5,9 → 7,0 sur blanc */
  --neon:#2A62F2;                              /* le bleu SoiAgent, un cran plus profond : 4,5 → 5,1 */
  --violet:#6D28D9;--green:#12753A;--amber:#A34A08;--blue:#1D4ED8;
  --vert:#047857;                              /* les gains (heures, euros) : 3,4 → 5,5 */
  --encre-bleue:#1F54DD;                       /* le bleu SoiAgent quand il écrit en petit : 6,2 */
}
/* les petits textes bleus (sur-titres, questions, onglets, liens) passent à l'encre bleue */
.kicker,.lnk,.roi-q,.tab-bar button.on .n,.tx .z em,.h72 b,.calc9 .q,.cal9 .m,.live,.renvoi9 .k,.renvoi9 .chif b{color:var(--encre-bleue)}
.ag-hugo{--ag-txt:#6D28D9}.ag-nova{--ag-txt:#BE185D}.ag-flora{--ag-txt:#12753A}
.ag-eva{--ag-txt:#A34A08}.ag-alex{--ag-txt:#1D4ED8}.ag-sapi{--ag-txt:#7A5610}

/* ══ LES CARTES DE L'ÉQUIPE (accueil) ══ */
/* chaque carte garde sa couleur vive pour la lumière (--vif) et prend une encre pour écrire (--encre) */
.agent[href="zuri.html"]{--vif:#2F6BFF;--encre:#1F54DD}
.agent[href="hugo.html"]{--vif:#A855F7;--encre:#6D28D9}
.agent[href="nova.html"]{--vif:#FF4FA3;--encre:#BE185D}
.agent[href="flora.html"]{--vif:#22C55E;--encre:#12753A}
.agent[href="eva.html"]{--vif:#F59E0B;--encre:#A34A08}
.agent[href="alex.html"]{--vif:#3B82F6;--encre:#1D4ED8}
.agent:hover{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--vif,var(--c)) 55%,transparent),0 30px 70px -30px var(--vif,var(--c))}

/* le texte ne se pose plus sur l'image : l'illustration se fond dans le blanc par un long dégradé adouci,
   qui commence bien au-dessus de l'étiquette et devient presque opaque sous le nom. Pas de flou d'arrière-plan :
   combiné à un masque, Chrome en montrait le bord (un trait net) et étalait la veste en tache grise (24/09). */
.agent .in{position:relative}
.agent .in::before{content:"";position:absolute;left:0;right:0;top:-150px;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0,rgba(255,255,255,.03) 24px,rgba(255,255,255,.09) 48px,rgba(255,255,255,.19) 72px,
    rgba(255,255,255,.32) 96px,rgba(255,255,255,.48) 118px,rgba(255,255,255,.64) 138px,rgba(255,255,255,.77) 158px,
    rgba(255,255,255,.87) 180px,rgba(255,255,255,.93) 206px,rgba(255,255,255,.97) 240px,#fff 100%)}

/* petites cartes : l'image ne descend qu'aux deux tiers ; son bord bas fond lui-même, sans trait (tablette d'Eva) */
.later .agent.mini > img{-webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%)}

/* le fondu de l'illustration descend d'un cran : le texte ayant son propre voile, la veste reste visible plus bas */
.agent::before{background:linear-gradient(180deg,transparent 46%,rgba(255,255,255,.55) 64%,rgba(255,255,255,.92) 84%,#fff 100%)}

/* l'intitulé : une étiquette de verre, un point de couleur, une encre lisible */
.agent .role,.agent.star .role{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:0;
  padding:6px 12px 6px 10px;border-radius:999px;
  font:650 .7rem/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre,var(--c));
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid color-mix(in srgb,var(--vif,var(--c)) 26%,#fff);
  box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px color-mix(in srgb,var(--vif,var(--c)) 80%,transparent),0 1px 2px rgba(11,18,40,.06)}
.agent .role::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--vif,var(--c));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vif,var(--c)) 20%,transparent),0 0 10px var(--vif,var(--c))}
.agent.star .role{font-size:.78rem;padding:7px 14px 7px 12px}
.agent .in > p:not(.role),.agent.mini .in > p:not(.role){color:var(--g-60)}
.agent .etat{color:#12753A}
.agent .etat.b{color:var(--g-45)}

/* petites cartes : l'étiquette peut passer sur deux lignes sans se déformer */
.later .agent .in{padding-left:22px;padding-right:22px}
.later .agent .role{border-radius:12px;font-size:.64rem;letter-spacing:.04em;padding:5px 10px 5px 9px;gap:7px}
@media (max-width:600px){
  .later .agent .in{padding:20px 16px 22px}
  .later .agent .role{font-size:.62rem;padding:5px 9px 5px 8px;gap:6px}
  .later .agent .lnk{font-size:.86rem}
}

/* ══ LES TEXTES D'ACCENT DES PAGES D'AGENTS ══ */
.ag .kicker,.ag .tab-bar button.on .n,.ag .calc9 .q,.ag .tabs .pane .prix b,
.dossier9 li > span,.carte9 .q,.opts9 .px,.prix9 .q,.prix9 .duo b,.reel9 .q{color:var(--ag-txt,var(--ag))}
/* les pastilles de prix, texte blanc : un dégradé assez profond pour lui */
.ag .hint.prix7 .pastille{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),linear-gradient(135deg,var(--ag-txt,var(--ag-dp)),color-mix(in oklab,var(--ag) 35%,var(--ag-txt,var(--ag-dp))));
  text-shadow:0 1px 1px rgba(0,0,0,.18)}
.hint.prix7 .pastille{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),linear-gradient(135deg,#1F54DD,#2459E6 55%,#1A6FB0);
  text-shadow:0 1px 1px rgba(0,0,0,.18)}
.ph-hero .pastille{background:linear-gradient(135deg,#B81C62,#D0206F);text-shadow:0 1px 1px rgba(0,0,0,.18)}
.cal9 .maint{background:#B81C62}

/* la jauge 75 / 25 de Hugo */
.partage9 .jauge .v{background:linear-gradient(135deg,#036B4D,#058A62)}
.partage9 .jauge .h{background:linear-gradient(135deg,var(--ag-dp),var(--ag))}
.partage9 .jauge small{color:#fff}

/* ══ LES VERTS DES GAINS ══ */
.roi-bloc.eco .l > b,.gain9 .roi-mods .px,.gain9 .roi-res .gros .v,.dossier9 li.ok b,.dossier9 .t em{color:var(--vert)}

/* ══ LE FIL DE L'ÉQUIPE ══ */
.flux9 li .m,.fil-equipe li .m{color:color-mix(in oklab,var(--t,var(--c)) 80%,#0B1220)}
.flux9 li .m em,.fil-equipe li .m em{color:var(--g-60)}

/* ══ LES VERRES POSÉS SUR UNE IMAGE : un verre plus dense, le flou et le reflet restent ══ */
.parcours{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68))}
.hint.prix7{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.68))}
.ins-g .ph7 .voile{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.76))}
/* le héros des pages : le voile clair tient jusqu'au bout du texte */
@media (min-width:761px){.cine.gauche .cine-veil{background:linear-gradient(90deg,#F6F8FC 0%,rgba(246,248,252,.96) 36%,rgba(246,248,252,.62) 56%,rgba(246,248,252,0) 72%),
  linear-gradient(180deg,transparent 70%,#F6F8FC 100%)}}
.citation cite span{background:linear-gradient(135deg,#1F54DD,#7C3AED)}
.equipe-note{color:var(--g-60)}

/* ══ LES MENTIONS POSÉES SUR UNE IMAGE ══ */
.cine-note{color:rgba(11,18,32,.66)}
.ph .ia8{background:rgba(11,18,32,.62)}