/* Moteur b2web.ca : styles des comportements recréés sans le runtime Framer.
   Déployé par outils/statique/deployer-moteur.mjs (nom avec empreinte). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Éléments animés à l'apparition : cachés seulement le temps que le moteur
   pose leur état de départ (sinon ils clignotent). Filet : .b2-pret au plus
   tard après 2,5 s (script en ligne dans <head>). */
.b2-js:not(.b2-pret) [data-anim] { visibility: hidden; }

/* ---------------------------------------------------------------- FAQ */
[data-b2-faq] { cursor: pointer; }
[data-b2-faq] [data-b2-reponse] { will-change: height; }
[data-b2-icone] { transition: transform .35s cubic-bezier(.22,1,.36,1); }
[data-b2-icone] svg { position: absolute; inset: 0; transition: opacity .25s ease; }
[data-b2-etat="ferme"] .b2-ico-ouvert, [data-b2-etat="ouvert"] .b2-ico-ferme { opacity: 0; }

/* ---------------------------------------------------- Bandeaux défilants */
@keyframes b2-defile-gauche { from { transform: translateX(0); } to { transform: translateX(var(--b2-pas)); } }
@keyframes b2-defile-droite { from { transform: translateX(var(--b2-pas)); } to { transform: translateX(0); } }
/* Pas de transform en !important ici : une déclaration !important l'emporte
   sur l'animation, et les bandeaux restaient immobiles. */
[data-b2-defile] { width: max-content !important; max-width: none !important; flex-wrap: nowrap !important; }
[data-b2-defile] > li { flex: none; }
[data-b2-defile-pret] { animation: b2-defile-gauche var(--b2-duree, 30s) linear infinite; }
[data-b2-defile-pret][data-b2-defile="right"] { animation-name: b2-defile-droite; }
@media (prefers-reduced-motion: reduce) { [data-b2-defile-pret] { animation: none; } }

/* ------------------------------------------------------- Menu mobile */
[data-framer-name="Hamburger Icon"] [data-framer-name="Top"],
[data-framer-name="Hamburger Icon"] [data-framer-name="Middle"],
[data-framer-name="Hamburger Icon"] [data-framer-name="Bottom"] {
  transition: translate .3s cubic-bezier(.22,1,.36,1), rotate .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.b2-menu-ouvert [data-framer-name="Hamburger Icon"] [data-framer-name="Top"] { translate: 0 6px; rotate: 45deg; }
.b2-menu-ouvert [data-framer-name="Hamburger Icon"] [data-framer-name="Bottom"] { translate: 0 -6px; rotate: -45deg; }
.b2-menu-ouvert [data-framer-name="Hamburger Icon"] [data-framer-name="Middle"] { opacity: 0 !important; }
/* Le panneau passe SOUS la barre de navigation (fixe, z-index 7) : le logo et
   l'icône, devenue un X, restent visibles. */
.b2-menu {
  position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 110px 32px 40px; overflow-y: auto; background: rgb(13, 13, 13); color: #fff;
  font-family: "Figtree", "Figtree Placeholder", sans-serif;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
.b2-menu.b2-ouvert { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
.b2-menu a { display: block; padding: 16px 0; font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .12); opacity: 0; translate: 0 14px; transition: opacity .4s ease, translate .4s cubic-bezier(.22,1,.36,1); }
.b2-menu.b2-ouvert a { opacity: 1; translate: none; }
.b2-menu a.b2-menu-bouton { margin-top: 28px; padding: 16px 24px; border: 0; border-radius: 999px; text-align: center; font-size: 20px; font-weight: 600;
  background: rgb(140, 255, 46); color: rgb(5, 5, 5); }
.b2-menu-defile { overflow: hidden !important; }

/* ------------------------------------------- Aperçus des réalisations
   Accueil, « Nos dernières réalisations » : sur ordinateur, les trois
   vignettes de la ligne (outils/statique/apercus-realisations.mjs) montent en
   place au survol, l'une après l'autre (ressort, 0,8 s, décalages 0 / 0,2 /
   0,4 s, départ 150 px plus bas, comme dans Framer), et le type de service
   remonte hors du cadre. Sans survol possible, elles restent cachées, comme
   dans Framer ; les versions tablette et téléphone les montrent toujours. */
.framer-v-1psalwg [data-b2-apercus] > div { opacity: 0; transform: translateY(150px); transition: opacity .2s ease, transform 0s linear .2s; }
.framer-v-1psalwg .framer-1j81egz { transition: top .4s cubic-bezier(.34, 1.25, .64, 1); }
@media (hover: hover) {
  .framer-v-1psalwg:hover [data-b2-apercus] > div, .framer-v-1psalwg:focus-visible [data-b2-apercus] > div {
    opacity: 1; transform: none;
    transition: opacity .4s ease var(--b2-delai, 0s), transform .8s cubic-bezier(.34, 1.45, .64, 1) var(--b2-delai, 0s);
  }
  .framer-v-1psalwg [data-b2-apercus] > div:nth-child(2) { --b2-delai: .2s; }
  .framer-v-1psalwg [data-b2-apercus] > div:nth-child(3) { --b2-delai: .4s; }
  .framer-v-1psalwg:hover .framer-1j81egz, .framer-v-1psalwg:focus-visible .framer-1j81egz { top: -25px; }
}
@media (prefers-reduced-motion: reduce) {
  .framer-v-1psalwg [data-b2-apercus] > div, .framer-v-1psalwg .framer-1j81egz { transition: none !important; }
}

/* ---------------------------------------------------------- Globe */
canvas[data-b2-globe] { display: block; width: 100%; height: 100%; }

/* -------------------------------------------------------- Formulaires */
.b2-merci { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 30px 10px; text-align: center;
  font-family: "Figtree", "Figtree Placeholder", sans-serif; }
.b2-merci strong { font-size: 24px; font-weight: 600; color: rgb(5, 5, 5); }
.b2-merci span { font-size: 16px; line-height: 1.5; color: rgba(0, 0, 0, .7); }
.b2-merci svg { width: 56px; height: 56px; }
.b2-erreur { margin: 10px 0 0; font-size: 14px; color: rgb(220, 60, 40); font-family: "Figtree", "Figtree Placeholder", sans-serif; }
button[type="submit"][disabled] { opacity: .6; cursor: wait; }

/* --------------------------------------------- Correctifs de mise en page
   Bloc « Obtenez un site web démo » (globe), variante téléphone : largeurs
   fixes (424 px) plus larges que l'écran, texte et bouton coupés à gauche.
   Présent aussi sur le site Framer d'origine. */
@media (max-width: 809.98px) {
  .framer-oJpSz.framer-v-73zk66.framer-1jkpsji { width: 100% !important; max-width: 100%; padding: 0 !important; box-sizing: border-box; }
  .framer-oJpSz.framer-v-73zk66 .framer-eoo3s4 { width: 100% !important; max-width: 424px; margin: 0 auto; }
  .framer-oJpSz.framer-v-73zk66 .framer-p4981l { width: calc(100% - 32px) !important; max-width: 305px; }
  .framer-oJpSz.framer-v-73zk66 .framer-1djnv7h { width: 100% !important; }
  .framer-oJpSz.framer-v-73zk66 .framer-1ehcw5w { width: 100% !important; max-width: 290px; }
}

/* ----------------------------------------------------------- Survols
   Les variantes « hover » des composants Framer vivaient dans le JS ; les
   classes de variante (framer-v-…) sont uniques, on s'en sert directement. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Flèche des boutons : de -45° (repos) à 0° au survol */
  [data-framer-name="Suffix"] > [class$="-container"] { transition: rotate .35s cubic-bezier(.22,1,.36,1); }
  a:hover [data-framer-name="Suffix"] > [class$="-container"],
  button:hover [data-framer-name="Suffix"] > [class$="-container"] { rotate: 45deg; }

  /* Bouton principal (vert) : contour vert sur fond transparent */
  .framer-v-crnp9l, .framer-v-prz1ha, .framer-v-19w6ucu, .framer-v-cxrvm6, .framer-v-trmol0, .framer-v-1693yfp,
  .framer-v-61e1fa, .framer-v-a930ec { transition: background-color .25s ease, box-shadow .25s ease; }
  .framer-v-crnp9l:hover, .framer-v-prz1ha:hover { background-color: rgba(140, 255, 46, 0) !important; box-shadow: 0 1px 10px rgba(0, 0, 0, .25) !important; }
  .framer-v-crnp9l:hover::after, .framer-v-prz1ha:hover::after { content: ""; position: absolute; inset: 0; border: 2px solid rgb(140, 255, 46); border-radius: inherit; pointer-events: none; box-sizing: border-box; }
  .framer-v-61e1fa:hover, .framer-v-a930ec:hover { box-shadow: none !important; }
  /* Bouton secondaire (noir) : gris au survol */
  .framer-v-19w6ucu:hover, .framer-v-cxrvm6:hover, .framer-v-trmol0:hover, .framer-v-1693yfp:hover { background-color: rgb(47, 47, 47) !important; }

  /* Liens du menu : vert au survol */
  .framer-v-1cu6ruc p { transition: color .2s ease; }
  .framer-v-1cu6ruc:hover .framer-il2ul1 { --extracted-r6o4lv: rgb(140, 255, 46) !important; }

  /* Cartes du blogue : l'image grossit légèrement */
  .framer-v-z8s1ar .framer-16vuukq, .framer-v-1r45a25 .framer-g8z77w { transition: scale .6s cubic-bezier(.22,1,.36,1); }
  .framer-v-z8s1ar:hover .framer-16vuukq, .framer-v-1r45a25:hover .framer-g8z77w { scale: 1.04; }
  .framer-v-z8s1ar .framer-1wge4u0 { overflow: hidden; }

  /* Lignes des réalisations : pastille verte, titre atténué */
  .framer-1rd4van .framer-5ol2hr, .framer-1rd4van .framer-1pvk8iz { transition: background-color .25s ease, opacity .25s ease; }
  .framer-1rd4van:hover .framer-5ol2hr { background-color: rgb(140, 255, 46) !important; }
  .framer-1rd4van:hover .framer-1pvk8iz { opacity: .7; }
  .framer-1rd4van:hover .framer-1wwq2vb-container svg { fill: rgb(13, 13, 13); }

  /* Questions de la FAQ */
  [data-b2-faq] { transition: background-color .25s ease; }
  [data-b2-faq]:hover { background-color: rgb(18, 18, 18) !important; }
}