/* ==== Variables (adapte à tes couleurs) ==== */
:root{
  --aigf-blue:  #233986;
  --aigf-green: #A8FF00;
  --topbar-pad-y: 4px;   /* marges réduites */
  --topbar-pad-x: 16px;
  --topbar-gap:  12px;
  --topbar-sep:  12px
}

/* ==== Conteneur & fond dégradé ==== */
.topbar{
  background-color: var(--aigf-blue);
  background: linear-gradient(90deg, var(--aigf-blue) 0%, var(--aigf-green) 100%);
  color:#fff;
  color:#fff;
  
  font-weight:700;
  padding: var(--tb-pad-y) var(--tb-pad-x);
  display:flex; gap: var(--tb-gap); align-items:center;
}
* Colonne gauche/droite */
.topbar__left{ display:flex; align-items:center; gap: var(--tb-gap); }
.topbar__right{ margin-left:auto; display:flex; align-items:center; }

/* Date (si présente) */
.topbar__date{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar__date i{ font-size:14px; }

/* -----------------------------
   Bloc contact (téléphone/mail)
   ----------------------------- */
.region-topbar-left{ display:flex; align-items:center; gap: var(--tb-gap); }

#block-aigf-theme-contacttopbar{ display:flex; align-items:center; gap: var(--tb-gap); }
#block-aigf-theme-contacttopbar p{ margin:0; display:flex; gap: 14px; flex-wrap:wrap; }
#block-aigf-theme-contacttopbar a{
  color:#fff !important; text-decoration:none; font-weight:700; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}

/* Petites icônes FA avant tel/mail (optionnel) */
#block-aigf-theme-contacttopbar a[href^="tel:"]::before{
  content:"\f095"; font-family:"Font Awesome 6 Free"; font-weight:900; /* phone */
  font-size:14px;
}
#block-aigf-theme-contacttopbar a[href^="mailto:"]::before{
  content:"\f0e0"; font-family:"Font Awesome 6 Free"; font-weight:900; /* envelope */
  font-size:14px;
}

/* -----------------------------
   Réseaux sociaux (icônes seules)
   ----------------------------- */
.region-topbar-right{ display:flex; align-items:center; }
#block-aigf-theme-reseauxsociaux{ display:flex; align-items:center; }

.socials{ position:relative; }
.socials__list{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:0; list-style:none;
}

/* Boutons icônes ronds */
.socials__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  color:#fff; text-decoration:none;
  font-size:0; /* masque un éventuel texte */
}
.socials__link i{ font-size:14px; line-height:1; color:#fff; }

.socials__link:hover,
.socials__link:focus{ background: rgba(255,255,255,.2); outline:none; }

/* ----------------
   Responsive
   ---------------- */
@media (max-width: 768px){
  .topbar{ padding: 4px 10px; }
  #block-aigf-theme-contacttopbar p{ gap:10px; }
  .socials__list{ gap:8px; flex-wrap:wrap; }
  .socials__link{ width:30px; height:30px; }
}

@media (max-width: 480px){
  .topbar{ flex-wrap:wrap; row-gap:8px; }
  .topbar__right{ margin-left:0; width:100%; }
  .socials__list{ justify-content:flex-end; }
}

/* ==== Séparateurs discrets entre éléments de gauche ==== */
.topbar .region-topbar > .topbar__date + #block-aigf-theme-contacttopbar::before{
  content:"";
  display:inline-block;
  width:1px; height:14px;
  background-color:rgba(255,255,255,.35);
  margin:0 8px 0 2px;
}

/* ==== Responsive ==== */
@media (max-width: 900px){
  .topbar .region-topbar{ flex-wrap:wrap; row-gap:8px; }
  /* Date + contact empilés si manque d'espace */
  #block-aigf-theme-contacttopbar{ flex-wrap:wrap; gap:8px; }
}
@media (max-width: 640px){
  /* Sur mobile, tout passe sur 2 lignes : gauche puis réseaux dessous */
  #block-aigf-theme-reseauxsociaux{
    margin-left:0;
    width:100%;
    order:3;
    margin-top:4px;
  }
  #block-aigf-theme-reseauxsociaux .menu{ gap:16px; }
}

/* ---------- Desktop par défaut ---------- */
#block-aigf-theme-reseauxsociaux .topbar-social-toggle{ display:none; }

/* ---------- Mobile: bouton + dropdown ---------- */
@media (max-width: 640px){
  /* Bouton "Réseaux sociaux" */
  #block-aigf-theme-reseauxsociaux .topbar-social-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color:#fff;
    padding:4px 10px;
    border-radius: 6px;
    font-weight:700;
    cursor:pointer;
  }

  /* Cacher la liste horizontale par défaut */
  #block-aigf-theme-reseauxsociaux .menu{
    display:none;
    position:absolute;
    right:12px;
    top: calc(100% + 6px);
    background: rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding:8px;
    min-width: 180px;
    z-index: 50;
    flex-direction: column;
    gap:6px;
  }
  /* Ouvrir quand le bloc a .is-open */
  #block-aigf-theme-reseauxsociaux.is-open .menu{ display:flex; }

  /* Liens du menu dans le dropdown */
  #block-aigf-theme-reseauxsociaux .menu a{
    color:#fff !important;
    text-decoration:none;
    padding:6px 8px;
    border-radius:6px;
    display:flex; align-items:center; gap:8px;
    font-weight:600;
  }
  #block-aigf-theme-reseauxsociaux .menu a:hover{
    background: rgba(255,255,255,.08);
  }
}