#fw-section-image-with-text-b4f49962-9306-4e28-8feb-65c5d7d014c4 {

/* =========================================================
   AUPOSITEUR — HERO FOURTHWALL COMPLET
   Section : Image with text
   ========================================================= */


/* =========================================================
   1. SECTION GÉNÉRALE
   ========================================================= */

section {
  position: relative;
  overflow: hidden;

  background: #080808 !important;

  min-height: 720px;
}


/* =========================================================
   2. CONTENEUR PRINCIPAL
   ========================================================= */

section > div {
  position: relative;
}


/* =========================================================
   3. IMAGE / PORTRAIT
   ========================================================= */

img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 720px;

  object-fit: cover;

  object-position: 58% center;

  filter:
    brightness(0.90)
    contrast(1.10);

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.10) 8%,
    rgba(0, 0, 0, 0.28) 18%,
    rgba(0, 0, 0, 0.52) 28%,
    rgba(0, 0, 0, 0.76) 38%,
    rgba(0, 0, 0, 0.94) 48%,
    black 58%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.10) 8%,
    rgba(0, 0, 0, 0.28) 18%,
    rgba(0, 0, 0, 0.52) 28%,
    rgba(0, 0, 0, 0.76) 38%,
    rgba(0, 0, 0, 0.94) 48%,
    black 58%
  );
}


/* =========================================================
   4. TITRES
   ========================================================= */

h1,
h2,
h3 {
  color: #F1EDE4 !important;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif !important;

  font-weight: 400 !important;

  text-transform: none !important;

  letter-spacing: -0.025em !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Grand titre du hero */
h1,
h2 {
  font-size: clamp(
    72px,
    5.7vw,
    112px
  ) !important;

  line-height: 0.90 !important;

  max-width: 680px;
}


/* =========================================================
   5. TRAIT ORANGE
   ========================================================= */

h1::after,
h2::after,
h3::after {
  content: "";

  display: block;

  width: 38px;
  height: 1px;

  margin-top: 34px;
  margin-bottom: 34px;

  background: #D0653D;
}


/* =========================================================
   6. TEXTE COURANT
   ========================================================= */

p {
  color: #F1EDE4 !important;

  font-family:
    "Courier Prime",
    "Courier New",
    monospace !important;

  font-size: 15px !important;

  line-height: 1.65 !important;

  letter-spacing: 0.01em;

  max-width: 520px;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   7. LIENS ET PETITS CTA
   ========================================================= */

a {
  font-family:
    "Courier Prime",
    "Courier New",
    monospace !important;
}


/* Si tu ajoutes plus tard un lien type "Découvrir ↓" */
p + a {
  display: inline-block;

  margin-top: 30px;

  color: #D0653D !important;

  background: transparent !important;

  border: 0 !important;

  padding: 0 !important;

  font-size: 13px !important;

  text-decoration: none !important;
}


/* =========================================================
   8. BOUTONS
   ========================================================= */

button,
a[role="button"] {
  font-family:
    "Courier Prime",
    "Courier New",
    monospace !important;
}


/* =========================================================
   9. ESPACEMENT DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

}


/* =========================================================
   10. TABLETTE
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

  section {
    min-height: 640px;
  }

  img {
    min-height: 640px;

    object-position: 54% center;
  }

  h1,
  h2 {
    font-size: clamp(
      58px,
      6vw,
      82px
    ) !important;

    max-width: 560px;
  }

  p {
    font-size: 14px !important;

    max-width: 440px;
  }

}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  section {
    min-height: auto;

    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  img {
    min-height: 430px;

    object-position: center 18%;

    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 68%,
      rgba(0, 0, 0, 0.85) 78%,
      rgba(0, 0, 0, 0.55) 88%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 68%,
      rgba(0, 0, 0, 0.85) 78%,
      rgba(0, 0, 0, 0.55) 88%,
      transparent 100%
    );
  }

  h1,
  h2 {
    font-size: clamp(
      48px,
      14vw,
      68px
    ) !important;

    line-height: 0.94 !important;

    max-width: 100%;
  }

  h1::after,
  h2::after,
  h3::after {
    width: 34px;

    margin-top: 26px;
    margin-bottom: 26px;
  }

  p {
    font-size: 14px !important;

    line-height: 1.60 !important;

    max-width: 100%;
  }

}
}





#fw-section-header {

/* =========================================================
   AUPOSITEUR — HEADER FOURTHWALL
   VERSION CORRIGÉE
   ========================================================= */


/* ---------------------------------------------------------
   1. HEADER
   --------------------------------------------------------- */

header {
  background: #080808 !important;

  border-bottom: 1px solid rgba(241, 237, 228, 0.10) !important;

  box-shadow: none !important;

  padding-top: 18px !important;
  padding-bottom: 18px !important;
}


/* ---------------------------------------------------------
   2. COULEUR GÉNÉRALE DU HEADER
   --------------------------------------------------------- */

header a,
header span,
header p {
  color: #F1EDE4;
}


/* ---------------------------------------------------------
   3. NAVIGATION
   BOUTIQUE / AUPOSITEUR.BE
   --------------------------------------------------------- */

header nav a {
  font-family:
    "Courier Prime",
    "Courier New",
    monospace !important;

  font-size: 12px !important;

  font-weight: 400 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: #F1EDE4 !important;

  text-decoration: none !important;

  padding-left: 14px !important;
  padding-right: 14px !important;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}


/* ---------------------------------------------------------
   4. SURVOL DES LIENS
   --------------------------------------------------------- */

header nav a:hover {
  color: #D0653D !important;
}


/* ---------------------------------------------------------
   5. PAGE ACTIVE
   --------------------------------------------------------- */

header nav a[aria-current="page"] {
  color: #D0653D !important;
}


/* ---------------------------------------------------------
   6. DEVISE / PANIER / ICÔNES
   --------------------------------------------------------- */

header button,
header select,
header svg,
header [role="button"] {
  color: #F1EDE4 !important;
}


/* ---------------------------------------------------------
   7. ESPACEMENT HORIZONTAL
   --------------------------------------------------------- */

header > div {
  padding-left: 34px !important;
  padding-right: 34px !important;
}


/* ---------------------------------------------------------
   8. IMAGES / LOGO ÉVENTUEL
   --------------------------------------------------------- */

header img {
  max-height: 34px;
  width: auto;
}


/* ---------------------------------------------------------
   9. LIENS : PAS DE PSEUDO-ÉLÉMENT
   Important : empêche les points orange parasites
   --------------------------------------------------------- */

header a::after {
  content: none !important;
}


/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  header {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  header > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  header nav a {
    font-size: 11px !important;

    letter-spacing: 0.06em !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }

}


/* ---------------------------------------------------------
   11. TABLETTE
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1100px) {

  header > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  header nav a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

}
/* =========================================================
   AUPOSITEUR — POINT ORANGE DU LOGO UNIQUEMENT
   ========================================================= */

/* Sécurité : aucun lien du header ne reçoit de point */
header a::after {
  content: none !important;
}


/* Point orange uniquement sur le lien-logo */
header a[aria-label*="AUPOSITEUR" i]::after,
header a[title*="AUPOSITEUR" i]::after {
  content: "." !important;

  display: inline !important;

  color: #D0653D !important;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif !important;

  font-size: 1em !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  margin-left: 2px !important;

  position: static !important;
}
}