/* Haut de page épuré (retour de Jonathan et Charlotte du 27/10/2026 : « il y a trop, ça roule pas » ; mis en ligne le 27/10).
   Chargée APRÈS style.css, uniquement par index.html. Direction : maison française discrète,
   crème, encre et laiton ; une seule famille (EB Garamond) pour tout le premier écran ; quatre éléments :
   un titre, une phrase, le nom, une ligne de réassurance. Le carrousel et la suite de la page ne changent pas. */

:root { --mh-encre: #241A13; --mh-laiton: #A9844A; --mh-laiton-clair: #D9BD86; --mh-gris: #5E4E3E; --mh-filet: #DCCBAA }

/* Libellé lu par les lecteurs d'écran seulement (le champ dit lui-même ce qu'il attend) */
.mh-lecteur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* Bandeau de Noël : une ligne fine, encre et laiton, mêmes informations */
.bandeau-noel { background: var(--mh-encre); color: #EDE2CC; font: 400 15px/1.35 var(--titre); letter-spacing: .035em; padding: 7px 14px }
.bandeau-noel i { font-style: normal; color: var(--mh-laiton-clair); margin: 0 .7em }
.bandeau-noel a { color: #F3E3BE; text-decoration: underline; text-decoration-color: rgba(217, 189, 134, .6); text-underline-offset: 3px; text-decoration-thickness: 1px }
.bandeau-noel a:hover { color: #fff }

/* En-tête : un filet laiton très léger le sépare du héros */
header.haut { border-bottom: 1px solid rgba(169, 132, 74, .22) }

/* Héros */
.heros { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; padding: 56px 0 30px; align-items: center }
.heros-texte { font-family: var(--titre) }
.heros h1 { font: 500 60px/1.04 var(--titre); letter-spacing: -.015em; color: var(--mh-encre); margin: 0 0 22px }
.heros h1 .mh-titre { display: block; text-wrap: balance; max-width: 9.5em }
.heros h1 .mh-suite { display: block; margin-top: 14px; font-size: .53em; line-height: 1.2; font-weight: 400; letter-spacing: 0; color: #7A4424 }
.heros h1::after { content: ""; display: block; width: 46px; height: 1px; background: var(--mh-laiton); margin: 24px 0 0 }
.heros .accroche { font: 400 21px/1.45 var(--titre); color: var(--mh-gris); margin: 0 0 30px; max-width: 30em }

/* Le champ du nom et son bouton ne forment qu'un seul bloc */
.heros-nom { margin: 0; max-width: 520px }
.heros-nom-ligne { display: flex; flex-direction: row; gap: 0; background: #FFFDF8; border: 1px solid var(--mh-laiton); border-radius: 3px; padding: 5px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -14px rgba(60, 35, 15, .35); transition: border-color .2s, box-shadow .2s }
.heros-nom-ligne:focus-within { border-color: var(--mh-encre); box-shadow: 0 0 0 3px rgba(169, 132, 74, .25), 0 10px 28px -14px rgba(60, 35, 15, .35) }
.heros-nom input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; font: 400 21px/1.2 var(--titre); letter-spacing: .01em; color: var(--mh-encre); padding: 12px 14px; outline: none }
.heros-nom input::placeholder { color: #8C7B66; opacity: 1 }
.heros-nom .bouton { flex: none; white-space: nowrap; background: var(--mh-encre); color: #F7F0E3; border: 0; border-radius: 2px; font: 500 19px/1 var(--titre); letter-spacing: .03em; padding: 15px 24px; box-shadow: none; transition: background .2s }
.heros-nom .bouton:hover, .heros-nom .bouton:focus-visible { background: #7A4424 }
.heros-nom .bouton:focus-visible { outline: 2px solid var(--mh-laiton); outline-offset: 2px }
.heros-nom .erreur { margin: 8px 0 0; font-size: 15px }

/* Une seule ligne discrète de réassurance */
.mh-rassure { display: flex; flex-wrap: wrap; align-items: center; margin: 16px 0 0; font: 400 17px/1.4 var(--titre); letter-spacing: .03em; color: var(--mh-gris) }
.mh-rassure > span { white-space: nowrap }
.mh-rassure i { font-style: normal; color: var(--mh-laiton); margin: 0 .65em }
.mh-rassure .drapeau-fr { width: 15px; height: 10px; margin: 0 7px 0 0; vertical-align: 0; border-color: rgba(43, 32, 24, .2) }

/* La phrase d'honnêteté, juste sous le premier écran, entre deux filets */
.mh-honnete { display: flex; align-items: center; gap: 18px; margin: 4px auto 34px; max-width: 760px; font: 400 19px/1.4 var(--titre); color: var(--mh-gris); text-align: center }
.mh-honnete::before, .mh-honnete::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--mh-filet) }

/* Téléphone et tablette étroite : tout est centré, le carrousel vient après le nom */
@media (max-width: 800px) {
  .bandeau-noel { font-size: 13.5px; letter-spacing: .02em; padding: 6px 10px }
  .bandeau-noel i { margin: 0 .5em }
  header.haut { padding: 8px 0 }
  .heros { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 22px 0 18px }
  .heros > .heros-texte { display: block; text-align: center }
  .heros h1 { order: 0; font-size: 36px; line-height: 1.06; margin: 0 0 14px }
  .heros h1 .mh-titre { margin: 0 auto }
  .heros h1 .mh-suite { font-size: .6em; margin-top: 8px }
  .heros h1::after { margin: 14px auto 0; width: 36px }
  .heros .accroche { order: 0; display: block; font-size: 18px; line-height: 1.42; margin: 0 auto 20px; max-width: 24em; -webkit-line-clamp: unset; overflow: visible }
  .heros-nom { order: 0; margin: 0 auto; max-width: 440px }
  .heros-nom-ligne { flex-direction: row; padding: 4px }
  .heros-nom input { font-size: 19px; padding: 11px 10px 11px 12px }
  .heros-nom .bouton { width: auto; font-size: 18px; padding: 13px 16px }
  .heros-nom .label-long { display: none }
  .mh-rassure { justify-content: center; font-size: 15.5px; margin: 12px 0 0; row-gap: 1px }
  .mh-rassure .mh-point-fr { display: none }
  .mh-rassure .mh-france { flex-basis: 100%; text-align: center }
  .heros .carrousel { order: 0; width: 100%; max-width: 420px; margin: 26px auto 0 }
  .mh-honnete { font-size: 17px; gap: 12px; margin: 0 0 26px; padding: 0 2px }
}
@media (max-width: 360px) {
  .bandeau-noel { font-size: 12.5px; letter-spacing: 0; padding: 6px 6px }
  .bandeau-noel i { margin: 0 .35em }
  .heros { padding-top: 16px }
  .heros h1 { font-size: 31px }
  .heros h1::after { margin-top: 10px }
  .heros .accroche { font-size: 16.5px; margin-bottom: 16px }
  .heros-nom input { font-size: 17px; padding: 10px 6px 10px 10px }
  .heros-nom .bouton { padding: 12px 11px; font-size: 16.5px }
  .mh-rassure { font-size: 14px }
}

@media (prefers-reduced-motion: reduce) {
  .heros-nom-ligne, .heros-nom .bouton { transition: none }
}

/* Ligne rassurante juste au-dessus du bouton de paiement (28/10/2026) */
.avant-payer { text-align: center; font: 400 16px/1.4 var(--titre); color: var(--mh-gris); margin: 14px 0 8px; letter-spacing: .02em }

/* Certificat et lettre d'exemple, « Avec vos armoiries » (28/10/2026) */
.avec-armoiries { display: grid; grid-template-columns: 200px 200px minmax(0, 1fr); gap: 22px; align-items: center; margin: 34px auto 10px; max-width: 900px }
.avec-armoiries figure { margin: 0 }
.avec-armoiries img { display: block; width: 100%; height: auto; box-shadow: 0 10px 26px -12px rgba(43, 32, 24, .45) }
.avec-armoiries figure:nth-child(1) img { transform: rotate(-2deg) }
.avec-armoiries figure:nth-child(2) img { transform: rotate(1.5deg) }
.avec-armoiries h3 { font: 500 26px/1.2 var(--titre); margin: 0 0 10px; color: var(--mh-encre) }
.avec-armoiries p { margin: 0 0 8px }
.avec-armoiries .petit { font-size: 14px; color: #6A5A48 }
@media (max-width: 800px) {
  .avec-armoiries { grid-template-columns: 1fr 1fr; gap: 14px }
  .avec-armoiries .avec-texte { grid-column: 1 / -1 }
}