/* ===========================================================================
« Ce que les chiffres disent » — le bloc de synthèse en trois lectures.
Partagé par impact.php et decouvrir.php ; à réutiliser partout où une
analyse doit être lisible en quelques secondes.
Les couleurs disent une INTERPRÉTATION (favorable / à surveiller / risque),
jamais une grandeur : une baisse n'est jamais verte. Teintes choisies pour
rester au-dessus de 4,5:1 sur leur propre fond — #0a7f57, #8a5600, #a1211f,
pas les versions claires du thème d'origine.
=========================================================================== */
.vd-bloc{ border-color:rgba(var(--bz-blue-rgb),.22); background:linear-gradient(180deg,var(--bz-bg-soft4),var(--bz-bg-soft5)); }
/* ---------------------------------------------------------------------------
LA CONCLUSION, en tête de rapport.
Tout ce qui est ici s'affiche avec la page : le titre, les chiffres, les
comptes et les conditions sont calculés, pas rédigés. Le paragraphe de l'IA
se glisse dans un espace déjà réservé, pour que rien ne saute quand il arrive.
--------------------------------------------------------------------------- */
.cc{ padding:24px 26px 22px; }
.cc-eyebrow{ margin:0 0 8px; font-size:.71rem; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:var(--bz-text-3); }
/* Le titre en deux temps : ce qui plaide dans un sens, puis dans l'autre. */
.cc-titre{ margin:0; font-size:1.28rem; line-height:1.32; font-weight:700; color:var(--bz-text);
max-width:34ch; }
.cc-contre{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; font-size:1rem;
line-height:1.45; font-weight:600; color:var(--bz-amber); max-width:40ch; }
.cc-contre::before{ content:'En revanche'; flex:0 0 auto; margin-top:1px; padding:2px 8px;
border-radius:20px; font-size:.68rem; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--bz-amber); background:rgba(var(--bz-amber-rgb),.11); }
.cc-contre.est-risque{ color:var(--bz-red-fort); }
.cc-contre.est-risque::before{ color:var(--bz-red-fort); background:rgba(var(--bz-red-fort-rgb),.10); }
/* Les chiffres qui comptent, en pastilles, chacun avec son explication. */
/* Trois colonnes : six chiffres tiennent en deux rangees lisibles. En auto-fit,
ils s'etalaient sur une seule rangee de six, trop etroite pour porter un
nombre en gros et son explication. */
.cc-chiffres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
margin-top:20px; }
@media (max-width:900px){ .cc-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cc-ch{ padding:13px 15px; border-radius:13px; background:var(--bz-surface); border:1px solid rgba(var(--bz-ink-rgb),.10); }
.cc-ch b{ display:block; font-family:var(--ff-head, inherit); font-size:1.42rem; line-height:1.1;
font-weight:700; color:var(--bz-text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.cc-ch b i{ font-style:normal; font-size:.86rem; font-weight:600; color:var(--bz-text-3); }
.cc-ch.mieux b i{ color:var(--bz-green); }
.cc-ch.moins b i{ color:var(--bz-amber); }
.cc-ch em{ display:block; margin-top:4px; font-style:normal; font-size:.78rem; font-weight:700;
letter-spacing:.02em; color:var(--bz-text-2); }
.cc-ch span{ display:block; margin-top:5px; font-size:.78rem; line-height:1.5; color:var(--bz-text-3); }
/* Le décompte des trois lectures : trois coches cliquables vers le détail. */
.cc-compte{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.cc-compte a{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 9px;
border-radius:22px; text-decoration:none; font-size:.85rem; font-weight:600;
border:1px solid var(--cc-b); background:var(--cc-f); transition:.15s ease; }
/* La couleur est posée sur un sélecteur à deux classes : app-light.css revendique
« .app-body .r » pour ses variations de cours et l'emportait sur « .cc-compte a ».
Le vert du site est aussi assombri d'un cran — sur son propre fond teinté il
tombe à 4,19:1, sous le seuil de lisibilité qu'on s'impose. */
.cc-compte a.f, .cc-compte a.v, .cc-compte a.r{ color:var(--cc-c); }
.cc-compte a.f{ --cc-c:var(--bz-green-fort); }
.cc-compte a:hover{ filter:brightness(.96); }
.cc-compte a:focus-visible{ outline:2px solid var(--cc-c); outline-offset:2px; }
.cc-compte .p{ flex:0 0 auto; display:inline-flex; width:19px; height:19px; border-radius:50%;
align-items:center; justify-content:center; background:var(--bz-surface); }
.cc-compte .p svg{ width:13px; height:13px; fill:none; stroke:var(--cc-c); stroke-width:2.3;
stroke-linecap:round; stroke-linejoin:round; }
.cc-compte .f{ --cc-c:var(--bz-green-fort); --cc-f:rgba(var(--bz-green-rgb),.09); --cc-b:rgba(var(--bz-green-rgb),.28); }
.cc-compte .v{ --cc-c:var(--bz-amber); --cc-f:rgba(var(--bz-amber-rgb),.09); --cc-b:rgba(var(--bz-amber-rgb),.28); }
.cc-compte .r{ --cc-c:var(--bz-red-fort); --cc-f:rgba(var(--bz-red-fort-rgb),.08); --cc-b:rgba(var(--bz-red-fort-rgb),.26); }
.cc-compte .neant{ opacity:.62; }
/* Le paragraphe rédigé. L'espace lui est réservé avant qu'il arrive. */
.cc-lecture{ margin-top:20px; padding:16px 18px; border-radius:14px; background:var(--bz-surface);
border:1px solid rgba(var(--bz-blue-rgb),.20); min-height:104px; }
.cc-lecture h3{ display:flex; align-items:center; gap:8px; margin:0 0 7px; font-size:.82rem;
font-weight:700; letter-spacing:.02em; color:var(--bz-blue); }
.cc-lecture h3::before{ content:''; width:16px; height:16px; border-radius:50%; flex:0 0 auto;
background:linear-gradient(135deg,var(--bz-blue),var(--bz-violet)); }
.cc-lecture p{ margin:0; font-size:1rem; line-height:1.7; color:var(--bz-text-1d); }
.cc-attente{ display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--bz-text-3); }
.cc-attente i{ width:13px; height:13px; border-radius:50%; border:2px solid rgba(var(--bz-blue-rgb),.25);
border-top-color:var(--bz-blue); animation:cc-tourne .8s linear infinite; }
@keyframes cc-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cc-attente i{ animation:none; } }
.cc-src{ margin:10px 0 0 !important; font-size:.77rem !important; line-height:1.5 !important;
color:var(--bz-text-3) !important; }
/* Ce qui changerait la lecture : des conditions, jamais des conseils. */
.cc-cond{ margin-top:18px; }
.cc-cond > b{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.02em;
color:var(--bz-text-2); margin-bottom:8px; }
.cc-cond ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cc-cond li{ display:flex; gap:9px; font-size:.86rem; line-height:1.55; color:var(--bz-text-2); }
.cc-cond li::before{ content:''; flex:0 0 auto; width:6px; height:6px; margin-top:8px;
border-radius:50%; background:rgba(var(--bz-blue-rgb),.42); }
@media (max-width:600px){
/* Voir la note de css/app.css : les marges imbriquees laissaient 225 px de
texte sur 375, soit 27 signes par ligne. */
.cc{ padding:16px 10px; }
/* Cible tactile : les trois jetons de decompte faisaient 38 px de haut. */
.cc-compte a{ min-height:44px; }
/* Le texte redige va d'un bord a l'autre de son bloc : a 375 px, un encadre
qui ajoute son propre rembourrage a ceux de ses trois parents coute 24 px
de lecture pour un gain visuel nul. Le filet de gauche suffit a le tenir. */
.cc-lecture{ padding:13px 0 13px 11px; border-right:0; border-radius:0 0 0 12px; }
.cc-titre{ font-size:1.1rem; }
.cc-contre{ font-size:.94rem; }
/* Deux colonnes plutôt qu'une : empilés, les quatre chiffres repoussaient la
lecture d'ensemble hors de l'écran, et la conclusion devenait plus longue
que ce qu'elle résume. */
/* UNE CARTE PAR LIGNE, LE NOMBRE A GAUCHE.
En deux colonnes, une colonne faisait 140 px et l'explication tombait a
18 signes par ligne. Couche en ligne, elle en obtient le double, et la
hauteur du bloc ne bouge presque pas : chaque carte est deux fois plus
basse. */
.cc-chiffres{ grid-template-columns:1fr; gap:7px; }
.cc-ch{ padding:10px 12px; display:grid; grid-template-columns:auto 1fr;
column-gap:13px; row-gap:1px; align-items:baseline; }
.cc-ch b{ grid-column:1; grid-row:1 / span 2; align-self:center; font-size:1.24rem;
white-space:nowrap; }
.cc-ch b i{ display:block; margin-top:1px; }
.cc-ch em{ grid-column:2; grid-row:1; margin-top:0; }
.cc-ch span{ grid-column:2; grid-row:2; margin-top:1px; font-size:.76rem; }
}
/* ---------------------------------------------------------------------------
CONTRIBUTION AU RISQUE, ligne par ligne.
Deux barres superposées sur la même échelle : le poids (clair) et la part du
risque (colorée). Superposées et non côte à côte, pour que l'écart entre les
deux se voie sans avoir à comparer deux colonnes de chiffres.
Le ton dit une interprétation : ambre quand la ligne porte plus de risque que
de capital, vert quand elle en porte moins ou qu'elle en retire.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
CORRÉLATION MOYENNE INTERNE.
La page mesurait la valeur candidate CONTRE les lignes détenues ; ceci mesure
les lignes ENTRE ELLES. Deux chiffres seulement : la moyenne pondérée de
toutes les paires, et la paire la plus ressemblante — celle qui rend la
moyenne concrète.
--------------------------------------------------------------------------- */
.ci{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(var(--bz-ink-rgb),.10); }
.ci-intro{ margin:3px 0 0; font-size:.83rem; line-height:1.5; color:var(--bz-text-3); }
.ci-duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:12px;
margin-top:14px; }
.ci-duo > div{ padding:13px 15px; border-radius:13px; background:rgba(var(--bz-ink-rgb),.03);
border:1px solid rgba(var(--bz-ink-rgb),.09); }
.ci-duo b{ display:block; font-size:1.5rem; line-height:1.1; font-weight:700; color:var(--bz-text);
font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ci-duo b span{ font-size:.62em; font-weight:600; color:var(--bz-text-3); letter-spacing:0; }
.ci-duo em{ display:block; margin-top:3px; font-style:normal; font-size:.78rem; font-weight:700;
color:var(--bz-text-2); }
.ci-duo span{ display:block; margin-top:5px; font-size:.78rem; line-height:1.5; color:var(--bz-text-3); }
.ci-fort{ background:linear-gradient(180deg, rgba(var(--bz-amber-rgb),.08), rgba(var(--bz-amber-rgb),.05)) !important;
border-color:rgba(var(--bz-amber-rgb),.26) !important; }
.ci-fort b{ color:var(--bz-amber); }
.ci-paires{ list-style:none; margin:13px 0 0; padding:12px 15px; border-radius:12px;
background:rgba(var(--bz-amber-rgb),.05); border:1px solid rgba(var(--bz-amber-rgb),.18); }
.ci-paires li{ font-size:.85rem; line-height:1.6; color:var(--bz-text-2); }
.ci-paires li + li{ margin-top:5px; }
.ci-paires b{ color:var(--bz-text); }
.ci-vide{ margin:13px 0 0; font-size:.85rem; line-height:1.55; color:var(--bz-text-3); }
/* ---------------------------------------------------------------------------
SENSIBILITÉS AUX FACTEURS, au niveau du portefeuille.
Trois colonnes : la grandeur et son choc, l'effet chiffré, la part des
mouvements que ce facteur explique. Cette dernière est une barre, pas un
nombre seul : elle dit à quel point le chiffre du milieu est fiable.
--------------------------------------------------------------------------- */
.fa-liste{ list-style:none; margin:16px 0 0; padding:0; }
.fa-liste li{ display:flex; align-items:center; gap:16px; padding:11px 0;
border-bottom:1px solid rgba(var(--bz-ink-rgb),.07); }
.fa-liste li:last-child{ border-bottom:0; }
.fa-n{ flex:1 1 auto; min-width:0; font-size:.9rem; font-weight:700; color:var(--bz-text); }
.fa-n i{ display:block; font-style:normal; font-size:.79rem; font-weight:400; line-height:1.45;
color:var(--bz-text-3); }
.fa-e{ flex:0 0 116px; text-align:right; }
.fa-e b{ display:block; font-size:1.06rem; font-weight:700; color:var(--rk-c);
font-variant-numeric:tabular-nums; }
.fa-e em{ display:block; font-style:normal; font-size:.72rem; color:var(--bz-text-3); }
.fa-r{ flex:0 0 104px; display:flex; align-items:center; gap:8px; }
/* La barre vit dans une piste : sans elle, son width en pourcentage se résout
contre le conteneur flex et toutes les barres finissent à la même longueur. */
.fa-p{ flex:1 1 auto; height:7px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.06); }
.fa-p i{ display:block; height:100%; border-radius:4px; background:rgba(var(--bz-blue-rgb),.55);
min-width:3px; }
.fa-r b{ flex:0 0 auto; font-size:.79rem; font-weight:700; color:var(--bz-text-2);
font-variant-numeric:tabular-nums; }
@media (max-width:640px){
.fa-liste li{ flex-wrap:wrap; gap:5px 14px; }
.fa-n{ flex:1 1 100%; }
.fa-e{ flex:0 0 auto; text-align:left; display:flex; align-items:baseline; gap:7px; }
.fa-r{ flex:0 0 auto; min-width:78px; }
}
/* ---------------------------------------------------------------------------
CONCENTRATION DES PUBLICATIONS DE RÉSULTATS.
Une frise chronologique, pas un tableau : ce qui compte est de VOIR que deux
échéances tombent la même semaine. La fenêtre la plus chargée est surlignée.
--------------------------------------------------------------------------- */
.cal-tete{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.cal-tete > div{ flex:1 1 210px; padding:13px 15px; border-radius:13px;
background:rgba(var(--bz-ink-rgb),.03); border:1px solid rgba(var(--bz-ink-rgb),.09); }
.cal-tete b{ display:block; font-size:1.5rem; line-height:1.1; font-weight:700; color:var(--bz-text);
font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.cal-tete em{ display:block; margin-top:3px; font-style:normal; font-size:.78rem; font-weight:700;
color:var(--bz-text-2); }
.cal-tete span{ display:block; margin-top:5px; font-size:.78rem; line-height:1.5; color:var(--bz-text-3); }
.cal-serree{ background:linear-gradient(180deg, rgba(var(--bz-amber-rgb),.08), rgba(var(--bz-amber-rgb),.05)) !important;
border-color:rgba(var(--bz-amber-rgb),.26) !important; }
.cal-serree b{ color:var(--bz-amber); }
.cal-frise{ list-style:none; margin:18px 0 0; padding:0; }
.cal-frise li{ display:flex; align-items:center; gap:13px; padding:9px 0;
border-bottom:1px solid rgba(var(--bz-ink-rgb),.07); }
.cal-frise li:last-child{ border-bottom:0; }
.cal-frise .c-d{ flex:0 0 118px; font-size:.83rem; font-weight:700; color:var(--bz-text);
font-variant-numeric:tabular-nums; }
.cal-frise .c-d i{ display:block; font-style:normal; font-size:.73rem; font-weight:400; color:var(--bz-text-3); }
.cal-frise .c-n{ flex:1 1 auto; min-width:0; font-size:.87rem; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; color:var(--bz-text-2); }
.cal-frise .c-b{ flex:0 0 96px; height:7px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.05); }
.cal-frise .c-b i{ display:block; height:100%; border-radius:4px; background:var(--bz-blue); }
.cal-frise .c-p{ flex:0 0 62px; text-align:right; font-size:.86rem; font-weight:700; color:var(--bz-text);
font-variant-numeric:tabular-nums; }
/* Les échéances de la fenêtre la plus chargée : surlignées, pas colorées en rouge —
publier la même semaine n'est pas une faute, c'est une date à noter. */
.cal-frise li.c-groupe{ background:rgba(var(--bz-amber-rgb),.05); border-radius:8px; padding-inline:9px; }
.cal-frise li.c-groupe .c-b i{ background:var(--bz-amber); }
.cal-frise li.c-cand .c-n{ font-weight:700; color:var(--bz-text); }
.cal-frise li.c-cand .c-n em{ font-style:normal; font-weight:600; color:var(--bz-blue); font-size:.76rem; }
@media (max-width:640px){
.cal-frise li{ flex-wrap:wrap; gap:3px 11px; }
.cal-frise .c-d{ flex:0 0 auto; }
.cal-frise .c-n{ flex:1 1 100%; order:3; white-space:normal; }
.cal-frise .c-b{ display:none; }
}
/* Les trois mesures d'ensemble, en tête du bloc. Le ratio est mis en avant :
c'est le seul chiffre qui dise, d'un coup, ce que la répartition apporte. */
.rk-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
margin:16px 0 4px; }
.rk-stats > div{ padding:13px 15px; border-radius:13px; background:rgba(var(--bz-ink-rgb),.03);
border:1px solid rgba(var(--bz-ink-rgb),.09); }
/* ENFANTS DIRECTS SEULEMENT. Ecrites « .rk-stats b », ces regles frappaient
AUSSI les d'emphase places a l'interieur des phrases : neuf d'entre eux
s'affichaient en 1,5 rem sur leur propre ligne, dont « aucune de vos lignes ne
pose de question de revente » — une phrase entiere en taille de nombre. Le
chevron « > » suffit a distinguer le grand chiffre de la mise en valeur. */
.rk-stats > div > b{ display:block; font-size:1.5rem; line-height:1.1; font-weight:700; color:var(--bz-text);
font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.rk-stats > div > em{ display:block; margin-top:3px; font-style:normal; font-size:.78rem; font-weight:700;
color:var(--bz-text-2); }
.rk-stats > div > span{ display:block; margin-top:5px; font-size:.78rem; line-height:1.5; color:var(--bz-text-3); }
/* L'emphase a l'interieur d'une phrase reste une emphase : dans le fil du texte,
a sa taille, simplement plus sombre et plus grasse. */
.rk-stats span b, .rk-stats span em, .rk-stats em b{ display:inline; font-size:inherit;
line-height:inherit; letter-spacing:normal; font-weight:650; font-style:normal; color:var(--bz-text);
margin:0; }
.rk-vedette{ background:linear-gradient(180deg, rgba(var(--bz-blue-rgb),.07), rgba(var(--bz-violet-2-rgb),.07)) !important;
border-color:rgba(var(--bz-blue-rgb),.24) !important; }
.rk-vedette > b{ color:var(--bz-blue); }
/* La même décomposition, par secteur / zone / devise. */
.rk-groupes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px;
margin-top:18px; }
.rk-grp{ padding:14px 16px; border-radius:13px; background:var(--bz-surface); border:1px solid rgba(var(--bz-ink-rgb),.10); }
.rk-grp h3{ margin:0; font-size:.86rem; font-weight:700; color:var(--bz-text); }
.rk-grp > p{ margin:3px 0 0; font-size:.77rem; line-height:1.45; color:var(--bz-text-3); }
.rk-grp ul{ list-style:none; margin:11px 0 0; padding:0; }
.rk-grp li{ display:flex; align-items:center; gap:9px; padding:4px 0; font-size:.83rem; }
.rk-grp .g-n{ flex:0 0 40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
color:var(--bz-text-2); }
.rk-grp .g-b{ flex:1 1 auto; height:7px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.05); }
.rk-grp .g-b i{ display:block; height:100%; border-radius:4px; background:var(--rk-c); }
.rk-grp .g-v{ flex:0 0 82px; text-align:right; font-weight:700; color:var(--rk-c);
font-variant-numeric:tabular-nums; }
.rk-grp .g-v em{ font-style:normal; font-weight:400; color:var(--bz-text-3); }
.rk-liste{ list-style:none; margin:16px 0 0; padding:0; }
.rk-liste li{ display:flex; align-items:center; gap:14px; padding:9px 0;
border-bottom:1px solid rgba(var(--bz-ink-rgb),.07); }
.rk-liste li:last-child{ border-bottom:0; }
.rk-porte{ --rk-c:var(--bz-amber); --rk-f:rgba(var(--bz-amber-rgb),.16); }
.rk-amortit{ --rk-c:var(--bz-green); --rk-f:rgba(var(--bz-green-rgb),.16); }
.rk-neutre{ --rk-c:var(--bz-blue); --rk-f:rgba(var(--bz-blue-rgb),.14); }
.rk-n{ flex:0 0 176px; font-size:.88rem; line-height:1.35; color:var(--bz-text);
overflow:hidden; text-overflow:ellipsis; }
.rk-n i{ display:block; font-style:normal; font-size:.72rem; font-weight:600; color:var(--bz-blue); }
.rk-cand .rk-n{ font-weight:700; }
.rk-p{ flex:1 1 auto; min-width:0; }
.rk-piste{ position:relative; display:block; height:22px; }
.rk-piste::before{ content:''; position:absolute; inset:0; border-radius:5px;
background:rgba(var(--bz-ink-rgb),.035); }
.rk-poids, .rk-part{ position:absolute; height:8px; border-radius:4px; }
.rk-poids{ top:1px; background:rgba(var(--bz-ink-rgb),.20); }
.rk-part{ top:12px; background:var(--rk-c); }
/* Une part négative part vers la gauche : la ligne retire de l'agitation. */
.rk-part.rk-moins{ background:var(--rk-c); }
.rk-v{ flex:0 0 106px; text-align:right; }
.rk-v b{ display:block; font-size:.94rem; font-weight:700; color:var(--rk-c);
font-variant-numeric:tabular-nums; }
.rk-v em{ display:block; font-style:normal; font-size:.75rem; color:var(--bz-text-3);
font-variant-numeric:tabular-nums; }
@media (max-width:640px){
.rk-liste li{ flex-wrap:wrap; gap:4px 12px; }
.rk-n{ flex:1 1 auto; }
.rk-v{ flex:0 0 auto; text-align:left; display:flex; align-items:baseline; gap:7px; }
.rk-p{ flex:0 0 100%; order:3; }
}
.vd-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.vd-col{ padding:14px 15px 15px; border-radius:13px; background:var(--bz-surface); border:1px solid rgba(var(--bz-ink-rgb),.10);
border-top:3px solid var(--vd-c); }
/* Le sélecteur est préfixé par .vd-bloc pour passer devant « body.app-body h3 »
de app-light.css, qui repeint TOUS les titres en marine : sans cela, les
en-têtes de colonnes perdent leur couleur, et le codage visuel avec. */
.vd-bloc .vd-col h3{ display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:.88rem;
font-weight:700; color:var(--vd-c); letter-spacing:.01em; }
.vd-ico{ flex:0 0 auto; display:inline-flex; width:19px; height:19px; border-radius:50%;
align-items:center; justify-content:center; background:var(--vd-bg); }
.vd-ico svg{ width:15px; height:15px; display:block; fill:none; stroke:var(--vd-c); stroke-width:2.1;
stroke-linecap:round; stroke-linejoin:round; }
.vd-risque .vd-ico svg path:first-child{ fill:var(--vd-bg); }
.vd-n{ margin-left:auto; min-width:21px; padding:1px 6px; border-radius:11px; text-align:center;
font-size:.76rem; font-weight:700; color:var(--vd-c); background:var(--vd-bg); }
.vd-favorable{ --vd-c:var(--bz-green); --vd-bg:rgba(var(--bz-green-rgb),.11); }
.vd-vigilance{ --vd-c:var(--bz-amber); --vd-bg:rgba(var(--bz-amber-rgb),.11); }
.vd-risque{ --vd-c:var(--bz-red-fort); --vd-bg:rgba(var(--bz-red-fort-rgb),.10); }
/* Le vert du site tombe à 4,32:1 sur son propre fond teinté : un cran plus
foncé pour la pastille, seul endroit où il se pose sur ce fond. */
.vd-favorable .vd-n{ color:var(--bz-green-fort); }
.vd-col ul{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.vd-col li{ position:relative; padding-left:11px; border-left:2px solid var(--vd-bg); }
.vd-col li b{ display:block; font-size:.92rem; font-weight:700; line-height:1.4; color:var(--bz-text); }
.vd-col li > span{ display:block; margin-top:3px; font-size:.85rem; line-height:1.55; color:var(--bz-text-2); }
.vd-col li a{ display:inline-block; margin-top:5px; font-size:.79rem; font-weight:600; color:var(--bz-blue);
text-decoration:none; }
.vd-col li a:hover{ text-decoration:underline; }
.vd-col li a::after{ content:' ↓'; }
.vd-vide{ margin:10px 0 0; font-size:.85rem; line-height:1.55; color:var(--bz-text-3); }
/* Annonce le ton aux lecteurs d'écran : sans cela, la couleur est la seule
information qui distingue un risque d'un point favorable. */
.vd-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Constats descriptifs : ni bons ni mauvais, donc ni couleur ni colonne. */
.vd-neutre{ list-style:none; margin:12px 0 0; padding:12px 15px; border-radius:12px;
background:rgba(var(--bz-ink-rgb),.035); border:1px solid rgba(var(--bz-ink-rgb),.09); }
.vd-neutre li{ font-size:.85rem; line-height:1.6; color:var(--bz-text-2); }
.vd-neutre li + li{ margin-top:6px; }
.vd-neutre b{ color:var(--bz-text); }
.vd-neutre a{ margin-left:6px; font-size:.79rem; font-weight:600; color:var(--bz-blue); text-decoration:none; }
.vd-neutre a:hover{ text-decoration:underline; }
/* Le paragraphe rédigé par l'IA, en dessous des repères chiffrés. */
.vd-lecture{ margin-top:16px; padding-top:15px; border-top:1px solid rgba(var(--bz-ink-rgb),.10); }
.vd-bloc .vd-lecture h3{ margin:0 0 6px; font-size:.88rem; font-weight:700; color:var(--bz-blue); }
.vd-lecture p{ margin:0; font-size:1rem; line-height:1.68; color:var(--bz-text-1d); }
.vd-src{ margin-top:10px !important; font-size:.78rem !important; line-height:1.5 !important; color:var(--bz-text-3) !important; }
@media (max-width:640px){
/* Les trois lectures s'empilent : mieux vaut dérouler que serrer trois colonnes. */
.vd-cols{ grid-template-columns:minmax(0,1fr); }
}
@media (min-width:641px) and (max-width:920px){
.vd-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* ============================================================
REVENU EN DIVIDENDES (#impDiv / #retDiv)
Le montant en euros est la vedette ; la couverture est la
condition de sa lecture, donc elle est a cote, pas en note.
============================================================ */
.dv-tete{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:14px 0 6px; }
.dv-tete > div{ padding:13px 15px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
background:rgba(var(--bz-ink-rgb),.015); }
.dv-tete > div > b{ display:block; font-family:var(--ff-head,inherit); font-size:1.5rem; font-weight:800;
line-height:1.15; color:var(--bz-text); }
.dv-tete > div > em{ display:block; font-style:normal; font-size:.78rem; font-weight:600;
color:var(--bz-text-3); margin:4px 0 6px; }
.dv-tete > div > span{ display:block; font-size:.81rem; line-height:1.5; color:var(--bz-text-2); }
.dv-tete .dv-gros{ border-left:3px solid var(--bz-blue); background:rgba(var(--bz-blue-rgb),.045); }
.dv-tete .dv-gros > b{ font-size:1.85rem; }
.dv-tete .dv-partiel{ border-left:3px solid var(--bz-amber-2); background:rgba(var(--bz-amber-2-rgb),.05); }
.dv-plus{ color:var(--bz-green-fort); font-weight:800; white-space:nowrap; }
.dv-moins{ color:var(--bz-amber-4); font-weight:800; white-space:nowrap; }
.dv-liste{ display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.dv-r{ display:grid; grid-template-columns:minmax(190px,1.3fr) minmax(110px,1fr) 92px; gap:12px;
align-items:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(var(--bz-ink-rgb),.08); }
.dv-n b{ display:block; font-size:.88rem; font-weight:700; color:var(--bz-text); }
.dv-n i{ display:block; font-style:normal; font-size:.74rem; color:var(--bz-text-3); margin-top:1px; }
/* Piste intermediaire : une barre en width:N% posee dans un conteneur flex
prendrait la largeur du flex et non le pourcentage. */
.dv-p{ position:relative; height:14px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.06); overflow:hidden; }
.dv-p .dv-b{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--bz-blue); }
.dv-v{ text-align:right; font-family:var(--ff-head,inherit); font-size:.95rem; font-weight:800; color:var(--bz-text); }
.dv-sans{ margin:13px 0 0; padding:10px 14px; border-radius:10px;
background:rgba(var(--bz-ink-rgb),.03); border:1px solid rgba(var(--bz-ink-rgb),.10);
font-size:.81rem; line-height:1.6; color:var(--bz-text-2); }
.dv-hors{ margin:13px 0 0; padding:11px 14px; border-radius:10px;
background:rgba(var(--bz-amber-2-rgb),.05); border:1px solid rgba(var(--bz-amber-2-rgb),.20);
font-size:.81rem; line-height:1.6; color:var(--bz-text-2); }
.dv-hors b{ color:var(--bz-text); }
@media (max-width: 700px){
.dv-r{ grid-template-columns:1fr 92px; grid-template-areas:'n v' 'p p'; }
.dv-n{ grid-area:n; } .dv-v{ grid-area:v; } .dv-p{ grid-area:p; }
}
/* ============================================================
QUI A PORTE LA PERFORMANCE (#impRend / #retRend)
Aucun vert : un apport positif passe est descriptif, le
peindre en vert le ferait lire comme une recommandation.
Seul l'apport negatif est signale — une perte n'est jamais
verte, et elle n'est pas neutre non plus.
============================================================ */
.rd-tete{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:14px 0 10px; }
.rd-tete > div{ padding:13px 15px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
border-left:3px solid var(--bz-blue); background:rgba(var(--bz-blue-rgb),.04); }
.rd-tete > div > b{ display:block; font-family:var(--ff-head,inherit); font-size:1.6rem; font-weight:800;
line-height:1.15; color:var(--bz-text); }
.rd-tete > div > em{ display:block; font-style:normal; font-size:.78rem; font-weight:600;
color:var(--bz-text-3); margin:4px 0 6px; }
.rd-tete > div > span{ display:block; font-size:.81rem; line-height:1.5; color:var(--bz-text-2); }
.rd-liste{ display:flex; flex-direction:column; gap:7px; }
.rd-r{ display:grid; grid-template-columns:minmax(200px,1.25fr) minmax(120px,1fr) 96px; gap:12px;
align-items:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(var(--bz-ink-rgb),.08); }
.rd-r.rd-neg{ border-color:rgba(var(--bz-amber-2-rgb),.24); background:rgba(var(--bz-amber-2-rgb),.045); }
.rd-n b{ display:block; font-size:.88rem; font-weight:700; color:var(--bz-text); }
.rd-n i{ display:block; font-style:normal; font-size:.74rem; color:var(--bz-text-3); margin-top:1px; }
/* Piste intermediaire : une barre en width:N% posee dans un flex prendrait la
largeur du flex et non le pourcentage. */
.rd-p{ position:relative; height:16px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.05); overflow:hidden; }
.rd-p .rd-zero{ position:absolute; top:0; bottom:0; width:1px; background:rgba(var(--bz-ink-rgb),.24); }
.rd-p .rd-b{ position:absolute; top:3px; height:10px; border-radius:3px; background:var(--bz-blue); }
.rd-neg .rd-p .rd-b{ background:var(--bz-amber-2); }
.rd-v{ text-align:right; font-family:var(--ff-head,inherit); font-size:.92rem; font-weight:800; color:var(--bz-text); }
.rd-neg .rd-v{ color:var(--bz-amber-5); }
@media (max-width: 700px){
.rd-r{ grid-template-columns:1fr 96px; grid-template-areas:'n v' 'p p'; }
.rd-n{ grid-area:n; } .rd-v{ grid-area:v; } .rd-p{ grid-area:p; }
}
/* Volatilite a la baisse : ambre SEULEMENT quand les reculs sont plus marques
que les hausses, c'est-a-dire au-dela du repere de symetrie de 70,7 %.
En dessous, rien a signaler — et surtout pas de vert, qui se lirait comme une
recommandation. */
.rk-stats > div.rk-vb-dur{ border-left:3px solid var(--bz-amber-2); background:rgba(var(--bz-amber-2-rgb),.05); }
/* ============================================================
COMPOSITION DU PORTEFEUILLE (#impCompo / #retCompo)
============================================================ */
.cm-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:12px; margin:14px 0 6px; }
.cm-grille > div{ padding:13px 15px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
border-left:3px solid var(--bz-blue); background:rgba(var(--bz-blue-rgb),.035); }
.cm-grille > div.cm-alerte{ border-left-color:var(--bz-amber-2); background:rgba(var(--bz-amber-2-rgb),.05); }
.cm-grille > div > b{ display:block; font-family:var(--ff-head,inherit); font-size:1.5rem; font-weight:800;
line-height:1.15; color:var(--bz-text); }
.cm-grille > div > b .cm-fl{ font-size:.8em; color:var(--bz-text-3); margin:0 3px; }
.cm-grille > div > em{ display:block; font-style:normal; font-size:.78rem; font-weight:600;
color:var(--bz-text-3); margin:4px 0 6px; }
.cm-grille > div > span{ display:block; font-size:.81rem; line-height:1.5; color:var(--bz-text-2); }
.cm-grille > div > span i{ font-style:italic; }
.cm-tailles{ display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.cm-t{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(110px,1.1fr) 150px; gap:12px;
align-items:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(var(--bz-ink-rgb),.08); }
.cm-tn b{ display:block; font-size:.88rem; font-weight:700; color:var(--bz-text); }
.cm-tn i{ display:block; font-style:normal; font-size:.74rem; color:var(--bz-text-3); margin-top:1px; }
/* Piste intermediaire : sans elle, width:N% se resoudrait contre le flex. */
.cm-tp{ position:relative; height:14px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.06); overflow:hidden; }
.cm-tp .cm-tb{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--bz-blue); }
.cm-tv{ text-align:right; font-family:var(--ff-head,inherit); font-size:.9rem; font-weight:800; color:var(--bz-text); }
.cm-tv i{ font-style:normal; font-weight:600; font-size:.78rem; color:var(--bz-text-3); margin-left:5px; }
@media (max-width: 700px){
.cm-t{ grid-template-columns:1fr 150px; grid-template-areas:'n v' 'p p'; }
.cm-tn{ grid-area:n; } .cm-tv{ grid-area:v; } .cm-tp{ grid-area:p; }
}
/* ============================================================
DECOMPOSITION DU BETA (#impBeta / #retBeta)
Aucun vert : une sensibilite au marche n'est ni bonne ni
mauvaise en soi. Ambre pour les apports negatifs (la ligne
va contre l'indice) et grise pour les liens trop faibles.
============================================================ */
.bt-liste{ display:flex; flex-direction:column; gap:7px; margin:14px 0 0; }
.bt-r{ display:grid; grid-template-columns:minmax(220px,1.3fr) minmax(110px,1fr) 82px; gap:12px;
align-items:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(var(--bz-ink-rgb),.08); }
.bt-r.bt-neg{ border-color:rgba(var(--bz-amber-2-rgb),.24); background:rgba(var(--bz-amber-2-rgb),.045); }
.bt-r.bt-flou{ background:rgba(var(--bz-ink-rgb),.025); }
.bt-n b{ display:block; font-size:.88rem; font-weight:700; color:var(--bz-text); }
.bt-n i{ display:block; font-style:normal; font-size:.74rem; color:var(--bz-text-3); margin-top:1px; }
.bt-tag{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:5px;
background:rgba(var(--bz-ink-rgb),.07); color:var(--bz-text-2b); font-size:.9em; }
/* Piste intermediaire : sinon width:N% se resoudrait contre le flex. */
.bt-p{ position:relative; height:16px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.05); overflow:hidden; }
.bt-p .bt-zero{ position:absolute; top:0; bottom:0; width:1px; background:rgba(var(--bz-ink-rgb),.24); }
.bt-p .bt-b{ position:absolute; top:3px; height:10px; border-radius:3px; background:var(--bz-blue); }
.bt-neg .bt-p .bt-b{ background:var(--bz-amber-2); }
.bt-flou .bt-p .bt-b{ opacity:.45; }
.bt-v{ text-align:right; font-family:var(--ff-head,inherit); font-size:.92rem; font-weight:800; color:var(--bz-text); }
.bt-neg .bt-v{ color:var(--bz-amber-5); }
.bt-som{ margin:13px 0 0; padding:11px 14px; border-radius:10px;
background:rgba(var(--bz-blue-rgb),.045); border:1px solid rgba(var(--bz-blue-rgb),.16);
font-size:.85rem; line-height:1.6; color:var(--bz-text-1b); }
.bt-som b{ color:var(--bz-text); }
@media (max-width: 700px){
.bt-r{ grid-template-columns:1fr 82px; grid-template-areas:'n v' 'p p'; }
.bt-n{ grid-area:n; } .bt-v{ grid-area:v; } .bt-p{ grid-area:p; }
}
/* Ecart de suivi et ratio d'information, en tete du bloc du beta. Aucune
couleur d'interpretation : un ecart avec l'indice n'est ni bon ni mauvais, et
un ratio d'information sur un an ne prouve rien. */
.bt-tete{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:14px 0 4px; }
.bt-tete > div{ padding:13px 15px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
border-left:3px solid var(--bz-blue); background:rgba(var(--bz-blue-rgb),.035); }
.bt-tete > div > b{ display:block; font-family:var(--ff-head,inherit); font-size:1.55rem; font-weight:800;
line-height:1.15; color:var(--bz-text); }
.bt-tete > div > em{ display:block; font-style:normal; font-size:.78rem; font-weight:600;
color:var(--bz-text-3); margin:4px 0 6px; }
.bt-tete > div > span{ display:block; font-size:.81rem; line-height:1.5; color:var(--bz-text-2); }
.bt-tete > div > span b{ color:var(--bz-text); }
/* ============================================================
RECOUVREMENT AVEC LES STRATEGIES (#impStrat / #retStrat)
Aucun vert, aucun rouge : un recoupement eleve n'est ni bon
ni mauvais, il informe sur un doublon possible. Ambre au-dela
de 30 %, la ou l'achat ferait vraiment doublon.
============================================================ */
.rv-liste{ display:flex; flex-direction:column; gap:7px; margin:14px 0 0; }
.rv-r{ display:grid; grid-template-columns:minmax(230px,1.4fr) minmax(110px,1fr) 64px; gap:12px;
align-items:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(var(--bz-ink-rgb),.08); }
.rv-r.rv-fort{ border-color:rgba(var(--bz-amber-2-rgb),.24); background:rgba(var(--bz-amber-2-rgb),.045); }
.rv-n b{ display:block; font-size:.88rem; font-weight:700; color:var(--bz-text); }
.rv-n i{ display:block; font-style:normal; font-size:.74rem; color:var(--bz-text-3); margin-top:1px; }
/* Piste intermediaire : sinon width:N% se resoudrait contre le flex. */
.rv-p{ position:relative; height:14px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.06); overflow:hidden; }
.rv-p .rv-b{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--bz-blue); }
.rv-fort .rv-p .rv-b{ background:var(--bz-amber-2); }
.rv-v{ text-align:right; font-family:var(--ff-head,inherit); font-size:.92rem; font-weight:800; color:var(--bz-text); }
.rv-fort .rv-v{ color:var(--bz-amber-5); }
.rv-vide, .rv-neuf{ margin:13px 0 0; padding:11px 14px; border-radius:10px;
background:rgba(var(--bz-ink-rgb),.03); border:1px solid rgba(var(--bz-ink-rgb),.10);
font-size:.82rem; line-height:1.6; color:var(--bz-text-2); }
.rv-neuf b{ color:var(--bz-text); }
@media (max-width: 700px){
.rv-r{ grid-template-columns:1fr 64px; grid-template-areas:'n v' 'p p'; }
.rv-n{ grid-area:n; } .rv-v{ grid-area:v; } .rv-p{ grid-area:p; }
}
/* ============================================================
CORRELATION INTERNE GLISSANTE (.gl)
Aucune couleur d'interpretation : une correlation qui monte
n'est ni bonne ni mauvaise en soi. Seuls les deux extremes
sont marques, pour qu'on les retrouve dans le texte.
============================================================ */
.gl-intro{ margin:6px 0 12px; font-size:.85rem; line-height:1.6; color:var(--bz-text-2); }
.gl-intro b{ color:var(--bz-text); }
/* Piste de hauteur fixe : une barre en height:N% n'a de sens que contre une
hauteur connue. */
.gl-graphe{ display:flex; align-items:flex-end; gap:2px; height:74px;
padding:6px 8px; border-radius:10px; background:rgba(var(--bz-ink-rgb),.035);
border:1px solid rgba(var(--bz-ink-rgb),.09); }
.gl-c{ flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; }
.gl-c i{ display:block; width:100%; border-radius:2px 2px 0 0; background:var(--bz-text-4); }
.gl-c.gl-haut i{ background:var(--bz-amber-2); }
.gl-c.gl-bas i{ background:var(--bz-blue); }
.gl-axe{ display:flex; justify-content:space-between; margin:5px 0 0;
font-size:.72rem; color:var(--bz-text-3); }
.gl-lec{ margin:11px 0 0; font-size:.84rem; line-height:1.6; color:var(--bz-text-2); }
.gl-lec b{ color:var(--bz-text); }
/* ============================================================
LES DRAPEAUX DE LA CONCLUSION
Deux faits qui decident souvent a eux seuls — l'eligibilite PEA,
la devise — et que la page reservait au neuvieme bloc. Pastilles
ambre : c'est une chose a savoir, pas un risque mesure.
============================================================ */
.cc-drapeaux{ display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 0; }
.cc-dr{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
font-size:.83rem; font-weight:600; line-height:1.35; border:1px solid; }
.cc-dr svg{ flex:0 0 auto; width:15px; height:15px; fill:none; stroke:currentColor;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cc-dr-att{ color:var(--bz-amber); background:rgba(var(--bz-amber-rgb),.08); border-color:rgba(var(--bz-amber-rgb),.22); }
.cc-dr-ok{ color:var(--bz-green-fort); background:rgba(var(--bz-green-fort-rgb),.07); border-color:rgba(var(--bz-green-fort-rgb),.2); }
@media (max-width:640px){ .cc-dr{ min-height:38px; } }
/* ============================================================
LE TEXTE LONG, MIS EN PAGE POUR ETRE LU
L'IA renvoyait quatorze lignes d'un seul tenant, sur toute la
largeur du bloc : l'oeil perd sa ligne et refuse d'entrer.
Trois reglages, et rien d'autre :
la LONGUEUR DE LIGNE, en caracteres — au-dela de 75 signes
l'oeil rate le retour a la ligne suivante. Attention : l'unite
« ch » vaut la largeur du zero, plus large que le caractere
moyen ; 68ch rendait 80 signes reels. Mesure au navigateur,
58ch en donne 68 ;
l'INTERLIGNE, plus large que pour une legende : un texte
long se lit plus lentement, il lui faut de l'air ;
le PARAGRAPHE de trois lignes environ (js/cc-lecture.js),
avec un vrai blanc entre eux — c'est le blanc qui donne
envie d'entrer, pas la taille de la police.
============================================================ */
.cc-lecture .cc-para{ max-width:58ch; margin:0 0 1em; font-size:.97rem; line-height:1.85;
color:var(--bz-text-2); }
.cc-lecture .cc-para:last-of-type{ margin-bottom:0; }
/* La premiere phrase porte le sens : on l'appuie sans crier. */
.cc-lecture .cc-para:first-of-type{ color:var(--bz-text-1e); }
.cc-lecture .cc-para b{ color:var(--bz-text); font-weight:650; }
/* Un texte non decoupe (trop court pour l'etre) garde la meme respiration. */
.cc-lecture > p:not(.cc-src){ max-width:58ch; line-height:1.85; }
.cc-lecture .cc-src{ max-width:58ch; }
/* ---- LE REPLI « Lire la suite », VERSION TEXTE AERE --------------------
Les pages clampaient LE paragraphe a cinq lignes. Il n'y a plus un
paragraphe mais cinq, chacun sous cinq lignes : plus rien n'etait clampe
et le bouton ouvrait un bloc deja ouvert. On replie donc l'ENSEMBLE —
le premier paragraphe entier, le deuxieme sur deux lignes pour montrer
que ca continue, le reste cache.
Selectionner par « ~ » et non par :nth-of-type : la mention de source est
un elle aussi, et elle doit rester visible en toutes circonstances. */
.cc-lecture-plus{ margin-top:12px; padding:8px 15px; border-radius:10px; cursor:pointer;
font:inherit; font-size:.84rem; font-weight:600; color:var(--bz-blue);
background:rgba(var(--bz-blue-rgb),.07); border:1px solid rgba(var(--bz-blue-rgb),.22); }
.cc-lecture-plus:hover{ background:rgba(var(--bz-blue-rgb),.12); }
.cc-lecture-plus:focus-visible{ outline:2px solid var(--bz-blue-vif); outline-offset:2px; }
/* Texte non decoupe (trop court pour l'etre) : cinq lignes, comme avant. */
.cc-lecture-pliee > p:not(.cc-para):not(.cc-src){ display:-webkit-box; -webkit-line-clamp:5;
-webkit-box-orient:vertical; overflow:hidden; }
.cc-lecture-ouverte > p:not(.cc-para):not(.cc-src){ display:block; overflow:visible; }
.cc-lecture-pliee .cc-para ~ .cc-para{ display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; }
.cc-lecture-pliee .cc-para ~ .cc-para ~ .cc-para{ display:none; }
.cc-lecture-ouverte .cc-para ~ .cc-para,
.cc-lecture-ouverte .cc-para ~ .cc-para ~ .cc-para{ display:block; overflow:visible; }
@media (max-width:640px){
.cc-lecture .cc-para{ font-size:.95rem; line-height:1.8; margin-bottom:1.05em; }
/* Cible tactile : 44 px. « Lire la suite » etait a 40. */
.cc-lecture-plus{ min-height:44px; padding-left:18px; padding-right:18px; }
}
/* ============================================================================
LA MESURE DE LECTURE — les blocs de verdict.
Mesure au navigateur : un « ch » vaut environ 1,24 signe ; 58ch en donnent
72, ce qui reste sous le seuil de 75 au-dela duquel l'oeil rate le retour a
la ligne. Les legendes ecrites dans un doivent d'abord passer en
bloc : « max-width » ne s'applique pas a un element en ligne.
============================================================================ */
.vd-col li > span,
.vd-neutre li,
.vd-vide,
.vd-lecture p,
.vd-src,
.cc-cond li,
.cc-ch span,
.ci-intro, .ci-vide, .ci-paires li,
.dv-sans, .dv-hors,
.rv-vide, .rv-neuf,
.bt-som,
.gl-intro, .gl-lec,
.cal-tete span{ max-width:58ch; }
.rk-stats > div > span,
.dv-tete > div > span,
.rd-tete > div > span,
.cm-grille > div > span,
.bt-tete > div > span,
.ci-duo span,
.cal-tete span{ display:block; max-width:58ch; }
@media (max-width:640px){
/* « Voir le calcul » est un lien AUTONOME, pas un mot dans une phrase : il a
droit a ses 44 px. Mais une boite EN LIGNE plus haute que sa ligne deborde
sur ses voisines : porte a 44 px en inline-flex, ce lien recouvrait jusqu'a
44 px du repere d'a cote — un doigt pose sur le repere activait le lien.
On lui donne donc SA PROPRE RANGEE : le repere devient une colonne. */
/* 14 px et non 6 : une zone etendue depasse de 12 px de chaque cote, donc
deux reperes espaces de 6 px voyaient leurs zones se toucher. L'espacement
doit etre au moins egal au depassement. */
.vd-col li, .vd-neutre li, .vd-pt-corps{ display:flex; flex-direction:column;
align-items:flex-start; gap:14px; }
/* PAS DE ZONE ETENDUE ICI. Elle entrait en collision avec le resume
repliable voisin — 44 px de recouvrement mesures. Deux cibles qui se
touchent, c'est un defaut de fonctionnement : le doigt active l'une pour
l'autre. On s'en tient a 28 px, au-dessus du seuil de WCAG 2.5.8 (24 px)
et sans empieter sur rien. Les 44 px restent la regle partout ou la place
existe vraiment. */
.vd-pt-corps > a, .vd-neutre li a, .vd-col li a{ display:inline-block;
padding:5px 0; }
}