@import url("./bootstrap/css/bootstrap.min.css");
@import url("./font-awesome/css/all.min.css");
@import url("./fonts.css");

/* Variables */
:root{
  --sang:#C22918;
  --or:#FDC902;
  --ink:#0b0d12;
  --ink-2:#151924;

  --bar-w:clamp(160px,22vw,360px);
  --bar-h:85px;

  --blur-strength:8px;

  --bg-dark:
    radial-gradient(1200px 800px at 50% -10%, rgba(253,201,2,.10), transparent 50%),
    radial-gradient(1200px 800px at 50% 110%, rgba(194,41,24,.08), transparent 50%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
}

:root{ color-scheme: dark; }

/* Base */
html,body{ height:100% }

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-dark);
  .min-svh-100 { min-height: 100vh; }                /* fallback */
  @supports (min-height: 100svh){
    .min-svh-100 { min-height: 100svh; }             /* vrai viewport mobile */
  }
}

/* Barres latérales décoratives */
.bars{
  position: relative;
  isolation: isolate;
}

.bars::before,
.bars::after{
  content:"";
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:var(--bar-w);
  height:var(--bar-h);
  opacity:.95;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
  z-index:-1;
  pointer-events:none;
}

.bars::before{
  left:0;
  background:var(--sang);
  border-radius:0 8px 8px 0;
}

.bars::after{
  right:0;
  background:var(--or);
  border-radius:8px 0 0 8px;
}

/* Carte verre dépoli */
.glass{
  position: relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(var(--blur-strength));
  z-index:1;
}

/* Logo */
.logo{
  display:block;
  margin-inline:auto;
  height:clamp(120px,20vw,260px);
  width:auto;
}

/* Slogan */
.slogan{
  font-family:'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing:.04em;
  font-size:clamp(1.5rem,4vw,3rem);
}

/* Hover réseaux */
.footer-links a:hover,
footer a:hover{
  color:var(--or)!important;
  opacity:1;
}

/* Responsive */
@media (max-width:768px){
  .bars::before,
  .bars::after{ display:none; }
}

/* Accessibilité */
@media (prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important;
  }
}