/* =========================================================
   CARNET D'OUVRAGES — 1.0.0
   Habillage commun des articles + choix clair / sombre.
   Complète le modèle single-projet et la galerie V2 existants.
   Ne remplace ni borealis-gallery.css, ni le CSS du thème.
   ========================================================= */

/* Palette par défaut : sombre. Les anciennes classes Refuge
   restent prises en charge, sans modifier cet article. */
main#contenu.ab-projet-single,
.wp-block-group:is(.ab-ouvrage-content, .ab-refuge-content) {
  --ab-ouvrage-bg: var(--ab-dark, #353535);
  --ab-ouvrage-text: #ffffffdf;
  --ab-ouvrage-title: #fff;
  --ab-ouvrage-hover: #808080;

  /* Compatibilité avec le modèle d'article déjà installé. */
  --ab-projet-soft: var(--ab-ouvrage-text);
}

/* Le style du groupe RACINE pilote aussi son modèle parent.
   :has() réagit au HTML rendu, sans ajouter de JavaScript.
   Un style appliqué à un groupe imbriqué ne change pas la page. */
main#contenu.ab-projet-single:has(.ab-projet-content > :is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light),
.wp-block-group:is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light,
main#contenu .is-style-ab-ouvrage-light {
  --ab-ouvrage-bg: #fff;
  --ab-ouvrage-text: #333;
  --ab-ouvrage-title: #333;
  --ab-ouvrage-hover: #666;
}

/* L'ancien CSS du modèle fixait ces fonds en gris.
   Ne PAS modifier --ab-dark globalement : le menu et le footer
   utilisent aussi cette variable et doivent rester inchangés. */
main#contenu.ab-projet-single {
  background-color: var(--ab-ouvrage-bg);
  color: var(--ab-ouvrage-text);
}

main#contenu.ab-projet-single .ab-projet-hero {
  background-color: var(--ab-ouvrage-bg);
}

main#contenu.ab-projet-single .ab-projet-content,
main#contenu.ab-projet-single .ab-projet-breadcrumb {
  color: var(--ab-ouvrage-text);
}

main#contenu.ab-projet-single h1.ab-projet-title {
  color: var(--ab-ouvrage-title);
}

main#contenu.ab-projet-single .ab-projet-breadcrumb a:hover {
  color: var(--ab-ouvrage-hover);
}

/* Fond autour du main et dans les transparences du décor.
   Aucune règle de couleur sur les enfants du header/footer. */
body:has(.ab-projet-single .ab-projet-content > :is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light),
.wp-site-blocks:has(.ab-projet-single .ab-projet-content > :is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light),
.is-style-ab-ouvrage-light {
  background-color: #fff !important;
}

/* Composants partagés : nom générique pour les nouveaux ouvrages,
   et alias des trois anciennes classes de la page Refuge. */
.wp-block-group:is(.ab-ouvrage-content, .ab-refuge-content) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--ab-ouvrage-bg);
  color: var(--ab-ouvrage-text);
}

:is(.ab-ouvrage-content, .ab-refuge-content) h2:is(.ab-ouvrage-subtitle, .ab-refuge-subtitle) {
  display: block;
  margin: 0 0 30px;
  padding: 0;
  color: var(--ab-ouvrage-text);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 35px;
  font-weight: 200;
  line-height: 1.2;
  text-transform: none;
}

:is(.ab-ouvrage-content, .ab-refuge-content) h2:is(.ab-ouvrage-subtitle, .ab-refuge-subtitle)::after {
  content: none;
  display: none;
}

:is(.ab-ouvrage-content, .ab-refuge-content) :is(.ab-ouvrage-quote, .ab-refuge-quote) {
  margin: 50px 0 0;
  padding: 0;
}

/* Sur fond blanc, rendre visibles le placeholder et le chargement.
   On conserve exactement le zoom, le fondu et les boutons V2. */
:is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light
  .ab-progressive-gallery .ab-gallery-item > a {
  background-color: #f2f2f2;
}

:is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light
  .ab-progressive-gallery .ab-gallery-item.is-loading > a::before {
  background-image: linear-gradient(110deg, #00000003 25%, #00000012 45%, #00000003 65%);
}

:is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light
  .ab-progressive-gallery .ab-gallery-item.is-loading > a::after {
  border-color: #00000026;
  border-top-color: #555;
}

:is(.ab-ouvrage-content, .ab-refuge-content).is-style-ab-ouvrage-light
  .ab-progressive-gallery .ab-gallery-retry {
  background-color: #fff;
  color: #333;
  border-color: #00000040;
}

/* Les libellés sur les photos et la visionneuse gardent leurs
   couleurs propres dans borealis-gallery.css. Pas de règle
   "tous les span/a en noir" qui casserait ces surimpressions. */

@media (max-width: 767px) {
  :is(.ab-ouvrage-content, .ab-refuge-content) h2:is(.ab-ouvrage-subtitle, .ab-refuge-subtitle) {
    font-size: 24px;
  }
}

/* Aperçu dans Gutenberg, sans lancer le JS de galerie.
   Compatible avec les conteneurs internes de Groupe. */
.editor-styles-wrapper .ab-ouvrage-content .ab-progressive-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 0;
}
.editor-styles-wrapper .ab-ouvrage-content .ab-progressive-gallery:has(> .block-editor-inner-blocks) {
  display: block;
}
.editor-styles-wrapper .ab-ouvrage-content .ab-progressive-gallery > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.editor-styles-wrapper .ab-ouvrage-content .ab-gallery-item {
  min-width: 0;
  margin: 0;
}
.editor-styles-wrapper .ab-ouvrage-content .ab-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 979px) {
  .editor-styles-wrapper .ab-ouvrage-content .ab-progressive-gallery,
  .editor-styles-wrapper .ab-ouvrage-content .ab-progressive-gallery > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}