/* ================= HEADER LAYOUT (grille) ================== */
.header{
  display:grid;
  grid-template-columns: auto 1fr auto;   /* logo | espace | outils à droite */
  grid-template-rows: auto auto;          /* rangée 1 = outils | rangée 2 = menu */
  align-items:center;
  column-gap:24px;
  padding:14px 18px;
}

/* Logo occupe les 2 rangées à gauche */
.header__branding{
  grid-column:1;
  grid-row:1 / span 2;
}

/* Outils (recherche + langues) rangée 1, collés à droite */
.header__tools{
  grid-column:3;       /* bascule en dernière colonne */
  grid-row:1;
  display:flex;
  align-items:center;
  gap:12px;            /* espace entre recherche et langues */
  justify-content:flex-end;
}

/* Menu rangée 2, occupe colonnes 2→3, aligné à droite */
.primary-nav{
  grid-column:2 / 4;
  grid-row:2;
  border-top:1px solid #e9eef8;
  padding-top:8px;
}

/* ================= Recherche (forme maquette) =============== */
#block-aigf-theme-search-form-narrow{ min-width: 320px; }
#block-aigf-theme-search-form-narrow form{ position:relative; width: clamp(280px, 34vw, 520px); }
#block-aigf-theme-search-form-narrow .form-search{
  width:100%;
  border:2px solid #233986; border-radius:32px;
  padding:12px 54px 12px 16px;
  font-size:16px; color:#0f1a3a;
}
#block-aigf-theme-search-form-narrow .form-actions{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
}
#block-aigf-theme-search-form-narrow input[type="submit"]{
  width:34px; height:34px; border-radius:50%;
  border:2px solid #233986; background:#fff; color:#233986;
  font-size:0; cursor:pointer;
}
#block-aigf-theme-search-form-narrow input[type="submit"]::before{
  content:"\f002"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:15px;
}
#block-aigf-theme-search-form-narrow input[type="submit"]:hover{ background:#A8FF00; }

/* ================= Sélecteur de langue en pills ============= */
#block-aigf-theme-selecteurdelangue .links{
  display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none;
}
#block-aigf-theme-selecteurdelangue .links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:34px; padding:0 12px; border-radius:8px;
  text-decoration:none; font-weight:800; color:#fff; text-transform:uppercase;
}
#block-aigf-theme-selecteurdelangue li[hreflang="en"] a{ background:#d92a2a; }
#block-aigf-theme-selecteurdelangue li[hreflang="fr"] a{ background:#20356f; }
#block-aigf-theme-selecteurdelangue .is-active a{ outline:2px solid #233986; }

/* ================= Menu principal aligné à droite =========== */
#block-aigf-theme-main-menu > .menu{
  display:flex; justify-content:flex-end; align-items:center;
  gap:32px; margin:10px 0 18px; padding:0; list-style:none;
}
#block-aigf-theme-main-menu > .menu > .menu-item{ position:relative; }
#block-aigf-theme-main-menu > .menu > .menu-item > a{
  color:#233986; text-decoration:none; font-weight:800;
  text-transform:uppercase; letter-spacing:.02em;
  padding:12px 2px; display:inline-block; position:relative;
}
#block-aigf-theme-main-menu > .menu > .menu-item > a::after{
  content:""; position:absolute; left:0; bottom:4px; width:0; height:3px;
  background:#233986; transition:width .18s ease;
}
#block-aigf-theme-main-menu > .menu > .menu-item > a:is(:hover,:focus)::after,
#block-aigf-theme-main-menu > .menu > .menu-item > a.is-active::after{ width:100%; }

/* Chevron pour items avec sous-menu */
#block-aigf-theme-main-menu > .menu > .menu-item.menu-item--expanded > a{
  padding-right:18px;
}
#block-aigf-theme-main-menu > .menu > .menu-item.menu-item--expanded > a::before{
  content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:12px; position:absolute; right:0; top:50%; transform:translateY(-50%);
}

/* ===== Sous-menus restaurés (hover/focus + z-index) ========= */
#block-aigf-theme-main-menu > .menu > .menu-item > .menu{
  position:absolute; left:0; top:100%;
  min-width:240px; display:none; z-index:1000;
  margin-top:10px; padding:10px 6px; list-style:none;
  background:#fff; border:1px solid #e5eaf6; border-radius:10px;
  box-shadow:0 10px 24px rgba(17,37,85,.14);
}
#block-aigf-theme-main-menu > .menu > .menu-item:hover > .menu,
#block-aigf-theme-main-menu > .menu > .menu-item:focus-within > .menu{ display:block; }

#block-aigf-theme-main-menu > .menu > .menu-item > .menu > .menu-item > a{
  display:block; padding:10px 12px; color:#233986; text-decoration:none; font-weight:600;
  border-radius:8px;
}
#block-aigf-theme-main-menu > .menu > .menu-item > .menu > .menu-item > a:hover{
  background:#f4f7ff;
}

/* ================ Responsive ================================= */
@media (max-width: 1100px){
  .header{
    grid-template-columns: auto 1fr;  /* logo | colonne droite */
    grid-template-rows: auto auto auto;
    row-gap:10px;
  }
  .header__tools{ grid-column:2; grid-row:1; justify-content:flex-end; }
  .primary-nav{ grid-column:2; grid-row:2; }
}
@media (max-width: 640px){
  #block-aigf-theme-search-form-narrow form{ width:100%; }
  #block-aigf-theme-selecteurdelangue .links a{ padding:0 10px; height:32px; }
  #block-aigf-theme-main-menu > .menu{ gap:18px; }
}


/* ===== Zone outils du header (recherche + langues) ===== */
.header__tools{
  /* ta grille place déjà la colonne 3 : on s’assure de l’alignement à droite */
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-block:8px;
  /* évite que les pills passent à la ligne tant qu’il y a de la place */
  white-space:nowrap;
}

/* La région elle-même : garde les deux blocs sur la même ligne */
.region-header-tools{
  display:flex;
  align-items:center;
  gap:14px;                /* espace entre recherche et langues */
}

/* ===== Recherche (bloc Drupal) ===== */
#block-aigf-theme-search-form-narrow{ margin:0; }

#block-aigf-theme-search-form-narrow form{
  position:relative;
  width: clamp(420px, 45vw, 780px); /* ← longueur du champ ; ajuste si besoin */
}

/* Champ */
#block-aigf-theme-search-form-narrow .form-search{
  width:100%;
  height:48px;
  border:2px solid #233986;
  border-radius:30px;
  padding:12px 56px 12px 16px;   /* place pour le bouton à droite */
  font: 600 16px/1.2 "Inter", system-ui, sans-serif;
  color:#0f1a3a;
  background:#fff;
  outline:none;
  box-sizing:border-box;
}
#block-aigf-theme-search-form-narrow .form-search::placeholder{
  color:#6a78a8; opacity:1;      /* Texte "Recherche…" si présent */
}
#block-aigf-theme-search-form-narrow .form-search:focus{
  box-shadow:0 0 0 3px rgba(35,57,134,.15);
}

/* Bouton "loupe" rond plaqué à droite */
#block-aigf-theme-search-form-narrow .form-actions{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  margin:0; padding:0;
}
#block-aigf-theme-search-form-narrow input[type="submit"]{
  width:36px; height:36px;
  border-radius:50%;
  border:2px solid #233986;
  background:#fff;
  color:#233986;
  font-size:0;               /* masque le libellé "Rechercher" */
  cursor:pointer;
  display:inline-grid; place-items:center;
}
#block-aigf-theme-search-form-narrow input[type="submit"]::before{
  /* Icône loupe Font Awesome (si FA chargé) */
  content:"\f002";
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:16px;
}
#block-aigf-theme-search-form-narrow input[type="submit"]:hover{
  background:#A8FF00;
}

/* ===== Sélecteur de langue (pills FR/EN) ===== */
#block-aigf-theme-selecteurdelangue{ margin:0; }
#block-aigf-theme-selecteurdelangue .links{
  display:flex; gap:8px; align-items:center;
  margin:0; padding:0; list-style:none;
}
#block-aigf-theme-selecteurdelangue .links a{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; min-width:44px;
  border-radius:10px;
  font:800 14px/1 "Inter", system-ui, sans-serif;
  text-transform:uppercase; text-decoration:none; color:#fff;
  border:2px solid transparent;
}
#block-aigf-theme-selecteurdelangue li[hreflang="en"] a{ background:#d92a2a; }
#block-aigf-theme-selecteurdelangue li[hreflang="fr"] a{ background:#20356f; }
#block-aigf-theme-selecteurdelangue .is-active a{
  border-color:#233986;      /* petit liseré sur la langue active */
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  #block-aigf-theme-search-form-narrow form{ width: clamp(360px, 48vw, 640px); }
}
@media (max-width: 820px){
  .region-header-tools{ flex-wrap:wrap; gap:10px; }
  #block-aigf-theme-search-form-narrow form{ width: 100%; }
  .header__tools{ white-space:normal; }      /* autorise le retour à la ligne si nécessaire */
}