/* ============================================================
   revopro — feuille de style unique (toutes pages)
   ============================================================ */

:root{
  --bg:#fff; --text:#101010; --text2:#555; --muted:#8f8f8f;
  --border:#ececec; --tile:#f4f4f4; --card:#fff; --cell:#f0f0f0;
  --pill-warm:#faf3da; --sun:#eab308;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"]{
  --bg:#0d0d0d; --text:#f2f2f2; --text2:#c9c9c9; --muted:#8f8f8f;
  --border:#242424; --tile:#1a1a1a; --card:#141414; --cell:#1c1c1c;
  --pill-warm:#1c2233; --sun:#93a7f5;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
a{color:inherit}
img{max-width:100%}
.container{max-width:768px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:8px}

/* ---------- NAV ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:36px}
.nav-group{display:flex;gap:10px;align-items:center}
.navbtn{width:44px;height:44px;border-radius:14px;background:var(--tile);border:none;display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;text-decoration:none;transition:background .25s,transform .25s var(--e-spring)}
.navbtn:hover{background:var(--border);transform:translateY(-2px)}
.navbtn:active{transform:scale(.92)}
.navbtn.active{background:var(--border)}
.navbtn svg{width:20px;height:20px;transition:transform .35s var(--e-spring)}
.navbtn:hover svg{transform:rotate(-10deg) scale(1.12)}
.navbtn.theme{background:var(--tile);color:var(--text)}
.theme:hover .icon-sun{transform:rotate(90deg) scale(1.15)}
.theme:hover .icon-moon{transform:rotate(-25deg) scale(1.15)}
.icon-moon{display:none}
[data-theme="dark"] .icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:none}
.gh{display:flex;gap:9px;align-items:center;height:44px;padding:0 16px;border-radius:14px;background:var(--tile);text-decoration:none;font-weight:600;font-size:14px;transition:background .25s,transform .25s var(--e-spring)}
.gh:hover{background:var(--border);transform:translateY(-2px)}
.gh:active{transform:scale(.92)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:6px;transition:opacity .2s}
.brand:hover{opacity:.72}
.brand-mark{height:22px;width:auto;display:block}
.brand-mark.mark-white{display:none}
[data-theme="dark"] .brand-mark.mark-ink{display:none}
[data-theme="dark"] .brand-mark.mark-white{display:block}
.brand-name{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.brand-word{height:20px;width:auto;display:block}
.brand-word.word-white{display:none}
[data-theme="dark"] .brand-word.word-ink{display:none}
[data-theme="dark"] .brand-word.word-white{display:block}

/* ---------- TOOLTIPS ---------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.8);background:#111;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .28s var(--e-spring);z-index:20}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}
[data-theme="dark"] [data-tip]::after{background:#f2f2f2;color:#111}

/* ---------- HERO (accueil) ---------- */
.hero{margin-top:110px}
.avatar{width:64px;height:64px;border-radius:18px;object-fit:cover;display:block;box-shadow:0 0 0 1px var(--border)}
.hero h1{font-size:42px;margin-top:30px;letter-spacing:-.02em}
.hero-logo{position:relative;display:inline-block;line-height:0;vertical-align:-.03em}
.hero-logo img{height:.72em;width:auto;display:block;position:relative;z-index:0}
.hero-logo .hl-white{display:none}
[data-theme="dark"] .hero-logo .hl-ink{display:none}
[data-theme="dark"] .hero-logo .hl-white{display:block}
.hl-mark{position:absolute;left:-4.5%;right:-5%;top:-14%;bottom:-10%;pointer-events:none;overflow:visible;z-index:1;mix-blend-mode:multiply;transform:rotate(-1.2deg)}
[data-theme="dark"] .hl-mark{mix-blend-mode:screen}
.hl-stroke{fill:none;stroke:url(#hl-grad);stroke-width:92;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:hlSwipe .55s .5s cubic-bezier(.3,.75,.35,1) forwards}
.hl-stroke2{stroke:#00e599;stroke-opacity:.22;stroke-width:54;stroke-dashoffset:-100;animation-duration:.45s;animation-delay:.85s}
@keyframes hlSwipe{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hl-stroke,.hl-stroke2{animation:none;stroke-dashoffset:0}}
.hero .sub{color:var(--muted);margin-top:14px;font-size:18px}
.mail{display:inline-block;font-weight:600;text-decoration:underline;text-underline-offset:4px;transition:text-underline-offset .25s var(--e-out),opacity .2s}
.mail:hover{text-underline-offset:7px;opacity:.72}
.hero .mail{margin-top:28px}

/* ---------- SECTIONS ---------- */
.section{margin-top:110px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px}
h2{font-size:26px;letter-spacing:-.01em}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;font-size:15px;transition:text-underline-offset .25s var(--e-out),opacity .2s}
.link:hover{text-underline-offset:7px;opacity:.72}

/* ---------- CARTES PROJET ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid2 .card-solo{grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}
.card{display:block;text-decoration:none}
.thumb{height:260px;border-radius:26px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;will-change:transform;transition:box-shadow .5s var(--e-out)}
.card:hover .thumb{box-shadow:0 20px 44px rgba(0,0,0,.12)}
.card h3{font-size:16.5px;margin:18px 0 6px;font-weight:600;transition:opacity .2s}
.card:hover h3{opacity:.72}
.card .desc{color:var(--muted);font-size:15.5px}

/* Vignette image */
.thumb-img{background-position:center;background-size:cover;background-repeat:no-repeat}
/* Vignette logo (croix pointillée + fleur) */
.thumb-logo{background-color:var(--card);background-image:repeating-linear-gradient(to bottom,var(--border) 0 5px,transparent 5px 11px),repeating-linear-gradient(to right,var(--border) 0 5px,transparent 5px 11px);background-size:1px 100%,100% 1px;background-position:50% 0,0 50%;background-repeat:no-repeat}
.thumb-logo .flower{width:92px;height:92px;color:var(--text);transition:transform .5s var(--e-spring)}
.card:hover .thumb-logo .flower{transform:rotate(22deg)}
/* Vignette sombre à icônes */
.thumb-dark{background:#0a0a0a;gap:28px;color:#fff}
.thumb-dark span{font-family:'Space Mono',monospace;font-size:20px;white-space:pre;text-align:center;line-height:1.15;display:flex;align-items:center}
.thumb-dark svg{width:30px;height:30px}
/* Vignette menu (mock UI) */
.thumb-menu{background:var(--tile)}
.menu{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:8px;width:210px;box-shadow:0 12px 32px rgba(0,0,0,.10);font-size:13.5px;text-align:left}
.mi{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:7px 10px;border-radius:7px;color:var(--text)}
.mi:hover{background:var(--tile)}
.mi kbd{color:var(--muted);font-family:'Space Mono',monospace;font-size:11px}
.menu hr{border:none;border-top:1px solid var(--border);margin:6px 0}

/* Icônes devant les titres projets */
.card[data-tags] h3{display:flex;align-items:center;gap:9px}
.card[data-tags] h3::before{color:var(--muted);font-size:12px;font-family:'Space Mono',monospace}
.card[data-tags*="opensource"] h3::before{content:'</>'}
.card[data-tags*="client"] h3::before{content:'♡';font-size:15px}
.card[data-tags*="phare"] h3::before{content:'☆';font-size:15px}

/* ---------- STACK ---------- */
.stack-row{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.tile{aspect-ratio:1;border-radius:22px;background:var(--tile);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .3s var(--e-spring)}
.tile:hover{background:var(--border);transform:translateY(-4px)}
.tile img{width:34px;height:34px;object-fit:contain}

/* ---------- PROSE / À PROPOS ---------- */
.prose p{color:var(--text2);font-size:17px;line-height:1.65;margin-bottom:26px}
.prose b{color:var(--text)}
.polaroids{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:50px}
.polaroid{position:relative;height:230px;border-radius:26px;transition:transform .55s var(--e-spring)}
.pl-img{position:absolute;inset:0;border-radius:26px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.10);transition:transform .6s var(--e-spring),box-shadow .55s var(--e-out)}
.pl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .55s var(--e-out)}
.polaroid:hover .pl-img img{filter:grayscale(0) contrast(1)}
.polaroid:hover{z-index:3}
.polaroid:hover .pl-img{box-shadow:0 26px 54px rgba(0,0,0,.22)}
.polaroid.p-r:hover .pl-img{transform:translateX(13%) rotate(5deg)}
.polaroid.p-l:hover .pl-img{transform:translateX(-13%) rotate(-5deg)}
.polaroid:nth-child(1){transform:rotate(-3deg)}
.polaroid:nth-child(2){transform:rotate(2.5deg)}
.polaroid:nth-child(3){transform:rotate(-2deg)}
.badge{position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 18px rgba(0,0,0,.10);transition:left .5s var(--e-spring),right .5s var(--e-spring)}
.b-tr{top:-16px;right:-14px}
.b-tl{top:-16px;left:-14px}
.polaroid:hover .b-tr{right:calc(100% - 38px)}
.polaroid:hover .b-tl{left:calc(100% - 38px)}
.polaroid:hover .badge{animation:boing .5s var(--e-spring)}

/* ---------- POP-UP "ANIMATIONS" (conversion) ---------- */
.anim-pop{--pop-bg:#fff;--pop-fg:#101010;--pop-mut:#6b7280;--pop-line:var(--border);--pop-cta:#111;--pop-cta-fg:#fff;--pop-cta-line:transparent;--pop-close:#f2f2f0;
  position:fixed;right:22px;bottom:22px;z-index:300;width:360px;max-width:calc(100vw - 32px);background:var(--pop-bg);border:1px solid var(--pop-line);border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.26);opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .4s var(--e-out),transform .5s var(--e-spring)}
[data-theme="dark"] .anim-pop{--pop-bg:#141414;--pop-fg:#f4f4f4;--pop-mut:#9a9a9a;--pop-line:rgba(255,255,255,.09);--pop-cta:#242424;--pop-cta-fg:#fff;--pop-cta-line:rgba(255,255,255,.14);--pop-close:rgba(0,0,0,.42);box-shadow:0 34px 80px rgba(0,0,0,.55)}
.anim-pop.show{opacity:1;transform:none;pointer-events:auto}
.ap-media{position:absolute;top:0;left:0;right:0;height:200px;background:url('assets/cover-nexpay.jpg') center/cover;filter:grayscale(1) brightness(1.06) blur(3px);transform:scale(1.16)}
[data-theme="dark"] .ap-media{filter:grayscale(1) brightness(.62) blur(3px)}
.ap-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--pop-bg) 92%)}
.ap-body{position:relative;padding:128px 22px 20px}
.ap-title{color:var(--pop-fg);font-weight:700;font-size:18px;letter-spacing:-.01em;padding-right:20px}
.ap-sub{color:var(--pop-mut);font-size:14px;margin-top:9px;line-height:1.55}
.ap-row{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.ap-cta{display:inline-flex;align-items:center;gap:9px;background:var(--pop-cta);border:1px solid var(--pop-cta-line);color:var(--pop-cta-fg);padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;transition:transform .2s var(--e-spring),opacity .2s}
.ap-cta span{font-size:17px;line-height:1;opacity:.85}
.ap-cta:hover{transform:translateY(-1px);opacity:.9}
.ap-2nd{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--pop-line);color:var(--pop-fg);padding:11px 16px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;transition:background .2s,transform .2s var(--e-spring)}
.ap-2nd:hover{transform:translateY(-1px);background:rgba(127,127,127,.12)}
.ap-close{position:absolute;top:12px;right:14px;z-index:2;width:28px;height:28px;background:var(--pop-close);backdrop-filter:blur(4px);border:1px solid var(--pop-line);color:var(--pop-fg);font-size:16px;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:filter .2s}
.ap-close:hover{filter:brightness(.94)}

/* ---------- COLONNES (références / expertises) ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.col-title{font-size:16px;font-weight:600;margin-bottom:20px}
.xp{margin-bottom:32px}
.xp h3{font-size:16px;font-weight:600}
.xp p{color:var(--muted);margin-top:6px;font-size:15.5px}
.list{list-style:none}
.list li{color:var(--text2);padding:7px 0;font-size:16px}
.vals{list-style:none}
.vals li{font-weight:600;padding:9px 0;font-size:16.5px;text-decoration:underline;text-underline-offset:4px}

/* ---------- ARTICLES (liste) ---------- */
.writing-card{border:1px solid var(--border);border-radius:26px;background:var(--card);overflow:hidden}
.post{display:block;padding:34px;text-decoration:none;position:relative;transition:background .3s}
.post:hover{background:var(--tile)}
.post+.post{border-top:1px solid var(--border)}
.post h3{font-size:17px;font-weight:600;padding-right:44px}
.post p{color:var(--muted);margin:12px 0 18px;line-height:1.6;font-size:15.5px}
.post time{font-size:14px;font-weight:600}
.post .arrow{position:absolute;top:34px;right:34px;color:var(--text);transition:transform .3s var(--e-spring)}
.post:hover .arrow{transform:translateX(4px) rotate(-35deg)}

/* ---------- PAGES INTERNES ---------- */
.page-title{font-size:40px;margin-top:96px;letter-spacing:-.02em}
.page-sub{color:var(--muted);margin-top:16px;font-size:17px}
.chips{display:flex;gap:12px;margin-top:46px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;transition:background .25s,transform .2s}
.chip svg{width:15px;height:15px}
.chip:hover{background:var(--tile)}
.chip:active{transform:scale(.93)}
.chip.active{background:var(--tile);border-color:transparent}

/* ---------- PAGES DÉTAIL (projet / article) ---------- */
.meta-links{display:flex;gap:24px;margin-top:24px}
.meta-links a{font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;transition:text-underline-offset .25s var(--e-out),opacity .2s}
.meta-links a:hover{text-underline-offset:7px;opacity:.72}
.thumb-hero{height:340px;margin-top:46px}
.article-body{margin-top:56px}
.article-body h2{margin:48px 0 18px;font-size:22px}
.figure{border:1px solid var(--border);border-radius:26px;background:var(--card);padding:56px 32px;display:flex;align-items:center;justify-content:center;margin-top:28px}
.caption{text-align:center;color:var(--muted);font-size:13.5px;margin-top:14px}
.mock{border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;max-width:440px;background:var(--bg);text-align:left}
.mock b{font-size:14.5px}
.mock p{color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.5}
.mock .btn{margin-left:auto;background:#111;color:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
[data-theme="dark"] .mock .btn{background:#f2f2f2;color:#111}
.highlights{list-style:none;margin-top:8px}
.highlights li{color:var(--text2);padding:7px 0 7px 18px;position:relative;font-size:15.5px;line-height:1.55}
.highlights li::before{content:'•';position:absolute;left:0;color:var(--muted)}

/* ---------- HERO AGENCE ---------- */
.about-hero{margin-top:70px;height:420px;border-radius:30px;overflow:hidden;background:url('assets/agence-hero.jpg') center/cover no-repeat}

/* ---------- FOOTER ---------- */
.footer{margin:130px auto 70px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mosaic{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%;overflow:hidden;padding:8px 0}
.mosaic-row{display:flex;justify-content:center;gap:4px}
.cell{width:13px;height:13px;border-radius:3.5px;background:var(--cell);flex:0 0 auto;transform:scale(0);transition:transform .55s var(--e-spring)}
.mosaic.in .cell{transform:scale(1)}
.mosaic.in .cell:hover{transform:scale(1.5);transition-delay:0s!important}
.footer .mail{margin-top:60px}

/* ---------- ANIMATIONS D'ENTRÉE ---------- */
@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes boing{0%{scale:1}40%{scale:1.28}100%{scale:1}}

.nav{animation:rise .55s var(--e-out) both}
.avatar{animation:pop .65s .1s var(--e-spring) both}
.hero h1{animation:rise .75s .18s var(--e-out) both}
.hero .sub{animation:rise .75s .28s var(--e-out) both}
.hero .mail{animation:rise .75s .38s var(--e-out) both}
.page-title{animation:rise .75s .05s var(--e-out) both}
.page-sub,.meta-links{animation:rise .75s .15s var(--e-out) both}
.chips .chip{animation:pop .55s var(--e-spring) both}
.chips .chip:nth-child(2){animation-delay:.07s}
.chips .chip:nth-child(3){animation-delay:.14s}
.chips .chip:nth-child(4){animation-delay:.21s}
.thumb-hero{animation:rise .8s .22s var(--e-out) both}

/* Apparition au scroll + stagger enfants */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal.in .card,.reveal.in .post,.reveal.in .xp{animation:rise .65s var(--e-out) both}
.reveal.in .card:nth-child(2),.reveal.in .post:nth-child(2),.reveal.in .xp:nth-child(2){animation-delay:.08s}
.reveal.in .card:nth-child(3),.reveal.in .post:nth-child(3),.reveal.in .xp:nth-child(3){animation-delay:.16s}
.reveal.in .card:nth-child(4),.reveal.in .post:nth-child(4),.reveal.in .xp:nth-child(4){animation-delay:.24s}
.reveal.in .card:nth-child(5),.reveal.in .post:nth-child(5){animation-delay:.32s}
.reveal.in .card:nth-child(6),.reveal.in .post:nth-child(6){animation-delay:.4s}
.reveal.in .card:nth-child(7){animation-delay:.48s}
.reveal.in .tile{animation:pop .55s var(--e-spring) both}
.reveal.in .tile:nth-child(2){animation-delay:.05s}
.reveal.in .tile:nth-child(3){animation-delay:.1s}
.reveal.in .tile:nth-child(4){animation-delay:.15s}
.reveal.in .tile:nth-child(5){animation-delay:.2s}
.reveal.in .tile:nth-child(6){animation-delay:.25s}
.reveal.in .tile:nth-child(7){animation-delay:.3s}
.reveal.in .tile:nth-child(8){animation-delay:.35s}
.reveal.in .list li,.reveal.in .vals li,.reveal.in .highlights li{animation:rise .5s var(--e-out) both}
.reveal.in .list li:nth-child(2),.reveal.in .vals li:nth-child(2),.reveal.in .highlights li:nth-child(2){animation-delay:.05s}
.reveal.in .list li:nth-child(3),.reveal.in .vals li:nth-child(3),.reveal.in .highlights li:nth-child(3){animation-delay:.1s}
.reveal.in .list li:nth-child(4),.reveal.in .vals li:nth-child(4),.reveal.in .highlights li:nth-child(4){animation-delay:.15s}
.reveal.in .list li:nth-child(5),.reveal.in .vals li:nth-child(5){animation-delay:.2s}
.reveal.in .list li:nth-child(n+6),.reveal.in .vals li:nth-child(6){animation-delay:.25s}
.reveal.in .polaroid{animation:pop .65s var(--e-spring) both}
.reveal.in .polaroid:nth-child(2){animation-delay:.12s}
.reveal.in .polaroid:nth-child(3){animation-delay:.24s}
.reveal.in .figure{animation:rise .65s var(--e-out) both}

/* Filtrage projets */
.card.hide{display:none}

/* ---------- ACCESSIBILITÉ ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal{transition-duration:.45s}
  .card .thumb,.polaroid{transition-duration:.3s}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:760px){
  .grid2,.cols,.polaroids{grid-template-columns:1fr}
  .grid2 .card-solo{width:auto}
  .polaroids{gap:48px}
  .stack-row{grid-template-columns:repeat(4,1fr);gap:12px}
  .hero{margin-top:72px}
  .hero h1{font-size:34px}
  .section{margin-top:80px}
  .page-title{font-size:32px;margin-top:64px}
  .thumb{height:240px}
  .thumb-hero{height:260px}
  .thumb-dark{gap:18px}
  .thumb-dark span{font-size:16px}
  .thumb-dark svg{width:24px;height:24px}
  .about-hero{height:300px;margin-top:48px}
  .post{padding:24px}
  .post .arrow{top:24px;right:24px}
  .footer{margin:90px auto 50px}
}
@media(max-width:480px){
  .container{padding:0 18px}
  .nav{padding-top:24px;flex-wrap:wrap;row-gap:12px}
  .nav-group{gap:5px}
  .brand-name{display:none}
  .brand-word,[data-theme="dark"] .brand-word.word-white{display:none}
  .navbtn{width:38px;height:38px;border-radius:12px}
  .gh{height:38px;padding:0 10px;font-size:12.5px;border-radius:12px}
  .hero h1{font-size:30px}
  .hero .sub{font-size:16px}
  h2{font-size:22px}
  .cell{width:6px;height:6px;border-radius:2px}
  .mosaic-row{gap:2px}
  .mosaic{gap:2px}
  .polaroid{height:220px}
}

/* ---------- VIGNETTES PREMIUM (démos) ---------- */
.wm{position:relative;z-index:2;font-weight:700;font-size:30px;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.thumb-syn{background:radial-gradient(circle at 22% 18%,rgba(124,92,255,.6),transparent 55%),radial-gradient(circle at 82% 86%,rgba(34,211,238,.45),transparent 55%),#0a0a16}
.thumb-syn::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px}
.thumb-nex{background:radial-gradient(circle at 50% 125%,rgba(0,229,153,.45),transparent 60%),#04120d}
.thumb-nex .wm{color:#eafff6}
.thumb-aur{background:radial-gradient(circle at 26% 28%,#ec4899,transparent 48%),radial-gradient(circle at 78% 72%,#38bdf8,transparent 48%),radial-gradient(circle at 60% 45%,#8b5cf6,transparent 52%),#0a0813}
.thumb-vtx{background:#0a0a0a}
.thumb-vtx .wm b{color:#e5ff00;font-weight:700}
.thumb-vtx::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 20px,transparent 20px 40px)}

/* ---------- APERÇUS IFRAME (previews réelles des sites) ---------- */
.thumb-frame{padding:0;background:var(--tile)}
.thumb-frame iframe{position:absolute;top:0;left:0;width:294%;height:294%;border:0;transform:scale(.34);transform-origin:0 0;pointer-events:none;transition:transform .7s var(--e-out)}
.card:hover .thumb-frame iframe{transform:scale(.362)}

/* ---------- CURSEUR PERSONNALISÉ ---------- */
@media (pointer:fine){
  .cursorfx,.cursorfx a,.cursorfx button,.cursorfx .card,.cursorfx .tile,.cursorfx .chip,.cursorfx input{cursor:none}
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9998;mix-blend-mode:difference;will-change:transform}
  .cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff}
  .cur-ring{width:32px;height:32px;margin:-16px 0 0 -16px;border:1.5px solid #fff;transition:width .28s var(--e-out),height .28s var(--e-out),margin .28s var(--e-out),background .28s}
  .cur-ring.hot{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,255,255,.15)}
}

/* ---------- INTRO / OUVERTURE DU SITE ---------- */
.intro{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.intro.done{transform:translateY(-101%)}
.intro-word{font-size:clamp(30px,7vw,54px);font-weight:700;letter-spacing:-.03em;animation:introUp .7s var(--e-out) both}
.intro-bar{width:0;height:2px;background:var(--text);animation:introBar .9s .12s var(--e-out) forwards}
@keyframes introUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes introBar{to{width:180px}}
/* mouvement réduit : animations conservées (adoucies) à la demande explicite */

/* ---------- ICÔNES STACK : N&B par défaut, couleur de marque au survol ---------- */
.tile img{filter:grayscale(1);opacity:.6;transition:filter .4s var(--e-out),opacity .4s var(--e-out),transform .3s var(--e-spring)}
.tile:hover img{filter:grayscale(0);opacity:1;transform:scale(1.12)}

/* ---------- COUVERTURES PROJET : éditorial (léger désat.) → pleine couleur au survol ---------- */
.cover{transition:transform .7s var(--e-out)}

/* ============================================================
   TUNNEL DE VENTE — CTA, section réservation, barre sticky RDV
   ============================================================ */
/* Projet phare (carte mise en avant) */
.featured{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;margin-bottom:24px;padding:20px;border:1px solid var(--border);border-radius:30px;background:var(--card);transition:box-shadow .5s var(--e-out)}
.featured:hover{box-shadow:0 24px 54px rgba(0,0,0,.12)}
.featured .thumb{height:300px;border-radius:22px}
.feat-body{padding:6px 16px 6px 4px}
.feat-tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--text);background:var(--tile);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.feat-thumb{background-position:center 20%;filter:grayscale(0) contrast(1);transition:filter .55s var(--e-out),transform .7s var(--e-out)}
.featured:hover .feat-thumb{filter:grayscale(0) contrast(1)}
.featured h3{font-size:24px;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
.featured .desc{font-size:16px;line-height:1.6;color:var(--text2)}
.feat-cta{display:inline-block;margin-top:18px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;transition:text-underline-offset .25s var(--e-out)}
.featured:hover .feat-cta{text-underline-offset:7px}
@media(max-width:760px){
  .featured{grid-template-columns:1fr;gap:0;padding:16px}
  .featured .thumb{height:240px;margin-bottom:20px}
  .feat-body{padding:0 6px 8px}
}

/* Étude de cas projet (compétence + défi / approche / résultat) */
.competence{border:1px solid var(--border);border-radius:24px;background:var(--card);padding:28px 30px}
.competence-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);background:var(--tile);padding:7px 14px;border-radius:999px}
.competence-desc{color:var(--text2);font-size:16.5px;line-height:1.65;margin-top:16px}
.case{display:grid;gap:24px}
.case-block{border-left:2px solid var(--border);padding:2px 0 2px 22px}
.case-block h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:9px}
.case-block p{color:var(--text2);font-size:16.5px;line-height:1.65}

/* Boutons CTA réutilisables */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:var(--bg);border:1px solid var(--text);padding:14px 24px;border-radius:999px;font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .25s var(--e-spring),box-shadow .3s var(--e-out),opacity .2s}
.btn-cta span{font-size:18px;line-height:1;transition:transform .3s var(--e-spring)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-cta:hover span{transform:translateX(3px)}
.btn-cta:active{transform:scale(.96)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);border:1px solid var(--border);padding:14px 22px;border-radius:999px;font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;font-family:inherit;transition:background .25s,transform .25s var(--e-spring)}
.btn-ghost:hover{background:var(--tile);transform:translateY(-2px)}
.hero-note{margin-top:16px;color:var(--muted);font-size:14.5px}
.hero-note a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero .cta-row{animation:rise .75s .38s var(--e-out) both}
.hero .hero-note{animation:rise .75s .48s var(--e-out) both}
.hero-stats{margin-top:20px;color:var(--muted);font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hero-stats::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text);flex:0 0 auto}
.hero-stats span:not(:first-of-type)::before{content:'·';margin-right:9px;color:var(--muted)}
.hero-stats strong{color:var(--text);font-weight:700}
.hero .hero-stats{animation:rise .75s .52s var(--e-out) both}

/* Section réservation finale (conversion) */
.booking{border:1px solid var(--border);border-radius:30px;background:var(--card);padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.booking::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(127,127,127,.07),transparent 60%);pointer-events:none}
.booking h2{font-size:30px;letter-spacing:-.02em}
.booking .b-sub{color:var(--text2);font-size:17px;line-height:1.6;margin:16px auto 0;max-width:470px}
.booking .cta-row{justify-content:center;margin-top:32px}
.reassure{list-style:none;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.reassure li{color:var(--muted);font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.reassure li::before{content:'✓';color:var(--text);font-weight:700}

/* Barre sticky RDV (toutes pages) — injectée par JS */
.rdv-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(150%);z-index:250;display:flex;align-items:center;gap:14px;background:var(--text);color:var(--bg);padding:9px 12px 9px 22px;border-radius:999px;box-shadow:0 18px 44px rgba(0,0,0,.24);max-width:calc(100vw - 28px);transition:transform .5s var(--e-spring)}
.rdv-bar.show{transform:translateX(-50%) translateY(0)}
.rdv-bar-txt{font-weight:600;font-size:14.5px;white-space:nowrap}
.rdv-bar .btn-cta{background:var(--bg);color:var(--text);border-color:transparent;padding:10px 18px;font-size:14px}
.rdv-bar .btn-cta:hover{box-shadow:none;opacity:.82}
.rdv-bar-close{background:transparent;border:none;color:var(--bg);opacity:.55;font-size:19px;cursor:pointer;padding:0 6px 0 2px;line-height:1;font-family:inherit}
.rdv-bar-close:hover{opacity:1}
/* Évite le chevauchement avec le pop-up "animations" */
body.has-pop .rdv-bar{transform:translateX(-50%) translateY(150%)}

@media(max-width:600px){
  .booking{padding:44px 22px}
  .booking h2{font-size:24px}
  .hero .cta-row .btn-cta,.hero .cta-row .btn-ghost,.booking .cta-row .btn-cta{width:100%;justify-content:center}
  .rdv-bar-txt{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rdv-bar{transition-duration:.3s}
}

/* ============================================================
   CONVERSION — bénéfices, aimant à leads, FAQ, funnel de qualif
   ============================================================ */

/* Bénéfices : ce que le client obtient */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{border:1px solid var(--border);border-radius:24px;background:var(--card);padding:26px 24px;transition:box-shadow .5s var(--e-out),transform .4s var(--e-spring)}
.benefit:hover{box-shadow:0 18px 40px rgba(0,0,0,.10);transform:translateY(-3px)}
.benefit-ico{width:46px;height:46px;border-radius:14px;background:var(--tile);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.benefit-ico svg{width:23px;height:23px;color:var(--text)}
.benefit h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.benefit p{color:var(--text2);font-size:15px;line-height:1.6;margin-top:10px}

/* Aimant à leads (audit gratuit) */
.magnet{border:1px solid var(--border);border-radius:30px;background:var(--card);padding:40px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.magnet::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(127,127,127,.07),transparent 55%);pointer-events:none}
.magnet-eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.magnet h2{font-size:24px;letter-spacing:-.02em;margin-top:12px}
.magnet p{color:var(--text2);font-size:16px;line-height:1.6;margin-top:12px}
.magnet-form{display:flex;flex-direction:column;gap:12px;position:relative}
.magnet-field{display:flex;gap:10px;flex-wrap:wrap}
.field{flex:1;min-width:180px;height:50px;padding:0 18px;border-radius:14px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:15px;transition:border-color .25s}
.field::placeholder{color:var(--muted)}
.field:focus{outline:none;border-color:var(--text)}
.magnet-form .btn-cta{white-space:nowrap}
.magnet-note{color:var(--muted);font-size:13px}
.magnet-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.magnet-err{display:none;color:#c0392b;font-size:13.5px;font-weight:600;line-height:1.5}
[data-theme="dark"] .magnet-err{color:#ff7a7a}
.magnet-form .btn-cta:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.magnet-ok{display:none;color:var(--text);font-weight:600;font-size:15.5px;line-height:1.55}
.magnet.sent .magnet-form{display:none}
.magnet.sent .magnet-ok{display:block}

/* FAQ (objections) */
.faq-list{border:1px solid var(--border);border-radius:26px;background:var(--card);overflow:hidden}
.faq-item{border-top:1px solid var(--border)}
.faq-item:first-child{border-top:none}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:600;font-size:16.5px;transition:background .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--tile)}
.faq-ico{flex:0 0 auto;width:20px;height:20px;position:relative;transition:transform .35s var(--e-spring)}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;background:var(--text);border-radius:2px}
.faq-ico::before{top:9px;left:2px;width:16px;height:2px}
.faq-ico::after{top:2px;left:9px;width:2px;height:16px;transition:transform .35s var(--e-spring)}
.faq-item[open] .faq-ico{transform:rotate(180deg)}
.faq-item[open] .faq-ico::after{transform:scaleY(0)}
.faq-item p{color:var(--text2);font-size:15.5px;line-height:1.65;padding:0 28px 26px}

/* Funnel de qualification (CTA final) */
.qualify{border:1px solid var(--border);border-radius:30px;background:var(--card);padding:44px 40px;position:relative;overflow:hidden}
.qualify::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(127,127,127,.07),transparent 60%);pointer-events:none}
.qz-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;position:relative}
.qz-eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.qz-progress{display:flex;align-items:center;gap:12px}
.qz-bar{width:120px;height:5px;border-radius:999px;background:var(--tile);overflow:hidden}
.qz-bar-fill{display:block;height:100%;width:0;background:var(--text);border-radius:999px;transition:width .45s var(--e-out)}
.qz-count{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.qz-step{position:relative;animation:rise .5s var(--e-out) both}
.qz-step h2{font-size:24px;letter-spacing:-.02em}
.qz-hint{color:var(--muted);font-size:14.5px;margin-top:10px}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.qz-opt{text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-weight:600;font-size:15.5px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--e-spring)}
.qz-opt:hover{background:var(--tile);border-color:transparent;transform:translateY(-2px)}
.qz-opt:active{transform:scale(.97)}
.qz-back{background:none;border:none;color:var(--muted);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;margin-bottom:16px;padding:4px 0;transition:color .2s}
.qz-back:hover{color:var(--text)}
.qz-final-title{font-size:24px;letter-spacing:-.02em}
.qz-final-sub{color:var(--text2);font-size:16px;line-height:1.6;margin-top:12px;max-width:460px}
.qz-recap{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.qz-recap li{display:flex;flex-direction:column;gap:3px;background:var(--tile);border-radius:12px;padding:10px 16px}
.qz-recap span{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.qz-recap strong{font-size:14.5px;font-weight:600}
.qualify .cta-row{margin-top:26px}
.qualify .reassure{justify-content:flex-start;margin-top:22px}

@media(max-width:600px){
  .benefits{grid-template-columns:1fr}
  .magnet{grid-template-columns:1fr;padding:28px 22px;gap:22px}
  .qualify{padding:32px 22px}
  .qz-opts{grid-template-columns:1fr}
  .qz-head{flex-direction:column;align-items:flex-start;gap:14px}
  .faq-item summary{padding:20px}
  .faq-item p{padding:0 20px 22px}
}

/* Blog — CTA de conversion + sources en fin d'article */
.article-cta{margin:56px 0 8px;border:1px solid var(--border);border-radius:26px;background:var(--card);padding:34px 32px;position:relative;overflow:hidden}
.article-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(127,127,127,.08),transparent 55%);pointer-events:none}
.article-cta h3{position:relative;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0}
.article-cta p{position:relative;color:var(--text2);font-size:15.5px;line-height:1.6;margin:12px 0 22px;max-width:520px}
.article-cta .btn-cta{position:relative}
.article-sources{margin-top:48px;padding-top:22px;border-top:1px solid var(--border)}
.article-sources h2{font-size:14px;margin:0 0 12px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.article-sources ol{margin:0;padding-left:20px}
.article-sources li{color:var(--muted);font-size:13.5px;line-height:1.6;padding:3px 0}
.article-sources a{text-decoration:underline;text-underline-offset:3px;word-break:break-word;transition:color .2s}
.article-sources a:hover{color:var(--text)}
@media(max-width:600px){
  .article-cta{padding:26px 22px}
}