/* ==========================================================================
   Entropolis
   ========================================================================== */

/* Police
   ========================================================================== */
@font-face {
    font-family: "FlorDeRuina";
    src: url("/typ/FlorDeRuina-Flor.woff2") format("woff2"),
         url("typ/FlorDeRuina-Flor.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FlorDeRuina";
    src: url("/typ/FlorDeRuina-Semilla.woff2") format("woff2"),
         url("typ/FlorDeRuina-Semilla.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Variables
   ========================================================================== */
:root {
    --paper: rgb(241, 241, 226);
    --ink: #000;
    --display: "FlorDeRuina", sans-serif;
    --text: "FlorDeRuina", sans-serif;
    --gutter: clamp(1rem, 5vw, 2rem);
    --content-width: min(60vw, 60em);
    --title-offset: 1em;
    --stroke: 0.5px;
}

/* Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--ink);
    font-family: var(--text);
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1.3;

    /* Degrade noir -> papier -> noir, sur toute la largeur de l'ecran.
       Les points de transition suivent --content-width, donc les bandes
       noires restent visibles meme quand le bloc central se retrecit
       sur petit ecran. */
    background: linear-gradient(
        to right,
        var(--ink) 0%,
        var(--paper) calc(50% - var(--content-width) / 2),
        var(--paper) calc(50% + var(--content-width) / 2),
        var(--ink) 100%
    );
}

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Bloc central
   ========================================================================== */
.cadre {
    width: var(--content-width);
    margin: 0 auto;
    flex: 1;
    background: var(--paper);
}

/* Titre
   ========================================================================== */
main {
    padding: 1em var(--gutter) 3em;
}

h1 {
    margin: var(--title-offset, 0) 0 2em;
    font-family: var(--display);
    font-weight: bold;
    text-align: center;
    font-size: clamp(1rem, 10vw, 10rem);
    line-height: 1;
    letter-spacing: 0.15em;
    overflow-wrap: break-word;
}

/* Infos
   ========================================================================== */

/* La bulle "info" (point visible) */
.station.info {
    --x: 6em;
    --y: -9em;
    --w: 2em;

    position: absolute;
    left: var(--x, 0em);
    top: var(--y, 0em);
    z-index: 2;
    display: block;
    overflow: visible; /* laisse sortir la bulle */

    width: var(--w, 2em);
    height: var(--w, 2em);

    cursor: default;
}

/* Cercle qui rogne l’image */
.info__circle {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: var(--stroke) solid var(--ink);
    background: var(--paper);
    overflow: hidden; /* l’image est rognée au cercle */
}

.info__circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    pointer-events: none;
}

/* Contenu caché par défaut */
.station.info .info__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #fff;
    border: 1px solid var(--ink);
    border-radius: 100px;
    padding: 0.6em 1em;
    min-width: 16em;
    max-width: 20em;
    text-align: center;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.1;
    white-space: normal;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Liens dans la bulle */
.station.info .info__content a {
    display: inline-block;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    margin: 0.25em 0;
    cursor: pointer;
}

/* Apparition au clic de la bulle */
.station.info.is-open .info__content {
    opacity: 1;
    visibility: visible;
}



/* Itineraire
   ==========================================================================
   .composition est la zone de travail : origine (0, 0) en haut a gauche.
   Toutes les mesures sont en em, donc proportionnelles a la largeur du
   bloc central, sauf l'epaisseur des lignes (1px par defaut).

   Pour ajouter une station ou une ligne : dupliquez sa ligne dans le HTML,
   changez le numero de classe (station3, ligne2...), puis ajoutez une regle
   dans la section Positions ci-dessous. */

.composition {
    position: relative;
    width: 100%;
    height: 40em; /* hauteur de la zone : a ajuster */
    margin: 2em 0 0;
    font-size: calc(var(--content-width) / 30);
}

/* Forme commune : les cartouches (chaque cartouche est un lien) */
.station {
    position: absolute;
    left: var(--x, 0em);
    top: var(--y, 0em);
    z-index: 1;
    display: block; /* indispensable : un <a> est inline par defaut et
                        ignore alors width/height */
    overflow: hidden;
    width: var(--w, 5em);
    height: var(--w, 5em); /* meme variable que la largeur : cercle garanti */
    border-radius: 50%;
    border: var(--stroke) solid var(--ink);
    background: var(--paper);
}
.station img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

/* Forme commune : les lignes (chaque ligne est un <svg> contenant une vague)
   (x, y) est le point de depart, au milieu de la vague. w est la longueur,
   amp l'amplitude totale (creux a crete), a l'angle en degres (0deg = vers
   la droite, positif = vers le bas). Le nombre d'ondulations est fixe par
   le trace (2 periodes) : une ligne plus longue etire les vagues plutot que
   d'en ajouter. */
.ligne {
    position: absolute;
    left: var(--x, 0em);
    top: calc(var(--y, 0em) - var(--amp, 1em) / 2);
    z-index: 0;
    width: var(--w, 10em);
    height: var(--amp, 1em);
    transform: rotate(var(--a, 0deg));
    transform-origin: 0 50%;
    overflow: visible;
}

.ligne path {
    fill: none;
    stroke: var(--ink);
    stroke-width: var(--stroke);
    vector-effect: non-scaling-stroke; /* epaisseur constante, meme si la
                                           vague est etiree */
}

/* Positions
   ========================================================================== */
.station1 { --x: 16em; --y: -5em; --w: 6em; }
.station2 { --x: 5.5em; --y: 12em; --w: 4em; }
.station3 { --x: 18em; --y: 15em; --w: 7em; }
.station4 { --x: 15em; --y: 8em; --w: 5em; }
.station5 { --x: 12em; --y: 19em; --w: 4em; }

/* ligne1 relie le bas de station1 au haut de station2 :
   depart (7.5em, 5em), longueur 15em, angle 36.87deg */
.ligne1   { --x: 7.5em; --y: -7.5em;  --w: 10em; --a: 25deg; --amp: 2em; }
.ligne2   { --x: 17em; --y: 0em;  --w: 15em; --a: 125deg; --amp: 2em; }
.ligne3   { --x: 9.5em; --y: 14em;  --w: 10em; --a: 25deg; --amp: 2em; }
.ligne4   { --x: 20.5em; --y: 15.5em;  --w: 4em; --a: 230deg; --amp: 2em; }
.ligne5   { --x: 16em; --y: 12em;  --w: 10em; --a: 100deg; --amp: 2em; }