/* merci-credit.css v1.0.0 | model: claude-sonnet-5-5 | created: 2026-10-26
   Maquette "page merci crédit" (D:\dl\Solidas, page merci crédit.html) restylée à la charte Solidas.
   Valeurs relevées dans https://www.solidas.be/assets-new/css/style.css?v=9 :
   Roboto, texte #212529, bleu #1b55aa, marine #00194C, fond doux #F2F5FA, bordures #cccccc,
   vert #23873e (contraste 4,56:1 avec du blanc), pied de page #171827 / #cccccc, bouton rouge #ed2849. */

.merci-page {
  --m-bleu: #1b55aa;
  --m-marine: #00194c;
  --m-fond: #f2f5fa;
  --m-teinte: #d6e3f5;
  --m-texte: #212529;
  --m-discret: #484848;
  --m-trait: #cccccc;
  --m-ok: #23873e;
  margin: 0;
  background: var(--m-fond);
  color: var(--m-texte);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.merci-page *, .merci-page *::before, .merci-page *::after { box-sizing: border-box; }
.merci-page a { color: var(--m-bleu); text-decoration: underline; text-underline-offset: 2px; }
.merci-page a:hover { color: var(--m-marine); }
.merci-page a:focus-visible { outline: 3px solid var(--m-marine); outline-offset: 2px; border-radius: 2px; }

/* Corps */
.merci-main {
  max-width: 1120px; margin: 0 auto; padding: 131px 24px 56px; /* 91 px de menu fixe + 40 px */
  display: flex; flex-direction: column; gap: 28px;
}
.merci-card {
  background: #ffffff; border: 1px solid var(--m-trait); border-radius: 12px;
  padding: 32px; display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch;
}

/* Carte héro */
.merci-hero__txt { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 8px 0; }
.merci-hero__ok {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--m-ok); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.merci-hero__h1 { margin: 0; font-size: 38px; line-height: 1.18; font-weight: 600; color: var(--m-texte); }
.merci-hero__lead { margin: 0; font-size: 18px; color: var(--m-discret); max-width: 560px; }
.merci-hero__lead strong { color: var(--m-texte); font-weight: 600; }
.merci-hero__note { margin: 0; font-size: 14px; color: var(--m-discret); }
.merci-recap {
  margin: 8px 0 0; background: var(--m-fond); border-left: 4px solid var(--m-bleu);
  border-radius: 0 10px 10px 0; padding: 20px 24px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px;
}
.merci-recap--demande { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.merci-recap__titre { margin: 8px 0 -13px; font-size: 16px; font-weight: 600; color: var(--m-texte); }
.merci-recap div { display: flex; flex-direction: column; gap: 2px; }
.merci-recap dt { font-size: 13px; color: var(--m-discret); }
.merci-recap dd { margin: 0; font-weight: 600; color: var(--m-marine); }

.merci-hero__photo {
  flex: 1 1 320px; min-width: 0; min-height: 420px; margin: 0;
  border-radius: 10px; overflow: hidden; background: var(--m-teinte); color: var(--m-marine);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
}
.merci-hero__photo figcaption { font-size: 14px; font-weight: 500; max-width: 240px; }

/* Frise des étapes */
.merci-suite { flex-direction: column; gap: 24px; }
.merci-suite__h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; color: var(--m-texte); }
.merci-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.merci-step { display: flex; gap: 16px; }
.merci-step__rail { display: flex; flex-direction: column; align-items: center; }
.merci-step__dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  background: var(--m-fond); color: var(--m-discret); border: 2px solid var(--m-trait);
}
.merci-step--done .merci-step__dot { background: var(--m-ok); border-color: var(--m-ok); color: #ffffff; }
.merci-step--now .merci-step__dot { background: #ffffff; border-color: var(--m-bleu); color: var(--m-bleu); box-shadow: 0 0 0 4px var(--m-teinte); }
.merci-step__line { width: 2px; flex: 1; min-height: 24px; background: var(--m-trait); }
.merci-step:last-child .merci-step__line { display: none; }
.merci-step__body { padding-bottom: 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.merci-step:last-child .merci-step__body { padding-bottom: 0; }
.merci-step__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.merci-step__title { font-weight: 600; font-size: 17px; color: var(--m-texte); }
.merci-step__when {
  font-size: 13px; font-weight: 500; color: var(--m-marine);
  background: var(--m-teinte); border-radius: 10px; padding: 1px 9px;
}
.merci-step--done .merci-step__when { background: #e4f2e7; color: #1c6a31; }
.merci-step__txt { color: var(--m-discret); }

/* Bloc assurances sous « Et maintenant ? » */
.merci-assur { flex-direction: column; gap: 16px; }
.merci-assur__fomo { margin: 0; font-size: 18px; line-height: 1.6; color: var(--m-discret); }
.merci-assur__h3 { margin: 8px 0 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--m-texte); }
.merci-assur__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.merci-page .merci-assur__grid a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px; border: 1px solid var(--m-trait); border-radius: 10px;
  background: #ffffff; text-decoration: none; color: var(--m-discret);
}
.merci-page .merci-assur__grid a:hover { border-color: var(--m-bleu); background: var(--m-fond); color: var(--m-discret); }
.merci-assur__grid strong { font-size: 17px; font-weight: 600; color: var(--m-bleu); }
.merci-assur__grid span { font-size: 15px; line-height: 1.5; }

/* Pied de page : même fond que le pied du site */
.merci-foot { background: #171827; color: #cccccc; }
.merci-foot__in {
  max-width: 1120px; margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.merci-foot__links { display: flex; gap: 16px; }
.merci-foot a { color: #ffffff; }
.merci-foot a:hover { color: #acd1fc; }
.merci-foot a:focus-visible { outline-color: #ffffff; }

@media (max-width: 767px) {
  .merci-main { padding: 96px 16px 36px; /* 76 px de menu fixe + 20 px */ gap: 20px; }
  .merci-card { padding: 22px 18px; gap: 22px; }
  .merci-hero__h1 { font-size: 28px; }
  .merci-hero__lead { font-size: 17px; }
  .merci-hero__photo { min-height: 200px; }
  .merci-suite__h2 { font-size: 22px; }
  .merci-foot__in { padding: 18px 16px; }
}
@media (max-width: 991px) {
  .merci-assur__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .merci-assur__grid { grid-template-columns: 1fr; }
  .merci-assur__fomo { font-size: 17px; }
}
@media (max-width: 480px) {
  .merci-recap { grid-template-columns: 1fr; }
  .merci-recap--demande { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 16px 12px; }
  .merci-recap--demande dd { overflow-wrap: anywhere; }
}
@keyframes merci-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--m-teinte); }
  50% { box-shadow: 0 0 0 9px var(--m-teinte); }
}
@media (prefers-reduced-motion: no-preference) {
  .merci-step--now .merci-step__dot { animation: merci-pulse 2s ease-in-out infinite; }
  .merci-page a { transition: color .15s ease; }
}