/* ==========================================================================
   AMCONCEPT.PRO — Feuille de styles principale

   Sommaire :
   01. Variables et base
   02. Typographie et composants communs
   03. Navigation desktop / mobile
   04. Heroes
   05. Accueil
   06. Pages métiers
   07. Méthode, moyens et contact
   08. Footer
   09. Animations discrètes
   10. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Variables et base
   -------------------------------------------------------------------------- */

:root {
  --page: #f4f2ed;
  --paper: #ffffff;
  --ink: #121212;
  --muted: #66635e;
  --line: rgba(18, 18, 18, 0.14);
  --line-light: rgba(255, 255, 255, 0.18);
  --red: #b72026;
  --red-dark: #8d161b;
  --dark: #151515;
  --dark-soft: #20201e;
  --technical: #d9d9d2;
  --max: 1440px;
  --gutter: clamp(22px, 4vw, 72px);
  --section: clamp(84px, 11vw, 170px);
  --header-height: 92px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/*
  STABILITÉ HORIZONTALE SUR MOBILE
  Certaines apparitions entrent légèrement depuis la gauche ou la droite.
  Elles restent visuellement intactes, mais ne peuvent plus élargir la page
  ni entraîner le site latéralement pendant un défilement vertical.
*/
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-variant: small-caps;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

img {
  height: auto;
}

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

/*
  FLÈCHE VECTORIELLE EN CSS
  Elle remplace les glyphes typographiques dont le rendu varie entre
  macOS, iOS et iPadOS. Par défaut, elle pointe vers la droite.
*/
.arrow {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.18em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 0.05em;
}

.normal-case,
a[href^="mailto:"],
a[href^="tel:"],
.web-address {
  font-variant: normal;
  text-transform: none;
}

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

button {
  color: inherit;
}

::selection {
  background: var(--red);
  color: #fff;
}

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section--paper {
  background: var(--paper);
}

.section--dark {
  background: var(--dark);
  color: #fff;
}

.section--compact {
  padding-block: clamp(64px, 8vw, 112px);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 14px;
  left: 14px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   02. Typographie et composants communs
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 1060px;
  margin-bottom: clamp(24px, 3vw, 42px);
  font-size: clamp(2.9rem, 7vw, 7.5rem);
}

h2 {
  margin-bottom: clamp(28px, 4vw, 56px);
  font-size: clamp(2.35rem, 5vw, 5rem);
}

h3 {
  margin-bottom: 18px;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
}

h4 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

.eyebrow,
.mono-label,
.card-index,
.metric-label,
.placeholder-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.eyebrow::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}

.eyebrow--red {
  color: var(--red);
}

.lead {
  max-width: 790px;
  font-size: clamp(1.12rem, 1.65vw, 1.5rem);
  font-weight: 300;
  line-height: 1.65;
}

.copy {
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
}

.copy--light {
  color: rgba(255, 255, 255, 0.68);
}

.red-text {
  color: var(--red);
}

.display-line {
  display: block;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease);
}

.button::after {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  font-size: 1rem;
  line-height: 1;
  transform: rotate(45deg);
}

.button:hover,
.button:focus-visible {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.button--red {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.button--red:hover,
.button--red:focus-visible {
  border-color: var(--red-dark);
  background: var(--red-dark);
}

.button--light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.button--light:hover,
.button--light:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-link::after {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  font-size: 1rem;
  transform: rotate(45deg);
  transition: transform 200ms var(--ease);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: translateX(5px) rotate(45deg);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.6fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
  margin-bottom: clamp(58px, 8vw, 118px);
}

.section-head h2 {
  max-width: 900px;
  margin-bottom: 28px;
}

.rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.rule-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.rule-list .card-index {
  color: var(--red);
}

.inline-note {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.inline-note::before {
  color: var(--red);
  content: "●";
  font-size: 0.58rem;
  transform: translateY(8px);
}

.breadcrumb {
  padding: 28px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.65;
  text-align: center;
  text-transform: uppercase;
}

.breadcrumb a {
  color: var(--ink);
  transition: color 180ms ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   03. Navigation desktop / mobile
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 102;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 0;
  background: linear-gradient(to bottom, rgba(244, 242, 237, 0.94), rgba(244, 242, 237, 0));
  color: var(--ink);
  transition: height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  height: 72px;
  background: rgba(244, 242, 237, 0.9);
  box-shadow: 0 10px 35px rgba(20, 20, 20, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.site-header--solid {
  background: rgba(244, 242, 237, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.site-header__inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 3%;
}

.brand {
  position: relative;
  z-index: 102;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.brand__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.brand__logo::before {
  position: absolute;
  inset: 0;
  background: url("../img/logo-amconcept-light.svg") center / contain no-repeat;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/*
  REPÈRE DE LA PAGE D’ACCUEIL
  L’ellipse reste attachée au seul logo AM CONCEPT, sans englober le
  cartouche PRO. Sa teinte sombre convient à la navigation claire et mobile.
*/
body[data-page="home"] .brand__logo::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 6px;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 18, 18, 0.75) 0%,
    rgba(18, 18, 18, 0.25) 35%,
    transparent 70%
  );
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.brand img {
  width: 200px;
  transition: opacity 0.35s ease;
}

.brand__pro {
  padding: 3px 6px;
  border: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}

.desktop-nav a {
  position: relative;
  padding-block: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.desktop-nav .nav-external {
  color: var(--red);
}

.menu-toggle {
  position: relative;
  z-index: 102;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle__lines {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}

.menu-toggle__lines > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.menu-toggle__lines > span:nth-child(1) { top: 0; }
.menu-toggle__lines > span:nth-child(2) { top: 8px; }
.menu-toggle__lines > span:nth-child(3) { top: 16px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines > span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines > span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines > span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.mobile-panel {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  visibility: hidden;
  grid-template-rows: 1fr auto;
  padding: 112px var(--gutter) 30px;
  background: var(--page);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 260ms ease, transform 350ms var(--ease), visibility 350ms;
}

.mobile-panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-nav a {
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.65rem, 7vw, 3rem);
  font-weight: 200;
  line-height: 1.12;
}

.mobile-nav a[aria-current="page"] {
  color: var(--red);
}

.mobile-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-top: 24px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mobile-panel__foot a:last-child {
  color: var(--red);
}

/* Header posé sur un hero photographique sombre */
.site-header--over-hero:not(.is-scrolled) {
  color: var(--ink);
}

.site-header--over-hero:not(.is-scrolled) .brand img {
  filter: none;
}

.site-header--over-hero.is-scrolled {
  color: var(--ink);
}

/*
  NAVIGATION SUR LES HEROS — ETAT INITIAL SUR ORDINATEUR
  Le contraste sombre reprend l’esprit du Store. Dès le premier défilement,
  la classe is-scrolled rend la navigation beige et noire comme auparavant.
  Les pages à en-tête plein et la navigation mobile ne sont pas concernées.
*/
@media (min-width: 1081px) {
  .site-header--over-hero:not(.is-scrolled) {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 25%,
      rgba(0, 0, 0, 0.35) 50%,
      rgba(0, 0, 0, 0.15) 75%,
      rgba(0, 0, 0, 0) 100%
    );
    color: #aaa;
  }

  .site-header--over-hero:not(.is-scrolled) .brand {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.55));
  }

  .site-header--over-hero:not(.is-scrolled) .brand img {
    opacity: 0;
  }

  .site-header--over-hero:not(.is-scrolled) .brand__logo::before {
    opacity: 1;
  }

  body[data-page="home"] .site-header--over-hero:not(.is-scrolled) .brand__logo::after {
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 35%,
      transparent 70%
    );
  }

  .site-header--over-hero:not(.is-scrolled) .brand__pro {
    border-color: rgba(255, 255, 255, 0.92);
    color: #fff;
  }

  .site-header--over-hero:not(.is-scrolled) .desktop-nav a {
    color: #aaa;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  }

  .site-header--over-hero:not(.is-scrolled) .desktop-nav a:hover,
  .site-header--over-hero:not(.is-scrolled) .desktop-nav a:focus-visible {
    color: #fff;
    text-shadow: 0 0 8px #fff;
  }
}

/* --------------------------------------------------------------------------
   04. Heroes
   -------------------------------------------------------------------------- */

.home-hero h1,
.page-hero h1 {
  font-weight: 100;
  line-height: 0.82;
}

.home-hero {
  position: relative;
  min-height: min(940px, 100svh);
  overflow: hidden;
  background: #1b1b1a;
  color: #fff;
}

.home-hero__media,
.home-hero__media::after {
  position: absolute;
  inset: 0;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.62) contrast(1.05);
}

.home-hero__media::after {
  background:
    linear-gradient(90deg, rgba(11, 11, 11, 0.83) 0%, rgba(11, 11, 11, 0.58) 43%, rgba(11, 11, 11, 0.08) 76%),
    linear-gradient(0deg, rgba(11, 11, 11, 0.7) 0%, transparent 35%);
  content: "";
}

.home-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: min(940px, 100svh);
  flex-direction: column;
  justify-content: center;
  padding-top: 130px;
  padding-bottom: 96px;
}

.home-hero h1 {
  max-width: 970px;
  font-size: clamp(3.35rem, 8.3vw, 8.8rem);
}

.home-hero__intro {
  max-width: 690px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.02rem, 1.4vw, 1.3rem);
}

.home-hero__foot {
  position: absolute;
  right: 0;
  bottom: 38px;
  left: 0;
  z-index: 3;
}

.hero-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: auto;
  max-width: 620px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-signal {
  min-height: 82px;
  padding: 17px 18px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-signal:first-child {
  border-left: 0;
}

.hero-signal strong {
  display: block;
  margin-top: 5px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
}

.hero-signal .mono-label {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.58rem;
}

.page-hero {
  padding-top: calc(var(--header-height) + clamp(72px, 8vw, 126px));
  padding-bottom: clamp(72px, 9vw, 136px);
}

.page-hero--dark {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
}

.page-hero--dark .page-hero__backdrop {
  position: absolute;
  inset: 0;
}

.page-hero--dark .page-hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: grayscale(0.25) contrast(1.05);
}

.page-hero--dark .page-hero__backdrop::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 16, 15, 0.88) 0%, rgba(16, 16, 15, 0.52) 60%, rgba(16, 16, 15, 0.34) 100%);
  content: "";
}

.page-hero__content {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  max-width: 1130px;
  font-size: clamp(3rem, 7.5vw, 7.8rem);
}

.page-hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: clamp(38px, 8vw, 120px);
  align-items: end;
}

.page-hero__quick {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-hero__quick li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid currentColor;
  font-size: 0.86rem;
  opacity: 0.8;
}

.page-hero__quick li::before {
  color: var(--red);
  content: "✓";
}

.page-hero--dark .page-hero__quick li {
  border-color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   05. Accueil
   -------------------------------------------------------------------------- */

.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.55fr);
  gap: clamp(70px, 12vw, 190px);
  align-items: start;
}

.thesis-grid h2 {
  max-width: 950px;
}

.thesis-aside {
  padding-top: clamp(30px, 8vw, 100px);
}

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

.expertise-card {
  position: relative;
  display: flex;
  min-height: clamp(370px, 43vw, 620px);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.expertise-card__visual {
  position: absolute;
  inset: 0;
  background: var(--dark-soft);
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 900ms var(--ease);
}

.expertise-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08);
  transform: scale(1.04);
  transition: transform 900ms var(--ease);
}

.expertise-card__visual::after {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 15, 0.56);
  content: "";
}

.expertise-card__top,
.expertise-card__bottom {
  position: relative;
  z-index: 2;
}

.expertise-card__top {
  display: flex;
  justify-content: space-between;
}

.expertise-card h3 {
  max-width: 490px;
  margin-bottom: 22px;
  font-size: clamp(2rem, 4vw, 4.3rem);
}

.expertise-card p {
  max-width: 440px;
  color: var(--muted);
}

.expertise-card__arrow {
  width: 50px;
  height: 50px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 280ms var(--ease), background 280ms ease, color 280ms ease;
}

.expertise-card__arrow::before {
  display: block;
  width: 0.65em;
  height: 0.65em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
}

.flow-arrow {
  margin: 0 0.45em;
  vertical-align: 0.08em;
}

.expertise-card:hover,
.expertise-card:focus-visible {
  color: #fff;
}

.expertise-card:hover .expertise-card__visual,
.expertise-card:focus-visible .expertise-card__visual {
  opacity: 1;
}

.expertise-card:hover .expertise-card__visual img,
.expertise-card:focus-visible .expertise-card__visual img {
  transform: scale(1);
}

.expertise-card:hover p,
.expertise-card:focus-visible p {
  color: rgba(255, 255, 255, 0.72);
}

.expertise-card:hover .expertise-card__arrow,
.expertise-card:focus-visible .expertise-card__arrow {
  background: #fff;
  color: var(--ink);
  transform: rotate(45deg);
}

.integration-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(52px, 9vw, 145px);
  align-items: center;
}

.integration-visual {
  position: relative;
  min-height: clamp(470px, 56vw, 760px);
  overflow: hidden;
  background: #d8d5cd;
}

.integration-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.document-stack {
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  bottom: clamp(18px, 3vw, 48px);
  z-index: 2;
  width: min(62%, 330px);
  padding: clamp(20px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
}

.document-stack__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.document-stack__row:last-child {
  border-bottom: 0;
}

.document-stack__row span:last-child {
  color: var(--red);
}

.flow-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
}

.flow-step {
  min-height: 230px;
  padding: clamp(24px, 3vw, 42px);
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.flow-step .card-index {
  display: block;
  margin-bottom: 54px;
  color: #d35a5e;
}

.flow-step h3 {
  margin-bottom: 10px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.flow-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.86rem;
}

.judgement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
  gap: clamp(56px, 10vw, 150px);
  align-items: end;
}

.judgement-layout blockquote {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  font-weight: 100;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.judgement-person {
  padding-top: 40px;
  border-top: 1px solid var(--line-light);
}

.judgement-person img {
  width: min(100%, 300px);
  margin-bottom: 28px;
  filter: grayscale(1);
}

/* Une seule touche manuscrite, héritée de la famille .fr / .store. */
.human-signature {
  margin: -8px 0 18px;
  color: #d35a5e;
  font-family: "Pecita", cursive;
  font-size: 2.4rem;
  line-height: 1;
    font-variant: normal;
  text-transform: none;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.fit-card {
  padding: clamp(34px, 5vw, 72px);
  background: var(--paper);
}

.fit-card--muted {
  background: #eae8e2;
}

.fit-card h3 {
  max-width: 500px;
  margin-bottom: 44px;
}

.fit-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding-block: 13px;
  border-top: 1px solid var(--line);
}

.fit-card li::before {
  content: "+";
  color: var(--red);
  font-family: "IBM Plex Mono", monospace;
}

.fit-card--muted li::before {
  color: var(--muted);
  content: "–";
}

/* --------------------------------------------------------------------------
   06. Pages métiers
   -------------------------------------------------------------------------- */

.answer-strip {
  position: relative;
  z-index: 4;
  margin-top: -44px;
}

.answer-strip__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(14, 14, 13, 0.09);
}

.answer-card {
  min-height: 185px;
  padding: clamp(26px, 3.3vw, 48px);
  border-right: 1px solid var(--line);
}

.answer-card:last-child {
  border-right: 0;
}

.answer-card .card-index {
  display: block;
  margin-bottom: 32px;
  color: var(--red);
}

.answer-card strong {
  display: block;
  max-width: 330px;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 400;
  line-height: 1.5;
}

.content-split {
  display: grid;
  grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(48px, 10vw, 160px);
  align-items: start;
}

.content-split__aside {
  position: sticky;
  top: 120px;
}

.content-split__aside h2 {
  font-size: clamp(2.3rem, 4.3vw, 4.5rem);
}

.spec-list {
  border-top: 1px solid var(--line);
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 70px);
  padding-block: clamp(25px, 3.5vw, 46px);
  border-bottom: 1px solid var(--line);
}

.spec-row h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.spec-row p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
}

.visual-placeholder {
  position: relative;
  display: grid;
  min-height: clamp(390px, 51vw, 690px);
  place-items: center;
  overflow: hidden;
  padding: var(--gutter);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    #e9e7e1;
  background-size: 42px 42px;
}

.visual-placeholder::before,
.visual-placeholder::after {
  position: absolute;
  background: var(--line);
  content: "";
}

.visual-placeholder::before {
  width: 140%;
  height: 1px;
  transform: rotate(32deg);
}

.visual-placeholder::after {
  width: 140%;
  height: 1px;
  transform: rotate(-32deg);
}

.visual-placeholder__note {
  position: relative;
  z-index: 2;
  max-width: 540px;
  padding: clamp(26px, 4vw, 48px);
  background: rgba(244, 242, 237, 0.94);
  text-align: center;
}

.visual-placeholder__note p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.placeholder-label {
  display: block;
  margin-bottom: 15px;
  color: var(--red);
}

.timeline {
  counter-reset: timeline;
}

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(180px, 0.55fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 62px);
  padding-block: clamp(30px, 4vw, 56px);
  border-top: 1px solid var(--line);
  counter-increment: timeline;
}

.timeline-row:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline-row::before {
  color: var(--red);
  content: counter(timeline, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.timeline-row h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.timeline-row p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}

.question-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.65fr);
  gap: clamp(50px, 10vw, 160px);
  padding: clamp(40px, 7vw, 100px);
  background: var(--dark);
  color: #fff;
}

.question-panel h2 {
  max-width: 800px;
}

.question-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.question-panel li {
  padding-block: 13px;
  border-top: 1px solid var(--line-light);
  color: rgba(255, 255, 255, 0.72);
}

.question-panel li:last-child {
  border-bottom: 1px solid var(--line-light);
}

.next-expertise {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  padding-block: clamp(48px, 7vw, 90px);
  border-top: 1px solid var(--line);
}

.next-expertise h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 4.4rem);
}

/* --------------------------------------------------------------------------
   07. Méthode, moyens et contact
   -------------------------------------------------------------------------- */

.method-principle {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(52px, 10vw, 150px);
  align-items: center;
}

.method-principle__image {
  position: relative;
  min-height: clamp(430px, 55vw, 730px);
  overflow: hidden;
}

.method-principle__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.principle-statement {
  padding-left: clamp(24px, 5vw, 76px);
  border-left: 1px solid var(--red);
}

.principle-statement p {
  font-size: clamp(1.55rem, 3vw, 3rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.document-card {
  min-height: 280px;
  padding: clamp(26px, 3.5vw, 48px);
  background: var(--paper);
  color: var(--ink);
}

.document-card .mono-label {
  display: block;
  margin-bottom: 70px;
  color: var(--red);
}

.document-card h3 {
  font-size: 1.45rem;
}

.document-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.equipment-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
  gap: clamp(48px, 10vw, 160px);
  align-items: end;
}

.equipment-table {
  width: 100%;
  border-collapse: collapse;
}

.equipment-table th,
.equipment-table td {
  padding: 25px 18px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.equipment-table th {
  width: 10%;
  padding-left: 0;
  font-size: 1rem;
  font-weight: 500;
}

.equipment-table td b {
  font-weight: 800;
}

.equipment-table td {
  color: var(--muted);
}

.equipment-table td:last-child {
  width: 60%;
  padding-right: 0;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.equipment-edit-note {
  margin-top: 30px;
  padding: 22px;
  border: 1px dashed var(--red);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
}

.contact-hero {
  min-height: 770px;
  display: flex;
  align-items: center;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.55fr);
  gap: clamp(70px, 12vw, 180px);
  align-items: end;
}

.phone-link {
  display: inline-block;
  margin: 10px 0 28px;
  color: var(--red);
  font-size: clamp(2.8rem, 7.3vw, 7.8rem);
  font-weight: 100;
  letter-spacing: -0.055em;
  line-height: 1;
}

.phone-link:hover,
.phone-link:focus-visible {
  color: var(--red-dark);
}

.contact-card {
  padding: clamp(30px, 4vw, 50px);
  background: var(--paper);
}

.contact-card dl {
  margin: 0;
}

.contact-card dt {
  margin-top: 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-card dt:first-child {
  margin-top: 0;
}

.contact-card dd {
  margin: 7px 0 0;
  color: var(--muted);
}

.prep-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.prep-card {
  min-height: 260px;
  padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.prep-card .card-index {
  display: block;
  margin-bottom: 54px;
  color: var(--red);
}

.prep-card h3 {
  font-size: 1.35rem;
}

.legal-content {
  max-width: 900px;
}

.legal-content section {
  padding-block: 42px;
  border-top: 1px solid var(--line);
}

.legal-content h2 {
  margin-bottom: 24px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.legal-content h3 {
  margin-top: 30px;
  font-size: 1.3rem;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   08. Footer et appel final
   -------------------------------------------------------------------------- */

.contact-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(75px, 10vw, 145px);
  background: var(--red);
  color: #fff;
}

.contact-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 50px;
  align-items: end;
}

.contact-band h2 {
  max-width: 1050px;
  margin: 0;
}

.contact-band__phone {
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
}

.contact-band__phone:hover,
.contact-band__phone:focus-visible {
  opacity: 0.75;
}

.site-footer {
  padding-top: clamp(72px, 10vw, 140px);
  padding-bottom: 28px;
  background: #111;
  color: #fff;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) repeat(3, minmax(150px, 0.6fr));
  gap: clamp(42px, 7vw, 100px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

.site-footer__brand img {
  width: 190px;
  margin-bottom: 30px;
  filter: brightness(0) invert(1);
}

.site-footer__brand p {
  max-width: 350px;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(0.95rem, 0.9vw, 1.05rem);
}

.footer-col h2 {
  margin-bottom: 28px;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(0.76rem, 0.7vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.footer-col a,
.footer-col span {
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.95rem, 0.85vw, 1rem);
  transition: color 180ms ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #fff;
}

.footer-col a .footer-link-arrow {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin: 0 0 0 0.35em;
  color: inherit;
  font-size: inherit;
  vertical-align: 0.05em;
}

.footer-col a.footer-red {
  color: #d75b60;
}

.footer-univers ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-univers li {
  margin-bottom: 17px;
}

.footer-univers li > a,
.footer-univers li > a span {
  margin-bottom: 0;
}

.footer-univers small {
  display: block;
  max-width: 220px;
  color: rgba(255, 255, 255, 0.48);
  font-size: clamp(0.78rem, 0.72vw, 0.86rem);
  line-height: 1.5;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.72rem, 0.68vw, 0.78rem);
  letter-spacing: 0.07em;
  line-height: 1.7;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom p:last-child {
  text-align: right;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    position: absolute;
    left: 8px;
    display: flex;
  }

  .site-header,
  .site-header.is-scrolled,
  .site-header--solid {
    top: 8px;
    right: 15px;
    left: 15px;
    width: auto;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 28px;
    background: rgba(248, 248, 248, 0.68);
    color: var(--ink);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 28px rgba(20, 20, 20, 0.11);
    opacity: 1;
    visibility: visible;
    will-change: opacity;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    transition:
      opacity 0.35s ease,
      visibility 0s linear 0s;
  }

  /*
    NAVIGATION MOBILE — DISPARITION SANS DÉPLACEMENT
    La barre reste physiquement en place et s’efface par fondu afin de ne pas
    perturber la zone située sous la Dynamic Island.
  */
  .site-header.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .site-header__inner {
    position: relative;
    width: 100%;
    justify-content: center;
    padding-inline: 18px;
  }

  .site-header--over-hero:not(.is-scrolled) {
    color: var(--ink);
  }

  .site-header--over-hero:not(.is-scrolled) .brand img {
    filter: none;
  }

  .brand img {
    width: 166px;
  }

  .page-hero {
    padding-top: 118px;
  }

  .flow-track,
  .prep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 800px) {
  :root {
    --section: 88px;
  }

  h1,
  .page-hero h1,
  .home-hero h1 {
    letter-spacing: -0.045em;
  }

  .page-hero h1,
  .home-hero h1 {
    line-height: 0.9;
  }

  .section-head,
  .thesis-grid,
  .integration-layout,
  .judgement-layout,
  .page-hero__intro,
  .content-split,
  .method-principle,
  .equipment-intro,
  .contact-layout,
  .question-panel {
    grid-template-columns: 1fr;
  }

  .section-head,
  .thesis-grid,
  .integration-layout,
  .judgement-layout,
  .content-split,
  .method-principle,
  .equipment-intro,
  .contact-layout,
  .question-panel {
    gap: 50px;
  }

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

  .thesis-aside {
    padding-top: 0;
  }

  .home-hero,
  .home-hero__content {
    min-height: 780px;
  }

  .home-hero__content {
    justify-content: flex-end;
    padding-bottom: 160px;
  }

  .home-hero__media img {
    object-position: 67% center;
  }

  .home-hero__media::after {
    background: linear-gradient(0deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.48) 72%, rgba(11, 11, 11, 0.28) 100%);
  }

  .hero-signals {
    max-width: none;
  }

  .expertise-grid,
  .fit-grid {
    grid-template-columns: 1fr;
  }

  .expertise-card {
    min-height: 440px;
  }

  .content-split__aside {
    position: static;
  }

  .answer-strip {
    margin-top: 0;
  }

  .answer-strip__inner {
    grid-template-columns: 1fr;
  }

  .answer-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .answer-card:last-child {
    border-bottom: 0;
  }

  .timeline-row {
    grid-template-columns: 55px 1fr;
  }

  .timeline-row p {
    grid-column: 2;
  }

  .documents-grid {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    min-height: 0;
  }

  .contact-band__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }

  body {
    font-size: 15px;
  }

  .brand__pro {
    display: none;
  }

  .home-hero,
  .home-hero__content {
    min-height: 720px;
  }

  .home-hero__content {
    padding-top: 100px;
    padding-bottom: 180px;
  }

  .home-hero__foot {
    bottom: 22px;
  }

  .hero-signals {
    grid-template-columns: 1fr;
  }

  .hero-signal {
    display: flex;
    min-height: 0;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }

  .hero-signal strong {
    margin-top: 0;
    font-size: 0.74rem;
    text-align: right;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .expertise-card {
    min-height: 390px;
  }

  .integration-visual {
    min-height: 480px;
  }

  .document-stack {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .flow-track,
  .prep-grid {
    grid-template-columns: 1fr;
  }

  .flow-step,
  .prep-card {
    min-height: 0;
  }

  .flow-step .card-index,
  .prep-card .card-index,
  .document-card .mono-label {
    margin-bottom: 34px;
  }

  .spec-row {
    grid-template-columns: 1fr;
  }

  .timeline-row {
    grid-template-columns: 38px 1fr;
  }

  .next-expertise {
    grid-template-columns: 1fr;
  }

  .equipment-table,
  .equipment-table tbody,
  .equipment-table tr,
  .equipment-table th,
  .equipment-table td {
    display: block;
    width: 100%;
  }

  .equipment-table tr {
    padding-block: 22px;
    border-top: 1px solid var(--line);
  }

  .equipment-table th,
  .equipment-table td {
    padding: 5px 0;
    border: 0;
  }

  .equipment-table td:last-child {
    width: 100%;
  }

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

  .site-footer__brand,
  .site-footer__brand p,
  .footer-col,
  .footer-col h2 {
    text-align: center;
  }

  .site-footer__brand img,
  .site-footer__brand p,
  .footer-col a,
  .footer-col span,
  .footer-univers small {
    margin-right: auto;
    margin-left: auto;
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__bottom p:last-child {
    text-align: center;
  }
}

/* Respect du réglage d’accessibilité de l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}