/* ==========================================================================
   Pied de page - v2
   Rangee de colonnes alignee sur le conteneur centre, puis le mot "Numbers" en
   serif geant qui deborde de sa ligne et se fait rogner par le bas. Ce mot est
   repris du jumeau : c'est la signature graphique du site.
   Le jumeau posait ses liens dans une carte creme collee a droite et calait ses
   hauteurs en vh ; ici tout est en pixels et borne par le conteneur, selon le
   modele (80px de retrait haut, comme ses sections).
   ========================================================================== */

.footer {
  position: relative;
  z-index: 10;
  /* le mot geant deborde largement sa propre ligne : c'est ce rognage qui
     produit la bande de lettres coupees en bas de page */
  overflow: hidden;
  padding-top: 80px;
  /* Aucun retrait en bas : c'est ce qui laisse le mot geant buter contre le
     bord de la section et s'y faire rogner. */
  padding-bottom: 0;
  background-color: var(--cream);
  color: var(--ink);
}

/* Rangee haute : le bloc de marque prend la place de deux colonnes de liens,
   ce qui laisse la meme respiration que la grille de cartes de la page. */
.footer__haut {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
  padding-bottom: 72px;
}

.footer__marque {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 320px;
}

.footer__logo {
  display: block;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.7px;
}

.footer__baseline {
  color: var(--grey-texte);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.footer__col-title {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Les liens portent 8px de retrait haut et bas pour atteindre 44px de cible
   tactile, et l'ecart passe de 6 a 12px pour qu'on ne vise pas le voisin du
   doigt. Ce retrait est du vide : on le reprend en marge negative, si bien que
   la premiere et la derniere ligne de texte restent posees exactement ou elles
   etaient, alignees sur le titre de colonne et sur le bas de la rangee. Seul
   l'ecart entre les lignes s'ouvre, le calage de la rangee ne bouge pas. */
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-block: -8px;
}

/* Le jumeau n'avait aucun etat de survol sur ces liens. On en ajoute un ici,
   tres sobre : sans soulignement ni changement de taille, seule la couleur
   passe du gris a l'encre, sur la meme duree que le reste du site. */
.footer__link {
  /* Largeur minimale : "Blog" ne faisait que 32px de large. */
  min-width: 44px;
  display: block;
  /* 28px de ligne plus 8px de retrait de part et d'autre : la cible fait 44px
     de haut, le minimum tenable au doigt. Ne pas remplacer ce retrait par une
     hauteur fixe, le texte doit pouvoir passer sur deux lignes en petite
     largeur sans que la cible se retrouve rognee. */
  padding-block: 8px;
  color: var(--grey-texte);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 400;
  line-height: 28px;
  text-decoration: none;
  transition: color var(--transition) linear;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--ink-strong);
}

/* Corps calcule sur la fenetre mais plafonne : au-dela d'environ 1430px de
   fenetre le mot cesserait de suivre le conteneur, qui lui est fige a 1220px.
   La ligne de 0.66em est bien plus courte que le corps : le glyphe deborde
   donc sa propre boite en haut comme en bas, et le bas de la section, qui ne
   laisse aucun retrait, en rogne le pied. C'est la signature du jumeau. */
.footer__wordmark {
  display: block;
  width: 100%;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: min(21vw, 300px);
  font-weight: 400;
  line-height: 0.66em;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke-width: 0.5px;
}

/* -------------------------------------------------------------- ruptures */

@media screen and (max-width: 991px) {
  .footer {
    padding-top: 64px;
  }

  /* Le bloc de marque passe sur toute la largeur, les trois colonnes de liens
     se rangent dessous. */
  .footer__haut {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    padding-bottom: 56px;
  }

  .footer__marque {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .footer {
    padding-top: 56px;
  }

  /* Les colonnes s'empilent : l'ecart entre deux blocs doit rester plus grand
     que l'ecart entre deux liens d'un meme bloc (28px de vide une fois les
     retraits de cible comptes), sinon les trois listes se lisent comme une
     seule. D'ou 40px de gouttiere de rangee, et non plus 32. */
  .footer__haut {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-7);
    padding-bottom: 48px;
  }
}

@media screen and (max-width: 479px) {
  /* Meme raison qu'a 767px, en une seule colonne : on garde 40px entre les
     blocs pour que les titres de colonne restent des debuts de groupe. */
  .footer__haut {
    grid-template-columns: 1fr;
    row-gap: var(--sp-7);
    padding-bottom: 40px;
  }

  /* A cette largeur le mot geant depasse la fenetre s'il reste a 21vw : le
     rapport est ramene pour qu'il tienne dans la marge du conteneur. */
  .footer__wordmark {
    font-size: 23vw;
  }
}