:root{ /* THEME B — CLAIR PREMIUM (aligné logo : bleu + doré) */ --bg:#F6F8FF; --panel:#FFFFFF; --panel-2:#F0F4FF; --text:#0B1226; --muted:rgba(11,18,38,.76); --line:rgba(11,18,38,.10); --accent:#D9B84C; --accent-2:#CFAE45; --brand:#3F63F2; --brand-2:#2F53E6; /* Simplebo-like "navy" for popular highlight */ --sb-navy:#0A1A4A; --sb-navy-2:#0A1F5D; /* Cartes tarifs: fonds */ --price-bg:#F5F7FF; --price-bg-2:#EEF2FF; /* Ombres */ --shadow-sm:0 10px 24px rgba(11,18,38,.07); --shadow-md:0 18px 54px rgba(11,18,38,.09); --shadow-lg:0 28px 88px rgba(11,18,38,.11); --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-pill:999px; } *{margin:0;padding:0;box-sizing:border-box} body{ margin:0; font-family:'Montserrat',sans-serif; color:var(--text); background: radial-gradient(900px 520px at 15% -5%, rgba(63,99,242,.16), transparent 60%), radial-gradient(900px 520px at 90% 5%, rgba(217,184,76,.14), transparent 55%), var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} .visually-hidden{ position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important; overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important; } .page-wrapper{background:transparent;} .container{ max-width:1200px; width:100%; margin:0 auto; padding:0 clamp(18px, 4vw, 40px); } /* Navigation */ .main-nav{ background:rgba(246,248,255,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1000; box-shadow:0 10px 26px rgba(11,18,38,.07); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease; will-change: background, box-shadow, transform; } .main-nav.scrolled{ background:rgba(246,248,255,.92); border-bottom:1px solid rgba(11,18,38,.14); box-shadow:0 16px 38px rgba(11,18,38,.09); transform:translateY(-1px); } .nav-container{ max-width:1400px; margin:0 auto; padding:0 clamp(18px, 4vw, 40px); display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:1.25rem; position:relative; } .nav-logo{ display:flex; align-items:center; text-decoration:none; height:64px; padding:4px 0; flex-shrink:0; } .nav-logo img{ height:52px; width:auto; max-width:260px; object-fit:contain; display:block; filter:drop-shadow(0 10px 18px rgba(11,18,38,.09)); } .nav-menu{ display:flex; list-style:none; gap:0.25rem; align-items:center; margin:0; padding:0; } .nav-menu a{ color:rgba(11,18,38,.88); font-weight:800; font-size:0.92rem; padding:0.58rem 0.85rem; border-radius:var(--radius-sm); transition:all .22s ease; display:block; white-space:nowrap; } .nav-menu a:hover{ background:rgba(63,99,242,.07); color:rgba(11,18,38,.98); } .nav-btn, .nav-btn:link, .nav-btn:visited, .nav-btn:active{ display:inline-flex !important; align-items:center; justify-content:center; gap:.5rem; padding:0.58rem 0.90rem !important; border-radius:var(--radius-pill) !important; border:1px solid rgba(217,184,76,.44); background:linear-gradient(135deg, rgba(217,184,76,.96), rgba(207,174,69,.94)) !important; color:#0B1226 !important; font-weight:950 !important; font-size:0.88rem !important; cursor:pointer; transition:all .22s ease; white-space:nowrap; box-shadow:0 12px 24px rgba(217,184,76,.15); } .nav-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(217,184,76,.18); filter:saturate(1.03); } .mobile-menu-toggle{ display:none; background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); border:1px solid rgba(63,99,242,.22); color:#fff; font-size:1.15rem; padding:0.40rem 0.70rem; border-radius:var(--radius-sm); cursor:pointer; font-weight:900; box-shadow:0 12px 24px rgba(63,99,242,.16); } @media (max-width:900px){ .mobile-menu-toggle{display:block;} .nav-menu{ position:absolute; top:100%; left:0; right:0; background:rgba(246,248,255,.96); backdrop-filter:blur(14px); flex-direction:column; gap:0.35rem; padding:1rem; box-shadow:var(--shadow-md); display:none; border-top:1px solid var(--line); } .nav-menu.active{display:flex;} .nav-menu a{width:100%; text-align:center; padding:0.95rem !important;} .nav-menu .nav-btn{width:100%; justify-content:center;} .nav-logo img{height:46px;} } /* Typography */ h1,h2,h3,h4{ line-height:1.15; margin:0 0 1rem; color:var(--text); font-weight:900; letter-spacing:-0.03em; } h1{font-size:clamp(2.10rem, 5.2vw, 4rem)} h2{font-size:clamp(1.70rem, 4vw, 2.85rem)} h3{font-size:clamp(1.15rem, 2.5vw, 1.55rem)} h4{font-size:1.05rem} p{color:var(--muted); line-height:1.75; font-weight:450;} .lead{ font-size:clamp(1.02rem, 2vw, 1.16rem); color:rgba(11,18,38,.80); font-weight:500; line-height:1.75; max-width:920px; margin-left:auto; margin-right:auto; } .section{ padding:clamp(68px, 9vw, 98px) 0; position:relative; background:transparent; border-bottom:1px solid var(--line); } .section:last-of-type{border-bottom:none;} .section-alt{ background: radial-gradient(1000px 520px at 10% 0%, rgba(63,99,242,.09), transparent 55%), rgba(240,244,255,.62); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .center{text-align:center} /* Buttons (base) */ .btn, .btn:link, .btn:visited, .btn:active{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:0.92rem 1.45rem; border-radius:var(--radius-pill); border:1px solid rgba(217,184,76,.46); background:linear-gradient(135deg, rgba(217,184,76,.96), rgba(207,174,69,.94)); color:#0B1226 !important; text-decoration:none; font-weight:950; font-size:0.96rem; cursor:pointer; transition:all .22s ease; box-shadow:0 14px 30px rgba(217,184,76,.14); letter-spacing:-0.02em; } .btn:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(217,184,76,.18); filter:saturate(1.03); } .btn-secondary, .btn-secondary:link, .btn-secondary:visited, .btn-secondary:active{ background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); border:1px solid rgba(63,99,242,.30); color:#FFFFFF !important; box-shadow:0 14px 30px rgba(63,99,242,.14); } .btn-secondary:hover{ box-shadow:0 18px 38px rgba(63,99,242,.18); } .btn-ghost, .btn-ghost:link, .btn-ghost:visited, .btn-ghost:active{ background:rgba(63,99,242,.055); border:1px solid rgba(63,99,242,.14); color:rgba(11,18,38,.92) !important; box-shadow:none; } .btn-ghost:hover{ transform:translateY(-2px); background:rgba(63,99,242,.07); box-shadow:0 14px 34px rgba(11,18,38,.09); } .cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; justify-content:center; margin-top:1.65rem; } /* HERO */ .hero{ position:relative; isolation:isolate; overflow:hidden; min-height:74vh; display:flex; align-items:center; border-bottom:1px solid var(--line); } .hero .media{position:absolute;inset:0;z-index:0;} .hero .media img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.50) contrast(1.05) saturate(0.9); transform:translate3d(0,0,0) scale(1.06); will-change:transform; } .hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(900px 620px at 15% 0%, rgba(63,99,242,.23), transparent 55%), radial-gradient(900px 620px at 90% 10%, rgba(217,184,76,.20), transparent 55%), linear-gradient(135deg, rgba(11,18,38,.62) 0%, rgba(11,18,38,.78) 100%); } .hero .inner{ position:relative; z-index:2; padding:clamp(90px, 12vh, 126px) 0; text-align:center; width:100%; } .hero-kicker{ font-size:clamp(10px, 1.2vw, 12px); text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.90); margin-bottom:1rem; font-weight:800; opacity:0.98; } .hero-kicker strong{ color:#0B1226; background:rgba(217,184,76,.96); padding:4px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); letter-spacing:.2em; font-style:normal; } .hero h1{ margin-bottom:.9rem; color:#FFFFFF; text-shadow:0 2px 18px rgba(0,0,0,.32); } .hero-subtitle{ font-size:clamp(0.95rem, 1.8vw, 1.10rem); color:rgba(255,255,255,.92); font-weight:800; margin-bottom:.9rem; text-shadow:0 2px 10px rgba(0,0,0,.22); } .hero .lead{ color:rgba(255,255,255,.90); text-shadow:0 2px 10px rgba(0,0,0,.22); margin-bottom:1.05rem; max-width:980px; } /* Chips */ .chip-row{ margin-top:1.05rem; display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; justify-content:center; } .chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.92); font-weight:850; font-size:.82rem; white-space:nowrap; backdrop-filter:blur(8px); } .chip strong{color:#fff;} /* TRUST STRIP */ .trust{ background:rgba(240,244,255,.60); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section.trust{padding:2.65rem 0;} .trust .row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; } .trust .item{ display:flex; align-items:center; gap:1.15rem; padding:1.35rem 1.25rem; border-radius:18px; background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.12); transition:all .22s ease; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; } .trust .item::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(520px 240px at 25% 0%, rgba(63,99,242,.10), transparent 60%), radial-gradient(520px 240px at 85% 20%, rgba(217,184,76,.10), transparent 60%); opacity:.95; pointer-events:none; } .trust .item > *{position:relative; z-index:1;} .trust .item:hover{ transform:translateY(-4px); border-color:rgba(63,99,242,.20); box-shadow:var(--shadow-md); } .trust-icon{ width:52px;height:52px;border-radius:16px; display:flex;align-items:center;justify-content:center; font-size:22px; background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); color:#FFFFFF; flex-shrink:0; font-weight:900; box-shadow:0 18px 44px rgba(63,99,242,.16); } .trust-main{ margin:0; font-weight:1000; font-size:1.14rem; color:rgba(11,18,38,.96); letter-spacing:-0.02em; } .trust-sub{ margin:.20rem 0 0; font-size:.90rem; color:rgba(11,18,38,.68); font-weight:650; } .counter{ display:inline-flex; align-items:baseline; gap:.35rem; } .counter .plus{ font-size:1.55rem; line-height:1; color:rgba(217,184,76,.98); font-weight:1100; transform:translateY(1px); text-shadow:0 10px 24px rgba(217,184,76,.18); } .counter .num{ font-size:1.85rem; line-height:1; font-weight:1100; letter-spacing:-0.03em; } @media (max-width:900px){ .trust .row{grid-template-columns:1fr; gap:.85rem;} .trust .item{padding:1.2rem 1.05rem;} .trust-icon{width:48px;height:48px;border-radius:14px;} .counter .num{font-size:1.70rem;} .counter .plus{font-size:1.45rem;} } /* Cards grids */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.35rem; margin-top:2.4rem; } .service-card{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; padding:2.05rem; transition:all .22s ease; position:relative; overflow:hidden; min-height:330px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); } .service-card::before{ content:""; position:absolute; top:0;left:0;right:0; height:5px; background:linear-gradient(90deg, rgba(217,184,76,.90), rgba(63,99,242,.90)); transform:scaleX(0); transform-origin:left; transition:transform .32s ease; } .service-card:hover{ transform:translateY(-5px); border-color:rgba(63,99,242,.16); box-shadow:var(--shadow-md); } .service-card:hover::before{transform:scaleX(1);} .service-icon{font-size:2.50rem;margin-bottom:.85rem;display:block;} .service-card h3{margin-bottom:.75rem} .service-card p{margin-bottom:1rem} .service-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;} .service-card ul li{ padding-left:1.45rem; position:relative; font-size:0.95rem; line-height:1.55; font-weight:650; color:rgba(11,18,38,.80); } .service-card ul li::before{ content:"✓"; position:absolute; left:0; color:rgba(63,99,242,.92); font-weight:950; } /* ========================== TARIFS — STYLE SIMPLEBO (fine) ========================== */ .pricing-shell{ margin-top:2rem; background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:24px; box-shadow:var(--shadow-md); overflow:hidden; } .pricing-head{ padding:1.25rem 1.1rem 1.05rem; text-align:center; border-bottom:1px solid var(--line); background: radial-gradient(820px 320px at 20% 0%, rgba(63,99,242,.09), transparent 60%), radial-gradient(760px 300px at 85% 0%, rgba(217,184,76,.09), transparent 60%), rgba(240,244,255,.58); } .pricing-toggle{ display:inline-grid; grid-template-columns:repeat(3, 1fr); gap:.45rem; padding:.45rem; border-radius:999px; background:rgba(11,18,38,.04); border:1px solid rgba(11,18,38,.10); box-shadow:0 16px 40px rgba(11,18,38,.07); max-width:760px; width:min(760px, 100%); margin:0 auto; } .toggle-btn{ appearance:none; border:none; cursor:pointer; padding:.76rem .9rem; border-radius:999px; background:transparent; color:rgba(11,18,38,.70); font-weight:950; font-size:.92rem; transition:all .16s ease; position:relative; line-height:1.05; } .toggle-btn:hover{background:rgba(63,99,242,.07); color:rgba(11,18,38,.92);} .toggle-btn.active{ background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); color:#fff; box-shadow:0 14px 30px rgba(63,99,242,.14); transform:translateY(-1px); } .toggle-title{display:block;} .toggle-sub{ display:block; margin-top:.30rem; font-size:.77rem; font-weight:850; color:rgba(11,18,38,.62); opacity:.98; } .toggle-btn.active .toggle-sub{color:rgba(255,255,255,.92);} .toggle-sub .gift{ display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .48rem; border-radius:999px; background:rgba(217,184,76,.16); border:1px solid rgba(217,184,76,.28); color:rgba(11,18,38,.92); font-weight:950; margin-left:.35rem; white-space:nowrap; } .toggle-btn.active .toggle-sub .gift{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22); color:#fff; } .pricing-grid{ padding:1.55rem 1.05rem 1.25rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.05rem; align-items:stretch; } .price-card{ position:relative; border-radius:22px; background:linear-gradient(180deg, var(--price-bg-2), var(--price-bg)); border:1px solid rgba(11,18,38,.10); box-shadow:0 18px 46px rgba(11,18,38,.07); overflow:hidden; display:flex; flex-direction:column; transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease; } .price-card:hover{ transform:translateY(-5px); border-color:rgba(63,99,242,.18); box-shadow:0 24px 64px rgba(11,18,38,.10); } /* top subtle band */ .price-topbar{ height:8px; background:linear-gradient(90deg, rgba(63,99,242,.90), rgba(217,184,76,.90)); opacity:.95; } .price-inner{ padding:1.25rem 1.20rem 1.15rem; display:flex; flex-direction:column; height:100%; } /* Header section fixed height => perfect alignment like Simplebo */ .price-header{ min-height:168px; /* Fine tuning: keeps all titles aligned */ display:flex; flex-direction:column; justify-content:flex-start; padding-top:.2rem; } /* small pill like Simplebo */ .plan-pill{ display:inline-flex; align-items:center; justify-content:center; padding:.36rem .70rem; border-radius:999px; width:max-content; font-weight:950; font-size:.78rem; letter-spacing:-0.01em; background:rgba(255,255,255,.72); border:1px solid rgba(11,18,38,.10); color:rgba(11,18,38,.86); margin-bottom:.72rem; box-shadow:0 10px 26px rgba(11,18,38,.06); backdrop-filter:blur(8px); } .price-title{ margin:0 0 .32rem; font-weight:1100; letter-spacing:-0.035em; color:rgba(11,18,38,.98); } /* “texte en haut” (conversion) — style Simplebo */ .plan-hook{ margin:0 0 .62rem; font-weight:850; color:rgba(11,18,38,.74); line-height:1.45; max-width:40ch; } .price-desc{ margin:0; color:rgba(11,18,38,.66); font-weight:650; line-height:1.55; } /* Price block fixed height to align baseline perfectly */ .price-meta{ margin-top:1.05rem; min-height:112px; /* Fine tuning */ display:flex; flex-direction:column; justify-content:flex-start; } .price-row{ display:flex; align-items:baseline; justify-content:flex-start; gap:.55rem; margin:0 0 .25rem; flex-wrap:nowrap; } .amount{ font-size:2.85rem; line-height:1; font-weight:750; letter-spacing:-0.04em; color:rgba(11,18,38,.98); display:flex; align-items:baseline; } .amount strong{font-weight:1150;} .amount::after{ content:"€"; font-size:1.10rem; font-weight:1000; color:rgba(11,18,38,.78); margin-left:.20rem; transform:translateY(-2px); } .per{ font-size:.98rem; font-weight:900; color:rgba(11,18,38,.70); white-space:nowrap; transform:translateY(1px); } .setup{ margin:0 0 .35rem; color:rgba(11,18,38,.78); font-weight:750; font-size:.92rem; } .billing-note{ margin:0; color:rgba(11,18,38,.64); font-weight:650; font-size:.85rem; line-height:1.45; } /* Feature list */ .price-list{ list-style:none; padding:0; margin:1.05rem 0 0; display:grid; gap:.55rem; } .price-list li{ display:flex; gap:.55rem; align-items:flex-start; padding:.62rem .72rem; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(11,18,38,.10); color:rgba(11,18,38,.84); font-weight:700; font-size:.92rem; line-height:1.35; } .price-list li::before{ content:"✓"; color:rgba(63,99,242,.92); font-weight:1000; margin-top:1px; flex:0 0 auto; } .price-list li strong{font-weight:1000;} .price-actions{ margin-top:auto; padding-top:1.05rem; display:flex; flex-direction:column; gap:.6rem; } .price-actions .btn{width:100%;} .price-actions .btn-ghost{width:100%;} .micro{ text-align:center; color:rgba(11,18,38,.64); font-size:.82rem; font-weight:700; margin-top:.15rem; } /* ========== POPULAIRE — EXACT SIMPLEBO ALIGNMENT ========== */ .price-card.is-popular{ border-color:rgba(10,26,74,.18); box-shadow:0 26px 82px rgba(11,18,38,.14); transform:translateY(-2px); background:linear-gradient(180deg, rgba(240,244,255,.92), rgba(255,255,255,.96)); } .price-card.is-popular:hover{ transform:translateY(-7px); box-shadow:0 34px 98px rgba(11,18,38,.18); } .popular-floating{ position:absolute; top:-22px; /* fine: badge higher */ left:50%; transform:translateX(-50%); z-index:6; display:inline-flex; align-items:center; gap:.45rem; padding:.60rem 1.00rem; border-radius:999px; background:linear-gradient(180deg, var(--sb-navy), var(--sb-navy-2)); color:#fff; font-weight:1000; font-size:.88rem; letter-spacing:-0.01em; border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 46px rgba(11,18,38,.22); } .popular-floating .star{ width:20px;height:20px;border-radius:7px; display:inline-flex;align-items:center;justify-content:center; background:rgba(217,184,76,.96); color:#0B1226; font-weight:1100; line-height:1; transform:translateY(-1px); } /* Give room at top so badge doesn't overlap border visually */ .price-card.is-popular .price-topbar{opacity:.92;} .price-card.is-popular .price-inner{padding-top:1.25rem;} /* identical to others: alignment maintained */ @media (max-width:980px){ .pricing-grid{grid-template-columns:1fr; padding:1.65rem 1rem 1.15rem;} .price-header{min-height:auto;} .price-meta{min-height:auto;} .popular-floating{ top:-18px; left:50%; transform:translateX(-50%); } } /* Portfolio */ .portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.15rem; margin-top:2.4rem; } .project{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease; } .project:hover{ transform:translateY(-5px); border-color:rgba(63,99,242,.16); box-shadow:var(--shadow-md); } .project .thumb{ position:relative; height:170px; overflow:hidden; border-bottom:1px solid rgba(11,18,38,.10); background: radial-gradient(900px 320px at 30% 0%, rgba(63,99,242,.10), transparent 60%), radial-gradient(800px 300px at 85% 0%, rgba(217,184,76,.10), transparent 60%), rgba(240,244,255,.60); } .project .thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.95) contrast(1.04) saturate(0.98); transform:scale(1.04); transition:transform .28s ease, filter .28s ease; } .project:hover .thumb img{ transform:scale(1.07); filter:brightness(.98) contrast(1.05) saturate(1); } .project .thumb::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(11,18,38,.18) 100%); } .project .body{padding:1.1rem 1.15rem 1.2rem;} .project .title{ font-weight:950; color:rgba(11,18,38,.98); margin-bottom:.30rem; letter-spacing:-0.02em; } .project .meta{ color:rgba(11,18,38,.70); font-weight:650; font-size:.9rem; } .project .tags{ margin-top:.75rem; display:flex; gap:.45rem; flex-wrap:wrap; } .tag{ display:inline-flex; align-items:center; padding:.32rem .62rem; border-radius:var(--radius-pill); background:rgba(63,99,242,.07); border:1px solid rgba(63,99,242,.14); color:rgba(11,18,38,.80); font-weight:850; font-size:.78rem; white-space:nowrap; } /* Testimonials */ .testimonials-wrap{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.15rem; } .quote{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; padding:1.55rem; box-shadow:var(--shadow-sm); transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease; position:relative; overflow:hidden; } .quote::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(500px 240px at 25% 0%, rgba(217,184,76,.10), transparent 55%), radial-gradient(540px 260px at 85% 20%, rgba(63,99,242,.09), transparent 55%); pointer-events:none; opacity:.95; } .quote:hover{ transform:translateY(-5px); border-color:rgba(63,99,242,.16); box-shadow:var(--shadow-md); } .quote .stars{ display:flex; gap:4px; margin-bottom:0.75rem; position:relative; z-index:1; } .quote .stars svg{width:18px;height:18px;fill:rgba(217,184,76,.96);} .quote p{ color:rgba(11,18,38,.88); font-style:italic; font-weight:550; position:relative; z-index:1; } .quote .who{ margin-top:.9rem; display:flex; gap:.8rem; align-items:center; position:relative; z-index:1; } .avatar{ width:44px;height:44px;border-radius:16px; background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); display:flex;align-items:center;justify-content:center; font-weight:900; color:#fff; box-shadow:0 16px 34px rgba(63,99,242,.16); flex-shrink:0; } .who strong{color:rgba(11,18,38,.95);font-weight:950;display:block;line-height:1.2} .who span{color:rgba(11,18,38,.66);font-weight:650;font-size:.88rem;display:block;margin-top:2px} /* FAQ */ .faq-wrap{ margin-top:2.4rem; max-width:980px; margin-left:auto; margin-right:auto; } .faq-card{ background:rgba(255,255,255,.96); border-radius:24px; border:1px solid rgba(11,18,38,.10); box-shadow:var(--shadow-md); overflow:hidden; position:relative; } .faq-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, rgba(63,99,242,.98), rgba(217,184,76,.92)); opacity:.98; } details.faq-item{ border-bottom:1px solid rgba(11,18,38,.10); background:transparent; } details.faq-item:last-child{border-bottom:none;} details.faq-item summary{ cursor:pointer; list-style:none; padding:1rem 1.1rem; font-weight:950; color:rgba(11,18,38,.92); display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background .16s ease, color .16s ease; } details.faq-item summary::-webkit-details-marker{display:none;} details[open].faq-item summary{ background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); color:#fff; } .faq-q{ display:flex; gap:.75rem; align-items:flex-start; min-width:0; } .faq-badge{ width:28px;height:28px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:rgba(63,99,242,.10); border:1px solid rgba(63,99,242,.16); color:rgba(11,18,38,.86); font-weight:950; flex:0 0 auto; } details[open] .faq-badge{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22); color:#fff; } .faq-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .faq-chevron{ width:34px;height:34px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:rgba(11,18,38,.04); border:1px solid rgba(11,18,38,.10); flex-shrink:0; transition:transform .20s ease, background .16s ease, border-color .16s ease; font-weight:1000; color:rgba(11,18,38,.82); } details[open] .faq-chevron{ transform:rotate(180deg); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff; } .faq-body{ padding:0.95rem 1.1rem 1.05rem; color:rgba(11,18,38,.80); font-weight:600; line-height:1.75; background:rgba(240,244,255,.48); } .faq-body strong{color:rgba(11,18,38,.92);} @media (max-width:640px){ details.faq-item summary{padding:.95rem .95rem;} .faq-body{padding:.9rem .95rem 1rem;} .faq-chevron{width:32px;height:32px;} .faq-badge{width:26px;height:26px;} } /* Contact */ .grid-contact{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start; margin-top:2.4rem; } .card{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; padding:1.7rem; box-shadow:var(--shadow-sm); } .contact-line{ display:flex; gap:.75rem; align-items:flex-start; margin-top:.75rem; font-weight:750; color:rgba(11,18,38,.92); } .muted{color:rgba(11,18,38,.66);font-weight:600} .form label{display:block;font-weight:850;font-size:0.9rem;margin:0 0 8px;color:rgba(11,18,38,.90)} .form input,.form textarea{ width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(11,18,38,.10); margin-bottom:12px; font-size:14px; outline:none; background:rgba(240,244,255,.62); color:rgba(11,18,38,.92); font-family:inherit; } .form input::placeholder,.form textarea::placeholder{color:rgba(11,18,38,.50)} .form textarea{min-height:130px;resize:vertical} /* Footer */ .elvexia-footer{ position:relative; background:linear-gradient(135deg, rgba(240,244,255,.86) 0%, rgba(246,248,255,.90) 100%); border-top:3px solid rgba(217,184,76,.96); overflow:hidden; } .elvexia-footer::before{ content:""; position:absolute; top:50%; right:4%; width:clamp(280px, 42vw, 520px); height:clamp(120px, 18vw, 220px); background-image:url('https://elvexia.fr/wp-content/uploads/2025/12/ChatGPT-Image-31-dec.-2025-14_52_24.png'); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:0.055; transform:translateY(-50%) rotate(-4deg); pointer-events:none; } .elvexia-footer .footer-top{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:44px clamp(20px, 4vw, 40px) 28px; display:grid; gap:18px; grid-template-columns:1.1fr 1fr 1.2fr; } .elvexia-footer .footer-box{ background:rgba(255,255,255,.92); border:1px solid rgba(11,18,38,.10); border-radius:18px; backdrop-filter:blur(10px); padding:20px 18px; box-shadow:var(--shadow-sm); } .elvexia-footer h4{ margin:0 0 12px; font-size:15px; font-weight:950; color:rgba(11,18,38,.92); letter-spacing:-0.02em; } .elvexia-footer p{ margin:0.35rem 0; font-size:13.5px; line-height:1.7; color:rgba(11,18,38,.70); } .elvexia-footer ul{list-style:none;margin:10px 0 0;padding:0;} .elvexia-footer li{ display:flex; gap:.55rem; align-items:flex-start; padding:7px 0; border-bottom:1px solid rgba(11,18,38,.10); font-size:13.5px; color:rgba(11,18,38,.78); } .elvexia-footer li:last-child{border-bottom:none;} .elvexia-footer a{ color:rgba(11,18,38,.78); border-bottom:1px solid transparent; transition:color .20s ease, padding-left .20s ease; } .elvexia-footer a:hover{ color:rgba(63,99,242,.92); padding-left:3px; } .footer-logo{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .footer-logo img{ width:auto; height:50px; max-width:260px; filter:drop-shadow(0 8px 18px rgba(11,18,38,.09)); } .footer-cta{ display:inline-flex; align-items:center; justify-content:center; margin-top:12px; padding:10px 14px; border-radius:999px; border:1px solid rgba(217,184,76,.46); background:linear-gradient(135deg, rgba(217,184,76,.96), rgba(207,174,69,.94)); color:#0B1226 !important; font-weight:950; font-size:13px; box-shadow:0 10px 22px rgba(217,184,76,.14); transition:transform .18s ease, box-shadow .18s ease; } .footer-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(217,184,76,.18); } .footer-bottom{ position:relative; z-index:1; border-top:1px solid rgba(11,18,38,.10); background:rgba(255,255,255,.62); text-align:center; } .footer-bottom small{ display:block; padding:14px clamp(20px, 4vw, 40px); color:rgba(11,18,38,.60); font-size:12px; font-weight:600; } @media (max-width:900px){ .elvexia-footer .footer-top{grid-template-columns:1fr;} .elvexia-footer::before{opacity:0.05; right:-10%;} } /* Responsive: boutons */ @media (max-width:768px){ .cta-row{flex-direction:column;width:100%;gap:.65rem !important;} .btn{ width:100%; max-width:100%; padding:.68rem 1.02rem; font-size:.90rem; border-radius:999px; box-shadow:0 10px 22px rgba(11,18,38,.08); } .btn:hover{transform:translateY(-1px);} .hero{min-height:68vh;} .grid-contact{grid-template-columns:1fr;} .nav-btn{padding:.56rem .90rem !important;} } @media (max-width:420px){ .btn{padding:.64rem .95rem;font-size:.88rem;} } /* Scroll reveal */ .reveal{ opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease; will-change: opacity, transform, filter; } .reveal.is-visible{ opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-stagger > *{ opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } .reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; } .reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .10s; } .reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .15s; } .reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .20s; } .reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .25s; } .reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .30s; } .reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .35s; } .reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .40s; } @media (prefers-reduced-motion: reduce){ .reveal, .reveal-stagger > *{ transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } .main-nav, .main-nav.scrolled{ transition:none !important; transform:none !important; } .hero .media img{transform:translate3d(0,0,0) !important;} } /* ZONES D’INTERVENTION */ .zones-wrap{ margin-top:2.2rem; display:grid; grid-template-columns:1.05fr .95fr; gap:1.2rem; align-items:stretch; } .zones-card{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; padding:1.45rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; } .zones-title{ margin:0 0 .35rem; font-weight:1000; letter-spacing:-0.02em; } .zones-sub{ margin:0 0 1rem; color:rgba(11,18,38,.70); font-weight:650; line-height:1.65; } .zones-note{ margin-top:.9rem; color:rgba(11,18,38,.62); font-weight:650; font-size:.90rem; } .map-shell{ border-radius:18px; overflow:hidden; border:1px solid rgba(11,18,38,.10); background:rgba(240,244,255,.62); box-shadow:0 18px 46px rgba(11,18,38,.07); } .map{ width:100%; height:340px; } .zones-grid{ display:grid; gap:.85rem; } .region{ border:1px solid rgba(11,18,38,.10); background:rgba(240,244,255,.42); border-radius:18px; padding:.95rem .95rem; } .region-head{ display:flex; align-items:center; gap:.55rem; font-weight:1000; color:rgba(11,18,38,.92); margin-bottom:.55rem; letter-spacing:-0.01em; } .region-ico{ width:34px;height:34px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg, rgba(63,99,242,.98), rgba(47,83,230,.96)); color:#fff; box-shadow:0 14px 30px rgba(63,99,242,.14); flex:0 0 auto; font-size:16px; } .city-list{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;} .city-list li{ display:flex; gap:.45rem; align-items:flex-start; font-weight:750; color:rgba(11,18,38,.78); line-height:1.45; padding:.35rem .35rem; border-radius:12px; } .city-list li:hover{ background:rgba(63,99,242,.06); } .city-list a{ color:rgba(11,18,38,.80); border-bottom:1px solid transparent; transition:color .18s ease; } .city-list a:hover{color:rgba(63,99,242,.92);} /* Galerie localisée */ .local-gallery{margin-top:2.1rem;} .gallery-grid{ margin-top:1.35rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.05rem; } .g-item{ background:rgba(255,255,255,.96); border:1px solid rgba(11,18,38,.10); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); } .g-item img{ width:100%; height:180px; object-fit:cover; display:block; border-bottom:1px solid rgba(11,18,38,.10); } .g-item figcaption{ padding:.95rem 1rem 1.05rem; font-weight:650; color:rgba(11,18,38,.78); line-height:1.55; } .g-item figcaption strong{font-weight:1000;color:rgba(11,18,38,.92);} @media (max-width:980px){ .zones-wrap{grid-template-columns:1fr;} .map{height:320px;} .gallery-grid{grid-template-columns:1fr;} .g-item img{height:200px;} }