/* =========================================================
   POUDLARD RP — Écran de chargement
   Palette :
     --bg-deep    : #0a0e1a  (fond le plus sombre)
     --bg-panel   : #111a2e  (panneaux / footer)
     --gold       : #d4a656  (accent précieux, titres, liserés)
     --gold-light : #f0cf8a
     --blue-glow  : #4ecbff  (lueur magique froide)
     --violet     : #8b7cc7  (particules secondaires)
     --parchment  : #ece6d6  (texte principal clair)

   ---------------------------------------------------------
   CHANGELOG v1 -> v1.1 (passe de responsivité) :
   Le design visuel n'a PAS été modifié. Seuls le layout, les
   unités et les points de rupture ont été revus pour garantir
   un rendu propre sur toutes les résolutions et ratios
   (16:9, 21:9/32:9 ultrawide, 4K, PC portables, tablettes,
   petites hauteurs en mode paysage, etc.). Chaque changement
   important est commenté avec le préfixe "FIX:".
   ========================================================= */

:root{
  --bg-deep: #05070d;
  --bg-mid: #0a0f1c;
  --bg-panel: #111a2ecc;
  --gold: #d4a656;
  --gold-light: #f0cf8a;
  --blue-glow: #4ecbff;
  --violet: #8b7cc7;
  --parchment: #ece6d6;
  --parchment-dim: #b9b3a2;

  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body: 'Spectral', 'Georgia', serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  /* FIX: largeur de référence utilisée pour centrer/plafonner le footer
     sur les écrans très larges (21:9, 32:9, multi-écrans...) sans
     changer son apparence sur les résolutions normales. */
  --content-max-width: 1500px;

  /* FIX (retour capture d'écran réelle) : Garry's Mod affiche, tout en
     bas à droite de l'écran, une boîte native non désactivable
     ("Récupération des infos serveur…", progression, bouton Annuler)
     pendant la connexion — voir section 7 du README pour l'explication
     complète de pourquoi elle ne peut pas être supprimée en HTML/CSS/JS.
     Mesurée sur une capture en 1920px de large, elle occupe environ
     21-22% de la largeur de l'écran côté droit. On réserve donc ici une
     marge de sécurité proportionnelle (clamp en vw, avec un minimum et
     un maximum en px) pour qu'AUCUN élément de notre pied de page
     (icônes réseaux sociaux, texte "Nouveautés") ne se retrouve caché
     dessous, comme c'était le cas sur la capture fournie. Si la boîte
     native dépasse encore de cette marge sur votre résolution/DPI
     réelle, il suffit d'augmenter cette seule valeur. */
  --native-hud-safe-width: clamp(260px, 22vw, 460px);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, var(--bg-mid) 0%, var(--bg-deep) 70%);
  color: var(--parchment);
  font-family: var(--font-body);
  /* FIX: évite le rebond de défilement (trackpad/tactile) qui pourrait
     laisser entrevoir un fond blanc hors du panneau CEF. */
  overscroll-behavior: none;
}

/* FIX: sur les moteurs supportant les unités "dynamic viewport"
   (dvh), on affine la hauteur réelle disponible. Comme le CEF de
   GMod peut être basé sur un Chromium plus ancien qui ignore dvh,
   ceci reste une amélioration progressive : le "height:100%" ci-dessus
   sert de base garantie dans tous les cas. */
@supports (height: 100dvh){
  html, body{ height: 100dvh; }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Fond : canvas + vignette + grain ---------- */
#fx-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vignette{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.grain{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Layout principal ---------- */
.screen{
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* FIX: padding plafonné des deux côtés (avant : "3.2vh 4vw" pur,
     ce qui donnait des marges démesurées en 4K/ultrawide et des
     marges quasi nulles sur très petits écrans). clamp(min, idéal, max)
     conserve exactement le même rendu qu'avant sur un 16:9 classique
     (1080p/1440p) tout en bornant les extrêmes. */
  padding: clamp(14px, 3.2vh, 44px) clamp(16px, 4vw, 96px) 0;

  /* FIX: support des zones "safe area" (encoches / bords arrondis
     de tablettes) sans rien casser ailleurs, grâce à @supports. */

  /* FIX (filet de sécurité anti-débordement) : si jamais, sur un
     ratio ou une hauteur extrême non anticipée par les media queries
     ci-dessous, le contenu dépassait malgré tout de la hauteur
     disponible, on autorise un défilement interne invisible plutôt
     que de rogner silencieusement le bas de l'écran (comportement
     de "overflow:hidden" sur le body). La scrollbar est masquée pour
     ne pas altérer le design. */
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legacy */
}
.screen::-webkit-scrollbar{ display: none; } /* Chromium / CEF GMod */

@supports (padding: max(0px)){
  .screen{
    padding-left: max(clamp(16px, 4vw, 96px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 96px), env(safe-area-inset-right));
    padding-top: max(clamp(14px, 3.2vh, 44px), env(safe-area-inset-top));
  }
}

/* ---------- En-tête / blason ---------- */
.crest{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1vh;
  color: var(--gold);
  animation: fade-down 1.1s ease-out both;
  /* FIX: empêche un nom de serveur personnalisé très long (injecté
     via ?name=... côté Lua) de forcer un débordement horizontal. */
  max-width: 92vw;
}

.crest__flourish{
  /* FIX: largeur bornée aussi vers le bas (avant : pouvait descendre
     sous 100px sur mobile étroit, devenant à peine visible). */
  width: clamp(160px, 26vw, 320px);
  height: 28px;
  color: var(--gold);
  opacity: 0.85;
  flex-shrink: 0;
}
.crest__flourish--bottom{ display: none; }

.crest__emblem{ margin: .4rem 0 .2rem; filter: drop-shadow(0 0 10px rgba(78,203,255,.35)); }
.crest__logo{ width: 46px; height: 46px; }

.crest__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.35em;
  margin: 0.2rem 0 0.3rem;
  text-shadow: 0 0 22px rgba(212,166,86,0.35);
  /* FIX: centrage + retour à la ligne propre si le nom est long,
     au lieu d'un débordement/écrasement du reste de la mise en page. */
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100%;
}

.crest__subtitle{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  color: var(--parchment-dim);
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

/* ---------- Sceau de progression (élément signature) ---------- */
.seal-wrap{
  position: relative;
  margin-top: clamp(1.2rem, 3vh, 2.4rem);
  width: clamp(140px, 16vw, 210px);
  animation: fade-up 1.2s ease-out both;
  animation-delay: .15s;
  flex-shrink: 0;
}

.seal{ width: 100%; height: auto; overflow: visible; }

.seal__track{
  fill: none;
  stroke: rgba(212,166,86,0.15);
  stroke-width: 2;
}

.seal__progress{
  fill: none;
  stroke: url(#sigil-grad);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 540;
  stroke-dashoffset: 540; /* mis à jour en JS selon % */
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dashoffset .4s ease-out;
  filter: drop-shadow(0 0 6px rgba(78,203,255,.55));
}

.seal__sigil{ fill: none; stroke-width: 1.6; }
.sigil__path{
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .5s ease-out;
  filter: drop-shadow(0 0 4px rgba(240,207,138,.5));
}

.seal__percent{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--parchment);
}

/* ---------- Statut + barre de progression ---------- */
.status{
  margin: 1.4rem 0 0.8rem;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.08em;
  color: var(--parchment-dim);
  min-height: 1.4em;
  animation: fade-up 1.2s ease-out both;
  animation-delay: .25s;
  /* FIX: le statut peut recevoir un texte plus long selon le message
     réseau reçu — on centre et on autorise le retour à la ligne au
     lieu de laisser déborder horizontalement sur mobile étroit. */
  text-align: center;
  max-width: 90vw;
  padding: 0 0.5rem;
}

.progress-bar{
  position: relative;
  width: min(480px, 60vw);
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(212,166,86,0.25);
  animation: fade-up 1.2s ease-out both;
  animation-delay: .3s;
  flex-shrink: 0;
}

.progress-bar__fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--blue-glow) 100%);
  transition: width .4s ease-out;
}

.progress-bar__glow{
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  left: -40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: sweep 2.2s linear infinite;
}

@keyframes sweep{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(min(480px, 60vw) + 40px)); }
}

/* ---------- Pied d'écran : infos serveur ---------- */
.info-bar{
  margin-top: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 1.5rem;

  /* FIX: le padding horizontal grandit avec l'espace disponible au
     lieu de rester fixe, ce qui recentre le contenu du footer et
     empêche les blocs de s'écarteler sur les écrans très larges
     (21:9, 32:9, multi-écrans) tout en gardant le fond/la bordure
     en pleine largeur (design inchangé). */
  padding: 1rem clamp(1.6rem, calc((100% - var(--content-max-width)) / 2 + 1.6rem), 6rem);

  border-top: 1px solid rgba(212,166,86,0.2);
  background: linear-gradient(180deg, transparent, var(--bg-panel) 40%);
  backdrop-filter: blur(6px);
  animation: fade-up 1s ease-out both;
  animation-delay: .4s;
  flex-shrink: 0;
}

.info-block{ display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.info-block__label{
  font-family: var(--font-ui);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  opacity: 0.85;
}
.info-block__value{
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-block--ip .info-block__value{ font-weight: 600; letter-spacing: 0.02em; }

.socials{ display: flex; gap: 0.7rem; justify-self: end; flex-shrink: 0; }

/* FIX (retour capture d'écran réelle) : sur les largeurs où le footer
   est en 4 colonnes (repeat(3,1fr) auto — cf. règle .info-bar plus
   haut), on ajoute une marge de sécurité à droite pour dégager la zone
   où GMod dessine sa boîte native de connexion. En dessous de 900px,
   le footer passe déjà en grille 2 colonnes avec les icônes centrées
   en dessous (pas collées au bord droit), donc cette marge n'est plus
   nécessaire et n'est pas appliquée. */
@media (min-width: 901px){
  .info-bar{
    padding-right: calc(clamp(1.6rem, calc((100% - var(--content-max-width)) / 2 + 1.6rem), 6rem) + var(--native-hud-safe-width));
  }
}
.socials__link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(212,166,86,0.35);
  color: var(--gold-light);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.socials__link svg{ width: 16px; height: 16px; fill: currentColor; }
.socials__link:hover{
  background: rgba(212,166,86,0.15);
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(212,166,86,0.35);
}

/* ---------- Micro-animations d'entrée ---------- */
@keyframes fade-down{
  from{ opacity: 0; transform: translateY(-14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fade-up{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE — largeur (mise en page du footer)
   ========================================================= */

/* Tablettes / petits écrans larges : on repasse à 2 colonnes et on
   masque la news (comportement d'origine, conservé). */
@media (max-width: 900px){
  .info-bar{ grid-template-columns: 1fr 1fr; }
  .info-block--news{ display: none; }
  .socials{ grid-column: span 2; justify-self: center; }
}

/* FIX: nouveau palier pour les très petits mobiles (<480px). Avant,
   le footer restait sur 2 colonnes serrées et les valeurs (IP, tip)
   étaient tronquées de façon agressive par l'ellipsis. On repasse en
   une seule colonne pleine largeur : tout le texte reste lisible et
   AUCUNE information n'est retirée (contrairement à la coupe "news"
   ci-dessus, qui est un choix déjà présent dans la version d'origine). */
@media (max-width: 480px){
  .info-bar{
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    text-align: center;
  }
  .info-block{ align-items: center; }
  .info-block__value{
    /* Sur une colonne pleine largeur, on peut se permettre de laisser
       le texte revenir à la ligne plutôt que de le tronquer. */
    white-space: normal;
    overflow-wrap: break-word;
  }
  .socials{ grid-column: auto; justify-self: center; }
}

/* Très petits écrans en largeur (montres/embeds extrêmes) : on
   réduit encore le tracking du titre pour éviter le retour à la
   ligne intempestif. */
@media (max-width: 340px){
  .crest__title{ letter-spacing: 0.22em; }
}

/* =========================================================
   RESPONSIVE — hauteur (mode paysage bas, fenêtres compactes)
   ========================================================= */

/* FIX: palier intermédiaire ajouté (rien n'existait entre "normal"
   et 560px). Resserre légèrement les espacements verticaux sans
   masquer d'éléments, pour les fenêtres/panels moyennement bas
   (ex. laptop avec barre des tâches + navigateur non maximisé). */
@media (max-height: 760px){
  .crest{ margin-top: 0.4vh; }
  .seal-wrap{ margin-top: clamp(0.8rem, 2vh, 1.6rem); }
  .status{ margin: 1rem 0 0.6rem; }
}

@media (max-height: 560px){
  .crest__subtitle{ display: none; }
  .seal-wrap{ width: clamp(100px, 12vw, 140px); margin-top: 0.8rem; }
}

/* FIX: nouveau palier pour les hauteurs très courtes (tablette/mobile
   en paysage, fenêtre GMod redimensionnée très bas, ex. ~360-420px
   de haut). Avant, rien ne compactait davantage sous 560px : selon le
   contenu, le sceau ou le footer pouvaient se chevaucher / être
   rognés par "overflow:hidden". On réduit ici la taille du blason et
   les marges, sans retirer d'éléments fonctionnels. */
@media (max-height: 420px){
  .screen{ padding-top: clamp(8px, 1.5vh, 16px); }
  .crest__emblem{ margin: 0.2rem 0 0.1rem; }
  .crest__logo{ width: 34px; height: 34px; }
  .crest__flourish{ height: 18px; }
  .crest__title{ letter-spacing: 0.22em; margin: 0.1rem 0 0.2rem; }
  .seal-wrap{ width: clamp(76px, 10vw, 110px); margin-top: 0.4rem; }
  .status{ margin: 0.6rem 0 0.4rem; }
  .info-bar{ padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 0.5rem; }
}

/* Combinaison largeur + hauteur réduites en même temps (ex. petit
   téléphone en paysage ~640x300) : on applique le resserrement le
   plus poussé indépendamment de la largeur exacte. */
@media (max-height: 340px){
  .crest__flourish{ display: none; }
  .crest__emblem{ display: none; }
}