/* Blocs de code, bouton de copie et coloration syntaxique : PARTAGES entre
   le site (charge ce fichier) et les pages d'accueil des depots (qui
   l'integrent, voir outils/generer_site.py). Variables attendues : --code,
   --bord, --doux, --texte, --accent. */

/* JetBrains Mono (licence SIL OFL, voir polices/), sous-ensemble latin :
   les commandes ne contiennent que de l'ASCII. */
@font-face {
    font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("polices/JetBrainsMono-Regular-latin.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono"; font-weight: 500 700; font-style: normal; font-display: swap;
    src: url("polices/JetBrainsMono-Medium-latin.woff2") format("woff2");
}
:root { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace; }

.code { position: relative; }
.code pre {
    margin: 0; background: var(--code); border: 1px solid var(--bord); border-radius: 10px;
    padding: .85rem 1rem; font-size: .85rem; line-height: 1.6;
}
/* Passage a la ligne plutot que defilement horizontal : une commande longue
   n'elargit jamais la page (le texte copie reste la commande exacte). */
.code code {
    font-family: var(--mono); font-variant-ligatures: none;
    color: #e4e4ea; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Bouton de copie : icone classique (deux feuilles), coche apres copie. */
.copier {
    position: absolute; display: grid; place-items: center; padding: 0; cursor: pointer;
    color: var(--doux); background: transparent; border: 0;
    transition: color .15s, background-color .15s;
}
.copier svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
.copier .i-copie { display: none; }
.copier.copie .i-copier { display: none; }
.copier.copie .i-copie { display: block; }
.copier:hover { color: var(--texte); background: rgba(255, 255, 255, 0.06); }
.copier.copie { color: var(--accent); }
/* Plusieurs lignes : carre de la hauteur d'une ligne, coin superieur droit. */
.code--multi .copier {
    top: .55rem; right: .55rem;
    width: calc(.85rem * 1.6 + .5rem); height: calc(.85rem * 1.6 + .5rem); border-radius: 6px;
}
.code--multi:has(.copier:not([hidden])) pre { padding-right: 3rem; }
/* Une ligne : bande sur toute la hauteur, a droite, separee du texte. */
.code--ligne .copier {
    top: 1px; right: 1px; bottom: 1px; width: 2.75rem;
    border-left: 1px solid var(--bord); border-radius: 0 9px 9px 0;
}
.code--ligne:has(.copier:not([hidden])) pre { padding-right: 3.6rem; }

/* Coloration syntaxique (generee par outils/generer_site.py). */
/* Commandes et options jamais coupees en deux (ex. "--" / "user") ; les URL
   et chemins longs restent secables, sinon ils deborderaient sur mobile. */
.s-cmd, .s-opt, .s-var, .s-op { white-space: nowrap; }
.s-cmd { color: #40c8dc; font-weight: 500; }
.s-opt { color: #f0a830; }
.s-str { color: #a5d6a7; }
.s-url { color: #8ab4f8; }
.s-chemin { color: #c7c9f0; }
.s-var { color: #c792ea; }
.s-op { color: #8b8b98; }
.s-com { color: #6e6e7c; font-style: italic; }
.s-section { color: #f0a830; }
.s-cle { color: #40c8dc; }
.s-valeur { color: #e4e4ea; }