/* =========================================================
   HTAG — PAGE D'ACCUEIL (maison mère)
   01 hero · 02 références · 03 offre HTAG Créatif
   04 portes des pôles · 05 contact · 06 mobile
   ========================================================= */

/* ---------- 01 — HERO ---------- */
.hero{
  min-height:92svh; display:flex; align-items:center;
  padding-top:calc(var(--entete) + 36px); padding-bottom:48px;
}
.hero__grille{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
  width:min(100% - 32px, var(--large)); margin-inline:auto;
}
.hero h1{ margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:var(--violet); }
.hero__texte > p{ color:var(--acier); font-size:17px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__devise{
  margin-top:28px; font-size:13.5px; letter-spacing:.06em; color:var(--acier);
  display:flex; align-items:center; gap:10px;
}
.hero__devise::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:2px; }

/* panneau de verre : mosaïque de photos de terrain, une par pôle */
.hero__panneau{ padding:14px; position:relative; }
.mosaique{
  display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:1fr 1fr;
  gap:10px; aspect-ratio:5/4;
}
.mosaique__case{
  position:relative; overflow:hidden; border-radius:calc(var(--rayon) - 8px);
  border:1px solid var(--verre-bord);
}
.mosaique__case--grande{ grid-row:span 2; }
.mosaique__case img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transition:transform var(--lent);
}
.mosaique__case:hover img{ transform:scale(1.04); }
.mosaique__case::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(4,18,28,.85));
}
.mosaique__case span{
  position:absolute; left:12px; bottom:10px; z-index:1;
  font-weight:600; font-size:13px; color:var(--brume);
}
.mosaique__case span::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:8px; vertical-align:1px; background:var(--teinte);
}
.mosaique__case.p--media{ --teinte:var(--vert); }
.mosaique__case.p--creatif{ --teinte:var(--violet); }
.mosaique__case.p--academie{ --teinte:var(--brume); }
.hero__legende{
  display:flex; align-items:center; gap:10px;
  padding:14px 8px 4px; font-size:13px; color:var(--acier);
}
.hero__legende i{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- 02 — RÉFÉRENCES ---------- */
.references{
  padding:26px 0; border-block:1px solid var(--verre-bord);
  background:rgba(255,255,255,.02);
}
.references .enveloppe{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.references__tete h2{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--acier); font-weight:600; }
.references__tete p{ font-size:14px; color:var(--acier); margin-top:4px; }
.references__tete b{ color:var(--accent); font-size:18px; font-weight:700; }
.references__liste{ display:flex; flex-wrap:wrap; gap:8px 10px; flex:1; }
.references__liste li{
  font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--verre-bord); background:var(--verre-fond);
}

/* ---------- 03 — OFFRE HTAG CRÉATIF ---------- */
.offre{ --accent:var(--violet); --accent-clair:var(--violet-clair); }
.offre__grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.offre__carte{ padding:0; display:flex; flex-direction:column; }
.offre__photo{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 30%; }
.offre__corps{ padding:20px 20px 24px; }
.offre__corps h3{ margin-bottom:8px; }
.offre__corps p{ color:var(--acier); font-size:14.5px; }

.parcours{
  list-style:none; margin-top:22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.parcours li{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; border-radius:var(--rayon-s);
  border:1px dashed var(--verre-bord);
}
.parcours b{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--violet); color:var(--nuit-900); font-size:14px;
}
.parcours span{ font-size:14.5px; color:var(--acier); }
.parcours strong{ color:var(--brume); font-weight:600; display:block; }
.offre__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- 04 — PORTES DES PÔLES ---------- */
.portes{ padding:32px 0 40px; }
.portes__piste{
  display:flex; gap:16px; height:64svh; min-height:480px; max-height:640px;
  width:min(100% - 32px, 1340px); margin-inline:auto;
}
.porte{
  position:relative; overflow:hidden; flex:1 1 0;
  border-radius:26px; border:1px solid var(--verre-bord);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; text-align:left; color:inherit;
  transition:flex-grow var(--lent), border-color var(--moyen), transform var(--moyen);
  background:
    linear-gradient(180deg, rgba(4,18,28,.25) 0%, rgba(4,18,28,.55) 40%, rgba(4,18,28,.94) 78%),
    var(--photo, none) center 30% / cover no-repeat,
    var(--nuit-800);
}
.porte:hover,.porte:focus-visible{ flex-grow:1.85; border-color:var(--teinte); }
.porte::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 420px at 50% 118%,
             color-mix(in srgb, var(--teinte) 38%, transparent), transparent 66%);
  opacity:.5; transition:opacity var(--lent);
}
.porte:hover::before,.porte:focus-visible::before{ opacity:1; }
.porte::after{
  content:""; position:absolute; right:-70px; top:-60px; width:300px; height:300px;
  background:var(--filigrane) center/contain no-repeat;
  opacity:.06; transition:opacity var(--lent), transform var(--lent);
}
.porte:hover::after{ opacity:.2; transform:translate(-14px,10px) rotate(-6deg); }

.porte > *{ position:relative; z-index:1; }
.porte__logo{ width:56px; height:56px; margin-bottom:auto; }
.porte__role{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teinte); margin-bottom:8px; }
.porte__nom{ font-weight:700; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em; }
.porte__verbe{ font-weight:700; font-size:12.5px; letter-spacing:.22em; color:var(--teinte); margin-top:6px; }
.porte__detail{ margin-top:12px; }
.porte__detail p{ color:#d7e3e9; font-size:14.5px; }
.porte__liste{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height var(--lent), opacity var(--moyen);
}
.porte:hover .porte__liste,.porte:focus-visible .porte__liste{ max-height:160px; opacity:1; }
.porte__liste li{
  font-size:12.5px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--verre-bord); color:#cddbe2;
}
.porte__entrer{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-weight:600; font-size:14px; color:var(--teinte);
}
.porte__entrer i{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--teinte); font-style:normal; font-size:13px;
}

.porte--creatif{ --teinte:var(--violet); --filigrane:url("../assets/logos/creatif.svg"); --photo:url("../assets/photos/haguina-03-800.webp"); }
.porte--media{ --teinte:var(--vert); --filigrane:url("../assets/logos/media.svg"); --photo:url("../assets/photos/musique-01-800.webp"); }
.porte--academie{ --teinte:var(--brume); --filigrane:url("../assets/logos/academie.svg?v=2"); --photo:url("../assets/photos/commune-05-800.webp"); }
.porte--academie:hover::after{ opacity:.13; }

.exemple{ margin-top:18px; padding:22px 26px; }
.exemple p{ font-size:15px; color:var(--acier); max-width:none; }
.exemple b{ color:var(--brume); }
.exemple .fleche{ color:var(--accent); }

/* ---------- 05 — CONTACT ---------- */
.contact{
  padding:40px; display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;
}
.contact__texte p{ color:var(--acier); margin-top:12px; }
.contact__actions .btn{ width:100%; padding:17px 26px; font-size:16px; }
.contact__actions dl{ margin-top:22px; display:grid; gap:12px; }
.contact__actions dl div{ display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07); }
.contact__actions dt{ font-size:13px; color:var(--acier); }
.contact__actions dd{ font-weight:600; font-size:15px; text-align:right; }
.contact__actions dd a:hover{ color:var(--accent-clair); }

/* ---------- 06 — MOBILE ---------- */
@media (max-width:1100px){
  .offre__grille{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1000px){
  .hero__grille{ grid-template-columns:1fr; gap:30px; }
  .hero{ min-height:auto; padding-bottom:36px; }
  .contact{ grid-template-columns:1fr; padding:28px 22px; gap:24px; }
}
@media (max-width:900px){
  .parcours{ grid-template-columns:1fr; gap:10px; }
  .portes__piste{ flex-direction:column; height:auto; min-height:0; max-height:none; gap:12px; }
  .porte:hover{ flex-grow:1; }
  .porte{ flex:none; min-height:0; padding:22px; }
  .porte__logo{ width:44px; height:44px; margin-bottom:72px; }
  .porte__liste{ display:none; }
  .porte__entrer{ margin-top:12px; }
  .mosaique__case span{ font-size:11.5px; left:10px; right:8px; }
}
@media (max-width:640px){
  .hero__actions .btn,.offre__actions .btn{ width:100%; }
  .offre__grille{ grid-template-columns:1fr 1fr; gap:10px; }
  .offre__corps{ padding:14px 14px 16px; }
  .offre__corps p{ display:none; }
  .offre__corps h3{ font-size:15.5px; margin:0; }
  .mosaique{ aspect-ratio:4/3; }
  .references .enveloppe{ gap:14px; }
  .references__liste li{ font-size:13px; padding:6px 12px; }
}