/* Mauvaise Pioche V5.5.1 — couche visuelle cartes
   Visual patch 3 : intégration des visuels dans le fond du site.
   Les images restent intactes ; seul un fondu CSS est appliqué sur leurs bords. */

.mp551-visual{
  position:relative;
  margin:0;
  overflow:visible;
  isolation:isolate;
  background:transparent;
  border:0;
  box-shadow:none;
}
.mp551-visual::before,
.mp551-visual::after{
  content:none;
}
.mp551-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:saturate(.94) contrast(1.025) drop-shadow(0 18px 30px rgba(0,0,0,.34));
}

/* Fondu renforcé pour l'accueil et "Comment ça marche".
   On dissout davantage le fond noir périphérique sans toucher aux dimensions. */
.mp551-home-visual img,
.mp551-how-visual img{
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.16) 6%,
      rgba(0,0,0,.55) 13%,
      #000 22%,
      #000 78%,
      rgba(0,0,0,.55) 87%,
      rgba(0,0,0,.16) 94%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.20) 5%,
      rgba(0,0,0,.60) 11%,
      #000 18%,
      #000 82%,
      rgba(0,0,0,.60) 89%,
      rgba(0,0,0,.20) 95%,
      transparent 100%);
  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.16) 6%,
      rgba(0,0,0,.55) 13%,
      #000 22%,
      #000 78%,
      rgba(0,0,0,.55) 87%,
      rgba(0,0,0,.16) 94%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.20) 5%,
      rgba(0,0,0,.60) 11%,
      #000 18%,
      #000 82%,
      rgba(0,0,0,.60) 89%,
      rgba(0,0,0,.20) 95%,
      transparent 100%);
  mask-composite:intersect;
  filter:saturate(.94) contrast(1.025) drop-shadow(0 8px 14px rgba(0,0,0,.14));
}

.mp551-visual figcaption{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:3;
  max-width:calc(100% - 36px);
  padding:7px 9px;
  border:1px solid rgba(200,185,170,.34);
  background:rgba(5,5,4,.78);
  color:var(--ink);
  font:900 10px var(--font-body);
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(2px);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

/* Accueil */
.mp551-home-visual{
  width:min(930px,100%);
  aspect-ratio:4/3;
  margin:18px auto 24px;
}
.mp551-home-visual img{object-position:center center}

/* Comment ça marche */
.mp551-how-visual{
  width:min(850px,100%);
  aspect-ratio:4/3;
  margin:16px auto 24px;
  transform:rotate(-.25deg);
}
.mp551-how-visual img{object-position:center center}
.mp551-how-visual figcaption{display:none}

/* Contact */
.mp551-contact-intro-art{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(210px,300px);
  align-items:center;
  gap:18px;
}
.mp551-contact-intro-copy{min-width:0}
.mp551-contact-visual{
  width:100%;
  aspect-ratio:4/3;
  min-height:150px;
}
.mp551-contact-visual img{
  object-position:center center;
  filter:saturate(.92) contrast(1.02) drop-shadow(0 12px 22px rgba(0,0,0,.3));
}


/* Renfort du fondu pour le bloc Contact :
   version 2 — dissolution un peu plus large pour effacer les derniers bords noirs. */
.mp551-contact-visual img{
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.14) 8%,
      rgba(0,0,0,.58) 17%,
      #000 27%,
      #000 73%,
      rgba(0,0,0,.58) 83%,
      rgba(0,0,0,.14) 92%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 8%,
      rgba(0,0,0,.62) 16%,
      #000 24%,
      #000 76%,
      rgba(0,0,0,.62) 84%,
      rgba(0,0,0,.16) 92%,
      transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.14) 8%,
      rgba(0,0,0,.58) 17%,
      #000 27%,
      #000 73%,
      rgba(0,0,0,.58) 83%,
      rgba(0,0,0,.14) 92%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 8%,
      rgba(0,0,0,.62) 16%,
      #000 24%,
      #000 76%,
      rgba(0,0,0,.62) 84%,
      rgba(0,0,0,.16) 92%,
      transparent 100%);
  mask-composite:intersect;
  filter:saturate(.94) contrast(1.02) drop-shadow(0 5px 10px rgba(0,0,0,.12));
}

@media(max-width:900px){
  .mp551-home-visual{width:min(790px,100%)}
  .mp551-contact-intro-art{grid-template-columns:1fr 240px}
}

@media(max-width:760px){
  .mp551-home-visual,.mp551-how-visual{
    width:100%;
    margin:14px auto 20px;
    transform:none;
  }

  /* Fondu légèrement plus court sur mobile pour préserver la lisibilité. */
  .mp551-home-visual img,
  .mp551-how-visual img,
  .mp551-contact-visual img{
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-composite:intersect;
  }

  /* Contact mobile : fondu un peu plus présent que le réglage générique. */
  .mp551-contact-visual img{
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 9%, #000 18%, #000 82%, rgba(0,0,0,.45) 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 7%, #000 15%, #000 85%, rgba(0,0,0,.45) 93%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 9%, #000 18%, #000 82%, rgba(0,0,0,.45) 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 7%, #000 15%, #000 85%, rgba(0,0,0,.45) 93%, transparent 100%);
    mask-composite:intersect;
  }

  .mp551-visual img{
    filter:saturate(.94) contrast(1.02) drop-shadow(0 12px 22px rgba(0,0,0,.3));
  }
  .mp551-visual figcaption{
    left:14px;
    bottom:14px;
    max-width:calc(100% - 28px);
    font-size:8px;
    letter-spacing:.09em;
    padding:6px 7px;
  }
  .mp551-contact-intro-art{grid-template-columns:1fr!important}
  .mp551-contact-visual{
    width:min(380px,100%);
    justify-self:center;
    min-height:0;
  }
}

@media(max-width:480px){
  .mp551-home-visual,.mp551-how-visual,.mp551-contact-visual{aspect-ratio:4/3}
}

/* V4 — CTA accueil : typographie moins massive, plus lisible.
   On garde les formes de boutons et l'univers grunge, mais on retire l'effet
   trop "Impact" / trop empâté uniquement sur les actions de l'accueil. */
.mp551-home-actions .btn,
.mp551-mini-actions .btn{
  font-family:var(--font-body)!important;
  font-weight:900;
  line-height:1.08;
  letter-spacing:.035em;
  text-decoration:none;
}

.mp551-home-actions .btn{
  font-size:clamp(18px,2vw,23px);
}

.mp551-mini-actions .btn{
  font-size:clamp(17px,1.7vw,21px);
}

@media(max-width:760px){
  .mp551-home-actions .btn,
  .mp551-mini-actions .btn{
    font-size:18px;
    letter-spacing:.025em;
  }
}

/* V5 — même correction typographique sur les CTA des autres pages publiques.
   On garde les gros titres de rubrique en display/grunge ; seuls les boutons
   d'action passent sur une typo moins empâtée. */
.mp551-public-actions .btn,
.two-btn .btn,
.mp551-contact-form .btn{
  font-family:var(--font-body)!important;
  font-weight:900;
  font-size:clamp(18px,2vw,23px);
  line-height:1.08;
  letter-spacing:.035em;
  text-decoration:none;
}

/* Le bouton d'envoi du formulaire est très large : taille légèrement contenue. */
.mp551-contact-form button.btn{
  font-size:clamp(18px,1.8vw,22px);
}

/* FAQ : on conserve "QUESTIONS PRATIQUES" dans la typo d'identité.
   Les CTA situés sous la FAQ héritent seulement du réglage ci-dessus. */

@media(max-width:760px){
  .mp551-public-actions .btn,
  .two-btn .btn,
  .mp551-contact-form .btn,
  .mp551-contact-form button.btn{
    font-size:18px;
    letter-spacing:.025em;
  }
}

/* V6 — CTA plus équilibrés :
   moins massifs, texte réellement centré, proportions plus propres. */
.mp551-home-actions .btn,
.mp551-mini-actions .btn,
.mp551-public-actions .btn,
.two-btn .btn,
.mp551-contact-form .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:58px;
  padding:10px 18px;
  font-family:var(--font-body)!important;
  font-weight:800;
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.12;
  letter-spacing:.025em;
  text-decoration:none;
}

/* Les petits CTA de l'accueil peuvent être un peu plus compacts. */
.mp551-mini-actions .btn{
  min-height:56px;
  font-size:clamp(16px,1.55vw,19px);
}

/* CTA principal de l'accueil : reste visible sans effet "pavé". */
.mp551-home-actions .btn{
  min-height:60px;
}

/* Bouton d'envoi du formulaire : même centrage, un peu plus respirant. */
.mp551-contact-form button.btn{
  min-height:60px;
  padding-inline:22px;
}

/* Corrige visuellement les boutons noirs/beige pour que le texte reste bien
   au centre malgré les formes découpées. */
.mp551-home-actions .btn,
.mp551-mini-actions .btn,
.mp551-public-actions .btn,
.two-btn .btn{
  box-sizing:border-box;
}

/* Mobile : on garde le même équilibre sans gonfler la typo. */
@media(max-width:760px){
  .mp551-home-actions .btn,
  .mp551-mini-actions .btn,
  .mp551-public-actions .btn,
  .two-btn .btn,
  .mp551-contact-form .btn,
  .mp551-contact-form button.btn{
    min-height:54px;
    padding:9px 14px;
    font-size:17px;
    line-height:1.12;
    letter-spacing:.02em;
  }
}

/* V7 — même finition CTA sur la page Demande de démo. */
.mp551-demo-form .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:58px;
  padding:10px 18px;
  font-family:var(--font-body)!important;
  font-weight:800;
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.12;
  letter-spacing:.025em;
  text-decoration:none;
}

@media(max-width:760px){
  .mp551-demo-form .btn{
    min-height:54px;
    padding:9px 14px;
    font-size:17px;
    line-height:1.12;
    letter-spacing:.02em;
  }
}