* {
    box-sizing: border-box;
}

:root{
  --header-grad-start: #0277bd;
  --header-grad-end:   #03a9f4;
  --header-fg:         #ffffff;
  --header-fg-muted:   rgba(255,255,255,.85);
  --header-shadow:     0 8px 20px rgba(2,119,189,.25);
  --btn-bg:            #ffffff;
  --btn-fg:            #1363df;
  --btn-border:        rgba(255,255,255,.35);
  --btn-bg-hover:      #e6f2ff;
}

html, body {
     padding-top: var(--header-h);
}

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;
    margin: 0 !important;
}

header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;
    margin: 0 !important;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header {
  position: sticky; 
  top: 0; 
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  width: 100%;
  box-sizing: border-box;

  background: linear-gradient(135deg, var(--header-grad-start), var(--header-grad-end));
  color: var(--header-fg);
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--header-shadow);
  backdrop-filter: saturate(125%) blur(6px);
  -webkit-backdrop-filter: saturate(125%) blur(6px);
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.header-center .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  display: block;
  height: 80px;
  width: auto;
  max-width: 100%;
}

.brand {
  display: none;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
}

/* Navigation desktop */
.main-nav ul {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}

.main-nav a {
  text-decoration: none;
  color: var(--header-fg-muted);
  padding: .4rem .25rem;
  transition: color .2s ease;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--header-fg);
}

.connexion { 
  display: flex; 
  align-items: center; 
  gap: .5rem;
  flex-wrap: nowrap;
}

.connexion a {
  text-decoration: none;
  padding: .5rem .85rem;
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .08s ease, background-color .2s ease, box-shadow .2s ease;
}

.connexion a:hover { 
  background: var(--btn-bg-hover); 
  box-shadow: 0 4px 10px rgba(0,0,0,.12); 
}

.connexion a:active { 
  transform: translateY(1px); 
}

.btn-administration { 
  background: #eef3ff; 
  border-color: #cbd6ff; 
}

.btn-deconnexion { 
  background: #fff5f5; 
  border-color: #ffc9c9; 
}

/* Burger menu */
.burger {
  display: none;
  background: none; 
  border: none;
  padding: .4rem;
  cursor: pointer;
  flex-shrink: 0;
}

.burger span {
  display: block;
  width: 24px; 
  height: 2px;
  background: var(--header-fg);
  margin: 5px 0;
  transition: transform .3s ease, opacity .3s ease;
}

/* Animation du burger */
.burger[aria-expanded="true"] span:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}

.burger[aria-expanded="true"] span:nth-child(2) { 
  opacity: 0; 
}

.burger[aria-expanded="true"] span:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}

/* Breakpoint pour tablettes */
@media (max-width: 992px) {
  .site-header {
    gap: 0.8rem;
    padding: 0.6rem 1rem;
  }
  
  .main-nav ul {
    gap: 0.8rem;
  }
  
  .main-nav a {
    padding: .4rem .15rem;
    font-size: 0.9rem;
  }
  
  .connexion {
    gap: .4rem;
  }
  
  .connexion a {
    padding: .45rem .7rem;
    font-size: 0.85rem;
  }
}

/* Breakpoint pour mobiles */
@media (max-width: 768px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    padding: .55rem .9rem;
    gap: .6rem;
  }
  
  .header-center .logo img { 
    height: 44px; 
  }

  .burger { 
    display: block; 
    order: 1;
  }
  
  .header-right {
    gap: .5rem;
    justify-content: flex-end;
  }
  
  .connexion {
    gap: .3rem;
  }
  
  .connexion a {
    padding: .4rem .6rem;
    font-size: 0.8rem;
    border-radius: 6px;
  }

  /* Menu mobile caché par défaut */
  .main-nav {
    position: fixed;
    top: calc(100% + 10px);
    right: 10px; 
    left: 10px;
    display: none;
    background: #ffffff;
    color: #222;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    border: 1px solid #eee;
    overflow: hidden;
    z-index: 999;
  }
  
  .main-nav.open { 
    display: block; 
  }
  
  .main-nav ul { 
    flex-direction: column; 
    padding: .4rem 0; 
    gap: 0;
  }
  
  .main-nav a { 
    color: #222; 
    padding: .8rem 1rem;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .main-nav li:last-child a {
    border-bottom: none;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .site-header {
    padding: .5rem .7rem;
    gap: .4rem;
  }
  
  .header-center .logo img { 
    height: 38px; 
  }
  
  .connexion {
    flex-direction: column;
    gap: .2rem;
  }
  
  .connexion a {
    padding: .35rem .5rem;
    font-size: 0.75rem;
    min-width: auto;
  }
  
  .burger {
    padding: .3rem;
  }
  
  .burger span {
    width: 20px;
    height: 2px;
    margin: 4px 0;
  }
}

/* Scrollbar pour petits écrans si nécessaire */
@media (max-width: 768px) {
  .main-nav {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Conteneur de la liste déroulante de langue */
.lang-dropdown {
    margin-left: auto;           /* pousse vers la droite dans le header */
    display: flex;
    align-items: center;
}

/* Style du select */
.lang-dropdown select {
    background-color: #ffffff;
    color: #0073c6;              /* bleu de ta charte */
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}

/* Effet au survol / focus */
.lang-dropdown select:hover,
.lang-dropdown select:focus {
    border-color: #005a99;
    box-shadow: 0 0 0 2px rgba(0, 115, 198, 0.25);
}

.lang-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}