/*
 * En-tête du site — refonte du 2026-10-02 (inc/entete-2026.php).
 *
 * Le thème MyListing a trois en-têtes : ordinateur (≥ 1201 px, 89 px de haut), tablette (80 px) et
 * mobile (60 px), chacun avec sa marge .c27-top-content-margin sous l'en-tête fixe.
 *
 * Problème corrigé sur ordinateur : entre 1201 et ~1900 px, le menu (libellés longs, 30 px entre
 * chaque) et le champ de recherche de 300 px poussaient toute la partie droite HORS de l'écran —
 * « Se connecter / S'inscrire » et le bouton « Trouver un pro du solaire » n'étaient visibles qu'à
 * partir de 1920 px, et « Contactez-nous » était coupé. Les largeurs ci-dessous ont été mesurées à
 * 1201, 1280, 1366, 1440, 1600 et 1920 px (aucun élément au-delà du bord droit).
 *
 * ⚠️ Le fond flou est posé sur .header-skin (calque de fond), JAMAIS sur l'en-tête lui-même :
 * backdrop-filter crée un bloc conteneur pour les éléments `position:fixed`, et le panneau du menu
 * mobile (.i-nav), placé dans l'en-tête, serait rogné à la hauteur de l'en-tête.
 */

/* ---------- Toutes tailles : fond translucide, ombre légère ---------- */
.c27-main-header .header-skin{
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(26,26,26,.07) !important;
  box-shadow:0 6px 24px rgba(26,26,26,.05);
}

/* ---------- Ordinateur ---------- */
@media (min-width:1201px){
  .c27-main-header.header,
  .c27-main-header.header.header-scroll{ height:72px; }
  .c27-main-header + .c27-top-content-margin{ height:72px; }

  .c27-main-header .header-top{ padding:0 24px; }
  .c27-main-header .header-container .header-top .logo a img,
  .c27-main-header .logo img{ height:34px !important; max-height:34px !important; width:auto; }

  /* Recherche : icône (ouvre la fenêtre de recherche du thème) ; champ intégré seulement en très grand écran. */
  .c27-main-header .header-left .quick-search-instance{ display:none; }
  .c27-main-header .header-right .search-trigger{ display:flex; align-items:center; margin:0 8px 0 0; order:-1; }
  .c27-main-header .header-right .search-trigger a{ width:40px; height:40px; border-radius:50%; justify-content:center; color:#1a1a1a; transition:background-color .15s ease; }
  .c27-main-header .header-right .search-trigger a:hover{ background:#f3efea; }
  .c27-main-header .header-right .search-trigger a i{ padding:0; color:#1a1a1a; font-size:21px; }

  /* Menu */
  .c27-main-header .header-center{ min-width:0; margin-left:24px !important; }
  .c27-main-header .i-nav > ul.main-menu{ height:72px; align-items:center; }
  .c27-main-header .i-nav > ul.main-menu > li{ position:relative; display:flex; align-items:center; height:72px; margin:0 7px !important; padding:0; }
  .c27-main-header .i-nav > ul.main-menu > li > a{ position:relative; font-size:13.5px !important; font-weight:500; letter-spacing:0; color:#1a1a1a !important; padding:8px 0; line-height:1.3; transition:color .15s ease; }
  .c27-main-header .i-nav > ul.main-menu > li > a:hover,
  .c27-main-header .i-nav > ul.main-menu > li:hover > a{ color:#d94901 !important; }
  .c27-main-header .i-nav > ul.main-menu > li.current-menu-item > a,
  .c27-main-header .i-nav > ul.main-menu > li.current-menu-ancestor > a,
  .c27-main-header .i-nav > ul.main-menu > li.current-post-ancestor > a,
  .c27-main-header .i-nav > ul.main-menu > li.current-menu-parent > a{ color:#d94901 !important; }
  .c27-main-header .i-nav > ul.main-menu > li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:#fd5902; transform:scaleX(0); transition:transform .2s ease; }
  .c27-main-header .i-nav > ul.main-menu > li:hover::after,
  .c27-main-header .i-nav > ul.main-menu > li.current-menu-item::after,
  .c27-main-header .i-nav > ul.main-menu > li.current-menu-ancestor::after,
  .c27-main-header .i-nav > ul.main-menu > li.current-post-ancestor::after{ transform:scaleX(1); }
  .c27-main-header .i-nav > ul.main-menu > li > .submenu-toggle{ margin-left:3px; opacity:.55; }
  .c27-main-header .i-nav > ul.main-menu > li > .submenu-toggle i{ font-size:16px; }

  /* Sous-menus : cartes arrondies */
  .c27-main-header .main-nav .i-dropdown{
    top:64px; width:268px; padding:8px; border-radius:16px; border:1px solid #efe9e2;
    box-shadow:0 22px 50px rgba(26,26,26,.14), 0 2px 6px rgba(26,26,26,.05);
  }
  .c27-main-header .main-nav .i-dropdown::before{ display:none; }
  .c27-main-header .main-nav .i-dropdown .i-dropdown{ left:calc(100% + 6px) !important; top:-9px !important; }
  .c27-main-header .main-nav .i-dropdown li a{ margin:0; padding:10px 12px; border-bottom:0; border-radius:10px; font-size:14px; line-height:1.4; color:#1a1a1a; white-space:normal; transition:background-color .15s ease, color .15s ease; }
  .c27-main-header .main-nav .i-dropdown li a:hover{ padding-left:12px; background:#fff3e8; color:#d94901; }
  .c27-main-header .main-nav .i-dropdown li.menu-item-has-children > a::after{ content:"›"; position:absolute; right:12px; top:50%; transform:translateY(-52%); font-size:18px; color:#b3aaa1; }

  /* Connexion : pastille */
  .c27-main-header .header-right{ gap:0; }
  .c27-main-header .user-area{ margin-right:12px; height:auto; font-size:14px; }
  .c27-main-header .user-area.signin-area{ box-sizing:border-box; height:40px !important; gap:5px; padding:0 14px; border:1px solid #e3dcd4; border-radius:999px; transition:border-color .15s ease; }
  .c27-main-header .user-area.signin-area a{ line-height:1.2; padding:0; }
  .c27-main-header .user-area.signin-area:hover{ border-color:#fd5902; }
  .c27-main-header .user-area.signin-area > i.user-area-icon{ padding:0 !important; font-size:19px; color:#1a1a1a !important; }
  .c27-main-header .user-area.signin-area a{ color:#1a1a1a !important; font-weight:600; }
  .c27-main-header .user-area.signin-area a:hover{ color:#d94901 !important; }
  .c27-main-header .user-area.signin-area > span{ opacity:.5; }
  .c27-main-header .user-area .user-profile-name{ padding:6px 12px 6px 6px; border:1px solid #e3dcd4; border-radius:999px; font-size:14px; font-weight:600; color:#1a1a1a !important; }

  /* Bouton principal */
  .c27-main-header .header-button a.buttons{ padding:11px 18px !important; border-radius:12px !important; font-size:14px !important; font-weight:600; line-height:1.2; box-shadow:0 6px 16px rgba(253,89,2,.28); transition:transform .15s ease, box-shadow .15s ease; }
  .c27-main-header .header-button a.buttons:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(253,89,2,.36); }
}

/* Paliers de largeur : « ou S'inscrire » seulement en grand écran, bouton principal masqué sous 1366 px. */
@media (min-width:1201px) and (max-width:1799px){
  .c27-main-header .user-area.signin-area > span,
  .c27-main-header .user-area.signin-area > a ~ a{ display:none; }
}
@media (min-width:1201px) and (max-width:1365px){
  .c27-main-header .header-button{ display:none; }
}
@media (min-width:1201px) and (max-width:1439px){
  .c27-main-header .header-top{ padding:0 18px; }
  .c27-main-header .header-center{ margin-left:12px !important; }
  .c27-main-header .i-nav > ul.main-menu > li{ margin:0 5px !important; }
}
@media (min-width:1366px) and (max-width:1439px){
  .c27-main-header .i-nav > ul.main-menu > li{ margin:0 4px !important; }
  .c27-main-header .header-button a.buttons{ padding:10px 14px !important; }
}
@media (min-width:1440px){
  .c27-main-header .header-center{ margin-left:16px !important; }
  .c27-main-header .i-nav > ul.main-menu > li{ margin:0 7px !important; }
  .c27-main-header .i-nav > ul.main-menu > li > a{ font-size:14px !important; }
}
@media (min-width:1600px){
  .c27-main-header .header-top{ padding:0 28px; }
  .c27-main-header .i-nav > ul.main-menu > li{ margin:0 9px !important; }
  .c27-main-header .i-nav > ul.main-menu > li > a{ font-size:14.5px !important; }
}
@media (min-width:1800px){
  .c27-main-header .header-center{ margin-left:24px !important; }
  .c27-main-header .i-nav > ul.main-menu > li{ margin:0 12px !important; }
  .c27-main-header .i-nav > ul.main-menu > li > a{ font-size:15px !important; }
}
@media (min-width:1900px){
  .c27-main-header .header-left .quick-search-instance{ display:block; margin-left:18px; }
  .c27-main-header .header-right .search-trigger{ display:none; }
  .c27-main-header .header-left .header-search{ width:240px; }
  .c27-main-header .header-left .header-search input{ height:42px; padding:10px 14px 10px 38px !important; border-radius:999px; background:#f5f2ee; border:1px solid transparent; font-size:14px; }
  .c27-main-header .header-left .header-search input:focus{ background:#fff; border-color:#ffd2b3; }
  .c27-main-header .header-left .header-search > i.mi.search{ left:13px; top:50%; transform:translateY(-50%); }
}

/* Fenêtre de recherche ouverte par la loupe. Le thème la réserve au mobile et la masque au-dessus
   de 1200 px (#quicksearch-mobile-modal{display:none!important}) : on l'autorise une fois ouverte
   (.show-modal) et on en fait un panneau centré. */
@media (min-width:1201px){
  #quicksearch-mobile-modal.show-modal{ display:flex !important; align-items:flex-start; justify-content:center; padding:96px 24px 24px !important; background:rgba(20,16,12,.42); }
  #quicksearch-mobile-modal .modal-dialog{ width:100%; max-width:680px; margin:0; position:relative; top:auto; }
  #quicksearch-mobile-modal .modal-content{ position:relative; border:0; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.28); padding:8px 62px 8px 12px; overflow:visible; }
  #quicksearch-mobile-modal .header-search{ display:block !important; width:100%; float:none; } /* flottant dans le thème : le panneau s'effondrait à 16 px */
  #quicksearch-mobile-modal .header-search input{ height:54px; font-size:17px; color:#1a1a1a !important; background:transparent !important; border:0 !important; padding:0 0 0 34px !important; }
  #quicksearch-mobile-modal .header-search input::placeholder{ color:#8a8178 !important; }
  #quicksearch-mobile-modal .header-search > i.mi.search{ color:#d94901 !important; top:50%; transform:translateY(-50%); }
  #quicksearch-mobile-modal button.close{ position:absolute; z-index:5; right:14px; top:50% !important; transform:translateY(-50%); width:36px; height:36px; margin:0; padding:0; border-radius:50%; border:1px solid rgba(0,0,0,.12); background:#fff; opacity:1; display:flex; align-items:center; justify-content:center; }
  #quicksearch-mobile-modal button.close span{ font-size:22px; line-height:1; color:#5c5c5c; }
  #quicksearch-mobile-modal .instant-results{ top:calc(100% + 14px); left:-12px; right:-62px; width:auto; border-radius:16px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.18); }
}

/* ---------- Tablette et mobile : panneau de menu ---------- */
@media (max-width:1200px){
  .c27-main-header .i-nav .mobile-nav-button a,
  .c27-main-header .i-nav .pvse-mobile-devis-cta a{ display:flex !important; align-items:center; justify-content:center; width:auto !important; margin:0 16px; height:50px; border-radius:12px; font-weight:700; text-align:center; }
  .c27-main-header .i-nav .mobile-nav-button{ margin-top:16px; }
}