.how-it-works {
  border-top: 1px solid #dedbd3;
  padding: 55px 0;
  scroll-margin-top: 125px;
}
#introduction { scroll-margin-top: 125px; }
.how-lead { max-width: 750px; line-height: 1.7; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 42px;
  padding: 20px 0 20px 24px;
}
.how-steps li { padding-left: 8px; }
.how-steps li::marker { color: #8d773b; font-weight: bold; }
.how-steps h3 { margin-bottom: 8px; }
.how-steps p, .couple-form p { line-height: 1.65; }
.couple-form {
  max-width: 720px;
  background: #fffefa;
  border: 1px solid #dedbd3;
  border-radius: 18px;
  padding: 28px;
  margin-top: 28px;
}
.couple-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.couple-fields label { display: block; margin: 12px 0 8px; }
.couple-fields input, .couple-fields select { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; padding: 13px; border: 1px solid #d7d6cd; border-radius: 8px; background: #fff; }
.couple-edit { font-size: 12px; color: #655e56; }
.topline { flex-wrap: wrap; gap: 12px; }
@media(max-width:760px) {
  .how-it-works { padding: 30px 0; }
  .how-steps, .couple-fields { grid-template-columns: 1fr; }
  .how-steps { gap: 8px; }
  .couple-form { padding: 20px; }
  header nav { flex-wrap: wrap; }
  .couple-edit { flex-basis: 100%; text-align: right; }
}

.page-footer {
  display: block;
  border-top: 1px solid #dedbd3;
  padding: 24px 0 32px;
  color: #65746b;
  font-size: 12px;
}
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.footer-links a { color: inherit; }
.footer-links button {
  margin-left: auto;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  color: #365b49;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#pdf-status:empty { display: none; }
#pdf-status { margin: 8px 0 0; }
@media(max-width:400px) {
  .footer-links { gap: 10px 16px; }
}

#signup-title-field {
  width: 100%;
  padding: 12px;
  font: inherit;
  background: #fff;
  border: 1px solid #d7d6cd;
  border-radius: 8px;
}

header .download-link {
  border: 0;
  background: transparent;
  color: #365b49;
  font: inherit;
  font-size: 13px;
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.header-pdf-status {
  margin: 0;
  font-size: 12px;
  color: #365b49;
}
.header-pdf-status:empty { display: none; }
@media(max-width:760px) {
  header .download-link { font-size: 12px; }
  #introduction, #comment-ca-marche, .work { scroll-margin-top: 185px; }
}

.early-register {
  margin: 14px 0;
  border: 1px solid #365b49;
  color: #365b49;
  background: transparent;
  padding: 13px 18px;
  font-size: 14px;
}
.registration-help { max-width: 440px; font-size: 13px; line-height: 1.6; }
.duo-progress-title { margin: 25px 0 12px; }
.duo-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.person-progress { min-width: 0; padding: 18px; background: #eeeee5; border-radius: 12px; }
.person-progress strong, .person-progress span { display: block; overflow-wrap: anywhere; }
.person-progress span { margin: 8px 0; font-size: 13px; }
.person-progress progress { width: 100%; margin-top: 8px; }
.chapter-completion span { display: block; line-height: 1.8; overflow-wrap: anywhere; }
@media(max-width:760px) {
  .duo-progress { grid-template-columns: 1fr; gap: 10px; }
}

.contact-address { color: #365b49; overflow-wrap: anywhere; }

#contact-form label:not(.consent) { display: block; margin: 18px 0 8px; }
#contact-form input:not([type=checkbox]), #contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  border: 1px solid #d7d6cd;
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}
#contact-form .consent { margin: 20px 0; }
#contact-form .contact-note { font-size: 13px; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contact-security { margin: 16px 0; }

#invite-form label, #invite-result label { display: block; margin: 16px 0 8px; }
#invite-form input, #invite-url { width: 100%; box-sizing: border-box; font: inherit; padding: 13px; border: 1px solid #d7d6cd; border-radius: 8px; }
#signup-fields { border: 0; padding: 0; margin: 16px 0; }
#signup-fields label { display: block; margin: 14px 0; }
#signup-fields .consent { display: flex; }
#signup-fields input:not([type=checkbox]), #signup-fields select, #signup-code { width: 100%; box-sizing: border-box; font: inherit; padding: 12px; border: 1px solid #d7d6cd; border-radius: 8px; background: white; }
#signup-form button:not(.dialog-close) { margin: 8px 0; }
.account-toolbar { text-align: right; }
.account-toolbar button { font-size: 12px; padding: 8px; }
.invitation-banner { margin: 20px 0; padding: 25px; border: 1px solid #bcc9bb; border-radius: 15px; background: #eeeee5; }
#media-player audio, #media-player video { display: block; max-width: 100%; width: 100%; }

.duo-shortcut { display: block; margin: 10px 0 20px; color: #365b49; }
#duo-settings { scroll-margin-top: 185px; margin-bottom: 40px; }

#service-status:empty { display: none; }
#service-status { padding: 14px 0; line-height: 1.5; color: #6a4334; }

.how-steps a, .how-action {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
}
.how-action {
  border:0;
  padding:0;
  background:none;
  font:inherit;
  cursor:pointer;
}
.how-action:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px;
}

#duo-settings h2 { margin: 0 0 20px; font-size: clamp(26px, 4vw, 36px); }
#duo-settings .couple-fields label { margin-top: 0; line-height: 1.5; }
#duo-settings .couple-fields input { display: block; margin-top: 8px; }
#duo-settings input[readonly] { background: #f3f3ec; }
#invite-form h3 { margin: 24px 0 8px; }

.partner-alert { margin: 24px 0; padding: 24px; background: #ecefe3; border: 1px solid #bdc9b5; border-radius: 16px; }
.partner-alert h2 { font-size: 26px; margin: 0 0 12px; }
.partner-alert a { color: #365b49; display: inline-block; margin-right: 20px; }
.partner-alert button { margin-top: 12px; }
#alertes { margin-top: 28px; padding-top: 16px; border-top: 1px solid #dedbd3; scroll-margin-top: 185px; }
#notification-form label:not(.notification-choice) { display: block; margin: 16px 0 8px; }
#notification-form select { display: block; width: 100%; box-sizing: border-box; padding: 13px; font: inherit; border: 1px solid #d7d6cd; border-radius: 8px; background: white; }
.notification-choice { display: flex; align-items: center; gap: 12px; line-height: 1.5; }
.notification-choice input { width: 22px; height: 22px; flex-shrink: 0; }
#notification-form button { margin-top: 8px; }

#demarrer { scroll-margin-top: 185px; }
#duo-settings > .start { display: inline-block; margin-top: 24px; }
.intro > a.early-register { display: inline-block; text-decoration: none; }

#duo-names-save { margin-top: 16px; }
#duo-names-status:empty { display: none; }
#duo-settings > .registration-help { margin-top: 24px; }
#duo-names-form .couple-fields { align-items: end; }

.invitation-page { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 40px; padding: 40px 0; }
.invitation-art { margin: 0; }
.invitation-art img { display: block; width: 100%; border-radius: 18px; }
.invitation-art figcaption { text-align: center; padding-top: 10px; }
.invitation-card { padding: 32px; background: #fffefa; border: 1px solid #dedbd3; border-radius: 18px; }
.invitation-card h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.invitation-card p { line-height: 1.65; overflow-wrap: anywhere; }
.invitation-guide { padding: 16px; border-left: 3px solid #9b9153; background: #f1f1e7; }
.invitation-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.invitation-actions a { display: inline-block; text-decoration: none; }
.invitation-actions [hidden] { display: none; }
.invitation-privacy { font-size: 13px; color: #56695d; }
#invitation-status { color: #754434; }
@media(max-width:760px) {
 .invitation-page { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
 .invitation-art img { max-height: 210px; object-fit: cover; }
 .invitation-card { padding: 22px; }
 .invitation-actions button, .invitation-actions a { width: 100%; box-sizing: border-box; }
}