/* ==================================================================== *
 * Page particuliers : héros à côté de la photo et bandeau de prix de
 * « Ce que comprend ». « Monter d'un niveau » et la FAQ par thème sont
 * dans hoummi-sections.css, partagée avec l'accueil pros.
 * Chargée après hoummi-branches.css, qu'elle surcharge sans le modifier :
 * les autres pages gardent leur héros plein cadre.
 * ==================================================================== */

/* --- Héros : le texte ne passe plus sur la photo ----------------------
 * Deux colonnes sur fond beige, le texte à gauche et le carrousel à
 * droite ; les quatre chiffres courent sous les deux. Plus de voile ni
 * d'ombre portée : le texte est sur un aplat, son contraste est acquis. */

.hm-hero--cote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: 1fr auto;
  align-items: stretch;
  column-gap: clamp(28px, 4vw, 72px);
  background: var(--hm-beige);
  padding: clamp(24px, 4vh, 48px) var(--g) clamp(28px, 4vh, 48px);
}

.hm-hero--cote .hm-hero__voile { display: none; }

.hm-hero--cote .hm-hero__media {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  min-height: clamp(360px, 62vh, 720px);
  overflow: hidden;
  /* Ni la réserve de parallaxe (116 %) ni le décalage de hoummi-scroll.js :
     la photo est cadrée dans sa colonne, elle n'a plus à glisser. */
  height: auto;
  top: 0;
  transform: none !important;
  will-change: auto;
}

.hm-hero--cote .hm-hero__in {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: clamp(24px, 4vh, 56px) 0;
}

.hm-hero--cote h1,
.hm-hero--cote .hm-hero__sous,
.hm-hero--cote .hm-preuve__n,
.hm-hero--cote .hm-preuve__l {
  text-shadow: none;
}

.hm-hero--cote h1 { color: var(--hm-noir); }

.hm-hero--cote .hm-hero__sous { color: var(--hm-encre-douce); }

.hm-hero__prix {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--hm-noir);
}

.hm-hero__prix strong { font-weight: 700; }

.hm-hero--cote .hm-hero__actions { margin-bottom: 0; }

.hm-hero--cote .hm-hero__preuves {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: clamp(24px, 4vh, 44px);
}

@media (max-width: 960px) {
  .hm-hero--cote {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .hm-hero--cote .hm-hero__media {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .hm-hero--cote .hm-hero__in {
    grid-row: 2;
    padding: 28px 0 0;
  }

  .hm-hero--cote .hm-hero__preuves { grid-row: 3; }
}

/* --- Ce que comprend : le prix, en une ligne -------------------------- */

.hm-prix-bande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 44px);
  padding: 20px clamp(20px, 2.4vw, 32px);
  background: var(--hm-vert);
  color: var(--hm-noir);
}

.hm-prix-bande__t {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.4;
}

.hm-prix-bande__t strong {
  font-weight: 700;
  font-size: 1.3em;
  white-space: nowrap;
}

.hm-prix-bande__a {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}