/* EN-TETE ET RESEAUX 2026 — .fr et .net (23/10/2026, demande de Nico).
   Charge par templates/_partials/stylesheets.tpl, apres le CSS combine (meme principe que pro-2026.css).
   ⚠️ Incrementer ?v= dans stylesheets.tpl a chaque retouche : Cloudflare garde les CSS 7 jours. */

/* ── Contact et compte a droite de la barre du logo (header.tpl, « pd-entete-actions ») ── */
.pd-entete-actions {
  gap: .25rem;
}
.pd-entete-actions .header-block__action-btn {
  color: #fff;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.pd-entete-actions .header-block__action-btn:hover,
.pd-entete-actions .header-block__action-btn:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, .08);
}
/* « Nous contacter » est un lien obfusque (span sans href) : le theme donne `cursor: default` aux
   .header-block__action-btn sans href. */
.pd-entete-actions .obflink {
  cursor: pointer;
}
.pd-entete-actions .header-block__title {
  font-size: 14px;
  font-weight: 500;
}

/* ── Alignements (Nico, 23/10 : « ce message est décalé par rapport à la barre de recherche », « Sign in »
   pas aligné sur le panier) ── mesures a 1920 px sur le .net :
   · la recherche etait centree ENTRE le logo (204 px) et ce bloc (250-300 px) : centre a 930 px au lieu de 952 ;
     → logo et bloc recoivent la MEME largeur, la recherche retombe au milieu de la page ;
   · le compte finissait 6 px plus a droite que le panier : son bouton garde sa marge interieure (le panier a
     pe-md-0), et la colonne de la barre du logo est plus etroite de 18 px que le conteneur de la barre du menu
     (gouttiere de 12 px contre 30 px) → marge interieure du bouton a 0 et 30 px a droite du bloc. */
@media (min-width: 768px) {
  .header-bottom__logo,
  .pd-entete-actions {
    flex: 0 0 var(--pd-entete-cote, 210px);
    max-width: var(--pd-entete-cote, 210px);
  }
  .pd-entete-actions {
    justify-content: flex-end;
    padding-right: 30px;
  }
  .pd-entete-actions .ps-customersignin .header-block__action-btn {
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  :root { --pd-entete-cote: 340px; }
}
/* · le message de livraison etait centre dans l'espace laisse a droite de la note des avis (centre a 1 137 px) :
     au-dessus de 1200 px, il est centre sur la PAGE ; ses marges laissent toujours la place de la note.
     La parenthese ne s'affiche qu'a partir de 1600 px (avant : 1400), pour tenir sans etre coupee. */
@media (min-width: 1200px) {
  .pd-topbar { position: relative; }
  .pd-topbar__message {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 760px);
  }
}
@media (max-width: 1599.98px) {
  .pd-topbar__message small,
  .pd-topbar__message .small { display: none; }
}

/* ── Reseaux sociaux dans la bande du haut (header.tpl, « pd-topbar__reseaux ») — 23/10/2026 ──
   Meme rendu que le pied de page (module ps_socialfollow), en discret : pas d'accroche, icones de 16 px en blanc
   attenue. Le bord droit s'aligne sur celui du panier (meme ecart de 20 px que la ligne du compte). */
/* La colonne de droite range les icones sur la ligne de la bande (et non dessous) ; 20 px a droite = le bord
   du panier. Le message de livraison est centre sur la RANGEE entiere, plus sur la seule colonne de gauche, que
   les icones retrecissent. */
.header-top__right { display: flex; align-items: center; justify-content: flex-end; }
.pd-topbar__reseaux { padding-right: 20px; }
@media (min-width: 1200px) {
  .header-top .row { position: relative; }
  .pd-topbar { position: static; }
}
.pd-topbar__reseaux .ps-socialfollow { padding: 0 !important; }
.pd-topbar__reseaux .ps-socialfollow .container { max-width: none; padding: 0; }
.pd-topbar__reseaux .ps-socialfollow__accroche { display: none; }
.pd-topbar__reseaux ul { gap: 14px; flex-wrap: nowrap; }
.pd-topbar__reseaux .obflink {
  color: rgba(255, 255, 255, .7);
  padding: 0 !important;
  display: inline-flex;
  cursor: pointer;
  transition: color .15s ease;
}
.pd-topbar__reseaux .obflink:hover,
.pd-topbar__reseaux .obflink:focus-visible { color: #fff; }
.pd-topbar__reseaux .obflink svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pd-topbar__reseaux .obflink { transition: none; } }

/* ── Panier sur tablette (768 a 1199 px) — 23/10/2026, demande de Nico ──
   Le theme masque le panier de la barre du menu sous 1200 px (« .header-nav-full-width #_desktop_ps_shoppingcart
   { display:none } »), en comptant sur l'emplacement mobile — qui n'existe que SOUS 768 px (d-md-none). Entre
   les deux : aucun panier nulle part (constate en production a 880 px). On le rend, a droite de la barre, qui
   reste visible en defilant. Meme selecteur que le theme : cette feuille est chargee apres, elle l'emporte. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .header-nav-full-width #_desktop_ps_shoppingcart {
    display: flex;
    margin-left: auto;
  }
  /* A ces largeurs la barre du menu a une gouttiere plus etroite : 6 px (mesure : bloc a 979, panier a 1003). */
  .pd-entete-actions {
    padding-right: 6px;
  }
  /* Meme ecart pour les icones de la bande du haut (mesure : 979 contre 1003). */
  .pd-topbar__reseaux {
    padding-right: 0;
    margin-right: -4px;
  }
}

/* ── Accroche des reseaux sociaux, colonne d'identite du pied de page (ps_socialfollow.tpl) ── */
.footer__identity .ps-socialfollow__accroche {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
  max-width: 260px;
}
.footer__identity .ps-socialfollow__accroche strong {
  color: #fff;
  font-weight: 600;
}
/* Alignement a gauche : regle dans ps_socialfollow.tpl (classe justify-content-start), ici seulement l'ecart. */
.footer__identity .ps-socialfollow ul {
  gap: 16px;
}
/* Les icones sont des liens obfusques (span) : le theme ne stylait que des <a>. */
.footer__identity .ps-socialfollow .obflink {
  color: #fff;
  padding: 0 !important;
  display: inline-flex;
  cursor: pointer;
  transition: opacity .15s ease;
}
.footer__identity .ps-socialfollow .obflink svg {
  width: 22px;
  height: 22px;
}
.footer__identity .ps-socialfollow .obflink:hover,
.footer__identity .ps-socialfollow .obflink:focus-visible {
  opacity: .75;
}
@media (prefers-reduced-motion: reduce) {
  .pd-entete-actions .header-block__action-btn,
  .footer__identity .ps-socialfollow .obflink { transition: none; }
}