/* ==========================================================================
   RL CodeWorks — feuille de style principale
   Direction artistique : vernaculaire du document technique de bureau
   d'études. Fond papier, réglures fines, données en chasse fixe, cartouche
   de plan en pied de fiche. La seule couleur du site est l'échelle
   thermique, qui encode l'avancement d'un projet.
   ========================================================================== */

/* --- 1. Jetons de conception --------------------------------------------- */
:root {
    /* Palette */
    --papier:        #e6e8e4;   /* fond général, gris-vert de tirage */
    --papier-clair:  #f1f2ef;   /* surfaces surélevées */
    --encre:         #1a211d;   /* texte principal, vert-noir */
    --encre-douce:   #5b645d;   /* texte secondaire */
    --reglure:       #c3c8c1;   /* filets et séparateurs */

    /* Échelle thermique — porte l'information d'avancement */
    --froid:         #2e5c8a;
    --tiede:         #d9a22b;
    --chaud:         #b24a24;

    /* Typographie */
    --titre:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --donnee: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Rythme vertical et gouttières */
    --pas: 0.5rem;
    --marge-page: clamp(1.25rem, 5vw, 4.5rem);
    --largeur-max: 68rem;
    --largeur-lecture: 34rem;   /* ≈ 70 caractères */
}

/* --- 2. Réinitialisation ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; }

/* --- 3. Base ------------------------------------------------------------- */
body {
    font-family: var(--titre);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--encre);
    background-color: var(--papier);
    /* Trame millimétrée très discrète, comme un papier de calcul. */
    background-image:
        linear-gradient(rgba(26, 33, 29, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 33, 29, .028) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--chaud); }

:focus-visible {
    outline: 2px solid var(--chaud);
    outline-offset: 3px;
}

.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--marge-page);
}

.lien-evitement {
    position: absolute;
    left: -9999px;
}
.lien-evitement:focus {
    left: var(--marge-page);
    top: var(--pas);
    z-index: 10;
    padding: .5rem .75rem;
    background: var(--encre);
    color: var(--papier);
}

/* --- 4. Typographie ------------------------------------------------------ */
h1, h2, h3 {
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.05rem; }

p { max-width: var(--largeur-lecture); }

.donnee {
    font-family: var(--donnee);
    font-size: .78rem;
    letter-spacing: .01em;
    color: var(--encre-douce);
}

.intro {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.5;
    max-width: 40rem;
    color: var(--encre-douce);
}

/* --- 5. En-tête et navigation -------------------------------------------- */
.entete {
    border-bottom: 1px solid var(--reglure);
    background: rgba(241, 242, 239, .82);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 5;
}

.entete__interieur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas) 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding-block: .9rem;
}

.marque {
    font-family: var(--donnee);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}
.marque span { color: var(--chaud); }

.nav { display: flex; gap: 1.5rem; }
.nav a {
    font-size: .92rem;
    text-decoration: none;
    padding-block: 2px;
    border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--reglure); }
.nav a[aria-current="page"] { border-bottom-color: var(--chaud); }

/* --- 6. Sections --------------------------------------------------------- */
.section { padding-block: clamp(2.5rem, 7vw, 5rem); }
.section + .section { border-top: 1px solid var(--reglure); }

.section__titre {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.section__titre::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--reglure);
}

/* --- 7. Ouverture de la page d'accueil ----------------------------------- */
.ouverture { padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3rem); }
.ouverture h1 { max-width: 18ch; margin-bottom: 1.25rem; }
.ouverture .intro { margin-bottom: 2rem; }

.compteur {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--reglure);
}
.compteur div { display: flex; flex-direction: column; gap: .15rem; }
.compteur b {
    font-family: var(--donnee);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
}

/* --- 8. Registre : liste des projets ------------------------------------- */
.registre { border-top: 1px solid var(--reglure); }

.ligne {
    display: grid;
    grid-template-columns: 2.75rem 7.5rem minmax(0, 1fr) 8rem 9rem;
    gap: 1.5rem;
    align-items: start;
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--reglure);
    text-decoration: none;
    transition: background-color .12s linear;
}
.ligne:hover,
.ligne:focus-visible { background-color: var(--papier-clair); }

.ligne__pictogramme {
    width: 2.75rem;
    height: 2.75rem;
    opacity: .75;
    transition: opacity .12s linear, transform .18s ease;
}
.ligne:hover .ligne__pictogramme,
.ligne:focus-visible .ligne__pictogramme {
    opacity: 1;
    transform: scale(1.08);
}

/* Les cellules sont des <span> dans un <a> : elles doivent passer en bloc. */
.ligne > span, .ligne__titre, .ligne__pitch, .echelle { display: block; }
.ligne__ref { font-family: var(--donnee); font-size: .78rem; color: var(--encre-douce); padding-top: .25rem; }
.ligne__titre { font-size: 1.15rem; font-weight: 500; margin-bottom: .3rem; }
.ligne__pitch { font-size: .92rem; color: var(--encre-douce); max-width: 46ch; }
.ligne__meta { font-family: var(--donnee); font-size: .76rem; color: var(--encre-douce); padding-top: .3rem; }
.ligne__meta .etat { display: inline-flex; }

/* --- 9. Échelle thermique d'avancement ----------------------------------- */
.echelle {
    --taux: 0%;
    margin-top: .55rem;
    height: 3px;
    background: var(--reglure);
    position: relative;
    overflow: hidden;
}
.echelle::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--taux);
    background: linear-gradient(90deg, var(--froid), var(--tiede) 65%, var(--chaud));
}

.etat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--donnee);
    font-size: .74rem;
    color: var(--encre-douce);
}
.etat::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reglure);
}
.etat[data-statut="en-ligne"]::before { background: var(--chaud); }
.etat[data-statut="en-cours"]::before { background: var(--tiede); }
.etat[data-statut="archive"]::before  { background: var(--froid); }
/* En pause : pastille creuse — le projet existe, il n'avance pas. */
.etat[data-statut="en-pause"]::before {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--encre-douce);
}

/* --- 10. Filtres --------------------------------------------------------- */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}
.filtre {
    font-family: var(--donnee);
    font-size: .78rem;
    color: var(--encre-douce);
    background: transparent;
    border: 1px solid var(--reglure);
    padding: .35rem .7rem;
    cursor: pointer;
}
.filtre:hover { border-color: var(--encre-douce); }
.filtre[aria-pressed="true"] {
    color: var(--papier-clair);
    background: var(--encre);
    border-color: var(--encre);
}

.vide {
    padding-block: 3rem;
    color: var(--encre-douce);
}

/* --- 11. Fiche projet ---------------------------------------------------- */
.fiche__entete { padding-block: clamp(2rem, 6vw, 3.5rem) 2rem; }
.fiche__retour { font-family: var(--donnee); font-size: .78rem; color: var(--encre-douce); }
.fiche__entete-corps { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 1rem; }
.fiche__pictogramme {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    padding: .6rem;
    border: 1px solid var(--reglure);
    background: var(--papier-clair);
}
.fiche__titre { margin: 0 0 .75rem; max-width: 20ch; }

.fiche__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.bloc + .bloc { margin-top: 2rem; }
.bloc h2 {
    font-size: .82rem;
    font-family: var(--donnee);
    font-weight: 500;
    color: var(--encre-douce);
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--reglure);
    max-width: var(--largeur-lecture);
}
.bloc p + p { margin-top: .8rem; }

.pile {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-width: var(--largeur-lecture);
}
.pile li {
    font-family: var(--donnee);
    font-size: .74rem;
    padding: .2rem .5rem;
    border: 1px solid var(--reglure);
    color: var(--encre-douce);
}

.liens-projet { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.bouton {
    display: inline-block;
    font-size: .9rem;
    text-decoration: none;
    padding: .55rem 1.1rem;
    border: 1px solid var(--encre);
}
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton--discret { border-color: var(--reglure); }
.bouton--discret:hover { background: var(--encre-douce); border-color: var(--encre-douce); }

/* --- 12. Cartouche (bas de fiche, à la manière d'un plan) ----------------- */
.cartouche {
    margin-block: 1rem 3.5rem;
    border: 1px solid var(--encre);
    background: var(--papier-clair);
    font-family: var(--donnee);
    font-size: .76rem;
}
.cartouche__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.cartouche__case {
    padding: .7rem .85rem;
    border-right: 1px solid var(--reglure);
    border-bottom: 1px solid var(--reglure);
}
.cartouche__case:last-child { border-right: 0; }
.cartouche__case--large {
    grid-column: 1 / -1;
    border-right: 0;
}
.cartouche__case dt { color: var(--encre-douce); font-size: .68rem; margin-bottom: .2rem; }
.cartouche__case dd { margin: 0; color: var(--encre); }
.cartouche__pied {
    padding: .55rem .85rem;
    color: var(--encre-douce);
    font-size: .7rem;
}

/* --- 13. Contenu éditorial (à propos, mentions) --------------------------- */
.prose { max-width: var(--largeur-lecture); }
.prose p + p,
.prose ul + p,
.prose p + ul { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: .75rem; }
.prose li { padding-left: 1rem; position: relative; }
.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 1px;
    background: var(--chaud);
}
.prose li + li { margin-top: .35rem; }

/* --- 14. Pied de page ---------------------------------------------------- */
.pied {
    border-top: 1px solid var(--reglure);
    padding-block: 2.5rem 3rem;
    font-family: var(--donnee);
    font-size: .76rem;
    color: var(--encre-douce);
}
.pied__interieur {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
}
.pied a { text-decoration: none; border-bottom: 1px solid var(--reglure); }
.pied ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --- 14bis. Effets d'interface -------------------------------------------- */
/* Révélation au défilement : n'existe que si .js-effets est posée en tête de
   document (voir header.php). Sans JavaScript, ces règles ne s'appliquent
   jamais et le contenu reste visible d'emblée. */
html.js-effets .ligne,
html.js-effets .bloc,
html.js-effets .cartouche {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease, background-color .12s linear;
}
html.js-effets .ligne.est-visible,
html.js-effets .bloc.est-visible,
html.js-effets .cartouche.est-visible {
    opacity: 1;
    transform: none;
}

/* Effet d'encre au clic, sur les boutons et les filtres. */
.bouton, .filtre { position: relative; overflow: hidden; }
.tache-encre {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .22;
    transform: scale(0);
    animation: tache-encre-anim .5s ease-out;
    pointer-events: none;
}
@keyframes tache-encre-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* --- 15. Adaptations mobiles --------------------------------------------- */
@media (max-width: 46rem) {
    .ligne {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .ligne__pictogramme { display: none; }
    .ligne__ref { padding-top: 0; }
    .ligne__meta { padding-top: 0; }
    .entete { position: static; }
    .nav { gap: 1.1rem; }
    .fiche__pictogramme { width: 3.25rem; height: 3.25rem; }
}

/* --- 16. Accessibilité --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    body { background: #fff; }
    .entete, .filtres, .liens-projet { display: none; }
}