/* ============================================================
   METIERS PAGE — metiers-v1.css
   Page-specific styles only. Global tokens, header, footer,
   nav, btn-pds, float-menu are handled by nav-v5.css.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Variables aliases pour cette page */
:root {
  --pds-blue:        #0084BC;
  --pds-blue-bright: #27AAE1;
  --pds-blue-deep:   #00638c;
  --pds-orange:      #FF5500;
  --pds-ink:         #1c2b33;
  --pds-body:        #46555d;
  --pds-line:        #e4ebef;
  --pds-tint:        #f0f8fc;
  --pds-tint-2:      #f7fafc;
  --pds-white:       #ffffff;
  --pds-dark:        #14222b;
  --pds-gradient:    linear-gradient(270deg, #27AAE1 0%, #0084BC 100%);
  --ff-body:         'Jost', system-ui, sans-serif;
  --ff-serif:        'Libre Baskerville', Georgia, serif;
  --radius-card:     10px 10px 70px 10px;
  --radius-soft:     14px;
  --shadow-soft:     0 8px 30px rgba(0,72,104,.07);
  --container:       1200px;
  --header-h:        78px;
  --anchor-h:        52px;
}

/* ============================================================
   HERO PROGRAMME
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 42px) 0 0;
  background: var(--pds-blue-deep);
  color: #fff; overflow: hidden;
}
.hero-bg {
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  background: url("../images/paris/top/hero-image.jpg") center 35% / cover no-repeat;
}
.hero::before {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;
  background: linear-gradient(270deg, rgba(0,99,140,.80) 0%, rgba(0,132,188,.92) 100%);
  pointer-events:none;
}
.hero .container { position: relative; z-index:2; }
.hero-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 1.1rem; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5em;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:500; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.42em 1em; border-radius: 50px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hero-badge i { color:#fff; font-size:.85em; }
.hero h1 { color:#fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .25em; text-shadow: 0 2px 18px rgba(0,40,60,.35); }
.hero-rncp { font-family: var(--ff-body); font-size: 1rem; color: rgba(255,255,255,.9);
  margin-bottom: 0; padding-bottom: 2.4rem; text-shadow: 0 1px 10px rgba(0,40,60,.3); }

.hero-cta, .hero-flash {
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; width: 100vw;
}
.hero-cta {
  display:flex; flex-wrap:wrap; align-items:stretch;
  background: rgba(8,28,40,.62);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.hero-cta-inner {
  width:100%; max-width: var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:stretch;
}
.hero-cta a {
  flex:1 1 0; min-width: 220px;
  display:flex; align-items:center; justify-content:center; gap:.7em;
  padding: 1.25rem 1.5rem;
  color:#fff; font-family: var(--ff-body); font-weight:500; font-size:1rem;
  border-left: 1px solid rgba(255,255,255,.14);
  transition: background .2s, color .2s;
}
.hero-cta a:first-child { border-left: 0; }
.hero-cta a i { color: var(--pds-blue-bright); font-size:1.15em; transition: color .2s; }
.hero-cta a:hover { background: rgba(255,255,255,.96); color: var(--pds-blue); }
.hero-cta a:hover i { color: var(--pds-blue); }
@media (max-width: 720px){
  .hero-cta a { flex-basis: 100%; border-left:0; border-top:1px solid rgba(255,255,255,.12); justify-content:flex-start; }
  .hero-cta a:first-child { border-top:0; }
}
.hero-flash {
  display:flex; align-items:center; justify-content:center; gap:.6em;
  background: var(--pds-orange); color:#fff; font-weight:500; font-size:.92rem;
  padding:.7rem 1rem; text-align:center;
}

/* ============================================================
   BARRE D'ANCRES STICKY
   ============================================================ */
.anchor-bar {
  position: sticky; top: var(--header-h); z-index: 900;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pds-line);
  box-shadow: 0 4px 18px rgba(0,72,104,.05);
}
.anchor-bar ul {
  display:flex; gap:.3rem; list-style:none; margin:0; padding:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.anchor-bar ul::-webkit-scrollbar { display:none; }
.anchor-bar a {
  display:block; white-space:nowrap; padding: 1.1rem .9rem;
  font-weight:500; font-size:.93rem; color: var(--pds-body);
  border-bottom: 2px solid transparent;
}
.anchor-bar a:hover { color: var(--pds-blue); }
.anchor-bar a.active { color: var(--pds-blue); border-bottom-color: var(--pds-blue); }

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.section { padding: 80px 0; scroll-margin-top: calc(var(--header-h) + var(--anchor-h)); }
.section.tint { background: var(--pds-tint); }
.section.tint2 { background: var(--pds-tint-2); }
.sec-head { max-width: 760px; margin-bottom: 3rem; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow {
  display:inline-block; font-family: var(--ff-body); font-weight:600;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--pds-blue); margin-bottom: .8rem;
}
.sec-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.sec-head p { font-size: 1.08rem; }

/* ---- Cartes sobres ---- */
.card-pds {
  background:#fff; border:1px solid var(--pds-line);
  border-radius: var(--radius-card);
  padding: 2rem 1.9rem; height:100%;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card-pds:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: #cfe3ee; }

.grid { display:grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ---- Présentation MBA1 / MBA2 ---- */
.pres-cards { display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; margin-top:2rem; }
@media (max-width:760px){ .pres-cards{ grid-template-columns:1fr; } }
.pres-card { background:#fff; border:1px solid var(--pds-line); border-radius: var(--radius-card); padding:2rem; }
.pres-card .tag {
  display:inline-block; background: var(--pds-gradient); color:#fff;
  font-weight:600; font-size:.85rem; letter-spacing:.04em;
  padding:.4em 1em; border-radius:6px; margin-bottom:1rem;
}
.pres-card .hl { color: var(--pds-blue); font-weight:700; }

/* ---- Accordéon détails ---- */
.acc { max-width: 920px; margin:0 auto; }
.acc-item { background:#fff; border:1px solid var(--pds-line); border-radius: var(--radius-soft); margin-bottom:1rem; overflow:hidden; }
.acc-head {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family: var(--ff-serif); font-weight:700; color: var(--pds-ink); font-size:1.12rem;
  padding:1.3rem 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.acc-head:hover { color: var(--pds-blue); }
.acc-head i { color: var(--pds-blue); transition: transform .3s; flex:none; }
.acc-head { list-style:none; }
.acc-head::-webkit-details-marker { display:none; }
.acc-item[open] .acc-head i { transform: rotate(180deg); }
.acc-body { overflow:hidden; }
.acc-body-inner { padding: 0 1.6rem 1.5rem; font-size:.98rem; }

/* ---- Pop-up contact "Nous appeler" ---- */
.call-pop {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(8,22,30,.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.call-pop.open { display:flex; }
.call-card {
  position:relative; width:100%; max-width:540px;
  background: var(--pds-gradient); color:#fff; border-radius:20px;
  padding:2.4rem 2.2rem; box-shadow:0 30px 80px rgba(0,0,0,.4);
  text-align:center;
}
.call-card .close {
  position:absolute; top:14px; right:16px; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.85); font-size:1.3rem; line-height:1; padding:6px;
}
.call-card .close:hover { color:#fff; }
.call-card .cc-head { font-family: var(--ff-serif); font-size:1.25rem; margin-bottom:1.6rem; }
.call-contact { display:flex; align-items:center; gap:18px; text-align:left;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:18px 20px; }
.call-contact .ac-av { flex:none; width:58px; height:58px; border-radius:50%; background:#fff;
  color: var(--pds-blue-deep); display:grid; place-items:center; font-weight:700; font-size:1.15rem; }
.call-contact .ac-info b { display:block; color:#fff; font-size:1.1rem; line-height:1.2; }
.call-contact .ac-info .role { display:block; color:rgba(255,255,255,.85); font-size:.86rem; margin:3px 0 10px; }
.call-contact .ac-links { display:flex; flex-direction:column; gap:8px; }
.call-contact .ac-links a { display:inline-flex; align-items:center; gap:9px; color:#fff; font-size:.95rem; font-weight:500; }
.call-contact .ac-links a:hover { color:#d6f1ff; }
.call-contact .ac-links svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:480px){ .call-contact{ flex-direction:column; text-align:center; } .call-contact .ac-links{ align-items:center; } }

/* ---- CTA final (pleine largeur, style Home) ---- */
.foot-cta { background: var(--pds-gradient); color:#fff; text-align:center; padding: 70px 0; }
.foot-cta h2 { font-family: var(--ff-serif); color:#fff; font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom:.6rem; }
.foot-cta p { color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto 1.8rem; font-size:1.08rem; }
.foot-cta .btns { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.foot-cta .fbtn {
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--ff-body); font-weight:600; font-size:1rem;
  padding:.85em 1.6em; border-radius:8px; border:2px solid #fff;
  transition: background .2s, color .2s, transform .15s;
}
.foot-cta .fbtn-solid { background:#fff; color: var(--pds-blue-deep); }
.foot-cta .fbtn-solid:hover { background: var(--pds-blue-deep); color:#fff; }
.foot-cta .fbtn-ghost { background: transparent; color:#fff; }
.foot-cta .fbtn-ghost:hover { background:#fff; color: var(--pds-blue-deep); }
.cta-contact { display:inline-flex; margin: 0 auto 1.8rem; text-align:left; }

/* ---- Certifications (style Home) ---- */
.certifs { background: var(--pds-tint); padding: 54px 0; }
.certifs .inner { display:grid; grid-template-columns: auto 1fr; gap: 42px; align-items:center; }
@media (max-width:768px){ .certifs .inner{ grid-template-columns:1fr; gap:26px; } }
.certif-logos { display:flex; gap:18px; flex-wrap:wrap; }
.certif-logos .cl { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06); padding:18px 24px; display:flex; align-items:center; justify-content:center; height:116px; }
.certif-logos .cl img { max-height:78px; width:auto; display:block; }
@media (max-width:768px){ .certif-logos .cl{ height:100px; } .certif-logos .cl img{ max-height:64px; } }
.certif-text { color: var(--pds-body); line-height:1.65; font-size:.92rem; }
.certif-text strong { color: var(--pds-ink); font-weight:600; }
.certif-text .af { display:block; margin-top:12px; color: var(--pds-orange); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }

/* ---- Scroll reveal ---- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; animation: revealAuto .8s ease forwards; }
.reveal.in { opacity:1; transform:none; animation:none; }
@keyframes revealAuto { to { opacity:1; transform:none; } }

/* ============================================================
   PAGE MÉTIERS — composants spécifiques
   ============================================================ */
.fiche-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start; }
@media (max-width:760px){ .fiche-grid { grid-template-columns:1fr; } }
.fiche { background:#fff; border:1px solid var(--pds-line); border-radius: var(--radius-card); overflow:hidden; transition: box-shadow .3s, border-color .3s; }
.fiche[open] { box-shadow: var(--shadow-soft); border-color:#cfe3ee; }
.fiche > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; padding:1.25rem 1.35rem; }
.fiche > summary::-webkit-details-marker { display:none; }
.fiche-ico { flex:none; width:54px; height:54px; border-radius:14px; background: var(--pds-tint); border:1px solid #e2f0f8; display:flex; align-items:center; justify-content:center; }
.fiche-ico svg { width:26px; height:26px; stroke: var(--pds-blue); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fiche-head { flex:1; }
.fiche-head h3 { margin:0; display:block; font-family: var(--ff-serif); font-size:1.05rem; font-weight:700; color: var(--pds-ink); line-height:1.25; }
.fiche-head em { font-style:normal; color: var(--pds-blue); font-size:.85rem; }
.fiche .chev { color: var(--pds-blue); transition: transform .3s; flex:none; }
.fiche[open] .chev { transform: rotate(180deg); }
.fiche-body { padding:0 1.35rem 1.4rem; }
.fiche-body p { font-size:.92rem; color: var(--pds-body); line-height:1.6; margin:.2rem 0 0; }
.fiche-body h4 { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color: var(--pds-blue); margin:1.1rem 0 .5rem; }
.fiche-body ul { margin:0; padding-left:1.1rem; }
.fiche-body li { font-size:.9rem; color: var(--pds-body); line-height:1.5; margin-bottom:.35rem; }
.fiche-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; color: var(--pds-blue); font-weight:600; font-size:.92rem; }
.fiche-link:hover { color: var(--pds-blue-deep); }
.fiche-salary { display:flex; align-items:center; gap:.7rem; margin:1rem 0 .2rem; padding:.7rem .9rem; background: var(--pds-tint); border:1px solid #e2f0f8; border-left:4px solid #FF5500; border-radius:10px; }
.fiche-salary .fs-ico { flex:none; width:34px; height:34px; border-radius:9px; background: linear-gradient(270deg,#f50 0%,#f03 106%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.fiche-salary .fs-text { display:flex; flex-direction:column; line-height:1.25; }
.fiche-salary .fs-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#c1440e; font-weight:700; }
.fiche-salary .fs-val { font-size:.95rem; color: var(--pds-ink); font-weight:600; }
.fiche-comp { margin:.4rem 0 .2rem; padding:.9rem 1rem; background: var(--pds-tint); border:1px solid #e2f0f8; border-left:4px solid var(--pds-blue); border-radius:10px; }
.fiche-comp .fc-head { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--pds-blue-deep); font-weight:700; margin-bottom:.55rem; display:flex; align-items:center; gap:.45rem; }
.fiche-comp ul { list-style:none; margin:0; padding:0; }
.fiche-comp li { position:relative; padding-left:1.5rem; font-size:.88rem; color: var(--pds-ink); line-height:1.45; margin-bottom:.4rem; }
.fiche-comp li:last-child { margin-bottom:0; }
.fiche-comp li i { position:absolute; left:0; top:.28rem; color: var(--pds-blue); font-size:.74rem; }

/* ---- Secteurs : chips ---- */
.sector-chips { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.sector-chip { display:inline-flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--pds-line); border-radius:30px; padding:.5rem 1.1rem .5rem .5rem; font-size:.92rem; font-weight:500; color: var(--pds-ink); box-shadow:0 4px 14px rgba(13,27,36,.04); transition: box-shadow .25s, color .25s, transform .25s, border-color .25s; }
.sector-chip .sc-ico { flex:none; width:32px; height:32px; border-radius:50%; background: var(--pds-tint); border:1px solid #e2f0f8; display:flex; align-items:center; justify-content:center; }
.sector-chip .sc-ico svg { width:17px; height:17px; stroke: var(--pds-blue); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sector-chip:hover { color: var(--pds-blue-deep); border-color:#cfe3ee; box-shadow:0 10px 22px rgba(0,132,188,.14); transform: translateY(-2px); }
.sector-chip:hover .sc-ico { background: var(--pds-blue); border-color: var(--pds-blue); }
.sector-chip:hover .sc-ico svg { stroke:#fff; }
.sec-head p a { color: var(--pds-blue); font-weight:600; }
.sec-head p a:hover { color: var(--pds-blue-deep); }

/* ---- Tableau de salaires (données SR) ---- */
.sal-table-wrap { margin-top:1.7rem; overflow-x:auto; }
.sr-data { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:normal; border:0; }
.sal-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--pds-line); border-radius: var(--radius-soft); overflow:hidden; font-size:.9rem; }
.sal-table caption { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color: var(--pds-blue-deep); font-weight:700; padding:.1rem 0 .6rem; }
.sal-table th, .sal-table td { text-align:left; padding:.7rem .95rem; border-bottom:1px solid var(--pds-line); }
.sal-table thead th { background: var(--pds-tint); color: var(--pds-ink); font-weight:700; }
.sal-table tbody tr:last-child td { border-bottom:0; }
.sal-table td:last-child { font-weight:600; color: var(--pds-ink); }

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 768px){
  .section { padding: 54px 0; }
  .sec-head { margin-bottom: 2rem; }
  .hero { padding-top: calc(var(--header-h) + 30px); }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hero-rncp { padding-bottom: 1.8rem; font-size: .95rem; }
  .hero-badge { font-size: .74rem; padding: .4em .85em; }
  .hero-cta a { padding: 1rem 1.2rem; font-size: .95rem; }
  .hero-flash { font-size: .85rem; padding: .65rem .9rem; }
  .anchor-bar a { padding: .9rem .8rem; font-size: .88rem; }
}
@media (max-width: 420px){
  .hero-cta, .hero-flash { margin-left: -50vw; margin-right: -50vw; }
}