.elementor-kit-137{--e-global-color-primary:#F4F1EA;--e-global-color-secondary:#9B98A0;--e-global-color-text:#F4F1EA;--e-global-color-accent:#3563E9;--e-global-color-51acc41:#0B0B0E;--e-global-color-2a9ff9c:#121218;--e-global-color-c8e2701:#1A1A22;--e-global-color-9af4e0e:#6D95FF;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.62px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;}.elementor-kit-137 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   TRÉSOR PULULU — CSS global pour WordPress + Elementor
   À coller dans : Elementor → Réglages du site → CSS personnalisé
   ========================================================================== */

:root {
  --noir: #0b0b0e;
  --noir-2: #121218;
  --noir-3: #1a1a22;
  --ivoire: #f4f1ea;
  --gris: #9b98a0;
  --bleu: #3563e9;
  --bleu-vif: #6d95ff;
  --trait: rgba(244, 241, 234, 0.12);
}

body {
  background-color: var(--noir);
  color: var(--ivoire);
}

::selection { background: var(--bleu); color: var(--ivoire); }

/* --------------------------------------------------------------------------
   Typographie — classes à poser sur les widgets Titre / Texte
   -------------------------------------------------------------------------- */

/* Petit sur-titre avec trait bleu. Classe : kicker */
.kicker {
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu-vif) !important;
}
.kicker .elementor-heading-title,
.kicker p {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kicker .elementor-heading-title::before,
.kicker p::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--bleu);
}

/* Grand titre de section. Classe : titre-section */
.titre-section .elementor-heading-title {
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

/* Titre héro avec 2e ligne en contour. Classe : hero-titre
   Dans le widget Titre, mettre la 2e ligne dans <span class="contour">…</span> */
.hero-titre .elementor-heading-title {
  font-size: clamp(2.6rem, 9vw, 6.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.hero-titre .contour {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--ivoire);
}

/* Paragraphe d'intro gris. Classe : chapeau */
.chapeau, .chapeau p { color: var(--gris); max-width: 58ch; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Boutons — classes à poser sur le widget Bouton
   -------------------------------------------------------------------------- */

.btn-plein .elementor-button,
.btn-ligne .elementor-button {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.95rem 1.7rem;
  transition: all 0.25s ease;
}
.btn-plein .elementor-button {
  background: var(--bleu);
  color: var(--ivoire);
  border: 1px solid var(--bleu);
}
.btn-plein .elementor-button:hover {
  background: var(--bleu-vif);
  border-color: var(--bleu-vif);
  transform: translateY(-2px);
}
.btn-ligne .elementor-button {
  background: transparent;
  color: var(--ivoire);
  border: 1px solid var(--ivoire);
}
.btn-ligne .elementor-button:hover {
  background: var(--ivoire);
  color: var(--noir);
  transform: translateY(-2px);
}

/* Lien flèche. Classe : lien-fleche */
.lien-fleche a {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  text-decoration: none;
}
.lien-fleche a::after { content: " →"; }

/* --------------------------------------------------------------------------
   En-tête (Theme Builder) — classe sur la section du header : en-tete-tp
   -------------------------------------------------------------------------- */

.en-tete-tp { background: transparent; transition: background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; }
.en-tete-tp.elementor-sticky--effects {
  background: rgba(11, 11, 14, 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--trait);
}
.en-tete-tp .elementor-nav-menu a {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Galerie photo (widget Galerie d'Elementor Pro). Classe : galerie-tp
   -------------------------------------------------------------------------- */

.galerie-tp .e-gallery-item {
  cursor: zoom-in;
}
.galerie-tp .e-gallery-image {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.galerie-tp .e-gallery-item:hover .e-gallery-image { transform: scale(1.04); }
.galerie-tp .elementor-gallery-item__overlay,
.galerie-tp .e-gallery-item__overlay {
  background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 14, 0.85));
}
.galerie-tp .elementor-gallery-item__title,
.galerie-tp .e-gallery-item__title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.9);
}
.galerie-tp .e-gallery__titles-container { margin-bottom: 2rem; }
.galerie-tp .e-gallery-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.galerie-tp .e-gallery-title.e-gallery--active,
.galerie-tp .e-gallery-title:hover { color: var(--bleu-vif); }

/* Lightbox Elementor : fond plus profond */
.elementor-lightbox { background: rgba(5, 5, 7, 0.94); }

/* --------------------------------------------------------------------------
   Cartes (projets, services) — classes : cas-carte / service-tp
   -------------------------------------------------------------------------- */

.cas-carte {
  background: var(--noir-3);
  border: 1px solid var(--trait);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.cas-carte:hover { transform: translateY(-4px); border-color: rgba(83, 118, 255, 0.55); }

.service-tp { background: var(--noir); border: 1px solid var(--trait); }
.service-tp .num,
.service-tp .elementor-heading-title.num {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--bleu-vif);
}

/* Étiquettes de projet. Classe : cas-tags */
.cas-tags ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.cas-tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--trait);
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   Vidéos (widget Vidéo) — classe : video-carte-tp (+ carre ou vertical)
   -------------------------------------------------------------------------- */

.video-carte-tp { background: var(--noir-3); border: 1px solid var(--trait); transition: border-color 0.3s ease; }
.video-carte-tp:hover { border-color: rgba(83, 118, 255, 0.55); }
.video-carte-tp video { background: #000; }
.video-carte-tp.carre video { aspect-ratio: 1 / 1; object-fit: cover; }
.video-carte-tp.vertical video { aspect-ratio: 9 / 16; object-fit: cover; }

/* --------------------------------------------------------------------------
   Vitrines de sites (fenêtre navigateur) — utilisées par les snippets HTML
   -------------------------------------------------------------------------- */

.navigateur {
  border: 1px solid var(--trait);
  background: var(--noir-2);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.navigateur:hover { border-color: rgba(83, 118, 255, 0.55); }
.navigateur-barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  background: var(--noir-3);
}
.navigateur-barre i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--trait); }
.navigateur-barre .url { margin-left: 0.6rem; font-size: 0.72rem; color: var(--gris); letter-spacing: 0.05em; }
.navigateur .defile { aspect-ratio: 16 / 11; overflow: hidden; }
.navigateur .defile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: object-position 8s ease-in-out;
}
.navigateur:hover .defile img { object-position: bottom; }
.navigateur video { width: 100%; aspect-ratio: 16 / 10; display: block; background: #000; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .navigateur .defile img { transition: none; }
}
.indice-survol {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-vif);
}

/* --------------------------------------------------------------------------
   Bande défilante (snippet HTML) + références
   -------------------------------------------------------------------------- */

.bande { border-block: 1px solid var(--trait); padding-block: 0.9rem; overflow: hidden; background: var(--noir-2); }
.bande-piste { display: flex; gap: 3rem; width: max-content; animation: defiler 28s linear infinite; }
.bande span {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.bande span b { color: var(--bleu-vif); }
@keyframes defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bande-piste { animation: none; } }

.references-tp .elementor-heading-title,
.references-tp p {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   Pastilles de couleur (palette projet). Classe : cas-swatches
   -------------------------------------------------------------------------- */

.cas-swatches { display: flex; gap: 0.45rem; }
.cas-swatches span { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--trait); display: inline-block; }
.kicker .elementor-heading-title { font-size: 0.78rem !important; }


.logos-defile .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.logos-defile .swiper-slide img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
   filter: grayscale(1) invert(1) brightness(1.4) contrast(0.9);
  opacity: 0.8;
  transition: opacity 0.25s ease;
}
.logos-defile .swiper-slide img:hover { opacity: 1; }/* End custom CSS */