/* Mise en page du site QShort : en-tête, pied de page, pages de texte. Couleurs et mesures : jetons.css. */

.site-entete {
  position: sticky; top: 0; z-index: 10;
  background: var(--neutre-creme);
  border-bottom: 1px solid var(--neutre-brume);
}
.site-entete__barre { display: flex; align-items: center; gap: var(--espace-6); min-height: 72px; }
.site-marque {
  display: inline-flex; align-items: center; gap: var(--espace-3);
  color: var(--neutre-encre); text-decoration: none;
  font: 600 22px/1 var(--font-titres); letter-spacing: -.02em;
}
.site-marque img { width: 26px; height: auto; }
.site-nav { display: flex; gap: var(--espace-5); margin-left: auto; }
.site-nav a { color: var(--neutre-encre); text-decoration: none; font-weight: 500; font-size: 16px; }
.site-nav a:hover { color: var(--marque-violet); }

.site-pied { border-top: 1px solid var(--neutre-brume); padding: var(--espace-7) 0 var(--espace-8); margin-top: var(--espace-8); }
.site-pied__liens { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-5); margin-bottom: var(--espace-5); }
.site-pied__liens a { color: var(--neutre-gris-prune); font-size: 15px; }

.page-texte { max-width: calc(var(--largeur-lecture) + 2 * var(--espace-7)); }
.page-texte > .q-etat { margin: var(--espace-5) 0 var(--espace-7); }
.page-texte section { margin-top: var(--espace-7); }
.page-texte__titre { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--espace-4); }
.page-texte li { margin-bottom: var(--espace-2); }
.formulaire { margin: var(--espace-6) 0; max-width: 520px; }
.etapes-simples { margin: var(--espace-6) 0; }

@media (max-width: 820px) {
  .site-nav { display: none; }
  .site-entete__offres { margin-left: auto; }
}
@media (max-width: 420px) {
  .site-entete__barre { gap: var(--espace-3); }
  .site-entete__offres { padding: var(--espace-2) var(--espace-4); font-size: 15px; }
}

/* Accueil */
.accroche { padding-top: var(--espace-9); }
.accroche__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--espace-8); align-items: center; }
.accroche .chapo { margin-bottom: var(--espace-6); }
.accroche__video { margin: 0; justify-self: center; width: 100%; max-width: 340px; }
.accroche__video video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  background: var(--neutre-nuit); border-radius: var(--rayon-solution); box-shadow: var(--ombre-pose);
}
.accroche__video figcaption { margin-top: var(--espace-3); text-align: center; }

.probleme__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-7); align-items: start; }
.probleme__chiffre { margin: var(--espace-4) 0; font-family: var(--font-titres); font-weight: 600; }

.etapes { list-style: none; padding: 0; margin: var(--espace-7) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espace-4); counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; }
.etapes li::before { content: '0' counter(etape); display: block; font: 500 12.5px/1.3 var(--font-donnees); letter-spacing: .1em; color: var(--neutre-gris-prune); margin-bottom: var(--espace-3); }
.etape__icone { color: var(--marque-violet); margin-bottom: var(--espace-4); }
.etapes h3 { font-size: 21px; margin-bottom: var(--espace-3); }
.etapes p { font-size: 15.5px; color: var(--neutre-gris-prune); margin: 0; }

.apercus__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); margin-top: var(--espace-7); }
.apercu { margin: 0; }
.apercu--large { grid-column: 1 / -1; }
.apercu img { width: 100%; height: auto; border: 1px solid var(--neutre-brume); border-radius: var(--rayon-carte); background: var(--neutre-blanc); }
.apercu figcaption { margin-top: var(--espace-3); font-size: 15px; color: var(--neutre-gris-prune); }

.construction { display: grid; gap: var(--espace-4); }
.construction h2 { margin-bottom: var(--espace-3); }
.construction__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espace-3); max-width: var(--largeur-lecture); }
.construction__liste li { padding-left: var(--espace-5); position: relative; }
.construction__liste li::before { content: ''; position: absolute; left: 0; top: .75em; width: 10px; height: 2px; background: var(--marque-peche); }

.prerequis__liste { list-style: none; padding: 0; margin: var(--espace-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); }

.offres__periode { border: 0; padding: 0; margin: 0 0 var(--espace-5); display: flex; gap: var(--espace-5); flex-wrap: wrap; }
.offres__periode legend { font-weight: 500; margin-bottom: var(--espace-2); padding: 0; }
.offres__periode label { display: inline-flex; gap: var(--espace-2); align-items: center; }
.offres__periode input { accent-color: var(--marque-violet); }
.offres__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); align-items: stretch; }
.offre { display: flex; flex-direction: column; gap: var(--espace-3); }
.offre h3 { margin: var(--espace-2) 0 0; }
.offre__prix .donnees { font-size: 30px; color: var(--marque-violet); }
.offre .q-action, .offre .q-bouton { margin-top: auto; align-self: flex-start; }
.offre__message { min-height: 1.5em; margin: 0; font-size: 15px; color: var(--etat-erreur); }
.offres__rappel { margin: var(--espace-5) 0 var(--espace-3); font-weight: 500; }
.offres__renonciation { max-width: var(--largeur-lecture); }
.offres__attente { margin-top: var(--espace-6); max-width: 560px; }

@media (max-width: 1100px) {
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .accroche__grille, .probleme__grille { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  .accroche__video { max-width: 300px; }
}
@media (max-width: 820px) {
  .accroche { padding-top: var(--espace-8); }
  .etapes, .prerequis__liste, .offres__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .apercus__grille { grid-template-columns: minmax(0, 1fr); }
}
.offre .q-pastille { align-self: flex-start; }
.accroche__grille:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.accroche__grille:has(> :only-child) > div { max-width: 920px; }
.formulaire__message { min-height: 1.5em; margin: var(--espace-3) 0 0; font-size: 15px; }
.compte-espace__liste { display: grid; gap: var(--espace-3); margin: 0 0 var(--espace-5); }
.compte-espace__liste div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--espace-3); }
.compte-espace__liste dt { color: var(--neutre-gris-prune); }
.compte-espace__liste dd { margin: 0; }
.compte-espace__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
@media (max-width: 560px) { .compte-espace__liste div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.offres__essai { margin: var(--espace-5) 0 0; font-weight: 500; color: var(--acquisition-violet-profond); }