/* Poppins chargée via <link> dans le <head> (vite.config.js, FONT_HEAD), pas
   par @import — cf. commentaire dans base/style.css. */

/* ==========================================================================
   Header PrintMyTransfert
   Couleurs : tokens de tokens/variables.css (--pmt-color-*).
   Les hauteurs sont exposees en variables : elles servent aussi a decaler
   le contenu sous le header fixe (voir .slider-top / .page-heading).
   ========================================================================== */

:root {
  --header-topbar-h: 38px;
  --header-main-h: 88px;
  --header-h: 126px;
  --header-h-scrolled: 64px;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6000;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--pmt-color-dark);
  color: var(--pmt-color-white);
  font-family: Poppins, helvetica\neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 2px 14px var(--pmt-overlay-black-18);
  transition: box-shadow 0.3s ease;
}

#header:hover {
  z-index: 10000;
}

/* Neutralise le `ul li { list-style: disc !important }` global de style.css */
#header ul,
#header ol {
  margin: 0;
  padding: 0;
}

#header li {
  list-style: none !important;
  margin-bottom: 0;
}

#header img {
  margin: 0;
  padding: 0;
  background-image: none;
}

#header a {
  text-decoration: none;
}

/* NB : style.css applique `*, *::before, *::after { justify-content:
   space-around; flex-wrap: wrap }`. Chaque conteneur flex du header redeclare
   donc explicitement `flex-wrap` et `justify-content` : sans ca, les elements
   passent a la ligne et se recentrent tout seuls. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   1. Barre utilitaire : slogan + langue + compte (masquee au scroll)
   -------------------------------------------------------------------------- */

.header-topbar {
  height: var(--header-topbar-h);
  background: var(--pmt-overlay-black-18);
  border-bottom: 1px solid var(--pmt-overlay-white-12);
  transition:
    height 0.3s ease,
    opacity 0.3s ease;
}

.header-topbar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-topbar-h);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-slogan {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--pmt-overlay-white-82);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-utils {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#header .header-utils > li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.header-utils > li + li::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 12px 0 6px;
  background: var(--pmt-overlay-white-25);
}

/* Selecteur de langue (ouverture au survol et au focus clavier, sans JS) */
#traduction {
  position: relative;
}

.current_lang {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--pmt-color-white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.current_lang img {
  display: block;
  width: 20px;
  height: auto;
  border-radius: 2px;
}

.current_lang .fa {
  font-size: 9px;
  transition: transform 0.25s ease;
}

#traduction:hover .current_lang,
#traduction:focus-within .current_lang {
  background: var(--pmt-overlay-white-14);
}

#traduction:hover .current_lang .fa,
#traduction:focus-within .current_lang .fa {
  transform: rotate(180deg);
}

.list_lang {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 116px;
  padding: 4px 0;
  background: var(--pmt-color-white);
  border-radius: 8px;
  box-shadow: 0 14px 30px var(--pmt-overlay-black-25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.list_lang li {
  padding: 4px;
}

.list_lang li:not(:first-child):not(:last-child) a {
  margin-top: -4px;
  margin-bottom: -4px;
}

#traduction:hover .list_lang,
#traduction:focus-within .list_lang {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.list_lang a {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 14px;
  color: var(--pmt-color-header-ink);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.list_lang a:hover {
  background: var(--pmt-color-header-menu-hover-bg);
}

.list_lang img {
  display: block;
  width: 20px;
  height: auto;
  border-radius: 2px;
}

.header-account {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--pmt-color-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.header-account .icon {
  color: var(--pmt-color-primary);
  font-size: 16px;
  transition: color 0.2s ease;
}

.header-account:hover,
.header-account:hover .icon {
  color: var(--pmt-color-primary-hover);
}

/* --------------------------------------------------------------------------
   2. Rangee principale : logo + navigation + recherche + CTA
   -------------------------------------------------------------------------- */

.header-main {
  height: var(--header-main-h);
  transition: height 0.3s ease;
}

#conteneur_header {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

#header #logo {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  text-align: left;
}

#header #logo a {
  display: block;
}

#header #logo img {
  display: block;
  width: auto;
  height: 72px;
  padding: 0;
  border-radius: 6px;
  transition: height 0.3s ease;
}

.right_logo {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  padding: 0;
  vertical-align: top;
}

#position-menu {
  position: relative;
  width: 100%;
}

#menu_haut {
  margin: auto;
}

#menu_haut > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

#menu_haut > ul > li {
  position: relative;
  transition: 0.3s all ease;
}

#menu_haut > ul > li > a {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: var(--header-main-h);
  padding: 0 9px;
  color: var(--pmt-color-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
  transition: color 0.25s ease;
}

/* Soulignement anime sous l'entree survolee */
#menu_haut > ul > li > a::before {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 16px;
  left: 9px;
  height: 2px;
  background: var(--pmt-color-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#menu_haut > ul > li:hover > a::before,
#menu_haut > ul > li > a:focus-visible::before {
  transform: scaleX(1);
}

#menu_haut > ul > li:hover > a {
  color: var(--pmt-color-primary);
}

/* Premiere entree (Nos marquages) mise en avant */
#menu_haut > ul > li:first-child > a {
  color: var(--pmt-color-primary);
}

#menu_haut > ul > li:first-child:hover > a {
  color: var(--pmt-color-primary-hover);
}

.PGS_QUI_SOMMES_NOUS > a > i {
  font-size: 17px;
}

.sousmenu > a::after {
  content: "\f107";
  display: inline-block;
  font:
    400 13px fontawesome,
    sans-serif;
  text-align: center;
  transition: transform 0.3s ease;
  will-change: transform;
}

.sousmenu:hover > a::after {
  transform: rotate(180deg);
}

/* Bouton d'action principal */
.header-searchbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 196px;
  height: 27px;
  padding: 0 2px 0 12px;
  background: var(--pmt-overlay-white-12);
  border: 1px solid var(--pmt-overlay-white-20);
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.header-searchbar:focus-within {
  background: var(--pmt-overlay-white-20);
  border-color: var(--pmt-color-primary);
}

.header-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--pmt-color-white);
  font-family: inherit;
  font-size: 12px;
}

.header-searchbar__input::placeholder {
  color: var(--pmt-overlay-white-70);
}

.header-searchbar__btn {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--pmt-color-white);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.header-searchbar__btn:hover {
  color: var(--pmt-color-primary);
}

.header-cta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: var(--pmt-color-primary);
  border-radius: 4px;
  color: var(--pmt-color-dark-alt);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.header-cta i {
  font-size: 18px;
}

.header-cta:hover {
  background: var(--pmt-color-primary-hover);
  box-shadow: 0 6px 18px var(--pmt-color-brand-green-glow);
  color: var(--pmt-color-dark-alt);
  transform: translateY(-1px);
}

/* Le legacy `a:hover, a:active` (base/style.css) repeint tout lien en #a2d109,
   soit exactement le fond du bouton, et `a:active` (0-1-1) passe devant la base
   `.header-cta` (0-1-0) : sans cette regle le libelle disparait le temps de
   l'appui. */
.header-cta:active {
  color: var(--pmt-color-dark-alt);
}

/* Anneau de focus clavier contraste sur le fond vert, plutot que celui du
   navigateur. Meme parti pris que `.pmt-button:focus-visible`. */
.header-cta:focus-visible {
  outline: 2px solid var(--pmt-color-dark-alt);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Etat compacte au scroll (classe posee sur <body> par javascript.js)
   -------------------------------------------------------------------------- */

body.scroll_down .header-topbar {
  height: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  opacity: 0;
}

body.scroll_down .header-main {
  height: var(--header-h-scrolled);
}

body.scroll_down #header #logo img {
  height: 44px;
}

body.scroll_down #menu_haut > ul > li > a {
  height: var(--header-h-scrolled);
}

body.scroll_down #menu_haut > ul > li > a::before {
  bottom: 12px;
}

/* --------------------------------------------------------------------------
   4. Sous-menus simples
   -------------------------------------------------------------------------- */

#menu_haut > ul > li .menu-sub {
  position: absolute;
  top: 100%;
  left: -100000px;
  z-index: 999;
  padding: 4px;
  background: var(--pmt-color-white);
  border-top: 3px solid var(--pmt-color-primary);
  border-radius: 0 0 8px 8px;
  text-align: left;
}

.menu-sub > li {
  position: relative;
  display: block !important;
  padding: 0;
}

/* `display: block` est indispensable : sans lui le lien reste inline, ignore
   `min-width` et son padding deborde de la ligne (fond de survol decale). */
.menu-sub a {
  display: block;
  min-width: 200px;
  width: 100%;
  padding: 12px 16px !important;
  border-radius: 6px;
  color: var(--pmt-color-header-ink) !important;
  font-size: 13.5px;
  font-weight: 400 !important;
  line-height: 1.35;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.menu-sub > li:hover > a {
  background: var(--pmt-color-header-menu-hover-bg-alt);
  color: var(--pmt-color-primary-dark) !important;
}

/* Titres de groupe dans les sous-menus simples (.menu-sub). */
.menu-sub > li.menu-sub-group {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--pmt-color-primary);
  pointer-events: none;
}

.menu-sub > li.menu-sub-group:first-child {
  padding-top: 6px;
}

/* "Presses a chaud" et "Notre entreprise" : chaque titre est place au milieu
   du menu (bloc centre) tout en gardant le texte aligne a gauche. */
.PGS_SPECIALE_1 .menu-sub,
.PGS_SPECIALE_7 .menu-sub {
  text-align: center;
}

.PGS_SPECIALE_1 .menu-sub a,
.PGS_SPECIALE_7 .menu-sub a {
  display: inline-block;
  min-width: 0;
  text-align: left;
}

#menu_haut ul ul {
  left: -9999px;
  opacity: 0;
  transition:
    top 0.2s ease,
    opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   5. Mega-menu "Nos marquages"
   -------------------------------------------------------------------------- */

#menu_haut > ul > li .transfert_menu {
  position: absolute;
  top: 100%;
  left: -10000px;
  z-index: 999;
  width: 100%;
  padding: 0;
  background: var(--pmt-color-white);
  border-top: 3px solid var(--pmt-color-primary);
  text-align: left;
  list-style-type: none;
}

ul.transfert_menu > li {
  display: flex;
  width: 100%;
  padding: 0;
}

ul.transfert_menu ul {
  display: flex;
}

#header ul li .transfert_menu li,
#header ul li .transfert_menu li.title3 {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  color: var(--pmt-color-header-ink);
  font-size: 14px;
  line-height: normal;
  text-transform: none;
}

#header ul li .transfert_menu > li {
  justify-content: center;
}

#header ul li .transfert_menu a {
  color: var(--pmt-color-header-ink);
}

#header ul li ul.sous-menu-sub li.title1 {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 8px;
  font-size: 16px;
  text-transform: uppercase;
}

#header ul li ul.sous-menu-sub li.title1 a {
  padding: 0;
  color: var(--pmt-color-header-ink-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
}

#header ul li ul.sous-menu-sub li.title1 a:hover {
  color: var(--pmt-color-primary);
}

#menu_haut ul.transfert_menu li .sous-menu-sub {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  left: 0;
  padding-right: 14px !important;
  opacity: 1;
}

#menu_haut ul.transfert_menu li .sous-menu-sub:last-child {
  padding-right: 0 !important;
  padding-left: 14px !important;
}

/* Toute colonne sauf la première prend un padding gauche pour ne pas coller
   au filet séparateur (robuste au nombre de colonnes du mega-menu). */
#menu_haut ul.transfert_menu li .sous-menu-sub:not(:first-child) {
  padding-left: 14px !important;
}

#menu_haut ul.transfert_menu li .filet_deco {
  display: flex;
  width: 1px;
  background-color: var(--pmt-color-header-divider);
}

/* Enveloppes de liste : rendent l'imbrication <ul> dans <ul> valide sans
   changer le rendu (voir header.html, mega-menu "Nos marquages"). */
#header .transfert_menu li.ss-menu-wrap {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub {
  position: relative !important;
  display: flex;
  flex-direction: column;
  width: 100%;
  left: 0;
  padding-top: 0 !important;
  padding-bottom: 14px !important;
  padding-left: 0 !important;
  opacity: 1;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.title2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
  color: var(--pmt-color-primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.title2 i {
  font-size: 9px;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li {
  margin: 1px;
  padding-left: 10px;
  font-size: 13px;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li a {
  margin: 0;
  padding: 3px 0;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  transition: color 0.2s ease;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li a:hover {
  color: var(--pmt-color-primary);
}

/* Sous-listes repliables du mega-menu (bascule geree par javascript.js) : les
   familles d'"Articles standards" et, imbriquee dans la premiere, la sous-liste
   "Securite privee". Les selecteurs ciblent les enfants DIRECTS (> li) : sinon
   l'etat ouvert/ferme d'une famille piloterait aussi les items de la sous-liste
   imbriquee, qui ne pourrait plus se replier independamment. */
#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle {
  padding: 0 !important;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.btn-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.btn-toggle:hover {
  color: var(--pmt-color-primary);
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.btn-toggle i {
  font-size: 8px;
  transition: transform 0.2s ease;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.active > li.btn-toggle i {
  transform: rotate(90deg);
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle > li:not(.btn-toggle) {
  display: none;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle.active > li {
  display: flex;
  padding-left: 20px;
}

/* Enveloppe d'une sous-liste imbriquee : elle contient un <ul>, pas du texte,
   et doit rester en bloc pleine largeur une fois la famille ouverte. */
#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle.active > li.ss-menu-wrap {
  display: block;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle.active > li a {
  font-size: 12.5px;
}

#menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub.toggle.active > li.btn-toggle {
  padding-left: 10px;
}

/* Mention "New !" accolee a une entree de menu. Texte vert clignotant, repris
   tel quel du site en production : la regle avait survecu a la migration mais
   son animation s'etait perdue en route, et elle etait devenue une pastille.
   Le nom de classe date du CMS ("exclu") et ne decrit plus ce qu'il porte ; il
   est conserve pour ne pas avoir deux regles pour le meme libelle. */
span.exclu {
  padding: 3px 5px;
  color: var(--pmt-color-brand-green);
  font-size: 14px;
  animation: clignote 1.5s ease-out infinite;
}

@keyframes clignote {
  50% {
    opacity: 0;
  }
}

/* Un clignotement infini est un declencheur vestibulaire : on garde le vert,
   qui suffit a signaler la nouveaute, et on coupe l'animation. */
@media (prefers-reduced-motion: reduce) {
  span.exclu {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   6. Bouton burger
   -------------------------------------------------------------------------- */

.btn-menu {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--pmt-overlay-white-12);
  border: 0;
  border-radius: 8px;
  color: var(--pmt-color-white);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-menu:hover {
  background: var(--pmt-overlay-white-22);
}

/* --------------------------------------------------------------------------
   7. Ouverture des menus au survol (>= 1170px)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1170px) {
  /* Detache l'entree "Nos marquages" pour que son mega-menu se positionne
     par rapport au header et non par rapport a l'element de menu. */
  #menu_haut > ul > li.sub_menu_spe {
    position: static;
  }

  #menu_haut > ul > li:hover .transfert_menu {
    display: flex;
    left: 50%;
    align-items: flex-start;
    justify-content: center;
    /* largeur au contenu : un panneau a largeur fixe laissait de grandes
       marges vides de chaque cote du mega-menu */
    width: max-content;
    max-width: calc(100vw - 40px);
    padding: 24px 22px !important;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 34px var(--pmt-overlay-black-22);
    color: var(--pmt-color-header-ink);
    font-size: 10px;
    transform: translateX(-50%);
  }

  #menu_haut > ul > li:hover > ul {
    top: 100%;
    left: auto;
    opacity: 1;
    box-shadow: 0 16px 34px var(--pmt-overlay-black-22);
  }

  .extend,
  .extend-section {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Tablette / mobile (< 1170px)

   `max-width: 1169.98px` et non `1170px` : le bloc desktop ci-dessus demarre a
   `min-width: 1170px` et `javascript.js` bascule en menu mobile sous `< 1170`.
   Avec `max-width: 1170px` les deux feuilles s'appliquaient a 1170px pile,
   alors que le JS, lui, restait en mode desktop.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1169.98px) {
  :root {
    --header-main-h: 64px;
  }

  #header {
    position: relative;
    z-index: 10000;
  }

  .header-topbar,
  body.scroll_down .header-topbar {
    height: auto;
    opacity: 1;
  }

  .header-topbar__inner {
    flex-wrap: wrap;
    height: auto;
    gap: 7px 10px;
    padding: 7px 16px;
  }

  .header-slogan {
    flex: 1 1 100%;
    order: 1;
  }

  .header-utils {
    order: 3;
  }

  .header-slogan {
    font-size: 11.5px;
    line-height: 1.35;
    white-space: normal;
  }

  body.scroll_down .header-main {
    height: auto;
  }

  #conteneur_header {
    height: auto;
    gap: 10px;
    padding: 9px 16px;
  }

  #header #logo,
  body.scroll_down #header #logo img {
    position: relative;
    left: 0;
    padding-top: 0;
  }

  #header #logo img {
    height: 46px;
  }

  .header-cta {
    margin-left: auto;
  }

  .btn-menu {
    display: flex !important;
  }

  /* La recherche prend la largeur restante sur la 2e ligne de la topbar */
  .header-searchbar {
    flex: 1 1 130px;
    order: 2;
    width: auto;
    min-width: 110px;
  }

  /* Le menu devient un panneau deroulant sous le header */
  .right_logo {
    position: static;
    width: 0;
    padding: 0;
  }

  #position-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--pmt-color-white);
    box-shadow: 0 16px 30px var(--pmt-overlay-black-18);
    text-align: center;
  }

  #header #menu_haut {
    float: none;
    width: 100% !important;
    max-width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 160 !important;
  }

  #menu_haut > ul {
    display: block;
    float: none;
    margin: auto;
    text-align: center;
  }

  #menu_haut > ul > li,
  #menu_haut > ul > li.sub_menu_spe {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--pmt-color-header-border);
  }

  #menu_haut > ul > li > a,
  body.scroll_down #menu_haut > ul > li > a {
    height: auto;
    padding: 14px 46px 14px 18px;
    color: var(--pmt-color-header-ink);
    line-height: 1.3;
    text-align: left;
  }

  #menu_haut > ul > li:first-child > a {
    color: var(--pmt-color-primary);
  }

  #menu_haut > ul > li > a::before {
    display: none;
  }

  #menu_haut ul li a::after {
    display: none;
  }

  #menu_haut .extend {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000000;
    width: 48px;
    height: 48px !important;
    padding: 0;
    border-bottom: 0;
    color: var(--pmt-color-header-icon-muted) !important;
    font-size: 30px !important;
    line-height: 48px !important;
    text-align: center;
  }

  #menu_haut ul li ul {
    display: block;
    top: 0 !important;
    left: 0 !important;
    height: 0;
    padding: 0 !important;
    overflow: hidden;
  }

  #menu_haut ul li.open ul {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto;
    padding-top: 9px;
    padding-bottom: 9px;
    border: none;
    opacity: 1;
  }

  #menu_haut > ul > li .transfert_menu {
    height: 0;
    border-top: 0;
  }

  #menu_haut ul li ul ul {
    display: none !important;
  }

  #menu_haut ul li ul li,
  #menu_haut ul li ul li a {
    background-color: var(--pmt-color-white);
    border: 0;
    color: var(--pmt-color-header-mobile-link) !important;
  }

  /* Pleine largeur et texte centre : propre aux sous-menus simples, dont chaque
     entree est une ligne unique. Dans le mega-menu, le titre de section partage
     sa ligne avec le bouton de repli, qu'un `width: 100%` ferait passer a la
     ligne suivante. */
  #menu_haut > ul > li > ul:not(.transfert_menu) li,
  #menu_haut > ul > li > ul:not(.transfert_menu) li a {
    width: 100% !important;
    text-align: center;
  }

  /* Restreint aux sous-menus simples (`.menu-sub`) : ce rythme de 55px par
     ligne convient a une liste de 4-6 entrees, pas aux ~30 liens du mega-menu
     "Nos marquages", qui sont tous deplies d'un coup ci-dessous. */
  #menu_haut > ul > li > ul:not(.transfert_menu) li a {
    display: block;
    box-sizing: border-box;
    width: 200px;
    height: auto;
    margin-bottom: 0;
    padding: 12px 35px !important;
    background-image: none;
    border-top: 1px solid var(--pmt-color-header-border);
    color: var(--pmt-color-header-mobile-link);
    font-size: 14px;
    line-height: 30px;
    text-align: left;
  }

  #menu_haut ul.menu-sub > li:first-child::after {
    display: none;
  }

  #header ul li .transfert_menu li {
    display: block;
  }

  /* Sections repliables du mega-menu "Nos marquages" (bouton injecte par
     javascript.js) : depliees d'un bloc, ses ~30 liens font plus de 1000px de
     haut. Chaque titre de section porte donc son propre "+", sur le meme
     principe que les entrees de premier niveau. */
  #header ul li ul.sous-menu-sub li.title1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
  }

  #header ul li ul.sous-menu-sub li.title1 a {
    font-size: 14px;
  }

  #menu_haut .transfert_menu .extend-section {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pmt-color-header-icon-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  #menu_haut .transfert_menu .extend-section[aria-expanded="true"] {
    transform: rotate(45deg);
  }

  #menu_haut .transfert_menu .sous-menu-sub > li.ss-menu-wrap {
    display: none;
  }

  #menu_haut .transfert_menu .sous-menu-sub.is-open > li.ss-menu-wrap {
    display: block;
  }

  #menu_haut ul.transfert_menu li .sous-menu-sub,
  #menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub {
    display: block !important;
    height: auto !important;
  }

  /* Le mega-menu n'a pas de repli par section sur mobile : ses ~30 liens sont
     visibles d'un bloc. La hierarchie est donc portee par l'indentation et la
     taille de texte plutot que par du padding vertical, sinon le panneau
     depasse 2000px de haut et la navigation devient impraticable. */
  #menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub {
    padding-bottom: 4px !important;
  }

  #menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li.title2 {
    padding: 6px 0 2px;
    text-align: left;
  }

  #menu_haut ul.transfert_menu li .sous-menu-sub .ss-menu-sub li a {
    display: block;
    padding: 6px 0 6px 16px;
    font-size: 13.5px;
    line-height: 1.35;
    text-align: left;
  }
}

@media screen and (max-width: 560px) {
  #header #logo img {
    height: 40px;
  }

  .header-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
  }
}

@media screen and (max-width: 380px) {
  .header-cta span {
    display: none;
  }

  .header-cta {
    padding: 0 12px;
  }
}

/* --------------------------------------------------------------------------
   9. Modale "Inscription newsletter" (markup present dans les pages, pilote
      par javascript.js) - conservee telle quelle, hors header.
   -------------------------------------------------------------------------- */

.search {
  position: relative;
  z-index: 3;
  display: flex;
  height: 100%;
  color: var(--pmt-color-white);
  font-size: 14px;
  text-align: right;
  vertical-align: middle;
}

.header-search {
  width: 100%;
}

.transition {
  transition: all 300ms ease 0s;
}

.search-form-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000000;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: var(--pmt-overlay-black-93);
}

.search-form-modal.open {
  height: 100%;
}

.search-form_close {
  position: absolute;
  top: 0;
  right: 15px;
  color: var(--pmt-color-white);
  font-size: 20px;
  cursor: pointer;
}

.header_search_form {
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  padding: 0;
}

.header_search_form label {
  display: block;
  font-size: 24px;
  text-align: center;
}

.header_search_form .form-group {
  position: relative;
  width: calc(100% - 63px);
  margin: 0;
  border-radius: 50%;
}

.header_search_form .form-group input {
  height: 31px;
  padding: 0;
  background-color: transparent;
  border: none;
  color: var(--pmt-color-white);
  text-align: right;
}

.header_search_form .form-group input::placeholder {
  color: var(--pmt-overlay-white-67);
}

.header_search_form .form-group input[type="text"] {
  width: 100%;
  height: auto !important;
  padding: 20px 85px 20px 40px !important;
  border: none;
  border-radius: 99px;
  outline: none;
  color: var(--pmt-color-header-search-text);
  font-size: 18px;
  line-height: 25px;
}

.header_search_form .btn_search {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  padding: 0 15px;
  background-color: transparent;
  border: none;
  color: var(--pmt-color-header-search-icon);
  font-size: 25px;
}