/* ========================================================================== CVG-PATCH559 : MENNOUR TELEPHONE - LE MODE ROULEAUX (brief "mode rouleaux" v5 du 15.10.2026, prototype MennourMobile-v5). CVG-PATCH575 : sortie de portrait-standard.css dans ce fichier, partage par les portraits et la page d'accueil (brief "accueil telephone, mode rouleaux" v1, 2.1) ; les layouts des portraits le chargent juste apres portrait-standard.css (meme rang dans la cascade qu'avant). Restent dans portrait-standard.css les deux regles propres aux portraits : les popups devant la couche et le popup Cryptex (573). La couche #ap-rouleaux est construite par src/js/ap-rouleaux.js ; sans elle rien ne s'applique, hors body.ap-rouleaux. Mesures : px d'un ecran de 390 x --u (largeur / 390, pose par le script) ; filets de 1 px reel. Couleurs du brief, surchargeables par --ap-rouleaux-papier, -encre, -rouge, -gris, -gris-2, -filet (cle body). Polices deja chargees par la page : Bebas Neue (nombres), IBM Plex Mono (mots), IBM Plex Sans (definitions longues, 580), Silkscreen (PASSER). Ni ombre, ni arrondi, ni degrade, ni transition. ========================================================================== */ @media (max-width: 550px) { html.ap-rouleaux-html, body.ap-rouleaux { overflow: hidden !important; overscroll-behavior: none; } #ap-rouleaux { --u: 1px; --apr-c0: 0; --apr-papier: var(--ap-rouleaux-papier, #f5f3ee); --apr-ligne: #faf8f3; --apr-encre: var(--ap-rouleaux-encre, #212529); --apr-rouge: var(--ap-rouleaux-rouge, #c43a3a); --apr-g1: var(--ap-rouleaux-gris, #5a5856); --apr-g2: var(--ap-rouleaux-gris-2, #8a8884); --apr-filet: var(--ap-rouleaux-filet, #d2d0ca); --apr-filet-l: #e3e1db; --apr-bande: #e8e6e0; --apr-barres: #b9b7b1; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 11; overflow: hidden; margin: 0; padding: 0; background: var(--apr-papier); color: var(--apr-encre); font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-weight: 400; font-style: normal; font-size: calc(9 * var(--u)); line-height: normal; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; white-space: normal; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } #ap-rouleaux *, #ap-rouleaux *::before, #ap-rouleaux *::after { box-sizing: border-box; } #ap-rouleaux div, #ap-rouleaux span, #ap-rouleaux b, #ap-rouleaux i, #ap-rouleaux a, #ap-rouleaux button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none; float: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; transition: none; } #ap-rouleaux button { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: inherit; } #ap-rouleaux :focus { outline: none; } #ap-rouleaux :focus-visible { outline: 1px solid var(--apr-rouge); outline-offset: -1px; } #ap-rouleaux .apr-nb { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: .04em; } #ap-rouleaux .apr-x { visibility: hidden !important; } /* (1) bandeau, vues */ #ap-rouleaux .apr-tete { position: absolute; left: 0; right: 0; top: 0; height: calc(52 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u)); border-bottom: 1px solid var(--apr-filet); } #ap-rouleaux .apr-tete-g, #ap-rouleaux .apr-regle-titre { display: flex; flex-direction: column; gap: calc(5 * var(--u)); white-space: nowrap; } /* CVG-PATCH580 : le bandeau sur deux lignes pleine largeur, chacune alignee sur sa ligne de base - sur-titre | ARTISTPROFILER.ART (la marque flottait entre les deux lignes), titre | PAR MAXIME CHANSON (l'auteur, absent du bandeau depuis le 559) */ #ap-rouleaux .apr-tete-g { flex: 1 1 auto; min-width: 0; } #ap-rouleaux .apr-tete-l { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); min-width: 0; } #ap-rouleaux .apr-tete .s, #ap-rouleaux .apr-regle-titre .s { font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .22em; color: var(--apr-g2); } #ap-rouleaux .apr-tete .t, #ap-rouleaux .apr-regle-titre .t { font-size: calc(13 * var(--u)); line-height: calc(15 * var(--u)); letter-spacing: .2em; font-weight: 600; } /* 561 : plus present (10 / 500 avant) */ #ap-rouleaux .apr-tete-d, #ap-rouleaux .apr-tete-a { flex: none; font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .22em; color: var(--apr-g2); white-space: nowrap; } /* 580 : meme interlettrage que le sur-titre (.18em avant) */ #ap-rouleaux .apr-vue { position: absolute; left: 0; right: 0; top: calc(52 * var(--u)); bottom: calc(32 * var(--u)); display: flex; flex-direction: column; } #ap-rouleaux[data-vue="main"] .apr-annexe, #ap-rouleaux[data-vue="arbre"] .apr-main, #ap-rouleaux[data-vue="arbre"] .apr-grille, #ap-rouleaux[data-vue="grille"] .apr-main, #ap-rouleaux[data-vue="grille"] .apr-arbre { visibility: hidden; pointer-events: none; } /* (2) les rouleaux : 392 px + la ligne d'etat 30 (564) ; ecran court, trois crans (304 + 30) */ #ap-rouleaux .apr-rls { flex: none; height: calc(392 * var(--u)); display: flex; } #ap-rouleaux.apr-compact { --apr-c0: 1; } #ap-rouleaux.apr-compact .apr-rls { height: calc(304 * var(--u)); } #ap-rouleaux .apr-rl { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; } #ap-rouleaux .apr-rl.moy { border-left: 1px solid var(--apr-filet); } #ap-rouleaux .apr-rl-tete { flex: none; height: calc(44 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); cursor: pointer; touch-action: manipulation; } #ap-rouleaux .apr-rl-l1 { display: flex; justify-content: space-between; align-items: baseline; } #ap-rouleaux .apr-rl-mot { font-size: calc(9 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-rl-arbre { padding: calc(8 * var(--u)); margin: calc(-8 * var(--u)); font-size: calc(7.5 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .22em; color: var(--apr-g2); white-space: nowrap; } #ap-rouleaux .apr-rl-chemin { font-size: calc(var(--apr-f, 8) * var(--u)); line-height: calc(11 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-fen { flex: none; position: relative; height: calc((220 - 88 * var(--apr-c0)) * var(--u)); overflow: hidden; touch-action: none; cursor: ns-resize; } #ap-rouleaux .apr-fen-bande { position: absolute; left: 0; right: 0; top: calc((88 - 44 * var(--apr-c0)) * var(--u)); height: calc(44 * var(--u)); background: var(--apr-bande); } #ap-rouleaux .apr-fen-f { position: absolute; left: 0; right: 0; height: 1px; background: var(--apr-filet); pointer-events: none; } #ap-rouleaux .apr-fen-f.h { top: calc((88 - 44 * var(--apr-c0)) * var(--u)); } #ap-rouleaux .apr-fen-f.b { top: calc((131 - 44 * var(--apr-c0)) * var(--u)); } #ap-rouleaux .apr-cran { position: absolute; left: 0; right: 0; top: calc((var(--i) - var(--apr-c0)) * 44 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); } #ap-rouleaux .apr-cran.p0 { --i: 0; } #ap-rouleaux .apr-cran.p1 { --i: 1; } #ap-rouleaux .apr-cran.p2 { --i: 2; } #ap-rouleaux .apr-cran.p3 { --i: 3; } #ap-rouleaux .apr-cran.p4 { --i: 4; } #ap-rouleaux .apr-cran.eclair { background: var(--apr-filet); } #ap-rouleaux .apr-cran > .apr-nb { width: calc(26 * var(--u)); flex: none; padding-top: calc(2 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); color: var(--apr-g1); } /* 580 : 16 (18 avant, un peu grands) */ #ap-rouleaux .apr-cran.p2 > .apr-nb { color: var(--apr-rouge); } #ap-rouleaux .apr-cran-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-cran .l3 { font-size: calc(var(--apr-f, 8) * var(--u)); line-height: calc(11 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-cran .l4 { font-size: calc(var(--apr-f, 11) * var(--u)); line-height: calc(14 * var(--u)); font-weight: 500; color: var(--apr-g2); } /* 580 : 11 (12 avant : les capitales paraissaient etirees) */ #ap-rouleaux .apr-cran.p1 .l4, #ap-rouleaux .apr-cran.p3 .l4 { color: var(--apr-g1); } #ap-rouleaux .apr-cran.p2 .l4 { color: var(--apr-encre); } #ap-rouleaux .apr-rep { flex: none; margin: calc(10 * var(--u)) calc(14 * var(--u)) 0; } #ap-rouleaux .apr-rep-b { display: flex; justify-content: space-between; align-items: flex-end; height: calc(21 * var(--u)); border-bottom: 1px solid var(--apr-filet); } #ap-rouleaux .apr-rep-b i { display: block; flex: none; width: calc(2 * var(--u)); height: calc(min(var(--h), 21) * var(--u)); background: var(--apr-barres); } #ap-rouleaux .apr-rep-b i.r { background: var(--apr-rouge); } #ap-rouleaux .apr-rep-l { margin-top: calc(3 * var(--u)); font-size: calc(6.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .18em; color: var(--apr-g2); white-space: nowrap; } #ap-rouleaux .apr-rep-l .l1 { font-size: calc(var(--apr-f, 6.5) * var(--u)); } #ap-rouleaux .apr-rep-l .l2 { height: calc(9 * var(--u)); } #ap-rouleaux .apr-def { flex: none; margin: calc(5 * var(--u)) calc(14 * var(--u)) 0; height: calc(70 * var(--u)); overflow: hidden; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: calc(var(--apr-f, 10) * var(--u)); line-height: calc(14 * var(--u)); text-wrap: pretty; } /* 580 : la definition longue en Plex Sans (meme dessin que la Plex Mono des mots, chasse proportionnelle : lisible, ne s'etale plus) ; chargee par les layouts des portraits et la page d'accueil */ #ap-rouleaux .apr-def .r { color: var(--apr-g2); } /* (2 bis) la ligne d'etat (564) : 30 px sous les definitions, nombres en Bebas 11 rouge, retour a la galerie en encre */ #ap-rouleaux .apr-etat { flex: none; height: calc(30 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .22em; color: var(--apr-g1); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-etat .apr-nb { font-size: calc(11 * var(--u)); line-height: calc(9 * var(--u)); color: var(--apr-rouge); } #ap-rouleaux .apr-etat-pt { display: block; flex: none; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--apr-rouge); } #ap-rouleaux .apr-etat-retour { height: 100%; display: flex; align-items: center; color: var(--apr-encre); } /* (3) la barre TRIER et la liste */ #ap-rouleaux .apr-trier { flex: none; height: calc(32 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u)); padding: 0 calc(14 * var(--u)); border-top: 1px solid var(--apr-filet); border-bottom: 1px solid var(--apr-filet); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-tri, #ap-rouleaux .apr-b { height: 100%; display: flex; align-items: center; } #ap-rouleaux .apr-tri > span, #ap-rouleaux .apr-b > span { padding: calc(2 * var(--u)) 0; border-bottom: 1px solid transparent; } #ap-rouleaux .apr-tri.on, #ap-rouleaux .apr-b.on { color: var(--apr-encre); } #ap-rouleaux .apr-tri.on > span, #ap-rouleaux .apr-b.on > span { border-bottom-color: var(--apr-rouge); } #ap-rouleaux .apr-liste, #ap-rouleaux .apr-vc { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; } #ap-rouleaux .apr-liste::-webkit-scrollbar, #ap-rouleaux .apr-vc::-webkit-scrollbar { display: none; } #ap-rouleaux .apr-gt { height: calc(30 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 calc(14 * var(--u)) calc(7 * var(--u)); border-bottom: 1px solid var(--apr-filet-l); font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); } #ap-rouleaux .apr-gt .t { letter-spacing: .22em; color: var(--apr-rouge); } #ap-rouleaux .apr-gt .n { color: var(--apr-g2); } #ap-rouleaux .apr-art { background: var(--apr-ligne); border-bottom: 1px solid var(--apr-filet-l); cursor: pointer; } #ap-rouleaux .apr-art.ouvert { background: var(--apr-bande); } #ap-rouleaux .apr-art-l { height: calc(30 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)); } #ap-rouleaux .apr-art-nom { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(11 * var(--u)); } #ap-rouleaux .apr-art-nom b, #ap-rouleaux .apr-g-nom b { font-weight: 500; color: var(--apr-encre); } #ap-rouleaux .apr-art-nom span, #ap-rouleaux .apr-g-nom span { color: var(--apr-g1); text-transform: uppercase; } #ap-rouleaux .apr-art-n { width: calc(18 * var(--u)); flex: none; padding-top: calc(1 * var(--u)); text-align: right; font-size: calc(14 * var(--u)); line-height: calc(14 * var(--u)); color: var(--apr-g1); } #ap-rouleaux .apr-art-n.r { color: var(--apr-rouge); } #ap-rouleaux .apr-art-o { display: none; flex-direction: column; gap: calc(4 * var(--u)); padding: 0 calc(14 * var(--u)) calc(9 * var(--u)); white-space: nowrap; overflow: hidden; color: var(--apr-g1); } #ap-rouleaux .apr-art.ouvert .apr-art-o { display: flex; } #ap-rouleaux .apr-art-p { font-size: calc(var(--apr-f, 8) * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .1em; } #ap-rouleaux .apr-art-p .apr-nb, #ap-rouleaux .apr-g-info .apr-nb { font-size: calc(11 * var(--u)); color: var(--apr-rouge); } #ap-rouleaux .apr-art-page { align-self: flex-start; padding: calc(4 * var(--u)) 0; margin: calc(-2 * var(--u)) 0 calc(-4 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--apr-encre); } #ap-rouleaux .apr-leg { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(11 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); } #ap-rouleaux .apr-pied, #ap-rouleaux .apr-sig { padding: 0 calc(14 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(13 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); } #ap-rouleaux .apr-pied .apr-nb { font-size: calc(11 * var(--u)); } #ap-rouleaux .apr-pied .apr-nb.r { color: var(--apr-rouge); } #ap-rouleaux .apr-sig { padding-top: calc(3 * var(--u)); padding-bottom: calc(18 * var(--u)); text-transform: uppercase; } /* (4) la barre du bas */ #ap-rouleaux .apr-barre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(32 * var(--u)); display: flex; align-items: stretch; justify-content: space-between; padding: 0 calc(14 * var(--u)); border-top: 1px solid var(--apr-filet); background: var(--apr-papier); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } /* (5) l'arbre (561 : il se dessine - troncs et branches en absolus, fil rouge par-dessus) et la grille */ #ap-rouleaux .apr-vt { flex: none; height: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u)); border-bottom: 1px solid var(--apr-filet); } #ap-rouleaux .apr-vt-t { font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .22em; color: var(--apr-rouge); white-space: nowrap; } #ap-rouleaux .apr-vt-r { height: 100%; display: flex; align-items: center; padding-left: calc(14 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-arbre .apr-vc { position: relative; padding-bottom: calc(16 * var(--u)); } #ap-rouleaux .apr-al { position: absolute; display: block; width: 1px; height: 0; background: var(--apr-filet); pointer-events: none; } #ap-rouleaux .apr-al.h { height: 1px; } #ap-rouleaux .apr-al.r { background: var(--apr-rouge); z-index: 1; } #ap-rouleaux .apr-tn.ch { color: var(--apr-encre); } #ap-rouleaux .apr-tn { font-size: calc(8 * var(--u)); line-height: calc(11 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-tn.n1 { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)); font-weight: 500; } #ap-rouleaux .apr-tn.n1.f { border-top: 1px solid var(--apr-filet-l); } #ap-rouleaux .apr-tn.n2 { padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(2 * var(--u)) calc(26 * var(--u)); } #ap-rouleaux .apr-tn.n3 { padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(38 * var(--u)); } #ap-rouleaux .apr-tf { margin-left: calc(48 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); background: var(--apr-ligne); border-bottom: 1px solid var(--apr-filet-l); cursor: pointer; } #ap-rouleaux .apr-tf.sel { background: var(--apr-bande); } #ap-rouleaux .apr-tf-l { display: flex; align-items: baseline; gap: calc(4 * var(--u)); } #ap-rouleaux .apr-tf .num { width: calc(26 * var(--u)); flex: none; font-size: calc(14 * var(--u)); line-height: calc(14 * var(--u)); color: var(--apr-g1); } #ap-rouleaux .apr-tf.sel .num { color: var(--apr-rouge); } #ap-rouleaux .apr-tf .nom { flex: 1 1 auto; min-width: 0; font-size: calc(11 * var(--u)); font-weight: 500; } #ap-rouleaux .apr-tf .cpt { font-size: calc(11 * var(--u)); color: var(--apr-g2); } #ap-rouleaux .apr-tf-d { margin: calc(3 * var(--u)) 0 0 calc(30 * var(--u)); font-size: calc(9.5 * var(--u)); line-height: calc(14 * var(--u)); text-wrap: pretty; } #ap-rouleaux .apr-tf-d .r { color: var(--apr-g2); } #ap-rouleaux .apr-gc { width: calc(311 * var(--u)); margin: 0 auto; padding: calc(20 * var(--u)) 0 calc(16 * var(--u)); } #ap-rouleaux .apr-g-sens { display: flex; justify-content: space-between; margin-bottom: calc(6 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); } #ap-rouleaux .apr-g { cursor: pointer; touch-action: manipulation; } #ap-rouleaux .apr-g-r { display: flex; gap: var(--u); margin-bottom: var(--u); } #ap-rouleaux .apr-g-r i { display: block; flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--apr-bande); } #ap-rouleaux .apr-g-r i.c0.x { background: var(--apr-filet); } #ap-rouleaux .apr-g-r i.c1 { background: var(--apr-g2); } #ap-rouleaux .apr-g-r i.c2 { background: var(--apr-encre); } #ap-rouleaux .apr-g-r i.g { background: var(--apr-rouge); } #ap-rouleaux .apr-g-info { margin-top: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-g-noms { margin-top: calc(8 * var(--u)); border-top: 1px solid var(--apr-filet-l); } #ap-rouleaux .apr-g-nom { height: calc(28 * var(--u)); line-height: calc(27 * var(--u)); padding: 0 calc(8 * var(--u)); background: var(--apr-ligne); border-bottom: 1px solid var(--apr-filet-l); font-size: calc(11 * var(--u)); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-g-vide { height: calc(28 * var(--u)); display: flex; align-items: center; padding: 0 calc(8 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); } /* (6) l'arrivee (563 : le prelude revient ; 565 : plus doux ; 567 : la ligne descend et decouvre la page posee) */ #ap-rouleaux .apr-arr { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; } #ap-rouleaux.apr-arrivee .apr-arr { display: block; } /* 567 : le papier que la ligne de balayage retire (sous le calque d'arrivee, au-dessus de la page deja posee) */ #ap-rouleaux .apr-masque { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; background: var(--apr-papier); pointer-events: none; } #ap-rouleaux.apr-arrivee .apr-masque { display: block; } #ap-rouleaux .apr-regle { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: 50%; } #ap-rouleaux .apr-regle-titre { position: absolute; left: 0; top: calc(-44 * var(--u)); } #ap-rouleaux .apr-regle-traits { display: flex; justify-content: space-between; align-items: flex-end; height: calc(var(--apr-rh, 10) * var(--u)); border-bottom: 1px solid var(--apr-filet); } /* 567 : la ligne de base de la regle (celle des repartitions) */ /* 565 / 567 : chaque trait se dresse sur la ligne de base en 100 ms, chaque numero nait en fondu de 100 ms (le brief tolere 120 ms) */ #ap-rouleaux .apr-regle-traits i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .1s linear; } #ap-rouleaux .apr-regle-traits i.vu { transform: scaleY(1); } #ap-rouleaux .apr-regle-nums > span { opacity: 0; transition: opacity .1s linear; } #ap-rouleaux .apr-regle-nums > span.vu { opacity: 1; } #ap-rouleaux .apr-regle-traits, #ap-rouleaux .apr-regle-nums { padding: 0 calc(var(--apr-rm, 31) * var(--u)); } /* 565 : traits plus rapproches (regle de 300 sur 362) */ #ap-rouleaux .apr-regle-traits i, #ap-rouleaux .apr-moitie i { display: block; flex: none; width: calc(2 * var(--u)); height: 100%; background: var(--apr-barres); } #ap-rouleaux .apr-regle-nums { display: flex; justify-content: space-between; margin-top: calc(5 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(9 * var(--u)); color: var(--apr-g2); } #ap-rouleaux .apr-regle-nums > span { width: calc(2 * var(--u)); display: flex; justify-content: center; white-space: nowrap; } #ap-rouleaux .apr-moitie { position: absolute; display: flex; justify-content: space-between; border-bottom: 1px solid var(--apr-filet); } #ap-rouleaux .apr-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--apr-encre); } /* 567 : une ligne d'encre */ #ap-rouleaux .apr-passer { position: absolute; right: calc(2 * var(--u)); bottom: calc(36 * var(--u)); padding: calc(8 * var(--u)); pointer-events: auto; font-family: 'Silkscreen', monospace; font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: 0; color: var(--apr-encre); } } /* 565 : mouvement reduit, pas de fondu sur la regle du prelude */ @media (max-width: 550px) and (prefers-reduced-motion: reduce) { #ap-rouleaux .apr-regle-traits i, #ap-rouleaux .apr-regle-nums > span { transition: none; } } /* hors telephone (fenetre agrandie avant le rechargement) : rien */ @media (min-width: 551px) { #ap-rouleaux { display: none !important; } } /* ========================================================================== CVG-PATCH578 : L'ACCUEIL AU TELEPHONE EN MODE ROULEAUX (brief "accueil telephone, mode rouleaux" v1 du 15.10.2026, prototype Claude Design B, docs/accueil-telephone). La couche montee par src/js/ap-rouleaux-accueil.js porte la classe apr-accueil : rien ici ne touche les portraits. Mesures du prototype (ecran de 390 x --u). PASSER en Silkscreen : un sous-ensemble de 3 Ko (les lettres de PASSER et SKIP ; police SIL Open Font License), incorpore pour que l'accueil n'ajoute aucune requete de police (recette du brief : poids). ========================================================================== */ @font-face { font-family: 'AP Silkscreen'; font-style: normal; font-weight: 400; font-display: block; src: url(data:font/woff2;base64,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) format('woff2'); } @media (max-width: 550px) { /* (1) l'en-tete (64) : la ligne de 42 (menu, mot-marque, loupe, filtre, FR / EN), puis la phrase ; les vues dessous, sans barre */ #ap-rouleaux.apr-accueil .apr-tete { display: block; height: calc(64 * var(--u)); padding: 0; } #ap-rouleaux.apr-accueil .apr-vue { top: calc(64 * var(--u)); bottom: 0; } #ap-rouleaux .apr-acc-l1 { height: calc(42 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(14 * var(--u)); } #ap-rouleaux .apr-acc-menu { width: calc(18 * var(--u)); height: calc(42 * var(--u)); flex: none; display: flex; flex-direction: column; justify-content: center; gap: calc(4 * var(--u)); color: var(--apr-encre); } #ap-rouleaux .apr-acc-menu i { display: block; height: 1.4px; background: currentColor; } #ap-rouleaux .apr-acc-marque { flex: 1 1 auto; min-width: 0; padding-left: calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: .2em; font-weight: 500; white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-acc-loupe, #ap-rouleaux .apr-acc-filtre { position: relative; width: calc(22 * var(--u)); height: calc(42 * var(--u)); flex: none; color: var(--apr-encre); } #ap-rouleaux .apr-acc-loupe.on, #ap-rouleaux .apr-acc-filtre.on { color: var(--apr-rouge); } #ap-rouleaux .apr-acc-loupe i, #ap-rouleaux .apr-acc-filtre i { position: absolute; display: block; } #ap-rouleaux .apr-acc-loupe .o { left: calc(3 * var(--u)); top: calc(14 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border: 1.4px solid currentColor; border-radius: 50%; } #ap-rouleaux .apr-acc-loupe .l { left: calc(12 * var(--u)); top: calc(23 * var(--u)); width: calc(6 * var(--u)); height: 1.4px; background: currentColor; transform: rotate(45deg); transform-origin: 0 50%; } #ap-rouleaux .apr-acc-filtre .l1, #ap-rouleaux .apr-acc-filtre .l2 { left: calc(2 * var(--u)); right: calc(2 * var(--u)); height: 1.4px; background: currentColor; } #ap-rouleaux .apr-acc-filtre .l1 { top: calc(17 * var(--u)); } #ap-rouleaux .apr-acc-filtre .l2 { top: calc(25 * var(--u)); } #ap-rouleaux .apr-acc-filtre .c1, #ap-rouleaux .apr-acc-filtre .c2 { width: calc(5 * var(--u)); height: calc(6.4 * var(--u)); border: 1.4px solid currentColor; background: var(--apr-papier); } #ap-rouleaux .apr-acc-filtre .c1 { left: calc(5 * var(--u)); top: calc(14.5 * var(--u)); } #ap-rouleaux .apr-acc-filtre .c2 { left: calc(12 * var(--u)); top: calc(22.5 * var(--u)); } #ap-rouleaux .apr-acc-lang { flex: none; font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); white-space: pre; } #ap-rouleaux .apr-acc-lang a { display: inline-block; padding: calc(14 * var(--u)) 0; color: var(--apr-g2); } #ap-rouleaux .apr-acc-lang a.on { color: var(--apr-encre); } #ap-rouleaux .apr-acc-phrase { padding: 0 calc(14 * var(--u)); font-size: calc(7.5 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .2em; color: var(--apr-g1); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-acc-phrase .apr-nb, #ap-rouleaux .apr-acc-rt-p .apr-nb { font-size: calc(11 * var(--u)); letter-spacing: .04em; color: var(--apr-encre); } /* le tiroir du menu (_MobileNav), sorti de la page par l'adaptateur : ferme, son ombre debordait sur le bord gauche */ body.ap-rouleaux:not(.mnav-open) > #mnavDrawer { box-shadow: none; } /* (2) la bande (28) : TOUS LES ARTISTES . LA PLUS PEUPLEE ; la recherche ; le filtre */ #ap-rouleaux .apr-bande { flex: none; height: calc(28 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: 1px solid var(--apr-filet-l); white-space: nowrap; overflow: hidden; } #ap-rouleaux .apr-bd-g { font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .22em; color: var(--apr-g2); } #ap-rouleaux .apr-bd-d { height: 100%; display: flex; align-items: center; font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); letter-spacing: .18em; color: var(--apr-g1); white-space: pre; } #ap-rouleaux .apr-bd-d .apr-nb { font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .04em; } #ap-rouleaux .apr-bd-d .c, #ap-rouleaux .apr-bd-f .c { color: var(--apr-rouge); } #ap-rouleaux .apr-bd-d .n { color: var(--apr-encre); } #ap-rouleaux .apr-bd-f { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-bd-f .apr-nb { font-size: calc(12 * var(--u)); letter-spacing: .04em; } #ap-rouleaux .apr-bd-f b { font-weight: 500; color: var(--apr-encre); } #ap-rouleaux .apr-bd-x { flex: none; height: 100%; display: flex; align-items: center; font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); } #ap-rouleaux .apr-bd-q { flex: 1 1 auto; min-width: 0; height: calc(20 * var(--u)); overflow: hidden; border-bottom: 1px solid var(--apr-filet); } /* le champ : 16 px (iOS ne zoome pas sur le champ) ramenes a 11 par une echelle de 0,6875 */ #ap-rouleaux .apr-acc-q { display: block; width: 145.45%; height: calc(20 * var(--u) / .6875); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: 0; color: var(--apr-encre); transform: scale(.6875); transform-origin: 0 0; -webkit-user-select: text; user-select: text; } #ap-rouleaux .apr-acc-q::placeholder { color: var(--apr-g2); opacity: 1; } /* (3) la barre de tri : le compte (1 636 ARTISTES, 12 SUR 1 636), puis NOM MOTEUR MOYEN CARTE */ #ap-rouleaux.apr-accueil .apr-trier { justify-content: space-between; gap: calc(12 * var(--u)); } #ap-rouleaux .apr-compte { display: flex; align-items: baseline; gap: calc(5 * var(--u)); white-space: nowrap; } #ap-rouleaux .apr-compte .apr-nb { font-size: calc(14 * var(--u)); line-height: calc(14 * var(--u)); color: var(--apr-encre); } #ap-rouleaux .apr-compte .apr-nb.t { color: var(--apr-g1); } #ap-rouleaux .apr-tris { height: 100%; display: flex; gap: calc(14 * var(--u)); } /* (4) la liste : noms en capitales, VOIR SA PAGE a droite, AUCUN ARTISTE, les mentions legales en pied */ #ap-rouleaux.apr-accueil .apr-art-nom b, #ap-rouleaux.apr-accueil .apr-g-nom b { text-transform: uppercase; } #ap-rouleaux.apr-accueil .apr-art-page { align-self: flex-end; } #ap-rouleaux .apr-vide { height: calc(30 * var(--u)); display: flex; align-items: center; padding: 0 calc(14 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g2); } #ap-rouleaux .apr-legal { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--apr-g2); } #ap-rouleaux .apr-legal a { color: var(--apr-g2); } #ap-rouleaux .apr-legal .sep { margin: 0 calc(5 * var(--u)); } /* (5) la CARTE : densites (vide, 1-2, 3-5, 6-11, 12 et plus), la case la plus peuplee en rouge, la ligne de la case */ #ap-rouleaux.apr-accueil .apr-vt { height: calc(28 * var(--u)); border-bottom-color: var(--apr-filet-l); } #ap-rouleaux.apr-accueil .apr-gc { padding-top: calc(18 * var(--u)); } #ap-rouleaux .apr-g-r i.d1 { background: var(--apr-barres); } #ap-rouleaux .apr-g-r i.d2 { background: var(--apr-g2); } #ap-rouleaux .apr-g-r i.d3 { background: var(--apr-g1); } #ap-rouleaux .apr-g-r i.d4 { background: var(--apr-encre); } #ap-rouleaux.apr-accueil .apr-g-r i.g { background: var(--apr-rouge); } #ap-rouleaux .apr-g-ligne { margin-top: calc(14 * var(--u)); display: flex; align-items: baseline; gap: calc(6 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); white-space: nowrap; } #ap-rouleaux .apr-g-ligne .apr-nb { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); } #ap-rouleaux .apr-g-ligne .c { color: var(--apr-rouge); } #ap-rouleaux .apr-g-ligne .n { color: var(--apr-encre); } #ap-rouleaux.apr-accueil .apr-g-info { margin-top: calc(8 * var(--u)); } #ap-rouleaux.apr-accueil .apr-g-noms { margin-top: calc(10 * var(--u)); } /* (6) le panneau du filtre (MOTEUR, MOYEN, CASE des rouleaux) sous la ligne du menu, et son voile */ #ap-rouleaux .apr-acc-voile { position: absolute; left: 0; right: 0; top: calc(42 * var(--u)); bottom: 0; z-index: 7; } #ap-rouleaux .apr-acc-panneau { position: absolute; left: 0; right: 0; top: calc(42 * var(--u)); z-index: 8; background: var(--apr-papier); border-top: 1px solid var(--apr-filet); border-bottom: 1px solid var(--apr-filet); } #ap-rouleaux .apr-acc-p { width: 100%; height: calc(40 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: 1px solid var(--apr-filet-l); font-size: calc(9 * var(--u)); letter-spacing: .1em; color: var(--apr-g1); white-space: nowrap; text-align: left; } #ap-rouleaux .apr-acc-p:last-child { border-bottom: 0; } #ap-rouleaux .apr-acc-p .apr-nb { font-size: calc(13 * var(--u)); line-height: calc(13 * var(--u)); } #ap-rouleaux .apr-acc-p .n { color: var(--apr-rouge); } #ap-rouleaux .apr-acc-p .b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--apr-encre); } #ap-rouleaux .apr-acc-p .k { color: var(--apr-g2); } /* (7) le prelude : le mot-marque et la phrase au-dessus de la regle ; PASSER plus bas (pas de barre du bas) */ #ap-rouleaux.apr-accueil .apr-regle-titre { top: calc(-46 * var(--u)); gap: calc(6 * var(--u)); } #ap-rouleaux .apr-acc-rt-m { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: .2em; font-weight: 500; color: var(--apr-encre); } #ap-rouleaux .apr-acc-rt-p { font-size: calc(7.5 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: .2em; color: var(--apr-g1); } #ap-rouleaux.apr-accueil .apr-passer { bottom: calc(6 * var(--u)); font-family: 'AP Silkscreen', 'Silkscreen', monospace; } /* (8) CVG-PATCH579 : le nom d'un artiste est le lien de sa page (un toucher = sa page, comme la liste d'avant) ; il garde l'habit du nom (encre, prenom gris), le doigt pose le passe au rouge ; les nombres de la ligne l'ouvrent. CVG-PATCH579b : le lien prend toute la hauteur de la ligne (30 px de 390) et non les 14 px du texte : un doigt pose au-dessus ou au-dessous du nom ouvrait la ligne au lieu d'aller a la page (constate sur tester dans Chrome) ; le texte reste a la meme place au pixel (verifie : memes boites de glyphes avant et apres) */ #ap-rouleaux.apr-accueil a.apr-art-nom { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; align-self: stretch; line-height: calc(30 * var(--u)); } #ap-rouleaux.apr-accueil a.apr-art-nom:active b { color: var(--apr-rouge); } }