/* ==========================================================================
   Portfolio – styles du site public
   Ouverture nuit indigo, sections claires, une couleur vive par type de projet.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --night: #12102b;
  --night-2: #1e1a48;
  --paper: #f6f5fb;
  --surface: #ffffff;
  --ink: #15132e;
  --soft: #5d5a7a;
  --line: #e2e0ee;
  --primary: #5b4bff;
  --primary-ink: #4636e0;
  --on-night: #c9c6ea;
  --cat: #5b4bff; --cat2: #8a3ffc; --cat-ink: #4636e0;
  --bezel: #15132e;
  --font: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 80rem;
  --top-h: 4.5rem; /* hauteur de l'en-tête, posé par-dessus la première section */
}

/* Une couleur par type : --cat et --cat2 pour les fonds, --cat-ink pour le texte sur fond clair */
.cat-app-web    { --cat: #5b4bff; --cat2: #8a3ffc; --cat-ink: #4636e0; }
.cat-site-web   { --cat: #12b8a6; --cat2: #0a7c9c; --cat-ink: #0a7c73; }
.cat-app-mobile { --cat: #ff4f8b; --cat2: #ff8a5c; --cat-ink: #d42a6b; }
.cat-analyse    { --cat: #ffb020; --cat2: #f2711c; --cat-ink: #a85f00; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); font-optical-sizing: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid #ffb020; outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.skip { position: absolute; left: -999rem; top: 0; background: #fff; color: var(--ink); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 650; font-stretch: 84%; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none;
  padding: 0.85rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--primary); color: #fff;
  transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--primary-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgb(91 75 255 / 0.35); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; box-shadow: 0 10px 28px rgb(255 255 255 / 0.22); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4); }
.btn--ghost:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------- En-tête ---------- */
.top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; color: #fff; }
main { position: relative; }
body { position: relative; }
.top__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; max-width: var(--max); margin: 0 auto; padding: 1.1rem var(--pad); }
.top__name { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1875rem; text-decoration: none; letter-spacing: -0.01em; }
.top__mark { width: 1.5rem; height: 1.5rem; border-radius: 7px 7px 7px 2px; background: conic-gradient(from 210deg, #5b4bff, #ff4f8b, #ffb020, #12b8a6, #5b4bff); }
.top__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.top__nav a { text-decoration: none; color: var(--on-night); }
.top__nav a:hover { color: #fff; }
.top__nav .top__cta { color: #fff; padding: 0.45rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35); }
.top__nav .top__cta:hover { background: #fff; color: var(--ink); }

/* ---------- Ouverture ---------- */
.hero, .project__head, .contact {
  color: #fff;
  background:
    radial-gradient(48rem 30rem at 88% 8%, rgb(91 75 255 / 0.55), transparent 62%),
    radial-gradient(34rem 26rem at 100% 92%, rgb(255 79 139 / 0.3), transparent 60%),
    radial-gradient(30rem 22rem at -6% 100%, rgb(18 184 166 / 0.2), transparent 60%),
    radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--night);
}
.hero { overflow: hidden; }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 2.5rem clamp(2rem, 4vw, 4.5rem);
  max-width: var(--max); margin: 0 auto; padding: calc(clamp(2.5rem, 6vw, 5rem) + var(--top-h)) var(--pad) clamp(3.5rem, 8vw, 6.5rem);
}
.hero__roles { color: var(--on-night); font-size: 1.0625rem; max-width: 34rem; margin-bottom: 1.5rem; padding-left: 1rem; border-left: 3px solid #ff4f8b; }
.hero h1, .project__head h1 {
  font-size: clamp(2.5rem, 5.3vw, 4.5rem); font-weight: 680; font-stretch: 80%;
  line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance;
}
.hero__intro { margin-top: 1.5rem; max-width: 36rem; font-size: 1.1875rem; line-height: 1.5; color: var(--on-night); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Vitrine : navigateur, ordinateur portable et téléphone superposés */
.showcase { position: relative; aspect-ratio: 1 / 0.82; --bezel: #322d63; }
.showcase__item { position: absolute; display: block; text-decoration: none; animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.showcase__item .device { width: 100%; filter: drop-shadow(0 26px 40px rgb(5 4 20 / 0.55)); transition: transform 0.3s ease; }
a.showcase__item:hover .device { transform: translateY(-8px); }
.showcase__item--browser { width: 68%; left: 0; top: 0; animation-delay: 0.05s; }
.showcase__item--laptop { width: 82%; right: -3%; top: 29%; animation-delay: 0.2s; }
.showcase__item--phone { width: 21%; left: 5%; bottom: 0; animation-delay: 0.35s; z-index: 2; }
.showcase__item--phone .device__screen { border-width: 6px; border-radius: 22px; }
@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* ---------- Supports ---------- */
.device { position: relative; filter: drop-shadow(0 18px 26px rgb(21 19 46 / 0.3)); }
.device__screen { overflow: hidden; background: #fff; }
.device__screen img, .ph { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Sans image : une interface esquissée dans la couleur du type */
.ph {
  --tint: color-mix(in srgb, var(--cat) 16%, #fff);
  background:
    linear-gradient(var(--bezel), var(--bezel)) 0 0 / 100% 10% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8% 24% / 40% 7% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 8% 37% / 46% 3.5% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 7% 44% / 36% 3.5% no-repeat,
    linear-gradient(var(--cat), var(--cat)) 6% 57% / 20% 8% no-repeat,
    linear-gradient(135deg, var(--cat), var(--cat2)) 93% 33% / 32% 40% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 7% 93% / 27% 20% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 50% 93% / 27% 20% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 93% 93% / 27% 20% no-repeat,
    #fff;
}
.device--phone .ph {
  background:
    linear-gradient(150deg, var(--cat), var(--cat2)) 0 0 / 100% 30% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 50% 40% / 84% 12% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 50% 57% / 84% 12% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 50% 74% / 84% 12% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 50% 91% / 84% 12% no-repeat,
    #fff;
}
.device--sheet .ph {
  background:
    linear-gradient(var(--ink), var(--ink)) 12% 9% / 50% 5% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 12% 18% / 70% 2.5% no-repeat,
    linear-gradient(var(--cat), var(--cat)) 14% 70% / 13% 22% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 38% 70% / 13% 34% no-repeat,
    linear-gradient(var(--cat), var(--cat)) 62% 70% / 13% 28% no-repeat,
    linear-gradient(var(--cat2), var(--cat2)) 86% 70% / 13% 44% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 12% 84% / 76% 2.5% no-repeat,
    linear-gradient(var(--tint), var(--tint)) 12% 90% / 60% 2.5% no-repeat,
    #fff;
}

/* Site web : fenêtre de navigateur */
.device--browser { width: 100%; border-radius: 10px; overflow: hidden; background: #fff; }
.device--browser .device__bar { position: relative; height: 22px; background: var(--bezel); }
.device--browser .device__bar::before {
  content: ""; position: absolute; left: 10px; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: #ff5f6d; box-shadow: 10px 0 #ffb020, 20px 0 #2ed3a0;
}
.device--browser .device__bar i { position: absolute; left: 50px; right: 10px; top: 6px; height: 10px; border-radius: 5px; background: rgb(255 255 255 / 0.16); }
.device--browser .device__screen { aspect-ratio: 16 / 10; }

/* Application web : ordinateur portable */
.device--laptop { width: 100%; padding: 0 7% 10px; }
.device--laptop .device__screen { aspect-ratio: 16 / 10; border: 7px solid var(--bezel); border-bottom-width: 9px; border-radius: 12px 12px 0 0; }
.device--laptop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(var(--bezel), color-mix(in srgb, var(--bezel) 70%, #fff)); border-radius: 2px 2px 12px 12px; }

/* Application mobile : téléphone */
.device--phone { width: 27%; }
.device--phone .device__screen { aspect-ratio: 9 / 19; border: 5px solid var(--bezel); border-radius: 20px; }
.device--phone::before { content: ""; position: absolute; z-index: 1; top: 11px; left: 50%; width: 26%; height: 5px; border-radius: 3px; background: var(--bezel); transform: translateX(-50%); }

/* Analyse : feuille au coin plié */
.device--sheet { width: 42%; }
.device--sheet .device__screen { aspect-ratio: 3 / 4; border-radius: 4px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.device--sheet::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: linear-gradient(to top right, #e9e6f5 50%, transparent 50%); }

/* ---------- Projets ---------- */
.work { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2.5rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.filter .ico { width: 18px; height: 18px; color: var(--cat-ink); }
.filter__count { font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }
.filter:hover { box-shadow: inset 0 0 0 1.5px var(--cat-ink); }
.filter.is-active { background: var(--ink); color: #fff; box-shadow: none; }
.filter.is-active .ico, .filter.is-active .filter__count { color: #fff; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.card__link { display: block; text-decoration: none; }
.stage {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  padding: 9% 9% 0; border-radius: 24px; align-items: end;
  background:
    radial-gradient(70% 60% at 85% 0%, rgb(255 255 255 / 0.28), transparent 60%),
    linear-gradient(140deg, var(--cat), var(--cat2));
}
.stage .device { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.stage .device--browser { border-radius: 10px 10px 0 0; }
.stage .device--laptop, .stage .device--phone, .stage .device--sheet { align-self: center; margin-bottom: 9%; }
.stage .device--phone { margin-bottom: 0; align-self: end; transform: translateY(8%); }
.card__link:hover .device { transform: translateY(-10px) scale(1.015); }
.card__link:hover .device--phone { transform: translateY(0); }
.card__text { padding: 1.1rem 0.25rem 0; }
.card__meta { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: var(--soft); }
.tag { color: var(--cat-ink); font-weight: 650; }
.card__title { margin-top: 0.3rem; font-size: 1.75rem; font-weight: 650; font-stretch: 90%; line-height: 1.1; letter-spacing: -0.015em; }
.grid--3 .card__title { font-size: 1.375rem; }
.card__link:hover .card__title { color: var(--cat-ink); }
.card__summary { margin-top: 0.45rem; color: var(--soft); max-width: 44ch; }
.empty { padding: 3rem 0; color: var(--soft); font-size: 1.125rem; }

/* ---------- Métiers ---------- */
.roles { background: var(--surface); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.roles h2 { max-width: 16ch; margin-bottom: 2.5rem; }
.roles__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.25rem; }
.role { background: var(--paper); border-radius: 22px; padding: 1.75rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; align-content: start; }
.role__ico { grid-row: 1 / 3; color: var(--primary); width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #e9e6ff; }
.role h3 { font-size: 1.3125rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.role p { color: var(--soft); grid-column: 2; }
.role--main {
  grid-row: 1 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: clamp(1.75rem, 4vw, 3rem); min-height: 24rem;
  color: #fff;
  background:
    radial-gradient(60% 50% at 100% 0%, rgb(255 79 139 / 0.75), transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgb(18 184 166 / 0.45), transparent 60%),
    linear-gradient(150deg, #5b4bff, #3b2bd6);
}
.role--main h3 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-stretch: 82%; line-height: 1; letter-spacing: -0.02em; }
.role--main p { color: #ecebff; font-size: 1.1875rem; max-width: 30rem; }
.role__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.role__links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgb(255 255 255 / 0.16); text-decoration: none; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.role__links a:hover { background: #fff; color: var(--primary-ink); }
.role__links .ico { width: 18px; height: 18px; }

/* ---------- À propos ---------- */
.about { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.about__body { display: flex; flex-wrap: wrap; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.about__photo { width: min(20rem, 100%); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: 14px 14px 0 var(--primary); }
.about__body > div { flex: 1 1 24rem; }
.about h2 { margin-bottom: 1.5rem; }
.prose { max-width: 42rem; font-size: 1.1875rem; line-height: 1.6; }
.prose p + p { margin-top: 1.1em; }

/* ---------- Contact ---------- */
.contact { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.contact__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.contact h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 2rem; }
.mail { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 600; overflow-wrap: anywhere; text-decoration-color: #ff4f8b; text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.links a { display: inline-block; padding: 0.45rem 1rem; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35); }
.links a:hover { background: #fff; color: var(--ink); }

.form { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); }
.form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.9375rem; }
.form input, .form textarea {
  font: inherit; font-weight: 400; font-size: 1.0625rem; color: #fff; width: 100%;
  padding: 0.75rem 0.9rem; background: rgb(255 255 255 / 0.08); border: 1.5px solid rgb(255 255 255 / 0.28); border-radius: 12px;
}
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus-visible, .form textarea:focus-visible { outline: 0; border-color: #fff; background: rgb(255 255 255 / 0.14); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -999rem; }

.flash { padding: 0.8rem 1rem; border-radius: 12px; font-weight: 600; }
.flash--ok { background: #dff7ef; color: #0b5a45; }
.flash--error { background: #ffe3ec; color: #9a1f48; }

/* ---------- Fiche projet ---------- */
.project__head {
  padding: calc(clamp(2rem, 5vw, 3.5rem) + var(--top-h)) 0 clamp(9rem, 20vw, 16rem);
  background:
    radial-gradient(46rem 30rem at 90% 0%, color-mix(in srgb, var(--cat) 65%, transparent), transparent 62%),
    radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--night);
}
.project__head h1 { max-width: 18ch; }
.project__back { margin-bottom: 1.5rem; }
.project__back a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35); }
.project__back a:hover { background: #fff; color: var(--ink); }
.project__back .ico { width: 18px; height: 18px; }
.project__head .flash { display: inline-block; margin-top: 1.5rem; }

.stage--large { aspect-ratio: auto; margin-top: clamp(-13rem, -17vw, -7rem); padding: clamp(1.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem) 0; border-radius: 32px; box-shadow: 0 30px 60px rgb(21 19 46 / 0.22); }
.stage--large .device--browser, .stage--large .device--laptop { max-width: 60rem; }
.stage--large .device--laptop, .stage--large .device--sheet { margin-bottom: clamp(1.5rem, 6vw, 4.5rem); }
.stage--large .device--phone { width: min(20rem, 64%); transform: none; margin-bottom: -6%; }
.stage--large .device--phone .device__screen { border-width: 10px; border-radius: 38px; }
.stage--large .device--phone::before { top: 20px; height: 8px; }
.stage--large .device--sheet { width: min(36rem, 84%); }
.stage--large .device--browser .device__bar { height: 34px; }
.stage--large .device--browser .device__bar::before { left: 15px; top: 12px; width: 10px; height: 10px; box-shadow: 17px 0 #ffb020, 34px 0 #2ed3a0; }
.stage--large .device--browser .device__bar i { left: 80px; top: 9px; height: 16px; border-radius: 8px; }
.stage--large .device--laptop .device__screen { border-width: 13px; border-bottom-width: 15px; border-radius: 18px 18px 0 0; }
.stage--large .device--laptop { padding-bottom: 16px; }
.stage--large .device--laptop::after { height: 16px; border-radius: 2px 2px 16px 16px; }

.project__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 2rem clamp(2rem, 6vw, 5rem); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.facts { display: grid; gap: 0.75rem; align-content: start; }
.facts > div { background: var(--surface); border-radius: 16px; padding: 0.9rem 1.1rem; }
.facts dt { font-size: 0.9375rem; color: var(--soft); }
.facts dd { font-weight: 650; font-size: 1.125rem; line-height: 1.3; }
.facts .facts__key { background: linear-gradient(140deg, var(--cat), var(--cat2)); color: #fff; }
.cat-analyse .facts__key { color: var(--ink); }
.facts__key dt { color: inherit; opacity: 0.85; }
.facts__key dd { font-size: 1.375rem; }
.prose .btn { margin-top: 0.75rem; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; padding-bottom: clamp(2rem, 5vw, 4rem); }
.gallery img { width: 100%; border-radius: 16px; box-shadow: 0 12px 30px rgb(21 19 46 / 0.12); background: var(--surface); }
.gallery--phone { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.gallery--phone img { border-radius: 26px; }
.work--more { background: var(--surface); }
.work--more h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }

/* ---------- Pied de page ---------- */
.foot { background: var(--night); color: var(--on-night); border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.9375rem; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; max-width: var(--max); margin: 0 auto; padding: 1.5rem var(--pad) 2rem; }
.foot a:hover { color: #fff; }

/* ---------- Écrans plus étroits ---------- */
@media (max-width: 62rem) {
  .hero__in { grid-template-columns: 1fr; }
  .showcase { max-width: 40rem; width: 100%; margin-inline: auto; }
  .roles__grid { grid-template-columns: 1fr; }
  .role--main { grid-row: auto; min-height: 18rem; }
  .project__body, .contact__body { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
  :root { --top-h: 6.5rem; }
  .grid, .grid--3 { grid-template-columns: 1fr; gap: 2.25rem; }
  .gallery { grid-template-columns: 1fr; }
  .top__nav { gap: 0.25rem 1rem; font-size: 0.9375rem; }
  .card__title { font-size: 1.5rem; }
  .stage { border-radius: 20px; }
  .stage--large { border-radius: 22px; }
  .role { grid-template-columns: 1fr; }
  .role p { grid-column: 1; }
  .role__ico { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}