/* =========================================================
   la Pomme — styles
   Les valeurs viennent du design system Figma.
   ========================================================= */

/* ---------- Variables (couleurs, polices, tailles) ---------- */
:root {
  /* Couleurs */
  --color-text-primary: #130206;
  --color-text-secondary: #7c6f72;
  --color-text-on-action: #ffffff;
  --color-action-primary: #130206;
  --color-action-secondary: #ffffff;
  --color-bg-page: #ffffff;
  --color-bg-surface: #f2f2e9;
  --color-bg-elevated: #ffffff;
  --color-border-default: #dfdfd2;
  --color-border-strong: #130206;
  --color-text-on-dark: #f6f6ef;
  --color-bg-dark: #120f10;
  --alpha-black-10: rgba(0, 0, 0, 0.1);

  /* Couleurs de la marque */
  --brand-lettuce-green: #e1f3c5;
  --brand-corn-silk-yellow: #fff279;
  --brand-peach-flesh: #ffd9d1;
  --brand-vanilla-cream: #fbf7d2;

  /* Polices */
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;

  /* Arrondis */
  --radius-3: 24px;
  --radius-lg: 44px;
  --radius-full: 999px;

  /* Largeur du contenu */
  --content-max: 1260px;
  --page-padding: 90px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* les formes décoratives dépassent sur les côtés */
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* les formes décoratives dépassent sur les côtés */
}

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

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

h1, h2, h3, p {
  margin: 0;
}

/* =========================================================
   En-tête
   ========================================================= */
.header {
  position: relative;
  z-index: 10;
  background: var(--color-bg-page);
  height: 124px; /* hauteur fixe dans la maquette */
  display: flex;
  align-items: center;
  padding: 0 var(--page-padding);
}

.header__inner {
  flex: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo img {
  width: 63.365px;
  height: 62.746px;
}

.header__nav {
  display: flex;
  gap: 44px;
}

.header__nav a {
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.header__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header__burger {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- En-tête sombre (pages de projets) ---------- */
.header--dark {
  background: var(--color-bg-dark);
}

.header--dark .logo-on-light {
  display: none; /* le logo sombre ne sert qu'au menu mobile ouvert (fond blanc) */
}

@media (min-width: 768px) {
  .header--dark .header__nav a {
    color: var(--color-text-on-dark);
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 140px var(--page-padding);
  overflow-x: clip; /* coupe les ovales à droite, mais pas en bas */
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 120px;
}

.hero__title {
  flex: 0 0 724px;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.hero__text {
  flex: 1;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ---------- Овалы hero главной: привязаны к абзацу ----------
   Абзац лежит в .hero__text-wrap (position: relative, контейнер для единиц cqw). Овалы лежат внутри и позиционируются
   от левого верхнего угла абзаца: для каждой раскладки (десктоп / планшет / телефон) заданы размер овала до поворота
   (--w, --h), центр рамки (--cx, --cy), ширина абзаца в макете (--d) и поворот (--rot): всё в «пикселях макета».
   Реальные размеры = значение / --d × ширина абзаца (100cqw), поэтому овалы масштабируются вместе с абзацем и
   всегда его обводят. Данные из Figma: десктоп 45:4825, планшет 1226:85534, телефон 825:32850 (2026-11-10). */
.hero__text-wrap {
  position: relative;
  flex: 0 0 416px; /* абзац десктопа всегда 416 px (как в макете), на 1200–1439 сжимается заголовок, а не абзац */
  container-type: inline-size;
}

/* Заголовок главной на 1200–1439 px плавно уменьшается (90 px при ≥1440), чтобы абзац оставался 416 px:
   ширина заголовка = ширина контейнера − 416 − отступ 120; 0,1243 = 90 / 724 */
.hero:not(.hero--page) .hero__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: min(90px, calc((min(var(--content-max), 100vw - 2 * var(--page-padding)) - 536px) * 0.1243));
}

.hero__title,
.hero__text-wrap .hero__text {
  position: relative;
  z-index: 1; /* буквы и абзац выше линий овалов */
}

.hero-oval {
  position: absolute;
  z-index: 0;
  display: block;
  width: calc(var(--w) / var(--d) * 100cqw);
  height: calc(var(--h) / var(--d) * 100cqw);
  left: calc((var(--cx) - var(--w) / 2) / var(--d) * 100cqw);
  top: calc((var(--cy) - var(--h) / 2) / var(--d) * 100cqw);
  background: center / 100% 100% no-repeat;
  transform: rotate(var(--rot)) scaleY(var(--flip, 1)); /* --flip: -1 у овалов, зеркальных в Figma (определитель матрицы −1) */
  pointer-events: none;
}

/* десктоп (от 1200 px): абзац 416 px */
.hero-oval {
  --d: 416;
}

.hero-oval--gold {
  --w: 872.484;
  --h: 498.268;
  --cx: 17.5;
  --cy: 181.2;
  --rot: 165.37deg;
  --flip: -1;
  background-image: url("../images/hero-shape-gold.svg");
}

.hero-oval--red {
  --w: 599.332;
  --h: 485.339;
  --cx: 231.25;
  --cy: 83.45;
  --rot: 14.63deg;
  background-image: url("../images/hero-shape-red.svg");
}

/* ---------- Hero de la page « Réalisations » ---------- */
.hero--page {
  box-sizing: border-box;
  min-height: 722px; /* hauteur de la maquette */
  padding-top: 402px; /* le titre commence à y = 402 dans la maquette */
  padding-bottom: 140px;
}

.hero--page .hero__title {
  flex-basis: 824px;
}

/* Le texte passe sur la grosse pomme rouge : il est blanc */
.hero--page .hero__text {
  color: #fff;
}

/* Pommes décoratives de la maquette : photo + tige, floutées ensemble (flou de calque Figma 100 → 50 px en CSS).
   Chaque pomme est collée au bord DROIT de la fenêtre et en dépasse : seule la fenêtre la coupe
   (le hero coupe ce qui dépasse sur les côtés, donc pas de défilement horizontal).
   Mesures de la maquette 1440 px, depuis le haut du hero. */
/* Unité de la maquette : 1 px à 1440 px de large, puis proportionnelle (la pomme grandit avec la fenêtre
   et reste donc toujours en contact avec le bord droit, comme dans la maquette). */
.hero--page {
  --u: max(1px, calc(100vw / 1440));
}

.hero__art {
  position: absolute;
  pointer-events: none;
  filter: blur(calc(50 * var(--u)));
  /* Parallaxe : le script écrit --py (décalage vertical en px) pendant le défilement */
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.hero__art img {
  position: absolute;
  max-width: none;
}

/* Grosse pomme (à droite) : cadre 835 × 755 qui dépasse de 189 px, photo tournée de 15° */
.hero__art--b {
  right: calc(-189 * var(--u));
  top: calc(202.5 * var(--u));
  width: calc(835.004 * var(--u));
  height: calc(755.242 * var(--u));
}

.hero__art--b .hero__photo {
  left: calc(50% - 352.808 * var(--u));
  top: calc(50% - 296.408 * var(--u));
  width: calc(705.615 * var(--u));
  height: calc(592.815 * var(--u));
  transform: rotate(15deg);
}

.hero__art--b .hero__stem {
  left: calc(471.7 * var(--u));
  top: calc(-31.09 * var(--u));
  width: calc(104.897 * var(--u));
  height: calc(169.815 * var(--u));
}

/* Petite pomme (au milieu) : cadre 402 × 363, photo retournée et tournée de 165° */
.hero__art--a {
  right: calc(477.25 * var(--u));
  top: calc(82.1 * var(--u));
  width: calc(401.749 * var(--u));
  height: calc(363.373 * var(--u));
}

.hero__art--a .hero__photo {
  left: calc(50% - 169.748 * var(--u));
  top: calc(50% - 142.612 * var(--u));
  width: calc(339.496 * var(--u));
  height: calc(285.224 * var(--u));
  opacity: 0.74;
  transform: rotate(165deg) scaleY(-1);
}

.hero__art--a .hero__stem {
  left: calc(124.33 * var(--u));
  top: calc(-14.95 * var(--u));
  width: calc(50.47 * var(--u));
  height: calc(81.704 * var(--u));
  opacity: 0.74;
  transform: rotate(180deg) scaleY(-1);
}

.hero__art--m {
  display: none;
}

/* =========================================================
   Bouton « lien » (texte + flèche ronde)
   ========================================================= */
.link-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text-primary);
}

.link-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

.link-button__icon img {
  width: 20px;
  height: 20px;
}

/* =========================================================
   Services — « Ce que je fais »
   ========================================================= */
.services {
  position: relative; /* passe au-dessus des ovales du hero */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 180px;
}

.services__header,
.services__list {
  width: 100%;
  max-width: 1080px;
}

.services__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.services__label {
  font-family: "Inter", var(--font-sans);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-transform: uppercase;
  white-space: nowrap;
}

.services__intro {
  width: 683px;
  max-width: 100%;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Carte ---------- */
.service-card {
  --card-pad-y: 64px;
  --card-pad-x: 64px;
  --card-radius: var(--radius-lg);
  --open-duration: 0.7s;

  position: relative;
  overflow: hidden;
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--color-border-default);
  border-radius: var(--card-radius);
  background: var(--color-bg-surface);
  cursor: pointer;
}

/* Texture de papier + lueur rose : visibles quand la carte est ouverte */
.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--open-duration) ease;
}

.service-card::before {
  background: url("../images/services/card-texture.png") center / cover;
}

.service-card::after {
  box-shadow: inset 0 -11px 56px 0 rgba(206, 57, 76, 0.3);
}

.service-card.is-open::before {
  opacity: 0.2;
}

.service-card.is-open::after {
  opacity: 1;
}

/* Titre = bouton qui ouvre / ferme */
.service-card__heading {
  position: relative;
  z-index: 1;
  font-size: inherit;
  font-weight: inherit;
}

.service-card__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.service-card__toggle:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 8px;
  border-radius: 8px;
}

.service-card__title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.02;
  color: var(--color-text-primary);
}

.service-card__number {
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  opacity: 0.6;
  white-space: nowrap;
}

/* Contenu qui se déplie (animation de hauteur : grille 0fr → 1fr) */
.service-card__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.js .service-card__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--open-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.js .service-card.is-open .service-card__panel {
  grid-template-rows: 1fr;
}

/* Zone qui se replie : coupe le contenu pendant l'animation.
   (Pas de position ici : l'illustration desktop se place par rapport à la carte.) */
.service-card__collapse {
  min-height: 0;
  overflow: hidden;
}

.service-card__panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}

/* Le contenu apparaît en fondu, juste après le début du dépliage */
.service-card__content,
.service-card .link-button,
.service-card .illu {
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.js .service-card:not(.is-open) .service-card__content,
.js .service-card:not(.is-open) .link-button,
.js .service-card:not(.is-open) .illu {
  opacity: 0;
  transform: translateY(12px);
  transition-delay: 0s;
}

.service-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 490px;
  max-width: 100%;
  padding-top: 34px; /* espace sous le titre */
}

.service-card__text {
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-primary);
  opacity: 0.8;
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 34px;
  list-style: none;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.service-card__list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-card__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: url("../images/bullet.svg") center / contain no-repeat;
}

/* ---------- Illustration (un SVG par carte, exporté de Figma) ----------
   Desktop : à droite, centrée en hauteur, comme dans la maquette
   (cadre 322 × 315 px, à 141 px du bord droit de la carte). */
.illu {
  position: absolute;
  z-index: 1;
  /* Coin haut-gauche du cadre Figma. Le SVG peut être un peu plus grand
     que le cadre (arrondi, ombres) : il déborde à droite et en bas. */
  left: calc(100% - 140.96px - 322.038px);
  top: calc(50% + 0.09px);
  margin-top: calc(315.185px / -2);
  max-width: none;
  pointer-events: none;
}

/* =========================================================
   Bouton sombre (texte + flèche dans un rond blanc)
   ========================================================= */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.button--dark {
  padding: 4px 4px 4px 16px;
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
}

.button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-action-secondary);
  filter: drop-shadow(0 6px 8px var(--alpha-black-10));
}

.button__icon img {
  width: 24px;
  height: 24px;
}

/* =========================================================
   Projets — « Quelques fruits de mon travail »
   ========================================================= */
.projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px var(--page-padding);
}

.projects__title {
  width: 100%;
  max-width: var(--content-max);
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: var(--content-max);
}

/* ---------- Page « Réalisations » : titre + filtres ---------- */
.projects--page {
  align-items: stretch; /* titre et filtres alignés à gauche */
  gap: 56px;
  padding-top: 120px; /* + 6 px de ligne = 126 px, comme dans la maquette */
  /* Sous-couche blanche sur toute la largeur, qui recouvre le bas des pommes du hero */
  background: #fff;
  border-top: 6px solid var(--color-border-default);
  border-radius: 64px;
}

.projects__header,
.projects--page .projects__grid {
  position: relative;
  z-index: 1; /* au-dessus des ovales de fond */
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.projects__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.projects--page .projects__title {
  max-width: none;
  text-align: left;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter {
  height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 6px 16px var(--alpha-black-10);
  color: #000;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Largeurs de la maquette (bureau) : « Tous » s'adapte au texte, les autres ont une largeur fixe */
.filter[data-filter="identite"] { width: 183px; padding-inline: 0; }
.filter[data-filter="web"]      { width: 115px; padding-inline: 0; }
.filter[data-filter="print"]    { width: 190px; padding-inline: 0; }

.filter:hover {
  transform: translateY(-1px);
}

.filter.is-active {
  background: #000;
  color: #fff;
  box-shadow: none;
}

.filter:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 3px;
}

/* Sans JavaScript, les filtres ne font rien : on les cache, tous les projets restent visibles */
html:not(.js) .filters {
  display: none;
}

/* Ovales de fond : positions mesurées dans la maquette 1440 px,
   depuis le haut de <main> (sous l'en-tête de 124 px) */
.page-main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.page-ovals {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page-oval {
  position: absolute;
  max-width: none;
}

.page-oval--1 { left: calc(50% - 720px + 341.09px); top: 3170.47px; }
.page-oval--2 { left: calc(50% - 720px + 148.93px); top: 3448.6px; }
.page-oval--3 { left: calc(50% - 720px + 110.4px);  top: 3118.01px; }

/* Les cartes de cette page sont des liens */
/* Filtres : fondu des cartes (l'attribut « hidden » doit l'emporter sur « display: flex ») */
.project-card.is-hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.project-card[hidden] {
  display: none;
}

/* Texte lu seulement par les lecteurs d'écran (annonce du nombre de projets) */
.filters-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a.project-card {
  color: inherit;
  text-decoration: none;
}

/* ---------- Carte projet ---------- */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  aspect-ratio: 1; /* carré 618 × 618 dans la maquette */
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  /* texture de papier par-dessus un dégradé clair */
  background:
    url("../images/projects/card-texture.png") center / cover,
    linear-gradient(to bottom, #ecece1, #f3f2ee);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* opacity + transform : fondu des filtres ; box-shadow : survol */
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.3s ease;
}

.project-card__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 44px 44px 14px;
}

.project-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-card__title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(104, 146, 45, 0.4);
  border-radius: var(--radius-full);
  background: rgba(104, 146, 45, 0.2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.project-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.project-card__meta li {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.8;
}

.project-card__meta li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: url("../images/dot.svg") center / contain no-repeat;
}

/* Image du projet : exportée de Figma en une seule image.
   Le cadre (.project-card__media) découpe l'image avec des coins arrondis. */
.project-card__media {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 36px;
}

.project-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Survol des cartes (cartes-liens) ----------
   D'après Figma : composant « Project Card », variante « Variant2 » (ON_HOVER).
   Ombre extérieure plus douce + lueur rose en bas, posée PAR-DESSUS l'image
   (une ombre inset normale passerait sous l'image) : calque ::after qui apparaît en fondu. */
a.project-card {
  position: relative;
  cursor: pointer;
}

a.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -11px 30px rgba(229, 66, 99, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

a.project-card:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 4px;
}

/* Clavier (Tab) : même effet que le survol, sur tous les appareils */
a.project-card:focus-visible {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

a.project-card:focus-visible::after {
  opacity: 1;
}

/* Souris : seulement sur les appareils qui savent « survoler » (pas de carte « collée » après un toucher) */
@media (hover: hover) {
  a.project-card:hover {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }

  a.project-card:hover::after {
    opacity: 1;
  }
}

/* « Réduire les animations » : la lueur apparaît tout de suite */
@media (prefers-reduced-motion: reduce) {
  a.project-card,
  a.project-card::after {
    transition: none;
  }
}

/* =========================================================
   Avantages — « Pourquoi travailler avec la Pomme ? »
   ========================================================= */
/* La section des projets passe au-dessus des ovales qui remontent jusqu'à elle */
.projects {
  position: relative;
  z-index: 1;
}

.benefits {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px 180px;
}

/* Ovales (Figma 49:3159, версия Наталии от 2026-11-09): группа 1279 × 1413 стоит в кадре 1440 на x 27, y 3281;
   секция начинается с y 3701, значит верх группы на 420 px выше секции */
.benefits__shapes {
  position: absolute;
  z-index: 0;
  top: -420px;
  left: calc(50% - 720px + 27px);
  max-width: none;
  pointer-events: none;
}

.benefits__title,
.benefits__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
}

.benefits__title {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 284px;
  padding: 34px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: 0 6px 16px var(--alpha-black-10);
}

.benefit-card__icon {
  width: 32px;
  height: 32px;
}

.benefit-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.benefit-card__number {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
}

.benefit-card__title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.02;
}

.benefit-card__desc {
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Sous un titre, la description prend toujours 2 lignes : les titres d'une même
   rangée sont ainsi à la même hauteur (dans Figma : ligne vide en fin de texte). */
.benefit-card__title + .benefit-card__desc {
  min-height: 2.8em;
}

/* =========================================================
   Étapes — « Comment ça se passe ? » (bloc sombre)
   ========================================================= */
.process {
  position: relative;
  z-index: 1; /* au-dessus des ovales du bloc précédent */
  padding: 0 24px;
}

.process__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 180px 150px;
  /* bordure claire en haut et sur les côtés seulement, comme dans Figma */
  border: 6px solid var(--color-border-default);
  border-bottom: 0;
  border-radius: 64px;
  /* même texture de papier que les cartes projets, à 20 % */
  background:
    linear-gradient(rgba(18, 15, 16, 0.8), rgba(18, 15, 16, 0.8)),
    url("../images/projects/card-texture.png") center / cover,
    var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.process__title,
.process__steps {
  width: 100%;
  max-width: 1080px;
}

.process__title {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process-step__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.process-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  /* Figma 62:7383: заливка #666D2B 40 % + эффект Glass (размытие 4, световая кромка сверху-слева под −45°) */
  background: rgba(102, 109, 43, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3), inset -1px -1px 1px rgba(255, 255, 255, 0.1);
}

.process-step__icon img {
  width: 24px;
  height: 24px;
}

.process-step__number {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.8;
}

.process-step__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-step__title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 31px; /* 102 % = 30,6, Figma округляет строку до 31: две строки 62 px, шаг 232 px, блок 718 px */
}

.process-step__desc {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
}

/* Figma переносит строки чуть раньше, чем браузер (разница в метриках шрифта ≈ 1 px): на широком экране ограничиваем абзац 221 px,
   тогда на странице «Web & applications mobiles» шаг 3 получается в 6 строк, как в макете (блок 766 px); остальные блоки не меняются */
@media (min-width: 1200px) {
  .process-step__desc {
    max-width: 221px;
  }
}

/* =========================================================
   Bouton contour (« Poser ma question »)
   ========================================================= */
.button--outline {
  padding: 16px 24px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

/* =========================================================
   FAQ — « Vos questions, mes réponses »
   ========================================================= */
.faq {
  position: relative;
  z-index: 1;
  padding: 180px 90px;
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.faq__intro {
  position: relative;
  z-index: 1; /* au-dessus des ovales */
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 417px;
}

.faq__title {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.faq__text {
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.faq__list {
  position: relative;
  z-index: 1; /* au-dessus des ovales */
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Question ---------- */
.faq-item {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: 0 6px 16px var(--alpha-black-10);
  cursor: pointer;
}

.faq-item__heading {
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 56px 34px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item__toggle:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 4px;
}

.faq-item__question {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.02;
}

.faq-item__icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

.faq-item__icon img {
  position: absolute;
  inset: 7px;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-item__minus {
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-item.is-open .faq-item__plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-item.is-open .faq-item__minus {
  opacity: 1;
  transform: none;
}

/* Réponse : se déplie en douceur (hauteur 0fr → 1fr).
   Sans JavaScript, toutes les réponses restent visibles. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.js .faq-item__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__collapse {
  min-height: 0;
  overflow: hidden;
}

/* Ouvert : 34 px entre la question et la réponse, 56 px sous la réponse */
.js .faq-item__toggle {
  transition: padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .faq-item.is-open .faq-item__toggle {
  padding-bottom: 34px;
}

.faq-item__answer {
  padding: 0 34px 56px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* =========================================================
   Bouton clair (sur fond sombre) — « Écrivez-nous »
   ========================================================= */
.button--light {
  padding: 4px 4px 4px 16px;
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
}

.button__icon--dark {
  width: 42px;
  height: 42px;
  background: var(--color-action-primary);
  filter: none;
}

.button__icon--dark img {
  width: 20px;
  height: 20px;
}

/* =========================================================
   Ovales décoratifs de la FAQ (en arrière-plan, sous les cartes)
   ========================================================= */
.faq__ovals {
  position: absolute;
  z-index: 0; /* sous les questions */
  inset: 0;
  pointer-events: none; /* ne bloquent jamais les clics */
}

.faq__oval {
  position: absolute;
  max-width: none;
}

/* positions mesurées dans Figma (page de 1440 px, centrée) */
.faq__oval--1 { left: calc(50% - 720px + 764.95px); top: 406.8px; }
.faq__oval--2 { left: calc(50% - 720px + 344.87px); top: 213.4px; }
.faq__oval--3 { left: calc(50% - 720px + 690.7px);  top: 169.3px; }

/* =========================================================
   Appel à l'action — « Un projet qui mûrit ? »
   ========================================================= */
.cta {
  position: relative;
  z-index: 1;
}

.cta__panel {
  /* Cadrage de la vidéo ET de l'image d'attente (même valeur → rien ne saute au lancement).
     Plus le pourcentage est petit, plus on voit le haut de l'image. */
  --cta-media-position: center 25%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 546px;
  padding: 120px 90px;
  overflow: hidden;
  /* bordure claire en haut et sur les côtés seulement, comme dans Figma */
  border: 6px solid var(--color-border-default);
  border-bottom: 0;
  border-radius: 44px;
  /* image de la vidéo : visible tant que la vidéo n'est pas lancée (ou jamais, si « réduire les animations ») */
  background: #000 url("../images/cta/apple.jpg") var(--cta-media-position) / cover;
  color: #fff;
  text-align: center;
}

/* Les trois calques, de bas en haut : vidéo → voile noir à 70 % → texture de papier en « incrustation » */
.cta__video {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cta-media-position);
  pointer-events: none;
}

.cta__panel::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.cta__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../images/projects/card-texture.png") center / cover;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta__title {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.cta__text {
  width: 684px;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.4;
}

/* Deux anneaux très fins autour du bouton */
.cta__ring {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px;
  border: 0.3px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

/* =========================================================
   Pied de page
   ========================================================= */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 90px 90px 40px;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff, #fbfaf4);
  color: var(--color-text-secondary);
}

.footer__circle {
  position: absolute;
  z-index: 0;
  top: -51.86px;
  left: calc(50% + 0.5px);
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.footer__social,
.footer__nav,
.footer__legal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
}

.footer__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer__social-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.footer__instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-action-secondary);
  filter: drop-shadow(0 6px 8px var(--alpha-black-10));
}

.footer__instagram img {
  width: 24px;
  height: 24px;
}

.footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 54px;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.footer__nav a:hover {
  color: var(--color-text-primary);
}

.footer__legal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 16px;
  line-height: 1.5;
}

.footer__legal p:last-child {
  white-space: pre-wrap; /* garde les doubles espaces autour des « · » */
}

/* Si « réduire les animations » est activé : pas d'animation */
/* =========================================================
   Pages de projets (cas) — fond sombre
   Maquettes : Balakian Farms, eBella. Les mêmes classes servent pour toutes les pages de projet.
   ========================================================= */
/* Fond sombre aussi derrière l'en-tête : évite un filet clair entre l'en-tête et le contenu (arrondis de pixels) */
.page-case {
  background: var(--color-bg-dark);
}

.case {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* Intro : petit titre, grand titre, liste de tags */
.case-intro {
  padding: 140px var(--page-padding) 80px;
}

.case-intro__inner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 120px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.case-intro__title {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 44px;
  width: 860px;
}

/* Petit titre : Inter dans la maquette, Outfit sur le site */
.case-label {
  margin: 0;
  font-size: 20px;
  line-height: 24px; /* высота строки как у Inter в макете */
  text-transform: uppercase;
}

.case-title {
  width: 551px;
  max-width: 100%;
  margin: 0;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  /* Jamais de mot coupé : ni césure automatique, ni rupture au milieu d'un mot.
     Si un mot ne tient pas, c'est la taille de police qui diminue (voir @media) */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Titre plus long (eBella) : toute la largeur du bloc, 860 px */
.case-title--wide {
  width: 860px;
}

/* Titre à mot long (Veristone) : 860 px comme eBella */
.case-title--mid {
  width: 860px;
}

/* Titre à mot très long (Lingaro) : même largeur que eBella */
.case-title--long {
  width: 860px;
}

.case-tags {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  width: 270px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  opacity: 0.7;
}

/* Grande image (maquette de site, vidéo…) : 1260 × 779, coins arrondis */
.case-media {
  padding: 0 var(--page-padding);
}

.case-media__frame {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  aspect-ratio: 1260 / 779;
  overflow: hidden;
  border-radius: 44px;
  /* Pas de fond : un fond clair derrière les coins arrondis ferait des arcs clairs sur la page sombre.
     L'image est exportée en rectangle (sans coins), c'est le CSS qui arrondit. */
  background: transparent;
}

/* Vidéo par-dessus l'image : invisible jusqu'au début de la lecture, puis fondu */
.case-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.case-video.is-playing {
  opacity: 1;
}

.case-media__frame img,
.case-media__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bloc de texte : étiquette à gauche, texte à droite */
.case-text {
  padding: 100px var(--page-padding);
}

.case-text__inner {
  display: flex;
  gap: 154px;
  max-width: var(--content-max);
  margin: 0 auto;
  font-size: 20px;
}

.case-text__label {
  flex: none;
  width: 200px;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.7;
}

.case-text__body {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.5;
}

.case-text__body + .case-text__body {
  margin-top: 1.5em;
}

/* Сноска под абзацем «Contexte» (Lingaro, DentalPlus, AutoTrust): мельче текста, приглушённый цвет как у подписи «CONTEXTE» */
.case-note {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.7);
}

/* колонка из нескольких абзацев: абзацы друг под другом через пустую строку */
.case-text__col {
  flex: 1;
  min-width: 0;
}

/* Deux images côte à côte ; la légende est sous l'image de gauche, l'image de droite est alignée en bas */
.case-pair {
  padding: 100px var(--page-padding);
}

.case-pair + .case-pair,
.case-pair--flush {
  padding-top: 0; /* pas d'espace au-dessus : la maquette eBella l'a ainsi après « Identité de marque » */
}

/* Deuxième paire avec ses 100 px d'espace au-dessus (DentalPlus, Autotrust) */
.case-pair + .case-pair.case-pair--full {
  padding-top: 100px;
}

.case-pair__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.case-pair__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.case-pair__img {
  display: block;
  width: 100%;
  height: auto; /* l'attribut height de <img> ne doit pas écraser le rapport 618 / 779 */
  aspect-ratio: 618 / 779;
  object-fit: cover;
  border-radius: 44px;
  background: transparent; /* pas de fond clair derrière les coins arrondis */
}

.case-pair__caption {
  max-width: 489px;
  min-height: 68px; /* boîte fixe de 68 px dans la maquette, même pour une seule ligne */
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 34px; /* 120 % arrondi, comme dans Figma */
}

/* Deux images côte à côte (sur mobile : l'une sous l'autre). Écart 24 px (mobile 16 px) comme dans Figma */
.case-duo {
  padding: 0 var(--page-padding);
}

.case-duo__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.case-duo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 618 / 779;
  object-fit: cover;
  border-radius: 44px;
  background: transparent; /* pas de fond clair derrière les coins arrondis */
}

/* Deux blocs d'images qui se suivent sans texte entre eux : 24 px d'écart (mobile 16 px) */
.case-media + .case-media,
.case-media + .case-duo,
.case-duo + .case-media,
.case-duo + .case-duo {
  padding-top: 24px;
}

/* DentalPlus : les deux derniers blocs ont 24 px d'espace en dessous ; le dernier n'a que 9 px au-dessus */
.case-media.case-media--tail {
  padding-bottom: 24px;
}

.case-media.case-media--top9 {
  padding-top: 9px;
}

/* Bloc d'image sous une paire, avec 24 px d'espace au-dessus (Small Farm : section de 803 px) */
.case-pair + .case-media.case-media--gap {
  padding-top: 24px;
}

/* « NEXT PROJECT » */
.case-next {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  /* ссылка на всю ширину; содержимое выровнено по колонке 1260 px */
  padding: 40px max(var(--page-padding), calc((100% - var(--content-max)) / 2));
  color: inherit;
  text-decoration: none;
  --arrow-k: 1; /* 1 sur ordinateur ; la flèche est réduite sur mobile */
}

.case-next__text {
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La flèche exportée de Figma est un peu plus grande que son cadre (contour) : on compense avec des marges */
.case-next__arrow {
  flex: none;
  width: calc(121.882px * var(--arrow-k));
  height: calc(75.606px * var(--arrow-k));
  margin: calc(-2.49px * var(--arrow-k)) calc(-3.46px * var(--arrow-k)) calc(-2.66px * var(--arrow-k)) calc(-2px * var(--arrow-k));
  transition: transform 0.3s ease;
}

.case-next:hover .case-next__arrow,
.case-next:focus-visible .case-next__arrow {
  transform: translateX(10px);
}

.case-next:focus-visible {
  outline: 2px solid var(--color-text-on-dark);
  outline-offset: -2px;
}

/* Tablette : le titre passe au-dessus des tags, l'étiquette au-dessus du texte */
@media (max-width: 1199px) {
  .case-intro__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .case-intro__title {
    width: 100%;
  }

  .case-title {
    width: 100%;
    font-size: clamp(52px, 8vw, 90px);
  }

  .case-text__inner {
    flex-direction: column;
    gap: 24px;
  }

  .case-text__label {
    width: auto;
  }

  .case-pair__caption {
    font-size: 24px;
  }

  .case-next__text {
    font-size: clamp(44px, 7vw, 90px);
  }
}

/* Mobile : valeurs de la maquette 390 px */
@media (max-width: 767px) {
  .case-intro {
    padding: 40px var(--page-padding) 48px;
  }

  .case-intro__inner {
    gap: 24px;
  }

  .case-intro__title {
    gap: 24px;
  }

  .case-label {
    font-size: 14px;
    line-height: 17px;
  }

  .case-title {
    font-size: min(40px, 10.25vw); /* 40 px dès 390 px de large, plus petit sur les écrans plus étroits */
  }

  /* Veristone (« D'INVESTISSEMENT ») : 35 px à 390 px, proportionnel en dessous */
  .case-title--mid {
    font-size: min(35px, 8.97vw);
  }

  /* Mot très long (« D'APPRENTISSAGE » chez Lingaro) : 36 px à 390 px, proportionnel en dessous */
  .case-title--long {
    font-size: min(36px, 9.23vw);
  }

  .case-tags {
    width: auto;
    gap: 4px;
    font-size: 16px;
  }

  .case-media__frame {
    aspect-ratio: 350 / 216;
    border-radius: 12.222px;
  }

  .case-text {
    padding: 48px var(--page-padding);
  }

  .case-text__inner {
    gap: 12px;
    font-size: 16px;
  }

  .case-text__label {
    font-size: 14px;
    line-height: 17px;
  }

  .case-note {
    margin-top: 32px;
    font-size: 13px;
  }

  .case-duo__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-duo__img {
    aspect-ratio: 350 / 441;
    border-radius: 24.919px;
  }

  .case-media + .case-media,
  .case-media + .case-duo,
  .case-duo + .case-media,
  .case-duo + .case-duo {
    padding-top: 16px;
  }

  .case-media.case-media--tail {
    padding-bottom: 0;
  }

  .case-media.case-media--top9 {
    padding-top: 16px;
  }

  /* après une paire : pas d'espace en plus (la paire a déjà le sien), comme dans la maquette mobile */
  .case-pair + .case-media.case-media--gap {
    padding-top: 0;
  }

  .case-pair {
    padding: 48px var(--page-padding) 24px;
  }

  .case-pair + .case-pair,
  .case-pair--flush {
    padding-top: 24px;
  }

  /* Lingaro : la 2e paire garde ses 48 px d'espace au-dessus sur mobile (maquette mobile) */
  .case-pair + .case-pair.case-pair--gap-mobile {
    padding-top: 48px;
  }

  .case-pair__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-pair__item {
    gap: 16px;
  }

  .case-pair__img {
    aspect-ratio: 350 / 441;
    border-radius: 24.919px;
  }

  .case-pair__caption {
    min-height: 0; /* sur mobile la légende suit son texte */
    margin-bottom: 24px; /* 16 + espace de 8 px, puis l'image suivante */
    font-size: 22px;
    line-height: 26px;
  }

  .case-next {
    align-items: center;
    gap: 16px;
    padding: 40px var(--page-padding) 48px;
    --arrow-k: 0.395;
  }

  .case-next__text {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .service-card,
  .service-card *,
  .service-card::before,
  .service-card::after,
  .faq-item__panel,
  .faq-item__toggle,
  .faq-item__icon img,
  .header__nav,
  .filter {
    transition: none !important;
  }

  /* cartes de projets : fondu des filtres instantané, mais l'ombre au survol reste douce */
  .project-card {
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .project-card__image {
    transition: none !important;
  }

  .cta__video {
    display: none; /* seulement l'image */
  }
}

/* =========================================================
   Tablette (768–1199 px)
   ========================================================= */
@media (max-width: 1199px) {
  :root {
    --page-padding: 48px;
  }

  /* Ovales de la FAQ : seulement sur grand écran */
  .faq__ovals {
    display: none;
  }

  /* Appel à l'action */
  .cta__panel {
    height: auto;
    min-height: 420px;
    padding: 96px var(--page-padding);
  }

  .cta__title {
    font-size: 52px;
  }

  /* Pied de page */
  .footer {
    padding-inline: var(--page-padding);
  }

  /* FAQ : intro au-dessus de la liste */
  .faq {
    padding: 96px var(--page-padding);
  }

  .faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .faq__intro {
    width: auto;
    max-width: 560px;
  }

  .faq__title {
    font-size: 52px;
  }

  /* Étapes : 2 colonnes */
  .process__panel {
    padding: 120px 64px;
  }

  .process__title {
    font-size: 52px;
  }

  .process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }

  /* Avantages : 2 colonnes */
  .benefits {
    padding: 96px var(--page-padding);
  }

  .benefits__title {
    font-size: 52px;
  }

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

  .benefit-card {
    height: auto;
    min-height: 240px;
  }

  /* Projets : 2 colonnes, en-tête de carte comme sur mobile (pas de place pour titre + étiquette côte à côte) */
  .projects {
    padding: 96px var(--page-padding);
  }

  .projects__title {
    font-size: 52px;
  }

  .project-card {
    aspect-ratio: auto;
    border-radius: 32px;
  }

  .project-card__header {
    gap: 12px;
    padding: 20px 20px 12px;
  }

  .project-card__title-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .project-card__title {
    font-size: 36px;
    line-height: 1.02;
  }

  .project-card__media {
    flex: none;
    aspect-ratio: 600 / 414;
    border-radius: 24px;
  }

  .services {
    padding: 120px var(--page-padding);
  }

  /* Pas assez de place à côté du texte : l'illustration passe
     entre la liste et le bouton */
  .service-card__collapse {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .service-card__panel-inner {
    display: contents;
  }

  .service-card__content { order: 1; }
  .service-card .illu    { order: 2; }
  .service-card .link-button { order: 3; }

  .illu {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    align-self: center;
  }

  /* Планшет (Figma 1226:85534): заголовок 72 px шириной 513, под ним абзац 513 px, отступ 32, поля hero 80 / 40 / 96 */
  .hero:not(.hero--page) {
    padding: 80px 40px 96px;
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .hero:not(.hero--page) .hero__inner {
    gap: 32px;
  }

  .hero__title {
    flex: none;
    max-width: 724px;
    font-size: clamp(52px, 8vw, 90px);
  }

  .hero:not(.hero--page) .hero__title {
    flex: none;
    width: 100%;
    max-width: 513px;
    font-size: 72px;
  }

  .hero__text {
    max-width: 520px;
  }

  .hero__text-wrap {
    flex: none;
    width: min(513px, 100%);
  }

  /* овалы планшетной раскладки: абзац 513 px */
  .hero-oval {
    --d: 513;
  }

  .hero-oval--gold {
    --w: 417.6;
    --h: 573.233;
    --cx: 256.9;
    --cy: 62.55;
    --rot: -77.31deg;
    --flip: -1;
    background-image: url("../images/hero-oval-tab-gold.svg");
  }

  .hero-oval--red {
    --w: 419.533;
    --h: 314.98;
    --cx: 367.4;
    --cy: 72.75;
    --rot: 167deg;
    background-image: url("../images/hero-oval-tab-red.svg");
  }

  /* Ovales de fond de « Réalisations » : seulement sur grand écran */
  .page-ovals {
    display: none;
  }

  /* Hero « Réalisations » : titre au-dessus, texte lisible sur fond clair */
  .hero--page {
    min-height: 0;
    padding-top: 240px;
    padding-bottom: 96px;
  }

  .hero--page .hero__text {
    color: var(--color-text-secondary);
  }

  .hero--page .hero__title {
    flex-basis: auto; /* en colonne, « 824px » deviendrait une hauteur */
  }

  /* Pommes : même dessin, réduit, toujours collé au bord droit */
  .hero__art--a,
  .hero__art--b {
    transform: translate3d(0, var(--py, 0px), 0) scale(0.5);
    transform-origin: top right;
  }
}

/* =========================================================
   Mobile (jusqu'à 767 px)
   ========================================================= */
@media (max-width: 767px) {
  /* Appel à l'action */
  .cta__panel {
    gap: 20px;
    min-height: 0;
    padding: 72px 20px;
    border-radius: 32px;
  }

  .cta__title {
    font-size: 34px;
  }

  .cta__text {
    width: 100%;
    font-size: 16px;
  }

  /* Pied de page */
  .footer {
    gap: 40px;
    padding: 56px 20px 32px;
  }

  .footer__circle {
    display: none; /* dans la maquette mobile, le cercle est au‑dessus du pied de page */
  }

  .footer__nav {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 48px; /* hauteur fixe de 48 px dans la maquette */
    font-size: 13px;
    text-align: center;
  }

  /* FAQ */
  .faq {
    padding: 56px var(--page-padding);
  }

  .faq__inner {
    gap: 32px;
  }

  .faq__intro {
    gap: 16px;
    max-width: none;
  }

  .faq__title {
    font-size: 36px;
  }

  .faq__text {
    font-size: 16px;
    line-height: 1.5; /* 4 lignes de 24 px, comme dans la maquette */
  }

  .faq__list {
    gap: 12px;
  }

  .faq-item {
    border-radius: 32px;
  }

  .faq-item__toggle {
    padding: 24px;
  }

  .js .faq-item.is-open .faq-item__toggle {
    padding-bottom: 34px; /* espace question → réponse */
  }

  .faq-item__question {
    font-size: 24px;
    line-height: 29px; /* 120 % arrondi, comme dans Figma */
  }

  .faq-item__answer {
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 25px; /* 140 % arrondi */
  }

  /* Étapes */
  .process {
    padding: 0 10px;
  }

  .process__panel {
    gap: 40px;
    padding: 56px 24px;
    border-radius: 36px;
  }

  .process__title {
    font-size: 36px;
  }

  .process__steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .process-step {
    gap: 16px;
  }

  .process-step__text {
    gap: 8px;
  }

  .process-step__title {
    font-size: 24px;
    line-height: 1.02; /* как было: на телефоне свои размеры */
  }

  .process-step__desc {
    font-size: 15px;
  }

  /* Avantages */
  .benefits {
    gap: 32px;
    padding: 56px var(--page-padding);
  }

  .benefits__shapes {
    display: none; /* pas d'ovales dans la maquette mobile */
  }

  .benefits__title {
    font-size: 36px;
  }

  /* 2 colonnes de cartes de 170 px, les cartes d'une rangée ont la même hauteur */
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .benefit-card {
    justify-content: space-between;
    gap: 32px;
    height: auto;
    min-height: 0;
    padding: 24px;
    border-radius: 32px;
  }

  .benefit-card__number {
    font-size: 48px;
  }

  .benefit-card__title {
    font-size: 24px;
    line-height: 29px; /* 120 % arrondi, comme dans Figma */
  }

  .benefit-card__desc {
    font-size: 16px;
    line-height: 22px; /* 140 % arrondi, comme dans Figma */
  }

  /* Pas de ligne vide forcée : la hauteur de rangée vient du texte */
  .benefit-card__title + .benefit-card__desc,
  .benefit-card__title + .benefit-card__desc--two-lines {
    min-height: 0;
  }

  /* Projets */
  .projects {
    gap: 32px;
    padding: 56px var(--page-padding) 64px;
  }

  .projects__title {
    font-size: 36px;
  }

  .projects__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-card__header {
    gap: 12px;
    padding: 14px 14px 12px;
  }

  /* Titre et étiquette sur une ligne ; si ça ne tient pas (eBella),
     l'étiquette passe dessous */
  .project-card__title-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 0;
  }

  .project-card__title {
    font-size: 24px;
    line-height: 29px; /* 120 % arrondi, comme dans Figma */
    white-space: nowrap;
  }

  .tag {
    padding: 8px 12px;
    font-size: 16px;
    line-height: normal; /* étiquette de 38 px de haut, comme dans la maquette */
  }

  .project-card__meta {
    font-size: 14px;
    line-height: 20px; /* hauteurs arrondies comme dans Figma (carte de 421 px) */
  }

  .project-card__media {
    aspect-ratio: 332 / 230;
  }
  :root {
    --page-padding: 20px;
  }

  /* Hero */
  .hero,
  .hero:not(.hero--page) {
    padding: 40px var(--page-padding) 64px; /* hauteur 402 px avec le nouveau texte */
  }

  /* как в Figma (clipsContent): овалы не заходят на подложку «Ce que je fais» */
  .hero:not(.hero--page) {
    overflow: clip;
  }

  .hero__inner,
  .hero:not(.hero--page) .hero__inner {
    gap: 24px;
  }

  /* как в Figma (825:32850): заголовок и абзац шириной 350 px у левого поля, без растяжки на всю ширину экрана */
  .hero:not(.hero--page) .hero__inner {
    max-width: 350px;
    margin: 0;
  }

  .hero__title,
  .hero:not(.hero--page) .hero__title {
    flex: none;
    max-width: 100%;
    font-size: 40px; /* 3 lignes de 40 px */
  }

  .hero__text {
    width: 100%; /* Figma 825:32850: абзац во всю ширину 350 px, 7 строк = 154 px, блок 402 px */
    max-width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  .hero__text-wrap {
    width: 100%;
  }

  /* овалы мобильной раскладки: абзац 350 px (на узких экранах всё масштабируется вместе с абзацем) */
  .hero-oval {
    --d: 350;
  }

  .hero-oval--gold {
    --w: 397.181;
    --h: 202.708;
    --cx: 182.5;
    --cy: 68.4;
    --rot: 173.7deg;
    --flip: 1;
    background-image: url("../images/hero-shape-mobile-1-r3.svg");
  }

  .hero-oval--red {
    --w: 239.835;
    --h: 288.176;
    --cx: 217.15;
    --cy: 67.9;
    --rot: 71.93deg;
    background-image: url("../images/hero-shape-mobile-2-r3.svg");
  }

  .hero--page {
    padding: 40px var(--page-padding) 88px; /* hauteur 342 px */
  }

  /* Page « Réalisations » : titre 36 px, filtres sur une ligne qui défile */
  .projects--page {
    gap: 24px;
    padding: 40px var(--page-padding) 64px; /* + 4 px de ligne = 44 px */
    border-top-width: 4px;
    border-radius: 32px 32px 0 0;
  }

  .projects__header {
    gap: 20px;
  }

  .filters {
    flex-wrap: nowrap;
    gap: 6px;
    margin-inline: calc(var(--page-padding) * -1);
    padding-inline: var(--page-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter,
  .filter[data-filter] {
    flex: none;
    width: auto;
    height: 40px;
    padding: 8px 12px; /* largeurs 57 / 159 / 121 / 187 px comme dans la maquette */
  }

  .hero--page .hero__title {
    flex-basis: auto;
  }

  .hero__art--a,
  .hero__art--b {
    display: none;
  }

  /* Pomme mobile : cadre 384 × 347 qui dépasse de 209 px, flou 46 → 23 px */
  .hero__art--m {
    display: block;
    right: -209.1px;
    top: 84.3px;
    width: 384.102px;
    height: 347.411px;
    filter: blur(23px);
  }

  .hero__art--m .hero__photo {
    left: calc(50% - 162.292px);
    top: calc(50% - 136.348px);
    width: 324.583px;
    height: 272.695px;
    transform: rotate(15deg);
  }

  .hero__art--m .hero__stem {
    left: 216.98px;
    top: -14.3px;
    width: 48.253px;
    height: 78.115px;
  }

  /* Services: подложка #F2F2E9 на всю ширину сразу после первого экрана, скругление 32 только сверху,
     отступы 56 / 20 (Figma 825:32856); белые карточки лежат на ней */
  .services {
    gap: 32px;
    padding: 56px var(--page-padding) 20px;
    background: var(--color-bg-surface);
    border-radius: 32px 32px 0 0;
  }

  .service-card {
    background: #fff;
  }

  .services__header {
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    line-height: 22px; /* 4 lignes = 88 px */
  }

  .services__label {
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }

  .services__intro {
    width: 100%;
  }

  .services__list {
    gap: 10px;
  }

  .service-card {
    --card-pad-y: 28px;
    --card-pad-x: 24px;
    --card-radius: 32px;
  }

  .service-card__title {
    flex: 1;
    font-size: 26px;
  }

  .service-card__number {
    font-size: 14px;
  }

  .service-card__collapse {
    gap: 16px;
  }

  .service-card__content {
    gap: 16px;
    width: 100%;
  }

  /* Illustration réduite pour tenir dans la carte (302 px de large) */
  .illu {
    width: 260px;
    height: auto;
    margin: 8px 0;
  }

  .service-card__text {
    font-size: 16px;
    line-height: 1.5;
  }

  .service-card__list {
    padding: 0 0 0 16px;
    font-size: 14px;
  }
}

/* =========================================================
   Page « À propos »
   Maquette : desktop 1440 px (Figma 99:7570), mobile 390 px (1114:59620).
   Hauteurs desktop : hero 410 · portrait 854 · parcours 553 · valeurs 666 · outils 534 · services 708
   ========================================================= */

/* Élément courant du menu (en-tête et pied de page) */
.header__nav a[aria-current="page"],
.footer__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about {
  /* unité mobile : 1 px à 390 px de large */
  --m: max(1px, calc(100vw / 390));
  /* unité de la maquette : 1 px à 1440 px, puis proportionnelle sur les grands écrans (la pomme grandit avec la fenêtre) */
  --u: max(1px, calc(100vw / 1440));
}

/* Ovales fins : positions de la maquette (depuis le haut de <main>), centrés sur la colonne de 1440 px */
.about-oval--gold { left: calc(50% - 720px + 337.3px); top: 251.8px; }
.about-oval--pink { left: calc(50% - 720px + 726.1px); top: 2.6px; }

/* ---------- Hero ---------- */
.about-hero {
  display: flex;
  align-items: flex-end;
  gap: 120px;
  padding: 140px max(var(--page-padding), calc(50% - 630px)) 90px;
}

.about-hero__title {
  flex: 0 0 724px;
  margin: 0;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: none;
}

.about-hero__text {
  flex: 1;
  margin: 0;
  max-width: 416px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ---------- Portrait ---------- */
.about-portrait {
  padding: 90px max(180px, calc(50% - 540px));
}

.about-portrait__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 674;
  object-fit: cover;
  border-radius: 44px;
}

/* ---------- Pomme floue ----------
   Photo + tige, floutées ensemble (flou de calque Figma 79,65 → 40 px en CSS). Collée au bord droit de la
   fenêtre, elle dépasse ; <main> coupe sur les côtés (overflow-x: clip) : pas de défilement horizontal
   et pas de ligne droite visible à gauche. Au-dessus du portrait, sous le texte du parcours.
   Le script écrit --py (décalage vertical) pendant le défilement : parallaxe légère. */
.about__apple {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 1000px;
  width: calc(700 * var(--u));
  height: calc(700 * var(--u));
  pointer-events: none;
  filter: blur(calc(40 * var(--u)));
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.about__apple img {
  position: absolute;
  max-width: none;
}

.about__apple-photo {
  right: calc(-38.52 * var(--u));
  top: 115.45px;
  width: calc(562.04 * var(--u));
  height: calc(472.19 * var(--u));
  transform: rotate(15deg);
}

.about__apple-stem {
  right: calc(115.77 * var(--u));
  top: 26px;
  width: calc(83.55 * var(--u));
  height: calc(135.26 * var(--u));
}

/* ---------- Parcours ---------- */
.about-story {
  position: relative;
  z-index: 2;
  padding: 90px var(--page-padding);
}

.about-story__inner {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.about-story__journey {
  flex: 0 0 553px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.about-story__title,
.about-values__title,
.about-tools__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.about-story__text {
  font-size: 18px;
  line-height: 25px;
  color: var(--color-text-secondary);
}

.about-story__text p,
.about-why__text p {
  margin: 0;
}

.about-story__text p + p,
.about-why__text p + p {
  margin-top: 25px;
}

/* Carte « verre » : le flou de l'arrière-plan (la pomme) passe à travers */
.about-why {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 48px;
  border: 1px solid var(--color-border-default);
  border-radius: 44px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.about-why__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}

.about-why__text {
  font-size: 18px;
  line-height: 25px;
  color: var(--color-text-secondary);
}

/* ---------- Ce qui me guide ---------- */
.about-values {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.about-values__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 180px 150px;
  border: 6px solid var(--color-border-default);
  border-bottom: 0;
  border-radius: 64px;
  background:
    linear-gradient(rgba(18, 15, 16, 0.8), rgba(18, 15, 16, 0.8)),
    url("../images/projects/card-texture.png") center / cover,
    var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.about-values__title {
  text-align: center;
}

.about-values__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px;
  width: 100%;
  max-width: 1080px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.value-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 24px;
  border-radius: 8px;
  /* Figma 99:10112: заливка #666D2B 40 % + Glass (как плашки иконок в блоке «Comment ça se passe ?») */
  background: rgba(102, 109, 43, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3), inset -1px -1px 1px rgba(255, 255, 255, 0.1);
}

.value-card__title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
}

.value-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Outils et formations ---------- */
.about-tools {
  display: flex;
  gap: 120px;
  padding: 180px var(--page-padding) 90px;
  max-width: calc(var(--content-max) + 2 * var(--page-padding));
  margin: 0 auto;
}

.about-tools__title {
  flex: 0 0 570px;
}

.about-tools__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  font-size: 18px;
  line-height: 25px;
}

.about-tools__item p,
.about-tools__item ul {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.about-tools__label {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---------- Services ---------- */
.about-services {
  padding: 90px var(--page-padding) 180px;
}

.about-services__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.about-services__text {
  flex: 0 0 748px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.about-services__label {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.about-services__body {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 591px;
}

.about-services__desc {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
  color: var(--color-text-secondary);
}

.about-services__list {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 39px;
}

.about-services__illustration {
  flex: 0 0 auto;
  width: 460px;
  height: auto;
  margin: -1px -6px -2px -6px;
}

/* ---------- Tablette ---------- */
@media (max-width: 1199px) {
  .about-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .about-hero__title {
    flex: none;
    font-size: clamp(52px, 8vw, 90px);
  }

  .about-portrait {
    padding: 64px var(--page-padding);
  }


  .about-story__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .about-story__journey {
    flex: none;
  }

  .about-values__panel {
    padding: 120px 48px;
  }

  .about-values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }

  .about-tools {
    flex-direction: column;
    gap: 40px;
    padding-top: 120px;
  }

  .about-tools__title {
    flex: none;
  }

  .about-services__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-services__text {
    flex: none;
  }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
  .about-oval--gold { display: none; }
  .about-oval--pink {
    width: 333px;
    height: auto;
    left: 141.67px;
    top: 15.5px;
  }

  .about-hero {
    gap: 20px;
    padding: 40px var(--page-padding) 40px;
  }

  .value-card__title {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 29px;
  }

  .about-hero__title {
    font-size: min(44px, 11.28vw);
  }

  .about-hero__text {
    max-width: none;
    font-size: 16px;
    line-height: 22px;
  }

  .about-portrait {
    padding: 0 var(--page-padding) 40px;
  }

  .about-portrait__photo {
    aspect-ratio: 350 / 420;
    border-radius: 24px;
  }

  .about__apple {
    top: 540px;
    width: calc(300 * var(--m));
    height: calc(300 * var(--m));
    filter: blur(calc(16 * var(--m)));
  }

  .about__apple-photo {
    right: calc(-80.43 * var(--m));
    top: 60.6px;
    width: calc(224.82 * var(--m));
    height: calc(188.88 * var(--m));
  }

  .about__apple-stem {
    right: calc(-18.71 * var(--m));
    top: 24.8px;
    width: calc(33.42 * var(--m));
    height: calc(54.1 * var(--m));
  }

  .about-story {
    padding: 24px var(--page-padding) 48px;
  }

  .about-story__inner {
    gap: 24px;
  }

  .about-story__journey {
    gap: 20px;
  }

  .about-story__title,
  .about-values__title,
  .about-tools__title {
    font-size: 40px;
  }

  .about-story__text {
    font-size: 16px;
    line-height: 22px;
  }

  .about-story__text p + p,
  .about-why__text p + p {
    margin-top: 22px;
  }

  .about-why {
    padding: 28px;
    border-radius: 28px;
  }

  .about-why__title {
    font-size: 32px;
  }

  .about-why__text {
    font-size: 16px;
    line-height: 22px;
  }

  .about-values {
    padding: 0 12px;
  }

  .about-values__panel {
    gap: 40px;
    padding: 64px 28px;
    border-radius: 32px;
  }

  .about-values__list {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-tools {
    padding: 64px var(--page-padding) 48px;
    gap: 32px;
  }

  .about-tools__list {
    gap: 32px;
    font-size: 16px;
    line-height: 22px;
  }

  .about-tools__label {
    font-size: 16px;
    line-height: 22px;
  }

  .about-tools__item p,
  .about-tools__item ul {
    margin-top: 22px;
  }

  .about-services {
    padding: 48px var(--page-padding) 64px;
  }

  .about-services__inner {
    gap: 40px;
  }

  .about-services__text {
    gap: 32px;
  }

  .about-services__label,
  .about-services__desc {
    font-size: 16px;
    line-height: 22px;
  }

  .about-services__body {
    gap: 32px;
  }

  .about-services__list {
    font-size: 30px;
    line-height: 31px;
  }

  .about-services__illustration {
    width: 286px;
    align-self: center;
    margin: 0;
  }
}

/* =========================================================
   Pages de services (Identité de marque, Web & applications mobiles, Communication & print)
   Maquettes desktop 1440 px (Figma 350:25863 / 351:26078 / 352:26932), mobile 390 px.
   Blocs réutilisés de l'accueil : .process, .projects, .faq (textes propres à chaque page).
   Nouveaux : hero, showcase, cartes d'offre (.offer-card).
   ========================================================= */

/* ---------- Hero ---------- */
.service-hero {
  display: flex;
  align-items: flex-end;
  gap: 120px;
  padding: 140px max(var(--page-padding), calc(50% - 630px));
}

.service-hero__title {
  flex: 0 0 724px;
  margin: 0;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: none;
}

.service-hero__text {
  flex: 1;
  margin: 0;
  max-width: 416px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Ovales fins du fond : mêmes formes que sur l'accueil (SVG non rognés), centrés sur la colonne de 1440 px.
   Positions = centres des ellipses de la maquette, depuis le haut de <main> (sous l'en-tête de 124 px). */
.service-shape {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.service-shape--gold {
  width: 872.484px;
  height: 498.268px;
  left: calc(50% - 720px + var(--gold-x));
  top: var(--gold-y);
  transform: rotate(var(--gold-rot));
}

.service-shape--red {
  width: 599.332px;
  height: 485.339px;
  left: calc(50% - 720px + var(--red-x));
  top: var(--red-y);
  transform: rotate(14.63deg);
}

.service--identite { --showcase-bg: #dcdcd2; --gold-x: 545.77px; --gold-y: 133.08px; --gold-rot: -14.63deg; --red-x: 890.56px; --red-y: 27.8px; }
.service--web      { --showcase-bg: #fafafa; --gold-x: 539.77px; --gold-y: 281.08px; --gold-rot: -14.63deg; --red-x: 862.56px; --red-y: 225.8px; }
.service--print    { --showcase-bg: #000; --gold-x: 571.75px; --gold-y: 165.53px; --gold-rot: -25.5deg;  --red-x: 892.56px; --red-y: 70.8px; }

/* ---------- Showcase ---------- */
.service-showcase {
  padding: 0 24px;
}

.service-showcase__panel {
  position: relative;
  isolation: isolate;
  max-width: 1392px;
  margin: 0 auto;
  aspect-ratio: 1392 / 663;
  overflow: hidden;
  border-radius: 64px;
  background: var(--showcase-bg, var(--color-bg-surface));
  transform: translateZ(0); /* без щелей в углах в Safari/Chrome */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Картинка — прямоугольник, растянутый на всю рамку; скругляет и обрезает только рамка */
.service-showcase__panel picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.service-showcase__panel img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

/* Обводка «inside» как в Figma: поверх картинки, сверху и по бокам, снизу нет */
.service-showcase__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: 6px solid var(--color-border-default);
  border-bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Ce que je propose ---------- */
.offers {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: calc(var(--content-max) + 2 * var(--page-padding));
  margin: 0 auto;
  padding: 180px 180px;
}

.offers__header {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  font-size: 18px;
  line-height: 25px;
  color: var(--color-text-secondary);
}

.offers__label {
  flex: 0 0 182px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
}

.offers__intro {
  flex: 1;
  margin: 0;
  max-width: 683px;
}

.offers__intro p {
  margin: 0;
}

.offers__intro p + p {
  margin-top: 25px;
}

.offers__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Carte d'offre : en-tête (titre + description), prix, liste, délai. Hauteur = contenu (la grille égalise les cartes d'une même rangée) */
.offer-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 23px;
  border: 1px solid var(--color-border-default);
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.offer-card__head {
  display: flex;
  flex-direction: column;
  margin: 7px 7px 8px;
  padding: 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 36px;
  background: var(--color-bg-surface);
}

.offer-card__title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 31px;
}

.offer-card__desc {
  margin: auto 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.offer-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}

.offer-card__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-default);
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 31px;
}

.offer-card__price--label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.offers__cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Deux cartes côte à côte : les deux en-têtes ont la même hauteur (titre sur 1 ou 2 lignes) */
@media (min-width: 1200px) {
  .offers__cards--two .offer-card__head {
    min-height: 152px;
  }
}

.offer-card__from {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.offer-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-card__features li {
  display: flex;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.offer-card__features img {
  flex: none;
  width: 24px;
  height: 24px;
}

.offer-card__delay {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

/* ---------- Projets (blocs de l'accueil) ---------- */
.projects--service {
  padding-top: 180px;
  padding-bottom: 180px;
}

/* ---------- FAQ des services : pas d'ovales ---------- */
.faq--service .faq__intro {
  position: relative;
}

/* ---------- Tablette ---------- */
@media (max-width: 1199px) {
  .service-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .service-hero__title {
    flex: none;
    font-size: clamp(52px, 8vw, 90px);
  }

  .offers {
    padding: 120px var(--page-padding);
  }

  .offers__header {
    flex-direction: column;
    gap: 16px;
  }

  .offers__label {
    flex: none;
  }

  .offers__cards,
  .offers__cards--two {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
  .service-shape--gold {
    display: none;
  }

  .service-shape--red {
    width: 299.67px;
    height: 242.67px;
    left: 134.5px;
    top: 23.72px;
  }

  .service-hero {
    gap: 20px;
    padding: 40px var(--page-padding);
  }

  .service-hero__title {
    font-size: min(44px, 11.28vw);
  }

  .service-hero__title--sm {
    font-size: min(38px, 9.74vw);
  }

  .service-hero__text {
    max-width: none;
    font-size: 16px;
    line-height: 22px;
  }

  .service-showcase {
    padding: 0 10px;
  }

  .service-showcase__panel {
    aspect-ratio: 370 / 278;
    border-radius: 28px;
  }

  .service-showcase__panel::after {
    border-width: 4px;
    border-bottom-width: 0;
  }

  .offers {
    gap: 32px;
    padding: 64px var(--page-padding);
  }

  .offers__label,
  .offers__intro,
  .offers__header {
    font-size: 16px;
    line-height: 22px;
  }

  .offers__cards {
    max-width: none;
    gap: 24px;
    align-items: start;
  }

  .offer-card {
    border-radius: 32px;
  }

  .offer-card__head {
    border-radius: 26px;
  }

  .projects--service {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =========================================================
   Ховер кнопок (Figma: «Bouton», «Bouton icône», État=Survol)
   Один общий стиль для .button (все стили) и .link-button
   ========================================================= */
.button,
.link-button__icon {
  --btn-glow: inset 0 -4px 10px rgba(229, 66, 99, 0.3);
  transition: box-shadow 0.2s ease-out;
}

.button__icon img,
.link-button__icon img {
  transition: transform 0.2s ease-out;
}

/* Свечение у «Lien» — только на кружке, у остальных — на всей кнопке */
.button:focus-visible,
.link-button:focus-visible .link-button__icon {
  box-shadow: var(--btn-glow);
}

.button:focus-visible .button__icon img,
.link-button:focus-visible .link-button__icon img {
  transform: rotate(45deg) scale(1.05); /* ↗ становится → */
}

/* Мышь — только там, где есть настоящий ховер (на тач-экранах кнопки не «залипают») */
@media (hover: hover) {
  .button:hover,
  .link-button:hover .link-button__icon {
    box-shadow: var(--btn-glow);
  }

  .button:hover .button__icon img,
  .link-button:hover .link-button__icon img {
    transform: rotate(45deg) scale(1.05);
  }
}

/* Рамка фокуса с клавиатуры */
.button:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

.cta__panel .button:focus-visible {
  outline-color: #fff;
}

/* «Уменьшить движение»: стрелка не поворачивается, свечение без анимации */
@media (prefers-reduced-motion: reduce) {
  .button,
  .link-button__icon,
  .button__icon img,
  .link-button__icon img {
    transition: none;
  }

  .button:focus-visible .button__icon img,
  .link-button:focus-visible .link-button__icon img,
  .button:hover .button__icon img,
  .link-button:hover .link-button__icon img {
    transform: none;
  }
}

/* =========================================================
   Page « Contact » — maquette desktop Figma 207:61632 (hero 1440 × 675), pas de maquette mobile
   Pile de 18 pommes (PNG transparents) positionnées en % du premier écran ; elles tombent au chargement.
   ========================================================= */
.page-contact {
  background: #000;
}

/* на странице Contact фон чёрный (#000), а не #120F10: шапка сливается со страницей без полосы */
.page-contact .header--dark {
  background: transparent; /* страница чёрная; шапка прозрачная, яблоки падают и под ней */
}

.contact {
  background: #000;
  color: var(--color-text-on-dark);
}

.contact-hero {
  --hdr-h: 124px; /* высота «пустого места» под шапкой (до 1023 px: мобильная шапка 75,8) */
  position: relative;
  container-type: inline-size;
  /* высота: не меньше макетной пропорции 1440 × 675, и не меньше окна без шапки, чтобы футер был виден только при прокрутке */
  min-height: max(46.875vw, calc(100svh - var(--hdr-h)), 460px);
  /* вниз и вбок обрезаем (куча чуть выходит за низ, горизонтальной прокрутки нет), а вверх не режем:
     яблоки падают с самого верха окна, а не из-под шапки */
  clip-path: inset(-100vh 0 0 0);
}

.contact-hero__title {
  position: absolute;
  z-index: 2; /* le texte reste au-dessus des pommes */
  /* как в макете: 296,5 от верха блока 1440 × 675, который стоит у нижнего края (46,875cqw = его высота) */
  top: calc(100% - 46.875cqw + 46.875cqw * 296.5 / 675);
  left: max(var(--page-padding), calc(50% - 630px));
  margin: 0;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.3; /* 130 % */
  color: #95958d; /* первые две строки серые (со скриншота Наталии), адрес светлый */
}

.contact-hero__title a {
  color: var(--color-text-on-dark); /* #F6F6EF */
  text-decoration: none; /* без подчёркивания */
}

/* Адрес: при наведении мыши под буквами проявляется градиент #F8A1BF (в центре, у курсора) → #FFE2E4 (по краям), центр следует за курсором
   (--gx / --gy ставит JS). Текст прозрачный, цвет «просвечивает» из фона (background-clip: text). */
@media (hover: hover) {
  .contact-hero__title a {
    background-image: radial-gradient(circle 190px at var(--gx, 50%) var(--gy, 50%), #f8a1bf 0%, #ffe2e4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    transition: -webkit-text-fill-color 0.3s ease;
  }

  .contact-hero__title a:hover {
    -webkit-text-fill-color: transparent;
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .contact-hero__title a {
    transition: none;
  }
}

/* куча яблок: блок с пропорцией макета 1440 × 675 у нижнего края, на высоких экранах сверху просто чёрное поле */
.contact-hero__apples {
  position: absolute;
  inset: auto 0 0 0;
  aspect-ratio: 1440 / 675;
  z-index: 1;
  pointer-events: none;
}

.contact-apple {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  max-width: none;
  pointer-events: none;
  will-change: transform;
}

/* Avec JavaScript : les pommes restent cachées jusqu'au début de la chute (sans JS : pile tout de suite en place) */
.js .contact-hero:not(.is-ready) .contact-apple {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .js .contact-hero:not(.is-ready) .contact-apple {
    visibility: visible;
  }
}

/* ---------- Карточки подменю «Services» (десктопная панель и мобильное подменю) ---------- */
.submenu-card {
  position: relative;
  display: block;
  width: 260px;
  height: 167px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent; /* без белой подложки: она просвечивала по краю */
  border: 0;
  padding: 0;
  color: #fff;
  isolation: isolate;
  transform: translateZ(0); /* против щелей в скруглённых углах */
}

.submenu-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* картинка плавно увеличивается (рамка карточки обрезает по скруглению); с клавиатуры тот же эффект */
.submenu-card:focus-visible > img {
  transform: scale(1.08);
}

.submenu-card__label {
  position: absolute;
  left: 18px;
  bottom: 29px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.submenu-card__icon {
  --btn-glow: inset 0 -4px 10px rgba(229, 66, 99, 0.3);
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  transition: box-shadow 0.2s ease-out;
}

.submenu-card__icon img {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease-out;
}

.submenu-card:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

.header--dark .submenu-card:focus-visible {
  outline-color: #fff;
}

.submenu-card:focus-visible .submenu-card__icon {
  box-shadow: var(--btn-glow);
}

.submenu-card:focus-visible .submenu-card__icon img {
  transform: rotate(45deg) scale(1.05);
}

@media (max-width: 1023px) {
  .contact-hero {
    --hdr-h: 75.82px;
  }
}

/* Tablette : le texte rétrécit un peu, la pile suit la largeur */
@media (max-width: 1199px) {
  .contact-hero__title {
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.3;
  }
}

/* Téléphone (maquette 1257:90680) : la pile de 18 pommes est AU-DESSUS du texte, les deux collés en bas du bloc
   (padding 64 / 20 / 34, écart pile → texte 24 px) ; la pile mesure 350 × 134,9 comme dans la maquette */
@media (max-width: 767px) {
  .page-contact {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .page-contact main.contact {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .contact-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* hero + pied de page tiennent dans l'écran : le hero prend la place restante (au moins ~438 px, comme la maquette) */
    flex: 1 0 auto;
    min-height: 0; /* высоту задаёт страница (flex), а не окно */
    padding: 24px var(--page-padding, 20px) 34px; /* en haut 64 px dans la maquette ; ici 24 px, le reste est du noir qui s'ajuste à la hauteur de l'écran */
  }

  .contact-hero__title {
    position: relative;
    top: auto;
    left: auto;
    font-size: min(30px, calc((100vw - 40px) / 11.4)); /* 30 px à 390 ; l'adresse e-mail tient toujours sur une ligne, même à 320 px */
    line-height: 1.3;
  }

  .contact-hero__title a {
    white-space: nowrap;
  }

  .contact-hero__apples {
    position: relative;
    inset: auto;
    order: -1;
    flex: none;
    width: 100%;
    margin: 0 0 24px;
    aspect-ratio: 350 / 134.9;
  }

  .contact-apple {
    left: var(--mx);
    top: var(--my);
    width: var(--mw);
  }
}

/* =========================================================
   Шапка на десктопе (от 1024 px): плавающая «таблетка» + подменю «Services»
   Макеты Figma: компонент Header 1173:69044 (Light/Dark × Closed/Opened), пункт меню 1172:63721.
   Два слоя: .header__inner (логотип + меню + карточки) НИКОГДА не меняет размер и позицию,
   .header__bg (только фон) проявляется и растягивается по классам is-scrolled / is-submenu-open.
   .header остаётся «пустым местом» высотой 124 px.
   ========================================================= */
.header__backdrop,
.header__bg,
.header__panel,
.header__subscreen,
.header__chevron {
  display: none;
}

.header__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

@media (min-width: 1024px) {
  .header {
    --header-gap: 22px; /* отступ таблетки от краёв окна: сверху, слева и справа */
  }

  /* слой содержимого: всегда в контейнере страницы, высота 124 px (логотип 62,7 + 2 × 30,6) */
  .header__inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* логотип по центру таблетки: 22 + 110 / 2 = 77 px от верха (логотип y 45,6); высота слоя 124,7, чтобы карточки встали на y 164,7 */
    padding: 45.627px max(var(--page-padding), calc((100vw - var(--content-max)) / 2)) 16.373px;
  }

  /* слой фона: меняется только он */
  .header__bg {
    display: block;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 124px;
    border-radius: 0;
    /* светлая закрытая таблетка (Figma 1173:71305): заливка #CECEC4 30 %, background blur 70 = CSS blur 35 */
    background: rgba(206, 206, 196, 0.3);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    box-shadow: 0 18px 31px rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition:
      top 0.28s ease,
      left 0.28s ease,
      right 0.28s ease,
      height 0.28s ease,
      border-radius 0.28s ease,
      background-color 0.28s ease,
      box-shadow 0.28s ease,
      -webkit-backdrop-filter 0.28s ease,
      backdrop-filter 0.28s ease,
      opacity 0.28s ease;
  }

  /* тёмная закрытая таблетка (Figma 1173:96399): заливка #30282B 30 %, background blur 100 = CSS blur 50 */
  .header--dark .header__bg {
    background: rgba(48, 40, 43, 0.3);
    -webkit-backdrop-filter: blur(50px); /* Figma: blur 100 = CSS blur 50 */
    backdrop-filter: blur(50px);
  }

  /* страница прокручена: таблетка с отступом 22 px от краёв, радиус 44 (содержимое остаётся на месте) */
  .header.is-scrolled .header__bg {
    top: var(--header-gap);
    left: var(--header-gap);
    right: var(--header-gap);
    height: 110px; /* по просьбе Наталии; центр = 22 + 55 = 77 = центр логотипа */
    border-radius: 34px;
    opacity: 1;
  }

  /* подменю открыто: тот же фон тянется вниз под карточки, до краёв окна, радиус только снизу */
  .header.is-submenu-open .header__bg {
    top: 0;
    left: 0;
    right: 0;
    height: 371.746px; /* 62 + 62,7 + 40 + карточки 167 + 40 */
    border-radius: 0 0 34px 34px;
    /* заливка и размытие те же, что у закрытой таблетки (по просьбе Наталии) */
    box-shadow: 0 18px 31px rgba(0, 0, 0, 0.2);
    opacity: 1;
  }

  /* ---------- меню ---------- */
  .header__nav {
    gap: 64px;
  }

  .header .header__nav a {
    color: var(--color-text-secondary);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .header--dark .header__nav a {
    color: var(--color-text-on-dark);
  }

  /* запас ширины под жирное начертание, чтобы пункты не «прыгали» при наведении */
  .header__label::after {
    content: attr(data-text);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 500;
  }

  .header .header__nav a:hover,
  .header .header__nav a:focus-visible,
  .header .header__nav a[aria-current="page"],
  .header .header__nav a[aria-expanded="true"] {
    color: var(--color-text-primary);
  }

  .header--dark .header__nav a:hover,
  .header--dark .header__nav a:focus-visible,
  .header--dark .header__nav a[aria-current="page"],
  .header--dark .header__nav a[aria-expanded="true"] {
    color: #fff;
  }

  .header__nav a:hover .header__label,
  .header__nav a:focus-visible .header__label,
  .header__nav a[aria-current="page"] .header__label,
  .header__nav a[aria-expanded="true"] .header__label {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .header__nav a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: 4px;
  }

  .header__services {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  .header__chevron {
    display: block;
    flex: none;
    transition: opacity 0.25s ease;
  }

  /* при открытом подменю стрелка исчезает, место под неё остаётся (ширина пункта не меняется) */
  .header__services[aria-expanded="true"] .header__chevron {
    opacity: 0;
  }

  /* ---------- размытие страницы под открытым подменю ---------- */
  .header__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0s linear 0.26s;
  }

  .header--dark .header__backdrop {
    background: rgba(0, 0, 0, 0.49);
  }

  .header.is-submenu-open .header__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.26s ease;
  }

  /* ---------- панель с тремя карточками (вне потока, содержимое шапки не двигает) ---------- */
  .header__panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 40px 0 40px; /* 40 px от меню до карточек, как в Figma; заодно «мостик» для курсора */
    visibility: hidden;
    transition: visibility 0s linear 0.26s;
  }

  .header.is-submenu-open .header__panel {
    visibility: visible;
    transition: none;
  }

  .header__panel-clip {
    overflow: visible;
  }

  .header__cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.26s ease;
  }

  .header.is-submenu-open .header__cards {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) {
  .submenu-card:hover > img {
    transform: scale(1.08);
  }

  .submenu-card:hover .submenu-card__icon {
    box-shadow: var(--btn-glow);
  }

  .submenu-card:hover .submenu-card__icon img {
    transform: rotate(45deg) scale(1.05);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .header__bg,
  .header__nav a,
  .header__chevron,
  .header__backdrop,
  .header__panel,
  .header__cards,
  .submenu-card > img,
  .submenu-card__icon,
  .submenu-card__icon img {
    transition: none !important;
  }

  .submenu-card:hover > img,
  .submenu-card:focus-visible > img,
  .submenu-card:hover .submenu-card__icon img,
  .submenu-card:focus-visible .submenu-card__icon img {
    transform: none;
  }
}

/* =========================================================
   Мобильная шапка и меню (до 1024 px): макеты Figma 966:88116 (светлое), 1048:46638 (тёмное)
   Меню открывается поверх страницы на весь экран: полупрозрачный фон + blur 10,
   ссылки по центру (Outfit 20, шаг 74 px), появляются по очереди.
   ========================================================= */
@media (max-width: 1023px) {
  /* .header остаётся «пустым местом» 75,8 px; содержимое (.header__inner) и фон (.header__bg) приклеены к окну,
     как на десктопе: шапка идёт за прокруткой, при прокрутке под ней появляется полупрозрачная «таблетка» */
  .header {
    --header-gap: 8px;
    height: 75.8px;
    padding: 0;
  }

  .header__inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: none;
    margin: 0;
    height: 75.8px;
    padding: 0 var(--page-padding);
  }

  .header__bg {
    display: block;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 75.8px;
    border-radius: 0;
    background: rgba(206, 206, 196, 0.3);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    opacity: 0;
    pointer-events: none;
    transition:
      top 0.28s ease,
      left 0.28s ease,
      right 0.28s ease,
      height 0.28s ease,
      border-radius 0.28s ease,
      opacity 0.28s ease;
  }

  .header--dark .header__bg {
    background: rgba(48, 40, 43, 0.3);
  }

  /* страница прокручена: таблетка с отступом 8 px; её центр = центр логотипа (8 + 59,8 / 2 = 37,9) */
  .header.is-scrolled .header__bg {
    top: var(--header-gap);
    left: var(--header-gap);
    right: var(--header-gap);
    height: 59.8px;
    border-radius: 24px;
    opacity: 1;
  }

  /* когда открыто меню, таблетка не нужна: фон даёт само меню */
  .header.is-open .header__bg {
    opacity: 0;
  }

  .header__logo img {
    width: 44.255px;
    height: 43.822px;
  }

  .header__burger {
    display: block;
  }

  /* «бургер»: две линии (Figma Menu, 24,2 × 2 на y 11 и 19 в кнопке 32 × 32) плавно превращаются в крестик */
  .header__burger {
    position: relative;
    width: 32px;
    height: 32px;
    color: #1a1a1a;
  }

  .header--dark .header__burger {
    color: var(--color-text-on-dark); /* #F6F6EF */
  }

  /* Закрыто → открыто в два шага: сначала линии сходятся к центру, затем чётко наклоняются на ±45° и образуют крест.
     Открыто → закрыто: сначала крест выпрямляется (поворот), потом линии расходятся. Шаги идут строго друг за другом,
     без наложения: так каждое движение хорошо видно. Свойства translate и rotate идут отдельно. */
  .burger__line {
    position: absolute;
    left: 4px;
    width: 24.2px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    translate: 0 0;
    rotate: 0deg;
    /* закрытие: сначала поворот назад, потом расхождение */
    transition: rotate 0.22s ease-in-out, translate 0.18s ease-in-out 0.22s;
  }

  .burger__line:nth-child(1) {
    top: 11px;
  }

  .burger__line:nth-child(2) {
    top: 19px;
  }

  .header.is-open .burger__line {
    /* открытие: сначала сходятся, потом наклон */
    transition: translate 0.18s ease-in-out, rotate 0.22s ease-in-out 0.18s;
  }

  .header.is-open .burger__line:nth-child(1) {
    translate: 0 4px;
    rotate: 45deg;
  }

  .header.is-open .burger__line:nth-child(2) {
    translate: 0 -4px;
    rotate: -45deg;
  }

  /* логотип и кнопка лежат над меню и не двигаются */
  .header__logo,
  .header__burger {
    position: relative;
    z-index: 2;
  }

  .header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44px; /* шаг 74 px = строка 30 + 44 */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .header--dark .header__nav {
    background: rgba(18, 15, 16, 0.9); /* #120F10 */
  }

  .header.is-open .header__nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
  }

  .header .header__nav a {
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .header--dark .header__nav a {
    color: var(--color-text-on-dark);
  }

  /* ссылки появляются по очереди */
  .header.is-open .header__nav a {
    opacity: 1;
    transform: none;
  }

  .header.is-open .header__nav a:nth-child(1) { transition-delay: 0.04s; }
  .header.is-open .header__nav a:nth-child(2) { transition-delay: 0.09s; }
  .header.is-open .header__nav a:nth-child(3) { transition-delay: 0.14s; }
  .header.is-open .header__nav a:nth-child(4) { transition-delay: 0.19s; }

  /* текущая страница подчёркнута */
  .header__nav a[aria-current="page"] .header__label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---------- Подменю «Services»: второй экран меню (Figma 1230:155137 светлое, 1230:159450 тёмное) ---------- */
  .header__services {
    display: inline-flex;
    align-items: center;
  }

  /* стрелка › справа от «Services» (та же стрелка ⌄, повернутая) */
  .header__chevron {
    display: block;
    flex: none;
    transform: rotate(-90deg);
  }

  .header__nav {
    transform: none;
    transition: opacity 0.25s ease, transform 0.28s ease, visibility 0s linear 0.25s;
  }

  .header.is-open .header__nav {
    transition: opacity 0.25s ease, transform 0.28s ease;
  }

  /* главный экран уезжает влево и гаснет, подменю приезжает справа */
  .header.is-open.is-sub-open .header__nav {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-40px);
    transition: opacity 0.25s ease, transform 0.28s ease, visibility 0s linear 0.28s;
  }

  .header__subscreen {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 112.5px 0 40px; /* «‹ Services» на y 112,5, первая карточка на y 182,5 */
    overflow-y: auto; /* если карточки не помещаются, прокручивается подменю, а не страница */
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.28s ease, visibility 0s linear 0.28s;
  }

  .header--dark .header__subscreen {
    background: rgba(18, 15, 16, 0.9);
  }

  .header.is-open.is-sub-open .header__subscreen {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.28s ease;
  }

  .header__subinner {
    width: 260px;
    flex: none;
  }

  .header__back {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0 0 40px;
    padding: 0 0 0 6px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-text-primary);
    cursor: pointer;
  }

  .header--dark .header__back {
    color: var(--color-text-on-dark);
  }

  .header__back-icon {
    flex: none;
    transform: rotate(90deg); /* ‹ */
  }

  .header__back:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
  }

  .header__subcards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  html.menu-open {
    overflow: hidden; /* страница под меню не прокручивается */
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .header__subscreen,
  .header__bg {
    transition: none !important;
    transform: none !important;
  }

  .burger__line {
    transition: none !important; /* крестик появляется сразу (поворот остаётся) */
  }

  .header__nav,
  .header .header__nav a {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Pages légales : Mentions légales, Politique de confidentialité
   Maquettes : 1016:33610 / 1016:33662 (bureau), 1016:33723 / 1016:33774 (mobile)
   ========================================================= */
.legal-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--content-max) + 180px);
  margin: 0 auto;
  padding: 140px 90px 80px;
}

.legal-hero__eyebrow {
  font-size: 18px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.legal-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: normal;
  color: var(--color-text-primary);
}

.legal-hero__date {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: calc(var(--content-max) + 180px);
  margin: 0 auto;
  padding: 0 90px 140px;
}

.legal-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 820px;
}

.legal-block__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.02;
  color: var(--color-text-primary);
}

.legal-block__body {
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.legal-block__body p + p {
  margin-top: 12px;
}

.legal-block__body a {
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.legal-block__body a:hover {
  color: var(--color-text-primary);
}

.legal-block__body a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 1199px) {
  .legal-hero,
  .legal-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .legal-hero {
    gap: 16px;
    padding: 56px 20px 48px;
  }

  .legal-hero__eyebrow,
  .legal-hero__date {
    font-size: 14px;
    line-height: 1.4;
    text-transform: none;
  }

  .legal-hero__title {
    font-size: 34px;
    overflow-wrap: normal;
  }

  .legal-content {
    gap: 40px;
    padding: 0 20px 80px;
  }

  .legal-block {
    gap: 12px;
  }

  .legal-block__title {
    font-size: 28px;
    line-height: 1.2;
  }

  .legal-block__body {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Liens de la ligne légale du pied de page */
.footer__legal a:hover {
  color: var(--color-text-primary);
}

.footer__legal a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   Page 404 (pages/404.html)
   ========================================================= */
.notfound__hero {
  min-height: 60vh;
  justify-content: center;
}

.notfound__button {
  margin-top: 16px;
}