@charset "UTF-8";
/* ==================================================
   Hero de l'accueil (classes hero-home, hero-content, hero-grid, hero-eyebrow, hero-title, hero-copy,
   hero-cta, adl-hero-keywords, adl-hero-fullscreen). L'étiquette « Le web, fait main. » (adl-hero-tagline)
   et la plume (adl-feather--hero) sont placées dans Elementor (position absolue).
   La grille du hero change de forme selon l'écran : ces règles imposent la disposition à la grille Elementor.
================================================== */
/* ---------- Smartphone : tout centré ---------- */
@media (max-width: 767px) {
  .hero-content,
  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-grid {
    justify-items: center !important;
    text-align: center !important;
  }
  .hero-eyebrow,
  .hero-title,
  .hero-copy,
  .hero-cta {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ---------- Tablette : la grille devient une colonne centrée ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-home {
    min-height: 0 !important;
  }
  .hero-content {
    --width: 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-content > .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 45px 32px !important;
  }
  .hero-grid {
    --width: 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-grid > .e-con-inner > .elementor-element {
    --width: 100% !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-eyebrow {
    width: 100% !important;
    max-width: 700px !important;
    text-align: center !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
  }
  .hero-title {
    width: 100% !important;
    max-width: 620px !important;
    text-align: center !important;
    font-size: clamp(42px, 5.5vw, 48px) !important;
    line-height: 1.18 !important;
  }
  .hero-title .elementor-heading-title {
    width: 100% !important;
    text-align: center !important;
  }
  .hero-copy {
    width: 100% !important;
    max-width: 680px !important;
    text-align: center !important;
  }
  .hero-copy .elementor-widget-container {
    width: 100% !important;
  }
  .hero-copy,
  .hero-copy p {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
  /* « Avant de créer, j'aime comprendre. » */
  .hero-copy strong:first-child {
    display: block !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
  }
  .hero-cta {
    --width: auto !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: center !important;
    margin: 5px auto 0 !important;
  }
  .hero-cta .elementor-button {
    font-size: 16px !important;
  }
}
/* ---------- Ordinateur : textes à gauche, grille sur 2 colonnes ---------- */
@media (min-width: 1025px) {
  .hero-home {
    min-height: 0 !important;
  }
  .hero-content {
    width: 100% !important;
    max-width: 1400px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 25px 70px 30px 20px !important;
  }
  .hero-grid,
  .hero-grid > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
  .hero-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(440px, 510px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 90px !important;
    row-gap: 20px !important;
    align-content: center !important;
    justify-content: stretch !important;
  }
  .hero-eyebrow,
  .hero-title,
  .hero-copy,
  .hero-cta {
    grid-column: 1 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .hero-eyebrow {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 500px !important;
    justify-self: start !important;
  }
  .hero-title {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 500px !important;
    justify-self: start !important;
    font-size: 46px !important;
    line-height: 1.2 !important;
  }
  .hero-copy {
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 490px !important;
    justify-self: start !important;
  }
  .hero-copy,
  .hero-copy p {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
  .hero-copy strong:first-child {
    display: block !important;
    margin-bottom: 14px !important;
  }
  .hero-cta {
    grid-row: 4 !important;
    width: auto !important;
    justify-self: center !important;
    margin-top: 4px !important;
  }
  /* Mots-clés « Artisans & petites entreprises · Partout en France, à distance » sous le bouton */
  .adl-hero-keywords {
    grid-column: 1 !important;
    grid-row: 5 !important;
    justify-self: center !important;
    width: auto !important;
  }
  /* Hero plein écran : hauteur de l'écran sous le header (et sous la barre d'administration si connecté),
     contenu centré verticalement */
  .adl-hero-fullscreen {
    --adl-hero-offset: var(--adl-header-h);
    min-height: calc(100vh - var(--adl-hero-offset)) !important;
    min-height: calc(100svh - var(--adl-hero-offset)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.admin-bar .adl-hero-fullscreen {
    --adl-hero-offset: calc(var(--adl-header-h) + 32px);
  }
  .adl-hero-fullscreen .hero-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .adl-hero-fullscreen .hero-grid > .e-con-inner {
    row-gap: 18px !important;
  }
}