/* Réservation « Premier échange » : reprend les jetons du site (:root de index.html).
   Panneau papier = même famille que .cap-detail ; champs = mêmes dimensions que l’ancien formulaire de contact. */

.booking-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:9%;align-items:start}
.booking-layout>*{min-width:0}

/* Colonne d’accompagnement (fond sombre du site) */
.booking-aside h2{margin:20px 0}
.booking-meta{color:var(--accent);font-size:15px;margin:0 0 6px}
.booking-meta span{margin:0 8px}
.booking-aside ol{padding-left:20px;line-height:1.9;font-size:15px;color:var(--muted)}
.booking-aside li{padding-bottom:18px}
.booking-chosen{padding-top:25px;margin-top:10px;border-top:1px solid #385147}
.booking-selection{margin-top:15px;color:var(--accent);font-size:15px;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}

/* Panneau papier */
.booking-panel{background:var(--paper);color:var(--text);padding:36px;border-radius:6px;min-width:0}
.booking-panel h2{font-size:29px;margin:26px 0 18px;color:var(--text)}
.booking-panel h2:focus{outline:none}
.booking-panel p{color:var(--text)}
.booking-panel a{color:var(--green);overflow-wrap:anywhere}

.booking-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:18px;border-bottom:1px solid #c9d3c6}
.booking-steps li{padding:0 0 14px;font:12px/1.4 var(--body);letter-spacing:.06em;color:#48644f}
.booking-steps li[aria-current]{color:var(--green);border-bottom:2px solid var(--green);margin-bottom:-1px;font-weight:600}
.booking-notice{margin:0;padding:12px 15px;background:#e7eee2;border-radius:4px;font-size:13px}

/* Boutons du panneau : forme de .btn, couleurs adaptées au papier */
.booking-panel button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;max-width:100%;padding:12px 19px;border:1px solid #718674;border-radius:4px;background:transparent;color:var(--green);font:13px/1.3 var(--body);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.booking-panel button:disabled{opacity:.55;cursor:not-allowed}
.booking-panel .booking-primary{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:500;margin-top:22px}
.booking-panel :is(button,input,select,textarea,a):focus-visible{outline:3px solid #9d6323;outline-offset:3px}

/* Champs : mêmes dimensions que le formulaire du site, couleurs pour le papier.
   Le préfixe #contact-form l’emporte sur les anciennes règles sombres de index.html. */
.booking-panel label,.booking-panel #contact-form label{display:block;font-size:12px;color:#36533f;margin:0 0 9px}
.booking-panel select,
.booking-panel #contact-form input,.booking-panel #contact-form select,.booking-panel #contact-form textarea{display:block;width:100%;max-width:100%;min-height:48px;border:1px solid #718674;border-radius:4px;background:#fff;color:var(--text);padding:12px;font:15px var(--body);margin:0 0 22px}
.booking-panel #contact-form textarea{min-height:135px;line-height:1.7;resize:vertical}
.booking-panel #contact-form textarea::placeholder{color:#6b8070}
.booking-panel #contact-form select option,.booking-panel select option{background:#fff;color:var(--text)}
.booking-panel #contact-form input[aria-invalid="true"]{border-color:#96361f}
.booking-panel .field-error{display:block;color:#96361f;font-size:12px;margin:-15px 0 20px}
.booking-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.booking-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Étape 1 : semaines et créneaux */
.booking-week{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px}
.booking-panel .booking-week button{min-width:46px;padding:10px 14px;font-size:16px}
.booking-week span{font-size:14px}
.booking-panel #booking-status{font-size:14px;margin:0 0 12px}
.booking-panel #booking-retry{margin-bottom:12px}
.booking-day{border-top:1px solid #c9d3c6;padding:16px 0}
.booking-day h3{font:500 16px/1.4 var(--body);letter-spacing:0;margin:0 0 12px;text-transform:capitalize;color:var(--text)}
.booking-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.booking-panel .booking-times button{padding:10px 8px;font-size:14px}
.booking-panel .booking-times button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}

/* Étapes 2 et 3 */
.booking-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.booking-panel .booking-actions .booking-primary{margin-top:0}
.booking-panel .booking-small{font-size:13px;color:#48644f;margin:0 0 14px}
.booking-review{margin:18px 0 22px}
.booking-review>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:15px;padding:13px 0;border-bottom:1px solid #c9d3c6}
.booking-review dt{font-size:13px;color:#48644f}
.booking-review dd{margin:0;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.booking-panel .booking-consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-size:14px;line-height:1.6;color:var(--text);cursor:pointer}
.booking-consent input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--green)}
.booking-consent span{flex:1;min-width:0}
.booking-panel .booking-privacy{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--green);text-decoration:underline;text-underline-offset:4px;font-size:14px}
.booking-panel [role="alert"]{color:#96361f;font-size:14px}
.booking-result{padding:12px 0}
.booking-result h2{font-size:32px}

@media(hover:hover){
  .booking-panel button:hover:not(:disabled){background:#e7eee2}
  .booking-panel .booking-primary:hover:not(:disabled){background:#0f523d;border-color:#0f523d}
  .booking-panel .booking-times button[aria-pressed="true"]:hover{background:#0f523d}
  .booking-panel .booking-privacy:hover{background:none;text-decoration-thickness:2px}
}

@media(prefers-reduced-motion:reduce){
  .booking-panel button{transition:none}
}

@media(max-width:850px){
  .booking-layout{gap:40px}
  .booking-panel{padding:25px}
  .booking-form-grid{grid-template-columns:minmax(0,1fr);gap:0}
}

@media(max-width:800px){
  .booking-layout{grid-template-columns:minmax(0,1fr);gap:34px}
}

@media(max-width:600px){
  .booking-panel{padding:22px 16px}
  .booking-panel h2{font-size:25px}
  .booking-steps{gap:10px;justify-content:space-between}
  .booking-steps li{font-size:11px}
  .booking-steps li span{display:block;margin-top:3px}
  .booking-actions>button{flex:1 1 140px}
  .booking-panel #booking-continue{width:100%}
  .booking-review>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .booking-aside ol{font-size:14px}
}