/* Tunnel de vote des Trophées du Padel.
   Feuille écrite à la main : le styles.css de la vitrine est un Tailwind 3
   compilé sans chaîne de build sur ce serveur, et le package.json déclare
   Tailwind 4. Le reconstruire changerait la vitrine, qui est figée à
   l'identique de la production. Les jetons reprennent la DA du site. */

/* Modele de boite uniforme, pose le 20 septembre 2026.
   -------------------------------------------------------------------------
   La feuille a vecu sans reinitialisation : une largeur s'y entendait hors
   rembourrage et hors bordure, si bien que tout element melant un pourcentage
   et un rembourrage debordait de son parent. Le piege s'est declenche quatre
   fois — bouton du tunnel, cases de logo du patchwork, medaillons, bouton du
   bandeau de reassurance — et la correction etait chaque fois la meme ligne,
   posee au cas par cas.

   Elle est desormais posee une fois pour toutes. Les rares endroits ou le
   modele d'origine etait voulu le redisent explicitement, avec leur raison :
   c'est le cas du bandeau de portraits, dont le rembourrage lateral est une
   reserve de debordement et non une marge interieure.

   La feuille de la carte de partage n'est pas concernee : elle pose deja
   « .pq-carte * { box-sizing: border-box } » de son cote, et son element
   racine ne porte ni dimension ni rembourrage. Les PNG fabriques par
   CardRenderer, qui n'embarquent que cette feuille, ne bougent pas. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --matte: #0d0d0d;
    --surface: #161616;
    --surface-haute: #1e1e1e;
    --gold: #d4af37;
    --gold-clair: #f5e3b5;
    --texte: #ffffff;
    --texte-doux: rgba(255, 255, 255, 0.62);
    --bord: rgba(212, 175, 55, 0.22);
}

.vote {
    background: var(--matte);
    color: var(--texte);
    font-family: Montserrat, system-ui, sans-serif;
    min-height: 100vh;
}

/* Ambiance de l'univers ----------------------------------------------------
   Degrade, halo chaud et bokeh dore : les trois ingredients du visuel de
   partage, poses ici en couche fixe derriere le contenu. Les couleurs
   arrivent en variables, ecrites par la vue depuis la variante de la
   categorie. */

.vote-univers {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 88% 12%, var(--u-fond2) 0%, transparent 62%),
        linear-gradient(155deg, var(--u-fond1) 0%, var(--u-fond3) 100%);
}

/* Photographie de fond. Le decor ne portait que de la lumiere, il lui
   manquait de la matiere : une image de padel tres sombre, viree a l'or.
   Son opacite vient de l'univers de la categorie (--u-voile, voir
   AwardsOrnements) et non d'ici : sur un fond deja colore, la meme photo
   posee au meme dosage ne fait plus de la matiere mais de la salissure.

   Le masque est une vignette inversee : il efface l'image au centre, la ou
   passent le logo, l'intitule du prix et les fiches, et ne la laisse que dans
   les marges et les coins. La photo encadre le contenu au lieu de se tenir
   derriere lui — c'est la seule facon d'en mettre sans jamais rien salir.

   Le leger flou n'est pas une coquetterie : il empeche de reconnaitre un
   sujet. A cette opacite, une silhouette identifiable se lit comme un
   fantome ; la meme silhouette floue se lit comme de la matiere. Le
   debordement d'un centimetre evite la bordure franche que le flou creerait
   sinon sur les quatre bords.

   Rien ne s'y anime : le mouvement est deja pris par les lumieres.

   Les deux fichiers portent un numero de version dans leur adresse. Ils sont
   remplaces en place, sous le meme nom : sans ce numero, un visiteur deja
   venu garderait l'ancienne image, la feuille eut-elle change. Le rehausser
   en meme temps que celui de /vote.css a chaque remplacement. */
.vote-univers::before {
    content: '';
    position: absolute;
    inset: -1rem;
    background-image: url('/images/awards/fond-awards.webp?v=4');
    background-size: cover;
    background-position: 30% 78%;
    opacity: var(--u-voile, 0.2);
    filter: blur(3px);
    -webkit-mask-image: radial-gradient(58% 48% at 50% 32%, transparent 14%, rgba(0, 0, 0, 0.5) 60%, #000 92%);
    mask-image: radial-gradient(58% 48% at 50% 32%, transparent 14%, rgba(0, 0, 0, 0.5) 60%, #000 92%);
}

/* Sur un telephone, le cadrage paysage ne montrerait qu'une bande du milieu :
   la version portrait tient la meme scene debout. Et il n'y a plus de marges
   a habiller, le texte va d'un bord a l'autre — le masque redevient donc un
   simple fondu par le bas, le haut de l'ecran etant deja pris par le bokeh. */
@media (max-width: 639px) {
    .vote-univers::before {
        background-image: url('/images/awards/fond-awards-portrait.webp?v=4');
        background-position: 50% 100%;
        -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.28) 46%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.28) 46%, #000 100%);
    }
}

/* Sur l'accueil, et sur lui seul, le fond cesse d'etre une texture.

   Le trophee-raquette y est un sujet : il annonce le sport et le prix avant
   qu'aucun mot ne soit lu. Au voile des autres ecrans — un cinquieme
   d'opacite et trois pixels de flou — il ne resterait qu'une lueur.

   Le tunnel, lui, garde le traitement discret : une grille de nomines s'y
   lit par-dessus, et un fond present ferait concurrence aux visages.

   Le rattachement passe par « :has » plutot que par une classe posee sur le
   corps de page : la couche d'ambiance est une soeur du contenu, pas son
   parent, et c'est le contenu qui sait de quel ecran il s'agit. */
.vote:has(.vote-landing) .vote-univers::before {
    /* La modulation par univers est conservee, son assiette est relevee. */
    /* Assez pour qu'on reconnaisse le trophee, pas assez pour qu'il dispute
       la page au contenu : c'est le fond qui doit reculer, jamais le texte
       qui doit se defendre. */
    opacity: calc(var(--u-voile, 0.2) * 1.35);
    filter: blur(2.8px);
    background-position: 52% 64%;
    /* La clairiere est large et descend jusque sous le bandeau de
       reassurance : tout ce qui se lit se detache ainsi sur du noir franc, et
       le trophee vit dans la marge droite, la ou rien n'est ecrit. */
    -webkit-mask-image: radial-gradient(64% 54% at 45% 33%, transparent 14%, rgba(0, 0, 0, 0.38) 58%, #000 90%);
    mask-image: radial-gradient(64% 54% at 45% 33%, transparent 14%, rgba(0, 0, 0, 0.38) 58%, #000 90%);
}

@media (max-width: 639px) {
    .vote:has(.vote-landing) .vote-univers::before {
        background-position: 50% 88%;
        /* Plus de flou qu'au large : a cette taille, les perforations de la
           raquette se lisaient comme un semis de points derriere le texte. */
        filter: blur(3.4px);
        /* Le telephone n'a pas de marge ou loger le trophee : tout le texte
           passe dessus. Le fond y recule donc d'un cran de plus. */
        opacity: calc(var(--u-voile, 0.2) * 1.15);
        -webkit-mask-image: linear-gradient(180deg, transparent 2%, rgba(0, 0, 0, 0.35) 38%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 2%, rgba(0, 0, 0, 0.35) 38%, #000 100%);
    }
}

/* Grain. Un degrade sombre code sur huit bits se voit par bandes, et ces
   bandes se lisent comme un defaut d'affichage plutot que comme une matiere.
   Un bruit tres faible les dissout. */
.vote-univers::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.055;
}

/* Le halo occupe toute la couche, et non plus une boite de 62 % calee en haut
   a droite.
   Cette boite le tranchait : la taille par defaut d'un `circle` va jusqu'au
   coin le plus loin, donc le degrade n'avait pas fini de s'eteindre quand il
   atteignait le bord bas de sa boite. Il y restait quatre centiemes d'or,
   coupes net sur une horizontale parfaite a 46 % de la hauteur. Quatre niveaux
   de gris, mais alignes au pixel pres sur toute la largeur : l'oeil les lit
   comme une couture. Sans boite, plus rien a trancher — le rayon est ecrit en
   toutes lettres et le degrade s'eteint la ou il veut. */
.vote-univers-halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 36vmax at 83% 15%, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.07) 42%, transparent 70%);
    animation: vote-respiration 15s ease-in-out infinite;
}

/* Le bokeh reste dans la moitie droite et se tient en retrait : il doit se
   sentir, pas se regarder. */
.vote-bokeh {
    position: absolute;
    inset: 0 0 0 42%;
    opacity: 0.85;
    animation: vote-derive 38s ease-in-out infinite;
}

@media (max-width: 639px) {
    .vote-bokeh { inset: 0 0 0 30%; opacity: 0.5; }
}

.vote-bulle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff3cc 0%, #f0cf7a 45%, rgba(240, 207, 122, 0.55) 100%);
    box-shadow: 0 0 22px 6px rgba(240, 207, 122, 0.35);
    translate: -50% -50%;
    scale: 0.72;
    opacity: var(--o, 0.5);
    filter: blur(var(--flou, 0px));
    animation: vote-scintillement var(--duree, 6s) ease-in-out var(--retard, 0s) infinite;
}

/* Scintillement : l'opacite et le diametre battent autour de leur valeur de
   repos, jamais jusqu'a l'extinction. Une lumiere qui s'eteint tout a fait se
   remarque ; une lumiere qui respire ne se remarque pas, elle se ressent.
   Le rythme de chaque bulle vient de son rang — voir AwardsOrnements. */
@keyframes vote-scintillement {
    0%, 100% { opacity: calc(var(--o, 0.5) * 0.3); scale: 0.55; }
    50% { opacity: min(1, calc(var(--o, 0.5) * 1.45)); scale: 0.95; }
}

/* La nappe entiere derive de deux pour cent en trente-huit secondes : trop
   lent pour etre vu, assez pour que l'image ne soit jamais figee. */
@keyframes vote-derive {
    0%, 100% { translate: 0 0; }
    50% { translate: -1.6% -2.4%; }
}

@keyframes vote-respiration {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Rien ne bouge pour qui a demande que rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .vote-bulle,
    .vote-bokeh,
    .vote-univers-halo,
    .vote-etoile svg {
        animation: none;
    }

    .vote-bulle { scale: 0.72; opacity: var(--o, 0.5); }
}

/* Tout le contenu passe devant l'ambiance. */
.vote-conteneur,
.vote-pied,
.vote-panneau,
.vote-voile {
    position: relative;
    z-index: 1;
}

.vote-conteneur {
    /* La colonne de contenu fait toujours 72 rem : le rembourrage lateral y
       est rajoute, puisqu'il entre desormais dans la largeur. Sans cette
       reprise, la reinitialisation du modele de boite resserrait de quarante
       pixels toutes les pages du scrutin d'un coup. */
    max-width: calc(72rem + 2 * 1.25rem);
    margin: 0 auto;
    /* Le bandeau du haut donnait cinquante pixels avant le logo ; sans lui il
       faut un peu d'air, sans quoi la marque touche le bord de la fenetre. */
    padding: 1.9rem 1.25rem 6rem;
}

/* Progression ------------------------------------------------------------ */

/* Avancee du parcours : une ligne, sur le bord haut de la fenetre.

   Ce qui la precedait etait un bandeau noir portant une case arrondie par
   categorie : dix-neuf petits rectangles alignes, decrits par le client comme
   une rangee d'ongles. Le bandeau prenait cinquante pixels de hauteur et se
   lisait comme la barre d'outils d'un back-office.

   La ligne est en position fixe : elle ne coute aucun pixel de mise en page, et
   la page commence enfin par son logo. */
.vote-avancee {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: 3px;
    /* La glissiere est deja doree, faiblement : au premier ecran rien n'est
       tranche et la part remplie vaut zero. Sans cette teinte la ligne serait
       purement absente, et l'on croirait la progression supprimee. */
    background: rgba(212, 175, 55, 0.16);
}

.vote-avancee span {
    display: block;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #a8801f 0%, #d4af37 55%, #f5e3b5 100%);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.65);
    transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* En-tête de catégorie ---------------------------------------------------- */

/* En-tete de categorie ----------------------------------------------------
   Meme composition que le visuel de partage : logo, surtitre en or, intitule
   du prix entre deux lauriers, etoile de separation. Tout est centre. */

/* L'en-tete tient sur une mesure de lecture : etale sur toute la largeur d'un
   ecran de bureau, le logo, l'intitule et les lauriers se retrouvaient a un
   metre les uns des autres et ne formaient plus un bloc. */
.vote-entete {
    position: relative;
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Aura : la meme lueur doree que derriere le portrait du visuel de partage,
   posee derriere l'intitule. C'est elle qui tient l'ensemble ; sans elle les
   quatre lignes flottent sur du noir. */
.vote-entete::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4%;
    width: min(44rem, 124%);
    aspect-ratio: 5 / 3;
    translate: -50% 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0.05) 40%, transparent 68%);
    pointer-events: none;
    z-index: -1;
}

/* Agrandi le 24 septembre 2026, a la demande de l'utilisateur, surtout pour le
   recapitulatif : le nouveau logo, plus large que haut, paraissait petit a
   152 px. 240 a 352 px desormais sur les ecrans sans intitule de prix. */
.vote-logo {
    width: clamp(15rem, 64vw, 22rem);
    height: auto;
    margin: 0 auto clamp(1rem, 2.6vw, 1.5rem);
    display: block;
}

.vote-surtitre {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.05rem, 3.2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Intitule du prix, tenu par les deux demi-couronnes. */
.vote-prix {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 1.5vw, 1rem);
    margin-top: clamp(0.6rem, 1.6vw, 0.95rem);
    /* La rangee est bornee, pas l'intitule : borner l'intitule laissait le
       texte flotter au milieu de sa boite et les lauriers loin de lui. En
       bornant la rangee, la colonne de texte epouse ce qui reste. */
    max-width: 36rem;
    margin-inline: auto;
}

/* Les lauriers suivent le corps de l'intitule, pas la largeur de l'ecran :
   trop grands, ils cessaient d'encadrer le titre pour le dominer. */
.vote-laurier {
    flex: none;
    width: clamp(2.3rem, 6vw, 3.7rem);
    display: block;
    filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.3));
}

.vote-laurier svg { width: 100%; height: auto; display: block; }

.vote-laurier-miroir { transform: scaleX(-1); }

.vote-titre {
    font-size: clamp(1.5rem, 4.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.06;
    margin: 0;
    margin-inline: auto;
    padding: 0 0.35rem;
    min-width: 0;
    /* « pretty » et non « balance » : equilibrer les lignes les raccourcit
       toutes, et les lauriers se retrouvent a distance du texte. Ici la
       premiere ligne va au bout de sa mesure, comme sur le visuel. */
    text-wrap: pretty;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #efe0b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ------------------------------------------------------------------------
   Bandeau de portraits de l'accueil.

   Des lamelles verticales inclinees, reprises des affiches de prix. Tout
   l'effet tient a l'uniformisation : les photographies des nomines viennent
   de studios, de courts, de telephones, avec des fonds bleus, verts ou
   blancs. Passees en monochrome dore et remontees en contraste, elles
   cessent d'etre une collection disparate pour devenir une seule matiere.
   ------------------------------------------------------------------------ */

.vote-bandeau {
    /* Le seul endroit de la feuille ou le modele d'origine est voulu. Ce
       rembourrage lateral n'est pas une marge interieure : c'est la reserve ou
       vient deborder l'inclinaison des lamelles. Il doit donc s'ajouter a la
       largeur et non s'y tailler une part, faute de quoi la derniere lamelle
       se retrouve rognee — le defaut deja signale une fois. */
    box-sizing: content-box;
    /* Le traitement des portraits tient en une variable : les trois endroits
       qui le declinaient (lamelle courante, lamelle centrale, petit ecran)
       s'en servent au lieu de le recopier.

       La desaturation est partielle et non totale : a « grayscale(1) », les
       photographies etaient parfaitement unifiees mais entierement videes de
       leur couleur. A 0,6, le bleu d'un maillot, le rouge d'une raquette et
       les carnations reviennent, sans que les fonds de tribune ne repartent
       dans des teintes etrangeres a la charte. */
    --lamelle-filtre:
        grayscale(0.6)
        sepia(0.28)
        saturate(1.22)
        hue-rotate(-8deg)
        contrast(1.12)
        brightness(0.9);
    display: flex;
    justify-content: center;
    gap: clamp(0.3rem, 0.8vw, 0.62rem);
    width: 100%;
    max-width: 64rem;
    height: clamp(9rem, 26vw, 19rem);
    margin: clamp(1rem, 2.4vw, 1.7rem) auto 0;
    /* L'inclinaison fait deborder chaque lamelle de la moitie de sa hauteur
       multipliee par la tangente de sept degres, soit une vingtaine de pixels
       de chaque cote. Sans cette reserve, la lamelle de droite etait tranchee
       net par le bord du cadre des que la fenetre se resserrait. */
    padding-inline: clamp(0.7rem, 1.8vw, 1.4rem);
    /* Le bas du bandeau se dissout dans le noir : l'intitule se pose ensuite
       sur un fond propre, comme sur les affiches, ou le titre n'empiete
       jamais sur les visages. */
    /* Les portraits tiennent jusqu'aux deux tiers puis se dissolvent : la
       pointe des palmes croise la fin de cette zone, l'intitule se pose plus
       bas sur un fond deja rendu au noir. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 97%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 97%);
}

.vote-bandeau-lamelle {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    /* L'inclinaison est ce qui fait l'affiche : des rectangles droits
       donneraient une planche-contact. */
    transform: skewX(-7deg);
    animation: vote-lamelle-entre 0.85s cubic-bezier(0.19, 0.82, 0.28, 1) backwards;
    animation-delay: calc(var(--lamelle, 0) * 95ms + 160ms);
}

.vote-bandeau-lamelle > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Le visage tient dans le tiers haut d'un portrait en 3/4 : sur une
       lamelle deux fois plus haute que large, le cadrage remonte. */
    object-position: center 24%;
    /* Contre-inclinaison, et un peu d'echelle pour que le biais ne decouvre
       pas les coins. */
    transform: skewX(7deg) scale(1.22);
    /* Vire a l'or sans etre vide de couleur : voir « --lamelle-filtre ». */
    filter: var(--lamelle-filtre);
    transition: opacity 0.4s ease, filter 0.6s ease, transform 0.6s ease;
}

/* Un liseré d'or sur la tranche : il detache les lamelles les unes des
   autres quand deux photographies voisines ont la meme valeur. */
.vote-bandeau-lamelle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), transparent 42%);
    box-shadow: inset 1px 0 0 rgba(255, 244, 204, 0.09), inset -1px 0 0 rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* La lamelle du milieu porte l'axe du titre : elle est un peu plus claire et
   un peu plus coloree, comme le visage central des affiches. */
.vote-bandeau-lamelle:nth-child(4) {
    --lamelle-filtre:
        grayscale(0.5)
        sepia(0.24)
        saturate(1.32)
        hue-rotate(-8deg)
        contrast(1.14)
        brightness(1);
}

@keyframes vote-lamelle-entre {
    from {
        opacity: 0;
        transform: skewX(-7deg) translateY(16%) scaleY(0.86);
    }
    to {
        opacity: 1;
        transform: skewX(-7deg) translateY(0) scaleY(1);
    }
}

/* Le fondu d'une permutation, comme sur les cartes de categorie. */
.vote-bandeau-lamelle > img.est-en-echange {
    opacity: 0;
}

@media (max-width: 899px) {
    .vote-bandeau { height: clamp(8rem, 30vw, 13rem); }

    /* Sept lamelles sous neuf cents pixels donneraient des fentes : on
       n'en garde que cinq, puis quatre au telephone. */
    .vote-bandeau-lamelle:nth-child(n+6) { display: none; }
}

@media (max-width: 599px) {
    .vote-bandeau {
        height: clamp(7.5rem, 34vw, 10rem);
        /* Moins de remontee qu'en grand format : sur trois lignes, l'intitule
           mordait sur le bas des portraits. */
        margin-bottom: -0.6rem;
    }

    .vote-bandeau-lamelle:nth-child(n+5) { display: none; }

    /* Avec quatre lamelles, il n'y a plus de rang central : la quatrieme
       reprend le traitement commun du bandeau. */
    .vote-bandeau-lamelle:nth-child(4) {
        --lamelle-filtre: inherit;
    }
}

/* ------------------------------------------------------------------------
   Haut de l'accueil du scrutin : annonce, puis logo entre ses palmes.

   Le 24 septembre 2026, a la demande de l'utilisateur, l'intitule en toutes
   lettres pose sous les portraits est retire : il repetait le logo mot pour
   mot. Le logo devient le h1 et les palmes, qui encadraient cet intitule,
   remontent l'encadrer lui.
   ------------------------------------------------------------------------ */

/* Une pastille et non une ligne de plus en capitales d'or : le surtitre
   « Ils sont nomines » l'est deja, et deux etiquettes du meme dessin a trois
   lignes d'ecart se seraient repondu en echo. */
.vote-annonce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.85rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(1.1rem, 2.8vw, 1.8rem);
    padding: 0.55rem 1.25rem;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 999px;
    background: rgba(8, 6, 3, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: clamp(0.8rem, 1.5vw, 0.92rem);
    line-height: 1.4;
    color: rgba(247, 238, 214, 0.86);
}

.vote-annonce-titre {
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e8cb78;
}

/* Losange d'or entre les deux moities. Porte par la date, il disparait avec
   elle une fois la soiree passee. La date reste un texte courant et non une
   boite flexible : sans quoi le gras deviendrait un bloc a part, et les
   espaces qui l'entourent des ecarts. */
.vote-annonce-date::before {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.85rem;
    vertical-align: 0.18em;
    rotate: 45deg;
    background: #d4af37;
}

.vote-annonce-date strong {
    font-weight: 700;
    color: #fdf6dd;
}

/* Sur une ligne, l'annonce mesure pres de 62 rem. En dessous, ses deux
   moities passent l'une sous l'autre plutot que de laisser le losange ouvrir
   la seconde ligne : il n'a plus rien a separer et s'efface. */
@media (max-width: 1079px) {
    .vote-annonce {
        flex-direction: column;
        border-radius: 1rem;
    }

    .vote-annonce-date::before { display: none; }
}

.vote-embleme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.8vw, 1.25rem);
    margin: 0 auto clamp(0.8rem, 2vw, 1.25rem);
}

.vote-embleme-centre {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Millesime sous le logo, entre deux filets qui s'effacent vers l'exterieur.
   Droit et espace : c'est une date posee sous la marque, pas une partie
   d'elle. */
.vote-embleme-annee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1.1rem);
    margin-top: clamp(0.4rem, 1.1vw, 0.7rem);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(0.72rem, 1.9vw, 1.1rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.52em;
    /* L'interlettre pousse le texte a droite : on le ramene de sa propre
       valeur pour que le millesime reste centre entre ses filets. */
    text-indent: 0.52em;
    color: #e8cb78;
}

.vote-embleme-annee::before,
.vote-embleme-annee::after {
    content: '';
    flex: none;
    width: clamp(1.4rem, 6vw, 4rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85));
}

.vote-embleme-annee::after {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.85), transparent);
}

/* Les palmes suivent le logo et non plus l'intitule : a la taille qu'elles
   avaient pour lui, elles depassaient le logo de moitie. Elles ne
   recouvrent plus les portraits, l'ombre noire qui les en detachait part. */
.vote-landing-entete .vote-laurier {
    width: clamp(2.6rem, 6vw, 4.6rem);
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.36));
}

/* Etoile de separation, reprise trait pour trait du visuel de partage. Les
   filets s'effacent vers l'exterieur : coupes net, ils faisaient barriere. */
.vote-etoile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: clamp(1rem, 2.6vw, 1.5rem) 0 clamp(1.25rem, 3vw, 1.75rem);
}

.vote-etoile span {
    height: 1px;
    width: clamp(3rem, 12vw, 5.5rem);
}

.vote-etoile span:first-child {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}

.vote-etoile span:last-child {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
}

.vote-etoile svg {
    width: 1.05rem;
    flex: none;
    display: block;
    animation: vote-etoile-pulse 5s ease-in-out infinite;
}

/* La seule etoile de la page bat comme les lumieres du fond, au meme
   rythme lent. */
@keyframes vote-etoile-pulse {
    0%, 100% { opacity: 0.72; filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.3)); }
    50% { opacity: 1; filter: drop-shadow(0 0 11px rgba(212, 175, 55, 0.75)); }
}

.vote-famille {
    color: #ffffff;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

/* Deux filets encadrent la famille, comme le sous-surtitre de la carte. */
.vote-famille::before,
.vote-famille::after {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.65);
}

/* En-tete du tunnel : le meme, en plus court -------------------------------
   Sur cet ecran, et sur lui seul, une grille de nomines attend sous l'en-tete.
   Le cortege complet la repoussait a 528 px sur un ecran de bureau et a 408 px
   sur un telephone de 844 px : la moitie de la hauteur passait en decor avant
   le premier visage. Rien n'est retire, tout est resserre, et la parente avec
   les quatre autres ecrans du parcours tient toujours. */
/* « Trophée remis par » ----------------------------------------------------
   La contrepartie vendue au partenaire, sur la carte de la categorie et en
   tete de l'ecran de vote. Mention et logo cote a cote, separes d'un filet,
   comme une signature de partenaire : le logo est en gros depuis le 24
   septembre 2026, a la demande de l'utilisateur (a 24 px de haut sur la
   carte, « YES YES PADEL » ne se lisait pas). Empiles, un logo de cette
   taille aurait coute une ligne de plus. L'or reste reserve aux points de
   valeur du votant : la mention se pose en gris, le filet seul est dore, et
   c'est le logo qui porte la marque. */
.vote-remise {
    /* Le logo prend toute la hauteur tant qu'il le peut ; un logo en longueur
       bute sur la largeur et se centre alors dans la hauteur. */
    --remise-logo: 2.6rem;
    --remise-logo-max: 9.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 100%;
    margin-top: 0.85rem;
}

/* Deux lignes, « Trophée » puis « remis par » : l'espace insecable de la
   traduction ne laisse qu'une coupure a la largeur minimale. */
.vote-remise-mention {
    flex: none;
    width: min-content;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.vote-remise-filet {
    flex: none;
    align-self: stretch;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.75) 25%, rgba(212, 175, 55, 0.75) 75%, transparent);
}

.vote-remise-logo {
    display: block;
    min-width: 0;
    width: auto;
    height: var(--remise-logo);
    max-width: var(--remise-logo-max);
    object-fit: contain;
    object-position: left center;
}

/* Sans logo, le nom en tient lieu, a la meme echelle. */
.vote-remise-nom {
    min-width: 0;
    font-size: calc(var(--remise-logo) * 0.4);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
}

/* Sur l'ecran de vote, le partenaire n'est plus une ligne de carte parmi dix-
   neuf : il se centre sous l'intitule du prix, en plus grand. */
.vote-remise-ecran {
    --remise-logo: 3.75rem;
    --remise-logo-max: 14rem;
    width: fit-content;
    gap: 1rem;
    margin: 0.95rem auto 0;
}

.vote-remise-ecran .vote-remise-mention {
    font-size: 0.66rem;
    text-align: right;
}

/* Avec un partenaire, le logo des Awards se resserre d'un quart (24
   septembre 2026, a la demande de l'utilisateur) : la signature ajoutait
   89 px au-dessus du tambour sur ordinateur, 62 au telephone, et les cartes
   des nomines descendaient trop bas. Les categories sans partenaire gardent
   le logo en grand. */
.vote-entete-compact:has(.vote-remise) .vote-logo {
    width: clamp(11rem, 45vw, 12.5rem);
}

@media (min-width: 640px) {
    .vote-entete-compact:has(.vote-remise) .vote-logo {
        width: clamp(12rem, 17vw, 14rem);
    }
}

/* La releve va par quatre au-dela de 900 px : des cartes plus etroites. */
@media (min-width: 900px) {
    .vote-categories-grille-paires .vote-remise {
        --remise-logo: 2.25rem;
        --remise-logo-max: 8rem;
        gap: 0.65rem;
    }
}

@media (max-width: 639px) {
    .vote-remise {
        --remise-logo: 1.9rem;
        --remise-logo-max: 5.6rem;
        gap: 0.5rem;
        margin-top: 0.6rem;
    }

    .vote-remise-mention {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
    }

    .vote-remise-ecran {
        --remise-logo: 3.1rem;
        --remise-logo-max: 10.5rem;
        gap: 0.8rem;
        margin-top: 0.8rem;
    }

    .vote-remise-ecran .vote-remise-mention {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }
}

/* Plaque du partenaire (26 septembre 2026) --------------------------------
   Posés à nu sur le bleu nuit, les logos foncés ne se voyaient pas : celui de
   Banque Richelieu est gris #3c3c3c, celui de Padel Cube presque noir. La
   plaque est claire sous un logo foncé et sombre sous un logo clair (YES YES
   PADEL, blanc, disparaîtrait sur l'ivoire) : Partner::logoFonce() tranche,
   d'après la luminance mesurée du fichier. Filet d'or dans les deux cas, pour
   que la plaque se lise comme un écrin et non comme une vignette. */
.vote-plaque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    border-radius: 0.7rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vote-plaque-claire {
    background: linear-gradient(180deg, #fffdf7 0%, #f3ead3 100%);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.7), 0 12px 26px -16px rgba(0, 0, 0, 0.85);
}

.vote-plaque-sombre {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), 0 12px 26px -16px rgba(0, 0, 0, 0.85);
}

a.vote-plaque:hover { transform: translateY(-1px); }

a.vote-plaque-claire:hover { box-shadow: 0 0 0 1px #d4af37, 0 14px 30px -14px rgba(212, 175, 55, 0.55); }

a.vote-plaque-sombre:hover { box-shadow: inset 0 0 0 1px #d4af37, 0 14px 30px -14px rgba(212, 175, 55, 0.55); }

/* Logo recadré sur sa partie visible (components/vote/logo-partenaire) :
   la boîte a les proportions de ce qui se voit, l'image s'y décale de ses
   marges transparentes. --logo-h donne la hauteur visée, --logo-max borne la
   largeur d'un logo très en longueur. */
.vote-logo-cadre {
    display: block;
    flex: none;
    overflow: hidden;
    aspect-ratio: var(--r);
    width: min(var(--logo-max, 100%), calc(var(--logo-h, 3rem) * var(--r)));
}

.vote-logo-cadre img { display: block; max-width: none; height: auto; }

.vote-logo-entier {
    display: block;
    width: auto;
    height: var(--logo-h, 3rem);
    max-width: var(--logo-max, 100%);
    object-fit: contain;
}

.vote-remise-logo { --logo-h: var(--remise-logo); --logo-max: var(--remise-logo-max); }

.vote-remise-logo.vote-logo-cadre { height: auto; max-width: none; }

/* En tête de l'écran de vote, la signature grandit avec sa plaque : c'est la
   contrepartie vendue au partenaire, elle doit se voir dès la première vue. */
.vote-remise-ecran {
    --remise-logo: 3.4rem;
    --remise-logo-max: 15rem;
}

.vote-remise-ecran .vote-plaque { padding: 0.55rem 1.1rem; border-radius: 0.85rem; }

@media (max-width: 639px) {
    .vote-remise .vote-plaque { padding: 0.3rem 0.5rem; border-radius: 0.55rem; }

    .vote-remise-ecran {
        --remise-logo: 2.7rem;
        --remise-logo-max: 11rem;
    }

    .vote-remise-ecran .vote-plaque { padding: 0.45rem 0.85rem; }

    /* La plaque touchait le haut des cartes des nominés. */
    .vote-remise-ecran { margin-bottom: 0.9rem; }
}

/* Écran d'ouverture d'une catégorie parrainée (26 septembre 2026) ----------
   Le partenaire qui remet le trophée occupe tout l'écran en entrant dans la
   catégorie, une fois par session : voir components/vote/ouverture. Le voile
   laisse passer l'ambiance de l'univers, floutée, pour que l'écran appartienne
   encore au scrutin. */
.vote-ouverture {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    background:
        radial-gradient(60% 45% at 50% 55%, rgba(212, 175, 55, 0.16) 0%, transparent 70%),
        rgba(5, 8, 20, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: vote-ouverture-entree 0.5s ease both;
}

/* La page ne défile pas derrière l'écran d'ouverture. */
.vote-ouverture-active,
.vote-ouverture-active body { overflow: hidden; }

.vote-ouverture-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 40rem;
    text-align: center;
}

.vote-ouverture-awards {
    width: clamp(9rem, 32vw, 12rem);
    height: auto;
    display: block;
    animation: vote-ouverture-monte 0.7s 0.05s ease both;
}

.vote-ouverture-prix {
    margin: clamp(0.9rem, 2.5vh, 1.4rem) 0 0;
    font-size: clamp(1.05rem, 3.6vw, 1.45rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
    animation: vote-ouverture-monte 0.7s 0.15s ease both;
}

.vote-ouverture-mention {
    margin: clamp(1.6rem, 5vh, 2.6rem) 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: vote-ouverture-monte 0.7s 0.3s ease both;
}

/* Le logo en très grand : c'est tout l'objet de l'écran. */
.vote-ouverture-plaque {
    margin-top: clamp(1rem, 3vh, 1.5rem);
    width: min(100%, 26rem);
    min-height: clamp(8rem, 26vw, 11.5rem);
    padding: clamp(1.2rem, 4vw, 2rem) clamp(1.4rem, 5vw, 2.6rem);
    border-radius: 1.25rem;
    animation: vote-ouverture-plaque 0.8s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vote-ouverture-logo {
    --logo-h: clamp(5.5rem, 18vw, 8rem);
    --logo-max: 100%;
}

.vote-ouverture-nom {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte-doux);
    animation: vote-ouverture-monte 0.7s 0.55s ease both;
}

.vote-ouverture-suite {
    margin-top: clamp(1.6rem, 5vh, 2.4rem);
    /* Un bouton n'herite pas de la police de la page. */
    font-family: inherit;
    animation: vote-ouverture-monte 0.7s 0.7s ease both;
}

/* Six secondes avant que l'écran s'efface, en un filet d'or qui se vide. */
.vote-ouverture-compte {
    display: block;
    width: 7rem;
    height: 2px;
    margin-top: 1.1rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.vote-ouverture-compte span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #c39a2f, #f7e6b4);
    transform-origin: left center;
    animation: vote-ouverture-compte 6s linear both;
}

.vote-ouverture-sortie { transition: opacity 0.45s ease; }

.vote-ouverture-sortie-debut { opacity: 1; }

.vote-ouverture-sortie-fin { opacity: 0; }

@keyframes vote-ouverture-entree {
    from { opacity: 0; }
}

@keyframes vote-ouverture-monte {
    from { opacity: 0; transform: translateY(0.9rem); }
}

@keyframes vote-ouverture-plaque {
    from { opacity: 0; transform: translateY(1rem) scale(0.94); }
}

@keyframes vote-ouverture-compte {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-ouverture,
    .vote-ouverture-awards,
    .vote-ouverture-prix,
    .vote-ouverture-mention,
    .vote-ouverture-plaque,
    .vote-ouverture-nom,
    .vote-ouverture-suite { animation: none; }
}

/* Sortie d'une categorie ---------------------------------------------------
   Au-dela de 900 px le lien se pose dans la marge haute du conteneur, a
   gauche du logo centre : il ne coute alors aucun pixel au-dessus de la ligne
   de flottaison, la ou chaque pixel a ete disputé. En deca il passe dans le
   flux, faute de place a cote d'un logo qui occupe le milieu. */
/* Redessine le 22 septembre 2026 : la pastille bordee d'or, en capitales,
   attirait l'oeil avant le titre. Il reste un lien discret, un chevron dans
   un cercle fin et un libelle en bas de casse, qui ne s'allume qu'au survol. */
.vote-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.25s ease;
}

.vote-retour:hover,
.vote-retour:focus-visible {
    color: var(--gold-clair);
    outline: none;
}

.vote-retour-fleche {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.25s ease, background 0.25s ease, translate 0.25s ease;
}

.vote-retour-fleche svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vote-retour:hover .vote-retour-fleche,
.vote-retour:focus-visible .vote-retour-fleche {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.08);
    translate: -0.15rem 0;
}

@media (min-width: 900px) {
    .vote-retour {
        position: absolute;
        top: 1.9rem;
        left: 1.25rem;
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vote-retour-fleche { transition: none; }
}

.vote-entete-compact {
    padding-top: clamp(0.9rem, 2.2vw, 1.4rem);
}

/* L'aura suit : elle est dimensionnee sur la largeur de l'en-tete, pas sur son
   contenu, et serait restee grande ouverte sous un bloc devenu court. */
.vote-entete-compact::before {
    top: 1%;
    width: min(34rem, 108%);
}

/* Agrandi le 22 septembre 2026, dans la meme proportion que l'accueil
   (+45 %) : 232 px sur bureau au lieu de 160, 160 au telephone au lieu
   de 112. */
.vote-entete-compact .vote-logo {
    width: clamp(13rem, 54vw, 15.5rem);
    margin-bottom: clamp(0.55rem, 1.3vw, 0.85rem);
}

.vote-entete-compact .vote-surtitre {
    font-size: clamp(0.85rem, 2.4vw, 1.15rem);
}

.vote-entete-compact .vote-famille {
    margin-top: 0.4rem;
}

.vote-entete-compact .vote-prix {
    margin-top: clamp(0.4rem, 1vw, 0.65rem);
}

/* Un titre plus grand et un interlettrage plus court : c'est la difference
   entre une composition qui s'etale et une qui s'affirme. La hauteur gagnee
   sur le bandeau supprime revient ici, ou elle se voit. */
.vote-entete-compact .vote-titre {
    font-size: clamp(1.5rem, 4.6vw, 2.85rem);
    letter-spacing: 0;
}

.vote-entete-compact .vote-surtitre {
    letter-spacing: 0.16em;
    text-indent: 0.16em;
}

.vote-entete-compact .vote-famille {
    letter-spacing: 0.22em;
    text-indent: 0.22em;
}

/* L'echeance, seule information conservee sous le titre. */
.vote-faits {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem 0.75rem;
    margin: clamp(0.7rem, 1.8vw, 1rem) auto 0;
    max-width: 42rem;
    color: var(--texte-doux);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.vote-faits-cloture {
    color: var(--gold-clair);
}

.vote-chapeau {
    color: var(--texte-doux);
    max-width: 42rem;
    line-height: 1.6;
    margin: 0 auto 1.75rem;
    text-align: center;
}

/* Au telephone, tout se resserre encore d'un cran.

   Le chapeau et l'echeance sont deux lignes que la page ne portait pas : sans
   ce reglage elles repoussaient la premiere vignette de
   nomine plus bas qu'avant qu'on ne touche a rien, ce qui aurait annule le
   gain. Chaque valeur ci-dessous a ete relevee au navigateur, pas estimee. */
@media (max-width: 639px) {
    .vote-conteneur {
        padding-top: 1.15rem;
    }

    .vote-entete-compact {
        padding-top: 0.5rem;
    }

    .vote-entete-compact .vote-logo {
        margin-bottom: 0.5rem;
    }

    .vote-entete-compact + .vote-chapeau {
        margin-bottom: 0.75rem;
    }

    .vote-recherche {
        padding: 0.55rem 1rem;
        margin-bottom: 1rem;
    }
}

/* Sous l'en-tete du tunnel, le chapeau est tenu court : il s'intercale entre
   l'en-tete et la grille, et chaque ligne qu'il prend repousse la premiere
   vignette de nomine. Mesure plutot que ressenti : a 38 rem et 0,92 rem de
   corps, une phrase de moins de quatre-vingts signes tient sur une ligne ici,
   sur deux au telephone. Au-dela elle passe a deux lignes et coute 25 px. */
.vote-entete-compact + .vote-chapeau {
    max-width: 38rem;
    margin-top: 1.3em;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* En-tete resserre sur ordinateur (22 septembre 2026), pour que le tambour
   tienne au milieu de l'ecran : logo plus petit, intitule sur une ligne quand
   il le peut, marges raccourcies. Le telephone garde ses reglages, sa grille
   defile de toute facon. */
@media (min-width: 640px) {
    .vote-conteneur:has(.vote-entete-compact) {
        padding-top: 1rem;
    }

    .vote-entete-compact {
        padding-top: 0;
    }

    /* Rehausse le meme jour a la demande de l'utilisateur : la marque
       compte plus que les quelques pixels qu'elle prend aux cartes. */
    .vote-entete-compact .vote-logo {
        width: clamp(14rem, 24vw, 19rem);
        margin-bottom: 0.45rem;
    }

    .vote-entete-compact .vote-surtitre {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
    }

    .vote-entete-compact .vote-prix {
        max-width: 46rem;
        margin-top: 0.3rem;
    }

    /* Sans marge automatique, la rangee centre le bloc titre et lauriers :
       elle est plus large qu'avant, et le titre y flottait loin d'eux. */
    .vote-entete-compact .vote-titre {
        font-size: clamp(1.5rem, 3.6vw, 2.35rem);
        margin-inline: 0;
    }

    .vote-entete-compact .vote-laurier {
        width: clamp(2rem, 4.4vw, 2.9rem);
    }

    .vote-entete-compact + .vote-chapeau {
        margin-top: 0.6rem;
        margin-bottom: 0.4rem;
    }
}

@media (min-width: 900px) {
    .vote-conteneur:has(.vote-entete-compact) .vote-retour {
        top: 1rem;
    }
}

/* Recherche --------------------------------------------------------------- */

.vote-recherche {
    width: 100%;
    max-width: 26rem;
    display: block;
    margin-inline: auto;
    background: rgba(13, 13, 13, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--texte);
    padding: 0.7rem 1.1rem;
    font-size: 0.9rem;
    /* Resserre avec l'en-tete : chaque dizaine de pixels gagnee ici remonte
       la premiere rangee de nomines au-dessus de la ligne de flottaison. */
    margin-bottom: 1.25rem;
}

.vote-recherche:focus {
    outline: none;
    border-color: var(--bord);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

/* Grille ------------------------------------------------------------------ */

/* La grille est centree, et ce n'est pas un detail de gout.

   En colonnes rigides, une categorie de six nomines sur quatre colonnes posait
   quatre vignettes puis deux, calees a gauche, avec un vide de deux places a
   droite : la page penchait. Le nombre de nomines n'est pas maitrise, il varie
   d'une categorie a l'autre et rien ne garantit qu'il tombe juste.

   D'ou une rangee souple plutot qu'une grille : la derniere ligne, complete ou
   non, se centre d'elle-meme. La largeur d'une vignette reste calculee sur le
   nombre de colonnes du palier, les vignettes gardent donc exactement la meme
   taille qu'avant. */
.vote-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

.vote-case {
    position: relative;
    flex: 0 1 calc((100% - 0.9rem) / 2);
    max-width: calc((100% - 0.9rem) / 2);
}

@media (min-width: 640px) {
    .vote-case {
        flex-basis: calc((100% - 1.8rem) / 3);
        max-width: calc((100% - 1.8rem) / 3);
    }
}

@media (min-width: 1024px) {
    .vote-grille { gap: 1.15rem; }

    .vote-case {
        flex-basis: calc((100% - 3.45rem) / 4);
        max-width: calc((100% - 3.45rem) / 4);
    }
}

/* Les vignettes montent l'une apres l'autre plutot que d'apparaitre en bloc.
   Le decalage est plafonne : sans cela la vingtieme attendrait presque une
   seconde, et l'effet passerait de vivant a lent. */
@keyframes vote-case-entre {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.vote-case {
    animation: vote-case-entre 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    animation-delay: calc(min(var(--rang, 0), 9) * 45ms);
}

@media (prefers-reduced-motion: reduce) {
    .vote-case {
        animation: none;
    }
}

/* La vignette d'un nomine.

   Elle portait deux cadres, un liseré or a un pixel du bord et un second en
   retrait de cinq : deux traits paralleles autour de chaque vignette, seize
   fois par ecran. C'est ce qui la datait. Un seul contour subsiste, presque
   invisible au repos ; l'or n'arrive qu'au survol et au choix, la ou il veut
   dire quelque chose.

   Son pied reservait aussi 2,75 rem a un bouton « Voir la fiche » retire
   depuis : quarante-quatre pixels de vide sous chaque nom, sur toute la
   grille. */
.vote-carte {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(8, 8, 10, 0.92) 62%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.1rem;
    overflow: hidden;
    text-align: left;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    width: 100%;
    /* Colonne : dans une rangee, un nom sur deux lignes rend sa vignette plus
       haute que ses voisines, et la grille les etire toutes a la meme hauteur.
       Sans cette colonne, le surplus tombait sous les noms courts et les pieds
       ne s'alignaient plus d'une carte a l'autre. */
    display: flex;
    flex-direction: column;
    transition:
        transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.vote-carte:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow:
        0 30px 60px -34px rgba(0, 0, 0, 0.95),
        0 0 34px -16px rgba(212, 175, 55, 0.6);
}

/* Le choix se voit de loin : un anneau d'or plein, et non plus un simple
   changement de teinte de bordure qu'il fallait chercher. */
.vote-carte[aria-pressed="true"] {
    border-color: transparent;
    box-shadow:
        0 0 0 2px #d4af37,
        0 24px 50px -28px rgba(212, 175, 55, 0.8);
}

.vote-carte[disabled] { cursor: not-allowed; opacity: 0.55; }

.vote-carte-visuel {
    position: relative;
    flex: none;
    /* Un seul format pour tous les gabarits depuis le 22 septembre 2026. */
    aspect-ratio: 3 / 4;
    background: rgba(0, 0, 0, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vote-carte-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vote-carte:hover .vote-carte-visuel img { transform: scale(1.05); }

/* Le visuel se fond dans le pied au lieu d'en etre separe par un filet : le
   trait coupait la vignette en deux moities egales, la degrade la fait tenir
   d'un bloc. */
.vote-carte-visuel::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 10, 0.86) 100%);
    pointer-events: none;
}

.vote-carte-corps {
    display: block;
    flex: 1;
    padding: 0.7rem 0.9rem 0.9rem;
}

.vote-carte-nom {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.18;
    color: var(--texte);
}

.vote-carte[aria-pressed="true"] .vote-carte-nom {
    background: linear-gradient(180deg, #fbf0cd 0%, #d4af37 52%, #a8801f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vote-carte-lieu {
    display: block;
    color: var(--texte-doux);
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

/* En grille mobile, chaque pied reserve la place de deux lignes de nom et de
   deux lignes de club/ville. Une localisation longue ne peut ainsi plus
   allonger seule sa carte, et toutes les vignettes gardent le meme format. */
@media (max-width: 639px) {
    .vote-case { display: flex; }

    .vote-carte { height: 100%; }

    .vote-carte-corps {
        flex: none;
        box-sizing: border-box;
        height: 6.25rem;
        overflow: hidden;
    }

    .vote-carte-nom,
    .vote-carte-lieu {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .vote-carte-nom { min-height: 2.36em; }

    .vote-carte-lieu {
        min-height: 2.7em;
        line-height: 1.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vote-carte,
    .vote-carte-visuel img {
        transition: none;
    }

    .vote-carte:hover {
        transform: none;
    }

    .vote-carte:hover .vote-carte-visuel img {
        transform: none;
    }
}

/* Encart de visuel attendu ------------------------------------------------
   Pose tant que le visuel du nomine n'est pas fourni. Il annonce le format,
   et emprunte au visuel de partage son degrade d'or et sa Playfair. */

.vote-attente {
    position: relative;
    /* La largeur et la hauteur incluent les marges internes. Sans cela,
       l'encart deborde du visuel a droite et en bas, ou il est coupe. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    height: 100%;
    padding: 1.1rem 0.9rem;
    text-align: center;
    background:
        radial-gradient(115% 70% at 50% 0%, rgba(212, 175, 55, 0.1), transparent 62%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 7px, transparent 7px 14px);
}

.vote-attente-cadre {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    /* Le ratio vient du type de nomine ; a defaut, la boite entiere. */
    aspect-ratio: 3 / 4;
    width: calc(100% - 1.1rem);
    max-width: calc(100% - 1.1rem);
    max-height: calc(100% - 1.1rem);
    border: 1px dashed rgba(212, 175, 55, 0.32);
    border-radius: 0.45rem;
    pointer-events: none;
}

.vote-attente-titre {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.vote-carte-coche {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f7e6b4 0%, #dcb94c 46%, #c39a2f 100%);
    border: 1px solid #f3e3b6;
    color: var(--u-encre, #0d0d0d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 6px 16px -8px rgba(212, 175, 55, 0.9);
}

.vote-carte-detail {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(13, 13, 13, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--texte-doux);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.vote-carte-detail:hover { border-color: var(--gold); color: var(--gold); }

/* Galerie en tambour -------------------------------------------------------
   Choisie le 17 septembre 2026 sur planche (prototype B), d'apres deux
   references fournies par l'utilisateur. Les cartes tournent sur un cylindre ;
   celle du centre ouvre la fiche. Positions calculees par public/vote-galerie.js.
   Sur mobile, la grille d'origine prend automatiquement sa place. */

.vote-galerie { position: relative; }

/* Les cartes du tambour debordent sur les cotes jusqu'au bord de l'ecran :
   la page ne doit pas pour autant defiler en largeur. */
body.vote:has(.vote-galerie-carrousel) { overflow-x: clip; }

/* La scene. */
.vote-galerie-carrousel .vote-grille {
    display: block;
    position: relative;
    height: min(31rem, 70vh);
    perspective: 1400px;
    perspective-origin: 50% 45%;
    /* Scene aplatie : l'ordre d'affichage suit le z-index pose par le script.
       En preserve-3d, la lueur ci-dessous prenait place dans la scene et
       masquait les cartes situees derriere son plan. */
    transform-style: flat;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* Lueur de l'univers derriere la carte du centre. */
.vote-galerie-carrousel .vote-grille::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(46rem, 120vw);
    height: min(28rem, 64vh);
    translate: -50% -50%;
    background: radial-gradient(closest-side, var(--u-fond2, #7a5a14) 0%, transparent 100%);
    opacity: 0.8;
    filter: blur(10px);
    pointer-events: none;
}

.vote-galerie-carrousel .vote-case {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(17.5rem, 62vw);
    max-width: none;
    flex: none;
    animation: none;
    transition:
        transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1),
        opacity 0.6s ease,
        filter 0.6s ease;
    will-change: transform;
}

.vote-galerie-carrousel .vote-glisse .vote-case { transition: none; }

/* La vignette devient une affiche : visuel plein cadre, nom en surimpression. */
.vote-galerie-carrousel .vote-carte {
    border-radius: 1.4rem;
    border-color: rgba(255, 255, 255, 0.14);
    background: #0b0b0e;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.95);
    -webkit-user-drag: none;
}

.vote-galerie-carrousel .vote-carte:hover { transform: none; }

.vote-galerie-carrousel .vote-carte img { -webkit-user-drag: none; pointer-events: none; }

.vote-galerie-carrousel .vote-carte-visuel { aspect-ratio: 3 / 4; }

.vote-galerie-carrousel .vote-carte-visuel::after {
    height: 62%;
    background: linear-gradient(180deg, transparent 0%, rgba(6, 6, 8, 0.94) 100%);
}

.vote-galerie-carrousel .vote-carte-corps {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem 1.15rem 1.15rem;
}

.vote-galerie-carrousel .vote-carte-nom { font-size: 1.4rem; }
.vote-galerie-carrousel .vote-carte-lieu { margin-top: 0.45rem; }

.vote-galerie-carrousel .vote-case:not(.vote-case-centre) .vote-carte-coche { opacity: 0.8; }

/* La carte du centre : liseré d'or et reflet qui la balaie. */
.vote-galerie-carrousel .vote-case-centre .vote-carte {
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow:
        0 50px 90px -30px rgba(0, 0, 0, 0.95),
        0 0 60px -18px rgba(212, 175, 55, 0.55);
}

.vote-galerie-carrousel .vote-case-centre .vote-carte[aria-pressed="true"] {
    box-shadow:
        0 0 0 2px #d4af37,
        0 50px 90px -30px rgba(0, 0, 0, 0.95),
        0 0 60px -14px rgba(212, 175, 55, 0.8);
}

.vote-galerie-carrousel .vote-case-centre .vote-carte::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.16) 45%, transparent 60%);
    translate: -100% 0;
    animation: vote-galerie-reflet 5.5s ease-in-out 0.8s infinite;
    pointer-events: none;
}

@keyframes vote-galerie-reflet {
    0% { translate: -100% 0; }
    40%, 100% { translate: 100% 0; }
}

/* Commandes. */
.vote-galerie-commandes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin: 0.2rem 0 0.35rem;
    position: relative;
    z-index: 2;
}

.vote-galerie-carrousel {
    /* Largeur de la carte du centre et hauteur de la scene : les fleches se
       calent dessus. A garder en phase avec .vote-case et .vote-grille. */
    --galerie-carte: min(17.5rem, 62vw);
    --galerie-scene: min(31rem, 70vh);
}

/* Fleches de part et d'autre de la carte du centre, a mi-hauteur de la scene.
   Verre depoli et chevron fin : elles se posent sur les cartes voisines,
   assombries, sans les masquer. */
.vote-galerie-fleche {
    position: absolute;
    top: calc(var(--galerie-scene) / 2);
    z-index: 200;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(12, 12, 16, 0.42);
    color: #f4e3b0;
    cursor: pointer;
    translate: 0 -50%;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 30px -12px rgba(0, 0, 0, 0.8);
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* Aux extremites du tambour, en dehors des cartes (demande du 22 septembre
   2026). Les cartes visibles s'etendent a 1,75 largeur de carte de part et
   d'autre du centre, mesure au navigateur ; la fleche se pose un cran plus
   loin. Sur un ecran trop etroit pour cela, elle s'arrete au bord du
   conteneur, par-dessus la derniere carte, assombrie. */
.vote-galerie-fleche-gauche { left: max(0px, calc(50% - var(--galerie-carte) * 1.75 - 1.5rem - 3.25rem)); }
.vote-galerie-fleche-droite { right: max(0px, calc(50% - var(--galerie-carte) * 1.75 - 1.5rem - 3.25rem)); }

.vote-galerie-fleche svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vote-galerie-fleche:hover:not(:disabled),
.vote-galerie-fleche:focus-visible {
    border-color: rgba(212, 175, 55, 0.75);
    background: rgba(12, 12, 16, 0.6);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 4px rgba(212, 175, 55, 0.12),
        0 14px 34px -12px rgba(0, 0, 0, 0.85);
    outline: none;
}

.vote-galerie-fleche-gauche:hover:not(:disabled) { transform: translateX(-2px); }
.vote-galerie-fleche-droite:hover:not(:disabled) { transform: translateX(2px); }
.vote-galerie-fleche:active:not(:disabled) { transform: scale(0.94); }
.vote-galerie-fleche:disabled { opacity: 0; pointer-events: none; }

.vote-galerie-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    max-width: 60vw;
}

.vote-galerie-point {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.vote-galerie-point.actif {
    width: 1.6rem;
    background: linear-gradient(90deg, #f7e6b4, #d4af37);
}

@media (prefers-reduced-motion: reduce) {
    .vote-galerie-carrousel .vote-case { transition: none; }
    .vote-galerie-carrousel .vote-case-centre .vote-carte::after { animation: none; display: none; }
}

/* Fiche de nomination -----------------------------------------------------
   La fiche n'imite pas le visuel de partage : c'est lui. Sa composition vient
   d'awards-carte.css et n'est pas redecrite ici ; ne restent que la fenetre
   qui l'accueille et le pied d'actions pose dessous. */

/* Fiche en plein ecran (22 septembre 2026). Le fond s'efface nettement : il
   ne reste que le visuel du nomine, aussi grand que la fenetre le permet, et
   son bouton pour voter. */
.vote-voile {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(40, 32, 12, 0.55), transparent 60%),
        rgba(4, 4, 8, 0.9);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    z-index: 40;
    border: 0;
    width: 100%;
    animation: vote-fondu 0.25s ease both;
}

.vote-fiche {
    --fiche-haut: 3.75rem;
    --fiche-bas: 1.75rem;
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--fiche-haut) 1rem var(--fiche-bas);
    pointer-events: none;
}

.vote-fiche > * { pointer-events: auto; }

.vote-fiche-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* La carte prend toute la hauteur disponible, au format 4:5 du visuel. */
.vote-fiche-carte {
    /* 4 rem sous la carte pour ses deux issues (24 septembre 2026). */
    width: min(calc(100vw - 2rem), calc((100dvh - var(--fiche-haut) - var(--fiche-bas) - 4rem) * 0.8), 38rem);
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow:
        0 60px 120px -40px rgba(0, 0, 0, 0.95),
        0 0 80px -30px rgba(212, 175, 55, 0.55);
    outline: 1px solid rgba(212, 175, 55, 0.4);
    animation: vote-fiche-entre 0.4s cubic-bezier(0.2, 0.75, 0.25, 1) both;
    transition: width 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* Choix pose (revu le 22 septembre 2026, a la demande de l'utilisateur).

   Telephone : une colonne. Le panneau garde sa hauteur naturelle en bas, et la
   carte prend exactement ce qui reste au-dessus : c'est sa hauteur qui fixe sa
   largeur, par le format 4:5. Plus de hauteur reservee a l'aveugle, donc plus
   d'ascenseur dans le panneau.

   Ordinateur : une rangee. La carte a gauche, le panneau a sa droite, a la
   meme hauteur. */
.vote-fiche-engagee {
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0 0;
}

.vote-fiche-engagee .vote-fiche-scene {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
}

.vote-fiche-engagee .vote-fiche-carte {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: auto;
    max-width: calc(100vw - 2rem);
    aspect-ratio: 1080 / 1350;
    transition: none;
}

.vote-fiche-identite {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-align: center;
}

.vote-fiche-identite button {
    margin-left: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold-clair);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(212, 175, 55, 0.45);
    cursor: pointer;
}

.vote-fiche-erreur { margin: 0; text-align: center; }

/* Le panneau du premier vote : en bas sur un telephone, a droite de la carte
   sur un ordinateur. Toujours dans le flux de la fiche, jamais en surimpression. */
.vote-feuille {
    position: relative;
    z-index: 55;
    flex: none;
    width: 100%;
    max-height: 72dvh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.6rem 1.1rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
    background: linear-gradient(180deg, rgba(22, 19, 12, 0.97), rgba(8, 8, 11, 0.98));
    box-shadow: 0 -30px 80px -30px rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 240, 200, 0.08) inset;
    animation: vote-feuille-monte 0.4s cubic-bezier(0.2, 0.75, 0.25, 1) both;
    scrollbar-width: thin;
}

.vote-feuille-poignee {
    display: block;
    width: 2.6rem;
    height: 0.25rem;
    margin: 0 auto 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.vote-feuille-titre {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--texte);
    margin: 0 0 0.35rem;
}

.vote-feuille-intro {
    margin: 0 0 0.9rem;
    color: var(--texte-doux);
    font-size: 0.85rem;
    line-height: 1.5;
}

.vote-feuille .vote-optin-bouton { margin-top: 0.9rem; }
.vote-feuille .vote-optin-note { margin-top: 0.75rem; }

@keyframes vote-fondu { from { opacity: 0; } to { opacity: 1; } }

@keyframes vote-fiche-entre {
    from { opacity: 0; scale: 0.94; translate: 0 1rem; }
    to { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes vote-feuille-monte {
    from { translate: 0 100%; }
    to { translate: 0 0; }
}

@keyframes vote-feuille-glisse {
    from { opacity: 0; translate: 2rem 0; }
    to { opacity: 1; translate: 0 0; }
}

/* Ordinateur : la carte a gauche, le panneau a sa droite, meme hauteur. */
@media (min-width: 900px) {
    .vote-fiche-engagee {
        --fiche-hauteur: min(calc(100dvh - 6rem), 46rem);
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(1.5rem, 3vw, 2.75rem);
        padding: 3.75rem 2rem 2.25rem;
    }

    .vote-fiche-engagee .vote-fiche-scene {
        flex: 0 1 auto;
        width: auto;
        height: var(--fiche-hauteur);
        padding: 0;
    }

    .vote-fiche-engagee .vote-fiche-carte { max-width: none; }

    .vote-feuille {
        align-self: center;
        width: min(26rem, 38vw);
        max-height: var(--fiche-hauteur);
        padding: 1.6rem 1.6rem 1.4rem;
        border-bottom: 1px solid rgba(212, 175, 55, 0.4);
        border-radius: 1.4rem;
        box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 60px -30px rgba(212, 175, 55, 0.4);
        animation-name: vote-feuille-glisse;
    }

    .vote-feuille-poignee { display: none; }

    /* Colonne etroite : les deux champs l'un sous l'autre. */
    .vote-feuille .vote-optin-champs { grid-template-columns: minmax(0, 1fr); }

    .vote-feuille-titre { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vote-voile, .vote-fiche-carte, .vote-feuille { animation: none; }
    .vote-fiche-carte, .vote-fiche-scene { transition: none; }
}

.vote-panneau-fermer {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(12, 12, 16, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.2s ease, color 0.2s ease, rotate 0.25s ease;
}

.vote-panneau-fermer svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.vote-panneau-fermer:hover { color: #fff; border-color: rgba(212, 175, 55, 0.7); rotate: 90deg; }

/* Les lumieres de la carte scintillent, en ligne seulement (demande du
   17 septembre 2026). Cette feuille n'entre pas dans le PNG partage, qui garde
   son bokeh fige. Chaque bulle bat a son rythme, donne par son rang ; la lueur
   de fond respire plus lentement. */
.pq-carte:not(.pq-carte-annonce) .pq-bulle {
    animation: pq-lueur var(--duree, 6s) ease-in-out var(--retard, 0s) infinite;
    will-change: opacity, scale;
}

.pq-carte:not(.pq-carte-annonce) .pq-halo {
    animation: vote-respiration 9s ease-in-out infinite;
}

@keyframes pq-lueur {
    0%, 100% { opacity: calc(var(--o, 0.5) * 0.3); scale: 0.8; translate: -50% -50%; }
    50% { opacity: var(--o, 0.5); scale: 1.12; translate: -50% calc(-50% - 0.35cqw); }
}

@media (prefers-reduced-motion: reduce) {
    .pq-carte:not(.pq-carte-annonce) .pq-bulle,
    .pq-carte:not(.pq-carte-annonce) .pq-halo {
        animation: none;
    }
}

/* Le bouton du visuel vote : il doit reagir comme un bouton, sans cesser
   d'etre le dessin decrit par le gabarit. */
button.pq-cta {
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.15s ease;
}

button.pq-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
button.pq-cta:active { transform: translateY(0); }

/* Choix deja pose, ou categorie deja tranchee : le bouton garde sa place dans
   la composition, mais il perd sa matiere. L'or plein est reserve a ce qui
   reste a faire — ici « Confirmer mon vote », dans la colonne d'a cote : deux
   pavés dorés cote a cote laissaient le votant chercher lequel comptait.

   Le contour et le creux sombre suffisent a dire l'etat, et le pied de la
   carte reste dessine. */
.pq-cta-inerte {
    background: rgba(9, 9, 13, 0.55);
    border: max(1px, calc(2 * var(--px))) solid rgba(226, 193, 106, 0.6);
    outline-color: rgba(226, 193, 106, 0.28);
    color: #e7d9a8;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* La coche dit « c'est pris en compte » avant meme qu'on lise le libelle. */
.pq-cta-inerte .pq-cta-1::before {
    content: "\2713";
    margin-right: calc(14 * var(--px));
    color: var(--gold);
}

/* L'etat definitif porte deux libelles plus longs que le bouton de campagne.
   Le cadre ne change pas de proportions : seule la typographie se resserre,
   sur deux lignes stables qui ne se chevauchent jamais. */
.pq-cta-deja {
    gap: calc(7 * var(--px));
}

.pq-cta-deja .pq-cta-1 {
    font-size: calc(33 * var(--px));
    line-height: 1;
    white-space: nowrap;
}

.pq-cta-deja .pq-cta-2 {
    font-size: calc(36 * var(--px));
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Pied d'actions ----------------------------------------------------------- */

.vote-fiche-bas {
    padding: 1.15rem 1.15rem 1.4rem;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.vote-partage-titre {
    color: #e7d9a8;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.75rem;
}

.vote-partage-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.vote-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: none;
    color: var(--gold-clair);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.vote-pastille:hover {
    border-color: var(--gold);
    color: var(--texte);
    background: rgba(212, 175, 55, 0.12);
}

/* Les reseaux reprennent les boutons circulaires du visuel de reference. Le
   libelle reste porte par aria-label dans le HTML. */
.vote-pastille-reseau {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-width: 1.5px;
    border-color: rgba(212, 175, 55, 0.72);
}

.vote-pastille-reseau svg {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

.vote-pastille-reseau svg.vote-icone-instagram { fill: none; }

/* Les navigateurs mettent les boutons en border-box, contrairement aux liens
   voisins : sans cette correction, le dernier cercle perd la largeur de ses
   deux bordures et parait plus petit. */
.vote-pastille-partage { box-sizing: content-box; }
.vote-pastille-partage:disabled { opacity: 0.55; cursor: wait; }

/* Le contenu editorial se lit, il ne se contemple pas : aligne a gauche. */
.vote-fiche-texte {
    margin-top: 1.4rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}

.vote-panneau-accroche {
    color: var(--gold);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0.9rem;
}

.vote-panneau-description { color: var(--texte-doux); line-height: 1.6; font-size: 0.9rem; }

.vote-panneau-palmares { list-style: none; padding: 0; margin: 0.9rem 0 0; }

.vote-panneau-palmares li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
    color: var(--texte-doux);
}

.vote-panneau-palmares li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--gold);
}

.vote-panneau-liens { margin-top: 1.25rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Les deux temps de la fiche -----------------------------------------------
   Poses en tete de la colonne, ils disent d'entree que le bouton de la carte
   ne clot pas l'affaire. C'est ce qui rend lisible sa disparition au clic :
   l'etape passe a la suivante, elle ne s'evapore pas. */
.vote-pas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.9rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.vote-pas li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.2s ease;
}

.vote-pas-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.66rem;
    letter-spacing: 0;
}

.vote-pas-actif { color: var(--gold-clair); }
.vote-pas-actif .vote-pas-rang { border-color: var(--gold); background: rgba(212, 175, 55, 0.14); }

/* L'etape franchie garde sa lisibilite, sans tirer l'oeil : le chiffre cede
   la place a une coche. */
.vote-pas-fait { color: rgba(231, 217, 168, 0.62); }
.vote-pas-fait .vote-pas-rang { font-size: 0; border-color: rgba(212, 175, 55, 0.55); }
.vote-pas-fait .vote-pas-rang::after { content: "\2713"; font-size: 0.7rem; }

/* Confirmation du vote, maquette en attente de son branchement.

   Elle n'apparait qu'une fois le choix pose : c'est le seul moment ou son
   bouton est le bouton de la fiche. D'ou l'encadre plutot qu'un simple filet,
   qui la posait au meme rang que le partage et le palmares. */
.vote-optin {
    margin-top: 0;
    padding: 1.1rem 1rem 1.15rem;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 0.85rem;
    background: rgba(212, 175, 55, 0.06);
    animation: vote-optin-entree 0.28s ease both;
}

@keyframes vote-optin-entree {
    from { opacity: 0; translate: 0 0.55rem; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vote-optin { animation: none; }
}

/* Ce qui suit l'encadre retrouve le filet de la colonne. */
.vote-optin + .vote-partage,
.vote-pas + .vote-partage {
    margin-top: 1.4rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vote-optin-surtitre {
    color: var(--gold);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.vote-optin-titre {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--texte);
    margin: 0 0 0.35rem;
}

.vote-optin-intro {
    color: var(--texte-doux);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 0.95rem;
}

/* La note de confidentialite : lue, pas contemplee. Le cadenas la signe d'un
   coup d'oeil, le texte reste gris pour ne pas disputer la vedette au bouton. */
.vote-optin-note {
    display: flex;
    align-items: start;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: var(--texte-doux);
    font-size: 0.72rem;
    line-height: 1.45;
}

.vote-optin-cadenas {
    flex: 0 0 0.9rem;
    margin-top: 0.1rem;
    color: rgba(212, 175, 55, 0.75);
}

.vote-optin-cadenas svg {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
}

.vote-optin-renoncer {
    text-align: center;
    margin-top: 0.75rem;
}

/* Se raviser ne se dispute pas la vedette avec « Confirmer mon vote » : la
   pastille redevient un lien ecrit. */
.vote-optin-renoncer .vote-lien {
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: var(--texte-doux);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-color: rgba(255, 255, 255, 0.28);
}

.vote-optin-renoncer .vote-lien:hover {
    color: var(--gold-clair);
    text-decoration-color: currentColor;
}

.vote-optin-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.vote-optin-champ { display: block; min-width: 0; }

.vote-optin .vote-recherche,
.vote-feuille .vote-recherche,
.vote-bulletin-formulaire .vote-recherche {
    box-sizing: border-box;
    max-width: none;
    margin: 0;
}

.vote-optin-bouton {
    width: 100%;
    justify-content: center;
    margin-top: 0.9rem;
}

/* Meme matiere que le bouton de la carte de nomination. Aucun contour ajoute :
   le degrade porte seul le bouton, comme sur « Votez pour nous ». */
.vote-optin .vote-optin-bouton,
.vote-feuille .vote-optin-bouton,
.vote-bulletin-formulaire .vote-optin-bouton {
    min-height: 3.2rem;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
    color: #171109;
    font-size: clamp(0.78rem, 2.2vw, 0.94rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.1;
    box-shadow: 0 12px 28px -18px rgba(212, 175, 55, 0.72);
}

.vote-optin .vote-optin-bouton:hover,
.vote-feuille .vote-optin-bouton:hover,
.vote-bulletin-formulaire .vote-optin-bouton:hover {
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
    color: #171109;
    filter: brightness(1.06);
}

@media (max-width: 519px) {
    .vote-optin-champs { grid-template-columns: 1fr; }
}

/* Page publique d'un nomine ------------------------------------------------
   Cible des partages : la carte y est la page, pas une illustration posee
   dessus. */

.vote-nomine {
    /* Reprise du rembourrage de « vote-conteneur », comme la page d'accueil. */
    max-width: calc(30rem + 2 * 1.25rem);
    padding-top: 2.25rem;
    padding-bottom: 4rem;
}

.vote-nomine-carte {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 40px 80px -35px rgba(0, 0, 0, 0.9);
}

/* Introduction (24 septembre 2026) : ce que sont les Awards, pour qui ouvre
   un lien partage sans rien en savoir. Surtitre dans la langue du libelle de
   partage, titre en Playfair comme l'encart du lot, texte doux. */
.vote-nomine-intro {
    margin-top: 1.9rem;
    text-align: center;
    color: var(--texte-doux);
    font-size: 0.92rem;
    line-height: 1.6;
}

.vote-nomine-intro p + p { margin-top: 0.55rem; }

.vote-nomine-intro .vote-nomine-intro-surtitre {
    color: #e7d9a8;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
}

.vote-nomine-intro .vote-nomine-intro-titre {
    margin: 0.35rem 0 0.8rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.3rem, 4.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: #f6ecd0;
}

.vote-nomine-actions {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

/* Sous le bouton de vote de la page d'un nomine. Le conteneur est deja une
   colonne centree avec son propre ecart : la marge du haut, heritee de la
   version du tunnel, s'y ajouterait deux fois. */
.vote-faits-nomine {
    margin-top: 0.1rem;
}

.vote-nomine-pied {
    margin-top: 1.9rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.vote-nomine-retour { margin-top: 2.25rem; text-align: center; }

/* Meme partition que la fiche du tunnel : la carte a gauche, les actions et
   le texte a droite. La carte reste collee en haut tant que la colonne de
   droite defile — c'est elle qu'on est venu voir. */
@media (min-width: 900px) {
    .vote-nomine {
        max-width: calc(62rem + 2 * 1.25rem);
        display: grid;
        grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
        column-gap: 3rem;
        align-items: start;
    }

    .vote-nomine-carte {
        grid-column: 1;
        grid-row: 1 / span 4;
        position: sticky;
        top: 2rem;
    }

    .vote-nomine-intro,
    .vote-nomine-actions,
    .vote-nomine-pied,
    .vote-nomine-retour { grid-column: 2; }

    .vote-nomine-intro { margin-top: 0.4rem; }

    .vote-nomine-retour { margin-top: 1.75rem; }
}

/* Navigation -------------------------------------------------------------- */

.vote-pied {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9, 9, 12, 0.82);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.85rem 1.25rem;
    z-index: 30;
}

.vote-pied-interne {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Les deux boutons de navigation ne se coupent jamais : sur un telephone,
   « Passer cette categorie » tombait sur trois lignes et le pied doublait de
   hauteur. C'est l'etat, au milieu, qui cede la place. */
.vote-pied-interne > a,
.vote-pied-interne > button { flex: none; white-space: nowrap; }

.vote-pied-interne > .vote-etat {
    min-width: 0;
    text-align: center;
}

/* Sous six cents pixels l'etat disparait plutot que de s'abreger en « A... » :
   la carte choisie est deja soulignee d'or et le bouton de droite passe de
   « Passer » a « Suivant ». La phrase ne dit rien que l'ecran ne montre. */
@media (max-width: 599px) {
    .vote-pied-interne > .vote-etat { display: none; }

    .vote-pied-interne > a { padding-inline: 1.1rem; }
}

.vote-bouton,
.vote-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
}

.vote-lien {
    color: var(--texte-doux);
    border-color: rgba(255, 255, 255, 0.16);
    background: transparent;
}

.vote-lien:hover { color: var(--texte); border-color: var(--gold); }

/* Le pied porte le meme filet or que la barre de progression. */
.vote-pied::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}

.vote-bouton {
    background: linear-gradient(180deg, #f7e6b4 0%, #dcb94c 46%, #c39a2f 100%);
    border: 2px solid #f3e3b6;
    color: var(--u-encre, #0d0d0d);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.7rem 1.6rem;
    box-shadow: 0 14px 30px -18px rgba(212, 175, 55, 0.9);
}

.vote-bouton:hover {
    background: linear-gradient(180deg, #fdf3d4 0%, #e8c964 46%, #cfa838 100%);
}

.vote-etat { color: var(--texte-doux); font-size: 0.8rem; }

/* Écrans d'attente et récapitulatif ---------------------------------------- */

.vote-message {
    max-width: 34rem;
    margin: 6rem auto;
    text-align: center;
}

.vote-message h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #efe0b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vote-message p { color: var(--texte-doux); line-height: 1.65; }

/* Sur l'ecran de remerciement, l'en-tete porte deja le titre et son separateur :
   la marge de six rem des messages autonomes creait un grand vide inutile
   avant la phrase de confirmation. */
.vote-message-merci {
    margin: 0.75rem auto 2.5rem;
}

/* Relais facultatif apres la premiere voix confirmee. L'Instagram garde la
   priorite ; ce bloc vient ensuite et ne presente jamais les autres categories
   comme un bulletin qu'il faudrait terminer. */
.vote-suite {
    max-width: 42rem;
    margin: 2rem auto 0;
    padding: 1.35rem 1.4rem;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 0.9rem;
    background: rgba(212, 175, 55, 0.06);
    text-align: center;
}

.vote-suite-titre {
    margin: 0 0 0.55rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    color: var(--texte);
}

.vote-suite > p:not(.vote-optin-surtitre) {
    color: var(--texte-doux);
    font-size: 0.95rem;
    line-height: 1.55;
}

.vote-suite-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.1rem;
}

@media (max-width: 519px) {
    .vote-suite-actions {
        flex-direction: column;
    }

    .vote-suite-actions .vote-bouton,
    .vote-suite-actions .vote-lien {
        width: 100%;
        justify-content: center;
    }
}

/* Chaque choix devient une carte bordee d'or plutot qu'une ligne de tableau :
   c'est un palmares, pas un panier. */
.vote-recap-ligne {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(10, 10, 12, 0.86) 60%);
}

.vote-recap-vignette {
    position: relative;
    width: 3rem;
    height: 4rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.14), transparent 65%),
        var(--surface-haute);
    border: 1px solid rgba(212, 175, 55, 0.18);
    flex-shrink: 0;
}

.vote-recap-vignette img { width: 100%; height: 100%; object-fit: cover; }

/* Sans visuel, la vignette annonce qu'elle en attend un. */
.vote-recap-vignette:not(:has(img))::after {
    content: '';
    position: absolute;
    inset: 0.3rem;
    border: 1px dashed rgba(212, 175, 55, 0.35);
    border-radius: 0.25rem;
}

.vote-recap-categorie {
    color: #e7d9a8;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
}

/* Le nom du choix reprend la serif des noms de nomines. */
.vote-recap-ligne strong {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
}

.vote-recap-actions { margin-left: auto; display: flex; gap: 0.5rem; }

/* Formulaire d'identification ---------------------------------------------- */

.vote-identite .vote-entete {
    max-width: 42rem;
}

.vote-identite .vote-entete .vote-titre {
    max-width: 38rem;
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    line-height: 1.08;
}

.vote-identite .vote-chapeau {
    max-width: 44rem;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
}

.vote-identite-formulaire {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
}

.vote-champ { display: block; margin-bottom: 1.15rem; }

.vote-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: 0.4rem;
}

.vote-consentement {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--texte-doux);
    line-height: 1.55;
    cursor: pointer;
}

.vote-consentement input {
    flex: 0 0 auto;
    margin-top: 0.22rem;
    accent-color: var(--gold);
}

.vote-identite-formulaire .vote-recherche {
    max-width: none;
    min-height: 3.15rem;
    margin-bottom: 0;
    font-size: 1rem;
}

.vote-identite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.vote-identite-regle {
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 519px) {
    .vote-identite .vote-entete .vote-titre {
        font-size: clamp(1.55rem, 8vw, 1.9rem);
    }

    .vote-identite .vote-chapeau {
        margin-bottom: 1.35rem;
    }

    .vote-identite-actions {
        flex-direction: column;
    }

    .vote-identite-actions .vote-lien,
    .vote-identite-actions .vote-bouton {
        width: 100%;
        justify-content: center;
    }
}

.vote-erreur { color: #ff8f8f; font-size: 0.8rem; margin: -0.6rem 0 0.8rem; }

/* Classements ------------------------------------------------------------- */

.vote-vague-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bord);
    margin-bottom: 1.5rem;
}

.vote-badge {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

.vote-badge-open { background: rgba(212, 175, 55, 0.18); color: var(--gold-clair); }
.vote-badge-closed,
.vote-badge-revealed { background: rgba(255, 255, 255, 0.1); color: var(--texte-doux); }

/* Un classement est un bloc a part entiere, borde comme les cartes. */
.vote-classement {
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.15rem 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 10, 12, 0.82) 55%);
}

.vote-classement-titre {
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #efe0b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vote-classement-liste { list-style: none; margin: 0; padding: 0; }

.vote-classement-ligne {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vote-classement-liste li:last-child { border-bottom: none; }

.vote-rang {
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
}

/* Le podium se distingue : premier en or plein, encre sombre. */
.vote-classement-ligne:first-child .vote-rang {
    background: linear-gradient(180deg, #f7e6b4 0%, #dcb94c 46%, #c39a2f 100%);
    border-color: #f3e3b6;
    color: #0d0d0d;
    box-shadow: 0 6px 16px -8px rgba(212, 175, 55, 0.9);
}

.vote-classement-nom {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.vote-classement-nom { display: block; font-weight: 600; font-size: 0.92rem; }

.vote-jauge {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    margin-top: 0.4rem;
    overflow: hidden;
    max-width: 22rem;
}

.vote-jauge-remplissage {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-clair));
    border-radius: 999px;
    transition: width 0.4s ease;
}

.vote-score {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 3.5rem;
    text-align: right;
}

/* Landing du concours -----------------------------------------------------
   La racine /awards n'est plus le premier pas force d'un tunnel de dix-
   neuf prix. Elle expose la promesse, puis laisse chacun entrer par la
   categorie qu'il connait. Le langage reste celui des Awards : noir mat,
   filets d'or, Playfair et lumiere chaude du terrain. */

.vote-landing {
    /* Meme reprise que « vote-conteneur », dont elle reprend le rembourrage. */
    max-width: calc(76rem + 2 * 1.25rem);
    padding-top: clamp(1.25rem, 3vw, 2.4rem);
}

.vote-landing-entete {
    position: relative;
    /* C'est cette borne qui commande toute la largeur de l'en-tete : le
       bandeau et la rangee du titre s'y heurtaient bien avant leurs propres
       maximums. Elle s'ouvre avec l'intitule agrandi. */
    max-width: 66rem;
    margin-inline: auto;
    text-align: center;
}

.vote-landing-entete::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -1rem;
    left: 50%;
    /* Jamais plus large que l'ecran (24 septembre 2026) : a 115 % de
       l'en-tete, elle depassait de 26 px a droite sur un telephone de 390 px,
       qui elargissait alors toute la page a 394 px et la dezoomait. Sur
       ordinateur, les 48 rem l'emportent toujours : rien n'y change. */
    width: min(48rem, 115%, 100vw);
    aspect-ratio: 2 / 1;
    translate: -50% 0;
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.16), transparent 68%);
    pointer-events: none;
}

/* Agrandi le 22 septembre 2026, a la demande de l'utilisateur : a 208 px il
   s'effacait devant le bandeau et l'intitule. 304 px sur bureau, 208 au
   telephone ; le bouton du concours reste au-dessus de la ligne de flottaison.
   Le PNG servi fait 900 px pour rester net en 2x et 3x. */
.vote-landing-entete .vote-logo {
    flex: none;
    width: clamp(14rem, 34vw, 22rem);
    /* Sa marge automatique le centrait seul sur sa ligne ; entre les palmes,
       elle les repousserait aux bords. L'espace sous lui passe a l'embleme. */
    margin: 0;
}

/* Seconde moitie de la phrase ouverte par le surtitre. Elle se distingue de
   lui par tout ce qu'il est : lui est une etiquette, capitales d'or tres
   espacees ; elle est une phrase, bas-de-casse en ivoire, plus grande et
   presque sans interlettre. Sans cet ecart les deux lignes se seraient
   repondues en echo au lieu de se completer. */
.vote-accroche {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    margin: clamp(0.9rem, 2.2vw, 1.5rem) auto 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.02rem, 2.4vw, 1.8rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: rgba(247, 238, 214, 0.92);
    /* Le bas du bandeau est fondu au noir mais reste photographique : l'ombre
       tient la ligne lisible quel que soit le tirage du jour. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* Entree du surtitre et ecriture de l'accroche (22 septembre 2026, a la
   demande de l'utilisateur). Le surtitre se resserre en apparaissant ; la
   machine a ecrire est posee par vote-apparition.js, qui decoupe l'accroche
   en lettres invisibles, sans curseur (retire a la demande de l'utilisateur) :
   la ligne occupe donc sa place finale des le depart
   et rien ne bouge autour d'elle. Sans script, le texte s'affiche tel quel. */
.vote-landing-entete .vote-surtitre {
    animation: vote-surtitre-entre 1.1s cubic-bezier(0.19, 0.82, 0.28, 1) 0.15s backwards;
}

@keyframes vote-surtitre-entre {
    from {
        opacity: 0;
        letter-spacing: 0.42em;
        filter: blur(6px);
        transform: translateY(0.35em);
    }
}

.vote-accroche-lettre {
    opacity: 0;
    /* Le fondu vaut pour l'effacement d'ensemble : toutes les lettres
       s'eteignent en meme temps, en 0,4 s. */
    transition: opacity 0.4s ease;
}

/* A l'ecriture, chaque lettre apparait plus vite. */
.vote-accroche-lettre.est-ecrite { transition-duration: 0.18s; }

.vote-accroche-lettre.est-ecrite { opacity: 1; }

/* Texte integral pour les lecteurs d'ecran, qui ne liraient sinon que des
   lettres isolees. */
.vote-accroche-lu {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vote-etapes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1.4vw, 0.95rem);
    margin: clamp(0.9rem, 1.8vw, 1.15rem) 0 0;
    padding: 0;
    list-style: none;
}

.vote-etape {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* La pastille donne au pictogramme un fond stable : pose a meme le cadre, il
   se perdait dans le degrade et dans la brume du telephone. */
.vote-etape-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* Le diametre visait le disque et non son filet : deux pixels sont
       rajoutes pour que la pastille garde sa taille. */
    width: calc(clamp(2.1rem, 4.4vw, 2.75rem) + 2px);
    aspect-ratio: 1;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.09), rgba(8, 8, 9, 0.9) 68%);
    color: var(--gold-clair);
    box-shadow: inset 0 1px 0 rgba(255, 244, 204, 0.1);
}

.vote-etape-pastille svg {
    width: 54%;
    height: 54%;
    display: block;
}

/* Seul element en couleur de la page : c'est voulu. Le votant doit
   reconnaitre Instagram avant meme d'avoir lu la ligne. */
.vote-etape-instagram .vote-etape-pastille {
    border-color: rgba(238, 42, 123, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 22px -8px rgba(238, 42, 123, 0.75);
}

.vote-etape-instagram .vote-etape-pastille svg {
    width: 60%;
    height: 60%;
}

.vote-etape-texte {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: #f3db99;
    font-size: clamp(0.72rem, 1.2vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vote-etape-texte strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.45em;
    color: #fff8e3;
}

.vote-etape-signe {
    color: rgba(255, 255, 255, 0.42);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

/* ------------------------------------------------------------------------
   La fumee, en mouvement.

   Deux nappes plutot qu'une : une seule image qui derive se lit comme une
   image qui derive. Deux copies de la meme nappe, a des vitesses, des
   echelles et des phases differentes, ne repassent jamais ensemble au meme
   endroit — c'est ce decalage qui fait la fumee, pas le deplacement.

   Les durees sont premieres entre elles et la seconde part avec un retard
   negatif : la composition complete ne se reforme qu'au bout de plusieurs
   minutes, bien au-dela du temps passe sur la page.

   Seules l'echelle, la translation et l'opacite bougent — trois proprietes
   que le compositeur traite sans refaire la mise en page. Le filtre et le
   mode de fusion restent sur le parent, donc calcules une fois pour les deux
   nappes et non deux fois par image.
   ------------------------------------------------------------------------ */

.vote-suivre-brume::before,
.vote-suivre-brume::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/awards/brume-iphone.webp') right bottom / contain no-repeat;
    /* La nappe enfle depuis le pied du telephone, la ou la fumee est censee
       naitre, et non depuis le centre de sa boite. */
    transform-origin: 84% 100%;
}

.vote-suivre-brume::before {
    animation: vote-brume-lente 23s ease-in-out infinite;
}

.vote-suivre-brume::after {
    animation: vote-brume-haute 31s ease-in-out infinite;
    animation-delay: -11s;
}

@keyframes vote-brume-lente {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.82;
    }
    50% {
        transform: translate3d(-3.2%, -2.4%, 0) scale(1.11);
        opacity: 1;
    }
}

@keyframes vote-brume-haute {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1.09);
        opacity: 0.42;
    }
    50% {
        transform: translate3d(3.8%, -3.6%, 0) scale(1);
        opacity: 0.72;
    }
}

/* Les categories sont des portes, pas des formulaires. Toute la carte est un
   lien, ce qui donne une cible confortable au pouce et rend le parcours
   evident avant meme de lire le bouton. */
/* ------------------------------------------------------------------------
   Encart du lot, sous le hero (22 septembre 2026).

   Meme famille que l'encart du concours en bas de page (cadre d'or, fond
   noir chaud, hachures fines), mais un autre role : celui du bas explique la
   formule, celui-ci donne envie de commencer. Le telephone est un gros plan
   dont le detourage est coupe en bas : il sort du coin droit, rogne par le
   cadre, et c'est ce rognage qui en fait un objet qu'on a envie de voir en
   entier.
   ------------------------------------------------------------------------ */

.vote-lot {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 25vw, 19.5rem);
    max-width: 66rem;
    margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
    /* Pas d'overflow: hidden : le telephone deborde par le haut du cadre
       (demande du 22 septembre 2026). Le rognage du bas est porte par
       « .vote-lot-produit ». */
    border: 1px solid rgba(224, 185, 75, 0.58);
    border-radius: 1.35rem;
    background:
        linear-gradient(105deg, rgba(7, 7, 8, 0.97) 0%, rgba(15, 12, 8, 0.93) 55%, rgba(44, 30, 10, 0.82) 100%);
    box-shadow:
        0 34px 90px -42px rgba(0, 0, 0, 0.95),
        0 0 54px -28px rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 244, 204, 0.08);
    text-align: left;
}

.vote-lot::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(125deg, transparent 0 26px, rgba(255, 255, 255, 0.014) 26px 27px);
    pointer-events: none;
}

.vote-lot-copie {
    position: relative;
    z-index: 2;
    grid-column: 1;
    align-self: center;
    padding: clamp(1.15rem, 2.2vw, 1.6rem) 0 clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.4rem, 3.2vw, 2.5rem);
    /* Le titre se regle sur la largeur de cette colonne, pas sur l'ecran. */
    container-type: inline-size;
}

.vote-lot-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.45rem;
    color: var(--gold-clair);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.vote-lot-badge::before {
    content: '';
    width: 1.7rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--gold-clair));
}

/* Deux temps, comme le titre du bas : la cause en ivoire, le lot en or. */
.vote-lot-titre {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    /* Proportionnelle a la colonne (cqi) : « Soutenez vos favoris et tentez
       au passage » tient sur une ligne des qu'il y a la place, et le titre
       sur deux (22 septembre 2026 ; sur trois, « passage » restait seul).
       Sous le plancher, au telephone, les lignes s'equilibrent. */
    font-size: clamp(1.45rem, 5.3cqi, 2.15rem);
    font-weight: 700;
    line-height: 1.1;
    padding-bottom: 0.06em;
    color: #fbf3dd;
    text-wrap: balance;
}

/* Le texte en degrade est peint dans la boite de la ligne : a 1,1
   d'interligne, le jambage du « g » en sortait et etait coupe. Le rembourrage
   agrandit la boite, la marge negative rend l'espace. */
.vote-lot-titre span {
    display: block;
    text-wrap: balance;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vote-lot-texte {
    max-width: 41rem;
    margin: 0.6rem 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.82rem, 1.3vw, 0.9rem);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Le compte Instagram cite dans le texte des deux encarts du concours est
   un lien (22 septembre 2026) : en or, sans soulignement (demande de
   l'utilisateur), il passe au blanc au survol. */
.vote-lien-instagram {
    color: var(--gold-clair);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vote-lien-instagram:hover,
.vote-lien-instagram:focus-visible {
    color: #fff;
}

.vote-lien-instagram:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

.vote-lot-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.4rem;
    margin-top: 0.95rem;
}

.vote-lot-cta {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid #e4c461;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4df9e 0%, #d4af37 58%, #b88e20 100%);
    box-shadow: 0 12px 30px -15px rgba(212, 175, 55, 0.9);
    color: #151006;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

/* Un trait de lumiere parcourt les boutons des deux encarts du jeu pour les
   designer (22 septembre 2026, a la demande de l'utilisateur) : un passage de 1,8 s (0,9 s juge
   trop rapide), puis trois secondes de repos, pour attirer l'oeil sans clignoter. Le reflet passe sous
   le texte : le bouton est son propre contexte d'empilement, et un enfant en
   z-index negatif s'y peint au-dessus du fond mais sous le libelle. Premier
   passage apres l'ecriture de l'accroche. */
.vote-lot-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.vote-lot-cta::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 252, 235, 0) 20%,
        rgba(255, 250, 228, 0.55) 46%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 250, 228, 0.55) 54%,
        rgba(255, 252, 235, 0) 80%,
        transparent 100%);
    translate: -120% 0;
    pointer-events: none;
    animation: vote-lot-cta-reflet 5s cubic-bezier(0.4, 0, 0.35, 1) 3.2s infinite;
}

@keyframes vote-lot-cta-reflet {
    0% { translate: -120% 0; }
    36%, 100% { translate: 360% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vote-lot-cta::after { animation: none; display: none; }
}

.vote-lot-cta:hover,
.vote-lot-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -16px rgba(212, 175, 55, 1);
}

.vote-lot-preuves {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
}

.vote-lot-preuves > li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.vote-lot-preuves > li::before {
    content: '';
    flex: none;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--gold);
}

.vote-lot-echeance {
    margin: 0.9rem 0 0;
    color: rgba(234, 209, 131, 0.88);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Le calque du telephone monte de 5 rem au-dessus du cadre et s'arrete a
   son bord bas : le haut du telephone franchit le filet d'or, le bas reste
   rogne par l'arrondi de l'encart. */
.vote-lot-produit {
    position: absolute;
    z-index: 1;
    top: -8rem;
    right: 0;
    bottom: 0;
    /* Toute la largeur de l'encart : le calque ne sert qu'a rogner le bas.
       Plus etroit, il coupait le flanc du telephone vers 768 px. */
    left: 0;
    overflow: hidden;
    border-radius: 0 0 calc(1.35rem - 1px) calc(1.35rem - 1px);
    pointer-events: none;
}

/* La lumiere chaude vient de derriere le bloc photo, comme un reflet de
   scene sur le titane. Elle reste dans le cadre : au-dessus, elle aurait
   sali le fond de la page. */
.vote-lot-halo {
    position: absolute;
    z-index: 0;
    top: 6rem;
    right: -4rem;
    width: 26rem;
    aspect-ratio: 1;
    /* « closest-side » : le degrade s'eteint avant le bord de sa boite, sans
       quoi le halo montrait une arete droite quand l'encart s'empile. */
    background: radial-gradient(closest-side, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.08) 55%, transparent 100%);
}

.vote-lot-produit img {
    position: absolute;
    z-index: 1;
    /* Ancree par le bas, sous le bord de l'encart : la coupe nette du
       detourage tombe toujours hors du cadre, sans fondu marque (le flou du
       bas deplaisait, 22 septembre 2026). Le debordement par le haut vaut
       donc la hauteur de l'image moins celle de l'encart. */
    top: auto;
    bottom: -2.2rem;
    right: -1.4rem;
    width: clamp(21.5rem, 28vw, 24.5rem);
    max-width: none;
    height: auto;
    filter: drop-shadow(-16px 22px 26px rgba(0, 0, 0, 0.75));
    -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
}

/* Lien vers Instagram, a cote du bouton de vote (22 septembre 2026) : le
   logo trace en degrade, sans pastille, et « Suivez-nous ». Dans le flux,
   il ne peut plus chevaucher ni le texte ni le telephone. */
.vote-lot-insta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.2rem 0.3rem;
    border-radius: 0.6rem;
    text-decoration: none;
}

.vote-lot-insta svg {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 0 9px rgba(214, 41, 118, 0.45));
    transition: transform 0.24s ease, filter 0.24s ease;
}

.vote-lot-insta span {
    color: var(--gold-clair);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: color 0.24s ease, border-color 0.24s ease;
}

.vote-lot-insta:hover svg,
.vote-lot-insta:focus-visible svg {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(214, 41, 118, 0.7));
}

.vote-lot-insta:hover span,
.vote-lot-insta:focus-visible span {
    color: #fff;
    border-color: rgba(245, 227, 181, 0.6);
}

.vote-lot-insta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Les trois reassurances passent sous les deux actions. */
.vote-lot-preuves { flex-basis: 100%; }

@media (max-width: 1023px) {
    /* Sous 1024 px, le gros plan passe au-dessus du texte, en bandeau qui
       deborde lui aussi par le haut du cadre. Cote a cote, le texte s'allonge,
       l'encart grandit, le telephone ancre par le bas ne depasse plus, et le
       vide qui accueille le logo d'Instagram devient trop etroit. */
    .vote-lot {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 4.2rem;
        border-radius: 1.2rem;
    }

    .vote-lot-produit {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: auto;
        left: auto;
        height: 8.5rem;
        margin-top: -3.4rem;
        overflow: visible;
        border-radius: 0;
    }

    .vote-lot-produit img {
        top: 0;
        bottom: auto;
        right: 0.4rem;
        width: clamp(13.5rem, 34vw, 17rem);
        -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 82%);
        mask-image: linear-gradient(180deg, #000 45%, transparent 82%);
    }

    .vote-lot-halo { top: -2rem; right: -2rem; width: min(22rem, 85%); }
    /* Rangs explicites : la copie est placee en colonne 1 pour le bureau, et
       un element place explicitement passe avant « order » ; sans cela le
       telephone tombait sous le texte. */
    .vote-lot-produit { grid-row: 1; }

    .vote-lot-copie {
        grid-row: 2;
        padding: 0 1.2rem 1.25rem;
    }
}

/* Tres petits telephones (320 px) : le bouton passait hors de sa pilule. */
@media (max-width: 359px) {
    .vote-lot-cta {
        white-space: normal;
        letter-spacing: 0.06em;
        text-align: center;
    }
}

/* ------------------------------------------------------------------------
   Animations demandees le 22 septembre 2026 pour dynamiser l'accueil.

   1. L'iPhone des deux encarts apparait et monte en place au premier
      defilement, pas avant (celui du bas quand on arrive dessus). Le
      flottement continu essaye le meme jour a ete retire : trop
      d'animation. L'etat d'attente n'est pose que par le script
      (data-flotte="attente") : sans lui, le telephone est la, immobile.
   2. Le titre : les lauriers se deploient depuis leur tige, puis un reflet
      traverse « Padel Quest Awards », une seule fois.
   ------------------------------------------------------------------------ */

.vote-lot-produit img {
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

[data-flotte="attente"] .vote-lot-produit img {
    opacity: 0;
    transform: translateY(2.6rem);
}

.vote-landing-entete .vote-laurier {
    transform-origin: 50% 100%;
    animation: vote-laurier-deploie 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

/* « rotate » et « scale » plutot que « transform » : le laurier de droite
   porte deja un scaleX(-1), qui retourne aussi le sens de la rotation. */
@keyframes vote-laurier-deploie {
    from { opacity: 0; rotate: -32deg; scale: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .vote-lot-produit img,
    .vote-landing-entete .vote-laurier {
        animation: none;
        transition: none;
    }
}

.vote-categories {
    /* Resserre le 24 septembre 2026 : l'en-tete de la section est devenu une
       seule ligne, 116 px d'air au-dessus d'elle la detachaient de l'encart. */
    padding-top: clamp(3rem, 6vw, 5rem);
    scroll-margin-top: 1rem;
}

/* ------------------------------------------------------------------------
   Familles de prix.

   La classe s'appelle « vote-groupe » et non « vote-famille » : ce dernier
   nom est deja pris par le millesime du tunnel et de l'ecran de
   remerciement, qui en fait une rangee en capitales entre deux filets.

   Trois ensembles au lieu de dix-neuf cartes d'affilee. L'intertitre est
   volontairement plus discret que le titre de la section : il range, il
   n'annonce pas une nouvelle page.
   ------------------------------------------------------------------------ */

.vote-groupe + .vote-groupe {
    margin-top: clamp(2.6rem, 5.5vw, 4.4rem);
}

.vote-groupe-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
    text-align: center;
}

.vote-groupe-entete h3 {
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 2vw, 1.2rem);
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff9e9;
}

/* Deux filets qui s'effacent vers l'exterieur, comme ceux du millesime : la
   page n'a qu'une facon de poser un intertitre entre deux traits. */
.vote-groupe-entete h3::before,
.vote-groupe-entete h3::after {
    content: '';
    flex: none;
    width: clamp(1.2rem, 5vw, 3.2rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8));
}

.vote-groupe-entete h3::after {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.8), transparent);
}

/* Seule ligne de la section avant les cartes (24 septembre 2026) : un appel
   au vote, sans surtitre ni phrase d'introduction. Deux temps comme le titre
   du lot, l'appel en ivoire, la promesse en or. Plus grand que les
   intertitres de famille, qu'il chapeaute. */
.vote-categories-titre {
    max-width: 44rem;
    margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
    color: #fff9e9;
}

/* Meme reprise du jambage que dans le titre du lot : le degrade est peint
   dans la boite de la ligne, le « g » en sortait coupe. */
.vote-categories-titre span {
    display: block;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Une rangee souple plutot qu'une grille a trois colonnes : depuis que les
   prix sont ranges par famille, une famille de deux cartes laissait une
   troisieme colonne vide a sa droite, qui se lisait comme une carte
   manquante. En rangee, une fin de rangee incomplete se centre. */
.vote-categories-grille {
    --ecart: clamp(0.9rem, 2vw, 1.35rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ecart);
}

.vote-categories-grille > .vote-categorie {
    /* La bordure entre dans la largeur : sans cela, trois cartes d'un tiers
       plus deux pixels de bordure ne tiennent pas sur la rangee. */
    box-sizing: border-box;
    flex: 0 1 calc((100% - 2 * var(--ecart)) / 3);
}

.vote-categories-grille-paires > .vote-categorie {
    flex-basis: calc((100% - 3 * var(--ecart)) / 4);
}

.vote-categorie {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    /* C'est la carte, et non plus le visuel, qui porte la proportion : le
       patchwork remplit tout le cadre et le texte se pose dessus. A 5/4, les
       six cases retombent chacune en 4/5, le cadrage d'un portrait. */
    aspect-ratio: 5 / 4;
    /* Angles droits. L'arrondi etait le dernier trait du gabarit : c'est lui
       qui faisait lire ces blocs comme des cartes de catalogue. Le coin vif
       les rapproche de l'affiche, et du bandeau du hero. */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: #08080a;
    box-shadow: 0 24px 52px -34px rgba(0, 0, 0, 0.95);
    color: inherit;
    text-decoration: none;
    animation: vote-case-entre 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    animation-delay: calc(min(var(--rang, 0), 11) * 42ms);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

.vote-categorie:hover,
.vote-categorie:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.66);
    box-shadow:
        0 34px 68px -38px rgba(0, 0, 0, 1),
        0 0 38px -22px var(--categorie-accent, rgba(212, 175, 55, 0.7));
}

.vote-categorie:focus-visible {
    outline: 2px solid var(--gold-clair);
    outline-offset: 3px;
}

.vote-categorie-visuel {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--categorie-accent) 45%, transparent), transparent 58%),
        #0b0b0c;
}

/* Le lavis, a la maniere des promos de chaine : la teinte de l'univers entre
   par la gauche et se retire avant le milieu, puis le noir remonte du bas
   pour porter le texte. Deux degrades et non un seul : l'un donne sa couleur
   a la categorie, l'autre garantit la lisibilite, et melanger les deux
   revenait a choisir entre un titre illisible et un patchwork eteint. */
.vote-categorie-visuel::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(97deg,
            color-mix(in srgb, var(--categorie-accent) 68%, transparent) 0%,
            color-mix(in srgb, var(--categorie-accent) 30%, transparent) 24%,
            transparent 52%),
        linear-gradient(0deg,
            rgba(5, 5, 7, 0.55) 0%,
            rgba(5, 5, 7, 0.18) 22%,
            transparent 42%);
    pointer-events: none;
}

/* ------------------------------------------------------------------------
   Patchwork des nomines.

   Six cases, toujours : c'est ce qui permet d'afficher aussi bien les neuf
   portraits des U12 garcons que l'equipementier, qui n'en a aucun. Les cases
   sans visuel prennent l'univers de la categorie au lieu de rester vides.
   ------------------------------------------------------------------------ */

.vote-mosaique {
    /* L'inclinaison du bandeau du hero, au meme angle : les coutures verticales
       deviennent des diagonales qui traversent toute la carte. C'est le
       contraire d'une grille, et c'est ce qui distingue ces blocs de n'importe
       quelle vignette a trois colonnes.

       Le patchwork deborde de six pour cent de chaque cote : incline, il
       laisserait sinon un triangle vide en haut a gauche et en bas a droite.
       Le debord vaut la moitie de la hauteur par la tangente de l'angle, soit
       moins de cinq pour cent ; six laisse la marge. */
    --contre: skewX(7deg);
    position: absolute;
    inset: 0 -6%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    /* Un filet sombre entre les cases : sans lui, deux portraits voisins se
       touchent et le patchwork se lit comme une seule image floue. Il
       s'elargit d'un pixel, l'oblique ayant besoin de plus de place que la
       verticale pour se lire. */
    gap: 3px;
    transform: skewX(-7deg);
}

.vote-mosaique-case {
    position: relative;
    overflow: hidden;
    background: #0a0a0b;
}

/* Les six cases se posent l'une apres l'autre plutot que d'apparaitre d'un
   bloc : le patchwork se montre en se composant.

   L'animation tient a la classe « est-visible », posee par vote-apparition.js
   quand la carte entre dans l'ecran. Elle n'est pas dans l'etat par defaut a
   dessein : sans ce script, les vignettes s'affichent sans animation plutot
   que de rester invisibles. Le retard se compte a partir de la case, la carte
   etant desormais animee a son tour d'entree en vue. */
.vote-categorie.est-visible .vote-mosaique-case {
    animation: vote-case-pose 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    animation-delay: calc(var(--case, 0) * 78ms);
}

@keyframes vote-case-pose {
    from {
        opacity: 0;
        transform: scale(1.09);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.vote-mosaique-case > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Les portraits sont cadres en 3/4 et la case est plus courte : le point
       de fuite remonte vers les visages plutot que de couper les fronts. */
    object-position: center 22%;
    /* Redressee dans sa case penchee, et agrandie pour la couvrir en entier :
       une image d'aplomb dans un parallelogramme laisse deux coins vides. */
    transform: var(--contre) scale(1.2);
    filter: saturate(0.9) contrast(1.05) brightness(0.74);
    transition: opacity 0.34s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease;
}

/* Le temps d'une permutation : la case s'efface, change de nomine, revient.
   Seule l'opacite bouge, le survol se reservant la mise a l'echelle. */
.vote-mosaique-case > img.est-en-echange {
    opacity: 0;
}

.vote-categorie:hover .vote-mosaique-case > img {
    /* La contre-inclinaison est reprise : une regle de survol qui ne poserait
       que l'echelle effacerait le redressement et ferait pencher les visages. */
    transform: var(--contre) scale(1.27);
    filter: saturate(1) contrast(1.05) brightness(0.95);
}

/* Trois dosages d'accent qui alternent, plus un lustre en diagonale : de
   l'aplat seul, surtout sur l'univers noir, ne ferait qu'un trou sombre. */
.vote-mosaique-case-unie {
    background-image:
        linear-gradient(147deg, rgba(255, 255, 255, 0.07), transparent 58%),
        linear-gradient(200deg, var(--case-haut), var(--case-bas));
}

.vote-mosaique-t0 {
    --case-haut: color-mix(in srgb, var(--categorie-accent) 44%, #0a0a0b);
    --case-bas: color-mix(in srgb, var(--categorie-fond, #0a0a0b) 62%, #0a0a0b);
}

.vote-mosaique-t1 {
    --case-haut: color-mix(in srgb, var(--categorie-accent) 24%, #0a0a0b);
    --case-bas: #0a0a0b;
}

.vote-mosaique-t2 {
    --case-haut: color-mix(in srgb, var(--gold) 11%, #0a0a0b);
    --case-bas: color-mix(in srgb, var(--categorie-accent) 32%, #0a0a0b);
}

/* Le corps n'est plus un bandeau sous l'image : il se pose dedans, en bas a
   gauche, la ou le lavis est le plus dense. */
.vote-categorie-corps {
    position: absolute;
    z-index: 2;
    isolation: isolate;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(0.95rem, 2vw, 1.35rem);
}

/* Le voile qui porte le texte est adosse au texte lui-meme et non a l'image :
   il grandit donc avec lui. Fixe sur l'image, il laissait les intitules sur
   deux lignes deborder par le haut, en pleine zone claire du patchwork. */
.vote-categorie-corps::before {
    content: '';
    position: absolute;
    z-index: -1;
    /* Le voile a raccourci avec le texte : a trois rems et demie il montait
       bien au-dessus de deux lignes et eteignait une rangee de visages pour
       rien. */
    inset: -2.1rem 0 0 0;
    background: linear-gradient(0deg,
        rgba(5, 5, 7, 0.96) 28%,
        rgba(5, 5, 7, 0.84) 58%,
        rgba(5, 5, 7, 0.3) 84%,
        transparent 100%);
    pointer-events: none;
}

/* Meme filet que « — JEU CONCOURS » plus haut : la page n'a qu'une facon
   d'annoncer une rubrique. */
.vote-categorie-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vote-categorie-meta::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

/* Le nom du prix et la fleche sur une meme ligne : l'appel a l'action tenait
   sa propre rangee et son propre libelle, soit deux lignes de plus posees sur
   les photos. Le nom du lien reste complet — « 9 nominés, Joueur Homme ». */
.vote-categorie-titre {
    display: flex;
    /* Alignee sur le bas et non sur la premiere ligne : au telephone, un nom
       sur deux lignes laissait la fleche accrochee en haut. */
    align-items: flex-end;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.4rem;
}

.vote-categorie-fleche {
    margin-left: auto;
    color: #ead183;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.22s ease;
}

.vote-categorie:hover .vote-categorie-fleche {
    transform: translateX(4px);
}

.vote-categorie-corps > .vote-categorie-titre > strong {
    display: block;
    min-width: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.2rem, 2.4vw, 1.62rem);
    font-weight: 700;
    line-height: 1.12;
    /* Les intitules sur deux lignes se coupent au milieu plutot que de laisser
       un mot seul en dessous. */
    text-wrap: balance;
    color: #fff;
    /* Pose sur la photographie : sans cette ombre, un portrait clair sous le
       titre suffit a le faire disparaitre. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.vote-landing-rappel {
    max-width: 44rem;
    margin: clamp(2.4rem, 5vw, 4rem) auto 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.7rem;
    line-height: 1.6;
    text-align: center;
}

.vote-landing-fermee {
    margin-top: 3rem;
}

@media (max-width: 899px) {
    .vote-categories-grille > .vote-categorie {
        flex-basis: calc((100% - var(--ecart)) / 2);
    }
}

@media (max-width: 639px) {
    .vote-landing { padding: 0.9rem 0.9rem 4rem; }

    .vote-landing-entete .vote-embleme { margin-bottom: 0.6rem; }

    /* Resserree le 24 septembre 2026, l'utilisateur trouvant le haut de page
       trop aere au telephone : le titre tient sur une ligne a 390 px. Plus
       etroit, les lignes restent equilibrees, sans « francais » seul sur la
       sienne. */
    .vote-annonce {
        gap: 0.2rem;
        margin-bottom: 0.95rem;
        padding: 0.5rem 0.9rem;
        text-wrap: balance;
    }

    .vote-annonce-titre {
        font-size: 0.66rem;
        letter-spacing: 0.05em;
    }

    .vote-landing-entete .vote-surtitre {
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-indent: 0.14em;
    }

    .vote-embleme { gap: 0.35rem; }

    /* Les trois etapes tiennent en rangee depuis que la colonne de texte a
       toute la largeur (22 septembre 2026) : en colonne, elles faisaient a
       elles seules un tiers de la hauteur de l'encart. */
    .vote-etapes {
        flex-wrap: nowrap;
        gap: 0.4rem;
        margin-top: 0.9rem;
    }

    .vote-etape { gap: 0.35rem; }

    .vote-etape-pastille {
        width: 1.8rem;
    }

    .vote-etape-texte {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .vote-etape-signe { font-size: 0.9rem; }

    /* Encart du lot recompose le 24 septembre 2026 : l'utilisateur trouvait
       trop d'espace entre l'accroche et l'encart, et dans le haut de celui-ci.
       Le telephone y tenait un bandeau de 8,5 rem au-dessus du texte, vide au
       chargement puisqu'il n'apparait qu'au premier defilement. Il passe dans
       le coin bas droit, rogne par le cadre, comme sur ordinateur et dans
       l'encart du bas : le texte ouvre l'encart, le telephone monte sous les
       yeux de qui fait defiler, et le bouton de vote remonte de 120 px. */
    .vote-lot { margin-top: 1.9rem; }

    /* « grid-row: auto » et non 1 : place dans une rangee, un element en
       position absolue prendrait cette rangee pour cadre, et non l'encart. */
    .vote-lot-produit {
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
        overflow: hidden;
        border-radius: 0 0 calc(1.2rem - 1px) calc(1.2rem - 1px);
        grid-row: auto;
    }

    /* La taille suit l'ecran : « Suivez-nous » finit a 206 px du bord
       gauche quelle que soit la largeur, et le telephone doit commencer
       au-dela. 120 px a 320 de large, 188 des 375. Le fondu du bas part : la
       coupe tombe sous le bord de l'encart, qui la cache. */
    .vote-lot-produit img {
        --iphone: clamp(7.5rem, 117vw - 16rem, 11.75rem);
        top: auto;
        bottom: calc(var(--iphone) * -0.2);
        right: -1.7rem;
        width: var(--iphone);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .vote-lot-halo { top: auto; right: -5rem; bottom: -5rem; width: 19rem; }

    .vote-lot-copie {
        grid-row: 1;
        padding: 1.3rem 1.2rem;
    }

    .vote-lot-action { gap: 0.7rem; }

    .vote-lot-cta { width: 100%; }

    /* Lien Instagram et reassurances cales a gauche, loin du telephone, comme
       dans l'encart du bas. Les reassurances passent en colonne : sur deux
       lignes centrees, la seconde serait passee sur lui. */
    .vote-lot-insta { margin-inline: 0; }

    .vote-lot-preuves {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .vote-categories { padding-top: 3rem; }

    .vote-categories-grille { --ecart: 0.7rem; }

    /* Deux cartes par rangee sur un telephone : a six cases, un visage ferait
       cinquante pixels de large. Quatre cases, et chacune garde le cadrage
       d'un portrait.

       La carte passe en 4/5, plus haute que large : le texte se pose dessus
       depuis qu'elle est en plein cadre, et a 5/4 il la remplissait toute,
       si bien que le patchwork disparaissait la ou il donne justement envie
       d'ouvrir la categorie. */
    .vote-categorie { aspect-ratio: 4 / 5; }

    .vote-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .vote-mosaique-case:nth-child(n+5) { display: none; }

    .vote-categorie-corps { padding: 0.7rem 0.75rem 0.8rem; }

    .vote-categorie-corps::before { inset: -2.2rem 0 0 0; }

    .vote-categorie-titre > strong { font-size: 1.02rem; }

    /* Un nom dont un mot depasse la colonne (« equipementier » a 390 px)
       passait sous la fleche. La fleche passe alors a la ligne, a droite ;
       les autres cartes ne bougent pas. La base nulle est ce qui compte :
       avec elle, c'est le mot le plus long, et non la phrase entiere, qui
       decide du retour a la ligne. L'ecart se resserre pour que la fleche
       reste sur la ligne des qu'elle le peut : a 414 px, 0,4 rem de plus la
       renvoyait a la ligne pour un dixieme de pixel. */
    .vote-categorie-titre {
        flex-wrap: wrap;
        gap: 0.2rem 0.3rem;
    }

    .vote-categorie-corps > .vote-categorie-titre > strong {
        flex: 1 1 0;
        min-width: auto;
    }

    .vote-categorie-corps { padding: 0.75rem 0.75rem 0.85rem; }

    .vote-categorie-meta {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .vote-categorie-titre > strong {
        font-size: 0.96rem;
        line-height: 1.14;
    }

    .vote-categorie-attente .vote-attente-titre { font-size: 0.45rem; }
}

/* ------------------------------------------------------------------------
   Appel a l'abonnement, pose sur l'ecran de remerciement et sur celui de
   l'attente du courriel.

   Meme famille que le bandeau concours de l'accueil, telephone compris : le
   votant doit reconnaitre le concours qu'on lui a promis a l'entree. Les
   classes restent propres a ce bloc, ses proportions et ses ruptures n'etant
   pas celles du bandeau d'accueil.
   ------------------------------------------------------------------------ */

.vote-suivre {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(13rem, 0.62fr);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid rgba(224, 185, 75, 0.58);
    border-radius: 1.35rem;
    background:
        linear-gradient(105deg, rgba(7, 7, 8, 0.97) 0%, rgba(15, 12, 8, 0.93) 58%, rgba(38, 26, 9, 0.78) 100%);
    box-shadow:
        0 34px 90px -42px rgba(0, 0, 0, 0.95),
        0 0 54px -28px rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 244, 204, 0.08);
}

.vote-suivre::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: repeating-linear-gradient(125deg, transparent 0 26px, rgba(255, 255, 255, 0.014) 26px 27px);
    pointer-events: none;
}

.vote-suivre-copie {
    align-self: center;
    padding: clamp(1.5rem, 3.6vw, 2.6rem);
    padding-right: 1rem;
    /* Le texte reste cale a gauche meme sous un en-tete centre : un chapeau
       de quatre lignes centre se lit mal. */
    text-align: left;
}

.vote-suivre-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    color: var(--gold-clair);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.vote-suivre-badge::before {
    content: '';
    width: 1.7rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--gold-clair));
}

.vote-suivre-titre {
    max-width: 26rem;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    /* Plus sobre que le titre de l'accueil : il accompagne une etape, il ne
       vend pas le concours une seconde fois. */
    font-size: clamp(1.5rem, 3.1vw, 2.3rem);
    line-height: 1.12;
    padding-bottom: 0.08em;
    text-wrap: balance;
    background: linear-gradient(180deg, #fffdf6 0%, #e8cc7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vote-suivre-intro {
    max-width: 32rem;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.88rem, 1.5vw, 1rem);
    line-height: 1.65;
}

/* La formule reprend les trois pastilles de l'accueil. Elle reste propre a ce
   bloc pour conserver son rythme dans la colonne plus etroite du telephone. */
.vote-suivre-etapes {
    margin-top: 1.15rem;
}

.vote-suivre-vote-fait .vote-etape-pastille {
    border-color: rgba(127, 209, 139, 0.58);
    color: #8de09a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px -9px rgba(127, 209, 139, 0.8);
}

.vote-suivre-vote-fait .vote-etape-texte strong {
    color: #fff8e3;
}

.vote-suivre-vote-attente {
    opacity: 0.62;
}

.vote-suivre-formule {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.15rem 0 0;
    color: #f3db99;
    font-size: clamp(0.72rem, 1.2vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vote-suivre-etape {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.vote-suivre-etape strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.45em;
    color: #fff8e3;
}

.vote-suivre-signe {
    color: rgba(255, 255, 255, 0.42);
    font-size: 1.3em;
    font-weight: 400;
}

/* L'etape franchie s'efface, celle qui reste prend l'or : la lecture tombe
   sur ce qu'il y a encore a faire. */
.vote-suivre-etape-faite {
    color: rgba(255, 255, 255, 0.45);
}

.vote-suivre-etape-faite strong { color: rgba(255, 255, 255, 0.6); }

.vote-suivre-coche {
    align-self: center;
    color: #7fd18b;
    font-size: 0.9em;
}

.vote-suivre-etape-reste {
    color: #fff8e3;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
}

.vote-suivre-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    margin-top: 1.3rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid #e4c461;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4df9e 0%, #d4af37 58%, #b88e20 100%);
    box-shadow: 0 12px 30px -15px rgba(212, 175, 55, 0.9);
    color: #151006;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.vote-suivre-cta svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    fill: none;
    color: #151006;
}

.vote-suivre-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 36px -15px rgba(212, 175, 55, 1);
}

.vote-suivre-note {
    max-width: 30rem;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    line-height: 1.55;
}

.vote-suivre-produit {
    position: relative;
    min-height: 17rem;
}

/* Brume produite a part du telephone : elle peut ainsi s'etendre dans le
   cadre et se fondre dans le noir sans degrader la silhouette du produit. */
.vote-suivre-brume {
    position: absolute;
    z-index: 1;
    right: -24%;
    bottom: -2%;
    width: 205%;
    aspect-ratio: 3 / 1;
    opacity: 0.3;
    filter: saturate(0.78) blur(0.3px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.vote-suivre-produit::after {
    content: '';
    position: absolute;
    right: 7%;
    bottom: 6%;
    width: 70%;
    height: 11%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.82);
    filter: blur(14px);
}

.vote-suivre-produit img {
    position: absolute;
    z-index: 2;
    right: clamp(0.5rem, 2.5vw, 1.6rem);
    bottom: -14%;
    width: min(14.5rem, 90%);
    height: auto;
    filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.65));
    transform: rotate(2deg);
}

.vote-suivre-halo {
    position: absolute;
    z-index: 0;
    inset: 4% -18% -20% -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 196, 84, 0.3), rgba(212, 175, 55, 0.06) 44%, transparent 70%);
    filter: blur(5px);
}

@media (max-width: 899px) {
    .vote-suivre {
        grid-template-columns: minmax(0, 1.5fr) minmax(9.5rem, 0.55fr);
    }

    .vote-suivre-produit {
        min-height: 15rem;
    }

    .vote-suivre-produit img {
        right: -1rem;
        bottom: -8%;
        width: min(12.5rem, 105%);
    }
}

@media (max-width: 639px) {
    /* Le telephone passe en fond : deux colonnes de moins de vingt caracteres
       hacheraient le chapeau, et le produit garde sa presence en filigrane. */
    .vote-suivre {
        display: block;
        border-radius: 1.05rem;
    }

    .vote-suivre-copie {
        position: relative;
        z-index: 3;
        padding: 1.4rem 1.2rem 1.6rem;
        /* Le telephone occupe le bas du cadre a droite : la colonne de texte
           s'arrete avant lui plutot que de passer dessus. */
        padding-right: 5.25rem;
    }

    .vote-suivre-titre {
        max-width: 15rem;
        font-size: clamp(1.45rem, 7.4vw, 2rem);
    }

    .vote-suivre-intro,
    .vote-suivre-note {
        max-width: none;
        font-size: 0.8rem;
    }

    .vote-suivre-note { font-size: 0.66rem; }

    .vote-suivre-formule {
        width: max-content;
        flex-wrap: nowrap;
        gap: 0.28rem;
        font-size: 0.58rem;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    /* Le bouton prend toute la largeur : le pseudonyme allonge l'intitule et
       un bouton a demi rempli, colle a gauche, se lit comme un lien perdu.

       La feuille n'a pas de reinitialisation globale de box-sizing et un lien
       reste en content-box : sans cette ligne, les 3 rem de rembourrage
       s'ajoutent aux 100 % et le bouton sort du cadre, qui le rogne. */
    .vote-suivre-cta {
        box-sizing: border-box;
        width: 100%;
        min-height: 2.7rem;
        padding-inline: 0.9rem;
        /* Le pseudonyme allonge l'intitule et la colonne a retreci pour laisser
           passer le telephone : sans cette reduction, « Suivre @… » tombe sur
           deux lignes dans une pastille. */
        font-size: 0.6rem;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .vote-suivre-produit {
        position: absolute;
        z-index: 1;
        inset: 0;
        min-height: 0;
        overflow: hidden;
        opacity: 0.85;
        pointer-events: none;
    }

    .vote-suivre-produit::before {
        content: '';
        position: absolute;
        z-index: 3;
        inset: 0;
        background: linear-gradient(90deg, rgba(7, 7, 8, 0.72) 34%, rgba(7, 7, 8, 0.12) 78%);
    }

    .vote-suivre-produit img {
        right: -1.5rem;
        bottom: -2rem;
        width: 8.5rem;
    }

    .vote-suivre-halo { inset: 22% -35% -20% 52%; }

    .vote-suivre-brume {
        right: -36%;
        bottom: 0;
        width: 190%;
        opacity: 0.2;
        filter: saturate(0.7) blur(0.5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vote-landing-entete .vote-surtitre,
    .vote-suivre-cta,
    .vote-categorie,
    .vote-categorie.est-visible .vote-mosaique-case,
    .vote-bandeau-lamelle,
    .vote-mosaique-case > img,
    .vote-categorie-fleche,
    .vote-suivre-brume::before,
    .vote-suivre-brume::after {
        animation: none;
        transition: none;
    }
}

/* Telephones etroits (moins de 380 px), en fin de feuille pour passer apres
   les regles generales du telephone, qui ont la meme specificite. Les trois
   etapes debordaient, et le telephone passait sous le bouton et la note. */
@media (max-width: 379px) {
    .vote-etapes { gap: 0.25rem; }

    .vote-etape { gap: 0.25rem; }

    .vote-etape-pastille { width: 1.55rem; }

    .vote-etape-texte { font-size: 0.54rem; letter-spacing: 0.02em; }

    .vote-etape-signe { font-size: 0.8rem; }

}

/* 320 px : un cran de plus pour que les trois etapes tiennent en rangee. */
@media (max-width: 339px) {
    .vote-etapes, .vote-etape { gap: 0.18rem; }

    .vote-etape-pastille { width: 1.35rem; }

    .vote-etape-pastille svg { width: 55%; height: 55%; }

    .vote-etape-texte { font-size: 0.5rem; letter-spacing: 0; }
}

/* Ecran apres le vote (22 septembre 2026) -----------------------------------
   Pose sur place par-dessus la categorie. Dans l'ordre : la voix, puis le
   tirage au sort et l'abonnement qui y donne droit, puis la suite. */
.vote-apres {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow-y: auto;
    padding: clamp(1.5rem, 5vh, 3.5rem) 1rem 2.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.16), transparent 55%),
        rgba(4, 4, 8, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: vote-fondu 0.3s ease both;
}

.vote-apres-interne {
    max-width: 60rem;
    margin: 0 auto;
    animation: vote-fiche-entre 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) 0.05s both;
}

.vote-apres-tete {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto 1.6rem;
}

.vote-apres-pastille {
    display: inline-grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #f7e6b4, #d4af37 55%, #a8801f);
    color: #16110a;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.12), 0 0 50px -8px rgba(212, 175, 55, 0.8);
    animation: vote-pastille 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s both;
}

.vote-apres-pastille-attente {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-clair);
    border: 1px solid rgba(212, 175, 55, 0.6);
}

.vote-apres-pastille svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vote-apres-pastille-attente svg { stroke-width: 1.6; }

@keyframes vote-pastille {
    from { scale: 0.3; opacity: 0; }
    to { scale: 1; opacity: 1; }
}

.vote-apres-titre {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.45rem, 3.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--texte);
    margin: 0.2rem 0 0;
    text-wrap: balance;
}

.vote-apres-texte {
    margin: 0.7rem auto 0;
    color: var(--texte-doux);
    font-size: 0.92rem;
    line-height: 1.55;
}

.vote-apres-suivre { margin-bottom: 0; }

.vote-apres-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem 1.5rem;
    margin-top: 1.6rem;
}

.vote-apres-arreter {
    padding: 0.4rem 0.2rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.vote-apres-arreter:hover { color: var(--gold-clair); }

.vote-apres-note {
    margin: 0.9rem 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
    .vote-apres, .vote-apres-interne, .vote-apres-pastille { animation: none; }
}

/* Bandeau du mode test du scrutin. Au-dessus de tout, fiche et ecran apres
   vote compris, et sans capter les clics. Pour repartir d'un visiteur neuf,
   « Ce n'est pas vous ? » sur la fiche ou dans Mes votes suffit. */
.vote-mode-test {
    /* En haut et dans le flux depuis le 24 septembre 2026 (demande de
       l'utilisateur) : fixe en bas, il recouvrait la barre des trois issues
       d'une categorie. Une bande qui pousse la page ne masque rien. */
    /* Sous la fiche et le message d'ajout, qui s'ouvrent par-dessus la page :
       au-dessus, il cachait la croix de fermeture. */
    position: relative;
    z-index: 20;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.85rem;
    background: #b42318;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

/* Mes votes (22 septembre 2026) ------------------------------------------- */
.vote-mes-votes { max-width: 44rem; margin: 1.5rem auto 0; }

.vote-mes-votes-vide { opacity: 0.6; }
.vote-mes-votes-vide .vote-recap-vignette { border-style: dashed; }

.vote-mes-votes-etat {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-clair);
    font-size: 0.72rem;
    white-space: nowrap;
}

.vote-mes-votes-compte {
    border-color: transparent;
    background: linear-gradient(145deg, #f7e6b4, #d4af37);
    color: #16110a;
    font-weight: 600;
}

.vote-mes-votes-qui { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }

.vote-mes-votes-qui button {
    margin-left: 0.3rem; padding: 0; border: 0; background: none;
    color: var(--gold-clair); font: inherit; text-decoration: underline;
    text-underline-offset: 0.2em; cursor: pointer;
}

.vote-mes-votes-attente {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 0.9rem;
    background: rgba(212, 175, 55, 0.07);
    font-size: 0.88rem;
}

.vote-mes-votes-attente p { margin: 0; }
.vote-mes-votes-renvoye { color: var(--gold-clair); }

/* Acces a « Mes votes », en haut a droite, symetrique du lien de retour. */
.vote-mes-votes-lien { right: 1.25rem; left: auto; }

@media (max-width: 899px) {
    .vote-mes-votes-lien { float: right; }
}

/* Panneau du vote, pieces communes (22 septembre 2026) ---------------------- */

/* Rappel du nomine et barre de retour : propres au telephone. */
.vote-feuille-barre,
.vote-feuille-tete,
.vote-feuille-titre-mobile { display: none; }

/* Case des actualites, dessinee : la case native du systeme detonnait. */
.vote-feuille-case {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
}

.vote-feuille-case input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.vote-feuille-case-boite {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    border: 1.5px solid rgba(212, 175, 55, 0.65);
    border-radius: 0.4rem;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vote-feuille-case-boite svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: #16110a;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.vote-feuille-case input:checked + .vote-feuille-case-boite {
    border-color: transparent;
    background: linear-gradient(145deg, #f7e6b4, #d4af37);
}

.vote-feuille-case input:checked + .vote-feuille-case-boite svg { opacity: 1; }

.vote-feuille-case input:focus-visible + .vote-feuille-case-boite {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

.vote-feuille-case small {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
}

/* Telephone : un ecran entier, compose de haut en bas ----------------------
   Barre de retour, portrait du nomine dans un medaillon d'or, sa categorie et
   son nom ; puis le formulaire ; puis le bouton, colle au bas de l'ecran. */
@media (max-width: 899px) {
    .vote-fiche-engagee { padding: 0; }
    .vote-fiche-engagee .vote-fiche-scene { display: none; }

    .vote-feuille {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        max-height: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background:
            radial-gradient(120% 55% at 50% 0%, rgba(212, 175, 55, 0.2), transparent 62%),
            linear-gradient(180deg, #14110a 0%, #09090c 48%);
        overscroll-behavior: contain;
    }

    .vote-feuille-barre {
        display: flex;
        flex: none;
        align-items: center;
        height: 4.75rem;
        padding: 0 1rem;
    }

    .vote-feuille-retour {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.5rem 0.6rem 0.5rem 0.2rem;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.72);
        font: inherit;
        font-size: 0.88rem;
        cursor: pointer;
    }

    .vote-feuille-retour svg {
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .vote-feuille-tete {
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        padding: 0 1.5rem 1.6rem;
        text-align: center;
        animation: vote-fiche-entre 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) 0.1s both;
    }

    .vote-feuille-portrait {
        display: grid;
        place-items: center;
        width: 6.75rem;
        height: 6.75rem;
        padding: 3px;
        box-sizing: border-box;
        border-radius: 50%;
        background: linear-gradient(145deg, #f7e6b4, #d4af37 45%, #8a6716);
        box-shadow:
            0 0 0 7px rgba(212, 175, 55, 0.1),
            0 0 60px -6px rgba(212, 175, 55, 0.65);
    }

    .vote-feuille-portrait { overflow: hidden; }

    .vote-feuille-portrait img { display: block; }

    .vote-feuille-portrait > span {
        display: grid;
        place-items: center;
    }

    .vote-feuille-portrait img,
    .vote-feuille-portrait > span {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        min-height: 0;
        border-radius: 50%;
        background: #120f09;
        object-fit: cover;
        object-position: 50% 18%;
    }

    .vote-feuille-portrait > span {
        color: var(--gold-clair);
        font-family: "Playfair Display", serif;
        font-size: 2.6rem;
        font-weight: 700;
    }

    .vote-feuille-categorie {
        margin: 1.4rem 0 0.3rem;
        color: var(--gold);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    .vote-feuille-nom {
        margin: 0;
        color: #fff;
        font-family: "Playfair Display", serif;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.12;
        text-wrap: balance;
    }

    .vote-feuille-formulaire {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        padding: 1.4rem 1.25rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.5rem 1.5rem 0 0;
        background: rgba(255, 255, 255, 0.025);
    }

    .vote-feuille .vote-optin-surtitre { display: none; }
    .vote-feuille-titre-large { display: none; }
    .vote-feuille-titre-mobile { display: inline; }

    .vote-feuille-titre {
        margin: 0 0 0.3rem;
        font-size: 1.2rem;
    }

    .vote-feuille-intro {
        margin: 0 0 1.2rem;
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.84rem;
        line-height: 1.5;
    }

    .vote-feuille .vote-optin-champs {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .vote-feuille .vote-label {
        display: block;
        margin-bottom: 0.4rem;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.66rem;
        letter-spacing: 0.16em;
    }

    /* 16 px au moins : en dessous, Safari zoome sur le champ au toucher. */
    .vote-feuille .vote-recherche {
        height: 3.3rem;
        padding: 0 1rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.95rem;
        background: rgba(255, 255, 255, 0.05);
        font-size: 1rem;
    }

    .vote-feuille .vote-recherche:focus {
        border-color: rgba(212, 175, 55, 0.8);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
        outline: none;
    }

    .vote-feuille-case { margin-top: 1.25rem; }

    /* Le bouton reste au bas de l'ecran, au-dessus d'un fondu. */
    .vote-feuille-pied {
        position: sticky;
        bottom: 0;
        margin: auto -1.25rem 0;
        padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(9, 9, 12, 0) 0%, #09090c 38%);
    }

    .vote-feuille .vote-optin-bouton {
        width: 100%;
        min-height: 3.4rem;
        margin-top: 0;
        border-radius: 999px;
        font-size: 0.95rem;
    }

    .vote-feuille .vote-optin-note {
        margin-top: 0.7rem;
        justify-content: center;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.7rem;
        text-align: center;
    }

    .vote-feuille .vote-optin-renoncer { display: none; }
}

/* Telephone de petite hauteur (iPhone SE…) : l'en-tete se resserre et
   l'introduction se tait, pour que les deux champs tiennent au-dessus du
   bouton sans defiler. */
@media (max-width: 899px) and (max-height: 740px) {
    .vote-feuille-barre { height: 3.9rem; }
    .vote-feuille-tete { padding-bottom: 1.1rem; }
    .vote-feuille-portrait { width: 4.9rem; height: 4.9rem; }
    .vote-feuille-portrait > span { font-size: 1.9rem; }
    .vote-feuille-categorie { margin-top: 1rem; }
    .vote-feuille-nom { font-size: 1.45rem; }
    .vote-feuille-formulaire { padding-top: 1.1rem; }
    .vote-feuille-intro { display: none; }
    .vote-feuille-titre { margin-bottom: 0.85rem; }
    .vote-feuille .vote-optin-champs { gap: 0.7rem; }
    .vote-feuille .vote-recherche { height: 3rem; }
    .vote-feuille-case { margin-top: 1rem; }
    .vote-feuille-pied { padding-top: 1rem; }
}

/* Ecran apres vote sur telephone (22 septembre 2026) : le jeu concours et son
   bouton Instagram doivent tenir dans le premier ecran, c'est eux qu'on veut
   faire voir. L'en-tete se resserre, le bloc s'allege. Regles propres a cet
   ecran : la page de remerciement garde son bloc complet. */
@media (max-width: 639px) {
    .vote-apres { padding: 0.9rem 0.85rem 2rem; }

    .vote-apres-tete { margin-bottom: 1rem; }

    .vote-apres-pastille {
        width: 2.6rem;
        height: 2.6rem;
        margin-bottom: 0.45rem;
        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12), 0 0 30px -6px rgba(212, 175, 55, 0.8);
    }

    .vote-apres-pastille svg { width: 1.25rem; height: 1.25rem; }

    .vote-apres-titre { font-size: 1.3rem; margin-top: 0.1rem; }

    .vote-apres-texte {
        margin-top: 0.45rem;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .vote-apres .vote-suivre-copie { padding: 1.1rem 4.6rem 1.15rem 1rem; }

    .vote-apres .vote-suivre-badge { margin-bottom: 0.45rem; }

    .vote-apres .vote-suivre-titre { font-size: 1.45rem; margin-bottom: 0.45rem; }

    .vote-apres .vote-suivre-intro { font-size: 0.78rem; line-height: 1.45; margin-bottom: 0.8rem; }

    .vote-apres .vote-suivre-etapes { margin-bottom: 0.85rem; }

    .vote-apres .vote-suivre-cta { min-height: 3rem; font-size: 0.66rem; }

    .vote-apres .vote-suivre-note { display: none; }

    .vote-apres-actions { margin-top: 1.1rem; gap: 0.7rem 1.2rem; }

    .vote-apres-note { margin-top: 0.7rem; }
}

/* Modifier un vote en attente (22 septembre 2026). */
.vote-carte-attente {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 2;
    translate: -50% 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(9, 9, 13, 0.78);
    border: 1px solid rgba(212, 175, 55, 0.7);
    color: var(--gold-clair);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

.vote-mes-votes-statut {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.vote-mes-votes-modifier {
    color: var(--gold-clair);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(212, 175, 55, 0.45);
}

.vote-mes-votes-modifier:hover { color: #fff; }

/* Mes votes sur telephone : le statut et « Modifier mon vote » passent sous
   le nom, qui garde toute la largeur. */
@media (max-width: 639px) {
    .vote-mes-votes .vote-recap-ligne {
        flex-wrap: wrap;
        row-gap: 0.55rem;
    }

    .vote-mes-votes .vote-recap-ligne > span:nth-child(2) { flex: 1; min-width: 0; }

    .vote-mes-votes .vote-recap-actions {
        width: 100%;
        margin-left: 0;
        padding-left: calc(3rem + 1rem);
        box-sizing: border-box;
    }

    .vote-mes-votes-statut {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.9rem;
    }
}

/* Bloc « Suivez-nous » : gros plan de l'iPhone 18 (22 septembre 2026), cadre
   comme dans l'encart de l'accueil. Ancre par le bas et rogne par le cadre ;
   plus de rotation, l'appareil est deja de trois quarts. */
.vote-suivre-produit img {
    right: clamp(-1rem, 1vw, 1rem);
    bottom: -1.6rem;
    width: min(20rem, 125%);
    max-width: none;
    transform: none;
    filter: drop-shadow(-16px 22px 26px rgba(0, 0, 0, 0.75));
}

@media (max-width: 899px) {
    .vote-suivre-produit img {
        right: -1.5rem;
        bottom: -1.2rem;
        width: min(15rem, 130%);
    }
}

@media (max-width: 639px) {
    /* Le gros plan se loge en bas a droite, sous la formule : le texte
       reprend toute sa largeur, sans quoi « 1 chance » sortait du cadre. */
    .vote-suivre-produit img {
        right: -2.2rem;
        bottom: -2.6rem;
        width: 9rem;
    }

    .vote-suivre-copie,
    .vote-apres .vote-suivre-copie { padding-right: 1.1rem; }

    .vote-suivre-note { max-width: 62%; }

    /* La formule tient sur une ligne dans le cadre d'un telephone. */
    .vote-suivre .vote-suivre-etapes { gap: 0.3rem; flex-wrap: nowrap; }
    .vote-suivre .vote-etape { gap: 0.3rem; }
    .vote-suivre .vote-etape-pastille { width: calc(1.75rem + 2px); }
    .vote-suivre .vote-etape-texte { font-size: 0.56rem; letter-spacing: 0.04em; gap: 0.2rem; }
    .vote-suivre .vote-etape-signe { font-size: 0.85rem; }
}

/* Tres petits ecrans (360 px) : la formule passe a la ligne plutot que de
   sortir du cadre. */
@media (max-width: 379px) {
    .vote-suivre .vote-suivre-etapes { flex-wrap: wrap; row-gap: 0.45rem; }
}

/* Parcours en bulletin (24 septembre 2026) -----------------------------------
   On vote de categorie en categorie sans rien saisir ; prenom et email ne sont
   demandes qu'au recapitulatif, une fois pour tous les votes. */

/* Le vote qu'on vient de faire, annonce en arrivant sur la categorie suivante.
   En position fixe : il ne pousse rien, et s'efface seul. */
.vote-ajoute {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    left: 0;
    right: 0;
    margin-inline: auto;
    width: max-content;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: 0.6rem 1.1rem 0.6rem 0.65rem;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
    color: var(--texte);
    font-size: 0.82rem;
    line-height: 1.3;
    animation: vote-ajoute-entre 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.vote-ajoute-coche {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
}

.vote-ajoute-coche svg {
    width: 0.95rem;
    fill: none;
    stroke: #171109;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes vote-ajoute-entre {
    from { opacity: 0; translate: 0 -0.8rem; }
    to { opacity: 1; translate: 0 0; }
}

/* Sous la carte de la fiche : passer son tour, ou s'arreter la. Le vote, lui,
   est le bouton de la carte. */
.vote-fiche-suite {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.vote-fiche-suite .vote-lien {
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    background: rgba(12, 12, 14, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Au milieu de la barre du bas : le compte du bulletin, et ce qu'il permet de
   tenter. Il mene au recapitulatif. */
.vote-pied-bulletin {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--texte);
    text-decoration: none;
    line-height: 1.25;
}

.vote-pied-compte {
    font-size: 0.8rem;
    font-weight: 600;
}

.vote-pied-rappel {
    color: rgba(231, 217, 168, 0.8);
    font-size: 0.68rem;
}

/* « Je m'arrete la » : un lien ecrit, gris, sans pastille d'or ni contour
   (24 septembre 2026, a la demande de l'utilisateur, qui le trouvait trop
   visible). S'arreter est permis, pas suggere. */
.vote-arret {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.2rem;
    border: 0;
    background: none;
    color: var(--texte-doux);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    cursor: pointer;
}

.vote-arret:hover {
    color: var(--gold-clair);
    text-decoration-color: currentColor;
}

/* La fleche de « Categorie suivante » : un trait fin, a la taille du texte. */
.vote-suite-fleche {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Precedente et suivante, cote a cote a gauche de la barre (26 septembre
   2026). Le groupe ne se coupe pas plus que les boutons qu'il remplace. */
.vote-pied-nav {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vote-pied-nav > .vote-lien { white-space: nowrap; }

/* Au telephone, trois issues sur une ligne : le rappel de l'iPhone cede sa
   place, le compte reste, et les boutons se resserrent. */
@media (max-width: 599px) {
    .vote-pied { padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); }

    .vote-pied-interne { gap: 0.5rem; }

    .vote-pied-interne > button,
    .vote-pied-interne > a.vote-lien,
    .vote-pied-interne > a.vote-bouton,
    .vote-pied-nav > .vote-lien { padding: 0.6rem 0.85rem; font-size: 0.78rem; }

    /* « Categorie precedente » n'y tient pas en toutes lettres : fleche seule
       dans une pastille ronde. L'intitule reste lu par les lecteurs d'ecran. */
    .vote-pied-nav { gap: 0.4rem; }

    /* Carree a la hauteur du bouton voisin, donc ronde. */
    .vote-pied-nav > .vote-pied-precedente {
        flex: none;
        width: 2.4rem;
        align-self: stretch;
        padding: 0;
        justify-content: center;
    }

    .vote-pied-precedente-texte {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Le compte passe sur le bouton : trois issues ne tiennent pas sur une
       ligne de 390 px avec un bouton d'or en capitales. */
    .vote-pied-bulletin { display: none; }

    .vote-arret { font-size: 0.76rem; }
}

/* Sous 360 px (iPhone SE), la pastille de retour faisait deborder « Je
   m'arrete la » de l'ecran : tout se resserre encore d'un cran. */
@media (max-width: 359px) {
    .vote-pied { padding-inline: 0.6rem; }

    .vote-pied-interne,
    .vote-pied-nav { gap: 0.35rem; }

    .vote-pied-nav > .vote-pied-precedente { width: 2.25rem; }

    .vote-pied-nav > .vote-lien:not(.vote-pied-precedente) { padding-inline: 0.7rem; font-size: 0.72rem; }

    .vote-arret { font-size: 0.72rem; }
}

/* Le recapitulatif ---------------------------------------------------------- */

.vote-bulletin { max-width: calc(40rem + 2 * 1.25rem); padding-bottom: 4rem; }

.vote-bulletin .vote-chapeau { margin-bottom: 1.5rem; }

.vote-bulletin-suite {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
}

.vote-bulletin-attente { margin: 0 0 1rem; text-align: center; }

.vote-lien-texte {
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold-clair);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(212, 175, 55, 0.45);
    cursor: pointer;
}

/* Le formulaire, sous la liste : encadre d'or comme l'etait le panneau du
   premier vote, dont il reprend les champs et le bouton. */
.vote-bulletin-formulaire {
    position: relative;
    margin-top: 2rem;
    padding: 1.5rem 1.35rem 1.35rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 1.1rem;
    background: rgba(12, 12, 14, 0.72);
    box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.95), 0 0 60px -35px rgba(212, 175, 55, 0.4);
}

.vote-bulletin-titre {
    margin: 0 0 0.4rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.3rem, 4.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--texte);
}

.vote-bulletin-intro {
    margin-bottom: 1.1rem;
    color: var(--texte-doux);
    font-size: 0.86rem;
    line-height: 1.55;
}

.vote-bulletin-formulaire .vote-feuille-case { margin-top: 1rem; }

.vote-bulletin-formulaire .vote-optin-bouton { margin-top: 1.2rem; }

.vote-bulletin-formulaire input { font-size: max(16px, 1rem); }

@media (prefers-reduced-motion: reduce) {
    .vote-ajoute { animation: none; }
}

/* Une ligne du bulletin : au telephone, « Modifier » et « Retirer » passent
   sous le nom plutot que de deborder. */
.vote-bulletin .vote-recap-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.vote-bulletin .vote-recap-actions .vote-lien {
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
}

@media (max-width: 519px) {
    .vote-bulletin .vote-recap-ligne { flex-wrap: wrap; row-gap: 0.6rem; }

    .vote-bulletin .vote-recap-actions {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* Sans la description sous le titre (retiree le 24 septembre 2026), la grille
   du telephone collait a la date de cloture. Sur ordinateur, le tambour a sa
   propre respiration. */
@media (max-width: 639px) {
    .vote-entete-compact + .vote-galerie { margin-top: 1.1rem; }
}

/* Le bouton de vote de la page d'un nomine, en casse normale (24 septembre
   2026) : « Voter pour Alix Collombon », pas un nom crie en capitales. */
.vote-bouton-casse {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
}

/* Encart de la soiree, en bas de l'accueil du scrutin ----------------------
   (24 septembre 2026, a la demande de l'utilisateur)

   Il prend la place du jeu concours, deja explique par l'encart du haut et
   rappele a la fin du vote : la soiree, ses tables et le mecenat, et un seul
   bouton vers la page de la soiree. La salle du kit media occupe la colonne
   de droite, fondue dans le cadre ; au telephone elle passe en bandeau
   au-dessus du texte. Meme cadre que l'ancien encart, a la meme place. */
.vote-soiree {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    margin-top: clamp(3.4rem, 7vw, 5.5rem);
    overflow: hidden;
    border: 1px solid rgba(224, 185, 75, 0.58);
    border-radius: 1.35rem;
    background:
        linear-gradient(105deg, rgba(7, 7, 8, 0.97) 0%, rgba(12, 10, 8, 0.95) 55%, rgba(20, 14, 6, 0.9) 100%);
    box-shadow:
        0 34px 90px -42px rgba(0, 0, 0, 0.95),
        0 0 54px -28px rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 244, 204, 0.08);
}

.vote-soiree-photo {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
}

/* Le haut de la photo est presque noir : on n'en garde que la scene, le
   trophee et la salle, fondus dans le cadre du cote du texte. */
.vote-soiree-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% 84%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.vote-soiree-copie {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: clamp(1.6rem, 3.4vw, 2.8rem);
    padding-right: 0.5rem;
}

.vote-soiree-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.8rem;
    color: var(--gold-clair);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.vote-soiree-badge::before {
    content: '';
    width: 1.7rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--gold-clair));
}

.vote-soiree-titre {
    max-width: 34rem;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.09;
    padding-bottom: 0.08em;
    text-wrap: balance;
    background: linear-gradient(180deg, #fffdf6 0%, #e8cc7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* La fin de la question en or. Rembourrage bas compense : le degrade est
   peint dans la boite de la ligne et couperait les jambages. */
.vote-soiree-titre span {
    display: block;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.vote-soiree-texte {
    max-width: 30rem;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.88rem, 1.3vw, 0.97rem);
    line-height: 1.55;
    text-wrap: pretty;
}

.vote-soiree-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    margin-top: clamp(1.1rem, 2vw, 1.4rem);
    padding: 0.6rem 1.5rem;
    border: 1px solid #e4c461;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4df9e 0%, #d4af37 58%, #b88e20 100%);
    box-shadow: 0 12px 30px -15px rgba(212, 175, 55, 0.9);
    color: #151006;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.vote-soiree-cta svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate 0.24s ease;
}

.vote-soiree-cta:hover,
.vote-soiree-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 17px 36px -15px rgba(212, 175, 55, 1);
    outline: none;
}

.vote-soiree-cta:hover svg,
.vote-soiree-cta:focus-visible svg { translate: 0.2rem 0; }

@media (max-width: 899px) {
    .vote-soiree { grid-template-columns: minmax(0, 1fr); }

    .vote-soiree-photo {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .vote-soiree-photo img {
        object-position: 36% 86%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }

    .vote-soiree-copie {
        grid-row: 2;
        margin-top: -1.6rem;
        padding: 0 1.35rem 1.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vote-soiree-cta,
    .vote-soiree-cta svg { transition: none; }
}

/* Bloc « Suivez-nous » de fin de vote, sur grand ecran --------------------
   L'iPhone 18 dans sa boite, repris de l'ancien encart du bas de l'accueil
   quand la soiree a pris sa place (24 septembre 2026, choix de
   l'utilisateur). Il n'apparait qu'a partir de 1200 px, comme sur l'accueil :
   en dessous, sa largeur le ferait passer sur le texte, et le gros plan
   reste. La colonne s'elargit pour lui, le bas de la boite tombe sous le
   cadre, qui le rogne, et la fumee monte sur la boite. */
@media (min-width: 1200px) {
    .vote-suivre { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr); }

    .vote-suivre-produit img {
        right: 0.6rem;
        bottom: -1.3rem;
        width: min(30rem, 108%);
    }

    .vote-suivre-brume {
        right: -6%;
        bottom: -12%;
        width: 200%;
        opacity: 0.8;
        -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
        mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
        transform: scaleY(1.4);
        transform-origin: 50% 100%;
    }
}

/* Vote par recherche ---------------------------------------------------------
   25 septembre 2026 : « Meilleur club de France » compte plus de mille six
   cents clubs. Le champ remplace la galerie, les resultats ouvrent la meme
   fiche que les cartes, et le club qui manque se propose en dessous.
   Tout est pense pour le telephone d'abord : le champ fait 16 px au moins,
   sans quoi Safari zoome sur la page a la saisie. */

.vote-annuaire {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 36rem;
    margin: 0.4rem auto 2.5rem;
}

.vote-annuaire-libelle {
    display: block;
    margin-bottom: 0.6rem;
    text-align: center;
    color: var(--gold-clair);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vote-annuaire-champ {
    position: relative;
}

.vote-annuaire-saisie {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.8rem 3rem 0.8rem 3.1rem;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.78);
    color: var(--texte);
    font: inherit;
    font-size: max(16px, 1rem);
    box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.95), 0 0 42px -26px rgba(212, 175, 55, 0.55);
    -webkit-appearance: none;
    appearance: none;
}

.vote-annuaire-saisie::placeholder { color: rgba(255, 255, 255, 0.45); }

.vote-annuaire-saisie::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }

.vote-annuaire-saisie:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

.vote-annuaire-loupe {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    translate: 0 -50%;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.vote-annuaire-attente {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 2px solid rgba(212, 175, 55, 0.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: vote-annuaire-tourne 0.7s linear infinite;
}

@keyframes vote-annuaire-tourne { to { rotate: 1turn; } }

.vote-annuaire-aide,
.vote-annuaire-vide {
    margin: 0.85rem 0 0;
    text-align: center;
    color: var(--texte-doux);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vote-annuaire-resultats {
    display: grid;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.vote-annuaire-club {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 3.4rem;
    padding: 0.7rem 0.9rem 0.7rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    background: rgba(14, 14, 16, 0.74);
    color: var(--texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vote-annuaire-club:hover,
.vote-annuaire-club:focus-visible {
    outline: none;
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(28, 24, 14, 0.82);
}

.vote-annuaire-club[aria-pressed="true"] { border-color: var(--gold); }

.vote-annuaire-club-texte {
    display: grid;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.vote-annuaire-club-nom {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vote-annuaire-club-lieu {
    color: var(--texte-doux);
    font-size: 0.8rem;
}

.vote-annuaire-club-fleche {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Le club deja retenu, rappele en toutes lettres au-dessus du champ. */
.vote-annuaire-retenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 0.9rem;
    margin-bottom: 1.4rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 1rem;
    background: rgba(24, 20, 10, 0.8);
}

.vote-annuaire-retenu-coche {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
}

.vote-annuaire-retenu-coche svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: #171109;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vote-annuaire-retenu-texte {
    display: grid;
    gap: 0.12rem;
    flex: 1;
    min-width: 12rem;
}

.vote-annuaire-retenu-etat {
    color: var(--gold-clair);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vote-annuaire-retenu-nom { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }

.vote-annuaire-retenu-lieu,
.vote-annuaire-retenu-note {
    color: var(--texte-doux);
    font-size: 0.8rem;
}

.vote-annuaire-changer { padding: 0.5rem 1.1rem; }

.vote-annuaire-manque {
    margin-top: 1.6rem;
    text-align: center;
    color: var(--texte-doux);
    font-size: 0.86rem;
}

.vote-annuaire-manque > p { margin: 0; }

.vote-annuaire-formulaire {
    margin-top: 0;
    text-align: left;
}

.vote-annuaire-formulaire > .vote-optin-champ + .vote-annuaire-lieu { margin-top: 0.75rem; }

.vote-annuaire-formulaire .vote-bulletin-titre { margin-bottom: 1rem; }

.vote-annuaire-formulaire .vote-recherche::placeholder { color: rgba(255, 255, 255, 0.38); }

.vote-annuaire-formulaire .vote-erreur { display: block; margin: 0.35rem 0 0; }

.vote-annuaire-lieu { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.vote-annuaire-annuler {
    display: block;
    margin: 0.9rem auto 0;
    font-size: 0.84rem;
}

@media (max-width: 379px) {
    .vote-annuaire-lieu { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-annuaire-attente { animation-duration: 2s; }
}

/* Page des clubs, avant la premiere lettre (25 septembre 2026) : ce que pese
   la liste, et un visuel d'ambiance s'il a ete depose. */

.vote-annuaire-chiffres {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 1.8rem 0 0;
    padding: 1.05rem 0;
}

.vote-annuaire-chiffres::before,
.vote-annuaire-chiffres::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.vote-annuaire-chiffres::before { top: 0; }
.vote-annuaire-chiffres::after { bottom: 0; }

.vote-annuaire-chiffres > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.vote-annuaire-chiffres > div + div { border-left: 1px solid rgba(212, 175, 55, 0.18); }

.vote-annuaire-chiffres dd {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 50%, #c99b3c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vote-annuaire-chiffres dt {
    color: var(--texte-doux);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Le visuel se fond dans la page plutot que de s'y poser en vignette : pas de
   cadre, des bords qui s'effacent, et un cadrage sur les pistes, le bas de
   l'image etant presque noir. */
.vote-annuaire-visuel {
    margin: 1.4rem -1.25rem 0;
    aspect-ratio: 2 / 1;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
    mask-composite: intersect;
    pointer-events: none;
}

.vote-annuaire-visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* Carte de l'accueil d'une categorie votee par recherche : le visuel des
   clubs a la place du patchwork (25 septembre 2026). Le lavis de la carte
   (::after) passe dessus comme sur les portraits. */
.vote-categorie-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 40%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vote-categorie:hover .vote-categorie-photo,
.vote-categorie:focus-visible .vote-categorie-photo { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .vote-categorie-photo { transition: none; }
}

@media (max-width: 479px) {
    .vote-annuaire-chiffres > div { padding-inline: 0.25rem; }

    .vote-annuaire-chiffres dt {
        font-size: 0.6rem;
        letter-spacing: 0.07em;
    }
}

/* Votant confirme, revenu sur un appareil qui ne le reconnait pas (26
   septembre 2026) : un encart, un code, et le voila reconnu. Voir
   ReconnexionVotant. */
.vote-reconnexion {
    max-width: 36rem;
    margin: 0 auto 2rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 1rem;
    background: rgba(12, 12, 14, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
}

.vote-reconnexion p {
    margin: 0 0 0.9rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
    line-height: 1.55;
}

.vote-reconnexion .vote-reconnexion-titre {
    margin-bottom: 0.4rem;
    color: var(--gold-clair);
    font-size: 1.05rem;
    font-weight: 700;
}

.vote-reconnexion-formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.vote-reconnexion-champ {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

/* 16 px au moins : Safari zoome sur un champ plus petit. */
.vote-reconnexion-champ .vote-recherche {
    width: 10rem;
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-align: center;
}

.vote-reconnexion .vote-erreur { margin: 0.8rem 0 0; color: #ff8f8f; }

/* Pastille « Voté » d'une vignette de l'accueil, pour un votant reconnu. */
.vote-categorie-votee {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-clair), var(--gold));
    color: #141414;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.vote-categorie-votee svg {
    width: 0.95em;
    height: 0.95em;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}