624 lines
14 KiB
CSS
624 lines
14 KiB
CSS
article {
|
||
.article-content {
|
||
counter-reset: h2;
|
||
}
|
||
}
|
||
|
||
|
||
.article-content,
|
||
article aside {
|
||
a {
|
||
color: var(--link-blue);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
text-decoration-thickness: 1.5px;
|
||
overflow-wrap: break-word;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
color: var(--accent-blue);
|
||
outline: none;
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: 2px solid var(--accent-blue);
|
||
outline-offset: 3px;
|
||
}
|
||
}
|
||
|
||
a.affiliated {
|
||
color: var(--accent-purple-bright);
|
||
/* or: gold */
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a.affiliated:hover,
|
||
a.affiliated:focus {
|
||
color: var(--accent-pink-bright);
|
||
}
|
||
|
||
a.external {
|
||
color: var(--heading-pink);
|
||
/* or: gold */
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a.external:hover,
|
||
a.external:focus {
|
||
color: var(--accent-rose-light);
|
||
}
|
||
|
||
a.active {
|
||
color: var(--text-white) !important;
|
||
}
|
||
|
||
abbr {
|
||
text-decoration: underline dotted;
|
||
cursor: help;
|
||
}
|
||
|
||
address {
|
||
display: block;
|
||
margin: 2em;
|
||
padding: 1em 1.5em;
|
||
border-left: 4px solid var(--accent-blue);
|
||
background-color: var(--bg-white-03);
|
||
font-size: 0.9em;
|
||
color: var(--text-light);
|
||
font-style: normal;
|
||
border-radius: 0.5em;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
audio {
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
margin: 2em auto;
|
||
}
|
||
|
||
blockquote {
|
||
margin: 2em 0;
|
||
padding-left: 1.5em;
|
||
border-left: 4px solid var(--accent-blue);
|
||
color: var(--text-light);
|
||
font-style: italic;
|
||
font-size: 1.1em;
|
||
line-height: 1.6;
|
||
text-align: justify;
|
||
|
||
cite {
|
||
display: block;
|
||
margin-top: 1em;
|
||
font-style: normal;
|
||
font-size: 0.9em;
|
||
color: var(--text-muted2);
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
dl {
|
||
display: grid;
|
||
grid-template-columns: 40% 60%;
|
||
row-gap: 0;
|
||
border: 1px solid var(--border-dark);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin: 2em 0;
|
||
}
|
||
|
||
/* Base commune */
|
||
dt,
|
||
dd {
|
||
padding: 0.6em 1em;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
}
|
||
|
||
/* Colonne de gauche */
|
||
dt {
|
||
font-weight: bold;
|
||
color: var(--text-white);
|
||
border-right: 1px solid var(--border-dark);
|
||
}
|
||
|
||
/* Colonne de droite */
|
||
dd {
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Effet zébré sur les paires dt/dd */
|
||
dl dt:nth-of-type(odd),
|
||
dl dd:nth-of-type(odd) {
|
||
background-color: var(--surface-dark);
|
||
}
|
||
|
||
dl dt:nth-of-type(even),
|
||
dl dd:nth-of-type(even) {
|
||
background-color: var(--surface-overlay);
|
||
}
|
||
|
||
del {
|
||
display: inline;
|
||
text-decoration: line-through;
|
||
color: var(--text-red);
|
||
background-color: var(--bg-red-01);
|
||
padding: 0 0.2em;
|
||
border-radius: 0.2em;
|
||
}
|
||
|
||
details {
|
||
margin: 2em 0;
|
||
border-radius: 0.5em;
|
||
overflow: hidden;
|
||
padding: 1rem;
|
||
|
||
summary {
|
||
cursor: pointer;
|
||
padding: 0.5rem 1rem;
|
||
font-weight: bold;
|
||
user-select: none;
|
||
}
|
||
|
||
&.spoiler {
|
||
border-left: 4px solid var(--border-muted);
|
||
background-color: var(--bg-white-03);
|
||
|
||
summary {
|
||
color: var(--text-muted);
|
||
|
||
&::before {
|
||
content: "⚠️ ";
|
||
margin-right: 0.25em;
|
||
}
|
||
}
|
||
|
||
&[open] summary {
|
||
color: var(--text-white);
|
||
}
|
||
}
|
||
|
||
&.update {
|
||
border-left: 4px solid var(--accent-blue);
|
||
background-color: var(--bg-accent-blue-01);
|
||
|
||
summary {
|
||
color: var(--accent-blue);
|
||
|
||
&::before {
|
||
content: "🛈 ";
|
||
margin-right: 0.25em;
|
||
}
|
||
}
|
||
|
||
&[open] summary {
|
||
color: var(--text-white);
|
||
}
|
||
}
|
||
|
||
&.read-more {
|
||
border: none;
|
||
background: none;
|
||
|
||
summary {
|
||
font-weight: normal;
|
||
color: var(--link-blue);
|
||
text-decoration: underline dotted;
|
||
|
||
&::before {
|
||
content: "➕ ";
|
||
margin-right: 0.25em;
|
||
}
|
||
|
||
&:hover {
|
||
color: var(--accent-blue);
|
||
}
|
||
}
|
||
|
||
summary~p {
|
||
padding-left: 1.25em;
|
||
}
|
||
}
|
||
}
|
||
|
||
dfn {
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
border-bottom: 1px dashed var(--accent-blue);
|
||
cursor: help;
|
||
text-decoration: none;
|
||
}
|
||
|
||
figure {
|
||
font-size: 0.9em;
|
||
display: block;
|
||
margin: 3em auto;
|
||
padding: 1rem;
|
||
border-radius: 1em;
|
||
background: radial-gradient(circle at top left, var(--bg-white-05), var(--overlay-black-70));
|
||
box-shadow:
|
||
inset 0 0 0 1px var(--bg-white-05),
|
||
0 0 10px var(--overlay-black-40);
|
||
backdrop-filter: blur(4px);
|
||
max-width: 100%;
|
||
text-align: center;
|
||
|
||
p {
|
||
text-align: center;
|
||
}
|
||
|
||
img,
|
||
video,
|
||
audio {
|
||
display: block;
|
||
max-width: 100%;
|
||
max-height: 60vh;
|
||
margin: 0 auto;
|
||
border-radius: 0.5em;
|
||
}
|
||
|
||
figcaption {
|
||
color: var(--text-muted);
|
||
margin-top: 0.5em;
|
||
line-height: 1.4;
|
||
font-style: italic;
|
||
padding: 0 1em;
|
||
font-size: 1rem;
|
||
|
||
em {
|
||
color: var(--text-softest);
|
||
}
|
||
}
|
||
}
|
||
|
||
hr {
|
||
all: unset;
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 30em;
|
||
height: 1rem;
|
||
margin: 4em auto;
|
||
position: relative;
|
||
background: radial-gradient(ellipse at center -20px,
|
||
var(--accent-blue-glow),
|
||
var(--transparent) 80%);
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
appearance: none;
|
||
width: 1.1em;
|
||
height: 1.1em;
|
||
margin-right: 0.5em;
|
||
vertical-align: text-bottom;
|
||
/* ⬅ correction ici */
|
||
border: 2px solid var(--border-muted);
|
||
border-radius: 0.2em;
|
||
background-color: var(--transparent);
|
||
position: relative;
|
||
cursor: default;
|
||
|
||
&:checked::after {
|
||
content: "✓";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
/* ⬅ centrage parfait */
|
||
color: var(--accent-blue);
|
||
font-weight: bold;
|
||
font-size: 0.85em;
|
||
/* ⬅ très léger ajustement */
|
||
line-height: 1;
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
ins {
|
||
display: inline;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
color: var(--text-green);
|
||
background-color: var(--bg-green-01);
|
||
padding: 0 0.2em;
|
||
border-radius: 0.2em;
|
||
}
|
||
|
||
kbd {
|
||
display: inline-block;
|
||
padding: 0.2em 0.6em;
|
||
margin: 0 0.1em;
|
||
font-family: inherit;
|
||
font-size: 0.9em;
|
||
line-height: 1.2;
|
||
color: var(--text-muted);
|
||
background-color: var(--bg-dark);
|
||
border-radius: 0.3em;
|
||
box-shadow:
|
||
0 0 6px var(--bg-white-25),
|
||
0 0 12px var(--bg-white-12),
|
||
inset 0 0 1px var(--bg-white-04);
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
pre {
|
||
overflow: scroll;
|
||
padding: 1em 0;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
margin-block: 1em;
|
||
padding-left: 1.5em;
|
||
|
||
li {
|
||
margin-block: 0.3em;
|
||
}
|
||
|
||
li>ul,
|
||
li>ol {
|
||
margin-top: 0.5em;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
/* UL : puce unifiée */
|
||
ul {
|
||
list-style: none;
|
||
padding-left: 1.5em;
|
||
margin-block: 1em;
|
||
|
||
li {
|
||
position: relative;
|
||
margin-block: 0.3em;
|
||
padding-left: 1em;
|
||
text-indent: 0;
|
||
|
||
&::before {
|
||
content: "•";
|
||
color: var(--accent-blue);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0.1em;
|
||
}
|
||
|
||
>ul,
|
||
>ol {
|
||
margin-top: 0.5em;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* OL : numérotation propre et lisible */
|
||
ol {
|
||
list-style: decimal;
|
||
|
||
li::marker {
|
||
color: var(--heading-green);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
p {
|
||
text-align: justify;
|
||
margin-block: .5em;
|
||
}
|
||
|
||
.highlight {
|
||
font-size: .8rem;
|
||
|
||
pre {
|
||
padding: 1rem;
|
||
overflow: auto;
|
||
max-height: 50vh;
|
||
border-radius: .5rem;
|
||
}
|
||
}
|
||
|
||
q {
|
||
quotes: "«\00a0" " »" "“" "”";
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
|
||
&::before {
|
||
content: open-quote;
|
||
}
|
||
|
||
&::after {
|
||
content: close-quote;
|
||
}
|
||
}
|
||
|
||
samp {
|
||
display: inline-block;
|
||
padding: 0.3em 0.6em;
|
||
margin: 0.2em 0.1em;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
line-height: 1.4;
|
||
color: var(--accent-green-bright);
|
||
background-color: var(--bg-dark);
|
||
border-radius: 0.3em;
|
||
box-shadow:
|
||
0 0 1px var(--bg-green-02),
|
||
inset 0 0 2px var(--bg-white-05);
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
pre samp {
|
||
display: block;
|
||
padding: 1em;
|
||
margin: 2em auto;
|
||
background-color: var(--bg-dark);
|
||
color: var(--accent-green-bright);
|
||
border-radius: 0.5em;
|
||
box-shadow:
|
||
0 0 10px var(--bg-lime-005),
|
||
inset 0 0 3px var(--bg-lime-01);
|
||
font-size: 0.8em;
|
||
max-height: 50vh;
|
||
overflow: auto;
|
||
}
|
||
|
||
strong {
|
||
color: var(--text-white);
|
||
}
|
||
|
||
sub,
|
||
sup {
|
||
font-size: 0.75em;
|
||
line-height: 1;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sup {
|
||
top: -0.4em;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.2em;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 3em 0;
|
||
font-size: 0.95em;
|
||
line-height: 1.5;
|
||
border: 1px solid var(--border-dark);
|
||
background-color: var(--bg-white-015);
|
||
/* Suppression des coins arrondis */
|
||
border-radius: 0;
|
||
}
|
||
|
||
thead {
|
||
background-color: var(--bg-white-04);
|
||
color: var(--text-white);
|
||
font-weight: bold;
|
||
}
|
||
|
||
thead th {
|
||
padding: 0.75em 1em;
|
||
border: 1px solid var(--border-dark);
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
background: linear-gradient(to bottom, var(--bg-white-06), var(--overlay-black-40));
|
||
}
|
||
|
||
tbody td {
|
||
padding: 0.75em 1em;
|
||
border: 1px solid var(--border-dark);
|
||
vertical-align: top;
|
||
text-align: left;
|
||
color: var(--text-light);
|
||
background-color: var(--transparent);
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
/* Alternance des lignes */
|
||
tbody tr:nth-child(even) td {
|
||
background-color: var(--bg-white-015);
|
||
}
|
||
|
||
/* Survol ligne */
|
||
tbody tr:hover td {
|
||
background-color: var(--bg-accent-blue-005);
|
||
}
|
||
|
||
/* Survol cellule */
|
||
tbody td:hover {
|
||
background-color: var(--bg-accent-blue-008);
|
||
}
|
||
|
||
/* Pied du tableau */
|
||
tfoot td {
|
||
padding: 0.75em 1em;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
background-color: var(--bg-white-02);
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
}
|
||
|
||
aside {
|
||
|
||
h2::before,
|
||
h3::before,
|
||
h4::before,
|
||
h5::before,
|
||
h6::before {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
.numbered-headings {
|
||
h2 {
|
||
counter-reset: h3;
|
||
counter-increment: h2;
|
||
margin: 2.2em 0 1em;
|
||
font-size: 1.8em;
|
||
color: var(--accent-blue);
|
||
scroll-margin-top: 4rem;
|
||
|
||
&::before {
|
||
content: counter(h2) ". ";
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
counter-reset: h4;
|
||
counter-increment: h3;
|
||
margin: 2em 0 0.8em;
|
||
font-size: 1.5em;
|
||
color: var(--heading-green);
|
||
scroll-margin-top: 4rem;
|
||
|
||
&::before {
|
||
content: counter(h2) "." counter(h3) ". ";
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
counter-reset: h5;
|
||
counter-increment: h4;
|
||
margin: 1.8em 0 0.7em;
|
||
font-size: 1.3em;
|
||
color: var(--heading-yellow);
|
||
scroll-margin-top: 4rem;
|
||
|
||
&::before {
|
||
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
|
||
}
|
||
}
|
||
|
||
h5 {
|
||
counter-reset: h6;
|
||
counter-increment: h5;
|
||
margin: 1.6em 0 0.6em;
|
||
font-size: 1.1em;
|
||
color: var(--heading-purple);
|
||
scroll-margin-top: 4rem;
|
||
|
||
&::before {
|
||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
|
||
}
|
||
}
|
||
|
||
h6 {
|
||
counter-increment: h6;
|
||
margin: 1.4em 0 0.5em;
|
||
font-size: 1em;
|
||
color: var(--heading-pink);
|
||
scroll-margin-top: 4rem;
|
||
|
||
&::before {
|
||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
|
||
}
|
||
}
|
||
}
|