/*
 * Euro Shop Key — bandeau de confiance et ligne de note Trustpilot de ma-cle.fr, version 1.0.3 (28/10/2026, phase E ; tient sur une ligne dans les 10 langues).
 * 1.0.3 (corrections phase E, tour 2) : header des ordinateurs de 1024 a 1799 px dans l ecran (voir la fin du fichier).
 * 1.0.2 (corrections phase E) : « 4.9/5 Trustpilot · 1,841 reviews » visible aussi sur telephone (decision de L. du 28/10 15h55),
 *         etoiles, pastille et marges laterales du bandeau reduites sous 480 px pour tenir sur une ligne a 360 px ; style de la note dans la
 *         barre d'achat collee de la fiche (.esk-avis-barre).
 * 1.0.1 : ajout des trois regles du bandeau v3.5 de ma-cle oubliees au portage (header colle en haut au lieu d'etre fixe
 *         sous le bandeau, marges du haut reduites) : sur mobile, le debut de chaque page passait sous le header.
 * Portage du bandeau v3.5 de ma-cle.fr (main.php, 26/08/2026), rendu cote serveur dans header.php.
 * Charge sur toutes les pages par includes/checkout-pc.php.
 */
#notification-banner { padding: .3rem 0 !important; }
/* comme ma-cle (main.php v3.5) : le header colle en haut au defilement, le contenu commence sous lui */
#header { position: sticky !important; top: 0 !important; }
section.pt-36 { padding-top: 2.2rem !important; }
main.pt-32 { padding-top: 1.8rem !important; }
.esk-band { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: nowrap; overflow: hidden; width: 100%; }
.esk-trust { display: inline-flex; align-items: center; gap: .38rem; color: #fff; text-decoration: none; font-size: .76rem; white-space: nowrap; }
.esk-trust:hover { color: #fff; text-decoration: underline; }
.esk-stars { display: inline-flex; gap: 2px; }
.esk-sq { background: #00b67a; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; }
.esk-sq i { color: #fff; font-size: 7px; }
.esk-trust-exc { font-weight: 600; }
.esk-trust-note { font-weight: 700; }
.esk-trust-nb { opacity: .92; }
.esk-trust-tp { font-weight: 600; }
.esk-trust-sep { opacity: .75; }
.esk-code { background: #FECC00; color: #111827; font-weight: 700; font-size: .72rem; padding: .14rem .6rem; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; line-height: 1.5; }
.esk-code:active { transform: scale(.96); }
.esk-code:focus-visible, .esk-trust:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.esk-d { display: none; color: #fff; font-size: .76rem; white-space: nowrap; align-items: center; gap: .35rem; }
.esk-d img { height: 13px; width: auto; }
.esk-d i { color: #fde047; font-size: .72rem; }
@media (min-width: 900px) { .esk-d { display: inline-flex; } }
@media (max-width: 1199px) { .esk-d2 { display: none; } }
@media (max-width: 1099px) { .esk-d1 { display: none; } }
/* masque par le script de header.php quand le bandeau ne tient pas sur une ligne (langues longues) */
.esk-band .esk-cache { display: none !important; }
@media (max-width: 480px) {
  #notification-banner > .container { padding-left: .5rem !important; padding-right: .5rem !important; }
  .esk-m-off { display: none !important; }
  .esk-band { gap: .4rem; }
  .esk-trust { font-size: .66rem; gap: .22rem; }
  .esk-trust .esk-sq { width: 11px; height: 11px; }
  .esk-trust .esk-sq i { font-size: 6px; }
  .esk-trust .esk-stars { gap: 1px; }
  .esk-code { font-size: .66rem; padding: .12rem .45rem; }
}

/* Ligne de note (fiche produit, page de paiement, commande recue) */
.esk-avis-ligne { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #334155; text-decoration: none; }
.esk-avis-ligne:hover .esk-avis-txt { text-decoration: underline; }
.esk-avis-ligne .esk-sq { width: 16px; height: 16px; }
.esk-avis-ligne .esk-sq i { font-size: 9px; }
.esk-avis-ligne .fa-external-link-alt { font-size: 10px; color: #94a3b8; }
.esk-avis-fiche-wrap { margin: 2px 0 10px; }
.esk-hero-avis:hover { text-decoration: none; }

/* Barre d'achat collee de la fiche (ordinateur) : meme note que la ligne sous le titre */
.esk-avis-barre { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; text-decoration: none; white-space: nowrap; }
.esk-avis-barre:hover span { text-decoration: underline; }
.esk-avis-barre .esk-sq { width: 14px; height: 14px; }
.esk-avis-barre .esk-sq i { font-size: 8px; }
/* telephones etroits (360-379 px, Android courants) : un cran plus petit pour les langues longues (de, nl, da) */
@media (max-width: 379px) {
  .esk-band { gap: .35rem; }
  .esk-trust { font-size: .62rem; gap: .18rem; }
  .esk-trust .esk-sq { width: 9px; height: 9px; }
  .esk-trust .esk-sq i { font-size: 5px; }
  .esk-code { font-size: .62rem; padding: .1rem .4rem; }
}
/* 1.0.2 : header des telephones de moins de 390 px (Android 360-384 px). Depuis la phase D, les quatre boutons de droite
   (langue, panier, compte, menu) depassaient de 25 px a 360 px : le bouton menu etait coupe ; avec le header colle (1.0.1)
   la page devenait en plus deplacable de cote. Espaces entre ces boutons ramenes a 6 px. */
@media (max-width: 389px) {
  #header .flex.items-center.space-x-5 { gap: 6px !important; }
  #header .flex.items-center.space-x-5 > * { margin-left: 0 !important; margin-right: 0 !important; }
}
/* tres petits ecrans (< 340 px) : les etoiles cedent la place, la note, Trustpilot et la pastille restent */
@media (max-width: 339px) { .esk-trust .esk-stars { display: none; } }

/* 1.0.3 (corrections phase E, tour 2) : header des ordinateurs de 1024 a 1799 px (portables et ecrans 1280, 1366, 1440, 1536 et 1600 px).
   Avant, logo + menu + recherche + langue + panier + compte demandaient 1 420 a 1 650 px selon la langue alors que la
   colonne centrale du theme ne fait que 1 024 ou 1 280 px : le panier et le bouton compte sortaient de l'ecran (jusqu'a
   600 px de trop en neerlandais) et la page se deplacait de cote. Defaut present depuis la phase D, identique sur ma-cle.
   - header sur toute la largeur de la fenetre (le contenu de la page ne bouge pas) ;
   - recherche repliee en une loupe ronde qui s'ouvre vers la gauche au clic ou au clavier (Entree lance la recherche) ;
   - langue = drapeau seul (la liste deroulante garde les noms), bouton compte = icone seule (le texte reste lu par les
     lecteurs d'ecran), espaces du menu reduits ;
   - de 1024 a 1279 px, le menu passe dans le bouton menu (le meme que sur tablette), qui s'ouvre sur le cote. */
@media (min-width: 1024px) and (max-width: 1799px) {
  #header > .container { max-width: 100% !important; }
  #header nav.lg\:flex > :not([hidden]) ~ :not([hidden]) { margin-left: 1.1rem !important; margin-right: 0 !important; }
  #header .flex.items-center.space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: .75rem !important; margin-right: 0 !important; }
  #header form[role="search"] { margin: 0; }
  #header .relative.md\:block { width: 2.5rem; height: 2.5rem; flex: none; }
  #header .relative.md\:block input[name="s"] { position: absolute; top: 0; right: 0; height: 2.5rem; width: 2.5rem !important; padding: 0 0 0 2.5rem !important; cursor: pointer; z-index: 5; transition: width .2s ease; }
  #header .relative.md\:block input[name="s"]::placeholder { color: transparent; }
  #header .relative.md\:block input[name="s"]:focus { width: 16rem !important; padding-right: 1rem !important; cursor: text; }
  #header .relative.md\:block input[name="s"]:focus::placeholder { color: #9ca3af; }
  #header .relative.md\:block .absolute.left-3 { left: .8rem; z-index: 6; pointer-events: none; transition: left .2s ease; }
  #header .relative.md\:block form:focus-within .absolute.left-3 { left: -12.7rem; }
  #header .macle-lang-current .macle-lang-name, #header .macle-lang-current .macle-lang-caret { display: none !important; }
  #header .macle-lang-current { padding: .45rem .55rem !important; }
  #header .macle-lang-list { left: auto !important; right: 0 !important; }
  #header .btn-md .sm\:inline { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  #header .btn-md .fa-user-circle { margin-right: 0 !important; }
  #header .btn-md { padding-left: .8rem !important; padding-right: .8rem !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #header nav.lg\:flex { display: none !important; }
  #header #mobile-menu-toggle { display: flex !important; }
  #mobile-menu.lg\:hidden { display: block !important; }
}
/* 29/10/2026 : sur telephone, les 4 badges du haut de l accueil en grille 2 x 2 alignee */
@media (max-width: 767px) {
  .esk-hero-badges { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; justify-items: stretch; }
  .esk-hero-badges > div { width: 100%; min-width: 0; padding: 8px 10px !important; }
  .esk-hero-badges > div > div:first-child { width: 32px; height: 32px; margin-right: 8px; flex-shrink: 0; }
  .esk-hero-badges .font-semibold { font-size: 13px; line-height: 1.2; }
  .esk-hero-badges .text-xs { font-size: 11px; }
}