/* ─── BREADCRUMB ─── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--forest); transition: color 0.18s; }
.breadcrumb a:hover { color: var(--forest-deep); }
.breadcrumb svg { stroke: var(--ink-soft); flex: none; }

/* ─── PAGE INTRO ─── */
.vrf-intro {
  background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  padding: 5px 0 36px;
  border-bottom: 1px solid var(--line);
}
.vrf-intro h1 { font-size: 2.4rem; margin-bottom: 10px; }
.vrf-intro p  { font-size: 1rem; color: var(--ink-soft); max-width: 560px; }
.vrf-intro .wrap,
.vrf-section .wrap { max-width: 980px; }

/* ─── MAIN SECTION ─── */
.vrf-section {
  padding: 48px 0 80px;
  background: var(--cream-2);
}

.vrf-logofr {
  height: 88px;
  width: auto;
  float: left;
  margin: 0 16px 12px 0;
}

/* ─── MODE RADIO BUTTONS ─── */
.vrf-mode {
  display: flex;
  gap: 8px;
}
.vrf-radio-btn {
  cursor: pointer;
}
.vrf-radio-btn input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.vrf-radio-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  border-radius: 10px;
  border: 2px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  user-select: none;
}
.vrf-radio-btn input:checked + span {
  border-color: var(--forest);
  background: var(--mist);
  color: var(--forest);
}
.vrf-radio-btn:hover span {
  border-color: var(--forest);
  color: var(--forest);
}

/* .vrf-toggle / .vrf-action / .vrf-confirm* : voir styles.css (composant partagé) */

/* ─── PDF BUTTON ─── */
.vrf-action .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* ─── INFOS ─── */
.vrf-infos {
  padding: 16px 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 28px;
  min-height: 54px;
  display: flex;
  align-items: center;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.vrf-infos p { margin: 0; }

/* ─── 10×10 GRID ─── */
.vrf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(72px, calc(10% - 5.4px)), 1fr));
  gap: 6px;
}
.vrf-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1.99rem;
  font-weight: 700;
  color: var(--ink-soft);
  color: var(--forest);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
  line-height: 1;
  padding: 0;
}
.vrf-cell:hover {
  border-color: var(--forest);
  color: var(--forest);
  background: var(--mist);
  transform: scale(1.08);
  z-index: 1;
}
.vrf-cell.active {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--paper);
  transform: scale(1.08);
  z-index: 2;
}
.vrf-cell.done {
  border-color: var(--sage);
  background: var(--mist);
  color: var(--forest);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 760px) {
  .vrf-intro h1 { font-size: 1.9rem; }
  .vrf-section  { padding: 10px 0 60px; }
}
@media (max-width: 560px) {
  .vrf-grid { gap: 4px; }
  .vrf-cell {
    border-radius: 6px;
    border-width: 1.5px;
  }
}
@media (max-width: 480px) {
  .vrf-grid { gap: 5px; }
}
@media (max-width: 380px) {
  .vrf-radio-btn span { padding: 7px 14px; }
}

/* ─── MODAL VÉRIFICATION ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.vrf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,35,30,0.55);
  backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.vrf-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.vrf-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.25s ease;
  width: min(90vw, 660px);
  max-height: 90vh;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
  z-index: 901;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vrf-modal.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: all;
}

.vrf-modal-content {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

/* ─── GRID DU MODAL ─── */
.vrf-mgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* D1 — titre de la question (en-tête fixe du modal) */
.vrf-mgrid-d1 {
  position: relative;
  background: #002c6e;
  border-radius: 14px 14px 0 0;
  padding: 26px 66px 26px 26px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  flex-shrink: 0;
}
.vrf-mgrid-d1-text {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.vrf-mgrid-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  border-radius: 0 10px 0 10px;
  background: #d93025;
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(217,48,37,0.3);
  transition: background 0.18s, transform 0.15s;
}
.vrf-mgrid-close:hover {
  background: #c5221f;
  transform: translateY(-1px);
}

/* D2, D5, D8 — titres de catégorie */
.vrf-mgrid-d2,
.vrf-mgrid-d5,
.vrf-mgrid-d8 {
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
}
.vrf-mgrid-d2 { background: #ff0000; color: #fff; }
.vrf-mgrid-d5 { background: #ff6600; color: #fff; }
.vrf-mgrid-d8 { background: #33cc33; color: #fff; }

/* D3, D6, D9 — questions  /  D4, D7, D10 — réponses */
.vrf-mgrid-d3, .vrf-mgrid-d6, .vrf-mgrid-d9,
.vrf-mgrid-d4, .vrf-mgrid-d7, .vrf-mgrid-d10 {
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 0.97rem;
  line-height: 1.3;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.vrf-mgrid-d3, .vrf-mgrid-d6, .vrf-mgrid-d9,
.vrf-mgrid-d4, .vrf-mgrid-d7, .vrf-mgrid-d10 { background: var(--paper); }

.vrf-mgrid-d3::before, .vrf-mgrid-d6::before, .vrf-mgrid-d9::before,
.vrf-mgrid-d4::before, .vrf-mgrid-d7::before, .vrf-mgrid-d10::before {
  flex: none;
  width: 50px;
  display: flex;
  align-items: center;
  /* justify-content: flex-start; */
  padding-left: 16px;
  background: linear-gradient(90deg, #8c8c8c 0%, #8c8c8c 70%, #ffffff 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
.vrf-mgrid-d3::before, .vrf-mgrid-d6::before, .vrf-mgrid-d9::before { content: "Q"; }
.vrf-mgrid-d4::before, .vrf-mgrid-d7::before, .vrf-mgrid-d10::before { content: "R"; }

.vrf-mgrid-d3 span, .vrf-mgrid-d6 span, .vrf-mgrid-d9 span,
.vrf-mgrid-d4 span, .vrf-mgrid-d7 span, .vrf-mgrid-d10 span {
  flex: 1;
  padding: 10px 16px;
  white-space: pre-line;
}
.vrf-mgrid-d3 span, .vrf-mgrid-d6 span, .vrf-mgrid-d9 span {
  background: #fffde7;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s ease;
}
.vrf-mgrid-d3 span:hover, .vrf-mgrid-d6 span:hover, .vrf-mgrid-d9 span:hover {
  background: #fff9c4;
}
.vrf-mgrid-d3 span.reading, .vrf-mgrid-d6 span.reading, .vrf-mgrid-d9 span.reading {
  background: #ffe082;
}
.vrf-mgrid-d4 span, .vrf-mgrid-d7 span, .vrf-mgrid-d10 span {
  background: #e8f5e9;
  filter: blur(5px);
  cursor: pointer;
  user-select: none;
  transition: filter 0.3s ease;
}
.vrf-mgrid-d4 span.revealed, .vrf-mgrid-d7 span.revealed, .vrf-mgrid-d10 span.revealed {
  filter: none;
  cursor: default;
  user-select: text;
}

/* ─── NAV BAR MODAL ─── */
.vrf-nav-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 14px 14px;
  flex-shrink: 0;
}
.vrf-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  background: #002c6e40;
  border: 1px solid #002c6e38;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.vrf-nav-btn:hover {
  background: var(--mist);
  border-color: var(--forest);
}
.vrf-nav-btn[style*="visibility: hidden"] {
  pointer-events: none;
  opacity: 0.3;
}
.vrf-nav-arrow {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-soft);
}
.vrf-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 50px;
  background: #d93025;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

/* .vrf-confirm* : voir styles.css (composant partagé) */

/* ─── RESPONSIVE MODAL ─── */
@media (max-width: 600px) {
  .vrf-modal-content { padding: 14px; }
  .vrf-mgrid { gap: 6px; }
  .vrf-mgrid-d1 { padding: 20px 58px 20px 18px; min-height: 68px; }
  .vrf-mgrid-d1-text { font-size: 1.05rem; }
  .vrf-mgrid-d3, .vrf-mgrid-d6, .vrf-mgrid-d9,
  .vrf-mgrid-d4, .vrf-mgrid-d7, .vrf-mgrid-d10 { 
    font-size: 1.2rem;
     /* padding: 12px 14px; */
     }
}
@media (max-width: 400px) {
  .vrf-modal { width: 97vw; max-height: 96vh; }
  .vrf-modal-content { padding: 10px; }
}