/*
=========================================
COMO COMO - Custom Stylesheet
Identité visuelle personnalisée
=========================================
*/

/* ================================
   VARIABLES COMO COMO
================================ */
:root {
    /* Couleurs */
    --comocomo-blue: #0033FF;
    --comocomo-orange: #FF6600;
    --comocomo-white: #FFFFFF;
    --comocomo-dark: #0A0E27;

    /* Polices Bricolage Grotesque */
    --tp-ff-Bricolage-thin: 'Bricolage Grotesque', sans-serif;
    --tp-ff-Bricolage-light: 'Bricolage Grotesque', sans-serif;
    --tp-ff-Bricolage: 'Bricolage Grotesque', sans-serif;
    --tp-ff-Bricolage-medium: 'Bricolage Grotesque', sans-serif;
    --tp-ff-Bricolage-semibold: 'Bricolage Grotesque', sans-serif;
    --tp-ff-Bricolage-bold: 'Bricolage Grotesque', sans-serif;
}

/* ================================
   TYPOGRAPHIE - BRICOLAGE GROTESQUE
   Hiérarchie graphique et subtile
================================ */

/* Base typographique */
body {
    font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    font-stretch: normal;
}
.mentions {
    margin-top: 200px;
    margin-bottom: 0;
}
.mentions p {
    color: #fff;
}
.mentions h1,
.mentions h2 {
    color: var(--comocomo-orange);
}

#preloader {
    background-color: var(--comocomo-blue);
}

#ball {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 50%;
    color: transparent;
    mix-blend-mode: difference;
    background-color: var(--comocomo-orange);
}

.orange {
    color: var(--comocomo-orange)!important;
}
.blue {
    color: var(--comocomo-blue)!important;
}
.bg-blue {
    background-color: var(--comocomo-blue)!important;
}
.texte-thin {
    font-weight: 300;
    font-family: var(--tp-ff-Bricolage-light);
}
.typo-uc {
    letter-spacing: -10px;
}

/* HERO TITLE - Impact maximum */
.tp-hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-stretch: normal;
    /*letter-spacing: -0.08em;*/
    line-height: 0.9;
    font-size: 125px !important; /* 220px - 20% */
    letter-spacing: -0.05em;
}


.tp-hero-area .tp-section-subtitle {
    font-size: 35px;
    letter-spacing: 1px;
}

/* Image/SVG dans le titre hero */
.tp-hero-video {
    width: 295px !important;
    height: 149px !important;
}

.tp-work-area .tp-service-number {
    padding-left: 0;
}
.tp-work-number i {
    font-style: normal;
}

/* "COMMENT" en condensed pour accent graphique */
.tp-hero-title .text-orange {
    font-stretch: condensed;
    letter-spacing: -0.03em;
}
.tp-hero-title .text-orange::after {
    content: none;
}

/* SECTION TITLES - Équilibre et lisibilité */
.tp-section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

/* SECTION SUBTITLES - Léger et espacé */
.tp-section-subtitle {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 14px;
}

/* BODY TEXT - Optimal pour la lecture */
body p,
.tp-about-text p,
.tp-service-content p,
.tp-work-content p,
.tp-testimonial-content p {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: -0.005em;
    line-height: 1.6;
}

/* About text - Taille de police augmentée */
.tp-about-text p {
    font-size: 40px;
}

/* MENU & NAVIGATION - Medium pour clarté */
.tp-header-menu ul li a,
.tp-footer-widget-menu ul li a {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-stretch: normal;
    letter-spacing: 0.01em;
}

/* BOUTONS - SemiBold pour impact */
.tp-btn-black-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: 0.02em;
}

/* SERVICE NUMBERS - Bold et graphique */
.tp-service-number span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-stretch: normal;
}

/* SERVICE CATEGORIES - Regular espacé */
.tp-service-category span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-stretch: normal;
    letter-spacing: 0.03em;
}

/* WORK PROCESS NUMBERS - ExtraBold pour emphase */
.tp-work-number i {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-stretch: semi-condensed;
}

/* WORK TITLES - Bold et structuré */
.tp-work-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-stretch: normal;
    letter-spacing: -0.01em;
}

/* TESTIMONIAL AUTHOR - SemiBold */
.tp-testimonial-author-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-stretch: normal;
}

/* FOOTER TITLES - Bold */
.tp-footer-widget-title,
.tp-footer-widget-title-sm {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-stretch: normal;
}

/* BANNER TITLE - SemiBold avec espacement */
.tp-banner-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: 0.05em;
}

/* COPYRIGHT - ExtraBold condensed pour signature */
.tp-copyright-big-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-stretch: semi-condensed;
    letter-spacing: -0.02em;
}

/* ================================
   COULEURS PRINCIPALES
================================ */

/* Background principal */
body {
    background-color: var(--comocomo-white);
}

/* Hero section - Background bleu */
.tp-hero-area {
    background-color: var(--comocomo-blue) !important;
    background-image: none !important;
}

.tp-hero-area .tp-hero-title {
    color: var(--comocomo-white);
}

.tp-hero-area .tp-hero-info p {
    color: var(--comocomo-white);
    opacity: 0.9;
}

.tp-hero-area .tp-hero-info svg path {
    stroke: var(--comocomo-orange);
}

/* ================================
   HEADER
================================ */

/* Logo et menu */
.tp-header-menu ul li a {
    color: var(--comocomo-dark);
}

.tp-header-menu ul li a:hover {
    color: var(--comocomo-orange);
}
.header-sticky.sticky-white-bg .tp-header-bar button i {
    background-color: var(--comocomo-blue);
}
/* CTA Button - Orange vif */

.tp-btn-black-text {
    color: var(--comocomo-white) !important;
}

.tp-btn-black-circle svg path {
    stroke: var(--comocomo-white) !important;
}

/* ================================
   SECTIONS
================================ */

/* Section subtitles - Orange */
.tp-section-subtitle {
    color: var(--comocomo-orange) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Section titles */
.tp-section-title {
    color: var(--comocomo-dark);
}

/* Banner area */
.tp-banner-area {
    background-color: var(--comocomo-blue);
    padding: 30px 0;
}

.tp-banner-title {
    color: var(--comocomo-white) !important;
    font-weight: 500;
}

/* ================================
   SERVICES
================================ */

.tp-service-area {
    background-color: #F8F9FA;
    padding-bottom: 145px;
    padding-top: 120px;
}

.tp-service-number span {
    color: var(--comocomo-orange);
    font-weight: 700;
}

.tp-service-title a {
    color: var(--comocomo-dark);
}

.tp-service-title a:hover {
    color: var(--comocomo-blue);
}

.tp-service-category span {
    background-color: rgba(0, 51, 255, 0.1);
    color: var(--comocomo-blue);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px;
    font-size: 14px;
    font-weight: 500;
}

/* Gradient bleu pour les titres des services */
.tp_text_invert > div {
    background-image: linear-gradient(to right, var(--comocomo-blue) 50%, rgba(0, 51, 255, 0.3) 50%) !important;
}

/* Icônes SVG des services */
.tp-service-icon {
    width: 100%;
    max-width: 350px;
    height: auto;
    padding: 20px;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.tp-service-icon:hover {
    transform: scale(1.08);
    opacity: 0.85;
}

/* ================================
   ABOUT SECTION
================================ */

.tp-about-funcact-item span {
    color: var(--comocomo-blue);
}

.tp-about-funcact-item p {
    color: var(--comocomo-dark);
}

/* ================================
   WORK PROCESS
================================ */

.tp-work-number i {
    color: var(--comocomo-orange);
    font-weight: 700;
}

.tp-work-number span {
    background-color: var(--comocomo-blue);
}

.tp-work-title {
    color: var(--comocomo-dark);
    font-weight: 700;
}

/* ================================
   TEAM
================================ */

.studio-team-job {
    position: absolute;
    top: 50px;
    width: 100%;
}
.studio-team-job h4 {
    color: #fff;
    font-size: 22px;
    font-family: 'Bricolage Grotesque', sans-serif;
    text-transform: none;
}
.studio-team-content {
    bottom: 50px;
}

.tp-team-item {
    overflow: hidden;
}
.tp-team-item-thumb {
    transition: all 0.3s ease;
    border-radius: 20px;
}
.tp-team-item-thumb:hover {
    transition: all 0.3s ease;
    border-radius: 20px;
}
.tp-team-item-thumb:hover img {
    border-radius: 20px;
}
.tp-team-item-thumb:hover::after {
    opacity: 1;
    visibility: visible;
    border-radius: 20px;
}


.tp-team-item-thumb::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 155%;
    height: 155%;
    background: linear-gradient(
    0deg, 
    transparent, 
    transparent 0%, 
    rgba(252,86,35,1)
    );
    transform: rotate(-45deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.tp-team-item-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(252,86,35,1);
}

.tp-team-item-thumb:hover::after {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/* ================================
   TESTIMONIALS
================================ */

.tp-testimonial-area {
    background-color: var(--comocomo-white);
}

.tp-testimonial-item {
    background-color: #F8F9FA;
    padding: 40px;
    border-radius: 12px;
    border-left: 4px solid var(--comocomo-orange);
    transition: all 0.3s ease;
}

.tp-testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 51, 255, 0.1);
    border-left-color: var(--comocomo-blue);
}

.tp-testimonial-author-name {
    color: var(--comocomo-dark);
    font-weight: 700;
}

.tp-testimonial-author-info span {
    color: var(--comocomo-orange);
    font-size: 14px;
}

/* ================================
   FOOTER
================================ */

.tp-footer-area {
    background-color: var(--comocomo-blue);
}

.tp-footer-widget-title {
    color: var(--comocomo-white);
}

.tp-footer-widget p {
    color: rgba(255, 255, 255, 0.7);
}

.tp-footer-widget-info a {
    color: var(--comocomo-white);
    font-weight: 500;
}

.tp-footer-widget-info a:hover {
    color: var(--comocomo-orange);
}

.tp-copyright-area {
    background-color: var(--comocomo-orange);
}

.tp-copyright-big-text {
    color: #ffffff;
}

.tp-copyright-left span,
.tp-copyright-right a {
    color: rgba(255, 255, 255, 0.5);
}

.tp-copyright-right a:hover {
    color: var(--comocomo-white);
}

#contact {
    background: var(--comocomo-blue);
}

#contact .tp-section-title {
    color: #ffffff;
}

.tp-contact-form-input label {
    color: #ffffff;
}

.tp-copyright-bottom {
    margin-top: 0;
    padding-bottom: 20px;
}
.tp-footer-widget-info p {
    color: rgba(255, 255, 255, 1);
}
.ajax-response {
    color: #ffffff;
    font-weight: bold;
    margin-top: 15px;
}

/* ================================
   ACCENTS ET ANIMATIONS
================================ */

/* Liens généraux */
a {
    transition: all 0.3s ease;
}

/* Boutons hover */
.tp-btn-black:hover .tp-btn-black-circle {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Scroll animations */
.tp_fade_anim {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ================================
   RESPONSIVE
================================ */

/* Réduction -20% des tailles du titre hero */
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-hero-title {
        font-size: 144px !important; /* 180px - 20% */
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-title {
        font-size: 128px !important; /* 160px - 20% */
    }

    .tp-hero-video {
        width: 250px !important;
        height: 126px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-title {
        font-size: 96px !important; /* 120px - 20% */
    }

    .tp-hero-video {
        width: 220px !important;
        height: 111px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-title {
        font-size: 112px !important; /* 140px - 20% */
    }

    .tp-hero-video {
        width: 200px !important;
        height: 101px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-title {
        font-size: 92px !important; /* 115px - 20% */
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-title {
        font-size: 52px !important; /* 65px - 20% */
    }
}

@media (max-width: 575px) {
}

@media (max-width: 767px) {
    .tp-hero-title {
        font-size: 67px !important; /* 50px - 20% */
    }
    .tp-service-category span {
        font-size: 12px;
        padding: 6px 12px;
    }

    .tp-testimonial-item {
        padding: 30px 20px;
    }
    .typo-uc {
        letter-spacing: -5px;
    }
    .tp-hero-area .tp-section-subtitle {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .tp-about-text p {
        font-size: 22px;
    }
    .tp-about-funcact-item {
        text-align: center;
    }
    .tp-team-bg {
        padding-top: 60px;
        padding-bottom: 60px;
        border-radius: 50px 50px 0 0;
    }
    .tp-work-area {
        padding-top: 60px;
        padding-bottom: 0;
    }
    .tp-service-area {
        padding-bottom: 60px;
        padding-top: 60px;
    }

}

/* ================================
   UTILITIES
================================ */

/* Text accent orange */
.text-orange {
    color: var(--comocomo-orange) !important;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

/* Effet subtil sous le "comment" */
.tp-hero-title .text-orange {
    text-transform: uppercase;
}

/* Text accent blue */
.text-blue {
    color: var(--comocomo-blue) !important;
}

/* ================================
   HERO AREA - WEBGL
================================ */

.tp-hero-area {
    position: relative;
    overflow: hidden;
}

/* Canvas WebGL pour effet de distorsion */
.tp-hero-area.tp-image-distortion canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Assurer que le contenu reste au-dessus du canvas */
.tp-hero-area .container {
    position: relative;
    z-index: 2;
}

/* ================================
   FIOU-FIOU ANIMÉ DANS SECTION ABOUT
================================ */

/* Style du Fiou-fiou */
.tp-about-shape-1 #fiou-fiou-animated {
    width: 200px; /* Taille ajustée */
    height: auto;
    opacity: 1; /* Opacité complète */
}