:root{--ink:#171914;--muted:#667065;--paper:#fff;--soft:#f4f4f0;--accent:#56891f;--accent-2:#8db83d;--line:rgba(23,25,20,.14);--radius:20px;--shadow:0 20px 60px rgba(16,24,16,.12);--display:Fraunces,Georgia,serif;--body:Inter,Arial,sans-serif;--container:1180px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:-100px;background:var(--ink);color:#fff;padding:12px 16px;z-index:1000}.skip-link:focus{top:16px}.topbar{background:var(--ink);color:#fff;font-size:12px;letter-spacing:.025em}.topbar .container{display:flex;justify-content:space-between;gap:20px;padding-block:8px}.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-inner{min-height:86px;display:flex;align-items:center;gap:30px}.site-brand{display:flex;align-items:center;flex:0 0 auto}.brand-image{width:auto;height:62px;object-fit:contain}.brand-image--primary{height:auto;max-height:230px;max-width:270px}.header-menu{display:flex;align-items:center;justify-content:flex-end;gap:28px;flex:1}.main-nav{display:flex;align-items:center;gap:24px}.main-nav a{font-size:14px;font-weight:650;padding:30px 0 26px;border-bottom:3px solid transparent}.main-nav a:hover,.main-nav a[aria-current=page]{color:var(--accent);border-color:var(--accent)}.header-actions{display:flex;align-items:center;gap:18px}.phone-link{display:flex;flex-direction:column;line-height:1.2}.phone-link small{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.phone-link strong{font-size:15px}.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;background:var(--ink);margin:5px}.menu-toggle em{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:12px 20px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:999px;font-weight:750;line-height:1.1;transition:.2s ease}.button:hover{transform:translateY(-2px);filter:brightness(.96)}.button--ghost{background:transparent;color:var(--ink);border-color:var(--line)}.button--secondary{background:var(--ink);border-color:var(--ink)}.button--small{min-height:44px;padding:10px 16px;font-size:13px;gap:14px}.text-link{font-weight:750;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.eyebrow,.kicker{margin:0 0 16px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.lede{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:720px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--display);line-height:1.07;letter-spacing:-.025em}h1{font-size:clamp(38px,4.4vw,64px);margin-bottom:22px}h2{font-size:clamp(27px,3.2vw,44px);margin-bottom:20px}h3{font-size:25px;margin-bottom:14px}.hero{min-height:690px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:64px;padding:76px 0 54px}.hero__copy .lede{max-width:650px}.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.microcopy{font-size:12px;color:var(--muted);margin:16px 0 0}.hero__visual{position:relative;min-height:560px}.hero__photo{position:absolute;inset:0 0 60px 70px;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}.hero__photo img{width:100%;height:100%;object-fit:cover}.hero__brand{position:absolute;left:0;bottom:0;width:250px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}.hero__brand p{margin:12px 0 0;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}.trust-bar span{padding:22px 20px;border-right:1px solid var(--line);font-size:13px;color:var(--muted);text-align:center}.trust-bar span:last-child{border:0}.trust-bar strong{color:var(--ink)}.section{padding:100px 0}.section--tint{position:relative}.section--tint:before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--soft)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:46px}.section-heading h2{margin-bottom:0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.intro-grid p:not(.eyebrow){font-size:18px;color:var(--muted)}.card-grid{display:grid;gap:20px}.card-grid--3{grid-template-columns:repeat(3,1fr)}.service-card{position:relative;min-height:390px;padding:34px;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.service-card:after{content:"";position:absolute;right:-40px;bottom:-55px;width:150px;height:150px;border:34px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:50%}.card-index{margin-left:auto;color:var(--accent);font:700 13px var(--body)}.service-card h3{font-size:32px;margin-top:46px}.service-card p:not(.kicker){color:var(--muted)}.service-card .text-link{margin-top:auto;position:relative;z-index:2}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-card{position:relative;min-height:440px;overflow:hidden;border-radius:var(--radius);background:var(--ink)}.project-card img{width:100%;height:100%;position:absolute;object-fit:cover;transition:.45s ease}.project-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78))}.project-card:hover img{transform:scale(1.035)}.project-card span{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;color:#fff}.project-card small,.project-card strong{display:block}.project-card small{text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:rgba(255,255,255,.75)}.project-card strong{font-size:18px;margin-top:5px}.proof-split{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:90px}.portrait-wrap{height:620px;overflow:hidden;border-radius:var(--radius)}.portrait-wrap img{width:100%;height:100%;object-fit:cover}.check-list{padding:0;margin:28px 0 34px;list-style:none}.check-list li{padding:12px 0 12px 30px;border-bottom:1px solid var(--line);position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}.zone-callout{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line)}.zone-list{display:flex;flex-direction:column}.zone-list a{display:flex;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:700}.zone-list a:hover{color:var(--accent)}.cta-panel{margin-top:40px;margin-bottom:100px;padding:60px;background:var(--ink);color:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:50px}.cta-panel h2{font-size:clamp(34px,4vw,55px);max-width:720px}.cta-panel p:not(.eyebrow){color:rgba(255,255,255,.68);max-width:650px}.cta-panel .eyebrow{color:var(--accent-2)}.cta-actions{display:flex;flex-direction:column;gap:12px;min-width:235px}.cta-panel .button--ghost{color:#fff;border-color:rgba(255,255,255,.25)}.page-hero{min-height:440px;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;padding:100px 0 70px;border-bottom:1px solid var(--line)}.page-hero h1{max-width:820px;font-size:clamp(36px,4.2vw,58px)}.page-number{font:700 clamp(120px,18vw,220px)/.7 var(--display);color:color-mix(in srgb,var(--accent) 11%,transparent)}.page-hero--image{grid-template-columns:1fr .55fr;align-items:center}.page-hero__visual{height:390px;overflow:hidden;border-radius:var(--radius)}.page-hero__visual img{width:100%;height:100%;object-fit:cover}.split-list{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.split-list>div:first-child p:not(.eyebrow){color:var(--muted);font-size:18px}.list-panel{display:flex;flex-direction:column;border-top:1px solid var(--line)}.list-panel>a,.list-panel>span{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:24px 0;border-bottom:1px solid var(--line)}.list-panel strong{font-size:18px}.list-panel span,.list-panel small{color:var(--muted);text-align:right}.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.steps li{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.steps li>span,.feature-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;margin-bottom:46px}.steps strong{display:block;font-size:18px}.steps p{color:var(--muted);font-size:14px}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.feature-grid article{padding:42px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.feature-grid ul{padding-left:20px;color:var(--muted)}.feature-grid p{color:var(--muted)}.narrow{max-width:850px;margin-inline:auto}.faq{border-top:1px solid var(--line);margin-top:40px}.faq details{border-bottom:1px solid var(--line);padding:24px 0}.faq summary{cursor:pointer;font-weight:750;font-size:18px}.faq details p{padding-top:18px;color:var(--muted);max-width:750px}.proof-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.proof-points>div{padding:40px;border:1px solid var(--line);border-radius:var(--radius);text-align:center}.proof-points span{display:block;color:var(--accent);font:700 56px/1 var(--display)}.proof-points p{color:var(--muted);margin:12px 0 0}.project-grid--portrait{grid-template-columns:repeat(4,1fr)}.project-grid--portrait .project-card{min-height:430px}.before-after-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;align-items:center}.before-after-section>div:first-child p:not(.eyebrow){color:var(--muted)}.before-after{display:grid;grid-template-columns:1fr 1fr;gap:14px}.before-after figure{position:relative;margin:0;height:620px;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}.before-after img{width:100%;height:100%;object-fit:cover}.before-after figcaption{position:absolute;left:18px;top:18px;padding:8px 12px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.before-after figure:last-child figcaption{background:var(--accent)}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}.gallery-item{position:relative;padding:0;border:0;background:var(--ink);overflow:hidden;border-radius:var(--radius);cursor:zoom-in;color:#fff;text-align:left;min-height:460px;grid-column:span 6}.gallery-item:nth-child(1),.gallery-item:nth-child(4){grid-column:span 7}.gallery-item:nth-child(2),.gallery-item:nth-child(3){grid-column:span 5}.gallery-item:nth-child(5),.gallery-item:nth-child(6){grid-column:span 6}.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}.gallery-item:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82))}.gallery-item:hover img{transform:scale(1.025)}.gallery-item span{position:absolute;z-index:2;left:28px;right:28px;bottom:28px}.gallery-item small,.gallery-item strong{display:block}.gallery-item small{text-transform:uppercase;letter-spacing:.1em}.gallery-item strong{font-size:20px}.gallery-item em{position:absolute;right:0;bottom:0;font-style:normal}.lightbox{width:min(1000px,calc(100% - 40px));border:0;padding:0;background:#111;color:#fff;box-shadow:0 30px 100px #000;border-radius:12px}.lightbox::backdrop{background:rgba(0,0,0,.82)}.lightbox img{width:100%;max-height:80vh;object-fit:contain}.lightbox p{padding:16px 20px;margin:0}.lightbox__close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#111;font-size:26px;cursor:pointer}.zone-layout{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:100px}.map-card{text-align:center}.map-ring{border:1px dashed var(--accent);border-radius:50%;display:grid;place-items:center;aspect-ratio:1}.map-ring--outer{max-width:500px;padding:70px;background:color-mix(in srgb,var(--accent) 5%,transparent)}.map-ring--inner{width:100%;background:color-mix(in srgb,var(--accent) 9%,var(--paper));border-style:solid}.map-ring span{display:flex;flex-direction:column}.map-ring strong{font:700 30px var(--display)}.map-ring small{color:var(--muted)}.map-card>p{font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-top:18px;color:var(--muted)}.city-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:35px 0}.city-cards a{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:var(--radius)}.city-cards small{color:var(--accent);text-transform:uppercase;font-size:9px;letter-spacing:.12em}.city-cards strong{font-size:20px;margin:12px 0 30px}.city-cards span{font-size:12px;color:var(--muted)}.note{font-size:13px!important;color:var(--muted)}.timeline{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.timeline ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.timeline li{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}.timeline li>span{color:var(--accent);font-weight:800}.timeline li strong{font-size:18px}.timeline li p{color:var(--muted);margin:5px 0}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.values article{padding-right:30px;border-right:1px solid var(--line)}.values article:last-child{border:0}.values p:not(.eyebrow){color:var(--muted)}.source-note{display:grid;grid-template-columns:1fr 1fr;gap:100px}.source-note p{color:var(--muted)}.source-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}.source-links a{padding:16px 0;border-bottom:1px solid var(--line);font-weight:750}.source-links a:hover{color:var(--accent)}.contact-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:25px;align-items:start}.contact-panel,.quote-form{padding:46px;border:1px solid var(--line);border-radius:var(--radius)}.contact-panel{background:var(--ink);color:#fff;position:sticky;top:120px}.contact-panel .eyebrow{color:var(--accent-2)}.contact-line{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}.contact-line small,.contact-line strong{display:block}.contact-line small{color:rgba(255,255,255,.55);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.contact-line strong{font-size:16px;margin-top:4px;overflow-wrap:anywhere}.form-heading{display:flex;gap:20px;align-items:start;margin-bottom:35px}.form-heading>span{display:grid;place-items:center;width:44px;height:44px;background:var(--accent);border-radius:50%;color:#fff;font-weight:800}.form-heading h2{font-size:40px;margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-grid label{font-size:12px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;display:block;margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}.form-full{grid-column:1/-1}.checkbox{display:flex;gap:10px;align-items:start;font-weight:400!important}.checkbox input{width:auto;margin:4px 0 0}.form-status{font-size:13px;color:var(--accent);margin:12px 0 0}.brand-showcase{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.brand-stage{min-height:500px;display:grid;place-items:center;align-content:center;padding:50px;background:var(--soft);border-radius:var(--radius)}.brand-stage>p{margin:25px 0 0;color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800}.brand-showcase dl{margin-top:35px;border-top:1px solid var(--line)}.brand-showcase dt{padding:16px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.brand-showcase dd{margin:4px 0 0;padding:0 0 16px;border-bottom:1px solid var(--line);font-weight:700}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.swatches div{display:flex;flex-direction:column}.swatches span{height:170px;background:var(--swatch);border:1px solid var(--line);border-radius:var(--radius)}.swatches strong{margin-top:15px}.swatches small{color:var(--muted)}.ui-samples{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.sample-card{padding:34px;border:1px solid var(--line);border-radius:var(--radius)}.sample-card>small{display:block;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:30px}.sample-card>div{display:flex;gap:10px;flex-wrap:wrap}.sample-card h3{font-size:30px}.sample-card p{color:var(--muted)}.sample-stat{display:block;font:700 56px var(--display);color:var(--accent)}.prose{max-width:820px;margin-inline:auto}.prose h2{font-size:30px;margin-top:50px}.prose p{color:var(--muted)}.prose a{color:var(--accent);text-decoration:underline}.site-footer{background:var(--ink);color:#fff}.footer-main{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:70px;padding:75px 0}.footer-brand{display:flex;flex-direction:column;align-items:flex-start}.footer-brand p{color:rgba(255,255,255,.6);max-width:330px;margin:24px 0}.footer-brand>a{font-weight:700;margin:2px 0}.footer-main h2{font:800 12px var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2);margin-bottom:22px}.footer-main>div:not(:first-child){display:flex;flex-direction:column;gap:10px}.footer-main>div:not(:first-child) a{color:rgba(255,255,255,.7);font-size:13px}.footer-main a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.5)}.wordmark{display:flex;align-items:center;gap:12px}.wordmark-ap{display:grid;place-items:center;width:53px;height:53px;background:var(--ink);color:var(--accent-2);font:800 23px var(--body);border-radius:50%}.wordmark>span:last-child{display:flex;flex-direction:column;line-height:1.05;text-transform:uppercase}.wordmark strong{font-size:16px;letter-spacing:.02em}.wordmark small{font-size:8px;margin-top:5px;letter-spacing:.12em;color:var(--muted)}.wordmark--primary{flex-direction:column;gap:20px;text-align:center}.wordmark--primary .wordmark-ap{width:130px;height:130px;font-size:54px}.wordmark--primary strong{font-size:24px}.wordmark--primary small{font-size:9px} /* Concept 1 — proximité */.theme-proximite{--ink:#1a1d19;--muted:#62695e;--paper:#fbfbf8;--soft:#f0f1e9;--accent:#2e7d32;--accent-2:#8db83d;--line:rgba(26,29,25,.14);--radius:18px;--display:Fraunces,Georgia,serif}.theme-proximite .hero__photo{border-radius:120px 18px 18px 18px}.theme-proximite .service-card:first-child{background:#f5f7ed}.theme-proximite .service-card:nth-child(2){background:#fff}.theme-proximite .service-card:nth-child(3){background:#eef5ee}.theme-proximite .page-number{font-style:italic} /* Concept 2 — artisan */.theme-confiance{--ink:#0d223d;--muted:#617087;--paper:#fff;--soft:#f2f6fb;--accent:#1678c8;--accent-2:#5aa9e6;--line:rgba(13,34,61,.13);--radius:30px;--display:"Playfair Display",Georgia,serif}.theme-confiance .topbar{background:#147bc5}.theme-confiance .hero__photo{border-radius:50% 50% 28px 28px}.theme-confiance .hero__brand{border-radius:50%;width:245px;height:245px}.theme-confiance .service-card{border-radius:38px}.theme-confiance .service-card:nth-child(2){transform:translateY(20px)}.theme-confiance .button{box-shadow:0 10px 25px rgba(30,136,229,.18)}.theme-confiance .project-card,.theme-confiance .portrait-wrap{border-radius:34px} /* Concept 3 — technique */.theme-technique{--ink:#0e1a24;--muted:#65737e;--paper:#fff;--soft:#eef4f4;--accent:#009c98;--accent-2:#3fc9c2;--line:rgba(14,26,36,.15);--radius:4px;--display:Montserrat,Inter,sans-serif}.theme-technique h1,.theme-technique h2,.theme-technique h3{text-transform:uppercase;letter-spacing:-.045em}.theme-technique .eyebrow{font-family:Montserrat}.theme-technique .topbar{background:#009c98}.theme-technique .site-header{background:rgba(14,26,36,.97);color:#fff}.theme-technique .site-header .brand-image{background:#fff;padding:3px}.theme-technique .menu-toggle span{background:#fff}.theme-technique .phone-link small{color:rgba(255,255,255,.6)}.theme-technique .button{border-radius:2px;text-transform:uppercase;letter-spacing:.04em;font-size:12px}.theme-technique .button--ghost{color:inherit}.theme-technique .hero{margin-inline:calc(50% - 50vw);padding-inline:max(40px,calc((100vw - var(--container))/2));background:var(--ink);color:#fff}.theme-technique .hero .lede,.theme-technique .hero .microcopy{color:rgba(255,255,255,.63)}.theme-technique .hero .button--ghost{color:#fff;border-color:rgba(255,255,255,.25)}.theme-technique .hero__brand{background:var(--ink);border-color:rgba(255,255,255,.2)}.theme-technique .hero__brand .brand-image{background:#fff;padding:10px}.theme-technique .service-card{border-top:5px solid var(--accent)}.theme-technique .card-index{font-size:28px}.theme-technique .page-number{font-family:Montserrat}.theme-technique .cta-panel{background:linear-gradient(115deg,#0e1a24,#123a42)} /* Concept 4 — signature */.theme-signature{--ink:#171914;--muted:#67675d;--paper:#f5f1e4;--soft:#e8e1cf;--accent:#567a00;--accent-2:#b7e532;--line:rgba(23,25,20,.2);--radius:0;--display:Fraunces,Georgia,serif}.theme-signature .topbar{background:var(--accent-2);color:var(--ink);font-weight:700}.theme-signature .site-header{background:rgba(245,241,228,.94)}.theme-signature h1{font-size:clamp(40px,4.8vw,70px)}.theme-signature .hero{grid-template-columns:1.15fr .85fr}.theme-signature .hero__photo{inset:0 0 0 0;clip-path:polygon(13% 0,100% 0,100% 88%,85% 100%,0 100%,0 14%)}.theme-signature .hero__brand{left:-55px;bottom:40px;background:var(--accent-2);border:0;width:215px;min-height:175px}.theme-signature .hero__brand p{color:var(--ink)}.theme-signature .service-card{border-width:2px}.theme-signature .service-card:nth-child(2){background:var(--ink);color:#fff}.theme-signature .service-card:nth-child(2) p{color:rgba(255,255,255,.65)}.theme-signature .button{border-radius:0;background:var(--ink);border-color:var(--ink);color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.08em}.theme-signature .button--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.theme-signature .button--secondary{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}.theme-signature .cta-panel .button--primary{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}.theme-signature .cta-panel .button--ghost{color:#fff;border-color:#fff}.theme-signature .project-card,.theme-signature .portrait-wrap{border:2px solid var(--ink)}.theme-signature .page-number{-webkit-text-stroke:1px var(--ink);color:transparent}.theme-signature .wordmark-ap{border-radius:0;background:var(--accent-2);color:var(--ink)}.theme-signature .brand-stage{background:var(--ink);color:#fff}.theme-signature .footer-brand .wordmark-ap{background:var(--accent-2)}.theme-signature .footer-brand .wordmark small{color:rgba(255,255,255,.55)} /* Concept 5 — continuité de l’identité actuelle */.theme-continuity{--ink:#050505;--muted:#65675f;--paper:#f4f4ef;--soft:#e8e9e1;--accent:#78a91d;--accent-2:#8fc524;--line:rgba(5,5,5,.2);--radius:0;--display:Anton,Impact,sans-serif}.theme-continuity h1,.theme-continuity h2,.theme-continuity h3{text-transform:uppercase;letter-spacing:.005em;font-weight:400}.theme-continuity .eyebrow{color:var(--accent)}.theme-continuity .topbar{background:var(--accent-2);color:var(--ink);font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.09em}.theme-continuity .site-header{background:rgba(5,5,5,.97);color:#fff;border-color:rgba(255,255,255,.14)}.theme-continuity .site-header .brand-image{height:54px}.theme-continuity .menu-toggle span{background:#fff}.theme-continuity .phone-link small{color:rgba(255,255,255,.55)}.theme-continuity .main-nav a:hover,.theme-continuity .main-nav a[aria-current=page]{color:var(--accent-2);border-color:var(--accent-2)}.theme-continuity .button{border-radius:0;background:var(--accent-2);border-color:var(--accent-2);color:var(--ink);font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.theme-continuity .button--ghost{background:transparent;color:inherit;border-color:currentColor}.theme-continuity .button--secondary{background:var(--ink);border-color:var(--ink);color:#fff}.theme-continuity .hero{margin-inline:calc(50% - 50vw);padding-inline:max(40px,calc((100vw - var(--container))/2));background:var(--ink);color:#fff;border-bottom:14px solid var(--accent-2)}.theme-continuity .hero .lede,.theme-continuity .hero .microcopy{color:rgba(255,255,255,.66)}.theme-continuity .hero__photo{inset:0 0 30px 50px;border:6px solid var(--accent-2);clip-path:polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%)}.theme-continuity .hero__brand{left:-15px;bottom:0;width:286px;min-height:176px;background:var(--ink);border:2px solid #fff;box-shadow:12px 12px 0 var(--accent-2)}.theme-continuity .hero__brand .brand-image--primary{max-width:215px;max-height:130px}.theme-continuity .hero__brand p{color:rgba(255,255,255,.92);font-family:var(--body); font-weight:600;font-size:12.5px;letter-spacing:.005em;text-transform:none; line-height:1.35;white-space:nowrap}.theme-continuity .trust-bar{border-bottom:6px solid var(--ink)}.theme-continuity .service-card{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--accent-2)}.theme-continuity .service-card:nth-child(2){background:var(--ink);color:#fff}.theme-continuity .service-card:nth-child(2) p{color:rgba(255,255,255,.66)}.theme-continuity .card-index{font-family:Anton,sans-serif;font-size:28px}.theme-continuity .project-card,.theme-continuity .portrait-wrap{border:4px solid var(--ink)}/* le filet doit courir sur toute la largeur de l'ecran, alors que le hero reste dans le conteneur : la bordure est rendue transparente et le trait est peint par un pseudo-element en 100vw, sans toucher a la hauteur */ .theme-continuity .page-hero{position:relative;border-bottom:10px solid transparent} .theme-continuity .page-hero::after{content:"";position:absolute;left:50%;transform:translateX(-50%); bottom:-10px;width:100vw;height:10px;background:var(--accent-2)}.theme-continuity .page-number{-webkit-text-stroke:2px var(--accent);color:transparent}/* La bordure et l'ombre decalee etaient toutes deux en vert anis : le bloc vert du decalage se confondait avec le cadre et l'effet tombait a plat. Le cadre passe au noir du panneau, seul le decalage reste vert. */ .theme-continuity .cta-panel{background:var(--ink);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--accent-2)}.theme-continuity .brand-stage{background:var(--ink);border:8px solid var(--accent-2)}.theme-continuity .brand-stage .brand-image--primary{max-width:420px;max-height:280px}.theme-continuity .current-brand-proof{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}.current-brand-images{display:grid;grid-template-columns:1fr 1fr;gap:14px}.current-brand-images img{width:100%;height:430px;object-fit:cover;border:4px solid var(--ink)}.current-brand-proof p:not(.eyebrow){color:var(--muted)}.continuity-note{margin-top:28px;padding:20px;border-left:7px solid var(--accent-2);background:var(--soft);font-weight:700} @media(max-width:1050px){.main-nav{gap:14px}.main-nav a{font-size:12px}.phone-link{display:none}/* remplace par .button--phone */.hero{gap:36px}.card-grid--3{grid-template-columns:repeat(2,1fr)}.service-card:last-child{grid-column:1/-1}.project-grid--portrait{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:repeat(3,1fr);gap:40px}.footer-brand{grid-column:1/-1}} @media(max-width:820px){.container{width:min(100% - 28px,var(--container))}.topbar .container span:last-child{display:none}.header-inner{min-height:74px}.brand-image{height:52px}.menu-toggle{display:block}.header-menu{display:none;position:absolute;left:0;right:0;top:100%;padding:20px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.12)}.header-menu.is-open{display:block}.main-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:13px 0;border-bottom:1px solid var(--line)}.header-actions{margin-top:18px}.header-actions .button{width:100%}.theme-technique .header-menu,.theme-continuity .header-menu{background:var(--ink)}.hero,.theme-signature .hero{grid-template-columns:1fr;padding:55px 0;min-height:auto}.theme-technique .hero,.theme-continuity .hero{margin-inline:calc(50% - 50vw);padding-inline:14px}.hero__visual{min-height:500px}.hero__photo{inset:0 0 60px 20px}.theme-signature .hero__brand{left:0}.trust-bar{grid-template-columns:1fr 1fr}.trust-bar span:nth-child(2){border-right:0}.section{padding:70px 0}.intro-grid,.proof-split,.zone-callout,.split-list,.zone-layout,.timeline,.source-note,.contact-layout,.brand-showcase,.before-after-section,.current-brand-proof{grid-template-columns:1fr;gap:45px}.portrait-wrap{height:560px}.card-grid--3{grid-template-columns:1fr}.service-card:last-child{grid-column:auto}.project-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.page-hero,.page-hero--image{grid-template-columns:1fr;padding:70px 0 50px}.page-number{display:none}.page-hero__visual{height:350px}.proof-points{grid-template-columns:1fr}.gallery-item,.gallery-item:nth-child(n){grid-column:span 6}.city-cards{grid-template-columns:1fr}.values{grid-template-columns:1fr}.values article{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.contact-panel{position:static}.swatches{grid-template-columns:repeat(3,1fr)}.ui-samples{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.cta-panel{padding:40px;align-items:flex-start;flex-direction:column}} @media(max-width:560px){body{font-size:15px}h1{font-size:44px}.topbar .container{justify-content:center}.hero__visual{min-height:420px}.hero__photo{inset:0 0 40px}.hero__brand{width:180px;min-height:145px;padding:16px}.brand-image--primary{max-height:150px;max-width:180px}.trust-bar{grid-template-columns:1fr}.trust-bar span{border-right:0;border-bottom:1px solid var(--line)}.section-heading{align-items:flex-start;flex-direction:column}.card-grid--3,.project-grid,.project-grid--portrait,.feature-grid,.steps,.before-after,.current-brand-images{grid-template-columns:1fr}.project-card{min-height:400px}.before-after figure{height:460px}.current-brand-images img{height:360px}.gallery{display:block}.gallery-item{display:block;width:100%;margin-bottom:14px;min-height:380px}.form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}.quote-form,.contact-panel{padding:26px}.swatches{grid-template-columns:1fr 1fr}.swatches span{height:120px}.footer-main{grid-template-columns:1fr}.cta-panel{margin-bottom:65px}.page-hero__visual{height:310px}} /* ---- bouton telephone : CTA principal, visible aussi sur mobile ---- */ .button--phone{order:3;gap:10px;padding:11px 20px;min-height:46px} .button--phone strong{font-size:15px;font-weight:750;letter-spacing:.01em;white-space:nowrap} .button-icon{width:17px;height:17px;flex:none} .header-menu{order:2} /* ---- retour a la presentation des pistes ---- */ .back-to-pistes{ position:fixed;right:22px;bottom:22px;z-index:200; display:inline-flex;align-items:center;gap:9px; padding:12px 19px;border-radius:999px; background:#151915;color:#fff; font-size:13px;font-weight:700; border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 28px rgba(0,0,0,.3); transition:transform .2s ease,box-shadow .2s ease; } .back-to-pistes:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.36)} .back-to-pistes:focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media(max-width:820px){ .button--phone{ order:1;margin-left:auto; width:44px;height:44px;min-height:44px;padding:0; border-radius:50%;justify-content:center;gap:0; } .button--phone strong{display:none} .button-icon{width:19px;height:19px} .menu-toggle{order:2;margin-left:10px} } @media(max-width:520px){ .back-to-pistes{right:12px;bottom:12px;padding:10px 15px;font-size:12px} } @media(prefers-reduced-motion:reduce){ .back-to-pistes,.button--phone{transition:none} } /* ---- respiration mobile : marges resserrees et listes empilees ---- */ @media(max-width:820px){ .section{padding:46px 0} .split-list{gap:30px} /* listes a deux colonnes : illisibles en 375px, on empile */ .list-panel>a,.list-panel>span{ flex-direction:column;align-items:flex-start;gap:5px;padding:16px 0; } .list-panel span,.list-panel small{text-align:left} .list-panel strong{font-size:16.5px} /* etapes : numero colle au titre, cartes compactes et centrees */ .steps li{padding:20px 18px;text-align:center} .steps li>span,.feature-grid article>span{ width:34px;height:34px;margin:0 auto 12px;font-size:11.5px; } .steps strong{font-size:17px} .steps p{margin-top:6px} /* en-tete : rythme resserre entre logo, telephone et menu */ .header-inner{gap:12px;min-height:74px} } @media(max-width:520px){ .section{padding:38px 0} } /* ---- titres principaux : moins imposants sur petit ecran ---- */ @media(max-width:820px){ h1,.page-hero h1,.hero h1{font-size:clamp(30px,8.4vw,42px);line-height:1.08} .theme-signature h1{font-size:clamp(32px,9vw,46px)} h2{font-size:clamp(24px,6.4vw,34px)} } /* Anton reste sur les titres et les grands chiffres ; le numero doit se dicter */ .theme-continuity .button--phone strong{font-family:var(--body);font-weight:800;letter-spacing:.02em} /* les titres de carte sont des h2 pour la hierarchie, rendus comme avant */ .service-card h2{font-size:32px;margin-top:46px} /* ---- normes de consultation ---- */ /* cibles tactiles : 25px etait sous le minimum recommande */ @media(max-width:820px){ .text-link{display:inline-flex;align-items:center;min-height:44px} .footer-main>div:not(:first-child) a{display:inline-flex;align-items:center;min-height:44px} .footer-bottom a{display:inline-flex;align-items:center;min-height:40px} .footer-brand>a{display:inline-flex;align-items:center;min-height:44px} .list-panel>a{min-height:44px} } /* longueur de ligne : au-dela de ~90 caracteres la lecture decroche */ .section p:not(.eyebrow):not(.kicker):not(.lede){max-width:68ch} .intro-grid>div>p,.narrow>p,.split-list>div>p{max-width:68ch} /* longueur de ligne : plafond etendu aux paragraphes de bloc */ main p:not(.eyebrow):not(.kicker):not(.piste-line){max-width:68ch} .lede{max-width:min(68ch,720px)} /* ---- corrections d'identite et de mise en page ---- */ /* le logo sur fond blanc faisait un placard dans les en-tetes sombres */ .theme-technique .site-header .brand-image{background:none;padding:0;filter:brightness(0) invert(1)} /* Un selecteur `.theme-continuity` etait reste sans bloc de declarations : le parseur avalait le @media qui suivait, et AUCUNE de ses regles ne s'appliquait. Le bloc est retabli, expurge de ce qui a ete decide autrement depuis : la carte de marque du hero reste visible et a ete redimensionnee pour le telephone, et le rayon de 14 px aurait arrondi les angles vifs de la piste 01. */ @media(max-width:820px){ .theme-continuity .cta-panel{box-shadow:8px 8px 0 var(--accent-2)} } /* ================= TUNNEL DE QUALIFICATION ================= */ .tunnel{background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:28px} @media(max-width:820px){.tunnel{padding:20px 16px}} .t-progress{display:flex;align-items:center;gap:10px;margin-bottom:24px} .t-bar{flex:1;height:5px;background:var(--line);border-radius:99px;overflow:hidden} .t-bar i{display:block;height:100%;width:20%;background:var(--accent);border-radius:99px;transition:width .3s ease} .t-count{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;letter-spacing:.06em} .tstep{border:0;padding:0;margin:0;min-width:0} .tstep[hidden]{display:none} .tstep legend{padding:0;margin:0 0 4px;font-size:clamp(19px,3.4vw,24px);font-weight:800;line-height:1.2;color:var(--ink)} .t-help{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.55} /* choix en vignettes */ .t-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0} @media(max-width:520px){.t-tiles{grid-template-columns:1fr}} .t-tile{position:relative} .t-tile input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .t-tile span{ display:flex;align-items:center;min-height:56px;padding:12px 16px; border:1.5px solid var(--line);border-radius:12px;background:var(--paper); font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;transition:.15s ease; } .t-tile input:hover+span{border-color:var(--accent)} .t-tile input:checked+span{border-color:var(--accent);background:var(--accent);color:#fff} .t-tile input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px} /* champs */ .t-field{display:block;margin-top:16px} .t-field>span{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:7px} .t-field input,.t-field select,.t-field textarea{ width:100%;font:inherit;font-size:16px;padding:14px; border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink); } .t-field textarea{min-height:110px;resize:vertical} .t-field input:focus,.t-field select:focus,.t-field textarea:focus{outline:none;border-color:var(--accent)} .t-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:520px){.t-row{grid-template-columns:1fr}} /* photos */ .t-photos{margin-top:16px;border:1.5px dashed var(--line);border-radius:12px;padding:18px;text-align:center} .t-photos label{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;cursor:pointer} .t-photos input{position:absolute;width:1px;height:1px;opacity:0} .t-photos p{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5} .t-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center} .t-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} /* navigation */ .t-nav{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .t-nav .t-next{margin-left:auto} @media(max-width:520px){ .t-nav{flex-direction:column-reverse} .t-nav .t-next,.t-nav .t-prev{width:100%;margin-left:0} } .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border:1.5px solid var(--accent);border-radius:99px;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:.15s ease} .t-btn:hover{filter:brightness(.94)} .t-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .t-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .t-error{margin:14px 0 0;font-size:14px;font-weight:600;color:#b3261e} .t-error:empty{display:none} /* recapitulatif */ .t-recap{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:4px} .t-recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px} .t-recap dt{font-weight:800;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding-top:3px} .t-recap dd{margin:0;color:var(--ink)} .t-done{text-align:center;padding:10px 0} .t-done h3{font-size:22px;font-weight:800;margin:0 0 10px} .t-done p{color:var(--muted);font-size:15px;max-width:46ch;margin:0 auto;line-height:1.6} /* utilitaires tunnel */ [hidden]{display:none!important} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* questions et champ commune filtrant */ .t-q{margin:22px 0 10px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .t-tiles--2{grid-template-columns:1fr 1fr} @media(max-width:520px){.t-tiles--2{grid-template-columns:1fr 1fr}.t-tiles--2 .t-tile span{min-height:52px;font-size:14px;padding:10px 12px}} .t-combo{position:relative} .t-combo>input{width:100%;font:inherit;font-size:16px;padding:14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)} .t-combo>input:focus{outline:none;border-color:var(--accent)} .t-combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none; background:var(--paper);border:1.5px solid var(--accent);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:260px;overflow:auto} .t-combo-list li{padding:12px 12px;border-radius:7px;font-size:15.5px;cursor:pointer;min-height:44px;display:flex;align-items:center} .t-combo-list li:hover,.t-combo-list li.is-on{background:var(--accent);color:#fff} .t-combo-note{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5} /* ecran de confirmation */ .t-check{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font-size:30px;line-height:1} .t-done h3{font-size:24px} .t-ref{margin-top:16px!important;font-size:14px;color:var(--muted)} .t-ref strong{color:var(--ink);letter-spacing:.04em} .t-urgent{margin-top:14px!important;font-size:14px} .t-urgent a{font-weight:800;color:var(--accent)} /* pied de page resserre sur petit ecran */ @media(max-width:820px){ .footer-main{gap:30px;padding:44px 0} .footer-main h2{margin-bottom:10px} .footer-brand p{margin:14px 0} /* la cible de 44px suffit, la gouttiere doublait l'espacement */ .footer-main>div:not(:first-child){gap:0} .footer-bottom{flex-direction:column;gap:2px;padding:16px 0;text-align:left} } @media(max-width:560px){ /* deux colonnes de liens plutot qu'un empilement : moitie moins haut */ .footer-main{grid-template-columns:1fr 1fr;gap:22px 20px;padding:34px 0} .footer-brand{grid-column:1/-1} .footer-main h2{margin-bottom:6px} } /* ================= DISPOSITIF DE COMMUNICATION ================= */ .ch-sec{padding:52px 0;border-top:1px solid var(--line)} .ch-sec>.eyebrow{margin-bottom:6px} .ch-sec>h2{margin:0 0 8px} .ch-int{max-width:62ch;color:var(--muted);margin:0 0 26px} /* grille de declinaisons */ .ch-grid{display:grid;gap:14px} .ch-grid--3{grid-template-columns:repeat(3,1fr)} .ch-grid--2{grid-template-columns:1fr 1fr} .ch-grid--4{grid-template-columns:repeat(4,1fr)} .ch-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)} .ch-vis{display:grid;place-items:center;padding:26px;min-height:150px} .ch-vis img{max-width:80%;max-height:88px;object-fit:contain} .ch-vis--clair{background:#fff} .ch-vis--sombre{background:var(--ink)} .ch-vis--accent{background:var(--accent)} .ch-vis--gris{background:#f2f1ef} .ch-leg{padding:12px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:var(--paper)} .ch-leg b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px} /* couleurs */ .ch-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .ch-col span{display:block;height:78px;border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:0} .ch-col b{display:block;font-size:12.5px;margin-top:9px} .ch-col small{display:block;font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace;letter-spacing:.02em} /* typo */ .ch-typo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ch-typo>div{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--paper)} .ch-typo p:first-child{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px} .ch-spec{font-size:38px;line-height:1.05;margin:0 0 8px;letter-spacing:-.02em} .ch-spec--d{font-family:var(--display)} .ch-alpha{font-size:14px;color:var(--muted);margin:0;word-break:break-all} /* supports imprimes */ /* reseaux sociaux */ .ch-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6} @media(max-width:900px){ .ch-grid--3,.ch-grid--2,.ch-grid--4,.ch-typo{grid-template-columns:1fr} .ch-cols{grid-template-columns:1fr 1fr 1fr} .ch-sec{padding:38px 0} } @media(max-width:520px){.ch-cols{grid-template-columns:1fr 1fr}} /* ---- lettrage de substitution pour la piste sans fichier logo ---- */ .ch-mark{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink)} .ch-mark-ap{font-family:var(--display);font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;display:flex;gap:2px;align-items:baseline} .ch-mark-ap i{font-style:normal;font-weight:400;opacity:.5;margin:0 2px} .ch-mark-w{display:flex;flex-direction:column;gap:2px} .ch-mark-w strong{font-size:.86rem;font-weight:800;letter-spacing:.14em} .ch-mark-w small{font-size:.64rem;opacity:.7;letter-spacing:.06em} .ch-vis--sombre .ch-mark,.ch-vis--accent .ch-mark,.ch-cv--v .ch-mark,.ch-fl-haut .ch-mark,.ch-fb-cover .ch-mark,.pr-cv--v .ch-mark,.pr-fl-haut .ch-mark,.pr-fbc .ch-mark,.pr-fbp .ch-mark{color:#fff} .ch-vis--noir .ch-mark{color:#000} .pr-cv .ch-mark-ap{font-size:9mm} .pr-cv .ch-mark-w strong{font-size:3mm} .pr-cv .ch-mark-w small{font-size:2.2mm} .pr-fl-haut .ch-mark-ap{font-size:15mm} .pr-fl-haut .ch-mark-w strong{font-size:4.2mm} .pr-fl-haut .ch-mark-w small{font-size:3mm} .pr-fbc .ch-mark-ap{font-size:86px} .pr-fbc .ch-mark-w strong{font-size:24px} .pr-fbc .ch-mark-w small{font-size:17px} /* ---- supports prets a imprimer ---- */ .ch-tools{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0} .ch-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:999px; border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer} .ch-btn--g{background:transparent;color:var(--ink)} .ch-btn:hover{filter:brightness(1.12)} .imp{position:fixed;inset:0;background:#5c625a;display:none;z-index:90;overflow:auto} .imp[open]{display:block} .imp-bar{position:sticky;top:0;z-index:2;display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:12px 16px;background:var(--ink)} .imp-bar span{margin-right:auto;color:rgba(255,255,255,.75);font-size:12.5px} .imp-bar button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer} .imp-bar .p{background:var(--accent);border-color:var(--accent)} .imp-zone{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px} /* carte : 85x55 + 3mm de fond perdu = 91x61 */ .pr-cv{width:91mm;height:61mm;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;flex-direction:column;padding:8mm 8mm 7mm} .pr-cv--v{background:var(--ink);color:#fff} .pr-nom{font-size:3.4mm;font-weight:800;line-height:1.3} .pr-nom small{display:block;font-weight:400;font-size:2.5mm;letter-spacing:.06em;text-transform:uppercase;opacity:.62;margin-top:.6mm} .pr-co{font-size:2.6mm;line-height:1.6;opacity:.75} .pr-cv--v .pr-bas{font-size:2.7mm;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--accent-2)} .pr-coupe{position:absolute;inset:3mm;border:.2mm dashed rgba(128,128,128,.5);pointer-events:none} /* flyer : A5 148x210 + 3mm = 154x216 */ .pr-fl{width:154mm;height:216mm;background:var(--paper);color:var(--ink);position:relative;overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;flex-direction:column} .pr-fl-haut{background:var(--ink);color:#fff;padding:14mm 12mm 9mm;text-align:center} .pr-fl-haut img{max-width:56mm;max-height:14mm;margin:0 auto 4mm} .pr-fl-haut p{margin:0;font-size:3mm;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:800} .pr-fl-img{height:52mm;background:#ddd;overflow:hidden} .pr-fl-img img{width:100%;height:100%;object-fit:cover} .pr-fl-corps{padding:8mm 12mm;flex:1} .pr-fl-corps h4{margin:0 0 4mm;font-family:var(--display);font-size:7mm;line-height:1.12} .pr-fl-corps ul{margin:0;padding-left:5mm;font-size:3.4mm;line-height:1.9} .pr-fl-bas{background:var(--accent);color:#fff;padding:8mm 12mm;text-align:center} .pr-fl-bas b{display:block;font-size:8mm;letter-spacing:.02em;line-height:1} .pr-fl-bas span{display:block;font-size:3mm;opacity:.9;margin-top:2mm} .pr-fl-bas small{display:block;font-size:2.5mm;opacity:.75;margin-top:3mm} /* visuels reseaux : dimensions en pixels reels */ .pr-px{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3);transform-origin:top center} .pr-fbc{width:820px;height:312px;background:var(--ink);display:grid;place-items:center;padding:26px} .pr-fbc img{max-width:330px;max-height:150px;object-fit:contain;filter:brightness(0) invert(1)} .pr-fbp{width:1200px;height:630px;background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:70px} .pr-fbp p{margin:0;font-size:20px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.86} .pr-fbp h4{margin:0;font-family:var(--display);font-size:64px;line-height:1.06;max-width:20ch} .pr-fbp b{font-size:34px} @media print{ /* sans ceci le navigateur supprime les aplats : verso sombre blanc, picto invisible */ *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important} body>*:not(.imp){display:none!important} .imp{position:static;display:block!important;background:#fff} .imp-bar{display:none} .imp-zone{padding:0;gap:0;display:block} .pr-cv,.pr-fl{box-shadow:none;page-break-after:always;break-after:page} .pr-coupe{display:none} @page{margin:6mm} } /* ---- visuels sociaux avec photo ---- */ .sv{position:relative;overflow:hidden;background:var(--ink)} .sv img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,9,.92) 0%,rgba(8,10,9,.78) 42%,rgba(8,10,9,.25) 100%)} .sv-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2%;color:#fff} .sv-in .marque{display:flex;align-items:center;gap:3%} .sv-in .marque img{object-fit:contain} .sv-in .accroche{font-family:var(--display);line-height:1.08;margin:0} .sv-in .meta{margin:0;opacity:.82;letter-spacing:.04em} .sv-in .tel{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:#fff;font-weight:800;border-radius:999px;width:fit-content} /* couverture 820x312 */ .sv-cover{width:820px;height:312px} .sv-cover .sv-in{padding:0 116px} .sv-cover .marque img{max-width:230px;max-height:56px} .sv-cover .accroche{font-size:30px;max-width:19ch;margin:12px 0 6px} .sv-cover .meta{font-size:15px} .sv-cover .tel{font-size:19px;padding:9px 20px;margin-top:14px} .sv-safe{position:absolute;left:50%;top:0;transform:translateX(-50%);width:640px;height:100%; border-left:1px dashed rgba(255,255,255,.35);border-right:1px dashed rgba(255,255,255,.35);z-index:3; display:flex;align-items:flex-end;justify-content:center} .sv-safe span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-bottom:6px} /* publication 1200x630 */ .sv-post{width:1200px;height:630px} .sv-post .sv-in{padding:0 76px} .sv-post .marque img{max-width:300px;max-height:74px} .sv-post .accroche{font-size:60px;max-width:15ch;margin:26px 0 10px} .sv-post .meta{font-size:23px} .sv-post .tel{font-size:32px;padding:14px 30px;margin-top:26px} /* photo de profil 170x170 */ .sv-pp{width:170px;height:170px;border-radius:50%;background:var(--accent);display:grid;place-items:center;overflow:hidden;flex:none} .sv-pp img{width:76%;height:76%;object-fit:contain} .sv-pp .ch-mark{color:#fff} .sv-pp .ch-mark-ap{font-size:44px} .sv-pp .ch-mark-w strong{font-size:11px} .sv-pp .ch-mark-w small{display:none} .sv-cover .ch-mark-ap{font-size:46px} .sv-cover .ch-mark-w strong{font-size:15px} .sv-post .ch-mark-ap{font-size:66px} .sv-post .ch-mark-w strong{font-size:21px} /* apercus reduits dans la page */ .sv-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)} .sv-scale{transform-origin:top left} .sv-legende{padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} .sv-legende b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px} .sv-pp-row{display:flex;align-items:center;gap:20px;padding:22px} /* ---- apercu mis a l'echelle : meme composant qu'a l'impression ---- */ .mini-box{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)} .mini-zone{overflow:hidden} .mini{transform-origin:top left} .mini-leg{padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} .mini-leg b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px} .ch-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:820px){.ch-duo{grid-template-columns:1fr}} /* composition de la carte */ .pr-cv{width:91mm;height:61mm;padding:7.5mm 8mm;display:flex;flex-direction:column; justify-content:space-between;position:relative;overflow:hidden;background:var(--paper);color:var(--ink)} .pr-cv>*{position:relative;z-index:2} .pr-cv .pr-wm{position:absolute;right:-11mm;bottom:-13mm;width:42mm;height:auto;max-width:none;max-height:none; opacity:.05;z-index:1;object-fit:contain;pointer-events:none} .pr-cv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4mm;background:var(--accent);z-index:3} .pr-cv .pr-logo{max-width:40mm;max-height:11.5mm;width:auto;object-fit:contain;display:block} .pr-nom{margin:0 0 2.2mm;font-size:4.8mm;font-weight:800;line-height:1.15;letter-spacing:-.02em} .pr-nom small{display:block;margin-top:1.1mm;font-size:2.35mm;font-weight:700;letter-spacing:.15em; text-transform:uppercase;opacity:.5} .pr-co{margin:0;padding-top:2.2mm;border-top:.25mm solid rgba(128,128,128,.42);font-size:2.65mm;line-height:1.6;opacity:.72} .pr-co b{display:block;margin-bottom:.8mm;font-size:4mm;font-weight:800;letter-spacing:.01em;opacity:1;color:var(--accent-3,var(--ink))} .pr-co span{display:block} .pr-cv--v{background:var(--ink);color:#fff;align-items:center;justify-content:center;gap:4.5mm;text-align:center} .pr-cv--v::before{content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(115% 85% at 18% -10%,rgba(255,255,255,.13),rgba(255,255,255,0) 62%)} .pr-cv--v::after{background:var(--accent)} .pr-cv--v .pr-logo{max-width:46mm;max-height:13.5mm} .pr-cv--v .pr-serv{margin:0;font-size:2.8mm;line-height:1.85;opacity:.76} .pr-cv--v .pr-bas{margin:0;font-size:2.5mm;letter-spacing:.17em;text-transform:uppercase; font-weight:800;color:var(--accent-2)} /* composition du flyer */ .pr-fl{display:flex;flex-direction:column} .pr-fl-hero{position:relative;height:92mm;overflow:hidden;background:var(--ink);flex:none} .pr-fl-hero .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pr-fl-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,10,9,.72) 0%,rgba(8,10,9,.18) 34%,rgba(8,10,9,.86) 100%)} .pr-fl-hero-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 12mm 9mm;color:#fff} .pr-fl-hero-in .pr-fl-logo{max-width:58mm;max-height:15mm;width:auto;object-fit:contain;display:block;margin-bottom:4mm} .pr-fl-zone{margin:0;font-size:3mm;letter-spacing:.17em;text-transform:uppercase;font-weight:800;color:var(--accent-2)} .pr-fl-corps{flex:1;padding:9mm 12mm 6mm;display:flex;flex-direction:column} .pr-fl-badge{align-self:flex-start;background:var(--accent);color:#fff;font-size:2.7mm;font-weight:800; letter-spacing:.15em;text-transform:uppercase;padding:1.9mm 4.2mm;border-radius:99mm;margin-bottom:5mm} .pr-fl-corps h4{margin:0 0 5.5mm;font-family:var(--display);font-size:7.4mm;line-height:1.1;letter-spacing:-.02em} .pr-fl-corps ul{list-style:none;padding:0;margin:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3.175mm 6.35mm} .pr-fl-corps li{font-size:3.3mm;line-height:4.7625mm;padding-left:5.292mm;position:relative} .pr-fl-corps li::before{content:"";position:absolute;left:0;top:1.7198mm;width:2.9104mm;height:.7408mm;background:var(--accent)} .pr-fl-bas{flex:none;background:var(--ink);color:#fff;padding:7mm 12mm;text-align:center;position:relative} .pr-fl-bas::before{content:"";position:absolute;left:0;right:0;top:0;height:1.6mm;background:var(--accent)} .pr-fl-bas b{display:block;font-size:9mm;line-height:1;letter-spacing:.01em} .pr-fl-bas span{display:block;font-size:2.9mm;opacity:.82;margin-top:2.4mm} .pr-fl-bas small{display:block;font-size:2.4mm;opacity:.5;margin-top:3.4mm} /* ---- Lockup vectoriel ---------------------------------------------------- Le picto est un masque SVG et le texte de la vraie typo : la declinaison blanche ou noire n'est plus un fichier a part, c'est `color`. Les PNG d'origine etaient des detourages de JPEG, impossibles a nettoyer. */ .lk{display:inline-flex;align-items:center;gap:.52em;line-height:1;color:inherit; font-family:var(--lk-font,Inter),Arial,sans-serif} .lk-p{flex:none;height:2.6em;width:calc(2.6em * var(--lk-ratio,1.26));background:currentColor; -webkit-mask:url(assets/picto.svg) center/contain no-repeat; mask:url(assets/picto.svg) center/contain no-repeat} .lk-t{display:flex;flex-direction:column;align-items:stretch;min-width:0} .lk-t b{font-weight:600;font-size:1em;letter-spacing:.04em;text-transform:uppercase; white-space:nowrap;text-align:center;text-indent:.04em} .lk-t i{font-style:normal;font-weight:500;font-size:.44em;letter-spacing:.22em;text-transform:uppercase; display:flex;align-items:center;gap:.62em;margin:.3em 0 .26em;white-space:nowrap} .lk-t i span{flex:none;text-indent:.22em} .lk-t i::before,.lk-t i::after{content:"";height:.17em;background:currentColor;flex:1 1 auto;min-width:.8em} .lk-t em{font-style:normal;font-weight:700;font-size:.30em;letter-spacing:.13em;text-transform:uppercase; white-space:nowrap;opacity:.94} .lk--sq{flex-direction:column;gap:.34em} .lk--sq .lk-t{align-items:center} .theme-confiance .lk{--lk-font:"Permanent Marker"} .theme-confiance .lk-t b{font-weight:400;letter-spacing:.01em;text-transform:none;font-size:1.18em} .theme-confiance .lk-t i,.theme-confiance .lk-t em{font-family:Montserrat,Inter,sans-serif} .theme-proximite .lk{--lk-ratio:1.26} .theme-confiance .lk{--lk-ratio:1.14} .theme-technique .lk{--lk-ratio:1.08} .ch-vis--sombre .lk,.ch-vis--accent .lk{color:#fff} .ch-vis--gris .lk{color:#000} .sv-pp .lk,.sv-in .lk,.pr-cv--v .lk,.pr-fl-hero-in .lk{color:#fff} .ch-vis .lk{font-size:19px} .ch-vis--sq .lk{font-size:21px} .pr-cv .lk{font-size:3.6mm} .pr-cv--v .lk{font-size:4.2mm} .pr-fl-hero-in .lk{font-size:5.4mm;margin-bottom:4mm} .sv-cover .lk{font-size:21px} .sv-post .lk{font-size:33px} .sv-pp .lk{font-size:15px} .pr-cv .pr-wm{background:currentColor;-webkit-mask:url(assets/picto.svg) center/contain no-repeat; mask:url(assets/picto.svg) center/contain no-repeat;height:44mm;aspect-ratio:var(--lk-ratio,1.26)} /* ---- Lockup en en-tete et en pied ---- */ .site-brand .lk{font-size:21px} .footer-brand .lk{font-size:19px;color:#fff;margin-bottom:4px} .sv-pp .lk-p,.site-brand .lk-p,.footer-brand .lk-p{flex:none} @media(max-width:820px){.site-brand .lk{font-size:18px}.footer-brand .lk{font-size:17px}} @media(max-width:560px){.site-brand .lk{font-size:16px}} .hero__brand .lk{font-size:26px} @media(max-width:560px){.hero__brand .lk{font-size:20px}} /* piste 04 : le bloc de marque est sur fond sombre */ .theme-technique .hero__brand .lk{color:#fff} /* piste 03 : bloc circulaire, le lockup doit tenir dans le cercle inscrit */ .theme-confiance .hero__brand .lk{font-size:21px} /* ---- En-tete : le menu ne doit jamais passer a la ligne ------------------- Avec le lockup, la barre reclame 1055 px. Le burger n'arrivait qu'a 820 px : entre les deux, « Zones d'intervention », « A propos » et le bouton cassaient sur deux lignes. */ .main-nav a,.header-actions .button,.header-actions a{white-space:nowrap} @media(max-width:1279px){.header-inner{gap:24px}.main-nav{gap:20px}} @media(max-width:1079px){ .menu-toggle{display:block} .header-menu{display:none;position:absolute;left:0;right:0;top:100%;padding:20px; background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.14)} .header-menu.is-open{display:block} .main-nav{flex-direction:column;align-items:stretch;gap:0} .main-nav a{padding:13px 0;border-bottom:1px solid var(--line)} .header-actions{margin-top:18px} .header-actions .button{width:100%} .theme-technique .header-menu,.theme-continuity .header-menu{background:var(--ink)} } /* pastille de profil : le logo couleur demande un fond clair */ .sv-pp--clair{background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .sv-pp--clair img{width:82%;height:82%} .ch-vis--sq img{max-width:132px;max-height:132px} .pr-cv .pr-logo{max-width:40mm;max-height:11.5mm} .pr-fl-hero-in .pr-fl-logo{max-width:56mm;max-height:15mm;margin-bottom:4mm;object-fit:contain} .sv-in .marque img{max-width:100%;object-fit:contain} /* le trace de la zone sure doit longer le contenu, pas le traverser */ .sv-safe{border-left:1px dashed rgba(255,255,255,.42);border-right:1px dashed rgba(255,255,255,.42)} /* pastille de profil : le fond depend de la facon dont le logo est dessine */ .sv-pp--sombre{background:var(--ink)} .sv-pp--sombre img{width:84%;height:84%} /* la version carree doit se lire comme un carre, pas comme un logo centre dans une boite */ .ch-sq{width:150px;height:150px;display:grid;place-items:center;padding:15px} .ch-sq img{max-width:100%;max-height:100%;object-fit:contain} .ch-sq--sombre{background:var(--ink)} .ch-sq--clair{background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .ch-vis--sq{padding:18px} /* le noir se lit mieux sur une teinte de la marque que sur un gris mort */ .ch-vis--teinte{background:#fff} /* ---- Carte : le logo dit deja le metier, la ligne de role le repetait ---- */ .pr-cv{padding:6.5mm 8mm} .pr-cv .pr-logo{max-width:46mm;max-height:13mm} .pr-nom{margin:0 0 2.4mm;font-size:5mm} /* bandeau de pied en deux tons plutot qu'un aplat */ .pr-cv::after{height:2.8mm;background:linear-gradient(90deg,var(--accent) 0 64%,var(--accent-2) 64% 100%)} /* verso : le logo passe devant, et il garde du vert */ .pr-cv--v{gap:5mm} .pr-cv--v .pr-logo{max-width:60mm;max-height:19mm} .pr-cv--v .lk{font-size:5.4mm} .pr-cv--v .lk-t i{color:var(--accent-2)} .pr-cv--v .pr-serv{font-size:2.75mm;line-height:1.8;opacity:.72} /* ---- Flyer : le logo posé sur la photo se noyait dans le décor ---------- Il prend une plaque de couleur pleine, qui devient au passage la variante « logo sur fond de couleur » de la charte. */ .pr-fl-plaque{display:inline-flex;align-items:center;justify-content:center; padding:6mm 8mm;background:var(--accent);margin-bottom:5mm} .pr-fl-plaque .pr-fl-logo,.pr-fl-plaque .lk{margin:0} .pr-fl-plaque .pr-fl-logo{max-width:62mm;max-height:17mm} .pr-fl-plaque .lk{font-size:6mm;color:#fff} /* piste 01 : logo vert et blanc, il lui faut un fond sombre */ .theme-continuity .pr-fl-plaque{background:var(--ink)} .pr-fl-hero::after{background:linear-gradient(180deg,rgba(8,10,9,.55) 0%,rgba(8,10,9,.20) 40%,rgba(8,10,9,.88) 100%)} /* ---- Recto sans logo : le verso porte la marque, le recto l'information -- Le filigrane garde une presence de marque discrete. */ .pr-cv{padding:9mm 8mm 8mm} .pr-nom{margin:0;font-size:6mm;line-height:1.1;letter-spacing:-.025em} .pr-role{margin:1.8mm 0 0;font-size:2.5mm;font-weight:700;letter-spacing:.19em; text-transform:uppercase;opacity:.5} .pr-cv-co{border-left:.9mm solid var(--accent);padding-left:4.5mm} .pr-tel{display:block;font-size:5.4mm;font-weight:800;letter-spacing:.005em;line-height:1} .pr-cv-co .pr-co{margin:2.6mm 0 0;padding:0;border:0;font-size:2.75mm;line-height:1.75;opacity:.72} .pr-cv-co .pr-co span{display:block} .pr-cv .pr-wm{right:7mm;top:3.5mm;bottom:auto;width:26mm;opacity:.075} /* ---- Flyer : quatre registres pleine largeur ----------------------------- Bandeau de marque, photo, prestations, contact. Chaque bloc occupe toute la largeur : plus rien ne flotte au-dessus de la photo. */ .pr-fl-bandeau{flex:none;background:var(--ink);color:#fff;padding:11mm 12mm 8mm; text-align:center;border-bottom:1.4mm solid var(--accent)} .pr-fl-bandeau .pr-fl-logo{max-width:68mm;max-height:19mm;margin:0 auto 4.5mm;object-fit:contain} .pr-fl-bandeau .lk{font-size:6.2mm;color:#fff;margin-bottom:4.5mm} .pr-fl-bandeau .ch-mark{margin:0 auto 4.5mm;color:#fff} .pr-fl-bandeau .pr-fl-zone{margin:0;font-size:2.9mm;letter-spacing:.18em;text-transform:uppercase; font-weight:800;color:var(--accent-2)} .pr-fl-photo{flex:1;min-height:54mm;position:relative;overflow:hidden;background:var(--soft)} .pr-fl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pr-fl-corps{flex:none} /* ---- Declinaisons deux tons : « Services » se detache -------------------- */ .ch-vis--accent .lk-t i{color:var(--ink)} .ch-vis--teinte .lk-t i{color:var(--accent)} /* ---- Visuels sociaux : le logo principal sur une plaque ------------------ Le logo principal est encre sur transparent ; sur une photo sombre il disparait. Il prend donc une plaque claire, comme un macaron. La piste 01 n'en a pas besoin : son logo porte deja son fond noir. */ .sv-cover .marque--nu img{max-width:230px;max-height:60px} .sv-post .marque--nu img{max-width:300px;max-height:78px} .sv-in .marque--nu{width:fit-content} /* ---- Visuels sociaux : panneau clair + photo ---------------------------- Le logo principal est encre sur transparent : il lui faut un fond clair. Le panneau donne aussi aux visuels une identite distincte du site. */ .sv{background:var(--paper)} .sv-in{color:var(--ink)} .sv-in .accroche{color:var(--ink)} .sv-in .meta{color:var(--muted);opacity:1} .sv-in .tel{background:var(--accent);color:#fff} .sv-cover .marque img{max-width:196px;max-height:48px} .sv-post .marque img{max-width:252px;max-height:62px} .sv-safe{border-color:rgba(0,0,0,.28)} .sv-safe span{color:rgba(0,0,0,.42)} /* ---- Visuels sociaux : photo a gauche, message a droite ----------------- Sur Facebook, la photo de profil recouvre le bas-gauche de la couverture. Tout le message passe donc a droite, a l'interieur de la zone sure. */ .sv img.fond{position:absolute;inset:0 auto 0 0;width:40%;height:100%;object-fit:cover} .sv::after{content:"";position:absolute;top:0;bottom:0;left:40%;width:3px;background:var(--accent)} .sv-cover .sv-in{margin-left:40%;padding:26px 90px 0 30px;gap:0} .sv-post .sv-in{margin-left:40%;padding:0 56px 0 44px;gap:0} .sv-cover .accroche{font-size:30px;line-height:1.12;max-width:none;margin:12px 0 7px} .sv-cover .meta{font-size:14.5px;line-height:1.45} .sv-cover .tel{font-size:21px;padding:10px 22px;margin-top:15px} .sv-post .accroche{font-size:54px;line-height:1.1;max-width:none;margin:22px 0 12px} .sv-post .meta{font-size:22px} .sv-post .tel{font-size:33px;padding:15px 32px;margin-top:26px} .sv-cover .marque img{max-width:190px;max-height:46px} .sv-post .marque img{max-width:248px;max-height:60px} /* repere : emprise de la photo de profil sur la couverture (desktop) */ .sv-avatar{position:absolute;left:24px;bottom:-52px;width:176px;height:176px;border-radius:50%; border:2px dashed rgba(255,255,255,.72);z-index:3;pointer-events:none} .sv-avatar span{position:absolute;left:50%;top:34%;transform:translateX(-50%);white-space:nowrap; font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)} /* ---- Piste 02 seulement : declinaisons blanche et noire ecartees -------- Le logo principal est repris partout, donc ses fonds passent en clair. */ .theme-proximite .pr-fl-bandeau{background:var(--paper);color:var(--ink)} .theme-proximite .pr-fl-bandeau .pr-fl-zone{color:var(--accent)} .theme-proximite .pr-cv--v{background:var(--soft);color:var(--ink)} .theme-proximite .pr-cv--v::before{background:none} .theme-proximite .pr-cv--v .pr-bas{color:var(--accent)} .theme-proximite .pr-cv--v .pr-logo{max-width:60mm;max-height:19mm} /* ---- Piste 01 : son logo est dessine pour le sombre ---------------------- Le panneau des visuels sociaux suit, comme le bandeau du flyer et le verso de la carte. Le logo natif vert et blanc s'y pose sans plaque. */ .theme-continuity .sv{background:var(--ink)} .theme-continuity .sv-in{color:#fff} .theme-continuity .sv-in .accroche{color:#fff} .theme-continuity .sv-in .meta{color:rgba(255,255,255,.74)} .theme-continuity .sv-safe{border-color:rgba(255,255,255,.34)} .theme-continuity .sv-safe span{color:rgba(255,255,255,.5)} /* ---- Piste 01 : structure d'origine, photo pleine largeur + degrade ----- Pas de panneau : le message se pose sur la photo, voile sombre a gauche. */ .theme-continuity .sv img.fond{inset:0;width:100%} .theme-continuity .sv::after{content:"";position:absolute;inset:0;left:0;width:100%; background:linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.78) 62%, rgba(5,5,5,.66) 88%,rgba(5,5,5,.52) 100%)} .theme-continuity .sv-cover .sv-in{margin-left:0;padding:26px 90px 0 206px} .theme-continuity .sv-post .sv-in{margin-left:0;padding:0 76px} .theme-continuity .sv-cover .accroche{max-width:none} .theme-continuity .sv-post .accroche{max-width:15ch} /* ---- Couverture Facebook : la marque est portee par la photo de profil --- Inutile de la repeter. Le contenu se cale en haut pour degager l'emprise de l'avatar, qui mord le bas-gauche de la couverture sur ordinateur. */ .sv-cover .sv-in{justify-content:center} /* piste 03 : le logo du pied est une image, pas un lockup vectoriel */ .theme-confiance .footer-brand .brand-image{height:58px;width:auto;object-fit:contain} /* piste 03 : seule la tuile carree est agrandie ; les autres ne bougent pas */ .theme-confiance .ch-sq{width:auto;height:auto;padding:0;background:none;box-shadow:none} .theme-confiance .ch-vis--sq{min-height:206px} .theme-confiance .ch-vis--sq img{max-width:100%;max-height:176px} /* grille sans numerotation : les blocs sont des familles, pas des etapes */ .feature-grid--libre{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){.feature-grid--libre{grid-template-columns:1fr}} /* cette note court sous la grille : elle en reprend toute la largeur, contrairement aux paragraphes de lecture brides a 68 caracteres */ .section p.section-note:not(.eyebrow):not(.kicker):not(.lede), main p.section-note:not(.eyebrow):not(.kicker):not(.piste-line){ margin:22px 0 0;color:var(--muted);font-size:14.5px;max-width:none} /* ---- Bloc unique : l'accroche et son inventaire ------------------------ L'introduction annoncait ce que la grille enumere : un seul bandeau porte les deux, avec une tete de section puis les familles. */ .bloc-travaux__tete{margin:0 0 38px} /* l'exergue coiffe les deux colonnes : sinon le paragraphe de droite se cale a sa hauteur et non a celle du titre, d'ou le desequilibre */ .bloc-travaux__cols{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:10px} .bloc-travaux__tete h2{margin:0} .section .bloc-travaux__tete p:not(.eyebrow){margin:0;max-width:none} @media(max-width:820px){.bloc-travaux__cols{grid-template-columns:1fr;gap:18px}} .bloc-travaux .feature-grid article{padding:26px 26px 28px;border-top:3px solid var(--accent)} .bloc-travaux .feature-grid h3{margin:0 0 16px;font-size:21px;line-height:1.2} .bloc-travaux .feature-grid ul{margin:0;padding-left:18px;line-height:1.9} .bloc-travaux .feature-grid li{font-size:14.5px} @media(max-width:820px){.bloc-travaux__tete{margin-bottom:26px} .bloc-travaux .feature-grid article{padding:22px}} /* ---- Panneau de situations ------------------------------------------- Le panneau d'origine aligne la description a droite, ce qui marche avec des libelles courts. Ici les libelles font deux mots ou plus : on passe en deux colonnes calees a gauche, le texte redevient lisible. */ .list-panel--situations>span{display:grid;grid-template-columns:minmax(150px,32%) 1fr; gap:28px;align-items:start;padding:20px 0;text-align:left} .list-panel--situations strong{font-size:16px;line-height:1.35} .list-panel--situations small{text-align:left;font-size:14.5px;line-height:1.6} @media(max-width:640px){.list-panel--situations>span{grid-template-columns:1fr;gap:6px}} /* les paragraphes remplissent la colonne au lieu de s'arreter a 68 caracteres */ .section.narrow--plein p:not(.eyebrow):not(.kicker):not(.lede), main .narrow--plein>p:not(.eyebrow):not(.kicker):not(.piste-line){max-width:none} /* ---- Piste 01 : les paragraphes remplissent leur conteneur ------------- Une regle generale les bridait a 68 caracteres, soit 686 px, quel que soit le conteneur : 850 px pour les sections etroites, 1130 pour les accroches, 820 pour les pages legales. D'ou une bande morte a droite sur presque toutes les pages. On leve le bridage pour cette piste. */ .theme-continuity main p:not(.eyebrow):not(.kicker):not(.piste-line), .theme-continuity .section p:not(.eyebrow):not(.kicker):not(.lede), .theme-continuity .intro-grid>div>p, .theme-continuity .narrow>p, .theme-continuity .split-list>div>p{max-width:none} /* l'encart d'appel garde sa mesure : c'est un bloc court, pas de la lecture */ .theme-continuity .cta-panel p:not(.eyebrow){max-width:650px} .theme-continuity .footer-brand p{max-width:330px} /* ---- Piste 01 : panneaux en deux colonnes ------------------------------ Le style d'origine renvoie la description a droite, ce qui produit des lignes de hauteur inegale des que le libelle depasse un mot. */ .theme-continuity .list-panel>span{display:grid;grid-template-columns:minmax(150px,32%) 1fr; gap:28px;align-items:start;padding:20px 0;text-align:left} .theme-continuity .list-panel>span small{text-align:left;line-height:1.6} @media(max-width:640px){.theme-continuity .list-panel>span{grid-template-columns:1fr;gap:6px}} /* ---- Fil d'Ariane ----------------------------------------------------- Situe la page dans le site et alimente les donnees structurees, que Google reprend sous le titre dans ses resultats. */ .fil-ariane{padding-top:18px} .fil-ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0; font-size:13px;color:var(--muted)} .fil-ariane li{display:flex;align-items:center} .fil-ariane li+li::before{content:"›";margin:0 9px;opacity:.55} .fil-ariane a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent; min-height:24px;display:inline-flex;align-items:center} .fil-ariane a:hover{color:var(--ink);border-bottom-color:currentColor} .fil-ariane [aria-current]{color:var(--ink);font-weight:600} .theme-continuity .fil-ariane a:hover{color:var(--accent)} @media(max-width:560px){.fil-ariane{padding-top:14px}.fil-ariane ol{font-size:12.5px}} /* ---- Etapes en frise --------------------------------------------------- Quatre cartes identiques se lisent comme des categories paralleles. Ici c'est une sequence : on retire les boitiers, on rapproche le numero de son titre et on relie les pastilles par un trait. */ .steps--frise{gap:34px;position:relative;grid-template-columns:repeat(var(--etapes,4),1fr)} /* un filet continu court derriere toute la frise, a hauteur de pastille */ .steps--frise::before{content:"";position:absolute;left:12.5%;right:12.5%;top:20px;height:2px; background:var(--line);z-index:0} .steps--frise li{position:relative;z-index:1;background:none;border:0;padding:0;text-align:center; display:flex;flex-direction:column} /* la pastille garde son disque plein ; son halo interrompt le filet */ .steps--frise li>span{margin:0 auto 18px;box-shadow:0 0 0 7px var(--soft)} /* le texte de l'etape est cadre, c'est lui qui donne du relief a la frise. flex:1 pour que les quatre cartes aient la meme hauteur, quel que soit le nombre de lignes de leur texte. */ .steps--frise .steps-carte{background:var(--paper);border:1px solid var(--line); border-radius:var(--radius);padding:22px 20px;flex:1} /* la fleche se pose sur le filet, dans la gouttiere */ .steps--frise li:not(:last-child)::after{content:"›";position:absolute;top:2px;left:100%;width:34px; text-align:center;font-size:26px;line-height:1.35;color:var(--accent); background:var(--soft);z-index:2} .steps--frise strong{display:block;margin-bottom:7px} .steps--frise p{margin:0;font-size:14.5px;line-height:1.65} /* ---- Sous 820 px : la frise bascule a la verticale --------------------- Deux colonnes rendaient l'ordre de lecture ambigu et le filet disparais- sait. La frise pivote : filet vertical, pastille a gauche, carte a droite, chevrons tournes vers le bas. Le processus reste lisible. */ /* La frise ne repasse a l'horizontale qu'a partir de 1161 px : en dessous, quatre cartes de moins de 250 px ne se lisent plus. */ @media(max-width:1160px){ .steps--frise{grid-template-columns:1fr;gap:0;grid-auto-rows:1fr} .steps--frise::before{left:20px;right:auto;top:21px;bottom:64px;width:2px;height:auto} .steps--frise li{display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr;gap:18px; text-align:left;padding:0 0 30px;align-items:stretch} /* la pastille garde sa taille, seule la carte s'etire */ .steps--frise li>span{align-self:start} .steps--frise li>span{margin:0} .steps--frise .steps-carte{padding:18px 18px 20px} .steps--frise li:not(:last-child)::after{content:"›";position:absolute;left:0;top:auto;bottom:2px; width:42px;height:26px;line-height:26px;text-align:center;transform:rotate(90deg); transform-origin:center;font-size:24px;color:var(--accent);background:var(--soft);z-index:2} } /* entre 1080 et 1160 px le bouton telephone debordait de la fenetre : on retire le bouton devis, secondaire, plutot que de replier tout le menu */ /* Le bouton devis tient de nouveau entre 1080 et 1159 px depuis que Zones d'intervention a quitte le menu principal. */ /* ---- Etapes : meme vocabulaire que les cartes de services -------------- Bordure franche et decroche vert en dessous, comme .service-card sur cette piste. Le chiffre reprend l'Anton des index de carte. */ .theme-continuity .steps--frise .steps-carte{border:2px solid var(--ink); box-shadow:8px 8px 0 var(--accent-2);background:var(--paper)} .theme-continuity .steps--frise li>span{font-family:Anton,sans-serif;font-size:19px; font-weight:400;letter-spacing:.02em} /* la gouttiere absorbe le decroche pour qu'il ne touche pas la carte suivante */ .theme-continuity .steps--frise{gap:42px} .theme-continuity .steps--frise li:not(:last-child)::after{width:42px} @media(max-width:820px){ .theme-continuity .steps--frise{gap:0} .theme-continuity .steps--frise li{padding-bottom:38px} } /* ---- Grilles d'introduction : colonnes centrees verticalement ---------- La colonne de gauche porte l'exergue et le titre, celle de droite un paragraphe plus court. Alignes en haut, le texte se calait a hauteur de l'exergue au lieu du titre. */ .theme-continuity .intro-grid{align-items:center} @media(max-width:820px){.theme-continuity .intro-grid{align-items:start}} /* ---- Carte du secteur ------------------------------------------------- Contours communaux reels du Morbihan, tires du referentiel de l'IGN via geo.api.gouv.fr. Les 129 communes a moins de 40 km sont teintees. */ .carte-zone{margin:0} .carte-zone .carte{width:100%;height:auto;display:block} .carte-hors path{fill:color-mix(in srgb,var(--ink) 12%,transparent);stroke:var(--paper);stroke-width:.8} .carte-zone-com path,.carte-zone .carte-zone path{fill:color-mix(in srgb,var(--accent) 34%,var(--paper)); stroke:var(--paper);stroke-width:.8} .carte-rayon{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:10 8} .carte-ville{fill:var(--ink)} .carte-nom{font:600 19px var(--body);fill:var(--muted)} .carte-base{fill:var(--accent);stroke:var(--ink);stroke-width:3} .carte-base-nom{font:800 24px var(--body);fill:var(--ink)} .carte-zone figcaption{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.6} .zone-layout{grid-template-columns:1fr 1fr;gap:64px} @media(max-width:820px){.zone-layout{grid-template-columns:1fr;gap:34px} .carte-nom{font-size:24px}.carte-base-nom{font-size:30px}} /* ══ Menu principal et sous-menu Services ═══════════════════════════ */ /* Indicateur de rubrique : une pastille derriere le libelle. Le filet de 3 px flottait 2 px au-dessus de la bordure de l'en-tete, faute de pouvoir s'y caler ; la pastille supprime le probleme au lieu de le corriger. Son rayon suit celui de la piste : bloc franc sur la 01 et la 05, capsule ailleurs. */ .main-nav{gap:5px} .main-nav>a,.nav-group>a{position:relative;padding:9px 13px;border-bottom:0;border-radius:var(--radius); transition:background .18s ease,color .2s ease} .main-nav>a:not([aria-current=page]):hover,.nav-group:not(.nav-group--current):hover>a{ background:color-mix(in srgb,currentColor 9%,transparent)} .main-nav>a[aria-current=page],.nav-group--current>a,.nav-group[data-open=true]>a{ background:color-mix(in srgb,var(--accent) 17%,transparent);color:var(--accent)} .theme-continuity .main-nav>a[aria-current=page], .theme-continuity .nav-group--current>a,.theme-continuity .nav-group[data-open=true]>a, .theme-technique .main-nav>a[aria-current=page], .theme-technique .nav-group--current>a,.theme-technique .nav-group[data-open=true]>a{ background:color-mix(in srgb,var(--accent-2) 20%,transparent);color:var(--accent-2)} /* Le crochet : un chevron trace, qui pivote a l'ouverture. */ .nav-group{position:relative;display:flex;align-items:center;gap:1px} .nav-group__toggle{border:0;background:none;padding:8px 6px 8px 2px;margin:0;cursor:pointer; color:inherit;display:grid;place-items:center;line-height:0} .nav-group__chevron{width:10px;height:auto;opacity:.55; transition:transform .3s cubic-bezier(.22,.7,.28,1),opacity .22s ease} .nav-group:hover .nav-group__chevron{opacity:1} .nav-group[data-open=true] .nav-group__chevron{transform:rotate(180deg);opacity:1} /* Le tiroir, version epuree : ni bordure, ni numeros, ni fleches, ni ligne de separation. Une ombre douce, de l'air, l'intitule et ce qu'il recouvre. */ .nav-drop{position:absolute;top:calc(100% + 4px);left:-14px;width:344px;padding:11px; background:var(--paper);border:0;border-radius:min(var(--radius),16px); box-shadow:0 22px 56px rgba(0,0,0,.20),0 2px 8px rgba(0,0,0,.08); display:flex;flex-direction:column;z-index:60; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .24s cubic-bezier(.22,.7,.28,1),transform .24s cubic-bezier(.22,.7,.28,1), visibility .24s} .nav-group[data-open=true] .nav-drop{opacity:1;visibility:visible;transform:none} .main-nav .nav-drop a{border:0;color:var(--ink);background:none} .nav-drop a{opacity:0;transform:translateY(-6px); transition:opacity .2s ease,transform .22s cubic-bezier(.22,.7,.28,1),background .18s ease} .nav-group[data-open=true] .nav-drop a{opacity:1;transform:none} .nav-group[data-open=true] .nav-drop a:nth-child(1){transition-delay:.04s} .nav-group[data-open=true] .nav-drop a:nth-child(2){transition-delay:.08s} .nav-group[data-open=true] .nav-drop a:nth-child(3){transition-delay:.12s} .nav-group[data-open=true] .nav-drop a:nth-child(4){transition-delay:.16s} .main-nav .nav-drop__item{display:block;padding:12px 14px;border-radius:min(var(--radius),12px)} .main-nav .nav-drop__item:hover,.main-nav .nav-drop__item[aria-current=page]{ background:color-mix(in srgb,currentColor 7%,transparent)} .nav-drop__num,.nav-drop__fleche{display:none} .nav-drop__corps{display:block;min-width:0} .nav-drop__corps strong{display:block;font-size:14.5px;font-weight:700;line-height:1.25} .nav-drop__corps small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--muted)} .main-nav .nav-drop a.nav-drop__tout{display:block;margin:0;padding:12px 14px;border:0; border-radius:min(var(--radius),12px);font:700 13.5px var(--body);letter-spacing:0; text-transform:none;color:var(--accent)} .main-nav .nav-drop a.nav-drop__tout:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)} /* Pistes a en-tete sombre : le tiroir prolonge la barre au lieu de trancher. */ .theme-continuity .nav-drop,.theme-technique .nav-drop{background:var(--ink); box-shadow:0 26px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3)} .theme-continuity .main-nav .nav-drop a,.theme-technique .main-nav .nav-drop a{color:#fff} .theme-continuity .nav-drop__corps small,.theme-technique .nav-drop__corps small{ color:rgba(255,255,255,.58)} .theme-continuity .main-nav .nav-drop a.nav-drop__tout, .theme-technique .main-nav .nav-drop a.nav-drop__tout{color:var(--accent-2)} /* la piste 01 compose en Anton : le tiroir reprend ses intitules */ .theme-continuity .nav-drop__corps strong{font:400 16px/1.16 var(--display);text-transform:uppercase; letter-spacing:.01em} /* ══ Cartes de service entièrement cliquables ═══════════════════════ */ .service-card{transition:transform .34s cubic-bezier(.22,.7,.28,1),box-shadow .34s ease, border-color .34s ease} .card-link{display:block} .card-link::after{content:"";position:absolute;inset:0;z-index:4} .card-link:focus-visible{outline:0} .service-card:has(.card-link:focus-visible){outline:3px solid var(--accent);outline-offset:4px} .card-cta{margin-top:auto;position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px; font-weight:750;color:var(--accent)} .card-cta__arrow{transition:transform .3s cubic-bezier(.22,.7,.28,1)} .service-card:hover .card-cta__arrow{transform:translateX(7px)} .service-card:after{transition:transform .5s cubic-bezier(.22,.7,.28,1)} .service-card:hover:after{transform:scale(1.14)} .service-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.11)} .theme-continuity .service-card:hover{transform:translate(-4px,-4px); box-shadow:14px 14px 0 var(--accent-2)} .theme-continuity .service-card:nth-child(2) .card-cta{color:var(--accent-2)} /* ══ Animations ═════════════════════════════════════════════════════ L'etat masque n'existe que si le script inline a pose .anim sur ET si le systeme n'a pas demande la reduction des animations. Sans JavaScript, ou si le script differe echoue (il retire .anim au bout de 2,5 s), la page reste entierement lisible. */ @media(prefers-reduced-motion:no-preference){ /* Cinq facons d'entrer, pas une seule. Chaque famille de blocs a la sienne, mais toutes partagent la meme courbe et la meme duree : c'est ce qui evite le sapin de Noel. Aucun mouvement ne depasse 24 px, aucun ne se repete, aucun ne tourne. */ .anim :where( main .section-heading, main .intro-grid>*, main .split-list>*, main .timeline>div, main .zone-layout>*, main .before-after-section>*, main .brand-showcase>*, main .source-note>*, main .contact-layout>*, main .proof-split>*, main .zone-callout>*, main .narrow>h2, main .narrow>p, main .narrow>ul, main .prose>h2, main .prose>p, main .card-grid>*, main .city-cards>a, main .steps>li, main .feature-grid>article, main .proof-points>div, main .values>article, main .ui-samples>*, main .swatches>div, main .list-panel>a, main .list-panel>span, main .check-list>li, main .faq details, main .communes-liste li, main .trust-bar>span, main .timeline li, main .project-grid>*, main .gallery-item, main .cta-panel ){opacity:0;transition:opacity .6s cubic-bezier(.22,.7,.28,1), transform .62s cubic-bezier(.22,.7,.28,1)} /* 1 — le texte monte */ .anim :where( main .section-heading, main .intro-grid>*, main .split-list>*, main .timeline>div, main .zone-layout>*, main .before-after-section>*, main .brand-showcase>*, main .source-note>*, main .contact-layout>*, main .proof-split>*, main .zone-callout>*, main .narrow>h2, main .narrow>p, main .narrow>ul, main .prose>h2, main .prose>p ){transform:translateY(20px)} /* 2 — les cartes se posent */ .anim :where( main .card-grid>*, main .city-cards>a, main .steps>li, main .feature-grid>article, main .proof-points>div, main .values>article, main .ui-samples>*, main .swatches>div ){transform:translateY(15px) scale(.986)} /* piste 01 : les cartes sont posees sur une ombre pleine decalee, elles arrivent donc depuis cette ombre au lieu de monter */ .anim .theme-continuity :where(main .card-grid>*, main .city-cards>*){transform:translate(9px,9px)} /* 3 — les rangees de liste glissent depuis la gauche */ .anim :where( main .list-panel>a, main .list-panel>span, main .check-list>li, main .faq details, main .communes-liste li, main .trust-bar>span, main .timeline li ){transform:translateX(-16px)} /* 4 — l'image se devoile par le bas et se detend, la carte se contente de monter. Le volet porte sur l'image : pose sur la carte il rognerait l'ombre decalee. */ .anim :where(main .project-grid>*, main .gallery-item){transform:translateY(12px)} .anim :where(main .project-grid>* img, main .gallery-item img){ clip-path:inset(0 0 34% 0);transform:scale(1.07); transition:transform 1s cubic-bezier(.22,.7,.28,1),clip-path .8s cubic-bezier(.22,.7,.28,1)} .anim :where(main .project-grid>*, main .gallery-item).is-in img{ clip-path:inset(0);transform:none} /* 5 — le panneau d'appel s'installe sans bouger */ .anim :where(main .cta-panel){transform:scale(.987)} /* etat final, commun */ .anim .is-in{opacity:1;transform:none} /* 6 — la frise : le filet se trace, les pastilles suivent */ .anim :where(main .steps--frise)::before{transform:scaleX(0);transform-origin:left center; transition:transform .85s cubic-bezier(.22,.7,.28,1)} .anim :where(main .steps--frise).is-in::before{transform:scaleX(1)} @media(max-width:1160px){ .anim :where(main .steps--frise)::before{transform:scaleY(0);transform-origin:center top} .anim :where(main .steps--frise).is-in::before{transform:scaleY(1)} } /* entree du hero, des le chargement */ .anim .hero__copy>*{opacity:0;transform:translateY(26px); transition:opacity .72s cubic-bezier(.22,.7,.28,1),transform .72s cubic-bezier(.22,.7,.28,1)} /* Le bloc visuel n'est plus anime d'un seul tenant. Le mettre a l'echelle rendait floues, pendant toute la transition, la bordure de 6 px de la photo, son decoupe en biseau et l'ombre pleine de la carte de marque. Le cadre ne bouge donc plus : seule la photo se detend dedans, puis la carte sort de son ombre. Deux mouvements francs, aucune mise a l'echelle du cadre. */ .anim .hero__visual{opacity:1;transform:none} .anim .hero__photo img{opacity:0;transform:scale(1.08); transition:opacity .75s cubic-bezier(.22,.7,.28,1),transform 1.15s cubic-bezier(.22,.7,.28,1)} /* La carte de marque n'est plus animee a l'entree : elle est posee, point. */ .anim.est-charge .hero__photo img{opacity:1;transform:none;transition-delay:.08s} .anim .page-hero>*{opacity:0;transform:translateY(20px); transition:opacity .66s cubic-bezier(.22,.7,.28,1),transform .66s cubic-bezier(.22,.7,.28,1)} .anim.est-charge .hero__copy>*,.anim.est-charge .page-hero>*{opacity:1;transform:none} .anim.est-charge .hero__copy>*:nth-child(1){transition-delay:.06s} .anim.est-charge .hero__copy>*:nth-child(2){transition-delay:.13s} .anim.est-charge .hero__copy>*:nth-child(3){transition-delay:.2s} .anim.est-charge .hero__copy>*:nth-child(4){transition-delay:.27s} .anim.est-charge .hero__copy>*:nth-child(n+5){transition-delay:.34s} .anim.est-charge .page-hero>*:nth-child(2){transition-delay:.1s} } /* en-tete : se resserre des que la page defile */ .site-header{transition:box-shadow .3s ease,background-color .3s ease} .header-inner,.site-header .brand-image{transition:min-height .32s ease,height .32s ease} .a-defile .site-header{box-shadow:0 12px 30px rgba(0,0,0,.1)} .a-defile .header-inner{min-height:68px} .a-defile .site-header .brand-image{height:48px} .a-defile .theme-continuity .site-header .brand-image{height:44px} .main-nav>a,.nav-group>a{transition:color .2s ease,border-color .2s ease} /* ── Micro-interactions ────────────────────────────────────────────── Communes aux cinq pistes. Seule la piste 01 s'ecarte du survol generique : ses cartes sont bordees et posees sur une ombre pleine decalee, elles glissent dans leur ombre au lieu de se soulever. */ .button span[aria-hidden],.button-icon{transition:transform .28s cubic-bezier(.22,.7,.28,1)} .button:hover span[aria-hidden]{transform:translateX(5px)} .button--phone:hover .button-icon{transform:rotate(-11deg) scale(1.09)} .text-link{transition:text-underline-offset .22s ease,color .22s ease} .text-link:hover{text-underline-offset:8px} .zone-list a,.source-links a,.list-panel>a,.footer-main>div:not(:first-child) a{ transition:color .2s ease,transform .25s cubic-bezier(.22,.7,.28,1)} .zone-list a:hover,.source-links a:hover,.list-panel>a:hover{transform:translateX(6px)} .footer-main>div:not(:first-child) a:hover{transform:translateX(4px)} .city-cards a{transition:transform .3s cubic-bezier(.22,.7,.28,1),border-color .3s ease, box-shadow .3s ease} .city-cards a:hover{transform:translateY(-5px);border-color:var(--accent); box-shadow:0 16px 34px rgba(0,0,0,.09)} .project-card,.gallery-item{transition:transform .34s cubic-bezier(.22,.7,.28,1)} .project-card:hover,.gallery-item:hover{transform:translateY(-5px)} .faq summary{transition:color .2s ease} .faq summary:hover,.faq details[open] summary{color:var(--accent)} .steps li,.feature-grid article{ transition:transform .32s cubic-bezier(.22,.7,.28,1),box-shadow .32s ease} .steps li:hover,.feature-grid article:hover{transform:translateY(-4px)} /* piste 01 : le vocabulaire de l'ombre pleine decalee */ .theme-continuity .city-cards a:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--accent-2)} .theme-continuity .steps--frise .steps-carte{ transition:transform .32s cubic-bezier(.22,.7,.28,1),box-shadow .32s ease} .theme-continuity .steps--frise li:hover .steps-carte{transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--accent-2)} .theme-continuity .steps--frise li:hover{transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} } /* ── Communes limitrophes ─────────────────────────────────────────── Fait verifiable : dix communes partagent une limite avec Languidic. Presente en pastilles plutot qu'en phrase, la liste se lit d'un coup d'oeil et le visiteur y cherche la sienne. */ .communes-liste{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 30px;padding:0;list-style:none} .communes-liste li{padding:9px 14px;border-radius:var(--radius);background:var(--soft); font-size:14px;font-weight:650;color:var(--ink);line-height:1.2} .theme-continuity .communes-liste li{border-left:3px solid var(--accent-2)} .section--tint .communes-liste li{background:var(--paper)} /* ── Tablette : la bande 821-1050 px ──────────────────────────────── Elle heritait de la mise en page bureau alors que ces largeurs sont tactiles. Cibles au doigt et proportions d'image reprises ici. */ @media(max-width:1050px){ .footer-main>div:not(:first-child) a,.footer-brand>a{display:inline-flex;align-items:center; min-height:44px} .footer-main>div:not(:first-child){gap:0} .list-panel>a{min-height:44px} /* un portrait de 620 px dans une colonne de 300 devenait une meurtriere */ .portrait-wrap{height:min(560px,72vw)} } /* ── Encart d'appel : collision de raccourcis ─────────────────────── Le bloc porte deux classes, .cta-panel et .section. Les deux posent un padding en raccourci et pesent la meme chose dans la cascade : c'est la derniere ecrite qui gagne. En mobile, .section{padding:38px 0} arrivait apres et remettait le retrait horizontal a zero, si bien que le texte touchait la bordure verte. On tranche par la specificite. */ .section.cta-panel{padding:60px} @media(max-width:820px){ .section.cta-panel{padding:40px 36px} .section.cta-panel h2{font-size:clamp(24px,5.6vw,32px)} } @media(max-width:560px){.section.cta-panel{padding:34px 26px}} @media(max-width:430px){.section.cta-panel{padding:30px 22px}} /* ================================================================== Allo Pierro — ajustements (à coller EN FIN de styles.css v121) S'applique aux 5 pistes. N'écrase que des espacements et l'entête. ================================================================== */ /* --- 1. Espacements resserrés : aéré mais compact ----------------- */ .intro-grid,.proof-split,.zone-callout,.split-list,.timeline, .source-note,.brand-showcase,.zone-layout{gap:64px} .before-after-section{gap:56px} .section-heading{margin-bottom:32px} @media(min-width:821px){ .section{padding:72px 0} .hero{min-height:620px;padding-top:64px;padding-bottom:44px} .cta-panel{margin-top:32px;margin-bottom:72px} .footer-main{padding:60px 0} .page-hero{min-height:360px;padding:72px 0 52px} } @media(max-width:820px){ .section{padding:48px 0} .intro-grid,.proof-split,.zone-callout,.split-list,.timeline, .source-note,.brand-showcase,.before-after-section, .current-brand-proof,.zone-layout{gap:36px} .cta-panel{margin-bottom:48px} .footer-main{padding:48px 0} } /* ── Carte de marque du hero, en dessous de 820 px ────────────────── .brand-image{height:52px} s'appliquait aussi au logo de la carte, qui se retrouvait a 107 x 52 px au milieu d'un bloc de 344 px de large. */ @media(max-width:820px){ .theme-continuity .hero__brand{left:0;width:min(262px,72vw);min-height:0;padding:18px} .theme-continuity .hero__brand .brand-image--primary{height:auto;max-width:100%;max-height:none} } /* ── Carte de marque du hero sous 820 px, toutes pistes ───────────── .brand-image{height:52px} vise le logo de l'en-tete, mais la classe est aussi portee par celui de la carte du hero : il s'y retrouvait ecrase a 52 px de haut, soit 19 % de son bloc sur la piste 03 et 22 % sur la 02. Le correctif existait, il n'etait cantonne qu'a la piste 01. */ @media(max-width:820px){ .hero__brand .brand-image--primary{height:auto;max-width:100%;max-height:none} .hero__brand{width:min(268px,74vw);min-height:0;padding:18px} /* la piste 03 compose dans un disque : le logo garde sa marge interieure */ .theme-confiance .hero__brand{width:min(238px,64vw);height:auto;aspect-ratio:1; padding:24px;place-content:center} .theme-confiance .hero__brand .brand-image--primary{max-width:76%} } /* ── Piste 01 : le bandeau haut disparait en mobile ───────────────── Il n'y reste qu'une ligne, « Languidic (Morbihan) · 40 km autour de Languidic », deja portee par le hero et le pied de page. */ @media(max-width:820px){.theme-continuity .topbar{display:none}} /* ── Piste 01 : le cadre du portrait s'ajuste a la photo ──────────── Le fichier fait 962 x 830 : c'est tout ce dont on dispose. Un cadre de 620 px de haut obligeait a l'agrandir de 1,47x sur ecran Retina et a en rogner un tiers en largeur. A 420 px, l'image s'affiche a sa definition native et n'est presque plus recadree. */ .theme-continuity .portrait-wrap{height:420px} @media(max-width:820px){.theme-continuity .portrait-wrap{height:min(340px,64vw)}} /* ── Piste 01 : la section « Votre interlocuteur » s'aligne en haut ── La photo fait 420 px et la colonne de texte 491 : centrees, elles laissaient 35 px de vide au-dessus et en dessous de l'image. Cales en haut, les deux colonnes partagent une meme ligne de depart. */ @media(min-width:821px){.theme-continuity .proof-split{align-items:start}} /* ── Rassurance sous le panneau de contact ────────────────────────── Le formulaire donnait les coordonnees et rien d'autre. Ces trois reperes reprennent ce que le site affirme deja ailleurs. */ .rassurance{list-style:none;margin:22px 0 0;padding:18px 0 0;display:flex;flex-direction:column; gap:14px;border-top:1px solid rgba(255,255,255,.16)} .rassurance strong{display:block;font-size:14px;line-height:1.3} .rassurance span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45; color:rgba(255,255,255,.62)} .theme-proximite .rassurance,.theme-confiance .rassurance,.theme-signature .rassurance{ border-top-color:var(--line)} .theme-proximite .rassurance span,.theme-confiance .rassurance span, .theme-signature .rassurance span{color:var(--muted)} /* ── Grille de realisations a deux vignettes ──────────────────────── Quand un chantier n'a qu'une vue exploitable, mieux vaut deux vignettes pleines qu'une troisieme case vide. */ .project-grid--duo{grid-template-columns:repeat(2,1fr)} @media(max-width:820px){.project-grid--duo{grid-template-columns:1fr}} /* ── Reperes de commune ───────────────────────────────────────────── La colonne de gauche des pages de secteur ne portait qu'un titre de deux lignes face a trois paragraphes : elle porte maintenant les chiffres verifies de la commune. */ .reperes{margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0; border-top:1px solid var(--line)} .reperes>div{padding:14px 0;border-bottom:1px solid var(--line)} .reperes dt{font:700 20px/1.15 var(--display);letter-spacing:-.01em;color:var(--accent)} .reperes dd{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)} .theme-continuity .reperes dt{font-weight:400;font-size:23px;text-transform:uppercase; letter-spacing:.01em} @media(max-width:820px){.reperes{margin-top:20px}.reperes>div{padding:12px 0}} /* ── Menu deroulant en telephone et tablette ──────────────────────── Le tiroir etait un panneau flottant cale sur le survol : au doigt il ne se deployait pas, et les entrees tombaient a 12 px. Ici tout est pose dans le flux, les entrees principales et les prestations partagent la meme colonne, le sous-menu se decale d'un filet. */ @media(max-width:1079px){ .menu-toggle{padding:10px} .menu-toggle span{width:27px;height:2.5px} /* backdrop-filter faisait de l'en-tete le bloc conteneur du panneau fixe : il ne pouvait pas depasser la hauteur de la barre. L'en-tete est opaque en telephone, le flou n'y apportait rien. */ .site-header{backdrop-filter:none;background:var(--paper)} .theme-continuity .site-header,.theme-technique .site-header{background:var(--ink)} /* le panneau prend l'ecran : il est pose en fixe sous l'en-tete, le script lui donne sa hauteur de depart et fige la page derriere lui */ .header-menu{position:fixed;left:0;right:0;bottom:0;top:74px; padding:14px 20px calc(26px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch; border-bottom:0;box-shadow:none;overscroll-behavior:contain} /* la regle de bureau centre et pousse a droite : tout est remis a plat ici */ .header-menu.is-open{display:flex;flex-direction:column;align-items:stretch; justify-content:flex-start;gap:0;flex:none} .header-menu>*{width:100%} body.menu-ouvert{overflow:hidden} .main-nav{gap:0} /* les entrees principales reprennent la typo de titrage de la piste, celle des prestations du tiroir, d'un cran au-dessus */ .main-nav>a,.nav-group>a{ display:flex;align-items:center;min-height:50px;padding:7px 0; font-family:var(--display);font-size:20px;font-weight:700;line-height:1.08; letter-spacing:.01em;text-transform:uppercase; border-radius:0;border:0;background:none;white-space:normal} .theme-continuity .main-nav>a,.theme-continuity .nav-group>a{font-weight:400;font-size:22px} .main-nav>a[aria-current=page],.nav-group--current>a,.nav-group[data-open=true]>a{ background:none;color:var(--accent)} .theme-continuity .main-nav>a[aria-current=page], .theme-continuity .nav-group--current>a, .theme-continuity .nav-group[data-open=true]>a, .theme-technique .main-nav>a[aria-current=page], .theme-technique .nav-group--current>a, .theme-technique .nav-group[data-open=true]>a{background:none;color:var(--accent-2)} /* la fleche devient une vraie cible, alignee sur le bord droit */ .nav-group{display:grid;grid-template-columns:1fr 50px;align-items:stretch;gap:0} .nav-group>a{grid-column:1} .nav-group__toggle{grid-column:2;display:grid;place-items:center;padding:0;border:0} .nav-group__chevron{width:15px;opacity:.75} .nav-group[data-open=true] .nav-group__chevron{opacity:1} /* le tiroir descend dans le flux */ .nav-drop{grid-column:1/-1;position:static;display:none;width:auto;padding:0; background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none} .nav-group[data-open=true] .nav-drop{display:block} .theme-continuity .nav-drop,.theme-technique .nav-drop{background:none;box-shadow:none} .main-nav .nav-drop a, .main-nav .nav-drop a.nav-drop__tout{ display:block;opacity:1;transform:none;transition:none; margin:0 0 0 3px;padding:10px 0 10px 16px;border:0;border-radius:0; border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent); white-space:normal;background:none} .main-nav .nav-drop__item:hover,.main-nav .nav-drop__item[aria-current=page]{ background:none;border-left-color:var(--accent)} .nav-drop__corps strong{font-size:15px;font-weight:700} /* la piste 01 compose ces intitules en Anton : ils doivent respirer davantage */ .theme-continuity .nav-drop__corps strong{font-size:17.5px;line-height:1.1} /* la description etait masquee : sans elle le tiroir n'etait que trois mots */ .nav-drop__corps small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4} .nav-drop a{transition-delay:0s!important} /* la derniere entree du tiroir prend la meme typo que les prestations, la couleur suffit a la distinguer */ .main-nav .nav-drop a.nav-drop__tout{ margin-top:0;font-family:var(--display);font-size:15px;font-weight:700; letter-spacing:.02em;text-transform:uppercase} .theme-continuity .main-nav .nav-drop a.nav-drop__tout{font-weight:400;font-size:17.5px} .header-actions{margin-top:22px} .menu-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px; margin-top:auto;padding-top:28px} .menu-social a{display:grid;place-items:center;width:50px;height:50px; border:1px solid var(--line);border-radius:var(--radius)} .menu-social svg{width:21px;height:21px} .menu-social a:hover{border-color:var(--accent);color:var(--accent)} .theme-continuity .menu-social a,.theme-technique .menu-social a{ border-color:rgba(255,255,255,.24);color:#fff} .theme-continuity .menu-social a:hover{border-color:var(--accent-2);color:var(--accent-2)} } /* hors telephone la rangee n'a pas lieu d'etre : le pied de page porte deja ces liens */ @media(min-width:1080px){.menu-social{display:none}} /* Au doigt, l'etat de survol reste colle apres le tap : pas de fond au survol sur un ecran tactile, la couleur de l'intitule suffit a dire ou on est. */ @media(hover:none){ .main-nav>a:not([aria-current=page]):hover, .nav-group:not(.nav-group--current):hover>a{background:none;color:inherit} .main-nav .nav-drop__item:hover{background:none} } /* Facebook au pied de page : le seul lien du bloc marque qui sorte du site */ .footer-brand>a.footer-fb{display:inline-flex;align-items:center;gap:9px;margin-top:14px; padding:9px 14px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius); color:rgba(255,255,255,.82);font-size:13px} .footer-brand>a.footer-fb svg{width:17px;height:17px;flex:none} .footer-brand>a.footer-fb:hover{border-color:var(--accent-2);color:#fff} /* ── Banniere de page en telephone ────────────────────────────────── Les valeurs de bureau passaient telles quelles : 100 px de padding haut, 50 px de gouttiere et 440 px de hauteur minimale imposee. Sur un ecran de 375 px, ca ouvrait un trou entre le fil d'Ariane et le titre, puis un deuxieme entre le texte et l'image ou les boutons. */ @media(max-width:820px){ .page-hero,.page-hero--image{min-height:0;gap:26px;padding:38px 0 48px;align-items:start} .page-hero .lede{margin-bottom:0} .page-hero__visual{height:clamp(230px,62vw,300px)} .fil-ariane{padding-top:16px} } @media(max-width:560px){ .page-hero,.page-hero--image{gap:20px;padding:32px 0 40px} } /* ── Rythme vertical sous 560 px ──────────────────────────────────── Les sections gardaient les 48 px de la tablette et les grilles leurs 36 px de gouttiere : sur un ecran etroit ou tout est empile, ca fait defiler du vide entre chaque bloc. */ @media(max-width:560px){ .section{padding:32px 0} .intro-grid,.proof-split,.zone-callout,.split-list,.timeline,.source-note, .brand-showcase,.before-after-section,.current-brand-proof,.zone-layout{gap:20px} } /* ── Ombre pleine decalee en telephone ────────────────────────────── 12 px lus sur un bloc de 1140 px passent bien ; sur un bloc de 340 px c'est un quart de sa largeur en bavure. Les decalages superieurs a 8 px sont ramenes a 8, la valeur deja utilisee par les cartes. */ @media(max-width:820px){ .theme-continuity .hero__brand{box-shadow:8px 8px 0 var(--accent-2)} }