/* Header et footer de la refonte (templates Elementor v4 « Header v4 (refonte) » et
   « Footer v4 (refonte) »).
   Rôle : habiller les widgets v3 sans équivalent atomique (menus, recherche, panier),
   la barre d'annonce défilante et la recherche mobile repliable (voir fqs-header.js).
   La mise en page et les couleurs des éléments atomiques restent dans Elementor.
   Sélecteurs limités aux éléments des nouveaux header et footer (.s-fqs-*, .elementor-element-fqs-*) :
   aucun effet sur les anciens tant que la bascule n'est pas faite.
   Les liens des menus sont ciblés avec leurs états (:hover, :focus) : Elementor leur applique
   un padding différent au survol, avec un sélecteur plus spécifique que l'état de repos.
   Couleurs, polices, rayons : variables Elementor v4 --fqs-* uniquement. */

/* ---------- Pictogrammes (même trait 1,8, même boîte 24 × 24) ----------
   Dessins calés sur la même hauteur utile (y 4 à 20) pour un alignement optique, pas
   seulement géométrique : la silhouette et le sac étaient décalés de 1 à 2 px. */
.s-fqs-header {
  --fqs-ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='10.8' r='6.8'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E");
  --fqs-ic-compte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.6'/%3E%3Cpath d='M4.6 20c0-3.8 3.4-6.2 7.4-6.2s7.4 2.4 7.4 6.2'/%3E%3C/svg%3E");
  --fqs-ic-panier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l-1 12.5h-11z'/%3E%3Cpath d='M9 7.5a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}
.s-fqs-header .fqs-ic,
.elementor .s-fqs-header .s-fqs-account::before,
.elementor-element-fqs-cart .elementor-button-icon::before {
  content: ""; flex: 0 0 auto; display: block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--fqs-ic) center / contain no-repeat; mask: var(--fqs-ic) center / contain no-repeat;
}
.s-fqs-header .fqs-ic--search { --fqs-ic: var(--fqs-ic-search); }
.elementor .s-fqs-header .s-fqs-account::before { --fqs-ic: var(--fqs-ic-compte); }
.elementor-element-fqs-cart .elementor-button-icon::before { --fqs-ic: var(--fqs-ic-panier); }

/* ---------- En-tête collant ---------- */
.elementor-location-header:has(.s-fqs-header) { position: sticky; top: 0; z-index: 50; }

.s-fqs-header a:focus-visible,
.s-fqs-header button:focus-visible,
.s-fqs-header [role="button"]:focus-visible { outline: 3px solid var(--fqs-canard); outline-offset: 2px; }

/* ---------- Barre d'annonce : boucle continue ----------
   fqs-header.js regroupe les messages dans un lot (.fqs-annonce-set) et le répète pour
   couvrir toute la largeur du conteneur plus un lot. Chaque lot porte son espacement de fin
   (padding), la piste n'a pas de gap : la piste glisse d'exactement une largeur de lot
   (--fqs-marquee-shift, en px, calculée par le JS), le retour au début est invisible
   quelle que soit la largeur d'écran. */
.s-fqs-annonce-track > *, .fqs-annonce-set > * { white-space: nowrap; }
.fqs-annonce-set { display: flex; flex: 0 0 auto; gap: 3rem; padding-inline-end: 3rem; }
.s-fqs-annonce-in.fqs-marquee .s-fqs-annonce-track {
  gap: 0; padding: 0; width: max-content; flex: 0 0 auto; flex-wrap: nowrap;
  animation: fqs-annonce var(--fqs-annonce-duree, 40s) linear infinite; will-change: transform;
}
.s-fqs-annonce-in.fqs-marquee:hover .s-fqs-annonce-track,
.s-fqs-annonce-in.fqs-marquee:focus-within .s-fqs-annonce-track,
.s-fqs-annonce-in.fqs-marquee.is-paused .s-fqs-annonce-track { animation-play-state: paused; }
@keyframes fqs-annonce { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--fqs-marquee-shift))); } }

/* Zone de défilement : uniquement après le bouton pause (dans le flux, elle prend la place
   restante de la colonne et coupe ce qui en sort), rien de visible à gauche du bouton. Léger
   fondu sur ses deux bords (la couleur du masque ne sert qu'à l'opacité). Sans JS (pas de
   .fqs-marquee), la barre garde sa mise en page de base. */
.s-fqs-annonce-in.fqs-marquee .s-fqs-annonce-view {
  position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fqs-bleu-nuit) 1.25rem, var(--fqs-bleu-nuit) calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--fqs-bleu-nuit) 1.25rem, var(--fqs-bleu-nuit) calc(100% - 2rem), transparent 100%);
}

/* Boutons ajoutés par fqs-header.js : spécificité relevée pour neutraliser le style
   global des boutons du kit Elementor (fond, ombre, typo). */
.s-fqs-header .fqs-annonce-pause, .s-fqs-header .fqs-search-toggle { box-shadow: none; text-transform: none; font-size: inherit; line-height: 1; }
/* Bouton pause : zone tactile de 44 px ; la marge négative lui fait occuper la même hauteur
   qu'avant (40 px, 36 px sous 1025 px) : la barre garde sa hauteur. */
.s-fqs-header .fqs-annonce-pause { flex: 0 0 auto; width: 44px; height: 44px; margin-block: -2px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--fqs-radius-pill); background: transparent; color: var(--fqs-bleu-nuit); cursor: pointer; }
.s-fqs-header .fqs-annonce-pause:hover, .s-fqs-header .fqs-annonce-pause:focus { background: color-mix(in srgb, var(--fqs-bleu-nuit) 8%, transparent); color: var(--fqs-bleu-nuit); }
.fqs-ic-pause { width: .7rem; height: .7rem; border-inline: 3px solid currentColor; }
.is-paused .fqs-ic-pause { width: 0; height: 0; border-inline-end: 0; border-inline-start: .65rem solid currentColor; border-block: .42rem solid transparent; margin-inline-start: .15rem; }

/* ---------- Menu des univers (desktop, horizontal) ---------- */
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item,
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus {
  position: relative; padding: .75rem .9rem; line-height: 1.2;
  font-family: var(--fqs-titre); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em;
}
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { color: var(--fqs-bleu-nuit); transition: color .2s ease-out; }
/* Soulignement fin qui se déploie (transform seul : aucun décalage de mise en page) */
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::before {
  content: ""; position: absolute; inset-inline: .9rem; bottom: .45rem; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease-out;
}
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible { color: var(--fqs-orange-fonce); }
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover::before,
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible::before { transform: scaleX(1); }
/* Rubrique courante : trait orange plus épais, toujours visible, texte bleu nuit */
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.elementor-item-active::before {
  transform: scaleX(1); height: 3px; background: var(--fqs-orange);
}
/* À propos et Contact : dans le tiroir mobile seulement (Elementor met les <li> en flex) */
.elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li.menu-extra { display: none; }

/* Lien externe (Le magazine) : pictogramme de sortie. Elementor réutilise le ::after des liens
   de menu pour ses effets de survol et le masque (opacity: 0) avec une chaîne de cinq :not()
   plus spécifique que tout sélecteur raisonnable : !important limité à ces trois propriétés. */
.s-fqs-header .elementor-nav-menu > li.menu-externe > a.elementor-item::after,
.s-fqs-footer .elementor-nav-menu > li.menu-externe > a.elementor-item::after {
  content: ""; display: inline-block !important; position: static !important; inset: auto; opacity: 1 !important; transform: none; vertical-align: .05em; width: .8em; height: .8em; margin-inline-start: .35em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5 10 14'/%3E%3Cpath d='M18 14v5H5V6h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5 10 14'/%3E%3Cpath d='M18 14v5H5V6h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Menu mobile (tiroir) ---------- */
.s-fqs-header-top > .elementor-element-fqs-menu-burger { flex: 0 0 44px; margin-inline-end: 4px; }
/* Le logo ne rétrécit jamais, quelle que soit la place laissée par les autres éléments */
.s-fqs-header-top > .e-image-link-base { flex: 0 0 auto; }
/* Écran de moins de 360 px (320 px) : marges + menu + logo + trois boutons de 44 px faisaient
   361 px, page plus large que l'écran sur tout le site. Logo à taille fixe réduite (92 px au
   lieu de 131), espacements de 4 px ; les boutons gardent leur zone tactile de 44 px. */
@media (max-width: 359px) {
  .s-fqs-header-top { column-gap: 4px; }
  .s-fqs-header-top > .elementor-element-fqs-menu-burger { margin-inline-end: 0; }
  .s-fqs-header-top > .e-image-link-base, .s-fqs-header-top > .e-image-link-base img { width: 92px; height: auto; }
}
.elementor-element-fqs-menu-burger .elementor-menu-toggle {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--fqs-radius-pill);
  background: transparent; color: var(--fqs-bleu-nuit); font-size: 26px;
}
.elementor-element-fqs-menu-burger .elementor-menu-toggle svg { fill: currentColor; }
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown { background: var(--fqs-blanc); border-block-start: 1px solid var(--fqs-bordure); }
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item,
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:hover,
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:focus {
  min-height: 44px; padding: .55rem clamp(1rem, 4vw, 3rem); line-height: 1.2;
  font-family: var(--fqs-titre); font-weight: 700; font-size: 1.15rem;
}
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item { color: var(--fqs-bleu-nuit); background: transparent; transition: color .2s ease-out, background-color .2s ease-out; }
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:hover,
.elementor-element-fqs-menu-burger .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item.elementor-item-active { background: var(--fqs-fond-doux); color: var(--fqs-orange-fonce); }

/* ---------- Recherche (pilule, bouton intégré) ---------- */
/* Identifiants sans tiret : Elementor Pro découpe e_search_props (« id-post ») au tiret,
   un tiret dans l'identifiant du widget fait répondre la recherche en 404. */
.s-fqs-header-top > .elementor-element-fqssearch { margin-inline: auto; }
.s-fqs-header .elementor-widget-search .e-search-form {
  display: flex; align-items: stretch; background: var(--fqs-fond-doux);
  border: 2px solid var(--fqs-bleu-nuit); border-radius: var(--fqs-radius-pill); overflow: hidden;
  transition: box-shadow .15s ease-out;
}
/* Focus : sur toute la pilule (halo doux), plutôt qu'un contour sur le seul champ */
.s-fqs-header .elementor-widget-search .e-search-form:focus-within {
  border-color: var(--fqs-bleu-nuit);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fqs-bleu-nuit) 15%, transparent);
}
.s-fqs-header .elementor-widget-search .e-search-input-wrapper { flex: 1; min-width: 0; }
.s-fqs-header .elementor-widget-search .e-search-input {
  width: 100%; min-height: 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: .6rem 1.1rem; font-family: var(--fqs-texte); font-size: 1rem; color: var(--fqs-bleu-nuit);
}
.s-fqs-header .elementor-widget-search .e-search-input:focus,
.s-fqs-header .elementor-widget-search .e-search-input:focus-visible { outline: none; box-shadow: none; }
.s-fqs-header .elementor-widget-search .e-search-input::placeholder { color: var(--fqs-bordure); }
.s-fqs-header .elementor-widget-search .e-search-submit {
  min-height: 44px; margin: 0; padding: 0 1.25rem; border: 0; border-radius: 0; box-shadow: none;
  background: var(--fqs-bleu-nuit); color: var(--fqs-blanc); font-family: var(--fqs-texte); font-weight: 600; font-size: .95rem; text-transform: none; letter-spacing: 0;
  transition: background-color .15s ease-out;
}
.s-fqs-header .elementor-widget-search .e-search-submit:hover { background: var(--fqs-canard); }
/* Bouton atteint au clavier : contour blanc à l'intérieur de la pilule */
.s-fqs-header .elementor-widget-search .e-search-submit:focus-visible { outline: 2px solid var(--fqs-blanc); outline-offset: -6px; }

/* ---------- Mon compte et panier : pictogramme + libellé (desktop), pictogramme seul (mobile) ---------- */
.elementor .s-fqs-header .s-fqs-account { display: inline-flex; align-items: center; gap: .45rem; }
.elementor-element-fqs-cart {
  --toggle-button-text-color: var(--fqs-bleu-nuit); --toggle-button-icon-color: var(--fqs-bleu-nuit);
  --toggle-button-background-color: transparent; --toggle-button-border-width: 0; --toggle-button-border-radius: var(--fqs-radius-pill);
  --toggle-button-hover-text-color: var(--fqs-orange-fonce); --toggle-button-icon-hover-color: var(--fqs-orange-fonce);
  --toggle-button-hover-background-color: transparent; --toggle-icon-padding: 0;
  --items-indicator-text-color: var(--fqs-bleu-nuit); --items-indicator-background-color: var(--fqs-orange);
}
.elementor-element-fqs-cart .elementor-menu-cart__toggle_button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; box-shadow: none;
  text-transform: none; letter-spacing: 0;
}
.elementor-element-fqs-cart .elementor-menu-cart__toggle_button .elementor-button-text { display: none; }
.elementor-element-fqs-cart .elementor-button-icon { position: relative; display: inline-flex; align-items: center; gap: .45rem; }
.elementor-element-fqs-cart .elementor-button-icon svg { display: none; }
/* Pastille : hors du flux, posée sur le coin du pictogramme. Sélecteur aligné sur celui
   d'Elementor (qui la positionne aussi à droite, ce qui l'étirait sur le libellé). */
.elementor-element-fqs-cart.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
  position: absolute; top: -7px; left: 14px; right: auto; inset-inline-end: auto; width: auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--fqs-radius-pill);
  display: grid; place-items: center; font-family: var(--fqs-texte); font-size: .7rem; font-weight: 700; line-height: 1;
}
@media (min-width: 1025px) {
  /* Libellé « Panier » : le texte réservé aux lecteurs d'écran devient visible */
  .elementor-element-fqs-cart .elementor-button-icon .elementor-screen-only {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: nowrap;
    font-family: var(--fqs-texte); font-weight: 600; font-size: .95rem; color: currentColor;
  }
}

/* ---------- Bureau étroit (1025 à 1279 px) ----------
   Mesuré de 1024 à 1440 px (staging/test-entete.mjs) : jusqu'à 1088 px (1104 avec une barre de
   défilement), logo + recherche (560 px fixes) + compte + panier dépassaient l'écran, et le menu
   (1048 px) passait sur deux lignes ou touchait les bords. Ici, la recherche se réduit (16rem au
   moins) et le menu se resserre (1,05rem, 0,6rem de chaque côté : environ 900 px). Libellés
   inchangés ; au-delà de 1280 px, rien ne change. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .s-fqs-header-top > .elementor-element-fqssearch { flex: 0 1 560px; width: auto; min-width: 16rem; }
  .s-fqs-header-top > .elementor-element-fqssearch .e-search,
  .s-fqs-header-top > .elementor-element-fqssearch .e-search-form { width: 100%; }
  .elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item,
  .elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
  .elementor-element-fqs-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus { padding-inline: .6rem; font-size: 1.05rem; }
}

/* ---------- Mobile et tablette (≤ 1024 px, palier « tablette » d'Elementor) ---------- */
.fqs-search-toggle { display: none; }
@media (max-width: 1024px) {
  /* Trois cases identiques de 44 × 44, pictogramme centré */
  /* flex et non grid : le libellé masqué (font-size 0) ne doit pas occuper de rangée */
  .elementor .s-fqs-header .s-fqs-account { width: 44px; height: 44px; padding: 0; font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; gap: 0; }
  .elementor-element-fqs-cart .elementor-menu-cart__toggle_button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
  .s-fqs-header .fqs-search-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--fqs-radius-pill); background: transparent; color: var(--fqs-bleu-nuit); cursor: pointer; }
  .s-fqs-header .fqs-search-toggle:hover, .s-fqs-header .fqs-search-toggle:focus { background: color-mix(in srgb, var(--fqs-bleu-nuit) 8%, transparent); color: var(--fqs-bleu-nuit); }
  html.fqs-js .elementor .s-fqs-header .s-fqs-search-mobile { display: none; }
  html.fqs-js .elementor .s-fqs-header.is-search-open .s-fqs-search-mobile { display: flex; }
  .s-fqs-annonce-in .fqs-annonce-pause { margin-block: -4px; }
}

/* ---------- Footer : menus WordPress en colonnes ----------
   Survol : couleur + soulignement en transition, sans padding, marge ni transform. */
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item,
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus {
  display: block; padding: .6rem 0; margin: 0; transform: none;
  font-family: var(--fqs-texte); font-weight: 400; font-size: 1rem; line-height: 1.35;
}
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
  color: var(--fqs-blanc);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--fqs-blanc) 0%, transparent);
  transition: color .2s ease-out, text-decoration-color .2s ease-out;
}
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible { color: var(--fqs-orange); text-decoration-color: currentColor; }
.s-fqs-footer .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.elementor-item-active { color: var(--fqs-orange); }
.s-fqs-footer a:focus-visible { outline: 3px solid var(--fqs-orange); outline-offset: 2px; }

/* ---------- Mini-panier (panneau latéral du widget Panier) ----------
   Variables du widget Elementor Pro d'abord (couleurs, rayons, espacements), puis règles
   ciblées pour le reste (polices, casse, croix). Composants de la refonte : titre bleu nuit,
   prix canard, bouton principal pilule orange, secondaire pilule bordée. */
.elementor-element-fqs-cart {
  --cart-background-color: var(--fqs-blanc);
  --cart-border-style: none;
  --cart-padding: 1.5rem 1.25rem;
  --cart-close-icon-size: 22px;
  --cart-close-button-color: var(--fqs-bleu-nuit);
  --cart-close-button-hover-color: var(--fqs-bleu-nuit);
  --remove-item-button-color: var(--fqs-bleu-nuit);
  --remove-item-button-hover-color: var(--fqs-orange-fonce);
  --remove-item-button-size: 26px;
  --product-price-color: var(--fqs-canard);
  --product-variations-color: var(--fqs-bleu-nuit);
  --divider-color: color-mix(in srgb, var(--fqs-bordure) 40%, transparent);
  --divider-style: solid;
  --divider-width: 1px;
  --subtotal-divider-color: color-mix(in srgb, var(--fqs-bordure) 40%, transparent);
  --menu-cart-subtotal-color: var(--fqs-bleu-nuit);
  --cart-footer-buttons-border-radius: var(--fqs-radius-pill);
  --space-between-buttons: .6rem;
  --view-cart-button-text-color: var(--fqs-bleu-nuit);
  --view-cart-button-background-color: var(--fqs-blanc);
  --view-cart-button-hover-text-color: var(--fqs-blanc);
  --view-cart-button-hover-background-color: var(--fqs-bleu-nuit);
  --checkout-button-text-color: var(--fqs-bleu-nuit);
  --checkout-button-background-color: var(--fqs-orange);
  --checkout-button-hover-text-color: var(--fqs-blanc);
  --checkout-button-hover-background-color: var(--fqs-bleu-nuit);
  --empty-message-color: var(--fqs-bleu-nuit);
  --empty-message-alignment: center;
}
.elementor-element-fqs-cart .elementor-menu-cart__main { font-family: var(--fqs-texte); color: var(--fqs-bleu-nuit); box-shadow: -8px 0 32px color-mix(in srgb, var(--fqs-bleu-nuit) 18%, transparent); }
.elementor-element-fqs-cart .elementor-menu-cart__product-image img { border-radius: var(--fqs-radius-sm); background: var(--fqs-fond-doux); }
.elementor-element-fqs-cart .elementor-menu-cart__product-name,
.elementor-element-fqs-cart .elementor-menu-cart__product-name a {
  font-family: var(--fqs-texte); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--fqs-bleu-nuit); text-decoration: none;
}
.elementor-element-fqs-cart .elementor-menu-cart__product-name a:hover { color: var(--fqs-orange-fonce); text-decoration: underline; text-underline-offset: .2em; }
.elementor-element-fqs-cart .elementor-menu-cart__product-price { font-family: var(--fqs-texte); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .95rem; }
.elementor-element-fqs-cart .elementor-menu-cart__product-price .product-quantity { color: var(--fqs-bleu-nuit); font-weight: 400; }
/* Retrait : croix fine dans un cercle bordé, au lieu du cercle gris */
.elementor-element-fqs-cart .elementor-menu-cart__product-remove { border-width: 2px; border-color: var(--fqs-bordure); }
.elementor-element-fqs-cart .elementor-menu-cart__product-remove:hover { border-color: var(--fqs-orange-fonce); }
.elementor-element-fqs-cart .elementor-menu-cart__product-remove > a:focus-visible { outline: 3px solid var(--fqs-canard); outline-offset: 3px; border-radius: 50%; }
/* Livres d'un pack (WPC, lignes woosb-cart-child) : comme sur la page Panier, pas de suppression
   (le rond restait affiché sans lien, il ne faisait rien), « Inclus dans le pack » au lieu du prix
   (texte posé par inc/tunnel.php), léger retrait sous la ligne du pack. Seul le pack garde sa croix,
   qui retire le pack et ses livres. */
.elementor-element-fqs-cart .elementor-menu-cart__product.woosb-cart-child .elementor-menu-cart__product-remove { display: none; }
/* Hauteur de la liste : Elementor la plafonne à 100vh − 250px, sans compter l'en-tête du thème ;
   à 320 × 640 px avec un pack, le pied (sous-total, boutons) sortait de l'écran. La liste prend
   la place restante entre l'en-tête et le pied et défile seule : le pied reste visible. */
.elementor-element-fqs-cart .elementor-menu-cart__main .widget_shopping_cart_content { flex: 1 1 auto; min-height: 0; height: auto; }
.elementor-element-fqs-cart .elementor-menu-cart__main .elementor-menu-cart__products { flex: 0 1 auto; min-height: 0; max-height: none; }
.elementor-element-fqs-cart .elementor-menu-cart__product.woosb-cart-child { padding-inline-start: 1.25rem; }
.elementor-element-fqs-cart .elementor-menu-cart__product-price .fqs-inclus-pack { font-family: var(--fqs-texte); font-size: .9rem; font-weight: 600; color: var(--fqs-canard); }
/* Fermeture : zone de 44 px */
/* En-tête du tiroir sur une ligne : titre « Votre panier » (le widget n'en a pas : pseudo-élément
   du panneau, premier élément de sa colonne flex), bouton de fermeture à droite, centré sur la
   même ligne de 44 px, trait fin dessous. Le contenu reste dans le flux sous l'en-tête ; seule la
   liste des articles défile (Elementor), l'en-tête reste visible. */
.elementor-element-fqs-cart .elementor-menu-cart__main::before {
  content: "Votre panier"; display: flex; align-items: center; flex: 0 0 auto; box-sizing: content-box; min-height: 44px;
  margin: 0 0 1rem; padding: 0 3.25rem .75rem 0; border-bottom: 1px solid var(--fqs-bordure);
  font-family: var(--fqs-titre); font-weight: 700; font-size: 1.5rem; line-height: 1.05; color: var(--fqs-bleu-nuit);
}
/* Bouton de fermeture : zone de 44 × 44 px posée dans l'angle intérieur (marges du tiroir,
   --cart-padding : 1.5rem 1.25rem), hors du flux (il était rétréci à 29 px de haut à 320 px) ;
   croix fine de 24 px de trait (environ 17 px d'encombrement), 2 px d'épaisseur, bleu nuit, y
   compris au survol (fond doux seulement). */
.elementor-element-fqs-cart .elementor-menu-cart__close-button {
  position: absolute; top: 1.5rem; inset-inline-end: 1.25rem; z-index: 1; flex: none; width: 44px; height: 44px; margin: 0;
  border-radius: 50%; transition: background-color .15s ease-out;
}
.elementor-element-fqs-cart .elementor-menu-cart__close-button::before,
.elementor-element-fqs-cart .elementor-menu-cart__close-button::after { left: 10px; width: 24px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--fqs-bleu-nuit); transition: none; }
.elementor-element-fqs-cart .elementor-menu-cart__close-button:hover { background: var(--fqs-fond-doux); }
.elementor-element-fqs-cart .elementor-menu-cart__close-button:hover::before,
.elementor-element-fqs-cart .elementor-menu-cart__close-button:hover::after { background: var(--fqs-bleu-nuit); }
.elementor-element-fqs-cart .elementor-menu-cart__close-button:focus-visible { outline: 3px solid var(--fqs-canard); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .elementor-element-fqs-cart .elementor-menu-cart__close-button { transition: none; } }
.elementor-element-fqs-cart .elementor-menu-cart__subtotal { font-family: var(--fqs-texte); font-weight: 600; font-size: 1.05rem; }
.elementor-element-fqs-cart .elementor-menu-cart__subtotal strong { font-weight: 700; } /* Elementor : 900, graisse absente de Spectral. */
.elementor-element-fqs-cart .elementor-menu-cart__subtotal .amount { font-family: var(--fqs-texte); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--fqs-canard); }
/* Boutons (spécificité au-dessus du kit Elementor et de .elementor-button) */
.elementor-element-fqs-cart .elementor-menu-cart__footer-buttons .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.2rem;
  font-family: var(--fqs-texte); font-weight: 600; font-size: 1rem; line-height: 1.1; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.elementor-element-fqs-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart { border: 2px solid var(--fqs-bleu-nuit); }
.elementor-element-fqs-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout { border: 2px solid var(--fqs-orange); }
.elementor-element-fqs-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { border-color: var(--fqs-bleu-nuit); }
.elementor-element-fqs-cart .elementor-menu-cart__footer-buttons .elementor-button:focus-visible { outline: 3px solid var(--fqs-canard); outline-offset: 2px; }
/* Panier vide : message, puis lien vers la boutique (ajouté par fqs-header.js) */
.elementor-element-fqs-cart .elementor-menu-cart__main .woocommerce-mini-cart__empty-message { padding: 2rem 0 1rem; font-family: var(--fqs-texte); font-size: 1.1rem; line-height: 1.5; text-align: center; }
.elementor-element-fqs-cart .fqs-minicart-vide {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 auto; padding: .7rem 1.4rem; width: max-content;
  border-radius: var(--fqs-radius-pill); background: var(--fqs-orange); color: var(--fqs-bleu-nuit);
  font-family: var(--fqs-texte); font-weight: 600; font-size: 1rem; text-decoration: none;
}
.elementor-element-fqs-cart .fqs-minicart-vide:hover { background: var(--fqs-bleu-nuit); color: var(--fqs-blanc); }
.elementor-element-fqs-cart .fqs-minicart-vide:focus-visible { outline: 3px solid var(--fqs-canard); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .s-fqs-header *, .s-fqs-header *::before, .s-fqs-footer * { transition: none !important; }
}