/* ==========================================================
   Calendrier de réservation des ateliers — Entre Deux
   Utilise les variables de couleur déjà définies par chaque page.
   ========================================================== */

.resa-section {
    padding: 92px 0;
    background: linear-gradient(180deg, var(--cream) 0%, #f6ece4 100%);
}

.resa {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.resa__head {
    text-align: center;
    margin-bottom: 34px;
}

.resa__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rose-dark);
    margin-bottom: 14px;
}

.resa__eyebrow::before,
.resa__eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--rose);
    opacity: .5;
}

.resa__title {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 500;
    color: var(--brown);
    line-height: 1.2;
    margin: 0 0 12px;
}

.resa__intro {
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--brown-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ---------- Choix de l'atelier ----------
   Une grille d'options plutôt qu'une rangée de pastilles colorées : chaque option
   dit le tarif et le nombre de dates ouvertes, et son liseré de couleur sert de
   légende aux traits du calendrier. Six options tiennent en deux rangs de trois,
   sans ligne orpheline. */

.resa__filtre {
    margin: 26px 0 30px;
}

.resa__filtre-titre {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin: 0 0 14px;
}

.resa__filtre-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 780px;
    margin: 0 auto;
}

.resa__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    background: var(--white);
    border: 1px solid rgba(90, 62, 62, .1);
    border-radius: 14px;
    padding: 12px 15px 12px 19px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

/* Le liseré reprend la couleur de l'atelier : c'est lui qui rend lisibles les
   traits colorés de la grille, sans afficher de légende séparée. */
.resa__opt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--rose));
    opacity: .45;
    transition: var(--transition);
}

/* L'option « tous » empile les cinq couleurs : elle résume la légende. */
.resa__opt--tous::before {
    background: linear-gradient(180deg,
        #c98b8b 0 20%, #7f9a6d 20% 40%, #c9a05e 40% 60%, #a58bb8 60% 80%, #d18a6a 80% 100%);
}

.resa__opt:hover {
    border-color: rgba(196, 142, 142, .45);
    transform: translateY(-1px);
}

.resa__opt:hover::before,
.resa__opt[aria-pressed="true"]::before {
    opacity: 1;
    width: 4px;
}

.resa__opt[aria-pressed="true"] {
    border-color: var(--rose);
    background: #fffaf7;
    box-shadow: 0 8px 20px rgba(196, 142, 142, .16);
}

.resa__opt:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}

.resa__opt-nom {
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--brown);
}

.resa__opt-info {
    font-family: var(--sans);
    font-size: .74rem;
    color: var(--muted);
}

.resa__opt[aria-pressed="true"] .resa__opt-info {
    color: var(--rose-dark);
}

/* ---------- Cadre principal ---------- */

.resa__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 0;
    background: var(--white);
    border: 1px solid rgba(196, 142, 142, .2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.resa__cal {
    padding: 28px 30px 32px;
}

.resa__side {
    padding: 28px 30px 32px;
    background: linear-gradient(160deg, #fdf8f4 0%, var(--card) 100%);
    border-left: 1px solid rgba(196, 142, 142, .18);
}

/* ---------- En-tête du mois ---------- */

.resa__month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.resa__month-label {
    font-family: var(--serif);
    font-size: 1.32rem;
    color: var(--brown);
    text-transform: capitalize;
}

.resa__nav {
    display: flex;
    gap: 7px;
}

.resa__nav button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid rgba(196, 142, 142, .3);
    color: var(--rose-dark);
    cursor: pointer;
    font-size: .8rem;
    transition: var(--transition);
}

.resa__nav button:hover:not(:disabled) {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
}

.resa__nav button:disabled {
    opacity: .32;
    cursor: not-allowed;
}

/* ---------- Grille des jours ---------- */

.resa__weekdays,
.resa__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.resa__weekdays {
    margin-bottom: 8px;
}

.resa__weekdays span {
    text-align: center;
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
}

.resa__day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--muted);
    cursor: default;
}

.resa__day--empty {
    border: none;
}

/* Les ateliers n'ont lieu que le week-end : on teinte les deux dernières
   colonnes pour que l'œil sache où chercher, même sur un mois sans séance. */
.resa__day--we {
    background: #fbf5ef;
}

.resa__day-bars {
    display: flex;
    gap: 3px;
    height: 3px;
}

.resa__day-bars i {
    width: 9px;
    height: 3px;
    border-radius: 2px;
}

/* Vert = une séance a encore des places. C'est le seul repère de disponibilité,
   le rose restant réservé aux actions du site. */
.resa__day--free {
    color: var(--brown);
    background: #eef3e9;
    border-color: rgba(156, 175, 143, .55);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.resa__day--free:hover {
    background: var(--sage);
    border-color: var(--sage-dark);
    color: #fff;
    transform: translateY(-1px);
}

.resa__day--selected {
    background: var(--sage-dark) !important;
    border-color: var(--sage-dark) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(135, 155, 123, .38);
}

.resa__day--free:hover .resa__day-bars i,
.resa__day--selected .resa__day-bars i {
    background: rgba(255, 255, 255, .92) !important;
}

/* Ambre = il ne reste qu'une ou deux places. Ni le vert rassurant, ni le gris
   du complet : l'entre-deux qui invite à ne pas attendre. */
.resa__day--last {
    color: #a9663c;
    background: #fdf1e6;
    border-color: rgba(192, 121, 79, .4);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.resa__day--last:hover {
    background: #f6ddc4;
    border-color: #c0794f;
}

.resa__day--full {
    background: #f4efeb;
    border-color: rgba(155, 138, 128, .28);
    opacity: .85;
}

.resa__day--full .resa__day-num {
    text-decoration: line-through;
}

.resa__day--full .resa__day-bars i {
    background: #ded4cd !important;
}

/* Aujourd'hui : un simple repère, il ne doit pas ressembler à un jour d'atelier. */
.resa__day--today {
    box-shadow: inset 0 0 0 1px rgba(196, 142, 142, .38);
}

.resa__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 20px;
    font-family: var(--sans);
    font-size: .72rem;
    color: var(--muted);
}

.resa__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.resa__legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.resa__legend-we {
    border-radius: 3px !important;
    background: #fbf5ef;
    border: 1px solid rgba(196, 142, 142, .3);
}

/* ---------- Créneaux du jour choisi ---------- */

.resa__side-title {
    font-family: var(--serif);
    font-size: 1.18rem;
    color: var(--brown);
    margin: 0 0 4px;
}

/* « vendredi 7 août » devient « Vendredi 7 août » : on ne capitalise que
   la première lettre, pas le nom du mois. */
.resa__side-title::first-letter {
    text-transform: uppercase;
}

.resa__side-hint {
    font-family: var(--sans);
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.6;
}

.resa__slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Liste des prochaines dates ----------
   Vue par défaut du panneau : sans avoir à deviner quel jour cliquer, on voit
   les séances qui ont encore des places et on entre dans la réservation. */

.resa__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0 0 12px;
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 700;
    color: var(--rose-dark);
    cursor: pointer;
    transition: var(--transition);
}

.resa__back:hover {
    color: var(--brown);
}

.resa__next {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 1px solid rgba(196, 142, 142, .24);
    border-left: 3px solid var(--atelier, var(--rose));
    border-radius: var(--radius);
    padding: 13px 15px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.resa__next:hover {
    transform: translateY(-2px);
    border-color: var(--rose);
    box-shadow: 0 10px 22px rgba(120, 90, 70, .14);
}

.resa__next-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 74px;
    padding-right: 13px;
    border-right: 1px solid rgba(196, 142, 142, .22);
}

.resa__next-when b {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 700;
    color: var(--brown);
    white-space: nowrap;
}

/* « sam. 8 août » : seule la première lettre prend la majuscule. */
.resa__next-when b::first-letter {
    text-transform: uppercase;
}

.resa__next-when span {
    font-family: var(--serif);
    font-size: 1.12rem;
    color: var(--rose-dark);
}

.resa__next-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.resa__next-name {
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--brown);
}

.resa__next-meta {
    font-family: var(--sans);
    font-size: .76rem;
    color: var(--muted);
}

.resa__next-go {
    color: var(--rose);
    font-size: .78rem;
}

.resa__next-more {
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muted);
    text-align: center;
    margin: 4px 0 0;
}

.resa__slot {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(196, 142, 142, .24);
    border-left: 3px solid var(--atelier, var(--rose));
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.resa__slot-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.resa__slot-hour {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--brown);
    font-weight: 600;
}

.resa__slot-price {
    font-family: var(--sans);
    font-size: .88rem;
    font-weight: 700;
    color: var(--rose-dark);
    white-space: nowrap;
}

.resa__slot-name {
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--brown-soft);
    margin: 0 0 10px;
}

.resa__slot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-family: var(--sans);
    font-size: .76rem;
    color: var(--muted);
    margin-bottom: 14px;
}

.resa__slot-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.resa__seats {
    font-weight: 700;
    color: var(--sage-dark);
}

.resa__seats--last {
    color: #c0794f;
}

/* Places restantes : la jauge se lit avant la phrase, la phrase confirme. */
.resa__jauge {
    height: 5px;
    border-radius: 3px;
    background: #f0e7e0;
    overflow: hidden;
    margin-bottom: 8px;
}

.resa__jauge i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sage), var(--sage-dark));
}

.resa__jauge--last i {
    background: linear-gradient(90deg, #e0a97a, #c0794f);
}

.resa__places {
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muted);
    margin: 0 0 14px;
}


.resa__places--last {
    color: #a9663c;
}

.resa__places i {
    margin-right: 3px;
}

.resa__last {
    font-weight: 700;
    color: #a9663c;
}

/* Dans la liste des prochaines dates, la rareté se voit sur le liseré. */
.resa__next--last {
    border-color: rgba(192, 121, 79, .45);
    background: #fffcf8;
}

.resa__slot-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    cursor: pointer;
    transition: var(--transition);
}

.resa__slot-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(196, 142, 142, .34);
}

.resa__slot--full {
    opacity: .72;
}

.resa__slot--full .resa__slot-btn {
    background: #e6ddd6;
    color: var(--muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Solutions de repli proposées sous une séance complète */
.resa__alt {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed rgba(196, 142, 142, .35);
}

.resa__alt p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--brown-soft);
    line-height: 1.55;
    margin: 0 0 10px;
}

.resa__alt p i {
    color: var(--sage-dark);
}

.resa__alt-link {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 700;
    color: var(--sage-dark);
    background: #eef3e9;
    border: 1px solid rgba(156, 175, 143, .45);
    border-radius: 999px;
    padding: 9px 16px;
    margin-bottom: 7px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.resa__alt-link:last-child {
    margin-bottom: 0;
}

.resa__alt-link:hover {
    background: var(--sage);
    border-color: var(--sage-dark);
    color: #fff;
}

.resa__alt-link::first-letter {
    text-transform: uppercase;
}

/* ---------- États vides / secours ---------- */

.resa__empty {
    text-align: center;
    padding: 26px 8px;
}

.resa__empty i {
    font-size: 1.5rem;
    color: var(--rose);
    opacity: .55;
}

.resa__empty p {
    font-family: var(--sans);
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 12px 0 0;
}

/* Les ateliers se traitent par e-mail : le vert de WhatsApp reste à la page
   du bain d'enveloppement. */
.resa__mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-family: var(--sans);
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    border-radius: 999px;
    padding: 12px 22px;
    text-decoration: none;
    transition: var(--transition);
}

.resa__mail:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 10px 24px rgba(196, 142, 142, .34);
}

.resa__empty-note {
    font-family: var(--sans);
    font-size: .76rem !important;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 14px !important;
}

.resa__skeleton {
    height: 74px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #f4ece6 25%, #fbf5f1 50%, #f4ece6 75%);
    background-size: 200% 100%;
    animation: resaShimmer 1.4s infinite;
}

@keyframes resaShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================
   Fenêtre de réservation
   ========================================================== */

.resa-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(58, 40, 40, .55);
    backdrop-filter: blur(4px);
}

.resa-modal.is-open {
    display: flex;
}

.resa-modal__box {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(58, 40, 40, .3);
    overflow: hidden;
    animation: resaRise .35s ease;
}

@keyframes resaRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.resa-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(196, 142, 142, .3);
    color: var(--brown-soft);
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
}

.resa-modal__close:hover {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}

.resa-modal__head {
    padding: 30px 32px 24px;
    background: linear-gradient(135deg, #f8ede6 0%, #f2dcd6 100%);
    text-align: center;
}

.resa-modal__kicker {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rose-dark);
    margin: 0 0 8px;
}

.resa-modal__title {
    font-family: var(--serif);
    font-size: 1.55rem;
    color: var(--brown);
    margin: 0 0 8px;
    line-height: 1.25;
}

.resa-modal__when {
    font-family: var(--sans);
    font-size: .88rem;
    color: var(--brown-soft);
    margin: 0;
}

.resa-modal__when i {
    margin-right: 6px;
    color: var(--rose-dark);
}

.resa-modal__body {
    padding: 26px 32px 30px;
}

.resa-modal__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}

.resa-modal__steps b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--sans);
    font-size: .7rem;
    background: #f1e6e0;
    color: var(--muted);
    transition: var(--transition);
}

.resa-modal__steps b.is-on {
    background: var(--rose);
    color: #fff;
}

.resa-modal__steps i {
    width: 26px;
    height: 1px;
    background: rgba(196, 142, 142, .35);
}

.resa-field {
    margin-bottom: 15px;
}

.resa-field label {
    display: block;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--brown-soft);
    margin-bottom: 6px;
}

.resa-field input,
.resa-field select,
.resa-field textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--brown);
    background: #fdfaf7;
    border: 1px solid rgba(196, 142, 142, .3);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: var(--transition);
}

.resa-field input:focus,
.resa-field select:focus,
.resa-field textarea:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(212, 165, 165, .18);
}

.resa-field textarea {
    resize: vertical;
    min-height: 78px;
}

.resa-hint {
    display: block;
    font-family: var(--sans);
    font-size: .72rem;
    color: var(--muted);
    margin-top: 6px;
}

.resa-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.resa-recap {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.resa-recap__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--sans);
    font-size: .86rem;
    color: var(--brown-soft);
    padding: 5px 0;
}

.resa-recap__row strong {
    color: var(--brown);
}

.resa-recap__row--total {
    border-top: 1px dashed rgba(196, 142, 142, .4);
    margin-top: 6px;
    padding-top: 11px;
}

.resa-recap__row--total strong {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--rose-dark);
}

.resa-note {
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0 0 18px;
}

.resa-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    border: none;
    border-radius: 999px;
    padding: 15px 24px;
    cursor: pointer;
    transition: var(--transition);
}

.resa-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(196, 142, 142, .34);
}

.resa-btn:disabled {
    opacity: .65;
    cursor: wait;
}

.resa-btn--ghost {
    background: none;
    color: var(--brown-soft);
    border: 1px solid rgba(196, 142, 142, .35);
    margin-top: 10px;
}

.resa-btn--ghost:hover {
    background: #fdf4f0;
    box-shadow: none;
    transform: none;
}

.resa-error {
    font-family: var(--sans);
    font-size: .84rem;
    color: #c0392b;
    background: #fdeeec;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    line-height: 1.55;
}

.resa-error:empty {
    display: none;
}

.resa-pay {
    min-height: 60px;
    margin-bottom: 18px;
}

.resa-legal {
    font-family: var(--sans);
    font-size: .72rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin: 14px 0 0;
}

.resa-legal a {
    color: var(--rose-dark);
}

.resa-done {
    text-align: center;
    padding: 8px 0 4px;
}

.resa-done__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef4e9, #dfe9d6);
    color: var(--sage-dark);
    font-size: 1.5rem;
}

.resa-done h4 {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--brown);
    margin: 0 0 10px;
}

.resa-done p {
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--brown-soft);
    line-height: 1.75;
    margin: 0 0 8px;
}

/* ---------- Adaptations mobile ---------- */

@media (max-width: 880px) {
    .resa__panel {
        grid-template-columns: 1fr;
    }

    .resa__side {
        border-left: none;
        border-top: 1px solid rgba(196, 142, 142, .18);
    }

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

@media (max-width: 560px) {
    .resa-section {
        padding: 62px 0;
    }

    .resa__opt {
        padding: 11px 12px 11px 16px;
        border-radius: 12px;
    }

    .resa__opt-nom {
        font-size: .92rem;
    }

    .resa__opt-info {
        font-size: .7rem;
    }

    .resa__next {
        gap: 11px;
        padding: 12px;
    }

    .resa__next-when {
        min-width: 62px;
        padding-right: 10px;
    }

    .resa {
        padding: 0 16px;
    }

    .resa__cal,
    .resa__side {
        padding: 22px 18px 26px;
    }

    .resa__weekdays,
    .resa__grid {
        gap: 3px;
    }

    .resa__day {
        border-radius: 9px;
        font-size: .84rem;
        gap: 3px;
    }

    .resa__day-bars {
        gap: 2px;
        height: 3px;
    }

    .resa__day-bars i {
        width: 7px;
        height: 3px;
    }

    .resa-modal {
        padding: 0;
    }

    .resa-modal__box {
        border-radius: 0;
        min-height: 100%;
    }

    .resa-modal__head {
        padding: 26px 22px 20px;
    }

    .resa-modal__body {
        padding: 22px 22px 30px;
    }

    .resa-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Réserver depuis la page d'un atelier
   Le haut de page annonce la durée, le groupe et le prix ; la prochaine date
   s'écrit toute seule dès que le calendrier a lu les séances. Juste avant le
   calendrier, deux encadrés répondent aux deux dernières hésitations : ce que
   l'on reçoit pour ce prix, et ce qui se passe quand on clique.
   ========================================================== */

.atelier-hero__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 20px 0 0;
    font-size: .82rem;
    color: var(--brown-soft);
}

.atelier-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.atelier-hero__meta i {
    color: var(--sage);
    font-size: .95em;
}

.atelier-hero__actions {
    margin-top: 22px;
}

.atelier-hero__next {
    margin-top: 12px;
    font-size: .82rem;
    color: var(--brown-soft);
}

.atelier-hero__next i {
    color: var(--sage);
    margin-right: 7px;
}

.atelier-hero__next b {
    font-weight: 700;
    color: var(--brown);
}

.atelier-hero__next a {
    color: var(--brown);
    border-bottom: 1px solid rgba(156, 175, 143, .6);
    text-decoration: none;
}

.resa-valeur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 0 0 34px;
}

.resa-valeur__box {
    background: var(--white);
    border: 1px solid rgba(156, 175, 143, .22);
    border-radius: 20px;
    padding: 26px 28px 24px;
}

.resa-valeur__box--calme {
    background: var(--cream-2);
    border-color: rgba(90, 62, 62, .09);
}

.resa-valeur__box h3 {
    font-family: var(--serif, "Cormorant Garamond", serif);
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--brown);
    margin-bottom: 14px;
}

.resa-valeur__box ul {
    list-style: none;
    display: grid;
    gap: 9px;
}

.resa-valeur__box li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--brown-soft);
}

.resa-valeur__box li i {
    margin-top: 4px;
    font-size: .82em;
    color: var(--sage);
}

.resa-valeur__box--calme li i {
    color: var(--rose);
}

.resa-valeur__emporte {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(90, 62, 62, .1);
    font-size: .86rem;
    line-height: 1.55;
    color: var(--brown);
}

.resa-valeur__emporte i {
    color: var(--sage);
    margin-right: 8px;
}

.resa-valeur__signature {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(90, 62, 62, .1);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--brown-soft);
}

.resa-valeur__signature img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 60% 30%;
    flex: 0 0 auto;
}

.resa-valeur__signature b {
    color: var(--brown);
}

.resa-valeur__note {
    color: #c9a05e;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .resa-valeur {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 26px;
    }

    .resa-valeur__box {
        padding: 22px 20px 20px;
    }

    .atelier-hero__meta {
        justify-content: center;
        gap: 6px 16px;
        font-size: .78rem;
    }

    .atelier-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}