/* Page « Peut-on retrouver votre grand-parent ? » — compléments à site.css (ne redéfinit pas les classes communes). */
.gp-chapo { max-width: 46rem; font-size: 1.1rem; line-height: 1.55; margin: .8rem 0 .4rem; }

.gp-etape { padding: 2.6rem 0 1rem; }
.gp-etape h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1;
  margin: .3rem 0 1.2rem; letter-spacing: -.01em; }
.gp-etape h3 { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.45rem; line-height: 1.15; margin: 0 0 .6rem; }

.gp-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.gp-form { display: grid; gap: 1rem; max-width: 46rem; }
.gp-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.gp-champ { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
.gp-champ > span { font-size: .95rem; }
.gp-champ .champ { width: 100%; box-sizing: border-box; }
.gp-sous { margin: -.4rem 0 0; }
.gp-choix { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.gp-choix legend { font-weight: 600; padding: 0; margin-bottom: .45rem; width: 100%; }
.gp-choix label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; min-height: 2rem; }
.gp-choix input { accent-color: var(--acc, #c8553d); width: 1.1rem; height: 1.1rem; }
.gp-form .btn { justify-self: start; }
.gp-erreur { margin: 0; color: var(--acc, #c8553d); font-weight: 600; }

.gp-reponse { margin-top: 1.2rem; max-width: 46rem; }
.gp-resultat { border-left: 6px solid var(--hi, #ffd000); }
.gp-resultat.gp-question { border-left-color: var(--acc, #c8553d); }
.gp-resultat p { line-height: 1.55; }
.gp-resultat .sur { margin: 0 0 .3rem; }
.gp-voie-texte { font-size: 1.08rem; }
.gp-branches { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.gp-branches li { padding: .55rem .8rem; border-radius: 8px; background: var(--paper, #f6f0e4); line-height: 1.45; }
.gp-branches li.fr { box-shadow: inset 4px 0 0 var(--hi, #ffd000); }
.gp-branches li.hors { box-shadow: inset 4px 0 0 var(--acc, #c8553d); }
.gp-branches li.inconnu { box-shadow: inset 4px 0 0 var(--mute, #6f665b); }
.gp-pays { color: var(--mute, #6f665b); }
.gp-qui { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.gp-qui dt { font-weight: 700; }
.gp-qui dd { margin: 0; }
.gp-garantie { font-size: .95rem; color: var(--mute, #6f665b); border-top: 1px solid rgba(28, 26, 23, .12); padding-top: .8rem; margin-bottom: 0; }

.gp-suite { padding-bottom: 3rem; }
.gp-suite-intro { max-width: 46rem; line-height: 1.55; }
.gp-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.2rem 0; max-width: 60rem; }
.gp-offre { display: flex; flex-direction: column; gap: .2rem; }
.gp-offre p { margin: .2rem 0; line-height: 1.5; }
.gp-offre .btn { margin-top: auto; align-self: flex-start; }
.gp-offre .note { margin-bottom: .8rem; }
.gp-prix { font-family: 'Fraunces', serif; font-weight: 800; font-size: 2rem; line-height: 1; margin: .1rem 0 .4rem !important; }
.gp-offres:has(#gp-offre-histoire[hidden]) { grid-template-columns: minmax(0, 29rem); }

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .gp-grille, .gp-ligne, .gp-offres { grid-template-columns: 1fr; }
  .gp-etape { padding-top: 2rem; }
  .gp-qui { grid-template-columns: 1fr; gap: .1rem; }
  .gp-qui dd { margin-bottom: .5rem; }
}