/* =====================================================================
   commun.css — styles partagés par TOUTES les pages du portfolio.
   1. Variables (couleurs, polices)   2. Base et textes
   3. Composants (étiquettes, boutons, cartes, barres d'XP, formulaire)
   4. Barre latérale                  5. Visionneuse d'images
   6. Accessibilité                   7. Mobile
   ===================================================================== */

/* Polices : Pixelify Sans (titres), Silkscreen (étiquettes et chiffres), Space Grotesk (texte).
   Elles sont chargées par une balise <link> dans le <head> de chaque page (plus rapide qu'un @import). */

/* ---------- 1. Variables : pour changer une couleur, c'est ici ---------- */
:root {
  --fond: #3a1a8c;                       /* fond de départ, ensuite piloté par le JS au défilement */
  --fond-carte: rgba(7, 7, 15, 0.38);    /* fond translucide des cartes */
  --bordure-douce: rgba(255, 255, 255, 0.16);
  --texte: #f5f1e6;
  --texte-secondaire: #cfcbe3;
  --noir: #07070f;
  --jaune: #ffd23f;
  --vert: #3ddc97;
  --rose: #ff5c8a;
  --bleu: #7fdcff;
  --accent: var(--jaune);                /* couleur d'action ; chaque thème de projet peut la remplacer */
  --police-titre: 'Pixelify Sans', 'Courier New', monospace;
  --police-pixel: 'Silkscreen', 'Courier New', monospace;
  --police-texte: 'Space Grotesk', system-ui, sans-serif;
  --largeur-barre: 360px;
  --ombre-dure: 6px 6px 0 var(--noir);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--fond);
  transition: background-color 0.25s linear;
  color: var(--texte);
  font-family: var(--police-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }
em { font-style: normal; color: var(--accent); }
p { max-width: 65ch; }
.texte-secondaire { color: var(--texte-secondaire); }
.pixel { font-family: var(--police-pixel); }

/* Lien « Aller au contenu » pour le clavier, invisible tant qu'il n'a pas le focus */
.lien-evitement { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--accent); color: var(--noir); padding: 0.6rem 1rem; font-family: var(--police-pixel); font-size: 0.75rem; }
.lien-evitement:focus { left: 1rem; top: 1rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Composants ---------- */

/* Étiquette style « NIVEAU 03 » */
.etiquette { display: inline-block; font-family: var(--police-pixel); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; border: 2px solid currentColor; line-height: 1.4; }
.etiquette--accent { color: var(--accent); }
.etiquette--vert { color: var(--vert); }
.etiquette--bleu { color: var(--bleu); }
.etiquette--rose { color: var(--rose); }

/* Bouton à ombre dure qui s'enfonce au clic */
.bouton { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--police-pixel); font-size: 0.85rem; font-weight: 700; padding: 0.85rem 1.4rem; background: var(--accent); color: var(--noir); border: 3px solid var(--noir); box-shadow: 4px 4px 0 var(--noir); text-decoration: none; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; white-space: nowrap; }
.bouton:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--noir); }
.bouton:active { transform: translate(4px, 4px); box-shadow: none; }
.bouton--secondaire { background: var(--fond-carte); color: var(--texte); border-color: var(--texte); box-shadow: 4px 4px 0 var(--texte); }
.bouton--secondaire:hover { box-shadow: 2px 2px 0 var(--texte); }
.bouton--petit { font-size: 0.72rem; padding: 0.55rem 0.9rem; }

/* Carte à bordure épaisse */
.carte { background: var(--fond-carte); border: 3px solid var(--texte); box-shadow: var(--ombre-dure); padding: 1.5rem; }
.carte--accent { border-color: var(--accent); box-shadow: 8px 8px 0 var(--accent); }

/* Barre d'XP : le remplissage se règle avec style="--niveau: 70%" */
.barre-xp { position: relative; height: 18px; background: var(--noir); border: 2px solid var(--texte); overflow: hidden; }
.barre-xp::after { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; width: calc(var(--niveau, 50%) - 4px); background: var(--vert); background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, 0.2) 10px 12px); }
.barre-xp--accent::after { background-color: var(--accent); }

/* Point vert qui clignote (« disponible ») */
.point-vert { display: inline-block; width: 9px; height: 9px; background: var(--vert); box-shadow: 0 0 8px var(--vert); animation: clignote 1.2s steps(2, start) infinite; vertical-align: middle; }
@keyframes clignote { to { visibility: hidden; } }

/* Boîte de dialogue façon RPG : le titre vient de data-titre="…" */
.boite-dialogue { position: relative; background: var(--fond-carte); border: 4px double var(--texte); padding: 1.5rem; }
.boite-dialogue::before { content: attr(data-titre); position: absolute; top: -0.9rem; left: 1rem; background: var(--noir); padding: 0 0.5rem; font-family: var(--police-pixel); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

/* Champs de formulaire */
.champ { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.champ label { font-family: var(--police-pixel); font-size: 0.72rem; letter-spacing: 0.04em; }
.champ input, .champ textarea { font: inherit; color: var(--texte); background: var(--noir); border: 2px solid var(--texte); padding: 0.7rem 0.9rem; }

/* ---------- 4. Barre latérale (injectée par js/barre-laterale.js) ---------- */
.page-avec-barre { padding-left: var(--largeur-barre); min-height: 100vh; }
.barre-laterale { position: fixed; left: 0; top: 0; bottom: 0; width: var(--largeur-barre); z-index: 60; background: rgba(10, 8, 20, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 3px solid var(--texte); }
.barre-laterale__bandeau { display: none; }
.barre-laterale__panneau { height: 100%; overflow: auto; padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.barre-laterale__avatar { position: relative; width: 96px; border: 3px solid var(--texte); box-shadow: 5px 5px 0 var(--accent); display: block; }
.barre-laterale__avatar img { aspect-ratio: 1; object-fit: cover; object-position: top; }
.barre-laterale__niveau { position: absolute; bottom: -0.7rem; right: -0.8rem; background: var(--accent); color: var(--noir); font-family: var(--police-pixel); font-size: 0.62rem; padding: 0.2rem 0.45rem; border: 2px solid var(--noir); }
.barre-laterale__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.barre-laterale__role { color: var(--texte-secondaire); font-size: 0.92rem; }
.barre-laterale__recherche { border: 3px solid var(--vert); background: rgba(61, 220, 151, 0.1); padding: 0.75rem 0.9rem; display: grid; gap: 0.45rem; justify-items: start; }
.barre-laterale__recherche-titre { font-family: var(--police-pixel); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert); display: flex; align-items: center; gap: 0.5rem; }
.barre-laterale__recherche-texte { font-size: 0.9rem; line-height: 1.45; }
.barre-laterale__jauge { font-family: var(--police-pixel); font-size: 0.62rem; display: flex; justify-content: space-between; margin: 0.2rem 0 0.25rem; }
.barre-laterale__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.barre-laterale__stats div { background: rgba(255, 255, 255, 0.05); border: 2px solid var(--bordure-douce); padding: 0.35rem 0.55rem; }
.barre-laterale__stats dt { font-family: var(--police-pixel); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); }
.barre-laterale__stats dd { font-size: 0.84rem; }
.barre-laterale__menu { border-top: 2px solid var(--bordure-douce); padding-top: 0.6rem; display: grid; gap: 0.05rem; }
.barre-laterale__menu a { font-family: var(--police-pixel); font-size: 0.7rem; text-decoration: none; padding: 0.36rem 0.6rem; display: flex; gap: 0.6rem; }
.barre-laterale__menu a::before { content: '▶' / ''; color: transparent; }
.barre-laterale__menu a:hover, .barre-laterale__menu a.actif { background: rgba(255, 255, 255, 0.09); }
.barre-laterale__menu a:hover::before, .barre-laterale__menu a.actif::before { color: var(--accent); }
.barre-laterale__bas { margin-top: auto; display: grid; gap: 0.55rem; }
.barre-laterale__bas > .bouton { justify-content: center; }
.barre-laterale__reseaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.barre-laterale__reseaux a { display: grid; justify-items: center; gap: 0.25rem; font-size: 0.78rem; padding: 0.5rem 0.3rem; border: 2px solid var(--bordure-douce); text-decoration: none; background: rgba(255, 255, 255, 0.04); }
.barre-laterale__reseaux a .pixel { font-size: 0.8rem; color: var(--accent); }
.barre-laterale__reseaux a:hover { border-color: var(--accent); }

/* ---------- 5. Visionneuse : image en grand au clic sur [data-agrandir] ---------- */
[data-agrandir] { cursor: zoom-in; }
.bouton-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; }
/* L'image ne réagit pas elle-même : c'est le bouton qui reçoit le clic, et on ne peut pas la « tirer » avec la souris */
.bouton-zoom img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.visionneuse { position: fixed; inset: 0; z-index: 100000; background: rgba(7, 7, 15, 0.94); display: grid; place-items: center; padding: 2rem; cursor: zoom-out; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: min(1200px, 100%); max-height: calc(100vh - 4rem); width: auto; border: 4px solid var(--texte); box-shadow: 10px 10px 0 var(--accent); }
.visionneuse__fermer { position: absolute; top: 1rem; right: 1rem; font-family: var(--police-pixel); font-size: 0.9rem; background: var(--accent); color: var(--noir); border: 3px solid var(--noir); box-shadow: 3px 3px 0 var(--noir); width: 2.6rem; height: 2.6rem; cursor: pointer; }

/* ---------- 6. Accessibilité ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .point-vert { animation: none; }
  .bouton { transition: none; }
}

/* ---------- 7. Mobile : la barre devient un bandeau en haut, le panneau se déplie ---------- */
@media (max-width: 1000px) {
  html { scroll-padding-top: 72px; }   /* les ancres (#contact…) s'arrêtent sous le bandeau */
  .page-avec-barre { padding-left: 0; padding-top: 64px; }
  /* Pas de flou ici : un backdrop-filter empêcherait le panneau « fixed » de prendre toute la hauteur */
  .barre-laterale { width: auto; right: 0; bottom: auto; border-right: 0; border-bottom: 3px solid var(--texte); background: rgba(10, 8, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Le bandeau fait toujours 64 px de haut (bordure comprise) : les textes trop longs sont tronqués */
  .barre-laterale__bandeau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0 0.8rem; height: 61px; overflow: hidden; }
  .barre-laterale__bandeau .bouton--petit { font-size: 0.62rem; padding: 0.45rem 0.6rem; }
  .barre-laterale__mini-avatar { width: 40px; aspect-ratio: 1; object-fit: cover; object-position: top; border: 2px solid var(--texte); }
  .barre-laterale__mini-nom { font-family: var(--police-titre); font-weight: 700; font-size: 0.95rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-laterale__mini-stage { font-family: var(--police-pixel); font-size: 0.6rem; line-height: 1.25; color: var(--vert); letter-spacing: 0.02em; }
  .barre-laterale__panneau { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; height: auto; background: #0b0b16; overflow: auto; }
  .barre-laterale--ouverte .barre-laterale__panneau { display: flex; }
  .barre-laterale__menu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bouton { white-space: normal; text-align: center; }
}