/* =========================================================================
   MAISON AO — version en ligne : socle commun aux trois pages.
   Identité reprise de l'invitation (C:\INVITATION AO\site\css\invitation.css) :
   papier à fibres, Belleza, Saveya, bleu pétrole. Tout est local.
   ========================================================================= */

/* Belleza Regular (SIL Open Font License, fonts/OFL-Belleza.txt) : tous les textes.
   Une seule graisse : jamais de gras ni d'italique imités par le navigateur. */
@font-face {
  font-family: "Belleza";
  src: url("../fonts/Belleza-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Saveya (Hishand Studio) : identité seulement — « Maison AO », lettres A et O, carton.
   Même réglage que l'invitation : dessin ramené à 74 %. */
@font-face {
  font-family: "Saveya";
  src: url("../fonts/Saveya.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 74%;
}

/* Signes absents de Saveya (guillemets, Œ, Ÿ, tirets, points de suspension) : pris dans le Bodoni,
   comme dans l'invitation ; le fichier n'est chargé que si l'un d'eux s'affiche. */
@font-face {
  font-family: "Saveya";
  src: url("../fonts/BodoniModa-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00AB, U+00BB, U+0152-0153, U+0178, U+2013-2014, U+2026;
  size-adjust: 80%;
}

:root {
  color-scheme: only light;

  /* Valeurs exactes de l'invitation. */
  --papier: #ece9e4;
  --encre: #16130f;
  --encre-attenuee: rgba(22, 19, 15, .74);
  --filet: rgba(22, 19, 15, .42);
  /* Bleu pétrole de l'invitation : seule couleur d'accent du site, définie ici seulement. */
  --color-accent: #00566b;
  /* Survol, toucher : le même bleu, un peu plus profond. */
  --color-accent-actif: #003f4f;

  /* Surface ivoire des languettes et des encarts. */
  --color-tab: #f6f0e3;
  --color-shadow: rgba(22, 19, 15, .22);

  --font-texte: "Belleza", "Gill Sans", "Segoe UI", sans-serif;
  --font-identite: "Saveya", "Bodoni 72", Didot, serif;

  /* Approches de l'invitation. */
  --approche-petit: .045em;
  --approche-texte: .035em;
  --approche-grand: .015em;
  --espace-mots: .06em;
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  background: var(--papier) url("../img/fond-portrait.webp") center / cover no-repeat fixed;
  color: var(--encre);
  font-family: var(--font-texte);
  font-weight: 400;
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fond : la feuille de papier à fibres de l'invitation, telle quelle, fixe.
   Écrans plus larges que hauts : la même feuille tournée d'un quart de tour. */
html::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  background: var(--papier) url("../img/fond-portrait.webp") center / cover no-repeat;
  pointer-events: none;
}

@media (orientation: landscape) {
  html,
  html::before { background-image: url("../img/fond-paysage.webp"); }
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 { font-weight: 400; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 4px;
}

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* « AO » : bleu pétrole et variante ss01 de Saveya (petit losange dans le A et le O), comme l'invitation. */
.accent {
  color: var(--color-accent);
  font-feature-settings: "ss01";
}

/* Lien discret « Accueil » (Notre univers, Nos informations) : capitales espacées, zone tactile élargie
   par un pseudo-élément invisible, sans déplacer le texte. */
.lien-accueil {
  position: relative;
  display: inline-block;
  color: var(--encre-attenuee);
  font-size: clamp(.75rem, .7rem + .2vw, .875rem);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  touch-action: manipulation;
}

.lien-accueil::after {
  content: "";
  position: absolute;
  inset: -15px -12px;
}

.lien-accueil:hover,
.lien-accueil:focus-visible,
.lien-accueil:active {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

/* Adresse du lieu : petit corps, encre atténuée, comme sur l'invitation. */
.adresse {
  margin: 0;
  color: var(--encre-attenuee);
  font-style: normal;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.5;
  letter-spacing: var(--approche-petit);
}