/* ================================================================
   Ferme Brassine — feuille de style principale
   Palette tirée des photos : paille, brun poutre, polo rouge,
   robe crème des Blanc-Bleu, barres de cornadis.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300;1,9..144,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --brun-nuit:      #120D07;
  --brun-poutre:    #2C1C0E;
  --or-paille:      #C8902A;
  --or-pale:        #D4A84B;
  --creme-robe:     #ECE7DA;
  --rouge-raymond:  #C14535;
  --gris-cornadis:  #525860;

  --police-titre:   'Fraunces', 'Georgia', serif;
  --police-corps:   'Source Serif 4', 'Georgia', serif;

  /* Largeur de lecture : jamais plus de 65 caractères */
  --mesure: min(65ch, calc(100% - 3rem));

  --section-v: clamp(5rem, 10vw, 8rem);
  --section-h: clamp(1.5rem, 5vw, 5rem);
}

/* ── Réinitialisation ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--police-corps);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.78;
  color: var(--creme-robe);
  background-color: var(--brun-nuit);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--or-paille);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--or-pale); }

/* Focus visible partout */
:focus-visible {
  outline: 2px solid var(--or-paille);
  outline-offset: 3px;
  border-radius: 2px;
}

/* text-wrap pour les titres */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ── HÉRO ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 500px;
  overflow: hidden;
  background-color: #2C1A0E;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  filter: contrast(1.06) brightness(0.82);
}

/* Dégradé subtil pour la lisibilité du titre */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(18, 13, 7, 0.72) 0%,
    rgba(18, 13, 7, 0.15) 55%,
    rgba(18, 13, 7, 0.4) 100%
  );
  pointer-events: none;
}

.hero-contenu {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 6vw, 5rem);
}

.hero-titre {
  font-family: var(--police-titre);
  font-size: clamp(3.8rem, 11vw, 9.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--creme-robe);
  animation: monter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero-lieu {
  font-family: var(--police-corps);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--or-pale);
  margin-top: 1.2rem;
  animation: monter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

@keyframes monter {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── INTRODUCTION ─────────────────────────────────────────────── */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  background-color: var(--brun-nuit);
}

@media (max-width: 768px) {
  .intro {
    grid-template-columns: 1fr;
  }
  .intro-media { order: -1; }
}

.intro-media {
  position: relative;
  overflow: hidden;
  background-color: #3A2A1A;
}

.intro-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 768px) {
  .intro-media {
    height: 60vw;
    min-height: 280px;
  }
}

.intro-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
}

.intro-texte h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--or-paille);
  margin-bottom: 1.6rem;
}

.intro-texte p {
  max-width: 52ch;
  color: var(--creme-robe);
  margin-bottom: 1.2rem;
}

.intro-texte p:last-child { margin-bottom: 0; }

/* ── SECTION PLEIN ÉCRAN (rangée cornadis) ────────────────────── */
.bande-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #1A1408;
}

.bande-photo picture,
.bande-photo img {
  width: 100%;
  height: clamp(280px, 50vw, 560px);
  object-fit: cover;
  object-position: center 35%;
  filter: contrast(1.05) brightness(0.9);
}

.bande-legende {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  font-family: var(--police-corps);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(236, 231, 218, 0.6);
  letter-spacing: 0.04em;
}

/* ── LE BLANC-BLEU ────────────────────────────────────────────── */
.blanc-bleu {
  background-color: var(--brun-poutre);
  padding: var(--section-v) var(--section-h);
  display: flex;
  justify-content: center;
}

.blanc-bleu-interieur {
  max-width: 1000px;
  width: 100%;
}

.blanc-bleu h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--or-paille);
  margin-bottom: 2rem;
}

.blanc-bleu p {
  max-width: var(--mesure);
  margin-bottom: 1.3rem;
  color: var(--creme-robe);
}

.blanc-bleu p:last-child { margin-bottom: 0; }

.mot-technique {
  font-style: italic;
  color: var(--or-pale);
}

/* ── MARGUERITE (section centrale) ───────────────────────────── */
.marguerite {
  position: relative;
  background-color: #0A0805;
}

/* Portrait pleine largeur */
.marguerite-portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #1A1208;
}

.marguerite-portrait picture {
  display: block;
  width: 100%;
}

.marguerite-portrait img {
  width: 100%;
  height: 90svh;
  min-height: 480px;
  object-fit: cover;
  /* Cadrage sur l'oeil — position 50% horizontal, 28% vertical */
  object-position: 50% 28%;
  filter: contrast(1.12) brightness(0.9);
}

/* Légende "Marguerite" glissée sur le bord de la photo */
.marguerite-nom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4rem clamp(1.5rem, 5vw, 4rem) 2rem;
  background: linear-gradient(to top, rgba(10, 8, 5, 0.88) 0%, transparent 100%);
}

.marguerite-nom p {
  font-family: var(--police-titre);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 200;
  font-style: italic;
  color: var(--creme-robe);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Corps de la section Marguerite */
.marguerite-corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 55vh;
}

@media (max-width: 768px) {
  .marguerite-corps {
    grid-template-columns: 1fr;
  }
}

.marguerite-texte {
  padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.marguerite-texte h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--or-paille);
  margin-bottom: 1.8rem;
}

.marguerite-texte p {
  max-width: 50ch;
  color: var(--creme-robe);
  margin-bottom: 1.2rem;
}

.marguerite-texte p:last-child { margin-bottom: 0; }

.marguerite-scene {
  position: relative;
  overflow: hidden;
  background-color: #2A1A0E;
  margin: 0;
  min-height: 55vh;
}

.marguerite-scene picture {
  display: block;
  width: 100%;
  height: 100%;
}

.marguerite-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 768px) {
  .marguerite-scene {
    height: 70vw;
    min-height: 260px;
  }
}

.marguerite-scene figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(236, 231, 218, 0.65);
  letter-spacing: 0.03em;
}

/* Photo secondaire Marguerite à l'auge */
.marguerite-auge-wrap {
  padding: 0 clamp(2rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem);
  display: flex;
  justify-content: flex-end;
}

.marguerite-auge-wrap figure {
  max-width: 280px;
  width: 100%;
}

.marguerite-auge-wrap img {
  width: 100%;
  border-radius: 2px;
  filter: brightness(0.88);
}

.marguerite-auge-wrap figcaption {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(236, 231, 218, 0.5);
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
}

/* ── LES VEAUX ────────────────────────────────────────────────── */
.veaux {
  background-color: var(--brun-nuit);
  padding: var(--section-v) var(--section-h);
}

.veaux-interieur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 768px) {
  .veaux-interieur {
    grid-template-columns: 1fr;
  }
}

.veaux-texte h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--or-paille);
  margin-bottom: 1.8rem;
}

.veaux-texte p {
  color: var(--creme-robe);
  margin-bottom: 1.2rem;
  max-width: 50ch;
}

.veaux-texte p:last-child { margin-bottom: 0; }

.veaux-galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.veaux-galerie figure {
  margin: 0;
}

.veaux-galerie img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
}

.veaux-galerie figcaption {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(236, 231, 218, 0.5);
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
}

/* ── CE QUE PERSONNE NE VOIT ─────────────────────────────────── */
.invisible {
  background-color: #0C0905;
  padding: var(--section-v) var(--section-h);
  border-top: 1px solid rgba(200, 144, 42, 0.18);
}

.invisible-interieur {
  max-width: 880px;
  margin: 0 auto;
}

.invisible-intro {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--creme-robe);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 18ch;
  line-height: 1.25;
}

.invisible-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 680px) {
  .invisible-items {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.invisible-item h3 {
  font-family: var(--police-corps);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--or-paille);
  margin-bottom: 0.8rem;
  text-transform: none;
}

.invisible-item p {
  font-size: 0.95rem;
  color: rgba(236, 231, 218, 0.75);
  line-height: 1.7;
}

/* ── L'ANNÉE ─────────────────────────────────────────────────── */
.annee {
  background-color: var(--brun-poutre);
  padding: var(--section-v) var(--section-h);
  border-top: 1px solid rgba(200, 144, 42, 0.15);
}

.annee-interieur {
  max-width: 1100px;
  margin: 0 auto;
}

.annee-interieur > h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--or-paille);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.calendrier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

@media (max-width: 900px) {
  .calendrier {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .calendrier {
    grid-template-columns: 1fr;
  }
}

.periode {
  padding: 2rem 2rem 2rem 0;
  border-top: 1px solid rgba(200, 144, 42, 0.3);
}

.periode + .periode {
  padding-left: 2rem;
  border-left: 1px solid rgba(200, 144, 42, 0.12);
}

@media (max-width: 900px) {
  .periode:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .periode:nth-child(2n) { padding-left: 2rem; border-left: 1px solid rgba(200, 144, 42, 0.12); }
  .periode:nth-child(3),
  .periode:nth-child(4) { padding-top: 2rem; }
}

@media (max-width: 480px) {
  .periode + .periode {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(200, 144, 42, 0.3);
    margin-top: 0;
  }
}

.periode dt {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--creme-robe);
  margin-bottom: 1rem;
}

.periode dd {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(236, 231, 218, 0.7);
}

/* ── ÉTIENNE ET RAYMOND ──────────────────────────────────────── */
.hommes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 65vh;
  background-color: var(--brun-nuit);
}

@media (max-width: 768px) {
  .hommes {
    grid-template-columns: 1fr;
  }
}

.hommes-photo {
  position: relative;
  overflow: hidden;
  background-color: #2A2010;
  margin: 0;
}

.hommes-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hommes-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  filter: contrast(1.05) brightness(0.88);
}

@media (max-width: 768px) {
  .hommes-photo {
    height: 65vw;
    min-height: 260px;
  }
}

.hommes-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
}

.hommes-texte h2 {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--or-paille);
  margin-bottom: 2rem;
}

.hommes-texte p {
  max-width: 48ch;
  color: var(--creme-robe);
  margin-bottom: 1.4rem;
}

.hommes-texte p:last-child { margin-bottom: 0; }

/* ── LA TRANSMISSION ─────────────────────────────────────────── */
.transmission {
  background-color: var(--brun-nuit);
  padding: var(--section-v) var(--section-h);
  border-top: 1px solid rgba(200, 144, 42, 0.15);
  display: flex;
  justify-content: center;
}

.transmission-interieur {
  max-width: var(--mesure);
  width: 100%;
}

.transmission-ouverture {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--creme-robe);
  margin-bottom: 2rem;
  line-height: 1.3;
}

.transmission-interieur p {
  color: rgba(236, 231, 218, 0.82);
  margin-bottom: 1.2rem;
}

.transmission-interieur p:last-child { margin-bottom: 0; }

/* ── PIED DE PAGE ─────────────────────────────────────────────── */
.contact {
  background-color: #0A0805;
  padding: clamp(3.5rem, 7vw, 6rem) var(--section-h);
  border-top: 1px solid rgba(82, 88, 96, 0.4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
}

@media (max-width: 600px) {
  .contact {
    grid-template-columns: 1fr;
  }
}

.contact address {
  font-style: normal;
}

.contact-nom {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--or-paille);
  margin-bottom: 1rem;
}

.contact address p {
  font-size: 0.9rem;
  color: rgba(236, 231, 218, 0.6);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.contact address p:last-child { margin-bottom: 0; }

.contact address a {
  color: rgba(236, 231, 218, 0.8);
  text-decoration: none;
}

.contact address a:hover {
  color: var(--or-pale);
}

.contact-mention {
  font-size: 0.78rem;
  color: rgba(236, 231, 218, 0.3);
  letter-spacing: 0.04em;
  align-self: end;
}

/* ── COULEUR FOND SOMBRE ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Le site est déjà sombre, rien à ajuster */
}