/* Site member page specific styles */

/* === REGLE PERMANENTE (paires de mockups .equal-screens) ===
   Mockup 3D incline a GAUCHE + mockup portrait a DROITE.
   - Le screenshot 3D de gauche doit etre 5% PLUS HAUT que celui de droite.
   - Les deux restent alignes verticalement : le CENTRE des deux images a la
     meme ordonnee Y (assure par align-items:center sur les colonnes + la row).
   On dimensionne par la HAUTEUR (variable --screen-h) pour rester synchro a
   tous les formats d'ecran. */
/* Taille de reference = celle des anciens screenshots (section "Gestion des
   permanences"). La capture de DROITE doit avoir cette taille ; la GAUCHE (3D)
   s'adapte a +5%. */
.equal-screens {
  --screen-h: clamp(327px, 47vw, 678px);
}

.equal-screens .col-6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.equal-screens img {
  height: var(--screen-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  margin: 0 auto;
}

/* Gauche (3D) : 5% plus haut. */
.equal-screens .col-6:first-child img {
  height: calc(var(--screen-h) * 1.05);
}

/* +25% de hauteur : on elargit la zone images (texte toujours a cote) pour
   eviter le chevauchement des deux mockups, au-dela de lg. */
@media (min-width: 992px) {
  .feature-section .row:has(.equal-screens) > div:has(.equal-screens) {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .feature-section .row:has(.equal-screens) > div:not(:has(.equal-screens)) {
    flex: 0 0 auto;
    width: 41.6667%;
  }
}