/* ============================================================================
   CVG-PATCH183 — PORTRAIT-STANDARD.CSS : le standard commun des portraits.
   ----------------------------------------------------------------------------
   CONTRAT DE SEPARATION COMMUN / PERSONNALISE
   Cette feuille est inseree dans la cascade APRES le <style> de config
   back-office (main.js insere le style config AVANT ce <link>) : a specificite
   egale, ses regles battent les cles CSS par-portrait, y compris leurs flags
   "Important" (dernier !important a specificite egale gagne). Les zones
   verrouillees ici sont donc IDENTIQUES pour les 9 portraits.

   CE QUI RESTE PERSONNALISABLE PAR PORTRAIT (et uniquement cela) :
   1. TEINTES        : variables theme (--s*, --d*, --cryptex-*, etc.), posees
                       inline sur <html> par le layout — jamais verrouillees ici
                       (les regles ci-dessous consomment var(--...) pour toute
                       couleur). Les cles CSS de config qui ne posent QUE des
                       couleurs / fonds / ombres restent egalement gagnantes :
                       cette feuille ne verrouille aucune propriete de couleur.
   2. POLICE DU TITRE: h1.title — font-family/couleur/taille du titre libres
                       (cle CSS config ou variable --title-font). Rien ici ne
                       touche a la typo de h1.title.
   2b. TYPO DES TABLEAUX ET DE LA LISTE D'ARTISTES (PATCH183c puis 183e,
                       retours Maxou) : th h1 MOTEURS/ARTISTES/MOYENS, th small
                       sous-titres, cellules descriptives des tableaux, noms
                       .artist-name et numeros de la colonne centrale restent
                       ENTIEREMENT en typo par-portrait. Le standard des
                       tableaux se limite aux paddings des th (position).
   3. GIFS           : /src/img/{id}/ (nft-*, cryptex-*, title.svg, favicon...)
   4. VIDEO MP4      : /src/vid/{id}/ (intro, cryptex-video)
   5. BORDURE DE SELECTION D'ARTISTE : style/epaisseur/couleur des cadres
                       div#selected.cursor et div.cursor (hover) — via cle CSS
                       config ou variables --selection-cursor-border /
                       --hover-cursor-border (defauts consommes par style.css).
                       La GEOMETRIE (centrage, compensation d'epaisseur) est
                       commune : main.js selected()/hover, formule PATCH176
                       generalisee, auto-adaptative via borderTopWidth.

   Toute cle CSS de config qui touche aux zones verrouillees ici est du legacy
   a supprimer en base (liste par portrait : chantier PATCH183).
   Frontieres responsive reprises du socle : regime desktop exact = media
   composee PATCH175 (tablette portrait 551-1000 = layout mobile) ; le popup
   cryptex garde sa frontiere historique propre a 760px.
   ========================================================================== */

/* ============================== REGIME DESKTOP =============================
   (min 551px hors tablette portrait — meme media composee que style.css:692) */
@media (min-width: 551px) and (not ((max-width: 1000px) and (min-height: 1000px) and (orientation: portrait))) {

    /* CVG-PATCH183e (retour Maxou tester vs prod) : les verrous typo des
       CELLULES descriptives (#motors td / #means td) sont retires a leur tour —
       la typo des tableaux est donc ENTIEREMENT par-portrait (prod 010101 =
       Roboto Mono 500, a conserver). Le standard des tableaux se reduit aux
       paddings des th (position des blocs). */
    /* CVG-PATCH183c (retour Maxou sur capture 010101) : les TITRES de colonnes
       (th h1 MOTEURS/ARTISTES/MOYENS + th small sous-titres) et la LISTE de la
       colonne ARTISTES (noms .artist-name, numeros td:first/last-child) restent
       en police PERSONNALISEE par portrait — leurs verrous typo sont retires du
       standard. Seule la POSITION (paddings des th) reste commune. */
    #motors thead th,
    #means thead th {
        padding: 51px 0 39px !important;
    }

    /* --- Colonne ARTISTES : position de l'en-tete commune ------------------- */
    #artists thead th {
        padding: 53px 0 57px !important;
    }
}

/* --- Cadres de selection et de survol : GEOMETRIE commune -------------------
   CVG-PATCH183e (retour Maxou) : centrage horizontal du PATCH173 generalise et
   verrouille — bat les compensations manuelles left/width/margin des configs
   (ex. Adiaf left:9px!important). Le STYLE de bordure (couleur, epaisseur,
   pointille/plein) reste par-portrait ; le centrage vertical est fait par
   main.js (selected()/hover, inline !important). Hors media query, comme la
   regle de base. */
#artistsScroll > div.cursor {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 96% !important;
}

@media (min-width: 551px) and (not ((max-width: 1000px) and (min-height: 1000px) and (orientation: portrait))) {

    /* --- Bloc titre : position commune -------------------------------------
       Typo/couleur du titre = identite (jamais touchees ici). */
    .header-content {
        margin-top: 15px !important;
        margin-bottom: 44px !important;
    }
    .upperTitle {
        font-family: Arial, sans-serif !important;
        font-size: 22px !important;
    }

    /* --- Lien PASSER de l'intro video --------------------------------------- */
    p.videoClick > a {
        font-family: 'Silkscreen', silkscreen, monospace !important;
        font-size: 37px !important;
    }
}

/* ============================== REGIME MOBILE ============================== */
@media (max-width: 550px) {
    p.videoClick > a {
        font-family: 'Silkscreen', silkscreen, monospace !important;
        font-size: 25px !important;
    }
}

/* ============ LIEN PASSER / SKIP : ZONE DE CLIC ET SURVOL =================
   CVG-PATCH225 (retour Maxou, capture prod /Mennour 2026-07-24). Trois demandes :
   (a) zone de clic PLUS GRANDE et entierement cliquable. Jusqu'ici seuls les
       glyphes fermaient l'intro : aucun handler n'existe sur #videoDiv ni sur
       #video1 (main.js ne fait que masquer le bloc, main.js:1808), et style.css
       elargissait la cible par un hack "padding asymetrique + marges negatives"
       (style.css:1460) qui ne debordait que vers la GAUCHE et le HAUT - rien a
       droite ni en bas, d'ou l'impression de cible minuscule.
   (b) FOND GRIS CLAIR au survol, pour que la zone se voie ;
   (c) lien un peu plus ELOIGNE du bord droit.

   Ecrit ici et non dans style.css pour deux raisons : cette feuille est chargee
   APRES le <style> de config back-office (ses regles battent donc les cles
   par-portrait), et son cache-buster n'est pas dispute par le chantier parallele
   en cours sur style.css.
   Hors media query a dessein : les deux blocs PASSER ci-dessus laissent un trou
   sur la TABLETTE PORTRAIT (551-1000px et hauteur >=1000px) qui ne matche ni le
   regime desktop ni le regime mobile ; la geometrie de la cible, elle, doit
   valoir partout.
   Contrat de separation (en-tete de fichier) : la GEOMETRIE est commune aux 9
   portraits, la TEINTE reste personnalisable - le fond de survol passe donc par
   var(--skip-hover-bg), un portrait peut poser sa propre valeur sans toucher
   cette feuille. */
p.videoClick {
    /* (c) mesure Playwright sur replique fidele de la cascade (1280px, config
       Mennour active) : AVANT, le glyphe s'arretait a 42px du bord ecran (30px
       de marge sur le <p> + 12px de marge de config sur le <a>). Avec 44px ici
       et les 26px de padding du lien ci-dessous, le glyphe passe a 70px et le
       rectangle de survol s'arrete a 44px : les DEUX sont plus loin du bord
       qu'avant, le fond de survol ne vient jamais lecher le bord de l'ecran. */
    margin-right: 44px !important;
}

p.videoClick > a {
    /* (a) la cible devient un vrai bloc : padding symetrique sur les 4 cotes et
       marges negatives du hack precedent neutralisees. */
    display: inline-block !important;
    padding: 18px 26px !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    background-color: transparent;
    transition: background-color .18s ease, color .18s ease;
    /* (d) NEUTRALISATION DE L'ANIMATION DE CONFIG. Le portrait Mennour pose en
       back-office, sur ce meme selecteur et en desktop uniquement :
           animation: revealDroiteGauche 2s steps(6, end) forwards
       dont les keyframes vont de clip-path: inset(0 100% 0 0) a inset(0 0 0 0).
       Le nom ment : l'encoche part de la DROITE et se resorbe, donc le mot se
       decouvre de GAUCHE A DROITE - S, puis K, puis I, puis P. C'est exactement
       ce que Maxou demande d'inverser. Deux raisons de plus de la couper : le
       steps(6) compte 6 crans pour les 4 lettres de SKIP (saccade et decalage
       visibles sur la capture), et le clip-path rogne AUSSI le fond de survol
       pendant les 2 premieres secondes, ce qui masquerait la demande (b).
       Sans effet sur l'apparition lettre par lettre ci-dessous : elle est portee
       par "> a > span", un selecteur different. */
    animation: none !important;
}

/* (b) survol. Regles SEPAREES a dessein : dans une liste de selecteurs non
   permissive, un :focus-visible inconnu du navigateur invaliderait AUSSI le
   :hover. Separes, un moteur ancien perd le focus mais garde le survol. */
p.videoClick > a:hover {
    background-color: var(--skip-hover-bg, rgba(255, 255, 255, .18));
}
p.videoClick > a:focus-visible {
    background-color: var(--skip-hover-bg, rgba(255, 255, 255, .18));
}

/* --- Apparition des lettres de DROITE A GAUCHE (P, puis I, puis K, puis S) ---
   main.js decoupe le libelle en <span> par lettre (fonction skipLetters, fin de
   fichier). nth-last-child = compte depuis la FIN : la derniere lettre part la
   premiere, et la regle vaut telle quelle pour SKIP (4 lettres) comme pour
   PASSER (6 lettres), sans distinguer la langue.
   fill-mode BACKWARDS et non forwards : pendant le seul delai d'attente la
   lettre emprunte l'etat "from" (invisible), puis retombe sur son style normal
   (opaque) une fois l'animation finie. Si le JS ne passe pas, s'il n'y a pas de
   span, ou si les animations sont desactivees, le texte reste VISIBLE et
   cliquable - le lien ne peut pas disparaitre. */
p.videoClick > a > span {
    display: inline-block;
    animation: skipLetterIn .2s ease-out backwards;
}
p.videoClick > a > span:nth-last-child(1) { animation-delay: .15s; }
p.videoClick > a > span:nth-last-child(2) { animation-delay: .29s; }
p.videoClick > a > span:nth-last-child(3) { animation-delay: .43s; }
p.videoClick > a > span:nth-last-child(4) { animation-delay: .57s; }
p.videoClick > a > span:nth-last-child(5) { animation-delay: .71s; }
p.videoClick > a > span:nth-last-child(6) { animation-delay: .85s; }

@keyframes skipLetterIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    p.videoClick > a > span {
        animation: none;
    }
}

/* ========================= POPUP CRYPTEX (player-modal) ====================
   Mise en page commune ; toutes les couleurs restent pilotees par les
   variables --cryptex-* et les cles config de couleur. Frontiere mobile
   historique du popup : 760px (style.css:2209), reprise telle quelle. */
#player-modal .model-content {
    height: 75% !important;
    width: 90% !important;
    padding: 10px !important;
    padding-top: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
}

/* CVG-PATCH183d (retour Maxou, capture ?cryptex 010101) : AUCUN verrou display
   ni flex sur les panneaux internes (#description, #yvd, #images, .modal-body).
   Le popup alterne ses etats (video seule / formulaire personnalise) en jouant
   sur leur visibilite, et les proportions (ex. description flex 0.8 de 010101)
   sont reglees par les configs : les forcer cassait la bascule d'etats
   (#images reapparaissait a cote de la video). Le standard se limite au CADRE. */
#player-modal .modal-body {
    padding: 0 !important;
    flex-direction: row-reverse !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
}

#player-modal #description {
    font-size: 14px !important;
}

#player-modal button {
    width: 100% !important;
    margin: 0 !important;
    line-height: 1 !important;
    padding: 5px !important;
}

div#order-buttons {
    margin-top: 10px !important;
    text-align: center !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
}

/* croix de fermeture : placee au meme endroit pour tous. Sa FORME reste
   par-portrait (image videoPopup.cross, ou croix CSS :before/:after avec
   .close img masque — BRM ; ne pas forcer l'affichage de l'img : double
   croix sinon). Billarant/010101 ont une croix CSS au content invalide,
   donc aucune croix visible : a reparer dans leurs configs (nettoyage base). */
#player-modal .modal-header > span.close:first-child {
    position: absolute !important;
    right: 5px !important;
    top: -20px !important;
    z-index: 1111111;
}

@media screen and (max-width: 760px) {
    #player-modal .model-content {
        width: 90% !important;
        top: 0 !important;
        height: 100% !important;
        padding: 0 10px !important;
    }

    /* CVG-PATCH219 : popup cryptex - empilage vertical sur mobile.
       PATCH183 (l.134) pose .modal-body en row-reverse SANS media mobile : la
       popup restait cote-a-cote sur telephone et le volet video #yvd devenait
       une colonne etroite pleine hauteur ou une video large se reduit a un
       filet (Mennour = invisible : config #yvd 56.25vw + video 8:3 ; Adiaf idem,
       #yvd=110px). On empile en colonne : video/image pleine largeur en haut,
       description/formulaire dessous. Regle APRES l.134 dans le fichier charge
       en dernier -> a specificite et !important egaux, l'ordre source gagne.
       Valide Playwright (webkit iPhone) sur Mennour/Adiaf/Boros/Stoschek, etats
       video ET formulaire personnalise (#yvd cache, #images pleine largeur :
       pas de regression "#images a cote de la video" de PATCH183d). */
    #player-modal .modal-body {
        flex-direction: column !important;
    }

    #player-modal #yvd,
    #player-modal #images {
        width: 100% !important;
    }

    #player-modal #yvd {
        flex: 0 0 auto !important;
        max-height: 42vh !important;
    }

    #player-modal #yvd iframe,
    #player-modal #yvd video {
        width: 100% !important;
        height: 100% !important;
    }
}
