@charset "UTF-8";

/* ==========================================================================
   MB Informatique — template mbi2026
   Direction « Clarté éditoriale ».
   Le rouge est celui du logo (logo.svg : .cls-2 { fill: #8a141c }).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------- Jetons */
:root {
  /* Couleurs — dérivées du rouge du logo */
  --rouge:          #8a141c;   /* action principale · 9,56:1 sur blanc */
  --rouge-fonce:    #5f0c12;   /* survol, état actif */
  --rouge-clair:    #f9f1f2;   /* fond de pastille */
  --rouge-bordure:  #eedfe1;

  --encre:          #262523;   /* titres */
  --texte:          #55524e;   /* texte courant */
  --texte-doux:     #6b6862;
  --texte-pale:     #7a766f;
  --texte-tres-pale:#a09c95;

  --fond:           #ffffff;
  --fond-alt:       #fbfbfa;
  --surface:        #f2f2ef;
  --anthracite:     #383735;
  --anthracite-clair:#d8d5d1;

  --trait:          #e9e7e3;
  --trait-doux:     #eeece8;
  --champ-bordure:  #ddd9d3;

  --succes:         #4a7f52;
  --attention:      #b07a1f;

  /* Typographie */
  --police-titre: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --police-texte: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-s:    0.90625rem;
  --t-base: 1.03125rem;
  --t-m:    clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --t-l:    clamp(1.1875rem, 0.6vw + 1.07rem, 1.375rem);
  --t-h3:   clamp(1.1875rem, 0.7vw + 1.05rem, 1.4375rem);
  --t-h2:   clamp(1.375rem, 1.2vw + 1.05rem, 1.875rem);
  --t-h1:   clamp(1.75rem, 2.6vw + 1rem, 3rem);

  /* Rythme */
  --espace-1: .25rem;  --espace-2: .5rem;   --espace-3: .75rem;
  --espace-4: 1rem;    --espace-5: 1.5rem;  --espace-6: 2rem;
  --espace-7: 2.75rem; --espace-8: 3.5rem;  --espace-9: 4.75rem;

  --rayon-s: 6px;
  --rayon-m: 10px;
  --rayon-l: 12px;
  --rayon-plein: 999px;

  --ombre-douce: 0 1px 2px rgba(38, 37, 35, .05);
  --ombre-panneau: 0 12px 40px rgba(38, 37, 35, .16);

  --largeur: 1280px;     /* surchargé par le paramètre du template */
  --marge-laterale: clamp(1rem, 3.2vw, 3rem);
  --entete-hauteur: 84px;
}

/* ----------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; }
svg { flex: 0 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.16;
  letter-spacing: -.022em;
  margin: 0 0 var(--espace-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.06; letter-spacing: -.028em; }
h2 { font-size: var(--t-h2); font-weight: 600; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-m);  font-weight: 600; }

p { margin: 0 0 var(--espace-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--rouge); text-decoration: none; }
a:hover, a:focus { color: var(--rouge-fonce); text-decoration: underline; }

ul, ol { padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--trait); margin: var(--espace-6) 0; }

/* Accessibilité : le focus clavier doit rester visible.
   L'ancien thème le supprimait avec outline:none !important. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
  border-radius: 3px;
}

.ecran-lecteur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: var(--espace-4); top: -60px; z-index: 999;
  background: var(--rouge); color: #fff; padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-s); font-weight: 600; transition: top .15s ease;
}
.lien-evitement:focus { top: var(--espace-3); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------- Structure */
.contenance {
  width: 100%;
  max-width: var(--mbi-largeur, var(--largeur));
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.bande { padding-block: var(--espace-8); }
.bande--surface { background: var(--fond-alt); border-block: 1px solid var(--trait-doux); }
.bande--claire  { background: var(--fond); }

/* ------------------------------------------------------- Barre utilitaire */
.barre-utilitaire {
  background: var(--anthracite);
  color: var(--anthracite-clair);
  font-size: var(--t-xs);
}
.barre-utilitaire__interieur {
  min-height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-5); flex-wrap: wrap;
}
.barre-utilitaire a { color: var(--anthracite-clair); }
.barre-utilitaire a:hover { color: #fff; }
.barre-utilitaire__modules { display: flex; align-items: center; gap: var(--espace-5); }
.barre-utilitaire__modules p { margin: 0; }

/* -------------------------------------------------------------- En-tête */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.entete__interieur {
  min-height: var(--entete-hauteur);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-5);
}
.entete__marque { flex: 0 0 auto; }
/* Le logo occupe TOUTE la hauteur de la barre blanche : le lien fait la hauteur
   de l'en-tete et l'image la remplit. La largeur suit le rapport du fichier.
   (Le logo est un SVG sans dimensions intrinseques : avec height:auto il se
   reduirait a zero, d'ou une hauteur toujours explicite.) */
.entete__marque a { display: block; line-height: 0; }
/* Hauteur EXPLICITE, pas un pourcentage : le fichier du logo est un SVG sans
   dimensions intrinseques, et une hauteur en pourcentage ne lui permet pas de
   deduire sa largeur — il se reduit alors a 0x0. Avec une longueur concrete,
   la largeur suit le rapport du viewBox. */
.entete__marque img {
  height: var(--entete-hauteur); width: auto; max-width: none; display: block;
}

.marque { display: inline-flex; align-items: baseline; gap: .35em; font-family: var(--police-titre); font-size: 1.6875rem; letter-spacing: -.02em; }
.marque:hover { text-decoration: none; }
.marque__mb  { font-weight: 700; color: var(--anthracite); }
.marque__nom { font-weight: 500; color: var(--rouge); }

.entete__navigation { flex: 1 1 auto; display: flex; justify-content: center; }
.entete__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--espace-4); }

.entete__bascule {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--anthracite); cursor: pointer;
}

/* --------------------------------------------------------- Navigation */
.entete__navigation ul { list-style: none; margin: 0; padding: 0; }

.mega-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); }

.mega-nav__item { position: static; }          /* static : le panneau s'ancre sur l'en-tête */
.mega-nav__item--panneau { display: flex; align-items: center; gap: .25em; }

.mega-nav__lien {
  display: inline-block;
  color: var(--anthracite);
  font-size: var(--t-s);
  font-weight: 500;
  padding-block: calc((var(--entete-hauteur) - 2.2em) / 2);
  white-space: nowrap;
  cursor: default;
}
a.mega-nav__lien { cursor: pointer; }
a.mega-nav__lien:hover { color: var(--rouge); text-decoration: none; }

.mega-nav__item.est-actif > .mega-nav__lien,
.mega-nav__lien.est-actif { color: var(--rouge); box-shadow: inset 0 -2px 0 var(--rouge); }

.mega-nav__chevron { display: inline-flex; color: var(--texte-pale); transition: rotate .16s ease, color .16s ease; }
.mega-nav__item--panneau:hover .mega-nav__chevron,
.mega-nav__item--panneau:focus-within .mega-nav__chevron { rotate: 180deg; color: var(--rouge); }

/* ---- Panneau pleine largeur ---- */
.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--fond);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  box-shadow: 0 18px 40px -18px rgba(38, 37, 35, .28);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
  z-index: 55;
}
.mega-nav__item--panneau:hover > .mega,
.mega-nav__item--panneau:focus-within > .mega { opacity: 1; visibility: visible; translate: 0 0; }

.mega__interieur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  padding-block: var(--espace-5);
  align-items: start;
}

.mega__colonne { padding-inline: var(--espace-4); border-inline-start: 1px solid var(--trait-doux); }
.mega__colonne:first-child { border-inline-start: 0; padding-inline-start: 0; }
.mega__colonne:last-child { padding-inline-end: 0; }

.mega__titre-colonne {
  /* Même rangée flex que les entrees : sans cela, l'icone (inline-flex) et le
     bloc .mega__texte (flex en colonne, donc de niveau bloc) se retrouvent sur
     deux lignes et le pictogramme flotte au-dessus du libelle de colonne. */
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: var(--espace-3);
}
a.mega__titre-colonne:hover { color: var(--rouge-fonce); text-decoration: none; }

.mega__liste { display: flex; flex-direction: column; gap: 1px; }
.mega__sous-liste { display: flex; flex-direction: column; padding-left: var(--espace-4); margin-top: var(--espace-1); }

.mega__lien, .mega__sous-lien {
  display: flex; align-items: flex-start; gap: var(--espace-2);
  padding: 5px var(--espace-2);
  margin-inline: calc(var(--espace-2) * -1);
  border-radius: var(--rayon-s);
  color: var(--encre);
  line-height: 1.35;
}
.mega__lien:hover, .mega__lien:focus-visible,
.mega__sous-lien:hover, .mega__sous-lien:focus-visible {
  background: var(--rouge-clair); color: var(--rouge); text-decoration: none;
}
.mega__lien.est-actif, .mega__sous-lien.est-actif { color: var(--rouge); font-weight: 600; }

.mega__icone { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; margin-top: 1px; }
/* Logo de marque depose sur un element de menu (« Image de lien »). Il est rendu
   en MASQUE et non en image : la forme du fichier decoupe un aplat de la couleur
   courante. Le logo prend donc le meme gris que les pictogrammes dessines, et
   vire au rouge au survol avec eux. Fonctionne avec un SVG comme avec un PNG a
   fond transparent. */
.mega__icone--logo {
  background-color: currentColor;
  -webkit-mask: var(--mbi-logo) center / contain no-repeat;
          mask: var(--mbi-logo) center / contain no-repeat;
}.mega__icone--svg { display: inline-flex; align-items: center; justify-content: center; color: var(--texte-tres-pale); transition: color .14s ease; }
.mega__icone--svg svg { width: 20px; height: 20px; display: block; }
.mega__lien:hover .mega__icone--svg,
.mega__lien:focus-visible .mega__icone--svg,
.mega__lien.est-actif .mega__icone--svg { color: var(--rouge); }
.mega__titre-colonne .mega__icone--svg { color: var(--rouge); margin-top: -1px; }
.mega__titre-colonne .mega__icone--svg svg { width: 18px; height: 18px; }
.mega__titre-colonne .mega__icone { width: 18px; height: 18px; flex-basis: 18px; }
.mega__icone--defaut { display: inline-flex; align-items: center; justify-content: center; color: var(--texte-tres-pale); }
.mega__lien:hover .mega__icone--defaut { color: var(--rouge); }

/* Une entree SANS description tient sur une seule ligne. L'icone faisant 26 px
   pour une ligne de texte de 20 px, « align-items: flex-start » la faisait pendre
   4 px sous l'intitule — c'est le decalage visible dans le mega-menu Materiel.
   On la recentre. Les entrees AVEC description gardent l'alignement en haut :
   leur icone doit rester calee sur la PREMIERE ligne, pas sur le bloc entier. */
.mega__lien:not(:has(.mega__note)),
.mega__sous-lien:not(:has(.mega__note)) { align-items: center; }
.mega__lien:not(:has(.mega__note)) .mega__icone,
.mega__sous-lien:not(:has(.mega__note)) .mega__icone { margin-top: 0; }

.mega__texte { display: flex; flex-direction: column; min-width: 0; }
.mega__intitule { display: block; font-size: var(--t-s); font-weight: 500; }
.mega__sous-lien .mega__intitule { font-size: var(--t-xs); font-weight: 400; color: var(--texte-doux); }
/* La description tient sur DEUX lignes au maximum, coupées par des points de
   suspension. Sans cette limite, une colonne fournie faisait deux fois la
   hauteur d'une autre et le panneau devenait un mur de texte. */
.mega__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--texte-pale);
  line-height: 1.35;
  margin-top: 0;
}
/* La note du titre de colonne suit la même règle. */
.mega__titre-colonne .mega__note {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px;
}
.mega__lien:hover .mega__note { color: var(--texte-doux); }

.mega__entree--intertitre { margin-top: var(--espace-3); }
.mega__entree--intertitre:first-child { margin-top: 0; }
/* L'intertitre porte lui aussi une icone. En « display: block », l'icone
   (inline-flex) et le bloc .mega__texte (flex en colonne, donc de niveau bloc)
   se retrouvaient sur DEUX lignes : le pictogramme flottait au-dessus du libelle.
   Meme rangee flex que .mega__lien, et meme gouttiere de 26 px, pour que le
   libelle de section s'aligne exactement sur les intitules des liens en dessous. */
.mega__intertitre {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-1) 0;
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texte-tres-pale);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mega__intertitre .mega__texte { display: block; }
.mega__intertitre .mega__icone { margin-top: 0; }
/* Dessin plus petit dans la meme gouttiere : un reperage de section, pas un
   pictogramme de lien. */
.mega__intertitre .mega__icone--svg svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------- Boutons */
.bouton,
.entete__cta,
button.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px;
  padding: .7em 1.35em;
  border-radius: var(--rayon-s);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-s);
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bouton--principal { background: var(--rouge); color: #fff; }
.bouton--principal:hover, .bouton--principal:focus { background: var(--rouge-fonce); color: #fff; text-decoration: none; }

.bouton--secondaire { background: var(--fond); color: var(--anthracite); border-color: var(--champ-bordure); }
.bouton--secondaire:hover { border-color: var(--anthracite); color: var(--anthracite); text-decoration: none; }

/* --------------------------------------------------- Bandeau et fil */
.bandeau-pleine-largeur { position: relative; }
.bandeau-pleine-largeur img { width: 100%; display: block; }

.fil-ariane { border-bottom: 1px solid var(--trait-doux); background: var(--fond-alt); }
.fil-ariane ol,
.fil-ariane ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  margin: 0; padding-block: var(--espace-3); padding-left: 0;
  font-size: var(--t-xs); color: var(--texte-pale);
}
.fil-ariane a { color: var(--texte-pale); }
.fil-ariane a:hover { color: var(--rouge); }
.fil-ariane li + li::before { content: "/"; margin-right: .5em; color: var(--trait); }
.fil-ariane .active, .fil-ariane [aria-current] { color: var(--anthracite); }

/* ------------------------------------------------------------- Corps */
.corps { padding-block: var(--espace-8); }
.corps__haut { margin-bottom: var(--espace-7); }
.corps__bas  { margin-top: var(--espace-7); }

.grille-principale { display: grid; gap: var(--espace-7); }
.grille-principale--droite { grid-template-columns: minmax(0, 1fr) 300px; }
.grille-principale--gauche { grid-template-columns: 280px minmax(0, 1fr); }
.grille-principale--gauche.grille-principale--droite { grid-template-columns: 260px minmax(0, 1fr) 300px; }

.colonne--contenu { min-width: 0; }

.grille-blocs { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.grille-modules { display: grid; gap: var(--espace-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.grille-modules--bottom-d { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ------------------------------------------------------- Chrome module */
.panneau { min-width: 0; }
.panneau__titre {
  font-family: var(--police-titre);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--encre);
  margin: 0 0 var(--espace-4);
}
.panneau--encadre {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--espace-5);
}

/* ---------------------------------------------------------- Formulaires */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: .55em .875em;
  font-family: inherit;
  font-size: var(--t-s);
  color: var(--anthracite);
  background: var(--fond);
  border: 1px solid var(--champ-bordure);
  border-radius: var(--rayon-s);
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texte-tres-pale); }
label { font-size: var(--t-s); color: var(--texte); }

/* ------------------------------------------------------------- Tableaux */
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th, td { text-align: left; padding: var(--espace-3); border-bottom: 1px solid var(--trait); }
th { font-family: var(--police-titre); font-weight: 600; color: var(--encre); }

/* ------------------------------------------------------- Messages Joomla */
joomla-alert, .alert {
  display: block;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rouge);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  background: var(--fond-alt);
  padding: var(--espace-4);
  margin-bottom: var(--espace-5);
  font-size: var(--t-s);
}
.alert-success { border-left-color: var(--succes); }
.alert-warning { border-left-color: var(--attention); }

/* ------------------------------------------------------------ Pied */
.pied {
  background: var(--anthracite);
  color: var(--anthracite-clair);
  padding-block: var(--espace-7);
  margin-top: var(--espace-8);
}
.pied a { color: #fff; }
.pied a:hover { color: var(--anthracite-clair); }
.pied h1, .pied h2, .pied h3, .pied h4 { color: #fff; }
.pied__interieur { display: flex; flex-direction: column; gap: var(--espace-5); }
.pied__modules { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pied__mention { font-size: var(--t-xs); color: var(--texte-pale); margin: 0; padding-top: var(--espace-4); border-top: 1px solid rgba(255,255,255,.12); }

/* --------------------------------------------------------- Menu mobile */
.panneau-mobile { position: fixed; inset: 0; z-index: 200; }
.panneau-mobile[hidden] { display: none; }
.panneau-mobile__voile { position: absolute; inset: 0; background: rgba(38, 37, 35, .5); }
.panneau-mobile__contenu {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(88vw, 340px);
  background: var(--fond);
  padding: var(--espace-6) var(--espace-5);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--espace-5);
  box-shadow: var(--ombre-panneau);
}
.panneau-mobile__fermer {
  position: absolute; top: var(--espace-3); inset-inline-end: var(--espace-3);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--anthracite); cursor: pointer;
}
.panneau-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu-simple { list-style: none; margin: 0; padding: 0; }
.menu-simple--n1 { padding-left: var(--espace-4); }
.menu-simple--n2 { padding-left: var(--espace-4); }
.menu-simple__lien {
  display: block; padding: var(--espace-3) 0;
  color: var(--anthracite); font-weight: 500; font-size: var(--t-m);
  border-bottom: 1px solid var(--trait-doux); min-height: 44px;
}
.menu-simple__lien .mega__note { display: none; }
.menu-simple--n1 .menu-simple__lien { font-size: var(--t-s); font-weight: 600; color: var(--rouge); text-transform: uppercase; letter-spacing: .06em; border-bottom: 0; padding-bottom: var(--espace-1); }
.menu-simple--n2 .menu-simple__lien { font-size: var(--t-s); font-weight: 400; color: var(--texte); text-transform: none; letter-spacing: 0; }
.menu-simple__lien.est-actif { color: var(--rouge); }
.panneau-mobile li > ul { padding-left: var(--espace-4); }
.panneau-mobile a {
  display: block; padding: var(--espace-3) 0;
  color: var(--anthracite); font-weight: 500; font-size: var(--t-m);
  border-bottom: 1px solid var(--trait-doux);
  min-height: 44px;
}
.panneau-mobile a:hover { color: var(--rouge); text-decoration: none; }
.panneau-mobile li > ul a { font-size: var(--t-s); font-weight: 400; color: var(--texte); }
/* Le bouton d'appel du panneau mobile.
   « .panneau-mobile a » (specificite 0,1,1) l'emporte sur « .bouton--principal »
   (0,1,0) : il imposait display:block, la couleur anthracite et un filet bas, d'ou
   un numero sombre, cale a gauche, sur le fond rouge. On selectionne donc avec
   « a.panneau-mobile__tel » (0,2,1) pour rendre au bouton son etat normal.
   margin-top: auto le colle en bas, le conteneur etant une colonne flex. */
.panneau-mobile a.panneau-mobile__tel {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  padding: .8em 1.35em;
  color: #fff; border-bottom: 0;
  text-align: center; letter-spacing: .02em;
}
.panneau-mobile a.panneau-mobile__tel:hover,
.panneau-mobile a.panneau-mobile__tel:focus { color: #fff; background: var(--rouge-fonce); }

body.menu-ouvert { overflow: hidden; }

/* ------------------------------------------------------------ Adaptatif */
@media (max-width: 1080px) {
  .grille-principale--gauche,
  .grille-principale--droite,
  .grille-principale--gauche.grille-principale--droite { grid-template-columns: minmax(0, 1fr); }
  .colonne--gauche { order: 2; }
  .colonne--droite { order: 3; }
}

/* Barre utilitaire : le module telephone est un <img> suivi d'un lien, tous deux
   en ligne. L'image se calait donc sur la LIGNE DE BASE du texte, ce qui la
   faisait flotter au-dessus du numero — 12 px d'ecart mesures. Une rangee flex
   les centre l'un sur l'autre, et l'icone est ramenee a la taille du texte. */
.barre-utilitaire .tel {
  display: inline-flex; align-items: center; gap: .15em; line-height: 1;
}
.barre-utilitaire .tel img { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
.barre-utilitaire .tel a { line-height: 1; }

@media (max-width: 920px) {
  :root { --entete-hauteur: 64px; }
  .entete__navigation { display: none; }   /* le méga-menu est réservé au bureau */
  .mega { display: none; }
  .entete__cta { display: none; }
  .entete__bascule { display: inline-flex; }
  .barre-utilitaire__modules { display: none; }
}

@media (max-width: 560px) {
  .bande { padding-block: var(--espace-7); }
  .corps { padding-block: var(--espace-7); }
}

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

@media print {
  .barre-utilitaire, .entete__actions, .panneau-mobile, .fil-ariane { display: none; }
  .entete { position: static; }
  body { color: #000; }
}

/* ==========================================================================
   VirtueMart — catalogue et fiche produit
   ========================================================================== */

/* ------------------------------------------------------- En-tête de page */
.vm-page__entete { margin-bottom: var(--espace-6); }
.vm-page__titre { margin-bottom: var(--espace-3); }
.vm-page__intro { color: var(--texte-doux); max-width: 68ch; }
.vm-page__intro p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ Barre d'outils */
.vm-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-4);
  margin-bottom: var(--espace-5);
  border-block: 1px solid var(--trait-doux);
  font-size: var(--t-s);
  color: var(--texte-doux);
}
.vm-barre__tri, .vm-barre__compte { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
.vm-barre select { min-height: 40px; width: auto; }

.vm-recherche {
  display: flex; flex-wrap: wrap; gap: var(--espace-3);
  padding: var(--espace-4);
  background: var(--fond-alt);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  margin-bottom: var(--espace-5);
}
.vm-recherche__champ { display: flex; gap: var(--espace-3); flex: 1 1 320px; }
.vm-recherche__champ input[type="search"] { flex: 1 1 auto; }
.vm-recherche .vm-search-descr { display: none; }

/* ------------------------------------------------------------- Grille */
.vm-catalogue__groupe { margin-block: var(--espace-6) var(--espace-4); }

/* Nombre de colonnes impose par la categorie (« Produits par ligne » dans
   VirtueMart). Ne s'applique qu'a partir de 720 px : en dessous, la disposition
   automatique reste la bonne reponse, deux colonnes de fiches produits ne
   tenant pas sur un telephone. */
@media (min-width: 720px) {
  .vm-grille[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-grille[data-colonnes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vm-grille[data-colonnes="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vm-grille[data-colonnes="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.vm-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--espace-5);
  align-items: stretch;
}

.vm-carte {
  display: flex; flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vm-carte:hover { border-color: var(--champ-bordure); box-shadow: 0 6px 18px -10px rgba(38,37,35,.25); }

.vm-carte__visuel {
  display: flex; align-items: center; justify-content: center;
  height: 210px; padding: var(--espace-4);
  background: var(--fond);          /* blanc : les visuels produits ont un fond blanc */
  overflow: hidden;
}
.vm-carte__visuel img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.vm-carte__corps { display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-4); flex-grow: 1; }

.vm-carte__reference {
  margin: 0; font-family: var(--police-titre);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texte-tres-pale);
}
.vm-carte__titre { margin: 0; font-size: var(--t-m); font-weight: 600; line-height: 1.32; }
.vm-carte__titre a { color: var(--encre); }
.vm-carte__titre a:hover { color: var(--rouge); text-decoration: none; }

.vm-carte__resume { margin: 0; font-size: var(--t-s); color: var(--texte-doux); line-height: 1.55; }

.vm-carte__signaux { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin-top: auto; padding-top: var(--espace-3); }

.vm-stock { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-xs); font-weight: 500; }
.vm-stock__point { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vm-stock--dispo { color: var(--succes); }
.vm-stock--commande { color: var(--attention); }

.vm-carte__pied {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--espace-3);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--trait-doux);
}
.vm-carte__prix { min-width: 0; }
.vm-carte__action { flex: 0 0 auto; }

/* Prix : classes produites par le sous-gabarit du cœur */
.vm-carte__prix .PricesalesPrice,
.vm-fiche__achat-bloc .PricesalesPrice {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.4rem; font-weight: 700; color: var(--rouge); line-height: 1.15;
}
.vm-fiche__achat-bloc .PricesalesPrice { font-size: 2.1rem; }
.vm-carte__prix .PriceastaxAmount,
.vm-carte__prix .PricebasePriceWithTax,
.vm-fiche__achat-bloc .PriceastaxAmount { font-size: var(--t-xs); color: var(--texte-pale); }
.vm-carte__prix .PricebasePrice,
.vm-carte__prix .PricediscountedPriceWithoutTax { font-size: var(--t-xs); color: var(--texte-pale); }
.vm-price-desc { font-size: var(--t-xs); color: var(--texte-pale); }

/* Boutons du panier produits par VirtueMart */
.vm-carte__action input.addtocart-button,
.vm-carte__action input.notify-button,
.vm-fiche__achat-bloc input.addtocart-button,
.vm-fiche__achat-bloc input.notify-button {
  min-height: 44px; padding: 0 1.1em;
  background: var(--rouge); color: #fff;
  border: 0; border-radius: var(--rayon-s);
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
  cursor: pointer;
}
.vm-carte__action input.addtocart-button:hover,
.vm-fiche__achat-bloc input.addtocart-button:hover { background: var(--rouge-fonce); }
.vm-carte__action .quantity-box, .vm-carte__action .quantity-controls { display: none; }
.vm-fiche__achat-bloc .quantity-box input { width: 68px; min-height: 44px; text-align: center; }

/* --------------------------------------------------------- Fiche produit */
.vm-fiche__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espace-4); margin-bottom: var(--espace-5);
  font-size: var(--t-s);
}
.vm-fiche__retour { display: inline-flex; align-items: center; gap: .4em; color: var(--texte-doux); font-weight: 500; }
.vm-fiche__retour:hover { color: var(--rouge); text-decoration: none; }
.vm-fiche__voisins { display: flex; gap: var(--espace-4); }
.vm-fiche__voisins a { color: var(--texte-pale); font-size: var(--t-xs); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vm-fiche__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--espace-8); align-items: start; }

.vm-fiche__visuel { display: flex; flex-direction: column; gap: var(--espace-4); }
.vm-fiche__visuel .main-image {
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon-l);
  padding: var(--espace-6); min-height: 380px;
}
.vm-fiche__visuel .main-image img { max-width: 100%; height: auto; width: auto; object-fit: contain; }
.vm-fiche__visuel .additional-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--espace-3); }
.vm-fiche__visuel .additional-images img { border: 1px solid var(--trait); border-radius: var(--rayon-s); background: var(--fond); }

.vm-fiche__marque {
  margin: 0 0 var(--espace-2);
  font-family: var(--police-titre); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texte-tres-pale);
}
.vm-fiche__titre { font-size: clamp(1.6rem, 2vw + 1rem, 2.15rem); margin-bottom: var(--espace-3); }
.vm-fiche__identifiants { display: flex; flex-wrap: wrap; gap: var(--espace-4); font-size: var(--t-xs); color: var(--texte-pale); margin-bottom: var(--espace-4); }
.vm-fiche__identifiants strong { color: var(--anthracite); font-weight: 500; }
.vm-fiche__resume { color: var(--texte-doux); margin-bottom: var(--espace-5); }

.vm-fiche__achat-bloc {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: var(--espace-5);
  display: flex; flex-direction: column; gap: var(--espace-4);
}

.vm-reassurance { list-style: none; margin: var(--espace-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.vm-reassurance li { display: flex; gap: var(--espace-3); align-items: flex-start; }
.vm-reassurance svg { color: var(--rouge); margin-top: 2px; }
.vm-reassurance strong { display: block; font-family: var(--police-titre); font-size: var(--t-s); color: var(--encre); }
.vm-reassurance span { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.55; }

.vm-fiche__outils { display: flex; gap: var(--espace-4); margin-top: var(--espace-5); font-size: var(--t-xs); }
.vm-fiche__description { margin-top: var(--espace-8); padding-top: var(--espace-6); border-top: 1px solid var(--trait); max-width: 74ch; }
.vm-fiche__sous-titre { font-size: var(--t-h3); margin-bottom: var(--espace-4); }

.vm-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin-top: var(--espace-7); font-size: var(--t-s); }
.vm-aucun-resultat { padding: var(--espace-6); background: var(--fond-alt); border: 1px solid var(--trait); border-radius: var(--rayon-m); text-align: center; color: var(--texte-doux); }

@media (max-width: 900px) {
  .vm-fiche__grille { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
}

/* ==========================================================================
   VP One Page Checkout — couche d'harmonisation
   Le plugin livre sa propre feuille (light-checkout.css, 2992 lignes) en
   Verdana et aux couleurs d'époque Bootstrap 2. On ne la modifie pas : on
   passe devant, en préfixant par #ProOPC pour gagner en spécificité.
   ========================================================================== */

#ProOPC,
#ProOPC input, #ProOPC select, #ProOPC textarea, #ProOPC button,
.proopc-step, .proopc-process-title {
  font-family: var(--police-texte) !important;
}

#ProOPC { color: var(--texte); font-size: var(--t-s); }

/* ---- Étapes ---- */
#ProOPC .proopc-process-title,
.proopc-process-title {
  font-family: var(--police-titre) !important;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--encre);
  letter-spacing: -.018em;
  border: 0;
  padding-bottom: var(--espace-3);
  margin-bottom: var(--espace-4);
  border-bottom: 1px solid var(--trait);
  background: none;
}
#ProOPC .proopc-step {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--espace-5);
  margin-bottom: var(--espace-5);
  box-shadow: none;
}
#ProOPC .proopc-subtitle,
#ProOPC .sub-headings,
#ProOPC .shipping-payment-heading {
  font-family: var(--police-titre);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Liens ---- */
#ProOPC a:not(.proopc-btn) { color: var(--rouge); }
#ProOPC a:not(.proopc-btn):hover { color: var(--rouge-fonce); }

/* ---- Boutons ---- */
#ProOPC .proopc-btn,
#proopc-coupon button.proopc-btn {
  min-height: 44px;
  padding: .6em 1.25em;
  background: var(--rouge);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-s);
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}
#ProOPC .proopc-btn:hover,
#ProOPC .proopc-btn:focus,
#ProOPC .proopc-btn:active { background: var(--rouge-fonce); color: #fff; }
#ProOPC .proopc-btn[disabled] { background: var(--champ-bordure); color: var(--texte-pale); cursor: not-allowed; }

#ProOPC .proopc-continue-link,
#ProOPC .proopc-clear-cart {
  color: var(--texte-doux);
  font-weight: 500;
}
#ProOPC .proopc-clear-cart:hover { color: var(--rouge); }

/* ---- Champs ---- */
#ProOPC input[type="text"], #ProOPC input[type="email"], #ProOPC input[type="tel"],
#ProOPC input[type="password"], #ProOPC select, #ProOPC textarea,
#ProOPC .proopc-input, #ProOPC .full-input {
  min-height: 46px;
  padding: .5em .8em;
  font-size: var(--t-s);
  color: var(--anthracite);
  background: var(--fond);
  border: 1px solid var(--champ-bordure);
  border-radius: var(--rayon-s);
  box-shadow: none;
}
#ProOPC input:focus, #ProOPC select:focus, #ProOPC textarea:focus {
  border-color: var(--rouge);
  outline: 2px solid var(--rouge);
  outline-offset: 1px;
}
#ProOPC label { font-size: var(--t-s); color: var(--texte); font-weight: 500; }
#ProOPC .asterisk { color: var(--rouge); }
#ProOPC .proopc-field-group, #ProOPC .proopc-group { margin-bottom: var(--espace-4); }

/* ==========================================================================
   Module panier en colonne laterale
   --------------------------------------------------------------------------
   Le lien « Voir le panier » heritait d'un style de bouton generique : cadre
   gris pale, texte gris, aucun rapport avec la charte. C'est pourtant l'action
   qui mene a la commande. On lui donne le rouge de la marque, et on remet en
   ligne le compte de produits et le total, qui flottaient l'un au-dessus de
   l'autre (« total » est en float:right dans le balisage du module).
   ========================================================================== */
.vmCartModule { display: flex; flex-direction: column; gap: var(--espace-3); }
.vmCartModule .total,
.vmCartModule .total_products {
  float: none !important; margin: 0;
  font-size: var(--t-s); color: var(--texte);
}
.vmCartModule .total { font-weight: 600; color: var(--encre); }
.vmCartModule .show_cart:empty { display: none; }
.vmCartModule .show_cart a {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; min-height: 46px; padding: .6em 1.2em;
  background: var(--rouge); color: #fff;
  border: 0; border-radius: var(--rayon-s);
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
  text-decoration: none; transition: background-color .15s ease;
}
.vmCartModule .show_cart a:hover,
.vmCartModule .show_cart a:focus-visible { background: var(--rouge-fonce); color: #fff; text-decoration: none; }
.vmCartModule > div[style*="clear"] { display: none; }
/* ==========================================================================
   Champs personnalises VirtueMart : empecher les menus deroulants de deborder
   --------------------------------------------------------------------------
   Deux causes distinctes, l'une de mise en page, l'autre venue d'un composant.
   ========================================================================== */

/* 1. Un element flex ou de grille a « min-width: auto » : il ne peut pas se
      reduire sous la largeur de son contenu. La plus longue option d'un menu —
      « i5 14500 UHD 770 (5.0 GHz - 14 coeurs / 20 threads) Sans surcout » —
      imposait sa largeur a toute la chaine, jusqu'a la carte. Symptome
      trompeur : « MBI CAO » debordait de 13 px et « MBI PRO », au libelle plus
      court, tenait tout juste — la longueur du texte decidait de la mise en page. */
.vm-carte__corps > *,
.vm-carte__action,
.vm-carte .vm-customfields-wrap,
.vm-carte .product-fields,
.vm-carte .product-field,
.vm-carte .product-field-display,
.vm-carte form.product,
.vm-fiche .vm-customfields-wrap,
.vm-fiche .product-fields,
.vm-fiche .product-field,
.vm-fiche .product-field-display,
.vm-fiche form.product { min-width: 0; }

.vm-carte select,
.vm-fiche select,
.vm-carte .product-field select,
.vm-fiche .product-field select {
  width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis;
}

/* 2. Joomla ne montre pas le <select> natif : il le masque et le remplace par le
      composant « Chosen », qui fige une largeur EN PIXELS mesuree au chargement
      — 405 px ici — et ne la reajuste jamais. Dans une carte de 257 px, le
      libelle debordait de 144 px et la fleche de 170. Seul !important passe
      devant une largeur posee en style en ligne. */
.vm-carte .chosen-container,
.vm-fiche .chosen-container { width: 100% !important; max-width: 100%; }
.vm-carte .chosen-container .chosen-single,
.vm-fiche .chosen-container .chosen-single { width: 100%; }
.vm-carte .chosen-container .chosen-single > span,
.vm-fiche .chosen-container .chosen-single > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vm-carte .chosen-container .chosen-drop,
.vm-fiche .chosen-container .chosen-drop { width: 100%; max-width: 100%; }
.vm-carte .chosen-results,
.vm-fiche .chosen-results { max-width: 100%; }
/* Dans la liste deroulee, le libelle complet doit rester lisible : il passe a la
   ligne plutot que d'etre tronque. */
.vm-carte .chosen-results li,
.vm-fiche .chosen-results li { white-space: normal; }
/* ==========================================================================
   Recherche du site — champ et suggestions enrichies
   --------------------------------------------------------------------------
   Une seule zone pour tout le site. Les suggestions ne sont pas des mots mais
   des fiches : un produit avec son visuel, sa reference et son prix TTC, un
   article avec un resume. Gabarit : html/mod_finder/default.php.
   ========================================================================== */
/* Au repos, la recherche n'est qu'une pastille ronde : l'en-tete manquait de
   place et le libelle « Rechercher » chevauchait l'invite du champ. Le clic
   ouvre le champ, qui glisse vers la gauche. */
.mbi-recherche { position: relative; display: flex; align-items: center; flex: 0 0 auto; }

.mbi-recherche__pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  padding: 0; background: var(--fond-alt); border: 1px solid transparent;
  border-radius: var(--rayon-plein); color: var(--texte);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.mbi-recherche__pastille:hover { background: var(--rouge-clair); color: var(--rouge); }
.mbi-recherche__pastille:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.mbi-recherche.est-ouverte .mbi-recherche__pastille { background: var(--rouge); color: #fff; }

/* La boite s'affiche ou ne s'affiche pas — pas d'etat intermediaire.
   Deux tentatives animees ont ete abandonnees : animer la largeur depuis zero
   laissait la boite bloquee a 2 px (ses seules bordures) meme avec une largeur
   forcee en !important, et la version en opacite ne recevait qu'une partie de
   ses declarations. « display » ne peut pas s'appliquer a moitie. */
.mbi-recherche__boite {
  position: absolute; top: 50%; right: calc(100% + 8px);
  transform: translateY(-50%);
  width: min(320px, 46vw);
  display: none; align-items: center;
  background: #fff;
  border: 1px solid var(--rouge-bordure); border-radius: var(--rayon-plein);
  box-shadow: 0 8px 24px rgba(38, 37, 35, .12);
}
.mbi-recherche.est-ouverte .mbi-recherche__boite { display: flex; }
.mbi-recherche__champ {
  flex: 1 1 auto; min-width: 0;
  min-height: 40px; padding: 0 .2em 0 .9em;
  background: none; border: 0; outline: none;
  font-family: var(--police-texte); font-size: var(--t-s); color: var(--encre);
}
.mbi-recherche__champ::placeholder { color: var(--texte-pale); }
.mbi-recherche__champ::-webkit-search-cancel-button { display: none; }

.mbi-recherche__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; margin-right: .35em;
  padding: 0; background: none; border: 0; border-radius: var(--rayon-plein);
  color: var(--texte-pale); cursor: pointer;
}
.mbi-recherche__fermer:hover { background: var(--fond-alt); color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  .mbi-recherche__boite, .mbi-recherche__pastille { transition: none; }
}
/* ---- Panneau de suggestions ---- */
.mbi-suggestions {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: min(440px, calc(100vw - 2 * var(--marge-laterale)));
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--trait-doux); border-radius: var(--rayon-m);
  box-shadow: 0 20px 50px rgba(38, 37, 35, .18);
  padding: var(--espace-2);
}
.mbi-suggestions__famille {
  margin: var(--espace-2) var(--espace-3) var(--espace-1);
  font-family: var(--police-titre); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--texte-tres-pale);
}
.mbi-suggestions__liste { margin: 0 0 var(--espace-2); padding: 0; list-style: none; }
.mbi-suggestions__vide {
  margin: 0; padding: var(--espace-5) var(--espace-3);
  text-align: center; color: var(--texte-doux); font-size: var(--t-s);
}

.mbi-suggestion {
  display: flex; align-items: flex-start; gap: var(--espace-3);
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-s);
  color: var(--encre); text-decoration: none;
}
.mbi-suggestion:hover,
.mbi-suggestion.est-survolee { background: var(--rouge-clair); text-decoration: none; color: var(--encre); }

/* Le visuel garde un fond blanc : les photos produits sont detourees dessus. */
.mbi-suggestion__visuel {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--trait-doux); border-radius: var(--rayon-s);
  overflow: hidden;
}
.mbi-suggestion__visuel img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mbi-suggestion__corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mbi-suggestion__titre { font-size: var(--t-s); font-weight: 600; line-height: 1.3; }
.mbi-suggestion__ref,
.mbi-suggestion__meta { font-size: var(--t-xs); color: var(--texte-tres-pale); }
.mbi-suggestion__resume {
  font-size: var(--t-xs); color: var(--texte-doux); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbi-suggestion__prix {
  flex: 0 0 auto; align-self: center;
  font-family: var(--police-titre); font-weight: 700; font-size: var(--t-s);
  color: var(--rouge); white-space: nowrap;
}

.mbi-suggestions__tout {
  display: block; width: 100%; text-decoration: none;
  margin-top: var(--espace-1); padding: var(--espace-3);
  background: none; border: 0; border-top: 1px solid var(--trait-doux);
  color: var(--rouge); font-family: var(--police-titre); font-weight: 600;
  font-size: var(--t-xs); text-align: center; cursor: pointer;
}
.mbi-suggestions__tout:hover { background: var(--rouge-clair); }

@media (max-width: 920px) {
  /* Le panneau doit tomber sous le CHAMP, pas sous la pastille.
     Le formulaire ne mesure que 42 px — c'est la pastille seule ; le champ est en
     position absolue et s'ouvre VERS LA GAUCHE, avec right: calc(100% + 8px).
     La regle precedente posait left: 0 sur le formulaire : le panneau se calait
     donc a droite de l'ecran, a cote du champ et non dessous, et sortait du cadre.
     On reprend a l'identique l'ancrage et la largeur du champ. */
  .mbi-suggestions {
    right: calc(100% + 8px); left: auto;
    /* Exactement la largeur du champ, qui passe a 62vw sur mobile (ligne ~1630).
       Reprendre la meme expression garantit l'alignement et, le champ tenant a
       l'ecran, garantit que le panneau y tient aussi. */
    width: min(320px, 62vw);
  }
  /* A cette largeur, la vignette de 52 px etouffait les titres : un mot par ligne. */
  .mbi-suggestion { gap: var(--espace-2); padding: var(--espace-2); }
  .mbi-suggestion__visuel { width: 40px; height: 40px; }
  .mbi-suggestion__titre { font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .mbi-recherche__boite { transition: none; }
}
/* ==========================================================================
   Barre de marques gaming (.navbargaming)
   --------------------------------------------------------------------------
   Le balisage ne vient pas du template : il est ecrit dans la DESCRIPTION des
   cinq categories « PC Gaming » (ids 6, 7, 11, 13, 23). Le template mbi2026 ne
   le stylisait pas du tout : les cinq logos s'affichaient a leur taille native
   de 600 px, soit une barre de 2 759 px de haut.

   Repris de l'ancien site (yoo_nite/css/custom.css:231) : barre au rouge de la
   marque, libelles blancs, logos de 30 px. Deux corrections au passage.
   · Les fichiers de logo ont un FOND BLANC OPAQUE — ils faisaient cinq carres
     blancs poses sur le rouge. La tuile blanche devient un parti pris assume :
     taille constante, coins arrondis, logo contenu et jamais rogne.
   · La barre DEFILE horizontalement au lieu de passer a la ligne, ce qui evite
     une barre sur deux etages sur les ecrans etroits.
   ========================================================================== */
.navbargaming {
  display: flex; align-items: stretch; gap: var(--espace-2);
  margin: 0 0 var(--espace-6); padding: var(--espace-3);
  background: var(--rouge); border-radius: var(--rayon-m);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent;
}
.navbargaming a {
  display: flex; align-items: center; gap: .6em; flex: 0 0 auto;
  padding: .4em .95em .4em .4em;
  border-radius: var(--rayon-s);
  color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
  transition: background-color .15s ease, color .15s ease;
}
.navbargaming a:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.navbargaming a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; text-decoration: none; }

/* Marque en cours de consultation : pastille blanche, texte rouge. Repere
   ajoute par template.js — sans JavaScript, la barre reste utilisable. */
.navbargaming a.est-actif {
  background: #fff; color: var(--rouge);
}
.navbargaming a.est-actif:hover { background: #fff; color: var(--rouge-fonce); }

.navbargaming img {
  width: 34px; height: 34px; flex: 0 0 auto;
  object-fit: contain; padding: 3px;
  background: #fff; border-radius: var(--rayon-s);
}

@media (max-width: 560px) {
  .navbargaming { gap: var(--espace-1); padding: var(--espace-2); }
  .navbargaming a { padding: .35em .7em .35em .35em; font-size: var(--t-xs); }
  .navbargaming img { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .navbargaming a { transition: none; } }
/* ==========================================================================
   Grille des sous-categories (page /materiel.html et pages de rayon)
   --------------------------------------------------------------------------
   Le sous-gabarit d'origine de VirtueMart posait une grille en flottants
   (« floatleft width33 ») avec des separateurs en <div> vides : rien ne
   delimitait les categories, les vignettes n'avaient ni fond, ni bordure, ni
   hauteur commune, et les images allaient du 240x240 au 240x144. Surcharge
   dans templates/mbi2026/html/com_virtuemart/sublayouts/categories.php.
   ========================================================================== */
.vm-categories { margin-bottom: var(--espace-7); }
.vm-categories__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espace-4);
  margin: 0; padding: 0; list-style: none;
}
.vm-categories__element { margin: 0; }

.vm-cat-carte {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid var(--trait-doux);
  border-radius: var(--rayon-m);
  overflow: hidden;
  color: var(--encre); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vm-cat-carte:hover, .vm-cat-carte:focus-visible {
  border-color: var(--rouge-bordure);
  box-shadow: 0 10px 26px rgba(38, 37, 35, .09);
  text-decoration: none; color: var(--encre);
  transform: translateY(-2px);
}

/* Les visuels de categorie ont des proportions tres inegales : du 240x144 au
   194x240. La boite doit donc etre de HAUTEUR FIXE, pas au rapport 4/3.
   Avec « aspect-ratio », la hauteur depend de la largeur, mais « max-height:100% »
   sur l'image se resout alors contre une hauteur qui depend elle-meme du
   contenu : la contrainte devient circulaire et le navigateur laisse l'image
   gagner. Les boites mesuraient 273, 211 et 248 px sur une meme rangee, et les
   intitules ne s'alignaient pas. Une hauteur explicite leve l'ambiguite. */
.vm-cat-carte__visuel {
  display: flex; align-items: center; justify-content: center;
  height: 200px; flex: 0 0 auto;
  padding: var(--espace-4);
  background: #fff; border-bottom: 1px solid var(--trait-doux);
}
.vm-cat-carte__visuel img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
}
/* L'intitule occupe le reste de la carte : les cartes d'une meme rangee ayant la
   meme hauteur, les fleches se retrouvent alignees elles aussi. */
.vm-cat-carte__corps { flex: 1 1 auto; }
.vm-cat-carte__sans-image { color: var(--texte-tres-pale); }
.vm-cat-carte__sans-image svg { width: 40px; height: 40px; }

.vm-cat-carte__corps {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3);
  padding: var(--espace-4);
}
.vm-cat-carte__titre {
  font-family: var(--police-titre); font-size: var(--t-s); font-weight: 600;
  line-height: 1.3;
}
.vm-cat-carte__fleche {
  display: inline-flex; flex: 0 0 auto;
  color: var(--texte-tres-pale);
  transition: color .15s ease, transform .15s ease;
}
.vm-cat-carte__fleche svg { width: 18px; height: 18px; }
.vm-cat-carte:hover .vm-cat-carte__fleche {
  color: var(--rouge); transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .vm-cat-carte, .vm-cat-carte__fleche { transition: none; }
  .vm-cat-carte:hover { transform: none; }
  .vm-cat-carte:hover .vm-cat-carte__fleche { transform: none; }
}
/* ==========================================================================
   Boutons de VirtueMart (.vm-btn) et fenetre d'ajout au panier
   --------------------------------------------------------------------------
   Le bouton « Voir le panier » etait au bleu de VirtueMart : c'est le bleu
   signale par le client. Deux obstacles, tous deux mesures dans le navigateur.

   1. SPECIFICITE. VirtueMart ecrit « .vm-btn.vm-btn-primary » (0,2,0) dans
      vm-ltr-site.css:356, et sa feuille est chargee APRES celle du template.
      Un simple « .vm-btn-primary » perd donc deux fois. D'ou le prefixe « body ».

   2. LARGEUR. fancybox pose « width: 0 » en style en ligne sur #fancybox-content
      et calcule sa fenetre a partir de la. Repondre « width: auto » ne suffit
      pas : chaque niveau herite alors de la largeur du niveau au-dessus, qui
      vaut zero, et la cascade s'effondre — la fenetre restait a 0 px de large,
      un bouton partant jusqu'a x = -172. Il faut une largeur EXPLICITE sur le
      contenu ; les parents se dimensionnent ensuite dessus.
   ========================================================================== */
body .vm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .6em 1.3em;
  border: 1px solid transparent; border-radius: var(--rayon-s);
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
body .vm-btn.vm-btn-primary { background: var(--rouge); color: #fff; }
body .vm-btn.vm-btn-primary:hover,
body .vm-btn.vm-btn-primary:focus-visible { background: var(--rouge-fonce); color: #fff; text-decoration: none; }
body .vm-btn.vm-btn-secondary {
  background: #fff; color: var(--encre); border-color: var(--champ-bordure);
}
body .vm-btn.vm-btn-secondary:hover,
body .vm-btn.vm-btn-secondary:focus-visible {
  background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge-bordure); text-decoration: none;
}

#fancybox-overlay { background: rgba(38, 37, 35, .45); }
#fancybox-wrap {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%);
  width: auto !important; height: auto !important; padding: 0 !important;
}
#fancybox-outer {
  width: auto !important; height: auto !important; overflow: visible !important;
  background: #fff; border-radius: var(--rayon-m);
  box-shadow: 0 18px 50px rgba(38, 37, 35, .22);
}
#fancybox-content {
  width: min(430px, 88vw) !important; height: auto !important;
  overflow: visible !important; border: 0;
}
/* Le balisage place les BOUTONS AVANT le message ; une grille remet le message
   en premier sans toucher au HTML de VirtueMart. */
#fancybox-content > div {
  width: auto !important; height: auto !important;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--espace-3); padding: var(--espace-5);
}
#fancybox-content h4 {
  grid-column: 1 / -1; grid-row: 1; margin: 0;
  font-family: var(--police-titre); font-size: var(--t-m); font-weight: 600;
  color: var(--encre); line-height: 1.35;
}
#fancybox-content .continue_link { grid-column: 1; grid-row: 2; }
#fancybox-content .showcart { grid-column: 2; grid-row: 2; float: none; }
#fancybox-content br { display: none; }
/* Sur telephone, les deux boutons ne tiennent pas cote a cote : ils s'empilent,
   l'action principale en premier. */
@media (max-width: 480px) {
  #fancybox-content > div { grid-template-columns: 1fr; }
  #fancybox-content .showcart { grid-column: 1; grid-row: 2; }
  #fancybox-content .continue_link { grid-column: 1; grid-row: 3; }
}
/* ==========================================================================
   Panier — correctifs sur les composants de VP One Page Checkout
   --------------------------------------------------------------------------
   Constate a l'ecran sur /panier.html en 1440 px, puis trace jusqu'a la regle
   fautive. Quatre defauts, quatre causes distinctes.
   ========================================================================== */

/* 1. L'indicateur de chargement des boutons. VP OPC le declare a 17x3 px
      (light-checkout.css:819) ; il se calculait a 50x50 avec 24 px de
      remplissage et une bordure, ce qui gonflait « S'inscrire et commander »
      et « Se connecter et commander » a 93 px de haut avec un carre blanc au
      milieu. On lui rend les dimensions voulues par le plugin. */
#ProOPC .proopc-button-process {
  width: 17px; height: 3px; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: none;
  vertical-align: middle;
}

/* 2. VP OPC pose .full-input sur le LABEL autant que sur le champ. La regle
      generique de champ ci-dessus habillait donc l'intitule comme une zone de
      saisie : d'ou les deux boites blanches cote a cote (« E-mail * » dans un
      cadre, puis le vrai champ dans un autre). Un intitule reste du texte. */
#ProOPC label.full-input,
#ProOPC label.proopc-input {
  display: block; min-height: 0; margin: 0 0 .35em;
  padding: 0; background: none; border: 0; border-radius: 0;
  font-size: var(--t-s); font-weight: 500; color: var(--texte); line-height: 1.4;
}

/* 3. .proopc-input n'est JAMAIS un champ — verifie sur la page rendue : zero
      input, select ou textarea ne porte cette classe. C'est toujours un
      CONTENEUR, autour d'un champ qui a deja sa bordure, mais aussi autour du
      bouton d'envoi et de la liste « Identifiant oublie ? ». La regle
      precedente, limitee a :has(input...), laissait donc un cadre autour de ces
      deux derniers. Un conteneur ne dessine rien. */
#ProOPC .proopc-input,
#ProOPC .proopc-input-append,
#ProOPC .proopc-input-prepend {
  min-height: 0; padding: 0; background: none; border: 0; border-radius: 0;
}

/* Indicateur de force du mot de passe. Son conteneur est une rangee flex sans
   retour a la ligne : l'indicateur s'y retrouvait comprime sur 43 px de large,
   un mot par ligne (« Force / du / mot / de / passe: »). Il passe sous le champ,
   sur toute la largeur. */
#ProOPC .proopc-input-append { flex-wrap: wrap; align-items: center; }
#ProOPC .password-stregth,
#ProOPC .strength-meter { flex: 1 0 100%; width: 100%; float: none; }

/* 4. Prix. VP OPC impose un rouge saumon #FE5252 etranger a la charte
      (light-checkout.css:1549 et 2747). Les lignes passent a l'encre, seul le
      total general garde le rouge de la marque. */
#ProOPC .final-price,
#ProOPC .product-discount,
#ProOPC .product-price .PricesalesPrice,
#ProOPC .col-total .PricesalesPrice,
#ProOPC .PricesalesPrice,
#ProOPC .PricediscountedPriceWithoutTax { color: var(--encre); }
#ProOPC .grand-total .PricebillTotal,
#ProOPC .grand-total .PricesalesPrice {
  color: var(--rouge); font-weight: 700; font-size: var(--t-m);
}

/* 5. Boutons de ligne (mettre a jour la quantite, retirer du panier). C'etaient
      deux blocs rouges de tailles differentes (42x54 et 52x44) qui se
      chevauchaient. Ce sont des actions utilitaires, pas l'action principale de
      la page : boutons carres discrets, le rouge n'apparaissant qu'au survol. */
#ProOPC .proopc-input-append { align-items: center; gap: var(--espace-2); }
#ProOPC .proopc-qty-input,
#ProOPC input.input-ultra-mini {
  width: 64px; min-width: 64px; min-height: 44px; height: 44px;
  text-align: center; font-variant-numeric: tabular-nums;
}
#ProOPC .proopc-task-updateqty,
#ProOPC .proopc-task-deleteproduct {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; margin: 0;
  background: none; color: var(--texte-pale);
  border: 1px solid var(--champ-bordure); border-radius: var(--rayon-s);
}
#ProOPC .proopc-task-updateqty:hover, #ProOPC .proopc-task-updateqty:focus-visible,
#ProOPC .proopc-task-deleteproduct:hover, #ProOPC .proopc-task-deleteproduct:focus-visible {
  background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge-bordure);
}
#ProOPC .proopc-task-updateqty i, #ProOPC .proopc-task-deleteproduct i { margin: 0; }

/* 6. Les deux boutons d'engagement, eux, sont bien l'action principale :
      pleine largeur de leur colonne, hauteur confortable. */
#ProOPC #proopc-task-registercheckout,
#ProOPC #proopc-task-loginajax {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  float: none; width: 100%; min-height: 48px; height: auto;
  margin-top: var(--espace-4);
}

/* ==========================================================================
   Panier — titre de page et couleurs restees hors charte
   --------------------------------------------------------------------------
   Releve fait sur la page rendue : quatre couleurs ne venaient d'aucune variable
   du theme mais des feuilles de VP OPC, chargees APRES celle du template.
   ========================================================================== */
#ProOPC h1.cart-page-title {
  margin: 0 0 var(--espace-5);
  font-family: var(--police-titre); font-size: var(--t-h2); font-weight: 700;
  color: var(--encre); line-height: 1.15; letter-spacing: -.015em;
  padding: 0; border: 0;
}
/* Le compte de produits accompagne le titre : meme famille, ton attenue. */
#ProOPC h1.cart-page-title .septa,
#ProOPC h1.cart-page-title #proopc-item-count {
  color: var(--texte-pale); font-weight: 500;
}
/* L'asterisque des champs obligatoires etait au rouge vif #EC1C00 de VP OPC. */
#ProOPC .asterisk,
#ProOPC label .asterisk,
#ProOPC .proopc-input-group-level .asterisk { color: var(--rouge); }

/* La barre « Vider le panier / Poursuivre vos achats » restait en flottants. */
#ProOPC .proopc-toolbar-right { float: none; }
#ProOPC .proopc-row:has(.proopc-toolbar-right) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4);
  margin-bottom: var(--espace-4);
}
/* ==========================================================================
   Panier — le formulaire de commande (inscription et connexion)
   --------------------------------------------------------------------------
   VP OPC pose les deux panneaux en FLOTTANTS, coiffes d'un <h3> gris a angles
   droits pose sur un cadre a angles droits : un « fieldset » des annees 2000,
   etranger au reste du site qui travaille en cartes arrondies. Les hauteurs
   etaient de plus egalisees par un min-height calcule en JavaScript et pose en
   style en ligne, d'ou des panneaux de 624 px pour 480 px de contenu.
   ========================================================================== */
/* VP OPC pose un clearfix en ::before / ::after sur ce conteneur
   (light-checkout.css). Dans une GRILLE, ces pseudo-elements deviennent des
   elements de grille a part entiere : ::before occupait la premiere colonne,
   ce qui repoussait les deux panneaux vers la droite et laissait une colonne
   vide de 380 px a gauche. Le clearfix n'a plus d'objet — il n'y a plus de
   flottant a degager. */
#ProOPC .proopc-register-login::before,
#ProOPC .proopc-register-login::after { display: none; }

/* Deux panneaux, deux colonnes. « auto-fit » en creait trois dans un conteneur
   de 1188 px. */
#ProOPC .proopc-register-login {
  display: grid; grid-template-columns: 1fr;
  gap: var(--espace-5); align-items: stretch;
}
@media (min-width: 760px) {
  #ProOPC .proopc-register-login { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#ProOPC .proopc-register,
#ProOPC .proopc-login {
  float: none; width: auto; margin: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--trait-doux); border-radius: var(--rayon-m);
  overflow: hidden;
}

/* En-tete de panneau : integre a la carte, plus de cadre dans le cadre. */
#ProOPC .proopc-register > h3,
#ProOPC .proopc-login > h3 {
  margin: 0 !important; padding: var(--espace-4) var(--espace-5);
  background: var(--fond-alt); border: 0 !important;
  border-bottom: 1px solid var(--trait-doux); border-radius: 0;
  font-family: var(--police-titre); font-size: var(--t-m); font-weight: 600;
  color: var(--encre); line-height: 1.3;
  /* L'un des deux intitules tient sur deux lignes, l'autre sur une :
     sans hauteur minimale, les formulaires ne demarraient pas au meme
     niveau d'une colonne a l'autre. */
  display: flex; align-items: center;
  min-height: calc(2 * 1.3em + 2 * var(--espace-4));
}
#ProOPC .proopc-register > .proopc-inner,
#ProOPC .proopc-login > .proopc-inner {
  flex: 1; padding: var(--espace-5); border: 0; border-radius: 0;
  /* Le min-height calcule en JS est pose en style en ligne : la grille se
     charge desormais d'egaliser les colonnes, on le neutralise. */
  min-height: 0 !important;
}
#ProOPC .proopc-inner .proopc-inner { padding: 0; border: 0; min-height: 0 !important; }
#ProOPC h4.proopc-subtitle {
  margin: 0 0 var(--espace-4); font-family: var(--police-titre);
  font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); line-height: 1.45;
}

/* Une ligne de formulaire = un intitule AU-DESSUS de son champ, sur toute la
   largeur. VP OPC les mettait cote a cote en flottants, 40 % / 60 %, ce qui
   laissait un grand vide entre les deux et cassait la lecture. */
#ProOPC .proopc-group { display: block; margin: 0 0 var(--espace-4); }
#ProOPC .proopc-group::after { content: ""; display: table; clear: both; }
#ProOPC .proopc-input-group-level { float: none; width: auto; }
#ProOPC .proopc-input,
#ProOPC .proopc-input-append,
#ProOPC .proopc-input-prepend { float: none; width: auto; }
#ProOPC .proopc-group input[type="text"],
#ProOPC .proopc-group input[type="email"],
#ProOPC .proopc-group input[type="password"],
#ProOPC .proopc-group select { width: 100%; margin: 0; }

/* Indicateur de force du mot de passe : sous le champ, pas a cote. */
#ProOPC .password-stregth {
  width: auto; float: none; margin-top: var(--espace-2);
  font-size: var(--t-xs); color: var(--texte-pale);
}
#ProOPC .strength-meter { width: 100%; height: 4px; border-radius: var(--rayon-plein); overflow: hidden; }

/* « Se souvenir de moi » : la case et son intitule sur une meme ligne. */
#ProOPC label.proopc-checkbox {
  display: flex; align-items: center; gap: .55em;
  font-size: var(--t-s); color: var(--texte); font-weight: 400;
}
#ProOPC label.proopc-checkbox input { margin: 0; }

/* Liens de service (identifiant oublie, mot de passe perdu) : discrets. */
#ProOPC .proopc-ul { margin: var(--espace-3) 0 0; padding: 0; list-style: none; }
#ProOPC .proopc-ul li { margin: 0; }
#ProOPC .proopc-ul a { font-size: var(--t-xs); color: var(--texte-doux); }
#ProOPC .proopc-ul a:hover { color: var(--rouge); }

#ProOPC .asterisk { color: var(--rouge); margin-left: .15em; }
#ProOPC .hover-tootip { color: var(--texte); }

/* ---- Tableau du panier ---- */
#proopc-carttable-form table { width: 100%; border-collapse: collapse; }
#proopc-carttable-form th {
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-pale);
  background: none;
  border-bottom: 1px solid var(--trait);
  padding: var(--espace-3);
}
#proopc-carttable-form td {
  padding: var(--espace-4) var(--espace-3);
  border-bottom: 1px solid var(--trait-doux);
  vertical-align: top;
}
#proopc-carttable-form .col-name a { color: var(--encre); font-weight: 500; }
#proopc-carttable-form .col-name a:hover { color: var(--rouge); }
#proopc-carttable-form .col-price,
#proopc-carttable-form .col-total,
#proopc-carttable-form .col-tax,
#proopc-carttable-form .col-discount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#proopc-carttable-form .col-qty input { width: 68px; text-align: center; }

/* ---- Récapitulatif des prix ---- */
#proopc-pricelist {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--espace-5);
}
#proopc-pricelist .vpopc-price,
#ProOPC .vpopc-price { font-variant-numeric: tabular-nums; }
#proopc-pricelist .grand-total,
#ProOPC .grand-total {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--t-l);
  color: var(--encre);
  border-top: 1px solid var(--trait);
  padding-top: var(--espace-3);
}
#ProOPC .line-through { text-decoration: line-through; color: var(--texte-pale); }
#ProOPC .tax-per-bill { font-size: var(--t-xs); color: var(--texte-pale); }

/* ---- Livraison, paiement, coupon ---- */
#proopc-shipments label, #proopc-payments label {
  display: flex; align-items: flex-start; gap: var(--espace-3);
  padding: var(--espace-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  margin-bottom: var(--espace-3);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
#proopc-shipments label:hover, #proopc-payments label:hover { border-color: var(--rouge); background: var(--rouge-clair); }
#ProOPC input[type="radio"], #ProOPC input[type="checkbox"] { accent-color: var(--rouge); min-height: 0; width: auto; }

#proopc-coupon { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }

/* ---- Confirmation ---- */
#proopc-confirm-order .proopc-btn { width: 100%; min-height: 52px; font-size: var(--t-m); }
#proopc-system-message:empty { display: none; }

/* ---- Mise en page ---- */
#ProOPC .proopc-row { display: flex; flex-wrap: wrap; gap: var(--espace-5); }
#ProOPC .proopc-column3 { flex: 1 1 260px; min-width: 0; }

@media (max-width: 760px) {
  #ProOPC .proopc-step { padding: var(--espace-4); }
  #proopc-carttable-form .col-tax, #proopc-carttable-form .col-discount { display: none; }
}

/* ---- Connexion / inscription pendant la commande ---- */
#proopc-login-process, #proopc-register-process, #proopc-cart-summery {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--espace-5);
  margin-bottom: var(--espace-5);
}
#proopc-cart-summery { background: var(--surface); }
#ProOPC .proopc-input-append { display: flex; gap: var(--espace-2); align-items: stretch; }
#ProOPC .proopc-input-append .proopc-input { flex: 1 1 auto; }
#ProOPC .hover-tootip { color: var(--texte-pale); cursor: help; }
#proopc-preloader { border-color: var(--rouge) transparent transparent transparent; }

/* ------------------------------------------------- Recherche dans l'en-tête */
.entete__recherche { flex: 0 0 auto; min-width: 0; }
/* Suggestions de Smart Search */

/* La pastille tient sur mobile, contrairement a l ancien champ deroule. */
@media (max-width: 920px) {
  .mbi-recherche__boite { width: min(320px, 62vw); }
}

/* ------------------------------------------------------ Menu du pied de page */
.pied .menu-simple--footer { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-5); padding: 0; }
.pied .menu-simple--footer > li > .menu-simple__lien,
.pied .menu-simple__lien {
  display: inline-block; padding: var(--espace-1) 0; min-height: 0;
  border: 0; font-size: var(--t-s); font-weight: 400; color: var(--anthracite-clair);
}
.pied .menu-simple__lien:hover { color: #fff; text-decoration: underline; }
.pied .menu-simple__lien.est-actif { color: #fff; }
.pied .menu-simple .mega__note { display: none; }
.pied .menu-simple--n1 { padding-left: 0; }
.pied .mod-custom, .pied .custom { font-size: var(--t-s); color: var(--anthracite-clair); }
.pied .mod-custom p { margin: 0; }

/* ---- Bouton « Ajouter au panier » : VirtueMart cible span.addtocart-button
   input.addtocart-button (0,2,2) et charge sa feuille après la nôtre. On monte
   d'un cran de spécificité, sans !important. ---- */
.vm-carte .vm-carte__action span.addtocart-button input.addtocart-button,
.vm-carte .vm-carte__action span.addtocart-button input.notify-button,
.vm-fiche .vm-fiche__achat-bloc span.addtocart-button input.addtocart-button,
.vm-fiche .vm-fiche__achat-bloc span.addtocart-button input.notify-button,
.vm-carte .vm-carte__action input.highlight-button,
.vm-fiche .vm-fiche__achat-bloc input.highlight-button {
  background: var(--rouge);
  background-image: none;
  color: #fff;
  border: 0;
  border-radius: var(--rayon-s);
  box-shadow: none;
  text-shadow: none;
  min-height: 44px;
  padding: 0 1.1em;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-s);
  line-height: 1;
  cursor: pointer;
}
.vm-carte .vm-carte__action span.addtocart-button input.addtocart-button:hover,
.vm-carte .vm-carte__action span.addtocart-button input.addtocart-button:focus,
.vm-fiche .vm-fiche__achat-bloc span.addtocart-button input.addtocart-button:hover,
.vm-fiche .vm-fiche__achat-bloc span.addtocart-button input.addtocart-button:focus {
  background: var(--rouge-fonce);
  color: #fff;
}
/* Le conteneur <span> de VirtueMart porte lui aussi un fond : on le neutralise. */
.vm-carte .vm-carte__action span.addtocart-button,
.vm-fiche .vm-fiche__achat-bloc span.addtocart-button {
  background: none; border: 0; box-shadow: none; padding: 0; display: inline-block;
}

/* ------------------------------------------- Module « Produits VirtueMart » */
/* Le chapeau occupe toute la largeur du module, comme la grille en dessous.
   La limite de 76ch qui existait ici arretait le texte aux deux tiers et donnait
   l'impression qu'il etait coupe. Contrepartie assumee : sur un grand ecran les
   lignes depassent la centaine de caracteres, ce qui se lit moins bien. */
.vm-module-produits__intro { color: var(--texte-doux); max-width: none; margin-bottom: var(--espace-5); }
.vm-module-produits__intro p:last-child { margin-bottom: 0; }
.vm-grille--module { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (min-width: 1100px) {
  .vm-grille--module { grid-template-columns: repeat(var(--vm-colonnes, 4), minmax(0, 1fr)); }
}
.vm-carte__voir { width: 100%; justify-content: center; gap: .55em; }
.vm-carte__action { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--espace-2); }
.vm-carte__pied:has(.vm-carte__voir) { flex-direction: column; align-items: stretch; }
.vm-grille--module .vm-carte__visuel { height: 220px; }
.vm-grille--module .vm-carte__visuel img { max-height: 100%; width: auto; }

/* ---- Utilitaire Bootstrap emis par plusieurs composants du coeur (mod_finder,
   com_users...). Bootstrap n'est plus charge : on le definit nous-memes. ---- */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Le bouton de recherche etait positionne par rapport a l'en-tete (sticky) faute
   d'ancetre positionne : le conteneur du champ devient l'ancre. */


/* ==========================================================================
   Fiche produit — resserrage (retour client : « marges enormes »)
   ========================================================================== */
.vm-fiche__nav { margin-bottom: var(--espace-4); }
/* Deux colonnes proportionnelles : le texte a besoin de plus de place que l'image */
.vm-fiche__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espace-6); }
.vm-fiche__visuel .main-image { padding: var(--espace-4); min-height: 300px; }
.vm-fiche__visuel .main-image img, .vm-fiche__visuel .main-image a { display: block; width: 100%; }
.vm-fiche__visuel .main-image img { max-height: 520px; object-fit: contain; margin: 0 auto; }
.vm-fiche__titre { font-size: clamp(1.25rem, 1.1vw + .95rem, 1.6rem); margin-bottom: var(--espace-2); line-height: 1.2; overflow-wrap: anywhere; }
.vm-fiche__marque { margin-bottom: var(--espace-1); }
.vm-fiche__identifiants { margin-bottom: var(--espace-3); }
.vm-fiche__resume { margin-bottom: var(--espace-4); line-height: 1.55; font-size: var(--t-s); }
.vm-fiche__resume p { margin-bottom: var(--espace-2); }
.vm-fiche__achat-bloc { padding: var(--espace-4); gap: var(--espace-3); }
/* Blocs d'affichage produit fournis par les plugins (livraison, etc.) : discret */
.vm-fiche__achat > [class*="shipment"], .vm-fiche__achat > [class*="payment"] {
  font-size: var(--t-xs); color: var(--texte-pale); margin-bottom: var(--espace-3);
}
.vm-reassurance { margin-top: var(--espace-4); gap: var(--espace-3); }
.vm-fiche__description { margin-top: var(--espace-6); padding-top: var(--espace-5); }
/* Quand une colonne laterale existe, la fiche empile ses deux colonnes plus tot */
.grille-principale--droite .vm-fiche__grille,
.grille-principale--gauche .vm-fiche__grille { grid-template-columns: minmax(0, 1fr); gap: var(--espace-5); }
.grille-principale--droite .vm-fiche__visuel .main-image { min-height: 0; }
.grille-principale--droite .vm-fiche__visuel .main-image img { max-height: 380px; }
@media (min-width: 1240px) {
  .grille-principale--droite .vm-fiche__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
/* Colonne laterale un peu plus etroite sur les pages boutique.
   ENFERMEE DANS UNE MEDIA QUERY, ET C'EST INDISPENSABLE. Sans cela, cette regle
   (specificite 0,2,0, ecrite plus bas dans le fichier) l'emportait sur le repli
   mobile de la ligne 555 (specificite 0,1,0) : sur telephone, les pages boutique
   restaient en deux colonnes, la laterale figee a 260 px et le contenu ecrase a
   39 px de large — un mot par ligne. Le seuil doit rester aligne sur celui du
   bloc adaptatif ci-dessus (max-width: 1080px). */
@media (min-width: 1081px) {
  .composant-com_virtuemart .grille-principale--droite { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* ---- Fiche produit : neutraliser les largeurs heritees de VirtueMart.
   vm-ltr-site.css dimensionne .vm-product-media-container et
   .vm-product-details-container (largeur en %, flottant) ; ces classes restent
   sur nos colonnes pour les plugins, mais c'est la grille qui doit les tailler. ---- */
.productdetails-view.vm-fiche .vm-fiche__grille > .vm-fiche__visuel.vm-product-media-container,
.productdetails-view.vm-fiche .vm-fiche__grille > .vm-fiche__achat.vm-product-details-container {
  width: 100% !important; max-width: none !important; min-width: 0;
  float: none !important; margin: 0 !important; padding: 0 !important;
}
.productdetails-view.vm-fiche .vm-fiche__visuel .main-image,
.productdetails-view.vm-fiche .vm-fiche__visuel .main-image a,
.productdetails-view.vm-fiche .vm-fiche__visuel .main-image img { width: 100% !important; max-width: 100% !important; float: none; }
.productdetails-view.vm-fiche .vm-fiche__visuel .main-image img { height: auto; object-fit: contain; }
.productdetails-view.vm-fiche .spacer-buy-area { width: auto !important; float: none !important; }

/* ---- Cartes du module produits : bouton epingle en bas, compact et discret ----
   Les cartes d'une meme ligne ont la meme hauteur (grille, align-items: stretch).
   Le pied prend margin-top:auto pour s'aligner quelle que soit la longueur du resume. */
.vm-grille--module .vm-carte__corps { gap: var(--espace-2); }
.vm-grille--module .vm-carte__pied { margin-top: auto; padding-top: var(--espace-3); flex-direction: row; align-items: center; justify-content: space-between; }
.vm-grille--module .vm-carte__action { flex: 0 0 auto; flex-direction: row; }
.vm-grille--module .vm-carte__voir,
.vm-carte__voir {
  width: auto; min-height: 34px; padding: .35em .85em; gap: .4em;
  font-size: var(--t-xs); font-weight: 600;
  background: var(--fond); color: var(--rouge);
  border: 1px solid var(--rouge-bordure); border-radius: var(--rayon-plein);
}
.vm-carte__voir svg { width: 13px; height: 13px; }
.vm-carte__voir:hover, .vm-carte__voir:focus-visible { background: var(--rouge); color: #fff; border-color: var(--rouge); text-decoration: none; }
/* Resume borne a 3 lignes pour garder des cartes homogenes */
.vm-grille--module .vm-carte__resume { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------- Menu de catégories en colonne latérale */
.colonne .menu-simple--n0 > li > .menu-simple__lien {
  min-height: 0; padding: var(--espace-2) 0 var(--espace-1); border: 0;
  font-family: var(--police-titre); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texte-pale);
}
.colonne .menu-simple--n0 > li + li > .menu-simple__lien { margin-top: var(--espace-3); border-top: 1px solid var(--trait-doux); padding-top: var(--espace-3); }
.colonne .menu-simple--n1, .colonne .menu-simple--n2 { padding-left: 0; }
.colonne .menu-simple--n1 .menu-simple__lien,
.colonne .menu-simple--n2 .menu-simple__lien {
  display: flex; align-items: center; gap: .6em;
  min-height: 34px; padding: .3em .5em; margin-inline: -.5em;
  border: 0; border-radius: var(--rayon-s);
  font-size: var(--t-s); font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--anthracite); line-height: 1.3;
}
.colonne .menu-simple--n2 .menu-simple__lien { padding-left: 2.1em; font-size: var(--t-xs); color: var(--texte-doux); }
.colonne .menu-simple__lien:hover { background: var(--rouge-clair); color: var(--rouge); text-decoration: none; }
.colonne .menu-simple__lien.est-actif { background: var(--rouge-clair); color: var(--rouge); font-weight: 600; }
.colonne .menu-simple .mega__texte { display: block; min-width: 0; }
.colonne .menu-simple .mega__note { display: none; }
.colonne .menu-simple .mega__icone { width: 20px; height: 20px; flex: 0 0 auto; color: var(--texte-tres-pale); }
.colonne .menu-simple .mega__icone svg { width: 20px; height: 20px; }
.colonne .menu-simple__lien:hover .mega__icone, .colonne .menu-simple__lien.est-actif .mega__icone { color: var(--rouge); }
/* Icones SVG dans le mega-menu (entrees Materiel) */
/* Logo de marque depose sur un element de menu (« Image de lien »). Il est rendu
   en MASQUE et non en image : la forme du fichier decoupe un aplat de la couleur
   courante. Le logo prend donc le meme gris que les pictogrammes dessines, et
   vire au rouge au survol avec eux. Fonctionne avec un SVG comme avec un PNG a
   fond transparent. */
.mega__icone--logo {
  background-color: currentColor;
  -webkit-mask: var(--mbi-logo) center / contain no-repeat;
          mask: var(--mbi-logo) center / contain no-repeat;
}.mega__icone--svg { display: inline-flex; align-items: center; justify-content: center; color: var(--texte-tres-pale); }
.mega__icone--svg svg { width: 22px; height: 22px; }
.mega__lien:hover .mega__icone--svg { color: var(--rouge); }
/* Titres de modules en colonne laterale : plus sobres */
.colonne .panneau__titre { font-size: var(--t-m); margin-bottom: var(--espace-3); }
.colonne .panneau + .panneau { margin-top: var(--espace-6); }

/* ---- Colonne laterale : categories principales en en-tetes avec icone ---- */
.colonne .menu-simple--n0 > li > .menu-simple__lien {
  display: flex; align-items: center; gap: .55em;
  min-height: 38px; padding: var(--espace-2) 0;
  font-family: var(--police-titre); font-size: var(--t-m); font-weight: 600;
  letter-spacing: -.01em; text-transform: none; color: var(--encre);
}
.colonne .menu-simple--n0 > li > .menu-simple__lien .mega__icone { width: 24px; height: 24px; color: var(--rouge); }
.colonne .menu-simple--n0 > li > .menu-simple__lien .mega__icone svg { width: 24px; height: 24px; }
.colonne .menu-simple--n0 > li > .menu-simple__lien:hover { background: none; color: var(--rouge); }
.colonne .menu-simple--n0 > li > .menu-simple__lien.est-actif { background: none; color: var(--rouge); }
.colonne .menu-simple--n0 > li + li > .menu-simple__lien { margin-top: var(--espace-4); border-top: 1px solid var(--trait-doux); padding-top: var(--espace-4); }
/* Sous-entrees : alignees sous le texte de l'en-tete (icone 24 px + espace) */
.colonne .menu-simple--n1 { padding-left: calc(24px + .55em); }
.colonne .menu-simple--n1 .menu-simple__lien { min-height: 32px; padding: .25em .5em; font-size: var(--t-s); color: var(--texte); }
.colonne .menu-simple--n1 .menu-simple__lien .mega__icone { display: none; }

/* ==========================================================================
   Pages de prestations (refonte 2026) — balisage : migration/prestations/contrat-html.md
   ========================================================================== */

/* Méga-menu des prestations : une colonne par groupe, de largeur égale.
   Les groupes n'ont pas le même nombre d'entrées ; c'est la hauteur qui varie,
   pas la largeur, sinon la grille déborde dès que deux groupes sont fournis. */
.mega__interieur { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.mega__colonne { display: flex; flex-direction: column; }
/* overflow-x: hidden est INDISPENSABLE. En CSS, des qu'un axe passe en « auto »,
   l'autre cesse d'etre « visible » et devient « auto » lui aussi : sans cette
   ligne, chaque colonne du mega-menu affiche une barre de defilement horizontale
   pour quelques pixels de debordement. */
/* Hauteur : le panneau prend toute la place que l'ecran lui laisse, et ne
   defile que s'il en manque. Le plafond etait un « min(72vh, 620px) » : les
   620 px fixes forçaient une barre de defilement sur la premiere colonne meme
   sur un grand ecran, alors que la place etait la.
   Mesure : 238 px separent le haut de la fenetre du haut de la liste — barre
   utilitaire, en-tete, marge du panneau, titre de colonne et sa note. On les
   retire de la hauteur de fenetre, plus 32 px pour ne pas coller au bas.
   La colonne la plus fournie reclame 656 px : elle tient entiere des 926 px
   de hauteur de fenetre. En dessous, le defilement reprend son role. */
.mega__liste { max-height: calc(100vh - 270px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: var(--espace-2); }


@media (max-width: 1180px) {
  .mega__interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--espace-5); }
  .mega__colonne { border-inline-start: 0; padding-inline: 0 var(--espace-5); }
  .mega__liste { max-height: none; overflow: visible; }
}

/* Accroche sous le titre */
.prestation__accroche {
  font-size: var(--t-l); line-height: 1.5; color: var(--texte-doux);
  max-width: 62ch; margin: var(--espace-4) 0 var(--espace-7);
}

/* Sections */
.prestation__section { margin-block: var(--espace-7); }
.prestation__section > h2 { margin-bottom: var(--espace-4); }
.prestation__section > p, .prestation__section > ul, .prestation__section > ol,
.prestation__section .faq__item { max-width: 70ch; }
.prestation__section ul, .prestation__section ol { padding-left: 1.25rem; margin: 0 0 var(--espace-4); }
.prestation__section li { margin-bottom: var(--espace-2); }
.prestation__section li > strong { color: var(--encre); font-weight: 600; }

/* Liste à coches */
.liste-coches { list-style: none; padding-left: 0 !important; }
.liste-coches li { position: relative; padding-left: 1.9rem; }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--rouge-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a141c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* Étapes numérotées */
.etapes { list-style: none; padding-left: 0 !important; counter-reset: etape; }
.etapes li { position: relative; padding-left: 2.6rem; margin-bottom: var(--espace-3); counter-increment: etape; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: .05em; width: 1.85rem; height: 1.85rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--rouge); color: #fff;
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
}

/* Questions fréquentes */
.prestation__faq .faq__item { border-top: 1px solid var(--trait); padding: var(--espace-4) 0; }
.prestation__faq .faq__item:last-child { border-bottom: 1px solid var(--trait); }
.prestation__faq .faq__item h3 { font-size: var(--t-m); margin: 0 0 var(--espace-2); }
.prestation__faq .faq__item p { margin: 0; }

/* Bloc d'appel à l'action */
.prestation__cta {
  margin-block: var(--espace-7); padding: var(--espace-6); background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon-l);
}
.prestation__cta > p:first-child { font-size: var(--t-l); color: var(--encre); max-width: 60ch; }
.prestation__boutons { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin: var(--espace-4) 0 0; }

/* Prestations liées */
.prestation__liees ul { list-style: none; padding-left: 0 !important; display: grid; gap: var(--espace-3); }
.prestation__liees li { padding: var(--espace-3) var(--espace-4); border: 1px solid var(--trait); border-radius: var(--rayon-m); margin: 0; }
.prestation__liees li a { font-weight: 600; color: var(--encre); }
.prestation__liees li a:hover { color: var(--rouge); }

/* Grille de cartes (pages hub) */
.grille-cartes { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-block: var(--espace-5) var(--espace-7); }
.carte {
  display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-5);
  border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--fond);
  color: inherit; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease;
}
.carte:hover, .carte:focus-visible { border-color: var(--rouge); box-shadow: var(--ombre-douce); text-decoration: none; }
.carte__titre { font-size: var(--t-m); margin: 0; color: var(--encre); }
.carte__texte { margin: 0; font-size: var(--t-s); color: var(--texte-doux); flex: 1; }
.carte__lien { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s); color: var(--rouge); }
.carte__lien::after { content: " →"; }

/* Trous à remplir par MB Informatique : visibles tant qu'ils existent */
mark.a-completer {
  background: #fff3c4; color: #5c4200; border: 1px dashed var(--attention); border-radius: var(--rayon-s);
  padding: 0 .3em; font-weight: 500;
}

/* ==========================================================================
   Newsletter (AcyMailing) — bouton « S'abonner » aux couleurs du site
   --------------------------------------------------------------------------
   Le module rend le bouton en <input type="button"> (l'envoi passe par
   submitAcymForm()), avec les classes Bootstrap « btn btn-primary » que
   AcyMailing charge lui-meme : d'ou le bleu d'origine. On cible donc .subbutton
   et le type « button », pas seulement « submit », et on passe devant
   .btn-primary en ajoutant .btn au selecteur plutot qu'avec !important.
   Structure rendue : form > .acym_module_form > (.acym_form | p.acysubbuttons)
   ========================================================================== */
.acym_module_form {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espace-2);
}
.acym_module_form .acym_form { flex: 1 1 200px; min-width: 0; margin: 0; }
.acym_module_form .acym_form .onefield { margin: 0; }
.acym_module_form .acysubbuttons { flex: 0 0 auto; margin: 0; }

/* Champ e-mail : meme hauteur et meme trait que les autres champs du site */
.acym_module_form input[type="email"],
.acym_module_form input[type="text"] {
  width: 100%; min-height: 46px; padding: .55em .9em;
  border: 1px solid var(--champ-bordure); border-radius: var(--rayon-s);
  background: #fff; color: var(--encre);
  font-family: var(--police-texte); font-size: var(--t-s);
}
.acym_module_form input[type="email"]:focus-visible,
.acym_module_form input[type="text"]:focus-visible {
  outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-clair);
}

.acym_module_form .acysubbuttons .subbutton,
.acym_module_form .acysubbuttons input[type="button"],
.acym_module_form .acysubbuttons input[type="submit"],
.acym_module_form .acysubbuttons button,
.acym_module .subbutton.btn.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .55em 1.4em;
  background: var(--rouge); background-image: none;
  color: #fff; border: 0; border-radius: var(--rayon-s);
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-s);
  line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; box-shadow: none; text-shadow: none;
  transition: background-color .15s ease;
}
.acym_module_form .acysubbuttons .subbutton:hover,
.acym_module_form .acysubbuttons input[type="button"]:hover,
.acym_module_form .acysubbuttons button:hover,
.acym_module .subbutton.btn.btn-primary:hover { background: var(--rouge-fonce); color: #fff; }
.acym_module_form .acysubbuttons .subbutton:focus-visible,
.acym_module .subbutton.btn.btn-primary:focus-visible {
  outline: 2px solid var(--rouge-fonce); outline-offset: 2px;
}

/* Messages : erreur de champ et confirmation d'inscription */
.acym_module_form .acym__field__error__block:not(:empty) {
  margin-top: .35em; color: var(--rouge-fonce); font-size: var(--t-xs);
}
.acym_module .acym_message,
.acym_module .acymailing_notice,
.acym_module .acym__frontend__success {
  margin: 0; padding: .7em .9em; border-radius: var(--rayon-s);
  background: var(--rouge-clair); border: 1px solid var(--rouge-bordure);
  color: var(--encre); font-size: var(--t-s);
}

/* Le <noscript> ne doit pas ouvrir une ligne vide au-dessus du bouton */
.acym_module_form .acysubbuttons noscript { display: block; font-size: var(--t-xs); color: var(--texte); }

/* ------------------------------------------------- Barre de filtres produit
   VirtueMart rend ses filtres de champs personnalises dans une grille
   Bootstrap heritee : des .row/.col et des <hr class="new-line"> qui forcent un
   retour a la ligne tous les deux champs. On neutralise cette grille et on
   remet tout sur une seule ligne, qui se replie proprement en dessous.
   Le balisage d'origine n'est pas touche : uniquement de la mise en forme,
   donc rien a refaire lors d'une montee de version de VirtueMart. */

/* « display: contents » efface les deux conteneurs intermediaires de VirtueMart :
   les listes ET le bloc d'actions deviennent alors freres dans le meme flux, et
   le bouton peut fermer la ligne. Sans cela, la zone des listes forme un bloc
   ferme : la derniere liste se retrouvait seule sur sa ligne, etiree sur toute
   la largeur, et le bouton renvoye encore en dessous. */
.vm-recherche .vm-search-custom-values,
.vm-recherche .vm-search-custom-values .row { display: contents; }

/* Les separateurs de la grille d'origine n'ont plus lieu d'etre. */
.vm-recherche .vm-search-custom-values .new-line,
.vm-recherche .vm-search-custom-values hr { display: none; }

.vm-recherche { align-items: flex-end; }

/* 150 px de base : quatre listes plus le bouton tiennent sur une seule ligne
   meme dans une colonne retrecie par la barre laterale (environ 880 px). Au-dela
   elles s'elargissent a parts egales ; en dessous elles se replient une a une. */
.vm-recherche .vm-search-custom-values .col,
.vm-recherche .vm-search-custom-values [class^="col"] {
  flex: 1 1 150px;
  min-width: 0;
  max-width: none;
  padding: 0;
}

.vm-recherche .vm-search-custom-values .form-group { margin: 0; }

.vm-recherche .vm-search-custom-values label {
  display: block;
  margin-bottom: var(--espace-1);
  font-family: var(--police-texte);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--texte-pale);
}

.vm-recherche .vm-search-custom-values select {
  width: 100%;
  min-height: 42px;
  background-color: var(--fond);
}

/* Le bouton et le lien d'effacement ferment la ligne. */
.vm-recherche__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex: 0 0 auto;
}

.vm-recherche button[type="submit"],
.vm-recherche input[type="submit"] { min-height: 42px; flex: 0 0 auto; }

.vm-recherche__effacer {
  font-size: var(--t-xs);
  color: var(--texte-doux);
  text-decoration: underline;
  white-space: nowrap;
}
.vm-recherche__effacer:hover { color: var(--rouge); }

/* Un filtre actif doit se voir : sans cela le client ne comprend pas pourquoi
   la liste est courte. La classe est posee en JS, aucun pseudo-selecteur CSS ne
   renseigne l'etat d'une liste deroulante. */
.vm-recherche .vm-search-custom-values select.est-actif {
  border-color: var(--rouge);
  background-color: var(--rouge-clair);
  color: var(--rouge-fonce);
  font-weight: 600;
}

@media (max-width: 640px) {
  .vm-recherche__actions { flex: 1 1 100%; }
  .vm-recherche__actions .bouton { flex: 1 1 auto; }
}


/* ==========================================================================
   Fiche produit — caracteristiques techniques
   --------------------------------------------------------------------------
   VirtueMart rend les champs personnalises comme une suite de blocs
   label / valeur sans aucune structure de tableau : quatre lignes de texte
   empilees, sans alignement ni separation. On leur redonne la forme d'un
   tableau en CSS seul, sans surcharger le sous-gabarit — celui-ci sert a
   cinq positions differentes, le modifier toucherait aussi les produits
   associes et les blocs « ontop » et « onbot ».
   Balisage reel, releve sur une fiche en ligne :
     .product-fields > .product-field
       > .product-fields-title-wrapper > .product-fields-title > strong  (label)
       > .product-field-display                                          (valeur)
   ========================================================================== */
.vm-fiche .product-fields {
  margin-top: var(--espace-6);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rayon-m);
  overflow: hidden;
}
.vm-fiche .product-fields::before {
  content: "Caractéristiques";
  display: block;
  padding: var(--espace-3) var(--espace-4);
  background: var(--fond-alt);
  border-bottom: 1px solid var(--trait-doux);
  font-family: var(--police-titre);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-doux);
}
/* Selecteur a trois classes (0,3,0) : il FAUT passer au-dessus de la regle de
   VirtueMart « .product-fields .product-field { width:100%; float:left;
   display:inline-block } », de meme specificite que « .vm-fiche .product-field »
   mais chargee apres la feuille du modele. Le float blanchissait le display en
   « block » et la grille ne s'appliquait pas. Le float est annule explicitement. */
.vm-fiche .product-fields .product-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espace-3) var(--espace-4);
  align-items: baseline;
  float: none; width: auto; margin-bottom: 0;
  padding: var(--espace-3) var(--espace-4);
  border-top: 1px solid var(--trait-doux);
}
/* Le premier bloc suit deja le bandeau de titre : pas de double filet. */
.vm-fiche .product-fields > .product-field:first-of-type { border-top: 0; }
.vm-fiche .product-fields > .product-field:nth-of-type(even) { background: var(--fond-alt); }
/* VirtueMart pose un padding de 8 px et laisse l'interligne de la page (27 px)
   sur ce conteneur : la ligne montait a 68 px de haut pour un simple couple
   libelle / valeur. On l'aligne sur la colonne de droite. */
.vm-fiche .product-fields .product-field .product-fields-title-wrapper {
  display: block; min-width: 0; padding: 0;
  font-size: var(--t-s); line-height: 1.45;
}
.vm-fiche .product-fields .product-field .product-fields-title strong {
  font-weight: 500; font-size: var(--t-s); color: var(--texte-doux);
}
.vm-fiche .product-fields .product-field .product-field-display {
  font-weight: 600; font-size: var(--t-s); color: var(--encre);
  overflow-wrap: anywhere;
}
.vm-fiche .product-fields .product-field .product-field-desc {
  grid-column: 1 / -1;
  font-size: var(--t-xs); color: var(--texte-pale);
}
/* Le div de degagement de VirtueMart creerait une ligne vide dans la grille. */
.vm-fiche .product-fields > .clear { display: none; }

@media (max-width: 560px) {
  /* Sous cette largeur, deux colonnes hachent les libelles : on empile. */
  .vm-fiche .product-fields .product-field { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}


/* ==========================================================================
   Menu mobile — sous-menus repliables
   --------------------------------------------------------------------------
   Le panneau affichait la totalite de l'arborescence depliee : plus de
   cinquante entrees a faire defiler pour atteindre « Contact ». Chaque branche
   se plie desormais. Le libelle reste un lien et navigue ; seul le chevron
   plie et deplie — sinon il faudrait choisir entre ouvrir une categorie et
   voir ce qu'elle contient.
   ========================================================================== */
/* INDISPENSABLE. « .panneau-mobile ul » impose display: flex ; cette regle
   d'auteur l'emporte sur le « [hidden] { display: none } » de la feuille du
   navigateur. Sans la ligne ci-dessous, l'attribut hidden est bien pose par le
   script mais les sous-menus restent affiches : le repli ne se voit pas. */
.panneau-mobile ul.menu-simple[hidden] { display: none; }

.panneau-mobile .menu-simple__rangee {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--trait-doux);
}
.panneau-mobile .menu-simple__rangee > .menu-simple__lien {
  flex: 1 1 auto; min-width: 0; border-bottom: 0;
}
.panneau-mobile .menu-simple__bascule {
  flex: 0 0 auto; width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0;
  color: var(--texte-pale); cursor: pointer;
}
.panneau-mobile .menu-simple__bascule:hover,
.panneau-mobile .menu-simple__bascule:focus-visible { color: var(--rouge); }
.panneau-mobile .menu-simple__bascule svg { transition: transform .18s ease; }
.panneau-mobile .menu-simple__bascule[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Les niveaux replies sont decales et allegies : on voit d'un coup d'oeil ou
   l'on se trouve dans l'arborescence. */
.panneau-mobile .menu-simple__branche > ul.menu-simple {
  padding-left: var(--espace-4);
  border-left: 2px solid var(--trait-doux);
  margin-left: var(--espace-2);
}
@media (prefers-reduced-motion: reduce) {
  .panneau-mobile .menu-simple__bascule svg { transition: none; }
}