/* les mots bleus_ — feuille de style principale
   identité par adrien ducrocq (axe "fait mains, texture, intime") */

/* ---------- polices (auto-hébergées, sous-ensembles latin) ---------- */

/* intitulés courts : jost, géométrique, proche d'itc avant garde gothic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jost-variable.woff2") format("woff2");
}

/* corps du texte : courier prime, esprit machine à écrire */
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/courier-prime-bold.woff2") format("woff2");
}

/* ---------- jetons de l'identité visuelle ---------- */

:root {
  --encre: #0d0d2e; /* ex-navy : sert désormais d'encre sur le papier, pas de fond */
  --bleu-ciel: #7eb8d4;
  --kraft: #c4a070; /* accent chaleureux, remplissages (bouton, focus) */
  --kraft-encre: #6b4f2e; /* variante assombrie du kraft, contraste AA sur le papier clair */
  --encre-estompe: rgba(13, 13, 46, 0.72);
  --police-labels: "Jost", "Century Gothic", Futura, sans-serif;
  --police-texte: "Courier Prime", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --mesure: 30rem; /* largeur de lecture, resserrée pour la police à chasse fixe */
}

/* ---------- base ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #c7d3d9; /* teinte moyenne du papier, évite le flash blanc au chargement */
  /* voile clair superposé à la texture pour calmer son contraste et gagner en lisibilité */
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
    url("../assets/img/fond-papier.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: var(--encre);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--kraft);
  color: #fff;
}

main {
  flex: 1;
  width: min(var(--mesure), 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- entête ---------- */

.entete {
  min-height: 32svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-block: 2.5rem 2rem;
}

@media (max-width: 640px) {
  .entete {
    min-height: 18svh;
    padding-block: 2rem 1.5rem;
  }
}

.marque {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.marque a {
  display: block;
}

.marque img {
  width: clamp(14rem, 42vw, 21rem);
  height: auto;
  display: block;
}

.sous-titre {
  margin-top: 1rem;
  font-family: var(--police-labels);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-estompe);
}

/* ---------- présentation ---------- */

.presentation {
  padding-block: 2rem;
  text-align: center;
}

.presentation p + p {
  margin-top: 1.25rem;
}

/* ---------- infolettre ---------- */

.infolettre {
  padding-block: 2rem 3.5rem;
  text-align: center;
}

.infolettre h2 {
  font-family: var(--police-labels);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kraft-encre);
  margin-bottom: 0.75rem;
}

.infolettre h2::before,
.infolettre h2::after {
  content: "·";
  margin-inline: 0.6rem;
  color: var(--encre-estompe);
}

/* formulaire natif, stylisé à la charte du site */
.formulaire-infolettre {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.formulaire-infolettre[hidden] {
  display: none;
}

.champ-courriel {
  width: 100%;
  max-width: 22rem;
  text-align: left;
}

.champ-courriel label {
  display: block;
  font-family: var(--police-labels);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kraft-encre);
  margin-bottom: 0.5rem;
}

.champ-courriel input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--encre-estompe);
  padding: 0.4rem 0.1rem 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--encre);
  transition: border-color 0.2s ease;
}

.champ-courriel input::placeholder {
  color: rgba(13, 13, 46, 0.3);
}

.champ-courriel input:focus {
  outline: none;
  border-bottom-color: var(--kraft-encre);
}

.champ-consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 22rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--encre-estompe);
  cursor: pointer;
}

.champ-consentement input {
  margin-top: 0.2rem;
  accent-color: var(--kraft-encre);
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.champ-segment {
  width: 100%;
  max-width: 22rem;
  text-align: left;
  margin-top: -0.5rem;
}

.champ-segment label {
  display: block;
  font-family: var(--police-labels);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kraft-encre);
  margin-bottom: 0.5rem;
}

.champ-segment select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--encre-estompe);
  padding: 0.4rem 0.1rem 0.5rem;
  font-family: var(--police-texte);
  font-size: 0.95rem;
  color: var(--encre);
}

.champ-segment select:focus {
  outline: none;
  border-bottom-color: var(--kraft-encre);
}

.formulaire-infolettre button {
  background: var(--encre);
  color: #fff;
  border: none;
  padding: 0.7rem 2.25rem;
  font-family: var(--police-labels);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.formulaire-infolettre button:hover {
  opacity: 0.85;
}

.anti-pourriel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confirmation-infolettre {
  color: var(--kraft-encre);
  font-size: 0.9rem;
}

/* cible technique du formulaire : jamais visible, mais pas display:none
   (certains navigateurs ignorent la soumission vers une iframe masquée ainsi) */
.cible-infolettre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- pied de page ---------- */

.pied {
  text-align: center;
  padding: 2rem 1.5rem;
  font-family: var(--police-labels);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--encre-estompe);
}

.pied-liens {
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pied-liens a {
  color: var(--kraft-encre);
  text-decoration: none;
}

.pied-liens a:hover {
  text-decoration: underline;
}

.pied-liens span {
  color: var(--encre-estompe);
  margin-inline: 0.5rem;
}