/* ==========================================================================
   refine.css — couche de finition (chargée après style.css sur toutes les pages)
   Principe : conserver l'identité (Playfair + Inter, bronze #7f5539, noir encre, blanc)
   et unifier ce qui variait d'une page à l'autre : header, boutons, champs, pied de page,
   typographie, effets saisonniers, accessibilité.
   ========================================================================== */

:root {
    --ink: #1a1917;
    --ink-soft: #433f39;
    --muted: #7a766e;
    --hair: #ece9e4;
    --hair-strong: #e0ddd6;
    --bronze: #7f5539;
    --bronze-deep: #6a452d;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --header-h: 104px;
    /* Système de largeurs : toutes les pages s'alignent sur l'une de ces deux grilles */
    --gutter: clamp(16px, 4vw, 48px);
    --shell: 1440px;       /* large  : header, pied de page, accueil, catalogue, fiche produit */
    --shell-std: 1296px;   /* standard (contenu 1200px) : panier, paiement, compte */
    --shell-text: 896px;   /* lecture : contact, mentions légales, FAQ */
}

.shell, .shell--std, .shell--text { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.shell { max-width: var(--shell); }
.shell--std { max-width: var(--shell-std); }
.shell--text { max-width: calc(var(--shell-text) + 2 * var(--gutter)); }

html { scroll-padding-top: 7rem; }

body { color: var(--ink); text-rendering: optimizeLegibility; }

/* Une seule toile de fond : blanc (les thèmes saisonniers gardent la leur) */
body:not([class*="theme-"]) { background-color: #fff !important; }

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, .font-playfair { font-feature-settings: "kern" 1, "liga" 1; }
h1, h2 { font-weight: 500 !important; text-wrap: balance; }
h3, h4 { font-weight: 500 !important; }
h1 { letter-spacing: -.015em; }
h2 { letter-spacing: -.01em; }
p, li { text-wrap: pretty; }
.text-justify { text-align: left !important; }

/* Chiffres alignés (Playfair propose des chiffres elzéviriens par défaut : prix irréguliers) */
.font-playfair, [class*="price"], [id*="price"], [id*="total"] {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
}

/* Le logo « 2ensa » garde ses chiffres d'origine (le 2 elzévirien miroir est la signature de la marque) */
.logo-container, .logo-container *, [class*="scale-x"], .font-playfair:has(> [class*="scale-x"]) {
    font-variant-numeric: normal !important;
    font-feature-settings: "kern" 1 !important;
}

/* --------------------------------------------------------------------------
   Header : même hauteur, même filet, mêmes liens sur toutes les pages
   (pas de backdrop-filter : il casserait la barre fixe mobile imbriquée)
   -------------------------------------------------------------------------- */
#main-header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    padding: 0 !important;
    background: rgba(255, 255, 255, .985) !important;
    border-bottom: 1px solid var(--hair) !important;
    box-shadow: none !important;
    transition: border-color .4s var(--ease);
}
#main-header.is-scrolled { border-bottom-color: var(--hair-strong) !important; }

#main-header .logo-container { margin-bottom: .125rem !important; }
#main-header .logo-container > div { font-size: 1.875rem; transition: font-size .4s var(--ease); }
#main-header.is-scrolled .logo-container > div { font-size: 1.5rem; }
#main-header > div:first-child { transition: padding .4s var(--ease); }
#main-header.is-scrolled > div:first-child { padding-top: .5rem !important; }

#dynamic-nav a { font-weight: 500 !important; letter-spacing: .18em !important; color: var(--muted); }
#dynamic-nav a:hover { color: var(--bronze); }
#dynamic-nav a.active-link { color: var(--ink) !important; }

/* Pages à en-tête simplifié (inscription, paiement…) : même filet que le header principal */
body > header:not(#main-header) { border-bottom: 1px solid var(--hair) !important; box-shadow: none !important; }

/* En-tête : même grille « large » que le contenu (logo centré, icônes sur le bord droit de la grille) */
#main-header > div:first-child { max-width: var(--shell); padding-inline: var(--gutter); }
#main-header .absolute.right-0 { right: var(--gutter) !important; padding-right: 0 !important; }

/* Barre de navigation mobile (dans le header) */
#main-header [class*="fixed"][class*="bottom-0"] {
    background: rgba(255, 255, 255, .98) !important;
    border-top: 1px solid var(--hair) !important;
    box-shadow: none !important;
    padding-top: .75rem !important;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
}
#main-header [class*="fixed"][class*="bottom-0"] a { color: var(--muted); }
#main-header [class*="fixed"][class*="bottom-0"] a:hover { color: var(--bronze); }

@media (max-width: 768px) {
    #main-header > div:first-child { padding-top: .75rem !important; }
    #main-header .logo-container > div { font-size: 1.625rem; }
    #main-header.is-scrolled .logo-container > div { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   Boutons : un seul langage — encre, majuscules espacées, angles droits,
   bronze au survol. (Pas de pilules, pas d'ombres portées, pas de saut au survol.)
   -------------------------------------------------------------------------- */
.btn-luxe,
button[class*="bg-[#1a1a1a]"], a[class*="bg-[#1a1a1a]"],
button.bg-gray-900, a.bg-gray-900 {
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) !important;
}
.btn-luxe:hover,
button[class*="bg-[#1a1a1a]"]:hover, a[class*="bg-[#1a1a1a]"]:hover { background-color: var(--bronze) !important; }

button:disabled, [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* Liens d'action secondaires soulignés */
.underline-animation::after { height: 1px; }

/* --------------------------------------------------------------------------
   Champs de formulaire : angles droits, focus bronze doux, placeholders lisibles
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border-radius: 2px; }
input:focus, select:focus, textarea:focus {
    border-color: var(--bronze) !important;
    box-shadow: 0 0 0 3px rgba(127, 85, 57, .10) !important;
    outline: none !important;
}
/* champs « filet » : l'accent se limite au trait du bas (un halo complet les transformerait en cadre) */
.input-luxe:focus { box-shadow: 0 1px 0 0 var(--bronze) !important; }
::placeholder { color: #a8a49b !important; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bronze); }

/* Critères du mot de passe : lisibles tant qu'ils ne sont pas validés */
.password-check-item { color: #8f8a81; }
.password-check-item.valid { color: #10b981; }

/* Anneau de focus clavier cohérent (accessibilité) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Surfaces : filets fins plutôt qu'ombres ; panneaux blancs encadrés d'un filet
   -------------------------------------------------------------------------- */
.bg-white.shadow-sm:not([class*="border"]),
.bg-white.shadow:not([class*="border"]),
.bg-white.shadow-md:not([class*="border"]) { border: 1px solid var(--hair); }

/* --------------------------------------------------------------------------
   Pied de page : lisible, aéré, même rendu partout
   -------------------------------------------------------------------------- */
footer { background-color: #141311 !important; border-top: 0 !important; padding-inline: var(--gutter) !important; }
footer > div { max-width: calc(var(--shell) - 2 * var(--gutter)) !important; margin-inline: auto; }
footer p { color: #8f8a81 !important; font-size: .6875rem !important; }
footer a { color: #b9b4ab !important; font-size: .6875rem !important; letter-spacing: .16em !important; transition: color .3s var(--ease); }
footer a:hover { color: #fff !important; }
footer .bg-gray-700 { background-color: #3a3732 !important; }

/* --------------------------------------------------------------------------
   Effets saisonniers : plus discrets, jamais gênants pour la lecture
   -------------------------------------------------------------------------- */
.eid-star-particle { font-size: .7rem !important; text-shadow: none !important; }
@keyframes starFloat {
    0%   { transform: translateY(100vh) scale(.6) rotate(0deg); opacity: 0; }
    25%  { opacity: .26; }
    75%  { opacity: .26; }
    100% { transform: translateY(-10vh) scale(1.1) rotate(45deg); opacity: 0; }
}
/* Le visuel eid-lanterns.png n'existe pas dans le projet : on évite une requête 404 et un bandeau vide */
body.theme-eid::before { display: none !important; }
body.theme-eid main { padding-top: 0 !important; }

/* --------------------------------------------------------------------------
   Page produit : texte aligné à gauche, visuels sobres
   -------------------------------------------------------------------------- */
#product-detail-container .shadow-sm { box-shadow: none !important; }

/* --------------------------------------------------------------------------
   Respect de la préférence « réduire les animations »
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .eid-star-particle, .snowflake-real, .champagne-bubble, .soft-petal, .firework-bloom, .sound-wave-bar { display: none !important; }
}

/* --------------------------------------------------------------------------
   Espace client : cartes de fidélité alignées (le niveau actif ne dépasse plus de la rangée),
   intitulés de menu dans la même police que les liens
   -------------------------------------------------------------------------- */
.loyalty-card { border-radius: 4px; box-shadow: 0 14px 30px -22px rgba(26, 25, 23, .4); }
.loyalty-card:hover { transform: translateY(-3px); }
.loyalty-card.active { border: 0; transform: none; box-shadow: inset 0 0 0 2px var(--bronze), 0 18px 36px -22px rgba(127, 85, 57, .4); }
.menu-heading { font-family: Inter, sans-serif !important; font-size: .6875rem !important; font-weight: 600 !important; letter-spacing: .2em !important; }