/* ==========================================================================
   MEDIASPHERE — « Grille internationale »
   Swiss Modernism 2.0 : grille 12 colonnes visible, filets 1px, numérotation
   des sections, un seul accent (outremer), typographie géante Host Grotesk,
   méta en JetBrains Mono. Aucune classe custom : ids, data-attributes,
   classes Bootstrap et pseudo-éléments uniquement.
   ========================================================================== */

:root {
  --m-ink: #0d0d0d;
  --m-ink-rgb: 13, 13, 13;
  --m-paper: #f4f3ee;
  --m-white: #ffffff;
  --m-accent: #1b33e0;
  --m-accent-rgb: 27, 51, 224;
  --m-accent-dark: #1226b4;
  --m-accent-soft: #8c9bff;
  --m-grid: rgba(13, 13, 13, 0.065);
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-bar: 64px;

  --bs-body-bg: var(--m-paper);
  --bs-body-bg-rgb: 244, 243, 238;
  --bs-body-color: var(--m-ink);
  --bs-body-color-rgb: var(--m-ink-rgb);
  --bs-emphasis-color: var(--m-ink);
  --bs-secondary-color: rgba(13, 13, 13, 0.62);
  --bs-body-font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bs-font-monospace: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.55;
  --bs-primary: var(--m-accent);
  --bs-primary-rgb: var(--m-accent-rgb);
  --bs-dark: var(--m-ink);
  --bs-dark-rgb: var(--m-ink-rgb);
  --bs-link-color: var(--m-accent);
  --bs-link-color-rgb: var(--m-accent-rgb);
  --bs-link-hover-color: var(--m-ink);
  --bs-link-hover-color-rgb: var(--m-ink-rgb);
  --bs-border-color: var(--m-ink);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-focus-ring-color: rgba(var(--m-accent-rgb), 0.45);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--m-bar) + 16px);
}

body {
  position: relative;
  font-feature-settings: 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--m-accent);
  color: var(--m-white);
}

/* -------- La grille visible : 12 colonnes alignées sur .container-xxl -------- */
body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 50%;
  width: min(1320px, 100%);
  transform: translateX(-50%);
  padding-inline: 12px;
  background-image: repeating-linear-gradient(
    to right,
    var(--m-grid) 0 1px,
    transparent 1px calc((100% - 24px) / 12)
  );
  background-clip: content-box;
  background-origin: content-box;
  border-right: 1px solid var(--m-grid);
  background-size: calc(100% - 0px) 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767.98px) {
  body::before {
    background-image: repeating-linear-gradient(
      to right,
      var(--m-grid) 0 1px,
      transparent 1px calc((100% - 24px) / 4)
    );
  }
}

main,
footer {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, .h4, .h6 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

a {
  transition: color 0.18s ease, background-color 0.18s ease;
}

:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 3px;
}

/* ---------------------------------- Boutons --------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 0;
  letter-spacing: -0.01em;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s var(--m-ease);
}
.btn-primary {
  --bs-btn-bg: var(--m-accent);
  --bs-btn-border-color: var(--m-accent);
  --bs-btn-hover-bg: var(--m-ink);
  --bs-btn-hover-border-color: var(--m-ink);
  --bs-btn-active-bg: var(--m-accent-dark);
  --bs-btn-active-border-color: var(--m-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--m-accent-rgb);
}
.btn-dark {
  --bs-btn-bg: var(--m-ink);
  --bs-btn-border-color: var(--m-ink);
  --bs-btn-hover-bg: var(--m-accent);
  --bs-btn-hover-border-color: var(--m-accent);
}
.btn-outline-dark {
  --bs-btn-color: var(--m-ink);
  --bs-btn-border-color: var(--m-ink);
  --bs-btn-hover-bg: var(--m-ink);
}
.btn .bi-arrow-down-right {
  transition: transform 0.25s var(--m-ease);
}
.btn:hover .bi-arrow-down-right {
  transform: translate(3px, 3px);
}

/* ------------------------------- Barre fine -------------------------------- */
[data-bloc='barre'] {
  background: rgba(244, 243, 238, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--m-ink);
}
[data-bloc='barre'] .navbar {
  min-height: var(--m-bar);
}
[data-bloc='barre'] .navbar > .container-xxl {
  min-height: var(--m-bar);
}
[data-bloc='barre'] .navbar-brand img {
  height: 44px;
  width: auto;
}
[data-bloc='barre'] .navbar .nav-link {
  font-family: var(--bs-font-monospace);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--m-ink);
  border-color: var(--m-ink) !important;
}
[data-bloc='barre'] .navbar .nav-link:hover {
  background: var(--m-ink);
  color: var(--m-paper);
}
[data-bloc='barre'] .navbar .btn-primary {
  min-width: var(--m-bar);
}
[data-bloc='progression'] {
  background: var(--m-accent);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
}

/* --------------------------- Menu plein écran ------------------------------ */
[data-bloc='menu'] {
  --bs-offcanvas-height: 100vh;
  --bs-offcanvas-bg: var(--m-ink);
  --bs-primary-rgb: 140, 155, 255;
  height: 100vh !important;
  height: 100dvh !important;
  border-bottom: 0 !important;
}
[data-bloc='menu'] .offcanvas-header {
  min-height: var(--m-bar);
  padding-block: 0.5rem;
}
[data-bloc='menu'] .navbar-brand img {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}
[data-bloc='menu'] ol {
  counter-reset: menu;
}
[data-bloc='menu'] ol > li {
  counter-increment: menu;
  position: relative;
}
[data-bloc='menu'] ol > li > .nav-link {
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--m-paper);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
[data-bloc='menu'] ol > li > .nav-link::before {
  content: counter(menu, decimal-leading-zero);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--m-accent-soft);
  min-width: 2ch;
}
[data-bloc='menu'] ol > li > .nav-link:hover {
  color: var(--m-accent-soft);
  transform: translateX(6px);
}
[data-bloc='menu'] ol > li > .nav-link {
  transition: color 0.2s ease, transform 0.3s var(--m-ease);
}
[data-bloc='menu'] ol ul a {
  color: rgba(244, 243, 238, 0.72) !important;
  font-family: var(--bs-font-monospace);
  font-size: 0.78rem;
}
[data-bloc='menu'] ol ul a:hover {
  color: var(--m-accent-soft) !important;
}
[data-bloc='menu'] .offcanvas-body {
  padding-top: 1rem;
}

/* ------------------------- Sections numérotées ------------------------------ */
main {
  counter-reset: sec;
  padding-top: var(--m-bar);
}
main > section[data-num] {
  counter-increment: sec;
  padding-block: clamp(4rem, 9vw, 8rem);
}
main > section[data-num] > .container-xxl::before {
  content: counter(sec, decimal-leading-zero) ' / 08';
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--m-ink);
  padding-top: 0.6rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
main > section[data-num]:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.55);
}

/* ------------------------- 01 · Titre géant ------------------------------- */
[data-bloc='titre'] {
  min-height: min(calc(100vh - var(--m-bar)), 1040px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2rem, 5vw, 4rem) !important;
}
[data-bloc='titre'] > .container-xxl {
  width: 100%;
}
[data-bloc='titre'] h1 {
  font-size: clamp(3.1rem, 11.6vw, 11.4rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.86;
  margin-left: -0.05em;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
[data-bloc='titre'] h1 > span:nth-child(2) {
  color: var(--m-accent);
  padding-left: calc(100% / 12 * 3);
}
@media (max-width: 767.98px) {
  [data-bloc='titre'] h1 > span:nth-child(2) {
    padding-left: calc(100% / 4);
  }
}

/* ---------------------------- 02 · Film ----------------------------------- */
[data-bloc='film'] h3 {
  font-size: clamp(2.3rem, 5.6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.92;
}
@media (min-width: 992px) {
  [data-bloc='film'] .col-lg-5 h3 {
    margin-right: -9vw;
    padding: 1.25rem 1.5rem 1.25rem 0;
    background: var(--m-paper);
    margin-bottom: 3rem;
  }
}
@media (max-width: 991.98px) {
  [data-bloc='film'] h3 {
    margin-bottom: 1.5rem !important;
  }
}
[data-bloc='vignette'] {
  aspect-ratio: 16 / 10;
  background: var(--m-white);
  border: 1px solid var(--m-ink) !important;
}
[data-bloc='vignette'] img {
  object-fit: contain !important;
  background: var(--m-white);
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.5s ease, transform 0.8s var(--m-ease);
}
[data-bloc='vignette']:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}
[data-bloc='vignette'] > span {
  width: clamp(72px, 9vw, 120px);
  aspect-ratio: 1;
  background: var(--m-accent);
  color: var(--m-white);
  font-size: clamp(2rem, 4vw, 3.4rem);
  transition: transform 0.35s var(--m-ease), background-color 0.2s ease;
}
[data-bloc='vignette'] > span.top-50 {
  top: auto !important;
  left: 0 !important;
  bottom: 0;
  transform: none !important;
}
[data-bloc='vignette']:hover > span {
  transform: scale(1.08) !important;
  transform-origin: 0 100%;
  background: var(--m-ink);
}

/* --------------------------- 03 · Expertise -------------------------------- */
[data-bloc='expertise'] h2 {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
}
[data-bloc='pictos'] {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--m-ink);
  border-left: 1px solid var(--m-ink);
}
[data-bloc='pictos'] > li {
  border-right: 1px solid var(--m-ink);
  border-bottom: 1px solid var(--m-ink);
}
[data-bloc='pictos'] a {
  transition: background-color 0.25s ease;
}
[data-bloc='pictos'] img {
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: multiply;
  transition: filter 0.3s ease, transform 0.4s var(--m-ease);
}
[data-bloc='pictos'] a:hover {
  background: var(--m-white);
}
[data-bloc='pictos'] a:hover img {
  filter: none;
  transform: scale(0.94) rotate(-4deg);
}

/* ------------------- 04 · Métiers : grille décalée ------------------------- */
[data-bloc='metiers'] h2 {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  letter-spacing: -0.05em;
}
[data-bloc='decale'] {
  counter-reset: metier;
}
[data-bloc='decale'] > article {
  counter-increment: metier;
}
@media (min-width: 992px) {
  [data-bloc='decale'] > article:nth-child(3n + 2) {
    margin-top: 7rem;
  }
  [data-bloc='decale'] > article:nth-child(3n + 3) {
    margin-top: 3.5rem;
  }
  [data-bloc='decale'] > article:nth-child(n + 4) {
    margin-top: -2rem;
  }
  [data-bloc='decale'] > article:nth-child(5) {
    margin-top: 5rem;
  }
  [data-bloc='decale'] > article:nth-child(6) {
    margin-top: 1.5rem;
  }
}
[data-bloc='decale'] figure {
  aspect-ratio: 4 / 3;
  background: var(--m-ink);
}
[data-bloc='decale'] article:nth-child(even) figure {
  aspect-ratio: 1 / 1;
}
[data-bloc='decale'] figure img {
  height: 100%;
  filter: grayscale(1) contrast(1.08);
  transition: filter 0.5s ease, transform 0.9s var(--m-ease);
}
[data-bloc='decale'] article:hover figure img {
  filter: grayscale(0);
  transform: scale(1.05);
}
[data-bloc='decale'] figure + div {
  margin: -3.5rem -0.75rem 0 1.75rem;
  z-index: 2;
  transition: transform 0.4s var(--m-ease), box-shadow 0.4s var(--m-ease);
}
[data-bloc='decale'] article:hover figure + div {
  transform: translate(-6px, -6px);
  box-shadow: 6px 6px 0 var(--m-accent);
}
[data-bloc='decale'] h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.75rem;
}
[data-bloc='decale'] h3::after {
  content: '04.' counter(metier);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--m-accent);
}
@media (max-width: 991.98px) {
  [data-bloc='decale'] figure + div {
    margin: -2.5rem 0 0 1rem;
  }
}

/* ------------------------ 05 · Valeurs (tableau) ---------------------------- */
[data-bloc='valeurs'] h2 {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  letter-spacing: -0.05em;
}
[data-bloc='valeurs'] ol {
  counter-reset: valeur;
}
[data-bloc='valeurs'] ol > li {
  counter-increment: valeur;
  position: relative;
  transition: background-color 0.25s ease, color 0.25s ease, padding 0.3s var(--m-ease);
}
[data-bloc='valeurs'] ol > li h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em;
}
[data-bloc='valeurs'] ol > li h3::before {
  content: '05.' counter(valeur);
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--m-accent);
  margin-bottom: 0.4rem;
}
[data-bloc='valeurs'] ol > li img {
  filter: grayscale(1) contrast(1.25);
  transition: filter 0.25s ease;
}
[data-bloc='valeurs'] ol > li:hover {
  background: var(--m-accent);
  color: var(--m-white);
}
[data-bloc='valeurs'] ol > li:hover h3::before {
  color: var(--m-white);
}
[data-bloc='valeurs'] ol > li:hover img {
  filter: none;
}

/* ------------------------- 06 · Avis (colonnes) ----------------------------- */
[data-bloc='avis'] h3 {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  letter-spacing: -0.05em;
}
[data-bloc='avis'] .border.border-dark {
  background: var(--m-white);
}
[data-bloc='colonnes'] {
  columns: 3;
  column-gap: 3rem;
  column-rule: 1px solid var(--m-ink);
}
[data-bloc='colonnes'] > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
[data-bloc='colonnes'] > li p {
  font-size: 0.98rem;
}
@media (max-width: 991.98px) {
  [data-bloc='colonnes'] {
    columns: 2;
  }
}
@media (max-width: 575.98px) {
  [data-bloc='colonnes'] {
    columns: 1;
  }
}

/* ----------------------------- 07 · FAQ ------------------------------------ */
[data-bloc='faq'] h2 {
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.8;
  color: var(--m-accent);
  top: calc(var(--m-bar) + 2rem);
}
[data-bloc='faq'] .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--m-ink);
  --bs-accordion-border-color: var(--m-ink);
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--m-accent);
  --bs-accordion-btn-focus-box-shadow: none;
  counter-reset: question;
}
[data-bloc='faq'] .accordion-item {
  counter-increment: question;
}
[data-bloc='faq'] .accordion-button {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  gap: 1.25rem;
  align-items: baseline;
}
[data-bloc='faq'] .accordion-button::before {
  content: '07.' counter(question);
  font-family: var(--bs-font-monospace);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  flex-shrink: 0;
}
[data-bloc='faq'] .accordion-button:focus-visible {
  outline: 2px solid var(--m-accent);
}
[data-bloc='faq'] .accordion-body {
  padding-left: 3.6rem !important;
  padding-bottom: 1.75rem !important;
  max-width: 46rem;
}

/* -------------------------- 08 · Références -------------------------------- */
[data-bloc='references'] h2 {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  letter-spacing: -0.05em;
}
[data-bloc='references'] ul {
  border-top: 1px solid var(--m-ink);
  border-left: 1px solid var(--m-ink);
}
[data-bloc='references'] li {
  border-right: 1px solid var(--m-ink);
  border-bottom: 1px solid var(--m-ink);
}
[data-bloc='references'] li a {
  height: clamp(96px, 11vw, 140px) !important;
  transition: background-color 0.25s ease;
}
[data-bloc='references'] li img {
  max-height: 72%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s var(--m-ease);
}
[data-bloc='references'] li a:hover {
  background: var(--m-white);
}
[data-bloc='references'] li a:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* ------------------- Présentation (order-last, haut du source) ------------- */
[data-bloc='signature'] {
  background: var(--m-ink);
  color: var(--m-paper);
  border-color: rgba(244, 243, 238, 0.22) !important;
}
[data-bloc='signature'] p {
  letter-spacing: -0.02em;
  line-height: 1.35;
}
[data-bloc='signature'] strong {
  font-weight: 700;
  color: var(--m-accent-soft);
}

/* ---------------------------- Pied : index --------------------------------- */
[data-bloc='index'] {
  --bs-primary-rgb: 140, 155, 255;
  background-color: var(--m-ink) !important;
  padding-top: clamp(3rem, 6vw, 5rem);
}
[data-bloc='index'] .border-secondary {
  border-color: rgba(244, 243, 238, 0.22) !important;
}
[data-bloc='index'] ul.col-lg-7 {
  columns: 2;
  column-gap: 2rem;
}
[data-bloc='index'] ul.col-lg-7 li {
  break-inside: avoid;
  padding-block: 0.2rem;
}
[data-bloc='index'] ul.col-lg-7 a {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
[data-bloc='index'] ul.col-lg-7 a:hover {
  color: var(--m-accent-soft) !important;
}
[data-bloc='index'] > .container-xxl > p {
  font-size: min(14.6vw, 196px);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.78;
  color: var(--m-accent);
  padding-block: 2.5rem 1.25rem;
  margin-left: -0.04em;
}
[data-bloc='index'] img {
  filter: grayscale(1) brightness(1.6);
}
@media (max-width: 575.98px) {
  [data-bloc='index'] ul.col-lg-7 {
    columns: 1;
  }
}

/* ------------------------------ Consentement ------------------------------- */
[data-bloc='consentement'] {
  z-index: 1085;
  width: min(460px, 100%);
}
[data-bloc='consentement'] > div {
  box-shadow: 8px 8px 0 var(--m-accent);
}
[data-bloc='consentement'] .form-check-input:checked {
  background-color: var(--m-accent);
  border-color: var(--m-accent);
}

/* ------------------------------- Modal vidéo ------------------------------- */
.modal {
  --bs-modal-border-radius: 0;
}
.modal-backdrop {
  --bs-backdrop-opacity: 0.88;
}

/* ------------------------------ Mobile tweaks ------------------------------ */
@media (max-width: 575.98px) {
  [data-bloc='barre'] .navbar-brand img {
    height: 38px;
  }
  [data-bloc='faq'] .accordion-body {
    padding-left: 0 !important;
  }
  [data-bloc='valeurs'] ol > li {
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}