@charset "UTF-8";
/* ==================================================
   Pages de services (Conception web, Aide informatique). Classes à poser dans Elementor
   (Avancé > Classes CSS). Couleurs, polices, tailles, fonds et espacements sont réglés dans Elementor ;
   ici seulement ce qu'Elementor ne sait pas faire.

   adl-card              carte (fond, coins, ombre, bordure réglés dans Elementor) : survol sur ordinateur
   adl-card__button      bouton d'une carte, toujours en bas de la carte
   adl-steps             liste d'étapes (colonne) : trait vertical qui relie les numéros
   adl-steps__item       une étape : numéro rond dessiné ici (compteur CSS, 1, 2, 3…)
   adl-faq               questions fréquentes (widget Accordéon) : chaque question dans une carte blanche
   adl-todo              point à confirmer dans un brouillon (surligné) ; à retirer avant publication
   Punaises sur les cartes : classe adl-pinned sur la section (components.scss).
================================================== */
/* ---------- Cartes ---------- */
.adl-card .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Boutons alignés en bas des cartes d'une même rangée */
.adl-card__button {
  margin-top: auto !important;
}

@media (min-width: 1025px) {
  .adl-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .adl-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 34px -10px var(--adl-shadow-card) !important;
  }
}
/* ---------- Étapes numérotées ----------
   Le numéro est le ::after de l'étape (le ::before des conteneurs Elementor sert au fond superposé) ;
   le trait vertical est le ::after du bloc intérieur de la liste, derrière les numéros. */
.adl-steps {
  --adl-step-size: 48px;
  --adl-step-gap: 24px;
  counter-reset: adl-step;
}
.adl-steps > .e-con-inner {
  position: relative;
}
.adl-steps > .e-con-inner::after {
  content: "";
  position: absolute;
  top: calc(var(--adl-step-size) / 2);
  bottom: calc(var(--adl-step-size) * 1.5);
  left: calc(var(--adl-step-size) / 2 - 1px);
  width: 2px;
  background: var(--adl-line-strong);
}
.adl-steps .adl-steps__item {
  position: relative;
  padding: 2px 0 36px calc(var(--adl-step-size) + var(--adl-step-gap));
  counter-increment: adl-step;
}
.adl-steps .adl-steps__item:last-child {
  padding-bottom: 0;
}
.adl-steps .adl-steps__item::after {
  content: counter(adl-step);
  position: absolute;
  z-index: 1;
  top: -4px;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--adl-step-size);
  height: var(--adl-step-size);
  border-radius: 50%;
  background: var(--adl-raspberry-dark);
  box-shadow: 0 8px 18px -8px var(--adl-shadow-card);
  color: var(--adl-white);
  font-family: var(--adl-font-script);
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 767px) {
  .adl-steps {
    --adl-step-size: 40px;
    --adl-step-gap: 16px;
  }
  .adl-steps .adl-steps__item {
    padding-bottom: 28px;
  }
  .adl-steps .adl-steps__item::after {
    font-size: 19px;
  }
}
/* ---------- Questions fréquentes (Accordéon d'Elementor) ----------
   Elementor ne règle que le titre et le contenu : la carte qui les entoure est faite ici. */
.adl-faq .e-n-accordion-item {
  overflow: hidden;
  border-radius: 12px;
  background: var(--adl-white);
  box-shadow: 0 10px 24px -14px var(--adl-shadow-medium);
  transition: box-shadow 0.3s ease;
}
.adl-faq .e-n-accordion-item[open] {
  box-shadow: 0 16px 30px -14px var(--adl-shadow-card);
}

.adl-faq .e-n-accordion-item-title {
  cursor: pointer;
}

/* ---------- Point à confirmer (brouillon) ---------- */
.adl-todo {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--adl-pink-light);
  color: var(--adl-charcoal);
  font-weight: 600;
}