/* ==========================================================================
   Studio Amaïa — feuille de styles (V2)
   Palette : papier, sable, terracotta, encre. Aplats francs, pas d'ombres.
   Sommaire
   01. Polices
   02. Variables — LA TYPOGRAPHIE SE CHANGE ICI (--font-title, --font-text)
   03. Base
   04. Utilitaires
   05. En-tête, logo, navigation
   06. Sections et fonds
   07. Accueil : hero en couches
   08. Bande de réalisations (défilement horizontal)
   09. Listes (domaines, modalités, étapes, parcours)
   10. Emplacements d'images
   11. Pages intérieures
   12. Fiche projet
   13. Contact et formulaire
   14. Pied de page
   15. Légal, 404
   16. Éléments à compléter
   17. Animations, préférences
   ========================================================================== */

/* 01. Polices — typographie de travail, à remplacer (voir README §6) */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 02. Variables */
:root {
  /* Couleurs */
  --paper: #ffffff;     /* fond principal (V11 : blanc ; beige d’origine #f4efe8) */
  --sand: #f4efe8;      /* fond secondaire (V13 : éclairci, ancien #e5dccf) */
  --sand-deep: #e6ddd0; /* emplacements d'images sur sable */
  --terra: #C77B5B;     /* aplats */
  --ink: #1f1915;       /* texte, pied de page */
  --ink-soft: #62574e;  /* texte secondaire (AA sur papier et sable) */
  --line: rgba(31, 25, 21, 0.16);

  /* Typographies : remplacer les noms ici une fois la typo choisie */
  --font-title: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --title-weight: 430;
  --title-tracking: -0.035em;

  /* Échelle */
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-xl: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --fs-hero: clamp(3.4rem, 1rem + 9.4vw, 10.5rem);

  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --gap: clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
  --max: 96rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: clamp(3rem, 2rem + 4vw, 6rem);
  --s-6: clamp(4.5rem, 3rem + 6vw, 9rem);

  --header-h: 4.75rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 03. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  line-height: 1.02;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--terra); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--paper);
  font-size: var(--fs-sm); text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 04. Utilitaires */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.lead { font-size: var(--fs-md); line-height: 1.5; max-width: 34em; }
.muted { color: var(--ink-soft); }
.prose { max-width: 36em; }
.prose h3 { font-size: var(--fs-lg); margin: var(--s-4) 0 1rem; }

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-underline-offset 0.2s var(--ease), text-decoration-color 0.2s;
}
.link:hover { text-underline-offset: 0.32em; text-decoration-color: var(--terra); }

/* Lien d'action : texte souligné épais, une seule action par bloc */
.go {
  display: inline-block;
  min-height: 44px;
  padding: 0.55rem 0 0.35rem;
  border-bottom: 2px solid currentColor;
  font-weight: 600;
  text-decoration: none;
  transition: padding 0.3s var(--ease);
}
.go:hover { padding-right: 0.75rem; }

/* Bouton plein (formulaire) */
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0.8rem 1.4rem; border: 0; background: var(--ink); color: var(--paper);
  font: 600 var(--fs-base) / 1 var(--font-text); cursor: pointer;
  transition: background-color 0.2s;
}
.btn:hover { background: var(--terra); }

/* 05. En-tête, logo, navigation */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s-3); }

/* Logo : assets/logo/logo.svg s'affiche dès qu'il est déposé ; sinon, le nom en texte */
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand__logo { display: none; height: 2.25rem; width: auto; }
.brand.has-logo .brand__logo { display: block; }
.brand.has-logo .brand__text { display: none; }
.brand__text { font-weight: 560; font-size: 1.0625rem; letter-spacing: 0.01em; }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.5rem); list-style: none; }
.nav__link {
  display: inline-block; padding-block: 0.5rem;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease);
}
.nav__link:hover { background-size: 100% 1px; }
.nav__link[aria-current="page"] { background-image: linear-gradient(var(--terra), var(--terra)); background-size: 100% 2px; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.25rem;
  border: 0; background: none; color: var(--ink); font: 500 var(--fs-sm) / 1 var(--font-text); cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 22px; height: 8px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 6.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 3.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 3.25px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-4) var(--gutter); background: var(--terra); color: var(--paper); overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu :focus-visible { outline-color: var(--paper); }
.mobile-menu__list { list-style: none; }
.mobile-menu__list a {
  display: block; padding: 0.4rem 0;
  font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking);
  font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 1.1; text-decoration: none;
}
.mobile-menu__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.mobile-menu__foot { margin-top: var(--s-4); font-size: var(--fs-sm); }

@media (min-width: 64em) {
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* 06. Sections et fonds */
.section { padding-block: var(--s-6); }
.section--sand { background: var(--sand); }
.section--sand .ph { --ph-bg: var(--sand-deep); }
.section--terra { background: var(--terra); color: var(--paper); --ink-soft: rgba(244, 239, 232, 0.82); --line: rgba(244, 239, 232, 0.28); }
.section--terra :focus-visible { outline-color: var(--paper); }
.section--terra .ph { --ph-bg: rgba(244, 239, 232, 0.14); --ph-ink: rgba(244, 239, 232, 0.8); }
.section--tight { padding-block: var(--s-5); }
.section--flush-top { padding-top: 0; }

.title { font-size: var(--fs-xl); max-width: 16ch; }
.title + .lead, .title + p { margin-top: var(--s-3); }

/* En-tête de section : titre, puis texte décalé sous la ligne de base */
.head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 64em) {
  .head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .head .title { grid-column: 1 / 8; }
  .head > p, .head > div { grid-column: 8 / 12; align-self: end; }
}

/* En-tête de page intérieure */
.page-head { padding-top: clamp(3rem, 2rem + 5vw, 7rem); padding-bottom: var(--s-5); }
.page-head__title { font-size: clamp(2.75rem, 1.2rem + 6vw, 7.5rem); max-width: 18ch; }
.page-head__intro { margin-top: var(--s-4); }
@media (min-width: 64em) {
  .page-head__intro { margin-left: calc((100% - 11 * var(--gap)) / 12 * 5 + 5 * var(--gap)); max-width: 36em; }
}

.crumbs-bar { padding-top: 1.25rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; font-size: var(--fs-sm); color: var(--ink-soft); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* 07. Accueil : hero en couches
   Le titre chevauche le visuel ; l'aplat terracotta déborde à gauche et en bas. */
.hero { position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hero__title {
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 2;
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.hero__title span { display: block; }
.hero__media { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-4); }
.hero__cap { display: grid; gap: 0.1rem; margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.hero__cap a { color: var(--ink); font-weight: 560; text-decoration: none; }
.hero__cap a:hover { text-decoration: underline; }
.hero__base {
  grid-column: 1 / -1; grid-row: 3;
  position: relative;
  margin-top: var(--s-4);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-5) var(--gutter);
  background: var(--terra); color: var(--paper);
}
.hero__base :focus-visible { outline-color: var(--paper); }
.hero__base p { max-width: 28em; font-size: var(--fs-md); line-height: 1.5; }
.hero__sig { margin-top: var(--s-4); font-size: var(--fs-sm); opacity: 0.85; }

@media (min-width: 64em) {
  .hero__title span { padding-left: 1.3em; white-space: nowrap; }
  .hero__media { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: clamp(9rem, 4rem + 9vw, 15rem); align-self: start; }
  .hero__base {
    grid-column: 1 / 9; grid-row: 2;
    margin: var(--s-5) 0 0 calc(-1 * var(--gutter));
    padding: var(--s-5) var(--gap) var(--s-4) var(--gutter);
    display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: end;
    min-height: 26rem;
  }
  .hero__sig { margin: 0; }
}

/* 08. Bande de réalisations (défilement horizontal)
   Défilement natif : trackpad, glisser au doigt, flèches du clavier (piste focusable),
   et deux boutons. Aucune capture de la molette verticale. */
.strip { position: relative; }
.strip__bar { display: flex; justify-content: space-between; align-items: end; gap: var(--s-3); margin-bottom: var(--s-4); }
.strip__count { font-size: var(--fs-sm); color: var(--ink-soft); }
.strip__ctrl { display: flex; gap: 0.5rem; }
.strip__ctrl button {
  width: 48px; height: 48px; border: 1.5px solid currentColor; background: transparent; color: inherit;
  font: 500 1.125rem / 1 var(--font-text); cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.strip__ctrl button:hover:not([disabled]) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.strip__ctrl button[disabled] { opacity: 0.3; cursor: default; }

.strip__track {
  display: flex; align-items: flex-start; gap: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  margin: 0; padding: 0 var(--gutter) var(--s-3);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track:focus-visible { outline-offset: -2px; }
@media (min-width: 96em) {
  .strip__track { padding-left: calc((100vw - var(--max)) / 2 + var(--gutter)); scroll-padding-inline: calc((100vw - var(--max)) / 2 + var(--gutter)); }
}
.strip__item { flex: none; scroll-snap-align: start; }
.strip__item--land { width: clamp(17rem, 44vw, 44rem); }
.strip__item--port { width: clamp(14rem, 27vw, 27rem); }
.strip__item--square { width: clamp(15rem, 32vw, 32rem); }
.strip__item--down { margin-top: clamp(2rem, 6vw, 7rem); }
.strip__item--down2 { margin-top: clamp(3rem, 9vw, 11rem); }
.strip__end { flex: none; width: 1px; }
@media (max-width: 47.99em) {
  .strip__item--land, .strip__item--square { width: 82vw; }
  .strip__item--port { width: 66vw; }
  .strip__item--down, .strip__item--down2 { margin-top: 0; }
}

.strip__progress { position: relative; height: 1px; margin-top: var(--s-4); background: var(--line); }
.strip__progress i { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; background: currentColor; transition: transform 0.15s linear; transform-origin: left; }

.work { display: block; text-decoration: none; color: inherit; }
.work .ph { transition: opacity 0.35s var(--ease); }
.work:hover .ph { opacity: 0.9; }
.work__name { display: block; margin-top: 1.1rem; font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-lg); line-height: 1.05; }
.work__type { display: block; margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.work:hover .work__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* 09. Listes */
.rows { list-style: none; border-top: 1.5px solid var(--ink); }
.rows > li { border-bottom: 1px solid var(--line); }
.row {
  display: grid; gap: 0.5rem; padding-block: var(--s-3);
  color: inherit; text-decoration: none;
}
.row__title { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-lg); line-height: 1.08; }
.row__text { color: var(--ink-soft); max-width: 34em; }
.row__meta { font-size: var(--fs-sm); }
a.row { transition: padding 0.35s var(--ease); }
a.row:hover { padding-left: 0.75rem; }
a.row:hover .row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (min-width: 48em) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
  .row__text { grid-column: 2; grid-row: 1 / span 2; padding-top: 0.4rem; }
}

.modes { display: grid; border-top: 1.5px solid currentColor; }
.mode { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.mode h3 { font-size: var(--fs-lg); margin-bottom: 0.75rem; }
.mode p { color: var(--ink-soft); max-width: 30em; }
@media (min-width: 48em) {
  .modes { grid-template-columns: 1fr 1fr; }
  .mode:nth-child(odd) { padding-right: var(--gap); border-right: 1px solid var(--line); }
  .mode:nth-child(even) { padding-left: var(--gap); }
}

.steps { list-style: none; display: grid; counter-reset: step; }
.step { counter-increment: step; padding-block: var(--s-3); border-top: 1px solid var(--line); }
.step::before { content: counter(step); display: block; margin-bottom: 0.75rem; font-family: var(--font-title); font-size: var(--fs-lg); line-height: 1; color: var(--terra); }
.step strong { display: block; font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.4rem; }
.step p { color: var(--ink-soft); }
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
  .step { border-top-width: 1.5px; border-top-color: var(--ink); }
}

.facts { list-style: none; margin: var(--s-4) 0; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.facts__k { color: var(--ink-soft); }

.timeline { list-style: none; border-top: 1.5px solid var(--ink); }
.timeline li { display: grid; gap: 0.35rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.timeline__when { font-size: var(--fs-sm); color: var(--ink-soft); }
.timeline__what { font-size: var(--fs-md); font-weight: 600; }
.timeline__desc { color: var(--ink-soft); max-width: 36em; }
@media (min-width: 48em) { .timeline li { grid-template-columns: 11rem 1fr; column-gap: var(--gap); } .timeline__desc { grid-column: 2; } }

.principles { list-style: none; display: grid; gap: var(--s-4); }
.principles h3 { font-size: var(--fs-lg); margin-bottom: 0.6rem; }
.principles p { color: var(--ink-soft); max-width: 34em; }
@media (min-width: 64em) { .principles { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); } }

.dash-list { list-style: none; }
.dash-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }

/* Parcours (accueil, aplat terracotta) */
.profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); }
.profile__portrait { grid-column: 1 / -1; max-width: 24rem; }
.profile__text { grid-column: 1 / -1; }
.profile__quote { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-xl); line-height: 1.04; margin-bottom: var(--s-4); max-width: 16ch; }
@media (min-width: 48em) {
  .profile__portrait { grid-column: 1 / 6; max-width: none; }
  .profile__text { grid-column: 7 / -1; align-self: center; }
}
@media (min-width: 64em) { .profile__portrait { grid-column: 2 / 6; } }

/* Témoignages */
.quotes { display: grid; gap: var(--s-5); }
@media (min-width: 64em) { .quotes { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } .quotes > :nth-child(2) { margin-top: var(--s-5); } }
.quote { margin: 0; }
.quote blockquote { margin: 0; font-size: var(--fs-md); line-height: 1.45; }
.quote figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }

/* Appel final */
.closing__title { font-size: clamp(2.75rem, 1rem + 7vw, 8.5rem); line-height: 0.95; letter-spacing: -0.045em; }
.closing__body { margin-top: var(--s-4); }
.closing__mail { display: inline-block; margin-bottom: var(--s-3); font-size: var(--fs-lg); font-family: var(--font-title); letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; word-break: break-word; }
.closing__mail:hover { text-decoration-color: var(--terra); }
@media (min-width: 64em) {
  .closing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .closing__title { grid-column: 1 / 9; }
  .closing__body { grid-column: 9 / -1; margin: 0; }
}

/* 10. Emplacements d'images
   <figure class="ph"> : une <img> vers le fichier attendu + une étiquette.
   Fichier absent : l'étiquette reste. Fichier déposé : l'image la recouvre. */
.ph {
  --ph-bg: #e2d9cc;
  --ph-ink: var(--ink-soft);
  position: relative; margin: 0;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--ph-bg);
  overflow: hidden;
  container-type: inline-size;
}
.ph > img {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50% 50%);
}
.ph--contain > img { object-fit: contain; }
.js .ph > img { opacity: 0; transition: opacity 0.5s var(--ease); }
.js .ph > img.is-loaded { opacity: 1; }
.ph__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: 0.15rem; padding: 0.9rem 1rem;
  color: var(--ph-ink); font-size: 0.75rem; line-height: 1.45;
}
.ph__tag { font-weight: 600; }
.ph__name { display: none; }
.ph__file { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.6875rem; word-break: break-all; opacity: 0.8; }
@container (max-width: 15rem) { .ph__file { display: none; } }

.figcap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--ink-soft); }

/* 11. Pages intérieures */
.split { display: grid; gap: var(--s-4); }
@media (min-width: 48em) { .split { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }

.service { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.service:first-child { border-top: 1.5px solid var(--ink); }
.service__title { font-size: var(--fs-xl); max-width: 13ch; }
.service__body .lead { margin-bottom: var(--s-3); }
.service__lists { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.service__lists h3 { margin-bottom: 0.6rem; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
@media (min-width: 48em) { .service__lists { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
@media (min-width: 64em) { .service { grid-template-columns: 5fr 7fr; column-gap: var(--gap); } }

.anchors { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding-block: var(--s-3); border-block: 1px solid var(--line); font-size: var(--fs-sm); }
.anchors a { text-decoration: none; font-weight: 500; }
.anchors a:hover { text-decoration: underline; }

.aside-note { padding-left: var(--s-3); border-left: 2px solid var(--terra); font-size: var(--fs-sm); color: var(--ink-soft); max-width: 34em; }

/* Index des projets */
.index { list-style: none; border-top: 1.5px solid var(--ink); }
.index li { border-bottom: 1px solid var(--line); }
.index a { display: grid; gap: 0.35rem; padding-block: var(--s-3); text-decoration: none; transition: padding 0.35s var(--ease); }
.index a:hover { padding-left: 0.75rem; }
.index__name { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-lg); line-height: 1.05; }
.index a:hover .index__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.index__type { font-size: var(--fs-sm); color: var(--ink-soft); }
.index__sum { color: var(--ink-soft); max-width: 34em; }
@media (min-width: 48em) {
  .index a { grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: baseline; }
  .index__sum { grid-column: 2; grid-row: 1 / span 2; }
}

/* 12. Fiche projet */
.project-head { padding-top: clamp(2.5rem, 1.5rem + 4vw, 6rem); padding-bottom: var(--s-4); }
.project-head__title { font-size: clamp(3rem, 1rem + 8vw, 9rem); line-height: 0.92; letter-spacing: -0.045em; }
.project-head__type { margin-top: var(--s-3); font-size: var(--fs-md); color: var(--ink-soft); }

.colophon { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1.5px solid var(--ink); }
.colophon > div { padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--line); }
.colophon dt { margin-bottom: 0.2rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.colophon dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
@media (min-width: 64em) { .colophon { grid-template-columns: repeat(5, 1fr); } }

.project-text { display: grid; gap: var(--s-3); padding-block: var(--s-5); }
.project-text h2 { font-size: var(--fs-lg); }
@media (min-width: 64em) { .project-text { grid-template-columns: 4fr 8fr; column-gap: var(--gap); } .project-text > div { max-width: 38em; } }

.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); }
.plates > * { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .plates__l { grid-column: 1 / 7; }
  .plates__r { grid-column: 7 / -1; margin-top: var(--s-5); }
  .plates__wide { grid-column: 1 / -1; }
  .plates__detail { grid-column: 1 / 6; }
  .plates__note { grid-column: 7 / 12; align-self: end; }
}

.project-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); }
.project-nav a { display: block; padding: var(--s-4) 0; text-decoration: none; }
.project-nav a + a { text-align: right; border-left: 1px solid var(--line); }
.project-nav__dir { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0.35rem; }
.project-nav__name { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-lg); line-height: 1.05; }
.project-nav a:hover .project-nav__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* 13. Contact et formulaire */
.contact-grid { display: grid; gap: var(--s-5); }
@media (min-width: 64em) { .contact-grid { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gap) * 2); } }
.contact-mail { display: inline-block; margin: 0.4rem 0 var(--s-4); font-family: var(--font-title); letter-spacing: -0.02em; font-size: var(--fs-lg); word-break: break-word; }

.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 48em) { .form__row--2 { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
.field { display: grid; gap: 0.4rem; }
.field label, .field legend { font-size: var(--fs-sm); font-weight: 600; padding: 0; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-base);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--terra); margin-bottom: -1px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--terra); }
.field__hint { font-size: 0.75rem; color: var(--ink-soft); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.95rem;
  border: 1px solid var(--line); font-size: var(--fs-sm); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.choice span:hover { border-color: var(--ink); }
.choice input:checked + span { background: var(--terra); color: var(--paper); border-color: var(--terra); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__legal { font-size: 0.8125rem; color: var(--ink-soft); max-width: 40em; }
.form__submit { justify-self: start; }
.form__submit[disabled] { opacity: 0.4; cursor: not-allowed; }
.form__submit[disabled]:hover { background: var(--ink); }
.form__status { padding-left: var(--s-3); border-left: 2px solid var(--ink); font-size: var(--fs-sm); }
.form__status[hidden] { display: none; }
.form__status.is-error { border-left-color: var(--terra); }

/* 14. Pied de page */
.site-footer { padding-top: var(--s-5); padding-bottom: var(--s-4); background: var(--ink); color: var(--paper); --ink-soft: #b7aca1; --line: rgba(244, 239, 232, 0.18); }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); padding-bottom: var(--s-5); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand .brand__text { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1; }
.site-footer__brand .brand__logo { height: 3rem; }
.site-footer__brand p { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-sm); max-width: 26em; }
.site-footer__col { grid-column: span 6; }
.site-footer__col h2 { margin-bottom: 0.9rem; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.site-footer__col ul { list-style: none; display: grid; gap: 0.1rem; }
.site-footer__col a { display: inline-block; padding-block: 0.3rem; font-size: var(--fs-sm); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-soft); }
@media (min-width: 48em) {
  .site-footer__brand { grid-column: 1 / 6; }
  .site-footer__col { grid-column: span 2; }
  .site-footer__col:first-of-type { grid-column: 7 / span 2; }
}

/* 15. Légal, 404 */
.legal h2 { margin: var(--s-5) 0 1rem; font-size: var(--fs-lg); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: 40em; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1em; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 0 0 1em; }
.legal dt { color: var(--ink-soft); font-size: var(--fs-sm); }
.legal dd { margin: 0; }
@media (max-width: 40em) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: 0.6rem; } }
.notfound { min-height: 64vh; display: flex; align-items: center; }
.notfound__code { font-family: var(--font-title); font-size: clamp(6rem, 3rem + 14vw, 16rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--terra); }

/* 16. Éléments à compléter — rechercher « A-COMPLETER » dans le code */
.todo {
  background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(199,123,91, 0.08) 6px 12px);
  outline: 1px dashed var(--terra); outline-offset: 2px;
}
.section--terra .todo { outline-color: var(--paper); background: rgba(244, 239, 232, 0.08); }
.todo::before {
  content: "À compléter — "; font-family: var(--font-text); font-size: 0.75em; font-weight: 600;
  letter-spacing: 0.04em; color: var(--terra);
}
.section--terra .todo::before { color: var(--paper); }
p.todo, div.todo, blockquote.todo { padding: 0.5rem 0.75rem; }

/* 17. Animations, préférences */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { .site-header, .mobile-menu, .site-footer, .skip-link { display: none !important; } body { background: #fff; } }

/* 18. Raccords utilisés par les pages intérieures */
:root { --space-3: var(--s-3); --space-4: var(--s-4); --space-5: var(--s-5); --rule: var(--line); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--s-4); }
.section-title { font-size: var(--fs-xl); max-width: 16ch; }
.sheet { display: block; }
.sheet__body--narrow { max-width: 52rem; }
.grid > .sheet__body, .grid > .page-head__title, .grid > .page-head__intro { grid-column: 1 / -1; }
.page-head > .grid { display: block; }


/* 19. Page des offres (collaborer/)
   Offre 01 : aplat terracotta, titre grand format. Offres 02 et 03 : deux colonnes sur papier. */
.offers-intro p:not(.lead) { color: var(--ink-soft); max-width: 36em; }
.offers-intro .lead { margin-bottom: var(--s-3); }

.offer-num { margin-bottom: 1rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; }
.section--terra .offer-num { color: var(--paper); opacity: 0.85; }
.offer-label { margin: var(--s-4) 0 0.75rem; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.offer-list { list-style: none; border-top: 1px solid var(--line); }
.offer-list li { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.offer-price { margin-top: var(--s-3); padding-top: 1rem; border-top: 1.5px solid currentColor; font-weight: 600; }

.offer-main__title { font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem); line-height: 0.95; letter-spacing: -0.045em; max-width: 12ch; }
.offer-main__sub { margin-top: var(--s-3); font-size: var(--fs-md); opacity: 0.9; }
.offer-main__body { margin-top: var(--s-5); }
.offer-main__lead { font-size: var(--fs-md); line-height: 1.5; max-width: 34em; }
.offer-main__cols { display: grid; gap: 0 var(--gap); }
.offer-main .offer-list li { font-size: var(--fs-base); }
@media (min-width: 64em) {
  .offer-main .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .offer-main__head { grid-column: 1 / 6; }
  .offer-main__body { grid-column: 7 / -1; margin-top: 3.25rem; }
  .offer-main__cols { grid-template-columns: 1fr 1fr; }
}

.offers-sec { display: grid; gap: var(--s-5); }
.offer { max-width: 40rem; }
@media (max-width: 47.99em) { .offer { padding-top: var(--s-4); border-top: 1.5px solid var(--ink); } }
.offer__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 14ch; }
.offer__sub { margin: 0.75rem 0 var(--s-3); font-size: var(--fs-md); color: var(--ink-soft); }
.offer > p:not([class]) { max-width: 34em; }
.offer .offer-list li { font-size: var(--fs-sm); }
@media (min-width: 48em) {
  .offers-sec { grid-template-columns: 1fr 1fr; gap: 0; border-top: 1.5px solid var(--ink); }
  .offer { padding-top: var(--s-4); }
  .offer:first-child { padding-right: var(--gap); border-right: 1px solid var(--line); }
  .offer:last-child { padding-left: var(--gap); }
}

.offers-cta { display: grid; gap: var(--s-3); }
.offers-cta__title { font-size: var(--fs-xl); max-width: 18ch; }
@media (min-width: 64em) {
  .offers-cta { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .offers-cta__title { grid-column: 1 / 8; }
  .offers-cta > div { grid-column: 9 / -1; }
}

/* ==========================================================================
   20. V3 — boutons pleins, décor (images + aplats), sections de l'accueil
   ========================================================================== */
:root { --terra-deep: #a9613f; }

/* Boutons : plein terracotta (principal), contour (secondaire). */
.btn, .go {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--terra); background: var(--terra); color: var(--paper);
  font: 600 var(--fs-base) / 1.1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.btn:hover, .go:hover { background: var(--terra-deep); border-color: var(--terra-deep); padding-right: 1.5rem; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: var(--fs-sm); }
.btn--sm[aria-current="page"] { background: var(--ink); border-color: var(--ink); }
/* Sur aplat terracotta : bouton papier */
.section--terra .btn, .section--terra .go { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.section--terra .btn:hover, .section--terra .go:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.section--terra .btn--ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
.section--terra .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-row { gap: 0.75rem; }
.nav__list { align-items: center; }

/* Ouverture de l'accueil : texte + collage d'images sur aplat */
.h3 { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--s-6); }
.h3__grid { display: grid; gap: var(--s-5); align-items: center; }
.h3__title { font-size: clamp(2.6rem, 1.2rem + 5.2vw, 6.25rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; }
.h3__lead { margin-top: var(--s-4); font-size: var(--fs-md); line-height: 1.5; max-width: 30em; }
.h3 .btn-row { margin-top: var(--s-4); }
.h3__place { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 64em) {
  .h3__grid { grid-template-columns: 1.05fr 1fr; gap: var(--gap); }
}

.collage { position: relative; aspect-ratio: 1 / 0.95; max-width: 100%; }
.collage__aplat { position: absolute; top: 10%; bottom: -12%; left: 22%; right: -50vw; background: var(--terra); }
.collage > div:not(.collage__aplat) { position: absolute; will-change: transform; }
.collage__a { left: 0; top: 30%; width: 72%; z-index: 2; }
.collage__b { right: 6%; top: 0; width: 38%; z-index: 3; }
.collage__c { left: 44%; bottom: 0; width: 30%; z-index: 4; }
.collage .ph, .stack .ph, .bio__frame .ph { --ph-bg: #ddd2c2; }

/* Deux situations */
.duo { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.duo__item { padding-top: var(--s-3); border-top: 1.5px solid var(--ink); }
.duo__item h3 { font-size: var(--fs-lg); margin-bottom: 1rem; }
.duo__item p { max-width: 32em; }
@media (min-width: 48em) { .duo { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 2); } }

/* Production : images empilées sur aplat sable + liste */
.split2 { display: grid; gap: var(--s-5); }
.stack { position: relative; aspect-ratio: 1 / 1.05; max-width: 100%; }
.stack__aplat { position: absolute; left: -50vw; right: 18%; top: 14%; bottom: 8%; background: var(--sand); }
.stack > div:not(.stack__aplat) { position: absolute; }
.stack__a { left: 0; top: 0; width: 82%; z-index: 2; }
.stack__b { right: 0; bottom: 0; width: 48%; z-index: 3; }
.stack--head { aspect-ratio: 1 / 0.9; }
.stack--head .stack__aplat { left: 12%; right: -50vw; top: 0; bottom: 14%; background: var(--terra); }
.stack--head .stack__b { width: 92%; right: auto; left: 0; bottom: 6%; }
.section { position: relative; overflow: clip; }
.row--compact { padding-block: 1.1rem; }
.row--compact .row__title { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); }
@media (min-width: 64em) {
  .split2 { grid-template-columns: 5fr 7fr; gap: calc(var(--gap) * 2); align-items: start; }
  .split2__media { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Trois façons de travailler */
.trio { display: grid; gap: var(--gap); margin-top: var(--s-5); }
.trio a { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--s-4) clamp(1.25rem, 3vw, 2.5rem); text-decoration: none; transition: transform 0.35s var(--ease), background-color 0.3s; }
.trio a:hover { transform: translateY(-4px); }
.trio__main { background: var(--terra); color: var(--paper); }
.trio__main:hover { background: var(--terra-deep); }
.trio__item { background: var(--sand); }
.trio__title { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); font-size: var(--fs-lg); line-height: 1.05; }
.trio__main .trio__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.trio__sub { font-size: var(--fs-sm); font-weight: 600; opacity: 0.85; }
.trio__text { max-width: 32em; opacity: 0.92; }
.trio__more { margin-top: auto; padding-top: var(--s-3); font-weight: 600; font-size: var(--fs-sm); }
.trio__more::after { content: " →"; transition: margin 0.3s var(--ease); }
.trio a:hover .trio__more::after { margin-left: 0.35em; }
.trio__main .offer-num { color: var(--paper); opacity: 0.85; margin: 0; }
.trio :focus-visible, .trio a:focus-visible { outline-offset: 3px; }
@media (min-width: 64em) {
  .trio { grid-template-columns: 1.5fr 1fr 1fr; }
  .trio__main { min-height: 26rem; }
}

/* Portrait sur aplat décalé */
.bio { display: grid; gap: var(--s-5); align-items: center; }
.bio__frame { position: relative; max-width: 26rem; }
.bio__frame::before { content: ""; position: absolute; inset: 12% -12% -10% 14%; background: var(--terra); z-index: 0; }
.bio__frame .ph { z-index: 1; }
.bio__sig { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.bio .btn-row { margin-top: var(--s-4); }
@media (min-width: 48em) { .bio { grid-template-columns: 5fr 7fr; gap: calc(var(--gap) * 2); } }

/* En-tête de page avec visuel (Prestations, À propos) */
.ph3 { display: grid; gap: var(--s-5); align-items: center; position: relative; }
.ph3__media { max-width: 30rem; width: 100%; }
@media (min-width: 64em) { .ph3 { grid-template-columns: 7fr 5fr; gap: calc(var(--gap) * 2); } .ph3__media { justify-self: end; } }
.page-head.ph3 { overflow-x: clip; overflow-y: visible; }
.anchors { gap: 0.5rem 1.5rem; }
.anchors a { text-decoration: none; font-weight: 500; font-size: var(--fs-sm); }
.anchors a:hover { text-decoration: underline; }
html, body { overflow-x: clip; }

/* Témoignages sur trois colonnes */
@media (min-width: 64em) {
  .quotes--3 { grid-template-columns: repeat(3, 1fr); }
  .quotes--3 > :nth-child(2) { margin-top: var(--s-4); }
  .quotes--3 > :nth-child(3) { margin-top: var(--s-5); }
}
.quote blockquote { font-family: var(--font-title); letter-spacing: -0.01em; }

/* Survol des projets dans la bande */
.work .ph { overflow: hidden; }
.work .ph > img { transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); }
.work:hover .ph > img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
  .trio a:hover { transform: none; }
}

/* 21. Fiches projet : séquences d'images aux formats naturels */
.plates3 { display: grid; gap: var(--gap); }
.plates3:empty { display: none; }
.plates-row { display: grid; gap: var(--gap); align-items: start; }
.plates-row + .plates-row { margin-top: var(--gap); }
.plate--solo { width: min(100%, 44rem); margin-inline: auto; }
@media (min-width: 48em) {
  .plates-row--2 { grid-template-columns: 1fr 1fr; }
  .plates-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.ph.has-image .ph__label { display: none; }
.ph.has-image { background: transparent; }

/* ==========================================================================
   22. V5 — accueil « qui claque » : grande typo, marquee, liste à aperçu,
   sections encre, apparitions masquées. Sobre en couleurs, fort en échelle.
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* Grain papier très léger sur toute la page */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.btn--lg { min-height: 56px; padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn span[aria-hidden] { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--terra); border-color: var(--terra); color: var(--paper); }

/* Hero */
.x-hero { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); overflow: hidden; }
.x-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-soft); }
.x-hero__avail { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.x-hero__avail i { width: 8px; height: 8px; border-radius: 50%; background: #3f8f5a; box-shadow: 0 0 0 0 rgba(63,143,90,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,143,90,.45); } 70% { box-shadow: 0 0 0 9px rgba(63,143,90,0); } 100% { box-shadow: 0 0 0 0 rgba(63,143,90,0); } }
.x-hero__title {
  margin-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  font-size: clamp(2.9rem, 0.4rem + 9vw, 10rem);
  font-weight: 500; line-height: 0.9; letter-spacing: -0.055em;
}
.x-hero__title em { font-style: normal; color: var(--terra); }
.x-hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.x-hero__title .line > span { display: inline-block; }
.js .x-hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.js .x-hero__title.is-in .line > span { transform: none; }
.js .x-hero__title.is-in .line:nth-child(2) > span { transition-delay: 0.08s; }
.js .x-hero__title.is-in .line:nth-child(3) > span { transition-delay: 0.16s; }
@media (min-width: 64em) { .x-hero__title .line { white-space: nowrap; } .x-hero__title .line--2 { padding-left: 1.1em; } }
.pill { display: inline-block; vertical-align: middle; width: 1.55em; height: 0.78em; margin: 0 0.06em; border-radius: 999px; overflow: hidden; transform: translateY(-0.06em); background: var(--sand); }
.pill img { width: 100%; height: 100%; object-fit: cover; }
.x-hero__foot { display: grid; gap: var(--s-4); margin-top: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.x-hero__lead { font-size: var(--fs-md); line-height: 1.5; max-width: 30em; }
@media (min-width: 64em) {
  .x-hero__foot { grid-template-columns: 1fr auto; align-items: end; }
}

/* Marquee de réalisations */
.marquee { position: relative; overflow: hidden; padding-block: 0 clamp(2rem, 4vw, 4rem); }
.marquee::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; bottom: 0; background: var(--terra); z-index: 0; }
.marquee__track { position: relative; z-index: 1; display: flex; gap: clamp(0.75rem, 1.5vw, 1.5rem); width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item { position: relative; flex: none; height: clamp(14rem, 9rem + 14vw, 26rem); overflow: hidden; }
.marquee__item img { height: 100%; width: auto; max-width: none; transition: transform 0.8s var(--ease-out); }
.marquee__item:hover img { transform: scale(1.04); }
.marquee__item span { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.35rem 0.7rem; background: var(--paper); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.marquee__item:hover span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* Logos clients */
.logos-band { background: var(--terra); color: var(--paper); padding-block: 0 clamp(2rem, 4vw, 3.5rem); }
.logos { display: grid; gap: 1.25rem; align-items: center; }
.logos__label { font-size: var(--fs-sm); opacity: 0.85; }
.logos__list { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); list-style: none; }
.logos__list img { height: clamp(26px, 2.6vw, 38px); width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.logos__word { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem); opacity: 0.9; }
@media (min-width: 64em) { .logos { grid-template-columns: 14rem 1fr; } }

/* Deux situations */
.x-duo { padding-block: var(--s-6); }
.x-duo__grid { display: grid; gap: var(--s-5); }
.x-duo__q { font-family: var(--font-title); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; font-size: clamp(2.4rem, 1rem + 4.6vw, 5.5rem); margin-bottom: var(--s-3); }
.x-duo__item p:not(.x-duo__q) { max-width: 30em; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-soft); }
.x-duo__item:nth-child(2) .x-duo__q { color: var(--terra); }
@media (min-width: 64em) { .x-duo__grid { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 2); } .x-duo__item:nth-child(2) { margin-top: var(--s-6); } }

/* Titres de section */
.x-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); align-items: end; }
.x-title { font-size: clamp(2.5rem, 1rem + 5vw, 6rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; }
.x-head__aside { max-width: 26em; color: var(--ink-soft); }
.x-head__aside .btn { margin-top: var(--s-3); }
@media (min-width: 64em) { .x-head { grid-template-columns: 1fr auto; } }

/* Liste à aperçu d'image */
.xlist { list-style: none; border-top: 1.5px solid var(--ink); }
.xlist__item { border-bottom: 1px solid var(--line); }
.xlist__link { position: relative; display: grid; grid-template-columns: 2.5rem 1fr auto; column-gap: var(--gap); row-gap: 0.4rem; align-items: baseline; padding-block: clamp(1.1rem, 0.8rem + 1.2vw, 2rem); text-decoration: none; transition: color 0.3s, padding 0.5s var(--ease-out); }
.xlist__num { font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.xlist__title { font-family: var(--font-title); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-size: clamp(1.75rem, 1rem + 3vw, 4rem); }
.xlist__text { grid-column: 2; color: var(--ink-soft); max-width: 32em; }
.xlist__arrow { grid-column: 3; grid-row: 1; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); transition: transform 0.5s var(--ease-out); }
.xlist__thumb { display: none; }
.xlist__link:hover { color: var(--terra); padding-left: 1rem; }
.xlist__link:hover .xlist__arrow { transform: translateX(6px) rotate(-45deg); }
@media (min-width: 64em) {
  .xlist__link { grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr) auto; }
  .xlist__text { grid-column: 3; }
  .xlist__arrow { grid-column: 4; }
}
@media (max-width: 47.99em) {
  .xlist__thumb { display: block; grid-column: 2 / -1; width: 100%; height: 9rem; object-fit: cover; margin-top: 0.5rem; }
}
.xlist-preview { position: fixed; left: 0; top: 0; z-index: 60; width: 20rem; height: 14rem; object-fit: cover; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.xlist-preview.is-on { opacity: 1; }

/* Section encre et projets choisis */
.section--ink { background: var(--ink); color: var(--paper); --ink-soft: #b7aca1; --line: rgba(244,239,232,.18); }
.section--ink :focus-visible { outline-color: var(--paper); }
.feats { display: grid; gap: var(--s-4) var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.feat { grid-column: 1 / -1; display: block; text-decoration: none; color: inherit; }
.feat__media { display: block; overflow: hidden; background: #2b2420; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.feat:hover .feat__media img { transform: scale(1.04); }
.feat__meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: 1rem; }
.feat__name { font-family: var(--font-title); font-weight: 500; letter-spacing: -0.035em; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); line-height: 1; }
.feat__type { font-size: var(--fs-sm); color: var(--ink-soft); text-align: right; }
.feat:hover .feat__name { color: #e9a07f; }
@media (min-width: 48em) {
  .feat.f1 { grid-column: 1 / 8; } .feat.f1 .feat__media { aspect-ratio: 4 / 3; }
  .feat.f2 { grid-column: 9 / 13; margin-top: 18%; } .feat.f2 .feat__media { aspect-ratio: 3 / 4; }
  .feat.f3 { grid-column: 1 / 6; } .feat.f3 .feat__media { aspect-ratio: 4 / 3; }
  .feat.f4 { grid-column: 7 / 13; margin-top: 4%; } .feat.f4 .feat__media { aspect-ratio: 4 / 5; }
  .feat.f5 { grid-column: 2 / 7; } .feat.f5 .feat__media { aspect-ratio: 3 / 4; }
  .feat.f6 { grid-column: 8 / 13; margin-top: 12%; } .feat.f6 .feat__media { aspect-ratio: 1 / 1; }
}
@media (max-width: 47.99em) { .feat .feat__media { aspect-ratio: 4 / 3; } }

/* Témoignages */
.qs { display: grid; gap: var(--s-5); }
.q { margin: 0; padding-top: var(--s-3); border-top: 1.5px solid var(--ink); }
.q blockquote { margin: 0; font-family: var(--font-title); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); }
.q blockquote::before { content: "“"; display: block; height: 0.6em; margin-bottom: 0.2em; font-size: 3em; line-height: 1; color: var(--terra); }
.q figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); display: grid; gap: 0.1rem; }
.q figcaption strong { color: var(--ink); font-weight: 600; }
@media (min-width: 64em) { .qs { grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--gap) * 1.5); } }

/* Appel final */
.x-cta { background: var(--terra); color: var(--paper); padding-block: var(--s-6); }
.x-cta :focus-visible { outline-color: var(--paper); }
.x-cta__kicker { font-size: var(--fs-md); opacity: 0.9; max-width: 30em; }
.x-cta__title { margin-top: var(--s-3); font-size: clamp(3rem, 0.8rem + 9vw, 10.5rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.055em; }
.x-cta__title a { text-decoration: none; display: inline-block; }
.x-cta__title a span { display: inline-block; transition: transform 0.6s var(--ease-out); }
.x-cta__title a:hover span { transform: translateX(0.12em) rotate(-45deg); }
.x-cta__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(244,239,232,.35); }
.x-cta__mail { font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.5s var(--ease-out); word-break: break-word; }
.x-cta__mail:hover { background-size: 100% 2px; }

/* Apparitions : masque montant pour les images */
.js .feat.reveal .feat__media img, .js .bio__frame .ph > img.is-loaded { clip-path: inset(0 0 0 0); }
.js .feat.reveal:not(.is-in) .feat__media { clip-path: inset(12% 0 0 0); }
.feat__media { transition: clip-path 1.2s var(--ease-out); }

/* Grand logo en pied de page */
.site-footer__brand .brand__logo { height: clamp(3rem, 2rem + 3vw, 5rem); }

@media (prefers-reduced-motion: reduce) {
  .js .x-hero__title .line > span { transform: none; }
  .x-hero__avail i { animation: none; }
  .js .feat.reveal:not(.is-in) .feat__media { clip-path: none; }
}

/* ==========================================================================
   23. V6 — système de l'accueil (préfixe u-)
   3 modèles de section : en-tête de section + contenu, fond papier ou sable.
   4 tailles de texte : h1, h2, h3, texte. Terracotta = actions + offre principale.
   ========================================================================== */
body::after { display: none; } /* grain retiré */
.u-sec { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.u-sec--sand { background: var(--sand); }
.u-eyebrow { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 1.25rem; }
.u-h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; max-width: 13ch; }
.u-h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.u-h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.u-lead { font-size: var(--fs-md); line-height: 1.55; max-width: 34em; }
.u-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.u-more { font-weight: 600; font-size: var(--fs-sm); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.u-more:hover { color: var(--terra); }

/* 1 · Hero */
.u-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.u-hero__grid { display: grid; gap: var(--s-5); align-items: center; }
.u-hero .u-lead { margin-top: 1.5rem; }
.u-hero .btn-row { margin-top: 2rem; }
.u-hero__media { display: block; position: relative; text-decoration: none; }
.u-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.u-hero__cap { display: block; margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 64em) { .u-hero__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 2); } }
.u-logos { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); align-items: center; }
.u-logos p { font-size: var(--fs-sm); color: var(--ink-soft); }
.u-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.5rem, 3vw, 3rem); list-style: none; }
.u-logos img { height: clamp(22px, 2vw, 30px); width: auto; filter: brightness(0); opacity: 0.6; }
.u-logos__w { font-weight: 600; letter-spacing: -0.01em; opacity: 0.6; font-size: 1.05rem; }
@media (min-width: 64em) { .u-logos { grid-template-columns: 13rem 1fr; } }

/* 2 · Pour qui */
.u-two { display: grid; gap: var(--s-4); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.u-two > div { padding-top: 1.25rem; border-top: 1.5px solid var(--ink); }
.u-two p { max-width: 34em; color: var(--ink-soft); }
@media (min-width: 48em) { .u-two { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 2); } }

/* 3 · Domaines */
.u-doms { display: grid; gap: 1.5rem var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-dom { display: grid; gap: 0.35rem; text-decoration: none; }
.u-dom__img { display: block; overflow: hidden; margin-bottom: 0.6rem; background: var(--sand); }
.u-dom__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.u-dom:hover .u-dom__img img { transform: scale(1.04); }
.u-dom__t { font-weight: 600; font-size: 1.0625rem; }
.u-dom:hover .u-dom__t { color: var(--terra); }
.u-dom__d { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 64em) { .u-doms { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 4 · Réalisations : un seul format de vignette */
.u-cards { display: grid; gap: 2rem var(--gap); grid-template-columns: 1fr; }
.u-card { display: grid; gap: 0.25rem; text-decoration: none; }
.u-card__img { display: block; overflow: hidden; margin-bottom: 0.75rem; background: var(--paper); }
.u-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.u-card:hover .u-card__img img { transform: scale(1.04); }
.u-card__t { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.u-card:hover .u-card__t { color: var(--terra); }
.u-card__d { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 40em) { .u-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .u-cards { grid-template-columns: repeat(3, 1fr); } }

/* 5 · Offres + étapes */
.u-offers { display: grid; gap: var(--gap); }
.u-offer { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--sand); text-decoration: none; transition: transform 0.4s var(--ease-out); }
.u-offer:hover { transform: translateY(-3px); }
.u-offer--main { background: var(--terra); color: var(--paper); }
.u-offer__tag { font-size: var(--fs-sm); font-weight: 600; opacity: 0.85; }
.u-offer__t { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.u-offer__d { opacity: 0.9; }
.u-offer__p { margin-top: auto; padding-top: 1rem; border-top: 1px solid currentColor; font-size: var(--fs-sm); font-weight: 600; }
.u-offer--main .u-offer__p { border-color: rgba(244,239,232,.5); }
@media (min-width: 64em) { .u-offers { grid-template-columns: 1.4fr 1fr 1fr; } }
.u-steps { list-style: none; counter-reset: s; display: grid; gap: 1.25rem var(--gap); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.u-steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.15rem 0.75rem; }
.u-steps li::before { content: counter(s); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; }
.u-steps strong { font-weight: 600; }
.u-steps span { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 64em) { .u-steps { grid-template-columns: repeat(3, 1fr); } }

/* 6 · Confiance */
.u-trust { display: grid; gap: var(--s-4); align-items: start; }
.u-trust__img img { width: 100%; max-width: 26rem; aspect-ratio: 3 / 4; object-fit: cover; }
.u-path { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.5rem 0 2rem; }
.u-path li { font-size: var(--fs-sm); font-weight: 500; padding: 0.4rem 0.8rem; border: 1px solid var(--ink); }
.u-path li:last-child { background: var(--ink); color: var(--paper); }
.u-qs { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.u-q { margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.u-q blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.u-q figcaption { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.u-q figcaption strong { color: var(--ink); }
@media (min-width: 64em) {
  .u-trust { grid-template-columns: 5fr 7fr; gap: calc(var(--gap) * 2); }
  .u-trust__img { position: sticky; top: calc(var(--header-h) + 2rem); }
  .u-qs { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
}

/* 7 · FAQ */
.u-faq { display: grid; gap: var(--s-4); }
.u-faq__i { border-bottom: 1px solid var(--line); }
.u-faq__i:first-child { border-top: 1.5px solid var(--ink); }
.u-faq__i summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; }
.u-faq__i summary::-webkit-details-marker { display: none; }
.u-faq__i summary::after { content: "+"; font-size: 1.4rem; line-height: 1; transition: transform 0.3s var(--ease-out); }
.u-faq__i[open] summary::after { transform: rotate(45deg); }
.u-faq__i summary:hover { color: var(--terra); }
.u-faq__i p { padding-bottom: 1.25rem; max-width: 40em; color: var(--ink-soft); }
@media (min-width: 64em) { .u-faq { grid-template-columns: 4fr 8fr; gap: calc(var(--gap) * 2); } }

/* 8 · Appel à l'action */
.u-cta { background: var(--terra); color: var(--paper); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.u-cta :focus-visible { outline-color: var(--paper); }
.u-cta__in { display: grid; gap: var(--s-4); align-items: end; }
.u-cta p { margin-top: 1rem; max-width: 32em; opacity: 0.92; }
.u-cta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.u-cta__mail { color: var(--paper); font-weight: 500; }
@media (min-width: 64em) { .u-cta__in { grid-template-columns: 1.3fr 1fr; } .u-cta__act { justify-content: flex-end; } }

/* Bouton contact collant sur mobile */
.u-sticky { display: none; }
@media (max-width: 47.99em) {
  .u-sticky { display: inline-flex; position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 45; box-shadow: 0 6px 20px rgba(31,25,21,.18); transform: translateY(160%); transition: transform 0.4s var(--ease-out); }
  .u-sticky.is-on { transform: none; }
  body:has(.u-sticky) .site-footer { padding-bottom: 6rem; }
}

/* ==========================================================================
   24. V7 — titres Prata, ornement tiré du logo, pictogrammes fins
   ========================================================================== */
@font-face {
  font-family: "Prata";
  src: url("../assets/fonts/prata.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --font-title: "Prata", "Didot", "Bodoni 72", Georgia, serif;
  --title-weight: 400;
  --title-tracking: -0.015em;
  --logo: #ad8e6f;
}
h1, h2, .u-h1, .u-h2, .u-offer__t, .u-card__t, .page-head__title, .project-head__title, .closing__title,
.service__title, .offer-main__title, .offer__title, .trio__title, .index__name, .work__name, .project-nav__name,
.u-dom__t, .profile__quote, .title, .row__title, .x-title {
  font-family: var(--font-title); font-weight: 400;
}
.u-h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 14ch; }
.u-h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.1; letter-spacing: -0.015em; }
.u-h3 { font-family: var(--font-text); }
.page-head__title, .project-head__title { letter-spacing: -0.02em; line-height: 1.04; }
.site-footer__col h2 { font-family: var(--font-text); }

/* Ornement : le symbole du logo, en masque, coloré par la feuille de style */
.u-orn {
  display: block; width: 26px; height: 26px; margin-bottom: 1rem; background: var(--terra);
  -webkit-mask: url("../assets/logo/ornement.svg") center / contain no-repeat;
          mask: url("../assets/logo/ornement.svg") center / contain no-repeat;
}
.u-orn--sm { display: inline-block; width: 14px; height: 14px; margin: 0 0.6rem 0 0; vertical-align: -2px; }
.u-eyebrow { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.u-wm {
  position: absolute; pointer-events: none; z-index: 0; background: var(--terra); opacity: 0.08;
  -webkit-mask: url("../assets/logo/ornement.svg") center / contain no-repeat;
          mask: url("../assets/logo/ornement.svg") center / contain no-repeat;
}
.u-hero, .u-cta { position: relative; overflow: hidden; }
.u-hero > .wrap, .u-cta > .wrap { position: relative; z-index: 1; }
.u-wm--hero { width: clamp(16rem, 34vw, 32rem); aspect-ratio: 1; right: -9rem; bottom: -13rem; opacity: 0.07; }
.u-wm--cta { width: clamp(16rem, 30vw, 28rem); aspect-ratio: 1; right: -5rem; top: -6rem; background: var(--paper); opacity: 0.1; }
.u-cta .u-h2 { color: var(--paper); }

/* Domaines : pictogrammes au trait */
.u-doms { gap: 0 var(--gap); }
.u-dom { padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--line); gap: 0.5rem; }
.u-dom__ico { display: block; width: 44px; height: 44px; margin-bottom: 1rem; color: var(--terra); transition: transform 0.5s var(--ease-out); }
.u-dom__ico svg { width: 100%; height: 100%; }
.u-dom:hover .u-dom__ico { transform: translateY(-3px); }
.u-dom__t { font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
@media (min-width: 64em) { .u-dom { border-top: 1.5px solid var(--ink); } }

/* Cartes, offres : titres en Prata */
.u-card__t { font-size: 1.3rem; }
.u-offer__t { letter-spacing: -0.01em; }
.u-trust__img img { aspect-ratio: 3 / 4; object-position: 50% 20%; }

/* ==========================================================================
   25. V8 — finitions
   ========================================================================== */
/* En-tête : plus d'air, filet permanent, logo plus présent */
:root { --header-h: 5.25rem; }
.site-header { border-bottom-color: var(--line); }
.brand.has-logo .brand__logo, .brand__logo { height: 2.6rem; }
.nav__list { gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav__link { font-size: 0.9375rem; letter-spacing: 0.01em; }
.btn--sm { min-height: 42px; padding: 0.6rem 1.25rem; }

/* Boutons : poids, interlettrage, flèche */
.btn { letter-spacing: 0.01em; font-weight: 600; }
.btn--lg { padding-inline: 1.9rem; }

/* Cadre décalé (ombre graphique en aplat) */
.u-frame { position: relative; display: block; }
.u-frame::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--terra); z-index: 0; }
.u-frame--left::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }
.u-frame img { position: relative; z-index: 1; display: block; }
.u-hero__media { padding-right: 1.25rem; }
.u-hero__cap { display: flex; align-items: center; margin-top: 2rem; letter-spacing: 0.02em; }
.u-hero__media:hover .u-frame img { filter: brightness(1.03); }

/* Logos : cases égales séparées par des filets */
.u-logos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.u-logos li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0.75rem 1rem; border-left: 1px solid var(--line); }
.u-logos li:nth-child(2n+1) { border-left: 0; }
.u-logos img { height: 26px; opacity: 0.55; transition: opacity 0.3s; }
.u-logos li:hover img { opacity: 0.9; }
.u-logos__w { font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; opacity: 0.65; text-align: center; }
@media (min-width: 48em) { .u-logos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-logos li:nth-child(2n+1) { border-left: 1px solid var(--line); } .u-logos li:nth-child(4n+1) { border-left: 0; } }
@media (min-width: 80em) { .u-logos ul { grid-template-columns: repeat(7, minmax(0, 1fr)); } .u-logos li:nth-child(4n+1) { border-left: 1px solid var(--line); } .u-logos li:first-child { border-left: 0; } }

/* Pour qui : numéros et titres en Prata */
.u-idx { display: block; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; color: var(--terra); }
.u-two > div { border-top: 2px solid var(--terra); padding-top: 1.5rem; }
.u-two .u-h3 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 0.9rem; }
.u-two p { font-size: 1.0625rem; line-height: 1.65; }

/* Liens « en savoir plus » révélés au survol (toujours visibles au tactile) */
.u-go { font-size: 0.8125rem; font-weight: 600; color: var(--terra); margin-top: 0.5rem; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
@media (hover: hover) {
  .u-go { opacity: 0; transform: translateX(-6px); }
  .u-dom:hover .u-go, .u-card:hover .u-go, .u-dom:focus-visible .u-go, .u-card:focus-visible .u-go { opacity: 1; transform: none; }
}
.u-dom__d, .u-card__d { line-height: 1.5; }

/* Cartes projets */
.u-cards { gap: 2.75rem var(--gap); }
.u-card__img { margin-bottom: 1rem; }
.u-card__t { font-size: 1.4rem; line-height: 1.15; }

/* Offres */
.u-offer { gap: 0.9rem; }
.u-offer__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; }
.u-offer__p { display: flex; justify-content: space-between; gap: 1rem; }
.u-offer__p span { transition: transform 0.4s var(--ease-out); }
.u-offer:hover .u-offer__p span { transform: translateX(4px); }
.u-offer:not(.u-offer--main) { background: transparent; border: 1px solid var(--ink); }
.u-offer:not(.u-offer--main):hover { background: var(--sand); }

/* Étapes reliées par un filet */
@media (min-width: 64em) {
  .u-steps { position: relative; }
  .u-steps::before { content: ""; position: absolute; left: 1rem; right: 33%; top: 1rem; height: 1px; background: var(--line); }
  .u-steps li { position: relative; }
  .u-steps li::before { background: var(--paper); position: relative; z-index: 1; }
}
.u-steps li::before { border-color: var(--terra); color: var(--terra); }

/* Confiance : citations en Prata */
.u-trust__img { padding-left: 1.25rem; }
.u-q blockquote { font-family: var(--font-title); font-size: 1.15rem; line-height: 1.45; }
.u-q { border-top: 2px solid var(--terra); padding-top: 1.25rem; }
.u-path li { border-color: var(--line); background: var(--paper); }
.u-path li:last-child { background: var(--terra); color: var(--paper); border-color: var(--terra); }

/* FAQ */
.u-faq__i summary { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); padding: 1.35rem 0; }
.u-faq__i summary::after { color: var(--terra); font-family: var(--font-text); font-weight: 300; font-size: 1.6rem; }
.u-faq__i p { font-size: 1.0625rem; line-height: 1.65; }

/* Titres de section : sous-titre aligné, ornement */
.u-head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.u-orn { width: 22px; height: 22px; margin-bottom: 1.1rem; }

/* Pied de page : filigrane discret */
.site-footer { position: relative; overflow: hidden; }
.site-footer::after { content: ""; position: absolute; right: -6rem; bottom: -8rem; width: 26rem; aspect-ratio: 1; background: var(--logo); opacity: 0.08; pointer-events: none;
  -webkit-mask: url("../assets/logo/ornement.svg") center / contain no-repeat; mask: url("../assets/logo/ornement.svg") center / contain no-repeat; }
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer__brand .brand.has-logo .brand__logo, .site-footer__brand .brand__logo { height: clamp(3rem, 2.4rem + 1.5vw, 4rem); }
.u-logos__w { white-space: nowrap; font-size: 0.98rem; }
@media (min-width: 80em) and (max-width: 89.99em) { .u-logos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .u-logos li:nth-child(4n+1) { border-left: 0; } .u-logos li:first-child { border-left: 0; } }

/* ==========================================================================
   26. V9 — texte en Albert Sans, corrections d'alignement
   ========================================================================== */
@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root { --font-text: "Albert Sans", "Helvetica Neue", Arial, sans-serif; }
body { font-family: var(--font-text); }
.btn, .go, .menu-toggle, .form__submit { font-family: var(--font-text); }

/* Ornement de la ligne d'introduction : taille réelle, aligné sur le texte */
.u-orn.u-orn--sm { display: inline-block; width: 14px; height: 14px; margin: 0 0.6rem 0 0; vertical-align: -2px; }
.u-eyebrow { display: flex; align-items: center; }
.u-hero__cap { gap: 0; }

/* Logos : intitulé centré verticalement sur la rangée */
.u-logos { align-items: center; }
.u-logos p { margin: 0; }

/* Domaines : pictogramme, titre, texte et lien alignés d'une colonne à l'autre */
@media (min-width: 64em) {
  .u-doms { grid-template-rows: repeat(4, auto); }
  .u-dom { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0.5rem; align-content: start; }
  .u-dom__ico { margin-bottom: 0.5rem; }
}

/* Offres secondaires : titres sur deux lignes au plus, même hauteur */
.u-offer:not(.u-offer--main) .u-offer__t { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem); }
@media (min-width: 64em) {
  .u-offer:not(.u-offer--main) .u-offer__t { min-height: 2.25em; }
  .u-offer--main .u-offer__t { min-height: 0; }
}

/* Étapes : filet de liaison retiré (il traversait les titres) */
.u-steps::before { display: none !important; }
.u-steps li { align-items: start; }
.u-steps li::before { margin-top: -0.15rem; }

/* V10 — logos clients : hauteurs compensées selon le format pour un poids optique homogène */
.u-logos img { max-width: 100%; object-fit: contain; }
.u-logos img.u-logo--mid { height: 30px; }
.u-logos img.u-logo--tall { height: 34px; }
.u-logos img.u-logo--square { height: 46px; }

/* ==========================================================================
   27. V12 — En-tête d'accueil « ruban de soie » (fond animé en canvas, js/main.js §12)
   ========================================================================== */
.hx-bg { position: relative; isolation: isolate; overflow: clip; padding: 0; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
.hx-bg__layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-bg__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3.5rem, 8vh, 7rem) clamp(2.5rem, 6vh, 5rem); }
.hx-bg__h1 { font-family: var(--font-title); font-weight: 400; font-size: clamp(2.7rem, 1rem + 4.4vw, 5.6rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 13ch; margin: 0; }
.hx-bg__lead { margin-top: clamp(1.5rem, 2.5vw, 2.25rem) !important; max-width: 31em; }
.hx-bg__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hx-bg__logos { padding-bottom: clamp(1.5rem, 3vh, 2.5rem); }
.hx-bg .u-logos { margin-top: 0; }
.hx-silk { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.22) 15%, #000 55%); mask-image: linear-gradient(100deg, rgba(0,0,0,.22) 15%, #000 55%); }
@media (max-width: 63.99em) { .hx-silk { -webkit-mask-image: linear-gradient(rgba(0,0,0,.18) 35%, #000 75%); mask-image: linear-gradient(rgba(0,0,0,.18) 35%, #000 75%); } }
@media (prefers-reduced-motion: no-preference) {
  .hx-bg__inner > * { animation: hx-up 1.1s var(--ease) both; }
  .hx-bg__inner > :nth-child(2) { animation-delay: .1s } .hx-bg__inner > :nth-child(3) { animation-delay: .22s } .hx-bg__inner > :nth-child(4) { animation-delay: .34s }
  .hx-bg__layer { animation: hx-fade 2.2s .2s ease both; }
}
@keyframes hx-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes hx-fade { from { opacity: 0; } }

/* ==========================================================================
   28. V13 — « Pour qui » : deux cartes pleines (terracotta / encre) avec fils de soie
   ========================================================================== */
.u-who__aside { max-width: 24em; color: var(--ink-soft); }
.u-who__grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 56em) { .u-who__grid { grid-template-columns: 1fr 1fr; } }
.u-who__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  min-height: clamp(28rem, 40vw, 34rem); padding: clamp(1.75rem, 3.2vw, 3.25rem); color: #fff;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.u-who__card--terra { background: var(--terra); --silk: #fff; --muted: rgba(255,255,255,.82); --chip: rgba(255,255,255,.4); }
.u-who__card--ink { background: var(--ink); --silk: #c98a5e; --muted: rgba(244,239,232,.78); --chip: rgba(244,239,232,.32); color: var(--paper); }
.u-who__card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(31,25,21,.55); }
.u-who__silk { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100%; height: 78%; fill: none; stroke: var(--silk); stroke-width: .8; opacity: .38;
  transition: transform 1.6s var(--ease), opacity .8s; transform-origin: 100% 100%; }
.u-who__card:hover .u-who__silk { transform: scale(1.06) translateY(-8px); opacity: .55; }
.u-who__num { font-family: var(--font-title); font-size: clamp(4.5rem, 3rem + 5vw, 8rem); line-height: .8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--chip); margin-bottom: auto; padding-bottom: 2rem; }
.u-who__kicker { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0 0 .9rem; }
.u-who__title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; max-width: 16ch; color: inherit; }
.u-who__text { color: var(--muted); margin: 1.1rem 0 0; max-width: 32em; line-height: 1.6; }
.u-who__tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.u-who__tags li { font-size: .8rem; padding: .4rem .8rem; border: 1px solid var(--chip); border-radius: 999px; color: inherit; }
.u-who__link { margin-top: 1.75rem; color: inherit; font-weight: 500; text-decoration: none; padding-bottom: .25rem; border-bottom: 1px solid currentColor; display: inline-flex; gap: .5rem; }
.u-who__link span { transition: transform .4s var(--ease); }
.u-who__link:hover span { transform: translateX(4px); }
.u-who__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js .u-who__card.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), box-shadow .7s var(--ease); }
  .js .u-who__card--ink.reveal { transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) { .u-who__card, .u-who__silk { transition: none; } .u-who__card:hover { transform: none; } }
@media (min-width: 56em) { .u-who__title { min-height: 2.2em; display: flex; align-items: flex-end; } }
.u-who__silk { opacity: .3; }

/* V14 — « Pour qui » sans fils : grand chiffre en débord comme seul ornement ; 2e carte en terre brûlée */
.u-who__card--two { background: #8f5236; --muted: rgba(255,255,255,.8); --chip: rgba(255,255,255,.34); color: #fff; }
.u-who__num { position: absolute; z-index: -1; top: -.12em; right: -.04em; margin: 0; padding: 0;
  font-size: clamp(9rem, 6rem + 12vw, 17rem); line-height: 1; -webkit-text-stroke: 1px rgba(255,255,255,.28); transition: transform 1.2s var(--ease), -webkit-text-stroke-color .6s; }
.u-who__card:hover .u-who__num { transform: translate(-6px, 6px); -webkit-text-stroke-color: rgba(255,255,255,.5); }
.u-who__kicker { margin-top: auto; }
.u-who__card { justify-content: flex-end; }

/* ==========================================================================
   29. V15 — Accueil, sections 3 à 8 « spectaculaires »
   ========================================================================== */
/* 3 · Liste XXL des domaines : la ligne se remplit de terracotta au survol */
.u-xl { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.u-xl__row { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .5rem 1.5rem;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(.5rem, 1.5vw, 1.5rem); border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; }
.u-xl__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terra); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.u-xl__n { font-size: .8rem; letter-spacing: .14em; color: var(--terra); transition: color .4s; align-self: start; padding-top: .9em; }
.u-xl__t { font-family: var(--font-title); font-size: clamp(1.9rem, 1rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; transition: transform .6s var(--ease), color .4s; }
.u-xl__d { grid-column: 2; color: var(--ink-soft); max-width: 30em; transition: color .4s; }
.u-xl__ico { grid-column: 3; grid-row: 1 / span 2; width: clamp(2.5rem, 4vw, 3.5rem); color: var(--terra); transition: color .4s, transform .7s var(--ease); }
.u-xl__ico svg { width: 100%; height: auto; }
.u-xl__go { display: none; }
@media (min-width: 64em) {
  .u-xl__row { grid-template-columns: 4rem minmax(0, 1.5fr) minmax(0, 1fr) 4rem 2.5rem; }
  .u-xl__d { grid-column: 3; grid-row: 1; }
  .u-xl__ico { grid-column: 4; grid-row: 1; }
  .u-xl__go { display: block; grid-column: 5; font-size: 1.5rem; color: var(--terra); transition: transform .5s var(--ease), color .4s; }
}
.u-xl__row:hover::before, .u-xl__row:focus-visible::before { transform: scaleY(1); }
.u-xl__row:hover, .u-xl__row:focus-visible { color: #fff; }
.u-xl__row:hover .u-xl__t, .u-xl__row:focus-visible .u-xl__t { transform: translateX(.75rem); }
.u-xl__row:hover :is(.u-xl__n, .u-xl__d, .u-xl__ico, .u-xl__go), .u-xl__row:focus-visible :is(.u-xl__n, .u-xl__d, .u-xl__ico, .u-xl__go) { color: #fff; }
.u-xl__row:hover .u-xl__ico { transform: rotate(-8deg) scale(1.08); }
.u-xl__row:hover .u-xl__go { transform: translateX(.4rem); }
.u-xl__row:focus-visible { outline: none; }

/* 4 · Réalisations en défilement horizontal piloté par le scroll */
.u-hz { position: relative; background: var(--sand); }
.u-hz__sticky { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2rem, 4vh, 3rem); overflow: hidden; }
.u-hz__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vh, 3rem); }
.u-hz__count { font-family: var(--font-title); font-size: 1.25rem; color: var(--ink-soft); margin: 0 auto 0 2rem; }
.u-hz__count .u-hz__cur { color: var(--terra); }
.u-hz__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); }
.u-hz__view::-webkit-scrollbar { display: none; }
.u-hz__track { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; width: max-content; will-change: transform; }
.u-hz__item { scroll-snap-align: start; }
.u-hz__card { display: block; color: var(--ink); text-decoration: none; }
.u-hz__img { display: block; height: clamp(300px, 52vh, 560px); aspect-ratio: var(--r); max-width: 82vw; overflow: hidden; background: var(--sand-deep); }
.u-hz__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.u-hz__card:hover .u-hz__img img { transform: scale(1.05); }
.u-hz__meta { display: flex; align-items: baseline; gap: .9rem; margin-top: 1rem; }
.u-hz__i { font-size: .75rem; letter-spacing: .14em; color: var(--terra); }
.u-hz__t { font-family: var(--font-title); font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); }
.u-hz__d { color: var(--ink-soft); font-size: var(--fs-sm); }
.u-hz__end { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; height: clamp(300px, 52vh, 560px); aspect-ratio: 3 / 4; max-width: 82vw;
  padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--terra); color: #fff; text-decoration: none; transition: background .5s; }
.u-hz__end:hover { background: #8f5236; }
.u-hz__endn { font-family: var(--font-title); font-size: clamp(6rem, 4rem + 6vw, 11rem); line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.7); margin-bottom: auto; }
.u-hz__endt { font-family: var(--font-title); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.1; }
.u-hz__enda { border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: .2rem; margin-top: 1rem; font-weight: 500; }
.u-hz__bar { height: 1px; background: var(--line); margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.u-hz__bar span { display: block; height: 100%; width: 100%; background: var(--terra); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
/* Mode « épinglé » activé par le JS sur grand écran */
.u-hz.is-pinned .u-hz__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.5rem, 4vh, 3rem); }
.u-hz.is-pinned .u-hz__view { overflow: visible; scroll-snap-type: none; }
.u-hz.is-pinned .u-hz__img, .u-hz.is-pinned .u-hz__end { height: clamp(280px, 50vh, 560px); }

/* 5 · Offres : grande carte principale + deux cartes, étapes reliées par une ligne qui se trace */
.u-of { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 64em) { .u-of { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; } .u-of__main { grid-row: 1 / span 2; } }
.u-of__main, .u-of__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; transition: transform .7s var(--ease), box-shadow .7s var(--ease), background .5s; }
.u-of__main { min-height: clamp(26rem, 42vw, 36rem); justify-content: flex-end; padding: clamp(1.75rem, 3.5vw, 3.5rem); background: var(--terra); color: #fff; }
.u-of__big { position: absolute; z-index: -1; top: .1em; left: -.04em; font-family: var(--font-title); font-size: clamp(5rem, 2rem + 9vw, 11rem); line-height: .9; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.32); transition: transform 1.4s var(--ease); }
.u-of__main:hover .u-of__big { transform: translateX(-2rem); }
.u-of__tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.85); margin-bottom: .9rem; }
.u-of__t { font-family: var(--font-title); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; }
.u-of__main .u-of__t { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); max-width: 12ch; }
.u-of__d { margin-top: 1rem; line-height: 1.6; max-width: 34em; }
.u-of__main .u-of__d { color: rgba(255,255,255,.86); }
.u-of__p { margin-top: auto; padding-top: 1.5rem; font-weight: 500; display: inline-flex; gap: .5rem; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.u-of__main .u-of__p { margin-top: 1.75rem; }
.u-of__card { padding: clamp(1.5rem, 2.8vw, 2.5rem); background: var(--sand); color: var(--ink); min-height: 15rem; }
.u-of__card .u-of__d { color: var(--ink-soft); transition: color .5s; }
.u-of__n { position: absolute; z-index: -1; top: -.18em; right: -.02em; font-family: var(--font-title); font-size: clamp(6rem, 3rem + 7vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(199,123,91,.35); transition: -webkit-text-stroke-color .5s; }
.u-of__card:hover { background: #8f5236; color: #fff; }
.u-of__card:hover .u-of__d { color: rgba(255,255,255,.82); }
.u-of__card:hover .u-of__n { -webkit-text-stroke-color: rgba(255,255,255,.35); }
.u-of__main:hover, .u-of__card:hover { transform: translateY(-5px); box-shadow: 0 40px 60px -40px rgba(31,25,21,.5); }
.u-st { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; gap: 2rem; position: relative; }
@media (min-width: 48em) { .u-st { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .u-st::before { content: ""; position: absolute; left: 0; right: 0; top: 2.25rem; height: 1px; background: var(--line); }
  .u-st::after { content: ""; position: absolute; left: 0; right: 0; top: 2.25rem; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2s var(--ease) .2s; }
  .u-st.is-in::after { transform: scaleX(1); } }
.u-st__i { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.u-st__n { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--terra); color: var(--terra);
  font-family: var(--font-title); font-size: 1.9rem; margin-bottom: 1rem; position: relative; z-index: 1; transition: background .5s, color .5s; }
.u-st__i:hover .u-st__n { background: var(--terra); color: #fff; }
.u-st__i strong { font-family: var(--font-title); font-weight: 400; font-size: 1.35rem; }
.u-st__i span:last-child { color: var(--ink-soft); }

/* 6 · Confiance : grand portrait en débord, fond terre brûlée, avis en carrousel */
.u-tr { display: grid; background: #8f5236; color: #fff; }
@media (min-width: 64em) { .u-tr { grid-template-columns: 1fr 1fr; min-height: min(100svh, 56rem); } }
.u-tr__img { position: relative; overflow: hidden; min-height: 26rem; }
.u-tr__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.08); transition: transform 2.4s var(--ease); }
.u-tr.is-in .u-tr__img img { transform: scale(1); }
.u-tr__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(3rem, 6vw, 6rem) var(--gutter); }
@media (min-width: 64em) { .u-tr__body { padding-inline: clamp(3rem, 6vw, 6.5rem); } }
.u-tr .u-h2 { color: #fff; }
.u-orn--light { background: #fff !important; }
.u-tr__lead { font-size: var(--fs-md); line-height: 1.6; color: rgba(255,255,255,.86); margin: 1.25rem 0 0; max-width: 32em; }
.u-tr__path { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 0; counter-reset: p; }
.u-tr__path li { display: flex; align-items: center; font-size: .85rem; }
.u-tr__path li span { padding: .45rem .9rem; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; }
.u-tr__path li:last-child span { background: #fff; color: #8f5236; border-color: #fff; }
.u-tr__path li + li::before { content: ""; width: 1.5rem; height: 1px; background: rgba(255,255,255,.5); }
.u-tr__quotes { margin-top: clamp(2.5rem, 5vw, 3.5rem); width: 100%; max-width: 36em; }
.u-tr__slides { display: grid; }
.u-tr__q { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); pointer-events: none; }
.u-tr__q.is-on { opacity: 1; transform: none; pointer-events: auto; }
.u-tr__q blockquote { margin: 0; font-family: var(--font-title); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.3; }
.u-tr__q figcaption { margin-top: 1.25rem; color: rgba(255,255,255,.78); font-size: var(--fs-sm); }
.u-tr__q figcaption strong { color: #fff; font-weight: 600; }
.u-tr__dots { display: flex; gap: .6rem; margin-top: 1.75rem; }
.u-tr__dot { width: 2.25rem; height: 24px; border: 0; padding: 0; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) center / 100% 2px no-repeat; cursor: pointer; }
.u-tr__dot[aria-current="true"] { background-image: linear-gradient(#fff, #fff); }
.u-tr__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.u-tr__more { margin-top: 2.5rem; color: #fff; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem; display: inline-flex; gap: .5rem; }

/* 7 · FAQ plus éditoriale */
.u-faq--xl .u-faq__i summary { display: flex; align-items: baseline; gap: 1.25rem; font-size: clamp(1.25rem, 1rem + .8vw, 1.65rem); padding-block: 1.5rem; transition: color .3s; }
.u-faq--xl .u-faq__i summary:hover { color: var(--terra); }
.u-faq__n { font-family: var(--font-text); font-size: .75rem; letter-spacing: .14em; color: var(--terra); flex: none; width: 1.75rem; }
.u-faq--xl .u-faq__i p { padding-left: 3rem; }
.u-faq__aside { margin-top: 1.5rem; color: var(--ink-soft); }
.u-faq__aside a { color: var(--terra); }

/* 8 · Appel final XXL avec bandeau défilant */
.u-end { position: relative; isolation: isolate; overflow: hidden; background: var(--terra); color: #fff; padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.u-end__band { border-bottom: 1px solid rgba(255,255,255,.25); padding-block: 1.1rem; overflow: hidden; }
.u-end__run { display: flex; align-items: center; gap: 2rem; width: max-content; animation: u-run 40s linear infinite; }
.u-end__run span { font-family: var(--font-title); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); white-space: nowrap; color: rgba(255,255,255,.9); }
.u-end__run i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.5); flex: none; }
@keyframes u-run { to { transform: translateX(-50%); } }
.u-end__orn { position: absolute; z-index: -1; right: -8vw; bottom: -18vw; width: min(62vw, 52rem); aspect-ratio: 770 / 746; background: #fff; opacity: .08;
  -webkit-mask: url(../assets/logo/ornement.svg) center / contain no-repeat; mask: url(../assets/logo/ornement.svg) center / contain no-repeat; animation: u-spin 160s linear infinite; }
@keyframes u-spin { to { transform: rotate(360deg); } }
.u-end__in { display: grid; gap: 2.5rem; align-items: end; padding-top: clamp(3.5rem, 7vw, 6.5rem); }
@media (min-width: 64em) { .u-end__in { grid-template-columns: 1.4fr 1fr; } }
.u-end__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(3rem, 1rem + 7vw, 8.5rem); line-height: .98; letter-spacing: -0.03em; margin: 0; color: #fff; }
.u-end__side p { color: rgba(255,255,255,.88); font-size: var(--fs-md); line-height: 1.6; margin: 0; }
.u-end__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.u-end__mail { color: #fff; }
@media (prefers-reduced-motion: reduce) { .u-end__run, .u-end__orn { animation: none; } .u-tr__img img { transform: none; } .u-xl__row::before, .u-of__big { transition: none; } }
.u-faq--xl .u-faq__i summary { justify-content: flex-start; text-align: left; }
.u-faq__q { flex: 1; }
.u-of__big { top: .02em; font-size: clamp(4rem, 1.5rem + 7vw, 9rem); -webkit-text-stroke-color: rgba(255,255,255,.26); }
.u-of__n { -webkit-text-stroke-color: rgba(199,123,91,.24); }
@media (max-width: 63.99em) {
  .u-hz__img, .u-hz__end { width: min(78vw, 26rem); height: auto; aspect-ratio: 4 / 5; max-width: none; }
}
@media (max-width: 47.99em) {
  .u-of__big { font-size: 4.2rem; top: auto; bottom: .1em; opacity: .7; }
  .u-of__main { justify-content: flex-start; }
  .u-tr__path li + li::before { display: none; }
  .u-tr__path { gap: .5rem; }
}
.u-hz__view { scroll-padding-inline: var(--gutter); }
@media (max-width: 47.99em) { .u-of__big { display: none; } }

/* V16 — Ajustements : domaines plus sobres, réalisations sans scroll forcé, portrait contenu */
/* 3 · Domaines : plus de remplissage, survol discret */
.u-xl__row::before { display: none; }
.u-xl__t { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); }
.u-xl__row { padding-block: clamp(1.1rem, 1.6vw, 1.5rem); }
.u-xl__row:hover, .u-xl__row:focus-visible { color: var(--ink); }
.u-xl__row:hover .u-xl__t, .u-xl__row:focus-visible .u-xl__t { color: var(--terra); transform: translateX(.4rem); }
.u-xl__row:hover :is(.u-xl__n, .u-xl__ico, .u-xl__go), .u-xl__row:focus-visible :is(.u-xl__n, .u-xl__ico, .u-xl__go) { color: var(--terra); }
.u-xl__row:hover .u-xl__d, .u-xl__row:focus-visible .u-xl__d { color: var(--ink-soft); }
.u-xl__row:hover .u-xl__ico { transform: none; }
.u-xl__row:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.u-xl__ico { width: clamp(2.1rem, 3vw, 2.75rem); }

/* 4 · Réalisations : défilement libre (trackpad, glisser, flèches), sans épinglage */
.u-hz__nav { display: none; gap: .5rem; }
@media (min-width: 64em) { .u-hz__nav { display: flex; } }
.u-hz__btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.u-hz__btn:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.u-hz__btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); border-color: var(--ink); }
.u-hz__btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.u-hz__view { scroll-behavior: smooth; }
.u-hz__view.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.u-hz__view.is-drag a { pointer-events: none; }
.u-hz__img, .u-hz__end { height: clamp(300px, 46vh, 520px); }

/* 6 · Portrait contenu (plus de plein cadre, l'image reste nette) */
@media (min-width: 64em) { .u-tr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 0; align-items: center; padding-block: clamp(4rem, 7vw, 7rem); padding-inline: var(--gutter); max-width: none; } }
.u-tr__img { min-height: 0; padding: clamp(3rem, 6vw, 0rem) var(--gutter) 0; }
@media (min-width: 64em) { .u-tr__img { padding: 0; justify-self: end; width: 100%; max-width: 30rem; } }
.u-tr__img img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; transform: none; transition: none;
  box-shadow: 0 40px 60px -40px rgba(0,0,0,.5); }
.u-tr.is-in .u-tr__img img { transform: none; }
@media (min-width: 64em) { .u-tr__body { padding-block: 0; } }
@media (min-width: 64em) { .u-tr__img { max-width: 26rem; } }
.u-tr__img img { aspect-ratio: auto; height: auto; }

/* ==========================================================================
   30. V17 — Pages intérieures dans le langage de l'accueil
   ========================================================================== */
/* En-tête de page */
.pg-hero { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.pg-hero__in { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.pg-hero__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(2.8rem, 1rem + 5.4vw, 6.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 14ch; }
.pg-hero__lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 52rem; }
.pg-hero__lead p { margin: 0 0 1rem; max-width: 40em; color: var(--ink-soft); }
.pg-hero__big { font-size: var(--fs-md); line-height: 1.55; color: var(--ink) !important; max-width: 36em !important; }
.pg-hero__cols { display: grid; gap: 0 2.5rem; margin-top: 1.25rem; }
@media (min-width: 48em) { .pg-hero__cols { grid-template-columns: 1fr 1fr; } }
.pg-anchors { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.pg-anchors a { padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; color: var(--ink); text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.pg-anchors a:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.pg-hero--media .pg-hero__in { align-items: center; }
@media (min-width: 64em) { .pg-hero--media .pg-hero__in { grid-template-columns: 1.2fr .8fr; } }
.pg-hero__media { justify-self: center; width: 100%; max-width: 24rem; position: relative; }
.pg-hero__media::before { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; background: var(--terra); z-index: -1; }
.pg-hero__media img { display: block; width: 100%; height: auto; }
.pg-hero--media { isolation: isolate; }

/* Libellés, listes, prix */
.pr-label { font-family: var(--font-text); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--terra); margin: 2rem 0 .9rem; }
.pr-checks { list-style: none; margin: 0; padding: 0; }
.pr-checks li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-top: 1px solid var(--line); }
.pr-checks li:last-child { border-bottom: 1px solid var(--line); }
.pr-checks li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid var(--terra); }
.pr-price { font-family: var(--font-title); font-size: 1.3rem; margin: 1.75rem 0; }
.pr-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pr-tags li { padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: var(--paper); }

/* Offre principale : bloc terracotta pleine largeur */
.pr-main { position: relative; isolation: isolate; overflow: hidden; background: var(--terra); color: #fff; padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.pr-main__n { position: absolute; z-index: -1; right: -.04em; top: -.16em; font-family: var(--font-title); font-size: clamp(14rem, 8rem + 20vw, 32rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); }
.pr-main__in { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 64em) { .pr-main__in { grid-template-columns: 1fr 1fr; } }
.pr-main__tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.85); margin: 0 0 1.25rem; }
.pr-main__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: #fff; max-width: 10ch; }
.pr-main__sub { font-family: var(--font-title); font-size: 1.35rem; margin: 1rem 0 0; color: rgba(255,255,255,.85); }
.pr-main__lead { font-size: var(--fs-md); line-height: 1.6; margin: 2rem 0 0; max-width: 30em; }
.pr-main .pr-label { color: #fff; }
.pr-main .pr-label:first-child { margin-top: 0; }
.pr-main .pr-checks li { border-color: rgba(255,255,255,.28); }
.pr-main .pr-checks li::before { border-color: #fff; background: rgba(255,255,255,.25); }
.pr-main__body p { color: rgba(255,255,255,.88); }
.pr-main .pr-price { color: #fff; }

/* Cartes d'offres secondaires et principes */
.pr-two, .ab-pr { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); list-style: none; padding: 0; margin: 0; }
@media (min-width: 56em) { .pr-two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .ab-pr { grid-template-columns: repeat(3, 1fr); } }
.pr-card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 3.2vw, 3rem); background: var(--sand); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.pr-card:hover { transform: translateY(-5px); box-shadow: 0 40px 60px -40px rgba(31,25,21,.35); }
.pr-card__n { position: absolute; z-index: -1; top: -.18em; right: -.03em; font-family: var(--font-title); font-size: clamp(7rem, 4rem + 8vw, 12rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(199,123,91,.3); }
.pr-card__tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--terra); margin: 0 0 1rem; }
.pr-card__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; max-width: 14ch; }
.pr-card__lead { font-size: var(--fs-md); line-height: 1.55; }
.pr-card p { color: var(--ink-soft); }
.ab-pr .pr-card { background: var(--paper); border: 1px solid var(--line); padding-top: clamp(5rem, 8vw, 7rem); }
.ab-pr .pr-card__t { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }

/* Domaines détaillés (Prestations) */
.pr-svcs { border-bottom: 1px solid var(--line); }
.pr-svc { position: relative; display: grid; gap: 1.5rem 3rem; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 64em) { .pr-svc { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.2fr); } }
.pr-svc__n { font-family: var(--font-title); font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--terra); }
.pr-svc__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
.pr-svc__lead { font-size: var(--fs-md); line-height: 1.55; margin-top: 1.25rem; }
.pr-svc__body > p { color: var(--ink-soft); margin: 0; max-width: 36em; }
@media (min-width: 64em) { .pr-svc__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.pj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; }
.pj { display: block; color: var(--ink); text-decoration: none; }
.pj__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-deep); }
.pj__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pj:hover .pj__img img { transform: scale(1.06); }
.pj__t { display: block; font-family: var(--font-title); font-size: 1.15rem; margin-top: .6rem; transition: color .3s; }
.pj:hover .pj__t { color: var(--terra); }
.pj__d { display: block; font-size: .8rem; color: var(--ink-soft); }

/* À propos : frise du parcours */
.ab-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; position: relative; }
@media (min-width: 64em) { .ab-tl { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ab-tl::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 1px; background: var(--terra); opacity: .4; } }
.ab-tl__i { position: relative; padding-top: 2.5rem; }
.ab-tl__dot { position: absolute; top: 0; left: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sand); border: 1px solid var(--terra); }
.ab-tl__i--now .ab-tl__dot { background: var(--terra); box-shadow: 0 0 0 6px rgba(199,123,91,.15); }
.ab-tl__when { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--terra); }
.ab-tl__what { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; margin: .75rem 0 1rem; max-width: 16ch; }
.ab-tl__i p { color: var(--ink-soft); max-width: 32em; }
.ab-prac { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 64em) { .ab-prac { grid-template-columns: 1.1fr .9fr; } }
.ab-prac__lead { font-size: var(--fs-md); line-height: 1.6; margin: 1.25rem 0 1rem; }
.ab-prac p { max-width: 34em; }
.ab-tools .pr-label { margin-top: 0; }

/* Réalisations : filtres + grille */
.pf { padding-top: 0; }
.pf-bar { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.pf-f { font: inherit; font-size: .9rem; padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; min-height: 44px; }
.pf-f sup { font-size: .65rem; color: var(--terra); margin-left: .15rem; transition: color .3s; }
.pf-f:hover { border-color: var(--terra); }
.pf-f[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; }
.pf-f[aria-pressed="true"] sup { color: rgba(255,255,255,.8); }
.pf-f:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.pf-grid { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: clamp(1rem, 2vw, 2rem); }
@media (min-width: 40em) { .pf-grid { columns: 2; } }
@media (min-width: 64em) { .pf-grid { columns: 3; } }
.pf-card { break-inside: avoid; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pf-card[hidden] { display: none; }
.pf-card.is-out { opacity: 0; transform: translateY(10px); }
.pf-card a { display: block; color: var(--ink); text-decoration: none; }
.pf-card__img { display: block; overflow: hidden; background: var(--sand); }
.pf-card__img img { display: block; width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.pf-card a:hover .pf-card__img img { transform: scale(1.04); }
.pf-card__meta { display: flex; align-items: baseline; gap: .8rem; margin-top: 1rem; }
.pf-card__n { font-size: .75rem; letter-spacing: .14em; color: var(--terra); }
.pf-card__t { font-family: var(--font-title); font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); transition: color .3s; }
.pf-card a:hover .pf-card__t { color: var(--terra); }
.pf-card__d { display: block; margin: .2rem 0 0 2.05rem; color: var(--ink-soft); font-size: var(--fs-sm); }

/* Fiche projet */
.pg-hero--project { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.pg-hero--project .pg-hero__t { max-width: 18ch; }
.colophon { border-top: 1px solid var(--ink); }
.pj-text h2 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); display: flex; align-items: baseline; gap: 1rem; }
.pj-text__n { font-family: var(--font-text); font-size: .75rem; letter-spacing: .14em; color: var(--terra); }
.pj-text__lead { font-size: var(--fs-md); line-height: 1.65; }
.pj-nav { display: grid; gap: 1rem; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 48em) { .pj-nav { grid-template-columns: 1fr 1fr; } }
.pj-nav__a { display: grid; grid-template-columns: 7rem 1fr; grid-template-rows: auto auto; column-gap: 1.25rem; align-items: end; color: var(--ink); text-decoration: none; padding: 1rem; background: var(--sand); transition: background .4s, color .4s; }
.pj-nav__a--next { grid-template-columns: 1fr 7rem; text-align: right; }
.pj-nav__img { grid-row: 1 / span 2; aspect-ratio: 1; overflow: hidden; }
.pj-nav__a--next .pj-nav__img { grid-column: 2; }
.pj-nav__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pj-nav__dir { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); align-self: end; transition: color .4s; }
.pj-nav__name { font-family: var(--font-title); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.1; }
.pj-nav__a--next :is(.pj-nav__dir, .pj-nav__name) { grid-column: 1; }
.pj-nav__a:hover { background: var(--terra); color: #fff; }
.pj-nav__a:hover .pj-nav__dir { color: rgba(255,255,255,.85); }
.pj-nav__a:hover .pj-nav__img img { transform: scale(1.08); }

/* Contact */
.ct { padding-top: 0; }
.ct__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 64em) { .ct__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ct-card { position: relative; isolation: isolate; overflow: hidden; background: var(--terra); color: #fff; padding: clamp(2rem, 3.5vw, 3.25rem); }
@media (min-width: 64em) { .ct-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.ct-card__orn { position: absolute; z-index: -1; right: -20%; bottom: -24%; width: 75%; aspect-ratio: 770 / 746; background: #fff; opacity: .08;
  -webkit-mask: url(../assets/logo/ornement.svg) center / contain no-repeat; mask: url(../assets/logo/ornement.svg) center / contain no-repeat; }
.ct-card .pr-label { color: rgba(255,255,255,.85); margin-top: 0; }
.ct-card__mail { display: inline-block; font-family: var(--font-title); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: .2rem; word-break: break-word; transition: border-color .3s; }
.ct-card__mail:hover { border-color: #fff; }
.ct-card__call { margin: 2rem 0 0; color: rgba(255,255,255,.88); line-height: 1.7; }
.ct-card__call a { color: #fff; font-weight: 500; }
.ct-card__facts { margin: 2rem 0 0; }
.ct-card__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.25); font-size: .9rem; }
.ct-card__facts dt { color: rgba(255,255,255,.7); }
.ct-card__facts dd { margin: 0; }
.ct-card__facts a { color: #fff; }
.ct-form .field input, .ct-form .field textarea { font-size: 1.05rem; padding-block: .8rem; }
.ct-form .field input:focus, .ct-form .field textarea:focus { border-color: var(--terra); }
.ct-form label, .ct-form legend { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

/* Appel final des pages intérieures (titre un peu moins massif) */
.u-end__t--md { font-size: clamp(2.6rem, 1rem + 5.4vw, 6.6rem); }

/* Bouton Contact actif dans le menu : terre brûlée, pas noir */
.site-header .btn[aria-current="page"] { background: #8f5236; border-color: #8f5236; color: #fff; }

/* V18 — Parcours : le fil se trace à l'arrivée, les étapes s'allument une à une */
@media (min-width: 64em) {
  .ab-tl::before { opacity: .18; }
  .ab-tl::after { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s cubic-bezier(.65,0,.35,1) .15s; }
  .ab-tl.is-in::after { transform: scaleX(1); }
}
@media (max-width: 63.99em) {
  .ab-tl { padding-left: 2rem; }
  .ab-tl::before, .ab-tl::after { content: ""; position: absolute; left: .55rem; top: .55rem; bottom: 0; width: 1px; background: var(--terra); }
  .ab-tl::before { opacity: .18; }
  .ab-tl::after { transform: scaleY(0); transform-origin: 50% 0; transition: transform 2.2s cubic-bezier(.65,0,.35,1) .15s; }
  .ab-tl.is-in::after { transform: scaleY(1); }
  .ab-tl__i { padding-top: 0; }
  .ab-tl__dot { left: -2rem; }
}
.ab-tl__dot { transform: scale(0); transition: transform .6s cubic-bezier(.34,1.56,.64,1), background .5s, box-shadow .8s; z-index: 1; }
.ab-tl.is-in .ab-tl__dot { transform: scale(1); }
.ab-tl.is-in .ab-tl__i:nth-child(1) .ab-tl__dot { transition-delay: .2s; }
.ab-tl.is-in .ab-tl__i:nth-child(2) .ab-tl__dot { transition-delay: 1.05s; }
.ab-tl.is-in .ab-tl__i:nth-child(3) .ab-tl__dot { transition-delay: 1.9s; }
.ab-tl__i--now .ab-tl__dot { box-shadow: 0 0 0 0 rgba(199,123,91,0); }
.ab-tl.is-in .ab-tl__i--now .ab-tl__dot { animation: ab-pulse 2.4s 2.5s ease-out 2; }
@keyframes ab-pulse { 0% { box-shadow: 0 0 0 0 rgba(199,123,91,.35); } 100% { box-shadow: 0 0 0 14px rgba(199,123,91,0); } }
.ab-tl__i > :not(.ab-tl__dot) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.ab-tl.is-in .ab-tl__i > :not(.ab-tl__dot) { opacity: 1; transform: none; }
.ab-tl.is-in .ab-tl__i:nth-child(1) > :not(.ab-tl__dot) { transition-delay: .35s; }
.ab-tl.is-in .ab-tl__i:nth-child(2) > :not(.ab-tl__dot) { transition-delay: 1.2s; }
.ab-tl.is-in .ab-tl__i:nth-child(3) > :not(.ab-tl__dot) { transition-delay: 2.05s; }
.ab-tl .ab-tl__i.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ab-tl::after { transform: none !important; } .ab-tl__dot, .ab-tl__i > * { transform: none !important; opacity: 1 !important; } }