/* senso.fr, the senso family page.
   Design: Figma "Senso-Art-Index", frame 435 (node 1600:21326).
   Values follow the frame at 1440 x 810 and the senso panel already live on the sister sites. */

@font-face {
  font-display: swap;
  font-family: "Senso";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/senso/Senso-Regular.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/proxima-nova/proxima-nova-alt-semibold-webfont.e091eb4e.woff2) format("woff2");
}

:root {
  --bg: #e2e2e2;
  --ink: #000;
  --ink-soft: #515151;
  --ink-mute: rgba(0, 0, 0, 0.5);
  --pill-light: #d9d9d9;
  --pill-dark: rgba(23, 23, 23, 0.8);
  --badge: #181818;

  --font-brand: "Senso", "Quicksand", sans-serif;
  --font-ui: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 2.063rem; /* 33px, the rail on small screens */
  --rail: 2.063rem;
  --col-gap: 2.22vw; /* 32 / 1440 */
  --logo-scale: 1;

  /* Where the widest agency line ends: senso photo, gutter, logo (302px at full scale), the
     2rem + 1.8rem before the description, and the widest text beside it (measured, "Inspiring
     photographers" at 25px). The breakpoints below change the scale and the text. */
  --desc-text: 247px;
  --desc-end: calc(var(--gutter) + 302px * var(--logo-scale) + 3.8rem + var(--desc-text));

  /* The wall sits against the rail, one gutter before it, and never comes within 32px of the
     descriptions: the columns are the Figma's 286 / 1440, narrower when that would be too close. */
  --col: min(19.86vw, (100vw - var(--rail) - 2 * var(--col-gap) - var(--desc-end) - 32px) / 2);
  --wall-span: calc(2 * var(--col) + 2 * var(--col-gap) + var(--rail)); /* wall's left edge to the window's right edge */
  --wall-left: calc(100vw - var(--wall-span));
}

@media (min-width: 768px) {
  :root {
    --gutter: 4.125rem; /* 66px */
  }
}
@media (min-width: 992px) {
  :root {
    --rail: 4.125rem;
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}

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

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

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Present for assistive technology and search engines, out of sight (the h1). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid #0b33ff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 17px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.pill--light {
  background: var(--pill-light);
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.4), 0 -1px 0 0 #fff;
  transition: background-color 0.2s ease;
}
.pill--light:hover {
  background: #cfcfcf;
}

.pill--dark {
  background: var(--pill-dark);
  color: #d9d9d9;
  letter-spacing: 1px;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* ---------- Left column ---------- */

.family {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1.5375rem + 3.45vw) calc(var(--rail) + var(--gutter)) calc(1.5375rem + 3.45vw) var(--gutter);
}

@media (min-width: 1200px) {
  .family {
    padding-top: 62px;
    padding-bottom: 66px;
  }
}

.logo img {
  width: 100px;
  height: auto;
}

.tagline {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.from {
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 1.125rem;
}
.from b {
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 1.375rem;
  font-weight: 400;
}

/* The pills under the logo: "Back to <agency>" for a visitor sent by a sister site, and Contact. */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.family-nav {
  margin-top: auto;
  padding-top: 3rem;
}

.entities {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entities li {
  position: relative;
}

/* Each agency is a heading for search engines; the heading adds nothing to the rendering. */
.entities h2 {
  margin: 0;
  font: inherit;
}

/* Row rhythm copied from the live senso panel, which matches the Figma frame. */
.entities a {
  display: flex;
  padding: 5px 0;
  transition: opacity 0.15s linear;
}
@media (min-width: 768px) {
  .entities a {
    padding: 15px 0;
  }
  .entities li:first-child a {
    padding-bottom: 17px;
  }
  .entities li:nth-child(2) a {
    padding-top: 17px;
  }
  .entities li:nth-child(3) a {
    padding-bottom: 9px;
  }
  .entities li:nth-child(4) a {
    padding-top: 9px;
  }
  .entities li:last-child a {
    padding-bottom: 0;
  }
}

.entity-logo {
  display: flex;
}
.entity-logo img {
  align-self: center;
  width: calc(var(--w) * var(--logo-scale));
  height: auto;
}

/* The others fade to 20% while one agency is shown. */
.entities.is-active a:not(.is-current),
.entities:has(a:hover) a:not(:hover) {
  opacity: 0.2;
}

.entity-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  white-space: nowrap;
}
.entity-kind {
  color: var(--ink-mute);
  font-size: 0.875rem;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.entity-sig {
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 1.5625rem;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 768px) {
  .entity-desc {
    position: absolute;
    top: 50%;
    left: calc(100% + 2rem);
    padding-left: 1.8rem;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s linear;
  }
  .entity-desc::before {
    content: "";
    position: absolute;
    top: calc(50% + 5px);
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    transform: translateY(-50%);
  }
  .entities a.is-current .entity-desc,
  .entities a:hover .entity-desc,
  .entities a:focus-visible .entity-desc {
    opacity: 1;
  }
}

/* Under 768px the list is the one of the 2024 site: each agency is a block, the wordmark
   in a 2.125rem band at 0.6288 of its size, the activity under it in 12px grey capitals, the
   signature hidden, 0.625rem above and below each agency. No white rail on phones (Cédric,
   2026-09-23), so the page keeps the 2024 padding on both sides. The wordmark is sized by
   its width rather than a transform: a transform keeps the full-size box, which the column
   capped with max-width and shrank the widest wordmark (senso photo). */
@media (max-width: 767.98px) {
  .family {
    padding-right: var(--gutter);
  }
  .rail {
    display: none;
  }
  .tagline {
    letter-spacing: 0;
    line-height: 1.5;
  }
  .family-nav {
    padding-top: 0;
  }
  .entities a {
    display: block;
    padding: 0.625rem 0;
    line-height: 1;
  }
  .entity-logo {
    display: block;
    height: 2.125rem;
  }
  .entity-logo img {
    width: calc(var(--w) * 0.6288);
  }
  .entity-desc {
    display: block;
    font-size: 0.75rem; /* the line box is the text's own 12px, as in 2024 */
    line-height: 1;
  }
  .entity-kind {
    color: #979797;
    font-size: 0.75rem;
    letter-spacing: 0.9px;
  }
  .entity-sig {
    display: none;
  }
}

/* ---------- Project wall ----------
   The wall only exists from 1024px wide. Under that, the page is the agency list alone,
   and the script loads nothing for the wall. */

.wall,
.wall-cta {
  display: none;
}

@media (min-width: 768px) {
  .family {
    max-width: var(--wall-left);
    padding-right: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .wall {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--wall-span);
    padding: 0;
    overflow: hidden;
    cursor: none;
    transition: opacity 0.25s ease;
  }
  .wall.is-switching {
    opacity: 0;
  }

  .wall-cols {
    display: flex;
    gap: var(--col-gap);
    height: 100%;
  }
  .wall-col {
    flex: 0 0 var(--col);
    min-width: 0; /* long project titles must not widen the column */
  }
  .wall-track {
    display: flex;
    flex-direction: column;
    min-width: 0;
    will-change: transform;
  }

  .wall-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 34vh;
    pointer-events: none;
  }
  .wall-fade--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(226, 226, 226, 0.75), rgba(226, 226, 226, 0) 75%);
  }
  .wall-fade--bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(226, 226, 226, 0.75), rgba(226, 226, 226, 0) 75%);
  }

  /* The veil: with an agency selected, the wall blurs while the mouse is over it (Figma
     frame 436), and the veil is the link the click follows. On the mixed wall it stays
     invisible and takes no pointer, so the mouse reaches the cards. It is also the keyboard
     link of the wall. The blur sits on a fixed pseudo-element that hangs 70px out of the wall
     to the left, past the wall's overflow, so the blur's left edge is soft. The fade is on the
     pseudo-element too: a backdrop-filter under a parent whose opacity is below 1 loses its
     backdrop. */
  .wall-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    cursor: none;
  }
  .wall-veil::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(var(--wall-left) - 70px);
    background: rgba(226, 226, 226, 0.1);
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .wall.is-veiled .wall-veil {
    pointer-events: auto;
  }
  .wall.is-veiled .wall-veil::before {
    opacity: 1;
  }
  .wall-veil:focus-visible {
    outline-offset: -4px;
    border-radius: 0;
  }

  /* The pill replaces the cursor over the wall. It is fixed to the window, outside the wall
     and above the rail, so it is never cut: it may hang over the page grey on the left and
     pass in front of the rail on the right. The script moves it with the pointer, or to the
     middle of the wall when the wall is reached by keyboard. */
  .wall-cta {
    display: inline-flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
  }
  .wall-cta.is-shown {
    opacity: 1;
  }
}

/* Between tablet and laptop the descriptions need room: logos shrink so the wall keeps its
   columns. Under 1366px they are at 80% (full size would cost the columns 26px at 1300px),
   under 1200px at 66% without the signature line. */
@media (min-width: 768px) and (max-width: 1365.98px) {
  :root {
    --logo-scale: 0.8;
    --desc-text: 198px; /* "Inspiring photographers" at 20px */
  }
  .entity-sig {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --logo-scale: 0.66;
    --desc-text: 180px; /* "Photography agency", the signature is hidden */
  }
  .entity-sig {
    display: none;
  }
  .entity-desc::before {
    top: 50%;
  }
}

/* Short laptop screens: the list tightens so the whole family stays in view. */
@media (min-width: 768px) and (max-height: 760px) {
  :root {
    --logo-scale: 0.75;
  }
  .family {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .from {
    margin-top: 18px;
  }
  .head-actions {
    margin-top: 24px;
  }
  .entities li:nth-child(n) a {
    padding: 8px 0;
  }
  .entities li:nth-child(n):last-child a {
    padding-bottom: 0;
  }
}

/* ---------- Project card ---------- */

.card {
  display: block;
  margin-bottom: 18px;
}

.card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / var(--ratio, 1.25);
}

/* The frame holds the image, its loading colour, the rounded corners and the badge.
   The notch is a real cut in the bottom-left corner, made with a mask. The mask is one
   SVG image sized to the frame: a full rectangle minus the "Subtract" vector of the Figma
   card (62 x 60), anchored to the bottom-left corner by a nested <svg y="100%">. One layer
   on purpose: two layers combined with mask-composite are anti-aliased differently on the
   fractional bottom edge of the card and let a thin line of image through under the notch.
   The avatar sits outside the frame, in .card-media, so the mask never touches it. */
.card-frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--card-color, #d0d0d0);
  isolation: isolate;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='n'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Csvg y='100%25' overflow='visible'%3E%3Cpath transform='translate(0 -60)' d='M0 0V60H62C52.023 60 45.6092 52.2875 45.6092 43.5232C45.6092 25.4339 35.1333 15.7581 16.0345 15.7581C7.8231 15.7581 0.0099993 9.10583 0 0Z'/%3E%3C/svg%3E%3C/mask%3E%3Crect width='100%25' height='100%25' mask='url(%23n)'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='n'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Csvg y='100%25' overflow='visible'%3E%3Cpath transform='translate(0 -60)' d='M0 0V60H62C52.023 60 45.6092 52.2875 45.6092 43.5232C45.6092 25.4339 35.1333 15.7581 16.0345 15.7581C7.8231 15.7581 0.0099993 9.10583 0 0Z'/%3E%3C/svg%3E%3C/mask%3E%3Crect width='100%25' height='100%25' mask='url(%23n)'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100%;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #cfcfcf;
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: block;
  height: 20px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--badge);
}
/* In the badge every wordmark is scaled from its full-scale width (--w, from the list), so
   the "senso" letters are the same size in all six, 6px high, and their middle sits at the
   middle of the 20px badge: --lm is where the letters' middle is in each full-scale wordmark
   (measured on the rendered SVGs on 2026-09-23). Cédric asked for equal letters. */
.card-badge img {
  --badge-scale: 0.186; /* 6 / 32.25, the letters' x-height at full scale */
  display: block;
  width: calc(var(--w) * var(--badge-scale));
  height: auto;
  margin-top: calc(10px - var(--lm) * var(--badge-scale));
  filter: invert(1);
}
.card-badge img[data-entity="creasenso"] {
  --lm: 16.63px;
}
.card-badge img[data-entity="sensoart"] {
  --lm: 22.38px;
}
.card-badge img[data-entity="sensophoto"] {
  --lm: 25.75px;
}
.card-badge img[data-entity="sensofilms"] {
  --lm: 25.75px;
}
.card-badge img[data-entity="sensoai"] {
  --lm: 28.88px;
}
.card-badge img[data-entity="sensology"] {
  --lm: 27.38px;
}

.card-talent {
  display: block;
  margin-top: 9px;
  overflow: hidden;
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-title {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--label, var(--ink-soft));
  font-size: 0.75rem;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Rail ---------- */

.rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: var(--rail);
  background: #fff;
}
.rail-logo {
  display: block;
  margin: 1.4rem auto 0;
}
@media (max-width: 991.98px) {
  .rail-logo {
    transform: scale(0.5) translateY(10px);
    transform-origin: top center;
    margin-top: 0.6rem;
  }
}