/*
 * ST-TRA-044 — hero des archives (« Appartements ») : titre + accroche, diaporama à droite.
 * Balisage : rh_hero_archive_html() (functions.php), rendu par taxonomy-property-type.php.
 * Diaporama : rh-hero-slideshow.css/.js (qui reconnaissent `.rh-hero-archive__photos`).
 *
 * Reproduit le hero Greenshift de « Le quartier », MESURÉ le 30/09/2026 (on ne peut pas
 * réutiliser son CSS : Greenshift le génère par id de bloc, dans la méta de chaque page) :
 *   - fond saumon plein cadre (palette-color-2) ; conteneur aligné sur la grille du site ;
 *   - ≥ 1000 px : colonne texte = moitié du conteneur − 20 px ; colonne photos en position
 *     absolue, du milieu de l'écran + 20 px jusqu'au bord DROIT de l'écran, toute la hauteur ;
 *     hauteur du bloc = fenêtre − header (comme rh-hero-hauteur.css) ;
 *   - < 1000 px : empilé, texte centré (80 px en haut et en bas), photos 600 px de haut de 690
 *     à 999 px et 400 px en dessous — les hauteurs que suppose rh_hero_sizes().
 * Titre : même taille que le grand titre du hero de « Le quartier » (clamp 45 → 80 px).
 */

.rh-hero-archive {
  position: relative;
  background: var(--theme-palette-color-2, #ff9ea2);
  color: var(--theme-palette-color-8, #ffffff);
}

.rh-hero-archive__contenu {
  display: flex;
  width: var(--theme-container-width, 90vw);
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
}

.rh-hero-archive__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rh-hero-archive__titre {
  margin: 0 0 60px;
  color: inherit;
  font-size: clamp(45px, 5vw, 80px);
  font-weight: 800;
  line-height: 1;
}

.rh-hero-archive__accroche {
  margin: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1.65;
}

/* ST-TRA-074 — bouton « Télécharger la brochure » sous l'accroche. Reprend le bouton orange
 * Greenshift de l'accueil, relevé le 02/11/2026 (« Découvrir Heights ») : fond palette-color-1,
 * texte blanc 16 px / 600, 18 × 32 px, angles droits. Le balayage au survol vient de rh-hover.css
 * (`.gspb_button_wrapper > a.gspb-buttonbox`), d'où ces deux classes. */
.rh-hero-archive__bouton {
  align-self: flex-start;
  margin-top: 30px;
  /* Survol (retour d'Etienne du 02/11/2026) : le balayage saumon de l'accueil est ici de la
   * couleur du fond du hero, le bouton disparaissait. Balayage BLANC, texte et icône à l'orange.
   * Seules les variables de rh-hover.css changent : même mouvement, même repli sans animation
   * (fond blanc + texte orange, instantanés). */
  --rh-hover-cta-sweep: #fff;
  --rh-hover-cta-fg: var(--theme-palette-color-1, #F54E16);
}
.rh-hero-archive__bouton > .gspb-buttonbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 0;
  background-color: var(--theme-palette-color-1, #F54E16);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  text-decoration: none;
  /* Le texte passe du blanc à l'orange PENDANT le balayage, pas d'un coup : instantané, il serait
   * orange sur la partie du bouton encore orange. Même courbe que le balayage, plus courte. */
  transition: color 0.4s var(--rh-hover-sweep-ease, ease-out);
}
.rh-hero-archive__bouton > .gspb-buttonbox:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.rh-hero-archive__bouton svg {
  flex: none;
}

/* ST-TRA-067 — encadré au-dessus du titre (« Coming Soon » sur Bureaux), 20 px au-dessus du titre.
 * ST-TRA-073 (suite, demande d'Etienne du 03/11/2026) : identique à la pastille orange
 * « Information » de l'accueil (Greenshift `gsbp-880896d`, relevée le 03/11) : fond palette-color-1,
 * texte blanc 14 px / 400, 5 × 9 px, coins 50 px, sans bordure. Remplace la pilule rose à bordure
 * orange du 29/10 (lecture littérale de la demande de Laurent). */
.rh-hero-archive__encadre {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 20px;
  padding: 5px 9px;
  border-radius: 50px;
  background: var(--theme-palette-color-1, #F54E16);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.rh-hero-archive__photos {
  overflow: hidden;
}

/* --- Ordinateur : côte à côte --- */
@media (min-width: 1000px) {
  .rh-hero-archive__contenu {
    min-height: calc(100vh - var(--header-height, 120px));
    min-height: calc(100svh - var(--header-height, 120px));
  }

  .rh-hero-archive__texte {
    width: calc(50% - 20px);
    padding-block: clamp(24px, 5vh, 48px);   /* même règle que rh-hero-hauteur.css */
  }

  .rh-hero-archive__photos {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 20px);
    right: 0;
  }
}

/* --- Tablette et mobile : empilé --- */
@media (max-width: 999.98px) {
  .rh-hero-archive {
    padding-top: 80px;
  }

  .rh-hero-archive__contenu {
    flex-direction: column;
  }

  .rh-hero-archive__texte {
    align-items: center;
    padding-block: 0 80px;
    text-align: center;
  }

  .rh-hero-archive__encadre,
  .rh-hero-archive__bouton {
    align-self: center;
  }

  .rh-hero-archive__titre {
    margin-bottom: 50px;
    /* « Appartements » est UN mot : à 45 px il fait 347 px, plus large que la colonne de 330 px
     * d'un écran de 375 px (mesuré le 30/09). Le grand titre de « Le quartier », lui, passe à la
     * ligne entre ses mots. On borne la taille à 11 % de la largeur d'écran. */
    font-size: clamp(32px, 11vw, 45px);
  }

  .rh-hero-archive__photos {
    position: relative;
    height: 600px;
  }
}

@media (max-width: 689.98px) {
  .rh-hero-archive__photos {
    height: 400px;
  }
}