/* Page de réservation des ateliers : couleurs et police du site (rose #A07A81, Manrope). */
.sabliya-ateliers {
    --sab-rose: #A07A81;
    --sab-rose-fonce: #86636a;
    --sab-rose-clair: #f6eef0;
    --sab-beige: #EDE5DC;
    --sab-texte: #3b3335;
    --sab-bordure: #e6d9dc;
    font-family: "Manrope", sans-serif;
    color: var(--sab-texte);
    max-width: 760px;
    margin: 0 auto;
}
.sabliya-ateliers * { box-sizing: border-box; }

.sab-atelier {
    background: #fff;
    border: 1px solid var(--sab-bordure);
    border-radius: 12px;
    padding: 28px;
    margin: 0 0 28px;
}
.sab-atelier__titre {
    margin: 0 0 16px;
    font-size: 26px;
    line-height: 1.25;
    color: var(--sab-texte);
}
.sab-infos { margin: 0 0 18px; display: grid; gap: 8px; }
.sab-infos > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.sabliya-ateliers .sab-infos dt { color: var(--e-global-color-primary, #A07A81); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; padding-top: 3px; }
.sab-infos dd { margin: 0; }
.sabliya-ateliers .sab-infos > div:first-child dd::first-letter { text-transform: uppercase; }
.sab-description { margin: 0 0 20px; line-height: 1.7; }
.sab-description p:last-child { margin-bottom: 0; }

/* Fiches des ateliers (issue 275) : titre mis en avant, points forts, encart pratique beige, coches. */
.sabliya-ateliers { --sab-beige-clair: #F8F4EF; }
.sabliya-ateliers .sab-atelier .sab-atelier__titre {
    font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.08;
    margin-bottom: 20px;
}
/* Titre découpé : type en petit (casse normale, mauve, filet court), nom seul en grand. */
.sabliya-ateliers .sab-atelier__type {
    display: block;
    width: fit-content;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sab-rose);
    font: 600 15px/1.3 "Manrope", sans-serif;
    letter-spacing: .01em;
    color: var(--sab-rose);
}
.sabliya-ateliers .sab-atelier__nom { color: var(--sab-texte); }
.sab-atelier--passe .sab-atelier__nom { color: #6b6063; }
.sab-atelier--passe .sab-atelier__type { color: #8f8487; border-color: #c9bec1; }
.sab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sabliya-ateliers .sab-atelier--passe .sab-atelier__titre { font-size: 32px; }
.sab-atelier--passe .sab-badge { font-family: "Manrope", sans-serif; }

.sab-icone { flex-shrink: 0; width: 20px; height: 20px; color: var(--sab-rose); }

/* Points forts : liste simple avec icône (présentation « carnet d’atelier »). */
.sabliya-ateliers .sab-atouts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sabliya-ateliers .sab-atouts li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sabliya-ateliers .sab-atouts li::before { content: none; }
.sabliya-ateliers .sab-atouts .sab-icone { width: 22px; height: 22px; }

/* ---------- Présentation « carnet d’atelier » (issue 275) ---------- */
.sabliya-ateliers { max-width: 1040px; }
.sabliya-ateliers .sab-carnet { padding: 0; overflow: hidden; }
.sab-carnet__haut { display: grid; grid-template-columns: 42% 1fr; }
.sab-carnet__haut--sans-photo { grid-template-columns: 1fr; }
.sabliya-ateliers .sab-carnet__photo { display: block; width: 100%; height: 100%; min-height: 420px; max-width: none; object-fit: cover; object-position: 40% 30%; border-radius: 0; }
.sab-carnet__texte { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.sab-carnet__haut--sans-photo .sab-carnet__texte { padding-bottom: 8px; }
.sabliya-ateliers .sab-accroche {
    margin: 0 0 22px;
    max-width: 30ch;
    font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif;
    font-style: italic;
    font-size: 24px;
    line-height: 1.35;
    color: var(--sab-texte);
}
.sab-carnet__bas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; padding: 8px 32px 32px; }
.sab-carnet__bas .sab-pratique { margin: 0; }
.sab-carnet__bas .sab-infos--icones > div { grid-template-columns: 1fr; gap: 2px; }
.sab-carnet__bas .sab-description { margin: 0; }
.sabliya-ateliers .sab-deroule__titre { margin: 0 0 16px; font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--sab-texte); }
.sabliya-ateliers .sab-deroule ol { list-style: none; margin: 0; padding: 0; counter-reset: sab-etape; }
.sabliya-ateliers .sab-deroule li { counter-increment: sab-etape; position: relative; margin: 0; padding: 0 0 18px 48px; line-height: 1.55; }
.sabliya-ateliers .sab-deroule li::before {
    content: counter(sab-etape);
    position: absolute; left: 0; top: -4px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--sab-beige); color: var(--sab-rose);
    font: 400 20px/32px var(--e-global-typography-primary-font-family, "Instrument Serif"), serif;
    text-align: center;
}
.sabliya-ateliers .sab-deroule li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 30px; bottom: 2px; width: 1px; background: var(--sab-bordure); }
.sab-carnet__action { padding: 0 32px 32px; text-align: center; }
.sab-carnet__action .sab-formulaire, .sab-carnet__action .sab-message, .sab-carnet__action .sab-complet { text-align: left; }
.sabliya-ateliers .sab-carnet__note { margin: 12px 0 0; font-size: 14px; color: #6b6063; }
.sab-atelier--libre .sab-carnet__note { margin: 0; font-size: 15px; color: var(--sab-texte); }
.sab-atelier--passe .sab-carnet__photo { filter: grayscale(.6); opacity: .85; }
.sab-atelier--passe .sab-accroche { color: #6b6063; }
@media (max-width: 760px) {
    .sab-carnet__haut, .sab-carnet__bas { grid-template-columns: 1fr; }
    .sabliya-ateliers .sab-carnet__photo { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
    .sab-carnet__texte { padding: 24px 20px; }
    .sab-carnet__bas { padding: 0 20px 24px; gap: 24px; }
    .sab-carnet__action { padding: 0 20px 24px; }
    .sabliya-ateliers .sab-accroche { font-size: 21px; }
}

.sab-pratique {
    background: var(--sab-beige-clair);
    border: 1px solid var(--sab-bordure);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 24px;
}
.sabliya-ateliers .sab-pratique__titre {
    margin: 0 0 14px;
    font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--sab-texte);
}
.sab-pratique .sab-infos { margin: 0; gap: 12px; }
.sab-infos--icones > div { grid-template-columns: 170px 1fr; align-items: start; }
.sabliya-ateliers .sab-infos--icones dt { display: flex; align-items: center; gap: 10px; padding-top: 0; min-height: 23px; }
.sab-infos--icones dt .sab-icone { position: relative; top: -1px; }
.sab-infos--icones dd { line-height: 1.55; }
/* Tarif en bandeau qui ferme l’encart (issue 275, option D) : « Tarif » dans la police des titres, montant à droite. */
.sab-pratique--tarif { padding-bottom: 0; overflow: hidden; }
.sabliya-ateliers .sab-tarif {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin: 18px -24px 0;
    padding: 14px 24px;
    background: var(--sab-beige);
    border-top: 1px solid var(--sab-bordure);
}
.sabliya-ateliers .sab-tarif__libelle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--sab-texte);
}
.sab-tarif__libelle .sab-icone { align-self: center; }
.sab-tarif__valeur { white-space: nowrap; }
.sabliya-ateliers .sab-tarif__montant { font-family: var(--e-global-typography-primary-font-family, "Instrument Serif"), serif; font-size: 30px; line-height: 1; color: var(--sab-texte); }
.sab-tarif__unite { margin-left: 4px; font-size: 13px; color: #6b6063; }
.sabliya-ateliers .sab-carte { color: inherit; text-decoration: underline; text-decoration-color: var(--sab-rose); text-underline-offset: 3px; }
.sabliya-ateliers .sab-carte:hover, .sabliya-ateliers .sab-carte:focus-visible { color: var(--sab-rose); }
.sabliya-ateliers .sab-carte .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sabliya-ateliers .sab-description .sab-intertitre { margin: 22px 0 10px; font-weight: 700; color: var(--sab-rose); font-size: 16px; }
.sabliya-ateliers .sab-description ul { list-style: none; margin: 0 0 18px; padding: 0; }
.sabliya-ateliers .sab-description ul li { position: relative; margin: 0 0 8px; padding-left: 32px; }
.sabliya-ateliers .sab-description ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sab-rose-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A07A81' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Flèche du bouton « Réserver ma place » */
.sab-bouton__fleche { width: 15px; height: 15px; margin-left: 8px; vertical-align: -3px; stroke-width: 2; transition: transform .2s; }
.sab-bouton:hover .sab-bouton__fleche, .sab-bouton:focus-visible .sab-bouton__fleche { transform: translateX(3px); }
.sab-reservation[open] > summary .sab-bouton__fleche { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sab-bouton__fleche { transition: none; } }

/* Ateliers passés : encart atténué */
.sab-atelier--passe .sab-pratique { background: #fbf9f9; }
.sab-atelier--passe .sab-icone, .sab-atelier--passe .sab-infos dt, .sab-atelier--passe .sab-intertitre { color: #8f8487 !important; }
.sab-atelier--passe .sab-description ul li::before { filter: grayscale(1); }

.sab-message { border-radius: 8px; padding: 14px 16px; margin: 0 0 22px; line-height: 1.5; }
.sab-message--ok { background: #eef6ee; border: 1px solid #b9d8b9; }
.sab-message--attente, .sab-message--info { background: var(--sab-rose-clair); border: 1px solid var(--sab-bordure); }
.sab-message--erreur { background: #fbeeee; border: 1px solid #e3b4b4; margin-top: 16px; }

.sab-bouton {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    /* Mêmes codes que le bouton « Je m’inscris » de la newsletter (issue 271) : mauve plein, survol beige. */
    background: var(--sab-rose);
    color: #fff;
    border: 1px solid var(--sab-rose);
    border-radius: 999px;
    padding: 12px 28px;
    font: 700 13px "Manrope", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.sab-bouton::-webkit-details-marker { display: none; }
.sab-bouton:hover, .sab-bouton:focus-visible,
.sab-bouton--plein:hover, .sab-bouton--plein:focus-visible { background: var(--sab-beige); color: var(--sab-rose); border-color: var(--sab-rose); }
.sab-bouton--plein { background: var(--sab-rose); color: #fff; }

.sab-reservation[open] > summary { margin-bottom: 8px; }
/* Boutons centrés (issue 272) ; le formulaire et les messages restent alignés à gauche. */
.sab-reservation > summary { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.sab-formulaire .sab-envoi { text-align: center; }
.sab-formulaire { margin-top: 12px; }
.sab-formulaire p { margin: 0 0 14px; }
.sab-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sab-formulaire label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.sab-formulaire input[type="text"],
.sab-formulaire input[type="email"],
.sab-formulaire input[type="tel"],
.sab-formulaire select {
    width: 100%;
    border: 1px solid var(--sab-bordure);
    border-radius: 8px;
    padding: 11px 12px;
    font: 15px "Manrope", sans-serif;
    background: #fff;
}
.sab-formulaire input:focus-visible, .sab-formulaire select:focus-visible { outline: 2px solid var(--sab-rose); outline-offset: 1px; }
.sab-case label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.sab-case input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--sab-rose); cursor: pointer; } /* 22 px : facile à cocher au doigt ; le libellé entier reste cliquable */
.sab-case a, .sab-vide a, .sab-complet a { color: var(--sab-rose); text-decoration: underline; }
.sab-note { font-size: 13px; color: #6b6063; }
.sab-aide { display: block; margin-top: 4px; font-size: 13px; color: #6b6063; }
.sab-case .sab-aide { margin-left: 32px; }
.sab-case .sab-aide a { color: var(--sab-rose); }
.sab-complet, .sab-vide { background: var(--sab-rose-clair); border-radius: 8px; padding: 14px 16px; margin: 0; }

/* Récapitulatif après une réservation confirmée */
.sab-recap { border-color: var(--sab-rose); }
.sab-recap__ref { margin: -6px 0 18px; color: #6b6063; }
.sab-recap__ref strong { color: var(--sab-rose); letter-spacing: .04em; }
.sab-discret { color: #6b6063; font-size: 14px; }
.sab-recap__suite { background: var(--sab-rose-clair); border-radius: 8px; padding: 18px 20px; margin: 22px 0; }
.sab-recap__suite h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
.sab-recap__suite ul { margin: 0; padding-left: 20px; }
.sab-recap__suite li { margin: 0 0 8px; line-height: 1.55; font-size: 14.5px; }
.sab-recap__suite li:last-child { margin-bottom: 0; }
.sab-recap__suite a { color: var(--sab-rose); text-decoration: underline; }
.sab-recap__actions { margin: 0; text-align: center; }
.sab-recap__actions .sab-bouton { text-decoration: none; }

/* Ateliers passés : section à part, cartes atténuées, mention « Atelier passé » */
.sab-section-titre { margin: 40px 0 20px; font-size: 24px; line-height: 1.3; color: var(--sab-texte); }
.sab-atelier--passe { background: #faf7f8; border-style: dashed; }
.sab-atelier--passe .sab-atelier__titre { color: #6b6063; }
.sab-atelier--passe .sab-description { color: #6b6063; }
.sab-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #ece3e5;
    color: #6b6063;
    font: 700 12px "Manrope", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* Billet (QR code) */
.sab-qr { text-align: center; margin: 22px 0; padding: 18px 12px; border: 1px dashed var(--sab-rose); border-radius: 8px; }
.sab-qr__titre { margin: 0 0 10px; font-weight: 700; }
.sab-qr img { display: block; margin: 0 auto 10px; width: 220px; max-width: 100%; height: auto; image-rendering: pixelated; }
.sab-qr .sab-note { margin: 0; }
.sab-qr a, .sab-controle a { color: var(--sab-rose); text-decoration: underline; }
.sab-controle dl { margin-bottom: 14px; }

/* Champ piège anti-robots : hors de l’écran, mais pas masqué par display:none (que les robots ignorent). */
.sab-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
    .sab-atelier { padding: 20px; }
    .sab-atelier__titre { font-size: 22px; }
    .sabliya-ateliers .sab-atelier .sab-atelier__titre { font-size: 34px; }
    .sabliya-ateliers .sab-atelier--passe .sab-atelier__titre { font-size: 26px; }
    .sabliya-ateliers .sab-atelier__type { font-size: 14px; }
    .sab-pratique { padding: 16px 18px; }
    .sab-pratique--tarif { padding-bottom: 0; }
    .sabliya-ateliers .sab-tarif { margin-left: -18px; margin-right: -18px; padding: 12px 18px; }
    .sab-infos > div, .sab-infos--icones > div { grid-template-columns: 1fr; gap: 4px; }
    .sab-ligne { grid-template-columns: 1fr; }
    /* Le thème impose aux <button> nowrap, majuscules et lettres espacées : le texte doit pouvoir passer à la ligne. */
    .sab-bouton, .sab-reservation > summary { width: 100%; text-align: center; white-space: normal; padding-left: 16px; padding-right: 16px; line-height: 1.4; letter-spacing: 1px; }
}