/* ==========================================================================
   impact.css — extrait de impact.php le 03/08/2026.
   Charge a la place exacte qu'occupait le <style> : ces regles surclassent
   app.css et app-light.css parce qu'elles viennent APRES. Ne pas remonter
   ce <link> plus haut dans le <head>.
   ========================================================================== */
.app-body{ --bg:var(--bz-bg-soft); --surface:var(--bz-surface); --border:rgba(var(--bz-ink-rgb),.09);
  --accent:var(--bz-blue-vif); --text:var(--bz-text); --text-dim:var(--bz-text-2b); background:var(--bz-bg-soft); color:var(--bz-text); }
.ic-sub{ margin:4px 0 0; font-size:.9rem; color:var(--bz-text-3); }

/* Sous-titres des blocs (« Comment elle se combine avec vos valeurs », etc.) :
   +30 % par rapport a la regle partagee .fiche-panel h2 de css/app.css, qui les
   fixe a 0,77rem — soit 12,3 px, trop petit pour un titre de section devant un
   public senior. Surcharge LOCALE volontaire : app.css est partage avec fiche.php
   et retrait.php, qu'on ne veut pas modifier au passage. 0,77 x 1,3 = 1,001rem. */
.fiche-panel h2{ font-size:1rem; }

/* Choix de la source du portefeuille */
.imp-src{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; }
.imp-src a{ flex:1 1 220px; display:block; padding:14px 16px; border-radius:14px; text-decoration:none;
  background:var(--bz-surface); border:1px solid rgba(var(--bz-ink-rgb),.12); transition:.15s ease; }
.imp-src a:hover{ border-color:rgba(var(--bz-blue-vif-rgb),.42); }
.imp-src a.on{ border-color:var(--bz-blue); background:linear-gradient(180deg,var(--bz-bg-soft4),var(--bz-bg-soft)); box-shadow:0 0 0 1px var(--bz-blue) inset; }
.imp-src b{ display:block; font-size:.95rem; color:var(--bz-text); }
.imp-src span{ display:block; margin-top:3px; font-size:.82rem; line-height:1.45; color:var(--bz-text-3); }

/* Lignes du portefeuille saisi */
.imp-liste-saisie{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.imp-liste-saisie li{ display:flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border-radius:20px;
  font-size:.84rem; background:rgba(var(--bz-ink-rgb),.04); border:1px solid rgba(var(--bz-ink-rgb),.10); }
.imp-liste-saisie b{ font-weight:700; color:var(--bz-text); }
.imp-liste-saisie em{ font-style:normal; color:var(--bz-text-3); }
.imp-liste-saisie button{ font:inherit; font-size:.9rem; line-height:1; padding:3px 6px; border-radius:50%;
  cursor:pointer; color:var(--bz-text-3); background:none; border:0; }
.imp-liste-saisie button:hover{ color:var(--bz-red-fort); background:rgba(var(--bz-red-fort-rgb),.09); }
.imp-vide{ margin:12px 0 0; padding:12px 15px; border-radius:11px; font-size:.86rem; line-height:1.55;
  color:var(--bz-text-2); background:rgba(var(--bz-ink-rgb),.035); border:1px solid rgba(var(--bz-ink-rgb),.10); }
.imp-duo.fx-ok{ border-left-color:var(--bz-green); background:rgba(var(--bz-green-rgb),.05); }
.imp-duo.fx-mid{ border-left-color:var(--bz-blue); background:rgba(var(--bz-blue-rgb),.045); }
.imp-duo.fx-warn{ border-left-color:var(--bz-amber-4); background:rgba(var(--bz-amber-vif-rgb),.07); }
.imp-duo b i{ display:block; font-style:normal; font-size:.72rem; font-weight:600; color:var(--bz-text-3); margin-top:2px; }

/* « Ce que les chiffres disent » : styles partages dans css/verdict.css, pour
   que decouvrir.php et cette page ne divergent pas. Ne restent ici que les
   ancres, propres a cette page. */
#impCompat, #impEffet, #impDoublons, #impLiens, #impSim,
#impProfil, #impProches, #impRisque{ scroll-margin-top:124px; }

/* A surveiller : une liste, pas une rangee de pictogrammes identiques. */
.imp-surv{ list-style:none; margin:14px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.imp-surv li{ padding:13px 16px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
  background:rgba(var(--bz-ink-rgb),.025); border-left:3px solid var(--bz-blue); }
.imp-surv li.fort{ border-left-color:var(--bz-amber-4); background:rgba(var(--bz-amber-vif-rgb),.06); }
.imp-surv b{ display:block; font-size:.92rem; font-weight:700; color:var(--bz-text); }
.imp-surv em{ display:block; margin-top:2px; font-style:normal; font-size:.8rem; font-weight:600; color:var(--bz-blue); }
.imp-surv li.fort em{ color:var(--bz-amber-4); }
.imp-surv span{ display:block; margin-top:6px; font-size:.83rem; line-height:1.5; color:var(--bz-text-2); }

/* Formulaire de simulation */
.imp-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:18px 0 6px;
  padding:16px 18px; border-radius:14px; background:var(--bz-surface); border:1px solid rgba(var(--bz-ink-rgb),.09); }
.imp-form label{ display:flex; flex-direction:column; gap:5px; font-size:.8rem; font-weight:600; color:var(--bz-text-3); }
.imp-form select{ font:inherit; font-size:.92rem; padding:9px 12px; border-radius:10px; min-width:190px;
  background:var(--bz-bg-soft2); border:1px solid rgba(var(--bz-ink-rgb),.14); color:var(--bz-text); }
.imp-form select:focus{ outline:none; border-color:var(--bz-blue-vif); }

/* Jauge de complementarite — bleu neutre : ce n'est pas une note de qualite. */
.imp-jauge{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
/* LE GRAND NOMBRE DE LA JAUGE. Il s'appelait « imp-note » — le meme nom que les
   paragraphes d'explication de la page. Les sept notes de bas de bloc heritaient
   donc de 3rem, gras, en bleu : elles occupaient a elles seules 26 % de la
   hauteur de la page. Deux usages incompatibles ne peuvent pas partager un nom. */
.imp-score{ font-family:var(--ff-head); font-size:3rem; font-weight:800; color:var(--bz-blue); line-height:1; }
.imp-score small{ font-size:1rem; font-weight:600; color:var(--bz-text-3); }

/* LA NOTE DE BAS DE BLOC : ce qui precise, nuance ou avertit. Discrete par
   construction — elle se lit apres le bloc, jamais avant. */
.imp-note{ margin:14px 0 0; padding:11px 15px; border-left:3px solid rgba(var(--bz-ink-rgb),.16);
  background:var(--bz-bg-soft2); border-radius:0 10px 10px 0; font-size:.84rem; line-height:1.65;
  color:var(--bz-text-2); }
.imp-note b{ color:var(--bz-text); font-weight:650; }
.imp-sous{ flex:1 1 320px; display:flex; flex-direction:column; gap:9px; min-width:260px; }
.imp-sous-l{ display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--bz-text-2); }
.imp-sous-l b{ flex:0 0 42px; text-align:right; font-weight:700; color:var(--bz-text); }
.imp-sous-l span{ flex:0 0 148px; color:var(--bz-text-3); }
.imp-piste{ flex:1 1 auto; height:7px; border-radius:4px; background:rgba(var(--bz-ink-rgb),.08); overflow:hidden; }
.imp-piste i{ display:block; height:100%; border-radius:4px; background:var(--bz-blue); }

/* Avant -> apres */
.imp-duos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:14px; }
.imp-duo{ padding:14px 16px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.10);
  background:rgba(var(--bz-ink-rgb),.025); border-left:3px solid var(--bz-text-5); }
.imp-duo em{ display:block; font-style:normal; font-size:.78rem; font-weight:600; color:var(--bz-text-3); }
.imp-duo b{ display:block; margin:6px 0; font-family:var(--ff-head); font-size:1.3rem; font-weight:800; color:var(--bz-text); }
/* La fleche porte du sens (avant -> apres) : elle doit passer le contraste AA. */
.imp-duo b .fl{ color:var(--bz-text-3); margin:0 7px; font-weight:600; }
.imp-duo span{ display:block; font-size:.82rem; line-height:1.5; color:var(--bz-text-2); }
.imp-duo.fx-ok{ border-left-color:var(--bz-green); background:rgba(var(--bz-green-rgb),.05); }
.imp-duo.fx-mid{ border-left-color:var(--bz-blue); background:rgba(var(--bz-blue-rgb),.045); }
.imp-duo.fx-warn{ border-left-color:var(--bz-amber-2); background:rgba(var(--bz-amber-2-rgb),.055); }

/* Doublons */
.imp-doublon{ margin-top:14px; padding:14px 16px; border-radius:12px; font-size:.88rem; line-height:1.55;
  color:var(--bz-text-1c); background:rgba(var(--bz-amber-2-rgb),.06); border:1px solid rgba(var(--bz-amber-2-rgb),.22); border-left:3px solid var(--bz-amber-2); }
.imp-doublon ul{ margin:8px 0 0; padding-left:20px; }
.imp-doublon li{ margin:3px 0; }

/* Combinaisons */
/* minmax(0,1fr) et non 1fr : sinon la colonne ne peut pas descendre sous la
   largeur minimale de son contenu, et la grille deborde son conteneur. */
.imp-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.imp-liste{ list-style:none; margin:8px 0 0; padding:0; }
.imp-liste li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 0; border-top:1px solid rgba(var(--bz-ink-rgb),.07); font-size:.88rem; }
.imp-liste li:first-child{ border-top:none; }
.imp-liste .n{ color:var(--bz-text); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imp-liste .v{ flex:0 0 auto; font-size:.79rem; color:var(--bz-text-3); }
.imp-soustitre{ margin:0; font-size:.86rem; font-weight:700; color:var(--bz-text-2); }

/* Simulations */
.imp-tab{ width:100%; border-collapse:collapse; margin-top:12px; font-size:.88rem; }
.imp-tab th, .imp-tab td{ padding:10px 12px; text-align:right; border-top:1px solid rgba(var(--bz-ink-rgb),.08); }
.imp-tab th:first-child, .imp-tab td:first-child{ text-align:left; }
.imp-tab thead th{ border-top:none; font-size:.76rem; font-weight:700; color:var(--bz-text-3); text-transform:uppercase; letter-spacing:.03em; }
.imp-tab tbody td{ color:var(--bz-text); }
.imp-tab-wrap{ overflow-x:auto; }
@media (max-width:640px){ .imp-cols{ grid-template-columns:minmax(0,1fr); } .imp-score{ font-size:2.3rem; }
  .imp-sous-l span{ flex:0 0 118px; } .imp-form select{ min-width:0; width:100%; } .imp-form label{ flex:1 1 100%; } }

/* ==========================================================================
   LES PLIS — troisieme niveau de lecture.
   Poses au chargement par js/impact-plis.js. Sans JavaScript ces regles ne
   trouvent rien a styler, et la page reste celle d'avant : rien ne casse.
   ========================================================================== */
/* Les blocs replies gardent leur mise en forme, mais perdent leur ombre et leur
   fond : imbriquer deux cartes l'une dans l'autre brouille la hierarchie. */

/* --- Les reglages, replies au-dessus de la reponse. --- */

/* --- Un repere par ligne : le titre suffit a parcourir. --- */
.vd-pt > summary{ list-style:none; cursor:pointer; display:block; }
.vd-pt > summary::-webkit-details-marker{ display:none; }
.vd-pt > summary b{ cursor:pointer; }
.vd-pt > summary::after{ content:' +'; font-weight:700; color:var(--bz-text-4); }
.vd-pt[open] > summary::after{ content:' −'; }
.vd-pt > summary:focus-visible{ outline:2px solid var(--bz-blue-vif); outline-offset:2px; border-radius:6px; }
.vd-pt-corps > b{ display:none; }   /* le titre est deja dans le resume */

@media (max-width:640px){
  /* Cible tactile : 44 px. « Lire la suite » etait a 40. */
  .vd-pt > summary{ padding:4px 0; }
}

.ic-sub{ max-width:58ch; }

/* Mesure de lecture — les notes explicatives couraient a 129 signes par ligne.
   Voir css/baziloo.css : un « ch » vaut environ 1,24 signe. */
.imp-note, .imp-vide{ max-width:58ch; }
