/* --- En-tête ------------ */
.header--inner{
  background:rgba(11,13,23,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}

/* --- Bandeau de tête de page -------------------------------------------- */
.page-hero{
  position:relative;padding-block:150px clamp(52px,7vw,84px);
  background:var(--dark);color:var(--txt-on-dark);overflow:hidden;
}
.page-hero__veil{position:absolute;inset:0;background:
  radial-gradient(760px 440px at 82% 8%,rgba(111,146,220,.22),transparent 62%),
  radial-gradient(680px 460px at 6% 92%,rgba(62,94,171,.26),transparent 60%);
  pointer-events:none;
}
.page-hero .container{position:relative;z-index:2}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:.35em;font-weight:800}
.page-hero .lead{color:var(--txt-on-dark-mute)}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}

.stat-tile{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(8px);
}
.stat-tile__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.stat-tile__num{
  font-size:2rem;font-weight:800;line-height:1;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-tile__lbl{display:block;margin-top:6px;font-size:.82rem;color:var(--txt-on-dark-mute)}

/* --- Projets ------------------------------------------------------------- */
.projects-head{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:38px}
.projects-head .lead{margin:0;max-width:56ch}

.project{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-lg);
  padding:30px;margin-block:22px;box-shadow:0 20px 60px -30px rgba(11,13,23,.35);
}
.project__head{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.project__title{font-size:1.3rem;margin:0;color:var(--txt-on-light);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.project__year{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  padding:.34em .7em;border-radius:8px;
  background:var(--accent-grad);color:#fff;
  position:relative;top:-2px;
}
.project__type{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--accent)}
/* badge affiché seulement si le projet n'est pas encore en service ;
   ambre plutôt que rouge : c'est une information, pas une alerte */
.project__status{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.3em .7em;border-radius:999px;
  background:rgba(224,168,58,.14);color:#8a6212;
  border:1px solid rgba(224,168,58,.4);
  position:relative;top:-2px;white-space:nowrap;
}
.project__desc{color:var(--txt-on-light-mute);margin-bottom:20px;max-width:70ch}
.project__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.project__meta .tag{background:rgba(62,94,171,.09)}

/* presentation images logiciels */
.fan{
  --card-w:clamp(210px,26vw,300px);
  --card-h:calc(var(--card-w) * 0.72);
  position:relative;
  min-height:calc(var(--card-h) + 60px);
  display:flex;justify-content:center;align-items:center;
  padding:20px 0 40px;
}
.fan__card{
  position:relative;
  width:var(--card-w);height:var(--card-h);
  border-radius:16px;overflow:hidden;
  background:#141414;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 44px -18px rgba(11,13,23,.55);
  cursor:zoom-in;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,opacity .3s ease,filter .3s ease;
  transform-origin:50% 100%;
  margin-left:calc(var(--card-w) * -0.55);
}
.fan__card:first-child{margin-left:0}
.fan__card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fan__card--portrait img{object-position:top}

.fan__card:nth-child(1){transform:rotate(-9deg) translateY(6px);z-index:1}
.fan__card:nth-child(2){transform:rotate(0deg)  translateY(-10px);z-index:3}
.fan__card:nth-child(3){transform:rotate(9deg)  translateY(6px);z-index:2}
.fan__card:nth-child(4){transform:rotate(15deg) translateY(20px);z-index:1}

.fan:hover .fan__card{opacity:.7;filter:saturate(0.8)}
.fan__card:hover,.fan__card:focus-visible{
  transform:rotate(0deg) translateY(-24px) scale(1.06);
  opacity:1;filter:none;z-index:5;
  box-shadow:0 32px 60px -22px rgba(62,94,171,.55);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,6,10,.94);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  padding:60px 20px 90px;
}
.lightbox.is-open{display:flex}
.lightbox__stage{
  position:relative;width:100%;max-width:1400px;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:pan-y;
}
.lightbox__slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(40px);
  transition:opacity .28s ease,transform .28s ease;
  pointer-events:none;
}
.lightbox__slide.is-active{opacity:1;transform:none;pointer-events:auto}
.lightbox__slide img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.75);
  user-select:none;-webkit-user-drag:none;
}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  color:#e0e2ea;font-size:.9rem;letter-spacing:.02em;
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s ease,transform .2s ease;
}
.lightbox__nav:hover{background:var(--accent-grad);border-color:transparent;transform:translateY(-50%) scale(1.06)}
.lightbox__nav svg{width:22px;height:22px}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}
.lightbox__close{
  position:absolute;top:16px;right:16px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s ease;
}
.lightbox__close:hover{background:rgba(224,56,74,.85);border-color:transparent}
.lightbox__dots{
  position:absolute;bottom:56px;left:0;right:0;display:flex;justify-content:center;gap:8px;
}
.lightbox__dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);border:0;cursor:pointer;
  transition:background-color .2s ease,transform .2s ease;
}
.lightbox__dots button.is-active{background:#fff;transform:scale(1.35)}
body.lb-open{overflow:hidden}

@media (max-width:640px){
  .lightbox__nav{width:44px;height:44px}
  .lightbox__nav--prev{left:10px}
  .lightbox__nav--next{right:10px}
}

/* --- Carrière -------------------------------------- */
.career{position:relative;list-style:none;padding:0;margin:0;max-width:900px}
.career::before{
  content:"";position:absolute;left:14px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2),transparent);
}
.career__item{position:relative;padding:0 0 34px 52px}
.career__item:last-child{padding-bottom:0}
.career__dot{
  position:absolute;left:6px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-grad);box-shadow:0 0 0 4px rgba(62,94,171,.15);
}
.career__when{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:600}
.career__role{font-size:1.15rem;font-weight:700;margin:.2em 0 .1em;color:var(--txt-on-light)}
.career__where{color:var(--txt-on-light-mute);font-size:.95rem;margin-bottom:.6em}
.career__desc{color:var(--txt-on-light-mute);font-size:.96rem;margin-bottom:.5em}
.career__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6em}
.career__pills .tag{font-size:.72rem;padding:.32em .7em}

/* --- Compétences ------------------------------------ */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.skills-col{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:28px 26px;
}
.skills-col h3{font-size:1.05rem;margin:0 0 18px;display:flex;align-items:center;gap:10px;color:var(--txt-on-dark)}
.skills-col h3 svg{width:22px;height:22px;color:var(--accent-2);flex:none}
.skill{margin-bottom:14px}
.skill:last-child{margin-bottom:0}
.skill__row{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:6px;color:var(--txt-on-dark)}
.skill__bar{height:6px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.skill__fill{
  height:100%;background:var(--accent-grad);border-radius:3px;
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.skill.in-view .skill__fill{transform:scaleX(var(--v,1))}

/* --- CV --------------------------------------------------- */
.doc-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-lg);
  padding:26px 28px;margin-top:36px;
}
.doc-cta__icon{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:grid;place-items:center;background:var(--accent-grad);color:#fff;
}
.doc-cta__icon svg{width:26px;height:26px}
.doc-cta__body{flex:1;min-width:220px}
.doc-cta__title{font-size:1.05rem;font-weight:700;margin:0 0 4px;color:var(--txt-on-light)}
.doc-cta__meta{font-size:.85rem;color:var(--txt-on-light-mute)}

/* --- Ajout responsive --------------------------------------------------------- */
@media (max-width:820px){
  .page-hero__grid{grid-template-columns:1fr;gap:36px}

  .fan{
    --card-w:min(66vw,300px);
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:14px;
    overflow-x:auto;
    padding:14px 2px 22px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .fan__card{
    margin-left:0;
    flex:0 0 auto;
    scroll-snap-align:center;
    transform:none;
  }
  /* pas d'effet de survol au doigt */
  .fan:hover .fan__card{opacity:1;filter:none}
  .fan__card:hover,.fan__card:focus-visible{transform:none}
}

/* --- Autres outils, présentés par domaine (sans captures) ---------------- */
/* Bloc placé à l'intérieur de la section « Réalisations » : il complète les
   projets illustrés sans créer une section supplémentaire, ce qui casserait
   l'alternance clair / sombre des sections de la page. */
.toolset{
  margin-top:clamp(48px,6vw,80px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-light);
}
.toolset__intro{max-width:70ch;margin-bottom:clamp(28px,3.5vw,44px)}
.toolset__title{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0 0 .5em;color:var(--txt-on-light)}
.toolset__intro p{color:var(--txt-on-light-mute);margin:0}

.toolset__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:20px;
}
.tool{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
  padding:26px 24px;
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.tool:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px -24px rgba(35,35,35,.4);
  border-color:rgba(62,94,171,.35);
}
.tool__icon{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(62,94,171,.12),rgba(111,146,220,.12));
  color:var(--accent);
}
.tool__icon svg{width:22px;height:22px}
.tool__title{font-size:1.02rem;margin:0 0 .5em;color:var(--txt-on-light);line-height:1.3}
.tool__desc{font-size:.93rem;color:var(--txt-on-light-mute);margin:0 0 auto}
.tool__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tool__tags .tag{font-size:.72rem;padding:.32em .7em;background:rgba(62,94,171,.09)}