/* ============================================================================
   RECHERCHE HEADER — « piste A : la loupe fondue » + animation d'étirement
   Maquette Ilmarë (mandat Roi 24/07) : atelier/boutchichiya-recherche-2026-07/
   recherche-en-situation.html. Greffé sur le form natif roogan (.search-form)
   via searchform.php enfant → classes .txsearch*. Enqueue conditionnel header
   (functions.php), dépendance roogan-main → gagne la cascade sans !important
   sauf là où le thème impose une largeur au form.

   REPOS  : compact — juste la loupe en pastille ronde (44×44), bord fin or.
   CLIC   : le champ s'étire vers la gauche (44 → 340px), cubic-bezier souple,
            0.42s (validé Roi « bonne vitesse, très discret, parfait »).
   Tokens = charte boutchichiya (identiques à la maquette Ilmarë).
   ============================================================================ */

:root {
  --tx-gold:#C6A14E;
  --tx-gold-200:#D8B65C;
  --tx-fg-on-dark:#EFE6D2;
  --tx-fg-on-dark-2:#B3A37E;
}

/* --- conteneur = le <form>. Au repos : pastille ronde compacte. ---
   Préfixe .roogan-header pour ÉGALER la spécificité des règles natives du thème
   (`.roogan-header .search-form button[type=submit]` etc.) et reprendre la main
   sans !important. Le thème pose `position:absolute` sur le bouton et une largeur
   sur le form/input → on remet tout dans notre flux flex. */
.roogan-header .txsearch,
.txsearch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* ABSOLU DANS TOUS LES ÉTATS (fix zigzag, Roi 24/07 ~21h50) : à la fermeture,
     le form repassait dans le flux ENCORE large (189px animés vers 44) → il
     poussait la rangée, le menu bondissait de 40px et revenait (mesuré banc :
     nav.left 238→198→238 en 60ms). Hors du flux en permanence = zéro
     interaction avec le menu, jamais — et la loupe ne glisse plus entre
     repos et ouvert (même ancre droite). */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  height: 44px;
  width: 44px;                        /* REPOS : compact, juste la loupe */
  min-width: 44px;
  max-width: none;
  /* au repos la loupe (34px) est centrée dans la pastille (44px) : (44-34)/2=5 */
  padding: 0 5px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(251, 248, 241, .05);
  border: 1px solid rgba(198, 161, 78, .45);
  border-radius: 24px;
  transition: width .42s cubic-bezier(.22, .9, .3, 1), border-color .3s, background .3s;
}

/* --- OUVERT : le champ s'étire, la dorure se pose ---
   vB « surimpression » (choix auteur Círdan 24/07 soir, sur mesure Aulë) : la
   colonne header du form fait 199px — ouvert en FLUX à 340px, il tombait à la
   2e ligne (banc 1280 : form.top 72 vs nav.top 16). En ouvert, le champ passe
   en ABSOLU ancré à droite : il s'étire PAR-DESSUS le menu (qui ne bouge pas
   d'un pixel — zéro reflow), garde ses 340px validés, et le menu réapparaît à
   la fermeture. Le fond passe en sombre quasi-opaque À L'OUVERTURE uniquement
   (nécessité vB : en translucide .08, les items de menu transparaîtraient sous
   la saisie) — ajout Aulë signalé à Círdan, réversible en 1 ligne.
   ⚠️ Verdict Roi attendu (vB + dorure en contexte réel, demande Ilmarë) avant
   toute prod. */
.roogan-header .txsearch.is-open,
.txsearch.is-open {
  /* position/ancre : héritées du bloc de base (absolu permanent, fix zigzag).
     189px — RÉGLAGE ROI VERBATIM (inspecteur, 24/07 ~21h30). À cette largeur,
     ancré à droite, le champ ouvert tient ENTIÈREMENT dans sa propre zone
     (le menu finit ~992px, le champ démarre ~1012) : plus d'empiètement sur
     le menu → plus besoin de fond opaque (retiré au même réglage Roi — le
     fond de repos translucide .05 du bloc de base s'applique). */
  width: 189px;
  border-color: var(--tx-gold-200);
  box-shadow: 0 0 0 3px rgba(198, 161, 78, .13);
  cursor: default;
}

/* --- le champ texte : masqué au repos (opacity), révélé à l'ouverture ---
   On égale la spécificité du thème (`.roogan-header .search-form input[type=search]`)
   et on neutralise ses bordures/largeurs/position. */
.roogan-header .txsearch input.txsearch__input,
.txsearch input.txsearch__input {
  /* FERMÉ : l'input n'occupe AUCUN espace (retour Roi 24/07 soir : il prenait
     32px dans la pastille de 44 → la loupe était comprimée/coupée selon la
     largeur). Fermé = 0px ; les dimensions reviennent avec .is-open. */
  flex: 0 0 0px;
  min-width: 0;
  position: static;
  width: 0;
  height: auto;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
  color: var(--tx-fg-on-dark);
  font-family: inherit;              /* police du site (héritée du header) */
  /* 1.6rem = 16px (racine 10px) — même correction d'échelle que la déployée
     (Roi 24/07 ~22h15 : « augmente aussi celui du header »). */
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0;
  opacity: 0;
  transition: opacity .3s .12s;
  -webkit-appearance: none;
  appearance: none;
}
.roogan-header .txsearch.is-open input.txsearch__input,
.txsearch.is-open input.txsearch__input {
  flex: 1;
  width: auto;
  padding: 0 0 0 16px;
  opacity: 1;
}
/* Le thème parent pose un border 1px SOLIDE sur l'input de recherche AU FOCUS
   (« cadre dans le cadre » vu par le Roi — mon reset de base ne couvrait pas
   :focus). Jumeau :focus du reset, même spécificité + pseudo → gagne. */
.roogan-header .txsearch input.txsearch__input:focus,
.txsearch input.txsearch__input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: none;
}
.roogan-header .txsearch input.txsearch__input::placeholder,
.txsearch input.txsearch__input::placeholder { color: var(--tx-fg-on-dark-2); opacity: .7; }
.txsearch input.txsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- la loupe (bouton submit) ---
   Le thème force `position:absolute;width:35px;height:100%;right:0;top:0;font-size:0`
   → on RÉTABLIT un bouton en flux, rond, doré, dans la pastille. */
.roogan-header .txsearch .txsearch__go,
.txsearch .txsearch__go {
  flex: 0 0 auto;
  position: static;
  width: 34px;
  height: 34px;
  right: auto;
  top: auto;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--tx-gold-200);
  font-size: 0;                       /* pas de libellé texte (on n'en émet pas) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  box-shadow: none;
}
.roogan-header .txsearch .txsearch__go:hover,
.txsearch .txsearch__go:hover { background: rgba(198, 161, 78, .16); color: var(--tx-gold-200); }
/* Le SVG était calculé à width:0 (flex parent l'écrase / règle UA) → on FORCE
   sa largeur avec une spécificité qui gagne + flex:none pour qu'il ne rétrécisse
   pas. `min-width` verrouille contre l'écrasement flex. */
.roogan-header .txsearch .txsearch__go .txsearch__loupe,
.txsearch .txsearch__go .txsearch__loupe {
  width: 19px;
  min-width: 19px;
  height: 19px;
  flex: 0 0 auto;
  display: block;
  color: var(--tx-gold-200);
}
/* Tracé : loupe DESSINÉE au trait (pas remplie). Le thème pose un `fill` sur les
   svg du header → on force fill:none sur le svg ET ses tracés, spécificité qui
   gagne, et on garde le stroke or. */
.roogan-header .txsearch .txsearch__loupe,
.txsearch .txsearch__loupe { fill: none; }
.roogan-header .txsearch .txsearch__loupe circle,
.roogan-header .txsearch .txsearch__loupe path,
.txsearch .txsearch__loupe circle,
.txsearch .txsearch__loupe path {
  stroke: var(--tx-gold-200);
  stroke-width: 2;
  fill: none;
  /* Le thème pose un sélecteur d'élément NU `circle` GLOBAL (min.css:1139,
     anneaux du player podcast) : transform:translate(10px,10px) + dasharray:440
     → notre cercle sortait de sa viewBox, il ne restait qu'un arc (« petit bout
     de loupe », Roi 24/07 soir). On neutralise TOUT ce que la règle globale
     pose — la loupe redevient entière. */
  transform: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  position: static;
}

/* --- le thème parent rend une icône via <i class="rf rf-search"> et son propre
   libellé texte sur le bouton ; notre searchform.php enfant ne les émet pas,
   donc rien à masquer. Garde-fou si une MAJ réintroduisait un libellé : --- */
.txsearch .txsearch__go .rf { display: none; }

/* --- Accessibilité clavier : focus visible sur la loupe --- */
.txsearch .txsearch__go:focus-visible {
  outline: 2px solid var(--tx-gold-200);
  outline-offset: 2px;
}

/* --- Mobile : le header mobile roogan a sa propre zone ; on garde la pastille
   compacte mais on borne la largeur ouverte à l'espace disponible. --- */
@media (max-width: 991px) {
  .txsearch.is-open { width: min(220px, 72vw); }
}

/* ============================================================================
   VARIANTE DÉPLOYÉE — pages de résultats (mandat Roi 24/07 soir).
   2e occurrence du MÊME moteur, TOUJOURS ouverte, centrée dans le bandeau
   des résultats, grande (remplace l'ancien form blanc + bouton vert).
   Markup : search.php porte `txsearch txsearch--deploye is-open` (is-open en
   dur) ; recherche-loupe.js IGNORE cette variante (gardes) — pas de repli,
   pas de fermeture au clic dehors : elle est déployée par état, pas par geste.
   ============================================================================ */
.txsearch--deploye,
.txsearch--deploye.is-open {
  position: static;          /* annule la surimpression du header */
  transform: none;
  z-index: auto;
  width: min(680px, 100%);
  height: 52px;
  margin: 0 auto;            /* « bien centré au milieu » */
  cursor: default;
  /* s'assoit sur le bandeau vert sombre des résultats (tres-topbar) */
  background: rgba(4, 32, 14, .55);
  border-color: var(--tx-gold-200);
}
.txsearch--deploye .txsearch__input,
.txsearch--deploye.is-open .txsearch__input {
  flex: 1;
  width: auto;
  padding: 0 0 0 18px;
  opacity: 1;
  /* 1.6rem = 16px (racine thème 10px). Le 1.05rem initial rendait 10.5px —
     « trop petit » (Roi 24/07 ~21h20, capture). */
  font-size: 1.6rem;
}
.txsearch--deploye .txsearch__go { width: 40px; height: 40px; }