/* ===============================
   DESIGN TOKENS
   (nouvelles variables uniquement — aucune classe existante
   n'est renommée ni supprimée)
=============================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --color-primary: #2f6fed;
  --color-primary-dark: #244fc4;
  --color-primary-light: #eaf1ff;
  --color-primary-soft: #dce9ff;

  --color-ink: #1f2d3d;
  --color-muted: #63748b;
  --color-muted-light: #94a3b8;

  --color-surface: #ffffff;
  --color-bg: #eef5ff;
  --color-border: #e3e8f0;

  --color-secondary: #12b8a4;
  --color-secondary-dark: #0d9488;
  --color-secondary-light: #e3fbf7;

  --color-danger: #e0453f;
  --color-success: #2fa96a;
  --color-booked: #d8dde3;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --accent-bar: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  --btn-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);

  --shadow-xs: 0 1px 3px rgba(31, 45, 61, 0.06);
  --shadow-sm: 0 4px 14px rgba(31, 45, 61, 0.07);
  --shadow-md: 0 10px 28px rgba(31, 45, 61, 0.10);
  --shadow-lg: 0 20px 45px rgba(31, 45, 61, 0.14);
  --shadow-primary: 0 8px 18px rgba(47, 111, 237, 0.24), 0 3px 10px rgba(18, 184, 164, 0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-base: 0.25s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #c7d3e3;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: #aebbd0;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes softPop {
  0%   { transform: scale(0.97); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ===============================
   BASE
=============================== */

html {
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Manrope', Arial, sans-serif;
  letter-spacing: -0.01em;
}


/* ===============================
   NAVBAR / TOPBAR
=============================== */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 500;
  min-height: 76px;
  box-sizing: border-box;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.nav-buttons a {
  margin-left: 10px;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary {
  background: var(--btn-gradient);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: bold;
  display: inline-block;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 22px rgba(47, 111, 237, 0.30), 0 5px 14px rgba(18, 184, 164, 0.22);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  display: inline-block;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

.btn-danger {
  border: 1.5px solid #d9483a;
  background: #fff;
  color: #d9483a;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-danger:hover {
  background: #d9483a;
  color: #fff;
  transform: translateY(-1px);
}


/* ===============================
   HERO
=============================== */

.hero {
  text-align: center;
  padding: 90px 20px 70px;
  animation: fadeInUp 0.5s var(--ease) both;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 15%, var(--color-primary-light) 0%, transparent 48%),
    radial-gradient(circle at 88% 10%, var(--color-secondary-light) 0%, transparent 45%),
    linear-gradient(120deg, rgba(47, 111, 237, 0.05) 0%, rgba(18, 184, 164, 0.05) 100%);
  isolation: isolate;
}

.hero::after {
  content: '\271A';
  position: absolute;
  top: -60px;
  right: -40px;
  font-size: 260px;
  line-height: 1;
  color: var(--color-secondary);
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 12px;
  font-weight: 800;
  color: var(--color-ink);
  position: relative;
}

.hero p {
  color: var(--color-muted);
  margin-bottom: 30px;
  font-size: 17px;
}

.large {
  padding: 16px 28px;
  font-size: 16px;
}


/* ===============================
   FEATURES
=============================== */

.features {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 50px;
  flex-wrap: wrap;
}

.card {
  background: var(--color-surface);
  padding: 24px;
  width: 250px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-bar);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}


/* ===============================
   AUTH (LOGIN / REGISTER)
=============================== */

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.auth-box {
  background: var(--color-surface);
  padding: 34px;
  width: 350px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  animation: softPop 0.35s var(--ease) both;
  position: relative;
  overflow: hidden;
}

.auth-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent-bar);
}

.auth-box h2 {
  text-align: center;
  margin-bottom: 22px;
  font-weight: 700;
}

.auth-box input,
.auth-box select,
.auth-box textarea {
  width: 100%;
  padding: 11px 12px;
  margin: 8px 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14.5px;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-box input:focus,
.auth-box select:focus,
.auth-box textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.auth-box button {
  width: 100%;
  padding: 13px;
  background: var(--btn-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-box button:hover {
  background: #256bd1;
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.switch-link {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--color-muted);
}

.switch-link a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.terms-checkbox {
  text-align: left;
  font-size: 13px;
  color: var(--color-muted);
  margin: 14px 0 4px;
  line-height: 1.5;
}

.terms-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.terms-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: auto;
}

.terms-checkbox a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.terms-checkbox a:hover {
  text-decoration: underline;
}


/* ===============================
   TOPBAR DASHBOARD
=============================== */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 500;
}

.topbar .right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.link {
  text-decoration: none;
  color: var(--color-primary);
  transition: opacity var(--transition-fast);
}

.link:hover {
  opacity: 0.75;
}


/* ===============================
   USER MENU
=============================== */

.user-menu {
  position: relative;
  cursor: pointer;
  font-weight: bold;
}

.dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  animation: softPop 0.18s var(--ease) both;
}

.dropdown a {
  padding: 11px 14px;
  text-decoration: none;
  color: var(--color-ink);
  transition: background var(--transition-fast);
}

.dropdown a:hover {
  background: var(--color-primary-light);
}

.hidden {
  display: none;
}


/* ===============================
   SEARCH (PATIENT)
=============================== */

.search-section {
  text-align: center;
  margin-top: 80px;
}

.search-box {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.search-box input,
.search-box select {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: 'Inter', Arial, sans-serif;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box input:focus,
.search-box select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.search-box button {
  grid-column: span 2;
  padding: 13px;
  background: var(--btn-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.search-box button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}


/* ===============================
   ACCOUNT BOX (MI CUENTA)
=============================== */

.account-box {
  position: fixed;
  top: 90px;
  right: 30px;
  background: var(--color-surface);
  padding: 22px;
  width: 260px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  border: 1px solid var(--color-border);
  animation: softPop 0.25s var(--ease) both;
}

.account-box h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Manrope', Arial, sans-serif;
}


/* ===============================
   PROFILE PAGE (MI CUENTA)
=============================== */

.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  min-height: calc(100vh - 80px);
}

.profile-container h1 {
  margin-bottom: 20px;
  color: var(--color-primary);
}

.profile-box {
  background: var(--color-surface);
  padding: 32px;
  width: 350px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
  border: 1px solid var(--color-border);
}

.profile-box p {
  margin: 10px 0;
  color: var(--color-muted);
}

.profile-box strong {
  color: var(--color-primary);
}

.hidden {
  display: none !important;
}

.doctor-card {
  background: var(--color-surface);
  padding: 18px 20px 18px 24px;
  margin: 10px auto;
  width: 60%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: left;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

.doctor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-bar);
}

.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.doctor-card button {
  margin-top: 12px;
  padding: 9px 16px;
  background: var(--btn-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.doctor-card button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.error {
  color: var(--color-danger);
  font-size: 12px;
  margin-bottom: 5px;
}

#results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#results p {
  font-size: 18px;
  color: var(--color-ink);
  margin-top: 20px;
}

#userName {
  font-weight: bold;
  color: var(--color-primary);
}

#agendaSection {
  text-align: center;     /* centre le texte */
  margin-top: 40px;       /* descend un peu du header */
}

#agendaSection h2 {
  margin-bottom: 10px;
}

#agendaSection p {
  color: var(--color-muted);
}

/* ===============================
   AGENDA DOCTOR
=============================== */

.agenda-container {
  text-align: center;
  margin-top: 40px;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .hours-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .hours-grid {
    grid-template-columns: 1fr;
  }
}

.hour-slot {
  padding: 15px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.hour-slot:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.hour-slot.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary-dark);
}

.hour-slot.selected::after {
  content: '\2713';
  position: absolute;
  top: 3px;
  right: 7px;
  font-size: 12px;
  opacity: 0.85;
}

.hour-slot.booked {
  background: var(--color-booked);
  color: #6b7684;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===============================
   AGENDA AVANCÉE - TYPE DE RENDEZ-VOUS + EXCEPTION
   =============================== */

.hour-slot-time {
  font-weight: 600;
}

.hour-slot-type {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

.hour-slot-edit {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hour-slot.selected .hour-slot-edit {
  background: rgba(255, 255, 255, 0.35);
}

.hour-slot-edit:hover {
  background: rgba(0, 0, 0, 0.25);
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.modal-actions button {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: bold;
}

.modal-actions button:first-child {
  background: var(--color-primary);
  color: white;
}

.modal-actions button:last-child {
  background: var(--color-border);
}

/* ===============================
   BANNIÈRE - PÉRIODE DE GRÂCE ABONNEMENT
   =============================== */

.subscription-warning-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff4e5;
  border: 1px solid #f0ad4e;
  color: #8a5a00;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
}

.subscription-warning-banner button {
  background: #f0ad4e;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.subscription-warning-banner button:hover {
  background: #e09b3a;
}

.agenda-actions {

    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;

}

.agenda-actions button {

    padding: 11px 22px;

    background: var(--color-primary);
    color: white;

    border: none;
    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 15px;
    font-weight: bold;

    box-shadow: var(--shadow-primary);

    transition: 0.2s var(--ease);

}

.agenda-actions button:hover {

    transform: scale(1.03);
    filter: brightness(1.04);

}

#appointmentsSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#appointmentsList p,
#historyList p {
  background: #f0f4fa;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-align: center;
  width: fit-content;
  margin: 40px auto;
  border: 1px dashed var(--color-border);
}

#historyList p {
  grid-column: 1 / -1;
  justify-self: center;
}

#appointmentsList p {
  grid-column: 1 / -1;
  justify-self: center;
}

#appointmentsList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}

@media (max-width: 1200px) {
  #appointmentsList {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  #appointmentsList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  #appointmentsList {
    grid-template-columns: 1fr;
  }
}

.location {
  color: var(--color-muted-light);
  font-size: 14px;
  margin-top: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 28, 40, 0.55);
  backdrop-filter: blur(2px);

  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 0.2s var(--ease) both;
}

.modal-content {
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  width: 400px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: softPop 0.25s var(--ease) both;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.close:hover {
  color: var(--color-danger);
}

.auth-container {
  height: auto;
  min-height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.agenda-hidden {
  display: none;
}

#historySection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#historySection h1 {
    margin-top: 40px;
    margin-bottom: 30px;
}

#historyList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}

@media (max-width: 1200px) {
  #historyList {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  #historyList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  #historyList {
    grid-template-columns: 1fr;
  }
}

.date-picker-container {

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 20px;
    margin-bottom: 20px;

}

.date-picker-container label {

    font-weight: bold;
    margin-bottom: 8px;
    color: var(--color-ink);

}

.date-picker-container input {

    padding: 9px 14px;

    border-radius: var(--radius-sm);

    border: 1.5px solid var(--color-border);

    font-size: 15px;

    font-family: 'Inter', Arial, sans-serif;

    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}

.date-picker-container input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.password-container {
  position: relative;
  width: 100%;
}


.password-container input {
  width: 100%;
  padding-right: 10px;
}


.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.toggle-password:hover {
  color: var(--color-primary);
}

/* ===============================
   LOGO HEADER
=============================== */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.logo h2 {
  font-size: 22px;
  margin: 0;
  font-weight: 800;
  color: var(--color-primary);
}

.logo span {
  font-size: 22px;
  color: var(--color-primary);
}

/* Garantit la même couleur de marque partout : page de connexion,
   tableau de bord une fois connecté, etc. Ne change ni classe ni id. */
.navbar .logo,
.navbar .logo h2,
.navbar .logo span,
.topbar .logo,
.topbar .logo h2,
.topbar .logo span {
  color: var(--color-primary);
}


/* ===============================
   RESPONSIVE — AJUSTS COMPLÉMENTAIRES
   (les media queries existantes ci-dessus restent inchangées ;
   celles-ci ajoutent uniquement des affinages mobiles)
=============================== */

@media (max-width: 640px) {
  .navbar,
  .topbar {
    padding: 14px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .logo {
    font-size: 18px;
  }

  .logo img {
    width: 44px;
    height: 44px;
  }

  .logo h2 {
    font-size: 18px;
  }

  .logo span {
    font-size: 18px;
  }

  .nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
  }

  .nav-buttons a {
    margin-left: 0;
  }

  .topbar .right {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    padding: 10px 14px;
    font-size: 14px;
  }

  .hero {
    padding: 50px 16px 44px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 15.5px;
  }

  .hero::after {
    font-size: 160px;
    top: -30px;
    right: -30px;
  }

  .features {
    padding: 34px 16px;
    gap: 16px;
  }

  .card {
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
  }

  .search-box {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .search-box button {
    grid-column: 1;
  }

  .auth-container,
  .profile-container {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    height: auto;
    min-height: calc(100vh - 120px);
  }

  .auth-box,
  .profile-box {
    width: 100%;
    max-width: 400px;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .account-box {
    width: calc(100% - 24px);
    max-width: 340px;
    right: 12px;
    top: 78px;
    padding: 18px;
    box-sizing: border-box;
  }

  .doctor-card {
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown {
    min-width: 130px;
    right: -10px;
  }

  .agenda-actions button,
  .doctor-card button {
    width: 100%;
  }

  .agenda-actions {
    flex-direction: column;
  }

  .hours-grid {
    gap: 8px;
  }

  .hour-slot {
    padding: 12px 8px;
    font-size: 14px;
  }

  .modal-content {
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
  }

  #appointmentsList,
  #historyList {
    padding: 16px;
  }

  .date-picker-container input {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
  }
}

/* Très petits écrans (téléphones type iPhone SE / Android compacts) */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 24px;
  }

  .hero p {
    font-size: 14.5px;
  }

  .auth-box,
  .profile-box {
    padding: 20px 16px;
  }

  .account-box {
    padding: 14px;
  }

  .logo h2,
  .logo span {
    font-size: 16px;
  }

  .btn-primary,
  .btn-secondary,
  .agenda-actions button,
  .doctor-card button,
  .search-box button,
  .auth-box button {
    font-size: 13.5px;
  }
}

/* Cibles tactiles confortables sur mobile/tablette (pas de souris) */
@media (hover: none) and (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .auth-box button,
  .search-box button,
  .agenda-actions button,
  .doctor-card button,
  .hour-slot {
    min-height: 44px;
  }

  .card:hover,
  .doctor-card:hover,
  .hour-slot:hover {
    transform: none;
  }

  /* 🔧 Correctif (audit tactile) : l'icône du menu utilisateur (☰) et
     le bouton de fermeture des modales (×) n'avaient qu'une zone
     cliquable réduite à la taille du glyphe (bien en-deça des 44x44px
     recommandés pour une cible tactile). Uniquement sur appareils à
     pointeur tactile (souris/desktop non affectés) : on agrandit la
     zone cliquable sans changer l'apparence visuelle du reste de
     l'interface. */
  .user-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    padding: 0;
  }

  .container > button,
  .admin-menu button {
    min-height: 44px;
  }
}

/* ===============================
   FOOTER
=============================== */

.footer {
    margin-top: 110px;
    padding: 20px 30px;
    font-size: 13px;
    color: var(--color-muted);
    text-align: center;
}

.footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {

    .footer {
        margin-top: 70px;
        padding: 18px 16px;
        font-size: 12px;
    }

}

/* ===============================
   ADMIN - SEARCH (MULTI-CAMPO)
=============================== */

.admin-search-box {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: unset;
  justify-content: center;
  margin: 16px 0 24px;
}

.admin-search-box input {
  flex: 1 1 160px;
  max-width: 220px;
}

.admin-search-box button {
  grid-column: unset;
  flex: 0 0 auto;
  padding: 11px 20px;
}

/* ===============================
   ADMIN - ESTADÍSTICAS
=============================== */

.stats-subtitle {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.stats-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.stats-row {
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
}

.connection-stats-table {
  max-width: 420px;
  margin: 20px auto 0;
  border-collapse: collapse;
  width: 100%;
}

.connection-stats-table th,
.connection-stats-table td {
  border: 1px solid var(--color-border);
  padding: 12px 18px;
  text-align: center;
}

.connection-stats-table th {
  background: var(--color-primary-light);
}

/* ===============================
   🔧 Correctif (audit responsive) : ADMIN LOGIN & MENU ADMIN
   (admin.html + dashboard_admin.html)
   Ces classes ("container", "admin-menu") étaient utilisées dans le
   HTML mais n'avaient jusqu'ici AUCUNE règle CSS associée : le rendu
   dépendait uniquement des styles par défaut du navigateur (variables
   d'un navigateur/OS à l'autre), sans centrage, marges, ni gap
   maîtrisé sur mobile. Le sélecteur "> input"/"> button" ne cible que
   les ENFANTS DIRECTS de .container (le formulaire de connexion admin
   dans admin.html) afin de ne jamais affecter les champs de recherche
   et boutons déjà stylés du dashboard admin (.admin-search-box,
   .recettes-table, etc., qui utilisent aussi .container comme
   conteneur englobant mais avec leurs propres classes internes).
=============================== */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
  box-sizing: border-box;
}

.container > h1 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.container > h2 {
  text-align: center;
  color: var(--color-muted);
  font-weight: 500;
  margin-bottom: 24px;
}

.container > input {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  box-sizing: border-box;
}

.container > input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.container > button {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 0;
  padding: 12px 18px;
  background: var(--btn-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.container > button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.admin-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0 32px;
}

.admin-menu button {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.admin-menu button:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .container {
    padding: 20px 16px;
  }

  .admin-menu {
    gap: 8px;
  }

  .admin-menu button {
    flex: 1 1 calc(50% - 8px);
  }
}

/* ===============================
   MI CUENTA (PATIENT & DOCTOR)
=============================== */

.profile-box.account-page-box {
  width: 100%;
  max-width: 680px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  text-align: left;
}

.account-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
  margin-bottom: 24px;
  transition: box-shadow var(--transition-base);
}

.account-section:hover {
  box-shadow: var(--shadow-md);
}

.account-section h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: var(--color-primary);
}

.account-field {
  margin-bottom: 0;
}

.account-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-field input,
.account-field select,
.account-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.account-field textarea {
  min-height: 90px;
  resize: vertical;
}

.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-surface);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}

.account-field--full {
  grid-column: 1 / -1;
}

.account-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Champs isolés (hors grille) : email, mot de passe... On limite
   leur largeur pour éviter des rectangles disproportionnés qui
   s'étirent sur toute la largeur de la carte. */
.account-section > .account-field,
.account-section > .password-container {
  max-width: 420px;
  margin-bottom: 16px;
}

.account-section > .account-field:last-child,
.account-section > .password-container:last-of-type {
  margin-bottom: 0;
}

.account-email-display {
  display: inline-block;
  max-width: 420px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-primary-light);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

.account-section button {
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--btn-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.account-section button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* Champs mot de passe et checklist de robustesse : stylés
   uniquement à l'intérieur de "Mi cuenta" (.account-section),
   sans toucher au style de ces mêmes classes ailleurs (login,
   inscription, réinitialisation de mot de passe). */

.account-section .password-container {
  margin-bottom: 14px;
}

.account-section .password-container input {
  padding: 11px 42px 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-bg);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.account-section .password-container input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-surface);
}

.account-section .password-rules {
  max-width: 420px;
  box-sizing: border-box;
  margin: 4px 0 14px;
  padding: 12px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.account-section .password-rules p {
  margin: 2px 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

@media (max-width: 768px) {

  .profile-box.account-page-box {
    max-width: 100%;
  }

  .account-section {
    padding: 22px 20px;
  }

  .account-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .account-section .password-rules {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {

  .account-section {
    padding: 18px 16px;
    border-radius: var(--radius-md);
  }

  .account-section h3 {
    font-size: 16.5px;
  }

  .account-section button {
    width: 100%;
  }

}

/* ===============================
   PÁGINAS LEGALES (TÉRMINOS / PRIVACIDAD)
=============================== */

.legal-page {
  display: flex;
  justify-content: center;
  padding: 50px 20px 90px;
}

.legal-card {
  background: var(--color-surface);
  width: 100%;
  max-width: 820px;
  padding: 46px 56px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  animation: softPop 0.35s var(--ease) both;
}

.legal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent-bar);
}

.legal-header {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.legal-header h1 {
  font-size: 26px;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--color-ink);
}

.legal-updated {
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
}

.legal-download-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.legal-download-btn:hover {
  background: var(--color-primary-dark);
}

.legal-section {
  margin-bottom: 32px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  font-size: 19px;
  color: var(--color-primary);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.legal-section h3 {
  font-size: 16px;
  color: var(--color-ink);
  margin: 18px 0 10px;
}

.legal-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink);
  margin: 0 0 12px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul,
.legal-section ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-section li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.legal-contact {
  display: inline-block;
  font-weight: 600;
  color: var(--color-primary);
}

@media (max-width: 768px) {

  .legal-page {
    padding: 36px 16px 70px;
  }

  .legal-card {
    padding: 32px 28px;
  }

  .legal-header h1 {
    font-size: 22px;
  }

}

@media (max-width: 480px) {

  .legal-page {
    padding: 28px 10px 56px;
  }

  .legal-card {
    padding: 22px 16px;
    border-radius: var(--radius-md);
  }

  .legal-header h1 {
    font-size: 19px;
  }

  .legal-section h2 {
    font-size: 17px;
  }

  .legal-section h3 {
    font-size: 15px;
  }

  .legal-section p,
  .legal-section li {
    font-size: 14px;
  }

}

/* ===============================
   ADMIN - LIVRE DES RECETTES
   (section entièrement en français —
   usage comptable/fiscal personnel)
=============================== */

.recettes-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.recettes-summary-card {
  flex: 1 1 220px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
}

.recettes-summary-card .recettes-summary-label {
  display: block;
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.recettes-summary-card .recettes-summary-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
}

.recettes-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.recettes-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

table.recettes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.recettes-table th,
table.recettes-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

table.recettes-table th {
  background: var(--color-primary-light);
  color: var(--color-ink);
  font-weight: 700;
}

table.recettes-table tbody tr:hover {
  background: var(--color-bg);
}

table.recettes-table a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  margin-right: 10px;
}

table.recettes-table a:hover {
  text-decoration: underline;
}

.recettes-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-muted);
}

.recettes-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0;
}

.recettes-pagination button {
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.recettes-pagination button:hover:not(:disabled) {
  background: var(--color-primary-light);
}

.recettes-pagination button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.recettes-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.recettes-pagination-info {
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  margin-top: 8px;
}

.hero-videos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.hero-videos .video-card {
  width: 280px;
}

.hero-videos .video-card h2 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.hero-videos .tutorial-video {
  width: 280px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 0;
}

@media (max-width: 900px) {
  .hero-videos {
    flex-direction: column;
  }

  .hero-videos .video-card {
    width: 100%;
    max-width: 400px;
  }

  .hero-videos .tutorial-video {
    width: 100%;
  }

  .hero-videos .btn-primary {
    order: -1;
  }
}