/* ==========================================================================
   Widgets MSA pour Elementor — mise en page uniquement.

   Ce fichier ne fixe aucune couleur : elles arrivent toutes par les contrôles
   de l'éditeur, dont les valeurs par défaut sont des jetons var(--msa-*).
   Les dimensions restent sur l'échelle base 8 de la charte.
   ========================================================================== */

/* Grille auto-remplie : jamais de colonne vide quand il y a peu de produits.
   Le min(…, 100%) évite le débordement sous la largeur minimale. */
.msa-ew-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--msa-space-24);
}

.msa-ew-carte {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: var(--msa-stroke-hair) solid transparent;
  border-radius: var(--msa-radius-sm);
  transition: box-shadow var(--msa-duration) var(--msa-ease);
}

.msa-ew-carte:hover,
.msa-ew-carte:focus-within {
  box-shadow: var(--msa-shadow-card);
}

.msa-ew-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.msa-ew-media img {
  width: 100%;
  height: 100%;
  /* `contain`, et non `cover` : les photos studio des constructeurs ne sont
     pas au 4/3, et `cover` en coupait les flancs — le vehicule sortait du
     cadre. Meme arbitrage que sur les cartes du catalogue (26/08/2026) : sur
     un catalogue de vehicules detoures, une fine marge vaut mieux qu'une roue
     amputee. Le fond blanc du cadre fait disparaitre la marge. */
  object-fit: contain;
}

.msa-ew-media {
  background: var(--msa-white);
}

/* L'emplacement en attente garde son aplat sombre : lui doit se voir. */
.msa-ew-media:has(.msa-ew-media__attente) {
  background: transparent;
}

.msa-ew-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--msa-space-8);
  padding: var(--msa-space-16);
}

.msa-ew-marque {
  margin: 0;
  font-family: var(--msa-font-cond);
  font-size: var(--msa-fs-caption);
  letter-spacing: var(--msa-ls-eyebrow);
  text-transform: uppercase;
}

/* .msa-h3 : Archivo 700, pas 800 — la graisse black est réservée aux H1/H2. */
.msa-ew-titre {
  margin: var(--msa-space-8) 0 0;
  font-family: var(--msa-font-display);
  font-size: var(--msa-fs-h3);
  font-weight: var(--msa-fw-bold);
  line-height: var(--msa-lh-heading);
}

/* La référence fait de la carte entière un lien (.msa-card est un <a>).
   Ici le lien du titre couvre la carte par un pseudo-élément : la zone
   tactile atteint la taille de la carte au lieu des 24 px de la ligne de
   texte — règle R10, « 44 × 44 px sans exception ».
   L'image et le bouton repassent au-dessus pour rester cliquables. */
.msa-ew-titre a {
  color: inherit;
  text-decoration: none;
}

.msa-ew-titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.msa-ew-media,
.msa-ew-bouton {
  position: relative;
  z-index: 1;
}

/* Relevé de .msa-card__price : taille H3, graisse black, chiffres tabulaires.
   Les chiffres tabulaires alignent les prix d'une carte à l'autre. */
.msa-ew-prix {
  margin-top: var(--msa-space-12);
  font-family: var(--msa-font-display);
  font-size: var(--msa-fs-h3);
  font-weight: var(--msa-fw-black);
  line-height: var(--msa-lh-heading);
  font-variant-numeric: tabular-nums;
}

/* Relevé de .msa-btn : Archivo 700 à 15 px, capitales, interlettrage 0.05em,
   padding 16/24, rayon 2 px, hauteur minimale tactile. */
.msa-ew-bouton,
.msa-ew-action {
  display: inline-flex;
  min-height: var(--msa-tap-min);
  align-items: center;
  justify-content: center;
  gap: var(--msa-space-8);
  padding: var(--msa-space-16) var(--msa-space-24);
  border: 0;
  border-radius: var(--msa-radius-sm);
  font-family: var(--msa-font-display);
  font-size: 0.9375rem;
  font-weight: var(--msa-fw-bold);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.msa-ew-bouton {
  margin-top: auto;
  align-self: flex-start;
}

.msa-ew-bouton:hover,
.msa-ew-action:hover {
  filter: brightness(0.92);
}

.msa-ew-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msa-space-12);
}

/* Le troisieme appel a l'action est en contour, comme le prevoit la charte :
   deux aplats et un contour, jamais trois aplats.

   La regle ne posait que `border-color`, alors que `.msa-ew-action` met
   `border: 0` : la bordure n'avait donc aucune epaisseur et le bouton
   s'affichait en texte nu a cote de deux boutons pleins. Mesure du
   26/08/2026 sur /contact/ : fond transparent, bordure 0 px, hauteur 56 px —
   la place d'un bouton, sans son apparence. */
.msa-ew-action--contact {
  background-color: transparent;
  border: var(--msa-stroke-card) solid currentColor;
}

/* --- Voile du héros -------------------------------------------------------
   Relevé de .msa-hero__veil : dégradé horizontal, sombre du côté du texte,
   transparent du côté de la photo. La charte proscrit le voile uniforme sur
   toute l'image — il faut un dégradé.
   Elementor ne sait pas décrire un dégradé en style atomique : la règle vit
   donc ici, dans du CSS que le linter de charte peut lire.
   -------------------------------------------------------------------------- */

.msa-ew-voile-hero {
  background: linear-gradient(
    90deg,
    var(--msa-black-96) 0%,
    rgba(9, 9, 9, 0.82) 42%,
    rgba(9, 9, 9, 0.15) 100%
  );
}

/* --- Icônes du sprite MSA ------------------------------------------------ */

.msa-ew-icone {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.msa-ew-icone-lien {
  display: inline-flex;
  min-width: var(--msa-tap-min);
  min-height: var(--msa-tap-min);
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* --- Marques -------------------------------------------------------------- */

.msa-ew-marques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msa-space-16);
}

.msa-ew-marque-lien {
  display: inline-flex;
  min-height: var(--msa-tap-min);
  align-items: center;
  justify-content: center;
  padding: var(--msa-space-12) var(--msa-space-16);
  border: var(--msa-stroke-hair) solid transparent;
  border-radius: var(--msa-radius-sm);
  font-family: var(--msa-font-cond);
  font-size: var(--msa-fs-small);
  letter-spacing: var(--msa-ls-eyebrow);
  text-decoration: none;
  text-transform: uppercase;
}

.msa-ew-marque-logo {
  width: auto;
  max-height: 32px;
}

/* Bande de logos — charte, site/index.html : cases blanches bordées de même
   largeur, logos en niveaux de gris qui passent en couleur au survol.
   Ne s'applique que si la bande porte au moins un logo : une marque sans logo
   garde sa pastille texte ci-dessus. */
/* Même piège que la grille de produits, plus bas : un widget Elementor prend
   la largeur de son contenu, et une grille `auto-fill` en déduit une seule
   colonne. Mesuré le 01/10 : 353 px au lieu de 1 206 sur l'accueil. */
.elementor-widget-msa-marques,
.elementor-widget-msa-marques > .elementor-widget-container {
  width: 100%;
  align-self: stretch;
}

.msa-ew-marques:has(.msa-ew-marque-logo) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--msa-space-12);
}

/* Fond et couleur de bordure restent aux réglages Elementor du widget. */
.msa-ew-marques:has(.msa-ew-marque-logo) .msa-ew-marque-lien {
  min-height: var(--msa-space-80);
  padding: var(--msa-space-12) var(--msa-space-16);
}

/* Hauteur ET largeur plafonnées : sans la seconde, un logo en longueur
   (Sea-Doo, Quicksilver) écrase un écusson presque carré (Ducati). */
.msa-ew-marques .msa-ew-marque-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 150px);
  max-height: 34px;
  object-fit: contain;
}

.msa-ew-marques .msa-ew-marque-logo--compact {
  max-height: 52px;
}

/* Niveaux de gris seulement là où le survol existe. Au doigt, il n'y a pas de
   survol : un logo gris le resterait — décision du fondateur le 01/10/2026,
   en couleur sur mobile. */
@media (hover: hover) and (pointer: fine) {
  /* Gris seul, sans opacité : à 80 %, les logos à traits fins (Crownline,
     Royal Enfield) devenaient pâles au point de sembler désactivés. */
  .msa-ew-marques .msa-ew-marque-logo {
    filter: grayscale(1);
    transition: filter var(--msa-duration) var(--msa-ease);
  }

  .msa-ew-marque-lien:hover .msa-ew-marque-logo,
  .msa-ew-marque-lien:focus-visible .msa-ew-marque-logo {
    filter: none;
  }
}

/* Colonne latérale des univers et téléphone : deux logos par ligne plutôt
   qu'un seul étiré sur toute la largeur. */
@media (max-width: 600px) {
  .msa-ew-marques:has(.msa-ew-marque-logo) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--msa-space-8);
  }

  /* Marge réduite : sur l'accueil, la bande vit dans une carte de 244 px, et
     chaque pixel de marge est pris sur des logos déjà petits. */
  .msa-ew-marques:has(.msa-ew-marque-logo) .msa-ew-marque-lien {
    min-height: 64px;
    padding: var(--msa-space-8);
  }
}

/* --- Catégories ----------------------------------------------------------- */

.msa-ew-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msa-space-12);
}

.msa-ew-categorie {
  display: inline-flex;
  min-height: var(--msa-tap-min);
  align-items: center;
  padding: var(--msa-space-8) var(--msa-space-16);
  border: var(--msa-stroke-hair) solid currentColor;
  border-radius: var(--msa-radius-sm);
  font-family: var(--msa-font-text);
  font-size: var(--msa-fs-body);
  text-decoration: none;
}

.msa-ew-marque-lien:hover,
.msa-ew-categorie:hover {
  filter: brightness(0.92);
}

/* --- Galerie ---------------------------------------------------------------
   Le nombre de colonnes, l'écart et le cadrage viennent des contrôles : ils
   changent d'une fiche à l'autre. Ici, seulement ce qui ne se règle pas.
   -------------------------------------------------------------------------- */

.msa-ew-galerie {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msa-ew-galerie-vue {
  overflow: hidden;
  border: var(--msa-stroke-hair) solid transparent;
  border-radius: var(--msa-radius-sm);
}

/* Le lien doit remplir la vignette, sinon la zone cliquable se limite à la
   ligne de base de l'image et tombe sous les 44 px de la règle R10. */
.msa-ew-galerie-vue > a {
  display: block;
  width: 100%;
  height: 100%;
}

.msa-ew-galerie-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--msa-duration) var(--msa-ease);
}

.msa-ew-galerie-vue:hover .msa-ew-galerie-image,
.msa-ew-galerie-vue:focus-within .msa-ew-galerie-image {
  transform: scale(1.04);
}

/* --- Plan d'accès ---------------------------------------------------------
   La hauteur vient du contrôle Elementor : elle n'est pas la même sur mobile
   et sur bureau. Ici, seulement ce qui ne se règle pas.
   -------------------------------------------------------------------------- */

/* Un iframe a une largeur intrinsèque de 300 px, et la fiche magasin est une
   colonne flex en `align-items: flex-start`. Sans cette règle, le plan reste
   à 300 px au milieu d'une carte de 638. */
.elementor-widget-msa-plan {
  width: 100%;
  align-self: stretch;
}

.msa-ew-plan {
  display: block;
  width: 100%;
  border: var(--msa-stroke-hair) solid transparent;
  border-radius: var(--msa-radius-sm);
  /* Un iframe est en ligne par défaut : sans cela, la ligne de base réserve
     quelques pixels sous la carte et le filet paraît décollé. */
  vertical-align: bottom;
}

.msa-ew-plan-lien {
  display: inline-flex;
  min-height: var(--msa-tap-min);
  align-items: center;
  margin-top: var(--msa-space-8);
  font-family: var(--msa-font-display);
  font-size: var(--msa-fs-small);
  font-weight: var(--msa-fw-bold);
  letter-spacing: var(--msa-ls-eyebrow);
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

/* --- Formulaire ----------------------------------------------------------- */

.msa-ew-formulaire {
  border-radius: var(--msa-radius-sm);
}

.msa-ew-vide {
  padding: var(--msa-space-24);
  border: var(--msa-stroke-hair) dashed var(--msa-border);
  color: var(--msa-text-muted);
  font-family: var(--msa-font-text);
}

@media (max-width: 1024px) {
  .msa-ew-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .msa-ew-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Finition mobile — 17/08/2026.
   ========================================================================== */

@media (max-width: 640px) {

  /*
   * Les actions commerciales s'empilaient à la largeur de leur libellé :
   * WhatsApp 278 px, Appeler 246 px, Itinéraire 298 px, en escalier. Sur un
   * téléphone, une pile d'actions se lit et se vise mieux à largeur constante
   * — c'est le motif `.msa-btn--block` de la charte.
   */
  .msa-ew-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .msa-ew-actions > .msa-ew-action {
    width: 100%;
  }
}

/*
 * Emplacement photo en attente.
 *
 * Reprend exactement le traitement des cartes du catalogue : aplat graphite,
 * mention en Barlow Condensed calée en bas à gauche, et --msa-steel-legible
 * pour le contraste (--msa-steel ne donne que 3,34:1 sur ce fond).
 */
.msa-ew-media__attente {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--msa-space-12);
  background: var(--msa-graphite);
  color: var(--msa-steel-legible);
  font-family: var(--msa-font-cond);
  font-size: 13px;
  font-weight: var(--msa-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  /*
   * Comme pour les cartes du catalogue : un aplat en 4/3 mange 260 px par
   * carte sans rien apprendre. Le 16/9 ne s'applique qu'aux emplacements
   * vides — dès qu'une photo existe, le cadrage 4/3 de la charte est gardé.
   */
  .msa-ew-media:has(.msa-ew-media__attente) {
    aspect-ratio: 16 / 9;
  }
}

/*
 * Prix en promotion.
 *
 * `<ins>` est souligné par défaut par le navigateur : dans les cartes du
 * widget, le prix courant se lisait comme un lien. Le thème traite déjà le cas
 * pour la fiche produit et les cartes du catalogue
 * (.msa-product-price ins, .msa-product-card__price ins) ; le widget avait été
 * oublié. Le prix barré reste du texte secondaire, le prix courant garde la
 * couleur du texte — le rouge est réservé aux erreurs.
 */
.msa-ew-prix ins {
  color: var(--msa-black);
  text-decoration: none;
}

.msa-ew-prix del {
  color: var(--msa-steel);
}

/* ---- Largeur du widget dans un conteneur Elementor -----------------------
   Un conteneur Elementor est un `display: flex`, et ses widgets y sont des
   elements flexibles en `flex: 0 1 auto` : leur largeur vient donc du
   contenu, pas du conteneur.

   Pour la grille en remplissage automatique — `repeat(auto-fit, minmax(...))`,
   le reglage par defaut — c'est un cercle : `auto-fit` a besoin de connaitre
   la largeur disponible, mais cette largeur est justement celle qu'il doit
   produire. La grille retombait alors sur une seule colonne. Mesure du
   26/08/2026 sur /marine/ : le widget faisait 302 px dans un conteneur de
   912, et les trois produits mis en avant s'empilaient en colonne avec
   600 px de vide a droite.

   Le widget a colonnes imposees n'etait pas concerne : trois pistes de 288 px
   font une largeur intrinseque de 912, qui remplit le conteneur par accident.

   Poser la largeur ici plutot que dans les donnees Elementor : la composition
   du client n'a pas a etre reecrite pour compenser un defaut du widget. */
.elementor-widget-msa-grille-produits,
.elementor-widget-msa-grille-produits > .elementor-widget-container {
  width: 100%;
}

/* ---- Le cas d'une carte seule -------------------------------------------
   `auto-fit` replie les pistes vides : c'est ce qui evite le trou quand trois
   produits s'affichent dans une grille qui en tiendrait quatre. Mais avec un
   seul produit, la piste unique prend toute la largeur, et la carte s'etire
   sur 912 px — une bannière, plus une carte. C'est le cas des blocs « mis en
   avant » de /moto/ et /ssv-atv/, qui n'ont qu'un produit.

   Le plafond garde une carte a une taille de carte, proche des 288 px des
   grilles voisines, sans empecher le remplissage quand les produits sont
   nombreux : au-dela de deux cartes, les pistes descendent d'elles-memes sous
   cette valeur et le plafond ne joue plus. */
.msa-ew-grille > * {
  max-width: 360px;
}

/* ---- Lien de suite sous une grille d'univers ----------------------------
   Bouton plein a l'accent de l'univers, centre sous la grille.

   Il etait d'abord en contour et aligne a gauche : pose sous trois cartes qui
   portent chacune un « Voir le produit » en aplat orange, il se lisait comme
   une note de bas de page. Le client l'a signale — « doit etre plus visible ».
   C'est la convention des catalogues : le pas suivant se voit autant que
   l'action de la carte. */
.msa-ew-suite {
  margin: var(--msa-space-48) 0 0;
  text-align: center;
}

/* inline-block et non flex : en flex, la fleche est un element a part que
   « align-items: center » plaque au milieu du bloc. Des que le libelle passe
   a trois lignes — le cas sur mobile, « Voir les 32 produits MSA Moto
   Center » — elle se retrouvait posee a cote de la deuxieme ligne, sans lien
   avec le texte. Dans le fil, elle suit toujours le dernier mot.
   La hauteur vient alors du padding et de l'interligne : 16 + 24 + 16 = 56. */
.msa-ew-suite__lien {
  display: inline-block;
  text-align: center;
  line-height: 1.5;
  padding: var(--msa-space-16) var(--msa-space-48);
  border: var(--msa-stroke-card) solid var(--msa-btn-surface);
  border-radius: var(--msa-btn-radius, var(--msa-radius-sm));
  background: var(--msa-btn-surface);
  font-family: var(--msa-font-display);
  font-size: 1rem;
  font-weight: var(--msa-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--msa-btn-label);
  text-decoration: none;
  transition: transform var(--msa-duration) var(--msa-ease);
}

.msa-ew-suite__lien::after {
  /* Espace insecable : la fleche ne tombe jamais seule sur une ligne. */
  content: '\00a0\2192';
}

.msa-ew-suite__lien:hover,
.msa-ew-suite__lien:focus-visible {
  transform: translateY(-1px);
  filter: brightness(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .msa-ew-suite__lien {
    transition: none;
  }

  .msa-ew-suite__lien:hover,
  .msa-ew-suite__lien:focus-visible {
    transform: none;
  }
}

@media (max-width: 768px) {
  .msa-ew-suite {
    margin-top: var(--msa-space-32);
  }

  .msa-ew-suite__lien {
    width: 100%;
    padding-inline: var(--msa-space-16);
    font-size: var(--msa-fs-small);
  }
}