/* ============================================================ portfolio-v2.css, Design system refonte (navy + émeraude) Chargé uniquement pour le template "horizon" (accueil public). Autonome : ne dépend pas de style.css. ============================================================ */ /* @import de Google Fonts RETIRE le 20/08/2026. Un @import place dans une feuille bloquante est lui-meme bloquant ET serialise : le navigateur devait telecharger ce CSS, y decouvrir l'import, puis aller chercher les polices. PageSpeed mesurait 560 ms de blocage du rendu, alors que le chargeait deja ses polices de facon non bloquante. Il chargeait aussi Fraunces et Lora sur TOUTES les pages, alors qu'elles ne servent qu'aux pages articles/blog (.art-*, .blog-hero). Les polices sont desormais declarees dans portfolio/partials/pv2-head.php et portfolio/index.php, en non bloquant et selon le type de page. */ :root{ /* Palette alignée sur le logo Richard Technologies : charbon + bronze doré */ --navy:#1c1c1e;--navy-2:#2c2c30;--acc:#c8924a;--acc-2:#a06a28; --ink:#1c1c1e;--muted:#6b6b72;--bg:#ffffff;--soft:#f7f4ef; --line:#ece7df;--radius:14px;--maxw:1180px; --body:"Roboto",sans-serif;--mono:"Roboto Mono",monospace; --art-display:"Fraunces",Georgia,serif;--art-body:"Lora",Georgia,serif; --shadow:0 16px 44px -22px rgba(28,28,30,.28); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body.pv2{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} .pv2 a{color:inherit;text-decoration:none} .pv2 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .pv2 .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .pv2 .tag-num{color:var(--acc)} .pv2 h1,.pv2 h2,.pv2 h3,.pv2 h4{font-weight:900;letter-spacing:-.02em;color:var(--navy);line-height:1.14} .pv2 svg.ic{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .pv2 .skip-link{position:absolute;left:-9999px} .pv2 .skip-link:focus{left:1rem;top:1rem;z-index:200;background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:8px} /* HEADER */ .pv2 header{position:fixed;inset:0 0 auto;z-index:100;transition:.3s} .pv2 header.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .pv2 .nav{display:flex;align-items:center;justify-content:space-between;height:64px;position:relative;gap:1.2rem} /* --- Cluster droit : WhatsApp + téléphone + CTA --- */ .pv2 .nav-right{display:flex;align-items:center;gap:.9rem} .pv2 .nav-ico{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--navy);transition:.2s} .pv2 .nav-ico:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)} .pv2 .nav-ico.wa:hover{border-color:#25d366;color:#25d366} .pv2 .nav-phone{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem;color:var(--navy);white-space:nowrap} .pv2 .nav-phone .ph-ic{width:38px;height:38px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--acc-2)} /* --- Nav + chevron --- */ .pv2 .has-mega>a .chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.35rem;transition:.25s} .pv2 .has-mega:hover>a .chev{transform:rotate(-135deg) translateY(0)} /* --- MEGA MENU --- */ .pv2 .mega{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s cubic-bezier(.16,1,.3,1);z-index:120;overflow:hidden} .pv2 .has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)} .pv2 .mega-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:1.6rem} .pv2 .mega-col{padding:0 1.4rem;border-right:1px solid var(--line)} .pv2 .mega-col:last-child{border-right:none} .pv2 .mega-col-head{display:flex;align-items:center;gap:.6rem;font-weight:900;color:var(--navy);font-size:1rem;margin-bottom:1rem;letter-spacing:-.01em} .pv2 .mega-col-head .mic{width:34px;height:34px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--acc-2)} .pv2 .mega-col-head .mic svg{width:18px;height:18px} .pv2 .mega-col a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;color:var(--muted);font-size:.9rem;font-weight:500;transition:.18s} .pv2 .mega-col a svg{width:17px;height:17px;color:var(--acc-2);flex-shrink:0} .pv2 .mega-col a:hover{background:var(--soft);color:var(--navy);transform:translateX(3px)} .pv2 .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.6rem;background:var(--soft);border-top:1px solid var(--line)} .pv2 .mega-foot .mega-all{font-weight:700;font-size:.9rem;color:var(--navy)} .pv2 .mega-foot .mega-all:hover{color:var(--acc-2)} @media(max-width:992px){.pv2 .nav-phone{display:none}} @media(max-width:768px){.pv2 .mega{display:none!important}} @media(max-width:600px){.pv2 .nav-right .btn{display:none}.pv2 .nav-right{gap:.5rem}} .pv2 .logo{font-weight:900;font-size:1.18rem;display:flex;align-items:center;gap:.5rem;color:var(--navy)} .pv2 .logo img{height:34px;width:auto;display:block} .pv2 .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--acc)} .pv2 .nav-links{display:flex;gap:1.8rem;align-items:center} .pv2 .nav-links a{font-size:.9rem;color:var(--muted);font-weight:500;transition:.2s;position:relative} .pv2 .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--acc);transition:.25s} .pv2 .nav-links a:not(.btn):hover{color:var(--navy)} .pv2 .nav-links a:not(.btn):hover::after{width:100%} .pv2 .btn{font-family:var(--body);font-weight:700;font-size:.88rem;padding:.72rem 1.35rem;border-radius:8px;background:var(--navy);color:#fff;border:1px solid var(--navy);cursor:pointer;transition:.22s cubic-bezier(.2,.7,.2,1);display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap} .pv2 .btn:hover{background:var(--acc);border-color:var(--acc);color:#1c1c1e;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(200,146,74,.55)} .pv2 .btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}.pv2 .btn-ghost:hover{border-color:var(--acc);color:var(--acc-2);background:var(--soft);transform:translateY(-2px);box-shadow:none} /* Bouton sur fond foncé (bande CTA) : bronze sur charbon */ .pv2 .cta-inner .btn{background:var(--acc);border-color:var(--acc);color:#1c1c1e} .pv2 .cta-inner .btn:hover{background:#fff;border-color:#fff;color:var(--navy)} .pv2 .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer} .pv2 .burger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.25s} .pv2 .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .pv2 .burger.open span:nth-child(2){opacity:0} .pv2 .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* --- Menu mobile --- */ .pv2 .m-menu{display:none} .pv2 .m-link{display:block;padding:.9rem .3rem;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line);font-size:1.05rem;transition:.15s} .pv2 .m-link:hover{color:var(--acc-2);padding-left:.6rem} .pv2 .m-contact{padding:1rem 0 .2rem;display:flex;flex-direction:column;gap:.7rem} .pv2 .m-contact-line{display:flex;align-items:center;gap:.7rem;color:var(--navy);font-weight:600;font-size:.95rem} .pv2 .m-contact-line .mci{width:38px;height:38px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--acc-2);flex-shrink:0} .pv2 .m-contact-line .mci svg{width:18px;height:18px} .pv2 .m-cta{display:flex;justify-content:center;width:100%;margin-top:.8rem;padding:.95rem} .pv2 .m-note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:.7rem} @media(max-width:900px){ .pv2 .m-menu{display:block;position:fixed;top:64px;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow);padding:1rem 1.3rem 1.6rem;transform:translateY(-14px);opacity:0;visibility:hidden;transition:.26s cubic-bezier(.16,1,.3,1);max-height:calc(100vh - 64px);overflow-y:auto;z-index:130} .pv2 .m-menu.open{transform:none;opacity:1;visibility:visible} } /* HERO */ .pv2 .hero{padding:118px 0 72px;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .pv2 .hero-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:3rem;align-items:center} .pv2 .eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;border:1px solid var(--line);border-radius:6px;padding:.4rem .85rem;background:var(--soft)} .pv2 .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(200,146,74,.5);animation:ring 2s infinite} @keyframes ring{0%{box-shadow:0 0 0 0 rgba(200,146,74,.5)}70%{box-shadow:0 0 0 8px rgba(200,146,74,0)}100%{box-shadow:0 0 0 0 rgba(200,146,74,0)}} .pv2 .hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);margin-bottom:1.2rem} .pv2 .hero h1 .hl{color:var(--navy);box-shadow:inset 0 -.3em 0 rgba(200,146,74,.28)} .pv2 .rotator{color:var(--acc-2)} .pv2 .lead{font-size:1.1rem;color:var(--muted);max-width:520px;margin-bottom:2rem} .pv2 .lead b{color:var(--ink);font-weight:700} .pv2 .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.2rem} .pv2 .stats{display:flex;gap:2.2rem;flex-wrap:wrap} .pv2 .stat .n{font-weight:900;font-size:1.9rem;color:var(--navy)} .pv2 .stat .n span{color:var(--acc-2)} .pv2 .stat .l{font-size:.8rem;color:var(--muted)} .pv2 .hero-bento{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .pv2 .hb{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:#fff;transition:.3s} .pv2 .hb:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pv2 .hb.card-id{grid-column:1/3;display:flex;align-items:center;gap:1rem;background:var(--navy);color:#fff;border-color:var(--navy)} .pv2 .hb.card-id .av{width:50px;height:50px;border-radius:10px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;flex-shrink:0;overflow:hidden} .pv2 .hb.card-id .av img{width:100%;height:100%;object-fit:cover} .pv2 .hb.card-id b{font-size:1rem;display:block} .pv2 .hb.card-id small{color:#aebbd8;font-size:.8rem} .pv2 .hb .k{font-weight:900;font-size:1.7rem;color:var(--navy)} .pv2 .hb .kv{font-size:.78rem;color:var(--muted);margin-top:.15rem} /* Contraste WCAG AA : #fff sur --acc (#c8924a) = 2,7:1 (echec). Sur --acc-2 (#a06a28) = 4,6:1 (conforme AA). La hierarchie visuelle reste assuree par la taille/graisse (.k 1.7rem/900 vs .kv .78rem). */ .pv2 .hb.acc{background:var(--acc-2);border-color:var(--acc-2)} .pv2 .hb.acc .k{color:#fff}.pv2 .hb.acc .kv{color:#fff} .pv2 .float{animation:float 5s ease-in-out infinite} .pv2 .float.d{animation-delay:1.2s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .pv2 .up{opacity:0;transform:translateY(26px);animation:up .9s cubic-bezier(.16,1,.3,1) forwards} @keyframes up{to{opacity:1;transform:none}} .pv2 .d1{animation-delay:.05s}.pv2 .d2{animation-delay:.15s}.pv2 .d3{animation-delay:.25s}.pv2 .d4{animation-delay:.35s}.pv2 .d5{animation-delay:.45s} /* Garde-fou LCP : rien au-dessus de la ligne de flottaison ne demarre a opacity:0. Un element LCP transparent n'est pas considere comme peint -> LCP retarde de ~3,3 s. */ .pv2 .hero .up{opacity:1;transform:none;animation:none} /* MARQUEE */ .pv2 .marquee{padding:.85rem 0;overflow:hidden;white-space:nowrap;background:var(--navy)} .pv2 .marquee-track{display:inline-flex;flex-wrap:nowrap;min-width:max-content;animation:pv2scroll 32s linear infinite;font-family:var(--mono);font-size:.82rem;color:#aebbd8;will-change:transform} @keyframes pv2scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SECTION */ .pv2 .sect{padding:76px 0} .pv2 .sect.soft{background:var(--soft)} .pv2 .sect-head{margin-bottom:2.6rem;max-width:640px} .pv2 .sect-head .mono{margin-bottom:.8rem;display:inline-block;position:relative;padding-left:30px} .pv2 .sect-head .mono::before{content:"";position:absolute;left:0;top:50%;width:22px;height:2px;background:var(--acc)} .pv2 .sect-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem} .pv2 .sect-head p{color:var(--muted);font-size:1rem} /* SERVICES BENTO */ .pv2 .bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:1rem} .pv2 .svc{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:#fff;display:flex;flex-direction:column;transition:.25s;cursor:pointer;position:relative;overflow:hidden;grid-column:span 4} .pv2 .svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .svc .ico{width:44px;height:44px;border-radius:11px;background:var(--soft);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;transition:.25s} .pv2 .svc:hover .ico{background:var(--acc);color:#fff} .pv2 .svc h3{font-size:1.1rem;margin-bottom:.4rem} .pv2 .svc p{font-size:.88rem;color:var(--muted);flex:1} .pv2 .svc .arrow{margin-top:.8rem;color:var(--acc-2);font-weight:700;font-size:.85rem;opacity:0;transform:translateX(-6px);transition:.25s} .pv2 .svc:hover .arrow{opacity:1;transform:none} .pv2 .svc.featured{grid-column:span 4;grid-row:span 2;background:var(--navy);border-color:var(--navy)} .pv2 .svc.featured h3{color:#fff}.pv2 .svc.featured p{color:#aebbd8} .pv2 .svc.featured .ico{background:rgba(255,255,255,.1);color:#fff} .pv2 .svc.featured:hover{border-color:var(--acc)}.pv2 .svc.featured:hover .ico{background:var(--acc)} .pv2 .svc.featured .big{margin-top:auto;font-weight:900;font-size:2.4rem;color:var(--acc);line-height:1} .pv2 .svc.featured .big small{display:block;font-size:.8rem;color:#aebbd8;font-weight:400;margin-top:.3rem} /* Carte featured garnie : prestations + prix + CTA */ .pv2 .svc.featured p{flex:0 0 auto} .pv2 .svc-feats{list-style:none;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.6rem} .pv2 .svc-feats li{position:relative;padding-left:1.5rem;font-size:.86rem;color:#d4d8e2} .pv2 .svc-feats li::before{content:"";position:absolute;left:2px;top:.3em;width:8px;height:8px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)} .pv2 .svc-foot{margin-top:auto;padding-top:1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .pv2 .svc-price{font-weight:900;font-size:1.15rem;color:var(--acc)} .pv2 .svc-cta{background:var(--acc);color:#1c1c1e;font-weight:700;font-size:.82rem;padding:.55rem 1.05rem;border-radius:8px;transition:.2s} .pv2 .svc-cta:hover{background:#fff;color:var(--navy)} .pv2 .svc-price-sm{margin-top:.7rem;font-weight:700;font-size:.85rem;color:var(--acc-2)} /* Pages services (index + détail) */ .pv2 .crumb{padding:88px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted)} .pv2 .crumb a{color:var(--muted)}.pv2 .crumb a:hover{color:var(--acc-2)} .pv2 .crumb .sep{margin:0 .5rem;color:var(--line)} .pv2 .svc-hero{padding:1.4rem 0 52px;border-bottom:1px solid var(--line)} .pv2 .svc-hero .badge{display:inline-flex;width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--navy);align-items:center;justify-content:center;margin-bottom:1rem} .pv2 .svc-hero h1{font-size:clamp(1.9rem,4vw,3rem);margin:.2rem 0 1rem} .pv2 .svc-hero p{font-size:1.1rem;color:var(--muted);max-width:660px;margin-bottom:1.6rem} .pv2 a.svc{cursor:pointer} .pv2 .inc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .pv2 .inc-list li{position:relative;padding-left:1.8rem;color:var(--ink);font-size:.95rem} .pv2 .inc-list li::before{content:"";position:absolute;left:3px;top:.35em;width:9px;height:9px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)} @media(max-width:600px){.pv2 .inc-list{grid-template-columns:1fr}} /* Contenu rédactionnel (À propos, articles) */ .pv2 .prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2rem 0 .8rem;color:var(--navy)} .pv2 .prose p{color:var(--ink);font-size:1.02rem;line-height:1.78;margin-bottom:1rem} .pv2 .prose strong{color:var(--navy);font-weight:700} .pv2 .prose .inc-list{margin:1.1rem 0 1.6rem} /* --- Page article de blog --- */ .pv2 .art-head{max-width:780px;margin:0 auto;padding-top:1.2rem;text-align:center} .pv2 .art-cat{display:inline-block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acc-2);border:1px solid var(--line);border-radius:6px;padding:.3rem .8rem;margin-bottom:1rem} .pv2 .art-head h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.15;margin-bottom:1rem} .pv2 .art-meta{color:var(--muted);font-size:.9rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;align-items:center} .pv2 .art-meta .d{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5} .pv2 .art-cover{max-width:1000px;margin:2rem auto 0;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--soft)} .pv2 .art-cover img{width:100%;height:100%;object-fit:cover} .pv2 .art-body{max-width:780px;margin:0 auto;padding:2.5rem 26px 1rem} .pv2 .art-prose{font-size:1.08rem;line-height:1.85;color:var(--ink)} .pv2 .art-prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem);color:var(--navy);margin:2rem 0 .8rem;font-weight:900;letter-spacing:-.01em} .pv2 .art-prose h3{font-size:1.25rem;color:var(--navy);margin:1.6rem 0 .6rem;font-weight:700} .pv2 .art-prose p{margin-bottom:1.1rem} .pv2 .art-prose ul,.pv2 .art-prose ol{margin:0 0 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.5rem} .pv2 .art-prose a{color:var(--acc-2);font-weight:600;text-decoration:underline} .pv2 .art-prose strong{color:var(--navy)} .pv2 .art-prose img{max-width:100%;border-radius:12px;margin:1.5rem 0} .pv2 .art-prose blockquote{border-left:4px solid var(--acc);background:var(--soft);padding:1rem 1.3rem;border-radius:0 10px 10px 0;margin:1.5rem 0;color:var(--navy);font-style:italic} .pv2 .art-prose pre{background:var(--navy);color:#e8eaf0;padding:1.1rem;border-radius:10px;overflow:auto;font-size:.9rem;margin:1.5rem 0} /* ===== Design éditorial des articles (Fraunces + Lora) ===== */ .pv2 .art-cat{font-family:var(--mono)} .pv2 .art-head h1{font-family:var(--art-display);font-weight:600;letter-spacing:-.01em;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08} .pv2 .art-meta{font-family:var(--body)} .pv2 .art-prose{font-family:var(--art-body);font-size:1.16rem;line-height:1.85;color:#28282d} .pv2 .art-prose h2{font-family:var(--art-display);font-weight:600;color:var(--navy);font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;margin:2.6rem 0 .9rem;letter-spacing:-.01em} .pv2 .art-prose h3{font-family:var(--art-display);font-weight:600;color:var(--navy);font-size:1.4rem;margin:1.9rem 0 .6rem} .pv2 .art-prose h2::after{content:"";display:block;width:46px;height:3px;background:var(--acc);border-radius:3px;margin-top:.7rem} .pv2 .art-prose p{margin-bottom:1.25rem} /* Lettrine sur le 1er paragraphe */ .pv2 .art-prose > p:first-of-type::first-letter{font-family:var(--art-display);font-weight:700;font-size:3.6rem;line-height:.8;float:left;margin:.35rem .7rem 0 0;color:var(--acc-2)} /* Liens animés */ .pv2 .art-prose a{color:var(--acc-2);text-decoration:none;background-image:linear-gradient(var(--acc),var(--acc));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s;padding-bottom:1px} .pv2 .art-prose a:hover{background-size:100% 2px} /* Listes raffinées */ .pv2 .art-prose ul{list-style:none;margin:1.2rem 0 1.6rem;padding:0} .pv2 .art-prose ul li{position:relative;padding-left:1.8rem;margin-bottom:.7rem} .pv2 .art-prose ul li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)} .pv2 .art-prose ol{margin:1.2rem 0 1.6rem 1.3rem}.pv2 .art-prose ol li{margin-bottom:.7rem;padding-left:.3rem} /* Citation magazine */ .pv2 .art-prose blockquote{position:relative;border:none;background:var(--soft);border-left:4px solid var(--acc);border-radius:0 14px 14px 0;padding:1.6rem 1.6rem 1.6rem 3.4rem;margin:2rem 0;font-family:var(--art-display);font-style:italic;font-size:1.2rem;color:var(--navy)} .pv2 .art-prose blockquote::before{content:"\201C";position:absolute;left:1rem;top:.4rem;font-family:var(--art-display);font-size:3.2rem;color:var(--acc);line-height:1} .pv2 .art-prose blockquote p{margin:0} /* Images + légende */ .pv2 .art-prose img{border-radius:14px;box-shadow:var(--shadow);margin:1.8rem 0} .pv2 .art-prose hr{border:none;height:1px;background:var(--line);margin:2.4rem 0} .pv2 .art-prose strong{color:var(--navy);font-weight:600} /* Le titre du blog (index) en éditorial aussi */ .pv2 .blog-hero h1{font-family:var(--art-display);font-weight:600;letter-spacing:-.01em} /* Tableaux, figures, encadrés dans les articles */ .pv2 .art-prose table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-family:var(--body);font-size:.95rem;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)} .pv2 .art-prose th,.pv2 .art-prose td{border:1px solid var(--line);padding:.75rem .95rem;text-align:left;vertical-align:top} .pv2 .art-prose thead th{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)} .pv2 .art-prose tbody tr:nth-child(even){background:var(--soft)} .pv2 .art-prose figure{margin:1.9rem auto;max-width:640px;text-align:center} .pv2 .art-prose figure img{margin:0;width:100%} .pv2 .art-prose figcaption{font-family:var(--body);font-size:.84rem;color:var(--muted);font-style:italic;margin-top:.55rem} .pv2 .art-prose .art-callout{font-family:var(--body);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;margin:1.7rem 0;font-size:1rem;line-height:1.7} .pv2 .art-prose .art-callout b{color:var(--navy)} .pv2 .art-prose .art-callout ul{margin:.6rem 0 0} @media(max-width:600px){.pv2 .art-prose table{display:block;overflow-x:auto;white-space:nowrap}} @media(max-width:600px){.pv2 .art-prose{font-size:1.08rem}.pv2 .art-prose > p:first-of-type::first-letter{font-size:3rem}} .pv2 .art-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0} .pv2 .art-tags span{background:var(--soft);border:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:.3rem .7rem;border-radius:100px} .pv2 .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .pv2 .rel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column} .pv2 .rel:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .rel-thumb{aspect-ratio:16/9;background:var(--soft);overflow:hidden} .pv2 .rel-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s} .pv2 .rel:hover .rel-thumb img{transform:scale(1.04)} .pv2 .rel-body{padding:1.1rem} .pv2 .rel-body .rc{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;color:var(--acc-2);letter-spacing:.08em} .pv2 .rel-body h3{font-size:1rem;color:var(--navy);margin:.4rem 0} @media(max-width:780px){.pv2 .rel-grid{grid-template-columns:1fr}} /* Accueil : cartes blog horizontales */ .pv2 .hblog-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .pv2 .hblog{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;transition:.25s} .pv2 .hblog:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .hblog .ht{width:112px;height:80px;border-radius:10px;object-fit:cover;background:var(--soft);flex-shrink:0} .pv2 .hblog .hb{min-width:0} .pv2 .hblog .hc{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--acc-2)} .pv2 .hblog h3{font-size:.98rem;color:var(--navy);margin:.25rem 0;line-height:1.3} .pv2 .hblog small{color:var(--muted);font-size:.78rem} @media(max-width:780px){.pv2 .hblog-grid{grid-template-columns:1fr}} @media(max-width:420px){.pv2 .hblog{flex-direction:column;align-items:stretch}.pv2 .hblog .ht{width:100%;height:150px}} /* --- Blog : index + sidebar + partage --- */ .pv2 .blog-hero{text-align:center;padding:100px 0 10px} .pv2 .blog-hero h1{font-size:clamp(2rem,4vw,3rem)} .pv2 .blog-hero p{color:var(--muted);max-width:560px;margin:.8rem auto 0} .pv2 .blog-layout,.pv2 .art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:3rem;max-width:1160px;margin:0 auto;padding:2.5rem 26px 1rem} .pv2 .blog-main{min-width:0} .pv2 .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem} .pv2 .bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s} .pv2 .bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .bcard-thumb{aspect-ratio:16/9;background:var(--soft);overflow:hidden;position:relative} .pv2 .bcard-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s} .pv2 .bcard:hover .bcard-thumb img{transform:scale(1.04)} .pv2 .bcard-cat{position:absolute;top:.7rem;left:.7rem;background:var(--acc);color:#1c1c1e;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .6rem;border-radius:5px;font-weight:700} .pv2 .bcard-body{padding:1.2rem;display:flex;flex-direction:column;flex:1} .pv2 .bcard-body h3{font-size:1.05rem;color:var(--navy);margin-bottom:.5rem;line-height:1.3} .pv2 .bcard-body p{font-size:.88rem;color:var(--muted);flex:1} .pv2 .bcard-meta{margin-top:.9rem;font-size:.78rem;color:var(--muted)} .pv2 .pagination{display:flex;gap:.5rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap} .pv2 .pagination a,.pv2 .pagination span{min-width:40px;height:40px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:600;font-size:.9rem;padding:0 .6rem} .pv2 .pagination a:hover{border-color:var(--acc);color:var(--acc-2)} .pv2 .pagination .cur{background:var(--navy);color:#fff;border-color:var(--navy)} .pv2 .blog-side{display:flex;flex-direction:column;gap:1.3rem} .pv2 .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem} .pv2 .side-author{text-align:center} .pv2 .side-author img,.pv2 .side-author .ava{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto .8rem} .pv2 .side-author .ava{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--acc);font-weight:900;font-size:1.6rem} .pv2 .side-author b{color:var(--navy);font-size:1.05rem;display:block} .pv2 .side-author small{color:var(--acc-2);font-size:.82rem;display:block;margin-bottom:.6rem} .pv2 .side-author p{color:var(--muted);font-size:.86rem;margin-bottom:1rem} .pv2 .side-card h4{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc-2);margin-bottom:1rem} .pv2 .side-recent a{display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line);align-items:center} .pv2 .side-recent a:last-child{border-bottom:none} .pv2 .side-recent .st{width:56px;height:46px;border-radius:8px;object-fit:cover;background:var(--soft);flex-shrink:0} .pv2 .side-recent b{font-size:.84rem;color:var(--navy);font-weight:600;line-height:1.3} .pv2 .side-recent small{font-size:.74rem;color:var(--muted)} .pv2 .side-cats a{display:flex;justify-content:space-between;padding:.45rem 0;color:var(--muted);font-size:.9rem;border-bottom:1px solid var(--line)} .pv2 .side-cats a:last-child{border-bottom:none} .pv2 .side-cats a:hover{color:var(--acc-2)} .pv2 .side-cats .cnt{background:var(--soft);border-radius:100px;padding:.05rem .55rem;font-size:.75rem} .pv2 .art-share{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:1.8rem} .pv2 .art-share b{width:100%;font-size:.85rem;color:var(--navy);margin-bottom:.3rem} .pv2 .art-share a,.pv2 .art-share button{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:8px;color:#fff;font-size:.82rem;font-weight:700;border:none;cursor:pointer;transition:.2s} .pv2 .art-share a:hover,.pv2 .art-share button:hover{transform:translateY(-2px);opacity:.93} .pv2 .art-share svg{width:16px;height:16px;stroke:currentColor} .pv2 .s-li{background:#0a66c2}.pv2 .s-fb{background:#1877f2}.pv2 .s-x{background:#111}.pv2 .s-wa{background:#25d366} .pv2 .art-share .s-copy{background:var(--soft);color:var(--navy);border:1px solid var(--line)} .pv2 .art-share .s-copy svg{stroke:var(--navy)} .pv2 .art-share .s-copy:hover{background:#fff;border-color:var(--acc);color:var(--acc-2)} .pv2 .art-layout .blog-side{position:sticky;top:84px;align-self:start} @media(max-width:900px){.pv2 .blog-layout,.pv2 .art-layout{grid-template-columns:1fr}.pv2 .blog-side{position:static;flex-direction:row;flex-wrap:wrap}.pv2 .blog-side .side-card{flex:1;min-width:240px}} @media(max-width:600px){.pv2 .blog-grid{grid-template-columns:1fr}.pv2 .blog-side{flex-direction:column}} /* Recherche blog */ .pv2 .blog-search{max-width:520px;margin:1.4rem auto 0;position:relative} .pv2 .blog-search input{width:100%;padding:.85rem 1rem .85rem 2.7rem;border:1px solid var(--line);border-radius:100px;font-size:.95rem;font-family:var(--body);background:#fff;color:var(--ink)} .pv2 .blog-search input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(200,146,74,.12)} .pv2 .blog-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);stroke:currentColor;fill:none;stroke-width:2} .pv2 .blog-empty{color:var(--muted);padding:1.5rem 0;display:none} /* À propos : hero 2 colonnes (style Ben) */ .pv2 .about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:1.5rem 0 40px} .pv2 .about-hero h1{font-size:clamp(2rem,4.5vw,3.3rem);line-height:1.12;margin:1rem 0} .pv2 .about-hero .lead{font-size:1.1rem;color:var(--muted);margin-bottom:1.6rem;max-width:none} .pv2 .about-photo{position:relative} .pv2 .about-photo img{width:100%;border-radius:20px;object-fit:cover;aspect-ratio:4/5;background:var(--soft);display:block} .pv2 .about-gbadge{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:.55rem .85rem;display:flex;align-items:center;gap:.45rem;box-shadow:var(--shadow);font-weight:700;font-size:.88rem;color:var(--navy)} .pv2 .about-gbadge .st{color:var(--acc)} @media(max-width:820px){.pv2 .about-hero{grid-template-columns:1fr;padding-top:96px}.pv2 .about-photo{order:-1;max-width:340px}} /* PORTFOLIO */ .pv2 .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .pv2 .pf{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;transition:.25s;display:flex;flex-direction:column} .pv2 .pf:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .pf-thumb{aspect-ratio:16/10;background:var(--soft);overflow:hidden;position:relative} .pv2 .pf-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s} .pv2 .pf:hover .pf-thumb img{transform:scale(1.04)} .pv2 .pf-tag{position:absolute;top:.7rem;left:.7rem;font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;background:#fff;color:var(--navy);padding:.25rem .6rem;border-radius:6px;border:1px solid var(--line)} .pv2 .pf-body{padding:1.3rem;display:flex;flex-direction:column;flex:1} .pv2 .pf-body h3{font-size:1.05rem;margin-bottom:.4rem} .pv2 .pf-body p{font-size:.85rem;color:var(--muted);flex:1} .pv2 .pf-body .res{margin-top:.8rem;color:var(--acc-2);font-weight:700;font-size:.82rem} .pv2 .pf.soon{align-items:center;justify-content:center;text-align:center;padding:2.2rem;border-style:dashed;background:var(--soft);color:var(--muted)} .pv2 .pf.soon .ico{margin:0 auto .7rem;color:var(--acc-2)} .pv2 .pf.soon b{color:var(--navy);display:block;font-size:1rem;margin-bottom:.3rem} /* PROCESS */ /* Etapes: rangees editoriales. Refait le 23/08/2026. Trois defauts se cumulaient. La grille etait figee a repeat(4,1fr) alors que 26 des 37 sections du registre comptent cinq etapes: la cinquieme restait seule sur une deuxieme ligne. Quatre colonnes reduisaient la mesure du texte a quatre mots par ligne. Et .step figurait dans la regle de cartes partagee, plus bas dans la feuille, qui reimposait un fond opaque par-dessus toute tentative de correction. La carte n'apportait rien ici: le bloc n'est pas cliquable et n'a pas d'etat. Les etapes deviennent des rangees separees par un filet, avec un numero en contour bronze. Le nombre d'etapes n'a plus d'incidence. Le placement passe par grid-column/grid-row: le balisage plat existant (numero, titre et texte en freres) convient sans modification. */ .pv2 .proc{display:flex;flex-direction:column;gap:0} .pv2 .step{display:grid;grid-template-columns:56px minmax(0,720px); column-gap:1.5rem;align-items:start; padding:1.75rem 0;background:transparent;border:0;border-radius:0; border-top:1px solid var(--line);box-shadow:none;transition:none} .pv2 .step:first-child{border-top:0;padding-top:.35rem} .pv2 .step:last-child{padding-bottom:0} .pv2 .step:hover{transform:none;box-shadow:none} /* Contour bronze plutot qu'une pastille pleine: le numero situe la position dans la suite sans capter l'attention avant le titre. */ .pv2 .step .sn{grid-column:1;grid-row:1 / span 2; display:flex;align-items:center;justify-content:center; width:52px;height:52px;border-radius:14px;margin:0;flex:none; background:transparent;border:1.5px solid var(--acc-2);color:var(--acc-2); font-weight:900;font-size:1rem;letter-spacing:.01em} .pv2 .step h3,.pv2 .step h4{grid-column:2;grid-row:1;margin:0; padding-top:.62rem;font-size:1.16rem;line-height:1.34} .pv2 .step p{grid-column:2;grid-row:2;margin:.5rem 0 0; font-size:.95rem;line-height:1.74;color:var(--muted)} /* WHY */ .pv2 .why-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem} .pv2 .why{padding:1.5rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transition:.25s;grid-column:span 4} .pv2 .why:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)} .pv2 .why.wide{grid-column:span 6} .pv2 .why .ico{width:42px;height:42px;border-radius:10px;background:rgba(200,146,74,.12);color:var(--acc-2);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem} .pv2 .why h3{font-size:1rem;margin-bottom:.4rem} .pv2 .why p{font-size:.88rem;color:var(--muted)} /* TESTIMONIALS, cartes garnies */ .pv2 .greviews{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.8rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1.2rem;box-shadow:var(--shadow);transition:.2s} .pv2 .greviews:hover{border-color:var(--acc);transform:translateY(-2px)} .pv2 .greviews .gicon{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);color:#4285F4;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pv2 .greviews .gtxt b{color:var(--navy);font-size:.92rem;display:block;line-height:1.1} .pv2 .greviews .gstars{color:var(--acc);font-size:.9rem;letter-spacing:1px} .pv2 .greviews .gbtn{margin-left:.4rem;font-weight:700;font-size:.85rem;color:var(--acc-2)} .pv2 .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .pv2 .tst{padding:1.8rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transition:.25s;display:flex;flex-direction:column;position:relative} .pv2 .tst:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pv2 .tst.feat{grid-column:span 2;background:var(--navy);border-color:var(--navy)} .pv2 .tst.feat .q,.pv2 .tst.feat .who b{color:#fff} .pv2 .tst.feat .who small{color:#aebbd8} .pv2 .tst .quote{font-family:var(--mono);font-size:2.4rem;color:var(--acc);line-height:.6;margin-bottom:.6rem} .pv2 .tst{position:relative} .pv2 .tst .stars{color:var(--acc);margin-bottom:.7rem;font-size:.9rem;letter-spacing:2px;display:inline-flex;align-items:center} .pv2 .tst-g{position:absolute;top:1.3rem;right:1.3rem;line-height:0} .pv2 .tst.feat .tst-g{top:1.6rem;right:1.6rem} .pv2 .tst-verified{display:inline-flex;align-items:center;margin-left:.45rem;line-height:0} .pv2 .tst .q{font-size:.95rem;margin-bottom:1.3rem;color:var(--ink);flex:1} .pv2 .tst .who{display:flex;align-items:center;gap:.8rem} .pv2 .tst .av{width:46px;height:46px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--acc);font-size:.95rem;flex-shrink:0;overflow:hidden} .pv2 .tst.feat .av{background:var(--acc);color:#fff} .pv2 .tst .av img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pv2 .tst .who b{display:block;font-size:.92rem;color:var(--navy)} .pv2 .tst .who small{color:var(--muted);font-size:.78rem} /* Cartes témoignages v2, compactes & modernes */ .pv2 .tst{padding:1.4rem;justify-content:flex-start} .pv2 .tst-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .pv2 .tst-glogo{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.82rem;color:var(--navy)} .pv2 .tst-vtag{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:700;color:#16a34a} .pv2 .tst-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem} .pv2 .tst .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;flex-shrink:0;overflow:hidden} .pv2 .tst .av img{width:100%;height:100%;object-fit:cover} .pv2 .tst .who-i b{display:block;font-size:.92rem;color:var(--navy);line-height:1.2} .pv2 .tst .who-i small{color:var(--muted);font-size:.78rem} .pv2 .tst .stars{color:#fbbc05;font-size:.92rem;letter-spacing:2px;margin-bottom:.6rem;display:flex} .pv2 .tst .q{font-size:.92rem;color:var(--ink);line-height:1.6;margin:0;flex:none} /* --- Hub des formations (05/09/2026) --- */ /* Sous-titre de famille, sous le h2 du sect-head. */ .pv2 .sect-sub{margin-top:.55rem;color:var(--muted);font-size:.98rem;line-height:1.6} /* Ligne duree + niveau des cartes du catalogue : discrete, au-dessus de la fleche. */ /* Badge « Populaire » de certaines cartes, en haut a droite (le .svc est deja en position:relative). */ .pv2 .fmt-pop{position:absolute;top:.9rem;right:.9rem;font-size:.68rem;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--acc-2); border-radius:999px;padding:.24rem .6rem} /* Corrige le 06/09/2026 : .svc est une colonne flex dont la regle « .svc p{flex:1} » attrapait AUSSI cette ligne de pastilles, un

. Elle s'etirait sur l'espace restant de la carte et ses pastilles se deformaient en gros ovales. flex:0 la fige, margin-top:auto la pose au bas de la carte, alignee d'une carte a l'autre, et chaque pastille est centree sur son texte, sur une seule ligne. */ .pv2 .fmt-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 .1rem; flex:0 0 auto;margin-top:auto;padding-top:.9rem;align-items:center;align-content:flex-start} .pv2 .fmt-meta span{display:inline-flex;align-items:center;line-height:1;white-space:nowrap; font-size:.76rem;font-weight:600;color:var(--muted); background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.34rem .7rem} /* Les regles .qa ont ete retirees le 23/08/2026: aucun gabarit n'emet plus ce balisage, les FAQ sont desormais des

natifs. */ /* FAQ Ajoute le 23/08/2026. Le bloc n'avait qu'une largeur maximale: les
tombaient donc dans le rendu par defaut du navigateur, avec son petit triangle noir, aucun ecart entre les questions et aucun signe qu'on pouvait cliquer. Les regles .qa juste en dessous visent un ancien balisage qui n'est plus emis par aucun gabarit. Meme parti pris que les etapes: des rangees separees par un filet, sans carte. Le chevron bronze indique l'etat et pivote a l'ouverture. */ .pv2 .faq{max-width:780px;border-top:1px solid var(--line)} .pv2 .faq details{border-bottom:1px solid var(--line)} .pv2 .faq summary{position:relative;cursor:pointer;list-style:none; padding:1.15rem 2.8rem 1.15rem 0;margin:0; font-weight:700;font-size:1.04rem;line-height:1.42;color:var(--navy); transition:color .2s} .pv2 .faq summary::-webkit-details-marker{display:none} .pv2 .faq summary:hover{color:var(--acc-2)} .pv2 .faq summary:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:4px} /* Chevron dessine avec deux bordures: pas d'image, pas de police d'icones. */ .pv2 .faq summary::after{content:"";position:absolute;right:.6rem;top:1.42rem; width:9px;height:9px;border-right:2px solid var(--acc-2);border-bottom:2px solid var(--acc-2); transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.7,.2,1)} .pv2 .faq details[open] summary{color:var(--acc-2)} .pv2 .faq details[open] summary::after{transform:rotate(-135deg);top:1.72rem} .pv2 .faq details p{margin:0;padding:0 2.8rem 1.4rem 0; font-size:.95rem;line-height:1.76;color:var(--muted)} .pv2 .faq details[open] p{animation:faq-ouvre .28s ease both} @keyframes faq-ouvre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(max-width:600px){ .pv2 .faq summary{font-size:.99rem;padding:1rem 2.2rem 1rem 0} .pv2 .faq summary::after{top:1.3rem;right:.2rem} .pv2 .faq details[open] summary::after{top:1.55rem} .pv2 .faq details p{padding-right:0;font-size:.92rem} } @media(prefers-reduced-motion:reduce){ .pv2 .faq summary::after{transition:none} .pv2 .faq details[open] p{animation:none} } /* CTA */ .pv2 .cta-band{padding:76px 0} .pv2 .cta-inner{background:var(--navy);border-radius:20px;padding:3.2rem 2.6rem;text-align:center;color:#fff} .pv2 .cta-inner h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.8rem} .pv2 .cta-inner p{color:#c3cee6;font-size:1rem;margin:0 auto 1.8rem;max-width:500px} /* FOOTER */ .pv2 footer{background:var(--navy);color:#fff;padding:56px 0 32px;border-top:4px solid var(--acc)} .pv2 .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2rem;margin-bottom:2.4rem} .pv2 .foot-grid h2{font-weight:700;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:1rem} .pv2 .foot-grid a{display:block;color:#aebbd8;font-size:.9rem;padding:.28rem 0;transition:.2s} .pv2 .foot-grid a:hover{color:#fff;padding-left:5px} .pv2 .foot-brand .logo{color:#fff;margin-bottom:.9rem} .pv2 .foot-logo img{height:46px;width:auto;background:#fff;padding:7px 12px;border-radius:10px} .pv2 .foot-brand p{color:#aebbd8;max-width:300px;font-size:.9rem} .pv2 .foot-social{display:flex;gap:.6rem;margin-top:1rem} .pv2 .foot-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#aebbd8;padding:0} .pv2 .foot-social a:hover{background:var(--acc);border-color:var(--acc);color:#fff} .pv2 .foot-contact a{color:#aebbd8} .pv2 .foot-sub{color:var(--acc);font-weight:700;font-size:.92rem;margin:.2rem 0 .6rem} .pv2 .foot-col:not(.foot-contact) a{position:relative;padding-left:1.1rem} .pv2 .foot-col:not(.foot-contact) a::before{content:"\203A";position:absolute;left:0;color:var(--acc);font-weight:700} .pv2 .foot-col .foot-allsvc{margin-top:.5rem;color:var(--acc);font-weight:700} .pv2 .foot-brand .foot-reviews{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.65rem .9rem;width:fit-content} .pv2 .foot-reviews:hover{border-color:var(--acc)} .pv2 .foot-reviews .g{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pv2 .foot-reviews .gr{display:flex;flex-direction:column;gap:.12rem} .pv2 .foot-reviews b{color:#fff;font-size:.86rem;line-height:1.15} .pv2 .foot-reviews .grs{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:#aebbd8} .pv2 .foot-reviews .gstars{color:#fbbc05;letter-spacing:1px} .pv2 .foot-contact .fc-line{display:flex;align-items:center;gap:.6rem;color:#aebbd8;padding:.35rem 0;word-break:break-word} .pv2 .fc-ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0} .pv2 .fc-ic svg{width:17px;height:17px} .pv2 .foot-cities{margin-top:2rem;padding:1.4rem 1.6rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap} .pv2 .fcity-head{display:flex;align-items:center;gap:.8rem;min-width:230px} .pv2 .fcity-ic{width:42px;height:42px;border-radius:50%;background:rgba(245,197,24,.15);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0} .pv2 .fcity-head b{color:#fff;display:block}.pv2 .fcity-head small{color:#aebbd8;font-size:.82rem} .pv2 .fcity-list{flex:1;min-width:260px;color:#cdd3df;font-size:.9rem;line-height:2} .pv2 .fcity-list span{white-space:nowrap} .pv2 .fcity-list span::after{content:" \00B7";color:var(--acc-2)} .pv2 .fcity-list span:last-child::after{content:""} .pv2 .fcity-list .intl{color:#8595bd} /* --- Zones d'intervention (style Maxime, responsive) --- */ .pv2 .foot-zones{margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)} .pv2 .zone-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem} .pv2 .zone-head .zic{width:42px;height:42px;border-radius:50%;background:rgba(245,197,24,.15);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0} .pv2 .zone-head b{color:#fff;display:block}.pv2 .zone-head small{color:#aebbd8;font-size:.82rem} .pv2 .zone-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem} .pv2 .zone-cols h3{font-weight:700;font-family:var(--mono);color:var(--acc);text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;margin-bottom:.9rem} .pv2 .zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.45rem .8rem} .pv2 .zone-grid span{color:#aebbd8;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:600px){.pv2 .zone-cols{grid-template-columns:1fr;gap:1.3rem}} /* --- Bouton WhatsApp flottant animé --- */ .pv2 .fab-wa{position:fixed;right:18px;bottom:18px;z-index:300;width:50px;height:50px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.6);transition:transform .2s} .pv2 .fab-wa svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8} .pv2 .fab-wa::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:fabring 2.2s infinite} @keyframes fabring{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.9);opacity:0}100%{opacity:0}} .pv2 .fab-wa:hover{transform:scale(1.08)} .pv2 .fab-wa .fab-label{position:absolute;right:70px;background:var(--navy);color:#fff;padding:.5rem .85rem;border-radius:8px;white-space:nowrap;font-size:.82rem;font-weight:700;opacity:0;transform:translateX(8px);pointer-events:none;transition:.22s;box-shadow:var(--shadow)} .pv2 .fab-wa:hover .fab-label{opacity:1;transform:translateX(0)} @media(max-width:600px){.pv2 .fab-wa{width:46px;height:46px;right:14px;bottom:14px}.pv2 .fab-wa svg{width:24px;height:24px}.pv2 .fab-wa .fab-label{display:none}} .pv2 .foot-remote{color:#8595bd;font-size:.84rem;margin-top:.6rem;line-height:1.5} /* Header : burger dès 900px (évite tout débordement sur tablette) */ @media(max-width:900px){.pv2 .nav-links{display:none}.pv2 .burger{display:flex}.pv2 .nav-right .btn{padding:.5rem .9rem;font-size:.82rem}} @media(max-width:400px){.pv2 .nav-right .btn{display:none}} .pv2 .foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:#8595bd;font-size:.82rem} /* REVEAL */ .pv2 .rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .pv2 .rv.in{opacity:1;transform:none} .pv2 .stg>*{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .pv2 .stg.in>*{opacity:1;transform:none} .pv2 .stg.in>*:nth-child(2){transition-delay:.07s} .pv2 .stg.in>*:nth-child(3){transition-delay:.14s} .pv2 .stg.in>*:nth-child(4){transition-delay:.21s} .pv2 .stg.in>*:nth-child(5){transition-delay:.28s} .pv2 .stg.in>*:nth-child(6){transition-delay:.35s} .pv2 .stg.in>*:nth-child(7){transition-delay:.42s} .pv2 .stg.in>*:nth-child(8){transition-delay:.49s} @media(prefers-reduced-motion:reduce){.pv2 *{animation:none!important;transition:none!important}.pv2 .rv,.pv2 .stg>*,.pv2 .up{opacity:1!important;transform:none!important}} @media(max-width:900px){ .pv2 .hero-grid{grid-template-columns:1fr;gap:2.2rem} .pv2 .bento,.pv2 .why-grid{grid-template-columns:repeat(6,1fr)} .pv2 .svc{grid-column:span 3} .pv2 .svc.featured{grid-column:span 6;grid-row:span 1} .pv2 .why,.pv2 .why.wide{grid-column:span 3} .pv2 .pf-grid,.pv2 .tst-grid{grid-template-columns:1fr 1fr} .pv2 .tst.feat{grid-column:span 2} .pv2 .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .pv2 .nav-links{display:none}.pv2 .burger{display:flex} .pv2 .bento,.pv2 .why-grid,.pv2 .pf-grid,.pv2 .tst-grid,.pv2 .foot-grid{grid-template-columns:1fr} /* Rangees resserrees sur petit ecran. */ .pv2 .step{grid-template-columns:44px minmax(0,1fr);column-gap:1.1rem;padding:1.35rem 0} .pv2 .step .sn{width:44px;height:44px;border-radius:12px;font-size:.92rem} .pv2 .step h3,.pv2 .step h4{font-size:1.06rem;padding-top:.42rem} .pv2 .step p{font-size:.92rem} .pv2 .svc,.pv2 .svc.featured,.pv2 .why,.pv2 .why.wide,.pv2 .tst,.pv2 .tst.feat{grid-column:span 1} .pv2 .hero{padding:108px 0 56px}.pv2 .stats{gap:1.4rem} } /* ===== Page contact (20/08/2026) ===================================== /contact repondait 404 : la page est nouvelle, ces regles aussi. Elles reprennent les jetons existants (--line, --soft, --acc) pour rester coherentes avec le reste du site, sans nouvelle couleur. */ .pv2 .ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .pv2 .ct-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:#fff} .pv2 .ct-card h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .6rem} .pv2 .ct-card p{margin:0 0 .5rem;font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.45} .pv2 .ct-card a{color:var(--acc-2);text-decoration:none} .pv2 .ct-card a:hover{text-decoration:underline} .pv2 .ct-card small{color:var(--muted);font-size:.86rem;line-height:1.5;display:block} .pv2 .ct-form{display:flex;flex-direction:column;gap:1.1rem} .pv2 .ct-row{display:flex;flex-direction:column;gap:.4rem} .pv2 .ct-row label{font-weight:700;color:var(--navy);font-size:.94rem} .pv2 .ct-row input,.pv2 .ct-row textarea{ width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px; font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;transition:border-color .2s} .pv2 .ct-row input:focus,.pv2 .ct-row textarea:focus{outline:none;border-color:var(--acc)} .pv2 .ct-row textarea{resize:vertical;min-height:150px} .pv2 .ct-form button[type=submit]{align-self:flex-start} .pv2 .ct-form button[disabled]{opacity:.6;cursor:progress} /* Piege a robots : hors ecran plutot que display:none, que certains bots detectent. */ .pv2 .ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .pv2 .ct-msg{margin:0;font-size:.94rem;min-height:1.2em;color:var(--muted)} .pv2 .ct-msg.is-ok{color:#15803d;font-weight:700} .pv2 .ct-msg.is-err{color:#b91c1c;font-weight:700} @media(max-width:960px){ .pv2 .ct-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .pv2 .ct-grid{grid-template-columns:1fr} } /* ===== Pages ville et realisations (20/08/2026) ====================== Reprend les jetons existants (--line, --soft, --acc-2, --muted) : aucune couleur nouvelle, les pages restent dans la charte. */ .pv2 .vil-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;font-size:.9rem;color:var(--muted)} .pv2 .vil-tag{border:1px solid var(--line);border-radius:999px;padding:.25rem .8rem;background:#fff} .pv2 .vil-links{display:flex;flex-wrap:wrap;gap:.7rem} .pv2 .vil-links a{display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--line);border-radius:var(--radius); padding:.75rem 1.1rem;background:#fff;color:var(--navy);text-decoration:none;font-weight:700;transition:.2s} .pv2 .vil-links a:hover{border-color:var(--acc);transform:translateY(-2px)} .pv2 .vil-links a small{font-weight:400;color:var(--muted);font-size:.8rem} .pv2 .vil-links .vil-all{justify-content:center;background:var(--soft);color:var(--acc-2)} .pv2 .zone-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0} .pv2 .zone-tags span{font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem} .pv2 .zone-all{margin-top:1rem;text-align:center} .pv2 .zone-all a{color:var(--acc-2);font-weight:700;text-decoration:none} .pv2 .zone-all a:hover{text-decoration:underline} /* Le pied de page passe les villes en liens : garder l'aspect des anciens . */ .pv2 .zone-grid a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:.2s} .pv2 .zone-grid a:hover{color:var(--acc);border-bottom-color:var(--acc)} .pv2 .rea-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.1rem;margin-bottom:1.6rem} .pv2 .rea-facts h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .35rem} .pv2 .rea-facts p{margin:0;font-weight:700;color:var(--navy)} .pv2 .rea-facts a{color:var(--acc-2);text-decoration:none} .pv2 .rea-facts a:hover{text-decoration:underline} .pv2 .rea-technos h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .5rem} .pv2 .rea-technos ul{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0} .pv2 .rea-technos li{font-size:.85rem;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem} .pv2 .rea-cover{margin:0} .pv2 .rea-cover img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);display:block} @media(max-width:600px){ .pv2 .rea-facts{grid-template-columns:1fr 1fr} .pv2 .vil-links a{flex:1 1 100%} } /* Les cartes projet sont devenues cliquables (20/08/2026) : neutraliser le style de lien herite, .pf portant deja display:flex et son propre survol. */ .pv2 a.pf{text-decoration:none;color:inherit} .pv2 a.pf .arrow{margin-top:.8rem;color:var(--acc-2);font-weight:700;font-size:.82rem} /* Tableau comparatif des pages ville (20/08/2026). Le site ne comptait qu'un seul tableau sur 21 pages, alors que c'est le format que Google privilegie pour l'extrait optimise (prix, delais). overflow-x sur le conteneur : un tableau a 4 colonnes doit defiler dans sa boite sur mobile, jamais faire defiler la page entiere. */ .pv2 .vil-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .pv2 .vil-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px} .pv2 .vil-table th,.pv2 .vil-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .pv2 .vil-table thead th{background:var(--soft);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;white-space:nowrap} .pv2 .vil-table tbody th{font-weight:700;color:var(--navy);width:26%} .pv2 .vil-table tbody td:nth-child(3){color:var(--acc-2);font-weight:700;white-space:nowrap} .pv2 .vil-table tbody td:nth-child(4){color:var(--muted);white-space:nowrap} .pv2 .vil-table tbody tr:last-child th,.pv2 .vil-table tbody tr:last-child td{border-bottom:none} .pv2 .vil-table-note{margin-top:.8rem;font-size:.84rem;color:var(--muted);text-align:center} /* ============================================================ SECTION FLUX, reecrite le 21/08/2026. Premiere version rejetee: des cercles et des points abstraits qui ne montraient rien de reconnaissable, et trois colonnes desalignees parce que les blocs de texte n'avaient pas la meme hauteur. Ici: un cahier a spirale, un telephone WhatsApp et un tableur reellement dessines, un workflow avec ses cables et ses paquets, puis un tableau de bord. Grille alignee par des rangees nommees. ============================================================ */ .pv2 .flux{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:5.5rem 0} .pv2 .flux::before{content:"";position:absolute;inset:0;background: radial-gradient(60% 50% at 15% 0%,rgba(200,146,74,.15),transparent 70%), radial-gradient(50% 45% at 88% 100%,rgba(200,146,74,.09),transparent 70%)} .pv2 .flux>.wrap{position:relative} .pv2 .flux .sect-head h2{color:#fff} .pv2 .flux .sect-head p{color:#b9b4ab} .pv2 .flux .sect-head .mono{color:#8d867c} /* Grille en rangees nommees: les etiquettes, les illustrations, les titres et les paragraphes s'alignent entre colonnes quelle que soit la longueur des textes. C'est ce qui manquait a la version rejetee. */ .pv2 .fx-scene{display:grid;grid-template-columns:1fr auto 1fr auto 1fr; grid-template-rows:auto auto auto auto;align-items:start;gap:0 1rem;margin-top:3rem} .pv2 .fx-step{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;text-align:center;gap:0} @supports not (grid-template-rows:subgrid){ .pv2 .fx-scene{align-items:stretch} .pv2 .fx-step{display:flex;flex-direction:column} } .pv2 .fx-tag{justify-self:center;align-self:start;font-family:var(--mono);font-size:.68rem; letter-spacing:.14em;text-transform:uppercase;padding:.34rem .8rem;border-radius:999px;margin-bottom:1.4rem} .pv2 .fx-step.avant .fx-tag{background:rgba(255,255,255,.08);color:#b9b4ab} .pv2 .fx-step.pont .fx-tag{background:rgba(200,146,74,.18);color:var(--acc)} .pv2 .fx-step.apres .fx-tag{background:var(--acc);color:#1c1c1e} .pv2 .fx-media{display:flex;align-items:center;justify-content:center;min-height:200px} .pv2 .fx-media svg{width:100%;max-width:290px;height:auto;display:block} .pv2 .fx-step h3{font-size:1.14rem;color:#fff;margin:1.2rem 0 .4rem;letter-spacing:-.01em} .pv2 .fx-step p{font-size:.92rem;color:#b9b4ab;line-height:1.65;max-width:32ch;margin:0 auto} /* Etiquettes internes aux illustrations */ .pv2 .fx-obj-l{fill:#8d867c;font-family:var(--mono);font-size:9px;letter-spacing:.12em} .pv2 .fx-obj-on{fill:var(--acc)} .pv2 .fx-nl{fill:#b9b4ab;font-family:var(--mono);font-size:9px;letter-spacing:.08em} .pv2 .fx-nl-on{fill:var(--acc)} .pv2 .fx-kpi{fill:#fff;font-weight:900;font-size:15px} .pv2 .fx-node rect{fill:#2f2f34;stroke:rgba(200,146,74,.45);stroke-width:1.6} .pv2 .fx-bars rect{fill:var(--acc);opacity:.75} .pv2 .fx-broken{opacity:.7} .pv2 .pkt{fill:var(--acc)} /* Passerelle entre deux etats */ .pv2 .fx-bridge{grid-row:2;align-self:center;width:80px;height:24px} .pv2 .fx-bridge .rail{stroke:rgba(255,255,255,.2);stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round;fill:none} .pv2 .fx-bridge .head{stroke:rgba(255,255,255,.32);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .pv2 .fx-bridge .pulse{fill:var(--acc)} /* Le gain */ .pv2 .fx-gain{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3.4rem; padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.1)} .pv2 .fx-gain div{text-align:center} .pv2 .fx-gain .g-n{font-size:1.9rem;font-weight:900;color:var(--acc);line-height:1.1} .pv2 .fx-gain .g-l{font-size:.82rem;color:#b9b4ab;margin-top:.3rem} @media(max-width:980px){ .pv2 .fx-scene{grid-template-columns:1fr;grid-template-rows:none;gap:.4rem} .pv2 .fx-step{grid-row:auto;display:flex;flex-direction:column;padding:1.6rem 0} .pv2 .fx-bridge{grid-row:auto;justify-self:center;transform:rotate(90deg);width:56px} .pv2 .fx-step p{max-width:40ch} .pv2 .fx-gain{grid-template-columns:1fr;gap:1.6rem} } @media(prefers-reduced-motion:reduce){ .pv2 .fx-bridge .pulse,.pv2 .pkt{display:none} } /* ============================================================ REFONTE DE L'ACCUEIL, 21/08/2026. Ce bloc surcharge volontairement les regles precedentes: il est place en fin de feuille pour l'emporter sans avoir a les reecrire, ce qui garde l'historique lisible et le retour arriere trivial. Trois defauts corriges: 1. huit sections claires d'affilee, aucun rythme visuel 2. une echelle typographique trop plate, les titres ne portaient pas 3. des cartes sans profondeur ni reponse au survol ============================================================ */ /* --- Echelle typographique: les titres portent enfin --- */ .pv2 .hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;letter-spacing:-.035em} .pv2 .hero .lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:#55555c;max-width:52ch;line-height:1.72} .pv2 .sect-head h2{font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.028em} .pv2 .sect-head p{font-size:1.02rem;color:var(--muted);max-width:62ch;line-height:1.7;margin-top:.7rem} .pv2 .sect-head{margin-bottom:2.8rem} .pv2 .sect-head .mono{display:inline-block;margin-bottom:.85rem} /* --- Rythme: alternance claire / creme, plus de mur blanc --- */ .pv2 .sect{padding:5.5rem 0} .pv2 .sect.soft{background:var(--soft)} .pv2 #services{background:var(--soft)} .pv2 #portfolio{background:var(--bg)} /* --- Hero: profondeur et ancrage --- */ .pv2 .hero{position:relative;padding:7rem 0 5rem;overflow:hidden} .pv2 .hero::before{content:"";position:absolute;inset:0;z-index:-1;background: radial-gradient(48% 42% at 82% 8%,rgba(200,146,74,.13),transparent 68%), radial-gradient(42% 38% at 0% 62%,rgba(200,146,74,.07),transparent 70%)} .pv2 .hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem; border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);margin-bottom:1.4rem} .pv2 .hero .hero-cta{margin-top:2rem;gap:.8rem} .pv2 .hero .stats{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--line)} .pv2 .stat .n{font-size:1.9rem;letter-spacing:-.03em} .pv2 .stat .l{color:var(--muted);font-size:.83rem} /* --- Cartes: profondeur reelle, reponse au survol --- */ .pv2 .svc,.pv2 .pf,.pv2 .tst,.pv2 .why{ /* .step retire le 23/08/2026: les etapes ne sont plus des cartes. */ border:1px solid var(--line);border-radius:var(--radius);background:var(--bg); transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s} .pv2 .svc{padding:1.6rem;position:relative;overflow:hidden} .pv2 .svc::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--acc);transition:width .3s} .pv2 .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#ded6c9} .pv2 .svc:hover::after{width:100%} .pv2 .svc .ico{width:44px;height:44px;border-radius:11px;background:var(--soft);display:flex; align-items:center;justify-content:center;color:var(--acc-2);margin-bottom:1rem;transition:.25s} .pv2 .svc:hover .ico{background:var(--acc);color:#fff} .pv2 .svc h3{font-size:1.06rem;margin-bottom:.4rem;letter-spacing:-.01em} .pv2 .svc p{font-size:.92rem;color:var(--muted);line-height:1.62} .pv2 .svc .arrow{margin-top:1rem;font-size:.83rem;font-weight:700;color:var(--acc-2); display:inline-flex;align-items:center;gap:.35rem;transition:gap .25s} .pv2 .svc .arrow::after{content:"\2192"} .pv2 .svc:hover .arrow{gap:.6rem} .pv2 .pf:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* Ce second jeu de regles .step redefinissait la carte (fond, retrait, survol, pastille carree). Il ecrasait la chronologie definie plus haut puisqu'il la suit dans la feuille. Devenu sans objet, il est retire le 23/08/2026. */ .pv2 .why{padding:1.5rem} .pv2 .why:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#ded6c9} .pv2 .why .ico{color:var(--acc-2);margin-bottom:.8rem} /* --- Temoignages: bloc centre, lisible avec une seule carte --- */ .pv2 .greviews{display:inline-flex;align-items:center;gap:.9rem;padding:.85rem 1.2rem; border:1px solid var(--line);border-radius:999px;background:var(--bg);margin:0 auto 1.6rem; transition:border-color .2s,box-shadow .2s} .pv2 .greviews:hover{border-color:var(--acc);box-shadow:var(--shadow)} .pv2 .tst-wrap{display:flex;flex-direction:column;align-items:center} .pv2 .tst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,340px)); gap:1.2rem;justify-content:center;width:100%} .pv2 .tst{padding:1.7rem;position:relative;text-align:left} .pv2 .tst::before{content:"C";position:absolute;right:1.1rem;top:.1rem;font-size:4rem; line-height:1;color:var(--acc);opacity:.13;font-family:Georgia,serif;pointer-events:none} .pv2 .tst .q{font-size:.98rem;line-height:1.68;color:var(--ink);position:relative} .pv2 .tst .av{width:44px;height:44px;border-radius:50%;background:var(--acc-2);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0} .pv2 .tst .stars{color:var(--acc);letter-spacing:.12em;margin:.7rem 0} /* --- Bande d'appel: contraste et respiration --- */ .pv2 .cta-band{background:var(--navy);position:relative;overflow:hidden;padding:4.5rem 0} .pv2 .cta-band::before{content:"";position:absolute;inset:0;background: radial-gradient(55% 60% at 50% 0%,rgba(200,146,74,.18),transparent 70%)} .pv2 .cta-inner{position:relative;text-align:center;max-width:640px;margin:0 auto} .pv2 .cta-inner h2{font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;letter-spacing:-.025em} .pv2 .cta-inner p{color:#b9b4ab;margin:.8rem 0 1.8rem;font-size:1.02rem} /* --- Bandeau des technologies: plus discret, il ne doit pas crier --- */ .pv2 .marquee{background:var(--navy);color:#8d867c;padding:.9rem 0;font-family:var(--mono); font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:none} /* --- FAQ --- Ce bloc surchargeait les cartes .qa, retirees le 23/08/2026 avec le reste de cet ancien accordeon. Voir le bloc FAQ plus haut. */ @media(max-width:768px){ .pv2 .sect{padding:3.8rem 0} .pv2 .hero{padding:5rem 0 3.5rem} .pv2 .sect-head{margin-bottom:2rem} } @media(prefers-reduced-motion:reduce){ .pv2 .svc,.pv2 .pf,.pv2 .step,.pv2 .why{transition:none} .pv2 .svc:hover,.pv2 .pf:hover,.pv2 .step:hover,.pv2 .why:hover{transform:none} } /* ============================================================ HERO DES PAGES VILLE, refait le 21/08/2026. L'ancien empilait titre, phrase et boutons sur toute la largeur et laissait la moitie droite vide. Les faits que le visiteur cherche en premier (intervention sur place ou non, distance, delai, secteurs) etaient enfouis plus bas. Ils occupent desormais ce vide. ============================================================ */ .pv2 .vil-hero{position:relative;padding:3.4rem 0 4.6rem;overflow:hidden;background:var(--soft)} .pv2 .vil-hero::before{content:"";position:absolute;inset:0;background: radial-gradient(46% 60% at 88% 12%,rgba(200,146,74,.16),transparent 68%), radial-gradient(40% 50% at 2% 96%,rgba(200,146,74,.08),transparent 70%)} .pv2 .vil-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr; gap:3rem;align-items:center} .pv2 .vil-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.032em;margin:.2rem 0 .9rem} .pv2 .vil-hero .lead{font-size:1.06rem;color:#55555c;line-height:1.7;max-width:46ch} .pv2 .vil-hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem; border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75)} .pv2 .vil-hero .hero-cta{margin-top:1.8rem} /* Carte de faits: ce que le visiteur veut savoir avant de lire */ .pv2 .vil-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius); padding:1.5rem 1.6rem;box-shadow:var(--shadow)} .pv2 .vc-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:.72rem 0;border-bottom:1px solid var(--line)} .pv2 .vc-row:first-child{padding-top:0} .pv2 .vc-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);flex-shrink:0} .pv2 .vc-v{font-weight:700;font-size:.94rem;color:var(--navy);text-align:right} .pv2 .vc-sect{padding-top:1rem} .pv2 .vc-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem} /* Les pages ville posent des (secteurs, non cliquables), les pages sujet des (autres prestations de la meme ville) : meme pastille, le lien reagit. */ .pv2 .vc-tags span,.pv2 .vc-tags a{font-size:.78rem;padding:.32rem .68rem;border-radius:999px; background:var(--soft);color:var(--navy);border:1px solid var(--line)} .pv2 .vc-tags a{text-decoration:none;transition:background .2s,border-color .2s,color .2s} .pv2 .vc-tags a:hover{background:var(--navy);border-color:var(--navy);color:#fff} @media(max-width:900px){ .pv2 .vil-hero-grid{grid-template-columns:1fr;gap:2rem} .pv2 .vil-hero{padding:2.6rem 0 3.4rem} .pv2 .vc-v{font-size:.9rem} } /* ============================================================ CORPS DES PAGES VILLE, retravaille le 21/08/2026. Le defaut: treize sections dont la plupart etaient de la prose empilee, sans hierarchie ni point d'accroche. Un mur de texte que personne ne lit en entier, et ou l'oeil ne sait pas ou se poser. Trois reponses: 1. les donnees structurees (quartiers, erreurs) deviennent des cartes, parce qu'elles etaient structurees des le depart 2. les titres recoivent un filet bronze qui rythme la descente 3. la prose est bornee et aeree, avec une ligne d'attaque marquee ============================================================ */ /* Titres de section: un filet court qui ancre chaque palier */ .pv2 .prose h2{position:relative;padding-top:1.5rem;margin-top:3rem; font-size:clamp(1.45rem,2.6vw,1.95rem);letter-spacing:-.022em;line-height:1.2} .pv2 .prose h2::before{content:"";position:absolute;top:0;left:0;width:42px;height:3px; background:var(--acc);border-radius:2px} .pv2 .prose h2:first-child{margin-top:0} .pv2 .prose h3{font-size:1.08rem;margin:1.9rem 0 .45rem;letter-spacing:-.008em} .pv2 .prose p{line-height:1.78;color:#4a4a52;margin-bottom:1.05rem} .pv2 .prose>p:first-of-type{font-size:1.08rem;color:#3a3a42} .pv2 .prose .inc-list li{line-height:1.7;margin:.5rem 0} /* Quartiers: cartes numerotees, l'information etait deja structuree */ .pv2 .vil-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1rem;margin:1.6rem 0 .6rem} .pv2 .vz{position:relative;padding:1.4rem 1.4rem 1.3rem;background:var(--bg); border:1px solid var(--line);border-radius:var(--radius); transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s} .pv2 .vz:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#ded6c9} .pv2 .vz-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--acc); display:block;margin-bottom:.5rem} .pv2 .vz h3{margin:0 0 .4rem;font-size:1rem} .pv2 .vz p{font-size:.9rem;line-height:1.62;color:var(--muted);margin:0} /* Erreurs: cartes d'avertissement, filet bronze a gauche */ .pv2 .vil-errs{display:grid;gap:.8rem;margin:1.6rem 0 .6rem} .pv2 .ve{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.4rem; background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--acc); border-radius:0 var(--radius) var(--radius) 0} .pv2 .ve-i{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(200,146,74,.14); color:var(--acc-2);display:flex;align-items:center;justify-content:center;margin-top:.1rem} .pv2 .ve h3{margin:0 0 .3rem;font-size:1rem} .pv2 .ve p{font-size:.91rem;line-height:1.64;color:var(--muted);margin:0} /* Tableau comparatif: lisible plutot que dense */ .pv2 .vil-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)} .pv2 .vil-table-wrap table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px} /* Corrige le 23/08/2026. La regle portait sur "th" tout court : elle peignait donc AUSSI la premiere colonne du corps, qui est un . Le fond passait en navy pendant que la regle plus specifique ".vil-table tbody th" gardait color:var(--navy) : texte navy sur fond navy, colonne noire et vide. Les deux zones sont desormais visees separement. */ .pv2 .vil-table-wrap thead th{background:var(--soft);color:var(--muted);font-weight:700; text-align:left;padding:.85rem 1rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em} .pv2 .vil-table-wrap tbody th{background:transparent;color:var(--navy);font-weight:700; text-align:left;width:26%;padding:.85rem 1rem;border-top:1px solid var(--line);vertical-align:top} .pv2 .vil-table-wrap td{padding:.85rem 1rem;border-top:1px solid var(--line);vertical-align:top} .pv2 .vil-table-wrap tbody tr:nth-child(even){background:var(--soft)} /* Villes voisines: pastilles plutot qu'une liste de liens nus */ .pv2 .vil-links{display:flex;flex-wrap:wrap;gap:.55rem} .pv2 .vil-links a{padding:.55rem 1rem;border:1px solid var(--line);border-radius:999px; background:var(--bg);font-size:.9rem;font-weight:600;color:var(--navy);transition:.2s} .pv2 .vil-links a:hover{border-color:var(--acc);color:var(--acc-2);background:var(--soft)} @media(max-width:768px){ .pv2 .prose h2{margin-top:2.2rem} .pv2 .ve{padding:1.1rem} } @media(prefers-reduced-motion:reduce){ .pv2 .vz{transition:none}.pv2 .vz:hover{transform:none} }