/* ========================================================================= BA Renovation - UI layer. Tokens per DESIGN.md "BA Renovation - Swiss red & ink". No box-shadows anywhere: depth = background contrast only. ========================================================================= */ :root{ --red:#DB2A1B; --green:#177A43; --grey:#8C9196; --rule:#D6D9DC; --rule-dark:rgba(255,255,255,0.16); --warm:#F2EFE9; --ink:#15181B; --hero-dark:#1E1F1D; --body:#6A6A6A; --white:#FFFFFF; --off-white:#F8F8F8; --field:#F5F5F5; --border-grey:#ECECEC; --chip-border:#E4E4E4; --track:#EAEAEA; --img-ph:#E8E8E6; --ph-text:#9A9A9A; --r-sm:3px; --r-md:10px; --pad-x:clamp(16px,3vw,40px); --pad-y:clamp(70px,9vw,120px); --maxw:1320px; --font:'Poppins','Helvetica Neue',Arial,sans-serif; --ba-topbar-h:46px; } html,body{overflow-x:clip} body{ margin:0; background:var(--white); color:var(--body); font-family:var(--font); font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased; text-wrap:pretty; } img{max-width:100%} input,select,textarea,button{font-family:inherit;font-size:inherit} input::placeholder,textarea::placeholder{color:var(--ph-text);opacity:1} [id]{scroll-margin-top:84px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:100} .skip:focus{left:0} .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--red);outline-offset:2px} /* Elementor adds a default gap between container children; our bars manage their own. */ /* ---- Buttons (shared + Elementor button widgets) ---- */ .btn, .ba-btn .elementor-button{ display:inline-block;border:0;border-radius:var(--r-sm);padding:17px 34px; font-size:16px;line-height:23px;font-weight:500;text-decoration:none;cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; } .btn--primary, .ba-btn-red .elementor-button{background:var(--red);color:var(--white)} .btn--primary:hover, .ba-btn-red .elementor-button:hover{background:var(--ink);color:var(--white)} .ba-btn-red.ba-on-dark .elementor-button:hover{background:var(--white);color:var(--red)} .ba-btn-nav .elementor-button{padding:14px 30px} .ba-btn-dark .elementor-button{background:var(--ink);color:var(--white)} .ba-btn-dark .elementor-button:hover{background:var(--red);color:var(--white)} .btn--ghost, .ba-btn-ghost .elementor-button{background:transparent;border:1px solid rgba(255,255,255,0.6);color:var(--white);padding:16px 34px} .btn--ghost:hover, .ba-btn-ghost .elementor-button:hover{background:var(--white);border-color:var(--white);color:var(--red)} .btn--secondary{background:transparent;border:1px solid rgba(21,24,27,0.15);color:var(--ink);padding:16px 26px} .btn--secondary:hover{background:var(--ink);border-color:var(--ink);color:var(--white)} .ba-btn .elementor-button:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* ---- Utility bar ---- */ .ba-topbar-wrap.e-con{padding:0;background:var(--ink)} .topbar{ background:var(--ink);color:var(--white);padding:11px var(--pad-x); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px 28px;font-size:14px;line-height:24px;width:100%; } .topbar__group{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px} .topbar__group--phones{gap:12px 22px} .topbar__item{display:flex;align-items:center;gap:9px} .topbar a{color:var(--white);text-decoration:none;transition:color .2s ease} .topbar a:hover{color:var(--red)} .topbar__strong{font-weight:600} .topbar :focus-visible{outline-color:var(--white)} /* ---- Header ---- */ #masthead, .ehf-header #masthead{position:sticky;top:calc(-1 * var(--ba-topbar-h));z-index:99;background:var(--white)} [hidden]{display:none!important} /* Theme fallback footer stays hidden until the real footer template lands. */ body.ba .site-footer{display:none} .ba-header-inner.e-con{ background:var(--white);border-bottom:1px solid var(--border-grey); padding:16px var(--pad-x); display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px; } #masthead .ba-header-inner > *{width:auto;max-width:none;flex:0 0 auto} #masthead .ba-header-inner > .elementor-widget-shortcode{flex:0 1 auto;min-width:0} .ba-logo img{height:36px!important;width:auto!important} .ba-header-actions.e-con{display:flex;flex-direction:row;align-items:center;gap:14px;padding:0;width:auto} .ba-nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,32px);font-size:16px;font-weight:500} .ba-nav__link{color:var(--ink);text-decoration:none;transition:color .2s ease} .ba-nav__link:hover{color:var(--red)} .ba-nav__link.is-active{font-weight:600;border-bottom:2px solid var(--red);padding-bottom:4px} .burger{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer} .burger span, .burger span::before, .burger span::after{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:transform .2s ease,opacity .2s ease;content:""} .burger span::before{position:absolute;top:-7px} .burger span::after{position:absolute;top:7px} @media (max-width:960px){ .ba-nav{display:none} .burger{display:inline-flex} .ba-cta-desktop{display:none} } /* ---- Mobile overlay ---- */ .ba-mobile{ position:fixed;inset:0 0 0 auto;width:min(340px,88vw);z-index:60;background:var(--white); display:flex;flex-direction:column;padding:20px 24px 28px;overflow:auto; transform:translateX(100%);transition:transform .3s ease;visibility:hidden; } .ba-mobile.is-open{transform:translateX(0);visibility:visible} .ba-mobile__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .ba-mobile__close{background:transparent;border:0;font-size:34px;line-height:1;color:var(--ink);cursor:pointer;width:44px;height:44px} .ba-mobile nav ul{list-style:none;margin:0;padding:0} .ba-mobile nav a{display:flex;align-items:center;min-height:46px;color:var(--ink);text-decoration:none;font-size:17px;font-weight:500;border-bottom:1px solid var(--border-grey)} .ba-mobile nav a:hover{color:var(--red)} .ba-mobile__foot{margin-top:22px;display:flex;flex-direction:column;gap:10px;font-size:15px} .ba-mobile__foot .phone{color:var(--ink);text-decoration:none;font-weight:500} .ba-mobile__foot address{font-style:normal;color:var(--body)} .ba-mobile__foot .btn{text-align:center;margin-top:6px} /* ---- Hero ---- */ .ba-hero.e-con{ position:relative;background:var(--hero-dark);overflow:hidden;display:block; padding:clamp(64px,8vw,120px) var(--pad-x); } .ba-hero .elementor-widget-ba_hero_slider{position:static!important;width:100%} .ba-hero .elementor-widget-ba_hero_slider .elementor-widget-container{position:static} .ba-slides img, img.ba-slide{ position:absolute!important;inset:0;width:100%!important;height:100%!important; max-width:100%;object-fit:cover; opacity:0;transition:opacity 1s ease;pointer-events:none; } img.ba-slide.is-active{opacity:1} .ba-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,31,29,0.62) 0%,rgba(30,31,29,0.30) 44%,rgba(30,31,29,0.04) 76%,rgba(30,31,29,0) 100%);pointer-events:none} .ba-wedge{position:absolute;left:0;right:0;bottom:0;height:130px;background:var(--red);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none} .ba-hero-inner.e-con{ position:relative;max-width:min(var(--maxw),100%);margin:0 auto;padding:0;width:100%;min-width:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:clamp(40px,4vw,60px);align-items:center; } @media (max-width:767px){ .ba-hero-inner.e-con{grid-template-columns:100%} } .ba-hero-copy.e-con{position:relative;z-index:9;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0} .ba-hero-copy > .elementor-widget{width:auto;max-width:100%;min-width:0} .ba-hero-copy .elementor-heading-title{overflow-wrap:break-word} /* The scrim is light so the photograph reads; the copy carries its own contrast. */ .ba-hero-copy .elementor-heading-title, .ba-hero-copy p, .hero-ctrl__label{text-shadow:0 2px 20px rgba(12,14,16,0.80),0 1px 3px rgba(12,14,16,0.55)} .ba-eyebrow .elementor-heading-title{font-size:18px;line-height:28px;font-weight:600;color:var(--white)} .ba-eyebrow{margin-bottom:24px} .ba-h1 .elementor-heading-title{ font-size:clamp(38px,4.4vw,60px);line-height:1.16;font-weight:400;color:var(--white); letter-spacing:-0.01em;max-width:16ch; } .ba-h1 .elementor-heading-title strong{font-weight:700} .ba-h1{margin-bottom:22px} .ba-lead{margin-bottom:30px} .ba-lead p{margin:0;font-size:20px;line-height:32px;color:var(--white)} .ba-lead-em{color:var(--red);font-weight:600} .ba-hero-ctas.e-con{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;padding:0;width:auto;max-width:none} .ba-hero-ctas > .elementor-widget{width:auto;max-width:none} .ba-hero .ba-btn-ghost .elementor-button:focus-visible, .ba-hero .ba-btn-red .elementor-button:focus-visible{outline-color:var(--white)} .hero-ctrl{display:flex;align-items:center;gap:18px;margin-top:38px} .hero-ctrl__dots{display:flex;gap:9px} .hero-ctrl__dot{width:14px;height:4px;border:0;border-radius:2px;padding:0;background:rgba(255,255,255,0.45);cursor:pointer;transition:width .3s ease,background .3s ease} .hero-ctrl__dot.is-active{width:38px;background:var(--red)} .hero-ctrl__dot:focus-visible{outline-color:var(--white)} .hero-ctrl__label{font-size:15px;line-height:24px;color:rgba(255,255,255,0.75)} /* ---- Quote panel ---- */ .ba-quote-col.e-con{position:relative;z-index:9;justify-self:end;width:100%;max-width:480px;padding:0} .quote{background:var(--white);border-radius:var(--r-md);padding:clamp(24px,2.6vw,40px);width:100%} .quote__title{margin:0 0 6px;font-size:24px;line-height:34px;font-weight:400;color:var(--ink)} .quote__title strong{font-weight:700} .quote__sub{margin:0 0 20px;font-size:16px;line-height:26px;color:var(--body)} .quote__progress{display:flex;gap:6px;margin-bottom:10px} .quote__progress span{flex:1;height:4px;border-radius:2px;background:var(--track);transition:background .3s ease} .quote__progress span.is-on{background:var(--red)} .quote__stepmeta{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:24px;color:var(--body);margin-bottom:20px} .quote__stepname{color:var(--ink);font-weight:600} .quote__step{border:0;margin:0;padding:0;min-width:0} .quote__step[hidden]{display:none} .quote__stack{display:flex;flex-direction:column;gap:15px} .quote__stack--lg{gap:18px} .quote__cols{display:grid;gap:15px} .quote__cols--120{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))} .quote__cols--140{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))} .quote__label{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:10px} .quote__label--tight{margin-bottom:4px} .quote__hint{display:block;font-size:14px;line-height:22px;color:var(--body);margin-bottom:10px} .quote input[type="text"], .quote input[type="email"], .quote input[type="tel"]{width:100%;height:50px;border:0;border-radius:var(--r-sm);background:var(--field);padding:0 20px;font-size:16px;line-height:26px;color:var(--ink)} .quote textarea{width:100%;height:110px;border:0;border-radius:var(--r-sm);background:var(--field);padding:15px 20px;font-size:16px;line-height:26px;color:var(--ink);resize:vertical} .quote input:focus, .quote textarea:focus{outline:2px solid var(--red)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{position:relative;display:inline-block} .chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .chip span{display:inline-block;border:1px solid var(--chip-border);border-radius:var(--r-sm);background:var(--field);color:var(--ink);padding:11px 16px;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease} .chip input:checked + span{background:var(--red);border-color:var(--red);color:var(--white)} /* The design's 40px chip is under the 44px touch target, so grow it on small screens only. */ @media (max-width:767px){ .chip span,.pf-filter{min-height:44px;display:inline-flex;align-items:center} } .chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px} .quote__nav{display:flex;align-items:center;gap:12px;margin-top:20px} .quote__next{flex:1;padding:17px 26px} .quote__submit{width:100%;margin-top:20px;padding:17px 26px;background:var(--green);color:var(--white)} .quote .quote__submit:hover, .quote .quote__submit:focus{background-color:var(--ink);color:var(--white)} .quote__submit:focus-visible{outline:2px solid var(--green);outline-offset:2px} .quote__legal{margin:14px 0 0;font-size:13px;line-height:21px;color:var(--body)} .quote__success{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:10px 0} .quote__success[hidden]{display:none} .quote__success .quote__title{margin:0} .quote__check{width:48px;height:48px;border-radius:var(--r-sm);background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700} .quote__success-text{margin:0;font-size:16px;line-height:28px;color:var(--body)} .quote__reset{padding:15px 26px} /* ---- Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ .ba-slide,.hero-ctrl__dot,.ba-mobile,.burger span{transition:none!important} } /* ========================================================================= Sections 4-12 ========================================================================= */ /* ---- Shared section shells ---- */ .ba-sec.e-con{display:block;padding:var(--pad-y) var(--pad-x)} .ba-sec--light.e-con{background:var(--white)} .ba-sec--off.e-con{background:var(--off-white)} .ba-sec--warm.e-con{background:var(--warm)} .ba-sec--ink.e-con{background:var(--ink)} .ba-sec--red.e-con{background:var(--red);padding:clamp(60px,7vw,90px) var(--pad-x)} .ba-sec--tight.e-con{padding-top:0} .ba-wrap.e-con{max-width:min(var(--maxw),100%);margin:0 auto;padding:0;width:100%;min-width:0;display:block} .ba-eyebrow-red .elementor-heading-title{font-size:18px;line-height:28px;font-weight:500;color:var(--grey)} .ba-sec--ink .ba-eyebrow-red .elementor-heading-title{color:rgba(255,255,255,0.55)} /* Split dotted rule under a section heading - neutral, replaces a red accent */ .ba-eyebrow-red + .elementor-widget-heading .elementor-heading-title::after{content:"";display:block;margin:24px 0 14px;height:1px;background-image:repeating-linear-gradient(to right,var(--rule) 0 2px,transparent 2px 7px),repeating-linear-gradient(to right,var(--rule) 0 2px,transparent 2px 7px);background-size:44% 1px,44% 1px;background-position:left center,right center;background-repeat:no-repeat} .ba-sec--ink .ba-eyebrow-red + .elementor-widget-heading .elementor-heading-title::after{background-image:repeating-linear-gradient(to right,var(--rule-dark) 0 2px,transparent 2px 7px),repeating-linear-gradient(to right,var(--rule-dark) 0 2px,transparent 2px 7px)} .ba-eyebrow-red{margin-bottom:13px} .ba-h2 .elementor-heading-title{font-size:clamp(30px,3.4vw,48px);line-height:1.2;font-weight:400;color:var(--ink);letter-spacing:-0.01em;max-width:16ch} .ba-h2 .elementor-heading-title strong{font-weight:700} .ba-h2--wide .elementor-heading-title{max-width:18ch} .ba-h2--onDark .elementor-heading-title{color:var(--white)} .ba-h2{margin-bottom:15px} .ba-deroule-head .ba-h2,.ba-pf-head .ba-h2{margin-bottom:0} .ba-text p{margin:0;font-size:17px;line-height:28px;color:var(--body);max-width:52ch} .ba-text--narrow p{max-width:42ch} .ba-text--onDark p{color:rgba(255,255,255,0.7)} .ba-text--onRed p{color:rgba(255,255,255,0.92);max-width:46ch} /* Two-column shells */ .ba-split.e-con{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(30px,4vw,60px);align-items:center;padding:0;width:100%;max-width:none;min-width:0} .ba-split--start.e-con{align-items:start} .ba-split--wide.e-con{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(36px,4vw,70px)} .ba-col.e-con{padding:0;width:auto;max-width:none;min-width:0;display:block} /* ---- 4. Prestations ---- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr));gap:30px} .card{position:relative;z-index:1;overflow:hidden;background:var(--off-white);border-radius:var(--r-md);padding:40px 16px;display:flex;flex-direction:column;align-items:center;text-align:center} .card__num{position:absolute;z-index:-1;top:0;right:40px;font-size:100px;line-height:120px;font-weight:700;color:rgba(21,24,27,0.04)} .card__icon{display:block;margin-bottom:25px;color:var(--grey)} .card__title{margin:0 0 8px;font-size:20px;line-height:30px;font-weight:400;color:var(--ink)} .card__title strong{font-weight:700} .card__text{margin:0;font-size:15px;line-height:26px;color:var(--body)} /* ---- 5. Mission ---- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:30px} .stat{border-left:2px solid var(--grey);padding-left:22px} .stat__n{font-size:52px;line-height:62px;font-weight:700;color:var(--ink)} .stat__t{font-size:16px;line-height:26px;color:var(--body)} .ba-mission-media{position:relative;border-radius:var(--r-md);overflow:hidden;margin-top:60px} .ba-mission-media img{width:100%;height:clamp(280px,38vw,540px);object-fit:cover;object-position:center 68%} .ba-mission-media .elementor-widget-image{line-height:0} .ba-caption{position:absolute;left:0;bottom:0;background:var(--white);border-top-right-radius:var(--r-md);padding:16px 26px;font-size:15px;line-height:24px;color:var(--body)} /* ---- 6. Portefeuille ---- */ .ba-pf-head.e-con{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:45px;padding:0;width:100%;max-width:none} .ba-pf-head > *{width:auto;max-width:none;flex:0 1 auto} .pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr));gap:24px} /* The theme italicises every figcaption; these captions are body copy. */ .pf-card,.pf-card__body,.pf-card__title,.pf-card__text{font-style:normal} .pf-card{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--white)} .ba-sec--light .pf-card{background:var(--off-white)} .pf-card__media{position:relative;aspect-ratio:4/3;background:var(--img-ph)} .pf-card__media img{width:100%;height:100%;object-fit:cover} .pf-card__badge{position:absolute;left:14px;top:14px;background:rgba(21,24,27,0.82);color:var(--white);font-size:12px;line-height:18px;font-weight:600;padding:5px 12px;border-radius:var(--r-sm)} .pf-card__body{padding:18px 22px 24px} .pf-card__title{margin:0 0 6px;font-size:19px;line-height:28px;font-weight:600;color:var(--ink)} .pf-card__text{margin:0;font-size:15px;line-height:26px;color:var(--body)} .pf-card[hidden]{display:none} /* Clickable card -> lightbox of that project's photos */ .ba-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .pf-card{position:relative} .pf-card__media{overflow:hidden} .pf-card__media img{transition:transform .4s ease} .pf-card:hover .pf-card__media img{transform:scale(1.04)} .pf-card__count{position:absolute;right:14px;bottom:14px;background:rgba(21,24,27,0.82);color:var(--white);font-size:12px;line-height:18px;font-weight:600;padding:5px 12px;border-radius:var(--r-sm)} .pf-card__open{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:var(--r-md)} .pf-card__open:focus-visible{outline:2px solid var(--red);outline-offset:3px} .ba-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center} .ba-lb[hidden]{display:none} .ba-lb__backdrop{position:absolute;inset:0;background:rgba(10,12,14,0.92)} .ba-lb__panel{position:relative;z-index:1;width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:14px} .ba-lb__bar{display:flex;align-items:center;gap:16px;color:var(--white)} .ba-lb__title{flex:1;min-width:0;font-size:17px;line-height:26px;font-weight:600} .ba-lb__count{font-size:14px;line-height:24px;color:rgba(255,255,255,0.6)} .ba-lb__close{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--r-sm);background:rgba(255,255,255,0.12);color:var(--white);font-size:16px;cursor:pointer} .ba-lb__close:hover{background:var(--red)} .ba-lb__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0} .ba-lb__img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r-md)} .ba-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,0.12);color:var(--white);font-size:26px;line-height:1;cursor:pointer} .ba-lb__nav:hover{background:var(--red)} .ba-lb__nav--prev{left:-8px} .ba-lb__nav--next{right:-8px} .ba-lb__nav[hidden]{display:none} .ba-lb__close:focus-visible, .ba-lb__nav:focus-visible{outline:2px solid var(--white);outline-offset:2px} body.ba-lb-open{overflow:hidden} @media (max-width:600px){ .ba-lb__nav--prev{left:2px} .ba-lb__nav--next{right:2px} .ba-lb__img{max-height:64vh} } /* Portfolio page filters */ .pf-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:36px} .pf-filters__row{display:flex;flex-wrap:wrap;gap:10px} .pf-filter{border-radius:var(--r-sm);border:1px solid var(--chip-border);background:var(--field);color:var(--ink);padding:11px 20px;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease} .pf-filter.is-active{background:var(--red);border-color:var(--red);color:var(--white)} .pf-count{font-size:15px;line-height:26px;color:var(--body)} /* ---- 7. Déroulé ---- */ .ba-sec--deroule.e-con{position:relative;overflow:hidden;padding-bottom:60px} .ba-sec--deroule::before, .ba-sec--deroule::after{content:"";position:absolute;border-radius:50%;background:var(--red);opacity:0.5;filter:blur(300px);pointer-events:none} .ba-sec--deroule::before{left:-200px;top:30px;width:336px;height:336px} .ba-sec--deroule::after{left:50%;top:200px;width:382px;height:382px} .ba-sec--deroule > *{position:relative} .ba-deroule-head.e-con{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,3vw,45px);align-items:flex-end;margin-bottom:60px;padding:0;width:100%;max-width:none} .steps{display:block} .step{border-bottom:1px solid rgba(255,255,255,0.1)} .step:last-child{border-bottom:0} .step__head{width:100%;display:flex;align-items:flex-start;gap:30px;background:transparent;border:0;padding:0 0 34px;margin:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit} .step{padding-top:0;margin-bottom:34px} .step__num{font-size:clamp(44px,5vw,70px);line-height:1.05;font-weight:700;color:var(--white);opacity:0.3;flex:0 0 auto;transition:opacity .3s ease,color .3s ease} .step.is-open .step__num{color:var(--red);opacity:1} .step__mid{flex:1;min-width:0;padding-top:6px} .step__kicker{display:block;margin-bottom:5px;font-size:16px;line-height:26px;color:var(--white)} .step__title{display:block;font-size:24px;line-height:34px;font-weight:400;color:var(--white)} .step__title strong{font-weight:700} .step__sign{flex:0 0 auto;font-size:24px;line-height:34px;font-weight:700;color:rgba(255,255,255,0.45);padding-top:6px} .step.is-open .step__sign{color:var(--red)} .step__sign::before{content:"+"} .step.is-open .step__sign::before{content:"\2212"} .step__panel{max-height:0;overflow:hidden;transition:max-height .3s ease} .step.is-open .step__panel{max-height:200px} .step__panel p{margin:0 0 34px;padding-right:30px;font-size:16px;line-height:28px;color:rgba(255,255,255,0.7);max-width:62ch} /* ---- 8. Wordmark band ---- */ .ba-wordmark.e-con{background:var(--ink);overflow:hidden;display:flex;justify-content:center;padding:0} .ba-wordmark .elementor-widget-html{width:100%;max-width:100%;line-height:0;text-align:center} .ba-wordmark-logo{ display:inline-block;width:min(92vw,1430px);height:auto;opacity:0.09; filter:brightness(0) invert(1); -webkit-mask-image:linear-gradient(90.06deg,rgba(0,0,0,0.1) 0.05%,#000 46.84%,rgba(0,0,0,0.1) 99.96%); mask-image:linear-gradient(90.06deg,rgba(0,0,0,0.1) 0.05%,#000 46.84%,rgba(0,0,0,0.1) 99.96%); } /* ---- 9. Pour les régies ---- */ .ba-sec--regies.e-con{padding-top:80px} .ba-sec--regies .ba-text{margin-bottom:34px} .ba-sec--regies .ba-text p{max-width:50ch} .ba-regies-media{position:relative;--bfr-t:clamp(7px,0.85vw,12px);--bfr-o:clamp(12px,1.7vw,24px)} .ba-regies-media::before, .ba-regies-media::after{content:"";position:absolute;width:58%;height:48%;border:0 solid var(--red);pointer-events:none} .ba-regies-media::before{top:calc(var(--bfr-o) * -1);left:calc(var(--bfr-o) * -1);border-top-width:var(--bfr-t);border-left-width:var(--bfr-t)} .ba-regies-media::after{bottom:calc(var(--bfr-o) * -1);right:calc(var(--bfr-o) * -1);border-bottom-width:var(--bfr-t);border-right-width:var(--bfr-t)} .ba-regies-media img{width:100%;height:clamp(320px,36vw,540px);object-fit:cover;object-position:center 60%;border-radius:0} .ba-regies-media .elementor-widget-image{line-height:0} .ticks{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px 40px} .tick{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;line-height:26px;color:var(--white);border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:12px} .tick .tick__arrow path{fill:rgba(255,255,255,0.45)} .ticks--light .tick__arrow path{fill:var(--grey)} /* ---- 10. Questions ---- */ .faq{display:block} .faq__item{margin-bottom:25px;border-bottom:1px solid var(--rule)} .faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:30px;background:transparent;border:0;padding:0 0 18px;cursor:pointer;text-align:left;font-family:inherit;font-size:20px;line-height:34px;font-weight:600;color:var(--ink)} .faq__sign{flex:0 0 auto;font-size:21px;line-height:34px;font-weight:700;color:var(--ink)} .faq__sign::before{content:"+"} .faq__item.is-open .faq__sign{color:var(--red)} .faq__item.is-open .faq__sign::before{content:"\2212"} .faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq__item.is-open .faq__a{max-height:280px} .faq__a p{margin:0;padding:0 60px 18px 0;font-size:16px;line-height:28px;color:var(--body)} /* ---- 11. Contact band ---- */ .ba-contact-ctas.e-con{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;justify-content:flex-end;padding:0;width:auto;max-width:none} .ba-contact-ctas > .elementor-widget{width:auto;max-width:none} .ba-btn-white .elementor-button{background:var(--white);color:var(--red)} .ba-btn-white .elementor-button:hover{background:var(--ink);color:var(--white)} @media (max-width:767px){.ba-contact-ctas.e-con{justify-content:flex-start}} /* ---- 12. Footer ---- */ .ba-footer-wrap.e-con{background:var(--ink);padding:clamp(50px,6vw,80px) var(--pad-x) 30px;display:block} .foot{max-width:min(var(--maxw),100%);margin:0 auto} .foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1)} .foot__intro{margin:0;font-size:16px;line-height:28px;color:rgba(255,255,255,0.7);max-width:34ch} .foot__h{margin:0 0 18px;font-size:20px;line-height:30px;font-weight:400;color:var(--white)} .foot__h strong{font-weight:700} .foot__links{display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:26px;color:rgba(255,255,255,0.7)} .foot__links a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color .2s ease} .foot__links a:hover{color:var(--red)} .foot__strong{color:var(--white)!important;font-weight:600} .foot__mail{overflow-wrap:anywhere} .foot__legal{padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:15px;line-height:26px;color:rgba(255,255,255,0.5)} .ba-footer-wrap :focus-visible{outline-color:var(--white)} /* ---- Form: honeypot + errors ---- */ .ba-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .quote__error{margin:0;font-size:14px;line-height:22px;color:var(--red)} .quote__error[hidden]{display:none} .quote__error--panel{margin-bottom:16px} .quote input.has-error, .quote textarea.has-error{outline:2px solid var(--red)} /* ---- Portefeuille page hero ---- */ .ba-pf-hero.e-con{position:relative;overflow:hidden;background:var(--hero-dark);padding:clamp(56px,7vw,100px) var(--pad-x);display:block} /* The overlay widget must stay static so its absolute children resolve against the section. */ .ba-pf-hero > .elementor-widget-html, .ba-pf-hero > .elementor-widget-html > .elementor-widget-container{position:static} .ba-pf-hero .ba-wrap{position:relative;z-index:2} .pf-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.5;filter:grayscale(0.2);pointer-events:none} .pf-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,31,29,0.94) 18%,rgba(30,31,29,0.72) 55%,rgba(30,31,29,0.45) 100%);pointer-events:none} .pf-hero__wedge{position:absolute;left:0;right:0;bottom:0;height:90px;background:var(--red);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none} .ba-eyebrow-white .elementor-heading-title{font-size:18px;line-height:28px;font-weight:500;color:var(--white)} .ba-eyebrow-white{margin-bottom:13px} .ba-h1-pf .elementor-heading-title{font-size:clamp(34px,4.2vw,58px);line-height:1.14;font-weight:400;color:var(--white);letter-spacing:-0.01em;max-width:18ch} .ba-h1-pf .elementor-heading-title strong{font-weight:700} .ba-h1-pf{margin-bottom:18px} .ba-text--pf p{color:rgba(255,255,255,0.85);max-width:56ch} /* ========================================================================= Service pages (CPT prestation) + hub ========================================================================= */ /* ---- Hero ---- */ .ba-phero.e-con{position:relative;overflow:hidden;background:var(--hero-dark);padding:clamp(56px,7vw,100px) var(--pad-x);display:block} .ba-phero > .elementor-widget-shortcode, .ba-phero > .elementor-widget-shortcode > .elementor-widget-container, .ba-phero .elementor-shortcode{position:static} .phero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.45;pointer-events:none} .phero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,31,29,0.94) 18%,rgba(30,31,29,0.72) 55%,rgba(30,31,29,0.45) 100%);pointer-events:none} .phero__wedge{position:absolute;left:0;right:0;bottom:0;height:90px;background:var(--red);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none} .phero__inner{position:relative;z-index:2;max-width:min(var(--maxw),100%);margin:0 auto} .phero__eyebrow{margin:0 0 13px;font-size:18px;line-height:28px;font-weight:500;color:rgba(255,255,255,0.6)} .phero__title{margin:0 0 18px;font-size:clamp(34px,4.2vw,58px);line-height:1.14;font-weight:400;color:var(--white);letter-spacing:-0.01em;max-width:18ch} .phero__title strong{font-weight:700} .phero__lead{margin:0 0 30px;font-size:17px;line-height:28px;color:rgba(255,255,255,0.85);max-width:56ch} .phero__ctas{display:flex;flex-wrap:wrap;gap:14px} .ba-phero :focus-visible{outline-color:var(--white)} /* ---- Breadcrumbs ---- */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-size:14px;line-height:24px;color:rgba(255,255,255,0.7)} .crumbs a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color .2s ease} .crumbs a:hover{color:var(--red)} .crumbs span[aria-hidden]{color:rgba(255,255,255,0.4)} .crumbs [aria-current]{color:var(--white)} /* ---- Detail + info card ---- */ .ba-detail.e-con{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(36px,4vw,70px);align-items:start;padding:0;width:100%;max-width:none;min-width:0} /* The shortcode prints both columns, so its wrappers must not become grid items. */ .ba-detail > .elementor-widget-shortcode, .ba-detail > .elementor-widget-shortcode > .elementor-widget-container, .ba-detail .elementor-shortcode{display:contents} .ba-detail{align-items:start} .infocard{position:sticky;top:110px} .detail__main{min-width:0} .detail__h{margin:0 0 18px;font-size:clamp(26px,2.6vw,34px);line-height:1.25;font-weight:400;color:var(--ink);letter-spacing:-0.01em} .detail__h strong{font-weight:700} .detail__h + .ticks{margin-bottom:40px} .detail__lead{margin:0 0 40px;font-size:17px;line-height:28px;color:var(--body);max-width:62ch} .ticks--light{grid-template-columns:1fr;gap:0} .ticks--light .tick{color:var(--ink);border-bottom:1px solid var(--border-grey);padding:12px 0} .duo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px} .duo img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;border-radius:var(--r-md)} .infocard{background:var(--off-white);border-radius:var(--r-md);padding:clamp(24px,2.6vw,36px);min-width:0} .infocard__h{margin:0 0 20px;font-size:24px;line-height:34px;font-weight:400;color:var(--ink)} .infocard__h strong{font-weight:700} .facts{margin:0 0 24px;display:flex;flex-direction:column;gap:14px} .facts > div{border-bottom:1px solid var(--border-grey);padding-bottom:14px} .facts > div:last-child{border-bottom:0;padding-bottom:0} .facts dt{font-size:14px;line-height:22px;font-weight:600;color:var(--ink)} .facts dd{margin:2px 0 0;font-size:15px;line-height:26px;color:var(--body)} .infocard__cta{display:block;text-align:center} .infocard__tel{display:block;margin-top:12px;text-align:center;font-size:15px;line-height:26px;color:var(--body);text-decoration:none} .infocard__tel:hover{color:var(--red)} /* ---- Service tiles (hub + cross-links) ---- */ .tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr));gap:24px} .tile{min-width:0} .tile__link{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);border-radius:var(--r-md);overflow:hidden;text-decoration:none;transition:background .2s ease} .ba-sec--light .tile__link{background:var(--off-white)} .tile__link:hover{background:var(--ink)} .tile__link img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--img-ph)} .tile__body{display:block;padding:22px 22px 26px} .tile__title{display:block;font-size:20px;line-height:30px;font-weight:400;color:var(--ink);transition:color .2s ease} .tile__title strong{font-weight:700} .tile__desc{display:block;margin-top:6px;font-size:15px;line-height:26px;color:var(--body);transition:color .2s ease} .tile__link:hover .tile__title{color:var(--white)} .tile__link:hover .tile__desc{color:rgba(255,255,255,0.7)} .tile__link .tick__arrow{position:absolute;right:22px;bottom:26px} .ba-mt .elementor-button{margin-top:30px} /* ---- Hub page intro ---- */ .ba-hub-intro p{margin:0;font-size:17px;line-height:28px;color:var(--body);max-width:62ch} /* ---- Contact page ---- */ .contact-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px} .contact-card{background:var(--off-white);border-radius:var(--r-md);padding:28px} .contact-card h3{margin:0 0 10px;font-size:18px;line-height:28px;font-weight:600;color:var(--ink)} .contact-card p,.contact-card a{margin:0;font-size:16px;line-height:28px;color:var(--body);text-decoration:none} .contact-card a:hover{color:var(--red)} .contact-card address{font-style:normal} /* ---- Navigation dropdown ---- */ .ba-has-sub{position:relative;display:inline-flex;align-items:center;gap:4px} .ba-nav__caret{width:26px;height:26px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .ba-nav__caret::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease,border-color .2s ease} .ba-has-sub:hover .ba-nav__caret::before, .ba-nav__caret[aria-expanded="true"]::before{border-color:var(--red)} .ba-nav__caret[aria-expanded="true"]::before{transform:rotate(225deg) translate(-3px,-3px)} .ba-subnav{ position:absolute;top:100%;left:-16px;z-index:50;min-width:260px;margin:0;padding:10px 0; list-style:none;background:var(--white);border:1px solid var(--border-grey);border-radius:var(--r-sm); opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease; } .ba-has-sub:hover .ba-subnav, .ba-has-sub:focus-within .ba-subnav, .ba-subnav.is-open{opacity:1;visibility:visible;transform:translateY(0)} .ba-subnav a{display:block;padding:10px 20px;font-size:15px;line-height:24px;font-weight:500;color:var(--ink);text-decoration:none;transition:background .2s ease,color .2s ease} .ba-subnav a:hover{background:var(--off-white);color:var(--red)} /* Service cards on the homepage are links now. */ .card--link{text-decoration:none;transition:background .2s ease} .card--link:hover{background:var(--ink)} .card--link:hover .card__title{color:var(--white)} .card--link:hover .card__text{color:rgba(255,255,255,0.7)} .card--link:hover .card__num{color:rgba(255,255,255,0.06)} .card__title,.card__text{transition:color .2s ease} @media (max-width:960px){ .ba-mobile__sub{list-style:none;margin:0 0 0 14px;padding:0} .ba-mobile__sub a{font-size:15px;font-weight:400;color:var(--body)} } /* ---- Service area ---- */ .zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:clamp(30px,3vw,50px)} .zone{min-width:0} .zone__h{margin:0 0 12px;font-size:24px;line-height:34px;font-weight:700;color:var(--ink)} .zone__text{margin:0 0 18px;font-size:16px;line-height:28px;color:var(--body);max-width:46ch} .zone__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .zone__list li{border:1px solid var(--chip-border);border-radius:var(--r-sm);background:var(--field);color:var(--ink);padding:8px 14px;font-size:15px;line-height:1.2;font-weight:500} /* Elementor's widget spacing out-specifies a single class, so the hero's vertical rhythm is stated explicitly at every width (the mobile block below overrides these with its own, tighter values). */ .ba-hero .ba-hero-copy .ba-eyebrow{margin-bottom:24px} .ba-hero .ba-hero-copy .ba-h1{margin-bottom:22px} .ba-hero .ba-hero-copy .ba-lead{margin-bottom:30px} /* ========================================================================= Mobile refinements The hero has to reach the form fast, so the text above it is trimmed rather than merely scaled down. ========================================================================= */ /* The panel must sit above the sticky header, or the header hides the panel's own close button and the first entries (Accueil, Prestations). */ .ba-mobile{z-index:200} .ba-mobile__backdrop{ position:fixed;inset:0;z-index:190;background:rgba(21,24,27,0.5); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease; } .ba-mobile__backdrop.is-open{opacity:1;visibility:visible} #masthead .burger{background:transparent;border:0;border-radius:0} .ba-mobile nav > ul > li > a{font-weight:600} .ba-mobile__sub{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--border-grey)} .ba-mobile__sub a{min-height:42px;font-size:15px;font-weight:400;color:var(--body);border-bottom:0} @media (max-width:767px){ /* Utility bar: keep the two numbers, drop the address and e-mail lines. */ .topbar__group:first-child{display:none} .topbar{justify-content:center;gap:6px 20px;padding:9px var(--pad-x);font-size:13px} /* Hero: smaller type and no decorative rail, so the form arrives sooner. The padding and the gap are deliberate: they open bands of the chantier photo above the headline and between the copy and the form panel. */ .ba-hero.e-con{padding:96px var(--pad-x) 92px} .ba-hero-inner.e-con{gap:66px} /* The 100deg scrim was built for a wide viewport: on a phone its dark end covers the whole width and the photo disappears. Fade it vertically instead, dark enough behind the text and clear over the image. */ .ba-scrim{background:linear-gradient(180deg,rgba(30,31,29,0.62) 0%,rgba(30,31,29,0.82) 18%,rgba(30,31,29,0.68) 40%,rgba(30,31,29,0.26) 64%,rgba(30,31,29,0.45) 100%)} .ba-wedge{height:80px} .ba-eyebrow .elementor-heading-title{font-size:14px;line-height:22px} /* Elementor's own widget spacing out-specifies a single class here, so the rhythm between the eyebrow, headline, lead and buttons is set explicitly. */ .ba-hero .ba-hero-copy .ba-eyebrow{margin-bottom:18px} .ba-hero .ba-hero-copy .ba-h1{margin-bottom:24px} .ba-hero .ba-hero-copy .ba-lead{margin-bottom:36px} .ba-eyebrow{margin-bottom:16px} .ba-h1 .elementor-heading-title{font-size:28px;line-height:1.18;max-width:none} .ba-h1{margin-bottom:20px} .ba-lead p{font-size:16px;line-height:26px} .ba-lead{margin-bottom:30px} .ba-hero-ctas.e-con{gap:14px;width:100%} .ba-hero-ctas > .elementor-widget{width:100%} .ba-hero-ctas .elementor-button{display:block;width:100%;text-align:center;padding:14px 20px;font-size:15px} .hero-ctrl{display:none} .quote{padding:22px} .quote__title{font-size:21px;line-height:30px} .quote__sub{font-size:15px;line-height:24px;margin-bottom:16px} /* Inner page heroes get the same treatment. */ .ba-pf-hero.e-con, .ba-phero.e-con{padding:36px var(--pad-x) 46px} .ba-h1-pf .elementor-heading-title, .phero__title{font-size:28px;line-height:1.18;max-width:none} .phero__lead, .ba-text--pf p{font-size:16px;line-height:26px} .phero__ctas{gap:10px;width:100%} .phero__ctas .btn{display:block;width:100%;text-align:center;padding:14px 20px;font-size:15px} .ba-h2 .elementor-heading-title{font-size:26px;line-height:1.22;max-width:none} } /* ========================================================================= Tablet / small laptop (768-1080px) Two hero columns only leave ~400px each here: the headline wraps four times, the eyebrow and lead break mid-phrase and the two CTAs wrap to different widths, which reads as a misalignment. Stack instead, on one left edge. ========================================================================= */ @media (min-width:768px) and (max-width:1080px){ .ba-hero-inner.e-con{grid-template-columns:100%;gap:clamp(36px,5vw,54px)} .ba-hero-copy.e-con{max-width:none} /* Same left edge as the copy, so the panel lines up with the headline. */ .ba-quote-col.e-con{justify-self:start;max-width:540px} .ba-eyebrow .elementor-heading-title{font-size:16px;line-height:26px} .ba-h1 .elementor-heading-title{font-size:clamp(34px,4.6vw,46px);line-height:1.16;max-width:20ch} .ba-lead p{font-size:18px;line-height:30px} /* With the full width available the two CTAs sit on one row again. */ .ba-hero-ctas.e-con{gap:14px} /* Inner-page heroes share the same measure. */ .ba-h1-pf .elementor-heading-title, .phero__title{font-size:clamp(32px,4.4vw,44px);max-width:20ch} } /* ========================================================================= Service card / tile call to action The whole card is the link, but without a visible control it reads as a static panel. The button states the action and inverts with the card. ========================================================================= */ .card__cta, .tile__cta{ display:inline-flex;align-items:center;gap:9px; border:1px solid rgba(21,24,27,0.15);border-radius:var(--r-sm); padding:11px 20px;font-size:15px;font-weight:500;line-height:1.2;color:var(--ink); background:transparent; transition:background .2s ease,color .2s ease,border-color .2s ease; } .card__cta .tick__arrow, .tile__cta .tick__arrow{flex:0 0 auto} /* Cards stay equal height so the buttons line up across the row. */ .card{height:100%} .card__text{margin-bottom:24px} .card__cta{margin-top:auto} .tile__body{display:flex;flex-direction:column;flex:1} .tile__cta{margin-top:20px;align-self:flex-start} /* The card inverts to ink on hover, so the button flips to the red accent. */ .card--link:hover .card__cta, .tile__link:hover .tile__cta{background:var(--red);border-color:var(--red);color:var(--white)} .card--link:focus-visible .card__cta, .tile__link:focus-visible .tile__cta{background:var(--red);border-color:var(--red);color:var(--white)} /* The floating corner arrow is replaced by the button, so the arrow now sits inside the CTA and must not inherit the old absolute placement. */ .tile__link > .tick__arrow{display:none} .tile__cta .tick__arrow, .card__cta .tick__arrow{position:static;right:auto;bottom:auto} @media (max-width:767px){ .card__cta,.tile__cta{min-height:44px} } /* ========================================================================= Button states Hello Elementor's reset paints every