/* ═══════════════════════════════════════════════════════════════
   Why – Portfolio Scroll Fixes  v1.3.3
   Pour revenir en arrière : supprimer why-portfolio-scroll.php
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Supprime les bords arrondis sur l'image centrale ───────
   GSAP applique borderRadius:"10px" en inline style au scroll.
   !important l'écrase car les inline styles sans !important
   sont inférieurs aux règles CSS !important dans la cascade.    */
.elementor-widget-tp-portfolio-scroll .tp-instagram-thumb img {
  border-radius: 0 !important;
}

/* ── 2. Conserve uniquement : centre + 2 gauche (6,7) + droite (3)
   Masque les 4 images indésirables sans toucher à l'animation.  */
.elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-1,
.elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-2,
.elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-4,
.elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-5 {
  display: none !important;
}

/* ── 3. Corrige les deux traits dans le footer au scroll ───────
   animate.css du thème remplace .fadeInUp par tp-title-right :
   un glissement translateX(-100px → 0) sur 2 s.
   Au début de l'animation, le texte à opacité quasi-nulle forme
   deux traits horizontaux visibles (h2 + paragraphe).
   Fix : on substitue une simple apparition en fondu (fadeIn)
   plus rapide, sans déplacement horizontal.                     */
.elementor-503 .e-con.animated.fadeInUp {
  animation-name: fadeIn !important;
  animation-duration: 0.8s !important;
}

/* ── 4. Scroll widget : flèche à gauche, espacée de 15 px du texte ─
   Le thème prévoyait margin-left:20px sur le SVG (flèche à droite).
   On passe le span en flex pour un alignement vertical propre,
   on remet le SVG à gauche avec margin-right:15px et on supprime
   le margin-top:-25px qui servait à compenser l'ancienne position. */
.elementor-widget-tp-about-scroll-to-section .ab-inner-hero-scroll span {
  display: inline-flex;
  align-items: center;
}
.elementor-widget-tp-about-scroll-to-section .ab-inner-hero-scroll span svg {
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 15px;
  flex-shrink: 0;
  animation-name: why-scroll-arrow !important;
}

/* Réduit la descente de la flèche : 10px → 4px */
@keyframes why-scroll-arrow {
  0%   { transform: translateZ(0); }
  100% { transform: translate3d(0, 6px, 0); }
}

/* ── 5. Portfolio Scroll : supprime le padding-bas du container ────
   Le container Elementor qui enveloppe le widget Portfolio Scroll
   avait padding-bottom: 400px (valeur saisie dans Elementor).
   On l'annule ici pour déléguer l'espacement au contrôle "Espace bas"
   du widget lui-même (margin-bottom sur {{WRAPPER}}).
   ":has()" est supporté par tous les navigateurs modernes.          */
/* ── 6. Footer : background #F9F7F0 partout ───────────────────────
   Les containers e-con internes du footer template (503) sont
   transparents par défaut, ce qui laisse passer le fond de page
   sur les pages sombres. On force #F9F7F0 sur le footer entier
   et sur chaque e-con pour garantir l'uniformité sur toutes pages. */
.elementor-503,
.elementor-503 .e-con {
  background-color: #F9F7F0 !important;
}

.e-con:has(.elementor-widget-tp-portfolio-scroll) {
  padding-bottom: 0 !important;
}

/* ── 7. Homepage : flèche scroll centrée + visible au chargement ───
   Le widget est dans un flex container (align-items:center) dans une
   section hero de ~1438px > viewport (~1289px). Résultat : le widget
   tombe 124px sous le fold.
   Fix : on sort le widget du flux flex avec position:absolute, on
   l'ancre en bas du hero (bottom:15vh) et on le centre horizontalement
   (left:50% + translateX(-50%)).
   body.home scope la règle à la homepage uniquement.               */
body.home .elementor-widget-tp-about-scroll-to-section {
  position: absolute !important;
  bottom: 5vh;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  z-index: 10;
}
body.home .elementor-widget-tp-about-scroll-to-section .ab-inner-hero-scroll {
  text-align: center;
}

/* ── 8. About Us : réduit l'espace entre "Nos références" et les counters ─
   La classe thème .tp-studio-funfact-item a un padding-top hérité de
   150px/50px/30px/20px selon le breakpoint (prévu pour un autre design
   avec bordures de séparation). Non réglable depuis Elementor car codé
   en dur dans le CSS du thème. Scopé à la page About Us (page-id-1529). */
body.page-id-1529 .tp-studio-funfact-item {
  padding-top: 10px !important;
}

/* ── 9. Team Scroll : icône LinkedIn sous le prénom, visible au survol ─
   Le widget tp-team-scroll (liko-core) génère désormais un lien
   .tp-team-linkedin (icône FontAwesome fab fa-linkedin-in) quand le
   champ "Lien LinkedIn" du repeater est rempli dans Elementor.
   Apparition identique à celle du prénom (.tp-team-title-sm dans
   liko-core.css : translateY + opacity/visibility, 0.5s ease-out),
   avec un délai de 0.4s = 0.2s (délai du prénom) + 0.2s (écart entre
   le poste et le prénom), pour poursuivre la même cascade au survol
   de la carte (.tp-team-item:hover). Couleur #F9F7F0 au repos,
   #F21137 au survol du bouton lui-même (transition rapide et sans
   délai, indépendante de l'apparition). Taille/couleurs restent
   réglables depuis l'onglet Style du widget (les contrôles Elementor,
   si renseignés, prennent le dessus sur ces valeurs par défaut). */
.tp-team-content .tp-team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  color: #F9F7F0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out 0.4s, visibility 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s, color 0.3s ease 0s;
}
.tp-team-item:hover .tp-team-linkedin {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tp-team-content .tp-team-linkedin:hover {
  color: #F21137;
}

/* ── 10. About Us : remplace le blanc cassé #F5F7F5 par le crème officiel ─
   Deux titres de section (h2 "Création" / "Activation 360°") et les
   compteurs purecounter (.tp-el-counter-number) ont une couleur
   personnalisée #F5F7F5 réglée en dur dans Elementor (widgets), au lieu
   du blanc-crème #F9F7F0 de la charte. Scopé à la page About Us
   (page-id-1529) pour ne pas affecter d'autres pages.
   IMPORTANT : on exclut le footer (.elementor-503, template partagé avec
   toutes les pages) — un premier essai sans cette exclusion forçait aussi
   les textes du footer (sur fond crème #F9F7F0) en couleur #F9F7F0,
   les rendant illisibles ("blancs") uniquement sur cette page.
   On exclut aussi le slider plein écran Conseil/Création/Activation
   (.sv-service-item, widget tp-services-advance-tab) : ce sélecteur trop
   large écrasait également le sous-titre "01/02/03 Une question de..."
   (couleur foncée volontaire, cf. .ab-2-work-item .sv-service-subtitle)
   en blanc, rendant les 3 panneaux uniformément blancs alors que leurs
   sous-titres doivent garder une couleur différente du titre. */
body.page-id-1529 .elementor-heading-title:not(.elementor-503 .elementor-heading-title):not(.sv-service-item .elementor-heading-title),
body.page-id-1529 .tp-el-counter-number:not(.elementor-503 .tp-el-counter-number) {
  color: #F9F7F0 !important;
}

/* ── 10b. Slider plein écran Conseil/Création/Activation : sous-titre
   "01/02/03 Une question de..." forcé en blanc PLEIN par la règle thème
   ".liko-dark-active div .elementor-heading-title { color: ... !important }"
   (liko-core), résultat : sous-titre et grand titre (Conseil/Création/
   Activation) rendus dans exactement la même couleur blanc-crème
   #F9F7F0, sans aucune distinction visuelle entre les deux niveaux de
   texte — c'est ce que l'utilisateur signalait.
   Chaque template a pourtant sa propre couleur réglée dans Elementor
   (réglages des pages #4891/#5019/#16702, contrôle "Couleur du texte" du
   widget sous-titre) :
     - #4891 Conseil    → Couleur globale "Primary"   (#111111, noir)
     - #5019 Création   → Couleur globale "Secondary" (#F21137, rouge)
     - #16702 Activation→ Couleur globale "Primary"   (#111111, noir)
   D'où noir/rouge/noir — le rouge sur "Création" (fond noir) est déjà le
   bon choix de lisibilité fait dans Elementor ; on restaure donc ces
   couleurs telles que réglées, via les variables CSS globales
   Elementor (--e-global-color-primary / -secondary), au lieu d'une
   couleur arbitraire. */
.elementor-4891 .elementor-element-84601b0 .elementor-heading-title {
  color: var(--e-global-color-primary) !important;
}
.elementor-5019 .elementor-element-4ed84a3 .elementor-heading-title {
  color: var(--e-global-color-secondary) !important;
}
.elementor-16702 .elementor-element-4ed84a3 .elementor-heading-title {
  color: var(--e-global-color-primary) !important;
}

/* ── 11b. Footer invisible sur les pages projet (tp-portfolios) ────────────
   Sur les pages projet, le widget Portfolio Scroll utilise un wrapper GSAP
   ScrollSmoother (#smooth-wrapper) qui pilote le défilement par transform au
   lieu du scroll natif. Les animations d'entrée Elementor (classe
   "animated-slow", ex. fadeIn) du footer (elementor-503) se déclenchent via
   IntersectionObserver sur le scroll natif : avec ScrollSmoother elles ne
   se terminent jamais (relancées en boucle), et le footer reste figé à
   opacity ~0 — invisible en bas de page. Pas de "footer différent", c'est
   le même template 503 que sur l'accueil, juste son animation cassée par
   le scroll smoothé. Scopé au gabarit projet (tp-portfolios-template) pour
   ne pas toucher l'accueil où l'animation fonctionne normalement. */
body.tp-portfolios-template .elementor-503 .animated-slow {
  opacity: 1 !important;
  animation: none !important;
}

/* ── 11. Fashion Dark : remplace le blanc cassé #F5F7F5 par le crème officiel ─
   Le bloc "Typographie" du case study (titres de police "Big Shoulders
   Display" / "Syne" + aperçus "Aa") a une couleur personnalisée #F5F7F5
   réglée en dur dans Elementor, au lieu du blanc-crème #F9F7F0 de la
   charte. Scopé à la page Fashion Dark (postid-14146) pour ne pas
   affecter d'autres pages. Ne touche pas les pastilles de la palette
   couleurs (.tp-el-color-pallate) qui affichent intentionnellement les
   couleurs de marque du client (#5D5D63 inclus). */
body.postid-14146 .liko-animated-text-widget.tp-el-animation-heading {
  color: #F9F7F0 !important;
}

/* ── 12. Footer : texte blanc/illisible quand le Dark Mode de la page est actif ─
   La page About Us (et toute autre page avec le toggle "Dark Mode" activé,
   liko_is_darkmode_on = 'on') ajoute la classe .liko-dark-active sur <html>.
   Le thème (liko-custom.css) force alors tous les .elementor-heading-title
   du DOM en blanc-crème (var(--tp-common-white), #F9F7F0) via une règle
   non scopée — y compris ceux du footer (elementor-503, template partagé
   par toutes les pages), qui a pourtant son propre fond crème #F9F7F0.
   Résultat : texte crème sur fond crème, illisible ("blanc") uniquement
   sur les pages en Dark Mode. On restaure ici la couleur d'origine du
   footer (#111111, confirmée correcte sur l'accueil) quand .liko-dark-active
   et .elementor-503 coexistent — peu importe la page concernée. */
.liko-dark-active .elementor-503 .elementor-heading-title,
.liko-dark-active .elementor-503 .elementor-heading-title a span {
  color: #111111 !important;
}

/* ── 13. Menu : supprime le mot "close" affiché à côté de l'icône X ───────
   Le bouton de fermeture du menu plein écran (widget liko-core
   header-offcanvas.php, type "full_width") affiche un span texte
   "close" en plus de l'icône SVG. Pas de réglage Elementor pour le
   masquer (texte codé en dur dans le template du plugin) : on le
   cache en CSS plutôt que de modifier le plugin (qui serait écrasé
   à la prochaine mise à jour). Les deux instances du bouton (mobile
   d-md-none et desktop d-none d-lg-block) sont concernées. */
.tp-offcanvas-2-close-btn .text {
  display: none !important;
}

/* ── 14. Menu + footer : hover rouge de charte sur les icônes réseaux sociaux ─
   Les icônes Instagram/LinkedIn (widget Elementor Social Icons) du menu
   plein écran (.tp-offcanvas-2-right-inner) et du footer (.elementor-503)
   n'ont aucun état hover personnalisé. On ajoute le rouge de charte
   (#F21137) en fond au survol, en gardant l'icône en crème (#F9F7F0)
   pour rester lisible sur le rouge. Scopé à ces deux zones (présentes
   sur toutes les pages) sans toucher d'éventuelles autres icônes
   sociales ailleurs sur le site. */
.tp-offcanvas-2-right-inner .elementor-social-icon:hover,
.elementor-503 .elementor-social-icon:hover {
  background-color: #F21137 !important;
}
.tp-offcanvas-2-right-inner .elementor-social-icon:hover svg,
.elementor-503 .elementor-social-icon:hover svg {
  fill: #F9F7F0 !important;
}

/* ── 15. About Us : H1 "...question d'idées" décalé à gauche du paragraphe ─
   Le thème applique transform: translateX(-12px) sur .ab-inner-hero-title,
   sans raison fonctionnelle visible (pas d'animation JS qui le réinitialise
   à 0 — la valeur reste figée en permanence). Conséquence : le H1 démarre
   12px plus à gauche que le paragraphe situé juste dessous, qui lui n'a pas
   cette classe et reste aligné sur le bord du container. On annule ce
   décalage pour réaligner le H1 sur le paragraphe et sur le container. */
.ab-inner-hero-title {
  transform: none !important;
}

/* ── 16. Section contact (fond rouge) : ligne blanche qui reste derrière le trait noir au survol ─
   Le widget .rm-project-contact-item ("Get a quote" / "Send us mail" / "Apply in
   career") a un border fixe (couleur crème #F9F7F0) réglé en dur dans Elementor
   (contrôle "Border" du widget tp-el-title), généré en CSS inline avec une règle
   très spécifique : .elementor-1529 .elementor-element.elementor-element-5f233b5
   .tp-el-title { border-color: #F9F7F0 !important; } — 4 classes + !important.
   Un ::after (trait plein, noir ou blanc selon le Dark Mode) s'anime en parallèle
   de width:0% à 100% au survol pour souligner la ligne. Les deux traits sont à la
   même position (bottom:0) : on voit le trait crème "derrière" le trait foncé une
   fois déployé. Une première tentative avec le sélecteur générique
   ".rm-project-contact-item:hover" (2 classes) perdait face à la règle Elementor
   (4 classes), malgré le !important des deux côtés — la spécificité la plus haute
   gagne à égalité d'importance. Fix : on reproduit le même sélecteur (donc la même
   spécificité) en ajoutant :hover, ce qui le rend légèrement plus spécifique et
   donc gagnant. */
.elementor-1529 .elementor-element.elementor-element-5f233b5 .tp-el-title:hover {
  border-color: transparent !important;
}

/* ── 17. Section contact : même effet de survol que la section Awards juste au-dessus ─
   La section Awards (.tp-award-list-item) souligne sa ligne au survol en faisant
   un fondu + une extension du trait (::after : opacity 0→1, visibility hidden→visible,
   width 0%→100%, transition 0.7s ease-out), alors que la section contact se contentait
   d'étirer la largeur du trait (width 0%→100%, transition 0.4s, sans fondu). On
   reproduit ici exactement le même comportement (fondu + extension, 0.7s ease-out)
   sur .rm-project-contact-item pour une cohérence visuelle entre les deux sections. */
.rm-project-contact-item::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: width 0.7s ease-out, opacity 0.7s ease-out, visibility 0.7s ease-out !important;
}
.rm-project-contact-item:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 18. Homepage : supprime le padding qui rétrécit la grille "saucissons" (Portfolio Card) ─
   Chaque rangée de la grille masonry d'accueil (widget .elementor-widget-tp-portfolio-card)
   est enveloppée dans deux containers Elementor imbriqués (e-con parent + e-con enfant),
   chacun avec un padding de 10px laissé à sa valeur par défaut (réglage Avancé > Padding,
   non personnalisé) — soit 20px de marge cumulée à gauche et à droite. Toutes les autres
   sections plein écran de la page (photo équipe, vidéos hero, slider marques) ont ce padding
   réglé à 0px dans Elementor : seule cette grille l'avait gardé à sa valeur par défaut, ce qui
   la décale visuellement de 20px par rapport au reste du site (pas "plein pot"). On cible tout
   container (à n'importe quel niveau) qui enveloppe directement un widget Portfolio Card,
   scopé à la homepage (page-id-11766) pour ne pas affecter d'autres pages utilisant ce widget. */
body.page-id-11766 .e-con:has(.elementor-widget-tp-portfolio-card) {
  padding: 0 !important;
}

/* ── 19. Homepage mobile : marge 5%/5% en trop sur les panneaux Conseil/Création/
   Activation 360° (débordement horizontal) ────────────────────────────────
   Les containers "Pleine largeur" (content_width: full) de ces 3 panneaux ont
   chacun une marge de 5% à gauche ET à droite réglée dans Elementor (Avancé >
   Marge), sans doute un réglage hérité d'avant le passage en "Pleine largeur"
   (à l'origine probablement une Largeur 90% + marge 5%/5%, cohérent = 100%).
   En "Pleine largeur", Elementor force la largeur du container à 100% quelle
   que soit la valeur du champ Largeur, mais la marge, elle, reste appliquée :
   résultat 100% + 10% de marge = 110%, soit ~19px de débordement à droite sur
   mobile. Sans incidence visible en desktop (assez de place en dehors du
   container centré), mais réel sur mobile où c'est justement ce qui provoque
   le scroll horizontal. Même bug déjà corrigé via Elementor (marge mobile
   à 0) sur les pages Créations, L'agence, Contact et le header partagé —
   celui-ci concerne les 3 panneaux de l'accueil, scopé à la page (11766). */
@media (max-width: 767px) {
  body.page-id-11766 .elementor-element-2a3d3a9,
  body.page-id-11766 .elementor-element-259d3b3,
  body.page-id-11766 .elementor-element-b583392,
  body.page-id-11766 .elementor-element-64aa727,
  body.page-id-11766 .elementor-element-46d5dab,
  body.page-id-11766 .elementor-element-5ec549c {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── 20. Page L'agence mobile : débordement de 12px sur la grille Bootstrap
   du widget Awards (.elementor-element-ccaaad5) ──────────────────────────
   Le widget "tp-award" utilise en interne une grille Bootstrap classique
   (.row en display:flex avec margin-left/margin-right: -12px, "gouttière"
   négative normalement compensée par un padding égal sur les .col-* ou le
   parent .container). Ici rien ne compense ce -12px à droite sur mobile,
   ce qui pousse la largeur de scroll de la page de 12px au-delà du
   viewport. Sans impact visuel (la gouttière négative est un mécanisme
   interne invisible), donc on se contente de clipper le débordement sur
   le widget lui-même plutôt que de toucher aux marges internes de la
   grille. Détecté via test de débordement avec le wrapper global de
   smooth scroll désactivé (scrollWidth 398px vs 386px de viewport),
   scopé à la page L'agence (1529). */
@media (max-width: 767px) {
  body.page-id-1529 .elementor-element-ccaaad5 {
    overflow-x: hidden !important;
  }
}