:root {
  --navy: #10166f;
  --navy-deep: #080c3e;
  --navy-soft: #202784;
  --ivory: #f3efe6;
  --paper: #fbfaf7;
  --white: #fff;
  --gold: #b99d6a;
  --text: #22232c;
  --muted: #6e6d73;
  --line: rgba(16, 22, 111, 0.16);
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --header-h: 88px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
}

body.is-locked {
  overflow: hidden;
}

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

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

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 8px;
  padding: 9px 14px;
  color: var(--navy);
  background: var(--white);
  transform: translateY(-150%);
}

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

/* Le voile se retire tout seul au bout de quatre secondes, sans attendre le
   JavaScript. Sans ce filet, un script.js absent, bloqué par une extension ou
   en erreur après un déploiement laisse le visiteur devant un écran ivoire
   vide : le voile couvre toute la page et seul `.is-hidden`, posé par le
   script, le levait. Le repli devient le site avec ses textes en dur.
   Le mode « animations réduites » ne raccourcit que la durée, jamais le délai,
   donc le filet tient aussi dans ce mode. */
.page-loader {
  position: fixed;
  z-index: 250;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ivory);
  transition: opacity 0.7s ease, visibility 0.7s;
  animation: loaderSecours 0.7s ease 4s forwards;
}

@keyframes loaderSecours {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.page-loader img {
  width: min(330px, 65vw);
  height: auto;
  animation: loaderPulse 1.2s ease-in-out infinite alternate;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes loaderPulse {
  from {
    opacity: 0.48;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.site-header {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  padding: 0 clamp(20px, 4.5vw, 75px);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: height 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled,
.site-header.is-mega-open {
  height: 74px;
  color: var(--navy);
  background: rgba(251, 250, 247, 0.97);
  border-color: var(--line);
  box-shadow: 0 14px 40px rgba(8, 12, 62, 0.07);
  backdrop-filter: blur(15px);
}

.brand {
  --hauteur-logo: 64px;
  width: 182px;
  height: var(--hauteur-logo);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.brand img {
  /* Le conteneur fait 64 px de haut alors que le logo, à cette largeur, en fait
     122. Sans « contain », il déborde et le débordement masqué n'en laisse voir
     qu'une bande centrale : symbole tronqué en haut, texte coupé en bas.
     « contain » le fait tenir en entier, sans jamais le déformer. */
  /* Hauteur explicite plutôt qu'un pourcentage : la ligne de la grille parente
     s'adapte au contenu, donc « max-height: 100% » se résoudrait contre une
     hauteur indéfinie et resterait sans effet. « contain » fait tenir le logo
     entier dans cette boîte, quelles que soient ses proportions. */
  width: 100%;
  height: var(--hauteur-logo);
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.site-header.is-scrolled .brand img,
.site-header.is-mega-open .brand img {
  filter: none;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 44px);
}

.desktop-nav a,
.expertise-nav-trigger {
  position: relative;
  padding: 12px 0;
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.desktop-nav a::after,
.expertise-nav-trigger::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

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

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
}

.language-switcher button {
  width: 27px;
  height: 27px;
  padding: 0;
  color: currentColor;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font-size: 8px;
  font-weight: 600;
}

.language-switcher button.is-active {
  color: var(--navy);
  border-color: var(--gold);
  background: var(--ivory);
}

.consultation-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 17px;
  color: var(--navy);
  border: 0;
  background: var(--white);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.site-header.is-scrolled .consultation-link,
.site-header.is-mega-open .consultation-link {
  color: var(--white);
  background: var(--navy);
}

.consultation-link:hover {
  color: var(--navy-deep);
  background: var(--gold);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
}

.expertise-mega {
  position: fixed;
  z-index: 110;
  top: 74px;
  left: 0;
  width: 100%;
  min-height: 560px;
  display: grid;
  grid-template-columns: 0.82fr 1.45fr 0.73fr;
  gap: clamp(35px, 6vw, 95px);
  padding: 58px clamp(28px, 6vw, 96px);
  color: var(--navy);
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 32px 70px rgba(8, 12, 62, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 0.32s ease, visibility 0.32s, transform 0.32s ease;
}

.expertise-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-intro {
  padding-right: 20px;
}

.section-number {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mega-intro .eyebrow {
  margin-top: 35px;
  color: var(--navy);
}

.mega-intro h2,
.hero h1,
.profile h2,
.expertise-heading h2,
.story-content h2,
.approach h2,
.identity-copy h2,
.contact h2,
.consultation-modal h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.mega-intro h2 {
  max-width: 390px;
  font-size: clamp(38px, 3.5vw, 57px);
}

.mega-intro > p:not(.eyebrow) {
  max-width: 390px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 12px;
}

.mega-intro a,
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 0 6px;
  color: var(--navy);
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  border-top: 1px solid var(--line);
}

.mega-list a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.1;
  transition: color 0.2s ease, background 0.2s ease, padding 0.2s ease;
}

.mega-list a:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.mega-list a:hover {
  padding-left: 18px;
  color: var(--white);
  background: var(--navy);
}

.mega-list span {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 8px;
}

.mega-visual {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  background: var(--navy-deep);
}

.mega-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.03);
}

.mega-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 62, 0.72));
}

.mega-visual span {
  position: absolute;
  z-index: 1;
  right: -8px;
  bottom: -28px;
  color: rgba(255, 255, 255, 0.14);
  font-family: var(--display);
  font-size: 130px;
  line-height: 1;
}

.mobile-menu {
  position: fixed;
  z-index: 105;
  inset: 0;
  display: none;
  padding: 120px 24px 35px;
  color: var(--white);
  background: var(--navy-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 45px) clamp(24px, 7vw, 110px) 85px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.hero-image,
.hero-overlay,
.hero-grid {
  position: absolute;
  inset: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.03 + var(--hero-scale, 0)));
  will-change: transform;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(5, 8, 38, 0.83) 0%, rgba(5, 8, 38, 0.56) 45%, rgba(5, 8, 38, 0.05) 100%),
    linear-gradient(180deg, rgba(5, 8, 38, 0.4), transparent 30%, rgba(5, 8, 38, 0.5));
}

.hero-grid {
  left: 58%;
  width: 1px;
  background: rgba(255, 255, 255, 0.17);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(870px, 76%);
}

.hero h1 {
  max-width: 900px;
  font-size: clamp(68px, 8.4vw, 128px);
  opacity: 0;
  transform: translateY(30px);
  animation: heroEnter 0.95s 0.85s forwards;
}

.hero h1 em,
.expertise-heading h2 em,
.contact h2 em {
  color: var(--gold);
  font-weight: 400;
}

.hero-content > p:not(.eyebrow) {
  max-width: 520px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroEnter 0.8s 1.1s forwards;
}

.hero .eyebrow {
  opacity: 0;
  transform: translateY(16px);
  animation: heroEnter 0.7s 0.72s forwards;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 38px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroEnter 0.8s 1.25s forwards;
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 240px;
  gap: 28px;
  padding: 17px 19px;
  border: 1px solid transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-light {
  color: var(--navy);
  background: var(--white);
}

.button-light:hover {
  background: var(--gold);
}

.button-dark {
  color: var(--white);
  background: var(--navy);
}

.button-dark:hover {
  color: var(--navy-deep);
  background: var(--gold);
}

.line-link {
  display: inline-flex;
  gap: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-caption {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 5vw, 80px);
  bottom: 34px;
  display: flex;
  gap: 42px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: var(--white);
  background: var(--navy);
}

.trust-strip article {
  min-height: 190px;
  display: grid;
  grid-template-columns: 35px 1fr;
  grid-template-rows: auto 1fr;
  align-content: center;
  padding: 44px clamp(25px, 4vw, 62px);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.trust-strip article:last-child {
  border-right: 0;
}

.trust-strip article > span {
  grid-row: 1 / 3;
  color: var(--gold);
  font-size: 8px;
}

.trust-strip strong {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
}

.trust-strip p {
  max-width: 350px;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

.profile {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 900px;
  background: var(--paper);
}

.profile-copy {
  padding: 125px clamp(35px, 7vw, 115px);
}

.section-kicker {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-kicker p {
  margin: 0;
}

.profile-copy > .eyebrow {
  margin-top: 105px;
  color: var(--navy);
}

.profile h2,
.expertise-heading h2,
.approach h2,
.identity-copy h2 {
  color: var(--navy);
  font-size: clamp(50px, 5.7vw, 86px);
}

.profile-lead {
  max-width: 670px;
  margin: 35px 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.45;
}

.profile-quote {
  display: grid;
  grid-template-columns: 45px 1fr;
  max-width: 600px;
  margin: 42px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-quote > span {
  height: 42px;
  color: var(--gold);
  font-family: var(--display);
  font-size: 68px;
  line-height: 1;
}

.profile-quote p {
  margin: 3px 0 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.35;
}

.profile-portrait {
  position: relative;
  min-height: 900px;
  margin: 0;
  overflow: hidden;
  background: var(--navy-deep);
}

.profile-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.profile-portrait::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(8, 12, 62, 0.82));
}

.profile-portrait figcaption {
  position: absolute;
  z-index: 1;
  right: 35px;
  bottom: 32px;
  left: 35px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: var(--white);
}

.profile-portrait figcaption strong {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
}

.profile-portrait figcaption span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.expertises {
  padding: 130px clamp(24px, 6.5vw, 105px);
  background: var(--ivory);
}

.expertise-heading {
  display: grid;
  grid-template-columns: 0.35fr 1.25fr 0.55fr;
  gap: clamp(35px, 6vw, 95px);
  align-items: end;
  margin-bottom: 70px;
}

.expertise-heading > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.expertise-stage {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  min-height: 820px;
  background: var(--paper);
}

.expertise-visual {
  position: sticky;
  top: 74px;
  height: calc(100svh - 74px);
  min-height: 720px;
  overflow: hidden;
}

.expertise-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.expertise-visual.is-changing > img {
  transform: scale(1.035);
}

.expertise-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 62, 0.06), rgba(8, 12, 62, 0.85));
}

.expertise-active-copy {
  position: absolute;
  right: 45px;
  bottom: 50px;
  left: 45px;
  color: var(--white);
}

.expertise-active-copy > span {
  color: var(--gold);
  font-size: 9px;
}

.expertise-active-copy h3 {
  max-width: 540px;
  margin: 16px 0;
  font-family: var(--display);
  font-size: clamp(42px, 4.6vw, 70px);
  font-weight: 400;
  line-height: 0.98;
}

.expertise-active-copy p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.expertise-active-copy button {
  display: inline-flex;
  gap: 20px;
  margin-top: 16px;
  padding: 0 0 6px;
  color: var(--white);
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.expertise-row {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: center;
  min-height: 96px;
  padding: 0 32px;
  color: var(--navy);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: color 0.22s ease, background 0.22s ease, padding 0.22s ease;
}

.expertise-row:hover,
.expertise-row:focus-visible,
.expertise-row.is-active {
  padding-left: 42px;
  color: var(--white);
  outline: 0;
  background: var(--navy);
}

.expertise-row > span:first-child {
  color: var(--gold);
  font-size: 8px;
}

.expertise-row strong {
  font-family: var(--display);
  font-size: clamp(25px, 2.5vw, 39px);
  font-weight: 400;
  line-height: 1;
}

.expertise-row > span:last-child {
  font-size: 18px;
}

.consultation-story {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: flex-end;
  padding: 90px clamp(24px, 7vw, 110px);
  overflow: hidden;
  color: var(--white);
}

.consultation-story > img,
.story-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.consultation-story > img {
  object-fit: cover;
}

.story-shade {
  background: linear-gradient(180deg, transparent 28%, rgba(8, 12, 62, 0.9));
}

.story-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.story-content h2 {
  max-width: 850px;
  font-size: clamp(50px, 6.2vw, 92px);
}

.story-content > p:last-child {
  max-width: 600px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.approach {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 900px;
  background: var(--paper);
}

.approach-image {
  min-height: 900px;
  overflow: hidden;
}

.approach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.approach-copy {
  padding: 115px clamp(35px, 7vw, 115px);
}

.approach-copy > .eyebrow {
  margin-top: 90px;
  color: var(--navy);
}

.process-list {
  margin: 65px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.process-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 15px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}

.process-list li > span {
  color: var(--gold);
  font-size: 8px;
}

.process-list h3 {
  margin: -7px 0 4px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
}

.process-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.identity-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: center;
  gap: clamp(45px, 8vw, 130px);
  padding: 120px clamp(24px, 7vw, 110px);
  background: var(--ivory);
}

.identity-copy h2 {
  font-size: clamp(47px, 5vw, 76px);
}

.identity-copy > p:not(.eyebrow) {
  max-width: 530px;
  margin: 28px 0 35px;
  color: var(--muted);
  font-size: 13px;
}

.business-card {
  margin: 0;
  box-shadow: 0 30px 70px rgba(8, 12, 62, 0.18);
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.business-card:hover {
  box-shadow: 0 40px 90px rgba(8, 12, 62, 0.23);
  transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px);
}

.contact {
  position: relative;
  min-height: 790px;
  display: grid;
  place-items: center;
  padding: 100px 24px;
  overflow: hidden;
  color: var(--white);
  text-align: center;
}

.contact > img,
.contact-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact > img {
  object-fit: cover;
}

.contact-overlay {
  background: rgba(8, 12, 62, 0.78);
}

.contact-content {
  position: relative;
  z-index: 1;
}

.contact h2 {
  font-size: clamp(65px, 8.5vw, 128px);
}

.contact-content > p:not(.eyebrow) {
  max-width: 560px;
  margin: 28px auto 38px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr;
  gap: 70px;
  padding: 75px clamp(24px, 7vw, 110px) 25px;
  color: var(--white);
  background: var(--navy-deep);
}

.footer-brand img {
  width: min(330px, 100%);
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer > div:not(.footer-brand):not(.footer-bottom) {
  display: flex;
  flex-direction: column;
}

.site-footer p {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer a {
  width: max-content;
  margin: 3px 0;
  font-family: var(--display);
  font-size: 19px;
}

/* La barre inférieure porte désormais les liens vers les mentions légales et la
   politique de confidentialité. Elle était réglée à 8 px et 42 % de blanc :
   illisible pour du texte que le visiteur doit pouvoir trouver et cliquer. */
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 19px;
  color: rgba(255, 255, 255, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* `.site-footer a` impose la police d'affichage à 19 px pour les liens des
   colonnes. Ces liens-ci appartiennent à la barre inférieure et doivent en
   suivre la graisse, pas celle de la navigation. */
.footer-legal a {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}

.footer-legal a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.consultation-modal {
  width: min(720px, calc(100% - 28px));
  max-height: calc(100svh - 28px);
  padding: clamp(38px, 6vw, 68px);
  color: var(--text);
  border: 0;
  background: var(--paper);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.35);
}

.consultation-modal::backdrop {
  background: rgba(5, 8, 38, 0.82);
  backdrop-filter: blur(6px);
}

.modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 24px;
}

.consultation-modal h2 {
  color: var(--navy);
  font-size: clamp(45px, 6vw, 68px);
}

.modal-copy > p:last-child {
  color: var(--muted);
  font-size: 12px;
}

.consultation-modal form {
  display: grid;
  gap: 18px;
  margin-top: 35px;
}

.consultation-modal label {
  display: grid;
  gap: 5px;
}

.consultation-modal label span {
  color: var(--navy);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.consultation-modal input,
.consultation-modal select,
.consultation-modal textarea {
  width: 100%;
  padding: 12px 0;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.consultation-modal input:focus,
.consultation-modal select:focus,
.consultation-modal textarea:focus {
  border-color: var(--navy);
}

.consultation-modal small {
  color: var(--muted);
  font-size: 8px;
}

.form-success {
  display: none;
  min-height: 400px;
  place-content: center;
  text-align: center;
}

.form-success.is-visible {
  display: grid;
}

.form-success > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--white);
  border-radius: 50%;
  background: var(--navy);
  font-size: 21px;
}

.form-success p {
  max-width: 450px;
  color: var(--muted);
}

.form-success .button {
  margin: 20px auto 0;
}

/* Les sections sont lisibles par défaut. Le masquage initial n'est posé que
   par `js-anime`, que le script ajoute au moment précis où il branche
   l'observateur qui les révélera : si le script n'arrive jamais jusque-là, le
   visiteur lit la page au lieu de la découvrir vide. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js-anime .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-anime .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html[dir="rtl"] body {
  font-family: Tahoma, Arial, sans-serif;
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .mega-intro,
html[dir="rtl"] .profile-copy,
html[dir="rtl"] .approach-copy,
html[dir="rtl"] .identity-copy,
html[dir="rtl"] .expertise-row {
  text-align: right;
}

html[dir="rtl"] .expertise-row:hover,
html[dir="rtl"] .expertise-row:focus-visible,
html[dir="rtl"] .expertise-row.is-active {
  padding-right: 42px;
  padding-left: 32px;
}

@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: 190px auto 1fr;
  }

  .desktop-nav {
    gap: 20px;
  }

  .language-switcher {
    display: none;
  }

  .expertise-mega {
    grid-template-columns: 0.75fr 1.4fr;
  }

  .mega-visual {
    display: none;
  }

  .expertise-heading {
    grid-template-columns: 0.3fr 1.2fr 0.55fr;
  }
}

@media (max-width: 820px) {
  :root {
    --header-h: 72px;
  }

  .site-header,
  .site-header.is-scrolled {
    height: 72px;
    grid-template-columns: 1fr auto;
    padding: 0 20px;
  }

  .site-header.is-menu-open {
    color: var(--white);
    background: var(--navy-deep);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .site-header.is-menu-open .brand img {
    filter: brightness(0) invert(1);
  }

  .brand {
    width: 150px;
    height: 52px;
  }

  .desktop-nav,
  .header-actions,
  .expertise-mega {
    display: none;
  }

  .menu-toggle {
    position: relative;
    display: block;
    width: 43px;
    height: 43px;
    padding: 0;
    color: inherit;
    border: 0;
    background: transparent;
  }

  .menu-toggle > span:not(.sr-only) {
    position: absolute;
    right: 4px;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: top 0.25s ease, transform 0.25s ease, width 0.25s ease;
  }

  .menu-toggle > span:first-child {
    top: 17px;
  }

  .menu-toggle > span:nth-child(2) {
    top: 25px;
    width: 17px;
  }

  .menu-toggle[aria-expanded="true"] > span:first-child {
    top: 21px;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    top: 21px;
    width: 24px;
    transform: rotate(-45deg);
  }

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

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu nav a {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .mobile-menu nav span {
    color: var(--gold);
    font-size: 8px;
  }

  .mobile-menu nav b {
    font-family: var(--display);
    font-size: clamp(38px, 12vw, 58px);
    font-weight: 400;
    line-height: 1;
  }

  .mobile-languages {
    display: flex;
    gap: 10px;
    margin-top: 35px;
  }

  .mobile-languages button {
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    font-size: 9px;
  }

  .mobile-languages button.is-active {
    color: var(--navy);
    background: var(--white);
  }

  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding: 120px 21px 110px;
  }

  .hero-image {
    object-position: 68% center;
  }

  .hero-content {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(56px, 16vw, 84px);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 19px;
  }

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

  .hero-caption {
    right: 21px;
    bottom: 24px;
    left: 21px;
    justify-content: space-between;
  }

  .hero-caption span:last-child {
    display: none;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .trust-strip article {
    min-height: 145px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .profile,
  .approach,
  .identity-section {
    grid-template-columns: 1fr;
  }

  .profile-copy,
  .approach-copy {
    padding: 90px 22px;
  }

  .profile-copy > .eyebrow,
  .approach-copy > .eyebrow {
    margin-top: 58px;
  }

  .profile h2,
  .expertise-heading h2,
  .approach h2,
  .identity-copy h2 {
    font-size: 50px;
  }

  .profile-portrait {
    min-height: 650px;
  }

  .profile-portrait figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .expertises {
    padding: 95px 22px;
  }

  .expertise-heading {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 45px;
  }

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

  .expertise-visual {
    position: relative;
    top: auto;
    height: 610px;
    min-height: 0;
  }

  .expertise-active-copy {
    right: 26px;
    bottom: 32px;
    left: 26px;
  }

  .expertise-row {
    min-height: 82px;
    grid-template-columns: 40px 1fr auto;
    padding: 0 20px;
  }

  .consultation-story {
    min-height: 720px;
    padding: 70px 22px;
  }

  .consultation-story > img {
    object-position: 55% center;
  }

  .story-content h2 {
    font-size: 52px;
  }

  .approach-image {
    min-height: 520px;
  }

  .identity-section {
    gap: 55px;
    padding: 90px 22px;
  }

  .business-card {
    transform: none;
  }

  .contact {
    min-height: 720px;
  }

  .contact h2 {
    font-size: 64px;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 50px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .profile-portrait {
    min-height: 560px;
  }

  .profile-quote {
    grid-template-columns: 35px 1fr;
  }

  .expertise-visual {
    height: 560px;
  }

  .expertise-active-copy h3 {
    font-size: 44px;
  }

  .expertise-row strong {
    font-size: 27px;
  }

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

  .footer-brand,
  .footer-bottom {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .consultation-modal {
    width: calc(100% - 16px);
    max-height: calc(100svh - 16px);
    padding: 56px 24px 30px;
  }
}

/* ---------------------------------------------------------------
   Lisibilité et confort tactile sur mobile.

   Le design repose sur des micro-labels en capitales de 8 à 9 px.
   L'effet fonctionne sur grand écran mais devient illisible sur un
   téléphone : on les remonte uniquement sous 820 px, le rendu
   desktop reste inchangé.
   --------------------------------------------------------------- */
@media (max-width: 820px) {
  .eyebrow,
  .section-number,
  .section-kicker p,
  .site-footer > div > p,
  .expertise-active-copy > span,
  .button,
  .line-link,
  .text-button,
  .expertise-active-copy button {
    font-size: 11px;
  }

  /* Compteurs décoratifs : ils restent discrets, mais lisibles. */
  .hero-caption,
  .trust-strip article > span,
  .profile-portrait figcaption span,
  .expertise-row > span:first-child,
  .process-list li > span,
  .footer-bottom {
    font-size: 10px;
  }

  .trust-strip p {
    font-size: 13px;
  }

  .expertise-active-copy p {
    font-size: 14px;
  }

  /* Cibles tactiles d'au moins 44 px (WCAG 2.5.5).

     Les liens soulignés gardent leur trait collé au texte : on
     élargit la zone cliquable avec un pseudo-élément transparent
     plutôt qu'en agrandissant la boîte, qui décrocherait le trait. */
  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .line-link,
  .text-button,
  .expertise-active-copy button {
    position: relative;
  }

  .line-link::after,
  .text-button::after,
  .expertise-active-copy button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
  }

  .site-footer a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .mobile-languages button {
    min-height: 44px;
    padding: 0 18px;
  }
}

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

  html.js-anime .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Repli du formulaire de consultation.
   Si la messagerie du visiteur ne s'ouvre pas, il doit pouvoir recopier son
   message et l'adresse du cabinet plutôt que de croire l'envoi effectué. */
.form-repli {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 4px 0 20px;
}

.form-repli:empty {
  display: none;
}

.form-repli a {
  color: var(--gold);
  font-weight: 600;
  word-break: break-all;
}

.form-repli textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

/* Adresse postale du cabinet, dans la colonne contact du pied de page.
   Plus petite que les liens voisins : c'est une information de contexte, pas
   une action cliquable, et le texte est nettement plus long. */
.footer-adresse {
  max-width: 260px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.5;
}