/* ============================================
   HOMEPAGE BULLE STUDIO - CSS
   ============================================ */

/* ============================================
   VARIABLES
   ============================================ */
:root {
    --theme-color: #F4C426;
    --theme-color-light: #FFFCF3;
    --theme-color-beige: #EFE7D4;
    --color-text: #2B2B2B;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Albert Sans', sans-serif;
}

/* ============================================
   1. HERO SECTION
   ============================================ */

.homepage-hero {
    min-height: 85vh;
    background: rgba(255, 250, 239, 1);
    padding-top: 170px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.homepage-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.homepage-hero-left h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    margin-bottom: 16px;
    color: var(--color-primary);
}
a.btn.cta2 {
    display: flex;
    background: rgba(239, 231, 212, 1);
    gap: 10px;
    color: var(--color-text);
}
.homepage-hero-left h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.1;
    margin-bottom: 55px;
    color: var(--color-text);
}

.homepage-hero-left .hero-description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 32px;
    max-width: 540px;
}
.homepage-hero .hero-content > *:nth-child(3) {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0%;
    color: var(--color-text);
}
.homepage-hero-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.homepage-hero-trustpilot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.homepage-hero-trustpilot svg {
    height: 14px;
}

.homepage-hero-trustpilot span {
    font-size: 14px;
    color: #666;
}

.homepage-hero-right {
    position: relative;
}

.homepage-hero-image {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    OBJECT-FIT: CONTAIN;
}

.homepage-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}
/* ============================================
   2. GALERIE LOGOS CLIENTS
   ============================================ */

.homepage-logos {
    padding: 0;
    background: #fff;
}

.logos-scroll-wrapper {
    overflow: hidden;
    width: 100%;
}

.logos-scroll-track {
    display: flex;
    gap: 20px;
    animation: scroll-logos 30s linear infinite;
}

.logos-scroll-track img {
    height: 150px;
    width: 300px;
    opacity: 1;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    object-fit: cover;
}

.logos-scroll-track img:hover {
    opacity: 1;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   3. CRÉER SANS RECRUTER
   ============================================ */
.cequilfaut .grid {
    grid-template-columns: 1fr 488px;
}

.image-haut {margin-bottom: 20px;}
.cequilfaut h3.mb-md {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 21px;
    line-height: 100%;
    letter-spacing: 0%;
}

.cequilfaut .gauche p {
    font-weight: 400;
    /* font-size: 16px; */
    line-height: 27px;
    letter-spacing: 0%;
}
.item-line {
    border-left: 2px solid var(--color-primary);
    padding-left: 30px;
}
.cequilfaut .gauche {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.cequilfaut a {
    margin-left: 0px;
    margin-top: 30px;
}
.collaborer .gauche {
        padding: 0 ;
}
.collaborer.grid {
    grid-template-columns: 500px 1fr;
    gap: 100px;
}
.banniere a {
    margin: 0;
}
/* ============================================
   4. NOS SOLUTIONS
   ============================================ */

.paragraphe .ponctuel-intro {max-width: 550px !important;}

.ponctuel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 40px;
    align-items: start;
}

.ponctuel-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    position: relative;
}

/* Zone image */
.ponctuel-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.ponctuel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ponctuel-card:hover img {
    transform: scale(1.04);
}

/* Overlay — titre haut / prix bas */
.ponctuel-overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(30, 30, 30, 0.25);
    transition: background 0.3s ease;
    padding-top: 30px;
}

.ponctuel-card:hover .ponctuel-overlay {
    background: rgba(30, 30, 30, 0.62);
}

/* Titre — centré en haut, normal et hover */
.ponctuel-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
}

/* Description — masquée au repos */
.ponctuel-card-desc {
    display: none;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    padding-top: 12px;
}

.ponctuel-card:hover .ponctuel-card-desc {
    display: block;
}

/* Prix — toujours en bas, masqué au repos */
.ponctuel-card-price {
    display: none;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.ponctuel-card:hover .ponctuel-card-price {
    display: block;
}

.ponctuel-card-price strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}
.mb-xl.bloc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.titre {
    max-width: 35%;
}

.bloc-head .paragraphe {
    margin: 0;
}
/* Bandeau "Demander un devis" — réserve la hauteur, invisible au repos */
.ponctuel-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #EFE7D4;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-display);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--color-text);
}

.ponctuel-card:hover .ponctuel-cta {
    visibility: visible;
    opacity: 1;
}
.mb-xl.bloc-head h2 {
    margin: 0;
}
/* ============================================
   SECTION PONCTUEL - TAGS (VISIBLE AU HOVER)
   ============================================ */

/* Tags container - caché par défaut */
.ponctuel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    justify-content: center;
}

/* Afficher les tags au hover de la carte */
.ponctuel-card:hover .ponctuel-tags,
.ponctuel-card-link:hover .ponctuel-tags {
    opacity: 1;
    transform: translateY(0);
}

/* Tag pill */
.ponctuel-tag {
    display: inline-block;
    padding: 4px 12px;
    background: transparent;
    border: 1.5px solid #FFFFFF;
    border-radius: 15px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Hover state sur un tag individuel */
.ponctuel-card:hover .ponctuel-tag:hover,
.ponctuel-card-link:hover .ponctuel-tag:hover {
    background: #FFFFFF;
    color: #2B2B2B;
}

/* Ajustements de la card pour les tags */
.ponctuel-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 24px 0px;
}

.ponctuel-card-title {
    margin-bottom: 0;
}

.ponctuel-card-price {
    margin-top: auto;
}
span.arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.ponctuel-card:hover span.arrow {opacity: 1;}
/* Responsive */
@media (max-width: 768px) {
    .ponctuel-tags {
        gap: 6px;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    
    .ponctuel-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .ponctuel-overlay {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .ponctuel-tag {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .ponctuel-overlay {
        padding: 16px;
    }
}
/* Responsive */
@media (max-width: 1024px) {
    .ponctuel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ponctuel-grid {
        grid-template-columns: 1fr;
    }

    .ponctuel-image {
        aspect-ratio: 4 / 3;
    }
}
/* ============================================
   5. TÉMOIGNAGE
   ============================================ */

.homepage-temoignage {
    padding: 80px 0;
    background: #fff;
}

.temoignage-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.temoignage-quote {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 24px;
    font-style: italic;
}

.temoignage-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.temoignage-function {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.temoignage-link {
    font-size: 14px;
    color: var(--theme-color);
    text-decoration: underline;
}

/* ============================================
   6. C'EST POUR VOUS
   ============================================ */

.homepage-pour-vous {
    padding: 80px 0;
    background: var(--theme-color-light);
}
.cestpourvous {
    background: rgba(255, 252, 243, 1);
}
.cestpourvous .item-line {
    background: #fff;
    padding: 10px 10px 10px 30px;
    margin-bottom: 10px;
}

.cestpourvous h3.mb-md {
    margin-bottom: 0;
}
.homepage-pour-vous h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.pour-vous-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 32px;
    max-width: 740px;
}

.pour-vous-liste {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.pour-vous-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.6;
}

.pour-vous-liste li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--theme-color);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}

/* ============================================
   7. MODES COLLABORATION (ONGLETS)
   ============================================ */

.homepage-collaboration {
    padding: 80px 0;
    background: #fff;
}

.homepage-collaboration h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 12px;
}

.collab-subtitle {
    font-size: 16px;
    text-align: center;
    color: #555;
    margin-bottom: 48px;
}

.collab-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 16px;
}

.collab-tab {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    border-radius: 8px;
}

.collab-tab:hover {
    color: var(--color-text);
}

.collab-tab.active {
    color: var(--color-text);
    background: var(--theme-color-light);
}

.collab-content {
    display: none;
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
}

.collab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collab-content h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 16px;
}

.collab-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 24px;
}

.homepage-collab-cta {
    text-align: center;
    margin-top: 48px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* ============================================
   8. POURQUOI ÇA MARCHE
   ============================================ */
/* ============================================
   SECTION POURQUOI ÇA MARCHE
   ============================================ */

.homepage-pourquoi {
    padding: 80px 0;
    background: #fff;
}

.pourquoi-header {
    text-align: center;
    margin-bottom: 60px;
}

.pourquoi-top-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #666;
    margin-bottom: 16px;
    text-transform: none;
}

.pourquoi-header h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    color: var(--color-text);
    max-width: 900px;
    margin: 0 auto;
}

.pourquoi-header h2 strong {
    font-weight: 700;
}
.homepage-pourquoi .grid.grid-2 {790px:;grid-template-columns: 790px 1fr;}

.bloc-gauche .grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
}
/* ============================================
   GRID 4 CARDS
   ============================================ */

.pourquoi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ============================================
   CARD COMMUNE
   ============================================ */

.pourquoi-card {
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.pourquoi-card h3 {
    margin-bottom: 12px;
    font-family: Bricolage Grotesque;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.pourquoi-card p {
    margin-bottom: 24px;
    font-family: Albert Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
}
.pourquoi-card-orange.pourquoi-card h3, .pourquoi-card-orange.pourquoi-card p {
    color: #FF4B00;
}

.pourquoi-card.pourquoi-card-orange {
    /* padding-left: 40%; */
}
.bloc-gauche .grid.grid-2 .pourquoi-card {
    padding-bottom: 130px;
}

.bloc-gauche .grid.grid-2 .pourquoi-card-violet {
    background-image: url(/wp-content/uploads/2026/04/ClickUp_Bulle_Studio-1.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}
.bloc-gauche .grid.grid-2 .pourquoi-card-beige {
    background-image: url(/wp-content/uploads/2026/04/Meet_Bulle_Studio-1.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}
.pourquoi-card-bleu{
    background-image: url(/wp-content/uploads/2026/04/Loom_Bulle_Studio-1.png);
    background-position: right 90%;
    background-repeat: no-repeat;
}
/* ============================================
   COULEURS DES CARDS
   ============================================ */

/* Card 1 - Violet */
.pourquoi-card-violet {
    background: #E8E4F3;
}

.pourquoi-card-violet h3, .pourquoi-card-violet p {
    color: #1A0088;
}

/* Card 2 - Beige */
.pourquoi-card-beige {
    background: #EFE7D4;
}

.pourquoi-card-beige h3 {
    color: #2B2B2B;
}

/* Card 3 - Bleu */
.pourquoi-card-bleu {
    background-color: rgb(191 196 255 / 20%);
}

.pourquoi-card-bleu h3, .pourquoi-card-bleu p {
    color: #3A39FF;
}

/* Card 4 - Orange */
.pourquoi-card-orange {
    background-color: rgb(255 192 166 / 20%);
    padding: 0;
    overflow: hidden;
    padding-left: 40%;
    background-image: url(/wp-content/uploads/2026/04/Vector.png);
    background-position: center left;
    background-repeat: no-repeat;
}

/* ============================================
   SCREENSHOTS
   ============================================ */



/* ============================================
   CARD 4 - PRIX (Layout spécial)
   ============================================ */

.pourquoi-price-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.pourquoi-logo-bulle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    height: 200px;
    z-index: 1;
}

.pourquoi-logo-bulle svg {
    width: 100%;
    height: 100%;
}

.pourquoi-price-text {
    position: relative;
    z-index: 2;
    padding: 32px 24px;
}




/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .pourquoi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pourquoi-card {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .homepage-pourquoi {
        padding: 60px 0;
    }
    
    .pourquoi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pourquoi-card {
        min-height: auto;
        padding: 28px 20px;
    }
    
    .pourquoi-screenshot {
        margin-top: 20px;
    }
    
    .pourquoi-logo-bulle {
        width: 140px;
        height: 160px;
    }
    
    .pourquoi-price-text h3 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .pourquoi-header h2 {
        font-size: 28px;
    }
    
    .pourquoi-card h3 {
        font-size: 18px;
    }
    
    .pourquoi-card p {
        font-size: 14px;
    }
}

/* ============================================
   9. COMPARAISON SANS/AVEC BULLE
   ============================================ */

.homepage-comparaison {
    padding: 80px 0;
    background: #fff;
}

.homepage-comparaison h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 48px;
}

.comparaison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.comparaison-column {

    border-radius: 12px;
    padding: 32px 24px;
}


.comparaison-column h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.comparaison-column ul {
    list-style: none;
    padding: 0;
}

.comparaison-column li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-family: Albert Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
}


/* ============================================
   10. CAROUSEL SOLUTIONS
   ============================================ */

.homepage-carousel {
    padding: 60px 0;
    background: var(--theme-color-light);
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 24px;
    animation: scroll-carousel 40s linear infinite;
}

.carousel-item {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
}

@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.avantage-item {
    animation: fadeInLeft 0.6s ease-out both;
}

.avantage-item:nth-child(1) { animation-delay: 0.1s; }
.avantage-item:nth-child(2) { animation-delay: 0.2s; }
.avantage-item:nth-child(3) { animation-delay: 0.3s; }
.dans_les_faits-image img {
    height: 141px;
    object-fit: cover;
    width: 100%;
}

.avantages h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.avantages .grid p {
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
}
.dans_les_faits-card .content {
    padding: 20px 10px;
}

.dans_les_faits-card {
    box-shadow: 0px 2px 5px 0px #00000026;
    border-radius: 5px;
}
/* ============================================
   CAROUSEL DANS LES FAITS (+ de 4 items)
   ============================================ */
.dans-les-faits-carousel-wrapper {
    position: relative;
    overflow: visible; /* Changé de hidden à visible */
    padding: 0 60px; /* Espace pour les boutons */
    margin: 0 -60px; /* Compenser le padding */
}

.dans-les-faits-carousel-container {
    overflow: hidden; /* Container interne pour le masquage */
    padding: 1rem 60px; /* Espace pour le box-shadow */
    margin: -1rem -60px; /* Compenser le padding */
}

.dans-les-faits-carousel {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
}

.dans-les-faits-carousel .dans_les_faits-card {
    flex: 0 0 calc(25% - 0.75rem); /* 4 cartes visibles */
    min-width: calc(25% - 0.75rem);
}

/* Contrôles du carousel */
.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.carousel-prev,
.carousel-next {
    border-radius: 50%;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #EFE7D4;
    border: none;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--theme-color);
    color: #fff;
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 1200px) {
    .dans-les-faits-carousel .dans_les_faits-card {
        flex: 0 0 calc(33.333% - 0.67rem); /* 3 cartes */
        min-width: calc(33.333% - 0.67rem);
    }
}

@media (max-width: 768px) {
    .dans-les-faits-carousel-wrapper {
        padding: 0 40px;
        margin: 0 -40px;
    }
    
    .dans-les-faits-carousel-container {
        padding: 1rem 40px;
        margin: -1rem -40px;
    }
    
    .dans-les-faits-carousel .dans_les_faits-card {
        flex: 0 0 calc(50% - 0.5rem); /* 2 cartes */
        min-width: calc(50% - 0.5rem);
    }
    
    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .dans-les-faits-carousel .dans_les_faits-card {
        flex: 0 0 100%; /* 1 carte */
        min-width: 100%;
    }
    
    .dans-les-faits-carousel-wrapper {
        padding: 0 20px;
        margin: 0 -20px;
    }
    
    .dans-les-faits-carousel-container {
        padding: 1rem 20px;
        margin: -1rem -20px;
    }
}
/* ============================================
   11. CTA CENTRAL
   ============================================ */

.homepage-cta-central {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.homepage-cta-central h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 32px;
}

.homepage-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
/* ============================================
   BANDEAU DÉFILANT PRODUCTIONS
   ============================================ */

.productions-ticker {
    background: #F4C426;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

.ticker-wrapper {
    width: 100%;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    animation: scroll-left 30s linear infinite;
    will-change: transform;
}

/* Animation défilement */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause au survol */
.ticker-wrapper:hover .ticker-track {
    animation-play-state: paused;
}

/* Items */
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: transparent;
    border: 1.5px solid #2B2B2B;
    border-radius: 100px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: #2B2B2B;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ticker-item:hover {
    background: #2B2B2B;
    color: #F4C426;
}

.ticker-item:hover svg path {
    fill: #F4C426;
}

.ticker-item span {
    display: inline-block;
}

.ticker-item svg {
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

/* Dots séparateurs */
.ticker-dot {
    display: inline-block;
    font-size: 24px;
    color: #2B2B2B;
    font-weight: 700;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .productions-ticker {
        padding: 12px 0 !important;
    }
    
    .ticker-track {
        gap: 24px;
    }
    
    .ticker-item {
        padding: 8px 20px;
        font-size: 14px;
        gap: 10px;
    }
    
    .ticker-item svg {
        width: 10px;
        height: 9px;
    }
    
    .ticker-dot {
        font-size: 20px;
    }
    
    /* Animation plus rapide sur mobile */
    .ticker-track {
        animation-duration: 25s;
    }
}

@media (max-width: 480px) {
    .ticker-item {
        padding: 6px 16px;
        font-size: 13px;
        gap: 8px;
    }
    
    .ticker-track {
        gap: 20px;
        animation-duration: 20s;
    }
}
/* ============================================
   12. CE QUE NOUS PRODUISONS
   ============================================ */

.homepage-produisons {
    padding: 80px 0;
    background: var(--theme-color-light);
}

.homepage-produisons h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
}

.produisons-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.produisons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.produisons-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.produisons-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.produisons-card-image {
    aspect-ratio: 1;
    background: #ddd;
    overflow: hidden;
}

.produisons-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produisons-card-content {
    padding: 20px;
}

.produisons-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
}

.produisons-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.homepage-produisons-cta {
    text-align: center;
    margin-top: 48px;
}

/* ============================================
   13. NOTRE ÉQUIPE
   ============================================ */

.homepage-equipe {
    padding: 80px 0;
    background: #fff;
}

.homepage-equipe h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 12px;
}

.equipe-subtitle {
    font-size: 16px;
    text-align: center;
    color: #555;
    margin-bottom: 48px;
}

.equipe-photo {
    margin-bottom: 48px;
    border-radius: 16px;
    overflow: hidden;
    max-height: 400px;
}

.equipe-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.equipe-grid {
    display: grid;
    grid-template-columns: repeat(4, 33%);
    gap: 40px;
    overflow-x: scroll;
    margin-bottom: 30px;
    scrollbar-width: thin;
    scrollbar-color: #2B2B2B white;
}

.equipe-item h3 {
    font-family: var(--font-display);
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
}

.equipe-item p {
    font-family: Albert Sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0%;
}

.homepage-equipe-cta {
    text-align: center;
    margin-top: 48px;
}

/* ============================================
   14. RESSOURCES
   ============================================ */

.homepage-ressources {
    padding: 80px 0;
    background: var(--theme-color-light);
}

.homepage-ressources-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

.homepage-ressources h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
}

.ressources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ressource-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ressource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ressource-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ressource-type.article {
    background: #DBEAFE;
    color: #1E40AF;
}

.ressource-type.actualites {
    background: #FEF3C7;
    color: #92400E;
}

.ressource-type.cas-usage {
    background: #D1FAE5;
    color: #065F46;
}

.ressource-type.video {
    background: #FCE7F3;
    color: #9F1239;
}

.ressource-type.webinar {
    background: #E9D5FF;
    color: #6B21A8;
}

.ressource-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.ressource-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}
.article-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    height: 100%;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.article-card h3 {
    font-size: 1.125rem;
    line-height: 1.4;
}

.article-card h3 a {
    color: inherit;
    text-decoration: none;
}

.article-card h3 a:hover {
    color: var(--color-primary);
}
section.section-guide.py-3xl {margin-top: 1rem;}
.newsletter-card h3 {
    color: #FF4B00;
    font-weight: 500;
    font-size: 24px;
}
.card-body {
    padding: 20px;
}
a.link-arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.article-card {
    position: relative;
}
.solutions .grid {
    align-items: center;
    background-color: #FFFCF3;
    justify-content: space-between;
    grid-auto-flow: column;
    padding: 30px 80px;
    background-image: url(/wp-content/uploads/2026/04/Vector-6.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
}
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}
/* ============================================
   15. CTA FINAL
   ============================================ */

.homepage-cta-final {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.homepage-cta-final h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.cta-final-text {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    max-width: 600px;
    margin: 0 auto 32px;
}

.cta-final-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.carousel-tab.active {
    color: #FF4B00;
    background: #FFC0A6;
    border-color: #FFC0A6;
}

.slide-btn {
    color: #FF4B00;
    border-color: #FF4B00;
}
/* ============================================
   16. FAQ
   ============================================ */

.homepage-faq {
    padding: 80px 0;
    background: var(--theme-color-light);
}

.faq-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 48px;
}

.faq-left h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 16px;
}

.faq-left .btn {
    display: inline-block;
}

.faq-accordion {
    max-width: 900px;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 20px;
    border: 0.5px solid #E5E5E5;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--theme-color);
}

.faq-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.faq-question.active .faq-icon .icon-plus {
    display: none;
}

.faq-icon .icon-minus {
    display: none;
}

.faq-question.active .faq-icon .icon-minus {
    display: block;
}

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

.faq-answer p {
    padding-top: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* ============================================
   17. LIVRE BLANC
   ============================================ */

.homepage-livre-blanc {
    padding: 80px 0;
    background: #fff;
}

.livre-blanc-card {
    background: var(--theme-color-light);
    border-radius: 16px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.livre-blanc-left {
    text-align: left;
}

.livre-blanc-left h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 24px;
}

.livre-blanc-form input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: #fff;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 16px;
}

.livre-blanc-form button {
    width: 100%;
}

.livre-blanc-right img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}

/* ============================================
   RESPONSIVE SUPPLÉMENTAIRE
   ============================================ */

@media (max-width: 1024px) {
    .produisons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .equipe-grid {
        grid-template-columns: 1fr;
    }
    
    .ressources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .produisons-grid {
        grid-template-columns: 1fr;
    }
    
    .ressources-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-header {
        grid-template-columns: 1fr;
    }
    
    .livre-blanc-card {
        grid-template-columns: 1fr;
        padding: 32px;
    }
	.pourquoi-card-orange {background-position: left bottom;background-size: 70px;}

.pourquoi-card-bleu {
    padding-bottom: 110px;
}

	
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .homepage-hero-grid,
    .creer-grid,
    .solutions-cards,
    .solutions-portfolio-grid,
    .pourquoi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .homepage-hero-grid,
    .creer-grid,
    .solutions-cards,
    .solutions-portfolio-grid,
    .pourquoi-grid,
    .comparaison-grid {
        grid-template-columns: 1fr;
    }
    
    .homepage-hero {
        padding-top: 140px;
    }
    
    .collab-tabs {
        flex-direction: column;
        align-items: stretch;
    }
		.titre {
    max-width: 100%;
}

.paragraphe {
    width: 100%;
}

.mb-xl.bloc-head {
    display: block;
}
}