@charset "UTF-8";
/* ==================================================
   Classes globales, à poser dans Elementor (Avancé > Classes CSS). Réutilisables sur toute page.
   Les couleurs, polices, tailles et espacements sont réglés dans Elementor ; ici seulement ce qu'Elementor
   ne sait pas faire.

   adl-section           section de page (espacements réglés dans Elementor)
   adl-title             titre de section (typographie globale « Titre de section »)
   adl-subtitle          phrase sous un titre de section
   adl-quote             citation (Instrument Serif, trait framboise à gauche, réglés dans Elementor)
   adl-quote--boxed      citation sur fond blanc voilé (sur une photo)
   adl-badge             pastille (« Prestation principale », « Également »)
   adl-feather           plume dessinée (widget « Dessin au trait ») ; variantes ci-dessous
   adl-bg-grid           fond quadrillé (section)
   adl-pinned            cartes / photo punaisées, qui viennent s'épingler au défilement (section)
   adl-scroll-row        rangée de cartes qui défile sur le côté en tablette / smartphone (conteneur)
   adl-scroll-row--duo   variante pour deux cartes avec étiquette au-dessus (formules de maintenance)
   adl-reveal            section dont le contenu glisse sur les côtés (réalisations) : coupe le débordement
================================================== */
/* ---------- Citation sur fond voilé : prend la place restante et passe à la ligne ----------
   (marges intérieures de la bulle : réglage « Marge interne » du widget dans Elementor) */
.adl-quote--boxed {
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 12px 26px -14px rgba(42, 42, 40, 0.35);
}

.adl-quote--boxed p {
  margin: 0;
}

/* ---------- Plumes ----------
   adl-feather--section         grande plume de fond, toute la hauteur de la section (ordinateur)
   adl-feather--section-mobile  petite plume en haut de section (tablette / smartphone)
   (masquage ici plutôt que dans Elementor : pas de hachures dans l'éditeur) */
.adl-feather--section {
  top: 0;
  bottom: 0;
}

.adl-feather--section > .elementor-widget-container,
.adl-feather--section .adl-line-drawing {
  height: 100%;
}

@media (max-width: 1024px) {
  .adl-feather--section {
    display: none;
  }
}
@media (min-width: 1025px) {
  .adl-feather--section-mobile {
    display: none;
  }
}
/* ---------- Fond quadrillé (papier rose) ---------- */
.adl-bg-grid {
  background-image: linear-gradient(rgba(194, 69, 109, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(194, 69, 109, 0.13) 1px, transparent 1px), linear-gradient(rgba(194, 69, 109, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(194, 69, 109, 0.06) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* ---------- Cartes / photo punaisées (cartes de services, cartes adl-card, cartes d'avis, photo « Derrière l'atelier ») ----------
   Une punaise 3D au-dessus de chaque carte ; au défilement, la carte tombe légèrement de biais, se pose
   avec un petit rebond, puis la punaise s'enfonce (se rejoue à chaque passage). Sans animation liée au
   défilement (Firefox) ou si le visiteur réduit les animations : cartes et punaises affichées directement. */
.adl-pinned .service-card,
.adl-pinned .adl-card,
.adl-pinned .review-card,
.adl-pinned .about-photo-frame {
  --adl-pin-rot: 8deg;
  --adl-card-tilt: -3deg;
  --adl-rest-rot: 0deg;
  position: relative;
  overflow: visible;
}

.adl-pinned .service-card--secondary,
.adl-pinned .adl-card:nth-child(even),
.adl-pinned .review-card:nth-child(even) {
  --adl-pin-rot: -6deg;
  --adl-card-tilt: 3deg;
}

.adl-pinned .about-photo-frame {
  --adl-pin-rot: 5deg;
  --adl-card-tilt: -2deg;
  --adl-rest-rot: 1.5deg;
  rotate: 1.5deg;
}

.adl-pinned .service-card::after,
.adl-pinned .adl-card::after,
.adl-pinned .review-card::after,
.adl-pinned .about-photo-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -30px;
  left: 50%;
  width: 30px;
  height: 42px;
  transform: translateX(-50%) rotate(var(--adl-pin-rot));
  transform-origin: 50% 90%;
  background: url("../img/push-pin.svg") center/contain no-repeat;
  pointer-events: none;
}

.adl-pinned .service-card--secondary::after {
  top: -26px;
  width: 26px;
  height: 36px;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .adl-pinned .service-card,
    .adl-pinned .adl-card,
    .adl-pinned .review-card,
    .adl-pinned .about-photo-frame {
      view-timeline-name: --adl-pin;
      animation: adl-pin-card linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .adl-pinned .service-card--secondary,
    .adl-pinned .adl-card:nth-child(even),
    .adl-pinned .review-card:nth-child(even) {
      animation-range: entry 30% cover 38%;
    }
    .adl-pinned .service-card::after,
    .adl-pinned .adl-card::after,
    .adl-pinned .review-card::after,
    .adl-pinned .about-photo-frame::after {
      animation: adl-pin-push linear both;
      animation-timeline: --adl-pin;
      animation-range: cover 28% cover 38%;
    }
    .adl-pinned .service-card--secondary::after,
    .adl-pinned .adl-card:nth-child(even)::after,
    .adl-pinned .review-card:nth-child(even)::after {
      animation-range: cover 36% cover 45%;
    }
  }
}
@keyframes adl-pin-card {
  0% {
    opacity: 0;
    translate: 0 -40px;
    scale: 1.05;
    rotate: var(--adl-card-tilt, -3deg);
  }
  55% {
    opacity: 1;
    translate: 0 6px;
    scale: 0.99;
    rotate: var(--adl-rest-rot, 0deg);
  }
  78% {
    translate: 0 -2px;
    scale: 1.003;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: var(--adl-rest-rot, 0deg);
  }
}
@keyframes adl-pin-push {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-26px) scale(1.5) rotate(var(--adl-pin-rot));
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(3px) scale(0.9) rotate(var(--adl-pin-rot));
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--adl-pin-rot));
  }
}
/* ---------- Rangée de cartes qui défile sur le côté (tablette / smartphone) ----------
   Tablette : 2 cartes + la moitié de la 3e ; smartphone : 1 carte + 15 px de la suivante.
   Conteneur « boxed » : ses cartes sont dans son .e-con-inner, c'est lui qui défile jusqu'au bord de l'écran. */
@media (max-width: 1024px) {
  .adl-scroll-row {
    --adl-card-w: calc((100% - 2 * 20px) / 2.5);
    --adl-cards-gap: 20px;
    --adl-gutter: 15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .adl-scroll-row > .e-con-inner {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--adl-cards-gap) !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--adl-gutter);
    /* 10 / 34 px : place pour l'ombre des cartes (sinon coupée par le défilement) */
    padding: 10px var(--adl-gutter) 34px !important;
    scrollbar-width: none;
  }
  .adl-scroll-row > .e-con-inner::-webkit-scrollbar {
    display: none;
  }
  .adl-scroll-row > .e-con-inner > .e-con {
    width: var(--adl-card-w) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 767px) {
  .adl-scroll-row {
    /* la carte suivante dépasse de 15 px (100 % = largeur sans les marges de 16 px) */
    --adl-card-w: calc(100% + 16px - 14px - 15px);
    --adl-cards-gap: 14px;
    --adl-gutter: 16px;
  }
}
/* Variante deux cartes (formules de maintenance) : sur tablette, une carte et demie pour montrer que la rangée
   défile ; place au-dessus des cartes pour l'étiquette posée à cheval sur leur bord (sinon coupée par le défilement).
   La largeur smartphone est redonnée ici car la règle tablette de la variante passe après celle de la rangée. */
@media (max-width: 1024px) {
  .adl-scroll-row--duo {
    --adl-card-w: calc((100% - 20px) / 1.5);
  }
  .adl-scroll-row--duo > .e-con-inner {
    padding-top: 26px !important;
  }
}
@media (max-width: 767px) {
  .adl-scroll-row--duo {
    --adl-card-w: calc(100% + 16px - 14px - 15px);
  }
}
/* ---------- Rien ne dépasse sur le côté de l'écran ----------
   Elementor donne à chaque conteneur « overflow: var(--overflow) » avec la même priorité qu'une classe du thème :
   « .e-con » en plus est nécessaire pour que ces règles s'appliquent quel que soit l'ordre des feuilles de style.
   « clip » ne coupe qu'à l'horizontale : les punaises au-dessus des cartes restent visibles. */
/* Section dont le contenu glisse sur les côtés (réalisations) */
.adl-reveal.e-con {
  overflow-x: clip;
}

/* Tablette / smartphone : la petite plume de section dépasse volontairement à droite (effet « coupée par l'écran »)
   et la liste en ligne d'Elementor a des marges négatives ; coupées au bord de leur section, elles n'élargissent plus
   la page (sinon léger défilement horizontal sur téléphone, où overflow-x du body est mal respecté). */
@media (max-width: 1024px) {
  .adl-section.e-con {
    overflow-x: clip;
  }
}