/* =========================================================
   Portfolio Lucas Prat Fort — « Encre & katakana »
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink:        #17171B;
  --ink-2:      #1C1C21;
  --ink-3:      #1F1F25;
  --line:       #2E2E36;
  --line-2:     #3A3A45;
  --paper:      #F4F3F8;
  --text:       #B8B5C4;
  --muted:      #9794A6;
  --dim:        #88849B;
  --lav:        #A39FC5;
  --lav-bright: #C5C1E2;

  --display: 'Big Shoulders Display', Haettenschweiler, 'Arial Narrow', sans-serif;
  --body:    'Zen Kaku Gothic New', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jp:      'Zen Old Mincho', Georgia, 'Times New Roman', serif;

  --gutter: clamp(20px, 5.5vw, 88px);
  --nav-h: 78px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--lav); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--lav-bright); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }

::selection { background: var(--lav); color: var(--ink); }

/* Texture papier */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilitaires ---------- */
.wrap { padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 20px; background: var(--lav); color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--ink); }

.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.eyebrow .num { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .3em; color: var(--lav); text-transform: none; }
.eyebrow .rule { flex: 0 0 40px; height: 1px; background: var(--line-2); }
.eyebrow .num { white-space: nowrap; }

.brush { display: block; width: min(340px, 60%); height: auto; }

/* Marqueurs de contenu à compléter par Lucas */
.todo {
  color: var(--lav);
  border-bottom: 1px dashed rgba(163, 159, 197, .45);
  font-style: normal;
}

/* Titres */
.h-display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.h-outline {
  color: rgba(163, 159, 197, .13);
  -webkit-text-stroke: 2px var(--lav);
}
@media (max-width: 700px) { .h-outline { -webkit-text-stroke-width: 1.5px; } }

.h-section { font-size: clamp(42px, 6.4vw, 96px); }
.h-sub     { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); text-transform: uppercase; color: var(--paper); line-height: 1; }

.lead  { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; color: var(--text); }
.prose { font-size: 17px; line-height: 1.9; color: var(--text); }
.prose--muted { color: var(--muted); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px;
  font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { flex: 0 0 auto; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--solid { background: var(--lav); color: var(--ink); }
.btn--solid:hover { background: var(--lav-bright); color: var(--ink); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--paper); font-weight: 500; }
.btn--ghost:hover { border-color: var(--lav); color: var(--lav); }
.btn--line { border: 1px solid var(--lav); color: var(--lav); min-height: 44px; padding: 0 22px; font-weight: 500; font-size: 12px; letter-spacing: .18em; }
.btn--line:hover { background: var(--lav); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  background: rgba(23, 23, 27, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__logo { display: block; flex: 0 0 auto; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav__link {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.nav__link:hover { color: var(--paper); }
.nav__link[aria-current="page"] { color: var(--paper); }

.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--paper); position: relative; transition: background .2s var(--ease); }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--paper);
  transition: transform .3s var(--ease), top .2s var(--ease);
}
.nav__burger span::before { top: -7px; }
.nav__burger span::after  { top: 7px; }
body.menu-open .nav__burger span { background: transparent; }
body.menu-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav__burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 6px;
    padding: 0 var(--gutter) 15vh;
    background: var(--ink);
    border-top: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    overflow-y: auto;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav__links { transform: translateX(0); }

  /* Le flou du header en fait le bloc conteneur de ses descendants en
     « position: fixed » : le menu se retrouvait enfermé dans ses 78 px de
     haut, le premier lien au-dessus de l'écran et le dernier en dessous. On
     retire le flou le temps de l'ouverture — le panneau est opaque et le
     recouvre entièrement, il n'y a donc rien à flouter. */
  body.menu-open .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__link { font-size: 28px; font-family: var(--display); font-weight: 700; letter-spacing: .04em; padding: 10px 0; }
  .nav__links .btn--line { margin-top: 24px; min-height: 56px; font-size: 13px; }
}

/* ---------- Hero ---------- */
/* Les halos débordent volontairement de leur section : on les y enferme
   pour ne jamais créer de défilement horizontal, surtout sur mobile. */
.hero, .page-head, .cta, .section:has(> .hero__glow) { overflow: hidden; }

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 118px) clamp(56px, 6vw, 88px);
  padding-inline: var(--gutter) clamp(20px, 12vw, 184px);
}
.hero__glow {
  position: absolute; top: -260px; right: -180px;
  width: min(820px, 90vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,159,197,.2) 0%, rgba(163,159,197,0) 68%);
  pointer-events: none;
}
.hero__inner { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.hero__title { font-size: clamp(54px, 12.6vw, 186px); line-height: .8; }
.hero__title span { display: block; }
.hero__title span + span { margin-left: clamp(0px, 10vw, 152px); }

.hero__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; margin-top: 10px; }
.hero__meta p { max-width: 520px; }
.hero__formation { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.hero__formation .label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.hero__formation .value { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; letter-spacing: .02em; color: var(--paper); }
.hero__formation .sub { font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .hero__formation { text-align: left; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  padding-block: 20px;
  background: var(--ink-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; animation: ticker-slide 30s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex; align-items: center;
  font-family: var(--display); font-size: clamp(22px, 2.1vw, 30px); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper); white-space: nowrap;
}
.ticker__group i { color: var(--lav); padding-inline: clamp(14px, 1.8vw, 26px); font-style: normal; }
@keyframes ticker-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- Grille ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(22px, 2.2vw, 32px); }
/* Paliers : 12 colonnes en grand, deux colonnes sur tablette, une seule sur mobile. */
@media (max-width: 1000px) and (min-width: 761px) { .grid12 > * { grid-column: span 6 !important; } }
@media (max-width: 760px) { .grid12 { grid-template-columns: 1fr; } .grid12 > * { grid-column: 1 / -1 !important; } }

.section { position: relative; padding-block: clamp(64px, 9vw, 132px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--top-rule { border-top: 1px solid var(--line); }

/* ---------- Portrait duotone ---------- */
.portrait { position: relative; }
.portrait__frame { position: absolute; width: clamp(140px, 18vw, 260px); aspect-ratio: 1; border-color: var(--lav); border-style: solid; border-width: 0; }
.portrait__frame--tl { left: -22px; top: -22px; border-left-width: 1px; border-top-width: 1px; }
.portrait__frame--br { right: -22px; bottom: -22px; border-right-width: 1px; border-bottom-width: 1px; }
.portrait__media { position: relative; overflow: hidden; }
.portrait__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.92); }
.portrait__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(163, 159, 197, .28); mix-blend-mode: color; pointer-events: none;
}

/* ---------- Stats ---------- */
.stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column; gap: 8px; padding: 26px 32px 0 0; flex: 1 1 auto; }
.stats > div + div { border-left: 1px solid var(--line); padding-left: 32px; }
.stats .label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.stats .value { font-family: var(--display); font-size: clamp(28px, 2.8vw, 34px); font-weight: 700; color: var(--paper); white-space: nowrap; }
@media (max-width: 620px) {
  .stats { flex-direction: column; }
  .stats > div { padding: 22px 0 0; }
  .stats > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Cartes projet ---------- */
.card { display: flex; flex-direction: column; gap: 20px; color: inherit; }
.card:hover { color: inherit; }
.card__media { position: relative; overflow: hidden; background: var(--ink-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.045); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,23,27,.45), rgba(23,23,27,0) 45%);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.card:hover .card__media::after { opacity: 1; }
.card__tag {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  padding: 7px 14px; background: rgba(23,23,27,.82);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lav);
}
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.card__title { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); text-transform: uppercase; color: var(--paper); transition: color .25s var(--ease); }
.card:hover .card__title { color: var(--lav); }
.card__index { font-family: var(--jp); font-size: 13px; letter-spacing: .2em; color: var(--dim); white-space: nowrap; }
.card__desc { font-size: 15px; line-height: 1.7; color: var(--muted); }

.card__media--tall  { height: clamp(260px, 30vw, 430px); }
.card__media--short { height: clamp(220px, 25vw, 360px); }

/* Bloc carnet */
.note-block {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 30px; background: var(--ink-3); border: 1px solid var(--line);
}

/* ---------- Filtres ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; }
.filter {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px;
  border: 1px solid var(--line-2); color: var(--text);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: all .25s var(--ease);
}
.filter:hover { border-color: var(--lav); color: var(--lav); }
.filter[aria-pressed="true"] { background: var(--lav); border-color: var(--lav); color: var(--ink); font-weight: 700; }

/* ---------- Timeline ---------- */
.timeline > li { display: flex; gap: clamp(20px, 3vw, 40px); padding-block: 30px; border-top: 1px solid var(--line); }
.timeline > li:last-child { border-bottom: 1px solid var(--line); }
.timeline .year { flex: 0 0 clamp(72px, 8vw, 110px); font-family: var(--display); font-size: clamp(32px, 3.4vw, 40px); font-weight: 700; line-height: 1; color: var(--lav); }
.timeline .year--now { color: var(--paper); }
.timeline h3 { font-size: 19px; font-weight: 700; color: var(--paper); }
.timeline p { font-size: 15px; line-height: 1.75; color: var(--muted); margin-top: 8px; }

/* ---------- Cartes « ce que je fais » ---------- */
.skill { display: flex; flex-direction: column; gap: 20px; padding: 36px 32px; background: var(--ink-3); border: 1px solid var(--line); transition: border-color .3s var(--ease); }
.skill:hover { border-color: var(--lav); }
.skill__tools { font-size: 13px; line-height: 1.8; color: var(--dim); }

/* ---------- Fiche projet ---------- */
.spec { border-top: 1px solid var(--lav); }
.spec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.spec dd { margin: 0; font-size: 15px; color: var(--paper); text-align: right; }

.bullets li { display: flex; gap: 16px; align-items: flex-start; }
.bullets li + li { margin-top: 12px; }
.bullets li::before { content: ""; flex: 0 0 18px; height: 1px; margin-top: 15px; background: var(--lav); }
.bullets p { font-size: 17px; line-height: 1.8; color: var(--text); }

/* Emplacement de visuel à fournir */
.media-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink-3); border: 1px dashed rgba(163, 159, 197, .4);
  color: var(--lav); text-align: center; padding: 24px;
}
.media-placeholder span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.media-placeholder small { font-size: 12px; color: var(--dim); letter-spacing: .04em; text-transform: none; max-width: 22ch; line-height: 1.6; }

.next-project { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: clamp(44px, 5vw, 68px); padding-inline: var(--gutter); border-top: 1px solid var(--line); color: inherit; }
.next-project:hover { color: inherit; }
.next-project__label { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.next-project__name { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: .9; text-transform: uppercase; color: var(--paper); transition: color .25s var(--ease); }
.next-project:hover .next-project__name { color: var(--lav); }
.next-project svg { flex: 0 0 auto; transition: transform .3s var(--ease); }
.next-project:hover svg { transform: translateX(10px); }

/* ---------- Visuels de projet (jamais recadrés : un plan de niveau se lit en entier) ---------- */
.shot { margin: 0; }
.shot__media {
  display: flex; align-items: center; justify-content: center;
  padding: 10px; background: var(--ink-3); border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.shot:hover .shot__media { border-color: var(--lav); }
.shot__media img { width: 100%; height: auto; display: block; }
.shot--pixel img { image-rendering: pixelated; }
.shot--sprite .shot__media { padding: 24px; }
.shot--sprite img { max-width: 300px; margin-inline: auto; }
.shot figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--dim); }

/* ---------- Vidéo (rien n'est chargé depuis YouTube avant le clic) ---------- */
.video { margin: 0; }
.video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink-3); overflow: hidden; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { display: block; width: 100%; height: 100%; padding: 0; position: relative; }
.video__play img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.74); transition: transform .5s var(--ease), filter .4s var(--ease); }
.video__play:hover img, .video__play:focus-visible img { transform: scale(1.03); filter: brightness(.9); }
.video__icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%;
  background: var(--lav); color: var(--ink);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.video__play:hover .video__icon, .video__play:focus-visible .video__icon { transform: translate(-50%, -50%) scale(1.08); background: var(--lav-bright); }
.video__tag { position: absolute; top: 20px; left: 20px; padding: 7px 14px; background: rgba(23,23,27,.82); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lav); }
.video figcaption { margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--dim); }

/* ---------- Formulaire ---------- */
.form { display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 4vw, 48px) clamp(22px, 3vw, 44px); background: var(--ink-3); border: 1px solid var(--line); position: relative; }
.form__corner { position: absolute; right: -1px; top: -1px; width: 90px; height: 90px; border-top: 1px solid var(--lav); border-right: 1px solid var(--lav); pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field > label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.field .optional { color: var(--dim); }
.field input, .field textarea {
  width: 100%; padding: 15px 16px;
  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  font-family: var(--body); font-size: 15px; line-height: 1.5;
  border-radius: 0; transition: border-color .25s var(--ease);
}
.field input { min-height: 52px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lav); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C97A7A; }
.field__error { font-size: 13px; color: #C97A7A; min-height: 0; }
.field__error:empty { display: none; }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.checkbox { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; line-height: 1.6; color: var(--muted); cursor: pointer; }
.checkbox input { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lav); }

.form__status { font-size: 14px; line-height: 1.6; color: var(--lav); padding: 14px 16px; border-left: 2px solid var(--lav); background: rgba(163, 159, 197, .07); }
.form__status:empty { display: none; }
.form__status--erreur { color: #D89898; border-left-color: #D89898; background: rgba(216, 152, 152, .07); }

/* Piège à robots : hors écran, mais pas display:none (certains robots l'ignorent). */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Coordonnées ---------- */
.contact-list { border-top: 1px solid var(--line); }
.contact-list li { display: flex; align-items: center; gap: 18px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.contact-list svg { flex: 0 0 auto; }
.contact-list a, .contact-list span { font-size: 16px; }
.contact-list span { color: var(--muted); }

/* ---------- CTA ---------- */
.cta { position: relative; padding-block: clamp(64px, 8vw, 110px); padding-inline: var(--gutter); background: var(--ink-2); border-top: 1px solid var(--line); }
.cta__title { font-size: clamp(46px, 8.6vw, 132px); line-height: .86; }
.cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-top: 40px; }
.cta__actions p { font-size: 16px; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { position: relative; padding-block: clamp(48px, 5vw, 70px) 40px; padding-inline: var(--gutter); border-top: 1px solid var(--line); }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(32px, 6vw, 80px); flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: 20px; max-width: 360px; }
/* « align-self » est indispensable : le conteneur est une colonne flex, dont
   l'alignement par défaut étire ses enfants sur toute la largeur. Le logo,
   dont la hauteur est fixée, s'en trouvait déformé au double de sa largeur. */
.footer__brand img { height: 52px; width: auto; align-self: flex-start; }
.footer__brand p { font-size: 14px; line-height: 1.8; color: var(--dim); }
.footer__cols { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 88px); }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col .label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.footer__col a { font-size: 15px; color: var(--text); }
.footer__col a:hover { color: var(--lav); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 46px); padding-top: 26px; border-top: 1px solid var(--line); }
.footer__bottom span, .footer__bottom a { font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.footer__bottom a:hover { color: var(--lav); }

.footer--slim { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: 44px; }
.footer--slim img { height: 36px; width: auto; flex: 0 0 auto; }
.footer--slim .links { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.footer--slim .links a { font-size: 14px; color: var(--text); }
.footer--slim .links span { font-size: 12px; letter-spacing: .1em; color: var(--dim); }

/* ---------- En-tête de page ---------- */
.page-head { position: relative; padding-block: clamp(56px, 7vw, 96px) clamp(36px, 5vw, 72px); padding-inline: var(--gutter); }
.page-head__inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 5vw, 60px); flex-wrap: wrap; }
.page-head__title { font-size: clamp(56px, 11.5vw, 168px); }
.page-head p { max-width: 380px; font-size: 17px; line-height: 1.85; color: var(--muted); }

/* ---------- Masquage ---------- */
/* Le navigateur applique `[hidden] { display: none }`, mais c'est une règle
   par défaut : la moindre déclaration `display` de cette feuille l'emporte.
   `.card` étant en `display: flex`, les cartes masquées par le filtre de la
   page Travaux restaient visibles. */
[hidden] { display: none !important; }

/* ---------- Carnet : galerie de dessins ---------- */
/* Les neuf dessins partagent le même format A4 : on les affiche entiers,
   sans recadrage, contrairement aux vignettes de projet. */
.dessin { margin: 0; }
.dessin img {
  display: block; width: 100%; height: auto;
  background: var(--ink-3); border: 1px solid var(--line);
}
.dessin figcaption {
  margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted);
}

/* ---------- Apparition au scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Contenu légal ---------- */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; text-transform: uppercase; color: var(--paper); margin-top: 48px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.9; color: var(--text); margin-top: 14px; }