/* ============================================================
   BANDEAUX PHOTO AVEC TITRE — À propos, rayons Chat et Chien, blog
   Chargée par _partials/bandeau-v2.tpl, sur ces pages seulement. Réglages par page
   (photo, cadrages, voile, hauteurs, textes) dans ce même partiel, passés au bandeau
   en propriétés personnalisées (--hv2-*) par _partials/breadcrumb.tpl.
   ============================================================ */

/* Voile brun foncé (#1F1813 de la charte) : ombre intérieure, sous le texte, sans élément en plus */
.breadcrumb-bg.hv2-bandeau { background-position: var(--hv2-pos) !important; box-shadow: inset 0 0 0 100vmax rgba(31, 24, 19, 0.38); }
#wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb li,
#wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb li a,
#wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb li::after { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
/* À propos : contenu saisi dans le BO en deux colonnes d'un tiers (col-sm-4, le dernier tiers vide) :
   colonnes empilées sur toute la largeur, centrées, largeur de lecture confortable */
#content.page-cms-4 > .row > [class*="col-"] { float: none; flex: 0 0 100%; width: 100%; max-width: 46rem; margin-inline: auto; }

/* Mobile : le thème masque le bandeau jusqu'à 768 px (custom.css), il est rétabli ici (photo en haut,
   texte dessous). Dès 768 px : texte à droite, sur le fond sombre, sujet à gauche. */
.breadcrumb-bg.hv2-bandeau { display: flex !important; align-items: flex-end; }
.breadcrumb-bg.hv2-bandeau::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.breadcrumb-bg.hv2-bandeau > .container { position: relative; z-index: 1; width: 100%; padding-block: 32px; }
.hv2-bandeau__titre { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 34rem; text-align: left; color: #F8F7EE; }
.hv2-bandeau__surtitre { margin: 0; font-family: "Karla", "Helvetica Neue", Arial, sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #D3B881; }
#wrapper .hv2-bandeau__h1 { margin: 0; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 1.25rem + 3.6vw, 4.75rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; color: #F8F7EE; text-transform: none; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hv2-bandeau__h1 span { display: block; color: #D3B881; }
.hv2-bandeau__chapo { margin: 0; max-width: 26rem; font-family: "Karla", "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.55; color: rgba(248, 247, 238, 0.88); }
/* Filet or sous le chapeau, comme sur l'accueil */
.hv2-bandeau__chapo::after { content: ""; display: block; width: 4.5rem; height: 1px; margin-top: 18px; background: #D3B881; transform-origin: left; }
@media (min-width: 768px) {
  .breadcrumb-bg.hv2-bandeau { align-items: center; }
  .breadcrumb-bg.hv2-bandeau::before { background: linear-gradient(to right, rgba(22, 18, 14, 0) 45%, rgba(22, 18, 14, var(--hv2-voile, 0.55)) var(--hv2-voile-fin, 100%)); }
  .breadcrumb-bg.hv2-bandeau > .container { max-width: none; padding-left: 62vw; padding-right: clamp(20px, 5vw, 96px); }
  #wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb { margin: 0 0 20px; padding: 0; }
  #wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb ol { text-align: left; }
}
/* Mobile : photo en haut (300 px, ou photo_m), fondue dans le brun de la charte, texte dessous */
@media (max-width: 767px) {
  .breadcrumb-bg.hv2-bandeau { min-height: 0 !important; background-size: auto var(--hv2-photo-m, 300px) !important; background-position: var(--hv2-pos-m) !important; background-color: #1F1813; }
  .breadcrumb-bg.hv2-bandeau::before { background: linear-gradient(to bottom, rgba(31, 24, 19, 0) calc(var(--hv2-photo-m, 300px) - 110px), #1F1813 var(--hv2-photo-m, 300px)); }
  .breadcrumb-bg.hv2-bandeau > .container { padding: calc(var(--hv2-photo-m, 300px) - 50px) 20px 36px; }
  /* Fil d'Ariane : masqué en mobile par le thème (hidden-sm-down, contré par appagebuilder) */
  #wrapper .breadcrumb-bg.hv2-bandeau .breadcrumb { display: none !important; }
}
/* Bandeau collé au header jusqu'à 768 px : l'espace de 24 px de header-v2.css ne sert que là où le thème
   masque le bandeau (même sélecteur, placé après : il l'emporte) */
@media (max-width: 768px) {
  body:not(#hv2-tous):not(#index) #wrapper { padding-top: 0; }
}
/* Arrivée au chargement : le texte glisse sans fondu, le filet s'allonge (règle de l'accueil) */
@media (prefers-reduced-motion: no-preference) {
  .hv2-bandeau__titre > * { animation: hv2-bandeau-monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hv2-bandeau__titre > :nth-child(2) { animation-delay: 0.08s; }
  .hv2-bandeau__titre > :nth-child(3) { animation-delay: 0.16s; }
  .hv2-bandeau__chapo::after { animation: hv2-bandeau-filet 0.9s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes hv2-bandeau-monte { from { transform: translateY(28px); } to { transform: none; } }
@keyframes hv2-bandeau-filet { from { transform: scaleX(0); } to { transform: none; } }


/* ============================================================
   BANDEAU SOUS LE HEADER TRANSPARENT (≥ 1024 px)
   Le header posé sur la photo est commun à l'accueil et à ces pages : header-v2.css,
   fin du fichier. Ici, seulement ce qui revient au bandeau : il remonte sous le
   header (sorti du flux) et grandit de sa hauteur (≈ 115 px : 30 + logo 55 + 30) ;
   dégradé sombre en haut de la photo pour le logo blanc et le menu ivoire. Mêmes
   conditions que le header : animation-timeline: scroll(), ou repli Firefox
   (.hv2-hdr-js posée par _partials/hv2-header-repli.tpl).
   ============================================================ */

@media (min-width: 1024px) {
  @supports (animation-timeline: scroll()) {
    .breadcrumb-bg.hv2-bandeau { padding-top: 115px; min-height: calc(var(--hv2-h, 452px) + 115px) !important; }
    .breadcrumb-bg.hv2-bandeau::after {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 220px;
      background: linear-gradient(to bottom, rgba(22, 18, 14, 0.62), rgba(22, 18, 14, 0));
      pointer-events: none;
    }
  }

  .hv2-hdr-js .breadcrumb-bg.hv2-bandeau { padding-top: 115px; min-height: calc(var(--hv2-h, 452px) + 115px) !important; }
  .hv2-hdr-js .breadcrumb-bg.hv2-bandeau::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(22, 18, 14, 0.62), rgba(22, 18, 14, 0));
    pointer-events: none;
  }
}