/*
	CSS Thorgal community
	Stéphane Hardy
	2025-2026
*/

/* ==========================================================
   Variables trooooop pratiques
   ========================================================== */
:root { --couleur-sombre: #1a1a1a; }
:root { --couleur-claire: #efeeed; }
:root { --couleur-or: #d8af30; }
:root { --hauteur-entete-accueil: 100px; }
:root { --hauteur-entete-standard: 60px; }
:root { --hauteur-barre-superieure: 40px; }

/* ==========================================================
   Structure générale
   ========================================================== */
body { margin: 0; padding: 0; background-color: var(--couleur-claire); color: var(--couleur-sombre); }
html {scroll-behavior: smooth;}
html :focus, html :focus:focus-visible {outline: 0 !important;}
input, textarea {padding: 5px; background: white; border: solid var(--couleur-claire) 2px; margin-bottom: 10px; border-radius: 3px; font-size: 1em; color: #666; font-family: inherit;}

/* ==========================================================
   Header
   ========================================================== */
.entete { position: relative; width: 100%; z-index: 100; transition: background-color 0.5s ease, height 0.5s ease; }
.entete.header-sticky { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--couleur-claire); z-index: 100; box-shadow: 0 0 10px 0 rgba(26,26,26,.1); }

/* ==========================================================
   Barre supérieure (40px, disparaît au scroll)
   ========================================================== */
.barre-superieure { position: relative; z-index: 10; height: var(--hauteur-barre-superieure); width: 100%; background-color: rgba(0,0,0,0.5); color: var(--couleur-claire); display: flex; align-items: center; transition: opacity 0.3s ease; }

/* Accueil : sombre transparent */
body.home .barre-superieure { background-color: rgba(26,26,26,0.2); }

/* Autres pages : sombre opaque */
body:not(.home) .barre-superieure { background-color: var(--couleur-sombre); }
body:not(.home) .barre-superieure::after { content: ""; position : absolute; left: 0; top: 100%; width: 100%; height: var(--hauteur-entete-standard); background-color: var(--couleur-sombre); }

.barre-superieure-contenu { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

/* Contenu de la zone de gauche */
.barre-superieure-gauche { display: flex; align-items: center; padding: 0px 15px; }
.icone-avant-phrase { display: inline-block; width: 18px; height: 18px; fill: var(--couleur-claire); margin-right: 5px; }
.texte-avant-phrase { font-size: 14px; text-transform: uppercase; font-family: "Balthazar", serif; }

/* Contenu de la zone de droite */
.barre-superieure-droite { display: flex; align-items: center; gap: 15px; padding: 0px 15px; }
.formulaire-recherche { display: flex; }
.champ-recherche { padding: 5px 10px; border: none; height: 24px; margin: 0 auto; background: #2a2a2a; color: var(--couleur-claire); font-family: Artifex; font-size: 10px; border-radius: 3px;  }
.icones-utilisateur { display: flex; gap: 10px; }
.icones-utilisateur a { display: inline-block; width: 24px; height: 24px; background-color: var(--couleur-claire); color: var(--couleur-sombre); text-align: center; line-height: 24px; text-decoration: none; font-size: 12px; }
.membre-menu{position:absolute;top:42px;right:0;background:#fff;padding:10px 12px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;z-index:999;min-width:140px;}
.membre-menu a,.membre-menu-item{display:block;width:100%;text-align:left;padding:6px 0;cursor:pointer;text-decoration:none;color:#333;font-size:14px;}
.membre-menu a:hover,.membre-menu-item:hover{color:#ff7a00;}

/* Décalage si la barre d'administration Wordpress est affichée (bureau et mobile) */
body.admin-bar .entete.header-sticky { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .entete.header-sticky { top: 0px; } }

/* ==========================================================
   Boutons de profil et de connexion
   ========================================================== */
.membre-boutons-connexion{display:flex;justify-content:flex-end;align-items:center;gap:10px;position:relative;}
.membre-btn{width:24px;height:24px;padding:6px;border-radius:6px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.membre-btn:hover{background:#ff7a00;}
.membre-btn-avatar img{width:24px;height:24px;border-radius:50%;}
.membre-icone-power{width:18px;height:18px;border:2px solid currentColor;border-radius:50%;position:relative;}
.membre-icone-power::before{content:"";width:2px;height:10px;background:currentColor;position:absolute;top:-2px;left:50%;transform:translateX(-50%);}
.membre-popup-deconnexion{position:absolute;top:42px;right:0;background:#fff;padding:10px 12px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;z-index:999;}
.membre-popup-deconnexion p{margin:0 0 8px;font-size:14px;}
.membre-popup-deconnexion a,.membre-popup-deconnexion button{margin-right:6px;padding:4px 8px;font-size:13px;border-radius:4px;cursor:pointer;}
.membre-confirmer{background:#d00;color:#fff;text-decoration:none;}
.membre-annuler{background:#ccc;border:none;}

/* ==========================================================
   Zone titre et menu
   ========================================================== */
.zone-titre-menu { width: 100%; display: flex; align-items: center; transition: height 0.3s ease; }
.zone-titre-menu-contenu { padding: 0px 15px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }

/* Hauteur accueil vs pages internes */
body.home .zone-titre-menu { height: var(--hauteur-entete-accueil); }
body:not(.home) .zone-titre-menu { height: var(--hauteur-entete-standard); }

/* ==========================================================
   Logo Thorgal (la même image partout, invert au scroll)
   ========================================================== */
.logo-site { padding: 15px; transition: filter 0.5s ease, height 0.3s ease; }
body:not(.home) .logo-site { max-height: 40px; }
body.home .logo-site { max-height: 70px; filter: drop-shadow(0 0 .05rem gray); } /* Un peu plus grand et halo gris en page d'accueil */
.entete.header-sticky .logo-site { filter: invert(1); }

/* ==========================================================
   Menu principal et sous-menus
   ========================================================== */
.zone-menu-principal { display: flex; padding: 15px; }
.menu-principal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: clamp(10px, 3vw, 30px); row-gap: 10px; }
ul.menu-principal > li { position: relative; }
ul.menu-principal > li > a { position: relative; text-decoration: none; color: var(--couleur-claire); padding: 10px 5px; display: inline-block; font-family: Artifex; text-transform: uppercase; text-shadow: #888 0 0 10px; transition: color .3s ease; }
@media (min-width:901px) {
	ul.menu-principal > li > a::before, ul.menu-principal > li > a::after { content: ""; position : absolute; left: 0; width: 100%; height: 1px; inset-inline: 0; margin-inline: auto; background: linear-gradient(to right, transparent 0%, var(--couleur-claire) 50%, transparent 100%); opacity: 0; transition: all .6s; transform: scaleX(0); transform-origin: center; z-index: 100; }
	ul.menu-principal > li > a::before { top: 0; }
	ul.menu-principal > li > a::after { bottom: 0; }
	ul.menu-principal > li:hover > a::before, ul.menu-principal > li:hover > a::after { opacity: 1; transform: scaleX(1); }

	/* Couleur du menu au scroll */
	.entete.header-sticky .menu-principal > li > a { color: var(--couleur-sombre); }
	.entete.header-sticky ul.menu-principal > li > a::before, .entete.header-sticky ul.menu-principal > li > a::after { background: linear-gradient(to right, transparent 0%, var(--couleur-sombre) 50%, transparent 100%); }
}

/* Sous-menus à droite */
.menu-principal li > ul { position: absolute; min-width: 190px; top: 100%; left: 0; list-style: none; margin-top: 10px; padding: 0; background-color: var(--couleur-claire); border-radius: 3px; box-shadow: white 0px 0px 100px; transition: color .1s; z-index: 100; display: none; }
.menu-principal li > ul::before { content: ''; position: absolute; width: 100%; height: 10px; top: -10px; }
.menu-principal li > ul > li > a { opacity: 0; }
@media (min-width:901px) {
	.menu-principal li:hover > ul { display: block; }
	.menu-principal li:hover > ul > li > a { opacity: 1; }
	.menu-principal li > ul > li > a:hover, .menu-principal li > ul > li.current_page_item > a:hover { background-color: var(--couleur-sombre); box-shadow: var(--couleur-sombre) 0px 0px 30px; color: var(--couleur-claire); z-index: 100; }
	.menu-principal li > ul > li.current_page_item > a { background: #ddd; }
}
.menu-principal li > ul > li > a { position: relative; display: flex; flex-grow: 1; font-family: Mulish; border-bottom: 1px solid hsla(0,0%,50%,.2); color: rgb(36,37,38); font-size: 14px; font-weight: 400; background: white; border-radius: 3px; padding: 10px 5px 10px 20px; line-height: 1.5; text-decoration: none; }
.menu-principal li > ul > li { position: relative; }
.menu-principal li > ul > li > ul { left:100%; top: -10px; margin-left: 10px; }
.menu-principal li > ul > li > ul::before { content: ''; position: absolute; width: 10px; height: 100%; top: 0; left: -10px; }

/* ==========================================================
   Menu pour mobile
   ========================================================== */
@media (max-width:900px) {
	.zone-menu-principal { padding: 0; }
	.barre-superieure-gauche { display: none; }
	.logo-site { max-height: 40px !important; }
	
	.menu-mobile { display: flex; flex-direction: column; gap: 5px; width: 31px; background: none; border: none; cursor: pointer; background: var(--couleur-claire); color: var(--couleur-sombre); border-radius: 3px; padding: 6px; z-index: 1000; }
	.entete.header-sticky .menu-mobile { background: var(--couleur-sombre); }
	
	.menu-mobile span { height:3px; border-radius:2px; transition:.3s; }
	.menu-mobile span:nth-child(1), .menu-mobile span:nth-child(3) { background: var(--couleur-sombre); }
	.menu-mobile span:nth-child(2) { border-bottom: solid var(--couleur-sombre) 3px; border-top: solid var(--couleur-sombre) 3px; border-left: solid var(--couleur-sombre) 3px; background: var(--couleur-claire); }
	.entete.header-sticky .menu-mobile span:nth-child(1), .entete.header-sticky .menu-mobile span:nth-child(3) { background: var(--couleur-claire); }
	.entete.header-sticky .menu-mobile span:nth-child(2) { border-color: var(--couleur-claire); background: var(--couleur-sombre); }
	
	body.menu-ouvrir .menu-mobile span:nth-child(1) { transform: translateY(8px) rotate(25deg); }
	body.menu-ouvrir .menu-mobile span:nth-child(2) { border: 0; width: 10px; z-index: 200; transform: translateX(10.5px) rotate(90deg); }
	body.menu-ouvrir .menu-mobile span:nth-child(3) { transform: translateY(-8px) rotate(-25deg); }

	.menu-principal { position:fixed; top:0; left:0; height:100vh; width:260px; background:var(--couleur-sombre); flex-direction:column; flex-wrap:nowrap; align-items:stretch;  padding:80px 20px; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; row-gap:0; column-gap:0; }
	body.menu-ouvrir .menu-principal { transform:translateX(0); }
	.menu-principal::before {content: ''; width: 70px; min-height: 20px; display: block; margin-bottom: 10px; background: url('../img/deco_h.png') top left no-repeat; opacity: .6; filter: invert(1);}
	.menu-principal::after {content: ''; width: 70px; min-height: 20px; display: block; margin-top: 10px; background: url('../img/deco_b.png') bottom left no-repeat; opacity: .6; filter: invert(1);}

	ul.menu-principal > li { width:100%; }
	ul.menu-principal > li > a { opacity: .6; padding:15px 0; font-size:18px; text-shadow:none; color:var(--couleur-claire); display:block; }
	ul.menu-principal > li > a:hover { opacity: 1; }
	.menu-principal li > ul { display:none; position:static; background:none; box-shadow:none; margin:0; padding:0; }

	.menu-principal li.ouvrir > ul { display:block; }
	.menu-principal li > ul > li.current_page_item > a { background: #2a2a2a; }
	.menu-principal li > ul > li > a { opacity: .6; padding:10px 0 10px 20px; background:none; border:none; color:var(--couleur-claire); font-size:16px; }
	.menu-principal li > ul > li > a:hover { opacity: 1; }
	.menu-principal li > ul > li > ul > li > a { padding:10px 0 10px 40px; font-size:15px; }
}

@media (min-width:901px) { .menu-mobile { display:none; }}

/* ==========================================================
   Bandeau d'images en page d'accueil
   ========================================================== */
.bandeau-accueil { position: relative; z-index: 1; width: 100%; height: 560px; margin-bottom: 140px; }
.bandeau-accueil-fond { position: absolute; top: -140px; left: 0; width: 100%; height: 700px; background-size: cover; background-position: center center; overflow: hidden; transition: opacity 1s ease; }
.bandeau-accueil-fond.header-sticky { top: -40px; }
.bandeau-accueil-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 3s ease-in-out; }
.bandeau-accueil-slide.visible { opacity: 1; }
#bandeau-accueil-decoupe { position: absolute; left: 0; bottom: -1px; width: 100%; height: 50px; background: transparent url('../img/barre_haut.png') bottom left repeat-x; }

html.breevia-theme .h-separator {background: transparent url('../img/barre_haut.png') bottom left repeat-x;}

/* ==========================================================
   Polices
   ========================================================== */
@font-face {
    font-family: 'atelanblack';
    src: url("../font/atelan-black-webfont.eot");
    src: url("../font/atelan-black-webfont.eot?#iefix") format("embedded-opentype"), url("../font/atelan-black-webfont.woff") format("woff"), url("../font/atelan-black-webfont.ttf") format("truetype"), url("../font/atelan-black-webfont.svg#atelanblack") format("svg");
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'atelanmedium';
    src: url("../font/atelan-medium-webfont.eot");
    src: url("../font/atelan-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../font/atelan-medium-webfont.woff") format("woff"), url("../font/atelan-medium-webfont.ttf") format("truetype"), url("../font/atelan-medium-webfont.svg#atelanblack") format("svg");
    font-weight: normal; font-style: normal;
}
@font-face {font-family : Artifex; src: url('../font/artifex-hand-cf-regular.otf');}
@font-face {font-family : Mulish; src: url('../font/Mulish-VariableFont_wght.ttf');}

/* ==========================================================
   Général
   ========================================================== */
.titre-thorgal, .sous-titre-thorgal {position: relative; color: #555; text-align: center; cursor: default; clear: both; font-family: Artifex; letter-spacing: -0.1em; padding: 0;}
.titre-thorgal {font-size: calc(24px + 4vw);}
.avec-sous-t {margin-bottom: 0px;}
.sous-titre-thorgal {font-size: calc(16px + 1vw); margin: 0px;}
.titre-accueil, .titre-eclairages, .titre-collection, .titre-albums, .titre-communaute, .titre-taverne {position: relative; cursor: default;}
.titre-accueil::before, .titre-eclairages::before, .titre-collection::before, .titre-albums::before, .titre-albums::before, .titre-communaute::before, .titre-taverne::before {position: absolute; top: -1em; left: 5px; text-align: left; width: 250px; font-size: calc(10px + 1vw); letter-spacing: normal; color: #aaa; visibility: visible;}
.titre-accueil::before {content: 'Thorgal';}
.titre-eclairages::before {content: 'Éclairages';}
.titre-collection::before {content: 'Collection';}
.titre-albums::before {content: 'Albums';}
.titre-communaute::before {content: 'La Communauté';}
.titre-taverne::before {content: 'La taverne';}

.texte-j p {color: #222; font: 400 14px Mulish, sans-serif; text-align: justify; margin-bottom: 1.2em; cursor: default;} /* Texte justifié */
.texte-c p {color: #222; font: 400 14px Mulish, sans-serif; text-align: center; margin-bottom: 1.2em; cursor: default;} /* Texte centré */
.texte-cb p {color: var(--couleur-claire); font: 300 14px Mulish, sans-serif; text-align: center; margin-bottom: 1.2em; cursor: default;} /* Texte blanc centré */

#menu-principal {background-image: url("../img/deco_menu.png"); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}

/* Bandeau noir en haut de page sans contenu */
#content::before {width: 100%; height: 50px; background: var(--couleur-sombre) url('../img/barre_haut.png') bottom left repeat-x; display: block; content: "";}
body.home #content::before {display: none;}

/* Bandeau noir en haut de page avec du contenu (section "Éclairages" par exemple) */
#zone-noire {position: relative; background: var(--couleur-sombre); padding-top: 30px; overflow: hidden;}
#zone-noire p {color: #f0f0f0; font: 300 14px Mulish, sans-serif; margin-left: 15%; margin-right: 15%; text-align: justify; cursor: default; margin-bottom: 1.2em; position: relative; z-index: 2;}
#zone-noire::after {width: 100%; height: 50px; background: transparent url('../img/barre_haut.png') bottom left repeat-x; clear: both; display: block; content: ""; position: relative; bottom: -1px; z-index: 2;}

/* Bandeau blanc puis noir en haut de page avec du contenu (section "Communauté" par exemple) */
#bandeau-blanc {position: relative; text-align: center;}
#bandeau-blanc::after {width: 100%; height: 40px; background: transparent url('../img/barre_milieu1.png') bottom left repeat-x; content: ""; position: absolute; bottom: -1px; left: 0; z-index: 2; z-index: 20;}
#bandeau-noir {background: var(--couleur-sombre); position: relative; text-align: center; padding: 20px 0 30px 0; margin-bottom: 30px;}
#bandeau-noir::after {width: 100%; height: 50px; background: transparent url('../img/barre_milieu2.png') bottom left repeat-x; content: ""; position: absolute; bottom: -1px; left:0; z-index: 2;}

/* Menu dynamique de gauche pour les pages ayant plusieurs paragraphes */
.page-thorgal {max-width: 100%; margin-right: 100px;}
@media (max-width: 648px) {
  .page-thorgal {flex-direction: column; margin-right: 0px;}
  .menu-thor ul {position: static; display: none;}
}
.menu-thor {width: 200px; position: relative;}
.menu-thor ul {position: sticky; top: 50%; transform: translateY(-50%); list-style: none; padding: 0; margin: 0;}
.menu-thor ul::before {content: ''; width: 70px; height: 20px; display: block; margin-left: 30px; background: url('../img/deco_h.png') top left no-repeat; opacity: .3; transition: .3s;}
.menu-thor ul:hover::before {transform: translateY(-20px);}
.menu-thor ul::after {content: ''; width: 70px; height: 20px; display: block; margin-left: 30px; background: url('../img/deco_b.png') bottom left no-repeat; opacity: .3; transition: .3s;}
.menu-thor ul:hover::after {transform: translateY(20px);}
.menu-thor li {font-family: Mulish; font-size: 10px; margin: 1rem 0;}
.menu-thor a {text-decoration: none; color: #666; font-weight: normal; font-size: 13px; margin-left: 30px; letter-spacing: .5px; transition: .3s;}
.menu-thor a:hover, .menu-thor a.active {color: var(--couleur-sombre); font-weight: bolder;}
.page-thorgal-contenu {flex: 1;}
.paragraphe {padding-top: 10px;}

/* Page normale avec une petite marge */
.page-thorgal-n {text-align: center; margin: 0 50px;}
@media (max-width: 648px) {
  .page-thorgal-n {margin: 0 auto !important;}
  .deco {display:none !important;} /* La classe "deco" est à placer sur tout élément décoratif à retirer dans la version mobile */
}

/* ==========================================================
   Icône couper/mettre le son
   ========================================================== */

#btn-coupure {
  position: fixed; bottom: 25px; left: 18px; width: 35px; height: 35px;
  border-radius: 4px; border: solid #444 1px !important; background: rgba(0,0,0,.5); padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: 0.2s;
}
#btn-coupure:hover {transform: scale(1.1); border: solid gray 1px;}
#btn-coupure.muted .son-icone {opacity: 0.3; animation-play-state: paused;}
.son-icone {display: block; width: 24px; height: 24px;}

/* Bas de page */
#image-bas::before, #image-bas::after {content: ""; position: absolute; top: 50%; height: 100%; width: 40%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 100% auto; pointer-events: none;}
#image-bas::before {left: -40%; background-image: url("../img/deco_g.png");}
#image-bas::after {right: -40%; background-image: url("../img/deco_d.png");}

/* ==========================================================
   Bouton et formulaire de connexion
   ========================================================== */
/* Version widget de base pour le forum ou ailleurs */
.connexion-groupe {margin: 0 auto; font-family: Artifex; background: var(--couleur-claire); max-width: 320px; border-radius: 5px; border: solid var(--couleur-sombre) 3px; text-align: center;}
.connexion-groupe p {background: var(--couleur-sombre); color : var(--couleur-claire); margin: 0; padding: 10px;}
.connexion-groupe a, .connexion-groupe label {text-decoration: none; font-size: 12px; color: #888;}
.connexion-groupe button {cursor: pointer; color: var(--couleur-claire); width: 140px; height: 25px; align-content: center; display: inline-block; text-align: center; font-family: Artifex; font-size: 13px; padding: 5px 0 5px 0; border: solid #666 1px; background: var(--couleur-sombre); transition-duration: .4s; text-transform: uppercase; margin: 10px; line-height: 1;}
.connexion-groupe button:hover {background: #666; color: orange;}
.connexion-groupe input {margin: 5px 5px 0px 5px;}
.connexion-groupe input[type="checkbox"]:checked {accent-color: var(--couleur-sombre);}
.connexion-groupe img {float: left; margin-top: 20px; margin-left: 10px;}
.resultat-mdp-oublie, .resultat-connexion, .resultat-mdp {color: var(--couleur-or);}

/* Version pleine page pour les pages de connexion */
.connexion-groupe-p {position: relative; width: 718px;  max-width: 100%; height: 447px; border: 0; background: var(--couleur-claire) url('../img/trou.png') no-repeat center;}
.connexion-groupe-p .formulaire-connexion, .connexion-groupe-p .formulaire-mdp-oublie {position: absolute; width: 320px; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.connexion-groupe-p.connexion-groupe p {background-color: transparent;}

/* Version qui apparaît en fenêtre en cliquant sur le bouton de connexion */
.login-modal {position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; z-index: 100000;}
.login-modal.active {opacity: 1; visibility: visible;}
.login-modal-dedans {position: relative; width: 100%; max-width: 320px; border-radius: 5px; box-shadow: 0 10px 40px rgba(0,0,0,.25); pointer-events: auto;}
.login-overlay {position: fixed; inset: 0; background: var(--couleur-sombre) url('../img/fond_thorgal_gris.png') no-repeat center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; z-index: 99999;}
.login-overlay.active {opacity: .9; visibility: visible; pointer-events: auto;}
.login-fermer {position: absolute; top: 10px; right: 10px; background: var(--couleur-claire); border-radius: 50%; padding: 0 5px; border: none; font-size: 26px; line-height: 1; cursor: pointer;}
.login-voir, .mdp-perdu-voir {transition: opacity 0.3s ease, transform 0.3s ease;}
.cacher {opacity: 0; transform: translateY(10px);}

/* ==========================================================
   Transformer une moche checkbox en switch moderne
   Format : <label class="switch"><input type="checkbox" name="XXX" value="1"><span class="slider"></span><span class="text">texte texte texte</span></label>
   ========================================================== */
.switch {display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none;}
.switch input {display:none;}
.slider {width: 4px; min-width:44px; height:24px; background:white; border:2px solid var(--couleur-sombre); border-radius:5px; position:relative; transition:background .3s;}
.slider::before {content:""; width:18px; height:18px; background:var(--couleur-sombre); border-radius:5px; position:absolute; top:50%; left:2px; transform:translateY(-50%); transition:transform .3s, background .3s;}
.switch input:checked + .slider {background: var(--couleur-sombre);}
.switch input:checked + .slider::before {transform: translate(20px,-50%); background: white;}