/* Visuel de nomination des Trophées du Padel.
   ---------------------------------------------------------------------------
   Un seul gabarit pour deux rendus : la carte affichée dans le tunnel de vote
   et le PNG 1080 × 1350 rasterisé par Chromium pour le partage. Ce que le
   votant voit est exactement ce que le nominé diffusera.

   Toutes les valeurs sont exprimées dans les pixels du gabarit 1080 × 1350,
   multipliés par --px. Cette unité vaut 1 % de la largeur du conteneur divisé
   par 10,8 : elle rend donc 1 px quand la carte fait 1080 de large, et se
   réduit d'autant sur un écran étroit. Aucune transformation, aucun script :
   la carte tient sa composition à n'importe quelle taille. */

.pq-cadre {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1080 / 1350;
    overflow: hidden;
    font-family: "Montserrat", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.pq-carte {
    --px: calc(1cqw / 10.8);
    position: absolute;
    inset: 0;
    color: #fff;
    background:
        radial-gradient(120% 90% at 88% 18%, var(--pq-fond2) 0%, transparent 62%),
        linear-gradient(155deg, var(--pq-fond1) 0%, var(--pq-fond3) 100%);
}

.pq-carte * { box-sizing: border-box; }

/* Les paragraphes de la carte sont des lignes de composition, pas du texte
   courant : la marge par defaut du navigateur, proportionnelle au corps,
   ajoutait ici plus de cent pixels au gabarit. */
.pq-carte p { margin: 0; }

/* Lueur chaude sur tout le bord de la photo, plus forte sous le portrait,
   là où le modèle concentre son bokeh (17 septembre 2026). */
.pq-halo {
    position: absolute;
    right: -20%;
    top: -6%;
    width: 70%;
    height: 112%;
    background:
        radial-gradient(40% 30% at 80% 72%, rgba(232, 180, 70, 0.42) 0%, rgba(212, 150, 40, 0.14) 55%, transparent 100%),
        radial-gradient(45% 55% at 85% 30%, rgba(212, 175, 55, 0.22) 0%, transparent 70%);
}

/* Une lumière : cœur clair, bord ambré. Posée devant le portrait en
   éclaircissement, elle en allume le bord sans le masquer. */
.pq-bulle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff4c9 0%, #f3d27e 38%, #d9a441 70%, rgba(200, 140, 40, 0.55) 100%);
    mix-blend-mode: screen;
    translate: -50% -50%;
}

/* Photo ------------------------------------------------------------------- */

.pq-photo {
    position: absolute;
    top: calc(-15 * var(--px));
    right: calc(-230 * var(--px));
    width: calc(815 * var(--px));
    height: calc(815 * var(--px));
    border-radius: 50%;
    border: calc(3 * var(--px)) solid #d8b756;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.42));
}

.pq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}

/* Encart de format attendu, tant que le visuel n'est pas fourni. */
.pq-attente {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--px));
    padding: calc(60 * var(--px));
    padding-right: calc(280 * var(--px));
    text-align: center;
}

.pq-carte-gauche .pq-attente {
    padding-right: calc(60 * var(--px));
    padding-left: calc(280 * var(--px));
}

.pq-attente-titre {
    color: rgba(255, 255, 255, 0.62);
    font-size: calc(30 * var(--px));
    font-weight: 600;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
}

/* Logo Awards ------------------------------------------------------------- */

.pq-logo {
    position: absolute;
    top: calc(48 * var(--px));
    left: calc(100 * var(--px));
    width: calc(340 * var(--px));
}

.pq-logo img { width: 100%; display: block; }

/* Colonne texte ----------------------------------------------------------- */

/* La colonne texte n'est pas empilee depuis le haut mais centree dans la
   bande qui separe le logo des blocs club et region (250 a 850). Un intitule
   long ou un nom en deux lignes s'y absorbe au lieu de pousser le bas de la
   carte.

   Centree, elle debordait pourtant par les deux bouts a la fois : l'etoile du
   bas passait sur « CLUB » alors qu'il restait quatre-vingts pixels libres
   sous le logo (remarque du 26 septembre 2026). La boite couvre donc toute la
   zone utile, du logo plus 30 aux blocs du bas moins 20 (168 a 883), et deux
   intercalaires la ramenent a la bande : ils grandissent a parts egales, ce
   qui centre la colonne exactement comme avant, puis retrecissent a parts
   egales (leurs facteurs de retrait sont croises avec leurs bases) jusqu'a ce
   que celui du bas soit epuise ; celui du haut prend alors seul le reste. Une
   carte qui tenait deja ne bouge pas d'un pixel. Au-dela de la zone, c'est le
   nom qui descend de corps, calcule par CardColumn. */
.pq-bloc {
    position: absolute;
    top: calc(168 * var(--px));
    bottom: calc(467 * var(--px));
    left: calc(46 * var(--px));
    width: calc(448 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.pq-bloc::before,
.pq-bloc::after { content: ""; }

.pq-bloc::before { flex: 1 33 calc(82 * var(--px)); }

.pq-bloc::after { flex: 1 82 calc(33 * var(--px)); }

.pq-surtitre {
    font-weight: 300;
    font-size: calc(72 * var(--px));
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pq-sous-surtitre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--px));
    margin-top: calc(8 * var(--px));
    color: #fff;
    font-size: calc(22 * var(--px));
    font-weight: 500;
    letter-spacing: 0.02em;
}

.pq-sous-surtitre::before,
.pq-sous-surtitre::after {
    content: "";
    width: calc(40 * var(--px));
    height: max(1px, calc(1 * var(--px)));
    background: rgba(255, 255, 255, 0.6);
}

/* Lauriers et intitulé du prix. */

.pq-prix {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(2 * var(--px));
    margin-top: calc(52 * var(--px));
}

.pq-prix svg {
    width: calc(90 * var(--px));
    height: auto;
    flex: none;
    display: block;
}

/* Les lauriers gardent leur taille, l'intitule prend ce qui reste. Ils sont
   dessines plus grands qu'ils ne comptent : comme sur le modele, leurs
   pointes debordent vers l'intitule sans lui retirer de largeur. */
.pq-prix > span { flex: none; }
.pq-carte:not(.pq-carte-annonce) .pq-prix svg { scale: 1.3; }
.pq-prix > div { flex: 1; min-width: 0; }

.pq-miroir { transform: scaleX(-1); flex: none; display: flex; }

.pq-ligne-fort,
.pq-ligne-normal,
.pq-ligne-or { text-transform: uppercase; }

.pq-ligne-fort {
    font-weight: 800;
    font-size: calc(38 * var(--px));
    letter-spacing: 0.02em;
    line-height: 1.08;
    background: linear-gradient(180deg, #fbf0cd 0%, #e2c16a 60%, #c49a36 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pq-ligne-normal {
    font-weight: 400;
    font-size: calc(25 * var(--px));
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Le corps de la ligne vedette est calcule d'apres sa longueur : voir
   NomineeCard::corpsDeLaVedette. */
.pq-ligne-or {
    font-weight: 800;
    font-size: calc(var(--pq-vedette, 104) * var(--px));
    line-height: 1;
    background: linear-gradient(180deg, #fbf0cd 0%, #d4af37 52%, #a8801f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Étoile de séparation. */

.pq-etoile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--px));
    margin: calc(56 * var(--px)) 0 calc(30 * var(--px));
}

/* La seconde etoile ferme le bloc : elle suit le nom de pres. */
.pq-nom + .pq-etoile { margin: calc(36 * var(--px)) 0 0; }

/* Composition serree, posee par CardColumn quand la colonne ne tiendrait pas
   sinon : 58 px repris sur l'air du prix et des etoiles, plutot que sur le
   corps du nom. */
.pq-serre .pq-prix { margin-top: calc(36 * var(--px)); }

.pq-serre .pq-etoile { margin: calc(36 * var(--px)) 0 calc(20 * var(--px)); }

.pq-serre .pq-nom + .pq-etoile { margin: calc(24 * var(--px)) 0 0; }

.pq-etoile span {
    /* Au moins un pixel : reduite a la taille d'un telephone, l'epaisseur
       tombait sous le pixel et le filet disparaissait par endroits. */
    height: max(1px, calc(2 * var(--px)));
    width: calc(92 * var(--px));
    background: linear-gradient(90deg, rgba(226, 193, 106, 0.2), rgba(226, 193, 106, 0.9), rgba(226, 193, 106, 0.2));
}

.pq-etoile svg { width: calc(26 * var(--px)); height: auto; flex: none; display: block; }

/* Identité. */

.pq-prenom {
    font-weight: 700;
    font-size: calc(50 * var(--px));
    letter-spacing: 0.02em;
    text-indent: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.pq-nom {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: calc(var(--pq-nom, 104) * var(--px));
    line-height: 1.02;
    letter-spacing: 0.01em;
    margin-top: calc(4 * var(--px));
    text-transform: uppercase;
    /* Le corps est calcule pour tenir dans la colonne ; la coupure n'est
       qu'un filet de securite, si une police de secours prend le relais. */
    overflow-wrap: break-word;
    background: linear-gradient(180deg, #fbf0cd 0%, #dcb94c 48%, #a8801f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Club et région ----------------------------------------------------------

   Deux colonnes calées à gauche, séparées d'un filet doré : le club avec son
   logo, son nom en condensé et sa ville ; la région avec son seul logo, qui
   porte déjà son nom. Relevé sur le modèle du 17 septembre 2026. */

.pq-pieds {
    position: absolute;
    left: calc(50 * var(--px));
    right: calc(50 * var(--px));
    bottom: calc(250 * var(--px));
    display: flex;
    align-items: stretch;
}

.pq-pied {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.pq-pied + .pq-pied {
    border-left: max(1px, calc(2 * var(--px))) solid rgba(226, 193, 106, 0.45);
    padding-left: calc(38 * var(--px));
    margin-left: calc(20 * var(--px));
}

/* Le club, plus bavard, prend plus de place que la région. */
.pq-pied-club { flex: 1.1; }

/* Seul de son espèce, un bloc se centre. Calé à gauche sans filet ni voisin,
   il flottait contre le bord et déséquilibrait tout le bas du visuel : c'est
   le cas de tout nominé qui a une région mais pas de club, ou l'inverse. */
.pq-pied:only-child { text-align: center; }

.pq-pied:only-child .pq-pied-tete,
.pq-pied:only-child .pq-pied-corps { justify-content: center; }

/* Les deux têtes ont la même hauteur, quelle que soit celle de leur
   pictogramme (23 septembre 2026). Sans ce plancher, le terrain de padel du
   club mesurait 38 px de haut et la carte de France de la région 47 : les deux
   intitulés ne partageaient pas leur ligne de base, et surtout les deux corps
   ne commençaient pas à la même hauteur, à neuf pixels près. */
.pq-pied-tete {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(14 * var(--px));
    color: #e7cf8a;
    font-size: calc(28 * var(--px));
    font-weight: 400;
    letter-spacing: 0.04em;
    /* Assez d'air pour que l'intitule ne touche pas un logo haut, comme
       celui d'un club (remarque du 17 septembre 2026). En espacement
       interieur : « .pq-carte p { margin: 0 } » l'emporte sur une marge, qui
       n'etait donc jamais appliquee. */
    padding-bottom: calc(30 * var(--px));
    min-height: calc(77 * var(--px));
    text-transform: uppercase;
}

.pq-pied-tete svg { width: calc(52 * var(--px)); height: auto; flex: none; display: block; }

/* Même bande pour les deux corps : le nom d'un club tient en 44 px, le logo
   d'une région en occupe 120, et le bloc de gauche pendait en haut de sa
   colonne pendant que celui de droite la remplissait. Le plancher les cale
   sur la même hauteur, et « align-items: center » centre le texte court en
   face du logo. */
.pq-pied-corps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(28 * var(--px));
    min-height: calc(120 * var(--px));
}

/* Même hauteur de logo des deux côtés, sans quoi les deux colonnes
   reprendraient des hauteurs différentes. « object-position » colle le logo à
   gauche : quand « max-width » borne sa boîte, « contain » le centrait dedans,
   et un logo presque carré, comme celui de Nouvelle-Aquitaine, se décalait
   de son propre intitulé. */
.pq-pied-corps img {
    height: calc(120 * var(--px));
    width: auto;
    max-width: calc(150 * var(--px));
    object-fit: contain;
    object-position: left center;
    display: block;
    flex: none;
}

/* Seul dans sa colonne, le logo de la région prend la largeur. */
.pq-pied-region .pq-pied-corps img {
    max-width: calc(300 * var(--px));
}

/* Logo recadre sur sa partie visible, a surface egale d'un logo a l'autre
   (26 septembre 2026, voir LogoFrame) : la boite fixe de 120 px faisait un
   logo carre deux fois plus gros qu'un logo en longueur. La boite ne montre
   que la partie visible ; l'image, plus grande, s'y decale de ses marges
   transparentes. --pq-logo-k reduit le tout en carre et a trois blocs. */
.pq-pied-logo {
    --k: calc(var(--pq-logo-k, 1) * var(--pq-logo-k3, 1) * var(--px));
    display: block;
    flex: none;
    overflow: hidden;
    width: calc(var(--lw) * var(--k));
    height: calc(var(--lh) * var(--k));
}

.pq-carte .pq-pied-corps .pq-pied-logo img {
    width: calc(var(--iw) * var(--k));
    height: calc(var(--ih) * var(--k));
    max-width: none;
    margin: calc(-1 * var(--dy) * var(--k)) 0 0 calc(-1 * var(--dx) * var(--k));
    object-fit: fill;
}

.pq-carte-carre { --pq-logo-k: 0.8; }

/* A trois blocs, le club n'a plus que 290 px pour son logo et son nom : le
   logo y descend davantage, le nom d'un corps, et l'ecart se resserre, sans
   quoi « V INDOMITUS PADEL » se coupait en plein mot. */
.pq-pieds:has(> .pq-pied:nth-child(3)) { --pq-logo-k3: 0.85; }

.pq-pieds:has(> .pq-pied:nth-child(3)) .pq-pied-club { --pq-logo-k3: 0.7; }

.pq-pieds:has(> .pq-pied:nth-child(3)) .pq-pied-club .pq-pied-corps { gap: calc(18 * var(--px)); }

.pq-pieds:has(> .pq-pied:nth-child(3)) .pq-pied-club .pq-pied-nom { font-size: calc(34 * var(--px)); }

.pq-pied-corps > div { min-width: 0; }

.pq-pied-nom {
    font-family: "Barlow Condensed", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: calc(42 * var(--px));
    line-height: 1.05;
    overflow-wrap: break-word;
}

/* Le site (stages et academies) : le domaine, cliquable a l'ecran, sans
   rien qui le distingue du nom d'un club sur le PNG. */
.pq-pied-nom a { color: inherit; text-decoration: none; }

/* Troisieme bloc, a cote d'un club et d'une region : une adresse ne se coupe
   bien nulle part (« v-indomitus- / padel.com »). Il prend plus de largeur et
   descend d'un corps, pour tenir sur une ligne. */
.pq-pied-site:nth-child(3) { flex: 1.35; }
.pq-pied-site:nth-child(3) .pq-pied-nom { font-size: calc(34 * var(--px)); }

/* Trois blocs : le logo de la region gardait sa largeur fixe et debordait de
   sa colonne jusque sur le filet, collant l'adresse du site contre lui
   (remarque du 25 septembre 2026). Il se borne desormais a sa colonne, et les
   filets se resserrent pour lui rendre de la place. */
.pq-pied-region .pq-pied-corps img { max-width: min(calc(300 * var(--px)), 100%); }

.pq-pieds:has(> .pq-pied:nth-child(3)) .pq-pied + .pq-pied {
    padding-left: calc(26 * var(--px));
    margin-left: calc(14 * var(--px));
}
.pq-pied-nom a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.pq-pied-ville {
    font-weight: 300;
    font-size: calc(28 * var(--px));
    line-height: 1.25;
    margin-top: calc(4 * var(--px));
}

/* Sans blocs club et région ------------------------------------------------
   Rien ne sépare alors le nom du bouton, et la colonne texte, calée sur une
   bande qui s'arrêtait au-dessus des blocs, laissait un vide de trois cents
   pixels. Elle descend donc jusqu'où ils s'arrêtaient. Une règle par format :
   la bande n'a pas la même hauteur dans les trois. */

.pq-sans-pieds .pq-bloc { bottom: calc(280 * var(--px)); }

.pq-carte-story.pq-sans-pieds .pq-bloc { bottom: calc(480 * var(--px)); }

.pq-carte-carre.pq-sans-pieds .pq-bloc { bottom: calc(200 * var(--px)); }

/* Sans blocs, rien a menager en bas : la colonne ne deborde que vers le haut. */
.pq-carte.pq-sans-pieds .pq-bloc::after { flex-basis: 0; }

/* Bouton ------------------------------------------------------------------ */

.pq-cta {
    position: absolute;
    left: calc(212 * var(--px));
    right: calc(212 * var(--px));
    /* Sans adresse dessous, le bouton descend a sa place du modele. */
    bottom: calc(58 * var(--px));
    height: calc(136 * var(--px));
    border-radius: calc(14 * var(--px));
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
    border: 0;
    /* Le cadre fin qui entoure le bouton sur le modèle. */
    outline: max(1px, calc(2 * var(--px))) solid rgba(226, 193, 106, 0.85);
    outline-offset: calc(12 * var(--px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--pq-encre);
    font-family: inherit;
    text-decoration: none;
}

.pq-cta-1 {
    font-weight: 300;
    font-size: calc(46 * var(--px));
    line-height: 1.1;
}

.pq-cta-2 {
    font-weight: 900;
    /* Corps calcule pour tenir dans le bouton : voir CardLines::corps. */
    font-size: calc(var(--pq-cta, 52) * var(--px));
    letter-spacing: 0.02em;
    line-height: 1.15;
}

/* Adresse du scrutin, sous le bouton --------------------------------------

   Elle existe pour Instagram, qui n'accepte aucun partage par lien : la carte
   y est publiée depuis la pellicule, et sans adresse écrite dessus celui qui
   la voit passer lit « VOTEZ POUR MOI ! » sans savoir où aller.

   Discrète mais lisible : elle doit se retaper de mémoire depuis un téléphone
   tenu à bout de bras, pas se deviner. D'où la capitale, l'interlettrage large
   et un or assez clair pour tenir sur les six univers. */
.pq-adresse {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(22 * var(--px));
    text-align: center;
    font-size: calc(22 * var(--px));
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 227, 181, 0.72);
}

/* L'annonce a un bouton plus haut et plus bas : son adresse descend d'autant. */
.pq-carte-annonce .pq-adresse {
    bottom: calc(30 * var(--px));
}

/* Le code à scanner ------------------------------------------------------

   Il existe pour Instagram, où la carte circule sans lien : on pointe son
   téléphone sur le post et on arrive sur le vote.

   Il se pose dans le coin opposé au logo, seule réserve assez large de la
   composition. Le bandeau du bas ne fait que quatre-vingt-seize pixels : un
   code qui y tiendrait ferait moins de deux pixels par module et ne se lirait
   plus une fois le visuel recompressé par les réseaux. Ici il en fait quatre.

   Tuile blanche, parce qu'un code doré sur fond sombre n'est pas un code : les
   lecteurs attendent du sombre sur du clair, et la plupart refusent l'inverse. */
.pq-qr {
    position: absolute;
    /* Sous la photo, du meme cote qu'elle, et non dans un coin haut.

       Le disque du portrait descend jusqu'a 790 (haut 40, diametre 750) et les
       blocs club et region commencent vers 980 : il reste entre les deux une
       reserve de deux cents pixels, la seule de la composition qui ne soit ni
       sur le visage ni sur la marque. Un code pose dans un coin haut tombait
       sur la photo, ce qui se voyait des qu'un vrai portrait remplacait
       l'encart de format. */
    top: calc(806 * var(--px));
    right: calc(86 * var(--px));
    width: calc(160 * var(--px));
    height: calc(160 * var(--px));
    padding: calc(6 * var(--px));
    border-radius: calc(14 * var(--px));
    background: #ffffff;
    box-shadow: 0 0 0 calc(2 * var(--px)) rgba(212, 175, 55, 0.45);
    display: block;
}

.pq-qr svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #0d0d0d;
}

/* Le code suit la photo : elle passe a gauche, il l'y suit. */
.pq-carte-gauche .pq-qr {
    right: auto;
    left: calc(86 * var(--px));
}

/* L'annonce n'a pas de portrait mais un fond pleine page, et tout y est
   centre : le code reprend le coin haut gauche, libre, le logo etant au
   milieu. Poser un code sur un fond d'ambiance ne gene personne ; le poser sur
   le visage d'un nomine, si. */
.pq-carte-annonce .pq-qr {
    top: calc(44 * var(--px));
    right: auto;
    left: calc(44 * var(--px));
}

/* Miroir : photo à gauche, texte à droite ---------------------------------- */

.pq-carte-gauche {
    background:
        radial-gradient(120% 90% at 12% 18%, var(--pq-fond2) 0%, transparent 62%),
        linear-gradient(155deg, var(--pq-fond1) 0%, var(--pq-fond3) 100%);
}

/* La lueur se retourne avec la composition, et ne se contente pas de changer
   de bord : ses degrades sont places pour un portrait a droite, et deplaces
   seuls ils se coupaient net au milieu du visuel (23 septembre 2026). */
.pq-carte-gauche .pq-halo { right: auto; left: -20%; transform: scaleX(-1); }
.pq-carte-gauche .pq-photo { right: auto; left: calc(-230 * var(--px)); }
.pq-carte-gauche .pq-bloc { left: auto; right: calc(46 * var(--px)); }
.pq-carte-gauche .pq-logo { left: auto; right: calc(100 * var(--px)); }

/* Annonce d'une catégorie -------------------------------------------------
   Second visuel des Trophées : il ouvre les votes sur les réseaux et ne nomme
   personne. Fond pleine page, tout centré, un titre qui s'adresse au public.
   Le reste — logo, intitulé du prix entre ses lauriers, étoiles, bouton d'or —
   vient des règles ci-dessus, partagées avec la carte d'un nominé. */

.pq-fond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sans fond fourni, le dégradé d'univers tient le décor et l'encart annonce
   le format attendu, comme la grille le fait pour les photos manquantes. */
.pq-fond-absent {
    position: absolute;
    top: calc(58 * var(--px));
    right: calc(58 * var(--px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(4 * var(--px));
    text-align: right;
}

.pq-fond-absent .pq-attente-titre { font-size: calc(24 * var(--px)); }

/* Un fond photographique n'est pas un décor : sans voile, le titre s'y perd. */
.pq-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.76) 0%,
        rgba(0, 0, 0, 0.60) 42%,
        rgba(0, 0, 0, 0.64) 70%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

/* La lueur de l'univers se recentre : rien ne tire plus l'oeil sur un côté. */
.pq-carte-annonce {
    background:
        radial-gradient(120% 80% at 50% 12%, var(--pq-fond2) 0%, transparent 60%),
        linear-gradient(160deg, var(--pq-fond1) 0%, var(--pq-fond3) 100%);
}

/* Le logo passe au centre et grandit : il n'a plus de photo à côté de lui. */
.pq-carte-annonce .pq-logo {
    top: calc(44 * var(--px));
    left: 50%;
    width: calc(500 * var(--px));
    translate: -50% 0;
}

/* La colonne devient pleine largeur, et se centre entre le logo et le bouton. */
.pq-carte-annonce .pq-bloc {
    top: calc(210 * var(--px));
    bottom: calc(300 * var(--px));
    left: calc(100 * var(--px));
    width: calc(880 * var(--px));
    justify-content: center;
}

/* Les intercalaires de la carte d'un nomine ne la concernent pas : elle reste
   centree dans sa bande, comme avant eux. */
.pq-carte-annonce .pq-bloc::before,
.pq-carte-annonce .pq-bloc::after { content: none; }

.pq-carte-annonce .pq-surtitre { font-size: calc(62 * var(--px)); }

.pq-carte-annonce .pq-prix { margin-top: calc(44 * var(--px)); }

.pq-carte-annonce .pq-prix svg { width: calc(104 * var(--px)); }

/* Titre de l'annonce : les trois mêmes niveaux que l'intitulé du prix, au
   corps de la pleine page. Celui de la ligne vedette est calculé pour tenir
   sur une seule ligne — voir CardLines::corps. */

.pq-annonce-titre .pq-ligne-fort {
    /* Le titre d'annonce garde sa premiere ligne en blanc : seul l'intitule
       du prix passe a l'or clair. */
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #fff;
    font-size: calc(48 * var(--px));
    letter-spacing: 0.04em;
}

.pq-annonce-titre .pq-ligne-normal {
    font-weight: 700;
    font-size: calc(38 * var(--px));
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.pq-annonce-titre .pq-ligne-or {
    font-family: "Playfair Display", Georgia, serif;
    font-size: calc(var(--pq-titre, 84) * var(--px));
    line-height: 1.08;
    margin: calc(8 * var(--px)) 0;
}

.pq-annonce-manque {
    color: rgba(255, 255, 255, 0.5);
    font-size: calc(34 * var(--px));
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: calc(26 * var(--px));
    border: calc(2 * var(--px)) dashed rgba(212, 175, 55, 0.45);
}

/* La lueur dorée est la matière du bas de visuel, là où la carte d'un nominé
   la garde au bord de la photo : elle est agrandie d'autant. */
.pq-carte-annonce .pq-bulle { scale: 1.7; }

/* Le bouton porte tout le bas du visuel : il est plus large et plus haut que
   celui d'une carte de nominé. */
.pq-carte-annonce .pq-cta {
    left: calc(168 * var(--px));
    right: calc(168 * var(--px));
    bottom: calc(84 * var(--px));
    height: calc(162 * var(--px));
    border-radius: calc(20 * var(--px));
}

/* Première ligne du bouton : sans-serif fine et capitales, quand celle d'une
   carte de nominé est une serif — « VOTEZ POUR » n'est pas une confidence. */
.pq-carte-annonce .pq-cta-1 {
    font-family: inherit;
    font-weight: 300;
    font-size: calc(48 * var(--px));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Story et carré (23 septembre 2026) ---------------------------------------
   Deux formats de plus pour le kit du nominé, obtenus en redistribuant les
   blocs sur la hauteur, jamais en les redimensionnant : --px vaut 1080e de la
   largeur, or les trois formats font 1080 de large. Les corps calculés par
   CardLines, la largeur de la colonne texte et celle du bouton restent donc
   exactement ceux de la carte, et rien ne peut déborder d'un format à l'autre.

   La carte 4:5 n'est touchée par aucune de ces règles : ses PNG en cache
   doivent rester identiques au pixel. */

/* Story 9:16 — la composition tient compte de l'interface d'Instagram, qui
   recouvre environ 250 px en haut (le compte) et 250 px en bas (la barre de
   réponse et les stickers). Rien d'utile n'y descend : le bouton d'or s'arrête
   au-dessus, le logo commence en dessous. C'est tout l'intérêt du format
   plein écran, et la première chose qu'une story ratée oublie. */
.pq-cadre-story { aspect-ratio: 1080 / 1920; }

/* Le logo tenait la taille qu'il a sur la carte, 340 px de large, alors que la
   story est 42 % plus haute et se regarde à bout de bras : il y paraissait
   minuscule. Il passe à 440 (remarque du 23 septembre 2026). */
.pq-carte-story .pq-logo {
    top: calc(200 * var(--px));
    left: calc(50 * var(--px));
    width: calc(440 * var(--px));
}

/* Elargi sans etre recentre, il debordait de 50 px vers le portrait : centre
   sur la colonne texte, comme sur la carte (26 septembre 2026). */
.pq-carte-story.pq-carte-gauche .pq-logo { left: auto; right: calc(50 * var(--px)); }

.pq-carte-story .pq-photo { top: calc(330 * var(--px)); }

/* Bande de 520 a 1160, zone de 356 (logo plus 40) a 1228 (blocs moins 22) :
   memes intercalaires que la carte, a d'autres cotes. */
.pq-carte-story .pq-bloc {
    top: calc(356 * var(--px));
    bottom: calc(692 * var(--px));
}

.pq-carte-story .pq-bloc::before { flex: 1 68 calc(164 * var(--px)); }

.pq-carte-story .pq-bloc::after { flex: 1 164 calc(68 * var(--px)); }

.pq-carte-story .pq-nom { font-size: calc(var(--pq-nom-story, var(--pq-nom, 104)) * var(--px)); }

/* Les blocs club et région se centrent dans leur colonne, chacun de part et
   d'autre du filet. Calés à gauche comme sur la carte, ils laissaient dans ce
   format large et vide deux textes courts échoués contre le bord, et le filet
   n'avait plus rien à séparer. */
.pq-carte-story .pq-pieds {
    bottom: calc(473 * var(--px));
    justify-content: center;
}

.pq-carte-story .pq-pied { text-align: center; }

.pq-carte-story .pq-pied-tete,
.pq-carte-story .pq-pied-corps { justify-content: center; }

/* Soixante-dix pixels séparaient le bouton des blocs du dessus : de quoi
   paraître collé, sur un format qui a de la hauteur à revendre. */
.pq-carte-story .pq-cta { bottom: calc(250 * var(--px)); }

/* Carré 1:1 — le fil LinkedIn et Facebook, et 270 px de moins que la carte.
   Les corps ne bougent pas : ce sont les marges qui se resserrent, dans la
   colonne texte comme autour d'elle, et le portrait qui se réduit. Un nom en
   trois lignes y tient, ce qui est le pire cas ; plus serré, la colonne
   passait sur le logo en haut et sur les blocs club et région en bas, sans
   qu'aucun débordement ne se signale — le bloc est centré, il déborde par les
   deux bouts à la fois. */
.pq-cadre-carre { aspect-ratio: 1080 / 1080; }

.pq-carte-carre .pq-logo {
    top: calc(26 * var(--px));
    left: calc(150 * var(--px));
    width: calc(240 * var(--px));
}

/* Reduit sans etre recentre, il se calait 50 px a gauche de la colonne texte
   (remarque du 26 septembre 2026). */
.pq-carte-carre.pq-carte-gauche .pq-logo { left: auto; right: calc(150 * var(--px)); }

.pq-carte-carre .pq-photo {
    top: calc(-30 * var(--px));
    right: calc(-200 * var(--px));
    width: calc(700 * var(--px));
    height: calc(700 * var(--px));
}

/* Aucune reserve ici : la colonne se centre entre le logo plus 22 et les
   blocs moins 16, et CardColumn la fait tenir dans cet intervalle. */
.pq-carte-carre .pq-bloc {
    top: calc(111 * var(--px));
    bottom: calc(370 * var(--px));
}

.pq-carte-carre .pq-bloc::before,
.pq-carte-carre .pq-bloc::after { flex: 1 1 0; }

.pq-carte-carre .pq-prix { margin-top: calc(28 * var(--px)); }

.pq-carte-carre .pq-etoile { margin: calc(30 * var(--px)) 0 calc(18 * var(--px)); }

.pq-carte-carre .pq-nom + .pq-etoile { margin: calc(20 * var(--px)) 0 0; }

.pq-carte-carre.pq-serre .pq-prix { margin-top: calc(20 * var(--px)); }

.pq-carte-carre.pq-serre .pq-etoile { margin: calc(20 * var(--px)) 0 calc(12 * var(--px)); }

.pq-carte-carre.pq-serre .pq-nom + .pq-etoile { margin: calc(14 * var(--px)) 0 0; }

/* Le carré est le format le plus serré : 270 px de moins que la carte pour la
   même matière. Sa tête de bloc se resserre et son bouton perd seize pixels,
   de quoi rendre au bouton l'air qui lui manquait au-dessus. */
.pq-carte-carre .pq-pieds { bottom: calc(195 * var(--px)); }

.pq-carte-carre .pq-pied-tete {
    min-height: calc(60 * var(--px));
    padding-bottom: calc(16 * var(--px));
}

.pq-carte-carre .pq-pied-corps { min-height: calc(96 * var(--px)); }

/* Les logos des blocs club et région portent à eux seuls quarante pixels de
   la hauteur de la bande : réduits, ils rendent au nom la place qui lui
   manquait. Mesuré, pas estimé : le contenu de la colonne fait 639 px sur ce
   format, pour 622 px disponibles avant correction. */
.pq-carte-carre .pq-pied-corps img { height: calc(96 * var(--px)); }

/* Le nom descend de 12 % sur ce format, et lui seul : trois lignes de
   Playfair Black à 104 px ne tiennent pas dans un carré sans passer sur les
   blocs du bas. La largeur, elle, ne change pas, donc le calcul de CardLines
   reste valable — il borne la largeur, jamais la hauteur. */
.pq-carte-carre .pq-nom { font-size: calc(var(--pq-nom-carre, var(--pq-nom, 104)) * 0.86 * var(--px)); }

.pq-carte-carre .pq-cta {
    bottom: calc(32 * var(--px));
    height: calc(120 * var(--px));
}

/* Affiche A4 (23 septembre 2026) -------------------------------------------
   L'affiche du kit, a imprimer et a punaiser au club. Elle reprend la carte
   telle quelle, portrait, lumieres, etoiles, blocs club et region et bouton
   d'or, parce qu'une affiche composee a part faisait pauvre a cote des trois
   visuels (remarque du 23 septembre 2026). Elle ne s'en distingue que par sa
   bande du bas, qui porte le code a scanner.

   1080 de large comme les autres, donc memes corps : l'A4 fait 1527 de haut
   dans cette unite (1080 × 297 / 210). Le haut de la carte ne bouge pas d'un
   pixel jusqu'aux blocs club et region, qui s'arretent a 1100 ; la bande du
   code occupe les quatre cents pixels gagnes dessous. */
.pq-cadre-affiche { aspect-ratio: 210 / 297; }

.pq-carte-affiche .pq-bloc { bottom: calc(644 * var(--px)); }

.pq-carte-affiche.pq-sans-pieds .pq-bloc { bottom: calc(457 * var(--px)); }

.pq-carte-affiche .pq-pieds { bottom: calc(427 * var(--px)); }

/* Le bouton passe du cote du texte, le code du cote du portrait : chacun
   reste sous sa colonne. Plus etroit que sur la carte, le bouton garde le
   corps calcule pour 580 px et le ramene d'autant. */
.pq-carte-affiche .pq-cta {
    left: calc(70 * var(--px));
    right: calc(440 * var(--px));
    top: calc(1180 * var(--px));
    bottom: auto;
    height: calc(128 * var(--px));
}

.pq-carte-affiche .pq-cta-1 { font-size: calc(40 * var(--px)); }
.pq-carte-affiche .pq-cta-2 { font-size: calc(var(--pq-cta, 52) * 0.88 * var(--px)); }

/* Le code, et le geste a faire. Tuile blanche, jamais l'inverse : les lecteurs
   refusent un code clair sur fond sombre. 300 px font 58 mm une fois
   imprime, de quoi viser depuis le bord du terrain. */
.pq-affiche-code {
    position: absolute;
    top: calc(1150 * var(--px));
    right: calc(70 * var(--px));
    width: calc(310 * var(--px));
    height: calc(310 * var(--px));
    padding: calc(10 * var(--px));
    border-radius: calc(18 * var(--px));
    background: #fff;
    outline: max(1px, calc(2 * var(--px))) solid rgba(226, 193, 106, 0.85);
    outline-offset: calc(12 * var(--px));
}

.pq-affiche-code svg { width: 100%; height: 100%; display: block; fill: #0d0d0d; }

.pq-affiche-appel {
    position: absolute;
    top: calc(1340 * var(--px));
    left: calc(70 * var(--px));
    right: calc(440 * var(--px));
    text-align: center;
}

.pq-affiche-geste {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--px));
    color: #e7cf8a;
    font-size: calc(30 * var(--px));
    font-weight: 800;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
}

.pq-affiche-geste svg { width: calc(34 * var(--px)); height: auto; flex: none; display: block; }

.pq-affiche-adresse {
    padding-top: calc(12 * var(--px));
    font-size: calc(28 * var(--px));
    font-weight: 600;
    letter-spacing: 0.03em;
}


/* Portrait a gauche : le code l'y suit, le bouton passe a droite. */
.pq-carte-affiche.pq-carte-gauche .pq-cta,
.pq-carte-affiche.pq-carte-gauche .pq-affiche-appel { left: calc(440 * var(--px)); right: calc(70 * var(--px)); }

.pq-carte-affiche.pq-carte-gauche .pq-affiche-code { right: auto; left: calc(70 * var(--px)); }

.pq-carte-gauche .pq-affiche-geste svg { transform: scaleX(-1); }

/* Sans visuel -------------------------------------------------------------
   Les clubs de l'annuaire (26 septembre 2026) : pas de logo pour mille six
   cents clubs, donc ni portrait ni encart « photo attendue ». Le logo des
   Awards et la colonne texte se centrent sur toute la largeur ; le corps du
   nom est calcule pour cette colonne (CardLines::COLONNE_SANS_VISUEL). Place
   en fin de feuille, apres les formats et le miroir, qu'il doit battre. */
.pq-sans-visuel .pq-logo,
.pq-carte-gauche.pq-sans-visuel .pq-logo {
    left: 50%;
    right: auto;
    translate: -50% 0;
}

.pq-sans-visuel .pq-bloc,
.pq-carte-gauche.pq-sans-visuel .pq-bloc {
    left: calc(150 * var(--px));
    right: calc(150 * var(--px));
    width: auto;
}

/* Les lauriers serrent l'intitule du prix, comme sur la carte d'un nomine :
   etire sur toute la colonne, il les renvoyait aux deux bords. */
.pq-sans-visuel .pq-prix > div { flex: 0 1 auto; max-width: calc(560 * var(--px)); }