/* =========================================================
   FOX DIGITAL
   DIRECTION ARTISTIQUE PREMIUM
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --orange: #fd6215;
  --orange-dark: #e95700;

  --black: #111111;
  --black-soft: #191919;

  --cream: #f6f2ec;
  --cream-dark: #eee8df;

  --white: #ffffff;

  --grey: #706d68;
  --grey-light: #a7a39e;

  --border: rgba(17, 17, 17, 0.12);

  --font-heading: "Bodoni Moda", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;

  --container: 1450px;

}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  font-family: var(--font-body);

  background: var(--cream);

  color: var(--black);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}


body.menu-open {
  overflow: hidden;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


.container {

  width: min(
    calc(100% - 80px),
    var(--container)
  );

  margin-inline: auto;

}


/* =========================================================
   ANNONCEMENT
   ========================================================= */

.announcement {

  background: var(--orange);

  color: var(--black);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


.announcement-inner {

  min-height: 31px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

}


.announcement-separator {
  opacity: 0.5;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(246, 242, 236, 0.96);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--border);

}


.navbar {

  height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}


.brand {

  display: inline-flex;

  align-items: center;

  flex-shrink: 0;

}


.brand-logo {

  width: 175px;

  height: auto;

}


.desktop-nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 31px;

  margin-left: auto;

  margin-right: 35px;

}


.desktop-nav a {

  position: relative;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: -0.02em;

  transition:
    color 0.25s ease,
    transform 0.25s ease;

}


.desktop-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -8px;

  height: 2px;

  background: var(--orange);

  transition: right 0.25s ease;

}


.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--orange);
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  right: 0;
}


.nav-actions {

  display: flex;

  align-items: center;

  gap: 18px;

}


.nav-cta {

  white-space: nowrap;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {

  min-height: 50px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  border: none;

  border-radius: 999px;

  padding: 0 25px;

  font-size: 12px;

  font-weight: 800;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

}


.btn:hover {

  transform: translateY(-3px);

}


.btn-dark {

  background: var(--black);

  color: var(--white);

}


.btn-dark:hover {

  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.18);

}


.btn-orange {

  background: var(--orange);

  color: var(--black);

}


.btn-orange:hover {

  background: #ff7926;

  box-shadow: 0 14px 34px rgba(255, 101, 0, 0.22);

}


.btn-black-on-orange {

  background: var(--black);

  color: var(--white);

}


.text-link {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  font-size: 12px;

  font-weight: 800;

  border-bottom: 1px solid var(--black);

  padding-bottom: 5px;

}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-toggle {

  width: 44px;

  height: 44px;

  display: none;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  border: 0;

  background: transparent;

}


.mobile-toggle span {

  width: 22px;

  height: 2px;

  background: var(--black);

  transition: 0.25s ease;

}


.mobile-menu {

  display: none;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 24px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.18em;

}


.eyebrow > span {

  display: inline-block;

  width: 30px;

  height: 2px;

  background: var(--orange);

}


/* =========================================================
   HERO
   ========================================================= */

.career-hero {

  position: relative;

  min-height: 720px;

  overflow: hidden;

  background: var(--cream);

}


.career-hero-grid {

  min-height: 720px;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(520px, 0.85fr);

  align-items: center;

  gap: 80px;

  padding-top: 60px;

  padding-bottom: 75px;

}


.career-hero-content {

  position: relative;

  z-index: 5;

  max-width: 780px;

}


.career-hero-content h1 {

  margin: 0 0 30px;

  font-family: var(--font-body);

  font-size: clamp(64px, 5.5vw, 98px);

  font-weight: 500;

  line-height: 0.93;

  letter-spacing: -0.065em;

}


.career-hero-content h1 em {

  font-family: var(--font-heading);

  font-weight: 600;

  color: var(--orange);

  letter-spacing: -0.04em;

}


.career-hero-lead {

  max-width: 640px;

  margin: 0 0 10px;

  font-size: 18px;

  font-weight: 700;

  line-height: 1.6;

}


.career-hero-text {

  max-width: 650px;

  margin: 0;

  color: var(--grey);

  font-size: 15px;

  line-height: 1.8;

}


.hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 28px;

  margin-top: 32px;

}


.hero-micro-proof {

  display: flex;

  align-items: stretch;

  gap: 0;

  margin-top: 50px;

  border-top: 1px solid var(--border);

  max-width: 590px;

}


.hero-micro-proof > div {

  width: 33.33%;

  padding: 18px 20px 0 0;

}


.hero-micro-proof strong {

  display: block;

  margin-bottom: 4px;

  font-family: var(--font-heading);

  color: var(--orange);

  font-size: 20px;

}


.hero-micro-proof span {

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.09em;

}


/* =========================================================
   HERO PHOTO
   ========================================================= */

.career-hero-media {

  position: relative;

  height: 590px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.hero-editorial-word {

  position: absolute;

  top: 50%;

  right: -110px;

  transform: translateY(-50%) rotate(-90deg);

  font-family: var(--font-heading);

  font-size: 200px;

  font-weight: 700;

  line-height: 1;

  color: rgba(17, 17, 17, 0.035);

  user-select: none;

}


.hero-orange-shape {

  position: absolute;

  width: 395px;

  height: 495px;

  top: 45px;

  right: 38px;

  background: var(--orange);

  border-radius: 200px 200px 25px 25px;

}


.hero-photo-wrap {

  position: relative;

  z-index: 2;

  width: 465px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.hero-photo {

  width: 100%;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 28px 35px
      rgba(17, 17, 17, 0.12)
    );

}


.hero-signature-card {

  position: absolute;

  z-index: 5;

  left: -15px;

  bottom: 63px;

  width: 260px;

  padding: 24px 25px;

  background: var(--black);

  color: var(--white);

  box-shadow:
    0 25px 60px
    rgba(17, 17, 17, 0.22);

}


.signature-small {

  display: block;

  margin-bottom: 10px;

  color: var(--orange);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.18em;

}


.hero-signature-card strong {

  display: block;

  font-family: var(--font-heading);

  font-size: 24px;

  line-height: 1.15;

  font-weight: 500;

}


.hero-side-note {

  position: absolute;

  right: -5px;

  bottom: 10px;

  display: flex;

  gap: 15px;

  transform: rotate(-90deg)
    translateX(100%);

  transform-origin: right bottom;

  color: var(--grey);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.18em;

}


/* =========================================================
   MARQUEE
   ========================================================= */

.career-strip {

  overflow: hidden;

  background: var(--black);

  color: var(--white);

  padding: 17px 0;

}


.career-strip-track {

  width: max-content;

  display: flex;

  align-items: center;

  gap: 26px;

  animation:
    foxTicker 30s linear infinite;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.15em;

}


.career-strip-track b {

  color: var(--orange);

  font-size: 12px;

}


@keyframes foxTicker {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-35%);
  }

}


/* =========================================================
   SECTION
   ========================================================= */

.career-section {

  padding: 120px 0;

  background: var(--white);

}


.career-approach {

  background: var(--white);

}


.career-section-heading {

  display: grid;

  grid-template-columns:
    0.6fr
    1.4fr;

  gap: 70px;

  align-items: start;

  margin-bottom: 80px;

}


.career-section-heading h2,
.career-audience h2 {

  max-width: 920px;

  margin: 0;

  font-family: var(--font-body);

  font-size: clamp(45px, 4.7vw, 74px);

  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.055em;

}


.career-section-heading h2 em,
.career-audience h2 em {

  display: block;

  font-family: var(--font-heading);

  color: var(--orange);

  font-weight: 600;

}


/* =========================================================
   CARRIÈRE — ACCOMPAGNEMENTS
   ========================================================= */

.career-services-intro {

  max-width: 700px;

  margin: 28px 0 0;

  color: var(--grey);

  font-size: 16px;

  line-height: 1.8;

}


/* =========================================================
   OFFRE PHARE — CV & LINKEDIN
   ========================================================= */

.career-featured-service {

  display: grid;

  grid-template-columns:
    65px
    minmax(300px, 0.9fr)
    minmax(380px, 1.1fr);

  gap: 45px;

  padding:
    55px
    0
    60px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

}


.career-featured-number,
.career-support-number {

  font-family:
    var(--font-heading);

  color:
    var(--orange);

  font-size:
    22px;

}


.career-service-label {

  display:
    inline-block;

  margin-bottom:
    18px;

  color:
    var(--orange);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.17em;

}


.career-featured-main h3 {

  max-width:
    540px;

  margin:
    0
    0
    24px;

  font-family:
    var(--font-body);

  font-size:
    clamp(38px, 3.5vw, 58px);

  font-weight:
    500;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;

}


.career-featured-main h3 em {

  display:
    block;

  margin-top:
    4px;

  font-family:
    var(--font-heading);

  color:
    var(--orange);

  font-weight:
    600;

}


.career-featured-main > p {

  max-width:
    540px;

  margin:
    0;

  color:
    var(--grey);

  font-size:
    15px;

  line-height:
    1.8;

}


.career-featured-main
.career-featured-note {

  margin-top:
    24px;

  color:
    var(--black);

}


.career-featured-note strong {

  color:
    var(--black);

  font-weight:
    700;

}


/* =========================================================
   EXPERTISES CV & LINKEDIN
   ========================================================= */

.career-featured-expertise {

  display:
    flex;

  flex-direction:
    column;

  border-top:
    1px solid var(--border);

}


.career-expertise-item {

  display:
    grid;

  grid-template-columns:
    145px
    1fr;

  gap:
    25px;

  align-items:
    start;

  padding:
    17px
    0;

  border-bottom:
    1px solid var(--border);

}


.career-expertise-item span {

  color:
    var(--orange);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

}


.career-expertise-item p {

  margin:
    0;

  color:
    var(--grey);

  font-size:
    13px;

  line-height:
    1.55;

}


/* =========================================================
   AUTRES ACCOMPAGNEMENTS
   ========================================================= */

.career-support-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

}


.career-support-card {

  min-height:
    300px;

  padding:
    45px
    42px
    45px
    0;

  border-bottom:
    1px solid var(--border);

}


.career-support-card:not(:nth-child(3n + 1)) {

  padding-left:
    42px;

  border-left:
    1px solid var(--border);

}


.career-support-card h3 {

  margin:
    28px
    0
    18px;

  font-family:
    var(--font-body);

  font-size:
    27px;

  font-weight:
    600;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;

}


.career-support-card p {

  max-width:
    370px;

  margin:
    0;

  color:
    var(--grey);

  font-size:
    14px;

  line-height:
    1.75;

}


/* =========================================================
   BAS DE SECTION
   ========================================================= */

.career-services-bottom {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    60px;

  padding-top:
    50px;

}


.career-services-bottom p {

  max-width:
    690px;

  margin:
    0;

  color:
    var(--grey);

  font-size:
    15px;

  line-height:
    1.7;

}


.career-services-bottom strong {

  color:
    var(--black);

  font-weight:
    700;

}


/* =========================================================
   STORY
   ========================================================= */

.career-story {

  position: relative;

  overflow: hidden;

  padding: 120px 0;

  background: var(--black);

  color: var(--white);

}


.career-story-grid {

  display: grid;

  grid-template-columns:
    minmax(400px, 0.85fr)
    minmax(0, 1.15fr);

  gap: 100px;

  align-items: center;

}


.career-story-image {

  position: relative;

  max-width: 530px;

}


.story-image-accent {

  position: absolute;

  top: -25px;

  left: -25px;

  width: 210px;

  height: 210px;

  background: var(--orange);

}


.career-story-image img {

  position: relative;

  z-index: 2;

  width: 100%;

  aspect-ratio: 1 / 1.05;

  object-fit: cover;

  object-position: center;

}


.story-image-caption {

  position: absolute;

  z-index: 4;

  right: -30px;

  bottom: 35px;

  width: 220px;

  padding: 20px;

  background: var(--cream);

  color: var(--black);

}


.story-image-caption span {

  display: block;

  margin-bottom: 4px;

  color: var(--orange);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.18em;

}


.story-image-caption strong {

  font-family: var(--font-heading);

  font-size: 18px;

  font-weight: 600;

}


.light-eyebrow {

  color: var(--white);

}


.career-story-content h2 {

  margin: 0 0 30px;

  font-family: var(--font-body);

  font-size: clamp(48px, 5vw, 78px);

  font-weight: 500;

  line-height: 1.02;

  letter-spacing: -0.055em;

}


.career-story-content h2 em {

  display: block;

  font-family: var(--font-heading);

  color: var(--orange);

  font-weight: 600;

}


.career-story-content p {

  max-width: 670px;

  color: #c9c6c1;

  font-size: 14px;

  line-height: 1.9;

}


.story-big-text {

  color: var(--white) !important;

  font-family: var(--font-heading);

  font-size: 23px !important;

  line-height: 1.45 !important;

}


.career-story blockquote {

  max-width: 600px;

  margin: 35px 0;

  padding-left: 24px;

  border-left: 2px solid var(--orange);

  font-family: var(--font-heading);

  font-size: 29px;

  line-height: 1.3;

}


/* =========================================================
   AUDIENCE
   ========================================================= */

.career-audience {

  background: var(--cream);

}


.career-audience-grid {

  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap: 100px;

  align-items: start;

}


.career-audience-list {

  border-top: 1px solid var(--border);

}


.audience-row {

  display: grid;

  grid-template-columns:
    60px
    1fr;

  gap: 20px;

  padding: 29px 0;

  border-bottom: 1px solid var(--border);

}


.audience-row > span {

  font-family: var(--font-heading);

  color: var(--orange);

  font-size: 20px;

}


.audience-row h3 {

  margin: 0 0 6px;

  font-family: var(--font-heading);

  font-size: 25px;

  font-weight: 600;

}


.audience-row p {

  margin: 0;

  color: var(--grey);

  font-size: 13px;

}


/* =========================================================
   CTA
   ========================================================= */

.career-final-cta {

  padding: 120px 0;

  background: var(--orange);

  color: var(--black);

}


.career-final-cta-inner {

  max-width: 960px;

  margin-inline: auto;

  text-align: center;

}


.cta-kicker {

  display: block;

  margin-bottom: 22px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.18em;

}


.career-final-cta h2 {

  margin: 0 auto 25px;

  font-family: var(--font-heading);

  font-size: clamp(50px, 5vw, 78px);

  line-height: 1.04;

  font-weight: 600;

}


.career-final-cta p {

  max-width: 650px;

  margin: 0 auto 32px;

  font-size: 16px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  padding: 80px 0 25px;

  background: #0c0c0c;

  color: var(--white);

}


.footer-grid {

  display: grid;

  grid-template-columns:
    1.5fr
    repeat(3, 0.7fr);

  gap: 65px;

}


.footer-logo {

  filter:
    brightness(0)
    invert(1);

  width: 180px;

}


.footer-brand p {

  max-width: 360px;

  color: #8e8e8e;

  font-size: 12px;

  line-height: 1.8;

}


.footer-col {

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.footer-col strong {

  margin-bottom: 8px;

  color: var(--orange);

  font-size: 9px;

  letter-spacing: 0.18em;

}


.footer-col a {

  color: #b4b4b4;

  font-size: 12px;

  transition: color 0.2s ease;

}


.footer-col a:hover {

  color: var(--white);

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 65px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

  color: #666;

  font-size: 10px;

  letter-spacing: 0.08em;

}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;

}


.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

  .desktop-nav {
    gap: 18px;
    margin-right: 10px;
  }


  .desktop-nav a {
    font-size: 11px;
  }


  .career-hero-grid {

    grid-template-columns:
      1fr
      500px;

    gap: 40px;

  }


  .hero-photo-wrap {
    width: 430px;
  }


  .hero-orange-shape {

    width: 350px;

    height: 450px;

  }

}


@media (max-width: 1000px) {

  .container {

    width: min(
      calc(100% - 40px),
      var(--container)
    );

  }


  .desktop-nav,
  .nav-cta {

    display: none;

  }


  .mobile-toggle {

    display: flex;

  }


  .mobile-menu {

    position: fixed;

    top: 119px;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 0;

    padding: 30px 20px;

    background: var(--cream);

    transform: translateX(100%);

    transition:
      transform 0.35s ease;

  }


  .mobile-menu.open {

    transform: translateX(0);

  }


  .mobile-menu a {

    padding: 17px 0;

    border-bottom: 1px solid var(--border);

    font-size: 18px;

    font-weight: 700;

  }


  .career-hero-grid {

    grid-template-columns: 1fr;

    min-height: auto;

  }


  .career-hero-media {

    height: 600px;

    max-width: 650px;

    width: 100%;

    margin-inline: auto;

  }


  .career-section-heading,
  .career-story-grid,
  .career-audience-grid {

    grid-template-columns: 1fr;

    gap: 55px;

  }


  .career-story-image {

    margin-inline: auto;

  }


  .footer-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 700px) {

  .container {

    width: calc(100% - 28px);

  }


  .announcement {

    display: none;

  }


  .navbar {

    height: 76px;

  }


  .brand-logo {

    width: 145px;

  }


  .mobile-menu {

    top: 76px;

  }


  .career-hero-grid {

    padding-top: 55px;

    padding-bottom: 50px;

  }


  .career-hero-content h1 {

    font-size: clamp(
      49px,
      15vw,
      66px
    );

  }


  .career-hero-lead {

    font-size: 16px;

  }


  .hero-micro-proof {

    margin-top: 35px;

  }


  .hero-micro-proof span {

    font-size: 9px;

  }


  .career-hero-media {

    height: 470px;

  }


  .hero-photo-wrap {

    width: min(
      390px,
      95vw
    );

  }


  .hero-orange-shape {

    width: 300px;

    height: 370px;

    top: 45px;

    right: 10px;

  }


  .hero-signature-card {

    left: 0;

    bottom: 30px;

    width: 215px;

  }


  .hero-side-note {

    display: none;

  }


  .career-section {

    padding: 80px 0;

  }


  .career-section-heading {

    margin-bottom: 50px;

  }


  .career-services-grid {

    grid-template-columns: 1fr;

  }


  .career-service,
  .career-service:nth-child(even) {

    padding:
      32px
      0;

    border-right: 0;

  }


  .career-story {

    padding: 80px 0;

  }


  .story-image-caption {

    right: 10px;

    bottom: 15px;

  }


  .career-story-content h2 {

    font-size: 50px;

  }


  .career-audience-grid {

    gap: 50px;

  }


  .career-final-cta {

    padding: 80px 0;

  }


  .footer-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }


  .footer-bottom {

    flex-direction: column;

  }

}

/* =========================================================
   FOX DIGITAL — COMPATIBILITÉ PAGES EXISTANTES + LOGO OFFICIEL
   Ajouté sans modifier la DA de la page Carrière
   ========================================================= */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-symbol {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-copy strong {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand-copy span {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.28em;
}

.site-footer .brand-copy strong,
.site-footer .brand-copy span {
  color: #fff;
}

/* Pages historiques du dossier /pages */
.page-hero {
  padding: 82px 0 76px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}

.page-hero .inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 72px;
  align-items: center;
}

.page-hero .inner > .reveal:first-child {
  max-width: 880px;
}

.page-hero h1 {
  margin: 18px 0 24px;
  font-family: var(--font-body);
  font-size: clamp(50px, 5vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.page-hero h1 .orange,
.orange {
  color: var(--orange);
}

.page-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--grey);
  font-size: 16px;
  line-height: 1.8;
}

.page-hero .visual {
  min-height: 330px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 74% 68%, var(--orange) 0 24%, transparent 24.5%),
    linear-gradient(145deg, #171717, #252525);
  position: relative;
  overflow: hidden;
}

.page-hero .visual::before {
  content: "FOX";
  position: absolute;
  left: 28px;
  top: 22px;
  color: rgba(255,255,255,.08);
  font-family: var(--font-heading);
  font-size: 110px;
  font-weight: 700;
}

.section {
  padding: 96px 0;
}

.section.white {
  background: #fff;
}

.section-head {
  margin-bottom: 48px;
}

.section h2 {
  margin: 12px 0 24px;
  font-family: var(--font-body);
  font-size: clamp(38px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.section h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
}

.section p {
  color: var(--grey);
  font-size: 14px;
  line-height: 1.8;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--border);
}

.feature {
  padding: 34px 38px 34px 0;
  border-bottom: 1px solid var(--border);
}

.feature:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.feature:nth-child(even) {
  padding-left: 38px;
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 76px;
  align-items: start;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr);
  gap: 72px;
  align-items: center;
}

.about-visual {
  position: relative;
  max-width: 500px;
}

.about-visual::before {
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  background: var(--orange);
  border-radius: 28px;
}

.about-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  object-fit: cover;
  border-radius: 28px;
}

.timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.timeline span {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.btn-light {
  background: #fff;
  color: var(--black);
  border: 1px solid var(--border);
}

.site-footer {
  padding: 72px 0 26px;
  background: #0d0d0d;
  color: #fff;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3,.7fr);
  gap: 52px;
}

.site-footer p {
  max-width: 390px;
  color: #a9a9a9;
  font-size: 12px;
  line-height: 1.8;
}

.site-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer .footer-col strong {
  color: var(--orange);
  font-size: 9px;
  letter-spacing: .18em;
  margin-bottom: 5px;
}

.site-footer .footer-col a {
  color: #bbb;
  font-size: 12px;
}

.site-footer .footer-col a:hover {
  color: #fff;
}

@media (max-width: 1000px) {
  .page-hero .inner,
  .about-grid,
  .split {
    grid-template-columns: 1fr;
  }

  .page-hero .visual {
    min-height: 260px;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 700px) {
  .brand-logo-symbol {
    width: 40px;
    height: 40px;
  }

  .brand-copy strong {
    font-size: 16px;
  }

  .page-hero {
    padding: 58px 0;
  }

  .page-hero h1 {
    font-size: 48px;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .feature,
  .feature:nth-child(even) {
    padding: 28px 0;
    border-right: 0;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* === FOX DIGITAL — HOMOGENEISATION GLOBALE V2 === */

/* Le système visuel de la page Carrière devient la référence du site. */
:root{
  --orange:#fd6215;
  --orange-dark:#e95700;
  --black:#111111;
  --black-soft:#191919;
  --cream:#f6f2ec;
  --cream-dark:#eee8df;
  --white:#ffffff;
  --grey:#706d68;
  --grey-light:#a7a39e;
  --border:rgba(17,17,17,.12);
  --font-heading:"Bodoni Moda",Georgia,serif;
  --font-body:"Manrope",Arial,sans-serif;
}

body{font-family:var(--font-body);background:var(--cream);color:var(--black)}

/* Navigation et micro-typographie */
.announcement{background:var(--orange);color:var(--black);font-family:var(--font-body);font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.announcement .container{min-height:31px;display:flex;align-items:center;justify-content:center}
.desktop-nav a,.mobile-menu a,.btn,.footer-col,.eyebrow{font-family:var(--font-body)}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--black);font-size:10px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--orange);display:inline-block;flex:0 0 auto}
.eyebrow>span{display:none}

/* Titres : sans-serif massif + accent éditorial Bodoni */
.page-hero h1,
.section h2,
.section-head h2,
.split h2,
.about-copy h2,
.product-shell h2,
.price-card h2{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.04;
}
.page-hero h1{font-size:clamp(52px,5.4vw,86px)}
.section h2,.section-head h2,.split h2,.about-copy h2{font-size:clamp(42px,4.2vw,68px)}
.page-hero h1 .orange,
.section h2 .orange,
.section-head h2 .orange,
.split h2 .orange,
.orange{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:600;
  color:var(--orange);
  letter-spacing:-.035em;
}

/* Titres secondaires comme les 01/02/03/04 de la page Carrière */
.card h3,.feature h3,.offer h3,.audience-row h3,.price-card h3,.job h3,
.about-copy h3,.section h3{
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:-.02em;
}

/* HERO générique de toutes les pages historiques */
.page-hero{padding:86px 0 82px;background:var(--cream);border-bottom:1px solid var(--border)}
.page-hero .inner{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:76px;align-items:center}
.page-hero .inner>.reveal:first-child{max-width:920px}
.page-hero p{max-width:830px;color:var(--grey);font-size:15px;line-height:1.85}
.page-hero .hero-actions{margin-top:30px}
.page-hero .visual{min-height:360px;border-radius:0;background:var(--black);position:relative;overflow:hidden}
.page-hero .visual::before{content:"FOX";position:absolute;left:34px;top:25px;font-family:var(--font-heading);font-size:116px;font-weight:700;color:rgba(255,255,255,.055)}
.page-hero .visual::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-55px;bottom:-50px;background:var(--orange)}

/* Sections et grilles */
.section{padding:108px 0}
.section.white{background:#fff}
.section.dark{background:var(--black);color:#fff}
.section.dark p{color:#c6c1bb}
.section-head{margin-bottom:54px}
.two-col,.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border)}
.feature,.card{position:relative;padding:38px 42px 38px 0;border-bottom:1px solid var(--border);background:transparent}
.feature:nth-child(odd),.card:nth-child(odd){border-right:1px solid var(--border)}
.feature:nth-child(even),.card:nth-child(even){padding-left:42px}
.feature h3,.card h3{font-size:29px;margin:0 0 12px}
.feature p,.card p{margin:0;color:var(--grey);font-size:14px;line-height:1.8}
.card .arrow{display:inline-flex;margin-top:18px;color:var(--orange);font-weight:800}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:start}

/* Numérotation visuelle uniforme */
.feature::before,.card::before{counter-increment:fox-card;content:counter(fox-card,decimal-leading-zero);display:block;margin-bottom:19px;font-family:var(--font-heading);font-size:19px;color:var(--orange)}
.two-col,.card-grid{counter-reset:fox-card}

/* Boutons */
.btn{min-height:50px;padding:0 25px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid transparent}
.btn-orange{background:var(--orange);color:var(--black)}
.btn-dark{background:var(--black);color:#fff}
.btn-light{background:#fff;color:var(--black);border-color:var(--border)}

/* A propos */
.about-grid{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);gap:85px;align-items:center}
.about-visual{max-width:520px;position:relative}
.about-visual::before{content:"";position:absolute;left:-22px;top:-22px;width:190px;height:190px;background:var(--orange);border-radius:0}
.about-visual img{position:relative;z-index:1;width:100%;aspect-ratio:1/1.04;object-fit:cover;border-radius:0}
.timeline{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.timeline span{padding:9px 12px;border:1px solid var(--border);border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.09em}

/* Cartes tarifaires / solutions / app */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card{padding:34px;border:1px solid var(--border);background:#fff}
.price-card.featured{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-10px)}
.price-card.featured p{color:#c8c3bc}
.price{font-family:var(--font-heading);font-size:44px;color:var(--orange)}
.product-shell,.app-mock,.kanban{border:1px solid var(--border);background:#fff}
.app-top{padding:18px 22px;border-bottom:1px solid var(--border);font-weight:800}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.kanban-col{background:#fff;padding:20px;min-height:250px}
.job{padding:15px;margin:10px 0;border:1px solid var(--border);background:var(--cream)}

/* Footer */
.site-footer{background:#0c0c0c;color:#fff;padding:78px 0 28px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,.7fr);gap:58px}
.site-footer .footer-col strong{color:var(--orange);font-size:9px;letter-spacing:.18em}
.site-footer .footer-col a{font-size:11px;color:#b9b9b9}
.site-footer .footer-col a:hover{color:#fff}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:58px;padding-top:20px;color:#666;font-size:10px}
.site-footer .brand-logo-symbol{width:48px;height:48px}

/* Logos */
.brand-logo-symbol{width:48px;height:48px;object-fit:contain}
.brand-copy strong{font-family:var(--font-body);font-size:18px;font-weight:800;letter-spacing:-.04em}
.brand-copy span{font-family:var(--font-body);font-size:8px;font-weight:800;letter-spacing:.28em;margin-top:4px}

@media(max-width:1000px){
  .page-hero .inner,.about-grid,.split{grid-template-columns:1fr}
  .page-hero .visual{min-height:260px}
  .price-grid{grid-template-columns:1fr}
  .site-footer .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .page-hero{padding:58px 0}
  .page-hero h1{font-size:48px}
  .section{padding:78px 0}
  .two-col,.card-grid{grid-template-columns:1fr}
  .feature,.feature:nth-child(even),.card,.card:nth-child(even){padding:28px 0;border-right:0}
  .site-footer .footer-grid{grid-template-columns:1fr}
}


/* =========================================================
   FOX DIGITAL — INTÉGRATION PHOTOS SEO 19/08/2026
   ========================================================= */

/* À PROPOS — portrait détouré assis */
.about-visual-cutout {
  position: relative;
  min-height: 590px;
  max-width: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
}

.about-visual-cutout::before {
  display: none !important;
}

.about-orange-panel {
  position: absolute;
  z-index: -2;
  left: 7%;
  right: 2%;
  top: 13%;
  bottom: 3%;
  background: var(--orange);
  border-radius: 48% 48% 8px 8px;
}

.about-orange-panel::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -40px;
  top: -40px;
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 50%;
}

.about-visual-cutout img {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 28px 36px rgba(17,17,17,.12));
}

.about-photo-signature {
  position: absolute;
  z-index: 3;
  left: -24px;
  bottom: 42px;
  width: 230px;
  padding: 18px 20px;
  background: var(--black);
  color: var(--white);
}

.about-photo-signature span {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

.about-photo-signature strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}


/* CARRIÈRE — CTA final avec silhouette dynamique */
.career-final-cta-photo {
  position: relative;
  overflow: hidden;
}

.career-final-cta-grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 60px;
  align-items: center;
}

.career-final-cta-copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  text-align: left;
}

.career-final-cta-copy h2 {
  margin-left: 0;
  margin-right: 0;
}

.career-final-cta-copy p {
  margin-left: 0;
  margin-right: 0;
}

.career-final-visual {
  position: relative;
  align-self: stretch;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.career-final-visual img {
  position: absolute;
  z-index: 2;
  right: -10px;
  bottom: -48px;
  width: min(590px, 48vw);
  height: auto;
  max-height: 700px;
  object-fit: contain;
  filter: drop-shadow(0 25px 26px rgba(17,17,17,.08));
}

.career-final-circle {
  position: absolute;
  z-index: 1;
  width: 410px;
  height: 410px;
  right: 34px;
  top: 80px;
  border: 1px solid rgba(17,17,17,.24);
  border-radius: 50%;
}

.career-final-word {
  position: absolute;
  z-index: 0;
  top: 70px;
  right: -12px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(86px, 9vw, 150px);
  line-height: 1;
  font-weight: 600;
  color: rgba(17,17,17,.08);
}

@media (max-width: 1000px) {
  .about-visual-cutout {
    min-height: 520px;
    margin-inline: auto;
  }

  .career-final-cta-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .career-final-cta-copy {
    text-align: center;
    margin-inline: auto;
  }

  .career-final-cta-copy p,
  .career-final-cta-copy h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .career-final-visual {
    min-height: 500px;
    width: min(650px, 100%);
    margin-inline: auto;
  }

  .career-final-visual img {
    right: 50%;
    transform: translateX(50%);
    width: min(540px, 85vw);
  }

  .career-final-circle {
    right: 50%;
    transform: translateX(50%);
  }

  .career-final-word {
    right: 50%;
    transform: translateX(50%);
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .about-visual-cutout {
    min-height: 440px;
  }

  .about-photo-signature {
    left: 0;
    bottom: 18px;
    width: 205px;
  }

  .about-orange-panel {
    left: 9%;
    right: 4%;
    top: 15%;
  }

  .career-final-visual {
    min-height: 390px;
  }

  .career-final-visual img {
    bottom: -34px;
    width: min(430px, 100vw);
  }

  .career-final-circle {
    width: 300px;
    height: 300px;
    top: 55px;
  }

  .career-final-word {
    top: 36px;
    font-size: 82px;
  }
}


/* =========================================================
   CORRECTION VISUELLE — SECTION "MA FAÇON DE TRAVAILLER"
   La silhouette reste entière, le visage n'est plus coupé.
   ========================================================= */

.career-story-pointing {
  position: relative;
  max-width: 560px;
  width: 100%;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

.career-story-pointing .story-image-accent {
  display: none;
}

.story-pointing-backdrop {
  position: absolute;
  z-index: -1;
  left: 5%;
  top: 10%;
  width: 64%;
  height: 58%;
  background: var(--orange);
  border-radius: 2px;
}

.story-pointing-backdrop::after {
  content: "";
  position: absolute;
  left: 72%;
  top: 12%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.career-story-pointing img {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  height: 640px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.22));
}

.career-story-pointing .story-image-caption {
  right: auto;
  left: 0;
  bottom: 18px;
  width: 225px;
  padding: 18px 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

@media (max-width: 1000px) {
  .career-story-pointing {
    min-height: 590px;
    max-width: 520px;
  }

  .career-story-pointing img {
    height: 575px;
  }
}

@media (max-width: 700px) {
  .career-story-pointing {
    min-height: 510px;
    max-width: 100%;
  }

  .career-story-pointing img {
    height: 500px;
    max-width: 96%;
  }

  .story-pointing-backdrop {
    left: 4%;
    top: 12%;
    width: 68%;
    height: 55%;
  }

  .career-story-pointing .story-image-caption {
    left: 8px;
    bottom: 6px;
    width: 205px;
  }
}


/* =========================================================
   HERO CARRIÈRE — PORTRAIT PREMIUM
   ========================================================= */
.career-portrait img[src*="maeva-coach-carriere-toulouse-portrait-professionnel"],
.hero-portrait img[src*="maeva-coach-carriere-toulouse-portrait-professionnel"],
.career-hero-visual img[src*="maeva-coach-carriere-toulouse-portrait-professionnel"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 50%;
  filter: saturate(.92) contrast(1.02);
}


/* ===== SEO/GEO CONTENT BLOCKS — FOX DIGITAL ===== */
.seo-entity-intro{padding:22px 0;border-top:1px solid rgba(20,20,20,.08);border-bottom:1px solid rgba(20,20,20,.08);background:#fff}
.seo-entity-intro p{max-width:1080px;margin:0 auto;font-size:15px;line-height:1.75;color:#5f5b57}
.seo-entity-intro strong{color:#111;font-weight:700}
.seo-faq{padding:90px 0;background:#fff}
.seo-faq h2{margin:10px 0 32px;font-size:clamp(38px,5vw,72px);line-height:.98}
.seo-faq-list{border-top:1px solid rgba(20,20,20,.14)}
.seo-faq-item{border-bottom:1px solid rgba(20,20,20,.14);padding:0}
.seo-faq-item summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-weight:700;position:relative}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary:after{content:"+";position:absolute;right:4px;top:18px;font-size:26px;color:#fd6215;font-weight:400}
.seo-faq-item[open] summary:after{content:"–"}
.seo-faq-item p{max-width:900px;margin:0;padding:0 50px 24px 0;line-height:1.75;color:#68615c}
@media(max-width:700px){.seo-faq{padding:64px 0}.seo-faq-item summary{padding-right:36px}}

/* =========================================================
   FOX DIGITAL — LOGO FONDU DANS LE BANDEAU
   ========================================================= */
.site-header{
  background:rgba(247,243,238,.97) !important;
}
.brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.brand img,
.brand-logo-official,
.brand-logo-symbol,
.brand-logo{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
}
.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:1 !important;
}
.brand-copy strong{
  color:#111 !important;
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
}
.brand-copy span{
  color:#111 !important;
  margin-top:4px !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.28em !important;
}
@media(max-width:700px){
  .brand img,
  .brand-logo-official,
  .brand-logo-symbol,
  .brand-logo{
    width:46px !important;
    height:46px !important;
  }
  .brand-copy strong{font-size:17px !important}
}

/* =========================================================
   FOX DIGITAL — SYSTÈME TYPO + NAVIGATION FINAL
   Plus Jakarta Sans + Lora / #FD6215
   ========================================================= */
:root{
  --fox-orange:#fd6215;
  --fox-ink:#111111;
  --fox-cream:#f7f3ee;
  --fox-sans:"Plus Jakarta Sans",Arial,sans-serif;
  --fox-serif:"Lora",Georgia,serif;
}
html,body{font-family:var(--fox-sans)!important;color:var(--fox-ink)}
body,p,li,a,button,input,textarea,select,summary,.eyebrow,.announcement,.brand-copy,.nav-links,.desktop-nav,.mobile-menu{font-family:var(--fox-sans)!important}

/* Main structural typography */
h1,h2,h3,h4,
.hero-copy h1,.page-hero h1,.career-hero-content h1,
.section h2,.section-head h2,.career-section-heading h2,.career-story-content h2,
.career-audience h2,.career-final-cta h2,.seo-faq h2,.service h3,.offer h3,.career-service h3,.audience-row h3{
  font-family:var(--fox-sans)!important;
  font-style:normal!important;
  color:var(--fox-ink)!important;
}
h1,.hero-copy h1,.page-hero h1,.career-hero-content h1{
  font-weight:500!important;
  letter-spacing:-.055em!important;
  line-height:.98!important;
}
h2,.section h2,.section-head h2,.career-section-heading h2,.career-story-content h2,.career-audience h2,.career-final-cta h2,.seo-faq h2{
  font-weight:500!important;
  letter-spacing:-.045em!important;
  line-height:1.02!important;
}
h3,h4,.service h3,.offer h3,.career-service h3,.audience-row h3{
  font-weight:600!important;
  letter-spacing:-.025em!important;
}

/* Editorial accent only — readable serif */
.accent,.orange,em,
h1 em,h2 em,h3 em,.hero-copy h1 .accent,
.career-hero-content h1 em,.career-section-heading h2 em,.career-story-content h2 em,.career-audience h2 em,
.quote,blockquote,.story-big-text{
  font-family:var(--fox-serif)!important;
  font-style:italic!important;
  font-weight:500!important;
  color:var(--fox-orange)!important;
  letter-spacing:-.025em!important;
}

/* Functional text */
p,.lead{font-size:15px!important;line-height:1.72!important;letter-spacing:-.006em!important}
.eyebrow{font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important}
.btn{font-family:var(--fox-sans)!important;font-weight:700!important;letter-spacing:-.01em!important}

/* Root navigation — the actual homepage architecture */
.nav-links{display:flex!important;align-items:center!important;gap:clamp(16px,1.6vw,28px)!important}
.nav-links>a:not(.btn){position:relative;font-size:12px!important;font-weight:650!important;white-space:nowrap;padding:32px 0 28px!important;color:#111!important}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:var(--fox-orange);transition:right .2s ease}
.nav-links>a:not(.btn):hover{color:var(--fox-orange)!important}
.nav-links>a:not(.btn):hover::after{right:0}

/* Inner-page navigation */
.desktop-nav{display:flex!important;align-items:center!important;gap:clamp(16px,1.6vw,28px)!important;margin-left:auto!important;margin-right:24px!important}
.desktop-nav a{font-family:var(--fox-sans)!important;font-size:12px!important;font-weight:650!important;white-space:nowrap!important;color:#111!important}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--fox-orange)!important}

/* Preserve brand color */
.btn-orange,.announcement{background:var(--fox-orange)!important}
.eyebrow:before,.eyebrow>span,.desktop-nav a::after{background:var(--fox-orange)!important}

/* Sizes */
.hero-copy h1,.career-hero-content h1,.page-hero h1{font-size:clamp(58px,5.5vw,94px)!important}
.section h2,.section-head h2,.career-section-heading h2,.career-story-content h2,.career-audience h2,.career-final-cta h2,.seo-faq h2{font-size:clamp(40px,4.4vw,68px)!important}

@media(max-width:1050px){
  .nav-links{gap:18px!important}.nav-links>a:not(.btn){font-size:12px!important}
}
@media(max-width:850px){
  .nav-links{display:none!important}
  .hero-copy h1,.career-hero-content h1,.page-hero h1{font-size:clamp(44px,12vw,62px)!important}
}

/* =========================================================
   FOX DIGITAL — SECTION APPROCHE / ACCUEIL
   IMPORTANT : ce fichier est celui réellement chargé par index.html
   ========================================================= */

.approach-section{
  background:#111111 !important;
  color:#ffffff !important;
  padding:96px 0 !important;
  min-height:auto !important;
}

.approach-section .approach-layout{
  width:min(1180px, calc(100% - 48px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(360px, .86fr) minmax(0, 1.14fr) !important;
  gap:clamp(72px, 7vw, 118px) !important;
  align-items:center !important;
}

.approach-section .approach-visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
}

.approach-section .approach-visual-frame{
  position:relative !important;
  width:min(440px, 100%) !important;
  height:540px !important;
  border:1px solid rgba(253,98,21,.9) !important;
  background:#151515 !important;
  overflow:hidden !important;
}

.approach-section .approach-visual-frame::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:84px !important;
  height:5px !important;
  background:#fd6215 !important;
  z-index:2 !important;
}

.approach-section .approach-visual-frame img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 31% !important;
  background:transparent !important;
  filter:none !important;
}

.approach-section .approach-copy{
  width:100% !important;
  max-width:690px !important;
  color:#ffffff !important;
}

.approach-section .approach-copy .eyebrow{
  color:#fd6215 !important;
  margin:0 0 18px !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
}

.approach-section .approach-copy h2{
  margin:0 0 26px !important;
  max-width:690px !important;
  color:#ffffff !important;
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:clamp(48px, 4.15vw, 66px) !important;
  font-weight:500 !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.approach-section .approach-copy h2 .accent{
  display:block !important;
  margin-top:4px !important;
  color:#fd6215 !important;
  font-family:"Lora", Georgia, serif !important;
  font-size:.92em !important;
  font-style:italic !important;
  font-weight:500 !important;
  line-height:1.05 !important;
}

.approach-section .approach-quote{
  display:block !important;
  margin:0 0 22px !important;
  padding:0 0 0 20px !important;
  max-width:670px !important;
  border-left:2px solid #fd6215 !important;
  color:#ffffff !important;
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:20px !important;
  font-style:normal !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  letter-spacing:-.015em !important;
}

.approach-section .approach-intro{
  display:block !important;
  margin:0 0 28px !important;
  max-width:660px !important;
  color:#d6d0ca !important;
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.8 !important;
}

.approach-section .approach-points{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 30px !important;
  margin:0 0 30px !important;
}

.approach-section .approach-point{
  min-height:60px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border-top:1px solid rgba(255,255,255,.18) !important;
  color:#ffffff !important;
}

.approach-section .approach-point span{
  flex:0 0 auto !important;
  color:#fd6215 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
}

.approach-section .approach-point strong{
  color:#ffffff !important;
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}

.approach-section .approach-copy .btn-orange{
  min-height:50px !important;
  padding:0 24px !important;
  background:#fd6215 !important;
  border-color:#fd6215 !important;
  color:#111111 !important;
}

.contact-proof-section .contact-proof-points{
  gap:16px !important;
  margin:8px 0 34px !important;
}

.contact-proof-section .approach-point{
  min-height:150px !important;
  align-items:flex-start !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:22px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.045) !important;
}

.contact-proof-section .approach-point span{
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:clamp(48px,6vw,86px) !important;
  line-height:.9 !important;
  letter-spacing:-.04em !important;
}

.contact-proof-section .approach-point strong{
  max-width:28ch !important;
  font-size:15px !important;
  line-height:1.35 !important;
}

@media(max-width:900px){
  .approach-section .approach-layout{
    grid-template-columns:1fr !important;
    gap:48px !important;
  }
  .approach-section .approach-visual-frame{
    width:min(430px,100%) !important;
    height:520px !important;
    margin:0 auto !important;
  }
  .approach-section .approach-copy{
    max-width:760px !important;
    margin:0 auto !important;
  }
}

@media(max-width:600px){
  .approach-section{
    padding:72px 0 !important;
  }
  .approach-section .approach-layout{
    width:min(100% - 28px,1180px) !important;
  }
  .approach-section .approach-visual-frame{
    height:440px !important;
  }
  .approach-section .approach-copy h2{
    font-size:clamp(38px,10vw,50px) !important;
  }
  .approach-section .approach-quote{
    font-size:18px !important;
  }
  .approach-section .approach-points{
    grid-template-columns:1fr !important;
  }
  .contact-proof-section .approach-point{
    min-height:132px !important;
  }
}

/* =========================================================
   FOX DIGITAL — HERO CARRIÈRE & IMAGE SANS PHOTO
   Clarifier · Positionner · Agir
   ========================================================= */

.career-hero-no-photo{
  background:var(--cream, #f7f3ee) !important;
  min-height:auto !important;
  padding:92px 0 84px !important;
  overflow:hidden;
}

.career-hero-no-photo .career-hero-grid{
  min-height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.02fr) minmax(420px, .98fr) !important;
  gap:clamp(70px, 7vw, 120px) !important;
  align-items:center !important;
  padding:0 !important;
}

.career-hero-no-photo .career-hero-content{
  max-width:760px !important;
}

.career-hero-no-photo .career-hero-content h1{
  margin:0 0 28px !important;
  font-size:clamp(62px, 5.8vw, 96px) !important;
  line-height:.95 !important;
  letter-spacing:-.055em !important;
}

.career-hero-no-photo .career-hero-content h1 em{
  display:block !important;
  color:#fd6215 !important;
  margin-top:4px !important;
}

.career-hero-no-photo .career-hero-lead{
  margin:0 0 12px !important;
  max-width:650px !important;
  font-size:17px !important;
  line-height:1.6 !important;
  color:#111 !important;
  font-weight:700 !important;
}

.career-hero-no-photo .career-hero-text{
  margin:0 !important;
  max-width:660px !important;
  color:#716961 !important;
  font-size:15px !important;
  line-height:1.8 !important;
}

.career-hero-no-photo .hero-actions{
  margin-top:30px !important;
}

/* Colonne droite */
.career-hero-steps{
  position:relative;
  display:grid !important;
  grid-template-columns:1fr !important;
  border-top:1px solid rgba(17,17,17,.14);
  border-bottom:1px solid rgba(17,17,17,.14);
}

.career-hero-steps::before{
  content:"";
  position:absolute;
  top:-54px;
  right:-90px;
  width:280px;
  height:280px;
  border:1px solid rgba(253,98,21,.18);
  border-radius:50%;
  pointer-events:none;
}

.career-hero-step{
  position:relative;
  display:grid;
  grid-template-columns:72px 1fr;
  grid-template-areas:
    "top title"
    "top text";
  column-gap:26px;
  padding:30px 10px 30px 0;
  border-bottom:1px solid rgba(17,17,17,.14);
}

.career-hero-step:last-child{
  border-bottom:0;
}

.career-step-top{
  grid-area:top;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.career-step-number{
  color:#fd6215 !important;
  font-family:var(--font-ui, "DM Sans", sans-serif) !important;
  font-size:24px !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
}

.career-step-line{
  display:block;
  width:30px;
  height:2px;
  background:#fd6215;
}

.career-hero-step h2{
  grid-area:title;
  margin:0 0 8px !important;
  color:#111 !important;
  font-family:var(--font-ui, "DM Sans", sans-serif) !important;
  font-size:clamp(30px, 2.3vw, 42px) !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
  font-weight:600 !important;
}

.career-hero-step p{
  grid-area:text;
  margin:0 !important;
  max-width:520px;
  color:#6e665f !important;
  font-size:14px !important;
  line-height:1.7 !important;
}

/* Accent visuel discret */
.career-hero-step::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fd6215;
  transform:translateY(-50%);
  opacity:.35;
}

.career-hero-step:hover{
  background:rgba(253,98,21,.035);
}

@media(max-width:980px){
  .career-hero-no-photo .career-hero-grid{
    grid-template-columns:1fr !important;
    gap:56px !important;
  }

  .career-hero-no-photo .career-hero-content{
    max-width:800px !important;
  }

  .career-hero-steps{
    max-width:760px;
  }
}

@media(max-width:640px){
  .career-hero-no-photo{
    padding:68px 0 60px !important;
  }

  .career-hero-no-photo .career-hero-content h1{
    font-size:clamp(46px, 13vw, 64px) !important;
  }

  .career-hero-step{
    grid-template-columns:54px 1fr;
    column-gap:18px;
    padding:24px 0;
  }

  .career-step-number{
    font-size:20px !important;
  }

  .career-hero-step h2{
    font-size:30px !important;
  }
}
/* =========================================================
   CARRIÈRE & IMAGE — OFFRES SIMPLIFIÉES
   ========================================================= */

.career-offers {
  padding: 115px 0;
  background: #f7f3ee;
}

.career-offers-heading {
  max-width: 900px;
  margin-bottom: 65px;
}

.career-offers-heading h2 {
  max-width: 850px;
  margin: 22px 0 24px;
  color: #111;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
}

.career-offers-heading h2 em {
  display: block;
  color: #fd6215;
}

.career-offers-heading > p {
  max-width: 650px;
  margin: 0;
  color: #6f6861;
  font-size: 16px;
  line-height: 1.75;
}


/* =========================================================
   3 OFFRES — VERSION CLAIRE + SURVOL PREMIUM
   ========================================================= */

.career-offers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(17,17,17,.15);
  border-bottom: 1px solid rgba(17,17,17,.15);
}


/* CARTE */

.career-offer {
  position: relative;
  display: flex;
  flex-direction: column;

  padding: 42px 38px 45px;
  min-height: 560px;

  background: transparent;
  color: #111;

  transition:
    background-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.career-offer + .career-offer {
  border-left: 1px solid rgba(17,17,17,.15);
}


/* SUPPRESSION DÉFINITIVE DE LA CARTE NOIRE */

.career-offer-featured {
  background: transparent;
  color: #111;
}


/* SURVOL */

.career-offer:hover {
  background: rgba(253,98,21,.075);
  transform: translateY(-7px);

  box-shadow:
    0 22px 55px rgba(17,17,17,.08),
    inset 0 4px 0 #fd6215;

  z-index: 3;
}


/* NUMÉRO */

.career-offer-number {
  display: block;
  margin-bottom: 55px;

  color: #fd6215;

  font-size: 13px;
  font-weight: 700;
}


/* LABEL */

.career-offer-tag {
  display: block;
  margin-bottom: 17px;

  color: #fd6215;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}


/* TITRES */

.career-offer h3,
.career-offer-featured h3 {
  margin: 0 0 23px;

  color: #111 !important;

  font-size: clamp(29px, 2.4vw, 39px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.04em;
}


/* TEXTE */

.career-offer p,
.career-offer-featured p {
  margin: 0 0 27px;

  color: #716a63 !important;

  font-size: 14px;
  line-height: 1.7;
}


/* LISTE */

.career-offer ul {
  margin: 0 0 35px;
  padding: 0;

  list-style: none;
}


.career-offer li,
.career-offer-featured li {
  padding: 9px 0;

  color: #34302d !important;

  font-size: 13px;

  border-bottom:
    1px solid rgba(17,17,17,.1) !important;
}


/* LIEN EN BAS */

.career-offer-link,
.career-offer-featured .career-offer-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;

  margin-top: auto;

  color: #111 !important;

  font-size: 13px;
  font-weight: 700;
  text-decoration: none;

  transition:
    color .2s ease,
    gap .2s ease;
}


.career-offer-link:hover,
.career-offer-featured .career-offer-link:hover {
  color: #fd6215 !important;
  gap: 14px;
}


/* =========================================================
   RESPONSIVE DES 3 OFFRES
   ========================================================= */

/* TABLETTE */

@media (max-width: 1000px) {

  .career-offers-grid {
    grid-template-columns: 1fr;
  }

  .career-offer {
    min-height: auto;
    padding: 40px 30px;
  }

  .career-offer + .career-offer {
    border-left: 0;
    border-top: 1px solid rgba(17,17,17,.15);
  }

  .career-offer-number {
    margin-bottom: 28px;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .career-offer {
    padding: 32px 5px;
  }

  .career-offer-number {
    margin-bottom: 22px;
  }

  .career-offer h3,
  .career-offer-featured h3 {
    font-size: 29px;
  }

  .career-offer p,
  .career-offer-featured p {
    font-size: 14px;
  }

}


/* Le tactile ne dépend jamais du hover */

@media (hover: none) {

  .career-offer:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
  }

}


/* Différence */

.career-difference {
  padding: 100px 0;
  background: #fff;
}

.career-difference-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(70px, 8vw, 140px);
  align-items: start;
}

.career-difference h2 {
  max-width: 560px;
  margin: 22px 0 0;
  color: #111;
  font-size: clamp(44px, 4vw, 65px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.career-difference h2 em {
  display: block;
  color: #fd6215;
}

.career-difference-content {
  padding-top: 40px;
}

.career-difference-content p {
  max-width: 650px;
  color: #6f6861;
  font-size: 15px;
  line-height: 1.8;
}

.career-difference-content .career-difference-lead {
  margin-top: 0;
  color: #111;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
}


/* Responsive */

@media (max-width: 900px) {

  .career-offers-grid {
    grid-template-columns: 1fr;
  }

  .career-offer {
    min-height: auto;
  }

  .career-offer + .career-offer {
    border-left: 0;
    border-top: 1px solid rgba(17,17,17,.15);
  }

  .career-offer-number {
    margin-bottom: 30px;
  }

  .career-difference-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .career-difference-content {
    padding-top: 0;
  }

}

@media (max-width: 600px) {

  .career-offers,
  .career-difference {
    padding: 75px 0;
  }

  .career-offer {
    padding: 35px 25px;
  }

}

/* ===== SUBPAGE NAVIGATION — FOX DIGITAL ===== */
.subpage-back {
  background: var(--cream, #f7f3ed);
  padding: 22px 0 0;
}

.subpage-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-history {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17,17,17,.16);
  border-radius: 50%;
  background: #fff;
  color: #fd6215;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  line-height: 1;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

.back-history:hover {
  transform: translateX(-3px);
  border-color: #fd6215;
  background: rgba(253,98,21,.07);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #111;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease;
}
.back-link span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(17,17,17,.16);
  border-radius: 50%;
  color: #fd6215;
  font-size: 16px;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.back-link:hover { color: #fd6215; }
.back-link:hover span {
  transform: translateX(-3px);
  border-color: #fd6215;
  background: rgba(253,98,21,.07);
}
@media (max-width: 768px) {
  .subpage-back { padding-top: 16px; }
  .back-history { width: 30px; height: 30px; }
  .back-link { font-size: 11px; }
  .back-link span { width: 28px; height: 28px; }
}
/* =========================================================
   PAGE CV — MÉTHODE
   ========================================================= */

.cv-method {
  background: #fff;
}

.cv-method-heading {
  max-width: 900px;
  margin-bottom: 55px;
}

.cv-method-heading h2 {
  max-width: 850px;
  margin-bottom: 22px;
}

.cv-method-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--grey);
  font-size: 16px;
  line-height: 1.75;
}


/* Grille */

.cv-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}


/* Carte */

.cv-method-card {
  position: relative;

  min-height: 270px;

  padding: 38px 42px;

  background: #fff;

  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  transition:
    background-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}


.cv-method-card:hover {
  background: rgba(253, 98, 21, .06);

  transform: translateY(-5px);

  box-shadow:
    0 20px 45px rgba(17,17,17,.06),
    inset 0 3px 0 #fd6215;

  z-index: 2;
}


/* Numéro */

.cv-method-number {
  display: block;

  margin-bottom: 28px;

  color: #fd6215;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .08em;
}


/* Titre */

.cv-method-card h3 {
  margin: 0 0 15px;

  color: #111;

  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;

  font-size: 28px;
  font-weight: 600;

  line-height: 1.1;
  letter-spacing: -.035em;
}


/* Texte */

.cv-method-card p {
  max-width: 480px;

  margin: 0;

  color: #6f6861;

  font-size: 14px;
  line-height: 1.75;
}


/* TABLETTE */

@media (max-width: 900px) {

  .cv-method-grid {
    grid-template-columns: 1fr;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .cv-method-heading {
    margin-bottom: 40px;
  }

  .cv-method-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .cv-method-card h3 {
    font-size: 25px;
  }

}


/* Pas d'effet dépendant du hover sur écran tactile */

@media (hover: none) {

  .cv-method-card:hover {
    background: #fff;
    transform: none;
    box-shadow: none;
  }

}

/* =========================================================
   FOX DIGITAL — GARDE-FOUS GLOBAUX / RESPONSIVE FINAL
   ========================================================= */

html {
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

main,
section,
header,
footer,
.container,
.grid,
[class*="grid"],
[class*="-grid"] {
  min-width: 0;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

a,
p,
li,
h1,
h2,
h3,
h4,
span {
  overflow-wrap: break-word;
}

@media (max-width: 1000px) {
  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .desktop-nav,
  .nav-cta {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
  }

  .mobile-menu {
    top: 88px;
  }

  .announcement + .site-header .mobile-menu {
    top: 119px;
  }
}

@media (max-width: 700px) {
  .container {
    width: calc(100% - 28px);
  }

  .announcement {
    display: none;
  }

  .site-header .navbar {
    height: 76px;
  }

  .mobile-menu,
  .announcement + .site-header .mobile-menu {
    top: 76px;
  }

  .hero-actions {
    align-items: stretch;
    gap: 14px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .page-hero .inner {
    gap: 36px;
  }

  .page-hero .visual {
    min-height: 220px;
  }

  .price-card.featured {
    transform: none;
  }

  .seo-faq-item p {
    padding-right: 0;
  }
}

/* =========================================================
   PAGE CV — OFFRES
   ========================================================= */

.cv-offers {
  background: var(--cream);
}

.cv-offers-heading {
  max-width: 850px;
}

.cv-offers-heading p {
  max-width: 700px;
  margin: 0;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.75;
}

.cv-offers .price-grid {
  align-items: stretch;
  gap: 16px;
}

.cv-offers .price-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 36px;
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.cv-offers .price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(253,98,21,.35);
  box-shadow: 0 20px 45px rgba(17,17,17,.06);
}

.cv-offers .price-card.featured {
  background: #fff;
  color: #111;
  border-color: rgba(253,98,21,.55);
  box-shadow: inset 0 5px 0 var(--orange), 0 18px 44px rgba(253,98,21,.08);
  transform: none;
}

.cv-offers .price-card.featured:hover {
  transform: translateY(-5px);
}

.cv-offers .price-card h3 {
  margin: 10px 0 14px;
  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.035em;
}

.cv-offers .price-card.featured h3 {
  color: #111 !important;
}

.cv-offers .price-card p {
  margin: 0 0 24px;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.7;
}

.cv-offers .price-card.featured p {
  color: var(--grey);
}

.cv-offers .price-card ul {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.cv-offers .price-card li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.cv-offers .price-card.featured li {
  color: #111;
  border-color: var(--border);
}

.offer-kicker {
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: #111;
  font-size: 12px;
  font-weight: 800;
}

.price-card.featured .offer-link {
  color: var(--orange);
}

.offer-link:hover {
  color: var(--orange);
}

@media (max-width: 900px) {
  .cv-offers .price-grid {
    grid-template-columns: 1fr;
  }

  .cv-offers .price-card {
    min-height: auto;
  }
}

@media (hover: none) {
  .cv-offers .price-card:hover,
  .cv-offers .price-card.featured:hover {
    transform: none;
    box-shadow: none;
  }
}
/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1000px) {

  .formation-hero-visual {
    min-height: 440px;
    max-width: 720px;

    margin-inline: auto;
  }


  .formation-hero-art {
    width: 680px;
    height: 470px;

    right: 50%;

    transform:
      translate(50%, -50%);
  }


  .formation-hero-art img {
    width: 145%;

    transform:
      scale(1.08);
  }


  .formation-orbit-one {
    width: 260px;
    height: 260px;

    right: 7%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .formation-hero-visual {
    min-height: 330px;

    margin-top: 10px;
  }


  .formation-hero-art {
    width: 520px;
    height: 350px;

    right: 50%;

    transform:
      translate(50%, -50%);
  }


  .formation-hero-art img {
    width: 145%;
  }


  .formation-orbit-one {
    width: 210px;
    height: 210px;

    right: 4%;
    top: 30px;
  }


  .formation-orbit-two {
    display: none;
  }


  .formation-hero-visual::after {
    display: none;
  }

}
/* =========================================================
   PETIT TITRE FORMATIONS
   ========================================================= */

.formations-hero .eyebrow {
  display: flex;
  align-items: center;

  gap: 14px;

  margin: 0 0 28px;

  color: #111;

  font-family:
    var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;
}


.formations-hero .eyebrow::before {
  content: "";

  display: block;

  width: 28px;
  height: 2px;

  background: #fd6215;
}


/* =========================================================
   TITRE
   ========================================================= */

.formations-hero h1 {
  max-width: 820px;

  margin:
    0
    0
    28px;

  color: #111;

  font-family:
    var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;

  font-size:
    clamp(72px, 6vw, 108px) !important;

  font-weight: 500 !important;

  line-height: .91 !important;

  letter-spacing: -.065em !important;
}


/* Ligne orange */

.formations-hero h1 em {
  display: block;

  margin-top: 10px;

  color: #fd6215 !important;

  font-family:
    var(--fox-serif, "Lora", Georgia, serif) !important;

  font-size: .82em;

  font-style: italic !important;

  font-weight: 500 !important;

  line-height: .96 !important;

  letter-spacing: -.035em !important;
}


/* =========================================================
   TEXTE
   ========================================================= */

.formations-hero-text {
  max-width: 750px;

  margin: 0;

  color: #6f6862;

  font-family:
    var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif);

  font-size: 15px !important;

  line-height: 1.75 !important;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.formations-hero-actions {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 32px;
}


.formations-hero-actions .btn {
  min-height: 52px;

  padding:
    0
    27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   GRAND ÉCRAN
   ========================================================= */

@media (min-width: 1500px) {

  .formations-hero {
    min-height: 700px;
  }


  .formations-hero-inner {
    min-height: 700px;
  }


  .formations-hero-content {
    max-width: 900px;
  }


  .formations-hero h1 {
    max-width: 900px;

    font-size:
      clamp(86px, 5.8vw, 118px) !important;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1000px) {

  .formations-hero {
    min-height: 610px;
  }


  .formations-hero-inner {
    width: min(
      calc(100% - 40px),
      1450px
    );

    min-height: 610px;

    padding:
      70px
      0;
  }


  .formations-hero-content {
    max-width: 760px;
  }


  .formations-hero h1 {
    font-size:
      clamp(64px, 9vw, 88px) !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .formations-hero {
    min-height: auto;
  }


  .formations-hero-inner {
    width:
      calc(100% - 28px);

    min-height: auto;

    padding:
      65px
      0
      70px;
  }


  .formations-hero .eyebrow {
    margin-bottom: 24px;
  }


  .formations-hero h1 {
    max-width: 100%;

    margin-bottom: 25px;

    font-size:
      clamp(50px, 14vw, 68px) !important;

    line-height: .94 !important;

    letter-spacing: -.055em !important;
  }


  .formations-hero h1 em {
    margin-top: 8px;

    font-size: .86em;
  }


  .formations-hero-text {
    max-width: 100%;

    font-size: 14px !important;

    line-height: 1.7 !important;
  }


  .formations-hero-actions {
    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 12px;

    margin-top: 28px;
  }


  .formations-hero-actions .btn {
    width: 100%;

    max-width: 340px;
  }

}

/* =========================================================
   FORMATIONS & ENTREPRENEURS — HERO CENTRÉ XXL FINAL
   ========================================================= */
.editorial-hero{min-height:720px;display:flex;align-items:center;background:var(--cream,#f7f3ee);border-bottom:1px solid var(--border);}
.editorial-hero-inner{width:min(calc(100% - 80px),1500px);min-height:720px;display:flex;align-items:center;justify-content:center;margin-inline:auto;padding:92px 0 98px;}
.editorial-hero-content{width:100%;max-width:1380px;text-align:center;}
.editorial-hero .eyebrow{justify-content:center;margin-bottom:40px;}
.editorial-hero h1{max-width:1380px;margin:0 auto;font-family:var(--fox-sans,"Plus Jakarta Sans",Arial,sans-serif)!important;font-size:clamp(72px,7.1vw,132px)!important;font-weight:500!important;line-height:.93!important;letter-spacing:-.064em!important;text-align:center;}
.editorial-hero h1 em{display:block;margin-top:14px;font-family:var(--fox-serif,"Lora",Georgia,serif)!important;color:#fd6215!important;font-size:.80em!important;font-style:italic!important;font-weight:500!important;line-height:1!important;letter-spacing:-.038em!important;}
.editorial-hero .hero-lead{max-width:800px;margin:43px auto 0;color:#716a63;font-size:17px!important;line-height:1.7!important;text-align:center;}
.editorial-hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:38px;}
.editorial-hero-actions .btn{min-height:60px;padding:0 34px;font-size:13px;}

/* FORMATIONS — cartes */
.training-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border);}
.training-card{position:relative;min-height:370px;display:flex;flex-direction:column;padding:36px 30px;background:#fff;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .28s ease,transform .28s ease,box-shadow .28s ease;}
.training-card:hover{background:rgba(253,98,21,.06);transform:translateY(-5px);box-shadow:0 22px 55px rgba(17,17,17,.07),inset 0 3px 0 #fd6215;z-index:2;}
.training-number{margin-bottom:42px;color:#fd6215;font-size:12px;font-weight:800;}
.training-tag{margin-bottom:13px;color:#fd6215;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.training-card h3{margin:0 0 17px;font-family:var(--fox-sans,"Plus Jakarta Sans",Arial,sans-serif)!important;font-size:28px!important;font-weight:600!important;}
.training-card p{margin:0 0 24px;font-size:14px!important;}
.training-card ul{display:grid;gap:8px;margin:0 0 24px;padding:18px 0 0;border-top:1px solid rgba(17,17,17,.1);list-style:none;}
.training-card li{position:relative;padding-left:16px;color:#211f1d;font-size:12.5px;font-weight:650;line-height:1.45;}
.training-card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#fd6215;}
.training-link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;color:#111;font-size:12px;font-weight:800;}
.training-card:hover .training-link{color:#fd6215;}
.training-note{margin-top:34px;padding-top:28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:30px;}
.training-note p{max-width:780px;margin:0;}

/* ENTREPRENEURS — cartes */
.entrepreneur-services{background:#fff;}
.entrepreneur-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border);}
.entrepreneur-card{position:relative;min-height:470px;display:flex;flex-direction:column;padding:40px 36px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;transition:background .28s ease,transform .28s ease,box-shadow .28s ease;}
.entrepreneur-card:hover{background:rgba(253,98,21,.06);transform:translateY(-5px);box-shadow:0 22px 55px rgba(17,17,17,.07),inset 0 3px 0 #fd6215;z-index:2;}
.entrepreneur-card .number{margin-bottom:48px;color:#fd6215;font-size:12px;font-weight:800;}
.entrepreneur-card .tag{margin-bottom:14px;color:#fd6215;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.entrepreneur-card h3{margin:0 0 18px;font-family:var(--fox-sans,"Plus Jakarta Sans",Arial,sans-serif)!important;font-size:31px!important;font-weight:600!important;}
.entrepreneur-card p{margin:0 0 24px;font-size:14px!important;}
.entrepreneur-card ul{margin:0 0 28px;padding:0;list-style:none;}
.entrepreneur-card li{padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
.entrepreneur-link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;color:#111;font-size:12px;font-weight:800;}
.entrepreneur-card:hover .entrepreneur-link{color:#fd6215;}
.entrepreneur-proof{background:var(--cream,#f7f3ee);}
.proof-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start;}
.proof-grid h2{margin:18px 0 0;font-size:clamp(44px,4.3vw,68px)!important;}
.proof-list{border-top:1px solid var(--border);}
.proof-item{display:grid;grid-template-columns:65px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid var(--border);}
.proof-item span{color:#fd6215;font-size:13px;font-weight:800;}
.proof-item h3{margin:0 0 6px;font-size:22px!important;}
.proof-item p{margin:0;font-size:13px!important;}

/* CTA éditorial */
.cta-section{padding:115px 0;background:var(--cream,#f7f3ee);text-align:center;}
.cta-section .container{max-width:1180px;}
.cta-section .eyebrow{justify-content:center;}
.cta-section h2{max-width:1100px;margin:24px auto 24px;font-size:clamp(56px,6vw,98px)!important;}
.cta-section p{max-width:700px;margin:0 auto 30px;font-size:16px!important;}

@media(max-width:1100px){.training-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:1000px){.editorial-hero,.editorial-hero-inner{min-height:650px}.editorial-hero-inner{width:min(calc(100% - 40px),1500px);padding:80px 0}.editorial-hero h1{font-size:clamp(60px,9vw,92px)!important}.entrepreneur-grid,.proof-grid{grid-template-columns:1fr}}
@media(max-width:700px){.editorial-hero,.editorial-hero-inner{min-height:auto}.editorial-hero-inner{width:calc(100% - 28px);padding:68px 0 72px}.editorial-hero .eyebrow{margin-bottom:28px}.editorial-hero h1{font-size:clamp(48px,13.5vw,68px)!important;line-height:.96!important}.editorial-hero h1 em{margin-top:10px;font-size:.84em!important}.editorial-hero .hero-lead{margin-top:28px;font-size:15px!important}.editorial-hero-actions{width:100%;flex-direction:column;margin-top:28px}.editorial-hero-actions .btn{width:100%;max-width:330px;min-height:56px}.training-grid{grid-template-columns:1fr}.training-card,.entrepreneur-card{min-height:auto;padding:30px 24px}.training-note{flex-direction:column;align-items:flex-start}.proof-item{grid-template-columns:48px 1fr}.cta-section{padding:80px 0}}
@media(hover:none){.training-card:hover,.entrepreneur-card:hover{background:inherit;transform:none;box-shadow:none}}


/* =========================================================
   FOX DIGITAL — ALIGNEMENT ÉDITORIAL FINAL
   Carrière & Image : titres de section alignés sur la grille
   ========================================================= */

.career-section-heading {
  display: block !important;
  max-width: 1180px !important;
  margin: 0 0 72px !important;
  text-align: left !important;
}

.career-section-heading .eyebrow {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  text-align: left !important;
}

.career-section-heading h2 {
  max-width: 980px !important;
  margin: 0 !important;
  text-align: left !important;
  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;
  font-size: clamp(52px, 5vw, 82px) !important;
  font-weight: 500 !important;
  line-height: 1.01 !important;
  letter-spacing: -.055em !important;
}

.career-section-heading h2 em {
  display: block !important;
  margin-top: 2px !important;
  text-align: left !important;
  font-family: var(--fox-serif, "Lora", Georgia, serif) !important;
  color: #fd6215 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
}

.career-section-heading + .career-services-grid,
.career-section-heading + .career-support-grid,
.career-section-heading + .career-offers-grid,
.career-section-heading + .two-col,
.career-section-heading + .card-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1000px) {
  .career-section-heading {
    max-width: 900px !important;
    margin-bottom: 56px !important;
  }

  .career-section-heading h2 {
    max-width: 860px !important;
    font-size: clamp(48px, 7vw, 68px) !important;
  }
}

@media (max-width: 700px) {
  .career-section-heading {
    margin-bottom: 42px !important;
  }

  .career-section-heading .eyebrow {
    margin-bottom: 20px !important;
  }

  .career-section-heading h2 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 1.02 !important;
  }
}

/* =========================================================
   FOX DIGITAL — ACCUEIL / SECTION CE QUE L'ON TRAVAILLE — CORRECTION FINALE
   L'eyebrow, le titre et la grille partent désormais du même axe gauche.
   ========================================================= */

/* Cible uniquement la section de l'accueil qui contient .services-grid */
.section:has(.services-grid) {
  padding-top: 108px !important;
  padding-bottom: 108px !important;
}

.section:has(.services-grid) > .container {
  width: min(calc(100% - 80px), 1450px) !important;
  margin-inline: auto !important;
}

/* On annule définitivement l'ancienne composition en 2 colonnes du heading */
.section:has(.services-grid) .section-head {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 64px !important;
  padding: 0 !important;
  text-align: left !important;
}

.section:has(.services-grid) .section-head > div {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eyebrow AU-DESSUS du titre et sur le même axe */
.section:has(.services-grid) .section-head .eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Titre aligné exactement sur le départ de la grille */
.section:has(.services-grid) .section-head h2 {
  width: 100% !important;
  max-width: 1050px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;

  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;
  font-size: clamp(54px, 5vw, 80px) !important;
  font-weight: 500 !important;
  line-height: 1.01 !important;
  letter-spacing: -.055em !important;
  color: #111 !important;
}

.section:has(.services-grid) .section-head h2 .accent,
.section:has(.services-grid) .section-head h2 em {
  display: block !important;
  width: fit-content !important;
  margin: 2px 0 0 !important;
  text-align: left !important;

  font-family: var(--fox-serif, "Lora", Georgia, serif) !important;
  color: #fd6215 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
}

/* Grille sur exactement le même axe que le heading */
.section:has(.services-grid) .services-grid {
  width: 100% !important;
  margin: 0 !important;
}

/* Tablette */
@media (max-width: 1000px) {
  .section:has(.services-grid) > .container {
    width: min(calc(100% - 40px), 1450px) !important;
  }

  .section:has(.services-grid) .section-head {
    margin-bottom: 52px !important;
  }

  .section:has(.services-grid) .section-head h2 {
    max-width: 900px !important;
    font-size: clamp(48px, 7vw, 66px) !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .section:has(.services-grid) {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  .section:has(.services-grid) > .container {
    width: calc(100% - 28px) !important;
  }

  .section:has(.services-grid) .section-head {
    margin-bottom: 40px !important;
  }

  .section:has(.services-grid) .section-head .eyebrow {
    margin-bottom: 18px !important;
  }

  .section:has(.services-grid) .section-head h2 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 56px) !important;
    line-height: 1.03 !important;
  }
}


/* =========================================================
   FOX DIGITAL — ACCUEIL / TITRE SERVICES — FINAL
   Desktop : une seule ligne / responsive propre
   ========================================================= */

@media (min-width: 1001px) {
  .section:has(.services-grid) .section-head h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(42px, 4.05vw, 65px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.055em !important;
  }

  .section:has(.services-grid) .section-head h2 .accent,
  .section:has(.services-grid) .section-head h2 em {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: inherit !important;
  }
}

@media (max-width: 1000px) {
  .section:has(.services-grid) .section-head h2 {
    white-space: normal !important;
  }

  .section:has(.services-grid) .section-head h2 .accent,
  .section:has(.services-grid) .section-head h2 em {
    display: inline !important;
    width: auto !important;
  }
}

/* Sous-page sans visuel hero */
.page-hero-no-visual .inner {
  display: block !important;
}

.page-hero-no-visual .inner > .reveal:first-child {
  max-width: 1120px !important;
}

.page-hero .visual:empty {
  display: none !important;
}

.page-hero:has(.visual:empty) .inner {
  display: block !important;
}

.page-hero:has(.visual:empty) .inner > .reveal:first-child {
  max-width: 1120px !important;
}

/* Contact - formulaire moderne */
.contact-playground {
  padding-top: 92px !important;
  background:
    linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
}

.contact-playground-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
  gap: 72px;
  align-items: start;
}

.contact-intro h2 {
  max-width: 620px;
  margin: 22px 0 20px;
  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif);
  font-size: clamp(42px, 4.5vw, 70px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.contact-intro > p {
  max-width: 560px;
  color: var(--grey, #6d665f);
  font-size: 16px;
  line-height: 1.8;
}

.contact-mini-steps {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--border, #ddd6cf);
}

.contact-mini-steps div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border, #ddd6cf);
}

.contact-mini-steps span {
  color: var(--orange, #fd6215);
  font-family: var(--fox-serif, "Lora", Georgia, serif);
  font-size: 21px;
}

.contact-mini-steps strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
}

.contact-mini-steps p {
  grid-column: 2;
  margin: -6px 0 0;
  color: var(--grey, #6d665f);
  font-size: 13px;
  line-height: 1.55;
}

.playful-contact-form {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(28px, 4vw, 46px);
  background: #ffffff;
  border: 1px solid var(--border, #ddd6cf);
  box-shadow: 0 28px 90px rgba(17, 17, 17, 0.08);
}

.playful-contact-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--orange, #fd6215);
}

.form-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #ddd6cf);
}

.form-topline span {
  color: var(--orange, #fd6215);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.form-topline strong {
  font-family: var(--fox-serif, "Lora", Georgia, serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
}

.contact-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-choice-group legend,
.playful-contact-form label > span {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  color: #111111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-choice-group label {
  cursor: pointer;
}

.contact-choice-group input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-choice-group label span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border, #ddd6cf);
  border-radius: 999px;
  background: #fbf7f1;
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.contact-choice-group input:checked + span,
.contact-choice-group label:hover span {
  background: var(--orange, #fd6215);
  border-color: var(--orange, #fd6215);
  transform: translateY(-2px);
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.playful-contact-form input,
.playful-contact-form select,
.playful-contact-form textarea {
  width: 100%;
  border: 1px solid var(--border, #ddd6cf);
  border-radius: 0;
  background: #fbf7f1;
  color: #111111;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.playful-contact-form input,
.playful-contact-form select {
  height: 56px;
  padding: 0 16px;
}

.playful-contact-form textarea {
  min-height: 170px;
  padding: 16px;
  resize: vertical;
}

.playful-contact-form input:focus,
.playful-contact-form select:focus,
.playful-contact-form textarea:focus {
  background: #ffffff;
  border-color: var(--orange, #fd6215);
  box-shadow: 0 0 0 4px rgba(253, 98, 21, 0.13);
}

.contact-form-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding-top: 8px;
}

.contact-form-footer p {
  max-width: 330px;
  margin: 0;
  color: var(--grey, #6d665f);
  font-size: 13px;
  line-height: 1.55;
}

.contact-form-footer .btn {
  min-width: 210px;
}

@media (max-width: 980px) {
  .contact-playground-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .contact-playground {
    padding-top: 70px !important;
  }

  .contact-form-row,
  .contact-form-footer {
    grid-template-columns: 1fr;
    display: grid;
  }

  .form-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form-footer .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Formation IA - page programme */
.ai-training-hero {
  border-bottom: 1px solid var(--border, #ddd6cf);
}

.ai-program-section,
.management-program-section {
  background: #fff;
}

.ai-program-section .section-head,
.management-program-section .section-head {
  display: grid;
  grid-template-columns: minmax(240px, .52fr) minmax(0, 1.48fr);
  gap: 54px;
  align-items: end;
  margin-bottom: 52px;
}

.ai-program-section .section-head h2,
.management-program-section .section-head h2 {
  grid-column: 2;
  max-width: 960px;
  margin: 0;
}

.ai-program-section .section-head p,
.management-program-section .section-head p {
  grid-column: 2;
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--grey, #68615c);
  font-size: 15px;
  line-height: 1.75;
}

.ai-program-grid,
.management-program-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border, #ddd6cf);
  border-left: 1px solid var(--border, #ddd6cf);
}

.ai-program-card,
.management-program-card {
  min-height: 395px;
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  border-right: 1px solid var(--border, #ddd6cf);
  border-bottom: 1px solid var(--border, #ddd6cf);
  background: #fff;
  transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}

.ai-program-card:hover,
.management-program-card:hover {
  background: rgba(253,98,21,.055);
  box-shadow: inset 0 4px 0 #fd6215, 0 18px 45px rgba(17,17,17,.06);
  transform: translateY(-4px);
}

.ai-program-card > span,
.management-program-card > span {
  margin-bottom: 32px;
  color: #fd6215;
  font-family: var(--fox-serif, "Lora", Georgia, serif);
  font-size: 22px;
}

.ai-program-card h3,
.management-program-card h3 {
  margin: 0 0 14px;
  font-family: var(--fox-sans, "Plus Jakarta Sans", Arial, sans-serif) !important;
  font-size: 23px !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

.ai-program-card p,
.management-program-card p {
  margin: 0;
  color: var(--grey, #68615c);
  font-size: 13.5px;
  line-height: 1.72;
}

.ai-program-card ul,
.management-program-card ul {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(17,17,17,.1);
  list-style: none;
}

.ai-program-card li,
.management-program-card li {
  position: relative;
  padding-left: 16px;
  color: #211f1d;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}

.ai-program-card li::before,
.management-program-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fd6215;
}

.ai-workshop-section,
.management-workshop-section {
  background: var(--cream, #f7f3ed);
  border-top: 1px solid var(--border, #ddd6cf);
  border-bottom: 1px solid var(--border, #ddd6cf);
}

.ai-workshop-grid,
.management-workshop-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: 72px;
  align-items: start;
}

.ai-workshop-grid h2,
.management-workshop-grid h2 {
  max-width: 720px;
  margin: 22px 0 20px;
}

.ai-workshop-grid p,
.management-workshop-grid p {
  max-width: 660px;
  color: var(--grey, #68615c);
  font-size: 15px;
  line-height: 1.82;
}

.ai-workshop-list,
.management-workshop-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border, #ddd6cf);
}

.ai-workshop-list div,
.management-workshop-list div {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) minmax(0, 1fr);
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border, #ddd6cf);
}

.ai-workshop-list strong,
.management-workshop-list strong {
  color: #111;
  font-size: 15px;
}

.ai-workshop-list span,
.management-workshop-list span {
  color: var(--grey, #68615c);
  font-size: 14px;
  line-height: 1.65;
}

.ai-outcomes,
.management-outcomes {
  display: grid;
  gap: 18px;
  align-content: start;
}

.ai-outcomes p,
.management-outcomes p {
  margin: 0;
  color: var(--grey, #68615c);
  font-size: 15px;
  line-height: 1.78;
}

.ai-outcomes strong,
.management-outcomes strong {
  color: #111;
}

.ai-outcomes .btn,
.management-outcomes .btn {
  width: max-content;
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .ai-program-grid,
  .management-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-program-section .section-head,
  .management-program-section .section-head,
  .ai-workshop-grid,
  .management-workshop-grid {
    grid-template-columns: 1fr;
  }

  .ai-program-section .section-head h2,
  .management-program-section .section-head h2,
  .ai-program-section .section-head p,
  .management-program-section .section-head p {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .ai-program-grid,
  .management-program-grid {
    grid-template-columns: 1fr;
  }

  .ai-program-card,
  .management-program-card {
    min-height: auto;
    padding: 28px 22px;
  }

  .ai-program-card > span,
  .management-program-card > span {
    margin-bottom: 24px;
  }

  .ai-workshop-list div,
  .management-workshop-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ai-outcomes .btn,
  .management-outcomes .btn {
    width: 100%;
  }
}

/* =========================================================
   Blog de l'emploi
   ========================================================= */

.blog-hero .editorial-hero-content {
  max-width: 980px;
}

.blog-hero h1 {
  max-width: 1120px !important;
  font-size: clamp(54px, 5.2vw, 92px) !important;
  line-height: .98 !important;
}

.blog-hero h1 em {
  font-size: .76em !important;
  line-height: 1.04 !important;
}

.blog-proof-grid,
.blog-topic-grid {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.blog-proof-grid h2,
.blog-topic-grid h2 {
  max-width: 760px;
  margin: 22px 0 0;
}

.blog-proof-grid p,
.blog-topic-grid p {
  color: var(--grey, #68615c);
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border, #ddd6cf);
  border-left: 1px solid var(--border, #ddd6cf);
}

.blog-card {
  min-height: 360px;
  padding: clamp(28px, 4vw, 46px);
  border-right: 1px solid var(--border, #ddd6cf);
  border-bottom: 1px solid var(--border, #ddd6cf);
  display: flex;
  flex-direction: column;
  background: #f7f3ee;
}

.blog-card span,
.article-kicker {
  color: var(--fox-orange, #fd6215);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 32px 0 16px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.blog-card p {
  color: var(--grey, #68615c);
  line-height: 1.7;
  margin: 0 0 28px;
}

.blog-card a {
  margin-top: auto;
  color: #111;
  font-weight: 800;
  text-decoration: none;
}

.blog-card a:hover,
.blog-topic-links a:hover,
.article-aside a:hover {
  color: var(--fox-orange, #fd6215);
}

.blog-topic-links {
  display: grid;
  border-top: 1px solid var(--border, #ddd6cf);
}

.blog-topic-links a {
  padding: 20px 0;
  border-bottom: 1px solid var(--border, #ddd6cf);
  color: #111;
  font-weight: 800;
  text-decoration: none;
}

.article-page {
  padding: clamp(70px, 9vw, 140px) 0;
}

.article-hero {
  max-width: 980px;
}

.article-hero h1 {
  margin: 24px 0;
  font-size: clamp(54px, 8vw, 118px);
  line-height: .95;
  letter-spacing: -.055em;
}

.article-hero p {
  max-width: 760px;
  color: var(--grey, #68615c);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.65;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(240px, 340px);
  gap: clamp(46px, 7vw, 130px);
  align-items: start;
  margin-top: clamp(60px, 8vw, 120px);
}

.article-content {
  color: #171717;
}

.article-content h2 {
  margin: 54px 0 18px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.article-content h2:first-child {
  margin-top: 0;
}

.article-content p,
.article-content li {
  color: var(--grey, #68615c);
  font-size: 17px;
  line-height: 1.82;
}

.article-content ul {
  display: grid;
  gap: 12px;
  padding-left: 22px;
}

.article-content li::marker {
  color: var(--fox-orange, #fd6215);
}

.article-cta {
  margin-top: 58px;
  padding: clamp(28px, 4vw, 42px);
  background: #111;
  color: #fff;
}

.article-cta h2,
.article-cta p {
  color: #fff;
}

.article-aside {
  position: sticky;
  top: 120px;
  padding: 28px;
  border: 1px solid var(--border, #ddd6cf);
  background: #f7f3ee;
}

.article-aside strong {
  display: block;
  margin-bottom: 16px;
  color: var(--fox-orange, #fd6215);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.article-aside p {
  color: var(--grey, #68615c);
  line-height: 1.7;
}

.article-aside a {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--border, #ddd6cf);
  color: #111;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1000px) {
  .blog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-proof-grid,
  .blog-topic-grid,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }
}

@media (max-width: 650px) {
  .blog-hero h1 {
    font-size: clamp(42px, 11vw, 58px) !important;
  }

  .blog-card-grid {
    grid-template-columns: 1fr;
  }

  .blog-card {
    min-height: auto;
  }
}

/* =========================================================
   Finitions transverses
   ========================================================= */

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(253, 98, 21, .24);
  color: #111;
}

img {
  max-width: 100%;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fox-orange, #fd6215);
  outline-offset: 4px;
}

.btn {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Harmonisation des grands titres de section
   ========================================================= */

.section h2,
.section-head h2,
.split h2,
.content-grid h2,
.contact-grid h2,
.cta-section h2,
.seo-faq h2,
.proof-grid h2,
.about-copy h2,
.career-impact-title,
.career-section-heading h2,
.career-story-content h2,
.career-audience h2,
.career-final-cta h2,
.career-final-cta-copy h2,
.career-offers-heading h2,
.career-difference h2,
.approach-section .approach-copy h2,
.getjob-product-grid h2,
.getjob-section-intro h2,
.getjob .getjob-copy h2,
.ai-program-section .section-head h2,
.management-program-section .section-head h2,
.management-workshop-grid h2,
.ai-workshop-grid h2,
.blog-proof-grid h2,
.blog-topic-grid h2 {
  font-size: clamp(46px, 5vw, 78px) !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
}

.section h2 em,
.section-head h2 em,
.split h2 em,
.content-grid h2 em,
.contact-grid h2 em,
.cta-section h2 em,
.section h2 .accent,
.section-head h2 .accent,
.split h2 .accent,
.content-grid h2 .accent,
.contact-grid h2 .accent,
.cta-section h2 .accent,
.about-copy h2 .accent,
.career-impact-title .accent,
.career-section-heading h2 .accent,
.career-story-content h2 .accent,
.career-audience h2 .accent,
.career-final-cta h2 .accent,
.career-final-cta-copy h2 .accent,
.career-offers-heading h2 .accent,
.career-difference h2 .accent,
.approach-section .approach-copy h2 .accent,
.getjob-product-grid h2 .accent,
.getjob-section-intro h2 .accent,
.getjob .getjob-copy h2 .accent {
  font-size: 1em !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

/* =========================================================
   FOX DIGITAL — CORRECTIF NAVIGATION MOBILE 28/08/2026
   Pages internes
   ========================================================= */
@media (max-width: 1000px) {
  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .site-header {
    z-index: 10000 !important;
  }

  .mobile-toggle {
    position: relative !important;
    z-index: 10002 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer;
  }

  .mobile-menu {
    position: fixed !important;
    top: 119px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 119px) !important;
    margin: 0 !important;
    padding: 24px 28px 40px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #f7f3ee !important;
    border: 0 !important;
    border-top: 1px solid rgba(17,17,17,.10) !important;
    box-shadow: 0 20px 40px rgba(17,17,17,.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform .28s ease, opacity .18s ease, visibility .18s ease !important;
  }

  .mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .mobile-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.12) !important;
    color: #111 !important;
    background: transparent !important;
    font-size: clamp(18px, 4.5vw, 24px) !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 700px) {
  .site-header .navbar {
    height: 76px !important;
    gap: 12px !important;
  }

  .nav-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  /* Sur smartphone, le CTA est dans le menu : on libère le bandeau. */
  .nav-actions > .btn {
    display: none !important;
  }

  .mobile-menu,
  .announcement + .site-header .mobile-menu {
    top: 76px !important;
    height: calc(100dvh - 76px) !important;
    padding: 20px 22px 36px !important;
  }

  .mobile-menu .mobile-menu-cta {
    justify-content: center !important;
    min-height: 58px !important;
    margin-top: 24px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   FOX DIGITAL — HOTFIX MENU MOBILE + CACHE BUST 28/08/2026 17:11
   Ce bloc doit rester en toute fin de fichier.
   ========================================================= */
@media (max-width: 1000px) {
  body.menu-open { overflow: hidden !important; }
  .site-header { position: sticky !important; top: 0 !important; z-index: 2147483000 !important; }
  .site-header .mobile-menu {
    position: fixed !important;
    inset: 76px 0 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 76px) !important;
    z-index: 2147482999 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 22px 24px 36px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    background: #f7f3ee !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(100%,0,0) !important;
    transition: transform .25s ease, opacity .15s ease, visibility .15s ease !important;
  }
  .site-header .mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
  }
  .site-header .mobile-menu > a {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.13) !important;
    color: #111 !important;
    background: transparent !important;
    font-size: clamp(18px,5vw,23px) !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
  }
  .site-header .mobile-menu > .mobile-menu-cta {
    justify-content: center !important;
    min-height: 58px !important;
    margin-top: 22px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 14px !important;
  }
  .site-header .mobile-toggle { position: relative !important; z-index: 2147483001 !important; }
}
@media (max-width: 700px) {
  .site-header .nav-actions > .btn { display: none !important; }
  .site-header .navbar { height: 76px !important; }
}