/* ===========================================================
PIXEL CPA — Design tokens (from Identité Visuelle 2026)
=========================================================== */
/* Jost is loaded via in each page's . Aileron (client brand font, "je t'ai mis
aileron otf") is self-hosted from /assets as OTF and declared here — used site-wide. */
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:300; font-display:swap; src:url("assets/Aileron-Light.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:400; font-display:swap; src:url("assets/Aileron-Regular.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:italic; font-weight:400; font-display:swap; src:url("assets/Aileron-Italic.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:600; font-display:swap; src:url("assets/Aileron-SemiBold.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:700; font-display:swap; src:url("assets/Aileron-Bold.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:800; font-display:swap; src:url("assets/Aileron-Heavy.otf") format("opentype"); }
@font-face{ font-family:'Aileron'; font-style:normal; font-weight:900; font-display:swap; src:url("assets/Aileron-Black.otf") format("opentype"); }
:root{
/* primaires */
--dark: #1A1A1A;
--cream: #FBEEDD;
--cream-mid: #FFD69C;
--orange: #FFB347;
--teal: #30C4B6;
--teal-mid: #8CD2CB;
--teal-pale: #BDEAE6;
/* secondaires (accents de données / ponctuels) */
--coral: #FF6B4A;
--blue: #005F97;
--blue-soft: #4FA3D8; /* variante lisible du bleu sur fond sombre */
--pink: #FC96AC;
--red: #cc0000; /* nouvelle couleur "rouge" (V4 client) */
--white: #FFFFFF;
--paper: #F4EEE4;
--ink: #1A1A1A;
--ink-soft: rgba(26,26,26,.64);
--ink-faint: rgba(26,26,26,.42);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 10px;
--font-display:'Aileron', 'Jost', sans-serif;
--font-body: 'Aileron', 'Inter', sans-serif;
--ease: cubic-bezier(.22,.9,.32,1);
/* Deconstructed-corner masks, inlined as data-URIs so they also work over file://
(Chrome/Edge block external-file CSS masks on the file:// protocol). */
--notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 210'%3E%3Cpath d='M200,0 L580,0 A20 20 0 0 1 600,20 L600,190 A20 20 0 0 1 580,210 L20,210 A20 20 0 0 1 0,190 L0,74 A20 20 0 0 1 20,54 L160,54 A20 20 0 0 0 180,34 L180,20 A20 20 0 0 1 200,0 Z'/%3E%3C/svg%3E");
--notch-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cpath d='M218,0 L1172,0 A28 28 0 0 1 1200,28 L1200,272 A28 28 0 0 1 1172,300 L28,300 A28 28 0 0 1 0,272 L0,148 A28 28 0 0 1 28,120 L162,120 A28 28 0 0 0 190,92 L190,28 A28 28 0 0 1 218,0 Z'/%3E%3C/svg%3E");
/* service cards: shallower top-left notch, viewBox tuned to the card ratio so corners stay round */
--notch-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'%3E%3Cpath d='M136,0 L342,0 A18 18 0 0 1 360,18 L360,282 A18 18 0 0 1 342,300 L18,300 A18 18 0 0 1 0,282 L0,70 A18 18 0 0 1 18,52 L100,52 A18 18 0 0 0 118,34 L118,18 A18 18 0 0 1 136,0 Z'/%3E%3C/svg%3E");
/* hero (first section): small deconstructed corner — fallback used on narrow desktops (860–1023px)
where the title wraps to several lines and there's no room for the big cutout. */
--notch-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1160 380'%3E%3Cpath d='M170,0 L1140,0 A20 20 0 0 1 1160,20 L1160,360 A20 20 0 0 1 1140,380 L20,380 A20 20 0 0 1 0,360 L0,84 A20 20 0 0 1 20,64 L130,64 A20 20 0 0 0 150,44 L150,20 A20 20 0 0 1 170,0 Z'/%3E%3C/svg%3E");
/* large top-left cutout (≥1100px): the "missing corner" that holds the hero title on the cream
background — the concept the client asked for. Big hole ≈ 560×205 in a 1176×410 box. */
--notch-hero-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1176 410'%3E%3Cpath d='M584,0 L1148,0 A28 28 0 0 1 1176,28 L1176,382 A28 28 0 0 1 1148,410 L28,410 A28 28 0 0 1 0,382 L0,189 A24 24 0 0 1 24,165 L536,165 A24 24 0 0 0 560,141 L560,24 A24 24 0 0 1 584,0 Z'/%3E%3C/svg%3E");
/* FIXED-SIZE top-left notch piece — subtracted from the hero card via mask-composite so the hole
never rescales with the card. All three inner corners are rounded (the two convex step corners
+ the concave one), matching the deconstructed brand shape. Positioned with a -20px offset. */
--notch-piece: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 604 209'%3E%3Cpath d='M0,0 L604,0 L604,20 A24 24 0 0 0 580,44 L580,161 A24 24 0 0 1 556,185 L44,185 A24 24 0 0 0 20,209 L0,209 Z' fill='%23000'/%3E%3C/svg%3E");
/* the header's exact rounded notch piece, flipped vertically → a bottom-left cutout that holds
the citation (dark text on the page, like the title in the header). Used big so the 24px
arcs render clearly rounded. */
/* the client's own brand frame (ELEMENTS_GRAPHIQUES/substract2.svg) — a landscape card with a
3-tier rounded staircase notch carved into the bottom-left, inlined as a data-URI so it works
over file://. Used as the photo's mask; the citation sits in the carved notch. */
--frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 428.24'%3E%3Cpath d='M0,23.53v167.06c0,12.99,10.53,23.53,23.53,23.53h50.59c12.99,0,23.53,10.53,23.53,23.53v7.06c0,12.99,10.53,23.53,23.53,23.53h225.88c12.99,0,23.53,10.53,23.53,23.53v112.94c0,12.99,10.53,23.53,23.53,23.53h882.35c12.99,0,23.53-10.53,23.53-23.53V23.53c0-12.99-10.53-23.53-23.53-23.53H23.53C10.53,0,0,10.53,0,23.53Z' fill='%23000'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:700;
line-height:1.06;
margin:0;
letter-spacing:-.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.wrap{
max-width:1240px;
margin:0 auto;
padding:0 32px;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
font-family:var(--font-body);
font-weight:700;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--dark);
background:var(--teal-pale);
padding:6px 12px;
border-radius:8px;
}
/* the little coloured dot was removed at the client's request (v3) */
.eyebrow.on-dark{background:color-mix(in srgb, var(--accent) 26%, transparent); color:var(--white);}
.eyebrow.on-dark::before{background:var(--accent);}
.eyebrow.orange{background:#FFE9C7;}
.eyebrow.orange::before{background:var(--orange);}
/* ---------- per-page colour themes (client rdv: "thème de couleur par page") ----------
Accueil keeps the brand default (orange). Services=teal, À propos=coral, Contact=bleu.
The page accent drives the floating pixels, the eyebrow chips and the logo mark. */
:root{ --accent:var(--orange); --accent-2:var(--coral); --accent-pale:#FFE9C7; }
body.theme-teal{ --accent:var(--teal); --accent-2:#6FD3C8; --accent-pale:#CFEFEA; }
body.theme-coral{ --accent:var(--coral); --accent-2:#FF9E86; --accent-pale:#FFDDD3; }
body.theme-blue{ --accent:var(--blue-soft); --accent-2:#93C4E6; --accent-pale:#D3E6F4; }
body.theme-red{ --accent:var(--red); --accent-2:#F26A6A; --accent-pale:#F6D9D9; }
/* eyebrow chips follow the page accent — but NOT the on-dark ones: those keep their light-on-dark
treatment (a pale accent bg + white text would be unreadable — client feedback) */
body[class*="theme-"] .eyebrow:not(.on-dark){ background:var(--accent-pale); }
/* floating pixels follow the page accent, and mirror corner-to-corner (client: "vraiment miroir"):
opposite corners repeat the same colours/sizes so the two clusters are a true point-mirror. */
body[class*="theme-"] .panel-blocks b:nth-child(2n+1){ background:var(--accent) !important; }
body[class*="theme-"] .panel-blocks b:nth-child(2n){ background:var(--accent-2) !important; }
body[class*="theme-"] .panel-pixels b:nth-child(1),
body[class*="theme-"] .panel-pixels b:nth-child(4){ background:var(--accent) !important; }
body[class*="theme-"] .panel-pixels b:nth-child(2),
body[class*="theme-"] .panel-pixels b:nth-child(5){ background:var(--accent-2) !important; }
body[class*="theme-"] .panel-pixels b:nth-child(3),
body[class*="theme-"] .panel-pixels b:nth-child(6){ background:var(--accent-2) !important; }
/* logo stays the SAME (brand orange+teal) on every page — client: "garde le logo d'accueil le même partout" */
/* ---------- buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
font-weight:600;
font-size:15px;
padding:14px 26px;
border-radius:12px;
border:1.5px solid transparent;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease;
white-space:nowrap;
}
/* monochrome primary button: charcoal on light surfaces (kills the prominent yellow the
client flagged); inverted to white on dark surfaces below so it never disappears. */
.btn-primary{
background:var(--dark);
color:var(--white);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px -14px rgba(0,0,0,.5);
}
.hero .btn-primary, .panel-dark .btn-primary, .deco .btn-primary{
background:var(--white);
color:var(--dark);
}
.hero .btn-primary:hover, .panel-dark .btn-primary:hover, .deco .btn-primary:hover{
box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
}
.btn-dark{
background:var(--dark);
color:var(--white);
}
.btn-dark:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px -14px rgba(0,0,0,.5);
}
.btn-ghost{
background:transparent;
border-color:rgba(26,26,26,.18);
color:var(--dark);
}
.btn-ghost:hover{ background:rgba(26,26,26,.06); }
.btn-ghost.on-dark{ border-color:rgba(255,255,255,.25); color:var(--white); }
.btn-ghost.on-dark:hover{ background:rgba(255,255,255,.08); }
.btn svg{width:16px;height:16px; transition:transform .35s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
/* ---------- logo (real brand SVG, from Pixel_Logo_Export) ---------- */
.logo{ display:inline-flex; align-items:center; }
.logo-img{ height:26px; width:auto; display:block; }
/* ---------- skip link ---------- */
.skip-link{
position:absolute; left:16px; top:-100px;
z-index:300;
background:var(--dark); color:var(--white);
padding:12px 20px; border-radius:0 0 12px 12px;
font-size:14px; font-weight:600;
transition:top .25s var(--ease);
}
.skip-link:focus{ top:0; }
:where(a, button, .faq-q):focus-visible{
outline:2.5px solid var(--orange);
outline-offset:3px;
border-radius:6px;
}
/* ---------- scroll progress ---------- */
.scroll-progress{
position:fixed; top:0; left:0; width:0%; height:3px;
background:linear-gradient(90deg, var(--orange), var(--teal));
z-index:200;
transition:width .12s linear;
}
/* ---------- nav ---------- */
.nav{
position:sticky; top:0; z-index:100;
padding:20px 0;
background:rgba(244,238,228,.72);
backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(26,26,26,.06);
transition:padding .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
animation:navDrop .7s var(--ease) both;
}
.nav.is-stuck{
padding:12px 0;
background:rgba(244,238,228,.86);
box-shadow:0 10px 30px -22px rgba(26,26,26,.5);
}
@keyframes navDrop{ from{ transform:translateY(-100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo-img{ animation:markPop .6s var(--ease) .35s both; }
@keyframes markPop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
position:relative;
padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-soft);
transition:background .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ background:rgba(26,26,26,.06); color:var(--dark); }
.nav-links a.active::after{
content:''; position:absolute; left:16px; right:16px; bottom:4px; height:2px; border-radius:2px;
background:var(--orange);
}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-burger{display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid rgba(26,26,26,.15); background:none; align-items:center; justify-content:center;}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{content:'';display:block; width:18px; height:2px; background:var(--dark); position:relative; transition:all .25s ease;}
.nav-burger span::before{position:absolute; top:-6px;}
.nav-burger span::after{position:absolute; top:6px;}
.nav-burger.is-open span{ background:transparent; }
.nav-burger.is-open span::before{ top:0; transform:rotate(45deg); }
.nav-burger.is-open span::after{ top:0; transform:rotate(-45deg); }
/* ---------- reveal-on-scroll ---------- */
[data-reveal]{
opacity:0;
transform:translate3d(0,18px,0);
filter:blur(6px);
transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
will-change:opacity, transform, filter;
backface-visibility:hidden;
-webkit-font-smoothing:antialiased;
}
[data-reveal].in{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
[data-reveal="fade"]{ transform:translate3d(0,14px,0); }
[data-reveal="left"]{ transform:translate3d(-24px,0,0); }
[data-reveal="right"]{ transform:translate3d(24px,0,0); }
[data-reveal="scale"]{ transform:translate3d(0,22px,0) scale(.97); }
/* text keeps the blur-up but never a transform: sub-pixel shifting on glyphs looks dirty */
h1[data-reveal],
h2[data-reveal],
h3[data-reveal],
h4[data-reveal],
.eyebrow[data-reveal],
.crumb[data-reveal],
.lede[data-reveal],
p[data-reveal]{
transform:none !important;
transition:opacity .8s var(--ease), filter .8s var(--ease);
}
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }
/* once revealed, drop the compositing hints so long pages don't hold dozens of layers */
[data-reveal].done{ will-change:auto; filter:none; }
/* ---------- headline word reveal (JS splits .split-words into word) ---------- */
.split-words .w{
display:inline-block;
overflow:hidden;
vertical-align:top;
padding-bottom:.06em; /* room for descenders inside the mask */
}
.split-words .w > i{
display:inline-block;
font-style:inherit;
transform:translateY(105%);
transition:transform .9s var(--ease);
transition-delay:calc(var(--wi,0) * 55ms);
}
.split-words.in .w > i{ transform:translateY(0); }
/* ---------- cursor spotlight on light cards ---------- */
.s-card, .why-card, .pr-card, .v-card{ position:relative; isolation:isolate; }
.s-card::after, .why-card::after, .pr-card::after, .v-card::after{
content:'';
position:absolute; inset:0;
border-radius:inherit;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,179,71,.16), transparent 70%);
opacity:0;
transition:opacity .45s ease;
pointer-events:none;
z-index:-1;
}
.s-card:hover::after, .why-card:hover::after, .pr-card:hover::after, .v-card:hover::after{ opacity:1; }
.pr-card.feat::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,179,71,.22), transparent 70%); }
/* ---------- button shine sweep ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
content:'';
position:absolute; top:0; bottom:0; left:-60%;
width:40%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
transform:skewX(-18deg);
transition:left .6s var(--ease);
pointer-events:none;
}
.btn:hover::before{ left:120%; }
.btn-dark::before, .btn-primary::before{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); }
/* inverted (white) primary buttons on dark surfaces get a dark shine instead */
.hero .btn-primary::before, .panel-dark .btn-primary::before, .deco .btn-primary::before{ background:linear-gradient(100deg, transparent, rgba(26,26,26,.14), transparent); }
/* ---------- photos: grayscale by default, colour + slow push-in on hover ---------- */
.hero-photo img, .showcase-photo img, .founder img{
transition:transform 1.1s var(--ease), filter .7s ease;
/* iOS Safari does NOT clip a composited child (these imgs carry a filter/transform) against
the parent's border-radius, so the photo's corners render square — reported on mobile.
Giving the img the parent's own radius makes the rounding intrinsic to the image, so it
no longer depends on the parent's overflow clip. Chromium is unaffected (radii coincide). */
border-radius:inherit;
}
.hero-photo:hover img, .showcase-photo:hover img, .founder:hover img{
transform:scale(1.04);
filter:grayscale(0) contrast(1);
}
/* ---------- ambient aurora blobs (behind dark panels + hero) ---------- */
.aurora{
/* horizontal bleed removed (was inset:-20% -10%) — the -10% sides pushed the element past the
viewport and caused a mobile horizontal-overflow / width bug. Vertical bleed kept. */
position:absolute; inset:-20% 0;
pointer-events:none;
z-index:0;
overflow:hidden;
border-radius:inherit;
}
.aurora b{
position:absolute;
display:block;
width:46%; aspect-ratio:1;
border-radius:50%;
filter:blur(70px);
opacity:.32;
animation:drift 18s ease-in-out infinite;
}
.aurora b:nth-child(1){ background:var(--orange); top:-10%; left:4%; }
.aurora b:nth-child(2){ background:var(--teal); top:24%; right:2%; animation-delay:-6s; }
.aurora b:nth-child(3){ background:var(--coral); bottom:-16%; left:38%; animation-delay:-12s; opacity:.22; }
@keyframes drift{
0%,100%{ transform:translate3d(0,0,0) scale(1); }
33% { transform:translate3d(6%,-8%,0) scale(1.12); }
66% { transform:translate3d(-5%,6%,0) scale(.94); }
}
/* The aurora is absolutely positioned, so it would paint over static siblings. Lift the
content wrappers by name — a blanket `.panel-dark > *` rule would tie on specificity with
`.stats-panel .mark-bg` and clobber its position:absolute. */
.cta-split-head, .cta-split-body{ position:relative; z-index:2; }
/* ---------- scroll-driven progress bar (no JS on browsers that support it) ---------- */
@supports (animation-timeline: scroll()){
.scroll-progress{
width:100%;
transform-origin:0 50%;
transform:scaleX(0);
transition:none;
animation:progress linear both;
animation-timeline:scroll(root block);
}
@keyframes progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}
/* ---------- cross-document view transitions (progressive enhancement) ---------- */
@view-transition{ navigation:auto; }
.nav{ view-transition-name:site-nav; }
footer{ view-transition-name:site-footer; }
::view-transition-old(root){ animation:vtOut .28s var(--ease) both; }
::view-transition-new(root){ animation:vtIn .42s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(10px); } }
/* ---------- motion opt-out: kill every ambient/scroll animation, show final state ---------- */
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
.split-words .w > i{ transform:none !important; }
.aurora, .btn::before, .s-card::after, .why-card::after, .pr-card::after, .v-card::after{ display:none; }
.chip, .hero-chip, .strip .items-track{ animation:none !important; }
@view-transition{ navigation:none; }
}
/* ---------- deconstructed rectangle block (signature shape) ---------- */
.deco{
position:relative;
background:var(--dark);
border-radius:28px;
overflow:hidden;
/* the deconstructed corner: a single SVG mask cuts the notch with every corner
(including the concave one) rounded — no more square-cornered two-div hack. */
-webkit-mask:var(--notch) 0 0 / 100% 100% no-repeat;
mask:var(--notch) 0 0 / 100% 100% no-repeat;
}
/* wide dark panels (CTA) use a smaller, corner-sized notch */
.deco-panel{
-webkit-mask-image:var(--notch-panel);
mask-image:var(--notch-panel);
}
.deco-bite{
position:absolute;
top:0; left:0;
background:var(--paper);
border-bottom-right-radius:24px;
z-index:2;
}
.deco::before{
content:'';
position:absolute; inset:0;
background:radial-gradient(480px circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,.09), transparent 62%);
opacity:0;
transition:opacity .5s ease;
pointer-events:none;
z-index:1;
}
.deco:hover::before{ opacity:1; }
/* floating pixel chips (ambient motion + pointer parallax) */
.chip{
position:absolute;
border-radius:var(--radius-md);
animation:float 7s ease-in-out infinite;
}
/* --px/--py are written by the pointer-parallax handler. Folding them into the keyframes'
transform lets the drift and the parallax coexist — two separate transform declarations
would just overwrite one another. */
@keyframes float{
0%,100%{ transform:translate(var(--px,0px), var(--py,0px)) rotate(0deg); }
50% { transform:translate(var(--px,0px), calc(var(--py,0px) - 14px)) rotate(3deg); }
}
/* ---------- floating brand pixel chips (logo "detached pixel" motif) ---------- */
/* Small rounded-square clusters echoing the delivered Rectangle chips + the logo mark's
pixel that pops off the corner. Purely decorative, never intercept pointer events. */
.pixels{ position:absolute; pointer-events:none; z-index:1; }
.pixels b{
position:absolute; display:block;
border-radius:28%;
box-shadow:0 10px 22px -10px rgba(26,26,26,.4);
animation:float 7s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){ .pixels b{ animation:none; } }
/* the hero cluster sits over the dark card, above the headline — hidden on small screens
where the card is tight, shown from the desktop breakpoint. */
.pixels-hero{ display:none; z-index:3; }
/* ---------- section spacing ---------- */
section{ padding:112px 0; position:relative; }
.section-tight{ padding:72px 0; }
/* ---------- hero ---------- */
.hero{ padding-top:48px; padding-bottom:64px; }
.hero-grid{
display:grid;
grid-template-columns:.92fr 1fr;
gap:56px;
align-items:center;
}
.hero-cta{ display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap; }
/* single notched hero panel (matches brand-guide mockup) — sized by content, never by a fixed height,
so it can't overflow regardless of how the heading wraps, the viewport width, or font fallback. */
.hero-card{
position:relative;
display:flex; flex-direction:column;
background:transparent;
border-radius:28px;
}
/* dark body sits behind the content; on desktop it's cut with the deconstructed corner.
kept as a separate layer so the overhanging photo and the title are never masked. */
.hero-card-fill{
position:absolute; inset:0;
background:var(--dark);
border-radius:28px;
z-index:0;
}
.hero-bite{
position:relative;
background:transparent;
padding:44px 26px 22px;
z-index:2;
}
.hero-bite h1{ font-size:clamp(28px,7vw,40px); max-width:16ch; margin:0; color:var(--white); }
.hero-copy{ position:relative; z-index:2; padding:22px 26px 0; }
.hero-copy .lede{ color:rgba(255,255,255,.72); font-size:15.5px; max-width:48ch; }
.hero-copy .btn{ margin-top:20px; }
.hero-chip{ display:none; border-radius:var(--radius-md); animation:float 7s ease-in-out infinite; }
.hero-photo{
position:relative;
margin:22px 26px 28px;
border-radius:var(--radius-lg);
overflow:hidden;
aspect-ratio:16/11;
box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
z-index:3;
}
/* cover-fit inside the ratio box, biased upward so the crop never cuts through the face */
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; filter:grayscale(1) contrast(1.05); }
/* desktop: text block stays in normal (auto-height) flow so it can never overflow;
the photo is decoupled from that flow (position:absolute, anchored from the bottom only)
so it can never inflate the card's height either — each piece is sized by its own content. */
@media(min-width:860px){
.hero-card{ display:block; margin-top:40px; padding-bottom:8px; }
/* narrow desktop: plain dark rounded card — the notch (which scales with card height) would
reach the taller 3–4 line title here and bleed white text onto the cream. */
.hero-bite{ width:min(460px,46%); padding:108px 44px 18px; }
.hero-copy{ width:min(460px,46%); padding:30px 44px 48px; }
.hero-photo{
position:absolute;
right:7%; bottom:-36px;
width:25%;
margin:0;
aspect-ratio:1/1;
height:auto;
}
/* both chips sit in the open dark gap between the text column and the photo —
never over the photo, never over the paragraph text. */
.hero-chip{ display:block; position:absolute; }
.chip-orange{ top:-42px; left:57%; width:126px; height:126px; background:var(--orange); z-index:4; }
.chip-teal{ top:140px; left:50%; width:82px; height:82px; background:var(--teal); z-index:1; animation-delay:1.2s; }
.pixels-hero{ display:block; top:34px; left:44px; }
}
/* wide desktop: the title moves INTO the deconstructed hole (dark ink on the cream page) — the
concept the client wants. The hole is a FIXED 560×160px notch SUBTRACTED from a rounded card
(mask-composite), so it never rescales with the viewport — the paragraph always clears it,
at any width. Gated ≥1100px, where the title reliably fits on 2 lines inside the notch. */
@media(min-width:1100px){
.hero-card-fill{
/* top-left corner isn't rounded — it lives inside the notch — which avoids a faint arc seam */
border-radius:0 28px 28px 28px;
-webkit-mask:linear-gradient(#000,#000), var(--notch-piece) -20px -20px / 604px 209px no-repeat;
-webkit-mask-composite:xor;
mask:linear-gradient(#000,#000), var(--notch-piece) -20px -20px / 604px 209px no-repeat;
mask-composite:exclude;
}
/* title sized to fill the notch ("grandeur du carré bleu"): bigger + pulled up so it occupies
the hole, while the 2 lines still fit inside the 560px width. */
.hero-bite{ width:min(560px,55%); padding:24px 28px 6px; }
.hero-bite h1{ color:var(--dark); font-size:54px; line-height:1.03; }
/* paragraph starts below the fixed 160px notch — a constant offset, so it can never bleed;
nudged down ~10px so the lede + button sit centred against the photo (client rdv). */
.hero-copy{ padding-top:50px; }
}
@media(max-width:480px){
.hero-bite{ padding:26px 20px 20px; }
.hero-copy{ padding:18px 20px 0; }
.hero-photo{ margin:18px 20px 26px; }
}
.hero-visual{
position:relative;
height:460px;
}
.hero-visual .deco{
position:absolute; inset:0;
padding:28px;
}
.hero-visual .deco-bite{ width:44%; height:38%; }
.hero-visual .founder{
position:absolute; right:24px; bottom:24px; top: 38%;
width:46%;
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
z-index:3;
}
.hero-visual .founder img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.05); }
.hero-visual .stat-card{
position:absolute; left:28px; bottom:28px;
background:var(--white);
border-radius:var(--radius-md);
padding:18px 20px;
z-index:3;
box-shadow:0 24px 48px -20px rgba(0,0,0,.35);
min-width:160px;
}
.hero-visual .stat-card .num{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--dark); }
.hero-visual .stat-card .lbl{ font-size:12px; color:var(--ink-faint); font-weight:600; margin-top:2px; }
/* ---------- logo strip (marquee) ---------- */
.strip{
display:flex; align-items:center; gap:28px;
padding:26px 0;
border-top:1px solid rgba(26,26,26,.08);
border-bottom:1px solid rgba(26,26,26,.08);
}
.strip span{ flex:none; font-size:13px; font-weight:700; letter-spacing:.05em; color:var(--ink-faint); text-transform:uppercase; }
.strip .items{
flex:1 1 auto; min-width:0; overflow:hidden; position:relative;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.strip .items-track{ display:flex; gap:36px; flex:none; width:max-content; animation:marquee 26s linear infinite; }
.strip:hover .items-track{ animation-play-state:paused; }
.strip .items b, .strip .items-track b{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink-soft); white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* ---------- section headers ---------- */
.s-head{ max-width:640px; margin-bottom:56px; }
.s-head h2{ font-size:clamp(30px,3.4vw,44px); margin-top:16px; }
.s-head .lede{ margin-top:16px; color:var(--ink-soft); font-size:16px; }
.s-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
/* ---------- services grid ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; perspective:1200px; }
.s-card{
background:var(--dark);
border-radius:var(--radius-lg);
padding:34px 28px 30px;
position:relative;
transition:transform .15s ease-out, box-shadow .45s var(--ease);
border:1px solid rgba(255,255,255,.06);
will-change:transform;
}
.s-card:hover{ box-shadow:0 30px 60px -28px rgba(26,26,26,.5); }
.s-card:not(:hover){ transform:none !important; }
.s-icon{
width:52px; height:52px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
margin-bottom:22px;
transition:transform .4s var(--ease);
}
.s-card:hover .s-icon{ transform:rotate(-6deg) scale(1.06); }
.s-icon svg{width:24px;height:24px;}
.s-card h3{ font-size:19px; margin-bottom:10px; color:var(--white); }
.s-card p{ font-size:14.5px; color:rgba(255,255,255,.64); }
.s-card .go{
display:inline-flex; align-items:center; gap:6px; margin-top:18px;
font-size:13px; font-weight:700; color:var(--orange);
opacity:0; transform:translateX(-6px);
transition:opacity .3s ease, transform .3s ease;
}
.s-card:hover .go{ opacity:1; transform:translateX(0); }
/* FULL brand colour tile (guide colours, bright) + solid BLACK glyph (client). Red is dark → white glyph. */
.s-icon.orange{ background:var(--orange); }
.s-icon.teal{ background:var(--teal); }
.s-icon.coral{ background:var(--coral); }
.s-icon.blue{ background:var(--blue-soft); }
.s-icon.red{ background:var(--red); }
/* ---------- pixel icons (client brand icon set) — inlined & recoloured ---------- */
/* The delivered SVGs are solid-black pixel art. They're inlined (not referenced via
mask/img) so they render over file:// and any host, and each one is tinted to a brand
colour through `color` — the paths inherit currentColor. */
.pico{ display:inline-block; line-height:0; color:var(--dark); }
.pico svg{ display:block; width:100%; height:100%; }
.pico svg path{ fill:currentColor; }
.s-icon .pico{ width:34px; height:34px; color:var(--dark); }
/* ---------- deconstructed colour cards (home services preview) ---------- */
.deco-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.deco-card{
position:relative;
display:flex; flex-direction:column;
border-radius:var(--radius-lg);
background:var(--card, var(--cream-mid));
/* one consistent inset on every side; icon, title, body and link all share the 32px
left margin so the card reads on a clean square grid. */
padding:32px 32px 30px;
min-height:300px;
box-shadow:0 18px 26px -18px rgba(26,26,26,0);
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.deco-card:hover{ transform:translateY(-6px); box-shadow:0 26px 34px -18px rgba(26,26,26,.3); }
/* the notched-fill layer is retired here — the stretched mask distorted the corner and
pushed the icon off-grid; the flat rounded card keeps the margins square. */
.deco-card-fill{ display:none; }
.deco-card-icon{
position:relative; z-index:1;
width:42px; height:42px;
margin-bottom:20px;
color:var(--dark);
}
.deco-card h3{ position:relative; z-index:1; font-size:20px; margin-bottom:12px; color:var(--dark); }
.deco-card p{ position:relative; z-index:1; font-size:14.5px; color:rgba(26,26,26,.72); }
.deco-card .go{
position:relative; z-index:1;
display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:20px;
font-size:13px; font-weight:700; color:var(--dark);
transition:transform .3s ease;
}
.deco-card:hover .go{ transform:translateX(4px); }
/* ---------- pixel blocks decorative row ---------- */
.pixel-row{ display:flex; gap:18px; align-items:flex-end; }
.pixel-row .px{ border-radius:var(--radius-md); }
/* ---------- dark panel (about / cta) ---------- */
.panel-dark{
background:var(--dark);
color:var(--white);
border-radius:var(--radius-xl);
padding:64px;
position:relative;
/* visible (was hidden for the removed aurora) so the floating cubes can spill past the edge */
overflow:visible;
}
.panel-dark h2, .panel-dark h3{ color:var(--white); }
.panel-dark .lede{ color:rgba(255,255,255,.68); }
/* two brand cubes FLOATING past the panel's bottom-left edge — a mirror of the hero's floating
chips (client v3: "cubes flottants comme ceux en haut, effet miroir"). */
.panel-blocks{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.panel-blocks b{ position:absolute; display:block; border-radius:24%;
box-shadow:0 16px 34px -12px rgba(26,26,26,.55); animation:float 7s ease-in-out infinite; }
.panel-blocks b:nth-child(2){ animation-delay:1.1s; }
@media(prefers-reduced-motion:reduce){ .panel-blocks b{ animation:none; } }
/* on mobile the panel stacks to one column and the cubes would land on the button — hide them */
@media(max-width:860px){ .panel-blocks{ display:none; } }
/* ---------- animated brand pixel-mark (client rdv: "élément graphique animé à la place des cubes") ----------
a detached-pixel cluster — echo of the logo mark — that softly breathes and recomposes. Two clusters
mirror corner-to-corner. CSS-only, GPU-friendly (transform/opacity), colours follow the page accent. */
.pixels-anim{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.pixels-anim i{ position:absolute; display:block; border-radius:24%;
box-shadow:0 16px 34px -12px rgba(26,26,26,.55);
animation:pxBreathe 3.6s var(--ease) infinite; will-change:transform, opacity; }
.pixels-anim i.p1{ width:100px; height:100px; background:var(--accent); }
.pixels-anim i.p2{ width:56px; height:56px; background:var(--accent-2); animation-delay:.55s; }
.pixels-anim i.p3{ width:32px; height:32px; background:var(--accent); animation-delay:1.15s; }
@keyframes pxBreathe{
0%,100%{ transform:translate3d(0,0,0) scale(.92); opacity:.62; }
50% { transform:translate3d(0,-7px,0) scale(1.06); opacity:1; }
}
@media(prefers-reduced-motion:reduce){ .pixels-anim i{ animation:none; opacity:.9; transform:none; } }
@media(max-width:860px){ .pixels-anim{ display:none; } }
/* compact variant sits INSIDE the corners of the smaller centred CTA panels */
.pixels-anim.compact i.p1{ width:38px; height:38px; }
.pixels-anim.compact i.p2{ width:22px; height:22px; }
.pixels-anim.compact i.p3{ width:14px; height:14px; }
.pixels-anim.compact i{ box-shadow:none; }
/* ---------- quote showcase (photo shaped by the brand frame; citation in the carved notch) ---------- */
.quote-showcase{ position:relative; margin:0; aspect-ratio:1300 / 428.24;
/* drop-shadow (not box-shadow) so the shadow follows the frame's staircase corner */
filter:drop-shadow(0 22px 38px rgba(26,26,26,.24)); }
.quote-showcase .qs-media{ position:absolute; inset:0; display:block; overflow:hidden;
-webkit-mask:var(--frame) center / 100% 100% no-repeat;
mask:var(--frame) center / 100% 100% no-repeat; }
.quote-showcase .qs-media img{ width:100%; height:100%; object-fit:cover; object-position:60% 56%;
display:block; filter:grayscale(1) contrast(1.04); transition:filter .5s var(--ease);
transform:scaleX(-1); transform-origin:center; } /* photo mirrored (client: "reverse la photo"); mask/notch stay put */
/* photo passes to full colour on hover (client) */
.quote-showcase:hover .qs-media img{ filter:grayscale(0) contrast(1.04); }
/* the " sits in the upper step of the staircase; the quote text in the wide lower step */
.quote-showcase .quote-mark{ position:absolute; left:calc(3.4% - 20px); bottom:calc(40% - 30px); z-index:3;
font-family:var(--font-display); font-weight:800; font-size:clamp(66px,7vw,94px); line-height:.4; color:var(--dark); }
.quote-showcase blockquote{ position:absolute; left:0; bottom:0; margin:0; width:28%; min-width:225px; background:transparent;
padding:0 8px 1.4% 2.6%; z-index:2; }
/* bigger quote (client) → the text now runs to 4 lines, so the block is tightened (smaller
padding/margins, snug cite leading) to keep it inside the frame's short bottom notch
instead of riding up onto the photo. */
.quote-showcase blockquote p{ font-size:clamp(13px,1.26vw,16px); line-height:1.36; color:var(--dark);
font-weight:500; margin:0 0 4px; }
.quote-showcase cite{ font-style:normal; display:block; font-size:12.5px; line-height:1.2; font-weight:700;
letter-spacing:.02em; color:var(--ink-soft); }
/* the wide-short frame can't hold the quote once narrow — stack a plain card instead */
@media(max-width:900px){
.quote-showcase{ aspect-ratio:auto; filter:none; }
.quote-showcase .qs-media{ position:static; display:block; height:280px; -webkit-mask:none; mask:none; border-radius:var(--radius-lg); }
/* same iOS clipping caveat as .hero-photo — the img is mirrored (transform), so it must
carry the radius itself or its corners render square on mobile Safari. */
.quote-showcase .qs-media img{ height:100%; border-radius:inherit; }
.quote-showcase .quote-mark{ position:static; display:block; margin:14px 0 2px 2px; font-size:56px; }
.quote-showcase blockquote{ position:static; width:auto; min-width:0; background:var(--paper);
padding:0 4px 6px; }
.quote-showcase blockquote p{ font-size:17px; line-height:1.5; }
}
/* ---------- sober pixel accents for a plain dark panel (v3: pure black+white felt blank) ---------- */
.panel-pixels{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.panel-pixels b{ position:absolute; display:block; border-radius:26%; }
/* ---------- showcase (photo + quote, stacked per brand-guide mockup) ---------- */
.showcase{ margin:0; } /* */
.showcase-quote{ margin:0; } /* */
.showcase-photo{ border-radius:var(--radius-xl); overflow:hidden; }
.showcase-photo img{ width:100%; height:auto; display:block; filter:grayscale(1); }
.showcase-quote{ max-width:640px; margin-top:32px; }
.showcase-quote .quote-mark{ font-family:var(--font-display); font-size:56px; line-height:.6; color:var(--orange); margin-bottom:6px; display:block; }
.showcase-quote .quote{ font-size:18px; font-weight:500; line-height:1.55; color:var(--dark); }
.showcase-quote .who{ margin-top:20px; font-size:14px; font-weight:700; color:var(--ink-soft); }
/* ---------- CTA split (dark two-column panel) ---------- */
.cta-split{ display:grid; grid-template-columns:.85fr 1fr; gap:48px; align-items:center; }
.cta-split-head h2{ margin-top:14px; font-size:clamp(28px,3.2vw,38px); }
.cta-split-body .btn{ margin-top:26px; }
@media(max-width:860px){
.cta-split{ grid-template-columns:1fr; gap:24px; }
}
/* ---------- footer ---------- */
footer{ background:var(--dark); color:var(--white); padding:72px 0 28px; }
.foot-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand p{ margin-top:16px; color:rgba(255,255,255,.55); font-size:14px; max-width:32ch; }
.foot-col h5{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; font-weight:700; }
.foot-col a{ display:block; color:rgba(255,255,255,.72); font-size:14.5px; padding:6px 0; transition:color .2s ease, transform .2s ease; }
.foot-col a:hover{ color:var(--orange); transform:translateX(3px); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px; }
.foot-bottom span{ font-size:13px; color:rgba(255,255,255,.4); }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease; }
.foot-social a:hover{ background:var(--orange); border-color:var(--orange); }
.foot-social svg{ width:16px; height:16px; stroke:var(--white); }
/* ---------- generic page hero (sous-pages) ---------- */
.page-hero{ padding:96px 0 28px; }
.page-hero h1{ font-size:clamp(36px,4.6vw,56px); margin-top:18px; max-width:16ch; }
.page-hero .lede{ margin-top:18px; max-width:56ch; color:var(--ink-soft); font-size:17px; }
.crumb{ font-size:13px; color:var(--ink-faint); font-weight:600; }
.crumb b{ color:var(--dark); }
/* ---------- contact info cards ---------- */
.info-list{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.info-card{ display:flex; gap:16px; align-items:flex-start; background:var(--dark); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:0 12px 28px -20px rgba(26,26,26,.5); min-height:110px; border:1px solid rgba(255,255,255,.06); }
/* bigger pixel icons, coloured directly on the dark card (same style as the homepage cards) —
no pastel chip. Colour comes from an inline `color:` on each `.ic`; the pico must inherit it
(the base .pico rule would otherwise force it dark → invisible on the dark card). */
.info-card .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;
background:currentColor; transition:transform .4s var(--ease); }
.info-card .ic .pico{ width:30px; height:30px; color:var(--dark); display:block; }
.info-card .ic .pico svg{ width:100% !important; height:100% !important; display:block; }
.info-card .ic .pico svg path{ fill:var(--dark); }
.info-card:hover .ic{ transform:rotate(-6deg) scale(1.06); }
.info-card h4{ font-size:15px; margin-bottom:4px; color:var(--white); }
.info-card p{ font-size:14px; color:rgba(255,255,255,.64); }
.info-card p a{ color:var(--white); }
@media(max-width:860px){ .info-list{ grid-template-columns:1fr; } }
/* ---------- contact map (Leaflet + OpenStreetMap, zoomed on the region, highlighted zones) ---------- */
.contact-map{ background:#DCE7DD; height:440px; }
.contact-map .leaflet-container{ width:100%; height:100%; background:#DCE7DD; font-family:var(--font-body); }
.contact-map .leaflet-container img{ max-width:none; } /* the global img{max-width:100%} breaks tiles */
.contact-map .leaflet-tooltip.map-city{ background:var(--dark); color:#fff; border:none; border-radius:7px;
font-weight:700; font-size:12px; letter-spacing:.02em; padding:4px 10px; box-shadow:0 8px 20px -8px rgba(0,0,0,.55); }
.contact-map .leaflet-tooltip.map-city::before{ border-top-color:var(--dark); }
@media(max-width:600px){ .contact-map{ height:320px; } }
/* ---------- values grid (about) — 4 icon boxes, same language as the home "Pourquoi" cards
(client rdv: "section Nos principes → 4 boîtes avec icône et couleurs") ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.v-card{ padding:30px 26px; border-radius:var(--radius-lg); background:var(--dark); border:1px solid rgba(255,255,255,.06);
transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.v-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(26,26,26,.5); }
.v-card .mark{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
margin-bottom:20px; background:currentColor; transition:transform .4s var(--ease); }
.v-card .mark svg{ width:34px; height:34px; }
.v-card .mark svg path{ fill:var(--dark); }
.v-card:hover .mark{ transform:rotate(-6deg) scale(1.06); }
.v-card h4{ font-size:16.5px; margin-bottom:8px; color:var(--white); }
.v-card p{ font-size:14px; color:rgba(255,255,255,.64); margin:0; }
/* ---------- why-us grid (brand mark cards) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card{
background:var(--dark);
border-radius:var(--radius-lg);
padding:30px 26px;
border:1px solid rgba(255,255,255,.06);
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(26,26,26,.5); }
.why-card .mark{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
margin-bottom:20px; background:currentColor; transition:transform .4s var(--ease); }
.why-card .mark svg{ width:34px; height:34px; }
.why-card .mark svg path{ fill:var(--dark); }
.why-card:hover .mark{ transform:rotate(-6deg) scale(1.06); }
.why-card h4{ font-size:16.5px; margin-bottom:8px; color:var(--white); }
.why-card p{ font-size:14px; color:rgba(255,255,255,.64); }
/* ---------- stats as light cards (v3: replaces the dark gradient banner, contrasts the dark
sections above/below) ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ background:var(--cream); border-radius:var(--radius-lg); padding:34px 30px;
border:1px solid rgba(26,26,26,.05); box-shadow:0 20px 44px -32px rgba(26,26,26,.4); }
.stat .num{ font-family:var(--font-display); font-size:clamp(32px,4vw,46px); font-weight:700; color:var(--dark); }
.stat .lbl{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); }
/* ---------- timeline ---------- */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:rgba(26,26,26,.12); }
.t-item{ position:relative; padding-bottom:40px; }
.t-item:last-child{ padding-bottom:0; }
.t-item::before{ content:''; position:absolute; left:-32px; top:4px; width:12px; height:12px; border-radius:4px; background:var(--teal); }
.t-item .yr{ font-family:var(--font-display); font-weight:700; color:var(--orange); font-size:14px; }
.t-item h4{ font-size:18px; margin:6px 0 8px; }
.t-item p{ color:var(--ink-soft); font-size:14.5px; max-width:52ch; }
/* ---------- faq ---------- */
.faq-item{ border-bottom:1px solid rgba(26,26,26,.1); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:24px 4px; cursor:pointer; }
.faq-q h4{ font-size:16.5px; font-weight:600; font-family:var(--font-body); }
.faq-q .plus{ width:26px; height:26px; border-radius:8px; background:var(--paper); flex:none; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s ease; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background:var(--dark); border-radius:2px; }
.faq-q .plus::before{ width:11px; height:2px; }
.faq-q .plus::after{ width:2px; height:11px; transition:transform .3s ease; }
.faq-item.open .plus{ background:var(--accent); transform:rotate(180deg); }
.faq-item.open .plus::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 4px 24px; color:var(--ink-soft); font-size:14.5px; max-width:64ch; }
/* ---------- pricing (services) ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pr-card{ background:var(--white); border-radius:var(--radius-lg); padding:36px 30px; border:1.5px solid rgba(26,26,26,.06); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.pr-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(26,26,26,.3); }
.pr-card.feat{ background:var(--dark); color:var(--white); position:relative; }
.pr-card.feat h3, .pr-card.feat .price{ color:var(--white); }
.pr-card.feat .desc{ color:rgba(255,255,255,.6); }
.pr-card.feat li{ color:rgba(255,255,255,.85); }
.pr-card .badge{ position:absolute; top:-13px; right:30px; background:var(--orange); color:var(--dark); font-size:11px; font-weight:800; letter-spacing:.04em; padding:6px 12px; border-radius:999px; text-transform:uppercase; }
.pr-card h3{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.pr-card .price{ font-family:var(--font-display); font-size:40px; font-weight:700; margin:14px 0 4px; }
.pr-card .price span{ font-size:14px; font-weight:500; font-family:var(--font-body); color:var(--ink-faint); }
.pr-card .desc{ font-size:13.5px; color:var(--ink-soft); margin-bottom:24px; }
.pr-card ul{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; }
.pr-card li{ font-size:14px; display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); }
.pr-card li svg{ width:16px; height:16px; flex:none; margin-top:2px; stroke:var(--teal); }
.pr-card.feat li svg{ stroke:var(--orange); }
/* ---------- cta band ---------- */
.cta-band{ text-align:center; max-width:640px; margin:0 auto; }
.cta-band h2{ font-size:clamp(28px,3.4vw,42px); }
/* ---------- responsive ---------- */
@media(max-width:980px){
.hero-grid{ grid-template-columns:1fr; }
.hero-visual{ height:380px; order:-1; }
.services-grid{ grid-template-columns:repeat(2,1fr); }
.deco-cards{ grid-template-columns:repeat(2,1fr); }
.foot-top{ grid-template-columns:1fr 1fr; }
.values{ grid-template-columns:repeat(2,1fr); }
.pricing{ grid-template-columns:1fr; }
.why-grid{ grid-template-columns:repeat(2,1fr); }
.stats-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
}
@media(max-width:680px){
.wrap{ padding:0 20px; }
.nav-links{
display:none;
position:absolute; top:68px; left:20px; right:20px;
flex-direction:column; align-items:stretch; gap:2px;
background:var(--paper); border-radius:20px; padding:10px;
box-shadow:0 24px 48px -20px rgba(0,0,0,.25);
opacity:0; transform:translateY(-10px);
transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-links.mobile-open{ display:flex; opacity:1; transform:translateY(0); }
.nav-links a{ padding:14px 18px; }
.nav-burger{ display:flex; }
/* le bouton CTA de la nav ne rentre pas en mobile et poussait le burger hors écran
(menu injoignable + toute la page trop large) → on ne garde que le burger. */
.nav-cta .btn-primary{ display:none; }
section{ padding:72px 0; }
.services-grid{ grid-template-columns:1fr; }
.values{ grid-template-columns:1fr; }
.deco-cards{ grid-template-columns:1fr; }
.foot-top{ grid-template-columns:1fr; gap:32px; }
.panel-dark{ padding:36px 26px; }
.why-grid{ grid-template-columns:1fr; }
.stats-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:480px){
.wrap{ padding:0 16px; }
section{ padding:56px 0; }
.hero{ padding-top:44px; padding-bottom:40px; }
.hero-visual{ height:340px; }
.hero-visual .stat-card{ left:16px; bottom:16px; min-width:128px; padding:13px 15px; }
.hero-visual .stat-card .num{ font-size:24px; }
.hero-visual .founder{ right:16px; width:52%; }
.btn{ padding:12px 20px; font-size:14px; }
.values{ grid-template-columns:1fr; }
.deco[style*="padding:72px"]{ padding:48px 22px !important; }
}
@media(min-width:1600px){
.wrap{ max-width:1380px; }
}
/* ---------- perf ---------- */
/* Skip layout/paint for offscreen sections. contain-intrinsic-size supplies a placeholder
height so the scrollbar doesn't jump as they come into view. */
.section-defer{
content-visibility:auto;
contain-intrinsic-size:auto 700px;
}
/* The hero owns its own aurora layer; the card can't host one because .hero-photo
deliberately hangs outside the card's bounds on desktop. */
.hero{ position:relative; }
.hero > .wrap{ position:relative; z-index:1; }
.hero .aurora b{ opacity:.2; }
/* Reserve the photo's box before it decodes, so nothing below it shifts (CLS). */
.hero-photo, .showcase-photo{ background:rgba(26,26,26,.06); }