/* 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: #5B6B7A !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 #1C2733 !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 #4BA3D9 !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 krea_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). */
/* Survol aligné sur theme.button_primary / button_secondary (inversion de
   couleurs, registre joaillerie). */
.btn-link-primary:hover {
  background: transparent !important;
  color: #1C2733 !important;
  border-color: #1C2733 !important;
}

/* Le voile étant volontairement léger (on veut voir la plage), c'est une
   ombre portée douce — et non un assombrissement de toute l'image — qui
   garde le texte blanc lisible sur le sable et le ciel. Le bouton en est
   exclu : il a son propre fond plein. */
/* Une auréole plutôt qu'un voile.

   Le texte est blanc sur une photo claire ET sur une peau mate : aucun
   voile assez léger pour ne pas ternir l'image ne suffit à le détacher.
   La solution n'est pas d'assombrir la photo mais d'assombrir *autour des
   lettres* — trois ombres superposées, une serrée pour le tracé, deux
   larges pour la halo. La photo garde ses couleurs partout ailleurs. */
.hero-content {
  text-shadow:
    0 1px 2px rgba(8, 15, 24, 0.95),
    0 2px 10px rgba(8, 15, 24, 0.85),
    0 4px 30px rgba(8, 15, 24, 0.8);
}

.hero-content a {
  text-shadow: none;
}

/* Bouton du héros posé sur la vidéo (voir theme.button_on_dark) : Radix
   impose sa propre règle :hover sur les liens, on force l'inversion voulue. */
.btn-link-on-dark:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

.btn-link-secondary:hover {
  background: #1C2733 !important;
  color: #FFFFFF !important;
  border-color: #1C2733 !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.5 !important;
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !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, border_radius: 10px). */
.rt-TextFieldRoot {
  border-radius: 999px !important;
}

/* Une zone de texte multi-ligne en pilule serait illisible : elle garde des
   angles simplement adoucis. */
.rt-TextAreaInput {
  border-radius: 10px !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 krea_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;
  }
}

/* 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 les ancres de la nav (#collection, #phares). */
html {
  scroll-behavior: smooth;
}

/* ---------- Apparitions au scroll (voir assets/reveal.js) ----------
   Masquage appliqué UNIQUEMENT quand le script tourne (classe js-reveal
   posée par reveal.js) — sinon tout reste visible (progressive
   enhancement). */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-reveal .reveal.reveal-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal.reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Micro-interaction survol : carte produit / tuile catégorie soulevée. */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-4px);
}

/* ---------- Héros : vidéo de fond ----------
   Le bloc est rendu hors de la colonne centrale (voir page_shell, argument
   `hero`), il occupe donc naturellement toute la largeur. */
.hero-block {
  overflow: hidden;
  isolation: isolate;
  /* Le sujet — les deux mains et les bagues — est une bande horizontale.
     Un bloc trop haut force le cadrage à grossir l'image pour la remplir,
     et on ne voit plus que des doigts. */
  min-height: min(72vh, 600px);
  max-height: min(78vh, 660px);
  display: flex;
  align-items: center;
}

.hero-media,
.hero-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  object-fit: cover;
  /* Les mains et les bagues sont au centre bas de la photo : on cadre
     dessus pour qu'elles restent visibles quelle que soit la hauteur du
     bloc, plutôt que de laisser le recadrage manger le sujet. */
  object-position: center 46%;
  /* Estompée sur les QUATRE bords : la photo naît et meurt dans la couleur
     de la page au lieu d'être un rectangle collé dessus. Deux masques
     superposés — un vertical, un horizontal — combinés en intersection :
     un pixel n'est visible que s'il l'est pour les deux, ce qui adoucit
     aussi les angles.

     Sans `mask-composite`, les deux masques s'additionneraient et les
     bords redeviendraient nets. */
  /* Aucun fondu : la photo garde des bords nets sur les quatre côtés.
     Essayé à 9 % puis à 3 %, les deux lus comme un flou. */
}

/* Voile entre la photo et le texte. La photo est beaucoup plus lumineuse
   qu'une vidéo de plage — robe jaune, mur blanc, peau claire — et du texte
   blanc n'y tient pas sans aide.

   Le voile est donc DENSE EN HAUT, là où passe le titre, et s'allège au
   centre bas pour laisser voir les mains et les bagues. Assombrir toute la
   photo réglerait la lisibilité mais cacherait le produit : c'est
   exactement ce qu'on ne veut pas. */
.hero-veil {
  /* Le voile n'assombrit plus toute la photo, seulement le centre, là où
     passe le texte. Une nappe elliptique : dense sous les lettres, nulle
     sur les bords — les bagues à gauche et la robe à droite gardent leurs
     couleurs.

     C'est le compromis entre les deux exigences qui se contredisent :
     « moins de voile » et « texte au milieu ». Un voile uniforme assez
     dense pour du blanc centré ternirait forcément toute l'image.

     Le second dégradé fait mourir la photo dans la couleur de la page en
     bas, plutôt que de la couper net. */
  /* Nappe elliptique centrée sous le texte : dense au milieu, nulle sur
     les bords. Du blanc au centre d'une photo claire ne se lit pas sans
     cet assombrissement — essayé plus léger, le titre disparaissait.

     Les bords de la photo, eux, gardent leurs couleurs : les bagues à
     gauche et la robe à droite ne sont pas touchées. C'est le compromis
     assumé entre lisibilité et image lumineuse. */
  /* Essai sans voile : la photo garde toutes ses couleurs, le texte ne
     compte que sur son auréole (.hero-content). */
  background: none;
}

/* Vidéo décorative : personne ne doit la voir bouger si le système demande
   moins d'animation. Le poster reste affiché à sa place. */
@media (prefers-reduced-motion: reduce) {
  video.hero-video {
    animation: none !important;
  }
}

/* Le bloc de texte du héros vit dans la moitié droite, sur la robe jaune.
   Sur téléphone la photo est trop étroite pour se partager : le texte
   reprend toute la largeur et le voile redevient vertical. */
@media (max-width: 820px) {
  /* Sur téléphone la photo est trop étroite pour se partager : le texte
     reprend toute la largeur et le voile redevient vertical. */
  /* Sur téléphone la photo passe derrière tout le texte, sans zone calme
     où se réfugier : le voile doit y être un cran plus dense. */
  .hero-veil {
    background:
      linear-gradient(to bottom,
        rgba(16, 26, 38, 0.18) 0%,
        rgba(16, 26, 38, 0.42) 55%,
        rgba(16, 26, 38, 0.44) 86%,
        rgba(245, 249, 252, 0.55) 97%,
        #F5F9FC 100%);
  }
}