/* ==========================================================================
   STYLES COMMUNS (gabarit app/Views/layouts/main.php)
   --------------------------------------------------------------------------
   Variables, échelle fluide, base, icônes, en-tête et pied de page.
   Icônes et logo : SVG provisoires dans app/Views/partials/sprite.php.
   Pour les remplacer par vos fichiers : remplacer le <svg><use href="#..."></svg>
   par <img src="..."> en gardant la classe CSS correspondante.
   ========================================================================== */
:root{
  --navy-950:#050f24;
  --navy-900:#071a3a;
  --navy-800:#0a2350;
  --blue-500:#1e90ff;
  --blue-400:#3aa0ff;
  --blue-line:#2f7fd6;
  --text:#ffffff;
  --text-soft:#cfe3ff;
  --text-mute:#9fb6d6;
  --gold:#ffc22e;
}

/* ---------- Échelle fluide ----------
   1 rem = 1/104.5 de la largeur OU 1/58.8 de la hauteur (le plus petit des deux).
   La maquette (1672 x 941) correspond à 1 rem = 16 px.
   Tout est exprimé en rem : la page se met à l'échelle sur 1920x1080 comme sur 3440x1440. */
html{
  font-size:16px;
  font-size:max(10px, min(calc(100vw / 104.5), calc(100vh / 58.8)));
  font-size:max(10px, min(calc(100vw / 104.5), calc(100dvh / 58.8)));
  -webkit-text-size-adjust:100%;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:var(--navy-950);
  color:var(--text);
  font-family:"Noto Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:1rem;
  line-height:1.4;
}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,p{margin:0}

.container{width:100%;max-width:104.5rem;margin-inline:auto;position:relative}

/* Sprite SVG d'icônes (partials/sprite.php) : hors flux, invisible */
.svg-sprite{position:absolute}

/* ---------- Icônes ---------- */
.icon{
  display:inline-block;
  width:1em;height:1em;
  flex:none;
  fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:relative;z-index:5;
  height:5.94rem;
  background:linear-gradient(180deg,#0a2250 0%,#081a3f 100%);
  border-bottom:1px solid rgba(70,150,235,.35);
  box-shadow:0 .2rem 1.2rem rgba(0,0,0,.45);
}
.header__inner{display:flex;align-items:center;height:100%;padding:0 1.8rem 0 3rem}

.logo{display:flex;align-items:center;gap:1.1rem;flex:none}
  .logo__icon{max-height:100%}
.logo__text{
  display:flex;flex-direction:column;
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:800;
  font-size:2.45rem;line-height:.88;letter-spacing:-.01em;
  text-shadow:0 .1rem .4rem rgba(0,0,0,.5);
}

.main-nav{flex:1;margin-left:5.6rem}
.main-nav ul{display:flex;align-items:center;gap:.25rem}
.main-nav a{
  display:flex;align-items:center;gap:.6rem;
  height:3.8rem;padding:0 1.65rem;
  border:1px solid transparent;border-radius:.4rem;
  font-size:1.1rem;font-weight:600;white-space:nowrap;
  transition:background .2s,border-color .2s,box-shadow .2s;
  position:relative;
}
.main-nav a .icon{width:1.75rem;height:1.75rem;color:var(--blue-400)}
.main-nav a:hover{background:rgba(40,120,220,.22)}
.main-nav a.is-active{
  background:linear-gradient(180deg,#1c52a0 0%,#0f3a7c 100%);
  border-color:rgba(105,180,255,.9);
  box-shadow:
    0 0 1rem rgba(30,150,255,.65),            /* halo autour du bouton */
    0 .5rem 1rem rgba(30,140,255,.45),        /* halo renforcé vers le bas */
    inset 0 0 .9rem rgba(70,160,255,.35);       /* lueur intérieure */
}
.main-nav a.is-active::after{                    /* ligne brillante sous le bouton */
  content:"";position:absolute;left:8%;right:8%;bottom:-1px;
  height:.1rem;border-radius:50%;
  background:linear-gradient(90deg,transparent,#8fd6ff 25%,#fff 50%,#8fd6ff 75%,transparent);
  box-shadow:0 0 .6rem .1rem rgba(90,190,255,.95),0 .3rem 1rem .2rem rgba(40,150,255,.6);
}
.main-nav a.is-active .icon{color:#fff}

.auth{display:flex;align-items:center;gap:1.35rem;flex:none}
.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;
  height:3.44rem;padding:0 1.65rem;
  border-radius:.5rem;
  font-size:1.15rem;font-weight:600;white-space:nowrap;
  transition:filter .2s,background .2s,box-shadow .2s;
}
.btn-sm--outline{border:1.5px solid var(--blue-line);background:rgba(10,40,95,.55);min-width:9.9rem}
.btn-sm--outline:hover{background:rgba(30,100,200,.45)}
.btn-sm--solid{
  background:linear-gradient(180deg,#2e9bff,#0b6fdc);
  border:1.5px solid #3aa0ff;font-weight:500;min-width:8.05rem;
  box-shadow:0 0 1.1rem rgba(30,140,255,.5),inset 0 1px 0 rgba(255,255,255,.3);
  color:#041227;
}
.btn-sm--solid:hover{filter:brightness(1.12)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  height:3.94rem;
  background:#061633;
  border-top:1px solid rgba(80,140,220,.25);
}
.site-footer .container{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 6.5rem 0 1.55rem;font-size:.9rem}
.site-footer nav{display:flex;align-items:center;gap:.6rem}
.site-footer nav a{color:#3b9bff;text-decoration:underline}
.site-footer nav a:hover{color:#7cc0ff}
.site-footer nav i{font-style:normal;color:#6c86ad}


/* ==========================================================================
   TABLETTE / MOBILE (< 1100 px de large)
   ========================================================================== */
@media (max-width:1100px){
  html{font-size:16px}
  .site-header{height:auto}
  .header__inner{flex-wrap:wrap;gap:.9rem 1rem;padding:.9rem 1.1rem}
  .logo__icon{max-height:100%}
  .logo__text{font-size:1.6rem}
  .auth{margin-left:auto;gap:.6rem}
  .btn-sm{height:2.6rem;padding:0 1rem;font-size:1rem;min-width:0}
  .main-nav{order:3;flex:0 0 100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main-nav ul{width:max-content}
  .main-nav a{height:3rem;padding:0 1.1rem;font-size:1rem}
  .main-nav a .icon{width:1.4rem;height:1.4rem}


  .site-footer{height:auto}
  .site-footer .container{flex-direction:column;gap:.6rem;padding:1rem 1.25rem;text-align:center}
  .site-footer nav{flex-wrap:wrap;justify-content:center}
}

/* ==========================================================================
   PAGE D'ERREUR (app/Views/errors/404.php)
   ========================================================================== */
.error-page{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  padding:4rem 1.25rem;text-align:center;
  background:radial-gradient(60% 85% at 50% 40%,#16356a 0%,#0b1f45 55%,#050f24 100%);
}
.error-page__code{
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:700;font-size:5rem;line-height:1;
  color:var(--blue-400);text-shadow:0 0 1.2rem rgba(40,150,255,.6);
}
.error-page__title{
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:600;font-size:2rem;
}
.error-page__text{font-size:1.15rem;color:var(--text-soft)}

/* ==========================================================================
   PAGES DE CONTENU (app/Views/pages/, app/Views/auth/)
   Zone centrale qui occupe l'espace entre l'en-tête et le pied de page.
   ========================================================================== */
.page-content{
  flex:1;
  background:radial-gradient(60% 85% at 72% 40%,#16356a 0%,#0b1f45 55%,#050f24 100%);
}
.page-content .container{padding:3.3rem 3.75rem}

@media (max-width:1100px){
  .page-content .container{padding:2rem 1.25rem}
}