/* Copyright © 2021-2026 GauGoth Corp. All rights reserved */
@charset "utf-8";
/* CSS Document */
/* Note importante : on remarque que la totalité de la version du code "responsive" CSS est gérée
par la détection du type de "pointer".
("@media (pointer:none), (pointer:coarse) { ... }")
Il en existe 3 types détectables :
- none
Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
(exemple : assistant vocal)
- coarse
Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
(exemple : appareil mobile à écran tactile)
- fine
Le mécanisme de saisie principal inclut un dispositif de pointage précis.
(exemple : ordinateur doté d'une souris)
Il s'agit donc d'une ruse pour détecter un écran tactile.
Par ailleurs, un écran d'ordinateur tactile ne sera pas compté comme "mobile" car toujours doté d'une souris
("mécanisme de saisie principal").
Cette méthode est préférable à la détection de la largeur de l'écran ("@media (max-width: 768px) { ... }") :
après des tests, on aura remarqué que que celle-ci ne marche pas correctement,
surtout que de nombreux appareils mobiles ont en réalité une meilleure résolution qu'un écran d'ordinateur (smartphones compris !).
Exemple : Galaxy A13 (test sur navigateur Chrome) : 980 x 1928 (portrait) ; 980 x 332 (paysage)
==> UPDATE :
Il s'agissait en fait d'un problème de viewport. Il faut ajouter cette ligne dans le de chaque fichier HTML.
Cela a pour effet de régler la largeur de l'écran à la largeur réelle de l'appareil.
On peut alors utiliser les media queries classiques avec "max-width" pour le responsive design.
*/
/*########################## Variables CSS ##########################*/
:root {
/**********************************************************/
/* Couleurs principales (header, footer, body, container, font) */
--content-background-color: #ffffff;
--text-color: #000000;
--outline-color: #e19e24;
--footer-background-color: #292929;
--body-background: #431f00;
--article-background-color: #afafaf;
/**********************************************************/
/* Couleurs secondaires (textes, liens, boutons, fonds divers) */
--link-default-color: #3164ca;
--link-visited-color: #0054ff;
--article-title-background-color: #5b5b5b;
--article-sources-background-color: #938b59;
--article-switch-container-background-color: #686868;
--article-switch-background-color: #202631;
--secondary-onDark-text-color: #ffffff;
--button-background-color: #3498db; /* Même couleur pour le border du no-btn */
--button-hover-background-color: #1967d3;
--button-checked-hover-background-color: #2581bd;
--button-checked-active-background-color: #1c5f9e;
--button-text-color: #ffffff;
--dynamic-shadow-color: #595050;
--background-img-txt-color: #ffffff;
--outline-color-hover: #f6b338;
--outline-color-active: #ffa600;
--outline-color-light: #f2c777;
--outline-color-lighter: #e4ca9a;
--footer-background-color-darker: #363636;
--popup-background-color: rgba(0, 0, 0, 0.75);
--popup-bandeau-background-color: #e3e3e3e0;
--white: #ffffff;
--lighter-grey: #e3e3e3;
--light-grey: #afafaf;
--light-medium-grey: #777777;
--mediumer-grey: #9d9d9d;
--medium-grey: #898989;
--dark-grey: #474747;
--not-so-very-dark-grey: #363636;
--very-dark-grey: #2a2a2c;
--very-darker-grey: #1e1e1e;
--black: #000000;
/* Autres couleurs */
--rubrique1-background-color: linear-gradient(#096B3F, #0B977C);
--cookie-banner-background-color: #292929fa;
--default-sticky-shadow-color: rgba(0, 0, 0, 0.2);
--msg-font-color: #000000; /* Force la couleur noire (même en thème sombre) pour les messages d'erreur/avertissement */
--error-background-light-color: #ffd2d2;
--error-background-color: #ff6e6e;
--error-background-hard-color: #e60813;
--warning-background-light-color: #fff6d1;
--warning-background-color: #ffd966;
--info-background-light-color: #d6eaff;
--info-background-color: #3498db;
--success-background-light-color: #deffde;
--success-background-color: #2ecc71;
--error-border-color: #e60813;
--warning-border-color: #fff700;
--info-border-color: #17c7f3;
--success-border-color: rgb(12, 220, 99);
--form-text-color: #000000;
--box-variables-text-color: #000000;
/**********************************************************/
/*************** Fonts ************************************/
--font-family-base: Verdana, Arial, Helvetica, sans-serif;
--font-size-default: 100%/1.4;
--font-size-110: 110%/1.4;
--font-size-120: 120%/1.4;
--font-size-130: 130%/1.4;
--font-size-140: 140%/1.4;
--font-size-90: 90%/1.4;
/* Buttons */
--button-border-radius: 7px;
--button-padding: 10px 15px;
--button-active-padding: 8px 18px;
--button-font-size: 120%/1.4;
--button-hover-font-size: 130%/1.4;
--button-hover-huge-font-size: 180%/1.4;
/* Buttons "no-btn" */
--no-btn-text-color: #000000;
--no-btn-background-color: #e5e5e5;
--no-btn-hover-background-color: #c1c1c1;
--no-btn-active-background-color: #a9a9a9;
/* Images */
--dynamic-img-logo-border-radius: 24px;
--dynamic-img-border-radius: 15px;
--image-link-border-color: #585858;
--image-link-border-color-hover: #000000;
--background-img-bckd-color: #000;
--default-active-opacity: 0.6;
--logo-game-transparent-background-color: none;
/* Other styles */
--default-border-radius: 24px;
--default-medium-border-radius: 14px;
--default-small-border-radius: 10px;
--default-tiny-border-radius: 5px;
--default-transition-duration: 0.4s;
--fast-transition-duration: 0.2s;
--hr-height: 10px;
--hr-border-radius: 5px;
--hr-background: linear-gradient(#725216, #222);
--cursor-pointer: pointer;
/* Responsive */
/* Pas possible malheureusement d'utiliser des variables dans les media queries */
--max-width-responsive: 768px;
--default-border-radius-responsive: 12px;
/**********************************************************/
--default-onLoad-opacity: 0.6;
--default-onLoad-transition-duration: 0.6s;
/* Header */
/* Default */
--header-link-color: #000000;
--header-link-hover-color: #a45220;
--navbar-box-shadow: 0 4px 6px var(--default-sticky-shadow-color);
/* Hamburger menu */
--hamburger-line-color: #000000;
--hamburger-background-color: rgba(255, 255, 255, 0.95);
--header-pipe-color: #6a6a6a;
/* Footer */
--text-footer-color: #ffffff;
--separator-footer-color: #e3e3e3;
--footer-table-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* z-indexs */
--z-index-scrollToTopBtn: 99;
--z-index-header: 200;
--z-index-nav-links-mobile: 100;
--z-index-hamburger: 101;
--z-index-popup-background: 999;
--z-index-popup: 1000;
--z-index-bandeau: 1001;
--z-index-cookie-banner: 199;
}
/* Dark theme variables (with media query preference) */
/* Comment this section to disable dark mode (waiting for a complete JS implementation) */
/*
@media (prefers-color-scheme: dark) {
:root {
--content-background-color: var(--very-dark-grey);
--text-color: var(--lighter-grey);
--outline-color: #9d6600;
--body-background: #000000;
--footer-background-color: #121212;
--article-background-color: var(--not-so-very-dark-grey);
--link-default-color: #4ea1ff;
--link-visited-color: #82b9ff;
--outline-color-hover: #a97300;
--outline-color-active: #d48800;
--outline-color-light: #b58936;
--outline-color-lighter: #c3a66e;
--article-title-background-color: var(--dark-grey);
--article-sources-background-color: var(--not-so-very-dark-grey);
--article-switch-container-background-color: #3a3a3a;
--article-switch-background-color: #121418;
--secondary-onDark-text-color: #ffffff;
--dynamic-shadow-color: #000000;
--button-hover-background-color: #2581bd;
--button-checked-hover-background-color: #1c5f9e;
--button-checked-active-background-color: #145080;
--hr-background: linear-gradient(#323232, #010101);
--header-link-hover-color: #bc7428;
--logo-game-transparent-background-color: var(--dark-grey);
}
}
*/
/*######################### Principaux éléments ##########################*/
body {
font: var(--font-size-default) var(--font-family-base);
background: var(--body-background);
margin: 0;
padding: 0;
color: var(--text-color);
@media (max-width: 768px) {font: var(--font-size-default) var(--font-family-base);}
}
.body_special {
font: var(--font-size-default) var(--font-family-base);
background-color: transparent;
margin: 0;
padding: 0;
border:none;
color: var(--text-color);
/*No scroll bar*/
overflow: hidden;
}
/* ~~ Sélecteurs d'éléments/balises ~~ */
ul, ol, dl { /* En raison des variations entre les navigateurs, il est conseillé d'attribuer une valeur de zéro aux marges intérieures et aux marges des listes. A des fins de cohérence, vous pouvez définir les valeurs désirées dans cette zone ou dans les éléments de liste (LI, DT, DD) qu'elle contient. N'oubliez pas que les paramètres que vous définissez ici se répercuteront sur la liste .nav, sauf si vous rédigez un sélecteur plus spécifique. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin-top: 0px; /* la suppression de la marge supérieure résout un problème où les marges sortent de leur div conteneur. La marge inférieure restante l'éloignera de tout élément qui suit. */
padding-right: 15px;
padding-left: 15px; /* l'ajout de la marge intérieure aux côtés des éléments à l'intérieur des divs, et non aux divs proprement dit, évite le recours à des calculs de modèle de boîte. Une autre méthode consiste à employer une div imbriquée avec marge intérieure latérale. */
font-family: var(--font-family-base);
}
@media (max-width: 768px) {
p {
font: var(--font-size-110) var(--font-family-base);
}
}
a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
border: none;
}
/* ~~ La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. ~~ */
a:link {
color: var(--link-default-color);
text-decoration: underline; /* à moins que vous ne définissiez un style particulièrement exclusif pour vos liens, mieux vaut prévoir un soulignement, qui garantit une identification visuelle rapide. */
word-wrap: break-word;
overflow-wrap: break-word;
}
/* On a décidé de ne pas utiliser le style visited car moins de cohérence dans la DA*/
a:visited {
color: var(--link-default-color);
text-decoration: underline;
word-wrap: break-word;
overflow-wrap: break-word;
}
a:hover, a:active, a:focus { /* ce groupe de sélecteurs offrira à un navigateur au clavier la même expérience de survol que celle d'une personne employant la souris. */
text-decoration: none;
}
/* ~~ ce conteneur entoure toutes les autres divs, en leur attribuant leur largeur sur base d'un pourcentage ~~ */
.container {
width: 90%;
max-width: 1260px;/* une valeur « max-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop large sur un moniteur de grande taille. La lisibilité de la longueur de ligne est ainsi améliorée. IE6 ne tient pas compte de cette déclaration. */
/*min-width: 780px;*/ /* une valeur « min-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop étroite. La longueur de ligne est ainsi plus lisible dans les colonnes latérales. IE6 ne tient pas compte de cette déclaration. */
background-color: var(--content-background-color);
margin: 0 auto; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page. Elle n'est pas nécessaire si vous fixez la largeur du conteneur à 100%. */
@media (max-width: 768px) {width: 0%; max-width: 100%; min-width: 100%;} /* pour les écrans tactiles, la largeur du conteneur est fixée à 100% pour occuper toute la largeur de l'écran. */
}
/*################################# En-tête et barre de navigation #################################*/
/* ~~aucune largeur n'est attribuée à l'en-tête. Il occupera toute la largeur de votre mise en page. Il contient un espace réservé pour une image, qui doit être remplacé par votre logo lié.~~ */
.header, #header {
background-color: var(--outline-color);
padding: 0;
position: sticky;
top: 0;
width: 100%;
z-index : var(--z-index-header);
}
/* Permet la transition de l'en-tête : en effet, comme le header met un temps supplémentaire à charger,
on veut afficher un rectangle vide en attendant (à l'aide de l'id "header").*/
#header {
background-color: var(--outline-color);
height: 114px;
opacity: var(--default-onLoad-opacity);
transition: all var(--default-onLoad-transition-duration) ease-in-out;
@media (max-width: 768px) {
height: 75px;
}
}
#header.loaded {
background-color: transparent;
opacity: 1;
height: auto;
}
.header--hidden {
transform: translateY(-100%);
}
.navbar {
display: flex;
/* Effet concret de space-between :
- Le premier élément enfant est collé au début du conteneur.
- Le dernier élément enfant est collé à la fin.
- L’espace restant est distribué également entre tous les autres éléments (mais pas sur les bords du conteneur).
Attention : effet seulement avec "display: flex;"*/
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: var(--outline-color);
color: var(--header-link-color);
box-shadow: var(--navbar-box-shadow);
@media (max-width: 768px) {
flex-wrap: wrap;
padding: 5px 10px;
}
}
.logo {
transition: var(--default-transition-duration);
padding: 5px;
padding-left: 1px;
padding-right: 1px;
border-radius: var(--default-border-radius);
height: 80px;
width: 80px;
@media (max-width: 768px) {
height: 60px;
width: 60px;
border-radius: var(--default-border-radius-responsive);
}
}
.logo:hover {
box-shadow: 5px 6px 20px var(--dynamic-shadow-color);
transition: var(--default-transition-duration);
}
.logo:active, .logo:focus {
box-shadow: 5px 6px 20px var(--dynamic-shadow-color);
opacity: var(--default-active-opacity);
transition: var(--default-transition-duration);
}
.nav-links {
display: flex;
align-items: center;
list-style: none;
text-decoration : none;
margin: 0;
padding: 0;
}
.header-link {
margin: 20px 20px;
@media (max-width: 768px) {
margin: 10px 20px;
}
}
/* La technique JS de vérifier la hauteur des mots ne marche pas correctement dans la v. Anglaise :
en effet, les liens ne comportent qu'un seul mot (d'à peu près le même nombre de lettres) :
la hauteur est presque toujours la même.*/
.nav-links li a {
color: var(--header-link-color);
text-decoration: none;
/* Ajout pour éviter que les longs mots ne débordent du menu de navigation (pour aider pour le JS)
En fait ça marche pas... */
word-wrap: break-word;
overflow-wrap: break-word;
font: bold var(--font-size-130) var(--font-family-base);
@media (max-width: 768px) {font: normal var(--font-size-140) var(--font-family-base);}
}
.nav-links li a:active, .nav-links li a:focus, .nav-links li a:hover {
color : var(--header-link-hover-color);
}
.nav-links li a:active, .nav-links li a:focus {
text-decoration: underline;
}
.nav-links-other {
color: var(--header-link-color);
text-decoration: none;
font-weight: bold;
}
.nav-links-other:link {
color: var(--header-link-color);
text-decoration: none;
}
.nav-links-other:visited {
color: var(--header-link-color);
text-decoration: none;
}
.nav-links-other:active, .nav-links-other:focus, .nav-links-other:hover {
color : var(--header-link-hover-color);
}
.nav-links-other:active, .nav-links-other:focus {
text-decoration: underline;
}
/*### LANGUAGE ###*/
.btn-container {
display: table-cell;
vertical-align: middle;
text-align: center;
cursor: var(--cursor-pointer);
/*On agrandit le bouton pour les écrans tactiles*/
@media (max-width: 768px) {
transform: scale(1.2);
}
}
.header-language {
margin-right: 0px;
@media (max-width: 768px) {
margin: 20px 0px;
}
}
/*######### Bouton switch mode Français/English #########*/
.btn-color-mode-switch {
display: inline-block;
margin: 0px;
position: relative;
cursor: var(--cursor-pointer);
@media (max-width: 768px) {margin-left: 15px;}
}
.btn-color-mode-switch > label.btn-color-mode-switch-inner {
margin: 0px;
width: 100px;
height: 40px;
background-color: #957c00;
border-radius: 26px;
overflow: hidden;
position: relative;
transition: all 0.3s ease;
display: block;
cursor: var(--cursor-pointer);
}
.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
content: attr(data-on);
position: absolute;
font-size: 20px;
font-weight: 600;
top: 7px;
right: 14px;
color: var(--secondary-onDark-text-color);
cursor: var(--cursor-pointer);
}
.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
content: attr(data-off);
width: 50px;
height: 25px;
background-color: #ffea81;
border-radius: 100px;
position: absolute;
font-size: 20px;
display: flex;
justify-content: center;
left: 2px;
top: 2.5px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0px 0px 6px -2px var(--default-sticky-shadow-color);
padding: 5px 0px;
color: #111;
font-weight: 600;
cursor: var(--cursor-pointer);
}
.btn-color-mode-switch input[type="checkbox"] {
width: 70px;
height: 25px;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
margin: 0px;
cursor: var(--cursor-pointer);
}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner {
background-color: #ffea81;
cursor: var(--cursor-pointer);
}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
content: attr(data-on);
left: 48px;
cursor: var(--cursor-pointer);
background-color: #957c00;
color: var(--secondary-onDark-text-color);
}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
content: attr(data-off);
right: auto;
left: 15px;
cursor: var(--cursor-pointer);
color: #111;
}
/*######### Social medias #########*/
.header-social-media {
margin: 15px 5px;
@media (max-width: 768px) {margin: 15px 5px 0px 15px;}
}
.header-social-media a {
display: flex;
align-items: center;
}
.socialNet_link {
transition: var(--default-transition-duration);
}
.socialNet_link:hover {
border-radius: var(--default-medium-border-radius);
box-shadow: 5px 10px 20px var(--dynamic-shadow-color);
transition: var(--default-transition-duration);
}
.socialNet_link:active, .socialNet_link:focus {
border-radius: 15px;
box-shadow: 5px 10px 20px var(--dynamic-shadow-color);
transition: var(--default-transition-duration);
opacity: var(--default-active-opacity);
}
.header-link-YT {
width: 45px;
height: 45px;
}
.header-link-Insta {
width: 37px;
height: 37px;
}
.txt-social-media {
font: bold var(--font-size-130) var(--font-family-base);
margin-top: 5px;
}
.header-social-media-text {
display: none;
margin-left: 10px;
}
/*######### Styles pour les écrans plus petits (RESPONSIVE) #########*/
.logo-mobile {
display: none;
margin-right: 30%;
}
.logo-mobile a {
display: flex;
align-items: center;
}
.nav-links.mobile {
display: none; /* Enlevé lors du clic sur le hamburger (".active") */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--hamburger-background-color);
flex-direction: column;
display: none;
z-index: var(--z-index-nav-links-mobile);
overflow-y: scroll;
padding: 20px;
align-items: unset;
}
.hamburger {
display: none;
background: none;
border: none;
cursor: var(--cursor-pointer);
position: relative;
margin-right: 20px;
width: 30px;
height: 45px;
z-index: var(--z-index-hamburger); /* Assurez-vous que le bouton est au-dessus du menu */
}
/* Rend le hamburger visible lorsque la largeur est assez petite (JS) */
.hamburger.mobile {
display: block;
}
.hamburger-line {
width: 30px;
height: 3px;
background-color: var(--hamburger-line-color);
margin: 6px 0; /* 6px correspond au top et au bottom */
transition: var(--default-transition-duration);
}
.header_pipe.mobile {
border: solid var(--header-pipe-color) 1.5px;
border-radius: var(--default-medium-border-radius);
margin: 10px 5px;
}
.header-social-media-text.mobile {
display: block;
}
/*### Utilisés lors du clic sur le hamburger ###*/
.nav-links.active {
display: flex;
}
body.no-scroll {
overflow: hidden;
}
/* Transforme le hamburger en croix lors du clic */
.hamburger.active .hamburger-line:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/*#### ####*/
/*################ ################*/
/* ~~ Informations de mise en page. ~~
1) La marge intérieure n'est placée qu'en haut et/ou en bas de la div. Les éléments à l'intérieur de cette div posséderont une marge intérieure sur les côtés. Vous évitez ainsi de devoir recourir à des « calculs de modèle de boîte ». N'oubliez pas que si vous ajoutez une marge intérieure latérale ou une bordure à la div proprement dite, elle sera ajoutée à la largeur que vous définissez pour créer la largeur totale. Vous pouvez également supprimer la marge intérieure de l'élément dans la div et placer une seconde div à l'intérieur, sans largeur et possédant une marge intérieure appropriée pour votre concept.
*/
.content {
padding: 10px 0;
}
/* ~~ Ce sélecteur groupé donne de l'espace aux listes dans la zone .content ~~ */
.content ul, .content ol, .content-login ul, .content-login ol {
padding: 0 15px 15px 40px; /* cette marge intérieure reflète la marge intérieure droite dans les en-têtes et la règle de paragraphe ci-dessus. Une marge intérieure a été placée en bas, afin d'assurer un espace entre les autres éléments des listes, et à gauche pour créer le retrait. Vous pouvez les régler comme bon vous semble. */
@media (max-width: 768px) {
font: var(--font-size-110) var(--font-family-base);
}
}
/* ~~ classes flottant/effacement diverses ~~ */
.fltrt { /* cette classe peut servir à faire flotter un élément depuis la droite sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
float: right;
margin-left: 8px;
}
.fltlft { /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* cette classe peut être placée sur une div
ou vide, en tant qu'élément final suivant la dernière div flottante (dans le #container) si le paramètre #footer est supprimé ou retiré du #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*######################### Boutons animés ##########################*/
.btn, .no-btn {
display: inline-block; /* >>> Compact par défaut <<< */
max-width: 100%; /* n’excède jamais le conteneur */
box-sizing: border-box; /* padding inclus dans la largeur */
white-space: normal; /* autorise les retours à la ligne */
word-wrap: break-word; /* permet les coupures de mots longues */
text-align: center; /* centre le texte à l'intérieur */
vertical-align: middle; /* aligne proprement dans le flux */
-webkit-border-radius: var(--button-border-radius);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
background: var(--button-background-color);
text-decoration: none;
padding: var(--button-padding);
margin-top: 0;
border: none;
transition: var(--default-transition-duration);
font: var(--button-font-size) var(--font-family-base);
@media (max-width: 768px) {
border-radius: var(--button-border-radius);
margin-top: auto;
}
}
/* Met le cursor en pointer sur les classes .btn et .no-btn si la classe est appliquée à un input ou un bouton */
button.btn,
input.btn, span.btn, span.no-btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn,
button.no-btn,
input.no-btn,
input[type="button"].no-btn,
input[type="submit"].no-btn,
input[type="reset"].no-btn {
cursor: var(--cursor-pointer);
@media (max-width: 900px) {
margin-bottom: 15px;
}
}
.btn:link, .no-btn:link {
color: var(--button-text-color);
text-decoration: none;
padding: var(--button-padding);
margin-top: 0;
font: var(--button-font-size) var(--font-family-base);
}
.btn:hover, .no-btn:hover {
color: var(--button-text-color);
background: var(--button-hover-background-color);
text-decoration: none;
box-shadow: 5px 6px 20px var(--dynamic-shadow-color);
transition: var(--default-transition-duration);
font: var(--button-hover-font-size) var(--font-family-base);
}
.btn:active, .no-btn:active {
color: var(--button-text-color);
background: var(--button-hover-background-color);
border: solid var(--button-hover-background-color) 2px;
padding: var(--button-active-padding);
text-decoration: none;
transition: var(--default-transition-duration);
font: var(--button-hover-font-size) var(--font-family-base);
}
.btn:visited, .no-btn:visited {
color: var(--button-text-color);
padding: var(--button-padding);
text-decoration: none;
margin-top: 0;
transition: var(--default-transition-duration);
font: var(--button-font-size) var(--font-family-base);
}
.btn img, .no-btn img { /*Ce style s'applique à l'icône "download" des boutons download (seuls concernés)*/
width: 18px;
}
.no-btn { /* Variante du bouton normal, mais pour dire NON (background blanc pour pas donner envie de cliquer #manipulation) */
background-color: var(--no-btn-background-color);
color: var(--no-btn-text-color);
border: solid var(--button-background-color) 2px;
}
.no-btn:hover {
background-color: #c1c1c1;
color: var(--no-btn-text-color);
}
.no-btn:active {
background-color: #a9a9a9;
color: var(--no-btn-text-color);
border-color: var(--button-background-color);
}
/* Generic icon-only action button (supports and