/* carrieres.css — PROMETI */

/* ── Titre hero ── */
.hero-title .section-title-accent{ color:var(--blue); }

@keyframes leadFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.hero-lead{
  opacity:0;
  animation:leadFadeUp .55s .12s cubic-bezier(.22,1,.36,1) both;
  min-height:1.5em;
  contain:layout style;
}
.hero-lead-2{
  opacity:0;
  animation:leadFadeUp .55s .25s cubic-bezier(.22,1,.36,1) both;
  min-height:1.5em;
  contain:layout style;
}

/* ══════════════════════════════════════════════════
   STATS STRIP — sous le hero
   ══════════════════════════════════════════════════ */
.car-stats-strip{
  background:#28405c;
  border-top:1px solid rgba(14,165,233,0.20);
  border-bottom:1px solid rgba(14,165,233,0.12);
  padding:0;
  position:relative; overflow:hidden;
}
.car-stats-strip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 120% at 50% 0%, rgba(14,165,233,0.07), transparent 65%);
}
.car-stats-inner{
  display:flex; align-items:stretch; justify-content:center;
  width:min(1100px,92%); margin:0 auto; position:relative; z-index:1;
}
.car-stat{
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:36px 24px; text-align:center; position:relative;
  transition:background .22s ease;
}
.car-stat:hover{ background:rgba(14,165,233,0.05); }
.car-stat:not(:last-child){
  border-right:1px solid rgba(14,165,233,0.14);
}
.car-stat-num{
  font-family:var(--font-display); font-size:clamp(32px,3.5vw,46px);
  font-weight:900; color:#fff; line-height:1;
  text-shadow:0 0 28px rgba(14,165,233,0.35);
}
.car-stat-num sup{ font-size:52%; vertical-align:super; color:var(--blue); }
.car-stat-lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.48);
}

/* ══════════════════════════════════════════════════
   SLIDER MÉTIERS — style immersif panel gauche
   ══════════════════════════════════════════════════ */
.metier-slider{
  position:relative; margin-top:44px;
  height:490px; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 72px rgba(0,0,0,.28);
}
.metier-slides{ position:absolute; inset:0; }

.metier-slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .60s ease;
}
.metier-slide.active{ opacity:1; pointer-events:auto; }

.metier-slide-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  transition:transform 7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.metier-slide.active .metier-slide-img{ transform:scale(1); }

/* Panel centré verticalement, ancré à gauche */
.metier-slide-panel{
  position:absolute;
  left:18px; top:56px; bottom:56px;
  width:48%;
  background:linear-gradient(135deg, #3e84ba 0%, #2e6ca0 55%, #225888 100%);
  padding:38px 42px;
  display:flex; flex-direction:column;
  z-index:2;
  border-radius:14px;
  box-shadow:0 16px 56px rgba(0,0,0,.50);
}

.metier-slide-num{
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:18px;
}
.metier-slide-title{
  font-size:clamp(22px,2.2vw,32px); font-weight:700;
  color:#ffffff; margin:0 0 18px; line-height:1.18;
  letter-spacing:-.025em;
  position:relative; display:block;
}
.metier-slide-title::after{
  content:'';
  position:absolute; left:0; bottom:-5px;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--blue), #60c0ff);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .50s cubic-bezier(.22,1,.36,1);
}
.metier-slide-panel:hover .metier-slide-title::after{
  transform:scaleX(1);
}
.metier-slide-desc{
  font-size:15px; line-height:1.82;
  color:#ffffff !important;
  margin:0; flex:1;
  text-align:justify;
  overflow:hidden;
}
.metier-slide-footer{
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  margin-top:28px;
}
.metier-slide-logo{
  height:44px; width:auto; max-width:200px;
  opacity:1; object-fit:contain; display:block;
}
.metier-slide-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff; background:transparent;
  font-size:13px; font-weight:600; letter-spacing:.03em;
  text-decoration:none; white-space:nowrap;
  transition:background .25s ease, border-color .25s ease;
}
.metier-slide-btn:hover{ background:var(--blue); border-color:var(--blue); }

/* Navigation — pill centré verticalement côté droit */
.metier-nav{
  position:absolute;
  right:28px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:10px; z-index:3;
  background:rgba(10,18,36,.82); backdrop-filter:blur(14px);
  padding:12px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
}
.metier-prev,.metier-next{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.65); padding:0; font-size:16px;
  transition:color .20s ease;
}
.metier-prev:hover,.metier-next:hover{ color:#fff; }
.metier-dots{ display:flex; gap:8px; align-items:center; }
.metier-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,.32); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.metier-dot.active{ background:#fff; transform:scale(1.35); }

@media(max-width:960px){
  .metier-slide-panel{ width:60%; padding:32px 28px; }
  .metier-slider{ height:400px; }
}

@media(max-width:768px){
  .metier-slider{ height:530px; border-radius:14px; }
  .metier-slide-panel{
    left:12px; right:12px; top:auto; bottom:14px;
    width:auto; height:68%; border-radius:12px;
    padding:28px 28px;
  }
  .metier-nav{
    top:auto; bottom:20px; right:50%;
    transform:translateX(50%);
  }
}
@media(max-width:640px){
  .metier-slide-panel{ width:100%; background:linear-gradient(135deg, #3e84ba 0%, #2e6ca0 55%, #225888 100%); }
  .metier-slider{ height:480px; }
  .metier-slide-footer{ flex-direction:column; align-items:flex-start; }
}

/* ══════════════════════════════════════════════════
   TIMELINE HORIZONTALE — Comment nous rejoindre (v4 restructurée)
   Structure : 1 rangée de dots + 1 rangée de cartes — aucune ligne continue
   ══════════════════════════════════════════════════ */
.car-timeline{ margin-top:60px; }

/* ── Rangée des icônes ── */
.car-tl-dots-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-bottom:24px;
}

/* Chaque cellule centre son dot et dessine ses demi-segments via ::before/::after.
   La ligne de gauche va du bord de colonne au bord du cercle (- rayon - 8px gap).
   La ligne de droite va du bord du cercle (+ rayon + 8px gap) au bord de colonne.
   Les deux moitiés de deux colonnes adjacentes se rejoignent exactement à la frontière de colonne,
   formant un segment continu qui ne touche jamais aucun cercle. */
.car-tl-dot-wrap{
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  position:relative; padding:10px 0;
}
/* Demi-segment GAUCHE — aligné sur le centre du cercle (padding-top 10px + rayon 30px) */
.car-tl-dot-wrap:not(:first-child)::before{
  content:""; position:absolute;
  left:0; right:calc(50% + 38px);
  top:40px; height:1px;
  background:rgba(14,165,233,0.32);
}
/* Demi-segment DROIT — aligné sur le centre du cercle */
.car-tl-dot-wrap:not(:last-child)::after{
  content:""; position:absolute;
  left:calc(50% + 38px); right:0;
  top:40px; height:1px;
  background:rgba(14,165,233,0.32);
}

/* Cercle icône */
.car-tl-dot{
  width:60px; height:60px; border-radius:50%;
  background-color:#f7f9fc;
  background-image:linear-gradient(0deg,rgba(14,165,233,0.12),rgba(14,165,233,0.12));
  border:1.5px solid rgba(14,165,233,0.40);
  display:flex; align-items:center; justify-content:center; color:var(--blue);
  position:relative; z-index:1;
  transition:background-image .26s ease, border-color .26s ease, transform .26s ease, box-shadow .26s ease;
}
.car-tl-dot-wrap:hover .car-tl-dot{
  background-image:linear-gradient(0deg,rgba(14,165,233,0.22),rgba(14,165,233,0.22));
  border-color:var(--blue);
  transform:scale(1.08);
  box-shadow:0 0 28px rgba(14,165,233,0.26);
}
.car-tl-dot svg{
  width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:filter .26s ease;
}
.car-tl-dot-wrap:hover .car-tl-dot svg,
.car-tl-dot-wrap.tl-active .car-tl-dot svg{ filter:drop-shadow(0 0 7px rgba(14,165,233,0.65)); }

/* Dot activé via hover de la carte correspondante */
.car-tl-dot-wrap.tl-active .car-tl-dot{
  background-image:linear-gradient(0deg,rgba(14,165,233,0.24),rgba(14,165,233,0.24));
  border-color:var(--blue);
  transform:translateY(-4px) scale(1.10);
  box-shadow:0 8px 28px rgba(14,165,233,0.32);
}

/* ── Flèche sous l'icône ── */
@keyframes car-arrow-bob{
  0%,100%{ transform:translateY(0);   opacity:.72; }
  50%     { transform:translateY(5px); opacity:1;   }
}
.car-tl-arrow{
  display:flex; justify-content:center;
  margin-top:7px;
  color:var(--blue);
  animation:car-arrow-bob 1.9s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(14,165,233,0.55));
  opacity:.72;
  transition:opacity .24s ease, filter .24s ease;
}
.car-tl-dot-wrap:hover .car-tl-arrow,
.car-tl-dot-wrap.tl-active .car-tl-arrow{
  opacity:1;
  animation-play-state:paused;
  filter:drop-shadow(0 0 7px rgba(14,165,233,0.90));
}

/* ── Rangée des cartes ── */
.car-tl-cards-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

/* Carte */
.car-tl-card{
  position:relative; overflow:hidden; width:100%;
  background:linear-gradient(135deg, #3e84ba 0%, #2e6ca0 55%, #225888 100%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px; padding:26px 22px; text-align:center;
  transition:border-color .26s ease, box-shadow .26s ease, transform .26s ease;
}
.car-tl-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue),var(--blue-light));
  border-radius:18px 18px 0 0;
  transform:scaleX(0); transform-origin:center;
  transition:transform .34s ease;
}
.car-tl-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(14,165,233,0.06) 0%,transparent 65%);
}
.car-tl-card:hover,
.car-tl-card.tl-active{
  border-color:rgba(14,165,233,0.38); transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(14,165,233,0.13);
}
.car-tl-card:hover::before,
.car-tl-card.tl-active::before{ transform:scaleX(1); }

.car-tl-title{
  font-family:'DM Sans',var(--font-body); font-size:16px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.08em; margin:0;
}
.car-tl-title::after{
  content:""; display:block; width:52px; height:1.5px; border-radius:999px;
  background:linear-gradient(90deg,
    rgba(14,165,233,0.05) 0%,
    var(--blue) 30%,
    var(--blue) 70%,
    rgba(14,165,233,0.05) 100%
  );
  box-shadow:0 0 7px rgba(14,165,233,0.42);
  margin:13px auto 17px;
}
.car-tl-desc{
  font-family:'DM Sans',var(--font-body); font-size:14px; line-height:1.82;
  color:#f0f8ff !important; margin:0;
  text-align:left !important;
  overflow-wrap:break-word;
}

/* ══════════════════════════════════════════════════
   CONTACT GRID
   ══════════════════════════════════════════════════ */
.carrieres-contact-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:24px; margin-top:36px;
}
.carrieres-contact-card{
  display:flex; flex-direction:row; align-items:flex-start; gap:20px;
  height:100%; background:#28405c;
  border:1px solid rgba(14,165,233,0.18); border-radius:20px;
  padding:28px 30px; text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.carrieres-contact-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue),var(--blue-light));
  border-radius:20px 20px 0 0;
}
.carrieres-contact-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 55% at 85% 5%, rgba(14,165,233,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.carrieres-contact-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 54px rgba(14,165,233,0.14);
  border-color:rgba(14,165,233,0.42);
}
.carrieres-contact-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px;
  background:rgba(14,165,233,0.10); border:1px solid rgba(14,165,233,0.22);
  color:var(--blue); flex-shrink:0;
}
.carrieres-contact-icon svg{ width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.carrieres-contact-body{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.carrieres-contact-label{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(148,163,184,0.65); }
.carrieres-contact-val{ font-size:18px; font-weight:700; color:#fff; line-height:1.4; }
.carrieres-contact-val-sub{ font-size:15px; font-weight:500; color:rgba(255,255,255,0.50); line-height:1.4; }
.carrieres-contact-hint{
  font-size:12.5px; font-weight:700; color:var(--blue);
  display:flex; align-items:center; gap:5px;
  margin-top:10px; padding-top:12px;
  border-top:1px solid rgba(14,165,233,0.12);
  transition:gap .20s var(--ease);
}
.carrieres-contact-card:hover .carrieres-contact-hint{ gap:9px; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width:1024px){
  .car-accordion{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  /* Timeline → empilement vertical */
  .car-tl-dots-row{ grid-template-columns:1fr; gap:16px; }
  .car-tl-dot-wrap::before, .car-tl-dot-wrap::after{ display:none; }
  .car-tl-dot{ width:50px; height:50px; }
  .car-tl-dot svg{ width:18px; height:18px; }
  .car-tl-cards-row{ grid-template-columns:1fr; gap:16px; }
  .car-tl-card{ text-align:left; }
  .car-tl-desc{ text-align:left !important; }
}
.about > .container > .panel:last-of-type{ padding-bottom:60px; }

@media (max-width:640px){
  .car-accordion{ grid-template-columns:1fr; }
  .carrieres-contact-grid{ grid-template-columns:1fr; }
  .car-stats-inner{ flex-wrap:wrap; }
  .car-stat{ flex:0 0 calc(50% - 1px); border-right:none !important; border-bottom:1px solid rgba(14,165,233,0.14); padding:16px 0; }
  .car-stat:last-child{ border-bottom:none; }
  .car-acc-title{ white-space:normal; }
  .car-tl-card{ text-align:left; }
  .car-tl-desc{ text-align:left !important; }
  .about > .container > .panel:last-of-type{ padding-bottom:40px; }
}