/* ==========================================================================
   Accueil — registre terminal / ingénierie
   ==========================================================================
   Tout dérive des tokens de global.css. Aucune valeur en dur ici.
   ========================================================================== */

.home {
    max-width: var(--w-page);
    margin: 0 auto;
    /* Aucun retrait en haut : l'ouverture est une composition centrée qui
       gère elle-même sa hauteur. */
    padding: 0 var(--s-5) var(--s-8);
}

/* Neutralise le padding générique `section { padding: 5rem 10% }` */
.home section { padding: 0; }

/* ==========================================================================
   1. OUVERTURE — une composition centrée, deux taches, rien d'autre
   ==========================================================================
   Les chiffres qui vivaient ici font doublon avec ceux d'À propos, et les
   deux boutons menaient aux pages que les taches ouvrent déjà. Retirés :
   ce qui reste tient en une image.
   ========================================================================== */
.hero {
    min-height: calc(100svh - 5.5rem);   /* la hauteur de l'en-tête */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--border-color);
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    letter-spacing: 0.12em;
    color: var(--accent-forge);
    margin-bottom: var(--s-3);
}

/* « deux » porte la phrase : c'est le mot qui annonce les deux versants
   et les deux taches. Le mono n'étant chargé que jusqu'en 600, la
   graisse 700 a été ajoutée au <link> des polices. */
.hero h1 {
    font-size: clamp(1.65rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: clamp(var(--s-4), 2.6vh, var(--s-6));
    max-width: 24ch;
}

.hero h1 strong { font-weight: 700; }

.hero-lede {
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--text-dim);
    max-width: 56ch;
    margin-top: clamp(var(--s-4), 2.6vh, var(--s-6));
}

/* ==========================================================================
   2. LES DEUX TACHES D'ENCRE
   ========================================================================== */
.encres {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(var(--s-4), 3.5vw, 3.5rem);
    width: 100%;
}

.encre {
    position: relative;
    flex: 0 0 auto;
    /* Dimensions imposées, pas déduites du contenu : avec aspect-ratio
       seul, un texte qui se replie gonflait la hauteur, et le ratio
       recopiait cette hauteur en largeur — la tache doublait de taille. */
    /* 40% de la largeur chacune, comme demandé. Largeur et hauteur sont
       imposées séparément : liées par aspect-ratio, la largeur repartait
       du contenu et les deux taches finissaient de tailles différentes.
       La hauteur est plafonnée par la fenêtre, ce qui donne une tache
       plus large que haute — c'est ce que fait l'encre quand elle
       s'étale, et c'est ce qui permet de tenir les 40% sans rejeter le
       chapô hors de l'écran. */
    width: clamp(200px, 40vw, 620px);
    height: clamp(180px, min(30vw, 45vh), 470px);
    display: grid;
    place-items: center;
    /* Pas de padding en pourcentage : il se résout sur la largeur du
       PARENT, pas de la tache. À 13% cela donnait 150px de retrait pour
       une tache de 300px, soit une zone de contenu de 0,5px — le texte
       se repliait alors sur son mot le plus long. */
    padding: clamp(1.5rem, 4vw, 4rem);
    text-align: center;
    text-decoration: none;
    color: var(--text-bright);
    transition: scale var(--m-slow) var(--ease-out);
}

/* Le fond est un calque à part : la silhouette découpe la peinture, et
   le texte reste net au-dessus quoi qu'il arrive au fond. */
.encre-fond {
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(85.8% 50.0%, 82.6% 54.7%, 80.0% 58.8%, 78.1% 62.9%, 76.2% 66.8%, 73.3% 70.2%, 69.6% 72.7%, 65.9% 74.8%, 62.7% 77.9%, 59.5% 82.5%, 55.4% 87.5%, 50.0% 90.7%, 44.2% 90.6%, 39.0% 87.6%, 34.7% 83.5%, 30.7% 80.0%, 26.3% 77.3%, 21.6% 74.6%, 17.6% 70.8%, 14.7% 66.1%, 12.9% 60.9%, 11.6% 55.5%, 10.8% 50.0%, 11.2% 44.4%, 13.5% 39.3%, 17.5% 35.2%, 22.0% 32.0%, 25.8% 29.1%, 29.0% 25.8%, 32.4% 22.7%, 36.7% 20.8%, 41.4% 20.8%, 45.9% 21.7%, 50.0% 21.7%, 54.4% 19.5%, 60.0% 15.9%, 66.8% 13.2%, 73.7% 13.1%, 79.5% 16.0%, 83.6% 20.9%, 86.6% 26.5%, 88.6% 32.3%, 89.4% 38.4%, 88.4% 44.5%);
    transition: transform 620ms var(--ease-out),
                filter var(--m-slow) var(--ease);
}

/* La silhouette est un polygone de 24 sommets en pourcentages :
   proportionnel comme un border-radius, mais sans sa limite à quatre
   lobes — c'est elle qui faisait lire les taches comme des ovales. Les
   rayons viennent d'une somme d'harmoniques de phases tirées au sort :
   la courbe est irrégulière mais reste continue et fermée, là où un
   tirage sommet par sommet donnerait une étoile.
   Toutes les étapes ont le même nombre de sommets, faute de quoi le
   navigateur ne sait pas interpoler et la forme saute. */
@keyframes encre-derive-a {
    0%, 100% { clip-path: polygon(85.8% 50.0%, 82.6% 54.7%, 80.0% 58.8%, 78.1% 62.9%, 76.2% 66.8%, 73.3% 70.2%, 69.6% 72.7%, 65.9% 74.8%, 62.7% 77.9%, 59.5% 82.5%, 55.4% 87.5%, 50.0% 90.7%, 44.2% 90.6%, 39.0% 87.6%, 34.7% 83.5%, 30.7% 80.0%, 26.3% 77.3%, 21.6% 74.6%, 17.6% 70.8%, 14.7% 66.1%, 12.9% 60.9%, 11.6% 55.5%, 10.8% 50.0%, 11.2% 44.4%, 13.5% 39.3%, 17.5% 35.2%, 22.0% 32.0%, 25.8% 29.1%, 29.0% 25.8%, 32.4% 22.7%, 36.7% 20.8%, 41.4% 20.8%, 45.9% 21.7%, 50.0% 21.7%, 54.4% 19.5%, 60.0% 15.9%, 66.8% 13.2%, 73.7% 13.1%, 79.5% 16.0%, 83.6% 20.9%, 86.6% 26.5%, 88.6% 32.3%, 89.4% 38.4%, 88.4% 44.5%); }
    25%      { clip-path: polygon(79.9% 50.0%, 80.0% 54.3%, 79.2% 58.6%, 77.9% 62.7%, 76.8% 67.2%, 75.7% 72.3%, 73.9% 77.5%, 70.7% 82.2%, 66.3% 85.6%, 61.2% 88.2%, 55.8% 90.2%, 50.0% 91.5%, 44.1% 91.1%, 38.8% 88.1%, 34.9% 83.1%, 32.1% 77.9%, 29.3% 73.9%, 25.2% 71.5%, 20.1% 69.2%, 15.3% 65.8%, 12.6% 61.0%, 12.5% 55.4%, 14.0% 50.0%, 15.8% 45.1%, 17.3% 40.4%, 19.1% 35.9%, 21.8% 31.9%, 25.3% 28.6%, 29.1% 25.8%, 32.6% 22.9%, 36.1% 19.6%, 40.2% 16.5%, 44.9% 14.5%, 50.0% 13.5%, 55.3% 12.8%, 61.2% 11.8%, 67.8% 11.0%, 74.6% 11.8%, 79.9% 15.5%, 82.3% 22.0%, 82.0% 29.5%, 80.3% 36.2%, 79.1% 41.4%, 79.3% 45.8%); }
    50%      { clip-path: polygon(85.5% 50.0%, 85.5% 55.1%, 85.1% 60.3%, 84.8% 65.9%, 84.0% 71.8%, 81.7% 77.5%, 77.8% 82.1%, 72.9% 85.7%, 67.6% 88.5%, 61.9% 90.5%, 55.9% 90.9%, 50.0% 88.6%, 45.2% 83.5%, 42.0% 77.2%, 39.8% 72.4%, 37.1% 70.1%, 32.8% 69.9%, 27.4% 69.6%, 22.3% 67.8%, 18.5% 64.4%, 15.9% 60.0%, 13.5% 55.2%, 10.8% 50.0%, 8.7% 44.1%, 8.3% 37.8%, 10.4% 31.9%, 14.2% 27.0%, 19.0% 23.1%, 24.0% 20.0%, 29.3% 17.8%, 35.0% 17.2%, 40.6% 18.0%, 45.6% 19.2%, 50.0% 19.2%, 54.6% 17.7%, 60.0% 15.9%, 65.6% 15.8%, 70.1% 18.7%, 72.7% 23.8%, 74.0% 29.2%, 75.6% 33.6%, 78.2% 37.1%, 81.6% 40.7%, 84.3% 45.1%); }
    75%      { clip-path: polygon(84.2% 50.0%, 81.2% 54.5%, 78.4% 58.4%, 76.7% 62.2%, 75.5% 66.4%, 73.9% 70.7%, 71.0% 74.3%, 67.3% 76.9%, 63.3% 79.1%, 59.5% 82.3%, 55.3% 86.6%, 50.0% 90.6%, 43.9% 92.4%, 38.1% 90.7%, 33.5% 86.2%, 30.1% 81.0%, 27.1% 76.5%, 23.5% 73.0%, 19.6% 69.5%, 16.1% 65.5%, 13.8% 60.6%, 12.5% 55.4%, 11.9% 50.0%, 12.1% 44.6%, 13.8% 39.4%, 17.2% 35.0%, 21.7% 31.8%, 26.2% 29.4%, 29.8% 26.6%, 32.8% 23.3%, 36.3% 20.0%, 40.6% 18.1%, 45.4% 18.1%, 50.0% 19.0%, 54.5% 18.9%, 59.6% 17.2%, 66.1% 14.7%, 73.4% 13.6%, 80.0% 15.3%, 84.7% 19.9%, 87.2% 26.1%, 88.0% 32.6%, 87.8% 38.9%, 86.6% 44.7%); }
}

@keyframes encre-derive-b {
    0%, 100% { clip-path: polygon(92.5% 50.0%, 92.3% 56.1%, 89.8% 61.7%, 85.7% 66.3%, 80.9% 69.9%, 76.4% 72.9%, 71.9% 75.3%, 67.1% 76.6%, 62.0% 76.4%, 57.4% 75.4%, 53.6% 75.3%, 50.0% 77.4%, 45.5% 81.3%, 39.8% 84.8%, 33.6% 85.9%, 28.1% 84.1%, 23.8% 80.3%, 20.0% 76.0%, 16.2% 71.7%, 12.5% 67.1%, 10.1% 61.7%, 9.8% 55.8%, 11.3% 50.0%, 13.6% 44.8%, 15.7% 39.9%, 17.8% 35.3%, 20.7% 31.2%, 24.4% 27.9%, 28.6% 25.3%, 32.5% 22.7%, 36.1% 19.5%, 40.0% 16.1%, 44.8% 14.0%, 50.0% 14.6%, 54.7% 17.5%, 58.6% 20.8%, 62.4% 22.8%, 67.2% 23.2%, 73.1% 23.4%, 78.9% 25.0%, 83.5% 28.5%, 86.7% 33.3%, 89.0% 38.6%, 91.1% 44.1%); }
    25%      { clip-path: polygon(77.2% 50.0%, 75.3% 53.6%, 75.4% 57.5%, 77.2% 62.4%, 79.0% 68.7%, 79.0% 75.2%, 76.5% 80.6%, 72.2% 84.5%, 66.9% 87.0%, 61.3% 88.5%, 55.6% 89.2%, 50.0% 88.7%, 44.7% 87.0%, 39.8% 84.8%, 35.0% 82.8%, 30.2% 80.9%, 25.4% 78.4%, 21.6% 74.6%, 19.2% 69.8%, 18.1% 64.6%, 17.1% 59.7%, 15.5% 55.0%, 13.7% 50.0%, 13.3% 44.7%, 15.3% 39.8%, 19.7% 36.1%, 24.6% 33.7%, 28.7% 31.5%, 31.3% 28.4%, 33.4% 24.1%, 36.0% 19.3%, 39.7% 14.8%, 44.4% 11.0%, 50.0% 8.2%, 56.2% 6.6%, 62.7% 6.7%, 68.6% 9.4%, 73.1% 14.1%, 76.1% 19.9%, 78.2% 25.6%, 80.0% 30.7%, 81.4% 35.6%, 81.5% 40.7%, 79.9% 45.7%); }
    50%      { clip-path: polygon(79.8% 50.0%, 80.4% 54.4%, 81.4% 59.2%, 81.3% 64.3%, 79.6% 69.0%, 76.6% 73.0%, 73.0% 76.5%, 69.1% 79.7%, 64.8% 82.4%, 60.0% 84.2%, 55.1% 85.2%, 50.0% 86.3%, 44.5% 88.2%, 38.2% 90.3%, 31.3% 91.0%, 25.1% 88.7%, 21.2% 83.3%, 19.7% 76.2%, 19.8% 69.4%, 19.6% 63.9%, 18.8% 59.2%, 18.1% 54.6%, 18.7% 50.0%, 21.0% 45.8%, 23.7% 42.3%, 25.8% 38.9%, 26.6% 35.0%, 27.0% 30.1%, 28.0% 24.7%, 30.2% 19.2%, 33.5% 13.8%, 37.9% 8.9%, 43.5% 4.9%, 50.0% 3.4%, 56.5% 5.1%, 61.8% 9.8%, 65.7% 15.6%, 68.9% 20.5%, 72.6% 24.0%, 76.7% 26.9%, 80.3% 30.5%, 82.0% 35.4%, 81.6% 40.7%, 80.4% 45.6%); }
    75%      { clip-path: polygon(78.6% 50.0%, 77.3% 53.9%, 77.5% 58.1%, 78.1% 62.8%, 77.8% 67.8%, 76.0% 72.5%, 73.3% 76.9%, 69.9% 81.0%, 65.8% 84.7%, 60.9% 87.0%, 55.3% 87.2%, 50.0% 85.8%, 45.0% 84.6%, 39.8% 84.8%, 33.6% 86.0%, 26.7% 86.3%, 20.7% 83.8%, 17.2% 78.4%, 16.3% 71.6%, 16.6% 65.3%, 16.3% 59.9%, 15.4% 55.0%, 15.1% 50.0%, 16.7% 45.2%, 20.1% 41.2%, 24.1% 38.2%, 27.3% 35.4%, 29.5% 32.2%, 31.4% 28.5%, 33.7% 24.6%, 36.6% 20.6%, 40.0% 15.9%, 44.3% 10.5%, 50.0% 5.3%, 56.8% 2.6%, 63.5% 4.0%, 68.7% 9.0%, 72.1% 15.6%, 74.7% 21.5%, 77.7% 26.0%, 81.1% 30.0%, 83.5% 34.7%, 83.4% 40.2%, 81.3% 45.5%); }
}

/* La tache dérive lentement. translate et scale étant des propriétés
   distinctes de transform, cette dérive et l'agrandissement au survol
   cohabitent sans s'écraser l'une l'autre. */
@keyframes flotte-a {
    0%, 100% { translate:   0    0; }
    25%      { translate:  7px -13px; }
    50%      { translate: -5px -19px; }
    75%      { translate: -9px  -7px; }
}

@keyframes flotte-b {
    0%, 100% { translate:   0  -15px; }
    25%      { translate: -8px  -4px; }
    50%      { translate:  6px   7px; }
    75%      { translate: 10px -10px; }
}

.est-code  { animation: flotte-a  9s ease-in-out infinite; }
.est-recit { animation: flotte-b 11s ease-in-out infinite -3s; }

/* Le décor tourne, très lentement : c'est ce qui fait qu'une tache
   immobile semble malgré tout respirer. rotate est une propriété à part
   entière, distincte de transform, donc cette rotation continue et le
   pivot du survol se composent au lieu de s'annuler. */
@keyframes tourne-avant   { to { rotate:  360deg; } }
@keyframes tourne-arriere { to { rotate: -360deg; } }

/* Deux rythmes différents : synchrones, les deux taches feraient un
   motif, et le motif tue l'effet d'encre. */
.est-code .encre-fond {
    animation: encre-derive-a 13s ease-in-out infinite,
               tourne-avant 71s linear infinite;
}

.est-recit .encre-fond {
    animation: encre-derive-b 17s ease-in-out infinite -6s,
               tourne-arriere 89s linear infinite;
}

.encre-texte {
    position: relative;
    display: block;
    /* Le fond est un dégradé : sans cette ombre le texte s'y dissout. */
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
    transition: transform var(--m-slow) var(--ease-out);
}

.encre-oeil {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    margin-bottom: var(--s-2);
    white-space: nowrap;
}

.encre-phrase {
    display: block;
    font-size: clamp(0.9rem, 1.3vw, 1.32rem);
    font-weight: 600;
    line-height: 1.35;
}

/* Les éclaboussures : deux gouttes détachées, qui dérivent aussi. */
.goutte {
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 620ms var(--ease-out), opacity var(--m-slow) var(--ease);
}

.goutte-a {
    width: 3.2%; aspect-ratio: 1;
    top: 1%; right: 11%;
}

.goutte-b {
    width: 2%; aspect-ratio: 1;
    bottom: 7%; left: 5%;
}

/* --- Le survol : l'encre s'étale, le décor pivote ------------------------
   Faire tourner le fond fait tourner sa peinture avec lui : le
   quadrillage s'incline, le trou noir pivote. C'est le décor de la page
   qui bouge, pas seulement une case qui change de couleur. */
.encre:hover { scale: 1.045; }

.encre:hover .encre-fond {
    transform: scale(1.07) rotate(7deg);
}

.encre:hover .encre-texte { transform: scale(1.04); }
.encre:hover .goutte-a { transform: translate(10px, -10px); opacity: 0.8; }
.encre:hover .goutte-b { transform: translate(-9px, 9px);  opacity: 0.8; }

/* --- Tache Projets : le quadrillage du registre terminal --- */
.est-code { font-family: var(--font-mono); }

.est-code .encre-fond {
    background: #050505;
    background-image:
        radial-gradient(circle at 30% 72%, rgba(0, 209, 255, 0.22) 0%, transparent 60%),
        linear-gradient(rgba(0, 209, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 209, 255, 0.12) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px, 26px 26px;
    /* drop-shadow et non box-shadow : clip-path rogne l'ombre d'une boîte,
       alors qu'un filtre épouse la silhouette découpée. */
    filter: drop-shadow(0 0 24px rgba(0, 209, 255, 0.18));
}

.est-code:hover .encre-fond {
    filter: drop-shadow(0 0 42px rgba(0, 209, 255, 0.36))
            brightness(1.18) saturate(1.1);
}
.est-code .encre-oeil { color: var(--accent-forge); }
.est-code .goutte { background: var(--accent-forge); }

/* --- Tache Livres : le disque d'accrétion de l'Archive --- */
.est-recit { font-family: var(--font-serif); }

.est-recit .encre-fond {
    /* La lueur d'une lampe de lecture sur le bois sombre, et la chaleur
       qui retombe dans l'angle opposé. Le foyer est décalé en haut à
       gauche : au centre, il passait sous le texte et le brouillait. */
    background:
        radial-gradient(circle at 27% 17%, rgba(255, 219, 150, 0.42) 0%, transparent 34%),
        radial-gradient(circle at 27% 17%, rgba(214, 150, 70, 0.22) 0%, transparent 58%),
        radial-gradient(circle at 78% 88%, rgba(150, 86, 36, 0.20) 0%, transparent 52%),
        var(--archive-bg);
    filter: drop-shadow(0 0 24px rgba(200, 162, 74, 0.20));
}

.est-recit:hover .encre-fond {
    filter: drop-shadow(0 0 42px rgba(200, 162, 74, 0.38))
            brightness(1.18) saturate(1.1);
}
.est-recit .encre-oeil { color: var(--archive-accent); }
.est-recit .goutte { background: var(--archive-accent); }

/* Au clavier, la couleur seule ne suffit pas à situer le focus. */
.encre:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: var(--r-md);
}

/* Le mouvement est un agrément : il ne conditionne aucun accès. La
   silhouette est figée sur une forme choisie, pas sur zéro.

   Les sélecteurs reprennent la spécificité de ceux qui posent les
   animations (.est-code .encre-fond, etc.) : écrits plus court, ils
   perdaient contre eux et ce bloc ne s'appliquait pas. Le reset général
   de global.css le masquait, mais l'intention doit tenir ici même. */
@media (prefers-reduced-motion: reduce) {
    .est-code .encre-fond,
    .est-recit .encre-fond,
    .encre .goutte {
        animation: none;
        rotate: 0deg;
        clip-path: polygon(85.8% 50.0%, 82.6% 54.7%, 80.0% 58.8%, 78.1% 62.9%, 76.2% 66.8%, 73.3% 70.2%, 69.6% 72.7%, 65.9% 74.8%, 62.7% 77.9%, 59.5% 82.5%, 55.4% 87.5%, 50.0% 90.7%, 44.2% 90.6%, 39.0% 87.6%, 34.7% 83.5%, 30.7% 80.0%, 26.3% 77.3%, 21.6% 74.6%, 17.6% 70.8%, 14.7% 66.1%, 12.9% 60.9%, 11.6% 55.5%, 10.8% 50.0%, 11.2% 44.4%, 13.5% 39.3%, 17.5% 35.2%, 22.0% 32.0%, 25.8% 29.1%, 29.0% 25.8%, 32.4% 22.7%, 36.7% 20.8%, 41.4% 20.8%, 45.9% 21.7%, 50.0% 21.7%, 54.4% 19.5%, 60.0% 15.9%, 66.8% 13.2%, 73.7% 13.1%, 79.5% 16.0%, 83.6% 20.9%, 86.6% 26.5%, 88.6% 32.3%, 89.4% 38.4%, 88.4% 44.5%);
    }
    .encre.est-code,
    .encre.est-recit { animation: none; translate: 0 0; }
    .encre, .encre-fond, .encre-texte, .goutte { transition: none; }
    .encre:hover { scale: 1; }
    .encre:hover .encre-fond { transform: none; }
    .encre:hover .encre-texte { transform: none; }
    .encre:hover .goutte-a, .encre:hover .goutte-b { transform: none; }
}

/* Sous 720px les deux taches ne tiennent plus côte à côte sans devenir
   minuscules : elles passent l'une sous l'autre. */
@media (max-width: 720px) {
    .encres { flex-direction: column; gap: var(--s-5); }
    /* Largeur ET hauteur : ne surcharger que la largeur laissait la
       hauteur sur la mesure du bureau, et la tache s'aplatissait en ovale. */
    .encre {
        flex: 0 0 auto;
        width: min(72vw, 290px);
        height: min(72vw, 290px);
    }
    .hero { min-height: 0; padding-top: var(--s-7); }
}

/* ==========================================================================
   2. SECTIONS
   ========================================================================== */
.home-section { margin-top: var(--s-8); }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--border-color);
}

.section-label {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--accent-forge);
}

.section-more {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--text-dim);
    white-space: nowrap;
    transition: color var(--m-fast) var(--ease);
}

.section-more span { display: inline-block; transition: transform var(--m-base) var(--ease-out); }
.section-more:hover { color: var(--accent-forge); }
.section-more:hover span { transform: translateX(3px); }

/* ==========================================================================
   3. LISTE DE PROJETS — le cœur du registre terminal
   ========================================================================== */
.project-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
}

.project-row {
    border-bottom: 1px solid var(--border-color);
}

.project-row a {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto 1.5rem;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-2);
    transition: background var(--m-fast) var(--ease),
                padding-left var(--m-base) var(--ease-out);
}

.project-row a:hover {
    background: var(--surface-1);
    padding-left: var(--s-4);
}

.row-num {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    color: var(--accent-forge);
    font-variant-numeric: tabular-nums;
}

.row-title {
    font-family: var(--font-mono);
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--text-bright);
    letter-spacing: -0.01em;
}

.row-tags {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: right;
}

.row-arrow {
    font-family: var(--font-mono);
    color: var(--text-dim);
    transition: transform var(--m-base) var(--ease-out),
                color var(--m-fast) var(--ease);
}

.project-row a:hover .row-arrow {
    transform: translateX(4px);
    color: var(--accent-forge);
}

/* Squelette pendant le chargement : la page ne saute pas quand les
   données arrivent. */
.project-row.is-skeleton {
    height: 4.9rem;
    background: linear-gradient(90deg,
        var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ==========================================================================
   4. RÉCIT MIS EN AVANT — passerelle vers le registre Archive
   ========================================================================== */
.book-teaser a {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--s-6);
    align-items: center;
    padding: var(--s-5);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    transition: border-color var(--m-base) var(--ease),
                transform var(--m-base) var(--ease-out);
}

.book-teaser a:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.book-teaser img {
    width: 100%;
    border-radius: var(--r-md);
    display: block;
    box-shadow: 0 12px 32px var(--shadow);
}

.book-status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: var(--s-2);
}

/* Le titre du récit bascule en serif : c'est le registre de l'autre monde. */
.book-teaser h3 {
    font-family: var(--font-serif);
    font-size: var(--t-xl);
    font-weight: 600;
    margin-bottom: var(--s-3);
    letter-spacing: -0.02em;
}

.book-teaser p {
    color: var(--text-dim);
    font-size: var(--t-sm);
    line-height: 1.7;
    max-width: 52ch;
}

.book-meta {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--text-dim);
    margin-top: var(--s-3);
}

/* La cascade d'entrée [data-reveal] vit dans global.css : toutes les pages
   l'utilisent. Seule l'exception propre à l'accueil reste ici. */
@media (prefers-reduced-motion: reduce) {
    .project-row.is-skeleton { animation: none; }
}

/* ==========================================================================
   6. TÉLÉPHONE
   ========================================================================== */
@media (max-width: 760px) {
    .home { padding: var(--s-7) var(--s-4) var(--s-7); }

    .hero h1 { max-width: none; }

    /* La colonne des technos passe sous le titre plutôt que de l'écraser */
    .project-row a {
        grid-template-columns: 2.5rem 1fr 1.25rem;
        gap: var(--s-3);
        row-gap: var(--s-2);
        padding: var(--s-4) var(--s-1);
    }
    .row-tags {
        grid-column: 2 / -1;
        text-align: left;
    }

    .book-teaser a { grid-template-columns: 1fr; gap: var(--s-4); }
    .book-teaser img { max-width: 180px; }
}