/* ==========================================================================
   Lekruu — tokens de marque

   Source des couleurs : storage/app/logos/
     noir    #000000  (le signe)
     jaune   #FFC90A  (le signe, declinaison claire)
     creme   #FEF0CE  (fond des maquettes)

   Repartition des roles, tenue partout — les deux couleurs travaillent
   ensemble, comme sur le signe :

     le NOIR porte les SURFACES et le TEXTE : barres, navigation, pieds de
     page, titres, liens, corps des cartes.

     le JAUNE porte l'ACTION : tout bouton qui declenche quelque chose est
     jaune, dans la boutique comme dans le back-office, ainsi que les reperes
     de marque — item de menu courant, bandes a motif, pastilles. Il ne
     s'emploie qu'en aplat portant du texte noir, jamais en couleur de texte
     sur fond clair, ou il ne tient que 1.54:1.

     le CREME habille les sections d'accroche, pas les ecrans denses ou la
     lisibilite prime.

   Un ecran montre donc toujours les deux : le noir autour, le jaune sur ce
   qu'il y a a cliquer.

   Cette feuille est chargee EN DERNIER dans chaque layout, apres les feuilles
   des themes achetes, afin de neutraliser leurs accents d'origine sans les
   modifier en profondeur.

   Tous les ratios de contraste annotes ici sont verifies automatiquement par
   tools/check-contrast.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Police d'affichage

   Bungee (SIL Open Font License 1.1) reprend les capitales pleines et le
   rythme serre du mot LEKRUU. Elle est auto-hebergee : la boutique sert des
   pays ou la latence vers un CDN tiers se voit, et le reste du parc de
   polices (Poppins) est deja local.

   font-display: swap — le titre doit rester lisible pendant le chargement.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bungee/bungee-latin.woff2') format('woff2'),
         url('../fonts/bungee/bungee-latin.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

@font-face {
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bungee/bungee-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Police d'affichage de l'accroche — Phosphate

   Les deux graisses de la maquette d'accueil : Solid pour les titres pleins,
   Inline pour le mot LEKRUU et sa rainure centrale. Extraites de la
   collection .ttc fournie par tools/split-ttc.php, les navigateurs ne sachant
   pas charger un .ttc.

   ATTENTION — LICENCE. Phosphate est (c) 2010 International TypeFounders,
   livree avec macOS. Le fichier ne porte AUCUNE licence d'incorporation web
   (les enregistrements nameID 13 et 14 sont absents) : la servir depuis nos
   domaines la redistribue publiquement. Une licence web ITF doit etre
   acquise, faute de quoi il suffit de faire pointer --font-display-hero et
   --font-display-inline sur var(--font-display) ci-dessous — Bungee reprend
   les memes capitales pleines, sous licence SIL OFL. Aucune autre ligne du
   depot n'est a toucher : tout passe par ces deux jetons.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Phosphate Solid';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/phosphate/phosphate-solid.woff') format('woff'),
         url('../fonts/phosphate/phosphate-solid.ttf') format('truetype');
}

@font-face {
    font-family: 'Phosphate Inline';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/phosphate/phosphate-inline.woff') format('woff'),
         url('../fonts/phosphate/phosphate-inline.ttf') format('truetype');
}

:root {
    /* --- Echelle primaire (noir) ---
           La marque est passee du brun au noir pur (#000). Rien n'est plus
           fonce que le noir : le survol part donc vers le gris anthracite
           (brand-500) et l'etat presse reste noir — le changement se lit
           dans le sens du survol. Les teintes 50 a 400 sont des gris neutres,
           sans aucune dominante chaude. */
    --brand-50:  #F5F5F5;
    --brand-100: #E8E8E8;
    --brand-200: #D4D4D4;
    --brand-300: #A3A3A3;
    --brand-400: #737373;   /* 4.74:1 sur blanc — bordures et gros texte */
    --brand-500: #2B2B2B;   /* survol — 14.35:1 sur blanc */
    --brand-600: #000000;   /* primaire — 21:1 sur blanc */
    --brand-700: #000000;   /* actif / presse */
    --brand-800: #000000;
    --brand-900: #000000;

    /* --- Echelle d'accent (jaune) ---
           A n'employer qu'en aplat. Les valeurs 500 a 900 existent pour les
           liseres et les etats, pas pour ecrire du texte sur fond clair. */
    --accent-50:  #FFF9E6;
    --accent-100: #FFEEBA;
    --accent-200: #FFE082;
    --accent-300: #FFD54A;  /* survol d'un aplat jaune */
    --accent-400: #FFC90A;  /* accent, couleur du signe */
    --accent-500: #E6B300;  /* aplat presse */
    --accent-600: #BF9500;
    --accent-700: #997700;  /* 4.21:1 sur blanc — lisere d'un aplat jaune */
    --accent-800: #7A5F00;
    --accent-900: #4D3B00;

    /* --- Echelle neutre (gris purs, sans dominante) --- */
    --neutral-50:  #F7F7F7;
    --neutral-100: #EEEEEE;
    --neutral-200: #DDDDDD;
    --neutral-300: #C2C2C2;
    --neutral-400: #8F8F8F;  /* 3.30:1 sur blanc — icones decoratives */
    --neutral-500: #616161;  /* 6.06:1 sur blanc */
    --neutral-600: #4D4D4D;
    --neutral-700: #3D3D3D;
    --neutral-800: #2E2E2E;
    --neutral-900: #1F1F1F;

    /* --- Roles semantiques --- */
    --color-primary:          var(--brand-600);
    --color-primary-hover:    var(--brand-500);
    --color-primary-active:   var(--brand-700);
    --color-primary-disabled: var(--brand-300);
    --color-on-primary:       #FFFFFF;

    /* L'accent ne porte jamais de texte clair : c'est un aplat lumineux.
       Le lisere lui donne une frontiere visible sur fond blanc, ou le jaune
       seul ne tient que 1.54:1 (WCAG 1.4.11 demande 3:1 pour la limite d'un
       composant). */
    --color-accent:         var(--accent-400);
    --color-accent-hover:   var(--accent-300);
    --color-accent-active:  var(--accent-500);
    --color-accent-border:  var(--accent-700);
    --color-on-accent:      var(--brand-800);   /* 10.36:1 sur l'accent */

    --color-surface:      #FFFFFF;
    --color-surface-alt:  var(--neutral-50);
    /* Fond des sections d'accroche — accueil, bandeaux, cartes produit.
       Volontairement absent des ecrans denses (panier, checkout, tableaux)
       ou le blanc reste le fond le plus lisible. */
    --color-canvas:       #FEF0CE;
    --color-border:       var(--neutral-200);
    --color-text:         #111111;
    --color-text-muted:   var(--neutral-500);
    --color-text-on-dark: #FFFFFF;

    /* --- Etats : volontairement distincts de la marque, sans quoi un bouton
           primaire deviendrait indiscernable d'un message d'erreur ---

           L'ambre d'avertissement cotoie desormais un jaune de marque. Les
           deux ne se croisent jamais dans le meme role : l'ambre est une
           couleur de texte ou un aplat portant du blanc, l'accent un aplat
           portant du noir. La regle color-not-only impose de toute facon une
           icone ou un mot a cote de la couleur. */
    --color-danger:  #B3261E;
    --color-success: #146C43;
    --color-warning: #8A5A00;
    --color-info:    #1B5E88;

    /* --- Navigation laterale du back-office ---
           Le noir sature l'ecran quand il occupe a la fois l'en-tete, la barre
           laterale et les boutons. La barre prend donc le teint clair, et le
           noir primaire est reserve au seul item courant : un accent, pas un
           aplat. Le theme achete, lui, figeait tout cela a #222. */
    --color-nav-surface:        var(--brand-50);      /* fond de la barre */
    --color-nav-surface-raised: var(--color-surface); /* sous-menus deplies */
    --color-nav-text:           var(--brand-900); /* 15.93:1 sur brand-50 */
    --color-nav-text-muted:     var(--neutral-500); /* intitules de section */
    --color-nav-item-hover:     var(--brand-100);
    /* L'item courant prend le jaune, comme les boutons : c'est le meme
       vocabulaire d'un bout a l'autre de l'application — le jaune dit « ici,
       maintenant ». Le lisere noir le detache du fond clair de la barre, ou le
       jaune seul ne tient que 1.47:1. */
    --color-nav-item-active:    var(--color-accent);
    --color-nav-on-item:        var(--color-on-accent);  /* 10.36:1 */
    --color-nav-item-accent:    var(--brand-600);
    --color-nav-border:         var(--color-border);

    /* --- Voiles de lisibilite poses sur les photographies ---
           Exprimes en rgba faute de pouvoir opacifier un jeton en CSS nu, mais
           declares ici et nulle part ailleurs. */
    --color-scrim-slide-top: rgba(0, 0, 0, .18);   /* --brand-900 a 18 % */
    --color-scrim-slide:     rgba(0, 0, 0, .48);   /* --brand-900 a 48 % */
    /* Le panneau doit porter seul la lisibilite : a 82 % le blanc tient
       5.4:1 meme sur la zone la plus claire du cliche. */
    --color-scrim-slide-panel: rgba(0, 0, 0, .82);
    --color-scrim-section:   rgba(255, 255, 255, .78);

    /* --- Focus : obligatoire et visible --- */
    --focus-ring: 0 0 0 3px rgba(0, 0, 0, .35);

    /* --- Motif de marque ---
           Bande tissee derivee des losanges du signe. Les couleurs sont
           ecrites en dur dans la data-URI : une variable CSS ne s'interpole
           pas dans une url(). Toute retouche de la palette se repercute donc
           ici a la main — c'est le seul endroit concerne. */
    --pattern-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 32 20'%3E%3Crect width='32' height='20' fill='%23000000'/%3E%3Cpath d='M16 2.5 23.5 10 16 17.5 8.5 10Z' fill='%23FFC90A'/%3E%3Cpath d='M16 6 20 10 16 14 12 10Z' fill='%23000000'/%3E%3Cpath d='M0 10 5 5v10Z' fill='%23FEF0CE'/%3E%3Cpath d='M32 10 27 5v10Z' fill='%23FEF0CE'/%3E%3C/svg%3E");
    --pattern-band-height: 12px;

    /* --- Couleurs d'operateurs de paiement ---
           Marques tierces : ces teintes identifient un operateur, elles ne
           sont pas des couleurs de marque Lekruu. Elles ne servent que de
           pastille derriere le logo, jamais de fond de texte. */
    --color-operator-mtn:    #FFCC00;
    --color-operator-orange: #FF7900;
    --color-operator-bank:   var(--neutral-200);
    --color-operator-cash:   var(--neutral-100);

    /* --- Panneau lateral de paiement --- */
    --slideover-width-sm:  22rem;
    --slideover-width-md:  32rem;
    --slideover-width-xl:  44rem;
    /* neutral-900 a 55 % : le voile doit isoler le panneau sans effacer la
       page (les 40-60 % recommandes pour un scrim de feuille modale) */
    --slideover-scrim:     rgba(0, 0, 0, .55);
    /* au-dessus des modales Bootstrap 4 (1050) et de leur voile (1040).
       Le theme achete monte jusqu'a z-index 100000 sur son en-tete fixe et
       ses menus. */
    --slideover-z:         100010;
    --slideover-shadow:    -12px 0 32px rgba(0, 0, 0, .18);

    /* --- Typographie --- */
    --font-display: 'Bungee', 'Poppins', 'Segoe UI', sans-serif;

    /* Accroche de l'accueil. Ces deux jetons sont le SEUL point de bascule de
       Phosphate : les remettre sur var(--font-display) suffit a repasser tout
       le site sous Bungee si la licence web n'est pas acquise (cf. le bloc
       @font-face plus haut). */
    --font-display-hero:   'Phosphate Solid', var(--font-display);
    --font-display-inline: 'Phosphate Inline', var(--font-display-hero);
}

/* --------------------------------------------------------------------------
   Boutons et liens

   Le bouton d'action prend le jaune, partout : c'est lui que l'oeil doit
   trouver en premier sur un fond noir comme sur un fond blanc. Le lisere lui
   donne une frontiere visible sur les surfaces claires, ou le jaune seul ne
   tient que 1.54:1 (WCAG 1.4.11 demande 3:1 pour la limite d'un composant).

   Le noir reste la couleur des liens et des aplats de marque : les deux ne se
   marchent pas dessus, l'un est une action, l'autre une surface.
   -------------------------------------------------------------------------- */

/* Le !important reprend celui du theme du back-office, qui figeait le bouton
   primaire en aplat plein avec `color: #fff !important` et un survol bleu
   #4656e9. Sans lui, la surcharge ne passe pas. */
.btn-primary,
.au-btn--green,
.au-btn--blue {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent-border) !important;
    color: var(--color-on-accent) !important;        /* 10.36:1 */
}

.btn-primary:hover,
.btn-primary:focus,
.au-btn--green:hover,
.au-btn--blue:hover {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-border) !important;
    color: var(--color-on-accent) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--color-accent-active) !important;
    border-color: var(--color-accent-border) !important;
    color: var(--color-on-accent) !important;
}

/* Desactive : le jaune eteint vers le sable, le libelle reste noir et lisible
   (7.36:1) — un bouton grise n'a pas a devenir indechiffrable. La couleur
   porte l'etat, l'attribut disabled le dit aux technologies d'assistance. */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--accent-100) !important;
    border-color: var(--accent-300) !important;
    /* !important pour tenir devant le garde-fou de fin de feuille, qui ramene
       tout ce qui est pose sur du jaune au noir le plus fonce. */
    color: var(--brand-500) !important;
    opacity: 1;
    cursor: not-allowed;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-accent);
    border-color: var(--color-accent-border);
    color: var(--color-on-accent);
}

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

/* --------------------------------------------------------------------------
   Focus visible — ne jamais supprimer l'outline sans le remplacer
   -------------------------------------------------------------------------- */

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

.form-control:focus {
    border-color: var(--brand-400);
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Utilitaires Bootstrap
   -------------------------------------------------------------------------- */

.text-primary   { color: var(--color-primary) !important; }
.bg-primary     { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.badge-primary  { background-color: var(--color-primary); color: var(--color-on-primary); }

.text-danger  { color: var(--color-danger)  !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info    { color: var(--color-info)    !important; }

.custom-control-input:checked ~ .custom-control-label::before,
.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-link { color: var(--color-primary); }

/* ==========================================================================
   Familles semantiques Bootstrap heritees du theme achete

   Le theme figeait sa propre palette : or #FFC750 pour "warning", noir bleute
   #2E2F39 pour "dark", gris bleutes #3D405C / #71748D pour le texte et
   #E6E6F2 pour les bordures.

   On reprend ici chaque famille pour l'aligner sur la palette Lekruu. Le
   !important reprend celui du theme : sans lui la surcharge ne passe pas.
   ========================================================================== */

/* --- warning : un vrai avertissement, distinct de l'accent de marque --- */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #FFFFFF;                       /* 5.93:1 sur #8A5A00 */
}

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background-color: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #FFFFFF;
}

.bg-warning     { background-color: var(--color-warning) !important; color: #FFFFFF; }
.text-warning   { color: var(--color-warning) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.badge-warning  { background-color: var(--color-warning); color: #FFFFFF; }

.alert-warning {
    color: #6B4600;
    background-color: #FDF3E0;
    border-color: #E8D3A8;
}

/* --- dark : noir de marque, plus le noir du theme ---

   Le theme utilisait "dark" comme accent : bandeaux d en-tete de carte,
   lignes de titre de tableau. On garde une teinte foncee, mais de la marque.
   Les boutons btn-dark, qui portaient en fait l action principale, ont ete
   bascules en btn-primary dans les vues. */
.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active {
    background-color: var(--brand-800);
    border-color: var(--brand-800);
    color: #FFFFFF;
}

.bg-dark, .bg-darks { background-color: var(--brand-800) !important; }
.text-dark { color: var(--neutral-800) !important; }

/* --- light --- */
.btn-light,
.btn-light:hover,
.btn-light:focus {
    background-color: var(--neutral-100);
    border-color: var(--neutral-200);
    color: var(--neutral-800);
}

.bg-light  { background-color: var(--neutral-50) !important; }
.text-light { color: var(--neutral-100) !important; }

/* --- succes, information, danger --- */
.btn-success, .btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #FFFFFF;
}

.btn-info, .btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #FFFFFF;
}

.btn-danger, .btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #FFFFFF;
}

.btn-outline-success { color: var(--color-success); border-color: var(--color-success); }
.btn-outline-info    { color: var(--color-info);    border-color: var(--color-info); }
.btn-outline-danger  { color: var(--color-danger);  border-color: var(--color-danger); }

.bg-success { background-color: var(--color-success) !important; color: #FFFFFF; }
.bg-info    { background-color: var(--color-info)    !important; color: #FFFFFF; }
.bg-danger  { background-color: var(--color-danger)  !important; color: #FFFFFF; }

.badge-success { background-color: var(--color-success); color: #FFFFFF; }
.badge-info    { background-color: var(--color-info);    color: #FFFFFF; }
.badge-danger  { background-color: var(--color-danger);  color: #FFFFFF; }

.badge-dot.badge-success { background-color: var(--color-success); }
.badge-dot.badge-info    { background-color: var(--color-info); }
.badge-dot.badge-warning { background-color: var(--color-warning); }
.badge-dot.badge-danger  { background-color: var(--color-danger); }
.badge-dot.badge-primary { background-color: var(--color-primary); }

/* ==========================================================================
   Utilitaires numerotes du theme e-commerce (public/assets/css/util.css)

   Ce theme nommait ses couleurs par un numero plutot que par un role :
   .bg1 = #222222, .bg4 = #111111, .bg7 = #333333. Ce sont les boutons
   d'action de toute la boutique — « Ajouter au panier », « Commander »,
   « Continuer », les pastilles de choix du pays, l'inscription du pied de
   page.

   C'est la ou la boutique appelle a l'action : ils prennent donc l'accent
   jaune, comme dans les maquettes, avec du noir dessus et un lisere qui leur
   donne une frontiere sur fond blanc.
   ========================================================================== */

.bg0, .bg1, .bg4, .bg7 {
    background-color: var(--color-accent) !important;
    border: 1px solid var(--color-accent-border);
    color: var(--color-on-accent) !important;
}

.hov1:hover,
.hov1:focus {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-border);
    color: var(--color-on-accent) !important;
}

.bg0:active, .bg1:active, .bg4:active, .bg7:active {
    background-color: var(--color-accent-active) !important;
}

/* Ces boutons portent souvent une classe de texte du theme (m-text3,
   s-text1...) qui fixe sa propre couleur : on la reprend pour rester
   lisible sur le jaune. */
.bg0 .m-text3, .bg1 .m-text3, .bg4 .m-text3,
.bg0.m-text3,  .bg1.m-text3,  .bg4.m-text3,
.bg0.s-text1,  .bg1.s-text1,  .bg4.s-text1 {
    color: var(--color-on-accent);
}

/* --- pastilles de choix du pays : fond blanc, lisere noir --- */
.btn-pays,
.btn-pays.bg4,
.btn-pays.bg1,
.btn-pays.m-text3 {
    background-color: var(--color-surface) !important;
    border: 2px solid var(--color-primary);
    color: var(--neutral-800) !important;      /* 12.72:1 sur blanc */
}

/* l'icone de fleche herite de la couleur du theme : on la ramene au noir */
.btn-pays .fa,
.btn-pays i {
    color: var(--color-primary);
}

.btn-pays:hover,
.btn-pays:focus,
.btn-pays.hov1:hover {
    background-color: var(--brand-50) !important;
    border-color: var(--color-primary-hover);
    color: var(--brand-900) !important;        /* 15.93:1 sur brand-50 */
}

.btn-pays:hover .fa,
.btn-pays:hover i {
    color: var(--color-primary-hover);
}

/* Derniers aplats noirs des themes, releves par tools/check-dark-surfaces.php */
.sub_menu,
.item-menu-mobile,
.active-pagination {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary);
}

.header-icons-noti {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary);
}

.nav-user-info {
    background-color: var(--brand-800) !important;
    color: var(--color-on-primary);
}

/* --- en-tete du site public ---
       Le theme le figeait a #222 (noir), puis il est reste blanc alors que la
       boutique et le back-office portaient deja l'aplat noir. Meme
       composition partout : barre noir, signe et menus jaunes. */
/* Pas de `position` ici : la barre porte .fixed-top, et un `position:
   relative` pose sur l'identifiant l'emporterait sur la classe — l'en-tete
   cesserait d'etre fixe et la navigation perdrait son bloc conteneur. Elle
   est deja positionnee, l'ancrage du ::after fonctionne tel quel. */
#header {
    background: var(--color-primary) !important;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Bande a motif en pied de barre. Elle est posee ici plutot que sur la
   section suivante : seule la barre connait sa propre hauteur. */
#header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--pattern-band-height);
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* Le theme ecrivait ses liens en blanc et colorait l'item courant avec le
   jeton primaire : sur la barre noire, l'item courant devenait noir sur noir
   — donc invisible. Les libelles passent au jaune, l'item courant au creme,
   et un filet jaune le souligne pour ne pas reposer sur la seule couleur. */
#header .navbar a,
#header .navbar a:focus,
#header .nav-menu a,
#header .nav-menu a:focus {
    color: var(--color-accent);          /* 7.58:1 sur le noir */
    font-weight: 600;
}

#header .navbar a:hover,
#header .navbar li:hover > a,
#header .nav-menu a:hover {
    color: var(--color-canvas);          /* 10.34:1 */
}

#header .navbar .active,
#header .navbar .active:focus,
#header .navbar li > a.active,
#header .nav-menu .active > a {
    color: var(--color-canvas);
    border-bottom: 2px solid var(--color-accent);
}

/* Menu deplie en petit ecran : le theme pose les liens sur un panneau BLANC,
   ou le jaune de la barre devenait illisible (1.6:1) et l'item courant creme
   disparaissait. Sur ce panneau, texte noir ; l'item courant garde un repere
   jaune, mais en filet a gauche, la ou le doigt ne le cache pas. */
#header .navbar-mobile a:not(.lk-header__cta),
#header .navbar-mobile a:not(.lk-header__cta):focus,
#header .navbar-mobile li:hover > a:not(.lk-header__cta),
#header .navbar-mobile .active:not(.lk-header__cta) {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text);
    border-bottom: 0;
}

#header .navbar-mobile a:not(.lk-header__cta):hover {
    background-color: var(--neutral-50);
}

#header .navbar-mobile .active:not(.lk-header__cta) {
    box-shadow: inset 4px 0 0 var(--color-accent);
}

/* Le bouton d'appel de l'en-tete public : le theme lui donnait un aplat noir
   #222 borde de la couleur primaire. Il prend l'accent, comme partout. */
#header .navbar .getstarted,
#header .nav-menu .getstarted,
#header .getstarted {
    background: var(--color-accent) !important;
    border: 2px solid var(--color-accent-border) !important;
    color: var(--color-on-accent) !important;
}

#header .navbar .getstarted:hover,
#header .getstarted:hover {
    background: var(--color-accent-hover) !important;
    color: var(--color-on-accent) !important;
}

/* Le lien « Boutique » de cet en-tete porte .btn-outline-primary et
   .text-primary : les deux resolvent au noir, invisible sur la barre noire.
   Sur cette barre, le contour et le libelle passent au jaune. */
#header .navbar .btn-outline-primary,
#header .navbar .text-primary,
#header .navbar .btn-outline-primary .fa {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-color: transparent !important;
}

#header .navbar .btn-outline-primary:hover,
#header .navbar .btn-outline-primary:focus {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
}

#header .navbar .btn-outline-primary:hover .fa {
    color: var(--color-on-accent) !important;
}

/* Selecteur de langue de l'en-tete : meme traitement que la barre boutique. */
#header .navbar .dropdown-toggle,
#header .navbar select {
    color: var(--color-accent) !important;
    background: transparent !important;
}

#header .navbar .dropdown-menu .dropdown-item {
    color: var(--brand-700) !important;      /* le menu s'ouvre sur du blanc */
}

#header .navbar .dropdown-menu .dropdown-item:hover,
#header .navbar .dropdown-menu .dropdown-item.active {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
}

/* Bascule du menu mobile. */
#header .mobile-nav-toggle,
#header .mobile-nav-toggle i {
    color: var(--color-accent);
}

/* --- typographie et bordures : le theme les teintait en bleu --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--neutral-800);
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--color-border) !important;
}

.dropdown-menu,
.card,
.modal-content,
.list-group-item {
    border-color: var(--color-border);
}

/* Survol d'un item de menu deroulant (back-office, menus d'export des
   tables...). Le theme posait l'aplat primaire : devenu noir, il effacait
   le libelle. Le survol prend le jaune d'action, texte noir — 13.61:1. */
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.table thead th,
.table td,
.table th {
    border-color: var(--color-border);
}

/* ==========================================================================
   Titres d'affichage

   Bungee est une police de capitales pleines : elle porte les titres courts
   et rien d'autre. Un paragraphe compose dedans devient illisible, et son jeu
   de caracteres est latin — le texte courant reste sur la pile heritee.
   ========================================================================== */

.lk-display {
    font-family: var(--font-display);
    font-weight: 400;             /* Bungee n'a qu'une graisse */
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.12;
}

/* ==========================================================================
   Bande a motif

   Losanges tisses repris du signe. Purement decorative : elle est masquee aux
   technologies d'assistance par aria-hidden dans le balisage.
   ========================================================================== */

.lk-band {
    height: var(--pattern-band-height);
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* ==========================================================================
   En-tete de la boutique

   Le theme livrait une barre blanche a menu gris fonce. Elle passe au noir,
   signe jaune et menus jaunes : c'est la composition de la maquette, et celle
   de la barre du back-office — les deux espaces se repondent.

   Deux niveaux de noir : la barre d'informations prend le ton le plus fonce,
   la barre de navigation le noir de marque. Le degre de profondeur separe les
   deux sans ligne de partage.
   ========================================================================== */

.topbar {
    background-color: var(--brand-500) !important;
    border-bottom: 1px solid var(--brand-700);
}

/* Le theme donnait a ce bloc son propre aplat gris clair (#f5f5f5) : sur la
   barre noire il ressortait comme une tache blanche, et les libelles clairs
   qu'on y pose y devenaient illisibles. Il se fond desormais dans la barre. */
.topbar-child2,
.topbar-child2-mobile {
    background: transparent !important;
}

.topbar,
.topbar-email,
.topbar-child1,
.topbar .topbar-social-item,
.topbar select,
.topbar .selection-1 {
    color: var(--color-canvas);          /* 14.13:1 sur brand-800 */
}

.topbar a,
.topbar button,
.topbar .dropdown-toggle,
.topbar .topbar-social-item {
    color: var(--color-canvas) !important;
}

/* Le menu deroulant du choix de pays, lui, s'ouvre sur une surface blanche :
   ses items gardent donc le noir. */
.topbar .dropdown-menu .dropdown-item {
    color: var(--brand-700) !important;
}

.topbar .dropdown-menu .dropdown-item.active,
.topbar .dropdown-menu .dropdown-item:active,
.topbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
}

.topbar a:hover,
.topbar a:focus,
.topbar .topbar-social-item:hover {
    color: var(--color-accent) !important;   /* 10.36:1 sur brand-800 */
}

.wrap_header,
.wrap_header_mobile {
    background-color: var(--color-primary) !important;
}

/* Le signe jaune reprend son rapport d'origine : le theme etirait l'image. */
.wrap_header .logo img,
.wrap_header_mobile .logo-mobile img {
    height: 52px;
    width: auto;
    max-width: none;
}

/* « Marketplace » a cote du logo, partout ou il s'affiche (boutique, site
   public, espaces connectes, connexion, pied de page). Separe par un filet,
   meme police que le mot Lekruu : 18px sur ordinateur, 16px sur mobile.
   En jaune sur les barres noires ; .lk-logo--on-light le passe en noir sur
   les fonds clairs. .lk-logo--compact accompagne les petits logos (35px)
   des barres d'application. */
.lk-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.lk-logo__label {
    padding-left: .75rem;
    border-left: 1px solid currentColor;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-accent);          /* 7.58:1 sur le noir */
}

.lk-logo--on-light .lk-logo__label {
    color: var(--color-text);            /* 18.9:1 sur le blanc */
}

/* En-tete de la boutique sur ordinateur : la mention monte a 20px. */
.wrap_header .lk-logo__label { font-size: 1.25rem; }

.lk-logo--compact { gap: .5rem; }

.lk-logo--compact .lk-logo__label {
    padding-left: .5rem;
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .lk-logo { gap: .5rem; }

    .lk-logo__label {
        padding-left: .5rem;
        font-size: 1rem;
    }
}

/* --- menus --- */

.main_menu > li > a,
.main_menu > li > a:focus {
    color: var(--color-accent);          /* 7.58:1 sur le noir */
    font-weight: 600;
}

.main_menu > li:hover > a,
.main_menu > li > a:hover {
    color: var(--color-canvas);
    border-bottom-color: var(--color-accent);
}

/* Item courant : le libelle passe au creme et un filet jaune le souligne —
   la position ne repose donc pas sur la seule couleur. */
.main_menu > li.active > a,
.main_menu li.active > a {
    color: var(--color-canvas);
    border-bottom: 2px solid var(--color-accent);
}

/* Sous-menus : le theme les figeait a #222. */
.sub_menu {
    background-color: var(--brand-700) !important;
    border: 1px solid var(--brand-500);
}

.sub_menu li,
.sub_menu a {
    color: var(--color-canvas);
}

.sub_menu > li:hover > a {
    color: var(--color-accent);
}

/* Icones du panier et du compte : le noir de marque disparaitrait sur la
   barre noire. */
.wrap_header .header-wrapicon1 > .header-icon1,
.wrap_header .header-wrapicon2 > .header-icon1,
.wrap_header_mobile .header-icon1 {
    color: var(--color-accent);
}

.wrap_header .header-wrapicon1 > .header-icon1:hover,
.wrap_header .header-wrapicon2 > .header-icon1:hover {
    color: var(--color-canvas);
}

/* Les libelles de la barre. Le :not(...) est indispensable : les panneaux
   deroulants (mini-panier, menu du compte) sont des enfants de .header-icons
   et posent leur propre surface — un libelle creme y devenait invisible. */
.wrap_header .header-icons > div > span,
.wrap_header .header-icons > div > span > a,
.wrap_header_mobile .header-icons-mobile > div > span > a {
    color: var(--color-canvas) !important;
}

.wrap_header .header-icons > div > span > a:hover {
    color: var(--color-accent) !important;
}

/* --- panneaux deroulants de l'en-tete : mini-panier et menu du compte ---
       Le theme les servait en blanc a lisere gris. Ils prennent l'aplat noir
       des sous-menus : la barre et ce qui en descend forment un seul bloc. */
.wrap_header .header-dropdown,
.wrap_header_mobile .header-dropdown,
.header-cart.header-dropdown {
    background-color: var(--brand-700) !important;
    border-top: 3px solid var(--color-accent);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.header-dropdown,
.header-dropdown a,
.header-dropdown span,
.header-dropdown li,
.header-dropdown .header-cart-item-name,
.header-dropdown .header-cart-item-info,
.header-dropdown .header-cart-total {
    color: var(--color-canvas) !important;   /* 12.54:1 sur brand-700 */
}

.header-dropdown a:hover,
.header-dropdown a:focus {
    color: var(--color-accent) !important;
}

/* Total du panier : c'est le chiffre que l'on vient chercher. */
.header-dropdown .header-cart-total strong,
.header-dropdown .header-cart-total span {
    color: var(--color-accent) !important;   /* 9.19:1 */
}

.header-dropdown .header-cart-item {
    border-bottom-color: var(--brand-500);
}

/* Le bouton de suppression garde sa valeur d'alerte, mais le rouge sombre du
   theme ne tient pas sur le noir. */
.header-dropdown .text-danger {
    color: #F3A9A4 !important;               /* 6.96:1 sur brand-700 */
}

/* Les boutons du panneau portent .bg1 : ils sont deja jaunes. La regle de
   couleur ci-dessus, plus specifique, leur imposait du creme — donc du clair
   sur du jaune. On leur rend le noir, et la place d'une cible tactile. */
.header-dropdown .header-cart-wrapbtn > a,
.header-dropdown .bg0,
.header-dropdown .bg1,
.header-dropdown .bg4,
.header-dropdown .bg7 {
    color: var(--color-on-accent) !important;
    min-height: 44px;
}

/* La pastille de comptage du panier etait noire sur noir. */
.lk-shop-header .header-icons-noti {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent);
}

/* Le trait de separation du theme etait pense pour un fond clair. */
.wrap_header .linedivide1 {
    background-color: var(--brand-300);
}

/* Barre du menu hamburger sur mobile. */
.wrap_header_mobile .hamburger-inner,
.wrap_header_mobile .hamburger-inner::before,
.wrap_header_mobile .hamburger-inner::after {
    background-color: var(--color-accent);
}

/* Menu deroulant mobile : meme aplat que les sous-menus du bureau. */
.wrap-side-menu {
    background-color: var(--brand-700);
}

.wrap-side-menu .item-menu-mobile a,
.wrap-side-menu a {
    color: var(--color-canvas) !important;
}

.wrap-side-menu a:hover {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   Carte produit

   Vignette carree sur fond neutre : la photo tient entiere dans le cadre
   (contain), quel que soit son format. Dessous, le nom sur deux lignes au
   plus, puis le prix en gras et le bouton panier rond, toujours visible —
   un survol n'existe pas sur mobile.

   Mode vitrine (accueil public) : a la place du prix et du panier, un bouton
   pleine largeur vers la boutique (.lk-product__cta).
   ========================================================================== */

.lk-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-surface);
    transition: box-shadow .2s ease-out, border-color .2s ease-out;
}

.lk-product:hover {
    border-color: var(--neutral-300);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.lk-product__media {
    position: relative;
}

/* Carre reserve avant le chargement (padding en pourcentage) : pas de saut
   de mise en page, meme sans aspect-ratio. */
.lk-product__thumb {
    position: relative;
    display: block;
    padding-top: 100%;
    background-color: var(--color-surface-alt);
}

.lk-product__thumb img {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    transition: transform .3s ease-out;
}

.lk-product:hover .lk-product__thumb img {
    transform: scale(1.03);
}

.lk-product__badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    padding: .1875rem .5rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);       /* noir sur le jaune */
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Indisponible : le mot porte l'information, pas la seule couleur. */
.lk-product__badge--off {
    background-color: var(--brand-500);
    color: var(--color-text-on-dark);
}

.lk-product__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .5rem;
    padding: .75rem;
}

.lk-product__name {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    /* deux lignes au plus : les cartes d'une rangee gardent la meme hauteur */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Le theme pose sa propre police et sa taille sur les liens. */
.lk-product__name a {
    font: inherit;
    color: var(--color-text);
    text-decoration: none;
}

.lk-product__name a:hover,
.lk-product__name a:focus { text-decoration: underline; }

.lk-product__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
}

.lk-product__price {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bouton panier rond : 44px, la cible tactile minimale. */
.lk-product__cart {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-accent-border);
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 1.125rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .15s ease, transform .15s ease;
}

.lk-product__cart:hover,
.lk-product__cart:focus { background-color: var(--color-accent-hover); }

.lk-product__cart:active {
    background-color: var(--color-accent-active);
    transform: scale(.95);
}

.lk-product__cart:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lk-product__cta--off {
    border-color: var(--color-border);
    background-color: var(--neutral-100);
    color: var(--neutral-400) !important;
    cursor: not-allowed;
}

/* Vitrine : bouton pleine largeur vers la boutique. */
.lk-product__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: .5rem 1rem;
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.lk-product__cta:hover,
.lk-product__cta:focus {
    background-color: var(--color-accent-hover);
    color: var(--color-on-accent);
    text-decoration: none;
}

@media (min-width: 768px) {
    .lk-product__body { padding: 1rem; }
    .lk-product__name { font-size: .9375rem; }
    .lk-product__price { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lk-product,
    .lk-product__thumb img,
    .lk-product__cart { transition: none; }
    .lk-product:hover .lk-product__thumb img { transform: none; }
}

/* ==========================================================================
   Liste des produits de la boutique

   Barre d'outils (Voir par, Trier par, nombre de resultats), puis la grille :
   2 colonnes sur mobile, 3 sur tablette, 4 sur ordinateur.
   ========================================================================== */

.lk-shop-list {
    background-color: var(--color-surface);
    padding: 0 0 3rem;
}

/* Bande creme du titre et des filtres ; la grille reste sur le blanc. */
.lk-shop-list__head {
    margin-bottom: 1.5rem;
    padding: 1.25rem 0 .25rem;
    border-bottom: 1px solid var(--accent-200);
    background-color: var(--color-canvas);
}

.lk-shop-list__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lk-shop-list__title {
    margin: 0 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-text);
}

.lk-shop-list__subtitle {
    margin: 0;
    color: var(--color-text-muted);
}

.lk-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    align-items: end;
    margin: 1rem 0;
}

.lk-toolbar__field { min-width: 0; }

.lk-toolbar__label {
    display: block;
    margin-bottom: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text);
}

/* 16px : en dessous, iOS zoome sur le champ au toucher. */
.lk-toolbar__select {
    width: 100%;
    min-height: 44px;
    padding: .5rem 2rem .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;
}

.lk-toolbar__select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.lk-toolbar__apply {
    min-height: 44px;
    padding: .5rem 1.25rem;
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
}

.lk-toolbar__count {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .875rem;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .lk-shop-list__head { padding-top: 1.75rem; }
    .lk-shop-list__inner { padding: 0 1.5rem; }
    .lk-shop-list__title { font-size: 1.5rem; }

    .lk-toolbar {
        grid-template-columns: minmax(0, 260px) minmax(0, 220px) auto 1fr;
    }

    .lk-toolbar__count {
        grid-column: auto;
        justify-self: end;
        align-self: end;
        line-height: 44px;
    }
}

.lk-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-product-grid__item { min-width: 0; }

@media (min-width: 768px) {
    .lk-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .lk-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.lk-shop-list__pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* --- aucun resultat --- */

.lk-empty {
    max-width: 560px;
    margin: 2rem auto;
    text-align: center;
}

.lk-empty__icon {
    font-size: 2rem;
    color: var(--color-text-muted);
}

.lk-empty__title {
    margin: .75rem 0 .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-empty__text {
    margin: 1rem 0 .5rem;
    color: var(--color-text-muted);
}

.lk-empty__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 1.5rem;
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent) !important;
    font-weight: 600;
    text-decoration: none;
}

.lk-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .375rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text) !important;
    text-decoration: none;
}

.lk-chip:hover,
.lk-chip:focus { border-color: var(--color-primary); }

/* --- bannieres publicitaires --- */

.lk-ads img {
    display: block;
    width: 100%;
    height: auto;
}

.lk-ads--vertical {
    max-width: 480px;
    margin: 2rem auto 0;
}

/* ==========================================================================
   En-tete de la boutique

   Une seule barre noire, disposee par grille :
     - mobile   : « menu | logo | compte + panier », puis la recherche en
                  pleine largeur ;
     - >= 992px : « logo | menu | recherche | compte + panier ».
   Au-dessus, une ligne fine : partenaire de la commande et pays.
   La barre reste collee en haut au defilement (sticky, sans JS).
   ========================================================================== */

.lk-shop-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.lk-shop-header__strip {
    background-color: var(--brand-500);
    color: var(--color-canvas);
    font-size: .75rem;
}

.lk-shop-header__strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    max-width: 1280px;
    min-height: 32px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lk-shop-header__partner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-shop-header__strip .dropdown-toggle {
    min-height: 32px;
    white-space: nowrap;
    border: 0;
    color: var(--color-canvas) !important;
    font-size: .75rem;
}

.lk-shop-header__strip .dropdown-menu .dropdown-item {
    color: var(--color-text) !important;
}

.lk-shop-header__strip .dropdown-menu .dropdown-item.active,
.lk-shop-header__strip .dropdown-menu .dropdown-item:hover {
    background-color: var(--color-accent);
    color: var(--color-on-accent) !important;
}

.lk-shop-header__bar {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
        "menu logo actions"
        "search search search";
    align-items: center;
    gap: .5rem .75rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: .5rem 1rem .75rem;
}

.lk-shop-header__menu   { grid-area: menu; }
.lk-shop-header__logo   { grid-area: logo; justify-self: center; }
.lk-shop-header__nav    { grid-area: nav; display: none; }
.lk-shop-header__search { grid-area: search; min-width: 0; }
.lk-shop-actions        { grid-area: actions; }

.lk-shop-header__logo img {
    height: 36px;
    width: auto;
}

/* Sur un telephone etroit, le libelle « Marketplace » ferait deborder le
   logo : seul le signe reste. */
@media (max-width: 399.98px) {
    .lk-shop-header__logo .lk-logo__label { display: none; }
}

/* --- boutons d'icone (menu, compte, panier) --- */

.lk-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.lk-icon-btn:hover,
.lk-icon-btn:focus { color: var(--color-canvas); }

.lk-icon-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.lk-icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* .header-icons (crochet du JS du panier) est positionné en absolu par le
   thème : on rend le bloc à la grille. */
.lk-shop-header .lk-shop-actions {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.lk-shop-actions__item { position: relative; }

/* Panneaux (compte, mini-panier) : ancres sous leur bouton, jamais plus
   larges que l'ecran. */
.lk-shop-actions .lk-shop-dropdown {
    top: calc(100% + .5rem);
    right: 0;
    width: min(339px, calc(100vw - 2rem));
}

/* --- recherche --- */

.lk-search { position: relative; }

.lk-search__field {
    display: flex;
    border-radius: 999px;
    background-color: var(--color-surface);
    overflow: hidden;
}

.lk-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;              /* 16px : pas de zoom iOS */
}

.lk-search__input::placeholder { color: var(--color-text-muted); }

.lk-search__input:focus { outline: none; }

.lk-search__field:focus-within {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.lk-search__submit {
    flex: 0 0 auto;
    width: 52px;
    height: 44px;
    border: 0;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 1.125rem;
    cursor: pointer;
}

.lk-search__submit:hover,
.lk-search__submit:focus { background-color: var(--color-accent-hover); }

.lk-search__panel {
    position: absolute;
    top: calc(100% + .375rem);
    left: 0;
    right: 0;
    z-index: 1200;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.lk-suggest {
    margin: 0;
    padding: .375rem 0;
    list-style: none;
}

.lk-suggest__option {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .5rem 1rem;
    color: var(--color-text);
    cursor: pointer;
}

.lk-suggest__option:hover,
.lk-suggest__option.is-active { background-color: var(--neutral-100); }

.lk-suggest__option.is-active { box-shadow: inset 3px 0 0 var(--color-primary); }

.lk-suggest__option--category,
.lk-suggest__option--all { border-top: 1px solid var(--color-border); }

.lk-suggest__option--all { font-weight: 600; }

.lk-suggest__thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background-color: var(--color-surface-alt);
    object-fit: contain;
}

.lk-suggest__icon {
    flex: 0 0 44px;
    text-align: center;
    color: var(--color-text-muted);
}

.lk-suggest__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .9375rem;
    line-height: 1.35;
}

.lk-suggest__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-suggest__name strong { font-weight: 700; }

.lk-suggest__meta {
    display: flex;
    gap: .5rem;
    font-size: .8125rem;
}

.lk-suggest__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lk-suggest__off { color: var(--color-danger); }

.lk-suggest__empty {
    padding: .75rem 1rem;
    color: var(--color-text-muted);
}

/* --- menu mobile --- */

.lk-side-menu {
    background-color: var(--brand-700);
    border-top: 1px solid var(--brand-500);
}

.lk-side-menu__list li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    color: var(--color-canvas) !important;
}

.lk-side-menu__list li.active a {
    box-shadow: inset 3px 0 0 var(--color-accent);
    font-weight: 700;
}

.lk-side-menu__extra { padding: .5rem 1rem 1rem; }

/* --- menu de l'ordinateur --- */

.lk-shop-nav {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-shop-nav__item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .75rem;
    border-bottom: 2px solid transparent;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.lk-shop-nav__item a:hover,
.lk-shop-nav__item a:focus { color: var(--color-canvas); }

/* Page courante : couleur ET filet jaune, pas la seule couleur. */
.lk-shop-nav__item.active a {
    color: var(--color-canvas);
    border-bottom-color: var(--color-accent);
}

/* --- ordinateur --- */

@media (min-width: 992px) {
    .lk-shop-header__bar {
        grid-template-columns: auto auto minmax(240px, 1fr) auto;
        grid-template-areas: "logo nav search actions";
        gap: 1.5rem;
        padding: .75rem 1.5rem;
    }

    .lk-shop-header__menu { display: none; }
    .lk-shop-header__logo { justify-self: start; }
    .lk-shop-header__logo img { height: 48px; }
    .lk-shop-header__nav { display: block; }
    .lk-shop-header__search { max-width: 640px; width: 100%; justify-self: center; }

    .lk-side-menu { display: none !important; }

    .lk-shop-header__strip-inner { padding: 0 1.5rem; }
}

/* ==========================================================================
   Sections d'accroche restantes

   Bande services de l'accueil et lames de carrousel encore utilisees ailleurs
   (promotions, page boutique) : le texte y est pose sur une photographie et
   demande un voile.
   ========================================================================== */

.item-slick1 {
    position: relative;
    background-position: center center;
}

.item-slick1::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg,
                var(--color-scrim-slide-top) 0%,
                var(--color-scrim-slide) 100%);
    pointer-events: none;
}

.item-slick1 .wrap-content-slide1 {
    position: relative;
    z-index: 1;
}

.item-slick1 .slide1-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-scrim-slide-panel);
    padding: 1.75rem 2.5rem;
    border-radius: 6px;
    max-width: 46rem;
    margin-bottom: 2.25rem;
}

@media (max-width: 575px) {
    .item-slick1 .slide1-panel {
        padding: 1.25rem 1.25rem;
    }
}

/* Fond des sections vitrine. Le theme pose .bgwhite sur ses sections : on le
   neutralise a l'interieur du bloc plutot que dans chaque composant, qui sert
   aussi des pages ou le blanc doit rester. */
.lk-canvas,
.lk-canvas .bgwhite {
    background-color: var(--color-canvas) !important;
}

/* Le theme ecrit ses textes secondaires en #888888 : 3.2:1 sur le creme,
   sous le seuil AA. */
.lk-canvas .s-text13,
.lk-canvas .s-text8,
.lk-canvas .s-text11 {
    color: var(--neutral-700);          /* 9.03:1 sur le creme */
}

.lk-canvas .m-text14 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--brand-600);
}

/* Liste des categories : la categorie ouverte se distingue par la graisse et
   par un repere jaune, pas par la seule couleur — les deux libelles sont
   noirs. */
.list-categories a {
    display: inline-block;
    padding-left: .75rem;
    border-left: 3px solid transparent;
}

.list-categories a.active {
    color: var(--brand-600);
    font-weight: 700;
    border-left-color: var(--color-accent);
}

/* Vignettes de categories : les visuels n'ont pas tous le meme rapport, ce qui
   creusait des trous dans la grille. */
.banner .block1 > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Pastille posee sur la vignette de categorie : le theme la laissait blanche
   a 95 %, elle se confondait avec les photographies claires. */
.banner .block1-wrapbtn .bg3 {
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent-border);
    color: var(--color-on-accent);      /* 10.36:1 */
    font-weight: 600;
}

/* Icones de l'en-tete boutique : le theme livrait des PNG absents du depot,
   remplaces par la fonte d'icones. Elles n'heritent d'aucune taille. */
.header-wrapicon1 > .header-icon1,
.header-wrapicon2 > .header-icon1 {
    font-size: 22px;
    line-height: 1;
    color: var(--color-primary);
    vertical-align: middle;
}

.header-wrapicon1 > .header-icon1:hover,
.header-wrapicon2 > .header-icon1:hover {
    color: var(--color-primary-hover);
}

/* --- bande « Commande / Paiement / Livraison » --- */

.section-services {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.section-services::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: var(--color-scrim-section);
    pointer-events: none;
}

.section-services > * {
    position: relative;
    z-index: 1;
}

/* Le theme donnait #555 aux titres et #888 au texte : 3.54:1 sur blanc,
   sous le seuil AA avant meme d'ajouter une photographie dessous. */
.section-services .m-text12 {
    color: var(--neutral-800);
}

.section-services .s-text11 {
    color: var(--neutral-600);
}

/* --- titres de section de la boutique ---
       Le filet a motif sous le titre rappelle la bande de la section
       d'accroche : c'est ce qui relie les sections entre elles. */
.sec-title .m-text5 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--brand-600);
}

.sec-title { text-align: center; }

.sec-title::after {
    content: "";
    display: block;
    width: 8rem;
    height: var(--pattern-band-height);
    margin: 1rem auto 0;
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
    border-radius: 2px;
}

/* ==========================================================================
   Ecrans d'authentification (.splash-container)

   La carte etait rouge de haut en bas : bandeau primaire portant un logo lui
   aussi rouge — donc invisible — et pied `bg-dark` portant des liens
   illisibles. Le noir se replie sur le bouton d'action et le lisere
   superieur ; le reste passe en surfaces claires.
   ========================================================================== */

.splash-container .card {
    border: 1px solid var(--color-border);
    /* Declare apres la bordure generale, sinon celle-ci en reprend la teinte. */
    border-top: 3px solid var(--color-primary);
}

.splash-container .card-header {
    background-color: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
    padding-top: 24px;
    padding-bottom: 24px;
}

.splash-container .card-footer,
.splash-container .card-footer.bg-dark {
    background-color: var(--color-surface-alt) !important;
    border-top: 1px solid var(--color-border);
}

.splash-container .card-footer a,
.splash-container .card-footer .footer-link,
.splash-container .card-footer .link-yellow {
    color: var(--color-primary);
}

.splash-container .card-footer a:hover,
.splash-container .card-footer a:focus,
.splash-container .card-footer .link-yellow:hover,
.splash-container .card-footer .link-yellow-hover-bg-dark:hover {
    color: var(--color-primary-hover);
    background-color: transparent;
}

.splash-container .card-footer-item-bordered:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

/* ==========================================================================
   Barre superieure du back-office

   Aplat noir portant la declinaison jaune du signe — c'est exactement la
   composition de l'artboard de marque. La bande a motif en pied de barre
   ramene les deux couleurs cote a cote et separe l'en-tete du contenu.
   ========================================================================== */

.lk-appbar {
    background-color: var(--color-primary) !important;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.lk-appbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background-color: var(--color-accent);
}

/* Les libelles de la barre heritent du gris du theme, illisible sur le noir.
   Ils passent au jaune, comme les menus de la boutique. */
.lk-appbar .nav-link,
.lk-appbar .navbar-nav .nav-link,
.lk-appbar .nav-link i,
.lk-appbar .navbar-brand,
.lk-appbar .nav-user-name {
    color: var(--color-accent);        /* 7.58:1 sur le noir */
}

.lk-appbar .nav-link:hover,
.lk-appbar .nav-link:focus,
.lk-appbar .nav-link:hover i {
    color: var(--color-canvas);        /* 10.34:1 sur le noir */
}

.lk-appbar .navbar-toggler {
    border-color: var(--color-accent);
}

/* ==========================================================================
   Navigation laterale du back-office
   (public/admin/assets/libs/css/style.css, regles .nav-left-sidebar /
   .sidebar-dark)

   Le theme achete y figeait trois aplats noirs :
     .sidebar-dark            background #222   -> surface claire de marque
     .submenu                 background #222   -> surface blanche
     .nav-link:hover/.active  color      #222   -> libelle noir sur le fond

   La barre reste claire et seul l'item courant porte le jaune de marque :
   c'est ce qui l'empeche de saturer l'ecran a cote de l'en-tete noir. L'etat
   actif ne repose pas sur la seule couleur, un lisere noir a gauche le
   signale aussi par la forme (regle color-not-only).
   ========================================================================== */

.nav-left-sidebar,
.sidebar-dark {
    background-color: var(--color-nav-surface) !important;
    /* Barre claire sur page claire : sans lisere, elle se confond avec le
       contenu. */
    border-right: 1px solid var(--color-nav-border);
}

.nav-left-sidebar .navbar-nav .nav-link,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link,
.nav-left-sidebar .nav-link i,
.sidebar-dark.nav-left-sidebar .nav-link i {
    color: var(--color-nav-text);
}

.nav-left-sidebar .nav-divider,
.sidebar-dark .nav-divider {
    color: var(--color-nav-text-muted);
}

/* survol et focus : fond de marque, libelle toujours clair */
.nav-left-sidebar .navbar-nav .nav-link:hover,
.nav-left-sidebar .navbar-nav .nav-link:focus,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:hover,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus {
    background-color: var(--color-nav-item-hover) !important;
    color: var(--color-nav-text) !important;
}

.nav-left-sidebar .navbar-nav .nav-link:hover i,
.nav-left-sidebar .navbar-nav .nav-link:focus i {
    color: var(--color-nav-text);
}

/* item actif : aplat jaune, libelle noir, lisere noir a gauche */
.nav-left-sidebar .navbar-nav .nav-link.active,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active {
    background-color: var(--color-nav-item-active) !important;
    color: var(--color-nav-on-item) !important;
    /* Le jaune ne tient que 1.38:1 sur le fond clair de la barre : c'est le
       contour noir qui delimite la pastille (10.47:1), et le lisere epais a
       gauche qui signale l'etat par la forme. Pose en ombre interne pour ne
       pas decaler la mise en page. */
    box-shadow: inset 0 0 0 1px var(--color-nav-item-accent),
                inset 4px 0 0 var(--color-nav-item-accent);
}

.nav-left-sidebar .navbar-nav .nav-link.active i,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active i {
    color: var(--color-nav-on-item);
}

/* focus clavier : anneau visible sur fond sombre */
.nav-left-sidebar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--color-nav-text);
    outline-offset: -2px;
}

/* Sous-menus deplies.
   Le theme les cible avec six classes (.sidebar-dark.nav-left-sidebar .submenu
   .nav .nav-item .nav-link) : il faut reprendre le meme selecteur, sinon le
   #222 du theme l'emporte et les sous-menus restent noirs. */
.nav-left-sidebar .submenu,
.sidebar-dark.nav-left-sidebar .submenu {
    background-color: var(--color-nav-surface-raised);
    border-color: var(--color-nav-border);
}

.nav-left-sidebar .submenu .nav .nav-item .nav-link,
.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link {
    color: var(--color-nav-text);
    background-color: var(--color-nav-surface-raised);
}

.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover,
.nav-left-sidebar .submenu .nav .nav-item .nav-link:focus,
.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover,
.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link:active,
.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link:focus {
    background-color: var(--color-nav-item-hover);
    color: var(--color-nav-text);
}

/* item courant d'un sous-menu : meme traitement que le menu principal */
.nav-left-sidebar .submenu .nav .nav-item a.active,
.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item a.active {
    background-color: var(--color-nav-item-active);
    color: var(--color-nav-on-item);
    box-shadow: inset 0 0 0 1px var(--color-nav-item-accent),
                inset 4px 0 0 var(--color-nav-item-accent);
}

.nav-left-sidebar .navbar-toggler {
    background-color: var(--color-nav-surface-raised);
    border-color: var(--color-nav-border);
}

/* ==========================================================================
   Facture : coordonnees masquees

   Panneau pose au-dessus d'une facture ouverte par son seul numero. Le
   telephone de l'achat debloque les coordonnees. Mobile d'abord : champ et
   bouton empiles, cote a cote des 576px.
   ========================================================================== */

.lk-reveal {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: .75rem;
    background-color: var(--color-surface);
}

.lk-reveal .lk-reveal__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}

.lk-reveal .lk-reveal__head > i {
    flex: 0 0 auto;
    margin-top: .2rem;
    font-size: 1.125rem;
    color: var(--color-text);
}

.lk-reveal .lk-reveal__title {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-reveal .lk-reveal__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.lk-reveal .lk-reveal__label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-reveal .lk-reveal__row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lk-reveal .lk-reveal__input {
    width: 100%;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background-color: var(--color-surface);
    color: var(--color-text);
    /* 16px : en deca, iOS zoome automatiquement a la mise au point. */
    font-size: 1rem;
}

.lk-reveal .lk-reveal__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--accent-200);
}

.lk-reveal .lk-reveal__input[aria-invalid="true"] {
    border-width: 2px;
    border-color: var(--color-danger);
}

.lk-reveal .lk-reveal__submit {
    min-height: 48px;
    padding: .5rem 1.5rem;
    border: 1px solid var(--color-accent-border);
    border-radius: .5rem;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease-out;
}

.lk-reveal .lk-reveal__submit:hover,
.lk-reveal .lk-reveal__submit:focus {
    background-color: var(--color-accent-hover);
}

.lk-reveal .lk-reveal__error {
    margin: .5rem 0 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-danger);
}

@media (min-width: 576px) {
    .lk-reveal .lk-reveal__row {
        flex-direction: row;
    }

    .lk-reveal .lk-reveal__input {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================================
   Garde-fou : jamais de clair sur le jaune

   Regle de marque : sur un aplat jaune on ecrit en noir, jamais en blanc
   ni en creme — le blanc n'y tient que 1.54:1.

   Les themes achetes posent leurs couleurs de texte avec !important sur des
   selecteurs parfois plus specifiques que les notres. Cette section, placee en
   fin de feuille, ramene tout ce qui se trouve sur un aplat jaune au noir de
   marque. Ajouter ici toute nouvelle surface d'accent.
   ========================================================================== */

.bg0, .bg1, .bg4, .bg7,
.btn-primary,
.lk-cta--accent,
.lk-product__cta,
.lk-product__cart:not(.lk-product__cta--off),
.lk-product__badge:not(.lk-product__badge--off),
.lk-search__submit,
.lk-toolbar__apply,
.lk-empty__cta,
.lk-reveal__submit,
.header-icons-noti,
.banner .block1-wrapbtn .bg3,
.nav-left-sidebar .navbar-nav .nav-link.active,
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active,
.swal2-actions button.swal2-confirm {
    color: var(--color-on-accent) !important;
}

/* Les icones heritent souvent d'une classe de couleur Bootstrap posee par le
   theme (text-white, text-light) : elles suivent le libelle. */
.bg0 > i, .bg1 > i, .bg4 > i, .bg7 > i,
.btn-primary > i,
.lk-cta--accent > i,
.lk-product__cta > i,
.lk-product__cart > i,
.lk-search__submit > i,
.nav-left-sidebar .navbar-nav .nav-link.active > i {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   Respect de prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   En-tete du site public

   Ces regles vivent ici plutot que dans brand.css : elles ne concernent que
   la barre du site vitrine, la boutique et le back-office ont la leur.
   ========================================================================== */

.lk-header .lk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lk-header .lk-header__logo img {
    height: 44px;
    width: auto;
    max-width: 100%;
}

/* Les intitules : capitales serrees, comme la maquette. */
.lk-header .lk-header__nav .nav-link {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Le theme colle les entrees les unes aux autres : sans cette gouttiere, le
   dernier intitule touche la pastille d'action et parait passer dessous. */
.lk-header .lk-header__nav > ul {
    align-items: center;
    gap: .5rem;
}

.lk-header .lk-header__nav > ul > li:last-child {
    margin-left: .75rem;
}

/* L'acces partenaire est l'action de la barre : il prend donc le jaune, avec
   le noir par-dessus — 10.36:1.

   Le selecteur porte #header et deux classes a dessein. La regle generale
   `#header .navbar a` plus haut teinte TOUS les liens de la barre en jaune ;
   sur un aplat jaune, cela donnait un libelle invisible. Il faut donc la
   battre en specificite, d'ou (1 id, 2 classes) contre (1 id, 1 classe,
   1 element). */
#header .lk-header__nav .lk-header__cta,
.lk-header .lk-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: .5rem 1.125rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent-border);
    color: var(--color-on-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease-out;
}

#header .lk-header__nav .lk-header__cta:hover,
#header .lk-header__nav .lk-header__cta:focus,
.lk-header .lk-header__cta:hover,
.lk-header .lk-header__cta:focus {
    background-color: var(--color-accent-hover);
    color: var(--color-on-accent);
    text-decoration: none;
}

/* --- recherche --------------------------------------------------------- */

.lk-header .lk-header__search {
    position: relative;
    display: flex;
    align-items: center;
}

.lk-header .lk-header__search-toggle,
.lk-header .lk-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    /* La barre du site vitrine est noire : les icones prennent le jaune, comme
       les liens de navigation. --color-nav-text vise la barre CLAIRE du
       back-office et disparaitrait ici. */
    color: var(--color-accent);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color .18s ease-out;
}

.lk-header .lk-header__search-toggle:hover,
.lk-header .lk-header__burger:hover {
    background-color: rgba(255, 201, 10, .16);
}

.lk-header .lk-header__search-toggle:focus-visible,
.lk-header .lk-header__burger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Le champ se deploie en panneau sous la loupe : l'inserer dans le flux
   ferait sauter toute la barre a chaque ouverture. */
.lk-header .lk-header__search-form {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: min(18rem, calc(100vw - 2rem));
    padding: .5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.lk-header .lk-header__search-form input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: .25rem .625rem;
    border: 0;
    background: none;
    color: var(--color-text);
    /* 16px : en deca, iOS zoome automatiquement a la mise au point. */
    font-size: 1rem;
}

.lk-header .lk-header__search-form input:focus {
    outline: none;
}

.lk-header .lk-header__search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: .5rem;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    cursor: pointer;
}

/* Le contour de mise au point se pose sur le panneau entier : le champ n'a
   pas de bordure propre, il n'y aurait rien a souligner. */
.lk-header .lk-header__search.is-open .lk-header__search-form:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}