/* ==================================================================== *
 * Page « Devenir partenaire » (devenir-partenaire.html).
 * Chargée après hoummi-branches.css, hoummi-sections.css et
 * hoummi-particuliers.css (pour le héros à côté de la photo). Le
 * formulaire reprend les champs du contact (.hm-form, .hm-champ) et les
 * étiquettes à cocher de la popup apporteurs (.hm-coche).
 * ==================================================================== */

/* --- Faits : une ligne fixe sous le héros ---------------------------- */

.hm-pt-faits {
  background: var(--hm-blanc);
  border-bottom: 1px solid var(--hm-trait);
  padding: clamp(20px, 3vw, 32px) var(--g);
}

.hm-pt-faits__l {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px clamp(16px, 2.5vw, 36px);
}

.hm-pt-faits__l li {
  display: grid;
  gap: 2px;
  padding-left: 14px;
  border-left: 2px solid var(--hm-vert);
}

.hm-pt-faits__l b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-noir);
}

.hm-pt-faits__l span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--hm-encre-douce);
}

@media (max-width: 991px) {
  .hm-pt-faits__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .hm-pt-faits__l { grid-template-columns: minmax(0, 1fr); }
}

/* --- Deux formules côte à côte --------------------------------------- */

.hm-pt-formules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 44px);
}

.hm-pt-formule {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px);
  background: var(--hm-beige);
  border-radius: var(--hm-r);
}

.hm-pt-formule--vert { background: var(--hm-vert-doux); }

.hm-pt-formule .hm-micro { margin: 0 0 8px; }
.hm-pt-formule--vert .hm-micro { color: var(--hm-noir); }

.hm-pt-formule > h3 {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hm-noir);
}

/* La liste de la section apporteurs de l'accueil, avec des h4. */
.hm-pt-formule .hm-apport__liste { margin-bottom: 20px; }
.hm-pt-formule .hm-apport__liste h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-encre);
}
.hm-pt-formule .hm-apport__liste p { color: var(--hm-encre); }
.hm-pt-formule .hm-apport__liste li,
.hm-pt-formule .hm-apport__liste li:last-child { border-color: rgba(33, 34, 33, .2); }

.hm-pt-formule__pour {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hm-encre);
}

/* Les boutons s'alignent en bas des deux cartes, quelle que soit la
   longueur des listes. */
.hm-pt-formule .hm-btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) {
  .hm-pt-formules { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .hm-pt-formule .hm-btn { align-self: stretch; justify-content: center; }
}

/* --- Usages : une rangée qui défile de côté, une vignette par page
 * solution. Le bouton « Faire défiler » vient de hoummi-defile.js
 * ([data-hm-defile]). ------------------------------------------------- */

.hm-pt-usages {
  list-style: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0 0 8px;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.hm-pt-usages > li {
  flex: 0 0 clamp(250px, 30vw, 380px);
  scroll-snap-align: start;
}

.hm-pt-usage {
  display: grid;
  gap: 6px;
  height: 100%;
  color: var(--hm-encre);
  text-decoration: none;
}

.hm-pt-usage__img {
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: var(--hm-r);
}

.hm-pt-usage__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}

.hm-pt-usage b {
  font-size: 17px;
  line-height: 1.3;
  color: var(--hm-noir);
}

.hm-pt-usage b::after {
  content: " ↗";
  color: var(--hm-vert-profond);
}

.hm-pt-usage > span:last-child {
  font-size: 15px;
  line-height: 1.5;
  color: var(--hm-encre-douce);
}

.hm-pt-usage:hover .hm-pt-usage__img img { transform: scale(1.03); }
.hm-pt-usage:hover b { text-decoration: underline; }
.hm-pt-usage:focus-visible { outline: 2px solid var(--hm-vert-profond); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hm-pt-usage__img img { transition: none; }
  .hm-pt-usage:hover .hm-pt-usage__img img { transform: none; }
}

/* --- Qui fait quoi : deux listes et une photo ------------------------ */

.hm-pt-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}

.hm-pt-roles h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--hm-noir);
}

.hm-pt-roles__img { margin: 0; }

.hm-pt-roles__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hm-r);
}

.hm-pt-roles__img figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--hm-encre-tenue);
}

@media (max-width: 991px) {
  .hm-pt-roles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-pt-roles__img { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .hm-pt-roles { grid-template-columns: minmax(0, 1fr); }
}

/* --- Atelier : invitation aux portes ouvertes ------------------------ */

/* Les légendes de la 3D (hoummi-branches.css, .hm-po3d) portent ici des
   h3 : le h2 est le titre de la section. */
.hm-pt-3d .hm-po3d__legende h3 {
  font-family: Ranua, sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--hm-noir);
  margin: 0 0 12px;
}

.hm-pt-jpo {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--hm-vert-doux);
  border-left: 3px solid var(--hm-vert-profond);
}

.hm-pt-3d .hm-pt-jpo p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
}

.hm-pt-3d .hm-pt-jpo .hm-btn { margin-top: 0; }

.hm-pt-3d .hm-pt-3d__rdv {
  margin-top: 14px;
  font-size: 14px;
  color: var(--hm-encre-douce);
}

/* --- Candidature ------------------------------------------------------ */

#candidature .hm-apport-modal__groupe { margin: 0; }
#candidature .hm-apport-modal__groupe legend span { color: var(--hm-vert-profond); }
#candidature .hm-coche--accord { margin: 0; }
.hm-apport-modal__merci:focus { outline: none; }