/* ══════════════════════════════════════════════════════════════════════════ KCMH RÉNOVATIONS — DESIGN SYSTEM « ATELIER COUVREUR » Refonte complète · Source de vérité unique · Noir / Jaune / Blanc ──────────────────────────────────────────────────────────────────────── Direction : éditorial industriel premium. Le jaune #F5C400 (couleur-signal du métier) en accent maîtrisé. Rythme par bandes alternées (sombre / clair / jaune). Typo : Archivo (display) + Hanken Grotesk (corps) + Space Mono (labels). Contrastes vérifiés WCAG 2.2 AA (voir validation). Zéro emoji-icône. Police à charger dans : Archivo:wght@500;600;700;800;900 · Hanken+Grotesk:wght@400;500;600;700 · Space+Mono:wght@400;700 ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ─────────────────────────────────────────────────────────── */ :root{ /* Encres (near-black chaud) */ --ink:#0E0E10; --ink-soft:#17171B; --ink-card:#1E1E24; --ink-line:#2A2A32; --ink-line-2:#3A3A46; /* Papier (blanc cassé chaud) */ --paper:#F6F4EF; --paper-2:#FFFFFF; --paper-line:#E4E0D6; /* Jaune de marque */ --yellow:#F5C400; --yellow-deep:#E0AE00; --yellow-glow:rgba(245,196,0,.30); /* Textes (contrastes vérifiés) */ --on-light:#16150F; --on-light-soft:#4A4842; --on-light-mute:#605D54; --on-dark:#F4F3EF; --on-dark-soft:#BFBDB5; --on-dark-mute:#9A9890; --on-yellow:#0E0E10; --on-yellow-soft:#3A3320; /* Bordures de champs (≥3:1) */ --field-light:#807B6E; --field-dark:#6E6E82; /* Typo */ --font-display:'Archivo','Hanken Grotesk',system-ui,sans-serif; --font-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'Space Mono','SFMono-Regular',ui-monospace,monospace; /* Échelle d'espacement (base 8) */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; /* Rythme vertical des sections */ --band-y:clamp(4.5rem,9vw,8.5rem); --wrap:1200px; --wrap-narrow:920px; --pad-x:clamp(1.25rem,5vw,4rem); /* Rayons */ --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px; /* Ombres */ --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 10px 30px -12px rgba(20,18,10,.18); --sh-3:0 24px 60px -24px rgba(20,18,10,.28); --sh-dark:0 24px 60px -24px rgba(0,0,0,.7); --glow:0 18px 44px -16px var(--yellow-glow); /* Easing & timing */ --e-out:cubic-bezier(.16,1,.3,1); --e-soft:cubic-bezier(.22,1,.36,1); --t-fast:.18s; --t:.28s; --t-slow:.5s; /* z-index */ --z-nav:300; --z-float:500; --z-skip:800; color-scheme:dark; } /* ── 2. RESET / BASE ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; } :where(section,header,footer){scroll-margin-top:84px} body{ font-family:var(--font-body); font-size:1.0625rem; /* 17px base — confort de lecture */ line-height:1.65; background:var(--ink); color:var(--on-dark); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--yellow);color:#0a0a0a} :focus-visible{ outline:3px solid var(--focus,var(--yellow)); outline-offset:2px; border-radius:var(--r-xs); } /* Scrollbar discrète */ *{scrollbar-width:thin;scrollbar-color:var(--ink-line-2) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--ink-line-2);border-radius:999px;border:2px solid var(--ink)} /* ── 3. ACCESSIBILITÉ ──────────────────────────────────────────────────── */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:fixed;top:.5rem;left:.5rem;z-index:var(--z-skip); background:var(--yellow);color:#0a0a0a;font-weight:700; padding:.7rem 1.1rem;border-radius:var(--r-sm); transform:translateY(-150%);transition:transform var(--t) var(--e-out); } .skip-link:focus{transform:none} /* ── 4. THÉMATISATION PAR BANDES ────────────────────────────────────────── Chaque bande pose ses variables contextuelles : les composants intérieurs (cartes, boutons fantômes, eyebrows, focus) s'adaptent automatiquement. ── */ .band{ background:var(--bg);color:var(--fg); padding-block:var(--band-y); position:relative; } .band--dark{ --bg:var(--ink); --fg:var(--on-dark); --fg-soft:var(--on-dark-soft); --fg-mute:var(--on-dark-mute); --card:var(--ink-card); --card-2:var(--ink-soft); --line:var(--ink-line); --line-strong:var(--ink-line-2); --field:var(--field-dark); --focus:var(--yellow); --eyebrow:var(--yellow); } .band--soft{ --bg:var(--ink-soft); --fg:var(--on-dark); --fg-soft:var(--on-dark-soft); --fg-mute:var(--on-dark-mute); --card:var(--ink-card); --card-2:var(--ink); --line:var(--ink-line); --line-strong:var(--ink-line-2); --field:var(--field-dark); --focus:var(--yellow); --eyebrow:var(--yellow); } .band--light{ --bg:var(--paper); --fg:var(--on-light); --fg-soft:var(--on-light-soft); --fg-mute:var(--on-light-mute); --card:var(--paper-2); --card-2:var(--paper); --line:var(--paper-line); --line-strong:#CFC9BB; --field:var(--field-light); --focus:var(--ink); --eyebrow:var(--on-light); } .band--yellow{ --bg:var(--yellow); --fg:var(--on-yellow); --fg-soft:var(--on-yellow-soft); --fg-mute:var(--on-yellow-soft); --card:var(--paper-2); --card-2:#fff; --line:rgba(14,14,16,.16); --line-strong:rgba(14,14,16,.28); --field:#0E0E10; --focus:var(--ink); --eyebrow:var(--on-yellow); } /* ── 5. LAYOUT ─────────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)} .wrap--narrow{max-width:var(--wrap-narrow)} .grid{display:grid;gap:var(--s-5)} @media(min-width:768px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} } @media(min-width:1024px){ .grid-4{grid-template-columns:repeat(4,1fr)} } .flow>*+*{margin-top:var(--s-4)} /* ── 6. TYPOGRAPHIE ────────────────────────────────────────────────────── */ .display,.h1,.h2,h1,h2{ font-family:var(--font-display); font-weight:800;line-height:1.02;letter-spacing:-.02em; text-wrap:balance; } .display{ font-size:clamp(2.8rem,7.4vw,6rem); font-weight:900;letter-spacing:-.03em;line-height:.94; } h1,.h1{font-size:clamp(2.4rem,5.6vw,4.2rem)} h2,.h2{font-size:clamp(2rem,4.6vw,3.4rem)} h3,.h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.12;letter-spacing:-.01em} p{text-wrap:pretty} .lead{font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.6;color:var(--fg-soft);max-width:60ch} .measure{max-width:64ch} .muted{color:var(--fg-mute)} .soft{color:var(--fg-soft)} strong{font-weight:700;color:var(--fg)} /* Eyebrow — label technique mono */ .eyebrow{ font-family:var(--font-mono); font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--eyebrow); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{ content:"";width:1.6em;height:2px;background:currentColor;border-radius:2px;flex:none;opacity:.8; } .eyebrow--center{justify-content:center} /* Texte jaune accent (sur fond sombre uniquement) */ .hl{color:var(--yellow)} .band--light .hl,.band--yellow .hl{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.18em;text-underline-offset:.12em} /* Numéraux */ .num{font-family:var(--font-display);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1} /* En-tête de section */ .head{max-width:var(--wrap-narrow);margin-bottom:clamp(2.5rem,5vw,4rem)} .head--center{margin-inline:auto;text-align:center} .head .eyebrow{margin-bottom:1.1rem} .head h2{margin-bottom:1rem} /* ── 7. ROOFLINE — signature visuelle (chevron de toiture) ─────────────── */ .roofline{ height:14px;width:100%; background: repeating-linear-gradient(135deg,var(--yellow) 0 2px,transparent 2px 9px); -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); opacity:.9; } .ridge{ /* fin liseré chevron en haut de page */ height:6px; background:repeating-linear-gradient(135deg,var(--yellow) 0 14px,#0a0a0a 14px 28px); } /* ── 8. NAVIGATION ─────────────────────────────────────────────────────── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.75rem var(--pad-x); background:rgba(12,12,15,.55); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.08); transition:background var(--t) var(--e-out),border-color var(--t) var(--e-out); --focus:var(--yellow); } .nav.is-scrolled{background:rgba(10,10,13,.86);border-bottom-color:rgba(255,255,255,.12)} .brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--on-dark)} .brand img{width:42px;height:42px;border-radius:10px;object-fit:cover} .brand b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;line-height:1} .brand b i{color:var(--yellow);font-style:normal;font-weight:500} .nav-links{display:none;align-items:center;gap:.4rem;list-style:none} .nav-links a{ color:var(--on-dark-soft);font-size:.86rem;font-weight:600;letter-spacing:.01em; padding:.55rem .75rem;border-radius:var(--r-sm);position:relative; transition:color var(--t-fast) var(--e-out); } .nav-links a:hover{color:var(--on-dark)} .nav-links a:not(.btn)::after{ content:"";position:absolute;left:.75rem;right:.75rem;bottom:.34rem;height:2px; background:var(--yellow);border-radius:2px;transform:scaleX(0);transform-origin:right; transition:transform var(--t) var(--e-out); } .nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left} .nav-toggle{ display:inline-flex;flex-direction:column;gap:5px;padding:11px;border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.14); } .nav-toggle span{width:22px;height:2px;background:var(--yellow);border-radius:2px;transition:transform var(--t) var(--e-out),opacity var(--t)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(min-width:1024px){ .nav-links{display:flex} .nav-toggle{display:none} } /* Menu mobile */ .nav-drawer{ position:fixed;inset:64px 0 auto 0;z-index:calc(var(--z-nav) - 1); background:rgba(10,10,13,.97); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.1); padding:1rem var(--pad-x) 1.5rem; display:grid;gap:.2rem; transform:translateY(-12px);opacity:0;visibility:hidden; transition:transform var(--t) var(--e-out),opacity var(--t),visibility var(--t); } .nav-drawer.is-open{transform:none;opacity:1;visibility:visible} .nav-drawer a{padding:.95rem .5rem;border-bottom:1px solid rgba(255,255,255,.07);color:var(--on-dark);font-weight:600} .nav-drawer a:last-child{border-bottom:none} @media(min-width:1024px){.nav-drawer{display:none}} /* Lien retour (pages internes) */ .backlink{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-dark-soft);font-size:.85rem;font-weight:600} .backlink:hover{color:var(--yellow)} .backlink svg{width:18px;height:18px} /* ── 9. BOUTONS ────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:48px;padding:.8rem 1.6rem;border-radius:var(--r-pill); font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1; text-align:center;cursor:pointer;white-space:nowrap; transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out), background var(--t-fast),color var(--t-fast),border-color var(--t-fast); } .btn svg{width:1.15em;height:1.15em;flex:none} .btn--primary{background:var(--yellow);color:#0a0a0a;box-shadow:var(--glow)} .btn--primary:hover{background:var(--yellow-deep);transform:translateY(-2px);box-shadow:0 22px 50px -16px var(--yellow-glow)} .btn--primary:active{transform:translateY(0)} .btn--dark{background:var(--ink);color:var(--on-dark);box-shadow:var(--sh-2)} .btn--dark:hover{background:#000;transform:translateY(-2px)} .btn--ghost{border:1.5px solid var(--line-strong,rgba(255,255,255,.22));color:var(--fg);background:transparent} .btn--ghost:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-2px)} .band--yellow .btn--ghost:hover{color:var(--ink);border-color:var(--ink)} .btn--lg{min-height:54px;padding:1rem 2rem;font-size:1rem} .btn--block{display:flex;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.8rem} /* ── 10. HERO ──────────────────────────────────────────────────────────── */ .hero{ position:relative;isolation:isolate; min-height:clamp(620px,92svh,900px); display:flex;align-items:center; padding:calc(64px + var(--s-8)) 0 var(--s-9); color:var(--on-dark); --focus:var(--yellow); overflow:hidden; } .hero__bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%} .hero__scrim{ position:absolute;inset:0;z-index:-1; background: radial-gradient(60% 70% at 80% 30%,rgba(245,196,0,.16),transparent 60%), linear-gradient(100deg,rgba(8,8,11,.96) 0%,rgba(8,8,11,.86) 38%,rgba(8,8,11,.5) 70%,rgba(8,8,11,.72) 100%); } .hero__content{max-width:60rem} .hero .eyebrow{margin-bottom:1.4rem} .hero h1{margin:0 0 1.4rem} .hero .lead{color:var(--on-dark-soft);font-size:clamp(1.05rem,1.5vw,1.25rem);margin-bottom:2rem} .hero .btn-row{margin-bottom:2.4rem} /* Pastilles de mots-clés */ .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;list-style:none} .chip{ font-family:var(--font-mono);font-size:.7rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase; color:var(--on-dark-soft);background:rgba(245,196,0,.06); border:1px solid rgba(245,196,0,.28);border-radius:var(--r-pill); padding:.4rem .85rem; } .chip--star{color:var(--yellow);border-color:var(--yellow);background:rgba(245,196,0,.12)} /* Bandeau de stats hero */ .hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.12)} .hero-stats .num{font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--yellow)} .hero-stats dt{order:2;font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-top:.4rem} .hero-stats dd{order:1} .hero-stat{display:flex;flex-direction:column} /* ── 11. BANDE DE RÉASSURANCE (trust strip) ───────────────────────────── */ .trust{background:var(--yellow);color:var(--ink)} .trust .wrap{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:680px){.trust .wrap{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.trust .wrap{grid-template-columns:repeat(4,1fr)}} .trust-item{ display:flex;align-items:center;gap:.8rem; padding:1.15rem .5rem;font-weight:700;font-size:.92rem; } .trust-item+.trust-item{border-top:1px solid rgba(14,14,16,.14)} @media(min-width:680px){ .trust-item{justify-content:center;border-top:none!important;border-left:1px solid rgba(14,14,16,.14)} .trust-item:nth-child(odd){border-left:none} } @media(min-width:1024px){ .trust-item{border-left:1px solid rgba(14,14,16,.14)!important} .trust-item:first-child{border-left:none!important} } .trust-item svg{width:24px;height:24px;flex:none} /* ── 12. CARTES ────────────────────────────────────────────────────────── */ .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.5rem,2.4vw,2rem);position:relative;overflow:hidden; transition:transform var(--t) var(--e-out),border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out); } .card:hover{transform:translateY(-5px);border-color:var(--yellow);box-shadow:var(--sh-2)} .band--dark .card:hover,.band--soft .card:hover{box-shadow:var(--sh-dark),0 0 0 1px rgba(245,196,0,.4)} /* Lien étiré : rend toute la carte cliquable, le titre sert de libellé accessible */ .stretch{color:inherit;text-decoration:none} .stretch::after{content:"";position:absolute;inset:0;z-index:3} .card:has(.stretch){cursor:pointer} .card:has(.stretch:focus-visible){outline:3px solid var(--focus);outline-offset:2px} .card:has(.stretch) h3 .stretch:focus-visible{outline:none} /* Carte service */ .svc{display:flex;flex-direction:column} .svc__icon{ width:54px;height:54px;border-radius:14px;flex:none; display:grid;place-items:center;margin-bottom:1.2rem; background:var(--yellow);color:#0a0a0a;box-shadow:var(--sh-1); transition:transform var(--t-slow) var(--e-soft); } .svc:hover .svc__icon{transform:rotate(-6deg) scale(1.06)} .svc__icon svg{width:26px;height:26px} .svc__num{ position:absolute;top:1.1rem;right:1.3rem; font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--fg-mute); } .svc h3{margin-bottom:.5rem} .svc p{color:var(--fg-soft);font-size:.95rem;line-height:1.6} /* Carte service vedette (résine) */ .svc--star{background:var(--yellow);border-color:transparent;color:var(--ink);box-shadow:var(--glow)} .svc--star .svc__icon{background:var(--ink);color:var(--yellow)} .svc--star p{color:var(--on-yellow-soft)} .svc--star .svc__num{color:rgba(14,14,16,.45)} .svc--star:hover{border-color:transparent;box-shadow:0 26px 64px -20px var(--yellow-glow)} .ribbon{ display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start; background:var(--ink);color:var(--yellow); font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:.35rem .7rem;border-radius:var(--r-pill);margin-bottom:1rem; } .ribbon svg{width:14px;height:14px;flex:none} .svc__save{ margin-top:1.1rem;align-self:flex-start; background:var(--ink);color:var(--yellow); font-family:var(--font-display);font-weight:900;font-size:1.05rem;letter-spacing:.01em; padding:.45rem 1rem;border-radius:var(--r-sm); } /* ── 13. STATS / CHIFFRES ──────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .stat{background:var(--bg);padding:1.6rem 1rem;text-align:center} .stat .num{font-size:clamp(2rem,3.4vw,2.8rem);color:var(--yellow)} .band--light .stat .num{color:var(--on-light)} .stat dt{order:2;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);margin-top:.4rem} .stat dd{order:1} /* ── 14. SPLIT (texte + média) ─────────────────────────────────────────── */ .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center} @media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--media-first>.split__media{order:-1}} .split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)} .split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5} .split__media--wide img{aspect-ratio:4/3} .media-tag{ position:absolute;left:1.1rem;bottom:1.1rem;right:1.1rem; background:linear-gradient(0deg,rgba(0,0,0,.88),transparent); padding:2rem 1rem .2rem;color:#fff; } .media-tag b{font-family:var(--font-display);color:var(--yellow);display:block;font-size:1.1rem;letter-spacing:-.01em} .media-tag span{font-size:.85rem;color:rgba(255,255,255,.8)} .media-badge{ position:absolute;top:-14px;right:-12px;background:var(--yellow);color:var(--ink); padding:.8rem 1rem;border-radius:var(--r-sm);text-align:center;box-shadow:var(--glow); } .media-badge .num{font-size:1.7rem} .media-badge span{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.1rem} /* Liste à puces « check » */ .checks{list-style:none;display:grid;gap:.7rem} .checks li{display:flex;align-items:flex-start;gap:.7rem;color:var(--fg-soft)} .checks svg{width:22px;height:22px;flex:none;color:var(--yellow);margin-top:.05rem} .band--light .checks svg{color:var(--on-light)} /* ── 15. COMPARATEUR AVANT / APRÈS (accessible, clavier) ───────────────── */ .compare{position:relative;border-radius:var(--r-lg);overflow:hidden;border:2px solid var(--yellow);aspect-ratio:16/10;user-select:none} .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .compare__after{clip-path:inset(0 0 0 var(--pos,50%))} .compare__line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:var(--yellow);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 14px rgba(245,196,0,.6)} .compare__grip{ position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%;background:var(--yellow);color:#0a0a0a; display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.5);pointer-events:none; } .compare__grip svg{width:24px;height:24px} .compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize} .compare__tag{position:absolute;top:.9rem;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;padding:.3rem .7rem;border-radius:var(--r-xs);z-index:2;pointer-events:none} .compare__tag.is-before{left:.9rem;background:rgba(0,0,0,.78);color:#fff} .compare__tag.is-after{right:.9rem;background:var(--yellow);color:#0a0a0a} /* ── 16. TABLE COMPARATIVE ─────────────────────────────────────────────── */ .vstable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)} .vstable__head,.vstable__row{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center} .vstable__head{background:var(--card-2);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} .vstable__head>*,.vstable__row>*{padding:.9rem 1rem} .vstable__row{border-top:1px solid var(--line)} .vstable__row>*:first-child{color:var(--fg-mute);font-size:.82rem;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase} .vstable .old{color:var(--fg-mute);text-decoration:line-through;text-decoration-thickness:1px} .vstable .new{color:var(--yellow);font-weight:700} .band--light .vstable .new{color:var(--on-light)} .vstable__head .col-new{color:var(--yellow)} .band--light .vstable__head .col-new{color:var(--on-light)} /* ── 17. TÉMOIGNAGES ───────────────────────────────────────────────────── */ .quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;position:relative} .quote::before{content:"“";position:absolute;top:.4rem;right:1.2rem;font-family:var(--font-display);font-size:4rem;line-height:1;color:var(--yellow);opacity:.18} .stars{display:inline-flex;gap:.15rem;color:var(--yellow);margin-bottom:1rem} .stars svg{width:18px;height:18px} .band--light .stars{color:var(--yellow-deep)} .quote p{color:var(--fg);font-style:italic;line-height:1.7;margin-bottom:1.4rem} .quote__author{display:flex;align-items:center;gap:.8rem} .avatar{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:#0a0a0a;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.1rem;flex:none} .quote__author b{display:block;font-size:.92rem} .quote__author span{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;color:var(--fg-mute)} .quote__author span svg{width:14px;height:14px;color:var(--yellow)} /* Bloc note Google */ .gscore{max-width:640px;margin-inline:auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem)} .gscore .num{font-size:clamp(3.4rem,8vw,5rem);color:var(--yellow)} .band--light .gscore .num{color:var(--on-light)} .gbadge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem 1.1rem;font-weight:700;font-size:.8rem;margin-bottom:1.4rem} .band--light .gbadge{background:#fff} .stars--lg{gap:.3rem;margin:.4rem 0 1rem} .stars--lg svg{width:26px;height:26px} /* ── 18. PROCESS (échelle d'étapes) ────────────────────────────────────── */ .steps{display:grid;gap:1.5rem;counter-reset:step} @media(min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}} .step{position:relative;padding-top:1.5rem} .step__n{ width:56px;height:56px;border-radius:16px;display:grid;place-items:center; font-family:var(--font-display);font-weight:900;font-size:1.5rem; background:var(--yellow);color:#0a0a0a;margin-bottom:1.1rem;box-shadow:var(--sh-1); } .step h3{margin-bottom:.4rem} .step p{color:var(--fg-soft);font-size:.9rem} .steps--line .step::before{content:"";position:absolute;top:calc(1.5rem + 28px);left:64px;right:-1.5rem;height:2px;background:var(--line-strong);z-index:0} @media(max-width:767px){.steps--line .step::before{display:none}} .steps--line .step:last-child::before{display:none} /* ── 19. GALERIES PHOTOS ───────────────────────────────────────────────── */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3} .shot img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out),filter var(--t-slow)} .shot:hover img{transform:scale(1.05)} .shot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .8rem; background:linear-gradient(0deg,rgba(0,0,0,.82),transparent); color:#fff;font-family:var(--font-display);font-weight:700;font-size:.98rem; transform:translateY(8px);opacity:0;transition:transform var(--t) var(--e-out),opacity var(--t); } .shot:hover figcaption,.shot:focus-within figcaption{transform:none;opacity:1} .shot--wide{grid-column:span 2} @media(max-width:640px){.shot--wide{grid-column:span 1}} /* Avant/après en duo */ .ba{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)} .ba__imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);aspect-ratio:2/1} .ba__half{position:relative;overflow:hidden} .ba__half img{width:100%;height:100%;object-fit:cover} .ba__lab{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;padding:.3rem} .ba__lab.is-before{background:rgba(0,0,0,.8);color:#fff} .ba__lab.is-after{background:var(--yellow);color:#0a0a0a} .ba__info{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem} .ba__info b{font-family:var(--font-display);font-size:1rem} .ba__info span{font-size:.8rem;color:var(--fg-mute)} .tagpill{background:var(--yellow);color:#0a0a0a;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--r-pill)} /* ── 20. MARQUES PARTENAIRES ───────────────────────────────────────────── */ .brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem} .brand-card{background:#fff;border-radius:12px;padding:1rem 1.6rem;height:84px;display:grid;place-items:center;min-width:150px} .brand-card img{max-height:48px;max-width:120px;object-fit:contain} .brand-card span{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:1.1rem} /* ── 21. FAQ ───────────────────────────────────────────────────────────── */ .faq{display:grid;gap:.7rem;max-width:var(--wrap-narrow);margin-inline:auto} .faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color var(--t)} .faq details[open]{border-color:var(--line-strong)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer; padding:1.2rem 1.4rem;font-weight:700;font-size:1.02rem;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";width:22px;height:22px;flex:none;background:var(--yellow); -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E"); transition:transform var(--t) var(--e-out)} .faq details[open] summary::after{transform:rotate(45deg)} .faq .faq__a{padding:0 1.4rem 1.3rem;color:var(--fg-soft);font-size:.96rem;line-height:1.7} .faq .faq__a>*+*{margin-top:.7rem} .faq .faq__a ul{padding-left:1.2rem} .faq .faq__a strong{color:var(--fg)} /* ── 22. FORMULAIRE ────────────────────────────────────────────────────── */ .form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem)} .field{display:grid;gap:.4rem;margin-bottom:1rem} .field label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft)} .field .req{color:var(--yellow)} .band--light .field .req{color:var(--yellow-deep)} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;border-radius:var(--r-sm); background:var(--bg);border:1.5px solid var(--field);color:var(--fg); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .band--light .field input,.band--light .field select,.band--light .field textarea{background:#fff} .field input::placeholder,.field textarea::placeholder{color:var(--fg-mute);opacity:.85} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,196,0,.16)} .band--light .field input:focus,.band--light .field select:focus,.band--light .field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.12)} .field textarea{min-height:110px;resize:vertical} .field[aria-hidden]{display:none} .field .hint{font-family:var(--font-body);font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--fg-mute)} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#E8602C} .field .err{color:#FF8A5B;font-family:var(--font-body);font-size:.8rem;letter-spacing:0;text-transform:none} .band--light .field .err{color:#B83205} .form-row{display:grid;gap:1rem} @media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}} .form__note{font-size:.78rem;color:var(--fg-mute);text-align:center;margin-top:.8rem} /* Message de confirmation/erreur (envoi AJAX, sans quitter le site) */ .form-msg{display:flex;gap:.65rem;align-items:flex-start;margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-2);color:var(--fg);font-size:.92rem;line-height:1.5;animation:fmIn .35s var(--e-out)} .form-msg[hidden]{display:none} .form-msg a{color:var(--yellow);font-weight:700;text-decoration:underline} .form-msg::before{content:"";width:21px;height:21px;flex:none;margin-top:.05rem;background:var(--fm-ic,var(--yellow));-webkit-mask:no-repeat center/contain var(--fm-mask);mask:no-repeat center/contain var(--fm-mask)} .form-msg.is-ok{--fm-ic:#34D399;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.10);--fm-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")} .form-msg.is-err{--fm-ic:#F2935C;border-color:rgba(242,147,92,.45);background:rgba(242,147,92,.10);--fm-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.3a2 2 0 0 1 3.4 0l8 14A2 2 0 0 1 20 20H4a2 2 0 0 1-1.7-2.7z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")} @keyframes fmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Cartes contact */ .contact-list{display:grid;gap:.7rem} .contact-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);transition:transform var(--t) var(--e-out),border-color var(--t)} a.contact-item:hover{transform:translateX(5px);border-color:var(--yellow)} .contact-item__ic{width:44px;height:44px;border-radius:12px;background:var(--yellow);color:#0a0a0a;display:grid;place-items:center;flex:none} .contact-item__ic svg{width:22px;height:22px} .contact-item dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)} .contact-item dd{font-weight:700;font-size:.98rem} /* ── 23. CTA BAND ──────────────────────────────────────────────────────── */ .cta{text-align:center} .cta h2{margin-bottom:.6rem} .cta p{color:var(--fg-soft);margin-bottom:1.8rem;max-width:52ch;margin-inline:auto} /* Boîte CTA encadrée (pages internes) */ .cta-box{background:var(--yellow);color:var(--ink);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);text-align:center;box-shadow:var(--glow)} .cta-box h2{margin-bottom:.5rem} .cta-box p{color:var(--on-yellow-soft);margin-bottom:1.6rem} /* ── 24. TUILES DE LIENS (services / communes) ─────────────────────────── */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem} .tile{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);font-weight:600;font-size:.9rem;transition:transform var(--t) var(--e-out),border-color var(--t),background var(--t)} .tile:hover{transform:translateY(-3px);border-color:var(--yellow)} .tile svg{width:20px;height:20px;color:var(--yellow);flex:none} .band--light .tile svg{color:var(--on-light)} .tiles--communes{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .tiles--communes .tile{font-size:.84rem;color:var(--fg-soft)} .tiles--communes .tile:hover{color:var(--fg)} /* Pastilles communes (zone jaune) */ .commune-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:880px;margin-inline:auto} .commune-pills a,.commune-pills span{ background:rgba(14,14,16,.9);color:var(--paper);border-radius:var(--r-pill); padding:.45rem 1rem;font-size:.82rem;font-weight:600;transition:transform var(--t) var(--e-out),background var(--t)} .commune-pills a:hover{background:#000;color:var(--yellow);transform:translateY(-2px)} .commune-pills .is-main{background:#000;color:var(--yellow);font-weight:700} /* ── 25. VÉRIF ZONE ────────────────────────────────────────────────────── */ .zone-check{max-width:600px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .zone-check__head{background:var(--yellow);color:var(--ink);padding:1rem 1.4rem;display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.1rem} .zone-check__head svg{width:22px;height:22px} .zone-check__body{padding:1.4rem} .zone-form{display:flex;gap:.6rem;flex-wrap:wrap} .zone-form input{flex:1;min-width:140px} .zone-result{margin-top:1rem;padding:1rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;display:none} .zone-result.is-show{display:block} .zone-result.is-ok{background:rgba(245,196,0,.1);border:1px solid var(--yellow);color:var(--fg)} .zone-result.is-no{background:var(--card-2);border:1px solid var(--line-strong);color:var(--fg)} .zone-result a{color:var(--yellow);font-weight:700;text-decoration:underline} .band--light .zone-result a{color:var(--on-light)} /* ── 26. FOOTER ────────────────────────────────────────────────────────── */ .footer{background:#08080A;color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:1px solid rgba(255,255,255,.08);--focus:var(--yellow)} .footer__top{display:grid;gap:2.5rem;grid-template-columns:1fr} @media(min-width:720px){.footer__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr}} .footer h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:1rem} .footer ul{list-style:none;display:grid;gap:.5rem} .footer a{color:var(--on-dark-soft);font-size:.9rem;transition:color var(--t-fast),transform var(--t-fast);display:inline-block} .footer a:hover{color:var(--yellow);transform:translateX(3px)} .footer__brand b{font-family:var(--font-display);font-weight:800;font-size:1.4rem} .footer__brand b i{color:var(--yellow);font-style:normal;font-weight:500} .footer__brand p{color:var(--on-dark-mute);font-size:.88rem;margin:.6rem 0 1rem;max-width:34ch} .footer__legal{color:var(--on-dark-mute);font-size:.82rem} .footer__copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:var(--on-dark-mute);font-size:.8rem;line-height:1.7} .footer__copy i{color:var(--yellow);font-style:normal} .gchip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(245,196,0,.1);border:1px solid rgba(245,196,0,.3);color:var(--yellow);padding:.45rem .9rem;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;margin-top:.4rem} .gchip svg{width:15px;height:15px} /* ── 27. BOUTON FLOTTANT ───────────────────────────────────────────────── */ .float-call{ position:fixed;right:1.1rem;bottom:1.1rem;z-index:var(--z-float); display:inline-flex;align-items:center;gap:.55rem; background:var(--yellow);color:#0a0a0a;font-weight:800;font-size:.92rem; padding:.8rem 1.3rem;border-radius:var(--r-pill);box-shadow:0 12px 34px -8px var(--yellow-glow); transition:transform var(--t) var(--e-out),box-shadow var(--t); } .float-call svg{width:20px;height:20px} .float-call:hover{transform:scale(1.05);box-shadow:0 18px 44px -8px var(--yellow-glow)} .float-call .lbl-full{display:none} @media(min-width:560px){.float-call .lbl-full{display:inline}.float-call .lbl-short{display:none}} /* ── 28. PROSE (articles / mentions) ───────────────────────────────────── */ .prose{max-width:68ch} .prose>*+*{margin-top:1.1rem} .prose h2{margin-top:2.4rem;font-size:clamp(1.6rem,3vw,2.2rem)} .prose h3{margin-top:1.8rem} .prose p,.prose li{color:var(--fg-soft);line-height:1.8} .prose strong{color:var(--fg)} .prose ul,.prose ol{padding-left:1.3rem;display:grid;gap:.5rem} .prose a{color:var(--yellow);text-decoration:underline;text-underline-offset:.15em} .band--light .prose a{color:var(--on-light)} .prose blockquote{border-left:3px solid var(--yellow);padding-left:1.2rem;font-style:italic;color:var(--fg)} /* Fil d'ariane */ .crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:var(--fg-mute);font-family:var(--font-mono);letter-spacing:.04em} .crumbs a:hover{color:var(--yellow)} .crumbs span[aria-hidden]{opacity:.5} /* ── 29. MOTION ────────────────────────────────────────────────────────── */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)} .reveal.is-in{opacity:1;transform:none} .js [data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)} [data-stagger].is-in>*{opacity:1;transform:none} [data-stagger].is-in>*:nth-child(1){transition-delay:.0s} [data-stagger].is-in>*:nth-child(2){transition-delay:.07s} [data-stagger].is-in>*:nth-child(3){transition-delay:.14s} [data-stagger].is-in>*:nth-child(4){transition-delay:.21s} [data-stagger].is-in>*:nth-child(5){transition-delay:.28s} [data-stagger].is-in>*:nth-child(6){transition-delay:.35s} /* Apparition du hero au chargement */ .js .hero [data-load]{opacity:0;transform:translateY(26px)} body.is-ready .hero [data-load]{animation:rise .9s var(--e-out) forwards} body.is-ready .hero [data-load="2"]{animation-delay:.1s} body.is-ready .hero [data-load="3"]{animation-delay:.2s} body.is-ready .hero [data-load="4"]{animation-delay:.3s} body.is-ready .hero [data-load="5"]{animation-delay:.4s} @keyframes rise{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal,[data-stagger]>*,.hero [data-load]{opacity:1!important;transform:none!important} } /* ── 29b. TABLE DE DONNÉES ─────────────────────────────────────────────── */ .dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)} .dtable{width:100%;border-collapse:collapse;min-width:480px} .dtable caption{text-align:left;padding:1rem 1.2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)} .dtable th,.dtable td{padding:.95rem 1.2rem;text-align:left;border-top:1px solid var(--line)} .dtable thead th{background:var(--card-2);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);border-top:none} .dtable tbody th{font-weight:700;color:var(--fg)} .dtable td.price{color:var(--yellow);font-weight:700} .band--light .dtable td.price{color:var(--on-light)} .dtable tbody tr:hover{background:var(--card-2)} .note-warn{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.86rem;color:var(--fg-mute)} .note-warn svg{width:20px;height:20px;flex:none;color:var(--yellow);margin-top:.1rem} /* Bandeau urgence */ .urgent{background:var(--yellow);color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem} .urgent__txt b{font-family:var(--font-display);font-weight:900;font-size:clamp(1.3rem,2.6vw,1.8rem);display:block;letter-spacing:-.01em} .urgent__txt span{font-weight:600} /* ── 29c. PORTFOLIO & ARTICLES ─────────────────────────────────────────── */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem} .pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--t) var(--e-out),border-color var(--t),box-shadow var(--t)} .pcard:hover{transform:translateY(-5px);border-color:var(--yellow);box-shadow:var(--sh-2)} .pcard__img{position:relative;aspect-ratio:4/3;overflow:hidden} .pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)} .pcard:hover .pcard__img img{transform:scale(1.05)} .pcard__tag{position:absolute;top:.7rem;left:.7rem;background:var(--yellow);color:#0a0a0a;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .65rem;border-radius:var(--r-pill)} .pcard__body{padding:1.1rem 1.2rem 1.3rem} .pcard__body b{font-family:var(--font-display);font-size:1.05rem;display:flex;align-items:center;gap:.4rem} .pcard__body b svg{width:16px;height:16px;color:var(--yellow)} .band--light .pcard__body b svg{color:var(--on-light)} .pcard__body p{color:var(--fg-soft);font-size:.86rem;margin-top:.3rem} /* Carte article (blog) */ .acard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--t) var(--e-out),border-color var(--t),box-shadow var(--t)} .acard:hover{transform:translateY(-5px);border-color:var(--yellow);box-shadow:var(--sh-2)} .acard__img{aspect-ratio:16/9;overflow:hidden} .acard__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)} .acard:hover .acard__img img{transform:scale(1.04)} .acard__body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .acard__cat{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)} .band--light .acard__cat{color:var(--on-light-soft)} .acard__body h3{font-size:1.2rem} .acard__body p{color:var(--fg-soft);font-size:.9rem;flex:1} .acard__more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--fg)} .acard__more svg{width:18px;height:18px;color:var(--yellow);transition:transform var(--t)} .acard:hover .acard__more svg{transform:translateX(3px)} /* Callout (astuce / avertissement) */ .callout{display:flex;gap:.8rem;align-items:flex-start;background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:var(--r-sm);padding:1rem 1.2rem;margin-block:1.4rem} .callout svg{width:22px;height:22px;flex:none;color:var(--yellow);margin-top:.1rem} .band--light .callout svg{color:var(--on-light)} .callout p{margin:0;color:var(--fg)} /* Méta article */ .ameta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--on-dark-mute)} .ameta span{display:inline-flex;align-items:center;gap:.4rem} .ameta svg{width:15px;height:15px;color:var(--yellow)} /* ── 30. UTILITAIRES ───────────────────────────────────────────────────── */ .center{text-align:center} .mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)} .divider{height:1px;background:var(--line);border:none} .tabnum{font-variant-numeric:tabular-nums}