/* =========================================================================
   Ordinateur : tout est visible, le tableau remplace la forge au centre
   ========================================================================= */
@media (min-width:901px){
  :root{--barre:0px;--cw:118px;--ch:34px;--rw:104px;--gout:24px}
  body:has(input:focus,select:focus) .pouce{display:flex}
  .tchip,.mini,.vchip,.seg button,.fchip .rm,.pchip button{min-height:0}
  .fchip .rm,.pchip button{min-width:0}
  .seg button{min-width:34px}
  .mini.petit,.langues button{min-height:0}
  .top{padding:20px var(--gout) 18px}
  .onglets{display:inline-flex}
  .stats{display:block}
  .reglages-haut{margin-left:0}
  .barre-mobile{display:none}
  .aide-clavier{display:inline}
  .champ{font-size:14px;padding:9px 13px}

  .layout{grid-template-columns:290px minmax(0,1fr);padding:4px var(--gout) 32px;gap:26px}
  body[data-vue] .zone-themes,body[data-vue] .zone-favoris{display:block}
  .zone-themes{grid-column:1;grid-row:1}
  .zone-favoris{grid-column:1;grid-row:2}
  .zone-centre{grid-column:2;grid-row:1 / span 2}
  body:not([data-vue="tableau"]) .zone-forge{display:flex}
  .zone-forge{height:auto;min-height:0;overflow:visible;padding:24px}

  .resultat{order:1;align-items:flex-start;text-align:left;min-height:min(170px,19vh)} /* écran bas : le bloc du nom rapetisse avec le nom (ajusterNom) */
  .meta,.descriptif,.suggestions{justify-content:flex-start}
  .pouce{order:2;position:static;margin:18px 0 4px;padding-top:0;background:none}
  .pouce-parts{justify-content:flex-start}
  .pouce-btns{grid-template-columns:48px 48px minmax(180px,280px) 48px 48px;justify-content:start}
  .variantes{order:3}
  .voir-var{margin:14px 0 0}
  .hist-bloc{order:4}
  .zone-forge>h2{display:flex}
  /* Pas de fondu sur ordinateur : le masque couperait l'ombre des puces, qui dépasse du cadre de la rangée. */
  .historique{flex-wrap:wrap;overflow:visible;padding:0 0 12px;margin:0;mask-image:none}

  .zone-tableau{padding:24px}
  .zone-tableau .note{display:block}
  .gh.lig{padding:0 8px;font-size:12.5px}
  .zone-tableau{height:auto}
  .grille{height:calc(100vh - 220px);flex:none}
  .toast{bottom:30px}
}
@media (min-width:1080px){
  .layout{grid-template-columns:clamp(250px,22vw,300px) minmax(0,1fr) clamp(240px,21vw,300px)}
  .zone-favoris{grid-column:3;grid-row:1}
  .zone-centre{grid-row:1}
}
/* Ordinateur assez haut : la page tient dans l'écran, sans défilement ; chaque colonne défile seule si besoin. */
@media (min-width:901px) and (min-height:600px){
  /* Écran bas : l'interface entière rapetisse (zoom, js/echelle.js) ; la hauteur de page compense le zoom. */
  html{zoom:var(--echelle,1)}
  body{height:calc(100vh / var(--echelle,1));overflow:hidden;display:flex;flex-direction:column}
  .top{flex:none;width:100%}
  .layout{flex:1 1 auto;min-height:0;width:100%;grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr);padding-bottom:24px}
  .zone-themes,.zone-favoris{align-self:stretch;min-height:0;overflow:auto;overscroll-behavior:contain}
  /* Colonne des thèmes plus compacte, pour tenir sans défiler sur la plupart des écrans. */
  .zone-themes{padding:16px 16px 8px}
  .zone-themes h2{margin-bottom:8px}
  .zone-themes .chips{gap:7px}
  .zone-themes .tchip.cat{padding:4px 11px 4px 10px;font-size:12.5px}
  .zone-themes .tchip.cat small{display:none}
  .zone-themes .groupe+.groupe{margin-top:14px;padding-top:13px}
  .zone-themes .affiner{margin-top:8px}
  .zone-themes .affiner summary{padding:2px 0}
  .zone-themes h3{margin-bottom:8px}
  .top{padding:14px var(--gout) 12px}
  .layout{padding-bottom:20px}
  .zone-centre{align-self:stretch;min-height:0;display:flex;flex-direction:column}
  .zone-forge{flex:1;min-height:0;overflow:auto}
  /* Barres de défilement des colonnes : fines, couleur du texte discret, sans rail ; plus visibles au survol de la colonne. */
  .zone-themes,.zone-favoris,.zone-forge{scrollbar-width:thin;scrollbar-color:color-mix(in oklch,var(--text-3) 30%,transparent) transparent}
  .zone-themes:hover,.zone-favoris:hover,.zone-forge:hover{scrollbar-color:color-mix(in oklch,var(--text-3) 60%,transparent) transparent}
  .zone-tableau{flex:1;min-height:0;display:flex;flex-direction:column}
  .grille{flex:1;height:auto;min-height:0}
}
@media (min-width:1080px) and (min-height:600px){
  .layout{grid-template-rows:minmax(0,1fr)}
}