/* Section métiers (#metiers), sur fond clair après le hero noir : photo découpée (liseré, rayures, médaillon Citrail) et réponse de Citrail, sans cadre.
   data-etat (avant / actif / apres) est posé par metiers-clair.js. L'or ne marque que la source et le passage. */

#metiers{--noir:#0a0a0a;--blanc:#fafafa;--encre:#0a0a0a;--encre-2:#5c5c5c;--encre-3:#9a9a9a;--filet:#e4e4e4;--or-lisible:#7a5718;--surligne:#e2b45c99;--ease:cubic-bezier(.16,1,.3,1);;color:var(--encre);font:16px/1.55 Inter,system-ui,sans-serif}
#metiers h2,#metiers h3,#metiers p,#metiers figure,#metiers ol,#metiers blockquote{margin:0;padding:0}
#metiers ol{list-style:none}

/* Coupure franche : le hero finit sur le noir, les métiers commencent sur le blanc. */
/* Positionnée pour passer au-dessus du hero : pendant la transition, la section blanche monte comme un rideau sur les fragments. */
.mc-section{position:relative;background:var(--blanc);overflow-x:clip}
/* Les rayures se limitent à une zone derrière la photo : on devine un carré, sans voir de cadre.
   Ses bords s'estompent ; le côté droit, où l'on lit, reste blanc. */
.mc-zone-rayee{position:absolute;left:-5vw;top:-7%;bottom:-7%;width:calc(44% + 5vw);background:repeating-linear-gradient(90deg,#00000012 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 62%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.mc-plateau{min-height:100vh;min-height:100svh;max-width:1280px;margin:0 auto;padding:11vh 5vw 7vh;display:flex;flex-direction:column;gap:6vh}
/* Titre en deux tons : l'affirmation en noir, la précision en gris (4,3:1 sur le blanc). */
.mc-section h2 span{color:#7a7a7a}
.mc-section h2{max-width:26ch;font-size:var(--titre-section,clamp(30px,3.2vw,48px));font-weight:600;line-height:1.08;letter-spacing:-.035em}

.mc-scene{position:relative;height:clamp(480px,62vh,620px)}
.mc-diapo{position:absolute;inset:0;display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;pointer-events:none}
.mc-diapo[data-etat="actif"]{pointer-events:auto}

/* La photo */
.mc-portrait{display:flex;flex-direction:column;align-items:flex-start}
.mc-cadre-photo{position:relative;width:min(340px,27vw);aspect-ratio:663/699;margin-left:64px}
/* La découpe (#mc-blob) est déclarée par metiers-clair.js. Elle s'applique à l'image ; l'ombre, posée sur le conteneur, n'est donc pas découpée. */
.mc-forme{position:absolute;inset:0;z-index:1;filter:drop-shadow(0 20px 26px #00000026)}
.mc-forme img{display:block;width:100%;height:100%;object-fit:cover;clip-path:url(#mc-blob);filter:saturate(.9);transform:scale(1.1);transition:transform 2.4s var(--ease)}
.mc-lisere{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);overflow:visible;fill:none;stroke:#bdbdbd;stroke-width:1;-webkit-mask-image:linear-gradient(155deg,#000 35%,transparent 72%);mask-image:linear-gradient(155deg,#000 35%,transparent 72%)}
.mc-rayures{position:absolute;inset:6% -9% -7% 12%;clip-path:url(#mc-blob);background:repeating-linear-gradient(90deg,#00000038 0 1px,transparent 1px 5px);-webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 75%);mask-image:linear-gradient(115deg,transparent 30%,#000 75%)}
/* Le logo seul touche le bord de la photo sans s'y poser. */
.mc-medaillon{position:absolute;z-index:2;left:-46px;bottom:12%;width:58px;height:58px;display:flex}
.mc-medaillon img{width:58px;height:58px;filter:drop-shadow(0 6px 14px #00000029)}
.mc-qui{margin-top:40px;max-width:32ch}
.mc-qui h3{font-size:clamp(22px,1.9vw,28px);font-weight:600;letter-spacing:-.025em}
.mc-qui p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--encre-2)}
.mc-qui .mc-credit{margin-top:10px;font-size:10px;color:var(--encre-3)}

/* La réponse de Citrail, posée sur la page, sans cadre : question, signature, réponse, passage cité. */
.mc-lecture-corps{display:flex;flex-direction:column;gap:14px}
.mc-question{font-size:clamp(16px,1.3vw,18px);line-height:1.45;color:var(--encre-2)}
.mc-question::before{content:"«\00a0"}
.mc-question::after{content:"\00a0»"}
.mc-signature{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--encre-2)}
.mc-reponse{font-size:clamp(24px,2.2vw,32px);line-height:1.25;letter-spacing:-.03em}
.mc-reponse strong{font-weight:650}
.mc-passage{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--surligne)}
.mc-passage p{font-size:16px;line-height:1.5}
.mc-passage cite{display:block;margin-top:6px;font:12px/1.4 "IBM Plex Mono",monospace;font-style:normal;color:var(--encre-2)}
.mc-passage .mc-ref{color:var(--or-lisible)}
.mc-passage mark{color:inherit;background:linear-gradient(var(--surligne),var(--surligne)) no-repeat 0 55%/0% 80%;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Mouvement horizontal : ce qui part s'efface vite, ce qui arrive glisse ; puis réponse, passage et surlignage. */
.mc-portrait,.mc-lecture{opacity:0;transition:opacity .25s,transform .6s var(--ease)}
.mc-diapo[data-etat="avant"] .mc-portrait{transform:translateX(-70px)}
.mc-diapo[data-etat="avant"] .mc-lecture{transform:translateX(-40px)}
.mc-diapo[data-etat="apres"] .mc-portrait{transform:translateX(70px)}
.mc-diapo[data-etat="apres"] .mc-lecture{transform:translateX(110px)}
.mc-diapo[data-etat="actif"] .mc-portrait,.mc-diapo[data-etat="actif"] .mc-lecture{opacity:1;transform:none;transition:opacity .6s,transform .9s var(--ease)}
.mc-diapo[data-etat="actif"] .mc-portrait{transition-delay:.1s}
.mc-diapo[data-etat="actif"] .mc-lecture{transition-delay:.15s}
.mc-diapo[data-etat="actif"] .mc-forme img{transform:none}
.mc-reponse,.mc-passage{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease)}
.mc-diapo[data-etat="actif"] .mc-reponse{opacity:1;transform:none;transition-delay:.45s}
.mc-diapo[data-etat="actif"] .mc-passage{opacity:1;transform:none;transition-delay:.7s}
.mc-diapo[data-etat="actif"] .mc-passage mark{background-size:100% 80%;transition:background-size .7s var(--ease) 1.05s}


/* Les métiers, avec le temps restant avant le suivant. */
.mc-metiers-nav ol{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.mc-metiers-nav li{position:relative;border-top:2px solid var(--filet)}
.mc-metiers-nav li i{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--encre)}
.mc-metiers-nav li[data-etat="avant"] i{width:100%}
.mc-metiers-nav li[data-etat="actif"] i{width:calc(var(--progres,0) * 100%)}
.mc-metiers-nav button{width:100%;padding:10px 0 0;border:0;background:none;color:var(--encre-3);font:12.5px/1.3 Inter,sans-serif;text-align:left;cursor:pointer}
.mc-metiers-nav li[data-etat="actif"] button{color:var(--encre)}
.mc-metiers-nav button:hover{color:var(--encre-2)}
.mc-metiers-nav button:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

@media (max-width:900px){
  .mc-plateau{padding:8vh 5vw 6vh;gap:4vh}

  .mc-scene{display:grid;height:auto}
  .mc-diapo{position:relative;inset:auto;grid-area:1/1}
  .mc-zone-rayee{top:-14px;bottom:auto;height:170px;width:calc(100% + 10vw)}
  .mc-diapo{grid-template-columns:1fr;gap:26px;align-content:start}
  .mc-portrait{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center}
  .mc-cadre-photo{width:112px;margin-left:36px}
  .mc-lisere{inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}
  .mc-medaillon{width:34px;height:34px;left:-27px}
  .mc-medaillon img{width:34px;height:34px}
  .mc-qui{margin-top:0}
  .mc-qui h3{font-size:20px}
  .mc-qui p{font-size:14px}
  .mc-qui .mc-credit{display:none}
  /* Sur mobile, les noms disparaissent mais chaque barre reste une cible tactile (le nom reste lu par les lecteurs d'écran). */
  .mc-metiers-nav button{font-size:0;height:28px;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .mc-portrait,.mc-lecture,.mc-reponse,.mc-passage,.mc-forme img,.mc-diapo[data-etat="actif"] .mc-passage mark,.mc-diapo[data-etat="actif"] .mc-portrait,.mc-diapo[data-etat="actif"] .mc-lecture{transition:none}
}