/* ==================================================================== *
 * Page « Architectes, bureaux d'études et prescripteurs »
 * (prescripteurs.html). Chargée après hoummi-branches.css,
 * hoummi-particuliers.css (héros à côté de la photo) et
 * hoummi-partenaires.css (bande de faits, cartes, bloc 3D de l'atelier).
 *
 * Mouvement : une seule courbe, `--hm-sortie` (hoummi-branches.css).
 * Tout ce qui bouge s'arrête sous `prefers-reduced-motion: reduce`.
 * ==================================================================== */

/* --- Ouverture : l'atelier en 3D porte le titre de la page ------------ *
 * Bloc .hm-po3d de hoummi-branches.css (course de la caméra) et légendes
 * de hoummi-partenaires.css. Ici, seulement l'étiquette et les boutons de
 * l'introduction. */

/* La barre est collante et occupe le flux : sans ce retrait, la scène
   démarre 61 px plus bas et le bas de l'introduction sort du premier écran.
   Elle passe sous la barre, comme une fois la page défilée. */
.hm-pr-ouverture { margin-top: calc(-1 * var(--nav, 61px)); }

.hm-pr-ouverture .hm-po3d__intro .hm-etiquette { margin-bottom: 18px; }
.hm-pr-ouverture .hm-po3d__intro { max-width: 640px; }
.hm-pr-ouverture .hm-po3d__intro .hm-titre { font-size: clamp(44px, 5.2vw, 84px); }

/* Le chapeau ne dépasse pas la moitié de la page : au-delà, il passait sur
   le bâtiment sombre de la 3D (demande de Lars du 13/11/2026). Au téléphone,
   il est masqué (voir plus bas). */
@media (min-width: 761px) {
  .hm-pr-ouverture .hm-po3d__intro .hm-chapeau { max-width: 50vw; }
}
.hm-pr-ouverture .hm-po3d__intro .hm-hero__actions { margin-top: 24px; }
.hm-pr-ouverture .hm-po3d__legende .hm-btn { margin-top: 16px; }

/* La scène apparaît en fondu quand le script l'a montée (`data-pret`),
   au lieu de surgir sur le fond vert. */
.hm-pr-ouverture .hm-po3d__canvas { opacity: 0; transition: opacity 1s var(--hm-sortie) .2s; }
.hm-pr-ouverture .hm-po3d__canvas[data-pret] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hm-pr-ouverture .hm-po3d__canvas { transition: none; }
}

/* Téléphone : le texte descend sous l'atelier ; sans le chapeau, les deux
   boutons tiennent dans le premier écran et la scène garde le haut. */
@media (max-width: 760px) {
  .hm-pr-ouverture .hm-po3d__intro .hm-chapeau { display: none; }
  .hm-pr-ouverture .hm-po3d__intro .hm-hero__actions { margin-top: 18px; }
}

/* --- Trois cartes métiers --------------------------------------------- */

.hm-pt-formules--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

/* Au survol, la flèche de chaque point avance d'un cran. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hm-pt-formules--trois .hm-apport__liste li::before {
    transition: transform .35s var(--hm-sortie);
  }
  .hm-pt-formules--trois .hm-apport__liste li:hover::before {
    transform: translate(3px, -3px);
  }
}

/* --- Répondre ensemble : le schéma « qui signe avec qui » ------------- *
 * Sans script, les trois tuiles s'affichent côte à côte et le schéma
 * reste masqué. js/hoummi-prescripteurs.js pose `.est-pret`, place les
 * étiquettes (left/top en %) et trace les traits (en px). */

.hm-gp { margin-top: clamp(28px, 3vw, 44px); }

.hm-gp:not(.est-pret) .hm-gp__onglets,
.hm-gp:not(.est-pret) .hm-gp__scene { display: none; }

.hm-gp:not(.est-pret) .hm-gp__panneaux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 991px) {
  .hm-gp:not(.est-pret) .hm-gp__panneaux { grid-template-columns: minmax(0, 1fr); }
}

.hm-gp.est-pret {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px clamp(20px, 3vw, 40px);
  align-items: stretch;
}

.hm-gp__onglets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hm-gp__onglet {
  position: relative;
  overflow: hidden;
  padding: 14px 22px;
  border: 1.5px solid var(--hm-noir);
  border-radius: var(--hm-r);
  background: transparent;
  color: var(--hm-noir);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.hm-gp__onglet:hover { background: rgba(33, 34, 33, .06); }
.hm-gp__onglet[aria-selected="true"] { background: var(--hm-noir); color: #fff; }
.hm-gp__onglet:focus-visible { outline: 2px solid var(--hm-vert-profond); outline-offset: 3px; }

/* Jauge du défilement automatique : elle se remplit sous l'onglet actif
   tant que le schéma avance seul, et disparaît dès qu'on le manipule. */
.hm-gp__onglet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--hm-vert);
  transform: scaleX(0);
  transform-origin: left center;
}

.hm-gp.est-auto .hm-gp__onglet[aria-selected="true"]::after {
  animation: hm-gp-jauge var(--hm-gp-cycle, 6s) linear both;
}

@keyframes hm-gp-jauge { to { transform: scaleX(1); } }

.hm-gp__scene {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--hm-beige);
  border-radius: var(--hm-r);
  overflow: hidden;
}

.hm-gp__n {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: 21%;
  padding: 12px 8px;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid rgba(33, 34, 33, .2);
  border-radius: var(--hm-r);
  text-align: center;
  transform: translate(-50%, -50%);
  transition:
    left .85s var(--hm-sortie),
    top .85s var(--hm-sortie),
    opacity .4s ease,
    transform .5s var(--hm-sortie);
}

.hm-gp__n b {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-noir);
}

.hm-gp__n small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--hm-encre-douce);
}

.hm-gp__n small:empty { display: none; }

.hm-gp__n--mo { width: 30%; border-color: var(--hm-noir); }
.hm-gp__n--hoummi { background: var(--hm-vert); border-color: var(--hm-vert); }
.hm-gp__n--hoummi small { color: var(--hm-noir); }
.hm-gp__n--eg { background: var(--hm-noir); border-color: var(--hm-noir); }
.hm-gp__n--eg b,
.hm-gp__n--eg small { color: #fff; }

.hm-gp__n.est-cache {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  pointer-events: none;
}

/* Hoummi se signale d'un anneau à chaque changement de configuration. */
.hm-gp__n--hoummi::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(78, 181, 137, .55);
  pointer-events: none;
}

.hm-gp[data-anneau="1"] .hm-gp__n--hoummi::after { animation: hm-gp-anneau 1.1s ease-out .75s; }
.hm-gp[data-anneau="2"] .hm-gp__n--hoummi::after { animation: hm-gp-anneau-bis 1.1s ease-out .75s; }

@keyframes hm-gp-anneau { to { box-shadow: 0 0 0 16px rgba(78, 181, 137, 0); } }
@keyframes hm-gp-anneau-bis { to { box-shadow: 0 0 0 16px rgba(78, 181, 137, 0); } }

.hm-gp__cadre {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1.5px dashed rgba(33, 34, 33, .38);
  border-radius: 6px;
  transition:
    left .85s var(--hm-sortie),
    top .85s var(--hm-sortie),
    width .85s var(--hm-sortie),
    height .85s var(--hm-sortie),
    opacity .4s ease;
}

.hm-gp__cadre.est-cache { opacity: 0; }

.hm-gp__cadre-l {
  position: absolute;
  top: 0;
  left: 14px;
  padding: 0 8px;
  background: var(--hm-beige);
  transform: translateY(-50%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hm-encre-douce);
}

.hm-gp__trait {
  position: absolute;
  z-index: 1;
  width: 0;
  margin-left: -1px;
  border-left: 2px solid var(--hm-noir);
  transform-origin: top center;
  transition: transform .6s var(--hm-sortie);
}

.hm-gp__trait--tirets {
  border-left-style: dashed;
  border-left-color: var(--hm-vert-profond);
}

.hm-gp__trait.est-cache {
  transform: scaleY(0);
  transition-duration: .18s;
}

.hm-gp__trait-l {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Vert assombri : le vert profond ne fait que 3,3:1 sur le beige. */
  color: #24603f;
  transition: opacity .3s ease .35s;
}

.hm-gp__trait.est-cache .hm-gp__trait-l { opacity: 0; transition-delay: 0s; }

/* Pose initiale : rien ne glisse avant que le schéma soit à l'écran. */
.hm-gp.sans-transition .hm-gp__n,
.hm-gp.sans-transition .hm-gp__cadre,
.hm-gp.sans-transition .hm-gp__trait { transition: none; }

.hm-gp__panneaux { display: grid; }

.hm-gp.est-pret .hm-gp__p { grid-area: 1 / 1; }

/* `.hm-tuile` impose son `display`, qui l'emporte sur l'attribut `hidden`. */
.hm-gp__p[hidden] { display: none !important; }

.hm-gp.est-pret .hm-gp__p:not([hidden]) {
  animation: hm-gp-panneau .6s var(--hm-sortie) both;
}

@keyframes hm-gp-panneau { from { opacity: 0; transform: translateY(14px); } }

.hm-gp__p h3 { margin-top: 0; }

.hm-gp__ex {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  font-size: 14px;
  opacity: .85;
}

@media (max-width: 991px) {
  .hm-gp.est-pret { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  /* Trois onglets sur une ligne : jamais deux plus un. */
  .hm-gp__onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hm-gp__onglet { padding: 13px 4px; font-size: 10.5px; letter-spacing: .04em; }
  .hm-gp__n { width: 42%; padding: 10px 6px; }
  .hm-gp__n--mo { width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-gp__n,
  .hm-gp__cadre,
  .hm-gp__trait,
  .hm-gp__trait-l { transition: none; }
  .hm-gp.est-pret .hm-gp__p:not([hidden]),
  .hm-gp[data-anneau] .hm-gp__n--hoummi::after { animation: none; }
}

/* --- Documentation : quatre pièces, deux par deux --------------------- */

#documentation .hm-grille--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
  #documentation .hm-grille--duo { grid-template-columns: minmax(0, 1fr); }
}

/* --- Écorché : trois repères vers la fiche technique ------------------ *
 * Les repères apparaissent l'un après l'autre quand la figure entre à
 * l'écran (`.est-vu`, hoummi-anim.js). Sans script, ils sont là d'emblée :
 * l'état masqué n'existe que sous `.js-anim`. */

.hm-ecorche__cadre { position: relative; }
.hm-ecorche__cadre img { display: block; width: 100%; height: auto; }

.hm-ecorche__point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-11px, -50%);
  color: var(--hm-noir);
  text-decoration: none;
  transition: opacity .5s ease, transform .6s var(--hm-sortie);
  transition-delay: calc(.5s + var(--i, 0) * .18s);
}

.hm-ecorche__point--gauche {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 11px), -50%);
}

/* La pastille : un point vert cerclé de blanc, et son halo qui respire. */
.hm-ecorche__point::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--hm-vert);
  box-shadow: 0 0 0 0 rgba(78, 181, 137, .6);
  animation: hm-ecorche-halo 2.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * .5s);
}

@keyframes hm-ecorche-halo {
  0% { box-shadow: 0 0 0 0 rgba(78, 181, 137, .6); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(78, 181, 137, 0); }
}

.hm-ecorche__l {
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--hm-r);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease;
}

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

.hm-ecorche__point:hover .hm-ecorche__l,
.hm-ecorche__point:focus-visible .hm-ecorche__l { background: var(--hm-vert); }
.hm-ecorche__point:hover .hm-ecorche__l::after,
.hm-ecorche__point:focus-visible .hm-ecorche__l::after { color: var(--hm-noir); }
.hm-ecorche__point:focus-visible { outline: none; }

.js-anim .hm-ecorche:not(.est-vu) .hm-ecorche__point { opacity: 0; transform: translate(-11px, calc(-50% + 12px)); }
.js-anim .hm-ecorche:not(.est-vu) .hm-ecorche__point--gauche { transform: translate(calc(-100% + 11px), calc(-50% + 12px)); }

@media (max-width: 600px) {
  .hm-ecorche__l { padding: 6px 8px; font-size: 10px; }
  .hm-ecorche__point::before { width: 18px; height: 18px; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-ecorche__point { transition: none; }
  .hm-ecorche__point::before { animation: none; }
}

/* --- Contact ------------------------------------------------------------ */

#contact .hm-hero__actions { margin-top: 12px; }