/* =============================================================
MARGE BRUT — Direction Artistique « Encre & Miel »
Bleu encre profond sur papier crème chaud, accent miel doré.
Source de vérité : src/index.css (tokens), Button/Card/PageHeader/Landing.
À inclure dans toutes les pages :
Fonts requises :
Règle typo : var(--mono) UNIQUEMENT sur les nombres tabulaires (.num) ;
chrome/labels/boutons en var(--sans), titres en var(--display).
============================================================= */
:root{
/* palette Encre & Miel (alignée sur src/index.css) */
--bg: #FBF6EC;
--surface: #FFFFFF;
--ink: #15293D;
--ink-soft: #51606E;
/* --muted relevé pour respecter WCAG-AA (l'ancien #9AA6B2 échouait) */
--muted: #5E6B78;
--soft: #F4ECDD;
--hair: rgba(21, 41, 61, 0.10);
--hair-2: rgba(21, 41, 61, 0.18);
--primary: #173B5A;
--primary-deep: #0F2A43;
--accent: #E1A12B;
--accent-600: #C2851A;
--accent-soft: #F8E8C5;
--brand-soft: #E7EEF4;
--brand-700: #0F2A43;
--on-primary: #FBF6EC;
--good: #3C8C68;
/* radii alignés DA (cartes 14 · boutons 13 · chips 12 · pills 999) */
--r-pill: 999px;
--r-chip: 12px;
--r-card: 14px;
--r-btn: 13px;
--r-hero: 16px;
/* ombres douces & chaudes (sur encre) */
--shadow-card: 0 1px 2px rgb(21 41 61 / 0.05), 0 6px 20px rgb(21 41 61 / 0.06);
--shadow-pop: 0 2px 6px rgb(21 41 61 / 0.07), 0 12px 30px rgb(21 41 61 / 0.09);
/* density regular */
--pad-section: 56px;
--pad-hero: 80px;
--gap-block: 20px;
/* type — Bricolage Grotesque (titres) · Hanken Grotesk (corps) · Geist Mono (chiffres) */
--display: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--serif: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
}
/* dark mode (optionnel, déclenché par .dark sur ) */
html.dark{
--bg: #1A1410;
--surface: #241B14;
--ink: #F5EFE6;
--ink-soft: #D8C9B8;
--muted: #9C8975;
--soft: #2E241B;
--hair: #3A2E24;
--primary: #D6614A;
--primary-deep: #A0382A;
--accent: #E8B863;
--on-primary: #1A1410;
color-scheme: dark;
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
font-size: 16.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }
/* ───── layout shell ───── */
.wrap{
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.wrap-wide{
max-width: 1480px;
margin: 0 auto;
padding: 0 40px;
}
@media (max-width: 980px){
.wrap, .wrap-wide{ padding: 0 24px; }
}
/* ───── nav (sticky) ───── */
.nav{
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
background: color-mix(in oklab, var(--bg) 78%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
}
.nav-inner{
display: flex; align-items: center; justify-content: space-between;
height: 78px;
}
.logo{
font-family: var(--display);
font-weight: 900;
font-size: 22px;
letter-spacing: -0.063em;
color: var(--ink);
text-transform: uppercase;
line-height: 1;
display: inline-flex; align-items: center;
}
.logo em{ font-style: normal; color: var(--primary); }
/* Logo officiel (kit) : wordmark « MARGE BRUT. » en image, dimensionné par la hauteur. */
.logo-img{ display:block; height:22px; width:auto; }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
color: var(--ink-soft);
font-size: 15px; font-weight: 500;
transition: color .2s;
}
.nav-links a:hover{ color: var(--primary); }
@media (max-width: 980px){
.nav-links{ display:none; }
}
/* ───── buttons ───── */
.btn{
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
border: 1px solid transparent;
border-radius: var(--r-btn);
font-family: var(--sans);
font-size: 15.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: transform .18s cubic-bezier(.2,.7,.3,1.3),
background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ transform: translateY(-1.5px); }
.btn-primary{ background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-card); }
.btn-primary:hover{ background: var(--primary-deep); box-shadow: var(--shadow-pop); }
.btn-accent { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-accent:hover{ background: var(--accent-600); box-shadow: var(--shadow-pop); }
.btn-ghost {
background: var(--surface);
color: var(--ink);
border-color: var(--hair-2);
}
.btn-ghost:hover{ background: var(--soft); border-color: var(--hair-2); }
.btn-link{
background: transparent;
padding: 14px 4px;
color: var(--ink);
}
.btn-link:hover{ color: var(--primary); }
.btn .arr{
display: inline-block;
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.btn:hover .arr{ transform: translateX(4px); }
.btn.sent{ background: var(--good) !important; color: var(--on-primary); }
/* ───── chip eyebrow ───── */
.chip{
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: var(--r-pill);
font-size: 13px;
color: var(--ink-soft);
}
.chip .pulse{
width: 7px; height: 7px; border-radius: 50%;
background: var(--primary);
animation: mb-pulse 2.2s ease-out infinite;
}
@keyframes mb-pulse{
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 45%, transparent); }
70% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--primary) 0%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ───── eyebrow (sans bold, miel, uppercase + tracking 0.14em) ───── */
.eyebrow{
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
display: flex; align-items: center; gap: 12px;
}
/* ───── section heads ───── */
.section-head{
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.section-title{
font-family: var(--display);
font-weight: 800;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.02;
letter-spacing: -0.02em;
margin: 0;
max-width: 720px;
text-wrap: balance;
}
.section-title em{
font-family: var(--display);
font-style: normal;
font-weight: 800;
color: var(--accent-600);
}
.section-aside{
max-width: 360px;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.55;
}
/* ───── hero ───── */
.hero{
position: relative;
padding: var(--pad-hero) 0 var(--pad-section);
overflow: hidden;
}
.hero-grid{
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 72px;
align-items: center;
}
.hero h1{
font-family: var(--display);
font-weight: 800;
font-size: clamp(56px, 8.2vw, 116px);
line-height: 0.96;
letter-spacing: -0.02em;
margin: 26px 0 28px;
color: var(--ink);
text-wrap: balance;
}
.hero h1 em{
font-family: var(--display);
font-style: normal;
font-weight: 800;
color: var(--ink);
position: relative;
display: inline-block;
}
.hero h1 em::after{
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: 0.06em; height: 0.32em;
background: color-mix(in oklab, var(--accent) 55%, transparent);
border-radius: 2px;
z-index: -1;
}
.hero p.lead{
font-size: 19px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 520px;
margin: 0 0 36px;
text-wrap: pretty;
}
.hero-cta{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.hero-trust{
margin-top: 56px;
display:flex; align-items:center; gap:18px;
color: var(--muted);
font-size: 13.5px;
}
.avatars{ display:flex; }
.avatars > i{
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--bg);
margin-left: -8px;
display: inline-flex; align-items:center; justify-content:center;
background-size: cover;
background-position: center;
font-style: normal;
font: 600 11px/1 var(--sans);
color: var(--ink-soft);
}
.avatars > i:first-child{ margin-left: 0; }
.avatars > i:nth-child(1){ background: linear-gradient(135deg, #C9926A, #7A4C2C); }
.avatars > i:nth-child(2){ background: linear-gradient(135deg, #E1A12B, #C2851A); }
.avatars > i:nth-child(3){ background: linear-gradient(135deg, #173B5A, #0F2A43); }
.avatars > i:nth-child(4){ background: linear-gradient(135deg, #5E6E7E, #15293D); }
.avatars > i:nth-child(5){ background: var(--surface); }
/* hero photo (blob) */
.hero-photo-wrap{
position: relative;
aspect-ratio: 5 / 6.2;
width: 100%;
}
.hero-photo{
position: absolute; inset: 0;
border-radius: var(--r-hero);
background:
repeating-linear-gradient(48deg, transparent 0 14px, color-mix(in oklab, var(--ink) 5%, transparent) 14px 15px),
linear-gradient(160deg, var(--soft) 0%, color-mix(in oklab, var(--primary) 22%, var(--soft)) 100%);
overflow: hidden;
display: flex; align-items: flex-end;
padding: 28px;
}
.hero-photo img,
.hero-photo video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-photo .ph-label{
position: relative; z-index: 1;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: color-mix(in oklab, var(--on-primary) 78%, transparent);
text-transform: none;
background: color-mix(in oklab, var(--ink) 55%, transparent);
backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: var(--r-pill);
}
/* floating badges */
.badge-stat{
position: absolute;
bottom: -24px; left: -28px;
background: var(--ink);
color: var(--on-primary);
padding: 22px 26px;
border-radius: var(--r-card);
box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--ink) 50%, transparent);
transform: rotate(-3deg);
max-width: 240px;
z-index: 2;
}
.badge-stat .num{
font-family: var(--serif);
font-size: 52px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent);
}
.badge-stat .lbl{
font-size: 13px;
line-height: 1.35;
margin-top: 6px;
color: color-mix(in oklab, var(--on-primary) 75%, transparent);
}
.badge-meta{
position: absolute;
top: 24px; right: -16px;
background: var(--surface);
border: 1px solid var(--hair);
padding: 14px 18px;
border-radius: var(--r-pill);
display: flex; align-items: center; gap: 10px;
font-size: 13px;
transform: rotate(2.5deg);
box-shadow: 0 14px 32px -16px color-mix(in oklab, var(--ink) 30%, transparent);
z-index: 2;
}
.badge-meta i{
width: 8px; height: 8px;
background: var(--good);
border-radius: 50%;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 22%, transparent);
}
/* deco blobs */
.deco-blob{
position: absolute;
pointer-events: none;
z-index: -1;
filter: blur(40px);
opacity: .55;
}
.deco-blob.one{
top: -120px; left: -160px;
width: 480px; height: 480px;
background: radial-gradient(circle, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%);
}
.deco-blob.two{
bottom: -120px; right: 30%;
width: 360px; height: 360px;
background: radial-gradient(circle, color-mix(in oklab, var(--primary) 38%, transparent), transparent 70%);
}
/* ───── sections ───── */
.section{
padding: var(--pad-section) 0;
position: relative;
}
/* ───── stat cards ───── */
.stat-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.stat-card{
background: var(--surface);
border: 1px solid var(--hair);
border-radius: var(--r-card);
padding: 36px 30px 30px;
position: relative;
overflow: hidden;
min-height: 280px;
display: flex; flex-direction: column; justify-content: space-between;
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.stat-card:hover{
transform: translateY(-4px);
box-shadow: 0 24px 50px -20px color-mix(in oklab, var(--ink) 22%, transparent);
}
.stat-card.accent{ background: var(--ink); color: var(--on-primary); border-color: transparent; }
.stat-card.accent .num{ color: var(--accent); }
.stat-card.accent .stat-lbl{ color: color-mix(in oklab, var(--on-primary) 78%, transparent); }
.stat-card.accent .stat-note{
color: color-mix(in oklab, var(--on-primary) 55%, transparent);
border-color: color-mix(in oklab, var(--on-primary) 18%, transparent);
}
.stat-card.tint{ background: color-mix(in oklab, var(--primary) 9%, var(--surface)); }
.stat-card .num{
font-family: var(--serif);
font-weight: 400;
font-size: 100px;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--primary);
}
.stat-card .num em{ font-style: italic; }
.stat-lbl{
font-size: 15.5px;
font-weight: 500;
color: inherit;
margin-top: 20px;
}
.stat-note{
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink-soft);
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--hair);
}
.stat-card .corner{
position: absolute;
top: 24px; right: 24px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
opacity: .7;
}
/* ───── tool cards ───── */
.tool-group-head{
margin-bottom: 36px;
}
.tool-group-head h3{
font-family: var(--display);
font-weight: 800;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 14px;
text-wrap: balance;
}
.tool-group-head h3 em{ font-family: var(--display); font-style: normal; font-weight: 800; color: var(--accent-600); }
.tool-group-head p{
color: var(--ink-soft);
font-size: 16.5px;
max-width: 640px;
margin: 0;
}
.tool-group-head .group-tag{
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: 12px;
}
.tools-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 0;
}
.tool{
background: var(--surface);
border: 1px solid var(--hair);
border-radius: var(--r-card);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
text-decoration: none;
color: inherit;
}
.tool:hover{
transform: translateY(-4px);
box-shadow: 0 24px 50px -20px color-mix(in oklab, var(--ink) 22%, transparent);
}
.tool-img{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background:
repeating-linear-gradient(48deg, transparent 0 14px, color-mix(in oklab, var(--ink) 5%, transparent) 14px 15px),
linear-gradient(160deg, var(--soft) 0%, color-mix(in oklab, var(--primary) 18%, var(--soft)) 100%);
}
.tool-img img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tool:hover .tool-img img{ transform: scale(1.04); }
.tool-img .idx{
position: absolute;
top: 16px; left: 16px;
background: color-mix(in oklab, var(--bg) 80%, transparent);
backdrop-filter: blur(8px);
border: 1px solid var(--hair);
padding: 6px 12px;
border-radius: var(--r-pill);
font-family: var(--mono);
font-feature-settings: "tnum" 1;
font-size: 11px;
letter-spacing: 0;
color: var(--ink);
}
.tool-img .duration{
position: absolute;
top: 16px; right: 16px;
background: var(--ink);
color: var(--on-primary);
padding: 6px 12px;
border-radius: var(--r-pill);
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0;
}
.tool-body{
padding: 26px 28px 30px;
display: flex; flex-direction: column;
gap: 12px; flex: 1;
}
.tool-name{
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.tool-q{
font-family: var(--display);
font-weight: 600;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0;
color: var(--ink);
}
.tool-q em{ font-family: var(--display); font-style: normal; font-weight: 800; color: var(--accent-600); }
.tool-b{
color: var(--ink-soft);
font-size: 15px;
line-height: 1.5;
margin: 0;
flex: 1;
}
.tool-go{
display: inline-flex; align-items: center; gap: 8px;
color: var(--primary);
font-size: 14px;
font-weight: 600;
margin-top: 6px;
letter-spacing: 0;
}
.tool-go::after{
content: '→';
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.tool:hover .tool-go::after{ transform: translateX(4px); }
/* ───── pack cards (offre de service) ───── */
.packs{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pack{
background: var(--surface);
border: 1px solid var(--hair);
border-radius: var(--r-card);
overflow: hidden;
display: flex; flex-direction: column;
}
.pack.featured{
background: var(--ink);
color: var(--on-primary);
border-color: transparent;
}
.pack.featured .pack-tag{ color: var(--accent); }
.pack-img{
position: relative;
aspect-ratio: 16/10;
background: linear-gradient(160deg, var(--soft) 0%, color-mix(in oklab, var(--primary) 22%, var(--soft)) 100%);
overflow: hidden;
}
.pack-img img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.pack-body{ padding: 32px 32px 34px; }
.pack-tag{
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.pack-body h4{
font-family: var(--display);
font-weight: 800;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 12px 0 14px;
}
.pack-body p{ color: inherit; opacity: .85; margin: 0 0 22px; font-size: 15.5px; line-height: 1.5; }
.pack-price{
font-family: var(--display);
font-weight: 800;
font-size: 30px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--primary);
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed var(--hair);
}
.pack.featured .pack-price{
color: var(--accent);
border-top-color: color-mix(in oklab, var(--on-primary) 18%, transparent);
}
.pack-price small{
display: block;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0;
text-transform: none;
margin-top: 4px;
color: var(--ink-soft);
font-weight: 500;
}
.pack.featured .pack-price small{ color: color-mix(in oklab, var(--on-primary) 55%, transparent); }
/* ───── contact ───── */
.contact-card{
background: var(--surface);
border-radius: calc(var(--r-card) + 12px);
padding: 56px 64px;
position: relative;
overflow: hidden;
border: 1px solid var(--hair);
}
.contact-card::before{
content: '';
position: absolute;
width: 520px; height: 520px;
bottom: -260px; right: -180px;
background: radial-gradient(circle, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%);
z-index: 0;
}
.contact-card::after{
content: '';
position: absolute;
width: 320px; height: 320px;
top: -160px; left: 40%;
background: radial-gradient(circle, color-mix(in oklab, var(--accent) 28%, transparent), transparent 70%);
z-index: 0;
}
.contact-grid{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
position: relative;
z-index: 1;
align-items: start;
}
.contact-card h2{
font-family: var(--display);
font-weight: 800;
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1.0;
letter-spacing: -0.02em;
margin: 18px 0 24px;
text-wrap: balance;
}
.contact-card h2 em{ font-family: var(--display); font-style: normal; font-weight: 800; color: var(--accent-600); }
.contact-card .sub{
color: var(--ink-soft);
font-size: 17px;
line-height: 1.55;
max-width: 460px;
margin-bottom: 40px;
}
.contact-list{ display:flex; flex-direction:column; gap:6px; margin-top:20px; }
.contact-row{
display: flex; align-items: center; gap: 16px;
padding: 14px 0;
border-bottom: 1px dashed var(--hair);
}
.contact-row:last-child{ border-bottom: 0; }
.contact-row .ico{
width: 44px; height: 44px;
border-radius: 50%;
background: color-mix(in oklab, var(--primary) 12%, var(--surface));
color: var(--primary);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: var(--display);
font-weight: 700;
font-size: 22px;
font-style: normal;
}
.contact-row .meta{
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink-soft);
margin-bottom: 2px;
}
.contact-row .val{ font-size: 16.5px; color: var(--ink); font-weight: 500; }
/* form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column: 1 / -1; }
.field label{
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink-soft);
padding-left: 16px;
}
.field input, .field textarea, .field select{
appearance: none;
border: 1px solid var(--hair);
background: var(--bg);
color: var(--ink);
padding: 16px 20px;
border-radius: var(--r-chip);
font: inherit;
font-size: 15.5px;
outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
border-color: var(--primary);
background: var(--surface);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
}
.field textarea{ min-height: 130px; resize: vertical; line-height: 1.5; }
.form-submit{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-top: 8px; flex-wrap: wrap;
}
.form-submit .note{
font-size: 13px;
color: var(--muted);
display: flex; align-items: center; gap: 8px;
}
.form-submit .note i{
width: 6px; height: 6px; border-radius: 50%;
background: var(--good);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 22%, transparent);
}
/* ───── footer ───── */
.site-foot{
padding: 56px 0 48px;
border-top: 1px solid var(--hair);
margin-top: 24px;
}
.foot-grid{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 40px;
}
.foot-brand p{
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
max-width: 320px;
margin: 14px 0 0;
}
.foot-col h5{
font-family: var(--sans);
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--ink-soft);
margin: 0 0 16px;
font-weight: 600;
}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color: var(--ink-soft); font-size: 14.5px; transition: color .2s; }
.foot-col a:hover{ color: var(--primary); }
.foot-bottom{
display: flex; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-top: 32px;
border-top: 1px solid var(--hair);
color: var(--muted);
font-size: 13px;
}
.foot-bottom a{ color: var(--ink-soft); transition: color .2s; }
.foot-bottom a:hover{ color: var(--primary); }
/* ───── reveal animation (scroll) ───── */
.reveal{ opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal[data-d="2"]{ transition-delay: .08s; }
.reveal[data-d="3"]{ transition-delay: .16s; }
.reveal.in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity: 1; transform: none; transition: none; }
}
/* ───── responsive ───── */
@media (max-width: 980px){
:root{ --pad-hero: 80px; --pad-section: 80px; }
.hero-grid{ grid-template-columns: 1fr; gap: 64px; }
.stat-grid{ grid-template-columns: repeat(2, 1fr); }
.tools-grid{ grid-template-columns: repeat(2, 1fr); }
.packs{ grid-template-columns: 1fr; }
.contact-card{ padding: 48px 32px; }
.contact-grid{ grid-template-columns: 1fr; gap: 56px; }
.foot-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px){
.stat-grid{ grid-template-columns: 1fr; }
.tools-grid{ grid-template-columns: 1fr; }
.form{ grid-template-columns: 1fr; }
.badge-stat{ left: 8px; bottom: -16px; padding: 18px 22px; }
.badge-stat .num{ font-size: 42px; }
.stat-card .num{ font-size: 78px; }
.contact-card{ padding: 36px 24px; }
.foot-grid{ grid-template-columns: 1fr; gap: 32px; }
}
/* ───── header : zone auth (cohérente avec l'app/landing) ───── */
.nav-auth{ display:flex; align-items:center; gap:12px; }
.nav-auth .nav-login{ color:var(--ink-soft); font-weight:600; font-size:15px; padding:8px 6px; transition:color .2s; }
.nav-auth .nav-login:hover{ color:var(--primary); }
.acct{ position:relative; }
.acct-btn{
display:inline-flex; align-items:center; gap:8px;
border:1px solid var(--hair-2); background:var(--surface);
border-radius:var(--r-pill); padding:5px 12px 5px 5px; cursor:pointer;
font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink);
transition:border-color .2s, background .2s;
}
.acct-btn:hover{ border-color:color-mix(in oklab, var(--primary) 40%, var(--hair-2)); background:var(--soft); }
.acct-avatar{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:50%;
background:var(--primary); color:var(--on-primary); font-size:12px; font-weight:700; flex:none;
}
.acct-name{ max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-caret{ color:var(--muted); font-size:12px; transition:transform .2s; }
.acct.open .acct-caret{ transform:rotate(180deg); }
.acct-menu{
position:absolute; right:0; top:calc(100% + 8px); width:252px;
background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
box-shadow:var(--shadow-pop); overflow:hidden; display:none; z-index:60;
}
.acct.open .acct-menu{ display:block; }
.acct-menu .head{ padding:12px 14px; border-bottom:1px solid var(--hair); background:var(--soft); }
.acct-menu .head .nm{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-menu .head .sub{ font-size:12px; color:var(--muted); }
.acct-menu nav{ padding:6px; }
.acct-menu a, .acct-menu button{
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:9px 10px; border-radius:9px; border:0; background:none; cursor:pointer;
font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-soft);
}
.acct-menu a:hover, .acct-menu button:hover{ background:var(--soft); color:var(--ink); }
.acct-menu .sep{ height:1px; background:var(--hair); margin:6px 4px; }
.acct-menu .logout{ color:var(--crit, #BB3B2B); }
.acct-menu .logout:hover{ background:var(--crit-soft, #F7E2DC); color:var(--crit, #BB3B2B); }
@media (max-width:560px){ .acct-name{ display:none; } }