/* ==========================================================================
   GIRAAF PARK - UNIFIED MAIN CSS
   Compilation des styles globaux, header, footer, responsive et pages.
   ========================================================================== */

/* --- 1. Variables Globales --- */
:root {
    /* Couleurs */
    --gp-red: #DD211D; /* Rouge de la marque */
    --gp-black: #050505; /* Noir de fond */
    --gp-white: #FFFFFF; /* Blanc de texte */
    --gp-gray: #888888; /* Gris pour texte secondaire/muet */
    --gp-green-seed: #228B22; /* Vert pour Giraaf Seed */

    /* Dimensions */
    --header-height-desktop: 80px;
    --header-height-mobile: 65px;
    --header-height: var(--header-height-desktop);
    --gp-container-max-width: 1300px;
    --gp-padding-x: 20px;
    --gp-border-radius: 8px; /* Ajouté car utilisé plus bas */

    /* Typographie */
    --font-main: 'Montserrat', sans-serif;
    --font-title-hero: 'Syne', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Transitions */
    --gp-transition-base: all 0.3s ease-in-out;
}

/* --- 2. BASE & LAYOUT --- */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: var(--gp-black);
    color: var(--gp-white);
    font-family: var(--font-main);
    margin: 0;
    overflow-x: hidden;
    line-height: var(--line-height-base);
}

main {
    padding-top: var(--header-height);
    min-height: 70vh;
}

.gp-container {
    max-width: var(--gp-container-max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--gp-padding-x);
}

/* --- 3. HEADER / NAVIGATION --- */
.main-header {
    position: fixed; top: 0; width: 100%; height: var(--header-height);
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px);
    z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center;
}

.header-container {
    padding: 0 var(--gp-padding-x);
    display: flex; justify-content: space-between; align-items: center;
}

.site-logo-img { height: 30px; filter: brightness(0) invert(1); }

/* Menu Desktop */
.nav-menu {
    display: flex; list-style: none; gap: 25px; margin: 0; padding: 0;
}
.nav-item a {
    text-decoration: none; color: rgba(255,255,255,0.6);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    transition: var(--gp-transition-base);
}
.nav-item.active a, .nav-item a:hover { color: var(--gp-red); }

/* Language Switcher */
.language-switcher a {
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold;
}
.language-switcher a:hover { color: #fff !important; }
.language-switcher a.active { color: var(--gp-red) !important; }
.language-switcher span { color: rgba(255, 255, 255, 0.3) !important; font-weight: 700; }

/* Bouton hamburger */
.navbar-toggler { border: none !important; box-shadow: none !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- 4. FOOTER --- */
.gp-footer {
    background: #000;
    padding: 80px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-container {
    max-width: var(--gp-container-max-width); margin: 0 auto; padding: 0 var(--gp-padding-x);
}

.footer-cta-section { margin-bottom: 60px; text-align: center; }
.footer-cta-section h2 { 
    font-size: clamp(2rem, 5vw, 4rem); 
    font-weight: 900; line-height: 1.1; margin: 0; 
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 60px;
}

.footer-col h3 {
    color: var(--gp-red); font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 30px;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 15px; }
.footer-col a {
    color: var(--gp-gray); text-decoration: none; font-size: 14px;
    transition: var(--gp-transition-base);
}
.footer-col a:hover { color: #fff; padding-left: 5px; }

/* Info Contact */
.contact-info-list li {
    display: flex; align-items: center; gap: 10px; color: var(--gp-gray); font-size: 14px;
}
.contact-info-list i { color: var(--gp-red); width: 20px; }

/* Réseaux Sociaux */
.social-links { display: flex; gap: 15px; margin-top: 30px; }
.social-icon {
    width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; transition: var(--gp-transition-base);
}
.social-icon:hover { background: var(--gp-red); border-color: var(--gp-red); }

/* Footer Bottom */
.footer-bottom {
    padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; color: #444; text-transform: uppercase;
}

/* --- 5. COMPOSANTS GLOBAUX (Boutons, Cartes) --- */

/* Boutons */
.btn-giraaf {
    display: inline-block; padding: 12px 25px;
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    text-decoration: none; letter-spacing: 1px;
    border-radius: 4px; border: 2px solid #fff; color: #fff;
    transition: all 0.3s ease-in-out;
}
.btn-giraaf:hover { background-color: transparent; border-color: #fff; color: #fff; }

.btn-giraaf.btn-red { background-color: var(--gp-red); border-color: var(--gp-red); color: #fff; }
.btn-giraaf.btn-red:hover { background-color: transparent; border-color: var(--gp-red); color: var(--gp-red); }

/* Cartes (Services / Solutions / Cards) */
.gp-card, .solution-item-card, .service-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gp-border-radius);
    padding: 20px;
    text-align: center;
    transition: var(--gp-transition-base);
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
}

/* Spécifique gp-card : bordure gauche rouge */
.gp-card {
    border-left: 3px solid var(--gp-red);
}

.gp-card:hover {
    transform: translateY(-5px);
    border-color: var(--gp-red);
}

/* Icones dans les cartes */
.gp-card-icon, .sol-logo-box, .service-icon {
    height: 80px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--gp-white);
    transition: var(--gp-transition-base);
}

.gp-card:hover .gp-card-icon { color: var(--gp-red); }
.gp-card:hover .gp-card-icon img { filter: grayscale(0%) brightness(100%); opacity: 1; }

.sol-logo-box img, .gp-card-icon img {
    max-width: 100%; height: auto; max-height: 100%; width: auto;
}

/* Description dans les cartes */
.gp-card-desc, .solution-item-card p, .service-description {
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Sections Tags */
.category-block {
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.section-tag {
    color: var(--gp-red); font-size: 0.8rem; text-align: center; margin-bottom: 30px;
}

/* --- 6. PAGE ACCUEIL (Hero) --- */
.home-hero-container {
    position: relative; width: 100%; min-height: 95vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: transparent;
}
.hero-watermark-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90vw; max-width: 1300px; opacity: 0.07; z-index: 1;
    pointer-events: none; user-select: none;
}
.hero-text-box { position: relative; z-index: 10; text-align: center; max-width: 900px; padding: 0 20px; }
.hero-text-box p { color: var(--gp-white); font-size: 1.1rem; line-height: 1.6; }

.hero-main-title {
    font-family: var(--font-title-hero); font-size: clamp(2.5rem, 8vw, 6.5rem);
    font-weight: 900; line-height: 0.85; text-transform: uppercase; margin-bottom: 25px; color: #fff;
}
.hero-main-title span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.25); }
.hero-btns-group { display: flex; gap: 20px; justify-content: center; margin-top: 50px; }

/* --- 7. PAGE SOLUTIONS --- */
.solutions-page-wrapper { padding-bottom: 80px; }
.solutions-header { text-align: center; margin-bottom: 60px; padding-top: 50px; }
.solutions-header h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 20px; }
.solutions-header p { color: var(--gp-gray); max-width: 600px; margin: 0 auto; }

/* --- 8. PAGE AGENCE (Timeline / CV) --- */
.agency-page .row.justify-content-center {
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--gp-border-radius);
}

.agency-page .cv-item .cv-date {
    color: var(--gp-white);
    font-weight: 700;
}

.agency-page .cv-item .cv-job {
    font-size: 1.2rem;
    color: var(--gp-white);
    margin-bottom: 5px;
}

.agency-page .cv-item p {
    color: var(--gp-white);
    font-size: 1rem;
    opacity: 0.8;
}

/* --- 9. RESPONSIVE --- */

/* Tablette et Mobile (< 991px) */
@media (max-width: 991px) {
    :root { --header-height: var(--header-height-mobile); }
    .header-container { padding: 0 20px; }
    
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.95); position: fixed; top: var(--header-height); left: 0; width: 100%;
        height: calc(100vh - var(--header-height)); padding: 20px; overflow-y: auto; z-index: 990;
    }
    .nav-menu { flex-direction: column; align-items: center; gap: 20px !important; }
    .nav-menu .nav-item a { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); text-align: center; display: block; }
    .nav-item.active .nav-link { color: var(--gp-red) !important; font-weight: 900; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
    .footer-bottom p { margin-bottom: 10px; }
}

/* --- 10. RTL (Arabe) --- */
html[dir="rtl"] body {
    direction: rtl; text-align: right;
}
html[dir="rtl"] .footer-col ul { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .footer-cta { text-align: right; }
html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }

/* =========================================
   STYLE "PREMIUM GLASS" (Optimisations)
   ========================================= */

/* 1. Header Minimaliste */
.page-header-minimal {
    text-align: center;
    margin-bottom: 80px;
    padding-top: 40px;
}

.page-title-elegant {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: -1px; /* Tendance moderne */
}

.page-subtitle-light {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto 40px;
    font-weight: 400;
}

/* 2. Recherche "Invisible" */
.search-wrapper-minimal {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.search-wrapper-minimal:focus-within {
    border-color: var(--gp-red);
}
.search-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}
.search-input-minimal {
    width: 100%;
    background: transparent;
    border: none;
    padding: 15px 15px 15px 30px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}

/* 3. Catégorie (Petit badge au lieu du gros texte rouge) */
.category-section {
    margin-bottom: 80px;
}
.category-header {
    text-align: left; /* Alignement gauche plus propre */
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}
.category-badge {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    color: var(--gp-red);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}

/* 4. Carte "Glass" (Le changement majeur) */
.glass-card {
    background: rgba(255, 255, 255, 0.02); /* Quasi transparent */
    backdrop-filter: blur(10px); /* Effet flou derrière */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure très fine */
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* Contenu de la carte */
.icon-wrapper {
    margin-bottom: 20px;
    color: var(--gp-red);
    font-size: 1.8rem;
}

.glass-card-title {
    font-family: 'Montserrat', sans-serif; /* Plus lisible que Syne ici */
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.4;
}

.glass-card-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5); /* Gris doux */
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}

/* Lien discret en bas */
.link-arrow {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
}
.link-arrow .arrow { color: var(--gp-red); transition: transform 0.3s ease; }

.glass-card:hover .link-arrow { gap: 15px; }
.glass-card:hover .arrow { transform: translateX(5px); }

/* --- CORRECTIF HAUTEUR ÉGALE DES CARTES --- */

/* 1. On s'assure que la colonne parente permet l'étirement */
.service-item {
    display: flex !important;
    height: auto !important; /* Laisse Bootstrap gérer, mais prépare le terrain */
}

/* 2. La carte doit prendre 100% de la hauteur disponible */
.glass-card {
    width: 100%;
    height: 100%; /* C'est LA ligne importante */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse le bas vers le bas */
    
    /* Tes styles existants (ne pas supprimer) */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.4s ease;
}

/* 3. Le contenu texte prend tout l'espace libre */
.glass-card-content {
    flex-grow: 1; /* C'est ce qui pousse le bouton vers le bas */
    display: flex;
    flex-direction: column;
}

/* 4. Le footer (lien) reste collé en bas */
.glass-card-footer {
    margin-top: 20px; /* Petit espace de sécurité */
}

/* --- 1. LE TITRE DE CATÉGORIE (Le principal coupable) --- */
/* On change le rouge agressif par un style "Badge" gris tech */
.category-badge {
    color: rgba(255, 255, 255, 0.9) !important; /* Texte quasi blanc */
    font-family: 'Montserrat', sans-serif; /* Police plus neutre */
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* On ajoute un petit cadre discret au lieu de la couleur rouge */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
}

/* On garde juste une petite puce rouge devant pour la marque */
.category-badge::before {
    content: '●';
    color: var(--gp-red);
    margin-right: 10px;
    font-size: 1.2em;
    vertical-align: middle;
}

/* Alignement du titre de catégorie */
.category-header {
    text-align: center; /* Plus joli centré */
    margin-bottom: 40px;
    border-bottom: none; /* On enlève la ligne si elle existe */
}

/* --- 2. LES ICÔNES (Les ronds rouges) --- */
/* Par défaut : Blanc (Calme) */
.icon-wrapper {
    margin-bottom: 25px;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8); /* Icône blanche par défaut */
    transition: all 0.4s ease;
    
    /* Si vous avez des cercles de fond, on les rend gris transparents */
    background: rgba(255, 255, 255, 0.05);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; margin-right: auto; /* Centré */
}

/* Au survol UNIQUEMENT : Rouge (Dynamique) */
.glass-card:hover .icon-wrapper {
    color: #fff;
    background-color: var(--gp-red); /* Le fond devient rouge au survol */
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(221, 33, 29, 0.4);
}

/* --- 3. LE TEXTE DU LIEN (En Savoir Plus) --- */
/* On le passe en blanc, seule la flèche reste rouge */
.link-arrow {
    color: rgba(255, 255, 255, 0.7) !important; /* Texte gris clair */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-top: auto; /* Force le lien en bas */
}

.link-arrow .arrow {
    color: var(--gp-red); /* Juste la flèche en rouge */
    font-size: 1.1em;
}

.glass-card:hover .link-arrow {
    color: #fff !important; /* Devient blanc pur au survol */
}

/* --- 4. AJUSTEMENT GLOBAL DES CARTES --- */
/* Assurer l'alignement centré du contenu */
.glass-card-content {
    text-align: center; /* Tout centré pour l'élégance */
}

/* --- NAVIGATION DES CATÉGORIES (STICKY) --- */
.category-nav-bar {
    position: sticky;
    top: var(--header-height); /* Se colle juste sous le header principal */
    z-index: 900;
    background: rgba(0, 0, 0, 0.8); /* Fond sombre semi-transparent */
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    margin-bottom: 40px;
    overflow-x: auto; /* Permet le scroll horizontal sur mobile */
    white-space: nowrap; /* Empêche le retour à la ligne */
    -webkit-overflow-scrolling: touch;
    /* Masquer la barre de scroll disgracieuse */
    scrollbar-width: none; 
}
.category-nav-bar::-webkit-scrollbar { display: none; }

.cat-nav-list {
    display: flex;
    justify-content: center; /* Centré sur PC */
    gap: 10px;
    margin: 0; padding: 0; list-style: none;
    min-width: min-content; /* S'assure que le contenu n'est pas écrasé */
    padding: 0 20px;
}

.cat-nav-link {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.cat-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* État Actif (quand on est dans la section) */
.cat-nav-link.active {
    background: var(--gp-red);
    color: #fff;
    border-color: var(--gp-red);
    box-shadow: 0 0 15px rgba(221, 33, 29, 0.4);
}

/* Ajustement Mobile */
@media (max-width: 768px) {
    .cat-nav-list { justify-content: flex-start; /* Alignement gauche sur mobile pour scroller */ }
}

/* Ajustement pour que l'ancre ne soit pas cachée par le header */
.category-section {
    scroll-margin-top: 140px; /* Header (80px) + Subnav (60px) */
}

/* --- Mise à jour Nav Bar --- */
.category-nav-bar {
    /* ... garder les propriétés existantes ... */
    text-align: center; /* Centrer le tout */
}

.cat-nav-list {
    /* ... garder flex ... */
    flex-wrap: nowrap; /* Force sur une ligne */
    overflow-x: auto; /* Scroll si besoin */
    padding-bottom: 5px; /* Espace pour la barre de scroll invisible */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.cat-nav-list::-webkit-scrollbar { display: none; }

.cat-nav-link {
    /* ... garder le style de base ... */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    max-width: 200px; /* Force une largeur max */
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." si c'est encore trop long */
    font-size: 0.75rem; /* Un peu plus petit */
    padding: 10px 20px;
}

/* --- FAQ STYLE GLASS --- */

.gp-glass-accordion {
    background: transparent;
    border: none;
}

.gp-glass-accordion .accordion-item {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    margin-bottom: 15px;
    overflow: hidden;
    transition: var(--gp-transition-base);
}

.gp-glass-accordion .accordion-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Le bouton (Question) */
.glass-accordion-btn {
    background: transparent !important;
    color: #fff !important;
    font-family: var(--font-main);
    font-weight: 600;
    padding: 20px 25px;
    box-shadow: none !important;
    font-size: 1rem;
}

/* Icone de flèche */
.glass-accordion-btn::after {
    filter: brightness(0) invert(1); /* Flèche blanche */
}

/* Style quand ouvert */
.glass-accordion-btn:not(.collapsed) {
    color: var(--gp-red) !important; /* Question devient rouge */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contenu (Réponse) */
.glass-accordion-content {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    padding: 20px 25px;
    font-size: 0.95rem;
}


/* =========================================
   HARMONISATION FOOTER (Premium Typo)
   ========================================= */

.gp-footer {
    background-color: #000;
    padding: 100px 0 40px; /* Plus d'espace pour respirer */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
}

/* 1. Appel à l'action (Typo Syne) */
.footer-cta {
    text-align: center;
    margin-bottom: 80px;
}

.cta-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gp-red);
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.cta-main {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -1px;
}

/* 2. Titres des colonnes (Typo Syne) */
.footer-col h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff; /* On peut mettre blanc ou rouge selon l'envie */
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Liens et Listes (Typo Montserrat) */
.footer-col ul li a, 
.contact-info-list a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5); /* Gris doux */
    transition: all 0.3s ease;
}

.footer-col ul li a:hover, 
.contact-info-list a:hover {
    color: #fff;
    padding-left: 5px; /* Petit mouvement fluide */
}

/* Icônes de contact */
.contact-info-list i {
    color: var(--gp-red);
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

/* 4. Barre de Copyright (Typo Montserrat Fine) */
.footer-bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.flex-bottom p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.flex-bottom .signature strong {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
}

/* --- DESIGN DES PAGES LÉGALES --- */
.legal-wrapper-glass {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 60px 50px !important;
    margin-bottom: 50px;
}

.legal-text-style {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.legal-text-style h2 {
    font-family: 'Syne', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 45px 0 20px 0;
    border-left: 3px solid var(--gp-red);
    padding-left: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legal-text-style h2:first-child { margin-top: 0; }

.legal-text-style p { margin-bottom: 20px; }

.legal-text-style strong { color: #fff; font-weight: 700; }

.legal-text-style a {
    color: var(--gp-red);
    text-decoration: underline;
    transition: opacity 0.3s;
}

.legal-text-style a:hover { opacity: 0.8; }

.last-updated-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gp-red);
    margin-bottom: 30px;
    border: 1px solid rgba(221, 33, 29, 0.2);
}

/* --- 1. ESPACEMENT GLOBAL DES SECTIONS --- */
.home-page-content section {
    margin-bottom: 100px; /* Donne de l'air entre chaque bloc */
}

/* --- 2. SLIDER CLIENTS (Nettoyage des carrés gris) --- */
.clients-slider-section {
    padding: 60px 0;
}

.client-logo-box {
    flex: 0 0 auto;
    width: 200px;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo-box img {
    max-height: 40px;
    width: auto;
    /* FILTRE MAGIQUE : Supprime les fonds gris clairs et rend le logo blanc */
    filter: grayscale(1) brightness(3) contrast(1.2); 
    mix-blend-mode: screen; /* Fusionne le fond de l'image avec le noir du site */
    opacity: 0.5;
    transition: all 0.4s ease;
}

.client-logo-box:hover img {
    filter: none; /* Reprend sa couleur d'origine au survol */
    mix-blend-mode: normal;
    opacity: 1;
}

/* --- 3. SECTION SEED (Harmonisation du bloc) --- */
.seed-promo-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(34, 139, 34, 0.2) !important;
    border-radius: 20px;
    padding: 80px 60px !important; /* Plus d'espace interne */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.seed-promo-visual {
    flex: 1;
    text-align: right;
}

.seed-promo-visual img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(34, 139, 34, 0.2));
}

.seed-promo-info {
    flex: 1.5;
    text-align: left;
}

/* Typographie spécifique Seed */
.seed-promo-info h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    color: #fff;
    margin: 15px 0;
}

.seed-promo-info p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 35px;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* --- CORRECTIF ARABE (RTL) --- */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .hero-text-box {
    text-align: center; /* On garde le titre centré même en arabe */
}

html[dir="rtl"] .seed-promo-info {
    text-align: right !important; /* Texte promo à droite */
}

html[dir="rtl"] .link-arrow .arrow {
    display: inline-block;
    transform: scaleX(-1); /* Inverse la flèche → pour qu'elle devienne ← */
}

html[dir="rtl"] .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .footer-grid {
    text-align: right;
}

/* Barre de recherche unifiée Style Optimisation */
.search-wrapper-minimal {
    position: relative;
    max-width: 500px;
    margin: 40px auto;
}

.search-input-minimal {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px 12px 45px;
    border-radius: 50px;
    color: #fff;
    outline: none;
    transition: 0.3s;
    border-bottom: 2px solid rgba(221, 33, 29, 0.3); /* La ligne rouge discrète */
}

.search-input-minimal:focus {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #DD211D; /* Rouge vif au focus */
    box-shadow: 0 5px 15px rgba(221, 33, 29, 0.1);
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
}