/* Overrides ciblant les éléments HTML natifs directement : les styles Radix
   (placeholder très pâle, anneau de focus bleu par défaut) ont une CSS
   propre au composant qui gagne face aux styles Reflex posés sur le
   wrapper — on cible donc input/textarea nativement, avec !important.
   (Technique reprise telle quelle de prosport/frontend/assets/custom.css,
   générique à toute appli Reflex+Radix, pas spécifique à ce projet.) */

input::placeholder,
textarea::placeholder {
  color: #8C6F6C !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Le champ visible (le cadre arrondi qu'on voit à l'écran) n'est pas
   l'<input> lui-même mais son conteneur Radix (.rt-TextFieldRoot) — l'input
   natif a une bordure à 0px, invisible. Tout l'anneau de focus doit donc
   être posé sur ce conteneur, pas sur l'input (constaté en inspectant le
   style calculé : border-width 0 sur l'input, donc une couleur de bordure
   dessus ne se voit jamais). Un seul anneau, couleur du texte plutôt que
   l'accent rose — pour ne pas le confondre avec un état d'erreur. */
.rt-TextFieldRoot:focus-within,
.rt-TextFieldRoot:has(:focus) {
  outline: none !important;
  box-shadow: 0 0 0 2px #2B211F !important;
}

/* Anneau de focus bleu par défaut du navigateur sur les <button>/<a> natifs
   (rx.el.button, mais aussi rx.link stylé en bouton via theme.button_primary/
   secondary — ex. "Passer commande", "Voir tout mon panier", "Voir la
   collection"...) — visible même après un simple clic souris dans Chrome,
   pas seulement au clavier. On le remplace par un anneau assorti à la
   palette, affiché uniquement au focus clavier (:focus-visible) pour ne pas
   perdre l'accessibilité. */
button:focus,
a:focus,
.rt-reset:not(.rt-TextFieldInput):not(.rt-TextAreaInput):focus,
.rt-BaseButton:focus {
  outline: none !important;
  box-shadow: none !important;
}

button:focus-visible,
a:focus-visible,
.rt-reset:not(.rt-TextFieldInput):not(.rt-TextAreaInput):focus-visible,
.rt-BaseButton:focus-visible {
  outline: 2px solid #FA6782 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* rx.link stylé en bouton (theme.button_primary/secondary appliqué via
   style=) : le survol défini dans "_hover" du dict ne s'applique pas — le
   composant Link de Radix a sa propre règle CSS :hover (texte bleu par
   défaut) qui gagne face au style inline posé par Reflex, même combat que
   les inputs ci-dessus. On cible donc les classes explicites posées sur ces
   liens (voir gaine_web.py, class_name="btn-link-primary/secondary") avec
   !important pour forcer le survol jaune voulu, cohérent avec les <button>
   natifs (qui, eux, fonctionnent déjà sans ce correctif). */
.btn-link-primary:hover {
  background: #FFF4BD !important;
  color: #2B211F !important;
}

.btn-link-secondary:hover {
  background: #FFF4BD !important;
  color: #2B211F !important;
  border-color: #FFF4BD !important;
}

/* Radix calcule la hauteur du champ via une formule CSS (--text-field-height)
   pensée pour SA police par défaut ; avec une police custom, ce calcul
   s'effondre et le texte se retrouve rogné en haut/bas. On sort du système
   de dimensionnement de Radix en forçant une hauteur automatique. */
.rt-TextFieldRoot {
  height: auto !important;
  min-height: 38px !important;
}

.rt-TextFieldInput,
.rt-TextAreaInput {
  height: auto !important;
  line-height: 1.4 !important;
  padding-top: 0.45em !important;
  padding-bottom: 0.45em !important;
}

/* Le rayon de bordure posé via style= sur rx.input/rx.text_area ne gagne
   pas toujours face au rayon par défaut de Radix (même famille de piège
   que la hauteur ci-dessus) — forcé ici pour rester cohérent avec le reste
   du design (theme.py : `input_style` en pilule, `textarea_style` adouci).
   Les champs d'une ligne sont en pilule ; les zones multi-lignes gardent un
   arrondi doux, la pilule ne fonctionnant pas sur plusieurs lignes. */
.rt-TextFieldRoot {
  border-radius: 999px !important;
}

.rt-TextAreaInput {
  border-radius: 16px !important;
}

/* ---------- Responsive ----------
   Pas de props responsive côté Reflex dans ce projet (tout est en valeurs
   fixes) — les ajustements mobile passent donc par ces media queries,
   ciblant les class_name posés explicitement sur les composants concernés
   dans gaine_web.py (product-detail-*, site-nav, nav-links-row). */

/* Fiche produit : la mise en page image (50%) + infos (50%) empile
   verticalement sous ~768px, sinon l'image et le texte sont écrasés sur les
   téléphones (l'essentiel du trafic attendu vu que le site est pensé pour
   être découvert depuis Instagram/TikTok). */
@media (max-width: 768px) {
  .product-detail-hstack {
    flex-direction: column !important;
  }

  .product-detail-media,
  .product-detail-info {
    width: 100% !important;
  }

  .product-detail-info {
    padding-left: 0 !important;
    padding-top: 1.5em !important;
  }

  /* Intro accueil (texte + photo) : même logique d'empilement. */
  .home-intro-hstack {
    flex-direction: column !important;
  }

  .home-intro-text,
  .home-intro-image {
    width: 100% !important;
  }

  .home-intro-text {
    padding-right: 0 !important;
    padding-bottom: 1.5em !important;
  }
}

/* Nav : espacement resserré + padding réduit sous ~480px pour que "Collection
   / Notre histoire / Suivre ma commande" ne pousse pas le site en scroll
   horizontal sur petit téléphone. La pilule (border-radius 999px) passe à un
   rayon fixe dès que son contenu passe sur plusieurs lignes (flex-wrap),
   sinon les extrémités très arrondies déforment une barre devenue haute.  */
@media (max-width: 480px) {
  .site-nav {
    padding: 1.1em 1em !important;
  }

  .nav-pill {
    border-radius: 22px !important;
    padding: 0.9em 1.2em !important;
  }

  .nav-links-row {
    gap: 0.9em !important;
  }
}

/* Défilement fluide pour le lien "Collection" de la nav (#produits). */
html {
  scroll-behavior: smooth;
}