/* ==========================================================================
   Aquaclean77 — comparateur avant/après du hero en jeu de cartes (.aad-*).
   Même principe que les cartes « nouveauté » (cartes-nouveaute.css) : la
   carte de devant lisible, la suivante derrière, décalée et pivotée ; des
   flèches, un compteur, une pause. Classes propres (.aad-*) pour ne pas
   entrer en collision avec .nouv-* qui coexistent sur la page.
   Aucun attribut style= : tout passe par des classes (CSP style-src 'self').
   ========================================================================== */

.aad{ position:relative; overflow:clip; }

/* ---------- la pile ----------
   Les cartes occupent la même cellule de grille : la hauteur de la pile est
   celle d'un comparateur, sans position:absolute à régler. La carte de devant
   est calée à gauche à 87 % de la largeur : la carte de derrière (translate
   13 %, rotation 7°, échelle .92) y trouve la place de dépasser sans sortir du
   cadre. Le bas est réservé au débord de la carte pivotée. */
.aad-deck{
  display:grid;
  padding:6px 8px 30px 8px;
}
.aad-card{
  grid-area:1 / 1;
  width:87%;
  align-self:start;
  transition:transform .32s cubic-bezier(.3,.7,.2,1), opacity .32s ease, visibility 0s;
}
.aad-card--front{ z-index:3; transform:none; opacity:1; visibility:visible; }
.aad-card--back{
  z-index:2;
  transform:translate(13%, 4%) rotate(7deg) scale(.92);
  opacity:.9; visibility:visible;
}
.aad-card--hors{
  z-index:1;
  transform:translate(13%, 4%) rotate(7deg) scale(.92);
  opacity:0; visibility:hidden;
  transition:transform .32s cubic-bezier(.3,.7,.2,1), opacity .32s ease, visibility 0s .32s;
}
/* la carte de derrière n'est pas manipulable : elle sert d'aperçu */
.aad-card--back .reveal-slider{ pointer-events:none; }

/* ---------- barre de commandes ---------- */
.aad-barre{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:6px;
}
.aad-fleche, .aad-pause{
  width:44px; height:44px; flex:none; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.aad-fleche{
  border:none;
  background:var(--water-dark); color:#fff;
  box-shadow:0 8px 18px -8px rgba(14,39,66,.55);
}
.aad-fleche:hover{ background:var(--water); }
.aad-fleche svg{ width:19px; height:19px; }
.aad-fleche--prec svg{ transform:scaleX(-1); }
.aad-pause{
  border:1.5px solid var(--water-dark);
  background:#fff; color:var(--water-dark);
}
.aad-pause:hover{ background:var(--foam); }
.aad-pause svg{ width:17px; height:17px; }
.aad-fleche:focus-visible, .aad-pause:focus-visible{
  outline:2px solid var(--water); outline-offset:2px;
}
.aad-compte{
  min-width:56px; text-align:center;
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.aad-pause[hidden]{ display:none; }

/* texte réservé aux lecteurs d'écran (annonce du changement de photo) */
.aad-vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:400px){
  .aad-deck{ padding-bottom:26px; }
  .aad-barre{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .aad-card, .aad-card--hors{ transition:none; }
}

/* ---------- cadre UNIFORME, jamais plus haut que l'écran (12/10/2026) ----------
   Toutes les cartes ont le même cadre en 4 / 5 (portrait léger, celui des photos de
   chantier prises au téléphone) : la pile ne change pas de taille d'une carte à
   l'autre. Une photo d'un autre format y est cadrée en « cover » ; c'est le
   calibrage de l'espace (zoom, position, rotation) qui règle ce cadrage.
   Hauteur bornée à l'écran, largeur déduite : jamais un géant qui repousse les
   commandes hors de la fenêtre. */
.aad{ --aad-hmax: clamp(300px, 62vh, 560px); --aad-ratio: .8; }
.aad .reveal{
  aspect-ratio: var(--aad-ratio);
  width: min(100%, calc(var(--aad-hmax) * var(--aad-ratio)));
}
/* la carte statique du HTML reste cachée le temps de connaître l'ordre choisi
   (sinon on la voit, puis elle saute) ; sans JavaScript ou sans réponse, elle
   réapparaît d'elle-même au bout de 1,5 s. */
.aad--attente .reveal{ opacity:0; animation:aad-secours 0s 1.5s forwards; }
@keyframes aad-secours{ to{ opacity:1; } }

/* la carte de derrière n'est qu'un aperçu : ni étiquettes, ni poignée (elles se
   superposaient au bas de la carte de devant) */
.aad-card--back .reveal-label,
.aad-card--back .reveal-handle-wrap,
.aad-card--hors .reveal-label{ display:none; }

/* fond neutre pendant le chargement des photos (le brun / bleu pâle du .reveal
   de base faisait un aplat disgracieux quand la photo tarde) */
.aad .reveal-layer.layer-dirty,
.aad .reveal-layer.layer-clean{ background:#e6edf4; }