/* ============================================================
   Diagnostic Drivers & Motivations — compléments à style.css
   (même charte : Nunito, bleu #1226AA, corail, vert d'eau, jaune)
   ============================================================ */

.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;
}
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.barre-envoi { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.barre-envoi .btn-primary, .barre-envoi .btn-secondary { margin-top: 0; }
#progress-hint { font-size: .85rem; color: #777; }

/* Drivers : ligne sans réponse signalée à l'envoi */
.q-table tbody tr.manquante { background: #FFF0EE; box-shadow: inset 4px 0 0 var(--corail); }

/* ── Cartes de motivations ───────────────────────────────── */
.repere {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bleu); margin: 4px 0 10px;
}
.repere-bas { color: #8A90B0; margin: 10px 0 0; }

.cartes { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.carte {
  display: grid;
  grid-template-columns: 34px 46px 1fr auto;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--gris2);
  border-radius: 12px;
  padding: 10px 12px 10px 10px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.carte:hover { border-color: #B9C0EA; box-shadow: 0 2px 10px rgba(18,38,170,.08); }
.carte-rang {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem;
  background: var(--gris); color: var(--bleu);
  transition: background .2s, color .2s;
}
.carte-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #EEF0FF; color: var(--bleu);
}
.carte-texte { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.carte-texte strong { color: var(--bleu); font-weight: 900; font-size: 1rem; }
.carte-texte span { font-size: .86rem; color: #4A5078; }

.carte-actions { display: flex; align-items: center; gap: 4px; }
.btn-fleche {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--gris2); background: #fff; color: var(--bleu);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-fleche:hover { border-color: var(--bleu); background: #EEF0FF; }
.btn-fleche:focus-visible { outline: 3px solid rgba(18,38,170,.35); outline-offset: 1px; }
.carte:first-child .btn-fleche[data-sens="-1"],
.carte:last-child  .btn-fleche[data-sens="1"] { opacity: .3; pointer-events: none; }
.carte-poignee { color: #A7ADCB; display: flex; padding: 0 2px 0 4px; }

/* Trio de tête et fin de classement */
.carte-top { border-color: var(--bleu); background: #FBFBFF; }
.carte-top .carte-rang { background: var(--jaune); color: var(--bleu); }
.carte-top .carte-ico  { background: var(--bleu); color: #fff; }
.carte-bas { background: #FAFAFC; }
.carte-bas .carte-texte strong { color: #4A5590; }
.carte-bas .carte-ico { background: var(--gris); color: #6A73A8; }

/* Glisser-déposer */
.carte-fantome { opacity: .35; background: #EEF0FF; border-style: dashed; }
.carte-choisie { box-shadow: 0 10px 28px rgba(18,38,170,.22); cursor: grabbing; }
.carte-bouge { animation: bouge .35s ease; }
@keyframes bouge { 0% { background: #FFF9C9; } 100% { background: inherit; } }
@media (prefers-reduced-motion: reduce) { .carte-bouge { animation: none; } }

@media (max-width: 620px) {
  .carte { grid-template-columns: 30px 38px 1fr auto; gap: 8px; padding: 8px; }
  .carte-rang { width: 30px; height: 30px; font-size: .9rem; }
  .carte-ico  { width: 38px; height: 38px; border-radius: 10px; }
  .carte-texte span { font-size: .8rem; }
  .carte-poignee { display: none; }
  .btn-fleche { width: 32px; height: 32px; }
  .carte-actions { flex-direction: column; gap: 3px; }
}

/* ── Synthèse ────────────────────────────────────────────── */
.intro-bloc { margin-bottom: 18px; color: #555; font-size: .92rem; }
.driver-resume { font-size: .82rem; color: #666; margin-top: 6px; padding-left: 4px; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.tuile {
  background: var(--gris); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.tuile-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6A73A8; }
.tuile strong { font-size: 1.1rem; font-weight: 900; color: var(--bleu); line-height: 1.3; }
.tuile-sous { font-size: .82rem; color: #555; }
.tuile-accent { background: var(--bleu); }
.tuile-accent .tuile-label { color: var(--jaune); }
.tuile-accent strong, .tuile-accent .tuile-sous { color: #fff; }
.tuile-ico { display: flex; align-items: center; gap: 6px; }
@media (max-width: 620px) { .tuiles { grid-template-columns: 1fr; } }

.echelle { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.echelle-ligne {
  display: grid; grid-template-columns: 28px 30px 130px 1fr;
  align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px dashed var(--gris2);
}
.echelle-ligne:last-child { border-bottom: none; }
.echelle-rang { font-weight: 900; color: #8A90B0; text-align: center; }
.echelle-ico { color: #6A73A8; display: flex; }
.echelle-nom { font-weight: 800; color: var(--bleu); }
.echelle-barre { background: var(--gris2); height: 10px; border-radius: 10px; overflow: hidden; }
.echelle-barre span { display: block; height: 100%; border-radius: 10px; background: #B9C0EA; }
.echelle-top .echelle-rang { color: var(--bleu); }
.echelle-top .echelle-ico { color: var(--bleu); }
.echelle-top .echelle-barre span { background: linear-gradient(90deg, var(--bleu), var(--vert-eau)); }
@media (max-width: 620px) {
  .echelle-ligne { grid-template-columns: 22px 24px 1fr; }
  .echelle-barre { display: none; }
}

.cles h3 {
  font-size: .95rem; font-weight: 900; color: var(--bleu);
  margin: 26px 0 10px; display: inline-block;
  background: linear-gradient(to bottom, transparent 62%, var(--jaune) 62%);
}
.cles h3:first-of-type { margin-top: 4px; }
.cles p { font-size: .92rem; margin-bottom: 4px; }
.cle-bloc { border-left: 3px solid var(--gris2); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.cle-titre { font-weight: 900; color: var(--bleu); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cle-titre span { font-weight: 400; color: #555; }
.croisement-appui   { border-left-color: var(--vert-eau); }
.croisement-tension { border-left-color: var(--corail); }
.badge-type {
  font-size: .7rem !important; font-weight: 800 !important; padding: 2px 9px; border-radius: 10px;
  background: var(--gris); color: var(--bleu) !important;
}
.croisement-appui   .badge-type { background: #DDF7EF; color: #0E6B54 !important; }
.croisement-tension .badge-type { background: #FFE6E0; color: #A3260C !important; }
.note-positive { background: #F0FBF8; border-radius: 8px; padding: 10px 14px; margin-top: 6px; }
.questions { padding-left: 20px; font-size: .92rem; }
.questions li { margin-bottom: 6px; }

.note-methodo { font-size: .78rem; color: #8A90B0; margin-top: 18px; padding: 0 6px; }
.recap-fin p { margin-bottom: 4px; }

/* ── Impression de la synthèse ───────────────────────────── */
@media print {
  body { background: #fff; font-size: 12px; }
  .bandeau, .progress-bar-wrap, .footer, .recap-fin button, .no-print { display: none !important; }
  .header { background: #fff; color: var(--bleu); padding: 0 0 8px; border-bottom: 2px solid var(--bleu); }
  .header .step-badge { display: none; }
  .card { box-shadow: none; border: 1px solid var(--gris2); border-top: 3px solid var(--bleu); padding: 16px 18px; margin-top: 12px; break-inside: avoid-page; }
  .cles { break-inside: auto; }
  .cle-bloc { break-inside: avoid; }
  .tuile-accent { background: var(--bleu) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .driver-bar-fill, .echelle-barre span, .tuile, .badge-type { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}