/*
Theme Name: MasterPro
Theme URI: https://masterpro-formation.fr
Description: Theme enfant de Twenty Twenty-Five. Palette encre et laiton, Newsreader et IBM Plex auto-hebergees.
Author: Maitrise et Pilotage de Projets
Template: twentytwentyfive
Version: 1.0
Text Domain: masterpro
*/

/* Ce que theme.json ne couvre pas. Tout le reste y est declare. */


/* Mesure de lecture. Les sections font 1200 px de large : un paragraphe qui occupe
   seul cette largeur depasse 120 caracteres par ligne, ce que l'oeil ne suit plus.
   La limite ne s'applique qu'aux blocs de texte places directement dans une section ;
   les colonnes et les grilles, deja etroites, ne sont pas touchees. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-group > p {
  max-width: 78ch;
  margin-inline: 0;   /* le layout « constrained » recentre tout enfant limite en largeur */
}

/* En-tete collant. Le fond est deja opaque ; le filet n apparait qu une fois
   la page entamee, pour ne pas souligner l en-tete au repos. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .25s ease;
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
header.mpf-entete-defile { box-shadow: 0 1px 0 var(--wp--preset--color--trait), 0 6px 18px rgba(22,35,61,.06); }
/* Escamotage. La barre remonte hors champ sans laisser de blanc : c est une
   translation, pas un masquage, donc aucune reflow. Le clavier la fait revenir. */
header.mpf-entete-cachee { transform: translateY(-100%); opacity: 0; pointer-events: none; }
header.wp-block-template-part { transition: transform .32s ease, opacity .32s ease, box-shadow .25s ease; }
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part { transition: none; }
  header.mpf-entete-cachee { transform: none; opacity: 1; pointer-events: auto; }
}

/* Bandeau : recadre sur les personnages, plus haut que large serait inutile.
   L echelle 1.08 laisse au parallaxe de quoi glisser sans decouvrir de vide. */
.mpf-bandeau { margin: 0 0 -14px; overflow: hidden; }
.mpf-bandeau img {
  width: 100%;
  aspect-ratio: 24 / 9;
  object-fit: cover;
  object-position: center 42%;   /* plus haut : le cadrage coupait les cheveux a gauche */
  display: block;
  will-change: transform;
}

/* Le layout « constrained » de WordPress recentre tout enfant dont la largeur est
   limitee. Dans le hero, tout doit rester cale sur la verticale du titre : la
   declaration generee par le coeur gagne sur la specificite, d ou le !important. */
.mpf-hero > *,
.mpf-hero > .wp-block-group,
.mpf-hero > p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Les deux boutons du hero : cales a droite, largeur identique. */
.mpf-hero .wp-block-buttons { justify-content: flex-end; }
.mpf-hero .wp-block-button { min-width: 240px; }
.mpf-hero .wp-block-button__link { width: 100%; text-align: center; }

/* Marque : le logo donne la hauteur, le nom et le slogan tiennent dedans.
   Sans la reduction d interligne et de l interlettrage, le bloc de texte
   depasse le cadre du logo en haut et en bas. */
.mpf-marque { align-items: center; }
.mpf-marque .wp-block-group { display: block; }

/* Ligne de mention, centree et tenue sur une seule ligne : en chasse fixe elle
   frole la largeur disponible, et l interlettrage suffit a la faire basculer. */
.mpf-copyright {
  text-align: center;
  max-width: none !important;
  white-space: nowrap;
  overflow-x: auto;
}
@media (max-width: 900px) { .mpf-copyright { white-space: normal; } }

/* Logo du pied de page, au-dessus du nom. */
.mpf-logo-pied { display: block; width: 76px; height: 76px; margin-bottom: 16px; }
@media (max-width: 782px) { .mpf-logo-pied { width: 60px; height: 60px; } }
.mpf-marque .wp-block-site-logo img { display: block; }
.mpf-marque .wp-block-site-title { line-height: 1.08; margin: 0; }
.wp-block-site-tagline {
  margin-top: 1px;
  letter-spacing: 0.015em;   /* 51 caracteres en chasse fixe : l interlettrage coute cher */
  word-spacing: -.05em;
  line-height: 1.2;
}
@media (max-width: 782px) {
  .mpf-marque .wp-block-site-logo img { width: 46px; }
  .wp-block-site-tagline { letter-spacing: 0.02em; }
}

/* Icones de reseaux, colonne « Contact » du pied de page. Le fond y est encre :
   le contour et l icone sont clairs, et le survol inverse le rapport. */
.mpf-reseaux { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.mpf-reseaux a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--wp--preset--color--papier);
  border: 1px solid rgba(237, 239, 242, .35);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mpf-reseaux a:hover {
  background: var(--wp--preset--color--papier);
  color: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--papier);
}
.mpf-reseaux a:focus-visible { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 2px; }
.mpf-reseaux svg { width: 18px; height: 18px; }
@media (max-width: 782px) { .mpf-reseaux { gap: 10px; margin-top: 14px; } }

/* Icones des boutons du hero : posees en masque, elles heritent donc de la
   couleur du texte et suivent l etat survole sans seconde image. */
.mpf-hero .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .55em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--mpf-icone) center / contain no-repeat;
          mask: var(--mpf-icone) center / contain no-repeat;
}
.mpf-hero .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
  --mpf-icone: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E");
}
.mpf-hero .wp-block-buttons > .wp-block-button:last-child .wp-block-button__link {
  --mpf-icone: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

/* Hauteur du hero. La section occupe l ecran moins l en-tete, et laisse
   deliberement depasser une amorce du bandeau : une section qui s arrete pile
   en bas d ecran fait croire que la page s arrete la. */
.mpf-hero {
  min-height: calc(100svh - 20rem);   /* le bandeau doit depasser en bas d ecran */
  padding-bottom: 2.5rem !important;  /* le bloc porte 3.5rem en style inline */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* le titre demarre haut ; l espace restant tombe en bas */
}

/* Domaines couverts, dans le hero.
   Liste repliable plutot que grille a colonnes fixes : les libelles n ont pas
   la meme longueur, des colonnes egales laisseraient des trous. Avec le repli,
   chaque domaine ajoute se place de lui-meme, et la ligne en occupe deux au plus
   tant que les libelles restent courts. */
.mpf-hero > .mpf-domaines,
.mpf-domaines {
  max-width: none !important;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.6;
  border-top: 3px solid var(--wp--preset--color--laiton);
  border-bottom: 1px solid var(--wp--preset--color--laiton);
  padding: 12px 0;
  margin-top: 1.6rem;
}
.mpf-domaines-titre {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: var(--wp--preset--font-size--normal);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  white-space: nowrap;
}
.mpf-domaines ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mpf-domaines li { margin: 0; }
/* le separateur appartient a l element qui suit : il disparait donc en fin de ligne */
.mpf-domaines li + li::before {
  content: "|";
  color: var(--wp--preset--color--trait);
  margin-right: 14px;
}
.mpf-domaines .mpf-ouvert a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
  font-weight: 500;
}
.mpf-domaines .mpf-ouvert a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mpf-domaines .mpf-attente { color: var(--wp--preset--color--encre-doux); }
.mpf-domaines .mpf-mention {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
@media (max-width: 782px) {
  .mpf-domaines { gap: 6px 12px; }
  .mpf-domaines-titre { width: 100%; }
  .mpf-domaines li + li::before { margin-right: 10px; }
}

/* Apparition au defilement : le bloc monte et se revele. La direction est la
   meme que le parallaxe du hero, pour que les deux effets se repondent. */
.mpf-apparait {
  opacity: 0;
  transform: translate3d(0, 58px, 0);   /* assez pour se voir, sans donner l impression d un saut */
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.1s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.mpf-apparait.mpf-vu { opacity: 1; transform: none; }
.mpf-apparait.mpf-vu + .mpf-apparait.mpf-vu { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  .mpf-apparait { opacity: 1; transform: none; transition: none; }
}

/* Cartes produits de l accueil ([mpf_produits]) : deux par ligne, une seule
   sous 782 px. Carte verticale : image entiere dans un cadre de hauteur fixe,
   texte borne a quatre lignes, prix et bouton cales en bas pour que deux
   cartes voisines s alignent quelle que soit la longueur de leur texte. */
/* La transition doit porter les quatre proprietes : declaree seule, celle du
   survol effacait celle de l apparition, et la carte surgissait sans glisser. */
.mpf-domaine {
  transition: box-shadow .2s ease, border-color .2s ease,
              opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.mpf-domaine:hover { box-shadow: 0 6px 24px rgba(22, 35, 61, .07); }
.mpf-domaine h3 { margin-top: 0; }
.mpf-domaine h3 a { color: var(--wp--preset--color--encre); text-decoration: none; }
.mpf-domaine h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mpf-domaine-prix { color: var(--wp--preset--color--encre); font-weight: 500; }
.mpf-domaine-prix span { color: var(--wp--preset--color--encre-doux); font-size: .8em; }

.mpf-cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.mpf-cartes > .mpf-domaine {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mpf-cartes > .mpf-domaine[hidden] { display: none; }
.mpf-cartes .mpf-domaine > * { margin-block-start: 0; }   /* l ecart de la mise en page en flux s ajoutait aux marges */
.mpf-cartes .mpf-domaine-image { margin: 0 0 18px; }
.mpf-cartes .mpf-domaine-image a { display: block; }       /* WordPress le pose en inline-block : l image se reduisait a sa hauteur */
/* Le visuel carre garde sa taille, centre : etire dans un cadre large, son
   propre fond ne se raccordait pas a celui du cadre. */
.mpf-cartes .mpf-domaine-image img {
  width: auto;
  max-width: 100%;
  height: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 auto;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 10px;
  display: block;
}
.mpf-cartes .mpf-domaine { padding: 20px !important; }        /* le bloc porte 24 px en ligne */
.mpf-cartes .mpf-domaine h3 { font-size: 22px !important; margin-bottom: 4px !important; }   /* 28 px en ligne */
.mpf-carte-sous-titre {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 14px;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-cartes .mpf-carte-texte { font-size: 15px !important; margin-bottom: 14px !important; }
.mpf-cartes .mpf-domaine-prix { font-size: 17px !important; }
.mpf-cartes .mpf-partage-titre { display: none; }                /* trois cartes : place comptee */
.mpf-cartes .mpf-domaine-actions { gap: 12px; }
.mpf-cartes .wp-block-button__link { padding: 10px 18px !important; font-size: 15px !important; }
.mpf-carte-texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* Prix et boutons cales en bas : deux classes, sinon la remise a zero des marges
   (.mpf-cartes .mpf-domaine > *) annule la marge automatique. */
.mpf-cartes .mpf-carte-pied { margin-top: auto; }
/* Vitrine : pastille « Nouveau » / « Offre spéciale » sur l image, ancien prix
   barre, lien vers la boutique au bout des puces. */
.mpf-cartes .mpf-domaine-image a { position: relative; }
.mpf-carte-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--wp--preset--color--encre);
  color: #fff;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mpf-carte-badge-promo { background: var(--wp--preset--color--laiton-fonce); }
.mpf-domaine-prix del { color: var(--wp--preset--color--encre-doux); font-size: .85em; margin-right: 4px; }

/* Vitrine de l accueil en deux colonnes, comme la boutique : puces a gauche
   (colonne collante .mpf-filtres-colonne), cartes en bandeau a droite. */
.mpf-vitrine {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  column-gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
.mpf-vitrine .mpf-filtres-colonne .mpf-filtres button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 10px 14px;
}
.mpf-filtre-boutique {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--laiton);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--wp--preset--color--laiton-fonce) !important;   /* les liens du contenu sont soulignes en laiton */
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.mpf-filtre-boutique:hover { background: var(--wp--preset--color--laiton); color: #fff !important; }
.mpf-vitrine .mpf-cartes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mpf-vitrine > .mpf-filtres-colonne { grid-row: 1 / span 2; align-self: start; }
.mpf-vitrine > .mpf-cartes, .mpf-vitrine > .mpf-vitrine-suite { grid-column: 2; }
.mpf-vitrine-suite { display: flex; justify-content: center; margin-top: 24px; }
.mpf-voir-plus {
  padding: 10px 22px;
  border: 1px solid var(--wp--preset--color--encre);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--encre);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mpf-voir-plus:hover { background: var(--wp--preset--color--encre); color: #fff; }
.mpf-voir-plus[hidden], .mpf-voir-boutique[hidden] { display: none; }
.mpf-voir-boutique {
  padding: 10px 22px;
  border: 1px solid var(--wp--preset--color--laiton);
  border-radius: 999px;
  font-size: 15px;
  color: var(--wp--preset--color--laiton-fonce) !important;
  text-decoration: none !important;
}
.mpf-voir-boutique:hover { background: var(--wp--preset--color--laiton); color: #fff !important; }
/* Pagination de la boutique (bloc natif) : puces du meme dessin que les filtres,
   calee a droite sous les bandeaux ; sur telephone, precedent / page / suivant. */
.wp-block-woocommerce-product-collection .wp-block-query-pagination { justify-content: flex-end; gap: 8px; margin-top: 28px; }
.wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > .wp-block-query-pagination { margin-block-start: 28px; }   /* la remise a zero des blocs de la grille l annulait */
.wp-block-woocommerce-product-collection .wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers,
.wp-block-woocommerce-product-collection .wp-block-query-pagination-next,
.wp-block-woocommerce-product-collection .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  justify-content: center;
  padding: 9px 16px;
  margin: 0;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 999px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre) !important;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none !important;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--encre); }
.wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--encre); border-color: var(--wp--preset--color--encre); color: #fff !important; }
.wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers.dots { border: 0; background: none; min-width: 0; padding: 9px 4px; }
.wp-block-woocommerce-product-collection .wp-block-query-pagination-next::after { content: " →"; white-space: pre; }
.wp-block-woocommerce-product-collection .wp-block-query-pagination-previous::before { content: "← "; white-space: pre; }
@media (max-width: 600px) {
  .wp-block-woocommerce-product-collection .wp-block-query-pagination { justify-content: space-between; width: 100%; }
  .wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers:not(.current) { display: none; }
}
.mpf-vitrine .mpf-cartes > .mpf-domaine {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 24px;
  align-items: start;
  padding: 18px !important;
}
.mpf-vitrine .mpf-cartes > .mpf-domaine[hidden] { display: none; }
.mpf-vitrine .mpf-domaine > .mpf-domaine-image { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.mpf-vitrine .mpf-cartes .mpf-domaine-image img { width: 144px; height: 144px; }
.mpf-vitrine .mpf-domaine > h3,
.mpf-vitrine .mpf-domaine > .mpf-carte-sous-titre,
.mpf-vitrine .mpf-domaine > .mpf-carte-texte { grid-column: 2; }
.mpf-vitrine .mpf-cartes .mpf-domaine h3 { font-size: 20px !important; margin: 2px 0 6px !important; }
.mpf-vitrine .mpf-carte-sous-titre { margin-bottom: 8px; }
.mpf-vitrine .mpf-cartes .mpf-carte-texte { margin-bottom: 0 !important; -webkit-line-clamp: 3; line-clamp: 3; }
.mpf-vitrine .mpf-cartes .mpf-carte-pied {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.mpf-vitrine .mpf-domaine-prix { margin: 4px 0 0 !important; text-align: right; }
.mpf-vitrine .mpf-domaine-actions { flex-direction: row-reverse; }
.mpf-vitrine .mpf-carte-badge { top: 6px; left: 6px; padding: 3px 7px; font-size: 10px; }
@media (max-width: 1024px) {
  .mpf-vitrine .mpf-cartes > .mpf-domaine { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto; column-gap: 18px; }
  .mpf-vitrine .mpf-domaine > .mpf-domaine-image { grid-row: 1 / span 4; }
  .mpf-vitrine .mpf-cartes .mpf-domaine-image img { width: 120px; height: 120px; }
  .mpf-vitrine .mpf-cartes .mpf-carte-pied { grid-column: 2; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 12px; }
  .mpf-vitrine .mpf-domaine-prix { margin: 0 !important; text-align: left; }
}
@media (max-width: 782px) {
  .mpf-vitrine { display: block; }
  .mpf-vitrine .mpf-filtres-colonne .mpf-filtres button { display: inline-block; width: auto; border-radius: 999px; padding: 8px 13px; }
  .mpf-filtre-boutique { display: inline-flex; gap: 8px; align-self: flex-start; padding: 8px 13px; border-radius: 999px; font-size: 14px; }
}

/* Encarts de la colonne (partenaire, veille) : sous les filtres, dans la
   colonne collante. Colonne trop haute pour un petit ecran : elle defile.
   Sur telephone, les encarts passent apres les produits. */
/* Chaque bloc de la colonne est un cadre : filtres, puis encarts. */
.mpf-filtres-colonne .mpf-filtres-groupe {
  padding: 16px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
}
.mpf-filtres-groupe .mpf-filtre-boutique { margin-top: 16px; }
.mpf-encarts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Colonne plus haute que l ecran (filtres + encarts) : elle defile sur place. */
.mpf-filtres-colonne { max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; padding: 2px; margin: -2px; }
body:has(header.mpf-entete-defile:not(.mpf-entete-cachee)) .mpf-filtres-colonne { max-height: calc(100vh - var(--mpf-entete-h, 100px) - 40px); }
/* Pastille promo native de WooCommerce (boutique) : meme dessin que la vitrine. */
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-components-product-sale-badge {
  top: 6px; left: 6px; right: auto; margin: 0;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--laiton-fonce);
  color: #fff;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mpf-encart {
  padding: 16px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
}
.mpf-encart > * { margin-block-start: 0; }
.mpf-encart-surtitre {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-encart-lien { display: block; text-decoration: none !important; color: var(--wp--preset--color--encre-doux) !important; }
.mpf-encart-lien:hover .mpf-encart-phrase { color: var(--wp--preset--color--encre); }
.mpf-encart-logo { display: block; width: auto; max-width: 100%; max-height: 96px; height: auto; margin: 4px auto 12px; }
.mpf-encart-phrase { display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--encre-doux); }
.mpf-encart-partenaire .mpf-encart-phrase { margin: 0; text-align: center; }
.mpf-encart-veille form { display: flex; flex-direction: column; gap: 8px; margin: 0; }   /* champ puis bouton, pleine largeur */
.mpf-encart-veille input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.mpf-encart-veille button {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--wp--preset--color--laiton);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mpf-encart-veille button:hover { background: var(--wp--preset--color--laiton-fonce); }
.mpf-encart-mention { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--wp--preset--color--encre-doux); }
.mpf-encart-mention a { color: inherit; }
.mpf-encart-retour { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--wp--preset--color--laiton); font-size: 13px; line-height: 1.4; background: var(--wp--preset--color--papier); }
.mpf-encart-erreur { border-left-color: #b3261e; }
@media (max-width: 782px) {
  .mpf-vitrine { display: flex; flex-direction: column; }
  .mpf-vitrine .mpf-filtres-colonne { display: contents; }
  .mpf-filtres-colonne .mpf-filtres-groupe { padding: 0; border: 0; border-radius: 0; background: none; }
  /* Blocs de la colonne a plat dans la liste : pleine largeur, et une ligne de
     puces trop longue defile au lieu d elargir la page. */
  .mpf-filtres-colonne .mpf-filtres-groupe { min-width: 0; width: 100%; box-sizing: border-box; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > :not(.mpf-filtres-colonne) { width: 100%; min-width: 0; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) { display: flex; flex-direction: column; gap: 12px; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > .mpf-filtres-colonne { display: contents; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > ul.wc-block-product-template { margin-top: 12px; }
  .mpf-vitrine .mpf-filtres-groupe { margin-bottom: 24px; }
  .mpf-filtres-groupe .mpf-filtre-boutique { margin-top: 12px; }
  .mpf-vitrine .mpf-cartes, .mpf-vitrine .mpf-vitrine-suite { order: 1; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne .mpf-encarts) { display: flex; flex-direction: column; }
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne .mpf-encarts) > .mpf-filtres-colonne { display: contents; }
  .mpf-encarts { order: 10; margin-top: 32px; }
}
@media (max-width: 600px) {
  .mpf-vitrine .mpf-cartes > .mpf-domaine { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 16px !important; }
  .mpf-vitrine .mpf-domaine > .mpf-domaine-image { grid-row: 1 / span 2; }
  .mpf-vitrine .mpf-cartes .mpf-domaine-image img { width: 96px; height: 96px; }
  .mpf-vitrine .mpf-cartes .mpf-domaine h3 { font-size: 18px !important; }
  .mpf-vitrine .mpf-domaine > .mpf-carte-texte,
  .mpf-vitrine .mpf-cartes .mpf-carte-pied { grid-column: 1 / -1; }
  .mpf-vitrine .mpf-cartes .mpf-carte-texte { margin-top: 12px !important; }
}
@media (max-width: 1100px) {
  .mpf-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mpf-cartes { grid-template-columns: 1fr; gap: 18px; }
  .mpf-cartes .mpf-domaine-image img { height: 200px; }
}

/* Sous-titre explicatif de la fiche produit, sous le titre. */
.mpf-sous-titre {
  margin: .6em 0 1.2em;
  font-size: 17px;
  line-height: 1.45;
  color: var(--wp--preset--color--encre-doux);
  max-width: 40em;
}
@media (max-width: 782px) { .mpf-sous-titre { font-size: 15px; } }

/* Filtres par domaine, au-dessus des cartes. Un domaine sans produit reste
   visible, grise, avec « a paraitre » : il s active seul au premier produit. */
.mpf-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.mpf-filtres button {
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--trait);
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mpf-filtres button:hover { border-color: var(--wp--preset--color--encre); }
.mpf-filtres button:focus-visible { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 2px; }
.mpf-filtres button[aria-pressed="true"] {
  background: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--encre);
  color: #fff;
}
.mpf-filtres button .mpf-filtre-nombre { opacity: .7; margin-left: 4px; }
.mpf-filtres button:disabled {
  cursor: default;
  border-style: dashed;
  color: var(--wp--preset--color--encre-doux);
  background: transparent;
}
.mpf-filtres button:disabled:hover { border-color: var(--wp--preset--color--trait); }
.mpf-filtre-mention {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  margin-left: 6px;
}
/* Sur telephone, une seule ligne qui defile : cinq puces sur quatre lignes
   repoussaient les cartes hors de l ecran. */
@media (max-width: 782px) {
  .mpf-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px));
    padding-right: var(--wp--style--root--padding-right, 20px);
    scrollbar-width: none;
  }
  .mpf-filtres::-webkit-scrollbar { display: none; }
  .mpf-filtres button { flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 8px 13px; }
}

/* Partage, a droite du bouton de la carte. Les ronds reprennent le dessin du
   pied de page, mais sur fond clair : le contour et l icone passent en encre. */
.mpf-domaine-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mpf-domaine-actions .mpf-reseaux { margin-top: 0; gap: 10px; }
.mpf-domaine-actions .mpf-reseaux a {
  width: 34px;
  height: 34px;
  color: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--trait);
}
.mpf-domaine-actions .mpf-reseaux a:hover {
  background: var(--wp--preset--color--encre);
  color: #fff;
  border-color: var(--wp--preset--color--encre);
}
.mpf-domaine-actions .mpf-reseaux svg { width: 17px; height: 17px; }
.mpf-partage-titre {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  margin-right: 10px;
}
@media (max-width: 782px) {
  .mpf-domaine-actions { justify-content: flex-start; }
  .mpf-partage-titre { display: none; }
}

/* ------------------------------------------------------------- fiche produit */

/* Bouton d achat en laiton : c est la seule action de la page, elle ne doit pas
   se confondre avec les boutons de navigation, qui sont en encre. */
.woocommerce div.product form.cart .button,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button {
  background: var(--wp--preset--color--laiton) !important;
  color: #fff !important;
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font-size: 19px;
  font-weight: 600;
  transition: background-color .2s ease;
}
.woocommerce div.product form.cart .button:hover,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover {
  background: var(--wp--preset--color--laiton-fonce) !important;
}

/* Filet encre autour du visuel, au meme rayon que les boutons. */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce div.product div.images img {
  border: 1px solid var(--wp--preset--color--encre);
  border-radius: 12px;
}

/* Moyens de paiement. */
.mpf-paiements { margin-top: 22px; }
.mpf-paiements-titre {
  display: block;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  margin-bottom: 8px;
}
.mpf-paiements ul { display: flex; gap: 10px; list-style: none; margin: 0 0 10px; padding: 0; }
.mpf-carte {
  display: grid;
  place-items: center;
  width: 52px;
  height: 32px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 6px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
}
.mpf-carte svg { width: 40px; height: 24px; }
.mpf-paiements p { font-size: 14px; color: var(--wp--preset--color--encre-doux); margin: 0; max-width: 46ch; }

/* Categorie du produit : sur la ligne du fil d Ariane, calee a droite. */
.wp-block-woocommerce-product-meta { text-align: right; }
@media (max-width: 782px) { .wp-block-woocommerce-product-meta { text-align: left; } }

/* Page d accueil : tous les blocs de texte restent cales sur la verticale des
   titres. Le layout « constrained » recentre sinon chaque enfant limite en largeur. */
.home .wp-block-group > p,
.home .wp-block-group > h2,
.home .wp-block-group > ul,
.home .wp-block-group > ol { margin-left: 0 !important; margin-right: 0 !important; }

/* Defilement doux vers une ancre, en degageant la hauteur de l en-tete collant. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 120px; }
/* « Nos kits » s atteint en descendant : l en-tete s escamote alors, et ses
   120 px restaient vides au-dessus de la section. Seule la barre d administration
   reste a degager, pour qui est connecte. */
#nos-kits { scroll-margin-top: 16px; }
.admin-bar #nos-kits { scroll-margin-top: 48px; }

/* Les quatre arguments d achat, a gauche, sur la ligne des boutons.
   La marge est posee ici : l attribut du bloc n est pas rendu en style inline. */
.mpf-actions { width: 100%; margin-top: 3.2rem; margin-bottom: 3.2rem; }
.mpf-atouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 38px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
}
.mpf-atouts li { display: flex; align-items: center; gap: 12px; margin: 0; }
.mpf-atout-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
  border: 1px solid var(--wp--preset--color--trait);
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-atout-icone svg { width: 24px; height: 24px; }
.mpf-atout-texte { display: flex; flex-direction: column; line-height: 1.35; font-size: 17px; }
.mpf-atout-texte strong { font-weight: 600; color: var(--wp--preset--color--encre); }
.mpf-atout-texte { color: var(--wp--preset--color--encre-doux); }

/* Bloc « Mise a jour » : titre et texte resserres. */
.mpf-hero .wp-block-group[style*="border-left"] { padding-top: 2px; padding-bottom: 2px; }
.mpf-hero .wp-block-group[style*="border-left"] > p:first-child { margin-bottom: 2px; }
.mpf-hero .wp-block-group[style*="border-left"] > p:last-child { margin-top: 0; max-width: none; }

/* Menu principal : un cran plus lisible, et le lien courant souligne. */
header .wp-block-navigation a { font-size: 20px; }
header .wp-block-navigation .current-menu-item > a,
header .wp-block-navigation .current_page_item > a,
header .wp-block-navigation .current-menu-ancestor > a {
  box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--encre);
  padding-bottom: 3px;
}
@media (max-width: 782px) { .mpf-bandeau img { aspect-ratio: 16 / 9; } }

/* Le bloc de texte du hero glisse au defilement : sa transformation est posee
   par le script, pas ici. */
.mpf-hero { will-change: transform, opacity; }

/* Reglage de la taille du texte. Les tailles du theme sont exprimees en pixels :
   agrandir la racine ne suffirait pas. Le zoom applique a la page entiere donne
   exactement le meme resultat que le zoom du navigateur, images comprises, et
   sans toucher a une seule declaration de taille. */
html.mpf-texte-1 body { zoom: 1.12; }
html.mpf-texte-2 body { zoom: 1.25; }

/* Troisieme element de l en-tete : l espace se repartit de lui-meme entre la
   marque, le reglage et le menu. Aligne au centre, donc sur la ligne des liens. */
.mpf-taille { display: flex; align-items: center; gap: 6px; align-self: center; }
@media (max-width: 782px) { .mpf-taille { order: 4; } }
.mpf-taille-titre {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-taille div { display: flex; gap: 8px; }
.mpf-taille button {
  min-width: 34px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 8px;
  background: none;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mpf-taille button:hover { background: var(--wp--preset--color--papier); }
.mpf-taille button[aria-pressed="true"] {
  background: var(--wp--preset--color--encre);
  color: #fff;
  border-color: var(--wp--preset--color--encre);
}
.mpf-taille button:focus-visible {
  outline: 2px solid var(--wp--preset--color--laiton);
  outline-offset: 2px;
}

/* Retour en haut de page. */
.mpf-retour {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* laiton et non encre : sur le pied de page, un rond encre sur fond encre
     disparaissait purement et simplement. Le laiton tient sur les deux fonds. */
  background: var(--wp--preset--color--laiton);
  color: #fff;
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.mpf-retour.mpf-visible { opacity: 1; visibility: visible; transform: none; }
.mpf-retour:hover { background: var(--wp--preset--color--encre); }
.mpf-retour:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 3px; }
.mpf-retour svg { width: 26px; height: 26px; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .mpf-retour { transition: none; } }

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

@media (max-width: 782px) {
  /* Le parallaxe n apporte rien sur un ecran haut et etroit, et il coute cher
     en rendu : le script le neutralise, la feuille annule ce qu il a pose. */
  .mpf-hero { transform: none !important; opacity: 1 !important; }
  .mpf-bandeau img { transform: none !important; }

  /* Les deux boutons du hero passent l un sous l autre et prennent toute la
     largeur : une cible tactile fait 44 px de haut au minimum. */
  .wp-block-buttons { gap: 12px; }
  .mpf-hero .wp-block-buttons { justify-content: flex-start; }
  .wp-block-buttons .wp-block-button { width: 100%; min-width: 0; }
  header .wp-block-navigation a { font-size: 18px; }
  .wp-block-buttons .wp-block-button__link { display: block; text-align: center; }

  .mpf-retour { right: 16px; bottom: 16px; width: 42px; height: 42px; }

  /* Ecran haut et etroit : la hauteur est libre, et les arguments passent en
     une colonne sous le texte, les boutons dessous. */
  .mpf-hero { min-height: 0; display: block; }
  .mpf-atouts { grid-template-columns: 1fr; gap: 14px; max-width: none; }
  .mpf-actions { row-gap: 24px; margin-top: 2.6rem; margin-bottom: 2.6rem; }
}

@media (max-width: 400px) {
  /* Le filet lateral du bloc « Mise a jour » mange la largeur utile. */
  .mpf-hero .wp-block-group[style*="border-left"] { padding-left: 14px; }
}

/* Tableaux des pages legales : lisibles, sans effet de carte. */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td {
  border-bottom: 1px solid var(--wp--preset--color--trait);
  padding: 10px 14px;
  vertical-align: top;
  text-align: left;
}
.wp-block-table th {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wp--preset--color--laiton-fonce);
  font-weight: 500;
}
/* Un tableau large defile seul : la page ne part jamais de travers. */
.wp-block-table { overflow-x: auto; }

/* Un titre appartient a ce qui le suit : il s en tient plus pres que du
   paragraphe precedent, sans quoi la page se lit comme une suite de blocs
   detaches. */
.entry-content h2 { margin-top: 1.7em; margin-bottom: .5em; }
.entry-content h3 { margin-top: 1.2em; margin-bottom: .4em; }
.entry-content h2 + p,
.entry-content h3 + p { margin-top: 0; }

/* Menu : liens serres, sans soulignement, survol en laiton. */
.wp-block-navigation { --wp--style--block-gap: 1.8rem; }
.wp-block-navigation .wp-block-navigation-item__label { font-weight: 400; }

/* En-tete : le menu et les deux icones forment un seul groupe, serre a droite.
   Sans cela WooCommerce les insere lui-meme, loin du menu et trop petites. */
.mpf-outils { gap: 20px; }
.mpf-icone {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--encre);
  text-decoration: none;
  line-height: 0;
}
.mpf-icone + .mpf-icone { margin-left: -4px; }
.mpf-icone svg { width: 25px; height: 25px; display: block; }
.mpf-icone:hover { color: var(--wp--preset--color--laiton-fonce); }

/* Pied de page : la voie ne se coupe pas, le code postal reste avec la ville. */
.mpf-adresse { text-wrap: nowrap; }
@media (max-width: 500px) { .mpf-adresse { text-wrap: wrap; } }
.mpf-etiquette { margin-bottom: 10px; }
.mpf-pied .wp-block-column { min-width: 0; }

/* Le focus clavier doit se voir. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--laiton);
  outline-offset: 2px;
}

/* ------------------------------------------------------- pages d information

   Mentions legales, CGV, confidentialite : du texte long, rien d autre.
   La pleine largeur y est illisible — on brise a 900 px, aligne a gauche, et
   on resserre l espace entre un titre et le paragraphe qu il annonce. */
.mpf-legal {
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
}
.mpf-legal > * { text-align: left; }
.mpf-legal h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.25;
  margin-top: 2.2rem;
  margin-bottom: .55rem;
}
.mpf-legal h2:first-child { margin-top: 0; }
.mpf-legal h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  margin-top: 1.6rem;
  margin-bottom: .45rem;
}
.mpf-legal p {
  margin-top: 0;
  margin-bottom: .85rem;
  max-width: 78ch;
}
.mpf-legal p + p { margin-top: 0; }
.mpf-legal ul, .mpf-legal ol { margin-top: .2rem; margin-bottom: .9rem; }
@media (max-width: 782px) {
  .mpf-legal h2 { margin-top: 1.7rem; }
}

/* ------------------------------------------------------ pied de page, reglages

   Trois colonnes de largeur egale, alignees par le haut : la symetrie se voit,
   et les blocs de texte ne flottent plus a des hauteurs differentes. */
.mpf-pied { align-items: flex-start; }
.mpf-pied .mpf-etiquette { margin-top: 0; }

/* Le libelle de partage passe sur sa propre ligne, au-dessus des icones. */
.mpf-pied .mpf-reseaux { flex-wrap: wrap; }
.mpf-pied .mpf-partage-titre {
  flex-basis: 100%;
  margin-right: 0;
  margin-bottom: 8px;
  color: var(--wp--preset--color--laiton);
}

/* ------------------------------------------------- boutique et fiche produit

   Bloc a coller dans la chaine style de outils/theme/generer_theme.py, a la
   fin, avant la regle « Rien ne deborde en largeur ». Il vient apres la
   section « fiche produit » existante et corrige deux de ses regles : le
   filet du visuel, et l alignement a droite du bloc des metadonnees.

   Le balisage correspondant est produit par le mu-plugin mpf-boutique.php. */


/* --- Titre de la fiche, sur deux lignes ---------------------------------

   Le titre en base ne change pas : « Kit de conformite IA — Article 50 (AI
   Act) » reste entier partout ailleurs. Seul l affichage de la fiche le
   scinde, et le tiret cadratin disparait au profit du saut de ligne. */

.mpf-produit-titre,
.mpf-produit-soustitre { display: block; }
.mpf-produit-soustitre {
  margin-top: .1em;
  color: var(--wp--preset--color--laiton);
  font-size: var(--wp--preset--font-size--grand);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
}


/* --- Rectangle de reperage des avis clients ------------------------------

   PROVISOIRE. Il disparait des que la constante MPF_REPERE_AVIS passe a
   false dans wp-content/mu-plugins/mpf-boutique.php. Cette regle peut alors
   etre supprimee d un bloc, elle ne sert a rien d autre. */

.mpf-repere-avis {
  max-width: none;
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px dashed var(--wp--preset--color--encre-doux);
  border-radius: 12px;
  background: var(--wp--preset--color--trait);
  color: var(--wp--preset--color--encre-doux);
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: var(--wp--preset--font-size--petit);
  letter-spacing: .02em;
  line-height: 1.45;
  text-align: center;
}


/* --- Visuel de la fiche --------------------------------------------------

   Le filet passe de l image a son cadre. Pose sur l image, il epouse des
   bords calcules au demi-pixel pres : le navigateur l affiche alors en gris
   clair par endroits, ce qui se lit comme un pointille. Porte par le cadre,
   qui rogne l image, il est continu a toutes les largeurs. */

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
  border: 1px solid var(--wp--preset--color--encre);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--panneau);
}
.wp-block-woocommerce-product-image-gallery img,
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

/* WooCommerce sert la galerie a opacite nulle et compte sur son script pour
   la reveler. Ce script n est plus charge une fois le zoom coupe : sans la
   regle ci-dessous, le visuel resterait invisible. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* Loupe de zoom : le script ne la pose plus, la regle couvre le cas ou un
   reglage la rebrancherait. */
.woocommerce-product-gallery__trigger { display: none !important; }


/* --- Categorie, sous le visuel ------------------------------------------

   Le mu-plugin la sort du bloc des metadonnees, a droite du prix, et la pose
   sous l image. Meme traitement que les autres etiquettes du site : chasse
   fixe, capitales, petite taille. */

.mpf-produit-categorie {
  max-width: none;
  margin: 14px 0 0;
  text-align: left;
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.5;
}
.mpf-produit-categorie-titre {
  margin-right: 8px;
  font-family: var(--wp--preset--font-family--plex-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-produit-categorie a {
  font-family: var(--wp--preset--font-family--plex-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--trait);
}
.mpf-produit-categorie a:hover {
  color: var(--wp--preset--color--laiton-fonce);
  border-bottom-color: var(--wp--preset--color--laiton);
}

/* La ligne des metadonnees n a plus a etre calee a droite : la categorie l a
   quittee. Elle disparait si rien n y reste — ni reference, ni etiquette. */
.wp-block-woocommerce-product-meta { text-align: left; }
.wp-block-woocommerce-product-meta:not(:has(a)):not(:has(.sku_wrapper)) { display: none; }


/* --- Reassurance paiement ------------------------------------------------

   Fiche produit. Trois cellules de largeur egale se partagent la ligne :
   l action a gauche, la garantie au milieu, les moyens de paiement a droite.
   Les trois sont centrees sur la meme mediane. La phrase Stripe suit
   immediatement, calee sur la verticale du bouton.

   Le bloc des moyens de paiement est en « display: contents » : ses trois
   enfants deviennent des cellules de la grille du formulaire.

   Les marges du formulaire sont annulees en force. WooCommerce sert sa feuille
   EN LIGNE, apres celle du theme, et donne « margin-bottom: 2em » a form.cart ;
   cette marge entre dans la hauteur de la rangee et remonte le bouton d un
   demi-cran au-dessus du texte. C est le seul endroit du fichier ou le passage
   en force est justifie : aucune spécificité ne prend le pas sur une feuille
   servie plus tard a poids egal. */

.wp-block-add-to-cart-form,
.wp-block-woocommerce-add-to-cart-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "action etiquette cartes"
    "phrase phrase    phrase";
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  width: 100%;
  margin-top: var(--mpf-air-titre);   /* la description respire avant l action */
}
.wp-block-add-to-cart-form form.cart,
.wp-block-woocommerce-add-to-cart-form form.cart {
  grid-area: action;
  display: inline-flex !important;
  align-items: center;
  justify-self: start;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Le produit se vend a l unite : la quantite est un champ cache, sa colonne ne
   doit ouvrir aucun blanc devant le bouton. */
.wp-block-add-to-cart-form form.cart > .quantity,
.wp-block-woocommerce-add-to-cart-form form.cart > .quantity { display: none; }
.wp-block-add-to-cart-form form.cart > .quantity:has(input:not([type=hidden])),
.wp-block-woocommerce-add-to-cart-form form.cart > .quantity:has(input:not([type=hidden])) {
  display: inline-flex;
  margin-right: 10px;
}
.wp-block-add-to-cart-form form.cart > .single_add_to_cart_button,
.wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
  grid-column: auto !important;
  justify-self: auto !important;
  margin: 0 !important;
}

.mpf-paiements { display: contents; }

.mpf-paiements-titre {
  grid-area: etiquette;
  justify-self: center;
  align-self: center;
  margin: 0;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  white-space: nowrap;
}
.mpf-paiements ul {
  grid-area: cartes;
  display: flex;
  justify-self: end;
  align-self: center;
  align-items: center;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mpf-paiements .mpf-carte {
  width: 64px;
  height: auto;
  aspect-ratio: 62 / 38;
  border-radius: 7px;
}
.mpf-paiements .mpf-carte svg { width: 84%; height: auto; }

/* La phrase est le sous-titre du bouton : meme marge gauche, juste dessous. */
.mpf-paiements p {
  grid-area: phrase;
  justify-self: start;
  max-width: none;
  margin: 0;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.4;
  color: var(--wp--preset--color--encre-doux);
  text-wrap: pretty;
}

/* Colonne etroite : les trois cellules n ont plus la place, la garantie et les
   moyens de paiement passent sous le bouton sans rien tronquer. */
@media (max-width: 1100px) {
  .wp-block-add-to-cart-form,
  .wp-block-woocommerce-add-to-cart-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "action    action"
      "etiquette cartes"
      "phrase    phrase";
    row-gap: 10px;
  }
  .mpf-paiements-titre { justify-self: start; }
}
@media (max-width: 600px) {
  .wp-block-add-to-cart-form,
  .wp-block-woocommerce-add-to-cart-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "action" "etiquette" "cartes" "phrase";
  }
  .mpf-paiements ul { justify-self: start; }
}


/* --- Espace reserve aux messages WooCommerce -----------------------------

   Panier ajoute, coupon refuse, commande enregistree : le message apparait
   en tete de page et pousse tout le reste vers le bas. La hauteur d un
   message d une ligne est reservee d avance, la page ne saute plus. Les deux
   selecteurs sont imbriques : la hauteur ne se cumule pas. */

.wp-block-woocommerce-store-notices,
.woocommerce-notices-wrapper {
  min-height: 56px;
}
@media (max-width: 782px) {
  /* le meme message y tient sur deux lignes */
  .wp-block-woocommerce-store-notices,
  .woocommerce-notices-wrapper { min-height: 84px; }
}

/* Boutique : le titre et la premiere carte se tenaient a plus de cent pixels
   l un de l autre. La reserve a message y descend a 36 px — de quoi loger
   « ... a bien ete ajoute a votre panier » sans que la page saute — et le
   titre rend ses marges. */
.woocommerce-shop .wp-block-woocommerce-product-collection,
.tax-product_cat .wp-block-woocommerce-product-collection { margin-top: 0; }

/* --- Panier, commande, compte : l air du haut de page ---------------------

   Meme traitement que la boutique. La reserve a message descend a 40 px : un
   « Panier mis a jour » d une ligne y tient, la page ne saute pas, et le titre
   ne flotte plus a cent pixels de l entete. */

/* La reserve a message est levee ici. Elle vaut 56 px et la page en porte
   DEUX : celle du bloc « store notices », en tete, et celle que WooCommerce
   ouvre a l interieur de .woocommerce, entre le titre et le tableau. Cent
   douze pixels de blanc permanent pour un message qui ne parait qu apres une
   action : le compte n y est pas. Sur ces trois pages, la reserve tombe a
   zero et le message pousse la page quand il arrive — c est un saut apres
   clic, pas un vide a chaque visite. */
.woocommerce-cart .wp-block-woocommerce-store-notices,
.woocommerce-checkout .wp-block-woocommerce-store-notices,
.woocommerce-account .wp-block-woocommerce-store-notices,
.single-product .wp-block-woocommerce-store-notices,
.woocommerce-shop .wp-block-woocommerce-store-notices,
.tax-product_cat .wp-block-woocommerce-store-notices,
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-notices-wrapper,
.single-product .woocommerce-notices-wrapper,
.woocommerce-shop .woocommerce-notices-wrapper,
.tax-product_cat .woocommerce-notices-wrapper {
  min-height: 0;
}

/* --- L air des hauts de page, en un seul reglage -------------------------

   Une meme respiration partout : sous l entete, de part et d autre du titre
   de page, et entre le fil d Ariane et le premier bloc de contenu. La valeur
   se change ici, elle se propage aux quatre endroits.

   Au-dessus du titre, c est l ecart entre blocs du gabarit qui la pose deja :
   le titre n ajoute donc rien de son cote, il ne regle que le dessous. */

:root { --mpf-air-titre: 24px; }

body.woocommerce-cart main .wp-block-post-title,
body.woocommerce-checkout main .wp-block-post-title,
body.woocommerce-account main .wp-block-post-title {
  margin-top: 0;
  margin-bottom: var(--mpf-air-titre);
}
body.woocommerce-shop main .wp-block-query-title,
body.tax-product_cat main .wp-block-query-title {
  margin-top: 0;
  margin-bottom: var(--mpf-air-titre);
}
/* Fiche produit et boutique : le fil d Ariane rend sa marge basse, l ecart
   entre blocs du gabarit suffit — et le bloc de messages, vide, ne reserve
   plus rien entre les deux. */
body.single-product .mpf-ariane,
body.woocommerce-shop .mpf-ariane,
body.tax-product_cat .mpf-ariane { margin-bottom: 0; }
body.single-product .wp-block-woocommerce-store-notices,
body.woocommerce-shop .wp-block-woocommerce-store-notices,
body.tax-product_cat .wp-block-woocommerce-store-notices { margin-block: 0; }
body.woocommerce-cart main .wp-block-post-content,
body.woocommerce-checkout main .wp-block-post-content,
body.woocommerce-account main .wp-block-post-content { margin-top: 0; }
body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-account .entry-content > .woocommerce { margin-top: 0; }
body.woocommerce-cart .entry-content > .woocommerce > :first-child,
body.woocommerce-account .entry-content > .woocommerce > :first-child { margin-top: 0; }
body.woocommerce-cart form.woocommerce-cart-form { margin-top: 0; }


/* --- Compte client --------------------------------------------------------

   Le formulaire tenait toute la largeur du contenu : une ligne de saisie de
   mille pixels pour y taper une adresse de courriel. Il est ramene a une
   colonne de lecture et centre, comme partout ailleurs dans WordPress. */

.woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
  max-width: 34rem;
  margin-inline: auto;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  margin: 0;
  padding: 26px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
}
.woocommerce-account .woocommerce form.login h2,
.woocommerce-account .woocommerce #customer_login h2 {
  margin: 0 0 16px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  line-height: 1.25;
}
.woocommerce-account .woocommerce form.login .form-row,
.woocommerce-account .woocommerce form.register .form-row { margin-bottom: 14px; }
.woocommerce-account .woocommerce form.login label,
.woocommerce-account .woocommerce form.register label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--encre-doux);
}
.woocommerce-account .woocommerce form.login input.input-text,
.woocommerce-account .woocommerce form.register input.input-text {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: var(--wp--preset--font-size--petit);
}
.woocommerce-account .woocommerce form.login button.button,
.woocommerce-account .woocommerce form.register button.button {
  width: auto;
  min-width: 11rem;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: var(--wp--preset--color--panneau);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: var(--wp--preset--font-size--petit);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.woocommerce-account .woocommerce form.login button.button:hover,
.woocommerce-account .woocommerce form.register button.button:hover {
  background: var(--wp--preset--color--laiton-fonce);
}
/* Connexion et inscription : deux colonnes egales, une seule sous 782 px.
   WooCommerce fait flotter .col-1 et .col-2 sur 47 % ; la grille ne prend la
   main que si ces deux reglages sont explicitement annules. */
.woocommerce-account .woocommerce div#customer_login.col2-set,
.woocommerce-account .woocommerce div#customer_login.u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  float: none;
}
.woocommerce-account .woocommerce div#customer_login .col-1,
.woocommerce-account .woocommerce div#customer_login .col-2,
.woocommerce-account .woocommerce div#customer_login .u-column1,
.woocommerce-account .woocommerce div#customer_login .u-column2 {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
}
.woocommerce-account .woocommerce div#customer_login::before,
.woocommerce-account .woocommerce div#customer_login::after { content: none; }
@media (max-width: 782px) {
  .woocommerce-account .woocommerce #customer_login.col2-set { grid-template-columns: 1fr; }
}
/* Deux colonnes demandent plus de place que le seul formulaire de connexion. */
.woocommerce-account:not(.logged-in) .entry-content > .woocommerce:has(#customer_login.col2-set) {
  max-width: 54rem;
}


/* --- Cartes de la boutique ----------------------------------------------

   Image, nom, description courte, prix, bouton. Le bouton est cale en bas
   par une marge automatique : quelle que soit la longueur des descriptions,
   les boutons restent alignes d une carte a l autre. */

/* Trois cartes par ligne, quel que soit le nombre de produits en catalogue.
   Le gabarit annonce deja « columns-3 » ; la grille est posee ici pour que le
   catalogue ne depende pas de la feuille native de WooCommerce. Les colonnes
   tombent a deux sous 1024 px, a une seule sous 600 px (plus bas). */
ul.wc-block-product-template.columns-3,
ul.wc-block-product-template__responsive.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024px) {
  ul.wc-block-product-template.columns-3,
  ul.wc-block-product-template__responsive.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* « Produits similaires » : le bloc est en mode flex de WooCommerce, qui fixe a
   chaque carte une largeur de 33 %. Dans une cellule de grille, cela faisait un
   tiers de colonne (112 px). Classes doublees pour passer devant sa feuille en ligne. */
ul.wc-block-product-template.is-flex-container.columns-3 > li.wc-block-product {
  width: auto;
  margin: 0;
}

ul.wc-block-product-template li.wc-block-product,
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--wp--preset--color--panneau);
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  text-align: left;
  transition: box-shadow .2s ease, border-color .2s ease;
}
ul.wc-block-product-template li.wc-block-product:hover,
.woocommerce ul.products li.product:hover {
  border-color: var(--wp--preset--color--encre-doux);
  box-shadow: 0 6px 24px rgba(22, 35, 61, .07);
}

/* Le gabarit de WooCommerce centre le nom, le prix et le bouton. Les cartes
   de l accueil sont calees a gauche : les deux pages se repondent. */
ul.wc-block-product-template li.wc-block-product > *,
ul.wc-block-product-template li.wc-block-product .wp-block-post-title,
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price,
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button {
  text-align: left;
}

/* Image */
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-image,
.woocommerce ul.products li.product a > img {
  margin: 0 0 14px;
}
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-image img,
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 10px;
}

/* Nom */
ul.wc-block-product-template li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--encre);
}
ul.wc-block-product-template li.wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}
ul.wc-block-product-template li.wc-block-product .wp-block-post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Description courte. Elle est bornee a quatre lignes : sans cela, une carte
   bavarde imposerait sa hauteur a toute la rangee. Le texte reste entier
   dans la page, seule sa hauteur est tenue. */
.mpf-carte-resume {
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.5;
  color: var(--wp--preset--color--encre-doux);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.mpf-carte-resume p { margin: 0; font-size: inherit; }
.mpf-carte-resume p + p { margin-top: .5em; }
.mpf-carte-resume ul,
.mpf-carte-resume ol { margin: .3em 0 0; padding-left: 1.1em; }

/* Prix. Il porte la decision : un cran au-dessus du texte courant, au corps
   « moyen » de la charte, pour se detacher du resume sans ecraser le nom. */
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price,
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 14px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 500;
  color: var(--wp--preset--color--encre);
}
/* La mention « HT — TTC » suit le prix sur la meme ligne, d un corps plus
   petit : c est une glose, pas une seconde annonce. Elle ne se replie pas. */
ul.wc-block-product-template li.wc-block-product .woocommerce-price-suffix,
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
  display: inline;
  margin-left: 2px;
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--encre-doux);
  white-space: nowrap;
}
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price,
.woocommerce ul.products li.product .price { text-wrap: nowrap; }
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price del,
.woocommerce ul.products li.product .price del {
  color: var(--wp--preset--color--encre-doux);
  font-weight: 400;
}
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price ins,
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Bouton : memes arrondis et memes couleurs que le bouton d achat de la
   fiche. C est la seule action de la carte, elle est donc en laiton. */
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button,
.woocommerce ul.products li.product .button { margin-top: auto; }
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button,
.woocommerce ul.products li.product a.button {
  display: inline-block;
  padding: 11px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: var(--wp--preset--color--panneau);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: var(--wp--preset--font-size--petit);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--wp--preset--color--laiton-fonce);
  color: var(--wp--preset--color--panneau);
}
/* Lien « Voir le panier » qui apparait apres un ajout. */
ul.wc-block-product-template li.wc-block-product .added_to_cart,
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--laiton-fonce);
}


/* --- Boutique et fiche sur petit ecran ----------------------------------- */

@media (max-width: 600px) {
  /* Deux cartes de 150 px cote a cote a 360 px : la description n y tient
     pas. Une seule colonne, et chaque carte reste lisible. */
  ul.wc-block-product-template__responsive.columns-2,
  ul.wc-block-product-template__responsive.columns-3,
  ul.wc-block-product-template__responsive.columns-4,
  ul.wc-block-product-template__responsive.columns-5,
  ul.wc-block-product-template__responsive.columns-6 {
    grid-template-columns: 1fr;
  }
  ul.wc-block-product-template li.wc-block-product,
  .woocommerce ul.products li.product { padding: 16px; }
  ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button,
  .woocommerce ul.products li.product a.button {
    display: block;
    width: 100%;
    text-align: center;   /* cible tactile pleine largeur */
  }
  .mpf-carte-resume { -webkit-line-clamp: 6; line-clamp: 6; }
  .mpf-repere-avis { padding: 14px; }
  /* L etiquette de paiement prend sa propre ligne : cote a cote, il ne
     resterait a la phrase qu une colonne de quelques mots. */
  .mpf-paiements-titre { flex-basis: 100%; }
}


/* --------------------------------------------------- panier et commande */

/* Le panier et la commande sont en version classique : WooCommerce sort un
   tableau et non des blocs. Tout se cale ici sur la charte, sans toucher au
   balisage. */


/* Alignement. Le gabarit du panier pose le titre et le contenu en « large » ;
   le contenu, lui, porte en plus la gouttiere globale, ce qui rentre le tableau
   d une vingtaine de pixels. Les deux blocs sont ramenes a la meme boite, le
   tableau retrouve le bord gauche du titre. La gouttiere reste posee par le
   conteneur « main », donc rien ne touche le bord de l ecran. */
body.woocommerce-cart main .wp-block-post-title,
body.woocommerce-cart main .wp-block-post-content,
body.woocommerce-checkout main .wp-block-post-content {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: 0;
}
body.woocommerce-cart .wp-block-post-content > *,
body.woocommerce-checkout .wp-block-post-content > * {
  max-width: none;
  margin-inline: 0;
}
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce { width: 100%; }


/* Tableaux : panneau, filet, meme rayon que les boutons. */
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 28px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wp--preset--color--panneau);
  overflow: hidden;
}
.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table th {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--encre-doux);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--wp--preset--color--trait);
}
.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--wp--preset--color--trait);
  color: var(--wp--preset--color--encre);
  vertical-align: middle;
}
.woocommerce-cart .woocommerce table.shop_table td.product-price,
.woocommerce-cart .woocommerce table.shop_table td.product-subtotal,
.woocommerce-checkout .woocommerce table.shop_table td.product-total {
  font-family: var(--wp--preset--font-family--plex-mono);
  white-space: nowrap;
}
.woocommerce-cart .woocommerce table.shop_table img { border-radius: 8px; }

/* Mention HT accolee aux prix des lignes, plus discrete que le montant. */
.mpf-ht {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: .78em;
  letter-spacing: .06em;
  color: var(--wp--preset--color--encre-doux);
  margin-left: .25em;
}


/* Champ de code promo et boutons secondaires : meme rayon de 12 px que partout
   ailleurs, en encre pour ne pas concurrencer l action principale. */
.woocommerce-cart .woocommerce td.actions { padding: 16px; }
.woocommerce-cart .woocommerce td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  float: none;
  margin-bottom: 12px;
}
.woocommerce-cart .woocommerce #coupon_code {
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 16px;
  line-height: 1.3;
  padding: 10px 14px;
  width: auto;
  min-width: 200px;
  max-width: 100%;
}
.woocommerce-cart .woocommerce #coupon_code:focus-visible {
  outline: 2px solid var(--wp--preset--color--laiton);
  outline-offset: 2px;
}
.woocommerce-cart .woocommerce td.actions .button,
.woocommerce-cart .woocommerce td.actions input.button {
  background: var(--wp--preset--color--panneau) !important;
  color: var(--wp--preset--color--encre) !important;
  border: 1px solid var(--wp--preset--color--encre);
  border-radius: 12px;
  padding: 10px 20px;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  float: none;
  transition: background-color .2s ease, color .2s ease;
}
.woocommerce-cart .woocommerce td.actions .button:hover,
.woocommerce-cart .woocommerce td.actions input.button:hover {
  background: var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--panneau) !important;
}
.woocommerce-cart .woocommerce td.actions .button[disabled] { opacity: .5; }


/* Bloc des totaux. Les libelles disent « Sous-total HT », « TVA 20 % » et
   « Total TTC » : ils viennent du greffon, la mise en forme seule est ici. */
.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart_totals {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 23px;
  margin: 0 0 14px;
}
.woocommerce-cart .cart_totals table.shop_table { margin-bottom: 18px; }
.woocommerce-cart .cart_totals th { width: 55%; border-top: 1px solid var(--wp--preset--color--trait); }
.woocommerce-cart .cart_totals td {
  font-family: var(--wp--preset--font-family--plex-mono);
  text-align: right;
  white-space: nowrap;
}
.woocommerce-cart .cart_totals tr:first-child th,
.woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  color: var(--wp--preset--color--encre);
  font-size: 17px;
  background: var(--wp--preset--color--papier);
}
.woocommerce-cart .cart_totals .order-total small {
  display: block;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 13px;
  color: var(--wp--preset--color--encre-doux);
  white-space: normal;
}


/* Action principale. Le bouton restait trop haut : la hauteur vient du seul
   padding vertical, ramene a 12 px, avec une ligne de 1.3 pour rester ample. */
/* Le bouton prend exactement la largeur du tableau des totaux qu il conclut :
   ni barre qui traverse la page, ni pave trop court sous un tableau plus large.
   C est la colonne des totaux, bornee plus bas, qui fixe les deux. */
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 24px !important;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton) !important;
  color: var(--wp--preset--color--panneau) !important;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 19px !important;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--wp--preset--color--laiton-fonce) !important;
}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--encre);
  outline-offset: 3px;
}


/* Reassurance, sous le bouton. Les marques de paiement sont dessinees en SVG
   et prennent la couleur du texte : aucune image, aucun appel reseau. */
/* La colonne des totaux borne le tableau et le bouton d un seul geste, et
   reste calee a gauche. WooCommerce donne « width: 48% » et « float: right »
   a .cart_totals : borner son conteneur le reduisait a la moitie de la borne,
   d ou un tableau ecrase et flottant au milieu de la page. On agit donc sur
   .cart_totals lui-meme, en annulant d abord les deux reglages natifs. */
.woocommerce-cart .woocommerce .cart-collaterals { max-width: none; width: 100%; }
/* Le bloc des totaux se tient a droite, sous la colonne des sous-totaux du
   tableau : c est la lecture naturelle d une addition. Tout ce qu il contient
   — tableau, bouton, reassurance — prend exactement sa largeur. */
.woocommerce-cart .woocommerce .cart_totals {
  float: none;
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: 0;
}
.woocommerce-cart .woocommerce .cart_totals > *,
.woocommerce-cart .woocommerce .cart_totals table.shop_table,
.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout { padding: 0; margin: 0; }
/* « Total panier » : le titre se rapproche du tableau qu il annonce. */
.woocommerce-cart .woocommerce .cart_totals h2 {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  line-height: 1.25;
}
.woocommerce-cart .woocommerce .cart_totals table.shop_table { margin-bottom: 18px; }
/* Le tableau du panier suit de pres le titre de la page. */
.woocommerce-cart .woocommerce form.woocommerce-cart-form { margin-top: 0; }
.woocommerce-cart .woocommerce form.woocommerce-cart-form table.shop_table { margin-top: 0; }

.mpf-reassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(12px, 1.6vw, 22px);
  row-gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--trait);
}
/* L etiquette et les trois moyens de paiement tiennent une seule ligne, au
   meme reglage que la fiche produit : le panier et la fiche disent la meme
   chose, ils doivent la dire de la meme facon. */
.mpf-reassurance-titre {
  order: 1;
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  margin: 0;
  white-space: nowrap;
}
.mpf-reassurance-cartes {
  order: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mpf-reassurance-carte {
  display: grid;
  place-items: center;
  width: clamp(58px, 5.6vw, 78px);
  height: auto;
  aspect-ratio: 62 / 38;
  margin: 0;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 7px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
}
.mpf-reassurance-carte svg { width: 84%; height: auto; }
.mpf-reassurance-carte svg text { font-family: var(--wp--preset--font-family--plex-sans); }
/* La phrase passe sous la ligne, calee a la marge gauche comme un sous-titre. */
.mpf-reassurance-texte {
  order: 3;
  flex: 1 1 100%;
  margin: -2px 0 0;
  max-width: none;
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.4;
  color: var(--wp--preset--color--encre-doux);
  text-wrap: pretty;
}
.mpf-reassurance-texte:last-child { margin-bottom: 0; }
.mpf-reassurance-texte a { color: var(--wp--preset--color--laiton-fonce); }


/* Etape de commande : memes rayons, meme action principale. */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout .woocommerce #order_review_heading { font-size: 23px; }
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout .woocommerce .select2-container .select2-selection {
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 16px;
  line-height: 1.3;
  padding: 10px 14px;
  height: auto;
}
.woocommerce-checkout .woocommerce form .form-row label {
  font-size: 15px;
  color: var(--wp--preset--color--encre);
}
.woocommerce-checkout .woocommerce #payment {
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
}
.woocommerce-checkout .woocommerce #place_order {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 24px !important;
  background: var(--wp--preset--color--laiton) !important;
  color: var(--wp--preset--color--panneau) !important;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 19px !important;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease;
}
.woocommerce-checkout .woocommerce #place_order:hover {
  background: var(--wp--preset--color--laiton-fonce) !important;
}

/* Les deux cases obligatoires : renonciation au droit de retractation, deja
   posee par mpf-retractation.php, et consentement RGPD. Meme presentation. */
.woocommerce-checkout .woocommerce .form-row.mpf-case-rgpd,
.woocommerce-checkout .woocommerce .form-row.validate-required > label.checkbox,
.woocommerce-checkout .woocommerce .mpf-case-rgpd label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--encre);
}
.woocommerce-checkout .woocommerce .form-row.mpf-case-rgpd { margin: 0 0 14px; padding: 0; }
.woocommerce-checkout .woocommerce .mpf-case-rgpd label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.woocommerce-checkout .woocommerce .mpf-case-rgpd input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--wp--preset--color--laiton);
}
.woocommerce-checkout .woocommerce .mpf-case-rgpd a { color: var(--wp--preset--color--laiton-fonce); }


/* Etape de commande en deux colonnes (tunnel classique, choisi le 22/09 plutot
   que le bloc « Validation de commande » : les cases de retractation et RGPD, la
   TVA intracommunautaire et la licence reposent sur ses crochets).

   Gauche : les coordonnees, puis la carte bancaire.
   Droite : le recapitulatif, Apple Pay, les moyens de paiement, puis les cases
   et le bouton, en face de la carte.

   Carte et bouton sont dans le meme bloc de WooCommerce (#payment, lui-meme dans
   #order_review). Les deux enveloppes passent en « display: contents » : leurs
   enfants deviennent des cellules de la grille du formulaire et se placent
   chacun dans sa colonne. Rien n est deplace dans la page — le cadre de Stripe
   se rechargerait. Quand WooCommerce rafraichit la commande, il remplace
   #payment par un bloc de meme identifiant : la grille s applique a nouveau. */
@media (min-width: 1000px) {
  .woocommerce-checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    /* Quand les coordonnees sont plus hautes (raison sociale de la licence),
       l ecart va a la seule 3e rangee, sous Apple Pay, au lieu de s eparpiller
       entre le titre, le tableau et les boutons. */
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 48px;
    align-items: start;
  }
  .woocommerce-checkout .woocommerce form.checkout > * { grid-column: 1; }
  .woocommerce-checkout .woocommerce form.checkout #order_review,
  .woocommerce-checkout .woocommerce form.checkout #order_review > #payment { display: contents; }
  /* par defaut, tout element inattendu tombe en derniere rangee, pleine largeur */
  .woocommerce-checkout .woocommerce form.checkout #order_review > *,
  .woocommerce-checkout .woocommerce form.checkout #payment > * { grid-column: 1 / -1; grid-row: 6; }

  .woocommerce-checkout .woocommerce form.checkout > #customer_details { grid-row: 1 / span 3; }
  .woocommerce-checkout .woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; }
  .woocommerce-checkout .woocommerce form.checkout #order_review > .woocommerce-checkout-review-order-table { grid-column: 2; grid-row: 2; }
  .woocommerce-checkout .woocommerce form.checkout #order_review > #wc-stripe-express-checkout-element { grid-column: 2; grid-row: 3; }
  .woocommerce-checkout .woocommerce form.checkout #order_review > .mpf-paiements-commande { grid-column: 2; grid-row: 4; }
  /* La carte suit directement les coordonnees (rangees 4 et 5) ; a droite,
     la reassurance puis les cases : plus de trou sous les informations
     complementaires quand la colonne de droite est plus haute. */
  .woocommerce-checkout .woocommerce form.checkout #payment > .wc_payment_methods { grid-column: 1; grid-row: 4 / span 2; }
  .woocommerce-checkout .woocommerce form.checkout #payment > .place-order { grid-column: 2; grid-row: 5; }

  /* Les deux titres de colonne au meme niveau. */
  .woocommerce-checkout .woocommerce #customer_details .col-1 h3:first-child { margin-top: 0; }
}

/* Apple Pay pleine largeur ; « — OU — » masque : Stripe l affiche par script, en
   style en ligne, seul !important passe devant. */
.woocommerce-checkout .woocommerce #wc-stripe-express-checkout-element {
  width: 100%;
  margin: 0 0 16px !important;     /* Stripe pose margin-top: 1em en ligne */
}
.woocommerce-checkout .woocommerce #wc-stripe-express-checkout-button-separator { display: none !important; }

/* #payment n a plus de boite sur ordinateur : la carte et le bloc des cases
   prennent chacun le panneau qu il portait. */
.woocommerce-checkout .woocommerce #payment > .wc_payment_methods,
.woocommerce-checkout .woocommerce #payment > .place-order {
  margin: 0 0 20px;
  padding: 20px !important;        /* WooCommerce pose ses marges dans sa feuille en ligne, apres le theme */
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
}
@media (max-width: 999px) {
  .woocommerce-checkout .woocommerce #payment { border: 0; background: none; }
}

/* Moyens de paiement, sous Apple Pay : etiquette et cartes sur une ligne,
   phrase dessous. Reprend les zones nommees du bloc de la fiche produit. */
.woocommerce-checkout .mpf-paiements.mpf-paiements-commande {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "etiquette cartes" "phrase phrase";
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 20px;
}
.woocommerce-checkout .mpf-paiements-commande .mpf-paiements-titre { font-size: 14px; justify-self: start; }
.woocommerce-checkout .mpf-paiements-commande ul { justify-self: end; }
.woocommerce-checkout .mpf-paiements-commande .mpf-carte { width: 52px; }

/* Libelles masques a l ecran, gardes pour les lecteurs d ecran : le texte
   indicatif de chaque champ en tient lieu (voir functions.php). */
.woocommerce-checkout .woocommerce .woocommerce-billing-fields .form-row > label,
.woocommerce-checkout .woocommerce .woocommerce-additional-fields .form-row > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.woocommerce-checkout .woocommerce .woocommerce-billing-fields .form-row { margin-bottom: 14px; }

/* Coordonnees : les deux blocs de WooCommerce (facturation, notes) l un sous
   l autre, et les champs courts deux par ligne. */
.woocommerce-checkout .woocommerce #customer_details.col2-set .col-1,
.woocommerce-checkout .woocommerce #customer_details.col2-set .col-2 {
  float: none;
  width: 100%;
}
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));   /* 50/50 = 5+5 ; 70/30 = 7+3 */
  column-gap: 16px;
  align-items: start;
}
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}
/* Ordre logique, deux par deux, sans case vide (23/09). WooCommerce place
   l e-mail en tete du formulaire : l ordre est impose ici, chaque ligne
   commence en colonne 1. Prenom | Nom ; entreprise (licence) ; E-mail |
   Telephone ; Pays | TVA ; Rue | Complement ; Code postal | Ville. */
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_first_name_field { order: 1; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_last_name_field { order: 2; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_company_field { order: 3; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_email_field { order: 4; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_phone_field { order: 5; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_country_field { order: 6; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #mpf_tva_ue_field { order: 7; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_1_field { order: 8; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_2_field { order: 9; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_postcode_field { order: 10; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_city_field { order: 11; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_state_field { order: 12; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_first_name_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_email_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_country_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_postcode_field { grid-column: 1 / span 5; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_last_name_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_phone_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #mpf_tva_ue_field,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_city_field { grid-column: 6 / span 5; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_1_field { grid-column: 1 / span 7; }
/* Liste des pays a la hauteur des autres champs : la liste de WooCommerce
   ajoutait ses propres marges interieures (113 px de haut contre 89). */
.woocommerce-checkout .woocommerce form.checkout .form-row .select2-container .select2-selection--single { height: auto; min-height: 0; }
.woocommerce-checkout .woocommerce form.checkout .form-row .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 24px 0 0;
  line-height: 1.3;
  color: var(--wp--preset--color--encre);
}
.woocommerce-checkout .woocommerce form.checkout .form-row .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 10px;
}
/* Le complement d adresse n a pas d etiquette visible : cale en bas, son champ
   s aligne sur celui de la rue. */
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_2_field { grid-column: 8 / span 3; }
@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row { grid-column: 1 !important; }   /* les regles par champ ci-dessus portent un id */
}

/* Les trois cases (CGV, retractation, RGPD) : meme presentation. Seule la
   case RGPD l avait ; les deux autres gardaient la case native, plus petite. */
.woocommerce-checkout .woocommerce .place-order .form-row { margin: 0 0 12px; padding: 0; }
.woocommerce-checkout .woocommerce .place-order .form-row label.checkbox {
  display: block;                 /* en flex, texte, lien et asterisque se separaient en colonnes */
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--encre);
}
.woocommerce-checkout .woocommerce .place-order .form-row input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--wp--preset--color--laiton);
}
.woocommerce-checkout .woocommerce .place-order .form-row a { color: var(--wp--preset--color--laiton-fonce); }
.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--encre-doux);
}
.woocommerce-checkout .woocommerce #place_order { margin-top: 6px; }

/* Fil d Ariane. Meme habillage partout ou il parait : boutique, categories,
   fiches produit, pages d information, articles. Le greffon se charge de ne
   pas le poser sur le panier, la commande, le compte et l accueil. */
.woocommerce-breadcrumb,
.mpf-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--wp--preset--color--encre-doux);
}
.woocommerce-breadcrumb a,
.mpf-ariane a {
  color: var(--wp--preset--color--laiton-fonce);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover,
.mpf-ariane a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mpf-ariane-separateur { color: var(--wp--preset--color--trait); }


/* Telephone et petite tablette. Le tableau du panier se replie de lui-meme
   (classe shop_table_responsive de WooCommerce) : on ne reprend ici que les
   elements qui restent trop larges. */
@media (max-width: 782px) {
  .woocommerce-cart .cart_totals { max-width: none; margin-left: 0; }
  .woocommerce-cart .woocommerce td.actions .coupon { margin-bottom: 10px; }
  .woocommerce-cart .woocommerce #coupon_code { flex: 1 1 100%; min-width: 0; }
  .woocommerce-cart .woocommerce td.actions .coupon .button,
  .woocommerce-cart .woocommerce td.actions > .button,
  .woocommerce-cart .woocommerce td.actions > input.button { width: 100%; }
  .woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
    font-size: 17px !important;
    padding: 12px 18px !important;
  }
  .woocommerce-checkout .woocommerce #place_order { font-size: 17px !important; }
}

@media (max-width: 600px) {
  .woocommerce-cart .woocommerce table.shop_table th,
  .woocommerce-cart .woocommerce table.shop_table td,
  .woocommerce-checkout .woocommerce table.shop_table th,
  .woocommerce-checkout .woocommerce table.shop_table td { padding: 12px; }
  .woocommerce-cart .woocommerce table.shop_table td.product-price,
  .woocommerce-cart .woocommerce table.shop_table td.product-subtotal { white-space: normal; }
  .mpf-reassurance-texte { max-width: none; }
}


/* Panier, remis en page le 23/09 a la demande du dirigeant.
   - En-tete et contenu remplissent l ecran, le pied de page commence sous le pli.
   - En-tete du tableau des produits en bleu encre, titres blancs en gras.
   - Sous le tableau, deux colonnes : a gauche la reassurance, calee a droite ;
     a droite les totaux sans leur titre et le bouton. Libelles et montants des
     totaux a la meme taille, le total TTC seul en gras. */
/* En-tete (121 px) + panier = un ecran : le pied de page commence sous le pli. */
@media (min-width: 901px) {
  body.woocommerce-cart .wp-site-blocks > main { min-height: calc(100dvh - 121px); box-sizing: border-box; }
  body.woocommerce-cart.admin-bar .wp-site-blocks > main { min-height: calc(100dvh - 153px); }
}

.woocommerce-cart .woocommerce form.woocommerce-cart-form table.shop_table thead th {
  background: var(--wp--preset--color--encre);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 0;
}

.woocommerce-cart .woocommerce .cart-collaterals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.woocommerce-cart .woocommerce .cart-collaterals::before,
.woocommerce-cart .woocommerce .cart-collaterals::after { content: none; }
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals { grid-column: 2; grid-row: 1; max-width: none; }
.woocommerce-cart .woocommerce .cart_totals h2 { display: none; }
.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table td,
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total td {
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.3;
}
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total td,
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total td strong { font-weight: 700; }

/* Reassurance : une boite a la largeur de sa colonne, contre les totaux.
   Etiquette calee a droite et cartes a gauche, qui se rejoignent au milieu ;
   phrase alignee a gauche sur toute la largeur, sans mot orphelin. La premiere ligne (etiquette + cartes) s etire sur toute cette
   largeur : les deux lignes ont exactement la meme. */
.woocommerce-cart .woocommerce .cart-collaterals > .mpf-reassurance {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
  text-align: left;
}
.woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-titre { font-size: clamp(20px, 1.9vw, 27px); }
.woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-cartes { flex-wrap: nowrap; }
.woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-carte { width: clamp(64px, 6vw, 88px); }
/* La phrase ne dicte pas la largeur : elle prend celle de la ligne du dessus
   (width 0 + min-width 100 %), et s y replie, alignee a gauche. */
.woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-texte {
  flex: 1 0 100%;
  width: 0;
  min-width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .woocommerce-cart .woocommerce .cart-collaterals { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .woocommerce-cart .woocommerce .cart-collaterals .cart_totals { grid-column: 1; grid-row: 1; }
  .woocommerce-cart .woocommerce .cart-collaterals > .mpf-reassurance {
    grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; text-align: left;
  }
  .woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-texte { font-size: 15px; }
  .woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-cartes { flex-wrap: wrap; justify-content: flex-start; }
  .woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-carte { width: 58px; }
  .woocommerce-cart .cart-collaterals > .mpf-reassurance .mpf-reassurance-texte { text-align: left; }
}


/* Panier plus compact (23/09) : vignette reduite, marges hautes et basses
   des cellules resserrees, dans le tableau comme dans les totaux. */
.woocommerce-cart .woocommerce table.shop_table th { padding-top: 11px; padding-bottom: 11px; }
.woocommerce-cart .woocommerce table.shop_table td { padding-top: 10px; padding-bottom: 10px; }
.woocommerce-cart .woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: auto; }
.woocommerce-cart .woocommerce table.shop_table td.actions { padding-top: 12px; padding-bottom: 12px; }
.woocommerce-cart .woocommerce td.actions .coupon { margin-bottom: 0; }

/* Filets des totaux (panier et commande) : les libelles portaient en plus le
   filet bas des en-tetes de tableau, d ou un trait double a gauche seulement.
   Un seul filet, en haut de chaque ligne, sur toute la largeur. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table th { border-bottom: 0; }
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table td { border-top: 1px solid var(--wp--preset--color--trait); }
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr:first-child td { border-top: 0; }

/* Commande plus compacte (23/09) : memes cellules que le panier, titres et
   zone de commentaire resserres. */
.woocommerce-checkout .woocommerce table.shop_table th { padding-top: 11px; padding-bottom: 11px; }
.woocommerce-checkout .woocommerce table.shop_table td { padding-top: 10px; padding-bottom: 10px; }
.woocommerce-checkout .woocommerce #customer_details h3 { margin: 0 0 12px; }
.woocommerce-checkout .woocommerce .woocommerce-additional-fields h3 { margin: 8px 0 12px; }
.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row { margin-bottom: 12px; }
.woocommerce-checkout .woocommerce #order_comments { min-height: 0; height: 76px; }
.woocommerce-checkout .woocommerce .woocommerce-additional-fields .form-row { margin-bottom: 20px; }

/* Recapitulatif de la commande (23/09) : sous-total et TVA a la taille de
   leur libelle, sans gras ; « Total TTC » a la taille et au gras du montant. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td strong,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td .amount {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--wp--preset--color--encre);
}
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td strong,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}


/* Accueil — « Etes-vous concerne ? » (23/09, v3). Bande pleine largeur
   blanche sur le fond gris de la page ; cartes des questions en bleu encre,
   texte blanc, choix coche en laiton comme le bouton d achat. En tete : surtitre
   laiton, titre sur une ligne, chapo. Puis les quatre questions en cartes
   blanches, deux par deux, et le resultat sur une ligne : texte a gauche,
   bouton a droite. Choix Oui / Non en boutons segmentes. */
.mpf-surtitre {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-diag-tete { margin: 0 0 28px; }
.mpf-diag-tete h2 { margin: 0 0 12px; }
.mpf-diag-chapo { margin: 0; max-width: 62rem; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-diag-form { margin: 0; }
.mpf-diag-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mpf-diag-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "question choix" "aide choix";
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--encre);
  min-inline-size: 0;
}
.mpf-diag-q legend {
  grid-area: question;
  float: left;                    /* sort la legende du coin du fieldset pour la placer dans la grille */
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
}
.mpf-diag-num {
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  color: var(--wp--preset--color--laiton);
}
.mpf-diag-aide {
  grid-area: aide;
  margin: 0 0 0 26px;             /* aligne sur le texte de la question, apres le numero */
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.4;
  color: rgba(255, 255, 255, .72);
}
.mpf-diag-choix {
  grid-area: choix;
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  overflow: hidden;
}
.mpf-diag-choix label { position: relative; margin: 0; cursor: pointer; }
.mpf-diag-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mpf-diag-choix span {
  display: block;
  min-width: 58px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.mpf-diag-choix label + label span { border-left: 1px solid rgba(255, 255, 255, .55); }
.mpf-diag-choix label:hover span { background: rgba(255, 255, 255, .12); }
.mpf-diag-choix input:checked + span { background: var(--wp--preset--color--laiton); color: #ffffff; }
.mpf-diag-choix input:focus-visible + span { outline: 2px solid #ffffff; outline-offset: -2px; }
.mpf-diag-resultat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  border-left: 4px solid var(--wp--preset--color--trait);
  background: var(--wp--preset--color--papier);
  transition: border-color .2s ease;
}
.mpf-diag-resultat.mpf-diag-concerne { border-left-color: var(--wp--preset--color--laiton); }
.mpf-diag-resultat.mpf-diag-libre { border-left-color: var(--wp--preset--color--valide); }
.mpf-diag-texte-resultat { flex: 1 1 28rem; min-width: 0; }
.mpf-diag-verdict {
  margin: 0;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--encre);
}
/* Situations concernees en etiquettes, sur une ligne. */
.mpf-diag-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.mpf-diag-liste[hidden] { display: none; }
.mpf-diag-liste li {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--wp--preset--color--laiton);
  border-radius: 999px;
  font-size: 14px;
  color: var(--wp--preset--color--encre);
  background: var(--wp--preset--color--panneau);
}
.mpf-diag-suite { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--wp--preset--color--encre-doux); }
.mpf-diag-bouton {
  flex: 0 0 auto;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: var(--wp--preset--color--panneau) !important;   /* les liens du contenu sont en laiton : le texte du bouton reste blanc */
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.mpf-diag-bouton:hover { background: var(--wp--preset--color--laiton-fonce); }
.mpf-diag-bouton:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 3px; }
@media (max-width: 1000px) {
  .mpf-diag-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mpf-diag-q { grid-template-columns: minmax(0, 1fr); grid-template-areas: "question" "aide" "choix"; row-gap: 10px; padding: 14px 16px; }
  .mpf-diag-choix { justify-self: start; margin-left: 26px; }
  .mpf-diag-resultat { padding: 16px; }
  .mpf-diag-bouton { width: 100%; box-sizing: border-box; text-align: center; }
}


/* Accueil — « Ce que contient le kit » (23/09). Sur le fond gris de la page,
   entre deux bandes blanches. Sept cartes blanches en grille 4 x 2 : pastille
   du format en mono, titre Newsreader, usage en une phrase. La huitieme
   cellule, en bleu encre, porte l appel a l action et referme la grille. */
.mpf-contenu-tete { margin: 0 0 28px; }
.mpf-contenu-tete h2 { margin: 0 0 12px; }
.mpf-contenu-chapo { margin: 0; max-width: 62rem; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-contenu-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mpf-contenu-doc,
.mpf-contenu-action {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
  border-radius: 12px;
}
.mpf-contenu-doc {
  border: 1px solid var(--wp--preset--color--trait);
  background: var(--wp--preset--color--panneau);
}
.mpf-contenu-format {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--encre);
  background: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--trait);
}
.mpf-contenu-doc h3 {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--encre);
}
.mpf-contenu-doc p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--wp--preset--color--encre-doux); }
.mpf-contenu-action { background: var(--wp--preset--color--encre); color: #ffffff; }
.mpf-contenu-action-titre {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.mpf-contenu-action p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.mpf-contenu-action .mpf-contenu-action-titre { margin: 0 0 8px; font-size: 20px; line-height: 1.25; color: #ffffff; }   /* passe devant « .mpf-contenu-action p » */
.mpf-contenu-bouton {
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 22px;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: #ffffff !important;              /* les liens du contenu sont en laiton : le texte du bouton reste blanc */
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.mpf-contenu-bouton:hover { background: var(--wp--preset--color--laiton-fonce); }
.mpf-contenu-bouton:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.mpf-contenu-note { margin: 20px 0 0; max-width: 62rem; font-size: var(--wp--preset--font-size--petit); line-height: 1.5; color: var(--wp--preset--color--encre-doux); }
/* Case d action seule sur sa rangee (8 documents par exemple) : elle devient
   une bande sur toute la largeur, texte a gauche, bouton a droite. */
@media (min-width: 1101px) {
  .mpf-contenu-action:nth-child(4n+1):last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .mpf-contenu-action:nth-child(4n+1):last-child p:not(.mpf-contenu-action-titre) { flex: 1 1 20rem; margin-bottom: 0; }
  .mpf-contenu-action:nth-child(4n+1):last-child .mpf-contenu-bouton { margin: 0 0 0 auto; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .mpf-contenu-action:nth-child(2n+1):last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .mpf-contenu-action:nth-child(2n+1):last-child p:not(.mpf-contenu-action-titre) { flex: 1 1 20rem; margin-bottom: 0; }
  .mpf-contenu-action:nth-child(2n+1):last-child .mpf-contenu-bouton { margin: 0 0 0 auto; }
}
@media (max-width: 1100px) { .mpf-contenu-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mpf-contenu-grille { grid-template-columns: minmax(0, 1fr); }
  .mpf-contenu-doc, .mpf-contenu-action { padding: 16px; }
}

/* Diagnostic : les etiquettes des situations annoncees par un intitule. */
.mpf-diag-situations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.mpf-diag-situations[hidden] { display: none; }
.mpf-diag-situations-titre { font-size: 14px; color: var(--wp--preset--color--encre-doux); }
.mpf-diag-situations .mpf-diag-liste { margin: 0; }


/* Fiche produit : sections liees au produit (diagnostic, contenu du kit),
   entre le resume et les onglets. Le diagnostic dans un panneau blanc arrondi
   sur le fond gris de la fiche ; le contenu du kit directement sur le fond. */
.mpf-fiche-section { margin-top: clamp(32px, 5vw, 56px); margin-bottom: 0; }
.mpf-fiche-section + .wp-block-woocommerce-product-details,
.mpf-fiche-section + .mpf-fiche-section { margin-top: clamp(32px, 5vw, 56px); }
.mpf-fiche-diag {
  box-sizing: border-box;          /* le panneau garde la largeur du contenu, marges interieures comprises */
  padding: clamp(20px, 4vw, 44px);
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 16px;
  background: var(--wp--preset--color--panneau);
}
@media (max-width: 600px) { .mpf-fiche-diag { padding: 16px; border-radius: 12px; } }

/* Accueil — « Qui est concerne par nos services ? » (23/09). Bande blanche
   pleine largeur, entre « Nos kits » et la suite. Deux cartes de meme hauteur :
   entreprises sur gris clair, agences sur bleu encre (le profil premium).
   Coches laiton, bouton laiton en pied de carte. */
.mpf-concernes-tete { margin: 0 0 28px; }
.mpf-concernes-tete h2 { margin: 0 0 12px; }
.mpf-concernes-chapo { margin: 0; max-width: 62rem; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-concernes-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mpf-profil {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 16px;
  box-sizing: border-box;
}
.mpf-profil-entreprise { background: var(--wp--preset--color--papier); border: 1px solid var(--wp--preset--color--trait); }
.mpf-profil-agence { background: var(--wp--preset--color--encre); color: #ffffff; }
.mpf-profil .mpf-surtitre { margin-bottom: 12px; }
.mpf-profil-agence .mpf-surtitre { color: var(--wp--preset--color--laiton); }
.mpf-profil h3 {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--wp--preset--color--encre);
}
.mpf-profil-agence h3 { color: #ffffff; }
.mpf-profil-texte { margin: 0 0 18px; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-profil-agence .mpf-profil-texte { color: rgba(255, 255, 255, .78); }
.mpf-profil-points { margin: 0 0 24px; padding: 0; list-style: none; }
.mpf-profil-points li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.45;
  color: var(--wp--preset--color--encre);
}
.mpf-profil-agence .mpf-profil-points li { color: #ffffff; }
.mpf-profil-points li::before {           /* coche dessinee en CSS, couleur laiton */
  content: "";
  position: absolute;
  left: 2px;
  top: .3em;
  width: 6px;
  height: 11px;
  border: solid var(--wp--preset--color--laiton);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mpf-profil-bouton {
  margin-top: auto;
  align-self: flex-start;
  box-sizing: border-box;
  min-width: min(100%, 19rem);   /* les deux boutons a la meme largeur */
  text-align: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: #ffffff !important;              /* les liens du contenu sont en laiton : le texte du bouton reste blanc */
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.mpf-profil-bouton:hover { background: var(--wp--preset--color--laiton-fonce); }
.mpf-profil-bouton:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 3px; }
.mpf-profil-agence .mpf-profil-bouton:focus-visible { outline-color: #ffffff; }
/* Les deux cartes glissent depuis les bords de l ecran quand on les atteint
   (mecanisme .mpf-apparait de mpf.js) : entreprises depuis la gauche, agences
   depuis la droite, mouvement long et amorti. La bande coupe ce qui depasse
   pendant le glissement : aucun defilement horizontal. */
.mpf-concernes-section { overflow-x: clip; }
.mpf-apparait.mpf-glisse-gauche { transform: translate3d(-90px, 0, 0); }
.mpf-apparait.mpf-glisse-droite { transform: translate3d(90px, 0, 0); }
.mpf-apparait.mpf-glisse-gauche,
.mpf-apparait.mpf-glisse-droite {
  transition: opacity 1.3s cubic-bezier(.22, 1, .36, 1), transform 1.3s cubic-bezier(.22, 1, .36, 1);
}
.mpf-profil.mpf-apparait { transition-duration: 1.8s; }
.mpf-profil.mpf-apparait.mpf-vu + .mpf-profil.mpf-apparait.mpf-vu { transition-delay: .35s; }
.mpf-apparait.mpf-glisse-gauche.mpf-vu,
.mpf-apparait.mpf-glisse-droite.mpf-vu { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mpf-apparait.mpf-glisse-gauche, .mpf-apparait.mpf-glisse-droite { transform: none; transition: none; }
}
@media (max-width: 900px) { .mpf-concernes-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .mpf-profil-bouton { align-self: stretch; text-align: center; } }

/* Accueil — « Le fonctionnement » (23/09). Sur le fond gris, apres la bande
   blanche « Qui est concerne ». Trois etapes en colonnes, reliees par un filet
   laiton qui passe derriere les numeros (grands chiffres Newsreader en laiton,
   pastille blanche). Sur telephone : colonne unique, filet vertical. */
.mpf-etapes-tete { margin: 0 0 36px; }
.mpf-etapes-tete h2 { margin: 0 0 12px; }
.mpf-etapes-chapo { margin: 0; max-width: 62rem; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-etapes-liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mpf-etapes-liste::before {                /* le filet qui relie les etapes */
  content: "";
  position: absolute;
  top: 32px;
  left: 32px;
  right: calc((100% - 2 * clamp(24px, 4vw, 56px)) / 3 - 32px);
  height: 1px;
  background: var(--wp--preset--color--laiton);
  opacity: .6;
}
.mpf-etape { position: relative; margin: 0; }
.mpf-etape-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 0 20px;
  border: 1px solid var(--wp--preset--color--laiton);
  border-radius: 50%;
  background: var(--wp--preset--color--panneau);
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: 26px;
  font-weight: 600;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-etape h3 {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--encre);
}
.mpf-etape p { margin: 0; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-etapes-suite {
  margin: 36px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--wp--preset--color--laiton);
  border-radius: 0 12px 12px 0;
  background: var(--wp--preset--color--panneau);
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.5;
  color: var(--wp--preset--color--encre);
}
/* Les etapes entrent depuis la droite, l une apres l autre (mecanisme
   .mpf-apparait + .mpf-glisse-droite) ; la bande coupe ce qui depasse. */
.mpf-etapes-section { overflow-x: clip; }
/* plus precis que la regle generale « .mpf-vu + .mpf-vu » (0,14 s), qui l emportait */
.mpf-etapes-liste .mpf-etape.mpf-apparait.mpf-vu:nth-child(2) { transition-delay: .25s; }
.mpf-etapes-liste .mpf-etape.mpf-apparait.mpf-vu:nth-child(3) { transition-delay: .5s; }
.mpf-apparait.mpf-fondu { transform: none; transition: opacity 1.4s ease 1.1s; }   /* « Et ensuite ? », en dernier */
/* Le filet qui relie les etapes se dessine apres l arrivee des pastilles. */
.mpf-etapes-liste:has(.mpf-apparait)::before { opacity: 0; transition: opacity 1.2s ease .6s; }
.mpf-etapes-liste:has(.mpf-etape.mpf-vu)::before { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .mpf-etapes-liste:has(.mpf-apparait)::before { opacity: .6; transition: none; } }
@media (max-width: 900px) {
  .mpf-etapes-liste { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mpf-etapes-liste::before { display: none; }
  /* un filet par etape, du numero jusqu au numero suivant : rien sous le dernier */
  .mpf-etape:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 64px; bottom: -28px; width: 1px; background: var(--wp--preset--color--laiton); opacity: .6; }
  .mpf-etape { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; }
  .mpf-etape-num { grid-row: 1 / span 2; margin: 0; }
  .mpf-etape h3 { align-self: center; margin-top: 16px; }
}
@media (max-width: 600px) {
  .mpf-etape { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .mpf-etape-num { width: 48px; height: 48px; font-size: 20px; }
  .mpf-etape:not(:last-child)::after { left: 24px; top: 48px; }
  .mpf-etape h3 { margin-top: 10px; }
}

/* Accueil — « Questions frequentes » (23/09). Bande blanche. A gauche, un
   accordeon natif (details / summary) : filet entre les questions, signe +
   laiton qui pivote a l ouverture. A droite, l encart « Une autre question ? »
   sur fond gris, avec le formulaire de contact ([mpf_contact]). */
.mpf-faq-tete { margin: 0 0 28px; }
.mpf-faq-tete h2 { margin: 0; }
.mpf-faq-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.mpf-faq-item { border-top: 1px solid var(--wp--preset--color--trait); }
.mpf-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--trait); }
.mpf-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.mpf-faq-item summary::-webkit-details-marker { display: none; }
.mpf-faq-item summary::after {             /* le signe +, qui devient x a l ouverture */
  content: "+";
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--wp--preset--color--laiton-fonce);
  transition: transform .2s ease;
}
.mpf-faq-item[open] summary::after { transform: rotate(45deg); }
.mpf-faq-item summary:focus { outline: none; }   /* pas de cadre au clic de souris... */
.mpf-faq-item summary:focus-visible { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 4px; }   /* ...mais un cadre laiton au clavier */
.mpf-faq-item summary h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--encre);
}
.mpf-faq-reponse p { margin: 0 0 20px; font-size: var(--wp--preset--font-size--normal); line-height: 1.6; color: var(--wp--preset--color--encre-doux); }
.mpf-faq-contact {
  position: sticky;
  top: 32px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 16px;
  background: var(--wp--preset--color--papier);
}
.mpf-faq-contact h3 {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  color: var(--wp--preset--color--encre);
}
.mpf-faq-contact > p { margin: 0 0 18px; font-size: var(--wp--preset--font-size--normal); line-height: 1.5; color: var(--wp--preset--color--encre-doux); }
/* Formulaire de contact (aussi utilisable sur la page Contact). */
.mpf-contact p { margin: 0 0 14px; }
.mpf-contact label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--wp--preset--color--encre); }
.mpf-contact input[type="text"],
.mpf-contact input[type="email"],
.mpf-contact textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 12px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 16px;
  line-height: 1.4;
}
.mpf-contact textarea { resize: vertical; min-height: 120px; }
.mpf-contact input:focus-visible,
.mpf-contact textarea:focus-visible { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 2px; }
.mpf-contact .mpf-contact-accord label { position: relative; padding-left: 28px; font-weight: 400; font-size: 14px; line-height: 1.45; }
.mpf-contact .mpf-contact-accord input { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; margin: 0; accent-color: var(--wp--preset--color--laiton); }
.mpf-contact .mpf-contact-accord a { color: var(--wp--preset--color--laiton-fonce); }
.mpf-contact-turnstile { min-height: 65px; margin: 0 0 14px; }
.mpf-contact-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mpf-contact-bouton {
  width: 100%;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--laiton);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mpf-contact-bouton:hover { background: var(--wp--preset--color--laiton-fonce); }
.mpf-contact-bouton:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 3px; }
.mpf-contact-retour { margin: 0 0 16px !important; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.45; }
.mpf-contact-ok { background: var(--wp--preset--color--valide-fond); color: var(--wp--preset--color--valide); }
.mpf-contact-erreur { background: var(--wp--preset--color--alerte-fond); color: var(--wp--preset--color--alerte); }
.mpf-contact-page { max-width: 40rem; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--wp--preset--color--panneau); border: 1px solid var(--wp--preset--color--trait); }
@media (max-width: 900px) {
  .mpf-faq-grille { grid-template-columns: minmax(0, 1fr); }
  .mpf-faq-contact { position: static; }
}

/* Page Contact (23/09), dans la charte de l accueil. Grille : en tete sur toute
   la largeur, puis coordonnees sur bleu encre (5/12) et formulaire sur blanc
   (7/12), cartes de meme hauteur ; renvoi a la FAQ en pied. Le contenu de la
   page est aligne sur la largeur « wide », comme le titre. */
body.page .mpf-contact-page-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: stretch;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}
.mpf-contact-page-tete { grid-column: 1 / -1; margin: 0 0 12px; }
.mpf-contact-page-tete h2 { margin: 0 0 12px; }
.mpf-contact-page-chapo { margin: 0; max-width: 62rem; font-size: var(--wp--preset--font-size--normal); line-height: 1.55; color: var(--wp--preset--color--encre-doux); }
.mpf-contact-coord {
  box-sizing: border-box;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 16px;
  background: var(--wp--preset--color--encre);
  color: #ffffff;
}
.mpf-contact-coord dl { margin: 0; }
.mpf-contact-coord dt {
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton);
}
.mpf-contact-coord dd {
  margin: 0 0 24px;
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}
.mpf-contact-coord dd:last-child { margin-bottom: 0; }
.mpf-contact-coord a { color: #ffffff !important; text-decoration-color: var(--wp--preset--color--laiton); text-underline-offset: 3px; }
.mpf-contact-coord a:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.mpf-contact-coord .mpf-contact-courriel {
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.mpf-contact-carte {
  box-sizing: border-box;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 16px;
  background: var(--wp--preset--color--panneau);
}
.mpf-contact-carte h3 {
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--moyen);
  font-weight: 600;
  color: var(--wp--preset--color--encre);
}
.mpf-contact-carte .mpf-contact p:last-child { margin-bottom: 0; }
.mpf-contact-page-faq {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--wp--preset--color--laiton);
  border-radius: 0 12px 12px 0;
  background: var(--wp--preset--color--panneau);
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.5;
  color: var(--wp--preset--color--encre);
}
.mpf-contact-page-faq a { color: var(--wp--preset--color--laiton-fonce); }
@media (max-width: 900px) {
  body.page .mpf-contact-page-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Filtre de la boutique par type d offre (mpf-boutique.php) : des liens, habilles
   comme les puces de « Nos kits ». */
.mpf-filtres a {
  display: inline-block;
  font-size: 15px;
  line-height: 1.2;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--trait);
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre) !important;   /* les liens du contenu sont en laiton */
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mpf-filtres a:hover { border-color: var(--wp--preset--color--encre); }
.mpf-filtres a:focus-visible { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 2px; }
.mpf-filtres a[aria-current="page"] { background: var(--wp--preset--color--encre); border-color: var(--wp--preset--color--encre); color: #fff !important; }
.mpf-filtres a .mpf-filtre-nombre { opacity: .7; margin-left: 4px; }
@media (max-width: 782px) { .mpf-filtres a { flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 8px 13px; } }
.mpf-filtres-type { width: 100%; }
/* Boutique et categories : colonne des filtres a gauche, produits a droite
   (mpf-boutique.php). Colonne collante sur ordinateur ; elle descend sous
   l en-tete quand celui-ci est affiche. Sous 782 px : filtres au-dessus des
   produits, en lignes qui defilent, comme sur l accueil. */
.wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  column-gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
.wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > * { grid-column: 1 / -1; margin-block-start: 0; }
.wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > .mpf-filtres-colonne { grid-column: 1; grid-row: span 20; }
.wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) > :not(.mpf-filtres-colonne, .wc-block-components-notices) { grid-column: 2; }
.mpf-filtres-colonne {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: top .32s ease;
}
body:has(header.mpf-entete-defile:not(.mpf-entete-cachee)) .mpf-filtres-colonne { top: calc(var(--mpf-entete-h, 100px) + 24px); }
.mpf-filtres-titre {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
}
.mpf-filtres-colonne .mpf-filtres { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; }
.mpf-filtres-colonne .mpf-filtres a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 14px;
}
/* Boutique et categories : compteur et tri au-dessus des produits. Le compteur,
   en petites capitales discretes, s aligne sur le bord gauche de la premiere
   carte ; le tri reprend le dessin des champs du site. */
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-group:has(> .wc-block-product-results-count) {
  align-items: center;
  margin-bottom: 16px;
}
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag):has(.mpf-filtres-colonne) .wp-block-group:has(> .wc-block-product-results-count) {
  padding-left: calc(256px + clamp(28px, 3vw, 44px));
}
/* Classe du bloc doublee : la feuille en ligne de WooCommerce passe apres le theme (regle 6). */
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-results-count.wc-block-product-results-count .woocommerce-result-count {
  margin: 0;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--encre-doux);
}
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-ordering { margin: 0; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-ordering select {
  max-width: 100%;
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--wp--preset--color--trait);
  border-radius: 8px;
  background: var(--wp--preset--color--panneau);
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 14px;
  cursor: pointer;
}
@media (max-width: 782px) {
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag):has(.mpf-filtres-colonne) .wp-block-group:has(> .wc-block-product-results-count) { padding-left: 0; }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-results-count.wc-block-product-results-count .woocommerce-result-count { font-size: 12px; }
  /* compteur et tri cote a cote s ils tiennent, l un sous l autre sinon */
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-group:has(> .wc-block-product-results-count) { flex-wrap: wrap; gap: 10px; }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-catalog-sorting { min-width: 0; max-width: 100%; }
}

/* Boutique et categories : une carte par ligne, en bandeau — image a gauche,
   nom et resume au centre, prix et bouton a droite. L image, bornee a 144 px,
   laisse voir trois a quatre produits par ecran. Les « Produits similaires » de
   la fiche gardent la grille (portee limitee aux archives). */
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template.columns-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "img titre prix" "img resume bouton";
  column-gap: 24px;
  align-items: start;
}
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wc-block-components-product-image { grid-area: img; margin: 0; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wp-block-post-title { grid-area: titre; margin: 2px 0 8px; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .mpf-carte-resume { grid-area: resume; margin: 0; -webkit-line-clamp: 3; line-clamp: 3; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price { grid-area: prix; justify-self: end; margin: 4px 0 12px; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price { margin: 0; text-align: right; }
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wc-block-components-product-button { grid-area: bouton; justify-self: end; align-self: end; margin: 0; align-items: flex-end; }
@media (max-width: 1024px) {
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template.columns-3 { grid-template-columns: minmax(0, 1fr); }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "img titre titre" "img resume resume" "img prix bouton";
    column-gap: 18px;
  }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .mpf-carte-resume { margin: 0 0 12px; }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price { justify-self: start; align-self: center; margin: 0; }
}
@media (max-width: 600px) {
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "img titre" "img prix" "resume resume" "bouton bouton";
    column-gap: 14px;
  }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price { align-self: start; margin: 0 0 12px; }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .mpf-carte-resume { margin: 12px 0 14px; }
  :is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.wc-block-product-template li.wc-block-product > .wc-block-components-product-button { justify-self: stretch; }
}
@media (max-width: 782px) {
  .wp-block-woocommerce-product-collection:has(> .mpf-filtres-colonne) { display: flex; flex-direction: column; gap: 12px; }   /* filtres, produits, pagination, encarts */
  .mpf-filtres-colonne { position: static; gap: 12px; margin: 0 0 24px; }
  .mpf-filtres-titre { display: none; }
  .mpf-filtres-colonne .mpf-filtres { flex-direction: row; margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px)); }
  .mpf-filtres-colonne .mpf-filtres a { display: inline-block; border-radius: 999px; padding: 8px 13px; }
}

/* Audit du 24/09. (1) Visionneuse d images de WooCommerce (PhotoSwipe) : sa
   feuille est retiree avec la loupe (mpf-boutique.php) ; son balisage, cache
   d ordinaire par cette feuille, s affichait sous le pied de page en boutons
   vides. Elle ne sert plus : masquee. (2) « Produits similaires » et grilles de
   produits : une seule colonne sur telephone (deux cartes de 148 px a 360 px). */
.pswp { display: none !important; }
@media (max-width: 600px) {
  ul.wc-block-product-template.columns-3,
  ul.wc-block-product-template__responsive.columns-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Sur telephone et petite tablette, aucune animation d apparition (meme seuil
   que le parallaxe du hero dans mpf.js, 782 px) : les blocs sont visibles d emblee,
   sans glissement ni fondu. En fin de feuille pour passer devant les regles
   d animation, quel que soit leur degre de precision. */
@media (max-width: 782px) {
  .mpf-apparait,
  .mpf-apparait.mpf-glisse-gauche,
  .mpf-apparait.mpf-glisse-droite,
  .mpf-apparait.mpf-fondu,
  .mpf-profil.mpf-apparait,
  .mpf-etapes-liste .mpf-etape.mpf-apparait {
    opacity: 1 !important;          /* !important : certaines regles d animation sont plus precises */
    transform: none !important;
    transition: none !important;
  }
  .mpf-etapes-liste:has(.mpf-apparait)::before { opacity: .6; transition: none; }
}

/* Rien ne deborde en largeur, quelle que soit la taille d ecran. */
img, video, iframe { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}