/* ============================================================================
   Cosmeek V2 — Contact et pied de page (node 2868:12641)
   Fond marron : un titre, deux cartes (dernière réalisation, contact), puis
   la barre légale séparée par un filet.
   ========================================================================= */

.footer {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: var(--sp-edge) var(--gutter) var(--sp-24);
  background: var(--c-brown);
  color: var(--c-cream);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

/* ── Titre ─────────────────────────────────────────────────────────────── */
.footer__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  min-block-size: 240px;
}

.footer__title {
  max-inline-size: 800px;
  margin: 0;
  color: var(--c-cream);
}

.footer__title-soft {
  color: var(--c-ink-inv-2);
}

/* ── Cartes ────────────────────────────────────────────────────────────── */
.footer__cards {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-16);
  block-size: 256px;
}

.footer__work {
  --work-disc: 224px;
  --work-ease: cubic-bezier(0.76, 0, 0.18, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  inline-size: 407px;
  padding: var(--sp-16);
  border-radius: var(--r-md);
  background: var(--c-brown-light);
  color: inherit;
  text-decoration: none;
}

.footer__work:focus-visible {
  outline: 1px solid var(--c-cream);
  outline-offset: 3px;
}

/* Le site livré : un rideau plein cadre qui monte depuis le bas de la carte.
   L'image à l'intérieur descend en sens inverse (parallaxe) : elle semble
   se poser plutôt que glisser d'un bloc. */
.footer__work-site {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transform: translateY(101%);
  transition: transform 0.9s var(--work-ease);
  pointer-events: none;
}

.footer__work-site img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  transform: translateY(-34%) scale(1.12);
  transform-origin: 50% 0;
  transition: transform 1.1s var(--work-ease);
}

/* Le disque part vers le haut, plus lentement que le rideau, et s'éteint. */
.footer__work-img {
  position: relative;
  z-index: 0;
  flex: none;
  inline-size: var(--work-disc);
  block-size: var(--work-disc);
  border-radius: 50%;
  object-fit: cover;
  transition:
    transform 0.9s var(--work-ease),
    opacity 0.6s var(--e-inout);
}

.footer__work-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity 0.35s var(--e-inout),
    transform 0.6s var(--e-out),
    filter 0.35s var(--e-inout);
}

.footer__work-label {
  opacity: 0.4;
}

.footer__work-name {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tag);
}

/* Survol et clavier : le texte s'élève et s'efface, le rideau monte, le
   disque recule vers le haut ; au retour, l'ordre s'inverse. */
@media (hover: hover) {
  .footer__work:hover .footer__work-site,
  .footer__work:hover .footer__work-site img {
    transform: none;
  }

  .footer__work:hover .footer__work-img {
    transform: translateY(-22%) scale(0.92);
    opacity: 0;
  }

  .footer__work:hover .footer__work-text {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(6px);
  }
}

.footer__work:focus-visible .footer__work-site,
.footer__work:focus-visible .footer__work-site img {
  transform: none;
}

.footer__work:focus-visible .footer__work-img {
  transform: translateY(-22%) scale(0.92);
  opacity: 0;
}

.footer__work:focus-visible .footer__work-text {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .footer__work-site,
  .footer__work-site img,
  .footer__work-img,
  .footer__work-text {
    transition-duration: 0.3s;
  }

  .footer__work-site {
    transform: none;
    opacity: 0;
    transition-property: opacity;
  }

  .footer__work-site img,
  .footer__work:hover .footer__work-img,
  .footer__work:focus-visible .footer__work-img,
  .footer__work:hover .footer__work-text,
  .footer__work:focus-visible .footer__work-text {
    transform: none;
    filter: none;
  }

  .footer__work:hover .footer__work-site,
  .footer__work:focus-visible .footer__work-site {
    opacity: 1;
  }
}

.footer__contact {
  display: flex;
  gap: var(--sp-8);
  min-inline-size: 0;
}

.footer__photo {
  flex: none;
  inline-size: 256px;
  block-size: 100%;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: 50% 50%;
}

.footer__alex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 400px;
  padding: var(--sp-16);
  border-radius: var(--r-md);
  background: var(--c-orange);
  color: var(--c-cream);
  text-decoration: none;
  transition:
    transform 0.6s var(--e-out),
    background-color 0.4s var(--e-out);
}

.footer__alex-top,
.footer__alex-bottom {
  display: flex;
  justify-content: space-between;
}

.footer__alex-top {
  align-items: flex-start;
}

.footer__alex-bottom {
  align-items: flex-end;
}

/* Signature « CSMK + SIC » : le texte est posé dans l'écusson. */
.footer__sig {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 18.873px;
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.footer__sig-sic {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 45.6px;
  block-size: 23.8px;
}

.footer__sig-sic img,
.footer__sig-sic span {
  grid-area: 1 / 1;
}

.footer__sig-sic span {
  font-size: 18.246px;
  letter-spacing: -0.02em;
}

.footer__dot {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
}

.footer__alex-who {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-12);
}

.footer__avatar {
  position: relative;
  flex: none;
  inline-size: 112px;
  block-size: 112px;
  overflow: hidden;
  border-radius: 4px;
  background: #e6e6e6;
  isolation: isolate;
}

/* Teinte de repli (sans JS ou mouvement réduit) ; le shader la remplace. */
.footer__avatar::after,
.hero-cta__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-orange);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.4s var(--e-out);
}

.footer__avatar.has-shader::after,
.hero-cta__avatar.has-shader::after {
  display: none;
}

.footer__alex:hover .footer__avatar::after,
.footer__alex:focus-visible .footer__avatar::after {
  opacity: 0;
}

.footer__avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--e-spring);
}

/* Léger zoom du portrait au survol, comme sur le CTA de la hero. */
.footer__alex:hover .footer__avatar img,
.footer__alex:focus-visible .footer__avatar img {
  transform: scale(1.1);
  transition-duration: 0.9s;
}

.footer__alex-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-lg);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: 1;
  letter-spacing: -0.02em;
}

.footer__alex-name,
.footer__alex-hint {
  transition: color var(--d-micro) var(--e-inout);
}

.footer__alex-hint {
  color: var(--c-orange-deep);
}

/* Au survol : « Cliquez ici » passe en blanc plein, le nom en blanc estompé. */
.footer__alex:hover .footer__alex-name,
.footer__alex:focus-visible .footer__alex-name {
  color: rgb(255 255 255 / 0.6);
}

.footer__alex:hover .footer__alex-hint,
.footer__alex:focus-visible .footer__alex-hint {
  color: var(--c-white);
}

@media (hover: hover) {
  .footer__alex:not(.is-tilt):hover {
    transform: translateY(-4px);
  }
}

/* Au survol la carte vire à une teinte 10 % plus sombre ; la teinte orange du
   portrait, elle, s'efface (js/cta-shader.js). */
.footer__alex:hover,
.footer__alex:focus-visible,
.footer__alex:active {
  background: color-mix(in srgb, var(--c-orange), black 10%);
}

/* Quand js/tilt.js pilote la transformation, la transition CSS ne doit pas
   s'y opposer : seule la couleur de fond reste animée. */
.footer__alex.is-tilt {
  transition: background-color 0.4s var(--e-out);
  will-change: transform;
}

.footer__alex:focus-visible {
  outline: 1px solid var(--c-cream);
  outline-offset: 3px;
}

/* ── Barre légale ──────────────────────────────────────────────────────── */
/* De gauche à droite : logo, liens légaux, copyright (centré dans l'espace
   restant), LinkedIn, signature SIC. Tout est centré sur l'axe horizontal. */
.footer__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding-block-start: var(--sp-16);
  border-block-start: 1px solid var(--c-border-inv);
}

.footer__logo {
  display: block;
  flex: none;
  inline-size: 164.463px;
  block-size: 32px;
}

.footer__logo img {
  display: block;
  inline-size: 164.463px;
  block-size: 32px;
}

.footer__sic {
  flex: none;
  inline-size: 121px;
  block-size: auto;
  aspect-ratio: 160.635 / 24.5736;
}

.footer__legal {
  flex: none;
  display: flex;
  flex-direction: column;
  /* 4 px : le trait de survol (3 px sous le texte) ne doit pas toucher le lien
     du dessous. */
  gap: 4px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  text-align: start;
  white-space: nowrap;
}

.footer__legal a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

/* Zone cliquable de 24 px (WCAG 2.5.8) sans bouger le texte. Les deux liens sont
   à 13 px l'un de l'autre : la zone du premier déborde vers le haut, celle du
   second vers le bas, pour qu'elles ne se recouvrent pas. Le padding est repris
   par une marge négative. */
.footer__legal li:first-child a {
  padding-block-start: 15px;
  margin-block-start: -15px;
}

.footer__legal li:last-child a {
  padding-block-end: 15px;
  margin-block-end: -15px;
}

.footer__legal li:last-child a::after {
  inset-block-end: 12px;
}

/* Soulignement qui se trace : il entre par la gauche et repart par la droite. */
.footer__legal a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -3px;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--e-out);
}

.footer__legal a:hover::after,
.footer__legal a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .footer__legal a::after {
    transition: none;
  }
}

.footer__copy {
  flex: 1 1 0;
  min-inline-size: 0;
  margin: 0;
  padding: 4px 0;
  text-align: center;
  text-transform: uppercase;
}

.footer__social {
  flex: none;
  display: grid;
  place-items: center;
  /* Zone cliquable de 24 px (WCAG 2.5.8) autour de l'icône de 16 px, reprise
     par une marge négative pour ne pas bouger la mise en page. */
  inline-size: 24px;
  block-size: 24px;
  margin: -4px;
  color: inherit;
  transition:
    opacity 0.3s var(--e-out),
    transform 0.4s var(--e-out);
}

.footer__social img {
  display: block;
}

.footer__social:hover,
.footer__social:focus-visible {
  opacity: 0.65;
  transform: translateY(-2px);
}

.footer__social:focus-visible {
  outline: 1px solid var(--c-cream);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .footer__social {
    transition: opacity 0.3s var(--e-out);
  }

  .footer__social:hover,
  .footer__social:focus-visible {
    transform: none;
  }
}

/* ── Adaptation ────────────────────────────────────────────────────────── */
@media (width < 1100px) {
  .footer__cards {
    flex-direction: column;
    block-size: auto;
  }

  .footer__work {
    inline-size: 100%;
  }

  .footer__contact {
    block-size: 256px;
  }

  .footer__alex {
    flex: 1 1 0;
    inline-size: auto;
  }
}

@media (width < 760px) {
  .footer {
    gap: var(--sp-48);
    padding-block-start: var(--sp-edge);
  }

  .footer__head {
    min-block-size: 0;
  }

  /* Dernière réalisation et photo d'équipe côte à côte ; la carte de contact
     passe dessous, sur toute la largeur. Le conteneur de contact s'efface
     (`display: contents`) pour que la photo rejoigne la grille. */
  .footer__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  .footer__contact {
    display: contents;
  }

  .footer__work {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-12);
    inline-size: auto;
    padding: var(--sp-12);
  }

  .footer__work-img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
  }

  .footer__work-text {
    white-space: normal;
  }

  /* La photo prend la hauteur de la carte voisine, sans la dicter. */
  .footer__photo {
    inline-size: 100%;
    block-size: 0;
    min-block-size: 100%;
    object-position: 40% 50%;
  }

  .footer__alex {
    grid-column: 1 / -1;
  }

  .footer__alex {
    min-block-size: 256px;
  }

  /* Mobile : logo seul, puis liens légaux, copyright, et en bas LinkedIn
     avec la signature SIC. */
  .footer__bar {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--sp-24);
  }

  .footer__logo,
  .footer__legal,
  .footer__copy {
    flex: 1 1 100%;
    inline-size: auto;
    text-align: start;
  }
}