/* Prise de rendez-vous en ligne — extrait de make_appointment.blade.php, lot H (P2-18). */
:root {
    --primary: #0f766e;
    --primary-dark: #115e59;
    --primary-soft: #f0fdfa;
    --accent: #e5a23c;
    --bg: #f5f7f6;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --text: #17231f;
    --text-soft: #66756f;
    --text-muted: #5f6b66; /* refonte UX : contraste ≥ 4,5:1 sur blanc (avant #8a9691, ≈ 3,1:1) */
    --border: #e1e8e5;
    --border-strong: #cfdad5;
    --danger: #c4472d;
    --danger-soft: #fff1ed;
    --warning: #b6791f;
    --warning-soft: #fdf3e3;
    --success: #0f766e;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(20, 40, 34, .04);
    --shadow-md: 0 8px 30px rgba(20, 40, 34, .08);
    --transition: 180ms ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.rdv-app { min-height: 100vh; display: flex; flex-direction: column; }
.rdv-vide { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface); text-align: center; color: var(--text-soft); }
.rdv-vide strong { color: var(--text); font-size: 1rem; }
.rdv-vide-icone { font-size: 2rem; }
.rdv-vide-appel { display: inline-flex; align-items: center; min-height: 46px; margin-top: 6px; padding: 0 20px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; }
.rdv-shell { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
@media (min-width: 768px) {
    body { display: flex; justify-content: center; padding: 28px; }
    .rdv-shell { max-width: 760px; min-height: calc(100vh - 56px); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-md); }
}
.rdv-network-banner {
    display: flex; align-items: center; gap: 9px; padding: 10px 20px; background: var(--warning-soft); color: var(--warning);
    font-size: .78rem; font-weight: 650; border-bottom: 1px solid #f3e2bd; transform: translateY(-100%); transition: transform 220ms ease;
}
.rdv-network-banner.is-visible { transform: translateY(0); }
.rdv-network-banner button { margin-left: auto; padding: 5px 10px; border: 1px solid #e6c988; border-radius: 8px; background: transparent; color: var(--warning); font-size: .74rem; font-weight: 700; cursor: pointer; }
.rdv-header { padding: max(18px, env(safe-area-inset-top)) 20px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.rdv-header-inner { max-width: 620px; margin: auto; }
.rdv-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rdv-brand-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; font-weight: 700; color: var(--primary); }
.rdv-brand-name strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-brand-name small { display: block; color: var(--text-soft); font-size: .74rem; font-weight: 500; }
.rdv-pied { max-width: 620px; margin: 0 auto; padding: 0 20px 110px; color: var(--text-muted); font-size: .72rem; text-align: center; }
.rdv-pied b { color: var(--primary); }
.rdv-brand-logo { height: 38px; max-width: 110px; flex: none; object-fit: contain; }
.rdv-brand-icon { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--primary); color: #fff; font-size: 18px; font-weight: 800; }
.rdv-secure { display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: .72rem; font-weight: 500; }
.rdv-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: #e9eeec; }
.rdv-progress-bar { width: 0%; height: 100%; border-radius: inherit; background: var(--primary); transition: width .35s ease; }
.rdv-progress-info { display: flex; justify-content: space-between; margin-top: 7px; color: var(--text-muted); font-size: .75rem; }
.rdv-body { flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 30px 20px 130px; position: relative; overflow: hidden; }
.rdv-step { animation: rdv-enter-avant 260ms cubic-bezier(.22, .9, .32, 1) both; }
.rdv-step.rdv-leaving-back { animation-name: rdv-enter-arriere; }
@keyframes rdv-enter-avant { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rdv-enter-arriere { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .rdv-step { animation: none; } }
.rdv-question { margin: 0; font-size: clamp(1.45rem, 4vw, 1.85rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 750; }
.rdv-hint { max-width: 520px; margin: 8px 0 24px; color: var(--text-soft); font-size: .92rem; line-height: 1.55; }
.rdv-list { display: flex; flex-direction: column; gap: 9px; }
.rdv-departement-titre { margin: 24px 0 9px; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.rdv-departement-titre:first-child { margin-top: 0; }
.rdv-recherche { margin-bottom: 18px; }
.rdv-recherche-label { display: block; margin-bottom: 7px; color: var(--text-soft); font-size: .8rem; font-weight: 650; }
.rdv-recherche-champ {
    width: 100%; min-height: 50px; padding: 12px 14px 12px 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2366756f' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
    color: var(--text); font: inherit; font-size: 1rem; /* 16 px : pas de zoom automatique sur iPhone */
}
.rdv-recherche-champ:focus { outline: 3px solid rgba(8, 127, 107, .35); outline-offset: 1px; border-color: var(--primary); }
.rdv-recherche-etat { min-height: 1.2em; margin: 6px 0 0; color: var(--text-muted); font-size: .78rem; }
.rdv-recherche-etat:empty { display: none; }
.rdv-voir-tous {
    width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    background: transparent; color: var(--primary-dark); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer;
}
.rdv-voir-tous:hover { border-color: var(--primary); background: var(--primary-soft); }
.rdv-voir-tous:focus-visible { outline: 3px solid rgba(8, 127, 107, .6); outline-offset: 2px; }
.rdv-motifs-tous { margin-top: 6px; }
.rdv-option {
    width: 100%; min-height: 62px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.rdv-option:hover { border-color: var(--border-strong); box-shadow: 0 4px 15px rgba(20, 40, 34, .07); transform: translateY(-1px); }
.rdv-option:active { transform: scale(.99); }
.rdv-option:focus-visible { outline: 3px solid rgba(8, 127, 107, .6); outline-offset: 2px; }
.rdv-option.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.rdv-option-icon { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--surface-soft); color: var(--primary); font-size: 16px; }
.rdv-option.is-selected .rdv-option-icon { background: var(--primary); color: white; }
.rdv-option-content { flex: 1; min-width: 0; }
.rdv-option-titre { display: block; font-size: .94rem; line-height: 1.3; font-weight: 650; }
.rdv-option-sous { display: block; margin-top: 3px; color: var(--text-soft); font-size: .78rem; line-height: 1.35; }
.rdv-pill { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--text-soft); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.rdv-chevron { color: var(--text-muted); font-size: 17px; transition: transform var(--transition); }
.rdv-option:hover .rdv-chevron { transform: translateX(2px); }
.rdv-suggestion-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; padding: 6px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: .76rem; font-weight: 650; }
.rdv-date-section { margin-top: 4px; }
.rdv-date-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--text-soft); font-size: .78rem; font-weight: 650; }
.rdv-mois-courant { color: var(--primary); font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.rdv-jours { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rdv-jours::-webkit-scrollbar { display: none; }
.rdv-mois-divider { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; min-width: 32px; margin-right: 2px; padding-left: 9px; border-left: 1px dashed var(--border-strong); color: var(--text-muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.rdv-mois-divider:first-child { border-left: 0; padding-left: 0; margin-right: 4px; }
.rdv-jour { width: 66px; min-width: 66px; padding: 10px 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); cursor: pointer; transition: all var(--transition); }
.rdv-jour:hover { border-color: var(--primary); }
.rdv-jour.is-selected { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 5px 14px rgba(8, 127, 107, .2); }
.rdv-jour-nom { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.rdv-jour-num { display: block; margin-top: 3px; font-size: 1.05rem; font-weight: 750; }
.rdv-periode-titre { margin: 16px 0 9px; color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.rdv-periode-titre:first-child { margin-top: 0; }
.rdv-heures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.rdv-heure { min-height: 48px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font-size: .86rem; font-weight: 600; cursor: pointer; transition: all var(--transition); }
.rdv-heure:hover { border-color: var(--primary); color: var(--primary); }
.rdv-heure.is-selected { border-color: var(--primary); background: var(--primary); color: white; transform: scale(1.03); }
.rdv-vide { grid-column: 1 / -1; margin: 10px 0; padding: 25px 15px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-soft); text-align: center; font-size: .85rem; }
.rdv-form-group { margin-bottom: 17px; }
.rdv-label { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 700; }
.rdv-input { width: 100%; min-height: 52px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 1rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition); }
.rdv-input::placeholder { color: #a4ada9; }
.rdv-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 127, 107, .35); } /* anneau visible (avant .10) */
.rdv-feedback { min-height: 20px; margin: 7px 0 0; font-size: .78rem; }
.rdv-feedback.is-ok { color: var(--success); }
.rdv-feedback.is-error { color: var(--danger); }
.rdv-patient-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid #cde9e1; border-radius: 14px; background: var(--primary-soft); font-size: .86rem; }
.rdv-patient-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: white; font-weight: 700; }
.rdv-recap { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.rdv-recap-header { padding: 18px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.rdv-recap-header strong { display: block; margin-bottom: 3px; font-size: .9rem; }
.rdv-recap-header span { color: var(--text-soft); font-size: .76rem; }
.rdv-recap-body { padding: 4px 18px; }
.rdv-recap-ligne { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.rdv-recap-ligne:last-child { border-bottom: 0; }
.rdv-recap-label { color: var(--text-soft); }
.rdv-recap-valeur { max-width: 60%; font-weight: 650; text-align: right; }
.rdv-recap-note { display: flex; gap: 10px; margin-top: 14px; padding: 13px 14px; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-soft); font-size: .78rem; line-height: 1.5; }
.rdv-succes { padding: 25px 0 10px; text-align: center; }
.rdv-succes-icone { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 2rem; font-weight: 800; box-shadow: 0 0 0 9px rgba(8, 127, 107, .05); }
.rdv-succes .rdv-question { margin-bottom: 8px; }
.rdv-success-text { max-width: 400px; margin: 0 auto 22px; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }
.rdv-sms-notice { display: flex; align-items: flex-start; gap: 11px; margin: 20px auto 0; max-width: 460px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); border: 1px solid #cde9e1; text-align: left; font-size: .82rem; line-height: 1.5; color: var(--text); }
.rdv-sms-notice strong { display: block; margin-bottom: 2px; }
.rdv-post-actions { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin: 24px auto 0; }
.rdv-post-btn { min-height: 52px; padding: 0 18px; border-radius: 12px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition); }
.rdv-post-btn:active { transform: scale(.98); }
.rdv-post-btn-primary { border: 0; background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(8, 127, 107, .16); }
.rdv-post-btn-primary:hover { background: var(--primary-dark); }
.rdv-post-btn-secondary { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.rdv-actions { position: sticky; bottom: 0; z-index: 10; width: 100%; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(245, 247, 246, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rdv-actions-inner { max-width: 620px; display: flex; gap: 9px; margin: auto; }
.rdv-btn { min-height: 52px; border-radius: 12px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition); }
.rdv-btn:active { transform: scale(.98); }
.rdv-btn-retour { flex: 0 0 auto; padding: 0 17px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.rdv-btn-principal { flex: 1; padding: 0 18px; border: 0; background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(8, 127, 107, .16); display: flex; align-items: center; justify-content: center; gap: 9px; }
.rdv-btn-principal:hover:not(:disabled) { background: var(--primary-dark); }
.rdv-btn-principal:disabled { background: #dce4e1; color: #87938e; box-shadow: none; cursor: not-allowed; }
.rdv-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: white; animation: rdv-rotate .7s linear infinite; }
@keyframes rdv-rotate { to { transform: rotate(360deg); } }
.rdv-skeleton { height: 62px; border-radius: var(--radius-md); background: linear-gradient(90deg, #edf1ef 25%, #f7f9f8 37%, #edf1ef 63%); background-size: 400% 100%; animation: rdv-shimmer 1.3s ease infinite; }
@keyframes rdv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (max-width: 360px) {
    .rdv-body { padding-left: 15px; padding-right: 15px; } .rdv-header { padding-left: 15px; padding-right: 15px; }
    .rdv-actions { padding-left: 15px; padding-right: 15px; } .rdv-network-banner { padding-left: 15px; padding-right: 15px; }
    .rdv-question { font-size: 1.35rem; } .rdv-option { padding: 10px; } .rdv-option-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .rdv-pill { display: none; } .rdv-heures { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .rdv-body { padding-left: 35px; padding-right: 35px; } .rdv-header { padding-left: 35px; padding-right: 35px; }
    .rdv-actions { padding-left: 35px; padding-right: 35px; } .rdv-network-banner { padding-left: 35px; padding-right: 35px; }
    .rdv-option { min-height: 68px; } .rdv-heures { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}