/* ============================================================
   PROJECT: JEFHIP DIGITAL HTML - CSS ELITE 2026
   REFINEMENT: UNIQUE MESSAGE ANNOUNCEMENT & BRANDING GAUCHE
   ============================================================ */

   /* --- CONTAINER DES FEATURES --- */
.product-card__content3 {
    padding: 20px;
    background: #ffffff;
    border-radius: 0 0 15px 15px;
    margin-top: -40px;
}


   /* --- CONTAINER DES FEATURES --- */
.product-card__content {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 0 0 15px 15px;
    margin-top: -40px;
}

.product-features3 {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: center; /* Alignement propre pour la lecture */
}

/* --- STYLE DES LIGNES (LI) --- */
.product-features3 li {
    font-size: 0.95rem;
    align-content: center;
    justify-content: center;
    color: #333;
    padding-left: 50px;
    border-radius: 4px;
    padding: 30px 0px 30px 0px; /* Espace pour la puce */
    border-bottom: 2px solid rgba(0, 0, 0, 0.014);
    position: relative;
    transition: all 0.3s ease;
}

/* On retire la bordure sur le dernier élément */
.product-features3 li:last-child {
    border-bottom: none;
}

/* --- PUCE PERSONNALISÉE (DOT ORANGE) --- */
.product-features3 li::before {
    content: '→'; /* Flèche type "Engine" ou utilise un point • */
    position: absolute;
    left: 0;
    color: #c00809; /* Ton orange JEFHIP */
    font-weight: bold;
    font-size: 1.1rem;
}

/* --- STYLE DU TEXTE EN GRAS --- */
.product-features3 li strong {
    color: #c00809;
    font-weight: 700;
    display: inline-block;
    margin-right: 0px;
}


/* --- STYLE DU TEXTE EN GRAS --- */
.product-features3 li strong:hover {
    color: #1a1c1e;
    font-weight: 700;
    display: inline-block;
    margin-right: 0px;
}

/* --- EFFET HOVER SUR LA LIGNE --- */
.product-features3 li:hover {
    padding-left: 0px; /* Petit décalage interactif */
    background: rgba(155, 148, 148, 0.078);
    color: #000;
}

:root {
    /* Identité visuelle */
    --noir-pur: #000000;
    --blanc: #ffffff;
    --rouge-promo: #ff0000;
    --vert-status: #2ecc71;
    --gris-fond: #f9f9f9;
    --gris-bordure: #eeeeee;

    /* 1. Or Impérial (Gold) - Idéal pour BNITA DIAMOND ou Pack Ultime */
    --gold-solid: #d4af37;
    --gold-gradient: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);

    --gold-gradient99: linear-gradient(135deg, #bf953f, #f56a31, #f56a31, #fbf5b7, #aa771c);

    /* 3. Verre Dépoli (Glassmorphism) - Pour des cartes modernes */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Couleurs Réseaux Sociaux */
    --color-fb: #1877F2;
    --color-x: #ffffff;
    --color-dc: #5865F2;
    --color-ig: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    
    /* Structure & Animation */
    --header-h: 200px;
    --announcement-h: 40px;
    --transition-pro: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

/* --- FONDATION --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Arimo', sans-serif;
    background-color: #f9f9f9;
    color: var(--noir-pur);
    line-height: 1.6;
    padding-top: calc(var(--header-h) + var(--announcement-h));
    -webkit-font-smoothing: antialiased;
}

/* --- 1. ANNOUNCEMENT BAR (UNIQUE MESSAGE SWIPE) --- */
.announcement-bar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: var(--announcement-h);
    background: #c00809;
    color: var(--blanc);
    z-index: 1001;
    overflow: hidden;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* Cache la barre via JS (10% scroll) */
.hide-announcement { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.announcement-slider {
    display: flex;
    margin-top: -10px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    /* 4 messages * 4 secondes = 16s */
    animation: announcementSwipe1by1 16s infinite ease-in-out;
}

.announcement-item {
    min-height: var(--announcement-h);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 600;
    color: #fff;
    font-family: inter, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    
    /* Position relative nécessaire pour la barre en bas */
    position: relative;
    overflow: hidden; 
}

/* --- La barre de chargement "Loading Push" --- */
.announcement-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 42px; /* Épaisseur de ta bordure solide */
    width: 100%;
    
    /* Dégradé avec un point de lumière (eclairer) au centre */
    
    /* Effet brillant/néon */
    box-shadow: 0 0 14px rgba(255, 255, 255, 0);
    
    /* Animation de push infinie */
    animation: loadingPush s linear infinite;
}

/* --- Animation du mouvement --- */
@keyframes loadingPush {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Optionnel : Assombrir légèrement au survol comme demandé précédemment */
.announcement-item:hover {
    filter: brightness(0.9);
}

/* --- EFFET AU SURVOL (HOVER) --- */
.announcement-item:hover {
    /* Assombrissement pour l'effet bouton */
    filter: brightness(0.95);
    background-color: rgba(225, 225, 225, 0.1); /* Ajoute une couche de profondeur */
}

/* --- EFFET AU CLIC (ACTIVE) --- */
.announcement-item:active {
    /* Simulation de pression (s'enfonce légèrement) */
    transform: scale(0.98);
    filter: brightness(0.7);
    transition: all 0.05s; /* Réaction instantanée au clic */
}

@keyframes announcementSwipe1by1 {
    0%, 22% { transform: translateY(0); }             /* Message 1 seul */
    25%, 47% { transform: translateY(-40px); }      /* Message 2 seul */
    50%, 72% { transform: translateY(-80px); }      /* Message 3 seul */
    75%, 97% { transform: translateY(-120px); }     /* Message 4 seul */
    100% { transform: translateY(0); }
}



/* --- HEADER CONTENT BASE --- */
.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 120px; /* Réduit un peu pour le look, ajuste selon ton besoin */
    margin: 0 auto;
    padding: 0 40px;
    position: relative; /* Obligatoire pour attacher la barre */
    --charge-width: 0%; /* Variable pilotée par le JS */
}

/* --- LA BARRE DE CHARGEMENT (Ancien border-bottom) --- */
.header__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px; /* Plus élégant que 40px, mais garde ton orange */
    width: var(--charge-width); /* Largeur dynamique */
    background: #c00809;
    /* box-shadow: 0 0 15px rgba(245, 106, 49, 0.6); */
    transition: opacity 0.4s ease, width 0.1s linear;
    z-index: 10;
}

/* --- ÉTAT CACHÉ (Entre 10% et 80%) --- */
.header__content.charge-hidden::after {
    opacity: 0;
    visibility: hidden;
}

/* --- EFFET "SCANNER" SUR LA BARRE --- */
.header__content:not(.charge-hidden)::after {
    background: linear-gradient(90deg, #c00809, #c00809, #c00809);
    background-size: 200% 100%;
    animation: shine-loading 2s infinite linear;
}

@keyframes shine-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}






/* --- 2. HEADER FLEXBOX (ALIGNEMENT GAUCHE / DROITE) --- */
.site-header.header-fixed {
    position: sticky;
    top: 100px;
    left: 0; width: 100%;
    height: var(--header-h);
    background:transparent;
    backdrop-filter: blur(15px); 
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top:-220px;
}

.header__content {
      display: flex;
      background: #f9f9f9;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1700px;
    border-bottom: 100px solid #c00809;
    height: 400px;
    margin: 0 auto;
    padding: 0 40px;
}

.header__logo { display: flex; align-items: center; text-decoration: none; }

.header-icon-main {     
    height: 190px;
    width: auto;
    margin-left: -40px;
    margin-top: 0px;
}


.logo-text    {

font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 3px;
    color: #000;
    opacity: 0.7;
    border-color: #c00809;
    text-decoration: underline #c00809;
}

.logo-badge { font-size: 0.6rem; color: #888; font-weight: 700; display: block; margin-top: -3px; }

.button-cart-header {
    background: #000;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border: solid 2px #c00809;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-cart-header:hover {
        background: #c00809;
    color: var(--blanc);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* --- 3. PACKS DIGITAUX (POSTURE PRO) --- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; padding: 80px 40px; }

.product-card {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    position: relative;
    transition: var(--transition-pro);
    text-align: center;
}

.product-card:hover { transform: translateY(-15px); border-color: #000; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
.product-card:hover .product-title { color: var(--vert-status); } /* Animation titre */

.product-card--featured { border: 3px solid #000; transform: scale(1.05); z-index: 5; }

.promo-badge {
    position: absolute; top: -15px; right: 20px;
    background: var(--rouge-promo); color: var(--blanc);
    padding: 8px 15px; font-weight: 900; font-size: 0.8rem;
}

.button {
    width: 100%; padding: 20px; text-decoration: none; font-size: 0.85rem; font-weight: 900;
    text-transform: uppercase; border: 2px solid #000; transition: var(--transition-pro);
}
.button--primary { background: #000; color: #fff; }
.button--primary:hover { background: transparent; color: #ffffff; } /* Effet remplissage */

/* --- 4. FOOTER (LOGO GAUCHE ET MÉDIAS COLORÉS) --- */
.site-footer { background: #f9f9f9; color: #000; padding: 100px 0 80px; }

.footer__container { 
    display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 240px; 
    max-width: 1700px; margin: 0 auto; padding: 0 40px;
    text-align: left; /* Aligne le contenu du footer à gauche */
}

/* Logo footer gauche identique header */
.footer__brand .header__logo { margin-bottom: 25px; }

.social-icons-row { display: flex; justify-content: center; gap: 20px; padding: 50px 0; margin-top: 50px; }

/* social icon */ 
.social-icon { 
  width: 65px;
    height: 65px;
    border-radius: 90%;
    background: radial-gradient(circle at center, #c00809 0%, var(--noir-pur) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  /*  transition: 0.4s ease; */
    border: 4.5px solid #c00809;
}

 .social-icon img { width: 34px; height: 34px; filter: invert(0); } 

/* --- ÉTAT ACTIVE GLOBAL (AU MOMENT DU CLIC) --- */
.social-icon:active {
    transform: translateY(0) scale(0.90); /* L'icône descend et rétrécit */
    transition: all 0.1s ease; /* Très rapide pour simuler un clic physique */
}

/* --- COULEURS SPÉCIFIQUES AU CLIC --- */

/* Facebook : Devient un bleu plus profond */
.social-icon[aria-label="Facebook"]:active {
    background-color: #0d65d9;
    color: #fff;
    border-color: #0d65d9;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    filter: invert(1); /* Transforme le noir en blanc pur */
}

/* 2. État actif de l'icône : On transforme le noir en blanc pur */
.social-icon[aria-label="Facebook"]:active img {
    filter: invert(1) brightness(2); /* Inversion en blanc et boost de clarté */
}

/* Twitter (X) : Devient gris très foncé / noir pur */
.social-icon[aria-label="Twitter"]:active {
    background-color: #111;
    border-color: #fff;
}

/* Discord : Devient un mauve plus sombre */
.social-icon[aria-label="Discord"]:active {
    background-color: #4752c4;
    border-color: #4752c4;
}

/* Instagram : On assombrit le dégradé existant */
.social-icon[aria-label="Instagram"]:active {
    filter: brightness(0.8) contrast(1.2);
}

/* Force l'icône blanche à rester nette au clic */
.social-icon:active img {
    transform: scale(0.9);
}

/* Couleurs officielles au Hover */
.social-icon[aria-label="Facebook"]:hover { background: var(--color-fb); border-color: var(--color-fb); }
.social-icon[aria-label="Twitter"]:hover { background: var(--color-x); border-color: #00a9eb; }
.social-icon[aria-label="Discord"]:hover { background: #fff; border-color: var(--color-dc); }
.social-icon[aria-label="Instagram"]:hover { background: #cc2366; border-color: #cc2366; }
.social-icon:hover { transform: translateY(-8px) rotate(360deg); }
/* .social-icon:hover img { filter: invert(0); } */

/* --- 5. RESPONSIVE --- */
@media (max-width: 992px) {
    .product-grid { grid-template-columns: 1fr 1fr; padding: 40px 20px; }
    .footer__container { grid-template-columns: 1fr; text-align: center; }
    .footer__brand .header__logo { justify-content: center; }
}
@media (max-width: 768px) {
    .product-grid { grid-template-columns: 1fr; }
    .header__actions { display: none; }
    .hero__title { font-size: 2.8rem; }
}





/* Pied de page CSS */
.footer__copyright { display:block; font-size: 10.0px; color: #000; text-decoration: dashed; text-transform: uppercase; font-weight: 700; letter-spacing: 0; margin-bottom: -30px; opacity: 0.8;}
.footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 0px; border-top: 0px solid #111; text-align: center; }
.footer__payment-methods { display: flex; gap: 8px; justify-content: center; }
.pay-card-svg { height: 75px; width: auto; background: #ffffff00; border-radius: 4px; /* padding: 5px 12px; */ border: 0px solid #ddd; }



/* Rend l'icône Facebook blanche en permanence (même si le fichier source est noir) */
.social-icon[aria-label="Facebook"] img {
    filter: invert(1) brightness(2) !important;
}

/* Version pour l'état :active si tu veux maintenir le blanc éclatant au clic */
.social-icon[aria-label="Facebook"]:active img {
    filter: invert(1) brightness(2) !important;
    transform: scale(0.9); /* Effet de pression constant */
}





























/* --- SECTION NAVIGATION FOOTER --- */
.footer__nav-grid {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le menu pour l'humain */
    gap: 20px;
    margin-top: -34px;
    margin-left: -110px;
}

.footer__nav-title {
     font-size: 1.38rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 10px;
    color:#000;
    margin-right: -8px;
}

.footer__nav-list {
    list-style: none; /* Enlève les points par défaut */
    padding: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    font-weight: 500;
    margin-left: 8px;
    font-size: 28px;
    margin-top: -20px;
}


.footer__text { 
    text-transform: uppercase;
    color: #000;
    display: flex;
    font-size: 14.8px;
}


.footer__text:hover { 
    color: #f9f9f9;
    text-decoration: underline #f9f9f9;
    display: flex;
    font-size: 14.8px;
}


.text-padding-fitsyly { 
    text-transform: uppercase;
    color: #000;
    display: flex;
    font-size: 14.8px;
    font-weight: 800;
}



/* --- Fix Mobile pour les liens du Footer --- */
@media screen and (max-width: 480px) {
    .footer__nav-list a {
        /* Taille optimisée pour la lisibilité sur iPhone XR */
        font-size: 0.75rem !important; 
        font-weight: 900;
        
        /* Augmente la zone de clic pour le tactile */
        padding: 10px 0;
        display: inline-block; /* Prend toute la largeur pour éviter les clics ratés */
        
        /* Empêche le texte de pousser les bords et créer du blanc */
        letter-spacing: 0.2px;
    }

    /* Espacement entre les lignes du menu footer */
    .footer__nav-list li {
        margin-bottom: 5px;
    }
}


.footer__nav-list li {
    margin-bottom: -14px; /* Espace entre chaque lien */
}

.footer__nav-list a {
    color: #000;
    text-decoration: UNDERLINE SOLID 2PX #c00809;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 900;
    transition: var(--transition-pro);
}

.footer__nav-list a:hover {
    opacity: 1;
    color: #c00809;
    text-decoration: underline;
   /*  letter-spacing: 1px;  Petit effet pro au survol */
}

/* --- SECTION APPS MOBILE --- */
.footer__apps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: -34px;


}

.app-single-container {
    margin-top: 10px;
    transition: var(--transition-pro);
}

.app-full-image {
    max-width: 160px;
    height: auto;
    display: block;
    filter: brightness(1.1);
    border: 0px solid #c00809;
    border-radius: 10px;
    margin-top: -64px;
    margin-left: 12px;
}

.app-single-container:hover {
    transform: scale(1.05); /* Effet de zoom pro au survol */
}

/* --- FIX POUR MOBILE --- */
@media (max-width: 768px) {
    .footer__nav-grid, .footer__apps {
        margin-top: 40px; /* Ajoute de l'air entre les blocs sur téléphone */
        margin-left: 4px;
    }
}






















    /* img footer css a la main */ 
    .footer-icon-main { 
    margin: 0px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 0px;
    margin-top: -82px;
    }



    /* Style de base pour ton texte */
.texte-soft-blink {
    color: #c00809; /* Ton rouge CNL */
    font-family: serif; /* Police d'origine */
    font-size: 1.5rem; /* Ajuste la taille */
    text-align: center;
    font-weight: 500;
    
    /* Appel de l'animation */
    animation: softBlinkRed 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* L'animation softBlinkRed */
@keyframes softBlinkRed {
    0%, 100% {
        opacity: 1; /* Pleinement visible */
    }
    50% {
        opacity: 0.3; /* Presque invisible */
    }
}


    
.changing-word8 {
    display: inline-block;
    position: relative;
    color: #c00809;
    animation: blink-and-change8 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes blink-and-change8 {
    /* CLIGNOTEMENT 1 */
    0%, 10% { color: #000000; opacity: 1; }
    5%, 15% { color: #c00809; } 
    
    /* CLIGNOTEMENT 2 */
    20% { color: #000000; }
    25% { color: #c00809; }
    
    /* RESTE ORANGE */
    30%, 80% { color: #c00809; opacity: 1; transform: translateY(0); }
    
    /* TRANSITION VERS MOT SUIVANT */
    85% { opacity: 0; transform: translateY(10px); }
    90% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}




:root {
    --jef-orange: #c00809; /* Ta couleur signature */
}

.company-name {
    font-size: 3.8rem;
    font-weight: 900;
    text-align: center;
    margin: 0;
    color: #ffffff; /* Couleur de base */
    text-transform: uppercase;
}





.changing-word {
    display: inline-block;
    position: relative;
    animation: blink-and-change 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes blink-and-change {
    /* CLIGNOTEMENT 1 */
    0%, 10% { color: #ffffff; opacity: 1; }
    5%, 15% { color: #f56a31; } 
    
    /* CLIGNOTEMENT 2 */
    20% { color: #ffffff; }
    25% { color: #f56a31; }
    
    /* RESTE ORANGE */
    30%, 80% { color: #f56a31; opacity: 1; transform: translateY(0); }
    
    /* TRANSITION VERS MOT SUIVANT */
    85% { opacity: 0; transform: translateY(10px); }
    90% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Optionnel : Changement de mot via JS ou via Content CSS */
/* Pour un effet 100% CSS Pro : */
.changing-word::after {
    content: 'DÉVELOPPEUR+'; /* Le second mot */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: word-switch 16s infinite;
}

@keyframes word-switch {
    0%, 45% { content: 'AGENCE'; }
    50%, 95% { content: 'DÉVELOPPEUR+'; }
}








:root {
    --jef-orange: #c00809; /* Ta couleur signature */
    --jef-mauve: #bf29cd;
    --jef-vert7: #08dd33;
}

.company-name {
    font-size: 3.8rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff; /* Couleur de base */
    text-transform: uppercase;
}

.changing-word2 {
    display: inline-block;
    position: relative;
    animation: blink-and-change3 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes blink-and-change3 {
    /* CLIGNOTEMENT 1 */
    0%, 10% { color: #ffffff; opacity: 1; }    
    5%, 15% { color: var(--jef-mauve); }       
    
    /* CLIGNOTEMENT 2 */
    20% { color: #ffffff; }
    25% { color: var(--jef-mauve); }
    
    /* RESTE ORANGE */
    30%, 80% { color: var(--jef-mauve); opacity: 1; transform: translateY(0); }
    
    /* TRANSITION VERS MOT SUIVANT */
    85% { opacity: 0; transform: translateY(10px); }
    90% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Optionnel : Changement de mot via JS ou via Content CSS */
/* Pour un effet 100% CSS Pro : */
.changing-word::after {
    content: 'DÉVELOPPEUR+'; /* Le second mot */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: word-switch 16s infinite;
}

@keyframes word-switch {
    0%, 45% { content: 'AGENCE'; }
    50%, 95% { content: 'DÉVELOPPEUR+'; }
}



:root {
    --jef-orange: #c00809; /* Ta couleur signature */
    --jef-mauve: #c00809;
    --jef-vert7: #08dd33;
}

.company-name {
    font-size: 3.8rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff; /* Couleur de base */
    text-transform: uppercase;
}

.changing-word3 {
    display: inline-block;
    position: relative;
    animation: blink-and-change4 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes blink-and-change4 {
    /* CLIGNOTEMENT 1 */
    0%, 10% { color: #ffffff; opacity: 1; }    
    5%, 15% { color: #00ff00; }       
    
    /* CLIGNOTEMENT 2 */
    20% { color: #ffffff; }
    25% { color: #00ff00; }
    
    /* RESTE ORANGE */
    30%, 80% { color: #00ff00; opacity: 0.9; transform: translateY(0); }
    
    /* TRANSITION VERS MOT SUIVANT */
    85% { opacity: 0; transform: translateY(10px); }
    90% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Optionnel : Changement de mot via JS ou via Content CSS */
/* Pour un effet 100% CSS Pro : */
.changing-word::after {
    content: 'DÉVELOPPEUR+'; /* Le second mot */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: word-switch 16s infinite;
}

@keyframes word-switch {
    0%, 45% { content: 'AGENCE'; }
    50%, 95% { content: 'DÉVELOPPEUR+'; }
}

/* --- Ajout d'un design improvisé sous le footer JEFHIP --- */

/* 1. Assurer que le body prend toute la hauteur pour que le design colle en bas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* 2. Le footer reste collé en bas grâce à Flexbox */
.site-footer {
    margin-top: auto; /* Pousse le footer vers le bas */
    position: relative; /* Nécessaire pour positionner le design */
    background: #f9f9f9; /* Assurer que le fond du footer est noir */
    overflow: visible; /* Laisser le motif déborder */
}

/* 3. Le design improvisé (pseudo-élément) qui colle sous le footer */
.site-footer::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Colle et dépasse en dessous du footer */
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #c00809; /* Utilisation de l'orange signature JEFHIP */
    
    /* Motif géométrique "Engine" (triangles) */
    background-image: linear-gradient(135deg, transparent 25%, rgba(0, 0, 0, 0.251) 25%, rgba(0, 0, 0, 0) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
    background-size: 20px 20px;
    
    /* Effet d'ombre portée pour de la profondeur */
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.4);
    border-radius: 0 0 0px 0px; /* Arrondi léger en bas */
}

/* 4. Ajustement pour mobile pour garder un design propre */
@media (max-width: 768px) {
    .site-footer::after {
        height: 30px;
        bottom: -30px;
    }
}




/* --- MODULE INFOLETTRE (NEWSLETTER) JEFHIP --- */

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start; /* Aligné à gauche comme demandé */
}

.footer__text {
    font-size: 0.95rem;
    line-height: 1.5;
   /* opacity: 0.8; */
     /*max-width: 320px; Évite que le texte ne s'étale trop sur PC */ 
    text-align: left;
}

.footer__text:hover{

     font-size: 0.95rem;
    line-height: 1.5;
    color: #f9f9f9;
   /* opacity: 0.8; */
     /*max-width: 320px; Évite que le texte ne s'étale trop sur PC */ 
    text-align: left;
}






.newsletter-form {
    display: flex;
    width: 100%;
    max-width: 400px; /* Taille optimale du champ */
    gap: 0; /* On colle l'input et le bouton pour un look moderne */
    margin-top: 10px;
}

.newsletter-input {
    flex: 1;
    padding: 0px 10px 0px 3px; /* clone ici padding: 14px, 8px; */
    background-color: rgb(255 255 255 / 0%);
    border: 0px solid rgb(255 145 0);
    border-right: none;
    color: #1a1c1e;
    font-family: 'Arimo', sans-serif;
    font-size: 1.8rem;
    justify-content: center;
    align-items: center;
    text-transform: none;
    outline: none;
    transition: var(--transition-pro);
}




.jef-modalites-section {
    background: #1a1c1e;
    margin-top: 80px;
    padding: 190px 20px 80px 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.modalites-container {
    max-width: 1000px;
    background: rgba(26, 26, 26, 0.8); /* Gris très foncé */
    border: 1px solid rgba(249, 115, 26, 0.3); /* Bordure orange subtile */
    border-radius: 30px;
    padding: 50px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
}

.modalites-title {
    color: #fff;
    font-size: 2.0rem;
    display: flex;
    text-align: center;
    letter-spacing: 0px;
    margin-left: 178px;
    gap: 10px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.orange-text { color: #c00809; }

.modalites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}

.condition-item {
    position: relative;
    padding-bottom: 20px;
}

.condition-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.condition-icon { font-size: 1.5rem; }

.condition-item h3 {
    display: none;
    color: #c00809;
    font-size: 1.2rem;
    margin-left: 220px;
    text-transform: uppercase;
}

.condition-item h3:hover {
  color: #c00809;
    font-size: 1.2rem;
    text-decoration: underline 2px solid #c00809;
    margin-left: 220px;
    margin: 0;
    text-transform: uppercase;
}


.condition-item p {
    color: #ccc;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-top: 0px;
    display: inline-block;
    padding: 0px 50px 50px 50px;
}

/* --- EFFET DE BRILLANCE TECHNIQUE --- */
.shine-line {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #c00809, transparent);
    margin-top: 20px;
    opacity: 0.3;
    position: relative;
    overflow: hidden;
}

.shine-line::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: white;
    filter: blur(5px);
    animation: line-travel 4s infinite;
}

@keyframes line-travel {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

.footer-note {
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.94rem;
    color: #fff;
    border-top: 0px solid #33333300;
    padding-top: 20px;
}


.footer-note:hover {
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.94rem;
    color: #c00809;
    text-decoration: underline 3px solid #c00809;
    border-top: 0px solid #33333300;
    padding-top: 20px;
}




.newsletter-input:hover {
    color: #000;
    flex: 1;
    padding: 0px 10px 0px 3px;
    border: none;
}
    /*
    background-color: #f56a31;
    border: 0px solid rgb(255 145 0);
    border-right: none;
    color: #919191 !important;
    font-family: 'Arimo', sans-serif;
    font-size: 1.8rem;
    justify-content: center;
    align-items: center;
    text-transform: none;
    outline: none;
    transition: var(--transition-pro);
} */


.newsletter-input:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--blanc);
}


.newsletter-submit {
    padding: 10px 10px 10px 10px;
    background-color: #c00809;
    color: #ffffff;
    border: 3px solid ;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-pro);
    margin-left: -75px;
    white-space: nowrap;
}

:root {
    --jef-binini: radial-gradient(circle at center, #c00809 0%, var(--noir-pur) 100%);
}

.newsletter-submit:hover {
    background-color: #c00809;
    color: var(--blanc);
    border-radius: 24px;

    border-color: #f9f9f9;
}



.section-contact-final .header-sidebar h3:hover {
    color: #c00809
}

.newsletter-submit:active {
    transform: scale(0.95); /* Effet de pression au clic */
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 480px) {
    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }
    
    .newsletter-input {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        width: 100%;
    }
    
    .newsletter-submit {
        padding: 15px;
        width: 100%;
    }
}







/* --- Variables de Design 2046 --- */
:root {
    --primary-glow: #00f2ff;
    --secondary-glow: #7000ff;
    --dark-bg: #0a0a0c;
    --text-main: #ffffff;
    --text-dim: #a0a0a5;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.1);
    --font-main: 'Inter', system-ui, sans-serif;
}

/* --- Section Hero Container --- */
.section-hero.container {
    position: relative;
    margin-top: 280px;
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 270px 0px 40px 40px;
    background-color: #c00809;
    overflow: hidden;
    font-family: var(--font-main);
    color: var(--text-main);
}

.footer__copyright:hover {

        display: block;
    font-size: 10.0px;
    color: #000;
    text-decoration: dashed;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: underline solid 2px #c00809;
    letter-spacing: 0;
    margin-bottom: -30px;
    opacity: 0.8;
}



.section-hero.container2 {
    position: relative;
    margin-top: 80px;
    margin-bottom: 80px;
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 20px 60px 20px;
    background-color: #c00809;
    overflow: hidden;
    font-family: var(--font-main);
    color: var(--text-main);
}

/* Effet de Halo en arrière-plan (Ambiance Ingénierie) */
.section-hero.container::before {
    content: '';
    position: absolute;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
    filter: blur(100px);
    opacity: 0.15;
    top: -10%;
    right: -10%;
}

/* --- Contenu Texte --- */
.hero__text-content {
    max-width: 900px;
    margin-top: -290px;
    z-index: 2;
    padding-bottom: -60px;
    margin-left: -40px;
    text-align: center;
    animation: fadeIn 1s ease-out;
}



/* Ciblage spécifique du texte de l'infolettre */
@media screen and (max-width: 768px) {
    .footer__text.footer-newsletter-text {
        display: block !important; /* Force le passage en bloc pour permettre le centrage */
        text-align: center !important; /* Aligne le texte au milieu */
        width: 100% !important; /* Prend toute la largeur disponible */
        margin: 10px auto !important; /* Ajoute un espace propre autour */
        padding: 0 15px !important; /* Évite que le texte ne colle aux bords de l'écran */
    }

    /* Optionnel : Centrer aussi le titre du logo ou de la marque au-dessus si besoin */
    .footer__section.footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* --- Contenu Texte --- */
.hero__text-content2 {
    max-width: 900px;
    margin-top: 60px;
    z-index: 2;
    padding-bottom: -60px;
    text-align: center;
    animation: fadeIn 1s ease-out;
}

/* --- Badge Professionnel --- 
.hero__badge {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-glow);
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
} */

/* --- Titre Principal (Typographie Lourde) --- */
.hero__title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 1.5rem;
}

.stylecookie {
    color: #fff;
    font-size: 22px;
    align-items: center;
    display: block;
    justify-content: center;
    box-shadow: #000000;
    border-color: #00b67a;
    text-decoration: solid;
}
.hero__title span {
        display: block;
    background: #ffffff;
    -webkit-background-clip: text;
    box-sizing: var(--accent-color);
}

/* --- Description --- */
.hero__description {
   /* font-size: clamp(1.1rem, 2vw, 1.4rem); */
    color: #ffffff;
    max-width: 700px;
    font-size: 18px;
    margin: 0 auto 1.6rem;
    line-height: 1.6;
}

/* --- Boutons (CTA) --- */
.hero__cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bouton Principal (Action) */
.btn-hero-main {
    padding: 18px 40px;
    font-weight: 700;
    text-decoration: underline ;
    text-transform: uppercase;
    color: #c00809;
    background: #ffffff;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   /* box-shadow: 0 0 20px rgb(255 255 255); */
}

.btn-hero-main:hover {
     transform: translateY(-9px);
    box-shadow: 0 10px 30px #c00809;
    filter: brightness(1.1);
    border-radius: 10px;
}

/* Bouton Secondaire (Spécifications) */
.btn-hero-sub {
    padding: 18px 40px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: transparent;
    border: 0px solid var(--border-glass);
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-hero-sub:hover {
    background: #c00809;
    border-color: transparent;
    color: #fff; 
    text-transform: uppercase;
    font-weight: 600;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .hero__cta {
        flex-direction: column;
        width: 100%;
    }
    .btn-hero-main, .btn-hero-sub {
        width: 100%;
        text-align: center;
    }
}


















/* --- NAVIGATION HEADER --- */
.header__nav {
    flex: 1; /* Prend l'espace disponible pour centrer le contenu */
    display: flex;
    justify-content: center; /* Centre la liste des liens */
}

.nav__list {
       display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    gap: 15px;
    font-weight: 900;
    text-align: center;
    margin: 50px 20px 50px 50px;
    padding: 10px 30px 10px 10px;
}

.nav__link {
    text-decoration: none;
    color: var(--noir-pur);
    font-size: 0.79rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-pro);
    position: relative;
    padding: 10px 0;
    /* Indispensable pour que le ::after se base sur la taille du texte */
    position: relative; 
    display: inline-block; 
    padding: 5px 0; /* Ajuste l'espace vertical entre le texte et la ligne */
}

/* Petit trait d'animation au survol (style pro) le reactiver si besoin 
.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #c00809; /* Ta couleur orange d'accent 
    transition: var(--transition-pro); 
} */ 

.nav__link:hover {
    color: #c00809;
} 

.nav__link:hover::after {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* --- AJUSTEMENT RESPONSIVE --- */
@media (max-width: 992px) {
    .header__nav {
        display: none; /* Cache le menu sur mobile pour utiliser un menu burger plus tard */
    }
    
    .header__content {
        justify-content: space-between;
    }
}
























/* --- Variables de Design --- */
:root {
    --accent-color: #c00809;
    --accent-hover: #c00809;
    --bg-light: #ffffff;
    --bg-card: #ffffff;
    --text-dark: #1a1a1a;
    --text-gray: #666666;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px rgba(245, 106, 49, 0.15);
}

/* --- Container & Header --- */
.section-product-grid {
    padding: 80px 5%;
    background-color: #f9f9f9;
    font-family: 'Inter', sans-serif;
}

.product-grid-header {
    text-align: center;
    margin-top:  80px;
    margin-bottom: 60px;
}

.section-title {
        font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    font-family: sans-serif;
    color:#f56a31;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 80px;
}

.section-subtitle {
    color: var(--text-gray);
    font-size: 1.3rem;
    max-width: 580px;
    margin: 0 auto;
}

/* --- Layout de la Grille --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- La Carte Produit --- */
.product-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px 30px;
    border: 1px solid #eee;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-hover);
}

/* Mise en avant du Pack Avancé */
.product-card--featured {
    border: 2px solid var(--accent-color);
    transform: scale(1.05);
    z-index: 10;
}


.product-card--featured:hover {
    border: none;
    background-color: #f9f9f9;
}

/* --- Badges & Tags --- */
.promo-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--text-dark);
    color: #fff;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 4px;
}

.badge-featured {
    background: var(--accent-color);
    color: white;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.product-tag {
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Typographie Carte --- */
.product-title {
    font-size: 1.8rem;
    margin: 10px 0;
    color: var(--text-dark);
}

.product-card__short-desc {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* --- Prix --- */
.product-card__price {
    margin-bottom: 30px;
}

.price-old {
    text-decoration: line-through;
    color: #bbb;
    font-size: 1.1rem;
    margin-right: 10px;
}

.price-current {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-dark);
}

/* --- Liste des fonctionnalités --- */
.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    border-top: 0px solid #eee;
    padding-top: 25px;
}





.promo-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #f54;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 800;
    border-radius: 500px;
}




/* --- 1. AJOUT INDISPENSABLE SUR TON PARENT --- */
.product-card {
    position: relative;
    background: var(--jefhip-white);
    border: 0px solid var(--jefhip-border);
    border-radius: 12px;
    padding: 50px 30px 40px;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed) ease;
    
    /* AJOUTE CECI : pour couper les bords du badge qui dépassent */
    overflow: hidden; 
}

/* --- 2. STYLE DU BADGE EN DIAGONALE --- */
.promo-badge {
    position: absolute;
    top: 18px;    /* Ajusté pour l'angle */
    right: -35px; /* Décalé vers la droite pour l'effet ruban */
    
    background: #f56a31; /* Ton orange JEFHIP */
    color: white;
    
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    
    /* Largeur fixe pour garantir que le texte est bien centré dans la diagonale */
    width: 150px; 
    padding: 8px 0;
    
    /* La rotation magique */
    transform: rotate(45deg);
    
    /* Ombre légère pour donner du relief sur le blanc */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 1px;
}




.product-features li {
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}

.product-features li::before {
    content: '✓';
    color: var(--accent-color);
    font-weight: 900;
    margin-right: 10px;
}

/* --- Boutons --- */
.button-group {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.button {
    padding: 15px 25px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.button--primary {
    background-color: var(--accent-color);
    color: white;
}

.button--primary:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 5px 15px rgba(245, 106, 49, 0.4);
}

.button--secondary {
      background-color: #000000;
    color: #fff;
    border: 2px solid #f56a31;
}

.button--secondary:hover {
    background-color: #f56a31;
    border-color: var(--text-dark);
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .product-card--featured {
        transform: scale(1);
    }
}






/* --- Variables Globales --- */
:root {
    --jefhip-orange: #f56a31;
    --jefhip-black: #1a1a1a;
    --jefhip-white: #ffffff;
    --jefhip-gray: #666666;
    --jefhip-border: #eeeeee;
    --transition-speed: 0.3s;
}

/* --- Section Container --- */
.section-product-grid {
    padding: 100px 5%;
    background-color: var(--jefhip-white);
    font-family: 'Inter', sans-serif;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

/* --- Structure Commune des 3 Cartes --- */
.product-card {
    position: relative;
    background: var(--jefhip-white);
    border: 4px solid #f56a31;
    border-radius: 12px;
    padding: 50px 30px 40px;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed) ease;
}




.product-card:hover {
     transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--jefhip-orange);
    border: none;
}

/* Style spécifique pour le Pack Vedette  product card featured bon (Avancé) */
.product-card--featured {
    border: 4px solid var(--jefhip-orange);
    background-color: #f9f9f9;
}

/* --- En-tête de Carte --- */
.product-tag {
    display: block;
    color: var(--jefhip-orange);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.product-title {
    font-size: 1.20rem;
    font-weight: 900;
    color: var(--jefhip-black);
    margin-bottom: 15px;
}

.product-card__short-desc {
    font-size: 0.95rem;
    color: var(--jefhip-gray);
    line-height: 1.5;
    margin-bottom: 25px;
}

/* --- Prix --- */
.product-card__price {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 0px solid var(--jefhip-border);
}

.price-old {
    display: block;
    text-decoration: line-through;
    color: #bbb;
    font-size: 1rem;
}

.price-current {
    display: flex;
    font-size: 2.2rem;
    font-weight: 900;
    margin-top: 20px;
    color: var(--jefhip-black);
}











/* 1. État par défaut du prix (Noir et Gras) */
.price-current {
    color: var(--noir-pur);
    font-weight: 900;
    text-decoration:underline solid 2px #e3e3e3;
    transition: var(--transition-pro);
    display: inline-block;
}

/* 2. QUAND LA SOURIS TOUCHE LE PACK (La carte) 
      Le prix passe en ORANGE JEFHIP */
.product-card:hover .price-current {
    color: #f56a31;
    -webkit-text-fill-color: #f56a31; /* Force l'orange sur le dégradé */
    background: none;
    background-clip: initial;
    -webkit-background-clip: initial;
    text-shadow: 0 0 8px rgba(245, 106, 49, 0.2);
}

/* 3. QUAND LA SOURIS TOUCHE DIRECTEMENT LE PRIX 
      Le prix passe en GOLD (Dégradé) */
.price-current:hover {
    /* On applique ton dégradé doré */
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Effet de lueur dorée */
    text-shadow: 0px 4px 15px rgba(212, 175, 55, 0.4);
    transform: scale(1.1); /* Petit "pop" visuel quand on est dessus */
    cursor: pointer;
}






















.price-current:hover {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    padding: 8px 8px 8px 8px; 
    border-radius: 50px;
    -webkit-text-fill-color: transparent;
    
    /* Optionnel : ajoute une transition pour que ce soit fluide */
    transition: var(--transition-pro);
    /* transform: scale(1.05);           Léger agrandissement pour l'effet "Wow" */
    text-shadow: 0 0 4px rgba(212, 175, 55, 0.3);
   /* Ombre multicouche pour un effet de lévitation réaliste
    box-shadow: 
        0 4px 4px rgba(0, 0, 0, 0.1), 
        0 6px 6px rgba(212, 175, 55, 0.1);  Rappel subtil du doré */ 
}
    



/* --- Liste des Fonctionnalités (Harmonisée) --- */
.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    flex-grow: 1; /* Pousse les boutons vers le bas pour l'alignement */
}

.product-features li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: var(--jefhip-black);
    line-height: 1.4;
}

/* L'icône (Check) identique pour les 3 packs */
.product-features li::before {
       content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: #f56a3100;
    color: #f56a31;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;

}



.product-features2 li::before {
       content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: #f56a3100;
    color: #f56a31;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;

}


.product-features3 li::before {
       content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: #f56a3100;
    color: #f56a31;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 900;

}
.product-features li strong {
    font-weight: 700;
}

/* --- Boutons --- */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.button {
    padding: 16px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all var(--transition-speed);
}


.button--primary:hover {
    background-color: var(--jefhip-black);
    transform: scale(1.02);
}


.button--secondary:hover {
    background-color: #f56a31;
    border: 2px #f56a31;
}





























































/* --- Section Confiance (Trust Section) --- */
.section-trust {
    padding: 60px 5%;
    background-color: var(--blanc);
    border-top: 1px solid var(--gris-bordure);
    border-bottom: 1px solid var(--gris-bordure);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Item Individuel --- */
.trust-item {
    text-align: center;
    padding: 30px;
    transition: var(--transition-pro);
    border-radius: 16px;
    background: var(--gris-fond);
    border: 1px solid transparent;
}

.trust-item:hover {
    background: var(--blanc);
    border-color: #f56a31; /* Ton orange JEFHIP */
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

/* --- Icônes --- */
.trust-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.trust-item:hover .trust-icon {
    transform: scale(1.2) rotate(5deg);
}

/* --- Typographie --- */
.trust-item h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--noir-pur);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trust-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    max-width: 250px;
    margin: 0 auto;
}

/* --- Barre de séparation verticale (Optionnel pour Desktop) --- */
@media (min-width: 768px) {
    .trust-item:not(:last-child) {
        border-right: 1px solid var(--gris-bordure);
        border-radius: 0;
    }
    .trust-item:hover {
        border-radius: 16px;
        border-right: 1px solid #f56a31;
    }
}





















































































/* --- Section Pitch (Ingénierie & Performance) --- */
.section-pitch {
    padding: 80px 5%;
    background: #ffffff;
}

.pitch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- La Pitch Card --- */
.pitch-card {
    padding: 40px;
    background: #ffffff;
    /* border: 1px solid #f0f0f0; */
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* L'accent de bordure au survol */
.pitch-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0%;
    background: #c00809; /* Ton orange JEFHIP */
    transition: height 0.3s ease;
}

.pitch-card:hover {
    transform: translateX(10px); /* Décalage latéral au lieu de vertical */
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.03);
    border-color: #f56a31;
}

.pitch-card:hover::before {
    height: 100%;
}

/* --- Icônes et Typo --- */
.pitch-icon {
    font-size: 2.2rem;
    margin-bottom: 25px;
    display: inline-block;
    background: rgba(245, 106, 49, 0.05); /* Fond orange très léger */
    padding: 15px;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.pitch-card:hover .pitch-icon {
    transform: scale(1.1) rotate(-5deg);
}

.pitch-card h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.pitch-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .pitch-card {
        padding: 30px;
    }
}





















































/* ============================================================
   SECTION: CONTACT & EXPERTISE (UNIQUE DESIGN)
   ============================================================ */

.section-contact-final {
    padding: 80px 5%;
    background: #f9f9f9; /* Gris très léger pour faire ressortir la carte blanche */
    font-family: 'Arimo', sans-serif;
}

/* Container principal */
.section-contact-final .contact-wrapper {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    background: #ffffff;
    border-radius: 30px;
    padding: 25px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.04);
}

/* --- SIDEBAR (INFO & HORAIRES) --- */
.section-contact-final .info-sidebar {
    background: #f9f9f9; /* Noir sidebar */
    border-radius: 25px;
    padding: 40px 30px;
    color: #000;
    display: flex;
    flex-direction: column;
}

.section-contact-final .header-sidebar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.section-contact-final .main-time-icon {
    width: 45px;
    /* Filtre pour transformer l'icône noire en orange #f56a31 */
    filter: invert(11%) sepia(82%) saturate(5455%) hue-rotate(352deg) brightness(91%) contrast(106%);
}

.section-contact-final .header-sidebar h3 {
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Liste des horaires */
.section-contact-final .schedule-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.section-contact-final .schedule-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

/* Effet orange au survol des heures */
.section-contact-final .schedule-list li:hover {
    color: #c00809;
    padding-left: 5px;
}

.section-contact-final .status-closed {
       color: #c00809;
    font-weight: 900;
    background: rgb(255 77 77 / 0%);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-size: 12.3px !important;
}

/* --- BLOC CARTE (MAP) --- */
.section-contact-final .map-box {
    border-radius: 20px;
    overflow: hidden;
    height: 280px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    margin-top: auto; /* Pousse la carte vers le bas */
}

.section-contact-final .map-header-bar {
    background: rgba(255,255,255,0.05);
    padding: 10px 15px;
    font-size: 0.75rem;
    display: none;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.section-contact-final .map-content {
    height: 100%;
    position: relative;
}

/* Point orange qui flashe sur la carte */
.section-contact-final .map-pulse-point {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    background: #c00809;
    border-radius: 50%;
    z-index: 5;
    animation: pulse-map-jefhip 1.8s infinite;
}

@keyframes pulse-map-jefhip {
    0% { box-shadow: 0 0 0 0 #c00809; }
    70% { box-shadow: 0 0 0 15px rgba(245, 106, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 106, 49, 0); }
}

/* --- PANNEAU FORMULAIRE --- */
.section-contact-final .form-main-panel {
    padding: 40px;
}

.section-contact-final .form-intro h2 {
    font-size: 1.8rem;
    padding: 14px 14px 14px 14px; 
    background: #f9f9f9;
    
   border-bottom: #000000b4;
    text-decoration: #f5693100 underline; 
    font-weight: 900;
    margin-top: 20px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: #c00809;
color: #c00809;
    text-align: center;
    margin-bottom: 10px;
}

.section-contact-final .form-intro p {
    color: #666;
    text-decoration-thickness: #c00809;
    text-align: center;
    background: #f9f9f9;
    font-size: 18px;
    border-bottom: #08dd33 3px solid;
    border-radius: 10px;
    margin-bottom: 35px;
}

/* Lignes d'input côte à côte */
.section-contact-final .input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.section-contact-final .field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.section-contact-final .field label {
    position: relative;
    padding-top: 0px;
    font-size: 1.0rem;
    margin-bottom: 20px;
    background: #fff;
    margin-top: -10px;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-left: 18px;
    font-weight: 800;
    text-transform: capitalise;
    color: #c00809;
}

.section-contact-final .field input {
    padding: 16px;
    border: 2px solid #eeeeee;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.section-contact-final .field input:focus {
    border-color: #c00809;
    outline: none;
    background: #ffffff;
}

/* --- SÉLECTION DES PACKS (BOUTONS) --- */
.section-contact-final .pack-selection-area {
    margin-top: 30px;
}

.section-contact-final .label-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.section-contact-final .pack-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.section-contact-final .pack-item input {
    display: none; /* Cache les boutons radio natifs */
}

.section-contact-final .pack-btn:hover {

        display: block;
    text-align: center;
    padding: 16px;
    border-radius: 22px;
   background: #c00809; /* background: rgb(249, 249, 249); */ 
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border: 4px solid rgb(0, 0, 0);
    transition: 0.3s;
}

.section-contact-final .pack-btn {
       display: block;
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    background: rgb(249, 249, 249);
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    border: 4px solid rgb(0, 0, 0);
    transition: 0.3s;
}

/* État coché du pack */
.section-contact-final .pack-item input:checked + .pack-btn {
    background: #c00809;
    color: #ffffff;
    box-shadow: 0 10px 20px;
    transform: translateY(-2px);
}

/* --- BOUTON D'ENVOI --- */
.section-contact-final .submit-btn-gold {
    width: 100%;
    margin-top: 40px;
    padding: 22px;
    font-size: 14px;
    font-family: unset;
    text-align: center;
    background: #121212;
    color: #ffffff;
    border: 4px solid #000;
    border-radius: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}









/* --- ÉTAT DU HEADER --- */
.site-header.header-fixed {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}

.header-off {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* --- LA BULLE DE FERMETURE X --- */
.jefhip-close-header {
    position: absolute;
    top: 350px;
    right: 176px;
    width: 50px;
    height: 50px;
    background: #c00809; /* Ton orange JEFHIP */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transform: scale(0) rotate(-90deg);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #f9f9f9;
}

.jefhip-close-header.btn-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}







/* --- Bloc CSS Unique pour les Visuels de Projet JEFHIP --- */
/* Cible les deux classes d'images détectées */
.project-visual img.main-illustration,
.project-visual img.main-illustration-shopify {
    /* 1. Préparation de la transition pour qu'elle soit fluide */
    /* On utilise cubic-bezier pour un effet de mouvement "Premium" */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                filter 0.4s ease;
    
    /* 2. Assure que l'animation part bien du centre de l'image */
    transform-origin: center center;
    
    /* 3. Force le rendu matériel pour éviter les saccades sur mobile */
    will-change: transform;
    
    /* 4. Ombre légère par défaut pour le relief */
}

/* --- Effet Combiné au Survol (Hover) --- */
.project-visual img.main-illustration:hover,
.project-visual img.main-illustration-shopify:hover {
    /* Combinatoire : Agrandissement (1.1) + Légère Rotation (5 degrés) */
    /* J'ai mis une rotation positive (+5deg) pour un effet "en avant" */
    transform: scale(1.1) rotate(5deg);
    
    /* Intensifie l'ombre pour accentuer l'effet de lévitation */
}




.jefhip-close-header:hover {
    background: #f9f9f9;
    transform: scale(1.1) rotate(90deg);
}

/* Dessin du X en blanc */
.jefhip-close-header::before, 
.jefhip-close-header::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

.jefhip-close-header::before { transform: rotate(45deg); }
.jefhip-close-header::after { transform: rotate(-45deg); }



















.section-contact-final .submit-btn-gold:hover {
    background: #c00809;
    transform: translateY(-5px);
    border-radius: 40px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .section-contact-final .contact-wrapper {
        grid-template-columns: 1fr;
        padding: 15px;
    }
    .section-contact-final .info-sidebar {
        order: 2; /* Met les horaires en dessous sur mobile */
    }
    .section-contact-final .pack-options {
        grid-template-columns: 1fr;
    }
    .section-contact-final .input-row {
        flex-direction: column;
    }
}































.badge:hover {
    border-radius: 10px 20px; 
}

/* Réduction de l'espace entre les liens du footer */
.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Ajuste cette valeur pour coller plus ou moins les liens */
    align-items: center; /* Pour les centrer comme sur tes images */
}

.footer__nav-list a {
    padding: 2px 0 !important; /* Réduit le padding vertical qui crée l'espace */
    margin: 0 !important;
    line-height: 1.2; /* Serre le texte */
}

/* Correction spécifique pour le mobile d'après ton inspecteur */
@media screen and (max-width: 480px) {
    .footer__nav-list a {
        font-size: 0.75rem !important;
        font-weight: 900;
        padding: 4px 0 !important; /* Un peu plus d'espace pour le tactile mais reste collé */
    }
}

/* --- Section Pitch --- */
.section-pitch {
    padding: 80px 5%;
    background: #f9f9f9;
    margin-top: 30px;
    margin-bottom: -68px;
}

.pitch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Cartes --- */
.pitch-card {
    text-align: center;
    padding: 40px 30px;
    background: #ffffff;
    border-radius: 24px;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    border: 0px solid #f0f0f0;
}

.pitch-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
    border-color: #c00809;
}

/* --- Gestion des Icônes SVG --- */
.pitch-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: rgba(245, 106, 49, 0.07); /* Fond orange très léger */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}


.pitch-svg {
    width: 65px;
    height: 65px;
    /* Ce filtre force l'icône en orange JEFHIP si elle est noire à la base 
    filter: invert(48%) sepia(89%) saturate(1842%) hue-rotate(338deg) brightness(99%) contrast(93%); */
} 

.pitch-card:hover .pitch-icon-wrapper {
    background: #c00809;
    transform: rotate(10deg);
}

/*
.pitch-card:hover .pitch-svg {
   filter: brightness(0) invert(1); Devient blanc au survol
} */


/* --- Filtrer blanc au survol (Exclut Performance) --- */

/* Applique le filtre blanc uniquement sur le premier et le dernier icône au survol */
.pitch-card:first-child:hover .pitch-svg, 
.pitch-card:last-child:hover .pitch-svg {
    filter: none !important; 
}

/* Assure que l'icône Performance (2ème carte) garde ses couleurs d'origine au survol */
.pitch-card:nth-child(2):hover .pitch-svg {
    filter: none !important;
}



/* --- Typographie --- */
.pitch-card h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}




.pitch-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}






































































/* --- LE BOUTON BURGER (Design des 3 barres) --- */
.mobile-nav-toggle {
    display: none; /* Caché sur grand écran */
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999;
    position: relative;
    padding: 15px;
}

/* On dessine les barres ici */
.burger-icon span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #000; /* Noir sur fond blanc du header */
    margin: 6px 0;
    transition: 0.4s ease;
    border-radius: 2px;
}

/* --- LE MENU MOBILE (Le rideau noir) --- */
@media (max-width: 992px) {
    .mobile-nav-toggle { display: block; } /* On l'affiche enfin */

    .header__nav {
        position: fixed;
        inset: 0; /* Prend tout l'écran */
        background: #000; /* Fond noir pour le contraste Élite */
        z-index: 9000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* Animation : il est caché en haut par défaut */
        transform: translateY(-100%);
        transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    }

    /* QUAND ON CLIQUE : Le menu descend */
    .header__nav[data-visible="true"] {
        transform: translateY(0);
    }

    /* Disposition des liens en BLOC vertical */
    .nav__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 80%; /* Largeur des blocs */
        text-align: center;
    }

    .nav__link {
        display: block !important;
        padding: 20px !important;
        color: #fff !important;
        font-size: 1.4rem !important;
        font-weight: 900 !important;
        border: 1px solid rgba(255,255,255,0.1); /* Bordure discrète style "bouton" */
        border-radius: 8px;
        text-transform: uppercase;
        text-decoration: none;
    }

    .nav__link:hover {
        background: #f56a31; /* Orange Jefhip au survol */
        border-color: #f56a31;
    }

    /* ANIMATION DU BURGER (X blanc quand ouvert) */
    .mobile-nav-toggle[aria-expanded="true"] .burger-icon span {
        background-color: #fff; /* Les barres deviennent blanches sur le fond noir */
    }
    .mobile-nav-toggle[aria-expanded="true"] .burger-icon span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-nav-toggle[aria-expanded="true"] .burger-icon span:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle[aria-expanded="true"] .burger-icon span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

























































































/* ============================================================
   AUTO-ADAPTATION MOBILE (SANS TOUCHER AU PC)
   ============================================================ */

@media screen and (max-width: 992px) {
    /* 1. Ajustement du Header (Hauteur trop grande sur PC) */
    :root {
        --header-h: 80px !important; /* On force une hauteur de 80px au lieu de 200px */
    }

    .site-header.header-fixed {
        height: 80px !important;
    }

    .header__content {
        height: 80px !important;
        padding: 0 15px !important;
        border-bottom: 4px solid #f56a31 !important;
    }

    /* 2. Redimensionnement du Logo */
    .header-icon-main {
        height: 55px !important; /* Taille propre pour mobile */
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    /* 3. Nettoyage du Panier (On garde juste l'icône) */
    .button-cart-header {
        margin-right: 60px !important; /* Espace pour le burger */
        padding: 8px 12px !important;
        font-size: 1.2rem !important;
    }
    .button-cart-header span:not(.cart-icon) {
        display: none !important; /* Cache le texte long "HTML5/CSS..." */
    }

    /* 4. Correction de la section Hero (Chevauchement image) */
    .section-hero.container {
        padding: 40px 15px !important;
        min-height: auto !important;
        display: block !important;
    }

    .hero__text-content {
        margin-top: 0 !important; /* Supprime le décalage négatif du PC */
        text-align: center !important;
    }

    .hero__title {
        font-size: 2.2rem !important; /* Titre plus petit pour mobile */
        line-height: 1.1 !important;
    }

    /* 5. Grilles de produits et Pitch (Une seule colonne) */
    .product-grid, .pitch-grid, .trust-grid {
        grid-template-columns: 1fr !important; /* Force l'empilement vertical */
        gap: 20px !important;
        padding: 40px 15px !important;
        margin-top: -40px;
    }

    .product-card {
        transform: none !important; /* On enlève le zoom scale(1.05) du pack vedette */
        margin: 0 !important;
    }

    /* 6. Fix Menu Burger (Visibilité et Position) */
    .mobile-nav-toggle {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .header__nav {
        background: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(15px) !important;
    }

    .nav__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .nav__link {
        font-size: 1.3rem !important;
        color: #fff !important;
        padding: 15px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* Fix spécifique pour les très petits écrans (iPhone SE, etc.) */
@media screen and (max-width: 480px) {
    .hero__title { font-size: 1.8rem !important; }
    .announcement-item { font-size: 0.54rem !important; letter-spacing: 0px !important; }
}



/* ============================================================
   FIX ULTIME MOBILE - JEFHIP DIGITAL 
   Cible les écrans jusqu'à 992px sans toucher au PC
   ============================================================ */

@media screen and (max-width: 992px) {
    /* 1. Reset Global Mobile */
    *, *::before, *::after {
        box-sizing: border-box !important; /* Force tout à rester dans le rectangle */
   border-radius: 0px;
 }

    :root {
        --header-h: 70px !important; /* On réduit drastiquement le header */
    }

    body {
        padding-top: calc(70px + var(--announcement-h)) !important;
        overflow-x: hidden; /* Empêche le site de bouger de gauche à droite */
    }

    /* 2. Fix Header & Logo (Évite le chevauchement) */
    .site-header.header-fixed {
        display: none;
        height: 70px !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .header__content {
        height: 70px !important;
        padding: 0 15px !important;
        border-bottom: 3px solid #f56a31 !important;
    }

    .header-icon-main {
        height: 50px !important; /* Logo réduit pour laisser de la place */
        margin: 0 !important;
        width: auto !important;
    }

    /* 3. Masquer le texte long du panier pour gagner de la place */
    .button-cart-header {
        margin-right: 55px !important;
        padding: 8px 10px !important;
    }
    .button-cart-header span:not(.cart-icon) {
        display: none !important; /* Garde juste l'icône 🛒 */
    }

    /* 4. REGLAGE HERO (L'image montre que le titre remonte trop) */
    .section-hero.container {
        padding: 40px 15px !important;
        min-height: auto !important;
        margin-top: 0 !important;
    }


    /* Cette règle s'applique uniquement aux téléphones */
@media (max-width: 480px) {

    /* 1. RESET GLOBAL : Empêche le débordement */
    * {
        box-sizing: border-box !important;
    }

    /* 2. SECTION HERO (Propulse ta vision) */
    .section-hero.container {
        padding: 100px 20px 40px 20px !important; /* On oublie les 270px de padding */
        min-height: auto;
    }

    .hero__title {
        font-size: 1.8rem !important; /* On réduit pour que ça tienne sur l'écran XR */
        line-height: 1.2;
    }

    .hero__cta {
        flex-direction: column; /* Empile les boutons */
        gap: 15px;
        width: 100%;
    }

    .btn-hero-main, .btn-hero-sub {
        width: 100% !important; /* Les boutons prennent toute la largeur */
        margin: 0;
    }

    /* 3. PREFOOTER (Construisons quelque chose) */
    .prefooter-inner {
        width: 95% !important;
        padding: 40px 20px !important;
        margin: 0 auto;
    }

    .changing-word8 {
        font-size: 1.5rem !important; /* Évite que le texte ne soit coupé */
    }

    .button-container {
        flex-direction: column !important; /* Boutons l'un sur l'autre */
        gap: 10px;
    }

    /* 4. FOOTER & CONTACT (L'infolettre) */
    .footer__container {
        grid-template-columns: 1fr !important; /* Une seule colonne au lieu de trois */
        text-align: center;
        padding: 0 20px;
    }



    @media screen and (max-width: 480px) {
    /* --- FIX GLOBAL MOBILE (iPhone XR & Co) --- */
    
    /* 1. VERROUILLAGE DE LA LARGEUR : Tue l'espace blanc */
    html, body {
        overflow-x: hidden !important;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box !important; /* Empêche les paddings de faire déborder les blocs */
    }

    /* 2. HERO SECTION : Propulse ta vision */
    .section-hero.container {
        padding: 80px 15px 40px 15px !important;
        text-align: center;
    }

    .hero__title {
        font-size: 1.8rem !important; /* Taille adaptée pour tenir sur une ligne */
        width: 100% !important;
    }

    .hero__cta {
        flex-direction: column !important; /* Empile les boutons "LES OFFRES" */
        gap: 12px;
    }

    /* 3. PREFOOTER : Construisons */
    .prefooter-inner {
        padding: 40px 20px !important; /* Réduit les 60px de côté qui cassent tout */
        width: 92% !important;
        margin: 0 auto !important;
        border-radius: 15px;
    }

    .button-container {
        flex-direction: column !important; /* "Acheter" et "Consulter" l'un sur l'autre */
    }

    .btn-jefhip {
        width: 100% !important;
        justify-content: center;
    }

    /* 4. FOOTER & CONTACT : L'infolettre */
    .footer__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column !important; /* Champ email au-dessus du bouton */
        width: 100%;
    }

    .newsletter-input {
        width: 100% !important;
        margin-bottom: 15px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }

    .newsletter-submit {
        width: 100% !important;
        margin: 0 !important; /* Enlève le décalage négatif qui crée du vide */
    }

    /* 5. ILLUSTRATIONS : Ne pas dépasser */
    .main-illustration, .main-illustration-shopify {
        max-width: 100% !important;
        height: auto !important;
    }
}

    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-input {
        width: 100% !important;
        font-size: 1rem !important;
        margin-bottom: 10px;
        text-align: center;
    }

    .newsletter-submit {
        margin-left: 0 !important; /* On centre le bouton */
        width: 100%;
    }
}

    .hero__text-content {

        margin-top: 10px !important; /* Supprime le -260px du PC */
        padding: 20px 0 !important;
        margin-left: 1px;
    }

    .hero__title {
        font-size: 1.8rem !important; /* Taille adaptée au téléphone */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .hero__description {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }





    /* ============================================================
   POSITIONNEMENT DU "X" (MENU OUVERT)
   ============================================================ */

@media screen and (max-width: 992px) {
    /* Cible le bouton burger UNIQUEMENT quand le menu est ouvert */
    .mobile-nav-toggle[aria-expanded="true"] {
                   position: fixed !important;
            top: 700px !important;
            left: 52% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            z-index: 11000 !important;
    }

    /* Optionnel : Ajuste l'icône X pour qu'elle soit plus visible au centre */
    .mobile-nav-toggle[aria-expanded="true"] .burger-icon span {
        background-color: var(--blanc) !important; /* Force le X en blanc sur fond noir */
        width: 35px !important; /* Légèrement plus grand pour le style */
    }
}






    /* 5. MENU BURGER - DESIGN INTERIEUR PROPRE */
    .header__nav {
        border: 1px solid #ffffff;
        background: #f56a31 !important;
        padding: 100px 90px 760px !important;
    }

    .nav__list {
      display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 540px;
        width: 100% !important;
    }


      .nav__link {
           display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 300px !important;
        min-height: 120px !important;
        padding: 15px 15px 15px 15px !important;
        font-size: 1.4rem !important;
        font-weight: 900 !important;
        background: #00000000 !important;
        border: 2px solid #403b3800 !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        position: relative !important;
        right: 0 !important;
    }

    /* 6. Fix des boutons Hero qui sont énormes sur tes photos */
    .hero__cta {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn-hero-main, .btn-hero-sub {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }
}



















































































































/* ============================================================
   SECTION AVIS CLIENTS (TESTIMONIALS) - STYLE ELITE 2026
   ============================================================ */

.section-testimonials {
    padding: 100px 40px;
    background-color: var(--gris-fond);
    text-align: center;
}

.testimonials-header {
    margin-bottom: 50px;
}

/* --- Badge Trustpilot --- */
.trustpilot-widget-custom {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--blanc);
    padding: 12px 25px;
    border-radius: 50px;
    border: 1px solid var(--gris-bordure);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
}

.tp-star-static {
    color: #00b67a; /* Vert Trustpilot */
    font-weight: 900;
    letter-spacing: 2px;
}

/* --- Grille des Avis --- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Carte Avis Individuelle --- */
.testimonial-card {
    background: var(--blanc);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--gris-bordure);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
}

/* Animation d'entrée au chargement */
.testimonial-card {
    animation: avisFadeInUp 0.8s ease backwards;
}

.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.4s; }

/* --- Étoiles Animées --- */
.testimonial-stars {
    color: #f56a31; /* Orange Jefhip */
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 3px;
    transition: transform 0.3s ease;
}

/* --- Effets Hover (Survol) --- */
.testimonial-card:hover {
    transform: translateY(-15px);
    border-color: var(--noir-pur);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

.testimonial-card:hover .testimonial-stars {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(245, 106, 49, 0.5));
}

/* Effet au clic (Active) */
.testimonial-card:active {
    transform: scale(0.98);
}

/* --- Texte et Auteur --- */
.testimonial-text {
    font-style: italic;
    color: #444;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--gris-bordure);
    padding-top: 20px;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: 0.3s ease;
}

.testimonial-card:hover img {
    filter: grayscale(0%);
}

.author-info strong {
    display: block;
    font-size: 1rem;
    color: var(--noir-pur);
}

.author-info span {
    font-size: 0.8rem;
    color: #888;
}

.verified-badge {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 0.65rem;
    color: #00b67a;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Animations Keyframes --- */
@keyframes avisFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Adaptation Mobile --- */
@media (max-width: 768px) {
    .section-testimonials {
        padding: 60px 20px;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}























/* --- BOUTON DE DÉFILEMENT INTELLIGENT JEFHIP --- */
#progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 55px;
    width: 55px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 300ms cubic-bezier(0.2, 1, 0.3, 1);
    background-color: #2e2e2e63; /* Fond noir Élite */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Apparition dynamique */
#progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Icône SVG personnalisée */
.arrow-custom {
       position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 96px;
    filter: invert(1);
    transition: all 200ms ease;
    z-index: 1;
}

/* Cercle de progression SVG */
.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.progress-circle path {
    fill: none;
    stroke: #c00809; /* Orange JEFHIP */
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 10ms linear;
}

/* Effet Hover (Survol) */
#progress-wrap:hover {
    transform: scale(1.1);
}

/* #progress-wrap:hover .arrow-custom {
    transform: translate(-50%, -65%); Petit saut vers le haut 
} */
























/* --- CHANGEMENT DE COULEUR DYNAMIQUE --- */

/* Filtre pour transformer l'icône blanche en orange JEFHIP (#f56a31)
#progress-wrap.active-orange .arrow-custom {
    filter: invert(48%) sepia(89%) saturate(1842%) hue-rotate(338deg) brightness(99%) contrast(93%) !important;
    transform: translate(-50%, -50%) scale(1.1); /* Petit effet de zoom quand elle change de couleur 
}

 Optionnel : pulsation de la bordure quand elle devient orange 
#progress-wrap.active-orange {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
} /*


































































/* --- SECTION STATS EXPERT (DESIGN 2026) --- */
.section-stats {
     padding: 120px 40px;
    background: #f56a31;
    position: relative;
    overflow: hidden;
    /* border-radius: 8px; */
    border: 0px solid #f56a31;
}

/* Lueur de fond subtile pour l'ambiance */
.section-stats::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 106, 49, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- CARTE STATISTIQUE LUXE --- */
.stat-item {
   background: #000;
    backdrop-filter: blur(10px);
    border: 4px solid #f56a31;
    border-radius: 24px;
    padding: 50px 30px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);

}

/* Bordure lumineuse au survol */
.stat-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px; /* épaisseur de la bordure */
    background: linear-gradient(135deg, transparent, rgba(245, 106, 49, 0.5), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.stat-item:hover {
    transform: translateY(-15px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.stat-item:hover::after {
    opacity: 1;
}

.stat-icon {
    font-size: 5rem; /* Augmentation significative de la taille */
    margin-bottom: 25px;
    display: inline-block;
    
    /* Couleur de base pour le vert fluo complet */
    color: #00ff00; 
    
    /* Ombre portée verte ajustée pour l'effet fluo */
    filter: drop-shadow(0 15px 20px rgba(0, 255, 0, 0.6));
    
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Changement de couleur spécifique pour les liasses de billets */
.stat-icon svg path[fill="#fff"] {
    fill: #ff0000; /* Les feuilles blanches deviennent rouges */
}

/* Effet au survol amélioré */
.stat-icon:hover {
    transform: scale(1.25); /* Agrandi de 25% au survol */
    filter: drop-shadow(0 20px 25px rgba(0, 255, 0, 0.8));
}

.stat-number {
    display: block;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 15px;
    font-family: 'Arimo', sans-serif;
    
    /* Applique ton dégradé doré sur le texte */
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}


    .stat-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.8; /* Légèrement plus visible pour le doré */
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* Application du dégradé Or sur le texte */
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Nécessaire pour que le background-clip fonctionne bien */
}

.stat-item:hover .stat-label {
    opacity: 1;
    color: var(--orange-jefhip);
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 768px) {
    .section-stats { padding: 80px 20px; }
    .stat-number { font-size: 3.2rem; }
    .stat-item { padding: 40px 20px; }
}
























































/* --- SECTION PORTFOLIO --- */
.section-portfolio {
       padding: 100px 20px;
    background-color: #c00809;
}


.project-showcase {
    margin-bottom: 0px;
    background: radial-gradient(circle at center, #747373 0%, var(--noir-pur) 100%);
}




.project-name1:hover {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    color: #ecdd13;
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}
.project-name1 {
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: var(--noir-pur);
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}
.project-name2 {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    color: var(--noir-pur);
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}


.project-name2:hover {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    color: #22a84f;
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}


.project-name3 {
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: var(--noir-pur);
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}


.project-name3:hover {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    color: #0e60d1;
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}

.project-name4 {
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: var(--noir-pur);
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}

.project-name4:hover {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #c10000;
    margin-bottom: 25px;
    border-left: 4px solid var(--orange-jefhip);
    padding-left: 15px;
}

/* Le conteneur du Swipe */
.swipe-container {
    width: 100%;
    overflow-x: auto; /* Active le swipe mobile */
    scroll-snap-type: x mandatory; /* Aimante les images au centre */
    scrollbar-width: none; /* Cache la scrollbar Firefox */
    -ms-overflow-style: none; /* Cache la scrollbar IE */
}

.swipe-container::-webkit-scrollbar {
    display: none; /* Cache la scrollbar Chrome/Safari */
}

.swipe-wrapper {
    display: flex;
    gap: 15px;
}

.swipe-slide {
    flex: 0 0 280px; /* Taille fixe sur mobile */
    scroll-snap-align: start;
}




.swipe-slide img:hover {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 4px solid #f56a31 !important;
    object-fit: cover;
    border-radius: 160px;
    display: block;
}




.swipe-slide img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force le CARRE parfait */
    object-fit: cover;
    border-radius: 12px;
   /* border: 1px solid var(--gris-bordure); */
    transition: var(--transition-pro);
}

.swipe-slide img:hover {
    transform: scale(1.02);
    border-color: var(--orange-jefhip);
}

/* Desktop : Plus d'images visibles */
@media (min-width: 992px) {
    .swipe-slide {
        flex: 0 0 calc(33.33% - 15px); /* 3 images par ligne sur PC */
    }
}














































/* Conteneur principal pour le projet JEFHIP DIGITAL */
.project-showcase {
    padding: 20px;
    background-color: #f9f9f9; /* Optionnel : fond léger pour faire ressortir le bloc */
    border-radius: 0px;
}

/* Groupe Titre : Aligne l'icône à GAUCHE du texte */
.title-wrapper {
    display: flex;         /* Active l'alignement horizontal */
    align-items: center;   /* Centre l'icône verticalement par rapport au texte */
    gap: 12px;             /* Crée un espace propre entre l'icône et le texte */
    margin-bottom: 20px;   /* Espace avant l'image du site */
}

/* Style spécifique pour l'icône jaune */
.title-wrapper i {
    font-size: 24px;       /* Taille de l'icône fa-code */
    flex-shrink: 0;        /* Empêche l'icône de s'écraser si le texte est long */
}

/* Style du titre CONNEXION PROFESSIONNELLE */
.project-name3 {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    margin: 0;             /* Supprime les marges par défaut pour un alignement parfait */
    color: #333;
    text-transform: uppercase;
}

/* Style de l'image (loginjefhipimg-removebg-preview.png) */
.swipe-slide img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;    /* Adoucit les bords de ta capture d'écran */
}














/* --- SECTION LOGO MARK --- */
.section-logomark {
    padding: 100px 20px;
    background-color: #f9f9f9;
    text-align: center;
    margin-top: -160px;
}

.logomark-header {
    margin-bottom: 60px;
}

.logomark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-item {
    background: #f8f8f8;
    border: 4px solid #f56a31;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--transition-pro);
    overflow: hidden;
}

/* Format carré parfait pour les logos officiels */
.logo-item img {
    width: 100%;
    max-width: 120px; /* Taille optimale */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain; /* Centre l'icône dans le carré */
   /* filter: grayscale(100%) opacity(0.5); Effet minimaliste par défaut */
    transition: var(--transition-pro);
}

.logo-label {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: #f56a31;
    transition: 0.3s ease;
}

/* --- EFFETS HOVER --- */
.logo-item:hover {
    transform: translateY(-10px);
    border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}



.logo-item:hover img {
    filter: grayscale(0%) opacity(1); /* Rétablit les couleurs officielles */
    transform: scale(1.1);
}

.logo-item:hover .logo-label {
    color: #f56a31;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
}

/* Adaptation Mobile */
@media (max-width: 768px) {
    .logomark-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur mobile */
        gap: 20px;
    }
    .logo-item { padding: 30px 20px; }
}











































/* --- CONFIGURATION ALBUM CENTRE UNIQUE --- */

.swipe-container {
    width: 100%;
    max-width: 500px; /* Taille optionnelle pour PC */
    margin: 0 auto;   /* Centre le bloc complet sur la page */
    overflow: hidden; /* Empêche de voir l'image de droite avant le swipe */
    overflow-x: auto; /* Autorise le balayage manuel */
    scroll-snap-type: x mandatory; /* Force l'image à se caler pile au milieu */
    scrollbar-width: none; 
    border-radius: 20px;
    -webkit-overflow-scrolling: touch;
}

.swipe-container::-webkit-scrollbar {
    display: none;
}

.swipe-wrapper {
    display: flex;
    gap: 0; /* Supprime tout espace pour un effet "sous la pile" */
}

.swipe-slide {
    flex: 0 0 100%; /* Force chaque image à prendre 100% de la largeur du cadre */
    width: 100%;
    scroll-snap-align: center; /* Verrouille l'image pile au centre de l'écran */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swipe-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Format carré parfait demandé */
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

































.network-section {
    padding: 80px 10%;
    background-color: #fff;
    overflow: hidden;
}

.network-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.network-tag {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1px;
    color: #333;
    text-transform: uppercase;
}

.network-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 20px 0;
    font-weight: 700;
    color: #000;
}

.network-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    max-width: 500px;
}

.network-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.globe-img {
  width: 100%;
    padding-right: 390px;
    margin-bottom: -80px;
    margin-top: -400px;
    max-width: 900px;
    margin-left: 560px;
    height: auto;
   filter: hue-rotate(25deg) saturate(3.8) brightness(1.1);
    transition: filter 0.4s ease; /* filter: hue-rotate(100deg) saturate(3) brightness(1.2); */
}

/* Adaptation Mobile */
@media (max-width: 900px) {
    .network-container {
        flex-direction: column;
        text-align: center;
    }
    .network-title {
        font-size: 2.5rem;
    }
}


































.network-cta {
    margin-top: 30px;
}

.btn-jefhip {
       display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 22px;
    border: 1.4px solid #49433f;
    border-radius: 10px;
    text-decoration: none;
    color: #49433f;
    font-weight: 600;
    transition: all 0.3s ease;
}

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

/* Effet au survol : Fond noir et flèche qui bouge */
.btn-jefhip:hover {
    background-color: #00000000;
    color: #c00809; /* Rappel du vert fluo de ton icône */
    transform: translateY(-2px);
    border-radius: 20px;
    border-color: #c00809;
}

.btn-jefhip:hover svg {
    transform: translateX(5px); /* La flèche se déplace vers la droite */
}

















































html {
    scroll-behavior: smooth;
}




/* Variables de couleurs JEFHIP */
:root {
    --jefhip-orange: #f56a31;
    --jefhip-green: #f56a31; /* La couleur de ta ligne dans l'inspecteur */
}

.jefhip-prefooter {
    background-color: #f9f9f9;
    padding: 100px 20px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.prefooter-inner {
    position: relative;
    width: 100%;
    max-width: 1100px;
    background: #1a1c1e;
    border-radius: 24px;
    padding: 80px 60px;
    border: 1px solid #333;
    /* Important pour laisser passer la ligne sur les bords */
    overflow: visible; 
}

/* --- LA PETITE LIGNE QUI FAIT LE TOUR (PROGRESSION) --- */
._animation_nja4g_117:before {
    content: "";
    position: absolute;
    /* Dimensions du curseur qui bouge */
    width: 60px; 
    height: 3px;
    background-color: #c00809;
    z-index: 10;
    
    /* Chemin rectangulaire suivant le border-box du parent */
    offset-path: border-box; 
    
    /* Animation liée au scroll (Scroll-Driven Animation) */
    animation: _path-follow_nja4g_1 linear;
    animation-timeline: view();
    /* La ligne fait le tour complet entre l'entrée et la sortie de l'écran */
    animation-range: entry 0% exit 100%;
}

@keyframes _path-follow_nja4g_1 {
    from {
        offset-distance: 0%;
    }
    to {
        offset-distance: 100%;
    }
}



:root {
    /* Dégradé signature JEFHIP */
    --gold-gradient: linear-gradient(90deg, #f56a31, #ff9d76, #f56a31);
    --shine-color: rgba(255, 255, 255, 0.4);
}

.heading {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 50px;
    background: #1a1c1e; /* Fond noir profond pour faire ressortir l'or */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #c00809;
    z-index: 1;
}

/* --- L'EFFET DE BRILLANCE QUI SUIT LA SOURIS --- */
.heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Utilise les variables du JS pour le centre du halo */
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(245, 106, 49, 0.4) 0%, 
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

/* --- EFFET DE REMPLISSAGE (FILLING) AU HOVER --- */
.heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Commence vide */
    transition: height 0.4s ease;
    z-index: -2;
}

/* --- ACTIONS AU SURVOL --- */
.heading:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 25px#c00809;
    border-color: #c00809;
    color: #ffffff; /* Le texte devient noir sur fond or */
}

.heading:hover::before {
    opacity: 1;
}

.heading:hover::after {
    height: 100%; /* Remplissage complet */
}

/* Effet au clic (Toucher 3D) */
.heading:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(245, 106, 49, 0.2);
}

.description {
    color: #888;
    margin-top: 20px;
    font-size: 1.2rem;
    text-align: center;
    transition: color 0.3s;
}

.heading:hover + .description {
    color: #fff; /* La description s'illumine quand on survole le titre */
}



.heading:hover { color: #c00809; font-size: 2.3rem; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; border-radius: 14px;  color: #c00809; -webkit-text-fill-color: #ffffff; }

/* Styles de texte */
.heading { color: #fff; font-size: 2.3rem; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; background: #c00809; border-radius: 40px;color: #c00809; -webkit-text-fill-color: #fff; }
.description { color: #888; margin-bottom: 30px; font-size: 1.2rem; text-align:center; }

/* --- BOUTONS --- */
.button-container { display: flex; gap: 20px; justify-content: center; }

.btn-jefhip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 12px; /* État initial */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-solid { 
    background: #c00809; 
    color: #fff; 
    border: 2px solid #c00809; 
}

.btn-outline { 
    border: 2px solid #c00809; 
    color: #ffffff; 
}

/* EFFET HOVER (Bouton Pilule + Border) */
.btn-jefhip:hover {
    border-radius: 50px; /* Devient arrondi comme un bouton pilule */
    transform: translateY(-5px);
}

.btn-solid:hover {
    background: transparent;
    color: #fff;
}

.btn-outline:hover {
    background: #c00809;
    color: #fff;
}

.arrow-icon { width: 1.2em; height: 1.2em; transition: transform 0.3s ease; }
.btn-jefhip:hover .arrow-icon { transform: translateX(5px); }

/* Support pour les anciens navigateurs */
@supports not (animation-timeline: view()) {
    ._animation_nja4g_117:before {
        display: none;

    }
}















































:root {
    --jefhip-orange: #f56a31;
    --row-gap-standard: 30px;
    --border-radius-buttons: 8px;
    --main-color-contrast-variant: #f56a31;
    --line-height-text: 1.6;
}

/* --- SECTION & CONTAINER --- */
#section-contact {
    background-color: #1a1c20; /* Gris très foncé comme ton image */
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

#brxe-yknijn {
    row-gap: var(--row-gap-standard);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
}

.brxe-heading {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.brxe-text p {
    color: #e0e0e0;
    font-size: 1.1rem;
    max-width: 800px;
}

/* --- BOUTONS STANDARDS --- */
#brxe-xoqpdc {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.button-standard.brxe-button {
    background-color: var(--jefhip-orange);
    border-radius: var(--border-radius-buttons);
    padding: 12px 22px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.08);
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    line-height: var(--line-height-text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.5s ease-in;
    transform: scaleY(0.98);
}

.button-standard.brxe-button:hover {
    transform: translateY(-5px) scaleY(1.04);
    background-color: #e05a26; /* Version un peu plus sombre de ton orange */
}

/* --- EFFET SPÉCIFIQUE SUR LE BOUTON FORMULAIRE --- */
#brxe-hcsydl {
    height: 50px;
    width: 50px; /* État fermé */
    overflow: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    padding-left: 15px;
    transition: width 0.5s ease;
}

#brxe-hcsydl:hover {
    width: 17rem; /* S'élargit pour montrer le texte au survol */
}

/* --- SVG DÉCORATIF --- */
.fake-fixed-bg {
    position: absolute;
    right: -100px;
    bottom: -50px;
    width: 500px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

/* Icônes */
.button-standard i {
    font-size: 1.2rem;
}

/* TRANSITIONS GLOBALES (700ms) */
div, html, body, section, a {
    transition-property: background-color, border-color, outline;
    transition-duration: 700ms;
}





















/* --- LA BARRE RESTE À SA PLACE (PAS DE TRANSLATE) --- */
.announcement-bar {
    background-color: #c00809; /* Bleu marine profond */
    color: #ffffff;
    padding: 0px 0;
    text-align: center;
    border-bottom: 0px solid #c00809; /* Ta signature rouge */
    z-index: 1000;
}

/* --- LE STYLE DU TEXTE BOLD --- */
.announcement-item {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0px 0;
    gap: 10px;
}

/* --- L'ANIMATION DU SOULIGNEMENT --- */
.promo-highlight {
    text-decoration: none;
    text-decoration-color: #ffffff; /* Départ en blanc */
    text-decoration-thickness: 2px;
    
    /* POSITION INITIALE DU SOULIGNEMENT */
    text-underline-offset: 1px; 
    
    /* TRANSITION FLUIDE DE L'OFFSET ET DE LA COULEUR */
    transition: text-underline-offset 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                text-decoration-color 0.3s ease;
}

/* --- AU HOVER : SEUL L'OFFSET CHANGE --- */
.announcement-bar:hover .promo-highlight {
    text-underline-offset: 6px; /* Le trait descend seul de 8px */
    text-decoration-color: #ffffff; /* Le trait devient rouge CNL */
}

/* --- ACCENTS --- */
.discount { color: #fff; font-weight: 400; text-decoration: none !important; }
.brand { color: #ffffff; box-shadow:(4px, 7px, 8px, 8px) #000; text-shadow: #000; }
.brand2 { color: #ffffff; box-shadow:20px #000; text-shadow: #000; }
.click-call { color: #e1ff00; font-style: italic; text-decoration: none; }




/* --- STYLE DU TEXTE GLOBAL --- */
.announcement-item {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff;
}

/* --- L'ÉLÉMENT SOULIGNÉ (S'ARRÊTE APRÈS LES :) --- */
.promo-highlight {
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 3px;
    text-underline-offset: 2px; /* Position de départ */
    
    /* Transition fluide demandée */
    transition: text-underline-offset 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                text-decoration-color 0.3s ease;
    display: inline-block; /* Crucial pour l'animation de l'offset */
}

/* --- LA PARTIE SANS SOULIGNEMENT --- */
.discount-bold {
    color: #ffffff; /* Ton rouge CNL */
    text-decoration: none !important;
    margin-left: 5px;
    font-weight: 400;
}

/* --- AU HOVER : SEUL L'OFFSET DES "VIGUEURS :" DESCEND --- */
.announcement-bar:hover .promo-highlight {
    text-underline-offset: 6px; /* La barre descend seule */
    text-decoration-color: #ffffff; /* Elle devient rouge CNL */
}


#contact-jefhip {
   background-color: #c00809; /* background-color: #1a1c1e; */
    color: #ffffff;
    padding: 80px 3%;
    position: relative;
    overflow: hidden;
    display: flex;
    border-bottom-left-radius: 40px;
    align-items: center;
    min-height: 500px;
    font-family: 'Segoe UI', sans-serif;
}






/* --- Cible uniquement les écrans de moins de 768px (Mobile/Tablette) --- */
@media screen and (max-width: 768px) {

    /* 1. DISPARITION DE LA BULLE MESSENGER */
    .contact-bg-phone {
        display: none !important;
    }

    /* 2. VERROUILLAGE DE LA LARGEUR (Empêche l'espace blanc à droite) */
    html, body {
        overflow-x: hidden !important;
        width: 100vw;
        position: relative;
    }

    /* 3. RÉDUCTION DES PADDINGS DU PREFOOTER (Tes 60px cassent l'écran) */
    .prefooter-inner {
        padding: 40px 20px !important; /* On passe de 60px à 20px pour que ça rentre */
        width: 95% !important;
    }
}







.contact-container {
    position: relative;
    z-index: 10;
    max-width: 800px;
}

.contact-title {
    font-size: 1.88rem;
    font-weight: 900;
    margin-left: 8px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contact-buttons {
    display: flex;
    gap: 4px;
    margin-top: 30px;
    margin-left: 10px;
}
/* Boutons Noirs par défaut */
.btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c00809;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover et État Actif Orange */
.btn-item:hover, .btn-item.active {
    background-color: #c00809;
    border-radius: 50px;
    transform: translateY(-5px);
}

.icon-svg {
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1); /* Icônes blanches */
}

/* Zone de Message */
.message-box {

    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    max-width: 690px;
    border-left: 4px solid #c00809;
    border-radius: 0 8px 8px 0;
    min-height: 60px;
    display: flex;
    align-items: center;
}
.message-text {
    font-size: 1.2rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

/* Image de fond téléphone */
.contact-bg-phone {
    position: absolute;
    right: 4%;
    top: 50%;
    /* On garde ton inclinaison de base et on ajoute l'animation */
    transform: translateY(-50%) rotate(-10deg);
    width: 300px;
    opacity: 0.90;
    pointer-events: none;
    
    /* Lancement de l'animation : 6 secondes pour un cycle fluide */
    animation: phoneFloat 6s ease-in-out infinite;
   filter: drop-shadow(0 0 25px rgba(192, 8, 9, 0.6));
}

@keyframes phoneFloat {
    0% {
        transform: translateY(-70%) rotate(-10deg);
    }
    50% {
        /* Le téléphone monte légèrement et s'incline un peu plus */
        transform: translateY(-55%) rotate(-13deg);
    }
    100% {
        transform: translateY(-50%) rotate(20deg);
    }
}
.contact-bg-phone img {
    width: 100%;
    /* Lueur rouge intense #c00809 avec boost de luminosité */
    filter: drop-shadow(0 0 15px #c00809) brightness(1.1);
    
    /* Optimisations techniques */
    display: block;
    user-select: none;
    pointer-events: none; /* Évite de pouvoir glisser l'image */
    -webkit-user-drag: none;
    
    /* Rendu net même si l'image est redimensionnée */
    image-rendering: -webkit-optimize-contrast;
}


































































































.project-showcase {
    background-color: #2c3136; /* Gris sombre du projet */
    color: #ffffff;
    padding: 100px 8%;
    display: flex;
    align-items: center;
    min-height: 600px;
    font-family: 'Inter', sans-serif;
}

.project-container {
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.project-content { flex: 1.2; }
.project-visual { flex: 0.8; display: flex; justify-content: center; }

/* Titre et Badges */
.company-name { font-size: 3.8rem; font-weight: 900; margin: 0; }
.service-tag { font-size: 0.70rem; font-weight: 700; margin: 10px 0 30px; padding: 0px 40px 0px 40px; opacity: 0.8; text-align: center; }

.tech-badges { display: flex; gap: 15px; margin-bottom: 40px; justify-content: center; }

.badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 800;
}

.badge-wp { background-color: #f56a31; } /* Bleu WordPress */
.badge-custom { background-color: #eeeeee; color: #212121; }

/* --- FILTRE POUR RENDRE LES ICONES BLANCHES --- */
.svg-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1); /* Transforme le noir en blanc */
}

/* Description */
.description   { 
    line-height: 2.8;
    font-size: 1.7rem;
    margin-bottom: 4px;
    text-align: center;
    color: #fff;
    opacity: 0.9;
}

/* Boutons d'action */
.action-links { display: flex; gap: 15px; justify-content: center; align-items: center;}

.btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f56a31;
    padding: 14px 20px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-link:hover {
    background-color: #f56a31; /* Ton orange au survol */
    transform: translateY(-5px);
    border-radius: 40px;
    box-shadow: 0 10px 20px rgba(245, 106, 49, 0.2);
}

/* Illustration Droite */
.main-illustration {
    width: 100%;
    max-width: 480px;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.3));
    transition: transform 0.5s ease;
}

/* Mobile */
@media (max-width: 900px) {
    .project-container { flex-direction: column; text-align: center; }
    .tech-badges, .action-links { justify-content: center; flex-wrap: wrap; }
    .main-illustration { max-width: 300px; margin-top: 40px; }
}




.svg-icon2 {
    width: 22px;
    height: 22px;
}



.svg-icon3 {
    width: 22px;
    height: 22px;
}


.svg-icon4 {
    width: 22px;
    height: 22px;
}


.badge-wp3 {
    background-color: #00ff0095;
}


.badge-custom3 { background-color: #eeeeee; color: #212121; }




.badge-wp4 {
    background-color: #c00809;
}


.badge-custom4 { background-color: #eeeeee; color: #212121; }


.main-illustration-shopify {
       width: 100%;
    max-width: 480px;
  
    transition: transform 0.5s ease;
}






















































:root {
    --jef-orange: #f56a31;
    --jef-black: #0f1113;
    --jef-glass: rgba(255, 255, 255, 0.03);
}

.jef-album-experience {
   /* background: radial-gradient(circle at center, #2c3136 0%, #0f1113 100%); */
    padding: 100px 20px;
    display: flex;
    background: #f9f9f9;
    justify-content: center;
}

.jef-glass-card {
    background: #00000000;
   /*  backdrop-filter:  blur(20px); */
    border: 0px solid rgba(235, 109, 6, 0.1);
    border-radius: 40px;
    padding: 50px;
    max-width: 900px;
    width: 100%;
    margin-top: -90px;
    margin-bottom: 60px;
    text-align: center;
    box-shadow: 0 40px 100px rgb(215 112 10 / 0%);
}

.jef-header-title {
    display:none;
       color: #f56a31;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 4px;
    margin-bottom: 40px;
    font-family: math;
    font-weight: 900;
   /* text-shadow: 0 0 15px rgba(0, 0, 0, 0.3); */
}

/* Le Simulateur de Smartphone */
.jef-device-container {
    position: relative;
    width: 280px;
    height: 560px;
    margin: 0 auto;
    background: #000000b4;
    border-radius: 45px;
    border: 12px solid #c00809;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05), inset 0 0 20px rgb(0, 0, 0);
}

/* Effet de brillance rare */
.jef-device-shine {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    z-index: 5;
    pointer-events: none;
}

.jef-swipe-engine {
    display: flex;
    height: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
}

.jef-swipe-engine::-webkit-scrollbar { display: none; }

.jef-slide {
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}



.footer-newsletter-text:hover::after {
    width: 100%; /* Le trait apparaît au survol */
}

/* Création du soulignement de 3px */
.footer-newsletter-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Caché au départ */
    height: 3px; /* Épaisseur demandée */
    background-color: #c00809;
    transition: width 0.3s ease; /* Animation de gauche à droite */
}

.jef-slide img {
    width: 85%;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Pagination Moderne */
.jef-pagination-system {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: -120px;
}

.footer-newsletter-text:hover {
    color: #c00809 !important; /* Change le texte en orange au survol */
}

.jef-dot {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.jef-dot.active {
    background: var(--jef-orange);
    width: 35px; /* Expansion fluide */
    box-shadow: 0 0 0px rgba(245, 106, 49, 0.6);
}






.jef-device-container {
    position: relative;
    width: 280px;
    height: 560px;
    margin: 0 auto;
    background: #000000b4;
    border-radius: 45px;
    border: 12px solid #c00809;
    overflow: hidden; /* Important : garde le reflet à l'intérieur */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05), inset 0 0 20px rgb(0, 0, 0);
}

/* L'EFFET DE BRILLANCE */
.jef-device-container::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%; /* Position de départ (caché à gauche) */
    width: 200%;
    height: 200%;
    
    /* Le dégradé blanc transparent */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: rotate(30deg); /* Inclinaison du reflet */
    pointer-events: none;     /* Permet de cliquer à travers le reflet */
    z-index: 10;              /* Passe par-dessus les images */
    
    /* Lancement de l'animation */
    animation: jef-shine-effect 6s infinite ease-in-out;
}

/* L'ANIMATION */
@keyframes jef-shine-effect {
    0% {
        left: -150%;
    }
    20% {
        left: 100%; /* Le reflet traverse l'écran */
    }
    100% {
        left: 100%; /* Temps de pause avant de recommencer */
    }
}
/* 4. On s'assure que l'image reste bien en dessous */
.jef-landscape-version .jef-slide img {
    position: relative;
    z-index: 1;
    display: block;
}



#testimonials-jefhip {
    background-color: #f9f9f9;
    color: #000;
    padding: 100px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    text-align: center;
    margin-top: 40px;
}

.testimonials-header {
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-top: -160px;
    color: #f56a31;
    text-transform: uppercase;
    margin-bottom: 20px;
}


.section-title9 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #c00809;
    font-family: math;
    text-transform: uppercase;
    margin-bottom: 20px;
}


.section-title7 {
    font-size: 0.9rem;
    font-weight: 900;
    color: #c00809;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: dotted;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Trustpilot Style */
.tp-logo {
    max-width: 170px;
    padding: 20px 20px;
    border-radius: 900px;
    margin-left: 160px;
    height: auto;
    margin-bottom: 0px;
    margin-top: -114px;
}

.tp-stars-main {
    color: #00b67a; /* Vert Trustpilot officiel */
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.tp-text {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Grille de cartes */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: rgb(255, 255, 255);
    border: 4px solid #c00809;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: #c00809; /* Accent orange Jefhip */
    border: none;
}


.testimonial-card:active {
    transform: translateY(-10px);
    border-color: #c00809; /* Accent orange Jefhip */
    border: 4px solid #c00809;
}

/* Étoiles centrées et dorées */
.stars-large {
      color: #ffc107;
    margin-top: 6px;
    margin-left: 26px;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.testimonial-icon {
    font-size: 2.5rem;
    color: #c00809;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Annule l'effet de zoom, de rotation et remet l'opacité à 100% */
.jef-slide img {
    transform: none !important;
    opacity: 1 !important;
    border-radius: 14px;
    filter: none !important;
}


/* --- RÉINITIALISATION DES IMAGES DANS LE SLIDER --- */

.jef-slide img {
    /* Écrase le scale(0.8) et la rotation(-5deg) */
    transform: none !important; 
    
    /* Écrase l'opacity: 0.5 pour rendre l'image nette */
    opacity: 1 !important; 
    
}



/* Cache le header complet avec une transition */
.site-header.header-fixed.header-disparu {
    transform: translateY(-100%); /* Le pousse vers le haut */
    opacity: 0;
    pointer-events: none; /* Empêche de cliquer sur un menu invisible */
    transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Style de base pour assurer la transition au retour */
.site-header.header-fixed {
    transition: transform 0.4s ease, opacity 0.3s ease;
    will-change: transform;
}

/* Fix pour la barre au cas où elle dépasse d'un pixel avant de disparaître */
.header__content::after {
    width: var(--charge-width) !important;
    max-width: 22.981275599765947% !important;
}


.testimonial-text {
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
    min-height: 100px;
}

.author-box {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.author-name {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
}

.author-role {
    display: block;
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 4px;
}

.verified-badge {
      margin-top: 36px;
    font-size: 0.6rem;
    margin-right: 20px;
    font-weight: 900;
    color: #00b67a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 768px) {
    .section-title { font-size: 0.98rem; }
    .stars-large { font-size: 1.5rem; }
}



































.cookie-bubble {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 999999;
    transition: all 0.4s ease-in-out; /* Animation de 0.4 seconde */
    opacity: 1;
    visibility: visible;
}

/* Classe qui sera ajoutée par le JavaScript */
.cookie-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Petit effet de descente à la disparition */
}


:root {
    --jef-orange: #f56a31;
    --jef-dark: #1a1c1e;
}

/* --- BULLE FLOTTANTE --- */
#jef-cookie-launcher {
    position: fixed;
    bottom: 30px;
    left: 70px;
    width: 60px;
    height: 60px;
    background: #fff;
    border: 2px solid var(--jef-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

#jef-cookie-launcher:hover { transform: scale(1.1); }

.jef-cookie-icon { width: 35px; height: 35px; }

/* --- CARTE DE CONSENTEMENT --- */
.jef-cookie-card {
    position: fixed;
    bottom: 100px;
    left: 30px;
    width: 380px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    z-index: 999998;
    overflow: hidden;
    font-family: -apple-system, system-ui, sans-serif;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.jef-cookie-card.hidden {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    pointer-events: none;
}

.jef-cookie-header {
    background: var(--jef-dark);
    color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.jef-logo-container img { width: 40px; filter: brightness(0) invert(1); }

.jef-title-box h3 { margin: 0; font-size: 1.1rem; }
.jef-subtitle { font-size: 0.75rem; opacity: 0.7; }

.jef-close-btn {
    position: absolute;
    right: 15px; top: 15px;
    background: none; border: none; color: #fff;
    font-size: 1.5rem; cursor: pointer;
}

.jef-cookie-body { padding: 25px; }

.jef-main-message { font-size: 0.9rem; color: #444; margin-bottom: 20px; line-height: 1.5; }

/* --- CATEGORIES & SWITCHES --- */
.jef-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.jef-cat-info strong { display: block; font-size: 0.95rem; }
.jef-cat-info span { font-size: 0.75rem; color: #888; }

/* Switch Style Apple */
.jef-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.jef-switch input { opacity: 0; width: 0; height: 0; }

.jef-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e4e4e7;
    transition: .4s;
    border-radius: 34px;
}

.jef-slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .jef-slider { background-color: var(--jef-orange); }
input:checked + .jef-slider:before { transform: translateX(20px); }

/* --- FOOTER --- */
.jef-cookie-footer { padding: 30px; background: #fafafa; margin-top: -60px; margin-bottom: 50px;}

.jef-links { margin-bottom: 15px; display: flex; gap: 420px; }
.jef-links a { font-size: 0.7rem; color: #666; text-decoration: none; }
.jef-links a:hover { color: var(--jef-orange); }

.jef-buttons-group { display: flex; gap: 10px; }

.jef-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.jef-btn-accept { background: var(--jef-orange); color: #fff; }
.jef-btn-deny { background: #f1f1f1; color: #333; }

.jef-btn:hover { filter: brightness(1.1); }

















/* 1. L'OVERLAY : Fond flou blanc futuriste */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.4); /* Blanc translucide */
    backdrop-filter: blur(15px); /* Effet de flou intense */
    -webkit-backdrop-filter: blur(15px);
    display: none; /* Masqué par défaut */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Au-dessus de tout */
    overflow: hidden;
}

/* 2. LE SPINNER : Anneau Orange Néon */
.orange-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(245, 106, 49, 0.1); /* Orange très pâle */
    border-top: 3px solid #f56a31; /* Ton orange Jefhip vif */
    border-right: 3px solid #f56a31;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(245, 106, 49, 0.8)); /* Éclat néon */
    animation: spinFutur 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}




/* --- Style pour Mobile (Écrans de moins de 480px) --- */
@media screen and (max-width: 480px) {
    .footer__nav-list a {
        /* On augmente légèrement pour la lisibilité sur XR */
        font-size: 0.75rem !important; 
        font-weight: 900;
        
        /* On ajoute du padding pour faciliter le clic tactile */
       /* padding: 8px 0; */
        display: inline-block;
        
        /* On s'assure que le texte ne déborde pas */
        letter-spacing: 0.2px;
    }

    /* Optionnel : Espacer les éléments de la liste pour éviter les clics accidentels */
    .footer__nav-list li {
        margin-bottom: 0px;
    }
}


/* --- EFFET HOVER ORANGE SUR L'INFOLETTRE --- */

.footer-newsletter-text {
    transition: all 0.3s ease; /* Transition douce pour la couleur */
    position: relative;
    display: inline-flex; /* Permet au soulignement de s'ajuster à la taille du texte */
    padding-bottom: 5px;  /* Espace pour le soulignement */
}



/* 3. L'ANIMATION : Rotation fluide */
@keyframes spinFutur {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 4. ÉTAT ACTIF */
.loading-overlay.active {
    display: flex;
}




.description-packs {
    line-height: 2;
    font-size: 0.90rem;
    margin-top: 4px;
    margin-bottom: 30px;
    text-align: center;
    color: #fff;
}

.contact-desc9 { 
    color: #fff;
    grid-gap: revert;
    text-align: left;
    margin-bottom: 30px;
    padding: 20px 0px 20px 4px;
    margin-left: 6px;
    font-weight: 600;
    font-size: 15.40px;
    flex-direction: row;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.contact-desc9:hover { 
align-items: left; color: #ffffff; font-weight: 600; text-decoration: underline 4px #c00809;

}







transitions style {
    color: rgb(205, 91, 67);
}
element.style {
    transition: color 1000ms;
}
* {
    -webkit-tap-highlight-color: rgba(255, 105, 72, 0.2);
}



















:root {
    --jef-orange: #f56a31; /* Ton orange de référence */
    --jef-dark: #f56a31;
}

/* Bulle Flottante Haute Performance */
#jef-cookie-launcher {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 65px;
    height: 65px;
    background: #ffffff;
    border: 3px solid var(--jef-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#jef-cookie-launcher:hover { transform: scale(1.1) rotate(15deg); }

.jef-cookie-icon { width: 68px; height: 49px; }

/* Carte de Consentement Glassmorphism */
.jef-cookie-card {
    position: fixed;
    bottom: 10px;
    left: 520px;
    width: 700px;
    height: 490px;
    background: #f9f9f9;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    text-color: #f56a31;
    overflow: hidden;
    font-family: 'Inter', -apple-system, sans-serif;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jef-cookie-card.hidden {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    pointer-events: none;
}

.jef-cookie-header {
    background: var(--jef-dark);
    color: #ffffff;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

















































/* --- SECTION RÉSEAU --- */
.jefhip-network-section {
    padding: 100px 8%;
    background-color: #ffffff;
    overflow: hidden;
}

.jefhip-network-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
}

/* --- TYPOGRAPHIE ET BOUTON 3D --- */
.jefhip-network-text-block { flex: 1; }


.jefhip-network-tag {
    padding: 0px 40px;
    font-weight: 800;
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 24.9px;
    margin-left: -40px;
    color: #c00809;
    text-transform: Normal;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: block;
}





.jefhip-network-title {
    font-size: 2.2rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 1200;
    font-family:math;
    line-height: 1.1;
    margin-bottom: 34px;
    color: #000;
}


.jefhip-network-description {
    font-size: 1.1rem;
    text-align: center;
    margin-left: 20px;
    line-height: 1.6;
    color: #555;
    max-width: 520px;
    margin-bottom: 35px;
}

/* Style par défaut (Mobile) : On garde un alignement propre sans la grosse marge */
.jefhip-btn-interactive {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px; /* Un peu plus petit pour mobile */
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 0px #c00809;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- CONFIGURATION PC UNIQUEMENT (Écrans > 1024px) --- */
@media screen and (min-width: 1025px) {
    .jefhip-btn-interactive {
        margin-left: 130px; /* La marge de 90px s'active ici */
        padding: 18px 35px; /* Taille premium sur PC */
    }

    .jefhip-btn-interactive:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 6px 0px #c00809;
        background: #111;
    }
}

.jefhip-btn-interactive:hover {
    background: #c00809;
    border-radius: 80px;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px #c00809;
}

.jefhip-btn-interactive:active {
    transform: translateY(0px);
    box-shadow: 0 0px 0px #333;
}

/* --- GLOBE 3D ET LIGNES ENGLOBANTES --- */
.jefhip-network-visual-block {
    flex: 1.4;
    display: flex;
    justify-content: center;
    position: relative;
}

.jefhip-globe-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 750px; /* Globe agrandi */
    transform-style: preserve-3d;
}

.jefhip-globe-img {
    width: 100%;
    height: auto;
    /* filter: hue-rotate(25deg) saturate(3.8) brightness(1.1); /* Filtre expert */
    animation: globeFloat 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes globeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1.5deg); }
}

/* --- OVERLAY LIGNES (Effet Englobant) --- */
.jefhip-lines-overlay {
    position: absolute;
    top: 48%;
    left: 50%;
    width: 700%;
    height: 90%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 8;
}

.jefhip-svg-engine {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.jefhip-path-static {
    stroke: #7E736D;
    stroke-width: 1.5;
    opacity: 0.12;
    fill: none;
}

.jefhip-path-flow, .jefhip-path-flow-delayed {
    fill: none;
    stroke: #c00809;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 100, 900;
    filter: drop-shadow(0 0 12px #c00809); /* Glow intense */
    animation: jefhipDataRun 4.5s linear infinite;
}

.jefhip-path-flow-delayed {
    animation-delay: -2.2s;
    stroke: #c00809; /* Ligne jaune néon pour le croisement */
    filter: drop-shadow(0 0 12px #c00809);
}

@keyframes jefhipDataRun {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .jefhip-network-container { flex-direction: column; text-align: center; }
    .jefhip-network-description { margin: 0 auto 30px; }
    .jefhip-lines-overlay { width: 110%; height: 110%; }
}




.jef-logo-container img { width: 45px; filter: brightness(0) invert(1); }

.jef-title-box h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.jef-subtitle { font-size: 0.8rem; color: #c00809; font-weight: 600; }
.jef-cookie-body { padding: 30px; }


.jef-main-message { font-size: 1.05rem; color: #4b5563; line-height: 1.6; margin-bottom: -10px; }

/* Switch Apple-Style */
.jef-switch { position: relative; width: 50px; height: 26px; }
.jef-switch input { opacity: 0; width: 0; height: 0; }
.jef-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #d1d5db; border-radius: 34px; transition: .4s;
}
.jef-slider:before {
    position: absolute; content: ""; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .4s;
}
input:checked + .jef-slider { background-color: #c00809; }
input:checked + .jef-slider:before { transform: translateX(24px); }

.jef-cat-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 0; border-bottom: 1px solid #c00809;
}

.jef-cookie-footer { padding: 25px; background: #f9fafb;  margin-top: -60px;}

.jef-btn-accept { background: #c00809; color: white; border: none; font-weight: 700; flex: 1.5; padding: 14px; border-radius: 14px; cursor: pointer; transition: 0.3s; }
.jef-btn-deny { background: #e5e7eb; color: #374151; border: none; font-weight: 600; flex: 1; padding: 14px; border-radius: 14px; cursor: pointer; transition: 0.3s; }

.jef-btn-accept:hover { background: #d45625; transform: translateY(-2px); }









/* --- Fix Alignement Icônes de Liste Jefhip --- */
.product-features ul {
    list-style: none; /* Enlève les puces par défaut */
    padding: 0;
    margin: 0 0 40px 0; /* Respecte la marge du bas détectée */
}

.product-features li {
    display: flex; /* Active Flexbox */
    align-items: flex-start; /* Aligne l'icône sur le haut du texte s'il y a plusieurs lignes */
    gap: 15px; /* Espace précis entre l'icône et le texte */
    margin-bottom: 12px; /* Espacement vertical entre les éléments */
    
    /* Nettoyage des anciens styles conflictuels */
    position: static; 
    padding-left: 0;
    
    /* Police et couleur d'origine */
    font-size: 0.95rem; /* Taille préférée détectée */
    line-height: 1.4; /* Hauteur de ligne d'origine */
    color: var(--jefhip-black); /* Couleur de marque */
}

/* Ajustement pour l'icône elle-même */
.product-features li img {
    width: 1.2rem; /* Définit une taille uniforme pour l'icône */
    height: auto;
    flex-shrink: 0; /* Empêche l'icône de s'écraser si le texte est long */
    margin-top: 0.1rem; /* Petit ajustement vertical pour l'alignement visuel parfait */
}







































/* ============================================================
   JEFHIP DIGITAL - GLOBAL PRICING ENGINE 2026
   Mise en page expert, alignement Flexbox & Touches Pro
   ============================================================ */

:root {
    --jef-orange: #f56a31; /* Votre couleur d'action principale */
    --jef-green: #00b67a;  /* Vert Trust/Vérifié pour les coches */
    --jef-black: #1a1c1e;  /* Fond sombre professionnel */
    --text-dark: #374151;  /* Gris foncé pour le texte descriptif */
    --card-bg: #ffffff;
}

/* --- CONTENEUR SECTION --- */
.jefhip-pricing-section {
    background-color: var(--jef-black); /* Fond sombre de marque */
    padding: 80px 20px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.pricing-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espace constant entre les cartes */
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Responsive : empile les cartes sur mobile */
}

/* --- LA CARTE (STRUCTURE GLOBALE) --- */
.pricing-card {
    background: var(--card-bg);
    border-radius: 24px; /* Coins très arrondis style Apple/Pro */
    border: 1px solid #e5e7eb;
    flex: 1;
    min-width: 320px;
    max-width: 380px;
    display: flex;
    flex-direction: column; /* Aligne header, body, footer verticalement */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Pour les reflets/illustrations */
}

.pricing-card:hover {
    transform: translateY(-10px); /* Effet de lévitation au survol */
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

/* --- HEADER (PRIX) --- */
.card-header {
    background-color: #f9fafb;
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.price-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--jef-black);
    letter-spacing: -1px;
}

.currency {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* --- BODY (CONTENU) --- */
.card-body {
    padding: 30px;
    flex-grow: 1; /* Pousse le footer vers le bas */
}

/* AJOUT : Style de l'image d'illustration */
.card-illustration {
      text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: transparent;
    border-radius: 16px;
    margin-top: -60px;
}

.card-illustration img {
    max-width: 100px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); /* Ombre douce sur le SVG */
}

/* --- LISTE DE FONCTIONNALITÉS (FIX FLEXBOX) --- */
.product-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0; /* Marge du bas d'origine */
}

.product-features li {
    display: flex; /* Active Flexbox pour l'alignement */
    align-items: flex-start; /* Aligne l'icône en haut du texte */
    gap: 15px; /* Espace constant icône/texte */
    margin-bottom: 16px; /* Espacement vertical pro */
    
    /* Nettoyage des anciens styles conflictuels */
    position: static;
    padding-left: 0;
    
    font-size: 0.95rem; /* Taille préférée détectée */
    line-height: 1.5;
}

/* TOUCHE PRO : L'icône de coche */
.feature-icon {
    color: var(--jef-green); /* Couleur de confiance */
    font-size: 1.2rem;
    margin-top: 2px; /* Ajustement vertical précision */
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}

.feature-text strong {
    color: var(--jef-black);
    display: block; /* Met le titre en gras au-dessus de la description */
    font-weight: 700;
}

.feature-text span {
    color: var(--text-dark); /* Couleur gris foncé détectée */
}

/* --- FOOTER (BOUTONS & LIEN) --- */
.card-footer {
    padding: 0 30px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

/* BOUTON CART (Sombre) */
.btn-cart {
    background-color: var(--jef-black); /* Noir Jefhip */
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cart:hover {
    background-color: #000000;
    transform: scale(1.02);
}

/* BOUTON BUY (Orange Pro) */
.btn-buy {
    background-color: var(--jef-orange); /* Orange Jefhip */
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 14px rgba(245, 106, 49, 0.4); /* Ombre de couleur orange */
}

.btn-buy:hover {
    background-color: #d45625; /* Orange plus sombre au survol */
    box-shadow: 0 6px 20px rgba(245, 106, 49, 0.6);
}

/* AJOUT : Le lien expert d'information */
.expert-more-link {
    font-size: 0.85rem;
    color: var(--text-dark);
    text-decoration: none;
    margin-top: 15px;
    font-weight: 600;
    transition: 0.3s;
    opacity: 0.8;
}

.expert-more-link:hover {
    color: var(--jef-orange);
    opacity: 1;
    text-decoration: underline;
}

/* RESPONSIVE : Empilement sur mobile */
@media (max-width: 768px) {
    .pricing-container {
        flex-direction: column;
        align-items: center;
    }
}





@media (max-width: 768px) {
    /* --- 1. FIX HERO (Propulse ta vision) --- */
    .section-hero.container {
        padding: 120px 20px 60px 20px !important; /* On réduit le padding géant de 270px */
        min-height: auto;
        top: -100px;
        text-align: center;
    }

    .hero__title {
        font-size: 2.2rem !important; /* Évite que le texte ne sorte de l'écran */
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .company-name {
        font-size: 1.3rem !important; /* Taille adaptée au mobile */
    }

    .hero__description {
        font-size: 16px !important;
        padding: 0 10px;
    }

    .hero__cta {
        flex-direction: column; /* Boutons l'un sur l'autre */
        width: 100%;
        gap: 15px;
    }

    .btn-hero-main, .btn-hero-sub {
        width: 100%; /* Boutons pleine largeur */
        padding: 15px 20px;
    }

    /* --- 2. FIX PREFOOTER (Construisons quelque chose) --- */
    .jefhip-prefooter {
        padding: 60px 20px !important;
    }

    .changing-word8 {
        font-size: 1.4rem !important; /* Taille lisible sans scroll horizontal */
        display: block; /* Force le retour à la ligne si besoin */
    }

    /* --- 3. FIX SECTION CONTACT --- */
    .footer__container {
        grid-template-columns: 1fr !important; /* Empile les colonnes */
        gap: 40px;
        padding: 0 20px;
    }

    .newsletter-form {
        flex-direction: column;
        max-width: 100%;
    }

    .newsletter-input {
        width: 100%;
        font-size: 1.2rem !important; /* Plus petit pour mobile */
        border-bottom: 2px solid #f56a31;
        margin-bottom: 15px;
    }

    .newsletter-submit {
        margin-left: 0; /* On remet le bouton à sa place */
        width: 100%;
        padding: 15px;
    }

    /* --- 4. HEADER MOBILE ADJUST --- */
    .header__content {
        height: auto;
        padding: 15px;
        flex-direction: column; /* Logo et Panier l'un sur l'autre */
        gap: 10px;
    }

    .header-icon-main {
        height: 120px; /* Logo plus petit sur mobile */
        margin-left: 0;
    }

    .button-cart-header {
        margin-right: 0; /* Centrage */
        width: 100%;
        justify-content: center;
    }
}


/* --- PASSAGE EN MODE COUCHÉ (ROTATION) --- */

/* 1. On applique la rotation sur le conteneur (Coucher le téléphone) */
.jef-landscape-version .jef-device-container {
    transform: rotate(-90deg); /* Rotation de 90 degrés vers la gauche */
    transform-origin: center center; /* Centre la rotation */
    margin: 100px auto;        /* Ajoute de l'espace pour ne pas chevaucher */
    
    /* On garde tes dimensions verticales originales (on les tourne seulement) */
    width: 280px !important;  
    height: 560px !important; 
    
    position: relative;
    border-radius: 45px !important; 
    border: 12px solid #f56a31 !important; /* Ta bordure orange BNITA */
    background: #000000b4;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. On corrige l'orientation de l'image à l'intérieur (La remettre à l'endroit) */
.jef-landscape-version .jef-swipe-engine .jef-slide img {
    transform: rotate(90deg) !important; /* Annule la rotation pour l'image */
    transform-origin: center center;
    
    /* Cadrage "Propre" de l'image */
    max-width: 90% !important;  /* Empêche de coller aux bords orange */
    max-height: 90% !important; /* Empêche de coller aux bords orange */
    width: auto !important;
    height: auto !important;
    object-fit: contain; /* Respecte les proportions sans déformation */
}

/* 3. On ajuste le swipe engine pour le nouveau format */
.jef-landscape-version .jef-swipe-engine {
    height: 100%;
    width: 300%; /* Pour 3 slides */
    display: flex;
}


/* --- EFFET DE BRILLANCE INTERNE (SHINE) --- */

/* 1. On utilise le pseudo-élément ::after pour créer la lumière */
.jef-landscape-version .jef-device-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Départ hors de l'écran */
    width: 60%;
    height: 100%;
    
    /* Dégradé blanc transparent pour l'effet reflet */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-25deg); /* Inclinaison du reflet pour le réalisme */
    z-index: 10; /* Par-dessus les images, mais sous le bord grâce au overflow:hidden */
    pointer-events: none; /* L'effet ne bloque pas les clics */
    
    /* Lancement de l'animation */
    animation: internal-shine 5s infinite ease-in-out;
}

/* 2. L'animation du mouvement de la lumière */
@keyframes internal-shine {
    0% {
        left: -150%;
    }
    30% {
        left: 150%; /* Passage rapide sur l'écran */
    }
    100% {
        left: 150%; /* Pause avant le prochain passage */
    }
}

/* 3. Sécurité pour que rien ne dépasse du cadre orange */
.jef-landscape-version .jef-device-container {
    overflow: hidden !important;
    position: relative;
}





/* ============================================================
   JEFHIP DIGITAL - MODALITÉS MOBILE-OPTIMIZED (2026)
   ============================================================ */

/* --- RESET & VARIABLES (Hypothétiques basées sur ton style) --- */
.jef-modalites-section {
    background: #000; /* Fond noir */
    padding: 60px 20px;
    font-family: 'Inter', 'Arimo', sans-serif;
}

.modalites-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Glassmorphism de base */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
}

.modalites-title {
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.orange-text {
    color: #f56a31; /* Ton orange signature */
}

/* --- STRUCTURE GRILLE (PC PAR DÉFAUT) --- */
.modalites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur PC */
    gap: 30px;
}

.condition-item {
    background: rgba(0, 0, 0, 0.3); /* Léger fond noir */
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* --- DESIGN DES ENTÊTES (TITRES CLICABLES) --- */
.condition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    user-select: none;
    list-style: none; /* Cache la flèche par défaut de <summary> */
}

/* Cache l'entête summary par défaut sur PC pour ne voir que le titre */
.condition-header {
    pointer-events: none; /* Désactivé sur PC */
}

.condition-item h3 {
    color: #f56a31; /* Orange */
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* Cache l'icône + sur PC */
.faq-icon {
    display: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* --- DESIGN DU CONTENU --- */
.condition-details {
    padding: 0 20px 20px;
}

.condition-item p {
    color: #ccc; /* Gris clair pour lisibilité */
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Ton effet de ligne brillante existant */
.shine-line {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #f56a31, transparent);
    margin-top: 15px;
    opacity: 0.5;
}

.footer-note {
    text-align: center;
    color: #666;
    font-size: 0.8rem;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
}

/* ============================================================
   FIX MOBILE : MODE ACCORDÉON (Ouverture + Effet +)
   ============================================================ */
@media screen and (max-width: 768px) {

    .modalites-grid {
        grid-template-columns: 1fr; /* 1 colonne verticale */
        gap: 15px;
    }

    /* Rend l'entête summary cliquable */
    .condition-header {
        pointer-events: auto; /* Activé sur Mobile */
    }

    /* Affiche l'icône + */
    .faq-icon {
        display: block;
    }

    /* Le contenu est caché par défaut sur mobile pour l'effet accordéon */
    .condition-details {
        max-height: 0; /* Hauteur 0 */
        overflow: hidden; /* Cache ce qui dépasse */
        padding: 0 20px; /* Pas de padding vertical quand c'est fermé */
        transition: max-height 0.4s ease-out, padding 0.3s ease; /* Animation fluide */
        opacity: 0;
    }

    /* --- ÉTATS OUVERTS (GÉRÉS VIA JS) --- */
    
    /* Quand l'item est ouvert (classe active) */
    .condition-item.jef-open {
        background: rgba(245, 106, 49, 0.05); /* Léger fond orange pour le focus */
        border-color: rgba(245, 106, 49, 0.2);
    }

    /* Déploie le contenu */
    .condition-item.jef-open .condition-details {
        max-height: 500px; /* Hauteur max arbitraire pour laisser passer le texte */
        padding: 0 20px 20px; /* Restaure le padding vertical */
        opacity: 1;
        transition: max-height 0.5s ease-in, padding 0.3s ease;
    }

    /* Fait tourner l'icône + pour devenir × */
    .condition-item.jef-open .faq-icon {
        transform: rotate(45deg);
        color: #f56a31; /* Devient orange */
    }
}





























































































/* ============================================================
   GALERIE EXPERT CNL - STYLE TECHNIQUE & CADRIER
   ============================================================ */

:root {
    --cnl-red: #c00809;
    --cnl-orange: #f56a31; /* Orange industriel pour le contraste */
    --expert-radius: 24px;
    --transition-hq: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-cnl-gallery-expert {
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    /* --- EFFET CADRIER (Background technique) --- */
    background-color: #f9f9f9;
    background-image: 
        linear-gradient(rgba(192, 8, 9, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(192, 8, 9, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; /* Taille de la grille */
}

.gallery-expert-container {
    max-width: 500px; /* Format Portrait Élite */
    margin: 0 auto;
    position: relative;
}

/* --- FENÊTRE D'AFFICHAGE (VIEWPORT) --- */
.carousel-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 13; /* Format vertical moderne */
    border-radius: var(--expert-radius);
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: var(--transition-hq);
    will-change: transform;
}

.expert-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.expert-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.1);
    transition: transform 1s ease;
}

/* --- AFFICHES RÉALISTES (OVERLAY) --- */
.expert-overlay {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 20px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border-left: 4px solid var(--cnl-orange); /* Ligne d'accentuation orange */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
    transition: var(--transition-hq);
    z-index: 5;
}

.expert-overlay .tag {
    color: var(--cnl-orange);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    display: block;
    margin-bottom: 6px;
}

.expert-overlay h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- FLÈCHES DE NAVIGATION --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: var(--transition-hq);
}

.nav-arrow:hover {
    background: var(--cnl-red);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left { left: 15px; }
.nav-arrow.right { right: 15px; }

/* --- NAVIGATION PAR ICÔNES (BULLES) --- */
.dots-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50px;
}

.dot {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dot:hover {
    color: var(--cnl-red);
}

.dot.active {
    display: none;
    color: var(--cnl-orange);
    transform: scale(1.4) translateY(-5px);
    filter: drop-shadow(0 0 8px rgba(245, 106, 49, 0.6));
}

/* --- RÉPONSIVITÉ --- */
@media (max-width: 480px) {
    .gallery-expert-container {
        max-width: 100%;
    }
    .dots-navigation {
        gap: 10px;
    }
    .dot {
        font-size: 18px;
    }
}
















.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.nav-icon-img {
    width: 65%; /* Ajuste selon tes préférences */
    height: auto;
    object-fit: contain;
    pointer-events: none; /* Évite les bugs de clic sur l'image */
    transition: transform 0.3s ease;
}

.nav-arrow:hover .nav-icon-img {
    transform: scale(1.2) rotate(5deg); /* Petit effet dynamique au survol */
}




















.chantier-performance-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.chantier-container {
    display: flex;
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.chantier-card-pro {
    flex: 1;
    min-width: 300px;
    background: #ffffff;
    padding: 50px 30px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: all 0.4s ease;
}

.card-accent-line {
    display: none;
    position: absolute;
    bottom: 0; left: 0; width: 0%; height: 4px;
    background: #c00809;
    transition: width 0.6s ease;
}

.chantier-card-pro:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.chantier-card-pro:hover .card-accent-line { width: 100%; }

.chantier-svg-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
}

.chantier-number-wrapper {
    font-size: 4rem;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
}

.plus-sign { color: #c00809; }

.chantier-text-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #777;
    margin-top: 10px;
    font-weight: 700;
}

/* STYLE CHARGING SOUS LE TEXTE */
.charging-track {
    width: 100%;
    height: 3px;
    background: #eee;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

.charging-fill {
    position: absolute;
    top: 0; left: 0; height: 100%; width: 0;
    background: #c00809;
    transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.chantier-card-pro:hover .charging-fill { width: 100%; }







/* 1. RÉGLAGE GLOBAL DES COULEURS (BASÉ SUR TES IMAGES) */
:root {
    --cnl-red-main: #c00809; /* Le rouge exact de ton bandeau */
    --cnl-red-hover: rgba(192, 8, 9, 0.1); /* L'écrasement à 90% transparent */
}

/* 2. FIX DES BORDURES / SIGNETS SUR LES BLOCS DE TEXTE 
.cnl-block-item, .block-header, .block-mission, .block-desc {
    position: relative;
    border-right: 12px solid var(--cnl-red-main); /* Le signet permanent à droite 
    transition: all 0.5s ease;
} */

/* L'effet d'écrasement du fond rouge */
.cnl-block-item::after, .cnl-interactive-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cnl-red-main);
    z-index: -1;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* HOVER : Le rouge s'écrase pour devenir transparent (90%) */
.cnl-block-item:hover::after, .cnl-interactive-block:hover::after {
    background: var(--cnl-red-hover);
    width: 100%; /* Garde la zone couverte mais transparente */
}

/* 3. FIX DU BOUTON (DESIGN IMAGE 1AF5AD) */
.cnl-btn-vertical, .cnl-button-up, .cnl-expert-btn {
    position: relative;
    background: transparent;
    border: 2px solid var(--cnl-red-main) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 18px 40px;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
    border-radius: 4px; /* Petit arrondi comme sur ta capture */
}

/* Couche de remplissage du bas vers le haut */
.cnl-btn-vertical::before, .cnl-fill-layer, .btn-slide {
    content: "";
    position: absolute;
    bottom: -100%; /* Start en bas */
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cnl-red-main);
    z-index: -1;
    transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* HOVER BOUTON */
.cnl-btn-vertical:hover::before, .cnl-button-up:hover .cnl-fill-layer {
    bottom: 0;
}

/* 4. FIX IMAGE DE FOND (L'EFFET SOMBRE TECHNIQUE) */
.cnl-expert-final, #section-cnl {
    background-color: #000 !important;
}

.cnl-background-engine, .cnl-bg-layer {
    filter: brightness(0.2) grayscale(0.5); /* Effet sombre pro pour faire ressortir le rouge */
}

/* Centrage forcé du texte */
.cnl-content, .cnl-text-content {
    text-align: center;
    width: 100%;
}


.cnl-expert-triple {
    position: relative;
    padding: 100px 20px;
    background: #000 url('https://payhip.com/cdn-cgi/image/format=auto/https://pe56d.s3.amazonaws.com/o_1j75fh3i514m52301qkn19u81tsfaq.jpg') no-repeat center/cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.cnl-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88); /* Effet sombre technique */
    z-index: 1;
}

.cnl-container-center {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
}

/* --- LES 3 BLOCS AVEC EFFET SIGNET --- */
.cnl-interactive-block {
    position: relative;
    padding: 40px;
    cursor: pointer;
    transition: transform 0.4s ease;
}

/* Le fond rouge qui s'écrase */
.cnl-signet-rail {
    position: absolute;
    top: 0;
    border-radius: 24px;
    right: 0;
    width: 100%; /* Plein par défaut */
    height: 100%;
    background: #c00809;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
}

/* Effet Hover : Devient transparent à 90% et laisse un signet de 12px à droite */
.cnl-interactive-block:hover .cnl-signet-rail {
    width: 12px;
    background: #c00809;
    box-shadow: -100px 0 0 1000px rgba(192, 8, 9, 0.05); /* L'écrasement transparent */
}

.cnl-interactive-block:hover {
    transform: translateX(-5px);
}

/* Typographies */
.cnl-text-content h1 { color: #fff; font-size: 1.5rem; font-weight: 900; margin: 0; }
.cnl-text-content h2 { color: #fff; font-size: 1.8rem; font-weight: 900; margin: 0; }
.cnl-text-content p { color: #fff; font-size: 1.1rem; margin: 0; line-height: 1.6; }

/* --- BOUTON : REMPLISSAGE BAS VERS HAUT --- */
.cnl-btn-zone { margin-top: 30px; }

.cnl-button-up {
    position: relative;
    display: inline-block;
    padding: 22px 45px;
    border: 2px solid #c00809;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 2px;
    overflow: hidden;
    z-index: 5;
    transition: color 0.4s ease;
}

.cnl-btn-label { position: relative; z-index: 10; }

.cnl-fill-up {
    position: absolute;
    bottom: -100%; /* Cache en bas */
    left: 0;
    width: 100%;
    height: 100%;
    background: #c00809;
    transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

.cnl-button-up:hover .cnl-fill-up {
    bottom: 0; /* Remonte vers le haut */
}

.cnl-button-up:hover {
    box-shadow: 0 10px 30px rgba(192, 8, 9, 0.4);
}


























:root {
    --cnl-red: #c00809;
    --cnl-dark: #111111;
    --cnl-grid: rgba(192, 8, 9, 0.07);
}

.cnl-heritage-section {
    position: relative;
    padding: 100px 20px;
    background: #ffffff;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

/* Le Cadrier (Design Architecte) */
.cnl-blueprint-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--cnl-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--cnl-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

.cnl-frame-container {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Titre Glitch & Contour */
.cnl-main-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0;
    color: var(--cnl-dark);
}

.text-glitch {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--cnl-red);
    position: relative;
}

/* Séparateur Animé */
.cnl-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
}

.cnl-line { width: 100px; display: none; height: 2px; background: var(--cnl-red); }
.cnl-dot { width: 10px; display: none; height: 10px; background: var(--cnl-red); transform: rotate(45deg); }

/* Description Glassmorphism */
.cnl-description-box {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-left: 5px solid var(--cnl-red);
    box-shadow: 20px 20px 60px rgba(0,0,0,0.05);
    margin: 40px 0;
    text-align: left;
    transition: 0.4s;
}

.cnl-description-box:hover {
    transform: translateY(-10px);
    box-shadow: 20px 30px 70px rgba(192, 8, 9, 0.1);
}

/* Bouton Cinétique */
.cnl-btn-kinetic {
    position: relative;
    display: inline-block;
    padding: 25px 50px;
    background: #1a1c1e;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 2px;
    overflow: hidden;
    border-radius: 24px;

    transition: 0.3s;
}

.cnl-btn-kinetic::before {
    position: absolute;
    top: 100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(45deg, #A40404, rgba(164, 4, 4, 0.5), #A40404);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-inner { position: relative; z-index: 5; }

.btn-liquid {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cnl-red);
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

.cnl-btn-kinetic:hover .btn-liquid {
    top: 0;
}

.cnl-btn-kinetic:hover {
    transform: scale(1.05);
}












/* --- CONFIGURATION GÉNÉRALE --- */
:root {
    --accent-red: #c00809;
    --dark-tech: #1a1a1a;
    --gray-soft: #f4f4f4;
    --transition: all 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.cnl-master-slider {
    background: #ffffff;
    padding: 80px 5%;
    font-family: 'Inter', sans-serif;
}

.cnl-slider-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- BLOC TEXTE (GAUCHE) --- */
.cnl-info-block { flex: 1; }

.cnl-pre-title {
    color: var(--accent-red);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 10px;
}

.cnl-main-name {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 900;
    color: var(--dark-tech);
    margin: 0;
    line-height: 0.9;
}

.cnl-job-title {
    font-size: 1.2rem;
    color: #666;
    font-weight: 300;
    margin-top: 15px;
}

.cnl-line-red {
    width: 60px;
    height: 4px;
    background: var(--accent-red);
    margin: 40px 0;
}

.cnl-bio-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 50px;
    max-width: 520px;
}

/* BOUTON AVEC REMPLISSAGE TECHNIQUE */
.cnl-btn-expert {
    position: relative;
    display: inline-flex;
    padding: 20px 45px;
    border: 2px solid var(--dark-tech);
    text-decoration: none;
    color: var(--dark-tech);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    overflow: hidden;
    transition: var(--transition);
}

.cnl-btn-label { position: relative; z-index: 2; }

.cnl-btn-bg-fill {
    position: absolute;
    bottom: -100%; left: 0;
    width: 100%; height: 100%;
    background: var(--accent-red);
    transition: var(--transition);
    z-index: 1;
}

.cnl-btn-expert:hover { color: #fff; border-color: var(--accent-red); }
.cnl-btn-expert:hover .cnl-btn-bg-fill { bottom: 0; }

/* --- VISUEL SLIDER (DROITE - FORMAT 9:16) --- */
.cnl-visual-slider {
    flex: 0.8; /* Plus étroit pour le format vertical */
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 750px;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}

.cnl-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.cnl-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.cnl-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GRILLE BLUEPRINT (EFFET BAC+5) */
.cnl-blueprint-mesh {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-image: 
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 35px 35px;
}

/* CONTRÔLES NAVIGATION */
.cnl-nav-controls {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.cnl-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnl-arrow:hover {
    background: var(--accent-red);
    color: #fff;
    transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .cnl-slider-container { flex-direction: column; text-align: center; }
    .cnl-line-red { margin: 30px auto; }
    .cnl-visual-slider { width: 100%; max-width: 400px; }
    .cnl-bio-content { margin-left: auto; margin-right: auto; }
}














@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;800;900&display=swap');

:root {
    --primary: #c00809;
    --dark-bg: #0a0a0a;
    --glass: rgba(255, 255, 255, 0.05);
    --curve: cubic-bezier(0.85, 0, 0.15, 1);
}

.cnl-master-slider {
    background: var(--dark-bg);
    padding: 100px 5%;
    font-family: 'Inter', sans-serif;
    color: #fff;
    overflow: hidden;
}

.cnl-slider-container {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

/* --- BLOC TEXTE --- */
.cnl-info-block { flex: 1.2; position: relative; }

.cnl-pre-title {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 20px;
    display: block;
}

.cnl-main-name {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    margin: 0;
    background: linear-gradient(to bottom, #fff 50%, #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cnl-job-title {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    margin-top: 20px;
}

.cnl-line-red {
    width: 80px;
    height: 5px;
    background: var(--primary);
    margin: 45px 0;
    box-shadow: 0 0 15px rgba(192, 8, 9, 0.5);
}

.cnl-bio-content {
    font-size: 1.15rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.75);
    margin-bottom: 50px;
    max-width: 540px;
}

/* --- BOUTON LUXE --- */
.cnl-btn-expert {
    position: relative;
    display: inline-flex;
    padding: 22px 55px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.4s var(--curve);
    border-radius: 2px;
}

.cnl-btn-expert:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(192, 8, 9, 0.4);
}

/* --- VISUEL 9:16 --- */
.cnl-visual-slider {
    flex: 0.8;
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 780px;
    background: #000;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 50px 100px rgba(0,0,0,0.9);
}

.cnl-track {
    display: flex;
    height: 100%;
    transition: transform 1.1s var(--curve);
}

.cnl-slide { min-width: 100%; height: 100%; }
.cnl-slide img { width: 100%; height: 100%; object-fit: cover; }

/* DOTS VERTICAUX À DROITE */
.cnl-dots-right {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 40px;
    z-index: 10;
}

.cnl-dot-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.dot-label-v { font-size: 10px; font-weight: 900; color: rgba(255,255,255,0.3); margin-bottom: 8px; }
.dot-bar-v { width: 2px; height: 50px; background: rgba(255,255,255,0.1); position: relative; }

.cnl-dot-item.active .dot-label-v { color: #fff; }
.cnl-dot-item.active .dot-bar-v::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary); transform-origin: top; animation: fillBar 5s linear forwards;
}

@keyframes fillBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* NAVIGATION */
.cnl-nav-controls {
    position: absolute;
    bottom: 30px; left: 30px;
    display: flex; gap: 15px; z-index: 10;
}

.cnl-arrow {
    width: 55px; height: 55px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.cnl-arrow:hover { background: var(--primary); border-color: var(--primary); }

@media (max-width: 1024px) {
    .cnl-slider-container { flex-direction: column; text-align: center; }
    .cnl-visual-slider { width: 100%; max-width: 420px; }
}










/* Conteneur de la liste pour positionner la ligne par rapport à lui */
.nav__list {
    position: relative;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav__link {
    text-decoration: none;
    color: #1a1a1a; /* Ta couleur de texte */
    padding: 15px 20px;
    margin-right: 40px;
    display: inline-block;
    transition: color 0.3s;
}

/* LA LIGNE MAGIQUE */
.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 131px;
    height: 3px; /* Épaisseur de ta ligne */
    background-color: #c00809; /* Ton vert exact */
    width: 0;
    border-radius: 2px;
    margin-top: 0;
    padding-top: 0px;

    pointer-events: none; /* Pour ne pas gêner le clic */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Mouvement fluide */
    opacity: 0;
}
















.cnl-language-master-wrap {
    display: flex;
    justify-content: center;
    margin: 25px auto;
    background: #f9f9f9;
}

.minimal-lang-rect {
    background: #c00809; /* Rectangle noir carbone */
    border: 5px solid #fff;
    padding: 10px 50px;
    border-radius: 4px; /* Un angle presque droit pour le look industriel */
    display: flex;
    align-items: center;
    gap: 15px;
}



.minimal-lang-rect:focus-visible{
    background: transparent; /* Rectangle noir carbone */
    padding: 10px 38px;
    border-radius: 50px; /* Un angle presque droit pour le look industriel */
    display: flex;
    align-items: center;
    gap: 15px;
}
.lang-btn {
    background: none;
    border: none;
    color: #fff; /* Gris pour la langue non-active */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}


.lang-btn:hover {
    background: none;
    border: none;
    color: #fff; /* Gris pour la langue non-active */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.lang-divider {
    color: #c00809;
    font-weight: 900;
}

/* Style pour la langue sélectionnée */
.lang-btn.active {
    color: #fff;
}

.lang-btn:hover {
    color: #c00809; /* Ton rouge exact au survol */
}

/* Nettoyage forcé de l'interface Google */
.goog-te-banner-frame, .skiptranslate, iframe.goog-te-menu-frame {
    display: none !important;
}
body { top: 0 !important; }



























.jd-hero-slider {
    position: relative;
    width: 100%;
    height: 100vh; /* Taille monumentale */
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

/* Gestion des images de fond */
.jd-slider-bg { position: absolute; inset: 0; z-index: 1; }
.jd-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.jd-slide.active { opacity: 1; }
.jd-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(8px) brightness(0.4); /* Profondeur technique */
}

/* Filtre rouge/noir */
.jd-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(192, 8, 9, 0.15) 0%, rgba(10, 10, 10, 0.8) 100%);
}

/* Texte et boutons */
.jd-content { position: relative; z-index: 10; text-align: center; }
.jd-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 20px; }
.jd-brand { color: #fff; display: block; margin-top: 10px; }
.jd-desc { font-size: 1.1rem; color: rgba(255,255,255,0.7); margin-bottom: 40px; font-weight: 500; }

.jd-actions { display: flex; justify-content: center; gap: 25px; align-items: center; }
.btn-main {
    background: #fff; color: #c00809; padding: 15px 35px;
    font-weight: 900; text-decoration: none; border-radius: 2px;
    font-size: 13px; letter-spacing: 1px; transition: 0.3s;
}
.btn-main:hover { box-shadow: 0 0 20px rgba(255,255,255,0.4); transform: translateY(-2px); }
.btn-link { color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; border-bottom: 1.5px solid transparent; text-transform: uppercase; transition: 0.3s; }
.btn-link:hover { color: #fff; border-color: #c00809; }

/* Points de navigation */
.jd-dots { position: absolute; bottom: 30px; display: flex; gap: 10px; z-index: 20; }
.dot { width: 10px; height: 10px; background: rgba(255,255,255,0.2); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: #c00809; transform: scale(1.3); }

@media (max-width: 768px) { .jd-title { font-size: 2.2rem; } .jd-actions { flex-direction: column; } }










/* --- LE CONTENEUR DE L'ICÔNE --- */
.chantier-png-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    height: 60px; /* Assure la stabilité visuelle */
}

/* --- L'ICÔNE PNG --- */
.chantier-png-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    
    /* --- L'EFFET DE LUEUR (GLOW) ROUGE CNL --- */
    /* drop-shadow est parfait pour les PNG transparents */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}


/* --- L'ICÔNE PNG --- */
.chantier-png-icon4 img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    
    /* --- L'EFFET DE LUEUR (GLOW) ROUGE CNL --- */
    /* drop-shadow est parfait pour les PNG transparents */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}


/* --- L'ICÔNE PNG --- */
.chantier-png-icon2 img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    
    /* --- L'EFFET DE LUEUR (GLOW) ROUGE CNL --- */
    /* drop-shadow est parfait pour les PNG transparents */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

/* --- EFFET AU SURVOL (HOVER) DE LA CARTE --- */
.chantier-card-pro:hover .chantier-png-icon img {
    /* Légère pulsation et inclinaison technique */
    transform: scale(1.1) rotate(-5deg);
    /* Lueur plus intense pour le look 'Futuriste IA' */
}



















/* --- LE SÉLECTEUR FLOTTANT --- */
.site-country-selector {
    position: fixed;
    top: 0;
    right: 0;
    height: 40px; /* Même hauteur que ta barre d'annonce */
    z-index: 1000000; /* Toujours au-dessus de tout */
    background: #c00809;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-family: inherit;
}

.selected-country-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.arrow-icon { font-size: 18px; margin-left: 3px; }

/* --- LE MENU DÉROULANT --- */
.country-floating-menu {
    
    position: absolute;
    top: 40px;
    right: -28px;
    width: 100px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border-radius: 0 0 0px 0px;
    list-style: none;
    margin: 0;
    padding: 5px 0;
}


.check-circle {
    margin-left: auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.check-svg {
    width: 100%;
    height: 100%;
    /* Si tu veux que le check devienne vert/rouge quand sélectionné : */
    filter: grayscale(1); 
    opacity: 0.2;
}

.selected .check-svg {
    filter: none; /* Reprend sa couleur originale */
    opacity: 1;
}

/* Fix pour l'arabe si besoin de l'aligner à droite */
[data-flag="sa"] span {
    direction: rtl;
    unicode-bidi: embed;
}


.country-floating-menu.active { display: block !important; }

.country-floating-menu li {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    margin-right: 30px;
    gap: 12px;
    margin-left: -0px;
    margin-top: -1.2px;
    color: #333;
    font-size: 13px;
    transition: 0.2s;
}

.country-floating-menu li:hover { background: #f5f5f5; }
.country-floating-menu li.selected { background: #f0f0f0; }

.check-circle {
    margin-left: auto;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.selected .check-circle { background: #c00809; color: white; border-color: #c00809; }

/* --- NETTOYAGE DE LA BARRE D'ANNONCE --- */
.announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 99999999;
    padding-right: 10px; /* Réserve l'espace pour le bouton flottant */
}



/* --- LE HEADER COMPLET (PLEINE LARGEUR) --- */
.main-content {
    margin-top: 90px;
    z-index: -99999999;

}




/* --- LE HEADER BLANC (Conteneur Principal) --- */
.main-header {
    position: fixed !important;
    top: 40px !important; /* Calé pile sous la barre d'annonce rouge */
    left: 0 !important;
    width: 100% !important; /* Remplit tout l'espace horizontal */
    height: 100px; /* Ta hauteur actuelle */
    background-color: #ffffff !important; /* Force le blanc partout */
    z-index: 99999 !important;
    border-bottom: 5px solid #c00809; /* Ta bordure rouge */
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* --- LE CONTENU INTERNE (Logo + Nav) --- */
.header-container {
    width: 100%;
    max-width: 1400px; /* Aligne le contenu avec le reste du site */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* --- GESTION DU SCROLL (Via la classe injectée par ton JS) --- */
/* Cache tout quand on descend */
.header-hidden .main-header,
.header-hidden .announcement-bar {
    transform: translateY(-200%);
}

/* Réapparaît seulement quand on est au sommet */
body:not(.header-hidden) .main-header {
    transform: translateY(0);
}

/* --- COMPENSATION POUR LE SITE --- */
body {
    padding-top: 140px !important; /* Somme de la barre rouge (40) + header (100) */
}






.nav-indicator {
    /* ... tes autres styles ... */
    margin-top: 40px;
    height: 20px;
    bottom: 20px; /* Plus le chiffre est bas (ou négatif), plus la barre descend */
}




/* Cache le widget Google Translate original pour garder ton design */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Menu Pays */
.country-floating-menu {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 100%;
    right: -23px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 0px;
    z-index: 10000;
    min-width: 172px;
    padding: 10px 0;
}

.country-floating-menu.active {
    display: block; /* S'affiche avec le JS */
}

/* Check SVG */
.check-circle .check-svg {
    width: 18px;
    height: 18px;
    filter: grayscale(1);
    opacity: 0.2;
    transition: 0.3s;
}

.selected .check-circle .check-svg {
    filter: none; /* Le cercle devient vert/rouge selon ton SVG */
    opacity: 1;
}





/* Cache le menu quand la classe active est retirée */
.country-floating-menu {
    display: none; /* Ou opacity: 0 selon ton animation */
}

.country-floating-menu.active {
    display: block; /* Ou opacity: 1 */
}

/* Fix pour éviter que Google Translate ne décale ton menu */
#countryMenu font {
    vertical-align: inherit !important;
}



/* Empêche les balises injectées par Google de bloquer le clic */
.country-floating-menu li * {
    pointer-events: none;
}

/* On réactive le clic uniquement sur le LI lui-même */
.country-floating-menu li {
    pointer-events: auto;
    cursor: pointer;
}



/* Empêche les balises injectées par Google de bloquer le clic */
.country-floating-menu li * {
    pointer-events: none;
}

/* On réactive le clic uniquement sur le LI lui-même */
.country-floating-menu li {
    pointer-events: auto;
    cursor: pointer;
}




.country-floating-menu {
    display: none !important; /* Cache par défaut */
}

.country-floating-menu.active {
    display: block !important; /* Affiche seulement quand actif */
}



/* Force la disparition visuelle instantanée */
#countryMenu:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}




















#cnl-cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
gap: 16px;
background: rgba(30,30,30,0.65);
backdrop-filter: blur(4px);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

/* Contenu texte */
#cnl-cookie-banner .cnl-text {
flex: 1 1 auto;
min-width: 220px;
padding-right: 12px;
font-size: 15px;
line-height: 1.35;
}

/* Actions (boutons) */
#cnl-cookie-banner .cnl-actions {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}

.cnl-btn {
padding: 8px 14px;
border-radius: 6px;
border: 0;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}
.cnl-btn-accept {
background: #b80c0c; 
color: #fff;
box-shadow: 0 2px 5px rgba(184,12,12,0.25);


.cnl-btn-rejecth {
background: #fff;
color: #c00809;
border: 1px solid rgba(255,255,255,0.22);
}


}
.cnl-btn-reject {
background: #000;
color: #fff;
border: 1px solid rgba(255,255,255,0.22);
}
.cnl-btn-settings {
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
}

/* Bouton fermer */
#cnl-cookie-close {
background: transparent;
border: 0;
color: #fff;
font-size: 18px;
cursor: pointer;
margin-left: 6px;
}

#cnl-cookie-settings {
position: fixed;
left: 12px;
right: 12px;
bottom: 140px;
max-width: 1000px;
margin: 0 auto;
background: rgba(255,255,255,0.97);
color: #111;
border-radius: 14px;
box-shadow: 0 6px 30px rgba(0,0,0,0.25);
padding: 24px 24px 24px 24px;
z-index: 99999999;
display: none;
font-size: 14px;
}

/* Réglages - structure */
#cnl-cookie-settings h3 { margin: 0 0 8px 0; font-size: 16px; }
.cnl-cookie-category {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cnl-cookie-category:last-child { border-bottom: none; }
.cnl-cookie-category .desc { color: #444; font-size: 13px; }

/* Toggle simple */
.cnl-toggle { display:flex; align-items:center; gap:10px; }
.cnl-toggle input[type="checkbox"] { width:16px; height:16px; }

/* Responsive */
@media (max-width:720px) {
#cnl-cookie-banner { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
#cnl-cookie-banner .cnl-actions { justify-content: flex-end; width:100%; }
#cnl-cookie-settings { left: 8px; right: 8px; bottom: 78px; padding: 12px; }
}












/* --- WIDGET AVIS FACEBOOK (HOVER) --- */

/* 1. Style des étoiles qui déclenchent le survol */
.fb-trigger {
    cursor: help;
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
    position: relative;
}

.fb-trigger:hover {
    transform: scale(1.1);
    color: #1877F2; /* Change en bleu FB au survol */
}

/* 2. La bulle d'info (Tooltip) - Gérée par le JS mais stylisée ici si besoin */
/* Note: Le gros du style est dans le JS pour la position, mais on ajoute le fignolage ici */
.fb-tooltip-custom {
    pointer-events: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
}

/* 3. Petite flèche au dessus de la bulle */
.fb-tooltip-arrow {
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1877F2; /* Couleur de la bordure haute */
}

/* 4. Animation d'apparition */
@keyframes fbFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. Ajustement de la carte de témoignage pour éviter les débordements */
.testimonial-card {
    position: relative;
    overflow: visible !important; /* IMPORTANT: pour que la bulle ne soit pas coupée */
}

/* 6. Style du texte à l'intérieur de la bulle (optionnel si tu veux plus de contrôle) */
.fb-review-name {
    color: #1c1e21;
    font-weight: 700;
    font-size: 13px;
}

.fb-review-text {
    color: #4b4f56;
    font-size: 12px;
    margin-top: 4px;
}




/* --- AMÉLIORATIONS DESIGN PREMIUM (À AJOUTER) --- */

.fb-tooltip-pro {
    position: absolute;
    background: #ffffff;
    border-radius: 16px; /* Plus arrondi pour un look moderne */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Ombre diffuse */
    padding: 16px;
    width: 290px;
    z-index: 10000;
    pointer-events: none;
    border: 1px solid rgba(0,0,0,0.05);
    display: none;
    animation: fbPop 0.3s ease-out; /* Animation plus fluide */
}

@keyframes fbPop {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* En-tête avec titre bleu Facebook */
.fb-header-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 700;
    color: #1877F2;
}

/* Détails de l'auteur */
.fb-user-details {
    margin-bottom: 10px;
    padding-left: 34px;
}

.fb-author-name {
    font-size: 14px;
    font-weight: 600;
    color: #050505;
    display: block;
}

.fb-pub-date {
    font-size: 11px;
    color: #65676B;
}

/* Corps de l'avis avec fond gris Facebook */
.fb-body-text {
    font-size: 13px;
    color: #050505;
    line-height: 1.5;
    background: #F0F2F5; /* Gris clair officiel FB */
    padding: 12px;
    border-radius: 10px;
    font-style: italic;
    margin-left: 34px;
}

/* Badge de vérification bleu */
.fb-verified-check {
    color: #1877F2;
    font-size: 12px;
    margin-left: 4px;
}




/* --- AJUSTEMENT DES DIMENSIONS --- */

.fb-tooltip-pro {
    /* Augmentation de la largeur (passer de 290px à 380px pour plus d'espace) */
    width: 380px !important; 
    
    /* On augmente aussi légèrement le padding interne pour l'équilibre visuel */
    padding: 20px; 
    
    /* Assure que la bulle reste centrée par rapport aux étoiles si nécessaire */
    margin-left: -40px; 
    
    /* On garde le reste de la structure premium */
    position: absolute;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Ajustement du texte interne pour profiter de la nouvelle largeur */
.fb-body-text {
    font-size: 14px; /* Un peu plus grand pour la lisibilité */
    line-height: 1.6;
    margin-left: 40px; /* Aligné avec l'icône FB */
    padding: 15px;
}


























/* Style de la barre d'annonce */
.announcement-bar {
    background-color: #b30000; /* Le rouge de votre image */
    padding: 10px 0;
    overflow: hidden;
}

/* Style des liens pour enlever le look "bleu" par défaut */
.announcement-link {
    text-decoration: none !important; /* Enlève le soulignement */
    color: white !important; /* Force la couleur blanche */
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.announcement-link:hover {
    opacity: 0.8; /* Petit effet au survol */
}

/* Fix pour l'image : on s'assure que le texte est gras et propre */
.announcement-item {
    color: white;
    font-family: 'Arial Black', sans-serif;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.click-call {
    font-weight: bold;
    margin-left: 5px;
}




















.ipad-device.expert-design {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 600px;
    background: #C00809; /* Votre couleur */
    border-radius: 45px;
    padding: 20px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.4), inset 0 0 15px rgba(255,255,255,0.2);
    margin: 0 auto;
    border: 6px solid #a00607; /* Bordure légèrement plus sombre */
}

/* L'écran avec effet de profondeur */
.ipad-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 20px #000;
}

/* Track pour 8 images (800%) */
.slider-track {
    display: flex;
    width: 800%; 
    height: 100%;
    animation: scrollSlides 32s infinite ease-in-out;
}

.slide {
    width: calc(100% / 8);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* DÉZOOM : L'image est vue entièrement */
    image-rendering: auto;
}

/* Détails iPad Expert */
.ipad-camera {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #f9f9f9;
    border-radius: 50%;
}

.ipad-home-bar {
    background: rgba(255,255,255,0.5);
    width: 140px;
}

/* Animation ajustée pour 8 paliers */
@keyframes scrollSlides {
    0%, 10% { transform: translateX(0); }
    12.5%, 22.5% { transform: translateX(-12.5%); }
    25%, 35% { transform: translateX(-25%); }
    37.5%, 47.5% { transform: translateX(-37.5%); }
    50%, 60% { transform: translateX(-50%); }
    62.5%, 72.5% { transform: translateX(-62.5%); }
    75%, 85% { transform: translateX(-75%); }
    87.5%, 97.5% { transform: translateX(-87.5%); }
    100% { transform: translateX(0); }
}




/* --- SECTION RÉALISATIONS (IPAD FIX) --- */
.ipad-gallery-section {
    padding: 60px 0;
    background: #ffffff;
}

/* Châssis iPad avec votre rouge #C00809 */
.ipad-device.expert-design {
    position: relative;
    width: 95%;
    max-width: 900px;
    height: 550px;
    background: #C00809;
    border-radius: 40px;
    padding: 18px; /* Épaisseur du cadre rouge */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    border: 2px solid #a00607;
}

/* L'écran (le fond noir) */
.ipad-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
}

/* Le rail qui contient les 8 images */
.slider-track {
    display: flex;
    width: 800%; /* 8 images x 100% */
    height: 100%;
    animation: scrollSlides 30s infinite ease-in-out;
}

/* Chaque slide prend exactement 1/8ème de la largeur du rail */
.slide {
    width: 12.5%; /* 100% divisé par 8 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Espace entre l'image et le bord de l'écran noir */
    box-sizing: border-box;
}

/* L'image : DEZOOMÉE pour voir tout le projet */
.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garde les proportions entières */
    border-radius: 10px; /* Coins légèrement arrondis pour l'image */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Ombre portée sur l'image pour la profondeur */
}

/* Accessoires iPad */
.ipad-camera {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #f9f9f9;
    border-radius: 50%;
}

.ipad-home-bar {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: #f9f9f9;
    border-radius: 10px;
}

/* Animation fluide 8 images */
@keyframes scrollSlides {
    0%, 10% { transform: translateX(0); }
    12.5%, 22.5% { transform: translateX(-12.5%); }
    25%, 35% { transform: translateX(-25%); }
    37.5%, 47.5% { transform: translateX(-37.5%); }
    50%, 60% { transform: translateX(-50%); }
    62.5%, 72.5% { transform: translateX(-62.5%); }
    75%, 85% { transform: translateX(-75%); }
    87.5%, 97.5% { transform: translateX(-87.5%); }
    100% { transform: translateX(0); }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .ipad-device.expert-design {
        height: 350px;
        border-radius: 30px;
        padding: 12px;
    }
}









/* --- ESPACEMENT ET STRUCTURE DU CONTAINER --- */

/* On cible spécifiquement le container de la galerie pour ne pas affecter les autres */
.ipad-gallery-section .container {
    max-width: 1200px;
    margin: 0 auto;           /* Centre le container horizontalement */
    padding: 40px 20px;       /* Marge interne : 80px haut/bas, 20px côtés */
    display: flex;
    flex-direction: column;   /* Aligne le titre et l'iPad verticalement */
    margin-top: -80px;
    align-items: center;      /* Centre tout le contenu */
    gap: 40px;                /* Espace constant entre le titre et l'iPad */
}

/* Style du titre pour un rendu pro */
.ipad-gallery-section .section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;                /* On gère l'espace via le 'gap' du container */
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

/* Petite ligne sous le titre pour le look "Expert" */
.ipad-gallery-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 660px;
    border-bottom-left-radius: 40px;
    height: 4px;
    background-color: #C00809; /* Rappel du rouge de l'iPad */
    border-radius: 2px;
}

/* Correction responsive pour mobile */
@media (max-width: 768px) {
    .ipad-gallery-section .container {
        padding: 40px 15px;
        gap: 25px;
    }
    
    .ipad-gallery-section .section-title {
        font-size: 1.6rem;
    }
}



/* --- CONFIGURATION GÉNÉRALE --- */
.ipad-gallery-section {
    background-color: #f9f9f9; /* Fond blanc pur */
    padding: 100px 0;
    text-align: center;
}

/* --- TITRE DE LA SECTION --- */
.section-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.8rem;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    background: #cc0809;
    border-radius: 50px;
}

/* --- LE BOUTON AVEC REMPLISSAGE DIAGONAL --- */
.btn-diagonal-fill {
    position: relative;
    display: inline-block;
    margin-top: 50px;
    padding: 20px 50px;
    font-family: 'Arial Black', sans-serif;
    font-size: 16px;
    color: #cc0809; /* Couleur initiale du texte */
    text-decoration: none;
    border: 3px solid #cc0809;
    background: transparent;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}

/* La couche de remplissage diagonal */
.btn-fill {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #cc0809;
    transform: skewX(-25deg);
    transition: left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

/* L'effet de mini-bulles / quadrillé */
.btn-bubbles {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
   /*  background-image: radial-gradient(rgba(255,255,255,0.2) 2px, transparent 2px); */
    background-size: 10px 10px; /* Taille du quadrillage/bulles */
    transform: skewX(-25deg);
    transition: left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

/* HOVER : Remplissage et changement de couleur */
.btn-diagonal-fill:hover {
    color: #ffffff; /* Texte devient blanc */
}

.btn-diagonal-fill:hover .btn-fill,
.btn-diagonal-fill:hover .btn-bubbles {
    left: 0;
}

/* Animation de pulsation légère sur le bouton */
.btn-diagonal-fill {
    animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(204, 8, 9, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(204, 8, 9, 0); }
    100% { box-shadow: 0 0 0 0 rgba(204, 8, 9, 0); }
}

/* --- FIX IPAD (Pour rappel) --- */
.ipad-device.expert-design {
    border: 6px solid #b30708;
    background: #cc0809;
    box-shadow: 0 35px 70px rgba(0,0,0,0.15);
}













/* --- BOUTON AVEC OFFSET RÉDUIT --- */
.btn-diagonal-fill {
    position: relative;
    display: inline-block;
    padding: 20px 280px;
    font-family: 'Arial Black', sans-serif;
    color: #cc0809;
    border: 3px solid #cc0809;
    background: transparent;
    overflow: hidden; /* Important pour cacher l'offset */
    z-index: 1;
    transition: color 0.3s ease;
}

/* On réduit le skew (inclinaison) et le point de départ */
.btn-fill, .btn-bubbles {
    position: absolute;
    top: 0;
    /* On passe de -100% à -110% pour cacher juste ce qu'il faut avec le skew */
    left: -115%; 
    width: 120%; /* On l'élargit un peu pour couvrir tout l'espace lors du glissement */
    height: 100%;
    background: #cc0809;
    /* Un angle moins prononcé (20deg au lieu de 25deg) réduit l'effet de distance */
    transform: skewX(-20deg); 
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

/* Le quadrillage (bubbles) suit le même mouvement */
.btn-bubbles {
   /* background-image: radial-gradient(rgba(255,255,255,0.2) 2px, transparent 2px); */
    background-size: 10px 10px;
}

/* État Hover : l'offset arrive à zéro */
.btn-diagonal-fill:hover .btn-fill,
.btn-diagonal-fill:hover .btn-bubbles {
    left: -10%; /* Ajusté pour compenser le skew et remplir tout le bouton */
}

.btn-diagonal-fill:hover {
    color: #ffffff;
}



















/* Points de navigation (Dots) */
.dots-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 15;
}

.dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #cc0809; /* Ton rouge CNL */
    transform: scale(1.3);
}

/* Flèches de navigation */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: background 0.3s;
}

.nav-btn:hover { background: #cc0809; }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }





/* --- CONFIGURATION DE LA SECTION --- */
.ipad-gallery-section {
    background-color: #f9f9f9;
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}

/* --- STYLE DU TITRE & CURSEUR --- */
.section-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 50px;
    min-height: 1.2em; /* Évite le saut de mise en page pendant l'écriture */
}

.cursor {
    color: #cc0809;
    font-weight: bold;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* --- L'IPAD (MODEL EXPERT) --- */
.ipad-device.expert-design {
    position: relative;
    width: 95%;
    max-width: 900px;
    height: 550px;
    background: #cc0809; /* Couleur rouge CNL */
    border-radius: 45px;
    padding: 12px;
    margin: 0 auto 60px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.2);
    border: 3px solid #b30708;
}

.ipad-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 30px;
    overflow: hidden;
    /* Optimisation du rendu */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
}

.slider-track {
    display: flex;
    width: 800%; /* Pour 8 images */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.slide {
    width: 12.5%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    display: block;
}

/* --- BOUTONS DE NAVIGATION --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    transition: background 0.3s, transform 0.2s;
    backdrop-filter: blur(4px);
}

.nav-btn:hover { background: #cc0809; }
.nav-btn:active { transform: translateY(-50%) scale(0.9); }
.prev { left: 20px; }
.next { right: 20px; }

/* --- DOTS (POINTS DE NAVIGATION) --- */
.dots-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #fff;
    width: 30px; /* Effet "pilule" moderne */
    border-radius: 10px;
}

/* --- ACCESSOIRES IPAD --- */
.ipad-camera {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
}

.ipad-home-bar {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: #f9f9f9;
    border-radius: 10px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .ipad-device.expert-design { height: 400px; }
    .section-title { font-size: 1.8rem; }
    .nav-btn { width: 40px; height: 40px; font-size: 18px; }
}













/* Conteneur principal qui limite la vue */
.expert-gallery-container {
    width: 100%;
    max-width: 800px; /* Ajuste selon ton design */
    margin: auto;
    overflow: hidden; /* Cache tout ce qui dépasse du cadre */
    position: relative;
    border-radius: 25px; /* Pour matcher ton cadre rouge */
}

/* La bande qui défile */
#track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
}

/* Chaque slide forcée à 100% du cadre */
.expert-slide {
    flex: 0 0 100%; /* FIX CRITIQUE : Largeur fixe de 100%, pas de rétrécissement */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.expert-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Garde une belle image sans déformation */
    border-radius: 15px;
}










/* --- SECTION CONTACT JEFHIP (DARK MODE) --- */
.contact-section {
    position: relative;
    background-color: #c00809; /* Fond gris très foncé comme la capture */
    color: #ffffff;
    padding: 80px 5%;
    overflow: hidden;
    border-bottom-left-radius: 50px;
    display: flex;
    align-items: center;
    min-height: 450px;
}

.contact-container {
    position: relative;
    z-index: 10;
    max-width: 850px;
    width: 100%;
}

.contact-title {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-desc9 {
    color: #e0e0e0;
    font-size: 21.85px;
    max-width: 600px;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* --- BOUTONS ORANGE --- */
.contact-buttons {
    display: flex;
    gap: 15px; /* Espace entre les boutons */
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.btn-item {
    background-color: #f56a31; /* Orange Jefhip */
    border: none;
    border-radius: 12px;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-item:hover {
    transform: translateY(-8px) scale(1.05);
    background-color: #ff7b47; /* Orange plus brillant au survol */
    border-radius: 50%; /* Devient rond au survol pour le style */
}

.icon-svg {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1); /* Force les icônes en blanc pur */
}

/* --- ZONE DE MESSAGE (L'ENCADRÉ) --- */
.message-box {
    background: rgba(255, 255, 255, 0.05); /* Fond transparent léger */
    border-left: 4px solid #f56a31; /* Barre orange à gauche */
    padding: 20px 25px;
    max-width: 700px;
    border-radius: 0 10px 10px 0;
    min-height: 70px;
    display: flex;
    align-items: center;
}

.message-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff;
}

/* --- LOGO MESSENGER FLOTTANT (ORANGE) --- */
.contact-bg-phone {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    z-index: 1;
    pointer-events: none;
    opacity: 1; /* Pleine visibilité comme sur l'image */
}

.contact-bg-phone img {
    width: 100%;
    filter: none; /* On garde la couleur orange d'origine de l'image */
    animation: floatAnim 5s ease-in-out infinite;
}

@keyframes floatAnim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .contact-bg-phone {
        display: none; /* On cache le gros logo sur mobile pour pas casser le texte */
    }
    .contact-section {
        text-align: center;
        padding: 50px 20px;
    }
    .contact-buttons {
        justify-content: center;
    }
    .message-box {
        margin: 0 auto;
    }
}





/* --- MOBILE FIX : SECTION CONTACT --- */
@media screen and (max-width: 768px) {
    
    /* On centre tout le texte de la section */
    .contact-section {
        padding: 40px 15px !important;
        text-align: center !important;
    }

    .contact-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre les éléments verticalement */
    }

    /* Rapatisse le titre pour qu'il ne prenne pas trop de place */
    .contact-title {
        font-size: 1.4rem !important; /* Plus petit sur mobile */
        line-height: 1.2;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /* Rapatisse la description */
    .contact-desc9 {
        font-size: 0.95rem !important;
        padding: 0 10px;
        margin-bottom: 20px !important;
    }

    /* Aligne les boutons au centre (4 en haut, 1 en bas ou 3 et 2) */
    .contact-buttons {
        justify-content: center !important;
        margin-left: 0 !important;
        gap: 8px !important;
        width: 100%;
    }

    /* Rapatisse un peu les boutons pour qu'ils rentrent mieux */
    .btn-item {
        width: 55px !important;
        height: 55px !important;
        border-radius: 10px !important;
    }

    .icon-svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Fix de la boîte de message */
    .message-box {
        margin-top: 20px !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: 3px solid #f56a31; /* Barre orange en haut au lieu de gauche */
        border-radius: 8px !important;
        padding: 15px !important;
        justify-content: center !important;
        min-height: 50px !important;
    }

    .message-text {
        font-size: 1rem !important;
        text-align: center;
    }
}