/* Déclaration des variables */
:root {
--primary-color: #CC0000;
--secondary-color: #CCCCCC;
--background-color: #000000;
--text-color: #999999;
--border-color: #202020;
--border-radius: 16px;
--font-family: 'Oxygen', Roboto, Arial, sans-serif;
--link-color: #0066EE;
/* Hauteur du pied de page, qui est en position:fixed au-dessus de 768 px.
   MESUREE dans le navigateur, de 769 a 1920 px de large : 129 px, stable
   (la page est plafonnee a 800 px, le menu ne se reorganise donc pas).
   Elle sert de reserve sous le contenu, voir « main » plus bas.
   A REMESURER si on ajoute ou retire une entree au menu du pied. */
--pied-h: 129px;
}

html, body {
	max-width: 800px;
    height: 100%;
	margin: 0 auto;
}

/* Bordures rouges fixes visibles au scroll */
body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    border-left: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    pointer-events: none;
    z-index: 100;
    box-sizing: border-box;
}

/* Réglages généraux */
body {
    display: flex;
    flex-direction: column;
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	padding: 0 8px 64px;
	box-sizing: border-box;
}

.site-brand {
	text-align: left;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.lang-switch {
	margin-left: auto;
	font-size: 0.85em;
	line-height: 1;
	color: var(--text-color);
}

.lang-switch a {
	color: var(--link-color);
}

.site-name {
	text-align: left;
	font-size: 1em;
}

.site-name a {
	font-size: 1em;
}

.site-tagline {
	font-size: 0.9em;
}

.fr-note {
  color: var(--link-color);
	font-weight: bold;
}

h1 {
	font-size: 1.4em;
  margin-left: 16px;
  text-align: left;
  color: var(--primary-color);
  font-weight: bold;
}

h2, h3, h4, h5, h6 {
  text-align: center;
}

main, header, footer {
  text-align: center;
}

main {
    flex: 1 0 auto;
	padding-top: 24px;
    /* Reserve sous le contenu, pour que le pied FIXE ne le recouvre pas.
       Les 42 px codes ici a l'origine ne correspondaient plus a la hauteur du
       pied : celui-ci en fait 129, donc les 59 derniers pixels de chaque page
       passaient sous le menu — invisible tant qu'aucune page ne descendait
       assez bas, et devenu flagrant sur les pages legales, dont le « Voir
       aussi » disparaissait entierement.
       Ne pas ecrire un nombre en dur ici : passer par --pied-h, qui porte la
       hauteur mesuree, et qu'il suffit de mettre a jour en un seul endroit. */
    padding-bottom: calc(var(--pied-h) + 16px);
}

header {
	background-color: var(--background-color);
	border-bottom: 1px solid var(--border-color);
	width: 100%;
	max-width: 800px;
	padding: 8px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-sizing: border-box;
}

footer {
	background-color: var(--background-color);
	border-top: 1px solid var(--border-color);
	width: 100%;
	max-width: 800px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-sizing: border-box;
    padding: 16px 8px 8px;
	margin: 0;
}

p {
	text-align: justify;
	margin: 16px 8px;
	line-height: 1.5;
}

/* Styles des liens */
a {
  color: var(--secondary-color);
  text-decoration: none;
  font-size: 1.3em;
  font-weight: bold;
}

/* Styles des liens au survol */
a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

/* Focus visible pour accessibilité clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* Skip-to-content link */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 8px 16px;
  background: var(--primary-color);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
}

.skip-to-content:focus {
  left: 0;
}

img {
	width: 60%;
	max-width: 400px;
	height: auto;
	object-fit: cover;
	margin: 16px auto;
	display: block;
}

hr {
	width: 80%;
	border: 1px solid var(--primary-color);
	margin: 32px auto;
}

nav {
	margin: 0px;
	padding: 0px;
}

nav ul {
	background-color: rgba(128, 0, 0, 0.8);
	border: 2px solid var(--primary-color);
  	border-radius: var(--border-radius);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 6px 0;
    margin: 0;
}

nav ul li {
    font-size: 0.6em;
    list-style-type: none;
    flex: 1 1 24%;
}

nav ul li a {
    display: block;
    padding: 2px;
    text-decoration: none;
	color: var(--secondary-color);
    text-align: center;
	text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
	transition: background-color 0.4s;
}

nav ul li a:hover {
    background-color: var(--border-color);
  	border-radius: var(--border-radius);
}

nav ul li a.active {
    color: var(--primary-color);
    background-color: var(--background-color);
  	border-radius: var(--border-radius);
}

.music iframe {
	width: 100%;
	max-width: 560px;
	height: 315px;
	border: 0;
	margin-bottom: -4px;
	filter: saturate(0);
}

.first, .karma, .intro, .jff, .sff, .t4f, .twitter, .bluesky, .recon, .music, .pinterest, .tariss, .last, .contact {
	margin: 0 auto 60px;
	border: 1px solid var(--border-color);
	padding: 4px 8px 24px;
}

.first, .last {
  text-align: center;
}

/* Styles des titres */
.intro h2 {
  color: var(--primary-color);
  text-align: left;
  margin-left: 8px;
}

.music p {
	font-size: 0.9em;
}

.enjoy {
  font-weight: bold;
  margin: auto;
  color: var(--primary-color);
  text-align: center;
  padding: 16px;
  font-size: 1.3em;
}

.karma {
  font-size: 1.1em;
  margin: 32px auto;
  width: 96%;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background-color: #101010;
}

.karma div p {
  margin: 32px 16px;
}

.karma-exemple {
  margin: 8px 64px;
  color: #FFFFFF;
  font-style: italic;
}

.karma a {
  font-size: 1em;
  color: var(--link-color);
}

h2, .love, .promo {
	color: var(--primary-color);
	font-weight: bolder;
	text-align: center;
}

.promo {
  font-size: 1em;
}

.center a {
  font-size: 0.9em;
	text-align: center;
  color: var(--primary-color);
}

.right {
  color: var(--secondary-color);
  text-align: right;
  margin: 8px;
}

.end {
	text-align: center;
  font-size: 1.6em;
  padding: 16px 0;
}

.redframe, .qrcode {
	height: auto;
	border: 2px solid var(--primary-color) ;
  	border-radius: var(--border-radius);
	overflow: hidden;
}

.qrcode_container {
  position: relative;
  display: inline-block;
}

.qrcode_container img {
  filter: grayscale(100%); /* Convertit l'image en noir et blanc */
}

.qrcode_container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color); /* Couleur de la teinte */
  mix-blend-mode: multiply; /* Mode de fusion pour appliquer la teinte */
  opacity: 1; /* Ajustez l'opacité pour contrôler l'intensité de la teinte */
}

.logo {
	width: 40%;
	max-width: 300px;
	height: auto;
	object-fit: cover;
	margin: 32px auto;
}

.largesize {
	width: 65%;
	max-width: 500px;
	height: auto;
	object-fit: cover;
}

.smallsize {
	width: 40%;
	max-width: 320px;
	height: auto;
	object-fit: cover;
}

.discount {
	width: 35%;
	max-width: 280px;
	height: auto;
	object-fit: cover;
}

.warning {
	color: var(--link-color);
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
}

/* ——— Tablette (<=768px) ——— */
@media only screen and (max-width: 768px) {
html, body {
	max-width: 98%;
}

body::before {
	max-width: 98%;
}

header, footer {
	position: static;
	max-width: 100%;
	width: 100%;
	left: auto;
	transform: none;
}

main {
	padding-top: 8px;
	padding-bottom: 8px;
}

.hub-links {
	width: 80%;
}
}

/* ——— Mobile (<=600px) ——— */
@media only screen and (max-width: 600px) {

h1 {
	font-size: 1em;
}

p {
	font-size: 0.9em;
	margin: 8px 8px;
}

a {
	font-size: 1.2em;
}

nav ul li a {
	padding: 8px 2px;
}

img {
	margin: 8px auto;
}

.first, .karma, .intro, .jff, .sff, .t4f, .twitter, .bluesky, .recon, .music, .pinterest, .tariss, .last, .contact {
	margin: 0 auto 40px;
	padding: 4px 4px 16px;
}

.music iframe {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.logo, .largesize, .smallsize, .discount {
	width: 90%;
}

.enjoy {
	padding: 16px;
}

.warning {
	font-size: 0.9em;
}

.end {
	font-size: 1em;
}

.hub-links {
	width: 90%;
}
}

/* ——— Très petit écran (<=380px) ——— */
@media only screen and (max-width: 380px) {
.end {
	font-size: 0.8em;
}

nav ul li {
	flex: 1 1 32%;
}
}
.center {
	text-align: center;
}


li {
	list-style-type: decimal;
}

.numbers li {
	list-style-type: decimal;
}

.hub-links {
	width: 64%;
	margin: auto;
}

.hub-links li {
	text-align: left;
	margin-left: 16% ;
}


.title {
	margin: 0.4rem auto -0.8rem;
}

.numbers {
	width: 88%;
}

strong {	
    color: var(--primary-color);
}


/* ---------------------------------------------------------------------------
   Façade vidéo (music.php) — ajoutée le 03/08/2026 avec la mise en conformité.
   Une iframe YouTube insérée directement dans la page contacte Google dès
   l'ouverture, même si personne ne lance la vidéo : l'adresse IP du visiteur
   part alors sans qu'il ait rien décidé. On n'affiche donc qu'une vignette
   servie depuis le site, et l'iframe n'est injectée qu'au clic.
   Volontairement sans <link rel="preconnect"> : une préconnexion déclenchée
   au survol ouvrirait une connexion vers Google avant tout clic et démentirait
   la mention affichée sous la vignette. Coût : ~150 ms au démarrage.
--------------------------------------------------------------------------- */
.facade-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.facade-video img {
	display: block;
	width: 100%;
	height: auto;
}

.facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.4rem;
	height: 3.1rem;
	border-radius: 0.7rem;
	background: rgba(204, 0, 0, 0.85);
	color: #FFFFFF;
	font-size: 1.6rem;
	line-height: 3.1rem;
	text-align: center;
	pointer-events: none;
}

.facade-video:hover .facade-play,
.facade-video:focus-visible .facade-play {
	background: var(--primary-color);
}

.facade-note {
	display: block;
	padding: 0.5rem 0.7rem;
	background: var(--background-color);
	color: var(--text-color);
	font-size: 0.78em;
	line-height: 1.4;
	text-align: center;
}


/* ---------------------------------------------------------------------------
   Pages légales (mentions légales, confidentialité) — 03/08/2026.
   Texte long : on aère, on aligne à gauche (le centrage du reste du site est
   illisible sur un paragraphe juridique), et on force les tableaux à défiler
   dans leur propre cadre plutôt que de faire déborder la page en mobile.
--------------------------------------------------------------------------- */
.legal {
	text-align: left;
	line-height: 1.65;
}

.legal h1, .legal h2 {
	text-align: left;
}

.legal h2 {
	margin-top: 2.2rem;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.3rem;
}

.legal ul {
	width: auto;
	margin-left: 0;
	padding-left: 1.4rem;
	text-align: left;
	list-style-type: disc;
}

.legal li {
	margin-left: 0;
	text-align: left;
	margin-bottom: 0.4rem;
}

.legal .tableau {
	overflow-x: auto;                /* le tableau défile, pas la page */
	margin: 1rem 0;
}

.legal table {
	border-collapse: collapse;
	width: 100%;
	min-width: 30rem;
	font-size: 0.92em;
}

.legal th, .legal td {
	border: 1px solid var(--border-color);
	padding: 0.5rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

.legal th {
	color: var(--secondary-color);
	background: rgba(120, 0, 0, 0.18);
}

.legal .maj {
	color: var(--text-color);
	font-size: 0.85em;
	font-style: italic;
}

/* Liens légaux du pied de page. Volontairement neutres : ils héritent de la
   couleur du texte environnant et n'imposent aucun fond, ce qui leur permet de
   se fondre aussi bien dans le pied de page principal que dans celui, tout
   différent, de /a-dispo/. */
/* Les deux liens legaux ferment le menu, sur une derniere ligne pleine
   largeur. Ils sont dans le <ul> de la nav : ils heritent donc du fond, du
   survol et de l'etat actif des autres entrees, sans rien reecrire.

   flex-basis 50 % : a eux deux ils remplissent exactement la rangee.
   Le <li class="nav-saut"> qui les precede a une base de 100 % et une hauteur
   nulle : il force le retour a la ligne quel que soit le nombre d'entrees
   au-dessus. Sans lui, decommenter une entree du menu suffirait a faire
   remonter « Mentions legales » sur la rangee precedente.

   La taille est posee sur le <li>, JAMAIS sur le <a> : la feuille porte une
   regle globale « a { font-size: 1.3em } » (1.2em sous le point de rupture
   mobile) qui multiplie une seconde fois. En reglant le li, les liens legaux
   et ceux du menu subissent exactement le meme multiplicateur et le rapport
   ecrit ici est celui qu'on voit. MESURE dans le navigateur : 10,8 px pour les
   liens legaux contre 12,5 px pour les entrees du menu. */
nav ul li.nav-saut {
	flex: 0 0 100%;
	height: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav ul li.nav-legal {
	flex: 1 1 50%;
	font-size: 0.52em;
	margin-top: 5px;
	padding-top: 4px;
	border-top: 1px solid rgba(204, 0, 0, 0.4);
}

.legal-links a:hover,
.legal-links a:focus-visible {
	color: var(--primary-color);
}