/* Home de harp-tdm.info.
   Esprit visuel : harp-tdm-home-maquette. Couleurs et fontes : celles du thème
   des sites de vault-publish (theme.css), pour que la home et les sites se
   ressemblent. Largeur fixe de 1260 px, comme les sites, pas de responsive.

   ⚙ Tous les espacements viennent de l'échelle --e-* (multiples de 6 px).
   Ne pas écrire de valeur en dur pour une marge ou un padding. */

@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-700italic.woff") format("woff");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Upright";
  src: url("fontes/CormorantUpright-Medium-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Semibold-webfont.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --color-body-background: rgb(253, 236, 224);
  --color-card-background: rgb(248, 232, 220);
  --color-article-background: rgb(237, 221, 209);
  --color-heading: rgb(117, 48, 55);
  --color-text: rgb(50, 50, 50);
  --color-links-hover: rgb(8, 65, 120);
  --color-border: rgba(117, 48, 55, 0.22);
  --color-border-hover: rgba(117, 48, 55, 0.38);
  --color-filet: rgba(117, 48, 55, 0.28);
  --color-shadow: rgba(62, 31, 25, 0.10);
  --color-shadow-hover: rgba(62, 31, 25, 0.13);

  --fonte-texte: "PT Serif", Georgia, "Times New Roman", serif;
  --fonte-titre: "Cormorant Upright", Georgia, "Times New Roman", serif;
  --fonte-interface: "Open Sans", Verdana, Arial, Helvetica, sans-serif;

  /* Échelle des espacements */
  --e-1: 6px;
  --e-2: 12px;
  --e-3: 18px;
  --e-4: 24px;
  --e-5: 30px;
  --e-6: 36px;
  --e-8: 48px;
  --e-10: 60px;

  /* Gabarit : 400 + 30 + 400 + 30 + 400 = 1260, aligné sur l'en-tête */
  --largeur-page: 1260px;
  --gouttiere: var(--e-5);
  --largeur-carte: 400px;
  --ratio-visuel: 378 / 249;   /* images fournies en 756 × 498 (×2), affichées 378 × 249 */
  --rayon: 0;                   /* bords carrés, choix de l'utilisateur */
  --padding-carte: 10px;        /* ⚠ hors échelle, voulu : l'image ne touche pas la bordure */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-body-background);
  color: var(--color-text);
  font-family: var(--fonte-texte);
  font-size: 17px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: var(--largeur-page);
  margin: 0 auto;
}

h1, h2, h3 {
  color: var(--color-heading);
  font-family: var(--fonte-titre);
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */

/* Le bandeau est hors de .page et prend toute la largeur de la fenêtre,
   jamais moins que la page : ses deux images sont collées aux bords de la
   fenêtre, le texte et le voile clair qui le porte restent sur les 1260 px
   de la page. Sous 1260 px, le navigateur fait défiler en largeur. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: var(--largeur-page);
  border-bottom: 1px solid rgba(117, 48, 55, 0.12);
  background:
    linear-gradient(90deg,
      rgba(253, 236, 224, 0.05) 0%,
      rgba(253, 236, 224, 0.55) 22%,
      rgba(253, 236, 224, 0.95) 32%,
      rgba(253, 236, 224, 0.95) 68%,
      rgba(253, 236, 224, 0.55) 78%,
      rgba(253, 236, 224, 0.05) 100%)
      center / var(--largeur-page) 100% no-repeat,
    var(--color-body-background);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  width: 420px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  pointer-events: none;
}
.hero::before {
  left: 0;
  background-image: url("images/header-left.webp");
  background-position: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
}
.hero::after {
  right: 0;
  background-image: url("images/header-right.webp");
  background-position: right center;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 58%, transparent 100%);
}

.hero-inner {
  width: 660px;
  margin: 0 auto;
  padding: var(--e-5) 0 var(--e-4);
  text-align: center;
}

/* Losange entre deux filets, repris en tête des sections */
.ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  width: 340px;
  margin: 0 auto var(--e-2);
  color: rgba(117, 48, 55, 0.55);
}
.ornement::before,
.ornement::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornement span {
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

h1 {
  margin: 0 0 var(--e-4);
  font-size: 68px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.hero-copy {
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-copy p { margin: 0 0 var(--e-2); }
.hero-copy p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Sections et cartes                                                  */
/* ------------------------------------------------------------------ */

main {
  padding: var(--e-5) 0 var(--e-10);
}

.section + .section { margin-top: var(--e-8); }

.section-titre {
  margin: 0 0 var(--e-5);
  text-align: center;
  font-size: 36px;
  line-height: 1.1;
}
.section-titre::after {
  content: "";
  display: block;
  width: 100px;
  height: 1px;
  margin: var(--e-2) auto 0;
  background: var(--color-filet);
}

.grille {
  display: grid;
  grid-template-columns: repeat(3, var(--largeur-carte));
  gap: var(--gouttiere);
}

.carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--padding-carte);
  color: inherit;
  text-decoration: none;
  background: rgba(248, 232, 220, 0.74);
  border: 1px solid var(--color-border);
  border-radius: var(--rayon);
  box-shadow: 0 2px 8px var(--color-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.carte:hover,
.carte:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
  box-shadow: 0 8px 20px var(--color-shadow-hover);
  outline: none;
}

.carte-visuel {
  aspect-ratio: var(--ratio-visuel);
  overflow: hidden;
  border-radius: calc(var(--rayon) / 2);
  background: var(--color-article-background);
}
.carte-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-texte {
  flex: 1;
  padding: var(--e-3) var(--e-2) var(--e-2);
}
.carte-texte h3 {
  margin: 0 0 var(--e-1);
  font-size: 32px;
  line-height: 1.05;
}
.carte-texte h3 sup { font-size: 0.55em; line-height: 0; }
.carte-texte p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.carte:hover h3,
.carte:focus-visible h3 { color: var(--color-links-hover); }

/* ------------------------------------------------------------------ */
/* Pied de page                                                        */
/* ------------------------------------------------------------------ */

.pied {
  width: 720px;
  margin: var(--e-10) auto 0;
  padding-top: var(--e-5);
  border-top: 1px solid var(--color-filet);
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}
.pied .signature {
  margin: 0;
  font-family: var(--fonte-interface);
  font-size: 12px;
  opacity: 0.58;
}

/* ------------------------------------------------------------------ */
/* Pages d'images (generer-pages.py)                                   */
/* ------------------------------------------------------------------ */

/* Les titres des pages sont plus longs que celui de la home : ils débordent
   du texte de l'en-tête pour tenir sur une ligne. */
.page-images h1 {
  margin-inline: calc(-1 * var(--e-10));
  /* un titre trop long passe sur deux lignes équilibrées */
  white-space: normal;
  text-wrap: balance;
  line-height: 1.1;
}

.surtitre {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-interface);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.surtitre a,
.pied .signature a { color: inherit; text-decoration: none; }
.surtitre a:hover,
.pied .signature a:hover { color: var(--color-links-hover); }

.hero-copy .chapo { font-style: italic; }

.planche { margin-top: var(--e-10); scroll-margin-top: var(--e-4); }
.planche:first-child { margin-top: var(--e-3); }

.planche figure { margin: 0; }

/* L'image fait exactement 1260 px : le cadre est une ombre, pas une bordure,
   pour ne pas la rééchantillonner. */
.planche-image {
  display: block;
  box-shadow: 0 0 0 1px var(--color-border), 0 2px 8px var(--color-shadow);
  transition: box-shadow 160ms ease;
}
.planche-image:hover,
.planche-image:focus-visible {
  box-shadow: 0 0 0 1px var(--color-border-hover), 0 8px 20px var(--color-shadow-hover);
  outline: none;
}
.planche-image img {
  display: block;
  width: 100%;
  height: auto;
}

.planche-texte,
.planche-auteur,
.planche-liens {
  width: 680px;
  margin: var(--e-2) auto 0;
  text-align: center;
}
.planche figure + * { margin-top: var(--e-3); }
.planche-auteur {
  font-family: var(--fonte-interface);
  font-size: 13px;
  opacity: 0.75;
}
.planche-liens {
  font-family: var(--fonte-interface);
  font-size: 13px;
}
.planche-liens a { color: var(--color-heading); }
.planche-liens a:hover { color: var(--color-links-hover); }
.planche-liens span { opacity: 0.65; }

/* Page de texte : une colonne de 680 px, celle des sites de vault-publish. */
.texte {
  width: 680px;
  margin: var(--e-3) auto 0;
  font-size: 18px;
  line-height: 1.6;
}
.texte p,
.texte ul { margin: 0 0 var(--e-3); }
.texte ul { padding-left: var(--e-4); }
.texte li + li { margin-top: var(--e-1); }
/* Intertitres : ceux des sites de vault-publish (theme.css, article h1 à h3), un niveau
   plus bas — le h1 est dans le bandeau. Marges ramenées à l'échelle --e-*. */
.texte h2,
.texte h3,
.texte h4 {
  color: var(--color-heading);
  font-family: var(--fonte-titre);
  font-weight: 400;
  line-height: 1;
  text-align: left;
  hyphens: none;
}
.texte h2 {
  margin: var(--e-3) 0 var(--e-5);
  padding: var(--e-5) 0 var(--e-3);
  font-size: 68px;  /* celle du titre du bandeau */
  text-align: center;
  text-wrap: balance;
}
.texte h2:first-child { margin-top: 0; padding-top: 0; }
.texte h3 { margin: var(--e-4) 0 var(--e-2); font-size: 55px; line-height: 1.1; }
.texte h4 { margin: var(--e-3) 0 var(--e-1); font-size: 40px; }
.texte a { color: var(--color-heading); }
.texte a:hover { color: var(--color-links-hover); }
.texte figure { margin: var(--e-5) 0 0; }
.texte .planche-liens { width: auto; margin: var(--e-2) 0 var(--e-5); }
.texte blockquote {
  margin: var(--e-6) 0 0;
  text-align: right;
  font-family: var(--fonte-interface);
  font-size: 13px;
  opacity: 0.75;
}
.texte blockquote p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .planche-image { transition: none; }
  .carte { transition: none; }
}