/*--------------------------------------------------
I                                                  I
I                                                  I
I     unmerveilleuxfiston.net                      I
|     (last release 2026 03 10)                    I
I                                                  I
I                                                  I
--------------------------------------------------*/
/*------------------------------
I                              I
I    POLICES                   I
I                              I
------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Source+Sans+3:ital,wght@0,400;1,400&family=IBM+Plex+Sans:wght@400;600;700&display=swap');
/* ============================================================
VARIABLES GLOBALES
Modifier ici pour changer l'apparence de toute la page.
============================================================ */
:root {
/* polices */
--font-h1:  'Fredoka one', sans-serif;
--font-h2:  'Fredoka one', sans-serif;
--font-h3:  'Fredoka one', sans-serif;
--font-txt: 'IBM Plex Sans', 'Source Sans 3', sans-serif;
/* Tailles en em */
--t-h1:     2.3em;
--t-h2:     1.5em;
--t-h3:     1.3em;
--t-txt:    1.0em;
--t-small:  0.9em;
/* couleurs */
--fond-page:       #f5f3ef;    /* fond de page */
--vert:        #01f0b8;    /* vert électrique */
--ardoise:     #191919;    /* remplace le noir */
/* couleurs en réserve
--vert-light:  #e0fdf6;
--vert-mid:    #b3f5e5;
--gris-clair:  #e5e7e9;
--gris-200:    #d0d3d6;
--gris-400:    #9aa0a6;
--gris-700:    #3c4043;
--white:       #ffffff;
*/
}
/*------------------------------
I                              I
I    BODY                      I
I                              I
------------------------------*/
body {
background-color: var(--fond-page); /* couleur du fond */
margin: 0;
padding: 3rem 1.5rem;
font-family: var(--font-txt);
color: var(--ardoise);
font-size: 1rem;
line-height: 1.3;                   /* interlignage */
}
/*------------------------------
I                              I
I     COLONNE CENTRALE         I
I                              I
------------------------------*/
.contenu-page {
max-width: 555px;
padding: 0 0.3em 1em 0.3em;
margin: 0 auto 0 auto;
}
/*------------------------------
I                              I
I     COLONNE LISTE            I
I                              I
------------------------------*/
.contenu-liste {
margin: 5em auto 0 auto;
}
/*------------------------------
I                              I
I     H1 (TITRE)               I
I                              I
------------------------------*/
h1 {
font-family: var(--font-h1);
font-size: var(--t-h1);
color: var(--ardoise);
margin: 0 0 0 0;
line-height: 1.0;
letter-spacing: 0.01em;   /* léger espacement des lettres */
}
/*-----------------------------
I                              I
I     H2 (SOUS TITRE)          I
I                              I
------------------------------*/
h2 {
font-family: var(--font-h2);
font-size: var(--t-h2);
color: var(--vert);
margin: 0;
line-height: 1.2;
letter-spacing: 0.02em;   /* léger espacement des lettres */
}
/*-----------------------------
I                              I
I     H3                       I
I                              I
------------------------------*/
h3 {
font-family: var(--font-h3);
font-size: var(--t-h3);
color: var(--ardoise);
margin: 2rem 0 0.5rem 0;
line-height: 1.2;
letter-spacing: 0.02em;   /* léger espacement des lettres */
}
/*-----------------------------------
I                                   I
I     LIENS (hors LISTE et RETOUR)  I
I                                   I
-----------------------------------*/
a {
color: var(--ardoise);
text-decoration: none;
transition: color 0.2s ease;
}
/* Au survol */
a:hover {
color: var(--vert);
}
/* ===== ITEM BARRÉ : texte rayé et grisé (ajouter class="rature" sur un "li" pour obtenir le style */
.rature a {
text-decoration: line-through;
color: #807f7f;
}
.rature a:hover {
text-decoration: line-through;
font-style: italic;
}
/*-------------------------------------
I                                     I
I     RETOUR (flèche vers la gauche)  I
I                                     I
-------------------------------------*/
.retour {
color: var(--ardoise);
text-decoration: none;
transition: color 0.2s ease;
margin-bottom: 5em;
}
.retour::before {
content: '\279C';
display: inline-block;
transform: rotate(180deg);
margin-right: 0.5rem;
color: currentColor; /* adopte la couleur du parent */
}.retour:hover {
color: var(--vert);
}
/*------------------------------
I                              I
I     LISTE                    I
I                              I
------------------------------*/
ul {
list-style: none;   /* on enlève les puces par défaut */
padding: 0;
margin: 0;
}
/*------------------------------
I     CHAQUE ITEM DE LA LISTE  I
------------------------------*/
li {
display: flex;
align-items: baseline;   /* aligne la puce sur la ligne de base des lettres */
gap: 0.5rem;            /* espce entre puce (before) et texte */
margin-left: -1.45em;     /* décaler la ligne vers la gauche (pour faire déborder la puce) */
margin-bottom: 0.4rem;   /* espacement entre lignes de la liste */
}
/*------------------------------
I     PUCE (avant)             I
------------------------------*/
li::before {
content: '\279C';
color: var(--vert);
margin-right: 0;
}
/*------------------------------
I     PUCE (après)             I
------------------------------*/
li.externe::after {
content: '\002197';   /* flèche oblique */
color: var(--ardoise);
position: relative;
margin-left: -0.5em;
top: -0.2em;
}
/*------------------------------
I     LISTE (liens)            I
------------------------------*/
li > a {
text-decoration: underline;
text-decoration-color: var(--vert);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/*----------------
I     FIN        I
----------------*/