/* Plumber Deboucheur — v4-31 (2026-09-17). Charge apres v4-30.css.
   Bloc « Qui paie » de l'accueil : quatre cartes qui se retournent.
   Face avant = la photo en fond, assombrie, avec la situation centree dessus.
   Face arriere = le verdict et l'explication, centres sur un fond bleu nuit.
   Tout est portee par .a4-payeurs--flip pour ne rien changer aux autres pages
   qui utilisent encore .a4-payeurs (pages services, .a4-payeurs--3). */

/* ---------- 1. La grille ---------- */
.a4-payeurs--flip{
  grid-template-columns:repeat(4,minmax(min(240px,100%),1fr));
  gap:clamp(14px,1.3vw,22px);
}

/* ---------- 2. La carte : une scene 3D, hauteur fixe ---------- */
.a4-payeurs--flip .a4-payeur{
  position:relative;
  display:block;
  height:clamp(340px,29vw,430px);
  padding:0;
  border:0;
  border-radius:18px;
  background:none;
  cursor:pointer;
  perspective:1400px;
  /* un overflow autre que visible sur l'element qui porte la perspective
     aplatit la scene 3D sur plusieurs navigateurs Android */
  overflow:visible;
}
.a4-payeurs--flip .a4-payeur:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.a4-payeurs--flip .a4-flip{
  position:absolute;
  inset:0;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  /* la carte porte une photo plein cadre : sans couche dediee, le telephone
     recompose l'image a chaque image de l'animation et ca saccade */
  will-change:transform;
}

/* Le retournement par l'appui, valable partout. */
.a4-payeurs--flip .a4-payeur.is-retourne .a4-flip{transform:rotateY(180deg)}

/* Le survol et le focus ne retournent la carte que sur un vrai pointeur.
   Sur telephone, un appui laisse l'etat :hover (et le focus) colle sur la
   carte : elle partait a l'endroit et ne revenait plus jamais. */
@media (hover:hover) and (pointer:fine){
  .a4-payeurs--flip .a4-payeur:hover .a4-flip,
  .a4-payeurs--flip .a4-payeur:focus-within .a4-flip{transform:rotateY(180deg)}
}

.a4-payeurs--flip .a4-flip__face{
  position:absolute;
  inset:0;
  display:flex;
  border-radius:18px;
  overflow:hidden;
  background:var(--navy-deep);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  /* Chrome Android n'applique pas toujours le masquage de la face arriere :
     la face avant restait visible en miroir par-dessus le dos. On ne s'y fie
     donc plus, on eteint la face cachee. La bascule est retardee de la moitie
     de la rotation, donc elle tombe pile quand la carte est sur la tranche et
     ne se voit pas. */
  transition:opacity 1ms linear .35s;
}
.a4-payeurs--flip .a4-flip__face--av{transform:rotateY(0deg) translateZ(0)}
.a4-payeurs--flip .a4-flip__face--ar{transform:rotateY(180deg) translateZ(0);opacity:0}
.a4-payeurs--flip .a4-payeur.is-retourne .a4-flip__face--av{opacity:0}
.a4-payeurs--flip .a4-payeur.is-retourne .a4-flip__face--ar{opacity:1}
@media (hover:hover) and (pointer:fine){
  .a4-payeurs--flip .a4-payeur:hover .a4-flip__face--av,
  .a4-payeurs--flip .a4-payeur:focus-within .a4-flip__face--av{opacity:0}
  .a4-payeurs--flip .a4-payeur:hover .a4-flip__face--ar,
  .a4-payeurs--flip .a4-payeur:focus-within .a4-flip__face--ar{opacity:1}
}

/* ---------- 3. La photo en fond et son voile ---------- */
.a4-payeurs--flip .a4-payeur__fond{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
}
.a4-payeurs--flip .a4-payeur__voile{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to bottom,rgba(11,37,69,.76) 0%,rgba(11,37,69,.82) 55%,rgba(11,37,69,.92) 100%);
}

/* ---------- 4. Le contenu, centre sur la carte ---------- */
.a4-payeurs--flip .a4-payeur__corps{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(20px,2vw,32px) clamp(16px,1.6vw,26px);
  text-align:center;
}
/* v4-18 cible « .a4-payeurs .a4-payeur__corps b » et « … span » : il faut
   quatre classes pour reprendre la main sur la couleur du texte. */
.a4-payeurs--flip .a4-flip__face .a4-payeur__corps .a4-payeur__titre{
  font-family:"Archivo",sans-serif;
  font-size:var(--t-20);
  font-weight:800;
  line-height:1.22;
  color:#fff;
  text-wrap:balance;
}
.a4-payeurs--flip .a4-flip__face .a4-payeur__corps .a4-payeur__indice{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.1;
  text-transform:uppercase;
  color:#fff;
}
.a4-payeurs--flip .a4-payeur__indice em{font-style:normal}

/* ---------- 5. Le dos : le verdict, puis l'explication ---------- */
.a4-payeurs--flip .a4-flip__face .a4-payeur__corps .a4-payeur__verdict{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border-radius:999px;
  background:#fff;
  color:var(--navy-deep);
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.15;
  text-transform:uppercase;
}
.a4-payeurs--flip .a4-payeur--vous .a4-flip__face .a4-payeur__corps .a4-payeur__verdict{background:var(--orange);color:#fff}
.a4-payeurs--flip .a4-flip__face .a4-payeur__corps .a4-payeur__msg{
  font-size:var(--t-16);
  line-height:1.58;
  color:var(--on-navy);
  max-width:36ch;
}

/* ---------- 6. Surcharges responsive (toujours en dernier) ---------- */
@media (prefers-reduced-motion:reduce){
  .a4-payeurs--flip .a4-flip{transition-duration:.01ms}
  .a4-payeurs--flip .a4-flip__face{transition-delay:0s}
}
@media (max-width:1080px){
  .a4-payeurs--flip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .a4-payeurs--flip{grid-template-columns:minmax(0,1fr)}
  .a4-payeurs--flip .a4-payeur{height:clamp(300px,74vw,360px)}
  /* mouvement plus court et courbe plus simple : sur telephone, une rotation
     de 700 ms laisse voir chaque image perdue, 500 ms passe mieux */
  .a4-payeurs--flip .a4-flip{transition:transform .5s ease}
  .a4-payeurs--flip .a4-flip__face{transition-delay:.25s}
}