/* ============================================================
   LE MIROIR INTÉRIEUR — Carnet de bord ennéagramme
   Deux thèmes : sombre (par défaut) et clair.
   Typographie ample, contrastée, sereine.
   ============================================================ */

:root {
  /* === Thème sombre — défaut === */
  --car-bg:        #070b14;
  --car-bg-deep:   #050810;
  --car-panel:     rgba(18, 26, 48, 0.86);
  --car-panel-2:   rgba(24, 33, 56, 0.94);
  --car-glass:     rgba(255, 255, 255, 0.07);
  --car-glass-2:   rgba(255, 255, 255, 0.12);
  --car-text:      #f1f5ff;
  --car-text-soft: #d8e0f4;
  --car-muted:     #a8b6dc;
  --car-line:      rgba(255, 255, 255, 0.18);
  --car-line-2:    rgba(255, 255, 255, 0.28);
  --car-gold:      #f5d77b;
  --car-gold-2:    #fbbf24;
  --car-gold-deep: #b88820;
  --car-gold-glow: rgba(245, 215, 123, 0.4);
  --car-emo:       #f9a8d4;
  --car-ment:      #93c5fd;
  --car-inst:      #fcd34d;
  --car-good:      #86efac;
  --car-warn:      #fed7aa;
  --car-shadow:    0 26px 72px rgba(2, 10, 28, 0.55);
  --car-shadow-soft: 0 12px 32px rgba(2, 10, 28, 0.32);
  --car-bg-grad:   radial-gradient(ellipse at 50% -10%, rgba(245, 215, 123, 0.08), transparent 55%),
                   radial-gradient(ellipse at 88% 92%, rgba(96, 165, 250, 0.06), transparent 55%),
                   var(--car-bg);
}

body.miroir.theme-light {
  --car-bg:        #fbf6e8;
  --car-bg-deep:   #f4ecd2;
  --car-panel:     rgba(255, 253, 248, 0.96);
  --car-panel-2:   #fffdf8;
  --car-glass:     rgba(45, 32, 8, 0.04);
  --car-glass-2:   rgba(45, 32, 8, 0.08);
  --car-text:      #1f1505;
  --car-text-soft: #3d2d10;
  --car-muted:     #6b5a3a;
  --car-line:      rgba(45, 32, 8, 0.18);
  --car-line-2:    rgba(45, 32, 8, 0.32);
  --car-gold:      #b88820;
  --car-gold-2:    #8a6510;
  --car-gold-deep: #5d4308;
  --car-gold-glow: rgba(184, 136, 32, 0.32);
  --car-shadow:    0 20px 50px rgba(45, 32, 8, 0.18);
  --car-shadow-soft: 0 8px 24px rgba(45, 32, 8, 0.10);
  --car-bg-grad:   radial-gradient(ellipse at 50% -10%, rgba(184, 136, 32, 0.10), transparent 55%),
                   radial-gradient(ellipse at 88% 92%, rgba(150, 100, 50, 0.05), transparent 55%),
                   var(--car-bg);
}

* { box-sizing: border-box; }

html, body { background: var(--car-bg); }

body.miroir {
  margin: 0;
  font-family: 'Inter', 'Source Sans Pro', system-ui, sans-serif;
  color: var(--car-text);
  background: var(--car-bg-grad);
  min-height: 100vh;
  line-height: 1.65;
  font-size: 18px;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* === Container universel === */
.miroir-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem clamp(1.1rem, 3vw, 2rem) 8rem;
}

/* === Header === */
.miroir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--car-line);
  margin-bottom: 2.2rem;
  gap: 1rem;
}
.miroir-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--car-text);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.miroir-brand__mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--car-gold), rgba(245, 215, 123, 0.2));
  box-shadow: 0 0 16px var(--car-gold-glow), inset 0 0 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.miroir-brand em { color: var(--car-gold); font-style: italic; font-weight: 500; }
.miroir-header__nav {
  display: flex;
  gap: 1.2rem;
  font-size: 0.98rem;
  align-items: center;
}
.miroir-header__nav a {
  color: var(--car-muted);
  text-decoration: none;
  transition: color 0.2s;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}
.miroir-header__nav a:hover { color: var(--car-gold); }

/* === Bouton de thème === */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--car-line-2);
  background: var(--car-glass);
  color: var(--car-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.22s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--car-gold);
  transform: rotate(15deg);
}

/* === Titres === */
.miroir-h1, h1.miroir {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 5.5vw, 3.2rem);
  letter-spacing: 0.005em;
  margin: 0 0 0.6rem;
  color: var(--car-text);
  line-height: 1.15;
}
.miroir-h1 em { color: var(--car-gold); font-style: italic; font-weight: 500; }
.miroir-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--car-text-soft);
  font-size: clamp(1.15rem, 2.5vw, 1.32rem);
  margin: 0 0 2.2rem;
  line-height: 1.55;
  font-weight: 400;
}

/* === Whisper temporel === */
.miroir-whisper {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--car-text-soft);
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.015em;
  font-weight: 500;
  opacity: 0.92;
}

/* === Salutation === */
.miroir-hello {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  color: var(--car-text);
  margin: 0.3rem 0 0.2rem;
  font-weight: 500;
}
.miroir-hello em { color: var(--car-gold); font-style: italic; font-weight: 500; }
.miroir-date {
  text-align: center;
  color: var(--car-text-soft);
  font-size: 1.05rem;
  margin: 0 0 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
}

/* === Bandeau type compagnon === */
.miroir-compagnon {
  background:
    linear-gradient(160deg, rgba(245, 215, 123, 0.10), rgba(96, 165, 250, 0.04)),
    var(--car-panel);
  border: 1px solid var(--car-line-2);
  border-radius: 22px;
  padding: 1.8rem 1.6rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  box-shadow: var(--car-shadow-soft);
  position: relative;
  overflow: hidden;
}
.miroir-compagnon::before {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 70%; height: 100%;
  background: radial-gradient(ellipse, var(--car-gold-glow), transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}
.miroir-compagnon__label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--car-gold);
  margin-bottom: 0.6rem;
  font-weight: 600;
  position: relative;
}
.miroir-compagnon__type {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.55rem, 3.8vw, 1.9rem);
  color: var(--car-text);
  margin: 0 0 0.4rem;
  font-weight: 500;
  position: relative;
}
.miroir-compagnon__type em { color: var(--car-gold); font-style: italic; }
.miroir-compagnon__phrase {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.22rem);
  color: var(--car-text-soft);
  margin: 0.6rem auto 0;
  max-width: 36rem;
  line-height: 1.6;
  font-weight: 500;
  position: relative;
}

/* === Centre cultivé === */
.miroir-centre-card {
  margin: 0 auto 2.5rem;
  background: linear-gradient(160deg, rgba(252, 211, 77, 0.14), rgba(252, 211, 77, 0.04));
  border: 1px solid rgba(252, 211, 77, 0.42);
  border-radius: 18px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
body.miroir.theme-light .miroir-centre-card {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.15), rgba(184, 136, 32, 0.05));
  border-color: rgba(184, 136, 32, 0.45);
}
.miroir-centre-card__icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.5), rgba(252, 211, 77, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
}
.miroir-centre-card__label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--car-gold);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.miroir-centre-card__text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--car-text-soft);
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
}

/* === Grille de portes === */
.miroir-portes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .miroir-portes { grid-template-columns: repeat(2, 1fr); }
}

.miroir-porte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--car-panel);
  border: 1px solid var(--car-line-2);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  color: var(--car-text);
  transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  overflow: hidden;
  min-height: 140px;
}
.miroir-porte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.miroir-porte:hover {
  border-color: var(--car-gold);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(2, 10, 28, 0.45);
}
body.miroir.theme-light .miroir-porte:hover {
  box-shadow: 0 16px 36px rgba(45, 32, 8, 0.15);
}
.miroir-porte:hover::before { opacity: 1; }
.miroir-porte__icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 12px var(--car-gold-glow));
}
.miroir-porte__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
  color: var(--car-text);
}
.miroir-porte__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--car-text-soft);
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
}
.miroir-porte__arrow {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--car-gold);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.miroir-porte.is-visited {
  background: linear-gradient(160deg, rgba(134, 239, 172, 0.06), var(--car-panel));
  border-color: rgba(134, 239, 172, 0.42);
}
.miroir-porte.is-visited .miroir-porte__title::after {
  content: " ✓";
  color: var(--car-good);
  font-weight: 600;
}

/* === Bandeau reprise === */
.miroir-reprise {
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.14), rgba(245, 215, 123, 0.04));
  border: 1px solid rgba(245, 215, 123, 0.42);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  margin: 0 auto 2rem;
}
.miroir-reprise__label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--car-gold);
  margin-bottom: 0.55rem;
  font-weight: 600;
}
.miroir-reprise__vow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--car-text);
  border-left: 3px solid var(--car-gold);
  padding-left: 1rem;
  margin: 0.5rem 0 1.1rem;
  line-height: 1.55;
  font-weight: 500;
}
.miroir-reprise__q {
  font-size: 1.05rem;
  color: var(--car-text-soft);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.miroir-reprise__opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
.miroir-reprise__opt {
  background: var(--car-glass);
  border: 1px solid var(--car-line-2);
  border-radius: 12px;
  padding: 0.8rem 0.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--car-text);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-weight: 500;
}
.miroir-reprise__opt:hover {
  border-color: var(--car-gold);
  color: var(--car-gold);
}
.miroir-reprise__opt.is-active {
  background: var(--car-gold);
  color: var(--car-bg-deep);
  border-color: var(--car-gold);
  font-weight: 600;
}

/* === Formulaires === */
.miroir-field { margin: 1.4rem 0; }
.miroir-field__label {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--car-gold);
  margin-bottom: 0.7rem;
  font-weight: 600;
}
.miroir-input, .miroir-textarea, .miroir-select {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: var(--car-glass);
  border: 1px solid var(--car-line-2);
  border-radius: 12px;
  color: var(--car-text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  resize: vertical;
  transition: border-color 0.2s, background 0.2s;
  font-weight: 500;
  line-height: 1.6;
}
.miroir-input:focus, .miroir-textarea:focus, .miroir-select:focus {
  outline: none;
  border-color: var(--car-gold);
  background: var(--car-glass-2);
}
.miroir-textarea { min-height: 5.5rem; line-height: 1.65; }

/* === Boutons === */
.miroir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 1px solid var(--car-gold);
  background: var(--car-gold);
  color: var(--car-bg-deep);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.22s;
  text-decoration: none;
}
.miroir-btn:hover {
  background: var(--car-gold-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--car-gold-glow);
}
.miroir-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.miroir-btn--ghost {
  background: transparent;
  color: var(--car-gold);
  border: 1px solid var(--car-line-2);
}
.miroir-btn--ghost:hover {
  border-color: var(--car-gold);
  background: var(--car-glass);
}
.miroir-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

/* === Zones de niveau === */
.niveau-zones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 1.6rem 0;
}
.niveau-zone {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.3rem 1.3rem;
  background: var(--car-panel);
  border: 1px solid var(--car-line-2);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.22s;
  text-align: left;
  font: inherit;
  color: inherit;
}
.niveau-zone:hover {
  border-color: var(--car-gold);
  transform: translateX(4px);
}
.niveau-zone.is-active {
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.14), var(--car-panel));
  border-color: var(--car-gold);
  box-shadow: 0 0 0 1px var(--car-gold-glow), 0 12px 30px rgba(2, 10, 28, 0.35);
}
.niveau-zone__icon {
  flex-shrink: 0;
  font-size: 2rem;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--car-glass);
}
.niveau-zone__body { flex: 1; }
.niveau-zone__nom {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--car-text);
  margin: 0 0 0.35rem;
}
.niveau-zone__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--car-text-soft);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.niveau-precision { margin-top: 1.6rem; text-align: center; }
.niveau-precision__toggle {
  background: none;
  border: none;
  color: var(--car-gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.niveau-precision__toggle:hover { opacity: 1; }
.niveau-details { margin-top: 1.1rem; display: none; }
.niveau-details.is-open { display: block; }
.niveau-detail {
  padding: 1rem 1.2rem;
  background: var(--car-glass);
  border: 1px solid var(--car-line);
  border-radius: 12px;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.niveau-detail:hover { border-color: var(--car-gold); }
.niveau-detail.is-active {
  background: rgba(245, 215, 123, 0.12);
  border-color: var(--car-gold);
}
.niveau-detail__head {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin-bottom: 0.35rem;
}
.niveau-detail__n {
  color: var(--car-gold);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.niveau-detail__titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--car-text);
  font-weight: 500;
}
.niveau-detail__texte {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--car-text-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

/* === Check cards === */
.check-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 1.1rem 0;
}
@media (min-width: 600px) {
  .check-cards { grid-template-columns: 1fr 1fr; }
}
.check-card {
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 3rem;
  background: var(--car-panel);
  border: 1px solid var(--car-line-2);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s;
  text-align: left;
  user-select: none;
}
.check-card:hover {
  border-color: var(--car-gold);
  background: var(--car-panel-2);
}
.check-card input { display: none; }
.check-card__box {
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--car-line-2);
  background: var(--car-glass);
  transition: all 0.22s;
}
.check-card.is-checked .check-card__box {
  background: var(--car-gold);
  border-color: var(--car-gold);
  box-shadow: 0 0 12px var(--car-gold-glow);
}
.check-card.is-checked .check-card__box::after {
  content: "✓";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--car-bg-deep);
  font-weight: 700;
  font-size: 0.95rem;
}
.check-card__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.12rem;
  color: var(--car-text);
  display: block;
  line-height: 1.4;
  font-weight: 500;
}
.check-card__detail {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--car-text-soft);
  margin-top: 0.3rem;
  line-height: 1.45;
  font-weight: 500;
}
.check-card.is-checked {
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.12), var(--car-panel));
  border-color: var(--car-gold);
}
.check-card--essence.is-checked {
  background: linear-gradient(160deg, rgba(134, 239, 172, 0.12), var(--car-panel));
  border-color: rgba(134, 239, 172, 0.5);
}
.check-card--essence.is-checked .check-card__box {
  background: #86efac;
  border-color: #86efac;
  box-shadow: 0 0 12px rgba(134, 239, 172, 0.5);
}

/* === Section titres === */
.miroir-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--car-text);
  margin: 2.2rem 0 0.5rem;
  letter-spacing: 0.005em;
}
.miroir-section-title em { color: var(--car-gold); font-style: italic; }
.miroir-section-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--car-text-soft);
  font-size: 1.08rem;
  margin: 0 0 1.3rem;
  line-height: 1.55;
  font-weight: 500;
}

/* === Confirmation === */
.miroir-ok {
  display: inline-block;
  margin-left: 0.8rem;
  color: var(--car-good);
  font-size: 1rem;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
}
.miroir-ok.is-visible { opacity: 1; }

/* === Bottom nav === */
.miroir-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--car-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--car-line-2);
  padding: 0.55rem 0 calc(0.55rem + env(safe-area-inset-bottom));
  z-index: 100;
  display: flex;
  justify-content: space-around;
}
body.miroir.theme-light .miroir-bottom-nav {
  background: rgba(255, 253, 248, 0.95);
}
.miroir-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  text-decoration: none;
  color: var(--car-text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.2rem;
  transition: color 0.2s;
  font-weight: 500;
  font-family: 'Cormorant Garamond', serif;
}
.miroir-bottom-nav__item .icon {
  font-size: 1.4rem;
  line-height: 1;
}
.miroir-bottom-nav__item.is-active,
.miroir-bottom-nav__item:hover {
  color: var(--car-gold);
}

/* === Seuil === */
.miroir-seuil {
  text-align: center;
  max-width: 40rem;
  margin: 4rem auto 0;
  padding: 0 1.5rem;
}
.miroir-seuil__ornament {
  color: var(--car-gold);
  font-size: 1.1rem;
  letter-spacing: 0.8em;
  text-indent: 0.8em;
  opacity: 0.65;
  margin-bottom: 1.6rem;
}
.miroir-seuil h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 6.5vw, 3.5rem);
  color: var(--car-text);
  margin: 0 0 0.7rem;
  line-height: 1.1;
}
.miroir-seuil h1 em { color: var(--car-gold); font-style: italic; }
.miroir-seuil__intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.22rem;
  color: var(--car-text-soft);
  margin: 0 auto 3rem;
  max-width: 32rem;
  line-height: 1.65;
  font-weight: 500;
}
.miroir-seuil__portes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 3rem;
}
@media (min-width: 600px) {
  .miroir-seuil__portes { grid-template-columns: 1fr 1fr; }
}
.miroir-seuil__porte {
  display: block;
  text-decoration: none;
  color: var(--car-text);
  padding: 2rem 1.4rem;
  background: var(--car-panel);
  border: 1px solid var(--car-line-2);
  border-radius: 22px;
  transition: all 0.25s;
}
.miroir-seuil__porte:hover {
  border-color: var(--car-gold);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(2, 10, 28, 0.45);
}
.miroir-seuil__porte-ar {
  font-size: 2.6rem;
  margin-bottom: 0.9rem;
  filter: drop-shadow(0 0 16px var(--car-gold-glow));
}
.miroir-seuil__porte-titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--car-text);
}
.miroir-seuil__porte-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--car-text-soft);
  font-size: 1.06rem;
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
}
.miroir-seuil__porte--soft {
  background: var(--car-glass);
  border-color: var(--car-line);
}

/* === Animations === */
.fade-in-up {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.06s; }
.delay-2 { animation-delay: 0.12s; }
.delay-3 { animation-delay: 0.18s; }
.delay-4 { animation-delay: 0.24s; }
.delay-5 { animation-delay: 0.30s; }
.delay-6 { animation-delay: 0.36s; }

/* === Form pages === */
.miroir-form-wrap {
  max-width: 30rem;
  margin: 3rem auto 0;
  text-align: center;
}
.miroir-back {
  display: inline-block;
  margin: 1.2rem 0;
  color: var(--car-text-soft);
  text-decoration: none;
  font-size: 1.02rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
}
.miroir-back:hover { color: var(--car-gold); }

/* ============================================================
   v6 — Miroir hebdomadaire + Suggestions automatiques
   ============================================================ */

.weekly-suggestions {
  margin: 2.2rem auto 0;
  background: linear-gradient(160deg, rgba(134, 239, 172, 0.10), rgba(134, 239, 172, 0.02));
  border: 1px solid rgba(134, 239, 172, 0.32);
  border-radius: 18px;
  padding: 1.4rem 1.4rem;
}
.weekly-suggestions__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 500;
  color: #86efac; margin: 0 0 .8rem;
}
.weekly-suggestions__item p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  color: var(--car-text-soft);
  margin: .5rem 0;
  line-height: 1.55;
}

.weekly-mirror {
  margin: 2.2rem auto 0;
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.10), rgba(245, 215, 123, 0.02));
  border: 1px solid rgba(245, 215, 123, 0.35);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
}
.weekly-mirror__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 500;
  margin: 0 0 .3rem;
  color: var(--car-text);
}
.weekly-mirror__title em { color: var(--car-gold); font-style: italic; }
.weekly-mirror__sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: .95rem;
  color: var(--car-text-soft);
  margin: 0 0 1rem; opacity: 0.85;
}
.weekly-mirror__line {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--car-text);
  margin: .5rem 0;
  line-height: 1.6;
}
.weekly-mirror__line strong { color: var(--car-gold); font-weight: 600; }
.weekly-mirror__line em { font-style: italic; color: var(--car-text-soft); }

/* === Carte de bienvenue (1er accès) === */
.welcome-card {
  margin: 0 auto 2rem;
  background: linear-gradient(160deg, rgba(245, 215, 123, 0.16), rgba(245, 215, 123, 0.04));
  border: 1px solid var(--car-gold);
  border-radius: 20px;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 12px 36px rgba(245, 215, 123, 0.18);
}
.welcome-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 500;
  color: var(--car-text); margin: 0 0 .8rem;
}
.welcome-card h2 em { color: var(--car-gold); font-style: italic; }
.welcome-card p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem; color: var(--car-text-soft);
  line-height: 1.6; margin: .5rem 0;
}
.welcome-card ul {
  list-style: none; padding: 0; margin: 1rem 0;
}
.welcome-card li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; color: var(--car-text-soft);
  padding: .5rem 0;
  line-height: 1.5;
}
.welcome-card li strong {
  color: var(--car-gold); font-weight: 600;
}

/* ============================================================
   v7 — Renforce le thème clair partout (lisibilité totale)
   ============================================================ */

/* Le HTML aussi prend la couleur en thème clair */
html.theme-light, html.theme-light body.miroir { background: #fbf6e8 !important; }
html:not(.theme-light), html:not(.theme-light) body.miroir { /* sombre par défaut */ }

/* Bouton flottant adapté thème clair */
body.miroir.theme-light #theme-toggle-floating {
  background: rgba(255, 253, 248, .9) !important;
  border-color: #b88820 !important;
  color: #b88820 !important;
  box-shadow: 0 4px 14px rgba(45, 32, 8, .12) !important;
}

/* Centre cultivé — thème clair lisible */
body.miroir.theme-light .miroir-centre-card {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.18), rgba(184, 136, 32, 0.06));
  border-color: rgba(184, 136, 32, 0.55);
}
body.miroir.theme-light .miroir-centre-card__label { color: #8a6510; }
body.miroir.theme-light .miroir-centre-card__text { color: #1f1505 !important; opacity: 1; }
body.miroir.theme-light .miroir-centre-card__icon {
  background: radial-gradient(circle, rgba(184,136,32,.4), rgba(184,136,32,.1));
}

/* Compagnon — thème clair */
body.miroir.theme-light .miroir-compagnon {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.10), rgba(184, 136, 32, 0.03)), #fffdf8;
  border-color: rgba(184, 136, 32, 0.4);
}
body.miroir.theme-light .miroir-compagnon__label { color: #8a6510; }
body.miroir.theme-light .miroir-compagnon__type { color: #1f1505; }
body.miroir.theme-light .miroir-compagnon__type em { color: #b88820; }
body.miroir.theme-light .miroir-compagnon__phrase { color: #3d2d10 !important; }

/* Welcome card */
body.miroir.theme-light .welcome-card {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.12), rgba(184, 136, 32, 0.03));
  border-color: #b88820;
}
body.miroir.theme-light .welcome-card h2 { color: #1f1505; }
body.miroir.theme-light .welcome-card h2 em { color: #b88820; }
body.miroir.theme-light .welcome-card p,
body.miroir.theme-light .welcome-card li { color: #3d2d10; }
body.miroir.theme-light .welcome-card li strong { color: #8a6510; }

/* Portes du jour */
body.miroir.theme-light .miroir-porte {
  background: #fffdf8;
  border-color: #d4c89a;
}
body.miroir.theme-light .miroir-porte:hover { border-color: #b88820; }
body.miroir.theme-light .miroir-porte__title { color: #1f1505; }
body.miroir.theme-light .miroir-porte__desc { color: #5b4a2a; }
body.miroir.theme-light .miroir-porte__arrow { color: #b88820; }

/* Reprise du vœu */
body.miroir.theme-light .miroir-reprise {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.14), rgba(184, 136, 32, 0.04));
  border-color: rgba(184, 136, 32, 0.5);
}
body.miroir.theme-light .miroir-reprise__label { color: #8a6510; }
body.miroir.theme-light .miroir-reprise__vow { color: #1f1505; border-left-color: #b88820; }
body.miroir.theme-light .miroir-reprise__q { color: #3d2d10; }
body.miroir.theme-light .miroir-reprise__opt {
  background: rgba(255, 253, 248, .9); color: #5b4a2a;
  border-color: rgba(45, 32, 8, .25);
}
body.miroir.theme-light .miroir-reprise__opt.is-active {
  background: #b88820; color: #fffdf8; border-color: #b88820;
}

/* Whisper */
body.miroir.theme-light .miroir-whisper { color: #5b4a2a; }
body.miroir.theme-light .miroir-hello { color: #1f1505; }
body.miroir.theme-light .miroir-hello em { color: #b88820; }
body.miroir.theme-light .miroir-date { color: #5b4a2a; }

/* Brand header */
body.miroir.theme-light .miroir-brand { color: #1f1505; }
body.miroir.theme-light .miroir-brand em { color: #b88820; }
body.miroir.theme-light .miroir-brand__mark {
  background: radial-gradient(circle at 35% 30%, #b88820, rgba(184, 136, 32, 0.2));
}
body.miroir.theme-light .miroir-header__nav a { color: #5b4a2a; }
body.miroir.theme-light .miroir-header__nav a:hover { color: #b88820; }
body.miroir.theme-light .miroir-header { border-bottom-color: rgba(45, 32, 8, .18); }

/* Titres + sub */
body.miroir.theme-light .miroir-h1 { color: #1f1505; }
body.miroir.theme-light .miroir-h1 em { color: #b88820; }
body.miroir.theme-light .miroir-sub { color: #3d2d10; }

/* Bottom nav */
body.miroir.theme-light .miroir-bottom-nav {
  background: rgba(255, 253, 248, .95) !important;
  border-top-color: rgba(184, 136, 32, .4);
}
body.miroir.theme-light .miroir-bottom-nav__item { color: #5b4a2a; }
body.miroir.theme-light .miroir-bottom-nav__item.is-active,
body.miroir.theme-light .miroir-bottom-nav__item:hover { color: #b88820; }

/* Weekly mirror & suggestions — thème clair */
body.miroir.theme-light .weekly-mirror {
  background: linear-gradient(160deg, rgba(184, 136, 32, 0.12), rgba(184, 136, 32, 0.03));
  border-color: rgba(184, 136, 32, 0.5);
}
body.miroir.theme-light .weekly-mirror__title { color: #1f1505; }
body.miroir.theme-light .weekly-mirror__title em { color: #b88820; }
body.miroir.theme-light .weekly-mirror__line { color: #3d2d10; }
body.miroir.theme-light .weekly-mirror__line strong { color: #b88820; }
body.miroir.theme-light .weekly-suggestions {
  background: linear-gradient(160deg, rgba(70, 140, 80, 0.10), rgba(70, 140, 80, 0.02));
  border-color: rgba(70, 140, 80, 0.4);
}
body.miroir.theme-light .weekly-suggestions__title { color: #2d6040; }
body.miroir.theme-light .weekly-suggestions__item p { color: #3d2d10; }

/* Bouton qui doit toujours être lisible */
body.miroir.theme-light .miroir-btn {
  background: #b88820 !important; color: #fffdf8 !important; border-color: #b88820 !important;
}
body.miroir.theme-light .miroir-btn--ghost {
  background: transparent !important; color: #b88820 !important;
  border-color: rgba(45, 32, 8, .3) !important;
}

/* ============================================================
   v8 — Thème clair : forcer tout (override stylé)
   ============================================================ */

/* === Body fond UNIFORME en clair, plus de gradient capricieux === */
html.theme-light,
body.miroir.theme-light {
  background: #fbf6e8 !important;
  background-image: none !important;
}

/* === Centre cultivé : carte vraiment lisible en clair === */
body.miroir.theme-light .miroir-centre-card {
  background: linear-gradient(160deg, #fff5d6, #fce9b8) !important;
  border: 1.5px solid #b88820 !important;
}
body.miroir.theme-light .miroir-centre-card__icon {
  background: radial-gradient(circle, #fbbf24, rgba(251,191,36,.2)) !important;
}
body.miroir.theme-light .miroir-centre-card__label {
  color: #8a6510 !important; font-weight: 700;
}
body.miroir.theme-light .miroir-centre-card__text {
  color: #1f1505 !important; opacity: 1 !important;
}

/* === Sections de check-cards : fond clair === */
body.miroir.theme-light .miroir-section-title {
  color: #1f1505 !important;
}
body.miroir.theme-light .miroir-section-sub {
  color: #3d2d10 !important;
}
body.miroir.theme-light .check-cards {
  background: transparent !important;
}
body.miroir.theme-light .check-card {
  background: #fffdf8 !important;
  border-color: rgba(184,136,32,0.3) !important;
}
body.miroir.theme-light .check-card:hover {
  background: #fff5d6 !important;
  border-color: #b88820 !important;
}
body.miroir.theme-light .check-card__label {
  color: #1f1505 !important;
}
body.miroir.theme-light .check-card__detail {
  color: #5b4a2a !important;
}
body.miroir.theme-light .check-card.is-checked {
  background: linear-gradient(160deg, #fff5d6, #fce9b8) !important;
  border-color: #b88820 !important;
}
body.miroir.theme-light .check-card.is-checked .check-card__box {
  background: #b88820 !important;
  border-color: #b88820 !important;
}
body.miroir.theme-light .check-card__box {
  background: rgba(184,136,32,0.06) !important;
  border-color: rgba(184,136,32,0.4) !important;
}

/* === Sortir les éléments parasites du dark === */
body.miroir.theme-light * {
  --car-bg-grad: none;
}