/* ==========================================================================
   Charte graphique — transposée à l'identique depuis les maquettes Design
   Canvas validées (Main.dc.html, SerieFeuilles.dc.html, CoverMobile.dc.html,
   SerieFeuillesMobile.dc.html).
   Breakpoint desktop/mobile unique à 768px (desktop = valeurs des maquettes
   1440px, mobile = valeurs des maquettes 390px).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500;1,600&display=swap');

:root {
  --bg-black: #141412;
  --bg-white: #f7f6f3;
  --title-on-black: #f7f6f3;
  --body-on-black: #c9c7c1;
  --label-on-black: #7c7a74;
  --hist-on-black: #b9b7b0;
  --title-on-white: #171613;
  --body-on-white: #38362f;
  --label-on-white: #8a887f;
  --hist-on-white: #4a4842;
  --divider-on-white: #d8d5cd;
  --divider-on-black: #3a3833;
  --copyright: #6f6d67;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-black); }
body { font-family: 'Cormorant Garamond', serif; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }
img { max-width: 100%; }

/* ---------- Hero ---------- */
.hero {
  width: 100%;
  background: var(--bg-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 160px 100px;
}

.hero__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 88px;
  line-height: 1;
  color: var(--title-on-black);
  letter-spacing: 0.01em;
  display: inline-block;
}

.hero__tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  margin-top: 28px;
  font-size: 35px;
  color: var(--title-on-black);
}

.menu {
  margin-top: 56px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
}

.menu__item {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 35px;
  color: #8a887f;
}

.menu__item--active {
  font-weight: 600;
  color: var(--title-on-black);
}

/* opacity:1 pour éviter que la règle générale "a:hover { opacity:0.7 }"
   ne ternisse le blanc voulu ici. */
.menu__item:hover {
  color: var(--title-on-black);
  opacity: 1;
}

.hero__social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
}

.hero__social a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body-on-black);
}

/* ---------- Intro série ---------- */
.intro {
  width: 100%;
  background: var(--bg-black);
  padding: 0 100px 160px;
}

.intro__text {
  max-width: 760px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.7;
  color: var(--body-on-black);
}

/* ---------- Blocs photo ---------- */
.block {
  width: 100%;
  min-height: 940px;
  display: flex;
  align-items: stretch;
}

.block--white { background: var(--bg-white); }
.block--black { background: var(--bg-black); }

.block--white .block__title { color: var(--title-on-white); }
.block--black .block__title { color: var(--title-on-black); }

.block--white .specs { color: var(--body-on-white); }
.block--black .specs { color: var(--body-on-black); }

.block--white .specs__label,
.block--white .histogram__label { color: var(--label-on-white); }
.block--black .specs__label,
.block--black .histogram__label { color: var(--label-on-black); }

.block--white .histogram { color: var(--hist-on-white); }
.block--black .histogram { color: var(--hist-on-black); }

.block--white .pano-divider { background: var(--divider-on-white); }
.block--black .pano-divider { background: var(--divider-on-black); }

.block__media {
  width: 53%;
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mot-clé "maxed" (photo_block()/pano_block() dans _macros.html.j2) : cible
   de boîte ×1.3. Sur un bloc gauche/droite, la colonne média est aussi
   élargie (53%→66%) — sans ça la boîte plus grande serait replafonnée par
   la largeur de colonne inchangée (.block__frame a max-width:100%). Le bloc
   panorama n'a pas besoin de cette règle : sa boîte n'est pas contrainte par
   une colonne partagée avec la fiche. */
.block--maxed .block__media { width: 66%; }
.block--maxed .block__info { width: 34%; }

/* Le cadrage (ratio + recadrage object-fit) vit sur ce conteneur, pas
   directement sur <img> : certains moteurs de rendu calculent mal la
   hauteur utilisée quand un <img> combine width + aspect-ratio en CSS avec
   ses attributs HTML width/height natifs (résolution native de la photo),
   et retombent sur la taille native — d'où un cadre qui explose en hauteur.
   Un conteneur non remplacé (div) + img en width:100%/height:100% est fiable
   dans tous les cas. */
.block__frame {
  width: 100%;
  /* --frame-max-w / --frame-ratio (posées en inline par photo_block()) :
     560×840 pour une photo portrait, 840×560 pour une photo paysage — une
     photo paysage remplit ainsi sa boîte au lieu d'être minuscule dans une
     boîte portrait. 560/2:3 en repli si les variables sont absentes. */
  max-width: var(--frame-max-w, 560px);
  aspect-ratio: var(--frame-ratio, 2 / 3);
  overflow: hidden;
  flex-shrink: 0;
}

.block__frame img {
  width: 100%;
  height: 100%;
  /* contain (pas cover) : la photo s'affiche en entier, réduite pour tenir
     dans la boîte, jamais recadrée. */
  object-fit: contain;
  display: block;
}

.block__info {
  width: 47%;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.block--reverse { flex-direction: row-reverse; }
.block--reverse .block__info { align-items: flex-end; }
/* Les lignes de fiche restent en largeur pleine (comme en mode normal) plutôt
   que dimensionnées à leur propre contenu : sinon chaque ligne aurait une
   largeur différente et les colonnes label/valeur ne s'aligneraient plus
   verticalement d'une ligne à l'autre. */
/* Si une valeur venait quand même à passer à la ligne (nom d'objectif très
   long), elle reste alignée à droite plutôt qu'à gauche par défaut. */
.block--reverse .specs__row span:last-child { text-align: right; }
.block--reverse .histogram { display: flex; flex-direction: column; align-items: flex-end; }

.block__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
}

.specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
  letter-spacing: 0.05em;
}

/* Sans ce plafond, .specs hérite (par le stretch flex par défaut de
   .block__info) toute la largeur de la colonne fiche — correct à 1440px,
   mais sur un écran large la colonne devient très large et le label/valeur
   de chaque ligne se retrouvent écartés par un vide énorme. max-width garde
   une largeur de lecture raisonnable quelle que soit la largeur de l'écran ;
   la ligne reste pleine largeur DE CETTE boîte (pas du parent), donc
   l'objectif le plus long tient toujours sur une seule ligne. Scopé à
   .block__info (pas .specs--inline du bloc panorama, qui doit rester libre
   de s'étaler sur toute la largeur du panorama).
*/
.block__info .specs {
  max-width: 480px;
}

.specs__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.histogram__label {
  font-size: 18px;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}

/* ---------- Bloc panorama ---------- */
.block--pano {
  min-height: 1000px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 100px;
  gap: 44px;
}

.block__pano-media {
  width: 100%;
  /* --pano-max-w / --pano-ratio (posées en inline par pano_block()) : la
     boîte fait 560×840 pour une photo portrait, 840×560 pour une photo
     paysage — même échelle que les cadres gauche/droite, juste orientée
     selon la photo. 560/840 en repli si la variable est absente. */
  max-width: var(--pano-max-w, 560px);
  aspect-ratio: var(--pano-ratio, 560 / 840);
  overflow: hidden;
  flex-shrink: 0;
}

.block__pano-media img {
  width: 100%;
  height: 100%;
  /* contain : la photo entière est visible, réduite pour tenir dans la
     boîte, jamais recadrée. */
  object-fit: contain;
  display: block;
}

.block__pano-info {
  display: flex;
  align-items: center;
  gap: 48px;
}

.specs--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 28px;
}

.pano-divider {
  display: block;
  width: 1px;
  height: 22px;
}

.histogram--inline .histogram__label { display: none; }

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  height: 220px;
  background: var(--bg-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__copyright {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copyright);
}

/* ==========================================================================
   Mobile (< 768px) — valeurs issues de CoverMobile.dc.html /
   SerieFeuillesMobile.dc.html.
   ========================================================================== */
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    padding: 64px 28px 56px;
  }

  .hero__name { font-size: 34px; line-height: 1.1; }
  .hero__tagline { margin-top: 14px; font-size: 12px; }

  .menu { margin-top: 36px; gap: 14px; row-gap: 10px; }
  .menu__item { font-size: 17px; }

  .hero__social {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 36px;
  }
  .hero__social a { font-size: 10px; letter-spacing: 0.14em; }

  .intro { padding: 0 28px 56px; }
  .intro__text { font-size: 15px; max-width: none; }

  .block, .block--reverse {
    min-height: 0;
    flex-direction: column;
  }

  .block__media, .block--reverse .block__media {
    width: 100%;
    padding: 0;
  }
  .block__frame {
    width: 100%;
  }

  .block__info, .block--reverse .block__info {
    width: 100%;
    padding: 32px 28px 40px;
    gap: 24px;
    align-items: stretch;
  }

  .block__title { font-size: 24px; }

  .specs, .block--reverse .specs { gap: 10px; font-size: 11px; letter-spacing: 0.04em; align-items: stretch; }
  .specs__row, .block--reverse .specs__row { justify-content: space-between; width: auto; gap: 8px; }

  .histogram__label { font-size: 9px; letter-spacing: 0.18em; }
  .histogram, .block--reverse .histogram { align-items: stretch; }

  .block--pano {
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  /* Plus de surcharge ici : la règle de base (width:100% + max-width +
     aspect-ratio) rétrécit déjà la boîte proportionnellement sur mobile,
     sans recadrage — pas besoin d'un traitement mobile séparé. */
  .block__pano-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 28px 40px;
    gap: 24px;
  }
  .specs--inline { justify-content: center; gap: 16px; font-size: 11px; letter-spacing: 0.04em; }
  .pano-divider { display: none; }
  .histogram--inline .histogram__label { display: block; }

  .footer { height: auto; padding: 52px 28px; }
  .footer__copyright { font-size: 10px; }
}