/*
  Déclinaisons éditoriales du hub Groupe Roux recrute.
  Chargé après hub.css : ce fichier ne touche ni aux offres ni à leur détail.
*/

.hub-xd:not(.hub-offers):not(.hub-detail) {
  --hub-black: #101010;
  --hub-orange: #ff7600;
  --hub-radius: 9px;
  --hub-space: clamp(72px, 10vw, 154px);
  color: var(--hub-black);
}

.hub-xd:not(.hub-offers):not(.hub-detail) .section {
  border-top: 0;
  padding-block: var(--hub-space);
}

.hub-xd:not(.hub-offers):not(.hub-detail) main > .section:has(.section-head) {
  counter-increment: none;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .section-head {
  max-width: 720px;
  margin-bottom: clamp(34px, 5vw, 72px);
}

.hub-xd:not(.hub-offers):not(.hub-detail) .section-head .eyebrow::before,
.hub-xd:not(.hub-offers):not(.hub-detail) .eyebrow::before {
  content: "";
  width: 36px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--hub-orange);
}

.hub-xd:not(.hub-offers):not(.hub-detail) .eyebrow {
  color: var(--hub-orange);
  font-size: .78rem;
  letter-spacing: .16em;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero {
  padding-block: 70px;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero::before {
  display: none;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero--simple {
  background: #f7f7f5;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero--simple .container {
  display: block;
  max-width: 1050px;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero--simple h1 {
  max-width: 900px;
  font-size: clamp(34px, 3.5vw, 56px);
  letter-spacing: -.035em;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .hero--simple .lead {
  max-width: 720px;
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
}

/* Accueil */
.hub-home .hero--cover {
  min-height: clamp(500px, 50vw, 720px);
  margin: 0 3.7%;
  border-radius: var(--hub-radius);
  display: grid;
  align-items: end;
  background-color: #101010;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .56) 49%, rgba(0, 0, 0, .22) 100%), url("assets/hub/hero-offres.webp");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: clamp(56px, 6vw, 96px) 0;
}

.hub-home .hero--cover .hero__media { display: none; }
.hub-home .hero--cover .container { max-width: 1280px; text-align: left; margin-inline: auto; }
.hub-home .hero--cover .container > div { max-width: 790px; }
.hub-home .hero--cover .eyebrow,
.hub-home .hero--cover .actions { justify-content: flex-start; }
.hub-home .hero--cover .eyebrow { color: #fff; }
.hub-xd.hub-home .hero--cover h1 { max-width: 700px; font-size: clamp(38px, 4.1vw, 64px); letter-spacing: -.035em; }
.hub-home .hero--cover .tagline { max-width: 650px; font-size: clamp(1.28rem, 2vw, 1.72rem); }
.hub-home .hero--cover .lead { margin-inline: 0; max-width: 710px; }

.hub-home #valeurs { padding-block: clamp(42px, 5vw, 76px); background: #101010; color: #fff; }
.hub-home .values-band { gap: clamp(20px, 3vw, 48px); }
.hub-home .values-band > div { border-left: 0; padding-left: 0; }
.hub-home .values-band__word { color: var(--hub-orange); font-size: clamp(1.5rem, 2vw, 2rem); }
.hub-home .values-band p:not(.values-band__word) { color: rgba(255,255,255,.72); }
.hub-home .values-band .text-link { color: #fff; border-color: var(--hub-orange); }

.hub-home #votre-domaine .grid { gap: 14px; }
.hub-home #votre-domaine .card { min-height: 180px; padding: 24px; border: 1px solid #dedede; border-radius: var(--hub-radius); background: #fff; box-shadow: none; }
.hub-home #votre-domaine .card h3 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); }
.hub-home #votre-domaine .card:hover { border-color: var(--hub-black); background: var(--hub-black); color: #fff; transform: translateY(-3px); }
.hub-home #votre-domaine .card:hover h3 { color: #fff; }
.hub-home #votre-domaine .card:hover .text-link { color: var(--hub-orange); }

.hub-home #groupe { background: #f5f5f2; }
.hub-home .stats { gap: 12px; }
.hub-home .stat { padding: clamp(20px, 2.4vw, 36px); border: 1px solid #e2e2df; border-radius: var(--hub-radius); background: #fff; }
.hub-home .stat__value { color: var(--hub-black); font-size: clamp(3rem, 5vw, 5.3rem); letter-spacing: -.065em; }
.hub-home .stat__label { font-size: 1rem; font-weight: 700; }
.hub-home .stat__note { margin-top: 10px; }

.hub-home #parcours { background: #fff; }
.hub-home #parcours .portrait { border: 0; border-radius: var(--hub-radius); overflow: hidden; background: #f5f5f2; box-shadow: none; }
.hub-home #parcours .portrait .image-placeholder { margin: 0; width: 100%; background: #e9e9e5; }
.hub-home #parcours .portrait > :not(.image-placeholder) { margin-inline: 20px; }
.hub-home #parcours .portrait .actions { margin: 4px 20px 22px; }
.hub-home #parcours .portrait__who { margin-top: 14px; }

.hub-home #recrutement { background: #101010; color: #fff; }
.hub-home #recrutement .section-head p { color: rgba(255,255,255,.74); }
.hub-home #recrutement .eyebrow { color: var(--hub-orange); }
.hub-home #recrutement .search-block { background: #fff; color: var(--hub-black); border: 0; border-radius: var(--hub-radius); box-shadow: none; }
.hub-home #recrutement .offers { margin-top: 38px; border-top-color: rgba(255,255,255,.22); }
.hub-home #recrutement .offer { border-bottom-color: rgba(255,255,255,.22); }
.hub-home #recrutement .offer__company { color: var(--hub-orange); }
.hub-home #recrutement .offer__meta { color: rgba(255,255,255,.7); }
.hub-home #recrutement .offer .button { color: #fff; border-color: #fff; }
.hub-home #recrutement .section-actions .button { background: var(--hub-orange); border-color: var(--hub-orange); color: #101010; }

.hub-home #histoire { padding-block: clamp(82px, 12vw, 180px); }
.hub-home #histoire .split { align-items: center; }
.hub-home #histoire .image-placeholder { border-radius: var(--hub-radius); overflow: hidden; box-shadow: none; background: #ecece8; }
.hub-home #frise { background: #f5f5f2; }
.hub-home #agenda { background: #fff; }
.hub-home #agenda .card { border-radius: var(--hub-radius); border: 1px solid #e3e3df; box-shadow: none; }
.hub-home #entreprises { padding-block: clamp(38px, 5vw, 70px); background: var(--hub-orange); }
.hub-home #entreprises .eyebrow { color: #101010; }
.hub-home #entreprises .chips li { border-radius: 999px; border-color: #101010; background: transparent; color: #101010; }

/* Métiers */
.hub-xd:not(.hub-offers):not(.hub-detail) #domaines { background: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter {
  grid-template-columns: minmax(250px, 1fr) minmax(0, 1.65fr);
  gap: clamp(46px, 8vw, 128px);
  padding-block: clamp(64px, 9vw, 128px);
  border-top: 1px solid #e5e5e2;
}

.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__number { color: var(--hub-orange); font-size: clamp(3.6rem, 6vw, 6.8rem); letter-spacing: -.06em; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__aside h2 { font-size: clamp(1.7rem, 2.8vw, 2.8rem); letter-spacing: -.04em; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__meta li { border-top: 0; padding: 0; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__meta li span:first-child { color: var(--hub-orange); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__body .image-placeholder { border-radius: var(--hub-radius); background: #ededeb center / cover no-repeat; box-shadow: none; overflow: hidden; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__body .image-placeholder > span { border: 0; background: rgba(255,255,255,.88); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(1) .image-placeholder { background-image: url("assets/hub/chantier.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(2) .image-placeholder { background-image: url("assets/hub/maconnerie.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(3) .image-placeholder { background-image: url("assets/hub/construction.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(4) .image-placeholder { background-image: url("assets/hub/electricite.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(5) .image-placeholder { background-image: url("assets/hub/transport.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter:nth-of-type(6) .image-placeholder { background-image: url("assets/hub/conduite.webp"); }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__body .postes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hub-xd:not(.hub-offers):not(.hub-detail) .chapter__body .postes li { border: 1px solid #dedede; border-radius: 7px; padding: 11px 13px; }

/* Valeurs, témoignages et réalisations */
.hub-xd:not(.hub-offers):not(.hub-detail) #valeurs .values { gap: 16px; }
.hub-xd:not(.hub-offers):not(.hub-detail) #valeurs .values > div { padding: 30px; border: 1px solid #e1e1de; border-radius: var(--hub-radius); background: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) #valeurs .values > div::before { color: var(--hub-orange); }
.hub-xd:not(.hub-offers):not(.hub-detail) #engagements { background: #101010; color: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) #engagements .section-head p { color: rgba(255,255,255,.72); }
.hub-xd:not(.hub-offers):not(.hub-detail) #direction,
.hub-xd:not(.hub-offers):not(.hub-detail) #histoire { background: #f5f5f2; }
.hub-xd:not(.hub-offers):not(.hub-detail) .orgchart li { border: 0; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #e2e2df; }
.hub-xd:not(.hub-offers):not(.hub-detail) .orgchart li:first-child { background: var(--hub-orange); color: #101010; box-shadow: none; }
.hub-xd:not(.hub-offers):not(.hub-detail) .timeline::before { background: #d6d6d2; }
.hub-xd:not(.hub-offers):not(.hub-detail) .timeline li::before { border-radius: 50%; background: var(--hub-orange); transform: none; }
.hub-xd:not(.hub-offers):not(.hub-detail) .timeline__year { color: #101010; letter-spacing: -.05em; }
.hub-xd:not(.hub-offers):not(.hub-detail) #reperes { background: var(--hub-orange); color: #101010; }
.hub-xd:not(.hub-offers):not(.hub-detail) #reperes .eyebrow,
.hub-xd:not(.hub-offers):not(.hub-detail) #reperes .stat__value { color: #101010; }
.hub-xd:not(.hub-offers):not(.hub-detail) #reperes .stat { border: 0; background: rgba(255,255,255,.88); }

.hub-xd:not(.hub-offers):not(.hub-detail) #portraits .portrait { border: 1px solid #e2e2df; border-radius: var(--hub-radius); box-shadow: none; overflow: hidden; }
.hub-xd:not(.hub-offers):not(.hub-detail) #portraits .portrait .image-placeholder { margin: 0; width: 100%; background: #e9e9e5; }
.hub-xd:not(.hub-offers):not(.hub-detail) #portraits .portrait > :not(.image-placeholder) { margin-inline: 22px; }
.hub-xd:not(.hub-offers):not(.hub-detail) #portraits .portrait .actions { margin: 8px 22px 24px; }
.hub-xd:not(.hub-offers):not(.hub-detail) #et-vous,
.hub-xd:not(.hub-offers):not(.hub-detail) #rejoindre { background: #101010; color: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) #et-vous .section-head p,
.hub-xd:not(.hub-offers):not(.hub-detail) #rejoindre .section-head p { color: rgba(255,255,255,.72); }

.hub-xd:not(.hub-offers):not(.hub-detail) #projets { background: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) .project,
.hub-xd:not(.hub-offers):not(.hub-detail) .project-card { overflow: hidden; border: 1px solid #e2e2df; border-radius: var(--hub-radius); box-shadow: none; }
.hub-xd:not(.hub-offers):not(.hub-detail) .project:hover { border-color: #101010; }
.hub-xd:not(.hub-offers):not(.hub-detail) .project .image-placeholder { background: #ecece8; }
.hub-xd:not(.hub-offers):not(.hub-detail) .project__meta { color: var(--hub-orange); }
.hub-xd:not(.hub-offers):not(.hub-detail) .project__companies a,
.hub-xd:not(.hub-offers):not(.hub-detail) .project__companies li > div { border: 0; border-radius: 6px; background: #f5f5f2; }
.hub-xd:not(.hub-offers):not(.hub-detail) #ensemble { background: #f5f5f2; }

/* Candidature, contact et pages légales */
.hub-xd:not(.hub-offers):not(.hub-detail) #formulaire,
.hub-xd:not(.hub-offers):not(.hub-detail) #question { background: #fff; }
.hub-xd:not(.hub-offers):not(.hub-detail) .split:has(.form-panel) { gap: clamp(36px, 7vw, 108px); }
.hub-xd:not(.hub-offers):not(.hub-detail) .form-panel { border: 1px solid #dedede; border-radius: var(--hub-radius); box-shadow: none; }
.hub-xd:not(.hub-offers):not(.hub-detail) .form-panel .field input,
.hub-xd:not(.hub-offers):not(.hub-detail) .form-panel .field select,
.hub-xd:not(.hub-offers):not(.hub-detail) .form-panel .field textarea { border-radius: 7px; }
.hub-xd:not(.hub-offers):not(.hub-detail) .split > aside .card { border: 0; border-radius: var(--hub-radius); background: #f5f5f2; box-shadow: none; }
.hub-xd:not(.hub-offers):not(.hub-detail) #candidater,
.hub-xd:not(.hub-offers):not(.hub-detail) #spontanee { background: var(--hub-orange); color: #101010; }
.hub-xd:not(.hub-offers):not(.hub-detail) #candidater .eyebrow,
.hub-xd:not(.hub-offers):not(.hub-detail) #spontanee .eyebrow { color: #101010; }
.hub-xd:not(.hub-offers):not(.hub-detail) .prose { max-width: 820px; font-size: 1.04rem; }
.hub-xd:not(.hub-offers):not(.hub-detail) .prose h2 { margin-top: 2.5em; font-size: clamp(1.45rem, 2.2vw, 2.15rem); letter-spacing: -.035em; }
.hub-xd:not(.hub-offers):not(.hub-detail) .prose h3 { margin-top: 1.9em; }
.hub-xd:not(.hub-offers):not(.hub-detail) .prose dl div { border-color: #e1e1de; }

@container (max-width: 900px) {
  .hub-xd.hub-home .hero--cover { min-height: 580px; background-position: 62% center; }
  .hub-xd.hub-home .hero--cover h1 { font-size: 48px; }
  .hub-home .values-band { grid-template-columns: 1fr 1fr; }
  .hub-home .values-band > .text-link { grid-column: 1 / -1; justify-self: start; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .chapter { grid-template-columns: 1fr; gap: 32px; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .chapter__aside { position: static; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .chapter__body .postes { grid-template-columns: 1fr; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .project--featured { grid-template-columns: 1fr; }
}

@container (max-width: 600px) {
  .hub-xd:not(.hub-offers):not(.hub-detail) .site main > .section { padding-block: 64px; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .hero { padding-block: 68px; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .hero--simple h1 { font-size: 34px; }
  .hub-xd.hub-home .hero--cover { min-height: 520px; margin-inline: 3.7%; padding-block: 52px; background-position: 58% center; }
  .hub-xd.hub-home .hero--cover h1 { font-size: 34px; }
  .hub-home .hero--cover .actions .button { width: auto; }
  .hub-home .values-band { grid-template-columns: 1fr; }
  .hub-home #votre-domaine .card { min-height: 0; }
  .hub-home #recrutement .search-block { padding: 20px; }
  .hub-home #recrutement .offer { align-items: start; }
  .hub-xd:not(.hub-offers):not(.hub-detail) #valeurs .values > div { padding: 24px; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .form-panel { padding: 22px; }
  .hub-xd:not(.hub-offers):not(.hub-detail) .project__body { padding-inline: 20px; }
}
/* Finition des bandeaux intérieurs dans le langage photographique de XD. */
.hub-xd.hub-interior .hero--cover{margin:0 3.7%;border-radius:9px;background:linear-gradient(180deg,#0003,#000d),url('assets/hub/construction.webp') center/cover;min-height:520px;padding-block:90px}
.hub-xd.hub-interior .hero--cover .hero__media{display:none}
.hub-xd.hub-interior .hero--cover .container{max-width:1250px}
.hub-xd.hub-interior .hero--cover h1{font-size:clamp(36px,3.5vw,58px);letter-spacing:-.035em}
.hub-xd.hub-interior .hero--cover .eyebrow{color:#ff9b45}
.hub-xd.hub-interior .hero--simple{margin:0 3.7%;border-radius:9px;padding-block:70px}
.hub-xd.hub-interior .hero--simple h1{font-size:clamp(34px,3.5vw,56px)}
.hub-xd.hub-home .hero--cover{padding-block:80px;min-height:650px;background-position:right center}
.hub-xd.hub-home .hero--cover .container{width:100%;max-width:1260px;text-align:center}
.hub-xd.hub-home .hero--cover .container>div{max-width:1050px;margin-inline:auto}
.hub-xd.hub-home .hero--cover h1{font-size:clamp(36px,3.65vw,62px);max-width:1000px;letter-spacing:-.04em}
.hub-xd.hub-home .hero--cover .eyebrow,.hub-xd.hub-home .hero--cover .actions{justify-content:center}
.hub-xd.hub-home .hero--cover .tagline{max-width:1000px;font-size:22px;margin-top:24px;color:#ff9b45}
.hub-xd.hub-home .hero--cover .lead{margin:22px auto 0;max-width:800px;font-size:16px;line-height:1.6}
.hub-xd.hub-interior .chips li{border-radius:24px;font-size:13px}
@container(max-width:900px){
 .hub-xd.hub-interior .hero--cover{min-height:480px;padding:65px 0}
 .hub-xd.hub-home .hero--cover{padding:60px 0;min-height:620px}
 .hub-xd.hub-home .hero--cover h1{font-size:42px}
}
@container(max-width:600px){
 .hub-xd.hub-interior .hero--cover,.hub-xd.hub-interior .hero--simple{margin-inline:12px;padding:55px 0;border-radius:8px;min-height:0}
 .hub-xd.hub-interior .hero--cover h1,.hub-xd.hub-interior .hero--simple h1{font-size:30px;letter-spacing:-.035em}
 .hub-xd.hub-interior .hero--cover .lead{font-size:15px}
 .hub-xd.hub-interior .hero--cover .eyebrow{font-size:12px;letter-spacing:0}
 .hub-xd.hub-interior .hero--cover .chips{gap:8px}
 .hub-xd.hub-interior .hero--cover .chips li{font-size:12px;padding:7px 10px}
 .hub-xd.hub-home .hero--cover{padding:50px 0;min-height:0;margin-inline:12px}
 .hub-xd.hub-home .hero--cover h1{font-size:31px}
 .hub-xd.hub-home .hero--cover .eyebrow{font-size:11px;letter-spacing:0}
 .hub-xd.hub-home .hero--cover .tagline{font-size:18px}
 .hub-xd.hub-home .hero--cover .lead{font-size:14px;line-height:1.6}
}