/* ==========================================================================
   Fansite Elias — style « années 90 » bien kitsch, mais responsive.
   ========================================================================== */

:root {
  --nuit: #0b0b3b;
  --violet: #4b0082;
  --rose: #ff00cc;
  --cyan: #00ffff;
  --jaune: #ffff00;
  --vert: #00ff66;
  --gris: #c0c0c0;
  --gris-clair: #dfdfdf;
  --gris-fonce: #808080;
  --bleu-titre: #000080;
  --papier: #fffbe6;
  --encre: #111;
  --lien: #0000ee;
  --lien-vu: #551a8b;
  --police: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive, sans-serif;
  --police-titre: Impact, "Arial Black", "Haettenschweiler", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.5;
  background-color: var(--nuit);
  /* Ciel étoilé en mosaïque */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='1'/%3E%3Ccircle cx='70' cy='40' r='1.4'/%3E%3Ccircle cx='130' cy='12' r='.8'/%3E%3Ccircle cx='40' cy='90' r='.9'/%3E%3Ccircle cx='110' cy='80' r='1.2'/%3E%3Ccircle cx='150' cy='130' r='.8'/%3E%3Ccircle cx='20' cy='145' r='1.3'/%3E%3Ccircle cx='85' cy='125' r='.7'/%3E%3C/g%3E%3Cpath fill='%23ff0' d='M100 100l2 5 5 .5-4 3 1.5 5-4.5-3-4.5 3 1.5-5-4-3 5-.5z'/%3E%3Cpath fill='%230ff' d='M30 50l1.2 3 3 .3-2.4 1.8.9 3-2.7-1.8-2.7 1.8.9-3-2.4-1.8 3-.3z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, #2a0a5e 0%, var(--nuit) 70%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; }

a { color: var(--lien); }
a:visited { color: var(--lien-vu); }
a:hover { color: var(--rose); background: var(--jaune); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px dashed var(--rose);
  outline-offset: 2px;
}

.evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--jaune); padding: .5em 1em; z-index: 10;
}
.evitement:focus { left: 1em; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Mise en page ---------- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-areas: "entete entete" "menu contenu" "pied pied";
  gap: 14px;
}
.entete { grid-area: entete; min-width: 0; }
.menu, .pied { min-width: 0; }
.menu { grid-area: menu; align-self: start; }
.contenu { grid-area: contenu; min-width: 0; }
.pied { grid-area: pied; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "entete" "menu" "contenu" "pied";
    padding: 8px;
  }
}

/* ---------- En-tête ---------- */

.entete { text-align: center; padding: 14px 0 0; }

.logo { text-decoration: none; display: inline-block; }
.logo:hover { background: none; }

.logo-texte {
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  letter-spacing: .04em;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff700 0%, #ff9900 45%, #ff0066 55%, #cc00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  filter: drop-shadow(3px 3px 0 #00ffff) drop-shadow(5px 5px 0 #000);
  display: inline-block;
  animation: flotte 3s ease-in-out infinite;
}
.petit-logo { font-size: 2rem; animation: none; }

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

.sous-titre {
  margin: .4em 0 .8em;
  color: var(--cyan);
  font-style: italic;
  text-shadow: 2px 2px 0 #000;
}

.defilant {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  background: #000;
  color: var(--vert);
  border: 3px ridge var(--gris);
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  padding: 4px 0;
}
.defilant span {
  display: inline-block;
  min-width: 100%;
  padding-left: 100%;
  animation: defile 22s linear infinite;
}
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---------- Fenêtres façon Windows 95 ---------- */

.fenetre, .menu {
  background: var(--gris);
  border: 2px solid;
  border-color: #fff var(--gris-fonce) var(--gris-fonce) #fff;
  box-shadow: 1px 1px 0 #000, 6px 6px 0 rgba(255, 0, 204, .55);
  margin: 0 0 18px;
  padding: 3px;
}

.fenetre-titre {
  margin: 0;
  padding: 3px 8px;
  font-family: Tahoma, Verdana, "MS Sans Serif", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, var(--bleu-titre), #1084d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fenetre-titre::after {
  content: "_ □ ×";
  font-family: Tahoma, sans-serif;
  letter-spacing: .2em;
  font-size: .8em;
  background: var(--gris);
  color: #000;
  padding: 0 4px;
  border: 2px solid;
  border-color: #fff var(--gris-fonce) var(--gris-fonce) #fff;
  flex-shrink: 0;
}

.fenetre-corps {
  background: var(--papier);
  border: 2px solid;
  border-color: var(--gris-fonce) #fff #fff var(--gris-fonce);
  margin-top: 3px;
  padding: 14px 18px;
}
.fenetre-corps > :first-child { margin-top: 0; }
.fenetre-corps > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .fenetre-corps { padding: 12px; }
}

h1, h2, h3 { line-height: 1.2; }
.fenetre-corps h3 {
  font-family: var(--police-titre);
  font-weight: normal;
  font-size: 1.5rem;
  color: var(--violet);
  text-shadow: 2px 2px 0 var(--jaune);
  margin: 1.2em 0 .5em;
}

/* ---------- Menu ---------- */

.menu ul { list-style: none; margin: 6px 0; padding: 0 4px; display: grid; gap: 6px; }
.menu-deco { text-align: center; padding: 8px 4px 4px; }

@media (max-width: 760px) {
  .menu ul { grid-template-columns: 1fr 1fr; }
  .menu-deco { display: none; }
}

.bouton-90 {
  display: inline-block;
  font-family: Tahoma, Verdana, "MS Sans Serif", sans-serif;
  font-size: .95rem;
  color: #000 !important;
  text-decoration: none;
  background: var(--gris);
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 var(--gris-fonce), inset 1px 1px 0 var(--gris-clair);
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1.3;
  margin: 2px 0;
}
.menu .bouton-90 { display: block; text-align: left; font-weight: bold; }
.bouton-90:hover { background: var(--gris-clair); color: var(--bleu-titre) !important; }
.bouton-90:active, .bouton-90.actif {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 var(--gris-fonce);
  background: #b5b5b5;
}
.bouton-90.actif { background: var(--jaune); }
.bouton-90.gros { font-size: 1.05rem; padding: 8px 16px; font-weight: bold; }
.bouton-90.danger { color: #a00000 !important; }

/* ---------- Décos kitsch ---------- */

.badge-construction {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: .85rem;
  letter-spacing: .05em;
  padding: 6px 10px;
  color: #000;
  background: repeating-linear-gradient(-45deg, var(--jaune) 0 10px, #000 10px 20px);
  border: 2px solid #000;
  text-shadow: 0 0 3px var(--jaune), 0 0 3px var(--jaune), 0 0 3px var(--jaune);
}
.badge-construction.grand { display: block; text-align: center; font-size: 1.4rem; margin: 1em auto; max-width: 340px; }

.clignote { animation: clignote 1s steps(2, start) infinite; color: var(--rose); font-weight: bold; }
@keyframes clignote { to { visibility: hidden; } }

hr.arc-en-ciel {
  border: 0;
  height: 6px;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red);
  background-size: 200% 100%;
  animation: arc 4s linear infinite;
}
@keyframes arc { to { background-position: -200% 0; } }

.centre { text-align: center; }
.petit { font-size: .82em; }
.alerte { color: #c00000; font-weight: bold; }
.sans-puce { list-style: none; margin: 0; padding: 0; }

/* ---------- Messages ---------- */

.message {
  border: 3px double #000;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-weight: bold;
}
.message-ok { background: #ccffcc; }
.message-ok::before { content: "✔ "; }
.message-erreur { background: #ffcccc; }
.message-erreur::before { content: "⚠ "; }

/* ---------- Étoiles ---------- */

.etoiles {
  position: relative;
  display: inline-block;
  color: #9a9a9a;
  white-space: nowrap;
  letter-spacing: .05em;
  line-height: 1;
  font-family: Arial, sans-serif;
}
.etoiles-pleines {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  overflow: hidden;
  color: #ffb000;
  text-shadow: 0 0 1px #8a5a00;
}
.etoiles.grandes { font-size: 1.7rem; }
.etoiles-chiffre { font-weight: bold; white-space: nowrap; }
.pas-note { color: #666; font-style: italic; font-size: .9em; }

/* ---------- Listes d'albums ---------- */

.grille-cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
@media (max-width: 440px) {
  .grille-cartes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carte .etoiles { font-size: .85rem; }
}

.carte {
  background: #fff;
  border: 3px outset var(--gris);
  padding: 8px;
  display: flex;
  flex-direction: column;
  transition: transform .15s;
}
.carte:hover { transform: rotate(-1deg) scale(1.02); }
.carte-lien { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.carte-lien:hover { background: none; }
.carte-couv {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: #000;
  border: 2px inset var(--gris);
  overflow: hidden;
  margin-bottom: 6px;
}
.carte-couv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couv-vide {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--police-titre); font-size: 4rem; color: var(--jaune);
  background: repeating-linear-gradient(45deg, #300060 0 12px, #200040 12px 24px);
}
.couv-vide.grand { aspect-ratio: 3 / 4; font-size: 7rem; }
.nouveau {
  position: absolute; top: 6px; right: -4px;
  background: red; color: var(--jaune) !important;
  font-family: var(--police-titre); font-size: .9rem;
  padding: 1px 8px; transform: rotate(12deg);
  border: 2px solid var(--jaune);
}
.carte-num { font-size: .8rem; color: #555; text-transform: uppercase; letter-spacing: .05em; }
.carte-titre { font-weight: bold; font-size: 1.05rem; line-height: 1.25; text-decoration: underline; }
.carte-notes {
  margin: 8px 0 0;
  font-size: .85rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  align-items: baseline;
}
.carte-notes dt { font-weight: bold; color: var(--violet); }
.carte-notes dd { margin: 0; }

/* ---------- Fiche album ---------- */

.fil { margin: 0 0 10px; }
.fil a { color: var(--jaune); text-shadow: 1px 1px 0 #000; }
.fil a:hover { color: var(--rose); }

.fiche {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: 20px;
  align-items: start;
}
.fiche-couv img { display: block; width: 100%; border: 4px ridge var(--gris); box-shadow: 4px 4px 0 #000; }
@media (max-width: 600px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche-couv { max-width: 240px; margin: 0 auto; }
}

.tableau-90 {
  border-collapse: separate;
  border-spacing: 2px;
  border: 2px outset var(--gris);
  background: var(--gris);
  width: 100%;
  font-size: .95rem;
}
.tableau-90 th, .tableau-90 td {
  border: 1px inset var(--gris);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  background: #fff;
}
.tableau-90 th { background: #e8e0ff; color: var(--violet); white-space: nowrap; }
.tableau-90 thead th { background: var(--bleu-titre); color: #fff; }

.notes-resume { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.note-bloc {
  flex: 1 1 180px;
  background: #000;
  color: #fff;
  border: 3px ridge var(--rose);
  padding: 8px 12px;
  text-align: center;
}
.note-bloc p { margin: 0; }
.note-bloc .etoiles-chiffre { color: var(--jaune); }
.note-label { color: var(--cyan); font-weight: bold; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.note-bloc .pas-note { color: #bbb; }

.fenetre-critique .fenetre-corps {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='28'%3E%3Cline x1='0' y1='27.5' x2='10' y2='27.5' stroke='%23a8d0ff'/%3E%3C/svg%3E");
  line-height: 28px;
  border-left: 6px double #ff8080;
}
.signature { text-align: right; font-style: italic; }

/* ---------- Avis ---------- */

.avis-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.avis {
  background: #fff;
  border: 2px dashed var(--violet);
  padding: 8px 12px;
}
.avis p { margin: .3em 0; overflow-wrap: anywhere; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* ---------- Formulaires ---------- */

.formulaire-avis {
  background: #e8ffe8;
  border: 3px ridge var(--vert);
  padding: 12px 16px;
}
.formulaire-avis h3 { margin-top: 0; }

label { display: block; font-weight: bold; margin-bottom: 3px; }
label.case { display: inline-flex; gap: 6px; align-items: center; font-weight: normal; }

input[type="text"], input[type="password"], input[type="file"], textarea, select {
  width: 100%;
  font: inherit;
  font-family: "Courier New", Courier, monospace;
  padding: 6px 8px;
  background: #fff;
  border: 2px solid;
  border-color: var(--gris-fonce) #fff #fff var(--gris-fonce);
  box-shadow: inset 1px 1px 0 #000;
  color: #000;
}
input[type="file"] { font-family: var(--police); font-size: .9rem; }
textarea { resize: vertical; line-height: 1.45; }
input.court { max-width: 7em; }
input.moyen { max-width: 16em; display: inline-block; }
.aide { display: block; font-size: .8rem; color: #444; margin-top: 2px; }

fieldset {
  border: 2px groove var(--gris);
  margin: 0 0 12px;
  padding: 8px 12px;
}
legend { font-weight: bold; padding: 0 6px; color: var(--violet); }

.choix-etoiles { border: 0; padding: 0; margin: 0 0 8px; }
.choix-etoiles legend { padding: 0; color: inherit; margin-bottom: 3px; }
.etoiles-saisie {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}
.etoiles-saisie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etoiles-saisie label {
  font-size: 2.2rem;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  margin: 0;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 0 #000;
  transition: transform .1s;
}
.etoiles-saisie label:hover,
.etoiles-saisie label:hover ~ label,
.etoiles-saisie input:checked ~ label { color: #ffb000; }
.etoiles-saisie label:hover { transform: scale(1.2) rotate(-8deg); }
.etoiles-saisie input:focus-visible + label { outline: 3px dashed var(--rose); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Biographie & galerie ---------- */

.bio::after { content: ""; display: table; clear: both; }
.bio-portrait {
  float: right;
  width: min(42%, 300px);
  margin: 0 0 12px 18px;
  background: #fff;
  padding: 8px 8px 4px;
  border: 1px solid #999;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(2deg);
}
.bio-portrait img { display: block; width: 100%; }
.bio-portrait figcaption, .galerie-legende { font-size: .85rem; text-align: center; padding: 4px 0; }
@media (max-width: 560px) {
  .bio-portrait { float: none; width: auto; max-width: 280px; margin: 0 auto 16px; }
}

.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
}
.galerie li {
  background: #fff; padding: 6px 6px 2px; border: 1px solid #999;
  box-shadow: 3px 3px 0 #000;
}
.galerie li:nth-child(odd) { transform: rotate(-2deg); }
.galerie li:nth-child(even) { transform: rotate(1.5deg); }
.galerie-lien { display: block; }
.galerie-lien:hover { background: none; }
.galerie img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.visionneuse {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 40, .9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; color: #fff; text-align: center;
}
.visionneuse img { max-height: 80vh; max-width: 100%; border: 6px ridge var(--gris); }
.visionneuse p { margin: 10px 0 0; }
.visionneuse button { margin-top: 12px; }

/* ---------- Pied de page ---------- */

.pied { text-align: center; color: #fff; padding-bottom: 20px; }
.pied a { color: var(--cyan); }
.compteur { font-family: "Courier New", monospace; font-weight: bold; }
.compteur-chiffres { display: inline-flex; gap: 2px; vertical-align: middle; }
.compteur-chiffres span {
  background: #000; color: #ff3030; border: 1px solid #555;
  padding: 0 5px; font-size: 1.2rem; text-shadow: 0 0 4px #ff0000;
}
.badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.badge-88 {
  width: 88px; height: 31px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Verdana, sans-serif; font-size: 9px; line-height: 1.1;
  background: linear-gradient(#333, #000); color: #fff;
  border: 1px solid #888;
}
.badge-88 b { color: var(--jaune); }
.badge-net { background: linear-gradient(#036, #003); color: var(--cyan); }
.badge-or { background: linear-gradient(#fd0, #c60); color: #000; }
.badge-or b { color: #900; }

/* ---------- Administration ---------- */

.page-admin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "entete" "contenu"; max-width: 1200px; }
.admin-entete { grid-area: entete; text-align: center; padding-top: 8px; }
.admin-menu { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.admin .message { margin-bottom: 14px; }
.fenetre-etroite { max-width: 460px; margin: 30px auto; }
.formulaire p { margin: 0 0 12px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .deux-colonnes { grid-template-columns: 1fr; } }

.chiffres { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.chiffres li { background: #000; color: var(--vert); font-family: "Courier New", monospace; padding: 8px 14px; border: 3px ridge var(--gris); }
.chiffres b { font-size: 1.5rem; color: var(--jaune); }

.defile-x { overflow-x: auto; margin-bottom: 12px; }
.tableau-admin td { vertical-align: middle; }
.tableau-admin .actions { white-space: nowrap; }
.mini-couv { width: 52px; }
.mini-couv img { width: 44px; display: block; }
form.en-ligne { display: inline; }
.en-ligne-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.en-ligne-form label { margin: 0; }
.couv-actuelle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.couv-actuelle img { width: 110px; border: 2px solid #000; }
.boite-envoi { background: #eef; border: 2px dashed var(--bleu-titre); padding: 10px 12px; margin-bottom: 14px; }
.fil-ariane { font-family: "Courier New", monospace; font-weight: bold; }
.tableau-fichiers td:first-child { word-break: break-all; }

.photos-admin { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.photos-admin li { background: #fff; border: 2px outset var(--gris); padding: 8px; }
.photos-admin img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 6px; }
.photos-admin .actions { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- Pour celles et ceux qui n'aiment pas que ça bouge ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .defilant span { padding-left: 0; white-space: normal; }
  .defilant { white-space: normal; text-align: center; }
}

/* Liens posés directement sur le ciel étoilé (hors fenêtres) */
.contenu > p a, .contenu > p a:visited { color: var(--jaune); text-shadow: 1px 1px 0 #000; }
.contenu > p a:hover { color: var(--rose); }
.apercu-envoi { max-height: 220px; overflow: auto; background: #fff; border: 1px inset var(--gris); padding: 6px 6px 6px 24px; margin: 4px 0 8px; word-break: break-all; }
.zone-depot { text-align: center; border: 2px dashed var(--gris-fonce); padding: 10px; background: #fff; }
.boite-envoi.survol { background: #ffffcc; border-color: var(--rose); }