/*
 * ═══════════════════════════════════════════════════════════════════════════
 * COUCHE DE THÈME
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * UN SEUL fichier pour les trois thèmes, et c'est volontaire.
 *
 * Ce fichier ne contient aucune valeur littérale : il ne fait que projeter les
 * jetons du thème (--shop-*) sur les classes réellement utilisées par la
 * boutique. Les jetons, eux, sont émis par App\Service\ShopTheme dans le <head>
 * et diffèrent d'un thème à l'autre.
 *
 * Conséquence : Minimal, Élégant et Moderne partagent ce code et rendent trois
 * sites différents. Un correctif d'affichage se fait une fois, pas trois. Trois
 * fichiers CSS séparés auraient divergé au premier bug corrigé dans un seul.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CHARGÉ EN DERNIER, APRÈS style.css
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Le socle repose sur un template commercial de 292 Ko et 1 411 couleurs écrites
 * en dur. Le réécrire serait des semaines de travail à haut risque. Cette couche
 * le recouvre plutôt que de le remplacer : elle cible les éléments qui portent
 * l'identité visuelle et laisse le reste tel quel.
 *
 * D'où quelques !important, assumés : ils ne servent qu'à battre des règles du
 * template commercial qu'on ne peut pas modifier sans le forker.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * HORS PÉRIMÈTRE — décidé avec le client
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Le tunnel d'achat (shop/cart/), l'espace client (shop/user/), les e-mails et
 * le corps des pages légales ne sont PAS thématisés : ce sont des parcours
 * fonctionnels, efficaces à la Amazon, identiques d'une boutique à l'autre. Ils
 * héritent seulement de l'en-tête et du pied de page.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Typographie
   ═══════════════════════════════════════════════════════════════════════════ */

body,
body.bodyShop {
    font-family: var(--shop-font-body);
    font-weight: var(--shop-weight-body);
    color: var(--shop-ink);
    background-color: var(--shop-surface);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.section-head .title,
.dlab-tilte {
    font-family: var(--shop-font-heading);
    font-weight: var(--shop-weight-heading);
    letter-spacing: var(--shop-heading-tracking);
    text-transform: var(--shop-heading-transform);
    color: var(--shop-ink);
}

/* Le sérif d'Élégant a un œil plus petit : sans compensation, ses titres
   paraissent chétifs à côté d'un Inter à la même taille. */
[data-shop-theme="elegant"] h1,
[data-shop-theme="elegant"] h2 {
    font-size: 2.6rem;
    line-height: 1.15;
}

p, .card-text {
    color: var(--shop-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Formes — rayons et ombres
   ═══════════════════════════════════════════════════════════════════════════ */

.btn,
.btn-primary,
input[type="submit"],
button.btn {
    border-radius: var(--shop-radius) !important;
    box-shadow: var(--shop-shadow);
    font-family: var(--shop-font-body);
    font-weight: var(--shop-weight-heading);
    letter-spacing: 0;
}

.btn-primary,
.btn.bg-primary {
    background-color: var(--shop-primary) !important;
    border-color: var(--shop-primary) !important;
    color: var(--shop-primary-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.bg-primary:hover {
    background-color: var(--shop-primary-dark) !important;
    border-color: var(--shop-primary-dark) !important;
}

.card,
.category-card,
.shop-item,
.item-box {
    border-radius: var(--shop-radius-lg);
    box-shadow: var(--shop-shadow);
    border: 1px solid var(--shop-border);
    background-color: var(--shop-surface);
}

/* PAS d'overflow: hidden sur les cartes produit.
   .availability-label est en position absolute avec left: -5px — elle dépasse
   volontairement du cadre de l'image pour former une étiquette. Un overflow
   caché la rognerait et écraserait un choix de conception délibéré.
   Seules les cartes de catégorie le reçoivent : leur image doit épouser le
   rayon de la carte, et rien n'y dépasse. */
.category-card {
    overflow: hidden;
}

/* Minimal n'a pas d'ombre : c'est le filet qui délimite la carte, et il doit
   donc rester visible. Sans cette règle, les cartes flottent sans limite. */
[data-shop-theme="minimal"] .card,
[data-shop-theme="minimal"] .category-card {
    border-color: var(--shop-border);
}

.card:hover,
.category-card:hover {
    box-shadow: var(--shop-shadow-lg);
}

/* Le soulèvement au survol n'a de sens que là où il y a une ombre pour le
   suggérer. Sur Minimal, il produirait un saut sans profondeur. */
[data-shop-theme="elegant"] .category-card:hover,
[data-shop-theme="moderne"] .category-card:hover {
    transform: translateY(-6px);
}

[data-shop-theme="minimal"] .category-card:hover {
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Grille produits — ratio d'image et densité
   ═══════════════════════════════════════════════════════════════════════════ */

/* .item-img img est le vrai balisage des cartes produit du socle. Une première
   version ciblait .shop-item .dlab-media img, hérité du template commercial et
   absent d'ici : le ratio d'image ne s'appliquait donc pas.
   
   Les images de méthode de livraison (.productsDeliveryMethods) sont exclues :
   ce sont des pictogrammes, pas des visuels produit, et leur imposer un ratio
   de 4:5 les déformerait. */
.card-img-top,
.category-card img,
.item-img > a > img,
.item-img > img {
    aspect-ratio: var(--shop-product-ratio);
    object-fit: cover;
    width: 100%;
    height: auto;
}

.productsDeliveryMethods,
.productsDeliveryMethod,
.item-img .availability-label img {
    aspect-ratio: auto;
    object-fit: contain;
    width: auto;
}

/* ── Étiquette de disponibilité ──────────────────────────────────────────
   L'apparence est factorisée ici ; le POSITIONNEMENT reste dans chaque template,
   parce qu'il diffère volontairement : décalée de 5 px vers la gauche et plus
   petite sur la liste, alignée et plus grande sur la fiche produit.

   L'ambre n'est PAS un jeton, et c'est délibéré. C'est une couleur SÉMANTIQUE :
   elle signale une contrainte de disponibilité, et doit rester reconnaissable quelle
   que soit la boutique. Un avertissement en vert menthe parce que le commerçant aime
   le vert menthe serait une régression d'usage, pas une personnalisation.

   Le rayon et l'ombre, eux, suivent le thème : sur un thème à angles droits,
   l'étiquette doit être droite aussi. */
.availability-label {
    background-color: #ffc107;
    color: #212529;
    padding: 5px 10px;
    border-radius: 0 var(--shop-radius) var(--shop-radius) 0;
    font-weight: var(--shop-weight-heading);
    box-shadow: var(--shop-shadow);
    z-index: 10;
}

/* Le logo de la boutique sert d'image de repli quand un produit n'a pas de photo.
   « object-fit: cover » le rognerait — sur un logo circulaire, les bords gauche et
   droit disparaîtraient. Il est donc CONTENU dans le cadre au ratio du thème, pas
   recadré : le cadre garde la forme voulue par le thème, le logo reste entier. */
.product-image-fallback {
    aspect-ratio: var(--shop-product-ratio);
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* PAS de surcharge du nombre de colonnes — retiré après essai visuel.

   Les cartes produit sont dessinées pour la largeur d'une colonne Bootstrap
   « col-md-4 » (3 par ligne). Les forcer à 5 par ligne les rend trop étroites et
   TRONQUE le libellé du bouton « Ajouter au panier ». Faire tenir le bouton
   demanderait de redessiner la carte, ce qui n'est pas le sujet.

   La densité varie donc par l'espacement (--shop-gap), le rythme vertical
   (--shop-section-y) et le ratio d'image, qui ne touchent pas à la largeur des
   cartes. C'est moins spectaculaire et ça ne casse rien. */

/* ═══════════════════════════════════════════════════════════════════════════
   4. Densité verticale
   ═══════════════════════════════════════════════════════════════════════════ */

.section-full,
.content-block > section,
.about-section {
    padding-top: var(--shop-section-y);
    padding-bottom: var(--shop-section-y);
}

.about-section,
.bg-gray,
.section-full.bg-gray {
    background-color: var(--shop-surface-alt) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. En-tête
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header .main-bar,
.site-header .sticky-header,
.site-header.header-basic .main-bar {
    background-color: var(--shop-header-bg) !important;
    border-bottom: 1px solid var(--shop-border);
    box-shadow: var(--shop-shadow);
}

.site-header .header-nav .nav > li > a,
.site-header .header-nav .nav > li > a.nav-link {
    color: var(--shop-header-ink) !important;
    font-family: var(--shop-font-body);
    font-weight: var(--shop-weight-body);
    text-transform: none;
    letter-spacing: 0;
}

.site-header .header-nav .nav > li:hover > a,
.site-header .header-nav .nav > li.active > a {
    color: var(--shop-primary) !important;
}

/* L'en-tête sombre de Moderne : la couleur d'accentuation d'un survol y serait
   souvent illisible, on garde donc du blanc et on souligne à la place. */
[data-shop-theme="moderne"] .site-header .header-nav .nav > li:hover > a,
[data-shop-theme="moderne"] .site-header .header-nav .nav > li.active > a {
    color: var(--shop-header-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* ATTENTION — la classe « center » du <header> est PORTEUSE.
   custom.css contient « .site-header.center .navbar-nav > li.cartMenuItem
   { float: right } » : le positionnement de l'icône panier en dépend. Un thème
   qui la retirerait casserait le panier sans que rien ne le signale.
   Les variations d'en-tête passent donc par les jetons et par data-shop-theme,
   jamais par la suppression de cette classe. */

/* Seul Moderne colle au défilement : un catalogue dense se parcourt longtemps,
   et la navigation doit rester à portée. Les deux autres laissent respirer. */
[data-shop-theme="minimal"] .sticky-header.is-fixed,
[data-shop-theme="elegant"] .sticky-header.is-fixed {
    position: static !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Pied de page
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    font-family: var(--shop-font-body);
}

.site-footer .footer-top {
    background-color: var(--shop-surface-alt);
    color: var(--shop-ink);
}

.site-footer .footer-bottom {
    background-color: var(--shop-primary) !important;
    color: var(--shop-primary-contrast);
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .footer-title {
    color: var(--shop-ink);
    font-family: var(--shop-font-heading);
}

/* ── Les liens du pied de page ──
   LE THÈME D'ORIGINE SUPPOSAIT UN PIED DE PAGE SOMBRE : `footer a, footer a:visited
   { color:#fff }` (style.css). Notre pied de page est clair, donc ces liens sortaient
   blanc sur gris.

   Le `:visited` est le vrai coupable, et il est retors : sa spécificité (0,1,2) bat
   celle de `footer p a` (0,0,3) que la peau colorait correctement. Seuls les liens
   DÉJÀ VISITÉS viraient au blanc — d'où un pied de page qui paraissait juste au
   premier chargement et se dégradait ensuite, un lien à la fois.

   On reprend donc la main sur les quatre états, y compris `:visited`. */
.site-footer .footer-top a,
.site-footer .footer-top a:visited {
    color: var(--shop-primary);
}

.site-footer .footer-top a:hover,
.site-footer .footer-top a:focus,
.site-footer .footer-top a:active {
    color: var(--shop-primary-dark);
}

/* Le texte non cliquable — horaires, adresse — se lit dans l'encre du thème. */
.site-footer .footer-top p,
.site-footer .footer-top li {
    color: var(--shop-ink);
}

/* Les pastilles d'icônes : le thème les peignait en turquoise fixe. */
.site-footer .widget_getintuch ul li i {
    background-color: var(--shop-surface);
    color: var(--shop-primary);
}

/* La barre du bas est pleine : tout ce qu'elle contient se lit sur la couleur primaire. */
.site-footer .footer-bottom a,
.site-footer .footer-bottom a:visited,
.site-footer .footer-bottom span {
    color: var(--shop-primary-contrast);
}

.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus {
    color: var(--shop-primary-contrast);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Séparateurs et accents
   ═══════════════════════════════════════════════════════════════════════════ */

.dlab-separator,
.widget-title:after,
.section-head .title:after {
    background-color: var(--shop-primary);
}

a {
    color: var(--shop-primary);
}

a:hover, a:focus {
    color: var(--shop-primary-dark);
}

::selection {
    background: var(--shop-primary);
    color: var(--shop-primary-contrast);
}

/* Le prix est l'information la plus consultée d'une fiche produit : il suit la
   couleur de la boutique et la graisse de titre dans tous les thèmes. */
.price,
.shop-item .price,
.product-price {
    color: var(--shop-primary);
    font-family: var(--shop-font-heading);
    font-weight: var(--shop-weight-heading);
}