/*
Theme Name: Inside Web
Description: `Inside Web` 2025 - thème
Version: 2.0.0
Author: Inside Web
Author URI: https://www.insideweb.be
*/

/* Import Montserrat font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --white: #ffffff;
    --black: #000000;
    --primary: #FF7700;
    --secondary: ;
    --dark-gray: #282828;
    --medium-gray: #454545;
    --green: #03A53C;
    --orange: #F70;
    --orange-2: #FFA51F;
    --primary-hover: #ff9933;
    --gradient-1: linear-gradient(263deg, var(--orange-2, #FFA51F) 0.27%, var(--orange, #F70) 100.44%);

    --primary-background: #FFF;
    --secondary-background: #F7F7F7;
    --header-background: #454545;
    --footer-background: #454545;

    /* Status Colors */
    --error: #FF6363;
    --warning: #FFAF57;
    --success: #36D2A1;
    --info: #62C5DA;

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-medium: rgba(0, 0, 0, 0.30);

    /* Box-shadows */
    --box-shadow-1: 0px 1px 2px var(--shadow-light);
    --box-shadow-2: 0px 2px 6px 2px var(--shadow-medium);
    --box-shadow-3: 0px 1px 3px var(--shadow-medium);
    --box-shadow-4: 0px 2px 3px var(--shadow-medium);
    --box-shadow-5: 0px 4px 4px var(--shadow-medium);

    --marquee-width: 100%;
    --marquee-height: 250px;
    --marquee-elements-displayed: 6;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-elements: 10;
    --marquee-animation-duration: calc(var(--marquee-elements) * 5s);

    --utils: #FF7700;
}

/* ============================================
   BASE
   ============================================ */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark-gray);
    margin: 0;
    padding: 0;
    padding-top: 8px;
    overflow-y: scroll;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-template-front-page body,
.home body {
    padding-top: 0;
}

main {
    position: relative;
}

.page-template-front-page main,
.home main {
    padding-top: 0;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.title_hero1 {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.title_hero2 {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
}

.texte_hero1 {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 400;
    line-height: 1.6;
}

.title1 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
}

.title2 {
    /* À définir */
}

.title3 {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    line-height: 1.4;
}

.title4 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    line-height: 1.4;
}

.title5 {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    line-height: 1.5;
}

.text1 {
    color: var(--dark-gray);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    line-height: 28px;
}

.text1-center {
    color: var(--dark-gray);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.text2 {
    color: var(--medium-gray);
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 400;
    line-height: 1.6;
}

.text3 {
    color: var(--dark-gray);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 300;
    line-height: normal;
}

/* ============================================
   CUSTOM SPACING — EXTENSIONS BOOTSTRAP
   ============================================ */

/* py-6 = 6rem */
.py-6     { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.pt-6     { padding-top: 6rem !important; }
.pb-6     { padding-bottom: 6rem !important; }

@media (min-width: 576px) {
    .py-sm-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .pt-sm-6 { padding-top: 6rem !important; }
    .pb-sm-6 { padding-bottom: 6rem !important; }
}

@media (min-width: 768px) {
    .py-md-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .pt-md-6 { padding-top: 6rem !important; }
    .pb-md-6 { padding-bottom: 6rem !important; }
}

@media (min-width: 992px) {
    .py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .pt-lg-6 { padding-top: 6rem !important; }
    .pb-lg-6 { padding-bottom: 6rem !important; }
}

@media (min-width: 1200px) {
    .py-xl-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .pt-xl-6 { padding-top: 6rem !important; }
    .pb-xl-6 { padding-bottom: 6rem !important; }
}

/* Utilitaires custom non couverts par Bootstrap */
.mb-10  { margin-bottom: 0.625rem !important; }
.pt-60  { padding-top: 3.75rem !important; }
.pb-60  { padding-bottom: 3.75rem !important; }
.pt-40  { padding-top: 2.5rem !important; }
.pb-40  { padding-bottom: 2.5rem !important; }

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary-link {
    padding: 0;
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    border: none;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary-link:hover {
    text-decoration: underline;
}

.btn-primary-link svg {
    transition: transform 0.3s ease;
}

.btn-primary-link:hover svg {
    transform: translateX(4px);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 32px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 32px;
    border: 1px solid var(--white);
    background: transparent;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--white);
}

.btn-overlay {
    background: var(--primary);
    color: var(--white);
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    border: none;
    outline: none;
}

.btn-overlay:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-overlay:focus,
.btn-overlay:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */
.section-bg-white { background: var(--primary-background); }
.section-bg-gray  { background: var(--secondary-background); }

/* ============================================
   DIVIDER
   ============================================ */
.section-divider {
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 0;
    padding: 0;
}

/* ============================================
   CARD HOVER (composant générique)
   ============================================ */
.card-hover {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-hover:hover .card-image img {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(40, 40, 40, 0.95);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-hover:hover .card-overlay {
    opacity: 1;
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.text-white       { color: var(--white) !important; }
.text-dark-gray   { color: var(--dark-gray); }
.text-medium-gray { color: var(--medium-gray); }
.text-primary     { color: var(--primary) !important; }
.text-secondary   { color: var(--secondary); }
.text-green       { color: var(--green); }
.text-orange      { color: var(--orange); }

/* ============================================
   GRID EXTENSIONS
   ============================================ */

/* Forcer les cards sur une seule ligne en lg+ */
@media (min-width: 992px) {
    .flex-nowrap-lg { flex-wrap: nowrap !important; }

    /* Classe custom pour 5 cards (20% chacune) */
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ============================================
   FADE-IN ANIMATIONS
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.fade-in-left {
    transform: translateX(-30px);
}

.fade-in.fade-in-right {
    transform: translateX(30px);
}

.fade-in.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Délai en cascade pour les enfants (steps, cards, etc.) */
.fade-in-group > .fade-in:nth-child(1) { transition-delay: 0s; }
.fade-in-group > .fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in-group > .fade-in:nth-child(3) { transition-delay: 0.15s; }
.fade-in-group > .fade-in:nth-child(4) { transition-delay: 0.2s; }
.fade-in-group > .fade-in:nth-child(5) { transition-delay: 0.25s; }
.fade-in-group > .fade-in:nth-child(6) { transition-delay: 0.3s; }
.fade-in-group > .fade-in:nth-child(7) { transition-delay: 0.35s; }
.fade-in-group > .fade-in:nth-child(8) { transition-delay: 0.4s; }

/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}