/* Direction artistique commune aux pages intérieures Honab. */
body.site-immersive {
    --si-surface: #0b1113;
    --si-surface-2: #11191b;
    --si-text: #f4f5f0;
    --si-muted: #aab1ad;
    --si-line: rgba(255,255,255,.12);
    margin: 0;
    padding-top: 96px;
    overflow-x: hidden;
    color: var(--si-text);
    background:
        radial-gradient(circle at 8% 8%, rgba(255,98,76,.11), transparent 25rem),
        radial-gradient(circle at 92% 35%, rgba(119,232,255,.06), transparent 30rem),
        #050809 !important;
    font-family: "Manrope", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body.site-immersive::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

body.site-immersive.hi-nav-active #topbar,
body.site-immersive.hi-nav-active > #header,
body.site-immersive.hi-nav-active > header#header { display: none !important; }
body.site-immersive.hi-nav-active > nav.navigation-clean { display: none !important; }

body.site-immersive a { transition: color .25s, background .25s, border-color .25s, transform .25s; }
body.site-immersive p { color: var(--si-muted); }
body.site-immersive .container { position: relative; }
body.site-immersive section:not(#topbar) { position: relative; }
body.site-immersive main { overflow: hidden; }

/* En-têtes des pages fixes */
body.site-immersive .breadcrumbs { position: relative; margin-top: -96px; overflow: hidden; background: transparent; }
body.site-immersive .breadcrumbs .page-header {
    position: relative;
    min-height: 570px;
    padding: 190px 20px 120px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 40%, rgba(255,98,76,.2), transparent 13rem),
        linear-gradient(125deg, #071012, #050809 62%) !important;
}
body.site-immersive .breadcrumbs .page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(560px, 52vw);
    aspect-ratio: 1;
    right: -4vw;
    top: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 30%, rgba(255,139,119,.58), #321210 4%, #111819 52%, #050708 70%);
    border: 1px solid rgba(255,98,76,.25);
    box-shadow: 0 0 90px rgba(255,98,76,.14), 0 0 0 46px rgba(255,98,76,.025), 0 0 0 94px rgba(119,232,255,.018);
    animation: siOrb 9s ease-in-out infinite;
}
body.site-immersive .breadcrumbs .page-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 630px;
    height: 240px;
    right: -80px;
    top: 180px;
    border: 2px solid rgba(119,232,255,.34);
    border-radius: 50%;
    transform: rotate(-17deg);
    box-shadow: 0 0 30px rgba(119,232,255,.06);
}
body.site-immersive .breadcrumbs .page-header .container { z-index: 2; }
body.site-immersive .breadcrumbs .page-header .row { justify-content: flex-start !important; }
body.site-immersive .breadcrumbs .page-header .col-lg-6 { max-width: 760px; text-align: left !important; }
body.site-immersive .breadcrumbs .page-header .col-lg-6::before {
    content: attr(data-kicker);
    display: block;
    margin-bottom: 20px;
    color: #ff624c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
body.site-immersive .breadcrumbs h1,
body.site-immersive .breadcrumbs h2 {
    max-width: 770px;
    margin: 0 0 22px;
    color: #f4f5f0 !important;
    font-size: clamp(54px, 7vw, 96px);
    line-height: .96;
    letter-spacing: -.065em;
    text-align: left !important;
}
body.site-immersive .breadcrumbs .page-header p { max-width: 610px; margin: 0; color: #afb6b1 !important; font-size: clamp(16px, 1.5vw, 20px); text-align: left; }
body.site-immersive .breadcrumbs > nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 17px 0; border-top: 1px solid var(--si-line); background: rgba(5,8,9,.5); backdrop-filter: blur(15px); }
body.site-immersive .breadcrumbs > nav ol { margin: 0; color: #858e88; }
body.site-immersive .breadcrumbs > nav a { color: #e3e6e1; }

body.site-immersive .si-simple-hero {
    min-height: 520px;
    padding-top: 150px !important;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 82% 20%, rgba(255,98,76,.18), transparent 24rem) !important;
}
body.site-immersive .si-simple-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 430px;
    aspect-ratio: 1;
    right: -90px;
    top: 20px;
    border: 1px solid rgba(255,98,76,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,98,76,.025), 0 0 0 110px rgba(119,232,255,.015);
}
body.site-immersive .si-primary-title {
    position: relative;
    z-index: 1;
    margin-bottom: 65px !important;
    color: #f4f5f0 !important;
    font-size: clamp(52px, 7vw, 92px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
}
body.site-immersive .si-simple-hero h5 { border: 1px solid var(--si-line) !important; color: #f4f5f0 !important; background: rgba(255,255,255,.06) !important; }
body.site-immersive .si-simple-hero .text-center > p { color: #aab1ad !important; font-size: 17px; }
body.site-immersive .si-simple-hero .intro { max-width: 920px; margin-inline: auto; }
body.site-immersive .si-simple-hero .intro .si-primary-title { max-width: 880px; margin-inline: auto; font-size: clamp(42px, 6vw, 72px) !important; text-align: center; }
body.site-immersive .si-simple-hero .intro p { color: #aab1ad !important; font-size: 17px; }
body.site-immersive .si-simple-hero .intro a { display: inline-flex; min-height: 52px; align-items: center; padding: 0 23px; border-radius: 999px; color: #170a08 !important; background: #ff624c; font-weight: 800; }

/* Hero des pages locales */
body.site-immersive #hero.hero {
    min-height: 760px;
    margin-top: -96px;
    padding: 180px 0 90px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 79% 40%, rgba(255,98,76,.18), transparent 22rem),
        #050809 !important;
    background-size: 70px 70px, 70px 70px, auto, auto !important;
}
body.site-immersive #hero.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(560px, 45vw);
    aspect-ratio: 1;
    right: 3vw;
    top: 135px;
    border-radius: 50%;
    background: radial-gradient(circle at 68% 38%, #ff7a66 0 1%, #361411 4%, #111819 56%, #050708 72%);
    border: 1px solid rgba(255,98,76,.25);
    box-shadow: 0 0 100px rgba(255,98,76,.15), 0 0 0 55px rgba(168,140,255,.025);
    animation: siOrb 10s ease-in-out infinite;
}
body.site-immersive #hero.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 590px;
    height: 220px;
    right: -30px;
    top: 300px;
    border: 2px solid rgba(119,232,255,.45);
    border-radius: 50%;
    transform: rotate(-18deg);
}
body.site-immersive #hero > .container > .row { min-height: 480px; }
body.site-immersive #hero .icon-boxes .row { min-height: 0; }
body.site-immersive #hero .icon-boxes::before { background: #050809 !important; }
body.site-immersive #hero .col-lg-7 { position: relative; z-index: 3; }
body.site-immersive #hero h1 {
    max-width: 780px;
    margin: 0 0 28px;
    color: #f4f5f0 !important;
    font-size: clamp(52px, 6.5vw, 92px);
    line-height: .96;
    letter-spacing: -.064em;
    text-shadow: none;
}
body.site-immersive #hero h1::before {
    content: "Agence web locale";
    display: block;
    margin-bottom: 20px;
    color: #ff624c;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
}
body.site-immersive #hero p { max-width: 640px; color: #afb6b1 !important; font-size: 19px; }
body.site-immersive #hero .col-lg-5 { opacity: .15; filter: grayscale(1); }
body.site-immersive #hero .btn-get-started,
body.site-immersive #hero .btn-watch-video {
    min-height: 56px;
    padding: 0 25px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #160a08 !important;
    background: #ff624c !important;
    box-shadow: 0 16px 46px rgba(255,98,76,.2);
    font-weight: 800;
}
body.site-immersive #hero .btn-watch-video { margin-left: 12px; color: #f4f5f0 !important; border-color: var(--si-line); background: rgba(255,255,255,.04) !important; box-shadow: none; }
body.site-immersive #hero .icon-boxes { position: relative; z-index: 3; }
body.site-immersive #hero .icon-box {
    min-height: 170px;
    border: 1px solid var(--si-line);
    border-radius: 22px;
    background: rgba(11,17,19,.7) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 55px rgba(0,0,0,.24);
}
body.site-immersive #hero .icon-box:hover { border-color: rgba(255,98,76,.52); transform: translateY(-7px); }
body.site-immersive #hero .icon-box i { color: #ff624c !important; }
body.site-immersive #hero .icon-box .title a { color: #f4f5f0 !important; }

/* Sections et contenus */
body.site-immersive section { padding-top: clamp(76px, 9vw, 125px); padding-bottom: clamp(76px, 9vw, 125px); background: transparent !important; }
body.site-immersive .section-header { padding-bottom: 46px; }
body.site-immersive .section-header h2,
body.site-immersive section > .container > h2,
body.site-immersive .intro > h2 {
    color: #f4f5f0 !important;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.02;
    letter-spacing: -.052em;
}
body.site-immersive .section-header h2::after { background: #ff624c; }
body.site-immersive h3 { color: #f4f5f0; letter-spacing: -.025em; }
body.site-immersive section img { border-radius: 24px; }
body.site-immersive section[style*="padding: 15px"] img { box-shadow: 0 30px 80px rgba(0,0,0,.34); }
body.site-immersive section[style*="padding: 15px"] .row { align-items: center; gap: 0; }
body.site-immersive section[style*="padding: 15px"] h3 { font-size: clamp(30px, 3vw, 46px) !important; }

body.site-immersive .why-us .img-bg { border-radius: 28px 0 0 28px; overflow: hidden; }
body.site-immersive .why-us .slides { border: 1px solid var(--si-line); border-left: 0; border-radius: 0 28px 28px 0; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
body.site-immersive .why-us .item h3,
body.site-immersive .why-us .item h4 { color: #f4f5f0; }
body.site-immersive .swiper-button-next,
body.site-immersive .swiper-button-prev { color: #ff624c; }
body.site-immersive .swiper-pagination-bullet-active { background: #ff624c; }

body.site-immersive .services .icon-box,
body.site-immersive .article-list .item,
body.site-immersive .features-blue .item,
body.site-immersive .testimonial-item,
body.site-immersive .contact-clean form,
body.site-immersive .pricingTable {
    height: 100%;
    padding: 30px !important;
    border: 1px solid var(--si-line) !important;
    border-radius: 24px !important;
    color: #f4f5f0;
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.022)) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,.2) !important;
}
body.site-immersive .services .icon-box:hover,
body.site-immersive .article-list .item:hover,
body.site-immersive .pricingTable:hover { border-color: rgba(255,98,76,.48) !important; transform: translateY(-7px); }
body.site-immersive .services .icon-box .icon,
body.site-immersive .features-blue .item .icon { color: #ff624c !important; }
body.site-immersive .services .title,
body.site-immersive .article-list .name,
body.site-immersive .pricingTable h3 { color: #f4f5f0 !important; }
body.site-immersive .article-list .item > a:first-child { display: block; margin: -30px -30px 27px; overflow: hidden; border-radius: 24px 24px 0 0; }
body.site-immersive .article-list .item img { width: 100%; height: 220px; border-radius: 0; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
body.site-immersive .article-list .item:hover img { transform: scale(1.05); }

body.site-immersive .features-blue {
    color: #101412 !important;
    background: #eff1e9 !important;
}
body.site-immersive .features-blue h2,
body.site-immersive .features-blue h3,
body.site-immersive .features-blue .title { color: #101412 !important; }
body.site-immersive .features-blue p,
body.site-immersive .features-blue .description { color: #5f675f !important; }
body.site-immersive .features-blue .item { border-color: rgba(0,0,0,.12) !important; background: rgba(255,255,255,.45) !important; box-shadow: none !important; }

body.site-immersive .highlight-blue,
body.site-immersive .highlight-clean {
    overflow: hidden;
    background: linear-gradient(120deg, rgba(255,98,76,.18), rgba(15,23,25,.9)) !important;
}
body.site-immersive .highlight-blue::before,
body.site-immersive .highlight-clean::before { content: ""; position: absolute; width: 430px; height: 430px; right: -110px; top: -180px; border: 1px solid rgba(255,98,76,.2); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,98,76,.025), 0 0 0 120px rgba(255,98,76,.018); }
body.site-immersive .highlight-blue h2,
body.site-immersive .highlight-clean h2,
body.site-immersive .highlight-clean h3 { color: #f4f5f0 !important; }
body.site-immersive .highlight-blue .btn,
body.site-immersive .highlight-clean .btn,
body.site-immersive .article-list .btn,
body.site-immersive .pricingTable .btn {
    padding: 13px 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #170a08 !important;
    background: #ff624c !important;
    font-weight: 800;
}

body.site-immersive .highlight-phone { color: #101412; background: #eff1e9 !important; }
body.site-immersive .highlight-phone h2,
body.site-immersive .highlight-phone h3 { color: #101412 !important; }
body.site-immersive .highlight-phone p { color: #5f675f !important; }

/* Formulaires */
body.site-immersive .contact-clean { background: transparent !important; }
body.site-immersive .contact-clean form { max-width: 760px; margin: auto; padding: clamp(28px, 5vw, 55px) !important; }
body.site-immersive .form-control,
body.site-immersive .form-select,
body.site-immersive textarea {
    min-height: 58px;
    padding: 15px 17px;
    border: 1px solid var(--si-line);
    border-radius: 14px;
    color: #f4f5f0;
    background: rgba(255,255,255,.055);
}
body.site-immersive textarea.form-control { min-height: 130px; }
body.site-immersive .form-control::placeholder { color: #868e89; }
body.site-immersive .form-control:focus,
body.site-immersive .form-select:focus { border-color: #ff624c; color: #f4f5f0; background: rgba(255,255,255,.075); box-shadow: 0 0 0 4px rgba(255,98,76,.1); }
body.site-immersive .form-select option { color: #111; }
body.site-immersive form .btn-danger,
body.site-immersive form button[type="submit"] { min-height: 55px; border: 0; border-radius: 999px; color: #170a08; background: #ff624c; font-weight: 800; }

/* Portfolio et tarifs */
body.site-immersive #portfolio { padding: 100px 18px !important; }
body.site-immersive #portfolio > .container-fluid { max-width: 1240px; margin: auto; }
body.site-immersive #portfolio .text-center h2 { color: #f4f5f0 !important; }
body.site-immersive #portfolio .text-center p { color: #aab1ad !important; }
body.site-immersive #portfolio .popup-gallery { gap: 18px 0; }
body.site-immersive .portfolio-box { position: relative; display: block; margin: 0 9px; border: 1px solid var(--si-line); border-radius: 22px; overflow: hidden; background: #080b0c; box-shadow: 0 22px 70px rgba(0,0,0,.24); }
body.site-immersive .portfolio-box img { width: 100%; height: 330px; border-radius: 0; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .5s ease; }
body.site-immersive .portfolio-box-caption { height: 58%; opacity: 1; background: linear-gradient(transparent, rgba(5,8,9,.96)) !important; }
body.site-immersive .portfolio-box-caption .portfolio-box-caption-content { top: auto; bottom: 24px; transform: none; text-align: left; }
body.site-immersive .portfolio-box-caption .project-category { margin-bottom: 7px; color: #ff806d; font-family: Manrope, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .09em; }
body.site-immersive .portfolio-box-caption .project-name { color: #fff; font-family: Manrope, sans-serif !important; font-size: clamp(20px, 2vw, 28px) !important; font-weight: 800; }
body.site-immersive .portfolio-box:hover img { transform: scale(1.045); filter: saturate(1.08); }
body.site-immersive .pricingTable { overflow: hidden; }
body.site-immersive .pricing-plans { margin-inline: -30px; background: rgba(255,98,76,.13) !important; }
body.site-immersive .pricing-plans { min-height: 125px; display: flex; align-items: center; justify-content: center; }
body.site-immersive .pricing-plans .price-value { color: #f4f5f0 !important; }
body.site-immersive .pricingContent li { color: #b7bdb8; border-color: var(--si-line) !important; }

/* FAQ, avis et footer historique */
body.site-immersive .accordion-item { border-color: var(--si-line); color: #f4f5f0; background: transparent; }
body.site-immersive .accordion-button { color: #f4f5f0; background: rgba(255,255,255,.05); }
body.site-immersive .accordion-button:not(.collapsed) { color: #ff806d; background: rgba(255,98,76,.08); }
body.site-immersive .testimonial-item p { color: #c9ceca; }
body.site-immersive .testimonial-item .stars { color: #ffd45c; }
body.site-immersive .testimonial-item img { border-color: #ff624c; }
body.site-immersive .footer-dark { padding-top: 76px; border-top: 1px solid var(--si-line); background: #030505 !important; }
body.site-immersive .footer-dark h3 { color: #f4f5f0; }
body.site-immersive .footer-dark p,
body.site-immersive .footer-dark li,
body.site-immersive .footer-dark a { color: #8f9792; }
body.site-immersive .footer-dark a:hover { color: #ff624c; }
body.site-immersive .footer-dark .social a { border: 1px solid var(--si-line); background: rgba(255,255,255,.05); opacity: 1; }
body.site-immersive .footer-dark .widget-title h3 { padding: 17px 0; border-bottom: 1px solid var(--si-line); cursor: pointer; font-size: 12px; letter-spacing: .05em; }
body.site-immersive .footer-dark .footer-links { max-height: 350px; overflow-y: auto; padding-right: 10px; }
body.site-immersive .footer-dark .footer-links li { padding-block: 5px; }
body.site-immersive .footer-dark .footer-links a { font-size: 11px; }
body.site-immersive .scroll-top { color: #170a08; background: #ff624c; }

.si-glow { position: fixed; z-index: -1; width: 480px; height: 480px; pointer-events: none; border-radius: 50%; opacity: .07; background: radial-gradient(circle, #ff624c, transparent 67%); filter: blur(25px); }
.si-float-label { position: absolute; z-index: 4; padding: 9px 13px; border: 1px solid var(--si-line); border-radius: 999px; color: #e7e9e5; background: rgba(7,11,12,.72); backdrop-filter: blur(12px); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; animation: siFloat 5s ease-in-out infinite; }
.si-float-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #c8ff66; }
.si-float-label--a { right: 11%; top: 30%; }
.si-float-label--b { right: 31%; bottom: 24%; animation-delay: -2.2s; }
.si-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.75,.2,1), transform .75s cubic-bezier(.2,.75,.2,1); }
.si-reveal.si-visible { opacity: 1; transform: none; }

@keyframes siOrb { 50% { transform: translateY(-15px) rotate(3deg); } }
@keyframes siFloat { 50% { transform: translateY(-10px); } }

@media (max-width: 980px) {
    body.site-immersive { padding-top: 84px; }
    body.site-immersive .breadcrumbs { margin-top: -84px; }
    body.site-immersive .breadcrumbs .page-header { min-height: 510px; padding-top: 150px; }
    body.site-immersive .breadcrumbs .page-header::before { width: 390px; right: -160px; opacity: .65; }
    body.site-immersive .breadcrumbs .page-header::after { right: -280px; opacity: .65; }
    body.site-immersive #hero.hero { margin-top: -84px; padding-top: 145px; }
    body.site-immersive #hero.hero::before { width: 390px; right: -180px; opacity: .58; }
    body.site-immersive #hero.hero::after { right: -330px; opacity: .65; }
    body.site-immersive #hero .col-lg-5 { display: none; }
    body.site-immersive .why-us .img-bg { min-height: 330px; border-radius: 24px 24px 0 0; }
    body.site-immersive .why-us .slides { border: 1px solid var(--si-line); border-radius: 0 0 24px 24px; }
}

@media (max-width: 640px) {
    body.site-immersive { padding-top: 78px; }
    body.site-immersive .breadcrumbs { margin-top: -78px; }
    body.site-immersive .breadcrumbs .page-header { min-height: 540px; padding: 145px 13px 105px; }
    body.site-immersive .breadcrumbs h1,
    body.site-immersive .breadcrumbs h2 { font-size: clamp(47px, 14vw, 66px); }
    body.site-immersive .breadcrumbs .page-header::before { width: 330px; right: -190px; top: 120px; }
    body.site-immersive .breadcrumbs .page-header::after { right: -390px; top: 240px; }
    body.site-immersive #hero.hero { min-height: 700px; margin-top: -78px; padding: 135px 0 65px; }
    body.site-immersive #hero h1 { font-size: clamp(45px, 13.5vw, 63px); }
    body.site-immersive #hero p { font-size: 16px; }
    body.site-immersive #hero .d-flex { flex-wrap: wrap; }
    body.site-immersive #hero .btn-get-started,
    body.site-immersive #hero .btn-watch-video { width: 100%; margin: 8px 0 0; justify-content: center; }
    body.site-immersive #hero .icon-boxes { margin-top: 30px; }
    body.site-immersive #hero .icon-boxes { display: none; }
    .si-float-label { display: none; }
    body.site-immersive section { padding-top: 72px; padding-bottom: 72px; }
    body.site-immersive .article-list .item,
    body.site-immersive .services .icon-box,
    body.site-immersive .pricingTable { margin-bottom: 18px; }
    body.site-immersive #portfolio { padding-inline: 7px !important; }
    body.site-immersive .portfolio-box img { height: 250px; }
    body.site-immersive .g-recaptcha { transform: scale(.88); transform-origin: left center; }
    .si-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .si-reveal { opacity: 1; transform: none; }
    .si-float-label, body.site-immersive .breadcrumbs .page-header::before, body.site-immersive #hero.hero::before { animation: none; }
}