/*****************************************
 * CaniGuide – Navigation
 *
 * Périmètre : menu desktop, drawer mobile off-canvas,
 * sous-menus, CTA « Trouve ton chien », overlay recherche.
 *
 * Composants à venir :
 *  - Burger mobile (48×48, fond, SVG 28px)
 *  - Drawer off-canvas (slide-in via transform, overlay sombre)
 *    → on accroche le CSS sur la classe d'état Astra native,
 *      pas de réinjection de markup.
 *  - Sous-menus mobile en accordion
 *  - Underline animé desktop + states current/hover
 *  - Sous-menus desktop : fond, shadow, flèche visible
 *  - CTA « Trouve ton chien » desktop + drawer
 *  - Overlay recherche
 *
 * Dépend de : caniguide-global-css (variables --cg-*).
 *****************************************/


/* =========================================================
   COMPOSANT #2 — Burger mobile
   Cible tactile 48×48 (WCAG 2.5.5), SVG 28 px, fond discret.

   La bascule menu↔close reste 100 % gérée par Astra via
   .menu-toggle.toggled .ast-close-svg { display: block }
   + .menu-toggle .ast-close-svg { display: none }.
   On n'override que la taille, le fond et la couleur.

   Scope #ast-mobile-header pour élever la spécificité à
   (1,2,0) > Astra (0,2,0) sans recourir à !important.
   ========================================================= */

#ast-mobile-header .main-header-menu-toggle.ast-mobile-menu-trigger-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px;
  background: var(--cg-bg-soft);
  border: 1px solid var(--cg-border);
  border-radius: 50%;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

#ast-mobile-header .main-header-menu-toggle.ast-mobile-menu-trigger-minimal:hover {
  background: var(--cg-border);
  border-color: var(--cg-border-strong);
}

#ast-mobile-header .main-header-menu-toggle.ast-mobile-menu-trigger-minimal:focus-visible {
  background: var(--cg-border);
  border-color: var(--cg-border-strong);
  outline: 2px solid var(--cg-accent);
  outline-offset: 2px;
}

/* SVG burger + croix : taille uniforme, fill Caniguide.
   Cible la classe commune aux deux (.ast-mobile-svg),
   donc menu-svg ET close-svg passent à 28 px sans toucher
   à leur display (toujours géré par Astra). */
#ast-mobile-header .mobile-menu-toggle-icon .ast-mobile-svg {
  width: 28px;
  height: 28px;
  fill: var(--cg-accent);
}


/* =========================================================
   COMPOSANT #3 — Drawer mobile off-canvas

   État géré 100 % par Astra via body.ast-main-header-nav-open
   (vérifié dans frontend.js Astra free l.807-816). Notre CSS
   ne fait que repeindre le panneau natif en drawer et superposer
   un overlay derrière. Aucune écriture de classe d'état côté
   nous : nav.js délègue toutes les fermetures à Astra via un
   click simulé sur le burger.

   Réversibilité : désactiver ce bloc → le panneau retombe sur
   le dropdown Astra natif (display:block dans son flux), sans
   casse.

   Échelle z-index (audit thème enfant : max 12000 sur sticky CTA
   fiche pro ; plafond WP admin bar : 99999) :
     overlay     90000  (au-dessus de tout, sous admin bar)
     drawer      90001
     header bar  90002  (seulement quand .ast-main-header-nav-open)

   Offset vertical : le drawer démarre sous la header bar Astra
   (hauteur réelle ~95 px avec le nouveau picto, ~80 px avec
   l'ancien wordmark) + admin bar WP quand connecté (46 mobile /
   32 desktop ≥ 783 px). Auparavant 80 px figé + variantes
   body.admin-bar explicites ; remplacé par var(--cg-header-bottom)
   posée par nav.js qui lit rect.bottom du #masthead — coords en
   viewport absolu, l'admin bar est donc déjà incluse, pas besoin
   des variantes admin-bar. Fallback 80 px préserve un rendu
   fonctionnel si le JS ne tourne pas.
   ========================================================= */

/* Drawer — panneau natif Astra transformé.
   Toujours position:fixed même fermé : seul transform change,
   transition douce garantie sans re-layout. */
#ast-mobile-header .ast-mobile-header-content {
  --cg-drawer-top: var(--cg-header-bottom, 80px);
  position: fixed;
  top: var(--cg-drawer-top);
  right: 0;
  width: 85%;
  max-width: 360px;
  height: calc(100vh - var(--cg-drawer-top));
  height: calc(100dvh - var(--cg-drawer-top)); /* iOS Safari moderne */
  background: var(--cg-bg);
  box-shadow: var(--cg-shadow-lg);
  z-index: 90001;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Drawer ouvert : Astra a posé .ast-main-header-nav-open. */
body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content {
  transform: translateX(0);
}

/* Overlay sombre — div .cg-nav-overlay injectée par nav.js à l'init.
   Toujours en DOM, pilotée par opacity + visibility pour la transition.
   pointer-events: none au repos → clics passent à travers normalement
   sur les pages où le menu n'est pas ouvert.
   inset:0 (donc top:0) : couvre le viewport entier visuellement,
   l'admin bar WP (99999) et la header bar Astra (90002 ci-dessous)
   restent au-dessus, donc visibles et interactifs. */
.cg-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

body.ast-main-header-nav-open .cg-nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Header bar (logo + burger) élevée au-dessus du drawer et de
   l'overlay UNIQUEMENT quand le drawer est ouvert : le burger
   reste tappable pour fermer. Hors état ouvert, on ne touche
   pas à l'empilement naturel du masthead. */
body.ast-main-header-nav-open #ast-mobile-header > .ast-main-header-wrap {
  position: relative;
  z-index: 90002;
}

/* Hisse le stacking context de #masthead au-dessus de l'overlay
   et de tous les sticky/fixed de page (sidebar races 10000,
   filters-toggle-btn 9999, scroll-top 99) UNIQUEMENT quand le
   drawer est ouvert. Le drawer et la header bar étant des
   descendants de #masthead (pos:relative + z:99 natif Astra),
   ils étaient piégés à z-index effectif 99 au niveau root, ce
   qui laissait l'overlay (90000) et la sidebar (10000) passer
   devant — cf. hit-test elementFromPoint au centre du drawer.

   Hors état ouvert, #masthead retrouve son z=99 natif Astra :
   zéro régression. */
body.ast-main-header-nav-open #masthead {
  z-index: 90002;
}


/* =========================================================
   COMPOSANT #4 — Sous-menus mobile en accordion

   Astra gère déjà nativement :
   - le toggle d'un sous-menu sur clic du <button.ast-menu-toggle>
     (frontend.js l.998+) en posant inline style="display:block"
     et la classe .ast-submenu-expanded sur le <li> parent ;
   - le « un seul ouvert à la fois » (vérifié en live : ouvrir
     Pros referme Outils automatiquement).

   Ce qu'on ajoute :
   - une vraie transition douce d'ouverture (max-height + ease) ;
   - un pivot de la flèche à 180° à l'état ouvert ;
   - l'élargissement de la zone de clic à toute la ligne (cf. JS).

   Note sur !important : Astra applique style="display:none/block"
   en inline sur .sub-menu — impossible de transitionner sur
   display. On force display:block sur la classe et on contrôle
   la visibilité par max-height qui s'anime, en s'accrochant à
   .ast-submenu-expanded posée par Astra sur le <li>.
   ========================================================= */

/* Sub-menu : toujours display:block (override inline Astra),
   visibilité contrôlée par max-height transitionné.

   padding:0 au repos est CRITIQUE — Astra applique padding:8px 0
   sur .sub-menu qui s'ajouterait à max-height:0 (16 px de zone
   peinte) et laisserait fuiter visuellement le chevron du 1er
   sous-item via overflow:hidden, cf. hit-test elementFromPoint
   à (195,220) sur sub-menu fermé : retournait <span.ast-icon>. */
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children > .sub-menu {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Ouvert : Astra a posé .ast-submenu-expanded sur le <li>.
   600 px = ample pour 8 items (Pros) sans effet visible
   d'« arrêt » de transition. Padding restauré à la valeur
   Astra par défaut pour l'aération entre items. */
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children.ast-submenu-expanded > .sub-menu {
  max-height: 600px;
  padding: 8px 0;
}

/* Pivot de la flèche du <button.ast-menu-toggle> (seule flèche
   réellement rendue : le span.dropdown-menu-toggle dans le <a>
   est masqué côté Astra mobile, rect 0×0). */
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children > button.ast-menu-toggle .ast-arrow-svg {
  transition: transform 0.25s ease;
}

#ast-mobile-header .ast-mobile-header-content .menu-item-has-children.ast-submenu-expanded > button.ast-menu-toggle .ast-arrow-svg {
  transform: rotate(180deg);
}

/* Fix dilatation du <a.menu-link> à l'expansion.

   Cause isolée via CDP CSS.getMatchedStylesForNode — Astra
   applique sur tous les .menu-link du main menu :

     .main-header-menu > .menu-item > .menu-link,
     #astra-footer-menu > .menu-item > .menu-link {
       height: 100%; display: flex; align-items: center;
     }

   Quand le <li> parent (display:flex column) accueille un
   sub-menu ouvert qui grandit (ul:236px), la résolution du
   `height: 100%` du <a> sur un parent indefinite converge vers
   une valeur non triviale (147 px mesurée), ce qui crée un
   grand bloc vide entre le label et le 1er sous-item.

   Fix chirurgical : override de la seule propriété coupable.
   Vérifié en live (height:auto seul → a.h=42.89 stable
   ouvert/fermé) : flex et min-height d'origine ne contribuent
   pas, on ne les touche pas. */
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children > a.menu-link {
  height: auto;
}

/* ---------- COMPOSANT #4b — nettoyage cosmétique flèches ----------

   Deux artéfacts visibles post-#4, isolés via Playwright/CDP :

   1) Chevrons des sous-items sur une ligne séparée au-dessus du
      texte. Cause : Astra met display:block sur la SVG à
      l'intérieur du <span.ast-icon.icon-arrow> (span lui-même
      inline). Une SVG block force le retour à la ligne et étire
      le span à toute la largeur. Modèle adopté : sous-items =
      texte indenté simple, chevrons masqués. Plus sobre.

   2) Capsule ovale autour de la flèche du parent expanded.
      Cause : règle Astra générique sur <button> qui pose
      border-radius:4px + box-shadow:0 1px 2px rgba(0,0,0,.05).
      Notre <button.ast-menu-toggle> en hérite. On la nettoie.

   Modèle zone tactile : option B (parents href="#" + JS du #4
   ouvre via tap sur toute la ligne). La flèche reste un simple
   indicateur visuel, aucun élargissement du button nécessaire. */

#ast-mobile-header .ast-mobile-header-content .sub-menu .menu-link .ast-icon.icon-arrow {
  display: none;
}

/* ---------- COMPOSANT #4d — toute la ligne ouvre, flèche = indicateur ----------

   Bascule complète en modèle option B : Jordan a passé Pros et
   Guides en href="#" côté Apparence → Menus (avec « Voir tous les
   pros / guides » en 1er sous-item). Tous les parents avec
   sous-menu sont en href="#", donc le handler JS du #4 ouvre le
   sous-menu sur tap n'importe où sur la ligne via délégation à
   .ast-menu-toggle.click().

   On dégonfle la zone tactile 132×43 du #4c qui n'a plus de
   raison d'être : la flèche redevient un indicateur visuel pur,
   sans surface tactile propre.

   - pointer-events:none rend le button invisible aux clics
     souris/tactile tout en laissant le SVG affiché et pivoté.
   - Les clics atterrissent sur <a> (lui-même pointer-events:none
     via global.css:2035 pour les a[href="#"]) puis, par
     propagation, sur <li>. Le handler #4 capte au document level
     et délègue à button.click() programmatique (non bloqué par
     pointer-events:none).
   - Conséquence : aucun double-toggle possible — le button ne
     reçoit plus aucun clic utilisateur, seul le JS #4 le
     déclenche.

   Cosmétique #4b conservée (no box-shadow, no border-radius).
   Dimensions ajustées pour positionner le chevron à droite,
   centré verticalement sur la ligne, sans intercepter de surface
   tactile. */

#ast-mobile-header .ast-mobile-header-content .menu-item-has-children > button.ast-menu-toggle {
  pointer-events: none;
  top: 0;
  right: 0;
  width: auto;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  box-shadow: none;
  border-radius: 0;
}

/* Feedback visuel : la ligne du parent se teinte au survol et au
   tap. Indique que toute la ligne est cliquable comme un seul
   bouton. */
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children > a.menu-link {
  transition: background-color 0.15s ease;
}

#ast-mobile-header .ast-mobile-header-content .menu-item-has-children:hover > a.menu-link,
#ast-mobile-header .ast-mobile-header-content .menu-item-has-children:active > a.menu-link {
  background-color: var(--cg-bg-soft);
}


/* =========================================================
   COMPOSANT #5 — Desktop : underline animé + état courant

   Astra applique sur le 1er niveau du menu desktop une règle
   native qui passe les items current / current-menu-ancestor
   en bleu (--ast-global-color-1 = #045CB4) :

     .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
     .ast-builder-menu-1 .current-menu-ancestor > .menu-link {
       color: var(--ast-global-color-1);
     }

   Bonne nouvelle confirmée live : Astra applique aussi
   .current-menu-ancestor sur les parents en href="#" dès qu'un
   sous-item est la page courante. Sur /professionnels/ le parent
   « Professionnels » reçoit cette classe ; sur /comparateur-races-
   chien/ c'est « Outils ». On peut donc s'accrocher dessus pour
   l'underline permanent côté parents option B.

   Choix de rendu (sobre, charte Caniguide) :
   - Underline orange (--cg-accent), 2 px, pseudo ::after animé
     via scaleX (GPU friendly), accroché à :hover + current +
     current-menu-ancestor + :focus-visible (a11y clavier).
   - Couleur texte des items actifs : --cg-accent (override du
     bleu Astra) — cohérence avec l'underline.

   Tout scopé #ast-desktop-header : zéro fuite vers le drawer
   #ast-mobile-header (déjà stylé en #1→#4d).
   ========================================================= */

/* Neutralise le bleu Astra natif sur les items current /
   current-menu-ancestor en les passant en --cg-accent (orange).
   Spec #ast-desktop-header (1,4,1) > Astra (0,3,1). */
#ast-desktop-header .main-header-menu > .menu-item.current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
  color: var(--cg-accent);
}

/* Hover/focus : Astra applique une 2e règle bleue spec (0,3,1)

     .ast-builder-menu-1 .menu-link:hover,
     .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link
       { color: var(--ast-global-color-1); }

   qui bat la règle orange de global.css (spec 0,2,1). On reprend
   la main via le scope #ast-desktop-header (spec 1,3,2). */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover,
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus-visible {
  color: var(--cg-accent);
}

/* Container du pseudo : position:relative pour ancrer le ::after. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
  position: relative;
}

/* Underline : inset 1em (la valeur du padding-horizontal Astra
   sur .menu-link) pour que la barre couvre exactement la zone
   du label et non son padding. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
  content: '';
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 0;
  height: 2px;
  background-color: var(--cg-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::after,
#ast-desktop-header .main-header-menu > .menu-item.current-menu-item > .menu-link::after,
#ast-desktop-header .main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus-visible::after {
  transform: scaleX(1);
}


/* =========================================================
   COMPOSANT #6 — Desktop : sous-menus restylés

   Le dropdown Astra natif est déjà position:absolute top:80
   avec z-index:99999 (au-dessus du masthead 90002, donc visible
   sur tout le contenu de page sans manipulation côté nous).
   border-radius:14px est déjà la valeur --cg-radius-md, on
   reprend en variable pour la cohérence. On renforce le shadow,
   on retire la border 1px quasi-invisible, on aligne sous-items
   sur la palette Caniguide, et on anime le chevron indicateur
   (qui existe nativement dans .dropdown-menu-toggle .ast-arrow-svg
   du <a> parent).

   Scopé #ast-desktop-header : zéro fuite vers le drawer mobile.
   Le ::after du <a> 1er niveau est intouché (pris par underline
   #5).
   ========================================================= */

/* Panneau dropdown */
#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu {
  background: var(--cg-bg);
  box-shadow: var(--cg-shadow-lg);
  border: 0;
  border-radius: var(--cg-radius-md);
  padding: 8px 0;
}

/* Sous-items : couleur charte + transition douce. Le hover bleu
   natif Astra (.ast-builder-menu-1 .menu-link:hover, spec 0,3,1)
   serait sinon hérité aussi par les sub-items — on l'override
   avec spec (1,5,0) via le scope. */
#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu .menu-link {
  color: var(--cg-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu .menu-item:hover > .menu-link,
#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu .menu-link:focus-visible {
  background-color: var(--cg-bg-soft);
  color: var(--cg-accent);
}

/* Sub-item current (Astra pose .current-menu-item sur le <li>
   quand on est sur la page correspondante) : --cg-accent permanent. */
#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu .current-menu-item > .menu-link {
  color: var(--cg-accent);
}

/* Label du parent : doit rester orange tant que le dropdown est
   ouvert, y compris quand le curseur descend dans le panneau (où
   <a>:hover n'est plus actif mais <li>:hover l'est toujours, car
   le panneau est descendant du <li>). Sans cette règle, le label
   « clignote » au passage du curseur du label vers le dropdown. */
#ast-desktop-header .main-header-menu > .menu-item-has-children:hover > .menu-link {
  color: var(--cg-accent);
}

/* Chevron indicateur du parent : fill héritée (currentColor) pour
   qu'il suive automatiquement la teinte du label (gris au repos,
   orange si current/hover/ancestor via composant #5). Pivot 180°
   quand le dropdown est ouvert (état :hover du <li> parent côté
   Astra free). */
#ast-desktop-header .main-header-menu > .menu-item-has-children > .menu-link .dropdown-menu-toggle .ast-arrow-svg {
  fill: currentColor;
  transition: transform 0.2s ease;
}

#ast-desktop-header .main-header-menu > .menu-item-has-children:hover > .menu-link .dropdown-menu-toggle .ast-arrow-svg {
  transform: rotate(180deg);
}


/* =========================================================
   COMPOSANT #7 — CTA « Trouve ton chien »

   Injecté par inc/nav-hooks.php :
   - desktop  : hook astra_render_header_column (primary/right, prio 20)
   - mobile   : hook astra_mobile_header_content (prio 5, avant menu)

   Markup partagé : <a class="cg-nav-cta cg-nav-cta--{context}">,
   wrappé dans <div class="cg-nav-cta-wrap cg-nav-cta-wrap--{context}">
   pour la position dans le flex parent sans contraindre le bouton.

   URL : /quiz-quel-chien-est-fait-pour-vous/ (constante PHP).
   ========================================================= */

/* Style de base du bouton — commun aux deux contextes. */
.cg-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cg-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--cg-radius-md);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.cg-nav-cta:hover,
.cg-nav-cta:focus-visible {
  background-color: var(--cg-accent-hover);
  color: #fff;
  box-shadow: var(--cg-shadow-sm);
}

.cg-nav-cta:focus-visible {
  outline: 2px solid var(--cg-primary);
  outline-offset: 2px;
}

/* --- Desktop : compact à droite du menu. -----------------
   Le wrap s'insère comme 2e enfant de
   .site-header-primary-section-right (display:flex, justify-end). */
#ast-desktop-header .cg-nav-cta-wrap--desktop {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

#ast-desktop-header .cg-nav-cta--desktop {
  padding: 10px 18px;
  font-size: 0.95rem;
}

/* --- Mobile : en tête du drawer, pleine largeur.
   Le wrap est le 1er enfant de .ast-mobile-header-content,
   au-dessus du menu mobile (.ast-builder-menu-mobile). ------- */
#ast-mobile-header .cg-nav-cta-wrap--mobile {
  padding: 16px 20px 8px;
}

#ast-mobile-header .cg-nav-cta--mobile {
  display: flex;
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
}


/* =========================================================
   COMPOSANT #8a — Recherche : icône loupe + overlay
   (form ajouté au #8b)

   Injection (nav-hooks.php) :
   - Loupe desktop : astra_render_header_column primary/right prio 15
     (entre menu @10 et CTA @20).
   - Loupe mobile  : astra_render_mobile_header_column primary/right
     prio 5 (avant burger @10) → visuellement à gauche du burger.
   - Overlay       : wp_footer prio 10 → un seul <div#cg-search-overlay>
     en fin de body, partagé par les deux loupes.

   z-index : 90010 (au-dessus du masthead 90002, du drawer 90001 et
   de son overlay 90000 ; sous l'admin bar WP 99999 pour ne pas la
   masquer en mode connecté).

   Comportement (nav.js) : ouvre/ferme via class .cg-search-overlay-open
   sur <body> (pattern symétrique au drawer #3 qui utilise
   .ast-main-header-nav-open). Esc/croix/clic-fond ferment.
   Scroll-lock html+body. Focus auto + focus trap basique.
   ========================================================= */

/* --- LOUPES (toggles) ------------------------------------- */

.cg-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--cg-primary);
  border-radius: 50%;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.cg-search-toggle:hover,
.cg-search-toggle:focus-visible {
  color: var(--cg-accent);
  background-color: var(--cg-bg-soft);
}

.cg-search-toggle:focus-visible {
  outline: 2px solid var(--cg-accent);
  outline-offset: 2px;
}

.cg-search-toggle__icon {
  display: block;
}

/* --- Variante desktop : compact, à droite du menu --------- */

#ast-desktop-header .cg-search-toggle-wrap--desktop {
  display: flex;
  align-items: center;
  margin-left: 8px; /* sépare du menu */
}

#ast-desktop-header .cg-search-toggle--desktop {
  width: 40px;
  height: 40px;
}

#ast-desktop-header .cg-search-toggle--desktop .cg-search-toggle__icon {
  width: 22px;
  height: 22px;
}

/* --- Variante mobile : cible tactile WCAG, à gauche du burger ----
   On reprend les mêmes dimensions que le burger (#2 : 48×48 cible
   avec SVG 28) pour une cohérence visuelle parfaite. */

#ast-mobile-header .cg-search-toggle-wrap--mobile {
  display: flex;
  align-items: center;
  margin-right: 8px; /* sépare du burger */
}

#ast-mobile-header .cg-search-toggle--mobile {
  min-width: 48px;
  min-height: 48px;
  background: var(--cg-bg-soft);
  border: 1px solid var(--cg-border);
}

#ast-mobile-header .cg-search-toggle--mobile:hover,
#ast-mobile-header .cg-search-toggle--mobile:focus-visible {
  background-color: var(--cg-border);
  border-color: var(--cg-border-strong);
}

#ast-mobile-header .cg-search-toggle--mobile .cg-search-toggle__icon {
  width: 24px;
  height: 24px;
}


/* --- OVERLAY SEARCH --------------------------------------- */

.cg-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 90010;
  background-color: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* padding-top = bas du header (var posée par nav.js, fallback
     80 px comme valeur historique) → le panneau démarre pile sous
     le header. inclut auto l'offset admin bar via rect.bottom. */
  padding: var(--cg-header-bottom, 80px) 20px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.cg-search-overlay-open .cg-search-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Surcharge l'attribut [hidden] dès que body porte la classe ouverte,
   pour permettre la transition (sinon display:none coupe l'animation). */
body.cg-search-overlay-open .cg-search-overlay[hidden] {
  display: flex;
}

.cg-search-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Fond semi-opaque pour garantir le contraste de la croix
     blanche contre la zone supérieure du viewport, où l'overlay
     (rgba 0.55) se superpose au header qui a un fond clair et
     produit un gris moyen peu différencié. */
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.cg-search-overlay__close:hover,
.cg-search-overlay__close:focus-visible {
  background-color: rgba(0, 0, 0, 0.65);
}

.cg-search-overlay__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cg-search-overlay__panel {
  width: 100%;
  max-width: 640px;
  background: var(--cg-bg);
  border-radius: var(--cg-radius-md);
  box-shadow: var(--cg-shadow-lg);
  padding: 32px 28px;
  transform: translateY(-12px);
  transition: transform 0.25s ease;
}

body.cg-search-overlay-open .cg-search-overlay__panel {
  transform: translateY(0);
}

.cg-search-overlay__title {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cg-primary);
  flex-shrink: 0;
}

/* --- COMPOSANT #8b — Form de recherche ---------------------

   <form> méthode get vers home_url('/') (recherche WP standard).
   Layout flex : input large + bouton submit compact à droite,
   regroupés dans un même cadre arrondi. focus visible sur le
   cadre entier pour signaler l'état actif.
   ---------------------------------------------------------- */

.cg-search-overlay__form {
  display: flex;
  align-items: stretch;
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  /* Le panneau est flex column avec max-height : sans ce flex-shrink:0,
     la barre se fait écraser verticalement quand « Voir plus » fait
     grandir la liste de résultats. Seul __results doit absorber le
     débordement (il a overflow-y:auto + min-height:0). */
  flex-shrink: 0;
}

/* État focused : on accroche sur :focus-within pour signaler que
   le form complet est actif quand l'input ou le submit a le focus. */
.cg-search-overlay__form:focus-within {
  border-color: var(--cg-accent);
  box-shadow: 0 0 0 3px rgba(234, 125, 31, 0.18); /* halo --cg-accent */
}

.cg-search-overlay__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--cg-primary);
  /* Retire le X natif de Safari/Edge dans les inputs type=search,
     visuellement redondant avec notre croix d'overlay. */
  -webkit-appearance: none;
  appearance: none;
}

.cg-search-overlay__input::placeholder {
  color: var(--cg-text-muted);
  opacity: 1; /* iOS Safari met 0.5 par défaut */
}

/* Submit : pastille orange compacte à droite avec icône loupe. */
.cg-search-overlay__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0 18px;
  background: var(--cg-accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.cg-search-overlay__submit:hover,
.cg-search-overlay__submit:focus-visible {
  background-color: var(--cg-accent-hover);
}

.cg-search-overlay__submit:focus-visible {
  outline: 2px solid var(--cg-primary);
  outline-offset: -4px; /* inset pour rester dans le cadre */
}


/* =========================================================
   COMPOSANT #9b — Résultats live de recherche

   Sections empilées (Races / Guides / Pros), chaque section avec
   un titre discret + compteur + liste d'items (miniature + titre
   + sous-type pour les pros). Layout préparé pour les ajouts
   #9c (« voir plus » par section) et #9d (état populaires).
   ========================================================= */

/* Panneau devient un flex column quand des résultats existent :
   titre + form en haut « collés », résultats scrollables en
   dessous. Cap de hauteur pour rester dans le viewport. */
.cg-search-overlay__panel {
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.cg-search-overlay__results {
  margin-top: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0; /* permet le shrink en flex parent */
}

/* États (loading, empty, error) */
.cg-search-results__state {
  padding: 24px 0;
  color: var(--cg-text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.cg-search-results__state--loading {
  /* discret : juste un texte ; éviter le spinner pour rester
     sobre côté Caniguide. */
}

.cg-search-results__state--empty,
.cg-search-results__state--error {
  color: var(--cg-text);
}

/* Sections empilées verticalement, séparées par une fine ligne. */
.cg-search-results__section {
  padding-block: 12px 4px;
  border-top: 1px solid var(--cg-border);
}

.cg-search-results__section:first-child {
  border-top: 0;
  padding-top: 0;
}

.cg-search-results__heading {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-text-muted);
}

.cg-search-results__count {
  font-weight: 400;
  color: var(--cg-text-muted);
}

.cg-search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cg-search-results__item {
  margin: 0;
}

.cg-search-results__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--cg-radius-sm);
  color: var(--cg-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.cg-search-results__item.is-active > .cg-search-results__link,
.cg-search-results__link:hover,
.cg-search-results__link:focus-visible {
  background-color: var(--cg-bg-soft);
  outline: none;
}

.cg-search-results__link:focus-visible {
  box-shadow: 0 0 0 2px var(--cg-accent);
}

/* Miniature 48×48, arrondi sobre. */
.cg-search-results__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--cg-radius-sm);
  overflow: hidden;
  background-color: var(--cg-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cg-search-results__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder thumb : fond bg-soft + petit point d'accent.
   Cohérent avec « pas de trou » du brief. */
.cg-search-results__thumb--placeholder {
  position: relative;
}
.cg-search-results__thumb--placeholder::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cg-border-strong);
}

.cg-search-results__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-search-results__title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  /* trim 2 lines : moderne, fallback OK pour ancien browser */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cg-search-results__subtype {
  font-size: 0.78rem;
  color: var(--cg-text-muted);
}

/* --- #9c — Voir plus : discret, sobre.
   Texte centré, underline subtil, charte Caniguide. Pas de gros
   bouton, juste un lien-bouton qui se distingue par la couleur. */
.cg-search-results__more-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.cg-search-results__more {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cg-accent);
  cursor: pointer;
  border-radius: var(--cg-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cg-search-results__more:hover,
.cg-search-results__more:focus-visible {
  background-color: var(--cg-bg-soft);
  outline: none;
}

.cg-search-results__more:focus-visible {
  box-shadow: 0 0 0 2px var(--cg-accent);
}

.cg-search-results__more.is-loading,
.cg-search-results__more:disabled {
  color: var(--cg-text-muted);
  cursor: default;
  background: transparent;
}


/* =========================================================
   COMPOSANT #9d — Recherches fréquentes (tags)

   Affichées par défaut dans la zone vide réservée au #9b
   (term < 2 caractères). Cachées via [hidden] côté JS dès que
   l'input ≥ 2 caractères. Tags = vrais <button> focusables.
   ========================================================= */

.cg-search-overlay__suggestions {
  margin-top: 20px;
  flex-shrink: 0;
}

.cg-search-overlay__suggestions[hidden] {
  display: none;
}

.cg-search-overlay__suggestions-title {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-text-muted);
}

.cg-search-overlay__suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cg-search-overlay__suggestion {
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-pill);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cg-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}

.cg-search-overlay__suggestion:hover,
.cg-search-overlay__suggestion:focus-visible {
  background: var(--cg-bg-soft);
  border-color: var(--cg-accent);
  color: var(--cg-accent);
  outline: none;
}

.cg-search-overlay__suggestion:focus-visible {
  box-shadow: 0 0 0 2px var(--cg-accent);
}