/**
 * Culmine — Avant / Après
 *
 * Les variables ci-dessous sont le seul point de reglage : le widget Elementor
 * les pose par ses selecteurs, le shortcode par ses attributs css_*.
 *
 *   --caa-ratio            format de la boite            4/3
 *   --caa-rayon            arrondi des angles            18px
 *   --caa-avant-fond       etiquette « avant », fond     #9d7747
 *   --caa-avant-texte      etiquette « avant », texte    #ffffff
 *   --caa-apres-fond       etiquette « apres », fond     #96ab67
 *   --caa-apres-texte      etiquette « apres », texte    #ffffff
 *   --caa-trait            le trait de separation        #ffffff
 *   --caa-poignee-fond     la pastille ronde, fond       #ffffff
 *   --caa-poignee-icone    les fleches                   #6e824b
 *   --caa-legende-couleur  la legende sous les photos    inherit
 */

.caa {
  --caa-ratio: 4/3;
  --caa-rayon: 18px;
  --caa-avant-fond: #9d7747;
  --caa-avant-texte: #ffffff;
  --caa-apres-fond: #96ab67;
  --caa-apres-texte: #ffffff;
  --caa-trait: #ffffff;
  --caa-poignee-fond: #ffffff;
  --caa-poignee-icone: #6e824b;
  --caa-legende-couleur: inherit;
}

.caa-vue {
  position: relative;
  aspect-ratio: var(--caa-ratio);
  overflow: hidden;
  border-radius: var(--caa-rayon);
  background: rgba(0, 0, 0, .04);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Les deux images se superposent exactement : c'est ce qui rend la decoupe
   credible. Sans object-fit, deux photos de proportions differentes glissent
   l'une par rapport a l'autre. */
.caa-vue .caa-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

.caa-vue .caa-avant {
  clip-path: inset(0 50% 0 0);
}

.caa-poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--caa-trait);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  pointer-events: none;
}

.caa-poignee::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--caa-poignee-fond);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.caa-poignee::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: var(--caa-poignee-icone);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7 5 12l4.5 5M14.5 7l4.5 5-4.5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7 5 12l4.5 5M14.5 7l4.5 5-4.5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.caa-etiq {
  position: absolute;
  top: 12px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 100px;
  pointer-events: none;
}

.caa-etiq-avant {
  left: 12px;
  background: var(--caa-avant-fond);
  color: var(--caa-avant-texte);
}

.caa-etiq-apres {
  right: 12px;
  background: var(--caa-apres-fond);
  color: var(--caa-apres-texte);
}

.caa-vue:focus {
  outline: none;
}

.caa-vue:focus-visible {
  outline: 3px solid var(--caa-poignee-icone);
  outline-offset: 3px;
}

.caa-legende {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--caa-legende-couleur);
}

.caa-vide {
  padding: 14px 16px;
  border: 1px dashed #9c5b3a;
  border-radius: 8px;
  color: #9c5b3a;
  font-size: 14px;
}

/* Tant que le script n'a pas pris la main, la decoupe reste celle du depart :
   la page ne montre jamais deux images empilees sans separation. */
.caa-vue[data-caa-pret] {
  cursor: ew-resize;
}

/* --------------------------------------------------------------------------
   La galerie : plusieurs comparateurs qui defilent.

   Variables reglables depuis le shortcode :
     --caa-galerie-par-vue    combien de comparateurs a la fois   2
     --caa-galerie-espace     la gouttiere entre eux              22px
     --caa-nav-fond           les fleches, fond                   #ffffff
     --caa-nav-icone          les fleches, trait                  #3d543d
     --caa-nav-bord           les fleches, contour                rgba(0,0,0,.12)
     --caa-point              les puces                           #96ab67
   -------------------------------------------------------------------------- */

.caa-galerie {
  --caa-galerie-espace: 22px;
  --caa-nav-fond: #ffffff;
  --caa-nav-icone: #3d543d;
  --caa-nav-bord: rgba(0, 0, 0, .12);
  --caa-point: #96ab67;

  /* L'attribut en ligne pose --caa-galerie-par-vue ; le nombre reellement
     utilise passe par une seconde variable, sans quoi un style en ligne
     battrait les regles responsives ci-dessous. */
  --caa-par-vue: var(--caa-galerie-par-vue, 2);

  position: relative;
}

.caa-galerie-barre {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

/* Deux classes, pas une : sur un site dont le theme habille tous les <button>
   — ce que fait n'importe quel kit Elementor — une regle a classe unique perd,
   et les fleches sortent en pastilles pleines sans icone. Meme raison pour les
   proprietes remises a zero ci-dessous : elles ne sont pas superflues, elles
   defont ce que le theme a pose. */
.caa-galerie .caa-nav {
  width: 42px;
  height: 42px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: none;
  border-radius: 50%;
  background: var(--caa-nav-fond);
  background-image: none;
  color: var(--caa-nav-icone);
  border: 1px solid var(--caa-nav-bord);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  line-height: 1;
  transition: opacity .15s ease, border-color .15s ease;
}

.caa-galerie .caa-nav:hover,
.caa-galerie .caa-nav:focus {
  background: var(--caa-nav-fond);
  color: var(--caa-nav-icone);
  box-shadow: none;
}

.caa-galerie .caa-nav svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
}

.caa-galerie .caa-nav[disabled] {
  opacity: .3;
  cursor: default;
}

.caa-galerie .caa-nav:focus-visible {
  outline: 2px solid var(--caa-poignee-icone, #6e824b);
  outline-offset: 2px;
}

.caa-piste {
  display: flex;
  gap: var(--caa-galerie-espace);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.caa-piste::-webkit-scrollbar {
  display: none;
}

.caa-piste > .caa {
  flex: 0 0 calc((100% - (var(--caa-par-vue) - 1) * var(--caa-galerie-espace)) / var(--caa-par-vue));
  scroll-snap-align: start;
  min-width: 0;
}

.caa-points {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.caa-points span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--caa-point);
  opacity: .35;
  transition: opacity .15s ease;
}

.caa-points span.caa-ici {
  opacity: 1;
}

/* Sous 1024 px, jamais plus de deux ; sous 768 px, un seul. A deux sur un
   telephone, on ne voit plus ce qu'on compare. */
@media (max-width: 1024px) {
  .caa-galerie {
    --caa-par-vue: min(var(--caa-galerie-par-vue, 2), 2);
  }
}

@media (max-width: 767px) {
  .caa-galerie {
    --caa-par-vue: 1;
  }

  .caa-piste > .caa {
    flex-basis: 88%;
  }
}

/* --------------------------------------------------------------------------
   Les chantiers : [realisations]

   Variables reglables :
     --caa-ch-ecart       la gouttiere entre recit et images     40px
     --caa-ch-rayon       l'arrondi des photos                   20px
     --caa-ch-ou          la commune                             #6e824b
     --caa-ch-titre       le titre du chantier                   #3d543d
     --caa-ch-texte       le corps                               inherit
     --caa-ch-duree-fond  la pastille de duree                   #eef3e3
   -------------------------------------------------------------------------- */

.caa-chantiers {
  --caa-ch-ecart: 40px;
  --caa-ch-rayon: 20px;
  --caa-ch-ou: #6e824b;
  --caa-ch-titre: #3d543d;
  --caa-ch-texte: inherit;
  --caa-ch-duree-fond: #eef3e3;
}

.caa-chantier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--caa-ch-ecart);
  align-items: center;
}

/* Le recit change de cote d'un chantier au suivant : la page ne se lit plus
   comme une colonne unique, et l'oeil repart de l'autre bord. */
.caa-chantier--inverse .caa-ch-vues { order: 2; }

.caa-chantier + .caa-chantier {
  margin-top: 54px;
  padding-top: 54px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* Les photos defilent : le client en ajoute au fil des chantiers. */
.caa-ch-bande {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--caa-ch-rayon);
}

.caa-ch-bande::-webkit-scrollbar { display: none; }

.caa-ch-bande:focus-visible {
  outline: 2px solid var(--caa-ch-ou);
  outline-offset: 4px;
}

.caa-ch-bande .caa-ch-img {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--caa-ch-rayon);
  display: block;
  margin: 0;
  max-width: none;
}

/* Les fleches sont posees sur la photo, en bas a droite, la ou le pouce et la
   souris les cherchent. Le compteur leur fait face.

   Deux classes, pas une : un kit Elementor habille tous les <button> et une
   regle a classe unique perd. Troisieme fois que ce defaut revient sur ce
   site — d'abord les avis, puis la galerie, maintenant les chantiers. */
.caa-ch-vues--defile { position: relative; }

.caa-ch-vues .caa-ch-nav {
  position: absolute;
  bottom: 46px;
  width: 38px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  background-image: none;
  color: var(--caa-ch-titre, #3d543d);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  text-shadow: none;
  line-height: 1;
  transition: opacity .15s ease;
  z-index: 2;
}

.caa-ch-vues .caa-ch-nav svg { width: 18px; height: 18px; display: block; fill: none; }

.caa-ch-vues .caa-ch-nav:hover,
.caa-ch-vues .caa-ch-nav:focus { background: #ffffff; color: var(--caa-ch-titre, #3d543d); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

.caa-ch-vues .caa-ch-nav[disabled] { opacity: .3; cursor: default; }

.caa-ch-vues .caa-ch-prec { right: 62px; }
.caa-ch-vues .caa-ch-suiv { right: 14px; }

.caa-ch-compte {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

.caa-ch-ou {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caa-ch-ou);
}

.caa-ch-titre {
  margin: 0 0 14px;
  font-size: 25px;
  line-height: 1.2;
  color: var(--caa-ch-titre);
}

.caa-ch-mots p {
  margin: 0 0 12px;
  line-height: 1.8;
  color: var(--caa-ch-texte);
}

.caa-ch-duree {
  display: inline-block;
  margin: 4px 0 0;
  background: var(--caa-ch-duree-fond);
  color: var(--caa-ch-titre);
  font-size: 13.5px;
  padding: 8px 15px;
  border-radius: 100px;
}

@media (max-width: 767px) {
  .caa-chantier {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* Sur telephone, la photo passe toujours au-dessus du recit. */
  .caa-chantier .caa-ch-vues,
  .caa-chantier--inverse .caa-ch-vues { order: -1; }
  .caa-chantier + .caa-chantier { margin-top: 32px; padding-top: 32px; }
  .caa-ch-titre { font-size: 21px; }
}