/*
Theme Name: Custom Theme
Description: Thème sur mesure avec GSAP et animations fluides
Author: JR Web Concept
Version: 1.0.0
License: GPL v2 or later
Text Domain: custom-theme
*/

/* ====================================
   🌐 IMPORT GOOGLE FONTS
   ==================================== */
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans: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&family=Manrope:wght@200..800&family=Inter:wght@100..900&display=swap');

/* ====================================
   🎨 VARIABLES CSS GLOBALES
   ==================================== */
:root {
    /* COULEURS */
    --primary: #0275D9;
    --dark: #0F1829;
    --coral: #FF7979;
    --white: #FFFFFF;
    --yellow: #FFC365;
    --orange: #F8AD38;

    /* COULEURS DÉRIVÉES */
    --primary-light: #3498db;
    --primary-dark: #01569b;
    --gray-light: #f8f9fa;
    --gray-medium: #6c757d;
    --gray-dark: #495057;

    /* TYPOGRAPHIES */
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Manrope', sans-serif;
    --font-buttons: 'Alumni Sans', sans-serif;
    --font-inter: 'Inter', sans-serif;

    /* TAILLES EN PIXELS - 1920px */
    --h1-size: 90px;
    --h1-line-height: 100px;

    --h2-size: 45px;
    --h2-line-height: 65px;

    --h3-size: 25px;
    --h3-line-height: 35px;

    --h4-size: 25px;

    --p-size: 20px;
    --p-line-height: 30px;

    --twenty-size: 20px;

    --btn-size: 50px;
    --btn-line-height: 42px;

    --header-menu-size: 35px;

    --mini-size: 14px;
    --alt-text: 40px;

    /* ESPACEMENTS */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-xxl: 6rem;

    /* CONTAINER */
    --container-max: 2000px;
    --container-padding: clamp(8em, 4vw, 2rem);

    /* BORDURES & OMBRES */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 20px;

    --shadow-sm: 0 2px 4px rgba(15, 24, 41, 0.1);
    --shadow-md: 0 4px 8px rgba(15, 24, 41, 0.15);
    --shadow-lg: 0 8px 16px rgba(15, 24, 41, 0.2);
    --shadow-xl: 0 12px 24px rgba(15, 24, 41, 0.25);

    /* TRANSITIONS */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.4s ease;
}

/* ====================================
   📄 RESET & BASE
   ==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    color: var(--dark);
    background-color: var(--white);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 100vw;
    margin: auto;
    overflow-x: hidden;
}

/* Retirer les marges sur les pages Elementor */
body.elementor-page {
    padding: 0 !important;
}

/* ====================================
   📤 TYPOGRAPHIES GLOBALES
   ==================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--dark);
}

h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    font-weight: 800;
}

h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    font-weight: 800;
}

h3 {
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: 700;
}

h4 {
    font-size: var(--h4-size);
    font-weight: 600;
    line-height: 1.4;
}

p {
    font-size: var(--p-size);
    line-height: var(--p-line-height);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ====================================
   🗃️ LAYOUT GLOBAL
   ==================================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

/* ====================================
   🎨 CLASSES UTILITAIRES COULEURS
   ==================================== */
.text-primary { color: var(--primary) !important; }
.text-dark { color: var(--dark) !important; }
.text-coral { color: var(--coral) !important; }
.text-white { color: var(--white) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-orange { color: var(--orange) !important; }
.text-gray { color: var(--gray-medium) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-coral { background-color: var(--coral) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-orange { background-color: var(--orange) !important; }
.bg-light { background-color: var(--gray-light) !important; }

/* ====================================
   📏 CLASSES UTILITAIRES ESPACEMENTS
   ==================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.py-sm { padding: var(--space-sm) 0 !important; }
.py-md { padding: var(--space-md) 0 !important; }
.py-lg { padding: var(--space-lg) 0 !important; }
.py-xl { padding: var(--space-xl) 0 !important; }
.py-xxl { padding: var(--space-xxl) 0 !important; }

.px-sm { padding: 0 var(--space-sm) !important; }
.px-md { padding: 0 var(--space-md) !important; }
.px-lg { padding: 0 var(--space-lg) !important; }

/* ====================================
   🎯 BOUTONS GLOBAUX
   ==================================== */
.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-buttons);
    font-size: var(--btn-size);
    line-height: var(--btn-line-height);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====================================
   🎯 BOUTON AVEC FLÈCHE SVG - CLASSE COMMUNE
   EXACTEMENT LE MÊME EFFET QUE LE HERO
   ==================================== */
.btn-arrow {
    /* Reset complet */
    all: unset;

    /* Affichage */
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 12px;
    position: relative;

    /* Typographie avec taille bouton */
    font-family: var(--font-buttons);
    font-size: var(--btn-size);
    line-height: var(--btn-line-height);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Couleur état normal : coral */
    color: var(--coral) !important;

    /* Pas de styles parasites */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;

    /* Comportement */
    cursor: pointer;
    pointer-events: auto;

    /* Transitions pour animations */
    transition: color 0.4s ease;
    animation: none;
    transform: none;
}

/* Pseudo-élément pour la flèche SVG - état initial HORIZONTAL DROITE */
.btn-arrow::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
    top: -2px;

    /* SVG de la flèche en coral - état initial */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.086' height='20.751' viewBox='0 0 20.086 20.751'%3E%3Cg transform='translate(15603.711 17184.551)'%3E%3Cpath d='M0,0,6.306,6.306,0,12.611' transform='translate(-15599.251 -17177.842) rotate(-45)' fill='none' stroke='%23FF7979' stroke-miterlimit='10' stroke-width='3'/%3E%3Cline x1='12.168' y2='12.857' transform='translate(-15602.621 -17177.688)' fill='none' stroke='%23FF7979' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Rotation initiale : HORIZONTAL DROITE (0deg) */
    transform: rotate(0deg);
    transform-origin: center;

    /* Transition */
    transition: all 0.4s ease;
}

/* ANIMATION HOVER : coral → primary + flèche diagonal + changement couleur SVG */
.btn-arrow:hover {
    /* Changement de couleur du texte */
    color: var(--primary);

    /* PAS de changement de letter-spacing */
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
}

/* Animation de la flèche au hover : rotation + changement couleur SVG */
.btn-arrow:hover::after {
    /* Rotation vers DIAGONAL HAUT-DROITE (45deg) */
    transform: rotate(45deg);

    /* SVG de la flèche en primary (bleu) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.086' height='20.751' viewBox='0 0 20.086 20.751'%3E%3Cg transform='translate(15603.711 17184.551)'%3E%3Cpath d='M0,0,6.306,6.306,0,12.611' transform='translate(-15599.251 -17177.842) rotate(-45)' fill='none' stroke='%230275D9' stroke-miterlimit='10' stroke-width='3'/%3E%3Cline x1='12.168' y2='12.857' transform='translate(-15602.621 -17177.688)' fill='none' stroke='%230275D9' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Focus pour accessibilité */
.btn-arrow:focus {
    outline: 1px dotted var(--coral);
    outline-offset: 2px;
}

/* Active state */
.btn-arrow:active {
    color: var(--primary-dark);
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--white);
}

.btn-coral {
    background: var(--coral);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-coral:hover {
    background: #e74c3c;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--white);
}

.btn-orange {
    background: var(--orange);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-orange:hover {
    background: #e67e22;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
}

.btn-sm {
    padding: 10px 24px;
    font-size: calc(var(--btn-size) * 0.9);
}

.btn-lg {
    padding: 18px 40px;
    font-size: calc(var(--btn-size) * 1.1);
}

/* ====================================
   🎭 ANIMATIONS & UTILITAIRES
   ==================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-slow);
}

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

.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
}

/* ====================================
   📱 RESPONSIVE GLOBAL
   ==================================== */

/* 1440px - Breakpoint intermédiaire (Laptop 13/15 pouces) */
@media (max-width: 1600px) {
    :root {
        --container-max: 1180px;
        --container-padding: clamp(5em, 3.5vw, 1.8rem);

        --h1-size: 60px;
        --h1-line-height: 66px;

        --h2-size: 37px;
        --h2-line-height: 47px;

        --h3-size: 22px;
        --h3-line-height: 30px;

        --h4-size: 22px;

        --p-size: 16px;
        --p-line-height: 24px;

        --twenty-size: 16px;

        --btn-size: 30px;
        --btn-line-height: 36px;

        --header-menu-size: 24px;
    }

    body {
        margin: auto;
    }
}

/* 1280px - Breakpoint petit écran */
@media (max-width: 1300px) {
    :root {
        --container-padding: clamp(3em, 3vw, 1.6rem);

        --h1-size: 55px;
        --h1-line-height: 61px;

        --h2-size: 36px;
        --h2-line-height: 43px;

        --h3-size: 20px;
        --h3-line-height: 28px;

        --h4-size: 20px;

        --p-size: 16px;
        --p-line-height: 24px;

        --twenty-size: 16px;

        --btn-size: 28px;
        --btn-line-height: 34px;

        --header-menu-size: 20px;
    }

    body {
        margin: auto;
    }
}

/* Tablettes */
@media (max-width: 1024px) {
    :root {
        --container-padding: clamp(20px, 2.5vw, 1.4rem);

        --h1-size: 48px;
        --h1-line-height: 53px;

        --h2-size: 32px;
        --h2-line-height: 38px;

        --h3-size: 20px;
        --h3-line-height: 28px;

        --h4-size: 20px;

        --p-size: 16px;
        --p-line-height: 26px;

        --btn-size: 26px;
        --btn-line-height: 31px;
    }

    body {
        margin: auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --container-padding: clamp(20px, 2vw, 1.2rem);

        --h1-size: 40px;
        --h1-line-height: 44px;

        --h2-size: 32px;
        --h2-line-height: 38px;

        --h3-size: 20px;
        --h3-line-height: 28px;

        --h4-size: 20px;

        --p-size: 16px;
        --p-line-height: 26px;

        --btn-size: 30px;
        --btn-line-height: 36px;
    }

    .container {
        padding: 0 var(--container-padding);
    }

    .row {
        flex-direction: column;
    }

    .btn {
        padding: 12px 24px;
        width: 100%;
        max-width: 280px;
    }

    .btn-arrow {
        font-size: 16px;
    }
}

/* Petit mobile */
@media (max-width: 480px) {
    :root {
        --container-padding: clamp(25px, 1.5vw, 1rem);

        --h1-size: 37px;
        --h1-line-height: 43px;

        --h2-size: 28px;
        --h2-line-height: 34px;

        --h3-size: 20px;
        --h3-line-height: 25px;

        --h4-size: 20px;

        --p-size: 16px;
        --p-line-height: 21px;

        --btn-size: 28px;
        --btn-line-height: 34px;
    }

    .container {
        padding: 0 var(--container-padding);
    }

    .btn-arrow {
        font-size: 28px;
    }
}

/* ====================================
   🎨 SCROLLBAR
   ==================================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ====================================
   ELEMENTOR
   ==================================== */

@media (max-width: 768px) {
    .elementor-516 .elementor-element.elementor-element-d2addbd .elementor-heading-title {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 40px;
        line-height: 46px;
        font-weight: 800;
        letter-spacing: 0;
        word-spacing: -0.1em;
        height: auto;
        transform: rotate(180deg);
    }
}

@media (min-width: 2000px) {
    .elementor-516 .elementor-element.elementor-element-4a56c4b .e-con-inner {
        margin: 0em 0 0 10em;
    }
}

.elementor-516 .elementor-element.elementor-element-d2addbd .elementor-heading-title {
    font-size: var(--h1-size) !important;
    line-height: var(--h1-line-height) !important;
}

.elementor-266 .elementor-element.elementor-element-e1bc0d9 .elementor-heading-title
{
    font-size: var(--h2-size) !important;
    line-height: var(--h2-line-height) !important;
}