/* =============================================================
   VARIABLES GLOBALES
   ============================================================= */
:root {
    --primary:        #156082;
    --primary-mid:    #1c7fa8;
    --primary-dark:   #0e4a63;
    --accent:         #54c1d8;
    --accent-soft:    #a8dfe8;
    --accent-pale:    #eaf4f8;
    --neutral-50:     #f7fbfd;
    --neutral-100:    #eaf4f8;
    --neutral-200:    #d4ecf3;
    --neutral-500:    #8ba8b5;
    --neutral-700:    #4a5568;
    --neutral-900:    #1a2332;
    --warm-bg:        #fafaf8;
    --success:        #2e9e6b;
    --error:          #c0392b;
    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      20px;
    --shadow-sm:      0 2px 8px rgba(21,96,130,.08);
    --shadow-md:      0 4px 20px rgba(21,96,130,.12);
    --shadow-lg:      0 8px 40px rgba(21,96,130,.16);
    --transition:     0.25s ease;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --max-width:      1170px;
}

/* =============================================================
   BASE
   ============================================================= */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--neutral-700);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--primary-mid);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--accent);
}

strong {
    font-weight: 600;
}

.container {
    position: relative;
    text-align: center;
}

.clr { clear: both; }

.container > div {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
}

html,body{min-height:100%;margin:0}
body{min-height:100vh;display:flex;flex-direction:column}
main,#main,#contenu,.page-content{flex:1}
footer,#footer{margin-top:auto}

main,#main,#contenu,.page-content{
  padding-top:106px;
}

/* =============================================================
   NAVBAR — #ct_menu
   ============================================================= */
#ct_menu {
    background: rgba(255,255,255,0.97);
    border-bottom: 3px solid var(--accent);
    box-shadow: var(--shadow-sm);
    width: 100%;
    height: 88px;
    padding: 0;
    max-width: 100%;
    z-index: 9999;
    position: fixed;
    top: 0;
    transition: height var(--transition), background var(--transition), box-shadow var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#ct_menu.scrolled {
    height: 64px;
    background: rgba(255,255,255,0.98);
    box-shadow: var(--shadow-md);
}

#menu {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    height: 88px;
    margin: 0 auto;
    padding: 0 24px;
    transition: height var(--transition);
}

#ct_menu.scrolled #menu {
    height: 64px;
}

/* Logo */
#logo, #logo2 {
    flex-shrink: 0;
    margin: 0 24px 0 0;
    line-height: 1;
}

#logo img, #logo2 img {
    height: 64px;
    width: auto;
    transition: height var(--transition);
    display: block;
}

#ct_menu.scrolled #logo img,
#ct_menu.scrolled #logo2 img {
    height: 46px;
}

#logo2 { display: none; }
#ilogo { height: 64px; transition: height var(--transition); }

/* Nav links */
#menu nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu nav ul li a {
    color: var(--neutral-700);
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    text-decoration: none;
    display: block;
}

#menu nav ul li a:hover,
#menu nav ul li a.active {
    color: var(--primary);
    background: var(--accent-pale);
}

#menu nav ul li a.rdv {
    background: var(--accent);
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
}

#menu nav ul li a.rdv:hover {
    background: var(--primary);
    color: #fff;
}

/* Fil d'Ariane #niv2 */
#niv2 {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 10px 0;
    width: 100%;
    border-top: 0;
    transition: margin var(--transition), padding var(--transition);
}

#niv2 > div {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* =============================================================
   MEGA-MENU DROPDOWN
   ============================================================= */
.menu { position: relative; flex: 1; }

.menu > ul {
    display: flex;
    align-items: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu > ul > li {
    position: relative;
}

.menu > ul > li > a {
    color: var(--neutral-700);
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.menu > ul > li > a:hover,
.menu > ul > li > a.active {
    color: var(--primary);
    background: var(--accent-pale);
}

.menu > ul > li > a.rdv {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
}

.menu > ul > li > a.rdv:hover {
    background: var(--primary);
    color: #fff;
}

/* Dropdown panels */
.menu > ul > li > ul {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border-top: 3px solid var(--accent);
    padding: 12px;
    z-index: 9999;
    list-style: none;
}

.menu > ul > li > ul > li {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.menu > ul > li > ul > li a {
    display: block;
    padding: 9px 14px;
    color: var(--neutral-700);
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}

.menu > ul > li > ul > li a:hover {
    background: var(--accent-pale);
    color: var(--primary);
}

/* Sous-liste mega-menu */
.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 4px 0 0 8px;
    list-style: none;
    border-left: 2px solid var(--accent-pale);
}

.menu > ul > li > ul > li > ul > li {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.menu > ul > li > ul > li > ul > li a {
    font-size: 13px;
    padding: 6px 10px;
    color: var(--neutral-700);
}

/* Titres sections mega-menu */
.menu > ul > li > ul > li > a {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--primary);
    padding: 10px 14px 4px;
}

/* Hamburger */
.menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
}

.menu-mobile:after {
    content: "";
    display: block;
    width: 24px;
    height: 18px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--primary) 0, var(--primary) 2px,
        transparent 2px, transparent 8px,
        var(--primary) 8px, var(--primary) 10px,
        transparent 10px, transparent 16px,
        var(--primary) 16px, var(--primary) 18px
    );
    transition: opacity var(--transition);
}

.menu-mobile img { height: 46px; }

.menu-dropdown-icon:before {
    content: "+";
    font-weight: 700;
    font-size: 1.4em;
    padding: 0 14px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    cursor: pointer;
    color: var(--primary);
    background: transparent;
}

li#lilogo, li#logo { line-height: 1; padding: 0; margin: 0; }

#accueil { display: none; }

/* =============================================================
   BREADCRUMB #ekQ
   ============================================================= */
#ekQ {
    font-size: 13px;
    text-align: left;
    color: rgba(255,255,255,0.85);
}

#ekQ ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#ekQ ol li {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

#ekQ ol li a {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

#ekQ ol li a:hover { color: #fff; text-decoration: underline; }

#ekQ ol li:after {
    content: '›';
    padding: 0 6px;
    color: rgba(255,255,255,0.5);
}

#ekQ ol li:last-child:after { content: ''; }

/* =============================================================
   BANNIÈRE COOKIES
   ============================================================= */
#cookie-consent-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: var(--radius-md);
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--neutral-200);
    color: var(--neutral-700);
    text-align: center;
    padding: 32px 28px;
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 20000;
}

#cookie-consent-banner p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
}

#cookie-consent-banner a {
    color: var(--primary-mid);
    text-decoration: underline;
}

#cookie-consent-banner div {
    font-size: 1.6em;
    color: var(--accent);
    line-height: 1;
    margin: 0 0 20px;
}

#cookie-consent-banner svg { vertical-align: middle; }

#cookie-consent-banner svg path { fill: var(--accent); }

#cookie-consent-banner button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 20px;
    margin: 6px 0 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    transition: background var(--transition);
    font-family: var(--font-body);
}

#cookie-consent-banner button:hover { background: var(--primary); }

#cookie-consent-banner button#decline-cookies {
    background: var(--neutral-200);
    color: var(--neutral-700);
}

#cookie-consent-banner button#decline-cookies:hover { background: #ccc; }

#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    display: none;
    pointer-events: none;
}

.disable-clicks { pointer-events: none; }
.no-scroll { overflow: hidden; }

/* =============================================================
   FOOTER — #nivF
   ============================================================= */
#nivF {
    background: var(--primary);
    color: #fff;
    padding: 48px 0 0;
    text-align: left;
    border-top: 4px solid var(--accent);
}

#adresse {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 32px;
}

#adresse > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    height: auto !important;
}

.ctF1 {
    flex: 1;
    min-width: 180px;
    padding: 0 24px 24px 0;
    text-align: left;
    vertical-align: top;
    display: inline-block;
}

.ctF1 h6 {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.ctF1 > div {
    line-height: 1.6;
    padding: 3px 0;
    font-size: 14px;
    color: var(--accent-soft);
}

.ctF1 > div a {
    color: var(--accent-soft);
    transition: color var(--transition);
}

.ctF1 > div a:hover { color: #fff; text-decoration: underline; }

footer * { color: var(--accent-soft); }
footer div { font-size: 14px; }

#nivF ul li { margin: 8px 0; }

#legende {
    color: var(--accent-soft);
    font-size: 13px;
    padding-top: 12px;
}

div#conception {
    font-size: 12px;
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.5);
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 8px;
}

div#conception a,
div#conception span {
    color: rgba(255,255,255,0.6);
    margin: 0 8px;
    font-size: 12px;
    transition: color var(--transition);
}

div#conception a:hover { color: #fff; }

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

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

/* =============================================================
   RESPONSIVE NAVBAR
   ============================================================= */
@media (max-width: 1000px) {
    #ct_menu {
        height: 72px;
        border-bottom: 0;
    }

    #ct_menu.scrolled { height: 64px; }

    #menu {
        height: 72px;
        padding: 0 16px;
        justify-content: space-between;
    }

    #ct_menu.scrolled #menu { height: 64px; }

    #logo img { height: 50px; }
    #ct_menu.scrolled #logo img { height: 44px; }

    #accueil { display: flex; align-items: center; }

    .menu-mobile { display: flex; }

    .menu-dropdown-icon:before { display: block; }

    .menu > ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        z-index: 9998;
        padding: 12px 0;
        box-shadow: var(--shadow-lg);
    }

    .menu > ul.show-on-mobile { display: flex; }

    .menu > ul > li {
        width: 100%;
        float: none;
    }

    .menu > ul > li > a {
        padding: 14px 20px;
        border-bottom: 1px solid var(--neutral-100);
        border-radius: 0;
        font-size: 15px;
    }

    .menu > ul > li > a.rdv {
        margin: 12px 16px;
        border-radius: var(--radius-sm);
        text-align: center;
        border-bottom: 0;
    }

    .menu > ul > li > ul {
        position: static;
        border-radius: 0;
        box-shadow: none;
        border-top: 0;
        border-left: 3px solid var(--accent);
        margin: 0 0 0 20px;
        padding: 4px 0;
        background: var(--neutral-50);
        min-width: 0;
    }

    .menu > ul > li > ul > li > a {
        padding: 10px 16px;
        font-size: 14px;
    }

    #niv2 { display: none !important; }
    #niv3 { margin-top: 72px !important; }

    li#logo { display: none; }
}

@media (max-width: 600px) {
    #fmenu { display: none !important; }
    #niv3 { margin-top: 64px !important; }

    #adresse > div {
        flex-direction: column;
    }

    .ctF1 { padding-right: 0; }
}