/* ---------------------------------------------------------------
   liens.7lee.dev, identite Janus, grille bento.

   Encre klein #0F29AD sur papier creme #EFE7DD. Aucun blanc,
   aucun vert. Les tuiles sont PLUS SOMBRES que le fond : l'encre
   s'enfonce dans le papier, elle ne flotte pas. La creme
   s'applique quel que soit le theme du systeme, donc pas de
   prefers-color-scheme ici, toutes les couleurs sont peintes.

   Grille au gabarit Apple, cinq regles tenues jusqu au bout :
   1. Gouttiere serree et unique, la meme partout. Apple descend
      a 6px, mais 6px ne tiennent que si les cartes tranchent sur
      le fond. Ici deux beiges voisins : 8px et un filet.
   2. Les tuiles remplissent leur case. Jamais align-items:start,
      sinon des trous apparaissent entre les rangees.
   3. Aucune case vide. Six tuiles, trois colonnes, deux rangees
      pleines.
   4. Un filet, et un panneau nettement plus sombre. Apple s'en
      passe parce qu'il pose des cartes BLANCHES sur du gris : le
      contraste dessine le bord tout seul. Ici les deux beiges
      sont voisins, donc sans filet il n'y a plus de carte du
      tout, juste des rectangles fantomes. Le filet est pale, il
      ne fait pas vibrer l'oeil, il rend la tuile lisible dehors.
   5. Aucune tuile ne passe devant les autres. Six liens, six
      tuiles identiques, aucun aplat d'encre. C'est au visiteur
      de choisir, pas a la page.

   Ecrit pour l'iPhone d'abord : la mise en page de base est celle
   d'un telephone tenu a une main. Les grands ecrans sont un ajout.
   --------------------------------------------------------------- */
:root{
  --papier:      #EFE7DD;
  --panneau:     #E5DACD;
  --panneau-2:   #E3DACE;
  --encre:       #0F29AD;
  --encre-pale:  #8C97C9;
  --texte:       #1B2038;
  --texte-doux:  #4A5068;
  --trait:       #D3C8B9;

  --r: 15px;
  --gap: 8px;
  --ombre: 0 1px 8px rgba(15,41,173,.055);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papier);
  color:var(--texte);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Texture, trois couches, tout procedural, aucun fichier --- */
body::before{
  content:""; position:fixed; inset:0;
  pointer-events:none; z-index:0;
  color:var(--encre); opacity:.085;
  background-image:
    radial-gradient(currentColor .62px,transparent .68px),
    radial-gradient(currentColor .45px,transparent .55px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
}
body::after{
  content:""; position:fixed; inset:0;
  pointer-events:none; z-index:5;
  opacity:.22; mix-blend-mode:multiply;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}
.page{ position:relative; z-index:1; }
.page::before{
  content:""; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  /* Assez basse pour que les grandes surfaces ne se salissent
     pas. Sur un telephone, une seule tache de 640px couvre la
     moitie de l'ecran : au dela de .4 elle devient une auréole. */
  opacity:.36; mix-blend-mode:multiply;
  background-size:640px 640px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)' opacity='0.16'/%3E%3C/svg%3E");
}

/* L'encoche et la barre d'accueil de l'iPhone sont prises en
   compte : la page ne passe jamais sous le verre arrondi. */
.wrap{
  position:relative; z-index:1;
  width:100%; max-width:790px;
  margin-inline:auto;
  padding-top:max(18px, env(safe-area-inset-top));
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
}

/* ---------- La grille ----------
   Deux colonnes au telephone, trois au dela. Six liens, donc
   deux rangees pleines dans les deux cas. Aucune case vide. */
.bento{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
}

/* ---------- Une tuile ----------
   Le logo et le nom. Rien d'autre. Pas de pseudo, pas de
   phrase : sur une grille reguliere, chaque mot en plus se
   repete six fois et devient du bruit.

   Un peu moins haute que large. Au telephone la cible fait dans
   les 180 par 145 pixels : on ne la rate pas au pouce, et trois
   rangees tiennent sans faire une page interminable. */
.tuile{
  position:relative;
  display:flex; flex-direction:column;
  /* Logo et nom au centre, l'un sous l'autre. C'est la grille
     d'icones d'un telephone, et c'est la seule disposition qui
     ne laisse pas de vide : colles en haut ils abandonnaient le
     bas, colles en bas ils abandonnaient le haut. */
  align-items:center; justify-content:center;
  gap:10px; text-align:center;
  aspect-ratio:1.25;
  overflow:hidden;
  background:var(--panneau);
  border:1px solid var(--trait);
  border-radius:var(--r);
  box-shadow:var(--ombre);
  padding:15px 14px;
  text-decoration:none;
  color:var(--texte);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .16s ease, transform .13s ease, box-shadow .16s ease;
}

.ico{ display:block; color:var(--encre); transition:color .16s ease; }
.nom{
  font-size:19px; font-weight:800;
  letter-spacing:-.022em; line-height:1.12;
  color:var(--encre);
  transition:color .16s ease;
}

/* Le toucher a son propre retour : la tuile s'enfonce et
   s'encre. C'est ce qui remplace le survol sur telephone. */
a.tuile:active{ background:var(--encre); border-color:var(--encre); transform:scale(.972); box-shadow:none; }
a.tuile:active .nom, a.tuile:active .ico{ color:var(--papier); }

a.tuile:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }

/* Le survol n'existe que la ou il y a un vrai curseur. */
@media (hover:hover) and (pointer:fine){
  a.tuile:hover{ background:var(--encre); border-color:var(--encre); transform:translateY(-3px); box-shadow:0 6px 18px rgba(15,41,173,.16); }
  a.tuile:hover .nom, a.tuile:hover .ico{ color:var(--papier); }
}

/* ---------- La trame dans la carte ----------
   Jusqu'ici la trame serigraphique passait DERRIERE les cartes :
   on ne la voyait que sur le papier autour, et les tuiles
   restaient des aplats lisses. Une carte imprimee porte la trame
   elle aussi. Chaque tuile a donc la sienne, rognee sur ses coins.

   Deux grilles de points de pas different qui se dephasent, la
   meme construction que le fond de page. Le pas est de 3 et 7
   pixels : assez fin pour qu'on lise une matiere et pas des
   points, meme sur un ecran de telephone.

   Quand la tuile s'encre, la trame s'inverse avec elle et passe
   en creme. C'est ce qui evite l'aplat mort au toucher. */
.tuile::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  color:var(--encre); opacity:.085;
  background-image:
    radial-gradient(currentColor .62px,transparent .68px),
    radial-gradient(currentColor .45px,transparent .55px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
  transition:color .16s ease, opacity .16s ease;
}
/* Le contenu passe au dessus de sa propre trame. */
.tuile > *{ position:relative; }

a.tuile:active::before{ color:var(--papier); opacity:.13; }
@media (hover:hover) and (pointer:fine){
  a.tuile:hover::before{ color:var(--papier); opacity:.13; }
}

/* ---------- L'arrivee de la page ----------
   Deux gestes, une seule fois, au chargement.

   1. Les tuiles montent l'une apres l'autre, 45ms d'ecart. Pas
      plus : au dela on attend la page au lieu de la regarder
      apparaitre. La derniere est en place en moins d'une demie
      seconde.
   2. La marque se met en registre. Les deux passages d'encre
      demarrent decales de onze pixels et se recalent a trois.
      C'est le geste de la serigraphie : on aligne la planche
      avant de tirer. C'est le seul endroit de la page ou
      quelque chose bouge tout seul, et il ne le fait qu'une
      fois.

   Tout est en CSS. Aucun script, donc rien a telecharger, rien
   qui bloque l'affichage, et rien qui casse si le visiteur
   coupe le JavaScript. */
@keyframes monte{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:none; }
}
@keyframes reperage{
  from{ opacity:0; transform:translate(-11px,11px); }
  to{   opacity:.17; transform:none; }
}
@keyframes encrage{
  from{ opacity:0; }
  to{   opacity:1; }
}

.bento > *{ animation:monte .52s cubic-bezier(.2,.7,.3,1) backwards; }
.bento > *:nth-child(1){ animation-delay:0s; }
.bento > *:nth-child(2){ animation-delay:.10s; }
.bento > *:nth-child(3){ animation-delay:.145s; }
.bento > *:nth-child(4){ animation-delay:.19s; }
.bento > *:nth-child(5){ animation-delay:.235s; }
.bento > *:nth-child(6){ animation-delay:.28s; }
.bento > *:nth-child(7){ animation-delay:.325s; }
.bento > *:nth-child(8){ animation-delay:.40s; }

.marque{ animation:encrage .45s .12s ease-out backwards; }
.fantome{ animation:reperage .75s .26s cubic-bezier(.2,.7,.3,1) backwards; }

/* ---------- La carte d'identite ----------
   Pas de titre geant. Les tuiles disent deja que ce sont des
   liens. Ce qui doit rester en tete, c'est la marque et le nom. */
.t-identite{
  grid-column:1 / -1;
  aspect-ratio:auto;
  align-items:center; justify-content:center;
  text-align:center;
  /* Le meme beige et le meme filet que les tuiles. Un ton plus
     sombre ici et la carte vire au brun sous la texture : deux
     beiges dans une grille, ca se lit comme une erreur
     d'impression. */
  background:var(--panneau);
  padding:24px 18px 22px;
}

/* Le defaut de reperage serigraphique : deux passages d'encre
   decales, le second presque efface. */
.blason{ position:relative; display:inline-block; line-height:0; }
.marque{ height:62px; width:auto; display:block; position:relative; z-index:1; }
.fantome{ position:absolute; left:-3px; top:3px; opacity:.17; z-index:0; pointer-events:none; }

.nom-marque{
  margin:15px 0 0;
  /* Le nom complet tient sur deux lignes au telephone. La
     coupure est equilibree plutot que subie, et l'interligne est
     serre pour que les deux lignes fassent un bloc. */
  font-size:22px; font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  color:var(--encre);
  max-width:19ch; text-wrap:balance;
}
.surtitre{
  margin-top:7px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--texte-doux);
}
.chapo{
  margin:12px auto 0;
  font-size:14.5px; line-height:1.42;
  color:var(--texte-doux); max-width:29ch;
  text-wrap:balance;
}
.chapo b{ font-weight:600; color:var(--encre); }

/* ---------- Le pied ---------- */
.pied{
  grid-column:1 / -1;
  display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--trait);
  margin-top:10px; padding:15px 4px 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texte-doux);
}
.pied b{ color:var(--encre); font-weight:600; }

/* ---------- Au dela du telephone ----------
   Trois colonnes, deux rangees pleines. La tuile n'est plus
   carree, elle s'aplatit : six carres de 240px de cote feraient
   une page interminable. */
@media (min-width:600px){
  :root{ --r:17px; }
  body{ font-size:17px; }
  .wrap{ padding-top:38px; padding-left:22px; padding-right:22px; }
  .bento{ grid-template-columns:repeat(3,1fr); }
  .tuile{ aspect-ratio:1.35; min-height:0; padding:22px; gap:12px; }
  .nom{ font-size:21px; }
  .t-identite{ padding:34px 26px 30px; }
  .marque{ height:92px; }
  .nom-marque{ font-size:31px; margin-top:20px; max-width:none; }
  .chapo{ font-size:16px; margin-top:16px; }
}

/* Le visiteur qui a demande moins d'animations voit la page
   posee, tout de suite, sans rien qui bouge. */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  a.tuile:hover, a.tuile:active{ transform:none; }
  .bento > *{ opacity:1; transform:none; }
  .marque{ opacity:1; }
  .fantome{ opacity:.17; transform:none; }
}