/* ==========================================================================
   global.css — CHARTE GRAPHIQUE RAYHANE v2
   Direction : maison de cadeaux orientale premium, héritage islamique raffiné.
   Corrections suite audit DA : suppression des patterns "e-commerce standard"
   (pills, ombres SaaS, uppercase systématique, géométrique froide),
   introduction de signatures ornementales discrètes et d'une hiérarchie
   typographique à l'échelle d'une maison de luxe.

   --- BREAKPOINTS DE RÉFÉRENCE (à respecter sur toutes les pages) ---
   960px  : bascule desktop -> tablette (layouts 2 colonnes deviennent 1)
   640px  : bascule tablette -> mobile (nav, paddings, tailles de police)
   400px  : ajustements fins petits mobiles (rare, seulement si nécessaire)
   ========================================================================== */

:root {
    /* --- Couleurs de marque ---
       Conservées telles quelles : ivoire, brun, doré, olive sont justes.
       Le vert olive est légitime à la fois symboliquement (couleur de la
       tradition prophétique, du désert, de l'oasis) et techniquement
       (teinte terreuse adaptée à l'artisanal, contrairement à un vert
       émeraude qui lirait "luxe moderne froid"). On le RENFORCE plutôt
       que de le timidifier : il devient un vrai second pilier, pas une
       couleur d'appoint. */
    --rh-bg:             #F6F0E6;
    --rh-bg-secondary:   #EDE1CF;
    --rh-card:           #FFFDF7;

    --rh-text:           #1D1712;
    --rh-text-secondary: #6A5948;

    --rh-gold:           #9E772E;
    --rh-gold-light:     #C69A52;
    --rh-gold-deep:      #7C5C22;  /* nouveau : doré assombri pour le texte sur fond clair, meilleur contraste AA */

    --rh-olive:          #4F5F35;
    --rh-olive-light:    #67794A;
    --rh-olive-deep:     #3A4727;  /* nouveau : olive profond pour CTA secondaires, ancrage fort */
    --rh-olive-soft:     rgba(79, 95, 53, 0.10);

    --rh-honey:          #B96F28;

    --rh-border:         rgba(29, 23, 18, 0.12);
    --rh-border-gold:    rgba(158, 119, 46, 0.28);
    --rh-border-olive:   rgba(79, 95, 53, 0.28);

    --rh-glow-gold:      rgba(158, 119, 46, 0.18);
    --rh-glow-olive:     rgba(79, 95, 53, 0.14);

    --rh-edge-line:      var(--rh-gold);

    /* --- Rayons ---
       v2 (2-4px) était trop rigide : ça lisait "carton/document admin"
       plutôt que "maison de luxe". v3 trouve l'équilibre — des courbes
       visibles et douces, sans tomber dans la pill ronde façon app
       mobile (100px, bannie). Le bon territoire pour du luxe se situe
       entre les deux extrêmes. */
    --radius:      9px;
    --radius-sm:   7px;
    --radius-pill: 100px; /* badges/eyebrows : on RÉAUTORISE une vraie courbe douce, mais discrète par sa petite taille et son fond très transparent — ce n'est pas la forme qui faisait "app", c'était l'absence de raffinement autour */

    /* --- Typographies ---
       Cormorant Garamond conservé en heading (juste, à pousser plus loin
       avec de l'italique sur les accroches).
       Manrope REMPLACÉ : trop géométrique/tech (popularisée par les SaaS
       B2B). Mulish est une sans-serif humaniste, douce, qui ne lit ni
       "startup" ni "pharmacie" — meilleur compagnon pour du Cormorant.
       Marcellus ajouté : capitales lapidaires antiques, réservée aux très
       petites touches (surtitres, initiales) — PAS pour de longs textes. */
    --font-heading:   "Cormorant Garamond", "Georgia", serif;
    --font-body:      "Mulish", "Helvetica Neue", sans-serif;
    --font-accent:    "Spectral", "Georgia", serif;       /* prix, références — déjà bon, conservé */
    --font-lapidaire: "Marcellus", "Cormorant Garamond", serif; /* surtitres très courts uniquement */

    /* --- Échelle d'espacement ---
       Système cohérent plutôt que des valeurs ad hoc dispersées dans le
       fichier (ancien défaut : 0.85rem ici, 1.5rem là, sans logique).
       Progression douce, base généreuse — le luxe se lit dans le vide
       autant que dans la matière. Toutes les nouvelles règles ci-dessous
       utilisent ces variables ; les anciennes valeurs en dur restent
       fonctionnelles mais peuvent être migrées progressivement. */
    --space-3xs: 0.25rem;   /*  4px */
    --space-2xs: 0.5rem;    /*  8px */
    --space-xs:  0.75rem;   /* 12px */
    --space-sm:  1rem;      /* 16px */
    --space-md:  1.5rem;    /* 24px */
    --space-lg:  2.25rem;   /* 36px */
    --space-xl:  3.5rem;    /* 56px */
    --space-2xl: 5rem;      /* 80px */
    --space-3xl: 7.5rem;    /* 120px */
}

/* Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* --- Sticky footer ---
   Sans ceci, le footer "flotte" juste après le contenu si la page est
   courte (peu de produits, page d'accueil légère) au lieu de coller au
   bas du viewport. Pattern flexbox standard :
   html/body en colonne pleine hauteur, le contenu principal pousse
   (flex: 1) pour repousser le footer tout en bas même si le contenu
   est court à l'écran.

   STRUCTURE HTML REQUISE :
     <body>                 ← display:flex, column, min-height:100vh
       <header>...</header>
       <main>...</main>     ← flex:1 1 auto (classe .page-main ci-dessous)
       <footer>...</footer>
     </body>
   Si <main> n'a pas la classe .page-main, ajouter manuellement
   "flex: 1 0 auto" à l'élément qui contient le corps de la page. */
body {
    background: var(--rh-bg);
    color: var(--rh-text);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    min-height: 100vh;
    min-height: 100dvh; /* unité moderne, gère mieux les barres mobiles que vh */
    display: flex;
    flex-direction: column;

    /* Texture papier très subtile : remplace le flat design plat.
       Un bruit léger en fond donne une sensation "papier ivoire" plutôt
       qu'un aplat numérique. Désactivable sans casser le layout si trop
       lourd à l'usage (voir note en bas de fichier). */
    background-image:
        radial-gradient(circle at 20% 20%, rgba(158, 119, 46, 0.025) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(79, 95, 53, 0.02) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Applique cette classe au <main> de chaque page (ou à la balise qui
   enveloppe le contenu hors header/footer). Elle force ce bloc à occuper
   tout l'espace disponible, repoussant le footer en bas du viewport
   même quand le contenu de la page est court. */
.page-main {
    flex: 1 0 auto;
}

/* Le footer n'a besoin d'aucune propriété flex particulière : en étant
   un enfant direct du body flex en colonne, il se place naturellement
   après .page-main, qui aura déjà absorbé tout l'espace restant. */

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* --- Hiérarchie typographique --- */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--rh-text);
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 600;
}

/* Variante italique pour les accroches dans le hero — signature de marque */
h1 em,
.heading-italic {
    font-style: italic;
    font-weight: 500;
    color: var(--rh-gold-deep);
}

h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.75rem);
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.3;
}

/* Surtitre lapidaire : très courte étiquette au-dessus d'un H2, façon
   gravure — remplace les anciens badges "pill" pleins. */
.eyebrow {
    display: block;
    font-family: var(--font-lapidaire);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rh-gold-deep);
    margin-bottom: var(--space-sm);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--rh-gold);
    margin-right: var(--space-xs);
    vertical-align: middle;
}

/* --- Header --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 240, 230, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rh-border);
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header {
        background: rgba(246, 240, 230, 0.99);
    }
}

/* Liseré doré fin sous le header — signature discrète au lieu d'une bordure
   neutre. Détail qui distingue une maison d'un site générique. */
.site-header::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rh-border-gold) 20%, var(--rh-border-gold) 80%, transparent);
}

.site-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.9rem;
    text-decoration: none;
    color: var(--rh-text);
    letter-spacing: 0.03em;
    font-style: italic;
}

.site-logo span {
    color: var(--rh-gold-deep);
    font-style: normal;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.site-nav-links {
    display: flex;
    gap: var(--space-lg);
    list-style: none;
}

.site-nav-links a {
    text-decoration: none;
    color: var(--rh-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.25s ease;
    position: relative;
}

/* Soulignement fin qui apparaît au survol, au lieu d'un simple changement
   de couleur — plus "maison" que "app". */
.site-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--rh-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.site-nav-links a:hover,
.site-nav-links a[aria-current="page"] {
    color: var(--rh-text);
}

.site-nav-links a:hover::after,
.site-nav-links a[aria-current="page"]::after {
    transform: scaleX(1);
}

.site-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--rh-card);
    border: 1px solid var(--rh-border);
    text-decoration: none;
    color: var(--rh-text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-cart-link:hover {
    border-color: var(--rh-border-gold);
    box-shadow: 0 6px 16px var(--rh-glow-gold);
}

.site-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--rh-gold-deep);
    color: var(--rh-card);
    font-size: 0.68rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Footer --- */

.site-footer {
    border-top: 1px solid var(--rh-border);
    margin-top: var(--space-3xl);
    background: var(--rh-bg-secondary);
    position: relative;
    flex-shrink: 0; /* empêche le footer de se compresser dans le flex du body */
}

.site-footer::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rh-border-gold) 20%, var(--rh-border-gold) 80%, transparent);
}

.site-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-md);
}

.site-footer-text {
    color: var(--rh-text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    font-family: var(--font-accent);
}

.site-footer-links {
    display: flex;
    gap: 1.75rem;
    list-style: none;
}

.site-footer-links a {
    text-decoration: none;
    color: var(--rh-text-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}

.site-footer-links a:hover {
    color: var(--rh-olive-deep);
}

/* --- Boutons ---
   v3 : le padding généreux (v2) combiné à la casse normale rendait les
   boutons visuellement carrés/lourds plutôt qu'élégants — un texte court
   en casse normale a besoin de MOINS de padding vertical et d'un peu de
   structure typographique (letter-spacing plus marqué) pour rester
   élancé. On NE revient PAS à l'uppercase intégral (trop DTC), mais le
   letter-spacing est renforcé pour que le bouton se tienne sans la
   béquille du gros padding. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 0.8rem var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.btn-primary {
    background: var(--rh-gold-deep);
    color: var(--rh-card);
}

.btn-primary:hover {
    background: var(--rh-olive-deep);
    box-shadow: 0 10px 28px var(--rh-glow-olive);
}

.btn-secondary {
    background: transparent;
    border-color: var(--rh-border-gold);
    color: var(--rh-text);
}

.btn-secondary:hover {
    background: var(--rh-card);
    border-color: var(--rh-olive);
    color: var(--rh-olive-deep);
}

/* Bouton "fantôme" pour actions tertiaires (ex: "voir le détail") */
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--rh-gold-deep);
    padding: var(--space-2xs) 0;
    font-style: italic;
    font-family: var(--font-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--rh-border-gold);
}

.btn-ghost:hover {
    text-decoration-color: var(--rh-gold);
}

/* --- Badges ---
   SUPPRESSION DES PILLS (border-radius:100px = pattern app mobile/SaaS).
   Remplacés par des étiquettes à angles droits, façon sceau/cachet. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    border-radius: var(--radius-pill);
    background: var(--rh-olive-soft);
    border: 1px solid var(--rh-border-olive);
    color: var(--rh-olive-deep);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.badge-gold {
    background: rgba(158, 119, 46, 0.07);
    border-color: var(--rh-border-gold);
    color: var(--rh-gold-deep);
}

/* Badge "sceau" — petit cercle doré à gauche, évoque un cachet de cire,
   à utiliser pour "Édition limitée", "Coffret prestige", etc. */
.badge-seal {
    background: transparent;
    border: 1px solid var(--rh-gold);
    color: var(--rh-gold-deep);
}

.badge-seal::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rh-gold);
}

/* --- Cards ---
   Ombres adoucies (l'ancienne ombre 0 22px 60px était "SaaS moderne").
   On privilégie une bordure fine + une ombre TRÈS courte, presque un
   simple contact au sol, plus proche du papier que du flottement. */

.card {
    background: var(--rh-card);
    border: 1px solid rgba(158, 119, 46, 0.18);
    border-radius: var(--radius);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 20px rgba(29, 23, 18, 0.05);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Neutralise le soulignement par défaut du navigateur sur tout lien à
   l'intérieur d'une card (titre produit, description, prix, ou la card
   entière enveloppée dans un <a>). Sans cette règle, le navigateur
   applique son style de lien hypertexte standard — visible et incorrect
   sur le rendu réel (titres et prix soulignés comme du texte de blog). */
.card a {
    text-decoration: none;
    color: inherit;
}

/* Le titre produit (h3 dans une card) peut recevoir un soulignement fin
   et discret AU SURVOL UNIQUEMENT, pour signaler l'interactivité sans
   imiter un lien web basique. */
.card h3 a,
.card-title {
    transition: color 0.2s ease;
}

.card a:hover h3,
.card a:hover .card-title,
.card h3 a:hover {
    color: var(--rh-gold-deep);
}

/* Sécurise l'arrondi des images à l'intérieur d'une card : on ne compte
   plus uniquement sur overflow:hidden du parent (qui peut échouer selon
   la structure HTML — image avec marge, wrapper intermédiaire, etc.).
   border-radius hérite la forme du parent moins l'épaisseur de bordure. */
.card img,
.card > a > img,
.card-image {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    overflow: hidden;
}

/* Si l'image est seule dans la card (pas de contenu sous elle), arrondir
   les 4 coins plutôt que seulement le haut. */
.card img:only-child {
    border-radius: calc(var(--radius) - 1px);
}

.card:hover {
    border-color: var(--rh-border-gold);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 32px rgba(29, 23, 18, 0.08);
    transform: translateY(-3px);
}

.card-premium {
    border-color: var(--rh-border-gold);
    position: relative;
}

/* Coin orné en haut-gauche pour les coffrets premium — référence directe
   aux motifs géométriques dorés visibles sur l'image de packaging fournie. */
.card-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-top: 2px solid var(--rh-gold);
    border-left: 2px solid var(--rh-gold);
    border-top-left-radius: var(--radius);
    opacity: 0.7;
    pointer-events: none;
}

.card-olive {
    border-color: var(--rh-border-olive);
}

/* Conteneur de contenu textuel à l'intérieur d'une card (sous l'image) —
   manquait un padding standard, chaque page le redéfinissait au cas par
   cas. Ici, base cohérente et généreuse. */
.card-body {
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

.card-body > * + * {
    margin-top: var(--space-2xs);
}

.card-description {
    color: var(--rh-text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* --- Liserés --- */

.edge-line {
    height: 1px;
    background: var(--rh-edge-line);
    opacity: 0.65;
}

.edge-line-olive {
    height: 1px;
    background: var(--rh-olive);
    opacity: 0.45;
}

/* Liseré ornemental avec losange central — signature "manuscrit ancien",
   à utiliser comme séparateur entre grandes sections marketing. */
.edge-ornament {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
}

.edge-ornament::before,
.edge-ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rh-border-gold);
}

.edge-ornament-mark {
    width: 7px;
    height: 7px;
    background: var(--rh-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* --- Prix / références produit --- */

.price,
.product-reference {
    font-family: var(--font-accent);
    color: var(--rh-text);
}

.price {
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    color: var(--rh-gold-deep);
}

.product-reference {
    color: var(--rh-text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

/* --- États utilitaires --- */

.text-gold { color: var(--rh-gold-deep); }
.text-olive { color: var(--rh-olive-deep); }
.bg-olive-soft { background: var(--rh-olive-soft); }
.border-gold { border-color: var(--rh-border-gold); }
.border-olive { border-color: var(--rh-border-olive); }

/* --- Accessibilité --- */

:focus-visible {
    outline: 2px solid var(--rh-gold-deep);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Responsive --- */

@media (max-width: 640px) {
    .site-header-inner {
        padding: 1rem 1.1rem;
    }

    .site-logo {
        font-size: 1.55rem;
    }

    .site-nav-links {
        display: none;
    }

    .btn {
        padding: 0.75rem 1.35rem;
        font-size: 0.82rem;
    }

    .card-premium::before {
        width: 26px;
        height: 26px;
    }
}

/* ==========================================================================
   NOTE TECHNIQUE : le background-image radial-gradient en body (texture
   papier) est volontairement très léger (2-2.5% d'opacité). Si le rendu
   final paraît trop chargé sur certains écrans, le supprimer ne casse
   rien — le site reste fonctionnel sur un simple background: var(--rh-bg).
   ========================================================================== */