/* ==========================================================================
   DUOLOGUE — surcouche de repigmentation du thème Aleric
   Chargée APRÈS theme/css/main.css. Ne touche pas au thème d'origine :
   on ne fait que réassigner ses tokens et repeindre son châssis
   (préloader, curseur, header, offcanvas, back-to-top, accordéon).
   ========================================================================== */

/* ---------- 1. Réassignation des tokens du thème ---------- */
:root{
  --tp-theme-primary: #5B3E8C;   /* était #c4ee18 (lime) */
  --tp-theme-secondary: #2E7D8F; /* était #ff6d00 */
  --tp-theme-1: #5B3E8C;         /* était #0752c5 */
  --tp-common-black: #241B2E;
  --tp-common-black-2: #241B2E;
  --tp-common-black-5: #241B2E;
  --tp-grey-3: #F8F6FB;
  --tp-grey-5: #F3F1F8;
  --tp-border-1: #E9E4F0;
}

/* ---------- 2. Préloader ---------- */
.loader-wrap{background:var(--duo-ink)}
.loader-wrap svg path{fill:var(--duo-ink)}
.loader-wrap-heading .load-text span{
  font-family:var(--duo-display);font-weight:700;color:#fff;letter-spacing:.14em;
}
.loader-wrap-heading .load-text{color:#fff}

/* ---------- 3. Curseur magique ---------- */
#ball{border:1px solid var(--duo-pri) !important;background:rgba(91,62,140,.10)}
#magic-cursor.cursor-bg-green #ball{border-color:var(--duo-pri) !important}

/* ---------- 4. En-tête ---------- */
#header-sticky{background:transparent;transition:background .3s ease,box-shadow .3s ease}
#header-sticky.header-sticky{
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--duo-line);
}
.duo-th-nav > ul{display:flex;gap:32px;margin:0;padding:0;list-style:none;justify-content:center}
.duo-th-nav > ul > li{position:relative}
.duo-th-nav > ul > li > a{
  font-family:var(--duo-body);font-size:15px;font-weight:300;color:var(--duo-ink-2);
  padding:26px 0;display:inline-block;transition:color .18s ease;
}
.duo-th-nav > ul > li > a:hover{color:var(--duo-pri)}
.duo-th-nav .tp-submenu{
  position:absolute;top:100%;left:0;min-width:230px;background:#fff;border-radius:14px;
  border:1px solid var(--duo-line);box-shadow:var(--duo-sh-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .22s ease;list-style:none;
}
.duo-th-nav > ul > li:hover .tp-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.duo-th-nav .tp-submenu li a{
  display:block;padding:9px 13px;border-radius:9px;font-size:14px;color:var(--duo-muted);
}
.duo-th-nav .tp-submenu li a:hover{background:var(--duo-pri-50);color:var(--duo-pri)}

.tp-menu-bar{background:transparent;border:0;padding:8px;cursor:pointer}
.tp-menu-bar span{display:block;width:22px;height:2px;background:var(--duo-ink);
  border-radius:2px;margin:4px 0}

/* ---------- 5. Offcanvas ---------- */
.tp-offcanvas{background:#fff;padding:34px 32px;box-shadow:var(--duo-sh-lg)}
.tp-offcanvas .close-btn{background:var(--duo-pri-50);color:var(--duo-pri);border:0;
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:15px}
.tp-offcanvas-menu nav > ul{list-style:none;padding:0;margin:26px 0 0}
.tp-offcanvas-menu nav > ul > li{border-bottom:1px solid var(--duo-line)}
.tp-offcanvas-menu nav > ul > li > a{display:block;padding:14px 0;
  font-family:var(--duo-display);font-size:17px;font-weight:600;color:var(--duo-ink)}
.tp-offcanvas-menu nav .tp-submenu{list-style:none;padding:0 0 12px 14px;display:none}
.tp-offcanvas-menu nav li.active > .tp-submenu{display:block}
.tp-offcanvas-menu nav .tp-submenu li a{display:block;padding:8px 0;font-size:14.5px;
  color:var(--duo-muted)}
.tp-menu-close{background:var(--duo-bg-2);border:0;width:30px;height:30px;border-radius:50%;
  color:var(--duo-muted);position:absolute;right:0;top:12px;cursor:pointer}
.tp-offcanvas-menu nav > ul > li{position:relative}
.body-overlay{position:fixed;inset:0;background:rgba(36,27,46,.42);z-index:98;
  opacity:0;visibility:hidden;transition:all .3s ease}
.body-overlay.apply,.body-overlay.opened{opacity:1;visibility:visible}

/* ---------- 6. Recherche ---------- */
.tp-search-form-toggle{position:fixed;top:0;left:0;right:0;background:#fff;padding:60px 0;
  z-index:101;transform:translateY(-100%);transition:transform .4s ease;
  box-shadow:var(--duo-sh-lg)}
.tp-search-form-toggle.active{transform:translateY(0)}
.tp-search-body-overlay{position:fixed;inset:0;background:rgba(36,27,46,.42);z-index:100;
  opacity:0;visibility:hidden;transition:all .3s ease}
.tp-search-body-overlay.active{opacity:1;visibility:visible}
.tp-search-form-toggle input{width:100%;border:0;border-bottom:2px solid var(--duo-line);
  font-family:var(--duo-display);font-size:26px;padding:14px 0;color:var(--duo-ink);outline:none}
.tp-search-close{background:none;border:0;color:var(--duo-muted);cursor:pointer;font-size:20px}

/* ---------- 7. Back to top ---------- */
.scrollToTop{background-color:var(--duo-pri) !important;color:#fff;border-radius:50%}
.scrollToTop .arrowUp{color:#fff}
.scrollToTop .water_wave use{fill:rgba(255,255,255,.28)}

/* ---------- 8. Texte qui s'inverse au scroll (effet nº26) ---------- */
.tp_text_invert.invert-duo > div{
  background-image:linear-gradient(to right,var(--duo-ink) 50%,#C3BAD0 50%);
}
.tp_text_invert.invert-duo-light > div{
  background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,.34) 50%);
}

/* ---------- 9. Révélation de texte (SplitText) ---------- */
.tp-revel-line{overflow:hidden;display:block}

/* ---------- 10. Marquee (effet nº36) ---------- */
.moving-text{overflow:hidden;white-space:nowrap}
.moving-text .wrapper-text{display:inline-flex;gap:18px;align-items:center;will-change:transform}
.duo-marquee-item{
  font-family:var(--duo-display);font-size:15px;font-weight:600;color:var(--duo-ink-2);
  background:#fff;border:1px solid var(--duo-line);padding:11px 22px;border-radius:100px;
  white-space:nowrap;
}
.duo-marquee-sep{width:6px;height:6px;border-radius:50%;background:var(--duo-b);flex:none}

/* ---------- 11. Atropos (effet nº49) ---------- */
.my-atropos,.my-atropos .atropos{width:100%}
.atropos-inner{border-radius:var(--duo-r-xl);overflow:visible}
.atropos-shadow{display:none}

/* ---------- 12. Accordéon FAQ (effet nº30) ---------- */
.tp-custom-accordion .accordion-item{
  background:#fff;border:1px solid var(--duo-line);border-radius:var(--duo-r-lg) !important;
  margin-bottom:12px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.tp-custom-accordion .accordion-item.tp-faq-active{
  border-color:var(--duo-pri);box-shadow:var(--duo-sh);
}
.tp-custom-accordion .accordion-button{
  font-family:var(--duo-display);font-size:16.5px;font-weight:600;color:var(--duo-ink);
  background:transparent;padding:22px 26px;box-shadow:none !important;
}
.tp-custom-accordion .accordion-button:not(.collapsed){color:var(--duo-pri);background:transparent}
.tp-custom-accordion .accordion-button::after{
  background-image:none;content:'';width:9px;height:9px;flex:none;
  border-right:2px solid var(--duo-muted-2);border-bottom:2px solid var(--duo-muted-2);
  transform:rotate(45deg);margin-top:-4px;transition:transform .22s ease;
}
.tp-custom-accordion .accordion-button:not(.collapsed)::after{
  transform:rotate(-135deg);margin-top:2px;border-color:var(--duo-pri);
}
.tp-custom-accordion .accordion-body{
  padding:0 26px 24px;font-size:14.5px;line-height:1.75;color:var(--duo-muted);max-width:78ch;
}

/* ---------- 13. Compteurs (purecounter + bounce) ---------- */
.duo-counter .v{
  font-family:var(--duo-display);font-size:clamp(38px,4.6vw,60px);font-weight:700;
  letter-spacing:-.035em;color:var(--duo-ink);line-height:1;
}
.duo-counter .v .suf{color:var(--duo-pri)}
.duo-counter .l{font-size:13.5px;color:var(--duo-muted);margin-top:10px}

/* ---------- 14. Bouton bounce (effet nº27) ---------- */
.tp-btn-bounce{display:inline-flex}

/* ---------- 15. Swiper témoignages ---------- */
.duo-testi{background:#fff;border:1px solid var(--duo-line);border-radius:var(--duo-r-xl);
  padding:34px;height:auto}
.duo-testi p{font-size:16px;line-height:1.75;color:var(--duo-ink-2);margin-bottom:22px}
.duo-testi .who{display:flex;align-items:center;gap:13px}
.duo-testi .who i{width:42px;height:42px;border-radius:50%;background:var(--duo-pri-50);
  color:var(--duo-pri);display:grid;place-items:center;font-style:normal;
  font-family:var(--duo-display);font-weight:600;font-size:14px;flex:none}
.duo-testi .who b{font-family:var(--duo-display);font-size:14.5px;font-weight:600;
  color:var(--duo-ink);display:block}
.duo-testi .who span{font-size:12.5px;color:var(--duo-muted-2)}
.swiper-pagination-bullet-active{background:var(--duo-pri) !important}
.duo-swiper{padding-bottom:52px !important}

/* ---------- 16. Correctifs de cohabitation ----------
   main.css impose ses propres styles sur body/h1-h6 ; on les ramène
   sur la typographie Duologue sans toucher au fichier du thème. */
body{font-family:var(--duo-body);color:var(--duo-muted);background:var(--duo-bg)}
h1,h2,h3,h4,h5{font-family:var(--duo-display);color:var(--duo-ink)}
#smooth-content{overflow:visible}

/* ---------- 17. Photographies ---------- */
.duo-band{padding:0 0 96px;background:var(--duo-wash)}
.duo-photo{margin:0;border-radius:var(--duo-r-xl);overflow:hidden;position:relative;
  background:var(--duo-bg-2)}
.duo-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* bande pleine largeur — l'image se déploie au scroll (effet nº29) */
.duo-photo-band{height:min(58vh,520px)}
.duo-photo-band .scale-up{transform-origin:center center;will-change:transform}
.duo-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 34px 28px;
  background:linear-gradient(to top,rgba(36,27,46,.82),rgba(36,27,46,0));
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.duo-photo-cap p{color:#fff;font-size:15.5px;font-weight:300;margin:0;max-width:52ch}
@media(max-width:768px){
  .duo-band{padding-bottom:56px}
  .duo-photo-band{height:300px}
  .duo-photo-cap{padding:44px 20px 20px}
  .duo-photo-cap p{font-size:14px}
}

/* photo en tête de carte verticale + distorsion WebGL au survol (effet nº14) */
.duo-card-photo{padding-top:0;overflow:hidden}
.duo-photo-card{height:230px;margin:-1px -28px 26px;border-radius:0;cursor:pointer}
.duo-photo-card .tp--hover-img{width:100%;height:100%}
.duo-photo-card .tp--hover-img canvas{width:100% !important;height:100% !important;display:block}
.duo-photo-card img{height:230px}

/* capture produit insérée dans une carte */
.duo-photo-inset{border:1px solid var(--duo-line)}
.duo-photo-inset img{height:auto}


/* ---------- 18. Correctifs mobile constatés au banc de test ---------- */

/* Le hero portait sa grille en style inline : impossible à surcharger en media
   query, la carte produit restait à côté du titre et débordait à 390 px. */
.duo-split-hero{grid-template-columns:1fr 1.06fr;gap:60px}
@media(max-width:1080px){
  .duo-split-hero{grid-template-columns:1fr;gap:40px}
}

/* L'offcanvas du thème fait 450 px fixes et se cache en `right:-100%` :
   sur un écran de 390 px il créait 200 px de défilement horizontal. */
.tp-offcanvas{width:min(450px,88vw)}
html,body{overflow-x:hidden}

@media(max-width:768px){
  .duo-photo-card{margin-left:-28px;margin-right:-28px}
  .lp-hero{padding-top:110px}
  .duo-band{padding-bottom:44px}
}