/* Site vitrine Mitoyen. Registre Présence : fond papier, mesure 65 caractères.
   Les couleurs et les tailles viennent de tokens.css (copie de marque/). */

@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--fs-site);
  line-height: 1.5;
}

.page {
  max-width: calc(var(--mesure-site) + 96px);
  padding: 48px;
}

@media (max-width: 720px) {
  .page { padding: 24px; }
}

.logo { display: block; height: 49px; width: auto; margin-bottom: 48px; }

h1, h2 {
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre);
  line-height: var(--lh-affichage);
}
h1 { font-size: var(--fs-site-titre); margin: 0 0 24px; }
h2 { font-size: 24px; margin: 40px 0 12px; }

@media (max-width: 720px) {
  h1 { font-size: 32px; }
}

p { margin: 0 0 16px; max-width: var(--mesure-site); }
.chapo { font-size: 20px; }

a { color: var(--encre); }

/* Formulaire */
.contact {
  margin-top: 32px;
  padding: 24px;
  background: var(--surface);
  max-width: var(--mesure-site);
}
.contact label { display: block; font-size: 15px; color: var(--encre-secondaire); margin-bottom: 6px; }
.contact input, .contact textarea {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--filet);
  border-radius: 0;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
}
.contact input:focus, .contact textarea:focus { outline: 2px solid var(--encre); outline-offset: 1px; }
.contact .note { font-size: 15px; color: var(--encre-secondaire); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button {
  font: 600 16px var(--font-texte);
  color: var(--papier);
  background: var(--encre);
  border: 0;
  border-radius: 0;
  padding: 12px 16px;
  cursor: pointer;
}

/* Pied */
.pied {
  margin-top: 48px;
  padding-top: 8px;
  border-top: var(--filet-epaisseur) solid var(--filet);
  font-size: 15px;
  color: var(--encre-secondaire);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.pied a { color: var(--encre-secondaire); }

/* Adresse mél masquée : le bouton a l'air d'un lien. */
.reveler {
  font: inherit;
  color: var(--encre);
  background: none;
  padding: 0;
  text-decoration: underline;
}

/* Pages de texte (mentions, confidentialité) */
.texte dl { margin: 0 0 16px; }
.texte dt { font-weight: 600; margin-top: 12px; }
.texte dd { margin: 0; }