/* =========================================================
   Royale Extermination — Page Équipe (equipe.php)
   Styles propres à cette page uniquement.
   ========================================================= */

:root{
  --eq-rouge:        #e11611;
  --eq-rouge-clair:  #ff342f;
  --eq-noir:         #1a1a1a;
  --eq-noir-pur:     #000000;
  --eq-gris-fonce:   #363636;
  --eq-gris-clair:   #ececec;
  --eq-gris-texte:   #707070;
  --eq-blanc:        #ffffff;
  --eq-radius:       15px;
}

/* ---------- Bouton générique (namespacé pour ne pas toucher .btn-soumission) ---------- */
.eq-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; line-height:24px;
  text-align:center;
  padding:9px 15px;
  border:4px solid transparent;
  border-radius:var(--eq-radius);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.eq-btn--red{
  background:var(--eq-rouge);
  border-color:var(--eq-rouge);
  color:var(--eq-blanc);
}
.eq-btn--red:hover,
.eq-btn--red:focus-visible{
  background:var(--eq-blanc);
  color:var(--eq-rouge);
}
.eq-btn--lg{ padding:14px 40px; }

/* =========================================================
   INTRO
   ========================================================= */
.intro{
  padding:120px 120px 360px;
  text-align:center;
}
.intro__title{
  max-width:960px; margin:0 auto;
  font-size:56px; line-height:1.1; font-weight:800;
  color:var(--eq-noir-pur);
}
.intro__title span{ color:var(--eq-rouge); }

.intro__text{
  max-width:1040px; margin:32px auto 0;
  font-size:21px; line-height:1.4; font-weight:300;
  color:var(--eq-noir-pur);
}

/* =========================================================
   BANDE ROUGE + PHOTO D'ÉQUIPE
   ========================================================= */
.band{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--eq-rouge);
  padding:0 120px 120px;
  overflow:visible; /* style.css met overflow:hidden sur tous les <section> du site,
                        ce qui coupait la photo qui chevauche volontairement vers le haut */
}
.band__triangle{
  position:absolute;
  left:0; bottom:0;
  width:1246px; max-width:65%;
  height:auto;
  z-index:1;
  pointer-events:none;
}
.band__photo{
  position:relative; z-index:3;
  align-self:center;
  width:100%; max-width:1440px;
  margin:-311px auto 0;
  height:620px;
  border-radius:16px;
  overflow:hidden;
}
.band__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 8%;
}
.band__cols{
  position:relative; z-index:2;
  align-self:center;
  width:100%; max-width:1440px;
  margin:80px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  color:var(--eq-blanc);
  font-size:16px; line-height:1.4; font-weight:500;
}
.band__cols p{ margin:0; }

/* =========================================================
   CARROUSEL ÉQUIPE
   ========================================================= */
.eq-carousel{
  padding:120px 0;
  display:flex; flex-direction:column; align-items:center; gap:40px;
  overflow:hidden;
}
.eq-carousel__viewport{
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
}
.eq-carousel__track{
  display:flex;
  gap:40px;
  height:420px;
  will-change:transform;
  margin:0;
}
.eq-member{
  flex:none;
  width:340px;
  display:flex; flex-direction:column; align-items:center; gap:0;
  text-align:center;
  color:var(--eq-noir-pur);
}
.eq-member__photo{
  width:236px; height:236px; margin-bottom: 15px;
  border-radius:50%;
  object-fit:cover;
}
.eq-member__name{
  font-size:24px; line-height:24px; font-weight:800;
  margin:0;
}
.eq-member__role{
  margin-top:8px;
  font-size:18px; line-height:24px; font-weight:500;
}
.eq-member__bio{
  margin-top:16px;
  font-size:16px; line-height:1.4; font-weight:500;
}

.eq-carousel__fade{
  position:absolute; top:0;
  width:120px; height:420px;
  pointer-events:none;
}
.eq-carousel__fade--left{
  left:0;
  background:linear-gradient(to right, var(--eq-blanc), rgba(255,255,255,0));
}
.eq-carousel__fade--right{
  right:0;
  background:linear-gradient(to left, var(--eq-blanc), rgba(255,255,255,0));
}

.eq-carousel__controls{
  display:flex; align-items:center; gap:16px;
}
.eq-ctrl{
  width:48px; height:48px;
  padding:0; border:0; background:none;
  border-radius:24px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.eq-ctrl img{ width:48px; height:48px; display:block; }
.eq-ctrl--pause{
  background:var(--eq-rouge);
  gap:4px;
}
.eq-ctrl__bar{
  width:4px; height:16px;
  background:var(--eq-blanc);
  border-radius:2px;
}
.eq-ctrl__play{
  display:none;
  width:0; height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid var(--eq-blanc);
  margin-left:3px;
}
.eq-ctrl--pause.is-paused .eq-ctrl__bar{ display:none; }
.eq-ctrl--pause.is-paused .eq-ctrl__play{ display:block; }

/* =========================================================
   FAITES PARTIE DE L'ÉQUIPE
   ========================================================= */
.join{
  position:relative; z-index:2;
  background:var(--eq-gris-clair);
  min-height:520px;
  padding:0 120px;
  display:grid;
  grid-template-columns:585px 1fr;
  gap:120px;
  overflow: visible;
  z-index: 9;
}
.join__media{ position:relative; }
.join__media img{
  position:absolute;
  top:-48px; left:0;
  width:585px; height:640px;
  max-width:none;
  object-fit:contain;
  object-position:bottom center;
}
.join__body{
  align-self:center;
  padding:64px 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
}
.join__title{
  font-size:56px; line-height:1.2; font-weight:800;
  color:var(--eq-noir-pur);
  margin:0;
}
.join__text{
  max-width:calc(100% - 160px);
  font-size:18px; line-height:1.2; font-weight:500;
  color:var(--eq-noir-pur);
  margin:0;
}
.join__body .eq-btn{ margin-top:16px; }

/* =========================================================
   BANDE BD + FACEBOOK
   ========================================================= */
.eq-comic{
  position:relative; z-index:10;
  background:var(--eq-rouge);
  overflow:hidden;
}
.eq-comic__strip{
  height:46.25vw;
  max-height:888px;
  min-height:300px;
  overflow:hidden;
}
.eq-comic__strip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.eq-comic__social{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:40px 15px;
  color:var(--eq-blanc);
  font-size:24px; line-height:24px; font-weight:800;
  text-align:center;
}
.eq-comic__social img{ width:36px; height:38px; display:block; }
.eq-comic__social:hover span{ text-decoration:underline; }

/* =========================================================
   FORMULAIRE DE CANDIDATURE
   ========================================================= */
.apply{
  padding:120px 240px 0 240px;
  display:flex; flex-direction:column; align-items:center; gap:64px;
  text-align:center;
}
.apply__title{
  font-size:56px; line-height:1.1; font-weight:800;
  color:var(--eq-noir-pur);
  margin:0;
}
.apply__sub{
  max-width:900px; margin:24px auto 0;
  font-size:18px; line-height:1.4; font-weight:500;
  color:var(--eq-noir-pur);
}

.eq-jotform{
  width:100%; max-width:1040px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1500px){
  .intro{ padding-left:64px; padding-right:64px; }
  .band{ padding-left:64px; padding-right:64px; }
  .band__photo{ height:520px; margin-top:-260px; }
  .join{ padding-left:64px; padding-right:64px; }
  .apply{ padding:120px 64px; }
}

/* Le duo colonne fixe 585px + texte 1fr devient trop à l'étroit avant même
   le breakpoint 1200px (le titre à 56px se met à wrapper mot par mot) —
   on bascule en une colonne plus tôt, à 1450px. */
@media (max-width:1450px){
  .join{
    grid-template-columns:1fr;
    gap:0;
  }
  .join__media{ height:420px; }
  .join__media img{
    top:-40px; height:480px; width:auto;
    left:50%; transform:translateX(-50%);
  }
  .join__body{ padding-bottom:64px; }
  .join__text{ max-width:100%; }
  .join__title{ font-size:44px; }
}

@media (max-width:1200px){
  .intro__title{ font-size:44px; }
  .intro__text{ font-size:19px; }
  .band__cols{ gap:48px; }

  .apply__title{ font-size:44px; }
}

@media (max-width:860px){
  .intro{ padding:64px 24px 220px; }
  .intro__title{ font-size:25px; }
  .intro__title span{ font-size:34px; }
  .intro__text{ font-size:17px; margin-top:24px; }

  .band{ padding:0 24px 64px; }
  .band__photo{ height:320px; margin-top:-160px; border-radius:12px; }
  .band__cols{
    grid-template-columns:1fr;
    gap:24px; margin-top:48px;
  }
  .band__triangle{ max-width:90%; opacity:.9; }

  .eq-carousel{ padding:64px 0; gap:32px; }

  .join{ padding:0 24px; }
  .join__title{ font-size:32px; }
  .join__media{ height:300px; }
  .join__media img{ top:-30px; height:360px; }

  .eq-comic__social{ font-size:19px; padding:28px 15px; }

  .apply{ padding:64px 24px; gap:40px; }
  .apply__title{ font-size:32px; }
  .apply__sub{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .eq-carousel__track{ transition-duration:.01ms !important; }
}