/* =========================================================================
   Page de la soiree de remise des trophees, /awards/soiree
   (24 septembre 2026, a la demande de l'utilisateur)

   Chargee apres vote.css, dont elle reprend l'ambiance, les champs et les
   boutons : seule la page de la soiree la charge. Le fil de la page est celui
   du kit media : la question, le mecenat, le diner, le plan de salle, les
   partenariats. Noir et or, comme tout l'univers des Awards.
   ========================================================================= */

.soiree-conteneur {
    padding-top: 1.4rem;
}

/* La salle en fond de toute la page (24 septembre 2026, a la demande de
   l'utilisateur), dans la couche fixe de vote.css : elle reste en place
   quand on defile, et chaque section passe dessus. Elle remplace la photo de
   padel voilee des ecrans de vote, et son masque qui la chassait du centre.

   Image generee, sans trophee ni texte (source dans resources/images). Le
   voile descend jusqu'a 60 % a mi-hauteur, la ou passent le titre et la
   scene eclairee : moins dense, le chapeau ne se lisait plus au telephone
   sur les colonnes de lumiere. */
.vote:has(.soiree) .vote-univers::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 5, 5, 0.74) 0%, rgba(5, 5, 5, 0.6) 50%, rgba(5, 5, 5, 0.8) 100%),
        url('/images/awards/soiree/gala.webp?v=20260924') 38% 55% / cover no-repeat;
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Debout, la scene est dans le tiers gauche de l'image. */
@media (max-width: 639px) {
    .vote:has(.soiree) .vote-univers::before {
        background-position: 0 0, 30% 55%;
    }
}

/* Le lien de retour reste dans le flux, au-dessus du haut de page : sur
   ordinateur, vote.css le pose en absolu dans la marge du conteneur, ou il
   chevauchait le cadre. */
.soiree-retour {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    margin-bottom: 0.9rem;
}

/* Champs et boutons dans la police de la page : un navigateur leur donne
   sinon sa police systeme. */
.soiree input,
.soiree textarea,
.soiree button {
    font-family: inherit;
}

/* Surtitres et titres communs -------------------------------------------- */

.soiree-surtitre {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    margin: 0 0 0.9rem;
    color: var(--gold-clair);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

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

.soiree-surtitre strong {
    color: #fff8e3;
    font-weight: 800;
}

.soiree-h2 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 700;
    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;
}

/* La fin du titre en or. Rembourrage bas compense : le degrade est peint dans
   la boite de la ligne et couperait les jambages. */
.soiree-h2 span,
.soiree-titre span,
.soiree-mecene-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;
}

.soiree-texte {
    max-width: 40rem;
    margin: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.soiree-section {
    margin-top: clamp(4rem, 9vw, 6.5rem);
}

/* Boutons ------------------------------------------------------------------ */

.soiree-cta,
.soiree-cta-contour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.soiree-cta {
    border: 1px solid #e4c461;
    background: linear-gradient(180deg, #f4df9e 0%, #d4af37 58%, #b88e20 100%);
    box-shadow: 0 12px 30px -15px rgba(212, 175, 55, 0.9);
    color: #151006;
}

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

.soiree-cta-contour {
    border: 1px solid rgba(245, 227, 181, 0.45);
    background: rgba(8, 8, 9, 0.45);
    color: var(--gold-clair);
    backdrop-filter: blur(4px);
}

.soiree-cta-contour:hover,
.soiree-cta-contour:focus-visible {
    border-color: var(--gold);
    color: #fff8e3;
    outline: none;
}

/* Haut de page --------------------------------------------------------------
   Sans cadre ni photo propre depuis que la salle est le fond de la page : le
   texte se pose directement dessus, et la hauteur laisse voir la scene
   avant la premiere section. */

.soiree-hero {
    position: relative;
    display: grid;
    min-height: clamp(30rem, 72vh, 40rem);
    margin-top: 0.6rem;
}

.soiree-hero-copie {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.4rem) clamp(1.2rem, 4vw, 3rem) 2rem;
    text-align: center;
}

.soiree-logo {
    display: block;
    width: clamp(12rem, 30vw, 17rem);
    height: auto;
    margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

.soiree-titre {
    max-width: 48rem;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.05rem, 5.2vw, 3.7rem);
    font-weight: 700;
    line-height: 1.06;
    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;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
}

.soiree-chapeau {
    max-width: 38rem;
    margin: 1.1rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.92rem, 1.5vw, 1.05rem);
    line-height: 1.6;
    text-wrap: pretty;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.soiree-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: clamp(1.4rem, 3vw, 1.9rem);
}

/* Mecenat -------------------------------------------------------------------
   Le coeur du propos, entre deux filets d'or : venir a la soiree, c'est deja
   faire grandir le padel. */

.soiree-mecene {
    position: relative;
    margin: clamp(3rem, 7vw, 4.6rem) auto 0;
    max-width: 52rem;
    padding: clamp(1.8rem, 4vw, 2.6rem) 0;
    text-align: center;
}

.soiree-mecene::before,
.soiree-mecene::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.65), transparent);
}

.soiree-mecene::before { top: 0; }

.soiree-mecene::after { bottom: 0; }

.soiree-mecene-titre {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.55rem, 3.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    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;
}

.soiree-mecene-texte {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 2.4vw, 1.6rem);
    max-width: 44rem;
    margin: 1.3rem auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.88rem, 1.3vw, 0.98rem);
    line-height: 1.6;
    text-align: left;
}

.soiree-mecene-chiffre {
    flex: none;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Diner ----------------------------------------------------------------------- */

.soiree-diner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Le cadre des photos, allege (24 septembre 2026, a la demande de
   l'utilisateur) : un filet a peine dore, un petit arrondi, et des bords qui
   s'assombrissent vers l'interieur. Sans cadre du tout, c'etait moins bien. */
.soiree-diner-photo,
.soiree-partenaires-photo {
    border-radius: 0.6rem;
    box-shadow:
        0 0 0 1px rgba(224, 185, 75, 0.12),
        0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.soiree-diner-photo::after,
.soiree-partenaires-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 50px 10px rgba(5, 5, 5, 0.55);
    pointer-events: none;
}

.soiree-diner-photo {
    position: relative;
    align-self: stretch;
    min-height: 26rem;
    overflow: hidden;
}

.soiree-diner-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Les convives occupent le bas gauche d'une image presque noire en haut :
       on s'approche d'eux, ancre au pied de l'image. */
    object-position: 0% 100%;
    transform: scale(1.6);
    transform-origin: 16% 100%;
}

.soiree-diner-copie .soiree-surtitre { justify-content: flex-start; }

.soiree-choix {
    margin: 1.6rem 0 0.9rem;
    color: var(--gold-clair);
    font-size: 0.95rem;
    font-weight: 600;
}

.soiree-formules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.soiree-formule {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.1rem 0.8rem 0.95rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 65%),
        rgba(12, 12, 14, 0.78);
    text-align: center;
}

.soiree-formule-picto {
    display: block;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 0.55rem;
    color: #e8cc7d;
}

.soiree-formule-picto svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soiree-formule-nom {
    color: #fff8e3;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.soiree-formule-places {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
}

.soiree-formule-action {
    margin-top: auto;
    padding: 0.85rem 0 0;
    border: 0;
    background: none;
    color: var(--gold-clair);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.45);
    text-underline-offset: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
}

.soiree-formule-action:hover,
.soiree-formule-action:focus-visible {
    color: #fff8e3;
    text-decoration-color: currentColor;
    outline: none;
}

/* Plan de salle ---------------------------------------------------------------- */

.soiree-salle {
    scroll-margin-top: 1rem;
}

.soiree-salle-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.soiree-salle-entete .soiree-texte { margin-inline: auto; }

.soiree-legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.soiree-legende li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.soiree-legende-pastille {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff3c4 0%, #f1d27e 40%, #c99a3a 100%);
    box-shadow: 0 0 10px -2px rgba(241, 210, 126, 0.7);
}

.soiree-legende-pastille.est-prise {
    background: radial-gradient(circle at 38% 32%, #4a4640 0%, #2a2724 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Le plan. Les tables sont posees en pourcentage de la boite, et leur
   taille suit sa largeur (unites cqw) : le plan tient a toutes les tailles.

   Pas de cadre (24 septembre 2026, a la demande de l'utilisateur) : ni les
   arrondis, qui faisaient gabarit, ni des angles marques. Les murs dessinent
   la forme, et une nappe sombre sans bord calme la salle du fond de page
   sous les tables avant de s'y fondre. Une ombre debordante ferait la meme
   chose au-dela de la boite, mais elle couvrait la legende au-dessus. */
.soiree-plan {
    --zone: var(--zone-paysage);
    --disque: var(--disque-paysage);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1480 / 756;
    margin-top: clamp(1.4rem, 3vw, 2rem);
    background:
        radial-gradient(closest-side, rgba(212, 175, 55, 0.07), transparent),
        radial-gradient(closest-side, rgba(5, 5, 5, 0.84) 62%, rgba(5, 5, 5, 0.45) 85%, transparent 100%);
}

.soiree-plan-dessin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.soiree-plan-portrait { display: none; }

/* Murs opaques dans un groupe translucide : la transparence s'applique une
   fois a l'ensemble, et les jonctions ne font plus de carres plus clairs. */
.soiree-plan-murs { opacity: 0.8; }

.soiree-plan-mur { fill: #f5ecd8; }

.soiree-plan-trait {
    fill: none;
    stroke: rgba(245, 236, 216, 0.5);
    stroke-width: 3;
}

.soiree-plan-porte {
    fill: none;
    stroke: rgba(245, 236, 216, 0.42);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.soiree-plan-scene {
    stroke: rgba(212, 175, 55, 0.25);
    stroke-width: 1.5;
}

.soiree-plan-scene-nom {
    fill: #e6c77a;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.soiree-plan-chaises rect {
    fill: #17130c;
    stroke: rgba(236, 210, 150, 0.6);
    stroke-width: 1.6;
}

.soiree-plan-chaises line {
    stroke: rgba(236, 210, 150, 0.75);
    stroke-width: 2.6;
    stroke-linecap: round;
}

.soiree-plan-chaises.est-prise rect { stroke: rgba(255, 255, 255, 0.16); }

.soiree-plan-chaises.est-prise line { stroke: rgba(255, 255, 255, 0.2); }

/* Une table : la zone qu'on touche comprend ses chaises, le disque dore est
   au centre. */
.soiree-table {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    width: var(--zone);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.soiree-table-disque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% * 80 / 108);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #fff3c4 0%, #f1d27e 36%, #cf9f3f 78%, #a67a26 100%);
    box-shadow:
        inset 0 0 0 1px rgba(90, 60, 10, 0.55),
        inset 0 -3px 8px rgba(120, 80, 10, 0.35),
        0 6px 16px -6px rgba(0, 0, 0, 0.8);
    color: #1d1506;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.soiree-table-mot {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: calc(var(--disque) * 0.15);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.soiree-table-numero {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: calc(var(--disque) * 0.46);
    font-weight: 700;
    line-height: 0.95;
}

button.soiree-table:hover .soiree-table-disque,
button.soiree-table:focus-visible .soiree-table-disque {
    transform: scale(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(90, 60, 10, 0.55),
        0 0 0 3px rgba(255, 228, 160, 0.4),
        0 0 26px 2px rgba(241, 200, 100, 0.55);
}

button.soiree-table:focus-visible { outline: none; }

/* La table dont la boite est ouverte. */
.soiree-table.est-choisie .soiree-table-disque {
    transform: scale(1.1);
    box-shadow:
        inset 0 0 0 1px rgba(90, 60, 10, 0.55),
        0 0 0 3px #fff3c4,
        0 0 30px 4px rgba(241, 200, 100, 0.7);
}

.soiree-table.est-prise { cursor: default; }

.soiree-table.est-prise .soiree-table-disque {
    background: radial-gradient(circle at 38% 30%, #4a4640 0%, #2d2a26 60%, #211f1c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.38);
}

/* Au telephone, le plan tourne d'un quart de tour, scene en haut : les vingt
   tables tiennent en largeur et se touchent du doigt. Les noms restent
   droits, seuls le dessin et les positions changent. */
@media (max-width: 599px) {
    .soiree-plan {
        --zone: var(--zone-portrait);
        --disque: var(--disque-portrait);
        aspect-ratio: 756 / 1480;
    }

    .soiree-plan-paysage { display: none; }

    .soiree-plan-portrait { display: block; }

    .soiree-table {
        left: var(--xp);
        top: var(--yp);
    }

    /* Le mot « table » serait illisible a cette taille : le numero suffit. */
    .soiree-table-mot { display: none; }
}

/* Partenariats ------------------------------------------------------------------ */

.soiree-partenaires {
    scroll-margin-top: 1rem;
}

.soiree-partenaires-entete {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.soiree-partenaires-copie .soiree-surtitre { justify-content: flex-start; }

.soiree-partenaires-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.soiree-partenaires-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La remise du trophee est dans le bas de l'image. */
    object-position: 60% 82%;
    transform: scale(1.35);
    transform-origin: 60% 82%;
}

.soiree-offres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
    padding: 0;
    list-style: none;
}

/* Chaque offre a son metal, comme dans le kit : le diamant bleute, le platine
   gris, l'or. Il se lit sur son rang dans le back-office, pas sur son nom. */
.soiree-offre {
    --metal: linear-gradient(180deg, #fdf6e0 0%, #e6c76a 60%, #c9a13f 100%);
    --metal-bord: rgba(224, 185, 75, 0.45);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.35rem;
    border: 1px solid var(--metal-bord);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
        rgba(12, 12, 14, 0.82);
    box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.95);
}

.soiree-offre-rang-0 {
    --metal: linear-gradient(180deg, #f3f5ff 0%, #c5cbe9 55%, #8f97c4 100%);
    --metal-bord: rgba(197, 203, 233, 0.5);
}

.soiree-offre-rang-1 {
    --metal: linear-gradient(180deg, #ffffff 0%, #d2d2d2 55%, #9a9a9a 100%);
    --metal-bord: rgba(210, 210, 210, 0.42);
}

.soiree-offre-nom {
    margin: 0;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.soiree-offre-avantages {
    display: grid;
    gap: 0.55rem;
    margin: 1.1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    line-height: 1.45;
}

.soiree-offre-avantages li {
    position: relative;
    padding-left: 1.35rem;
}

.soiree-offre-avantages li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.3em;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid #e6c76a;
    border-bottom: 2px solid #e6c76a;
    transform: rotate(-45deg);
}

.soiree-offre-action {
    align-self: flex-start;
    margin-top: auto;
    min-height: 2.75rem;
    padding: 0.6rem 1.3rem;
    border: 1px solid rgba(245, 227, 181, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-clair);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.24s ease, background 0.24s ease, color 0.24s ease;
}

/* Le bouton descend au pied de la carte ; la liste garde toujours son
   espace au-dessus de lui. */
.soiree-offre-avantages { margin-bottom: 1.3rem; }

.soiree-offre-action:hover,
.soiree-offre-action:focus-visible {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
    color: #fff8e3;
    outline: none;
}

/* Une question ----------------------------------------------------------------- */

.soiree-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(4rem, 8vw, 5.5rem);
    text-align: center;
}

.soiree-question .soiree-texte { margin-bottom: 1.3rem; }

/* La boite de rappel ------------------------------------------------------------
   Posee au centre sur ordinateur, elle monte du bas et prend l'ecran au
   telephone. Elle reprend le cadre et les champs du recapitulatif du vote. */

.soiree-boite {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1.2rem;
}

.soiree-boite-voile {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(6px);
}

.soiree-boite-panneau.vote-bulletin-formulaire {
    position: relative;
    width: min(100%, 36rem);
    max-height: calc(100dvh - 2.4rem);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.6rem 1.5rem 1.4rem;
}

.soiree-boite-fermer {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.soiree-boite-fermer svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.soiree-boite-fermer:hover,
.soiree-boite-fermer:focus-visible {
    border-color: var(--gold);
    color: #fff8e3;
    outline: none;
}

.soiree-boite .vote-optin-surtitre { padding-right: 2.6rem; }

.soiree-boite .vote-bulletin-titre { padding-right: 2.6rem; }

.soiree-boite-detail {
    margin: 0 0 1.1rem;
    color: #f3db99;
    font-size: 0.9rem;
    font-weight: 600;
}

.soiree-boite-formules {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
}

.soiree-boite-formule {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    padding: 0.8rem 1rem 0.8rem 2.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.soiree-boite-formule input {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    transform: translateY(-50%);
    accent-color: #d4af37;
}

.soiree-boite-formule:has(input:checked) {
    border-color: rgba(212, 175, 55, 0.7);
    background: rgba(212, 175, 55, 0.08);
}

.soiree-boite-formule-nom {
    color: #fff8e3;
    font-weight: 700;
    font-size: 0.9rem;
}

.soiree-boite-formule-detail {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
}

.soiree-boite-message { margin-top: 0.75rem; }

.soiree-boite-message textarea.vote-recherche {
    min-height: 4.2rem;
    border-radius: 1rem;
    font-family: inherit;
    font-size: max(16px, 0.9rem);
    resize: vertical;
}

.soiree-boite .vote-erreur {
    display: block;
    margin: 0.35rem 0 0;
}

.soiree-boite-erreur { margin-bottom: 0.9rem !important; }

.soiree-boite-envoyee {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0 0.4rem;
    text-align: center;
}

.soiree-boite-coche {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #f8e3a6 0%, #e2bf64 45%, #c99b3c 100%);
    color: #171109;
    box-shadow: 0 0 34px -6px rgba(212, 175, 55, 0.7);
}

.soiree-boite-coche svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soiree-boite-envoyee .vote-bulletin-intro { margin-bottom: 1.3rem; }

/* Tablette et telephone -------------------------------------------------------- */

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

    .soiree-diner-photo {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .soiree-partenaires-photo { order: -1; aspect-ratio: 16 / 10; }

    .soiree-offres { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
}

@media (max-width: 639px) {
    /* La date seule : « La soirée · » la renvoyait a la ligne, et le titre
       dit deja de quelle soiree il s'agit. */
    .soiree-surtitre-lieu { display: none; }

    .soiree-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 20rem;
    }

    .soiree-mecene-texte {
        flex-direction: column;
        gap: 0.4rem;
        text-align: center;
    }

    .soiree-formules { grid-template-columns: minmax(0, 1fr); }

    /* Au telephone, une formule tient sur une ligne : picto, nom et action
       (plus de prix depuis le 26 septembre 2026). */
    .soiree-formule {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "picto nom action"
            "picto places action";
        align-items: center;
        gap: 0.1rem 0.9rem;
        padding: 0.85rem 1rem;
        text-align: left;
    }

    .soiree-formule-picto { grid-area: picto; width: 2.6rem; height: 2.6rem; margin: 0; }

    .soiree-formule-nom { grid-area: nom; }

    .soiree-formule-places { grid-area: places; margin: 0; }

    .soiree-formule-action { grid-area: action; margin: 0; padding: 0; text-align: right; }

    .soiree-boite {
        place-items: end stretch;
        padding: 0;
    }

    .soiree-boite-panneau.vote-bulletin-formulaire {
        width: 100%;
        max-height: 94dvh;
        padding: 1.4rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom));
        border-bottom: 0;
        border-radius: 1.3rem 1.3rem 0 0;
    }
}

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