/* Surcouche de RECONSTRUCTION par-dessus le thème original Beside (main.css).
   Le thème pilote toute la mise en page éditoriale (héros full-bleed, colonnes centrées
   .column-normal 700px / .column-wide 900px / .column-full, diptyques, pull-quotes…).
   Ici on ne fait QUE : le header/footer de repli (le contenu extrait n'inclut pas la nav
   globale), les placeholders d'images non encore récupérées, les liens morts, et les pages
   d'archive générées (.arch-*). Aucune contrainte de largeur sur le contenu : sinon on
   écrase le layout pleine-largeur du thème. */

:root { --ink: #212529; --muted: #6b6b63; }

/* ============================================================================
   Header + footer de reconstruction — identité Beside : fond NOIR, texte blanc,
   accent olive #847859. Hiérarchie claire : utilitaires (haut-droite) → wordmark
   centré → menu centré ; footer = marque centrée + 3 colonnes. Responsive.
   ============================================================================ */
:root { --beside-accent: #847859; --beside-dim: #bcb6ad; --beside-line: rgba(255,255,255,.14); }

/* ---- Header ---- */
.site-header {
  background: #000; color: #fff; text-align: center;
  padding: .9rem 1.5rem 0;
  font-family: 'HelveticaNowText', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.site-header-utility {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.header-stay, .header-shop, .header-lang { color: #fff; text-decoration: none; }
.header-stay { color: var(--beside-accent); }
.header-lang { color: var(--beside-dim); }
.header-stay:hover, .header-shop:hover, .header-lang:hover { color: #fff; }
.header-sep { color: #555; }

.site-brand {
  display: inline-block; color: #fff; text-decoration: none;
  font-weight: 800; letter-spacing: .4em; font-size: 1.7rem;
  margin: .5rem 0 1rem; padding-left: .4em; /* compense le letter-spacing à droite */
}
/* Logo officiel BESIDE (image) — wordmark noir rendu en blanc sur le bandeau noir via invert. */
.brand-logo { height: 1.75rem; width: auto; display: block; filter: invert(1); }
.site-footer-brand .brand-logo { height: 1.5rem; }

/* Infolettre Mailchimp masquée (à remplacer par Klaviyo en V3). */
.home-sidecolumn--newsletter { display: none; }

.site-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.9rem;
  padding: .95rem 0 1.15rem; border-top: 1px solid var(--beside-line);
}
.site-nav-link {
  color: #fff; text-decoration: none;
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: .15rem 0; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-nav-link:hover { color: var(--beside-accent); border-bottom-color: var(--beside-accent); }

/* ---- Footer ---- */
.site-footer {
  /* margin-top → padding-top : le footer noir comble l'ancienne bande blanche (gap transparent sur body blanc). */
  background: #000; color: #fff; padding: 7.5rem 1.5rem 2rem;
  font-family: 'HelveticaNowText', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.site-footer-inner { max-width: 1080px; margin: 0 auto; }
.site-footer-brand { text-align: center; margin-bottom: 3rem; }
.site-footer-brand .site-brand { color: #fff; font-size: 1.5rem; margin: 0; }
.site-tagline {
  margin: .85rem 0 0; font-family: 'Ivar', Palatino, 'Book Antiqua', serif;
  font-style: italic; font-size: 1rem; color: var(--beside-dim);
}
.site-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.footer-col-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--beside-dim); margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 .7rem; }
.footer-col a { color: #fff; text-decoration: none; font-size: .9rem; line-height: 1.4; }
.footer-col a:hover { color: var(--beside-accent); }
.site-footer-copy {
  max-width: 1080px; margin: 3rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--beside-line);
  font-size: .78rem; color: var(--beside-dim); text-align: center;
}

/* ---- Responsive : 3 → 2 → 1 colonnes ---- */
@media (max-width: 780px) {
  .site-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 560px) {
  .site-brand { font-size: 1.4rem; letter-spacing: .32em; }
  .site-nav { gap: .5rem 1.2rem; }
  .site-nav-link { font-size: .72rem; letter-spacing: .1em; }
  .site-footer-cols { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
}

/* ---- Contenu : pleine largeur, le thème gère les largeurs internes ---- */
.content { width: 100%; }
.recovered img { max-width: 100%; height: auto; }

/* ---- Placeholder gris : image éditoriale pas (encore) retrouvée sur Wayback ----
   src remplacé par /placeholder.svg, URL d'origine gardée dans data-orig-src. */
.recovered img[data-placeholder] {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: #e4e3df; display: block;
}

/* ---- Liens internes morts (cible jamais archivée) : non cliquables ---- */
.recovered a.dead-link, .content a.dead-link {
  color: inherit; text-decoration: none; border-bottom: none; cursor: default;
}

/* ---- Pages d'archive générées (listes de section) : conteneur centré ---- */
.arch-head, .arch-list, .arch-pagination {
  max-width: 1120px; margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; padding-right: 1.5rem;
}
.arch-head { margin-top: 3rem; }
.arch-head h1 { font-family: 'Ivar', Palatino, 'Book Antiqua', serif; }
.arch-count { color: var(--muted); font-size: .9rem; margin-top: -.4rem; }
.arch-list {
  list-style: none; padding: 0; margin-top: 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.8rem;
}
.arch-item a { text-decoration: none; color: var(--ink); display: block; }
.arch-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e4e3df; border-radius: 3px; display: block; }
.arch-title { font-family: 'Ivar', Palatino, 'Book Antiqua', serif; font-size: 1.2rem; line-height: 1.3; margin: .6rem 0 0; }
.arch-pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin: 3rem auto; align-items: center; }
.arch-pagination .pg {
  font-family: 'HelveticaNowText', Helvetica, Arial, sans-serif; font-size: .9rem;
  padding: .35rem .7rem; border: 1px solid rgba(0,0,0,.15); border-radius: 3px;
  text-decoration: none; color: var(--ink);
}
.arch-pagination .pg.current { background: #111; color: #fff; border-color: #111; }

/* ---- Hero vidéo (vidéo morte → vraie og:image en fond) : voile sombre pour lisibilité du texte blanc ---- */
.hero-video .video_overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.35); pointer-events: none; }
.hero-video .hero_content { position: relative; z-index: 2; }

/* ---- Boîtes d'image ratio (.image-wrapper / .ratio_*) ----
   Le thème d'origine remplissait ces boîtes par un FOND (lazysizes), pas par des <img>.
   Quand le contenu recouvré contient un vrai <img> dedans, il faut le faire remplir la boîte
   (sinon hauteur 0 → on ne voit que le fond noir du thème). */
.image-wrapper { position: relative; }
.image-wrapper > img,
[class*="ratio_"] > img,
[class*="ratio_"] > a > img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---- Vidéos : vignette cliquable vers YouTube/Vimeo (remplace les iframes) ---- */
.video-embed {
  position: relative; display: block; margin: 2rem auto; max-width: 900px;
  aspect-ratio: 16 / 9; background: #111; border-radius: 3px; overflow: hidden;
  text-decoration: none;
}
.video-embed__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(0,0,0,.6); transition: background .15s ease;
}
.video-embed:hover .video-embed__play { background: #e10000; }
.video-embed__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff;
}
.video-embed--vimeo {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  aspect-ratio: 16 / 5; background: #16202a;
}
.video-embed__label {
  color: #fff; font-family: 'HelveticaNowText', Helvetica, Arial, sans-serif;
  font-size: 1rem; letter-spacing: .02em;
}
.video-embed--vimeo .video-embed__play { position: static; transform: none; width: 54px; height: 54px; }

/* ---- Page de statut de repli ---- */
.dash ul { list-style: none; padding: 0; }
.dash li { padding: .2rem 0; }
.err { color: #a11; }

/* CTA de la page Contact (Buy last issue / Order past issues / Beside Habitat). */
.contact-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }