:root{
    --primary:#4169E1;
    --accent:#FFA500;
    --violet:#9400D3;
    --ink:#202533;
    --muted:#667085;
    --bg:#fff;
    --bg-alt:#f6f8fb;
    --radius:16px;
    --shadow:0 6px 24px rgba(0,0,0,.06);
    --maxw:1200px;
    --gap:24px;
    --fs-base:clamp(16px,1.2vw + .2rem,18px);
    --topbar-h:44px;
}

/* Reset & Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-base)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{width:min(var(--maxw),100% - 2rem);margin-inline:auto}
.row{display:flex;align-items:center;gap:1rem}
.grid{display:grid;gap:var(--gap)}
.grid--hero{grid-template-columns:1fr}
@media (min-width:48rem){.grid--hero{grid-template-columns:1.1fr .9fr}}
h1{font-size:clamp(28px,5vw,48px);margin:.8rem 0}
.muted{color:var(--muted)}
.badge{display:inline-block;background:#eef2ff;color:#2635c4;border-radius:999px;padding:.35rem .6rem;font-weight:600;font-size:.85rem}

/* === Buttons === */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    border:2px solid transparent;
    border-radius:999px;
    padding:.75rem 1.5rem;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--accent{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn--accent:hover{background:var(--accent);color:#111}
@media (prefers-reduced-motion:no-preference){
    .btn{transition:transform .15s,filter .15s,background .15s,color .15s}
    .btn:hover{transform:translateY(-1px)}
}

/* === block-topbar === */
.topbar{
    position:sticky;
    top:0;
    z-index:60;
    background:linear-gradient(90deg,#1f54ff 0%,#1d4df0 100%);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:var(--topbar-h);
    gap:12px;
    padding:.25rem 0;
}
.tb-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    opacity:.95;
}
.tb-item svg{width:16px;height:16px;flex:0 0 16px;color:#fff}
.tb-item:hover{opacity:1}
.tb-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tb-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#fff;
    opacity:.95;
    background:transparent;
    border:none;
    cursor:pointer;
    font:inherit;
    padding:0;
}
.tb-link svg{width:16px;height:16px;flex-shrink:0}
.tb-link:hover{opacity:1;text-decoration:underline}

/* Status icon pulsing animation */
.tb-link[href="/status"] svg {
    color: #10b981; /* Vert */
}

@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.tb-link[href="/status"] svg {
    animation: status-pulse 2s ease-in-out infinite;
}

/* Dropdown topbar */
.tb-dropdown{position:relative}
.tb-dropdown-toggle{position:relative}
.tb-dropdown-arrow{width:14px;height:14px;transition:transform .2s}
.tb-dropdown.open .tb-dropdown-arrow{transform:rotate(180deg)}

/* Zone invisible pour garder le hover */
.tb-dropdown::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:8px;
}

.tb-dropdown-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    min-width:160px;
    padding:6px;
    z-index:100;
}
.tb-dropdown.open .tb-dropdown-menu{display:block}
.tb-dropdown-menu a{
    display:block;
    padding:8px 12px;
    color:var(--ink);
    font-size:14px;
    border-radius:6px;
    text-decoration:none;
}
.tb-dropdown-menu a:hover{background:#f8fafc}

@media (min-width:64rem){
    .tb-dropdown:hover .tb-dropdown-menu{display:block}
    .tb-dropdown:hover .tb-dropdown-arrow{transform:rotate(180deg)}
}
@media (max-width:63.999rem){.tb-links{display:none}}

/* === block-header === */
.site-header{
    position:sticky;
    top:var(--topbar-h);
    z-index:40;
    background:#fff;
    box-shadow:0 1px 0 #eef1f6;
}
.site-header .row{
    min-height:80px;
}
.logo img{height:60px;width:auto}

/* Menu toggle mobile */
.nav-toggle{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}
.menu-toggle{
    margin-left:auto;
    cursor:pointer;
    padding:.5rem;
    border-radius:8px;
    background:transparent;
    border:1px solid #e8edf3;
    display:flex;
    align-items:center;
    justify-content:center;
}
.menu-toggle svg{
    width:24px;
    height:24px;
    stroke:var(--ink);
}
.menu-toggle:hover{
    background:var(--bg-alt);
}

/* Navigation */
nav ul,nav li{list-style:none;margin:0;padding:0}
.nav{
    margin-left:auto;
    display:none;
}
.nav__list{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    align-items:stretch;
    padding:1rem 0;
}
.nav__list>li{
    position:relative;
    display:flex;
    flex-direction:column;
}

.nav__list > li > a,
.nav__list > li > span.nav__label {
    display: flex;
    align-items: center;
    padding: .9rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.nav__list > li > a:hover,
.nav__list > li > span.nav__label:hover {
    background: var(--bg-alt);
}

/* Catégories non-cliquables */
.nav__label {
    cursor: default;
}

.nav__label:hover {
    cursor: pointer; /* Sur desktop, on peut cliquer pour ouvrir le mega */
}

/* Lettres I/T/H colorées */
.nav .mark{font-weight:inherit}
.nav .mark--i{color:var(--primary)}
.nav .mark--t{color:var(--violet)}
.nav .mark--h{color:var(--accent)}

/* Bouton Contact dans le menu */
.nav__list > li > a.btn--nav{
    padding:.6rem 1.5rem;
    border:2px solid var(--primary);
    border-radius:999px;
    background:#fff;
    color:var(--primary);
    font-weight:700;
    justify-content:center;
}
.nav__list > li > a.btn--nav:hover{
    background:var(--primary);
    color:#fff;
}

/* === Mega menu === */
.has-mega{position:relative}

/* Mobile: accordéon */
.mega{
    display:none;
    margin:.5rem 0 0 1rem;
    padding:1rem;
    background:var(--bg-alt);
    border-left:3px solid var(--primary);
    border-radius:8px;
}
.has-mega.mega-open .mega{
    display:block;
}

.mega__col h4{
    display:flex;
    align-items:center;
    gap:8px;
    margin:.5rem 0 .5rem;
    font-size:15px;
    color:#1f2a44;
}
.mega__col h4 svg{
    width:18px;
    height:18px;
    color:var(--primary);
}
.mega__col ul{
    margin:0 0 1rem;
    padding:0;
}
.mega__col li+li{
    margin-top:2px;
}
.mega__col a{
    display:block;
    padding:.5rem .5rem;
    border-radius:8px;
    font-size:.95rem;
}
.mega__col a:hover{
    background:#eef2ff;
}

/* Promo cards dans mega */
.mega__promo{
    margin-top:1rem;
}
.promo__card{
    background:linear-gradient(135deg,rgba(65,105,225,.08),rgba(148,0,211,.08));
    border:1px solid #e8edf3;
    border-radius:14px;
    padding:16px;
    display:grid;
    gap:10px;
}
.promo__card h5{
    margin:0;
    font-size:16px;
    color:#1f2a44;
}
.promo__card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

/* Variantes promo */
.promo--kpis .kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:.5rem 0;
    padding:0;
}
.promo--kpis .kpis li{
    list-style:none;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:10px;
    text-align:center;
}
.promo--kpis .kpi{
    display:block;
    font-weight:800;
    font-size:18px;
    color:#1f2a44;
}
.promo--kpis small{
    display:block;
    color:var(--muted);
    font-size:12px;
}

.promo--media .media{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:.5rem;
}
.promo--media .media img{
    display:block;
    width:100%;
    height:auto;
}
.promo__badge{
    position:absolute;
    top:10px;
    left:10px;
    background:var(--accent);
    color:#111;
    padding:.3rem .6rem;
    border-radius:999px;
    font-weight:800;
    font-size:12px;
    border:1px solid rgba(0,0,0,.06);
}

/* Boutons dans promo cards */
.promo__card .btn--promo{
    padding:.6rem 1.2rem;
    border:2px solid var(--primary);
    border-radius:999px;
    background:#fff;
    color:var(--primary);
    font-weight:700;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.promo__card .btn--promo:hover{
    background:var(--primary);
    color:#fff;
}

/* Mobile nav activation */
.nav-toggle:checked ~ .nav{
    display:block;
}

/* === Desktop navigation === */
@media (min-width:64rem){
    .menu-toggle{display:none}
    .nav{display:block}
    .nav__list{
        flex-direction:row;
        gap:.25rem;
        padding:0;
        align-items:center;
    }
    .nav__list>li{
        flex-direction:row;
    }

    /* Mega menu desktop */
    .mega{
        display:none;
        position:absolute;
        left:50%;
        top:100%;
        transform:translateX(-50%);
        width:min(1060px,calc(100vw - 2rem));
        margin:0;
        padding:18px;
        background:#fff;
        border:1px solid #e8edf3;
        border-radius:var(--radius);
        box-shadow:var(--shadow);
        grid-template-columns:repeat(3,1fr) 300px;
        gap:16px;
    }
    .has-mega:hover .mega,
    .has-mega:focus-within .mega{
        display:grid;
    }

    /* Zone de survol étendue */
    .has-mega::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:100%;
        height:12px;
    }

    .mega__promo{
        margin-top:0;
        align-self:stretch;
    }
    .promo__card{
        height:100%;
    }

    .site-header .row{
        min-height:87px;
    }

    .nav__list > li > a.btn--nav{
        padding:.5rem 1.8rem;
    }
}

/* === block-hero === */
.hero{
    padding:4.5rem 0;
}
.hero__copy{
    display:grid;
    gap:1rem;
}
.hero .actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}
.hero__visual{
    display:grid;
    gap:12px;
    align-content:start;
}

.service-icon--logo img {
    max-width: none;
    width: 300px;
    height: auto;
}

/* Illustration shield */
.illus-shield{
    background:var(--bg-alt);
    border-radius:var(--radius);
    padding:24px;
    min-height:220px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.illus-shield::before,
.illus-shield::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    height:8px;
    border-radius:8px;
    background:rgba(65,105,225,.10);
}
.illus-shield::before{top:24px}
.illus-shield::after{bottom:24px}
.shield-svg{
    display:block;
    width:min(260px,56%);
    margin:0 auto;
}

/* Mini feature cards */
.mini-feats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
}
.mini{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:14px;
    padding:12px;
    box-shadow:var(--shadow);
}
.mini h4{
    margin:0;
    font-size:15px;
    line-height:1.3;
}
.mini p{
    margin:2px 0 0;
    color:var(--muted);
    font-size:14px;
}
.icon{
    width:36px;
    height:36px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
}
.icon svg{
    width:20px;
    height:20px;
}
.accent-blue .icon{background:#eef2ff;color:var(--primary)}
.accent-orange .icon{background:#FFF3E5;color:var(--accent)}
.accent-purple .icon{background:#F3E8FF;color:var(--violet)}

/* === block-trust === */
.section{
    padding:2rem 0;
}
.trust{
    padding:3rem 0 3.5rem;
    --trust-item-h:84px;
    --trust-logo-max-w:180px;
    --trust-logo-max-h:70px;
}
.trust__eyebrow{
    margin:0 0 1rem;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#42527b;
    text-align:center;
}
.trust__grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    align-items:center;
    padding:0;
    margin:0;
}
.trust__item{
    position:relative;
    height:var(--trust-item-h);
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    padding:10px;
    outline:0;
    list-style:none;
}
.trust__item img{
    max-width:var(--trust-logo-max-w);
    max-height:var(--trust-logo-max-h);
    height:auto;
    filter:grayscale(100%) contrast(1.05) brightness(.95);
    opacity:.85;
    transition:filter .2s,opacity .2s,transform .2s;
}
.trust__item:hover img,
.trust__item:focus-visible img{
    filter:none;
    opacity:1;
    transform:translateY(-1px);
}

/* Tooltip */
.trust__item::after{
    content:attr(data-tip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    transform:translateX(-50%);
    background:#0e1a3a;
    color:#fff;
    font-size:12px;
    line-height:1.3;
    padding:.45rem .6rem;
    border-radius:10px;
    white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
    z-index:10;
}
.trust__item::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:100%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:#0e1a3a;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease;
    z-index:10;
}
.trust__item:hover::after,
.trust__item:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(-2px);
}
.trust__item:hover::before,
.trust__item:focus-visible::before{
    opacity:1;
    visibility:visible;
}

@media (min-width:64rem){
    .trust{padding:2rem 0 3rem}
}

/* === block-social-proof === */
.social-proof{
    padding:4rem 0;
    background:#fff;
}
.social-proof__head{
    text-align:center;
    margin-bottom:3rem;
}
.social-proof__head h2{
    margin:.5rem 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.google-rating{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
}
.rating-stars{
    display:flex;
    gap:4px;
}
.rating-stars svg{
    width:24px;
    height:24px;
    color:#FFA500;
}
.rating-text{
    margin:0;
    color:var(--muted);
    font-size:15px;
}
.rating-text strong{
    color:var(--ink);
    font-size:18px;
}

/* Carousel */
.reviews-carousel{
    position:relative;
    margin-bottom:2rem;
}
.reviews-track-wrapper{
    overflow:hidden;
    padding:4px;
}
.reviews-track{
    display:flex;
    gap:20px;
    transition:transform .4s ease;
}

.review-card{
    min-width:320px;
    max-width:320px;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:12px;
    align-content:start;
    flex-shrink:0;
    text-align:center;
}
.review__avatar{
    display:flex;
    justify-content:center;
    margin-bottom:4px;
}
.review__avatar img{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #e8edf3;
}
.review__stars{
    display:flex;
    gap:3px;
    justify-content:center;
}
.review__stars svg{
    width:16px;
    height:16px;
    color:#FFA500;
}
.review__text{
    margin:0;
    color:#1f2a44;
    font-size:15px;
    line-height:1.6;
}
.review__author{
    display:grid;
    gap:2px;
    padding-top:8px;
    border-top:1px solid #f1f4f8;
    font-style:normal;
}
.review__author strong{
    color:var(--ink);
    font-size:14px;
}
.review__author span{
    color:var(--muted);
    font-size:13px;
}

/* Carousel buttons */
.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid #e8edf3;
    background:#fff;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
    transition:all .2s;
}
.carousel-btn:hover{
    background:var(--primary);
    border-color:var(--primary);
}
.carousel-btn:hover svg{
    stroke:#fff;
}
.carousel-btn svg{
    width:24px;
    height:24px;
    stroke:var(--ink);
}
.carousel-btn--prev{
    left:-22px;
}
.carousel-btn--next{
    right:-22px;
}
.carousel-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}
.carousel-btn:disabled:hover{
    background:#fff;
    border-color:#e8edf3;
}
.carousel-btn:disabled:hover svg{
    stroke:var(--ink);
}

@media(max-width:47.999rem){
    .carousel-btn{
        display:none;
    }
    .reviews-track-wrapper{
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        scrollbar-color:#e8edf3 transparent;
    }
    .reviews-track-wrapper::-webkit-scrollbar{
        height:8px;
    }
    .reviews-track-wrapper::-webkit-scrollbar-track{
        background:transparent;
    }
    .reviews-track-wrapper::-webkit-scrollbar-thumb{
        background:#e8edf3;
        border-radius:4px;
    }
}

.social-proof__cta{
    text-align:center;
}

/* === block-why-itd === */
.why-itd{
    padding:5rem 0;
    background:linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.why-itd__head{
    text-align:center;
    margin-bottom:3rem;
}
.why-itd__head h2{
    margin:.5rem 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.why-itd .lead{
    margin:.5rem auto 0;
    color:#374151;
}

/* KPIs Grid */
.kpis-grid{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    margin-bottom:4rem;
}
.kpi-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    text-align:center;
    display:grid;
    gap:12px;
    justify-items:center;
}
.kpi-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.kpi-card__icon svg{
    width:28px;
    height:28px;
}
.kpi-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.kpi-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.kpi-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.kpi-card__icon--green{
    background:#D1FAE5;
    color:#059669;
}
.kpi-card__value{
    font-size:clamp(32px,5vw,42px);
    font-weight:800;
    color:var(--ink);
    line-height:1;
}
.kpi-card__label{
    color:var(--muted);
    font-size:15px;
}
.kpi-card__link{
    color:var(--primary);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}
.kpi-card__link:hover{
    text-decoration:underline;
}

/* FAQ Section */
.faq-section{
    max-width:800px;
    margin:0 auto;
}
.faq-section__title{
    text-align:center;
    font-size:clamp(20px,3vw,28px);
    margin:0 0 2rem;
}
.faq-item{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    margin-bottom:12px;
    overflow:hidden;
}
.faq-item__question{
    padding:18px 24px;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    user-select:none;
}
.faq-item__question::-webkit-details-marker{
    display:none;
}
.faq-item__icon{
    width:20px;
    height:20px;
    flex-shrink:0;
    transition:transform .3s;
    stroke:var(--muted);
}
.faq-item[open] .faq-item__icon{
    transform:rotate(180deg);
}
.faq-item__question:hover{
    background:#f8fafc;
}
.faq-item__answer{
    padding:0 24px 20px;
    color:#374151;
    line-height:1.6;
}
.faq-item__answer p{
    margin:0;
}

/* === block-cta-final === */
.cta-final{
    padding:5rem 0;
    background:linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    position:relative;
    overflow:hidden;
}
.cta-final::before{
    content:"";
    position:absolute;
    top:-50%;
    right:-20%;
    width:600px;
    height:600px;
    background:radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
    border-radius:50%;
}
.cta-final::after{
    content:"";
    position:absolute;
    bottom:-40%;
    left:-15%;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    border-radius:50%;
}
.cta-final__content{
    text-align:center;
    max-width:700px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.cta-final__content h2{
    color:#fff;
    font-size:clamp(28px,5vw,42px);
    margin:0 0 1rem;
}
.cta-final__content > p{
    color:rgba(255,255,255,.9);
    font-size:18px;
    margin:0 0 2rem;
}
.cta-final__actions{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}
.btn--large{
    padding:1rem 2rem;
    font-size:17px;
}
.cta-final .btn--primary{
    background:#fff;
    color:var(--primary);
    border-color:#fff;
}
.cta-final .btn--primary:hover{
    background:#f8fafc;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.cta-final .btn--accent{
    background:transparent;
    color:#fff;
    border-color:#fff;
}
.cta-final .btn--accent:hover{
    background:rgba(255,255,255,.15);
}
.cta-final__trust{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:rgba(255,255,255,.8);
    font-size:14px;
    margin:0;
}
.cta-final__trust svg{
    width:18px;
    height:18px;
    stroke:rgba(255,255,255,.9);
}

/* === footer === */
.site-footer{
    background:#0e1a3a;
    color:#a0aec0;
    padding:4rem 0 1.5rem;
}
.footer-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    margin-bottom:2.5rem;
}
@media(min-width:48rem){
    .footer-grid{
        grid-template-columns:1.5fr 1fr 1fr 1fr;
    }
}

/* Logo et tagline */
.footer-logo img{
    height:50px;
    width:auto;
    margin-bottom:1rem;
    filter:brightness(0) invert(1);
}
.footer-tagline{
    margin:0 0 1.5rem;
    font-size:14px;
    line-height:1.6;
}
.footer-social{
    display:flex;
    gap:12px;
}
.footer-social a{
    width:36px;
    height:36px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .2s;
}
.footer-social a:hover{
    background:var(--primary);
    color:#fff;
}
.footer-social svg{
    width:18px;
    height:18px;
}

/* Colonnes */
.footer-col h4{
    color:#fff;
    font-size:15px;
    font-weight:700;
    margin:0 0 1rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}
.footer-links li{
    margin-bottom:8px;
}
.footer-links a{
    color:#a0aec0;
    font-size:14px;
    transition:color .2s;
}
.footer-links a:hover{
    color:#fff;
}

/* Contact */
.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}
.footer-contact li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-size:14px;
}
.footer-contact svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    color:#4169E1;
}
.footer-contact a{
    color:#a0aec0;
    transition:color .2s;
}
.footer-contact a:hover{
    color:#fff;
}

/* Barre du bas */
.footer-bottom{
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items:center;
    justify-content:space-between;
}
@media(min-width:48rem){
    .footer-bottom{
        flex-direction:row;
    }
}
.footer-copyright{
    margin:0;
    font-size:14px;
}
.footer-legal{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
}
.footer-legal a{
    color:#a0aec0;
    font-size:14px;
    transition:color .2s;
}
.footer-legal a:hover{
    color:#fff;
}

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

/* Hero service */
.hero-service{
    padding:3rem 0 4rem;
    background:linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.hero-service .container{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    align-items:center;
}
@media(min-width:64rem){
    .hero-service .container{
        grid-template-columns:1.2fr .8fr;
    }
}
.hero-service__breadcrumb{
    font-size:14px;
    color:var(--muted);
    margin-bottom:1rem;
}
.hero-service__breadcrumb a{
    color:var(--primary);
}
.hero-service__breadcrumb span{
    margin:0 .5rem;
}
.hero-service__content h1{
    margin:.5rem 0 1rem;
}
.hero-service__lead{
    font-size:18px;
    color:#374151;
    margin:0 0 2rem;
    line-height:1.6;
}
.hero-service__actions{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}
.hero-service__visual{
    display:flex;
    justify-content:center;
    align-items:center;
}
.service-icon--large{
    width:200px;
    height:200px;
    border-radius:24px;
    background:linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
}
.service-icon--large svg{
    width:100px;
    height:100px;
    stroke:var(--primary);
}

/* Section head */
.section-head{
    text-align:center;
    margin-bottom:3rem;
}
.section-head h2{
    margin:.5rem 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.section-head .lead{
    margin:.5rem auto 0;
    max-width:700px;
}

/* Services detail grid */
.services-detail{
    padding:4rem 0;
}
.services-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Service cards */
.service-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
}
.service-card--featured{
    background:linear-gradient(135deg, rgba(65,105,225,.03) 0%, rgba(148,0,211,.03) 100%);
    border-color:var(--primary);
}
.service-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.service-card__icon svg{
    width:28px;
    height:28px;
}
.service-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.service-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.service-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.service-card h3{
    margin:0;
    font-size:22px;
}
.service-card__desc{
    margin:0;
    color:#374151;
    line-height:1.6;
}
.service-card__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.service-card__features li{
    margin:.4rem 0;
    font-size:15px;
}
.service-card__features li::marker{
    color:#94a3b8;
}
.service-card__tag{
    display:inline-block;
    background:#eef2ff;
    color:var(--primary);
    padding:.4rem .8rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    justify-self:start;
}

/* Tech stack */
.tech-stack{
    padding:3rem 0;
    background:#f8fafc;
}
.tech-stack h2{
    text-align:center;
    margin:0 0 2rem;
    font-size:clamp(22px,3vw,32px);
}
.tech-grid{
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.tech-item{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:20px;
    text-align:center;
    display:grid;
    gap:8px;
    justify-items:center;
}
.tech-item__icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
}
.tech-item__icon svg{
    width:24px;
    height:24px;
}
.tech-item strong{
    font-size:16px;
    color:var(--ink);
}
.tech-item span{
    font-size:14px;
    color:var(--muted);
}

/* Feature highlight */
.feature-highlight{
    padding:4rem 0;
    background:linear-gradient(135deg, rgba(65,105,225,.03) 0%, rgba(148,0,211,.03) 100%);
}
.feature-highlight__content{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}
.feature-highlight__icon{
    width:72px;
    height:72px;
    border-radius:18px;
    background:linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.5rem;
}
.feature-highlight__icon svg{
    width:36px;
    height:36px;
    stroke:var(--primary);
}
.feature-highlight__content h2{
    margin:0 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.feature-highlight__content > p{
    margin:0 0 1.5rem;
    font-size:17px;
    color:#374151;
    line-height:1.6;
}
.feature-highlight__list{
    text-align:left;
    max-width:700px;
    margin:0 auto 2rem;
    padding-left:20px;
}
.feature-highlight__list li{
    margin:.6rem 0;
    color:#374151;
    font-size:15px;
}
.feature-highlight__list li::marker{
    color:var(--primary);
}

/* Migration cloud */
.migration-cloud{
    padding:4rem 0;
    background:#fff;
}
.migration-cloud__content{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
}
.migration-cloud__content h2{
    margin:0 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.migration-cloud__content .lead{
    margin:0 0 3rem;
}
.migration-steps{
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.migration-step{
    background:#f8fafc;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    text-align:center;
}
.migration-step__number{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
    color:#fff;
    font-weight:800;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1rem;
}
.migration-step h4{
    margin:0 0 .5rem;
    font-size:18px;
}
.migration-step p{
    margin:0;
    color:#374151;
    font-size:14px;
    line-height:1.5;
}

/* Tech stack subtitle */
.tech-stack__subtitle{
    text-align:center;
    color:var(--muted);
    margin:-1rem 0 2rem;
}

/* FAQ service */
.faq-service{
    padding:4rem 0;
}
.faq-service h2{
    text-align:center;
    margin:0 0 2.5rem;
    font-size:clamp(24px,4vw,36px);
}
.faq-grid{
    display:grid;
    gap:12px;
    max-width:900px;
    margin:0 auto;
}

/* CTA service */
.cta-service{
    padding:4rem 0;
    background:linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
}
.cta-service__content{
    text-align:center;
    max-width:700px;
    margin:0 auto;
}
.cta-service__content h2{
    color:#fff;
    font-size:clamp(24px,4vw,36px);
    margin:0 0 1rem;
}
.cta-service__content p{
    color:rgba(255,255,255,.9);
    font-size:17px;
    margin:0 0 2rem;
    line-height:1.6;
}
.cta-service .btn--primary{
    background:#fff;
    color:var(--primary);
    border-color:#fff;
}
.cta-service .btn--primary:hover{
    background:#f8fafc;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.2);
}

/* Pricing cards */
.pricing-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1100px;
    margin:0 auto;
}
@media(min-width:48rem){
    .pricing-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.pricing-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:32px 28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:20px;
    align-content:start;
    position:relative;
    grid-template-rows: auto auto 1fr auto; /* header, price, features flexible, button */
    gap:20px;
    align-content:start;
}
.pricing-card--featured{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.pricing-card__badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}
.pricing-card__header h3{
    margin:0 0 .5rem;
    font-size:22px;
}
.pricing-card__desc{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.pricing-card__price{
    display:grid;
    gap:4px;
    padding:1rem 0;
    border-bottom:1px solid #e8edf3;
}
.price-label{
    font-size:13px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.05em;
}
.price-value{
    font-size:clamp(28px,4vw,36px);
    font-weight:800;
    color:var(--ink);
    line-height:1;
}
.price-unit{
    font-size:14px;
    color:var(--muted);
}
.pricing-card__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.pricing-card__features li{
    margin:.6rem 0;
    font-size:15px;
}
.pricing-card__features li::marker{
    color:var(--primary);
}
.pricing-card .btn{
    margin-top:auto;
}
.pricing-card__note{
    margin:0;
    font-size:12px;
    color:var(--muted);
    font-style:italic;
}

/* Providers section */
.providers-section{
    padding:4rem 0;
    background:#f8fafc;
}
.providers-section h2{
    text-align:center;
    margin:0 0 1rem;
    font-size:clamp(22px,3vw,32px);
}
.section-subtitle{
    text-align:center;
    color:var(--muted);
    margin:0 0 3rem;
}
.providers-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    max-width:1000px;
    margin:0 auto;
}
.provider-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:32px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:140px;
}
.provider-logo img{
    max-width:180px;
    max-height:80px;
    width:auto;
    height:auto;
    filter:grayscale(100%) contrast(1.05) brightness(.95);
    opacity:.85;
    transition:filter .2s,opacity .2s,transform .2s;
}
.provider-card:hover .provider-logo img{
    filter:none;
    opacity:1;
    transform:scale(1.05);
}

/* Composantes section */
.composantes-section{
    padding:4rem 0;
    background:#fff;
}
.composantes-section h2{
    text-align:center;
    margin:0 0 3rem;
    font-size:clamp(24px,4vw,36px);
}
.composantes-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .composantes-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.composante-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
}
.composante-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.composante-card__icon svg{
    width:28px;
    height:28px;
}
.composante-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.composante-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.composante-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.composante-card__icon--green{
    background:#D1FAE5;
    color:#059669;
}
.composante-card h3{
    margin:0;
    font-size:20px;
}
.composante-card > p{
    margin:0;
    color:#374151;
    line-height:1.6;
    font-size:15px;
}
.composante-features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.composante-features li{
    margin:.5rem 0;
    font-size:14px;
}
.composante-features li::marker{
    color:var(--muted);
}

/* Tech stack footer */
.tech-stack__footer{
    text-align:center;
    margin-top:2rem;
    color:var(--muted);
    font-size:14px;
}

/* === block-features (Timeline) === */
.timeline{
    padding:5rem 0;
    background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    position:relative;
    overflow:hidden;
}
.timeline::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:
    radial-gradient(circle at 20% 30%, rgba(65,105,225,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(148,0,211,.04) 0%, transparent 50%);
    pointer-events:none;
}
.timeline__head{
    text-align:center;
    margin-bottom:3rem;
    position:relative;
    z-index:1;
}
.timeline__head h2{
    margin:.5rem 0;
    font-size:clamp(24px,4vw,36px);
}
.timeline .lead{
    margin:.5rem auto 0;
    color:#374151;
    max-width:600px;
}

.timeline__rail{
    position:relative;
    max-width:800px;
    margin:0 auto;
    z-index:1;
}

/* Ligne verticale */
.timeline__rail::before{
    content:"";
    position:absolute;
    left:20px;
    top:40px;
    bottom:40px;
    width:3px;
    background:linear-gradient(180deg,var(--primary) 0%,var(--violet) 50%,var(--accent) 100%);
    border-radius:2px;
}

/* Step article */
.tstep{
    position:relative;
    padding-left:80px;
    margin-bottom:3rem;
}
.tstep:last-child{
    margin-bottom:0;
}

/* Marker + numéro */
.tstep__marker{
    position:absolute;
    left:0;
    top:0;
}
.tnum{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
    background:#fff;
    border:3px solid;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.tnum--i{
    color:var(--primary);
    border-color:var(--primary);
}
.tnum--t{
    color:var(--violet);
    border-color:var(--violet);
}
.tnum--h{
    color:var(--accent);
    border-color:var(--accent);
}

/* Contenu */
.tstep__content{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
}

/* Icône */
.tstep__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
}
.tstep__icon svg{
    width:28px;
    height:28px;
}
.tstep__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.tstep__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.tstep__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}

.tstep__content h3{
    margin:0 0 .5rem;
    font-size:22px;
    line-height:1.2;
}
.tstep__tagline{
    margin:0 0 1rem;
    color:var(--muted);
    font-size:16px;
}

/* Features list */
.tstep__features{
    margin:0 0 1.5rem;
    padding-left:20px;
    color:#374151;
}
.tstep__features li{
    margin:.4rem 0;
    font-size:.95rem;
}
.tstep__features li::marker{
    color:#94a3b8;
}

/* Desktop layout */
@media(min-width:64rem){
    .timeline{
        padding:6rem 0;
    }

    .timeline__rail::before{
        left:50%;
        transform:translateX(-1.5px);
    }

    .tstep{
        padding-left:0;
        display:grid;
        grid-template-columns:1fr 42px 1fr;
        gap:0;
        align-items:start;
        margin-bottom:4rem;
    }

    /* Alternance gauche/droite - ordre I/T/H */
    .tstep--informatique .tstep__content{
        grid-column:1;
        grid-row:1;
    }
    .tstep--informatique .tstep__marker{
        grid-column:2;
        grid-row:1;
        position:relative;
        left:0;
        justify-self:center;
    }

    .tstep--telecom .tstep__content{
        grid-column:3;
        grid-row:1;
    }
    .tstep--telecom .tstep__marker{
        grid-column:2;
        grid-row:1;
        position:relative;
        left:0;
        justify-self:center;
    }

    .tstep--hebergement .tstep__content{
        grid-column:1;
        grid-row:1;
    }
    .tstep--hebergement .tstep__marker{
        grid-column:2;
        grid-row:1;
        position:relative;
        left:0;
        justify-self:center;
    }

    .tstep__content{
        padding:28px;
    }
}

/* ============================================ */
/* PAGE ANTIVIRUS EDR */
/* ============================================ */

/* Comparison Section */
.edr-comparison{
    padding:4rem 0;
    background:#fff;
}
.comparison-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1000px;
    margin:0 auto;
}
@media(min-width:48rem){
    .comparison-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.comparison-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
    position:relative;
}
.comparison-card--old{
    background:#f8fafc;
}
.comparison-card--new{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.comparison-card__header{
    display:grid;
    gap:12px;
}
.comparison-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#e8edf3;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#667085;
}
.comparison-card__icon svg{
    width:28px;
    height:28px;
}
.comparison-card__icon--primary{
    background:#eef2ff;
    color:var(--primary);
}
.comparison-card__header h3{
    margin:0;
    font-size:20px;
}
.comparison-features{
    margin:0;
    padding-left:20px;
    color:#374151;
    list-style:none;
}
.comparison-features li{
    margin:.6rem 0;
    font-size:15px;
    position:relative;
    padding-left:24px;
}
.comparison-card--old .comparison-features li::before{
    content:"✕";
    position:absolute;
    left:0;
    color:#94a3b8;
    font-weight:700;
}
.comparison-card--new .comparison-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:700;
}
.comparison-card__badge{
    position:absolute;
    top:-12px;
    right:24px;
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}
.comparison-conclusion{
    text-align:center;
    max-width:700px;
    margin:2rem auto 0;
    padding:24px;
    background:linear-gradient(135deg, rgba(65,105,225,.05) 0%, rgba(148,0,211,.05) 100%);
    border-radius:12px;
    border:1px solid #e8edf3;
}
.comparison-conclusion p{
    margin:0;
    font-size:17px;
    color:#1f2a44;
    line-height:1.6;
}

/* Management Modes Section */
.management-modes{
    padding:4rem 0;
    background:#f8fafc;
}
.modes-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1100px;
    margin:0 auto;
}
@media(min-width:48rem){
    .modes-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.mode-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:32px 28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:20px;
    align-content:start;
    position:relative;
}
.mode-card--managed{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.mode-card__badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.mode-card__header{
    display:grid;
    gap:12px;
}
.mode-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
}
.mode-card__icon svg{
    width:28px;
    height:28px;
}
.mode-card__header h3{
    margin:0;
    font-size:22px;
}
.mode-card__tagline{
    margin:0;
    color:var(--muted);
    font-size:15px;
}
.mode-card__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.mode-card__features li{
    margin:.6rem 0;
    font-size:15px;
}
.mode-card__features li::marker{
    color:var(--primary);
}
.mode-card__ideal{
    padding:16px;
    background:#f8fafc;
    border-radius:12px;
    border-left:3px solid var(--primary);
    font-size:14px;
    color:#374151;
}
.mode-card__ideal strong{
    color:var(--ink);
}
.mode-card .btn{
    margin-top:auto;
}

/* Packs Link Section */
.packs-link-section{
    padding:4rem 0;
    background:linear-gradient(135deg, rgba(65,105,225,.03) 0%, rgba(148,0,211,.03) 100%);
}
.packs-link-content{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}
.packs-link-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    background:linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.5rem;
}
.packs-link-icon svg{
    width:36px;
    height:36px;
    stroke:var(--primary);
}
.packs-link-content h2{
    margin:0 0 1rem;
    font-size:clamp(24px,4vw,36px);
}
.packs-link-content > p{
    margin:0 0 2rem;
    font-size:17px;
    color:#374151;
    line-height:1.6;
}
.packs-preview{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
    margin:0 auto 2rem;
    max-width:700px;
}
@media(min-width:48rem){
    .packs-preview{
        grid-template-columns:repeat(3,1fr);
    }
}
.pack-preview-item{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:16px;
    display:grid;
    gap:6px;
    text-align:center;
}
.pack-preview-item strong{
    font-size:16px;
    color:var(--ink);
}
.pack-preview-item span{
    font-size:13px;
    color:var(--muted);
    line-height:1.4;
}

/* ============================================ */
/* PAGE PARE-FEU */
/* ============================================ */

/* Firewall Solutions Section */
.firewall-solutions{
    padding:4rem 0;
    background:#fff;
}
.firewall-tiers{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .firewall-tiers{
        grid-template-columns:repeat(3,1fr);
    }
}
.firewall-tier{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
    position:relative;
}
.firewall-tier--featured{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.firewall-tier__badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}
.firewall-tier__header{
    display:grid;
    gap:12px;
}
.firewall-tier__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.firewall-tier__icon svg{
    width:28px;
    height:28px;
}
.firewall-tier__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.firewall-tier__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.firewall-tier__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.firewall-tier__header h3{
    margin:0;
    font-size:20px;
}
.firewall-tier__subtitle{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.firewall-tier__content{
    display:grid;
    gap:16px;
}
.firewall-tier__tech{
    padding:12px 16px;
    background:#f8fafc;
    border-radius:8px;
    font-size:14px;
    color:#374151;
}
.firewall-tier__tech strong{
    color:var(--ink);
}
.firewall-tier__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.firewall-tier__features li{
    margin:.5rem 0;
    font-size:14px;
}
.firewall-tier__features li::marker{
    color:var(--primary);
}
.firewall-tier__ideal{
    padding:14px;
    background:linear-gradient(135deg, rgba(65,105,225,.05) 0%, rgba(148,0,211,.05) 100%);
    border-radius:8px;
    border-left:3px solid var(--primary);
    font-size:14px;
    color:#374151;
}
.firewall-tier__ideal strong{
    color:var(--ink);
}
.firewall-tier .btn{
    margin-top:auto;
}

/* Deployment Section */
.deployment-section{
    padding:4rem 0;
    background:#f8fafc;
}
.deployment-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1000px;
    margin:0 auto;
}
@media(min-width:48rem){
    .deployment-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.deployment-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
}
.deployment-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.deployment-card__icon svg{
    width:28px;
    height:28px;
}
.deployment-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.deployment-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.deployment-card h3{
    margin:0;
    font-size:20px;
}
.deployment-card__desc{
    margin:0;
    color:var(--muted);
    font-size:15px;
}
.deployment-card__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.deployment-card__features li{
    margin:.5rem 0;
    font-size:14px;
}
.deployment-card__features li::marker{
    color:#94a3b8;
}
.deployment-card__tech{
    padding:12px 16px;
    background:#f8fafc;
    border-radius:8px;
    font-size:14px;
    color:#374151;
    margin-top:auto;
}
.deployment-card__tech strong{
    color:var(--ink);
}

/* Use Case Section */
.use-case-section{
    padding:4rem 0;
    background:#fff;
}
.use-case-content{
    max-width:900px;
    margin:0 auto;
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:32px;
}
.use-case-icon{
    width:64px;
    height:64px;
    border-radius:16px;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.5rem;
}
.use-case-icon svg{
    width:32px;
    height:32px;
    stroke:var(--primary);
}
.use-case-content h2{
    margin:0 0 1rem;
    font-size:clamp(22px,3vw,28px);
    text-align:center;
}
.use-case-intro{
    margin:0 0 2rem;
    font-size:16px;
    color:#374151;
    text-align:center;
    line-height:1.6;
}
.use-case-solution{
    background:#fff;
    border-radius:12px;
    padding:24px;
    margin-bottom:1.5rem;
}
.use-case-solution h3{
    margin:0 0 1rem;
    font-size:18px;
    color:var(--ink);
}
.use-case-solution ul{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.use-case-solution li{
    margin:.6rem 0;
    font-size:15px;
    line-height:1.5;
}
.use-case-solution li strong{
    color:var(--ink);
}
.use-case-result{
    padding:16px 20px;
    background:#f8fafc;
    border-left:3px solid var(--primary);
    border-radius:8px;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}
.use-case-result strong{
    color:var(--ink);
}

/* VPN Section */
.vpn-section{
    padding:4rem 0;
    background:#f8fafc;
}
.vpn-content{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    align-items:center;
}
@media(min-width:64rem){
    .vpn-content{
        grid-template-columns:.8fr 1.2fr;
    }
}
.vpn-visual{
    display:flex;
    justify-content:center;
    align-items:center;
}
.vpn-icon{
    width:200px;
    height:200px;
    border-radius:24px;
    background:linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
}
.vpn-icon svg{
    width:100px;
    height:100px;
    stroke:var(--primary);
}
.vpn-text h2{
    margin:0 0 1rem;
    font-size:clamp(22px,3vw,32px);
}
.vpn-text > p{
    margin:0 0 1.5rem;
    font-size:16px;
    color:#374151;
    line-height:1.6;
}
.vpn-features{
    margin:0 0 2rem;
    padding-left:20px;
    color:#374151;
}
.vpn-features li{
    margin:.6rem 0;
    font-size:15px;
    line-height:1.5;
}
.vpn-features li strong{
    color:var(--ink);
}
.vpn-features li::marker{
    color:var(--primary);
}

/* ============================================ */
/* PAGE AUDIT */
/* ============================================ */

/* Why Audit Section */
.why-audit{
    padding:4rem 0;
    background:#f8fafc;
}
.why-audit-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .why-audit-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.why-audit-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
}
.why-audit-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.why-audit-card__icon svg{
    width:28px;
    height:28px;
}
.why-audit-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.why-audit-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.why-audit-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.why-audit-card h3{
    margin:0;
    font-size:20px;
    color:var(--ink);
}
.why-audit-card p{
    margin:0;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}

/* Audit Domains Section */
.audit-domains{
    padding:4rem 0;
    background:#fff;
}
.domains-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .domains-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .domains-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.domain-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
}
.domain-card__header{
    display:grid;
    gap:10px;
}
.domain-card__icon{
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.domain-card__icon svg{
    width:24px;
    height:24px;
}
.domain-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.domain-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.domain-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.domain-card__header h3{
    margin:0;
    font-size:18px;
    color:var(--ink);
}
.domain-card__items{
    margin:0;
    padding-left:20px;
    color:#374151;
    list-style:none;
}
.domain-card__items li{
    margin:.5rem 0;
    font-size:14px;
    line-height:1.5;
    position:relative;
    padding-left:18px;
}
.domain-card__items li::before{
    content:"→";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:700;
}

/* Audit Process Section */
.audit-process{
    padding:4rem 0;
    background:#f8fafc;
}
.process-timeline{
    max-width:900px;
    margin:0 auto;
    position:relative;
}
.process-timeline::before{
    content:"";
    position:absolute;
    left:20px;
    top:40px;
    bottom:40px;
    width:3px;
    background:linear-gradient(180deg,var(--primary) 0%,var(--violet) 50%,var(--accent) 100%);
    border-radius:2px;
}
@media(min-width:48rem){
    .process-timeline::before{
        left:50%;
        transform:translateX(-1.5px);
    }
}
.process-step{
    position:relative;
    padding-left:80px;
    margin-bottom:3rem;
}
.process-step:last-child{
    margin-bottom:0;
}
@media(min-width:48rem){
    .process-step{
        padding-left:0;
        display:grid;
        grid-template-columns:1fr 42px 1fr;
        gap:0;
        align-items:start;
    }
    .process-step:nth-child(odd) .process-step__content{
        grid-column:1;
        text-align:right;
        padding-right:24px;
    }
    .process-step:nth-child(even) .process-step__content{
        grid-column:3;
        padding-left:24px;
    }
}
.process-step__number{
    position:absolute;
    left:0;
    top:0;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
    background:#fff;
    border:3px solid var(--primary);
    color:var(--primary);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
@media(min-width:48rem){
    .process-step__number{
        position:relative;
        left:auto;
        top:auto;
        grid-column:2;
        justify-self:center;
    }
}
.process-step__content{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
}
.process-step__content h3{
    margin:0 0 .5rem;
    font-size:20px;
    color:var(--ink);
}
.process-step__duration{
    margin:0 0 .8rem;
    font-size:14px;
    color:var(--primary);
    font-weight:600;
}
.process-step__desc{
    margin:0;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}

/* Audit Formules Section */
.audit-formules{
    padding:4rem 0;
    background:#fff;
}

/* ============================================ */
/* PAGE SAUVEGARDE */
/* ============================================ */

/* Why Backup Section */
.why-backup{
    padding:4rem 0;
    background:#fff;
}
.why-backup-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    margin-bottom:3rem;
}
@media(min-width:48rem){
    .why-backup-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .why-backup-grid{
        grid-template-columns:repeat(4,1fr);
    }
}
.risk-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
}
.risk-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.risk-card__icon svg{
    width:28px;
    height:28px;
}
.risk-card__icon--red{
    background:#FEE2E2;
    color:#DC2626;
}
.risk-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.risk-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.risk-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.risk-card h3{
    margin:0;
    font-size:18px;
    color:var(--ink);
}
.risk-card p{
    margin:0;
    font-size:14px;
    color:#374151;
    line-height:1.6;
}
.backup-stat{
    max-width:800px;
    margin:0 auto;
    padding:24px 28px;
    background:linear-gradient(135deg, rgba(220,38,38,.05) 0%, rgba(234,88,12,.05) 100%);
    border-left:4px solid #DC2626;
    border-radius:12px;
}
.backup-stat p{
    margin:0;
    font-size:17px;
    color:#1f2a44;
    line-height:1.6;
    text-align:center;
}

/* Rule 3-2-1 Section */
.rule-section{
    padding:4rem 0;
    background:#f8fafc;
}
.rule-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1100px;
    margin:0 auto;
}
@media(min-width:48rem){
    .rule-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.rule-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
    position:relative;
}
.rule-card--3{
    border-color:var(--primary);
}
.rule-card--2{
    border-color:var(--violet);
}
.rule-card--1{
    border-color:var(--accent);
}
.rule-card__number{
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:28px;
    background:#fff;
    border:3px solid;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.rule-card--3 .rule-card__number{
    color:var(--primary);
    border-color:var(--primary);
}
.rule-card--2 .rule-card__number{
    color:var(--violet);
    border-color:var(--violet);
}
.rule-card--1 .rule-card__number{
    color:var(--accent);
    border-color:var(--accent);
}
.rule-card__content{
    margin-top:24px;
}
.rule-card__content h3{
    margin:0 0 .8rem;
    font-size:20px;
    color:var(--ink);
}
.rule-card__content > p{
    margin:0 0 1rem;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}
.rule-card__example{
    padding:14px 16px;
    background:#f8fafc;
    border-radius:8px;
    font-size:14px;
    color:#374151;
    line-height:1.5;
}
.rule-card__example strong{
    color:var(--ink);
}

/* Backup Solutions */
.backup-solutions{
    padding:4rem 0;
    background:#fff;
}
.backup-tiers{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .backup-tiers{
        grid-template-columns:repeat(3,1fr);
    }
}
.backup-tier{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
    position:relative;
}
.backup-tier--featured{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.backup-tier__badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}
.backup-tier__header{
    display:grid;
    gap:12px;
}
.backup-tier__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.backup-tier__icon svg{
    width:28px;
    height:28px;
}
.backup-tier__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.backup-tier__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.backup-tier__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.backup-tier__header h3{
    margin:0;
    font-size:20px;
    color:var(--ink);
}
.backup-tier__subtitle{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.backup-tier__content{
    display:grid;
    gap:14px;
}
.backup-tier__approach{
    padding:12px 16px;
    background:#f8fafc;
    border-radius:8px;
    font-size:14px;
    color:#374151;
    margin:0;
}
.backup-tier__approach strong{
    color:var(--ink);
}
.backup-tier__features{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.backup-tier__features li{
    margin:.5rem 0;
    font-size:14px;
    line-height:1.5;
}
.backup-tier__features li::marker{
    color:var(--primary);
}
.backup-tier__advantage{
    padding:14px 16px;
    background:linear-gradient(135deg, rgba(65,105,225,.05) 0%, rgba(148,0,211,.05) 100%);
    border-radius:8px;
    border-left:3px solid var(--primary);
    font-size:14px;
    color:#374151;
    line-height:1.5;
}
.backup-tier__advantage strong{
    color:var(--ink);
}
.backup-tier .btn{
    margin-top:auto;
}

/* Comparison Section */
.comparison-section{
    padding:4rem 0;
    background:#f8fafc;
}
.comparison-content{
    display:grid;
    gap:1.5rem;
}
.comparison-pros h4,
.comparison-cons h4{
    margin:0 0 .8rem;
    font-size:16px;
    color:var(--ink);
}
.comparison-pros ul,
.comparison-cons ul{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.comparison-pros li,
.comparison-cons li{
    margin:.5rem 0;
    font-size:14px;
    line-height:1.5;
}
.comparison-pros li::marker{
    color:#059669;
}
.comparison-cons li::marker{
    color:#DC2626;
}

/* ============================================ */
/* PAGE PC PORTABLE */
/* ============================================ */

/* Why ITD Laptops Section */
.why-itd-laptops{
    padding:4rem 0;
    background:#fff;
}
.why-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .why-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.why-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
}
.why-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.why-card__icon svg{
    width:28px;
    height:28px;
}
.why-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.why-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.why-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.why-card h3{
    margin:0;
    font-size:18px;
    color:var(--ink);
}
.why-card p{
    margin:0;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}

/* Laptop Ranges Section */
.laptop-ranges{
    padding:4rem 0;
    background:#f8fafc;
}
.ranges-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .ranges-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .ranges-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.range-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px;
    align-content:start;
    position:relative;
}
.range-card--featured{
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.range-card__badge{
    position:absolute;
    top:-12px;
    right:24px;
    background:var(--primary);
    color:#fff;
    padding:.4rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}
.range-card__brand{
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    margin-bottom:8px;
}
.range-card__brand img{
    max-width:100px;
    height:auto;
    filter:grayscale(20%);
}
.range-card h3{
    margin:0;
    font-size:22px;
    color:var(--ink);
}
.range-card__tagline{
    margin:0;
    font-size:15px;
    color:var(--primary);
    font-weight:600;
}
.range-card__desc{
    margin:0;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}
.range-card__specs{
    margin:0;
    padding-left:20px;
    color:#374151;
    list-style:none;
}
.range-card__specs li{
    margin:.5rem 0;
    font-size:14px;
    position:relative;
    padding-left:18px;
}
.range-card__specs li::before{
    content:"•";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:700;
}
.range-card__use{
    padding:14px 16px;
    background:#f8fafc;
    border-radius:8px;
    border-left:3px solid var(--primary);
    font-size:14px;
    color:#374151;
    line-height:1.5;
}
.range-card__use strong{
    color:var(--ink);
}

/* User Profiles Section */
.user-profiles{
    padding:4rem 0;
    background:#fff;
}
.profiles-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .profiles-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .profiles-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.profile-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:16px;
    align-content:start;
}
.profile-card__header{
    display:grid;
    gap:10px;
    padding-bottom:14px;
    border-bottom:1px solid #e8edf3;
}
.profile-card__icon{
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.profile-card__icon svg{
    width:24px;
    height:24px;
}
.profile-card__icon--blue{
    background:#eef2ff;
    color:var(--primary);
}
.profile-card__icon--violet{
    background:#F3E8FF;
    color:var(--violet);
}
.profile-card__icon--orange{
    background:#FFF3E5;
    color:var(--accent);
}
.profile-card__header h3{
    margin:0;
    font-size:20px;
    color:var(--ink);
}
.profile-card__jobs{
    margin:0;
    font-size:13px;
    color:var(--muted);
    font-style:italic;
}
.profile-card__content{
    display:grid;
    gap:12px;
}
.profile-card__needs,
.profile-card__reco{
    margin:0;
    font-size:14px;
    color:#374151;
}
.profile-card__needs strong,
.profile-card__reco strong{
    color:var(--ink);
}
.profile-card__content ul{
    margin:0;
    padding-left:20px;
    color:#374151;
}
.profile-card__content li{
    margin:.4rem 0;
    font-size:14px;
}
.profile-card__content li::marker{
    color:var(--primary);
}

/* Services Included Section */
.services-included{
    padding:4rem 0;
    background:#f8fafc;
}
.services-included-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    max-width:1100px;
    margin:0 auto;
}
@media(min-width:48rem){
    .services-included-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .services-included-grid{
        grid-template-columns:repeat(4,1fr);
    }
}
.service-included-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    display:grid;
    gap:12px;
    align-content:start;
    text-align:center;
}
.service-included-card__icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    color:var(--primary);
}
.service-included-card__icon svg{
    width:28px;
    height:28px;
}
.service-included-card h3{
    margin:0;
    font-size:16px;
    color:var(--ink);
}
.service-included-card p{
    margin:0;
    font-size:14px;
    color:#374151;
    line-height:1.6;
    text-align:left;
}

/* ============================================ */
/* CSS ADDITIONNEL POUR FTTH */
/* À ajouter au fichier styles.css existant */
/* ============================================ */

/* Section éligibilité */
.section-eligibilite {
    padding: 3rem 0;
    background: #f8fafc;
}

.eligibilite-wrapper {
    max-width: 992px;
    margin: 0 auto;
}

.eligibilite-iframe {
    display: block;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
    border: 0;
    overflow: hidden;
}

/* Pricing grid 2 colonnes */
.pricing-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 900px;
    margin: 0 auto;
}

/* Tableau d'usage */
.usage-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    overflow: hidden;
}

.usage-table thead tr {
    background: linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    color: #fff;
}

.usage-table th {
    padding: 16px;
    font-weight: 700;
}

.usage-table th:first-child {
    text-align: left;
}

.usage-table th:not(:first-child) {
    text-align: center;
}

.usage-table td {
    padding: 14px;
    border-bottom: 1px solid #f1f4f8;
}

.usage-table td:first-child {
    text-align: left;
}

.usage-table td:not(:first-child) {
    text-align: center;
}

.usage-table tr:last-child td {
    border-bottom: none;
}

/* Note usage */
.usage-note {
    text-align: center;
    margin: 2rem 0 0;
    color: #667085;
    font-size: 14px;
}

.usage-note a {
    color: #4169E1;
    font-weight: 600;
}

/* Note process */
.process-note {
    text-align: center;
    margin: 2rem 0 0;
    color: #374151;
}

/* Grille GTR cards */
.gtr-cards {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 900px;
    margin: 0 auto;
}

/* GTR card */
.gtr-card {
    background: #fff;
    border: 2px solid;
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.gtr-card--ftte {
    border-color: #4169E1;
}

.gtr-card--ftto {
    border-color: #9400D3;
}

.gtr-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.gtr-card--ftte .gtr-card__icon {
    background: #eef2ff;
    color: #4169E1;
}

.gtr-card--ftto .gtr-card__icon {
    background: #F3E8FF;
    color: #9400D3;
}

.gtr-card__icon svg {
    width: 28px;
    height: 28px;
}

.gtr-card h3 {
    margin: 0 0 .5rem;
    font-size: 22px;
}

.gtr-card p {
    margin: 0 0 1rem;
    color: #374151;
    line-height: 1.6;
}

.gtr-card ul {
    margin: 0 0 1.5rem;
    padding-left: 20px;
    color: #374151;
}

.gtr-card li {
    margin: 0.4rem 0;
    font-size: 15px;
}

.gtr-card .btn {
    width: 100%;
    justify-content: center;
}


/* ============================================ */
/* CSS ADDITIONNEL POUR FTTE */
/* À ajouter au fichier styles.css existant */
/* ============================================ */

/* Grille services avec 4ème élément centré */
.services-grid--centered {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.services-grid--centered .service-card {
    flex: 1 1 300px;
    max-width: 380px;
}

/* Note sous les offres */
.services-note {
    text-align: center;
    margin: 3rem 0 0;
    color: #374151;
    font-size: 15px;
}

/* Section avec fond alternatif */
.section--alt {
    padding: 4rem 0;
    background: #f8fafc;
}

/* Titre centré */
.section-title-center {
    text-align: center;
    margin: 0 0 3rem;
}

/* Wrapper de tableau responsive */
.table-wrapper {
    overflow-x: auto;
}

/* Tableau de comparaison */
.comparison-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    overflow: hidden;
}

.comparison-table thead tr {
    background: linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    color: #fff;
}

.comparison-table th {
    padding: 16px;
    font-weight: 700;
}

.comparison-table th:first-child {
    text-align: left;
}

.comparison-table th:not(:first-child) {
    text-align: center;
}

.comparison-table td {
    padding: 14px;
    border-bottom: 1px solid #f1f4f8;
}

.comparison-table td:first-child {
    text-align: left;
}

.comparison-table td:not(:first-child) {
    text-align: center;
}

.comparison-table td.muted {
    color: #94a3b8;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

/* Cards de comparaison */
.comparison-cards {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 900px;
    margin: 3rem auto 0;
}

.comparison-card {
    background: #fff;
    border: 2px solid #94a3b8;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.comparison-card--primary {
    border-color: #4169E1;
}

.comparison-card strong {
    display: block;
    font-size: 18px;
    margin-bottom: 0.5rem;
}

.comparison-card--primary strong {
    color: #4169E1;
}

.comparison-card:not(.comparison-card--primary) strong {
    color: #94a3b8;
}

.comparison-card p {
    margin: 0.5rem 0 0;
    color: #374151;
    font-size: 14px;
}

.comparison-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #4169E1;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================ */
/* CSS ADDITIONNEL POUR FTTO */
/* À ajouter au fichier styles.css existant */
/* ============================================ */

/* Feature Box (pour monitoring Zabbix) */
.feature-box {
    display: grid;
    gap: 2rem;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}

@media(min-width: 64rem) {
    .feature-box {
        grid-template-columns: auto 1fr;
    }
}

.feature-box__icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-box__icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--primary);
}

.feature-box__content h2 {
    margin: 0 0 1rem;
}

.feature-box__content > p {
    margin: 0 0 1.5rem;
    font-size: 17px;
    color: #374151;
    line-height: 1.6;
}

.feature-box__list {
    margin: 0 0 2rem;
    padding-left: 20px;
    color: #374151;
}

.feature-box__list li {
    margin: 0.6rem 0;
    font-size: 15px;
}

.feature-box__list li::marker {
    color: var(--primary);
}

/* Subtitle centré */
.section-subtitle-center {
    text-align: center;
    margin: 0 0 3rem;
}

/* Grille de secours */
.secours-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 900px;
    margin: 0 auto;
}

/* Carte de secours */
.secours-card {
    background: #fff;
    border: 2px solid #e8edf3;
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 16px;
    align-content: start;
}

.secours-card--featured {
    border-color: var(--violet);
    background: linear-gradient(135deg, rgba(148,0,211,.02) 0%, rgba(148,0,211,.05) 100%);
}

.secours-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secours-card__icon svg {
    width: 28px;
    height: 28px;
}

.secours-card__icon--blue {
    background: #eef2ff;
    color: var(--primary);
}

.secours-card__icon--violet {
    background: #F3E8FF;
    color: var(--violet);
}

.secours-card h3 {
    margin: 0;
    font-size: 22px;
}

.secours-card__desc {
    margin: 0;
    color: #374151;
    line-height: 1.6;
}

.secours-card__features {
    margin: 0;
    padding-left: 20px;
    color: #374151;
}

.secours-card__features li {
    margin: 0.4rem 0;
    font-size: 15px;
}

.secours-card__features li::marker {
    color: #94a3b8;
}

.secours-card__price {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    justify-self: start;
}

/* ============================================ */
/* PAGE CONTACT - DESIGN PREMIUM */
/* À ajouter à la fin de css/styles.css */
/* ============================================ */

/* === HONEYPOT - Champ invisible (IMPORTANT) === */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* === Hero Contact === */
.hero-contact {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #6366f1 100%);
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.hero-contact::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out;
}
.hero-contact::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s infinite ease-in-out reverse;
}
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}
.hero-contact__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.hero-contact__badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 1.5rem;
}
.hero-contact h1 {
    font-size: clamp(32px, 6vw, 56px);
    margin: 0 0 1.5rem;
    line-height: 1.1;
}
.hero-contact__lead {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 0 2.5rem;
    opacity: .95;
    line-height: 1.6;
}
.hero-contact__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-contact .btn {
    padding: 1rem 2rem;
    font-size: 16px;
    gap: .5rem;
}
.btn--white {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}
.btn--white:hover {
    background: rgba(255,255,255,.9);
    transform: translateY(-2px);
}
.btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.4);
}
.btn--outline:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

/* === Contact Main Section === */
.contact-main {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.contact-layout {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    max-width: 1400px;
    margin: 0 auto;
}
@media(min-width: 64rem) {
    .contact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* === Form Card === */
.form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
    position: relative;
}
.form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--violet) 100%);
    border-radius: 24px 24px 0 0;
}
.form-card__header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.form-card__header h2 {
    margin: 0 0 .5rem;
    font-size: clamp(22px, 3vw, 32px);
    color: #1f2937;
}
.form-card__header p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

/* === Form Styles === */
.contact-form {
    display: grid;
    gap: 1.5rem;
}
.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media(min-width: 48rem) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}
.form-group {
    display: grid;
    gap: .5rem;
}
.form-group label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.required {
    color: #ef4444;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: .875rem 1.125rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all .2s;
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(65,105,225,.1);
}
.form-group textarea {
    resize: vertical;
    min-height: 140px;
}
.btn--full {
    width: 100%;
    justify-content: center;
}
.form-note {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.form-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6b7280;
}

/* === Alert Messages === */
.alert {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    align-items: flex-start;
    animation: slideDown .3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.alert svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.alert--success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #059669;
    color: #065f46;
}
.alert--error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    color: #991b1b;
}
.alert strong {
    display: block;
    margin-bottom: .25rem;
    font-size: 16px;
}
.alert p {
    margin: 0;
    font-size: 14px;
}

/* === Info Section === */
.contact-info-section {
    display: grid;
    gap: 2rem;
    align-content: start;
}

/* === Quick Contact Cards === */
.quick-contact-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media(min-width: 48rem) {
    .quick-contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.quick-contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    display: grid;
    gap: .75rem;
    transition: all .3s;
    text-decoration: none;
    color: inherit;
}
.quick-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(65,105,225,.15);
    border-color: var(--primary);
}
.quick-contact-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-contact-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}
.quick-contact-card h3 {
    margin: 0;
    font-size: 16px;
    color: #1f2937;
}
.quick-contact-card__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}
.quick-contact-card__meta {
    font-size: 13px;
    color: #6b7280;
}

/* === Map Card === */
.map-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.map-card__header {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
    border-bottom: 1px solid #e5e7eb;
}
.map-card__header h3 {
    margin: 0 0 .25rem;
    font-size: 18px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.map-card__header h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.map-card__header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}
.map-embed {
    position: relative;
    width: 100%;
    height: 350px;
}
.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* === Hours Card === */
.hours-card {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    padding: 2rem;
}
.hours-card h3 {
    margin: 0 0 1rem;
    font-size: 18px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hours-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.hours-list {
    display: grid;
    gap: .75rem;
}
.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.7);
    border-radius: 10px;
    font-size: 14px;
}
.hours-item__day {
    font-weight: 600;
    color: #1f2937;
}
.hours-item__time {
    color: #4b5563;
}
.hours-item--closed .hours-item__time {
    color: #9ca3af;
    font-style: italic;
}

/* === CTA Bottom === */
.cta-bottom {
    padding: 4rem 0;
    background: linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    position: relative;
    overflow: hidden;
}
.cta-bottom::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
    border-radius: 50%;
}
.cta-bottom .container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.cta-bottom h2 {
    color: #fff;
    font-size: clamp(24px, 4vw, 36px);
    margin: 0 0 1rem;
}
.cta-bottom p {
    color: rgba(255,255,255,.9);
    font-size: 17px;
    margin: 0 0 2rem;
    line-height: 1.6;
}
.cta-bottom .btn {
    display: inline-flex;
}
.cta-bottom .btn--large {
    padding: 1.125rem 2.5rem;
    font-size: 17px;
}

/* === Hero Contact === */
.hero-contact {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #6366f1 100%);
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.hero-contact::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out;
}
.hero-contact::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s infinite ease-in-out reverse;
}
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}
.hero-contact__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.hero-contact__badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 1.5rem;
}
.hero-contact h1 {
    font-size: clamp(32px, 6vw, 56px);
    margin: 0 0 1.5rem;
    line-height: 1.1;
}
.hero-contact__lead {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 0 2.5rem;
    opacity: .95;
    line-height: 1.6;
}
.hero-contact__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-contact .btn {
    padding: 1rem 2rem;
    font-size: 16px;
    gap: .5rem;
}
.btn--white {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}
.btn--white:hover {
    background: rgba(255,255,255,.9);
    transform: translateY(-2px);
}
.btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.4);
}
.btn--outline:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

/* === Contact Main Section === */
.contact-main {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.contact-layout {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    max-width: 1400px;
    margin: 0 auto;
}
@media(min-width: 64rem) {
    .contact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* === Form Card === */
.form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
    position: relative;
}
.form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--violet) 100%);
    border-radius: 24px 24px 0 0;
}
.form-card__header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.form-card__header h2 {
    margin: 0 0 .5rem;
    font-size: clamp(22px, 3vw, 32px);
    color: #1f2937;
}
.form-card__header p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

/* === Form Styles === */
.contact-form {
    display: grid;
    gap: 1.5rem;
}
.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media(min-width: 48rem) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}
.form-group {
    display: grid;
    gap: .5rem;
}
.form-group label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.required {
    color: #ef4444;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: .875rem 1.125rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all .2s;
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(65,105,225,.1);
}
.form-group textarea {
    resize: vertical;
    min-height: 140px;
}
.btn--full {
    width: 100%;
    justify-content: center;
}
.form-note {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.form-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6b7280;
}

/* === Alert Messages === */
.alert {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    align-items: flex-start;
    animation: slideDown .3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.alert svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.alert--success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #059669;
    color: #065f46;
}
.alert--error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    color: #991b1b;
}
.alert strong {
    display: block;
    margin-bottom: .25rem;
    font-size: 16px;
}
.alert p {
    margin: 0;
    font-size: 14px;
}

/* === Info Section === */
.contact-info-section {
    display: grid;
    gap: 2rem;
    align-content: start;
}

/* === Quick Contact Cards === */
.quick-contact-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media(min-width: 48rem) {
    .quick-contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.quick-contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    display: grid;
    gap: .75rem;
    transition: all .3s;
    text-decoration: none;
    color: inherit;
}
.quick-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(65,105,225,.15);
    border-color: var(--primary);
}
.quick-contact-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-contact-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}
.quick-contact-card h3 {
    margin: 0;
    font-size: 16px;
    color: #1f2937;
}
.quick-contact-card__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}
.quick-contact-card__meta {
    font-size: 13px;
    color: #6b7280;
}

/* === Map Card === */
.map-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.map-card__header {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
    border-bottom: 1px solid #e5e7eb;
}
.map-card__header h3 {
    margin: 0 0 .25rem;
    font-size: 18px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.map-card__header h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.map-card__header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}
.map-embed {
    position: relative;
    width: 100%;
    height: 350px;
}
.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* === Hours Card === */
.hours-card {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    padding: 2rem;
}
.hours-card h3 {
    margin: 0 0 1rem;
    font-size: 18px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hours-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.hours-list {
    display: grid;
    gap: .75rem;
}
.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.7);
    border-radius: 10px;
    font-size: 14px;
}
.hours-item__day {
    font-weight: 600;
    color: #1f2937;
}
.hours-item__time {
    color: #4b5563;
}
.hours-item--closed .hours-item__time {
    color: #9ca3af;
    font-style: italic;
}

/* === FAQ Service (réutilisé) === */
.faq-service {
    padding: 4rem 0;
    background: #fff;
}

/* === CTA Bottom === */
.cta-bottom {
    padding: 4rem 0;
    background: linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    text-align: center;
}
.cta-bottom .container {
    max-width: 700px;
    margin: 0 auto;
}
.cta-bottom h2 {
    color: #fff;
    font-size: clamp(24px, 4vw, 36px);
    margin: 0 0 1rem;
}
.cta-bottom p {
    color: rgba(255,255,255,.9);
    font-size: 17px;
    margin: 0 0 2rem;
}
.cta-bottom .btn--large {
    padding: 1.125rem 2.5rem;
}

/* ============================================ */
/* PAGE STATUS - UPTIME MONITORING */
/* À ajouter à la fin de css/styles.css */
/* ============================================ */

/* Hero Status */
.hero-status {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.hero-status::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34,211,238,.1) 0%, transparent 70%);
    border-radius: 50%;
}
.hero-status__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(16,185,129,.15);
    border: 1px solid rgba(16,185,129,.3);
    color: #10b981;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 1.5rem;
}
.status-badge__dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.hero-status h1 {
    font-size: clamp(28px, 5vw, 48px);
    margin: 0 0 1rem;
}
.hero-status__lead {
    font-size: 18px;
    opacity: .9;
    margin: 0 0 2rem;
    line-height: 1.6;
}
.hero-status__meta {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
    opacity: .8;
}
.hero-status__meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hero-status__meta-item svg {
    width: 16px;
    height: 16px;
}

/* KPIs Status */
.status-kpis {
    padding: 3rem 0;
    background: #fff;
}
.kpis-grid-status {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 900px;
    margin: 0 auto;
}
.kpi-status-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
}
.kpi-status-card__value {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: .5rem;
}
.kpi-status-card__value.success {
    color: #10b981;
}
.kpi-status-card__label {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

/* Iframe Section */
.status-monitor {
    padding: 0;
    background: #f8fafc;
}
.status-monitor__header {
    background: #fff;
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
}
.status-monitor__header h2 {
    margin: 0 0 .5rem;
    font-size: clamp(20px, 3vw, 28px);
    color: #0f172a;
    text-align: center;
}
.status-monitor__header p {
    margin: 0;
    color: #64748b;
    text-align: center;
    font-size: 15px;
}
.iframe-container {
    position: relative;
    width: 100%;
    min-height: 1000px;
    background: #fff;
}
.iframe-container iframe {
    width: 100%;
    height: 100%;
    min-height: 1000px;
    border: 0;
    display: block;
}

/* Info Section */
.status-info {
    padding: 4rem 0;
    background: #fff;
}
.info-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
}
@media(min-width: 64rem) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.info-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
}
.info-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.info-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}
.info-card h3 {
    margin: 0 0 1rem;
    font-size: 20px;
    color: #0f172a;
}
.info-card p {
    margin: 0 0 1rem;
    color: #475569;
    line-height: 1.6;
}
.info-card ul {
    margin: 0;
    padding-left: 20px;
    color: #475569;
}
.info-card li {
    margin: .5rem 0;
    font-size: 15px;
}
.info-card li::marker {
    color: var(--primary);
}

/* Contact d'urgence */
.emergency-contact {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.emergency-contact__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.emergency-contact__icon svg {
    width: 24px;
    height: 24px;
    color: #f59e0b;
}
.emergency-contact__content h4 {
    margin: 0 0 .25rem;
    font-size: 16px;
    color: #92400e;
}
.emergency-contact__content p {
    margin: 0;
    color: #92400e;
    font-size: 14px;
}
.emergency-contact__content a {
    color: #92400e;
    font-weight: 700;
    text-decoration: underline;
}

/* Legend */
.status-legend {
    padding: 3rem 0;
    background: #f8fafc;
}
.status-legend h3 {
    text-align: center;
    margin: 0 0 2rem;
    font-size: 20px;
    color: #0f172a;
}
.legend-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 800px;
    margin: 0 auto;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.legend-item__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-item__dot.success {
    background: #10b981;
}
.legend-item__dot.warning {
    background: #f59e0b;
}
.legend-item__dot.error {
    background: #ef4444;
}
.legend-item__dot.info {
    background: #3b82f6;
}
.legend-item__label {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}

/* ... (garder tout le CSS existant) ... */

/* === PAGE MENTIONS LÉGALES === */
.legal-content {
    padding: 4rem 0;
}

/* Navigation rapide */
.legal-nav {
    background: var(--bg-alt);
    border: 1px solid #e8edf3;
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 3rem;
}
.legal-nav h2 {
    margin: 0 0 1rem;
    font-size: 18px;
    color: var(--ink);
}
.legal-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.legal-nav__list li {
    margin: 0;
}
.legal-nav__list a {
    display: block;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    color: var(--primary);
    font-weight: 600;
    transition: all 0.2s;
}
.legal-nav__list a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateX(4px);
}

/* Sections légales */
.legal-sections {
    max-width: 900px;
    margin: 0 auto;
}
.legal-section {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: var(--radius);
    padding: 2.5rem;
    margin-bottom: 2rem;
    scroll-margin-top: 100px;
}
.legal-section--highlight {
    background: linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
    border-color: var(--primary);
}
.legal-section__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.legal-section__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--primary);
}
.legal-section h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(22px, 3vw, 28px);
    color: var(--ink);
}
.legal-section h3 {
    margin: 2rem 0 1rem;
    font-size: 20px;
    color: var(--ink);
}
.legal-section h4 {
    margin: 1.5rem 0 0.75rem;
    font-size: 17px;
    color: var(--ink);
}
.legal-section__content p {
    margin: 0.75rem 0;
    color: #374151;
    line-height: 1.7;
}
.legal-section__content p strong {
    color: var(--ink);
}
.legal-section__content a {
    color: var(--primary);
    text-decoration: underline;
}
.legal-section__content a:hover {
    text-decoration: none;
}

/* Listes */
.legal-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: #374151;
}
.legal-list li {
    margin: 0.5rem 0;
    line-height: 1.6;
}
.legal-list li strong {
    color: var(--ink);
}

/* Tableaux de données */
.data-table {
    margin: 1.5rem 0;
    overflow-x: auto;
}
.data-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    overflow: hidden;
}
.data-table thead {
    background: var(--bg-alt);
}
.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
    border-bottom: 2px solid #e8edf3;
}
.data-table td {
    padding: 1rem;
    color: #374151;
    font-size: 14px;
    border-bottom: 1px solid #f1f4f8;
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}
.data-table tbody tr:hover {
    background: #f8fafc;
}

/* Callouts / encadrés */
.callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    margin: 1.5rem 0;
}
.callout--info {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}
.callout--warning {
    background: #FFF3E5;
    border: 1px solid #fed7aa;
}
.callout__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--primary);
}
.callout--warning .callout__icon {
    stroke: var(--accent);
}
.callout p {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
}
.callout a {
    color: var(--primary);
    font-weight: 600;
}

/* Types de cookies */
.cookies-table {
    margin: 1.5rem 0;
}
.cookie-type {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.cookie-type h4 {
    margin: 0 0 0.75rem;
    font-size: 18px;
}
.cookie-type p {
    margin: 0.5rem 0;
    font-size: 15px;
}
.cookie-duration {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8edf3;
    font-size: 14px;
    color: var(--muted);
    font-style: italic;
}

/* Contact box */
.contact-box {
    background: var(--bg-alt);
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.contact-box p {
    margin: 0.5rem 0;
}

/* Note légale */
.legal-note {
    font-size: 14px;
    color: var(--muted);
    font-style: italic;
    padding: 1rem;
    background: var(--bg-alt);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}

/* Responsive */
@media (max-width: 63.999rem) {
    .legal-nav__list {
        grid-template-columns: 1fr;
    }
    .legal-section {
        padding: 1.5rem;
    }
    .data-table {
        font-size: 13px;
    }
    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }
}

/* À ajouter à la fin du fichier styles.css existant */

/* ============================================ */
/* BANDEAU COOKIES & RGPD */
/* ============================================ */

/* Bandeau principal */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid var(--primary);
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner[aria-hidden="false"] {
    transform: translateY(0);
}
.cookie-banner__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}
.cookie-banner__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cookie-banner__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--primary);
}
.cookie-banner__text h2 {
    margin: 0 0 0.5rem;
    font-size: 18px;
    color: var(--ink);
}
.cookie-banner__text p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}
.cookie-banner__link {
    margin-top: 0.5rem !important;
}
.cookie-banner__link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cookie-btn {
    white-space: nowrap;
    font-size: 14px;
    padding: 0.6rem 1.2rem;
}
.btn--secondary {
    background: #fff;
    color: var(--ink);
    border: 2px solid #e8edf3;
}
.btn--secondary:hover {
    background: var(--bg-alt);
    border-color: var(--muted);
}

/* Modal de personnalisation */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.cookie-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}
.cookie-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.cookie-modal__content {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    max-width: 600px;
    width: calc(100% - 2rem);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0,0,0,.2);
    transform: scale(0.9);
    transition: transform .3s;
}
.cookie-modal[aria-hidden="false"] .cookie-modal__content {
    transform: scale(1);
}
.cookie-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e8edf3;
}
.cookie-modal__header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--ink);
}
.cookie-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e8edf3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}
.cookie-modal__close:hover {
    background: var(--bg-alt);
    border-color: var(--muted);
}
.cookie-modal__close svg {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
}
.cookie-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.cookie-modal__body > p {
    margin: 0 0 1.5rem;
    color: #374151;
    line-height: 1.6;
}
.cookie-category {
    background: var(--bg-alt);
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.cookie-category__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-category__info h3 {
    margin: 0 0 0.5rem;
    font-size: 16px;
    color: var(--ink);
}
.cookie-category__info p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}
.cookie-toggle {
    flex-shrink: 0;
}
.toggle-label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e8edf3;
    border-radius: 34px;
    transition: .3s;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: .3s;
}
input:checked + .toggle-slider {
    background: var(--primary);
}
input:checked + .toggle-slider:before {
    transform: translateX(22px);
}
input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-modal__note {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0 0;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.6;
}
.cookie-modal__footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e8edf3;
    justify-content: flex-end;
}

/* Bouton flottant */
.cookie-trigger {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    box-shadow: 0 4px 12px rgba(65,105,225,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}
.cookie-trigger.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.cookie-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(65,105,225,.4);
}
.cookie-trigger svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    fill: #fff;
}

/* Responsive */
@media (max-width: 63.999rem) {
    .cookie-banner__content {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }
    .cookie-banner__icon {
        display: none;
    }
    .cookie-banner__actions {
        justify-content: stretch;
    }
    .cookie-btn {
        flex: 1;
    }
    .cookie-category__header {
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
    }
    .cookie-modal__footer {
        flex-direction: column;
    }
}

/* ============================================ */
/* PAGE À PROPOS */
/* ============================================ */

/* Story section */
.story-section{padding:4rem 0;background:#fff}
.story-content{max-width:900px;margin:0 auto}
.story-timeline{position:relative;padding-left:60px}
.story-timeline::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--primary) 0%,var(--violet) 50%,var(--accent) 100%);border-radius:2px}
.story-item{position:relative;margin-bottom:3rem;display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}
.story-item:last-child{margin-bottom:0}
.story-year{position:absolute;left:-60px;width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.story-item:nth-child(2) .story-year{border-color:var(--violet);color:var(--violet)}
.story-item:nth-child(3) .story-year{border-color:var(--accent);color:var(--accent)}
.story-item:nth-child(4) .story-year{border-color:#059669;color:#059669}
.story-item:nth-child(5) .story-year{border-color:var(--primary);color:var(--primary)}
.story-text{grid-column:2}
.story-text h3{margin:0 0 .5rem;font-size:20px}
.story-text p{margin:0;color:#374151;line-height:1.6;font-size:15px}

/* Values section */
.values-section{padding:4rem 0;background:linear-gradient(135deg,rgba(65,105,225,.02) 0%,rgba(148,0,211,.02) 100%)}
.values-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.value-card{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:28px;box-shadow:var(--shadow);text-align:center}
.value-card__icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.value-card__icon svg{width:32px;height:32px}
.value-card__icon--blue{background:#eef2ff;color:var(--primary)}
.value-card__icon--violet{background:#F3E8FF;color:var(--violet)}
.value-card__icon--orange{background:#FFF3E5;color:var(--accent)}
.value-card__icon--green{background:#D1FAE5;color:#059669}
.value-card h3{margin:0 0 .75rem;font-size:20px}
.value-card p{margin:0;color:#374151;line-height:1.6;font-size:15px}

/* Approach section */
.approach-section{padding:4rem 0;background:#fff}
.approach-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:48rem){.approach-grid{grid-template-columns:repeat(3,1fr)}}
.approach-card{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:28px;box-shadow:var(--shadow);display:grid;gap:1rem;align-content:start}
.approach-card__icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.approach-card__icon svg{width:32px;height:32px}
.approach-card__icon--blue{background:#eef2ff;color:var(--primary)}
.approach-card__icon--violet{background:#F3E8FF;color:var(--violet)}
.approach-card__icon--orange{background:#FFF3E5;color:var(--accent)}
.approach-card h3{margin:0;font-size:20px}
.approach-card > p{margin:0 0 1rem;color:#374151;line-height:1.6;font-size:15px}
.approach-list{margin:0;padding-left:20px;color:#374151}
.approach-list li{margin:.5rem 0;font-size:14px;line-height:1.5}
.approach-list li::marker{color:var(--muted)}

/* Certifications */
.certifications-section{padding:4rem 0;background:#f8fafc}
.certifications-section h2{text-align:center;margin:0 0 .5rem;font-size:clamp(24px,4vw,32px)}
.cert-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:900px;margin:2rem auto 0}
.cert-item{background:#fff;border:1px solid #e8edf3;border-radius:12px;padding:24px;text-align:center;display:grid;gap:12px;justify-items:center}
.cert-logo{height:60px;display:flex;align-items:center;justify-content:center}
.cert-logo img{max-width:140px;max-height:60px;width:auto;height:auto;filter:grayscale(100%) contrast(1.05);opacity:.8}
.cert-item:hover .cert-logo img{filter:none;opacity:1}
.cert-item p{margin:0;color:var(--muted);font-size:13px}

/* Engagement section */
.engagement-section{padding:4rem 0;background:linear-gradient(135deg,#4169E1 0%,#6B46C1 100%);color:#fff}
.engagement-content{max-width:900px;margin:0 auto;text-align:center}
.engagement-icon{width:72px;height:72px;border-radius:18px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.engagement-icon svg{width:36px;height:36px;stroke:#fff}
.engagement-content h2{color:#fff;margin:0 0 .5rem;font-size:clamp(24px,4vw,36px)}
.engagement-content .lead{color:rgba(255,255,255,.9);margin:0 0 2.5rem}
.engagement-grid{display:grid;gap:1.5rem;text-align:left}
@media(min-width:48rem){.engagement-grid{grid-template-columns:repeat(2,1fr)}}
.engagement-item{display:flex;gap:1rem;align-items:start}
.engagement-check{width:24px;height:24px;flex-shrink:0;stroke:rgba(255,255,255,.9)}
.engagement-item h4{margin:0 0 .25rem;font-size:16px;color:#fff}
.engagement-item p{margin:0;color:rgba(255,255,255,.85);font-size:14px;line-height:1.5}

/* Numbers section */
.numbers-section{padding:4rem 0;background:#f8fafc}
.numbers-section h2{text-align:center;margin:0 0 3rem;font-size:clamp(24px,4vw,32px)}
.numbers-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));max-width:1000px;margin:0 auto}
.number-card{background:#fff;border:2px solid #e8edf3;border-radius:16px;padding:32px 24px;text-align:center;box-shadow:var(--shadow)}
.number-value{font-size:clamp(36px,6vw,48px);font-weight:800;color:var(--primary);line-height:1;margin-bottom:.5rem}
.number-label{color:var(--muted);font-size:14px;line-height:1.4}

/* Zone section */
.zone-section{padding:4rem 0;background:#fff}
.zone-content{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media(min-width:64rem){.zone-content{grid-template-columns:1.2fr .8fr}}
.zone-text h2{margin:0 0 .75rem;font-size:clamp(24px,4vw,32px)}
.zone-text .lead{margin:0 0 1.5rem}
.zone-list{margin:0 0 2rem;padding-left:20px;color:#374151}
.zone-list li{margin:.75rem 0;line-height:1.6;font-size:15px}
.zone-list li::marker{color:var(--primary)}
.zone-map{background:#f8fafc;border:1px solid #e8edf3;border-radius:16px;padding:3rem 2rem;min-height:320px;display:flex;align-items:center;justify-content:center}
.map-placeholder{text-align:center}
.map-placeholder svg{width:80px;height:80px;stroke:var(--primary);margin:0 auto 1rem}
.map-placeholder p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}

/* Responsive mobile */
@media(max-width:47.999rem){
    .story-timeline{padding-left:50px}
    .story-timeline::before{left:15px}
    .story-year{left:-50px;width:32px;height:32px;font-size:12px}
    .story-item{gap:1rem}
}

/* ============================================ */
/* ARTICLE FEATURE GRID */
/* ============================================ */
.article-feature-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 1000px;
}
@media (min-width: 48rem) {
    .article-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 64rem) {
    .article-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-item {
    text-align: center;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.feature-icon {
    width: 48px;
    height: 48px;
    color: var(--primary);
}

.feature-item h4 {
    margin: 0;
    font-size: 18px;
    color: var(--ink);
}

.feature-item p {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================ */
/* USE CASES */
/* ============================================ */
.use-cases {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 48rem) {
    .use-cases {
        grid-template-columns: repeat(2, 1fr);
    }
}

.use-case {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.use-case h3 {
    margin: 0 0 1rem;
    font-size: 18px;
    color: var(--ink);
}

.use-case p {
    margin: 0.5rem 0;
    color: #374151;
    font-size: 15px;
}

.use-case ul {
    margin: 1rem 0;
    padding-left: 20px;
    color: #374151;
}

.use-case ul li {
    margin: 0.4rem 0;
    font-size: 14px;
}

.use-case p:last-child {
    margin-top: 1rem;
    font-weight: 700;
    color: var(--primary);
    font-size: 18px;
}

/* ============================================ */
/* HIGHLIGHT BOXES */
/* ============================================ */
.highlight-box {
    background: #fff;
    border: 2px solid #e8edf3;
    border-radius: 16px;
    padding: 24px;
    margin: 2rem 0;
}

.highlight-box h4 {
    margin: 0 0 1rem;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.highlight-box--info {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.03) 0%, rgba(148, 0, 211, 0.03) 100%);
    border-color: var(--primary);
}

.highlight-box--info h4 {
    color: var(--primary);
}

.highlight-box--success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(5, 150, 105, 0.03) 100%);
    border-color: #10b981;
}

.highlight-box--success h4 {
    color: #059669;
}

.highlight-box ul {
    margin: 0.5rem 0 0;
    padding-left: 20px;
    color: #374151;
}

.highlight-box ul li {
    margin: 0.5rem 0;
    font-size: 15px;
    line-height: 1.5;
}