/* Concept « Le nuancier » : les métiers comme un éventail d'échantillons */

.heros--nuancier { display: grid; align-items: center; }
.heros__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; }

/* L'éventail */
.eventail { position: relative; height: min(42rem, 76svh); --ecart: 1; --ferme: 1; --lame: clamp(6.5rem, 8.6vw, 9.25rem); }
.lame {
  --n: 0;
  position: absolute; left: 40%; bottom: 3%;
  width: var(--lame); height: 90%;
  display: flex; flex-direction: column;
  background: var(--platre); color: var(--encre); text-decoration: none;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .35);
  transform-origin: 50% calc(100% - 2.1rem);
  transform: rotate(calc(var(--a) * var(--ecart) * var(--ferme, 1))) translateY(var(--leve, 0));
  transition: transform .8s var(--sortie), box-shadow .8s var(--sortie);
  animation: deploie 1.7s var(--sortie) backwards;
  animation-delay: calc(var(--n) * 75ms + 450ms);
}
.lame:nth-child(2) { --n: 1; } .lame:nth-child(3) { --n: 2; } .lame:nth-child(4) { --n: 3; }
.lame:nth-child(5) { --n: 4; } .lame:nth-child(6) { --n: 5; } .lame:nth-child(7) { --n: 6; } .lame:nth-child(8) { --n: 7; }
@keyframes deploie { from { transform: rotate(-36deg); } }
.lame__face { position: relative; flex: 1; overflow: hidden; background: var(--graphite); }
.lame__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.lame__face::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--reflet); }
.lame__nom { order: -2; min-height: 3.6rem; padding: .9rem .7rem .2rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-size: .8125rem; font-weight: 500; line-height: 1.25; letter-spacing: .01em; }
.lame__code { order: -1; padding: 0 .7rem .8rem; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.lame:hover, .lame:focus-visible { --leve: -1.75rem; box-shadow: 0 50px 70px -26px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .35); z-index: 2; }
.eventail__rivet {
  position: absolute; z-index: 3; left: calc(40% + var(--lame) / 2); bottom: calc(3% + 2.1rem);
  width: .95rem; height: .95rem; margin: 0 0 -.475rem -.475rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 -1px 1px rgba(0, 0, 0, .3);
}

/* Les huit métiers, rangée de lames dont une s'ouvre */
.metiers { position: relative; background: var(--nuit); }
.metiers__epingle { padding-block: clamp(5rem, 9vw, 7rem) clamp(3rem, 5vw, 4rem); }
.metiers__tete { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.metiers__aide { color: var(--texte-doux); font-size: .875rem; white-space: nowrap; }
.metiers__rangee { --onglet: 5.25rem; display: flex; gap: 0; margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Largeur des lames fermées FIXÉE : jamais déduite du contenu masqué, que Safari compte
   et que Chrome ignore (la rangée débordait de 4000 px sous WebKit). */
.metier { display: flex; min-width: 0; overflow: hidden; border-left: 1px solid var(--trait); transition: flex-grow 1s var(--sortie); flex: 0 0 calc(var(--onglet) + 1px); }
.metier:last-child { border-right: 1px solid var(--trait); flex-basis: calc(var(--onglet) + 2px); }
.metier.est-actif { flex-grow: 1; }
.metier__onglet { flex: 0 0 auto; }
.metier__onglet { margin: 0; font: inherit; letter-spacing: 0; }
.metier__onglet button {
  display: flex; flex-direction: column; width: var(--onglet); height: 100%; padding: 0;
  background: var(--platre); color: var(--encre); border: 0; cursor: pointer; text-align: left;
  transition: background-color .5s var(--sortie);
}
.metier__pastille { display: block; height: 38%; background-size: cover; background-color: var(--graphite); filter: saturate(.9); transition: filter .6s, height 1s var(--sortie); }
.metier__nom {
  flex: 1; display: flex; align-items: center; justify-content: flex-end;
  padding: 1rem 0; writing-mode: vertical-rl; transform: rotate(180deg); margin-inline: auto;
  font-size: .875rem; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
}
.metier__onglet button:hover .metier__pastille { filter: saturate(1.1) brightness(1.05); }
.metier:not(.est-actif) .metier__onglet button:hover { background: var(--blanc); }
.metier.est-actif .metier__onglet button { background: var(--accent); color: var(--sur-accent); }

.metier__corps {
  min-width: 0; overflow: hidden; flex: 1;
  display: grid; grid-template-columns: minmax(18rem, 1fr) auto; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center;
  padding-inline: clamp(1.5rem, 3vw, 3.5rem);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--sortie), visibility 0s .5s;
}
.metier.est-actif .metier__corps { opacity: 1; visibility: visible; transition: opacity .9s var(--sortie) .25s, visibility 0s; }
.metier__corps { flex: 1 1 0; }
.metier:not(.est-actif) .metier__corps { padding: 0; }
.metier__titre { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 4rem); font-weight: 200; letter-spacing: -.03em; line-height: 1.05; }
.metier__texte ul { margin-top: 1.75rem; border-top: 1px solid var(--trait); max-width: 26rem; }
.metier__texte li { padding: .7rem 0; border-bottom: 1px solid var(--trait); color: var(--texte-doux); }
.metier__media { height: clamp(20rem, calc(100svh - 21rem), 36rem); aspect-ratio: 608 / 864; overflow: hidden; border-radius: var(--rayon); background: var(--anthracite); }
.metier__media video, .metier__media img { width: 100%; height: 100%; object-fit: cover; }


@media (min-width: 64rem) {
  .metiers__epingle { height: 100svh; display: flex; flex-direction: column; padding-top: 6rem; padding-bottom: 2.5rem; }
  .metiers__tete .titre-section { font-size: clamp(2rem, .9rem + 2vw, 3.2rem); max-width: 24ch; }
  .metiers__rangee { flex: 1; min-height: 0; margin-top: 2rem; }
  .metier, .metier__corps { min-height: 0; }
  .metier__corps { align-items: stretch; padding-block: 0; grid-template-rows: minmax(0, 1fr); }
  .metier__texte { overflow: hidden; }
  .metier__texte { align-self: center; }
  /* le texte garde au moins 15rem, le film prend le reste et se recadre */
  .metier__corps { grid-template-columns: minmax(15rem, 1fr) minmax(0, 1fr); }
  .metier__titre { font-size: clamp(1.9rem, 1rem + 1.6vw, 3.2rem); hyphens: auto; -webkit-hyphens: auto; }
  .metier__media { width: 100%; height: 100%; max-height: 40rem; aspect-ratio: auto; }
}
@media (min-width: 64rem) and (max-height: 860px) {
  .metiers__epingle { padding-top: 5.25rem; padding-bottom: 1.75rem; }
  .metiers__tete .titre-section { font-size: clamp(1.8rem, .8rem + 1.6vw, 2.6rem); }
  .metiers__rangee { margin-top: 1.5rem; }
  .metier__titre { font-size: clamp(1.9rem, 1rem + 1.8vw, 2.8rem); }
  .metier__texte ul { margin-top: 1rem; }
  .metier__texte li { padding: .45rem 0; font-size: .9375rem; }
  .lien-fleche { margin-top: 1.1rem; }
}

@media (min-width: 64rem) and (max-width: 90rem) {
  .eventail { --ecart: .86; }
  .metiers__rangee { --onglet: 4.5rem; }
}
@media (min-width: 64rem) and (max-width: 80rem) {
  .eventail { height: min(34rem, 70svh); --ecart: .84; }
  .metiers__rangee { --onglet: 4rem; }
  .metier__nom { font-size: .8125rem; }
}

@media (max-width: 63.99rem) {
  .heros__grille { grid-template-columns: 1fr; }
  .eventail { height: 23rem; max-width: 24rem; width: 100%; margin: 1rem auto 0; --lame: 5.6rem; --ecart: .78; }
  .lame { left: calc(50% - var(--lame) / 2); height: 92%; }
  .lame__nom { font-size: .75rem; padding: .7rem .6rem .1rem; min-height: 3.2rem; }
  .lame__code { padding: 0 .6rem .6rem; letter-spacing: .16em; }
  .eventail__rivet { left: 50%; }
  .metiers__aide { display: none; }
  .metiers__rangee { flex-direction: column; border-top: 1px solid var(--trait); }
  .metier, .metier.est-actif { flex-direction: column; flex: none; border: 0; border-bottom: 1px solid var(--trait); }
  .metier { overflow: visible; }
  .metier__corps { flex: none; }
  .metier:last-child { border-right: 0; }
  .metier__onglet button { flex-direction: row; align-items: stretch; width: 100%; height: 4.5rem; background: transparent; color: var(--texte); }
  .metier__pastille { width: 4.5rem; height: 100%; flex: none; }
  .metier__nom { writing-mode: horizontal-tb; transform: none; justify-content: flex-start; margin: 0; padding: 0 1.25rem; font-size: 1.0625rem; font-weight: 400; white-space: normal; line-height: 1.25; }
  .metier.est-actif .metier__onglet button { background: transparent; color: var(--texte); }
  .metier.est-actif .metier__nom { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .45em; }
  .metier:not(.est-actif) .metier__onglet button:hover { background: rgba(255, 255, 255, .04); }
  .metier__corps { display: none; grid-template-columns: 1fr; padding: 1.5rem 0 2.5rem; }
  .metier.est-actif .metier__corps { display: grid; }
  .metier__titre { display: none; }
  .metier__texte ul { margin-top: 0; }
  .metier__texte li { white-space: normal; }
  .metier__media { height: auto; width: min(100%, 22rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lame { animation: none; }
}