/* ==========================================================================
   FIND Studio — surcharge de marque du template TechCode (Homepage 05)
   Base sobre noir / blanc / gris ; l'orange FIND reste un accent ponctuel.
   ========================================================================== */

:root {
  --find-orange: #ee6c0a;
  --find-black: #111111;
  --find-gray: #f5f5f4;

  /* Accent (violet du template) -> orange FIND */
  --main-color: rgb(238, 108, 10);
  --main-color-rgb: 238, 108, 10;
  --theme-color1: #ee6c0a;

  /* Jaune du template (boutons, gros aplats) -> noir */
  --theme-color2: #111111;
  --color-three: rgb(17, 17, 17);
  --color-three-rgb: 17, 17, 17;

  /* Fonds sombres et clairs neutres */
  --color-two: rgb(17, 17, 17);
  --color-two-rgb: 17, 17, 17;
  --color-seven: rgb(17, 17, 17);
  --color-seven-rgb: 17, 17, 17;
  --color-six: rgb(250, 250, 249);
  --color-six-rgb: 250, 250, 249;
  --color-eight: rgb(245, 245, 244);
  --color-eight-rgb: 245, 245, 244;
  --color-eleven: rgb(245, 245, 244);
  --color-eleven-rgb: 245, 245, 244;
  --color-nine: rgb(17, 17, 17);
  --color-nine-rgb: 17, 17, 17;
}

::selection {
  background: var(--find-orange);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Logo FIND + STUDIO
   -------------------------------------------------------------------------- */

.find-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 140px;
  text-decoration: none;
}

.find-logo_wordmark {
  display: block;
  width: 100%;
  height: auto;
}

.find-logo_studio {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  --studio-ink: var(--find-black);
  --studio-gear: var(--find-orange);
}

.find-logo_letter {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  fill: var(--studio-ink);
}

.find-logo_letter-shape {
  fill: var(--studio-ink);
}

.find-logo_gear {
  fill: var(--studio-gear);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.2, 1);
}

.find-logo:hover .find-logo_gear {
  transform: rotate(180deg);
}

.find-logo--dark .find-logo_studio {
  --studio-ink: #fff;
}

.find-logo--orange .find-logo_studio {
  --studio-ink: var(--find-black);
  --studio-gear: #fff;
}

.main-header .header-upper .logo-box {
  padding: 14px 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Bloc incliné derrière le logo : orange FIND, avec la variante blanche du logo */
.main-header.header-style-five .header-upper .logo-box::before {
  background-color: var(--find-orange);
}

.header-top.style-four .header-top_quote {
  background-color: var(--find-black);
}

.find-lang-switch {
  display: inline-flex;
  margin-right: 16px;
  padding: 3px;
  border-radius: 50px;
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.find-lang-switch a {
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #6a6a6a;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.find-lang-switch a:hover {
  color: var(--find-black);
}

.find-lang-switch a.active {
  background: var(--find-black);
  color: #fff;
}

/* Le menu découpe chaque lettre en <span> : on préserve les espaces */
.main-menu .navigation .menu-text span {
  white-space: pre;
}

/* Boutons : pas de majuscule forcée */
.theme-btn,
.btn-style-one,
.btn-style-two,
.btn-style-three {
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Hero (Slider Five) : photo + voile sombre neutre
   -------------------------------------------------------------------------- */

.find-hero .find-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.75) 50%, rgba(17, 17, 17, 0.45) 100%);
}

.find-hero .auto-container {
  position: relative;
  z-index: 1;
}

.find-hero .slider-five_heading,
.find-hero .slider-five_text,
.find-hero .slider-five_phone,
.find-hero .slider-five_phone a {
  color: #fff;
}

.find-hero .btn-style-two {
  background-color: var(--find-orange);
}

.find-hero .btn-style-two:before {
  background-color: #fff;
}

.find-hero .btn-style-two:hover .btn-wrap .text-two {
  color: var(--find-black);
}

/* --------------------------------------------------------------------------
   Sections : on remplace les gros aplats colorés par du noir / gris
   -------------------------------------------------------------------------- */

/* Rectangle décoratif de la FAQ (jaune) */
.faq-four_color-circle {
  background-color: var(--find-gray) !important;
}

/* Bloc "savoir-faire" (violet) */
.skill-one_inner-container,
.skill-one_column-outer {
  background-color: var(--find-black) !important;
}

/* Icônes des services : fond gris clair, pictogramme orange */
.services-block_five-icon {
  background-color: var(--find-gray);
  color: var(--find-orange);
}

.services-block_five-inner:hover .services-block_five-icon {
  background-color: var(--find-black);
  color: #fff;
}

/* Étapes de la méthode : toutes en noir */
.process-block_four:nth-child(2n + 0) .process-block_four-icon {
  background-color: var(--find-black);
}

/* Numéros de la FAQ */
.accordion-box-two.style-two .title {
  background-color: var(--find-black);
}

/* Blog : boutons sobres */
.news-block_four-image {
  background-color: var(--find-black);
}

.news-block_four-more {
  background-color: var(--find-black);
}

.news-block_four-more:hover {
  background-color: var(--find-orange);
}

/* Bandeau rendez-vous (jaune) */
.cta-seven_inner-container {
  background-color: var(--find-black) !important;
}

.cta-seven_title,
.cta-seven_phone,
.cta-seven_phone a {
  color: #fff;
}

.cta-seven_phone a:hover {
  color: var(--find-orange);
}

/* Bouton secondaire du CTA */
.cta-six .btn-style-three {
  background-color: var(--find-orange);
}

.about-five_image img,
.about-five_image-two img,
.faq-four_image img,
.faq-four_video-box img,
.team-block_five-image img,
.news-block_four-image img {
  width: 100%;
  object-fit: cover;
}

/* Sélecteur de langue mobile (la barre du haut est masquée < 768px) */
.find-lang-switch--mobile {
  display: none;
}

@media (max-width: 991px) {
  .find-lang-switch--mobile {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

/* Bandeau titre : photo + voile sombre */
.find-page-title {
  position: relative;
  background-size: cover;
  background-position: center;
}

.find-page-title::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.6) 100%);
}

.find-page-title .auto-container {
  position: relative;
  z-index: 1;
}

.find-page-title .title,
.find-page-title .page-breadcrumb li,
.find-page-title .page-breadcrumb li a {
  color: #fff;
}

.find-page-title .page-breadcrumb li a:hover {
  color: var(--find-orange);
}

/* Pastille d'icône (remplace les icônes 3D multicolores du template) */
.find-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background-color: var(--find-gray);
  color: var(--find-orange);
  font-size: 38px;
  line-height: 1;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.find-icon-badge span::before {
  margin: 0;
}

.services-block_three-inner:hover .find-icon-badge,
.price-block_one-inner:hover .find-icon-badge {
  background-color: var(--find-black);
  color: #fff;
}

.find-services-grid,
.find-projects-grid {
  padding: 110px 0 80px;
}

/* Réalisations */
.find-projects-grid .gallery-block_three {
  margin-bottom: 30px;
}

/* Pas de filet coloré à gauche du titre (template : border-left 3px) */
.gallery-block_three-content {
  border-left: 0;
}

.find-projects-grid .gallery-block_three-image img,
.find-detail-cover,
.find-detail-thumb {
  width: 100%;
  object-fit: cover;
}

.find-projects-grid .gallery-block_three-image img {
  aspect-ratio: 410 / 433;
}

.find-detail-cover {
  aspect-ratio: 2 / 1;
  border-radius: 8px;
}

.find-detail-thumb {
  aspect-ratio: 9 / 5;
  border-radius: 6px;
}

.find-project-category {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--find-orange);
}

.project-details__name a:hover {
  color: var(--find-orange);
}

.project-details__pagination li.count.active a {
  background-color: var(--find-orange);
}

/* Listes à puces cochées */
.find-check-list li {
  margin-bottom: 8px;
}

.find-check-list li i {
  color: var(--find-orange);
  margin-right: 6px;
}

/* Bloc d'aide de la sidebar services : noir au lieu du violet */
.service-details-help {
  background-color: var(--find-black) !important;
}

.service-details-help .help-shape-1,
.service-details-help .help-shape-2 {
  opacity: 0.15;
}

/* Tarifs */
.find-pricing {
  padding-bottom: 90px;
}

.find-plan-featured .price-block_one-inner {
  border-top: 4px solid var(--find-orange);
}

.find-pricing-note {
  margin-top: 10px;
  text-align: center;
  color: #6a6a6a;
}

/* Bandeau newsletter (CTA Five) : noir sobre */
.cta-five_inner-container {
  background-color: var(--find-black) !important;
}

.cta-five_color-one,
.cta-five_color-two {
  display: none;
}

.cta-five_heading {
  color: #fff;
}

.subscribe-box_two .submit-btn {
  background-color: var(--find-orange);
}

/* 404 */
.find-404_code {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(120px, 22vw, 220px);
  line-height: 1;
  color: var(--find-black);
}

.find-404_dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background-color: var(--find-orange);
}

.find-404 .error-page__sub-title {
  margin-top: 20px;
}

.find-404 .error-page__text {
  margin: 10px 0 30px;
}

.main-header .main-menu .navigation > li > a {
  color: var(--find-black);
}

.main-header .main-menu .navigation > li.current > a,
.main-header .main-menu .navigation > li:hover > a {
  color: var(--find-orange);
}

/* Titres : pas de majuscule à chaque mot (typographie française) */
.sec-title_heading,
.page-breadcrumb li,
.cta-six_title,
.price-block_one-heading {
  text-transform: none;
}

/* Pastilles des services : neutraliser les variantes colorées du template */
.services-block_three .find-icon-badge,
.price-block_one .find-icon-badge {
  background-color: var(--find-gray) !important;
  color: var(--find-orange) !important;
}

.services-block_three-inner:hover .find-icon-badge,
.price-block_one-inner:hover .find-icon-badge {
  background-color: var(--find-black) !important;
  color: #fff !important;
}

/* Contact : icônes sobres, bouton secondaire en contour */
.contact-details__info li .icon {
  background-color: var(--find-black) !important;
}

.contact-details__info li .icon span {
  color: var(--find-orange) !important;
}

.contact-details .btn-style-three {
  background-color: transparent;
  border: 1px solid var(--find-black);
  color: var(--find-black);
}

.contact-details .btn-style-three .btn-wrap .text-one,
.contact-details .btn-style-three .btn-wrap .text-two {
  color: var(--find-black);
}

.contact-details .btn-style-three:hover .btn-wrap .text-two {
  color: #fff;
}

/* Blog : tags neutres */
.blog-details__tags a {
  background-color: var(--find-gray) !important;
  color: var(--find-black) !important;
}

.blog-details__tags a:hover {
  background-color: var(--find-orange) !important;
  color: #fff !important;
}

/* Formats d'images homogènes (photos de tailles variées) */
.team-block_five-image img {
  aspect-ratio: 330 / 467;
  object-fit: cover;
}

.news-block_three-image img {
  width: 100%;
  aspect-ratio: 410 / 248;
  object-fit: cover;
}

.news-block_four-image img {
  aspect-ratio: 410 / 310;
}

.sidebar__post-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.theme-btn .btn-wrap span {
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Lisibilité du texte sur photo (hero) : le voile doit passer AU-DESSUS
   de la photo (.slider-one_image-layer a z-index: 1 dans le template).
   -------------------------------------------------------------------------- */

.find-hero .find-hero_overlay {
  z-index: 2;
}

.find-hero .auto-container {
  z-index: 3;
}

.find-hero .slider-five_heading,
.find-hero .slider-five_text,
.find-hero .slider-five_phone {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.find-page-title .title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Section "Le studio" (About Five) : images aux dimensions prévues par le
   template (446×593 et 344×345), sinon les photos HD débordent.
   -------------------------------------------------------------------------- */

.about-five_image {
  width: 100%;
  max-width: 446px;
}

.about-five_image img {
  display: block;
  width: 100%;
  aspect-ratio: 446 / 593;
  object-fit: cover;
}

.about-five_image-two {
  width: min(344px, 58%);
}

.about-five_image-two img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 7 services : la dernière ligne est centrée */
.services-five .row,
.find-services-grid .row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Écran de chargement FIND : engrenage qui tourne sur le I de FIND
   -------------------------------------------------------------------------- */

.preloader.find-preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--find-black);
  background-image: none;
}

.find-preloader_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(300px, 70vw);
}

.find-preloader_mark {
  position: relative;
  width: 100%;
  animation: find-preloader-in 0.6s ease-out both;
}

.find-preloader_wordmark {
  display: block;
  width: 100%;
  height: auto;
}

.find-preloader_overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.find-preloader_mask {
  fill: var(--find-black);
}

.find-preloader_gear {
  fill: var(--find-orange);
  transform-box: fill-box;
  transform-origin: center;
  animation: find-gear-spin 1.6s linear infinite;
}

.find-preloader_studio {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 4%;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 22px);
  line-height: 1;
  color: #fff;
  animation: find-preloader-in 0.6s 0.15s ease-out both;
}

.find-preloader_bar {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.12);
}

.find-preloader_bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  border-radius: 3px;
  background-color: var(--find-orange);
  animation: find-bar-slide 1.2s ease-in-out infinite;
}

@keyframes find-gear-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes find-bar-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(290%);
  }
}

@keyframes find-preloader-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-preloader_gear,
  .find-preloader_bar span,
  .find-preloader_mark,
  .find-preloader_studio {
    animation-duration: 4s;
    animation-iteration-count: 1;
  }
}

/* --------------------------------------------------------------------------
   Header compact sur mobile : barre email/téléphone masquée (remplacée par
   un bouton d'appel), logo réduit. 195px → ~70px de haut.
   -------------------------------------------------------------------------- */

.find-mobile-call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--find-orange);
  color: #fff;
  font-size: 15px;
}

.find-mobile-call:hover,
.find-mobile-call:focus-visible {
  background-color: var(--find-black);
  color: #fff;
}

/* Tablette et mobile : barre du haut masquée, bouton d'appel rond à la place
   du bloc "Demander un appel", sélecteur de langue à côté du menu. */
@media (max-width: 991px) {
  .main-header .header-top.style-four,
  .main-header.header-style-five .header-upper .header_phone-box {
    display: none;
  }

  .find-mobile-call {
    display: inline-flex;
  }

  .main-header .outer-box {
    gap: 12px;
  }

  .find-lang-switch--mobile {
    margin-right: 0;
  }
}

/* Mobile : logo réduit */
@media (max-width: 767px) {
  .main-header.header-style-five .header-upper .logo-box,
  .main-header.header-style-five.fixed-header .header-upper .logo-box {
    padding: 9px 0;
  }

  .main-header .header-upper .find-logo {
    width: 92px;
    gap: 3px;
  }

  .main-header .outer-box {
    gap: 10px;
  }

  .find-lang-switch--mobile a {
    padding: 3px 8px;
    font-size: 11px;
  }

  .find-mobile-call {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
}

/* Curseur personnalisé du template : inutile sur écran tactile */
@media (hover: none), (max-width: 991px) {
  .cursor,
  .cursor-follower {
    display: none !important;
  }
}

/* Pas de scroll horizontal : le panneau du menu mobile est rangé hors écran à droite
   et l'image du slider est légèrement agrandie (effet de zoom du template). */
html,
body {
  overflow-x: clip;
}

.slider-five,
.slider-five .main-slider {
  overflow: hidden;
}

/* Menu mobile : logo version claire, liens sans majuscule forcée, contacts en bas */
.mobile-menu .nav-logo .find-logo {
  width: 120px;
}

.mobile-menu .navigation li a,
.mobile-menu .navigation li a .menu-text {
  text-transform: none !important;
}

.find-menu-contact {
  margin: 0;
  padding: 24px 25px;
  list-style: none;
}

.find-menu-contact li + li {
  margin-top: 12px;
}

.find-menu-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--find-black);
}

.find-menu-contact a i {
  color: var(--find-orange);
}

/* Savoir-faire (Skill One) : 5 expertises, pictogrammes orange, rythme resserré */
.skill-one_column-outer {
  padding: 60px 56px;
}

.skill-one .sec-title {
  margin-bottom: 36px;
}

.skill-one_member {
  margin-bottom: 26px;
}

.skill-one_member-inner {
  min-height: 48px;
  padding-top: 2px;
  padding-left: 68px;
}

.skill-one_member-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--find-orange);
  font-size: 24px;
}

.skill-one_member-icon span::before {
  margin: 0;
}

.skill-one_member-title {
  font-size: 16px;
}

.skill-one_member-bar_outer {
  margin-top: 12px;
}

.skill-one_member-bar:before {
  background-color: var(--find-orange);
}

.skill-one_image-outer {
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width: 767px) {
  .skill-one_column-outer {
    padding: 44px 24px;
  }

  /* le template empile l'icône au-dessus du libellé : on la garde à gauche */
  .skill-one_member-inner {
    padding-top: 0;
    padding-left: 56px;
  }

  .skill-one_member-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    line-height: 42px;
    margin: 0;
    font-size: 20px;
  }

  .skill-one_member-title {
    font-size: 15px;
    line-height: 1.4;
  }

  .skill-one_member {
    margin-bottom: 22px;
  }
}