/* Organiser un voyage : douze questions en cartes sur deux colonnes, le devis au milieu, puis un index compact. */
.pg.pg-seul { grid-template-columns: minmax(0, 1fr); }
.pg-t { position: relative; padding-right: 280px; min-height: 190px; }
.pg h1 { font-size: clamp(30px, 3.2vw, 46px); max-width: 21em; }
.pg-t .accroche { max-width: 36em; }
.pg-t::after { content: "?"; content: "?" / ""; position: absolute; right: 8px; top: -14px; font-size: 230px; line-height: 1; font-weight: 800; color: transparent; background: linear-gradient(135deg, var(--bleu) 0 16.66%, var(--vert) 16.66% 33.33%, var(--orange) 33.33% 50%, var(--jaune) 50% 66.66%, var(--cyan) 66.66% 83.33%, var(--magenta) 83.33% 100%); -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.pg-c { padding-top: 24px; }
.q-page .prose h2, .prose .q-page h2 { margin: 0 0 10px; }
.q-page p { max-width: none; }
.prose .q-intro { font-size: 18px; margin: 0 0 22px; color: var(--mut); max-width: 66ch; }

/* Les questions : deux colonnes indépendantes, pour qu'une réponse ouverte ne déplace pas sa voisine */
.q-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; }
.q-col { display: flex; flex-direction: column; gap: 20px; }
.prose details.q { max-width: none; background: #fff; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--c); margin: 0 6px 0 0; }
.prose details.q:last-of-type { border: 2px solid var(--ink); }
.prose details.q[open] { box-shadow: none; margin: 6px 0 6px 6px; }
.prose details.q summary { display: flex; align-items: flex-start; gap: 14px; padding: 16px 60px 16px 16px; font-size: 19.5px; line-height: 1.3; min-height: 68px; }
.prose details.q summary::after { right: 16px; }
.prose details.q[open] summary { border-bottom: 2px solid var(--trait); }
.q-n { flex: none; min-width: 36px; height: 36px; display: grid; place-items: center; background: var(--c); color: var(--on); border-radius: 3px; font-weight: 800; font-size: 17px; padding: 0 4px; }
.prose details.q .q-r { padding: 16px 20px 8px 66px; }
.prose details.q .q-r p { padding: 0; margin: 0 0 12px; color: var(--ink); font-size: 17px; line-height: 1.55; }
.prose details.q .q-lien { font-size: 16px; }
.prose details.q .q-lien a { display: inline-flex; align-items: center; min-height: 40px; }
.q-col details:nth-of-type(6n+1) { --c: var(--bleu); --on: #fff; }
.q-col details:nth-of-type(6n+2) { --c: var(--vert); --on: var(--ink); }
.q-col details:nth-of-type(6n+3) { --c: var(--orange); --on: var(--ink); }
.q-col details:nth-of-type(6n+4) { --c: var(--magenta); --on: #fff; }
.q-col details:nth-of-type(6n+5) { --c: var(--jaune); --on: var(--ink); }
.q-col details:nth-of-type(6n+6) { --c: var(--cyan); --on: var(--ink); }
.q-col:nth-child(2) details:nth-of-type(6n+1) { --c: var(--cyan); --on: var(--ink); }
.q-col:nth-child(2) details:nth-of-type(6n+2) { --c: var(--magenta); --on: #fff; }
.q-col:nth-child(2) details:nth-of-type(6n+3) { --c: var(--jaune); --on: var(--ink); }
.q-col:nth-child(2) details:nth-of-type(6n+4) { --c: var(--bleu); --on: #fff; }
.q-col:nth-child(2) details:nth-of-type(6n+5) { --c: var(--vert); --on: var(--ink); }
.q-col:nth-child(2) details:nth-of-type(6n+6) { --c: var(--orange); --on: var(--ink); }

/* Le devis, au milieu de la page */
.q-devis { margin: 64px 0 0; background: var(--ink); color: #fff; border-radius: 6px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px 56px; align-items: center; overflow: hidden; }
.q-devis > .bandeau { grid-column: 1 / -1; margin: -44px -44px 0; height: 12px; }
.prose .q-devis h2 { color: #fff; margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 34px); }
.q-texte p { color: #fff; font-size: 18px; margin: 0 0 16px; }
.prose .q-texte ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.prose .q-texte li { margin: 0; padding: 0; }
.prose .q-texte a { display: inline-flex; align-items: center; min-height: 46px; color: #fff; font-weight: 700; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.prose .q-texte a:hover { color: var(--jaune); }
.q-devis :focus-visible { outline-color: #fff; }
.q-devis .fiche-card :focus-visible { outline-color: var(--ink); }
.q-devis .fiche-card { color: var(--ink); }
.q-devis .fiche p { max-width: none; margin: 0; color: var(--ink); }
.q-devis .fiche .f-sous { margin: 4px 0 16px; color: var(--mut); }
.q-devis .fiche .f-note { margin: 10px 0 0; color: var(--mut); }

/* L'index compact : situations et départs côte à côte, puis une ligne de liens */
.q-index { margin: 64px 0 0; }
.q-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.q-g { background: #fff; border: 2px solid var(--ink); border-top: 10px solid var(--c); border-radius: 4px; padding: 14px 20px 10px; }
.q-g1 { --c: var(--bleu); }
.q-g3 { --c: var(--vert); }
.q-g4 { --c: var(--magenta); grid-column: 1 / -1; }
.prose .q-g h3 { margin: 0 0 6px; font-size: 20px; }
.prose ul.q-l { list-style: none; padding: 0; margin: 0; max-width: none; }
.prose ul.q-l li { margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.prose ul.q-l a { display: flex; align-items: center; min-height: 38px; padding: 3px 0; color: var(--ink); font-weight: 400; font-size: 16px; line-height: 1.3; text-decoration: none; }
.prose ul.q-l a:hover { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; text-underline-offset: 3px; color: var(--ink); }
.q-g4 .q-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.q-dep { display: inline-block; min-width: 38px; font-weight: 800; }

@media (max-width: 1100px) {
  .q-devis { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
  .q-devis > .bandeau { margin: -36px -32px 0; }
  .q-g4 .q-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .pg-t { padding-right: 0; min-height: 0; }
  .pg-t::after { display: none; }
  .q-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 699px) {
  .prose details.q summary { font-size: 18px; padding: 14px 52px 14px 12px; gap: 10px; }
  .prose details.q .q-r { padding: 14px 16px 6px 16px; }
  .prose details.q { box-shadow: 4px 4px 0 var(--c); }
  .q-devis { margin-top: 48px; padding: 28px 18px; }
  .q-devis > .bandeau { margin: -28px -18px 0; }
  .q-index { margin-top: 48px; }
  .q-groupes { grid-template-columns: minmax(0, 1fr); }
  .q-g4 .q-l { grid-template-columns: minmax(0, 1fr); }
  .prose ul.q-l a { min-height: 44px; }
  .q-intro { font-size: 17px; }
}