/* ============================================================================
   WeLux — Couche Astryx (DÉMO, aperçu uniquement — ne pas déployer en prod)
   ----------------------------------------------------------------------------
   Valeurs adaptées d'Astryx (Meta Platforms, Inc., licence MIT) :
   - packages/core/src/motion/themeTiming.ts  (durées + courbes)
   - packages/core/src/theme/tokens.stylex.ts (rayons, ombres, tailles, typo)
   - packages/core/src/tailwind-theme.css     (échelle d'espacement 4px,
     sémantique des tokens : texte / surface / bordure / accent)
   - packages/core/src/motion/reducedMotion.ts (politique Reduced Motion)
   - packages/themes/* (7 thèmes : neutral, butter, chocolate, matcha,
     stone, gothic, y2k — l'idée « thème = surcharges de variables CSS »)
   Licence MIT : on peut copier et adapter librement ; la note MIT d'Astryx
   est conservée ici. Aucun composant React n'a été collé tel quel : Astryx
   est React 19 + StyleX, la web est en HTML brut — on a donc adapté les
   TOKENS et l'anatomie des composants (boutons, cartes, formulaires), pas
   le code React. Accent Welux conservé : or #b98a3c (pas l'accent neutre
   d'Astryx) ; langue de la démo Claudia : fond sombre, grille, gros titre.
   ========================================================================== */
:root{
  /* Astryx — durées (themeTiming.ts : declaredTimingTokens) */
  --ax-duration-fast-min:130ms; --ax-duration-fast:175ms; --ax-duration-fast-max:230ms;
  --ax-duration-medium-min:310ms; --ax-duration-medium:410ms; --ax-duration-medium-max:550ms;
  --ax-duration-slow-min:730ms; --ax-duration-slow:975ms; --ax-duration-slow-max:1300ms;
  --ax-duration-exit:var(--ax-duration-fast);
  /* Astryx — courbes (standard/entrance/move ; exit) */
  --ax-ease-standard:cubic-bezier(0.24,1,0.4,1);
  --ax-ease-entrance:cubic-bezier(0.24,1,0.4,1);
  --ax-ease-move:cubic-bezier(0.24,1,0.4,1);
  --ax-ease-exit:cubic-bezier(0.3,0,0.6,0.6);
  /* Astryx — rayons (inner 4 → element 8 → container 12 → page 28) */
  --ax-radius-inner:4px; --ax-radius-element:8px; --ax-radius-container:12px;
  --ax-radius-page:28px; --ax-radius-full:9999px;
  /* Astryx — ombres low/med/high (valeurs claires résolues, cf. tokens.stylex.ts) */
  --ax-shadow-low:0 1px 1px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.10);
  --ax-shadow-med:0 1px 2px rgba(0,0,0,.10),0 2px 12px rgba(0,0,0,.10);
  --ax-shadow-high:0 2px 2px rgba(0,0,0,.10),0 8px 24px rgba(0,0,0,.30);
  --ax-shadow-inset-focus:inset 0 0 0 2px rgba(185,138,60,.55); /* or #b98a3c, adapté */
  /* Astryx — espacement (base 4px) et tailles d'élément (28/32/36) */
  --ax-spacing:4px;
  --ax-size-element-sm:28px; --ax-size-element-md:32px; --ax-size-element-lg:36px;
  /* Astryx — typo (base 14px, ratio 1.2) */
  --ax-font-size-base:.875rem; --ax-font-size-lg:1.0625rem; --ax-font-size-xl:1.25rem;
  --ax-font-size-2xl:1.5rem; --ax-font-size-3xl:1.8125rem;
  /* Sémantique Welux (accent or, pas l'accent neutre d'Astryx) */
  --ax-color-accent:#b98a3c; --ax-color-accent-strong:#d9a441;
  --ax-color-on-accent:#16232e;
  --ax-color-surface:#fffdf8; --ax-color-surface-dark:#0d141d;
  --ax-color-text-on-dark:#fdf7ee; --ax-color-text-dim-on-dark:rgba(253,247,238,.68);
}

/* --- Boutons : anatomie Astryx (rayon élément 8px, hauteur lg 36px,
   transition rapide + courbe standard), micro-interactions --- */
.ax-btn,
.welux-hero-button,
#portal-grid .portal-card a,
#invitaciones .welux-invitations-cta{
  transition:transform var(--ax-duration-fast) var(--ax-ease-standard),
    box-shadow var(--ax-duration-fast) var(--ax-ease-standard),
    background-color var(--ax-duration-fast) var(--ax-ease-standard)!important;
}
.ax-btn:hover,
.welux-hero-button:hover,
#portal-grid .portal-card a:hover,
#invitaciones .welux-invitations-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--ax-shadow-med)!important;
}
.ax-btn:active,
.welux-hero-button:active,
#portal-grid .portal-card a:active,
#invitaciones .welux-invitations-cta:active{
  transform:translateY(0);
  box-shadow:var(--ax-shadow-low)!important;
}
.ax-btn:focus-visible,
.welux-hero-button:focus-visible,
#portal-grid .portal-card a:focus-visible,
.welux-deck-btn:focus-visible{
  outline:none!important;
  box-shadow:var(--ax-shadow-inset-focus)!important;
}
/* Deck : boutons ronds (52px, déjà dans la page) + easing Astryx à l'entrée */
.welux-deck-btn{transition:transform var(--ax-duration-fast) var(--ax-ease-standard),background-color var(--ax-duration-fast) var(--ax-ease-standard),color var(--ax-duration-fast) var(--ax-ease-standard)!important}
.welux-deck-btn:hover{transform:translateY(-2px)}
#portal-grid .portal-card.welux-deck-activa{animation-timing-function:var(--ax-ease-standard)!important}
/* Carte de division active : survol Astryx (l'entrée finit en transform:none,
   donc le survol ne lutte pas avec l'animation) */
#portal-grid .portal-card.welux-deck-activa{transition:transform var(--ax-duration-medium) var(--ax-ease-standard),box-shadow var(--ax-duration-medium) var(--ax-ease-standard)}
#portal-grid .portal-card.welux-deck-activa:hover{transform:translateY(-4px);box-shadow:0 2px 2px rgba(0,0,0,.10),0 12px 32px rgba(120,72,20,.20)!important}
/* KPI du hero : léger survol */
.ax-kpi{transition:transform var(--ax-duration-fast) var(--ax-ease-standard),box-shadow var(--ax-duration-fast) var(--ax-ease-standard)}
.ax-kpi:hover{transform:translateY(-3px);box-shadow:var(--ax-shadow-med)}

/* --- Révélations au scroll (classes posées par welux-motion.js ;
   sans JS, tout reste visible : aucune opacité 0 en dur ici) --- */
.ax-word{display:inline-block;will-change:transform,opacity}
.ax-reveal{opacity:0;transform:translateY(18px)}
.ax-in{opacity:1;transform:none;transition:opacity var(--ax-duration-medium) var(--ax-ease-standard),transform var(--ax-duration-medium) var(--ax-ease-standard)}
.ax-parallax{will-change:transform}

/* --- Marquee existant : bande or sur sombre (Astryx : thème = surcharge) --- */
.welux-marquee{background:rgba(13,20,29,.88)!important;border-top:1px solid rgba(185,138,60,.55);border-bottom:1px solid rgba(185,138,60,.55);border-radius:0!important;padding:.55rem 0}
.welux-marquee span{color:#ffb95f!important;font-size:.92rem!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.welux-marquee:hover .welux-marquee-track{animation-play-state:paused}

/* ============================================================================
   Avis : bande sombre pleine largeur (la section est entre </main> et le pied,
   sur fond crème — en bande sombre elle vit enfin). Cartes Astryx : rayon
   container 12px, ombre high, survol qui se soulève. Données réelles
   uniquement : Google 4,9★ / 8 avis vérifiés ; Editus sans chiffre inventé ;
   Trustpilot = état « pas encore de profil » (à créer par le propriétaire).
   ========================================================================== */
.welux-demo .welux-resenas{
  max-width:none!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
  padding:3.5rem 1.5rem 3rem!important;
  background:var(--ax-color-surface-dark)!important;
  border-top:2px solid var(--ax-color-accent);
  text-align:center;
}
.welux-demo .welux-resenas>h2,
.welux-demo .welux-resenas>.welux-services-sub,
.welux-demo .welux-resenas>.welux-cards,
.welux-demo .welux-resenas>.welux-resena-form,
.welux-demo .welux-resenas>.welux-resena-forms,
.welux-demo .welux-resenas>.welux-resena-guia{max-width:72rem;margin-left:auto!important;margin-right:auto!important}
.welux-demo .welux-resenas h2{color:var(--ax-color-text-on-dark)!important;font-size:2rem!important}
.welux-demo .welux-resenas .welux-services-sub{color:var(--ax-color-text-dim-on-dark)!important}
.welux-demo .welux-resenas .ax-eyebrow{
  display:block;margin:0 0 .6rem;font-family:ui-monospace,Menlo,monospace;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ax-color-accent-strong);font-weight:700;
}
.welux-demo .welux-resenas .welux-card{
  background:var(--ax-color-surface)!important;
  border:1px solid rgba(185,138,60,.35)!important;
  border-radius:var(--ax-radius-container)!important;
  box-shadow:var(--ax-shadow-high)!important;
  text-align:left;min-width:0;
  transition:transform var(--ax-duration-medium) var(--ax-ease-standard),box-shadow var(--ax-duration-medium) var(--ax-ease-standard);
}
.welux-demo .welux-resenas .welux-card:hover{transform:translateY(-4px)}
.welux-demo .welux-resenas .welux-card p,
.welux-demo .welux-resenas .welux-card blockquote{overflow-wrap:anywhere}
.welux-demo .welux-resenas .welux-card a{border-radius:var(--ax-radius-full)}
/* En-tête Google : logo réel de l'entreprise (assets/images/welux_logo.png,
   pas une photo inventée) + nom + mention vérifiée. La photo du commerce
   pour le widget reste à confirmer par le propriétaire. */
.welux-demo .ax-biz{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.welux-demo .ax-biz img{width:44px;height:44px;object-fit:cover;border-radius:var(--ax-radius-container);flex:0 0 auto;background:#0d141d}
.welux-demo .ax-biz .ax-biz-name{font-weight:800;color:#16232e;line-height:1.25}
.welux-demo .ax-biz .ax-biz-sub{font-size:.82rem;color:#5a6b7a}
.welux-demo .welux-resenas .welux-resena-stars{font-size:1.35rem}
/* Carrousel : courbe Astryx (medium + standard) au lieu du ease générique */
.welux-demo .welux-resena-track{transition:transform var(--ax-duration-medium) var(--ax-ease-standard)!important}
.welux-demo .welux-resena-arrow{transition:transform var(--ax-duration-fast) var(--ax-ease-standard),background-color var(--ax-duration-fast) var(--ax-ease-standard)}
.welux-demo .welux-resena-arrow:hover{transform:scale(1.08)}
/* Formulaires : rayon élément 8px + anneau or au focus (Astryx inset ring) */
.welux-demo .welux-resenas .welux-resena-form{border-radius:var(--ax-radius-container)!important;box-shadow:var(--ax-shadow-high)!important}
.welux-demo .welux-resenas .welux-resena-form input,
.welux-demo .welux-resenas .welux-resena-form textarea{border-radius:var(--ax-radius-element)!important}
.welux-demo .welux-resenas .welux-resena-form input:focus,
.welux-demo .welux-resenas .welux-resena-form textarea:focus{outline:none;box-shadow:var(--ax-shadow-inset-focus)}
.welux-demo .welux-resenas .welux-resena-form button[type=submit]{transition:transform var(--ax-duration-fast) var(--ax-ease-standard),box-shadow var(--ax-duration-fast) var(--ax-ease-standard)}
.welux-demo .welux-resenas .welux-resena-form button[type=submit]:hover{transform:translateY(-2px);box-shadow:var(--ax-shadow-med)}
.welux-demo .welux-resena-guia{background:#1d2a1a!important;border-color:#9db38a!important;color:#fdf7ee!important}
.welux-demo .welux-resena-guia a{background:#d9a441!important;color:#16232e!important}
/* Garde-fous mobile : rien ne dépasse à 390px (le propriétaire l'a signalé
   le 11/11 ; le clip de Pasada 62 masquait déjà le débordement de la page,
   ici on soigne la cause dans la section) */
.welux-demo .welux-resenas .welux-card,
.welux-demo .welux-resenas .welux-resena-form,
.welux-demo .welux-resenas .welux-resena-guia,
.welux-demo .welux-resenas .welux-resena-slide{min-width:0}
.welux-demo .welux-resenas .welux-resena-form input,
.welux-demo .welux-resenas .welux-resena-form textarea{max-width:100%}

/* --- Badge « Démo » : pastille fixe en bas au centre (les FAB sont aux
   coins), cliquable pour la faire disparaître --- */
.welux-demo-badge{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:9998;
  display:flex;align-items:center;gap:.5rem;max-width:calc(100vw - 2rem);
  background:rgba(13,20,29,.92);color:#fdf7ee;border:1px solid var(--ax-color-accent);
  border-radius:var(--ax-radius-full);padding:.45rem .6rem .45rem .9rem;
  font-size:.78rem;line-height:1.3;box-shadow:var(--ax-shadow-high);white-space:nowrap;
}
.welux-demo-badge button{
  flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid rgba(253,247,238,.4);
  background:transparent;color:#fdf7ee;cursor:pointer;font-size:.95rem;line-height:1;
}
.welux-demo-badge[hidden]{display:none}

/* --- Reduced Motion : politique Astryx (reducedMotion.ts) ---
   Sous Reduce Motion rien ne bouge, ne grandit ni ne rebondit : sur pointeur
   grossier, fondu d'opacité 200ms ; sinon, changement instantané. Le JS
   (welux-motion.js) applique la même règle aux animations Web Animations. */
@media (prefers-reduced-motion:reduce){
  .ax-reveal{opacity:1!important;transform:none!important}
  .ax-in{transition:none!important}
  .welux-marquee-track{animation:none!important}
  .ax-btn,.welux-hero-button,#portal-grid .portal-card a,#invitaciones .welux-invitations-cta,
  .welux-deck-btn,.ax-kpi,.welux-demo .welux-resenas .welux-card,
  .welux-demo .welux-resenas .welux-resena-form button[type=submit]{transition:none!important}
  .welux-demo .welux-resena-track{transition:none!important}
}
@media (prefers-reduced-motion:reduce) and (pointer:coarse){
  .ax-fade{transition:opacity 200ms cubic-bezier(0.24,1,0.4,1)!important}
}