/* Page Réservation — 3 cases nues (à la carte / à l'année / stages).
   Parti pris : ni icône dans un rond, ni photo. Le caractère vient du double
   filet or en retrait (esprit plaque gravée / carton d'invitation), de
   l'ornement ✦ déjà utilisé dans les séparateurs du site, et de la typographie. */

.resa-choix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-md);
    max-width: var(--container-max);
    margin: 0 auto;
}

.resa-affiche {
    position: relative;
    flex: 1 1 300px;
    max-width: 360px;
    min-height: 320px;
    display: flex;
    align-items: center;
    background: #fff;
    color: var(--c-text-dark);
    transition: box-shadow var(--tr-mid), transform var(--tr-mid);
}

/* Le double filet : un trait or en retrait des bords, comme un carton gravé. */
.resa-affiche__filet {
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(201, 169, 106, 0.55);
    pointer-events: none;
    transition: border-color var(--tr-mid), inset var(--tr-mid);
}
/* Le liseré extérieur, plus discret. */
.resa-affiche::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-border-dark);
    pointer-events: none;
    transition: border-color var(--tr-mid);
}

.resa-affiche__contenu {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--sp-md) calc(var(--sp-md) - 0.25rem);
    text-align: center;
}

.resa-affiche__ornement {
    display: block;
    color: var(--c-or);
    font-size: 0.85rem;
    line-height: 1;
    margin-bottom: 0.9rem;
    transition: letter-spacing var(--tr-mid), color var(--tr-fast);
}

.resa-affiche h2 {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-noir);
    margin: 0 0 0.85rem;
}

/* Filet court sous le titre : rappelle le séparateur ✦ des en-têtes de page. */
.resa-affiche h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    margin: 0.85rem auto 0;
    background: linear-gradient(to right, transparent, var(--c-or), transparent);
}

.resa-affiche p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--c-text-muted-dark);
    margin: 0 auto 1.3rem;
    max-width: 30ch;
}

.resa-affiche__lien {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-or-dark);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(201, 169, 106, 0.5);
    transition: color var(--tr-fast), border-color var(--tr-fast), letter-spacing var(--tr-mid);
}

/* Au survol : le filet or se resserre et s'affirme, rien ne décolle brutalement. */
.resa-affiche:hover,
.resa-affiche:focus-visible {
    box-shadow: 0 10px 30px rgba(13, 10, 8, 0.07);
    transform: translateY(-2px);
}
.resa-affiche:hover .resa-affiche__filet {
    inset: 8px;
    border-color: var(--c-or);
}
.resa-affiche:hover::before { border-color: rgba(201, 169, 106, 0.35); }
.resa-affiche:hover .resa-affiche__ornement {
    color: var(--c-or-dark);
    letter-spacing: 0.3em;
}
.resa-affiche:hover .resa-affiche__lien {
    color: var(--c-or);
    border-color: var(--c-or);
    letter-spacing: 0.24em;
}

.resa-affiche:focus-visible {
    outline: 2px solid var(--c-or);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .resa-affiche,
    .resa-affiche__filet,
    .resa-affiche__ornement,
    .resa-affiche__lien { transition: none; }
    .resa-affiche:hover { transform: none; }
    .resa-affiche:hover .resa-affiche__filet { inset: 11px; }
    .resa-affiche:hover .resa-affiche__ornement { letter-spacing: normal; }
    .resa-affiche:hover .resa-affiche__lien { letter-spacing: 0.2em; }
}

/* Mobile : une case par ligne, moins haute. */
@media (max-width: 640px) {
    .resa-affiche {
        max-width: none;
        min-height: 260px;
    }
    .resa-affiche__contenu { padding: var(--sp-md) var(--sp-sm); }
    .resa-affiche__filet { inset: 9px; }
    .resa-affiche:hover .resa-affiche__filet { inset: 7px; }
    .resa-affiche h2 { font-size: 1.28rem; }
}