/* Composant 4 : le métier phare. Une bobine d'étiquettes se déroule sur la table ;
   les onglets amènent devant le visiteur l'étiquette d'exemple de chaque secteur. */
.metier { max-width: 1440px; margin: 0 auto; padding: var(--espace-9) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-9) max(var(--espace-7), env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espace-7); align-items: center; border-top: 1px solid var(--filet); }
.metier h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.metier__chapo { margin: 22px 0 0; max-width: 34em; font-size: 18px; line-height: 28px; }

/* Onglets : le pinceau bleu se peint sous le secteur choisi, comme dans l'en-tête. */
.metier__onglets { display: flex; gap: 28px; margin-top: 36px; border-bottom: 1px solid var(--filet); }
.metier__onglets button { position: relative; padding: 0 0 14px; background: none; border: 0; font: inherit; font-family: var(--font-titre); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--texte-doux); cursor: pointer; }
.metier__onglets button[aria-selected="true"] { color: var(--texte); }
.metier__onglets button::after { content: ""; position: absolute; left: -5px; right: -7px; bottom: -6px; height: 12px; background: url(/assets/img/pinceau-bleu.webp) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; visibility: hidden; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.55s; }
.metier__onglets button[aria-selected="true"]::after { transform: scaleX(1); visibility: visible; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.metier__onglets button:hover { color: var(--texte); }
.metier__panneau { min-height: 84px; margin-top: 18px; }
.metier__panneau p { margin: 0; max-width: 34em; font-size: 17px; line-height: 26px; }
.metier__lien { display: inline-block; margin-left: 4px; color: var(--accent); font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
.metier__lien::after { content: " →"; }
.metier .devis { margin-top: 28px; }

.metier__scene { position: relative; aspect-ratio: 1.45; }
.metier__scene canvas, .metier__repli { position: absolute; inset: 0 calc(-1 * var(--espace-7)) 0 -24px; width: calc(100% + 24px + var(--espace-7)); height: 100%; }
.metier__repli { object-fit: cover; max-width: none; }   /* même cadre que la bobine 3D (sinon img { max-width: 100% } le rétrécit) */
.metier__scene.a-3d .metier__repli { opacity: 0; }
/* Téléphone : la bobine 3D, montée après l'affichage de la page, remplace la photo en fondu (metier.js). */
.metier__scene.fondu canvas { opacity: 0; transition: opacity 0.6s ease; }
.metier__scene.fondu .metier__repli { transition: opacity 0.6s ease; }
.metier__scene.fondu.a-3d canvas { opacity: 1; }
.metier__note { position: absolute; left: 0; bottom: -28px; margin: 0; font-size: 13px; line-height: 18px; color: var(--texte-doux); }

@media (max-width: 1000px) {
  .metier { grid-template-columns: 1fr; gap: var(--espace-5); padding: var(--espace-8) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .metier__scene { order: -1; aspect-ratio: 1.3; }
  .metier__scene canvas, .metier__repli { inset: 0 -16px; width: calc(100% + 32px); }
  .metier__onglets { gap: 20px; overflow-x: auto; }
  .metier__onglets button { font-size: 19px; white-space: nowrap; }
  .metier__scene { margin-bottom: 30px; }
  .metier__note { bottom: -30px; font-size: 12.5px; }
}