/* ==========================================================================
   SAV PHONE AND PAD — FEUILLE DE STYLE DU SITE

   Feuille unique du site : c'est le seul fichier de design chargé par les
   gabarits. Ne pas y ajouter de seconde feuille de surcharge — deux fichiers
   qui se disputent les mêmes règles finissent toujours par se contredire.

   ORIGINE
     Dérivée du design system HSPremium (esprit « maison de luxe »,
     reconstruit proprement, aucune ressource de marque tierce). L'original
     réutilisable vit dans L'Atelier MB Events ; ce fichier-ci en est la
     version propre à SAV Phone and Pad et peut diverger librement.

   ÉCART ASSUMÉ AVEC HSPREMIUM
     Le fond de page est BLANC, pas ivoire. L'ivoire #f7f2ec jurait avec
     l'en-tête, le menu et les cartes du site, tous en blanc franc : la page
     portait deux blancs différents. Le cadre des visuels produit suit, en
     gris neutre plutôt qu'en sable. Les deux valeurs d'origine sont
     conservées en commentaire à côté, pour pouvoir revenir en arrière.

   CONVENTION
     Tout reste préfixé « hsp- » : les gabarits appellent ces jetons dans
     plus de 300 styles en ligne, les renommer casserait le site. Le préfixe
     évite par ailleurs toute collision avec Bootstrap.

   CHARGEMENT
     Après le CSS du framework, et avec les deux polices Google :
     Cormorant Garamond (titres) + Jost (corps et labels).
   ========================================================================== */

:root {
    /* — Couleurs — */
    --hsp-noir:        #0a0a0a;   /* noir profond : texte, fonds sombres   */
    --hsp-noir-doux:   #1c1a17;   /* noir chaud                            */
    --hsp-blanc:       #ffffff;
    --hsp-ivoire:      #f7f2ec;   /* fond chaud principal                  */
    --hsp-sable:       #ebe3d7;   /* séparateurs, fonds alternés           */
    --hsp-taupe:       #8a7e70;   /* texte secondaire                      */
    --hsp-champagne:   #b29462;   /* accent or doux : filets, survols      */
    --hsp-champagne-cl:#c8ad84;

    /* — Rôles sémantiques — */
    --hsp-bg:          var(--hsp-blanc);   /* HSPremium : var(--hsp-ivoire) */
    --hsp-bg-alt:      var(--hsp-blanc);
    --hsp-text:        var(--hsp-noir);
    --hsp-text-soft:   #6e645a;   /* taupe assombri : contraste AA sur ivoire */
    --hsp-accent-text: #836429;   /* or foncé, pour du TEXTE sur fond clair   */
    --hsp-line:        rgba(10, 10, 10, .12);

    /* — Typographie — */
    --hsp-font-serif: "Cormorant Garamond", "Times New Roman", serif;
    --hsp-font-sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

    --hsp-fs-hero:  clamp(3rem, 8vw, 6.5rem);
    --hsp-fs-h1:    clamp(2.2rem, 5.2vw, 4rem);
    --hsp-fs-h2:    clamp(1.8rem, 3.6vw, 2.8rem);
    --hsp-fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
    --hsp-fs-body:  clamp(1rem, 1.05vw, 1.08rem);
    --hsp-fs-small: .85rem;
    --hsp-fs-label: .72rem;

    /* Interlettrage des capitales : c'est lui qui fait le caractère.
       0.24em est large — c'est volontaire, et c'est ce qui distingue un
       libellé « maison » d'un libellé d'interface ordinaire. */
    --hsp-ls-label: .24em;
    --hsp-ls-wide:  .14em;

    /* — Rythme — */
    --hsp-space-section: clamp(3.25rem, 7vw, 6rem);
    --hsp-space-lg: clamp(2rem, 3.6vw, 3.5rem);
    --hsp-space-md: 1.75rem;
    --hsp-space-sm: 1rem;
    --hsp-maxw: 1320px;
    --hsp-maxw-text: 62ch;

    --hsp-radius-img: clamp(12px, 1.1vw, 18px);

    /* — Transitions — */
    --hsp-ease: cubic-bezier(.22, .61, .36, 1);
    --hsp-t-fast: .25s var(--hsp-ease);
    --hsp-t-slow: .6s var(--hsp-ease);

    /* ----------------------------------------------------------------------
       COMPATIBILITÉ
       Les gabarits existants appellent ces noms directement dans des styles
       en ligne (plus de 300 occurrences). Ils sont conservés et redirigés
       vers la nouvelle palette : le site adopte l'identité sans qu'aucun
       gabarit n'ait à être réécrit.
       ---------------------------------------------------------------------- */
    --hsp-primary:        var(--hsp-noir);
    --hsp-secondary:      var(--hsp-taupe);
    --hsp-accent:         var(--hsp-champagne);
    --hsp-background:     var(--hsp-bg-alt);
    --hsp-border:         var(--hsp-line);
    --hsp-border-dark:    var(--hsp-taupe);
    --hsp-text-primary:   var(--hsp-text);
    --hsp-text-secondary: var(--hsp-text-soft);
    --hsp-text-light:     var(--hsp-taupe);
    --hsp-font-primary:   var(--hsp-font-serif);
    --hsp-font-secondary: var(--hsp-font-sans);
    --hsp-shadow:         0 1px 2px rgba(10, 10, 10, .04);
    --hsp-shadow-hover:   0 10px 30px rgba(10, 10, 10, .08);
    --hsp-radius:         2px;   /* le luxe est anguleux : arrondis quasi nuls */
    --hsp-radius-small:   2px;
    --hsp-transition:     all var(--hsp-t-fast);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
body {
    font-family: var(--hsp-font-sans);
    /* Graisse 300 en corps de texte : c'est le réglage qui donne l'impression
       d'air, avant même la mise en page. */
    font-weight: 300;
    font-size: var(--hsp-fs-body);
    line-height: 1.7;
    color: var(--hsp-text);
    background-color: var(--hsp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--hsp-font-serif);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.01em;
}

::selection { background: var(--hsp-champagne); color: var(--hsp-blanc); }

/* --------------------------------------------------------------------------
   UTILITAIRES TYPOGRAPHIQUES
   -------------------------------------------------------------------------- */

/* Libellé en capitales espacées : sur-titre, mention, étiquette.
   C'est la pièce qui, opposée à un grand titre serif, produit le contraste. */
.hsp-surtitre,
.hsp-label {
    display: block;
    font-family: var(--hsp-font-sans);
    font-size: var(--hsp-fs-label);
    font-weight: 400;
    letter-spacing: var(--hsp-ls-label);
    text-transform: uppercase;
    color: var(--hsp-text-soft);
    margin: 0 0 var(--hsp-space-sm);
}

.hsp-label--accent { color: var(--hsp-accent-text); }

/* Filet court sous un titre — séparateur discret, pas une bordure. */
.hsp-divider {
    width: 56px;
    height: 1px;
    background: var(--hsp-accent);
    border: 0;
    margin: var(--hsp-space-md) 0;
}

.hsp-center .hsp-divider,
.hsp-divider--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   SECTIONS ET TITRES
   -------------------------------------------------------------------------- */
.hsp-section { padding-block: var(--hsp-space-section); }
.hsp-section-small { padding-block: var(--hsp-space-lg); }
.hsp-section-alt { background: var(--hsp-bg-alt); }

.hsp-section-dark {
    background: var(--hsp-noir);
    color: var(--hsp-blanc);
}

.hsp-section-dark .hsp-surtitre,
.hsp-section-dark .hsp-label,
.hsp-section-dark .hsp-section-subtitle { color: rgba(255, 255, 255, .7); }

.hsp-container {
    width: 100%;
    max-width: var(--hsp-maxw);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.hsp-section-title {
    font-family: var(--hsp-font-serif);
    font-size: var(--hsp-fs-h2);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.08;
    color: var(--hsp-text);
    text-align: center;
    margin: 0 0 var(--hsp-space-md);
}

.hsp-section-subtitle {
    font-family: var(--hsp-font-sans);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--hsp-text-soft);
    text-align: center;
    max-width: var(--hsp-maxw-text);
    margin: 0 auto var(--hsp-space-lg);
}

/* --------------------------------------------------------------------------
   GRILLE PRODUITS
   -------------------------------------------------------------------------- */
.hsp-grid,
.hsp-grid-choice {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hsp-space-md);
    padding: 0;
    margin: var(--hsp-space-lg) 0;
}

@media (max-width: 1400px) {
    .hsp-grid, .hsp-grid-choice { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .hsp-grid, .hsp-grid-choice { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hsp-grid, .hsp-grid-choice { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   CARTE PRODUIT
   -------------------------------------------------------------------------- */
.hsp-product-card {
    background: var(--hsp-bg-alt);
    /* Un filet fin plutôt qu'une ombre : le trait pose l'objet sans le
       faire flotter. L'ombre n'arrive qu'au survol. */
    border: 1px solid var(--hsp-line);
    border-radius: var(--hsp-radius);
    padding: var(--hsp-space-md);
    display: flex;
    flex-direction: column;
    transition: border-color var(--hsp-t-fast), box-shadow var(--hsp-t-fast), transform var(--hsp-t-fast);
}

.hsp-product-card:hover,
.hsp-product-card:focus-within {
    border-color: var(--hsp-champagne);
    box-shadow: var(--hsp-shadow-hover);
    transform: translateY(-2px);
}

.hsp-product-image {
    border-radius: var(--hsp-radius-img);
    overflow: hidden;
    margin-bottom: var(--hsp-space-sm);
    /* HSPremium : var(--hsp-sable). Sur fond blanc, le sable restait
       la seule touche chaude de la page et ressortait sur chaque carte. */
    background: #f2f2f2;
}

.hsp-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--hsp-t-slow);
}

.hsp-product-card:hover .hsp-product-image img { transform: scale(1.03); }

.hsp-product-title {
    font-family: var(--hsp-font-serif);
    font-size: var(--hsp-fs-h3);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--hsp-text);
    margin: 0 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsp-product-description {
    font-size: var(--hsp-fs-small);
    font-weight: 300;
    line-height: 1.65;
    color: var(--hsp-text-soft);
    margin: 0 0 var(--hsp-space-sm);
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prix : en sans, graisse normale. Un prix en gras crie la promotion ;
   posé sobrement, il énonce une valeur. */
.hsp-product-price {
    font-family: var(--hsp-font-sans);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--hsp-text);
    margin: 0 0 var(--hsp-space-sm);
}

.hsp-product-price .price-label {
    display: block;
    font-size: var(--hsp-fs-label);
    font-weight: 400;
    letter-spacing: var(--hsp-ls-label);
    text-transform: uppercase;
    color: var(--hsp-text-soft);
    margin-bottom: .35rem;
}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */

/* Contour par défaut, plein au survol : l'inverse du bouton d'interface
   habituel. Le geste est proposé, pas imposé. */
.hsp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75em;
    width: 100%;
    font-family: var(--hsp-font-sans);
    font-size: var(--hsp-fs-label);
    font-weight: 400;
    letter-spacing: var(--hsp-ls-label);
    text-transform: uppercase;
    padding: 1.15em 2.4em;
    border: 1px solid var(--hsp-noir);
    border-radius: var(--hsp-radius);
    background: transparent;
    color: var(--hsp-noir);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--hsp-t-fast), color var(--hsp-t-fast), border-color var(--hsp-t-fast);
}

.hsp-button:hover,
.hsp-button:focus {
    background: var(--hsp-noir);
    color: var(--hsp-blanc);
    text-decoration: none;
}

.hsp-button-solid {
    background: var(--hsp-noir);
    color: var(--hsp-blanc);
}

.hsp-button-solid:hover,
.hsp-button-solid:focus {
    background: var(--hsp-champagne);
    border-color: var(--hsp-champagne);
    color: var(--hsp-noir);
}

.hsp-button-secondary {
    border-color: var(--hsp-taupe);
    color: var(--hsp-text-soft);
}

.hsp-button-secondary:hover,
.hsp-button-secondary:focus {
    background: var(--hsp-taupe);
    color: var(--hsp-blanc);
}

.hsp-button:focus-visible,
.hsp-product-card:focus-within {
    outline: 2px solid var(--hsp-champagne);
    outline-offset: 2px;
}

/* Lien souligné au survol, trait qui se déploie. */
.hsp-link-underline {
    position: relative;
    font-family: var(--hsp-font-sans);
    font-size: var(--hsp-fs-label);
    letter-spacing: var(--hsp-ls-wide);
    text-transform: uppercase;
    padding-bottom: 2px;
    text-decoration: none;
}

.hsp-link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--hsp-t-fast);
}

.hsp-link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   BADGES ET DISPONIBILITÉ
   -------------------------------------------------------------------------- */
.hsp-badge {
    display: inline-block;
    padding: .45em 1em;
    background: transparent;
    border: 1px solid var(--hsp-noir);
    color: var(--hsp-noir);
    font-family: var(--hsp-font-sans);
    font-size: var(--hsp-fs-label);
    font-weight: 400;
    letter-spacing: var(--hsp-ls-label);
    text-transform: uppercase;
    border-radius: var(--hsp-radius);
}

.hsp-badge-secondary {
    border-color: var(--hsp-taupe);
    color: var(--hsp-text-soft);
}

.hsp-availability {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hsp-fs-small);
    color: var(--hsp-text-soft);
}

.hsp-availability-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.hsp-availability-dot.available { background: var(--hsp-champagne); }
.hsp-availability-dot.unavailable { background: var(--hsp-taupe); }

/* --------------------------------------------------------------------------
   CHARGEMENT
   -------------------------------------------------------------------------- */
.hsp-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(247, 242, 236, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.hsp-spinner {
    width: 32px;
    height: 32px;
    border: 1px solid var(--hsp-line);
    border-top-color: var(--hsp-champagne);
    border-radius: 50%;
    animation: hsp-spin .8s linear infinite;
}

@keyframes hsp-spin { to { transform: rotate(360deg); } }

.hsp-fade-in { animation: hsp-fadeIn var(--hsp-t-slow) both; }

@keyframes hsp-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .hsp-fade-in,
    .hsp-product-image img,
    .hsp-product-card { animation: none; transition: none; }
}