/* =========================================================
   HTAG — PAGES DE PÔLE
   01 hero · 02 mission · 03 services · 04 preuves
   05 passerelles · 06 appel · 07 mobile
   ========================================================= */

/* ---------- 01 — HERO DE PÔLE ---------- */
.hero-pole{
  padding-top:calc(var(--entete) + 76px); padding-bottom:56px;
  position:relative;
}
.hero-pole__grille{
  width:min(100% - 40px, var(--large)); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:end;
}
.fil{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--acier); margin-bottom:26px; }
.fil a:hover{ color:var(--accent-clair); }
.fil span{ opacity:.5; }

.hero-pole h1{ margin-bottom:20px; }
.hero-pole__accroche{ font-size:18px; color:var(--acier); }
.hero-pole__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

.embleme{
  padding:26px; display:flex; flex-direction:column; gap:18px;
}
.embleme img{ width:88px; height:88px; }
.embleme__mission{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; line-height:1.32;
}
.embleme__note{ font-size:14px; color:var(--acier); }

/* ---------- 02 — MISSION EN TROIS VERBES ---------- */
.verbes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.verbes li{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.16em; padding:8px 14px; border-radius:999px;
  border:1px solid var(--verre-bord); color:var(--accent-clair);
}

/* ---------- 03 — SERVICES ---------- */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.service{
  padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform var(--vif), border-color var(--vif);
}
.service:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.service__num{
  font-family:"Poppins",sans-serif; font-weight:800; font-size:13px;
  color:var(--accent); letter-spacing:.1em;
}
.service h3{ font-size:19px; }
.service p{ color:var(--acier); font-size:15px; }

/* ---------- 04 — PREUVES / FORMATS ---------- */
.preuves{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; }
.bloc-texte{ padding:36px; }
.bloc-texte h2{ margin-bottom:18px; }
.bloc-texte p + p{ margin-top:14px; }
.bloc-texte p{ color:var(--acier); }

.liste-marquee{ display:grid; gap:12px; margin-top:24px; }
.liste-marquee + p{ margin-top:20px; }
.liste-marquee li{
  display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--brume);
}
.liste-marquee i{
  flex:0 0 auto; width:9px; height:9px; margin-top:9px; border-radius:3px;
  background:var(--accent); font-style:normal;
}

.encart{ padding:30px; display:grid; gap:18px; }
.encart h3{ font-size:20px; }
.encart p{ color:var(--acier); font-size:15px; }

/* ---------- 05 — PASSERELLES VERS LES AUTRES PÔLES ---------- */
.passerelles{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.passerelle{
  position:relative; overflow:hidden; padding:30px;
  display:flex; flex-direction:column; gap:12px;
  border-radius:var(--rayon); border:1px solid var(--verre-bord);
  background:var(--verre-fond); backdrop-filter:var(--verre-flou);
  transition:transform var(--moyen), border-color var(--moyen);
}
.passerelle:hover{ transform:translateY(-4px); border-color:var(--teinte); }
.passerelle::after{
  content:""; position:absolute; right:-50px; bottom:-50px; width:190px; height:190px;
  background:var(--filigrane) center/contain no-repeat; opacity:.1;
  transition:opacity var(--moyen);
}
.passerelle:hover::after{ opacity:.2; }
.passerelle > *{ position:relative; z-index:1; }
.passerelle img.jeton{ width:44px; height:44px; }
.passerelle b{ font-family:"Poppins",sans-serif; font-size:21px; letter-spacing:-.02em; }
.passerelle p{ color:var(--acier); font-size:15px; }
.passerelle span{ font-size:14px; color:var(--teinte); font-weight:600; }

.p--media{ --teinte:var(--vert); --filigrane:url("../assets/logos/media.svg"); }
.p--creatif{ --teinte:var(--violet); --filigrane:url("../assets/logos/creatif.svg"); }
.p--academie{ --teinte:var(--brume); --filigrane:url("../assets/logos/academie.svg"); }
.p--htag{ --teinte:var(--ciel); --filigrane:url("../assets/logos/htag.svg"); }

/* ---------- 06 — APPEL FINAL ---------- */
.appel{
  padding:52px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.appel h2{ max-width:18ch; }
.appel p{ color:var(--acier); max-width:56ch; }
.appel__actions{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }

/* ---------- 07 — MOBILE ---------- */
@media (max-width:1000px){
  .hero-pole__grille{ grid-template-columns:1fr; gap:34px; }
  .preuves{ grid-template-columns:1fr; }
  .passerelles{ grid-template-columns:1fr; }
  .appel{ padding:36px 24px; }
}