/* roumili.com : une page de texte, sobre, façon ingénieur. Les couleurs et la police viennent de tokens.css (copie de da/tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
p, h1 { margin: 0; }

body {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--fond);
  color: var(--encre);
  font: 400 var(--taille)/var(--interligne) var(--mono);
  -webkit-font-smoothing: antialiased;
}
main { padding: 48px clamp(24px, 13vw, 220px); max-width: 1100px; }
.nom { font-size: inherit; font-weight: 500; }
.vide { height: calc(var(--interligne) * 1em); }
.doux { color: var(--doux); }

/* les projets, avec leurs points de conduite */
.ligne { display: flex; align-items: baseline; gap: 10px; max-width: 560px; }
.ligne .points { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--points); transform: translateY(-4px); }
.ligne .role { color: var(--doux); }

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color .3s; }
a:hover, a:focus-visible { border-color: var(--encre); outline: none; }

/* le logo LinkedIn : petit, gris, devant l'adresse (le curseur reste au bout du texte) */
.contact { display: flex; align-items: center; gap: 0; }
.linkedin { display: inline-flex; margin-right: 14px; border: 0; color: var(--doux); transition: color .3s; }
.linkedin svg { width: 15px; height: 15px; fill: currentColor; }
.linkedin:hover, .linkedin:focus-visible { color: var(--encre); }

/* le curseur : la seule touche de bleu */
.curseur { display: inline-block; width: .6em; height: 1.15em; margin-left: 4px; vertical-align: -3px; background: var(--bleu); animation: clignote 1.1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

.coin { position: fixed; top: 28px; right: 32px; font-size: 12px; color: var(--doux); }

main > * { opacity: 0; animation: apparait .5s ease forwards; }
@keyframes apparait { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { main > * { opacity: 1; animation: none; } .curseur { animation: none; } }

@media (max-width: 600px) {
  body { font-size: 13px; }
  main { padding: 48px 24px; }
  main br { display: none; }
  .coin { display: none; }
}