/* JMP Couleurs par famille — 1.0.0
 * Chargée APRÈS jmp-custom-css/custom.css. Elle ne connaît que deux choses : la classe .jmp-c
 * (fiche de boucle ayant une famille) / .jmp-page-c (page ayant une famille), et les variables
 * --jmp-c (couleur pleine) et --jmp-c-voile (la même à 30 %), posées par le plugin.
 * Elle remplace, une fois vérifiée en prod, les ~600 lignes « .category-dechets, .category-abfall,
 * .category-rifiuti… » de custom.css (lignes 336-500 et 906-1370 du relevé du 09/09/2026). */

/* 1. Le cadre de la fiche. Fiches PROJET (gabarits 42580/45019 : conteneur d45aaab ; 34411 :
 * a.box / 6680369) : le cadre est sur le lien-conteneur. Fiches ACTUALITÉ (gabarits 35130,
 * 45792, 33095 : conteneur a.boite_actu) : le cadre est sur l'item, comme avant. */
body .elementor-widget-loop-grid .e-loop-item.jmp-c > a.elementor-element-d45aaab,
body .elementor-widget-loop-grid .e-loop-item.jmp-c a.box,
body .elementor-widget-loop-grid .e-loop-item.jmp-c > a.elementor-element-6680369 {
  border: 2px solid var(--jmp-c);
  border-color: var(--jmp-c);
  --border-color: var(--jmp-c);
}
body .elementor-widget-loop-grid .e-loop-item.jmp-c:has(> a.boite_actu) {
  border: 2px solid var(--jmp-c);
}

/* 2. Le voile au survol */
body .elementor-widget-loop-grid .e-loop-item.jmp-c a { position: relative; }
body .elementor-widget-loop-grid .e-loop-item.jmp-c a::after {
  content: '';
  position: absolute; inset: 0;
  background-color: var(--jmp-c-voile);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
body .elementor-widget-loop-grid .e-loop-item.jmp-c a:hover::after { opacity: 1; }
/* la navigation précédent/suivant n'a pas de voile */
body .jmp-page-c .elementor-post-navigation a::after { background-color: unset !important; }

/* 3. Le « + » encerclé */
body .e-loop-item.jmp-c .icon-plus,
body .e-loop-item.jmp-c .icon-plus i {
  background-color: var(--jmp-c);
  border: 2px solid #fff;
  border-radius: 21px;
  width: 40px; height: 40px;
  color: #fff;
  transition: all .2s linear 0s;
}

/* 4. Les bandeaux de titre (fiches ET pages) */
body .e-loop-item.jmp-c a .titre:not(.elementor-motion-effects-element-type-background),
body .e-loop-item.jmp-c .elementor-element-b55d3d1:not(.elementor-motion-effects-element-type-background),
body .e-loop-item.jmp-c .elementor-element-6b558de:not(.elementor-motion-effects-element-type-background),
body .e-loop-item.jmp-c .titre-background,
body .e-loop-item.jmp-c .background-titre-news,
body .e-loop-item.jmp-c .elementor-widget-post-info,
body.jmp-page-c .titre-background,
body.jmp-page-c .background-titre-news,
body.jmp-page-c .elementor-element-b55d3d1:not(.elementor-motion-effects-element-type-background),
body.jmp-page-c .elementor-element-c54f60a:not(.elementor-motion-effects-element-type-background),
body.jmp-page-c .elementor-element-6b558de:not(.elementor-motion-effects-element-type-background) {
  background-color: var(--jmp-c);
}
body .e-loop-item.jmp-c .titreetdate .elementor-widget-post-info,
body .e-loop-item.jmp-c .boite_actu .actu_date.elementor-widget-post-info {
  background-color: unset;
}

/* 5. Le cadre de la page d'un projet (gabarit 42580) */
body.jmp-page-c .elementor-42580 .elementor-element.elementor-element-d45aaab,
body.jmp-page-c .elementor-36351 a,
body.jmp-page-c .elementor-38272 a {
  border: 2px solid var(--jmp-c);
  --border-color: var(--jmp-c);
  height: auto;
}

/* ═══ Correctifs du Word de Valentin (08/09/2026), mesurés le 09/09 ═══ */

/* Point 6 : en mobile les fiches projets sont figées à 221 px de haut (mesuré : a = 221px,
 * min-height 220px) alors que l'image passe AU-DESSUS du texte : le contenu déborde sur la
 * fiche suivante. Sous 768 px la fiche prend la hauteur de son contenu. */
@media (max-width: 767px) {
  body .elementor-widget-loop-grid .e-loop-item,
  body .elementor-widget-loop-grid .e-loop-item > a.e-con,
  body .elementor-widget-loop-grid .e-loop-item a.box {
    height: auto !important;
    max-height: none !important; /* le gabarit 42580 pose max-height:221px (mesuré 10/09) */
    min-height: 220px;
  }
}

/* Point 11 : le fond « brush » bleu (bg-bleu-clair.png, 406×418) était posé à 470 px fixes : il
 * s'arrêtait avant la fin du texte. Il suit maintenant la hauteur du bloc. */
body .nuage_brush.e-con-full.nuage_brush.e-flex.e-con.e-child {
  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* Point 10 : témoignages « Eco-Schools en un coup d'œil » / « auf einen Blick » : le brush orange
 * est en background-size:contain sur le conteneur du carrousel (f948536 FR, b2497b9 DE) ; en
 * mobile le texte dépasse de l'image. Sous 768 px l'image s'étire à la hauteur du texte. */
@media (max-width: 767px) {
  body .elementor-element.elementor-element-f948536,
  body .elementor-element.elementor-element-b2497b9 {
    background-size: 100% 100% !important;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Reprise de deux réglages de mise en page qui vivaient dans les blocs couleurs retirés de
 * custom.css (10/09/2026) : hauteur uniforme des fiches projet sur écran large (l'ancienne
 * règle `.category-projets-labellises a {height:221px}` ne valait qu'en FR), et le « + » des
 * fiches Nos offres remonté de 16 px. */
@media (min-width: 768px) {
  body .elementor-widget-loop-grid .e-loop-item.jmp-c > a.elementor-element-d45aaab,
  body .elementor-widget-loop-grid .e-loop-item.jmp-c a.box {
    height: 221px;
  }
}
body .e-loop-item.category-nos-offres .icon-plus,
body .e-loop-item.category-unser-angebot .icon-plus {
  margin-top: -16px;
}