/* ───────────────────────────────────────────────────────────
   Bluekiosktech — Theme (header fixe + logo indépendant)
   ─────────────────────────────────────────────────────────── */

/* ========== 1) Variables ========== */
:root{
  --bg:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --card:#111827;
  --brand:#60a5fa;
  --brand2:#22d3ee;
  --accent-green:#07f860;
  --bd:#1f2937;
  --shadow:0 10px 20px rgba(0,0,0,.25);

  /* Header */
  --header-h: 76px;          /* desktop */
  --header-h-mobile: 64px;    /* mobile */

  /* Logo (taille indépendante du header) */
  --logo-h: 255px;            /* ajuste selon ton rendu désiré */
  --logo-h-mobile: 180px;

  /* Switch langue (couleur pastille active) */
  --lang-active:#10b981;
}

/* ========== 2) Reset / Base ========== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
a{ color:var(--brand); text-decoration:none }
.muted{ color:var(--muted) }

/* Accessibilité */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ========== 3) Layout Utils ========== */
.container{ max-width:1100px; margin:0 auto; padding:0 16px }
.row{ display:flex; gap:12px }
.between{ justify-content:space-between }
.center{ align-items:center }
.grid{ display:grid; gap:16px }
.cards{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.only-mobile{ display:none }
.wrap{ flex-wrap:wrap }
.gap{ gap:12px }

/* Inputs génériques */
.input, .textarea, select{
  width:100%;
  background:#0b1222;
  border:1px solid var(--bd);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
}
.textarea{ min-height:140px; resize:vertical }

/* ========== 4) Header (logo à gauche, nav à droite, actions à l’extrême droite) ========== */
.site-header{
  position:sticky; top:0;
  height:var(--header-h);
  padding:0;
  display:block;
  background:rgba(11,18,34,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bd);
  z-index:50;
  overflow:visible;
}

/* Aligner le contenu du header */
.site-header .container{
  height:100%;
  display:flex; align-items:center; justify-content:flex-start !important;
  position:relative; gap:16px;
}

/* LOGO : absolu à gauche, centré verticalement */
.logo{
  position:absolute; left:24px; top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center; gap:10px;
}
.logo img{
  height:var(--logo-h) !important;
  width:auto !important;
  display:block; background:transparent;
}

/* NAV poussée à droite */
.nav{
  margin-left:auto;
  display:flex; gap:16px;
}
.nav a{
  padding:10px 14px;
  color:#d1d5db; font-size:1.1rem;
}
.nav a.active{ color:#fff; border-bottom:2px solid var(--brand) }

/* ACTIONS (ex. thème) : absolu à droite */
.site-header .actions{
  position:absolute; right:-25px; top:50%;
  transform:translateY(-50%);
}

/* ========== 5) Switch FR/EN (style .ca) placé SOUS le header, à droite ========== */
.lang-switch.lang--header{
  position:absolute;
  right:24px;
  top:calc(100% + 10px);      /* ← juste SOUS le header */
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  background:rgba(11,18,34,.88);
  border:1px solid var(--bd);
  border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  z-index:80;
  pointer-events:auto;
}
.lang-switch.lang--header button{
  border:0; background:transparent; color:#e5e7eb;
  padding:8px 14px; border-radius:999px; font-weight:700; line-height:1;
  cursor:pointer;
}
.lang-switch.lang--header button.is-active{
  background:var(--lang-active); color:#0b1222;
}

/* Pastille FR bleu foncé uniquement en thème clair */
body.theme-light .lang-switch.lang--header #lang-fr.is-active{
  background: #1e3a8a;  /* bleu foncé */
  color: #ffffff;       /* texte lisible */
}


.lang-switch.lang--header button:hover{ filter:brightness(1.08) }

/* ========== 6) Hero ========== */

/* Hero centré en 16:9 avec crop */
.post-hero{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  margin: 12px 0 18px;
}
.post-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* recadre si besoin */
  object-position: center;   /* focus centré */
  display: block;
}
@media (max-width: 760px){
  .post-hero{ aspect-ratio: 4 / 3; }  /* optionnel : ratio plus haut sur mobile */
}

/* --- HERO avec image plein-largeur + halo couleur existant --- */
/* ============ HERO — vidéo plein écran ============ */

/* === HERO: centre le contenu et adapte la vidéo === */
.hero{ position:relative; overflow:hidden; min-height: clamp(520px, 72vh, 860px); }
.hero > .hero-video{
  position:absolute; inset:0; display:block; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero > .container{
  position:relative; z-index:1;
  min-height:inherit;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding: calc(var(--header-h) + 12px) 16px 28px;
}
.hero h1{ margin:0 0 8px; font-size:clamp(28px, 6vw, 56px); line-height:1.1 }
.hero p{ margin:0 0 16px; }

/* Couleur demandée pour le sous-titre */
.hero p[data-i18n="hero_sub"]{ color: var(--accent-green); font-weight:600; }
.hero .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Tweak desktop souhaité: vidéo un peu zoomée (width:108%, height:86%) */
@media (min-width: 1024px){
  .hero > .hero-video{
    width:108%; height:86%;
    left:-4%; top:7%; right:auto; bottom:auto;
    object-fit:cover;
  }
}

/* Mobile: remplir entièrement, pas de débordement */
@media (max-width: 760px){
  .hero > .container{ padding-top: calc(var(--header-h-mobile) + 8px); }
  .hero > .hero-video{ inset:0; width:100%; height:100%; left:0; top:0; }
}

.hero{
  position: relative;          /* Contexte pour la vidéo en absolu */
  overflow: hidden;            /* Coupe ce qui dépasse */
  /* garde tes overlays/couleurs existants ici */
}

.hero > .hero-video{
  position: absolute;
  inset: 0;                    /* top/right/bottom/left à 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* couvre toute la zone sans déformer */
  display: block;
  z-index: 0;                  /* sous le contenu, au-dessus du background */
}

.hero > .container{
  position: relative;
  z-index: 1;                  /* le texte passe AU-DESSUS de la vidéo */
}

/* (optionnel) un minimum de hauteur pour que le hero respire */
@media (min-width: 768px){
  .hero{ min-height: 38vh; }   /* ajuste si besoin (48–64vh) */
}

.hero h1{ font-size:40px; margin:0 0 6px }
.hero p{ color:var(--muted); margin:0 0 18px }

/* ========== 7) Boutons ========== */
.btn{
  display:inline-block; padding:10px 16px;
  border-radius:12px; border:1px solid var(--bd); box-shadow:var(--shadow);
}
.btn.primary{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#0b1222; border:0; font-weight:700;
}
.btn.ghost{ color:#e5e7eb; background:#0b1222 }

/* ========== 8) Cartes / Chips ========== */
.card{
  background:var(--card); border:1px solid var(--bd);
  border-radius:16px; padding:18px;
}
.card .meta{ font-size:12px; color:var(--muted) }
.card h3{ margin:6px 0 8px; font-size:18px }
.chips{ list-style:none; padding:0; display:flex; gap:10px; flex-wrap:wrap }
.chip{ background:#0b1222; border:1px solid var(--bd); border-radius:999px; padding:6px 12px }

/* ========== 9) Pagination (placeholder simple) ========== */
.pagination{ display:flex; gap:8px; justify-content:center; margin:18px 0 }
.pagination a{ padding:8px 12px; border:1px solid var(--bd); border-radius:10px; color:var(--text) }
.pagination a.active{ background:#0b1222 }

/* ========== 10) Footer ========== */
.site-footer{
  border-top:1px solid var(--bd);
  margin-top:56px; padding:18px 0; color:var(--muted);
}

/* ========== 11) Responsive (mobile) ========== */
@media (max-width:760px){
  .only-mobile{ display:inline-flex }

  .site-header{ height:var(--header-h-mobile) }

  .logo{ left:12px }
  .logo img{ height:var(--logo-h-mobile) !important }

  .site-header .actions{ right:12px }

  /* nav cachée par défaut */
  .nav{
    display:none !important;
    margin-left:0;
  }

  /* nav ouverte : OVERLAY au-dessus de tout (fixe) */
  .nav.open{
    display:flex !important;
    flex-direction:column;

    position:fixed !important;         /* overlay robuste */
    right:12px;
    top:calc(var(--header-h-mobile) + 8px);

    background:#0b1222;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid var(--bd);
    box-shadow:0 12px 28px rgba(0,0,0,.4);

    min-width:200px;
    z-index:999 !important;            /* passe devant hero/switch */
  }
  .nav.open a{
    padding:10px 8px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav.open a:last-child{ border-bottom:0 }

  /* Switch langue compact */
  .lang-switch.lang--header{ right:12px; top:calc(100% + 8px); z-index:80; }
  .lang-switch.lang--header button{ padding:6px 10px }
}

/* ========================
   THÈMES : clair / sombre
   ======================== */

/* Applique des variables quand <body> a la classe correspondante */
body.theme-dark{
  --bg:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --card:#111827;
  --brand:#60a5fa;
  --brand2:#22d3ee;
  --bd:#1f2937;
}

body.theme-light{
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --brand:#0ea5e9;
  --brand2:#22c55e;
  --bd:#e2e8f0;
}

/* H1 du hero en blanc uniquement en thème clair */
body.theme-light .hero h1{
  color: #ffffff;
}

/* Ajustements d’UI en mode clair pour les éléments qui avaient des couleurs fixes */
body.theme-light .site-header,
body.theme-light .lang-switch.lang--header{
  background:rgba(255,255,255,.88);
}

body.theme-light .btn.ghost,
body.theme-light .chip,
body.theme-light .nav.open,
body.theme-light .input,
body.theme-light .textarea{
  background:#ffffff;
  color:var(--text);
}

body.theme-light .nav a{ color:#334155; }

/* === Overrides forts pour le choix utilisateur === */
/* Si tes variables de couleur sont sur :root ou html, on force au niveau du body */
body.theme-light{
  --bg:#f8fafc !important;
  --text:#0f172a !important;
  --muted:#475569 !important;
  --card:#ffffff !important;
  --brand:#0ea5e9 !important;
  --brand2:#22c55e !important;
  --bd:#e2e8f0 !important;
}

body.theme-dark{
  --bg:#0f172a !important;
  --text:#e5e7eb !important;
  --muted:#9ca3af !important;
  --card:#111827 !important;
  --brand:#60a5fa !important;
  --brand2:#22d3ee !important;
  --bd:#1f2937 !important;
}

/* ==============================
   MENU BURGER PLUS GRAND MOBILE
   ============================== */
@media (max-width:760px){
  /* Confort de clic sur les boutons d’actions du header */
  .site-header .actions button{
    border:1px solid var(--bd);
    border-radius:12px;
    padding:8px 10px;
    line-height:1;
    min-width:44px;   /* Accessibilité */
    min-height:44px;  /* Accessibilité */
  }

  /* ~30% plus grand qu’un 16–18px standard */
  #menuToggle{
    font-size:22px;
    padding:12px 14px;
  }
}

/* Image insérée juste après le H2 */
.post-inline { 
  margin: 12px 0 18px;
}
.post-inline img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 100%;        /* fluide sur mobile */
  max-width: 880px;   /* limite sur desktop (le container fait 1100px) */
  border-radius: 12px;
}

/* Tableau bactéries – styles communs FR/EN */
.bk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.bk-table th,
.bk-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.bk-table th {
  text-align: left;
  font-weight: 600;
  color: var(--brand);              /* ta couleur accent (rose / jaune) */
}

.bk-table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02);  /* léger zébrage */
}

.bk-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.04);  /* léger hover, optionnel */
}

/* Si tu as un très grand écran, on resserre encore un peu */
@media (min-width: 1400px){
  .post-inline img{ max-width: 820px; }
}

/* ===== Vignettes d’articles (cards) ===== */
.card-media{
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  display:block;
  margin: -6px -6px 12px;    /* léger “edge-to-edge” sur la card */
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile : ratio un peu plus haut (optionnel) */
@media (max-width:760px){
  .card-media{ aspect-ratio: 4 / 3; }
}


/* === Mobile: hero plein écran et vidéo couvrante === */
@media (max-width:760px){
  .hero{ min-height: 92vh; }                 /* occupe quasi tout l'écran */
  .hero > .hero-video{ inset:0; width:100%; height:100%; left:0; top:0; object-fit:cover; }
  .hero > .container{
    min-height: inherit;
    display:flex; align-items:center; justify-content:center;
    padding: calc(var(--header-h-mobile) + 8px) 16px 24px;
    text-align:center;
  }
  .hero h1{ font-size: clamp(24px, 8vw, 36px); line-height:1.15; margin:0 0 8px; }
  .hero p{ font-size: clamp(14px, 3.8vw, 16px); }



}