/* Polices auto-hébergées (SIL Open Font License) — fichiers dans
   extra/custom-assets/ : aucun appel à un service externe depuis le
   navigateur du visiteur.
   Titrage : Michroma (la police du groupe) — graisse unique 400.
   Corps : IBM Plex Mono 500, lisible à 13-14 px. */
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(extra/custom-assets/michroma-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PlexMono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(extra/custom-assets/plexmono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Antiskop — « Sans résolution » (concept W)  ·  v1.0  ·  28/09/2026
   Thème LinkStack (cible 4.8.6) — la page est un émetteur sans récepteur :
   ce qu'elle envoie ne revient jamais. Ancrage : Winter — « ASH / SKIN »
   (produit final) — « I wear your ash like a second skin », « Everything
   transmits. Nothing receives. », « Repeat to fade · no resolution ».
   Signature unique : LA MATIÈRE SE RETIRE, JAMAIS LES MOTS — les fonds, les
   cadres, les filets et les icônes s'effacent lentement, puis tout revient
   d'un coup. Aucun JavaScript, aucune requête vers l'extérieur.
   ========================================================================== */

:root{
  /* --- fond et matière ------------------------------------------------- */
  --salle:      #0b0a09;   /* le fond : le vide dans lequel on émet   */
  --verre:      #191614;   /* la matière d'un champ                   */
  --verre2:     #221d19;   /* la matière, sous le doigt               */
  /* --- écritures ------------------------------------------------------- */
  --os:         #e9e3d7;   /* texte principal      15,48:1 sur le fond */
  --cendre:     #9a9182;   /* texte secondaire      6,36:1 sur le fond */
  --transmission:#a9c1cb;  /* l'accent : ce qui est envoyé  10,53:1    */
  /* --- traits (matière, jamais du texte) -------------------------------- */
  --trait:      #2e2925;

  --pad:        20px;
  --cible:      68px;      /* hauteur d'un champ (cible tactile)      */
  --champ-gauche: 45px;    /* début du nom : 14 + icône 20 + 11       */
  --retrait:    25s;       /* le cycle du retrait, puis le retour sec */
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--salle);
  color:var(--os);
  font-family:'PlexMono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:14px; line-height:1.5;
  overflow-x:hidden;
  padding:26px var(--pad) 46px;
}

.container{ max-width:none; width:100%; margin:0 }
.row{ margin:0 }
.column{ position:relative; z-index:1; margin-top:0 !important; text-align:left }

/* --- le logo : jamais rogné, jamais recoloré -------------------------- */
#avatar{
  display:block; width:72px !important; height:72px !important; max-width:72px;
  object-fit:contain !important; object-position:center;
  background:var(--verre); border:1px solid var(--trait); padding:7px;
  image-rendering:auto;
}

/* --- le titre, suivi de l'état de la page + le curseur ---------------- */
h1{
  font-family:'Michroma', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; font-size:clamp(26px,9vw,40px);
  line-height:1.06; letter-spacing:.01em;
  color:var(--os); margin:18px 0 0; text-shadow:none;
}
h1 .badge{ display:none }
/* la page annonce elle-même qu'elle ne se résoudra pas */
h1::after{
  content:'Repeat to fade · no resolution';
  display:block; margin-top:10px; width:fit-content;
  padding-right:1.15ch;
  font-family:'PlexMono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--transmission);
  /* le curseur : un trait horizontal, collé au dernier mot. Dessiné par un
     dégradé de fond, allumé/éteint par sa LARGEUR — le statut, lui, ne
     clignote jamais. */
  background-image:linear-gradient(var(--transmission), var(--transmission));
  background-repeat:no-repeat;
  background-position:right .02ch bottom .3ch;
  background-size:.82ch 2px;
  animation:asCurseur 1.06s steps(1,end) infinite;
}

/* --- la bio ------------------------------------------------------------ */
.description-parent{ padding:0 !important; margin:0 }
.description-parent p{
  font-size:13px; line-height:1.55; color:var(--cendre);
  max-width:38ch; margin:16px 0 8px; text-align:left;
}

/* --- les couches décoratives de LinkStack : inutilisées ---------------- */
.background-container, .parallax-background{ display:none }

/* --- pied de page ------------------------------------------------------ */
.footer{
  margin:26px 0 0 !important; padding-top:14px;
  border-top:1px solid var(--trait);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cendre); text-align:left;
}
.footer-hover{
  color:var(--cendre); text-decoration:none;
  display:inline-block; min-height:48px; line-height:48px;
}
.footer-hover:hover, .footer-hover:focus-visible{ color:var(--transmission) }

/* --- rangée de réseaux sociaux (LinkStack : div.row.social-icon-div) ---- */
.social-icon-div{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 6px !important; padding:0;
}
.social-hover, .social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:var(--verre); border:1px solid var(--trait); border-radius:0;
  color:var(--cendre); text-decoration:none;
  transition:color .12s linear, border-color .12s linear, background .12s linear;
}
.social-link:hover, .social-link:focus-visible{
  color:var(--transmission); border-color:var(--transmission);
}
.social-icon{ font-size:18px; line-height:1; font-style:normal }

/* --- petits écrans ----------------------------------------------------- */
@media (max-width:400px){
  body{ padding-left:14px; padding-right:14px }
  h1{ font-size:clamp(23px,9.4vw,34px) }
  .description-parent p{ font-size:12.5px }
  .footer{ font-size:10.5px }
}

/* --- mouvement réduit : plus rien ne bouge, tout reste en place -------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important }
}