/* =============================================================================
   public/css/style.css
   Rôle : Styles principaux du site front
   Architecture :
     1. Variables CSS
     2. Base & typographie
     3. Utilitaires (container, boutons)
     4. Navigation (sticky, rétrécit au scroll)
     5. Hero (parallax desktop)
     6. Services
     7. À propos
     8. Actualités
     9. CTA Contact (image de fond)
     10. Article individuel
     11. Page contact
     12. Pages légales
     13. Footer (compact)
     14. Pages d'erreur
     15. Animations
     16. Responsive
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES CSS
   ----------------------------------------------------------------------------- */
:root {

    /* --- COULEURS PRINCIPALES --- */
    --color-primary        : #b598ec;
    --color-primary-dark   : #834d91;
    --color-primary-light  : #f0eafa;
    --color-secondary      : #2d2d2d;
    --color-accent         : #ffd700;

    /* --- COULEURS NEUTRES --- */
    --color-bg             : #f6f1e7;
    --color-bg-alt         : #ede8dc;
    --color-text           : #2d2d2d;
    --color-text-light     : #6b6b6b;
    --color-border         : #d9d3c8;
    --color-white          : #ffffff;
    --color-black          : #1a1a1a;

    /* --- COULEURS FEEDBACK --- */
    --color-success        : #16a34a;
    --color-error          : #dc2626;
    --color-warning        : #d97706;
    --color-info           : #0284c7;

    /* --- TYPOGRAPHIE --- */
    --font-primary         : 'Merriweather', serif;
    --font-secondary       : 'Roboto', sans-serif;

    --font-size-xs         : 0.75rem;
    --font-size-sm         : 0.875rem;
    --font-size-base       : 1rem;
    --font-size-md         : 1.125rem;
    --font-size-lg         : 1.5rem;
    --font-size-xl         : 2rem;
    --font-size-2xl        : 2.5rem;
    --font-size-3xl        : 3.5rem;

    --font-weight-normal   : 400;
    --font-weight-medium   : 500;
    --font-weight-semibold : 600;
    --font-weight-bold     : 700;

    --line-height-tight    : 1.2;
    --line-height-normal   : 1.6;
    --line-height-relaxed  : 1.8;

    /* --- ESPACEMENTS --- */
    --space-xs             : 0.25rem;
    --space-sm             : 0.5rem;
    --space-md             : 1rem;
    --space-lg             : 1.5rem;
    --space-xl             : 2.5rem;
    --space-2xl            : 4rem;
    --space-3xl            : 6rem;

    /* --- MISE EN PAGE --- */
    --container-width      : 75rem;
    --container-padding    : 1.5rem;
    --navbar-height        : 4.5rem;
    --navbar-height-small  : 3.5rem;

    /* --- BORDURES & RAYONS --- */
    --radius-sm            : 0.25rem;
    --radius-md            : 0.5rem;
    --radius-lg            : 1rem;
    --radius-xl            : 1.5rem;
    --radius-full          : 9999px;
    --border-width         : 1px;

    /* --- OMBRES --- */
    --shadow-sm            :  3px  3px  6px #d9d3c8, -3px -3px  6px #ffffff;
    --shadow-md            :  5px  5px 12px #d9d3c8, -5px -5px 12px #ffffff;
    --shadow-lg            :  8px  8px 20px #d9d3c8, -8px -8px 20px #ffffff;
    --shadow-inset         : inset 5px 5px 10px #d9d3c8,
                             inset -5px -5px 10px #ffffff;
    --shadow-btn           : 0 4px 12px rgba(131, 77, 145, 0.35);
    --shadow-btn-hover     : 0 6px 20px rgba(131, 77, 145, 0.50);

    /* --- TRANSITIONS --- */
    --transition-fast      : 0.15s ease;
    --transition-normal    : 0.3s ease;
    --transition-slow      : 0.5s ease;

    /* --- HERO / CTA --- */
    --hero-height          : 100vh;
    --hero-overlay         : rgba(0, 0, 0, 0.65);
    --cta-overlay          : rgba(0, 0, 0, 0.70);

    /* --- DÉGRADÉ NAV/FOOTER --- */
    --gradient-brand       : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}


/* -----------------------------------------------------------------------------
   2. BASE & TYPOGRAPHIE
   ----------------------------------------------------------------------------- */
body {
    font-family      : var(--font-secondary);
    font-size        : var(--font-size-base);
    font-weight      : var(--font-weight-normal);
    line-height      : var(--line-height-normal);
    color            : var(--color-text);
    background-color : var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family : var(--font-primary);
    font-weight : var(--font-weight-bold);
    line-height : var(--line-height-tight);
    color       : var(--color-primary-dark);
}

p {
    line-height : var(--line-height-relaxed);
}

a {
    color      : inherit;
    transition : color var(--transition-fast);
}

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

address {
    font-style : normal;
}


/* -----------------------------------------------------------------------------
   3. UTILITAIRES
   ----------------------------------------------------------------------------- */
.container {
    width     : 100%;
    max-width : var(--container-width);
    margin    : 0 auto;
    padding   : 0 var(--container-padding);
}

.section__titre {
    font-size     : var(--font-size-xl);
    font-weight   : var(--font-weight-bold);
    text-align    : center;
    margin-bottom : var(--space-2xl);
    color         : var(--color-primary-dark);
}

/* --- BOUTONS — SYSTÈME UNIFIÉ NEUMORPHIQUE --- */
.btn {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    padding          : 0.75rem 1.75rem;
    font-family      : var(--font-secondary);
    font-size        : var(--font-size-base);
    font-weight      : var(--font-weight-semibold);
    border-radius    : var(--radius-full);
    border           : none;
    cursor           : pointer;
    white-space      : nowrap;
    text-decoration  : none;
    background-color : var(--color-bg);
    color            : var(--color-primary-dark);
    box-shadow       :  6px  6px 12px #d9d3c8,
                       -6px -6px 12px #ffffff;
    transition       : box-shadow var(--transition-normal),
                       color var(--transition-normal),
                       background-color var(--transition-normal);
}

.btn:hover {
    box-shadow : var(--shadow-inset);
}

.btn:active {
    box-shadow : var(--shadow-inset);
}

/* Variante principale */
.btn--primary {
    color : var(--color-primary-dark);
}

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

/* Variante outline : liseré brand visible au repos */
.btn--outline {
    color  : var(--color-primary-dark);
    border : 2px solid var(--color-primary);
}

.btn--outline:hover {
    color      : var(--color-primary-dark);
    box-shadow : var(--shadow-inset);
}

/* Variante secondaire : usage sur fonds sombres/images (hero, cta) */
.btn--secondary {
    background-color : transparent;
    color            : var(--color-white);
    border           : 2px solid rgba(255, 255, 255, 0.6);
    box-shadow       :  6px  6px 12px rgba(0, 0, 0, 0.25),
                       -6px -6px 12px rgba(255, 255, 255, 0.05);
}

.btn--secondary:hover {
    background-color : rgba(255, 255, 255, 0.12);
    color            : var(--color-white);
    box-shadow       : inset 4px 4px 8px rgba(0, 0, 0, 0.3),
                       inset -4px -4px 8px rgba(255, 255, 255, 0.05);
}

.btn--secondary:active {
    box-shadow : inset 4px 4px 8px rgba(0, 0, 0, 0.3),
                 inset -4px -4px 8px rgba(255, 255, 255, 0.05);
}

/* Variante danger */
.btn--danger {
    background-color : #fdecea;
    color            : var(--color-error);
    box-shadow       :  6px  6px 12px #e8c8c8,
                       -6px -6px 12px #ffffff;
}

.btn--danger:hover {
    color      : var(--color-error);
    box-shadow : inset 5px 5px 10px #e8c8c8,
                 inset -5px -5px 10px #ffffff;
}

.btn--danger:active {
    box-shadow : inset 5px 5px 10px #e8c8c8,
                 inset -5px -5px 10px #ffffff;
}

/* Tailles */
.btn--sm {
    padding   : 0.375rem 0.875rem;
    font-size : var(--font-size-sm);
}

.btn--full {
    width : 100%;
}

/* --- MESSAGES FLASH --- */
.flash {
    padding       : var(--space-md) var(--space-lg);
    border-radius : var(--radius-md);
    margin-bottom : var(--space-lg);
    display       : flex;
    align-items   : center;
    gap           : var(--space-sm);
    font-weight   : var(--font-weight-medium);
}

.flash--success {
    background-color : #dcfce7;
    color            : #166534;
    border           : 1px solid #bbf7d0;
}

.flash--error {
    background-color : #fee2e2;
    color            : #991b1b;
    border           : 1px solid #fecaca;
}

.flash--warning {
    background-color : #fef9c3;
    color            : #854d0e;
    border           : 1px solid #fef08a;
}

.flash--info {
    background-color : #e0f2fe;
    color            : #075985;
    border           : 1px solid #bae6fd;
}

/* --- PAGE HEADER (toutes pages sauf home) --- */
.page-header {
    background-color : var(--color-primary-dark);
    padding          : var(--space-2xl) 0;
    text-align       : center;
}

.page-header__titre {
    font-size     : var(--font-size-2xl);
    margin-bottom : var(--space-sm);
    color         : var(--color-white);
    /* Lisibilité garantie sur fond coloré */
    text-shadow   : 0 1px 3px rgba(0, 0, 0, 0.25);
}

.page-header__intro {
    font-size : var(--font-size-md);
    color     : rgba(255, 255, 255, 0.85);
}

/* --- BREADCRUMB --- */
.breadcrumb ol {
    display       : flex;
    flex-wrap     : wrap;
    gap           : var(--space-sm);
    align-items   : center;
    font-size     : var(--font-size-sm);
    color         : var(--color-text-light);
    margin-bottom : var(--space-md);
}

.breadcrumb li:not(:last-child)::after {
    content     : '→';
    margin-left : var(--space-sm);
    color       : var(--color-border);
}

.breadcrumb a {
    color : var(--color-text-light);
}

.breadcrumb a:hover {
    color : var(--color-primary);
}


/* -----------------------------------------------------------------------------
   4. NAVIGATION — DÉGRADÉ BRAND
   ----------------------------------------------------------------------------- */
.site-header {
    position   : fixed;
    top        : 0;
    left       : 0;
    right      : 0;
    height     : var(--navbar-height);
    z-index    : 1000;
    background: linear-gradient(
        135deg,
        var(--color-primary), #8D5CA3
    );
    box-shadow : 0 2px 16px rgba(131, 77, 145, 0.3);
    transition : height var(--transition-normal),
                 box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
    height     : var(--navbar-height-small);
    box-shadow : 0 4px 24px rgba(131, 77, 145, 0.45);
}

.navbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    height          : 100%;
    max-width       : var(--container-width);
    margin          : 0 auto;
    padding         : 0 var(--container-padding);
}

.navbar__logo {
    font-family : var(--font-primary);
    font-size   : var(--font-size-lg);
    font-weight : var(--font-weight-bold);
    color       : var(--color-white);
    transition  : opacity var(--transition-fast);
    display     : flex;
    align-items : center;
    gap         : var(--space-sm);
}

.navbar__logo img {
    height  : 3.5rem;
    width   : auto;
    display : block;
}

.navbar__logo span {
    font-size   : var(--font-size-lg);
    font-weight : var(--font-weight-bold);
    color       : var(--color-white);
}

.navbar__logo:hover {
    color   : var(--color-white);
    opacity : 0.85;
}

.navbar__menu {
    display     : flex;
    gap         : var(--space-xl);
    align-items : center;
}

.navbar__menu > li {
    display     : flex;
    align-items : center;
}

.navbar__link {
    font-size   : var(--font-size-base);
    font-weight : var(--font-weight-medium);
    color       : rgba(255, 255, 255, 0.85);
    padding     : var(--space-xs) 0;
    position    : relative;
    transition  : color var(--transition-fast);
}

.navbar__link:hover {
    color : var(--color-white);
}

.navbar__link::after {
    content          : '';
    position         : absolute;
    bottom           : -4px;
    left             : 50%;
    transform        : translateX(-50%);
    width            : 0;
    height           : 3px;
    border-radius    : var(--radius-full);
    background-color : rgba(255, 255, 255, 0.9);
    transition       : width var(--transition-normal);
}

.navbar__link:hover::after,
.navbar__link--active::after {
    width : 100%;
}

.navbar__link--active {
    color : var(--color-white);
}

.navbar__burger {
    display        : none;
    flex-direction : column;
    gap            : 5px;
    padding        : var(--space-sm);
    background     : none;
    border         : none;
    cursor         : pointer;
}

.navbar__burger span {
    display          : block;
    width            : 1.5rem;
    height           : 2px;
    background-color : var(--color-white);
    transition       : all var(--transition-fast);
}

/* Dropdown Services */
.navbar__dropdown {
    position : relative;
}

.navbar__dropdown-toggle {
    display     : flex;
    align-items : center;
    gap         : 0.35rem;
    background  : none;
    border      : none;
    cursor      : pointer;
    font-family : inherit;
    font-size   : var(--font-size-base);
    font-weight : var(--font-weight-medium);
    color       : rgba(255, 255, 255, 0.85);
    padding     : var(--space-xs) 0;
    line-height : inherit;
    position    : relative;
    transition  : color var(--transition-fast);
}

.navbar__dropdown-toggle:hover {
    color : var(--color-white);
}

.navbar__dropdown-toggle::after {
    content          : '';
    position         : absolute;
    bottom           : -4px;
    left             : 50%;
    transform        : translateX(-50%);
    width            : 0;
    height           : 3px;
    border-radius    : var(--radius-full);
    background-color : rgba(255, 255, 255, 0.9);
    transition       : width var(--transition-normal);
}

.navbar__dropdown-toggle:hover::after,
.navbar__dropdown-toggle.navbar__link--active::after {
    width : 100%;
}

.navbar__dropdown-arrow {
    display      : inline-block;
    width        : 0;
    height       : 0;
    border-left  : 4px solid transparent;
    border-right : 4px solid transparent;
    border-top   : 5px solid currentColor;
    transition   : transform var(--transition-fast);
    margin-top   : 2px;
}

.navbar__dropdown.is-open .navbar__dropdown-arrow {
    transform : rotate(180deg);
}

.navbar__dropdown-menu {
    display          : none;
    position         : absolute;
    top              : calc(100% + 0.75rem);
    left             : 50%;
    transform        : translateX(-50%);
    background-color : var(--color-white);
    border           : var(--border-width) solid var(--color-border);
    border-radius    : var(--radius-md);
    box-shadow       : 0 8px 24px rgba(131, 77, 145, 0.2);
    min-width        : 14rem;
    padding          : var(--space-xs) 0;
    z-index          : 200;
}

.navbar__dropdown.is-open .navbar__dropdown-menu {
    display : block;
}

.navbar__dropdown-link {
    display     : block;
    padding     : var(--space-sm) var(--space-lg);
    font-size   : var(--font-size-base);
    font-weight : var(--font-weight-medium);
    color       : var(--color-text);
    transition  : color var(--transition-fast),
                  background-color var(--transition-fast);
    white-space : nowrap;
}

.navbar__dropdown-link:hover {
    color            : var(--color-primary-dark);
    background-color : var(--color-primary-light);
}

.site-main {
    padding-top : var(--navbar-height);
}


/* -----------------------------------------------------------------------------
   5. HERO — PARALLAX DESKTOP
   ----------------------------------------------------------------------------- */
.hero {
    position        : relative;
    height          : var(--hero-height);
    display         : flex;
    align-items     : center;
    justify-content : center;
    overflow        : hidden;
    margin-top      : calc(-1 * var(--navbar-height));
}

.hero__bg {
    position            : absolute;
    inset               : -20%;
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    will-change         : transform;
}

.hero__overlay {
    position         : absolute;
    inset            : 0;
    background-color : var(--hero-overlay);
    z-index          : 1;
}

.hero__content {
    position   : relative;
    z-index    : 2;
    text-align : center;
    padding    : 0 var(--container-padding);
    max-width  : 50rem;
}

.hero__h1 {
    font-size     : var(--font-size-3xl);
    font-weight   : var(--font-weight-bold);
    color         : var(--color-white);
    margin-bottom : var(--space-md);
    line-height   : var(--line-height-tight);
}

.hero__h2 {
    font-size     : var(--font-size-lg);
    color         : rgba(255, 255, 255, 0.88);
    margin-bottom : var(--space-xl);
    font-family   : var(--font-secondary);
    font-weight   : var(--font-weight-normal);
}

.hero__buttons {
    display         : flex;
    gap             : var(--space-md);
    justify-content : center;
    flex-wrap       : wrap;
}


/* -----------------------------------------------------------------------------
   6. SERVICES
   ----------------------------------------------------------------------------- */
.services {
    padding          : var(--space-3xl) 0;
    background-color : var(--color-bg);
}

.services__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(18rem, 1fr));
    gap                   : var(--space-xl);
}

.service-card {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    gap            : var(--space-lg);
    padding        : var(--space-lg);
    border         : var(--border-width) solid var(--color-border);
    border-radius  : var(--radius-xl);
    box-shadow     : var(--shadow-sm);
    transition     : transform var(--transition-normal),
                     box-shadow var(--transition-normal),
                     border-color var(--transition-normal);
    background-color: var(--color-bg);
}

.service-card:hover {
    transform    : translateY(-6px);
    box-shadow   : var(--shadow-lg);
    border-color : var(--color-primary);
}

.service-card__image {
    width         : 100%;
    aspect-ratio  : 4 / 3;
    max-height    : 16rem;
    border-radius : var(--radius-lg);
    overflow      : hidden;
}

.service-card__image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform var(--transition-slow);
}

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

.service-card__body {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-sm);
}

.service-card__titre {
    font-size   : var(--font-size-md);
    font-weight : var(--font-weight-bold);
    color       : var(--color-secondary);
}

.service-card__texte {
    font-size : var(--font-size-base);
    color     : var(--color-text-light);
}

.service-card__btn {
    margin-top : var(--space-md);
    align-self : center;
}

/* Pages services détail */
.service-detail {
    padding : var(--space-3xl) 0;
}

.service-detail__container {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(18rem, 1fr));
    gap                   : var(--space-2xl);
    align-items           : center;
}

.service-detail__texte {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-md);
}

.service-detail__texte h2 {
    font-size   : var(--font-size-xl);
    font-weight : var(--font-weight-bold);
    color       : var(--color-secondary);
}

.service-detail__texte p {
    font-size   : var(--font-size-base);
    color       : var(--color-text-light);
    line-height : 1.7;
}

.service-detail__image {
    border-radius : var(--radius-xl);
    overflow      : hidden;
    aspect-ratio  : 4 / 3;
}

.service-detail__image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* CTA service */
.service-cta {
    padding          : var(--space-3xl) 0;
    background-color : var(--color-bg-alt);
    border-top       : var(--border-width) solid var(--color-border);
}

.service-cta__container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : var(--space-xl);
    text-align     : center;
}

.service-cta__container h2 {
    font-size : var(--font-size-xl);
    color     : var(--color-secondary);
}


/* -----------------------------------------------------------------------------
   7. À PROPOS
   ----------------------------------------------------------------------------- */
.apropos {
    padding          : var(--space-3xl) 0;
    background-color : var(--color-bg-alt);
}

.apropos__container {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(20rem, 1fr));
    gap                   : var(--space-2xl);
    align-items           : center;
}

.apropos__texte .section__titre {
    text-align : left;
}

.apropos__texte p {
    color     : var(--color-text);
    font-size : var(--font-size-md);
}

.apropos__image img {
    width         : 100%;
    border-radius : var(--radius-xl);
    box-shadow    : var(--shadow-lg);
}


/* -----------------------------------------------------------------------------
   8. ACTUALITÉS
   ----------------------------------------------------------------------------- */
.actualites-apercu {
    padding          : var(--space-3xl) 0;
    background-color : var(--color-bg);
}

.actualites {
    padding : var(--space-3xl) 0;
}

.actualites__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(16rem, 1fr));
    gap                   : var(--space-lg);
}

.actualites__vide {
    text-align : center;
    color      : var(--color-text-light);
    font-size  : var(--font-size-md);
    padding    : var(--space-3xl) 0;
}

.actu-card {
    border         : var(--border-width) solid var(--color-border);
    border-radius  : var(--radius-lg);
    overflow       : hidden;
    box-shadow     : var(--shadow-sm);
    transition     : transform var(--transition-normal),
                     box-shadow var(--transition-normal);
    display        : flex;
    flex-direction : column;
    background-color: var(--color-bg);
}

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

.actu-card__image img {
    width      : 100%;
    height     : 12rem;
    object-fit : cover;
}

.actu-card__body {
    padding        : var(--space-lg);
    display        : flex;
    flex-direction : column;
    flex           : 1;
    gap            : var(--space-sm);
}

.actu-card__date {
    font-size : var(--font-size-sm);
    color     : var(--color-text-light);
}

.actu-card__titre {
    font-size   : var(--font-size-md);
    font-weight : var(--font-weight-bold);
    color       : var(--color-secondary);
}

.actu-card__titre a {
    color : var(--color-secondary);
}

.actu-card__titre a:hover {
    color : var(--color-primary);
}

.actu-card__extrait {
    color : var(--color-text-light);
    flex  : 1;
}

/* Boutons cards actu : neumorphique pur sans bordure (= même style que "Toutes nos actualités") */
.actu-card .btn {
    align-self : center;
    margin-top : auto;
    border     : none;
}

.actualites-apercu__cta {
    text-align : center;
    margin-top : var(--space-2xl);
}

/* Pagination */
.pagination {
    margin-top : var(--space-2xl);
}

.pagination__liste {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : var(--space-sm);
    flex-wrap       : wrap;
}

.pagination__lien {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 2.5rem;
    height          : 2.5rem;
    padding         : 0 var(--space-sm);
    border-radius   : var(--radius-md);
    font-size       : var(--font-size-sm);
    font-weight     : var(--font-weight-medium);
    border          : var(--border-width) solid var(--color-border);
    color           : var(--color-text);
    transition      : all var(--transition-fast);
    background      : var(--color-bg);
}

.pagination__lien:hover {
    border-color : var(--color-primary);
    color        : var(--color-primary-dark);
    background   : var(--color-primary-light);
}

.pagination__lien--actif {
    background   : var(--gradient-brand);
    border-color : transparent;
    color        : var(--color-white);
    cursor       : default;
    box-shadow   : var(--shadow-btn);
}

.pagination__lien--actif:hover {
    background   : var(--gradient-brand);
    color        : var(--color-white);
}

.pagination__lien--disabled {
    color        : var(--color-border);
    border-color : var(--color-border);
    cursor       : default;
    background   : var(--color-bg-alt);
}

.pagination__lien--disabled:hover {
    color        : var(--color-border);
    border-color : var(--color-border);
    background   : var(--color-bg-alt);
}

/* -----------------------------------------------------------------------------
   9. CTA CONTACT — IMAGE DE FOND + OVERLAY NOIR
   ----------------------------------------------------------------------------- */
.cta-contact {
    position            : relative;
    padding             : var(--space-3xl) 0;
    background-color    : var(--color-secondary);
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
}

/* Overlay noir pur pour lisibilité */
.cta-contact::before {
    content          : '';
    position         : absolute;
    inset            : 0;
    background-color : var(--cta-overlay);
}

.cta-contact__container {
    position        : relative;
    z-index         : 1;
    text-align      : center;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : var(--space-md);
}

.cta-contact h2 {
    font-size : var(--font-size-xl);
    color     : var(--color-white);
}

.cta-contact p {
    font-size : var(--font-size-md);
    color     : rgba(255, 255, 255, 0.85);
}

/* Le bouton primary sur fond sombre : blanc inversé (hero & cta) */
.hero .btn--primary,
.cta-contact .btn--primary {
    background   : var(--color-white);
    color        : var(--color-primary-dark);
    border       : 2px solid transparent;
    box-shadow   : 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hero .btn--primary:hover,
.cta-contact .btn--primary:hover {
    background   : transparent;
    color        : var(--color-white);
    border-color : var(--color-white);
    box-shadow   : 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Bouton secondaire hero : miroir du primary — fantôme au repos, plein au hover */
.hero .btn--secondary {
    background   : transparent;
    color        : var(--color-white);
    border       : 2px solid var(--color-white);
    box-shadow   : 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hero .btn--secondary:hover {
    background   : var(--color-white);
    color        : var(--color-primary-dark);
    border-color : transparent;
    box-shadow   : 0 6px 20px rgba(0, 0, 0, 0.4);
}


/* -----------------------------------------------------------------------------
   10. ARTICLE INDIVIDUEL
   ----------------------------------------------------------------------------- */
.article-header {
    padding          : var(--space-2xl) 0;
    background-color : var(--color-bg-alt);
    border-bottom    : var(--border-width) solid var(--color-border);
}

.article__date {
    font-size     : var(--font-size-sm);
    color         : var(--color-text-light);
    margin-bottom : var(--space-sm);
}

.article__titre {
    font-size : var(--font-size-2xl);
}

.article {
    padding : var(--space-3xl) 0;
}

.article__container {
    max-width : 50rem;
    margin    : 0 auto;
}

.article__image {
    margin-bottom : var(--space-2xl);
}

.article__image img {
    width         : 100%;
    border-radius : var(--radius-lg);
    max-height    : 31rem;
    object-fit    : cover;
}

.article__contenu {
    font-size   : var(--font-size-md);
    line-height : var(--line-height-relaxed);
    color       : var(--color-text);
}

.article__retour {
    margin-top : var(--space-2xl);
}


/* -----------------------------------------------------------------------------
   11. PAGE CONTACT — FORMULAIRE STYLE CARD NEUMORPHIQUE
   ----------------------------------------------------------------------------- */
.contact {
    padding : var(--space-3xl) 0;
}

.contact__container {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(20rem, 1fr));
    gap                   : var(--space-2xl);
    align-items           : stretch;
}

.contact__map {
    border-radius : var(--radius-lg);
    overflow      : hidden;
}

.contact__map iframe {
    width      : 100%;
    height     : 100%;
    min-height : 400px;
    display    : block;
}

/* Wrapper formulaire : même style card que les services/actu */
.contact__form-wrapper {
    background-color : var(--color-bg);
    border           : var(--border-width) solid var(--color-border);
    border-radius    : var(--radius-xl);
    box-shadow       : var(--shadow-sm);
    padding          : var(--space-xl);
}

/* --- FORMULAIRES --- */
.form__group {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-xs);
    margin-bottom  : var(--space-md);
}

.form__label {
    font-size   : var(--font-size-sm);
    font-weight : var(--font-weight-semibold);
    color       : var(--color-secondary);
}

.form__required {
    color : var(--color-error);
}

.form__hint {
    font-size   : var(--font-size-sm);
    color       : var(--color-text-light);
    margin-left : var(--space-xs);
}

/*
   Champs : même base neumorphique que les cards.
   Fond clair, ombre interne légère au repos,
   ombre interne plus marquée au focus (appuyé).
*/
.form__input,
.form__textarea,
.form__select {
    width         : 100%;
    padding       : 0.75rem var(--space-md);
    border        : var(--border-width) solid var(--color-border);
    border-radius : var(--radius-md);
    font-family   : var(--font-secondary);
    font-size     : var(--font-size-base);
    color         : var(--color-text);
    background    : var(--color-bg);
    box-shadow    : inset 3px 3px 6px #d9d3c8,
                    inset -3px -3px 6px #ffffff;
    transition    : border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
    appearance    : none;
    -webkit-appearance: none;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    outline      : none;
    border-color : var(--color-primary);
    box-shadow   : inset 4px 4px 8px #d9d3c8,
                   inset -4px -4px 8px #ffffff,
                   0 0 0 3px rgba(181, 152, 236, 0.25);
}

.form__textarea {
    resize     : vertical;
    min-height : 9rem;
}

/* Select : flèche custom */
.form__select {
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23834d91' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 1rem center;
    padding-right       : 2.5rem;
    cursor              : pointer;
}

.form__group--checkbox {
    flex-direction : row;
    align-items    : center;
    gap            : var(--space-sm);
}

.form__checkbox {
    width        : 1.1rem;
    height       : 1.1rem;
    min-width    : 1.1rem;
    cursor       : pointer;
    accent-color : var(--color-primary-dark);
}

.form__label--checkbox {
    font-size   : var(--font-size-sm);
    color       : var(--color-text);
    font-weight : var(--font-weight-normal);
    cursor      : pointer;
}

.form__mention {
    font-size     : var(--font-size-sm);
    color         : var(--color-text-light);
    margin-bottom : var(--space-md);
}

.form__slug {
    font-size        : var(--font-size-sm);
    color            : var(--color-text-light);
    background-color : var(--color-bg-alt);
    padding          : var(--space-sm) var(--space-md);
    border-radius    : var(--radius-md);
    border           : var(--border-width) solid var(--color-border);
}


/* -----------------------------------------------------------------------------
   12. PAGES LÉGALES
   ----------------------------------------------------------------------------- */
.legal {
    padding : var(--space-3xl) 0;
}

.legal__container {
    max-width      : 50rem;
    margin         : 0 auto;
    display        : flex;
    flex-direction : column;
    gap            : var(--space-2xl);
}

.legal__bloc h2 {
    font-size      : var(--font-size-lg);
    margin-bottom  : var(--space-md);
    color          : var(--color-secondary);
    padding-bottom : var(--space-sm);
    border-bottom  : 2px solid var(--color-primary);
}

.legal__bloc p {
    color       : var(--color-text);
    font-size   : var(--font-size-base);
    white-space : pre-line;
}


/* -----------------------------------------------------------------------------
   13. FOOTER — DÉGRADÉ BRAND (INVERSÉ)
   ----------------------------------------------------------------------------- */
.site-footer {
    background : linear-gradient(135deg, var(--color-primary-dark) 0%, #1e1028 100%);
    color      : rgba(255, 255, 255, 0.75);
}

.footer__container {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(20rem, 1fr));
    gap                   : var(--space-xl);
    max-width             : var(--container-width);
    margin                : 0 auto;
    padding               : var(--space-xl) var(--container-padding);
    justify-items         : center;
}

.footer__social {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-sm);
}

.footer__social ul {
    display        : flex;
    flex-direction : row;
    gap            : var(--space-sm);
}

.footer__social a {
    font-size        : var(--font-size-md);
    color            : rgba(255, 255, 255, 0.7);
    background-color : rgba(255, 255, 255, 0.1);
    width            : 2.5rem;
    height           : 2.5rem;
    border-radius    : var(--radius-full);
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    transition       : background-color var(--transition-fast),
                       color var(--transition-fast),
                       transform var(--transition-fast);
}

.footer__social a:hover {
    background-color : var(--color-primary);
    color            : var(--color-white);
    transform        : translateY(-2px);
}

.footer__titre {
    font-size      : var(--font-size-sm);
    font-weight    : var(--font-weight-semibold);
    color          : var(--color-white);
    text-transform : uppercase;
    letter-spacing : 0.08em;
    margin-bottom  : var(--space-md);
}

.footer__legal ul,
.footer__contact ul {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-sm);
}

.footer__legal a,
.footer__contact a,
.footer__contact li {
    font-size  : var(--font-size-sm);
    color      : rgba(255, 255, 255, 0.65);
    transition : color var(--transition-fast);
}

.footer__legal a:hover,
.footer__contact a:hover {
    color : var(--color-white);
}

.footer__bottom {
    border-top : var(--border-width) solid rgba(255, 255, 255, 0.1);
    max-width  : var(--container-width);
    margin     : 0 auto;
    padding    : var(--space-md) var(--container-padding);
    text-align : center;
    font-size  : var(--font-size-sm);
    color      : rgba(255, 255, 255, 0.4);
}

.footer__social,
.footer__legal,
.footer__contact {
    text-align : center;
}


/* -----------------------------------------------------------------------------
   14. PAGES D'ERREUR
   ----------------------------------------------------------------------------- */
.error-page {
    background-color : var(--color-bg-alt);
}

.error {
    min-height      : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.error__container {
    text-align : center;
    padding    : var(--space-2xl);
}

.error__code {
    font-size   : 7.5rem;
    font-weight : var(--font-weight-bold);
    color       : var(--color-border);
    line-height : 1;
    display     : block;
}

.error__titre {
    font-size     : var(--font-size-xl);
    margin-bottom : var(--space-md);
    color         : var(--color-secondary);
}

.error__texte {
    font-size     : var(--font-size-md);
    color         : var(--color-text-light);
    margin-bottom : var(--space-xl);
}

.error__actions {
    display         : flex;
    gap             : var(--space-md);
    justify-content : center;
    flex-wrap       : wrap;
}


/* -----------------------------------------------------------------------------
   15. ANIMATIONS FADE-IN
   ----------------------------------------------------------------------------- */
.fade-in {
    opacity    : 0;
    transform  : translateY(20px);
    transition : opacity 0.5s ease, transform 0.5s ease;
}

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


/* -----------------------------------------------------------------------------
   16. RESPONSIVE
   ----------------------------------------------------------------------------- */
@media (max-width: 48rem) {
    :root {
        --font-size-3xl     : 2.25rem;
        --font-size-2xl     : 1.75rem;
        --font-size-xl      : 1.5rem;
        --hero-height       : 100svh;
        --container-padding : 1rem;
    }

    .hero__bg {
        inset : 0;
    }

    .navbar__menu {
        display          : none;
        position         : fixed;
        top              : var(--navbar-height);
        left             : 0;
        right            : 0;
        /* Menu mobile sur fond brand pour rester cohérent */
        background       : var(--gradient-brand);
        flex-direction   : column;
        align-items      : flex-start;
        padding          : var(--space-lg);
        border-bottom    : var(--border-width) solid rgba(255, 255, 255, 0.15);
        box-shadow       : 0 8px 24px rgba(131, 77, 145, 0.4);
        gap              : var(--space-md);
    }

    .navbar__menu.is-open {
        display : flex;
    }

    .navbar__burger {
        display : flex;
    }

    .navbar__burger.is-open span:nth-child(1) {
        transform : translateY(7px) rotate(45deg);
    }

    .navbar__burger.is-open span:nth-child(2) {
        opacity : 0;
    }

    .navbar__burger.is-open span:nth-child(3) {
        transform : translateY(-7px) rotate(-45deg);
    }

    .hero__buttons {
        flex-direction : column;
        align-items    : center;
    }

    .navbar__dropdown-menu {
        position      : static;
        transform     : none;
        box-shadow    : none;
        border        : none;
        border-left   : 3px solid rgba(255, 255, 255, 0.5);
        border-radius : 0;
        background    : transparent;
        padding       : 0 0 0 var(--space-md);
        margin-top    : var(--space-xs);
        display       : none;
    }

    .navbar__dropdown.is-open .navbar__dropdown-menu {
        display        : flex;
        flex-direction : column;
        gap            : var(--space-xs);
    }

    .navbar__dropdown-toggle {
        width           : 100%;
        justify-content : space-between;
    }

    .navbar__dropdown-link {
        padding : var(--space-xs) 0;
        color   : rgba(255, 255, 255, 0.85);
    }

    .navbar__dropdown-link:hover {
        color            : var(--color-white);
        background-color : transparent;
    }

    .contact__map {
        order : 2;
    }

    .contact__form-wrapper {
        order : 1;
    }
}