/* ==========================================================================
   SpeakTheSame - feuille de style
   Mobile d'abord. Points de rupture : tablette ≥ 768 px, ordinateur ≥ 1200 px.
   Valeurs issues des maquettes Figma (mobile 390, tablette 834, ordinateur 1440).
   ========================================================================== */

/* Polices hébergées sur le site (licence SIL OFL 1.1, voir assets/fonts/LICENCE-OFL.txt) */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Chiffres elzéviriens (15+, 3, 1) */
@font-face {
  font-family: Cormorant;
  src: url("../assets/fonts/cormorant-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Échelle : 1 px de maquette. Sous la largeur de référence de chaque format
     (390, 834 ou 1440 px), toute la page se réduit proportionnellement,
     textes compris : les lignes se coupent toujours comme sur la maquette.
     Navigateurs récents : 100cqw = largeur réellement disponible, barre de
     défilement exclue (voir le bloc @supports plus bas) ; sinon 100vw. */
  --s: min(1px, 100vw / 390);
  --ink: #172e3a;
  --ink-light: #1e3a49;
  --ink-deep: #001018;
  --cream: #faf9f5;
  --yellow: #ffcc05;
  --yellow-light: #ffdb4f;
  --muted: #59676a;
  --muted-light: #647477; /* #68787b dans la maquette, assombri pour le contraste AA */
  --line: #d9dedb;
  --card-border: #dce1de;
  --field-border: #cdd4d1;
  --round-border: #b9c5bd;
  --sage: #f2f3ed;
  --footer-bg: #f2f1eb;
  --error: #a8261d;
  --gradient-ink: linear-gradient(90deg, var(--ink-light), var(--ink-deep));
  --gradient-yellow: linear-gradient(90deg, var(--yellow), var(--yellow-light));
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-figures: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --gutter: calc(20 * var(--s));
  --content-max: calc(1280 * var(--s));

  /* Marge gauche réelle du contenu, utile pour caler les éléments décoratifs */
  --content-left: max(var(--gutter), (100% - var(--content-max)) / 2);
  --header-height: calc(72 * var(--s));
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Mouvements : départ vif et arrivée douce, jamais d'effet instantané */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.3s;
  --t: 0.45s;
  --t-slow: 0.7s;
}

@media (min-width: 768px) {
  :root {
    --s: min(1px, 100vw / 834);
    --gutter: calc(48 * var(--s));
    --header-height: calc(84 * var(--s));
  }
}

@media (min-width: 1200px) {
  :root {
    --s: min(1px, 100vw / 1440);
    --gutter: calc(80 * var(--s));
    --header-height: calc(95 * var(--s));
  }
}

@supports (width: 1cqw) {
  :root {
    --s: min(1px, 100cqw / 390);
  }

  @media (min-width: 768px) {
    :root {
      --s: min(1px, 100cqw / 834);
    }
  }

  @media (min-width: 1200px) {
    :root {
      --s: min(1px, 100cqw / 1440);
    }
  }
}

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

html {
  container-type: inline-size;

  /* Préfixe encore nécessaire pour Safari sur iPhone */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: max(15px, 16 * var(--s));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body:has(dialog[open]) {
  overflow: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

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

img {
  height: auto;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

em {
  font-style: italic;
  font-weight: 400;
}

:focus-visible {
  outline: calc(2 * var(--s)) solid var(--ink);
  outline-offset: calc(3 * var(--s));
}

.hero :focus-visible,
.contact__intro :focus-visible,
.card:hover:focus-visible {
  outline-color: var(--yellow);
}

[hidden] {
  display: none !important;
}

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

/* Mot composé à ne jamais couper au trait d'union (« juri-linguistiques ») */
.insecable {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: calc(8 * var(--s));
  left: calc(8 * var(--s));
  z-index: 100;
  padding: calc(10 * var(--s)) calc(16 * var(--s));
  background: var(--ink);
  color: #fff;
  border-radius: calc(4 * var(--s));
  font-size: max(14px, 14 * var(--s));
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.icon {
  flex: none;
  fill: none;
}

.icon--12 {
  width: calc(12 * var(--s));
  height: calc(12 * var(--s));
}

.icon--15 {
  width: calc(15 * var(--s));
  height: calc(15 * var(--s));
}

.icon--17 {
  width: calc(17 * var(--s));
  height: calc(17 * var(--s));
}

.icon--18 {
  width: calc(18 * var(--s));
  height: calc(18 * var(--s));
}

.icon--19 {
  width: calc(19 * var(--s));
  height: calc(19 * var(--s));
}

.icon--20 {
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
}

.icon--24 {
  width: calc(24 * var(--s));
  height: calc(24 * var(--s));
}

.icon--30 {
  width: calc(30 * var(--s));
  height: calc(30 * var(--s));
}

/* Sur-titre avec barre verticale */
.kicker {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(25 * var(--s));
  padding-left: calc(17 * var(--s));
  font-size: max(12px, 12 * var(--s));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(4 * var(--s));
  height: calc(25 * var(--s));
  background: var(--yellow);
  transform: translateY(-50%);
}

.kicker--ink::before {
  background: var(--ink);
}

.kicker--muted {
  color: #b4c8c8;
}

.kicker--muted::before {
  background: #b4c8c8;
}

.kicker--hero {
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .kicker {
    font-size: max(14px, 14 * var(--s));
    line-height: 1.179;
    letter-spacing: 0.164em;
  }

  .kicker--hero {
    min-height: calc(15 * var(--s));
    line-height: max(15 * var(--s), 1.2em);
    letter-spacing: calc(2 * var(--s));
  }
}

@media (min-width: 1200px) {
  .kicker {
    min-height: calc(16.5 * var(--s));
  }

  .kicker--hero {
    min-height: calc(15 * var(--s));
  }
}

/* Boutons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(30 * var(--s));
  min-height: calc(55 * var(--s));
  padding: calc(17 * var(--s)) calc(23 * var(--s));
  border-radius: calc(4 * var(--s));
  font-weight: 600;
  font-size: max(15px, 15 * var(--s));
  line-height: 1.213;
  transition: background-color var(--t) var(--ease), filter var(--t) var(--ease), box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}

.button--yellow {
  background: var(--gradient-yellow);
  color: var(--ink);
}

.button--yellow:hover {
  filter: brightness(1.04);
  transform: translateY(calc(-2 * var(--s)));
  box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) rgb(0 16 24 / 0.16);
}

.button--ink {
  background-color: var(--ink);
  color: #fff;
  font-size: max(13px, 11 * var(--s));
  line-height: 1.4;
}

.button--ink .icon {
  color: #f1f6f4;
}

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

.button--wide {
  width: 100%;
}

@media (min-width: 768px) {
  .button > span {
    white-space: nowrap;
  }
}

/* Lien souligné avec flèche */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: calc(20 * var(--s));
  padding: calc(8 * var(--s)) calc(10 * var(--s));
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
  font-size: max(15px, 15 * var(--s));
  line-height: 1.433;
  color: var(--ink);
  transition: border-color var(--t) var(--ease);
}

.text-link:hover {
  border-bottom-color: var(--yellow);
}

.text-link--light {
  min-width: calc(220 * var(--s));
  white-space: nowrap;
  justify-content: space-between;
  border-bottom-color: #839297;
  line-height: max(18.1 * var(--s), 1.2em);
  color: #f7f7f2;
}

/* Bouton rond (menu, fermer, retour en haut) */
.round-button {
  display: grid;
  place-items: center;
  width: calc(44 * var(--s));
  height: calc(44 * var(--s));
  border: 1px solid var(--round-border);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}

.round-button--light {
  border-color: var(--line);
}

.round-button--close {
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
}

.round-button--small {
  width: calc(43 * var(--s));
  height: calc(43 * var(--s));
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream);
  box-shadow: 0 calc(3 * var(--s)) calc(20 * var(--s)) rgb(16 36 46 / 0.04);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--s));
  height: var(--header-height);
}

.brand {
  display: block;
  flex: none;
}

.brand__logo {
  width: calc(206.7 * var(--s));
}

.main-nav,
.lang-switch,
.site-header__cta {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--s));
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  font-weight: 500;
  font-size: max(13px, 12 * var(--s));
  line-height: 1.667;
  color: var(--ink);
}

.menu-toggle:hover .round-button {
  background-color: #fff;
}

.lang-switch {
  gap: calc(3 * var(--s));
}

.lang-switch__item {
  display: block;
  padding: calc(8 * var(--s)) calc(5 * var(--s));
  border-bottom: 1px solid transparent;
  font-weight: 600;
  font-size: max(12px, 10 * var(--s));
  line-height: 1.65;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.lang-switch__item[aria-current] {
  border-bottom-color: var(--ink);
}

/* Langues pas encore disponibles : opacité 70 % (55 % dans la maquette, contraste insuffisant) */
.lang-switch__item[aria-disabled] {
  opacity: 0.7;
  cursor: default;
}

@media (min-width: 768px) {
  .brand__logo {
    width: calc(258.3 * var(--s));
  }

  .lang-switch,
  .site-header__cta {
    display: flex;
  }

  .site-header__cta {
    font-size: max(12px, 11 * var(--s));
    gap: calc(19 * var(--s));
    min-height: calc(47 * var(--s));
    padding: calc(13 * var(--s)) calc(18 * var(--s));
  }
}

@media (min-width: 1200px) {
  .site-header {
    border-bottom: 1px solid transparent;
  }

  .site-header__inner {
    height: calc(94 * var(--s));
    gap: calc(28 * var(--s));
  }

  .brand__logo {
    width: calc(344.4 * var(--s));
  }

  .main-nav {
    display: block;
  }

  .main-nav__list {
    display: flex;
    gap: calc(28 * var(--s));
  }

  .main-nav__link {
    display: block;
    padding: calc(12 * var(--s)) 0;
    font-weight: 500;
    font-size: max(13px, 12 * var(--s));
    line-height: 1.65;
    background: linear-gradient(var(--yellow), var(--yellow)) left bottom calc(9 * var(--s)) / 0 1px no-repeat;
    transition: background-size var(--t) var(--ease-out);
  }

  .main-nav__link:hover {
    background-size: 100% 1px;
  }

  .site-header__actions {
    gap: calc(27 * var(--s));
  }

  .menu-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Menu (mobile et tablette)
   -------------------------------------------------------------------------- */
.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  overflow-y: auto;
}

.menu::backdrop {
  background: rgb(0 12 18 / 0.58);
}

.menu__panel {
  position: relative;
  min-height: 100%;
  padding: 0 calc(20 * var(--s)) calc(40 * var(--s));
  border-top: calc(4 * var(--s)) solid transparent;
  border-image: var(--gradient-yellow) 1;
}

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(68 * var(--s));
}

.menu__brand .brand__logo {
  width: calc(206.7 * var(--s));
}

.menu__kicker {
  display: none;
}

.menu__kicker--mobile {
  display: flex;
  margin-top: calc(26 * var(--s));
  font-size: max(14px, 14 * var(--s));
  line-height: 1.179;
  letter-spacing: 0.164em;

  --i: 1;
}

.menu__close {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  font-size: max(13px, 12 * var(--s));
  line-height: 1.5;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.menu__close .icon {
  transition: transform var(--t) var(--ease-out);
}

.menu__close:hover {
  color: var(--ink);
}

.menu__close:hover .round-button {
  background-color: #fff;
}

.menu__close:hover .icon {
  transform: rotate(90deg);
}

.menu__list {
  padding-top: calc(16 * var(--s));
}

.menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  padding: calc(17 * var(--s)) 0;
  border-bottom: 1px solid var(--line);
}

/* Trait qui se dessine sous le lien survolé */
.menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-slow) var(--ease-out);
}

.menu__list li:first-child .menu__link {
  border-top: 1px solid var(--line);
}

.menu__number {
  flex: none;
  width: calc(34 * var(--s));
  font-weight: 500;
  font-size: max(15px, 16 * var(--s));
  line-height: 1.25;
  color: #657b79;
  transition: color var(--t) var(--ease);
}

.menu__title {
  flex: 1;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(32 * var(--s));
  line-height: calc(38 * var(--s));
  letter-spacing: calc(-0.6 * var(--s));
  transition: transform var(--t-slow) var(--ease-out);
}

.menu__arrow {
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  color: #152a38;
  transition: transform var(--t) var(--ease-out);
}

/* Section en cours (« 01 Vos besoins » dans la maquette) */
.menu__link[aria-current="true"] .menu__number {
  color: var(--ink);
}

.menu__link:hover .menu__number,
.menu__link:focus-visible .menu__number {
  color: var(--ink);
}

.menu__link:hover::after,
.menu__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu__link:hover .menu__title,
.menu__link:focus-visible .menu__title {
  transform: translateX(calc(8 * var(--s)));
}

.menu__link:hover .menu__arrow,
.menu__link:focus-visible .menu__arrow {
  transform: translate(calc(3 * var(--s)), calc(-3 * var(--s)));
}

.menu__cta {
  display: flex;
  width: 100%;
  min-height: calc(53 * var(--s));
  margin-top: calc(24 * var(--s));
  padding: calc(16 * var(--s)) calc(18 * var(--s));
  gap: calc(19 * var(--s));

  --i: 6;
}

.menu__contact {
  padding-top: calc(24 * var(--s));

  --i: 7;
}

/* Absent de la maquette mobile */
.menu .contact-list__note,
.menu__signature {
  display: none;
}

/* Ouverture et fermeture : rideau sur mobile, tiroir sur tablette.
   La classe is-closing est ajoutée par main.js le temps de l'animation de sortie. */
.menu[open] {
  animation: menu-curtain-in var(--t-slow) var(--ease-out);
}

.menu.is-closing {
  animation: menu-curtain-out var(--t) var(--ease-in-out) forwards;
}

.menu[open]::backdrop {
  animation: fade-in var(--t-slow) var(--ease);
}

.menu.is-closing::backdrop {
  animation: fade-out var(--t) var(--ease) forwards;
}

/* Les éléments du menu arrivent les uns après les autres */
.menu[open] :is(.menu__bar, .menu__kicker--mobile, .menu__list li, .menu__cta, .menu__contact, .menu__signature) {
  animation: menu-item-in var(--t-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

.menu.is-closing :is(.menu__bar, .menu__kicker--mobile, .menu__list li, .menu__cta, .menu__contact, .menu__signature) {
  animation: none;
}

.menu__list li:nth-child(1) { --i: 2; }
.menu__list li:nth-child(2) { --i: 3; }
.menu__list li:nth-child(3) { --i: 4; }
.menu__list li:nth-child(4) { --i: 5; }
.menu__signature { --i: 8; }

@keyframes menu-curtain-in {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes menu-curtain-out {
  from {
    clip-path: inset(0);
  }

  to {
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes menu-item-in {
  from {
    opacity: 0;
    transform: translateY(calc(14 * var(--s)));
  }
}

@media (min-width: 768px) {
  .menu {
    width: calc(470 * var(--s));
    margin-left: auto;
    border-radius: calc(12 * var(--s)) 0 0 calc(12 * var(--s));
    box-shadow: calc(-24 * var(--s)) 0 calc(80 * var(--s)) rgb(0 12 18 / 0.24);
  }

  .menu__panel {
    display: flex;
    flex-direction: column;
    padding: calc(28 * var(--s)) calc(44 * var(--s)) calc(40 * var(--s));
  }

  .menu__brand,
  .menu__kicker--mobile {
    display: none;
  }

  .menu__bar {
    height: calc(32 * var(--s));
  }

  .menu__kicker:not(.menu__kicker--mobile) {
    display: flex;
    min-height: calc(25 * var(--s));
  }

  .menu__list {
    padding-top: calc(40 * var(--s));
  }

  .menu__link {
    gap: calc(16 * var(--s));
    padding: calc(20 * var(--s)) 0;
  }

  .menu__number {
    width: calc(40 * var(--s));
    font-size: calc(18 * var(--s));
    line-height: calc(22 * var(--s));
  }

  .menu__title {
    font-size: calc(36 * var(--s));
    line-height: calc(46 * var(--s));
    letter-spacing: calc(-0.8 * var(--s));
  }

  .menu__arrow {
    width: calc(22 * var(--s));
    height: calc(22 * var(--s));
  }

  .menu__cta {
    margin-top: calc(32 * var(--s));
  }

  .menu__contact {
    padding-top: calc(32 * var(--s));
  }

  .menu .contact-list__note {
    display: block;
  }

  .menu__signature {
    display: block;
    margin-top: auto;
    padding-top: calc(40 * var(--s));
  }

  .menu[open] {
    animation-name: menu-drawer-in;
  }

  .menu.is-closing {
    animation-name: menu-drawer-out;
  }

  .menu[open] :is(.menu__bar, .menu__list li, .menu__cta, .menu__contact, .menu__signature) {
    animation-name: menu-item-slide;
  }

  @keyframes menu-drawer-in {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes menu-drawer-out {
    to {
      transform: translateX(100%);
    }
  }

  @keyframes menu-item-slide {
    from {
      opacity: 0;
      transform: translateX(calc(32 * var(--s)));
    }
  }
}

@media (min-width: 1200px) {
  .menu {
    display: none;
  }
}

/* Bloc « Restons en lien » (menu et pied de page) */
.footer-heading {
  padding-top: calc(2 * var(--s));
  font-weight: 600;
  font-size: max(12px, 10 * var(--s));
  line-height: 1.6;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
  padding-top: calc(23 * var(--s));
}

.contact-list__name {
  padding: calc(8 * var(--s)) 0 calc(4 * var(--s));
  font-weight: 500;
  font-size: max(13px, 12 * var(--s));
  line-height: 1.65;
}

.contact-list__link {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  padding: calc(4 * var(--s)) 0;
  font-size: max(13px, 12 * var(--s));
  line-height: 1.65;
}

.contact-list__link .icon {
  color: var(--ink);
}

.contact-list__link span,
.contact__link span {
  background: linear-gradient(currentcolor, currentcolor) left bottom / 0 1px no-repeat;
  transition: background-size var(--t) var(--ease-out);
}

.contact-list__link:hover span {
  background-size: 100% 1px;
}

.contact-list__note {
  padding-top: calc(21 * var(--s));
  font-size: max(13px, 11 * var(--s));
  line-height: 1.9;
  color: var(--muted);
}

.contact-list__note small {
  font-size: max(13px, 10 * var(--s));
  line-height: 1.9;
}

.signature {
  padding-top: calc(25 * var(--s));
  max-width: calc(250 * var(--s));
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(31 * var(--s));
  line-height: calc(34.1 * var(--s));
}

.languages-line {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--s));
  padding-top: calc(22 * var(--s));
  font-size: max(13px, 10 * var(--s));
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-ink);
  border-radius: 0 0 calc(28 * var(--s)) calc(28 * var(--s));
  color: var(--cream);
}

/* Disque décoratif en haut à gauche */
.hero::before {
  content: "";
  position: absolute;
  left: calc(-335 * var(--s));
  top: calc(-305 * var(--s));
  width: calc(516 * var(--s));
  height: calc(516 * var(--s));
  border-radius: 50%;
  background: var(--gradient-ink);
  opacity: 0.3;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(44 * var(--s)) 0 calc(72 * var(--s));
}

.hero__title {
  padding-top: calc(22 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(48 * var(--s));
  line-height: calc(49 * var(--s));
  letter-spacing: calc(-1.5 * var(--s));
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--yellow);
}

.hero__lead {
  max-width: calc(420 * var(--s));
  padding-top: calc(22 * var(--s));
  font-size: max(15px, 16 * var(--s));
  line-height: 1.625;
  color: #d0d9db;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--s));
  padding-top: calc(30 * var(--s));
}

.hero__cta {
  width: 100%;
  text-transform: uppercase;
}

.hero__languages {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  padding-top: calc(23 * var(--s));
  font-size: max(14px, 13 * var(--s));
  line-height: 1.269;
  color: #fff;
  white-space: nowrap;
}

.hero__languages .icon {
  color: #fff;
}

/* Composition photo + carte jaune.
   --u = 1 px de maquette ; l'ensemble se réduit proportionnellement sous la largeur de référence. */
.hero__visual {
  /* Place supplémentaire pour « Un pont entre les mots » quand le visuel est réduit
     (le texte garde 10 px minimum, soit environ 168 px de long) */
  --label-extra: max(0px, (172px - 194 * var(--s)) / 2);

  position: relative;
  flex: none;
  width: calc(350 * var(--s));
  height: calc(394 * var(--s));
  margin-top: calc(44 * var(--s));
  animation: zoom-in 1.3s var(--ease-out) 0.3s backwards;
}

.hero__frame {
  /* Le filet s'interrompt derrière « Un pont entre les mots » (zone --gap-top → --gap-bottom) */
  --gap-top: calc(105 * var(--s) - var(--label-extra));
  --gap-bottom: calc(299 * var(--s) + var(--label-extra));
  --gap-mask:
    linear-gradient(#000 0 0) left / calc(100% - (12 * var(--s))) 100% no-repeat,
    linear-gradient(#000 var(--gap-top), transparent var(--gap-top) var(--gap-bottom), #000 var(--gap-bottom)) right / calc(12 * var(--s)) 100% no-repeat;

  position: absolute;
  left: calc(23 * var(--s));
  top: calc(3 * var(--s));
  width: calc(308.7 * var(--s));
  height: calc(344.4 * var(--s));
  border: 1px solid rgb(255 255 255 / 0.5);
  mask: var(--gap-mask);
  border-radius: calc(175 * var(--s)) calc(175 * var(--s)) calc(7 * var(--s)) calc(7 * var(--s));
  translate: calc(var(--px, 0) * -5 * var(--s)) calc(var(--py, 0) * -5 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.hero__photo {
  position: absolute;
  left: calc(4.1 * var(--s));
  top: calc(15.3 * var(--s));
  width: calc(308.7 * var(--s));
  height: calc(344.4 * var(--s));
  object-fit: cover;
  border-radius: calc(168 * var(--s)) calc(168 * var(--s)) calc(7 * var(--s)) calc(7 * var(--s));
  translate: calc(var(--px, 0) * 6 * var(--s)) calc(var(--py, 0) * 6 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.hero__card {
  position: absolute;
  left: calc(-6 * var(--s));
  top: calc(277.1 * var(--s));
  width: calc(274.1 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
  padding: calc(19.2 * var(--s)) calc(22.4 * var(--s)) calc(18.4 * var(--s));
  overflow: hidden;
  border-radius: calc(4 * var(--s));
  background: var(--gradient-yellow);
  box-shadow: 0 calc(14 * var(--s)) calc(40 * var(--s)) rgb(8 19 30 / 0.13);
  color: var(--ink);
  translate: calc(var(--px, 0) * 12 * var(--s)) calc(var(--py, 0) * 10 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
  animation: rise-in 1s var(--ease-out) 0.9s backwards;
}

/* Carte du monde en pointillés (opacité 30 % incluse dans l'image) */
.hero__card::before {
  content: "";
  position: absolute;
  left: calc(147.2 * var(--s));
  top: calc(32.8 * var(--s));
  width: calc(104.8 * var(--s));
  height: calc(63.2 * var(--s));
  background: url("../assets/images/carte-monde-points.png") center / contain no-repeat;
}

.hero__card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero__card-logo {
  width: calc(44.3 * var(--s));
}

.hero__card-languages {
  font-weight: 600;
  font-size: max(10px, 9 * var(--s));
  line-height: 1.556;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hero__card-text {
  position: relative;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(21.6 * var(--s));
  line-height: 1.102;
}

/* Mention verticale posée sur le filet de l'arche */
.hero__vertical {
  position: absolute;
  left: calc(321.7 * var(--s));
  top: calc(108.2 * var(--s) - var(--label-extra));
  display: grid;
  place-items: center;
  width: calc(20 * var(--s));
  height: calc(194 * var(--s) + 2 * var(--label-extra));
  font-size: max(10px, 9 * var(--s));
  line-height: 1.656;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  translate: calc(var(--px, 0) * -5 * var(--s)) calc(var(--py, 0) * -5 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
  animation: fade-in 1.4s var(--ease-out) 1s backwards;
}

.hero__motto {
  position: absolute;
  right: 0;
  bottom: calc(25 * var(--s));
  font-size: max(11px, 9 * var(--s));
  line-height: 1.656;
  letter-spacing: 0.167em;
  text-transform: uppercase;
  color: #fff;
  animation: fade-in 1.4s var(--ease-out) 1s backwards;
}

.hero__motto span {
  color: var(--yellow);
}

@media (min-width: 768px) {
  .hero {
    border-radius: 0 0 calc(32 * var(--s)) calc(32 * var(--s));
  }

  .hero::before {
    width: calc(594 * var(--s));
    height: calc(594 * var(--s));
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(22 * var(--s));
    min-height: calc(565 * var(--s));
    padding: calc(64 * var(--s)) 0 calc(80 * var(--s));
  }

  .hero__text {
    flex: 0 1 calc(400 * var(--s));
    min-width: 0;
  }

  .hero__title {
    padding-top: calc(24 * var(--s));
    font-size: calc(60 * var(--s));
    line-height: 1.017;
    letter-spacing: calc(-1.9 * var(--s));
  }

  .hero__lead {
    max-width: calc(380 * var(--s));
    padding-top: calc(24 * var(--s));
    font-size: max(15px, 15 * var(--s));
    line-height: 1.853;
  }

  .hero__actions {
    gap: calc(14 * var(--s));
    padding-top: calc(32 * var(--s));
  }

  .hero__cta {
    width: auto;
    min-width: calc(318 * var(--s));
    max-width: 100%;
  }

  .hero__visual {
    width: calc(316 * var(--s));
    height: calc(372 * var(--s));
    margin-top: 0;
  }

  .hero__frame {
    --gap-top: calc(89 * var(--s) - var(--label-extra));
    --gap-bottom: calc(283 * var(--s) + var(--label-extra));

    left: calc(22 * var(--s));
    top: calc(2 * var(--s));
    width: calc(291.1 * var(--s));
    height: calc(324.7 * var(--s));
    border-radius: calc(165 * var(--s)) calc(165 * var(--s)) calc(6.6 * var(--s)) calc(6.6 * var(--s));
  }

  .hero__photo {
    left: calc(4.2 * var(--s));
    top: calc(13.6 * var(--s));
    width: calc(291.1 * var(--s));
    height: calc(324.7 * var(--s));
    border-radius: calc(158.4 * var(--s)) calc(158.4 * var(--s)) calc(6.6 * var(--s)) calc(6.6 * var(--s));
  }

  .hero__card {
    left: calc(-13.8 * var(--s));
    top: calc(260.2 * var(--s));
  }

  .hero__vertical {
    left: calc(303.1 * var(--s));
    top: calc(91.4 * var(--s) - var(--label-extra));
  }

  .hero__motto {
    bottom: calc(21 * var(--s));
  }
}

@media (min-width: 1200px) {
  .hero::before {
    left: calc(var(--content-left) - (335 * var(--s)));
  }

  .hero__inner {
    min-height: calc(640 * var(--s));
    padding: calc(52 * var(--s)) 0 calc(64 * var(--s));
  }

  .hero__text {
    flex-basis: calc(644.6 * var(--s));
    padding-block: calc(10 * var(--s));
  }

  .hero__title {
    padding-top: calc(27 * var(--s));
    font-size: calc(87.84 * var(--s));
    line-height: 1.02;
    letter-spacing: calc(-2.8 * var(--s));
  }

  .hero__lead {
    max-width: calc(420 * var(--s));
    padding-top: calc(26 * var(--s));
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: calc(25 * var(--s));
    padding-top: calc(34 * var(--s));
  }

  .hero__visual {
    width: calc(465 * var(--s));
    height: calc(517 * var(--s));
  }

  .hero__frame {
    --gap-top: calc(249 * var(--s) - var(--label-extra));
    --gap-bottom: calc(443 * var(--s) + var(--label-extra));

    left: calc(24 * var(--s));
    top: calc(-15 * var(--s));
    width: calc(441 * var(--s));
    height: calc(492 * var(--s));
    border-radius: calc(250 * var(--s)) calc(250 * var(--s)) calc(10 * var(--s)) calc(10 * var(--s));
  }

  .hero__photo {
    left: calc(-3 * var(--s));
    top: calc(2.5 * var(--s));
    width: calc(441 * var(--s));
    height: calc(492 * var(--s));
    border-radius: calc(240 * var(--s)) calc(240 * var(--s)) calc(10 * var(--s)) calc(10 * var(--s));
  }

  .hero__card {
    left: calc(-30 * var(--s));
    top: calc(375.5 * var(--s));
    width: calc(342.6 * var(--s));
    gap: calc(10 * var(--s));
    padding: calc(24 * var(--s)) calc(28 * var(--s)) calc(23 * var(--s));
    border-radius: calc(5 * var(--s));
  }

  .hero__card::before {
    left: calc(184 * var(--s));
    top: calc(41 * var(--s));
    width: calc(131 * var(--s));
    height: calc(79 * var(--s));
  }

  .hero__card-logo {
    width: calc(55.4 * var(--s));
  }

  .hero__card-languages {
    font-size: max(11px, 10 * var(--s));
    line-height: 1.65;
    letter-spacing: 0.2em;
  }

  .hero__card-text {
    font-size: calc(27 * var(--s));
    line-height: 1.1;
  }

  .hero__vertical {
    left: calc(457 * var(--s));
    top: calc(234.5 * var(--s) - var(--label-extra));
  }

  .hero__motto {
    right: calc(-23 * var(--s));
    bottom: calc(20 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Repères chiffrés
   -------------------------------------------------------------------------- */
.markers__list {
  padding: calc(24 * var(--s)) var(--gutter) calc(8 * var(--s));
}

.marker {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  padding: calc(18 * var(--s)) 0;
}

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

.marker__icon {
  flex: none;
  width: calc(66 * var(--s));
  height: calc(54 * var(--s));
  object-fit: contain;
}

.marker__icon--experience { padding: calc(1.5 * var(--s)) calc(12.3 * var(--s)); }
.marker__icon--languages { padding: calc(1.5 * var(--s)) calc(0.8 * var(--s)); }
.marker__icon--contact { padding: calc(1.5 * var(--s)) calc(3.9 * var(--s)); }

.marker__text {
  display: flex;
  flex-direction: column;
}

/* Les chiffres elzéviriens de Cormorant sont bas dans la ligne : on les remonte sans modifier la mise en page */
.marker__number {
  position: relative;
  top: calc(-9 * var(--s));
  margin-bottom: calc(5 * var(--s));
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: calc(42.6 * var(--s));
  line-height: calc(32 * var(--s));
}

.marker:nth-child(3) .marker__number {
  top: calc(-2 * var(--s));
  line-height: calc(18 * var(--s));
}

.marker__label {
  font-weight: 500;
  font-size: max(14px, 14 * var(--s));
  line-height: 1.286;
  text-transform: uppercase;
}

.marker__detail {
  font-size: max(14px, 13 * var(--s));
  line-height: 1.385;
  color: var(--muted);
}

@media (min-width: 768px) {
  /* Trois repères séparés par deux filets centrés dans l'espace restant */
  .markers__list {
    display: grid;
    grid-template-columns: auto minmax(calc(12 * var(--s)), 1fr) auto minmax(calc(12 * var(--s)), 1fr) auto;
    align-items: center;
    padding: calc(34 * var(--s)) var(--gutter);
  }

  .markers__list::before,
  .markers__list::after {
    content: "";
    grid-row: 1;
    justify-self: center;
    width: 1px;
    height: calc(45 * var(--s));
    background: var(--line);
  }

  .markers__list::before { grid-column: 2; }
  .markers__list::after { grid-column: 4; }
  .marker:nth-child(1) { grid-column: 1; }
  .marker:nth-child(2) { grid-column: 3; }
  .marker:nth-child(3) { grid-column: 5; }

  .marker {
    grid-row: 1;
    gap: calc(12 * var(--s));
    padding: 0;
  }

  .marker:not(:last-child) {
    border-bottom: 0;
  }

  .marker__icon {
    width: auto;
    height: calc(44 * var(--s));
    padding: 0;
  }

  .marker__number {
    top: calc(-9 * var(--s));
    margin-bottom: calc(4 * var(--s));
    font-size: calc(41.2 * var(--s));
    line-height: calc(31 * var(--s));
  }

  .marker:nth-child(3) .marker__number {
    top: calc(-2 * var(--s));
    line-height: calc(17.5 * var(--s));
  }

  .marker__label {
    font-size: max(12px, 12.5 * var(--s));
    line-height: 1.28;
    white-space: nowrap;
  }

  .marker__detail {
    font-size: max(13px, 12 * var(--s));
    line-height: 1.333;
    white-space: nowrap;
  }
}

/* Tablette plus étroite que la maquette : pictogrammes et espacements réduits
   pour que les repères restent sur une ligne, à bonne distance des filets */
@media (min-width: 768px) and (max-width: 833.98px) {
  .markers__list {
    grid-template-columns: auto minmax(calc(20 * var(--s)), 1fr) auto minmax(calc(20 * var(--s)), 1fr) auto;
  }

  .marker {
    gap: calc(8 * var(--s));
  }

  .marker__icon {
    height: calc(38 * var(--s));
  }
}

@media (min-width: 1200px) {
  .markers__list {
    max-width: calc(1440 * var(--s));
    min-height: calc(147 * var(--s));
    margin-inline: auto;
    padding: 0 calc(60 * var(--s));
  }

  .marker {
    gap: calc(20 * var(--s));
  }

  .marker__icon {
    height: calc(68.8 * var(--s));
  }

  .marker__number {
    top: calc(-11 * var(--s));
    margin-bottom: calc(5 * var(--s));
    font-size: calc(50.2 * var(--s));
    line-height: calc(38 * var(--s));
  }

  .marker:nth-child(3) .marker__number {
    top: calc(-3 * var(--s));
    line-height: calc(21.4 * var(--s));
  }

  .marker__label {
    font-size: max(15px, 15 * var(--s));
    line-height: 1.207;
  }

  .marker__detail {
    font-size: max(14px, 13 * var(--s));
    line-height: 1.308;
  }
}

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(38.1 * var(--s));
  line-height: calc(41 * var(--s));
  letter-spacing: calc(-1.2 * var(--s));
}

@media (min-width: 768px) {
  .section-title {
    font-size: calc(46 * var(--s));
    line-height: calc(50 * var(--s));
    letter-spacing: calc(-1.4 * var(--s));
  }
}

@media (min-width: 1200px) {
  .section-title {
    font-size: calc(60.5 * var(--s));
    line-height: 1.08;
    letter-spacing: calc(-1.9 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Vos besoins
   -------------------------------------------------------------------------- */
.needs {
  padding: calc(72 * var(--s)) 0 calc(64 * var(--s));
}

.needs__title {
  padding-top: calc(22 * var(--s));
}

.needs__intro {
  padding-top: calc(16 * var(--s));
  font-size: max(15px, 14 * var(--s));
  line-height: 1.643;
  color: var(--muted);
}

.cards {
  display: grid;
  gap: calc(16 * var(--s));
  padding-top: calc(32 * var(--s));
}

.card {
  --arc-left: calc(-29.6 * var(--s));
  --arc-top: calc(21.1 * var(--s));
  --arc-width: calc(322.1 * var(--s));
  --arc-height: calc(282.4 * var(--s));

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(28 * var(--s)) calc(26 * var(--s)) calc(24 * var(--s));
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: calc(6 * var(--s));
  background:
    url("../assets/images/arc-carte.svg") var(--arc-left) var(--arc-top) / var(--arc-width) var(--arc-height) no-repeat,
    #fff;
  box-shadow: 0 calc(4 * var(--s)) calc(14.5 * var(--s)) rgb(0 0 0 / 0.08);
  color: var(--ink);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}

/* État survolé : fond encre et arc jaune, en fondu */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../assets/images/arc-carte-survol.svg") var(--arc-left) var(--arc-top) / var(--arc-width) var(--arc-height) no-repeat,
    var(--gradient-ink);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(32 * var(--s));
}

.card__icon {
  display: grid;
  place-items: center;
  width: calc(48 * var(--s));
  height: calc(48 * var(--s));
  border: 1px solid #e4ece7;
  border-radius: 50%;
  background: #182f3b;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.card__number {
  font-weight: 600;
  font-size: calc(38 * var(--s));
  line-height: calc(16 * var(--s));
}

.card__title {
  display: block;
  padding-bottom: calc(14 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(30 * var(--s));
  line-height: calc(33 * var(--s));
  letter-spacing: calc(-0.6 * var(--s));
}

.card__text {
  display: block;
  font-size: max(15px, 14 * var(--s));
  line-height: 1.571;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}

.card__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: calc(27 * var(--s));
  font-weight: 600;
  font-size: max(13px, 10 * var(--s));
  line-height: 1.65;
}

.card__number,
.card__title,
.card__more {
  transition: color var(--t) var(--ease);
}

.card:hover::before,
.card:focus-visible::before,
.card:active::before {
  opacity: 1;
}

.card:hover,
.card:focus-visible,
.card:active {
  color: var(--cream);
  transform: translateY(calc(-6 * var(--s)));
  box-shadow: 0 calc(18 * var(--s)) calc(40 * var(--s)) rgb(0 16 24 / 0.18);
}

.card:hover .card__text,
.card:focus-visible .card__text,
.card:active .card__text {
  color: var(--line);
}

.card:hover .card__icon,
.card:focus-visible .card__icon,
.card:active .card__icon {
  border-color: var(--yellow);
  background-color: var(--ink);
}

.needs__note {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--s));
  padding-top: calc(24 * var(--s));
  font-size: max(14px, 13 * var(--s));
  line-height: 1.462;
  color: var(--muted-light);
}

.needs__note .icon {
  color: var(--muted-light);
}

@media (min-width: 768px) {
  .needs {
    padding: calc(88 * var(--s)) 0 calc(84 * var(--s));
  }

  .needs .kicker {
    min-height: calc(16.5 * var(--s));
  }

  .needs__title {
    padding-top: calc(25 * var(--s));
  }

  .needs__intro {
    max-width: calc(430 * var(--s));
    padding-top: calc(18 * var(--s));
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--s));
    padding-top: calc(40 * var(--s));
  }

  .card {
    --arc-left: calc(-19.9 * var(--s));
    --arc-top: calc(14.2 * var(--s));
    --arc-width: calc(216.6 * var(--s));
    --arc-height: calc(189.9 * var(--s));

    min-height: calc(359 * var(--s));
    padding: calc(24 * var(--s)) calc(20 * var(--s)) calc(22 * var(--s));
  }

  .card__top {
    padding-bottom: calc(30 * var(--s));
  }

  .card__number {
    font-size: calc(34 * var(--s));
    line-height: calc(15 * var(--s));
  }

  .card__title {
    padding-bottom: calc(12 * var(--s));
    font-size: calc(26 * var(--s));
    line-height: calc(29 * var(--s));
    letter-spacing: calc(-0.5 * var(--s));
  }

  .card__text {
    font-size: max(15px, 12.5 * var(--s));
    line-height: 1.68;
  }

  .needs__note {
    align-items: center;
    line-height: max(18.1 * var(--s), 1.2em);
  }
}

@media (min-width: 1200px) {
  .needs {
    padding: calc(90 * var(--s)) 0;
  }

  .needs__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(60 * var(--s));
  }

  .needs__intro {
    flex: none;
    width: calc(290 * var(--s));
    padding: 0 0 calc(5 * var(--s));
    font-size: max(15px, 13 * var(--s));
    line-height: 1.8;
  }

  .cards {
    gap: calc(19 * var(--s));
    padding-top: calc(44 * var(--s));
  }

  .card {
    --arc-left: calc(-35 * var(--s));
    --arc-top: calc(24.5 * var(--s));
    --arc-width: calc(381.5 * var(--s));
    --arc-height: calc(334 * var(--s));

    min-height: calc(343.8 * var(--s));
    padding: calc(28 * var(--s)) calc(30 * var(--s)) calc(25 * var(--s));
  }

  .card__top {
    padding-bottom: calc(39 * var(--s));
  }

  .card__number {
    font-size: calc(40 * var(--s));
    line-height: calc(16.5 * var(--s));
  }

  .card__title {
    max-width: calc(280 * var(--s));
    padding-bottom: calc(16 * var(--s));
    font-size: calc(33 * var(--s));
    line-height: calc(35.64 * var(--s));
    letter-spacing: calc(-0.6 * var(--s));
  }

  .card__text {
    max-width: calc(290 * var(--s));
    font-size: max(15px, 12 * var(--s));
    line-height: 1.85;
  }
}

/* --------------------------------------------------------------------------
   Notre conviction
   -------------------------------------------------------------------------- */
.conviction__card {
  position: relative;
  overflow: hidden;
  padding: calc(40 * var(--s)) calc(24 * var(--s)) calc(48 * var(--s));
  border-radius: calc(8 * var(--s));

  /* Aqueduc calé sur le bord droit, comme dans la maquette */
  background:
    url("../assets/images/illustration-aqueduc.svg") right calc((-119 + var(--px, 0) * 10) * var(--s)) top calc((11.2 + var(--py, 0) * 5) * var(--s)) / calc(2123.2 * var(--s)) calc(328.7 * var(--s)) no-repeat,
    var(--gradient-yellow);
  box-shadow: 0 calc(14 * var(--s)) calc(40 * var(--s)) rgb(0 0 0 / 0.13);
  isolation: isolate;
  transition: background-position var(--t-slow) var(--ease-out);
}

.conviction .kicker {
  font-size: max(14px, 14 * var(--s));
  line-height: 1.179;
  letter-spacing: 0.164em;
}

.conviction__title {
  padding-top: calc(20 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(34.1 * var(--s));
  line-height: calc(37 * var(--s));
  letter-spacing: calc(-0.7 * var(--s));
}

.conviction__text {
  padding-top: calc(20 * var(--s));
  font-weight: 500;
  font-size: max(15px, 15 * var(--s));
  line-height: 1.533;
  color: #414b3b;
}

.conviction__icon {
  position: absolute;
  top: calc(30 * var(--s));
  right: calc(24 * var(--s));
  width: calc(44 * var(--s));
  height: calc(44 * var(--s));
  color: #152a38;
  translate: calc(var(--px, 0) * 6 * var(--s)) calc(var(--py, 0) * 6 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

@media (min-width: 768px) {
  .conviction__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(28 * var(--s));
    min-height: calc(329 * var(--s));
    padding: calc(56 * var(--s)) calc(44 * var(--s)) calc(60 * var(--s)) calc(48 * var(--s));
    background-position: right calc((-131 + var(--px, 0) * 10) * var(--s)) top calc((20 + var(--py, 0) * 5) * var(--s)), 0 0;
    background-size: calc(2335.6 * var(--s)) calc(361.6 * var(--s)), auto;
  }

  .conviction__title {
    font-size: calc(46.4 * var(--s));
    line-height: calc(50 * var(--s));
    letter-spacing: -1px;
  }

  .conviction__text {
    max-width: calc(560 * var(--s));
    font-size: max(15px, 16 * var(--s));
    line-height: 1.5;
  }

  .conviction__icon {
    position: relative;
    top: auto;
    right: auto;
    width: calc(56 * var(--s));
    height: calc(56 * var(--s));
  }
}

@media (min-width: 1200px) {
  .conviction__card {
    gap: calc(35 * var(--s));
    min-height: calc(356 * var(--s));
    padding: calc(73 * var(--s)) calc(100.8 * var(--s));
    background-position: right calc((-148 + var(--px, 0) * 10) * var(--s)) top calc((-0.5 + var(--py, 0) * 5) * var(--s)), 0 0;
    background-size: calc(2655 * var(--s)) calc(411 * var(--s)), auto;
  }

  .conviction .kicker {
    min-height: calc(16.5 * var(--s));
  }

  .conviction__title {
    font-size: calc(61.9 * var(--s));
    line-height: 1.08;
    letter-spacing: calc(-1.3 * var(--s));
  }

  .conviction__text {
    max-width: none;
    line-height: max(19.8 * var(--s), 1.2em);
  }

  .conviction__icon {
    width: calc(68 * var(--s));
    height: calc(68 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Notre approche
   -------------------------------------------------------------------------- */
.approach {
  position: relative;
  overflow: hidden;
  padding: calc(84 * var(--s)) 0 calc(72 * var(--s));
}

.approach::before {
  content: "";
  position: absolute;
  left: calc(-62 * var(--s));
  top: calc(40 * var(--s));
  width: calc(376 * var(--s));
  height: calc(309.3 * var(--s));
  background: url("../assets/images/arc-approche.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.approach__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--s));
}

.approach__title {
  padding-top: calc(22 * var(--s));
}

.approach__text {
  padding: calc(20 * var(--s)) 0 calc(22 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.667;
  color: var(--muted);
}

.step {
  display: flex;
  gap: calc(14 * var(--s));
  padding: calc(22 * var(--s)) 0 calc(26 * var(--s));
  border-top: 1px solid var(--line);
}

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

.step__number {
  flex: none;
  width: calc(36 * var(--s));
  padding-top: calc(4 * var(--s));
  font-weight: 500;
  font-size: calc(20 * var(--s));
  line-height: calc(26 * var(--s));
  color: #657b79;
}

.step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(26 * var(--s));
  line-height: calc(29 * var(--s));
  letter-spacing: calc(-0.5 * var(--s));
}

.step__text {
  padding-top: calc(11 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.533;
  color: var(--muted);
}

@media (min-width: 768px) {
  .approach {
    padding: calc(104 * var(--s)) 0 calc(96 * var(--s));
  }

  .approach::before {
    left: calc(-77 * var(--s));
    top: calc(30 * var(--s));
    width: calc(488.8 * var(--s));
    height: calc(402.1 * var(--s));
  }

  .approach__inner {
    gap: calc(52 * var(--s));
  }

  .approach__title {
    padding-top: calc(25 * var(--s));
  }

  .approach__text {
    max-width: calc(520 * var(--s));
    padding: calc(26 * var(--s)) 0;
    font-size: max(15px, 16 * var(--s));
    line-height: 1.663;
  }

  .step {
    gap: calc(24 * var(--s));
    padding: calc(25 * var(--s)) 0 calc(31 * var(--s));
  }

  .step__number {
    width: calc(48 * var(--s));
    font-size: calc(24 * var(--s));
    line-height: calc(31 * var(--s));
  }

  .step__title {
    font-size: calc(30 * var(--s));
    line-height: calc(32.4 * var(--s));
    letter-spacing: calc(-0.6 * var(--s));
  }

  .step__text {
    font-size: max(15px, 16 * var(--s));
    line-height: 1.387;
  }
}

@media (min-width: 1200px) {
  .approach {
    padding: calc(112 * var(--s)) 0;
  }

  .approach::before {
    left: calc(var(--content-left) - (199.5 * var(--s)));
    top: calc(50.5 * var(--s));
    width: calc(752.5 * var(--s));
    height: calc(619 * var(--s));
  }

  .approach__inner {
    display: grid;
    grid-template-columns: minmax(0, calc(570 * var(--s))) minmax(0, calc(600 * var(--s)));
    justify-content: space-between;
    align-items: start;
    gap: calc(40 * var(--s));
  }

  .approach__intro {
    align-self: center;
  }

  .approach__text {
    max-width: calc(570 * var(--s));
  }

  .steps {
    padding-top: calc(10 * var(--s));
  }

  .step {
    gap: calc(24 * var(--s));
  }

  .step__number {
    width: calc(45 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Dorothée
   -------------------------------------------------------------------------- */
.about {
  overflow: hidden;
  padding: calc(104 * var(--s)) var(--gutter) calc(80 * var(--s));
  background: var(--sage);
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--s));
}

/* Composition portrait : --u = 1 px de maquette, réduit sous la largeur de référence */
.about__visual {
  position: relative;
  flex: none;
  width: calc(350 * var(--s));
  height: calc(422.1 * var(--s));
}

/* Arche dégradée en arrière-plan */
.about__visual::before {
  content: "";
  position: absolute;
  left: calc(-1.8 * var(--s));
  top: calc(-47.7 * var(--s));
  width: calc(351.5 * var(--s));
  height: calc(397.4 * var(--s));
  border-radius: calc(175.75 * var(--s)) calc(175.75 * var(--s)) 0 0;
  background: linear-gradient(90deg, #d8e0db, var(--sage));
  translate: calc(var(--px, 0) * -4 * var(--s)) calc(var(--py, 0) * -4 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.about__frame {
  position: absolute;
  left: calc(15 * var(--s));
  top: 0;
  width: calc(295.6 * var(--s));
  height: calc(334.7 * var(--s));
  border: calc(1.34 * var(--s)) solid #9aaea4;
  border-radius: calc(149.9 * var(--s)) calc(149.9 * var(--s)) calc(5 * var(--s)) calc(5 * var(--s));
  translate: calc(var(--px, 0) * -7 * var(--s)) calc(var(--py, 0) * -7 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.about__photo {
  position: absolute;
  left: 0;
  top: calc(16.7 * var(--s));
  width: calc(291.4 * var(--s));
  height: calc(333 * var(--s));
  object-fit: cover;
  border-radius: calc(141.5 * var(--s)) calc(141.5 * var(--s)) calc(5 * var(--s)) calc(5 * var(--s));
  translate: calc(var(--px, 0) * 5 * var(--s)) calc(var(--py, 0) * 5 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.about__card {
  position: absolute;
  left: calc(125.2 * var(--s));
  top: calc(249.8 * var(--s));
  width: calc(224.8 * var(--s));
  height: calc(172.3 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(10.7 * var(--s));
  padding: calc(25.8 * var(--s)) calc(34.4 * var(--s));
  border-radius: calc(5.4 * var(--s));
  background: var(--gradient-ink);
  color: #fff;
  translate: calc(var(--px, 0) * 12 * var(--s)) calc(var(--py, 0) * 10 * var(--s));
  transition: translate var(--t-slow) var(--ease-out);
}

.about__card-number {
  height: calc(61.2 * var(--s));
  font-family: var(--font-figures);
  font-weight: 500;
  font-size: calc(61.2 * var(--s));
  line-height: 1;
  color: var(--yellow);
}

.about__card-text {
  white-space: nowrap;
  padding-top: calc(10.7 * var(--s));
  border-top: calc(0.67 * var(--s)) solid;
  border-image: linear-gradient(90deg, rgb(228 236 231 / 0.4), rgb(2 19 28 / 0.4)) 1;
  font-size: max(13px, 11.8 * var(--s));
  line-height: 1.6;
}

.about__title {
  padding-top: calc(25 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(43.9 * var(--s));
  line-height: calc(40 * var(--s));
  letter-spacing: calc(-1.3 * var(--s));
}

.about__lead {
  padding-top: calc(18 * var(--s));
  font-weight: 500;
  font-size: max(15px, 16 * var(--s));
  line-height: 1.375;
  color: #3e5d56;
}

.about__text {
  padding-top: calc(26 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.6;
  color: var(--muted);
}

.about__text--second {
  padding-top: calc(17 * var(--s));
}

.about__details {
  margin-top: calc(26 * var(--s));
  border-top: 1px solid #bbccc2;
}

.about__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--s));
  padding: calc(17 * var(--s)) 0;
  font-size: max(14px, 13 * var(--s));
  line-height: 1.523;
  cursor: pointer;
  list-style: none;
}

.about__summary::-webkit-details-marker {
  display: none;
}

.about__chevron {
  color: var(--ink);
  transition: transform var(--t) var(--ease-out);
}

.about__details[open]:not(.is-closing) .about__chevron {
  transform: rotate(180deg);
}

.about__degrees {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--s));
  padding: calc(5 * var(--s)) 0 calc(20 * var(--s)) calc(17 * var(--s));
  font-size: max(15px, 11 * var(--s));
  line-height: 1.855;
  color: #4d6761;
}

.about__degrees li {
  position: relative;
}

.about__degrees li::before {
  content: "•";
  position: absolute;
  left: calc(-11 * var(--s));
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--s));
  padding-top: calc(22 * var(--s));
}

.tag {
  padding: calc(5 * var(--s)) calc(13 * var(--s));
  border-radius: calc(30 * var(--s));
  background: var(--gradient-ink);
  font-size: max(14px, 13 * var(--s));
  line-height: 1.269;
  color: #fff;
}

@media (min-width: 768px) {
  .about {
    padding: calc(96 * var(--s)) var(--gutter);
  }

  /* Alignement haut : l'ouverture du « double parcours » ne fait pas bouger le portrait */
  .about__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(34 * var(--s));
    max-width: calc(738 * var(--s));
    margin-inline: auto;
  }

  .about__visual {
    width: calc(315.8 * var(--s));
    height: calc(397.9 * var(--s));
    margin-top: calc(63.3 * var(--s));
  }

  .about__visual::before {
    left: calc(-1.7 * var(--s));
    top: calc(-43.1 * var(--s));
    width: calc(317.5 * var(--s));
    height: calc(359 * var(--s));
    border-radius: calc(158.75 * var(--s)) calc(158.75 * var(--s)) 0 0;
  }

  .about__frame {
    left: calc(13.5 * var(--s));
    width: calc(267 * var(--s));
    height: calc(302.3 * var(--s));
    border-radius: calc(135.4 * var(--s)) calc(135.4 * var(--s)) calc(4.5 * var(--s)) calc(4.5 * var(--s));
  }

  .about__photo {
    top: calc(15 * var(--s));
    width: calc(263.2 * var(--s));
    height: calc(300.8 * var(--s));
    border-radius: calc(127.8 * var(--s)) calc(127.8 * var(--s)) calc(4.5 * var(--s)) calc(4.5 * var(--s));
  }

  .about__card {
    left: calc(91 * var(--s));
    top: calc(225.6 * var(--s));
  }

  .about__content {
    flex: 1;
    min-width: 0;
  }

  .about__title {
    font-size: calc(50 * var(--s));
    line-height: calc(45 * var(--s));
    letter-spacing: calc(-1.5 * var(--s));
  }

  .about__lead {
    line-height: max(19.8 * var(--s), 1.2em);
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .about {
    padding: calc(90 * var(--s)) max((40 * var(--s)), (100% - (1334 * var(--s))) / 2);
  }

  .about__inner {
    justify-content: space-between;
    max-width: calc(1334 * var(--s));
    gap: calc(40 * var(--s));
  }

  .about__visual {
    width: calc(564 * var(--s));
    height: calc(619.9 * var(--s));
    margin-top: calc(22.55 * var(--s));
  }

  .about__visual::before {
    left: calc(-3 * var(--s));
    top: calc(-77.3 * var(--s));
    width: calc(567 * var(--s));
    height: calc(641 * var(--s));
    border-radius: calc(283.5 * var(--s)) calc(283.5 * var(--s)) 0 0;
  }

  .about__frame {
    left: calc(24.2 * var(--s));
    width: calc(476.7 * var(--s));
    height: calc(539.8 * var(--s));
    border-radius: calc(241.7 * var(--s)) calc(241.7 * var(--s)) calc(8.06 * var(--s)) calc(8.06 * var(--s));
  }

  .about__photo {
    top: calc(26.9 * var(--s));
    width: calc(470 * var(--s));
    height: calc(537.1 * var(--s));
    border-radius: calc(228.3 * var(--s)) calc(228.3 * var(--s)) calc(8.06 * var(--s)) calc(8.06 * var(--s));
  }

  .about__card {
    left: calc(283.3 * var(--s));
    top: calc(404 * var(--s));
    width: calc(281 * var(--s));
    height: calc(215.9 * var(--s));
    gap: calc(13.4 * var(--s));
    padding: calc(32.2 * var(--s)) calc(43 * var(--s));
    border-radius: calc(6.7 * var(--s));
  }

  .about__card-number {
    height: calc(76.5 * var(--s));
    font-size: calc(76.5 * var(--s));
  }

  .about__card-text {
    padding-top: calc(13.4 * var(--s));
    font-size: max(15px, 14.8 * var(--s));
  }

  .about__content {
    flex: 0 1 calc(649 * var(--s));
    padding-top: calc(75 * var(--s));
  }

  .about .kicker {
    min-height: calc(16.5 * var(--s));
  }

  .about__title {
    padding-bottom: calc(22 * var(--s));
    font-size: calc(61 * var(--s));
    line-height: 0.9;
    letter-spacing: calc(-1.8 * var(--s));
  }

  .about__text {
    font-size: max(15px, 16 * var(--s));
    line-height: 1.544;
  }
}

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */
.faq {
  padding: calc(80 * var(--s)) 0 calc(88 * var(--s));
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--s));
}

.faq__title {
  padding-top: calc(22 * var(--s));
  letter-spacing: calc(-1.3 * var(--s));
}

.faq__text {
  padding-top: calc(20 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.6;
  color: var(--muted);
}

.faq-item {
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-item[open] {
  padding-bottom: calc(10 * var(--s));
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--s));
  padding: calc(24 * var(--s)) 0;
  font-weight: 500;
  font-size: max(15px, 16 * var(--s));
  line-height: 1.375;
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

/* Icône + qui devient − à l'ouverture */
.plus-icon {
  position: relative;
  flex: none;
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
}

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  left: calc(4.17 * var(--s));
  top: calc(9.25 * var(--s));
  width: calc(11.67 * var(--s));
  height: calc(1.5 * var(--s));
  border-radius: 1px;
  background: #152a38;
  transition: transform var(--t) var(--ease-out);
}

.plus-icon::after {
  transform: rotate(90deg);
}

.faq-item[open]:not(.is-closing) .plus-icon::after {
  transform: rotate(0deg);
}

.faq-item__answer {
  padding: 0 0 calc(24 * var(--s));
  font-size: max(15px, 14 * var(--s));
  line-height: 1.643;
  color: var(--muted);
}

@media (min-width: 768px) {
  .faq {
    padding: calc(100 * var(--s)) 0 calc(104 * var(--s));
  }

  .faq__inner {
    gap: calc(40 * var(--s));
  }

  .faq__title {
    padding-top: calc(25 * var(--s));
    font-size: calc(45.9 * var(--s));
    letter-spacing: calc(-1.6 * var(--s));
  }

  .faq__text {
    max-width: calc(520 * var(--s));
    padding-top: calc(24 * var(--s));
    font-size: max(15px, 16 * var(--s));
    line-height: 1.544;
  }

  .faq-item__question {
    gap: calc(25 * var(--s));
    font-size: calc(18 * var(--s));
    line-height: max(22.4 * var(--s), 1.2em);
  }

  .faq-item__answer {
    padding-right: calc(35 * var(--s));
    font-size: max(15px, 13 * var(--s));
    line-height: 1.9;
  }
}

@media (min-width: 1200px) {
  .faq {
    padding: calc(112 * var(--s)) 0;
  }

  .faq__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  .faq__intro {
    flex: 0 0 45.77%;
    padding-right: calc(100 * var(--s));
  }

  .faq .kicker {
    min-height: calc(16.5 * var(--s));
  }

  .faq__title {
    font-size: calc(56 * var(--s));
    line-height: 1.08;
    letter-spacing: calc(-1.9 * var(--s));
  }

  .faq__list {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  overflow: hidden;
  padding: calc(64 * var(--s)) 0 calc(48 * var(--s));
  border-radius: calc(28 * var(--s)) calc(28 * var(--s)) 0 0;
  background: var(--gradient-ink);
  color: var(--cream);
}

/* Grande arche décorative au filet jaune */
.contact__arch {
  position: absolute;
  left: calc(var(--gutter) - (44 * var(--s)));
  top: calc(-10.3 * var(--s));
  width: calc(384 * var(--s));
  height: calc(531 * var(--s));
  border: calc(2 * var(--s)) solid transparent;
  border-radius: 0 0 calc(192 * var(--s)) calc(192 * var(--s));

  /* Seul le contour est visible : le dégradé animé du fond reste apparent dans l'arche */
  background: linear-gradient(180deg, var(--yellow), #1d3948) border-box;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}

.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--s));
}

.contact__intro {
  padding-top: calc(16 * var(--s));
}

.contact__title {
  padding: calc(20 * var(--s)) 0 calc(26 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(46.2 * var(--s));
  line-height: calc(36 * var(--s));
  letter-spacing: calc(-1.3 * var(--s));
}

.contact__title em {
  color: var(--yellow);
}

.contact__text {
  max-width: calc(305 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.667;
  color: #c2d0d1;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--s));
  padding-top: calc(28 * var(--s));
}

.contact__link {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  width: fit-content;
  font-size: max(15px, 15 * var(--s));
  line-height: 1.433;
}

.contact__link .icon {
  color: var(--yellow);
}

.contact__link:hover span {
  background-size: 100% 1px;
}

.contact__languages {
  padding-top: calc(25 * var(--s));
  font-size: max(14px, 13 * var(--s));
  line-height: 1.923;
  color: #a9bec1;
}

.contact-form {
  padding: calc(26 * var(--s)) calc(22 * var(--s)) calc(24 * var(--s));
  border-radius: calc(7 * var(--s));
  background: var(--cream);
  color: var(--ink);
}

.contact-form__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(28 * var(--s));
  line-height: calc(30 * var(--s));
  letter-spacing: calc(-0.6 * var(--s));
}

.contact-form__intro {
  padding-top: calc(8 * var(--s));
  font-size: max(15px, 15 * var(--s));
  line-height: 1.4;
  color: var(--muted);
}

.contact-form__fields {
  display: grid;
  gap: calc(16 * var(--s));
  padding-top: calc(20 * var(--s));
}

.field {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--s));
  min-width: 0;
}

.field__label {
  font-weight: 600;
  font-size: max(14px, 13 * var(--s));
  line-height: 1.269;
}

.field__input {
  width: 100%;
  height: calc(48 * var(--s));
  padding: calc(12 * var(--s)) calc(11 * var(--s));
  border: 1px solid var(--field-border);
  border-radius: calc(3 * var(--s));
  background-color: #fff;

  /* 16 px minimum sur mobile pour éviter le zoom automatique d'iOS */
  font-size: max(16px, 16 * var(--s));
  line-height: calc(20 * var(--s));
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field__input::placeholder {
  color: #798682;
  opacity: 1;
}

.field__input:hover {
  border-color: #a9b5b0;
}

.field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.field__select {
  height: calc(44 * var(--s));
  padding-right: calc(34 * var(--s));
  appearance: none;
  background: #fff url("../assets/icons/chevron-select.svg") right calc(9 * var(--s)) center / calc(10 * var(--s)) calc(6 * var(--s)) no-repeat;
  cursor: pointer;
}

.field__textarea {
  height: calc(120 * var(--s));
  min-height: calc(90 * var(--s));
  resize: vertical;
}

.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  font-size: max(13px, 12 * var(--s));
  line-height: 1.333;
  color: var(--error);
}

/* Champ piège invisible pour les visiteurs */
.field-trap {
  position: absolute;
  left: calc(-10000 * var(--s));
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__privacy {
  padding: calc(17 * var(--s)) 0;
  font-size: max(15px, 11 * var(--s));
  line-height: 1.545;
  color: var(--muted);
}

.contact-form__privacy a {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--s));
}

.contact-form__status {
  margin-bottom: calc(17 * var(--s));
  padding: calc(10 * var(--s)) calc(12 * var(--s));
  border-left: calc(3 * var(--s)) solid var(--error);
  background: #fbeeec;
  font-size: max(14px, 13 * var(--s));
  line-height: 1.462;
  color: var(--error);
}

.contact-form__submit {
  font-size: max(15px, 16 * var(--s));
}

.contact-form__submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .contact {
    padding: calc(64 * var(--s)) 0 calc(96 * var(--s));
    border-radius: calc(30 * var(--s)) calc(30 * var(--s)) 0 0;
  }

  .contact__arch {
    left: calc(var(--gutter) - (84 * var(--s)));
    top: calc(-11 * var(--s));
    width: calc(620 * var(--s));
    height: calc(682 * var(--s));
    border-radius: 0 0 calc(310 * var(--s)) calc(310 * var(--s));
  }

  .contact__inner {
    gap: calc(48 * var(--s));
  }

  .contact__intro {
    padding-top: calc(24 * var(--s));
  }

  .contact__title {
    padding: calc(25 * var(--s)) 0 calc(34 * var(--s));
    font-size: calc(56 * var(--s));
    line-height: calc(44 * var(--s));
    letter-spacing: calc(-1.6 * var(--s));
  }

  .contact__text {
    max-width: calc(416 * var(--s));
    font-size: max(15px, 16 * var(--s));
    line-height: 1.663;
  }

  .contact__links {
    padding-top: calc(35 * var(--s));
  }

  .contact__languages {
    font-size: max(15px, 15 * var(--s));
  }

  .contact-form {
    padding: calc(33 * var(--s));
  }

  .contact-form__title {
    font-size: calc(31 * var(--s));
    line-height: calc(33.5 * var(--s));
  }

  .contact-form__intro {
    font-size: max(14px, 16 * var(--s));
    line-height: 1.169;
  }

  .contact-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(18 * var(--s));
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .field__textarea {
    height: calc(112 * var(--s));
  }

  .contact-form__privacy {
    font-size: max(15px, 10 * var(--s));
    line-height: 1.65;
  }
}

@media (min-width: 1200px) {
  .contact {
    padding: 0;
  }

  .contact__arch {
    left: calc(var(--content-left) - (143 * var(--s)));
    top: calc(-26.9 * var(--s));
    width: calc(757 * var(--s));
    height: calc(850 * var(--s));
    border-radius: 0 0 calc(378.5 * var(--s)) calc(378.5 * var(--s));
  }

  .contact__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--s));
    min-height: calc(770 * var(--s));
    padding: calc(71.85 * var(--s)) 0;
  }

  .contact__intro {
    flex: 0 1 calc(611.4 * var(--s));
    align-self: stretch;
    padding-top: calc(50 * var(--s));
  }

  .contact .kicker {
    min-height: calc(50 * var(--s));
  }

  .contact__title {
    max-width: calc(416 * var(--s));
    min-height: calc(177 * var(--s));
    padding: calc(25 * var(--s)) 0 0;
    font-size: calc(70 * var(--s));
    line-height: calc(55 * var(--s));
    letter-spacing: calc(-2 * var(--s));
  }

  .contact__text {
    min-height: calc(54 * var(--s));
  }

  .contact-form {
    flex: 0 1 calc(568.6 * var(--s));
  }

  .contact-form__fields {
    gap: calc(18 * var(--s));
  }

  .field__input {
    height: calc(45.8 * var(--s));
    font-size: max(15px, 12 * var(--s));
    line-height: 1.333;
  }

  .field__select {
    height: calc(44 * var(--s));
  }

  .field__textarea {
    height: calc(91 * var(--s));
    line-height: max(19.8 * var(--s), 1.2em);
  }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  padding: calc(56 * var(--s)) 0 calc(24 * var(--s));
  border-top: calc(5 * var(--s)) solid var(--yellow);
  background: var(--footer-bg);
  color: var(--ink);
}

.site-footer__grid {
  display: grid;
  gap: calc(34 * var(--s));
  padding-bottom: calc(40 * var(--s));
}

.site-footer__logo {
  width: calc(231 * var(--s));
}

.site-footer__text {
  max-width: calc(265 * var(--s));
  padding-top: calc(16 * var(--s));
  font-size: max(15px, 12 * var(--s));
  line-height: 1.8;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--s));
  padding-top: calc(23 * var(--s));
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--s));
  padding: calc(8 * var(--s)) 0;
  font-size: max(13px, 12 * var(--s));
  line-height: 1.5;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.footer-links a:hover {
  color: var(--ink);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: calc(20 * var(--s));
  border-top: 1px solid #cdd3ce;
  font-size: max(13px, 10 * var(--s));
  line-height: 1.65;
  color: var(--muted);
}

.legal-links {
  display: flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  gap: calc(7 * var(--s));
  min-height: calc(44 * var(--s));
}

.legal-links li + li::before {
  content: "";
  display: inline-block;
  width: calc(3 * var(--s));
  height: calc(3 * var(--s));
  margin-right: calc(7 * var(--s));
  border-radius: 50%;
  background: currentcolor;
  vertical-align: middle;
}

.legal-links a {
  transition: color var(--t-fast) var(--ease);
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--s));
}

.legal-links a:hover {
  color: var(--ink);
}

.back-to-top {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: calc(13 * var(--s));
  color: var(--ink);
}

.back-to-top:hover .round-button {
  background-color: #fff;
}

@media (min-width: 768px) {
  .site-footer {
    padding: calc(64 * var(--s)) 0 calc(22 * var(--s));
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(40 * var(--s));
    padding-bottom: calc(44 * var(--s));
  }

  /* Une seule ligne quand tout tient (dès 834 px) ; le copyright n'est jamais coupé */
  .site-footer__bottom {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(4 * var(--s)) calc(25 * var(--s));
    padding-top: calc(21 * var(--s));
  }

  .site-footer__copyright {
    white-space: nowrap;
  }
}

/* Tablette plus étroite que la maquette : copyright sur sa propre ligne,
   liens légaux et « En haut » en dessous */
@media (min-width: 768px) and (max-width: 833.98px) {
  .site-footer__copyright {
    flex-basis: 100%;
  }
}

@media (min-width: 1200px) {
  .site-footer {
    padding-top: calc(68 * var(--s));
  }

  .site-footer__grid {
    grid-template-columns: 31.07% 18.64% 25.42% 1fr;
    grid-auto-rows: minmax(calc(233.2 * var(--s)), auto);
    column-gap: 0;
    padding-bottom: calc(56 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Modale de confirmation
   -------------------------------------------------------------------------- */
.modal {
  width: min(100% - (40 * var(--s)), (682 * var(--s)));
  max-height: calc(100% - (40 * var(--s)));
  padding: 0;
  border: 0;
  border-radius: calc(12 * var(--s));
  background: var(--cream);
  box-shadow: 0 calc(24 * var(--s)) calc(80 * var(--s)) rgb(0 12 18 / 0.24);
  color: var(--ink);
  overflow: auto;
}

.modal::backdrop {
  background: rgb(0 12 18 / 0.58);
}

.modal[open] {
  animation: modal-in var(--t-slow) var(--ease-out);
}

.modal.is-closing {
  animation: modal-out var(--t) var(--ease-in-out) forwards;
}

.modal[open]::backdrop {
  animation: fade-in var(--t-slow) var(--ease);
}

.modal.is-closing::backdrop {
  animation: fade-out var(--t) var(--ease) forwards;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(calc(24 * var(--s))) scale(0.96);
  }
}

@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(calc(16 * var(--s))) scale(0.97);
  }
}

.modal__body {
  position: relative;
  overflow: hidden;
  padding: calc(72 * var(--s)) calc(24 * var(--s)) calc(36 * var(--s));
  border-top: calc(4 * var(--s)) solid transparent;
  border-image: var(--gradient-yellow) 1;
}

.modal__body::before {
  content: "";
  position: absolute;
  left: calc(-128 * var(--s));
  top: calc(23 * var(--s));
  width: calc(719 * var(--s));
  height: calc(559 * var(--s));
  background: url("../assets/images/arc-modale.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.modal__body > * {
  position: relative;
}

.modal__close {
  position: absolute;
  top: calc(20 * var(--s));
  right: calc(20 * var(--s));
  z-index: 1;
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}

.modal__close img {
  width: calc(28 * var(--s));
  height: calc(28 * var(--s));
}

.modal__close:hover {
  background: #fff;
  transform: rotate(90deg);
}

.modal .kicker {
  font-size: max(14px, 14 * var(--s));
  line-height: 1.179;
  letter-spacing: 0.164em;
}

.modal__title {
  padding-top: calc(28 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(40 * var(--s));
  line-height: calc(36 * var(--s));
  letter-spacing: calc(-1.2 * var(--s));
}

.modal__title em {
  font-weight: 500;
}

.modal__text {
  padding-top: calc(24 * var(--s));
  font-size: max(15px, 16 * var(--s));
  line-height: 1.663;
  color: var(--muted);
}

.modal__button {
  width: 100%;
  margin-top: calc(31 * var(--s));
  font-size: max(15px, 16 * var(--s));
}

.modal__plane {
  position: absolute;
  top: calc(60 * var(--s));
  right: calc(24 * var(--s));
  width: calc(64 * var(--s));
}

@media (min-width: 768px) {
  .modal {
    min-height: calc(505 * var(--s));
  }

  .modal__body {
    min-height: calc(505 * var(--s));
    padding: calc(71.75 * var(--s)) calc(48 * var(--s)) calc(91.75 * var(--s));
  }

  .modal__close {
    top: calc(23 * var(--s));
    right: calc(48 * var(--s));
  }

  .modal .kicker {
    min-height: calc(25 * var(--s));
  }

  .modal__title {
    padding-top: calc(31 * var(--s));
    font-size: calc(70 * var(--s));
    line-height: calc(55 * var(--s));
    letter-spacing: calc(-2 * var(--s));
  }

  .modal__text {
    padding-top: calc(31 * var(--s));
  }

  .modal__button {
    width: calc(365 * var(--s));
  }

  .modal__plane {
    top: calc(128.25 * var(--s));
    left: calc(517 * var(--s));
    right: auto;
    width: calc(119 * var(--s));
  }
}

/* --------------------------------------------------------------------------
   Pages légales
   -------------------------------------------------------------------------- */
.legal {
  padding: calc(72 * var(--s)) 0 calc(96 * var(--s));
}

.legal__content {
  max-width: calc(760 * var(--s));
}

.legal__title {
  padding: calc(22 * var(--s)) 0 calc(32 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(46 * var(--s));
  line-height: calc(50 * var(--s));
  letter-spacing: calc(-1.4 * var(--s));
}

.legal__content h2 {
  padding: calc(32 * var(--s)) 0 calc(12 * var(--s));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(28 * var(--s));
  line-height: calc(32 * var(--s));
}

.legal__content p,
.legal__content li {
  font-size: max(15px, 15 * var(--s));
  line-height: 1.667;
  color: var(--muted);
}

.legal__content ul {
  padding-left: calc(20 * var(--s));
  list-style: disc;
}

.legal__content a {
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--s));
}

/* --------------------------------------------------------------------------
   Petits téléphones : ajustements pour que les éléments d'une ligne
   (étiquettes, bouton principal, questions) ne se coupent pas malgré
   les tailles minimales de lecture
   -------------------------------------------------------------------------- */

/* Moins de 390 px */
@media (max-width: 389.98px) {
  .kicker {
    letter-spacing: 0.08em;
  }

  .about__summary {
    font-size: 13px;
  }
}

/* Très petits téléphones (moins de 360 px) */
@media (max-width: 359.98px) {
  .kicker {
    letter-spacing: 0.03em;
  }

  .hero__cta {
    gap: 12px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .about__summary {
    gap: 6px;
    letter-spacing: -0.01em;
  }

  .faq-item__question {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Mouvements
   Toutes les animations sont désactivées si le visiteur a demandé
   à réduire les animations (voir la section suivante).
   -------------------------------------------------------------------------- */

/* Dégradés vivants de l'accueil et du formulaire : des halos aux couleurs
   du site dérivent lentement sous le contenu. */
.hero,
.contact {
  isolation: isolate;
}

.hero::after,
.contact::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(38% 46% at 28% 34%, rgb(56 98 120 / 0.7), transparent 70%),
    radial-gradient(34% 42% at 72% 66%, rgb(0 12 18 / 0.75), transparent 70%),
    radial-gradient(30% 38% at 62% 22%, rgb(40 74 94 / 0.6), transparent 70%);
  pointer-events: none;
  will-change: transform;
  animation: gradient-drift 18s var(--ease-in-out) infinite alternate;
}

.contact::before {
  animation-duration: 21s;
  animation-direction: alternate-reverse;
}

@keyframes gradient-drift {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate(7%, -5%) rotate(9deg) scale(1.1);
  }

  100% {
    transform: translate(-6%, 6%) rotate(-7deg) scale(1.04);
  }
}

/* Arrivée de l'accueil au chargement de la page. La photo, la carte jaune et
   les mentions décoratives ont leur animation dans leur propre règle.
   Quand l'introduction est jouée (classe avec-intro), l'accueil est déjà en
   place derrière elle : c'est le fondu de l'introduction qui le révèle, et le
   contenu principal s'affiche immédiatement pour les moteurs de recherche. */
.hero__text > :not(.hero__title),
.hero__title-line {
  animation: rise-in 1s var(--ease-out) var(--rise-delay, 0s) backwards;
}

.avec-intro :is(.hero__text > *, .hero__title-line, .hero__visual, .hero__card, .hero__vertical, .hero__motto) {
  animation: none;
}

.hero__text > :nth-child(1) { --rise-delay: 0.1s; }
.hero__title-line:nth-child(1) { --rise-delay: 0.2s; }
.hero__title-line:nth-child(2) { --rise-delay: 0.32s; }
.hero__text > :nth-child(3) { --rise-delay: 0.45s; }
.hero__text > :nth-child(4) { --rise-delay: 0.55s; }
.hero__text > :nth-child(5) { --rise-delay: 0.65s; }

/* Apparition au défilement : main.js ajoute data-reveal puis is-visible */
[data-reveal] {
  opacity: 0;
}

[data-reveal].is-visible {
  opacity: 1;
  animation: rise-in 0.9s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal="zoom"].is-visible {
  animation-name: zoom-in;
  animation-duration: 1.2s;
}

/* Flèches qui accompagnent le survol */
.button .icon,
.text-link .icon,
.card__more .icon,
.back-to-top .icon,
.footer-links .icon {
  transition: transform var(--t) var(--ease-out);
}

.button:hover .icon,
.text-link:hover .icon,
.card:hover .card__more .icon,
.footer-links a:hover .icon {
  transform: translate(calc(3 * var(--s)), calc(-3 * var(--s)));
}

.hero .text-link:hover .icon {
  transform: translateY(calc(3 * var(--s)));
}

.back-to-top:hover .icon {
  transform: translateY(calc(-3 * var(--s)));
}

/* Survol des visuels : léger mouvement en profondeur qui suit la souris.
   main.js renseigne --px et --py (de -1 à 1) et --mx, --my (position en %),
   uniquement avec une souris et si les animations ne sont pas réduites.
   Chaque couche (photo, arche, carte…) porte son décalage dans sa propre règle. */

/* Reflet doux qui accompagne le curseur sur le bandeau jaune */
.conviction__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle calc(420 * var(--s)) at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.32), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}

.conviction__card:hover::after {
  opacity: 1;
}

/* Avion de papier de la fenêtre de confirmation */
.modal[open] .modal__plane {
  animation:
    plane-in 1.1s var(--ease-out) 0.2s backwards,
    plane-float 6s var(--ease-in-out) 1.3s infinite alternate;
}

@keyframes plane-in {
  from {
    opacity: 0;
    translate: calc(-40 * var(--s)) calc(30 * var(--s));
    rotate: -12deg;
  }
}

@keyframes plane-float {
  to {
    translate: calc(4 * var(--s)) calc(-8 * var(--s));
    rotate: 3deg;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 calc(28 * var(--s));
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 calc(16 * var(--s));
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* intro:début - généré par outils/generer-intro.py, ne pas modifier à la main */

/* --------------------------------------------------------------------------
   Introduction animée (reprise exacte de l'export « Intro SpeakTheSame », 5 s)
   Jouée à chaque arrivée sur le site (js/intro.js). Sans JavaScript, elle se joue
   puis disparaît d'elle-même. Jamais affichée si le visiteur a demandé
   à réduire les animations.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Intro";
  src: url("../assets/fonts/cormorant-garamond-intro-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@property --intro-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}

.sans-intro .intro {
  display: none;
}

.intro {
  /* Composition de 1920 × 1080 : contenue dans l'écran (--iu) ; le fond le couvre (--bu).
     --intro-vw : 1 % de la largeur de l'écran (barre de défilement exclue, voir ci-dessous) */
  --intro-vw: 1vw;
  --iu: min(100 * var(--intro-vw) / 1920, 100svh / 1080);
  --bu: max(100 * var(--intro-vw) / 1920, 100svh / 1080);
  --word-spread: 1;
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #001018;
  color: #fff;
  cursor: pointer;
  animation: intro-out 0.4s var(--ease) 5s forwards;
}

/* Navigateurs récents : largeur du conteneur racine, sans la barre de défilement */
@supports (width: 1cqw) {
  .intro {
    --intro-vw: 1cqw;
  }
}

/* Écran vertical (téléphone, tablette en portrait) : la composition occupe la largeur */
@media (orientation: portrait) {
  .intro {
    --iu: min(100 * var(--intro-vw) / 1250, 100svh / 1080);
    --word-spread: 0.85; /* mots un peu resserrés pour garder une marge */
  }
}

.intro-passee .intro {
  animation: intro-out 0.5s var(--ease) forwards;
}

/* Fond : dégradé dont l'angle oscille et halos qui dérivent */
.intro__backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--intro-angle), #24485a 0%, #1e3a49 26%, #12293a 54%, #071a26 78%, #001018 100%);
  animation: intro-angle 5s linear forwards;
}

.intro__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgb(0 8 14 / 0.55) 100%);
}

.intro__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1920 * var(--bu));
  height: calc(1080 * var(--bu));
  translate: -50% -50%;
}

.intro__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-duration: 0.8s, 5s;
  animation-timing-function: var(--ease-out-cubic), linear;
  animation-fill-mode: backwards, forwards;
}

.intro__blob:nth-child(1) {
  left: calc(-220 * var(--bu));
  top: calc(-300 * var(--bu));
  width: calc(1150 * var(--bu));
  background: radial-gradient(circle, rgb(70 120 145 / 0.5) 0%, transparent 68%);
  animation-name: fade-in, intro-blob-1;
}

.intro__blob:nth-child(2) {
  left: calc(1120 * var(--bu));
  top: calc(480 * var(--bu));
  width: calc(1050 * var(--bu));
  background: radial-gradient(circle, rgb(20 64 98 / 0.6) 0%, transparent 68%);
  animation-name: fade-in, intro-blob-2;
}

.intro__blob:nth-child(3) {
  left: calc(560 * var(--bu));
  top: calc(120 * var(--bu));
  width: calc(820 * var(--bu));
  background: radial-gradient(circle, rgb(120 170 195 / 0.22) 0%, transparent 68%);
  animation-name: fade-in, intro-blob-3;
}

.intro__blob:nth-child(4) {
  left: calc(1340 * var(--bu));
  top: calc(-260 * var(--bu));
  width: calc(720 * var(--bu));
  background: radial-gradient(circle, rgb(46 92 110 / 0.36) 0%, transparent 68%);
  animation-name: fade-in, intro-blob-4;
}

.intro__blob:nth-child(5) {
  left: calc(-120 * var(--bu));
  top: calc(620 * var(--bu));
  width: calc(760 * var(--bu));
  background: radial-gradient(circle, rgb(30 72 96 / 0.4) 0%, transparent 68%);
  animation-name: fade-in, intro-blob-5;
}

/* 1. Mots */
.intro__words,
.intro__lockup {
  position: absolute;
  inset: 0;
}

.intro__word {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
  animation:
    intro-fade-in 0.65s var(--ease-out-cubic) backwards,
    intro-fade-out 0.4s var(--ease-out-cubic) forwards;
}

.intro__word-mask {
  overflow: hidden;
  padding-bottom: calc(8 * var(--iu));
}

.intro__word-text {
  display: block;
  font-family: "Cormorant Intro", var(--font-serif);
  font-weight: 400;
  font-size: calc(104 * var(--iu));
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 calc(28 * var(--iu)) rgb(255 255 255 / 0.25);
  animation: intro-rise 0.65s var(--ease-out-cubic) backwards;
}

.intro__word-text em {
  font-family: var(--font-serif);
  font-weight: 500;
}

.intro__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--iu));
  margin-top: calc(18 * var(--iu));
  font-weight: 600;
  font-size: max(11px, 18 * var(--iu));
  letter-spacing: 0.3em;
  animation: intro-fade-in 0.65s var(--ease-out-cubic) backwards;
}

.intro__lang::before,
.intro__lang::after {
  content: "";
  width: calc(24 * var(--iu));
  height: 1px;
  background: #ffc400;
  animation: intro-line 0.65s var(--ease-out-cubic) backwards;
}

/* 2. Pont, 3. Nom, 4. Signature */
.intro__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(56 * var(--iu));
  animation: intro-lockup-out 0.5s var(--ease-in-out-expo) 4.5s forwards;
}

.intro__logo {
  width: calc(1000 * var(--iu));
  height: calc(356 * var(--iu));
  overflow: visible;
  filter: drop-shadow(0 0 calc(16 * var(--iu)) rgb(255 214 60 / 0.22)) drop-shadow(0 0 calc(56 * var(--iu)) rgb(150 200 225 / 0.16));
  animation: intro-scale 2.8s var(--ease-out-cubic) 1.3s backwards;
}

.intro__or {
  fill: url("#intro-or");
  stroke: url("#intro-or");
}

.intro__blanc {
  fill: #fff;
  stroke: #fff;
}

.intro__fill {
  stroke: none;
  opacity: 0;
  animation: intro-fill 0.4s var(--ease-out-cubic) forwards;
}

.intro__fills use:nth-child(-n + 2) {
  animation-duration: 0.5s;
}

.intro__stroke {
  fill: none;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation:
    intro-draw 0.65s var(--ease-in-out-quad) forwards,
    intro-stroke-fade 0.4s var(--ease-out-cubic) forwards;
}

.intro__stroke.intro__pont {
  stroke-width: 1.8;
  animation-duration: 0.9s, 0.5s;
}

.intro__strokes use:nth-child(1) { animation-delay: 1.3s, 1.9s; }
.intro__fills use:nth-child(1) { animation-delay: 1.9s; }
.intro__strokes use:nth-child(2) { animation-delay: 1.44s, 2.04s; }
.intro__fills use:nth-child(2) { animation-delay: 2.04s; }
.intro__strokes use:nth-child(3) { animation-delay: 2.3s, 2.7s; }
.intro__fills use:nth-child(3) { animation-delay: 2.7s; }
.intro__strokes use:nth-child(4) { animation-delay: 2.343s, 2.743s; }
.intro__fills use:nth-child(4) { animation-delay: 2.743s; }
.intro__strokes use:nth-child(5) { animation-delay: 2.386s, 2.786s; }
.intro__fills use:nth-child(5) { animation-delay: 2.786s; }
.intro__strokes use:nth-child(6) { animation-delay: 2.429s, 2.829s; }
.intro__fills use:nth-child(6) { animation-delay: 2.829s; }
.intro__strokes use:nth-child(7) { animation-delay: 2.471s, 2.871s; }
.intro__fills use:nth-child(7) { animation-delay: 2.871s; }
.intro__strokes use:nth-child(8) { animation-delay: 2.514s, 2.914s; }
.intro__fills use:nth-child(8) { animation-delay: 2.914s; }
.intro__strokes use:nth-child(9) { animation-delay: 2.557s, 2.957s; }
.intro__fills use:nth-child(9) { animation-delay: 2.957s; }
.intro__strokes use:nth-child(10) { animation-delay: 2.6s, 3s; }
.intro__fills use:nth-child(10) { animation-delay: 3s; }
.intro__strokes use:nth-child(11) { animation-delay: 2.643s, 3.043s; }
.intro__fills use:nth-child(11) { animation-delay: 3.043s; }
.intro__strokes use:nth-child(12) { animation-delay: 2.686s, 3.086s; }
.intro__fills use:nth-child(12) { animation-delay: 3.086s; }
.intro__strokes use:nth-child(13) { animation-delay: 2.729s, 3.129s; }
.intro__fills use:nth-child(13) { animation-delay: 3.129s; }
.intro__strokes use:nth-child(14) { animation-delay: 2.771s, 3.171s; }
.intro__fills use:nth-child(14) { animation-delay: 3.171s; }
.intro__strokes use:nth-child(15) { animation-delay: 2.814s, 3.214s; }
.intro__fills use:nth-child(15) { animation-delay: 3.214s; }
.intro__strokes use:nth-child(16) { animation-delay: 2.857s, 3.257s; }
.intro__fills use:nth-child(16) { animation-delay: 3.257s; }

.intro__word:nth-child(1) {
  left: calc(50% + -400 * var(--word-spread) * var(--iu));
  animation-delay: 0.1s, 1.15s;
}
.intro__word:nth-child(1) .intro__word-text, .intro__word:nth-child(1) .intro__lang, .intro__word:nth-child(1) .intro__lang::before, .intro__word:nth-child(1) .intro__lang::after { animation-delay: 0.1s; }

.intro__word:nth-child(2) {
  left: calc(50% + 0 * var(--word-spread) * var(--iu));
  animation-delay: 0.28s, 1.15s;
}
.intro__word:nth-child(2) .intro__word-text, .intro__word:nth-child(2) .intro__lang, .intro__word:nth-child(2) .intro__lang::before, .intro__word:nth-child(2) .intro__lang::after { animation-delay: 0.28s; }

.intro__word:nth-child(3) {
  left: calc(50% + 400 * var(--word-spread) * var(--iu));
  animation-delay: 0.46s, 1.15s;
}
.intro__word:nth-child(3) .intro__word-text, .intro__word:nth-child(3) .intro__lang, .intro__word:nth-child(3) .intro__lang::before, .intro__word:nth-child(3) .intro__lang::after { animation-delay: 0.46s; }

.intro__sheen {
  opacity: 0;
  animation: intro-sheen 1s var(--ease-in-out-quad) 3.1s;
}

.intro__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--iu));
  height: calc(64 * var(--iu));
}

.intro__tagline::before,
.intro__tagline::after {
  content: "";
  width: calc(90 * var(--iu));
  height: 1px;
  background: #ffc400;
  animation: intro-line 0.75s var(--ease-in-out-quad) 3.1s backwards;
}

.intro__tagline-mask {
  overflow: hidden;
  padding-bottom: calc(6 * var(--iu));
}

.intro__tagline-text {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(48 * var(--iu));
  white-space: nowrap;
  text-shadow: 0 0 calc(24 * var(--iu)) rgb(255 255 255 / 0.22);
  animation: intro-rise-fade 0.65s var(--ease-out-cubic) 3.3s backwards;
}

/* Bouton « Passer l'introduction » (ajout pour le confort de visite) */
.intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: calc(24 * var(--s));
  padding: calc(8 * var(--s)) 0;
  font-size: calc(11 * var(--s));
  letter-spacing: calc(1 * var(--s));
  color: rgb(255 255 255 / 0.7);
  background: linear-gradient(currentcolor, currentcolor) left bottom / 0 1px no-repeat;
  transition: color var(--t-fast) var(--ease), background-size var(--t) var(--ease-out);
  animation: fade-in 0.6s var(--ease) 0.6s backwards;
}

.intro__skip:hover,
.intro__skip:focus-visible {
  color: #fff;
  background-size: 100% 1px;
}

@media (min-width: 768px) {
  .intro__skip {
    bottom: calc(32 * var(--s));
    font-size: calc(12 * var(--s));
  }
}

@keyframes intro-angle {
  0% { --intro-angle: 135deg; }
  35% { --intro-angle: 157deg; }
  100% { --intro-angle: 113deg; }
}

@keyframes intro-fade-in {
  from { opacity: 0; }
}

@keyframes intro-fade-out {
  to { opacity: 0; }
}

@keyframes intro-rise {
  from { translate: 0 110%; }
}

@keyframes intro-rise-fade {
  from {
    opacity: 0;
    translate: 0 110%;
  }
}

@keyframes intro-line {
  from { width: 0; }
}

@keyframes intro-scale {
  from { scale: 0.95; }
}

@keyframes intro-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 1;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes intro-stroke-fade {
  from { opacity: 1; }
  to { opacity: 0.15; }
}

@keyframes intro-fill {
  to { opacity: 1; }
}

@keyframes intro-sheen {
  from {
    opacity: 1;
    translate: -400px 0;
  }

  to {
    opacity: 1;
    translate: 1200px 0;
  }
}

@keyframes intro-lockup-out {
  to {
    opacity: 0;
    scale: 1.05;
    filter: blur(calc(6 * var(--iu)));
  }
}

@keyframes intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes intro-blob-1 {
  0% { translate: calc(0 * var(--bu)) calc(151.5 * var(--bu)); }
  5% { translate: calc(51.7 * var(--bu)) calc(172.2 * var(--bu)); }
  10% { translate: calc(101.2 * var(--bu)) calc(180 * var(--bu)); }
  15% { translate: calc(146.8 * var(--bu)) calc(174.2 * var(--bu)); }
  20% { translate: calc(186.5 * var(--bu)) calc(155.4 * var(--bu)); }
  25% { translate: calc(218.8 * var(--bu)) calc(124.9 * var(--bu)); }
  30% { translate: calc(242.3 * var(--bu)) calc(85 * var(--bu)); }
  35% { translate: calc(256.2 * var(--bu)) calc(38.7 * var(--bu)); }
  40% { translate: calc(259.9 * var(--bu)) calc(-10.5 * var(--bu)); }
  45% { translate: calc(253.2 * var(--bu)) calc(-58.9 * var(--bu)); }
  50% { translate: calc(236.4 * var(--bu)) calc(-102.9 * var(--bu)); }
  55% { translate: calc(210.2 * var(--bu)) calc(-139.1 * var(--bu)); }
  60% { translate: calc(175.6 * var(--bu)) calc(-164.9 * var(--bu)); }
  65% { translate: calc(134 * var(--bu)) calc(-178.3 * var(--bu)); }
  70% { translate: calc(87.1 * var(--bu)) calc(-178.3 * var(--bu)); }
  75% { translate: calc(36.7 * var(--bu)) calc(-164.9 * var(--bu)); }
  80% { translate: calc(-15.2 * var(--bu)) calc(-139.1 * var(--bu)); }
  85% { translate: calc(-66.4 * var(--bu)) calc(-102.8 * var(--bu)); }
  90% { translate: calc(-115.1 * var(--bu)) calc(-58.9 * var(--bu)); }
  95% { translate: calc(-159.1 * var(--bu)) calc(-10.5 * var(--bu)); }
  100% { translate: calc(-196.8 * var(--bu)) calc(38.7 * var(--bu)); }
}

@keyframes intro-blob-2 {
  0% { translate: calc(272.8 * var(--bu)) calc(105.5 * var(--bu)); }
  5% { translate: calc(246.9 * var(--bu)) calc(145.9 * var(--bu)); }
  10% { translate: calc(213.4 * var(--bu)) calc(179 * var(--bu)); }
  15% { translate: calc(173.5 * var(--bu)) calc(203 * var(--bu)); }
  20% { translate: calc(128.2 * var(--bu)) calc(216.8 * var(--bu)); }
  25% { translate: calc(79 * var(--bu)) calc(219.7 * var(--bu)); }
  30% { translate: calc(27.4 * var(--bu)) calc(211.5 * var(--bu)); }
  35% { translate: calc(-25 * var(--bu)) calc(192.6 * var(--bu)); }
  40% { translate: calc(-76.7 * var(--bu)) calc(164.1 * var(--bu)); }
  45% { translate: calc(-126 * var(--bu)) calc(127.2 * var(--bu)); }
  50% { translate: calc(-171.5 * var(--bu)) calc(84 * var(--bu)); }
  55% { translate: calc(-211.7 * var(--bu)) calc(36.5 * var(--bu)); }
  60% { translate: calc(-245.5 * var(--bu)) calc(-12.8 * var(--bu)); }
  65% { translate: calc(-271.8 * var(--bu)) calc(-61.5 * var(--bu)); }
  70% { translate: calc(-289.7 * var(--bu)) calc(-107.1 * var(--bu)); }
  75% { translate: calc(-298.9 * var(--bu)) calc(-147.3 * var(--bu)); }
  80% { translate: calc(-298.8 * var(--bu)) calc(-180 * var(--bu)); }
  85% { translate: calc(-289.7 * var(--bu)) calc(-203.7 * var(--bu)); }
  90% { translate: calc(-271.7 * var(--bu)) calc(-217.1 * var(--bu)); }
  95% { translate: calc(-245.4 * var(--bu)) calc(-219.6 * var(--bu)); }
  100% { translate: calc(-211.7 * var(--bu)) calc(-211 * var(--bu)); }
}

@keyframes intro-blob-3 {
  0% { translate: calc(28.2 * var(--bu)) calc(127.3 * var(--bu)); }
  5% { translate: calc(-31.5 * var(--bu)) calc(110 * var(--bu)); }
  10% { translate: calc(-88.5 * var(--bu)) calc(86.6 * var(--bu)); }
  15% { translate: calc(-137.6 * var(--bu)) calc(58.2 * var(--bu)); }
  20% { translate: calc(-174.3 * var(--bu)) calc(26.7 * var(--bu)); }
  25% { translate: calc(-195.5 * var(--bu)) calc(-6.4 * var(--bu)); }
  30% { translate: calc(-199.2 * var(--bu)) calc(-39.1 * var(--bu)); }
  35% { translate: calc(-185.2 * var(--bu)) calc(-69.7 * var(--bu)); }
  40% { translate: calc(-154.6 * var(--bu)) calc(-96.3 * var(--bu)); }
  45% { translate: calc(-110.1 * var(--bu)) calc(-117.5 * var(--bu)); }
  50% { translate: calc(-55.9 * var(--bu)) calc(-132.1 * var(--bu)); }
  55% { translate: calc(3.4 * var(--bu)) calc(-139.3 * var(--bu)); }
  60% { translate: calc(62.3 * var(--bu)) calc(-138.7 * var(--bu)); }
  65% { translate: calc(115.7 * var(--bu)) calc(-130.3 * var(--bu)); }
  70% { translate: calc(158.7 * var(--bu)) calc(-114.5 * var(--bu)); }
  75% { translate: calc(187.6 * var(--bu)) calc(-92.4 * var(--bu)); }
  80% { translate: calc(199.7 * var(--bu)) calc(-65 * var(--bu)); }
  85% { translate: calc(194 * var(--bu)) calc(-34.1 * var(--bu)); }
  90% { translate: calc(170.9 * var(--bu)) calc(-1.1 * var(--bu)); }
  95% { translate: calc(132.6 * var(--bu)) calc(31.8 * var(--bu)); }
  100% { translate: calc(82.4 * var(--bu)) calc(63 * var(--bu)); }
}

@keyframes intro-blob-4 {
  0% { translate: calc(-181.6 * var(--bu)) calc(28.2 * var(--bu)); }
  5% { translate: calc(-214.8 * var(--bu)) calc(-9.2 * var(--bu)); }
  10% { translate: calc(-234.6 * var(--bu)) calc(-46.3 * var(--bu)); }
  15% { translate: calc(-239.8 * var(--bu)) calc(-81.7 * var(--bu)); }
  20% { translate: calc(-230.1 * var(--bu)) calc(-114.3 * var(--bu)); }
  25% { translate: calc(-206.1 * var(--bu)) calc(-142.9 * var(--bu)); }
  30% { translate: calc(-169.3 * var(--bu)) calc(-166.5 * var(--bu)); }
  35% { translate: calc(-122 * var(--bu)) calc(-184.2 * var(--bu)); }
  40% { translate: calc(-67.1 * var(--bu)) calc(-195.5 * var(--bu)); }
  45% { translate: calc(-8 * var(--bu)) calc(-199.9 * var(--bu)); }
  50% { translate: calc(51.6 * var(--bu)) calc(-197.4 * var(--bu)); }
  55% { translate: calc(108 * var(--bu)) calc(-187.9 * var(--bu)); }
  60% { translate: calc(157.7 * var(--bu)) calc(-171.8 * var(--bu)); }
  65% { translate: calc(197.5 * var(--bu)) calc(-149.7 * var(--bu)); }
  70% { translate: calc(225.1 * var(--bu)) calc(-122.3 * var(--bu)); }
  75% { translate: calc(238.7 * var(--bu)) calc(-90.7 * var(--bu)); }
  80% { translate: calc(237.4 * var(--bu)) calc(-55.9 * var(--bu)); }
  85% { translate: calc(221.4 * var(--bu)) calc(-19.1 * var(--bu)); }
  90% { translate: calc(191.6 * var(--bu)) calc(18.3 * var(--bu)); }
  95% { translate: calc(149.9 * var(--bu)) calc(55.1 * var(--bu)); }
  100% { translate: calc(98.9 * var(--bu)) calc(90 * var(--bu)); }
}

@keyframes intro-blob-5 {
  0% { translate: calc(-211 * var(--bu)) calc(-121.1 * var(--bu)); }
  5% { translate: calc(-193.1 * var(--bu)) calc(-145.8 * var(--bu)); }
  10% { translate: calc(-166.5 * var(--bu)) calc(-158.5 * var(--bu)); }
  15% { translate: calc(-132.4 * var(--bu)) calc(-158.2 * var(--bu)); }
  20% { translate: calc(-92.3 * var(--bu)) calc(-144.9 * var(--bu)); }
  25% { translate: calc(-48.2 * var(--bu)) calc(-119.7 * var(--bu)); }
  30% { translate: calc(-1.8 * var(--bu)) calc(-84.7 * var(--bu)); }
  35% { translate: calc(44.6 * var(--bu)) calc(-42.8 * var(--bu)); }
  40% { translate: calc(89.1 * var(--bu)) calc(2.7 * var(--bu)); }
  45% { translate: calc(129.5 * var(--bu)) calc(47.9 * var(--bu)); }
  50% { translate: calc(164.1 * var(--bu)) calc(89.3 * var(--bu)); }
  55% { translate: calc(191.3 * var(--bu)) calc(123.2 * var(--bu)); }
  60% { translate: calc(209.9 * var(--bu)) calc(147.1 * var(--bu)); }
  65% { translate: calc(219.1 * var(--bu)) calc(158.9 * var(--bu)); }
  70% { translate: calc(218.4 * var(--bu)) calc(157.7 * var(--bu)); }
  75% { translate: calc(207.9 * var(--bu)) calc(143.5 * var(--bu)); }
  80% { translate: calc(188 * var(--bu)) calc(117.5 * var(--bu)); }
  85% { translate: calc(159.7 * var(--bu)) calc(81.9 * var(--bu)); }
  90% { translate: calc(124.2 * var(--bu)) calc(39.6 * var(--bu)); }
  95% { translate: calc(83.1 * var(--bu)) calc(-6 * var(--bu)); }
  100% { translate: calc(38.3 * var(--bu)) calc(-51.1 * var(--bu)); }
}

/* intro:fin */

/* --------------------------------------------------------------------------
   Préférence « réduire les animations »
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .intro {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}