/* Page Questions : une question à la fois, réponse en un mot, détail à la demande.
   Sans JavaScript : les cinq réponses s'affichent l'une sous l'autre, détail visible. */
.qr { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.qr__panneau { background: linear-gradient(160deg, #1B3B5C 0%, #0F2740 70%); color: #EAF3FA; border-radius: 22px; padding: 28px 22px 18px; box-shadow: 0 30px 70px rgba(15,39,64,.35); }
.qr__h2 { margin: 0 0 16px; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; }
.qr__invite { display: none; margin: 0 0 16px; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.35); color: #fff; font-weight: 600; }
.qr__curseur { flex: none; color: #F2B8A2; animation: qr-curseur 1.6s ease-in-out infinite; }
@keyframes qr-curseur { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, 6px); } }
.qr__rangs { list-style: none; margin: 0; padding: 0; display: none; }
.js-qr .qr__invite { display: flex; }
.js-qr .qr__rangs { display: block; }
.qr__rangs li { border-top: 1px solid rgba(255,255,255,.12); }
.qr__rang { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 10px; background: transparent; border: 0; border-left: 4px solid transparent; border-radius: 10px; font: inherit; color: #fff; cursor: pointer; transition: background-color .3s ease, transform .3s ease, border-color .3s ease; }
.qr__num { flex: none; font-size: 1.5rem; font-weight: 700; color: #F2B8A2; min-width: 2.1ch; font-variant-numeric: tabular-nums; }
.qr__question { flex: 1; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.qr__fleche { flex: none; font-size: 1.4rem; color: rgba(255,255,255,.4); transition: transform .3s ease, color .3s ease; }
.qr__rang:hover, .qr__rang[aria-current="true"] { background: rgba(255,255,255,.1); border-left-color: var(--accent); transform: translateX(6px); }
.qr__rang[aria-current="true"] .qr__fleche, .qr__rang:hover .qr__fleche { transform: translateX(6px); color: #fff; }
.qr__rang:focus-visible { outline: 3px solid #F2B8A2; outline-offset: 2px; }

.qr__scene { display: grid; gap: 20px; }
.qr__carte { background: #fff; border: 1px solid var(--bord); border-radius: 22px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(31,68,102,.14); }
.qr__kicker { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.qr__titre { margin: 0 0 18px; font-size: 1.1rem; color: var(--texte-doux); font-weight: 600; }
.qr__mot { margin: 0 0 14px; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--bleu-fonce); }
.qr__phrase { margin: 0 0 18px; font-size: 1.2rem; color: var(--texte); }
.qr__plus { background: none; border: 1.5px solid var(--bleu); color: var(--bleu); border-radius: 999px; padding: 9px 18px; min-height: 44px; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.qr__plus:hover { background: var(--bleu); color: #fff; }
.qr__plus::after { content: " +"; }
.qr__plus[aria-expanded="true"]::after { content: " −"; }
.qr__detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bord); color: var(--texte-doux); }
.qr__detail p { margin: 0; }
.qr__plus { display: none; }
.js-qr .qr__plus { display: inline-block; }

.js-qr .qr__scene { display: block; }
.js-qr .qr__carte:not(.qr__carte--active) { display: none; }
.qr__carte--active { animation: qr-entree .55s cubic-bezier(.2,.7,.2,1); }
@keyframes qr-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .qr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .js-qr .qr__scene { position: sticky; top: 90px; }
}

/* Tableau comparatif : replié sous un bouton */
.comparatif__resume { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; min-height: 48px; border: 1.5px solid var(--bleu); border-radius: 999px; color: var(--bleu); font-weight: 700; font-size: 1.1rem; background: #fff; transition: background-color .25s ease, color .25s ease; }
.comparatif__resume::-webkit-details-marker { display: none; }
.comparatif__resume::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.comparatif[open] .comparatif__resume::after { content: "−"; }
.comparatif__resume:hover { background: var(--bleu); color: #fff; }
.comparatif[open] .comparatif__resume { margin-bottom: 20px; }

/* Autres questions : quatre thèmes */
.faq-theme__onglets { display: none; }
.js-qr .faq-theme__onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: #fff; border: 1px solid var(--bord); border-radius: 999px; margin-bottom: 22px; width: fit-content; max-width: 100%; }
.faq-theme__onglet { border: 0; background: transparent; padding: 10px 18px; min-height: 44px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--bleu-fonce); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.faq-theme__onglet[aria-selected="true"] { background: var(--bleu); color: #fff; }
.faq-theme__titre { margin: 28px 0 10px; font-size: 1.3rem; color: var(--bleu-fonce); }
.js-qr .faq-theme__titre { display: none; }
.js-qr .faq-theme__panneau[hidden] { display: none; }
.faq-theme__panneau .faq__item h4 { margin: 0; }
.faq-theme__panneau { animation: qr-entree .45s ease; }

@media (prefers-reduced-motion: reduce) { .qr__carte--active, .faq-theme__panneau { animation: none; } .qr__curseur { animation: none; } .qr__rang, .qr__plus, .comparatif__resume { transition: none; } }

/* Bandeau d'appel : les liens du texte restent lisibles sur le fond bleu */
.appel a:not(.bouton) { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.appel a:not(.bouton):hover { color: #F2B8A2; }
.appel__texte { color: #EAF3FA; font-size: 1.15rem; margin: 0 0 18px; }