/* ============================================================
   PSLEAD Group · secteurs.css
   Rubrique Secteurs : hub (.shub-*) + pages sectorielles (.sec-*)
   Source unique, enqueue conditionnel dans functions.php.
   Variables globales héritées de main.css (:root).
============================================================ */

/* ══════════════════════════════════════════════════════════
   PAGES SECTORIELLES  ·  système .sec-*
══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.sec-hero {
  position: relative; padding: 9rem 0 5.5rem;
  background: var(--navy); overflow: hidden; min-height: 520px;
  display: flex; align-items: center;
}
.sec-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 1;
}
/* Film directionnel façon EY : sombre et lisible côté texte (gauche),
   l'image se révèle nettement côté droit + léger fondu bas pour la profondeur. */
.sec-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(8,26,48,.94) 0%, rgba(8,26,48,.82) 38%, rgba(8,26,48,.50) 70%, rgba(8,26,48,.30) 100%),
    linear-gradient(0deg, rgba(8,26,48,.55) 0%, rgba(8,26,48,0) 46%);
  pointer-events: none;
}
.sec-hero__inner { position: relative; z-index: 1; width: 100%; }
.sec-hero__breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: rgba(255,255,255,.48); margin-bottom: 1.75rem; flex-wrap: wrap;
}
.sec-hero__breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.sec-hero__breadcrumb a:hover { color: var(--gold); }
.sec-hero__breadcrumb .sep { color: rgba(255,255,255,.22); }
.sec-hero__label {
  display: inline-block; font-size: .7rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  background: rgba(245,210,10,.1); border: 1px solid rgba(245,210,10,.22);
  padding: .3rem .9rem; border-radius: 2px; margin-bottom: 1.25rem;
}
.sec-hero h1 {
  font-size: clamp(1.85rem, 4.2vw, 3.1rem); font-weight: 800;
  color: #fff; line-height: 1.14; max-width: 720px; margin-bottom: 1.25rem;
}
.sec-hero h1 em { font-style: normal; color: var(--gold); }
.sec-hero__sub {
  font-size: 1.0625rem; color: rgba(255,255,255,.68);
  max-width: 580px; line-height: 1.75; margin-bottom: 2.5rem;
}
.sec-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Contexte ── */
.sec-context { background: var(--gray-light); padding: 5.5rem 0; }
.sec-context__inner {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 4.5rem; align-items: start;
}
.sec-context__stat {
  background: var(--navy); border-radius: 4px;
  padding: 3rem 1.75rem; text-align: center;
  position: relative; overflow: hidden;
}
.sec-context__stat::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--gold);
}
.sec-context__num {
  font-size: clamp(2.75rem, 6.5vw, 4.25rem); font-weight: 800;
  color: var(--gold); line-height: 1;
}
.sec-context__unit { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.55); margin-top: .4rem; }
.sec-context__caption {
  font-size: .85rem; color: rgba(255,255,255,.58); margin-top: .85rem;
  line-height: 1.55; max-width: 210px; margin-left: auto; margin-right: auto;
}
.sec-context__text p {
  font-size: 1.0625rem; color: var(--gray-text);
  line-height: 1.85; margin-bottom: 1.25rem;
}
.sec-context__text p:last-child { margin-bottom: 0; }
.sec-context__text strong { color: var(--navy); font-weight: 700; }

/* ── Intervention ── */
.sec-intervention { background: var(--white); padding: 5.5rem 0; }
.sec-int__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem; margin-top: 3.5rem;
}
.sec-int__card {
  background: var(--gray-light); border-radius: 4px; padding: 2.5rem 2rem;
  border-bottom: 3px solid transparent;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  position: relative;
}
.sec-int__card:hover {
  border-bottom-color: var(--gold);
  box-shadow: var(--shadow-md); transform: translateY(-5px);
}
.sec-int__icon { width: 48px; height: 48px; margin-bottom: 1.5rem; }
.sec-int__num {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-size: 3rem; font-weight: 800; color: rgba(10,37,64,.045);
  line-height: 1; user-select: none;
}
.sec-int__card h3 {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  margin-bottom: .75rem; line-height: 1.35;
}
.sec-int__card p { font-size: .9rem; color: var(--gray-text); line-height: 1.7; }

/* ── Expertises mobilisées ── */
.sec-expertises { background: var(--navy); padding: 5rem 0; }
.sec-expertises .section-label { color: var(--gold); }
.sec-expertises .section-title { color: #fff; }
.sec-exp__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}
.sec-exp__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 2rem 1.75rem;
  transition: background .3s, border-color .3s, transform .3s;
  display: flex; flex-direction: column; gap: .9rem;
}
.sec-exp__card:hover {
  background: rgba(245,210,10,.07);
  border-color: rgba(245,210,10,.28); transform: translateY(-4px);
}
.sec-exp__icon { width: 40px; height: 40px; }
.sec-exp__card h3 { font-size: .9375rem; font-weight: 700; color: #fff; line-height: 1.3; }
.sec-exp__card p { font-size: .875rem; color: rgba(255,255,255,.58); line-height: 1.65; flex: 1; }
.sec-exp__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--gold); transition: gap .2s;
}
.sec-exp__link:hover { gap: .7rem; }

/* ── Référence ── */
.sec-reference { background: var(--gray-light); padding: 5.5rem 0; }
.sec-ref__block {
  background: var(--navy); border-radius: 4px; padding: 3.5rem;
  max-width: 860px; margin: 3rem auto 0;
  position: relative; overflow: hidden;
}
.sec-ref__block::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gold);
}
.sec-ref__quote { font-size: 3.75rem; line-height: 1; color: var(--gold); font-weight: 800; }
.sec-ref__text {
  font-size: 1.0625rem; font-style: italic;
  color: rgba(255,255,255,.8); line-height: 1.85; margin-bottom: 1.75rem;
}
.sec-ref__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sec-ref__tag {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
  background: rgba(245,210,10,.1); border: 1px solid rgba(245,210,10,.2);
  padding: .25rem .75rem; border-radius: 2px;
}
.sec-ref__label { font-size: .85rem; color: rgba(255,255,255,.45); }
.sec-ref__link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem;
  font-size: .875rem; font-weight: 700; color: var(--gold); transition: gap .2s;
}
.sec-ref__link:hover { gap: .8rem; }
.sec-ref__link svg { flex-shrink: 0; }

/* ── Chiffres clés ── */
.sec-chiffres { background: var(--white); padding: 5.5rem 0; }
.sec-kpi__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3.5rem;
}
.sec-kpi__card {
  background: var(--gray-light); border-radius: 4px; padding: 2.75rem 2rem;
  text-align: center; border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.sec-kpi__card.visible { opacity: 1; transform: translateY(0); }
.sec-kpi__prefix { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.sec-kpi__num {
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800;
  color: var(--navy); line-height: 1; display: inline;
}
.sec-kpi__suffix { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.sec-kpi__label {
  font-size: .875rem; color: var(--gray-text);
  margin-top: .75rem; line-height: 1.5;
}

/* ── CTA Final ── */
.sec-cta {
  background: var(--navy); padding: 5.5rem 0;
  text-align: center; position: relative; overflow: hidden;
}
.sec-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(245,210,10,.07) 0%, transparent 70%);
  pointer-events: none;
}
.sec-cta__inner { position: relative; z-index: 1; }
.sec-cta h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800;
  color: #fff; max-width: 620px; margin: 0 auto 1rem; line-height: 1.22;
}
.sec-cta p {
  color: rgba(255,255,255,.6); font-size: 1rem;
  max-width: 500px; margin: 0 auto 2.5rem; line-height: 1.65;
}
.sec-cta__btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   HUB SECTEURS  ·  système .shub-*
══════════════════════════════════════════════════════════ */

/* ── Hero hub ── */
.shub-hero {
  position: relative; background: var(--navy);
  padding: 8.5rem 0 5rem; overflow: hidden;
}
.shub-hero::before {
  /* trame géométrique discrète : réseau de secteurs */
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(245,210,10,.14) 1px, transparent 0);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  opacity: .5; pointer-events: none;
}
.shub-hero::after {
  content: ''; position: absolute; right: -10%; top: -30%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,210,10,.10) 0%, transparent 68%);
  pointer-events: none;
}
.shub-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.shub-breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: 1.75rem;
}
.shub-breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.shub-breadcrumb a:hover { color: var(--gold); }
.shub-breadcrumb .sep { color: rgba(255,255,255,.22); }
.shub-hero__label {
  display: inline-block; font-size: .7rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  background: rgba(245,210,10,.1); border: 1px solid rgba(245,210,10,.22);
  padding: .3rem .9rem; border-radius: 2px; margin-bottom: 1.4rem;
}
.shub-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.35rem); font-weight: 800;
  color: #fff; line-height: 1.12; margin-bottom: 1.4rem;
}
.shub-hero h1 em { font-style: normal; color: var(--gold); }
.shub-hero__sub {
  font-size: 1.1rem; color: rgba(255,255,255,.72);
  line-height: 1.8; max-width: 620px;
}

/* ── Bande intro : approche sectorielle ── */
.shub-intro { background: var(--white); padding: 5rem 0 1rem; }
.shub-intro__inner {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 4rem; align-items: center;
}
.shub-intro__text .section-label { color: var(--gold-600, #e0be00); }
.shub-intro__text h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800;
  color: var(--navy); line-height: 1.2; margin: .5rem 0 1.25rem;
}
.shub-intro__text p {
  font-size: 1.03rem; color: var(--gray-text); line-height: 1.85; margin-bottom: 1.1rem;
}
.shub-intro__text p:last-child { margin-bottom: 0; }
.shub-intro__text strong { color: var(--navy); font-weight: 700; }
.shub-pillars { display: flex; flex-direction: column; gap: 1rem; }
.shub-pillar {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--gray-light); border-radius: 4px;
  padding: 1.4rem 1.5rem; border-left: 3px solid var(--gold);
}
.shub-pillar__ic {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.shub-pillar h3 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.shub-pillar p { font-size: .85rem; color: var(--gray-text); line-height: 1.6; }

/* ── Grille des secteurs ── */
.shub-grid-sec { background: var(--white); padding: 4rem 0 5.5rem; }
.shub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3.25rem;
}
.shub-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line, #e4e8ee);
  border-radius: 6px; padding: 2.25rem 2rem 2rem; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.shub-card::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 0; background: linear-gradient(180deg, transparent, rgba(10,37,64,.02));
  transition: height .35s ease; pointer-events: none;
}
.shub-card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.shub-card:hover {
  transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(10,37,64,.28);
  border-color: transparent;
}
.shub-card:hover::after { transform: scaleX(1); }
.shub-card:hover::before { height: 100%; }
.shub-card__ic {
  width: 54px; height: 54px; border-radius: 8px;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; position: relative; z-index: 1;
  transition: background .35s;
}
.shub-card:hover .shub-card__ic { background: var(--gold); }
.shub-card__ic svg { transition: stroke .35s; }
.shub-card:hover .shub-card__ic svg [stroke="#F5D20A"],
.shub-card:hover .shub-card__ic svg path,
.shub-card:hover .shub-card__ic svg circle,
.shub-card:hover .shub-card__ic svg line,
.shub-card:hover .shub-card__ic svg rect,
.shub-card:hover .shub-card__ic svg polyline { stroke: var(--navy); }
.shub-card h3 {
  font-size: 1.15rem; font-weight: 800; color: var(--navy);
  line-height: 1.25; margin-bottom: .6rem; position: relative; z-index: 1;
}
.shub-card__promise {
  font-size: .9rem; color: var(--gray-text); line-height: 1.7;
  margin-bottom: 1.4rem; position: relative; z-index: 1; flex: 1;
}
.shub-card__stat {
  display: flex; align-items: baseline; gap: .5rem;
  padding-top: 1.1rem; margin-bottom: 1.25rem;
  border-top: 1px solid var(--line, #e4e8ee); position: relative; z-index: 1;
}
.shub-card__stat b { font-size: 1.5rem; font-weight: 800; color: var(--gold-600, #e0be00); line-height: 1; }
.shub-card__stat span { font-size: .8rem; color: var(--slate, #4a5568); line-height: 1.4; }
.shub-card__link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--navy);
  position: relative; z-index: 1; transition: gap .25s, color .25s;
}
.shub-card:hover .shub-card__link { color: var(--gold-600, #e0be00); }
.shub-card__link:hover { gap: .75rem; }
.shub-card__link svg { flex-shrink: 0; }

/* ── Bande transversale : secteurs × métiers ── */
.shub-cross { background: var(--navy); padding: 5.5rem 0; position: relative; overflow: hidden; }
.shub-cross::before {
  content: ''; position: absolute; left: -8%; bottom: -40%;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,210,10,.08) 0%, transparent 68%);
  pointer-events: none;
}
.shub-cross__inner { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto; }
.shub-cross .section-label { color: var(--gold); }
.shub-cross h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); font-weight: 800; color: #fff; line-height: 1.22; margin: .5rem 0 1rem; }
.shub-cross__lead { font-size: 1rem; color: rgba(255,255,255,.66); line-height: 1.75; margin-bottom: 3rem; }
.shub-metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.shub-metier {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 1.9rem 1.6rem; text-align: left;
  transition: background .3s, border-color .3s, transform .3s;
  display: flex; flex-direction: column; gap: .7rem;
}
.shub-metier:hover { background: rgba(245,210,10,.07); border-color: rgba(245,210,10,.28); transform: translateY(-4px); }
.shub-metier__ic { width: 38px; height: 38px; }
.shub-metier h3 { font-size: .95rem; font-weight: 700; color: #fff; }
.shub-metier p { font-size: .83rem; color: rgba(255,255,255,.58); line-height: 1.6; flex: 1; }
.shub-metier__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--gold); transition: gap .2s; }
.shub-metier__link:hover { gap: .65rem; }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL (partagé hub + pages)
══════════════════════════════════════════════════════════ */
.sr { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.sr.visible { opacity: 1; transform: translateY(0); }
.sr-d1 { transition-delay: .1s; } .sr-d2 { transition-delay: .2s; }
.sr-d3 { transition-delay: .3s; } .sr-d4 { transition-delay: .4s; }
.sr-d5 { transition-delay: .5s; } .sr-d6 { transition-delay: .6s; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sec-exp__grid { grid-template-columns: repeat(2, 1fr); }
  .shub-grid { grid-template-columns: repeat(2, 1fr); }
  .shub-metiers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .shub-intro__inner { grid-template-columns: 1fr; gap: 2.75rem; }
}
@media (max-width: 860px) {
  .sec-context__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sec-kpi__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sec-hero { padding: 7rem 0 4rem; }
  .sec-int__grid { grid-template-columns: 1fr; }
  .sec-exp__grid { grid-template-columns: 1fr; }
  .sec-kpi__grid { grid-template-columns: 1fr; }
  .sec-ref__block { padding: 2.25rem 1.5rem; }
  .shub-grid { grid-template-columns: 1fr; }
  .shub-metiers { grid-template-columns: 1fr; }
  .shub-hero { padding: 7rem 0 4rem; }
}

/* ══════════════════════════════════════════════════════════
   ALIGNEMENT CHARTE MÉTIERS (règles validées)
   Eyebrows navy + filet or sur fond clair, or/blanc sur fond sombre.
   Boutons : texte qui glisse, flèche révélée au survol.
══════════════════════════════════════════════════════════ */

/* --- Eyebrow (remplace section-label or-sur-blanc) --- */
.ecl-scope, .sec-hero, .shub-hero { }
.sec-hero .eyebrow, .sec-context .eyebrow, .sec-intervention .eyebrow,
.sec-expertises .eyebrow, .sec-reference .eyebrow, .sec-chiffres .eyebrow,
.sec-cta .eyebrow, .shub-hero .eyebrow, .shub-intro .eyebrow,
.shub-grid-sec .eyebrow, .shub-cross .eyebrow, .related .eyebrow, .archero .eyebrow {
  font-size: .82rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; display: inline-block;
  color: var(--navy); margin-bottom: 1rem;
}
.sec-hero .eyebrow::after, .sec-context .eyebrow::after, .sec-intervention .eyebrow::after,
.sec-expertises .eyebrow::after, .sec-reference .eyebrow::after, .sec-chiffres .eyebrow::after,
.sec-cta .eyebrow::after, .shub-hero .eyebrow::after, .shub-intro .eyebrow::after,
.shub-grid-sec .eyebrow::after, .shub-cross .eyebrow::after, .related .eyebrow::after, .archero .eyebrow::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--gold); margin-top: 9px;
}
/* centrage du filet quand l'entête est centré */
.shub-grid-sec > .container > .sr[style*="center"] .eyebrow::after,
.sec-intervention .sr[style*="center"] .eyebrow::after,
.sec-expertises .sr[style*="center"] .eyebrow::after,
.sec-reference .sr[style*="center"] .eyebrow::after,
.sec-chiffres .sr[style*="center"] .eyebrow::after { margin-left: auto; margin-right: auto; }
/* fond sombre : eyebrow blanc (héros) ou or (sections navy de contenu) */
.sec-hero .eyebrow, .shub-hero .eyebrow { color: #fff; }
.sec-expertises .eyebrow, .sec-cta .eyebrow, .shub-cross .eyebrow { color: var(--gold); }

/* --- Boutons charte (texte glisse + flèche) --- */
.sec-hero__ctas .btn, .sec-cta__btns .btn, .shub-hero .btn, .sec-articles__more .btn {
  position: relative; overflow: hidden;
}
.btn .t { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn .ar {
  position: absolute; right: 20px; display: inline-flex; align-items: center;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn .ar svg { width: 19px; height: 19px; display: block; }
.btn:hover .t { transform: translateX(-13px); }
.btn:hover .ar { opacity: 1; transform: translateX(0); }

/* ══════════════════════════════════════════════════════════
   ÉPURE EY : suppression des icônes décoratives répétées.
   Ancrage des cartes par un fin filet or + typographie/numérotation.
══════════════════════════════════════════════════════════ */
/* icônes retirées du balisage : neutraliser les résidus */
.shub-card__ic, .shub-pillar__ic, .sec-int__icon, .sec-exp__icon { display: none; }
.shub-pillar { padding: 1.5rem 1.6rem; }

/* Fin filet or en tête des cartes secteurs (hub) */
.shub-card h3 { margin-top: .2rem; }
.shub-card h3::before {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--gold); margin-bottom: 1.1rem;
}
/* Fin filet or en tête des cartes métiers (bande transversale, fond sombre) */
.shub-metier h3::before {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--gold); margin-bottom: .1rem;
}
/* Cartes intervention : la numérotation devient l'ancrage (plus présente) */
.sec-int__card { padding-top: 2.75rem; }
.sec-int__num { font-size: 2.5rem; color: rgba(10,37,64,.10); font-weight: 800; }
/* Cartes expertises : un fin filet or en tête */
.sec-exp__card h3 { margin-top: .2rem; }
.sec-exp__card h3::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--gold); margin-bottom: .9rem;
}

/* ── Correctif : index d'étape en flux (plus de chevauchement avec le titre) ── */
.sec-int__num {
  position: static; display: block;
  top: auto; right: auto;
  font-size: .95rem; font-weight: 800; letter-spacing: .06em;
  color: var(--gold-600, #e0be00); opacity: 1;
  margin-bottom: .7rem; line-height: 1;
}
.sec-int__card { padding-top: 2.25rem; }

/* ══════════════════════════════════════════════════════════
   Contexte sectoriel : encadré-statistique en IMAGE + film sombre
   (remplace le bloc navy à filet or ; survol sur l'ensemble)
   Repli navy conservé pour les pages non encore migrées.
══════════════════════════════════════════════════════════ */
.sec-context__stat {
  background-color: var(--navy);
  background-size: cover; background-position: center;
  min-height: 280px; display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.sec-context__stat:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -24px rgba(10,37,64,.45); }
.sec-context__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(10,37,64,.52) 0%, rgba(10,37,64,.80) 100%);
  transition: background .45s ease;
}
.sec-context__stat:hover .sec-context__overlay {
  background: linear-gradient(165deg, rgba(10,37,64,.40) 0%, rgba(10,37,64,.70) 100%);
}
.sec-context__body { position: relative; z-index: 1; width: 100%; }

/* ══════════════════════════════════════════════════════════
   Section « À lire » : cartes d'articles (Image + Titre + Accroche + CTA)
   Animation de survol inédite : zoom image, voile renforcé,
   accroche + CTA qui remontent, filet or qui s'étire.
══════════════════════════════════════════════════════════ */
.sec-articles { background: var(--gray-light); padding: 5.5rem 0; }
.sart-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.5rem; margin-top: 3.25rem;
}
/* Carte magazine (façon EY) : image en HAUT, corps navy PLEIN en dessous.
   Le texte éditorial n'est jamais posé sur l'image, donc plus aucun
   chevauchement même si la vignette est une infographie chargée de texte. */
.sart-card {
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  background: var(--navy); isolation: isolate; text-decoration: none;
  flex: 0 1 calc(25% - 1.125rem); /* 4 par rangée ; les rangées incomplètes se centrent */
  box-shadow: 0 12px 30px -22px rgba(10,37,64,.55);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.sart-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -26px rgba(10,37,64,.6); }
.sart-card__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background-size: cover; background-position: center;
  /* Tuile de marque par défaut, si aucune image de mise en avant n'est définie */
  background-color: #0f2c50;
  background-image: linear-gradient(135deg, #0A2540 0%, #1c3a5e 55%, #16305E 100%);
  transition: transform .65s cubic-bezier(.2,.7,.3,1);
}
.sart-card:hover .sart-card__media { transform: scale(1.04); }
.sart-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,0) 58%, rgba(10,37,64,.30) 100%);
}
.sart-card__shade { display: none; } /* héritage : voile plein écran désormais inutile */
.sart-card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 1.4rem 1.4rem 1.5rem; position: relative; z-index: 1;
}
.sart-card__cat {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.sart-card__title {
  font-size: 1.04rem; font-weight: 800; color: #fff; line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sart-card__title::after {
  content: ""; display: block; width: 28px; height: 2px; background: var(--gold);
  margin-top: .85rem; transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.sart-card:hover .sart-card__title::after { width: 56px; }
.sart-card__reveal { display: flex; flex-direction: column; flex: 1 1 auto; }
.sart-card__excerpt {
  font-size: .85rem; color: rgba(255,255,255,.72); line-height: 1.6; margin: .85rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sart-card__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 800; color: var(--gold); margin-top: auto; padding-top: 1.1rem;
}
.sart-card__cta svg { transition: transform .3s; }
.sart-card:hover .sart-card__cta svg { transform: translateX(4px); }
.sec-articles__more { text-align: center; margin-top: 3rem; }
/* Variante « tuile pleine » : cartes sans vignette (filet or en tête, pas de bandeau vide). */
.sart-card--flat { min-height: 300px; }
.sart-card--flat .sart-card__media { display: none; }
.sart-card--flat .sart-card__body { padding: 2rem 1.6rem 1.9rem; }
.sart-card--flat .sart-card__body::before {
  content: ""; display: block; width: 38px; height: 3px; background: var(--gold); margin-bottom: 1.3rem;
}
@media (max-width: 1024px) { .sart-card { flex-basis: calc(50% - .75rem); } }
@media (max-width: 560px)  { .sart-card { flex-basis: 100%; } }

/* ── Index d'étape : grand chiffre serif navy au-dessus du titre (police contrastée, pas d'or) ── */
.sec-int__num {
  position: static; display: block; top: auto; right: auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  color: var(--navy); opacity: 1;
  line-height: 1; letter-spacing: -.01em;
  margin-bottom: .55rem;
}
.sec-int__num::after {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--gold); margin-top: .55rem;
}
.sec-int__card { padding-top: 2.4rem; }

/* ══════════════════════════════════════════════════════════
   VARIANTES « Notre intervention » par secteur
   Casser la monotonie des pages Secteurs : chaque page reçoit
   un fond tramé propre (motifs CSS, sans image), une teinte et
   un cadre de carte distincts, et un sens d'accent au survol
   différent. Le socle reste identique (grand chiffre serif navy
   au-dessus du titre, filet or), pour rester dans la charte.
   Modificateur posé sur la section : .sec-intervention--{pme,
   imm, agro, ind, mines, inst}.
══════════════════════════════════════════════════════════ */
.sec-intervention { position: relative; overflow: hidden; }
.sec-intervention > .container { position: relative; z-index: 1; }

/* ---- PME & PMI : pointillé fin, carte claire, filet or bas ---- */
.sec-intervention--pme {
  background-color: var(--gray-light);
  background-image: radial-gradient(rgba(10,37,64,.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.sec-intervention--pme .sec-int__card { background: var(--white); }

/* ---- Immobilier & BTP : hachures calque, carte encadrée, liseré gauche ---- */
.sec-intervention--imm {
  background-color: var(--white);
  background-image: repeating-linear-gradient(45deg, rgba(10,37,64,.028) 0 1px, transparent 1px 15px);
}
.sec-intervention--imm .sec-int__card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--gray-mid);
  padding-left: 1.85rem;
}
.sec-intervention--imm .sec-int__card:hover {
  border-color: var(--gray-mid);
  border-left-color: var(--gold);
  border-bottom-color: var(--gray-mid);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---- Agroalimentaire : hairlines horizontales, filet or qui s'étire ---- */
.sec-intervention--agro {
  background-color: var(--gray-light);
  background-image: repeating-linear-gradient(0deg, rgba(10,37,64,.03) 0 1px, transparent 1px 17px);
}
.sec-intervention--agro .sec-int__card {
  background: var(--white);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.sec-intervention--agro .sec-int__card:hover {
  border-bottom-color: transparent;
  border-top-color: var(--gold);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.sec-intervention--agro .sec-int__num::after { transition: width .45s cubic-bezier(.2,.7,.3,1); }
.sec-intervention--agro .sec-int__card:hover .sec-int__num::after { width: 54px; }

/* ---- Industries : grille technique, carte teintée navy, survol qui densifie ---- */
.sec-intervention--ind {
  background-color: var(--gray-light);
  background-image:
    repeating-linear-gradient(0deg, rgba(10,37,64,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(10,37,64,.035) 0 1px, transparent 1px 26px);
}
.sec-intervention--ind .sec-int__card {
  background: rgba(10,37,64,.035);
  border-bottom: 3px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.sec-intervention--ind .sec-int__card:hover {
  background: rgba(10,37,64,.06);
  border-bottom-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---- Mines & Pétrole : lignes verticales (strates), bandeau de tête navy→or ---- */
.sec-intervention--mines {
  background-color: var(--gray-light);
  background-image: repeating-linear-gradient(90deg, rgba(10,37,64,.032) 0 1px, transparent 1px 18px);
}
.sec-intervention--mines .sec-int__card {
  background: var(--white);
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid transparent;
  transition: border-color .3s, box-shadow .35s, transform .3s;
}
.sec-intervention--mines .sec-int__card:hover {
  border-top-color: var(--gold);
  border-bottom-color: transparent;
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ---- Institutions & Organisations : fond épuré, carte cadrée, cadre or au survol ---- */
.sec-intervention--inst {
  background-color: var(--gray-light);
  background-image: radial-gradient(rgba(10,37,64,.04) 1px, transparent 1.4px);
  background-size: 30px 30px;
}
.sec-intervention--inst .sec-int__card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-bottom: 1px solid var(--gray-mid);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.sec-intervention--inst .sec-int__card:hover {
  border-color: var(--gold);
  border-bottom-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}