/**
 * PCG Luxembourg - Main Stylesheet
 * Version: 2.0.0
 * Architecture: Custom Post Types + ACF Free
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
    /* Colors */
    --color-primary: #18365b;        /* Navy blue */
    --color-secondary: #81614a;      /* Teal */
    --color-accent: #e67e22;         /* Orange */
    --color-white: #ffffff;
    --color-lightest-primary: #dad9dc;
    --color-light-primary: #babcbf;
    --color-gray: #6c757d;
    --color-dark: #212529;
    --color-light-beige: #f5f3f0;
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'poppins', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 10rem;
    
    /* Container */
    --container-width: 128rem;
    --container-padding: 4rem;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* breakpoints */
    --breakpoint-sm: 599px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--color-primary);
    background-color: var(--color-light-beige);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

h1 {
    font-size: 8rem;
    font-weight: 800; 
}

.page-luxembourg h1,
.page-service-creation h1,
.hero-accueil h1 {
    font-size: 7rem;
}

.page-service-social h1,
.page-service-juridique h1,
.page-service-formation h1,
.page-service-comptable h1 {
    font-size: 6rem;
}

.page-single h1 {
    font-size: 4rem;
    line-height: 1.3;
}

h2 {
    font-size: 2rem;
    font-weight: 800;
}
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.single-content-main h2 {
    font-weight: 700;
    margin-bottom: 2rem;
}

.single-content-main h2:not(:first-of-type) {
    margin-top: 4rem;
}

.single-content-main h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1.4rem;
}

.single-content-main h2 + h3 {
    margin-top: 0;
}

p {
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Screen reader text for accessibility */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

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

.container--blog-grid,
.container--without-padding {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0;
}

.container--legal {
    max-width: var(--container-width);
    margin: 0 auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.8rem 0.9rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.btn-blue {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-blue:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-blue .icon-arrow-right {
    position: relative;
    bottom: 0.5px;
    color: var(--color-white);
    display: block;
    height: 0.8rem;
    transition: transform var(--transition-normal);
}

.form-devis-wrapper .btn,
.pcg-form .btn,
.form-submit .btn {
    display: flex;
    margin: 3rem auto 0;
    padding: 1.6rem 4.8rem 1.4rem;
}

.form-devis-wrapper .btn-blue .btn-icon,
.pcg-form .btn-blue .btn-icon,
.form-submit .btn-blue .btn-icon {
    position: relative;
    bottom: 0.5px;
    height: 1.6rem;
}

.btn-blue:hover .icon-arrow-right {
    transform: translateX(2px);
}

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

.btn-white:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-transparent-white {
    background-color: #365172;
    color: var(--color-white);
}

.btn-transparent-white:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.page-luxembourg .section-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 0 1.4rem;
}

.page-luxembourg .section-cta .cta-buttons .icon-calendar {
    position: relative;
    bottom: 1.5px;
    width: 1.6rem;
    height: auto;
    margin-left: 1px;
}

.btn-animation-horizontal,
.btn-animation-vertical {
    position: relative;
}

.btn-animation-horizontal::before {
    content: '';
    position: absolute;
    bottom: 50%;
    right: calc(100% + 4px);
    transform: translateY(50%);
    width: 0;
    height: 0.1rem;
    background-color: white;
    transition: width var(--transition-slow);
}

.btn-animation-horizontal::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: calc(100% + 4px);
    transform: translateY(50%);
    width: 0;
    height: 0.1rem;
    background-color: white;
    transition: width var(--transition-slow);
}

.btn-animation-vertical::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    height: 0;
    width: 0.1rem;
    background-color: white;
    transition: height var(--transition-slow);
}

.btn-animation-vertical::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    height: 0;
    width: 0.1rem;
    background-color: white;
    transition: height var(--transition-slow);
}

.btn-animation-vertical:hover::after,
.btn-animation-vertical:hover::before {
    height: 5px;
}

.btn-animation-horizontal:hover::after,
.btn-animation-horizontal:hover::before {
    width: 5px;
}

.header-cta .btn-white.btn-animation-vertical::before,
.header-cta .btn-white.btn-animation-vertical::after,
.page-luxembourg .cta-buttons .btn-white.btn-animation-vertical::before,
.page-luxembourg .cta-buttons .btn-white.btn-animation-vertical::after,
.hero-cta-group .btn-white.btn-animation-vertical::before,
.hero-cta-group .btn-white.btn-animation-vertical::after,
.sidebar-cta .btn.btn-animation-horizontal::before,
.sidebar-cta .btn.btn-animation-horizontal::after {
    background-color: var(--color-primary);
}

.page-luxembourg .cta-buttons .btn-blue.btn-animation-vertical::before,
.page-luxembourg .cta-buttons .btn-blue.btn-animation-vertical::after,
.header-cta .btn-blue.btn-animation-vertical::before,
.header-cta .btn-blue.btn-animation-vertical::after,
.hero-cta-group .btn-blue.btn-animation-vertical::before,
.hero-cta-group .btn-blue.btn-animation-vertical::after,
.pcg-form .btn-blue.btn-animation-horizontal::before,
.pcg-form .btn-blue.btn-animation-horizontal::after,
.form-submit .btn-blue.btn-animation-horizontal::before,
.form-submit .btn-blue.btn-animation-horizontal::after,
.btn-values-wrapper .btn-blue.btn-animation-horizontal::before,
.btn-values-wrapper .btn-blue.btn-animation-horizontal::after,
.page-approche .cta-buttons .btn-blue.btn-animation-horizontal::before,
.page-approche .cta-buttons .btn-blue.btn-animation-horizontal::after,
.page-accueil .cta-buttons .btn-blue.btn-animation-horizontal::before,
.page-accueil .cta-buttons .btn-blue.btn-animation-horizontal::after,
.page-accueil .blog-grid-header .btn-blue.btn-animation-horizontal::before,
.page-accueil .blog-grid-header .btn-blue.btn-animation-horizontal::after,
.faq-cta .btn-blue.btn-animation-horizontal::before,
.faq-cta .btn-blue.btn-animation-horizontal::after,
.back-to-blog .btn-animation-horizontal::before,
.back-to-blog .btn-animation-horizontal::after {
    background-color: var(--color-secondary);
}

.back-to-blog {
    display: flex;
    justify-content: center;
    margin-top: 6rem;
}

.back-to-blog .icon-arrow-left {
    position: relative;
    bottom: 0.6px;
    display: block;
    height: 0.8rem;
    transition: transform var(--transition-normal);
}

.back-to-blog:hover .icon-arrow-left {
    transform: translateX(-2px);
}

.sidebar-cta .btn {
    display: flex;
    margin: 0 auto;
    width: fit-content;
}

.sidebar-cta .icon-calendar {
	position: relative;
	bottom: 1.5px;
	width: 1.6rem;
	height: auto;
	margin-left: 1px;
}


/* ==========================================================================
   UTILITY CLASSES - DASHED BORDERS
   ========================================================================== */

/* Animated link with dashed underline */
.link-animated {
    position: relative;
    display: inline-block;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        currentColor 0,
        currentColor 0.3rem,
        transparent 0.3rem,
        transparent 0.6rem
    );
    transition: width var(--transition-normal);
}

.blog-categories-filter a.link-animated::after {
    bottom: 0;
}

.link-animated:hover::after {
    width: 100%;
}

/* Border en bas (horizontal) */
.border-dashed-bottom {
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,  /* Longueur du tiret */
        transparent 0.6rem,
        transparent 1.2rem  /* Longueur tiret + espacement */
    );
    background-position: bottom;
    background-size: 100% 0.1rem; /* largeur totale, hauteur de la ligne */
    background-repeat: repeat-x;
}

/* Border en haut (horizontal) */
.border-dashed-top {
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: top;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.border-dashed-top.border-dashed-bottom {
    background-image: 
        repeating-linear-gradient(
            to right,
            var(--color-lightest-primary) 0,
            var(--color-lightest-primary) 0.6rem,
            transparent 0.6rem,
            transparent 1.2rem
        ),
        repeating-linear-gradient(
            to right,
            var(--color-lightest-primary) 0,
            var(--color-lightest-primary) 0.6rem,
            transparent 0.6rem,
            transparent 1.2rem
        );
    background-position: top, bottom;
    background-size: 100% 0.1rem, 100% 0.1rem;
    background-repeat: repeat-x, repeat-x;
}

/* Border à droite (vertical) */
.border-dashed-right {
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,  /* Longueur du tiret */
        transparent 0.6rem,
        transparent 1.2rem  /* Longueur tiret + espacement */
    );
    background-position: right;
    background-size: 0.1rem 100%; /* largeur de la ligne, hauteur totale */
    background-repeat: repeat-y;
}

/* Border à gauche (vertical) */
.border-dashed-left {
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: left;
    background-size: 0.1rem 100%;
    background-repeat: repeat-y;
}

.border-dashed-left.border-dashed-right {
    background-image: 
        repeating-linear-gradient(
            to bottom,
            var(--color-lightest-primary) 0,
            var(--color-lightest-primary) 0.6rem,
            transparent 0.6rem,
            transparent 1.2rem
        ),
        repeating-linear-gradient(
            to bottom,
            var(--color-lightest-primary) 0,
            var(--color-lightest-primary) 0.6rem,
            transparent 0.6rem,
            transparent 1.2rem
        );
    background-position: left, right;
    background-size: 0.1rem 100%, 0.1rem 100%;
    background-repeat: repeat-y, repeat-y;
}

/* ==========================================================================
   GLOBAL VERTICAL BORDERS
   ========================================================================== */

.global-borders {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--container-width);
    height: 100%;
    max-width: calc(100% - calc(var(--container-padding) * 2));
    pointer-events: none; /* Permet de cliquer à travers */
    z-index: 13;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.mobile-menu-toggle {
    display: none;
}

.site-header {
    position: relative; 
    z-index: 12;
}

.header-top-bar {
    background-color: var(--color-light-beige);
    padding: 1.2rem 0;
    font-size: 1.1rem;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-address {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.top-bar-address a {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.top-bar-address a:hover {
    color: var(--color-secondary);
}

.top-bar-address-icon {
    position: relative;
    top: -0.5px;
    width: 1.2rem;
    height: 1.64rem;
}

.top-bar-address-text {
    position: relative;
    top: 1px;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.language-switcher ul {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switcher li {
    list-style: none;
}

.language-switcher li::marker {
    display: none;
}

.language-switcher a {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    padding-top: 1.5px;
}

.language-switcher li.current-lang a {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.language-switcher li:not(.current-lang) a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.language-switcher-icon {
    width: auto;
    height: 1.64rem;
    margin-right: 0.3rem;
}

.language-switcher button {
    width: 2.8rem;
    height: 2.8rem;
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.language-switcher button.lang-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.language-switcher button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.header-main-menu {
    padding: 2.4rem 0;
    background-color: var(--color-light-beige);
    transition: box-shadow var(--transition-normal);
}

.header-main-menu.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.menu-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.menu-content-left {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.site-logo svg {
    position: relative;
    top: 3px;
    width: 9rem;
    height: auto;
}

.main-nav {
    position: relative;
    top: 1px;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 3.2rem;
}

.main-nav a {
    font-weight: 500;
    font-size: 1.25rem;
}

/* Reset complet du style button pour menu-services */
.menu-services {
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-weight: 500;
    font-size: 1.25rem;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
}

.menu-services:hover {
    color: var(--color-blue);
}

.menu-services.active {
    color: var(--color-secondary);
}

.menu-services-icon-burger {
    position: relative;
    bottom: 1.4px;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.5rem;
}

.menu-services-icon-burger line {
    transition: all var(--transition-normal);
    transform-origin: center;
}

.menu-services-icon-arrow {
    position: relative;
    bottom: 0.8px;
    width: 0.9rem;
    height: auto;
    margin-left: 0.9rem;
    transition: transform var(--transition-normal);
}

.header-cta {
    position: relative;
    top: -0.5px;
    display: flex;
    gap: 1rem;
}

.services-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-light-beige);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.services-submenu.active {
    opacity: 1;
    transform: translateY(0);
}

.services-submenu .container {
    padding: 0!important;
}

.services-grid-wrapper {
    position: relative;
}

.services-grid-borders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Bordure horizontale (entre les 2 lignes) */
.border-horizontal {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    transform: translateY(-50%);
}

/* Bordures verticales (entre les 3 colonnes) */
.border-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.border-vertical::before,
.border-vertical::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

.border-vertical::before {
    left: 33.333%;
    transform: translateX(-50%);
}

.border-vertical::after {
    left: 66.666%;
    transform: translateX(-50%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    z-index: 2;
}

.service-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 240px;
    transition: background-color var(--transition-fast);
}

.service-item:hover {
    background-color: var(--color-white);
}

.service-icon {
    height: 5rem;
    width: 100%;
    margin-bottom: 1.4rem;
}

.service-icon svg {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.service-content {
    padding: 0 6rem;
    text-align: center;
    font-size: 1.25rem;
}

.service-content h3 {
    font-size: 1.55rem;
    margin-bottom: 1rem;
}

.service-item:hover .service-content h3 {
    color: var(--color-secondary);
}

.service-content p {
    margin: 0;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-white);
}

.page-template-page-luxembourg .site-footer,
.page-template-page-legal .site-footer {
    background-color: var(--color-light-beige);
}

.site-footer .background-color-wrapper {
    background-color: var(--color-primary);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.footer-cta {
    position: relative;
    z-index: 1;
    padding: 8rem 0 10rem;
    text-align: center;
}

.footer-cta .cta-suptitle {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: var(--font-heading);
    margin: 0;
}

.footer-cta .cta-title {
    width: 600px;
    margin: 1.6rem auto 4rem;
    font-size: 5rem;
    font-family: var(--font-heading);
    color: var(--color-white);
}

.footer-cta .btn {
    padding: 1.1rem 1.8rem 0.9rem;
}

.footer-cta .icon-calendar {
    position: relative;
    bottom: 2px;
    display: block;
    width: 1.8rem;
    height: auto;
}   

.footer-main {
    position: relative;
    z-index: 1;
    padding: 0 0 10rem;
}

.footer-main h3 {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-white);
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    font-size: 1.25rem;
}

.footer-left {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    flex: 1;
}

.footer-right {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    flex: 1;
}

.footer-about {
    flex: 1
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    flex: 1;
    width: 40%;
}

.footer-contact address {
    font-style: normal;
    line-height: 1.6;
}

.footer-menus {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    flex: 1;
    min-width: 170px;
}

.footer-question {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.question-section p {
    margin-bottom: 0;
}

.question-section a {
    margin-top: 1rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.footer-nav a {
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.footer-nav a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.social-links a {
    width: fit-content;
    color: var(--color-white);
    transition: all var(--transition-fast);
}

.social-links a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom {
    position: relative;
    z-index: 1;
}

.legal-logo {
    display: block;
    width: 10rem;
    height: auto;
    margin: 0 auto 4rem;
    color: var(--color-white);
    transition: color var(--transition-normal);
}

.legal-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

.legal-logo:hover{
    color: rgba(255, 255, 255, 0.7);
}

.legal-wrapper {
	font-size: 1.1rem;
	padding: 2rem 0;
	display: flex;
	justify-content: space-between;
}

.legal-links {
    display: flex;
    gap: 1.6rem;
}

.legal-links a {
    color: var(--color-white);
}

.copyright {
    margin: 0;
}

.illustration-luxembourg-ville {
	position: absolute;
	bottom: 0;
	color: rgba(255,255,255,0.04);
	max-width: 1800px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
    z-index: 0;
}


/* ==========================================================================
   PAGES
   ========================================================================== */

.page-luxembourg {
    background-color: var(--color-white);
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* Hero Sections */
.section-hero {
    position: relative;
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-beige);
}

.section-hero.hero-contact {
    padding: 0;
}

.section-hero h1 {
    margin-bottom: 2rem;
}

.hero-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-wrapper.hero-single-wrapper {
    gap: 0 5rem;
}

.hero-left,
.hero-right {
    flex: 1;
}

.page-service-comptable .hero-left,
.page-service-comptable .hero-right,
.page-service-formation .hero-left,
.page-service-formation .hero-right,
.page-service-juridique .hero-left,
.page-service-juridique .hero-right,
.hero-left.hero-single-left,
.hero-right.hero-single-right {
    flex: auto;
}

.page-service-comptable .hero-left,
.page-service-formation .hero-left,
.page-service-juridique .hero-left {
    width: 55%;
}

.page-service-comptable .hero-right,
.page-service-formation .hero-right,
.page-service-juridique .hero-right {
    width: 45%;
}

.hero-left.hero-single-left {
    width: 60%;
}

.hero-right.hero-single-right {
    width: 40%;
}

.hero-right {
    display: flex;
    justify-content: center;
}

.hero-right .featured-image-framed {
    border: 16px solid white;
}

.hero-single-right .featured-image-framed {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.hero-single-right .featured-image-framed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-illustration {
    width: 70%;
    height: auto;
}

.page-luxembourg .hero-illustration,
.hero-accueil .hero-illustration {
    width: 85%;
}

.page-service-juridique .hero-illustration {
    width: 40%;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.hero-intro {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.4;
	margin-bottom: 3.4rem;
}

.hero-accueil .hero-intro {
    font-size: 2.1rem;
    margin-bottom: 6rem;
}

.hero-single .hero-intro {
    font-size: 1.7rem;
    margin-bottom: 0;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-accueil .hero-cta-group .icon-calendar {
	position: relative;
	bottom: 1.5px;
	width: 1.6rem;
	height: auto;
	margin-left: 1px;
}

.breadcrumb {
    margin-bottom: 1rem;
}

.breadcrumb,
.breadcrumb a {
    font-size: 1.2rem;
    color: var(--color-light-primary);
}

.breadcrumb .separator {
    width: 0.8rem;
    position: relative;
    bottom: 1.1px;
}

.hero-contact .hero-icon {
    width: 100px;
    height: auto;
    margin-top: 5rem;
}

.hero-contact .hero-left {
    padding: 0 4rem;
}

.hero-contact .hero-right {
    padding: var(--spacing-xxl) 0;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: left;
    background-size: 0.1rem 100%;
    background-repeat: repeat-y;
}

.contact-form-wrapper h2 {
    text-align: center;
    margin: 0;
    padding: 2rem 0 2.2rem;
    font-weight: 700;
}

/* Section Adresse */

.section-address {
    position: relative;
    background-color: var(--color-white);
    padding: var(--spacing-xxl) 0;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-header .section-icon {
    margin: 0 auto 1.4rem;
    width: 36px;
}

.address-header h2 {
    font-size: 3.6rem;
    margin-bottom: 2.4rem;
}

.address-text {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 2.4rem;
}

.address-hours {
    margin-bottom: 4rem;
}

.address-map {
    position: relative;
}

#map-borders-horizontal,
#map-borders-vertical {
    position: absolute;
    top: 0;
    width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
    pointer-events: none;
    z-index: 10;
}

#map-borders-vertical {
    left: 50%;
    transform: translateX(-50%);
}

#map-borders-horizontal {
    left: 0;
}

.map-border {
    position: absolute;
    pointer-events: none;
}

.map-border-top,
.map-border-bottom {
    width: 100vw;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.map-border-top {
    top: 0;
}

.map-border-bottom {
    bottom: 0;
}

.map-border-left,
.map-border-right {
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-size: 0.1rem 100% ;
    background-repeat: repeat-y;
}


/* Section Pourquoi */
.section-pourquoi {
    position: relative;
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.pourquoi-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
}

.pourquoi-left {
	width: 100px;
	display: flex;
	justify-content: end;
}

.page-service-comptable .pourquoi-left {
    width: 40px;
}

.page-service-social .pourquoi-left,
.page-service-juridique .pourquoi-left {
    width: 120px;
}

.page-service-formation .pourquoi-left {
    width: 140px;
}

.page-approche .pourquoi-left img {
    width: 160px;
}

.pourquoi-right {
    width: 55%;
}

.pourquoi-right h2 {
    font-size: 5rem;
    margin-bottom: 4rem;
}

.page-service-social .pourquoi-right h2 {
    font-size: 4.9rem;
}

.pourquoi-right h3 {
    font-size: 2rem;
    margin: 4rem 0 2rem;
}

.pourquoi-right h3:first-of-type {
    margin-top: 0;
}

/* Section Flex List */
.section-flex-list {
    position: relative;
    background-color: var(--color-white);
}

.page-luxembourg .section-flex-list {
    background-color: var(--color-light-beige);
}

.page-luxembourg .section-flex-list .background-color-wrapper {
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.page-approche .section-flex-list .background-color-wrapper,
.page-service-creation .section-flex-list .background-color-wrapper,
.page-service-comptable .section-flex-list .background-color-wrapper,
.page-service-social .section-flex-list .background-color-wrapper,
.page-service-formation .section-flex-list .background-color-wrapper,
.page-service-consulting .section-flex-list .background-color-wrapper,
.page-service-juridique .section-flex-list .background-color-wrapper {
    background-color: var(--color-light-beige);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.flex-list-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10rem;
}

.flex-list-sticky {
    width: 45%;
}

.flex-list-header {
    position: sticky;
    top: 12rem;
}

.flex-list-header h2 {
    font-size: 6rem;
    margin-bottom: 3rem;
}

.page-service-social .flex-list-header h2 {
    font-size: 5rem;
}

.page-luxembourg .flex-list-header h2 {
    font-size: 4.4rem;
}

.intro-text {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.flex-list-header .section-illustration {
	display: flex;
	justify-content: center;
	margin-top: 8rem;
}

.flex-list-header .section-illustration img {
	width: 240px;
}

.page-luxembourg .flex-list-header .section-illustration img,
.page-service-consulting .flex-list-header .section-illustration img,
.page-service-juridique .flex-list-header .section-illustration img {
	width: 180px;
}

.page-service-formation .flex-list-header .section-illustration img {
    width: 100px;
}

.page-service-creation .flex-list-header .section-illustration img {
    width: 200px;
}

.page-service-comptable .flex-list-header .section-illustration img {
    width: 140px
}

.flex-list-items {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

.flex-list-item,
.flex-list-item .item-content {
    position: relative;
}

.flex-list-item .item-icon {
	position: absolute;
	left: -34px;
	top: -10px;
}

.flex-list-item .item-icon svg {
	width: 90px;
    height: auto;
}

.icon-stamp {
    fill: var(--color-white);
}

.page-luxembourg .icon-stamp {
    fill: var(--color-light-beige);
}

.flex-list-item h3 {
	font-size: 2.2rem;
	margin-bottom: 2rem;
}

.flex-list-item .field-label {
    font-weight: 600;
}

/* Grid Icons */
.section-grid-icons {
    position: relative;
    background-color: var(--color-light-beige);
    padding-top: var(--spacing-xxl);
}

.page-luxembourg .section-grid-icons,
.page-accueil .section-grid-icons.grid-services {
    background-color: var(--color-white);
    padding-top: 0;
}

.page-luxembourg .section-grid-icons .background-color-wrapper,
.page-accueil .section-grid-icons.grid-services .background-color-wrapper {
    background-color: var(--color-light-beige);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding-top: var(--spacing-xxl);
}

.page-accueil .section-grid-icons.grid-valeurs .background-color-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.section-grid-icons .section-header {
    text-align: center;
    padding-bottom: 4rem;
}

.section-grid-icons .section-title {
    font-size: 5rem;
    margin-bottom: 3rem;
}

.page-accueil .section-grid-icons.grid-services .section-title {
    font-size: 7rem;
    width: 700px;
    margin: 0 auto 3rem;
}

.page-luxembourg .section-grid-icons .section-title {
    width: 600px;
    margin: 0 auto 3rem;
}

.section-grid-icons .section-subtitle {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.page-service-comptable .section-grid-icons .section-subtitle,
.page-service-social .section-grid-icons .section-subtitle {
    max-width: 830px;
}

.page-accueil .section-grid-icons.grid-valeurs .section-subtitle {
    max-width: 850px;
}

.section-grid-icons .container {
    padding: 0!important;
}

.grid-icons {
    display: grid;
    gap: 0;
}

.grid-icons[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.grid-icons[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.grid-icons[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.grid-icons[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* Wrapper avec bordures pour Luxembourg */
.page-luxembourg .grid-icons-wrapper,
.page-accueil .grid-icons-wrapper {
    position: relative;
}

.page-accueil .section-grid-icons.grid-valeurs .grid-icons-borders {
    display: none;
}

.page-luxembourg .grid-icons-borders,
.page-accueil .grid-icons-borders.grid-services {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Bordure horizontale (au milieu entre les 2 lignes) */
.page-luxembourg .grid-icons-borders .border-horizontal,
.page-accueil .grid-icons-borders.grid-services .border-horizontal {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    transform: translateY(-50%);
}

/* Bordures verticales (entre les 3 colonnes) */
.page-luxembourg .grid-icons-borders .border-vertical,
.page-accueil .grid-icons-borders.grid-services .border-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-luxembourg .grid-icons-borders .border-vertical::before,
.page-accueil .grid-icons-borders.grid-services .border-vertical::before,
.page-luxembourg .grid-icons-borders .border-vertical::after,
.page-accueil .grid-icons-borders.grid-services .border-vertical::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

.page-luxembourg .grid-icons-borders .border-vertical::before,
.page-accueil .grid-icons-borders.grid-services .border-vertical::before {
    left: 33.333%;
    transform: translateX(-50%);
}

.page-luxembourg .grid-icons-borders .border-vertical::after,
.page-accueil .grid-icons-borders.grid-services .border-vertical::after {
    left: 66.666%;
    transform: translateX(-50%);
}

.page-luxembourg .grid-icons,
.page-accueil .grid-icons {
    position: relative;
    z-index: 2;
    gap: 0;
}

.grid-item {
    position: relative;
    padding: 6rem 4rem 10rem;
}

.page-accueil .section-grid-icons.grid-services .grid-item {
    padding: 6rem 4rem 7rem;
}

.page-luxembourg .grid-item {
    padding: 6rem 4rem;
}

.page-approche .grid-item::after,
.page-service-creation .grid-item::after,
.page-service-comptable .grid-item::after,
.page-service-social .grid-item::after,
.page-service-formation .grid-item::after,
.page-service-consulting .grid-item::after,
.page-accueil .section-grid-icons.grid-valeurs .grid-item::after,
.page-service-juridique .grid-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(-50%);
    width: 0.1rem;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,  /* Longueur du tiret */
        transparent 0.6rem,
        transparent 1.2rem  /* Longueur tiret + espacement */
    );
    background-position: right;
    background-size: 0.1rem 100%; /* largeur de la ligne, hauteur totale */
    background-repeat: repeat-y;
}

.page-approche .grid-item:last-child::after,
.page-service-creation .grid-item:last-child::after,
.page-service-comptable .grid-item:last-child::after,
.page-service-social .grid-item:last-child::after,
.page-service-consulting .grid-item:last-child::after,
.page-service-formation .grid-item:last-child::after,
.page-accueil .section-grid-icons.grid-valeurs .grid-item:last-child::after,
.page-service-juridique .grid-item:last-child::after {
    display: none;
}

.grid-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 5rem;
    margin: 0 auto 2rem;
}

.page-luxembourg .grid-icon,
.page-service-creation .grid-icon {
    height: 6rem;
}

.grid-icon .icon-image {
    height: 100%;
    margin: 0 auto;
}

.page-service-creation .grid-icons .grid-item:nth-child(1) .icon-image {
    height: 85%;
}

.page-service-creation .grid-icons .grid-item:nth-child(3) .icon-image {
    height: 50%;
}

.page-service-creation .grid-icons .grid-item:nth-child(4) .icon-image {
    height: 65%;
}

.page-service-juridique .grid-icons .grid-item:nth-child(4) .icon-image {
    height: 60%;
}

.grid-title {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    margin: 0 auto 2rem;
    text-align: center;
}

.page-service-juridique .grid-icons .grid-item:nth-child(1) .grid-title {
    width: 70%;
}

.page-service-juridique .grid-icons .grid-item:nth-child(2) .grid-title {
    width: 50%;
}

.page-service-creation .grid-content {
    text-align: center;
}

.page-accueil .grid-link {
    display: flex;
    margin-top: 3rem;
    font-weight: 500;
    align-items: center;
    gap: 0 0.5rem;
    width: fit-content;
    font-family: var(--font-heading);
}

.page-accueil .grid-link .icon-arrow-right {
    position: relative;
    bottom: -2.3px;
    display: block;
    height: 0.8rem;
    transition: transform var(--transition-normal);
}

.page-accueil .grid-link:hover .icon-arrow-right {
    transform: translateX(2px);
}

.btn-values-wrapper {
    display: flex;
    justify-content: center;
    padding: 4rem 0 13rem;
}

/* Formulas */
.section-formulas {
    position: relative;
    background-color: var(--color-light-beige);
}
.page-approche .section-formulas .background-color-wrapper,
.page-service-creation .section-formulas .background-color-wrapper,
.page-service-comptable .section-formulas .background-color-wrapper,
.page-service-social .section-formulas .background-color-wrapper,
.page-service-consulting .section-formulas .background-color-wrapper,
.page-service-formation .section-formulas .background-color-wrapper,
.page-service-juridique .section-formulas .background-color-wrapper {
    background-color: var(--color-white);
    padding: var(--spacing-xxl) 0;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.section-formulas .section-header {
    text-align: center;
    padding-bottom: 4rem;
}

.section-formulas .section-header .header-icon {
    width: 10rem;
    margin: 0 auto 1rem;
}

.page-service-comptable .section-formulas .section-header .header-icon,
.page-service-consulting .section-formulas .section-header .header-icon,
.page-service-juridique .section-formulas .section-header .header-icon {
    width: 8rem;
}

.page-service-social .section-formulas .section-header .header-icon,
.page-service-formation .section-formulas .section-header .header-icon {
    width: 7rem;
}

.section-formulas .section-title {
    font-size: 5rem;
    margin-bottom: 3rem;
}

.page-service-creation .section-formulas .section-title {
    width: 600px;
    margin: 0 auto 3rem;
}

.page-service-social .section-formulas .section-title,
.page-service-formation .section-formulas .section-title {
    width: 500px;
    margin: 0 auto 3rem;
}

.section-formulas .section-subtitle {
    width: 800px;
    margin: 0 auto;
}

.page-service-formation .section-formulas .section-subtitle {
    width: 880px;
}

.formulas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.formula-card {
    padding: 5rem;
    background-color: var(--color-light-beige);
}

.formula-title {
    font-size: 1.5rem;
    margin-bottom: 2.4rem;
    text-align: center;
}

.page-service-creation .formula-title {
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}

.formula-subtitle {
    font-style: italic;
    text-align: center;
    margin: 0 auto 2.6rem;
}

.page-service-social .formulas-grid .formula-card:nth-child(2) .formula-subtitle {
    width: 50%;
}

.page-service-comptable .formulas-grid .formula-card:nth-child(2) .formula-subtitle,
.page-service-formation .formulas-grid .formula-card:nth-child(1) .formula-subtitle,
.page-service-formation .formulas-grid .formula-card:nth-child(2) .formula-subtitle,
.page-service-social .formulas-grid .formula-card:nth-child(1) .formula-subtitle {
    width: 80%;
}

.page-service-formation .formulas-grid .formula-card:nth-child(3) .formula-subtitle {
    width: 70%;
}

.page-service-comptable .formulas-grid .formula-card:nth-child(3) .formula-subtitle {
    width: 65%;
}

.formula-intro p {
    margin-bottom: 0;
}

.formula-features {
    list-style: none;
    margin: 1.1rem 0 2.6rem;
}

.formula-features li {
    display: flex;
    align-items: center;
    gap: 0 0.9rem;
    margin-bottom: 1.1rem;
}

.feature-icon {
    position: relative;
    top: -1px;
    width: 18px;
    height: auto;
}

.page-approche .formula-content {
    margin-bottom: 2.6rem;
}

.formula-prefix {
    font-weight: 600;
}

.page-service-formation .formula-target:last-of-type,
.page-service-consulting .formula-target:last-of-type {
    margin-top: 2.6rem;
}

.formulas-conclusion {
    padding-top: 4rem;
}

.conclusion-subtitle {
    font-weight: 600;
}

.formulas-conclusion .container {
    width: 800px;
    text-align: center;
}

.page-service-creation .formulas-conclusion .container {
    width: 900px;
}

.conclusion-icon {
    width: 10rem;
    margin: 2rem auto 0;
}

/* Section devis */
.section-form-devis {
    position: relative;
    background-color: var(--color-white);
    padding: var(--spacing-xxl) 0;
}

.section-form-devis .header-icon {
    width: 6rem;
    margin: 0 auto 2rem;
}

.section-form-devis .section-title {
    width: 500px;
    font-size: 5rem;
    text-align: center;
    margin: 0 auto 3rem;
}

.page-service-comptable .section-form-devis .section-title {
    width: 550px;
}

.page-service-consulting .section-form-devis .section-title {
    width: 400px;
}

.page-service-formation .section-form-devis .section-title {
    width: 600px;
}

.section-form-devis .section-intro {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-align: center;
}

/* Section CTA */
.section-cta {
    position: relative;
    padding: var(--spacing-xxl) 0;
    text-align: center;
    background-color: var(--color-white);
}

.page-accueil .section-cta {
    padding: 0;
}

.page-accueil .section-cta .background-color-wrapper {
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;

}

.page-luxembourg .section-cta,
.page-accueil .section-cta {
    background-color: var(--color-light-beige);
}

.cta-image {
    width: 16rem;
    margin: 0 auto 2rem;
}

.page-luxembourg .cta-image {
    width: 6rem;
}

.cta-title {
    font-size: 5rem;
    width: 40rem;
    margin: 0 auto 4rem;
}

.page-luxembourg .cta-title {
    width: 50rem;
}

.cta-description {
    width: 70rem;
    margin: 0 auto 4rem;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
}


/* FAQ */
.section-faq {
    position: relative;
    background-color: var(--color-white);
}

.section-faq .background-color-wrapper {
    background-color: var(--color-light-beige);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.section-faq .section-title {
    text-align: center;
    font-size: 15rem;
    margin-bottom: 11rem;
}

.faq-item {
    position: sticky;
    top: 88px;
    padding: 3rem 0;
    background-color: var(--color-light-beige);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.faq-question[aria-expanded="false"]:hover {
    color: var(--color-secondary);
}

.faq-icon {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    transition: transform var(--transition-slow);
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-primary);
    transition: background-color var(--transition-fast);
}

.faq-icon::before {
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    width: 2px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.faq-question[aria-expanded="false"]:hover .faq-icon::before,
.faq-question[aria-expanded="false"]:hover .faq-icon::after {
    background-color: var(--color-secondary);
}

.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
    margin: 0;
    padding-right: 10%;
}

.faq-item.active .faq-answer {
    height: auto;
}

.faq-item.active .faq-icon {
    transform: rotate(-1845deg);
}

.faq-cta {
    text-align: center;
    padding: 8rem 0 0;
}

.faq-cta h2 {
    font-size: 5rem;
    margin-bottom: 2.4rem;
}

/* Blog Grid */
.section-blog-grid {
    position: relative;
    background-color: var(--color-light-beige);
}

.page-accueil .section-blog-grid {
    background-color: var(--color-white);
}

.section-blog-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.1rem;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    pointer-events: none;
    z-index: 1;
}

.page-accueil .section-blog-grid::before {
    display: none;
}

.section-blog-grid .background-color-wrapper {
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.page-accueil .section-blog-grid .background-color-wrapper {
    padding-bottom: 0;
    background-color: var(--color-white);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: top;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.blog-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-posts-list .blog-grid,
.section-related-posts .blog-grid {
    gap: 0;
}

.blog-grid-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.page-single .blog-grid-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.1rem;
    width: 100%;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    pointer-events: none;
    z-index: 1;
}

.page-accueil .blog-grid-wrapper {
    flex-direction: column;
}

.blog-grid-header {
    flex: 1;
}

.page-accueil .blog-grid-header {
    flex: auto;
    width: 100%;
    padding-bottom: 6rem;
    text-align: center;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: bottom;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.sticky-blog-grid-header {
    position: sticky;
    top: 12rem;
    padding: 0 7rem 0 4rem;
}

.page-accueil .sticky-blog-grid-header {
    position: static;
    top: auto;
}

.blog-grid-header h2 {
    font-size: 5rem;
    margin-bottom: 3rem;
}

.page-accueil .blog-grid-header h2 {
    width: 700px;
    margin: 0 auto 3rem;
}

.blog-grid-header p {
    margin-bottom: 0;
}

.page-accueil .blog-grid-header p {
    width: 600px;
    margin: 0 auto 2rem;
}

.section-blog-grid .section-illustration {
    width: 12rem;
    margin-top: 8rem;
}

.page-accueil .section-blog-grid .section-illustration {
    width: 8rem;
    margin: 0 auto 2rem;
}

.blog-grid-articles {
    flex: 1;
    position: relative;
    z-index: 2;
}

.page-accueil .blog-grid-articles {
    flex: auto;
    display: flex;
    justiitfy-content: space-between;
}

.blog-card {
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: bottom;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.page-accueil .blog-card,
.section-related-posts .blog-card {
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: right;
    background-size: 0.1rem 100%; 
    background-repeat: repeat-y;
}

.blog-card:nth-of-type(3n) {
    background-image: none;
}

.page-accueil .blog-card,
.section-related-posts .blog-card {
    flex: 1;
}

.blog-card-inner {
    padding: 10rem 10rem 9rem;
}

.blog-card:first-of-type .blog-card-inner {
    padding-top: 0;
}

.blog-card:last-of-type .blog-card-inner {
    padding-bottom: 0;
}

.page-accueil .blog-card-inner,
.section-related-posts .blog-card {
    padding: 5rem 5rem 10rem;
}

.page-accueil .blog-card:first-of-type .blog-card-inner {
    padding-top: 5rem;
}

.blog-thumbnail {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-content {
    padding-top: 1rem;
}

.blog-category {
    color: var(--color-secondary);
    font-weight: 600;
}

.blog-card h3.blog-title {
    font-size: 1.5rem;
}

.blog-card h3.blog-title a {
    line-height: 1.4;
}

.blog-card .blog-link,
.blog-grid .blog-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2.4rem;
    font-weight: 500;
    width: fit-content;
    font-family: var(--font-heading);
}

.blog-card .blog-link .icon-arrow-right,
.blog-grid .blog-link .icon-arrow-right {
    position: relative;
    bottom: -2.3px;
    display: block;
    height: 0.8rem;
    transition: transform var(--transition-normal);
}

.blog-card .blog-link:hover .icon-arrow-right,
.blog-grid .blog-link:hover .icon-arrow-right {
    transform: translateX(2px);
}

.blog-grid::before,
.blog-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

.blog-grid::before {
    left: 33.33%;
    transform: translateX(-50%);
}

.blog-grid::after {
    left: 66.66%;
    transform: translateX(-50%);
}

.blog-grid::before,
.blog-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    z-index: 3;
}

.blog-grid::before {
    left: 33.33%;
    transform: translateX(-50%);
}

.blog-grid::after {
    left: 66.66%;
    transform: translateX(-50%);
}

.section-related-posts .blog-grid::before,
.section-related-posts .blog-grid::after {
    display: none;
}


/* Section Single Content */
.section-single-content {
    background-color: var(--color-light-beige);
}

.section-single-content .background-color-wrapper {
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.single-content-main {
    width: 70%;
    padding: var(--spacing-xxl) 0;
}

.single-content-sidebar {
    width: 30%;
    padding: var(--spacing-xxl) 0;
}

.sidebar-top {
    padding: 4rem 0;
}

.sidebar-icon {
    width: 70px;
    margin: 0 auto 2rem;
}

.article-meta {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 500;
}

.publication-date {
    margin-bottom: 0;
}

.publication-author {
    margin-bottom: 0;
    color: var(--color-lightest-primary);
    font-style: italic;
    margin-bottom: 2rem;
}

.article-specialty p {
    margin-bottom: 0;
}

.article-specialty a {
    margin-bottom: 0.5rem;
    color: var(--color-lightest-primary);
    font-style: italic;
}

.article-specialty a:hover {
    color: var(--color-secondary);
}

.section-related-posts {
    background-color: var(--color-white);
    padding-bottom: var(--spacing-xxl);
}

.section-related-posts h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    padding: 2rem 0 2.2rem;
    margin: 0;
}

.article-author-bio {
    padding: 0 4rem;
    margin-top: 7rem;
}

.article-author-bio p {
    position: relative;
    font-style: italic;
}

.article-author-bio p::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    width: 35px;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-primary) 0,
        var(--color-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

/* Pages légales */

.section-legal-content .container--legal {
    display: flex;
    justify-content: space-between;
}

.legal-menu-wrapper {
    width: 20%;
    padding-bottom: 8rem;
}

.legal-article {
    width: 80%;
    padding: 8rem;
}

.legal-article h1 {
    margin-bottom: 2.4rem;
}

.legal-article h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 4rem 0 2rem;
}

.legal-article h2:first-of-type {
    margin-top: 0;

}

.legal-article h3 {
    margin: 2rem 0 1.4rem;
}

.legal-article h2 + h3 {
    margin-top: 0;
}

.legal-introduction {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 5rem;
}

.legal-last-update {
    position: relative;
    font-style: italic;
    margin-top: 6rem;
    font-size: 1.2rem;
}

.legal-last-update::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    width: 35px;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-primary) 0,
        var(--color-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

.legal-menu {
    position: sticky;
    top: 89px;
}

.legal-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.legal-menu li {
    text-align: center;
    padding: 2rem 0;
    font-family: var(--font-heading);
    font-weight: 700;
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.blog-categories-filter {
    padding: 2.3rem 0 2rem;
}

.blog-categories-filter .container {
    display: flex;
    justify-content: center;
    gap: 0 3rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-lightest-primary) transparent;
    font-size: 1.2rem;
    font-weight: 500;
}

.blog-categories-filter a {
    position: relative;
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.blog-categories-filter a:hover {
    color: var(--color-secondary);
}

.blog-categories-filter a.active {
    color: var(--color-secondary);
    font-weight: 600;
}

.blog-home-content {
    position: relative;
    background-color: var(--color-white);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: var(--spacing-xxl) 0;
}

.pagination-wrapper {
    padding: 2.1rem 0 2.2rem;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 0 0.3rem;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
}

.page-numbers {
    padding: 0 1rem;
}

.page-numbers.current {
    position: relative;
}

.page-numbers.current::before {
    content: '[';
    position: absolute;
    bottom: 0;
    left:0;
    width: auto;
    height: auto;
}

.page-numbers.current::after {
    content: ']';
    position: absolute;
    bottom: 0;
    right:0;
    width: auto;
    height: auto;
}

.next.page-numbers,
.prev.page-numbers {
    position: relative;
    top: 0.7px;
    display: flex;
    align-items: center;
    gap: 0 0.4rem;
}

.page-numbers .icon-arrow {
    position: relative;
    top: 1.1px;
    display: block;
    height: 0.8rem;
    width: auto;
    transition: transform var(--transition-normal);
}

.page-numbers.prev:hover .icon-arrow {
    transform: translateX(-2px);
}

.page-numbers.next:hover .icon-arrow {
    transform: translateX(2px);
}

.blog-posts-list .post {
    position: relative;
    padding: 4rem;
    z-index: 2;
}

/* Wrapper pour les bordures horizontales */
.blog-grid-horizontal-borders {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

/* Bordures horizontales dynamiques (positionnées par JS) */
.blog-grid-horizontal-borders .horizontal-border {
    position: absolute;
    left: 0;
    right: 0;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
}

.blog-posts-list h2.entry-title {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-top: 0.5rem;
    font-weight: 700;
}

.blog-posts-list article {
    background-color: var(--color-white);
    transition: background-color var(--transition-fast);
}

.blog-posts-list article:hover,
.section-related-posts article.blog-card:hover {
    background-color: var(--color-light-beige);
}

.blog-posts-list article:hover .entry-content p,
.section-related-posts article.blog-card:hover p {
    color: var(--color-primary);
}

.blog-posts-list article:hover .link-animated::after,
.section-related-posts article.blog-card:hover .blog-link::after {
    width: 100%;
}

.blog-posts-list article .post-thumbnail,
.section-related-posts article.blog-card .blog-card-image {
    overflow: hidden;
}

.blog-posts-list article .wp-post-image,
.section-related-posts article.blog-card .wp-post-image {
    transition: transform var(--transition-slow);
}

.blog-posts-list article:hover .wp-post-image,
.section-related-posts article.blog-card:hover .wp-post-image {
    transform: scale(1.05);
}

.single-content-wrapper {
    display: flex;
    justify-content: space-between;
}

.single-content-main .entry-content {
    padding: 0 4rem;
}

.entry-content strong {
    font-weight: 500;
}

.article-categories h3 {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 2.4rem 0;
}

.blog-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.blog-categories-list li {
    padding: 2.15rem 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.4rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: top;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.blog-categories-list li a {
    color: var(--color-lightest-primary);
}

.blog-categories-list li a:hover {
    color: var(--color-primary);
}

.sidebar-cta {
    position: sticky;
    top: 88px;
    padding: 7rem 0 7.2rem;
}

.sidebar-cta .cta-icon {
    width: 40px;
    margin: 0 auto 1.4rem;
}

.sidebar-cta h3 {
    font-size: 2.8rem;
    margin: 0 auto 1.4rem;
    text-align: center;
    width: 70%;
}

.sidebar-cta p {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: var(--font-heading);
    margin: 0 auto 2.4rem;
    text-align: center;
    width: 80%;
}

.article-introduction p,
.entry-content p {
    margin-bottom: 1.4rem;
}

.article-introduction p:last-of-type,
.entry-content p:has(+ h2, + h3) {
    margin-bottom: 0;
}

.section-related-posts .blog-card-title {
    margin: 1rem 0;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.single-content-main table,
.legal-article table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #eae5df;
    margin-bottom: 1.4rem;
}

.single-content-main table thead,
.legal-article table thead {
    background-color: #eae5df;
}

.single-content-main table thead > tr > th,
.legal-article table thead > tr > th {
    font-weight: 600;
    padding: 1rem 1rem 0.9rem;
    font-size: 1.2rem;
    text-align: left;
}

.single-content-main table tbody tr:nth-child(odd) {
    background-color: var(--color-light-beige);
}

.legal-article table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.single-content-main table tbody > tr > td,
.legal-article table tbody > tr > td {
    padding: 1rem 1rem 0.9rem;
    font-size: 1.2rem;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-devis-wrapper {
    margin-top: 2rem;
}

.form-devis-wrapper h3 {
    font-size: 2rem;
    font-weight: 700;
    padding: 2.3rem 0;
    text-align: center;
    margin: 0;
}

.form-title {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group,
.form-checkbox {
    position: relative;
    display: flex;
    justify-content: center;
}

.form-group::after,
.form-checkbox::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.1rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: bottom;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.form-checkbox label:hover {
    cursor: pointer;
}

.form-group:first-of-type::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1rem;
    width: 100%;
    background-image: repeating-linear-gradient(
        to right,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: bottom;
    background-size: 100% 0.1rem;
    background-repeat: repeat-x;
}

.container--form {
    position: relative;
    width: 700px;
    background-color: var(--color-light-beige);
    padding: 1.4rem 2rem;
}

.contact-form .container--form {
    width: 75%;
    background-color: var(--color-white);
}

.popup-devis .container--form {
    width: 500px;
}

.form-checkbox .container--form {
    padding: 0
}

.container--form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: left;
    background-size: 0.1rem 100%;
    background-repeat: repeat-y;
}

.container--form::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0.1rem;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: right;
    background-size: 0.1rem 100%;
    background-repeat: repeat-y;
}

.form-checkbox .container--form {
    background-color: var(--color-white);
}

.form-group label {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-heading);
}

.form-group .checkbox-group .checkbox-label  {
    display: flex;
    align-items: center;
    gap: 0 1rem;
}

.form-group .checkbox-group .checkbox-label span {
    font-size: 1.4rem;
    font-weight: 500;
}

.form-group .checkbox-group .checkbox-label input {
    width: auto;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: border-color var(--transition-fast);
    background-color: var(--color-light-beige);
}

.form-group textarea {
    resize: vertical; /* Permet uniquement le redimensionnement vertical */
}

.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
    background-color: var(--color-white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-secondary);
}

.form-group input:placeholder,
.form-group textarea:placeholder {
    color: var(--color-lightest-primary);
    opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: var(--color-lightest-primary);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--color-lightest-primary);
    opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--color-lightest-primary);
}

.form-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0;
    border: 1px solid var(--color-light-beige);
    background-color: var(--color-light-beige);
    transition: all var(--transition-fast);
    position: relative;
}

.form-checkbox input[type="checkbox"]:hover {
    cursor: pointer;
    border-color: var(--color-primary);
}

input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    
    /* Coche en forme de V avec des bordures */
    left: 0.45rem;
    top: 0.25rem;
    width: 0.4rem;
    height: 0.7rem;
    border: solid var(--color-white);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.form-checkbox .checkbox-wrapper {
    display: flex;
    padding: 2.62rem 2.6rem;    
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-lightest-primary) 0,
        var(--color-lightest-primary) 0.6rem,
        transparent 0.6rem,
        transparent 1.2rem
    );
    background-position: right;
    background-size: 0.1rem 100%;
    background-repeat: repeat-y;
}

.form-checkbox label {
    font-size: 1.1rem;
    font-family: var(--font-heading);
    width: 60%;
}

.contact-form .form-checkbox label {
    width: 70%;
    position: relative;
    bottom: 2.5px;
}

.form-checkbox .container--form {
    display: flex;
    align-items: center;
    gap: 0 1.8rem;
}

.form-message {
    padding: 1.3rem 2rem 1.1rem;
    border-radius: var(--radius-sm);
    margin: 3rem auto 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    width: 80%;
}

.contact-form .form-message {
    width: 75%;
}

.devis-form .form-message {
    width: 700px;
}

.popup-devis .form-message {
    width: 500px;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

.aos {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.aos.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Délais optionnels */
.aos[data-aos-delay="100"] { transition-delay: 0.1s; }
.aos[data-aos-delay="200"] { transition-delay: 0.2s; }
.aos[data-aos-delay="300"] { transition-delay: 0.3s; }
.aos[data-aos-delay="400"] { transition-delay: 0.4s; }
.aos[data-aos-delay="500"] { transition-delay: 0.5s; }

/* Durées optionnelles */
.aos[data-aos-duration="400"] { transition-duration: 0.4s; }
.aos[data-aos-duration="600"] { transition-duration: 0.6s; }
.aos[data-aos-duration="800"] { transition-duration: 0.8s; }
.aos[data-aos-duration="1000"] { transition-duration: 1s; }


/* ==========================================================================
   GESTION DES STICKY ELEMENTS
   ========================================================================== */

.section-hero {
    position: sticky;
    top: 20px;
    z-index: 1;
}

.section-hero.hero-contact {
    top: -12px;
}

.section-hero.hero-single {
    position: static;
    top: auto;
}

.section-pourquoi,
.section-address,
.blog-home-content {
    z-index: 2;
}

.page-service-creation .section-pourquoi,
.page-accueil .section-pourquoi {
    position: sticky;
    top: 20px;
}

.section-flex-list {
    z-index: 3;
}

.section-grid-icons {
    z-index: 4;
}

.section-formulas {
    z-index: 5;
}

.section-form-devis {
    z-index: 6;
}

.section-cta {
    z-index: 7;
}

.section-faq {
    z-index: 8;
}

.section-blog-grid {
    z-index: 9;
}

/* ==========================================================================
   POPUP DEVIS
   ========================================================================== */

.popup-devis {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-devis.active {
    opacity: 1;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-light-beige);
    opacity: 0.9;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-white);
    border-radius: 0;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 4rem 0 8rem;
}

.popup-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    padding: 0.5rem;
    transition: all var(--transition-normal);
    z-index: 10;
}

.popup-close:hover {
    color: var(--color-dark-primary);
    transform: rotate(90deg);
}

.popup-header {
    text-align: center;
    margin-bottom: 3rem;
}

.popup-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.popup-title {
    font-size: 4.6rem;
    font-family: var(--font-heading);
    margin: 0 auto 2.4rem;
    width: 500px;
}

.popup-intro {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.6;
}

.popup-intro p {
    width: 500px;
    margin: 0 auto 4rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
}

.popup-form .form-message {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}

.popup-form .form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.popup-form .form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.popup-form .checkbox-group {
    margin-top: 0.6rem;
}

.popup-form .checkbox-group .form-radio,
.popup-form .checkbox-group .checkbox-label {
    margin-bottom: 0.3rem;
}

.popup-form .checkbox-group .form-radio:last-of-type {
    margin-bottom: 0;
}

/* Custom Radio Buttons - Style carré */
.popup-form .checkbox-label {
    position: relative;
    padding-left: 0;
}

.popup-form .checkbox-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.popup-form .checkbox-label input[type="radio"] + span {
    position: relative;
    padding-left: 2.5rem;
    cursor: pointer;
    display: inline-block;
}

.popup-form .checkbox-label input[type="radio"] + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--color-white);
    transition: all var(--transition-normal);
}

.popup-form .checkbox-label input[type="radio"]:checked + span::before {
    background-color: var(--color-white);
}

.popup-form .checkbox-label input[type="radio"]:checked + span::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
}

.popup-form .checkbox-label input[type="radio"]:hover + span::before {
    border-color: var(--color-primary);
}

/* Custom Checkboxes - Style carré */
.popup-form .checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.popup-form .checkbox-label input[type="checkbox"] + span {
    position: relative;
    padding-left: 2.5rem;
    cursor: pointer;
    display: inline-block;
}

.popup-form .checkbox-label input[type="checkbox"] + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--color-white);
    transition: all var(--transition-normal);
}

.popup-form .checkbox-label input[type="checkbox"]:checked + span::before {
    background-color: var(--color-primary);
}

.popup-form .checkbox-label input[type="checkbox"]:checked + span::after {
    content: '';
    position: absolute;

    /* Coche en forme de V avec des bordures */
    left: 0.5rem;
    top: 0.7rem;
    width: 0.4rem;
    height: 0.7rem;
    border: solid var(--color-white);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.popup-form .checkbox-label input[type="checkbox"]:hover + span::before {
    border-color: var(--color-primary);
}