/* Variables */
:root {
    --gradient-linear: linear-gradient(50deg, #7C4FD0 0%, #D589E3 36%, #FFB367 70%, #FCD5A1 100%);
    --gradient-cta-discussion: linear-gradient(20deg, #7C4FD0 0%, #D589E3 100%);
    --color-informer: #9968FF;
    --color-conseiller: #FF6CB2;
    --color-implementer: #FFB367;
    --color-accompagner: #00BB00;
    --color-text-dark: #2C2C2C; /* Adjusted for better contrast than pure black */
    --color-text-grey: #565656;
    --color-light-grey-bg: #F0F0F0;
    --color-white: #FFFFFF;
}

/* Base Styles */
html {
    background-color: var(--color-white); /* ensure top canvas is white */
    overscroll-behavior-y: none; /* prevent pull-down overscroll */
}
body {
    font-family: 'Lexend', sans-serif;
    margin: 0;
    padding: 0; /* baseline; remove extra top spacing to avoid scroll above header */
    box-sizing: border-box;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Prevents horizontal scroll */
    overscroll-behavior-y: none; /* prevent pull-down overscroll */
}

/* Global H1, H2, H3 styles (Lexend by default) */
h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600; /* Default Lexend Semibold */
}

p {
    margin-top: 0;
    margin-bottom: 1em;
    font-weight: 300; /* Default Lexend Light */
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: 0; /* Header follows global page offset */
    background-color: transparent; /* Simple transparent header */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: none; /* No visible header chrome */
}

.logo {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-text-dark); /* Changed to dark for contrast with white background */
}

.logo-bow {
    width: 40px;
    
    max-height: 40px;
    margin-left: 8px;
    transform: scale(6.2);
    transform-origin: left center; /* Grow to the right without affecting layout */
    image-rendering: -webkit-optimize-contrast; /* Sharper scaling hint */
    backface-visibility: hidden; /* Avoid rasterization artifacts */
    will-change: transform;
    pointer-events: auto; /* Allow clicks to register on the link */
}

.logo-link { cursor: pointer; }

.menu-button {
    background: none;
    border: 1px solid #E8DFF3; /* Light purple from previous mockup, assume similar tint */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.menu-button .bar {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text-dark); /* Match logo text */
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* Main Content Padding */
.main-content {
    padding-bottom: 0; /* No bottom padding as sections manage their own space */
}

/* Section 1: Catch-line and Question Input */
.section-1 {
    padding: 20px;
    padding-top: 80px; /* Reduce space below the sticky header */
    background-color: var(--color-white);
    overflow: hidden; /* To contain the gentleman illustration overflow */
}

.catch-line {
    font-size: 25px;
    line-height: 1.2;
    margin-bottom: 40px;
}

.catch-line-semibold {
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-informer); /* #9968FF */
    display: block; /* Force to new line for visual separation */
}

.catch-line-regular {
    font-weight: 400; /* Lexend Regular */
    color: var(--color-text-dark);
    display: block; /* Force to new line for visual separation */
    margin-top: 10px; /* Space between semibold and regular parts */
}

.question-input {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid #E8DFF3; /* Light border */
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 90px; /* Increased spacing from the title */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.question-input input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Lexend', sans-serif;
    color: var(--color-text-dark);
    padding: 5px 0;
    font-weight: 300; /* Lexend Light for input text */
}

.question-input input::placeholder {
    color: #B0B0B0;
    font-weight: 300; /* Lexend Light */
}

.send-button {
    background-color: #E8DFF3; /* Light purple */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.arrow-up {
    width: 20px;
    height: 20px;
}

.illustration-section {
    text-align: center;
    margin-top: 90px; /* More distance from the input */
    margin-bottom: -50px; /* Pulls illustration up to overlap footer */
    position: relative;
    z-index: 1; /* Ensures it's above the footer initially */
}

.gentleman-illustration {
    width: 200px; /* Adjust size as needed */
    height: 200px;
    position:relative;
    left:52px;
    top:40px;
    display: block;
    margin: 0 auto;
    transform: translate(-140px, -30px); /* Move slightly further left and higher */
    will-change: transform;
}

/* Section 2: Solutions (Cards Scrollable) */
.section-2 {
    background: var(--gradient-linear);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-top: 10px; /* Adjusted to fit handle */
    padding-bottom: 12px; /* Space for cards */
    position: relative;
    z-index: 0; /* Below gentleman */
    overflow: visible; /* Allow Alfred illustration to appear above without being masked */
}

#catch-line-solutions {
    text-align: left;
}

.footer-cta {
    color: var(--color-white);
    padding: 30px 30px 14px 30px;
    text-align: center;
}

.footer-handle {
    width: 60px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    margin: -10px auto 20px; /* Position the handle above the text */
}

.footer-cta p {
    font-size: 24px;
    font-weight: 600; /* Lexend Semibold */
    margin: 0;
    color: var(--color-white);
}

.solutions-carousel {
    display: flex;
    overflow-x: scroll; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: 20px 32px 20px 60px; /* Symmetric left/right inset so first/last cards don't touch edges */
    scroll-padding-left: 30px; /* Halved snap inset (left) */
    scroll-padding-right: 30px; /* Matching snap inset (right) */
    gap: 20px; /* Space between cards */
    scroll-snap-type: x mandatory; /* Snap to cards */
}

.solutions-carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for webkit browsers */
}
.solutions-carousel {
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.solution-card {
    flex: 0 0 190px; /* Further reduced horizontal size */
    scroll-snap-align: start; /* Snap to start of card */
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 25px; /* Restore original padding */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Removed extra internal padding; spacing handled by carousel left inset */

.solution-card .card-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 15px;
}

.solution-card h3 {
    font-size: 22px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--card-color); /* Uses the custom property set inline */
    margin-bottom: 10px;
}

.solution-card p {
    font-size: 15px;
    font-weight: 400; /* Lexend Regular */
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

.solution-card .cta-button {
    background-color: var(--card-color); /* Uses the custom property */
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    padding: 12px 20%;
    text-align:center;
    font-size: 16px;
    font-weight: 400; /* Lexend Regular */
    cursor: pointer;
    align-self: flex-start; /* Align to the left */
    transition: background-color 0.3s ease;
    margin-top: auto; /* Stick to bottom of the card */
}

.solution-card .cta-button:hover {
    opacity: 0.9;
}

/* Section 3: Discussion */
.section-3 {
    background-color: var(--color-white);
    padding: 20px;
    padding-top: 50px; /* Space from previous section */
    position: relative;
    overflow: hidden;
}

.discussion-messages {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between messages */
    min-height: 400px; /* Give some height to observe scroll effect */
    justify-content: flex-end; /* Align messages to bottom initially */
    margin-bottom: 50px;
}

.discussion-messages p {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    max-width: 80%; /* Limit width of message bubbles */
}

.message-left {
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-informer); /* #9968FF */
    align-self: flex-start;
}

.message-right {
    background-color: var(--color-light-grey-bg);
    border-radius: 20px;
    padding: 10px 14px; /* tighter horizontal padding */
    font-weight: 300; /* Lexend Light */
    color: var(--color-text-grey);
    align-self: flex-end;
    max-width: 70%;
    width: fit-content; /* shrink to content */
    word-wrap: break-word;
    overflow-wrap: anywhere; /* allow wrapping to avoid extra empty space */
}

.message-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); /* Even slower & smoother */
}

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

.cta-discussion {
    background: var(--gradient-cta-discussion);
    border: none;
    border-radius: 50px;
    padding: 7px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.cta-discussion:hover {
    transform: translateY(-3px);
}

.cta-discussion-discover {
    font-size: 22px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-white);
    line-height: 1; /* Adjust line height to fit */
}

.cta-discussion-cycles {
    font-size: 16px;
    font-weight: 200; /* Lexend Extralight */
    color: var(--color-white);
    line-height: 1; /* Adjust line height to fit */
    margin-top: 5px; /* Small space between lines */
}

/* Section 4: Exemples concrets (Accordions) */
.section-4 {
    background: var(--gradient-linear);
    border-top-left-radius: 40px; /* Match section 2 */
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px; /* Even taller bottom curve */
    border-bottom-right-radius: 40px; /* Even taller bottom curve */
    padding: 29px 33px 25px; /* More bottom padding to increase widget base */
    margin-top: 104px;
    overflow: visible; /* Avoid covering next section */
}

.examples-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-white);
    line-height: 1.2;
}

.examples-title-semibold {
    font-size: 30px; /* Larger */
    font-weight: 600; /* Lexend Semibold */
    text-align:left;
    display: block;
}

.examples-title-regular {
    font-size: 24px; /* Smaller */
    font-weight: 600; /* Lexend Semibold (as per instruction, same weight as "Des exemples") */
    display: block;
    text-align:left;
}

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative; /* For the z-index to work with the arc */
    z-index: 2; /* Ensure accordions are above the arc */
}

.accordion-card {
    background-color: var(--color-white);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    overflow: hidden; /* Hide content when closed */
    transition: all 0.3s ease;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #FFEDDB;
}

.accordion-icon {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    flex-shrink: 0;
}

.accordion-card h3 {
    flex-grow: 1;
    font-size: 18px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-text-dark);
    margin-bottom: 0;
}

.toggle-icon {
    font-size: 24px;
    font-weight: 500; /* Lexend Medium */
    color: var(--color-text-dark);
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.accordion-card.active .toggle-icon {
    transform: rotate(45deg); /* Plus becomes an X or visually a minus sign */
}

.accordion-content {
    background-color: #F8F8F8; /* Lighter background for content */
    padding: 0 20px;
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-card.active .accordion-content {
    padding: 15px 20px;
    max-height: 200px; /* Max height to allow expansion, adjust as needed */
}

.accordion-content p {
    font-size: 15px;
    font-weight: 300; /* Lexend Light */
    color: var(--color-text-grey);
    margin-bottom: 0;
}

/* Section 5: Équipe (Horizontal Scroller) */
.section-5 {
    background-color: var(--color-white);
    padding: 30px 0 120px; /* More top headroom for enlarged center avatar */
    overflow: visible; /* Allow scaled items and text to render fully */
    position: relative;
    z-index: 2; /* Ensure above previous section visuals if overlapping */
}

.team-carousel {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 130px 60px 25px 60px; /* Add horizontal insets so there's room to scroll */
    gap: 15px; /* Space between members */
    justify-content: flex-start; /* default; overridden on desktop */
    align-items: flex-end; /* Align members' bases */
}

/* Desktop: center the three members in the viewport */
@media (min-width: 1024px) {
    .team-carousel {
        display: grid; /* switch to grid on desktop */
        grid-template-columns: repeat(4, 160px); /* 4 centered columns */
        justify-content: center; /* center the grid block */
        column-gap: 20px;
        row-gap: 30px;
        overflow-x: visible;
        max-width: 100%;
        margin: 0 auto;
    }
}

.team-carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for webkit browsers */
}
.team-carousel {
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

/* (Removed) scroll-snap on small screens to allow free scroll; JS handles snapping */

.team-member {
    flex-shrink: 0; /* Prevent members from shrinking */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, filter 0.25s ease; /* Smooth scaling */
    width: 160px; /* Increased base width to fit larger photos */
    transform-origin: bottom center; /* Grow upward from baseline to avoid clipping text */
}

.team-member .member-photo {
    width: 140px; /* Larger base size */
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    transition: width 0.3s ease, height 0.3s ease, margin-bottom 0.3s ease;
}

.team-member.zoomed {
    transform: scale(1.2); /* Zoom effect */
    width: 160px; /* Adjust width for zoomed member */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.2));
}

.team-member.zoomed .member-photo {
    width: 140px; /* Larger photo */
    height: 140px;
    margin-bottom: 15px;
}

.team-member .member-name {
    font-size: 18px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-text-dark);
    margin: 0;
}

.team-member .member-title {
    font-size: 14px;
    font-weight: 300; /* Lexend Light */
    color: var(--color-text-dark);
    margin: 0;
}

.cta-team {
    background: var(--gradient-cta-discussion); /* Reuse discussion CTA gradient */
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600; /* Lexend Semibold */
    color: var(--color-white);
    cursor: pointer;
    display: block; /* Make it a block element to center with margin auto */
    width: fit-content;
    margin: 0px auto 0; /* Center horizontally with top margin */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.cta-team:hover {
    transform: translateY(-3px);
}

/* Placeholder Styles for Images */
.placeholder-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DDDDDD; /* Default gray for all placeholders */
    border: 1px dashed #AAAAAA;
    color: #555555;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
}

/* cycles-de-l-ia.php specific styles */

/* Hero Section */
.cycles-hero-section {
    padding: 30px 20px 100px; /* Adjust padding for visual balance */
    background: var(--gradient-linear);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    color: var(--color-white); /* Ensure text is white over gradient */
}

.cycles-subtitle {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #E8DFF3; /* Light purple tint */
    padding-left: 10px; /* Align with h1 */
}

.cycles-title {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--color-white);
    padding-left: 10px; /* Match subtitle alignment */
}

.cycles-intro-text {
    font-size: 20px;
    font-weight: 400; /* Regular weight as per screenshot */
    line-height: 1.5;
    color: var(--color-white);
    padding-left: 10px; /* Match subtitle alignment */
    max-width: 80%; /* Limit width */
}

/* Section: Quelques mots pour comprendre */
.cycles-understand-section {
    background: transparent; /* No background, just content */
    padding: 60px 20px 40px;
    text-align: center;
}

#h2-section2 {
    font-size: 25px;
    font-weight: 600;
    color: white;
    padding-left: 9px;
}

.section-heading-white {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-white); /* White text over gradient */
    margin-bottom: 30px;
}

.understand-card {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 30px 25px;
    margin: 0 auto; /* Center card */
    max-width: 320px; /* Fixed width */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #E8DFF3; /* Light purple border */
}

.understand-card p {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-dark);
    line-height: 1.5;
    margin: 0;
}

/* Section: Concrètement */
.cycles-concretely-section {
    padding: 40px 20px 60px;
    background: linear-gradient(157deg, #7C4FCE 10%, #D589E3 46%, #FFB367 200%, #FCD5A1 100%); /* White background */
    border-top-left-radius: 40px; /* Match visual arc */
    border-top-right-radius: 40px; /* Match visual arc */
    margin-top: -60px; /* Pulls it up to overlap the previous section's gradient */
    position: relative;
    z-index: 10; /* Ensure it's on top of the gradient */
    box-shadow: 0 -10px 20px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.section-heading {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 10px;
}

.divider {
    width: 50px;
    height: 3px;
    background-color: var(--color-informer); /* Purple divider */
    margin: 0 auto 40px; /* Center and add space below */
    border-radius: 2px;
}

.concretely-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 20px; /* Space between cards */
    max-width: 360px; /* Constrain width */
    margin: 0 auto;
}

.concretely-card,
.small-card {
    background-color: #ffeddb;
    border-radius: 20px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #E8DFF3; /* Light purple border */
    cursor: pointer;
    transition: all 0.3s ease;
    flex-direction: column;
    align-items: flex-start;
}

.concretely-card:hover,
.small-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card-main-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.card-expandable {
    width: 100%;
    background-color: var(--color-light-grey-bg);
    border-radius: 0 0 20px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    margin-top: 10px;
}

.card-expandable p {
    margin: 0;
    padding: 0 20px 15px;
    font-size: 14px;
    font-weight: 300;
    color: var(--color-text-grey);
    line-height: 1.5;
}

/* (Reverted) Removed expandable details for concretely cards */

.concretely-icon,
.small-card-icon {
    width: 50px; /* Consistent icon size */
    margin-right: 15px;
    flex-shrink: 0;
}

/* Trait horizontal rouge pour remplacer Grap.svg */
.red-line {
    height: 4px;
    background-color: #ff0000;
    border-radius: 2px;
    width: 50px;
}

.card-number {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-informer); /* Purple for numbers */
    margin: 0;
    flex-shrink: 0;
    margin-right: 8px;
}

.card-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-dark);
    margin: 0;
    flex-grow: 1; /* Allows text to take available space */
    text-align: left;
}

.toggle-icon-plus {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-left: auto; /* Push to the right */
    flex-shrink: 0;
}

.small-card .card-number {
    color: var(--color-text-dark); /* Numbers in small cards are dark */
}

/* Section: Les avantages des cycles */
.cycles-advantages-section {
    background-color: var(--color-white);
    padding: 60px 20px 80px;
}

.advantages-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-informer); /* Purple title */
    margin-bottom: 40px;
    padding-left: 10px;
}

.advantages-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between items */
    max-width: 360px; /* Constrain width */
    margin: 0 auto;
}

.advantage-item {
    display: flex;
    align-items: flex-start; /* Align text to top of icon */
}

.advantage-icon-play {
    font-size: 24px;
    font-weight: 700; /* Bold play icon */
    color: var(--color-informer); /* Purple icon */
    margin-right: 15px;
    line-height: 1; /* Ensure icon doesn't add extra line height */
}

.advantage-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-informer); /* Purple heading */
    margin-bottom: 5px;
}

.advantage-description {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text-grey);
    margin: 0;
}

/* Section: Rendez-vous (CTA) */
.cycles-cta-section {
    background-color: var(--color-white);
    padding: 60px 20px 80px;
    text-align: center;
}

.alfred-thumbs-up {
    width: 150px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 30px;
}

.cta-heading {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.3;
    margin-bottom: 30px;
}

.cta-button-purple {
    background: var(--gradient-cta-discussion); /* Purple gradient */
    border: none;
    border-radius: 50px;
    padding: 18px 40px; /* Larger padding */
    font-size: 20px;
    font-weight: 600;
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    margin-bottom: 25px;
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cta-button-purple:hover {
    transform: translateY(-3px);
}

.cta-description {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text-grey);
    margin: 0 auto;
    max-width: 300px; /* Constrain text width */
    line-height: 1.5;
}

/* Section: Cycle en cours */
.cycles-current-section {
    background: linear-gradient(to bottom right, #FFB367, #FCD5A1); /* Orange gradient */
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding: 50px 20px 60px;
    margin-top: 60px; /* Space from previous section */
    position: relative;
    overflow: hidden; /* To contain dashed border */
    text-align: center;
}

.dashed-border-text {
    font-size: 38px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0;
    padding-bottom: 25px;
    line-height: 1; /* Tighter line height */
}

/* Dashed border effect around the text, adjusted for mobile */
.cycles-current-section::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px dashed rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    z-index: 0;
    pointer-events: none;
}

.cta-discover-brands {
    background-color: var(--color-white);
    border: none;
    border-radius: 50px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-dark);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    margin-top: 30px;
    margin-bottom: 40px;
    display: inline-block; /* Allow text to be centered */
}

.cta-discover-brands:hover {
    transform: translateY(-3px);
}

.brands-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 15px;
    max-width: 350px; /* Constrain grid width */
    margin: 0 auto;
}

.brand-card {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.brand-card img {
    max-width: 90%;
    max-height: 80px; /* Limit logo height */
    object-fit: contain;
}

/* General adjustments for existing elements */
body {
    background-color: var(--color-white); /* Ensure body is white for sections that don't specify */
}

/* Ensure the header styles from index.php are compatible or inherited correctly */
.header {
    background-color: var(--color-white); /* Make sure header is white on this page */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Add subtle shadow to distinguish */
}

/* Footer (moved from footer.php so it works when inlined) */
.footer {
    background-color: #F3F3F3;
    text-align: left;
    border-radius: 40px;
    overflow: hidden;
}
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-left: 39px;
    padding-top: 20px;
}
.footer-logo img { width: 200px; }
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: left;
}
.footer-socials { display: flex; flex-direction: row; align-items: center; gap: 12px; padding-top: 15px; }
.footer-socials a { display: inline-flex; }
.footer-socials img { width: 20px; height: 20px; object-fit: contain; }
.footer-links { display: flex; flex-direction: column; align-items: left; padding-top: 50px; }
.footer-links a { text-decoration: none; color: #2C2C2C; font-size: 16px; font-weight: 400; }
.footer-links a:hover { color: #7C4FD0; transition: color 0.5s ease; }
.h3 { margin-bottom: 0; padding-bottom: 0; }
.footer-links h3 { font-size: 16px; font-weight: 600; margin-bottom: 0; padding-top: 20px; color: #2C2C2C; }
.footer-links-solutions { display: flex; flex-direction: column; align-items: left; padding-left: 15px; }
.footer-links-solutions a { font-weight: 350; }

/* Tablet */
@media (max-width: 1023px) {
  .footer-container { padding-left: 39px; padding-right: 39px; padding-top: 28px; padding-bottom: 28px; gap: 28px; }
  .footer-logo { align-items: left; }
  .footer-logo img { width: 500px; }
  .footer-socials { gap: 20px; padding-top: 12px; }
  .footer-socials img { width: 50px; height: 50px; }
  .footer-links { padding-top: 20px; align-items: left; }
  .footer-links h3 { font-size: 35px; padding-top: 12px; }
  .footer-links a { font-size: 35px; padding: 8px 0; }
  .footer-links-solutions { padding-left: 30px; align-items: left; }
  .footer p { font-size: 25px; line-height: 1.6; }
}

/* Phone (reduced sizes for readability) */
@media (max-width: 768px) {
  .footer-container { padding-left: 39px; padding-right: 39px; padding-top: 28px; padding-bottom: 28px; gap: 20px; }
  .footer-logo { align-items: left; }
  .footer-logo img { width: 160px; }
  .footer-socials { gap: 12px; padding-top: 10px; }
  .footer-socials img { width: 24px; height: 24px; }
  .footer-links { padding-top: 20px; align-items: left; }
  .footer-links h3 { font-size: 18px; padding-top: 10px; }
  .footer-links a { font-size: 16px; padding: 6px 0; }
  .footer-links-solutions { padding-left: 30px; align-items: left; }
  .footer p { font-size: 14px; line-height: 1.6; }
}
/* Rotation douce de l'image cycle-ia.png au survol */
img[src="images/cycle-ia.png"] {
    transition: transform 0.6s ease;
}

img[src="images/cycle-ia.png"]:hover {
    transform: rotate(360deg);
}

/* Animation de bond pour l'image conference.png au survol */
img[src="images/conference.png"] {
    transition: transform 0.3s ease;
}

img[src="images/conference.png"]:hover {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(-8px);
    }
    75% {
        transform: translateY(-12px);
    }
}

/* Animation d'agrandissement pour l'image formation.png au survol */
img[src="images/formation.png"] {
    transition: transform 0.3s ease;
}

img[src="images/formation.png"]:hover {
    transform: scale(1.2);
}

/* Desktop-only white side borders as fixed overlays above content */
@media (min-width: 1024px) {
    /* Keep page background white so nothing shows through on scroll */
    body {
        background-color: var(--color-white);
        padding-left: 20%;  /* border thickness */
        padding-right: 20%; /* border thickness */
    }

    body::before,
    body::after {
        /* disabled: white side overlays were covering content near rounded section */
        content: none;
    }
    /* Ensure no side overlays render */
    body::before { left: auto; }
    body::after { right: auto; }
}