/* =========================================================
   CITYZ'Formation CI — extra.css
   Ajouts légers par-dessus la version d'origine (style.css, rendu clair) :
   - barre de progression de lecture (validée par le client)
   - survol des cartes de contact (.cline)
   - styles de la page Recrutement (.feat-grid / .jobs)
   Chargé APRÈS style.css. N'altère pas le rendu blanc d'origine.
   ========================================================= */

:root{
  --hairline:rgba(36,31,26,.09);
  --sh-2:0 4px 10px -4px rgba(36,31,26,.10), 0 12px 28px -12px rgba(36,31,26,.16);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- barre de progression de lecture (tricolore) ---- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none}
.scroll-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),var(--green-lt),var(--green));
  box-shadow:0 0 12px -2px rgba(244,123,32,.5);transition:transform .12s linear}
.hd{transition:background .3s,box-shadow .3s}
.hd.scrolled{box-shadow:0 8px 30px -22px rgba(36,31,26,.5)}
@media(prefers-reduced-motion:reduce){.scroll-progress span{transition:none}}

/* léger resserrement du menu (5 liens + bouton) */
@media(min-width:901px){
  .menu a{padding:9px 14px}
}

/* ---- contact : les 4 cartes coordonnées bougent au survol ---- */
.cline{transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
.cline:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(62,146,69,.30)}

/* =========================================================
   PAGE RECRUTEMENT
   ========================================================= */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}

.jobs{display:flex;flex-direction:column;gap:22px}
.job-card{padding:0;overflow:hidden}
.job-top{display:flex;align-items:flex-start;gap:20px;padding:28px 32px 22px}
.job-top .ico{margin:0;flex-shrink:0}
.job-top h3{font-size:1.3rem;margin-bottom:8px;letter-spacing:-.01em}
.job-meta{display:flex;flex-wrap:wrap;gap:8px}
.job-meta .tag{background:var(--cream-2);border:1px solid var(--hairline);color:var(--green-dk);
  font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:50px;display:inline-flex;align-items:center;gap:6px}
.job-meta .tag svg{width:13px;height:13px;stroke:var(--green)}
.job-body{padding:0 32px 28px}
.job-body p{color:var(--ink-soft);margin-bottom:14px;font-size:.97rem}
.job-body h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);
  margin-bottom:10px;font-weight:700}
.job-body ul{display:grid;gap:8px;margin-bottom:20px}
.job-body ul li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.job-body ul li svg{position:absolute;left:0;top:3px;width:17px;height:17px;stroke:var(--green)}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 32px;background:linear-gradient(180deg,#fff,#faf6ee);border-top:1px solid var(--hairline)}
.job-foot .ref{font-size:.82rem;color:var(--grey)}
.job-actions{display:flex;gap:10px;flex-wrap:wrap}
.job-foot .btn{font-size:.9rem;padding:11px 20px}
@media(max-width:640px){
  .job-top{flex-direction:column;gap:14px;padding:24px 22px 18px}
  .job-body{padding:0 22px 24px}.job-foot{padding:16px 22px}
  .job-actions{width:100%}
  .job-foot .btn{width:100%;justify-content:center}
}

/* ---- galerie "Le métier en images" (fiches formation) ---- */
.fgal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 26px}
.fgal figure{margin:0;min-width:0}
.fgal .big{grid-column:span 4}
.fgal .fgal-zoom{display:block;width:100%;padding:0;border:1px solid var(--line);background:none;
  cursor:zoom-in;border-radius:12px;overflow:hidden}
.fgal .fgal-zoom:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fgal img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.fgal .big img{aspect-ratio:21/9}
.fgal figcaption{font-size:.74rem;color:var(--grey);margin-top:5px;line-height:1.4}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .fgal img{transition:transform .35s var(--ease-out)}
  .fgal .fgal-zoom:hover img{transform:scale(1.05)}
}
@media(max-width:640px){
  .fgal{grid-template-columns:repeat(2,1fr)}
  .fgal .big{grid-column:span 2}
}
/* lightbox de la galerie */
.fgal-lb{position:fixed;inset:0;z-index:400;background:rgba(20,16,12,.88);display:none;
  align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
.fgal-lb.show{display:flex}
.fgal-lb figure{max-width:min(1100px,100%);margin:0}
.fgal-lb img{display:block;max-width:100%;max-height:84vh;margin:0 auto;border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.fgal-lb figcaption{color:#fff;text-align:center;margin-top:14px;font-size:.95rem;font-weight:600}