/* ==========================================================================
   Dev2Motion — Custom Styles (consolidated)
   All custom styles for dev2motion.com, extracted from inline <style> blocks.
   Organised by scope: core (all pages) → page-specific.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORE — present on every page
   -------------------------------------------------------------------------- */

/* --- lang-switch --- */
.navbar_lang-wrapper { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; }
.navbar_lang { font-weight: 700; }
.navbar_lang.is-active { text-decoration: underline; text-decoration-color: var(--base-color-brand--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.navbar_lang-sep { opacity: .4; }

/* --- static-cleanup --- */
.loading_wrapper, .cursor-wrapper { display: none !important; }
[data-w-id] { opacity: 1 !important; transform: none !important; }
.hero_image-cover, .my-works_card-background, .recent-works_gradient { display: none !important; }
.button-hover_large-layer, .button-large_hover, .button_text-hover, .button-large_text-hover, .image_card-hover { display: none !important; }
html, body { cursor: auto !important; }

/* --- a11y --- */
.skip-link{position:fixed;left:.5rem;top:-4rem;z-index:2000;background:#161616;color:#fcfbf8;padding:.7rem 1.1rem;border:2px solid var(--base-color-brand--red);border-radius:0 0 8px 8px;font-weight:700;text-decoration:none;transition:top .15s;}
.skip-link:focus{top:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--base-color-brand--red)!important;outline-offset:2px!important;}
#main-content:focus{outline:none!important;}
.navbar_lang{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;}
.footer-bottom_links-item{display:inline-flex;align-items:center;min-height:24px;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}

/* --- typo-fix --- */
.heading-style-h1 { font-size: clamp(2.25rem, 8vw, 6.5rem) !important; line-height: 1.15 !important; padding-bottom: 0.04em; }
.heading-style-h2 { font-size: clamp(1.75rem, 5.5vw, 4.5rem) !important; }

/* --- cta-fix --- */
.footer-button_wrapper .button-large_wrapper { border: 2px solid #161616 !important; }
.footer-button_wrapper .button-large_wrapper .button-large_text { color: #161616 !important; }

/* --- logo-hover --- */
.navbar_logo a.w-inline-block { position: relative; display: inline-block; line-height: 0; }
.navbar_logo .logo-white, .navbar_logo .logo-color { transition: opacity .3s ease; vertical-align: top; }
.navbar_logo .logo-color { position: absolute; left: 0; top: 0; opacity: 0; }
.navbar_logo a:hover .logo-white, .navbar_logo a:focus-within .logo-white { opacity: 0; }
.navbar_logo a:hover .logo-color, .navbar_logo a:focus-within .logo-color { opacity: 1; }

/* --- btn-hover --- */
.button-large_wrapper { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.button-large_wrapper:hover { background-color: var(--base-color-brand--red, #d93401) !important; border-color: var(--base-color-brand--red, #d93401) !important; color: #fcfbf8 !important; }
.button-large_wrapper:hover .button-large_text, .button-large_wrapper:hover .button_text { color: #fcfbf8 !important; }

/* --- to-top-style --- */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fcfbf8; background: #161616; color: #fcfbf8; display: grid; place-items: center; cursor: pointer; padding: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, background-color .2s ease, border-color .2s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--base-color-brand--red, #d93401); border-color: var(--base-color-brand--red, #d93401); }
.to-top svg { width: 1.15rem; height: 1.15rem; }

/* --- nav-underline --- */
.navbar_menu > .navbar_link { position: relative; }
.navbar_menu > .navbar_link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; }
.navbar_menu > .navbar_link:hover::after, .navbar_menu > .navbar_link.w--current::after { transform: scaleX(1); }

/* --- nav-cta --- */
.navbar_cta { padding: .45rem 1.05rem; border-radius: 999px; background: var(--base-color-brand--red, #d93401); color: #fcfbf8 !important; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.navbar_cta::after { content: none !important; }
.navbar_cta:hover, .navbar_cta:focus-visible { background: #fcfbf8; color: #161616 !important; }

/* --- mobile-menu --- */
.nav-burger { display: none; }
@media (max-width: 1100px) {
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; position: relative; z-index: 1200; }
  .nav-burger span { display: block; height: 2px; width: 100%; background: #fcfbf8; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navbar_menu { position: fixed; inset: 0; background: #161616; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.75rem; transform: translateX(100%); transition: transform .35s ease; z-index: 1100; padding: 2rem; }
  .navbar_menu.is-open { transform: none; }
  .navbar_menu > .navbar_link { font-size: 2rem; }
  .navbar_cta { font-size: 1.2rem; padding: .7rem 1.7rem; }
  .navbar_lang-wrapper { margin-left: 0; margin-top: .5rem; }
  .navbar_lang { font-size: 1.15rem; }
}

/* --- logo-vt --- */
.navbar_logo .image-2 { width: 168px !important; max-width: 168px !important; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }

/* --- nav-zfix --- */
.navbar_component { z-index: 1000 !important; }
@media (max-width: 1100px) { .navbar_menu { z-index: 1400; } .nav-burger { z-index: 1500; } }

/* --- reveal-style --- */
@media (prefers-reduced-motion: no-preference) {
  .r-up { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  .r-up.is-vis { opacity: 1; transform: none; }
  .r-fade { opacity: 0; transition: opacity .8s ease; will-change: opacity; }
  .r-fade.is-vis { opacity: 1; }
  .r-zoom { opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  .r-zoom.is-vis { opacity: 1; transform: none; }
}

/* --- wire-mobile-fix --- */
@media (max-width: 767px){ .heading-style-h1.is-wire, .heading-style-h2.is-wire, .heading-style-h2.is-absolute.is-wire{ -webkit-text-stroke-width:0.7px !important; } }
@media (max-width: 479px){ .heading-style-h1.is-wire, .heading-style-h2.is-wire, .heading-style-h2.is-absolute.is-wire{ -webkit-text-stroke-width:0.6px !important; } }

/* --- n8n-chat-style --- */
:root {
  --chat--color-primary: #d93401;
  --chat--color-primary-shade-50: #c22e01;
  --chat--color-primary-shade-100: #ab2901;
  --chat--toggle--background: #d93401;
  --chat--toggle--hover--background: #c22e01;
  --chat--toggle--active--background: #ab2901;
  --chat--header--background: #161616;
  --chat--header--color: #fcfbf8;
  --chat--window--width: 380px;
}
.to-top { left: 1.25rem !important; right: auto !important; }
.n8n-chat .chat-message-from-bot, .n8n-chat .chat-message-from-bot * { color: #161616 !important; }
.n8n-chat .chat-message-from-user, .n8n-chat .chat-message-from-user * { color: #ffffff !important; }
.n8n-chat textarea, .n8n-chat input { color: #161616 !important; }
.n8n-chat textarea::placeholder, .n8n-chat input::placeholder { color: #6b7280 !important; }


/* --------------------------------------------------------------------------
   2. HOMEPAGE — index.html, index-fr.html
   -------------------------------------------------------------------------- */

/* --- home-add --- */
.section_home-add { background: #161616; color: #fcfbf8; }
.section_home-add.is-light { background: #f8f6f2; color: #161616; }
.home-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; }
.home-eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--base-color-brand--red, #d93401); }
.home-h2 { font-size: clamp(1.9rem, 4.5vw, 3.3rem); font-weight: 700; line-height: 1.12; margin: 0 0 1.1rem; max-width: 22ch; }
.home-lead { opacity: .85; max-width: 62ch; line-height: 1.7; margin: 0 0 2.6rem; font-size: 1.05rem; }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .home-grid { grid-template-columns: 1fr; } }
.home-card { border: 1px solid rgba(252,251,248,.16); border-radius: 14px; padding: 1.6rem; }
.home-card h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 .5rem; }
.home-card p { margin: 0; opacity: .82; line-height: 1.6; }
.home-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .home-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .home-steps { grid-template-columns: 1fr; } }
.home-step .step-num { display: block; font-size: 2rem; font-weight: 800; color: var(--base-color-brand--red, #d93401); line-height: 1; margin-bottom: .55rem; }
.home-step h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 .4rem; }
.home-step p { margin: 0; opacity: .82; line-height: 1.6; }
.home-aeo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
@media (max-width: 820px) { .home-aeo { grid-template-columns: 1fr; } }
.home-aeo-stat { border: 1px solid rgba(252,251,248,.16); border-radius: 16px; padding: 2.2rem; text-align: center; }
.home-aeo-stat .big { font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 800; color: var(--base-color-brand--red, #d93401); line-height: 1; }
.home-aeo-stat .cap { opacity: .85; line-height: 1.6; margin: .75rem 0 0; }
.home-faq { max-width: 60rem; margin: 0 auto; }
.home-faq details { border-top: 1px solid rgba(252,251,248,.16); padding: 1.15rem 0; }
.home-faq details:last-child { border-bottom: 1px solid rgba(252,251,248,.16); }
.home-faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: "+"; color: var(--base-color-brand--red, #d93401); font-size: 1.6rem; line-height: 1; }
.home-faq details[open] summary::after { content: "\2013"; }
.home-faq summary:focus-visible { outline: 3px solid var(--base-color-brand--red, #d93401); outline-offset: 4px; border-radius: 2px; }
.home-faq details p { opacity: .85; line-height: 1.7; margin: .85rem 0 0; max-width: 62ch; }
.home-cta { text-align: center; }
.home-cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; margin: 0 0 1.8rem; }
.home-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 48px; border: 2px solid #161616; border-radius: 150px; color: #161616; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background .2s, color .2s; }
.home-btn:hover { background: #161616; color: #fcfbf8; }
.home-btn:focus-visible { outline: 3px solid var(--base-color-brand--red, #d93401); outline-offset: 2px; }

/* --- home-add-light --- */
.section_home-add.is-light .home-card { border-color: rgba(22,22,22,.18); }
.section_home-add.is-light .home-aeo-stat { border-color: rgba(22,22,22,.18); }
.section_home-add.is-light .home-faq details { border-color: rgba(22,22,22,.18); }

/* --- home-add-contrast --- */
.section_home-add .home-eyebrow, .section_home-add .home-h2,
.section_home-add .home-card h3, .section_home-add .home-card p,
.section_home-add .home-step h3, .section_home-add .home-step p,
.section_home-add .home-lead, .section_home-add .home-aeo-stat .cap,
.section_home-add .home-faq summary, .section_home-add .home-faq details p { color: #fcfbf8 !important; }
.section_home-add.is-light .home-eyebrow, .section_home-add.is-light .home-h2,
.section_home-add.is-light .home-card h3, .section_home-add.is-light .home-card p,
.section_home-add.is-light .home-step h3, .section_home-add.is-light .home-step p,
.section_home-add.is-light .home-lead, .section_home-add.is-light .home-aeo-stat .cap,
.section_home-add.is-light .home-faq summary, .section_home-add.is-light .home-faq details p { color: #161616 !important; }

/* --- hero-tagline --- */
.hero_tagline { color: #fcfbf8; opacity: .9; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.5; max-width: 42ch; margin: 1.25rem 0 0; }
.hero_tagline-2 { display: inline-flex; align-items: center; gap: .55rem; margin-top: .55rem; font-size: clamp(.95rem, 1.7vw, 1.15rem); opacity: 1; }
.hero_tagline-2::before { content: ""; width: 1.3rem; height: 2px; background: var(--base-color-brand--red, #d93401); flex: none; }

/* --- hero-fix --- */
.section_hero .heading-style-h4 { max-width: 33rem; }
.section_hero .hero_button-wrapper { margin-top: 1.75rem; }

/* --- method-timeline --- */
.home-steps { display: flex !important; flex-direction: column; grid-template-columns: none !important; gap: 0; max-width: 46rem; }
.home-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.4rem; padding-bottom: 2.6rem; position: relative; }
.home-step:last-child { padding-bottom: 0; }
.home-step::before { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.1rem; bottom: 0; width: 2px; background: rgba(252,251,248,.18); }
.home-step:last-child::before { content: none; }
.home-step .step-num { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; font-weight: 800; color: #fcfbf8 !important; background: var(--base-color-brand--red, #d93401); margin: 0 !important; position: relative; z-index: 1; }
.home-step-body { padding-top: .35rem; }
.home-step-body h3 { font-size: 1.3rem; margin: 0 0 .45rem; }
.home-step-body p { margin: 0; }
@media (min-width: 768px) {
  .home-steps { max-width: 62rem; margin-left: auto; margin-right: auto; position: relative; }
  .home-steps::before { content: ""; position: absolute; left: 50%; top: 1.5rem; bottom: 1.5rem; width: 2px; background: rgba(252,251,248,.18); transform: translateX(-50%); }
  .home-step { grid-template-columns: 1fr 3rem 1fr; column-gap: 2.2rem; align-items: center; padding-bottom: 3rem; }
  .home-step::before { content: none; }
  .home-step .step-num { grid-column: 2; grid-row: 1; }
  .home-step:nth-child(odd) .home-step-body { grid-column: 1; grid-row: 1; text-align: right; padding-top: 0; }
  .home-step:nth-child(even) .home-step-body { grid-column: 3; grid-row: 1; text-align: left; padding-top: 0; }
}

/* --- faq-anim --- */
:root { interpolate-size: allow-keywords; }
.home-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .32s ease, content-visibility .32s allow-discrete; }
.home-faq details[open]::details-content { block-size: auto; }
.section_home-add .home-faq details p { background: #ffffff !important; color: #161616 !important; padding: 1rem 1.25rem; border-radius: 10px; margin: .85rem 0 .15rem; max-width: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .home-faq details::details-content { transition: none; } }

/* --- hero-cta --- */
.hero_button-wrapper { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero_cta-primary { display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1.5rem; border: 2px solid transparent; box-sizing: border-box; border-radius: 999px; background: var(--base-color-brand--red, #d93401); color: #fcfbf8; font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.hero_cta-primary:hover, .hero_cta-primary:focus-visible { background: #fcfbf8; color: #161616; }
.hero_button-wrapper .button-large_wrapper.is-small { padding: .72rem 1.5rem !important; font-size: 1rem !important; line-height: 1 !important; }
.hero_cta-primary { line-height: 1; }

/* --- preloader-style --- */
#preloader { position: fixed; inset: 0; z-index: 4000; background: #004A9F; display: grid; place-items: center; }
html.pl-skip #preloader { display: none !important; }
#preloader .pl-logo { width: min(80vw, 560px); height: auto; overflow: visible; }
#preloader .pl-logo path { stroke-dasharray: 1; fill: #ffffff; fill-opacity: 0; animation: pl-draw 1.0s ease forwards, pl-fill .3s ease .85s forwards; }
#preloader .pl-p1 { stroke-dashoffset: 1; }
#preloader .pl-p2 { stroke-dashoffset: 1; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-fill { to { fill-opacity: 1; } }
#preloader { animation: pl-up .6s cubic-bezier(.76,0,.24,1) 1.35s forwards; }
@keyframes pl-up { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { #preloader { display: none !important; } }

/* --- recent-img --- */
.recent-works_card-image { width: min(52vw, 700px) !important; aspect-ratio: 1.22 !important; height: auto !important; object-fit: cover !important; border-radius: 12px; }

/* --- skills-marquee --- */
.section_skills, .skills_component { overflow: hidden; }
.skills_wrapper { animation: skills-marquee 38s linear infinite; will-change: transform; }
.skills_component:hover .skills_wrapper, .skills_wrapper:focus-within { animation-play-state: paused; }
@keyframes skills-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .skills_wrapper { animation: none; } }

/* --- recent-center --- */
@media (max-width: 940px) {
  .recent-works_card-content.is-right { justify-content: center !important; }
  .recent-works_card-content .heading-style-h2.is-absolute { left: 0 !important; }
}
@media (hover: hover) and (min-width: 941px) {
  .recent-works_card-image { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .recent-works_card-component:hover .recent-works_card-image { transform: scale(1.04); }
}

/* --- hero-anim --- */
.section_hero .padding-medium { padding-top: 0 !important; }
.section_hero .hero_tagline { font-size: clamp(1.2rem, 2.4vw, 1.7rem) !important; margin-top: .5rem !important; }
.section_hero .hero_tagline.hero_tagline-2 { font-size: clamp(1rem, 1.9vw, 1.25rem) !important; margin-top: .55rem !important; }
.section_hero .hero_decoration-top { opacity: .2 !important; }
.section_hero .hero_decoration-middle { opacity: .35 !important; }
@media (min-width: 941px) { .hero_image-wrapper { width: clamp(300px, 30vw, 356px) !important; top: 1.25rem !important; } .hero-image { width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: cover !important; } }
@media (max-width: 940px) { .hero_image-wrapper, .section_hero .hero_decoration-top, .section_hero .hero_decoration-middle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .section_hero .circle-01 { animation: hero-spin-cw 42s linear infinite; }
  .section_hero .circle-02 { animation: hero-spin-ccw 34s linear infinite; }
}
@keyframes hero-spin-cw { to { transform: rotate(360deg); } }
@keyframes hero-spin-ccw { to { transform: rotate(-360deg); } }
.section_hero .heading-style-h4,
.section_hero .hero_heading-wrapper,
.section_hero .hero_tagline,
.section_hero .hero_button-wrapper {
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.section_hero .hero_heading-wrapper { transition-delay: .08s; }
.section_hero .hero_tagline { transition-delay: .16s; }
.section_hero .hero_button-wrapper { transition-delay: .26s; }
html.hero-armed .section_hero .heading-style-h4,
html.hero-armed .section_hero .hero_heading-wrapper,
html.hero-armed .section_hero .hero_tagline,
html.hero-armed .section_hero .hero_button-wrapper {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}
.hero_image-wrapper .hero_image-cover {
  display: block !important; position: absolute; inset: 0; width: 100%; height: 100%;
  background: #000506; z-index: 2; opacity: 0; pointer-events: none;
  transition: opacity .9s ease .15s;
}
html.hero-armed .hero_image-wrapper .hero_image-cover { opacity: 1; transition: none; }

/* --- ido-aeo --- */
.i-do_card-component.is-6 { margin-bottom: 2rem; }
.i-do_card-component.is-7 { top: 17rem; margin-bottom: 0; }
@media (max-width: 991px){ .i-do_card-component.is-7 { top: 11rem; } }
@media (max-width: 767px){
  .i-do_card-component,
  .i-do_card-component.is-2, .i-do_card-component.is-3, .i-do_card-component.is-4,
  .i-do_card-component.is-5, .i-do_card-component.is-6, .i-do_card-component.is-7 {
    position: static !important; top: auto !important; margin-bottom: 1.5rem !important;
  }
  .i-do_card-component.is-7 { margin-bottom: 0 !important; }
}

/* --- sec-wire --- */
.sec-title{ font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; -webkit-text-fill-color:transparent; -webkit-text-stroke-width:2px; font-weight:700; line-height:1.02; text-transform:uppercase; margin:0 0 1.8rem; font-size:clamp(2.25rem,8vw,6.5rem); letter-spacing:-.01em; }
.section_home-add:not(.is-light) .sec-title{ color:#fcfbf8; -webkit-text-stroke-color:#fcfbf8; }
.section_home-add:not(.is-light) .sec-title .wire-lead{ -webkit-text-fill-color:#fcfbf8; color:#fcfbf8; }
.section_home-add.is-light .sec-title{ color:#161616; -webkit-text-stroke-color:#161616; }
.section_home-add.is-light .sec-title .wire-lead{ -webkit-text-fill-color:#161616; color:#161616; }
.section_home-add.steps-cards .home-step-body{ background:#fcfbf8; border-radius:14px; padding:2rem 1.6rem; text-align:left !important; }
.section_home-add.steps-cards .home-step-body h3, .section_home-add.steps-cards .home-step-body p{ color:#161616 !important; }
@media (max-width:767px){ .sec-title{ -webkit-text-stroke-width:0.9px; } }

/* --- why-me-style --- */
.why-me { background:#fcfbf8; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.why-card { border:1px solid rgba(22,22,22,.12); border-radius:14px; padding:1.5rem; background:#161616; color:#fcfbf8; }
.why-card .why-ic { color:var(--base-color-brand--red,#d93401); font-size:1.3rem; margin-bottom:.5rem; line-height:1; }
.why-card h3 { font-size:1.15rem; margin:0 0 .5rem; color:#fcfbf8; }
.why-card p { margin:0; opacity:.85; line-height:1.6; font-size:.98rem; color:#fcfbf8; }


/* --------------------------------------------------------------------------
   3. ABOUT — about.html, about-fr.html
   -------------------------------------------------------------------------- */

/* --- header-spacing (shared with works) --- */
.section_works-title .padding-section-medium, .section_about .padding-section-medium { padding-top: clamp(7rem, 14vh, 9.5rem) !important; }

/* --- cert-style --- */
.section_certs { background: #161616; }
.cert-eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#fcfbf8; font-weight:700; margin:0 0 .7rem; }
.cert-eyebrow::before { content:""; width:1.6rem; height:2px; background:var(--base-color-brand--red,#d93401); }
.cert-h2 { font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#fcfbf8; -webkit-text-fill-color:transparent; -webkit-text-stroke:2px #fcfbf8; font-size:clamp(2.25rem,8vw,6.5rem); line-height:1.02; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 2rem; }
.cert-h2 .wire-lead{ -webkit-text-fill-color:#fcfbf8; }
@media (max-width:767px){ .cert-h2{ -webkit-text-stroke-width:0.9px; } }
.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cert-grid{ grid-template-columns:1fr; } }
.cert-card { display:flex; align-items:center; gap:1rem; border:1px solid rgba(252,251,248,.16); border-radius:14px; padding:1.25rem 1.4rem; background:rgba(252,251,248,.02); }
.cert-logo { width:46px; height:46px; border-radius:9px; object-fit:cover; flex-shrink:0; background:#fff; }
.cert-body { min-width:0; }
.cert-name { color:#fcfbf8; font-weight:700; line-height:1.35; margin:0 0 .5rem; }
.cert-org { color:#fcfbf8; opacity:.7; font-size:.92rem; }


/* --------------------------------------------------------------------------
   4. WORKS — works.html, works-fr.html
   -------------------------------------------------------------------------- */

/* --- works-hover --- */
.my-works_card-component { border-radius: 14px; cursor: pointer; transition: transform .25s ease, background-color .3s ease; }
.my-works_card-component .card-arrow { transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .my-works_card-component .image_card-wrapper { opacity: 0; transform: translateX(28px) rotate(3deg); transition: opacity .4s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
  .my-works_card-component:hover .image_card-wrapper { opacity: 1; transform: translateX(0) rotate(0); }
  .my-works_card-component:hover { background-color: rgba(252,251,248,.05); }
  .my-works_card-component:hover .card-arrow { transform: rotate(-45deg); }
  .my-works_card-component .image_card { box-shadow: 0 0 0 0 rgba(252,251,248,0); transition: box-shadow .4s ease; }
  .my-works_card-component:hover .image_card { box-shadow: 0 0 0 2px #fcfbf8; }
}
@media (hover: none), (max-width: 767px) {
  .my-works_card-component .image_card-wrapper { display: none; }
}

/* --- philo-style --- */
.section_philosophy { background: #161616; color: #fcfbf8; }
.philo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .philo-grid { grid-template-columns: 1fr; } }
.philo-media { border-radius: 16px; overflow: hidden; }
.philo-img { width: 100%; height: auto; object-fit: contain; display: block; }
.philo-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.1rem; }
.philo-eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--base-color-brand--red, #d93401); }
.philo-quote { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.25; margin: 0; }


/* --------------------------------------------------------------------------
   5. CONTACT — contact.html, contact-fr.html
   -------------------------------------------------------------------------- */

/* --- form-enhance --- */
.form_error {
  display: none;
  color: var(--base-color-brand--red);
  font-size: .85rem;
  line-height: 1.4;
  margin: -.5rem 0 .75rem;
}
.form_field-wrapper.is-invalid .form_error { display: block; }
.form_input.is-invalid,
.textarea.is-invalid { border-color: var(--base-color-brand--red); }
.form_counter { float: right; font-size: .8rem; font-weight: 400; opacity: .55; }
.form_hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form_banner {
  display: none;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: .95rem;
  font-weight: 600;
}
.form_banner.is-shown { display: block; }
.form_banner.is-ok {
  color: #0f7d4d;
  background: rgba(63, 207, 142, .14);
  border: 1px solid rgba(63, 207, 142, .4);
}
.form_banner.is-ko {
  color: var(--base-color-brand--red);
  background: rgba(229, 72, 77, .12);
  border: 1px solid rgba(229, 72, 77, .4);
}
.form_note { font-size: .82rem; opacity: .6; margin-top: .75rem; }

/* --- contact-underline --- */
.contact-line { position: relative; display: inline-block; text-decoration: none; color: inherit; }
.contact-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--base-color-brand--red, #d93401); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
.contact-line:hover::after, .contact-line:focus-visible::after { transform: scaleX(1); }


/* --------------------------------------------------------------------------
   6. PROJECT PAGES — fiches (tasty-drink, mackenheim, garage-parrot, my-garden)
   -------------------------------------------------------------------------- */

/* --- fiche-todo --- */
.fiche-todo { background: rgba(217,52,1,.2); color: #fcfbf8; padding: .05rem .45rem; border-radius: 4px; border: 1px solid var(--base-color-brand--red, #d93401); font-weight: 700; }
.project-image[src$="project-placeholder.svg"] { background: #eef3f9; }

/* --- fiche-aeo --- */
.fiche-aeo { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; background: #ffffff; border-radius: 16px; padding: 2rem; margin-top: 1.6rem; }
.fiche-aeo-stat { font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; color: var(--base-color-brand--red, #d93401); line-height: 1; }
.fiche-aeo-text { flex: 1; min-width: 220px; }
.fiche-aeo-text p { color: #161616 !important; opacity: 1; line-height: 1.7; margin: .4rem 0 0; }
.fiche-aeo .project_headers_small { color: #161616 !important; }

/* --- fiche-crumb-style --- */
.fiche-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.9rem; margin-bottom:1.6rem; }
.fiche-crumb a { color:#fcfbf8; opacity:.7; text-decoration:none; }
.fiche-crumb a:hover, .fiche-crumb a:focus-visible { opacity:1; text-decoration:underline; text-decoration-color:var(--base-color-brand--red,#d93401); text-underline-offset:3px; }
.fiche-crumb span[aria-hidden] { opacity:.4; }
.fiche-crumb span[aria-current] { opacity:.55; }

/* --- other-style --- */
.section_other { background:#161616; border-top:1px solid rgba(252,251,248,.1); }
.other-h2 { font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; font-size:clamp(2.25rem,8vw,6.5rem)!important; line-height:1.02; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 2rem; }
.section_other .heading-style-h2.is-wire { -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #fcfbf8; color: transparent; }
.section_other .heading-style-h2.is-wire .is-white { -webkit-text-fill-color: #fcfbf8; -webkit-text-stroke: 0; }
.other-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .other-grid{ grid-template-columns:1fr; } }
.other-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; margin-bottom:1rem; }
.other-card { display:flex; flex-direction:column; gap:.4rem; padding:1.6rem; border:1px solid rgba(252,251,248,.16); border-radius:14px; text-decoration:none; transition:background-color .25s ease, transform .25s ease; }
.other-card:hover, .other-card:focus-visible { background:rgba(252,251,248,.05); transform:translateY(-3px); }
.other-type { color:#fcfbf8; opacity:.6; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.other-name { color:#fcfbf8; font-size:1.4rem; font-weight:700; }

/* --- screens-style --- */
.project_desktop-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:768px){ .project_desktop-gallery { grid-template-columns:1fr; } }
.project_desktop-gallery img { width:100%; height:auto; border-radius:10px; display:block; }

/* --- lightbox-style --- */
.project-image { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 5000; background: rgba(10,10,12,.93); display: none; align-items: center; justify-content: center; }
.lightbox[aria-hidden="false"] { display: flex; }
.lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(252,251,248,.12); color: #fcfbf8; border: 0; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; transition: background-color .2s ease; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover, .lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { background: var(--base-color-brand--red, #d93401); }
.lb-close { top: 1.25rem; right: 1.25rem; }
.lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #fcfbf8; opacity: .8; font-size: .9rem; }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next, .lightbox.is-single .lb-counter { display: none; }


/* --------------------------------------------------------------------------
   7. LEGAL / 404
   -------------------------------------------------------------------------- */

/* --- legal-styles --- */
.section_legal { padding-top: 6rem; }
.legal_wrap { max-width: 46rem; margin: 0 auto; }
.legal_title { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .4rem; }
.legal_meta { opacity: .55; margin: 0 0 2.4rem; font-size: .95rem; }
.legal_h2 { font-size: 1.3rem; font-weight: 700; margin: 2.4rem 0 .7rem; }
.legal_p { line-height: 1.7; margin: 0 0 1rem; opacity: .92; }
.legal_list { line-height: 1.7; margin: 0 0 1rem; padding-left: 1.2rem; opacity: .92; }
.legal_list li { margin-bottom: .35rem; }
.legal_link { color: #fcfbf8; text-decoration: underline; text-decoration-color: var(--base-color-brand--red); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.legal_todo {
  background: rgba(217, 52, 1, .2);
  color: #fcfbf8;
  padding: .05rem .45rem;
  border-radius: 4px;
  border: 1px solid var(--base-color-brand--red);
  font-weight: 700;
  font-size: .92em;
}

/* --- btn-404 --- */
.btn-404 { display:inline-flex; align-self:center; align-items:center; justify-content:center; padding:.7rem 1.7rem; border-radius:999px; border:2px solid #fcfbf8; color:#fcfbf8; font-weight:700; text-decoration:none; transition:background-color .2s ease, color .2s ease; }
.btn-404:hover, .btn-404:focus-visible { background:#fcfbf8; color:#161616; }