/* ==========================================================================
   PC Lambda — styles propres au comparateur de coûts IA

   Chargée uniquement par comparateur.php. Toutes les couleurs viennent des
   jetons de style.css : rien n'est codé en dur ici, pour que le comparateur
   suive le thème clair ou sombre comme le reste du site.

   Les deux séries du graphique :
     --cloud  abonnements et API   (brun-orangé, défini dans style.css)
     --ia     installation locale  (vert de l'univers IA)
   ========================================================================== */

/* ---------- conteneur large : le tableau et les trois rails ont besoin de
   plus de largeur que le reste du site pour tenir côte à côte. Cette classe
   ne s'applique qu'ici — .wrap-narrow des sections de texte n'est pas touché. */
.cwrap{max-width:1480px; margin:0 auto; padding:0 clamp(18px,4vw,36px)}

/* ---------- disposition générale : deux rails qui se regroupent selon la
   largeur disponible, plus le graphique qui reste toujours en pleine largeur.

     < 720px   — tout empilé, un rail par ligne (téléphone)
     ≥ 720px   — abonnements et machine côte à côte ; le graphique s'étend
                 sur toute la largeur en dessous, à n'importe quelle taille
                 d'écran — c'est lui qui profite de la place en plus, pas une
                 troisième colonne étroite.

   Les rails sont nommés par zone plutôt que par ordre de colonne : ça évite
   toute confusion sur "quel div va où" quand la disposition change. */
.cmp2{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start;
  grid-template-areas:"cloud" "local" "graph"}
/* Sans min-width:0, une piste de grille refuse de descendre sous la largeur
   mini du graphique ou du tableau, et c'est la page entière qui déborde. */
.cmp2 > *{min-width:0}

.crail-cloud{grid-area:cloud}
.crail-local{grid-area:local}
.ccolle{grid-area:graph}

@media(min-width:720px){
  .cmp2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"cloud local" "graph graph"}
}

.cbloc{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(16px,2.2vw,22px); box-shadow:var(--shadow); margin-bottom:16px}
.cbloc:last-child{margin-bottom:0}
.ctit{font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:9px}
.ctit .pip{width:9px; height:9px; border-radius:2px; flex:none}
.ctit .num{width:19px; height:19px; border-radius:50%; background:var(--ia-ink); color:var(--btn-txt);
  flex:none; display:grid; place-items:center; font-size:11px; font-weight:700}

/* ---------- rangées cochables ---------- */
.crows{display:flex; flex-direction:column}
.crow{display:flex; align-items:center; gap:11px; padding:8px 0; border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow input[type=checkbox],.crow input[type=radio]{width:17px; height:17px; flex:none;
  cursor:pointer; accent-color:var(--cloud)}
.cloc .crow input{accent-color:var(--ia)}
.ctag{width:28px; height:28px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-weight:800; font-size:12px; color:#fff}
.clab{flex:1; min-width:0; cursor:pointer}
.clab .n{display:block; font-weight:700; font-size:14px; line-height:1.3}
.clab .m{display:block; font-size:12px; color:var(--muted); line-height:1.35}
.cprix{font-size:12.5px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
  color:var(--ink-soft)}
.cqte{width:52px; padding:4px 5px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:12.5px;
  text-align:center}
.cqte:disabled{opacity:.32}
.crow.ko{opacity:.42}
.crow.ko .clab{cursor:not-allowed}

.cbadge{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:1px 6px; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--muted); vertical-align:1px; margin-left:6px}
.cbadge.moe{background:var(--ia-soft); border-color:var(--ia); color:var(--ia-ink)}
.cbadge.apercu{background:var(--cloud-soft); border-color:var(--cloud); color:var(--cloud)}

/* ---------- réglages ---------- */
.cctl{margin-bottom:14px}
.cctl:last-child{margin-bottom:0}
.ck{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px}
.ck b{font-variant-numeric:tabular-nums}
.cmp2 input[type=range]{width:100%; accent-color:var(--ia); height:24px; cursor:pointer; margin:0}
.cw{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:13.5px}
.chint{font-size:12.5px; color:var(--muted); margin:5px 0 0; line-height:1.45}
.cduo{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:460px){.cduo{grid-template-columns:1fr}}

.cseg{display:inline-flex; border:1px solid var(--line); border-radius:99px; padding:3px;
  background:var(--surface-2)}
.cseg button{border:0; background:none; padding:5px 12px; border-radius:99px; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer}
.cseg button.on{background:var(--ink); color:var(--bg)}

.cderive{margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:5px 16px; font-size:12px; color:var(--muted)}
.cderive b{color:var(--ink-soft); font-weight:700; font-variant-numeric:tabular-nums}

.cchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.cchip{background:var(--cloud-soft); color:var(--ink-soft); border-radius:8px; padding:5px 9px;
  font-size:12px}
.cchip b{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}

.capi{display:flex; align-items:center; gap:9px; padding:6px 0; border-top:1px solid var(--line)}
.capi:first-child{border-top:0}
.capi .n{flex:1; font-size:13px; line-height:1.3; cursor:pointer}
.capi .n s{display:block; text-decoration:none; color:var(--muted); font-size:11px}
.capi .c{font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.capi.on{background:var(--cloud-soft); margin:0 -9px; padding-left:9px; padding-right:9px;
  border-radius:7px; border-top-color:transparent}
.capi.on + .capi{border-top-color:transparent}

/* ---------- matrice carte × nombre ---------- */
.cmatwrap{overflow-x:auto; min-width:0}
.cmat{width:100%; min-width:400px; border-collapse:separate; border-spacing:0}
.cmat th{font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; padding:0 0 9px; text-align:center}
.cmat th:first-child{text-align:left; padding-left:0}
.cmat td{padding:2px; vertical-align:middle}
.cmat td:first-child{padding:2px 10px 2px 0; white-space:nowrap}
.cgn{display:block; font-weight:700; font-size:13.5px; line-height:1.25}
.cgm{display:block; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.ccell{display:block; position:relative; border:1px solid var(--line); border-radius:8px;
  padding:8px 3px; text-align:center; cursor:pointer; background:var(--surface-2)}
.ccell input{position:absolute; opacity:0; width:0; height:0; margin:0}
.ccell .u{display:block; font-weight:800; font-size:15.5px; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.15}
.ccell .w{display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px;
  font-variant-numeric:tabular-nums}
.ccell .lim{display:block; font-size:9.5px; color:var(--muted); letter-spacing:.04em;
  text-transform:uppercase}
.ccell:hover{border-color:var(--ia)}
.ccell:focus-within{outline:2px solid var(--ia); outline-offset:2px}
.ccell.sel{background:var(--ia-soft); border:2px solid var(--ia); padding:7px 2px}
.ccell.sel .u{color:var(--ia-ink)}
.ccell.ko{cursor:not-allowed; background:transparent; border-style:dashed; opacity:.5}
.ccell.ko .u{color:var(--muted); font-size:13px; font-weight:600}
.cmini{display:inline-block; font-size:10px; font-weight:800; padding:1px 5px; border-radius:5px;
  background:var(--ia-soft); color:var(--ia-ink); margin-top:2px}
.cmini.non{background:var(--cloud-soft); color:var(--cloud)}

.crecap{margin-top:13px; padding:12px 14px; border-radius:9px; font-size:13.5px; line-height:1.5;
  background:var(--ia-soft); border:1px solid var(--ia); color:var(--ink)}
.crecap.vide{background:var(--surface-2); border-color:var(--line); color:var(--muted)}
.crecap b{font-variant-numeric:tabular-nums}
.crecap .l{display:flex; justify-content:space-between; gap:12px}
.crecap .l + .l{margin-top:3px}
.crecap .tot{margin-top:7px; padding-top:7px; border-top:1px solid var(--ia); font-weight:800}

/* ---------- bande graphique ----------
   Toujours en pleine largeur sous les deux rails, à toute taille d'écran :
   pas de position collante, elle n'aurait plus de sens sans colonne latérale
   à côté de laquelle rester fixée pendant le défilement. */
.cleg{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.cleg span{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft)}
.cleg i{width:16px; height:3px; border-radius:2px; flex:none}
.cplot{overflow-x:auto; position:relative; min-width:0}
.cplot svg{display:block; width:100%; height:auto; min-width:440px}
.cplot svg:focus-visible{outline:2px solid var(--ia); outline-offset:3px; border-radius:8px}

.ctip{position:absolute; pointer-events:none; z-index:5; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow);
  font-size:13px; min-width:180px; opacity:0; transition:opacity .1s}
.ctip.on{opacity:1}
.ctip .m{font-weight:800; color:var(--ink); margin-bottom:6px; font-size:13.5px}
.ctip .l{display:flex; align-items:center; gap:8px; justify-content:space-between;
  color:var(--ink-soft)}
.ctip .l + .l{margin-top:2px}
.ctip .l b{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}

.cstats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
.cst{border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--surface-2)}
.cst .t{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.cst .v{font-size:19px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums}
.cst.a .v{color:var(--cloud)} .cst.l .v{color:var(--ia-ink)}

.cverdict{margin-top:13px; padding:12px 14px; border-radius:9px; font-size:14px; line-height:1.5;
  background:var(--ia-soft); border:1px solid var(--ia); color:var(--ink)}
.cverdict.ko{background:var(--cloud-soft); border-color:var(--cloud)}
.cverdict.vide{background:var(--surface-2); border-color:var(--line); color:var(--muted)}
.cverdict b{font-variant-numeric:tabular-nums}
.ccapa{margin-top:10px; padding:11px 13px; border-radius:9px; font-size:13.5px; line-height:1.5;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft)}
.ccapa.ko{background:var(--cloud-soft); border-color:var(--cloud); color:var(--ink)}
.ccapa b{color:var(--ink)}

.ctblbtn{margin-top:13px; background:transparent; border:1px solid var(--line); border-radius:9px;
  padding:7px 14px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  cursor:pointer}
.ctblbtn:hover{color:var(--ink); border-color:var(--muted)}
.ctblwrap{margin-top:12px; overflow-x:auto; display:none}
.ctblwrap.on{display:block}
.ctbl{border-collapse:collapse; width:100%; min-width:420px; font-size:14px}
.ctbl th,.ctbl td{padding:8px 12px; text-align:right; border-top:1px solid var(--line)}
.ctbl th:first-child,.ctbl td:first-child{text-align:left}
.ctbl thead th{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border-top:0}
.ctbl td{font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.ctbl td.win{color:var(--ink); font-weight:700}

/* ---------- hypothèses ---------- */
.chyp{margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:0 clamp(16px,2.2vw,22px); box-shadow:var(--shadow)}
.chyp summary{cursor:pointer; font-weight:700; padding:15px 0; font-size:14.5px}
.chyp[open]{padding-bottom:18px}
.cset{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px;
  margin:6px 0 12px}
.cset label{font-size:12.5px; color:var(--muted)}
.cset input{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:13px; margin-top:4px}
.chyp p{font-size:13.5px; color:var(--muted); margin:0 0 10px}
.chyp p:last-child{margin-bottom:0}

/* ---------- fraîcheur des données ---------- */
.csource{font-size:13px; color:var(--muted); margin:14px 0 0; display:inline-flex;
  align-items:center; gap:7px}
.csource::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ia);
  flex:none}
.csource.secours{color:var(--cloud)}
.csource.secours::before{background:var(--cloud)}
.csource b{color:var(--ink-soft); font-weight:700}

@media(prefers-reduced-motion:reduce){.ctip{transition:none}}