/* ==========================================================================
   ATNAILZ — page Rendez-vous (prothésie ongulaire)
   Reprend les couleurs, typos et boutons de style.css ; les cartes de
   réservation sont en blanc os sur le fond espresso de la boutique.
   ========================================================================== */
:root { --announce-h: 0px; }
.rdv-page { padding-top: 72px; }
.rdv-wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.rdv-hero { padding-block: clamp(60px, 10vw, 120px) clamp(30px, 5vw, 60px); }
.rdv-hero .display { font-size: clamp(44px, 8vw, 112px); }
.rdv-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.rdv-section { padding-block: clamp(40px, 7vw, 90px); }
.rdv-section .section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.rdv-section .display { font-size: clamp(36px, 6vw, 76px); }

/* ---------- tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.t-card { background: color-mix(in srgb, var(--bone) 7%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 16%, transparent); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-card h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.t-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 12%, transparent); }
.t-row:last-child { border-bottom: 0; }
.t-row b { font-weight: 600; }
.t-row .p { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-row small { grid-column: 1 / -1; opacity: .7; font-size: 13.5px; }
.t-note { font-size: 13.5px; opacity: .72; margin-top: 10px; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 16px; }
.offer { padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--bone) 7%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 12%, transparent); }
.offer h4 { margin: 0 0 4px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; }
.offer p { font-size: 14px; opacity: .8; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px 26px; margin-top: 26px; }
.rules h4 { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; font-weight: 400; }
.rules p { font-size: 14.5px; opacity: .85; }

/* ---------- carte de réservation ---------- */
.book { background: var(--bone); color: var(--ink); border-radius: calc(var(--radius) + 6px); padding: clamp(20px, 4vw, 40px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.book .mono { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 26px; scrollbar-width: none; }
.steps span { flex: 1 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--sand-2); opacity: .55; white-space: nowrap; text-align: center; }
.steps span.on { opacity: 1; border-color: var(--ink); font-weight: 700; }
.steps span.done { opacity: .85; border-color: var(--cocoa); }
.step-body { display: flex; flex-direction: column; gap: 22px; }
.step-body h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; line-height: 1.05; }
.step-body h3 { font-family: var(--display); font-weight: 600; font-size: 18px; }
.hint { font-size: 14px; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.req { color: var(--accent); }
fieldset.q { display: flex; flex-direction: column; gap: 10px; }
fieldset.q > legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.choices.one { grid-template-columns: 1fr; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 16px; border: 1px solid var(--sand-2); background: #fffdfa; cursor: pointer; min-width: 0;
  transition: border-color .25s, background-color .25s, transform .3s var(--spring); }
.choice:hover { transform: translateY(-2px); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--card-a); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input { accent-color: var(--ink); margin-top: 4px; flex: none; }
.choice .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.choice small { font-size: 13px; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.choice .pr { margin-left: auto; font-family: var(--display); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.book input[type=text], .book input[type=tel], .book input[type=email], .book input[type=password], .book input[type=date], .book select, .book textarea,
.mine input[type=text], .mine input[type=email], .mine input[type=password] {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sand-2); background: #fffdfa; color: var(--ink); }
.book input:focus-visible, .book select:focus-visible, .mine input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.err { color: #9b2c1f; font-size: 14px; font-weight: 600; }
.ok-msg { color: #2f6b45; font-size: 14px; font-weight: 600; }
.nav-btns { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.book .btn--ghost { color: var(--ink); }
.book .btn--ghost:hover span { color: var(--bone); }
.book .btn:disabled { opacity: .45; pointer-events: none; }
.linkish { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* récapitulatif */
.summary { background: var(--card-a); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.summary .l { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary .l > :last-child { white-space: nowrap; text-align: right; }
.summary .l.muted { color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 14px; }
.summary .l.disc { color: #2f6b45; }
.summary .l.total { border-top: 1px solid var(--sand-2); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.summary .l.dep { font-weight: 700; color: var(--accent); }

/* créneaux */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.day { flex: none; width: 70px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--sand-2); background: #fffdfa; text-align: center; scroll-snap-align: start; transition: transform .3s var(--spring), background-color .2s; }
.day .dw { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.day .dn { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.day .dm { font-size: 11px; opacity: .65; }
.day[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.day[aria-pressed="true"] .dw, .day[aria-pressed="true"] .dm { opacity: .8; }
.day:not(:disabled):hover { transform: translateY(-3px); }
.day:disabled { opacity: .35; cursor: not-allowed; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--sand-2); background: #fffdfa; font-variant-numeric: tabular-nums; font-weight: 600; transition: transform .3s var(--spring); }
.slot.eve { border-style: dashed; }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.slot:not(:disabled):hover { transform: translateY(-2px); }
.slot:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* inspirations */
.thumbs { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; } /* style.css a aussi une classe .thumbs (positionnée) pour la boutique */
.thumbs figure { margin: 0; width: 92px; display: flex; flex-direction: column; gap: 4px; }
.thumbs img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; border: 1px solid var(--sand-2); }
/* bouton d'ajout de photos : le vrai champ fichier est posé dessus, invisible */
.file-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.file-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1.5px dashed var(--ink); background: var(--card-a); color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; }
.file-btn[hidden] { display: none; }
.file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.thumbs figcaption { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ana { background: var(--card-a); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ana .big { font-size: 17px; }
.ana .big strong { font-family: var(--display); }
.loading::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.notice { border-radius: 18px; padding: 16px 18px; background: #f6e7d2; border: 1px solid #e3c79c; display: flex; flex-direction: column; gap: 6px; }
.notice strong { color: #7a4a10; }
.sumup-box { border: 1px dashed var(--cocoa); border-radius: 18px; padding: 16px; min-height: 120px; }
.timer { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }

/* ---------- mes rendez-vous ---------- */
.mine { display: grid; gap: 18px; }
.mine-card { background: var(--bone); color: var(--ink); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.mine-card h3 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.next { background: var(--ink); color: var(--bone); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.next .when { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; }
.next .mono, .next .hint { color: color-mix(in srgb, var(--bone) 72%, transparent); }
.next .btn--ghost { color: var(--bone); align-self: flex-start; min-height: 42px; }
.next .btn--ghost:hover span { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, currentColor 12%, transparent); }
.chip.ok { background: #dcebdf; color: #2f6b45; }
.rv { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--sand-2); }
.rv:last-child { border-bottom: 0; }
.rv .when { font-weight: 700; }
.stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--cocoa); display: grid; place-items: center; font-size: 12px; color: var(--cocoa); text-align: center; line-height: 1.1; }
.stamp.on { border: 0; background: var(--espresso); }
.stamp.on img { width: 46%; filter: invert(1) brightness(2); }
.stamp.gift { border-style: solid; border-color: var(--accent); color: var(--accent); font-weight: 700; font-size: clamp(8px, 2.3vw, 10px); letter-spacing: 0; padding: 4px; overflow: hidden; }
.stamp.gift.on { background: var(--accent); color: var(--accent-fg); }

#sparkles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }

@media (prefers-reduced-motion: no-preference) {
  .step-body.anim > * { animation: stepIn .55s var(--ease) both; }
  .step-body.anim > *:nth-child(2) { animation-delay: .05s; } .step-body.anim > *:nth-child(3) { animation-delay: .1s; } .step-body.anim > *:nth-child(n+4) { animation-delay: .15s; }
  @keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .stamp.on { animation: stampIn .5s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
  @keyframes stampIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .choice:has(input:checked) { animation: pop .35s var(--spring); }
  @keyframes pop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }
}

/* thème ATNAILZ (bordeaux) : sur le fond bordeaux de la page, les boutons pleins
   passent en crème ; dans les cartes crème, ils restent bordeaux */
html[data-season='atnailz'] .rdv-page .btn--chrome { background: var(--bone); color: var(--ink); }
html[data-season='atnailz'] .rdv-page .book .btn--chrome,
html[data-season='atnailz'] .rdv-page .mine-card .btn--chrome { background: var(--btn-bg); color: #f6efe4; }
html[data-season='atnailz'] .rdv-page .next .btn--ghost { color: var(--bone); }

/* code promo (dernière étape de la réservation) */
.promo-box { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); }
.promo-box label { font-weight: 700; }
.promo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.promo-row input { flex: 1 1 180px; text-transform: uppercase; letter-spacing: .08em; }
.promo-row .btn { min-height: 44px; }
.promo-box.is-on { border-style: solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.promo-box .linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: inherit; opacity: .8; }
/* heures de début regroupées (toutes les 20 min) */
.slot-label { margin: 14px 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.slot { padding: 9px 14px; }
/* nail art décidé le jour J */
.callout-note { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--rose, #f6d6dd); color: var(--ink, #2c0c14); font-size: 14px; line-height: 1.5; }

/* ---------- cartes cadeaux ---------- */
.gc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; max-width: 520px; padding: 28px 26px 24px; border-radius: 22px; background: #6b1324; color: #fbf6f1; box-shadow: 0 26px 40px -30px rgba(76,13,27,.7); }
.gc-card::after { content: '✦'; position: absolute; top: 18px; right: 22px; color: #a9c5e3; font-size: 20px; }
.gc-card p { margin: 0; }
.gc-card-k { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.gc-card-what { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(30px, 6vw, 40px); line-height: 1.1; margin-top: 8px !important; }
.gc-card-value { color: #f6d6dd; }
.gc-card-who { margin-top: 10px !important; }
.gc-card-msg { font-family: Georgia, serif; font-style: italic; font-size: 17px; color: #f6d6dd; }
.gc-card-code { margin-top: 14px !important; padding: 12px 14px; border-radius: 12px; background: #fbf6f1; color: #6b1324; text-align: center; font-family: Menlo, Consolas, monospace; font-size: clamp(17px, 4.6vw, 22px); font-weight: 700; letter-spacing: .1em; user-select: all; }
.gc-card-exp { font-size: 12px; opacity: .8; }
.gc-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gc-kind { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); text-decoration: none; color: inherit; }
.gc-kind span { font-size: 14px; opacity: .8; }
.gc-kind.is-on { background: #6b1324; color: #fbf6f1; border-color: #6b1324; }
a.gc-kind:hover { border-color: currentColor; }
.gc-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-page .promo-row input { text-transform: none; letter-spacing: 0; }
@media print {
  .site-header, .site-footer, .rdv-hero, .section-head, .nav-btns, .toast { display: none !important; }
  .gc-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
}
/* Gel X : dépose comprise si la pose précédente a été faite chez Atnailz */
.gelx-note { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--deep, #6b1324) 8%, transparent); font-size: 13.5px; line-height: 1.45; }
/* ongles cassés : avertissement à partir de 4 ongles */
.broken-warn { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff1e0; border: 1px solid #f3c48b; color: #5a2d00; font-size: 13.5px; line-height: 1.45; }

/* carte fidélité : bouton « Ajouter à Cartes » */
.card-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.wallet-btn { display: inline-flex; align-items: center; gap: 10px; justify-self: start; background: #000; color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 15px; text-decoration: none; }
.wallet-btn svg { width: 22px; height: 22px; }
.wallet-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }