/* Styles personnalisés pour Joulenvrac - L'énergie intacte ! */

/* ============================================
   POLICES DE CARACTÈRES - CHARTE GRAPHIQUE
   ============================================ */

/* ALFARN 2 - Pour titres et sous-titres */
/* NOTE: ALFARN 2 n'est pas disponible sur Google Fonts.
   Vous devez télécharger les fichiers de police depuis Adobe Fonts (https://fonts.adobe.com/fonts/alfarn)
   et les placer dans un dossier /fonts/ puis décommenter les lignes ci-dessous.
   
   Exemple de structure :
   @font-face {
       font-family: 'Alfarn 2';
       src: url('fonts/Alfarn2-Regular.woff2') format('woff2'),
            url('fonts/Alfarn2-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }
*/

/* ...existing code... */
/* Intégration des polices locales (dossier ./fonts) */
@font-face {
    font-family: 'Alfarn 2';
    src: url("./fonts/Alfarn%20W05%20Regular.woff2") format("woff2"),
         url("./fonts/Alfarn W05 Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url("./fonts/Comfortaa-Regular.woff2") format("woff2"),
         url("./fonts/Comfortaa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Comfortaa';
    src: url("./fonts/Comfortaa-Bold.woff2") format("woff2"),
         url("./fonts/Comfortaa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Eina : plusieurs variantes disponibles dans le dossier fonts */
@font-face {
    font-family: 'Eina';
    src: url("./fonts/Eina03-Regular%202.woff2") format("woff2"),
         url("./fonts/Eina03-Regular 2.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina';
    src: url("./fonts/Eina03-SemiBold.woff2") format("woff2"),
         url("./fonts/Eina02-SemiBold.woff2") format("woff2"),
         url("./fonts/Eina03-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina';
    src: url("./fonts/Eina03-Bold.woff2") format("woff2"),
         url("./fonts/Eina03-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Classes utilitaires utilisées dans index.html */
.font-eina-body { font-family: 'Eina', 'Comfortaa', sans-serif; }
.font-alfarn-title { font-family: 'Alfarn 2', 'Eina', sans-serif; }
.font-alfarn-subtitle { font-family: 'Alfarn 2', 'Eina', sans-serif; }
.font-comfortaa-body { font-family: 'Comfortaa', 'Eina', sans-serif; }
.font-comfortaa-supertitle-light { font-family: 'Comfortaa', 'Eina', sans-serif; font-weight: 300; }

/* ...existing code... */

/* Titres avec ALFARN 2 */
.font-alfarn-title {
    font-family: 'Alfarn 2', sans-serif;
    /* letter-spacing: 0.6em;  60pt équivalent en interlettrage */
    text-transform: lowercase;
}

.font-alfarn-title::first-letter {
    text-transform: uppercase;
}

/* Sous-titres avec ALFARN 2 */
.font-alfarn-subtitle {
    font-family: 'Alfarn 2', sans-serif;
    /* letter-spacing: 0.6em;  60pt équivalent en interlettrage */
    text-transform: lowercase;
}

.font-alfarn-subtitle::first-letter {
    text-transform: uppercase;
}

/* COMFORTAA - Pour courts titres, citations, sur-titres et corps de texte */
/* Sur-titres avec COMFORTAA */
.font-comfortaa-supertitle {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400; /* Regular */
    /* letter-spacing: 0.35em;  35pt équivalent en interlettrage */
    text-transform: uppercase;
}

.font-comfortaa-supertitle-bold {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700; /* Bold */
    /* letter-spacing: 0.35em;  35pt équivalent en interlettrage */
    text-transform: uppercase;
}

.font-comfortaa-supertitle-light {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 300; /* Light */
    /* letter-spacing: 0.35em;  35pt équivalent en interlettrage */
    text-transform: uppercase;
}

/* Corps de texte avec COMFORTAA */
.font-comfortaa-body {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400; /* Regular */
    /* letter-spacing: 0.35em;  35pt équivalent en interlettrage */
    text-transform: lowercase;
}

.font-comfortaa-body::first-letter {
    text-transform: uppercase;
}

.font-comfortaa-body-light {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 300; /* Light */
    /* letter-spacing: 0.35em;  35pt équivalent en interlettrage */
    text-transform: lowercase;
}

.font-comfortaa-body-light::first-letter {
    text-transform: uppercase;
}

/* EINA - Pour sur-titres et corps de texte */
/* NOTE: Eina n'est pas disponible sur Google Fonts.
   Vous devez télécharger les fichiers de police depuis Extratype (https://extratype.com)
   et les placer dans un dossier /fonts/ puis décommenter les lignes ci-dessous.
   
   Exemple de structure :
   @font-face {
       font-family: 'Eina';
       src: url('fonts/Eina-Light.woff2') format('woff2'),
            url('fonts/Eina-Light.woff') format('woff');
       font-weight: 300;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
       font-family: 'Eina';
       src: url('fonts/Eina-Regular.woff2') format('woff2'),
            url('fonts/Eina-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
       font-family: 'Eina';
       src: url('fonts/Eina-SemiBold.woff2') format('woff2'),
            url('fonts/Eina-SemiBold.woff') format('woff');
       font-weight: 600;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
       font-family: 'Eina';
       src: url('fonts/Eina-Bold.woff2') format('woff2'),
            url('fonts/Eina-Bold.woff') format('woff');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }
*/
/* Sur-titres avec EINA */
.font-eina-supertitle {
    font-family: 'Eina', sans-serif;
    font-weight: 400; /* Regular */
    letter-spacing: 0;  /* 0pt - pas d'interlettrage */
    text-transform: lowercase;
}

.font-eina-supertitle::first-letter {
    text-transform: uppercase;
}

.font-eina-supertitle-light {
    font-family: 'Eina', sans-serif;
    font-weight: 300; /* Light */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-supertitle-light::first-letter {
    text-transform: uppercase;
}

.font-eina-supertitle-semibold {
    font-family: 'Eina', sans-serif;
    font-weight: 600; /* SemiBold */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-supertitle-semibold::first-letter {
    text-transform: uppercase;
}

.font-eina-supertitle-bold {
    font-family: 'Eina', sans-serif;
    font-weight: 700; /* Bold */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-supertitle-bold::first-letter {
    text-transform: uppercase;
}

/* Corps de texte avec EINA */
.font-eina-body {
    font-family: 'Eina', sans-serif;
    font-weight: 400; /* Regular */
    letter-spacing: 0; /* 0pt - pas d'interlettrage */
    text-transform: lowercase;
}

.font-eina-body::first-letter {
    text-transform: uppercase;
}

.font-eina-body-light {
    font-family: 'Eina', sans-serif;
    font-weight: 300; /* Light */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-body-light::first-letter {
    text-transform: uppercase;
}

.font-eina-body-semibold {
    font-family: 'Eina', sans-serif;
    font-weight: 600; /* SemiBold */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-body-semibold::first-letter {
    text-transform: uppercase;
}

.font-eina-body-bold {
    font-family: 'Eina', sans-serif;
    font-weight: 700; /* Bold */
    letter-spacing: 0;
    text-transform: lowercase;
}

.font-eina-body-bold::first-letter {
    text-transform: uppercase;
}

/* ============================================
   COULEURS DE LA CHARTE GRAPHIQUE
   ============================================ */
:root {
    --joulen-blue: #0f74bb;
    --joulen-green: #cfd72c;
    --joulen-orange: #ef7a23;
    --joulen-yellow: #f8ae0b;
}

/* Smooth scroll pour la navigation */
html {
    scroll-behavior: smooth;
}

/* Animation personnalisée pour le scroll indicator */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-10px) translateX(-50%);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* Style pour le header sticky avec effet de transparence au scroll */
header.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

/* Amélioration de l'accessibilité pour les focus */
*:focus-visible {
    outline: 2px solid var(--joulen-green);
    outline-offset: 2px;
}

/* Transition douce pour les liens */
a {
    transition: color 0.3s ease;
}

/* Style pour les boutons avec effet de scale au hover */
button, .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover, .btn:hover {
    transform: translateY(-2px);
}

button:active, .btn:active {
    transform: translateY(0);
}

/* Animation pour les cartes de services */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Style personnalisé pour le formulaire */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(207, 215, 44, 0.1);
}

/* Styles pour l'accordéon FAQ */
.faq-item {
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer.hidden {
    max-height: 0 !important;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}