/* ================================================================
   CVG-PATCH423 - REGLE 169 : composition 16:9 (consigne du 30.08.2026)
   Couche ADDITIVE, chargee en DERNIER par les deux seules pages cibles :
     - accueil public            Views/Default/Index.cshtml
     - portrait individuel       Views/Artist/Index.cshtml
   Domaine d'application (regle 169, section 1) : viewport >= 1366 de
   large ET >= 600 de haut ET rapport >= 16/9. Hors de ce domaine :
   AUCUNE regle de ce fichier ne s'applique, le site rend exactement
   comme aujourd'hui.
   PERIMETRE PAR PAGE (423d, arbitrage Maxou du 30.08.2026) :
     - ACCUEIL : recompose sur TOUT le domaine de la regle ;
     - PORTRAIT : recompose UNIQUEMENT en 16:9 PETIT FORMAT (<= 1699px
       de large, classe laptop Lenovo), variante diagramme au milieu ;
       au-dela (FHD 100%, grands ecrans) le portrait garde le design
       actuel (canevas 1040x660 mis a l'echelle), strictement intouche.
   La discrimination de page se fait en CSS pur par body:has(#artistList)
   (accueil) / body:has(#rest) (portrait), sous garde
   @supports selector(...) : un navigateur sans :has ignore TOUT le
   fichier d'un bloc - degradation tout-ou-rien vers le design actuel.
   Constantes : livraison-adaptation-16-9.html sections 03 (accueil) et
   06 (portrait). Reversibilite : supprimer ce fichier, Scripts/AP_169.js
   et leurs 4 lignes de reference dans les deux vues.
   Principe de neutralisation : les deux pages sont un canevas fixe
   1040x660 mis a l'echelle par applyScale() (styles INLINE transform/
   left sur body, reecrits a chaque resize). Le !important sous media
   query bat le style inline et s'annule de lui-meme hors du domaine -
   meme recette que la media mobile de l'accueil (Index.cshtml:236-237).
   ================================================================ */

@media (min-width: 1366px) and (min-height: 600px) and (min-aspect-ratio: 16/9) {
@supports selector(body:has(#artistList)) {

  :root {
    --r169-w-volet: clamp(236px, 17vw, 300px); /* volets : ~20% du gain */
    --r169-bandeau: 40px;
    --r169-pied: 26px;
    --r169-champ: 34px;
    --r169-rang: 27px;
  }

  /* ================================================================
     ACCUEIL - tout le domaine de la regle.
     Sortie du canevas 1040x660, gabarit bandeau / scene.
     ================================================================ */
  body:has(#artistList) {
    width: 100% !important;
    height: 100vh !important;
    position: static !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  body:has(#artistList) .header {
    height: var(--r169-bandeau);
    flex: 0 0 var(--r169-bandeau);
    padding: 0 18px;
  }
  body:has(#artistList) .adm-pop {
    top: var(--r169-bandeau);
    max-height: calc(100vh - var(--r169-bandeau));
  }
  body:has(#artistList) .triptych {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    grid-template-columns: var(--r169-w-volet) minmax(0, 1fr) var(--r169-w-volet);
  }

  /* --- volets Moteur / Moyen : marquee -> liste fixe des 24 types
     (grid-auto-rows:1fr : l'interligne se repartit sur la hauteur) --- */
  .panel { padding: 10px 14px 8px; }
  .panel .p-head {
    padding: 0 0 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--ln);
  }
  .panel.right .p-head { text-align: left !important; } /* bat le style inline serveur */
  .panel .p-label { font-size: 9px; letter-spacing: .22em; }
  .panel .p-sub { font-size: 7px; font-weight: 300; letter-spacing: .1em; color: var(--t3); }
  .ax-mask::before, .ax-mask::after { display: none; } /* degrades du marquee */
  .ax-track {
    position: static !important;
    animation: none !important;   /* stoppe scroll-panel ; l'animation-delay
                                     inline de rerasterTracks devient inerte */
    transform: none !important;
    /* CVG-PATCH424 : flex plutot que grid(1fr) - meme repartition egale au
       repos, mais une ligne OUVERTE (version integrale) peut prendre sa
       hauteur de contenu, les autres se resserrent */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  /* buildPanelHTML duplique les 24 types pour la boucle : la 2e moitie sort */
  .ax-track > .ax-row:nth-child(n+25) { display: none; }
  .ax-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) fit-content(40%) auto;
    align-items: center;
    gap: 6px;
    padding: 0;
    min-height: 0;
    flex: 1 1 0;          /* CVG-PATCH424 : part egale de la hauteur au repos */
    overflow: hidden;
  }
  /* CVG-PATCH424 : ligne ouverte (version integrale du type) - elle prend sa
     hauteur de contenu, bornee, les 23 autres se repartissent le reste */
  .ax-row.r169-ouvert {
    flex: 0 0 auto;
    padding: 5px 0 7px;
    align-items: start;
  }
  .ax-txt { display: contents; }
  .ax-n { font-size: 13.5px; color: var(--accent); margin-top: 0; min-width: 0; }
  .ax-lib {
    grid-column: 2; grid-row: 1;
    font-size: 10.5px; color: var(--t1); letter-spacing: .02em;
  }
  .ax-cat {
    grid-column: 3; grid-row: 1;
    font-size: 7.5px; font-weight: 300; letter-spacing: .06em;
    color: var(--t4); text-align: right;
    overflow: hidden; text-overflow: ellipsis;
  }
  .ax-c { grid-column: 4; } /* compteur admin, absent en public */
  .panel.right .ax-n { text-align: left; }
  .panel.right .ax-lib { text-align: left; }

  /* CVG-PATCH424b : au survol d'un type, la ligne devient le CHEMIN COMPLET
     sur une ligne - les 4 niveaux a la MEME TAILLE que le libelle, la
     hierarchie portee par les chevrons (convention de la fiche artiste), le
     niveau 4 distingue (sombre, un cran plus gras). S'il depasse, il DEFILE
     de droite a gauche (amplitude/duree posees en variables CSS par
     AP_169.js a l'entree du pointeur, delai .35s, retour rapide). La ligne
     de chemin est creee par AP_169.js avec un display:none inline : seule
     la regle :hover ci-dessous la revele, uniquement sous la regle 169. */
  .ax-row:hover .ax-lib, .ax-row:hover .ax-cat { display: none; }
  .ax-row:hover .ax-chemin { display: block !important; }
  .ax-chemin {
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 10.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--t2);
    font-weight: 300;
  }
  /* CVG-PATCH424c : le defilement est anime par AP_169.js (Web Animations,
     relancee a CHAQUE survol - la version a variables CSS ne rejouait pas :
     au second passage la ligne reapparaissait deja en fin de course) ;
     vitesse ramenee a 30px/s. Chevrons en noir (choix Maxou, variante A). */
  .ax-chemin-i { display: inline-block; }
  .ax-chev { color: var(--w); margin: 0 5px; }
  .ax-chemin-lib { color: var(--w); font-weight: 500; }

  /* CVG-PATCH424 : version integrale du type clique - meme langage que la
     ligne active de la fiche artiste (description courte, longue sous filet,
     artistes-exemples en liens). Bornee en hauteur, defilement interne fin. */
  .r169-ext {
    grid-column: 1 / -1;
    display: block;
    padding: 3px 6px 2px 28px;
    cursor: default;
    max-height: clamp(140px, 34vh, 340px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .r169-ext::-webkit-scrollbar { width: 2px; }
  .r169-ext::-webkit-scrollbar-thumb { background: var(--ln); }
  .r169-ext-s { display: block; font-size: 10.5px; line-height: 1.55; color: var(--t2); font-weight: 400; }
  .r169-ext-l { display: block; font-size: 10.5px; line-height: 1.55; color: var(--t2); font-weight: 300; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--ln2); }
  .r169-ext-x { display: block; margin-top: 6px; font-size: 9.5px; line-height: 1.7; }
  .r169-ext-xl { font-size: 7.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); margin-right: 6px; }
  .r169-ext-x a { color: var(--t2); text-decoration: none; }
  .r169-ext-x a:hover { color: var(--accent); }
  .r169-ext-sep { color: var(--t4); margin: 0 5px; }

  /* --- zone centrale : etat / champ 34px / legende 4 syntaxes /
     liste multi-colonnes sans scroll / tris --- */
  body:has(#artistList) .center { padding: 12px 28px 10px; gap: 10px; }
  .c-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "status count" "search search" "tip tip";
    gap: 10px 12px;
    align-items: center;
    padding: 0;
    border-bottom: none;
  }
  .c-status { grid-area: status; font-size: 8px; letter-spacing: .12em; }
  #statusLabel {
    display: inline-block;
    border: 1px solid var(--ln);
    background: var(--bg-panel);
    color: var(--w);
    padding: 3px 10px;
    font-weight: 500;
  }
  .c-clear { font-size: 7.5px; }
  .c-num { grid-area: count; font-size: 20px; color: var(--accent); min-width: 0; }
  .c-total { font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--t3); }
  .c-srchbox { display: contents; } /* le champ et la bulle deviennent des zones de la grille */
  .c-srch {
    grid-area: search;
    width: 100%;
    height: var(--r169-champ);
    background: var(--bg-input, #ffffff);
    border: 1px solid var(--ln);
    border-bottom-color: var(--t3);
    padding: 0 12px;
    font-size: 11px;
  }
  /* La bulle d'aide devient la legende permanente des 4 syntaxes */
  .c-srchtip {
    grid-area: tip;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto;
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 18px;
  }
  .tip-r { display: block; border-left: 2px solid var(--ln); padding: 2px 0 2px 10px; }
  .tip-r b { display: block; font-size: 8px; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
  .tip-r i { display: block; font-size: 7px; color: var(--t3); line-height: 1.45; margin-top: 2px; }

  /* Liste : rangs fixes 27px, remplissage colonne par colonne, 3 colonnes
     (2 sous 1520px), le surplus deborde a droite et reste rogne - le
     nombre d'entrees visibles = plancher(hauteur/27) x colonnes. */
  .a-list {
    display: grid;
    grid-template-rows: repeat(auto-fill, var(--r169-rang));
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 3);
    column-gap: 24px;
    align-content: start;
    overflow: hidden !important;
  }
  .a-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    height: var(--r169-rang);
    padding: 0;
    gap: 8px;
  }
  .a-m, .a-nn { font-size: 14px; }
  .a-name { font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
  .a-arr { font-size: 11px; }
  #scroll-sentinel { display: none; }

  .c-foot { padding: 4px 0 0; }
  .sort-btn { font-size: 7px; letter-spacing: .16em; padding: 3px 10px; border-color: var(--ln); }
  .sort-btn.on { border-color: var(--accent); }
  .c-legal { font-size: 7.5px; font-weight: 300; letter-spacing: .08em; color: var(--t3); }
}
}

/* ---- Accueil, seuil : sous 1520px de large, liste sur 2 colonnes ---- */
@media (min-width: 1366px) and (min-height: 600px) and (min-aspect-ratio: 16/9) and (max-width: 1519px) {
@supports selector(body:has(#artistList)) {
  .a-list { grid-auto-columns: calc((100% - 24px) / 2); }
}
}

/* ---- Accueil, seuil : sous 1500px, legende 2x2, sous-libelles caches ---- */
@media (min-width: 1366px) and (min-height: 600px) and (min-aspect-ratio: 16/9) and (max-width: 1500px) {
@supports selector(body:has(#artistList)) {
  .c-srchtip { grid-template-columns: 1fr 1fr; gap: 6px 18px; }
  .ax-cat { display: none; }
}
}

/* ================================================================
   PORTRAIT - UNIQUEMENT 16:9 PETIT FORMAT (<= 1699px, classe laptop
   Lenovo) : composition CENTRE ALIGNE v2 (arbitrage Maxou du
   30.08.2026, maquette portrait-16-9-centre-aligne-v2.html) - pile
   axiale au centre : phrase de comparaison, pairs, GRANDS CHIFFRES
   21|15, cartographie carree centree dessous ; les volets de types
   (scrollers natifs, liste doublee comme la maquette) CALENT le
   chiffre de leur rang actif sur la LIGNE des grands chiffres
   (AP_169.js : cibleVolet/calerColonnes, retablissement doux quand
   la souris quitte un volet).
   Le diagramme reste le jointplot pondere reel. Ecart declare : le
   DOM n'a qu'UNE liste de pairs (intersection + cases scenes), pas
   les deux colonnes meme-moteur / meme-moyen de la maquette.
   Au-dela de 1699px : AUCUNE regle portrait - design actuel intact.
   ================================================================ */
@media (min-width: 1366px) and (min-height: 600px) and (min-aspect-ratio: 16/9) and (max-width: 1699px) {
@supports selector(body:has(#rest)) {

  body:has(#rest) {
    width: 100% !important;
    height: 100vh !important;
    position: static !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  body:has(#rest) .header {
    height: var(--r169-bandeau);
    flex: 0 0 var(--r169-bandeau);
    padding: 0 18px;
  }
  body:has(#rest) .adm-pop {
    top: var(--r169-bandeau);
    max-height: calc(100vh - var(--r169-bandeau));
  }
  /* banderole retour portrait de groupe (?pid=) */
  body:has(#rest) .pback { flex: 0 0 26px; }
  body.has-pback:has(#rest) .adm-pop { top: calc(var(--r169-bandeau) + 26px); }
  body:has(#rest) .triptych {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
  }

  .rest { grid-template-columns: var(--r169-w-volet) minmax(0, 1fr) var(--r169-w-volet); }

  /* Colonnes de typologie : defilement NATIF sous la regle (CVG-PATCH423f,
     retour Maxou du 30.08.2026 : les colonnes semblaient non scrollables -
     le defilement molette translateY du site, sans barre ni inertie,
     n'est pas percu comme un defilement). La piste redevient statique,
     la moitie dupliquee du bouclage sort du flux, le masque devient le
     scroller (barre fine, trackpad et inertie natifs). AP_169.js
     preempte le handler molette de la page (phase capture, auto-gate)
     et cale la ligne active a l'ouverture. */
  .typo-mask {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .typo-mask::-webkit-scrollbar { width: 2px; }
  .typo-mask::-webkit-scrollbar-thumb { background: var(--ln); }
  /* fondus haut/bas : absolus dans le scroller, ils defileraient avec le
     contenu - la barre suffit comme affordance */
  .typo-mask::before, .typo-mask::after { display: none; }
  .typo-track {
    position: static !important;
    transform: none !important;   /* rend inertes les translateY inline
                                     du handler molette et d'alignMidCenter */
    animation: none !important;
    transition: none !important;
  }
  /* CVG-PATCH426 : la moitie dupliquee de la piste redevient VISIBLE (elle
     etait masquee par 423f) - comme dans la maquette v2, la liste doublee
     garantit assez de contenu au-dessus du rang actif pour que son chiffre
     puisse toujours rejoindre la ligne des grands chiffres du centre. */

  /* Volets de types : corps de lecture a 10.5px (regle d'echelle) */
  .typo-col .head { padding: 10px 14px 8px; }
  .typo-row .lib { font-size: 10.5px; }
  .typo-row .desc { font-size: 10.5px; }
  .typo-row .crumb { font-size: 8px; }
  .row-long { font-size: 10.5px; }
  .row-fine .rf-long { font-size: 10.5px; }
  .row-ex { font-size: 9.5px; }

  /* Centre : pile axiale de la maquette v2 - lecture, pairs, grands
     chiffres, cartographie ; proportions v2 (pairs 1fr, carto 1.75fr) */
  .rmid-head { padding: 10px 14px 8px; }
  .mid-inter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto minmax(0, 1.75fr);
    grid-template-areas:
      "inline"
      "peersh"
      "peers"
      "cnt"
      "pair"
      "ranks"
      "viz";
    gap: 4px 0;
    padding: 10px 24px 10px;
  }
  .mi-inline { grid-area: inline; font-size: 10.5px; line-height: 1.8; padding: 0 0 6px; width: 100%; max-width: 640px; justify-self: center; }
  /* CVG-PATCH426b : DEUX colonnes de pairs (maquette v2) - la liste-
     intersection unique de la page est cachee SOUS LA REGLE seulement,
     remplacee par le conteneur #r169Pairs construit par AP_169.js (il
     porte un display:none inline : seule la regle ci-dessous le revele,
     etancheite du fichier preservee). Aucun panneau d'info au survol. */
  #midPeersH, #restPeersZone, .mid-inter .mi-cnt { display: none; }
  /* PATCH426c : trois ensembles exclusifs - bande d'intersection en
     travers (les noms une seule fois, en ligne, sur l'axe), puis les
     deux colonnes des exclusifs. */
  .mid-inter > #r169Pairs {
    display: grid !important;
    grid-area: peers;
    /* PATCH426d : piste compressible sous son min-content - la bande
       insecable gonflait la colonne implicite (994px) et tout debordait
       a droite du centre (coordonnees rognees) */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px 0;
    width: 100%;
    max-width: 900px;
    justify-self: center;
    min-height: 0;
    padding: 2px 0 6px;
  }
  /* PATCH426d : bande d'intersection sur UNE ligne - rognee proprement,
     et au survol elle CIRCULE de droite a gauche pour se lire en entier
     (idee Maxou, meme mecanique que le chemin des volets de l'accueil :
     animation posee par AP_169.js, 30px/s, depart 350ms, rejouee a
     chaque survol). */
  .r169-interliste {
    text-align: center;
    font-size: 10.5px;
    line-height: 2;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    padding: 3px 0 1px;
  }
  .r169-interfil { display: inline-block; }
  .r169-interliste.r169-defile { text-align: left; }
  .r169-in { color: var(--w); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .r169-in:hover { color: var(--accent); }
  .r169-insep { color: var(--t4); margin: 0 8px; }
  .r169-pcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; min-height: 0; }
  .r169-pcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .r169-plist .peer { min-width: 0; }
  .r169-plist .peer .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .r169-phd {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 6.5px; font-weight: 500; letter-spacing: .15em;
    text-transform: uppercase; color: var(--t4);
    padding-bottom: 5px; border-bottom: 1px solid var(--ln); margin-bottom: 2px;
  }
  .r169-ct { color: var(--t3); letter-spacing: .04em; }
  .r169-plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .r169-plist::-webkit-scrollbar { width: 2px; }
  .r169-plist::-webkit-scrollbar-thumb { background: var(--ln); }
  /* Les grands chiffres 21|15 : l'ancre de la ligne d'alignement (v2) */
  .mi-center { grid-area: pair; justify-self: center; align-self: center; width: 100%; max-width: 420px; margin: 6px 0 2px; }
  .mi-center .mi-num { font-size: 52px; line-height: .86; }
  .mi-ranks { grid-area: ranks; }
  .mi-grid-frame {
    grid-area: viz;
    align-self: stretch;
    justify-self: center;
    /* hauteur definie par la rangee -> largeur = hauteur : cadre carre
       centre sur l'axe (meme recette que le 423b, eprouvee) */
    aspect-ratio: 1 / 1;
    max-width: 100%;
    margin: 6px 0 0;
    padding: 13px 10px 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .mi-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  #miGrid { height: 100%; }
  #miGrid svg { width: 100%; height: 100%; }

  /* Rangs de pairs : meme constante 27px que la liste de l'accueil */
  .peer { min-height: var(--r169-rang); font-size: 10.5px; }
  .peer .pn { font-size: 13px; }
}
}