/* ─── Polices ────────────────────────────────────────────────────────────────
   Auto-hébergées (cf. fonts/README.md) : la CSP du site est `default-src
   'self'`, et un appel à Google Fonts livrerait l'IP de chaque visiteur à un
   tiers. EB Garamond porte le nom et la signature, Inter tout le fonctionnel. */
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/eb-garamond-400.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/eb-garamond-500.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(fonts/eb-garamond-400-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300;
  font-display: swap; src: url(fonts/inter-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/inter-400.woff2) format('woff2');
}

:root {
  --fond: #123A63;
  --or: #D4BF61;
  --texte: #F2F5F9;
  --sourdine: #9FB2C6;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html { height: 100%; }
body {
  min-height: 100%; margin: 0;
  background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-weight: 300;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px; box-sizing: border-box; text-align: center;
}

/* Safari force sa propre couleur sur les liens `mailto:` qu'il détecte : on la
   neutralise ici, sinon l'adresse de contact ressort en bleu système. */
a { color: inherit; -webkit-text-fill-color: currentColor; }

main { display: flex; flex-direction: column; align-items: center; }
.marque { width: min(46vw, 232px); height: auto; }

h1 {
  margin: 2.6rem 0 0; font-family: var(--serif); font-weight: 500;
  color: var(--or); font-size: clamp(1.45rem, 4.2vw, 2rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  padding-left: 0.42em; line-height: 1;
}

.filet { width: 2.5rem; height: 1px; background: var(--or); margin: 2rem auto; opacity: .55; }
.filet.court { width: 1.1rem; margin: 1.9rem auto; }

.trip {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--texte); font-size: clamp(1rem, 2.6vw, 1.2rem);
  letter-spacing: 0.02em; line-height: 1.85; opacity: .92;
}

.contact {
  font-family: var(--sans); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid rgba(242,245,249,.28); padding-bottom: 3px;
  transition: border-color .25s ease;
}
.contact:hover, .contact:focus-visible { border-bottom-color: var(--texte); outline: none; }

/* ─── Pied de page ───────────────────────────────────────────────────────── */
footer {
  position: fixed; bottom: 1.6rem; left: 0; right: 0;
  font-family: var(--sans); font-weight: 300;
  color: var(--sourdine); font-size: 0.62rem; letter-spacing: 0.14em;
}
footer p { margin: 0; }
footer .legal {
  display: inline-block; margin-top: 0.55rem;
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-decoration: none; opacity: .8;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: opacity .25s ease, border-color .25s ease;
}
footer .legal:hover, footer .legal:focus-visible {
  opacity: 1; border-bottom-color: currentColor; outline: none;
}

/* ─── Page intérieure (mentions légales) ─────────────────────────────────────
   Le bloc est centré dans la page, mais le texte s'aligne à gauche : une
   adresse postale centrée ligne à ligne n'offre aucun bord stable à l'œil. */
body.page {
  justify-content: flex-start; padding: 4.5rem 24px 6rem;
  text-align: left;
}
body.page main { width: 100%; max-width: 27rem; align-items: stretch; }

.retour { display: inline-block; align-self: center; }
.marque.petite { width: 76px; }

body.page h1 {
  margin: 2.4rem 0 0; align-self: center;
  font-size: clamp(0.92rem, 2.4vw, 1.05rem); letter-spacing: 0.32em;
}
body.page .filet { margin: 1.8rem auto 0; }

section { margin-top: 3.1rem; }
section h2 {
  margin: 0 0 1rem; font-family: var(--sans); font-weight: 400;
  color: var(--or); font-size: 0.58rem;
  letter-spacing: 0.26em; text-transform: uppercase;
}
section p {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 1.02rem; letter-spacing: 0.01em; line-height: 1.95;
}
section a {
  text-decoration: none;
  border-bottom: 1px solid rgba(242,245,249,.28); padding-bottom: 2px;
  transition: border-color .25s ease;
}
section a:hover, section a:focus-visible { border-bottom-color: var(--texte); outline: none; }

body.page footer { position: static; margin-top: 4.5rem; text-align: center; }