/* ═══════════════════════════════════════════════════════════════════════════
   GencoAide — style.css
   Feuille de style centralisée. Toutes les variables, composants et
   breakpoints sont définis ici. Les pages chargent UNIQUEMENT ce fichier.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Variables globales ──────────────────────────────────────────────────── */

:root {
  /* Couleurs */
  --primary:       #1A365D;
  --primary-light: #2B6CB0;
  --accent:        #ED8936;
  --bg:            #EBF4FF;
  --card:          #FFFFFF;
  --text:          #1A202C;
  --text-light:    #4A5568;
  --danger:        #E53E3E;
  --success:       #38A169;
  --warning:       #D69E2E;
  --border:        #E2E8F0;

  /* Formes */
  --radius:        12px;
  --radius-lg:     16px;

  /* Ombres */
  --shadow:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.12);

  /* Breakpoints (lecture seule — utiliser @media directement) */
  --mobile:        480px;
  --tablet:        768px;
  --desktop:       1024px;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

body.no-mobile-bar {
  padding-bottom: 0;
}

img {
  max-width: 100%;
  display: block;
}

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

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
}

h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h3 { font-size: 1.1rem; }

p { margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.grid {
  display: grid;
  gap: 16px;
}

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

.flex {
  display: flex;
  gap: 12px;
}

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */

.navbar {
  background: linear-gradient(90deg,
    #FFFFFF  0%,
    #FFFFFF  22%,
    #EBF0F7  32%,
    #CCDAEB  44%,
    #8AAACB  56%,
    #3D6290  68%,
    #1A365D  80%,
    #1A365D  100%
  );
  border-left: 10px solid var(--primary);
  padding: 0 36px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 116px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 0;
  text-decoration: none;
}

.navbar-brand img {
  height: 100px;
  width: 100px;
  object-fit: contain;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.navbar-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.5px;
  line-height: 1;
}

.navbar-brand-name .part-genco { color: #4A5568; }
.navbar-brand-name .part-aide  { color: #E07B39; }
.navbar-brand-name sup {
  font-size: 0.9rem;
  font-weight: 700;
  color: #E07B39;
  opacity: 0.85;
  letter-spacing: 0;
}

.navbar-brand-slogan {
  font-size: 0.95rem;
  color: #4A5568;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}

.navbar-brand-tags {
  font-size: 0.75rem;
  color: #718096;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.navbar-brand-tags span {
  color: #CBD5E0;
  margin: 0 5px;
  font-weight: 400;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.navbar-menu a,
.navbar-menu button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s;
  border: none;
  background: transparent;
}

.navbar-menu .btn-nav-home {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
}

.navbar-menu .btn-nav-home:hover {
  background: rgba(255,255,255,0.25);
}

/* ── Mobile bar (nav bas) ────────────────────────────────────────────────── */

.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 200;
  display: none;
}

.mobile-bar-items {
  display: flex;
  height: 64px;
}

.mobile-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-light);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 6px 4px;
  transition: color 0.15s;
  border: none;
  background: transparent;
}

.mobile-bar-item:hover,
.mobile-bar-item.active {
  color: var(--primary-light);
  text-decoration: none;
}

.mobile-bar-icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* ── Page header (titre + retour + description) ──────────────────────────── */

.page-header {
  padding: 24px 0 20px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.page-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.page-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--border);
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  flex-shrink: 0;
}

.page-header-back:hover {
  background: #CBD5E0;
  text-decoration: none;
}

.page-header h1 {
  margin: 0;
}

.page-header-desc {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.section {
  margin-bottom: 32px;
}

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: 1rem;
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 1;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
  color: white;
  text-decoration: none;
}

.btn-secondary {
  background: var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: #CBD5E0;
  text-decoration: none;
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #C53030;
  text-decoration: none;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #2F855A;
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--border);
  text-decoration: none;
}

/* ── Formulaires ─────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 6px;
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(43,108,176,0.12);
}

.form-input::placeholder { color: #A0AEC0; }

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

.form-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 4px;
}

.form-error {
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: 4px;
}

/* ── Alertes ─────────────────────────────────────────────────────────────── */

.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  border-left: 4px solid;
  margin-bottom: 16px;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert-success {
  background: #F0FFF4;
  border-color: var(--success);
  color: #22543D;
}

.alert-error {
  background: #FFF5F5;
  border-color: var(--danger);
  color: #742A2A;
}

.alert-warning {
  background: #FFFAF0;
  border-color: var(--warning);
  color: #744210;
}

.alert-info {
  background: #EBF8FF;
  border-color: var(--primary-light);
  color: #1A365D;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-ok {
  background: #C6F6D5;
  color: #22543D;
}

.badge-urgent {
  background: #FED7D7;
  color: #742A2A;
}

.badge-warning {
  background: #FEFCBF;
  color: #744210;
}

.badge-info {
  background: #BEE3F8;
  color: #1A365D;
}

.badge-neutral {
  background: var(--border);
  color: var(--text-light);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform 0.2s;
}

.modal-backdrop.visible .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--border);
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}

.modal-close:hover {
  background: #CBD5E0;
}

.modal-body {
  padding: 22px;
}

.modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */

#ga-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn 0.25s ease;
  border-left: 4px solid;
  background: white;
}

.toast.toast-out {
  animation: toastOut 0.25s ease forwards;
}

.toast-success { border-color: var(--success); }
.toast-error   { border-color: var(--danger);  }
.toast-warning { border-color: var(--warning); }
.toast-info    { border-color: var(--primary-light); }

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content { flex: 1; }
.toast-title   { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.toast-message { color: var(--text-light); line-height: 1.4; }

.toast-dismiss {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.toast-dismiss:hover { opacity: 1; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ga-footer {
  background: var(--primary);
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 24px 20px;
  font-size: 0.82rem;
  margin-top: auto;
}

.ga-footer a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.15s;
}

.ga-footer a:hover {
  color: white;
}

.ga-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.ga-footer-copy {
  opacity: 0.6;
  font-size: 0.78rem;
}

/* ── Utilitaires ─────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-light); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-small   { font-size: 0.85rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

.w-full { width: 100%; }

.hidden { display: none !important; }

.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 999px; }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* ── État vide ───────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 0.95rem;
  max-width: 320px;
  margin: 0 auto 16px;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary-light);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Modes d'accessibilité ───────────────────────────────────────────────── */

body.mode-simple {
  font-size: 18px;
}

body.mode-simple .btn {
  padding: 14px 24px;
  font-size: 1rem;
}

body.mode-simple h1 { font-size: 2rem; }
body.mode-simple h2 { font-size: 1.6rem; }
body.mode-simple h3 { font-size: 1.3rem; }

body.mode-sombre {
  --bg:   #1A202C;
  --card: #2D3748;
  --text: #F7FAFC;
  --text-light: #A0AEC0;
  --border: #4A5568;
}

/* ── Responsive — Tablette (≤768px) ─────────────────────────────────────── */

@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
    min-height: 80px;
  }

  .navbar-brand img {
    height: 60px;
    width: 60px;
  }

  .navbar-brand-name { font-size: 1.4rem; }
  .navbar-brand-slogan,
  .navbar-brand-tags { display: none; }

  .mobile-bar { display: flex; }

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

  .container { padding: 0 14px 36px; }

  .modal { border-radius: var(--radius); }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }

  #ga-toast-container {
    top: 16px;
    bottom: auto;
    right: 12px;
    left: 12px;
  }

  .toast { max-width: 100%; }
}

/* ── Responsive — Mobile (≤480px) ───────────────────────────────────────── */

@media (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-top {
    flex-wrap: wrap;
  }

  .btn-lg {
    width: 100%;
  }
}

/* ── Desktop (≥1024px) ───────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .container { padding: 0 40px 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard (pages/index.html)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau alerte (expirations, médicaments) ───────────────────────────── */

.bandeau-alerte {
  display: none;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 13px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: #744210;
  background: #FFFAF0;
  border: 2px solid var(--warning);
}

.bandeau-alerte.visible { display: flex; }
.bandeau-alerte .bandeau-icone { font-size: 1.8rem; flex-shrink: 0; }
.bandeau-alerte .bandeau-cta {
  margin-left: auto;
  background: var(--warning);
  color: white;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ── Résumé du jour ──────────────────────────────────────────────────────── */

.resume-jour {
  margin: 24px 0 20px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.resume-date {
  font-family: 'Montserrat', sans-serif;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
}

.resume-date .resume-date-jour {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.9rem;
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
}

.resume-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  text-decoration: none;
  transition: all 0.15s;
}

.stat-pill:hover {
  border-color: var(--primary-light);
  background: #EBF8FF;
  color: var(--primary);
  text-decoration: none;
}

.stat-pill.alerte {
  background: #FFF5F5;
  border-color: #FEB2B2;
  color: var(--danger);
}

.stat-pill.ok {
  background: #F0FFF4;
  border-color: #9AE6B4;
  color: #276749;
}

/* ── Recherche globale ───────────────────────────────────────────────────── */

.recherche-globale { margin-bottom: 20px; }

.recherche-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.recherche-icone {
  position: absolute;
  left: 16px;
  font-size: 1.2rem;
  pointer-events: none;
}

.recherche-globale input {
  width: 100%;
  padding: 14px 44px 14px 48px;
  border: 2px solid var(--border);
  border-radius: 14px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  background: white;
  transition: border-color 0.15s;
}

.recherche-globale input:focus {
  outline: none;
  border-color: var(--primary-light);
}

.recherche-effacer {
  position: absolute;
  right: 12px;
  background: var(--border);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recherche-resultats {
  background: white;
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  max-height: 320px;
  overflow-y: auto;
}

.recherche-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--bg);
  transition: background 0.1s;
}

.recherche-item:hover { background: #EBF8FF; text-decoration: none; }
.recherche-item .r-icon  { font-size: 1.5rem; flex-shrink: 0; }
.recherche-item .r-label { font-weight: 600; font-size: 0.95rem; }
.recherche-item .r-desc  { font-size: 0.82rem; color: var(--text-light); }
.recherche-vide { padding: 20px; text-align: center; color: var(--text-light); font-size: 0.95rem; }

/* ── Grille essentiel (cartes principales) ───────────────────────────────── */

.grid-essentiel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.card-essentiel {
  background: white;
  border-radius: 18px;
  text-align: center;
  text-decoration: none;
  padding: 28px 20px 22px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.card-essentiel:hover {
  border-color: var(--primary-light);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(43,108,176,0.15);
  text-decoration: none;
}

.card-essentiel .icon { font-size: 3.4rem; margin-bottom: 12px; }

.card-essentiel h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--primary);
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.card-essentiel p {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.4;
  margin: 0;
}

/* Carte en alerte (impayés) */
.card-alerte {
  border: 2px solid var(--danger) !important;
  background: #FFF5F5 !important;
  animation: pulse-alerte 1.8s ease-in-out infinite;
}

.card-alerte h3 { color: var(--danger) !important; }
.card-alerte p  { color: #C53030 !important; font-weight: 600; }

@keyframes pulse-alerte {
  0%   { box-shadow: 0 0 0 0 rgba(229,62,62,0.5); }
  50%  { box-shadow: 0 0 0 12px rgba(229,62,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
}

.badge-alerte {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(229,62,62,0.5);
  animation: badge-bounce 1.8s ease-in-out infinite;
}

@keyframes badge-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

/* Bouton "Voir plus" (mode simplifié / senior) */
.btn-voir-plus {
  display: none;
  width: 100%;
  padding: 16px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #EBF4FF 0%, #DBEAFE 100%);
  border: 2px solid #BEE3F8;
  border-radius: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-voir-plus:hover {
  border-color: var(--primary-light);
  background: linear-gradient(90deg, #DBEAFE 0%, #BEE3F8 100%);
}

/* ── Outils avancés (section repliable) ──────────────────────────────────── */

.outils-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 14px 18px;
  background: linear-gradient(90deg, #EBF4FF 0%, #DBEAFE 100%);
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1.5px solid #BEE3F8;
  transition: all 0.15s;
  user-select: none;
}

.outils-toggle:hover {
  border-color: var(--primary-light);
  background: linear-gradient(90deg, #DBEAFE 0%, #BEE3F8 100%);
}

.outils-toggle-gauche {
  display: flex;
  align-items: center;
  gap: 12px;
}

.outils-toggle-gauche span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.outils-toggle-droite {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--text-light);
}

.fleche-outils {
  font-size: 1rem;
  transition: transform 0.3s;
  color: var(--primary);
}

.fleche-outils.ouvert { transform: rotate(180deg); }

.outils-conteneur {
  display: none;
  margin-top: 14px;
}

.outils-conteneur.visible { display: block; }

/* ── Grille outils (petites cartes) ──────────────────────────────────────── */

.grid-outils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.card-outil {
  background: white;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  padding: 22px 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1.5px solid var(--border);
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-outil:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(43,108,176,0.12);
  text-decoration: none;
}

.card-outil .icon { font-size: 2.4rem; margin-bottom: 10px; }

.card-outil h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--primary);
  font-size: 0.92rem;
  margin-bottom: 3px;
}

.card-outil p {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.3;
  margin: 0;
}

/* Carte paramètres pleine largeur */
.card-outil.card-params {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 16px;
  padding: 18px 24px;
  text-align: left;
  align-items: center;
  background: #EBF4FF;
  border-color: #BEE3F8;
}

.card-outil.card-params .icon { font-size: 2.2rem; margin-bottom: 0; flex-shrink: 0; }
.card-outil.card-params h3 { font-size: 1rem; }
.card-outil.card-params .params-sous {
  font-size: 0.8rem;
  color: #2D5282;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Section aidant ──────────────────────────────────────────────────────── */

.section-aidant {
  display: none;
  margin-bottom: 32px;
}

.section-aidant.visible { display: block; }

.grid-aidants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.card-aidant {
  background: white;
  border-radius: 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: all 0.18s;
  position: relative;
}

.card-aidant:hover {
  border-color: var(--primary-light);
  box-shadow: 0 6px 20px rgba(43,108,176,0.12);
  transform: translateY(-2px);
}

.card-aidant.actif {
  border-color: var(--primary-light);
  background: #EBF8FF;
}

.card-aidant-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-aidant-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}

.card-aidant-nom {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--primary);
  font-size: 1rem;
}

.card-aidant-relation { font-size: 0.8rem; color: var(--text-light); }

.card-aidant-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.stat-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.stat-mini.ok     { background: #F0FFF4; color: #276749; }
.stat-mini.alerte { background: #FFF5F5; color: #C53030; }
.stat-mini.neutre { background: #EDF2F7; color: var(--text-light); }

.badge-actif-dossier {
  position: absolute;
  top: 10px;
  right: 12px;
  background: var(--primary-light);
  color: white;
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 0.85rem;
  font-weight: 700;
}

.card-aidant-btn {
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}

.card-aidant-btn:hover { background: var(--primary-light); }

.btn-tableau-bord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid #BEE3F8;
  color: var(--primary-light);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-tableau-bord:hover { background: #EBF8FF; text-decoration: none; }

/* ── Interface Pro (liste résidents) ─────────────────────────────────────── */

.pro-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  flex-wrap: wrap;
}

.pro-search-input {
  flex: 1;
  min-width: 220px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  background: white;
  transition: border-color 0.2s;
}

.pro-search-input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(43,108,176,0.1);
}

.pro-btn-ajouter {
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.pro-btn-ajouter:hover { background: var(--primary-light); }
.pro-compteur { font-size: 0.82rem; color: var(--text-light); font-weight: 600; white-space: nowrap; }

.pro-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.pro-card {
  background: white;
  border-radius: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pro-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 14px rgba(43,108,176,0.12);
  transform: translateY(-1px);
}

.pro-card.actif { border-color: var(--primary-light); background: #EBF8FF; }

.pro-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}

.pro-avatar.urgence { background: #C53030; }
.pro-infos { flex: 1; min-width: 0; }

.pro-nom {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-chambre { font-size: 0.85rem; color: var(--text-light); margin-top: 1px; }
.pro-stats   { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }

.pro-badge {
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.pro-badge.ok     { background: #F0FFF4; color: #276749; }
.pro-badge.alerte { background: #FFF5F5; color: #C53030; }
.pro-badge.neutre { background: #EDF2F7; color: var(--text-light); }
.pro-fleche       { color: #CBD5E0; font-size: 1.1rem; flex-shrink: 0; }

.pro-vide {
  text-align: center;
  padding: 56px 24px;
  color: #A0AEC0;
  background: white;
  border-radius: 16px;
  border: 2px dashed var(--border);
  margin-bottom: 28px;
}

.pro-vide .pro-vide-icone { font-size: 3rem; margin-bottom: 12px; }
.pro-vide p     { font-size: 0.95rem; margin-bottom: 6px; color: var(--text-light); }
.pro-vide small { font-size: 0.82rem; }

/* ── Mode famille (cartes compactes) ─────────────────────────────────────── */

.mode-famille .grid-essentiel {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
}

.mode-famille .card-essentiel {
  padding: 18px 12px 14px;
  border-radius: 12px;
}

.mode-famille .card-essentiel .icon { font-size: 2rem; margin-bottom: 8px; }
.mode-famille .card-essentiel h3    { font-size: 0.88rem; }

/* Responsive dashboard ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .resume-jour {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .grid-essentiel {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .grid-outils { grid-template-columns: repeat(2, 1fr); }
  .card-outil.card-params { flex-direction: column; text-align: center; }

  .pro-liste { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mode-famille .grid-essentiel { grid-template-columns: repeat(3, 1fr); }
  .grid-outils { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .pro-liste { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLES PAGES MIGRÉES
══════════════════════════════════════════════════════════════════════════ */

/* ── MÉDICAMENTS (suffixe -med) ──────────────────────────────────────────── */
.container-medicaments {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.page-header-medicaments {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: white;
  padding: 2rem;
  border-radius: 16px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(102,126,234,0.25);
}

.page-header-medicaments h1 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.page-header-medicaments p {
  margin: 0;
  opacity: 0.95;
  font-size: 0.95rem;
}

.onglets-medicaments {
  display: flex;
  gap: 8px;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #E2E8F0;
  overflow-x: auto;
}

.onglet-btn-med {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #718096;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.onglet-btn-med.actif {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}

.onglet-btn-med:hover { color: var(--bleu); }

.onglet-panel-med {
  display: none;
}

.onglet-panel-med.active,
.onglet-panel-med.actif {
  display: block;
}

.carte-prise-med {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow 0.2s;
}

.carte-prise-med:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.heure-prise-med {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bleu);
  min-width: 60px;
  text-align: center;
}

.info-prise-med {
  flex: 1;
}

.info-prise-med strong {
  display: block;
  font-size: 1rem;
  color: #2D3748;
  margin-bottom: 4px;
}

.info-prise-med span {
  font-size: 0.85rem;
  color: #718096;
}

.btns-prise-med {
  display: flex;
  gap: 8px;
}

.btn-pris-med, .btn-reporte-med {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-pris-med {
  background: linear-gradient(135deg, #48BB78, #38A169);
  color: white;
}

.btn-pris-med:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(72,187,120,0.3);
}

.btn-reporte-med {
  background: #EDF2F7;
  color: #4A5568;
}

.btn-reporte-med:hover {
  background: #E2E8F0;
}

.carte-med {
  background: white;
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}

.carte-med:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.carte-med h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #2D3748;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-actif-med, .tag-inactif-med {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.tag-actif-med {
  background: #C6F6D5;
  color: #22543D;
}

.tag-inactif-med {
  background: #FED7D7;
  color: #742A2A;
}

.detail-med {
  font-size: 0.9rem;
  color: #4A5568;
  margin: 4px 0;
}

.actions-med {
  margin-top: 1rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-action-med {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modifier-med {
  background: #EDF2F7;
  color: #4A5568;
}

.btn-modifier-med:hover {
  background: #E2E8F0;
}

.btn-suppr-med {
  background: #FED7D7;
  color: #C53030;
}

.btn-suppr-med:hover {
  background: #FEB2B2;
}

.btn-toggle-med {
  background: #FEEBC8;
  color: #C05621;
}

.btn-toggle-med:hover {
  background: #FBD38D;
}

.formulaire-med {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.formulaire-med h3 {
  margin: 0 0 1rem;
  color: var(--bleu);
}

.champ-med {
  margin-bottom: 1rem;
}

.champ-med label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D3748;
  margin-bottom: 6px;
}

.champ-med input, .champ-med select, .champ-med textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CBD5E0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border 0.2s;
}

.champ-med input:focus, .champ-med select:focus, .champ-med textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.horaires-grid-med {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.horaire-item-med {
  background: #F7FAFC;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
}

.horaire-item-med label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4A5568;
  margin-bottom: 4px;
  display: block;
}

.horaire-item-med input {
  width: 100%;
  padding: 6px;
  border: 1px solid #CBD5E0;
  border-radius: 6px;
}

.form-actions-med {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.btn-annuler-med {
  flex: 1;
  padding: 12px;
  border: 1px solid #CBD5E0;
  background: white;
  color: #4A5568;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-annuler-med:hover {
  background: #F7FAFC;
}

.btn-valider-med {
  flex: 1;
  padding: 12px;
  border: none;
  background: linear-gradient(135deg, #667EEA, #764BA2);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-valider-med:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

.msg-vide-med {
  text-align: center;
  padding: 3rem 1rem;
  color: #A0AEC0;
}

.msg-vide-med .ico-med {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

/* ── MES DOCUMENTS (suffixe -docs) ───────────────────────────────────────── */
.fil-ariane-docs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding: 0.8rem;
  background: #F7FAFC;
  border-radius: 8px;
  flex-wrap: wrap;
}

.fil-ariane-docs a {
  color: var(--bleu);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.fil-ariane-docs a:hover {
  color: #4C51BF;
}

.titre-dossier-docs {
  font-size: 1.6rem;
  color: #2D3748;
  margin: 1rem 0;
  font-weight: 700;
}

.bandeau-bureau-docs {
  background: linear-gradient(135deg, #F6AD55, #ED8936);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(237,137,54,0.2);
}

.btn-bureau-docs {
  background: white;
  color: #C05621;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-bureau-docs:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── BUDGET (suffixe -budget) ────────────────────────────────────────────── */
.container-budget {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.solde-banniere-budget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.solde-card-budget {
  background: white;
  border-radius: 14px;
  padding: 1.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-left: 5px solid;
  transition: transform 0.2s, box-shadow 0.2s;
}

.solde-card-budget:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.solde-card-budget.revenus-budget { border-left-color: #38A169; }
.solde-card-budget.charges-budget { border-left-color: #C05621; }
.solde-card-budget.depenses-budget { border-left-color: #D69E2E; }
.solde-card-budget.solde-budget { border-left-color: #667EEA; }

.sc-label-budget {
  font-size: 0.85rem;
  font-weight: 600;
  color: #718096;
  margin-bottom: 8px;
}

.sc-montant-budget {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 4px;
}

.revenus-budget .sc-montant-budget { color: #38A169; }
.charges-budget .sc-montant-budget { color: #C05621; }
.depenses-budget .sc-montant-budget { color: #D69E2E; }
.solde-budget .sc-montant-budget.positif { color: #38A169; }
.solde-budget .sc-montant-budget.limite { color: #D69E2E; }
.solde-budget .sc-montant-budget.negatif { color: #C53030; }

.sc-detail-budget {
  font-size: 0.8rem;
  color: #A0AEC0;
}

.mois-bar-budget {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
  background: #F7FAFC;
  padding: 1rem;
  border-radius: 10px;
  flex-wrap: wrap;
}

.mois-bar-budget label {
  font-weight: 600;
  color: #2D3748;
}

.mois-bar-budget select, .annee-input-budget {
  padding: 8px 12px;
  border: 1px solid #CBD5E0;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
}

.btn-export-budget {
  margin-left: auto;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667EEA, #764BA2);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-export-budget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

.onglets-budget {
  display: flex;
  gap: 8px;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #E2E8F0;
  overflow-x: auto;
}

.onglet-budget {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #718096;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.onglet-budget.actif {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}

.onglet-budget:hover { color: var(--bleu); }

.section-budget {
  display: none;
}

.section-budget.active {
  display: block;
}

.table-card-budget {
  background: white;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.table-head-budget {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.table-head-budget h2 {
  margin: 0;
  font-size: 1.3rem;
  color: #2D3748;
}

.btn-ajouter-budget {
  padding: 10px 20px;
  background: linear-gradient(135deg, #48BB78, #38A169);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ajouter-budget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(72,187,120,0.3);
}

.etat-vide-budget {
  text-align: center;
  padding: 3rem 1rem;
  color: #A0AEC0;
}

.vide-icon-budget {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.table-budget {
  width: 100%;
  border-collapse: collapse;
}

.table-budget thead {
  background: #F7FAFC;
  border-radius: 8px;
}

.table-budget th {
  padding: 12px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-budget td {
  padding: 14px 12px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 0.9rem;
  color: #2D3748;
}

.table-budget tr:last-child td {
  border-bottom: none;
}

.montant-td-budget {
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.note-td-budget {
  color: #718096;
  font-size: 0.85rem;
  font-style: italic;
}

.badge-inactif-budget {
  opacity: 0.5;
}

.btn-action-budget {
  padding: 6px 12px;
  border: none;
  background: #EDF2F7;
  color: #4A5568;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: 6px;
  transition: all 0.2s;
}

.btn-action-budget:hover {
  background: #E2E8F0;
}

.btn-suppr-budget {
  background: #FED7D7;
  color: #C53030;
}

.btn-suppr-budget:hover {
  background: #FEB2B2;
}

.btn-toggle-budget {
  background: #FEEBC8;
  color: #C05621;
}

.btn-toggle-budget:hover {
  background: #FBD38D;
}

.synthese-grid-budget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.synthese-block-budget {
  background: white;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.synthese-block-budget h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: #2D3748;
}

.no-data-budget {
  text-align: center;
  padding: 2rem;
  color: #A0AEC0;
}

.bar-cat-budget {
  margin-bottom: 1rem;
}

.bar-cat-label-budget {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.bar-bg-budget {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill-budget {
  height: 100%;
  background: linear-gradient(90deg, #667EEA, #764BA2);
  border-radius: 4px;
  transition: width 0.3s;
}

.modal-overlay-budget {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-overlay-budget.open {
  display: flex;
}

.modal-budget {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-budget h3 {
  margin: 0 0 1.5rem;
  color: var(--bleu);
  font-size: 1.3rem;
}

.champ-budget {
  margin-bottom: 1rem;
}

.champ-budget label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D3748;
  margin-bottom: 6px;
}

.champ-budget input, .champ-budget select, .champ-budget textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CBD5E0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border 0.2s;
}

.champ-budget input:focus, .champ-budget select:focus, .champ-budget textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.modal-btns-budget {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.btn-annuler-budget {
  flex: 1;
  padding: 12px;
  border: 1px solid #CBD5E0;
  background: white;
  color: #4A5568;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-annuler-budget:hover {
  background: #F7FAFC;
}

.btn-valider-budget {
  flex: 1;
  padding: 12px;
  border: none;
  background: linear-gradient(135deg, #667EEA, #764BA2);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-valider-budget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

.badge-cat-budget {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #EDF2F7;
  color: #4A5568;
}

/* ── ANIMAUX (suffixe -animal) ───────────────────────────────────────────── */
.container-animal {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.carte-intro-animal {
  background: linear-gradient(135deg, #9F7AEA, #6B46C1);
  color: white;
  padding: 2rem;
  border-radius: 16px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(159,122,234,0.25);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.intro-ico-animal {
  font-size: 3rem;
}

.intro-txt-animal h2 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.intro-txt-animal p {
  margin: 0;
  opacity: 0.95;
  font-size: 0.95rem;
}

.onglets-animal {
  display: flex;
  gap: 8px;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #E2E8F0;
  overflow-x: auto;
}

.onglet-btn-animal {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #718096;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.onglet-btn-animal.actif {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}

.onglet-btn-animal:hover { color: var(--bleu); }

.onglet-panel-animal {
  display: none;
}

.onglet-panel-animal.active {
  display: block;
}

.btn-principal-animal {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-principal-animal.brun-animal {
  background: linear-gradient(135deg, #9F7AEA, #6B46C1);
  color: white;
}

.btn-principal-animal.brun-animal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(159,122,234,0.3);
}

.msg-vide-animal {
  text-align: center;
  padding: 3rem 1rem;
  color: #A0AEC0;
}

.msg-vide-animal .ico-animal {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.carte-animal {
  background: white;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}

.carte-animal:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.animal-header-animal {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.animal-ico-animal {
  font-size: 2.5rem;
}

.animal-nom-animal {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2D3748;
}

.animal-age-animal {
  background: #EDF2F7;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4A5568;
}

.animal-detail-animal {
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 1rem;
}

.alerte-confiance-animal {
  background: #FED7D7;
  color: #C53030;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.animal-bloc-info-animal {
  background: #F7FAFC;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  color: #2D3748;
  line-height: 1.6;
}

.animal-bloc-info-animal.garde-animal {
  background: #FFF5F5;
  border-left: 4px solid #F56565;
}

.animal-actions-animal {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.btn-action-animal {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modifier-animal {
  background: #EDF2F7;
  color: #4A5568;
}

.btn-modifier-animal:hover {
  background: #E2E8F0;
}

.btn-soins-animal {
  background: #C6F6D5;
  color: #22543D;
}

.btn-soins-animal:hover {
  background: #9AE6B4;
}

.btn-supprimer-animal {
  background: #FED7D7;
  color: #C53030;
}

.btn-supprimer-animal:hover {
  background: #FEB2B2;
}

.formulaire-animal {
  background: white;
  border-radius: 14px;
  padding: 2rem;
  margin-top: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none;
}

.formulaire-animal h2, .formulaire-animal h3 {
  margin: 0 0 1rem;
  color: var(--bleu);
}

.form-section-animal {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E2E8F0;
}

.form-section-animal:last-of-type {
  border-bottom: none;
}

.form-section-animal h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.champ-animal {
  margin-bottom: 1rem;
}

.champ-animal label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D3748;
  margin-bottom: 6px;
}

.champ-animal input, .champ-animal select, .champ-animal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CBD5E0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border 0.2s;
}

.champ-animal input:focus, .champ-animal select:focus, .champ-animal textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.form-btns-animal {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.btn-secondaire-animal {
  flex: 1;
  padding: 12px;
  border: 1px solid #CBD5E0;
  background: white;
  color: #4A5568;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondaire-animal:hover {
  background: #F7FAFC;
}

.carte-rappel-animal {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rappel-heure-animal {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bleu);
  min-width: 60px;
  text-align: center;
}

.rappel-corps-animal {
  flex: 1;
}

.rappel-corps-animal strong {
  display: block;
  font-size: 1rem;
  color: #2D3748;
  margin-bottom: 4px;
}

.badge-type-animal {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #EDF2F7;
  color: #4A5568;
  margin-right: 8px;
}

.sous-rappel-animal {
  font-size: 0.85rem;
  color: #718096;
  margin-top: 4px;
}

.modale-soins-animal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modale-soins-contenu-animal {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  position: relative;
}

.modale-fermer-animal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #A0AEC0;
  cursor: pointer;
  transition: color 0.2s;
}

.modale-fermer-animal:hover {
  color: #4A5568;
}

.carte-soin-animal {
  background: #F7FAFC;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  border-left: 4px solid #667EEA;
}

.soin-header-animal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2D3748;
}

.soin-date-animal {
  color: var(--bleu);
}

.soin-type-animal {
  color: #718096;
}

.soin-detail-animal {
  font-size: 0.9rem;
  color: #4A5568;
  margin-bottom: 4px;
}

.soin-notes-animal {
  color: #A0AEC0;
  font-style: italic;
}

.btn-soin-supprimer-animal {
  margin-top: 10px;
  padding: 6px 14px;
  background: #FED7D7;
  color: #C53030;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-soin-supprimer-animal:hover {
  background: #FEB2B2;
}

/* ── RESPONSIVE PAGES MIGRÉES ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .solde-banniere-budget {
    grid-template-columns: 1fr;
  }

  .mois-bar-budget {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-export-budget {
    margin-left: 0;
    width: 100%;
  }

  .synthese-grid-budget {
    grid-template-columns: 1fr;
  }

  .carte-intro-animal {
    flex-direction: column;
    text-align: center;
  }

  .animal-header-animal {
    flex-direction: column;
    text-align: center;
  }

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

  .btn-action-animal {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOT 1 - PAGES MIGRÉES (Accueil, Notifications, Paramètres, Dashboard, Véhicules)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ACCUEIL (suffixe -accueil) — Page marketing publique ───────────────── */

.header-accueil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
  border-left: 10px solid var(--primary);
  box-shadow: var(--shadow-lg);
}

.logo-accueil {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--primary);
  text-decoration: none;
}

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

.logo-text-accueil {
  color: #4A5568;
}

.logo-sub-accueil {
  font-size: 0.7rem;
  font-weight: 400;
  color: #718096;
}

.header-actions-accueil {
  display: flex;
  gap: 1rem;
}

.btn-accueil {
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.btn-outline-accueil {
  background: white;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-accueil:hover {
  background: var(--primary);
  color: white;
}

.btn-plein-accueil {
  background: var(--accent);
  color: white;
  border: none;
}

.btn-plein-accueil:hover {
  background: #DD6B20;
  transform: translateY(-2px);
}

.hero-accueil {
  text-align: center;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #EBF4FF 0%, #C3DAFE 100%);
}

.hero-accueil h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-accueil p {
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.btn-hero-accueil {
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
}

.section-titre-accueil {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin: 4rem 0 1rem;
}

.section-sous-accueil {
  text-align: center;
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 3rem;
}

.cards-accueil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.card-accueil {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--border);
  transition: all 0.3s;
}

.card-accueil:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-senior-accueil { border-top: 4px solid #805AD5; }
.card-famille-accueil { border-top: 4px solid #3182CE; }
.card-pro-accueil { border-top: 4px solid #276749; }

.card-icone-accueil {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.card-accueil h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
}

.desc-accueil {
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.card-accueil ul {
  list-style: none;
  margin: 1.5rem 0;
}

.card-accueil li {
  padding: 0.6rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text);
}

.card-accueil li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.btn-demo-accueil {
  display: block;
  text-align: center;
  padding: 0.9rem;
  margin-top: 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  color: white;
  transition: all 0.2s;
}

.btn-ds-accueil { background: #805AD5; }
.btn-ds-accueil:hover { background: #6B46C1; }
.btn-df-accueil { background: #3182CE; }
.btn-df-accueil:hover { background: #2B6CB0; }
.btn-dp-accueil { background: #276749; }
.btn-dp-accueil:hover { background: #22543D; }

.avantages-accueil {
  background: #F7FAFC;
  padding: 4rem 2rem;
  text-align: center;
}

.avantages-accueil h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 3rem;
}

.avantages-grid-accueil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.avantage-accueil {
  background: white;
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.avantage-icone-accueil {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.avantage-accueil h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.avantage-accueil p {
  color: var(--text-light);
  line-height: 1.5;
}

.cta-accueil {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  text-align: center;
  padding: 4rem 2rem;
}

.cta-accueil h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.cta-accueil p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}

.cta-actions-accueil {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-blanc-accueil, .btn-cta-outline-accueil {
  padding: 1rem 2rem;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cta-blanc-accueil {
  background: white;
  color: var(--primary);
  border: none;
}

.btn-cta-blanc-accueil:hover {
  background: #F7FAFC;
  transform: translateY(-3px);
}

.btn-cta-outline-accueil {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-cta-outline-accueil:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}

.footer-accueil {
  background: #2D3748;
  color: #A0AEC0;
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
}

.footer-accueil a {
  color: #63B3ED;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-accueil a:hover {
  color: #90CDF4;
}

@media (max-width: 768px) {
  .header-accueil {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .hero-accueil h1 {
    font-size: 1.8rem;
  }

  .hero-accueil p {
    font-size: 1rem;
  }

  .cards-accueil {
    grid-template-columns: 1fr;
  }

  .cta-actions-accueil {
    flex-direction: column;
    align-items: center;
  }

  .btn-cta-blanc-accueil, .btn-cta-outline-accueil {
    width: 100%;
    max-width: 320px;
  }
}

/* ── NOTIFICATIONS (suffixe -notif) ──────────────────────────────────────── */

.conteneur-notif {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.nav-notif {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
  border-left: 10px solid var(--primary);
  padding: 1.25rem 2.5rem;
  margin-bottom: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.titre-notif {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
}

.resume-notif {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.badge-resume-notif {
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.badge-urgent-notif {
  background: var(--danger);
}

.badge-attention-notif {
  background: var(--warning);
}

.badge-info-notif {
  background: var(--primary-light);
}

.liste-notif {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.notif-notif {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem;
  border-left: 4px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.2s;
}

.notif-notif:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-lg);
}

.notif-urgent {
  border-left-color: var(--danger);
}

.notif-attention {
  border-left-color: var(--warning);
}

.notif-info {
  border-left-color: var(--primary-light);
}

.notif-icone-notif {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.notif-corps-notif {
  flex: 1;
}

.notif-titre-notif {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.notif-message-notif {
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.notif-date-notif {
  font-size: 0.8rem;
  color: #A0AEC0;
}

.vide-notif {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-light);
}

/* ── PARAMÈTRES (suffixe -param) ─────────────────────────────────────────── */

.conteneur-param {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}

.titre-page-param {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 2rem;
}

.onglets-param {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.5rem;
}

.onglet-param {
  padding: 0.75rem 1.5rem;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-light);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
}

.onglet-param:hover {
  background: #F7FAFC;
  color: var(--primary);
}

.onglet-param.actif-param {
  background: var(--primary);
  color: white;
  border-bottom-color: var(--accent);
}

.section-param {
  display: none;
}

.section-param.visible-param {
  display: block;
}

.carte-param {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.carte-param h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.grille-param {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.champ-param {
  display: flex;
  flex-direction: column;
}

.champ-param label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.champ-param input,
.champ-param select,
.champ-param textarea {
  padding: 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.champ-param input:focus,
.champ-param select:focus,
.champ-param textarea:focus {
  outline: none;
  border-color: var(--primary-light);
}

.champ-param input:disabled,
.champ-param input[readonly] {
  background: #F7FAFC;
  color: #A0AEC0;
  cursor: not-allowed;
}

.zone-boutons-param {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-param {
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-principal-param {
  background: var(--primary);
  color: white;
}

.btn-principal-param:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

.btn-secondaire-param {
  background: #F7FAFC;
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-secondaire-param:hover {
  background: #EDF2F7;
}

.btn-danger-param {
  background: #FFF5F5;
  color: var(--danger);
  border: 1.5px solid #FEB2B2;
}

.btn-danger-param:hover {
  background: var(--danger);
  color: white;
}

.msg-param {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.succes-param {
  background: #F0FFF4;
  color: var(--success);
  border-left: 4px solid var(--success);
}

.erreur-param {
  background: #FFF5F5;
  color: var(--danger);
  border-left: 4px solid var(--danger);
}

.toggle-ligne-param {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  background: #F7FAFC;
  margin-bottom: 0.75rem;
}

.toggle-label-param strong {
  display: block;
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.toggle-label-param small {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
}

.toggle-param {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-param input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-param {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E0;
  transition: 0.3s;
  border-radius: 28px;
}

.toggle-slider-param:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-param input:checked + .toggle-slider-param {
  background-color: var(--success);
}

.toggle-param input:checked + .toggle-slider-param:before {
  transform: translateX(24px);
}

.connecteur-carte-param {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: #F7FAFC;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}

.connecteur-icone-param {
  font-size: 2rem;
  flex-shrink: 0;
}

.connecteur-info-param {
  flex: 1;
}

.connecteur-info-param strong {
  display: block;
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.connecteur-info-param small {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
}

.badge-connecte-param {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #F0FFF4;
  color: var(--success);
  border: 1px solid #9AE6B4;
}

.badge-deconnecte-param {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #F7FAFC;
  color: var(--text-light);
  border: 1px solid var(--border);
}

@media (max-width: 768px) {
  .onglets-param {
    flex-direction: column;
  }

  .onglet-param {
    width: 100%;
    text-align: left;
  }

  .grille-param {
    grid-template-columns: 1fr;
  }

  .toggle-ligne-param {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ── TABLEAU BORD AIDANT (suffixe -dashboard) ────────────────────────────── */

.conteneur-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.entete-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}

.titre-dashboard {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.sous-titre-dashboard {
  color: var(--text-light);
  font-size: 0.95rem;
}

.stats-dashboard {
  display: flex;
  gap: 2rem;
}

.stat-dashboard {
  text-align: center;
}

.stat-valeur-dashboard {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

.stat-alerte-dashboard .stat-valeur-dashboard {
  color: var(--danger);
}

.stat-label-dashboard {
  font-size: 0.8rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.filtres-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.filtres-groupe-dashboard {
  display: flex;
  gap: 0.5rem;
}

.filtre-btn-dashboard {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  background: white;
  color: var(--text-light);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.filtre-btn-dashboard:hover {
  background: #F7FAFC;
}

.filtre-btn-dashboard.actif-dashboard {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.search-dashboard {
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  min-width: 250px;
  transition: border-color 0.2s;
}

.search-dashboard:focus {
  outline: none;
  border-color: var(--primary-light);
}

.grille-dossiers-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.carte-dossier-dashboard {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 1rem;
  position: relative;
}

.carte-dossier-dashboard:hover {
  border-color: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.carte-dossier-dashboard.actif-dashboard {
  border-color: var(--primary);
  background: #EBF4FF;
}

.carte-avatar-dashboard {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.carte-contenu-dashboard {
  flex: 1;
}

.carte-nom-dashboard {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.carte-relation-dashboard {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.carte-indicateurs-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.indicateur-dashboard {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.indicateur-urgent-dashboard {
  background: #FFF5F5;
  color: var(--danger);
}

.indicateur-attention-dashboard {
  background: #FFFAF0;
  color: var(--warning);
}

.badge-actif-dashboard {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.btn-supprimer-dashboard {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #FFF5F5;
  border: 1px solid #FEB2B2;
  color: var(--danger);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.btn-supprimer-dashboard:hover {
  background: var(--danger);
  color: white;
}

.vide-dashboard {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-light);
  background: white;
  border-radius: var(--radius);
  border: 2px dashed var(--border);
}

.btn-ajouter-dashboard {
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ajouter-dashboard:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

.modal-overlay-dashboard {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-dashboard {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-header-dashboard h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}

.modal-close-dashboard {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — HOSPITALISATION.HTML (suffix: -hosp)
════════════════════════════════════════════════════════════════════════ */
.intro-box-hosp{background:linear-gradient(135deg,#EBF8FF,#F0FFF4);border:2px solid #90CDF4;border-radius:20px;padding:28px 26px;margin-bottom:28px;text-align:center;}
.intro-ico-hosp{font-size:3.2rem;margin-bottom:12px;}
.intro-box-hosp h1{font-family:'Montserrat',sans-serif;font-size:1.7rem;font-weight:800;color:var(--bleu);margin-bottom:10px;}
.intro-box-hosp p{color:#4A5568;line-height:1.7;font-size:1rem;}
.intro-box-hosp .rassurant-hosp{margin-top:16px;background:white;border-radius:12px;padding:14px 18px;font-size:0.92rem;color:var(--vert);border-left:4px solid var(--vert-clair);text-align:left;font-weight:600;}
.barre-prog-hosp{display:flex;align-items:center;gap:0;margin-bottom:32px;background:white;border-radius:16px;padding:16px 18px;border:1px solid var(--bordure);box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.prog-etape-hosp{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;}
.prog-etape-hosp:not(:last-child)::after{content:"";position:absolute;top:18px;left:calc(50% + 18px);right:calc(-50% + 18px);height:3px;background:var(--bordure);z-index:0;}
.prog-etape-hosp.fait-hosp:not(:last-child)::after{background:var(--vert-clair);}
.prog-cercle-hosp{width:36px;height:36px;border-radius:50%;border:3px solid var(--bordure);background:white;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--gris);z-index:1;transition:all 0.3s;flex-shrink:0;}
.prog-etape-hosp.actif-hosp .prog-cercle-hosp{border-color:var(--bleu-clair);background:var(--bleu-clair);color:white;}
.prog-etape-hosp.fait-hosp .prog-cercle-hosp{border-color:var(--vert);background:var(--vert);color:white;}
.prog-label-hosp{font-size:0.85rem;color:var(--gris);text-align:center;font-weight:600;line-height:1.2;max-width:80px;}
.prog-etape-hosp.actif-hosp .prog-label-hosp{color:var(--bleu-clair);}
.prog-etape-hosp.fait-hosp .prog-label-hosp{color:var(--vert);}
.etape-hosp{display:none;}
.etape-hosp.active-hosp{display:block;}
.etape-titre-hosp{font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:800;color:var(--bleu);margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.etape-sous-hosp{color:var(--gris);margin-bottom:22px;line-height:1.6;font-size:0.95rem;}
.checklist-hosp{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.checklist-hosp li{background:white;border:2px solid var(--bordure);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all 0.18s;font-size:0.97rem;line-height:1.4;}
.checklist-hosp li:hover{border-color:var(--bleu-clair);box-shadow:0 2px 8px rgba(49,130,206,0.1);}
.checklist-hosp li.coche-hosp{background:var(--vert-doux);border-color:var(--vert-clair);}
.checklist-hosp li .cb-hosp{width:28px;height:28px;border-radius:8px;border:2px solid var(--bordure);background:white;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.18s;}
.checklist-hosp li.coche-hosp .cb-hosp{background:var(--vert);border-color:var(--vert);color:white;}
.checklist-hosp li .item-ico-hosp{font-size:1.4rem;flex-shrink:0;}
.checklist-hosp li .item-txt-hosp{flex:1;}
.checklist-hosp li .item-nom-hosp{font-weight:600;color:#2D3748;}
.checklist-hosp li .item-detail-hosp{font-size:0.82rem;color:var(--gris);margin-top:2px;}
body.mode-accompagne-hosp .checklist-hosp li{font-size:1.15rem;padding:18px 20px;}
body.mode-accompagne-hosp .etape-titre-hosp{font-size:1.7rem;}
body.mode-accompagne-hosp .etape-sous-hosp{font-size:1rem;}
.compteur-hosp{display:inline-block;background:var(--bleu-doux);color:var(--bleu-clair);border-radius:20px;padding:4px 14px;font-size:0.85rem;font-weight:700;margin-bottom:18px;}
.compteur-hosp.complet-hosp{background:var(--vert-doux);color:var(--vert);}
.info-box-hosp{background:var(--bleu-doux);border:1px solid #90CDF4;border-radius:12px;padding:14px 18px;font-size:0.88rem;color:#2C5282;margin-bottom:18px;line-height:1.6;}
.info-box-hosp.vert-hosp{background:var(--vert-doux);border-color:#9AE6B4;color:#276749;}
.info-box-hosp.orange-hosp{background:var(--orange-doux);border-color:#FBD38D;color:#7B341E;}
.info-box-hosp.violet-hosp{background:var(--violet-doux);border-color:#D6BCFA;color:#44337A;}
.contact-btn-hosp{display:flex;align-items:center;gap:14px;background:white;border:2px solid var(--bordure);border-radius:16px;padding:16px 20px;margin-bottom:10px;cursor:pointer;text-decoration:none;transition:all 0.18s;width:100%;}
.contact-btn-hosp:hover{border-color:var(--bleu-clair);box-shadow:0 2px 8px rgba(49,130,206,0.12);}
.contact-btn-hosp .c-ico-hosp{font-size:2rem;flex-shrink:0;}
.contact-btn-hosp .c-txt-hosp{flex:1;text-align:left;}
.contact-btn-hosp .c-nom-hosp{font-weight:700;color:var(--bleu);font-size:1rem;}
.contact-btn-hosp .c-sous-hosp{font-size:0.82rem;color:var(--gris);}
.contact-btn-hosp .c-action-hosp{background:var(--bleu-clair);color:white;padding:8px 16px;border-radius:10px;font-weight:700;font-size:0.9rem;flex-shrink:0;}
.contact-btn-hosp.vert-btn-hosp .c-action-hosp{background:var(--vert);}
.contact-btn-hosp.appele-hosp{border-color:var(--vert-clair);background:var(--vert-doux);}
.animal-card-hosp{background:white;border:2px solid #FBD38D;border-radius:18px;padding:22px 24px;margin-bottom:16px;}
.animal-card-hosp .a-titre-hosp{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.2rem;color:var(--orange);margin-bottom:4px;display:flex;align-items:center;gap:10px;}
.animal-card-hosp .a-sous-hosp{color:var(--gris);font-size:0.88rem;margin-bottom:16px;}
.animal-card-hosp .a-infos-hosp{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:0.92rem;}
.animal-card-hosp .a-info-hosp{display:flex;gap:10px;align-items:flex-start;background:var(--orange-doux);border-radius:10px;padding:10px 14px;}
.animal-card-hosp .a-info-label-hosp{font-weight:600;color:#7B341E;min-width:120px;flex-shrink:0;}
.animal-card-hosp .a-info-val-hosp{color:#744210;}
.animal-no-hosp{background:var(--orange-doux);border:2px dashed #FBD38D;border-radius:16px;padding:20px;text-align:center;margin-bottom:16px;}
.animal-no-hosp p{color:#7B341E;margin-bottom:12px;font-size:0.95rem;line-height:1.6;}
.msg-urgence-hosp{background:#FFFAF0;border:2px solid #FBD38D;border-radius:14px;padding:18px;margin-top:14px;}
.msg-urgence-hosp h4{color:var(--orange);font-family:'Montserrat',sans-serif;font-size:0.95rem;margin-bottom:10px;}
.msg-urgence-hosp .texte-hosp{background:white;border:1px solid var(--bordure);border-radius:10px;padding:14px;font-size:0.88rem;color:#2D3748;line-height:1.8;white-space:pre-wrap;}
.btn-copier-hosp{margin-top:10px;padding:10px 18px;background:var(--orange);color:white;border:none;border-radius:10px;font-weight:700;font-size:0.9rem;cursor:pointer;font-family:'Inter',sans-serif;width:100%;}
.btn-copier-hosp:hover{background:#C05621;}
.secu-item-hosp{background:white;border:2px solid var(--bordure);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:10px;cursor:pointer;transition:all 0.18s;}
.secu-item-hosp:hover{border-color:#FC8181;}
.secu-item-hosp.verifie-hosp{background:#F0FFF4;border-color:var(--vert-clair);}
.secu-item-hosp .s-ico-hosp{font-size:1.8rem;flex-shrink:0;}
.secu-item-hosp .s-txt-hosp{flex:1;}
.secu-item-hosp .s-nom-hosp{font-weight:700;font-size:1rem;color:#2D3748;}
.secu-item-hosp .s-detail-hosp{font-size:0.83rem;color:var(--gris);margin-top:2px;}
.secu-item-hosp .s-cb-hosp{width:28px;height:28px;border-radius:8px;border:2px solid var(--bordure);background:white;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.secu-item-hosp.verifie-hosp .s-cb-hosp{background:var(--vert);border-color:var(--vert);color:white;}
.fin-box-hosp{background:linear-gradient(135deg,#F0FFF4,#EBF8FF);border:3px solid var(--vert-clair);border-radius:24px;padding:32px;text-align:center;}
.fin-ico-hosp{font-size:4rem;margin-bottom:16px;}
.fin-box-hosp h2{font-family:'Montserrat',sans-serif;font-size:1.6rem;color:var(--vert);margin-bottom:12px;}
.fin-box-hosp p{color:#4A5568;line-height:1.7;font-size:1rem;margin-bottom:8px;}
.fin-box-hosp .num-urgence-hosp{display:inline-block;background:white;border:2px solid var(--bordure);border-radius:16px;padding:10px 20px;margin:12px 6px 0;font-weight:700;color:var(--bleu);font-size:1.05rem;}
.nav-btns-hosp{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.btn-suivant-hosp{flex:1;padding:16px 22px;background:var(--bleu);color:white;border:none;border-radius:16px;font-weight:700;font-size:1.05rem;cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.18s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-suivant-hosp:hover{background:#2c4f7a;}
.btn-suivant-hosp:disabled{background:#CBD5E0;cursor:default;}
.btn-precedent-hosp{padding:16px 20px;background:white;color:var(--gris);border:2px solid var(--bordure);border-radius:16px;font-weight:700;font-size:1rem;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.18s;}
.btn-precedent-hosp:hover{border-color:var(--bleu-clair);color:var(--bleu-clair);}
.btn-imprimer-hosp{width:100%;padding:14px;background:white;color:var(--bleu);border:2px solid var(--bleu);border-radius:14px;font-weight:700;font-size:1rem;cursor:pointer;font-family:'Inter',sans-serif;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-imprimer-hosp:hover{background:var(--bleu-doux);}
.btn-vue-aidant-hosp{display:flex;align-items:center;gap:10px;background:var(--violet-doux);color:var(--violet);border:2px solid #D6BCFA;border-radius:14px;padding:12px 18px;font-weight:700;font-size:0.9rem;cursor:pointer;font-family:'Inter',sans-serif;margin-bottom:24px;width:100%;justify-content:center;transition:all 0.18s;}
.btn-vue-aidant-hosp:hover{background:#E9D8FD;}
.vue-aidant-hosp{background:var(--violet-doux);border:2px solid #D6BCFA;border-radius:18px;padding:24px;margin-bottom:24px;display:none;}
.vue-aidant-hosp.visible-hosp{display:block;}
.vue-aidant-hosp h3{font-family:'Montserrat',sans-serif;color:var(--violet);font-size:1.05rem;margin-bottom:14px;}
.aidant-check-hosp{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #E9D8FD;font-size:0.9rem;color:#44337A;}
.aidant-check-hosp:last-child{border-bottom:none;}
.aidant-check-hosp input[type=checkbox]{width:20px;height:20px;accent-color:var(--violet);cursor:pointer;}
.note-aidant-hosp{background:var(--violet-doux);border-left:4px solid var(--violet);border-radius:0 12px 12px 0;padding:12px 16px;font-size:0.85rem;color:#44337A;margin-top:14px;line-height:1.6;}
.note-aidant-hosp::before{content:"🔑 Note aidant : ";font-weight:700;}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — VIE_AUTONOME.HTML (suffix: -vie)
════════════════════════════════════════════════════════════════════════ */
:root{--doux-bleu-vie:#5c8db5;--doux-vert-vie:#6da87e;--doux-orange-vie:#d4915e;--doux-rose-vie:#c27878;--doux-violet-vie:#8e7cc3;--fond-vie:#f7f5f2;--fond-carte-vie:#ffffff;--texte-vie:#3a3a3a;--texte-clair-vie:#777;--bord-vie:#e5e0da;--sos-rouge-vie:#d9534f;}
.page-header-vie{background:linear-gradient(135deg,var(--doux-bleu-vie),var(--doux-violet-vie));color:white;padding:1.4rem 2rem;display:flex;align-items:center;gap:1rem;}
.page-header-titre-vie h1{margin:0;font-family:'Montserrat',sans-serif;font-size:1.75rem;font-weight:700;color:#ffffff;}
.page-header-titre-vie p{margin:0.2rem 0 0;font-size:0.95rem;opacity:0.9;color:#ffffff;}
.onglets-vie{display:flex;overflow-x:auto;gap:.4rem;padding:.8rem 1rem;background:white;border-bottom:1px solid var(--bord-vie);-webkit-overflow-scrolling:touch;}
.onglet-vie{flex-shrink:0;padding:.6rem 1rem;border-radius:20px;background:#f0ede8;border:none;font-size:.82rem;cursor:pointer;color:var(--texte-vie);transition:all .2s;white-space:nowrap;}
.onglet-vie.actif-vie{background:var(--doux-bleu-vie);color:white;}
.contenu-vie{padding:1rem;max-width:800px;margin:0 auto;}
.panneau-vie{display:none;}
.panneau-vie.visible-vie{display:block;}
.carte-vie{background:var(--fond-carte-vie);border-radius:14px;padding:1rem 1.2rem;margin-bottom:.8rem;box-shadow:0 1px 4px rgba(0,0,0,.06);border-left:4px solid var(--doux-bleu-vie);}
.carte-vie h3{margin:0 0 .5rem;font-size:1rem;}
.bloc-journee-vie{margin-bottom:1.2rem;}
.bloc-titre-vie{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;margin-bottom:.5rem;padding:.4rem 0;border-bottom:2px solid var(--bord-vie);}
.routine-item-vie{display:flex;flex-direction:column;gap:0;padding:0;background:var(--fond-carte-vie);border-radius:14px;margin-bottom:.7rem;box-shadow:0 2px 8px rgba(0,0,0,.07);border:2px solid var(--bord-vie);overflow:hidden;}
.routine-item-heure-vie{display:flex;align-items:center;justify-content:space-between;background:var(--doux-bleu-vie);color:white;padding:.55rem 1rem;font-size:1.25rem;font-weight:800;letter-spacing:.03em;font-family:'Montserrat',sans-serif;}
.routine-item-heure-vie.sans-heure-vie{background:#e9ecef;color:#777;font-size:.78rem;font-weight:500;padding:.3rem 1rem;}
.routine-item-heure-vie .heure-fleche-vie{font-size:1rem;font-weight:400;opacity:.85;}
.routine-item-corps-vie{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;}
.routine-item-corps-vie .icone-vie{font-size:1.7rem;flex-shrink:0;}
.routine-item-corps-vie .titre-vie{flex:1;font-size:1.05rem;font-weight:600;color:var(--texte-vie);}
.routine-actions-vie{display:flex;gap:.3rem;}
.routine-actions-vie button{background:none;border:none;cursor:pointer;font-size:1rem;padding:.2rem;border-radius:6px;transition:background .2s;}
.routine-actions-vie button:hover{background:#eee;}
.tache-item-vie{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;background:var(--fond-vie);border-radius:10px;margin-bottom:.4rem;}
.tache-item-vie input[type="checkbox"]{width:20px;height:20px;accent-color:var(--doux-vert-vie);cursor:pointer;}
.tache-item-vie.fait-vie .tache-texte-vie{text-decoration:line-through;color:var(--texte-clair-vie);}
.badge-type-vie{font-size:.7rem;padding:.15rem .45rem;border-radius:8px;font-weight:600;}
.badge-vitale-vie{background:#fce4e4;color:#c0392b;}
.badge-admin-vie{background:#fef5e7;color:#e67e22;}
.badge-pratique-vie{background:#e8f5e9;color:#2e7d32;}
.humeur-btns-vie{display:flex;gap:.8rem;justify-content:center;margin:1rem 0;}
.humeur-btn-vie{font-size:2.2rem;background:none;border:3px solid transparent;border-radius:50%;width:64px;height:64px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.humeur-btn-vie.selected-vie{border-color:var(--doux-bleu-vie);background:#e8f0f8;transform:scale(1.15);}
.humeur-historique-vie{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem;}
.humeur-dot-vie{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;cursor:default;position:relative;}
.humeur-dot-vie[title]:hover::after{content:attr(title);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#333;color:white;padding:2px 8px;border-radius:6px;font-size:.7rem;white-space:nowrap;}
.btn-sos-vie{position:fixed;bottom:1.2rem;right:1.2rem;z-index:1000;width:64px;height:64px;border-radius:50%;border:none;background:var(--sos-rouge-vie);color:white;font-size:1.6rem;box-shadow:0 4px 16px rgba(217,83,79,.4);cursor:pointer;transition:transform .2s;}
.btn-sos-vie:hover{transform:scale(1.1);}
.modal-overlay-vie{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;justify-content:center;align-items:center;}
.modal-overlay-vie.visible-vie{display:flex;}
.modal-sos-vie{background:white;border-radius:20px;padding:2rem 1.5rem;max-width:400px;width:90%;text-align:center;}
.modal-sos-vie h2{margin:0 0 1rem;color:var(--sos-rouge-vie);}
.sos-action-vie{display:block;width:100%;padding:1rem;margin-bottom:.7rem;border:none;border-radius:12px;font-size:1.1rem;cursor:pointer;font-weight:600;transition:transform .1s;}
.sos-action-vie:active{transform:scale(.97);}
.sos-calmer-vie{background:#e8f5e9;color:#2e7d32;}
.sos-appeler-vie{background:#e3f2fd;color:#1565c0;}
.sos-fermer-vie{background:#f5f5f5;color:#616161;}
.methode-calme-vie{background:var(--fond-carte-vie);border-radius:14px;padding:1.2rem;margin-bottom:.8rem;cursor:pointer;border:2px solid var(--bord-vie);transition:border-color .2s;}
.methode-calme-vie:hover{border-color:var(--doux-bleu-vie);}
.methode-calme-vie h4{margin:0 0 .3rem;}
.methode-calme-vie p{margin:0;color:var(--texte-clair-vie);font-size:.85rem;}
.cercle-respiration-vie{width:140px;height:140px;border-radius:50%;margin:1.5rem auto;background:radial-gradient(circle,#a8d8ea 0%,#5c8db5 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;font-weight:600;transition:transform 4s ease-in-out;}
.cercle-respiration-vie.inspirer-vie{transform:scale(1.4);}
.cercle-respiration-vie.expirer-vie{transform:scale(.8);}
.cercle-respiration-vie.bloquer-vie{transform:scale(1.1);}
.contact-confiance-vie{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--fond-vie);border-radius:12px;margin-bottom:.5rem;}
.contact-confiance-vie .avatar-vie{font-size:1.8rem;}
.contact-confiance-vie .info-vie{flex:1;}
.contact-confiance-vie .nom-vie{font-weight:600;}
.contact-confiance-vie .relation-vie{font-size:.82rem;color:var(--texte-clair-vie);}
.btn-appeler-vie{background:var(--doux-vert-vie);color:white;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.85rem;}
.fiche-section-vie{margin-bottom:1rem;}
.fiche-section-vie h4{margin:0 0 .4rem;font-size:.9rem;color:var(--doux-bleu-vie);}
.fiche-liste-vie{padding-left:1.2rem;margin:0;}
.fiche-liste-vie li{margin-bottom:.3rem;font-size:.9rem;}
.btn-vie{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:none;border-radius:10px;font-size:.85rem;cursor:pointer;font-weight:500;transition:opacity .2s;}
.btn-vie:hover{opacity:.85;}
.btn-primary-vie{background:var(--doux-bleu-vie);color:white;}
.btn-success-vie{background:var(--doux-vert-vie);color:white;}
.btn-danger-vie{background:var(--doux-rose-vie);color:white;}
.btn-outline-vie{background:none;border:2px solid var(--bord-vie);color:var(--texte-vie);}
.form-group-vie{margin-bottom:.8rem;}
.form-group-vie label{display:block;margin-bottom:.3rem;font-size:.85rem;font-weight:500;}
.form-group-vie input,.form-group-vie select,.form-group-vie textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--bord-vie);border-radius:8px;font-size:.9rem;box-sizing:border-box;font-family:inherit;}
.form-group-vie textarea{resize:vertical;min-height:60px;}
.energie-toggle-vie{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:#fef9e7;border-radius:10px;margin-bottom:1rem;font-size:.85rem;}
.energie-toggle-vie input[type="checkbox"]{width:18px;height:18px;}
body.energie-basse-vie .routine-item-vie:nth-child(n+3){display:none;}
body.energie-basse-vie .tache-item-vie[data-type="pratique"]{display:none;}
body.energie-basse-vie .onglet-vie:nth-child(n+5){display:none;}
.ecran-noir-vie{display:none;position:fixed;inset:0;background:#1a1a2e;z-index:3000;justify-content:center;align-items:center;flex-direction:column;color:rgba(255,255,255,.6);}
.ecran-noir-vie.visible-vie{display:flex;}
.ecran-noir-vie p{font-size:1.2rem;margin:1rem 0;text-align:center;}
.ecran-noir-vie button{margin-top:2rem;padding:.8rem 2rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.7);border-radius:10px;font-size:1rem;cursor:pointer;}
.routine-item-vie.fait-vie{opacity:.55;text-decoration:line-through;}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — IMPAYES.HTML (suffix: -impaye)
════════════════════════════════════════════════════════════════════════ */
.page-impaye{max-width:1000px;margin:40px auto;padding:0 20px;}
.page-impaye h1{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.8rem;margin-bottom:6px;}
.sous-titre-impaye{color:var(--gris);margin-bottom:30px;}
.resume-impaye{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:32px;}
.stat-carte-impaye{background:var(--blanc);border-radius:14px;padding:20px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.05);border-left:4px solid var(--bordure);}
.stat-carte-impaye.rouge-impaye{border-left-color:var(--rouge);}
.stat-carte-impaye.vert-impaye{border-left-color:var(--vert);}
.stat-carte-impaye.orange-impaye{border-left-color:var(--orange);}
.stat-carte-impaye .chiffre-impaye{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:700;}
.stat-carte-impaye.rouge-impaye .chiffre-impaye{color:var(--rouge);}
.stat-carte-impaye.vert-impaye .chiffre-impaye{color:var(--vert);}
.stat-carte-impaye.orange-impaye .chiffre-impaye{color:var(--orange);}
.stat-carte-impaye .label-impaye{font-size:0.9rem;color:var(--gris);margin-top:4px;}
.formulaire-impaye{background:var(--blanc);border-radius:14px;padding:24px;margin-bottom:28px;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.formulaire-impaye h2{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.1rem;margin-bottom:16px;}
.champs-impaye{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.champ-impaye label{display:block;font-size:0.85rem;font-weight:600;color:var(--gris);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.4px;}
.champ-impaye input,.champ-impaye select{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--bordure);font-size:1rem;font-family:'Inter',sans-serif;background:var(--fond);}
.champ-impaye input:focus,.champ-impaye select:focus{outline:none;border-color:var(--bleu-clair);background:white;}
.btn-ajouter-impaye{margin-top:16px;padding:12px 28px;background:var(--rouge);color:white;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-ajouter-impaye:hover{background:#c53030;}
.section-titre-impaye{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.liste-impaye{display:flex;flex-direction:column;gap:12px;}
.carte-impaye{background:var(--blanc);border-radius:14px;border-left:5px solid var(--rouge);padding:18px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 10px rgba(0,0,0,0.04);}
.carte-impaye.paye-impaye{border-left-color:var(--vert);opacity:0.7;}
.carte-impaye.en_attente-impaye{border-left-color:var(--orange);}
.impaye-icone{font-size:2rem;flex-shrink:0;}
.impaye-info{flex:1;}
.impaye-info .fournisseur-impaye{font-weight:600;font-size:1.05rem;color:var(--bleu);}
.impaye-info .details-impaye{font-size:0.9rem;color:var(--gris);margin-top:2px;}
.montant-impaye{font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:700;color:var(--rouge);min-width:100px;text-align:right;}
.carte-impaye.paye-impaye .montant-impaye{color:var(--vert);}
.badge-statut-impaye{font-size:0.8rem;padding:4px 12px;border-radius:12px;font-weight:600;white-space:nowrap;}
.badge-impaye{background:#FFF5F5;color:var(--rouge);border:1px solid #FEB2B2;}
.badge-paye-impaye{background:#F0FFF4;color:var(--vert);border:1px solid #9AE6B4;}
.badge-attente-impaye{background:#FFFAF0;color:var(--orange);border:1px solid #FBD38D;}
.actions-impaye{display:flex;flex-direction:column;gap:6px;}
.btn-payer-impaye{padding:8px 16px;background:var(--vert);color:white;border:none;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;font-family:'Inter',sans-serif;}
.btn-payer-impaye:hover{background:#2f855a;}
.btn-supprimer-impaye{padding:8px 16px;background:white;color:var(--gris);border:1px solid var(--bordure);border-radius:8px;cursor:pointer;font-size:0.85rem;font-family:'Inter',sans-serif;}
.btn-supprimer-impaye:hover{background:#FFF5F5;color:var(--rouge);border-color:#FEB2B2;}
.vide-impaye{text-align:center;padding:50px;color:var(--gris);}
.vide-impaye .vide-icone-impaye{font-size:3rem;margin-bottom:12px;}
.filtres-impaye{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.btn-filtre-impaye{padding:8px 18px;border-radius:20px;border:1px solid var(--bordure);background:var(--blanc);cursor:pointer;font-size:0.9rem;font-family:'Inter',sans-serif;color:var(--gris);}
.btn-filtre-impaye.actif-impaye{background:var(--bleu);color:white;border-color:var(--bleu);}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — DOSSIER_VIE.HTML (suffix: -dossier)
════════════════════════════════════════════════════════════════════════ */
.page-dossier{max-width:960px;margin:32px auto;padding:0 20px;}
.page-titre-dossier{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.7rem;margin-bottom:6px;}
.page-sous-titre-dossier{color:var(--gris);margin-bottom:28px;}
.section-dossier{background:var(--blanc);border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,0.05);margin-bottom:20px;overflow:hidden;}
.section-entete-dossier{display:flex;align-items:center;gap:12px;padding:16px 24px;background:var(--bleu);color:white;cursor:pointer;user-select:none;}
.section-entete-dossier:hover{background:#2c4a7a;}
.section-entete-dossier .icone-dossier{font-size:1.4rem;}
.section-entete-dossier h2{font-family:'Montserrat',sans-serif;font-size:1.05rem;flex:1;}
.section-entete-dossier .fleche-dossier{font-size:1rem;transition:transform 0.3s;}
.section-entete-dossier.ouvert-dossier .fleche-dossier{transform:rotate(180deg);}
.btn-modifier-section-dossier{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:white;border-radius:8px;padding:5px 12px;font-size:0.82rem;cursor:pointer;font-weight:600;transition:background 0.15s;white-space:nowrap;}
.btn-modifier-section-dossier:hover{background:rgba(255,255,255,0.35);}
.section-corps-dossier{padding:24px;display:none;}
.section-corps-dossier.visible-dossier{display:block;}
.grille-dossier{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.champ-dossier{display:flex;flex-direction:column;gap:5px;}
.champ-dossier label{font-size:0.78rem;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:0.5px;}
.champ-dossier .valeur-dossier{font-size:1rem;color:#2D3748;padding:9px 13px;background:var(--fond);border-radius:8px;border:1px solid var(--bordure);min-height:40px;}
.champ-dossier .valeur-dossier.vide-dossier{color:var(--gris);font-style:italic;}
.tags-dossier{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.tag-dossier{background:#EBF8FF;color:var(--bleu-clair);border:1px solid #BEE3F8;border-radius:20px;padding:3px 12px;font-size:0.88rem;display:flex;align-items:center;gap:6px;}
.tag-dossier.alerte-dossier{background:#FFF5F5;color:var(--rouge);border-color:#FEB2B2;}
.tag-dossier .tag-suppr-dossier{background:none;border:none;cursor:pointer;color:inherit;font-size:0.9rem;padding:0;line-height:1;opacity:0.7;}
.tag-dossier .tag-suppr-dossier:hover{opacity:1;}
.liste-contacts-dossier{display:flex;flex-direction:column;gap:12px;}
.contact-carte-dossier{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:var(--fond);border-radius:12px;border:1px solid var(--bordure);}
.contact-avatar-dossier{width:44px;height:44px;border-radius:50%;background:var(--bleu-clair);color:white;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.contact-info-dossier{flex:1;}
.contact-info-dossier strong{display:block;font-size:1rem;color:var(--bleu);}
.contact-info-dossier .relation-dossier{font-size:0.83rem;color:var(--gris);margin-bottom:3px;}
.contact-info-dossier .tel-dossier{font-size:0.95rem;color:var(--bleu-clair);}
.badge-prio-dossier{font-size:0.75rem;padding:3px 10px;border-radius:12px;background:#F0FFF4;color:var(--vert);border:1px solid #9AE6B4;white-space:nowrap;}
.badge-prio-dossier.urgent-dossier{background:#FFF5F5;color:var(--rouge);border-color:#FEB2B2;}
.contact-actions-dossier{display:flex;gap:6px;margin-top:8px;}
.btn-mini-dossier{border:1px solid var(--bordure);background:white;border-radius:6px;padding:3px 9px;font-size:0.8rem;cursor:pointer;}
.btn-mini-dossier:hover{background:var(--fond);}
.btn-mini-dossier.rouge-dossier{color:var(--rouge);border-color:#FEB2B2;}
.btn-mini-dossier.rouge-dossier:hover{background:#FFF5F5;}
.liste-notes-dossier{display:flex;flex-direction:column;gap:10px;}
.note-carte-dossier{padding:14px 18px;border-radius:12px;border-left:4px solid var(--bleu-clair);background:#EBF8FF;position:relative;}
.note-carte-dossier.urgent-dossier{border-left-color:var(--rouge);background:#FFF5F5;}
.note-carte-dossier strong{display:block;margin-bottom:3px;color:var(--bleu);}
.note-carte-dossier .date-rappel-dossier{font-size:0.82rem;color:var(--gris);margin-top:5px;}
.note-suppr-dossier{position:absolute;top:10px;right:12px;background:none;border:none;cursor:pointer;color:var(--gris);font-size:1rem;}
.note-suppr-dossier:hover{color:var(--rouge);}
.tag-input-zone-dossier{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1.5px solid #CBD5E0;border-radius:10px;background:white;cursor:text;min-height:44px;align-items:center;}
.tag-input-zone-dossier input{border:none;outline:none;font-size:0.95rem;font-family:'Inter',sans-serif;min-width:120px;flex:1;padding:2px 4px;}
.tag-in-dossier{background:#EBF8FF;color:var(--bleu-clair);border:1px solid #BEE3F8;border-radius:16px;padding:2px 10px;font-size:0.85rem;display:flex;align-items:center;gap:5px;}
.tag-in-dossier.rouge-dossier{background:#FFF5F5;color:var(--rouge);border-color:#FEB2B2;}
.tag-in-dossier button{background:none;border:none;cursor:pointer;color:inherit;font-size:0.85rem;padding:0;opacity:0.7;line-height:1;}
.tag-in-dossier button:hover{opacity:1;}
.cp-toolbar-dossier{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.cp-filtres-dossier{display:flex;gap:6px;flex-wrap:wrap;}
.cp-filtre-btn-dossier{border:1.5px solid var(--bordure);background:white;border-radius:20px;padding:4px 12px;font-size:0.8rem;font-weight:600;cursor:pointer;color:var(--gris);transition:all 0.15s;}
.cp-filtre-btn-dossier.actif-dossier,.cp-filtre-btn-dossier:hover{background:var(--bleu);color:white;border-color:var(--bleu);}
.btn-ajouter-cp-dossier{background:var(--bleu-clair);color:white;border:none;border-radius:9px;padding:8px 16px;font-size:0.88rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.btn-ajouter-cp-dossier:hover{background:#2B6CB0;}
.cp-grille-dossier{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;}
.cp-carte-dossier{background:white;border-radius:13px;border:1.5px solid var(--bordure);padding:14px 16px;transition:box-shadow 0.15s,border-color 0.15s;}
.cp-carte-dossier:hover{box-shadow:0 4px 14px rgba(49,130,206,0.1);border-color:var(--bleu-clair);}
.cp-carte-dossier.favori-dossier{border-color:#D69E2E;background:#FFFFF0;}
.cp-carte-head-dossier{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.cp-avatar-dossier{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.cp-info-dossier{flex:1;min-width:0;}
.cp-info-dossier strong{display:block;font-size:0.97rem;color:var(--bleu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-info-dossier .cp-type-dossier{font-size:0.78rem;color:var(--gris);}
.cp-info-dossier .cp-org-dossier{font-size:0.8rem;color:#4A5568;font-weight:600;}
.cp-badge-cat-dossier{display:inline-block;padding:2px 9px;border-radius:10px;font-size:0.72rem;font-weight:700;margin-bottom:8px;}
.cat-ref-dossier{background:#EBF8FF;color:#2B6CB0;}
.cat-dom-dossier{background:#F0FFF4;color:#276749;}
.cat-etab-dossier{background:#FEEBC8;color:#7B341E;}
.cat-sante-dossier{background:#FED7E2;color:#97266D;}
.cat-adm-dossier{background:#E9D8FD;color:#553C9A;}
.cat-hand-dossier{background:#BEE3F8;color:#2C5282;}
.cat-jur-dossier{background:#E2E8F0;color:#2D3748;}
.cat-autre-dossier{background:#EDF2F7;color:#4A5568;}
.cp-tel-dossier a{color:var(--bleu-clair);font-size:0.95rem;font-weight:600;text-decoration:none;}
.cp-tel-dossier a:hover{text-decoration:underline;}
.btn-appel-dossier{background:var(--vert);color:white;border:none;border-radius:6px;padding:2px 9px;font-size:0.78rem;cursor:pointer;margin-left:6px;}
.cp-notes-dossier{font-size:0.8rem;color:var(--gris);margin-top:6px;font-style:italic;}
.cp-actions-dossier{display:flex;gap:5px;margin-top:10px;padding-top:8px;border-top:1px solid var(--bordure);}
.cp-btn-action-dossier{border:1px solid var(--bordure);background:white;border-radius:6px;padding:3px 9px;font-size:0.8rem;cursor:pointer;}
.cp-btn-action-dossier:hover{background:var(--fond);}
.cp-btn-suppr-dossier{color:var(--rouge);border-color:#FEB2B2;}
.cp-btn-suppr-dossier:hover{background:#FFF5F5;}
.cp-suggestions-dossier{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.cp-suggestion-dossier{border:1.5px dashed #CBD5E0;background:var(--fond);border-radius:7px;padding:5px 12px;font-size:0.8rem;cursor:pointer;color:#4A5568;}
.cp-suggestion-dossier:hover{border-color:var(--bleu-clair);color:var(--bleu);background:#EBF4FF;}
.modal-overlay-dossier{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.modal-overlay-dossier.open-dossier{display:flex;}
.modal-dossier{background:white;border-radius:18px;padding:28px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.modal-dossier h3{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.1rem;margin-bottom:18px;}
.m-champ-dossier{margin-bottom:14px;}
.m-champ-dossier label{display:block;font-size:0.82rem;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:5px;}
.m-champ-dossier input,.m-champ-dossier select,.m-champ-dossier textarea{width:100%;border:1.5px solid #CBD5E0;border-radius:9px;padding:10px 13px;font-size:0.97rem;color:#2D3748;font-family:'Inter',sans-serif;background:white;transition:border-color 0.15s;}
.m-champ-dossier input:focus,.m-champ-dossier select:focus,.m-champ-dossier textarea:focus{outline:none;border-color:var(--bleu-clair);}
.m-grille-2-dossier{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-btns-dossier{display:flex;gap:10px;margin-top:20px;}
.btn-valider-dossier{flex:1;background:var(--bleu);color:white;border:none;border-radius:10px;padding:12px;font-size:0.97rem;font-weight:700;cursor:pointer;font-family:'Montserrat',sans-serif;}
.btn-valider-dossier:hover{background:#2B4C7E;}
.btn-annuler-dossier{flex:1;background:#EDF2F7;color:#4A5568;border:none;border-radius:10px;padding:12px;font-size:0.97rem;font-weight:600;cursor:pointer;font-family:'Montserrat',sans-serif;}
.btn-annuler-dossier:hover{background:#E2E8F0;}
.btn-retour-dossier{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:var(--bleu-clair);text-decoration:none;font-weight:600;}
.btn-retour-dossier:hover{color:var(--bleu);}
.chargement-dossier{text-align:center;padding:60px;color:var(--gris);font-size:1.1rem;}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — VOLONTES.HTML (suffix: -volonte)
════════════════════════════════════════════════════════════════════════ */
.ecran-pin-volonte{position:fixed;inset:0;background:linear-gradient(160deg,#1A365D 0%,#2C5282 100%);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;}
.pin-conteneur-volonte{background:white;border-radius:24px;padding:44px 40px;max-width:420px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,0.4);}
.pin-conteneur-volonte h1{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.4rem;margin-bottom:10px;}
.pin-conteneur-volonte p{color:var(--gris);font-size:0.95rem;margin-bottom:28px;line-height:1.6;}
.btn-verif-pin-volonte{width:100%;padding:14px;background:var(--bleu-clair);color:white;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;margin:24px 0 12px;}
.btn-verif-pin-volonte:hover{background:var(--bleu);}
.pin-erreur-volonte{color:var(--rouge);font-size:0.9rem;margin-top:10px;min-height:20px;}
.btn-retour-pin-volonte{color:var(--gris);font-size:0.85rem;cursor:pointer;text-decoration:underline;margin-top:16px;background:none;border:none;padding:0;}
.page-volonte{max-width:900px;margin:0 auto;padding:36px 20px 60px;display:none;}
.page-volonte.visible-volonte{display:block;}
.titre-page-volonte{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.8rem;margin-bottom:6px;}
.sous-titre-page-volonte{color:var(--gris);margin-bottom:28px;font-size:0.98rem;}
.tabs-volonte{display:flex;gap:4px;background:var(--bordure);border-radius:14px;padding:5px;margin-bottom:28px;flex-wrap:wrap;}
.tab-btn-volonte{flex:1;min-width:110px;padding:11px 12px;border-radius:10px;text-align:center;cursor:pointer;font-weight:600;font-size:0.88rem;color:var(--gris);transition:all 0.2s;border:none;background:none;font-family:'Inter',sans-serif;white-space:nowrap;}
.tab-btn-volonte.actif-volonte{background:white;color:var(--bleu);box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tab-btn-volonte:hover:not(.actif-volonte){color:var(--bleu-clair);}
.contenu-principal-volonte{display:none;}
.section-volonte{background:white;border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,0.05);padding:26px;margin-bottom:20px;}
.section-volonte h2{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1.05rem;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.section-volonte h3{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:0.95rem;margin:20px 0 10px;}
.section-volonte textarea{width:100%;border:1.5px solid var(--bordure);border-radius:9px;padding:11px 14px;font-size:1rem;font-family:'Inter',sans-serif;background:#FAFAFA;transition:border-color 0.2s;resize:vertical;}
.section-volonte textarea:focus{outline:none;border-color:var(--bleu-clair);background:white;}
.btn-sauv-volonte{background:var(--bleu-clair);color:white;border:none;border-radius:9px;padding:11px 24px;font-size:0.95rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-sauv-volonte:hover{background:var(--bleu);}
.alerte-volonte{background:#F0FFF4;border:1px solid #9AE6B4;border-radius:10px;padding:14px 16px;font-size:0.88rem;color:#276749;margin-bottom:18px;line-height:1.5;}
.alerte-volonte strong{display:block;margin-bottom:6px;}
.alerte-volonte a{color:#276749;text-decoration:underline;}
.liste-demarches-volonte{list-style:none;padding:0;}
.liste-demarches-volonte li{padding:10px 0;border-bottom:1px solid var(--bordure);color:#2D3748;font-size:0.92rem;line-height:1.6;}
.liste-demarches-volonte li:last-child{border-bottom:none;}
.status-chiffrement-volonte{background:#EBF8FF;border:1px solid #BEE3F8;border-radius:10px;padding:14px 16px;font-size:0.88rem;color:#2C5282;line-height:1.7;}

/* ════════════════════════════════════════════════════════════════════════
   LOT 2 CSS — SOUVENIRS.HTML (suffix: -souvenir)
════════════════════════════════════════════════════════════════════════ */
.page-souvenir{max-width:860px;margin:0 auto;padding:1.5rem;}
.titre-page-souvenir{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:800;color:var(--bleu);margin-bottom:6px;}
.sous-titre-page-souvenir{color:var(--gris);margin-bottom:28px;}
.tabs-souvenir{display:flex;background:white;border-bottom:2px solid var(--bordure);overflow:hidden;position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,0.05);}
.tab-btn-souvenir{flex:1;padding:0.7rem 0.5rem;font-size:0.88rem;font-weight:600;font-family:'Inter',sans-serif;border:none;background:white;cursor:pointer;border-bottom:3px solid transparent;color:var(--gris);transition:all .2s;user-select:none;}
.tab-btn-souvenir.actif-souvenir{color:var(--orange);border-bottom-color:var(--orange);}
.tab-btn-souvenir:hover:not(.actif-souvenir){background:var(--orange-cl);}
.toolbar-souvenir{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap;}
.btn-ajouter-souvenir{background:var(--orange);color:white;border:none;border-radius:12px;padding:12px 24px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;}
.btn-ajouter-souvenir:hover{background:#C05621;}
.btn-slideshow-souvenir{background:white;color:var(--orange);border:2px solid var(--orange);border-radius:12px;padding:12px 24px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;}
.btn-slideshow-souvenir:hover{background:var(--orange-cl);}
.grille-photos-souvenir{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px;}
.photo-carte-souvenir{background:white;border:2px solid var(--bordure);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .2s;}
.photo-carte-souvenir:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(221,107,32,0.15);}
.photo-thumb-souvenir{width:100%;aspect-ratio:1;object-fit:cover;background:#EDF2F7;display:flex;align-items:center;justify-content:center;font-size:3rem;}
.photo-legende-souvenir{padding:10px 12px;font-weight:700;font-size:0.92rem;color:#2D3748;}
.badge-audio-souvenir{position:absolute;top:8px;right:8px;background:#FFF5F7;color:var(--rose);border-radius:20px;padding:2px 8px;font-weight:700;font-size:0.85rem;}
.vide-souvenir{text-align:center;padding:3rem 1rem;color:var(--gris);display:none;}
.vide-souvenir.visible-souvenir{display:block;}
.modal-overlay-souvenir{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;padding:12px;overflow-y:auto;}
.modal-overlay-souvenir.visible-souvenir{display:block;}
.modal-photo-souvenir{background:white;max-width:500px;width:100%;border-radius:24px;padding:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.2);margin:20px auto 40px;}
.modal-image-souvenir{width:100%;aspect-ratio:1/1;object-fit:cover;background:#EDF2F7;}
.modal-info-souvenir{padding:18px 20px;}
.input-legende-souvenir{width:100%;padding:10px 13px;border:2px solid var(--bordure);border-radius:10px;font-size:0.95rem;font-family:'Inter',sans-serif;background:white;margin-bottom:12px;}
.input-legende-souvenir:focus{outline:none;border-color:var(--orange);}
.audio-zone-souvenir{background:var(--rose-cl);border:2px solid var(--rose-bd);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.status-audio-souvenir{font-size:0.82rem;color:var(--gris);margin-bottom:8px;}
.btn-audio-souvenir{padding:8px 14px;border:none;border-radius:10px;font-weight:700;font-size:0.85rem;cursor:pointer;font-family:'Inter',sans-serif;background:#D53F8C;color:white;}
.btn-audio-souvenir:hover{background:#B83280;}
.modal-actions-souvenir{display:flex;gap:10px;flex-wrap:wrap;}
.btn-sauv-souvenir{flex:1;padding:12px;background:var(--orange);color:white;border:none;border-radius:12px;font-weight:700;font-size:0.95rem;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-sauv-souvenir:hover{background:#C05621;}
.btn-suppr-souvenir{padding:12px 14px;background:white;color:#E53E3E;border:2px solid #FED7D7;border-radius:12px;font-weight:600;font-size:0.9rem;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-fermer-modal-souvenir{position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.45);color:white;border:none;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;}
.slideshow-overlay-souvenir{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:300;align-items:center;justify-content:center;}
.slideshow-overlay-souvenir.visible-souvenir{display:flex;}
.slideshow-image-souvenir{max-width:80%;max-height:70vh;object-fit:contain;}
.slideshow-legende-souvenir{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:white;font-size:1.2rem;font-weight:700;text-align:center;max-width:80%;}
.btn-nav-slideshow-souvenir{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.2);color:white;border:none;font-size:3rem;padding:20px;cursor:pointer;border-radius:10px;transition:background .2s;}
.btn-nav-slideshow-souvenir:hover{background:rgba(255,255,255,0.4);}
.btn-nav-slideshow-souvenir.gauche-souvenir{left:20px;}
.btn-nav-slideshow-souvenir.droite-souvenir{right:20px;}
.btn-quitter-slideshow-souvenir{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.2);color:white;border:none;padding:10px 20px;border-radius:10px;font-size:1rem;cursor:pointer;font-weight:700;}
.btn-quitter-slideshow-souvenir:hover{background:rgba(255,255,255,0.4);}
}

.modal-close-dashboard:hover {
  background: #F7FAFC;
  color: var(--text);
}

.modal-body-dashboard {
  margin-bottom: 1.5rem;
}

.champ-dashboard {
  margin-bottom: 1rem;
}

.champ-dashboard label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.champ-dashboard input,
.champ-dashboard select {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.champ-dashboard input:focus,
.champ-dashboard select:focus {
  outline: none;
  border-color: var(--primary-light);
}

.modal-footer-dashboard {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn-principal-dashboard {
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-principal-dashboard:hover {
  background: var(--primary-light);
}

.btn-secondaire-dashboard {
  padding: 0.75rem 1.5rem;
  background: #F7FAFC;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondaire-dashboard:hover {
  background: #EDF2F7;
}

.msg-dashboard {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.msg-succes-dashboard {
  background: #F0FFF4;
  color: var(--success);
  border-left: 4px solid var(--success);
}

.msg-erreur-dashboard {
  background: #FFF5F5;
  color: var(--danger);
  border-left: 4px solid var(--danger);
}

@media (max-width: 768px) {
  .entete-dashboard {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .stats-dashboard {
    flex-direction: column;
    gap: 1rem;
  }

  .filtres-dashboard {
    flex-direction: column;
    align-items: stretch;
  }

  .search-dashboard {
    width: 100%;
  }

  .grille-dossiers-dashboard {
    grid-template-columns: 1fr;
  }
}

/* ── VÉHICULES (suffixe -veh) ────────────────────────────────────────────── */

.container-veh {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}

.btn-ajouter-veh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.9rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  margin-bottom: 2rem;
  transition: all 0.2s;
}

.btn-ajouter-veh:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

.grid-vehicules-veh {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.veh-card-veh {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.veh-card-veh:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.veh-card-veh.alerte-veh {
  border-color: #FBD38D;
}

.veh-entete-veh {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.veh-avatar-veh {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.veh-nom-veh {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--primary);
  font-size: 1rem;
}

.veh-immat-veh {
  font-size: 0.78rem;
  color: #718096;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  margin-top: 0.2rem;
}

.veh-infos-veh {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.veh-tag-veh {
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  background: #EDF2F7;
  color: #4A5568;
  font-weight: 600;
}

.veh-alertes-veh {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.veh-alerte-veh {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
}

.veh-alerte-veh.rouge-veh {
  background: #FFF5F5;
  color: var(--danger);
}

.veh-alerte-veh.orange-veh {
  background: #FFFAF0;
  color: #C05621;
}

.veh-actions-veh {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-sm-veh {
  flex: 1;
  padding: 0.75rem 0.5rem;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: white;
  transition: all 0.15s;
}

.btn-sm-veh:hover {
  background: #EDF2F7;
}

.btn-sm-veh.primary-veh {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-sm-veh.primary-veh:hover {
  background: var(--primary-light);
}

.btn-sm-veh.danger-veh:hover {
  background: #FFF5F5;
  border-color: #FEB2B2;
  color: var(--danger);
}

.detail-panel-veh {
  display: none;
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px solid var(--primary-light);
  box-shadow: var(--shadow-lg);
}

.detail-panel-veh.visible-veh {
  display: block;
}

.detail-titre-veh {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-tabs-veh {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.tab-veh {
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: white;
  color: #4A5568;
  transition: all 0.15s;
}

.tab-veh.actif-veh {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.detail-grid-veh {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.detail-champ-veh {
  background: #F7FAFC;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.detail-champ-label-veh {
  font-size: 0.85rem;
  color: #A0AEC0;
  margin-bottom: 0.25rem;
}

.detail-champ-val-veh {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2D3748;
}

.entretien-ligne-veh {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  margin-bottom: 0.75rem;
  background: white;
}

.entretien-icone-veh {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.entretien-infos-veh {
  flex: 1;
}

.entretien-type-veh {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--primary);
}

.entretien-meta-veh {
  font-size: 0.75rem;
  color: #718096;
  margin-top: 0.25rem;
}

.entretien-cout-veh {
  font-weight: 700;
  color: var(--success);
  font-size: 0.88rem;
  white-space: nowrap;
}

.vide-veh {
  text-align: center;
  padding: 3rem 2rem;
  color: #A0AEC0;
  background: white;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
}

.vide-icone-veh {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.section-titre-veh {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  margin: 1.5rem 0 1rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--primary-light);
}

.overlay-veh {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.overlay-veh.visible-veh {
  display: flex;
}

.modal-veh {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 560px;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-titre-veh {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.form-row-veh {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group-veh {
  margin-bottom: 1rem;
}

.form-group-veh label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4A5568;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group-veh input,
.form-group-veh select,
.form-group-veh textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.form-group-veh input:focus,
.form-group-veh select:focus,
.form-group-veh textarea:focus {
  outline: none;
  border-color: var(--primary-light);
}

.modal-actions-veh {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-save-veh {
  flex: 1;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save-veh:hover {
  background: var(--primary-light);
}

.btn-cancel-veh {
  background: #F7FAFC;
  border: 1.5px solid var(--border);
  color: #4A5568;
  border-radius: 10px;
  padding: 0.9rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel-veh:hover {
  background: #EDF2F7;
}

.bloc-contrat-veh {
  display: none;
  border: 1.5px solid #BEE3F8;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #EBF8FF;
}

.contrat-titre-veh {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #2B6CB0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.jauge-bloc-veh {
  margin-bottom: 1.5rem;
}

.jauge-titre-veh {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jauge-barre-wrap-veh {
  background: #EDF2F7;
  border-radius: 12px;
  height: 22px;
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
}

.jauge-barre-veh {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
}

.jauge-pct-veh {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3px;
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.jauge-stats-veh {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.jauge-stat-veh {
  text-align: center;
  background: #F7FAFC;
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
}

.jauge-stat-val-veh {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
}

.jauge-stat-lab-veh {
  font-size: 0.85rem;
  color: #A0AEC0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.jauge-msg-veh {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.ok-veh {
  background: #F0FFF4;
  color: var(--success);
  border-left: 4px solid var(--success);
}

.attention-veh {
  background: #FFFAF0;
  color: #C05621;
  border-left: 4px solid #C05621;
}

.critique-veh, .depasse-veh {
  background: #FFF5F5;
  color: var(--danger);
  border-left: 4px solid var(--danger);
}

.releve-ligne-veh {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  margin-bottom: 0.5rem;
}

.releve-mois-veh {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
  flex: 1;
}

.releve-km-veh {
  font-size: 0.83rem;
  color: #4A5568;
  font-weight: 600;
}

.form-inline-releve-veh {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1rem;
  background: #F7FAFC;
  border-radius: 10px;
}

.form-inline-releve-veh input {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
}

.form-inline-releve-veh input:focus {
  outline: none;
  border-color: var(--primary-light);
}

.btn-releve-add-veh {
  background: var(--success);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-size: 0.83rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-releve-add-veh:hover {
  background: #2F855A;
}

.toast-veh {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #2D3748;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s;
}

.toast-veh.visible-veh {
  opacity: 1;
}

@media (max-width: 768px) {
  .grid-vehicules-veh {
    grid-template-columns: 1fr;
  }

  .veh-actions-veh {
    flex-wrap: wrap;
  }

  .detail-titre-veh {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .section-tabs-veh {
    width: 100%;
  }

  .tab-veh {
    flex: 1;
    text-align: center;
  }

  .form-row-veh {
    grid-template-columns: 1fr;
  }

  .jauge-stats-veh {
    grid-template-columns: 1fr;
  }

  .form-inline-releve-veh {
    flex-direction: column;
    align-items: stretch;
  }

  .form-inline-releve-veh input {
    width: 100%;
  }

  .btn-releve-add-veh {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   LOT 3 — PAGES STRATÉGIQUES (login, index, aide, recents, rappel, classement)
   ~2000 lignes — Ajouté le 24/04/2026
══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   LOGIN.HTML — Page de connexion/inscription (-login)
──────────────────────────────────────────────────────────────────────────── */

        .carte-login {
            background: var(--blanc); border-radius: 24px; padding: 48px 40px;
            width: 100%; max-width: 440px;
            box-shadow: 0 20px 50px rgba(26,54,93,0.15);
        }
        .logo-zone-login { text-align: center; margin-bottom: 32px; }
        .logo-zone-login img { height: 70px; margin-bottom: 12px; }
        .logo-zone-login h1 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.6rem; }
        .logo-zone-login p { color: var(--gris); font-size: 0.95rem; margin-top: 4px; }

        .onglets-login { display: flex; border-radius: 10px; background: var(--fond); padding: 4px; margin-bottom: 28px; }
        .onglet-login {
            flex: 1; padding: 10px; text-align: center; border-radius: 8px;
            cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--gris); transition: all 0.2s;
        }
        .onglet-login.actif { background: var(--blanc); color: var(--bleu); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

        .champ-login { margin-bottom: 18px; }
        .champ-login label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gris); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.4px; }
        .champ-login input {
            width: 100%; padding: 13px 16px; border-radius: 10px;
            border: 2px solid var(--bordure); font-size: 1rem;
            font-family: 'Inter', sans-serif; transition: border-color 0.2s;
        }
        .champ-login input:focus { outline: none; border-color: var(--bleu-clair); }

        .btn-principal-login {
            width: 100%; padding: 14px; background: var(--bleu-clair); color: white;
            border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 600;
            cursor: pointer; font-family: 'Inter', sans-serif; margin-top: 8px; transition: background 0.2s;
        }
        .btn-principal-login:hover { background: var(--bleu); }
        .btn-principal-login:disabled { background: var(--gris); cursor: not-allowed; }

        .message-login { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; display: none; text-align: center; }
        .message-login.succes { background: #F0FFF4; color: var(--vert); border: 1px solid #9AE6B4; display: block; }
        .message-login.erreur { background: #FFF5F5; color: var(--rouge); border: 1px solid #FEB2B2; display: block; }

        .lien-bas-login { text-align: center; margin-top: 16px; font-size: 0.9rem; }
        .lien-bas-login a { color: var(--bleu-clair); text-decoration: none; }
        .lien-bas-login a:hover { text-decoration: underline; }

        .consentement-bloc-login {
            background: #F7FAFC; border: 1.5px solid var(--bordure);
            border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
        }
        .consentement-bloc-login label {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 0.88rem; color: #4A5568; line-height: 1.5;
            cursor: pointer; font-weight: normal; text-transform: none;
            letter-spacing: 0;
        }
        .consentement-bloc-login input[type="checkbox"] {
            width: 18px; height: 18px; min-width: 18px; margin-top: 2px;
            accent-color: var(--bleu-clair); cursor: pointer;
            border: none; padding: 0;
        }
        .consentement-bloc-login a { color: var(--bleu-clair); }
        .consentement-obligatoire-login {
            border-color: #FC8181;
            background: #FFF5F5;
        }

        /* Barre de force mot de passe */
        .force-barre-wrap-login { margin-top: 8px; }
        .force-barre-login {
            height: 6px; border-radius: 4px; background: #E2E8F0;
            overflow: hidden; margin-bottom: 5px;
        }
        .force-barre-prog-login {
            height: 100%; border-radius: 4px;
            transition: width 0.3s, background 0.3s; width: 0%;
        }
        .force-texte-login { font-size: 0.8rem; font-weight: 600; }
        .force-conseils-login { font-size: 0.78rem; color: var(--gris); margin-top: 3px; line-height: 1.5; }

        /* Anti-robot */
        .captcha-bloc-login {
            background: #F0FFF4; border: 1.5px solid #9AE6B4;
            border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
        }
        .captcha-bloc-login label {
            display: block; font-size: 0.85rem; font-weight: 600;
            color: #22543D; margin-bottom: 8px; text-transform: none; letter-spacing: 0;
        }
        .captcha-ligne-login { display: flex; align-items: center; gap: 12px; }
        .captcha-question-login {
            background: white; border: 1.5px solid #9AE6B4; border-radius: 8px;
            padding: 8px 14px; font-size: 1rem; font-weight: 700; color: var(--bleu);
            min-width: 110px; text-align: center;
        }
        .captcha-input-login {
            width: 80px !important; padding: 8px 12px !important;
            border-radius: 8px !important; border: 1.5px solid #9AE6B4 !important;
            font-size: 1rem !important; text-align: center; font-weight: 700;
        }

        /* Choix de rôle */
        .role-titre-login { font-size: 1rem; font-weight: 600; color: var(--bleu); text-align: center; margin-bottom: 16px; }
        .role-cards-login { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
        .role-card-login {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 18px; border-radius: 12px; cursor: pointer;
            border: 2px solid var(--bordure); background: #fff;
            transition: all 0.2s; text-align: left;
        }
        .role-card-login:hover { border-color: var(--bleu-clair); background: var(--fond); }
        .role-card-login.actif { border-color: var(--bleu-clair); background: #EBF8FF; }
        .role-icone-login { font-size: 2rem; min-width: 40px; text-align: center; }
        .role-info-login h3 { font-size: .95rem; font-weight: 700; color: var(--bleu); margin-bottom: 2px; }
        .role-info-login p { font-size: .8rem; color: var(--gris); line-height: 1.4; }
        .role-badge-login {
            display: inline-flex; align-items: center; gap: 6px;
            background: #EBF8FF; color: var(--bleu-clair); border-radius: 8px;
            padding: 6px 12px; font-size: .85rem; font-weight: 600; margin-bottom: 16px;
            cursor: pointer; border: 1px solid #BEE3F8;
        }
        .role-badge-login:hover { background: #BEE3F8; }
    

/* ────────────────────────────────────────────────────────────────────────────
   INDEX.HTML — Dashboard principal (-index)
──────────────────────────────────────────────────────────────────────────── */

        /* ── HEADER (index uniquement, scopé via classes) ── */
        .header-index {
            background: linear-gradient(90deg,
                #FFFFFF  0%,
                #FFFFFF  22%,
                #EBF0F7  32%,
                #CCDAEB  44%,
                #8AAACB  56%,
                #3D6290  68%,
                #1A365D  80%,
                #1A365D  100%
            );
            border-left: 10px solid #1A365D;
            padding: 0 36px;
            display: flex; align-items: stretch; justify-content: space-between;
            min-height: 116px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }
        .header-marque-index { display: flex; align-items: center; gap: 22px; padding: 16px 0; }
        .header-marque-index img { height: 100px; width: 100px; object-fit: contain; }
        .header-marque-texte-index { display: flex; flex-direction: column; gap: 5px; }
        .header-marque-texte-index .app-nom-index {
            font-family: 'Montserrat', sans-serif; font-weight: 800;
            font-size: 2rem; letter-spacing: -0.5px; line-height: 1;
        }
        .app-nom-genco-index { color: #4A5568; }
        .app-nom-aide-index  { color: #E07B39; }
        .header-marque-texte-index .app-nom-index sup {
            font-size: 0.9rem; font-weight: 700; vertical-align: super;
            letter-spacing: 0; color: #E07B39; opacity: 0.85;
        }
        .header-marque-texte-index .app-slogan-index {
            font-size: 0.95rem; color: #4A5568; font-weight: 400;
            font-style: italic; line-height: 1.3;
        }
        .header-marque-texte-index .app-mots-cles-index {
            font-size: 0.75rem; color: #718096; font-weight: 600;
            letter-spacing: 1.2px; text-transform: uppercase;
        }
        .header-marque-texte-index .app-mots-cles-index span {
            color: #CBD5E0; margin: 0 5px; font-weight: 400;
        }


        /* ── CONTENEUR ── */
        .container-index { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }

        /* ── BARRE RÉSUMÉ DU JOUR ── */
        .resume-jour-index {
            margin: 24px 0 28px;
            background: white;
            border-radius: 16px;
            padding: 18px 28px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 20px; flex-wrap: wrap;
            box-shadow: 0 2px 12px rgba(26,54,93,0.07);
            border: 1px solid #E2E8F0;
        }
        .resume-date-index {
            font-family: 'Montserrat', sans-serif;
            color: var(--bleu); font-size: 1rem; font-weight: 700;
        }
        .resume-date-index span { font-weight: 400; color: #718096; font-size: 0.9rem; margin-left: 8px; font-family: 'Inter', sans-serif; }
        .resume-stats-index { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .stat-pill-index {
            display: flex; align-items: center; gap: 7px;
            padding: 7px 16px; border-radius: 30px;
            font-size: 0.88rem; font-weight: 600;
            border: 1.5px solid #E2E8F0; background: #F7FAFC;
            color: #4A5568; text-decoration: none; transition: all 0.15s;
        }
        .stat-pill-index:hover { border-color: var(--bleu-clair); background: #EBF8FF; color: var(--bleu); }
        .stat-pill-index.alerte { background: #FFF5F5; border-color: #FEB2B2; color: #C53030; }
        .stat-pill-index.ok     { background: #F0FFF4; border-color: #9AE6B4; color: #276749; }

        /* ── TITRE DE SECTION ── */
        .titre-section-index {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.8px; margin: 0 0 16px;
            padding-left: 10px; border-left: 4px solid var(--bleu-clair);
        }

        /* ── GRILLE ESSENTIEL (4 grandes cartes) ── */
        .grid-essentiel-index {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
            gap: 18px;
            margin-bottom: 32px;
        }
        @media (max-width: 480px) { .grid-essentiel { grid-template-columns: repeat(2, 1fr); } }

        .card-essentiel-index {
            background: white; border-radius: 18px; text-align: center;
            text-decoration: none; padding: 30px 20px 24px;
            box-shadow: 0 3px 14px rgba(0,0,0,0.06);
            border: 2px solid transparent; transition: all 0.2s;
            display: flex; flex-direction: column; align-items: center;
            position: relative;
        }
        .card-essentiel-index:hover {
            border-color: var(--bleu-clair);
            transform: translateY(-4px);
            box-shadow: 0 10px 28px rgba(49,130,206,0.15);
        }
        .card-essentiel-index .icon-index { font-size: 3.6rem; margin-bottom: 14px; }
        .card-essentiel-index h3 {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 1.1rem; margin-bottom: 5px;
        }
        .card-essentiel-index p { font-size: 0.85rem; color: #718096; line-height: 1.4; }

        /* Bouton "Voir plus" pour senior */
        .btn-voir-plus-index {
            display: none; width: 100%; padding: 16px; margin-bottom: 24px;
            background: linear-gradient(90deg, #EBF4FF 0%, #DBEAFE 100%);
            border: 2px solid #BEE3F8; border-radius: 14px;
            font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700;
            color: var(--bleu); cursor: pointer; transition: all 0.2s;
            text-align: center;
        }
        .btn-voir-plus-index:hover { border-color: var(--bleu-clair); background: linear-gradient(90deg, #DBEAFE 0%, #BEE3F8 100%); }

        /* ── Recherche globale ── */
        .recherche-globale-index { margin-bottom: 20px; }
        .recherche-input-wrap-index {
            position: relative; display: flex; align-items: center;
        }
        .recherche-icone-index {
            position: absolute; left: 16px; font-size: 1.2rem; pointer-events: none;
        }
        .recherche-globale-index input {
            width: 100%; padding: 14px 44px 14px 48px;
            border: 2px solid #E2E8F0; border-radius: 14px;
            font-size: 1rem; font-family: 'Inter', sans-serif;
            background: white; transition: border-color 0.15s;
        }
        .recherche-globale-index input:focus { outline: none; border-color: var(--bleu-clair); }
        .recherche-effacer-index {
            position: absolute; right: 12px; background: #E2E8F0; border: none;
            border-radius: 50%; width: 28px; height: 28px; font-size: 0.9rem;
            cursor: pointer; color: #718096; display: flex; align-items: center;
            justify-content: center; min-height: auto;
        }
        .recherche-resultats-index {
            background: white; border: 2px solid #E2E8F0; border-top: none;
            border-radius: 0 0 14px 14px; max-height: 320px; overflow-y: auto;
        }
        .recherche-item-index {
            display: flex; align-items: center; gap: 14px; padding: 12px 16px;
            text-decoration: none; color: #2D3748; border-bottom: 1px solid #F7FAFC;
            transition: background 0.1s;
        }
        .recherche-item-index:hover { background: #EBF8FF; }
        .recherche-item-index .r-icon-index { font-size: 1.5rem; flex-shrink: 0; }
        .recherche-item-index .r-label-index { font-weight: 600; font-size: 0.95rem; }
        .recherche-item-index .r-desc-index { font-size: 0.82rem; color: #718096; }
        .recherche-vide-index { padding: 20px; text-align: center; color: #718096; font-size: 0.95rem; }

        /* Alerte impayés */
        .card-alerte-index {
            border: 2px solid #E53E3E !important; background: #FFF5F5 !important;
            animation: pulse-alerte 1.8s ease-in-out infinite;
        }
        .card-alerte-index h3 { color: #E53E3E !important; }
        .card-alerte-index p  { color: #C53030 !important; font-weight: 600; }
        @keyframes pulse-alerte {
            0%   { box-shadow: 0 0 0 0 rgba(229,62,62,0.5); }
            50%  { box-shadow: 0 0 0 12px rgba(229,62,62,0); }
            100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
        }
        .badge-alerte-index {
            position: absolute; top: -10px; right: -10px;
            background: #E53E3E; color: white; border-radius: 50%;
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.88rem;
            border: 3px solid white; box-shadow: 0 2px 8px rgba(229,62,62,0.5);
            animation: badge-bounce 1.8s ease-in-out infinite;
        }
        @keyframes badge-bounce { 0%,100% { transform:scale(1); } 50% { transform:scale(1.2); } }

        /* ── SECTION OUTILS AVANCÉS (repliée) ── */
        .outils-toggle-index {
            display: flex; align-items: center; justify-content: space-between;
            cursor: pointer; margin-bottom: 0; padding: 14px 18px;
            background: linear-gradient(90deg, #EBF4FF 0%, #DBEAFE 100%);
            border-radius: 14px;
            box-shadow: 0 2px 8px rgba(26,54,93,0.08);
            border: 1.5px solid #BEE3F8; transition: all 0.15s;
            user-select: none;
        }
        .outils-toggle-index:hover { border-color: var(--bleu-clair); background: linear-gradient(90deg, #DBEAFE 0%, #BEE3F8 100%); }
        .outils-toggle-gauche-index span { color: var(--bleu) !important; }
        .outils-toggle-gauche-index { display: flex; align-items: center; gap: 12px; }
        .outils-toggle-gauche-index span { font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: 0.6px; }
        .outils-toggle-droite-index { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: #718096; }
        .fleche-outils-index { font-size: 1rem; transition: transform 0.3s; }
        .fleche-outils-index.ouvert { transform: rotate(180deg); }

        .outils-conteneur-index { display: none; margin-top: 14px; }
        .outils-conteneur-index.visible { display: block; }

        /* Grille outils (plus petites cartes) */
        .grid-outils-index {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 14px;
        }
        .card-outil-index {
            background: white; border-radius: 14px; text-align: center;
            text-decoration: none; padding: 22px 16px 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1.5px solid #E2E8F0; transition: all 0.18s;
            display: flex; flex-direction: column; align-items: center;
        }
        .card-outil-index:hover { border-color: var(--bleu-clair); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(49,130,206,0.12); }
        .card-outil-index .icon-index { font-size: 2.4rem; margin-bottom: 10px; }
        .card-outil-index h3 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 0.92rem; margin-bottom: 3px; }
        .card-outil-index p  { font-size: 0.85rem; color: #718096; line-height: 1.3; }

        /* Carte paramètres pleine largeur */
        .card-outil-index.card-params {
            grid-column: 1 / -1; flex-direction: row; gap: 16px;
            padding: 18px 24px; text-align: left; align-items: center;
            background: #EBF4FF; border-color: #BEE3F8;
        }
        .card-outil-index.card-params .icon-index { font-size: 2.2rem; margin-bottom: 0; flex-shrink: 0; }
        .card-outil-index.card-params h3 { font-size: 1rem; }
        .card-outil-index.card-params .params-sous-index { font-size: 0.8rem; color: #2D5282; margin-top: 4px; font-weight: 600; }

        /* ── SECTION AIDANT ── */
        .section-aidant-index {
            display: none; margin-bottom: 32px;
        }
        .section-aidant-index.visible { display: block; }
        .grid-aidants-index {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 14px;
        }
        .card-aidant-index {
            background: white; border-radius: 16px; padding: 18px 20px;
            border: 1.5px solid #E2E8F0; cursor: pointer;
            text-decoration: none; display: block;
            transition: all 0.18s; position: relative;
        }
        .card-aidant-index:hover { border-color: #3182CE; box-shadow: 0 6px 20px rgba(49,130,206,0.12); transform: translateY(-2px); }
        .card-aidant-index.actif { border-color: #3182CE; background: #EBF8FF; }
        .card-aidant-entete-index { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .card-aidant-avatar-index {
            width: 46px; height: 46px; border-radius: 50%;
            background: var(--bleu); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; font-weight: 800; font-family: 'Montserrat', sans-serif;
            flex-shrink: 0;
        }
        .card-aidant-nom-index { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--bleu); font-size: 1rem; }
        .card-aidant-relation-index { font-size: 0.8rem; color: #718096; }
        .card-aidant-stats-index { display: flex; gap: 8px; flex-wrap: wrap; }
        .stat-mini-index {
            display: flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
        }
        .stat-mini-index.ok      { background: #F0FFF4; color: #276749; }
        .stat-mini-index.alerte  { background: #FFF5F5; color: #C53030; }
        .stat-mini-index.neutre  { background: #EDF2F7; color: #4A5568; }
        .badge-actif-dossier-index {
            position: absolute; top: 10px; right: 12px;
            background: #3182CE; color: white; border-radius: 10px;
            padding: 2px 9px; font-size: 0.85rem; font-weight: 700;
        }
        .card-aidant-btn-index {
            width: 100%; margin-top: 12px; padding: 8px;
            background: var(--bleu); color: white; border: none;
            border-radius: 8px; font-size: 0.85rem; font-weight: 700;
            font-family: 'Montserrat', sans-serif; cursor: pointer;
        }
        .card-aidant-btn-index:hover { background: #2B6CB0; }
        .btn-tableau-bord-index {
            display: inline-flex; align-items: center; gap: 8px;
            background: white; border: 1.5px solid #BEE3F8;
            color: #2B6CB0; border-radius: 10px; padding: 8px 16px;
            font-size: 0.83rem; font-weight: 700; cursor: pointer;
            text-decoration: none; margin-left: auto;
        }
        .btn-tableau-bord-index:hover { background: #EBF8FF; }

        /* Header droite — nom + rôle + déconnexion */
        .header-droite-index {
            display: flex; flex-direction: column; align-items: flex-end;
            justify-content: center; gap: 8px; padding: 12px 0;
        }
        .header-user-ligne-index {
            display: flex; align-items: center; gap: 10px;
        }
        .header-user-avatar-index {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.2); color: white;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem;
            border: 2px solid rgba(255,255,255,0.4); flex-shrink: 0;
        }
        .header-user-nom-index {
            color: white; font-family: 'Montserrat', sans-serif;
            font-weight: 700; font-size: 0.95rem; white-space: nowrap;
        }
        .role-badge-header-index {
            display: inline-flex; align-items: center; gap: 5px;
            background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
            border-radius: 20px; padding: 3px 10px; font-size: 0.85rem;
            font-weight: 600; border: 1px solid rgba(255,255,255,0.25);
        }
        .btn-deconnexion-index {
            background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
            color: rgba(255,255,255,0.85); border-radius: 8px; padding: 12px 20px;
            font-size: 0.85rem; font-weight: 600; cursor: pointer;
            font-family: 'Inter', sans-serif; transition: background 0.2s;
            min-height: 44px;
        }
        .btn-deconnexion-index:hover { background: rgba(255,255,255,0.22); color: white; }

        /* ── MODE FAMILLE — cartes compactes ── */
        .mode-famille-index .grid-essentiel-index {
            grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
            gap: 12px;
        }
        .mode-famille-index .card-essentiel-index {
            padding: 18px 12px 14px;
            border-radius: 12px;
        }
        .mode-famille-index .card-essentiel-index .icon-index { font-size: 2rem; margin-bottom: 8px; }
        .mode-famille-index .card-essentiel-index h3 { font-size: 0.88rem; margin-bottom: 3px; }
        .mode-famille-index .card-essentiel-index p  { font-size: 0.85rem; }
        @media (max-width: 600px) {
            .mode-famille-index .grid-essentiel-index { grid-template-columns: repeat(3, 1fr); }
        }

        /* ── INTERFACE PRO — liste résidents ── */
        .pro-entete-index {
            display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; flex-wrap: wrap;
        }
        .pro-search-input-index {
            flex: 1; min-width: 220px; padding: 11px 16px; border-radius: 10px;
            border: 1.5px solid #E2E8F0; font-size: 0.95rem;
            font-family: 'Inter', sans-serif; background: white; transition: border-color 0.2s;
        }
        .pro-search-input-index:focus { outline: none; border-color: #3182CE; box-shadow: 0 0 0 3px rgba(49,130,206,0.1); }
        .pro-btn-ajouter-index {
            padding: 11px 20px; border-radius: 10px; background: var(--bleu);
            color: white; border: none; font-size: 0.88rem; font-weight: 700;
            font-family: 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap; transition: background 0.2s;
        }
        .pro-btn-ajouter-index:hover { background: #2B6CB0; }
        .pro-compteur-index { font-size: 0.82rem; color: #718096; font-weight: 600; white-space: nowrap; }
        .pro-liste-index {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 10px; margin-bottom: 24px;
        }
        .pro-card-index {
            background: white; border-radius: 12px; padding: 13px 15px;
            border: 1.5px solid #E2E8F0; cursor: pointer;
            transition: all 0.18s; display: flex; align-items: center; gap: 12px;
        }
        .pro-card-index:hover { border-color: #3182CE; box-shadow: 0 4px 14px rgba(49,130,206,0.12); transform: translateY(-1px); }
        .pro-card-index.actif { border-color: #3182CE; background: #EBF8FF; }
        .pro-avatar-index {
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--bleu); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem; font-weight: 800; font-family: 'Montserrat', sans-serif; flex-shrink: 0;
        }
        .pro-avatar-index.urgence { background: #C53030; }
        .pro-infos-index { flex: 1; min-width: 0; }
        .pro-nom-index { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--bleu); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pro-chambre-index { font-size: 0.85rem; color: #718096; margin-top: 1px; }
        .pro-stats-index { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
        .pro-badge-index { font-size: 0.85rem; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
        .pro-badge-index.ok     { background: #F0FFF4; color: #276749; }
        .pro-badge-index.alerte { background: #FFF5F5; color: #C53030; }
        .pro-badge-index.neutre { background: #EDF2F7; color: #4A5568; }
        .pro-fleche-index { color: #CBD5E0; font-size: 1.1rem; flex-shrink: 0; }
        .pro-vide-index {
            text-align: center; padding: 56px 24px; color: #A0AEC0;
            background: white; border-radius: 16px; border: 2px dashed #E2E8F0; margin-bottom: 28px;
        }
        .pro-vide-index .pro-vide-icone-index { font-size: 3rem; margin-bottom: 12px; }
        .pro-vide-index p { font-size: 0.95rem; margin-bottom: 6px; color: #718096; }
        .pro-vide-index small { font-size: 0.82rem; }
        @media (max-width: 500px) { .pro-liste { grid-template-columns: 1fr; } }
    

/* ==============================================================================
   LOT 4 — PAGES UTILITAIRES (guide, conservation, biblio, coups, dossiers, abonnement)
   1364 lignes — Ajouté le 24/04/2026
============================================================================== */


/* ----------------------------------------------------------------------------
   GUIDE_PRATIQUE.HTML (-guide)
---------------------------------------------------------------------------- */

:root {
            --bleu:#1A365D; --bleu-clair:#3182CE; --vert:#276749; --vert-bg:#F0FFF4;
            --orange:#C05621; --rouge:#C53030; --rouge-bg:#FFF5F5;
            --fond:#F7FAFC; --blanc:#fff; --gris:#718096; --bordure:#E2E8F0;

            /* Mode autonome : valeurs par défaut */
            --taille-texte: 1rem;
            --taille-etape: 0.97rem;
            --taille-titre-fiche: 1rem;
            --padding-fiche: 18px 20px;
            --rayon-num: 32px;
        }

        /* ── MODE SIMPLE : texte plus grand ── */
        body.mode-simple-guide {
            --taille-texte: 1.08rem;
            --taille-etape: 1.05rem;
            --taille-titre-fiche: 1.08rem;
            --rayon-num: 36px;
        }

        /* ── MODE ACCOMPAGNÉ : ultra lisible ── */
        body.mode-accompagne-guide {
            --taille-texte: 1.18rem;
            --taille-etape: 1.15rem;
            --taille-titre-fiche: 1.15rem;
            --rayon-num: 40px;
        }

        *{box-sizing:border-box;margin:0;padding:0;}
        body{font-family:'Inter',sans-serif;background:var(--fond);color:#2D3748;font-size:var(--taille-texte);}

        nav{background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D;padding:16px 32px;display:flex;align-items:center;gap:24px;}
        nav .logo-guide{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.3rem;}
        nav a{color: #1A365D;text-decoration:none;font-size:0.95rem;}

        .page-guide{max-width:1060px;margin:28px auto;padding:0 20px 80px;}

        h1{font-family:'Montserrat',sans-serif;font-size:1.9rem;font-weight:800;color:var(--bleu);margin-bottom:6px;}
        .sous-titre-guide{color:var(--gris);margin-bottom:24px;}

        /* ── BANDEAU MODE ── */
        .bandeau-mode-guide{
            display:none; /* affiché seulement pour autonome en petit discret */
            align-items:center;gap:10px;
            background:var(--blanc);border:1px solid var(--bordure);border-radius:10px;
            padding:10px 16px;margin-bottom:20px;font-size:0.85rem;color:var(--gris);
        }
        .bandeau-mode-guide.visible-guide{display:flex;}
        .bandeau-mode-guide a{color:var(--bleu-clair);text-decoration:none;font-weight:600;margin-left:auto;}

        /* ── BANDEAU ACCOMPAGNÉ (visible et rassurant) ── */
        .bandeau-accompagne-guide{
            display:none;
            background:#EBF8FF;border:2px solid #90CDF4;border-radius:14px;
            padding:16px 20px;margin-bottom:24px;
            align-items:center;gap:14px;
        }
        .bandeau-accompagne-guide.visible-guide{display:flex;}
        .bandeau-accompagne-guide .ico-guide{font-size:2rem;flex-shrink:0;}
        .bandeau-accompagne-guide .texte-guide{flex:1;}
        .bandeau-accompagne-guide strong{display:block;color:var(--bleu);font-size:1.05rem;margin-bottom:3px;}
        .bandeau-accompagne-guide span{color:#2C5282;font-size:0.88rem;}
        .bandeau-accompagne-guide a{color:var(--bleu-clair);font-size:0.82rem;text-decoration:none;font-weight:600;white-space:nowrap;}

        /* ── RECHERCHE ── */
        .barre-recherche-guide{position:relative;margin-bottom:24px;}
        .barre-recherche-guide input{
            width:100%;padding:15px 50px 15px 50px;
            border:2px solid var(--bordure);border-radius:14px;
            font-size:var(--taille-texte);font-family:'Inter',sans-serif;background:var(--blanc);
        }
        .barre-recherche-guide input:focus{outline:none;border-color:var(--bleu-clair);}
        .barre-recherche-guide .ico-loupe-guide{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1.2rem;pointer-events:none;}
        .btn-effacer-guide{
            position:absolute;right:12px;top:50%;transform:translateY(-50%);
            background:#E2E8F0;border:none;border-radius:50%;
            width:44px;height:44px;font-size:1rem;cursor:pointer;
            display:none;align-items:center;justify-content:center;
            color:#718096;transition:background 0.15s;
        }
        .btn-effacer-guide:hover{background:#CBD5E0;color:#2D3748;}
        .btn-effacer-guide.visible-guide{display:flex;}

        /* Message aucun résultat */
        .vide-recherche-box-guide{
            text-align:center;padding:36px 20px;
            background:var(--blanc);border-radius:16px;border:2px solid var(--bordure);
        }
        .vide-recherche-box-guide .ico-vide-guide{font-size:3rem;margin-bottom:12px;}
        .vide-recherche-box-guide p{color:var(--gris);font-size:1rem;margin-bottom:20px;line-height:1.5;}
        .btn-effacer-grand-guide{
            display:inline-flex;align-items:center;gap:8px;
            padding:14px 28px;min-height:44px;background:var(--bleu);color:white;
            border:none;border-radius:12px;font-size:1rem;font-weight:700;
            cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.15s;
        }
        .btn-effacer-grand-guide:hover{background:var(--bleu-clair);}

        /* ── CATÉGORIES ── */
        .cats-grid-guide{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:28px;}
        .cat-btn-guide{
            padding:14px 10px;border-radius:14px;border:2px solid var(--bordure);
            background:var(--blanc);cursor:pointer;text-align:center;
            font-size:0.9rem;font-weight:700;color:#2D3748;transition:all 0.15s;
            font-family:'Inter',sans-serif;
        }
        .cat-btn-guide .ico-guide{font-size:1.6rem;display:block;margin-bottom:6px;}
        .cat-btn-guide:hover{border-color:var(--bleu-clair);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08);}
        .cat-btn-guide.actif-guide{background:var(--bleu);color:white;border-color:var(--bleu);}

        /* ── FICHES ── */
        .compteur-guide{color:var(--gris);font-size:0.88rem;margin-bottom:14px;}
        .fiches-liste-guide{display:flex;flex-direction:column;gap:10px;}

        .fiche-item-guide{
            background:var(--blanc);border-radius:16px;
            border:2px solid var(--bordure);overflow:hidden;transition:border-color 0.15s;
        }
        .fiche-item-guide:hover{border-color:#BEE3F8;}

        .fiche-header-guide{
            width:100%;background:none;border:none;
            display:flex;align-items:center;gap:14px;
            padding:var(--padding-fiche);cursor:pointer;text-align:left;
        }
        .fiche-ico-guide{font-size:1.8rem;flex-shrink:0;}
        .fiche-titre-guide{font-weight:700;font-size:var(--taille-titre-fiche);color:#2D3748;flex:1;line-height:1.3;}
        .badge-urgence-guide{
            background:var(--rouge-bg);color:var(--rouge);
            border:1px solid #FEB2B2;border-radius:8px;
            font-size:0.72rem;font-weight:700;padding:3px 8px;white-space:nowrap;flex-shrink:0;
        }
        .cat-label-guide{font-size:0.75rem;color:var(--gris);white-space:nowrap;flex-shrink:0;}
        .chevron-guide{color:var(--gris);font-size:0.85rem;flex-shrink:0;transition:transform 0.22s;}
        .fiche-item-guide.ouvert-guide .chevron-guide{transform:rotate(180deg);}

        /* ── CONTENU ── */
        .fiche-body-guide{display:none;padding:0 20px 22px;}
        .fiche-item-guide.ouvert-guide .fiche-body-guide{display:block;}

        /* ── BOUTON LECTURE VOCALE ── */
        .barre-lecture-guide{
            display:flex;align-items:center;gap:12px;
            margin-bottom:16px;padding:12px 16px;
            background:#EBF8FF;border-radius:12px;
            border:2px solid #90CDF4;
        }
        .btn-lire-guide{
            display:flex;align-items:center;gap:8px;
            padding:10px 20px;border:none;border-radius:10px;
            font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;
            cursor:pointer;transition:all 0.15s;flex-shrink:0;
        }
        .btn-lire-guide.lecture-off-guide{background:var(--bleu);color:white;}
        .btn-lire-guide.lecture-off-guide:hover{background:#2c4f7a;}
        .btn-lire-guide.lecture-on-guide{background:#C53030;color:white;animation:pulse-rouge 1.2s infinite;}
        @keyframes pulse-rouge{0%,100%{opacity:1;}50%{opacity:0.7;}}
        .lecture-etape-en-cours-guide{
            font-size:0.88rem;color:#2C5282;flex:1;
            font-style:italic;line-height:1.4;
        }
        /* Étape en surbrillance pendant la lecture */
        .etape-lu-guide{background:#EBF8FF;border-radius:8px;transition:background 0.3s;}
        .etape-lu-guide .etape-num-guide{background:var(--bleu-clair)!important;}

        /* Contacts urgence contextuels */
        .contacts-urgence-guide{
            display:flex;gap:10px;flex-wrap:wrap;
            border-radius:12px;padding:14px;margin-bottom:16px;
        }
        .contacts-urgence-guide.type-medical-guide { background:#FFF5F5; border:2px solid #FEB2B2; }
        .contacts-urgence-guide.type-feu-guide     { background:#FFF8F0; border:2px solid #F6AD55; }
        .contacts-urgence-guide.type-police-guide  { background:#EBF4FF; border:2px solid #90CDF4; }
        .contacts-urgence-guide.type-aidant-guide  { background:#FAF5FF; border:2px solid #B794F4; }
        .contacts-urgence-guide.type-banque-guide  { background:#F0FFF4; border:2px solid #9AE6B4; }

        .contact-btn-guide{
            border-radius:10px;padding:10px 16px;
            font-weight:800;font-size:1.05rem;
            text-align:center;flex:1;min-width:120px;
            border:none;cursor:default;
        }
        .contact-btn-guide.rouge-guide { background:var(--rouge);color:white; }
        .contact-btn-guide.orange-guide{ background:#C05621;color:white; }
        .contact-btn-guide.bleu-guide  { background:#2B6CB0;color:white; }
        .contact-btn-guide.violet-guide{ background:#553C9A;color:white; }
        .contact-btn-guide.vert-guide  { background:var(--vert);color:white; }
        .contact-btn-guide span  { display:block;font-size:0.72rem;font-weight:400;opacity:0.9; }

        /* Étapes standard */
        .etapes-guide{list-style:none;margin-bottom:16px;}
        .etapes-guide li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bordure);}
        .etapes-guide li:last-child{border-bottom:none;}
        .etape-num-guide{
            background:var(--bleu);color:white;border-radius:50%;
            width:var(--rayon-num);height:var(--rayon-num);flex-shrink:0;
            display:flex;align-items:center;justify-content:center;
            font-weight:800;font-size:0.95rem;
        }
        .etape-texte-guide{font-size:var(--taille-etape);line-height:1.6;padding-top:4px;}
        .etape-texte-guide strong{color:var(--bleu);}

        /* Étapes mode accompagné : une par une, très aérées */
        .etapes-accompagne-guide{list-style:none;margin-bottom:16px;}
        .etapes-accompagne-guide li{
            display:flex;gap:16px;align-items:center;
            padding:16px;margin-bottom:10px;
            background:var(--fond);border-radius:14px;
            border:2px solid var(--bordure);
        }
        .etapes-accompagne-guide .etape-num-guide{
            background:var(--bleu);color:white;border-radius:50%;
            width:44px;height:44px;flex-shrink:0;
            display:flex;align-items:center;justify-content:center;
            font-weight:800;font-size:1.1rem;
        }
        .etapes-accompagne-guide .etape-texte-guide{font-size:1.12rem;line-height:1.6;font-weight:600;}
        .etapes-accompagne-guide .etape-texte-guide strong{color:var(--bleu);}

        /* Boîtes */
        .boite-guide{border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:0.92rem;line-height:1.5;}
        .boite-alerte-guide{background:var(--rouge-bg);border:1px solid #FEB2B2;color:#742A2A;}
        .boite-alerte-guide::before{content:"⚠️  ";}
        .boite-conseil-guide{background:#FEFCBF;border:1px solid #F6E05E;color:#744210;}
        .boite-conseil-guide::before{content:"💡  ";}
        .boite-aidant-guide{background:#FAF5FF;border:1px solid #B794F4;color:#44337A;font-size:0.88rem;}
        .boite-aidant-guide::before{content:"👨‍👩‍👧  Pour l'aidant : ";font-weight:700;}

        /* Note aidant en mode accompagné : plus visible */
        .note-aidant-visible-guide{
            background:#FAF5FF;border:2px solid #805AD5;border-radius:12px;
            padding:14px 16px;margin-top:16px;color:#44337A;font-size:0.92rem;line-height:1.5;
        }
        .note-aidant-visible-guide strong{display:block;margin-bottom:4px;color:#553C9A;}

        @media(max-width:600px){
            .cats-grid-guide{grid-template-columns:repeat(3,1fr);}
            h1{font-size:1.5rem;}
            nav{padding:14px 16px;}
        }

/* ----------------------------------------------------------------------------
   CONSERVATION.HTML (-conservation)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #38A169;
            --rouge: #E53E3E; --orange: #DD6B20; --bleu-info: #2B6CB0;
            --fond: #F7FAFC; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; font-size: 1.05rem; }

        nav { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D; padding: 16px 40px; display: flex; align-items: center; gap: 30px; }
        nav .logo-conservation { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; }
        nav a { color: #1A365D; text-decoration: none; }
        nav a:hover { color: #3182CE; }

        .page-conservation { max-width: 1050px; margin: 40px auto; padding: 0 20px 60px; }

        h1 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.9rem; margin-bottom: 6px; }
        .sous-titre-conservation { color: var(--gris); margin-bottom: 28px; }

        /* COMPTEURS */
        .grille-compteurs-conservation {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px; margin-bottom: 32px;
        }
        .compteur-conservation {
            background: white; border-radius: 14px; padding: 18px 16px;
            text-align: center; border: 2px solid var(--bordure);
            cursor: pointer; transition: all 0.2s;
        }
        .compteur-conservation:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
        .compteur-conservation.actif-conservation { border-width: 3px; }
        .compteur-conservation .nombre-conservation { font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
        .compteur-conservation .libelle-conservation { font-size: 0.82rem; font-weight: 600; margin-top: 6px; }

        .c-rouge-conservation  .nombre-conservation { color: var(--rouge); }
        .c-rouge-conservation.actif-conservation    { border-color: var(--rouge); background: #FFF5F5; }
        .c-orange-conservation .nombre-conservation { color: var(--orange); }
        .c-orange-conservation.actif-conservation   { border-color: var(--orange); background: #FFFAF0; }
        .c-bleu-conservation   .nombre-conservation { color: var(--bleu-info); }
        .c-bleu-conservation.actif-conservation     { border-color: var(--bleu-info); background: #EBF8FF; }
        .c-vert-conservation   .nombre-conservation { color: var(--vert); }
        .c-vert-conservation.actif-conservation     { border-color: var(--vert); background: #F0FFF4; }
        .c-gris-conservation   .nombre-conservation { color: var(--gris); }
        .c-gris-conservation.actif-conservation     { border-color: var(--gris); background: #F7FAFC; }

        /* BARRE ACTIONS */
        .barre-actions-conservation {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 22px; flex-wrap: wrap;
        }
        .btn-conservation { padding: 10px 20px; border-radius: 9px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; transition: all 0.2s; }
        .btn-exporter-conservation { background: #EBF8FF; color: var(--bleu-clair); border: 1px solid #BEE3F8; }
        .btn-exporter-conservation:hover { background: #BEE3F8; }
        .btn-aide-conservation { background: white; color: var(--gris); border: 1px solid var(--bordure); }
        .btn-aide-conservation:hover { background: var(--fond); }
        .info-selection-conservation { font-size: 0.9rem; color: var(--gris); margin-left: auto; }

        /* LISTE DOCUMENTS */
        .section-titre-conservation {
            font-family: 'Montserrat', sans-serif; font-size: 1.1rem;
            margin: 24px 0 14px; display: flex; align-items: center; gap: 10px;
        }
        .section-titre-conservation::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

        .doc-liste-conservation { display: flex; flex-direction: column; gap: 10px; }

        .doc-carte-conservation {
            background: white; border-radius: 13px; border: 1.5px solid var(--bordure);
            padding: 16px 20px; display: flex; align-items: center; gap: 16px;
            transition: box-shadow 0.2s;
        }
        .doc-carte-conservation:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.07); }

        .doc-badge-conservation {
            width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
        }
        .badge-rouge-conservation  { background: #FFF5F5; }
        .badge-orange-conservation { background: #FFFAF0; }
        .badge-bleu-conservation   { background: #EBF8FF; }
        .badge-vert-conservation   { background: #F0FFF4; }
        .badge-gris-conservation   { background: #F7FAFC; }

        .doc-info-conservation { flex: 1; min-width: 0; }
        .doc-info-conservation .nom-conservation { font-weight: 700; color: #2D3748; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .doc-info-conservation .chemin-conservation { font-size: 0.8rem; color: var(--gris); margin-top: 2px; }
        .doc-info-conservation .meta-conservation { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
        .doc-info-conservation .meta-conservation span { font-size: 0.82rem; }
        .meta-duree-conservation  { color: var(--gris); }
        .meta-expire-conservation { font-weight: 700; }
        .meta-expire-conservation.rouge-conservation  { color: var(--rouge); }
        .meta-expire-conservation.orange-conservation { color: var(--orange); }
        .meta-expire-conservation.vert-conservation   { color: var(--vert); }

        .doc-actions-conservation { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .btn-archiver-conservation  { background: #EBF8FF; color: var(--bleu-info); border: 1px solid #BEE3F8; padding: 8px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; }
        .btn-archiver-conservation:hover  { background: #BEE3F8; }
        .btn-supprimer-conservation { background: #FFF5F5; color: var(--rouge); border: 1px solid #FEB2B2; padding: 8px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; }
        .btn-supprimer-conservation:hover { background: #FED7D7; }

        /* ÉTAT VIDE */
        .vide-conservation { text-align: center; padding: 40px; color: var(--gris); background: white; border-radius: 14px; border: 2px dashed var(--bordure); }
        .vide-conservation .vide-icone-conservation { font-size: 2.5rem; margin-bottom: 10px; }

        /* MODAL ARCHIVAGE */
        .modal-overlay-conservation { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay-conservation.visible-conservation { display: flex; }
        .modal-conservation { background: white; border-radius: 20px; padding: 32px; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
        .modal-conservation h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.2rem; margin-bottom: 20px; }

        .etapes-archivage-conservation { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
        .etape-conservation { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--fond); border: 1px solid var(--bordure); }
        .etape-num-conservation { width: 32px; height: 32px; border-radius: 50%; background: var(--bleu-clair); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 0.95rem; }
        .etape-texte-conservation strong { display: block; color: #2D3748; margin-bottom: 3px; }
        .etape-texte-conservation small { color: var(--gris); font-size: 0.88rem; line-height: 1.4; }

        .zone-boutons-modal-conservation { display: flex; gap: 10px; flex-wrap: wrap; }
        .btn-confirmer-archive-conservation { background: var(--bleu-clair); color: white; padding: 13px 24px; border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer; border: none; font-family: 'Inter', sans-serif; flex: 1; }
        .btn-confirmer-archive-conservation:hover { background: var(--bleu); }
        .btn-annuler-conservation { background: var(--fond); color: var(--gris); padding: 13px 20px; border-radius: 9px; font-size: 0.95rem; cursor: pointer; border: 1px solid var(--bordure); font-family: inherit; }

        /* MODAL SUPPRESSION */
        .alerte-suppression-conservation { background: #FFF5F5; border: 1.5px solid #FEB2B2; border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
        .alerte-suppression-conservation strong { color: var(--rouge); display: block; margin-bottom: 6px; }
        .alerte-suppression-conservation p { color: #742A2A; font-size: 0.9rem; line-height: 1.5; }
        .btn-confirmer-suppr-conservation { background: var(--rouge); color: white; padding: 13px 24px; border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
        .btn-confirmer-suppr-conservation:hover { background: #C53030; }

        /* MODAL AIDE */
        .regle-ligne-conservation { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: 0.9rem; }
        .regle-ligne-conservation:last-child { border-bottom: none; }
        .regle-duree-conservation { font-weight: 700; color: var(--bleu-clair); flex-shrink: 0; margin-left: 12px; }

/* ----------------------------------------------------------------------------
   BIBLIOTHEQUE_LIENS.HTML (-biblio)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #276749;
            --vert-bg: #F0FFF4; --fond: #F7FAFC; --blanc: #fff;
            --gris: #718096; --bordure: #E2E8F0; --rouge: #E53E3E;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        nav { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D; padding: 16px 36px; display: flex; align-items: center; gap: 28px; }
        nav .logo-biblio { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; }
        nav a { color: #1A365D; text-decoration: none; font-size: 0.95rem; }
        nav a:hover { color: #3182CE; }

        .page-biblio { max-width: 1000px; margin: 32px auto; padding: 0 20px 60px; }

        h1 { font-family: 'Montserrat', sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--bleu); margin-bottom: 6px; }
        .sous-titre-biblio { color: var(--gris); margin-bottom: 18px; font-size: 1rem; }

        /* Bandeau CNIL */
        .bandeau-cnil-biblio {
            background: #EBF8FF; border: 1px solid #90CDF4; border-radius: 12px;
            padding: 12px 18px; margin-bottom: 28px;
            display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: #2C5282;
        }
        .bandeau-cnil-biblio strong { display: block; margin-bottom: 2px; }

        /* ── SECTION RACCOURCIS ACTIFS ── */
        .section-raccourcis-biblio {
            background: var(--blanc); border-radius: 20px;
            border: 3px solid var(--bleu-clair);
            padding: 24px; margin-bottom: 24px;
        }
        .section-raccourcis-biblio h2 {
            font-family: 'Montserrat', sans-serif; font-size: 1.15rem;
            color: var(--bleu); margin-bottom: 20px;
            display: flex; align-items: center; gap: 8px;
        }
        .grille-raccourcis-biblio {
            display: flex; flex-wrap: wrap; gap: 16px;
        }

        /* Gros bouton raccourci */
        .raccourci-btn-biblio {
            position: relative;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            width: 140px; min-height: 130px;
            background: var(--blanc); border: 3px solid #BEE3F8; border-radius: 20px;
            text-decoration: none; color: var(--bleu);
            font-weight: 700; font-size: 0.95rem; text-align: center;
            padding: 16px 10px 14px;
            cursor: pointer; transition: all 0.18s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        }
        .raccourci-btn-biblio:hover { border-color: var(--bleu-clair); box-shadow: 0 6px 20px rgba(49,130,206,0.22); transform: translateY(-3px); }
        .raccourci-btn-biblio img {
            width: 52px; height: 52px;
            object-fit: contain; border-radius: 10px;
            margin-bottom: 10px; display: block;
        }
        .raccourci-btn-biblio .nom-service-biblio { line-height: 1.2; word-break: break-word; }
        .raccourci-btn-biblio .btn-x-biblio {
            position: absolute; top: -10px; right: -10px;
            background: var(--rouge); color: white; border: none;
            border-radius: 50%; width: 28px; height: 28px;
            font-size: 0.9rem; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background 0.15s;
        }
        .raccourci-btn-biblio .btn-x-biblio:hover { background: #C53030; }
        .vide-raccourcis-biblio {
            color: var(--gris); font-style: italic;
            font-size: 1rem; padding: 20px 0;
            display: flex; align-items: center; gap: 8px;
        }

        /* ── BOUTON OUVRIR BIBLIOTHÈQUE ── */
        .btn-bibliotheque-biblio {
            width: 100%; padding: 18px 24px;
            background: var(--bleu); color: white;
            border: none; border-radius: 16px;
            font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            gap: 12px; margin-bottom: 0; transition: background 0.18s;
            box-shadow: 0 4px 14px rgba(26,54,93,0.25);
        }
        .btn-bibliotheque-biblio:hover { background: #2c4f7a; }
        .btn-bibliotheque-biblio .chevron-biblio { font-size: 1.2rem; transition: transform 0.25s; }
        .btn-bibliotheque-biblio.ouvert-biblio .chevron-biblio { transform: rotate(180deg); }

        /* ── PANNEAU BIBLIOTHÈQUE ── */
        .panneau-bibliotheque-biblio {
            display: none; background: var(--blanc);
            border: 2px solid var(--bordure); border-radius: 0 0 16px 16px;
            border-top: none; overflow: hidden;
            margin-bottom: 24px;
        }
        .panneau-bibliotheque-biblio.ouvert-biblio { display: block; }

        /* Recherche dans la bibliothèque */
        .barre-recherche-biblio {
            position: relative; padding: 16px 20px 10px;
            border-bottom: 1px solid var(--bordure);
        }
        .barre-recherche-biblio input {
            width: 100%; padding: 13px 16px 13px 46px;
            border: 2px solid var(--bordure); border-radius: 12px;
            font-family: 'Inter', sans-serif; font-size: 1rem; background: var(--fond);
        }
        .barre-recherche-biblio input:focus { outline: none; border-color: var(--bleu-clair); }
        .barre-recherche-biblio .ico-biblio { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; }

        /* Accordéon catégories */
        .cat-accordion-biblio { border-bottom: 1px solid var(--bordure); }
        .cat-header-biblio {
            width: 100%; background: none; border: none;
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 24px; cursor: pointer;
            font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700;
            color: var(--bleu); text-align: left; transition: background 0.15s;
        }
        .cat-header-biblio:hover { background: #EBF8FF; }
        .cat-header-biblio .cat-chevron-biblio { font-size: 0.85rem; color: var(--gris); transition: transform 0.22s; }
        .cat-header-biblio.ouvert-biblio .cat-chevron-biblio { transform: rotate(180deg); }
        .cat-body-biblio { display: none; padding: 14px 20px 20px; background: var(--fond); }
        .cat-body-biblio.ouvert-biblio { display: block; }

        /* Grille services dans catalogue */
        .services-grid-biblio {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 12px;
        }
        .service-card-biblio {
            background: var(--blanc); border-radius: 14px; border: 2px solid var(--bordure);
            padding: 14px 10px; text-align: center; cursor: pointer;
            transition: all 0.15s; position: relative;
        }
        .service-card-biblio:hover { border-color: var(--bleu-clair); box-shadow: 0 4px 14px rgba(0,0,0,0.09); transform: translateY(-2px); }
        .service-card-biblio.actif-biblio { border-color: var(--vert); background: var(--vert-bg); }
        .service-card-biblio img.logo-service-biblio {
            width: 40px; height: 40px; object-fit: contain;
            border-radius: 8px; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto;
        }
        .service-card-biblio .nom-biblio { font-size: 0.82rem; font-weight: 700; color: #2D3748; margin-bottom: 10px; line-height: 1.2; }
        .service-card-biblio .btn-toggle-biblio {
            width: 100%; padding: 7px 8px;
            border: none; border-radius: 8px; cursor: pointer;
            font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700;
            background: #EBF8FF; color: var(--bleu-clair); transition: background 0.15s;
        }
        .service-card-biblio.actif-biblio .btn-toggle-biblio { background: #C6F6D5; color: var(--vert); }
        .service-card-biblio .btn-toggle-biblio:hover { opacity: 0.85; }

        /* Résultat vide */
        .vide-recherche-biblio {
            text-align: center; color: var(--gris); padding: 24px;
            font-size: 0.95rem;
        }

        /* ── SECTION CRÉER UN ACCÈS ── */
        .section-creer-biblio {
            background: var(--blanc); border-radius: 16px;
            border: 2px solid var(--bordure);
            padding: 22px 24px; margin-top: 24px;
        }
        .section-creer-biblio h2 {
            font-family: 'Montserrat', sans-serif; font-size: 1.05rem;
            color: var(--bleu); margin-bottom: 6px;
        }
        .section-creer-biblio p { font-size: 0.88rem; color: var(--gris); margin-bottom: 16px; }
        .form-creer-biblio { display: flex; flex-direction: column; gap: 12px; }
        .form-creer-biblio input {
            padding: 13px 16px; border: 2px solid var(--bordure); border-radius: 10px;
            font-size: 1rem; font-family: 'Inter', sans-serif;
            background: var(--fond);
        }
        .form-creer-biblio input:focus { outline: none; border-color: var(--bleu-clair); }
        .btn-creer-biblio {
            padding: 14px 24px; background: var(--vert); color: white;
            border: none; border-radius: 10px; font-weight: 700; font-size: 1rem;
            cursor: pointer; font-family: 'Inter', sans-serif; align-self: flex-start;
        }
        .btn-creer-biblio:hover { background: #2F855A; }
        .liste-perso-accces-biblio { margin-top: 14px; }
        .lien-perso-biblio {
            display: flex; align-items: center; gap: 12px; padding: 12px 0;
            border-top: 1px solid var(--bordure);
        }
        .lien-perso-biblio img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; }
        .lien-perso-nom-biblio { font-weight: 600; font-size: 0.9rem; color: var(--bleu); flex: 1; }
        .lien-perso-url-biblio { font-size: 0.75rem; color: var(--gris); }
        .btn-suppr-perso-biblio { background: none; border: none; cursor: pointer; color: var(--gris); font-size: 1.1rem; padding: 4px; }
        .btn-suppr-perso-biblio:hover { color: var(--rouge); }
        .btn-ouvrir-perso-biblio {
            padding: 6px 12px; background: #EBF8FF; color: var(--bleu-clair);
            border-radius: 8px; font-size: 0.8rem; font-weight: 700;
            text-decoration: none; white-space: nowrap;
        }

        @media (max-width: 600px) {
            .raccourci-btn-biblio { width: 120px; min-height: 115px; }
            nav { padding: 14px 16px; gap: 16px; }
            .page-biblio { margin: 16px auto; }
            h1 { font-size: 1.5rem; }
        }

/* ----------------------------------------------------------------------------
   COUPS_DE_MAIN.HTML (-coups)
---------------------------------------------------------------------------- */

:root {
      --bleu:#1A365D; --bleu-clair:#3182CE; --bleu-cl:#EBF8FF;
      --vert:#276749; --vert-cl:#F0FFF4; --vert-bd:#9AE6B4;
      --orange:#DD6B20; --orange-cl:#FFFAF0; --orange-bd:#FBD38D;
      --violet:#553C9A; --violet-cl:#FAF5FF; --violet-bd:#D6BCFA;
      --rose:#D53F8C; --rose-cl:#FFF5F7;
      --fond:#F7FAFC; --blanc:#fff; --gris:#718096; --bordure:#E2E8F0;
    }
    *{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:'Inter',sans-serif;background:var(--fond);color:#2D3748;min-height:100vh;}

    nav{background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D;padding:14px 28px;display:flex;align-items:center;gap:20px;}
    nav .logo-coups{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.2rem;}
    nav a{color:#1A365D;text-decoration:none;font-size:0.92rem;}
    nav a:hover{color:#3182CE;}

    /* ── HEADER ── */
    .header-coups{
      background:linear-gradient(135deg,#1A365D 0%,#2B6CB0 100%);
      color:white;padding:22px 28px;display:flex;align-items:center;gap:16px;
    }
    .header-ico-coups{font-size:2.8rem;}
    .header-coups h1{font-family:'Montserrat',sans-serif;font-size:1.55rem;font-weight:800;margin-bottom:3px;}
    .header-coups p{font-size:0.88rem;opacity:0.88;}

    /* ── RECHERCHE ── */
    .barre-recherche-coups{
      background:white;border-bottom:1px solid var(--bordure);padding:14px 20px;
      position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,0.05);
    }
    .input-recherche-wrap-coups{position:relative;}
    .input-recherche-coups{
      width:100%;padding:12px 44px 12px 16px;border:2px solid var(--bordure);
      border-radius:14px;font-size:1rem;font-family:'Inter',sans-serif;background:white;
      transition:border-color .2s;
    }
    .input-recherche-coups:focus{outline:none;border-color:var(--bleu-clair);}
    .recherche-ico-coups{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--gris);}
    .btn-effacer-recherche-coups{
      position:absolute;right:14px;top:50%;transform:translateY(-50%);
      background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--gris);display:none;
    }

    /* ── CONTENU ── */
    .contenu-coups{max-width:820px;margin:0 auto;padding:20px 16px 80px;}

    /* ── CATÉGORIES ── */
    .cats-grid-coups{
      display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px;
    }
    @media(min-width:600px){.cats-grid{grid-template-columns:repeat(4,1fr);}}
    .cat-btn-coups{
      background:white;border:2px solid var(--bordure);border-radius:18px;
      padding:16px 10px;text-align:center;cursor:pointer;transition:all .2s;
    }
    .cat-btn-coups:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,0.1);}
    .cat-btn-coups.actif-coups{border-width:3px;}
    .cat-ico-coups{font-size:2.2rem;margin-bottom:6px;}
    .cat-nom-coups{font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.82rem;color:var(--bleu);}
    .cat-count-coups{font-size:0.85rem;color:var(--gris);margin-top:2px;}

    /* Couleurs par catégorie */
    .cat-exterieur-coups{--cc:var(--vert);--ccl:var(--vert-cl);--ccb:var(--vert-bd);}
    .cat-bricolage-coups{--cc:var(--orange);--ccl:var(--orange-cl);--ccb:var(--orange-bd);}
    .cat-maison-coups{--cc:var(--rose);--ccl:var(--rose-cl);--ccb:#FED7E2;}
    .cat-pratique-coups{--cc:var(--violet);--ccl:var(--violet-cl);--ccb:var(--violet-bd);}
    .cat-btn-coups.actif-coups{border-color:var(--cc);background:var(--ccl);}
    .cat-btn-coups.actif-coups .cat-nom-coups{color:var(--cc);}

    /* ── SECTION SERVICES ── */
    .section-services-coups{margin-bottom:10px;}
    .section-titre-coups{
      font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;
      color:var(--bleu);margin-bottom:12px;display:flex;align-items:center;
      justify-content:space-between;flex-wrap:wrap;gap:8px;
    }
    .btn-ajouter-coups{
      padding:8px 16px;background:var(--bleu-clair);color:white;border:none;
      border-radius:10px;font-weight:700;font-size:0.85rem;cursor:pointer;
      font-family:'Inter',sans-serif;display:flex;align-items:center;gap:5px;
      transition:background .18s;
    }
    .btn-ajouter-coups:hover{background:var(--bleu);}

    /* ── CARTE PRESTATAIRE ── */
    .carte-coups{
      background:white;border:2px solid var(--bordure);border-radius:18px;
      padding:16px 18px;margin-bottom:10px;transition:all .2s;
    }
    .carte-coups:hover{box-shadow:0 4px 14px rgba(0,0,0,0.08);}
    .carte-top-coups{display:flex;align-items:flex-start;gap:14px;}
    .carte-avatar-coups{
      width:54px;height:54px;border-radius:14px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;font-size:1.8rem;
    }
    .carte-infos-coups{flex:1;}
    .carte-nom-coups{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;color:var(--bleu);margin-bottom:2px;}
    .carte-type-coups{font-size:0.8rem;color:var(--gris);margin-bottom:6px;}
    .carte-services-tags-coups{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
    .service-tag-coups{
      padding:3px 10px;border-radius:20px;font-size:0.85rem;font-weight:600;
      background:#EDF2F7;color:#4A5568;
    }
    .carte-note-coups{color:var(--gris);font-size:0.82rem;margin-top:4px;line-height:1.5;font-style:italic;}
    .carte-actions-coups{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
    .btn-appeler-coups{
      flex:1;padding:10px;background:var(--vert);color:white;border:none;
      border-radius:12px;font-weight:700;font-size:0.95rem;cursor:pointer;
      font-family:'Inter',sans-serif;text-decoration:none;
      display:flex;align-items:center;justify-content:center;gap:6px;
      transition:background .18s;
    }
    .btn-appeler-coups:hover{background:#276749;}
    .btn-modifier-carte-coups{
      padding:10px 14px;background:white;color:var(--gris);border:2px solid var(--bordure);
      border-radius:12px;font-size:0.85rem;cursor:pointer;font-family:'Inter',sans-serif;
      transition:all .18s;
    }
    .btn-modifier-carte-coups:hover{border-color:var(--bleu-clair);color:var(--bleu-clair);}
    .etoiles-coups{display:flex;gap:2px;margin-bottom:4px;}
    .etoile-coups{font-size:1rem;color:#F6AD55;}
    .etoile-coups.vide-coups{color:#E2E8F0;}

    /* ── ZONE VIDE ── */
    .zone-vide-coups{
      text-align:center;padding:2.5rem 1rem;color:var(--gris);
      background:white;border:2px dashed var(--bordure);border-radius:18px;margin-bottom:14px;
    }
    .zone-vide-coups .ico-coups{font-size:3rem;display:block;margin-bottom:10px;}
    .zone-vide-coups p{font-size:0.9rem;line-height:1.6;}

    /* ── RÉSULTATS RECHERCHE ── */
    .recherche-resultat-titre-coups{
      font-size:0.85rem;color:var(--gris);margin-bottom:14px;font-weight:600;
    }

    /* ── FORMULAIRE (modale) ── */
    .modale-overlay-coups{
      display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);
      z-index:200;padding:12px;overflow-y:auto;
    }
    .modale-overlay-coups.visible-coups{display:block;}
    .modale-boite-coups{
      background:white;max-width:540px;width:100%;border-radius:22px;
      padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.2);
      margin:20px auto 40px;position:relative;
    }
    .modale-titre-coups{
      font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;
      color:var(--bleu);margin-bottom:4px;
    }
    .modale-sous-coups{color:var(--gris);font-size:0.85rem;margin-bottom:18px;}
    .modale-fermer-coups{
      position:absolute;top:16px;right:18px;background:none;border:none;
      font-size:1.3rem;cursor:pointer;color:var(--gris);padding:4px 8px;border-radius:6px;
    }
    .modale-fermer-coups:hover{background:var(--fond);}

    .champ-coups{margin-bottom:12px;}
    .champ-coups label{display:block;font-weight:600;font-size:0.85rem;color:#4A5568;margin-bottom:4px;}
    .champ-coups input,.champ-coups select,.champ-coups textarea{
      width:100%;padding:10px 13px;border:2px solid var(--bordure);border-radius:10px;
      font-size:0.95rem;font-family:'Inter',sans-serif;background:white;color:#2D3748;
    }
    .champ-coups input:focus,.champ-coups select:focus,.champ-coups textarea:focus{outline:none;border-color:var(--bleu-clair);}
    .champ-coups textarea{resize:vertical;min-height:60px;}
    .grille-2-coups{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
    @media(max-width:480px){.grille-2{grid-template-columns:1fr;}}

    /* Sélection de services */
    .services-checkboxes-coups{
      display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;
    }
    .service-check-coups{
      display:flex;align-items:center;gap:5px;padding:6px 12px;
      border:2px solid var(--bordure);border-radius:20px;cursor:pointer;
      font-size:0.82rem;font-weight:600;transition:all .15s;user-select:none;
      background:white;color:#4A5568;
    }
    .service-check-coups.selectionne-coups{background:var(--bleu-clair);border-color:var(--bleu-clair);color:white;}
    .service-check-coups input{display:none;}

    /* Étoiles notation */
    .notation-etoiles-coups{display:flex;gap:6px;padding:4px 0;}
    .etoile-btn-coups{font-size:1.6rem;cursor:pointer;color:#E2E8F0;transition:color .15s;background:none;border:none;}
    .etoile-btn-coups.lit-coups{color:#F6AD55;}
    .etoile-btn-coups:hover{color:#F6AD55;}

    /* Actions modale */
    .modale-actions-coups{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
    .btn-valider-coups{
      flex:1;padding:12px;background:var(--bleu-clair);color:white;border:none;
      border-radius:12px;font-weight:700;font-size:0.95rem;cursor:pointer;font-family:'Inter',sans-serif;
    }
    .btn-valider-coups:hover{background:var(--bleu);}
    .btn-annuler-coups{
      padding:12px 18px;background:white;color:var(--gris);border:2px solid var(--bordure);
      border-radius:12px;font-weight:600;font-size:0.9rem;cursor:pointer;font-family:'Inter',sans-serif;
    }

    /* Suppression 2 étapes */
    .zone-supp-coups{margin-top:16px;border-top:1px solid var(--bordure);padding-top:14px;}
    .btn-supp-discret-coups{
      background:none;border:none;color:#A0AEC0;font-size:0.8rem;cursor:pointer;
      font-family:'Inter',sans-serif;text-decoration:underline;padding:0;
    }
    .confirm-supp-coups{
      display:none;background:#FFF5F5;border:2px solid #FEB2B2;border-radius:12px;
      padding:12px;margin-top:10px;
    }
    .confirm-supp-coups p{font-size:0.88rem;color:#742A2A;font-weight:600;margin-bottom:10px;}
    .confirm-supp-actions-coups{display:flex;gap:8px;}
    .btn-non-coups{flex:1;padding:9px;background:white;color:var(--gris);border:2px solid var(--bordure);border-radius:9px;font-weight:700;font-size:0.88rem;cursor:pointer;font-family:'Inter',sans-serif;}
    .btn-oui-supp-coups{padding:9px 16px;background:#E53E3E;color:white;border:none;border-radius:9px;font-weight:700;font-size:0.88rem;cursor:pointer;font-family:'Inter',sans-serif;}

/* ----------------------------------------------------------------------------
   DOSSIERS_PRETS.HTML (-dossiers)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D;
            --bleu-clair: #3182CE;
            --vert: #38A169;
            --rouge: #E53E3E;
            --orange: #DD6B20;
            --fond: #F7FAFC;
            --blanc: #ffffff;
            --gris: #718096;
            --bordure: #E2E8F0;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--fond);
            color: #2D3748;
            font-size: 1.05rem;
            line-height: 1.7;
        }

        /* NAVIGATION */
        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D;
            padding: 16px 40px;
            display: flex;
            align-items: center;
            gap: 30px;
        }
        nav .logo-dossiers { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; }
        nav a { color: #1A365D; text-decoration: none; font-size: 1rem; }
        nav a:hover { color: #3182CE; }

        /* MISE EN PAGE */
        .page-dossiers { max-width: 1100px; margin: 40px auto; padding: 0 20px; }

        .entete-page-dossiers {
            margin-bottom: 32px;
        }
        .entete-page-dossiers h1 {
            font-family: 'Montserrat', sans-serif;
            color: var(--bleu);
            font-size: 1.8rem;
            margin-bottom: 6px;
        }
        .entete-page-dossiers p { color: var(--gris); font-size: 1.05rem; }

        a.retour-dossiers {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--bleu-clair); text-decoration: none; font-weight: 600;
            margin-bottom: 20px; font-size: 1rem;
        }
        a.retour-dossiers:hover { color: var(--bleu); }

        /* VUE LISTE DES DOSSIERS */
        #vue-liste { display: block; }
        #vue-detail { display: none; }

        .grille-dossiers-dossiers {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
        }

        .carte-dossier-dossiers {
            background: var(--blanc);
            border: 2px solid var(--bordure);
            border-radius: 16px;
            padding: 24px 20px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }
        .carte-dossier-dossiers:hover {
            border-color: var(--bleu-clair);
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        }
        .carte-dossier-dossiers .icone-dossier-dossiers { font-size: 2.5rem; margin-bottom: 12px; display: block; }
        .carte-dossier-dossiers h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.05rem;
            color: var(--bleu);
            margin-bottom: 6px;
        }
        .carte-dossier-dossiers p { font-size: 0.9rem; color: var(--gris); margin-bottom: 14px; }

        .organismes-dossiers { display: flex; flex-wrap: wrap; gap: 6px; }
        .badge-org-dossiers {
            font-size: 0.75rem;
            background: #EBF8FF;
            color: var(--bleu-clair);
            border: 1px solid #BEE3F8;
            border-radius: 12px;
            padding: 2px 10px;
        }
        .nb-docs-dossiers {
            margin-top: 14px;
            font-size: 0.85rem;
            color: var(--gris);
        }
        .nb-docs-dossiers strong { color: var(--bleu); }

        /* VUE DÉTAIL DU DOSSIER */
        .detail-entete-dossiers {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: var(--bleu);
            color: white;
            padding: 28px 32px;
            border-radius: 16px 16px 0 0;
        }
        .detail-icone-dossiers { font-size: 3rem; }
        .detail-entete-dossiers h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.5rem;
            margin-bottom: 6px;
        }
        .detail-entete-dossiers p { opacity: 0.85; font-size: 0.95rem; }

        .detail-corps-dossiers {
            background: var(--blanc);
            border-radius: 0 0 16px 16px;
            border: 1px solid var(--bordure);
            border-top: none;
            padding: 32px;
            margin-bottom: 30px;
        }

        /* ORGANISMES CONCERNÉS */
        .bloc-organismes-dossiers {
            margin-bottom: 28px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--bordure);
        }
        .bloc-organismes-dossiers h3 {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--gris);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        /* LISTE DE CONTRÔLE */
        .section-docs-dossiers h3 {
            font-family: 'Montserrat', sans-serif;
            color: var(--bleu);
            font-size: 1rem;
            margin-bottom: 16px;
        }

        .barre-progression-dossiers {
            background: var(--bordure);
            border-radius: 20px;
            height: 10px;
            margin-bottom: 6px;
            overflow: hidden;
        }
        .barre-remplie-dossiers {
            height: 100%;
            border-radius: 20px;
            background: var(--vert);
            transition: width 0.4s ease;
        }
        .texte-progression-dossiers {
            font-size: 0.85rem;
            color: var(--gris);
            margin-bottom: 24px;
        }
        .texte-progression-dossiers strong { color: var(--vert); }

        .liste-controle-dossiers { list-style: none; display: flex; flex-direction: column; gap: 10px; }

        .item-doc-dossiers {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            border-radius: 10px;
            border: 1px solid var(--bordure);
            background: var(--fond);
            cursor: pointer;
            transition: background 0.15s;
        }
        .item-doc-dossiers:hover { background: #EBF8FF; border-color: #BEE3F8; }
        .item-doc-dossiers.coche-dossiers { background: #F0FFF4; border-color: #9AE6B4; }

        .case-a-cocher-dossiers {
            width: 24px; height: 24px;
            border-radius: 6px;
            border: 2px solid var(--bordure);
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            background: white;
            transition: all 0.15s;
        }
        .item-doc-dossiers.coche-dossiers .case-a-cocher-dossiers {
            background: var(--vert);
            border-color: var(--vert);
            color: white;
        }

        .doc-info-dossiers { flex: 1; }
        .doc-nom-dossiers { font-size: 1rem; color: #2D3748; }
        .doc-categorie-dossiers { font-size: 0.8rem; color: var(--gris); margin-top: 2px; }

        .badge-obligatoire-dossiers {
            font-size: 0.75rem;
            padding: 2px 10px;
            border-radius: 12px;
            background: #FFF5F5;
            color: var(--rouge);
            border: 1px solid #FEB2B2;
            white-space: nowrap;
        }
        .badge-optionnel-dossiers {
            font-size: 0.75rem;
            padding: 2px 10px;
            border-radius: 12px;
            background: var(--fond);
            color: var(--gris);
            border: 1px solid var(--bordure);
            white-space: nowrap;
        }

        /* BOUTON PRÉPARER */
        .zone-actions-dossiers {
            display: flex;
            gap: 14px;
            margin-top: 28px;
            flex-wrap: wrap;
        }
        .btn-dossiers {
            padding: 14px 28px;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .btn-principal-dossiers {
            background: var(--bleu-clair);
            color: white;
        }
        .btn-principal-dossiers:hover { background: var(--bleu); }
        .btn-secondaire-dossiers {
            background: white;
            color: var(--bleu-clair);
            border: 2px solid var(--bleu-clair);
        }
        .btn-secondaire-dossiers:hover { background: #EBF8FF; }

        /* CHARGEMENT */
        .chargement-dossiers { text-align: center; padding: 60px; color: var(--gris); font-size: 1.1rem; }

        /* MODAL ENVOI EMAIL */
        .modal-fond-dossiers {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .modal-fond-dossiers.ouvert-dossiers { display: flex; }
        .modal-envoi-dossiers {
            background: white;
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .modal-envoi-entete-dossiers {
            background: linear-gradient(135deg, #1A365D 0%, #2B6CB0 100%);
            color: white;
            padding: 24px 28px;
        }
        .modal-envoi-entete-dossiers h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 4px;
        }
        .modal-envoi-entete-dossiers p { opacity: 0.85; font-size: 0.9rem; }
        .modal-envoi-corps-dossiers { padding: 28px; }
        .champ-label-dossiers {
            display: block;
            font-weight: 600;
            font-size: 0.9rem;
            color: #4A5568;
            margin-bottom: 6px;
            margin-top: 18px;
        }
        .champ-label-dossiers:first-child { margin-top: 0; }
        .champ-input-dossiers {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--bordure);
            border-radius: 10px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.2s;
            background: var(--fond);
        }
        .champ-input-dossiers:focus { outline: none; border-color: var(--bleu-clair); background: white; }
        textarea.champ-input-dossiers { resize: vertical; min-height: 120px; line-height: 1.5; }
        .liste-pj-dossiers {
            background: #F0FFF4;
            border: 1px solid #9AE6B4;
            border-radius: 10px;
            padding: 12px 16px;
            margin-top: 8px;
            font-size: 0.88rem;
            color: #276749;
        }
        .liste-pj-dossiers div { padding: 2px 0; }
        .modal-envoi-actions-dossiers {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            flex-wrap: wrap;
        }
        .btn-envoyer-dossiers {
            flex: 1;
            padding: 15px 24px;
            background: linear-gradient(135deg, #38A169, #276749);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .btn-envoyer-dossiers:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(56,161,105,0.4); }
        .btn-envoyer-dossiers:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .btn-annuler-modal-dossiers {
            padding: 15px 24px;
            background: white;
            color: var(--gris);
            border: 2px solid var(--bordure);
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
        }
        .alerte-envoi-dossiers {
            padding: 14px 18px;
            border-radius: 10px;
            margin-top: 14px;
            font-size: 0.95rem;
            display: none;
        }
        .alerte-envoi-dossiers.succes-dossiers { background: #F0FFF4; color: #276749; border: 1px solid #9AE6B4; display: block; }
        .alerte-envoi-dossiers.erreur-dossiers { background: #FFF5F5; color: #C53030; border: 1px solid #FEB2B2; display: block; }

        /* BANNIÈRE DOSSIER PRÊT */
        .banniere-pret-dossiers {
            background: linear-gradient(135deg, #38A169 0%, #276749 100%);
            color: white;
            border-radius: 14px;
            padding: 22px 28px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 18px;
            box-shadow: 0 6px 20px rgba(56,161,105,0.3);
        }
        .banniere-pret-dossiers .icone-pret-dossiers { font-size: 2.5rem; }
        .banniere-pret-dossiers h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            margin-bottom: 4px;
        }
        .banniere-pret-dossiers p { opacity: 0.9; font-size: 0.95rem; }

        .banniere-incomplet-dossiers {
            background: #FFF3CD;
            border: 2px solid #F6C90E;
            color: #856404;
            border-radius: 14px;
            padding: 18px 24px;
            margin-bottom: 24px;
            font-size: 0.95rem;
        }
        .banniere-incomplet-dossiers strong { color: #533f03; }

        /* ITEMS DOCUMENTS INTELLIGENTS */
        .item-doc-auto-dossiers {
            border-radius: 10px;
            border: 1px solid var(--bordure);
            overflow: hidden;
            transition: all 0.15s;
        }
        .item-doc-auto-dossiers.trouve-dossiers { border-color: #9AE6B4; }
        .item-doc-auto-dossiers.manquant-dossiers { border-color: #FEB2B2; }

        .item-doc-haut-dossiers {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            background: var(--fond);
            cursor: pointer;
        }
        .item-doc-auto-dossiers.trouve-dossiers .item-doc-haut-dossiers { background: #F0FFF4; }
        .item-doc-auto-dossiers.manquant-dossiers .item-doc-haut-dossiers { background: #FFF5F5; }
        .item-doc-auto-dossiers.coche-manuel-dossiers .item-doc-haut-dossiers { background: #F0FFF4; border-color: #9AE6B4; }

        .statut-auto-dossiers {
            font-size: 1.3rem;
            flex-shrink: 0;
            width: 32px;
            text-align: center;
        }

        .item-doc-bas-dossiers {
            padding: 10px 18px 12px 64px;
            font-size: 0.88rem;
            border-top: 1px solid var(--bordure);
        }
        .item-doc-auto-dossiers.trouve-dossiers .item-doc-bas-dossiers { background: #E6FFED; border-top-color: #9AE6B4; }
        .item-doc-auto-dossiers.manquant-dossiers .item-doc-bas-dossiers { background: #FFF0F0; border-top-color: #FEB2B2; }

        .doc-trouve-nom-dossiers {
            color: #276749;
            font-weight: 600;
        }
        .doc-trouve-nom-dossiers a {
            color: #276749;
            text-decoration: underline;
        }
        .doc-manquant-txt-dossiers { color: #C53030; }

        .lien-ajouter-dossiers {
            display: inline-block;
            margin-top: 6px;
            font-size: 0.85rem;
            color: var(--bleu-clair);
            text-decoration: none;
            font-weight: 600;
        }
        .lien-ajouter-dossiers:hover { color: var(--bleu); }

        .override-manuel-dossiers {
            font-size: 0.8rem;
            color: var(--gris);
            margin-top: 6px;
            cursor: pointer;
            text-decoration: underline;
        }
        .override-manuel-dossiers:hover { color: #2D3748; }

/* ----------------------------------------------------------------------------
   ABONNEMENT.HTML (-abonnement)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --bleu-vif: #2B6CB0;
            --vert: #38A169; --rouge: #E53E3E; --orange: #DD6B20;
            --fond: #F7FAFC; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; font-size: 1rem; }

        nav { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D; padding: 14px 36px; display: flex; align-items: center; gap: 24px; }
        nav a { color: #1A365D; text-decoration: none; font-size: 0.95rem; }
        nav a:hover { color: #3182CE; }
        nav .logo-abonnement { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.25rem; }

        .page-abonnement { max-width: 900px; margin: 32px auto; padding: 0 20px 60px; }
        .page-titre-abonnement { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.7rem; margin-bottom: 6px; }
        .page-sous-titre-abonnement { color: var(--gris); margin-bottom: 32px; }
        .btn-retour-abonnement { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--bleu-clair); text-decoration: none; font-weight: 600; }
        .btn-retour-abonnement:hover { color: var(--bleu); }

        /* ── CARTE STATUT ACTUEL ── */
        .carte-statut-abonnement {
            background: white; border-radius: 18px; padding: 28px 32px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.07); border: 2px solid var(--bordure);
            margin-bottom: 28px;
        }
        .carte-statut-abonnement.essai-abonnement { border-color: #F6AD55; }
        .carte-statut-abonnement.actif-abonnement { border-color: #9AE6B4; }
        .carte-statut-abonnement.resilié-abonnement { border-color: #FEB2B2; }
        .statut-entete-abonnement { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
        .statut-icone-abonnement { font-size: 2.5rem; }
        .statut-info-abonnement h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.25rem; margin-bottom: 4px; }
        .badge-statut-abonnement {
            display: inline-block; padding: 4px 14px; border-radius: 20px;
            font-size: 0.82rem; font-weight: 700;
        }
        .badge-essai-abonnement   { background: #FEFCBF; color: #975A16; border: 1px solid #F6AD55; }
        .badge-actif-abonnement   { background: #F0FFF4; color: var(--vert); border: 1px solid #9AE6B4; }
        .badge-resilié-abonnement { background: #FFF5F5; color: var(--rouge); border: 1px solid #FEB2B2; }
        .badge-suspendu-abonnement { background: #EDF2F7; color: var(--gris); border: 1px solid var(--bordure); }
        .statut-grille-abonnement { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
        .statut-champ-abonnement label { font-size: 0.85rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 3px; }
        .statut-champ-abonnement .valeur-abonnement { font-size: 1rem; color: #2D3748; }
        .barre-essai-abonnement { background: #EDF2F7; border-radius: 10px; height: 12px; margin: 8px 0 4px; overflow: hidden; }
        .barre-essai-prog-abonnement { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #F6AD55, #ED8936); transition: width 0.5s; }
        .essai-label-abonnement { font-size: 0.82rem; color: var(--gris); }

        /* ── FORMULES ── */
        .section-titre-abonnement { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.2rem; margin-bottom: 16px; }
        .formules-grille-abonnement { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 28px; }
        .formule-carte-abonnement {
            background: white; border-radius: 16px; padding: 24px 22px;
            border: 2px solid var(--bordure); cursor: pointer; transition: all 0.15s;
            position: relative;
        }
        .formule-carte-abonnement:hover { border-color: var(--bleu-clair); box-shadow: 0 4px 18px rgba(49,130,206,0.1); transform: translateY(-2px); }
        .formule-carte-abonnement.selectionnee-abonnement { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(49,130,206,0.15); }
        .formule-carte-abonnement.actuelle-abonnement { border-color: var(--vert); background: #F0FFF4; }
        .badge-actuelle-abonnement { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vert); color: white; border-radius: 20px; padding: 3px 14px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
        .badge-vedette-abonnement { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--bleu-clair); color: white; border-radius: 20px; padding: 3px 14px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
        .formule-icone-abonnement { font-size: 2rem; margin-bottom: 10px; }
        .formule-nom-abonnement { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1rem; margin-bottom: 4px; }
        .formule-prix-abonnement { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--bleu); }
        .formule-prix-abonnement span { font-size: 0.9rem; font-weight: 600; color: var(--gris); }
        .formule-sans-engagement-abonnement { font-size: 0.75rem; color: var(--vert); font-weight: 700; margin: 3px 0 10px; }
        .formule-desc-abonnement { font-size: 0.83rem; color: #4A5568; line-height: 1.5; }

        /* ── FORMULAIRE PAIEMENT ── */
        .carte-paiement-abonnement {
            background: white; border-radius: 16px; padding: 28px 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 24px;
            border: 1.5px solid var(--bordure); display: none;
        }
        .carte-paiement-abonnement.visible-abonnement { display: block; }
        .m-champ-abonnement { margin-bottom: 14px; }
        .m-champ-abonnement label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
        .m-champ-abonnement input, .m-champ-abonnement select { width: 100%; border: 1.5px solid #CBD5E0; border-radius: 9px; padding: 10px 13px; font-size: 0.97rem; color: #2D3748; font-family: 'Inter', sans-serif; transition: border-color 0.15s; }
        .m-champ-abonnement input:focus, .m-champ-abonnement select:focus { outline: none; border-color: var(--bleu-clair); }
        .m-grille-2-abonnement { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .info-securite-abonnement { background: #EBF8FF; border: 1px solid #BEE3F8; border-radius: 10px; padding: 12px 16px; font-size: 0.83rem; color: #2B6CB0; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }

        /* ── BOUTONS ── */
        .btn-principal-abonnement { background: var(--bleu); color: white; border: none; border-radius: 10px; padding: 13px 24px; font-size: 0.97rem; font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; }
        .btn-principal-abonnement:hover { background: var(--bleu-vif); }
        .btn-principal-abonnement:disabled { background: #A0AEC0; cursor: not-allowed; }
        .btn-secondaire-abonnement { background: #EDF2F7; color: #4A5568; border: none; border-radius: 10px; padding: 11px 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
        .btn-secondaire-abonnement:hover { background: #E2E8F0; }
        .btn-danger-abonnement { background: #FFF5F5; color: var(--rouge); border: 1.5px solid #FEB2B2; border-radius: 10px; padding: 10px 20px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
        .btn-danger-abonnement:hover { background: #FED7D7; }
        .btns-actions-abonnement { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

        /* ── HISTORIQUE ── */
        .historique-liste-abonnement { display: flex; flex-direction: column; gap: 8px; }
        .historique-item-abonnement { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--fond); border-radius: 8px; }
        .histo-icone-abonnement { font-size: 1.2rem; }
        .histo-desc-abonnement { flex: 1; font-size: 0.88rem; color: #4A5568; }
        .histo-date-abonnement { font-size: 0.78rem; color: var(--gris); white-space: nowrap; }
        .histo-montant-abonnement { font-size: 0.88rem; font-weight: 700; color: var(--vert); white-space: nowrap; }

        /* ── MESSAGE ── */
        .msg-abonnement { padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; margin-top: 12px; display: none; }
        .msg-abonnement.succes-abonnement { background: #F0FFF4; color: #276749; border: 1px solid #9AE6B4; display: block; }
        .msg-abonnement.erreur-abonnement { background: #FFF5F5; color: var(--rouge); border: 1px solid #FEB2B2; display: block; }

        /* ── PAS D'ABO ── */
        .zero-abo-abonnement {
            text-align: center; padding: 40px 24px;
            background: white; border-radius: 18px; margin-bottom: 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .zero-abo-abonnement .icone-abonnement { font-size: 3.5rem; margin-bottom: 14px; }
        .zero-abo-abonnement h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.3rem; margin-bottom: 8px; }
        .zero-abo-abonnement p { color: var(--gris); margin-bottom: 24px; max-width: 440px; margin-left: auto; margin-right: auto; }

/* ==============================================================================
   LOT 5 — PAGES FINALES (légales + fonctionnelles)
   844 lignes — Ajouté le 25/04/2026
============================================================================== */


/* ----------------------------------------------------------------------------
   CGU.HTML (Conditions Générales d'Utilisation) (-cgu)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #38A169;
            --fond: #EBF4FF; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
            border-left: 10px solid #1A365D;
            padding: 14px 32px; display: flex; align-items: center; gap: 16px;
        }
        nav .logo-cgu { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        nav .logo-cgu img { width: 40px; height: 40px; object-fit: contain; }
        nav .logo-cgu .app-nom-genco { font-family: 'Montserrat', sans-serif; color: #4A5568; font-size: 1.3rem; font-weight: 700; }
        nav .logo-cgu .app-nom-aide { font-family: 'Montserrat', sans-serif; color: #E07B39; font-size: 1.3rem; font-weight: 700; }
        nav .logo-cgu sup { color: #4A5568; font-size: 0.7rem; }
        nav .nav-accueil {
            margin-left: auto; background: #1A365D; color: white; text-decoration: none;
            padding: 8px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
        }
        nav .nav-accueil:hover { background: #2B6CB0; }

        .hero-cgu {
            background: linear-gradient(135deg, var(--bleu) 0%, #2B6CB0 100%);
            padding: 48px 32px; text-align: center; color: white;
        }
        .hero-cgu h1 { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 10px; }
        .hero-cgu p { opacity: 0.85; font-size: 1rem; }
        .hero-cgu .badges { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
        .hero-cgu .badge {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px; padding: 5px 14px; font-size: 0.85rem;
        }

        .contenu-cgu { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

        .sommaire {
            background: white; border-radius: 16px; padding: 28px 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 40px;
            border-left: 4px solid var(--bleu-clair);
        }
        .sommaire h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1rem; margin-bottom: 14px; }
        .sommaire ol { padding-left: 20px; }
        .sommaire li { margin: 5px 0; }
        .sommaire a { color: var(--bleu-clair); text-decoration: none; font-size: 0.95rem; }
        .sommaire a:hover { text-decoration: underline; }

        .section {
            background: white; border-radius: 16px; padding: 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 24px;
        }
        .section h2 {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 1.15rem; margin-bottom: 18px; padding-bottom: 12px;
            border-bottom: 2px solid var(--fond);
        }
        .section h3 { color: var(--bleu); font-size: 1rem; margin: 20px 0 10px; font-weight: 600; }
        .section p { line-height: 1.75; color: #4A5568; margin-bottom: 12px; font-size: 0.97rem; }
        .section ul, .section ol { padding-left: 22px; margin-bottom: 12px; }
        .section li { line-height: 1.75; color: #4A5568; margin: 4px 0; font-size: 0.97rem; }

        .alerte {
            background: #FFFBEB; border: 1px solid #F6E05E; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #744210;
        }
        .alerte-vert {
            background: #F0FFF4; border: 1px solid #9AE6B4; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #22543D;
        }
        .alerte-bleu {
            background: #EBF8FF; border: 1px solid #BEE3F8; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #2C5282;
        }

        .footer-legal {
            text-align: center; padding: 24px; color: var(--gris); font-size: 0.85rem;
            border-top: 1px solid var(--bordure); margin-top: 32px;
        }
        .footer-legal a { color: var(--bleu-clair); text-decoration: none; margin: 0 8px; }

        @media (max-width: 600px) {
            .hero-cgu h1 { font-size: 1.5rem; }
            .section { padding: 22px 18px; }
        }

/* ----------------------------------------------------------------------------
   CGV.HTML (Conditions Générales de Vente) (-cgv)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #38A169;
            --fond: #EBF4FF; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
            --orange: #DD6B20;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
            border-left: 10px solid #1A365D;
            padding: 14px 32px; display: flex; align-items: center; gap: 16px;
        }
        nav .logo-cgv { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        nav .logo-cgv img { width: 40px; height: 40px; object-fit: contain; }
        nav .logo-cgv .app-nom-genco { font-family: 'Montserrat', sans-serif; color: #4A5568; font-size: 1.3rem; font-weight: 700; }
        nav .logo-cgv .app-nom-aide { font-family: 'Montserrat', sans-serif; color: #E07B39; font-size: 1.3rem; font-weight: 700; }
        nav .logo-cgv sup { color: #4A5568; font-size: 0.7rem; }
        nav .nav-accueil {
            margin-left: auto; background: #1A365D; color: white; text-decoration: none;
            padding: 8px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
        }
        nav .nav-accueil:hover { background: #2B6CB0; }

        .hero-cgv {
            background: linear-gradient(135deg, var(--bleu) 0%, #2B6CB0 100%);
            padding: 48px 32px; text-align: center; color: white;
        }
        .hero-cgv h1 { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 10px; }
        .hero-cgv p { opacity: 0.85; font-size: 1rem; }
        .hero-cgv .badges { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
        .hero-cgv .badge {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px; padding: 5px 14px; font-size: 0.85rem;
        }

        .contenu-cgv { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

        .sommaire {
            background: white; border-radius: 16px; padding: 28px 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 40px;
            border-left: 4px solid var(--bleu-clair);
        }
        .sommaire h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1rem; margin-bottom: 14px; }
        .sommaire ol { padding-left: 20px; }
        .sommaire li { margin: 5px 0; }
        .sommaire a { color: var(--bleu-clair); text-decoration: none; font-size: 0.95rem; }
        .sommaire a:hover { text-decoration: underline; }

        .section {
            background: white; border-radius: 16px; padding: 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 24px;
        }
        .section h2 {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 1.15rem; margin-bottom: 18px; padding-bottom: 12px;
            border-bottom: 2px solid var(--fond);
        }
        .section h3 { color: var(--bleu); font-size: 1rem; margin: 20px 0 10px; font-weight: 600; }
        .section p { line-height: 1.75; color: #4A5568; margin-bottom: 12px; font-size: 0.97rem; }
        .section ul, .section ol { padding-left: 22px; margin-bottom: 12px; }
        .section li { line-height: 1.75; color: #4A5568; margin: 4px 0; font-size: 0.97rem; }

        .alerte {
            background: #FFFBEB; border: 1px solid #F6E05E; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #744210;
        }
        .alerte-vert {
            background: #F0FFF4; border: 1px solid #9AE6B4; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #22543D;
        }
        .alerte-bleu {
            background: #EBF8FF; border: 1px solid #BEE3F8; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #2C5282;
        }
        .alerte-orange {
            background: #FFFAF0; border: 1px solid #FBD38D; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #7B341E;
        }

        .tableau { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.93rem; }
        .tableau th {
            background: var(--fond); color: var(--bleu); font-weight: 700;
            padding: 10px 14px; text-align: left; border: 1px solid var(--bordure);
        }
        .tableau td { padding: 10px 14px; border: 1px solid var(--bordure); color: #4A5568; vertical-align: top; }
        .tableau tr:nth-child(even) td { background: #F7FAFC; }

        .retractation-box {
            background: linear-gradient(135deg, #F0FFF4, #EBF8FF);
            border: 2px solid #9AE6B4; border-radius: 14px;
            padding: 24px; margin: 20px 0;
        }
        .retractation-box h3 { color: #22543D; font-family: 'Montserrat', sans-serif; font-size: 1rem; margin-bottom: 12px; }
        .retractation-box p { color: #2D3748; font-size: 0.95rem; line-height: 1.7; margin: 6px 0; }

        .resilier-box {
            background: linear-gradient(135deg, #FFF5F5, #FFFBEB);
            border: 2px solid #FC8181; border-radius: 14px;
            padding: 24px; margin: 20px 0;
        }
        .resilier-box h3 { color: #C53030; font-family: 'Montserrat', sans-serif; font-size: 1rem; margin-bottom: 12px; }
        .resilier-box ol { padding-left: 20px; }
        .resilier-box li { color: #2D3748; font-size: 0.95rem; line-height: 1.8; margin: 4px 0; }

        .footer-legal {
            text-align: center; padding: 24px; color: var(--gris); font-size: 0.85rem;
            border-top: 1px solid var(--bordure); margin-top: 32px;
        }
        .footer-legal a { color: var(--bleu-clair); text-decoration: none; margin: 0 8px; }

        @media (max-width: 600px) {
            .hero-cgv h1 { font-size: 1.5rem; }
            .section { padding: 22px 18px; }
        }

/* ----------------------------------------------------------------------------
   MENTIONS_LEGALES.HTML (-mentions)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #38A169;
            --fond: #EBF4FF; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
            border-left: 10px solid #1A365D;
            padding: 14px 32px; display: flex; align-items: center; gap: 16px;
        }
        nav .logo-mentions { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        nav .logo-mentions img { width: 40px; height: 40px; object-fit: contain; }
        nav .logo-mentions .app-nom-genco { font-family: 'Montserrat', sans-serif; color: #4A5568; font-size: 1.3rem; font-weight: 700; }
        nav .logo-mentions .app-nom-aide { font-family: 'Montserrat', sans-serif; color: #E07B39; font-size: 1.3rem; font-weight: 700; }
        nav .logo-mentions sup { color: #4A5568; font-size: 0.7rem; }
        nav .nav-accueil {
            margin-left: auto; background: #1A365D; color: white; text-decoration: none;
            padding: 8px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
        }
        nav .nav-accueil:hover { background: #2B6CB0; }

        .hero-mentions {
            background: linear-gradient(135deg, var(--bleu) 0%, #2B6CB0 100%);
            padding: 48px 32px; text-align: center; color: white;
        }
        .hero-mentions h1 { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 10px; }
        .hero-mentions p { opacity: 0.85; font-size: 1rem; }
        .hero-mentions .badge {
            display: inline-block; margin-top: 14px;
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px; padding: 5px 16px; font-size: 0.85rem;
        }

        .contenu-mentions { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

        .section {
            background: white; border-radius: 16px; padding: 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 24px;
        }
        .section h2 {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 1.15rem; margin-bottom: 20px; padding-bottom: 12px;
            border-bottom: 2px solid var(--fond); display: flex; align-items: center; gap: 10px;
        }
        .section p { line-height: 1.75; color: #4A5568; margin-bottom: 10px; font-size: 0.97rem; }
        .section ul { padding-left: 22px; margin-bottom: 10px; }
        .section li { line-height: 1.75; color: #4A5568; font-size: 0.97rem; margin: 4px 0; }

        .bloc-info-mentions {
            background: var(--fond); border-radius: 12px; padding: 20px 24px;
            border-left: 4px solid var(--bleu-clair); margin: 12px 0;
        }
        .bloc-info-mentions p { margin: 5px 0; font-size: 0.96rem; color: #2D3748; }
        .bloc-info strong { color: var(--bleu); }

        .alerte {
            background: #FFFBEB; border: 1px solid #F6E05E; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #744210;
        }

        .a-completer {
            background: #FFF5F5; border: 1.5px dashed #FC8181; border-radius: 8px;
            padding: 6px 14px; display: inline-block; font-size: 0.9rem;
            color: #C53030; font-weight: 600; margin: 2px 0;
        }

        .footer-legal {
            text-align: center; padding: 24px; color: var(--gris); font-size: 0.85rem;
            border-top: 1px solid var(--bordure); margin-top: 32px;
        }
        .footer-legal a { color: var(--bleu-clair); text-decoration: none; margin: 0 8px; }

        @media (max-width: 600px) {
            .hero-mentions h1 { font-size: 1.5rem; }
            nav { padding: 12px 16px; }
            .section { padding: 22px 18px; }
        }

/* ----------------------------------------------------------------------------
   POLITIQUE_CONFIDENTIALITE.HTML (-confidentialite)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --vert: #38A169;
            --fond: #EBF4FF; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
            border-left: 10px solid #1A365D;
            padding: 14px 32px; display: flex; align-items: center; gap: 16px;
        }
        nav .logo-confidentialite { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        nav .logo-confidentialite img { width: 40px; height: 40px; object-fit: contain; }
        nav .logo-confidentialite .app-nom-genco { font-family: 'Montserrat', sans-serif; color: #4A5568; font-size: 1.3rem; font-weight: 700; }
        nav .logo-confidentialite .app-nom-aide { font-family: 'Montserrat', sans-serif; color: #E07B39; font-size: 1.3rem; font-weight: 700; }
        nav .logo-confidentialite sup { color: #4A5568; font-size: 0.7rem; }
        nav .nav-accueil {
            margin-left: auto; background: #1A365D; color: white; text-decoration: none;
            padding: 8px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
        }
        nav .nav-accueil:hover { background: #2B6CB0; }

        .hero-confidentialite {
            background: linear-gradient(135deg, var(--bleu) 0%, #2B6CB0 100%);
            padding: 48px 32px; text-align: center; color: white;
        }
        .hero-confidentialite h1 { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 10px; }
        .hero-confidentialite p { opacity: 0.85; font-size: 1rem; }
        .hero-confidentialite .badges { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
        .hero-confidentialite .badge {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px; padding: 5px 14px; font-size: 0.85rem;
        }

        .contenu-confidentialite { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

        .sommaire {
            background: white; border-radius: 16px; padding: 28px 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 40px;
            border-left: 4px solid var(--bleu-clair);
        }
        .sommaire h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1rem; margin-bottom: 16px; }
        .sommaire ol { padding-left: 20px; }
        .sommaire li { margin: 6px 0; }
        .sommaire a { color: var(--bleu-clair); text-decoration: none; font-size: 0.95rem; }
        .sommaire a:hover { text-decoration: underline; }

        .section {
            background: white; border-radius: 16px; padding: 32px;
            box-shadow: 0 2px 12px rgba(26,54,93,0.08); margin-bottom: 24px;
        }
        .section h2 {
            font-family: 'Montserrat', sans-serif; color: var(--bleu);
            font-size: 1.15rem; margin-bottom: 18px; padding-bottom: 12px;
            border-bottom: 2px solid var(--fond); display: flex; align-items: center; gap: 10px;
        }
        .section h3 { color: var(--bleu); font-size: 1rem; margin: 20px 0 10px; }
        .section p { line-height: 1.75; color: #4A5568; margin-bottom: 12px; font-size: 0.97rem; }
        .section ul, .section ol { padding-left: 22px; margin-bottom: 12px; }
        .section li { line-height: 1.75; color: #4A5568; margin: 4px 0; font-size: 0.97rem; }

        .tableau { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.92rem; }
        .tableau th {
            background: var(--fond); color: var(--bleu); font-weight: 700;
            padding: 10px 14px; text-align: left; border: 1px solid var(--bordure);
        }
        .tableau td { padding: 10px 14px; border: 1px solid var(--bordure); color: #4A5568; vertical-align: top; }
        .tableau tr:nth-child(even) td { background: #F7FAFC; }

        .alerte {
            background: #FFFBEB; border: 1px solid #F6E05E; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #744210;
        }
        .alerte-vert {
            background: #F0FFF4; border: 1px solid #9AE6B4; border-radius: 10px;
            padding: 14px 18px; margin: 16px 0; font-size: 0.92rem; color: #22543D;
        }
        .droits-grille-confidentialite { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
        .droit-carte {
            background: var(--fond); border-radius: 10px; padding: 14px 16px;
            border-left: 3px solid var(--bleu-clair);
        }
        .droit-carte strong { display: block; color: var(--bleu); margin-bottom: 4px; font-size: 0.9rem; }
        .droit-carte span { font-size: 0.85rem; color: var(--gris); line-height: 1.5; }

        .contact-bloc {
            background: linear-gradient(135deg, #EBF4FF 0%, #E6FFFA 100%);
            border-radius: 14px; padding: 24px; margin-top: 16px;
            border: 1px solid var(--bordure);
        }
        .contact-bloc p { margin: 4px 0; font-size: 0.95rem; }

        .version-bloc-confidentialite {
            text-align: center; padding: 24px; color: var(--gris); font-size: 0.88rem;
        }

        @media (max-width: 600px) {
            .droits-grille-confidentialite { grid-template-columns: 1fr; }
            .hero-confidentialite h1 { font-size: 1.5rem; }
            nav { padding: 12px 16px; }
        }

/* ----------------------------------------------------------------------------
   MODE_ACCOMPAGNEMENT.HTML (-accomp)
---------------------------------------------------------------------------- */

:root {
            --bleu:#1A365D; --bleu-clair:#3182CE; --vert:#276749;
            --fond:#F7FAFC; --blanc:#fff; --gris:#718096; --bordure:#E2E8F0;
            --rouge:#C53030; --violet:#553C9A;
        }
        *{box-sizing:border-box;margin:0;padding:0;}
        body{font-family:'Inter',sans-serif;background:var(--fond);color:#2D3748;min-height:100vh;}

        nav{background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%); border-left: 10px solid #1A365D;padding:16px 32px;display:flex;align-items:center;gap:24px;}
        nav .logo-accomp{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.3rem;}
        nav a{color: #1A365D;text-decoration:none;}

        .page{max-width:700px;margin:36px auto;padding:0 20px 60px;}
        a.retour{display:inline-flex;align-items:center;gap:6px;color:var(--bleu-clair);text-decoration:none;font-weight:600;margin-bottom:24px;}
        h1{font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:800;color:var(--bleu);margin-bottom:8px;}
        .sous-titre{color:var(--gris);margin-bottom:32px;line-height:1.6;}

        /* ── PROFILS ── */
        .profils{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}

        .profil-card{
            background:var(--blanc);border:3px solid var(--bordure);border-radius:20px;
            padding:22px 24px;cursor:pointer;display:flex;align-items:center;gap:18px;
            transition:all 0.18s;position:relative;
        }
        .profil-card:hover{border-color:var(--bleu-clair);box-shadow:0 4px 16px rgba(49,130,206,0.12);}
        .profil-card.actif{border-color:var(--bleu);background:#EBF8FF;}
        .profil-card.actif::after{
            content:"✓ Actif";position:absolute;top:14px;right:18px;
            background:var(--bleu);color:white;border-radius:20px;
            font-size:0.75rem;font-weight:700;padding:3px 10px;
        }
        .profil-ico{font-size:2.8rem;flex-shrink:0;}
        .profil-texte{flex:1;}
        .profil-nom{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.1rem;color:var(--bleu);margin-bottom:4px;}
        .profil-desc{font-size:0.88rem;color:var(--gris);line-height:1.5;}
        .profil-badge{
            display:inline-block;margin-top:6px;padding:2px 10px;
            border-radius:20px;font-size:0.85rem;font-weight:700;
        }
        .badge-standard{background:#EBF8FF;color:#2B6CB0;}
        .badge-simple{background:#F0FFF4;color:#276749;}
        .badge-accompagne{background:#FAF5FF;color:#553C9A;}

        /* ── VERROU AIDANT ── */
        .verrou-accomp{
            background:#FAF5FF;border:2px solid #B794F4;border-radius:16px;
            padding:20px 22px;margin-bottom:28px;display:none;
        }
        .verrou-accomp.visible-accomp{display:block;}
        .verrou h3{font-family:'Montserrat',sans-serif;color:var(--violet);font-size:1rem;margin-bottom:8px;}
        .verrou-accomp p{color:#44337A;font-size:0.88rem;margin-bottom:14px;line-height:1.5;}
        .code-input{
            display:flex;gap:10px;align-items:center;flex-wrap:wrap;
        }
        .code-input input{
            font-size:1.4rem;font-weight:700;letter-spacing:0.3rem;
            padding:12px 16px;border:2px solid #B794F4;border-radius:12px;
            width:160px;text-align:center;font-family:'Inter',sans-serif;
            background:white;
        }
        .code-input input:focus{outline:none;border-color:var(--violet);}
        .btn-valider-code{
            padding:12px 22px;background:var(--violet);color:white;
            border:none;border-radius:12px;font-weight:700;font-size:1rem;
            cursor:pointer;font-family:'Inter',sans-serif;
        }
        .btn-valider-code:hover{background:#44337A;}
        .msg-code-erreur{color:var(--rouge);font-size:0.88rem;margin-top:8px;display:none;}

        /* ── DÉFINIR LE CODE ── */
        .section-code-aidant{
            background:var(--blanc);border:2px solid var(--bordure);border-radius:16px;
            padding:20px 22px;margin-top:16px;
        }
        .section-code-aidant h3{font-family:'Montserrat',sans-serif;color:var(--bleu);font-size:1rem;margin-bottom:6px;}
        .section-code-aidant p{color:var(--gris);font-size:0.85rem;margin-bottom:14px;line-height:1.5;}
        .form-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
        .form-code input{
            padding:10px 14px;border:2px solid var(--bordure);border-radius:10px;
            font-size:1rem;font-family:'Inter',sans-serif;width:150px;
        }
        .form-code input:focus{outline:none;border-color:var(--bleu-clair);}
        .btn-sauver-code{
            padding:10px 18px;background:var(--bleu-clair);color:white;
            border:none;border-radius:10px;font-weight:700;font-size:0.95rem;
            cursor:pointer;font-family:'Inter',sans-serif;
        }
        .btn-sauver-code:hover{background:var(--bleu);}

        /* Messages */
        .msg-accomp{padding:12px 16px;border-radius:10px;font-size:0.9rem;margin-top:12px;display:none;}
        .msg-accomp.succes-accomp{background:#F0FFF4;border:1px solid #9AE6B4;color:#276749;display:block;}
        .msg-accomp.info-accomp{background:#EBF8FF;border:1px solid #90CDF4;color:#2C5282;display:block;}

        /* Bouton retour guide */
        .btn-retour-guide-accomp{
            display:flex;align-items:center;justify-content:center;gap:10px;
            width:100%;padding:16px;background:var(--bleu);color:white;
            border:none;border-radius:16px;font-weight:700;font-size:1.05rem;
            cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;
            transition:background 0.18s;margin-top:8px;
        }
        .btn-retour-guide-accomp:hover{background:#2c4f7a;}

/* ----------------------------------------------------------------------------
   DEMO.HTML (-demo)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --bleu-vif: #2B6CB0;
            --vert: #38A169; --rouge: #E53E3E; --orange: #DD6B20;
            --fond: #F7FAFC; --blanc: #ffffff; --gris: #718096; --bordure: #E2E8F0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; font-size: 1rem; }

        /* ── HERO ── */
        .hero-demo {
            background: linear-gradient(135deg, #1A365D 0%, #2B6CB0 60%, #3182CE 100%);
            color: white; text-align: center; padding: 72px 24px 80px;
        }
        .hero-logo-bande {
            display: inline-flex; align-items: center; gap: 18px;
            background: white; border-radius: 20px;
            padding: 16px 36px; margin-bottom: 32px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        }
        .hero-logo-bande img { width: 64px; height: 64px; object-fit: contain; }
        .hero-logo-nom-demo { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 900; line-height: 1; }
        .hero-logo-nom-demo .g-demo { color: #4A5568; }
        .hero-logo-nom-demo .a { color: #E07B39; }
        .hero-logo-nom-demo sup { font-size: 1rem; color: #E07B39; vertical-align: super; opacity: 0.9; }
        .hero-titre { font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 900; letter-spacing: -1px; }
        .hero-accroche { font-size: 1.3rem; margin: 14px auto; max-width: 680px; opacity: 0.92; font-weight: 500; }
        .hero-sous-demo { font-size: 1rem; opacity: 0.75; max-width: 540px; margin: 0 auto 36px; }
        .hero-btns-demo { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
        .btn-hero-principal {
            background: white; color: var(--bleu); border: none; border-radius: 12px;
            padding: 16px 34px; font-size: 1.05rem; font-weight: 700;
            font-family: 'Montserrat', sans-serif; cursor: pointer; text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: box-shadow 0.2s, transform 0.15s;
        }
        .btn-hero-principal:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); transform: translateY(-2px); }
        .btn-hero-secondaire {
            background: rgba(255,255,255,0.15); color: white; border: 2px solid rgba(255,255,255,0.5);
            border-radius: 12px; padding: 14px 28px; font-size: 1rem; font-weight: 600;
            cursor: pointer; text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: background 0.2s;
        }
        .btn-hero-secondaire:hover { background: rgba(255,255,255,0.25); }

        /* ── BADGES PUBLICS ── */
        .publics {
            display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px;
        }
        .badge-public {
            background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
            border-radius: 30px; padding: 6px 18px; font-size: 0.9rem; font-weight: 600;
        }

        /* ── STATS ── */
        .stats-bande {
            background: var(--bleu); color: white;
            display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
            padding: 0;
        }
        .stat-item {
            text-align: center; padding: 28px 48px; border-right: 1px solid rgba(255,255,255,0.12);
        }
        .stat-item:last-child { border-right: none; }
        .stat-chiffre { font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 900; color: #90CDF4; }
        .stat-label { font-size: 0.85rem; opacity: 0.75; margin-top: 4px; }

        /* ── SECTIONS ── */
        .section-page { padding: 72px 24px; }
        .section-page.grise { background: var(--fond); }
        .section-page.blanche { background: white; }
        .section-titre {
            text-align: center; font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem; color: var(--bleu); margin-bottom: 10px;
        }
        .section-sous { text-align: center; color: var(--gris); max-width: 600px; margin: 0 auto 48px; font-size: 1rem; }
        .container { max-width: 1100px; margin: 0 auto; }

        /* ── FONCTIONNALITÉS ── */
        .fonctions-grille-demo {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
        }
        .fonction-carte {
            background: white; border-radius: 16px; padding: 28px 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1.5px solid var(--bordure);
            transition: box-shadow 0.2s, transform 0.15s;
        }
        .fonction-carte:hover { box-shadow: 0 8px 28px rgba(49,130,206,0.12); transform: translateY(-3px); }
        .fonction-icone-demo { font-size: 2.4rem; margin-bottom: 12px; }
        .fonction-titre { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; color: var(--bleu); margin-bottom: 8px; }
        .fonction-desc-demo { font-size: 0.9rem; color: #4A5568; line-height: 1.6; }
        .fonction-badge { display: inline-block; margin-top: 10px; padding: 2px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; background: #EBF8FF; color: var(--bleu-clair); }
        .fonction-badge.vert { background: #F0FFF4; color: var(--vert); }
        .fonction-badge.orange { background: #FEEBC8; color: var(--orange); }

        /* ── PUBLICS CIBLÉS ── */
        .publics-grille {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
        }
        .public-carte {
            background: white; border-radius: 14px; padding: 24px 20px; text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 1.5px solid var(--bordure);
        }
        .public-icone { font-size: 2.5rem; margin-bottom: 10px; }
        .public-titre { font-family: 'Montserrat', sans-serif; font-size: 0.97rem; color: var(--bleu); margin-bottom: 6px; }
        .public-desc { font-size: 0.83rem; color: var(--gris); line-height: 1.5; }

        /* ── AVANTAGES PROS ── */
        .avantages-grille {
            display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
        }
        .avantage-liste { display: flex; flex-direction: column; gap: 16px; }
        .avantage-item { display: flex; gap: 14px; align-items: flex-start; }
        .avantage-icone { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
        .avantage-texte strong { display: block; color: var(--bleu); margin-bottom: 3px; }
        .avantage-texte span { font-size: 0.88rem; color: #4A5568; }
        .demo-fenetre {
            background: white; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);
            overflow: hidden; border: 1.5px solid var(--bordure);
        }
        .demo-barre { background: var(--bleu); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
        .demo-cercle { width: 12px; height: 12px; border-radius: 50%; }
        .demo-contenu { padding: 20px; }
        .demo-ligne { height: 12px; border-radius: 6px; background: var(--bordure); margin-bottom: 10px; }
        .demo-ligne.large { width: 80%; }
        .demo-ligne.moyen-demo { width: 60%; }
        .demo-ligne.court-demo { width: 40%; }
        .demo-ligne.bleu-demo { background: #BEE3F8; }
        .demo-ligne.vert-demo { background: #9AE6B4; }

        /* ── SÉCURITÉ ── */
        .securite-grille-demo {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
        }
        .securite-item {
            background: white; border-radius: 14px; padding: 24px 20px;
            border-left: 4px solid var(--bleu-clair); box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .securite-item h4 { color: var(--bleu); margin-bottom: 6px; font-size: 0.97rem; }
        .securite-item p { font-size: 0.85rem; color: #4A5568; line-height: 1.5; }

        /* ── TARIFS ── */
        .tarifs-grille {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
            max-width: 960px; margin: 0 auto;
        }
        .tarif-carte {
            background: white; border-radius: 18px; padding: 32px 28px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 2px solid var(--bordure);
            text-align: center; position: relative;
        }
        .tarif-carte.vedette { border-color: var(--bleu-clair); }
        .badge-vedette {
            position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
            background: var(--bleu-clair); color: white; border-radius: 20px;
            padding: 4px 18px; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
        }
        .tarif-nom { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: var(--bleu); margin-bottom: 6px; }
        .tarif-cible { font-size: 0.83rem; color: var(--gris); margin-bottom: 20px; }
        .tarif-prix { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 900; color: var(--bleu); }
        .tarif-prix span { font-size: 1rem; font-weight: 600; color: var(--gris); }
        .tarif-engagement { font-size: 0.78rem; color: var(--vert); font-weight: 600; margin: 6px 0 20px; }
        .tarif-liste { text-align: left; list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
        .tarif-liste li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; color: #4A5568; }
        .tarif-liste li::before { content: "✅"; flex-shrink: 0; }
        .tarif-liste li.non-demo::before { content: "—"; color: #CBD5E0; }
        .tarif-liste li.non-demo { color: #A0AEC0; }
        .btn-tarif {
            width: 100%; background: var(--bleu); color: white; border: none; border-radius: 10px;
            padding: 13px; font-size: 0.97rem; font-weight: 700; cursor: pointer;
            font-family: 'Montserrat', sans-serif; text-decoration: none; display: block;
        }
        .btn-tarif:hover { background: var(--bleu-vif); }
        .btn-tarif.blanc { background: white; color: var(--bleu); border: 2px solid var(--bleu); }
        .btn-tarif.blanc:hover { background: var(--fond); }

        /* ── CTA FINAL ── */
        .cta-finale {
            background: linear-gradient(135deg, #1A365D, #2B6CB0);
            color: white; text-align: center; padding: 72px 24px;
        }
        .cta-finale h2 { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 16px; }
        .cta-finale p { font-size: 1.05rem; opacity: 0.85; max-width: 580px; margin: 0 auto 36px; }

        /* ── FOOTER ── */
        footer {
            background: #1A202C; color: #A0AEC0; text-align: center;
            padding: 24px; font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .hero-titre { font-size: 2rem; }
            .avantages-grille { grid-template-columns: 1fr; }
            .stat-item { padding: 20px 28px; }
        }

/* ----------------------------------------------------------------------------
   PRO.HTML (Espace professionnel) (-pro)
---------------------------------------------------------------------------- */

:root {
            --bleu: #1A365D; --bleu-clair: #3182CE; --orange: #E07B39;
            --vert: #38A169; --fond: #EBF4FF; --bordure: #E2E8F0; --gris: #718096;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--fond); color: #2D3748; }

        /* ── NAV ── */
        nav {
            background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 22%, #EBF0F7 32%, #CCDAEB 44%, #8AAACB 56%, #3D6290 68%, #1A365D 80%, #1A365D 100%);
            border-left: 10px solid #1A365D;
            padding: 14px 32px; display: flex; align-items: center; gap: 16px;
        }
        nav .logo-pro { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        nav .logo-pro img { width: 40px; height: 40px; object-fit: contain; }
        nav .logo-pro .app-nom-genco { font-family: 'Montserrat', sans-serif; color: #4A5568; font-size: 1.3rem; font-weight: 700; }
        nav .logo-pro .app-nom-aide { font-family: 'Montserrat', sans-serif; color: #E07B39; font-size: 1.3rem; font-weight: 700; }
        nav .logo-pro sup { color: #4A5568; font-size: 0.7rem; }
        nav .nav-accueil {
            margin-left: auto; background: #1A365D; color: white; text-decoration: none;
            padding: 8px 18px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
        }
        nav .nav-accueil:hover { background: #2B6CB0; }

        /* ── HERO ── */
        .hero-pro {
            background: linear-gradient(135deg, #1A365D 0%, #2B6CB0 60%, #E07B39 100%);
            padding: 64px 32px; text-align: center; color: white;
        }
        .hero-pro .badge-pro {
            display: inline-block; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
            border-radius: 30px; padding: 6px 20px; font-size: 0.85rem; font-weight: 600;
            letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px;
        }
        .hero-pro h1 { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 800; margin-bottom: 16px; line-height: 1.2; }
        .hero-pro h1 span { color: #FBD38D; }
        .hero-pro p { font-size: 1.1rem; opacity: 0.9; max-width: 680px; margin: 0 auto 24px; line-height: 1.7; }
        .hero-pro .hero-note-pro {
            display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            border-radius: 12px; padding: 12px 24px; font-size: 0.95rem; font-weight: 600; margin-top: 8px;
        }

        /* ── VALEURS PRO ── */
        .valeurs { max-width: 1100px; margin: 0 auto; padding: 56px 24px 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .valeur-card {
            background: white; border-radius: 16px; padding: 32px 24px;
            box-shadow: 0 2px 16px rgba(26,54,93,0.08); text-align: center;
            border-top: 4px solid var(--bleu);
        }
        .valeur-card.orange { border-top-color: var(--orange); }
        .valeur-card.vert { border-top-color: var(--vert); }
        .valeur-card .icone-pro { font-size: 2.4rem; margin-bottom: 14px; }
        .valeur-card h3 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1rem; margin-bottom: 10px; }
        .valeur-card p { color: var(--gris); font-size: 0.93rem; line-height: 1.65; }

        /* ── SECTION TITRE ── */
        .section-titre { text-align: center; max-width: 700px; margin: 56px auto 32px; padding: 0 24px; }
        .section-titre h2 { font-family: 'Montserrat', sans-serif; color: var(--bleu); font-size: 1.6rem; margin-bottom: 10px; }
        .section-titre p { color: var(--gris); font-size: 1rem; line-height: 1.65; }

        /* ── FORMULAIRE ── */
        .form-wrapper { max-width: 800px; margin: 0 auto 64px; padding: 0 24px; }
        .form-card {
            background: white; border-radius: 20px;
            box-shadow: 0 4px 32px rgba(26,54,93,0.12); overflow: hidden;
        }
        .form-header {
            background: linear-gradient(90deg, var(--bleu), #2B6CB0);
            padding: 28px 36px; color: white;
        }
        .form-header h3 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin-bottom: 6px; }
        .form-header p { opacity: 0.85; font-size: 0.9rem; }

        form { padding: 36px; display: flex; flex-direction: column; gap: 24px; }

        .form-groupe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .form-groupe.triple { grid-template-columns: 1fr 1fr 1fr; }

        .champ { display: flex; flex-direction: column; gap: 6px; }
        .champ label { font-size: 0.85rem; font-weight: 600; color: var(--bleu); }
        .champ label .requis { color: var(--orange); margin-left: 2px; }
        .champ input, .champ select, .champ textarea {
            border: 1.5px solid var(--bordure); border-radius: 10px;
            padding: 11px 14px; font-size: 0.95rem; font-family: 'Inter', sans-serif;
            color: #2D3748; background: #FAFBFC; transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%;
        }
        .champ input:focus, .champ select:focus, .champ textarea:focus {
            outline: none; border-color: var(--bleu-clair);
            box-shadow: 0 0 0 3px rgba(49,130,206,0.12);
        }
        .champ textarea { resize: vertical; min-height: 100px; }

        .separateur {
            border: none; border-top: 2px solid var(--fond);
            margin: 4px 0; position: relative;
        }
        .separateur-label {
            font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700;
            color: var(--bleu); text-transform: uppercase; letter-spacing: 0.8px;
            background: white; padding: 0 12px;
            position: absolute; top: -10px; left: 24px;
        }

        /* Checkboxes usage */
        .checkboxes-pro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .checkbox-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bleu); cursor: pointer; flex-shrink: 0; }
        .checkbox-item span { font-size: 0.92rem; color: #4A5568; }

        /* Radio accès */
        .radios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .radio-card { position: relative; }
        .radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
        .radio-card label {
            display: flex; flex-direction: column; gap: 4px;
            border: 2px solid var(--bordure); border-radius: 12px; padding: 14px 16px;
            cursor: pointer; transition: border-color 0.2s, background 0.2s;
        }
        .radio-card input[type="radio"]:checked + label {
            border-color: var(--bleu); background: #EBF4FF;
        }
        .radio-card label .radio-titre { font-weight: 700; color: var(--bleu); font-size: 0.92rem; }
        .radio-card label .radio-detail { font-size: 0.82rem; color: var(--gris); }
        .radio-card.gratuit input[type="radio"]:checked + label { border-color: var(--vert); background: #F0FFF4; }
        .radio-card.gratuit label .radio-titre { color: var(--vert); }

        /* RGPD */
        .rgpd {
            background: #EBF8FF; border: 1px solid #BEE3F8; border-radius: 10px;
            padding: 14px 18px; font-size: 0.85rem; color: #2C5282; line-height: 1.6;
        }

        /* Bouton */
        .btn-submit-pro {
            background: linear-gradient(90deg, var(--bleu), #2B6CB0);
            color: white; border: none; border-radius: 12px;
            padding: 16px 32px; font-size: 1rem; font-weight: 700;
            font-family: 'Montserrat', sans-serif; cursor: pointer;
            transition: opacity 0.2s, transform 0.1s; width: 100%;
        }
        .btn-submit-pro:hover { opacity: 0.92; transform: translateY(-1px); }
        .btn-submit-pro:active { transform: translateY(0); }

        /* Confirmation */
        .confirmation {
            display: none; text-align: center; padding: 48px 36px;
        }
        .confirmation .icone-ok-pro { font-size: 4rem; margin-bottom: 16px; }
        .confirmation h3 { font-family: 'Montserrat', sans-serif; color: var(--vert); font-size: 1.4rem; margin-bottom: 12px; }
        .confirmation p { color: var(--gris); font-size: 0.95rem; line-height: 1.7; max-width: 480px; margin: 0 auto 24px; }
        .confirmation a { color: var(--bleu-clair); font-weight: 600; text-decoration: none; }

        /* Footer */
        .footer { text-align: center; padding: 32px 24px; color: var(--gris); font-size: 0.85rem; border-top: 1px solid var(--bordure); }
        .footer a { color: var(--bleu-clair); text-decoration: none; margin: 0 8px; }

        @media (max-width: 700px) {
            .valeurs { grid-template-columns: 1fr; }
            .form-groupe, .form-groupe.triple { grid-template-columns: 1fr; }
            .checkboxes-pro, .radios { grid-template-columns: 1fr; }
            .hero-pro h1 { font-size: 1.7rem; }
            form { padding: 24px 20px; }
        }

/* ════════════════════════════════════════════════════════════════════════════
   CORRECTIFS CSS — Classes manquantes détectées lors de la migration pages/
   Ajouté le 24/04/2026
════════════════════════════════════════════════════════════════════════════ */

/* ── LOGIN : layout wrapper & logo ─────────────────────────────────────── */
.wrapper-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--fond, #EBF4FF);
    padding: 24px 16px;
}

.logo-header-login {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

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

.logo-texte-login {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-titre-login {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.logo-genco-login { color: #4A5568; }
.logo-aide-login  { color: #E07B39; }
.logo-sup-login   { font-size: 0.7rem; color: #E07B39; vertical-align: super; }

.logo-slogan-login {
    font-size: 0.88rem;
    color: var(--gris, #718096);
    font-style: italic;
}

.formulaire-login {
    background: var(--blanc, #ffffff);
    border-radius: 24px;
    padding: 40px 36px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 50px rgba(26,54,93,0.15);
}

/* ── LOGIN : onglets buttons style ─────────────────────────────────────── */
.onglet-login {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.onglet-login.actif-login,
.actif-login {
    background: var(--blanc, #ffffff);
    color: var(--bleu, #1A365D);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
}

/* ── LOGIN : choix rôle — structure interne ─────────────────────────────── */
.role-nom-login {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bleu, #1A365D);
    margin-bottom: 2px;
}

.role-desc-login {
    font-size: 0.8rem;
    color: var(--gris, #718096);
    line-height: 1.4;
    margin: 0;
}

.question-login {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bleu, #1A365D);
    text-align: center;
    margin-bottom: 16px;
}

/* ── LOGIN : mode interface grid ────────────────────────────────────────── */
.mode-grid-login {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.mode-card-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid var(--bordure, #E2E8F0);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    text-align: center;
    transition: all 0.2s;
}

.mode-card-login:hover {
    border-color: var(--bleu-clair, #3182CE);
    background: var(--fond, #EBF4FF);
}

.mode-card-login strong { font-size: 0.9rem; color: var(--bleu, #1A365D); }
.mode-card-login small  { font-size: 0.75rem; color: var(--gris, #718096); }

.mode-icone-login { font-size: 1.6rem; }

/* ── LOGIN : badge modifier ─────────────────────────────────────────────── */
.badge-modifier-login {
    background: none;
    border: 1px solid var(--bordure, #E2E8F0);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--gris, #718096);
    transition: background 0.15s;
}

.badge-modifier-login:hover { background: var(--fond, #EBF4FF); }

/* ── LOGIN : consentement label ─────────────────────────────────────────── */
.consentement-label-login {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #4A5568;
    line-height: 1.5;
    cursor: pointer;
    font-weight: normal;
}

@media (max-width: 500px) {
    .formulaire-login { padding: 28px 20px; border-radius: 16px; }
    .mode-grid-login  { grid-template-columns: 1fr; }
}

/* ── MÉDICAMENTS : classes manquantes ou mal nommées ────────────────────── */

.contenu-med {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.bandeau-notif-med {
    background: #EBF8FF;
    border: 1px solid #90CDF4;
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
}

.bandeau-notif-med button {
    margin-left: auto;
    background: var(--bleu, #1A365D);
    color: white;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

.icone-med {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.8rem;
}

.formulaire-carte-med {
    background: white;
    border: 2px solid #2e7d32;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.formulaire-carte-med h3 {
    margin-top: 0;
    color: #2e7d32;
    font-size: 1.2rem;
}

.heures-liste-med {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.heure-tag-med {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #1565c0;
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.heure-tag-med button {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.ajouter-heure-med {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.ajouter-heure-med input { width: 130px; flex: none; }

.btn-add-heure-med {
    background: #1565c0;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

.champ-hint-med {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.3rem;
}

.jours-grid-med {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.jour-btn-med {
    padding: 0.5rem 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: white;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.jour-btn-med.selectionne {
    background: #1565c0;
    color: white;
    border-color: #1565c0;
}

.jour-btn-tous-med {
    border-color: #2e7d32;
    color: #2e7d32;
    font-weight: 600;
}

.jour-btn-tous-med.selectionne {
    background: #2e7d32;
    color: white;
}

.btn-ajouter-med {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #2e7d32;
    color: white;
    border: none;
    padding: 0.9rem 1.5rem;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.btn-ajouter-med:hover { background: #1b5e20; }

.statut-badge-med {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.carte-med-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.carte-med-header h3 {
    margin: 0;
    font-size: 1.2rem;
    flex: 1;
}

.med-details {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.95rem;
    color: #555;
}

.med-details span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.med-actions {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.btn-sm-med {
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
}

.btn-supprimer-med {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}

.badge-rappel-med {
    background: #c62828;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
}

.carte-prise-med.pris    { border: 2px solid #2e7d32; background: #e8f5e9; }
.carte-prise-med.oublie  { border: 2px solid #c62828; background: #ffebee; }
.carte-prise-med.reporte { border: 2px solid #e65100; background: #fff3e0; }

.jour-historique-med { margin-bottom: 1.5rem; }

.jour-historique-med h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.3rem;
}

.resume-jour-med {
    font-size: 0.85rem;
    color: #888;
    margin-left: 0.5rem;
}

.ligne-historique-med {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.3rem;
}

.ligne-historique-med.pris       { color: #2e7d32; }
.ligne-historique-med.oublie     { color: #c62828; }
.ligne-historique-med.en_attente { color: #e65100; }

.icone-statut-med {
    font-size: 1.3rem;
    min-width: 28px;
}

.med-nom {
    flex: 1;
    font-size: 1rem;
}

.heure-med {
    font-size: 0.95rem;
    color: #666;
}

/* ── MES DOCUMENTS : bandeau bureau texte ───────────────────────────────── */
.bandeau-bureau-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.bandeau-bureau-texte strong {
    font-size: 1rem;
    font-weight: 700;
}

.bandeau-bureau-texte span {
    font-size: 0.85rem;
    opacity: 0.9;
}
/* ═══════════════════════════════════════════════════════════════════════════
   🔥 CORRECTIONS RESPONSIVE MOBILE - GencoAide
   Ajouté le 25/04/2026 pour améliorer l'expérience mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── AMÉLIORATION GLOBALE MOBILE (≤768px) ────────────────────────────────── */

@media (max-width: 768px) {
  
  /* ✅ Boutons tactiles plus grands (min 44x44px accessibilité) */
  .btn {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 1rem;
  }
  
  .btn-sm {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
  
  /* ✅ Formulaires plus accessibles sur mobile */
  .form-input,
  .form-select,
  .form-textarea,
  .champ-med input,
  .champ-med select,
  .champ-med textarea {
    min-height: 48px;
    padding: 14px;
    font-size: 16px; /* Évite le zoom iOS */
    border-width: 2px;
  }
  
  .form-textarea {
    min-height: 120px;
  }
  
  .form-label,
  .champ-med label {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  /* ✅ Cartes plus spacieuses */
  .card {
    border-radius: 12px;
  }
  
  .card-body {
    padding: 18px;
  }
  
  .carte-med,
  .carte-prise-med,
  .card-essentiel,
  .card-outil {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  /* ✅ Tableaux scrollables horizontalement */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  
  thead,
  tbody,
  tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  /* ✅ Navbar simplifée */
  .navbar {
    flex-wrap: wrap;
    padding: 12px 16px;
    min-height: 70px;
  }
  
  .navbar-brand {
    gap: 12px;
  }
  
  .navbar-brand img {
    height: 50px;
    width: 50px;
  }
  
  .navbar-brand-name {
    font-size: 1.3rem;
  }
  
  .navbar-menu {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }
  
  .navbar-menu a,
  .navbar-menu button {
    padding: 10px 18px;
    font-size: 0.95rem;
  }
  
  /* ✅ Modals en plein écran sur mobile */
  .modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .modale-soins-contenu-animal,
  .formulaire-med {
    width: 95%;
    max-width: 100%;
    max-height: 90vh;
  }
  
  /* ✅ Page header adapté */
  .page-header {
    padding: 18px 0;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .page-header-back {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
  
  /* ✅ Grilles responsives optimisées */
  .grid {
    gap: 12px;
  }
  
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .grid-essentiel {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* ✅ Alertes et bandeaux */
  .bandeau-alerte {
    flex-wrap: wrap;
    padding: 14px;
    font-size: 0.95rem;
  }
  
  .bandeau-cta {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    text-align: center;
  }
  
  .alert {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  
  /* ✅ Badges et tags plus lisibles */
  .badge,
  .tag-actif-med,
  .tag-inactif-med {
    font-size: 0.8rem;
    padding: 4px 12px;
  }
  
  /* ✅ Toasts adaptés mobile */
  #ga-toast-container {
    top: 12px;
    bottom: auto;
    left: 8px;
    right: 8px;
  }
  
  .toast {
    font-size: 0.88rem;
    padding: 12px 16px;
  }
  
  /* ✅ Sections et containers */
  .container {
    padding: 0 12px 40px;
  }
  
  .section {
    margin-bottom: 24px;
  }
  
  .section-title {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }
  
  /* ✅ Flex layouts responsive */
  .flex-between {
    flex-direction: column;
    align-items: stretch;
  }
  
  .flex-wrap {
    gap: 8px;
  }
  
  /* ✅ Boutons actions médicaments */
  .btns-prise-med,
  .actions-med {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-pris-med,
  .btn-reporte-med,
  .btn-action-med {
    width: 100%;
    justify-content: center;
  }
  
  /* ✅ Formulaires en colonnes */
  .champ-med {
    margin-bottom: 16px;
  }
  
  /* ✅ Header pages spéciales */
  .page-header-medicaments,
  .page-header-animaux {
    padding: 1.5rem 1rem;
  }
  
  .page-header-medicaments h1,
  .page-header-animaux h1 {
    font-size: 1.4rem;
  }
  
  /* ✅ Onglets scrollables */
  .onglets-medicaments {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .onglet-btn-med {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  /* ✅ Cartes prises médicaments */
  .carte-prise-med {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .heure-prise-med {
    min-width: auto;
    text-align: left;
    font-size: 1.2rem;
  }
  
  /* ✅ Footer responsive */
  .ga-footer {
    padding: 20px 16px;
  }
  
  .ga-footer-links {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── AMÉLIORATION EXTRA-PETIT MOBILE (≤480px) ────────────────────────────── */

@media (max-width: 480px) {
  
  /* ✅ Texte plus lisible */
  html {
    font-size: 15px;
  }
  
  body {
    padding-bottom: 75px;
  }
  
  /* ✅ Boutons pleine largeur */
  .btn-lg,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 14px 20px;
  }
  
  /* ✅ Navbar ultra-compacte */
  .navbar {
    min-height: 60px;
    padding: 8px 12px;
  }
  
  .navbar-brand img {
    height: 44px;
    width: 44px;
  }
  
  .navbar-brand-name {
    font-size: 1.1rem;
  }
  
  /* ✅ Grilles en une seule colonne */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-essentiel,
  .grid-outils {
    grid-template-columns: 1fr;
  }
  
  /* ✅ Header simplifié */
  .page-header-top {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-header h1 {
    font-size: 1.3rem;
  }
  
  /* ✅ Modal plein écran */
  .modal-backdrop {
    padding: 0;
  }
  
  .modal {
    border-radius: 0;
    max-height: 100vh;
  }
  
  /* ✅ Formulaires optimisés */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Évite zoom sur iOS/Android */
  }
  
  /* ✅ Container plus compact */
  .container {
    padding: 0 10px 36px;
  }
  
  /* ✅ Cards sans ombre excessive */
  .card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  }
  
  /* ✅ Bandeau alerte */
  .bandeau-alerte {
    padding: 12px;
    font-size: 0.88rem;
  }
  
  .bandeau-icone {
    font-size: 1.5rem !important;
  }
  
  /* ✅ Résumé du jour */
  .resume-jour {
    padding: 14px;
    font-size: 0.9rem;
  }
  
  /* ✅ Cartes outils */
  .card-outil {
    padding: 14px;
  }
  
  .card-outil h3 {
    font-size: 0.95rem;
  }
  
  /* ✅ Mobile bar ajustée */
  .mobile-bar {
    height: 65px;
  }
  
  .mobile-bar-item {
    font-size: 0.7rem;
  }
  
  .mobile-bar-icon {
    font-size: 1.4rem;
  }
  
  /* ✅ Toasts compacts */
  .toast {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  
  /* ✅ Onglets plus petits */
  .onglet-btn-med {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

/* ── AMÉLIORATION TACTILE GLOBALE ────────────────────────────────────────── */

@media (pointer: coarse) {
  /* ✅ Tous les éléments cliquables plus grands */
  button,
  a,
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* ✅ Espacement tactile entre boutons */
  .btn + .btn {
    margin-left: 8px;
  }
  
  /* ✅ Zone de tap plus grande pour les checkbox/radio */
  input[type="checkbox"],
  input[type="radio"] {
    transform: scale(1.3);
    margin: 8px;
  }
}

/* ── FIN CORRECTIONS RESPONSIVE MOBILE ────────────────────────────────────── */