/* #region PMR:INTERACTIVE-MOTION-CSS-PROTECTED */
/* PM Cleaning - couche d'interaction - V12 (2026-09-05)
   Ecarts avec V11 :
   - lumiere qui suit le curseur sur les photos de section et sur les boutons (region IM-CURSOR-LIGHT)
   - leger flottement permanent des preuves du heros, via la propriete translate (region IM-FLOAT-PROOF)
   - entrees des preuves avancees (.34s/.48s -> .22s/.34s) pour suivre le heros accelere
   - will-change:transform pose seulement sur les images reellement visibles */

/* #region PMR:IM-TOKENS */
:root {
  --pm-motion-ease: cubic-bezier(.22, .75, .24, 1);
  --pm-zoom-hover: 1.150;   /* reglage Pierre 05/09/2026. La video de reference mesurait 1.048 */
  --pm-glow-photo: 100px;   /* reglage Pierre. Rayon de la lueur sur les photos */
  --pm-glow-button: 30px;   /* reglage Pierre. Rayon de la lueur sur les boutons */
  --pm-float-travel: -10px; /* reglage Pierre. 0 = flottement desactive */
}
/* #endregion PMR:IM-TOKENS */

/* #region PMR:IM-FLOAT-PROOF  preuves flottantes sur le heros */
.pm-float-proof {
  position: absolute;
  z-index: 7;
  display: grid;
  grid-template-columns: 38px auto;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  padding: 10px 13px;
  border: 1px solid rgba(22, 42, 33, .12);
  border-radius: 15px;
  background: rgba(255, 255, 255, .94);
  color: #162a21;
  box-shadow: 0 14px 34px rgba(7, 57, 47, .16);
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  animation: pm-float-proof-in .72s var(--pm-motion-ease) forwards;
}

.pm-float-proof--rating {
  top: 18px;
  right: 18px;
  animation:
    pm-float-proof-in .72s var(--pm-motion-ease) .22s forwards,
    pm-float-idle 7.4s ease-in-out 1s infinite;
}

.pm-float-proof--team {
  bottom: 18px;
  left: 18px;
  animation:
    pm-float-proof-in .72s var(--pm-motion-ease) .34s forwards,
    pm-float-idle 8.6s ease-in-out 1.2s infinite;
}

.pm-hero-reveal .pmr-replay {
  top: auto;
  right: 18px;
  bottom: 18px;
}

.pm-float-proof__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #edf5f0;
  color: #0d4c3e;
}

.pm-float-proof__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pm-float-proof strong,
.pm-float-proof small {
  display: block;
}

.pm-float-proof strong {
  font-size: .83rem;
  line-height: 1.2;
}

.pm-float-proof small {
  margin-top: 2px;
  color: #53645e;
  font-size: .68rem;
  line-height: 1.25;
}
/* #endregion PMR:IM-FLOAT-PROOF */

/* #region PMR:IM-IMAGE-ZOOM  cadre a debordement masque et zoom des photos de section */
.pm-zoom-frame {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
  isolation: isolate;
  background: #eaf1ee;
}

.seg-row > .pm-zoom-frame {
  width: 220px;
  height: 130px;
  border-radius: 14px;
}

.line-card > .pm-zoom-frame {
  width: 180px;
  height: 100%;
  min-height: 150px;
}

/* V12.1 : cadre generique pour toute image marquee data-pm-zoom, quelle que soit la page.
   Le cadre epouse la largeur disponible et laisse l'image garder ses proportions. */
.pm-zoom-frame--auto {
  width: 100%;
  height: auto;
  border-radius: var(--pm-zoom-radius, 14px);
}

.pm-zoom-frame--auto img {
  height: auto !important;
}

.pm-zoom-frame img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  transform: scale(var(--pm-scroll-zoom, 1));
  transform-origin: center;
  transition: transform .72s var(--pm-motion-ease);
}

/* V12 : will-change seulement pendant que le cadre est reellement dans le viewport */
.pm-zoom-frame.pm-zoom-active img {
  will-change: transform;
}
/* #endregion PMR:IM-IMAGE-ZOOM */

/* #region PMR:IM-CARD-ENTRANCE  entree unique des cartes a l'apparition */
.pm-motion-target {
  transition: transform .38s var(--pm-motion-ease),
              opacity .38s var(--pm-motion-ease),
              box-shadow .38s var(--pm-motion-ease),
              border-color .38s var(--pm-motion-ease);
}

.pm-motion-ready .pm-motion-target:not(.pm-motion-visible) {
  opacity: 0;
  transform: translateY(14px);
}

.pm-motion-ready .pm-motion-target.pm-motion-visible {
  opacity: 1;
  transform: translateY(0);
}
/* #endregion PMR:IM-CARD-ENTRANCE */

/* #region PMR:IM-KEYFRAMES */
@keyframes pm-float-proof-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* translate est une propriete distincte de transform : le flottement se compose
   avec l'entree et avec le survol au lieu de les ecraser. */
@keyframes pm-float-idle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--pm-float-travel); }
}
/* #endregion PMR:IM-KEYFRAMES */

/* #region PMR:IM-CTA-ARROW  V12.1 : la fleche fait partie du libelle, sur TOUS les appareils
   V12.0 la placait dans la requete media survol : le libelle changeait entre desktop et mobile. */
a.btn.primary::after,
a.btn.light::after {
  content: "↗";
  display: inline-block;
  font-size: .86em;
  transition: transform .3s var(--pm-motion-ease);
}
/* #endregion PMR:IM-CTA-ARROW */

/* #region PMR:IM-HOVER  reactions au survol, souris fine uniquement */
@media (hover: hover) and (pointer: fine) {
  .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--pm-motion-ease),
                box-shadow .3s var(--pm-motion-ease),
                background-color .3s var(--pm-motion-ease),
                border-color .3s var(--pm-motion-ease);
  }

  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(7, 57, 47, .18);
  }

  a.btn.primary:hover::after,
  a.btn.light:hover::after {
    transform: translate(2px, -2px);
  }

  .btn:active {
    transform: translateY(-1px);
  }

  .pm-float-proof {
    transition: transform .32s var(--pm-motion-ease),
                box-shadow .32s var(--pm-motion-ease),
                border-color .32s var(--pm-motion-ease);
  }

  .pm-float-proof:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(13, 76, 62, .28);
    box-shadow: 0 20px 42px rgba(7, 57, 47, .22);
  }

  .seg-row:hover .pm-zoom-frame img,
  .line-card:hover .pm-zoom-frame img {
    transform: scale(var(--pm-zoom-hover));
  }

  .seg-row .arrow {
    display: inline-block;
    transition: transform .3s var(--pm-motion-ease), color .3s var(--pm-motion-ease);
  }

  .seg-row:hover .arrow {
    transform: translate(4px, -3px);
  }

  .pm-motion-ready .line-card.pm-motion-visible:hover,
  .pm-motion-ready .sys-card.pm-motion-visible:hover,
  .pm-motion-ready .case.pm-motion-visible:hover,
  .pm-motion-ready .avis-card.pm-motion-visible:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 76, 62, .28);
    box-shadow: 0 16px 34px rgba(7, 57, 47, .10);
  }
}
/* #endregion PMR:IM-HOVER */

/* #region PMR:IM-CURSOR-LIGHT  V12 : la lueur du curseur sort du heros
   Portee validee par Pierre le 05/09/2026 : heros + photos de section + boutons.
   Volontairement PAS applique aux blocs de texte courant. */
@media (hover: hover) and (pointer: fine) {
  .pm-zoom-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--pm-motion-ease);
    background: radial-gradient(circle var(--pm-glow-photo) at var(--pm-gx, 50%) var(--pm-gy, 50%),
                rgba(255, 253, 235, .34), rgba(226, 244, 236, .12) 44%, transparent 72%);
    mix-blend-mode: screen;
  }

  .pm-zoom-frame:hover::after,
  .seg-row:hover .pm-zoom-frame::after,
  .line-card:hover .pm-zoom-frame::after {
    opacity: 1;
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s var(--pm-motion-ease);
    background: radial-gradient(circle var(--pm-glow-button) at var(--pm-gx, 50%) var(--pm-gy, 50%),
                rgba(255, 255, 255, .3), transparent 66%);
  }

  .btn.light::before,
  .btn.outline::before {
    background: radial-gradient(circle var(--pm-glow-button) at var(--pm-gx, 50%) var(--pm-gy, 50%),
                rgba(7, 57, 47, .12), transparent 66%);
  }

  .btn:hover::before {
    opacity: 1;
  }
}
/* #endregion PMR:IM-CURSOR-LIGHT */

/* #region PMR:IM-FOCUS */
.btn:focus-visible,
.pm-float-proof:focus-visible,
.seg-row:focus-visible,
.line-card:focus-visible {
  outline: 3px solid #e3cd82;
  outline-offset: 4px;
}
/* #endregion PMR:IM-FOCUS */

/* #region PMR:IM-RESPONSIVE */
@media (max-width: 900px) {
  .split-head.sh-tight {
    grid-template-columns: 1fr;
  }

  .seg-row > .pm-zoom-frame {
    width: 100%;
    height: 170px;
  }

  .line-card > .pm-zoom-frame {
    width: 100%;
    height: 150px;
    min-height: 150px;
  }
}

@media (max-width: 620px) {
  .pm-float-proof {
    min-width: 0;
    grid-template-columns: 34px auto;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 13px;
  }

  .pm-float-proof--rating {
    top: 12px;
    right: auto;
    left: 12px;
  }

  .pm-float-proof--team {
    display: none;
  }

  .pm-float-proof__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .pm-float-proof strong {
    font-size: .76rem;
  }

  .pm-float-proof small {
    font-size: .62rem;
  }

  .pm-hero-reveal .pmr-replay {
    top: 12px;
    right: 12px;
    bottom: auto;
  }
}
/* #endregion PMR:IM-RESPONSIVE */

/* #region PMR:IM-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  .pm-float-proof,
  .pm-motion-ready .pm-motion-target,
  .pm-motion-ready .pm-motion-target:not(.pm-motion-visible),
  .pm-motion-ready .pm-motion-target.pm-motion-visible {
    opacity: 1;
    transform: none;
    translate: none;
    animation: none;
    transition: none;
  }

  .pm-zoom-frame img,
  .seg-row:hover .pm-zoom-frame img,
  .line-card:hover .pm-zoom-frame img {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .pm-zoom-frame::after,
  .btn::before {
    display: none !important;
  }
}
/* #endregion PMR:IM-REDUCED-MOTION */
/* #endregion PMR:INTERACTIVE-MOTION-CSS-PROTECTED */