:root{
  --color-brown:#5A4A3B;
  --color-cream:#F5F1EB;
  --color-green:#7A9B61;
  --color-text:#333333;
  --color-swiss-red:#D52B1E;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--color-cream);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.5}
a{color:var(--color-brown)}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:.5rem 1rem}
.header .logo a{font-weight:700;text-decoration:none;color:var(--color-brown)}
.header .menu{display:flex;gap:1rem;align-items:center;justify-content:flex-end}
.header .menu a{text-decoration:none;color:var(--color-brown)}
.btn{background:var(--color-swiss-red);color:#fff;border:none;border-radius:8px;padding:.5rem .8rem;cursor:pointer}

.banner{display:flex;justify-content:center;align-items:center;padding:.25rem 0}
.banner img{height:auto;max-height:240px;object-fit:contain}
/* mobile priorité – bannière jusqu’à 360px de haut */
@media (max-width: 640px){
  .header{grid-template-columns:1fr}
  .header .menu{justify-content:center;flex-wrap:wrap}
  .banner img{max-height:360px;width:100%}
}

/* Logo image dans le header */
.header .logo .brand{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
}
.header .logo .brand-logo{
  display:block;
  height:150px;          /* ajuste si tu veux un peu plus grand */
  width:auto;
}
@media (max-width:640px){
  .header .logo .brand-logo{ height:36px; }
}


/* Cartes */
.card{background:#fff;border-radius:12px;padding:.75rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.grid{display:grid;gap:.75rem}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
						
						/* ===== Popover Login (top-right) ===== */
.login-wrap{position:relative}
.popover{position:absolute; top:calc(100% + 8px); right:0; display:none; z-index:1000}
.popover.open{display:block}
.popover-inner{
  background:#fff; border-radius:14px; padding:1rem 1.1rem; width:320px; max-width:92vw;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.popover-inner label{display:block; font-size:.9rem; margin-bottom:.25rem}
.popover-inner input[type="email"],
.popover-inner input[type="password"]{
  width:100%; padding:.5rem .6rem; border:1px solid #ddd; border-radius:8px;
}
@media (max-width:640px){
  .popover-inner{width:min(380px,95vw);}
}

/* Bouton ghost */
.btn-ghost{background:#777;color:#fff;border:none;border-radius:8px;padding:.5rem .8rem;cursor:pointer}

/* Flash messages */
.flash-container { margin:.75rem auto; }
.alert { padding:.75rem 1rem; border-radius:10px; border:1px solid transparent; }
.alert-error { background:#fff1f0; border-color:#ffa39e; color:#7f1d1d; }
.alert-ok { background:#f6ffed; border-color:#b7eb8f; color:#14532d; }

/* ===== User dropdown ===== */
.userbtn { display:inline-flex; align-items:center; gap:.25rem; }
.dropdown{
  position:absolute; top:calc(100% + 8px); right:0; display:none; z-index:1100;
  background:#fff; border-radius:12px; min-width:180px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  border:1px solid #eee; padding:.35rem;
}
.dropdown.open{ display:block; }
.dropdown-item{
  display:block; padding:.55rem .7rem; border-radius:8px; text-decoration:none; color:#111; font-size:.95rem;
}
.dropdown-item:hover{ background:#f5f5f7; }
.dropdown-sep{ height:1px; background:#eee; margin:.35rem 0; }

/* (déjà présent) Popover Login + Flash (au besoin) */

/* ===== Admin Nav (Tabernae) ===== */
:root{
  --adm-bg: #5A4A3B;        /* inactif */
  --adm-bg-hover: #6B5A49;
  --adm-fg: #FFFFFF;

  --adm-active-bg: #7A9B61; /* actif */
  --adm-active-fg: #111111; /* meilleur contraste WCAG que blanc sur ce vert */
  --adm-active-hover: #8BB272;

  --adm-focus: rgba(0,0,0,.35);
}

/* Conteneur nav admin */
.admin-nav{
  margin: .75rem auto;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Lien admin générique (inactif) */
.admin-link{
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: 10px;
  background: var(--adm-bg);
  color: var(--adm-fg);
  text-decoration: none;
  line-height: 1;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.admin-link:hover{ background: var(--adm-bg-hover); }
.admin-link:active{ transform: translateY(1px); }
.admin-link:focus{
  outline: 2px solid var(--adm-focus);
  outline-offset: 2px;
}

/* Lien actif */
.admin-link--active{
  background: var(--adm-active-bg);
  color: var(--adm-active-fg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}
.admin-link--active:hover{ background: var(--adm-active-hover); }
.admin-link--active:focus{
  outline: 2px solid var(--adm-focus);
  outline-offset: 2px;
}

/* ====== Form Kit (uniformise tous les <form>) ====== */

/* Conteneur de formulaire : applique un flow vertical propre */
.card form:not(.no-kit),
form.form-kit{
  display:flex;
  flex-direction:column;
  gap:.85rem;              /* espacement uniforme entre champs */
  max-width: 760px;        /* évite des lignes trop longues sur desktop */
}

/* Chaque champ (label + contrôle) */
.card form .field,
form.form-kit .field{
  display:flex;
  flex-direction:column;
}

/* Label : lisible et rapproché du champ */
.card form label,
form.form-kit label{
  display:block;
  font-weight:600;
  margin-bottom:.28rem;
}

/* Contrôles : 100% largeur, padding, radius, focus state */
.card form input[type="text"],
.card form input[type="email"],
.card form input[type="password"],
.card form input[type="number"],
.card form input[type="url"],
.card form input[type="search"],
.card form input[type="tel"],
.card form input[type="datetime-local"],
.card form input[type="date"],
.card form input[type="time"],
.card form select,
.card form textarea,
form.form-kit input[type="text"],
form.form-kit input[type="email"],
form.form-kit input[type="password"],
form.form-kit input[type="number"],
form.form-kit input[type="url"],
form.form-kit input[type="search"],
form.form-kit input[type="tel"],
form.form-kit input[type="datetime-local"],
form.form-kit input[type="date"],
form.form-kit input[type="time"],
form.form-kit select,
form.form-kit textarea{
  width:100%;
  padding:.55rem .65rem;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  color:#111;
  font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card form textarea,
form.form-kit textarea{ min-height: 90px; resize: vertical; }

.card form input:focus,
.card form select:focus,
.card form textarea:focus,
form.form-kit input:focus,
form.form-kit select:focus,
form.form-kit textarea:focus{
  outline:none;
  border-color: var(--color-green);
  box-shadow:0 0 0 3px rgba(122,155,97,.18);
}

/* Checkbox / switch inline propre */
.field.inline,
.form-inline{
  display:flex;
  align-items:center;
  gap:.5rem;
}
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--color-green);
}

/* Aide sous champ (ex: formats, limites) */
.help, .hint{
  font-size:.85rem;
  opacity:.8;
  margin-top:.25rem;
}

/* Barre d’actions : boutons à droite (et wrap si petit écran) */
.form-actions,
.card form .actions,
form.form-kit .actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Fichier : cale le libellé et évite l’input minuscule */
input[type="file"]{
  padding:.45rem;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
}

/* Harmonise les alertes si besoin (déjà présent chez toi, au cas où) */
.alert{ border-radius:10px; padding:.6rem .8rem; }
.alert-ok{ background:#F1FAF4; border:1px solid #CFE8D4; color:#134E21; }
.alert-error{ background:#FEF2F2; border:1px solid #F5C2C7; color:#7F1D1D; }



.lang-tab-active {
  background-color: #7A9B61;
  color: white;
}