/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN.CSS v2 — Override VISUEL UNIQUEMENT
   ─────────────────────────────────────────────────────────────────────────
   RÈGLE D'OR : on ne touche PAS aux dimensions, paddings, margins, grids,
   flex, positions, display, width, height qui sont définis dans
   premium.css et premium_mobile.css.
   On ne change QUE : couleurs, fonts, ombres, border-radius, backgrounds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ═══════════════════════════════════════════
   1. VARIABLES — écrase les :root de premium.css
   ═══════════════════════════════════════════ */
:root {
  --background: #F7F9FB !important;
  --text: #1B3A5C !important;
  --border: rgba(27,58,92,0.08) !important;
  --primary: #2E7D6F !important;
  --primary-dark: #256B5F !important;
  --chip-bg: #EDF7F4 !important;
  --chip-border: #C8E6DF !important;
  --chip-text: #1F6B5C !important;

  /* Nouvelles variables redesign */
  --rd-ink: #1B3A5C;
  --rd-ink-light: #4A6B8A;
  --rd-accent: #2E7D6F;
  --rd-gold: #C4975A;
  --rd-font-display: 'DM Serif Display', Georgia, serif;
  --rd-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════
   2. TYPOGRAPHIE GLOBALE
   ═══════════════════════════════════════════ */
body {
  font-family: var(--rd-font-body) !important;
  color: var(--rd-ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   3. NAVBAR
   ═══════════════════════════════════════════ */
.navbar {
  background: #fff !important;
  border-bottom-color: rgba(27,58,92,0.06) !important;
  box-shadow: 0 1px 10px rgba(27,58,92,0.04) !important;
}

.cabinet-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
}

.cabinet-title i {
  color: var(--rd-accent) !important;
}

/* ═══════════════════════════════════════════
   4. FOND PAGE ACCUEIL
   ═══════════════════════════════════════════ */
#welcome-page {
  background:
    radial-gradient(800px 400px at 50% -100px, #E8F5F1 0%, #F7F9FB 60%, #F7F9FB 100%),
    linear-gradient(180deg, #F7F9FB 0%, #F7F9FB 100%) !important;
}

/* ═══════════════════════════════════════════
   5. WELCOME CARDS — couleurs & apparence uniquement
   ═══════════════════════════════════════════ */
.welcome-card {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(27,58,92,0.05) !important;
  box-shadow: 0 6px 28px rgba(27,58,92,0.06) !important;
}

.welcome-brand {
  color: var(--rd-accent) !important;
  font-family: var(--rd-font-body) !important;
  letter-spacing: 1.2px !important;
}

.welcome-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 400 !important;
}

.welcome-note {
  color: var(--rd-ink-light) !important;
}

.welcome-doctors,
.welcome-doctors-2 {
  color: var(--rd-ink-light) !important;
  border-top-color: rgba(27,58,92,0.08) !important;
}

/* Hero images — juste un arrondi un peu plus doux */
.welcome-hero {
  border-color: rgba(27,58,92,0.05) !important;
}

/* ═══════════════════════════════════════════
   6. BOUTONS CTA — couleurs uniquement
   ═══════════════════════════════════════════ */
.welcome-cta {
  background: var(--rd-ink) !important;
  box-shadow: 0 6px 20px rgba(27,58,92,0.2) !important;
  font-family: var(--rd-font-body) !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

.welcome-cta:hover {
  background: #244C6E !important;
  box-shadow: 0 8px 26px rgba(27,58,92,0.28) !important;
  transform: translateY(-1px);
}

.welcome-cta:active {
  transform: translateY(0);
}

/* Boutons primaires (hors CTA) */
.btn-primary,
.btn-primary-600 {
  background: linear-gradient(90deg, var(--rd-accent), #3A9B8A) !important;
  border: none !important;
  font-family: var(--rd-font-body) !important;
}

.btn-primary:hover,
.btn-primary-600:hover {
  background: linear-gradient(90deg, #256B5F, #2E8C7C) !important;
}

.btn-outline-primary,
.btn-outline-primary-600 {
  border-color: var(--rd-ink) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-font-body) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary-600:hover {
  background: rgba(27,58,92,0.05) !important;
  border-color: var(--rd-ink) !important;
  color: var(--rd-ink) !important;
}

/* Bouton succès (envoyer) */
.btn-success {
  background: var(--rd-accent) !important;
  border-color: var(--rd-accent) !important;
}
.btn-success:hover {
  background: #256B5F !important;
  border-color: #256B5F !important;
}

/* ═══════════════════════════════════════════
   7. BADGES (Sécurisé, 4-6 min, etc.)
   ═══════════════════════════════════════════ */
.badge-chip {
  font-family: var(--rd-font-body) !important;
}

.badge-chip i {
  color: var(--rd-accent) !important;
}

/* ═══════════════════════════════════════════
   8. ACTION CARDS (grille raccourcis)
   On ne touche PAS : display, grid, flex, padding, gap, height, min-height
   On change SEULEMENT : couleurs, ombres, bordures, hover
   ═══════════════════════════════════════════ */
.action-card {
  border-color: rgba(27,58,92,0.06) !important;
  box-shadow: 0 2px 10px rgba(27,58,92,0.04) !important;
}

.action-card:hover {
  box-shadow: 0 6px 20px rgba(27,58,92,0.1) !important;
  border-color: rgba(46,125,111,0.2) !important;
}

.action-card h3 {
  font-family: var(--rd-font-body) !important;
  color: var(--rd-ink) !important;
}

.action-card p {
  color: var(--rd-ink-light) !important;
}

/* Couleurs variées par position dans la grille d'accueil */
.welcome-actions > .action-card:nth-child(1) > i { color: #2B7DE9 !important; }
.welcome-actions > .action-card:nth-child(2) > i { color: #6C63FF !important; }
.welcome-actions > .action-card:nth-child(3) > i { color: var(--rd-gold) !important; }
.welcome-actions > .action-card:nth-child(4) > i { color: var(--rd-accent) !important; }
.welcome-actions > .action-card:nth-child(5) > i { color: #E05555 !important; }
.welcome-actions > .action-card:nth-child(6) > i { color: #2B7DE9 !important; }
.welcome-actions > .action-card:nth-child(7) > i { color: #6C63FF !important; }
.welcome-actions > .action-card:nth-child(8) > i { color: #E74C3C !important; }

/* ═══════════════════════════════════════════
   9. FORMULAIRES — couleur focus uniquement
   ═══════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
  border-color: var(--rd-accent) !important;
  box-shadow: 0 0 0 3px rgba(46,125,111,0.1) !important;
}

.form-label {
  font-family: var(--rd-font-body) !important;
  color: var(--rd-ink) !important;
}

/* ═══════════════════════════════════════════
   10. CARDS GÉNÉRIQUES — ombre uniquement
   ═══════════════════════════════════════════ */
.card {
  box-shadow: 0 3px 14px rgba(27,58,92,0.05) !important;
}

.card-header {
  background-color: var(--rd-ink) !important;
  border-bottom-color: rgba(27,58,92,0.12) !important;
}

/* ═══════════════════════════════════════════
   11. PROGRESS BAR
   ═══════════════════════════════════════════ */
.progress-bar {
  background: linear-gradient(90deg, var(--rd-accent), #3A9B8A) !important;
}

/* ═══════════════════════════════════════════
   12. TABLES — couleur header
   ═══════════════════════════════════════════ */
.table-dark th,
thead.table-dark th {
  background-color: var(--rd-ink) !important;
}

.table-hover > tbody > tr:hover {
  background-color: rgba(46,125,111,0.05) !important;
}

/* ═══════════════════════════════════════════
   13. MODALS — couleurs
   ═══════════════════════════════════════════ */
.modal-content {
  border-color: rgba(27,58,92,0.06) !important;
  box-shadow: 0 16px 56px rgba(27,58,92,0.16) !important;
}

.modal-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
}

.modal-header {
  border-bottom-color: rgba(27,58,92,0.06) !important;
}

.modal-footer {
  border-top-color: rgba(27,58,92,0.06) !important;
}

/* ═══════════════════════════════════════════
   14. THANKS / SUCCESS — couleurs
   ═══════════════════════════════════════════ */
.thanks-card {
  border-color: rgba(27,58,92,0.06) !important;
}

.thanks-icon {
  background: #D4E8E0 !important;
}

.thanks-icon svg {
  fill: var(--rd-accent) !important;
}

.thanks-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 400 !important;
}

.thanks-text {
  color: var(--rd-ink-light) !important;
}

.thanks-btn-outline {
  border-color: var(--rd-ink) !important;
  color: var(--rd-ink) !important;
}

.thanks-btn-solid {
  background: var(--rd-ink) !important;
}

/* ═══════════════════════════════════════════
   15. REVIEW MODAL — couleurs
   ═══════════════════════════════════════════ */
.review-card {
  border-color: rgba(27,58,92,0.06) !important;
}

.review-icon {
  background: #D4E8E0 !important;
}

.review-icon svg {
  fill: var(--rd-accent) !important;
}

.review-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
}

.review-text {
  color: var(--rd-ink-light) !important;
}

.review-btn-solid {
  background: var(--rd-ink) !important;
}

.review-btn-outline {
  border-color: var(--rd-ink) !important;
  color: var(--rd-ink) !important;
}

/* ═══════════════════════════════════════════
   16. PAGES INTÉRIEURES
   ═══════════════════════════════════════════ */
#echelles-page .cabinet-title,
#ressources-page .cabinet-title {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-ink) !important;
}

/* ═══════════════════════════════════════════
   17. RESSOURCES — icônes
   ═══════════════════════════════════════════ */
#res-cat-list .res-icon {
  color: var(--rd-accent) !important;
}

#res-cat-list h3 {
  color: var(--rd-ink) !important;
  font-family: var(--rd-font-body) !important;
}

#res-cat-list p {
  color: var(--rd-ink-light) !important;
}

/* ═══════════════════════════════════════════
   18. QUIZ — couleurs feedback
   ═══════════════════════════════════════════ */
.quiz-feedback.correct {
  background-color: #EDF7F4 !important;
  color: #065f46 !important;
  border-color: #C8E6DF !important;
}

/* ═══════════════════════════════════════════
   19. FORM HEADER — cohérence
   ═══════════════════════════════════════════ */
.form-header-accent {
  background: linear-gradient(90deg, var(--rd-accent), #3A9B8A, var(--rd-ink)) !important;
}

.form-header-title {
  font-family: var(--rd-font-body) !important;
  color: var(--rd-ink) !important;
}

/* ═══════════════════════════════════════════
   20. SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,58,92,0.12); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,58,92,0.22); }

/* ═══════════════════════════════════════════
   21. SÉLECTION TEXTE
   ═══════════════════════════════════════════ */
::selection {
  background: rgba(46,125,111,0.15);
  color: var(--rd-ink);
}