/* =====================================================================
   COMM ONE — metiers.css · composant « Votre métier » (partagé, toutes pages)
   Liste éditoriale numérotée + grande photo révélée + fiche.
   Lecture automatique avec barre de progression, arrêt au premier geste.
   Markup : [data-metiers] > .mt-list[role=tablist] > .mt-tab  +  .mt-stage > .mt-panel
   ===================================================================== */

.mt{--mt-fg:var(--encre);--mt-mute:var(--encre-2);--mt-line:rgba(23,20,42,.12);--mt-acc:var(--accent,var(--encre));--mt-media-bg:#15121F;--mt-dur:6500ms;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);color:var(--mt-fg)}
.mt-nav{min-width:0}
.sombre .mt,.mt--dark{--mt-fg:var(--lait);--mt-mute:var(--brume);--mt-line:rgba(250,247,242,.14);--mt-acc:var(--citron)}
@media (min-width:1100px){.mt{grid-template-columns:minmax(240px,300px) 1fr;align-items:start}}

/* ── Liste des métiers ─────────────────────────────────────────────── */
.mt-list{position:relative;display:flex;flex-direction:column;counter-reset:mt}
.mt-tab{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:0 8px;width:100%;min-height:58px;padding:12px 4px;
  border-top:1px solid var(--mt-line);text-align:left;color:var(--mt-mute);-webkit-tap-highlight-color:transparent;
  transition:color var(--t-sm) var(--ease-out)}
.mt-tab:last-child{border-bottom:1px solid var(--mt-line)}
.mt-n{font:500 .8125rem/1 var(--f-chiffre);letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.8}
.mt-l{font:700 clamp(1.125rem,1rem + .5vw,1.375rem)/1.15 var(--f-titre);letter-spacing:-.01em;
  transition:transform 420ms var(--ease-out)}
.mt-o{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1 var(--f-texte);letter-spacing:.02em;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-sm) var(--ease-out),transform 320ms var(--ease-out);white-space:nowrap}
.mt-o i{width:8px;height:8px;border-radius:50%;background:var(--c,currentColor)}
.mt-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.mt-bar i{position:absolute;inset:0;background:var(--mt-acc);transform:scaleX(0);transform-origin:left}
.mt-tab:hover{color:var(--mt-fg)}
.mt-tab:hover .mt-l{transform:translateX(6px)}
.mt-tab[aria-selected="true"]{color:var(--mt-fg)}
.mt-tab[aria-selected="true"] .mt-n{color:var(--mt-acc);opacity:1}
.mt-tab[aria-selected="true"] .mt-l{transform:translateX(10px)}
.mt-tab[aria-selected="true"] .mt-o{opacity:1;transform:none}
.mt-tab[aria-selected="true"] .mt-bar i{transform:scaleX(1);transition:transform 520ms var(--ease-out)}
.mt-tab:focus-visible{border-radius:var(--r-md)}
/* lecture automatique : la barre se remplit, puis on passe au suivant */
.mt.is-auto .mt-tab[aria-selected="true"] .mt-bar i{transform:scaleX(0);animation:mtprog var(--mt-dur) linear forwards;transition:none}
.mt.is-auto.is-paused .mt-tab[aria-selected="true"] .mt-bar i{animation-play-state:paused}
@keyframes mtprog{to{transform:scaleX(1)}}

/* tablette & mobile : liste horizontale qui défile */
@media (max-width:1099px){
  .mt-list{flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 48px),transparent)}
  .mt-list::-webkit-scrollbar{display:none}
  .mt-tab{display:flex;align-items:baseline;gap:8px;width:auto;flex:none;min-height:52px;padding:12px 14px 14px;border-top:0;border-bottom:1px solid var(--mt-line);scroll-snap-align:start}
  .mt-tab:last-child{border-bottom:1px solid var(--mt-line)}
  .mt-l{font-size:1.0625rem;white-space:nowrap}
  .mt-o{display:none}
  .mt-tab:hover .mt-l,.mt-tab[aria-selected="true"] .mt-l{transform:none}
}

/* ── Scène : photo + fiche ─────────────────────────────────────────── */
.mt-stage{position:relative;display:grid;min-width:0}
.mt-panel{grid-area:1/1;display:grid;gap:clamp(20px,3vw,40px);align-items:center;min-width:0}
.mt-panel[hidden]{display:none}
@media (min-width:700px){.mt-panel{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.mt-panel:focus-visible{border-radius:var(--r-lg)}
.mt-panel.is-out{z-index:0;pointer-events:none}
.mt-panel.is-in{z-index:1}

.mt-media{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--mt-media-bg);isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(10,8,20,.55)}
@media (max-width:699px){.mt-media{aspect-ratio:4/3.4}}
.mt-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform}
.mt-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,20,0) 55%,rgba(10,8,20,.55));pointer-events:none}
.mt-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;
  font:500 .8125rem/1 var(--f-chiffre);letter-spacing:.06em;text-transform:uppercase}
.mt-cap b{font-weight:700}
.mt-cap .mt-cap-o{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-pill);background:rgba(10,8,20,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-transform:none;letter-spacing:.01em;font:600 .8125rem/1 var(--f-texte)}
.mt-cap .mt-cap-o i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.mt-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mt-who{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.mt-name{font:800 clamp(1.75rem,1.3rem + 1.8vw,2.75rem)/1.02 var(--f-titre);letter-spacing:-.025em}
.mt-k{margin-top:22px;font:500 var(--fs-label)/1.2 var(--f-chiffre);letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mute)}
.mt-txt{margin-top:10px;font-size:var(--fs-lead);line-height:1.5;max-width:30rem}
.mt-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;counter-reset:mts;width:100%;max-width:30rem}
.mt-steps li{counter-increment:mts;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--mt-line);line-height:1.4}
.mt-steps li::before{content:counter(mts,decimal-leading-zero);font:500 .8125rem/1.4 var(--f-chiffre);color:var(--mt-mute)}
.mt-gos{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.mt-go{--btn-bg:var(--c);--btn-fg:var(--c-on);--btn-ico:var(--c-on);--btn-ico-fg:var(--c)}
.mt-go.btn--secondary{--btn-bg:transparent;--btn-fg:var(--mt-fg);--btn-ico:var(--c);--btn-ico-fg:var(--c-on);padding:0 10px 0 24px}
.mt-go.btn--secondary::before{background:transparent}
.mt-go.btn--secondary:hover{color:var(--mt-fg)}
.mt-go--mail{--c:var(--encre);--c-on:var(--lait)}
.sombre .mt-go--mail{--c:var(--citron);--c-on:var(--encre)}
.mt-k--steps{margin-top:26px}
.mt-sw{display:inline-flex;gap:0;padding:4px;border-radius:var(--r-pill);background:rgba(10,8,20,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mt-sw i{width:22px;height:22px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.mt-sw i+i{margin-left:-6px}
.mt-more{margin-top:20px;color:var(--mt-mute);font-size:var(--fs-small);line-height:1.5}
.mt-more .lien,.mt-after .lien{color:var(--mt-fg)}
.mt-more .lien:hover::after{background:var(--mt-acc)}
@media (max-width:1099px){.mt-more{display:none}}
.mt-after{margin-top:clamp(24px,3vw,32px);color:var(--encre-2)}
.sombre .mt-after{color:var(--brume)}
@media (min-width:1100px){.mt-after--mobile{display:none}}

/* ── Chorégraphie (une seule fois par changement, GPU : transform/opacity/clip-path) ── */
.js-motion .mt-panel.is-in .mt-media{animation:mtreveal 900ms var(--ease-inout) both}
.js-motion .mt-panel.is-in .mt-media img{animation:mtzoom 1500ms var(--ease-out) both,mtdrift 14s ease-in-out 1500ms infinite alternate}
.js-motion .mt-panel.is-in .mt-cap{animation:mtup 600ms var(--ease-out) 520ms both}
.js-motion .mt-panel.is-in .mt-body>*{animation:mtup 640ms var(--ease-out) both;animation-delay:calc(260ms + var(--k,0)*70ms)}
.js-motion .mt-panel.is-in .mt-steps li{animation:mtup 560ms var(--ease-out) both;animation-delay:calc(460ms + var(--k,0)*60ms)}
.js-motion .mt-panel.is-out .mt-body{opacity:0;transform:translateY(-8px);transition:opacity 220ms var(--ease-in),transform 220ms var(--ease-in)}
.js-motion .mt-panel.is-out .mt-media img{transform:scale(1.1);transition:transform 900ms var(--ease-inout)}
.mt.is-paused .mt-panel.is-in .mt-media img{animation-play-state:running,paused}
@keyframes mtreveal{from{clip-path:inset(100% 0 0 0 round var(--r-lg))}to{clip-path:inset(0 0 0 0 round var(--r-lg))}}
@keyframes mtzoom{from{transform:scale(1.22)}to{transform:scale(1.04)}}
@keyframes mtdrift{from{transform:scale(1.04)}to{transform:scale(1.1) translate3d(-1.2%,-1%,0)}}
@keyframes mtup{from{opacity:0;transform:translateY(16px)}}

@media (prefers-reduced-motion:reduce){
  .mt-l,.mt-o,.mt-bar i{transition:none!important}
  .mt-media img{transform:none!important;animation:none!important}
}
html.rm .mt-panel .mt-media,html.rm .mt-panel .mt-media img,html.rm .mt-panel .mt-body>*,html.rm .mt-panel .mt-steps li,html.rm .mt-panel .mt-cap{animation:none!important}
/* sans JavaScript : tout est lisible, les uns sous les autres */
html:not(.js) .mt-panel[hidden]{display:grid}
html:not(.js) .mt-stage{gap:48px}
html:not(.js) .mt-panel{grid-area:auto}