:root{
  /* Thème clair moderne (glassmorphism) */
  --brand-primary:#0080FF;   /* bleu accent */
  --brand-secondary:#66B2FF; /* bleu clair pour dégradés */
  --bg-1:#F6FAFF;           /* fond clair dégradé */
  --bg-2:#FFFFFF;
  --text:#1A1A1A;
  --muted:#4D4D4D;
  --border:rgba(0,0,0,0.08);
  --glass:rgba(255,255,255,0.28);
  --glass-strong:rgba(0,128,255,0.25);
  --radius:18px;
  --shadow:0 10px 30px rgba(15,23,42,0.12);
  --space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:56px;--space-7:88px;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  /* Accents fond (variations douces pour renforcer l'effet glass) */
  --bg-accent-blue: 0,128,255;   /* dérivé primaire */
  --bg-accent-purple: 124,58,237;/* violet analogue */
  --bg-accent-teal: 13,148,136;  /* sarcelle analogue */
  --bg-accent-sky: 56,189,248;   /* bleu ciel/cyan doux */
  --bg-accent-indigo: 67,56,202; /* indigo doux */
  --bg-accent-strength: 0.12;
  --bg-accent-strength-2: 0.08;
}

*{box-sizing:border-box}
html, body{min-height:100vh}
html{background: var(--bg-2)}
body{margin:0; font-family:var(--font); color:var(--text)}
body > *:not(style):not(script){transition:opacity .45s ease, transform .45s ease, filter .45s ease}
body > header{transition:opacity .35s ease, transform .0s, filter .0s}
html.fonts-loading body > header{transform:none; filter:none}
html.fonts-loading body{opacity:1}
html.fonts-loading body > *:not(style):not(script){opacity:0; transform:translateY(8px); filter:blur(3px)}
html.fonts-loading body > header{opacity:0}
html.fonts-loaded body{animation:fontFadeIn .2s ease}
html.fonts-loaded body > *:not(style):not(script){opacity:1; transform:none; filter:none}
html.fonts-loaded body > header{opacity:1}
@keyframes fontFadeIn{from{opacity:0} to{opacity:1}}
/* Sticky footer layout */
body{display:flex; flex-direction:column; min-height:100vh}
main.container{flex:1 0 auto; display:flex; flex-direction:column}
/* Désactivation de l'ancien calque pseudo-élément */
body::before{content:none}
/* Trame douce pour casser la monotonie */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:0.3; background:
  linear-gradient(0deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) 0 0/100% 100%,
  repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 80px),
  repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 80px);
mix-blend-mode:soft-light}

/* Mouvement du fond uniquement sur la variante active */

/* (Supprimé) autres variantes: mesh et cool */

/* Variante marine: indigo + bleu + cyan + teal (sans violet, look clinique) */
body.bg-variant-marine{
  background-image:
    radial-gradient(1000px 600px at 8% 12%, rgba(var(--bg-accent-indigo), 0.10), transparent 60%),
    radial-gradient(900px 620px at 92% 18%, rgba(var(--bg-accent-blue), 0.14), transparent 62%),
    radial-gradient(980px 700px at 16% 86%, rgba(var(--bg-accent-teal), 0.10), transparent 62%),
    radial-gradient(960px 740px at 84% 86%, rgba(var(--bg-accent-sky), 0.10), transparent 64%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: scroll, scroll, scroll, scroll, scroll;
  background-repeat:no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  body.bg-variant-marine{background-size:100% auto; animation:bgFloatMarine 54s ease-in-out infinite alternate}
  @keyframes bgFloatMarine{
    0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
    50%{background-position:0 -8vh, 0 -6vh, 0 -10vh, 0 -5vh, 0 0}
    100%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
  }
}
/* Revert global container width to original for non-patients pages */
.container{width:min(1100px, 92%); margin-inline:auto}

/* Patients page wider content without affecting others */
main.container:has(.patients){width:min(1300px, 95%)}

/* Centered section utility: vertically centers a single section within main */
main.container:has(> .section.centered){display:flex; flex-direction:column}
.section.centered{margin-top:auto; margin-bottom:auto}

/* Settings page: wider content like patients page */
main.container:has(.section .settings-form){width:min(1280px, 94%)}

/* Work hours page: wider content like settings page */
main.container:has(.section .workhours-grid){width:min(1280px, 94%)}

/* Calendar pages: responsive width for different screen sizes */
main.container:has(.section .calendar),
main.container:has(.section.calendar-day),
main.container:has(.section .calendar-week){width:min(1380px, 95%)}

/* Intermediate screens (laptops 13") optimization */
@media (min-width: 1200px) and (max-width: 1400px){
  main.container:has(.section .calendar),
  main.container:has(.section.calendar-day),
  main.container:has(.section .calendar-week){width:min(1150px, 88%)}
}

/* Smaller intermediate screens optimization */
@media (min-width: 900px) and (max-width: 1199px){
  main.container:has(.section .calendar),
  main.container:has(.section.calendar-day),
  main.container:has(.section .calendar-week){width:min(1000px, 85%)}
}

/* Patients table responsiveness */
.patients-table{table-layout:fixed; width:100%}
.patients-table td,.patients-table th{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle}
.patients-table td{padding-top:16px; padding-bottom:16px}
.patients-table .col-address{max-width:420px}
.patients-table .col-name{max-width:240px}
.patients-table .col-email{max-width:280px}
.patients-table .col-phone{max-width:160px}
.patients-table .col-actions{width:28px; min-width:28px; white-space:nowrap; text-align:right}

@media (max-width: 1100px){
  .patients-table .col-address{display:none}
}
@media (max-width: 900px){
  .patients-table .col-email{display:none}
}
@media (max-width: 720px){
  /* Favoriser le nom sur mobile */
  .patients-table .col-name{width:98%}
  .patients-table .col-phone{display:none}
  .patients-table .col-actions{width:36px; min-width:36px; text-align:right}
}
@media (max-width: 520px){
  .patients-table .col-email{display:none}
}

/* Patients page: prevent horizontal scroll on mobile while keeping chevron visible */
@media (max-width: 520px){
  .patients .table-responsive{overflow-x:hidden}
}

/* Reduce horizontal padding of patients glass-panel on mobile */
@media (max-width: 520px){
  .patients .glass-panel{padding-left:14px; padding-right:14px}
}

/* Floating search bar on mobile */
.search-floating{position:relative}
/* Default: hide clear button until there is text */
.search-floating .clear-icon{display:none}
.search-floating.has-value .clear-icon{display:flex}
@media (max-width: 720px){
  /* plus haute et plus remontée */
  .search-floating{position:fixed; left:12px; right:12px; bottom:38px; z-index:8; display:block}
  .search-floating input[type="search"]{
    width:100%;
    padding:16px 84px 16px 16px;
    border-radius:999px;
    background:rgba(255,255,255,0.98);
    border:1px solid var(--border);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
  }
  .search-floating .search-icon{position:absolute; right:14px; top:50%; transform:translateY(-50%); padding:0; width:36px; height:36px; background:transparent !important; border:none !important; display:flex; align-items:center; justify-content:center; pointer-events:auto}
  .search-floating .clear-icon{position:absolute; right:52px; top:50%; transform:translateY(-50%); width:36px; height:36px; background:transparent; border:none; display:none; align-items:center; justify-content:center; font-size:22px; line-height:1; color:#6b7280; pointer-events:auto}
  /* Leave space so the floating bar doesn't cover last rows */
  .patients .glass-panel{padding-bottom:120px}
}

/* Override generic search-form rules */
.search-floating.search-form{gap:0}
.search-floating.search-form input[type="search"]{border-top-right-radius:0; border-bottom-right-radius:0}
.search-floating.search-form .btn{border-top-left-radius:0; border-bottom-left-radius:0}
/* Desktop-specific style for the clear (x) button integrated inside input */
@media (min-width: 721px){
  /* Give input extra right padding to host the X inside, while keeping group style */
  .search-floating.search-form input[type="search"]{padding-right:80px}
  /* Place the X fully inside the input, a bit left from the join with the search button */
  .search-floating .clear-icon{position:absolute; top:50%; transform:translateY(-50%); right:72px; width:20px; height:20px; background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; color:#0a3a70; opacity:0.6; cursor:pointer}
  .search-floating .clear-icon:hover{opacity:0.6; transform:translateY(-50%) !important; transform: rotate(90deg) !important;}
  .search-floating .clear-icon::before{content:none}
}
@media (max-width: 720px){
  .search-floating.search-form input[type="search"]{border-radius:999px !important}
  .search-floating.search-form .btn{border-radius:999px}
  .search-floating.search-form .btn.search-icon,
  .search-floating.search-form .btn.clear-icon{width:36px !important; height:36px !important; padding:0 !important}
}

/* Patient profile card */
#patient-card .profile-card{padding:28px; display:block; background:rgba(255,255,255,0.68); border:1px solid rgba(0,0,0,0.04); width:100%; max-width:none; margin:0}
#patient-card .profile-header{display:flex; align-items:center; gap:16px}
#patient-card .profile-header{margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border)}
#patient-card .avatar-circle{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#0a3a70; background:linear-gradient(135deg, rgba(0,128,255,0.18), rgba(102,178,255,0.18)); border:1px solid rgba(0,0,0,0.06)}
#patient-card .identity h2{margin:0; font-size:22px}
#patient-card .identity .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
#patient-card .identity .pill{background:rgba(255,255,255,0.85)}
#patient-card .two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; margin-top:20px}
#patient-card .profile-edit textarea{min-height:80px}
#patient-card .profile-edit .form-grid{gap:18px}
@media (max-width: 720px){
  #patient-card .two-col{grid-template-columns:1fr; gap:20px}
  #patient-card .profile-header{align-items:flex-start}
}

/* Patient details column spacing and delimiters */
#patient-card .info-grid{grid-template-columns:120px 1fr; row-gap:12px; column-gap:16px}
#patient-card .info-grid dt{opacity:0.85; font-weight:700}
#patient-card .info-grid dd{margin:0; line-height:1.7}

#patient-card .two-col > div:first-child{border-right:1px solid var(--border); padding-right:20px}
#patient-card .two-col > div:last-child{padding-left:20px}
#patient-card .profile-edit{padding-right:0}
#patient-card .details-block{padding-left:0}

@media (max-width: 640px){
  #patient-card .profile-card{padding:20px}
  #patient-card .avatar-circle{width:52px; height:52px}
  #patient-card .identity h2{font-size:20px}
  #patient-card .identity .pill{font-size:12px}
  #patient-card .two-col{grid-template-columns:1fr; gap:16px}
  #patient-card .two-col > div:first-child{border-right:0; padding-right:0}
  #patient-card .two-col > div:last-child{padding-left:0}
  #patient-card .profile-header{flex-wrap:wrap; gap:12px}
  #patient-card .profile-header .actions-row{order:3; width:100%; margin-left:0; margin-top:12px; justify-content:flex-end}
  #patient-card .profile-edit .form-grid{gap:16px}
}

/* Intra-column separators on the right column */
#patient-card .details-block + .recent-block{border-top:1px solid var(--border); margin-top:24px; padding-top:24px}

/* Alternates UI removed */

/* Break modal styling */
.break-modal{
  backdrop-filter:blur(4px);
  transition:all 0.2s ease;
}
.break-modal .modal-content{
  transform:translateY(-20px) scale(0.95);
  opacity:0;
  transition:all 0.2s ease-out;
  backdrop-filter:saturate(180%) blur(32px);
  overflow:visible;
}
.break-modal.modal-open .modal-content{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Break modal form styling */
.break-modal .form-grid{
  display:grid;
  gap:16px;
}
.break-modal .date-time-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Modal responsive adjustments */
@media (max-width: 720px){
  .patient-modal .modal-content,
  .break-modal .modal-content{
    width:min(96%, calc(100vw - 16px));
    padding:20px;
    margin:8px;
    max-height:calc(100vh - 32px);
  }
  .break-modal .date-time-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* Dashboard breaks section styling */
.breaks-list{
  display:grid;
  gap:16px;
}
.break-item{
  display:grid;
  gap:16px;
  padding:20px;
  background:rgba(67,56,202,0.08);
  border:1px solid rgba(67,56,202,0.2);
  border-radius:16px;
  box-shadow:0 6px 20px rgba(67,56,202,0.1);
  backdrop-filter:saturate(160%) blur(16px);
  transition:all 0.15s ease;
  position:relative;
}
.break-item:hover{
  background:rgba(67,56,202,0.12);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(67,56,202,0.15);
}

/* Dashboard break title styling */
.dashboard .break-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

.break-content{
  display:grid;
  gap:12px;
}
.break-main{
  display:grid;
  gap:8px;
}
.break-title{
  font-size:16px;
  font-weight:700;
  color:#92400e;
}
.break-datetime{
  font-size:15px;
  font-weight:600;
  color:#0a3a70;
  line-height:1.4;
}
.break-description{
  font-size:14px;
  color:var(--muted);
  font-style:italic;
}

/* Break time badge positioning */
.break-time-badge{
  position:absolute;
  top:16px;
  right:16px;
  background:rgba(67,56,202,0.15);
  border-color:rgba(67,56,202,0.3);
  color:var(--text);
}

/* Dashboard break time badge specific styling */
.dashboard .break-time-badge{
  background:rgba(67,56,202,0.15);
  border-color:rgba(67,56,202,0.3);
  color:var(--text);
}
.break-time-badge.now{
  background:rgba(16,185,129,0.12) !important;
  border-color:rgba(16,185,129,0.25) !important;
  color:#065f46 !important;
}

/* Special styling for "En cours" badge on multi-day breaks */
.break-time-badge:contains("En cours"){
  background:rgba(34,197,94,0.12) !important;
  border-color:rgba(34,197,94,0.25) !important;
  color:#15803d !important;
  animation:pulseActive 3s ease-in-out infinite;
}

@keyframes pulseActive{
  0%, 100%{
    background:rgba(34,197,94,0.12);
    border-color:rgba(34,197,94,0.25);
  }
  50%{
    background:rgba(34,197,94,0.18);
    border-color:rgba(34,197,94,0.35);
  }
}

.break-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

/* Improved break datetime display for multi-day breaks */
.break-datetime{
  font-size:15px;
  font-weight:600;
  color:#0a3a70;
  line-height:1.4;
}
.break-datetime.multi-day{
  font-size:14px;
}

/* Mobile break items */
@media (max-width: 720px){
  .break-item{
    padding:16px;
    gap:12px;
  }
  .break-title{
    font-size:15px;
  }
  .break-datetime{
    font-size:14px;
  }
  .break-time-badge{
    position:static;
    margin-bottom:8px;
    font-size:11px;
    padding:4px 8px;
  }
}

/* Recurring breaks section styling */
.recurring-break-item{
  display:grid;
  gap:12px;
  padding:18px;
  background:rgba(67,56,202,0.06);
  border:1px solid rgba(67,56,202,0.15);
  border-radius:14px;
  margin-bottom:16px;
  transition:all 0.15s ease;
}
.recurring-break-item:hover{
  background:rgba(67,56,202,0.08);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(67,56,202,0.1);
}

.break-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
}
.break-info{
  display:grid;
  gap:6px;
}
.break-title{
  font-size:16px;
  font-weight:600;
  color:#6b21a8;
}
.break-pattern{
  font-size:13px;
  color:var(--muted);
  font-family:monospace;
  background:rgba(255,255,255,0.7);
  padding:4px 8px;
  border-radius:6px;
  display:inline-block;
}
.break-description{
  font-size:14px;
  color:var(--text);
  font-style:italic;
}

/* Recurring break form */
.recurring-break-item.new-break{
  background:rgba(0,128,255,0.06);
  border-color:rgba(0,128,255,0.15);
}
.break-form-grid{
  display:grid;
  gap:16px;
}
.form-group{
  display:grid;
  gap:8px;
}
.frequency-selector,
.weekdays-selector{
  display:grid;
  gap:8px;
}
.frequency-selector{
  grid-template-columns:1fr 1fr;
}
.weekdays-selector{
  grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));
  gap:6px;
}
.frequency-option,
.weekday-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,0.9);
  cursor:pointer;
  transition:all 0.15s ease;
  justify-content:center;
  text-align:center;
  min-height:44px;
}
.frequency-option:hover,
.weekday-option:hover{
  background:rgba(0,128,255,0.05);
  border-color:rgba(0,128,255,0.2);
}
.frequency-option:has(input:checked),
.weekday-option:has(input:checked){
  background:rgba(0,128,255,0.1);
  border-color:rgba(0,128,255,0.3);
  color:var(--brand-primary);
  font-weight:600;
}

/* Ensure radio buttons are visible */
.frequency-option input[type="radio"],
.weekday-option input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--brand-primary);
}
.frequency-option input,
.weekday-option input{
  margin:0;
}

.time-inputs{
  display:flex;
  align-items:center;
  gap:12px;
}
.time-inputs input[type=time]{
  flex:1;
}
.time-inputs span{
  color:var(--muted);
  font-weight:600;
}

.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding-top:16px;
  border-top:1px solid var(--border);
  margin-top:16px;
}

.empty-state{
  text-align:center;
  padding:32px 16px;
}
.empty-state p{
  margin:0 0 8px 0;
}

/* Mobile adjustments for recurring breaks */
@media (max-width: 720px){
  .break-header{
    grid-template-columns:1fr;
    gap:12px;
  }
  .break-actions{
    justify-self:stretch;
    display:flex;
    gap:8px;
  }
  .break-actions .btn{
    flex:1;
  }
  .frequency-selector{
    grid-template-columns:1fr;
    gap:8px;
  }
  .frequency-option{
    justify-content:flex-start;
    text-align:left;
  }
  .weekdays-selector{
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
  }
  .frequency-option,
  .weekday-option{
    padding:8px 10px;
    font-size:13px;
    min-height:40px;
  }
  .form-actions{
    flex-direction:column;
  }
  .form-actions .btn{
    width:100%;
  }
}
  
  /* Modal header mobile layout */
  .patient-modal .modal-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .patient-modal .modal-header button{
    align-self:flex-end;
    margin-top:-8px;
  }
  .patient-modal .modal-header h3{
    font-size:16px;
  }
  .patient-modal .modal-header p{
    font-size:12px;
    margin:2px 0 0 0;
  }
  
  /* Table mobile optimizations */
  .patient-modal .alternates-table{
    font-size:12px;
  }
  .patient-modal .alternates-table th{
    padding:8px 10px;
  }
  .patient-modal .alternates-table .alt-date,
  .patient-modal .alternates-table .alt-name,
  .patient-modal .alternates-table .alt-email,
  .patient-modal .alternates-table .alt-phone,
  .patient-modal .alternates-table .alt-address{
    padding:8px 10px;
  }
  
  /* Hide address column on mobile for better fit */
  .patient-modal .alternates-table th:last-child,
  .patient-modal .alternates-table td:last-child{
    display:none;
  }
.site-header{position:sticky; top:0; background:rgba(255,255,255,0.65); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--border); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text); text-decoration:none}
.brand::before{content:""; display:inline-block; width:14px; height:14px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius:4px; transform:rotate(45deg)}
.nav{display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; position:relative; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.7); cursor:pointer}
.nav-toggle .burger{position:absolute; inset:0; margin:auto; width:20px; height:2px; background:var(--text); border-radius:2px; box-shadow:0 -6px 0 var(--text), 0 6px 0 var(--text)}
.nav-links{display:flex; align-items:center; gap:10px}
.nav-links a{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid transparent; text-decoration:none; color:var(--text); opacity:0.92; background:transparent; transition:all .2s ease}
.nav-links a:hover{color:#0a3a70; background:rgba(255,255,255,0.7); border-color:var(--border); box-shadow:0 8px 18px rgba(0,0,0,0.06)}
.nav-links a:active{transform:translateY(0)}
.nav-links a::after{content:""; position:absolute; inset:auto 12px -6px 12px; height:2px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius:1px; opacity:0; transition:opacity .2s ease}
.nav-links a:hover::after{opacity:0.9}
@media (max-width: 900px){
  .nav{gap:6px}
  .nav-toggle{display:inline-block}
  .nav-links{position:absolute; right:4%; top:64px; display:none; flex-direction:column; align-items:stretch; gap:8px; padding:10px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); box-shadow:var(--shadow)}
  .nav.open .nav-links{display:flex; z-index:100;}
  .nav-links a{width:100%}
}

/* Visibilité responsive pour la navbar */
.nav-links a.mobile-only{display:none}
@media (max-width: 900px){
  .nav-links a.mobile-only{display:inline-flex}
}

.hero{padding:var(--space-7) 0}
.hero-content{display:grid; gap:var(--space-5); grid-template-columns:1.1fr 0.9fr; align-items:center}
.hero-copy h1{font-size:clamp(32px, 5vw, 52px); line-height:1.05; margin:0 0 10px}
.hero-visual{display:grid; place-items:center}
.glass-panel{background:var(--glass); border:1px solid rgba(255,255,255,0.4); border-radius:24px; padding:32px; box-shadow:var(--shadow); backdrop-filter:saturate(260%) blur(24px); background-clip:padding-box; position:relative}
@media (max-width: 900px){
  .hero-content{grid-template-columns:1fr; gap:var(--space-4)}
  .glass-panel{padding:24px}
}
.shapes{position:relative; width:min(520px, 92%); aspect-ratio:1/0.72}
.shape{position:absolute; border-radius:14px}
.shape.blue{background:var(--brand-primary); width:44%; height:44%; top:6%; left:0; border-top-left-radius:120px; border-bottom-left-radius:120px; box-shadow:0 20px 40px rgba(0,128,255,0.25)}
.shape.dark{background:#1A1A1A; width:26%; height:26%; top:18%; left:48%; transform:rotate(45deg); opacity:0.12}
.shape.grey{background:#e6eaf5; width:46%; height:64%; top:6%; right:0; border-top-right-radius:160px; border-bottom-right-radius:160px}
.shape.square{border:3px solid rgba(0,0,0,0.06); width:32%; height:32%; top:52%; left:6%; background:transparent}
.shape.circle{background:#dfe7ff; width:32%; height:32%; top:52%; left:44%; border-radius:999px}
.shape.triangle{position:absolute; width:0; height:0; border-left:52px solid transparent; border-right:52px solid transparent; border-top:90px solid #e6eefc; bottom:2%; left:52%}
.lead{color:var(--muted)}
.gradient-text{background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(0,128,255,0.08); color:#0054a8; font-weight:700; letter-spacing:.02em; margin-bottom:10px}

.card{background:var(--glass); border:1px solid transparent; border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--space-4); margin:var(--space-4) 0; backdrop-filter:saturate(220%) blur(32px)}
.message-page{display:grid; place-items:center; min-height:48vh}
.message-card{max-width:720px; text-align:left; display:grid; gap:var(--space-3)}
.message-card h2{font-size:28px; margin:0 0 12px; text-align:center}
.message-card p{font-size:16px; margin:0 0 8px; line-height:1.5}
.message-actions{display:flex; gap:var(--space-2); justify-content:center; margin-top:var(--space-3); flex-wrap:wrap}
.message-actions .btn{white-space:normal}
@media (max-width: 520px){
  .message-actions .btn{width:100%}
  .message-card{padding:24px}
}

/* Confirmation pages only: wider and airier layout */
.confirm-card{max-width:860px; gap:var(--space-4)}
.glass-panel.confirm-card{padding:40px}
.confirm-card h2{margin-bottom:16px}
.confirm-card p{margin:0 0 12px; line-height:1.6}
.confirm-card .form-grid{gap:var(--space-3)}
.confirm-card textarea{ text-align:left }
.confirm-card .message-actions{gap:var(--space-3); margin-top:var(--space-4)}
@media (max-width: 520px){
  .glass-panel.confirm-card{padding:24px}
}

/* Ensure confirm styles always win (placed after generic rules) */
.message-page .confirm-card{width:100%; max-width:980px; gap:var(--space-5)}
.message-page .glass-panel.confirm-card{padding:44px}
.message-page .confirm-card h2{margin-bottom:18px}
.message-page .confirm-card p{margin:0 0 14px; line-height:1.65}
.message-page .confirm-card .form-grid{gap:var(--space-4)}
.message-page .confirm-card textarea{text-align:left}
.message-page .confirm-card .message-actions{gap:var(--space-4); margin-top:var(--space-4)}
@media (max-width: 520px){
  .message-page .glass-panel.confirm-card{padding:26px}
}
.glass-panel{background:var(--glass); border:1px solid transparent; border-radius:24px; padding:32px; box-shadow:var(--shadow); backdrop-filter:saturate(260%) blur(40px); background-clip:padding-box; position:relative; isolation:isolate}
.glass-panel.wide{padding:24px}
/* Habillage spécifique booking: halo subtil, en-tête stické */
.booking{position:relative; isolation:isolate; border-radius:24px}
.booking::before{content:""; position:absolute; inset:-20px -10px auto -10px; height:220px; z-index:0; pointer-events:none; border-radius:inherit; background:
  radial-gradient(600px 200px at 15% 20%, rgba(0,128,255,0.12), transparent 70%),
  radial-gradient(500px 220px at 85% 10%, rgba(102,178,255,0.10), transparent 70%)}
.booking::before{will-change: auto; transition:none}
/* Ensure halo stays behind content consistently */
.booking > *{position:relative; z-index:1}
/* Disable container-level halo (moved onto the panel to avoid edge/corner artifacts) */
.booking::before{content:none !important}

/* New: panel-scoped halo for consistent rendering and preserved shadows */
.booking-panel{position:relative}
.booking-panel::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; background:
  radial-gradient(70% 45% at 20% 8%, rgba(0,128,255,0.10), rgba(0,128,255,0.00) 60%),
  radial-gradient(70% 45% at 80% 6%, rgba(102,178,255,0.08), rgba(102,178,255,0.00) 60%)}
.booking-panel > *{position:relative; z-index:1}
.booking-panel{background:rgba(255,255,255,0.5)}
.booking-panel h2{display:flex; align-items:center; justify-content:space-between}
.glass-panel h3{margin:0 0 14px; font-size:20px}
.glass-panel .toolbar{margin:0 0 16px; padding:0}
.glass-panel .actions-row{gap:12px}
.security-panel.glass-panel{padding:28px}
.security-panel h3{margin:0 0 10px}
.security-panel .form-grid{gap:var(--space-2)}
.security-panel hr.divider{margin:12px 0}
.security-panel label{gap:6px}
.security-panel input[type=password]{padding:10px 12px}
.security-panel .btn{padding:10px 14px; font-size:14px}
.security-panel .actions-row{margin-top:6px; gap:8px}
.security-panel p{margin:0 0 6px 0}
.security-panel form{margin:0}
hr.divider{border:0; height:1px; background:var(--border); margin:16px 0}
.glass-panel .muted{color:#0a3a70; opacity:0.6}
.booking-panel h2::after{content:""; display:inline-block; width:48px; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); opacity:0.6}
.day-chips{position:sticky; top:72px; z-index:5; padding:8px 0; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0)); backdrop-filter:blur(6px)}
.glass-row{display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr}
.glass-row .glass-panel{height:100%}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.chip{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.85); color:var(--muted)}
.workday-visual{margin-top:8px}
.workday-visual .chip{display:inline-block; margin-right:6px}
.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4)}
.stat{padding:18px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,0.85); display:grid; gap:6px}
.stat .value{font-size:22px; font-weight:800; color:#0a3a70}
.section{margin-top:var(--space-6)}
section.hero{padding-bottom: var(--space-1); padding-top: var(--space-6);}
.container > .section:first-of-type{margin-top:var(--space-4)}
.hero + .home-sections{margin-top:var(--space-1)}
.two-col{display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--space-4); align-items:start}
/* Settings page: equal columns and improved separation */
.settings-form.glass-panel{padding:40px}
.settings-form .two-col{grid-template-columns:1fr 1fr; gap:0}
.settings-form .two-col > div:first-child{border-right:1px solid var(--border); padding:0 24px 0 0}
.settings-form .two-col > div:last-child{padding:0 0 0 24px}
/* Slightly larger gaps inside settings grids */
.settings-form .form-grid{gap:var(--space-4)}
.settings-form .subpanel h3{margin-top:0}
/* Harmonize section separators spacing on settings */
.settings-form hr.divider{margin:20px 0}
/* Labels a bit more airy on settings */
.settings-form label{gap:10px}
/* Settings: subpanel spacing and autosave status */
.settings-form .subpanel{margin-bottom:16px}
.autosave-status{font-size:12px; color:#6b7280; text-align:right; min-height:14px}
.autosave-status.saving, .autosave-status.ok, .autosave-status.error{margin-top:6px}
.autosave-status.ok{color:#059669}
.autosave-status.error{color:#dc2626}
/* Settings: emphasize disabled inputs visually */
.settings-form input[disabled]{opacity:0.6; background:#f2f4f7; cursor:not-allowed; color:#6b7280; border-color:#e5e7eb}
/* Larger font size for better readability in settings form fields */
.settings-form input, .settings-form textarea, .settings-form select{
  font-size:15px;
  padding:14px 16px;
}
/* Larger font for settings form labels */
.settings-form label{
  font-size:15px;
  font-weight:600;
}
/* Specific compact overrides for security block within settings */
.settings-form.security-panel.glass-panel{padding:28px}
.settings-form.security-panel .form-grid{gap:var(--space-2)}
.settings-form.security-panel hr.divider{margin:12px 0}
.settings-form.security-panel label{gap:6px}
.settings-form + .security-panel{margin-top:16px}
@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
  .settings-form .two-col{grid-template-columns:1fr; gap:var(--space-4)}
  .settings-form .two-col > div:first-child{border-right:0; padding-right:0}
  .settings-form .two-col > div:last-child{padding-left:0}
  .settings-form.glass-panel{padding:32px}
}
@media (max-width: 720px){
  .settings-form.glass-panel{padding:28px}
  .settings-form .form-grid{gap:var(--space-3)}
}
@media (max-width: 520px){
  .settings-form.glass-panel{padding:24px}
}
/* Settings: compact switch layout on small screens */
@media (max-width: 520px){
  .settings-form .switch{display:grid; grid-template-columns:40px 1fr; align-items:center; gap:10px}
  .settings-form .switch .switch-track{grid-column:1}
  .settings-form .switch > span:last-child{grid-column:2; word-break:break-word}
}
.two-col-access{display:grid; grid-template-columns:1fr 1.5fr; gap:var(--space-5); align-items:center}
.two-col-access .content-narrow{max-width:560px; align-self:start}
.two-col-access > div:last-child{display:flex; flex-direction:column; justify-content:center}
.contact-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.max-480{max-width:480px; margin-inline:auto}
.max-640{max-width:640px; margin-inline:auto}


.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,0.7); color:var(--text); text-decoration:none; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,0.02); backdrop-filter:saturate(160%) blur(10px); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease}
.btn:hover{border-color:rgba(0,128,255,0.25); transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,128,255,0.1)}
.search-floating .clear-icon.btn:hover{transform:translateY(-50%) !important}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,0.6); border-color:var(--border); color:#0a3a70}
.btn.ghost:hover{background:rgba(255,255,255,0.9); border-color:rgba(0,128,255,0.35); color:var(--brand-primary)}
.btn-primary{background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color:#fff; border-color:transparent; box-shadow:0 14px 30px rgba(0,128,255,0.35)}
.btn.full{width:100%}
.btn-primary:hover{filter:brightness(0.98)}
.btn-danger{background:transparent !important; color:#b91c1c !important; border-color:rgba(185,28,28,0.25) !important}
.btn-danger:hover{background:rgba(185,28,28,0.06) !important; border-color:rgba(185,28,28,0.35) !important}

label{display:grid; gap:6px; font-weight:500}
input, textarea, select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,0.85); color:var(--text); backdrop-filter:blur(8px); font-family:var(--font)}
/* Ensure inner controls don't bleed outside modal rounded corners */
.break-modal .modal-content input,
.break-modal .modal-content textarea,
.break-modal .modal-content select{position:relative; z-index:0}
textarea{resize:none}
/* iOS Safari: avoid oversized datetime-local value box and truncation */
input[type="datetime-local"]{max-width:100%;}
input[type="datetime-local"]::-webkit-date-and-time-value{min-width:0; overflow:hidden; text-overflow:ellipsis}
@media (max-width: 720px){
  /* Slightly reduce font-size on mobile to keep value string compact */
  input[type="datetime-local"]{font-size:16px}
}
/* Extra WebKit field wrappers to prevent intrinsic min-width expansion on iOS */
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field{min-width:0; padding:0}

/* Désactivation visible des champs non modifiables */
input[disabled], textarea[disabled], select[disabled]{
  background:rgba(255,255,255,0.6);
  color:var(--muted);
  cursor:not-allowed;
}
input::placeholder, textarea::placeholder{color:var(--muted)}
input:focus, textarea:focus, select:focus{outline:3px solid rgba(0,128,255,0.25); border-color:rgba(0,128,255,0.35)}

/* Modern checkbox rows inside booking form */
.stack.sm{display:grid; gap:10px}
label.checkbox{display:grid; grid-template-columns:22px 1fr; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.9)}
label.checkbox input[type=checkbox]{appearance:auto; width:18px; height:18px; margin-top:2px; accent-color:#0a58ca}
label.checkbox span{font-weight:500; color:var(--text); line-height:1.5}
label.checkbox a{color:#0a58ca; text-decoration:underline}

.form-grid{display:grid; gap:var(--space-3)}
.settings-form .form-grid{gap:var(--space-4)}
/* Date navigation next/prev in new appointment */
.date-field{display:grid; gap:8px}
.date-nav{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; position:relative}
.date-nav input[type=date]{flex:0 0 auto; width:180px}
@media (max-width: 720px){.date-nav input[type=date]{width:150px}}
.date-nav .weekday-badge{flex:0 0 auto}
.date-nav .btn{flex:0 0 auto}
@media (max-width: 520px){
  .date-nav{gap:8px}
  .date-nav input[type=date]{width:120px}
}
.date-nav .weekday-badge{pointer-events:none}
.date-nav .btn{padding:0; width:40px; height:40px; border-radius:999px; font-size:22px; line-height:1; position:relative; z-index:2}
@media (max-width: 720px){.date-nav .btn{width:36px; height:36px; font-size:20px}}
.date-nav .weekday-badge{display:inline-block; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,0.85); color:#0a3a70; font-weight:700; font-size:14px}
@media (max-width: 720px){.date-nav .weekday-badge{font-size:13px; padding:6px 8px}}
.payment-methods-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.check-row{display:grid; grid-template-columns:20px auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.95); cursor:pointer}
.check-row .check{position:absolute; opacity:0; pointer-events:none}
.check-row .control{width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(0,0,0,0.35); background:#fff; display:inline-grid; place-items:center; transition:border-color .2s ease, background-color .2s ease}
.check-row .control::after{content:""; width:6px; height:12px; border:2px solid #fff; border-left:none; border-top:none; transform:translateY(-1px) rotate(45deg); opacity:0}
.check-row .label{line-height:1.15}
.check-row:hover .control{border-color:var(--brand-primary)}
.check-row:has(.check:checked) .control{border-color:var(--brand-primary); background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))}
.check-row:has(.check:checked) .control::after{opacity:1}

/* Radio cards for payment choice */
.pay-choice{margin-top:6px}
.pay-choice legend{font-weight:700; color:#0a3a70; margin-bottom:8px}
.pay-cards{display:grid; gap:12px}
.card-option{position:relative; display:block; cursor:pointer}
.card-option input{position:absolute; opacity:0; pointer-events:none}
.card-option .option-inner{display:grid; gap:4px; padding:14px; margin-bottom: 15px;border:1.5px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
.card-option .title{font-weight:700; color:#0a3a70}
.card-option .subtitle{font-size:13px; color:var(--muted)}
.card-option:hover .option-inner{border-color:rgba(0,128,255,0.35); box-shadow:0 6px 16px rgba(0,128,255,0.08)}
.card-option:has(input:checked) .option-inner{border-color:transparent; background:linear-gradient(135deg, rgba(0,128,255,0.10), rgba(102,178,255,0.10)); box-shadow:0 10px 24px rgba(0,128,255,0.12)}
.pay-choice .note{margin-top:6px}
.workday-toggle{display:grid; gap:12px}
.workday-toggle .day-row{display:grid; grid-template-columns:0.7fr 1.3fr; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.72)}
.day-toggle{display:flex; align-items:center; gap:10px}
.day-toggle .label{font-weight:700; color:#0a3a70}
.day-times{display:flex; gap:12px; flex-wrap:wrap}
.time-pair{display:flex; align-items:center; gap:8px}
.time-group{display:grid; gap:6px}
.time-group .group-label{font-size:12px; color:var(--muted)}
.workday-toggle.compact .day-row{padding:8px 10px}

/* Grille verticale des jours (page dédiée) */
.workhours-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
/* Improved styling for work hours page main panel */
.section:has(.workhours-grid) .glass-panel{padding:40px}
@media (max-width: 1100px){
  .workhours-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 900px){
  .section:has(.workhours-grid) .glass-panel{padding:32px}
}
@media (max-width: 720px){
  .workhours-grid{grid-template-columns:1fr; gap:16px}
  .section:has(.workhours-grid) .glass-panel{padding:28px}
  .workhours-col{padding:14px}
}
@media (max-width: 520px){
  .section:has(.workhours-grid) .glass-panel{padding:24px}
  .workhours-col{padding:12px}
  .workhours-grid{gap:14px}
}
.workhours-col{border:1px solid var(--border); border-radius:12px; padding:16px; background:rgba(255,255,255,0.78); min-width:0}
.workhours-col input[type=time]{width:100%; font-size:15px; padding:12px 14px}
.workhours-col.enabled{border-color:rgba(0,128,255,0.35); box-shadow:0 6px 16px rgba(0,128,255,0.08)}
.workhours-col.enabled .label{color:#0a3a70}
.workhours-col .time-pair{display:grid; grid-template-columns:1fr auto 1fr; gap:10px}
.workhours-col .vspace{height:8px}
.workhours-col .day-toggle{justify-content:center}
.workhours-col .time-group{margin-top:12px}
.workhours-col .group-label{font-size:14px; font-weight:600; color:#0a3a70}
.workhours-col .label{font-size:15px; font-weight:600}

/* Switch style for day toggle */
.switch{display:flex; align-items:center; gap:10px}
.switch-input{position:absolute; opacity:0; width:0; height:0}
.switch-track{position:relative; width:40px; height:22px; background:rgba(0,0,0,0.15); border-radius:999px; transition:background .2s ease; display:inline-block}
.switch-thumb{position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:left .2s ease}
.switch-input:checked + .switch-track{background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))}
.switch-input:checked + .switch-track .switch-thumb{left:20px}
.inline-form{display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap}
.inline-form input[type="search"]{width:clamp(220px, 28vw, 360px)}
.inline-form .btn{white-space:nowrap}
/* Groupe de recherche compact: bouton joint à l'input */
.search-form{gap:0}
.search-form input[type="search"]{border-top-right-radius:0; border-bottom-right-radius:0}
.search-form .btn{border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px}
@media (max-width: 520px){
  .search-form{gap:8px}
  .search-form input[type="search"]{border-radius:12px; width:100%}
  .search-form .btn{border-radius:12px; margin-left:0; width:100%}
}

/* Clickable table rows */
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:rgba(0,0,0,0.03)}
tr[data-href] .row-caret{display:inline-block; font-size:18px; line-height:1; color:#0a3a70; opacity:0.5; transition:transform .15s ease, opacity .15s ease}
tr[data-href]:hover .row-caret{transform:translateX(2px); opacity:0.9}
@media (max-width: 720px){
  tr[data-href] .row-caret{font-size:22px; opacity:0.9}
}
.actions-row{display:flex; gap:var(--space-2); align-items:center}
@media (max-width: 720px){
  .actions-row{flex-wrap:wrap}
  .toolbar .actions-row{flex-wrap:wrap}
}

/* Dashboard improvements - Better space usage and mobile optimization */
/* Dashboard page: wider content like patients/settings pages */
main.container:has(.section.dashboard){width:min(1280px, 94%)}

/* Dashboard mobile padding removal for less cramped feeling */
@media (max-width: 720px){
  .dashboard .glass-panel{
    padding: 16px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 20px 20px 0 0;
  }
}

/* Dashboard toolbar actions: optimized layout */
@media (max-width: 900px){
  .dashboard .toolbar .actions-row{display:grid; grid-template-columns:1fr; gap:12px}
  .dashboard .toolbar .actions-row .btn{width:100%; white-space:normal; text-align:center; padding:12px 16px}
  /* Hide settings and break buttons on mobile - available in burger menu and simpler workflow */
  .dashboard .toolbar .actions-row .dashboard-settings-btn,
  .dashboard .toolbar .actions-row button[onclick="openBreakModal()"]{display:none}
}
@media (max-width: 520px){
  .dashboard .toolbar .actions-row .btn{font-size:15px; padding:14px 18px; font-weight:600}
}
.dashboard .toolbar .actions-row{margin-bottom:16px}
/* Calendar toolbar spacing */
.section .toolbar .actions-row{gap:10px}
.section .toolbar + .glass-panel{margin-top:10px}

.flash-stack{display:grid; gap:var(--space-2); margin:var(--space-3) 0}
.flash{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,0.75); color:var(--text); backdrop-filter:blur(8px); box-shadow:0 6px 16px rgba(0,0,0,0.05)}
.flash .icon{width:18px; height:18px; color:#0a3a70}
.flash.success{border-color:rgba(16,185,129,0.35); background:rgba(16,185,129,0.08)}
.flash.error{border-color:rgba(239,68,68,0.35); background:rgba(239,68,68,0.08)}
.flash.info{border-color:rgba(56,189,248,0.35); background:rgba(56,189,248,0.08)}

/* Transparent table headers across the app */
th{background:transparent !important}

.list{display:grid; gap:12px}
.list-item{display:flex; align-items:center; justify-content:space-between; padding:16px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px)}
.glass-panel .list{gap:20px}
.glass-panel .list-item{padding:22px; border-radius:16px; background:rgba(255,255,255,0.68); border:1px solid rgba(255,255,255,0.4); box-shadow:0 10px 30px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06); backdrop-filter:saturate(160%) blur(16px); display:grid; grid-template-columns:1fr auto; align-items:start; gap:20px}
.glass-panel .list-item + .list-item{margin-top:0}
.glass-panel .list-item > div:first-child{display:grid; gap:12px}
.glass-panel .list-item .pill{margin:0}
.glass-panel .list-item .actions-row{gap:10px}
.glass-panel .list-item .actions-row .btn{background:rgba(255,255,255,0.7)}
.glass-panel .list-item .actions-row .btn-danger{background:#d32f2f; color:#fff; border-color:#d32f2f}
.glass-panel .list-item strong{color:#1A1A1A}
/* Dashboard appointments list - Improved design inspired by patients/settings */
.dashboard .glass-panel .list{gap:20px}
.dashboard .glass-panel .list-item{
  position:relative;
  grid-template-columns:1fr; 
  gap:16px; 
  padding:24px;
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  backdrop-filter:saturate(160%) blur(20px);
  transition:all 0.15s ease;
}
.dashboard .glass-panel .list-item:hover{
  background:rgba(255,255,255,0.95);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,128,255,0.12);
  border-color:rgba(0,128,255,0.2);
}

.calendar-day .list{gap:14px}
.calendar-day .list-item{display:grid; grid-template-columns:1fr; gap:14px}
.calendar-day .list-item > div:first-child{min-width:0}
.calendar-day .appt-datetime, .calendar-day .appt-fields .value, .calendar-day .appt-notes{word-break:break-word}
.calendar-day .list-item .actions-row{width:100%; justify-content:stretch; gap:8px}
.calendar-day .list-item .actions-row .btn{flex:1 1 calc(50% - 8px)}
@media (max-width: 480px){
  .calendar-day .list-item .actions-row .btn{flex:1 1 100%}
}
/* Dashboard actions row - Improved spacing and layout */
.dashboard .glass-panel .list-item .actions-row{
  width:100%; 
  justify-content:flex-start; 
  gap:12px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.dashboard .glass-panel .list-item .actions-row .btn, 
.dashboard .glass-panel .list-item .actions-row button{
  flex:0 0 auto;
  min-width:100px;
  padding:10px 16px;
  font-size:14px;
  font-weight:500;
}
.dashboard .glass-panel .list-item .actions-row .btn-danger{
  margin-left:auto; /* Push cancel button to the right */
}

@media (max-width: 720px){
  .dashboard .glass-panel .list-item .actions-row{
    gap:10px;
    margin-top:14px;
    padding-top:14px;
    flex-wrap:wrap;
  }
  .dashboard .glass-panel .list-item .actions-row .btn, 
  .dashboard .glass-panel .list-item .actions-row button{
    flex:1 1 calc(50% - 5px);
    min-width:auto;
    font-size:13px;
    padding:9px 12px;
  }
}

@media (max-width: 480px){
  .dashboard .glass-panel .list-item .actions-row .btn, 
  .dashboard .glass-panel .list-item .actions-row button{
    flex:1 1 100%;
    margin-left:0;
  }
}
/* Dashboard appointment styling - Enhanced typography and spacing */
.dashboard .appt-datetime-section{
  display:grid;
  gap:8px;
}
.dashboard .appt-datetime{
  font-size:18px; 
  line-height:1.4; 
  font-weight:700;
  color:#0a3a70;
  margin-bottom:0;
}

/* Time until badge */
.time-until-badge{
  display:inline-block;
  padding:6px 12px;
  background:rgba(0,128,255,0.08);
  border:1px solid rgba(0,128,255,0.2);
  border-radius:8px;
  color:var(--brand-primary);
  font-size:12px;
  font-weight:600;
  width:fit-content;
}

/* Time until badge positioned at top-left */
.time-until-badge.time-until-top{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  background:rgba(0,128,255,0.12);
  border-color:rgba(0,128,255,0.25);
  box-shadow:0 4px 12px rgba(0,128,255,0.15);
}

/* Special styling for "Maintenant" badge */
.time-until-badge.now{
  background:rgba(16,185,129,0.12) !important;
  border-color:rgba(16,185,129,0.25) !important;
  color:#065f46 !important;
  box-shadow:0 4px 12px rgba(16,185,129,0.15) !important;
  animation:pulseNow 2s ease-in-out infinite;
}

@keyframes pulseNow{
  0%, 100%{
    background:rgba(16,185,129,0.12);
    border-color:rgba(16,185,129,0.25);
  }
  50%{
    background:rgba(16,185,129,0.18);
    border-color:rgba(16,185,129,0.35);
  }
}

/* Payment status section */
.appt-payment-status{
  margin-bottom:8px;
}
.payment-pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
}
.payment-pill.scheduled{
  border-color:rgba(16,185,129,0.2);
}
.payment-pill.pending{
  border-color:rgba(245,158,11,0.2);
}
.payment-pill.cancelled{
  border-color:rgba(239,68,68,0.2);
}

/* Contact section improvements */
.dashboard .appt-contact{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:4px;
}
.dashboard .appt-contact .contact-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.dashboard .appt-contact .contact-item .icon{
  width:18px;
  height:18px;
  opacity:0.8;
  color:var(--brand-primary);
}
.dashboard .appt-contact .contact-item a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
}
.dashboard .appt-contact .contact-item a:hover{
  text-decoration:underline;
}
.pill{display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(0,128,255,0.06); color:#0a3a70; font-weight:600; font-size:12px; line-height:1; text-decoration:none}
.pill.scheduled{background:rgba(16,185,129,0.10); color:#065f46}
.pill.cancelled{background:rgba(239,68,68,0.10); color:#7f1d1d}
.pill.holiday{background:rgba(147,51,234,0.08); color:#6b21a8; font-weight:600; border:1px solid rgba(147,51,234,0.15)}

/* Calendar month holiday pills positioning */
.calendar-month .pill.holiday{
  margin-top:4px;
  font-size:11px;
  padding:3px 7px;
  display:inline-block;
  border-radius:8px;
}
.pill.pending{background:rgba(245,158,11,0.12); color:#92400e}
.appt-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.appt-datetime{font-weight:800; color:#1A1A1A; letter-spacing:.01em; margin:0}
.appt-fields{display:grid; gap:12px}
@media (min-width: 720px){
  .appt-fields{grid-template-columns:1fr 1fr}
}
.appt-field .label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:rgba(26,26,26,0.55)}
.appt-field .value{display:block; margin-top:4px; color:var(--text)}
.appt-contact{font-size:13px; opacity:0.85; display:inline-flex; align-items:center; gap:8px}
.appt-contact{flex-wrap:wrap}
.appt-contact a{color:inherit; text-decoration:underline dotted; word-break:break-all}
.appt-contact .contact-item{display:inline-flex; align-items:center; gap:6px; max-width:100%}
.appt-contact .contact-item.email{min-width:200px; flex:1 1 auto}
.appt-contact .contact-item.phone{flex:0 0 auto}
.appt-contact .icon{color:inherit; width:16px; height:16px; flex:0 0 16px; margin:0; vertical-align:middle; display:inline-flex; align-items:center; justify-content:center}
.appt-contact .icon svg{width:16px; height:16px; display:block}
.appt-notes{white-space:pre-wrap}

/* Dashboard mobile enhancements */
@media (max-width: 720px){
  
  /* More compact spacing on mobile */
  .dashboard .glass-panel .list{gap:16px}
  .dashboard .glass-panel .list-item{
    padding:18px;
  }
  .dashboard-appt-content{
    gap:16px;
    margin-top:6px;
  }
  .dashboard-appt-content .appt-main-info{
    gap:10px;
  }
  .dashboard-appt-content .appt-details{
    gap:10px;
  }
  .dashboard .appt-datetime{
    font-size:16px;
    margin-bottom:0;
  }
  .dashboard .appt-datetime-section{
    gap:6px;
  }
  .dashboard-appt-content .patient-name{
    font-size:15px;
  }
  .dashboard .value{
    font-size:14px;
  }
  .dashboard .label{
    font-size:12px;
  }
  
  /* Mobile: Stack layout instead of columns */
  .dashboard-appt-content{
    grid-template-columns:1fr;
    gap:14px;
    align-items:unset; /* Reset align-items for mobile */
    min-height:unset; /* Reset min-height for mobile */
  }
  .dashboard-appt-content .appt-details{
    display:grid; /* Reset to grid on mobile */
    gap:10px; /* Smaller gap on mobile */
    justify-content:unset; /* No vertical centering on mobile */
    min-height:unset; /* No min-height constraint on mobile */
  }
  
  /* Time until badge mobile adjustments */
  .time-until-badge{
    font-size:11px;
    padding:4px 8px;
  }
  .time-until-badge.time-until-top{
    top:12px;
    right:12px;
    font-size:10px;
    padding:4px 8px;
  }
  
  /* Payment pill mobile adjustments */
  .payment-pill{
    font-size:11px;
    padding:5px 10px;
  }
  
  /* Payment status section mobile */
  .appt-payment-status{
    margin-bottom:6px;
    margin-top:8px; /* Add space from contact on mobile */
  }
}

/* Dashboard card content layout - Inspired by patients page */
.dashboard-appt-content{
  display:grid;
  gap:20px;
  margin-top:8px;
}

/* Main info section */
.dashboard-appt-content .appt-main-info{
  display:grid;
  gap:12px;
}
.dashboard-appt-content .appt-main-info .appt-patient,
.dashboard-appt-content .appt-main-info .appt-notes-section{
  display:grid;
  gap:4px;
}
.dashboard-appt-content .appt-main-info .patient-name{
  font-size:16px;
  font-weight:700;
  color:#0a3a70;
}

/* Patient link styling */
.dashboard .patient-link{
  text-decoration:none;
  color:#0a3a70;
  font-weight:700;
  transition:all 0.15s ease;
  border-radius:6px;
  padding:2px 0;
}
.dashboard .patient-link:hover{
  color:var(--brand-primary);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Cancelled appointments styling - greyed out */
.dashboard .cancelled-appt{
  opacity:0.6;
  filter:saturate(0.3);
}
.dashboard .cancelled-appt .appt-datetime,
.dashboard .cancelled-appt .patient-name,
.dashboard .cancelled-appt .value{
  color:var(--muted) !important;
}
.dashboard .cancelled-appt .patient-link{
  color:var(--muted) !important;
}
.dashboard .cancelled-appt .patient-link:hover{
  color:rgba(77,77,77,0.8) !important;
}
.dashboard .cancelled-appt .actions-row .btn{
  opacity:0.5;
  pointer-events:none;
}

/* Universal label/value styling for dashboard - consistent with settings/patients */
.dashboard .label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:3px;
}
.dashboard .value{
  font-size:15px;
  line-height:1.4;
  color:var(--text);
}
.dashboard .value.muted{
  color:var(--muted);
  font-style:italic;
}

/* Details section */
.dashboard-appt-content .appt-details{
  display:grid;
  gap:12px;
  padding-left:16px;
  border-left:2px solid rgba(0,128,255,0.1);
}

/* Enhanced typography for details section */
.dashboard-appt-content .appt-details .appt-field .label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:4px;
}
.dashboard-appt-content .appt-details .appt-field .value{
  font-size:15px;
  line-height:1.4;
  color:var(--text);
}
.dashboard-appt-content .appt-details .appt-contact .contact-item{
  font-size:15px;
}
.dashboard-appt-content .appt-details .appt-contact .contact-item .icon{
  width:18px;
  height:18px;
}

/* Remove divider completely on mobile and small tablets */
@media (max-width: 900px){
  .dashboard-appt-content .appt-details{
    padding-left:0;
    border-left:none;
  }
}

/* Desktop: Two column layout like patients page */
@media (min-width: 900px){
  .dashboard .glass-panel .list-item{
    padding:28px;
  }
  .dashboard-appt-content{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:24px;
    align-items:stretch; /* Colonnes prennent toute la hauteur */
    min-height:160px; /* Hauteur minimum pour cohérence */
  }
  .dashboard-appt-content .appt-details{
    padding-left:20px;
    border-left:2px solid rgba(0,128,255,0.1);
    display:flex;
    flex-direction:column;
    justify-content:center; /* Centre verticalement les éléments */
    gap:16px; /* Espacement plus généreux */
    min-height:100%;
  }
}

/* Large desktop: More spacious layout */
@media (min-width: 1200px){
  .dashboard .glass-panel .list-item{
    padding:32px;
  }
  .dashboard-appt-content{
    gap:32px;
    min-height:190px; /* Plus de hauteur sur grand écran */
  }
  .dashboard-appt-content .appt-details{
    gap:18px; /* Espacement encore plus généreux */
  }
  .dashboard .appt-datetime{
    font-size:19px;
  }
  .time-until-badge{
    font-size:13px;
    padding:7px 14px;
  }
  .payment-pill{
    font-size:13px;
    padding:7px 14px;
  }
  
  /* Enhanced details section typography for large screens */
  .dashboard-appt-content .appt-details .appt-field .label{
    font-size:14px;
  }
  .dashboard-appt-content .appt-details .appt-field .value{
    font-size:16px;
  }
  .dashboard-appt-content .appt-details .appt-contact .contact-item{
    font-size:16px;
  }
  .dashboard-appt-content .appt-details .appt-contact .contact-item .icon{
    width:20px;
    height:20px;
  }
}

/* Medium desktop optimizations */
@media (min-width: 901px) and (max-width: 1199px){
  .dashboard .appt-datetime{
    font-size:17px;
  }
  .time-until-badge{
    font-size:12px;
    padding:6px 12px;
  }
  
  /* Enhanced details section typography for medium screens */
  .dashboard-appt-content .appt-details .appt-field .label{
    font-size:13px;
  }
  .dashboard-appt-content .appt-details .appt-field .value{
    font-size:15px;
  }
  .dashboard-appt-content .appt-details .appt-contact .contact-item{
    font-size:15px;
  }
}

.cards-grid{display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit, minmax(520px, 1fr))}
.home-sections{display:grid; gap:var(--space-5)}
.home-sections .full{grid-column:1/-1}
.two-col-wide{display:grid; grid-template-columns:1.8fr 1.2fr; gap:var(--space-5)}
@media (max-width: 900px){
  .two-col-wide{grid-template-columns:1fr}
}

.slots-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px}
.slots-chips{grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:12px}
.slot{display:block; text-align:center; padding:12px 14px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); background:rgba(255,255,255,0.8); backdrop-filter:saturate(140%) blur(10px); transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; cursor:pointer}
.slot:hover{border-color:rgba(0,128,255,0.35); transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,128,255,0.10)}
.slot.as-button{width:100%}
.chip-time{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 12px; min-height:60px; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75)) , radial-gradient(600px 200px at 50% -40%, rgba(var(--bg-accent-blue), 0.12), transparent 60%); border-color:rgba(0,128,255,0.22)}
.chip-time .time{font-weight:800; color:var(--text)}
.chip-time .duration{display:none}
.chip-time:hover{transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,128,255,0.12); border-color:rgba(0,128,255,0.35); background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)) , radial-gradient(620px 210px at 50% -40%, rgba(var(--bg-accent-blue), 0.18), transparent 60%)}

/* Ensure reschedule slot forms fill grid width like booking anchors */
.slots-grid form.slot-form{display:block; width:100%}
.slots-grid form.slot-form .slot{width:100%}

.day-group{border:1px solid var(--border); border-radius:14px; margin:12px 0; background:rgba(255,255,255,0.8); backdrop-filter:blur(10px)}
.day-summary{list-style:none; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)); box-shadow:0 2px 10px rgba(0,0,0,0.03)}
.day-group .day-summary{border-radius:14px;}
.day-group[open] .day-summary{border-bottom-left-radius:0; border-bottom-right-radius:0}
.day-summary::-webkit-details-marker{display:none}
.day-summary .caret{width:10px; height:10px; border:2px solid rgba(0,0,0,0.25); border-left:none; border-top:none; transform:rotate(45deg)}
.day-group[open] .day-summary .caret{transform:rotate(225deg)}

.day-group[open] .day-summary{
  background: rgba(255,255,255,0.9);}
.day-group[open] .slot{border-color:rgba(0,128,255,0.35); background:rgba(255,255,255,0.96)}
.day-group[open] .chip-time{border-color:rgba(0,128,255,0.35); background:rgba(var(--bg-accent-blue), 0.12)}
.day-group[open] .chip-time:hover{border-color:rgba(0,128,255,0.45); background:rgba(var(--bg-accent-blue), 0.16)}
.day-group[open] .slot:hover{border-color:rgba(0,128,255,0.5)}
.day-content{padding:0 14px 14px; opacity:0; transition:opacity .12s ease}
.day-group[open] .day-content{opacity:1}
.day-group .day-content{display:block; overflow:visible}
.day-group[open] .day-content{display:block}
.day-group .day-content > *{min-height:auto}
.count-pill{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px dashed rgba(0,128,255,0.35); background:rgba(0,128,255,0.08); color:#0054a8; font-weight:700}
.count-pill::before{content:""; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))}

/* Titre du jour plus affirmé */
.day-title{font-weight:800}

/* Sous-sections Matin / Après-midi */
.subsection{margin:10px 0 6px; display:flex; align-items:center}
.sub-badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.8); color:#0a3a70; font-weight:700; font-size:12px}

/* Nav rapide jours (supprimée) */

.toolbar{display:flex; gap:var(--space-2); align-items:center; justify-content:space-between; margin-top:var(--space-4)}

/* Calendar navigation tabs */
.calendar-nav-tabs{display:flex; gap:2px; background:rgba(255,255,255,0.6); border-radius:12px; padding:4px; margin-right:auto; border:1px solid var(--border)}
.calendar-nav-tabs .tab{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; text-decoration:none; color:#0a3a70; font-weight:500; font-size:14px; transition:all 0.15s ease; white-space:nowrap; min-width:0; flex-shrink:1}
.calendar-nav-tabs .tab:hover{background:rgba(255,255,255,0.8); color:var(--brand-primary)}
.calendar-nav-tabs .tab.active{background:rgba(0,128,255,0.1); color:var(--brand-primary); font-weight:600}
.calendar-nav-tabs .tab .icon{width:16px; height:16px; opacity:0.7}
.calendar-nav-tabs .tab.active .icon{opacity:1}

/* Calendar today button on desktop */
.calendar-today-btn{
  background:rgba(0,128,255,0.06) !important;
  border-color:rgba(0,128,255,0.2) !important;
  color:var(--brand-primary) !important;
  font-weight:600;
}
.calendar-today-btn:hover{
  background:rgba(0,128,255,0.1) !important;
  border-color:rgba(0,128,255,0.3) !important;
}

/* Unified calendar styles for consistency across views */
.calendar-unified-container{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(15,23,42,0.12);
}

/* Unified appointment interaction states */
.calendar-appt-item{
  transition:all 0.15s ease;
  cursor:pointer;
}
.calendar-appt-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,128,255,0.15);
  border-color:rgba(0,128,255,0.3);
  background:rgba(255,255,255,1);
}

/* Unified time display styling */
.calendar-time{
  font-weight:800; 
  color:#0a3a70; 
  font-size:13px;
  letter-spacing:0.01em;
}

/* Unified patient name styling */
.calendar-patient-name{
  font-weight:600; 
  font-size:14px; 
  line-height:1.4;
  color:var(--text);
}

/* Unified notes styling */
.calendar-notes{
  font-size:12px; 
  color:var(--muted); 
  line-height:1.4; 
  margin-top:2px;
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  -webkit-line-clamp:2; 
  line-clamp:2; 
  word-break:break-word;
  white-space:normal; /* override .appt-notes pre-wrap in calendar */
  max-height:calc(1.4em * 2); /* Firefox fallback */
}
/* Day view: allow one extra line for better context */
.calendar-day .calendar-notes{ -webkit-line-clamp:3; line-clamp:3; max-height:calc(1.4em * 3); }

/* Unified count pills */
.calendar-count-badge{
  display:inline-flex; 
  align-items:center; 
  gap:4px; 
  padding:4px 8px; 
  border-radius:999px; 
  border:1px dashed rgba(0,128,255,0.35); 
  background:rgba(0,128,255,0.08); 
  color:#0054a8; 
  font-weight:700; 
  font-size:11px;
}

/* Unified table styling for calendar views */
.calendar.unified{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,0.10);
  backdrop-filter:saturate(180%) blur(16px);
}

.calendar.unified th{
  background:rgba(255,255,255,0.95);
  backdrop-filter:saturate(180%) blur(12px);
  font-weight:600;
  color:#0a3a70;
  border-bottom:1px solid var(--border);
}

.calendar.unified td{
  background:rgba(255,255,255,0.75);
  transition:background 0.15s ease;
}

.calendar.unified td:hover{
  background:rgba(255,255,255,0.9);
}

/* Unified date numbers styling */
.calendar-date-number{
  font-weight:800; 
  color:#0a3a70; 
  font-size:16px;
  line-height:1.2;
}

/* Unified hover effects across all calendar elements */
.calendar-hover-item{
  transition:all 0.15s ease;
}
.calendar-hover-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,128,255,0.15);
  border-color:rgba(0,128,255,0.3);
}

/* Override specific calendar view differences to ensure consistency */
.calendar-month .cal-date,
.calendar-week .time-col,
.calendar-day .appt-datetime{
  font-family:var(--font);
  font-feature-settings:"tnum" 1; /* Tabular numbers for better alignment */
}

/* Unified background transitions for all calendar cells */
.calendar-month .cal-cell,
.calendar-week .week-cell,
.calendar-day .list-item{
  transition:all 0.15s ease;
}

/* Unified pill styles consistency */
.calendar-month .pill.holiday,
.calendar-week .pill.holiday,
.calendar-day .pill.holiday{
  font-size:11px;
  padding:3px 7px;
  border-radius:8px;
  margin-top:4px;
}

/* Unified spacing for better rhythm across views */
.calendar-month .cal-appts,
.calendar-week .week-cell .appt-list,
.calendar-day .list{
  margin-top:8px;
}

/* Enhanced visual consistency for appointment states */
.calendar-month .appt-chip,
.calendar-week .appt-chip.full,
.calendar-day .list-item{
  border-width:1px;
  border-style:solid;
  border-color:var(--border);
  background:rgba(255,255,255,0.9);
}

/* Consistent focus states for accessibility */
.calendar-month .appt-chip:focus,
.calendar-week .appt-chip.full:focus,
.calendar-day .list-item:focus-within{
  outline:2px solid rgba(0,128,255,0.5);
  outline-offset:2px;
}

/* Calendar toolbar improvements with intermediate screen support */
.calendar-toolbar{display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:var(--space-4)}
.calendar-toolbar .nav-section{display:flex; gap:16px; align-items:center; flex:1}
.calendar-toolbar .actions-section{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

/* Intermediate screens toolbar optimization */
@media (min-width: 900px) and (max-width: 1199px){
  .calendar-toolbar{gap:var(--space-2)}
  .calendar-toolbar .nav-section{gap:12px}
  .calendar-toolbar .actions-section{gap:8px}
  .calendar-nav-tabs .tab{
    padding:7px 12px;
    font-size:13px;
  }
  .calendar-today-btn{
    padding:7px 12px;
    font-size:13px;
  }
  .nav-arrow{
    width:36px;
    height:36px;
    font-size:14px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px){
  .calendar-toolbar .nav-section{gap:14px}
  .calendar-toolbar .actions-section{gap:10px}
  .calendar-nav-tabs .tab{
    padding:7px 13px;
    font-size:13px;
  }
  .nav-arrow{
    width:38px;
    height:38px;
    font-size:15px;
  }
}
.calendar-title{font-size:20px; font-weight:700; color:#0a3a70; margin:0}

/* Desktop: Navigation arrows next to tabs, dropdown on right */
@media (min-width: 901px){
  .calendar-toolbar{
    justify-content:space-between;
  }
  .calendar-toolbar .nav-section{
    flex:0 0 auto;
    gap:16px;
  }
  .calendar-toolbar .actions-section{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    flex:0 0 auto;
  }
  
  /* Today button styling on desktop */
  .calendar-toolbar .nav-section .calendar-today-btn{
    flex:0 0 auto;
  }
  
  /* Move nav arrows to nav-section on desktop */
  .calendar-toolbar .nav-section .nav-arrows-group{
    display:flex;
    gap:8px;
    align-items:center;
  }
  
  /* Hide nav arrows and mobile nav row from actions-section on desktop */
  .calendar-toolbar .actions-section .nav-arrows-group,
  .calendar-toolbar .actions-section .calendar-mobile-nav-row{
    display:none;
  }
}

@media (max-width: 900px){
  /* Hide tabs completely on mobile - single view only */
  .calendar-nav-tabs{display:none}
  .calendar-toolbar{flex-direction:column; align-items:center; gap:16px}
  .calendar-toolbar .nav-section{display:none} /* Hide nav-section entirely on mobile */
  
  /* Actions section becomes the main mobile navigation */
  .calendar-toolbar .actions-section{
    order:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:100%;
    max-width:320px;
    margin:0 auto;
  }
  
  /* Calendar dropdown first (top) */
  .calendar-toolbar .actions-section .ics-dropdown{
    order:1;
    width:auto;
    flex:0 0 auto;
  }
  
  .calendar-toolbar .actions-section .ics-dropdown .ics-dropdown-btn{
    width:auto;
    min-width:160px;
    max-width:200px;
    text-align:center;
    white-space:nowrap;
  }
  
  
  /* Navigation row styling */
  .calendar-mobile-nav-row{
    order:2;
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    justify-content:center;
    flex-wrap:nowrap;
  }
  
  /* Today button in the nav row */  
  .calendar-mobile-nav-row .btn:not(.nav-arrow):not(.ics-dropdown-btn){
    flex:0 0 auto;
    min-width:120px;
    text-align:center;
  }
  
  /* Navigation arrows in the nav row */
  .calendar-mobile-nav-row .nav-arrows-group{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
}

/* Mobile specific adjustments */
@media (max-width: 720px){
  .calendar-mobile-nav-row{
    flex-wrap:wrap;
    gap:12px;
  }
  
  .calendar-mobile-nav-row .btn:not(.nav-arrow){
    font-size:14px;
    padding:10px 16px;
    min-width:110px;
  }
  
  .calendar-mobile-nav-row .nav-arrow{
    width:40px;
    height:40px;
    font-size:16px;
  }
  
  .calendar-toolbar .actions-section .ics-dropdown .ics-dropdown-btn{
    font-size:14px;
    padding:10px 14px;
    min-width:140px;
    max-width:160px;
  }
}


/* Calendar accessibility and polish improvements */
.btn-success{background:linear-gradient(135deg, #10b981, #059669); color:#fff !important; border-color:transparent !important}
.keyboard-nav .calendar-nav-tabs .tab:focus{outline:2px solid rgba(0,128,255,0.5); outline-offset:2px}
.calendar-month .cal-cell-inner.visible{animation:fadeInUp 0.3s ease-out}
@keyframes fadeInUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

/* Enhanced hover states for better UX */
.calendar-toolbar .btn:hover{transform:translateY(-1px)}
.calendar-toolbar .btn:active{transform:translateY(0)}

/* Navigation arrows improvements */
.nav-arrow{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  width:40px; 
  height:40px; 
  border-radius:50%; 
  font-size:16px; 
  line-height:1; 
  font-weight:700;
  background:rgba(255,255,255,0.8);
  border:1px solid var(--border);
  transition:all 0.2s ease;
}
.nav-arrow:hover{
  background:rgba(0,128,255,0.1);
  border-color:rgba(0,128,255,0.3);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,128,255,0.15);
}
.nav-arrow:active{transform:translateY(-1px)}

/* ICS dropdown button */
.ics-dropdown{position:relative; display:inline-block}
.ics-dropdown-btn{
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  padding:10px 14px; 
  background:rgba(255,255,255,0.8); 
  border:1px solid var(--border); 
  border-radius:10px; 
  cursor:pointer;
  transition:all 0.15s ease;
  white-space:nowrap;
  box-sizing:border-box;
}
.ics-dropdown-btn:hover{
  background:rgba(255,255,255,0.95);
  border-color:rgba(0,128,255,0.3);
  transform:translateY(-1px);
}
.ics-dropdown-content{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  margin-top:4px;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  backdrop-filter:blur(20px);
  z-index:10;
  min-width:180px;
}
.ics-dropdown.open .ics-dropdown-content{display:block}
.ics-dropdown-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  color:var(--text);
  text-decoration:none;
  border:none;
  background:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  transition:background 0.15s ease;
}
.ics-dropdown-item:hover{background:rgba(0,128,255,0.08)}
.ics-dropdown-item:first-child{border-radius:12px 12px 0 0}
.ics-dropdown-item:last-child{border-radius:0 0 12px 12px}
.ics-dropdown-divider{height:1px; background:var(--border); margin:4px 0}

/* Improved mobile calendar cards */
@media (max-width: 720px){
  .calendar-cards .calendar-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.1)}
  .calendar-card .item:hover{background:rgba(0,128,255,0.05); border-color:rgba(0,128,255,0.2)}
}

/* Calendar panel improvements - Unified with intermediate screen support */
.section:has(.calendar) .glass-panel,
.section:has(.calendar-week) .glass-panel,
.calendar-day .glass-panel{
  padding:32px; 
  margin-top:20px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:saturate(180%) blur(32px);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 16px 32px rgba(15,23,42,0.12);
}

/* Intermediate screens padding optimization */
@media (min-width: 901px) and (max-width: 1199px){
  .section:has(.calendar) .glass-panel,
  .section:has(.calendar-week) .glass-panel,
  .calendar-day .glass-panel{padding:28px}
}

@media (min-width: 1200px) and (max-width: 1400px){
  .section:has(.calendar) .glass-panel,
  .section:has(.calendar-week) .glass-panel,
  .calendar-day .glass-panel{padding:30px}
}

@media (max-width: 900px){
  .section:has(.calendar) .glass-panel,
  .section:has(.calendar-week) .glass-panel,
  .calendar-day .glass-panel{padding:24px}
}
@media (max-width: 520px){
  .section:has(.calendar) .glass-panel,
  .section:has(.calendar-week) .glass-panel,
  .calendar-day .glass-panel{padding:20px}
}
.muted{color:var(--muted)}

.table-responsive{overflow:auto}
.patients .glass-panel{padding-left:20px; padding-right:20px}
table{width:100%; border-collapse:collapse}
th,td{padding:14px 14px; border-bottom:1px solid var(--border); text-align:left}
th{background:rgba(255,255,255,0.9)}
@media (max-width: 720px){
  th,td{padding:12px 12px}
}

/* Calendrier (mois) - Unified design with intermediate screen support */
.calendar-month .cal-cell{vertical-align:top; width:14.2857%; background:rgba(255,255,255,0.75)}
.calendar-month .cal-cell .cal-cell-inner{
  display:grid; 
  gap:12px; 
  min-height:150px; 
  padding:14px; 
  border-radius:12px;
  transition:all 0.15s ease;
}

/* Intermediate screens calendar month optimization */
@media (min-width: 900px) and (max-width: 1199px){
  .calendar-month .cal-cell .cal-cell-inner{
    min-height:130px;
    padding:12px;
    gap:10px;
  }
  .calendar-month .cal-date{
    font-size:15px;
  }
  .calendar-month .appt-chip{
    padding:8px 9px;
    gap:6px;
  }
  .calendar-month .appt-chip .time,
  .calendar-month .appt-chip .title{
    font-size:12px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px){
  .calendar-month .cal-cell .cal-cell-inner{
    min-height:140px;
    padding:13px;
    gap:11px;
  }
  .calendar-month .appt-chip{
    padding:9px 11px;
  }
}
.calendar-month .cal-cell.muted{opacity:0.65}
.calendar-month .cal-cell:hover .cal-cell-inner{
  background:rgba(255,255,255,0.9); 
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,128,255,0.08);
}
.calendar-month .cal-date-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.calendar-month .cal-date{font-weight:800; color:#0a3a70; font-size:16px}
.calendar-month .cal-count-pill{
  /* Uses unified calendar-count-badge styles */
  display:inline-flex; 
  align-items:center; 
  gap:4px; 
  padding:4px 8px; 
  border-radius:999px; 
  border:1px dashed rgba(0,128,255,0.35); 
  background:rgba(0,128,255,0.08); 
  color:#0054a8; 
  font-weight:700; 
  font-size:11px;
}
.calendar-month .cal-appts{display:grid; gap:8px}
.calendar-month .appt-chip{
  display:grid; 
  grid-template-columns:auto 1fr; 
  gap:8px; 
  align-items:center; 
  padding:10px 12px; 
  border-radius:12px; 
  border:1px solid var(--border); 
  background:rgba(255,255,255,0.9); 
  color:var(--text); 
  transition:all 0.15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.calendar-month .appt-chip:hover{
  background:rgba(255,255,255,1); 
  border-color:rgba(0,128,255,0.3); 
  transform:translateY(-1px); 
  box-shadow:0 8px 20px rgba(0,128,255,0.15);
}
.calendar-month .appt-chip .time{
  /* Uses unified calendar-time styles */
  font-weight:800; color:#0a3a70; font-size:13px; letter-spacing:0.01em;
}
.calendar-month .appt-chip .title{
  /* Uses unified calendar-patient-name styles */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 
  font-weight:600; font-size:13px; line-height:1.4; color:var(--text);
}

/* Unified calendar break styling across all views */
.cal-breaks{
  display:grid; 
  gap:6px; 
  margin-bottom:6px;
}

/* Base break chip styling - unified for all views */
.break-chip, 
.break-chip-week, 
.break-item-day, 
.break-item-mobile{
  display:grid; 
  grid-template-columns:auto 1fr; 
  gap:6px; 
  align-items:center; 
  padding:6px 8px; 
  border-radius:8px; 
  border:1px solid rgba(67,56,202,0.2); 
  background:rgba(67,56,202,0.08); 
  color:var(--text);
  font-size:12px;
  transition:all 0.15s ease;
}

/* Full day breaks - unified styling */
.break-chip.full-day,
.break-chip-week.full-day, 
.break-item-day.full-day,
.break-item-mobile.full-day{
  grid-template-columns:1fr;
  justify-items:center;
  background:rgba(67,56,202,0.12);
  border-color:rgba(67,56,202,0.3);
  color:var(--text);
  font-weight:600;
  text-align:center;
}

/* Break time and title styling - unified */
.break-chip .time, 
.break-chip-week .time, 
.break-item-day .time,
.break-item-mobile .time{
  font-weight:700; 
  font-size:11px;
  color:var(--text);
}

.break-chip .title, 
.break-chip-week .title, 
.break-item-day .title,
.break-item-mobile .title{
  font-weight:500; 
  font-size:11px;
  color:var(--text);
}

/* Full day titles */
.break-chip.full-day .title,
.break-chip-week.full-day .title,
.break-item-day.full-day .title,
.break-item-mobile.full-day .title{
  font-weight:600;
  font-size:11px;
  color:var(--text);
}

/* Hover effects - unified */
.break-chip:hover,
.break-chip-week:hover,
.break-item-day:hover,
.break-item-mobile:hover{
  background:rgba(67,56,202,0.12);
  border-color:rgba(67,56,202,0.3);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(67,56,202,0.15);
}

/* Full day hover effects */
.break-chip.full-day:hover,
.break-chip-week.full-day:hover,
.break-item-day.full-day:hover,
.break-item-mobile.full-day:hover{
  background:rgba(67,56,202,0.15);
  border-color:rgba(67,56,202,0.4);
}

/* Week view specific adjustments */
.break-chip-week{
  margin:4px 0; /* Specific margin for week view */
  gap:4px;
}

/* Day view specific adjustments */
.break-item-day{
  padding:20px !important; /* Larger padding for day view list items */
  border-radius:16px !important; /* Consistent with other day view items */
  grid-template-columns:1fr !important; /* Override base grid for day view */
  background:rgba(67,56,202,0.08) !important;
  border:1px solid rgba(67,56,202,0.2) !important;
}
.break-item-day:hover{
  background:rgba(67,56,202,0.12) !important;
  border-color:rgba(67,56,202,0.3) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 8px 20px rgba(67,56,202,0.15) !important;
}
.break-day-content{
  display:grid;
  gap:8px;
}
.break-day-time{
  font-size:16px;
  font-weight:700;
  color:var(--text); /* Unified with text color */
}
.break-day-title{
  font-size:15px;
  color:var(--text); /* Unified with text color */
  font-weight:600;
}

/* Day view full-day breaks */
.break-item-day.full-day{
  text-align:center;
  justify-items:center;
  background:rgba(67,56,202,0.12) !important;
  border-color:rgba(67,56,202,0.3) !important;
}
.break-item-day.full-day .break-day-title{
  font-size:16px;
  font-weight:700;
  color:var(--text);
}

/* Mobile calendar cards break items - unified styling applied via base classes */
.calendar-month .cal-more{font-size:12px; color:#0a3a70; opacity:0.8; margin-top:6px; font-style:italic}
.calendar-month .appt-chip.help, .calendar-week .appt-chip.full.help{cursor:help}
/* Ensure anchor chips look like chips (no default link styles) */
.calendar-month .appt-chip,
.calendar-week .appt-chip.full,
.calendar-cards .item,
.calendar-week-cards .item{
  text-decoration:none !important; 
  color:var(--text) !important;
}
.calendar-month .appt-chip:hover,
.calendar-week .appt-chip.full:hover,
.calendar-cards .item:hover,
.calendar-week-cards .item:hover{
  cursor:pointer;
  text-decoration:none !important;
}

/* Remove default link styles from appointment links */
a.appt-chip, 
a.appt-chip:visited,
a.item,
a.item:visited{
  text-decoration:none !important;
  color:inherit !important;
}

a.appt-chip:hover,
a.item:hover{
  text-decoration:none !important;
  color:inherit !important;
}

/* Calendar day view - Remove link styles from list items */
.calendar-day .list-item a,
.calendar-day .list-item a:visited,
.calendar-day .list-item a:hover{
  text-decoration:none !important;
  color:inherit !important;
}

/* Calendrier (semaine) - Unified design with intermediate screen support */
.calendar-week thead th{
  position:sticky; 
  top:0; 
  z-index:1; 
  background:rgba(255,255,255,0.95); 
  backdrop-filter:saturate(180%) blur(12px); 
  padding:18px 14px; 
  font-size:14px;
  font-weight:600;
  color:#0a3a70;
  border-bottom:1px solid var(--border);
}
.calendar-week .time-col{
  width:85px; 
  font-weight:700; 
  color:#0a3a70; 
  background:rgba(255,255,255,0.9); 
  font-size:13px; 
  padding:16px 12px;
  border-right:1px solid rgba(0,0,0,0.06);
}
.calendar-week .week-cell{
  vertical-align:top; 
  min-width:170px; 
  background:rgba(255,255,255,0.75); 
  padding:12px;
  transition:background 0.15s ease;
}

/* Intermediate screens week view optimization */
@media (min-width: 900px) and (max-width: 1199px){
  .calendar-week .time-col{
    width:70px;
    padding:14px 8px;
    font-size:12px;
  }
  .calendar-week .week-cell{
    min-width:140px;
    padding:10px;
  }
  .calendar-week thead th{
    padding:16px 10px;
    font-size:13px;
  }
  .calendar-week .appt-chip.full{
    padding:10px 11px;
    gap:6px;
  }
  .calendar-week .appt-chip.full .time,
  .calendar-week .appt-chip.full .title{
    font-size:12px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px){
  .calendar-week .time-col{
    width:80px;
    padding:15px 10px;
  }
  .calendar-week .week-cell{
    min-width:155px;
    padding:11px;
  }
  .calendar-week .appt-chip.full{
    padding:11px 12px;
  }
}
.calendar-week .week-cell:hover{
  background:rgba(255,255,255,0.9);
}
.calendar-week .appt-chip.full{
  display:grid; 
  gap:8px; 
  padding:12px 14px; 
  margin:10px 0; 
  border-radius:12px; 
  border:1px solid var(--border); 
  background:rgba(255,255,255,0.9); 
  box-shadow:0 4px 12px rgba(0,0,0,0.08); 
  transition:all 0.15s ease;
  backdrop-filter:saturate(160%) blur(8px);
}
.calendar-week .appt-chip.full:hover{
  background:rgba(255,255,255,1); 
  border-color:rgba(0,128,255,0.3); 
  transform:translateY(-1px); 
  box-shadow:0 8px 24px rgba(0,128,255,0.15);
}
.calendar-week .appt-chip.full .time{
  /* Uses unified calendar-time styles */
  font-weight:800; color:#0a3a70; font-size:13px; letter-spacing:0.01em;
}
.calendar-week .appt-chip.full .title{
  /* Uses unified calendar-patient-name styles */
  font-weight:600; font-size:14px; line-height:1.4; color:var(--text);
}
.calendar-week .appt-chip.full .notes{
  /* Uses unified calendar-notes styles */
  font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px;
}
/* Mobile week view improvements - Cards instead of table */
@media (max-width: 720px){
  .calendar-week{display:none}
  .calendar-week-cards{display:grid; gap:12px}
  .calendar-week-cards .calendar-card{border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,0.9); padding:16px; box-shadow:0 4px 16px rgba(0,0,0,0.06)}
  .calendar-week-cards .calendar-card .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
  .calendar-week-cards .calendar-card .card-head .date{font-weight:800; color:#0a3a70; font-size:15px}
  .calendar-week-cards .calendar-card .list{display:grid; gap:10px}
  .calendar-week-cards .calendar-card .item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.06)}
  .calendar-week-cards .calendar-card .item .time{font-weight:800; color:#0a3a70; font-size:13px}
  .calendar-week-cards .calendar-card .item .title{font-size:13px}
  .calendar-week-cards .calendar-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.1)}
  .calendar-week-cards .calendar-card .item:hover{background:rgba(0,128,255,0.05); border-color:rgba(0,128,255,0.2)}
}

/* Show cards only on mobile for week view */
.calendar-week-cards{display:none}
@media (max-width: 720px){
  .calendar-week-cards{display:grid}
}

/* Pleine largeur du conteneur */
.table-responsive.wide{overflow:auto; margin-inline:-13%}
.table-responsive.wide .calendar{width:100%}
.calendar.rounded{border-radius:16px; overflow:hidden}

/* Responsive margin adjustments for intermediate screens */
@media (min-width: 900px) and (max-width: 1199px){
  .table-responsive.wide{margin-inline:-5%}
}

@media (min-width: 1200px) and (max-width: 1400px){
  .table-responsive.wide{margin-inline:-6%}
}

@media (min-width: 1401px){
  .table-responsive.wide{margin-inline:-9%}
}
.calendar.rounded thead th:first-child{border-top-left-radius:16px}
.calendar.rounded thead th:last-child{border-top-right-radius:16px}
/* Mobile calendar adjustments */
@media (max-width: 720px){
  .calendar-month .cal-cell .cal-cell-inner{min-height:90px; padding:8px}
  .calendar-week .time-col{width:56px}
  .calendar-week .week-cell{min-width:120px}
  .table-responsive.wide{margin-inline:-4%}
}

/* Intermediate screen table responsive adjustments */
@media (min-width: 721px) and (max-width: 1199px){
  .calendar-week .week-cell{
    min-width:130px;
    padding:8px;
  }
  .calendar-week .time-col{
    width:65px;
    padding:12px 6px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px){
  .calendar-week .week-cell{
    min-width:145px;
    padding:10px;
  }
}

/* Calendar day view improvements - Unified with other views and intermediate screen support */
.calendar-day .list{gap:18px}
.calendar-day .list-item{
  padding:20px; 
  border-radius:16px;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 8px 20px rgba(15,23,42,0.10);
  backdrop-filter:saturate(160%) blur(16px);
  transition:all 0.15s ease;
}

/* Intermediate screens day view optimization */
@media (min-width: 900px) and (max-width: 1199px){
  .calendar-day .list{gap:16px}
  .calendar-day .list-item{
    padding:18px;
    border-radius:14px;
  }
  .calendar-day .appt-datetime{
    font-size:15px;
  }
  .calendar-day .appt-field .value{
    font-size:14px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px){
  .calendar-day .list{gap:17px}
  .calendar-day .list-item{
    padding:19px;
  }
}
.calendar-day .list-item:hover{
  background:rgba(255,255,255,0.95);
  border-color:rgba(0,128,255,0.3);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,128,255,0.15);
}
.calendar-day .appt-datetime{
  /* Uses unified calendar-time styles with larger size for day view */
  font-size:16px; font-weight:800; color:#0a3a70; margin-bottom:6px; letter-spacing:0.01em;
}
.calendar-day .appt-field .label{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em}
.calendar-day .appt-field .value{
  /* Uses unified calendar-patient-name styles */
  font-size:15px; margin-top:3px; line-height:1.4; font-weight:600; color:var(--text);
}
.calendar-day .appt-notes{
  /* Uses unified calendar-notes styles */
  font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px;
}

/* Mobile cards view for month calendar - Amélioré */
.calendar-cards{
  display:none; /* Hidden by default on desktop */
}
@media (max-width: 720px){
  .calendar-month{display:none}
  .calendar-cards{display:grid; gap:12px}
  .calendar-card{border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,0.9); padding:16px; box-shadow:0 4px 16px rgba(0,0,0,0.06)}
  .calendar-card .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
  .calendar-card .card-head .date{font-weight:800; color:#0a3a70; font-size:15px}
  .calendar-card .list{display:grid; gap:10px}
  .calendar-card .item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.06)}
  .calendar-card .item .time{font-weight:800; color:#0a3a70; font-size:13px}
  .calendar-card .item .title{font-size:13px}
  
  /* Force unified indigo styling for mobile break items */
  .calendar-card .break-item-mobile{
    background:rgba(67,56,202,0.08) !important;
    border:1px solid rgba(67,56,202,0.2) !important;
    color:var(--text) !important;
  }
  .calendar-card .break-item-mobile .time{color:var(--text) !important; font-weight:700}
  .calendar-card .break-item-mobile .title{color:var(--text) !important; font-weight:500}
  .calendar-card .break-item-mobile.full-day{
    background:rgba(67,56,202,0.12) !important;
    border-color:rgba(67,56,202,0.3) !important;
  }
  .calendar-card .break-item-mobile.full-day .title{color:var(--text) !important; font-weight:600}
  .calendar-card .break-item-mobile:hover{
    background:rgba(67,56,202,0.12) !important;
    border-color:rgba(67,56,202,0.3) !important;
  }
  
  .calendar-day .glass-panel{padding:24px}
  .calendar-day .list{gap:14px}
  .calendar-day .list-item{padding:16px}
}

.site-footer{margin-top:var(--space-6); padding:var(--space-4) 0; border-top:1px solid var(--border); color:var(--muted)}
.site-footer a{position:relative; color:#0a3a70; text-decoration:none; font-weight:600; transition:color .2s ease}
.site-footer a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius:1px; opacity:0; transition:opacity .2s ease}
.site-footer a:hover{color:var(--brand-primary)}
.site-footer a:hover::after{opacity:0.9}
.site-footer a:focus-visible{outline:3px solid rgba(0,128,255,0.25); border-radius:6px}
/* Footer standard (non fixé) */
@media (max-width: 1200px){
  body, html{min-height:100vh}
  .site-footer{position:static}
  main.container{padding-bottom:0}
}

/* Centered section overrides (placed late for higher precedence) */
.container > .section.centered{margin-top:auto; margin-bottom:auto}
.container > .section.centered:first-of-type{margin-top:auto}
.container > .section.centered:last-of-type{margin-bottom:auto}
/* Keep natural panel sizing; only vertical centering via auto margins */
.section.centered{display:block}
/* Maintain horizontal centering for constrained panels */
.section.centered > .max-480,
.section.centered > .max-640,
.section.centered > .glass-panel.max-480,
.section.centered > .glass-panel.max-640{margin-left:auto; margin-right:auto}
/* Mobile: avoid excessive vertical stretching */
@media (max-width: 720px){
  .container > .section.centered{margin-top:var(--space-4); margin-bottom:var(--space-4)}
}

/* OTP inputs (auth flow) */
.otp-inputs{display:flex; gap:12px; margin: 12px 0 0 0;}
.otp-digit{
  width:48px; height:56px; padding:0;
  text-align:center; font-size:22px; font-weight:800; letter-spacing:0.02em;
  color:#0a3a70; background:rgba(255,255,255,0.92);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 6px 16px rgba(15,23,42,0.06);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.otp-digit:focus{outline:none; background:#fff; border-color:rgba(0,128,255,0.35); box-shadow:0 0 0 3px rgba(0,128,255,0.12), 0 8px 20px rgba(0,128,255,0.16)}
.otp-digit::placeholder{color:transparent}


/* Mobile optimizations for centered pages (auth/payment flows) */
@media (max-width: 720px){
  /* Panel sizing and spacing */
  .section.centered .glass-panel{padding:20px; border-radius:20px}
  .section.centered h2{font-size:20px}
  .section.centered .form-grid{gap:14px}
  .section.centered input,
  .section.centered select,
  .section.centered textarea{font-size:16px; padding:12px 14px}
  /* Buttons as full-width for easier tapping */
  .section.centered .stack .btn,
  .section.centered form .btn{width:100%}
  /* Payment cards */
  .pay-choice .pay-cards{display:grid; gap:12px}
  .card-option .option-inner{padding:12px; margin-bottom:12px}
  /* OTP input: larger and centered */
  .otp-inputs{gap:10px}
  .otp-digit{width:44px; height:52px; font-size:20px}
}

@media (max-width: 380px){
  .otp-digit{width:40px; height:48px; font-size:18px}
}

/* Carte */
.map-embed{position:relative; padding-bottom:56.25%; height:0; min-height:320px; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.6); backdrop-filter:saturate(160%) blur(18px); box-shadow:0 20px 40px rgba(0,0,0,0.08)}
/* .map-embed:not(.loaded)::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.6) 40%); background-size:200% 100%; animation:mapShimmer 2s ease-in-out infinite; z-index:1} */
@keyframes mapShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.map-embed::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0)); pointer-events:none}
.map-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:inherit}
.map-embed.sm{padding-bottom:62%}
.map-embed.wide{padding-bottom:38%; min-height:360px}
@media (max-width: 900px){
  .two-col-access{grid-template-columns:1fr}
  .map-embed.wide{padding-bottom:62%; min-height:320px}
}

/* Blocs enrichis */
.feature-list{display:grid; gap:25px; margin:12px 0; padding:0; list-style:none}
@media (max-width: 900px){
  .feature-list{gap:12px}
}

.feature-list.compact{gap:6px}
.feature-list li{display:flex; gap:10px; align-items:flex-start}
.feature-list li::before{content:""; display:inline-block; flex:0 0 10px; height:10px; margin-top:6px; border-radius:50%; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))}
.feature-list.icons li::before{content:none}
.icon{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 18px; margin-top:2px; color:var(--brand-primary)}
.icon svg{width:18px; height:18px; display:block}

/* Liens non décorés (pour Doctolib inline) */
.unstyled, .unstyled-link{color:inherit; text-decoration:none}
.unstyled:hover, .unstyled-link:hover{text-decoration:underline}

/* Accent pour liens Doctolib */
.link-doctolib{color:#0a58ca; text-decoration:none; font-weight:600; white-space:nowrap;}

.info-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.info-grid dt{font-weight:700}
.info-grid dd{margin:0; color:var(--muted)}

.map-embed{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; border:1px solid var(--color-border)}
.map-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}

/* Info bubble (confidentialité) */
.info-bubble{margin-top:16px}
.info-bubble-inner{display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border:1px dashed rgba(0,128,255,0.35); border-radius:14px; background:rgba(255,255,255,0.8); color:#0a3a70}
.info-bubble .icon{color:#0a58ca}


/* Page À propos / Présentation praticien */
.page-hero{margin-top:var(--space-6); position:relative}
.profile-hero-single{display:grid; grid-template-columns:1fr auto; gap:var(--space-4); align-items:flex-start}
@media (max-width: 900px){.profile-hero-single{grid-template-columns:1fr}}
.hero-card{display:grid; grid-template-columns:1.2fr 0.8fr; gap:20px; align-items:start}
@media (max-width: 900px){.hero-card{grid-template-columns:1fr}}
.hero-card .side{display:grid; gap:12px; align-content:start}
.hero-card .kpis{display:grid; gap:8px}
.hero-card .kpi{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.78)}
.hero-card .kpi .emoji{font-size:18px}
.avatar{width:160px; height:160px; border-radius:18px; object-fit:cover; border:1px solid var(--border); box-shadow:var(--shadow); background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); justify-self:end}
@media (max-width: 900px){.avatar{width:120px; height:120px; margin:0 auto 16px}}
.timeline{display:grid; gap:12px; list-style:none; padding:0; margin:12px 0}
.timeline li{display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:start}
.timeline .when{font-weight:800; color:#0a3a70}
@media (max-width: 720px){.timeline li{grid-template-columns:1fr}}

/* About page decorative shapes (subtle, distributed throughout) */
#about-page{position:relative}
.about-decor{position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden}
.about-decor .shape{position:absolute; border-radius:20px; opacity:0.7}
.about-decor .blob{filter:blur(8px); box-shadow:0 20px 40px rgba(15,23,42,0.08)}
.about-decor .ring{border-radius:999px; border:2px solid rgba(0,128,255,0.12)}
.about-decor .dot{width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); opacity:0.4}

/* Hero section shapes */
.about-decor .hero-blob{width:320px; height:180px; top:60px; right:-80px; background:radial-gradient(400px 180px at 80% 40%, rgba(102,178,255,0.15), transparent 65%)}
.about-decor .hero-ring{width:140px; height:140px; top:180px; left:-20px}
.about-decor .hero-dot{top:120px; right:12%}

/* Parcours section shapes */
.about-decor .parcours-blob{width:280px; height:160px; top:600px; left:-60px; background:radial-gradient(300px 160px at 20% 50%, rgba(139,92,246,0.12), transparent 65%)}
.about-decor .parcours-dot{top:720px; right:8%}

/* Cabinet section shapes */
.about-decor .cabinet-ring{width:120px; height:120px; top:1200px; right:-40px}
.about-decor .cabinet-blob{width:240px; height:140px; top:1300px; left:-40px; background:radial-gradient(280px 140px at 30% 60%, rgba(13,148,136,0.14), transparent 65%)}

/* Ressources section shapes */
.about-decor .ressources-dot{top:1600px; left:15%}
.about-decor .ressources-blob{width:300px; height:180px; top:1700px; right:-80px; background:radial-gradient(320px 180px at 70% 30%, rgba(14,165,233,0.13), transparent 65%)}

/* Contact section shapes */
.about-decor .contact-ring{width:100px; height:100px; bottom:120px; left:10%}
.about-decor .contact-dot{bottom:80px; right:20%}

@media (max-width: 900px){.about-decor{display:none}}

/* About page improved spacing and typography */
#about-page .section{margin-top:var(--space-5)}
#about-page .glass-panel{padding:32px; line-height:1.65; border-radius:22px; border:1px solid rgba(255,255,255,0.45); background:rgba(255,255,255,0.58); backdrop-filter:saturate(220%) blur(20px); box-shadow:0 14px 34px rgba(0,128,255,0.12)}
#about-page .glass-panel h3{margin-bottom:12px; font-size:21px}
#about-page .glass-panel h4{margin-top:12px; margin-bottom:8px; font-size:17px}
#about-page .glass-panel p{margin-bottom:12px; line-height:1.64}
#about-page .feature-list{margin:14px 0; gap:11px}
#about-page .feature-list li{line-height:1.55}
#about-page .two-col{gap:var(--space-4)}

/* Responsive pour about page */
@media (max-width: 1100px){
  #about-page .glass-panel{padding:32px}
  #about-page .two-col{gap:var(--space-3)}
}
@media (max-width: 900px){
  #about-page .glass-panel{padding:28px}
  #about-page .section{margin-top:var(--space-4)}
  #about-page .glass-panel h3{font-size:20px}
  #about-page .glass-panel h4{font-size:16px}
  #about-page .profile-hero{gap:var(--space-3)}
  #about-page .two-col{gap:var(--space-3)}
}
@media (max-width: 720px){
  #about-page .glass-panel{padding:24px}
  #about-page .section{margin-top:var(--space-3)}
  #about-page .glass-panel h3{font-size:19px; margin-bottom:14px}
  #about-page .glass-panel h4{font-size:16px; margin-top:12px}
  #about-page .glass-panel p{margin-bottom:12px}
  #about-page .feature-list{margin:12px 0; gap:10px}
  #about-page .contact-row{flex-direction:column; gap:8px}
  #about-page .actions-row .contact-row .btn{width:100%}
}
@media (max-width: 480px){
  #about-page .glass-panel{padding:20px}
  #about-page .section{margin-top:var(--space-2)}
  #about-page .glass-panel h3{font-size:18px}
  #about-page .glass-panel h4{font-size:15px}
  #about-page .resource-grid.modern{grid-template-columns:1fr}
}



/* Micro-animations au scroll */
#about-page .glass-panel{transition:transform 0.15s ease-in-out, box-shadow 0.2s ease-in-out}
#about-page .glass-panel:hover{box-shadow:0 16px 32px rgba(0,128,255,0.18);}

/* Espacement vertical uniforme (À propos) */
#about-page .section{margin-top:var(--space-5)}

/* Mentions légales – espacement et typographie */
#legal-page .section{margin-top:var(--space-5)}
#legal-page .glass-panel{padding:36px; line-height:1.65}
#legal-page .glass-panel + .glass-panel{margin-top:var(--space-4)}
/* Links style (Mentions légales) */
#legal-page a{position:relative; color:#0a3a70; text-decoration:none; transition:color .2s ease}
#legal-page a:visited{color:#0a3a70}
#legal-page a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius:1px; opacity:0; transition:opacity .2s ease}
#legal-page a:hover{color:var(--brand-primary)}
#legal-page a:hover::after{opacity:0.9}
#legal-page a:focus-visible{outline:3px solid rgba(0,128,255,0.25); border-radius:6px}

/* Apply legal link style to address/map links globally */
.map-link, .address-link{position:relative; color:#0a3a70; text-decoration:none; transition:color .2s ease}
.map-link:visited, .address-link:visited{color:#0a3a70}
.map-link::after, .address-link::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius:1px; opacity:0; transition:opacity .2s ease}
.map-link:hover, .address-link:hover{text-decoration: none; color:var(--brand-primary)}
.map-link:hover::after, .address-link:hover::after{opacity:0.9}
.map-link:focus-visible, .address-link:focus-visible{outline:3px solid rgba(0,128,255,0.25); border-radius:6px}

/* Only underline animation on hover for doctolib link */
.link-doctolib{ text-decoration:none; font-weight:600}
.link-doctolib:hover{text-decoration:none}
.link-doctolib{position:relative}
.link-doctolib::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius:1px; opacity:0; transition:opacity .2s ease}
.link-doctolib:hover::after{opacity:0.9}
@media (max-width: 900px){
  #legal-page .glass-panel{padding:32px}
  #legal-page .section{margin-top:var(--space-4)}
}
@media (max-width: 720px){
  #legal-page .glass-panel{padding:28px}
  #legal-page .section{margin-top:var(--space-3)}
}
@media (max-width: 520px){
  #legal-page .glass-panel{padding:24px}
  #legal-page .section{margin-top:var(--space-2)}
}

/* Rythme visuel amélioré */
#about-page .resource-grid.modern{margin-top:20px}
#about-page .contact-row{margin-top:16px}
#about-page .info-bubble{margin-top:24px}
.resource-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px}
.resource-card{border:1px solid var(--border); border-radius:14px; padding:14px; background:rgba(255,255,255,0.85)}

/* Modern resource cards (full-card clickable with optional thumbnail) */
.resource-grid.modern{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px}
a.resource-card.modern{display:grid; grid-template-columns:1fr 140px; gap:14px; align-items:center; padding:16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,0.9); box-shadow:0 8px 24px rgba(15,23,42,0.08); text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; min-height:124px}
a.resource-card.modern:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,128,255,0.18); border-color:rgba(0,128,255,0.25); background:rgba(255,255,255,0.98)}
a.resource-card.modern .media-icon{display:none}
a.resource-card.modern .content{display:grid; gap:6px; align-content:center}
a.resource-card.modern .title{font-weight:700; color:#0a3a70; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
a.resource-card.modern .meta{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px}
a.resource-card.modern .thumb{position:relative; justify-self:end; width:100%; height:84px; border-radius:12px; background:#f2f6ff center/cover no-repeat; border:1px solid var(--border); display:block; color:#0a3a70; overflow:hidden}
a.resource-card.modern .thumb .emoji{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:28px; opacity:0.9; line-height:1; pointer-events:none}
a.resource-card.modern .thumb.podcast{background:radial-gradient(80% 80% at 20% 20%, rgba(139,92,246,0.25), rgba(34,211,238,0.12) 60%, transparent 62%), linear-gradient(180deg, #f7faff, #eef4ff)}
a.resource-card.modern .thumb.pdf{background:radial-gradient(80% 80% at 20% 20%, rgba(245,158,11,0.25), rgba(239,68,68,0.12) 60%, transparent 62%), linear-gradient(180deg, #fff7f7, #fff1ed)}
a.resource-card.modern .thumb.journal{background:radial-gradient(80% 80% at 20% 20%, rgba(14,165,233,0.22), rgba(59,130,246,0.12) 60%, transparent 62%), linear-gradient(180deg, #f3f9ff, #eef6ff)}
@media (max-width: 720px){a.resource-card.modern{grid-template-columns:1fr; grid-template-rows:auto auto} a.resource-card.modern .thumb{display:block; margin-top:8px; width:100%; height:120px}}

/* Profile card styled like resource cards */
.profile-card{display:grid; grid-template-columns:1fr; gap:14px; align-items:center; padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.75); backdrop-filter:saturate(220%) blur(16px); box-shadow:0 10px 28px rgba(0,128,255,0.12); overflow:hidden}
.profile-card .content{display:grid; gap:6px}
.profile-card .title{font-weight:800; font-size:22px; color:var(--text); line-height:1.2}
.profile-card .subtitle{font-size:14px; color:var(--muted)}
/* About: profile photo inside hero */
/* Standalone profile photo placed to the right of the name */
.profile-photo{justify-self:start; align-self:start; width:100%; max-width:300px; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 8px 20px rgba(15,23,42,0.10); background:#f2f6ff; position:relative; z-index:0}
.profile-photo img{width:100%; height:auto; display:block}
/* reset profile-card to original simple stack */
@media (min-width: 980px){
  .profile-card .content{display:grid; gap:6px}
}
/* .profile-card .thumb{position:relative; justify-self:end; width:100%; height:84px; border-radius:12px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border:1px solid var(--border); overflow:hidden} */
/* .profile-card .thumb img{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; border-radius:inherit} */
@media (max-width: 900px){.profile-card{grid-template-columns:1fr} .profile-photo{justify-self:start; max-width:160px}}

/* Hero panel embedded shapes (smaller than home hero) */
.page-hero .glass-panel.full{position:relative; overflow:hidden}
.hero-card, .profile-card{position:relative; z-index:1}

/* About: new modular hero */
.hero-grid{display:grid; grid-template-columns:280px minmax(0, 1fr); grid-template-areas:
  "photo   profile"
  "photo   cta"
  "highlights highlights"; gap:16px; align-items:start}
.tagline-block{display:none}
.hero-lead{display:flex; flex-direction:column; gap:14px}
.tagline{font-size:1.06rem; line-height:1.6}
.hero-highlights{grid-area:highlights; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.highlight-card{padding:16px; border-radius:16px; backdrop-filter:saturate(200%) blur(14px); background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.45); box-shadow:0 10px 24px rgba(0,128,255,0.10)}
.highlight-card .h-title{font-weight:800; margin-bottom:6px}
.highlight-card ul{margin:0; padding-left:18px}
.highlight-card p{margin:0}
.profile-card{grid-area:profile; max-width:100%; position:relative; z-index:1}
.profile-photo{grid-area:photo}
.cta-card{grid-area:cta; display:grid; gap:10px; position:relative; z-index:1}
.trust-row{display:flex; flex-wrap:wrap; gap:8px}
.hero-grid .actions-row{align-self:start; display:flex; gap:10px; flex-wrap:wrap}
.end-note{margin-bottom:0 !important}
.more summary{cursor:pointer; color:var(--brand-primary)}
@media (min-width: 980px){ .hero-grid{grid-template-columns:300px minmax(0, 1fr); align-items:start} }
@media (min-width: 861px){
  .hero-grid .profile-card{margin-top:48px; max-width:60%}
  .hero-grid .cta-card{ max-width:85%; margin-top:-62px}
}
@media (max-width: 720px){
  #about-page .glass-panel{padding:24px; border-radius:18px}
  .profile-card{grid-template-columns:1fr; padding:16px}
  .profile-photo{justify-self:center; max-width:280px}
  .highlight-card{padding:14px; border-radius:14px}
  .hero-primary-cta{display:inline-flex; width:100%; justify-content:center}
}
@media (max-width: 860px){
  .profile-card{max-width:100%}
  .hero-grid .profile-card{margin-top:-48px}
  .hero-grid{grid-template-columns:1fr; grid-template-areas:
    "photo"
    "profile"
    "highlights"
    "cta"
  }
  .hero-highlights{grid-template-columns:1fr}
}
/* Center the out-of-grid primary CTA under the hero panel */
.hero-primary-cta{grid-column:1 / -1; justify-self:center; display:inline-flex; align-items:center; gap:6px; width:fit-content; margin:12px auto 0}
.hero-shapes{position:absolute; inset:0; pointer-events:none; z-index:0; display:grid}
.hero-right{position:absolute; top:12px; right:10px; width:36%; height:88%; min-width:180px}
.hero-right .shape{position:absolute}
/* Organic, smaller, rounded shapes */
.hero-right .pill{background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); width:40%; height:22%; top:37%; right:4%; border-radius:999px; box-shadow:0 10px 24px rgba(0,128,255,0.20)}
.hero-right .blob{background: var(--brand-primary); width:58%; height:40%; top:7%; right:2%; border-radius:38% 62% 56% 44%/58% 44% 56% 42%; opacity:0.75}
/* .hero-right .ring{background: var(--brand-primary); width:38%; height:30%; bottom:33%; right:32%; border-radius:28% 64% 51% 44%/58% 44% 56% 42%; opacity:0.75; rotate: 60deg} */
.hero-right .dot{width:12%; height:12%; bottom:43%; right:37%; border-radius:999px; background:#dfe7ff}
@media (max-width: 900px){
  .hero-right{width:54%; height:46%; top:auto; bottom:12px}
}
/* Responsive tuning of right-side shapes */
@media (max-width: 1200px){
  .hero-right{width:34%}
  .hero-right .pill{height:18%}
  .hero-right .blob{height:36%}
  .hero-right .ring{width:22%; height:22%}
}
@media (max-width: 900px){
  .hero-right{width:48%; height:44%}
  .hero-right .pill{height:16%; top:56%}
  .hero-right .blob{width:60%; height:32%; top:18%}
  .hero-right .ring{width:20%; height:20%}
  .hero-right .dot{width:10%; height:10%}
}
@media (max-width: 720px){
  .hero-right{width:66%; height:32%; opacity:0.85}
  .hero-right .pill{display:none}
  .hero-right .blob{width:62%; height:28%; opacity:0.6}
  .hero-right .ring{display:none}
  .hero-right .dot{width:9%; height:9%}
}
@media (max-width: 480px){
  .hero-right{width:72%; height:28%; opacity:0.7}
  .hero-right .dot{width:8%; height:8%}
}
/* Hide shapes on small screens */
@media (max-width: 900px){
  .hero-shapes{display:none !important}
}

/* Full-width buttons in article panels on small screens */
@media (max-width: 720px){
  .glass-panel .actions-row{display:grid; grid-template-columns:1fr; gap:10px}
  .glass-panel .actions-row .btn:not(.btn-inline),
  .glass-panel .actions-row a.btn:not(.btn-inline),
  .glass-panel .actions-row button:not(.btn-inline){width:100%}
  .glass-panel .contact-row{display:grid; grid-template-columns:1fr; gap:10px}
  .glass-panel .contact-row .btn,
  .glass-panel .contact-row a.btn,
  .glass-panel .contact-row button{width:100%}
  /* Single buttons inside paragraphs (e.g., OpenStreetMap link) */
  .glass-panel p > a.btn{width:100%; display:inline-flex}
}

/* Sommaire sticky (À propos) */
.subnav{position:sticky; top:72px; z-index:5; display:flex; gap:8px; flex-wrap:wrap; padding:8px 10px; margin-top:var(--space-3); border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px)}
.subnav a{display:inline-flex; padding:8px 12px; border-radius:999px; text-decoration:none; color:#0a3a70; border:1px solid transparent}
.subnav a:hover{border-color:rgba(0,128,255,0.25); background:rgba(255,255,255,0.6)}

/* Home: prochain rendez-vous card refinements */
#last-appt .info-bubble-inner{align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,0.92); box-shadow:0 8px 24px rgba(15,23,42,0.08)}
#last-appt .last-appt-text{font-weight:700; color:#1A1A1A}
#last-appt .actions-row{gap:8px}
@media (max-width: 720px){
  #last-appt .info-bubble-inner{flex-direction:column; align-items:flex-start; padding:14px 16px}
  #last-appt .actions-row{width:100%}
  #last-appt .actions-row .btn{flex:1 1 50%}
}

@media (max-width: 720px){
  .info-bubble-inner{flex-direction:column; align-items:flex-start; gap:12px; padding:16px 18px}
  .info-bubble-inner > div{line-height:1.6}
}


/* Home: réduire drastiquement l'espace entre le hero et la présentation sur mobile */
@media (max-width: 720px){
  .hero + .home-sections{margin-top:0}
}

/* Home: rapprocher visuellement la présentation du hero (≈6px) sur mobile */
@media (max-width: 720px){
  section.hero{padding-bottom:6px}
}

/* Correction: le sélecteur adjacent est cassé par un <script> entre les sections.
   Utiliser le sélecteur général pour cibler la section présentation après le hero. */
@media (max-width: 720px){
  .hero ~ .home-sections.section{margin-top:0}
}


/* Readability utility - used on text-heavy containers */
.readable p{line-height:1.7; margin:0 0 12px; text-wrap:pretty; overflow-wrap:anywhere; hyphens:auto}
.readable ul,.readable ol{margin:0 0 12px}
.readable li{margin:6px 0; line-height:1.7}
.readable h3,.readable h4{margin-top:14px; margin-bottom:8px; text-wrap:balance}
@media (max-width: 720px){
  .readable p{line-height:1.75}
}

/* Booking page: tighter panel on mobile */
@media (max-width: 720px){
  .booking-panel{padding:16px}
}

/* FAQ page: tighter panel on mobile (scoped via :has) */
@media (max-width: 720px){
  .section:has(.faq-list) > .glass-panel{padding:16px}
}

/* ===== Smoothness & motion guard ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}

/* Page enter/leave transitions (light, subtle) */
.page-enter{opacity:0; transform:translateY(6px)}
.page-enter-active{transition:opacity .28s ease, transform .28s ease; opacity:1; transform:none}
.page-leave{opacity:.75; filter:saturate(.9) contrast(.98)}

/* Skeleton utility */
.skeleton{background:linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%); background-size:400% 100%}
@keyframes skeleton-wave{0%{background-position:100% 0}100%{background-position:-100% 0}}