/* =========================================================
   Océane Teixeira — Portfolio
   Feuille de styles unique (accueil, labo, études de cas)
   ========================================================= */

/* ---------- Polices ---------- */
@font-face { font-family: "Barni"; src: url("../fonts/Barni-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "East Kind"; src: url("../fonts/EastKind-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
/* Si tu ajoutes le fichier italique, dé-commente ce bloc (sinon le navigateur penche la version droite) */
/* @font-face { font-family: "East Kind"; src: url("../fonts/EastKind-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } */
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #f3f1ea;
  --ink: #131313;
  --plum: #430054;
  --violet: #9f18cc;
  --lime: #c5ff2d;
  --muted: #6b6862;
  --muted-2: #605e59;
  --line: #e4e3de;
  --paper: #faf9f6;
  --paper-2: #f3f2ee;
  --paper-3: #f9f8f5;

  --f-display: "Barni", "Arial Black", sans-serif;
  --f-serif: "East Kind", Georgia, serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --f-sans: "Inter", system-ui, sans-serif;
  --f-geist: "Geist", "Inter", system-ui, sans-serif;

  /* Marges latérales : 80px sur desktop, se resserrent sur mobile */
  --gutter: clamp(20px, 5.56vw, 80px);
  --content: 1280px;
  --pad-x: max(var(--gutter), calc((100% - var(--content)) / 2));
  --ease-out: cubic-bezier(0, 0, .58, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; font-family: var(--f-mono); font-size: 14px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

/* Texte en contour (titres « Projets », « Pour en savoir un peu plus ») */
.outline { color: transparent; -webkit-text-stroke: 1.5px #000; }

/* ---------- Transitions de page (prototype Figma : Push 300 ms ease-out) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease-out); }
html:active-view-transition-type(push-up)::view-transition-old(root) { animation-name: vt-out-up; }
html:active-view-transition-type(push-up)::view-transition-new(root) { animation-name: vt-in-up; }
html:active-view-transition-type(push-left)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(push-left)::view-transition-new(root) { animation-name: vt-in-left; }
html:active-view-transition-type(push-right)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(push-right)::view-transition-new(root) { animation-name: vt-in-right; }
@keyframes vt-out-up { to { transform: translateY(-100%); } }
@keyframes vt-in-up { from { transform: translateY(100%); } }
@keyframes vt-out-left { to { transform: translateX(-100%); } }
@keyframes vt-in-left { from { transform: translateX(100%); } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-right { from { transform: translateX(-100%); } }

/* =========================================================
   ACCUEIL
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 3.9vw, 56px);
  padding: clamp(40px, 5.56vw, 80px) 0;
  overflow: hidden;
}
.hero__name {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 10.1vw; line-height: .88; letter-spacing: -.02em;
  white-space: nowrap; text-align: center;
}
.hero__roles {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3.9vw, 56px);
  padding: 0 var(--gutter);
}
.hero__role {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(32px, 5.56vw, 80px); line-height: .88; white-space: nowrap;
}
.hero__visual { width: clamp(160px, 48.6vw, 700px); aspect-ratio: 700 / 210; object-fit: cover; }

/* Bandeau « DESIGNER » qui défile (commentaire #7) */
.marquee { width: 100%; overflow: hidden; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 22s linear infinite;
}
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__word {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.56vw, 80px); line-height: .88; letter-spacing: -.02em;
  padding-right: .28em; white-space: nowrap;
}
.marquee__word:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px #000; }
@keyframes marquee { to { transform: translateX(-50%); } }

.bio {
  width: calc(100% - 2 * clamp(20px, 3.33vw, 48px));
  max-width: 1344px;
  border-top: 2px solid var(--ink);
  padding: 24px 40px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.bio__text {
  font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5;
  max-width: 992px;
}
.bio__text strong { font-weight: 700; }

/* Étoile « Scroll down » qui tourne (commentaire #8) */
.scroll-star {
  flex-shrink: 0; width: clamp(110px, 12.85vw, 185px); aspect-ratio: 1;
  border-radius: 50%;
}
.scroll-star img { width: 100%; height: 100%; animation: spin 14s linear infinite; transition: scale .3s var(--ease-out); }
.scroll-star:hover img { scale: 1.08; animation-duration: 5s; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Projets ---------- */
.work {
  position: relative;
  padding: 24px clamp(20px, 2.1vw, 32px) 90px;
}
.work__title {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 5.56vw, 80px); line-height: .88; letter-spacing: -.02em;
  margin-bottom: 57px;
}
.work__list { display: flex; flex-direction: column; gap: 72px; }
.project-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 70px;
}
.project-row__name {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(40px, 5.56vw, 80px); line-height: .88; white-space: nowrap;
  transition: color .25s var(--ease-out);
}
.project-row__meta { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.project-row__meta .tags { width: 386px; }
.project-row__logo { width: 152px; display: flex; justify-content: flex-end; }
.project-row__logo img { height: auto; }
.project-row::after { /* zone cliquable pleine largeur */
  content: ""; position: absolute; inset: -30px 0;
}
/* Visuel du projet : affiché seulement sur tablette / mobile (remplace l'aperçu au survol) */
.project-row__thumb { display: none; }

/* Aperçu au survol (commentaire #9 + frames SEC/work_Hover) */
.work__preview {
  position: absolute; z-index: 5; pointer-events: none;
  opacity: 0; scale: .92;
  transition: opacity .35s var(--ease-out), scale .45s var(--ease-out);
  will-change: transform, opacity;
}
.work__preview img { width: 100%; height: auto; }
.work__preview.is-visible { opacity: 1; scale: 1; }
.work__preview[data-preview="huddle"]    { left: 31.1%; top: 18%;   width: 46.6%; }
.work__preview[data-preview="suivi"]     { left: 27%;   top: 11.6%; width: 47.1%; }
.work__preview[data-preview="diagramme"] { left: 14.4%; top: 19.6%; width: 68.3%; }
.work__preview[data-preview="rebranding"]{ left: 15.6%; top: 17.8%; width: 63.8%; }
.work__preview[data-preview="aigle"]     { left: 24.5%; top: 20.9%; width: 51.5%; }

/* ---------- Tags (pastilles) ---------- */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag {
  border: 1.2px solid var(--ink); border-radius: 20px;
  padding: 7px 12px;
  font-family: var(--f-mono); font-size: 12px; line-height: normal;
  letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- À propos ---------- */
.about__head {
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  padding: 40px clamp(20px, 3.33vw, 48px) 26px;
  overflow: hidden;
}
.about__title {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5.56vw, 80px); line-height: .88; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px #000;
}
@media (min-width: 1025px) { .about__title { white-space: nowrap; font-size: min(5.45vw, 80px); } }
.about__body { display: flex; align-items: stretch; }
.about__lab {
  flex-shrink: 0; width: 362px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lab-link { position: relative; display: block; width: 195px; height: 195px; }
.lab-link__head { width: 195px; height: 195px; transition: rotate .4s var(--ease-out), scale .4s var(--ease-out); }
.lab-link__text {
  position: absolute; left: -43px; top: -37px; width: 281px; height: 281px; max-width: none;
  overflow: visible; pointer-events: none;
  font-family: var(--f-serif); font-weight: 300; font-size: 20px; letter-spacing: -.01em; fill: var(--ink);
  transition: rotate .6s var(--ease-out);
}
.lab-link:hover .lab-link__head { rotate: -6deg; scale: 1.04; }
.lab-link:hover .lab-link__text { rotate: 8deg; }
.about__content {
  flex: 1; min-width: 0;
  border-left: 1.5px solid var(--ink);
  padding: 44px 32px;
  display: flex; flex-direction: column; gap: 48px;
}
.about__intro { font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5; max-width: 957px; color: #000; }
.skills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 40px 32px; max-width: 1000px; margin: 0 auto;
  font-size: clamp(22px, 2.22vw, 32px); line-height: .88; text-transform: uppercase;
}
.skills li:nth-child(odd) { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; }
.skills li:nth-child(even) { font-family: var(--f-serif); font-weight: 300; }
.tools { display: flex; flex-direction: column; gap: 14px; }
.tools__label { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.about__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 26px;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .01em;
}
.about__foot .dispo { color: #6a1178; }

/* ---------- Contact / pied de page ---------- */
.contact { background: var(--plum); color: var(--bg); }
.contact__main {
  border-top: 1.5px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 56px clamp(20px, 3.33vw, 48px) 48px;
  text-align: center;
}
.contact__title {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5.28vw, 76px); line-height: .92; letter-spacing: -.03em;
  color: var(--lime);
}
.contact__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 110px;
  font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5;
}
.contact__links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease-out); }
.contact__links a:hover { background-size: 100% 1.5px; }
.contact__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 26px clamp(20px, 3.33vw, 48px);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .01em;
}
.contact__bar a { font-weight: 700; }
.contact__bar a:hover { color: var(--lime); }

/* =========================================================
   LABO (page en construction)
   ========================================================= */
.labo {
  position: relative; min-height: max(100svh, 978px);
  background: var(--plum); color: var(--lime);
  padding: clamp(48px, 6.67vw, 96px) var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  overflow: hidden;
}
.labo__title {
  position: relative; z-index: 1;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(52px, 10.28vw, 148px); line-height: .88; letter-spacing: -.02em;
  max-width: 1280px;
}
.labo__sub { position: relative; z-index: 1; font-family: var(--f-serif); font-weight: 300; font-style: italic; font-size: clamp(28px, 3.33vw, 48px); line-height: .88; }
.btn-back {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 11px 24px;
  border: 2px solid var(--violet); border-radius: 16px;
  font-family: var(--f-mono); font-weight: 700; font-size: 20px; letter-spacing: .01em; color: var(--violet);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn-back:hover { background: var(--violet); color: var(--lime); }
.labo__illu {
  position: absolute; left: calc(37.5% + 144px); top: 401px; width: 724px; max-width: none;
}

/* =========================================================
   SÉLECTEUR DE LANGUE (FR / EN) — en haut à droite sur toutes les pages
   ========================================================= */
.lang-switch {
  position: fixed; top: 18px; right: 18px; z-index: 50;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; border-radius: 20px;
  background: rgba(243, 241, 234, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--muted);
  transition: translate .3s var(--ease-out);
}
.lang-switch a { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 14px; transition: color .2s, background-color .2s; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.lang-switch span { opacity: .4; }
body:has(.labo) .lang-switch { background: rgba(67, 0, 84, .6); color: rgba(197, 255, 45, .7); }
body:has(.labo) .lang-switch a:hover { color: var(--lime); }
body:has(.labo) .lang-switch a[aria-current="page"] { background: var(--lime); color: var(--plum); }

/* =========================================================
   ÉTUDES DE CAS
   ========================================================= */

/* Bouton « retour à l'accueil » : ta tête, sticky (commentaire #6) */
.home-btn {
  position: fixed; top: 18px; left: 18px; z-index: 50;
  width: 50px; height: 50px; border-radius: 50%;
  transition: rotate .35s var(--ease-out), scale .35s var(--ease-out);
}
.home-btn img { width: 100%; height: 100%; }
.home-btn:hover { rotate: -8deg; scale: 1.06; }
.home-btn__tip {
  position: absolute; left: 100%; top: 50%; translate: 4px -50%;
  background: var(--ink); color: var(--bg); border-radius: 20px; padding: 6px 12px;
  font-family: var(--f-mono); font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s var(--ease-out);
}
.home-btn:hover .home-btn__tip, .home-btn:focus-visible .home-btn__tip { opacity: 1; translate: 12px -50%; }

.cs { background: var(--bg); }
.sec {
  padding: 104px var(--pad-x);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 48px;
}
.sec--paper { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--paper3 { background: var(--paper-3); }
.sec--bg { background: var(--bg); }
.sec--lime { background: var(--lime); }
.sec--plum { background: var(--plum); color: #fff; }
.sec--plain { border-bottom: 0; }
.sec--divided { border-bottom: 0; border-top: 1px solid rgba(18, 18, 18, .12); }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-56 { gap: 56px; }

/* Hero des études */
.cs-hero {
  padding: 80px var(--pad-x) 64px;
  display: flex; flex-direction: column; gap: 48px;
  border-bottom: 1px solid var(--line);
}
.cs-hero--roomy { gap: 64px; padding-bottom: 80px; border-bottom: 0; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cs-head__logo { height: 30px; width: auto; }
.cs-head__logo--aigle { height: 49px; }
.cs-head__logo--huddle { height: 58px; }
.cs-title-block { display: flex; flex-direction: column; gap: 16px; }
.cs-title {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(44px, 6.67vw, 96px); line-height: .94;
}
.cs-title--80 { font-size: clamp(40px, 5.56vw, 80px); line-height: .88; letter-spacing: -.02em; }
.cs-subtitle { font-family: var(--f-serif); font-weight: 300; font-size: clamp(24px, 2.78vw, 40px); line-height: 1.2; color: var(--plum); }
.cs-subtitle--48 { font-size: clamp(26px, 3.33vw, 48px); line-height: 1.1; }
.cs-hero__media { display: flex; align-items: center; gap: 56px; }
.cs-hero__img { width: 670px; flex-shrink: 0; border-radius: 16px; }

/* Métadonnées (rôle, outils…) */
.meta { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.meta--row { flex-direction: row; justify-content: space-between; padding-top: 24px; gap: 32px; }
.meta--row .meta__item { width: 240px; }
.meta__item { display: flex; flex-direction: column; gap: 8px; }
.meta__label { font-family: var(--f-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; color: #000; }
.meta__value { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--violet); }
.meta__desc { font-size: 14px; color: #000; line-height: 1.3; }

/* En-têtes de section */
.sec-head { display: flex; flex-direction: column; gap: 12px; }
.sec-head--16 { gap: 16px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-geist); font-weight: 600; font-size: 12px; color: var(--violet);
}
.eyebrow--dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.sec--plum .eyebrow { color: var(--lime); }
.h2 { font-family: var(--f-serif); font-weight: 300; font-size: clamp(30px, 3.33vw, 48px); line-height: 1.1; }
.h2--36 { font-size: clamp(24px, 2.5vw, 36px); }
.lead { font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5; color: var(--plum); max-width: 1110px; }
.body-mono { font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5; }
.label-mono { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.label-mono--24 { font-size: clamp(18px, 1.67vw, 24px); }
.c-violet { color: var(--violet); } .c-plum { color: var(--plum); } .c-ink { color: var(--ink); } .c-black { color: #000; } .c-muted { color: var(--muted-2); }
.center { text-align: center; }

/* Problématique + chiffre clé */
.problem { display: flex; align-items: flex-end; gap: 80px; }
.problem__text { flex: 1; display: flex; flex-direction: column; gap: 16px; color: #000; }
.problem__text--24 { gap: 24px; }
.problem__text em { font-family: var(--f-serif); font-weight: 300; font-style: italic; line-height: 1.6; }
.stat { position: relative; flex-shrink: 0; width: 416px; padding: 32px 0; color: var(--plum); }
.stat__text { font-family: var(--f-mono); font-size: 16px; line-height: 1.5; }
.stat__num { position: absolute; font-family: var(--f-serif); font-weight: 300; line-height: 1; }
.stat__label { position: absolute; font-family: var(--f-serif); font-weight: 300; font-size: 24px; text-transform: uppercase; white-space: nowrap; }

/* Cartes objectifs */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.goal {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 32px; border-radius: 16px; background: var(--plum); color: #fff;
}
.goal__top { display: flex; flex-direction: column; gap: 16px; }
.goal__num { font-weight: 700; font-size: 16px; color: var(--lime); }
.goal__title { font-family: var(--f-serif); font-weight: 300; font-size: clamp(24px, 2.22vw, 32px); line-height: 1.1; }
.goal__text { font-size: 14px; line-height: 1.35; }
.goal--light { background: var(--paper-2); color: var(--ink); }
.goal--light .goal__num { color: var(--violet); }
.goal--light .goal__text { color: var(--plum); line-height: 1.5; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi__label { font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--muted-2); }
.kpi__value { font-weight: 600; font-size: 13px; color: var(--ink); }

/* Cartes résumé recherche */
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.summary__card { display: flex; align-items: center; gap: 16px; padding: 24px; border: 4px solid var(--plum); border-radius: 12px; }
.summary__card img { width: 32px; height: 32px; flex-shrink: 0; }
.summary__title { font-family: var(--f-serif); font-weight: 300; font-size: 24px; color: var(--ink); }
.summary__text { font-size: 14px; color: #000; margin-top: 2px; }

.boxed { border: 4px solid var(--plum); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pair { display: flex; gap: 16px; align-items: flex-start; }
.pair > img { min-width: 0; border-radius: 8px; }

/* Insights */
.insights { display: flex; flex-direction: column; gap: 16px; }
.insight { background: var(--plum); color: #fff; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.insight__icon { width: 40px; height: 40px; border-radius: 20px; background: var(--lime); display: grid; place-items: center; }
.insight__icon img { width: 20px; height: 20px; }
.insight__title { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.insight__text { font-size: 14px; line-height: 1.4; margin-top: -8px; }

/* Personas */
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.persona { border: 4px solid var(--violet); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.persona__head { display: flex; align-items: center; gap: 20px; }
.persona__photo { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.persona__name { font-weight: 700; font-size: 22px; color: #000; }
.persona__role { font-weight: 600; font-size: 14px; color: var(--violet); margin-top: 4px; }
.persona__info { font-size: 12px; color: #000; margin-top: 4px; }
.persona__quote { font-family: var(--f-serif); font-weight: 300; font-size: 18px; line-height: 1.4; color: #000; }
.persona__details { display: flex; flex-direction: column; gap: 16px; color: #000; }
.persona__label { font-weight: 700; font-size: 11px; text-transform: uppercase; margin-bottom: 6px; }
.persona__details li { font-size: 14px; }
.persona__details li + li { margin-top: 6px; }
.persona__details li::before { content: "• "; }

/* Flux utilisateur */
.flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 20px; padding: 32px; border-radius: 16px; }
.flow--lime { background: var(--lime); gap: 12px; flex-wrap: nowrap; }
.flow__step { width: 180px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.flow--lime .flow__step { border: 4px solid var(--plum); width: auto; flex: 0 1 200px; min-width: 0; }
.flow__num { font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--violet); }
.flow--lime .flow__num { color: var(--plum); }
.flow__title { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--ink); }
.flow__text { font-size: 12px; color: var(--muted-2); }
.flow__arrow { width: 24px; height: 24px; flex-shrink: 0; }

/* Wireframes */
.wires { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.wire { display: flex; flex-direction: column; gap: 16px; }
.wire__img { width: 100%; }
.wire__img--shadow { box-shadow: 4px 4px 8px rgba(0, 0, 0, .25); }
.wire__title { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.wire__text { font-size: 14px; color: #000; margin-top: 4px; }
.star-choice { position: absolute; right: -58px; top: 210px; width: 85px; height: 85px; rotate: 12deg; }

/* UI finale */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.showcase figure { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.showcase figcaption { text-align: center; }
.caption-title { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--plum); }
.caption-text { font-size: 14px; color: #000; margin-top: 4px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.metric { background: var(--plum); border: 1px solid var(--line); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 12px; color: #fff; }
.metric__value { font-family: var(--f-serif); font-weight: 300; font-size: clamp(36px, 3.33vw, 48px); line-height: 1.1; color: var(--lime); }
.metric__label { font-weight: 700; font-size: 16px; }
.metric__text { font-size: 13px; }

/* UI alternée (Diagramme) */
.ui-rows { display: flex; flex-direction: column; gap: 40px; }
.ui-row { display: flex; align-items: center; gap: 16px; }
.ui-row img { width: 702px; flex-shrink: 1; min-width: 0; }
.ui-row__label { width: 320px; flex-shrink: 0; }
.ui-row--right { justify-content: flex-end; text-align: right; }

/* Grille de composants (Diagramme) */
.ds-grid { display: flex; justify-content: center; align-items: flex-start; gap: 80px; flex-wrap: wrap; }
.ds-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* Témoignage */
.testimonial { background: var(--violet); color: #fff; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.testimonial__quote { font-family: var(--f-serif); font-weight: 300; font-style: italic; font-size: clamp(24px, 2.78vw, 40px); line-height: 1.5; text-transform: uppercase; }
.author { display: flex; align-items: center; gap: 12px; }
.author__initials { width: 40px; height: 40px; border-radius: 20px; background: var(--plum); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.author__name { font-weight: 700; font-size: 14px; }
.author__role { font-size: 12px; margin-top: 2px; }

/* Apprentissages */
.takeaways { display: flex; flex-direction: column; gap: 24px; }
.takeaway { display: flex; gap: 32px; align-items: flex-start; }
.takeaway--center { align-items: center; }
.takeaway__num { width: 48px; flex-shrink: 0; font-family: var(--f-serif); font-weight: 300; font-size: 32px; line-height: 1.1; color: var(--plum); }
.takeaway__title { font-family: var(--f-serif); font-weight: 300; font-size: 24px; line-height: 1.1; color: var(--ink); }
.takeaway__text { font-size: 14px; color: #000; margin-top: 8px; }

/* Prochaines étapes */
.steps { display: flex; flex-direction: column; gap: 16px; }
.steps li { display: flex; align-items: center; }
.steps__n { width: 40px; flex-shrink: 0; font-weight: 700; font-size: 18px; color: var(--plum); }
.steps__t { font-family: var(--f-mono); font-size: clamp(16px, 1.39vw, 20px); line-height: 1.5; color: var(--ink); }

/* Navigation projet précédent / suivant */
.cs-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 80px var(--pad-x);
  background: var(--paper);
}
.cs-nav--bg { background: var(--bg); }
.cs-nav--top { border-top: 1px solid rgba(18, 18, 18, .08); }
.cs-nav__sep { width: 1px; height: 48px; background: var(--line); flex-shrink: 0; }
.cs-nav__link { display: flex; flex-direction: column; gap: 8px; }
.cs-nav__link--next { align-items: flex-end; text-align: right; }
.cs-nav__label { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--muted-2); }
.cs-nav__label--mono { font-family: var(--f-mono); color: #7d757e; }
.cs-nav__title { display: flex; align-items: center; gap: 8px; font-family: var(--f-serif); font-weight: 300; font-size: clamp(18px, 1.67vw, 24px); color: var(--ink); }
.cs-nav__title img { width: 16px; height: 16px; transition: translate .25s var(--ease-out); }
.cs-nav__link--prev:hover img { translate: -6px 0; }
.cs-nav__link--next:hover img { translate: 6px 0; }
.cs-nav__link:hover .cs-nav__title span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- Blocs Brand (Rebranding / Huddle) ---------- */
.overview { display: flex; gap: 120px; align-items: flex-start; padding: 80px var(--pad-x) 100px; border-top: 1px solid rgba(18, 18, 18, .12); }
.overview__intro { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.details { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; text-transform: uppercase; }
.details__item { display: flex; flex-direction: column; gap: 8px; }
.details__label { font-weight: 700; font-size: 12px; color: #000; }
.details__label--mono { font-family: var(--f-mono); font-size: 14px; color: #7d757e; }
.details__value { font-family: var(--f-mono); font-weight: 700; font-size: 16px; color: var(--violet); }

.two-cols { display: flex; gap: 48px; align-items: flex-start; }
.two-cols > * { flex: 1; min-width: 0; }

.inspi { background: var(--plum); color: #fff; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.inspi__top { display: flex; align-items: center; justify-content: space-between; }
.inspi__title { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--lime); }
.inspi__text { font-size: 14px; line-height: 1.5; }

.logo-pair { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 80px; }
.swatches { display: grid; gap: 16px; }
.swatches--4 { grid-template-columns: repeat(4, 1fr); }
.swatches--7 { grid-template-columns: repeat(7, 1fr); }
.swatch { border: 1px solid rgba(18, 18, 18, .08); border-radius: 16px; padding: 24px; padding-top: 188px; font-family: var(--f-geist); }
.swatch__name { font-weight: 600; font-size: 16px; }
.swatch__hex { font-size: 12px; opacity: .8; margin-top: 4px; }
.swatches--7 .swatch { padding-top: 140px; }

.type-panels { display: flex; gap: 80px; align-items: stretch; }
.type-panel { flex: 1; min-width: 0; border: 4px solid var(--plum); border-radius: 4px; padding: 40px; display: flex; flex-direction: column; gap: 32px; color: #000; }
.type-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.type-panel__kicker { font-weight: 600; font-size: 12px; text-transform: uppercase; }
.type-panel__font { font-weight: 500; font-size: 14px; }
.type-panel__desc { font-size: 14px; line-height: 1.6; }

.gallery-row { display: flex; gap: 16px; }
.gallery-row > img { min-width: 0; flex: 1 1 0; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.grid-2--print { grid-template-columns: 1fr 474px; }
.frame-card { border: 4px solid var(--violet); border-radius: 4px; padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.frame-card__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.33vw, 48px); line-height: 1; color: var(--violet); text-transform: uppercase; }
.frame-card__text { font-family: var(--f-geist); font-size: 14px; line-height: 1.5; color: #000; }

/* ---------- Aigle ---------- */
.aigle-overview { display: flex; gap: 48px; padding: 0 var(--pad-x) 120px; }
.aigle-overview .details { width: 398px; }
.aigle-overview__text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.desc-block { display: flex; flex-direction: column; gap: 8px; max-width: 1011px; }
.goretex { display: flex; gap: 56px; align-items: stretch; }
.goretex__tall { width: 32.1%; flex-shrink: 0; object-fit: cover; }
.goretex__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.media-video { width: 100%; background: #e9e6de; }
.lonely { display: flex; gap: 56px; align-items: center; }
.lonely__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.lonely__mock { width: 502px; flex-shrink: 1; min-width: 0; }
.lonely__duo { display: flex; gap: 36px; }
.lonely__duo img { flex: 1; min-width: 0; }
.device { position: relative; }
.device__screen { position: absolute; left: 12.95%; top: 4.63%; width: 74.07%; aspect-ratio: 1075 / 608; object-fit: cover; }
.stories { display: flex; gap: 40px; align-items: flex-start; }
.stories > p { flex: 1; }
.stories img { width: 260px; flex-shrink: 1; min-width: 0; }
.stories__track { display: contents; }
.nl { display: flex; gap: 40px; align-items: flex-start; }
.nl__img { width: 772px; flex-shrink: 1; min-width: 0; }
.nl__text { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.nl__text--flex { flex: 1; width: auto; }
.nl__video { width: 557px; flex-shrink: 1; min-width: 0; }
.nl__photos { width: 255px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 56px; align-self: stretch; }

/* ---------- Huddle ---------- */
.hud { --aub: #311432; --orange: #ff4500; --amber: #ffab00; --cream: #faf2e8; --line-h: #eae0d5; --grey-h: #7d757e; }
.c-aub { color: var(--aub); }
.solidarity { display: flex; align-items: center; gap: 48px; }
.solidarity img { width: 614px; flex-shrink: 1; min-width: 0; }
.solidarity__text { display: flex; flex-direction: column; gap: 8px; max-width: 618px; }
.value { border: 4px solid var(--aub); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.value__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.value__id { display: flex; align-items: center; gap: 16px; }
.value__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(49, 20, 50, .08); }
.value__icon img { width: 24px; height: 24px; }
.value__title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(20px, 1.67vw, 24px); color: var(--aub); font-variation-settings: "opsz" 96; }
.badge { border-radius: 100px; padding: 6px 12px; background: var(--aub); color: var(--cream); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; white-space: nowrap; }
.value__text { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; line-height: 1.5; color: #000; }
.value--orange { border-color: var(--orange); } .value--orange .value__icon { background: rgba(255, 69, 0, .08); } .value--orange .badge { background: var(--orange); }
.value--amber { border-color: var(--amber); } .value--amber .value__icon { background: rgba(255, 171, 0, .08); } .value--amber .badge { background: var(--amber); }
.hud-logo { display: flex; align-items: stretch; gap: 88px; }
.hud-logo__main { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; flex: 1; min-width: 0; padding-bottom: 16px; }
.hud-logo__main figure { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hud-logo__main figcaption { font-size: 14px; color: var(--orange); }
.rules { display: flex; flex-direction: column; gap: 12px; }
.rules ul { display: flex; flex-direction: column; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; color: var(--aub); }
.rules strong { font-weight: 700; }
.hud-logo__vars { width: 477px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.logo-card { border-radius: 16px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 32px; background: var(--aub); }
.logo-card img { width: 264px; }
.logo-card p { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--amber); text-align: center; }
.logo-card--orange { background: var(--orange); }
.logo-card--orange p { color: #fff; }
.swatch-card { background: #fff; border: 1px solid var(--line-h); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.swatch-card__color { height: 180px; }
.swatch-card__meta { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.swatch-card__name { font-family: var(--f-mono); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--aub); }
.swatch-card__hex { font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--orange); margin-top: 4px; }
.swatch-card hr { border: 0; border-top: 1px solid var(--line-h); margin: 0; }
.swatch-card__text { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; line-height: 1.5; color: #000; }
.contrast { background: #fff; border: 1px solid var(--line-h); border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.contrast__list { display: flex; gap: 16px; flex-wrap: wrap; }
.contrast__ex { border-radius: 8px; padding: 10px 16px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 14px; }
.hud .type-panel { border-color: var(--aub); border-radius: 12px; }
.specimen { display: flex; flex-direction: column; }
.specimen__row { display: flex; align-items: center; gap: 48px; padding: 16px 0; border-bottom: 1px solid var(--line-h); color: var(--aub); }
.specimen__meta { width: 240px; flex-shrink: 0; font-family: "Plus Jakarta Sans", sans-serif; }
.specimen__meta b { display: block; font-size: 14px; }
.specimen__meta span { display: block; font-size: 11px; color: var(--grey-h); margin-top: 4px; }
.specimen__sample { flex: 1; min-width: 0; line-height: 1.2; }
.f-bric { font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "opsz" 14; }
.f-bric-96 { font-variation-settings: "opsz" 96; }
.f-jak { font-family: "Plus Jakarta Sans", sans-serif; }
.mockups-show { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.mockups-show figure { display: flex; flex-direction: column; gap: 4px; }
.mockups-show figcaption, .fig-caption { font-size: 14px; color: #000; }
.lp-pair { display: flex; align-items: center; gap: 16px; }
.lp-pair img:first-child { width: 562px; min-width: 0; flex-shrink: 1; }
.lp-pair img:last-child { width: 176px; min-width: 0; flex-shrink: 1; }
.centered-block { width: 100%; max-width: 1089px; margin: 0 auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
  .flow--lime { flex-direction: column; }
  .flow--lime .flow__step { flex: none; width: 100%; max-width: 320px; }
  .flow--lime .flow__arrow { rotate: 90deg; }
  .project-row__meta .tags { width: auto; max-width: 300px; }
  .cs-hero__img { width: 48%; }
  .overview { gap: 56px; }
  .hud-logo { gap: 40px; }
  .hud-logo__vars { width: 40%; }
  .type-panels { gap: 32px; }
  .star-choice { right: -20px; }
}

@media (max-width: 1024px) {
  /* Accueil */
  .work__list { gap: 44px; }
  .project-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .project-row__name { white-space: normal; }
  .project-row__meta { width: 100%; justify-content: space-between; }
  .project-row__meta .tags { max-width: none; }
  .work__preview { display: none; }
  .about__body { flex-direction: column; }
  .about__lab { width: 100%; padding: 64px 20px 24px; }
  .about__content { border-left: 0; border-top: 1.5px solid var(--ink); }

  /* Études */
  .sec { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .cs-hero__media { flex-direction: column; align-items: stretch; gap: 40px; }
  .cs-hero__img { width: 100%; }
  .meta--row { flex-wrap: wrap; }
  .meta--row .meta__item { width: calc(50% - 16px); }
  .problem { flex-direction: column; align-items: stretch; gap: 48px; }
  .stat { width: 100% !important; max-width: 480px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .stat__num, .stat__label { position: static; }
  .stat__num { font-size: clamp(96px, 26vw, 160px) !important; line-height: .9; }
  .cards-3, .metrics { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .summary, .personas, .showcase { grid-template-columns: 1fr; }
  .wires { grid-template-columns: 1fr 1fr; }
  .star-choice { display: none; }
  .ui-row, .ui-row--right { flex-direction: column; align-items: flex-start; text-align: left; }
  .ui-row--right .ui-row__label { order: 2; }
  .ui-row img { width: 100%; }
  .ui-row__label { width: 100%; }
  .overview, .aigle-overview { flex-direction: column; gap: 40px; }
  .details, .aigle-overview .details { width: 100%; }
  .two-cols, .type-panels, .solidarity, .hud-logo, .lonely, .nl, .goretex { flex-direction: column; align-items: stretch; }
  .hud-logo__vars { width: 100%; }
  .goretex__tall { width: 100%; max-height: 900px; object-position: top; }
  .lonely__mock { width: 100%; max-width: 502px; margin: 0 auto; }
  .nl__img, .nl__video, .nl__text, .solidarity img { width: 100%; }
  .nl__photos { width: 100%; flex-direction: row; gap: 16px; }
  .nl__photos img { width: 50%; }
  .swatches--4 { grid-template-columns: 1fr 1fr; }
  .swatches--7 { grid-template-columns: repeat(4, 1fr); }
  .logo-pair { padding: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .stories { flex-wrap: wrap; }
  .stories > p { flex-basis: 100%; }
  .stories img { width: calc((100% - 80px) / 3); }
  .mockups-show { flex-direction: column; }
  .labo { min-height: 100svh; }
  .labo__illu { position: relative; left: auto; top: auto; width: min(100%, 724px); margin: 24px 0 0 auto; }
}

@media (max-width: 720px) {
  .hero__roles { flex-wrap: wrap; row-gap: 16px; }
  .hero__visual { order: 3; width: 100%; }
  .bio { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .scroll-star { align-self: flex-end; }
  .project-row__meta { flex-wrap: wrap; gap: 16px; }
  .skills { gap: 24px 20px; }
  .contact__bar { flex-direction: column; align-items: flex-start; }

  .home-btn { top: 12px; left: 12px; }
  .cs-hero { padding-top: 88px; gap: 32px; }
  .meta--row .meta__item { width: 100%; }
  .cards-4, .wires, .swatches--4 { grid-template-columns: 1fr; }
  .swatches--7 { grid-template-columns: 1fr 1fr; }
  .flow { flex-direction: column; }
  .flow__arrow { rotate: 90deg; }
  .flow__step, .flow--lime .flow__step { width: 100%; max-width: 320px; }
  .pair, .gallery-row, .lonely__duo { flex-direction: column; }
  .pair > img, .gallery-row > img { width: 100%; }
  .cs-nav { flex-direction: column; align-items: stretch; }
  .cs-nav__sep { width: 100%; height: 1px; }
  .cs-nav__link--next { align-items: flex-end; }
  .takeaway { gap: 16px; }
  .specimen__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stories img { width: 100%; max-width: 320px; }
  .nl__photos { flex-direction: column; }
  .nl__photos img { width: 100%; }
  .mockups-show .lp-pair { flex-direction: column; align-items: flex-start; }
  .testimonial { padding: 28px; }
  .goal, .persona, .type-panel, .frame-card, .logo-card { padding: 24px; }
}

/* =========================================================
   EXPÉRIENCE MOBILE
   ========================================================= */

/* Bandes d'images à faire glisser au doigt (planches larges trop détaillées pour un écran étroit) */
.m-pan { width: 100%; }

@media (max-width: 1024px) {
  /* Accueil : chaque projet devient une carte avec son visuel (pas de survol au doigt) */
  .work__list { gap: 56px; }
  .project-row::after { inset: 0; }
  .project-row__thumb {
    position: relative; display: block; order: -1;
    width: 100%; aspect-ratio: 16 / 10;
    border-radius: 20px; background: #e8e4d8; overflow: hidden;
  }
  .project-row__thumb img {
    position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); max-width: none;
    object-fit: contain; transition: scale .5s var(--ease-out);
  }
  .project-row:active .project-row__thumb img { scale: .97; }

  /* Études : les grilles ne débordent plus */
  .cards-3 > *, .cards-4 > *, .grid-2 > * { min-width: 0; }
  .value__top { flex-wrap: wrap; }
  .logo-pair > img { min-width: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* ----- Accueil ----- */
  .hero { gap: 28px; padding-top: 32px; }
  .hero__name { font-size: calc((100vw - 40px) / 5.1); line-height: .86; }
  .hero__name span { display: block; }
  .hero__roles { width: 100%; justify-content: space-between; column-gap: 12px; }
  .hero__role { font-size: clamp(34px, 11vw, 48px); }
  .hero__visual { border-radius: 12px; }
  .marquee__word { font-size: 44px; }
  .bio { width: calc(100% - 40px); padding-top: 20px; gap: 8px; }
  .bio__text { font-size: 15px; line-height: 1.6; }
  .scroll-star { display: none; } /* sur mobile, on fait défiler naturellement : l'étoile n'a plus d'utilité */

  .work { padding: 24px 20px 72px; }
  .work__title { margin-bottom: 36px; }
  .work__list { gap: 48px; }
  .project-row { gap: 14px; }
  .project-row__thumb { aspect-ratio: 4 / 3; border-radius: 16px; }
  .project-row__thumb img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .project-row__name { font-size: 40px; }
  .project-row__meta { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .project-row__logo { width: auto; justify-content: flex-start; }
  .project-row__logo img { max-height: 30px; width: auto; }

  .about__head { padding: 32px 20px 20px; }
  .about__lab { padding: 64px 20px 40px; }
  .about__content { padding: 36px 20px; gap: 36px; }
  .about__intro { font-size: 15px; line-height: 1.6; }
  .skills { gap: 20px 18px; }

  .contact__main { padding: 48px 20px 32px; gap: 16px; }
  .contact__links { flex-direction: column; gap: 0; font-size: 15px; }
  .contact__links a { display: block; padding: 10px 0; background-position: 50% calc(100% - 8px); }
  .contact__bar { flex-direction: row; justify-content: space-between; padding: 8px 20px 20px; }
  .contact__bar a { padding: 12px 0; }

  /* Pastilles (projets + outils) : -15 % */
  .project-row .tags, .cs-head .tags, .tools .tags { gap: 6px; }
  .project-row .tag, .cs-head .tag, .tools .tag { padding: 6px 10px; font-size: 10.2px; border-width: 1px; }
  /* Logo Siteflow : plus large que les autres, on le ramène à la même présence visuelle */
  .project-row__logo img[src*="siteflow"] { max-height: 21px; }

  /* ----- Études de cas ----- */
  .home-btn {
    top: max(10px, env(safe-area-inset-top)); left: 10px; width: 48px; height: 48px;
    transition: translate .3s var(--ease-out), rotate .35s var(--ease-out), scale .35s var(--ease-out);
  }
  .home-btn.is-tucked { translate: 0 -80px; }
  .lang-switch { top: max(10px, env(safe-area-inset-top)); right: 10px; padding: 4px; }
  .lang-switch a { min-width: 40px; height: 36px; border-radius: 18px; }
  .lang-switch.is-tucked { translate: 0 -80px; }
  .hero { padding-top: 64px; }
  .labo { padding-top: 72px; }
  .cs-hero { padding-top: 76px; padding-bottom: 48px; gap: 28px; }
  .cs-hero--roomy { gap: 36px; padding-bottom: 56px; }
  .cs-title { font-size: min(calc((100vw - 40px) / 9.1), 56px); line-height: .96; }
  .cs-title--80 { font-size: min(calc((100vw - 40px) / 9.1), 56px); }
  .cs-subtitle, .cs-subtitle--48 { font-size: 24px; line-height: 1.15; }
  .cs-hero__img { border-radius: 12px; }
  .sec, .overview { padding-top: 56px !important; padding-bottom: 56px !important; gap: 32px; }
  .aigle-overview { padding-bottom: 56px; }
  .lead, .body-mono { font-size: 15px; line-height: 1.6; }
  .h2--36, .overview__intro .h2 { font-size: 22px; line-height: 1.25; }
  /* Huddle — palette : nom + code écrits directement sur la couleur */
  .swatch-card { position: relative; }
  .swatch-card__color { height: 112px; }
  .swatch-card__meta { padding: 18px 20px 20px; gap: 0; }
  .swatch-card__meta > div:first-child { position: absolute; left: 20px; top: 50px; color: var(--on); }
  .swatch-card__name, .swatch-card__hex { color: inherit; }
  .swatch-card__hex { opacity: .85; }
  .swatch-card hr { display: none; }
  /* Huddle — valeurs : sans pastille */
  .value .badge { display: none; }
  /* Huddle — contrastes certifiés : sans cadre, exemples centrés */
  .contrast { background: none; border: 0; padding: 0; flex-direction: column; justify-content: center; text-align: center; gap: 16px; }
  .contrast__list { justify-content: center; gap: 10px; }
  /* Huddle — mise en contexte : écrans centrés */
  .mockups-show figure { align-items: center; text-align: center; width: 100%; }
  .mockups-show .lp-pair { align-items: center; }
  .hud .fig-caption { text-align: center; } /* légende de la campagne d'affichage, alignée sur celles des écrans */
  .swatches--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .swatches--7 { gap: 12px; }
  .swatch { padding: 96px 16px 16px; }
  .swatches--7 .swatch { padding-top: 72px; }
  .stat__num { font-size: 120px !important; }
  .problem { gap: 32px; }

  /* Bandes à faire glisser : pleine largeur, fondu sur le bord droit pour signaler le geste */
  .m-pan {
    width: auto; max-width: none; align-self: stretch; min-width: 0;
    margin-inline: -20px; padding-inline: 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .m-pan::-webkit-scrollbar { display: none; }
  .m-pan > img { max-width: none; }
  .m-pan--mascots > img { width: 1100px; }
  .m-pan--photos > img { width: 780px; }
  .m-pan--wide > img { width: 860px; }
  .centered-block.stack-16 { width: 100%; }

  /* Stories Instagram : carrousel comme dans l'app */
  .stories { gap: 24px; }
  .stories__track {
    display: flex; gap: 12px; margin-inline: -20px; padding-inline: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  .stories__track::-webkit-scrollbar { display: none; }
  .stories__track img { width: 68vw !important; max-width: 280px !important; flex-shrink: 0; scroll-snap-align: start; border-radius: 12px; }

  /* Aigle : casquette et sac côte à côte */
  .lonely__duo { flex-direction: row; gap: 12px; }

  /* Newsletter Bombers : les deux photos côte à côte */
  .nl__photos { flex-direction: row; gap: 12px; }
  .nl__photos img { width: calc(50% - 6px); }

  .grid-2--print { grid-template-columns: 1fr; }

  /* Rebranding : logos l'un sous l'autre */
  .logo-pair { flex-direction: column; gap: 40px; }
  .logo-pair > img:last-child { width: 56%; }

  /* Diagramme : la carte en entier, les deux barres côte à côte */
  .ds-grid { gap: 32px 16px; }
  .ds-col:first-child { flex-basis: 100%; }
  .ds-col:not(:first-child) { flex: 1 1 0; min-width: 0; }
  .ds-col .label-mono { font-size: 13px; text-align: center; }

  /* Navigation entre projets : deux grandes cartes faciles à toucher */
  .cs-nav { gap: 12px; padding-top: 48px; padding-bottom: 56px; }
  .cs-nav__sep { display: none; }
  .cs-nav__link { padding: 20px; border: 1px solid rgba(18, 18, 18, .12); border-radius: 16px; background: rgba(255, 255, 255, .5); }
  .cs-nav__link:active { background: #fff; }
  .cs-nav__title { font-size: 20px; }
}

/* Tablette : les cartes projets sur deux colonnes */
@media (min-width: 721px) and (max-width: 1024px) {
  .work__list { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 24px; }
  .project-row__name { font-size: 44px; }
  .project-row__meta { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .project-row__logo { width: auto; justify-content: flex-start; }
  .project-row__logo img { max-height: 30px; width: auto; }
}

/* Petits téléphones (iPhone SE, Android compacts) */
@media (max-width: 380px) {
  .project-row__name { font-size: 34px; }
  .skills { font-size: 20px; }
}

/* Mouvement réduit : on coupe les animations continues */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .scroll-star img { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}