: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: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  /* 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)}
/* 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 */
.patients ~ style{} /* noop placeholder to keep file structure */
main.container:has(.patients){width:min(1300px, 95%)}

/* 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)}
#patient-card .profile-header{display:flex; align-items:center; gap:16px}
#patient-card .profile-header{margin-bottom:16px; padding-bottom:12px; 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:1fr 1fr; gap:24px; margin-top:16px}
#patient-card .profile-edit textarea{min-height:96px}
@media (max-width: 900px){
  #patient-card .two-col{grid-template-columns:1fr}
  #patient-card .profile-header{align-items:flex-start}
}

/* Patient details column spacing and delimiters */
#patient-card .info-grid{grid-template-columns:140px 1fr; row-gap:14px; column-gap:14px}
#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: 720px){
  #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}
  #patient-card .profile-header .actions-row{order:3; width:100%; margin-left:0; margin-top:8px; justify-content:flex-end}
}

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

.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}
  .nav-links a{width:100%}
}

.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)}
@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)}
.glass-panel.wide{padding:24px}
/* Habillage spécifique booking: halo subtil, en-tête stické */
.booking{position:relative}
.booking::before{content:""; position:absolute; inset:-20px -10px auto -10px; height:220px; z-index:-1; 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-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 .actions-row{margin-top:10px}
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:36px}
.settings-form .two-col{grid-template-columns:1fr 1fr}
.settings-form .two-col > div:first-child{border-right:1px solid var(--border); padding-right:24px}
.settings-form .two-col > div:last-child{padding-left:24px}
/* Slightly larger gaps inside settings grids */
.settings-form .form-grid{gap:var(--space-4)}
/* Harmonize section separators spacing on settings */
.settings-form hr.divider{margin:18px 0}
/* Labels a bit more airy on settings */
.settings-form label{gap:8px}
@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
  .settings-form .two-col{grid-template-columns:1fr}
  .settings-form .two-col > div:first-child{border-right:0; padding-right:0}
  .settings-form .two-col > div:last-child{padding-left:0}
}
.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)}
textarea{resize:none}
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:wrap; 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{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:14px}
@media (max-width: 1100px){.workhours-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 720px){.workhours-grid{grid-template-columns:1fr}}
.workhours-col{border:1px solid var(--border); border-radius:12px; padding:12px; background:rgba(255,255,255,0.78); min-width:0}
.workhours-col input[type=time]{width:100%}
.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:8px}
.workhours-col .vspace{height:6px}
.workhours-col .day-toggle{justify-content:center}
.workhours-col .time-group{margin-top:10px}

/* 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 toolbar actions: grid layout on small screens */
@media (max-width: 900px){
  .dashboard .toolbar .actions-row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .dashboard .toolbar .actions-row .btn{width:100%; white-space:normal; text-align:center}
}
@media (max-width: 520px){
  .dashboard .toolbar .actions-row{grid-template-columns:1fr}
  .dashboard .toolbar .actions-row .btn{font-size:14px; padding:10px 12px}
}
.dashboard .toolbar .actions-row{margin-bottom:12px}
/* 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 .glass-panel .list{gap:16px}
.dashboard .glass-panel .list-item{grid-template-columns:1fr; gap:14px; padding:18px}
/* Position the payment pill at top-right of each item without shifting layout */
.dashboard .glass-panel .list-item{position:relative}
.dashboard .glass-panel .list-item .pill.pending,
.dashboard .glass-panel .list-item .pill.scheduled{position:absolute; top:12px; right:12px; z-index:1}
.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 .glass-panel .list-item .actions-row{width:100%; justify-content:stretch; gap:8px}
.dashboard .glass-panel .list-item .actions-row .btn, .dashboard .glass-panel .list-item .actions-row button{flex:1 1 calc(50% - 8px)}
@media (max-width: 480px){
  .dashboard .glass-panel .list-item .actions-row .btn, .dashboard .glass-panel .list-item .actions-row button{flex:1 1 100%}
}
.dashboard .appt-datetime{font-size:14px; line-height:1.35}
.dashboard .appt-fields{gap:14px}
.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}
.pill.scheduled{background:rgba(16,185,129,0.10); color:#065f46}
.pill.cancelled{background:rgba(239,68,68,0.10); color:#7f1d1d}
.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}

/* Mobile tuning for dashboard payment pill */
@media (max-width: 720px){
  .dashboard .glass-panel .list-item .pill.pending,
  .dashboard .glass-panel .list-item .pill.scheduled{top:10px; right:10px}
}

.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; gap:6px; padding:10px 12px; background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.06)}
.chip-time .time{font-weight:800; color:var(--text)}
.chip-time .duration{font-size:12px; color:var(--muted)}
.chip-time:hover{transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,128,255,0.13); border-color:rgba(0,128,255,0.35); background:rgba(255,255,255,0.98)}

/* 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] .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)}
.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) */
.calendar-month .cal-cell{vertical-align:top; width:14.2857%; background:rgba(255,255,255,0.6)}
.calendar-month .cal-cell .cal-cell-inner{display:grid; gap:8px; min-height:120px; padding:10px; border-radius:12px}
.calendar-month .cal-cell.muted{opacity:0.6}
.calendar-month .cal-date-row{display:flex; align-items:center; justify-content:space-between}
.calendar-month .cal-date{font-weight:800; color:#0a3a70}
.calendar-month .cal-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; font-size:12px}
.calendar-month .cal-appts{display:grid; gap:6px}
.calendar-month .appt-chip{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.8); color:var(--text)}
.calendar-month .appt-chip .time{font-weight:800; color:#0a3a70}
.calendar-month .appt-chip .title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.calendar-month .cal-more{font-size:12px; color:#0a3a70; opacity:0.8}
.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{
  text-decoration:none; color:var(--text);
}
.calendar-month .appt-chip:hover,
.calendar-week .appt-chip.full:hover,
.calendar-cards .item:hover{
  cursor:pointer;
}

/* Calendrier (semaine) */
.calendar-week thead th{position:sticky; top:0; z-index:1}
.calendar-week .time-col{width:72px; font-weight:700; color:#0a3a70; background:rgba(255,255,255,0.9)}
.calendar-week .week-cell{vertical-align:top; min-width:140px; background:rgba(255,255,255,0.6)}
.calendar-week .appt-chip.full{display:grid; gap:4px; padding:8px 10px; margin:6px 0; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,0.9); box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.calendar-week .appt-chip.full .time{font-weight:800; color:#0a3a70}
.calendar-week .appt-chip.full .title{font-weight:600}
.calendar-week .appt-chip.full .notes{font-size:12px; color:var(--muted)}
@media (max-width: 720px){
  .calendar-week thead tr th:nth-child(n+3){display:none}
  .calendar-week tbody tr td:nth-child(n+3){display:none}
  /* Show only time and current day + next day to reduce width */
}

/* 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}
.calendar.rounded thead th:first-child{border-top-left-radius:16px}
.calendar.rounded thead th:last-child{border-top-right-radius:16px}
@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%}
}

/* Mobile cards view for month calendar */
@media (max-width: 720px){
  .calendar-month{display:none}
  .calendar-cards{display:grid; gap:10px}
  .calendar-card{border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.8); padding:12px}
  .calendar-card .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .calendar-card .card-head .date{font-weight:800; color:#0a3a70}
  .calendar-card .list{display:grid; gap:8px}
  .calendar-card .item{display:flex; align-items:center; gap:8px}
  .calendar-card .item .time{font-weight:800; color:#0a3a70}
}

.site-footer{margin-top:var(--space-6); padding:var(--space-4) 0; border-top:1px solid var(--border); color:var(--muted)}
/* Footer standard (non fixé) */
@media (max-width: 1200px){
  body, html{min-height:100vh}
  .site-footer{position:static}
  main.container{padding-bottom:0}
}

/* 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 1.4s 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:10px; margin:12px 0; padding:0; list-style:none}
.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;}
.link-doctolib:hover{color:#063a85; text-decoration:underline}

.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:36px; line-height:1.65}
#about-page .glass-panel h3{margin-bottom:16px; font-size:21px}
#about-page .glass-panel h4{margin-top:14px; margin-bottom:10px; font-size:17px}
#about-page .glass-panel p{margin-bottom:14px; 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)}

/* 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 140px; gap:14px; align-items:center; padding:16px; border-radius:16px; border:1px solid var(--border); 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); overflow:hidden}
.profile-card .content{display:grid; gap:6px}
.profile-card .title{font-weight:800; font-size:22px; color:#0a3a70; line-height:1.2}
.profile-card .subtitle{font-size:14px; color:var(--muted)}
/* 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; grid-template-rows:auto auto} .profile-card .thumb{margin-top:8px; height:120px}}

/* 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:minmax(0, 0.65fr) minmax(0, 1.35fr); grid-template-areas:
  "profile profile"
  "highlights highlights"
  "trust trust"
  "note note"
  "cta cta"; gap:16px}
.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:14px; border-radius:12px; backdrop-filter:blur(6px); background:rgba(255,255,255,0.45); border:1px solid rgba(0,0,0,0.04); box-shadow:0 4px 18px rgba(15,23,42,0.08)}
.highlight-card .h-title{font-weight:600; margin-bottom:6px}
.highlight-card ul{margin:0; padding-left:18px}
.highlight-card p{margin:0}
.profile-card{grid-area:profile; max-width:40%}
.trust-row{grid-area:trust; display:flex; flex-wrap:wrap; gap:8px}
.hero-grid .glass-panel .actions-row{grid-area:cta}
.end-note{grid-area:note; margin-bottom:0 !important}
.more summary{cursor:pointer; color:var(--brand-primary)}
@media (min-width: 980px){ .hero-grid{grid-template-columns: 0.9fr 1.1fr; align-items:start} }
@media (max-width: 860px){
  .profile-card{max-width:100%}
  .hero-grid{grid-template-columns:1fr; grid-template-areas:
    "profile"
    "highlights"
    "trust"
    "note"
    "cta"}
  .hero-highlights{grid-template-columns:1fr}
}
.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,
  .glass-panel .actions-row a.btn,
  .glass-panel .actions-row button{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}
}