/* ==================================================================
   Romain Brachet — réglages communes à toutes les pages
   1. Lisibilité : textes un peu plus gras et plus grands, gris plus
      foncés, petites capitales agrandies.
   2. Vidéos (sans le son) : intégrées comme des photos dans les galeries
      de l'accueil et de la page Couple & fiançailles.
   Chargé après les styles de chaque page pour avoir le dernier mot.
   ================================================================== */

/* ---------- 1. Lisibilité ---------- */
:root { --muted: #57534C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #BAB5AC; } }
:root[data-theme="dark"] { --muted: #BAB5AC; }
.ivory-fixed { --muted: #57534C; }
.hero-band { --muted: #524E48; }
.band-section { --muted: #CFC9BF; }

body { font-weight: 400 !important; font-size: 17px !important; line-height: 1.7 !important; }

/* Petites capitales : 11 px → 12,5 px, interlettrage un peu réduit */
.eyebrow, .meta, .small-caps, .field label, .flabel, .path-link, .seo-line,
.nav-link, .lb-btn, .rbq-eyebrow, .rbq-how, .rbq-field label, .rbq-progress-l {
  font-size: 12.5px !important; letter-spacing: .18em !important;
}
.cine-credits { font-size: 12px !important; letter-spacing: .22em !important; }
.cine-quote cite { font-size: 12px !important; }
.nav nav, .hero-links, header .small-caps { font-size: 12.5px !important; }

/* Champs de formulaire : exemples plus lisibles */
.field input::placeholder, .field textarea::placeholder,
.rbq-field input::placeholder, .rbq-field textarea::placeholder { opacity: .65 !important; }

/* Textes courants : lignes pas trop longues */
.path-text, .measure, .book-text, .rbq-p { line-height: 1.7; }

/* ---------- 2. Vidéos ---------- */
.film { margin: 0; min-width: 0; }
.film-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--plate-a, #E4DED3); }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film .film-toggle {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; width: auto; min-height: 36px; padding: 0 12px;
  border: 0; background: rgba(18, 18, 18, .72); color: #F3EFE7; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.film .film-toggle:hover { background: rgba(18, 18, 18, .88); }
.film .film-toggle:focus-visible { outline: 2px solid #F3EFE7; outline-offset: 2px; }

/* ---------- 3. Barre de l'accueil sur téléphone ---------- */
/* Le sélecteur de langue passe sous les liens au lieu de sortir de l'écran */
@media (max-width: 639px) {
  .nav > .wrap { flex-wrap: wrap; row-gap: 6px; }
  .nav > .wrap > div { width: 100%; flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
}