/* ==========================================================================
   Retouches d'affichage demandées par le propriétaire (23/09/2026)
   Corrections ponctuelles sans rapport avec les blocs crédit d'impôt / CESU
   (ceux-là restent dans credit-impot-*.css / cesu-*.css). Chargé uniquement
   sur les pages concernées.
   ========================================================================== */

/* ---------- Comparateur avant/après réduit (page nettoyage extérieur) ----------
   Le .reveal de base occupe toute la hauteur disponible (aspect-ratio 4/3.1 sur
   la pleine largeur du wrap) : sur cette page-là c'était démesuré. On borne sa
   hauteur en CSS uniquement, sans toucher à js/main.js qui pilote la poignée. */
.reveal-compact{
  aspect-ratio:auto;
  height:clamp(260px, 42vw, 480px);
}
.reveal-compact .reveal-layer img{ object-fit:cover; object-position:center; }

/* ---------- FAQ pleine largeur (page nettoyage extérieur) ----------
   .faq est volontairement borné à 78ch (colonne de lecture) partout ailleurs ;
   ici la liste jouxte la bulle de la mascotte qui, elle, va jusqu'au bord du
   contenu : on aligne les deux plutôt que de changer la règle commune. */
.faq-full{ max-width:none; }

/* ---------- Bouton "Devis gratuit" hors .prose ----------
   .prose a (style.css) écrase le padding/l'affichage de .btn dès qu'un lien
   bouton se trouve dans une colonne de texte (spécificité plus élevée, déclaré
   plus tard) : le bouton perdait son padding, son alignement et prenait une
   marge négative. On restaure l'apparence normale du bouton, avec la marge
   au-dessus des autres appels à l'action de la page (.page-actions). */
.prose .btn.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; margin:24px 0 0;
}

/* ---------- Photo du camion mieux cadrée (page conteneurs poubelles) ----------
   .proof-grid (pages.css) est une grille auto-fit : avec une seule photo elle
   prend toute la largeur du bloc de texte, et height:auto sur un portrait
   840x1120 donnait un rendu démesuré (519x692 mesurés à 1280px). On la borne
   comme le camion l'est déjà sur l'accueil (.bins-visual, style.css) : largeur
   plafonnée, rapport 3/4 constant, cadrage recentré, même esprit que
   .reveal-compact ci-dessus. */
.proof-grid--camion{
  grid-template-columns:minmax(200px, 320px);
  justify-content:center;
  margin-top:26px;
}

/* ---------- photo a DROITE du texte, sur navigation large seulement ----------
   Demande du 24/09/2026 : la colonne de droite restait vide pendant que la
   photo poussait le contenu vers le bas. Au-dela de 1000 px, la section passe
   en deux colonnes ; en dessous (tablette, telephone), rien ne change : la
   photo reprend sa place sous le texte. */
@media (min-width:1000px){
  .section-avec-photo{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(260px, 350px);
    gap:44px; align-items:start;
  }
  .section-avec-photo > .prose{ margin:0; }
  .section-avec-photo > .proof-grid--camion{
    grid-template-columns:1fr;
    margin-top:6px;
  }
  .section-avec-photo > .proof-grid--camion img{
    aspect-ratio:3 / 4;      /* portrait franc : la colonne est etroite */
  }
}
.proof-grid--camion img{
  aspect-ratio:3 / 4;
  height:auto;
  object-fit:cover;
  object-position:center;
}